HTML5 Nuevas Etiquetas Semanticas

  • 13,662 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
13,662
On Slideshare
0
From Embeds
0
Number of Embeds
25

Actions

Shares
Downloads
296
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5: Nuevas etiquetas semánticasJuan Eladio Sánchez Rosas
  • 2. ObjetivoSemantics
  • 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. AntecedentesSemantics
  • 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ódigoSemantics
  • 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:30comenzamos</time>
  • 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. Semántica a nivel de texto● Texto resaltadoMozilla Campus Day lleva <mark>tecnologíasweb de vanguardia a estudiantes</mark> deuniversidades 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 porMozilla: 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) *
  • 46. AplicaciónSemantics
  • 47. Demostración● Awesome HTML5 Dashboard (Mozillas Web O Wonder)
  • 48. ¿Cómo empiezo a usarlo?● HTML5 Boilerplate
  • 49. ¿Y si uso navegadores antiguos?● Modernizr
  • 50. ReferenciasSemantics
  • 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. 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. Tecnologías HTML5SemanticsOffline & StorageDevice AccessConnectivityMultimedia3D, Graphics & EffectsPerformance & IntegrationCSS3 Styling
  • 54. NuevasEtiquetas de HTML5Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe /mozillaperu