html 5 presente y futuro de la web
DESCRIPTION
HTML 5 es el próximo estándar de sitios web en Internet. La ponencia parte de la historia de Internet para llegar a las implementaciones actuales en los más modernos navegadores de Internet.TRANSCRIPT
HTML5 Presente y futuro de la WebJuan Eladio Sánchez RosasMozilla Perú
Hablemos de estándares web
HTML
• HyperText Markup Language
Lenguaje reconocido universalmente y que permite publicar información de forma
globalglobal
CSS
• Cascading Style Sheets
Lenguaje creado para controlar el aspecto de los documentos en HTML y XHTML
JavaScript
Lenguaje de programación interpretado que se utiliza principalmente para crear
páginas web dinámicas.
Un poco de historia
Los primeros estándares Web
• 1991: HTML (Tags)
• 1994: HTML 2
• 1996: CSS 1 + JavaScript
Lo que utilizamos ahora
• 1997: HTML 4
• 1998: CSS 2
• 2000: XHTML 1
• 2002: Diseño web sin tablas
• 2005: AJAX
<p>Esto es HTML
<p>Esto es XHTML</p>
<div id=”contenedor1”>
¿Todo esto es nuevo para ti?
librosweb.es
Entonces, ¿qué es HTML5?
HTML 5
• Nuevo estándar para el desarrollo de páginas web
• Iniciado por WHATWG
• En desarrollo por World Wide Web Consortium (W3C)
• Ya existen implementaciones preliminares
Esto aún es trabajo en progreso
Ahora sí, qué trae HTML5
Menos atributos innecesarios
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="micodigo.js"></script>
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
Nuevas etiquetas semánticas
<section> <article> <header> <h1>Título de artículo</h1> </header> <section> Contenido de la nota ... </section> </article> <article> .. </article></section>
Nuevas relaciones en enlaces
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" /><link rel="icon" href="/favicon.ico" /><link rel="pingback" href="http://myblog.com/xmlrpc.php"><link rel="prefetch" href="http://myblog.com/main.php">...
Atributos ARIA
• Accessible Rich Internet Applications
Accesibilidad de contenido web dinámico para personas con discapacidades
Atributos ARIA<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1" > <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> </ul> </li></ul>
Nuevos tipos de formularios
<input type=”url”> <input type=”color”> ...
Validaciones
Audio y Video
<audio src="sound.mp3" controls></audio>
<video src="movie.mp4" autoplay controls></video>
Estándares de video
• H.264/AVC
• OGG/Theora
• WebM (Youtube VP8)
Vid.ly
Youtube + HTML5
HTML5Canvas
¿Eso es todo?¡No, HTML5 ahora es más!
HTML5 ahora también incluyeCSS 3
• Selectores
• Espacios de nombres
• Colores
• Fondos
• Transiciones
• Bordes
• Sombras
• Fuentes
HTML5 ahora también incluye
Permite acceder a la ubicación física del usuario.(y mostrar contenido personalizado)
Geolocalización
HTML5 ahora también es
Ejecutar scripts ensegundo planosin bloquear el navegador
Web Workers
HTML5 también es
Expande capacidades de cookies
Almacenar mayor cantidad de información de usuario que puedan ser usadas por el navegador
DOM Storage
Y mucho, mucho más ...
¿Cómo lo pruebo?
Navegadores “Modernos”
• Firefox
• Chrome
• Safari
• Opera
• ¿Internet Explorer 9?
Dispositivos móviles
• Apple iPhone / iPod / iPad
• Android OS
¿Cómo estoy seguro de que mi navegador soporta HTML5?
HTML5 Test
El caso Navegadores antiguos
• Internet Explorer 9 tiene soporte mínimo de HTML5
• ¿Otras versiones?
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Y si no es suficiente: Modernizr
HTML5 Readiness
¿Qué hace Mozilla al respecto?
Firefox 7 (Estable), 9 (Aurora)firefox.com/channel
Firefox Portable (ejecutable desde USB)ir.pe/firefoxportable
Firefox MobileLleva la experiencia de Firefox a todas partes
Dispositivos móviles soportados• Meego
• Android OS
Mozilla Developer Network
Dev Derby
Mozilla Perú
Mozilla Campus Day*
Promover el desarrollo de Internet y la web en nuestro país
Para estudiantes y docentes de universidades e institutos peruanos
Conferencias y talleres sobre tecnologías de vanguardia en Internet
mozilla.pe/mozilla-campus-day
HTML 5Presente y futuro de la Web
Mozilla Perúmozilla.pewww.facebook.com/mozillaperutwitter.com/mozillaperu
Juan Eladio Sánchez Rosasjesanchez(a)mozilla.peblogs.antartec.com/opensourceslideshare.net/juaneladio