HTML5-Ambilight con canvas para Motiva 2013

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.

inicio de la charla Plataforma Web Abierta by RumorosoComienza 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 ambilight con un vídeoCaptura 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 ambilight con la webcamCaptura 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.

Publicado en (X)HTML, CSS, html5, Javascript | Etiquetado , , | Deja un comentario

Portada con jqueryMobile

Las personas que me rodean saben que prefiero evitar el uso de frameworks javascript (aunque sean ligeros), salvo que sea necesario (por ejemplo, para facilitar determinadas funcionalidades). Prefiero evitarlo pero no porque crea que no son útiles, sino porque no los considero necesarios cuando solo usan por cuestiones de diseño o por una única funcionalidad de las muchas que poseen. No obstante, el uso de jQueryMobile era un requisito en el último proyecto de movilización que he realizado, con lo que procuré utilizarlo de forma coherente respecto a lo que pretendía obtener.
Sigue leyendo

Publicado en Javascript, movilidad web | Etiquetado , | Deja un comentario

Recordando los principios generales de la Web Móvil

De vez en cuando es necesario recordar los principios generales a tener en cuenta cuando perseguimos que nuestra web sea realmente móvil, aplicando en base a ellos las Buenas Prácticas que propone el W3C (y el sentido común)
Sigue leyendo

Publicado en movilidad web | Deja un comentario

Tras unos días en los que niquelao.net no ha estado operativo…

Tras unos días desaparecido, niquelao.net vuelve a estar aquí. La razón por la que no estuvo operativo es que decidí cambiar de proveedor de hosting, y entre una cosa y otra se me echaron los días para instalar un nuevo wordpress. No es que el servicio que tenía hasta ahora fuese deficiente, es que las prestaciones que me ofrecían estaban sensiblemente por encima de lo que realmente necesitaba, con lo que estaba pagando por servicios que no utilizaba. No voy a decir cual era la empresa con la que estaba, pues no tengo queja de ella, únicamente que en el país en el que se ubica está la fábrica de la marca de moto que conduzco.

Ahora estoy con 1and1, empresa con la que ya tenía contratados unos cuantos dominios desde hace años (si si, tal y como suena) y con la que por ahora estoy satisfecho.

Pronto trataré de retomar la actividad en este blog, seguramente para comentaros sobre la nueva versión de la extensión HeadingsMap, ahora con soporte para el outline de HTML 5.

Publicado en Niquelando | Deja un comentario

Diseño del cartel de la KDD Harley en Avilés

Hace tiempo que no escribo en el foro y creo que va siendo hora de retomar las buenas costumbres. Para variar, romper el hielo de nuevo, o como lo queramos llamar, voy a incluir el diseño que preparé para la III Quedada Harley que celebramos en Avilés el pasado mes de abril.

Cartel de la KDD Foro Harley

El diseño lo hice íntegramente en Photoshop. Básicamente se trata del mítico motor Harley Davidson (le hice una foto al de mi Sportster, tal y como suena), al que le retoqué el filtro del aire para asturianizarlo. Además, para integrar el diseño con el fondo de fuego, simulé por todo el contorno un efecto de llamas (cada llamarada está hecha a mano), aplicando después unos filtros para que los colores combinasen de forma adecuada. Para hacer las letras en llamas seguí el mismo patrón que para el motor, y para el resto de llamas, textos, etc., apliqué retoques y filtros para que todo el conjunto fuese armonioso.
Sigue leyendo

Publicado en CSS | Deja un comentario

Más sobre CSS 3: background-origin y background-clip

Continuando con el repaso a las diferentes propiedades de CSS 3 que controlarán nuestros fondos, ahora les toca turno a background-origin y background-clip. Estas dos propiedades vienen para ayudarnos a controlar tanto el origen respecto al cual posicionaremos las imágenes de fondo, como la posibilidad de mostrarlas por debajo del borde. Sigue leyendo

Publicado en CSS | Etiquetado , , , , , | 1 comentario

Fish eye menu only with CSS Transform and Transition

This fish eye menu is a simple example of the things we can make with two special CSS 3 properties: transition (today only supported by Safari and Chrome with -webkit-transition) and transform (supported by Safari and Chrome with -webkit-transform and by Firefox with -moz-transform). Sigue leyendo

Publicado en CSS | 4 comentarios

Si utilizas Safari o Chrome…

…te desvelaré el final de Perdidos sólo con CSS. Si utilizas otro, habrás de esperar a la siguiente temporada…

Publicado en CSS | Deja un comentario

CSS 3: Propiedades de fondo

Ayer me dio por recopilar las propiedades que previsiblemente incluirá CSS 3 para controlar el fondo de cualquier elemento (en el medio visual) y sus correspondientes valores. Varias de ellas coinciden con las que habitualmente empleamos en nuestras hojas de estilo, con lo que no nos deberí­an resultar extrañas. El resto son nuevas propiedades que vienen a subsanar las carencias que los profesionales en CSS habí­an identificado.

A partir de ello he preparado la siguiente tabla: Sigue leyendo

Publicado en CSS | Deja un comentario

Multiples imágenes de fondo con CSS 3

Una de las novedades que introduce CSS 3 (y que por mi parte es bienvenida) es la posibilidad de incluir múltiples imágenes de fondo para un mismo elemento (http://www.w3.org/TR/css3-background/#layering).

Hasta el momento, si querí­amos combinar más de una imagen como fondo, lo único que podí­amos hacer era utilizar alguno de los elementos que tení­amos en nuestra página, aplicando un fondo a cada uno para obtener el resultado deseado. Incluso en ocasiones, utilizábamos marcado extra, disminuyendo la calidad de la web al añadir marcado con fines únicamente presentacionales.

Pero ahora la cosa cambia… Sigue leyendo

Publicado en CSS | Etiquetado , , | 4 comentarios