Qué es HTML5 y su impacto en el Periodismo

HTML5

HTML es el lenguaje con el que se estructura el contenido de una página web

1. HTML

Las siglas HTML corresponden a la denominación del lenguaje de marcado con el que se codifican las páginas web: HyperText Markup Language.

Una página web es un documento compuesto por piezas y fragmentos de información de diferente tipo (textos e imágenes) y presentado como un todo gracias a la magia del navegador. Para que este navegador (Chrome, Mozilla o Safari) sepa como unir todas las piezas de la auténtica criatura frankensteiniana que es casi toda página web, necesita encontrarse esas piezas o fragmentos codificadas siguiendo una convención determinada. Esa convención es el lenguaje o protocolo HTML.

La H de HyperText se debe a que este protocolo proporciona también un medio para enlazar páginas entre ellas, aunque estén situadas en ordenadores ubicados cada uno de ellos en una punta distinta del planeta, todo ello en unión con otro protocolo, el HTTP. La parte Text (HyperText) es porque se supone que el origen y el destino del enlace se hace entre fragmentos de texto. Actualmente, ya no es así. El origen puede ser una imagen y el destino igual. Todas las posibilidades están actualmente permitidas, como es sabido (texto-imagen, imagen-texto, etc).

La M de Markup se debe a que proporciona una serie de etiquetas (es el nombre técnico) con las que se puede marcar y de este modo estructurar el contenido de la página. Las dos más universales son la etiqueta p, por paragraph, que permite marcar un texto como un párrafo y el grupo conocido como hx, por heading, y de la que hay 6 variedades, de la h1 a la h6, que sirve para marcar títulos y subtítulos (el h1 marca el título principal, y así sucesivamente).

La L es de Language y corresponde al hecho de que todo esto junto: las etiquetas (alrededor de un centenar) más las reglas para utilizarlas se supone que constituyen un lenguaje; artificial y limitado, pero todo un lenguaje.

Aquí tenemos un listado de las etiquetas HTML.

¿Dónde están estas marcas o etiquetas del HTML? Están en el contenido de cada página, pero solamente las podemos ver si activamos la opción <ver código fuente> del navegador ya que es el nombre que recibe la página cuando la vemos como lo que es en realidad: un archivo de texto puro, con etiquetas HTML (y otras intruciones) para unir en la ventana del navegador como un todo coherente los distintos elementos que la componen (también podemos ver el código fuente si abrimos el archivo de la página con un editor de HTML o con el bloc de notas en lugar de un navegador).

 

PBS_ Nav

Una página web interpetada por el navegador

 

pbs-CF

El código fuente (fragmento) de la misma página

2. HTML5 = etiquetado semántico

La cuestión es que el lenguaje HTML evoluciona y cada versión recibe un número. La última es, justamente, HTML5. No solamente la última versión sino probablemente la más importante desde que se inventó el lenguaje, porque todas las anteriores, al menos entre la 3 y 4 contenían pocas muy pocas innovaciones.

La importancia de HTML5 radica, al menos, en dos cosas. Primera: publicar con HTML5 significa más opciones, más posibilidades, en definitiva más potencia expresiva que usando cualquier versión anterior. Además usamos una versión más madura y con soluciones más sabias que versiones anteriores que, aunque fuera de forma involuntaria, alentaban malas prácticas de programación de las páginas que luego hacían más difícil su mantenimiento.

En segundo lugar, radica en algo cada vez más importante para los buscadores y para la nueva era de la búsqueda semántica que están intentando aportar, es decir, una era en la que los buscadores interpreten mejor el contenido de las páginas.

Aunque no van demasiado lejos, por primera vez en la ya larga historia del lenguaje HTML, la versión 5 incorpora etiquetas y atributos (las etiquetas pueden tener atributos, otro término técnico) con un claro valor semántico, más allá de las etiquetas p o hx mencionadas.

Aquí tenemos un listado de tales etiquetas semánticas.

Además, el lenguaje HTML5 está especialmente preparado para ampliar la semántica de las publicaciones web usando otro estándar complementario: una clase de metadatos, denominados microdata, contemplados también por el protocolo schema.org, aprovado por los buscadores y que utiliza etiquetas y atributos del lenguaje HTML5 para expresar con mucha precisión el significado exacto de determinados contenidos.

3. Respeto por los estándares = protección de la inversión

Afortunadamente quedan muy atrás los tiempos en los que cada navegador aportaba sus propias etiquetas exclusivas al lenguaje HTML, con lo cual la confusión y toda clase de problemas de compatiblidad quedaba servida.

Aquellos tiempos provocaron una sana reacción por parte de la élite de los diseñadores y programades de la web, en forma de una llamada al respeto por los estándares. Quedó bien establecido hace casi una década que el lenguaje de la web debía partir de un estándar respetado por todos, y que las versiones propietarias de cada navegador y otras excentricidaes debían quedar eliminadas.

De este modo, usar siempre la versión actual del HTML es una forma de respeto por los estándares (que también tiene sus problemas, pero no vamos a entrar ahora en ellos). Pero lo más importante es que ese respeto por los estándares es la mejor garantía de protección de la inversión, ya que cada nueva versión del lenguaje HTML, al estar producida por el mismo organismo normalizador (el W3C). mantiene una compatibilidad descendente, es decir, cuando aparezca la norma HTML6, y los nuevos navegadores de adapten a ella, las páginas creadas con HTML5 se seguirán visualizando perfectamente.

Otras ventajas de respetar los estándares es que incorporan una filosofía muy sofisticada (fruto de su ardua construcción entre los múltiples actores que intervienen) siempre en favor de la mejor experiencia de usuario y de una web que permita un acceso universal. Por ejemplo, usar HTML5 implica también que debe separarse de forma estricta la estructuración del contenido de la página, a cargo de las etiquetas HTML, de su presentación (formato, diseño) a cargo del lenguaje CSS (Cascading Style Sheets, del que no hemos hablado, queda para otra ocasión).

De este modo, el mismo contenido, estructurado con HTML5, se puede adaptar para diferentes pantallas y dispositivos usando hojas de estilo creadas con el mencionado lenguaje CSS. Esta es la base que permite, para mencionar un caso especialmente importante, que los contenidos de una página se visualicen igual de bien en una pantalla de un ordenador de escritorio y en una pantalla de un smartphone (si las cosas se han hecho bien, claro).

Este es el famoso responsive design (diseño ada`ptable) que permite que los sitios web se puedan navegar perfectamente desde un móvil, sin que las empresas deban crear dos o más versiones paralelas del mismo sitio.De paso, es la opción que defiende Google para proporcionar mejor experiencia de uso a los usuarios de la web móvil, y en consecuencia, Google posiciona mejor los sitios que usan responsive design.

4. Impacto en el Periodismo

Se supone que toda publicación digital, en tanto, publicación web, debe utilizar las últimas versiones del HTML por los motivos señalados en los puntso 2 y 3 y en definitiva para aprovechar toda su potencia. Un sitio de un medio de comunicación tiene necesidades muy sofisticadas, mucho más que la media, en cuanto a formatos y contenidos. Algo que no habíamos dicho todavía, por ejemplo, es que HTML5 aporta también grandes ventajas para publicar contenido multimedia.

Además, gracias a las etiquetas con valor semántico, las noticias y otros productos periodísticos tienen una semántica más clara para los buscadores. ¿Y qué se supone que persigue -y con aínco- un medio de comunicación? Tráfico, tráfico y más tráfico. Este tráfico puede llegar en buena parte desde la página de resultados de los buscadores y medios sociales (como Facebook) pero estos buscadores necesitan entender la página para poder presentarla en sus resultados.

Por eso, el uso de un código fuente adecuado es uno de los factores del SEO (Search Engine Optimization). En particular, forma parte de los llamados factores OnPage, es decir, de aquellos que en principio están bajo el control del responsable de la página. Lo importante es que puede ser un factor positivo o negativo. Si el código fuente es deficiente, será un factor negativo. Si el código fuente está bien implementado y se adapta a los últimos estándares, será un factor positivo.

Por tanto aquí tenemos la siguiente relación: con HTML5 los sitios periodísticos en particular y los sitios de comunicación y ricos en contenidos en general tienen muchas más posibilidades de ser correctamente interpretados por los buscadores y por tanto, su visibilidad será mayor.

Por otro lado, es impensable que un medio de comunicación no contemple la web móvil. Aquí, de nuevo HTML5 es su mejor aliado. Junto con CSS y algunas tecnologías de programación de servidor adicionales, un medio de comunicación puede tener una sola versión de sus contenidos y conseguir que se visualicen perfectamente en cualquier pantalla (responsive design), lo cual nuevamente afectará a su SEO, ya que Google posiciona mejor los sitios que utilizan esta tecnología adaptativa.

Por último, la mayor complejidad (en sentido positivo) del lenguaje HTML5 permite generar sitios con mejor navegación lo que redunda también en una mejor experiencia del usuario, con lo cual aumentamos la posibilidad de vuelva a visitarnos, por un lado, y de que sus visitas sean más largas, por otro.

5. Cómo se implementa

Ningún sitio profesional, y menos el sitio de un medio de comunicación, puede permitirse trabajar sin usar un CMS (Content Management System), y es aquí dónde podemos tener problemas. Si disponemos de las ventajas de automatización de un CMS, entonces no disponemos de la posibilidad de usar directamente HTML. O una cosa u otra. Y editar, publicar y mantener un sitio complejo usando directamente HTML (p.e. con un editor de páginas web local) es una locura.

 

CMS

La forma normal de crear y publicar contenidos, a través de un CMS (WordPress en este caso) oculta al periodista el código fuente.

Entonces, por mucho que nos guste HTML5 necesitamos que el CMS que usamos para gestionar y publicar los contenidos utilice HTML5 y no versiones anteriores del HTML y no digamos soluciones completamente desacreditadas (como las basadas enteramente en flash). Además, necesitamos que el CMS esté bien programado para obtener provecho del etiquetado semántico, de lo contrario, tampoco nos servirá de mucho su (discreto) aporte a favor de la web semántica.

El consejo por tanto sería: usar un CMS, por supuesto; pero no usar CMS y/o temas para el CMS que no sean compatibles con HTML5. Además, asegurarse que está adecuadamente programado para que los contenidos y la estructura de los mismos queden marcados de forma automática o semi automática con las etiquetas semánticas que correspondan en cada caso.

De paso, debería implementarse algún módulo que permita añadir y editar los metadatos. Por último, pero no menos importante, el tema usado debería ser del tipo responsive design, que ya hemos comentado, es decir, debería permitir que el sitio se viera igual de bien en la diversidad de pantallas que utiizan actualmente los usuarios para acceder a las noticias, y que van desde las de 17 pulgadas o más, de un ordenador de sobremesa a las pantallas de entre 4 o 5 pulgadas como las de un smartphone.

Todo esto lo permite de forma sumamente eficiente algunos CMS modernos, entre ellos de forma notable WordPress, y de aquí su enorme presencia en la web en general: se estima que algo más del 20 por ciento de los sitios web están actualmente gestionados por WordPress, y en particular su notable implantación en el sector de las que podríamos llamar las PYMES de la Comunicación, es decir, la gran mayoría de los nuevos medios nacidos digitales.