Cosillas que me gustan de HTML5

by

Doctypes y atributos simples

En html5 como html4 se han simplificado las cosas, un buen ejemplo de ello son los doctypes:
<!DOCTYPE html>

También se han simplificado muchos tags y atributos:
<meta charset="utf-8" />
<style>
<script>

Son atributos o nomenclaturas que quedan por tanto obsoletos y ello simplifica mucho la vida al desarrollador ya que no se tiene que estar pendiente de que estándar hay que cumplir o qué atributo no está validando. Olvídate de cerrar br o repetir un atributo readonly=”readonly”.

Tags Semánticos

Las nuevas etiquetas como header, section, article, nav, aside, figure, menu, entre otros, ayudan a mejorar la estructura y la semántica del código. Ya no más chorrazos de divs anidados unos en otros hasta el infinito teniendo que echar mano de algún inspector de código tipo Firebug para saber donde esta el bloque que andamos buscando.

Hgroup por ejemplo engloba título y descripción / subtítulo:

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

Contenteditable

<section contenteditable="true" >Edíta este texto</section>

Esta característica me parece simplemente genial. Este atributo se puede agregar a cualquier elemento y habilita que el usuario cliente pueda editar el contenido manteniendo la estructura del contenedor y todo lo que hay dentro, lo que quiere decir que si éste contiene una lista, por ejemplo:

<section contenteditable="true">Edíta este texto<ul><li>opción uno</li><li>opción dos</li></ul></section>

El usuario podrá modificar opcion uno, o agregar una tercera opcion opción tres a la lista. Lo que es muy pero que muy útil para editores de texto inline en gestores de contenidos, ya veremos de qué forma se va integrando esta opción en los actuales CMS.

Form Inputs

Nuevos type inputs como date, range, search, tel, color o number son más que bienvenidos

La nueva variedad de inputs para formularios facilitan mucho el desarrollo automatizando tareas que hasta ahora se estaban haciendo mediante JavaScript.. algunos ejemplos:

  • required: nuevo atributo para marcar los campos obligatorios
  • pattern: el soporte RegExp por defecto para validaciones era algo que se echaba en falta hacía tiempo.
  • placeholder: que inserta un contenido en el input que desaparece al tener el foco (tarea que, en mi caso, hacía mucho años atrás en flash con Action Script).
  • min y max: atributos que establecen rangos para valores numéricos o fechas

Atributo data

El nuevo atributo data permite almacenar viariables en cualquier elemento de forma sencilla, lo que es genial para acceder a ellas con JavaScript como si de un objeto se tratase.

<p data-index="5" data-iditem="675" data-name="Pepe" data-tel="555-555-555">Hola me llamo Pepe y éste es mi comentario</p>

Ya no más hacks con class o con rel para tus funcionalidades y lo que es más importante nos ahorra peticiones a las bases de datos :).

Compatibilidad

Nuevas librerías JS como Modernizr o Html5shiv y la reciente salida de Internet Explorer 9 facilitan mucho la tarea de adaptación a navegadores antiguos u obsoletos.

Recursos

http://html5boilerplate.com/
http://initializr.com/
http://slides.html5rocks.com/

Leave a comment