Tag: HTML5

La nueva etiqueta ya es aceptada por algunos navegadores

La nueva etiqueta <main> está en el borrador de HTML 5.1 (The main element), pero como podemos ver en el artículo de MDN dedicado a <main>, esta etiqueta ya está soportada por Chrome 26 y Firefox 21.

Muy importante, aprende a usarla correctamente:

The HTML <main> element represents the main content of the <body> of a document or application. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document’s main function is as a search form).

Note: There must not be more than one <main> element in a document, and it must not be a descendent of an <article>, <aside>, <footer>, <header>, or <nav> element.

 

Errores comunes en HTML5

HTML5 es una realidad, no hay razón para no usarlo, el próximo año se supone que alcanzará el nivel de recomendación… ¿pero sabemos usarlo?

En el artículo Avoiding common HTML5 mistakes han recogido algunos de los errores más comunes que comete la gente con HTML5:

  •  No uses <section> como envoltorio (wrapper) para aplicar estilo: si lo único que quieres es aplicar un estilo, sigue usando <div>.
  • Utiliza <header> y <hgroup> sólo cuando sean necesarios, es decir, cuando tengas que agrupar más de una cosa.
  • No envuelvas cualquier lista de enlaces con <nav>, se tiene que emplear únicamente para los bloques de navegación principales.
  • Problemas con el nuevo elemento <figure>: cualquier imagen no es una figura y una figura puede ser casi cualquier cosa.
  • No incluyas atributos type innecesarios: no es un error, pero no hacen falta.
  • Uso incorrecto de los atributos de los formularios, en especial los atributos que son booleanos.

La tabla periódica de HTML5

Periodic Table of the Elements es una curiosa página donde se muestra, como si fuera la tabla periódica de los elementos químicos, el nuevo lenguaje HTML 5, que por ahora la última versión es un borrador del 29 de marzo de 2012.

Los 107 elementos que posee por ahora HTML 5, se agrupan en las siguientes categorías:

  • Elemento raíz (html)
  • Semántica a nivel de texto (span, a, b, i, q, …)
  • Formularios (form, select, meter, datalist, …)
  • Datos tabulados (table, caption, tr, th, td, …)
  • Metadados y scripting (head, title, meta, …)
  • Contenido agrupado (p, blockquote, hr, div, ol, …)
  • Secciones de documento (section, header, h1, h2, …)
  • Elementos interactivos (menu, command, summary, details)
  • Contenido incrustado (img, area, map, object, canvas, …)

¿Por qué es malo Flash? Porque no es una página web

Ayer escribí la entrada ¿Por qué es malo Flash? y dejé pendiente mi respuesta.

Podría echar mano de lo que dicen otros, como por ejemplo:

  • Los seis motivos de Steve Jobs para rechazar Flash (aunque da risa que uno de los motivos sea que Apple defiende los estándares abiertos, jajaja, ¡qué chiste más bueno!)
  • No debes utilizar Flash para adornar una página. Si tu contenido es aburrido, reescríbelo y contrata a un fotógrafo profesional para hacer mejores fotos. No hagas que tus páginas se muevan. (Jakob Nielsen)

Pero mejor voy a contar una historia, para que sea más personal…

La primera vez que vi una página hecha con Flash, debió ser por el año 1998 o 1999 pensé “¿cómo diablos se hace esto? Yo no puedo hacer esto con lo que sé de HTML y JavaScript” (en 1998, CSS era un desconocido).

Sin embargo, al ver el código fuente de la página, mi sorpresa y admiración se transformó instantáneamente en una sensación de engaño. “¡Esto no es HTML! ¡Esto no es una página web” grité.

Hacer una página web con Flash es como hacer una página web con un applet de Java, o hacer una página web con VRML, o con cualquier otro plugin similar o hacer una página web que simplemente muestra un vídeo: ESO NO ES UNA PÁGINA WEB. Como dice la definición de applet en la Wikipedia:

Un applet es un componente de una aplicación que se ejecuta en el contexto de otro programa, por ejemplo en un navegador web. El applet debe ejecutarse en un contenedor, que le proporciona un programa anfitrión, mediante un plugin, o en aplicaciones como teléfonos móviles que soportan el modelo de programación por “applets”.

Ya está, no le des más vueltas: hacer una página web con Flash no es hacer una página web (la página web simplemente hace de contenedor), es simplemente, hacer algo con Flash, ponerlo dentro de una página web y punto.

En los últimos años, gracias al diseño adaptativo o adaptable (responsive design) mucha gente está empezando a darse cuenta de lo que realmente es la Web. Es triste, porque han hecho falta 20 años para que mucha gente se dé cuenta, pero por fin, parece que se ha logrado. La Web no es un folleto, no es una hoja de papel, no es una cartulina, no es una valla publicitaria, no es nada de esos medios en los que conoces el tamaño de la superficie en la que tienes que trabajar para hacer tu diseño. NO, UNA PÁGINA WEB NO TIENE UN TAMAÑO FIJO. Seguro que con Flash también se podría hacer un diseño adaptable, pero nunca lo he visto, porque Flash te hace creer que tu página tiene un tamaño fijo (repito, seguro que se podría hacer adaptable… pero nunca lo he visto).

Pero hay otras razones más importantes…

