dzign.us

Etiquetas autocerradas y tipo de contenido en XHTML y HTML5

Sat, 27 Aug 2011 20:15:00 -0300

Al escribir XHTML, ¿alguna vez se preguntaron porqué existen etiquetas que pueden autocerrarse mientras que otras no? Me explico:

La explicación es que se suele utilizar el autocerrado en las etiquetas que no admiten contenido. Algunas de ellas son: , , , ,

, .

Sin embargo, en XHTML, técnicamente cualquier tipo de elemento puede autocerrarse y ser válido:

A pesar de esto, miren este ejemplo. Notaran que los divs autocerrados aparecen anidados:

¿Raro no? Además, si ven el código fuente, verán que el doctype es XHTML pero aparecen marcas de errores en los divs:

Aclarando el asunto

La realidad es que los navegadores modernos se guían por la cabecera Content-Type que envía el servidor. Si miran nuevamente el ejemplo, pero esta vez revisando sus cabeceras (con Firebug por ejemplo) verán que el tipo es text/html.

Es decir, por mas que se especifique un determinado doctype, lo que predomina es el valor de Content-Type: En el ejemplo, se esta usando la sintaxis válida de XHTML, pero la página es servida como HTML (text/html), entonces el navegador entiende que posee etiquetas inválidas (y por eso mismo se muestran anidados los divs y aparecen las marcas rojas).

Si realmente se quiere utilizar XHTML, lo que se debe hacer es enviar en el Content-Type el valor application/xhtml+xml (o application/xml).

Pero cuidado, hacerlo puede ocasionar dos potenciales problemas:

IE 6/7/8 no entiende el significado de application/xhtml+xml y tratará a la página como un archivo descargable, sin mostrar nada.
En caso de existir un error de sintaxis (por ejemplo, una etiqueta mal cerrada) el navegador directamente mostrará el error ya que lo debe tratar al documento como si fuera un XML:

Por las razones anteriores, la mayoría de las páginas son servidas como text/html aún usando sintaxis XHTML.

¿Qué sucede en HTML5 con las etiquetas autocerradas y el tipo de contenido?

La especificación de HTML5 es un poco más flexible, ya que esta pensada para que no existan muchas dificultades en la migración de documentos. Por lo tanto admite muchas reglas de sintaxis de XHTML y HTML.

En el caso de los elementos que no admiten contenido, son válidos estando autocerrados o no:

Con los elementos normales, la especificación dicta una serie de reglas para determinar si los tags de cierre (o de apertura!) pueden omitirse, siendo estas reglas opcionales. Por ejemplo:

A li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

Con respecto al Content-Type, para que los navegadores entiendan como deben renderizar el documento, la especificación define que:

Los documentos escritos con la sintaxis HTML deben ser servidos como text/html;
Los documentos escritos con la sintaxis XHTML deben ser servidos con application/xhtml+xml o application/xml (y siempre teniendo en cuenta los posibles inconvenientes comentados);
Y también es posible servir los documentos con sintaxis HTML con el tipo de contenido text/html-sandboxed en el caso que dicho documento contenga contenidos que no son de confianza (como los iframe). Sin embargo los navegadores modernos aún entienden de que trata este tipo de contenido.

¿Qué tipo de sintaxis utilizar en HTML5?

Lo ideal es escribir correctamente HTML/XHTML y servir la página con el tipo de contenido correcto. Tomar una decisión depende de varios factores y de que tan estrictos/cómodos nos sintamos. HTML5 es flexible.

Yendo un poco más en profundidad con otros asuntos de sintaxis en HTML5, particularmente me gusta mucho el estilo descripto en el artículo My Preferred Syntax Style for HTML5 Markup (el cual resumo muy brevemente):

Utilizar lowecase para todo el marcado;
```
    Un breve ejemplo
```
Siempre utilizar comillas para los valores de los atributos;
```
Otro ejemplo
```
No autocerrar las etiquetas que no admiten contenido;
Siempre cerrar las etiquetas que poseen contenido;
```
    Otro breve ejemplo
```
No repetir el valor en los atributos booleanos.

Pero como decía, esta es una preferencia personal, cada uno es libre de seguir sus predilecciones ;)

kratko.js: Una ayuda al momento de refactorizar código JavaScript

Sat, 27 Aug 2011 20:09:24 -0300

kratko.js: Una ayuda al momento de refactorizar código JavaScript:

La refactorización de código no es algo simple. Sobretodo porque suele hacerse como último recurso ocasionando varios dolores de cabeza.

kratko.js es un script que otorga un poco de ayuda para comenzar al refactorización de código JavaScript, analizando el código y ofreciendo una serie de datos útiles como la cantidad de métodos, cantidad de argumentos o la distribución de las líneas de código.

Menús e imágenes sensibles al tipo de dispositivo

Sat, 27 Aug 2011 19:53:00 -0300

Algunos recursos relacionados al diseño web sensible (o responsive web design) en imágenes y menús:

Responsive-Menu es una extensión para jQuery que mejora la experiencia de menús extensos, permitiendo convertir a un menú dado en un listado de opciones cuando el tamaño de la pantalla es reducido. Demo.
Relacionado a lo anterior, en el artículo Convert a Menu to a Dropdown for Small Screens se plantea una solución similar para los menús. Por otro lado lado, en Adactio entablan dos soluciones, para cambiar el orden de los contenidos ante diferentes tamaños de pantalla, sólo con CSS.

Adaptive Images es un script que combinando PHP, JavaScript y algunas configuraciones en el servidor, permite cargar y crear diferentes tamaños de imágenes para mostrarlos en la situación adecuada. La solución está inspirada en el artículo Responsive Images: Experimenting with Context-Aware Image Sizing.

deck.js te ayuda a crear presentaciones HTML

Sat, 27 Aug 2011 18:26:23 -0300

deck.js te ayuda a crear presentaciones HTML :

Las presentaciones en HTML no son nuevas (algunos proyectos: Slidy, S5, html5slides, DZSlides) pero particularmente deck.js me gustó porque esta pensando para ser flexible en tres aspectos: Diseño, extensibilidad y transiciones.

Su código fuente esta alojado en GitHub.

Windoodles

Sat, 27 Aug 2011 17:54:35 -0300

Windoodles

Helium: Te ayuda a saber que estilos CSS se utilizan y cuales no en tu sitio

Wed, 24 Aug 2011 00:50:01 -0300

Helium: Te ayuda a saber que estilos CSS se utilizan y cuales no en tu sitio:

En el momento de analizar la performance de nuestro sitio puede ser útil Helium, un JavaScript que permite obtener un informe detallado sobre los estilos que se están utilizando (o no) en una o más páginas.

Hace un tiempo había conocido a CSS Usage, una extensión para Firebug que permite realizar el mismo trabajo, sin embargo esta ya no es mas actualizada.

¿Cómo funciona un navegador web moderno?: El detrás de escena

Wed, 24 Aug 2011 00:50:00 -0300

¿Cómo funciona un navegador web moderno?: El detrás de escena:

Creo que How Browsers Work: Behind the Scenes of Modern Web Browsers es uno de los mejores informes que vi en los últimos meses, explicando de forma detallada la arquitectura de un navegador web, sus componentes, interacciones y sistemas.

Y me parece importante mirar un poco de que trata, porque como dice Paul Irish en el prefacio:

As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices.

Bootstrap: Colección de componentes reutilizables, creado por Twitter

Wed, 24 Aug 2011 00:49:57 -0300

Bootstrap: Colección de componentes reutilizables, creado por Twitter:

Muy interesante la propuesta de Twitter, al publicar Bootstrap, una colección de diferentes componentes web reutilizables (grillas, formularios, botones, ventanas, mensajes, etc.) creados con Less, de libre uso y modificación (a través de su repositorio en GitHub).

Y mas allá de esto, siempre me gustaron este tipo de iniciativas, porque si uno se pone a leer / investigar su código fuente, al final se termina aprendiendo algo nuevo o sacando ideas: piensen que este tipo de empresas suelen tener gente muy capacitada, y por lo general, si algo se hizo de una forma, es porque tuvo sus razones de peso por detrás para hacer así ;)

Photo

Wed, 24 Aug 2011 00:49:53 -0300

Codecademy: Cursos para aprender a programar

Wed, 24 Aug 2011 00:49:46 -0300

Codecademy: Cursos para aprender a programar:

Me gustó mucho la idea de Codecademy, otorgando la posibilidad de aprender a programar de forma interactiva pero también sumando una pizca social al permitir ir obteniendo insignias y méritos a que se va avanzando. Ademas la misma aplicación se encarga de ir guardando los progresos en las tareas.

Por ahora el curso principal es sobre JavaScript, aunque existe un formulario para proponer más cursos.

Y pensándolo un poco, ¿no estaría bueno crear una aplicación así, Open Source, pero pensada para escuelas? ;)

CoffeeScript Cookbook: Colección de tips y soluciones

Wed, 24 Aug 2011 00:49:40 -0300

CoffeeScript Cookbook: Colección de tips y soluciones:

¿Comenzando con CoffeeScript?

Seguramente te atraiga esta interesante recopilación de trucos y soluciones, en donde cualquiera puede seguir contribuyendo desde su repositorio en GitHub.

Anatomía de una aplicación móvil HTML5 Diagrama y resumen muy...

Wed, 24 Aug 2011 00:49:35 -0300

Anatomía de una aplicación móvil HTML5

Diagrama y resumen muy claro sobre los componentes de una aplicación móvil desarrollada con HTML5.

OOCSS - Poniendo OOrden en CSS: Muy buena presentación sobre...

Fri, 29 Jul 2011 17:33:45 -0300

OOCSS - Poniendo OOrden en CSS: Muy buena presentación sobre Object-Oriented CSS realizada por @janogarcia.

Aprovechando la ocasión, también recomiendo la presentación en video The Top 5 Mistakes of Massive CSS dictada por Nicole Sullivan (principal ideadora de OOCSS).

Evitando errores comunes en HTML5

Fri, 29 Jul 2011 16:58:55 -0300

Evitando errores comunes en HTML5:

Avoiding common HTML5 mistakes es una recomendable lectura con consejos y ejemplos claros para evitar errores de marcado HTML5.

jQuery Boilerplate

Fri, 29 Jul 2011 16:22:33 -0300

jQuery Boilerplate:

Si tienen un poco de experiencia en JavaScript, escribir una extensión para jQuery no tiene mucha ciencia, pero si necesitan algo rápido para empezar a desarrollar, jQuery Boilerplate ofrece una plantilla modelo (con o sin comentarios incorporados) para tomar como base.

Photo

Fri, 29 Jul 2011 15:39:16 -0300

Chosen: Alternativa más amigable al elemento select

Fri, 29 Jul 2011 15:34:35 -0300

Chosen: Alternativa más amigable al elemento select:

¿Recuerdan mi artículo Una mejor solución para el select multiple en donde comentaba sobre los problemas de este elemento HTML y algunas soluciones?

Chosen es una interesante solución en JavaScript que se añade a la lista de alternativas para mejorar la experiencia de uso de los selects.

Chosen viene en tres sabores: para jQuery, Prototype o Mootools, y su código fuente se encuentra en GitHub.

Mobilizer: previsualización rápida de sitios en distintos smartphones

Thu, 21 Jul 2011 19:33:00 -0300

Mobilizer: previsualización rápida de sitios en distintos smartphones:

Mobilizer es una aplicación creada en Adobe AIR, que permite tener una previsualización aproximada de como se vería nuestro sitio web (local o remoto) en 4 dispositivos: iPhone 4, Blackberry Storm, Palm Pre, HTC Evo.

Cuando digo “aproximada”, es porque no es una simulación exacta, para eso estan los distintos simuladores de cada plataforma.

Es más bien una aplicación para tener un vistazo rápido de lo que estamos haciendo o para obtener capturas de pantallas para mostrar a nuestros clientes.

Bourbon: Colección de mixins para utilizar con Sass

Thu, 21 Jul 2011 19:00:07 -0300

Bourbon: Colección de mixins para utilizar con Sass:

Como dice el título, Bourbon es una colección de mixins para utilizar en conjunto con Sass y agilizar la creación estilos.

Vendría a ser un proyecto alternativo a Compass, ya que, al igual que este último, también ofrece variadas funciones útiles relacionadas a estilos CSS3 (bordes redondeados, animaciones, transformaciones, sombras, gradientes…), grillas, colores o proporciones (como el calculo del Golden Ratio para un determinado valor).

Si utilizan regularmente Sass, les recomiendo mucho mirar el código fuente de Bourbon y su readme, en donde hay muchos mixins interesantes para aplicar rápidamente en nuestro proyecto sin necesidad de descargar toda la colección. Por ejemplo:

@include position(relative, 0px 0 0 100px);

Para poder obtener los estilos:

position: relative;
top: 0px;
left: 100px;

Y como siempre digo, si aún no utilizan Sass, pueden empezar por aquí.

If you understand this, get a girl friend… Ya tiene...

Thu, 21 Jul 2011 18:27:00 -0300

If you understand this, get a girl friend…

Ya tiene varios años esa campaña de Axe, aunque, como comentaron, podría continuar con:

} else if (this.single == true && this.happy == true) {
this.setGirlfriend(null);
}