Entre las nuevas opciones que nos ofrece HTML5 (esta vez, en el sentido más amplio del término, JavaScript incluido) se encuentra la API de visibilidad de página: un pequeño conjunto de propiedades y eventos que nos facilitan el saber si el visitante de nuestra web tiene ésta en primer plano o está viendo otra pestaña.

He preparado dos sencillos ejemplos para ver cómo funciona esta API:

NOTA: El segundo ejemplo no funciona correctamente en Chrome (pausa pero no reanuda luego la reproducción). En Firefox, Opera e IE10 sí funciona y, ya que esto era un simple ejemplo, no he dedicado más tiempo a buscar la causa exacta (lo siento 😛 ).

Veamos cómo llevarlos a cabo:

Seguir leyendo

A estas alturas, prácticamente todo el mundo ha oído ya hablar de HTML5: una serie de atractivas novedades en el mundo del diseño web que posibilitan la creación de aplicaciones (de navegador, móviles y hasta de escritorio) más potentes.

Al acercarse al lenguaje por primera vez, ya sea desde cero o desde HTML4, es habitual cometer ciertos errores. Espero que esta lista te ayude a no cometerlos tú tampoco (yo caí en varios de ellos, no hay por qué avergonzarse 😀 ).

Durante el resto del artículo me referiré a HTML5 con la acepción (bastante extendida) que engloba tanto HTML como CSS y JavaScript.

Seguir leyendo

Hace unas semanas necesitaba crear un modo cine (oscurecer toda la pantalla salvo un elemento -típicamente un vídeo-) para un proyecto que me encargaron. Buscando un poco, descubrí que era mucho más fácil de lo que pensaba: sólo hacen falta un par de líneas de HTML, CSS y JavaScript.

Efecto a conseguir

Púlsame para activar el modo cine

Nota: ¡Me encanta ese perro! 😀

Seguir leyendo

Hace unos días descubrí una nueva posibilidad que ofrece HTML5: enlazar a una hoja de estilos diferente (o varias) si el usuario tiene desactivado JavaScript.

¿Cómo se puede conseguir? Muy fácil: poniendo el link al archivo CSS dentro de una etiqueta <noscript>. Esto, antes de HTML5, no era correcto. En la nueva versión, está aceptado.

Esta opción, que estaba deseando que existiera, la descubrí de casualidad mientras leía la documentación de adapt.js, un “compañero” de 960.gs para adaptar las páginas a dispositivos con diferentes pantallas (móviles, tablets, etc). De hecho, usan esta opción para servir el CSS por defecto.

Seguir leyendo