Historial de un navegante

by Angel

Muestra tu estado de Twitter con un estilo propio y original

leave a comment »

Leído en elwebmaster:

Existen 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

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

PLAIN TEXT

  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

PLAIN TEXT

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

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.

Enlaces | Line25 | elwebmaster

Anuncios

Written by Angel Flores

22 enero 2010 a 17:08

Publicado en General

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: