HTML5 Nuevas Etiquetas Semanticas

15,896 views

Published on

HTML5 Nuevas Etiquetas Semánticas. Se presentan y describen las nuevas etiquetas del estándar HTML5. Aunque se repasan la mayoría de ellas se hace un mayor énfasis en etiquetas y atributos para formularios.

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,896
On SlideShare
0
From Embeds
0
Number of Embeds
1,574
Actions
Shares
0
Downloads
404
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

HTML5 Nuevas Etiquetas Semanticas

  1. 1. HTML5: Nuevas etiquetas semánticasJuan Eladio Sánchez Rosas
  2. 2. ObjetivoSemantics
  3. 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
  4. 4. AntecedentesSemantics
  5. 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. 6. Estructura de Etiquetas<elemento atributo1=”valor1”> Contenido </elemento>
  7. 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. 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. 9. ¿Qué son las nuevas etiquetas de HTML5?Semantics
  10. 10. Etiquetas de HTML● Los elementos, atributos y valores de atributos tienen un significado. <img src=”http://mozilla.pe/imagen/mcd-idat.png”>
  11. 11. Nuevas etiquetas● HTML5 define nuevos elementos y atributos Mejora la semántica de un documento ¿...?
  12. 12. CódigoSemantics
  13. 13. Nuevas (y viejas) etiquetas HTML5● Periodic Table of the Elements
  14. 14. Clasificación de etiquetas● Elemento raíz● Metadatos e inclusión de scripts <!DOCTYPE HTML> <html>
  15. 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. 16. Clasificación de etiquetas● Semántica a nivel de texto
  17. 17. Semántica a nivel de texto● Fechas<time>2009-07-13</time><time datetime="2011-03-05T09:30-05:00">9:30comenzamos</time>
  18. 18. Semántica a nivel de texto● Cambios de líneaEste es un cambio de línea<br>obligatorio.Este es un cambio de línea <wbr>de acuerdo alancho de la pantalla.
  19. 19. Semántica a nivel de texto● Texto resaltadoMozilla Campus Day lleva <mark>tecnologíasweb de vanguardia a estudiantes</mark> deuniversidades e institutos.
  20. 20. Clasificación de etiquetas● Agrupamiento de contenido
  21. 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 porMozilla: Firefox,Thunderbird y Sunbird</figcaption></figure> Logotipos de tres programas desarrollados por M Firefox,Thunderbird y Sunbird
  22. 22. Clasificación de etiquetas● Formularios
  23. 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. 24. Formularios: nuevos elementos● Generación de llaves públicas y privadas entre servidor y navegador<keygen name="seguridad" />
  25. 25. Formularios: nuevos elementos● Salida de ejecución de un script<output id="result"onforminput="resultadoCalculo()"></output>
  26. 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. 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. 28. Formularios: nuevos atributos● Entrada de datos (input) ● form ● Sobreescritura de form – formaction – formenctype – formmethod – formnovalidate – formtarget
  29. 29. Formularios: nuevos atributos● Entrada de datos (input) ● height / width (asociado a imágenes) ● list (asociado a datalist)
  30. 30. Formularios: nuevos atributos● Entrada de datos (input) ● min, max, step (asociados a números y fechas) ● multiple (seleccionar múltiples elementos)
  31. 31. Formularios: nuevos atributos● Entrada de datos (input) ● pattern (regexp) ● placeholder ● required
  32. 32. Formularios: tipos de entradas● Tipos ● email ● url<input type="email"name="usuario_email" /><input type="url"name="usuario_web" />
  33. 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. 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. 35. Formularios: tipos de entradas● Tipos: ● search<input type="search" name="palabra_clave" />
  36. 36. Formularios: tipos de entradas● Tipos: ● color<input type="color" name="color_fondo" />
  37. 37. Clasificación de etiquetas● Secciones de documento
  38. 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. 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. 40. Secciones de documento● Lateral y pie de página<aside> Enlaces relacionados </aside> <footer> Copyright © 2010 </footer>
  41. 41. Clasificación de etiquetas● Datos de tablas
  42. 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. 43. Clasificación de etiquetas● Elementos interactivos
  44. 44. Elementos interactivos● Elementos interactivos ● menu ● command ● summary ● details
  45. 45. Clasificación de etiquetas● Contenido incrustado (embebido) *
  46. 46. AplicaciónSemantics
  47. 47. Demostración● Awesome HTML5 Dashboard (Mozillas Web O Wonder)
  48. 48. ¿Cómo empiezo a usarlo?● HTML5 Boilerplate
  49. 49. ¿Y si uso navegadores antiguos?● Modernizr
  50. 50. ReferenciasSemantics
  51. 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. 52. RecursosCó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. 53. Tecnologías HTML5SemanticsOffline & StorageDevice AccessConnectivityMultimedia3D, Graphics & EffectsPerformance & IntegrationCSS3 Styling
  54. 54. NuevasEtiquetas de HTML5Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe /mozillaperu

×