Curso HTML5 [Parte 1]: Definición de HTML Para comenzar En esta lección no se necesita ningún archivo complementario. Esta lección es una revisión general de conceptos de HTML y en las siguientes ya se realizarán ejercicios prácticos paso a paso. Definición de HTML5 HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5. Por ello vamos a distinguir entre la especificación HTML5 en sí y la familia HTML5. Podemos definir la especificación HTML5 como nuevos elementos de markup o sintaxis, utilizados por los diseñadores para crear páginas web junto con las etiquetas utilizadas a día de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseñadores que trabajan con las etiquetas HTML tradicionales, como
,
o
. Estas nuevas etiquetas suponen para desarrolladores y diseñadores, unas herramientas más avanzadas y se traducen en mejores experiencias para el usuario final. La familia HTML5 incluye las nuevas etiquetas y tecnologías como CSS3, Geolocalización, Almacenamiento Web (Web Storage), Web Workers y Web Sockets entre otras. Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles. Los nuevos navegadores incorporan funcionalidades para responder a las expectativas de los consumidores y también como fruto de la evolución natural de la propia tecnología. A medida que las aplicaciones web van ganando en capacidad de respuesta y velocidad y son capaces de resolver tareas complejas como la edición de imágenes, representación de mapas, hojas de cálculo o vídeos, los usuarios ya exigen este mismo nivel de rendimiento en todas las aplicaciones de la web. Existen limitaciones con las capacidades de los lenguajes de programación actuales y no todas las funcionalidades se pueden implementar e incorporar de manera sencilla. HTML5 aporta nuevas funcionalidades y herramientas con el fin de conseguir que los sitios web sean más interesantes, atractivos y útiles. La historia de HTML5 HTML4, que se dio por cerrado en 1998, es el lenguaje de markup que conforma la base de la gran mayoría de las páginas web que podemos ver a día de hoy. Los diseñadores y desarrolladores web han estado utilizando la especificación HTML 4.01 durante bastantes años de manera satisfactoria, combinándola con CSS para la definición de estilos y con JavaScript para añadir interactividad a los contenidos. Tras la finalización de HTML 4.0.1, el W3C continuó sus trabajos en consonancia con la evolución de la web, y comenzó con un lenguaje llamado XHTML 1.0. Existe una pequeña diferencia entre HTML 4.0.1 y XHTML 1.0 (XHTML es un lenguaje más estricto: por ejemplo, todas las etiquetas deben indicarse en minúsculas). Uno de los objetivos de XHTML 1.0 era crear un lenguaje de markup que pudiera extenderse y resolver las necesidades de las tecnologías futuras, por ejemplo para los dispositivos móviles. Muchos sitios web se han creado utilizando XHTML 1.0 como marco de desarrollo y muchos diseñadores y desarrolladores valoran positivamente sus reglas sintácticas más estrictas. En paralelo a la adopción y difusión de XHTML 1.0, se empezó con el desarrollo de otro lenguaje, XHTML 2.0, que añadía una serie de novedades de gran interés a las páginas web y que se apoyaba de forma notoria en XML. No obstante, este nuevo lenguaje adolecía de diversos problemas de tipo técnico y no resolvía adecuadamente las necesidades reales de los desarrolladores. En 2004, un grupo de representantes de los principales fabricantes de navegadores y un grupo de trabajo de desarrolladores web formaron un grupo independiente llamado WHATWG (iniciales de Web Hypertext Application Technology Working Group). Su misión consistía en crear una especificación de lenguaje HTML mejor, orientada a crear un nuevo tipo de aplicaciones web pero manteniendo la compatibilidad con las versiones en activo de los navegadores existentes. Durante unos dos años y medio el W3C y el grupo WHATWG trabajaron en paralelo y de manera independiente hasta que en 2006, Tim Berners-Lee, creador de la World Wide Web y fundador del W3C anunció que el W3C y WHATWG trabajarían juntos en la elaboración del estándar. Como resultado de todo ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5. No obstante, conviene recordar que HTML5 empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realmente HTML5. Gracias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmente un estándar gratuito y con las suficientes garantías de no incurrir en problemas de propiedad intelectual. HTML5 extiende la definición de lo que puede hacer una página web A día de hoy HTML no tiene capacidad para reproducir contenidos multimedia, como audio o vídeo, sin un complemento ( un "plug-in" ) como los de Adobe® Flash® o Microsoft® Silverlight®. HTML tampoco tiene capacidad para almacenar datos en el ordenador del usuario, esto se hace actualmente mediante un lenguaje de scripting o con alguna otra tecnología. No existe un formato de dibujo nativo en HTML. Los gráficos y animaciones se ofrecen en estos momentos en forma de archivos de imágenes o con la ayuda de otros complementos (Adobe Flash, Java, Microsoft Silverlight u otros). En general, cada vez más gente depende de la web y utiliza aplicaciones web y las expectativas que se generan alrededor de lo que puede (o podría) hacer una página web van creciendo día tras día. Esta demanda de los usuarios en favor de un mayor rendimiento y unos sitios web con prestaciones más avanzadas y completas se ve limitada por el lenguaje HTML que se utiliza actualmente. Un sitio como Bing™ Maps es una aplicación web de altas prestaciones que podría beneficiarse de las nuevas funcionalidades que incorpora HTML5 El lenguaje HTML5 El lenguaje ( o "markup" ) HTML5 incorpora algunas etiquetas nuevas pensadas para hacer que la estructura de la página web sea más lógica y funcional. Antes de HTML5, la estructura de una página dependía fuertemente de las etiquetas
, generalmente asociadas a una clase CSS o un ID. Por ejemplo, en HTML 4.0 es una práctica comúnmente aceptada definir la cabecera de una página web de esta forma:
Esta es la cabecera
En este caso, el código destacado en color rojo es el ID de CSS que sirve para definir la anchura y altura de la cabecera así como su color de fondo. En el código CSS podríamos tener algo así: #header { width:960px; height:100px; background-color:gray; } El ID utilizado header es arbitrario. Algunos diseñadores prefieren nombres como masthead, topsection, o box. En la especificación HTML5 existe ya una etiqueta llamada que viene a sustituir al elemento
de forma que la sintaxis es mucho más lógica y coherente: Esta es la cabecera En este ejemplo ya podemos añadir directamente las propiedades de estilo (ancho, alto, color de fondo, etc.) en una regla para el nuevo elemento header de CSS: header { width:960px; height:100px; background-color:gray; } La diferencia entre estos dos ejemplos anteriores puede que sea difícil de entender si no estás familiarizado con CSS. En el primer caso se utiliza un selector (#header) que refiere a un atributo ID de CSS. En el segundo caso utilizamos un selector (header) que es una novedad de HTML5 y nos permite aplicar un estilo al elemento directamente. HTML5 dispone de unos cuantos elementos nuevos aparte de éste, como