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.

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:

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.

———————————

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

Acerca de Alejandro

Usuario de linux y estudiante de Física. Jugador/entrenador de baloncesto, aprecio cualquier cosa científica/tecnológica interesante.

Publicado el 3 diciembre , 2010 en Miscelánea, Noticias, Reflexiones, Reviews/Análisis. Añade a favoritos el enlace permanente. 13 comentarios.

  1. Excelente el articulo. Te felicito.

    Esperemos esos doce años para ver llegar con todo a HTML5, y como no también esperemos elijan correctamente a la hora de ver el tipo de codecs que serán utilizados, haber si M$ no hace una de esas implementaciones raras que acostumbra y termina por joder de nuevo lo que hasta ahora parece ir medianamente bien.

    Un saludo

    • Más que Microsoft, me da miedo Apple, que es la que realmente tiene intereses en que sea h264 el estándar. Ha gastado mucho dinero en sus dispositivos, que todos soportan h264, por lo que una posible declaración de WebM o Theora como estándar de vídeo podría suponer un intento de AEE. Lo bueno de todo esto es que Google está en medio y apuesta por formatos libres. Si todo youtube se va a WebM… internet se va a WebM.

      Te he añadido al blogroll. Me ha gustado lo que tenías 😉
      Saludos y gracias

  2. Está claro que eres un cacho crack. Para tu decepción te diré que me lo he leído de un tirón en nada y menos y que me ha resultado muy interesante y elocuente. Brindo contigo por los estándares abiertos en la web.

    😉

  3. excelente artículo, me he quedado con cara de bobo cuando he visto el sistema solar o el cowerflow
    ciao

  4. Gracias Pragmart y Kudrom.
    Es cierto que los efectos son alucinantes, pero lo mejor de todo es que estamos en el borrador de HTML5. Es decir, todavía queda mucho por desarrollar y con unas librerías decentes lo que se puede armar con esto es inimaginable. Los ejemplo son sólo eso, ejemplo de lo que se puede hacer. Ahora falta ver lo que se puede hacer pero todavía no se le ha ocurrido a nadie.

  5. Muy buen artículo, la verdad es que cuando esto salga adelante va a ser increible. De todas formas me escaman muchas cosas, entre otras como se esta poniendo el tema de la red neutral… igual nos cortan el rollo y ni en 12 ni en 100 años…

  6. Alejandro, saludos.

    Al parecer has dejado de lado otras cosas interesantes para los desarrolladores, cómo algunas otras etiquetas para maquetar sitios (header, section, nav y footer); y ya por fin el deshecho de la maldición esa llamada: FRAMES y también de algunos componentes. Tampoco malinterpreten, portar cosas de Flash a HTML5 a día de hoy todavía está lejos de ser algo trivial o si quiera sencillo.

    Para enriquecer al tema:
    http://blog.gonchuki.com/archives/6-reasons-why-the-html5-vs-flash-debate-is-idiotic/

    Y pues cómo lo has dicho:

    Más que Microsoft, me da miedo Apple…

    En efecto, Apple se excede de controladora siempre, para usar un iPhone hay que sincronizar con iTunes, para aprovechar al máximo tu dispositivo Apple no tienes soporte en Linux, tu soporte en Windows apesta y solamente en Mac tienes soporte realmente. En fin, Apple cuando no puede controlar algo hace un escándalo y al final que la pierde, llega cómo perrito con la cola entre las patas.

    • Por supuesto que HTML5 es más de lo que yo he dicho. Pero como dices, eso son cosas “para desarrolladores”, que yo no entiendo (dicho sea de paso) pero que seguramente a más de uno puesto en el tema le alegrarán la vida. En el enlace está bastante claro y es algo que yo creo que era obvio: Flash y HTML5 están enfocados a y son cosas distintas. Querer ver HTML5 como sustituto íntegro de Flash es una estupidez. Pero al menos, sí que se podrá quitar su uso de algunos sitios.

      Gracias por tu comentario 😉
      Saludos

  7. Ojalá se quite de una vez el flash, no me gusta para nada

  1. Pingback: Tweets that mention HTML5, CSS3 y los estándares de la web « Sin Windows -- Topsy.com

  2. Pingback: Recomendaciones de la semana | Pillateunlinux

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: