Your SlideShare is downloading. ×
0
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Proyecto de Topicos II - HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Proyecto de Topicos II - HTML5

1,309

Published on

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

No Downloads
Views
Total Views
1,309
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
99
Comments
0
Likes
1
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. 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. 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. 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. 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. 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. 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. <!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. 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. <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. <header> <nav> <section> <article> <aside> <footer> NUEVOS ELEMENTOS ESTRUCTURALES
  • 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.  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.  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.  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.  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.  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. 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. 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. <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. ETIQUETAS PARA CONTENIDO ESPECÍFICO <audio> <audio src="song.ogg" class="controls"> </audio>
  • 21. <video src="movie.ogg" width="320" height="240"> </video> <video> ETIQUETAS PARA CONTENIDO ESPECÍFICO
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. WEB WORKERS  El script que instancia el Web Worker sería así:  El archivo javascript en el Web Worker:
  • 32. WEB WORKERS
  • 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. 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. APLICACIONES WEB OFFLINE  Acceder a tu correo Google sin internet:
  • 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. GEOLOCALIZACIÓN  Usando la API de Geolocalización:  La pregunta del navegador:  Para dibujar el mapa:
  • 38. GEOLOCALIZACIÓN
  • 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. 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. NUEVAS APIS PARA INTERFAZ DE USUARIO
  • 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. 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. 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. GRACIAS!!!

×