Notas_Módulo 4_HTML5

HTML5 Introducción

El 28 de octubre de 2014 el W3C publicó "HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014", A partir de este fecha HTML5 ya tiene el rango de estándar.

Existe ya una versión estable de HTML5, pero eso no significa que todos los navegadores web lo soportarán. Sobre todo los navegadores que tienen varios años no van a soportar muchas cosas de HTML5.

• Nueva versión de HTML5
• Problemas de compatibilidad que pueden existir con los navegadores
• Consejos para HTML5.

La mayor parte de las etiquetas y atributos de HTML5 son de HTML4. Algunas han desaparecido, otras se han modificado ligeramente o han añadido atributos y otras son nuevas.

En la página de w3schools.com podemos ver las etiquetas de HTML que no están soportadas en HTML5 (están en rojo). También podemos ver las etiquetas de HTML5

Compatibilidad con navegadores

Se puede testear la compatibilidad de los navegadores con HTML5 en varias páginas web.

• www.html5test.com se puede comprobar la compatibilidad de nuestro navegador o de otros navegadores. El resultado es muy mal para IE versión 11. También se puede ver una comparativa de distintos navegadores.
• www.caniuse.com se puede comprobar la compatibilidad de HTML5, CSS y SVG con los distintos navegadores.
• www.wufoo.com se puede verificar el funcionamiento de los nuevos controles de los formularios.

 Sitios para aprender HTML5

• En Dive Into HTML5 se puede consultar. Se empezó a desarrollar en 2009 pero está actualizado solo hasta 2011. 
• En HTML5 Doctor existe una copia que se intenta actualizar con las últimas novedades del lenguaje.
• En w3schools.com existe un tutorial y una referencia de todas las etiquetas de HTML5.
• En Idesweb.com también se pueden consultar muchos videos tutoriales.

HTML5_¿En qué consiste?

Las principales tecnologías de la familia HTML5 son:

• HTML5.
• Canvas.
• SVG.
• Geolocalización.
• Caché.
• Base de datos.
• Web workers.

Introducción: Técnologías de desarrollo Web

La Web, es un sistema de distribución de información basado en hipertexto e hipermedia accesible a través de Internet.

Un elemento esencial de la web es HTML. Es un lenguaje de marcado que se emplea para crear las páginas web y que permite distribuir la estructura y el contenido de las páginas web (principalmente texto aunque también permite incluir otros objetos como imágenes y videos).

HTML es un estándar de facto desarrollado por el World Wide Web Consortium (W3C), un consorcio internacional que produce recomendaciones para la World Wide Web.  El desarrollo del lenguaje de marcado HTML ha ido parejo al desarrollo del World Wide Web Consortium, que fue fundado en 1994.

En Noviembre de 1995 se publicó HTML 2.0. En Enero de 1997 se publicó HTML 3.2. En Diciembre de 1997 se publicó HTML 4 y en Enero de 2000 se publicó XHTML 1.0 (reformulación de HTML 4 usando XML). Finalmente a mediados de 2007 el W3C empezó a trabajar en HTML5.

De todas formas las páginas web también hace uso de otras tecnologías como CSS (hojas de estilo en cascada), DOM (jerarquía de objetos) y JavaScript (lenguaje interpretado).

El uso combinado de todas estas tecnologías se conoce como DHTML (HTML Dinámico) que permite crear sitios webs interactivos.

• HTML
• CSS
• DOM
• JavaScript

También existe otras tecnologías como XHR (XMLHttpRequest que es un lápiz de programación), el metalenguaje XML y el formato de intercambio de datos JSON (se emplea para serializar estructuras de datos en JavaScript).

Todo ello se conoce como AJAX, una técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador. Permite crear páginas web en las que cambia su contenido sin que se tenga que recargar la página e incluye:

• DHTML
• XHR
• XML
• JSON

Desde hace unos años han aparecido varias alternativas a AJAX que realizan una función similar, como son,

• HTML5
• CANVAS
• SVG
• GEOLOCATION
• CACHE
• DATABASE
• WEB WORKERS

A todas estas se le llaman HTML5 pero lo correcto es decir familia de tecnologías de HTML5.

Vamos a ver cada una de ellas,

HTML5

Es un lenguaje de marcado que se ofrece con dos sintaxis (HTML y XHTML)

Añade nuevas etiquetas y atributos que dan una mayor capacidad semántica al lenguaje.

CANVAS

Una de las tecnologías que añade HTML5 es el canvas (o lienzo) que incorpora una nueva etiqueta <canvas> que permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo.

Ej.   <canvas id="myDrawing" with="200" height="200">

        <p>El  navegador no admite canvas.<p>

        </canvas>

SVG

Es un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales y se pueden crear gráficos utilizando un lenguaje similar a HTML.

API

Es otra de las tecnologías de la familia HTML5, es el API de geolocalización para JavaScript, que permite obtener la localización del usuario, siempre que el dispositivo que utilice ofrezca esa información y siempre que el usuario lo permita.

CACHE

La tecnología de CACHE permite indicar aquellos recursos de una página web o una aplicación web que se desea que se almacenen de forma local. De esta forma se mejora el rendimiento y además permite descargar todos los contenidos necesarios y trabajar en local.

DATABASE

Esta tecnología de base de datos es un API que ofrece la posibilidad de almacenar información en local en el navegador mediante una base de datos SQL Lite. Con esta tecnología se pueden realizar aplicaciones en las que el usuario puede crear notas persistentes que conservan la posición y la información aunque se abandone la página web.

WEBWORKERS

Por último, los WEB WORKERS es otra API para JavaScript que permite crear múltiples hilos de ejecución que se ejecutan en paralelo.

De todas estas tecnologías, ¿cuáles podemos utilizar hoy en día?

Es difícil responder esta pregunta porque existen múltiples navegadores con múltiples versiones, cada uno con un nivel de soporte diferente. Pero hay algunos sitios web que nos pueden ayudar.

• Por ejemplo, el sitio web “When can I use…” ofrece tablas de compatibilidad de HTML5, CSS3, SVG y otras características en diferentes navegadores y diferentes plataformas.
• El sitio web “findmebyIP” ofrece los niveles de compatibilidad de diferentes navegadores en Windows y Macintosh. También nos permite conocer el nivel de compatibilidad de nuestro navegador, ya que lo detecta automáticamente y nos muestra las características de HTML5 que admite.
•  El sitio web “The HTML5 Test” también permite conocer el nivel de soporte de nuestro navegador y de otros navegadores. Se diferencia de los anteriores porque ofrece una puntuación, lo cual hace que las comparaciones entre navegadores sea más sencillas.
• Para aprender más cosas sobre HTML5, es recomendable el sitio web “HTML5 Rocks” desarrollado por Google. En él se encontrarán numerosos ejemplos y tutoriales de HTML5.