html5-css3: Principales Diferencias entre HTML5 y HTML4

¿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

Ejemplo:

<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

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 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>

</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.