Descargado 40 veces
Subido porUDECI
Seminario html5
HTML5 introduce nuevas etiquetas semánticas como <header>, <nav>, <article> y <section> para mejorar la estructura y accesibilidad de los documentos web. También añade nuevos tipos de entrada de formularios como date, email y color. HTML5 ofrece características avanzadas como almacenamiento local, gráficos 2D/3D, multimedia y geolocalización.
Seminario html5
- 2.
- 3. Objetivo de laSesió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.
- 5.
- 6.
- 10. HTML4 / XHTML1 •Ambos 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 10 años.
- 11. Estructura de Etiquetas <elementoatributo1=“valor1”> Contenido </elemento>
- 12. Propuesta Teórica • LaW3C esperaba que el siguiente lenguaje web sería XHTML2. • Redefinía muchas características de la anterior versión. • Era más un intento académico que técnico.
- 13. … propuesta VSla realidad • Un grupo independiente de programadores observaron las necesidades actuales de los desarrolladores. • Construyó las bases de lo que hoy llamamos HTML5. • Provocó la cancelación de XHTML2.
- 14.
- 18.
- 19.
- 20.
- 21.
- 22. ¿Qué son las nuevas etiquetasde HTML5
- 23. Etiquetas de HTML •Los elementos, atributos y valores de atributos tienen un significado. <img src=“http://www.udeciperu.com/images/html5.png”>
- 24. Nuevas etiquetas • HTML5define nuevos elementos y atributos. ¿Mejora la semántica de un documento ?
- 25.
- 26. Nuevas (y viejas)etiquetas HTML5 • Periodic Table of the Elements.
- 27. Clasificación de Etiquetas •Elemento Raíz • Metadatos e inclusión de Scripts.
- 28. HTML5: Semantics: Nuevas etiquetas <header> <hgroup> <h1>Títulode página</h1> <h2>Subtítulo</h2> </hgroup> </header> <nav> <ul>Opción de navegación ... </ul> </nav>
- 29. Menos atributos innecesarios <!DOCTYPEhtml 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" />
- 30.
- 31.
- 32.
- 33. Local Storage • Paraalmacenar grandes cantidades de datos en el lado del Cliente (navegador). • Usos: • Descargar información usada recurrentemente • Almacenar la interfaz de un sitio web
- 34. Indexed DB • Paraalmacenar datos estructurados en llaves y valores. • NO es una base de datos relacional • Es un almacén de objetos, pero con funcionalidades de búsqueda y transacciones
- 35.
- 36. Geolocation API • Unsitio te pregunta si quieres compartir tu ubicación • Recopila información sobre puntos de acceso inalámbricos cercanos y la IP de tu PC • Envía información a Google Location Services, quien intenta determinar tu ubicación
- 37.
- 38.
- 39. Web Sockets • Unatécnica de conexión • Forma estándar de conexión Web: • Una petición, una respuesta • Web Sockets: • Una petición, el servidor mantiene una conexión • Usos: • Reutilización de conexiones
- 40.
- 41. HTML5: Multimedia: Audioy video <video src="movie.ogv" poster=”poster.jpg” autoplay loop controls></video>
- 42.
- 43. HTML5: 3D, Graphics...: SVG • Formato vectorial • Basado en XML
- 44. HTML5: 3D, Graphics...: Canvas • Nueva etiqueta HTML • Contenido completado por JavaScript • Permite generar gráficos 2D, juegos, animaciones y composición de imágenes
- 45. HTML5: 3D, Graphics...: WebGL • Tecnología para que el navegador pueda accederse a funcionalidades de aceleración gráfica desde el navegador • Basado en JavaScript y OpenGL
- 46.
- 47. HTML5: 3D, Graphics& Effects ¿HTML5 es el fin de Flash?
- 48. HTML5: 3D, Graphics... ¿y Flash? • Google • Swiffy • Adobe • Wallaby • Edge • Muse
- 49.
- 50. • Web Workers •XMLHttpRequest 2
- 51.
- 52. HTML5: CSS3 Styling •CSS3 • Código más simple para estilos • Ahorra tiempo y trabajo
- 53.
- 54. Elementos Raíz, Metadatosy Scripts • <html manifest=“archivo”> • <head> • <title> • <meta charset=“UTF-8”> • <base> • <link sizes=“any”> • <style type=“text/css”> • <script tipe=“text/javascript”> • <noscript> • No hay nuevos elementos. • PERO sí Optimizaciones en los atributos.
- 55. Clasificación de Etiquetas •Semántica a nivel de texto.
- 56. Semántica a nivelde texto • Fechas <time> 2014-06-28</time> <time datetime=“2014-06-28T08:00-14:00">9:30 Comenzamos </time>
- 57. Semántica a nivelde 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.
- 58. Semántica a nivelde texto • Texto resaltado La empresa UDECI lleva <mark> tecnologías web de vanguardia a estudiantes </mark> de universidades, institutos, escuelas y todo público en general. La empresa UDECI lleva tecnologías web de vanguardia a estudiantes de universidades, institutos, escuelas y todo público en general.
- 59. Clasificación de Etiquetas Agrupamientode 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 Mozilla: Firefox,Thunderbird y Sunbird
- 60. Clasificación de Etiquetas 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>
- 61. Clasificación de Etiquetas Formularios:Nuevos Elementos • Generación de llaves públicas y privadas entre Servidor y Navegador <keygen name=“seguridad”/>
- 62. Formularios: Nuevos Elementos •Salida de ejecución de un script. <output id="result" onforminput="resultadoCalculo()"></output>
- 63. 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" />
- 64. 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" />
- 65. • Entrada dedatos (input) • form • Sobreescritura de form Formaction Formenctype Formmethod Formnovalidate Formtarget
- 66. Formularios: Nuevos Atributos •Entrada de datos (input) • height / width (asociado a imágenes) • list (asociado a datalist)
- 67. Formularios: Nuevos Atributos •Entrada de datos (input) • min, max, step (asociados a números y fechas) • multiple (seleccionar múltiples elementos)
- 68. Formularios: Nuevos Atributos •Entrada de datos (input) • pattern (regexp) • placeholder • required
- 69. Formularios: Tipos deEntrada • Tipos • email • url <input type="email" name="usuario_email" /> <input type="url" name="usuario_web" />
- 70. Formularios: Tipos deEntrada • Tipos • number • range <input type="number" min="1" max="10" name="puntos" /> <input type="range" min="1" max="10" name="puntos2" />
- 71. Formularios: tipos deentradas • Tipos: Date Pickers (Selectores de fecha) • date • month • week • time • datetime • datetime-local <input type="date" name="fecha_viaje" />
- 72. Formularios: tipos deentradas • Tipos: • search <input type="search" name="palabra_clave" />
- 73. Formularios: tipos deentradas • Tipos: • color <input type="color" name="color_fondo" />
- 74. Clasificación del Documento •Secciones de documento
- 75. Secciones del 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>
- 76. Secciones del Documento •Secciones y artículos <section> <article> <header><h1>Título de artículo</h1> </header> <section> Contenido de la nota ... </section> </article> </section>
- 77. Secciones del Documento •Lateral y pie de página <aside> Enlaces relacionados </aside> <footer> Copyright © 2014 </footer>
- 78. Clasificación de etiquetas •Datos de tablas
- 79. 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>
- 80. Clasificación de etiquetas •Elementos interactivos
- 81.
- 82. Elementos Interactivos • Elementosinteractivos • menu • command • summary • details
- 83. Clasificación de etiquetas •Contenido incrustado (embebido)
- 84.
- 85. Demostración • Awesome HTML5 Dashboard (Mozilla'sWeb O' Wonder)
- 87. ¿Y si usonavegadores antiguos? • Modernizr
- 88.
- 89. Referencias webgráficas • PeriodicTable 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/
- 90. 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
- 91.