"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Novedades HTML5

Todo el código HTML seguirá funcionando sin problemas en la última versión de este lenguaje llamada HTML5, como es lógico HTML5 incluye capacidad para interpretar todas las etiquetas de las versiones anteriores y además agrega etiquetas nuevas que nos resultaran muy interesantes, de manera que no deberíamos pensar en él como algo que sustituya sino más bien como algo que extiende.

Cuando salen nuevas actualizaciones de un lenguaje, surgen nuevas formas de hacer las cosas, y por ese motivo otras obsoletas y se desaconseja seguir usándolas, pero eso no quiere decir que vayan a dejar de funcionar, solo quiere decir que hay formas más correctas de hacerlo.

Para empezar a usar HTML5 lo único que tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>

<!DOCTYPE html>

En este artículo tratare de explicar por encima cuales son estas novedades.

 

Etiquetas Sintácticas

Como se puede ver en el siguiente gráfico, hay nuevas etiquetas mucho más sintácticas, es decir que solo con leerlas ya sabemos a qué parte del documento se refieren (sí, están en inglés pero tampoco hace falta un doctorado para entender a que se refieren…)

Al principio para hacer la “rejilla” de las páginas web se utilizaban tablas, más tarde HTML incorporó unos elementos mucho más flexibles para hacerlo llamados div, usando los div podíamos definir donde queríamos que flotaran, el tipo de posición que tenían que tener, etc…

Estas etiquetas que tenemos encima tienen las mismas propiedades que un div normal y corriente (en CSS les podremos asignar los mismos atributos) y además simplifican su escritura y los hace más diferenciables, me explico, si antes para hacer la barra de navegación la encerrabas en un:

<div class=”nav”></div> o <div id=”nav”></div> (ambas funcionarian)

Ahora solo tienes que escribir:

<nav></nav>

Mucho más sencillo, y es mejor que no acostumbremos porque en tema de posicionamiento es muy importante (facilítale la lectura al robot y ganarás puntos extra).

Las etiquetas “sintácticas” en resumen son:

header, nav, section, article, aside, footer y una última que no se refiere a la posición sino que tiene el propósito de agrupar, sería la etiqueta <hgroup>

Cuando vamos a crear una página necesitamos ponerle títulos o encabezados, para eso están las etiquetas h1,h2,h3… que además de crearlos con distintos estilos también tienen un peso dentro del SEO.

Por ejemplo h1 solo debemos usarlo en una ocasión, este refleja que es más importante que el h2 en que (salvo que cambiemos su estilo explícitamente) por defecto su letra es de mayor tamaño, se espera que este antes dentro del esquema de la página, que a nivel de SEO tiene mas relevancia…

Pero si ponemos más de un h1 (que no se recomienda pero es posible) el h1 pierde prioridad de SEO, <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.

 

Etiquetas Multimedia

Si las anteriores se referían más a la estructura del documento, para hacerlo más sintáctico y legible (cosa que impacta directamente en el posicionamiento), estas etiquetas que integran contenido multimedia en nuestras páginas, sirven para darle nuevas capacidades a las webs, capacidades que antes no tenían, y como eran necesarias tenían que ser integradas a través de un plugin de otra tecnología, el plugin de Flash por ejemplo.

Estas funcionalidades que antes dependían de terceros y que no todos los navegadores soportaban (por ejemplo Apple no da soporte a flash, así que en los productos de su compañía no podías verlo), son imprescindibles, HTML5 persigue que puedas usarlas de forma nativa en tu navegador sin depender de nadie.

Son a nivel visual la novedad más importante sin dudas, y abren las puertas para explotar videos audio y animaciones vectoriales, son las siguientes etiquetas:

 

Nuevas capacidades en los formularios

Algo muy necesario era que los formularios evolucionasen un poco, ya que es la forma de interactuar entre el usuario y nosotros, gracias a ellos los datos y parámetros son recibidos de manera que los podamos usar para adaptar las páginas web, o crear un registro al persistirlos en una base de datos.

