Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome.

Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.

Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <b:skin> y </b:skin> y en WordPress en el archivo style.css en la carpeta del theme activo.

Modificar el CSS de un elemento con Firebug.

Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:

1. Instala Firebug en tu navegador: Firefox o Chrome. Personalmente yo recomiendo usar la de Firefox, es más completa y rápida, pero a ambas aplica el contenido de este tutorial.

2. Dar clic en el botón de Firebug en la barra de herramientas , luego en el botón de Inspeccionar  y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, imagen, video, flash o cualquier elemento, y dar clic en él.

3. En el cuadro de la derecha de Firebug, estando la pestaña “Estilo” activa, se muestran todos los estilos que afectan al elemento.

Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.

Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).

Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.

4. Pruebas en vivo.

Algo muy interesante de Firebug es que puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.

Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.

Y muy similar para los valores numéricos:

Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.

Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de “Estilo”, aparecerá el selector que contiene la imagen, normalmente en la propiedad background o background-image.

Y hay otras varias herramientas que pueden ver directamente en el manual oficial.

5. Usando los datos de las pruebas.

Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug nunca guarda cambios, esta parte debes hacerla tu manualmente.

En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.

Screencast

Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.

Conclusión

Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la guía oficial, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de CSS y HTML, hará cualquier tarea de diseño menos frustrante.

Están en PNG24 con transparencia en dos tamaños distintos, 100 y 250 pixeles.

Licencia de uso:

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos, por favor, enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

PaperCut Icons

Revisando el top 100 de blogs en Technorati (sí, aun esta online), les presento algunos que llamaron mi atención para encontrar algunas buenas prácticas y malas prácticas.

Showcase

Mashable

Mashable.com tiene una navegación por paginación, con números en contenedores grandes y cliqueables en toda su área. Tiene enlaces de Adelante y Atrás, pero no de Última y Primera, que en mi opinión, rara vez son útiles.

Engadget

Engadget.com tiene una navegación limpia y fácilmente reconocible.

Celebrity Gossip

tmz.com tiene una navegación fácilmente reconocible, pero que además invita a leer, adelantando que encontraras.

The Daily Dish

En The daily dish parece que no les interesa que sigamos navegando, una navegación pequeña y que se pierde entre el contenido.

ReadWriteWeb

En Readwriteweb.com los números de paginación se confunden entre ellos. es difícil darles clic si logras distinguirlos del contenido.

Popeater

En Popeater.com la navegación tiene buen espacio y es inconfundible su función. Otro punto interesante es que todos enlaces de navegación, usan el mismo color, distinto al color de los enlaces de contenido.

Politics Daily

Politicsdaily.com también cuenta con una navegación fácil de encontrar.

Slash Film

Slashfilm.com además del clásico “Siguiente”, “Anterior”, tiene un banner, pero que por sus dimensiones es fácil confundirlo con publicidad.

The Next Web

Thenextweb.com tiene una navegación minimalista y elegante, acorde a su diseño, pero que puede pasar desapercibida si no la estas buscando.

Joystiq

Joystiq.com tiene un par de botones en suficiente espacio y bien resaltados que no te hace buscar si quisieres seguir leyendo.

GigaOm

Gigaom.com tiene una buena combinación entre la sencillez de los botones siguiente y anterior y lo informativo de una paginación.

Neatorama

En Neatorama.com a cada enlace le agregan la información sobre en que dirección temporal de publicación se dirige. Al no haber una norma si “Siguiente” se refiere a más nuevo o más viejo, es una buena idea aclararlo.

Daily Intel

En Daily Intel agregan un enlace a la página principal en la navegación.

Yanko Design

En Yankodesign.com además de la típico paginación, agregan un enlace a un post aleatorio.

Conclusiones

Algunas conclusiones en base a mi experiencia de usuario en estos blogs son:

• Los enlaces de navegación deben diferenciarse claramente del contenido, por color, diseño, tamaño, espacio o cualquier otra propiedad.
• Dentro de una paginación los botones de Siguiente/Anterior deben resaltarse.
• Los números en un paginación, deben tener la mayor área cliqueable posible.
• En la mayoría de estos sitios, el botón “Siguiente”, se encuentra a la izquierda. Esto puede significar que el usuario esta más acostumbrado a verlo de ese lado, habrá que comprobarlo con una revisión de muchos más blogs.
• Usar “Artículos anteriores” puede ser más informativo que “Siguiente página”, pues este último no da referencia de la edad de las publicaciones.
• En algunos casos, es buena idea colocar una barra de navegación al inicio y al final de la página.

Con este ejercicio, he encontrado varios puntos a mejorar en mis sistemas de navegación. ¿Encontraste algo a mejorar en los tuyos?

