Mapa Conceptual de las Diferencias de HTML5 Y HTML4

Diferencias entre HTML5 y HTML4/XHTML

Etiqueta	Atributos	Comentarios
<!-- -->	Estándar o ninguno
<!DOCTYPE>	Estándar o ninguno
<a>	href | target | rel | hreflang | media | type	Atributo Añadido: media Atributo cambiado: Target
<abbr>	Estándar o ninguno
<acronym>		Etiqueta Eliminada
<address>	Estándar o ninguno
<applet>		Etiqueta eliminada
<area>	Estándar o ninguno
<article>	Atributos globales	Nueva etiqueta
<aside>	Atributos globales	Nueva etiqueta
<audio>	autobuffer | autoplay | controls | loop | src	Nueva etiqueta
<b>	Atributos globales	Etiqueta cambiada
<base>	Estándar o ninguno
<basefont>		Etiqueta eliminada
<bb>	Estándar o ninguno
<bdo>	Estándar o ninguno
<big>		Etiqueta eliminada

NUEVAS ETIQUETAS PARA VÍDEO EN HTML5

Veamos como se usa la etiqueta video

 

La etiqueta <video> es la etiqueta que mas fama se hizo ya que el video en Internet implica muchas innovaciones desde que Flash Player nos propuso usar video con calidad HD y el codecH.264, ejemplos como YouTube nos dejaron ver el poder del video en Internet.

Vista previa del reproductor por defecto de Firefox

La manera mas importante de implementarla es de esta manera:

<video src=”video.mp4” width=”640″ height=”360″ controls autoplay preload>

Expliquemos los atributos de la etiqueta:

• SRC: Nos enlaza el archivo de video que queremos reproducir.
• WIDTH: Nos define el ancho del video en pixeles.
• HEIGHT: Nos define la altura del video en pixeles.
• CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.
• AUTOPLAY: Nos permite reproducir el archivo de video desde que se carga la pagina.
• PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.

Los atributos de esta etiqueta como pueden ver son casi los mismos que en la etiqueta de AUDIOpero como es algo visual, necesitamos darle un ancho y un alto forzosamente.

Implementación de formatos de video

Al igual que en la etiqueta AUDIO tenemos muchos formatos de video que debemos implementar ya que cada motor de renderizado de los navegadores tiene soporte para un codec de video diferente.

Veamos la tabla de compatibilidad

• Gecko: OGG
• WebKit: OGG, H.264, WebM
• Safari e Internet Explorer 9 (WebKit – Trident): H.264
• Presto: OGG, H.264

Ya que sabemos que tipos de codecs acepta cada navegador, podemos pasar a la siguiente parte de este tutorial. Hay que hacer que todos los navegadores acepten en la etiqueta video todos los formatos de video.

Ahora tiene un poco de complejidad igual que en AUDIO solo hay que poner los diferentesSOURCE para cada formato de video.

<video width=”640″ height=”360″ controls autoplay preload>

<source src=”mivideo.mp4″ type=’video/mp4; codecs=”avc1,mp4a”‘ />
<source src=”mivideo.ogv” type=’video/ogg; codecs=”theora,vorbis”‘  />
<source src=”mivideo.webm” type=’video/webm; codecs=”vp8,vorbis”‘ />

</video>

Veamos la etiqueta audio

Vista previa del reproductor por defecto de Google Chrome

La etiqueta <audio> es la mas sencilla de las dos, por que solo implica un reproductor de audio. Para implementarla es muy sencillo:

<audio src=”micancion.mp3” controls autoplay preload>

</audio>

Expliquemos los atributos de la etiqueta:

• SRC: Nos enlaza el archivo de audio que queremos reproducir.
• CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.
• AUTOPLAY: Nos permite reproducir el archivo de audio desde que se carga la pagina.
• PRELOAD: Nos carga un poco el archivo de audio antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.

Como pueden ver, es demasiado sencillo para empezar a jugar con esta etiqueta. Pero aquí aun no termina todo, como es  algo nuevo de implementar, los navegadores luchan por cual formato de audio debe liderar la web, entonces hay que atender a todos.

Implementación de formatos de audio

Tenemos muchos navegadores con diferente compatibilidad, pero lo que mas nos interesa son losMotores de Renderizado, estos se encargan de renderizar el código de nuestra pagina web e implementar ahora el contenido multimedia.

Veamos cuales motores corresponden a cada navegador:

• Google Chrome: WebKit
• Safari: WebKit
• Mozilla FireFox: Gecko
• Internet Explorer: Trident
• Opera: Presto

Estos son los Navegadores mas importantes hasta ahora, y ahora veamos la compatibilidad con los archivos de audio.

Ahora que se tiene conocimiento de que motores o navegadores aceptan un formato, pasamos a hacer compatible AUDIO con todos ellos.

Es algo diferente de implementar ahora, por que hay que decirle los diferentes archivos que existen para que el navegador tome alguno de los que puede reproducir.

<audio controls autoplay preload>

<source src=”cancion.ogg” type=”audio/ogg” />
<source src=”cancion.mp3″ type=”audio/mpeg” />
<source src=”cancion.wav type=”audio/wav />
Tu navegador no soporta esta caracteristica

</audio>

Efectos de imagen activable

 

Efectos de la libración de la imagen es un ejemplo del uso de CSS para reemplazar el javascript. La imagen se reducirá cuando se coloca el puntero del ratón encima de ella.

2. En cuanto lata de Coca Cola (control con barra de desplazamiento)

3. 3D Meninas

4. Polaroid Galería

Polaroid Gallery es pila de animación de fotografías utilizando un montón de nuevos comandos de CSS3. Es interesante cuando el cursor del ratón sobre la imagen, la imagen se ampliará

5. Espacio