HTML5 Nuevas Etiquetas Semanticas
15 recomendaciones12,723 vistas
El documento presenta y describe las nuevas etiquetas semánticas de HTML5, así como los antecedentes que llevaron a su creación en contraste con XHTML 2. Se detallan las nuevas etiquetas, su uso práctico en código, y se clasifican en categorías como semántica de texto, formularios, secciones de documento y elementos interactivos. Además, se proporcionan recursos y referencias para facilitar la implementación de HTML5.
HTML5 Nuevas Etiquetas Semanticas
- 1. HTML5: Nuevas etiquetas semánticas Juan Eladio Sánchez Rosas
- 3. Objetivo de la sesión ● Presentar y describir las nuevas etiquetas del estándar HTML5 ● Citar los antecedentes que derivaron su creación ● Citar las etiquetas semánticas nuevas de HTML5 ● Demostrar su uso a través de código para una aplicación
- 5. HTML 4 / XHTML 1 ● Ambos son estándares para declarar estructura de un sitio web ● XHTML es una versión de HTML compatible con XML, un lenguaje de marcado más genérico y ordenado ● Creados hace más de diez años
- 6. Estructura de Etiquetas <elemento atributo1=”valor1”> Contenido </elemento>
- 7. Propuesta teórica ... ● W3C esperaba que el siguiente lenguaje web sería XHTML 2 ● Redefinía muchas características de la anterior versión ● Era más un intento académico que técnico
- 8. ... vs Realidad ● Un grupo independiente observó las necesidades actuales de los desarrolladores ● Construyó las bases de lo que hoy llamamos HTML5 ● Provocó la cancelación de XHTML 2
- 9. ¿Qué son las nuevas etiquetas de HTML5? Semantics
- 10. Etiquetas de HTML ● Los elementos, atributos y valores de atributos tienen un significado. <img src=”http://mozilla.pe/imagen/mcd-idat.png”>
- 11. Nuevas etiquetas ● HTML5 define nuevos elementos y atributos Mejora la semántica de un documento ¿...?
- 12. Código Semantics
- 13. Nuevas (y viejas) etiquetas HTML5 ● Periodic Table of the Elements
- 14. Clasificación de etiquetas ● Elemento raíz ● Metadatos e inclusión de scripts <!DOCTYPE HTML> <html>
- 15. Elemento raiz, metadatos y scripts <html manifest=”archivo”> ● No hay nuevos <head> elementos <title> ● PERO SI <meta charset="UTF-8"> optimizaciones en <base> atributos <link sizes=”any”> <style type="text/css" ..> <script type="text/javascript" ..> <noscript>
- 16. Clasificación de etiquetas ● Semántica a nivel de texto
- 17. Semántica a nivel de texto ● Fechas <time>2009-07-13</time> <time datetime="2011-03-05T09:30-05:00">9:30 comenzamos</time>
- 18. Semántica a nivel de texto ● Cambios de línea Este es un cambio de línea<br>obligatorio. Este es un cambio de línea <wbr>de acuerdo al ancho de la pantalla.
- 19. Semántica a nivel de texto ● Texto resaltado Mozilla Campus Day lleva <mark>tecnologías web de vanguardia a estudiantes</mark> de universidades e institutos.
- 20. Clasificación de etiquetas ● Agrupamiento de contenido
- 21. Agrupamiento de contenido ● Unidades de contenido <figure> <img src="firefox.png" alt="Firefox browser"> <img src="thunderbird.png" alt="Thunderbird e-mail client"> <img src="sunbird.png" alt="Sunbird"> <figcaption>Logotipos de tres programas desarrollados por Mozilla: Firefox,Thunderbird y Sunbird</figcaption> </figure> Logotipos de tres programas desarrollados por M Firefox,Thunderbird y Sunbird
- 22. Clasificación de etiquetas ● Formularios
- 23. Formularios: nuevos elementos ● Lista de datos <input list="hamburguesas" /> <datalist id="hamburguesas"> <option value="Bembos"> <option value="Mc Donalds"> <option value="Burger King"> <option value="Tío Bigote"> </datalist>
- 24. Formularios: nuevos elementos ● Generación de llaves públicas y privadas entre servidor y navegador <keygen name="seguridad" />
- 25. Formularios: nuevos elementos ● Salida de ejecución de un script <output id="result" onforminput="resultadoCalculo()"></output>
- 26. Formularios: nuevos atributos ● Formularios ● autocomplete ● novalidate <form action="demo.php" method="get" autocomplete="on" novalidate="novalidate"> <input type="text" name="nombre" /><br /> <input type="text" name="apellido" /><br /> <input type="email" name="email" autocomplete="off" />
- 27. Formularios: nuevos atributos ● Entrada de datos (input) ● autocomplete ● autofocus <form action="demo.php" method="get"> <input type="text" name="nombre" autocomplete="on" /><br /> <input type="text" name="apellido" /><br /> <input type="email" name="email" autofocus="autofocus" />
- 28. Formularios: nuevos atributos ● Entrada de datos (input) ● form ● Sobreescritura de form – formaction – formenctype – formmethod – formnovalidate – formtarget
- 29. Formularios: nuevos atributos ● Entrada de datos (input) ● height / width (asociado a imágenes) ● list (asociado a datalist)
- 30. Formularios: nuevos atributos ● Entrada de datos (input) ● min, max, step (asociados a números y fechas) ● multiple (seleccionar múltiples elementos)
- 31. Formularios: nuevos atributos ● Entrada de datos (input) ● pattern (regexp) ● placeholder ● required
- 32. Formularios: tipos de entradas ● Tipos ● email ● url <input type="email" name="usuario_email" /> <input type="url" name="usuario_web" />
- 33. Formularios: tipos de entradas ● Tipos ● number ● range <input type="number" min="1" max="10" name="puntos" /> <input type="range" min="1" max="10" name="puntos2" />
- 34. Formularios: tipos de entradas ● Tipos: Date Pickers (Selectores de fecha) ● date ● month ● week ● time ● datetime ● datetime-local <input type="date" name="fecha_viaje" />
- 35. Formularios: tipos de entradas ● Tipos: ● search <input type="search" name="palabra_clave" />
- 36. Formularios: tipos de entradas ● Tipos: ● color <input type="color" name="color_fondo" />
- 37. Clasificación de etiquetas ● Secciones de documento
- 38. Secciones de documento ● Cabeceras y navegación <header> <hgroup> <h1>Título de página</h1> <h2>Subtítulo</h2> </hgroup> </header> <nav> <ul>Opción de navegación ... </ul> </nav>
- 39. Secciones de documento ● Secciones y artículos <section> <article> <header><h1>Título de artículo</h1> </header> <section> Contenido de la nota ... </section> </article> </section>
- 40. Secciones de documento ● Lateral y pie de página <aside> Enlaces relacionados </aside> <footer> Copyright © 2010 </footer>
- 41. Clasificación de etiquetas ● Datos de tablas
- 42. Datos de tablas ● Columnas <table> <colgroup span="2" style="background-color:red" /> <tr> <th>Código</th> <th>Nombres</th> <th>Aceptado</th> </tr> <tr> <td>81014</td> <td>Juan Eladio Sánchez</td> <td>SI</td> </tr>
- 43. Clasificación de etiquetas ● Elementos interactivos
- 44. Elementos interactivos ● Elementos interactivos ● menu ● command ● summary ● details
- 45. Clasificación de etiquetas ● Contenido incrustado (embebido) *
- 47. Demostración ● Awesome HTML5 Dashboard (Mozilla's Web O' Wonder)
- 48. ¿Cómo empiezo a usarlo? ● HTML5 Boilerplate
- 49. ¿Y si uso navegadores antiguos? ● Modernizr
- 51. Referencias bibliográficas ● Periodic Table of the Elements http://joshduck.com/periodic-table.html ● W3C Schools: HTML5 Tutorial http://www.w3schools.com/html5/ ● Awesome HTML5 Dashboard https://mozillademos.org/demos/dashboard /demo.html ● Mozilla Developer Network https://developer.mozilla.org/es/HTML/HTML5 ● HTML5 Doctor - http://www.html5doctor.com/
- 52. Recursos Código: ● Modernizr - http://www.modernizr.com/ ● HTML5 Boilerplate - http://html5boilerplate.com/ ¿Funcionará?: ● HTML5 Test - http://www.html5test.com/ ● When can I use? - http://caniuse.com/#cats=HTML5
- 53. Tecnologías HTML5 Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Styling
- 54. Nuevas Etiquetas de HTML5 Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe /mozillaperu