html5

Post on 12-Apr-2016

1 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

Programación Web

TRANSCRIPT

HTML 5MIGUEL ÁNGEL CAMACHO POLVO

<!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:

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

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>.

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.

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

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.

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:

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

UN ESQUELETO HTML5

Un HTML5 esqueleto

NUEVOS ELEMENTOS DE

HTML5

Nuevos elementos de HTML5.

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

Nuevos elementos de HTML5.

- NUEVOS ELEMENTOS FORMULARIO

- NUEVOS TIPOS DE ENTRADA

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.

Nuevos elementos de HTML5.

- HTML5 GRÁFICOS

- NUEVOS ELEMENTOS MEDIA

ELEMENTOS SEMÁNTICOS

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.

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>

NUEVOS ELEMENTOS SEMÁNTICOS EN HTML5

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

MIGRACIÓN HTML4 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:

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:

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:

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:

FIN

top related