Micaela 19 de enero de 2010 a las 08.00
   Imprimir artículo
elWebmaster.com

Muestra tu estado de Twitter con un estilo propio y original


twitter128x128Existen muchísimos plugins en la red que sirven para mostrar tus últimos tweets en tu sitio web. Pero a veces, sólo quieres mostrar tus últimas actualizaciones de Twitter de forma rápida y simple.

Por eso, hoy vamos a echar un vistazo al antiguo método de Javascript para obtener actualizaciones y mostrarlas con un interesante diseño en CSS.

En los viejos tiempos, Twitter utilizaba una forma práctica, por Javascript, para mostrar tweets en otros sitios de la web. Por alguna razón ha sido sustituida por un montón de “beneficios” de Twitter, en su mayoría widgets. Todavía podemos encontrar el método JavaScript sin embargo, ya sea en antiguos tutoriales, o a través de la Wiki de la API de Twitter.

Esto es lo que vamos a desarrollar: un diseño simple que muestre los últimos tweets de un feed en particular. Si bien en esta demostración se utiliza un diseño de página completa, el mismo enfoque puede utilizarse para mostrar hasta 20 tweets en cualquier lugar de tu sitio web.

El concepto

concept

Empecemos por dar contenido al concepto para tener una buena idea de cómo los cambios se deben mostrar. Aquí hemos utilizado un fondo determinado, expusimos el nombre de usuario @line25blog como un encabezado general, utilizado una pequeña y tierna mascota de Twitter desde Blog.SpoonGraphics para introducir el mensaje y darle estilo a cada Tweet en un contenedor redondo.

El HTML

  1. <div id="twitter">
  2.     <h1><a href="http://twitter.com/line25blog">@line25blog</a></h1>
  3.     <ul id="twitter_update_list"></ul>
  4. </div>
  5. <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
  6. <script src="http://twitter.com/statuses/user_timeline/line25blog.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

Ahora se puede escribir el HTML. Todo se encuentra envuelto en un div con la id de Twitter, seguido por un UL con una id de twitter_update_list. Aquí es donde cada tweet será listado.

Las dos opciones para editar son el nombre del perfil para recuperar los artículos, y el número de tweets que el script debe mostrar. Así pues, puedes mostrar tu último tweet, o una lista de los mensajes recientes.
Viendo el HTML en un navegador hasta ahora debe demostrar que todo funciona correctamente. El paso siguiente es inyectar algo de estilo visual con un toque de CSS.

El CSS

  1. body {
  2.     background: #909ca6 url(http://line25.s3.amazonaws.com/wp-content/themes/line25/images/body-bg.png);
  3. }
  4.  
  5. #twitter {
  6.     width: 500px; margin: 130px auto;
  7. }
  8.  
  9.     #twitter h1 a {
  10.         display: block; margin: 0 0 15px 0;
  11.         font: 90px Helvetica, Arial, Sans-Serif; color: rgba(255,255,255,0.2);
  12.         text-decoration: none;
  13.     }
  14.         #twitter h1 a:hover { color: rgba(255,255,255,0.3); }
  15.  
  16.     #twitter ul {
  17.         list-style: none; padding: 0 0 0 140px;
  18.         background: url(bird.png) 0 0 no-repeat;
  19.     }
  20.         #twitter ul li {
  21.             padding: 20px;
  22.             background: rgba(255,255,255,0.1);
  23.             border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
  24.         }
  25.             #twitter ul li a {
  26.                 font: italic 14px/30px Georgia, Times, Serif;
  27.                 color: #555b6e;
  28.             }
  29.                 #twitter ul li a:hover { color: #1b2f6f; }
  30.  
  31.         #twitter ul li span {
  32.             font: 22px/30px Helvetica, Arial, Sans-Serif; color: #fff;
  33.         }
  34.             #twitter ul li span a {
  35.                 font: 22px/30px Helvetica, Arial, Sans-Serif;
  36.             }

Unas pocas líneas de CSS pronto pueden transformar la apariencia del HTML. Hemos usado RGBA para especificar no sólo los canales rojo, verde y azul, sino también un canal alfa para determinar la opacidad del elemento. Usando esto sobre el título, el estado hover y list-background se pueden añadir una mejora visual muy atractiva.

Fuente: Line25


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (8)

  1. Christian dice:

    Que buen aporte, Gracias

  2. Renzel dice:

    ohh, si bueno aporte. Hare prueba en mi localhost !! :d TY !!

  3. Grettel dice:

    me gustan la informacion que nos mandan

  4. Natashaa dice:

    Genial!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  5. hacmx dice:

    funciona, pero la cuenta en twiteer tiene que estar configurada para que sea vista por todos(perfil publico)

  6. Ronald dice:

    Muy interesante la información, ojalá pusieran un link a un demo de como queda .

  7. Fernando Britez dice:

    Buenísima info !

  8. Maricel dice:

    Son muy buenos tus aportes pero sería interesante que incorporaras videos con el paso a paso para los inexpertos. Yo soy una de ellos.

    Gracias!!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder