HTML5, CSS3 y los estándares de la web

Hola a todos. Hoy os voy a hablar de un tema que, aunque no es noticia, seguirá estando en boca de muchos hasta dentro de bastante tiempo. Os quiero introducir a HTML5, que es el nuevo estándar que el World Wide Web Consortium (w3c de aquí en adelante) está preparando como futuro sustituto del actual. Aviso que este artículo va a ser largo (muy largo, de verdad), así que preparad palomitas o algo para entreteneros mientras leéis.

Lo primero que hay que hacer es definir que es eso de la w3c, HTML, CSS y demás terminología que usaremos más adelante, así que, empecemos con ello. Voy a tirar de wikipedia (en inglés, porque la wikipedia en español no me gusta para nada. Por qué no me gusta la wikipedia en español daría para otra entrada…) más de una vez, así que enlazaré a ella en cada sección.

W3C: Es una organización fundada y dirigida por Tim Berners-Lee (creador del URL, HTTP y HTML, es decir, la base de lo que es la web actualmente) que se encarga de definir unos estándares adecuados para la web.

HTML (HyperText Markup Language. En español, Lenguaje de marcado de hipertexto): Es un lenguaje de marcado que se usa para describir páginas web, siendo el predominante. El lenguaje consta de tags, que el navegador interpreta para darle forma a la página y que el usuario la vea correctamente. Los tags se suelen escribir entre «brackets» (<tag>) y en su mayoría tienen dos partes, una que abre el tag <tag> y otra que lo cierra </tag>. Un ejemplo que aclarará muchas cosas: para que un navegador muestre, por ejemplo, una imagen, se especifica el tag img, tal que así:

<img src="imagen.png"></img>

Este código no será visto por el usuario, sino interpretado por el navegador y mostrado en pantalla. Donde está el tag, en vez de mostrar el texto, el navegador cargará la imagen.

CSS (Casade Style Sheet. En español, hoja de estilos en cascada): Es un lenguaje utilizado para dar formato a un documento estructurado escrito en un lenguaje de marcado (HTML, por ejemplo). CSS fue creado para separar el contenido del documento con la presentación de él.

Con estas pocas definiciones, ya puedo entrar más o menos al tema. Lo primero, la importancia de la definición de un estándar.

La importancia de definir un estándar y por qué deben ser abiertos

Creo que la importancia de los estándares está clara, pero por si acaso, pongo un ejemplo sencillo: si no hubiera un estándar para la circulación y cada uno circulara como quisiera, las calles serían un caos: los coches irían tanto por la derecha como por la izquierda, cruces sin prioridades de paso,… En fin, supongo que vuestra imaginación os puede ayudar a resolver el resto. Un estándar ayuda a que las cosas vayan ordenadas, de manera que aunque cambiemos las condiciones (de ciudad o país en nuestro ejemplo), nos podamos mover con igual soltura.

Por otra parte, si el estándar no es abierto, nunca podríamos conocer por nuestra cuenta cómo funciona el sistema. Volviendo al mismo ejemplo, si el código de circulación no fuera público, no podríamos aprenderlo. Para algo público como es circular, no tiene ni pies ni cabeza, pues las cosas públicas deben estar al alcance de todos.

En nuestro caso, HTML sería el estándar (y abierto). Si utilizáis dos navegadores (decentes) distintos para visualizar la misma página, veréis que se muestra igual en los dos. Esto es gracias a que el estándar es el mismo. Además, al ser un estándar abierto, podríamos crear nuestro propio navegador.

A pesar de lo que pueda parecer hasta ahora, el estándar actual en la web (HTML4+CSS2) todavía no lo cumplen muchos navegadores en su totalidad. Hay dos test, que seguramente muchos de vosotros conoceréis que son los test Acid2 y Acid 3, que comprueban cómo respetan los estándares los navegadores.

Al terminar Acid2, debe aparecer esta imagen. Aunque parece algo sencillo, Internet Explorer 7, Safari Mobile y Opera Mini todavía no lo soportan.

 

Imagen de referencia de Acid3. A mayor puntuación, mayor respeto del estándar

 

 

 

 

 

 

 

 

 

 

Dentro de las páginas de Acid2 y Acid3, podéis ver los navegadores que soportan y los que no soportan todos los estándares.

Y ahora os estaréis preguntando, ¿a qué viene todo este lío? Esta explicación tan larga y aburrida viene a que ya se está preparando el próximo estándar web, que será HTML5 y CSS3, y traen novedades muy interesantes.

HTML5, CSS3 y la nueva web

Quizá la revisión de un estándar no os parezca muy importante. Es posible que penséis que mientras que el navegador funcione no os interesa lo más mínimo, pero ahora os planteo una situación. Cuando usáis un navegador por primera vez, ¿debéis instalar componentes adicionales para ver una imagen en una página web? Entonces, ¿por qué para ver un vídeo sí? HTML5 trae muchas novedades, elimina objetos obsoletos de HTML4 y actualiza algunos, pero lo que más ha llamado la antención sin duda ha sido el tag de vídeo. Poder ver cualquier vídeo con un navegador «de fábrica» suena increíble, y además, sin necesidad de complementos adicionales, olvidándote de flash, QuickTime y demás.

De HTML5 destacaría sólo tres tags: audio, vídeo y canvas. Vídeo ya sabemos lo que es, audio es como vídeo pero con sonido y canvas es para manipulación de imágenes mediante la programación web. Con estos tres elementos nuevos y CSS3 se pueden hacer maravillas y os lo voy a demostrar. Os voy a dejar unas cuantas cosas hechas basadas en los nuevos estándares. Junto a ellas, os dejaré mi comentario entre paréntesis. Casi todo lo que hay aquí me ha funcionado usando Chromium. No intentéis hacerlo funcionar en navegadores que no respeten los estándares (Internet Explorer, por ejemplo), porque no conseguiréis nada.

• Burbujas y bocadillos de texto usando CSS3 (Para citar a alguien es de lo más elegante)
• Botones usando CSS3 (El efecto de los botones al pulsar es simplemente genial)
• Mostrando imágenes como polaroids usando CSS3 (Hasta con efecto. Me encanta el toque original que da la presentación)
• Menú Dropdown en CSS3 (Hasta ahora, todos los que conocía se basaban en Javascript. Hay que señalar, que no se utiliza ninguna imagen para el menú; todo es código escrito)
• Recreando la interfaz de Mac con CSS3 (Bueno, esto ya es demasiado)
• Galería de imágenes con polaroids en CSS3 (Es obligatorio ver este. Podéis mover los polaroids como si nada…)
• Cubo usando CSS3 (Yo solo veía un plano girando pero sigue funcionando. Podéis rotarlo pinchando y soltando o con las flechas)
• Animaciones en CSS3 (Para verla situad el ratón sobre el pequeño cuadro gris de la derecha)
• Coverflow en CSS3 (Obligatorio verlo. Elegante como él solo y muy útil)
• Letras con el efecto de Star Wars usando CSS3 (Sólo funciona en Safari + Snow Leopard de momento, pero ya se está implementando en Chrome)
• Moléculas tridimensionales usando canvas (Aplicando efectos en tiempo real… y sin complementos adicionales)
• La caja de buscar de Google (De los más graciosos. No es práctico, pero sí decorativo)
• Efecto paso de página + CocaCola + Meninas 3D con CSS3 (Al pasar la página hay dos artículos a la derecha. Pulsando llegaréis a la lata de CocaCola que podréis girar y se verá completa y al cuadro de las meninas)
• Gráfico de barras con CSS3 + gráfico con barras animado (Aplicable a mil sitios y con más elegancia que lo que hay ahora mismo de lejos…)
• Sistema Solar en CSS3 (A mi me va lento, pero está muy currado. Poniendo el ratón sobre el nombre de cada planeta os da su órbita y una pequeña descripción)
• Reloj con CSS3 (El nombre lo indica todo, aunque es bastante más decorativo de lo que dice en el título)
• Bokeh (Mejor lo véis. Añade círculos de colores aleatoriamente al fondo. Muy decorativo, ya que para cada visita, el fondo sería distinto)
• Pacman! (El famoso juego mediante HTML5 y CSS3)
• Asteroids (También en HTML5 usando canvas)

En fin, juegos en HTML5 cada vez hay más, no tenéis más que pasar por esta página, o esta otra y ver la cantidad que hay. Como podéis ver, las posibilidades son ilimitadas y repito: sin instalar nada adicional.

En mi opinión, el tag más importante es el vídeo, y después de él el de audio. Gracias a la galería que estuve construyendo (esa que debería haber publicado por Septiembre y todavía sigue sin acabar) he aprendido mucho sobre los tags de vídeo y audio de HTML5 y creo que estoy en disposición de hacer un buen análisis de ellos.

