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
![Page 1: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/1.jpg)
HTML5 Presente y futuro de la WebJuan Eladio Sánchez RosasMozilla Perú
![Page 2: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/2.jpg)
Hablemos de estándares web
![Page 3: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/3.jpg)
HTML
• HyperText Markup Language
Lenguaje reconocido universalmente y que permite publicar información de forma
globalglobal
![Page 4: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/4.jpg)
CSS
• Cascading Style Sheets
Lenguaje creado para controlar el aspecto de los documentos en HTML y XHTML
![Page 5: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/5.jpg)
JavaScript
Lenguaje de programación interpretado que se utiliza principalmente para crear
páginas web dinámicas.
![Page 6: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/6.jpg)
Un poco de historia
![Page 7: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/7.jpg)
Los primeros estándares Web
• 1991: HTML (Tags)
• 1994: HTML 2
• 1996: CSS 1 + JavaScript
![Page 8: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/8.jpg)
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”>
![Page 9: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/9.jpg)
¿Todo esto es nuevo para ti?
![Page 10: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/10.jpg)
librosweb.es
![Page 11: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/11.jpg)
Entonces, ¿qué es HTML5?
![Page 12: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/12.jpg)
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
![Page 13: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/13.jpg)
Esto aún es trabajo en progreso
![Page 14: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/14.jpg)
Ahora sí, qué trae HTML5
![Page 15: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/15.jpg)
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" />
![Page 16: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/16.jpg)
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>
![Page 17: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/17.jpg)
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">...
![Page 18: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/18.jpg)
Atributos ARIA
• Accessible Rich Internet Applications
Accesibilidad de contenido web dinámico para personas con discapacidades
![Page 19: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/19.jpg)
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>
![Page 20: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/20.jpg)
Nuevos tipos de formularios
<input type=”url”> <input type=”color”> ...
![Page 21: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/21.jpg)
Validaciones
![Page 22: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/22.jpg)
Audio y Video
<audio src="sound.mp3" controls></audio>
<video src="movie.mp4" autoplay controls></video>
![Page 23: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/23.jpg)
Estándares de video
• H.264/AVC
• OGG/Theora
• WebM (Youtube VP8)
![Page 24: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/24.jpg)
Vid.ly
![Page 25: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/25.jpg)
Youtube + HTML5
![Page 26: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/26.jpg)
HTML5Canvas
![Page 27: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/27.jpg)
¿Eso es todo?¡No, HTML5 ahora es más!
![Page 28: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/28.jpg)
HTML5 ahora también incluyeCSS 3
• Selectores
• Espacios de nombres
• Colores
• Fondos
• Transiciones
• Bordes
• Sombras
• Fuentes
![Page 29: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/29.jpg)
HTML5 ahora también incluye
Permite acceder a la ubicación física del usuario.(y mostrar contenido personalizado)
Geolocalización
![Page 30: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/30.jpg)
HTML5 ahora también es
Ejecutar scripts ensegundo planosin bloquear el navegador
Web Workers
![Page 31: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/31.jpg)
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
![Page 32: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/32.jpg)
Y mucho, mucho más ...
![Page 33: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/33.jpg)
¿Cómo lo pruebo?
![Page 34: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/34.jpg)
Navegadores “Modernos”
• Firefox
• Chrome
• Safari
• Opera
• ¿Internet Explorer 9?
![Page 35: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/35.jpg)
Dispositivos móviles
• Apple iPhone / iPod / iPad
• Android OS
![Page 36: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/36.jpg)
¿Cómo estoy seguro de que mi navegador soporta HTML5?
![Page 37: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/37.jpg)
HTML5 Test
![Page 38: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/38.jpg)
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]-->
![Page 39: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/39.jpg)
Y si no es suficiente: Modernizr
![Page 40: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/40.jpg)
HTML5 Readiness
![Page 41: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/41.jpg)
¿Qué hace Mozilla al respecto?
![Page 42: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/42.jpg)
Firefox 7 (Estable), 9 (Aurora)firefox.com/channel
Firefox Portable (ejecutable desde USB)ir.pe/firefoxportable
![Page 43: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/43.jpg)
Firefox MobileLleva la experiencia de Firefox a todas partes
![Page 44: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/44.jpg)
Dispositivos móviles soportados• Meego
• Android OS
![Page 45: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/45.jpg)
Mozilla Developer Network
![Page 46: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/46.jpg)
Dev Derby
![Page 47: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/47.jpg)
Mozilla Perú
![Page 48: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/48.jpg)
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
![Page 49: Html 5 presente y futuro de la web](https://reader036.vdocuments.mx/reader036/viewer/2022062615/5482c07ab47959ce0c8b485b/html5/thumbnails/49.jpg)
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