HTML 5 Edgar Vázquez Ayala. Rolando Aarón Pérez Mandujano.

Presentación del tema: "HTML 5 Edgar Vázquez Ayala. Rolando Aarón Pérez Mandujano."— Transcripción de la presentación:

1 HTML 5 Edgar Vázquez Ayala. Rolando Aarón Pérez Mandujano.

2 ALGUNAS DEFINICIONES: HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. XHTML es básicamente HTML expresado como XML valido. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores entre otros. XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades, de ahí que se le denomine metalenguaje.

3 HTML 5 HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: O Un «clásico» HTML (text/html) O Una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

4 O Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas. O Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que trae HTML5. O El desarrollo de este código es regulado por el Consorcio W3C.

5 DIFERENCIAS CON OTRAS VERSIONES O HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas y, pero tienen un significado semántico, como por ejemplo (bloque de navegación del sitio web) y. O Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos y. O Mejoras en el elemento, capaz de renderizar en algunos navegadores elementos 3D. O Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como y, cuyos efectos son manejados por el CSS. También hay un renovado énfasis en la importancia del scripting DOM para el comportamiento de la web.

6 NUEVOS ELEMENTOS O Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. O Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente. O Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript. O Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML. O Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

7 Entre los elementos y atributos nuevos que nos encontramos esta: O article: una sección de la página que es una parte independiente de un documento, página o sitio. O aside: contenido que está relacionado tangencialmente al contenido, suele representarse con los sidebars. O dialog: una conversación. O footer: pie de página de una sección. O header: cabecera de una sección. O nav: representa la navegación de la página. O section: documento genérico o parte de una aplicación. O ping: atributo de los enlaces que contiene una lista de URIs que son interesantes de ser notificadas si el usuario sigue por ese enlace. O datagrid: corresponde a una representación interactiva de una lista, árbol o datos tabulados. O progress: barra de progreso para representar el desarrollo de una tarea.

8 EJEMPLO SENCILLO O Código HTML5 para reproducir audio sin la necesidad de plugins. Para video es algo similar. fuente de múltiples elementos no audio for you