El concepto de vídeo sin complementos es algo fácil de imaginar y la idea estará clara para mucha gente, pero entonces cabe preguntarse:

– «Ahora que ya sé qué quiero hacer con el audio y el vídeo, ¿qué codec uso para ellos?»

Bienvenidos señores, a la pesadilla de los códecs.

Los tags de vídeo y audio y la pesadilla de los códecs

Empecemos primero por el audio. Principalmente se barajan dos: Mp3 y Ogg Vorbis. Los que no conozcáis Mp3… tiraos por un puente o algo. Por otra parte está vorbis, que es abierto y carente de licencias para su uso. Además, tiene mayor calidad con mejor compresión que AAC (más adelante más información sobre AAC). Por último está Wav, que es audio sin comprimir por lo que un minuto os puede salir por decenas de MB. Aquí tenéis una tabla comparativa:

Fuente: http://html5doctor.com/native-audio-in-the-browser/

Pasemos ahora al vídeo. Todos los que hayáis configurado un ordenador seguro que habréis lidiado con ello: vídeos que no se reproducen o no se reproducen correctamente por culpa de un códec determinado. Imaginaos ahora, lo que tiene que ser extender un códec de vídeo por toda la web. Si queréis mucha información sobre este tema (y sabéis inglés, cosa que es casi indispensable hoy en día), os recomiendo esta página (que yo utilizaré como referencia para mi artículo), que explica muy bien qué pasa con el vídeo en HTML5.

A no ser que quieras mostrar una película de cine mudo, necesitarás vídeo y audio (todo en un mismo archivo que es el vídeo). En un principio se pensó en dos posibilidades, o bien usar Theora (vídeo) + Vorbis (audio) en un contenedor OGV, o bien usar h264 (vídeo) + AAC (audio) en un contenedor MP4. Un poco más tarde llegó VP8, un códec propiedad de On2 que Google liberó tras su compra. VP8 es un códec de vídeo utilizado junto a Vorbis (que es el códec de audio) en un contenedor WebM (que es un contenedor similar a Matroska o mkv). Y así están las cosas todavía… Paso ahora a detallar cada uno de ellos.

h264/AAC: Tiene tantas patentes de por medio que probablemente hasta mirarlo las infringe. El dueño de las patentes es el MPEG LA. Algunas de las empresas que tienen patentes dentro de la MPEG LA son Apple, Microsoft y Sony entre otros. Es el formato usado por Youtube para los vídeos en alta calidad, y lo que es más importante, hay que pagar licencias para usarlo y decodificarlo, amén de algunas barbaridades que hay en el acuerdo de licencia (del estilo o peores que las del CLUF de Windows. El artículo está en inglés pero alucinaréis como nunca, ya os lo aviso) para algunas cámaras de vídeo «profesionales».

Theora/Vorbis: Es un formato abierto libre de licencias. En un principio se pensó en él para ser el estándar para HTML5, pues que sea libre de licencias y abierto lo hacen ideal. Sus detractores dicen que su calidad es peor que la de h264 y otros que la calidad es igual. Ambos aportan estudios que yo no me creo, así que si tengo tiempo pienso hacer uno detallado de ambos.

VP8/Vorbis: Formato abierto y libre de licencias. Está respaldado por Google (lo que ya dice mucho), que ya dijo que pasaría todos sus vídeos de Youtube a WebM para HTML5. Su calidad es superior a la de Theora.

Os pongo ahora una tabla (que he sacado de uno de los enlaces anteriores), mostrando qué formatos soporta cada navegador.

No hace falta ser una lumbrera para darse cuenta de que WebM lleva todas las de ganar: ya está soportado o está pensado darle soporte, tiene una buena calidad, y es un estándar abierto y libre de licenciamientos de cualquier tipo. Parece todo muy claro, sin embargo, la MPEG LA no se va a quedar quieta como es lógico. En palabras del propio Steve Jobs:

«Que algo sea de código abierto no quiere decir ni garantiza que no infrinja las patentes de otros»

Aunque en el enlace hablan sobre el códec Theora, se puede extender también a VP8 (me huele a FUD…). Los que hayáis leído este artículo sabréis bien hasta qué punto odio las patentes. Y es que el mundo de la informática es una asquerosidad. Se puede patentar cualquier cosa, desde el doble clic (sic), patentado por Microsoft, hasta el comportamiento de sudo, que también está patentado por los de Redmond.

