View
1.297
Download
4
Category
Preview:
Citation preview
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
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
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
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á.
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
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
<!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
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
<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
<header>
<nav>
<section>
<article>
<aside>
<footer>
NUEVOS ELEMENTOS ESTRUCTURALES
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
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
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
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
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
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
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.
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
<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
ETIQUETAS PARA CONTENIDO ESPECÍFICO
<audio><audio src="song.ogg" class="controls">
</audio>
<video src="movie.ogg" width="320" height="240">
</video>
<video>
ETIQUETAS PARA CONTENIDO ESPECÍFICO
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
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.
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>
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
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
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)
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)
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.
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
WEB WORKERS
El script que instancia el Web Worker sería así:
El archivo javascript en el Web Worker:
WEB WORKERS
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
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:
APLICACIONES WEB OFFLINE
Acceder a tu correo Google sin internet:
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
GEOLOCALIZACIÓN
Usando la API de Geolocalización:
La pregunta del navegador:
Para dibujar el mapa:
GEOLOCALIZACIÓN
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
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
NUEVAS APIS PARA INTERFAZ DE USUARIO
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
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
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
GRACIAS!!!
Recommended