CURSO HTML5

home page

HTML5 mola!

HTML5

En 2004,el consorcio Web Hypertext Application Technology Working Group (WHATWG- integrado entre otros por Opera, Mozilla y Apple) planteó siete requisitos que debería cumplir el nuevo lenguaje:

  1. Compatibilidad hacia atrás y un camino claro para migrar desde construcciones anteriores.
  2. Definición clara del amnejo de errores, tal y como hace el CSS (ignorar lo que no puede parsear y seguir con lo que sí puede) en lugar de la intransigencia del XML.
  3. Los errores de de la aplicación deben ser transparentes al usuario.
  4. Usos prácticos: cada prestación de las especificaciones para aplicaciones web debe responder y estar justificada por un caso de uso práctico. La inversa no es necesariamente cierta: cada caso de uso no implica necesariamente la especificación de una nueva presatción.
  5. Seguriemos escribiendo scripts, pero deben evitarse siempre que el problema pueda resolverse mediante marcado declarativo.
  6. Evitar especificaciones dependientes de un dispositivo concreto
  7. El proceso de especificación debe de ser abierto. (La Web siempre se ha benficiado de los desarrollos abiertos. Listas de correo, ficheros y bocetos de especificación deben estar permanentemente a disposición pública)

En 2006 el W3C abandonaba el proyecto XHTML2 y adoptaba el proyecto del WHATWG

Ahora sólo queda esperar a que IE6 se jubile defitivamente e IE9 de soporte, y que AUDIO y VIDEO funcionen en Safari para Windows, y que ...

Muy pronto en vuestras pantallas

Especificación HTML5

HTML5. Edition for Web Authors

A vocabulary and associated APIs for HTML and XHTML

La buena noticia es que el W3C separa la especifición para autoría de contenidos de la especificación para implementación de browser.
La mala es que la edición para autores es tan pobre que no queda otro remedioque seguir utilizando la especificación completa en multitud de casos (todos para estar seguros de lo que consultamos).

Repositorio de logos HTML5

Para los entusiastas de la versión completa:

HTML5. A vocabulary and associated APIs for HTML and XHTML

A vocabulary and associated APIs for HTML and XHTML

RTFM!!!

Sintaxis HTML5

Es una sintaxis mucho más relajada que la impuesta por el XHTML y permite tanto mayúsculas como minúsculas como combinaciones de ambas en nombres de etiqueta y de atributo.

permite parametrizar los atributos sin comillas, siempre que el valor del atributo no contenga espacios, " ' ` = < ó >.
Los siguientes ejemplos son igualmente válidos:

<img src="nice.jpg" />
<img src="nice.jpg">
<img src="nice.jpg">
<img src=nice.jpg>
<IMG SRC=nice.jpg>
<img src=nice.jpg>
<iMg SrC=nice.jpg>

A pesar de esta discrecionalidad, la especificación describe claramente qué debe hacer un parser con el código mal escrito, por lo que todos los browser generan el mismo DOM.
El XHTML actual corresponde a una especificación completa y funcionará correctamente en los browsers html5 compatibles.

La variante que incorpora las características funcionales del html5 pero con con una sintaxis estricta de XML es el XHTML5.

Doctype

<!DOCTYPE html>

Por fin podremos escribirlo de memoria sin tener que copiarlo de un documento a otro.
aunque echaremos de menos aquellos chorizacos ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">

Character Set

<meta charset=”utf-8”>

También ha abreviado frente al HTML4:

<meta http-equiv=”Content-Type” content=”text-html; charset=utf-8”>

Siempre será mejor marcar bien, siguiendo una pauta.

Selección de elementos en DOM

Ademas de los conocidos

  • getElementById()

  • getElementsByName()

  • getElementsByTagName()

HTML5 incorpora dos nuevos métodos:

  • querySelector()

  • querySelectorAll()

estos métodos aprovechan toda la potencia de los selectores CSS. Por ejemplo:

querySelector(“input.error”) 

devuelve el primer los input con atrributo class=”error”, mientras que

querySelectorAll(“input.error”) 

devuelve todos los elementos que cumplen la condición.

También podemos utilizar estos métodos para buscar elementos que cumplan alguna de una lista de condiciones mediante una sucesión de selectores separada por comas:

querySelector(“.error,.alert,.advise”) 

devolverá el primer elemento que cumpla una de las tres condiciones.

Esto supone una ventaja frente a las búsquedas trasversales en el DOM ya que los browser suelen estar optimizados para encontrar selectores para conseguir un rendimiento más rápido en la aplicación de hojas de estilo.

Selectors API Level 1

Nuevos elementos

Entre otros muchos, se han deprecado todos los elementos para dar formato inline, también los FRAME y FRAMESET, cuyas funcionalidades ahora recoge IFRAME

Paralelamente, se han incorporado nuevos elementos con nuevas funcionalidades o que complementan y amplían las de elementos ya existentes.

En HTML5 los elementos se agrupan con una nueva clasificación que sustituye a la clásica de elementos inline y de bloque. Cada elemento puede pertenecer a uno o a varios apartados de la nueva categorización.

Metadata
Tal y como se hacía en HTML4, los elementos de tipo metadata establecen parámetros de presentación, comportamiento y relación del documento con relación a otros documentos y con su contexto.
Flow
La mayor parte de los elementos que contiene el body de un documento o aplicación se consideran elementos de tipo flow.
Sectioning
Una novedad importante. Los elementos Sectioning permiten una categorización semántica del contenido y estructurar todo lo que se encuentra entre el encabezado y el pie del documento. vienen a reemplazar a los div con clases para marcar las distintas zonas de un documento (menú de navegación, contenido, secciones, artículos, ...)
Heading
Los elementos Heading titulan y jerarquizan las secciones de contenido (tanto si están marcaddas explícitamente por elementos de tipo sectioning, como si se trata de secciones implícitas en el contenido del propio heading).Más o menos igual que en HTML4.
Phrasing
Los elementos de tipo phrasing son todos aquellos que componen el texto de un documento, incluídos los que marcan el texto dentro de cada párrafo (antes contenido in-line). Los elementos de tipo phrasing generan el contenido de párrafos.
Embedded
Los elementos de tipo embedded importan recursos externos al documento, o contenido en un formato diferente al del propio documento.
Interactive
Interactive content is content that is specifically intended for user interaction.
Como el nombre indica, los elementos de tipo interactive están pensados para la interacción con el usuario.

La lista completa de elementos presentada por w3Schools indica claramente cuáles son nuevos en HTML5 respecto a HTML4 y XHTML: W3Schools HTML5 New Elements