PDF de programación - Guía teórica HTML 5

Guía teórica HTML 5



UNEWEB



Índice

Pág.



Qué es HTML 5.



Novedades de la estructura

 Estructura del cuerpo

 Etiquetas para contenido específico

 Canvas

 Bases de datos locales

 Web Workers

 Aplicaciones web Offline

 Geolocalización

 Nuevas APIs para interfaz de usuario

 Fin de las etiquetas de presentación



Novedades en HTML de HTML5

 Etiquetas que nos traen soporte a nuevas funcionalidades:

 Etiquetas que componen la web semántica



Elementos que dan soporte a nuevas funcionalidades

 Etiquetas para Multimedia

 AUDIO

 VIDEO

 EMBED

 SOURCE

 TRACK



4

5

5

5

5

5

6

6

6

6

6

6

6

7

7

7

7

7

7

7

7

Guía teórica HTML 5

Página 1

Nuevos elementos de formulario

 METER

 PROGRESS

 DATALIST

 KEYGEN

 OUTPUT



Dibujos completos en HTML5, lienzo de CANVAS



Elementos para la web semántica

 Secciones dentro de una página

 ARTICLE

 SECTION

 HEADER

 FOOTER

 ASIDE

 NAV



Otros tipos de informaciones

 BDI

 MENU

 COMMAND

 DETAILS

 SUMMARY

 FIGURE

 FIGCAPTION

 HGROUP

 MARK

7

7

7

7

7

8

8

9

9

9

9

9

9

9

9

9

9

9

9

9

9

10

10

10

10

Guía teórica HTML 5

Página 2

 TIME

 WBR



Etiquetas semánticas del HTML 5

Qué son etiquetas semánticas

Etiquetas semánticas estructurales

Las etiquetas semánticas no definen un estilo predeterminado

Por qué debemos utilizar las etiquetas semánticas y cómo nos

ayudan

Elementos eliminados de HTML 4

HTML 5. Atributos eliminados

Nuevos elementos

Nuevos atributos

Atributos globales

Algunos ejemplos de uso de las nuevas etiquetas

Ejemplo de un Formulario Organizado en una tabla

Ejemplo básico de etiquetas semánticas haciendo uso de CSS

Crear un Acordeón con CSS3



10

10

10

10

11

14

15

16

17

19

20

21

21

22

25

28

Guía teórica HTML 5

Página 3





Guía teórica HTML 5

Página 4

Qué es HTML 5.

Es la quinta revisión importante del estándar que mueve internet, HTML y que ha
sido impulsado por el aumento de las necesidades de mejorar la funcionalidad y la
interactividad de usuarios y aplicaciones. HTML 5 presenta una amplia gama de
mejoras en controles para formularios, APIs, multimedia y también en la
estructura y la semántica. El trabajo en HTML 5 comenzó en el 2004 y es un
esfuerzo conjunto entre el W3C, HTML, WC y el WHATWG. Muchos aportan su
participación, como Apple, Mozilla, Opera, Microsoft y un sinnúmero de personas y
empresas.

La aparición de estas revisiones implicará cambios importantes en el desarrollo de
páginas web y algunos se aventuran incluso a prever la desaparición de algunas
tecnologías de gran calado en la red, como puede ser Adobe Flash. Cierto o no, la
realidad es que estamos presenciando una evolución radical de los lenguajes
principales de la web que aportará grandes mejoras, pero que al mismo tiempo
implicará un periodo de adaptación y aprendizaje por parte de programadores y
diseñadores.

Ahora convendría explicar qué es exactamente HTML 5, ya que no es
simplemente una nueva versión del lenguaje de marcación HTML, sino una
agrupación de diversas especificaciones concernientes al desarrollo web. Es decir,
HTML 5 no se limita sólo a crear nuevas etiquetas, atributos y eliminar aquellas
marcas que están en desuso o se utilizan inadecuadamente, sino que va mucho
más allá.

Así pues, HTML 5 es una nueva versión de diversas especificaciones, entre las
que se encuentran:


• HTML 4.

• XHTML 1.

• CSS Nivel 2.

• DOM Nivel 2 (DOM = Document Objetc Model).


A la par, HTML 5 pretende proporcionar una plataforma con la que desarrollar
aplicaciones web más parecidas a las aplicaciones de escritorio, donde su
ejecución dentro de un navegador no implique falta de recursos o facilidades para
resolver las necesidades reales de los desarrolladores. Para ello se están creando
unas APIs que permitan trabajar con cualquiera de los elementos de la página y
realizar acciones que hasta hoy era necesario realizar por medio de tecnologías
accesorias.


Guía teórica HTML 5

Página 5

