HTML

Cristian in Development

November 13, 2009

Zen Coding

Hace unas semanas descubrí The Art of Zen Coding, y desde entonces estoy totalmente entregado a esta nueva forma de escribir HTML y CSS.

Aplicando matemáticas para definir la estructura del HTML consigues escribir 50 lineas de código en 1, es una idea ganadora que ha cambiado la forma de escribir el código base de mis proyectos.

Se trata de un snippet para Textmate, también disponbible para Aptana, que incrementa de forma sorprendente la velocidad a la que escribes lí­neas de código..

Mejor con algunos ejemplos:

ul#menu.navigation>li*5>a

Pulsando CMD+E, generará el siguiente código HTML:

<ul id="navigation" class="main">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

Y usando el tabulador podemos empezar a rellenar el contenido del atributo href y el texto del enlace.

Read more »

Cristian in CSS

June 30, 2008

Overlay de contenido en CSS

Rápidamente quiero dejar anotado un tip acerca de una técnica que he utilizado en la web de Gimmicklab, en las fichas que utlizamos para presentar los proyectos. puedes ver un ejemplo aquí­.

El objetivo era presentar los proyectos a partir de una imagen y sólo darle al visitante la información del proyecto una vez que ha decido que le ha gustado la imagen y ha ejecutado una acción; en este caso un mouseover.

Rápidamente mediante javascript teníamos el efecto funcionando, pero me quedaba la sensación que en el hipotético caso de que el visitante usara un cliente con el javascript desactivado habrí­a una parte de la información, la relativa a la descripción del proyecto, que no sería visible.

Al final investigando un poco y con imaginación di con esta solución.

Read more »