Maqueta para lo más probable, para lo más pequeño, y para lo más salvaje.

Si en ninguno de estos tres casos se fastidia el diseño, puedes decir tranquilamente que tu código esta perfecto.

Otra cosa es que en el diseño este contemplado cada uno de ellos…

Cyclops rastrea entre los principales sitios de imágenes (al momento de escribir esta entrada en: BigStockPhoto, Cutcaster, Flickr, Fotolia, Photos.com, Shutterstock, stock.xchng y stockvault) en busca de imágenes libres y/o gratuitas (o de bajo coste) según lo establecido en la búsqueda.

Los resultados los muestra agrupados por pestañas según el sitio donde las haya encontrado. Fácil y sencillo.

Tengo que decir que siento predilección por Firefox, pero también reconozco que tiene sus pegas (como la RAM que puede llegar a devorar) y que hay más opciones igual de válidas (de hecho las tengo instaladas casi todas ). Pero ninguno hasta ahora me ofrece la posibilidad de ampliar tanto las funciones del navegador como lo hace Firefox con sus extensiones, y eso a la hora de desarrollar un sitio web puede llegar a ahorrarte mucho tiempo.

Es más, la gente de Mozilla creó un recopilatorio de extensiones llamado Web Developer’s Toolbox con muchas extensiones capaces de ahorrarte tiempo y dolores de cabeza en esto del desarrollo web. Yo tengo mi propio recopilatorio específico o por llamarlo de otra manera mi lista de extensiones favoritas para el desarrollo web.

Como puedes ver en la imagen, en esta lista se encuentran:

• Web Developer: Multitud de herramientas y utilidades para el desarrollo web.
• Html Validator: Indica el número de errores y avisos en la validación de la página.
• ColorZilla: Selector de color, cuentagotas, zoom…
• FireFTP: Cliente ftp con gestor de diferentes cuentas en el propio navegador.
• TAW3 en un clic: Con un simple clic puedes hacerte una idea de la accesibilidad de la página.
• Firebug: Permite editar, depurar y monitorear CSS, HTML y JavaScript en cualquier página web.
• YSlow: Para analizar y optimizar los tiempos de carga.
• Dust-Me Selectors: Te muestra una lista de las propiedades CSS definidas en la(s) hoja(s) de estilo y que no están siendo usadas.
• FireShot: Para crear screenshots (completos o solo la parte visible) de la página.
• Pixel Perfect: Superpone el diseño sobre el resultado de la maquetación.
• CodeBurner for Firebug: Una extensión para Firebug que amplia las referencias de CSS y HTML.
• Browser View Plus: Añade opciones al menú contextual (o botones en la barra de menú) para abrir la página o enlaces en el navegador que prefieras.

En total 12 extensiones, bueno, ahora que recuerdo en realidad son 12+1 (13 que no soy supersticioso ) con IE Tab, que con un clic muestra la página usando el motor de IE. Si te interesa puedes ver y descargar el recopilatorio Diseño y maquetación web completo desde la web de Mozilla.

Si quieres agregar Twitter a tu blog, puedes encontrar multitud de plugins que te permitirán hacerlo fácilmente, sin embargo lo que mucha gente desconoce es que es igualmente sencillo (si no más) y bastante más rápido hacerlo mediante código HTML.

El código en cuestión nos lo facilitan en la propia web de Twitter.

La parte de código que se muestra a continuación debemos colocarla en el lugar de nuestro blog/web donde deseamos que aparezcan nuestros tuiteos.

1
2
3
4

<div id="twitter_div">
    <h2 class="twitter-title">Twitter</h2>
    <ul id="twitter_update_list"></ul>
</div>

Con esto, estamos creando una capa (div) que contiene una cabecera (h2) y una lista con nuestros tuiteos (ul), por lo que podremos personalizar fácilmente su apariencia mediante CSS.

Pero el código anterior no funcionara correctamente sin incluir esta otra parte:

1
2

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USER.json?callback=twitterCallback2&count=X"></script>

Esta última parte es un javascript que recoge los datos de nuestro perfil en Twitter y los coloca en la lista de antes (ul). Aquí debemos configurar 2 parámetros:

1. USER: nuestro nombre de usuario en Twitter
2. count=X: sustituyendo la X por el número de actualizaciones que queramos mostrar

Por último añadir que esta parte del código es recomendable ponerla al final del todo de nuestra página, justo antes de la etiqueta </body> para evitar retrasar el tiempo de carga de nuestra web y posibles errores si Twitter se encuentra caído.