Estas API, que tendrán que ser implementadas por los distintos navegadores del
mercado, se están documentando con minuciosidad, para que todos los Browsers,
creados por cualquier compañía las soporten tal cual se han diseñado. Esto se
hace con la intención que no ocurra lo que viene sucediendo en el pasado, que
cada navegador hace la guerra por su parte y los que acaban pagándolo son los
desarrolladores y a la postre los usuarios, que tienen muchas posibilidades de
acceder a webs que no son compatibles con su navegador preferido.


Novedades de la estructura:

Empezamos con decir que el DOCTYPE es el encargado de indicarle al
navegador web que el documento que está abriendo es un documento HTML,
además de indicar que es un documento HTML también le indica la versión del
HTML del mismo con el fin de renderizar la página de manera correcta para
mostrarla de la mejor manera posible.

Ahora con la llegada de HTML5, el doctype es bastante sencillo y compatible con
las versiones anteriores de HTML y xHTML, esta es su sintaxis.-

<!DOCTYPE html>


HTML 5 incluye novedades significativas en diversos ámbitos. Como decíamos, no
sólo se trata de incorporar nuevas etiquetas o eliminar otras, sino que supone
mejoras en áreas que hasta ahora quedaban fuera del lenguaje y para las que se
necesitaba utilizar otras tecnologías.


 Estructura del cuerpo: La mayoría de las webs tienen un formato común,
formado por elementos como cabecera, pie, navegadores, etc. HTML 5
permite agrupar todas estas partes de una web en nuevas etiquetas que
representarán cada uno de las partes típicas de una página.


 Etiquetas para contenido específico: Hasta ahora se utilizaba una única
etiqueta para incorporar diversos tipos de contenido enriquecido, como
animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para
cada tipo de contenido en particular, como audio, vídeo, etc.


 Canvas: es un nuevo componente que permitirá dibujar, por medio de las
funciones de un API, en la página todo tipo de formas, que podrán estar
animadas y responder a interacción del usuario. Es algo así como las
posibilidades que nos ofrece Flash, pero dentro de la especificación del
HTML y sin la necesidad de tener instalado ningún plugin.


 Bases de datos locales: el navegador permitirá el uso de una base de
datos local, con la que se podrá trabajar en una página web por medio del

Guía teórica HTML 5

Página 6

cliente y a través de un API. Es algo así como las Cookies, pero pensadas
para almacenar grandes cantidades de información, lo que permitirá la
creación de aplicaciones web que funcionen sin necesidad de estar
conectados a Internet.


 Web Workers: son procesos que

tiempo de
procesamiento por parte del navegador, pero que se podrán realizar en un
segundo plano, para que el usuario no tenga que esperar que se terminen
para empezar a usar la página. Para ello se dispondrá también de un API
para el trabajo con los Web Workers.


requieren bastante

 Aplicaciones web Offline: Existirá otro API para el

trabajo con
aplicaciones web, que se podrán desarrollar de modo que funcionen
también en local y sin estar conectados a Internet.


 Geolocalización: Las páginas web se podrán localizar geográficamente por

medio de un API que permita la Geolocalización.


 Nuevas APIs para interfaz de usuario: temas tan utilizados como el "drag
& drop" (arrastrar y soltar) en las interfaces de usuario de los programas
convencionales, serán incorporadas al HTML 5 por medio de un API.


 Fin de las etiquetas de presentación: todas las etiquetas que tienen que
ver con la presentación del documento, es decir, que modifican estilos de la
página, serán eliminadas. La responsabilidad de definir el aspecto de una
web correrá a cargo únicamente de CSS.



Como se puede ver, existirán varios API con los que podremos trabajar para el
desarrollo de todo tipo de aplicaciones complejas, que funcionarán online y offline.
Quizás se entienda mejor por qué HTML 5 es un proyecto tan ambicioso y que
está llevando tanto tiempo para ser elaborado.


Novedades en HTML de HTML5

Ya dentro del lenguaje HTML específicamente, las novedades que nos trae en su
versión 5 son una serie de etiquetas útiles en la web actual, algo bien sencillo de
aprender y de aplicar a los sitios web, así como el propio lenguaje de marcación
es también sencillo de asimilar. Las podemos clasificar en dos partes:


 Etiquetas que nos traen soporte a nuevas funcionalidades: es decir,
aquellas que nos sirven para extender el HTML, dando soporte a asuntos
como el vídeo o el sonido, lienzos donde diseñar dibujos, etc.


Guía teórica HTML 5

Página 7

 Etiquetas que componen la web semántica: algunas etiquetas que
realmente no proponen nuevas funcionalidades, sino que sirven para
componer sitios indicando qué son los bloques de código de una web, en
lugar de como se deben representar.



Elementos que dan soporte a nuevas funcionalidades

Existen numerosas novedades dentro del HTML5 que se han representado por
etiquetas o elementos de diversa índole.
Algunas etiq