Archive | October 2014

Inbox by Gmail: Diferente, pero mas semejante.

Lo siguiente a sido escrito después de unos días de uso y de acuerdo a la experiencia de usuario en el proceso.

Si somos totalmente honestos, el correo electrónico ha pasado a ser prejuiciado como algo de “no tanta prioridad”, si no me crees, te dejo algunas preguntas:

    -¿Cuánto hace que leíste un correo completo y con total gusto?
    .¿Abres tu mail fuera de que te llegue alguna notificación?
    -¿Sabes de que fuente vienen todos tus correos?
    -¿Hay correos que te llegan, no lees, y aun así, no te das el tiempo de eliminarlos?
    -¿Alguna vez te preocupo tener tu bandeja de entrada vacía?

La verdad es que ahora preferimos ser notificados por algún otro medio, ya sea social como twitter o facebook, o por algún servicio de mensajería instantánea. Inclusive pasa en temas estrictamente delicados, tal es el caso de Mark Zuckerberg, que concretó la negociación de Oculus Rift mediante Whatsapp. ¿Porque no por Mail?

Ahora, si pensamos que cada persona tiene más de una cuenta de correo, hace que el seguimiento a cada una de estas se vuelva más complicado y que frases como: “Te mando un correo” te haga pensar en llegar ya a tu ordenador para responder, porque la mayoría de nosotros respondemos correos desde nuestro ordenador y solo los leemos en smartphones.

Ya Google a impuesto estándares gracias a Gmail, pero no suficiente con ello, la nueva apuesta intenta reafirmar su compromiso de ser tu cliente de email favorito y hacerte la vida más sencilla con ello, en cualquier medio que uses, eso sí, separandola del producto principal para respetar la satisfacción de las personas felices con Gmail.

¿Que es Inbox?

Inbox quiere quitarte lo complicado de gestionar tu correo y que te concentres solo en lo que realmente es importante. Que el orden sea totalmente transparente para nosotros y quede todo perfecto tanto cronológico o por categorías puntualmente establecidas, nada de crear etiquetas o crear scripts.

Inspirado totalmente en otros clientes como MailBox su mejor diferenciador son los años de experiencia y la infraestructura que actualmente tiene Gmail, puedo decir que la interfaz no presentan ningún fallo y todo va muy fluido. 

Es sencillo de entender, de primera Inbox te indica tres cosas:

Inbox: Es la bandeja principal de correo que siempre conoces.

Snoozed: Son correos que vas a entender en cierto tiempo (tú lo configuras)

Done: Es un correo atendido y que quieres archivar pero no eliminar.

Y algunas otras categorías que de verdad funcionan, aunque igualmente me generaron un poco de desconfianza. Clasificaciones como Finance ordena todos tus recibos de Tarjeta de Crédito, Paypal, Uber y todo aquello que no te gustaría que ningún otro usuario viera. Puede ser un arma de dos filos si no estas atento a tu ordenador o teléfono y puedan encontrar esa información rápidamente, nunca esta de mas recomendarte la identificación por dos pasos.

Los llamados a la acción están muy marcados en la interfaz, de inmediato podemos enviar un correo a usuarios que frecuentamos, crear un correo desde cero y hasta crear un recordatorio:

Hangout sigue siendo protagonista de una conversación en tiempo real, tiene el mismo rendimiento visto en Gmail, pero ahora es más acertado y más cómoda su nueva ubicación, soy fan.

Tienes vista previa de todo lo adjunto de una categoría, como por ejemplo en compras, que te permite una vista previa todos los recibos de una sola vez, sin abrir un correo uno por uno. Ademas de archivar todo de una sola vez:

Tu no quieres Inbox, quieres Material Design

Lo primera reacción al ver la interfaz tanto web como móvil es lo bonita que es, es indudable que inbox es una maestría para demostrar las capacidades de Material Design como un concepto de diseño multiplataforma, pero si Google te ofreciera Gmail con la misma interfaz y omitiendo las capacidades de Inbox. ¿Estarias igual de feliz por una invitación?

¿Para quien es Inbox?

Inbox no es para todo el mundo (y no me refiero por las invitaciones), ya que la interfaz a primera vista requiere una pequeña curva de aprendizaje que no muchos están dispuestos a experimentar.

Se que mueres por probar inbox, pero por favor, no compres aquellas invitaciones que ofrecen por ebay, mejor prueba servicios parecidos como MailBox que son igual de buenos y aligeran el peso de la espera, aunque no dudo que Inbox tenga mas usuarios en el futuro. 

Google a comparación a otros productos a agilizado la adopción de usuarios, manda un correo y en algunos días tendrás tu invitación. Yo por el momento me quedare con el como cliente de correo predeterminado y espero que no dejen este proyecto como muchos otros o que maten del todo Gmail. Y por cierto, no tengo invitaciones :p

Enviar comentario

via Cristalab http://ift.tt/12OA6F8

Crea y personaliza tus propios botones para Twitter

Una de los componentes más importantes de una web es el social. La posibilidad de compartir dicho sitio con más personas para que sea más conocido, visitado y referenciado. Con tal objetivo, solemos insertar botones de redes sociales como facebook, twitter o youtube.

Cada una de estas plataformas nos ofrecen desde sus sitios oficiales la opción de generar el código html que debemos incluir en el sitio web para añadir el botón de dicha red social. En el caso de twitter podemos generar estos botones desde http://ift.tt/17dFOkT.

Pero, ¿qué hay si queremos personalizar dichos botones y darle un estilo diferente y no tan estándar? En este tutorial veremos cómo hacerlo con los botones de twitter, pudiendo modificar el icono del pájaro, el mensaje que contenga el botón y el fondo de dicho botón. Dividiremos el proceso en 3 partes:

  • Estilos Genéricos del botón
  • Personalización del botón
  • Funcionabilidad Share / Follow

Estos son algunos ejemplos de los resultados que podemos obtener:

Advertencias

Antes de comenzar a explicar el proceso de desarrollo de la personalización de estos botones, debemos tener en cuenta algunos puntos:

  • La experiencia de usuario: Ponte en la piel del visitante: si estás navegando por un sitio web que te parece interesante y deseas compartirlo, automáticamente tu mente se pone a buscar a lo largo de la página los botones sociales, entre ellos el propio de twitear. Tenemos interiorizadas las características estándares de dicho botón (pájaro azul, letras negras, fondo blanco aunque gris en la parte inferior, tamaño no muy grande, etc). El visitante no es adivina, no sabe si tú has personalizado dichos botones, por ello tampoco sería recomendable que generes un estilo tan tan diferente que haga que el usuario no lo localice aunque haya pasado la vista por delante de tu botón cuando rastrea la página buscándolo. Tiene que ser fácil de ver, fácil de asociar mentalmente con la acción de twitear, e intuitivo.
  • Selección de colores: Muy relacionado con el punto anterior, y para conseguirlo, debes seleccionar correctamente qué colores usar para el icono del pájaro y las letras que destaquen del fondo, y así mismo de todo ese conjunto que forma el botón para que esté correctamente integrado con el aspecto del sitio web. Por lo general lo recomendable es que el fondo del botón sea muy similar a el fondo del sitio web, de esa forma lo que más destaca es el icono del pájaro y el mensaje de "Tweet" o cualquier otro que queramos poner.

Estilos Genéricos del botón de Twitter

Todo este primer punto puedes seguirlo con el siguiente video

En primer lugar, veremos qué código html y css debemos asociar para poder generar un aspecto propio del botón del twitter.

La etiqueta html que usaremos es <a href=""></a>. El mensaje que queramos que tenga el botón podemos también cambiarlo a nuestro gusto, escribiéndolo dentro de la etiqueta, aunque te recomiendo no pongas algo tan extraño que desoriente al usuario y le haga desconfiar de que el botón realmente hará uso de Twitter. Este sería el código inicial

Código :

<a class="tweet" href="#">Comparte!</a>

Puesto que a continuación iremos viendo cómo crear gamas diferentes de aspecto para los botones, por el momento solo tendremos una clase css asociada al botón para dar los estilo genéricos, la clase "tweet" con las siguientes propiedades css

[css:1:e5c96ffaf4]
.tweet{
text-decoration: none;
border: 1px solid black;
padding: 5px 15px 5px 35px;
border-radius: 3px;
font-weight: bold;
font-size: 17px;
color: black;
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 15px;
position: relative;
}
[/css:1:e5c96ffaf4]

Lo siguiente ahora es insertar el icono del botón. Para ello acudimos a la herramienta online icomoon.io y seguimos los siguientes pasos:

  • Entramos en IcoMoon App
  • Seleccionamos los iconos que deseemos usar y pulsamos el botón "Font"
  • Descargamos la fuente personalizada con las imágenes vectoriales escogidas
  • Descomprimimos el archivo en el directorio de nuestro sitio web y lo asociamos al fichero html

Personalización del botón

Este segundo punto puedes seguirlo en este otro video

Una vez asociado la fuente que nos permite añadir el icono de twitter, en nuestro css le damos las siguientes propiedades al pseudo-elemento :before de nuestra clase "tweet"

[css:1:e5c96ffaf4]

.tweet:before{
content: "\e602";
font-family: ‘icomoon’;
padding-right: 10px;
font-size: 17px;
position: absolute;
top: 5px;
left: 12px;
}

[/css:1:e5c96ffaf4]

El código de la propiedad content dependerá de qué icono sea el que tu quieras incluir de entre todos los que elegiste.

Llegados a este punto tenemos nuestro botón con la imagen del pájaro. Lo que viene ahora es poder definir el fondo degradado de nuestro botón para personalizarlo.
Para ello usamos la herramienta online http://ift.tt/htttjl siguiendo los siguientes pasos:

  • Indicamos una orientación vertical en el degradado
  • Marcamos tantos puntos de transición de color como colores tenga nuestro fondo (preferiblemente 2) y cuáles son los colores que tendrá el fondo del botón
  • Copiamos el código generado para aplicarlo a la gama de colores del boton para tweet que estemos generando

Cada gama de estilos personalizados para los botones de twitter serán referenciados en código como otra clase css, la cual tendríamos que asociarla a la etiqueta html. De modo que las propiedades estándares serían la clase "normal" con los siguientes atributos:

Código :

<a class="tweet normal" href="">Twitealo!</a>

[css:1:e5c96ffaf4]

.normal{
color: #333;

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(252,252,252,1) 0%, rgba(214,214,214,1) 100%, rgba(4,5,7,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(214,214,214,1)), color-stop(100%,rgba(4,5,7,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#040507′,GradientType=0 ); /* IE6-9 */

}

.normal:before{
color: #37B4DD;
}

[/css:1:e5c96ffaf4]

Si queremos crear un botón tipo "dark" con tonos inversos, usaríamos estas propiedades:

[css:1:e5c96ffaf4]

.dark{
color: #f7f7f7;

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(25,26,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(25,26,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#191a3f’,GradientType=0 ); /* IE6-9 */

}

[/css:1:e5c96ffaf4]

Para tonalidades más cálidas tendríamos la clase "hot", quizás más útil para sitios webs de temática más femenina como blogs de maquillaje o similares.

[css:1:e5c96ffaf4]
.hot{

color: white;
text-shadow: 1px 1px 1px #151515,
-1px -1px 1px #151515;

background: rgb(252,186,232); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,186,232,1) 0%, rgba(137,36,23,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,186,232,1)), color-stop(100%,rgba(137,36,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fcbae8′, endColorstr=’#892417′,GradientType=0 ); /* IE6-9 */
}
.hot:before{
color: #F7AC0A;
}

[/css:1:e5c96ffaf4]

Y si queremos tonos más alegres podemos usar esta clase "happy":

[css:1:e5c96ffaf4]
.happy{

color: #01062B;

background: rgb(224,219,80); /* Old browsers */
background: -moz-linear-gradient(top, rgba(224,219,80,1) 0%, rgba(136,209,35,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,219,80,1)), color-stop(100%,rgba(136,209,35,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e0db50′, endColorstr=’#88d123′,GradientType=0 ); /* IE6-9 */
}

[/css:1:e5c96ffaf4]

Y con esto ya tendríamos todo el aspecto visual. Pero aún nos falta lo más importante: la funcionabilidad

Darle Funcionabilidad a los botones

Este último punto puedes seguirlo con el video final

Añadir Funcionabilidad Share

La clave para que el botón, al ser pulsado, realmente permita al usuario compartir el sitio que está visitando se halla en la propiedad href. El código que debamos atribuirle a dicha propiedad es el siguiente:

Código :

http://twitter.com/share?text=  mensaje que deseemos twitear, con url o menciones incluidas 

De modo que el resultado final del código html para el botón sería, por ejemplo:

Código :

<a class="tweet dark" href="http://twitter.com/share?text=estoy compartiendo algo de forma personalizada http://cristalab.com via @JoseCodFacilito">Twitealo!</a>

Añadir Funcionabilidad Follow

De nuevo, la clave para que nuestro botón permita seguir a un usuario de Twitter se encuentra en la propiedad href, pero con esta otra estructura:

Código :

https://twitter.com/intent/user?screen_name=@nombre_cuenta

Por ejemplo, yo pondría este código para que me sigan en Twitter

Código :

<a class="tweet seguir happy" href="https://twitter.com/intent/user?screen_name=@JoseCodFacilito">Sigueme :)</a>

Conclusión

Como puedes ver, no tienes por qué restringirte a dar el aspecto típico de Twitter a los botones de tu sitio web, puedes cambiarlos a algo más original, creativo y que llame más la atención, generando más interacción lo que facilitaría que tu web sea más compartida.
Por cierto, esto mismo puede hacerse con los botones de facebook. ¿Quieres saber cómo? ;)

Enviar comentario

via Cristalab http://feeds.cristalab.com/~r/clab/~3/FMB6LLVJ6i0/

Crea y perzonaliza tus propios botones para Twitter

Una de los componentes más importantes de una web es el social. La posibilidad de compartir dicho sitio con más personas para que sea más conocido, visitado y referenciado. Con tal objetivo, solemos insertar botones de redes sociales como facebook, twitter o youtube.

Cada una de estas plataformas nos ofrecen desde sus sitios oficiales la opción de generar el código html que debemos incluir en el sitio web para añadir el botón de dicha red social. En el caso de twitter podemos generar estos botones desde http://ift.tt/17dFOkT.

Pero, ¿qué hay si queremos personalizar dichos botones y darle un estilo diferente y no tan estándar? En este tutorial veremos cómo hacerlo con los botones de twitter, pudiendo modificar el icono del pájaro, el mensaje que contenga el botón y el fondo de dicho botón. Dividiremos el proceso en 3 partes:

  • Estilos Genéricos del botón
  • Personalización del botón
  • Funcionabilidad Share / Follow

Estos son algunos ejemplos de los resultados que podemos obtener:

Advertencias

Antes de comenzar a explicar el proceso de desarrollo de la personalización de estos botones, debemos tener en cuenta algunos puntos:

  • La experiencia de usuario: Ponte en la piel del visitante: si estás navegando por un sitio web que te parece interesante y deseas compartirlo, automáticamente tu mente se pone a buscar a lo largo de la página los botones sociales, entre ellos el propio de twitear. Tenemos interiorizadas las características estándares de dicho botón (pájaro azul, letras negras, fondo blanco aunque gris en la parte inferior, tamaño no muy grande, etc). El visitante no es adivina, no sabe si tú has personalizado dichos botones, por ello tampoco sería recomendable que generes un estilo tan tan diferente que haga que el usuario no lo localice aunque haya pasado la vista por delante de tu botón cuando rastrea la página buscándolo. Tiene que ser fácil de ver, fácil de asociar mentalmente con la acción de twitear, e intuitivo.
  • Selección de colores: Muy relacionado con el punto anterior, y para conseguirlo, debes seleccionar correctamente qué colores usar para el icono del pájaro y las letras que destaquen del fondo, y así mismo de todo ese conjunto que forma el botón para que esté correctamente integrado con el aspecto del sitio web. Por lo general lo recomendable es que el fondo del botón sea muy similar a el fondo del sitio web, de esa forma lo que más destaca es el icono del pájaro y el mensaje de "Tweet" o cualquier otro que queramos poner.

Estilos Genéricos del botón de Twitter

Todo este primer punto puedes seguirlo con el siguiente video

En primer lugar, veremos qué código html y css debemos asociar para poder generar un aspecto propio del botón del twitter.

La etiqueta html que usaremos es <a href=""></a>. El mensaje que queramos que tenga el botón podemos también cambiarlo a nuestro gusto, escribiéndolo dentro de la etiqueta, aunque te recomiendo no pongas algo tan extraño que desoriente al usuario y le haga desconfiar de que el botón realmente hará uso de Twitter. Este sería el código inicial

Código :

<a class="tweet" href="#">Comparte!</a>

Puesto que a continuación iremos viendo cómo crear gamas diferentes de aspecto para los botones, por el momento solo tendremos una clase css asociada al botón para dar los estilo genéricos, la clase "tweet" con las siguientes propiedades css

[css:1:fe697cd156]
.tweet{
text-decoration: none;
border: 1px solid black;
padding: 5px 15px 5px 35px;
border-radius: 3px;
font-weight: bold;
font-size: 17px;
color: black;
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 15px;
position: relative;
}
[/css:1:fe697cd156]

Lo siguiente ahora es insertar el icono del botón. Para ello acudimos a la herramienta online icomoon.io y seguimos los siguientes pasos:

  • Entramos en IcoMoon App
  • Seleccionamos los iconos que deseemos usar y pulsamos el botón "Font"
  • Descargamos la fuente personalizada con las imágenes vectoriales escogidas
  • Descomprimimos el archivo en el directorio de nuestro sitio web y lo asociamos al fichero html

Personalización del botón

Este segundo punto puedes seguirlo en este otro video

Una vez asociado la fuente que nos permite añadir el icono de twitter, en nuestro css le damos las siguientes propiedades al pseudo-elemento :before de nuestra clase "tweet"

[css:1:fe697cd156]

.tweet:before{
content: "\e602";
font-family: ‘icomoon’;
padding-right: 10px;
font-size: 17px;
position: absolute;
top: 5px;
left: 12px;
}

[/css:1:fe697cd156]

El código de la propiedad content dependerá de qué icono sea el que tu quieras incluir de entre todos los que elegiste.

Llegados a este punto tenemos nuestro botón con la imagen del pájaro. Lo que viene ahora es poder definir el fondo degradado de nuestro botón para personalizarlo.
Para ello usamos la herramienta online http://ift.tt/htttjl siguiendo los siguientes pasos:

  • Indicamos una orientación vertical en el degradado
  • Marcamos tantos puntos de transición de color como colores tenga nuestro fondo (preferiblemente 2) y cuáles son los colores que tendrá el fondo del botón
  • Copiamos el código generado para aplicarlo a la gama de colores del boton para tweet que estemos generando

Cada gama de estilos personalizados para los botones de twitter serán referenciados en código como otra clase css, la cual tendríamos que asociarla a la etiqueta html. De modo que las propiedades estándares serían la clase "normal" con los siguientes atributos:

Código :

<a class="tweet normal" href="">Twitealo!</a>

[css:1:fe697cd156]

.normal{
color: #333;

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(252,252,252,1) 0%, rgba(214,214,214,1) 100%, rgba(4,5,7,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(214,214,214,1)), color-stop(100%,rgba(4,5,7,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#040507′,GradientType=0 ); /* IE6-9 */

}

.normal:before{
color: #37B4DD;
}

[/css:1:fe697cd156]

Si queremos crear un botón tipo "dark" con tonos inversos, usaríamos estas propiedades:

[css:1:fe697cd156]

.dark{
color: #f7f7f7;

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(25,26,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(25,26,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#191a3f’,GradientType=0 ); /* IE6-9 */

}

[/css:1:fe697cd156]

Para tonalidades más cálidas tendríamos la clase "hot", quizás más útil para sitios webs de temática más femenina como blogs de maquillaje o similares.

[css:1:fe697cd156]
.hot{

color: white;
text-shadow: 1px 1px 1px #151515,
-1px -1px 1px #151515;

background: rgb(252,186,232); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,186,232,1) 0%, rgba(137,36,23,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,186,232,1)), color-stop(100%,rgba(137,36,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fcbae8′, endColorstr=’#892417′,GradientType=0 ); /* IE6-9 */
}
.hot:before{
color: #F7AC0A;
}

[/css:1:fe697cd156]

Y si queremos tonos más alegres podemos usar esta clase "happy":

[css:1:fe697cd156]
.happy{

color: #01062B;

background: rgb(224,219,80); /* Old browsers */
background: -moz-linear-gradient(top, rgba(224,219,80,1) 0%, rgba(136,209,35,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,219,80,1)), color-stop(100%,rgba(136,209,35,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e0db50′, endColorstr=’#88d123′,GradientType=0 ); /* IE6-9 */
}

[/css:1:fe697cd156]

Y con esto ya tendríamos todo el aspecto visual. Pero aún nos falta lo más importante: la funcionabilidad

Darle Funcionabilidad a los botones

Este último punto puedes seguirlo con el video final

Añadir Funcionabilidad Share

La clave para que el botón, al ser pulsado, realmente permita al usuario compartir el sitio que está visitando se halla en la propiedad href. El código que debamos atribuirle a dicha propiedad es el siguiente:

Código :

http://twitter.com/share?text=  mensaje que deseemos twitear, con url o menciones incluidas 

De modo que el resultado final del código html para el botón sería, por ejemplo:

Código :

<a class="tweet dark" href="http://twitter.com/share?text=estoy compartiendo algo de forma personalizada http://cristalab.com via @JoseCodFacilito">Twitealo!</a>

Añadir Funcionabilidad Follow

De nuevo, la clave para que nuestro botón permita seguir a un usuario de Twitter se encuentra en la propiedad href, pero con esta otra estructura:

Código :

https://twitter.com/intent/user?screen_name=@nombre_cuenta

Por ejemplo, yo pondría este código para que me sigan en Twitter

Código :

<a class="tweet seguir happy" href="https://twitter.com/intent/user?screen_name=@JoseCodFacilito">Sigueme :)</a>

Conclusión

Como puedes ver, no tienes por qué restringirte a dar el aspecto típico de Twitter a los botones de tu sitio web, puedes cambiarlos a algo más original, creativo y que llame más la atención, generando más interacción lo que facilitaría que tu web sea más compartida.
Por cierto, esto mismo puede hacerse con los botones de facebook. ¿Quieres saber cómo? ;)

Enviar comentario

via Cristalab http://ift.tt/1CZuF1d

Digits de Twitter: Tu teléfono es más seguro que tu email

Creemos que las contraseñas son seguras, pero nos reímos cuando celebridades pierden sus fotos.

Una internet más segura no es sólo tarea de Google, Apple o Dropbox. Entender doble autenticación es difícil, más para la generación que creció con usuarios, emails y passwords. Hoy Twitter dio un paso a hacerlo simple.

Twitter Digits cambia las contraseñas. Imagina cuentas que no están asociadas a tu email sino a tu teléfono. ¿Perdiste acceso? Mensaje de texto. ¿Quieres entrar en otro PC? Código a tu teléfono combinado con tu contraseña.

Por qué tiene sentido tener teléfono y no email

Las nuevas personas que se conectan a nuestro mundo digital no lo hacen en PCs. Están en smartphones y tablets. Twitter compartió, en su evento para devs Twitter Flight, que tienen problemas con los nuevos usuarios que no tienen una cuenta de correo. Personas en condiciones pobres, alejados de las grandes ciudades, que descubren la web por un teléfono.

Twitter inició conectada a los mensajes SMS y vuelve a sus raíces. Ahora prestan su infraestructura para llevar este servicio sin costo a 216 países y 28 lenguajes. Latinoamérica y España está incluida.

Cómo funciona Twitter digits con tu app

Agregas las librerías de desarrollo que te provee twitter y utilizas su infraestructura.

Cuando el usuario inicie sesión, ingresa su número de teléfono a tu app. Recibe un SMS con un código para validar e ingresar. Sin passwords, con un código seguro que llega al usuario cada vez que se solicita.

Del lado de los desarrolladores, obtenemos una validación del número de telefono del usuario y un usuario único generado y administrado por twitter. Ese lo podemos usar de base para nuestro sistema de usuarios o podemos conectarlo con cualquier sistema que ya tengamos creado.

Seas desarrollador de apps para Android o programador en Swift o Objective-C para iOS, puedes implementar Digits.

El peligro del "efecto Telmex" y el salir de la esfera hipster tech

Dos peligros tiene este sistema: No es amigable a viajeros que cambian de número en cada país e incentiva a los proveedores a cobrar por mensaje de texto recibido.

Hace no muchos años que Telmex en México cobraba por SMS enviado y recibido. Claro, esto un efecto del práctico monopolio impensable en otros países, y es un factor ya superado. Pero puede volver a pasar.

Lo importante es pensar en Digits como una tecnología que piensa fuera de los twittstars, fuera de las personas que "van a eventos" y son "influencers". Piensa en los seres humanos que no hacen parte de nuestra esfera, pero merecen conectarse al pulso del mundo.

Twitter vuelve a buscar a los programadores

Twitter perdió apoyo de la comunidad de desarrolladores. Jugaron a ser una de las plataformas más abiertas de nuestra historia, creamos apps, agregadores, clientes. Y luego bloqueos del API, adquisición de algunas apps que dejaron fuera a mucho del ecosistema. Tienen razones justificadas, pero dejaron un mal sabor de boca.

Por eso, hoy en el Centro de San Francisco han convocado a miles de desarrolladores al evento Twitter Flight.

Dick Costello, CEO de twitter abrió el evento mostrando Fabric, su nuevo ecosistema para desarrollo móvil apoyado por twitter. Quieren ayudarte a conectar tu aplicación a los tweets que tu comunidad genera en su red, quieren ayudarte a crear tweets naturales desde tus apps y ofrecer un ecosistema de herramientas que te harán la vida más fácil.

Creo que es un gran inicio y aplaudimos la iniciativa de Twitter.

Gracias a Christian que con mal wifi, ningún tipo de 3G disponible entre tanto geek y solo 10 minutos de batería compartío sus impresiones desde el evento Twitter Flight en San Francisco escribiendo este artículo.

Enviar comentario

via Cristalab http://ift.tt/1rh3zwT

Como elegir un monitor… y no por el tamaño

Al comprar un equipo nuevo, ya sea para jugar o trabajar, por lo general no prestamos mucha atención al monitor, aquí te explico algunos términos importantes que debes tener en cuenta al comprar una pantalla.

El tamaño

Lo primero que vemos en una pantalla o televisor es el tamaño, las empresas lo miden en pulgadas, es la distancia que hay desde una esquina inferior, a la esquina superior del lado contrario.

Resolución

Que tenga más pulgadas no significa que la calidad de la imagen sea mejor, hay muchas pantallas grandes que tienen resoluciones pequeñas, la resolución es la cantidad de pixeles que caben en la pantalla, los fabricantes muestran la cantidad de pixeles a lo horizontales por la cantidad de pixeles verticales, una pantalla con resolución Full HD cuenta con 1920×1080 píxeles de resolución, a esta resolución se le llama 1080p o 1080i, hay una diferencia entre estas dos que les contaré más adelante.

Entre más resolución, mayor cantidad de pixeles por pulgada.

Tiempo de respuesta

El tiempo de respuesta es la cantidad de tiempo que demora un píxel en cambiar de color, se mide en milisegundos, entre menos tiempo de respuesta tenga la pantalla, mejor, simple.

Frecuencia de actualización o ratio de refresco

Esta es la velocidad con la cual se puede cambiar la imagen de la pantalla, esto se mide en Hercios. El tiempo de respuesta mide la velocidad de cambio de color de cada pixel, la frecuencia de actualización mide cuánto demora en cambiar toda la imagen en la pantalla.

La mayoría de pantallas vienen a 60Hz, esto significa que la imagen puede cambiar 60 veces por segundo, en este punto es donde se diferencian las resoluciones 1080p y 1080i.

En 1080p, también llamado progresivo, toda la imagen se refresca a 60 cuadros por segundo a 60Hz, mientras que en 1080i (entrelazado) a 60Hz muestra primero las líneas pares y luego las impares, esto significa que usa 30Hz para las líneas pares y los otros 30Hz para las impares, esta diferencia hace que en videos con objetos en movimiento se vea una especie de fantasma que va detrás del objeto cuando va muy rápido.
Para contenido en 3D es recomendable usar pantallas con 120Hz, así usará 60Hz para cada ojo.

Tipo de panel

El tipo de panel también es importante, hay algunos que son buenos en unas cosas y otros en otras, no todos son buenos en todo.

Twisted Nematic (TN)

Es de las tecnologías más comunes, baratas y viejas del mercado, cuentan muy buenas con frecuencias de actualización, se pueden encontrar paneles TN a 144Hz, muy bueno para videojuegos y contenido 3D pero tiene problemas con los colores y el ángulo de visión, en especial el vertical, dependiendo el ángulo puede que veas unos colores más opacos y hace que se pierdan algunos detalles.

PVA, MVA, VA

Son mucho mejores que los TN mostrando colores y en ángulo de visión pero no tan buenos con el tiempo de respuesta, en especial desde blanco a negro, cuenta con muy buenos tiempos de respuesta de colores oscuros a oscuros.

In Plane Switching (IPS)

Los colores y los ángulos de visión de los IPS son superiores que los TN, PVA, MVA y VA. Este tipo de paneles son muy usados en móviles y tablets ya que no importa desde qué ángulo lo estes viendo, los colores varían muy poco. Son un poco más lentos en tiempos de respuesta que los TN y mucho más costosos.

Y estos son algunos de los términos que debes tener en cuenta al comprar una pantalla, revisa muy bien que estas comprando antes de hacerlo, no quieres arrepentirte luego de probarla en la comodidad de tu casa. Si me falto algún término que consideres importante no dudes en dejarlo en los comentarios.

Cuéntanos en los comentarios que pantalla tienes y como ha sido tu experiencia con ella.

Enviar comentario

via Cristalab http://ift.tt/1sllmXZ

Programa tu primer proyecto en Arduino

¿Qué es Arduino?

Arduino es una placa de hadware libre diseñada para facilitar el uso de la electrónica y está dirigida a cualquier persona. Existe una gran variedad de placas Arduino cada una consiste de un microcontrolador y puertos de entrada/salida cada placa es diferenciada de otra ya sea por su tamaño fisico, cantidad de memoria y/o funcionalidad.

Los puertos de entrada/salida son el medio por el cual Arduino detecta y afecta nuestro entorno estos puertos pueden ser digitales o analógicos con las cuales a través de sensores, intervención manual(botones, perillas, etc) o a través de una señal enviada por medio de una aplicación(web, movil o de escritorio) pueden afectar a nuestro entorno ya sea por medio de luces de control, motores y otros actuadores.

Un poco más que un simple hola mundo

El dia de hoy lo que vamos a realizar es un simple juego de piedra, papel o tijera.

¿Qué necesito antes de empezar?

Hardware

  • Una placa Arduino UNO, si tu ya cuentas con alguna placa Arduino diferente a esta la puedes usar sin problemas.
  • Una placa de pruebas.
  • 2 Leds RGB de cátodo común.
  • 6 Resistencias 150 ohms.

Todos estos materiales los puedes encontrar en cualquier electrónica decente o si prefieres comprarlos a través de cualquier tienda en linea, por ejemplo amazon tiene excelentes kits de iniciación muy baratos superiores a cualquiera que puedas comprar en una electrónica.

Software

Si no tienes instalado el entorno de desarrollo de Arduino los puedes descargar aquí y se encuentra disponible tanto para Linux, Mac OS X y Windows. Este entorno de desarrollo está escrito en Java, C y C++.

Ya tengo todo mi material ¿Y ahora?

Con los materiales listados anteriormente hay que armar el siguiente circuito:

Una vez listo el circuito vamos a realizar nuestro programa básicamente la programación en Arduino se estable en dos funciones principales que son:

setup(). En esta se declaran nuestros puertos como entradas/salidas o algún otro código de configuración que solo queramos que se active solo cuando se encienda o reinicie nuestra placa Arduino.

loop(). Esta función se encarga se ejecutar las instrucciones que hay dentro de ella infinitamente mientras nuestra placa Arduino este encendida.

Entonces lo primero que hay que hacer es declarar algunas constantes y unas variables globales para poder usarlas durante la ejecución de todo nuestro programa.

Código :

// Definimos constantes para el primer led RGB
#define led1Rojo 3
#define led1Verde 5
#define led1Azul 6

// Definimos constantes para el segundo led RGB
#define led2Rojo 9
#define led2Verde 10
#define led2Azul 11

// Almacena el valor de nuestra elección
char MiOpcion;

// Almacena el valor de la elección de Arduino
int respuestaArduino;

Despues dentro de nuestra función setup() establecemos el modo de funcionamiento para cada uno de nuestros pines con la instrución pinMode() que nos pide 2 paramentros:

Primero el número de pin con el que vamos a trabajar en este caso esta contenido dentro de cada una de nuestras constantes.

Segundo definir su modo de comportamiento ya sea entrada(INPUT) o salida(OUTPUT).

Código :

void setup(){ // Inicio setup()

// Estableciendo puertos como salida para el primer led RGB
pinMode(led1Rojo, OUTPUT);
pinMode(led1Verde, OUTPUT);
pinMode(led1Azul, OUTPUT);

// Estableciendo puertos como salida para el segundo led RGB
pinMode(led2Rojo, OUTPUT);
pinMode(led2Verde, OUTPUT);
pinMode(led2Azul, OUTPUT);

// Inicia la conexión serial a una velocidad de 9600 bits por segundo
Serial.begin(9600);
//Imprime en pantalla los siguientes mensajes
Serial.println("Arduino te da la bienvenida listo para jugar, empecemos!!");
Serial.println("Introduce 0 para elegir piedra, 1 para papel o 2 para tijera");

}// Fin setup()

Además necesitamos iniciar una conexión serial entre nuestra placa Arduino y nuestra computadora a través de nuestro cable USB y definirle un velocidad de transmición de datos. Si quieres leer un poco más sobre esto entra aquí.

Muy bien llegado a este punto tenemos todo nuestro código de configuración listo ahora vamos con nuestra función loop(). Primero una explicación de la lógica del funcionamiento del juego piedra, papel o tijera con nuestro Arduino no tiene una mano física para jugar con nosotros obvio!!, al menos por ahora…

Entonces vamos a realizar una equivalencia con nuestros leds así que cada color representara una de las 3 opciones y estas quedan expresadas de la siguiente forma tanto para nosotros como para arduino.

(° ! °) 0 = piedra = rojo [°~°]
(° ! °) 1 = papel = verde [°~°]
(° ! °) 2 = tijeras = azul [°~°]

Bueno entonces sabiendo esto para declarar un ganador lo haríamos de la siguiente forma:

Empate: Si ambos tú y arduino colocan la misma opción.

Ganador: Nuestro arduino esperara 2 segundos antes de mostrar al ganador y lo hará apagando el led del perdedor y encendiendo el del ganador en una tonalidad blanca.

Y todo esto se expresa de la siguiente forma en nuestro código de arduino.

Código :

void loop(){ // Inicio loop()

//Verifica si hay datos disponibles para leer
if(Serial.available() > 0){

// Lee el dato entrante y lo asigna a variable MiOpción
MiOpcion = Serial.read();
Serial.println("");

if(MiOpcion == '0'){ // Código para piedra

Serial.println("Has elegido piedra");
verMiOpcion(1, 0, 0);

respuestaArduino = opcionArduino();

// Realiza una espera de 1 segundos antes de mostrar al ganador
delay(2000);
Serial.println("");

if(respuestaArduino == 0) {
Serial.println("Has sido un empate ninguno gana!!");
}

if(respuestaArduino == 1) {
Serial.println("El papel cubre la piedra arduino gana!!");
verMiOpcion(0, 0, 0); // perdedor
verOpcionArduino(255, 255, 255); //ganador
}
if(respuestaArduino == 2) {
Serial.println("La piedra rompe las tijeras tu ganas!!");
verMiOpcion(1, 1, 1); // ganador
verOpcionArduino(0, 0, 0); // perdedor
}

} // Fin del Código piedra

// Espacio para el código papel
// Espacio para el código tijera

} // Fin de la verificación

} // Fin loop()

Ahora como pudiste notar tenemos funciones adicionales a nuestras 2 funciones principales esto con el fin de hacer nuestro código mas sencillo y ordenado vamos a explicar cada una a continuación .

Código :

void verMiOpcion(int Rojo, int Verde, int Azul){

digitalWrite(led1Rojo, Rojo);
digitalWrite(led1Verde, Verde);
digitalWrite(led1Azul, Azul);

}

Bueno como ya sabes en cuanto a electricidad exiten 2 tipos corrientes:

Corriente directa: Esta es la que permite que funcione toda la tecnología de hoy en día, porque este tipo de corriente solo va de su punto mínimo 0 a su punto máximo 1. Entonces se mantiene estable y es lo que necesitan muchos aparatos para funcionar como lo son nuestra computadora, nuestro arduino, etc.

Corriente alterna: Al contrario de la directa en esta su magnitud y sentido varian cíclicamente. Esta es la que permite que la electricidad llegue a nuestros hogares a través de las plantas de energía.

Entonces en conclusión la instrución digitalWrite() lo unico que hace es enviar a través del puerto indicado un 0(apagado) o un 1(encendido).

Código :

int opcionArduino(){

int aleatorio = random(0,2);

if(aleatorio == 0){
Serial.println("Arduino ha elegido piedra");
verOpcionArduino(255,0,0);
}

if(aleatorio == 1){
Serial.println("Arduino ha elegido papel");
verOpcionArduino(0,255,0);
}

if(aleatorio == 2){
Serial.println("Arduino ha elegido tijera");
verOpcionArduino(0,0,255);
}

// esta función devuelve la elección de arduino
// esta es asignada la variable respuestaArduino
return aleatorio;

}

Esta función lo unico que hace es determinar una respuesta para Arduino a través de un numero aleatorio que puede ir de 0 a 2.

Código :

void verOpcionArduino(int Rojo, int Verde, int Azul){

analogWrite(led2Rojo, Rojo);
analogWrite(led2Verde, Verde);
analogWrite(led2Azul, Azul);

}

Bueno la instrucción analogWrite() nos permite introducir valores que pueden ir de 0 a 255 esto solo se puede lograr utilizando lo puertos digitales PWM que lo puedes localizar facilmente porque tienen este signo "~" delante de ellos, estos puertos son especiales porque nos permiten manejar voltaje aleatorio. Entonces en este caso para mostrar el color rojo, verde o azul el lugar de enviarle un 1 tengo que enviare un 255. Esto nos otorga la posibilidad de cambiar la tonalidad de nuestro led RGB y asi poder tener un margen de colores más grande y que no solo vaya de 0(apagado) a 1(encendido).

Ahora todo listo para probar nuestro programa primero necesitamos cargarlo a nuestra placa Arduino una vez hecho esto debemos abrir nuestro monitor serial que nos servira para poder enviar nuestras opciones a Arduino este se encuentra en el menu herramientas>MonitorSerial o bien lo puedes abrir con la combinación de teclas Ctrl+Shift+M.

Una vez hecho esto lo único que tenemos que hacer es introducir un 0 y dar un enter para poder ejecutar nuestro programa.

Enhorabuena!! has hecho tu primer juego con arduino, ahora te toca a ti realizar el código para opción de papel y de tijera.

Recuerda que me puedes seguir en twitter en (@umb_tic) para cualquier duda, aclaración o simplemente para agradecer.

Tambien deja tu opción aquí abajo en los comentarios y no dudes en pedir algún tema que te interese si esta dentro mis posibilidades ten por seguro que lo tendrás lo más pronto posible.

Enviar comentario

via Cristalab http://ift.tt/1vZFxtj

Twitter Cards: cómo usarlas y configurarlas paso a paso

Hace unas semanas escribí sobre prácticas de SEO para implementar en Pinterest y aumentar el tráfico de tu sitio web. Hoy quiero darte las herramientas correspondientes para hacer lo mismo con Twitter, de tal forma que puedas seguir enriqueciendo tus acciones en redes sociales.

Twitter fue en donde empezó todo para mí. Hace casi cuatro años, durante unas vacaciones de la universidad en las que no trabajé, decidí que todos los días iba a cocinar algo delicioso para mi familia. Algo así como Julie and Julia, pero no era un reto, solo un gusto.

La única documentación que hice en esa época fue empezar a tuitear lo que había preparado. Si tenía 100 seguidores en Twitter era mucho, sin embargo, esos tuits empezaron a llamar la atención de diferentes personas, interesadas en tener la receta de lo que estaba preparando. Así fue como empecé a escribir para apuntodenieve.com, que solía llamarse Maldeadora Blog.

Este fue uno de esos primeros tuits de cocina antes de tener el blog:

Y así se ven mis tuits hoy:

Este cambio en la forma de promocionar mi sitio desde Twitter ha sido gracias a Twitter Cards, una de las nuevas funcionalidades de esta red que, junto con Twitter Analytics y su naciente sistema de Ads, representan una nueva época para quienes queremos profesionalizar la difusión del contenido de nuestros sitios.

¿Qué es Twitter Cards?

Así como en Pinterest existen los rich pins (pines útiles que dan más información), en Twitter existen las Twitter Cards, que son un formato enriquecido para que los tuits contengan más información en su preview y puedas destacar tu contenido en un mar de texto.

Twitter Cards en tres pasos

El proceso en cualquiera de los casos que presentaré a continuación sigue el mismo esquema general:

        1. Agregar una serie de metaetiquetas a tu sitio web
        2. Enviar tu URL para aprobación, a través de una herramienta proporcionada por Twitter
        3. Tuitear tu contenido para empezar a sacar lo mejor de Twitter Cards.

Naturalmente, no todos los tuits tienen el mismo tipo de contenido, por lo tanto existen diferentes tipos de Twitter Cards que voy a presentar a continuación, para que identifiques cuáles te pueden servir más aproveches cada una de sus características.

Tipos de Twitter Cards

1. Summary: mucha información en pocas palabras y un solo vistazo

Es una tarjeta que muestra un pequeño resumen sobre el contenido del link que hemos puesto en el tuit, acompañado de una imagen. Este es el tipo de card que utilizo yo, pues es el que se adapta más a publicaciones de blog con contenido como el que produzco.

Para implementar esta tarjeta debes tener acceso al código de tu sitio web e incluir las siguientes metaetiquetas dentro de la etiqueta <head>. Asegúrate de cambiar los atributos y el contenido por el tuyo y de enviar la URL para aprobación.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="http://ift.tt/1qazRIo" />
<meta name="twitter:url" content="http://ift.tt/1qazPA8" />

2. Summary with large image: para impactar con imágenes

Es muy parecida a la tarjeta anterior, la diferencia está en el tamaño de la foto destacada. Este tipo de tarjeta pretende generar un impacto a través de una imagen, es por eso que ésta aparece antes del tuit, y es posible acceder a la página enlazada haciendo click en ella.

Para implementar esta tarjeta debes tener acceso al código de tu sitio web, e incluir las siguientes metaetiquetas dentro de la etiqueta <head>. Asegúrate de cambiar los atributos y el contenido por el tuyo, y de enviar la URL para aprobación.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image:src" content="http://ift.tt/1s8pxY6">

3. Photo: para destacar contenido visual de alta calidad

Esta tarjeta es ideal para tuiteros que quieren compartir una vista más detallada de sus fotos.

Para implementar esta tarjeta debes tener acceso al código de tu sitio web, e incluir las siguientes metaetiquetas dentro de la etiqueta <head>. Asegúrate de cambiar los atributos y el contenido por el tuyo, y de enviar la URL para aprobación.

<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Mountain sunset" />
<meta name="twitter:description" content="Explore Reza-Sina's photos on Flickr. Reza-Sina has uploaded 113 photos to Flickr." />
<meta name="twitter:image" content="http://ift.tt/1rSngPv" />
<meta name="twitter:url" content="http://ift.tt/1rSngPz" />

4. Gallery: para compartir colecciones de fotos

Como su nombre lo indica, esta tarjeta te permite compartir una colección de fotos dentro de un solo tuit. La regla de los 140 caracteres es un reto que nos invita a ser concisos y creativos a la hora de crear copy, y con Twitter Cards puedes enriquecer tu mensaje para lograr enganchar a aquellas personas interesadas en lo que estás ofreciendo.

Para implementar esta tarjeta debes tener acceso al código de tu sitio web, e incluir las siguientes metaetiquetas dentro de la etiqueta <head>. Asegúrate de cambiar los atributos y el contenido por el tuyo, y de enviar la URL para aprobación.

<meta name="twitter:card" content="gallery" />
<meta name="twitter:site" content="@fodorstravel" />
<meta name="twitter:creator" content="@fodorstravel" />
<meta name="twitter:title" content="America's Best Small Towns">
<meta name="twitter:description" content="For the second year in a row, we've compiled a list that highlights some of the best places in the country you don't hear about every day.">
<meta name="twitter:url" content="http://ift.tt/1ktP8Bl" />
<meta name="twitter:image0" content="http://ift.tt/1s8pwU3">
<meta name="twitter:image1" content="http://ift.tt/1s8pyev">  
<meta name="twitter:image2" content="http://ift.tt/1s8pyey">
<meta name="twitter:image3" content="http://ift.tt/1s8pzPw">

5. App: para promover descargas de una aplicación 

La tarjeta ideal para aumentar las descargas de tu aplicación y permitir a los tuiteros acceder a un contenido directamente dentro de la app, si esta ya ha sido instalada en sus dispositivos.

Algo interesante de Twitter Cards es que no tienes que gastar tus 140 caracteres en el nombre o la descripción de tu enlace, además, con esta tarjeta específicamente puedes añadir atributos como el precio o el rating de tu aplicación, y aprovechar el tuit para escribir un buen call to action. Twitter tiene un manejo especial con el App Store y con Google Play, pues se encarga de crear automáticamente app cards para cualquier tuit que contenga un link que les pertenece. Intenta tuitear el enlace de una aplicación y verás la tarjeta en los detalles de tu tuit.

Para implementar esta tarjeta debes tener acceso al código de tu sitio web, e incluir las siguientes metaetiquetas dentro de la etiqueta <head>. Asegúrate de cambiar los atributos y el contenido por el tuyo, y de enviar la URL para aprobación.

<meta name="twitter:card" content="app">
<meta name="twitter:description" content="The perfect for grabbing a nearby taxi. Try it by downloading today.">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:iphone" content="Example App">
<meta name="twitter:app:id:iphone" content="306934135">
<meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:ipad" content="Example App">
<meta name="twitter:app:id:ipad" content="306934135">
<meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef">
<meta name="twitter:app:name:googleplay" content="Example App">
<meta name="twitter:app:id:googleplay" content="com.example.app">
<meta name="twitter:app:url:googleplay" content="http://ift.tt/1qazSfy">

6. Player: para contenido en vídeo y audio

Esta tarjeta es especial para tuits con contenido de video y audio. La implementación de Twitter Cards es muy parecida entre los diferentes tipos de tarjetas, pero esta tiene un proceso especial pues es necesario hacer una validación previa para su buen funcionamiento.

¿Cómo implementar esta tarjeta?

1. Descarga el paquete que ofrece Twitter y descomprímelo. twitter_git
2. Lleva el contenido a una ruta de acceso público en tu sitio web, abre el archivo index.html y asegúrate de que los valores de twitter:image, twitter:player y twitter:player:stream apunten a tu servidor.

filezilla

3. Actualiza el contenido cambiando el video de muestra por el que vas a utilizar y asegúrate de que las especificaciones de las rutas sean seguras (https://).

code

4. Una vez completado este proceso deberás validar tu Player Card con el Card Validator de Twitter y esperar la aprobación de Twitter.

card_validator Si seguiste los pasos y la implementación es correcta no deberías tener problemas. Aquí lo que está buscando el equipo validador de Twitter es que el contenido de tu tarjeta sea responsive para que la experiencia de usuario sea la adecuada tanto en las aplicaciones móviles de Twitter, como en twitter.com y mobile.twitter.com. P

ara asegurarte de que esto sea así puedes hacer tus propias pruebas copiando la URL de twitter:player en un navegador de escritorio o de un dispositivo móvil, y lo que debe pasar es que el video tome todo el espacio de la pantalla y que el bloqueo del navegador (https://) siga intacto.

7. Product: para dar información sobre un producto

Esta tarjeta permite compartir un producto con detalles que cualquier comprador quisiera saber de inmediato, como el precio y el costo del envío, funciona como los microformatos que se muestran en los resultados de búsqueda de Google cuando encuentras, por ejemplo, una receta, y puedes ver ahí mismo el tiempo de cocción o las calorías por porción.

Para implementar esta tarjeta debes tener acceso al código de tu sitio web, e incluir las siguientes metaetiquetas dentro de la etiqueta <head>. Asegúrate de cambiar los atributos y el contenido por el tuyo, y de enviar la URL para aprobación.

<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@iHeartRadio">
<meta name="twitter:creator" content="@iHeartRadio">
<meta name="twitter:domain" content="iheart.com">
<meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania">
<meta name="twitter:image" content="http://ift.tt/1qazSMs">
<meta name="twitter:label1" content="Genre">
<meta name="twitter:data1" content="Classic Rock">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="National">

Algunos consejos finales

— Si utilizas WordPress puedes usar JM Twitter Cards un plugin especial que hace más sencilla esta implementación.

— Puedes aprovechar Twitter Analytics para monitorear el rendimiento de tus tarjetas, y de tus tuits en general. Esto es importante, no solo para hacerle seguimiento a tu actividad, sino también para hacerte una idea clara de cómo se está compartiendo tu contenido en Twitter.

Encuentra más información detallada sobre Twitter Cards y su implementación en la documentación de Twitter para desarrolladores.


maldeadora para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo


Síguenos en: @maestros | Fan page

via Maestros del Web http://ift.tt/1qazSMx