Proyecto de Topicos II - HTML5

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
4 Canvas
6 Web Workers
8 Geolocalización
HTML5 incluye
novedades
significativas en
diversos ámbitos.

<!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

4 Canvas
6 Web Workers
8 Geolocalización
HTML5 incluye
novedades
significativas en
diversos ámbitos.
1 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.

3
Etiquetas para contenido
específico
4 Canvas
6 Web Workers
8 Geolocalización
HTML5 incluye
novedades
significativas en
diversos ámbitos.
1 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

ESPECÍFICO
<audio>
<audio src="song.ogg" class="controls">
</audio>

<video src="movie.ogg" width="320"
height="240">
</video>
<video>
ESPECÍFICO

4 Canvas
6 Web Workers
8 Geolocalización
HTML5 incluye
novedades
significativas en
diversos ámbitos.
1 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

4 Canvas
6 Web Workers
8 Geolocalización
HTML5 incluye
novedades
significativas en
diversos ámbitos.
1 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)

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)

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
4 Canvas
8 Geolocalización
HTML5 incluye
novedades
significativas en
diversos ámbitos.
1 El nuevo doctype

WEB WORKERS
 El script que instancia el Web Worker sería así:
 El archivo javascript en el Web Worker:

4 Canvas
6 Web Workers
8 Geolocalización
HTML5 incluye
novedades
significativas en
diversos ámbitos.
1 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
HTML5 incluye
novedades
significativas en
diversos ámbitos.
4 Canvas
6 Web Workers
1 El nuevo doctype

GEOLOCALIZACIÓN
 Usando la API de Geolocalización:
 La pregunta del navegador:
 Para dibujar el mapa:

9
Nuevas APIs para interfaz de
usuario
HTML5 incluye
novedades
significativas en
diversos ámbitos.
4 Canvas
6 Web Workers
8 Geolocalización
1 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

10
Fin de las etiquetas de
presentación
HTML5 incluye
novedades
significativas en
diversos ámbitos.
4 Canvas
6 Web Workers
8 Geolocalización
1 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

Proyecto de Topicos II - HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Proyecto de Topicos II - HTML5

Similar to Proyecto de Topicos II - HTML5 (20)

Recently uploaded

Recently uploaded (20)

Proyecto de Topicos II - HTML5