Embed Size (px)
DESCRIPTION
HTML 5 es el nuevo estándar de desarrollo de sitios web. La ponencia parte de las tecnologías actualmente populares para llegar a las implementaciones actuales de HTML 5 en los más modernos navegadores.
Citation preview
HTML5 hoy Implicancias para desarrolladores y demostracionesJuan Eladio Sánchez RosasMozilla Perú
Estándares web, hoy
HTML y XML (90s)
• HyperText Markup Language
• eXtensible Markup Language
XML: Un ejemplo<?xml version="1.0" encoding="UTF-8" ?>
<canal><titulo>Mozilla Perú</titulo>
<items><item><titulo>Actividades Octubre</titulo><enlace>http://mozilla.pe/actividades-octubre</enlace><descripcion><imagen fuente="fotografiaO.jpg" texto="Evento O" />Este mes que pasó hicimos una pausa ...</descripcion></item><item><titulo>Mozilla Campus Day en FESOLI</titulo><enlace>http://mozilla.pe/mozilla-campus-day-fesoli</enlace><descripcion><imagen fuente="fotografiaF.jpg" texto="Evento F" />Culminando por este año el evento itinerante ...</descripcion></item></items></canal>
XHTML 1 (2000)
• eXtensible HyperText Markup Language
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mozilla Perú</title></head>
<body> <h1>Mozilla Perú</h1><img src="logo.png" align="left" hspace="10"> <p>Actividades de Mozilla Perú en Octubre 2010 <br>5 de noviembre de 2010 por Juan Eladio. 0 comentarios</p></body>
</html>
CSS 2 (1998)
• Cascading Style Sheets
body { margin: 10; padding: 30; width: 100%; font-family: Verdana; font-size: 100%; line-height: 1.125em; color: #282623; background-color: white;}h1 { font-size: 2.125em; }p { line-height:1.909em; }
Diseño web sin tablas (2002)
Enfoque tradicional (sólo HTML)
<table><tr><td>Cabecera</td></tr></table>
<table><tr><td>Navega</td></tr></table>
<table><tr><td><!--otra tabla para colocar cuatro filas --></td><td><!--tabla zona lateral--></td></tr></table>
<table><tr><td>Pie de página</td></tr></table>
Diseño web sin tablas (2002)
Enfoque sin tablas (HTML+CSS)
<div id=”cabecera”>Cabecera</div>
<div id=”navegacion”>Navegación</div>
<div id=”seccion”><div id=”zona1”>Contenido 1</div><div id=”zona1”>Contenido 2</div><!--siguen divs--></div><div id=”lateral”>Zona lateral</div>
<div id=”piedepagina”>Pie de página</div>
En CSS van las posiciones y formatos
JavaScript
function CountWords (this_field)
var char_count = this_field.value.length;
var fullStr = this_field.value + " ";
var cleanedStr = fullStr.replace(/\s/g,' ');
var splitString = cleanedStr.split(" ");
var word_count = 0;
for (z=0; z<splitString.length; z++)
{if (splitString[z].length > 0) word_count++;}
return word_count;
}
AJAX (2005)
¿Todo esto es nuevo para ti?
¡Aún tienes esperanza!librosweb.es
Ahora si,¿Qué es HTML5?
HTML5
• Nuevo estándar para el desarrollo de páginas web
• Iniciado por WHATWG
• En desarrollo por World Wide Web Consortium (W3C)
• Ya existen implementaciones preliminares
Ahora sí, qué trae HTML5
Menos atributos innecesarios
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="micodigo.js"></script>
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
Nuevas etiquetas semánticas
<body> <header> <hgroup> <h1>Título de página</h1> <h2>Subtítulo</h2> </hgroup> </header> <nav> <ul> Opción de navegación ... </ul> </nav>
Nuevas etiquetas semánticas
<section> <article> <header> <h1>Título de artículo</h1> </header> <section> Contenido de la nota ... </section> </article> <article> .. </article></section>
Nuevas etiquetas semánticas
<aside> Enlaces relacionados </aside>
<footer> Copyright © 2010 </footer></body>
Nuevas etiquetas semánticas
<time> <details> <figure> <figcaption> <mark> <wbr>
Nuevas relaciones en enlaces
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" /><link rel="icon" href="/favicon.ico" /><link rel="pingback" href="http://myblog.com/xmlrpc.php"><link rel="prefetch" href="http://myblog.com/main.php">...
Nuevas relaciones en enlaces
<a rel="archives" href="http://myblog.com/archives">old posts</a><a rel="external" href="http://notmysite.com">tutorial</a><a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a><a rel="nofollow" href="http://notmysite.com/sample">wannabe</a><a rel="tag" href="http://myblog.com/category/games">games posts</a>
Atributos ARIA
• Accessible Rich Internet Applications
Accesibilidad de contenido web dinámico para personas con discapacidades
Atributos ARIA<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1" > <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> </ul> </li></ul>
Tipos de campos en formularios
<input type="range" min="0" max="50" step="2" value="0" />
<input results="10" type="search" required autofocus />
<input type="text" placeholder="Search history" />
Tipos de campos en formularios
<style> :invalid { background-color: red; } </style>
<input type="color" />
<input type="number" />
<input type="url" />
<input type="email" required />
<input type="tel" />
Tipos de campos en formularios
<input type="date" />
<input type="month" />
<input type="week" />
<input type="datetime" />
<input type="tel" />
HTML5
Dibujar elementos gráficos personalizados
Canvas
Audio y Video
<audio src="sound.ogg" controls></audio>
<script>document.getElementById("audio").muted = false;</script>
<video src="movie.ogv" autoplay controls></video>
<script>document.getElementById("video").play();</script>
Estándares de video
• H.264/AVC/MPEG-4
• OGG/Theora
• WebM (Youtube VP8)
¿Cómo lo pruebo?
Navegadores “Modernos”
• Firefox 3.6/4.0 Beta
• Chrome 7.0/8.0 Beta
• Safari 5.0
• Opera 10.5
Dispositivos móviles
• Apple iPhone / iPod / iPad
• Android OS
• Opera Mini
¿Cómo estoy seguro de que mi navegador soporta HTML5?
El caso Internet Explorer
• Internet Explorer 9 (beta) tiene soporte de HTML5
• Mientras tanto ...
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
//CSS PIE (www.csspie.com).componente { // lineas de atributos CSS3 behavior: url(path/to/PIE.htc); }
Demos
Demos: Aplicaciones interactivas
• deviantART Muromuro.deviantart.com
• Cloud Canvaswww.cloud-canvas.com
• HTML 5 Canvas & Audio Experiment9elements.com/io/projects/html5/canvas/
• Galactic Inbox: HTML 5 Gamewww.monocubed.com/?p=549
Demos: Colecciones
• HTML5 Gallery | A showcase of sites using HTML5 markuphtml5gallery.com
• HTML5 Demos and Exampleshtml5demos.com
• HTML5Rocks – Studiostudio.html5rocks.com
Notas al pie
www.mozilla.com/en-US/firefox/beta/technology/
Firefox 4 Beta Technology
HTML5 hoyImplicancias para desarrolladores y demostraciones
Mozilla Perúmozilla.pewww.facebook.com/mozillaperugroups.google.com/group/mozilla-peru
Juan Eladio Sánchez Rosasjesanchez(a)mozilla.peblogs.antartec.com/opensourceslideshare.net/juaneladio
