Esta semana se están celebrando las Jornadas Motiva 2013. Los organizadores se pusieron en contacto Martín Álvarez, responsable de la oficina española del W3C, para proponerle dar una charla sobre estándares y diseño web. Martín me ofreció ir para hablar sobre HTML5 y CSS3… oferta que sin dudar acepté.
La charla, con título “Plataforma Web Abierta”, versó sobre los principales cambios y mejoras que aportan, tanto estas dos gramáticas, como las tecnologías que se les pueden asociar. Por supuesto, en función del perfil de los asistentes, desde el principio lo planteé desde el punto de vista del creativo y no tanto desde el programador, centrándome en lo que se puede llegar a hacer.
Comienza la charla – foto de @DoloresHofmann
Entre los ejemplos que referencié estaba el efecto que simula el ambilight de Sergey Chikuyonok. Este efecto se consigue generando elementos canvas asociados al elemento video. Un script obtiene información de los bloques de imagen próximos a los extremos del vídeo, extrayendo un color medio para pequeñas áreas y generando un degradado de color en base a él.
El principal problema es que la URL sobre la que el autor tenía un ejemplo no estaba disponible, con lo que descargué el script y jugué con él para aplicarlo. Aunque me faltó tiempo para preparar el ejemplo real para la charla, no lo he dejado y este es el resultado (recomiendo utilizar Chrome): http://www.niquelao.net/html5/ambi/film.html
Captura del efecto en un navegador con soporte
Como quería ir un poco más lejos, hice un pequeño cambio y preparé otro ejemplo en el que en lugar de cargar un vídeo, se captura directamente la imagen de la webcam (recuerda que el navegador te preguntará si le dejas utilizar la cámara): http://www.niquelao.net/html5/ambi/cam.html
Captura del efecto en un navegador con soporte
Aprovecho para agradecer la invitación al evento, así como la organización y la buena predisposición de quienes asistieron.
