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.

Los estándares web están teniendo una transformación, como es el caso de  HTML5 vs Flash, es por de más cierto que HTML5 tiene mucho potencial para establecerse como estándar oficial y que quizás cuando eso pase Flash tendrá que haber encontrado un mercado de nicho propio. Mientras eso sucede los invito a visitar esta interesante galería de Javascript de alto nivel, Chrome Experiment que tienen como objetivo recoger los mejor de Javascript y de estándares abiertos como HTML5, Canvas, SVG.

La idea básica es demostrar que hay diseñadores usándolos, que hacen la web más rápida, sencilla y eficiente, en pocas palabras, según los propios autores del sitio, tratan de ser congruentes con el espíritu de Chrome. El sitio es por demás recomendable, les dejo un videos de lo que pueden encontrar y en el sitio todo pueden probarlo por ustedes mismo, no está por demás advertir que deberán de tener un navegador que cumpla con los últimos requerimientos en cuanto a estándares para poder tener una experiencia completa.

Sitio: chromeexperiments.com

HTML 5 Rocks tiene desde una introducción a las bondades de HTML 5, hasta tutoriales paso a paso y un editor de código en línea para empezar a experimentar con esta nueva versión del estándar.

Algunos de los tutoriales que hay desde ahora son:

• Introducción a Chrome Developer Tools.
• Prácticas recomendadas para hacer una aplicación HTML 5 más rápida.
• Guía para principiantes para usar la aplicación de cache.
• Guía rápida para implementar la etiqueta de audio de HTML 5.
• Uso de la API de notificaciones.

Y varios ejemplos prácticos de otras funciones de HTML 5.

Una última sección de recursos muestra un pequeño directorio con herramientas y documentación sobre HTML 5 y CSS 3.

Recordar que Apple ha hecho un gesto similar, pero con el pequeño detalle de que obliga a descargar Safari, algo que por otra parte, no es de extrañar en la filosofía de esta empresa.

Tanto HTML 5 y CSS 3 no son tecnologías realmente nuevas, lo novedoso es todo el empuje que estas grandes multinacionales les están dando desde hace un tiempo y que, indirectamente, ayuda a la evolución de la web.

Sitio: HTML 5

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

Siempre he creído interesante el darle cierta animación a nuestros botones le den un plus gráfico, y hay, desde el enviar de manera automática un mail a alguien que se nos ha añadido en nuestra lista de lectores de nuestro RSS, y quizás un botón animado de agradecimiento puede ser también buena opción.

En esta ocasión haremos un ejercicio para crear un pequeño personaje desde el papel, pasando por Adobe illustrator, hasta llegar a la implementación en HTML y CSS. Al final, te dejamos las imágenes y el código en un archivo para que lo implementes en tu web si así deseas (Ver demo).

Vectores y la ilustración

Los vectores tienen grandes ventajas y las ultimas versiones de illustrator son sorprendentes, nuestro acabados serán muchos más que simples plastas de color.

No voy a negar que tener nociones de básicas de dibujo ayuda a poder hacer ilustraciones, pero definitivamente la web es un compendio muy amplio de imágenes para tomar ideas, para ver diferentes técnicas, para poder empezar nuestros proyectos, el dibujar ayuda, pero las buenas ideas siempre son mejores.

Bocetando y de ahí a illustrator

Empecemos por bocetar nuestro personaje, esto nos ayudara a tener una idea un poco más clara de como empezar. Como comento, puedes tomar ideas de ilustraciones que hayas visto y se te hagan interesantes.

Puedo mencionarles que prefiero hacer esto, bocetar aunque al final muchas veces trazo directo en illustrator pero al menos para mi me da una idea más clara y sé que haré, antes podía pasar horas en la computadora sin tener claro que dibujar y con ello perdía tiempo, unos momentos de boceto terminaron con eso.

Empezaremos con las formas básicas para la cabeza y las orejas, trazaremos tres círculos, juntos para luego aplicar el pathfinder (menu window-pathfinder) y aplicamos el efecto de sumar.

Trazaremos los ojos, dos círculos pequeños de color negro bastarán para hacerlo, colocamos y centramos, y después haremos el cabello.

Ahora solo ponerle color y unir las partes.

Esto solo es una guía, así que ustedes podrán hacer el personaje que quieran yo les muestro dos variantes de niño y niña.

Ahora viene la parte interesante, la sonrisa, la cual será una de las cosas que cambian. Para comenzar haremos la sonrisa con la boca cerrada, un medio circulo será suficiente, para después hacer la sonrisa de la boca abierta. duplicamos nuestro layer o capa con nuestro personaje con sonrisa cerrada y hacemos lo siguiente en el layer duplicado.

Feed rss y strokes de etiqueta.

Haremos nuestro feed RSS que es el pretexto para hacer esta ilustración, lo colocaremos detrás del niño y en la imagen el botón se verá más, y crearemos un efecto de movimiento.

