Diferentes efectos hover para imágenes

¿Aburrido de usar siempre los mismos efectos de hover sobre una imagen?

Nosotros estamos un poco hartos del opacity o del borde en la imagen que aunque son muy efectivos acaban siendo un poco repetitivos. Si te apetece probar algo nuevo y en ocasiones más efectista te dejamos este código para poder sacar el máximo partido a partir de CSS a tus hover.

Aqui tenéis en codepen el CSS y HTML necesarios para probar.
https://codepen.io/nxworld/pen/ZYNOBZ%20

No sale bien mi articulo en el Facebook

Muchas veces nos hemos encontrado con el problema de copiar el enlace a un artículo que queremos publicar en facebook y en la previsualización no se adjunta la imagen o el texto no es el correcto.

Algunas veces esto ocurreo por que la página no carga correctamente y tiene que volver a refrescar la página y volver a pegar el enlace

Campo de edición donde pegas el enlace

Campo de edición donde pegas el enlace

Aunque no siempre el problema es el mismo, muchas veces ocurre que Facebook tiene una versión cacheada (guardada) del artículo que no se corresponde con el artículo actualizado.

Lo que tienes que hacer es ir a la página de facebook:

https://developers.facebook.com/tools/debug/

En esta página introduce la url que quieres refrescar, en este caso la dirección web de tu artículo y pulsa el botón “Debug”. Después irás a otra página con dos botones, pulsa “Fetch new scrape information” para actualizar la versión que tiene Facebook de tu artículo y así podrás pegarlo y verás correctamente la versión actualizada del mismo.

página de facebook de debug

Página de debug de facebook para ver la información existente sobre una URL

Espero que os sirva de ayuda, a nosotros nos costó en su día un rato dar con la tecla.

Como buscar por fecha en gmail

Hemos escrito este artículo por que en más de una ocasión nos hemos visto con la necesidad de configurar filtros para organizar nuestros correos y dentro de los filtros que ofrece Google no encontramos la opción de la fecha.

Pues en realidad es bastante fácil realizar la búsqueda usando las cadenas after: y before: para filtrar tus correos.

La cadena before:aaaa/mm/dd expresa la fecha desde cuando quieres acceder a los correos.

La cadena after:aaaa/mm/dd expresa la fecha hasta cuando quieres ver tus correos.

Ejemplo para ver un día concreto en gmail

Para ver el día 2 de enero de 2015:

after:2015/01/02 before:2015/01/03

¿Cómo borrar correos antiguos en gmail?

En este caso si queremos por ejemplo borrar todos los correos anteriores al 2014 podemos usar la siguiente cadena en el campo de búsqueda:

before:2014/01/01

Una vez que hagamos esto podemos usar el campo de selección que aparece en la parte superior de todos los correos. Al seleccionar todos los de la página nos aparecerá un enlace “Seleccionar todas las conversaciones que coincidan con esta búsqueda”, pulsando este enlace podremos seleccionar todo y enviarlo a la papelera. Para deshacernos del todo habrá que entrar en la papelera y vaciarla o esperar unos 30 días para que la papelera se vacíe automáticamente.

enviar-mails-masivamente-papelera

Mensaje que aparece al seleccionar todas las filas de correos

 

Bueno, creo que se entiende bastante bien así que espero que os haya servido de ayuda para la próxima vez que os surja la necesidad de buscar correos por fechas.

Subelaweb es Google Partner

Después de nuestros años de experiencia en la web estaba claro que teníamos que probarnos un poco y darle oficialidad a esos conocimientos adquiridos.
El caso es que ya somos Google Partner y esto nos da cierta tranquilidad. La verdad es que llevábamos tiempo sin hacer exámenes y nos gusta la adrenalina de tener que hacerlo contrareloj.

Bueno, os animamos a todos los que estéis en este sector del marketing online a que os recicléis y aprobéis vuestros exámenes que no os quitarán mucho tiempo y siempre está bien que google os reconozca 😉

Alinear verticalmente con tres líneas de css

Bueno, nos ha parecido interesante dejaros unas líneas de código (extraídas del blog de Sebastian Ekström) que gracias a la nueva compatibilidad con CSS3 de los navegadores modernos permite alinear elementos verticalmente.


