Required es un nuevo atributo de HTML5 que hace obligatorio que un campo sea rellenado antes de que se envie el formulario. De momento, las últimas versiones de Firefox, Opera y Safari, ya dan soporte a este atributo.

<form>
<label for="nombre">Dime tu nombre : </label>
<input name="nombre" type="text" required />
<input type="submit" value="Submit"/>
</form> 

Ver ejemplo en funcionamiento » »

El tag datalist sirve para especificar una lista de opciones predefinidas para un elemento <input>. Este tag proporciona una característica de autocompletado similar al Google Auto Suggest. El usuario verá una lista desplegable de opciones predefinidas a medida que va introduciendo contenido en la caja de texto. Para unir el elemento input con la lista de elementos del datalist se utiliza en atributo list.

<input list="navegadores" />

<datalist id="navegadores">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Ver ejemplo en funcionamiento » »

Autofocus es un atributo booleano para los campos de un formulario que hace que el foco del explorador esté fijado sobre uno de ellos cuando se carga la web. En el siguiente ejemplo puedes ver que el segundo input tiene el atributo autofocus a 1 y, por tanto, verás que el cursor parpadea en el segundo cuadro de texto al cargar la página.

<p><label> Ejemplo 1:</label><input name="nombre" type="text"></p>
<p><label> AutoFocus:</label><input name="nombre" autofocus type="text"></p>

Ver ejemplo en funcionamiento » »

Al igual que en nuestro anterior post, denominado "El atributo placeholder en HTML5", podemos recurrir a Modernizr y jQuery para obtener una versión cross-browser de autofocus:

$(document).ready(function() {
if(!Modernizr.input.autofocus){
	$('input[autofocus]').trigger('focus');
}
});

Ver ejemplo en funcionamiento » »

HTML5 ha supuesto bastantes novedades en el desarrollo web. Algunas características ya se están utilizando de forma generalizada y otras muchas poco a poco se irán adoptando a medida que los navegadores las vayan soportando. Una de las nuevas características de HTML5 es el atributo placeholder para los elementos INPUT. El atributo placeholder muestra el texto en un campo hasta que el campo adquiere el foco. En ese momento, se esconde el texto.

<input name="nombre" placeholder="Tu nombre..." type="text">

Una de las ventajas de utilizar el atributo placeholder es que nuestro código será más semántico. El problema es que este atributo no está soportado por todos los navegadores. Por ejemplo, hasta el momento no es soportado por Internet Explorer. Para que sea cross-browser podemos recurrir a Modernizr y jQuery. De Modernizr ya hemos hablado anteriormente en el blog, se usa para comprobar si es el navegador es compatible con determinadas características de HTML5 o CSS3 y si no es compatible, ofrecer una alternativa.

if(!Modernizr.input.placeholder){
	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});
}

El atributo placeholder funciona con los siguientes tipos de input: text, search, url, tel, email, y password.

Ver ejemplo en funcionamiento » »

Stitches permite generar sprites con su respectiva hoja de estilos simplemente arrastrando dentro de un espacio reservado para ello las distintas imágenes o iconos que queremos que formen parte de dicho sprite. Una forma muy sencilla de minimizar las peticiones HTTP de nuestro sitio web.

Stitches An HTML5 sprite sheet generator » »

Algunas de sus características son:

• Software gratuito y open source
• Ligero. No utiliza imágenes
• 100% personalizable mediante CSS
• Independiente de frameworks
• Fácil de usar
• Fácil de entender y extender
• Aspecto coherente entre los distintos navegadores
• Pantalla completa
• Control de volumen
• Fallback a Flash

VideoJS » »

Interesante tutorial que al mismo tiempo nos ofrece el resultado final: un sistema de cuadrícula realizado con HTML5. Las principal característica de esta retícula es que todas las columnas tienen un ancho basado en porcentaje, lo que hace que se adapten al elemento contenedor. Esto significa que con el uso de este sistema, no tendrás que definir un ancho de cada columna de forma manual, sólo tienes que definirlas dentro de un contenedor y el ancho de las columnas y los espacios entre columnas se ajustarán automáticamente.

Easy Percentage Grid System with HTML5 » »

Una plantilla pensada para iniciar una web o proyecto en HTML5. La plantilla incluye un CSS para resetear algunos estilos y las librerías de javascript jQuery y Modernizr.

Easy HTML5 Template » »

HTML5 trae consigo muchas novedades y una de ellas es la integración con una nueva API de geolocalización. Dicha API no forma parte de forma estricta de HTML5, sino que está siendo normalizado por el Geolocation Working Group, que es independiente del HTML5 Working Group. El soporte para la API de geolocalización está disponible, de momento, para los navegadores más actuales como Firefox 3.5+ o Chrome 5+.

Un modo sencillo de acceso al API de geolocalización sería:

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html> 

Ver ejemplo en funcionamiento » »

Con el anterior ejemplo, si el navegador soporta el acceso a la API, el usuario da su consentimiento y... no hay ningún problema se obtiene la geolocalización del usuario al hacer click sobre el enlace "Mostrar Posición".

Puesto que el éxito de la geolocalización depende de varios factores, lo mejor es gestionar los posibles errores que se puedan producir. Podemos añadir un segundo argumento a la función obtener_localizacion: una función para gestionar los errores. Los errores que se pueden obtener son:

Permiso denegado (1), cuando el usuario no comparte la posición y por tanto deniga el acceso a su localización.
Posición no disponible (2), si se ha perdido la conexión o no se puede contactar con los satélites que realizan el posicionamiento.
Timeout (3), si se ha tardado demasiado en calcular la posición del usuario.
Error desconocido (0), si ha fallado cualquier otra cosa.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function gestiona_errores(err) {
  if (err.code == 0) {
    alert("error desconocido");
  }
  if (err.code == 1) {
    alert("El usuario no ha compartido su posicion");
  }
  if (err.code == 2) {
    alert("no se puede obtener la posicion actual");
  }
  if (err.code == 3) {
    alert("timeout recibiendo la posicion");
  }
}

</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html> 

Ver ejemplo en funcionamiento » »

Con el ejemplo anterior controlamos los errores durante el proceso de geolocalización pero no controlamos si el navegador soporta o no este servicio. Para hacer este último control podemos comprobar si existe el objeto navigator.geolocation.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  if (navigator.geolocation) {
  		navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
  }else{
	alert('Tu navegador no soporta la API de geolocalizacion');  
  }
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function gestiona_errores(err) {
  if (err.code == 0) {
    alert("error desconocido");
  }
  if (err.code == 1) {
    alert("El usuario no ha compartido su posicion");
  }
  if (err.code == 2) {
    alert("no se puede obtener la posicion actual");
  }
  if (err.code == 3) {
    alert("timeout recibiendo la posicion");
  }
}

</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html> 

Ver ejemplo en funcionamiento » »

Una vez hemos obtenido las coordenadas mediante la API es bastante sencillo integrar Google Maps para mostrar un mapa con la posición del visitante. El siguiente ejemplo utiliza jQuery para crear un mapa una vez obtenida la posición mediante la API de geolocalización.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  if (navigator.geolocation) {
  		navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
  }else{
	alert('Tu navegador no soporta la API de geolocalizacion');  
  }
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function gestiona_errores(err) {
  if (err.code == 0) {
    alert("error desconocido");
  }
  if (err.code == 1) {
    alert("El usuario no ha compartido su posicion");
  }
  if (err.code == 2) {
    alert("no se puede obtener la posicion actual");
  }
  if (err.code == 3) {
    alert("timeout recibiendo la posicion");
  }
}

</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html> 

Ver ejemplo en funcionamiento » »