HTML5 hoy: Implicancias para desarrolladores y demostraciones
•
0 gostou•691 visualizações
HTML 5 es el nuevo estándar de desarrollo de sitios web. La ponencia parte de las tecnologías actualmente populares para llegar a las implementaciones actuales de HTML 5 en los más modernos navegadores.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a HTML5 hoy: Implicancias para desarrolladores y demostraciones
Semelhante a HTML5 hoy: Implicancias para desarrolladores y demostraciones (20)
Mais de Juan Eladio Sánchez Rosas
Mais de Juan Eladio Sánchez Rosas (20)
HTML5 hoy: Implicancias para desarrolladores y demostraciones
- 1. HTML5 hoy Implicancias para desarrolladores y demostraciones Juan Eladio Sánchez Rosas Mozilla Perú
- 3. HTML y XML (90s) • HyperText Markup Language • eXtensible Markup Language
- 4. XML: Un ejemplo <?xml version="1.0" encoding="UTF-8" ?> <canal> <titulo>Mozilla Perú</titulo> <items> <item> <titulo>Actividades Octubre</titulo> <enlace>http://mozilla.pe/actividades-octubre</enlace> <descripcion><imagen fuente="fotografiaO.jpg" texto="Evento O" />Este mes que pasó hicimos una pausa ...</descripcion> </item> <item> <titulo>Mozilla Campus Day en FESOLI</titulo> <enlace>http://mozilla.pe/mozilla-campus-day-fesoli</enlace> <descripcion><imagen fuente="fotografiaF.jpg" texto="Evento F" />Culminando por este año el evento itinerante ...</descripcion> </item> </items> </canal>
- 5. XHTML 1 (2000) • eXtensible HyperText Markup Language <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mozilla Perú</title> </head> <body> <h1>Mozilla Perú</h1><img src="logo.png" align="left" hspace="10"> <p>Actividades de Mozilla Perú en Octubre 2010 <br>5 de noviembre de 2010 por Juan Eladio. 0 comentarios</p> </body> </html>
- 6. CSS 2 (1998) • Cascading Style Sheets body { margin: 10; padding: 30; width: 100%; font-family: Verdana; font-size: 100%; line-height: 1.125em; color: #282623; background-color: white; } h1 { font-size: 2.125em; } p { line-height:1.909em; }
- 7. Diseño web sin tablas (2002) Enfoque tradicional (sólo HTML) <table><tr><td>Cabecera</td></tr></table> <table><tr><td>Navega</td></tr></table> <table> <tr> <td><!--otra tabla para colocar cuatro filas --></td> <td><!--tabla zona lateral--></td></tr> </table> <table><tr><td>Pie de página</td></tr></table>
- 8. Diseño web sin tablas (2002) Enfoque sin tablas (HTML+CSS) <div id=”cabecera”>Cabecera</div> <div id=”navegacion”>Navegación</div> <div id=”seccion”> <div id=”zona1”>Contenido 1</div> <div id=”zona1”>Contenido 2</div> <!--siguen divs--> </div> <div id=”lateral”>Zona lateral</div> <div id=”piedepagina”>Pie de página</div> En CSS van las posiciones y formatos
- 9. JavaScript function CountWords (this_field) var char_count = this_field.value.length; var fullStr = this_field.value + " "; var cleanedStr = fullStr.replace(/s/g,' '); var splitString = cleanedStr.split(" "); var word_count = 0; for (z=0; z<splitString.length; z++) {if (splitString[z].length > 0) word_count++;} return word_count; }
- 10. AJAX (2005)
- 11. ¿Todo esto es nuevo para ti?
- 13. Ahora si, ¿Qué es HTML5?
- 14. HTML5 • 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
- 15. Ahora sí, qué trae HTML5
- 16. 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" />
- 17. Nuevas etiquetas semánticas <body> <header> <hgroup> <h1>Título de página</h1> <h2>Subtítulo</h2> </hgroup> </header> <nav> <ul> Opción de navegación ... </ul> </nav>
- 18. 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>
- 19. Nuevas etiquetas semánticas <aside> Enlaces relacionados </aside> <footer> Copyright © 2010 </footer> </body>
- 21. 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"> ...
- 22. Nuevas relaciones en enlaces <a rel="archives" href="http://myblog.com/archives">old posts</a> <a rel="external" href="http://notmysite.com">tutorial</a> <a rel="license" href="http://www.apache.org/licenses/LICENSE- 2.0">license</a> <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a> <a rel="tag" href="http://myblog.com/category/games">games posts</a>
- 23. Atributos ARIA • Accessible Rich Internet Applications Accesibilidad de contenido web dinámico para personas con discapacidades
- 24. 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>
- 25. Tipos de campos en formularios <input type="range" min="0" max="50" step="2" value="0" /> <input results="10" type="search" required autofocus /> <input type="text" placeholder="Search history" />
- 26. Tipos de campos en formularios <style> :invalid { background-color: red; } </style> <input type="color" /> <input type="number" /> <input type="url" /> <input type="email" required /> <input type="tel" />
- 27. Tipos de campos en formularios <input type="date" /> <input type="month" /> <input type="week" /> <input type="datetime" /> <input type="tel" />
- 28. HTML5 Dibujar elementos gráficos personalizados Canvas
- 29. Audio y Video <audio src="sound.ogg" controls></audio> <script>document.getElementById("audio").muted = false;</script> <video src="movie.ogv" autoplay controls></video> <script>document.getElementById("video").play();</script>
- 30. Estándares de video • H.264/AVC/MPEG-4 • OGG/Theora • WebM (Youtube VP8)
- 31. ¿Cómo lo pruebo?
- 32. Navegadores “Modernos” • Firefox 3.6/4.0 Beta • Chrome 7.0/8.0 Beta • Safari 5.0 • Opera 10.5
- 33. Dispositivos móviles • Apple iPhone / iPod / iPad • Android OS • Opera Mini
- 34. ¿Cómo estoy seguro de que mi navegador soporta HTML5?
- 36. El caso Internet Explorer • Internet Explorer 9 (beta) tiene soporte de HTML5 • Mientras tanto ... <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> //CSS PIE (www.csspie.com) .componente { // lineas de atributos CSS3 behavior: url(path/to/PIE.htc); }
- 37. Y si no es suficiente ... • Modernizr www.modernizr.com
- 38. Demos
- 39. Demos: Aplicaciones interactivas • deviantART Muro muro.deviantart.com • Cloud Canvas www.cloud-canvas.com • HTML 5 Canvas & Audio Experiment 9elements.com/io/projects/html5/canvas/ • Galactic Inbox: HTML 5 Game www.monocubed.com/?p=549
- 40. Demos: Colecciones • HTML5 Gallery | A showcase of sites using HTML5 markup html5gallery.com • HTML5 Demos and Examples html5demos.com • HTML5Rocks – Studio studio.html5rocks.com
- 41. Notas al pie www.mozilla.com/en-US/firefox/beta/technology/ Firefox 4 Beta Technology
- 42. HTML5 hoy Implicancias para desarrolladores y demostraciones Mozilla Perú mozilla.pe www.facebook.com/mozillaperu groups.google.com/group/mozilla-peru Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe blogs.antartec.com/opensource slideshare.net/juaneladio
Notas do Editor
- HTML5, features of which initially began arriving in Gecko 1.8.1, is the newest version of the HTML standard. It offers new features to provide not only rich media support but also enhanced support for creating web applications that can interact with the user, his or her local data, and servers more easily and effectively.