.contenido{
position: relative;
top: 50%;
transform: translateY(-50%);
}

Esto siempre ha sido un dolor de cabeza para todos los diseñadores. Hace muchos años cuando existía la hegemonía de la tabla, era todo más fácil. De hecho todavía hay gente que con mal criterio sigue usando tablas para maquetar ciertos contenidos y poder alinearlos en el centro vertical de un espacio.

Otra técnica que no necesita css3 es el posicionamiento absoluto que sin embargo obligaba a conocer la altura del elemento en cuestión o del contenedor de dicho elemento.


.contenedor{
position: relative;
}


.elemento{
position:absolute;
top:50%;
margin-top:-30px /*esta es la altura divida entre dos del elemento que hay que alinear*/
}

Bueno, si queréis afinar un poco más allá podéis crear un mixin que incluya todos los prefijos de navegador necesarios y que pueda ser incluido de forma más ágil:


@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


.contenido p {
@include vertical-align;
}

Esperamos que os sirva como ha nosotros nos ha servido y que recordéis que nunca se para de aprender. Testear y evolucionar todo es empezar!!

Provincias españolas separadas por coma

Bueno, hoy estaba buscando un lugar dónde hubiera un simple listado de las provincias españolas para hacer un copia y pega sencillo y al final no he podido.
Así que se me ocurrió dejarlo aquí por si le sirviera a alguien que se hubiera encontrado en la misma tesitura 😉

Un saludo y si falta alguna provincia o hay alguna falta ortográfica que corregir no dudéis en comentarlo.

Descargar provincias españolas separadas por coma

El concepto de Mobile First

mobile-first

Esta es una filosofía que entronca con el diseño multidispositivo y que defiende que el diseño de interfaz debe partir del diseño de las interfaces para dispositivos móviles, o sea, el móvil primero. La idea es que la adaptación progresiva a formatos más grandes se hará más fácil si se parte de la esencia de los elementos que se deben desarrollar en un dispositivo más pequeño. Digamos que sería algo así como ir de lo concreto a lo general, o al menos es como yo lo veo.

En la siguiente ilustración se hace una comparación de lo que sería una degradación gradual del diseño partiendo de formatos más grandes y siguiendo con el diseño de interfaces móviles y un diseño que se mejora progresivamente si se sigue el camino contrario.

progressive_enhancement

Algunos de los beneficios que promulga esta filosofía:

  • Permite el acceso a más usuarios (el 77% de la población mundial tiene móvil y el 85% de los móviles vendidos en 2011 estaba equipado con navegador)
  • Obliga a los diseñadores a centrarse en el contenido y funcionalidades centrales (¿que hacer cuando pierdes el 80% de tu pantalla para diseñar?)
  • Deja que los diseñadores innoven y aprovechen las ventajas de las nuevas tecnologías (geolocalización, eventos como arrastrar, pulsación múltiple, etc)

Os dejamos un dato por si pensáis que internet viene dentro de tu ordenador de sobremesa:
España es el país de Europa con mayor penetración de smartphones, al tener un 66% de los usuarios de móvil.
Casi 7 de cada 10 personas que tienen un móvil disponen de internet en su terminal.

Parece que en España cada vez más parece que va cobrando sentido eso del Mobile First. Si os interesa podéis encontrar el libro de Luke Wroblewsky, padre filosófico de esta idea.

Voy a ver como ha quedado esta entrada en el móvil 😉

El diseño responsive o diseño multidispositivo

Me imagino que a estas alturas gran parte de los profesionales del entorno web sabe lo que es un diseño multidispositivo. La verdad es que nosotros llevamos poniéndolo en práctica en nuestros proyectos desde hace años aunque no siempre es fácil que los clientes entiendan el esfuerzo que requiere.

La idea es básica, no es lo mismo ver un sitio web o aplicación en un ordenador con pantalla de 21″ que en uno de 12″, o mejor aún, no es lo mismo que verlo en un samsung ace de 320×480 a 165 ppi.

responsive-dispositivosAl inicio de los tiempos del móvil, la idea más extendida con respecto a los sitios web adaptados era que la mejor opción partía de crear un sitio web paralelo para móviles y mantener el mismo sitio web para tablets.

