Por qué los desarrolladores necesitan HTML5

HTML5 parece ser la plataforma de desarrollo preferida para el desarrollo de sitios web y aplicaciones móviles. La mayor parte de los desarrolladores ya han realizado algún proyecto con HTML5 o planean usar la tecnología en 2013.

La siguiente infografía muestra por qué los desarrolladores necesitan o van a necesitar utilizar HTML5.

Why Developers Need HTML5

Why Developers Need HTML5 [Infographic] » »

Las 45 mejores plantillas gratuitas de HTML5-CSS3

Para iniciarse en el desarrollo de sitios web con HTML5 y CSS3 puede ser una idea interesante tomar una plantilla como punto de inicio. Ver cómo está estructurada y analizar los estilos CSS que se han utilizado y cómo estos estilos además de "vestir" el sitio añaden interesantes efectos.

En este post han realizado una selección con las 45 mejores plantillas gratuitas de HTML5 y CSS3.

Free HTML5-CSS3 Template for Download

45 Best Free HTML5-CSS3 Templates for Download » »

Adobe Edge Animate: Crea contenido animado en HTML5

Adobe Edge Animate podría decirse que es el programa que va a sustituir a Flash en la creación de contenido animado para la web. De hecho, aquellos que en algún momento hemos trabajado con Flash nos encontramos que Adobe Edge Animate cuanta con un interfaz y un planteamiento para crear animaciones, e incorporar acciones, muy similar.

Adobe Edge Animate

Una de las principales diferencias respecto a Flash es la cantidad de herramientas de dibujo de las que disponemos: tan sólo tres (rectángulo, rectángulo redondeado y elipse). La creación de animaciones es controlada a través de un panel con una línea de tiempo, especificando fotogramas clave y cambiando los valores de las propiedades del objeto que deseemos animar.

Al iniciar la aplicación disponemos de unos cuantos tutoriales que nos muestran cómo empezar a crear animaciones, aunque quizá se echa en falte algo más de documentación y tutoriales para ir avanzando y profundizando en el uso del programa.

Adobe Edge Animate » »

Audio con HTML5

El nuevo elemento audio nos permite incrustar audio en una página web sin la necesidad de utilizar plugins adicionales como el Flash. Ya no es necesario depender de plugins de terceros, la reproducción de audio está soportada de forma nativa en los navegadores modernos, incluyendo los navegadores de muchos dispositivos móviles.

Un ejemplo básico de inserción de audio en nuestra página web podría ser el siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Audio</title>
</head>
<body>
<audio src="musica.mp3"></audio>
</body>
</html>

En el ejemplo, se ha añadido el atributo "controls", de lo contrario no se mostraría nada en la página al usuario. El código es muy sencillo pero todavía existen algunos problemas con el elemento audio. El tipo de fichero utilizado ha de ser soportado de forma nativa por el navegador. En la siguiente tabla puedes ver un pequeño resumen:

Navegador MP3 Wav Ogg
Internet Explorer 9+ SI NO NO
Chrome 6+ SI SI SI
Firefox 3.6+ NO SI SI
Safari 5+ SI SI NO
Opera 10+ NO SI SI

Hay otros codecs de audio pero yo me centraría principalmente en Ogg Vorbis (.ogg) y MP3 (.mp3). También se puede considerar el WAV (.wav), pero su tamaño no lo hace muy apropiado para la reproducción en la web.

Si deseas lograr una reproducción de audio soportada en todos los navegadores modernos. Puedes utilizar el elemento de "source" para indicar los diferentes archivos de audio, y el navegador escogerá uno que pueda reproducir.

<audio controls>
<source src="musica.mp3" type="audio/mpeg" />
<source src="musica.ogg" type="audio/ogg" />
</audio>

El elemento audio no necesita atributos de altura o anchura porque, por defecto, cada navegador tiene su propio reproductor. Aún así puedes definir la altura y la anchura mediante CSS.

Se puede escribir código adicional para aquellos navegadores que no puedan reproducir audio de forma nativa. Por ejemplo Internet Explorer 6,7 y 8. En el artículo "Getting HTML5 Audio tag and flash fallback to work nicely with all browsers" ofrecen una solución que parece funcionar con todos los navegadores. El siguiente ejemplo utiliza el Standalone Flash WPAudioPlayer para realizar el fallback.

<audio id="audioplayer" controls>
<source src="musica.mp3" type="audio/mpeg" />
<source src="musica.ogg" type="audio/ogg" />
</audio>
<script type="text/javascript">
var audioTag = document.createElement('audio');

if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")) && ("no" != audioTag.canPlayType("audio/ogg")) && ("" != audioTag.canPlayType("audio/ogg"))))
{
	AudioPlayer.embed("audioplayer", {soundFile: "musica.mp3"});
}
</script>

En primer lugar, se coloca el elemento audio en la página con el id="audioplayer". A continuación, se ejecuta javascript para comprobar algunas cosas y si alguno de ellas falla, sustituye el elemento por el Flash Player.

El atributo preload

Si tienes un archivo grande o estás seguro que el usuario va a querer escuchar el audio que se ha incrustado, puede hacer que el navegador comience a descargar el archivo al cargar la página. El atributo preload tiene tres valores posibles:

preload="auto"

auto, o simplemente escribiendo preload, se le indica al navegador que descargue el fichero de audio cuando la página cargue.

preload="none"

Indica al navegador que no descargue el audio. Sólo cuando el usuario inicialice la reproducción éste comenzará a descargarlo.

preload="metadata"

Se recibe la información (metadata) acerca de la pista de audio, incluyendo la duración. La descarga no se iniciará hasta que el usuario comience la reproducción.

El atributo loop

Si se indica este atributo, cuando el fichero de audio termine de reproducirse, este comenzará desde el principio otra vez. El atributo loop es un atributo booleano y puede ser establecido de las siguientes formas:

<audio loop>
<audio loop="loop">
<audio loop="">

El atributo autoplay

Otro atributo booleano, en este caso fuerza al navegador a comenzar a descargar y ejecutar el audio en cuanto la página carga.

El atributo controls

El atributo de controls agrega los controles específicos del navegador al archivo de audio, que incluyen botón de Play/Pause, información acerca de la duración/tiempo-escuchado, controles de volumen,...

<audio controls>
...
</audio>

Es un atributo booleano y se puede añadir de las siguientes formas:

<audio controls>
<audio controls="controls">
<audio controls="">

15 HTML5-CSS3 plantillas gratuitas para comenzar tu proximo pryecto web

HTML5 no es una simple sustitución de HTML 4.01 o XHTML 1.0 ya que es una evolución. Algunas de las nuevas características de HTML5 son funciones para incluir video, audio, gráficos, almacenamiento de datos en el lado del cliente y un aumento de la interactividad. HTML5 mejora la interoperabilidad y reduce los costos de desarrollo. En este post se recogen 15 plantillas libres y de alta calidad HTML5+CSS3 que puedes utilizar para tu próximo proyecto. Algunas de estas plantillas se incluyen dentro de detallados tutoriales que muestran paso a paso cómo crear tu web con HTML5+CSS3.

15 Free HTML5-CSS3 Templates to Start the Future of Web Design

15 Free HTML5-CSS3 Templates to Start the Future of Web Design » »