HTML5 hoy: Implicancias para desarrolladores y demostraciones

1,628 views

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,628
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • HTML5 hoy: Implicancias para desarrolladores y demostraciones

    1. 1. HTML5 hoy Implicancias para desarrolladores y demostraciones Juan Eladio Sánchez Rosas Mozilla Perú
    2. 2. Estándares web, hoy
    3. 3. HTML y XML (90s) • HyperText Markup Language • eXtensible Markup Language
    4. 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. 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. 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. 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. 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. 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. 10. AJAX (2005)
    11. 11. ¿Todo esto es nuevo para ti?
    12. 12. ¡Aún tienes esperanza! librosweb.es
    13. 13. Ahora si, ¿Qué es HTML5?
    14. 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. 15. Ahora sí, qué trae HTML5
    16. 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. 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. 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. 19. Nuevas etiquetas semánticas <aside> Enlaces relacionados </aside> <footer> Copyright © 2010 </footer> </body>
    20. 20. Nuevas etiquetas semánticas <time> <details> <figure> <figcaption> <mark> <wbr>
    21. 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. 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. 23. Atributos ARIA • Accessible Rich Internet Applications Accesibilidad de contenido web dinámico para personas con discapacidades
    24. 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. 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. 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. 27. Tipos de campos en formularios <input type="date" /> <input type="month" /> <input type="week" /> <input type="datetime" /> <input type="tel" />
    28. 28. HTML5 Dibujar elementos gráficos personalizados Canvas
    29. 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. 30. Estándares de video • H.264/AVC/MPEG-4 • OGG/Theora • WebM (Youtube VP8)
    31. 31. ¿Cómo lo pruebo?
    32. 32. Navegadores “Modernos” • Firefox 3.6/4.0 Beta • Chrome 7.0/8.0 Beta • Safari 5.0 • Opera 10.5
    33. 33. Dispositivos móviles • Apple iPhone / iPod / iPad • Android OS • Opera Mini
    34. 34. ¿Cómo estoy seguro de que mi navegador soporta HTML5?
    35. 35. HTML5 Test • www.html5test.com
    36. 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. 37. Y si no es suficiente ... • Modernizr www.modernizr.com
    38. 38. Demos
    39. 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. 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. 41. Notas al pie www.mozilla.com/en-US/firefox/beta/technology/ Firefox 4 Beta Technology
    42. 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

    ×