Hoy en día cada vez tenemos más claro que la “presentación” o frontend del sitio web es lo único que debe cambiar y que pare ello hay herramientas más que de sobra para conseguir un gran resultado para todos los dispositivos.

Hoy en día casi el 100% de nuevas plantillas para CMS como wordpress o joomla incluyen ya un soporte básico para la visualización multidispositivo que se traduce en la inclusión de frameworks como bootstrap o foundation que permiten de un modo sencillo la adaptación del sitio web a diferentes anchos haciendo la página flexible para ser vista en pequeños móviles o grandes pantallas de televisión.

No podemos conformarnos con que nuestro sitio web se vea correctamente en nuestra pantalla o en la de nuestro cliente, la realidad es que no podemos obviar que hoy en día un navegador web puede abrirse en multiples dispositivos y que no basta con “alejar o acercar el zoom” de nuestra pantalla para ver correctamente el contenido.

Nosotros por si acaso lo recordamos para que quede constacia 🙂

¿Problemas con el reCaptcha en Joomla y k2?

Si trabajas con joomla y tienes activado el reCaptcha en tu página puede que hayas experimentado problemas para hacer que funcione correctamente, y sobre todo con versiones antiguas de joomla y k2.

Uno de los problemas más extendidos ha sido el que viene derivado del cambio de la dirección de las APIs que usa reCaptcha. Tanto el plugin reCaptcha de joomla como versiones no actualizadas del famoso componente K2 apuntan a APIs antiguas. Google aloja ahora bajo su dominio dichas APIs.

¿Donde encuentro las urls?

Plugin joomla:

Buscar archivo:
plugins\captcha\recaptcha\recaptcha.php

Cambiar en dichos archivos
api.recaptcha.net/js/recaptcha_ajax.js
por
www.google.com/recaptcha/api/js/recaptcha_ajax.js

Componente K2:

Buscar archivos:
\components\com_k2\views\item\view.html.php
\components\com_k2\views\comments\view.html.php
\plugins\system\k2\k2.php

Cambiar en dichos archivos
api.recaptcha.net/js/recaptcha_ajax.js

por
www.google.com/recaptcha/api/js/recaptcha_ajax.js

Recordad que deberéis tener activado el reCaptcha para que funcione. Tanto el plugin como activar el recaptcha en las preferencias de k2 si queréis que funcione con k2.

Espero que os sirva de ayuda como nos ha servido a nosotros.

 

 

Datos demográficos e intereses de tu público con Google Analytics

Google Analytics sigue añadiendo funcionalides y aunque nos incomode cada cierto tiempo tener que adaptarnos a estos cambios, casi siempre son para mejor 🙂

En este caso se ha añadido un apartado dedicado a los intereses de los usuarios que permiten recopilar datos muy interesantes para segmentar y conocer algo más de los usuarios que nos visitan.

Para poder activar esta funcionalidad tendremos que ir a la pestaña de Público > Intereses y nos aparecerá un mensaje parecido a la imagen que hay a continuación:

Imagen de Google Analytics

Imagen de la pantalla de intereses de google analytics antes de activar el código de seguimiento

Después de Habilitar esta función tendremos que proceder a modificar el código de seguimiento para que podamos recibir los datos correctamente. Esta modificación es muy sencilla y como explica google solo afecta a una linea.

Tendremos que cambiar:

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

por lo siguiente:

ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';

Una vez hayamos realizado dicho cambio, volveremos a nuestra pestaña de Público > Intereses y validaremos el código.

Pantalla para validad código de seguimiento

Pantalla para validar código de seguimiento

Después de validarlo aparecerá una pantalla que nos indica que ya estamos recibiendo los datos y que podemos por fin usar esta funcionalidad.

Muy importante no introducir comentarios u otras modificaciones del código ya que podrían hacer que no validara.

También es interesante actualizar la política del sitio o aviso legal como Google nos explica en el siguiente enlace: políticas para la publicidad de display 

Bueno, espero que os animéis a usar esta nueva funcionalidad que puede aportar datos muy intersantes acerca de las personas que se acercan a tu sitio web.