proyecto de topicos ii - html5
TRANSCRIPT
![Page 1: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/1.jpg)
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
![Page 2: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/2.jpg)
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
![Page 3: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/3.jpg)
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
![Page 4: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/4.jpg)
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á.
![Page 5: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/5.jpg)
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
![Page 6: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/6.jpg)
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
![Page 7: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/7.jpg)
<!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
![Page 8: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/8.jpg)
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 HTML51 El nuevo doctype
![Page 9: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/9.jpg)
<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
![Page 10: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/10.jpg)
<header>
<nav>
<section>
<article>
<aside>
<footer>
NUEVOS ELEMENTOS ESTRUCTURALES
![Page 11: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/11.jpg)
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
![Page 12: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/12.jpg)
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
![Page 13: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/13.jpg)
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
![Page 14: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/14.jpg)
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
![Page 15: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/15.jpg)
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
![Page 16: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/16.jpg)
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
![Page 17: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/17.jpg)
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.
![Page 18: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/18.jpg)
3Etiquetas 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 HTML51 El nuevo doctype
![Page 19: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/19.jpg)
<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
![Page 20: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/20.jpg)
ETIQUETAS PARA CONTENIDO ESPECÍFICO
<audio><audio src="song.ogg" class="controls">
</audio>
![Page 21: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/21.jpg)
<video src="movie.ogg" width="320" height="240">
</video>
<video>
ETIQUETAS PARA CONTENIDO ESPECÍFICO
![Page 22: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/22.jpg)
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 HTML51 El nuevo doctype
![Page 23: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/23.jpg)
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.
![Page 24: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/24.jpg)
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>
![Page 25: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/25.jpg)
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
![Page 26: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/26.jpg)
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 HTML51 El nuevo doctype
![Page 27: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/27.jpg)
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)
![Page 28: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/28.jpg)
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)
![Page 29: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/29.jpg)
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.
![Page 30: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/30.jpg)
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 HTML51 El nuevo doctype
![Page 31: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/31.jpg)
WEB WORKERS
El script que instancia el Web Worker sería así:
El archivo javascript en el Web Worker:
![Page 32: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/32.jpg)
WEB WORKERS
![Page 33: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/33.jpg)
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 HTML51 El nuevo doctype
![Page 34: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/34.jpg)
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:
![Page 35: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/35.jpg)
APLICACIONES WEB OFFLINE
Acceder a tu correo Google sin internet:
![Page 36: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/36.jpg)
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 HTML51 El nuevo doctype
![Page 37: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/37.jpg)
GEOLOCALIZACIÓN
Usando la API de Geolocalización:
La pregunta del navegador:
Para dibujar el mapa:
![Page 38: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/38.jpg)
GEOLOCALIZACIÓN
![Page 39: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/39.jpg)
9Nuevas 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 HTML51 El nuevo doctype
![Page 40: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/40.jpg)
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
![Page 41: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/41.jpg)
NUEVAS APIS PARA INTERFAZ DE USUARIO
![Page 42: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/42.jpg)
10Fin 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 HTML51 El nuevo doctype
![Page 43: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/43.jpg)
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
![Page 44: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/44.jpg)
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
![Page 45: Proyecto de Topicos II - HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052523/555a6cbad8b42a972b8b4c83/html5/thumbnails/45.jpg)
GRACIAS!!!