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




4. NOVEDADES DE HTML5


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




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

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>


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>


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>


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>


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>


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>


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


4 Canvas


6 Web Workers


8 Geolocalización





<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

4 Canvas




6 Web Workers


8 Geolocalización





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





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





WEB WORKERS

El script que instancia el Web Worker sería así:

El archivo javascript en el Web Worker:

WEB WORKERS




4 Canvas


6 Web Workers

8 Geolocalización





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





4 Canvas


6 Web Workers




GEOLOCALIZACIÓN

Usando la API de Geolocalización:

La pregunta del navegador:

Para dibujar el mapa:

GEOLOCALIZACIÓN

9Nuevas APIs para interfaz de usuario




4 Canvas


6 Web Workers


8 Geolocalización



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



4 Canvas


6 Web Workers


8 Geolocalización




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

proyecto de topicos ii - html5

Technology