Algunas Características de HTML5

[caption id="attachment_131" align="aligncenter" width="900"] Html-5[/caption]
Bueno amigos, en este tutorial, les voy a mostrar algunas caracteristicas de HTML5 que tal vez ya las han visto, pero tal vez algunos no. Van a ser cosas simples, pero utiles como todo en HTML5.

Comenzaremos con los datalist para los inputs, esto nos crea un input que al escribir, va a ir mostrando las opciones que se parezcan a lo que estamos escribiendo, hagamos un ejemplo para ver su funcionamiento:

<input list="redessociales" placeholder="Redes Sociales..."/>
<datalist id="redessociales">
  <option value="Facebook"/>
  <option value="Twitter"/>
  <option value="MySpace"/>
  <option value="Hi5"/>
  <option value="Diaspora"/>
</datalist>

Probemos el ejemplo, intenta escribir alguna de las redes sociales de la lista, y te mostrara la opcion a medida que vayas escribiendo, como un menu de autocompletado
 


Siguiendo con los input, tenemos los speech, que colocara un microfono en el input, y al darle click, activara el escucha del microfono para que al hablar, aparezca lo que pronunciaste, con un simple codigo como esto:

<input type="text" x-webkit-speech />

Y aqui tenemos el ejemplo, para que juegues con el.
 

 
Otra de las novedades simples de HTML5 son los resumenes y sus detalles, esto es para hacer algo como los botones de "Leer mas" en los cuales al darcle click te muestran el contenido que estaba oculto.

  
HTML 5
  Este es un tuto en el cual mostramos algunas características de HTML5

Y aqui vemos que al darle click a la flecha, nos muestra el contenido

HTML 5

Este es un tuto en el cual mostramos algunas características de HTML5

 
Las baras de progreso son unas de las caracteristicas mas utiles de HTML5, tenemos las "meter" y las "progress". las meter, se utilizan mas cuando su valor cambia al hacer una acción, mientras que las progress son mas usadas para descargas y progreso de los procesos, ademas de que tiene una animacion de que esta cargando.

30
60
90
Medio LLeno xD

Tu Puntuación es Baja: 30
Tu Puntuación es Media: 60
Tu Puntuación es Alta: 90
Descargando: Medio LLeno xD

Tambien tenemos ahora los enlaces descriptivos, donde colocas una descripcion de que son los links, muy recomendable hacerlo, por ejemplo:

...
old posts
tutorial
license
wannabe
games posts

Tenemos tambien SVG

Y algunos otros tipos de inputs para los formularios:

y aqui los ejemplos de cada tipo.










Y esto es todo, el proximo tuto sera de CSS3, espero les haya gustado, un saludo a todos.!!