Descargar la presentación
La descarga está en progreso. Por favor, espere
1
DEFINICIÓN DE HTML5 HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5.
2
La familia HTML5 incluye las nuevas etiquetas y tecnologías como:
CSS3 Geolocalización Almacenamiento Web (Web Storage) Web Workers Web Sockets Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con ellas se pueden crear páginas web más sofisticadas y útiles.
3
ALGO DE HISTORIA HTML4 se dio en 1998
Los diseñadores y desarrolladores lo han utilizado por muchos años, combinándola con CSS y JavaScript para mayor funcionalidad Continuando con la evolución de la Web, se comenzó con XHTML1.0 el cual era más estricto y más valorado por los desarrolladores
4
En 2004 se creó el grupo WHATWG (Web Hypertext Application Technology Working Group) integrado por representantes de fabricantes de navegadores y desarrolladores web Su misión consistía en crear una especificación de lenguaje HTML mejor, orientada a crear un nuevo tipo de aplicaciones web pero manteniendo la compatibilidad con las versiones en activo de los navegadores existentes.
5
Durante unos dos años y medio el W3C y el grupo WHATWG trabajaron en paralelo y de manera independiente En 2006, Tim Berners-Lee, creador de la World Wide Web y fundador del W3C, anunció que el W3C y WHATWG trabajarían juntos en la elaboración del estándar. Como resultado de ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5.
6
No obstante, conviene recordar que HTML5 empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realmente HTML5. Gracias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmente un estándar gratuito y con las suficientes garantías de no incurrir en problemas de propiedad intelectual.
7
ETIQUETAS NUEVAS EN HTML5
<article> <datalist> <footer> <mark> <rp> <summary> <aside> <details> <header> <meter> <rt> <time> <audio> <embed> <hgroup> <nav> <ruby> <video> <canvas> <figcaption> <keygen> <output> <section> <wbr> <command> <figure> <progress> <source>
8
ETIQUETAS ELIMINADAS DE HTML4
<acronym> <noframes> <applet> <strike> <basefont> <tt> <big> <u> <center> <xmp> <dir> <font> <frame> <frameset>
9
EL DOCTYPE El DOCTYPE, también llamado DTD, sirve para indicar al navegador a qué reglas de escritura obedece el código fuente de la página Html o Xhtml. En ausencia de un doctype el navegador no sabe según qué reglas debe procesar la página. Se conforma con acogerse a reglas genéricas para renderizar a toda costa la página Html. Doctype Antes: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" " "> Ahora: <!DOCTYPE html>
10
ETIQUETA HTML La etiqueta <html> indica al navegador que se trata de un documento Html. La etiqueta <html> puede incluir el atributo lang="es“. Especifica que el documento está en lengua española. Esta información es muy valiosa para los motores de búsqueda como Google y para los programas de síntesis de voz usados por personas con dificultades visuales. Quedaría algo así: <!DOCTYPE html> <html lang="es"> ... </html>
11
EN EL ENCABEZADO En la etiqueta Script cambia de la siguiente manera:
<script type="text/javascript"> …. </script> ó <script type="text/javascript" src="archivo.js"></script> Por: <script> … Ó <script src="archivo"></script>
12
En la etiqueta Style, usada para los css, quedaría de la siguiente manera:
<style type="text/css"> ... </style> Ó <link rel="stylesheet" type="text/css" href="archivo.css"> Por: <style> <link rel="stylesheet" href="archivo.css">
13
LA CODIFICACION DEL DOCUMENTO
El juego de caracteres determina la forma en que los caracteres de un alfabeto se convierten en bytes en un archivo informático (y viceversa). Con HTML 4.0: <meta http-equiv="Content-Type" content="text/html; charset=iso "> Con HTML 5.0: <meta charset="iso ">
14
NUEVA ORGANIZACIÓN DEL SITIO
La etiqueta <header> es para la información de la cabecera (logo, texto introductorio...) <nav> para los menús de navegación <section> y<article> para organizar los contenidos principales,
15
<aside> para los contenidos secundarios, como anotaciones laterales o espacios publicitarios
<footer> para incluir la información a pie de web (año, autor, información legal, etc.).
16
INCORPORAR VIDEO Antes de la llegada de HTML5 dependíamos del uso de complementos instalables, como Flash, QuickTime o Silverlight para poder mostrar contenidos de vídeo. Con HTML5 se resuelve esta necesidad ya que especifica un elemento HTML llamado <video> que funciona de manera nativa en el navegador y se integra con Javascript.
17
Algunos atributos de la etiqueta:
Autoplay: sirve para que el video comience automáticamente. Controls: activa los controles de reproduccion del video. Poster: permite poner una imagen antes de reproducir el video. Una vez comience, la imagen desaparece. Width, Height: permite definir un tamaño para el video Ejemplo: <video src='videos/BigBuck.mp4' controls poster='poster320.png' width='320' height='180'>
18
OTRAS CARACTERISTICAS
Existen otras características importantes, que pueden consultar en las referencias que se encuentran al final, las cuales son mas complejas. Estas son: Drag&Drop Canvas Geolocalización
19
VALIDACIÓN DE HTML5 Las ventajas de un código fuente perfecto y por tanto de la validación son: Comprensión y verificación en profundidad de Html5 por parte de programadores iniciados (y avanzados). Asegurar que la página se mostrará siempre de forma correcta en la mayoría de los navegadores. Una página inválida puede llevar a los navegadores a interpretarla de forma muy distinta. Demostración de su propia capacidad y profesionalidad a la hora de realizar un código de calidad, conforme a los estándares de Html5. Los programas de síntesis vocal y otras ayudas técnicas dirigidas a personas con problemas de accesibilidad se basan en un código válido a la hora de procesar las páginas de la red.
20
Los validadores Html5 (en línea) disponibles son:
El validador de W3C: W3C presenta un validador de código (validator.w3c.org). Lo cual es garantía de calidad. No obstante la validación de Html5 se anuncia todavía en un estado experimental. Destaquemos: Que está en inglés. Que ofrece la validación de un archivo a partir de su dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto. Que es muy potente. Que sus notas y explicaciones son muy técnicas o a veces incluso sibilinas. Que es "la" referencia de los profesionales.
21
El validador de W3Québec
W3Québec es un organismo sin ánimo de lucro cuya labor consiste en promover el conjunto de normas, estándares abiertos y buenas prácticas de la Web y del mundo multimedia. Proporciona un validador: En francés. Con la posibilidad de validar un archivo a partir de su dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto. Las advertencias y errores proporcionados están en francés. Le faltan explicaciones más explícitas para corregir el código enviado. Se trata de una traducción al francés del sitio Web de W3C. No existe una versión española a día de hoy. El validador de W3Québec (
22
El validador validator.nu
El sitio Web validator.nu proporciona, también en estado experimental, un validador de Html5 (html5.validator.nu/). Fue el primero en proporcionar un validador de Html5. Se puede subrayar: Que está en inglés. Que su interfaz es muy sencilla. Que ofrece la posibilidad de validar un archivo a partir de su dirección http, un archivo que esté alojado en su ordenador o código que insertemos en una zona de texto. Que parece de excelente calidad.
Presentaciones similares