Ahora hagamos el terminado de etiqueta, seleccionemos el personaje, le damos Unite con el pathfider lo rellenamos del color y le damos un stroke o borde para que se rebase la figura, aplicamos lo mismo al botón feed RSS.

Vamos a hacer un pequeño destello en la parte de atrás de nuestro personaje. Creamos un rectángulo vertical y aplicamos el efecto de transform o transformar, (menu effects/Distor & Transform).

Expandimos la forma creada (menu object- eExpand Appearance) le damos Unite con el pathfinder, ajustamos algunas puntas de nuestra figura y añadimos una degradado.

Solo agreguemos un pequeño texto para hacer más obvio nuestro cambio y listo tendríamos por separado en cada layer un archivo así:

Implementación del botón

Desde illustrator de exportan las imágenes, el resultado, dos imágenes un formato de imagen web, por ejemplo PNG8. Para poderlas usar en un hover, ambas deben tener el mismo alto y ancho y estar alineadas vertical y horizontalmente. En otras palabras, que si pones una sobre otra, la silueta de cara coincide.

Hemos unidos después estas dos imágenes en una sola, una sobre otra, para usarlas como sprite CSS:

Para el HTML basta con el siguiente código:

<a href='http://blogandweb.com/feed' class='botonrss'>Feed RSS</a>

El CSS será el encargado de hacer el efecto “hover“, es decir, que al pasar el puntero del mouse por encima se mostrará la segunda figura, dando la sensación de animación.

a.botonrss {
    width:166px;
    height:180px; /* Dimensiones de la imagen */
    text-indent:-9999px;
    overflow:hidden; /* Oculatando el texto del enlace */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Poniendo la imagen como fondo */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* Al hacer hover, ponemos la segunda imagen de fondo */
}

Ahora, solo resta ver el botón en funcionamiento.

Implementarlo en Blogger y WordPress

Implementarlo en Blogger y WordPress es bastante sencillo. El código HTML se puede agregar en un widget de HTML en el sidebar y el CSS, en WordPress va en el archivo style.css y en Blogger justo antes del código:

]]></b:skin>

No olvides cambiar la URL por la de tu feed en el HTML y la ruta de la imagen en el CSS.

Descargar

Descargar HTML e imágenes.

Conclusión

En este tutorial vimos como crear un botón “animado” iniciando desde el panel, aunque resulta en algo de trabajo, el resultado generalmente vale la pena.

Igualmente, si te gusto este botón para tu sitio web, descárgalo e impleméntalo. Nosotros lo liberamos bajo licencia Creative Commons, y si nos quieres dar un link por los créditos, te lo agradecemos desde ahora

Por cierto, este es el primer tutorial que hacemos en conjunto, Ulises y Francisco (principalmente el primero), esperamos te haya gustado tanto como a nosotros al escribirlo.

Free PSD Theme es un iniciativa del diseñador Dany Duchaine, que libera de forma gratuita el archivo fuente para Photoshop (PSD) o el código HTML de sus temas premium para WordPress. De este modo puedes codificarlo y usarlo de forma totalmente gratuita en proyectos personales y comerciales.

Además de usarlo como diseño completo, estos archivos pueden ser un buen repositorio de elementos web como botones, menús, formularios, etc. Actualmente hay 7 diseños en descarga directa.

Este modelo de regalar el archivo fuente (PSD o HTML) y vender una versión terminada es muy interesante. Se ganan enlaces, donaciones y reconocimiento por los archivos gratuitos y dinero con la venta del producto terminado.

Como sea, material de buena calidad para echar mano.

Sitio: freepsdtheme.com

Si quieres aprender a usar esta excelente herramienta, en Videotutoriales.com están haciendo una serie de videotutoriales de lo más básico hasta cosas más particulares. Sino no usas FireBug es una buena introducción y sí ya lo usas, seguramente encontraras alguna función que no conocías.

Hasta el momento son tres los tutoriales:

• 01.- Usando Firebug. Primer videotutorial dedicado al depurador 2.0
• 02.- Curso de Firebug. Trabajar con la Consola.
• 03.- Curso de Firebug. Depurar código JavaScript (arriba)

Desde mi punto de vista, una extensión indispensable para todo desarrollador web, pero también para el que esta incursionando en el diseño y la programación.

Descargar FireBug

Mantener un código con buen formato, con comentarios, identación y separando en lo posible cada lenguaje web son buenas prácticas para facilitar el mantenimiento de un sitio o una aplicación web.

Sea un código que hicimos hace tiempo o aun peor, el código de otra persona, puede tornarse en un verdadero dolor de cabeza dar formato al código para entender mejor su lógica. La buena noticia es que existen herramientas para organizar el código de los principales lenguajes web:

HTML

HTML Tidy es una versión en línea de la librería Tidy, que a partir de código HTML directo o de una URL da formato al código. Además de organizar el código, también hace algunas optimizaciones como agrupar div’s, unificar clases y separar el CSS del HTML.