Nuevo paquete de iconos del equipo del blog de diseño Maquiladora de Sueños para Blog and Web. Son ocho iconos de servicios sociales con efecto 3D y un toque glossy en forma de una “manzana famosa”.

Los servicios incluidos son Facebook, Twitter, Feed RSS, YouTube, Vimeo, Flickr, MSN, y Skype.

Están en tres tamaños distintos: 64×64, 100×100 y 200×200 en PNG a buena calidad para escalarlos fácilmente. Tienen fondo transparente para adaptarse a cualquier diseño.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos, por favor, enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Apple Icon Pack.

Ulises Arvizu de Maquiladora de sueños y también autor en Blog and Web, nos regala un nuevo paquete de iconos sociales: Macbook social. Seguro a más de un maquero le gustará para su blog .

Son 13 iconos distintos en 3 tamaños: 100×60, 150×90 y 250×150.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Macbook Social Icons.

Ulises Arvizu de Maquiladora de sueños nos sorprende con nuevo paquete de iconos exclusivos para Blog and Web, esta vez, son 3 geniales iconos para suscripción por Feed RSS, Twitter y Facebook en forma de cubos de rubik. Disponibles en tres tamaños distintos 32×39, 64×77 y 100×120 pixeles en calidad PNG-24.

Adicionalmente se incluye el archivo vectorial (fuente) para que puedas crear tu propios cubos rubik con otros servicios sociales o lo que se te ocurra.

Licencia

• Se liberan bajo licencia Creative Commons Atribución 2.5.
• Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).
• Para distribuirlos enlaza este artículo y no al archivo de descarga directo o otro post o servidor.

Descargar

Descargar Rubik Social Icons.

¿Cómo funciona?

Funciona y se aplica como cualquier otra propiedad de CSS, text-rendering puede tomar los siguientes valores:

• optimizeLegibility – Que da prioridad a la legibilidad del texto. Habilita el kerning y la ligadura de la tipografía.
• auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px y optimizeSpeed para los de mayor tamaño.
• optimizeSpeed – Que da prioridad a la velocidad con que se muestra un texto.
• geometricPrecision – Da prioridad a la geometría del texto.

Ejemplos:

body  { text-rendering: optimizeLegibility; }
.post  { text-rendering: optimizeSpeed; }

Comentario

Una propiedad CSS que otorga al diseñador una herramienta de control más sobre el texto, por ahora el soporte es limitado, pero que seguramente irá aumentando con el transcurrir de las versiones de los navegadores.

Six Revisions hace una útil recopilación con 10 aplicaciones para iPhone que todo diseñador o programador web debería tener. Entre ellas están:

• What The Font – Reconocimiento de tipografía online. Costo: Gratis.
• Source viewer – Una app para ver el código fuente de cualquier sitio web. Costo: $0.99 USD.
• FTP On The Go – Un completo cliente FTP móvil. Costo: $6.99 USD.
• Full Browser – Elimina las barras del navegador para una visualización a pantalla completa. Costo: $0.99 USD.
• Photoshop.com Mobile App – Herramientas básicas de edición de imágenes cortesía de Adobe. Costo: Gratis.

Puedes leer sobre 5 aplicaciones más y con una explicación más extendida en el artículo: 10 iPhone Apps Every Web Designer Should Know About de Six Revisions.

Descargar: Default Icon

Todo desarrollador web da por descontado tener una conexión, sin embargo, siempre hay casos extraordinarios donde no se tiene este acceso y es cuando se valora todo el material de consulta que se tiene en el disco duro.

Para prevenir este "peligro" bien vale la pena tener manuales de consulta offline. Algunos de los que me han sido útiles personalmente son:

• Manual oficial de PHP – Disponible en html y chm en varios idiomas, incluido el español.
• Manual oficial de MySQL – Disponible en html, chm y pdf en varios idiomas, incluido el español.
• Manual CSS – Manual de CSS 2.1 en formato chm (no oficial).
• Manual HTML – Manual de HTML 4.0 en formato chm (no oficial).
• Manual Javascript – Manual de Javascript 1.5 en formato chm (no oficial).
• Manual de jQuery – La documentación oficial de jQuery 1.4 en un archivo chm (no oficial).
• Manual de la W3C – Manual sobre los estándares web en formato chm (no oficial).

Además de manuales, es muy útil contar con libros con una explicación más amplio y de aplicación práctica, para esto, los libros de librosweb.es son una excelente muestra (disponibles en versiones pdf).

Tú ¿Qué libros y manuales tienes para cuando te quedas offline?

Fotografía de Feuillu