¿Cuáles son las diferencias entre HTML4 (XHTML 1.0) y HTML5?
El W3C ha preparado un documento, HTML5 differences from HTML4, en el que detalla las principales diferencias entre HTML4 (y su variante según XML, XHTML 1.0) y la nueva versión del lenguaje, HTML5.Algunas de las principales diferencias son:
- HTML5 define una sintaxis que es compatible con HTML4 y XHTML 1.0. Por tanto, un salto de línea se puede escribir como <br> (HTML4) o <br /> (XHTML 1.0).
- Para definir el juego de caracteres se introduce un nuevo atributo para la etiqueta <meta>:
<meta charset=”UTF-8″>
aunque todavía es posible utilizar el método tradicional:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> - Se simplica el DOCTYPE:
<!DOCTYPE html> - HTML5 permite incluir elementos de SVG y MathML.
- Se introducen nuevos elementos, como: section, article, aside, header, footer, etc.
- Se introducen nuevos atributos, como: media, charset, autofocus, placeholder, etc.
- Algunos elementos cambian, como: a, b, i, menu, etc.
- Algunos atributos cambian, como: type, name, summary, etc.
- Algunos elementos desaparecen, como: basefont, big, center, etc.
- Algunos atributos desaparecen, como: align, background, bgcolor, etc.
- Mejora de las API, como: getElementsByClassName() y innerHTML.
Ejemplos de nuevas etiquetas que se han agregado a HTML5 Para Insertar Archivos de audio y Video
La versión 5 de HTML incorpora nuevas etiquetas para incluir vídeos y audio en un documento HTML. Estas nuevas etiquetas nos permitirán tanto incluir un reproductor con un archivo de audio / video, cómo conectarlo con unna fuente de audio o vídeo en directo.
Insertar sonido
Para insertar un sonido se utiliza la etiqueta <audio>, que tiene los siguientes atributos:
autobuffer - Cargar automáticamente el archivo ( true / false )
autoplay - Cargar automáticamente el archivo
controls - Mostrar controles de reproducción
height - Altura del reproductor en píxels
loop - Reiniciar la reproducción al finalizar
type - Tipo de archivo ( audio/mp3, video/ogg, ... )
src - Url del archivo
width - Ancho del reproductor en píxels
autoplay - Cargar automáticamente el archivo
controls - Mostrar controles de reproducción
height - Altura del reproductor en píxels
loop - Reiniciar la reproducción al finalizar
type - Tipo de archivo ( audio/mp3, video/ogg, ... )
src - Url del archivo
width - Ancho del reproductor en píxels
Ejemplo:
<audio src="/mp3/sonido.mp3" type="audio/mp3" controls />
Insertar vídeo
<audio src="/mp3/sonido.mp3" type="audio/mp3" controls />
Insertar vídeo
Para insertar un archivo de vídeo o enlazar con un vídeo en directo, usaremos <video>, que tiene los mismos atributos que <audio>, veamos un ejemplo:
<video src="/video/presentacion.ogg" autoplay />
El formato de los archivos
<video src="/video/presentacion.ogg" autoplay />
El formato de los archivos
nicialmente el estándar HTML 5 recomendaba utilizar los formatos de audio y vídeo OGG Vorbis, sin embargo esto se cambió por presiones pasando a recomendar simplemente que todos los navegadores soporten el mismo formato. Debido a la recomendación inicial de usar OGG, todos los navegadores que han implementado las etiquetas <audio> y <video> lo han hecho soportando OGG, algunos cómo Opera han incluido formatos adicionales.
Pese a que todos los navegadores soportan OGG, HTML 5 permite indicar diferentes archivos con codificaciones alternativas para otros navegadores:
<video controls>
<source src="/video.ogg" type="video/ogg" />
<source src="/foo.mp4" type="video/mp4" />
</video>
Navegadores que no soporten HTML 5
Pese a que todos los navegadores soportan OGG, HTML 5 permite indicar diferentes archivos con codificaciones alternativas para otros navegadores:
<video controls>
<source src="/video.ogg" type="video/ogg" />
<source src="/foo.mp4" type="video/mp4" />
</video>
Navegadores que no soporten HTML 5
Pese a que si bien en la actualidad no todos los navegadores soportan HTML 5 en su última versión, si que soportan casi todos las etiquetas <video> y <audio>. De todas formas, para las personas que no utilizan la última versión del navegador podemos insertar un reproductor de vídeo Flash cómo alternativa de la siguiente manera:
<video src="/video.ogg" controls>
<!-- Versión para navegadores sin HTML 5 -->
</video>
<video src="/video.ogg" controls>
<!-- Versión para navegadores sin HTML 5 -->
</video>
Novedades con ejemplos para efectos de imagenes y botones
1. CSS3 reloj con jQuery
Utilizar las funciones básicas de la transformada de CSS3: girar. Y la combinación de los marcos de Javascript como jQuery se puede producir un fresco CSS3 reloj
2. Reloj analógico
Reloj analógico creado con la transición WebKit CSS y transformar. JavaScript es utilizado para tirar en el momento actual.
3. cubo que gira en 3D con teclas de flecha
Usted puede usar hacia arriba, abajo, las teclas de derecha e izquierda para navegar por el cubo 3D. Cubo 3D construido con-webkit-perspectiva,-webkit-y transformar-webkit-transición.
4. varios cubos en 3D (Slide In / Out)
Varios cubos en 3D con CSS3 y de propiedad "transformar" y las propiedades de "transición". Pensé que era increíble, se puede ver la escritura en el objeto 3D.
5. CSS3 Acordeón
Un efecto acordeón utilizando sólo CSS. Animación de propiedad en los navegadores WebKit basado.
