Proyecto de Topicos II - HTML5

1,746 views

Published on

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,746
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
117
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Proyecto de Topicos II - HTML5

  1. 1. Curso: Profesor: Alumna: Tópicos Especiales en Ingeniería II Ing. Frano Capeta Mondoñedo Salcedo Rosas Joselyn Karina UNIVERSIDAD NACIONAL FEDERICO VILLARREAL Facultad de Ingeniería Industrial y de Sistemas
  2. 2. 1. INTRODUCCIÓN El nuevo HTML5 intenta adaptarse al nuevo escenario y presenta elementos para desarrollar páginas dándole un valor especial a la semántica. HIPERTEXT MARKUP LANGUAGE
  3. 3. 2. UN POCO DE HISTORIA… HTML 4 HTML5 XHTML XHTML 2 1999 2000 2008 Hoy 2022 HTML 1 HTML 2 1991 Del IETF al W3C: El camino hacia HTML 4 XHTML 1: HTML como XML XHTML 2: Oh, no lo tomaremos! El cisma: WHATWG De las aplicaciones web 1.0 a HTML 5 Reunificación XHTML ha muerto: Larga vida a su sintaxis! El cronograma de HTML5 HTML, sus inicios
  4. 4. 3. ¿QUE ES HTML 5?  HTML 5 no es simplemente una nueva versión del lenguaje de marcación HTML, sino una agrupación de diversas especificaciones concernientes al desarrollo web.  Es decir, HTML 5 no se limita sólo a crear nuevas etiquetas, atributos y eliminar aquellas marcas que están en desuso o se utilizan inadecuadamente, sino que va mucho más allá.
  5. 5. 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación 4. NOVEDADES DE HTML5 HTML5 incluye novedades significativas en diversos ámbitos. 2 Estructura del cuerpo 1 El Nuevo Doctype
  6. 6. 1 El nuevo doctype 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 4. NOVEDADES DE HTML5 2 Estructura del cuerpo
  7. 7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <!DOCTYPE html> :) EL NUEVO DOCTYPE
  8. 8. 2 Estructura del cuerpo 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 4. NOVEDADES DE HTML5 1 El nuevo doctype
  9. 9. <div id=“header”> <div id=“nav”> <div id=“footer”> <div class=“article”> <div id=“sidebar”> <div class=“section”> <header> <nav> <footer> <article> <article> <section> NUEVOS ELEMENTOS ESTRUCTURALES
  10. 10. <header> <nav> <section> <article> <aside> <footer> NUEVOS ELEMENTOS ESTRUCTURALES
  11. 11.  Representa la cabecera de un documento o sección. <header> <header id="pageheader"> <h1><a href="http://catcubed.com" title="web design, online health care, art, brains, minds, and inbetween"> <img src="http://catcubed.com/wp-content/uploads/2009/11/logo-hover.png" style="margin-top:0px;" alt="CatCubed" /></a></h1> </header> NUEVOS ELEMENTOS ESTRUCTURALES
  12. 12.  Representa una sección del documento que contiene navegación. <nav> <nav id="mainnav"> <li class="first"><a id="nav-home" href="http://catcubed.com">Cat Cubed</a></li> <li><a id="nav-art" href="/art/">art</a></li> <li><a id="nav-code" href="/code/">code</a></li> <li><a id="nav-design" href="/design/">design</a></li> <li class="last"><a id="nav-all" href="http://catcubed.com">Cat Cubed (all of the above)</a></li> </nav> NUEVOS ELEMENTOS ESTRUCTURALES
  13. 13.  Representa una sección del documento. Junto con h1, h2,…, h6 indica la estructura del documento. <section> <section id="sidebar_in"> <h2>Colin Fahrion</h2> <div class="textwidget"> <li><a href="/about/">about me</a></li> <li><a href="http://catcubed.com/contact/">contact me</a></li> <h3>Social Links</h3> <li><a href="http://twitter.com/catcubed">twitter</a></li> … <li><a href="http://www.last.fm/user/headlouse">last.fm</a></li></div> </section> NUEVOS ELEMENTOS ESTRUCTURALES
  14. 14.  Representa una pieza de contenido independiente dentro de un documento. <article> <article class="post"> <header><h1><a href="http://catcubed.com/2010/06/28/quick-review-of- imovie-for-iphone/" rel="bookmark" title="Quick Review of iMovie for iPhone">Quick Review of iMovie for iPhone</a></h1></header> <div class="content"> <p>Over the weekend I made my first movie using my new iPhone 4. All video and photos were shot during the load up of the Dismal art project with my iPhone 4 and then edited on the BART ride home from Oakland into the short video you see below.</p> </div> … </article> NUEVOS ELEMENTOS ESTRUCTURALES
  15. 15.  Representa una pieza de contenido que esta menos relacionada con el resto de la página. <aside> <aside class="related-posts"> <h1>Related posts:</h1> <li><a href='http://catcubed.com/2010/06/09/heathen/' rel='bookmark' title='Permanent Link: Heathen Stomp was a Rip Roaring Good Time!'>Heathen Stomp was a Rip Roaring Good Time!</a></li> <li><a href='http://catcubed.com/2008/08/25/balsa-man/' rel='bookmark' title='Permanent Link: Balsa Man!'>Balsa Man!</a></li> <li><a href='http://catcubed.com/2008/01/26/a-gorey-begin/' rel='bookmark' title='Permanent Link: A Gorey Begin'>A Gorey Begin</a></li> </aside> NUEVOS ELEMENTOS ESTRUCTURALES
  16. 16.  Representa el pie de una sección y puede contener información sobre el autor, copyright, etc. <footer> <footer class="post-meta"> <p class="tags">TAGS: <a href="http://catcubed.com/tag/art/" rel="tag">art</a>, … <a href="http://catcubed.com/tag/whiskey/" rel="tag">whiskey</a></p> <p class="comments"> <a href="http://catcubed.com/2010/06/01/come-on-down-for-the-heathen- stomp-june-5th/#comments">comments (0)</a></p> </footer> NUEVOS ELEMENTOS ESTRUCTURALES
  17. 17. ACERCÁNDOSE A LA WEB SEMÁNTICA <dialog>  Representa una conversación entre varias personas.  Representa una imagen. <figure> <mark> <meter> <progress> <time> <command> <output> <datagrid>  Representa un texto resaltado.  Representa una medida.  Representa el estado de cierto proceso.  Representa una fecha o una hora.  Representa un comando que se puede ejecutar.  Representa una salida de un programa  Representa datos de manera interactiva.
  18. 18. 3 Etiquetas para contenido específico 2 Estructura del cuerpo 4 Canvas 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 4. NOVEDADES DE HTML5 1 El nuevo doctype
  19. 19. <audio>  Un método único para insertar audio en la web.  Atributos:  autoplay  loop  controls  preload  src ETIQUETAS PARA CONTENIDO ESPECÍFICO <video>  Un método único para insertar video en la web.  Atributos:  autoplay  loop  controls  preload  height  width  src
  20. 20. ETIQUETAS PARA CONTENIDO ESPECÍFICO <audio> <audio src="song.ogg" class="controls"> </audio>
  21. 21. <video src="movie.ogg" width="320" height="240"> </video> <video> ETIQUETAS PARA CONTENIDO ESPECÍFICO
  22. 22. 4 Canvas 2 Estructura del cuerpo 3 Etiquetas para contenido específico 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 4. NOVEDADES DE HTML5 1 El nuevo doctype
  23. 23. CANVAS <canvas>  Crea un lienzo donde es posible crear gráficos u otras imágenes visuales al vuelo, mediante script.  Eje de coordenadas del canvas:  Polémica por la propiedad intelectual de Canvas.
  24. 24. CANVAS <canvas> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script>
  25. 25. CANVAS Dibujar rectángulos Trabajar con color de relleno y trazado Caminos Curvas con arcos Curvas cuadráticas Curvas bezier Usar imágenes Escalado y recorte en imágenes Curvas en Caminos
  26. 26. 5 Bases de datos locales 2 Estructura del cuerpo 3 Etiquetas para contenido específico 4 Canvas 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 4. NOVEDADES DE HTML5 1 El nuevo doctype
  27. 27. BASES DE DATOS LOCALES Almacenamiento localAlmacenamiento local  Permite almacenar datos en pares clave/valor en la máquina del usuario. Los datos almacenados son únicos al dominio. (preferencias)
  28. 28. BASES DE DATOS LOCALES Almacenamiento de sesiónAlmacenamiento de sesión  Permite almacenar datos en pares clave/valor, únicamente válidos durante la sesión. (carros de compra o estado de aplicación)
  29. 29. BASES DE DATOS LOCALES Base de datosBase de datos  Permite almacenar datos relacionales ofreciendo una API de base de datos SQL, con todo lo que ello implica.
  30. 30. 6 Web Workers 2 Estructura del cuerpo 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 4. NOVEDADES DE HTML5 1 El nuevo doctype
  31. 31. WEB WORKERS  El script que instancia el Web Worker sería así:  El archivo javascript en el Web Worker:
  32. 32. WEB WORKERS
  33. 33. 7 Aplicaciones web Offline 2 Estructura del cuerpo 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 6 Web Workers 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 4. NOVEDADES DE HTML5 1 El nuevo doctype
  34. 34. APLICACIONES WEB OFFLINE  Lo primero es indicar el manifiesto:  Para que el navegador lo entienda indicar:  Añadir:  No hay que olvidarse de la API del cache:
  35. 35. APLICACIONES WEB OFFLINE  Acceder a tu correo Google sin internet:
  36. 36. 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 2 Estructura del cuerpo 4. NOVEDADES DE HTML5 1 El nuevo doctype
  37. 37. GEOLOCALIZACIÓN  Usando la API de Geolocalización:  La pregunta del navegador:  Para dibujar el mapa:
  38. 38. GEOLOCALIZACIÓN
  39. 39. 9 Nuevas APIs para interfaz de usuario 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 2 Estructura del cuerpo 4. NOVEDADES DE HTML5 1 El nuevo doctype
  40. 40. NUEVAS APIS PARA INTERFAZ DE USUARIO  Nuevos eventos drag and drop:  dragstart  drag  dragenter  dragover  dragleave  drop  dragend Usando dataTransferUsando dataTransfer Utilizando imágenes Feedback DragUtilizando imágenes Feedback Drag Usando efectos DropUsando efectos Drop
  41. 41. NUEVAS APIS PARA INTERFAZ DE USUARIO
  42. 42. 10 Fin de las etiquetas de presentación HTML5 incluye novedades significativas en diversos ámbitos. 3 Etiquetas para contenido específico 4 Canvas 5 Bases de datos locales 6 Web Workers 7 Aplicaciones web Offline 8 Geolocalización 9 Nuevas APIs para interfaz de usuario 2 Estructura del cuerpo 4. NOVEDADES DE HTML5 1 El nuevo doctype
  43. 43. FIN DE LAS ETIQUETAS DE PRESENTACIÓN  <center>  <font>  <s>  <strike>  <tt>  <big>  <basefont>  <u>  <acronym>  <xmp>  <dir>  <noframes>  <frameset>  <frame>  <applet> Etiquetas de estilo Etiquetas dobles Etiquetas para frames Etiquetas específicas
  44. 44. 9.0+ 3.5+ 1.0+ 10.5+ 9.0+ 3.0+ 1.0+ 9.5+3.0+ 4.0+ 8.0+ 2.0+ 2.0+ 10.5+4.0+ 3.5+ 5.0+4.0+ 3.5+ 1.0+4.0+ 3.5+ 5.0+iPhone 5. SOPORTE DE NAVEGADORES WEB Características Soporte de Navegadores Web Audio / Video Canvas Base de datos locales Web Workers Aplicaciones web Offline Geolocalización
  45. 45. GRACIAS!!!

×