¡EOOOO! ¿Se me oye? ¿Cómo queremos avanzar lo más mínimo si permitimos que se patenten algoritmos, comportamientos o gestos del ratón? ¿Soy el único al que todo esto le suena raro? ¿Qué pasaría si patentara el botón de encendido?

Por si ya fuera poco con todo esto, entonces viene la MPEG-LA (que ya le veía las orejas al lobo) y dice que va a ampliar la licencia para uso gratuito en streaming hasta nosecuando… Y por si ya faltara algo, me encuentro con el tipo más desinformado sobre HTML5, que da las noticias así a su aire, sin siquiera saber de qué está hablando. Atentos a la noticia:

«Se acabó la guerra del vídeo en internet: h264 podría salir victorioso»

¿COMOOORRRLLLLL? El artículo está lleno de burradas, como que Google compró Theora (¿?) o, y cito textualmente:

«WebM es un codec, es el nuevo nombre que tiene el OGG Theora VP8»

WTF?!?!?!?! WebM es un contenedor, Ogg otro y Theora y VP8 son códecs de vídeo. No ha dado ni una. Pero bueno, parafraseando a EC-JPR, autor del blog Per Ardua Ad Astra:

«El rigor está al alcance de quien quiera emplear quince minutos en buscar unos datos»

Como hemos dicho antes, uno de los dueños de las patentes de h264 es Apple y, casualmente, el blog que dice esto se llama AppleWeblog. Aunque el autor pinte a h264 muy bonito, en realidad, decodificar h264 en tiempo real es una ardua tarea y por este motivo, todos los dispositivos de Apple llevan hardware específico que se encarga de ello. Ahora, si la W3C hace lo que tiene que hacer, mandará a la mierda a h264 y utilizará VP8 en su lugar. Una vez hecho eso, todos los dispositivos de Apple serán incompatibles con el estándar. Ojo, eso no quiere decir que no sirvan. Apple puede tirar por el camino que eligió Microsoft hace tiempo, la famosa estrategia de adaptar, extender y extinguir, aunque seguramente les saldrá el tiro por la culata.

———————————

La web está cambiando y este estándar puede que sea una gran revolución, o un gran paso hacia atrás. Hay tiempo para hacer las cosas bien, ya la liaron una vez con los GIF (*), por lo que ahora deben hacerlo correctamente. Faltan todavía casi doce años (doce, has leído bien) para que HTML5 esté listo como estándar, tal como anunció Ian Hickson, editor de la especificación de HTML5. Puede que doce años os parezcan mucho (en el 2022), pero pensad que HTML5 va a reemplazar muchas cosas. Van a haber cambios muy gordos (ya los habréis visto a lo largo del artículo) y eso supone tiempo. Esperemos que hagan las cosas bien y elijan estándares abiertos y sin licencias para todos, pues un fallo en este tema podría joder la web, y en los tiempos que corren en los que el único medio de comunicación que no es posible controlar (todavía) es internet (mirad el caso wikileaks tan de moda), un fallo de estas características nos dejaría sin voz en el mundo.

(*): Hubo un problema de patentes (qué novedad…) y se creó el formato PNG para sustituirlo. El formato PNG, cuyo nombre antiguamente significaba «PNG is not GIF», es estático. Para imágenes en movimiento, se utiliza MNG.

Os dije que sería largo, jejeje. Las fuente que he utilizado están enlazadas en el texto, aunque la principal es la wikipedia (en inglés). De todas formas, ahora dejo un par de enlaces interesantes sobre el tema.

• Dive into HTML5
• HTML5 Doctor

———————————

Para terminar, sólo decir que todavía tengo más que escribir sobre esto ya que no he mostrado los reproductores de vídeo o audio en HTML5. Eso lo haré en la presentación de la galería (que ojalá sea pronto), a la que todavía le queda trabajo por delante: escribir la documentación, implementar un par de reproductores más…

Y por último, he cambiado el tema del blog. He vuelto a los orígenes, pues me he hartado del tema amarillo libreta que había antes. Espero que vuestro disfrute del artículo sea inversamente proporcional a lo que yo he disfrutado escribiéndolo. Dudas, correcciones y demás en comentarios, gracias.

Saludos