Una razón muy importante: FLASH NECESITA QUE EL USUARIO TENGA INSTALADO UN PLUGIN. Y no siempre han existido plugins de Flash para todos los navegadores y todos los sistemas operativos. Y los plugins dan muchos problemas y hay que estar actualizándolos constantemente.

Además, y quizás más importante: FLASH ES UN SOFTWARE PROPIETARIO. No es un estándar, no es abierto, no es libre, es un producto comercial.

Todas estas razones son totalmente contrarias al espíritu de la Web. Flash y otras cosas parecidas han sido y siguen siendo totalmente opuestas a lo que debe ser la Web.

Y si quieres más razones, tienes el ejemplo que mostraba ayer en la entrada ¿Por qué es malo Flash?, que tenía graves problemas de accesibilidad y posicionamiento, aunque respecto a esto quiero hacer una puntualización muy importante: también se puede y se hacen las cosas mal con sólo HTML, CSS y JavaScript; sin embargo, por su naturaleza, con Flash es mucho peor (por ejemplo, durante muchos años era imposible hacer algo accesible con Flash, y aunque ya se puede, sigue siendo difícil y pocos desarrolladores lo saben hacer).

¿Necesitas más razones?

Sin embargo… bien usado, Flash no es tan malo. Cuando se usa como un complemento, por ejemplo en una tienda online para que un usuario pueda interactuar con un producto y “sentir” cómo es ese producto, entonces sí que es una buena opción. Es decir: Flash es bueno cuando aporta algo más, pero si lo quitas no pasa nada porque sigue existiendo la página web y el usuario puede seguir navegando y recibiendo la información esencial.

Desgraciadamente, muchos desarrolladores no lo entienden así y hacen sitios web en los que elementos esenciales como la barra de navegación o el listado de productos están hecho en Flash, o mucho peor, todo el sitio web está hecho en Flash.

Malo, no, malísimo.

HTML5 Doctor

HTML5 Doctor es un sitio web en el que se explica HTML y las novedades de HTML5.

Lo más interesante de este sitio web es que no se limita únicamente a los aspectos técnicos, es decir, a lo que podemos encontrar en cualquier referencia sobre el lenguaje, sino que explica cómo usar las etiquetas en diferentes situaciones.

Por ejemplo, ¿cuál es la diferencia entre <article> y <section>? En este sitio web nos dan su opinión:

There’s been a lot of confusion over the difference (or perceived lack of a difference) between the <article> and <section> elements inHTML5. The <article> element is a specialised kind of <section>; it has a more specific semantic meaning than <section> in that it isan independent, self-contained block of related content. Wecould use <section>, but using <article> gives more semantic meaning to the content.

By contrast <section> is only a block of related content, and <div> is only a block of content. Also as mentioned above the pubdate attribute doesn’t apply to <section>. To decide which of these three elements is appropriate, choose the first suitable option:

  1. Would the content would make sense on its own in a feed reader? If so use <article>
  2. Is the content related? If so use <section>
  3. Finally if there’s no semantic relationship use <div>

Dr Bruce has written HTML5 <article>s and <section>s, what’s the difference?, so we recommend reading that if you are still fuzzy on when to use <article>.

Hecho a mano con código ecológicamente sostenible

Me he encontrado en dos sitios web, sospechosamente similares, (500px y web3media, seguro que el segundo ha diseñado el primero) la siguiente nota:

Handmade using ecologically sustainable code

que se puede traducir como:

Hecho a mano con código ecológicamente sostenible

¿Qué significa esto?

Pues parece que es una forma jocosa de decir que está hecho con HTML5, con las nuevas tecnologías, lo que asegura una compatibilidad máxima con la mayoría de los navegadores web actuales y futuros.

HTML5: cada vez más cerca

Hoy es 31 de diciembre de 2012. A partir de mañana, quedará aproximadamente un año y medio para que el W3C publique la recomendación definitiva de HTML5, ya que la fecha prevista es mediados de 2014. Pero no hay que esperar hasta entonces para usar HTML5: se puede usar ya.

Pero se puede usar con cuidado, con mucho cuidado. Para saber lo que podemos o no podemos usar, debemos consultar sitios web en los que se recopila información sobre el estado de soporte de las nuevas características de HTML5 por parte de los navegadores más populares. Los mejores sitios son:

  • HTML5 Tag Reference en W3Schools ofrece, etiqueta a etiqueta, el soporte en los principales navegadores.
  • When can I use… permite buscar una etiqueta de HTML5 o una propiedad de CSS3 y conocer su soporte por los navegadores más populares.
  • The HTML5 Test proporciona una puntuación que permite conocer el nivel de soporte de las nuevas tecnologías por diferentes navegadores.

Además, son muy interesantes también:

 

chtemele, un juego de mesa para aprender

A través de Twitter me han informado de que existe chtemele, el primer juego de mesa sobre HTML colaborativo y educativo. ¡Genial, qué buena idea, aprender o repasar HTML5 jugando!

Este juego es gratuito y se pueden descargar unos PDF para que cada uno se lo pueda imprimir, ya que se distribuye mediante licencia creative commons. Pero además, también es posible conseguir la versión “de verdad”, con la caja, el tablero y las cartas.

Más información en la web cHTeMeLe – le jeu de plateau certifié HTML5 (en francés).