Taller: Posibilidades del Open Video y el HTML5, día 1

por comcinco

ZEMOS98 ha puesto en marcha un taller de tres días de duración con el título Posibilidades del Open Video y el HTML5, donde Berto Yáñez y Oscar Otero, miembros de A Navalla Suíza, nos guiarán por el mundo de posibilidades que el nuevo HTML5 ofrece con relación al vídeo en Internet. Apoyado por la convocatoria Sueño Digital del CICUS Lab de la Universidad de Sevilla y con el apoyo de la European Cultural Foundation (ECF) para la red Doc Next Network.

El taller está realizado en inglés porque nos acompañan miembros de la Doc Next Network y porque no viene mal quitarle un poco las telarañas al inglés. Se puede seguir en Twitter la evolución del taller siguiendo el hashtag #ZEMOS98html5

El objetivo final del taller es realizar una herramienta en línea que sirva para la realización de Código Fuente Audiovisual sin la necesidad de tener conocimientos técnicos de edición, con posibilidad de enlazar vídeos, audios e imágenes directamente desde la red, es decir, sin descargar ningún programa. La fecha de presentación de la herramienta será en Abril de 2012.

Como he dicho el taller será en tres días, hoy hemos tenido la primera sesión. Tras las presentaciones personales de cada uno de las personas asistentes al taller, Berto abrió Google Chrome y lanzó una presentación realizada en HTML5. Antes de comenzar enseña algunas demostraciones realizadas por Jonathan Macintosh, como son Donald Duck meet Glenn Beck y Gendered Advertising Remixer. Y el documental One Millionth Tower como el state of art del HTML5.

De la presentación destaco los siguientes puntos:

• HTML5 es más semántico que HTML4 (que es el actual estándar).
• Se produce una mejora notable de los formularios. Con la posibilidad de crear cuadros de texto con un formato determinado, o de usar el autofocus (propiedad por la que el cursor se coloca en el cuadro de texto que queramos) sin necesidad de código ajeno.
• Nueva versión CSS3, que incluye:
• La posibilidad de usar cualquier tipografía. Google ha creado la herramienta Webfonts donde se pueden usar tipografías sin necesidad de copiarlas en nuestro servidor o se pueden usar servicios como @font-face Generator de Font Squirrel para convertir cualquier tipografía a una tipografía web.
• Implementación de columnas de texto.
• Uso de Media Queries, es decir, se adapta el contenido al tamaño de la pantalla y ventana.
• Y muchas más cosas como bordes redondeados, sombras, degradados y opacidad.

• Integración de vídeo y audio como parte del código.
• Canvas element, que permite una programación más avanzada para realizar, por ejemplo, juegos (mejor en Google Chrome).
• WebGL, gráficos 3D.
• SVG, imágenes vectoriales manipulables.
• JavaScript, con más funcionalidades.
• Geolocalización.
• Almacenamiento local. Es como una versión ampliada de las cookies.
• Acceso al hardware.
• Websockets. A partir de HTML5 cambia el concepto de petición de inicio de conversación (proceso interno de las comunicaciones por el cual antes de transmitir la información se envía una petición o request de inicio de conversación), las peticiones están siempre abiertas. Así se pueden crear, por ejemplo, salas de chat en tiempo real.
• Web workers, el trabajo en segundo plano (background) no interfiere en el trabajo principal.

Berto realizó una aclaración fundamental, todas estas mejoras están pensadas para funcionar mejor en dispositivos móviles.

Pero, ¿por qué es tan bueno el HTML5?, la respuesta es sencilla. El HTML5 es abierto. Esto quiere decir que si quieres ver como está hecha una web solo tienes que ver el código y si quieres, copiar las partes que te interesen. Es la fortaleza frente a tecnologías como Flash, totalmente cerrado y enclaustrado en sí mismo ya que no permite interacciones con otros lenguajes. Otro punto fuerte es la accesibilidad. HTML5 al estar desarrollado por la W3C sigue unos parámetros de accesibilidad de muy estrictos con respecto por ejemplo a personas con problemas de visión o de audición.

En resumen, HTML5 es «No Flash, no shits!».

A partir de aquí, la presentación giró en torno a lo que se centra el taller, el vídeo y el audio. En cuanto al vídeo, establece un punto de partida, flash tiene un problema, necesita de plugin que se actualiza con frecuencia. Es un formato cerrado, y lo más importante la interacción con el resto de la web es muy limitada. HTML5 soluciona todo eso. El vídeo y el audio son una parte más del código HTML.

Entre los formatos que podemos usar siguiendo el estándar HTML nos encontramos con:

• MP4 – que usa el códec de audio AAC o MP3 y de vídeo el H.264. El problema que presenta este formato es que es propietario, concretamente de Apple. Está permitido su uso personal, pero no para el ámbito profesional sin pagar los correspondientes royalties.
• OGG – El códec de vídeo es Theora y el de audio Vorbis. Totalmente libre. Open source puro y duro, el problema, se ha estancado su desarrollo, por lo que está perdiendo presencia.
• WebM – El vídeo es VP8 y el audio Vorbis. Desarrollado por Google, está en un periodo prematuro de desarrollo y aún no puede competir en calidad con los dos anteriores. Tiene la ventaja de que tiene detrás a Google que está apostando fuerte por el formato, aunque este también es su punto flojo, una macrocorporación detrás de un desarrollo libre, da que pensar.

Tras esta introducción se realizó un descanso y al volver Oscar comenzó su parte donde explicaba como era el código básico de una página HTML5. Empezó con una estructura muy básica y fue haciéndola más compleja, añadiéndole diferentes posibilidades, hasta llegar a esto.

El objetivo de esta parte era mostrarnos en conjunto lo que podíamos a hacer. Mañana pasaremos a meternos de lleno en el código, comenzando con una idea y dividiéndonos en grupos donde uno se dedique a pensar el diseño, otro el código, otro la interactividad, otro el vídeo y luego se ponga todo en común, para que al final de la jornada tengamos una demostración realizada.

 Mañana más.

 

Las fotos han sido realizadas por Ricardo Barquín.

• html5
• open video
• software libre
• video

• 
• 
• 
•