YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseños web proporcionandonos diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.
A parte, nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente. YAML
VÃa / Ajaxian
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.
Si tienes alguna duda de cómo realizar el menú de tu aplicación web, aquà tienes una lista bastante extensa de artÃculos y tutoriales de listas, menús, navegación y pestañas. Los hay mejores, peores, más sencillos, os recomiendo que os deis una pasada por ellos y veáis cual se adapta mejor a vuestras necesidades. Eso sÃ, comprobarÃa que funcionen en todos los navegadores. Top 71 CSS Menus Navigation Tabs
Via / Digg
En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.
La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:
El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.
El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.
Un tutorial bastante interesante que nos responderá varias preguntas sobre maquetación de varios elementos. Nos ayudará a comprender cómo apilar capas, alinear elementos inline, propiedades float y collapse, hasta un total de 15 preguntas:
Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:
<div class="clear"></div>
existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.
Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.
Uno de los mayores problemas con los que nos encontramos cuando estamos desarrollando una aplicación web es la compatibilidad con los diferentes navegadores, bueno, realmente la compatibilidad de estos navegadores con los estándares.
Para ayudarnos en esta lucha, nada mejor que esta serie de recursos:
Cross Browser CSS For Your Site: una guÃa para realizar CSS compatible con los diferentes navegadores, grandes consejos con ejemplos, no teorÃa.
Starting With CSS: Revisited: cada navegador tiene estilos por defecto para las etiquetas HTML, siendo estos algo diferentes entre ellos. Elimina el margin y el padding para empezar con todos los navegadores del mismo modo.