html5

29
HTML 5 MIGUEL ÁNGEL CAMACHO POLVO

Upload: miguel-angel-camacho

Post on 12-Apr-2016

1 views

Category:

Documents


0 download

DESCRIPTION

Programación Web

TRANSCRIPT

Page 1: HTML5

HTML 5MIGUEL ÁNGEL CAMACHO POLVO

Page 2: HTML5

<!DOCTYPE html>

La declaración DOCTYPE para HTML5 es muy simple:

<meta charset="UTF-8">

La codificación de caracteres (charset) declaración también es muy simple:

Page 3: HTML5

La codificación de caracteres por defecto en HTML5 es UTF-8.

Page 4: HTML5

Nuevos elementos de HTML5

Los nuevos elementos más interesantes son: 

Nuevos elementos semánticos como <header>, <pie de página>, <article> y <section>.

Nueva forma de control de atributos como el número, fecha, hora, calendario y alcance.

Nuevos elementos gráficos: <svg> y <canvas>.

Nuevos elementos multimedia: <audio> y <video>.

Page 5: HTML5

Nuevas API’s de HTML5(Application Programming Intercafes)

Las API’s más interesantes son: Geolocalización HTML Arrastrar y soltar HTML HTML Almacenamiento local HTML Aplicación Caché Trabajadores Web HTML HTML SSE

* Almacenamiento local es un reemplazo de gran alcance para las cookies.

Page 6: HTML5

Historia de HTMLDesde los primeros días de la web, han habido muchas versiones de HTML:

Page 7: HTML5

Historia de HTML Tim Berners-Lee inventó la "World Wide Web" en 1989, y la Internet despegó en la década de 1990.

De 1991 a 1998, HTML desarrolló desde la versión 1 a la versión 4. 

En 2000, el Consorcio World Wide Web (W3C) recomienda XHTML 1.0. 

La sintaxis XHTML era estricta, y los desarrolladores se vieron obligados a escribir código válido y "bien formado”

En 2004, WHATWG (Grupo de Trabajo de Tecnología Web de hipertexto Aplicación) se formó en respuesta a retrasar el desarrollo del W3C, y la decisión del W3C para cerrar el desarrollo de HTML, a favor de XHTML.

WHATWG quería desarrollar HTML, coherente con cómo se utiliza la web, sin dejar de ser compatible con versiones anteriores de HTML.

En el período 2004-2006, la iniciativa WHATWG ganó el apoyo de los principales proveedores de navegadores.

En 2006, el W3C ha anunciado que apoyarían WHATWG.

En 2008, el primer borrador público HTML5 fue puesto en libertad.

Page 8: HTML5

HTML5 – Soporte del Navegador

Se le puede enseñar a los navegadores más antiguos de manejar HTML5 correctamente.

HTML5 es compatible con todos los navegadores modernos. Navegadores, antiguos y nuevos, manejan automáticamente los elementos no reconocidos como elementos en línea. Debido a esto, se puede "enseñar" navegadores antiguos para manejar elementos HTML "desconocidos”. Usted puede incluso enseñar a IE6 (Windows XP, 2001) cómo manejar elementos HTML desconocidas.

Definir HTML5 elementos como elementos de bloque

HTML5 define ocho nuevas semánticas elementos HTML. Todos estos son a nivel de bloque elementos. Para asegurar buena función en los navegadores más antiguos, se puede establecer el CSS display propiedad a bloquear:

Page 9: HTML5

Añadiendo nuevos elementos a HTMLEste ejemplo añade un nuevo elemento llamado <Myhero> de HTML, y define un estilo de visualización:

Page 10: HTML5
Page 11: HTML5

UN ESQUELETO HTML5

Page 12: HTML5

Un HTML5 esqueleto

Page 13: HTML5
Page 14: HTML5
Page 15: HTML5

NUEVOS ELEMENTOS DE

HTML5

Page 16: HTML5

Nuevos elementos de HTML5.

- NUEVOS ELEMENTOS SEMÁNTICOS / ESTRUCTURALESHTML5 ofrece nuevos elementos para una mejor estructura del documento:

Page 17: HTML5

Nuevos elementos de HTML5.

- NUEVOS ELEMENTOS FORMULARIO

- NUEVOS TIPOS DE ENTRADA

Page 18: HTML5

Nuevos elementos de HTML5.

- NUEVA ATRIBUCIÓN DE SINTAXIS

HTML5 permite cuatro sintaxis diferentes para los atributos.

Este ejemplo demuestra las diferentes sintaxis utilizados en una etiqueta <input>:

En HTML5, los cuatro sintaxis se pueden utilizar, dependiendo de lo que se necesita para el atributo.

Page 19: HTML5

Nuevos elementos de HTML5.

- HTML5 GRÁFICOS

- NUEVOS ELEMENTOS MEDIA

Page 20: HTML5

ELEMENTOS SEMÁNTICOS

Page 21: HTML5

ELEMENTOS SEMÁNTICOS

La semántica es el estudio de los significados de las palabras y frases en el idioma.

Elementos semánticos son elementos con un significado.

Un elemento semántico describe claramente su significado tanto para el navegador y el desarrollador.

Los ejemplos de no-semánticos elementos: <div> y <span> - Le dice nada acerca de su contenido.

Ejemplos de semánticas elementos: <FORM>, <table> y <img> - define claramente su contenido.

Page 22: HTML5

NUEVOS ELEMENTOS SEMÁNTICOS EN HTML5

Muchos sitios web contienen código HTML como: <div id = "nav"> <div class = "header"> <div id = "pie de página"> para indicar navegación, encabezado y pie de página.

HTML5 ofrece nuevos elementos semánticos para definir las diferentes partes de una página web:  

<artículo> <aside> <detalles> <figcaption> <figura> <pie de página> <header> <principal> <mark> <nav> <section> <summary> <hora>

Page 23: HTML5

NUEVOS ELEMENTOS SEMÁNTICOS EN HTML5

A continuación se muestra una lista alfabética de los nuevos elementos semánticos en HTML5.

Page 24: HTML5

MIGRACIÓN HTML4 HTML5

Page 25: HTML5

MIGRACIÓN HTML4 HTML5

Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:

Page 26: HTML5

MIGRACIÓN HTML4 HTML5

Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:

Page 27: HTML5

MIGRACIÓN HTML4 HTML5

Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:

Page 28: HTML5

MIGRACIÓN HTML4 HTML5

Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:

Page 29: HTML5

FIN