Es por ese motivo que en HTML5 crean nuevos tipos de caja (las famosas etiquetas input), para escribir de forma más sencilla esa información que es tan importante, y también para asegurarse de que sea escrita correctamente.

Estos son algunos tipos de input nuevos que han sido introducidos (No todos los navegadores tienen porque implementarlos, en caso de que no lo reconozca lo debería mostrar como un input normal).

Datalist – Este nuevo elemento aglutina varios valores predefinidos que facilitan el autocompletado de un campo tipo input.

Es decir, según el usuario va escribiendo, el navegador abre una lista desplegable con las diferentes opciones a seleccionar. Es muy parecido a un combo o lista.

Y si nos fijamos en su comportamiento vemos que es igual que el autocompletado de google cuando empezamos a escribir una busqueda.

html5datalist

Keygen – Es un campo para enviar claves en el autentificado web.

Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir autentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

Output – Esta nueva etiqueta representa el resultado de un cálculo entre los diferentes input de un formulario. Tened en cuenta que solo representa y no se recoge dicho dato en el envío del formulario.

Number – Valida automáticamente que los valores introducidos sean numéricos, con el consiguiente ahorro de código en la recepción o validación de los formularios.

html5numberRange – Este input es muy parecido al number, la diferencia radica en que para asignar el valor numérico debemos usar su slider, en el cual definiremos sus límites.

html5range

Tel – Esta novedad  resulta muy útil en los dispositivos móviles actuales. El dispositivo móvil detecta que el input es de tipo ‘tel’ y al pulsar en él automáticamente sale el teclado telefónico del movil para insertar el número en cuestión.

Email – Con este la validación de campos de email va a ser tarea sencilla. El elemento por defecto detecta que el campo debe ser rellenado con contenido válido de una cuenta de email, por lo que mostrará una @ en el teclado y hara las verificaciones pertinentes para cumplir los requisitos de una dirección de email.

Color – Representa una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales como veníamos haciendo hasta ahora. Así con un solo click podemos elegir fácilmente un color.

html5color

Search – Con este input podremos decir en la validación del formulario que el campo contendrá valores de búsqueda, así el propio input nos porporciona un dato válido y el teclado del dispositivo móvil mostrará el botón ‘buscar’.

Url – Se parece bastante al de tipo tel. Este campo cuando se visualiza en dispositivos móviles facilita en el teclado las teclas ‘.’, ‘/’, y ‘.com’.

Date -Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es ‘AAAA-MM-DD’.

html5date

Existen múltiples variables en cuanto al datepicker, además de date esta:

Datetime, Datetime-localMonthTimeWeek

Aunque no mencionamos todos si quedó claro que HTML5 valida ciertos campos de manera que al usarlo estamos poniendo una capa más de seguridad, aunque al programar aplicaciones web además hacemos validaciones en JavaScript (que son mucho más específicas y seguras, aunque por el contrario si nos deshabilitan JavaScript en el navegador ya la hemos liado) y validaciones en el servidor (que pueden ser tanto en el controlador como en la base de datos).

Por último respecto al tema de los formularios veamos por encima los nuevos atributos que segun W3C tienen estas etiquetas:

 


 

 

Si quieres saber cuáles son todas las novedades de HTML5 y ver que navegadores y versión de navegador ya permiten usarlos, puedes visitar este link como se puede apreciar en la siguiente captura de pantalla aparecen todas y si nos fijamos en los laterales también analiza las novedades de CSS, JavaScript, etc…

http://caniuse.com/

Por poner un ejemplo la página indica que el Drag and Drop (La capacidad para arrastrar y soltar un elemento en un input del tipo file, y que este se cargue para ser subido) está ya implementado y nos va a funcionar en estos navegadores…

 

caniuse2

Espero que os sea de utilidad y si no conocíais alguna de estas características del lenguaje podáis comenzar a usarlas pronto, un saludo.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)