30Ago 2010 3 Comments */?>

Las mejores nuevas características y técnicas de HTML5 – Parte II

Categorías: Recursos - Tags:

Siguiendo con mi post anterior vamos a seguir numerando algunas nuevas técnicas y características de HTML5 que nos van a ayudar a escribir códigos más cortos, validar formularios, reproducir música y videos, crear aplicaciones locales y muchas cosas más.

11. Soporte para audio

Aunque aun queda mucho camino por recorrer los navegadores más actuales soportan este nuevo elemento evitando así el uso de plugins y librerías externas. Aunque eso sí, como siempre con diferencias entre unos y otros, mientras firefox se decanto por soportar archivos .ogg, webkit funciona con .mp3, internet explorer para variar no soporta ningún formato y opera de momento solo .wav

1
2
3
4
5
<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />
	<a href="file.mp3">Download this file.</a>
</audio>

De este modo por ejemplo Safari se saltaría el archivo .ogg y reproduciría el .mp3

12. Soporte para video

Al igual que en el elemento Audio los navegadores están divididos sobre que formato de video apoyar en un futuro. Mientras Firefox y Opera apoyan los formatos abiertos de Theora y Vorbis , Safari e Internet Explorer soportan H.264, formato no abierto que es soportado por los reproductores flash actuales.
Por lo que a la hora de ofertar videos en nuestras web debemos ofrecer ambas alternativas al igual que hicimos con el audio

1
2
3
4
5
<video controls preload>
	<source src="video-gracioso.ogv" type="video/ogg; codecs='vorbis, theora'" />
	<source src="video-gracioso.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
	<p> Tu navegador no lo soporta. <a href="video-gracioso.mp4">Puedes descargar el video.</a> </p>
</video>

Aunque por norma no es necesario especificar el atributo type haciéndolo ahorramos un poco de trabajo al navegador ya que sino lo tendría que averiguar por si solo.
Por otro lado si tu navegador no soporta HTML5 video podes optar por un link de descarga del video o simplemente colocar el video en formato flash como alternativa.

13. Atributos “preload” y “controls”

Estos dos nuevos atributos vistos en los elementos HTML5 audio y HTML5 video se describen por si solos.
El atributo controls añade los controles (play, pause,etc) para controlar los videos y audios.

1
<video controls>

Y el atributo preload hace una precarga del video para ahorrar algo de tiempo en la experiencia del usuario. Si la página esta diseñada para mostrar un video deberíamos activarlo en cambio si no estamos seguro que el usuario desee verlo ya que es algo secundario dentro del contenido, no lo incluiremos.

1
<video controls preload>

14. Expresiones regulares con el nuevo atributo pattern

Otro nuevo atributo que hará más fácil la validación de formularios sin el uso de Javascript. En el siguiente ejemplo un usario deberá crear un username que conste de letras mayúsculas o minúsculas con más de 4 caracteres y menos de 10.

1
2
3
4
5
6
7
8
9
10
<form action="" method="post">
	<label for="username">Crear un Username: </label>
   	<input type="text"
	   name="username"
	   id="username"
	   pattern="[A-Za-z]{4,10}"
	   autofocus
	   required>
	<button type="submit">Crear </button>
</form>

Para más información sobre expresiones regulares visitar este completo manual

15. Nuevo elemento <mark>

Este nuevo elemento es parecido a <em> o <strong> pero a diferencias de estos que sirven para darle valor o poder a una palabra <mark> esta pensado como un resaltador. Algo muy utilizado en buscadores para resaltar las palabras mas relevantes y que un poco de javascript podríamos implementar.

1
2
<h3>Resultados de avion </h3>
<p>El aeropuerto Pablo Picasso esta lleno de <mark style="background-color:#FFFF88;">avion</mark>es

15. Atributo data para atributos personalizados

Este “nuevo” atributo es muy útil cuando se quiere pasar valores a javascript por ejemplo. Antes podíamos utilizar cualquier atributo inventado por nosotros y nuestros scripts funcionaban , pero la validación fallaba. Ahora agregando data al atributo podremos usarlo sin problema como muestra el siguiente ejemplo.

1
<div id="myDiv" data-valorCualquiera="Mi valor"> Bla Bla </div>

Y para obtener dicho valor con JS

var theDiv = document.getElementById(‘myDiv’);
var attr = theDiv.getAttribute(‘data-valorCualquiera’);
alert(attr); // Mi valor

Incluso se puede usar con CSS para hacer un cambio de texto con la propiedad hover

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
 
<html lang="es">
<head>
   <meta charset="utf-8">
   <title>Texto cambiante</title>
<style>
 
h1 { position: relative; }
h1:hover { color: transparent; }
 
h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;
 
}
</style>
</head>
<body>
 
<h1 data-hover-response="Que no me toques!!!"> No tocar  </h1>
 
</body>
</html>

Podes ver un ejemplo funcionando aca.

16. Listado con todos los nuevos elementos de HTML5 (ingles)

17. Los nuevos atributos de HTML5 (ingles)

18. Cuando debemos usar DIV’S ?

Habiendo tantos elementos nuevos en HTML5 nos preguntamos si debemos seguir usando los div para organizar nuestra web. La respuesta es si, siempre y cuando no haya un elemento que lo defina mejor semánticamente. Esto quiere decir que por ejemplo si escribimos un artículo usariamos <article> para agrupar el código,  en cambio si nuestro propósito es simplemente posicionar dicha porción de código un div sería la elección perfecta.

19. Guardando datos de forma local (localStorage y sessionStorage)

Esto aunque en un día fue considerado HTML5 ha pasado a ser una especificación independiente.

HTML5 ofrece dos posibilidades para almacenar datos en el lado del cliente:

  • localStorage Almacena datos sin tiempo limite
  • sessionStorage Almacena datos por lo que dure la sesión

Estas opciones vienen a ser el reemplazo de las famosas COOKIES . A diferencias de estas los datos en HTML5 no son pasados en cada request ,sino solamente cuando se solicita, permitiendo así  almacenar grandes cantidades de datos mejorando el rendimiento general.

HTML5 utiliza javascript para acceder y grabar datos locales

1
2
3
4
5
6
<script type="text/javascript">
 
localStorage.nombre="Juan";
document.write("Tu nombre: " + localStorage.nombre);
 
</script>

Contador de visitar con localStorage

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visitas "+ localStorage.pagecount + "veces.");
</script>

20. Otras especificaciones independientes de HTML5

Existen otras especificaciones que un principio formaron parte de HTML5 pero bien por ser muy complejas o extensas pasaron a ser especificaciones independientes. Entre ellas se encuentran:

Con esto doy concluido esta segunda parte acerca de las nuevas características de HTML5. En el próximo y ultimo artículo voy a hablarles de <canvas> y como utilizarlo. Un saludo a [email protected]!!

Via | Nettuts+ W3schools W3.org

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Juan Carlos

    Hola. A ver si me puedes ayudar.

    Tengo un video colocado con HTML5 en una página web. Todo funciona, pero en la página del video, le he puesto un botón de "VOLVER" a la página inicial, funciona pero al volver el vídeo sigue funcionando. ¿Cómo puedo solucionarlo? Gracias.

  • Son don páginas diferentes? No entiendo muy bien la estructura que dices

  • FERDERICO10

    CHISPAS  ESTA BUENISIMO