Ir a HTML Tidy 

CSS

A partir de la librería CSStidy, en su momento monté CSS Óptimo para uso personal, pero después de darle un toque de diseño y traducirlo al español, creo que puede ser una herramienta útil para todos. Tiene la opción para formatear el código CSS de acuerdo a un grado de optimización seleccionado.

Muy útil para formatear CSS, pero más aun, para optimizarlo y reducir el peso de una hoja de estilos en más de un 30%.

Ir a CSS Óptimo

PHP

Beautify PHP es una herramienta que a partir de un archivo PHP genera un código organizado y formateado, incluso codifica las imágenes para que no hagan una petición al servidor y se disminuya la carga del mismo.

Ir a Beautify PHP / vía kabytes

Fotografía de Kyle

Para ayudar con este problema, Raymi Saldomando ( @raymicha ), maquetadora web especializada en XHTML, CSS, Javascript y WordPress ha creado una serie de videotutoriales llamada "Como la armamos en español" compuesto de varios capítulos alojados en vimeo:

• Capitulo 1: Aquí les presento a la plantilla.
• Capitulo 2: parte I: Cortar, Organizar y Nombrar.
• Capitulo 2: parte II: XHTML!!!!!
• Capitulo 3 parte I: El concepto del modelo de Bloque
• Capitulo 3 parte II: FULL CSS!
• Gotitas de Javascript
• Formularios Básicos.

Y ya que estas aprendiendo maquetación, puedes seguir derecho y aprender a pasar de HTML / CSS a WordPress con otros dos videotutoriales de Raymi:

• Edición WordPress. Parte I
• Edición WordPress. Parte II

Puedes estar atentos a la continuación de esta serie en su cuenta de Vimeo para empezar a construir tus diseños desde cero. Un esfuerzo bastante útil y por supuesto, plausible.

Los banner de 125×125 pixeles se estan tornando en los favoritos de los bloggers y también son muy usuales en los sitios web convencionales. De acuerdo al sistema (CMS) que se use para manejar un sitio, pueden existir complementos para administrar este tipo de publicidad de forma casi automática, pero la forma manual con html y css se aplica en cualquiera.

Aquí pongo un sencillo tutorial de como poner banners de 125×125 en x número de columnas para gestionarlos manualmente.

Estructura en HTML

Lo primero será crear la estructura html, hay varias posibilidades, en este caso serán elementos de lista. La estructura para 4 banners quedaría así:

<div id="banners125">
<h2>Patrocinadores</h2>
<ul>
	<li>
		<a href="http://btemplates.com" title=""><img src="images/btemplates.jpg" alt=""/></a>
	</li>
	<li>
		<a href="http://weba20.com" title=""><img src="images/weba20.png" alt=""/></a>
	</li>
	<li>
		<a href="http://forosdelblog.com" title=""><img src="images/forosdelblog.png" alt=""/></a>
	</li>
	<li>
		<a href="http://serturista.com" title=""><img src="images/serturista.png" alt=""/></a>
	</li>

<!-- Para agregar otro banner puedes usar el siguiente código:
	<li>
		<a href="http://tusitio.com/" title="descripcion"><img src="http://tusitio.com/imagen.png" alt="descripcion"/></a>
	</li>
Termina código -->

</ul>
</div>

Solo hay que colocar las URLs de los sitios, las URLs de las imágenes y las descripciones (en alt y title). También ahí mismo esta comentado el código que puede usarse como guía para agregar más banners.

En WordPress esta estructura se coloca generalmente en el archivo sidebar.php y las imágenes pueden hospedarse directamente en el servidor. En Blogger el código se coloca justo abajo de:

<div id='sidebar-wrapper'>

Y se pueden alojar las imágenes en el mismo Blogger.

Estilos CSS

Para mostrar adecuadamente los banners es necesario dar los estilo y definir así los margenes, flotación, etc. Los siguientes estilos permiten mostrar los banners en 2 columnas si el espacio es suficiente, pero también funcionan si solo hay espacio solo para 1 banner o para más de 2 sin hacer cambio alguno en el código.

/* Banners 125x125 */
#banners125 {
margin: 10px 0;
width:100%;
}
#banners125 ul {
padding:0;
margin:0;
list-style-type:none;
}
#banners125 ul li {
float: left;
margin:10px 0 0 10px;
display: inline;
}
#banners125 img {
display: block;
}

Hay que tener en cuenta que el diseño donde se use puede tener estilos que interfieran con estos o que no se ajusten perfectamente a él, para ello hay que hacer modificaciones en este código css.

En WordPress estos estilos se pueden agregar al final del archivo style.css y en Blogger justo antes de:

]]></b:skin>

Demostración

Esta estructura es la que uso en Blog and Web para mostrar los banners en 2 columnas y en Foros del Blog para 5 columnas (ahora solo tengo 3 ocupadas). Cualquier comentario o corrección se lo agradezco en este post y dudas en nuestro foro.