¡Hola!
¡usa las flechas para moverte por la presentación!
* Ctrl o Shift en realidad. En Opera sólo funciona Shift.
HTML5 is a vocabulary and set of application programming interfaces that make up a core declarative language for web sites and applications.”
WTF?
img.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
:-)
<!DOCTYPE html> <META charset=utf-8> <title> Esto es HTML5 </title> <p>¡Chispas!</p>
WTF?
meta en HTML4.01:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta en HTML5:<meta charset=UTF-8>
script en HTML4.01:<script type="text/javascript" src="jquery.js"></script>
script en HTML5:<script src=jquery.js></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="styles.css">
<META CHARSET=utf-8> <META CHARSET=utf-8 /> <META CHARSET="utf-8"> <META CHARSET="utf-8" /> <meta charset=utf-8> <meta charset=utf-8 /> <meta charset="utf-8"> <meta charset="utf-8" /> <MeTa ChArSeT=utf-8>
WTF?
Here’s the thing about validation: it’s a tool. Nothing more; nothing less; just a tool.”
we have to wake up to the fact that full cross-browser support of new technologies is just not going to happen. Some users will still use older browsers and some users will still have browsers with deactivated JavaScript or images”
Hay partes de HTML5 que son:
- Fiables desde ya
- Apenas utilizables
- Por desgracia, extrañas
- Interesantes pero ignorables
- Fundamentalmente para experimentar con aplicaciones web ”
La W3C define header como:
El elemento header representa un grupo de ayudas introductorias o de navegación.”
Suele incluir (aunque no es obligatorio):
La W3C define nav como:
El elemento nav representa una sección de una página que enlaza a otras páginas o partes de una página: una sección con enlaces para navegar.”
nav nav 
La W3C define footer como:
El elemento footer representa un footer para el contenido de sección [...] más cercano que le anteceda. Suele contener información adicional sobre su sección [...].”
La W3C define article como:
El elemento article representa una composición autocontenida en un documento, página [...] que es, en principio, distribuible o reutilizable independientemente, es decir, sindicable.”
La W3C define section como:
El elemento section representa una sección genérica de un documento o aplicación. Una sección [...] es una agrupación temática de contenido, normalmente con un encabezado.”
La W3C define aside como:
El elemento aside representa una sección de una página consistente en contenido relacionado tangencialmente con el contenido que le rodea, y que se podría considerar separado de dicho contenido.”
La W3C define hgroup como:
El elemento hgroup representa el encabezado de una sección. [...] Se utiliza para agrupar una serie de h1-h6 cuando el encabezdo tiene múltiples niveles, como subtítulos, títulos alternativos, o slogans.”
<header>
<hgroup>
<h1>Arcoiris</h1>
<h2>Los 7 colores</h2>
</hgroup>
</header>
La W3C define figure como:
El elemento figure representa un contenido fluído, opcionalmente con una leyenda, autocontenido [...].”
Y figcaption como:
El elemento figcaption representa un una leyenda para el resto de contenidos de su elemento figure padre.”
<figure>
<img src=foto.jpg alt="">
<figcaption>
Tortugas
</figcaption>
</figure>
La W3C define time como:
El elemento time representa o una hora en un reloj de 24 horas, o una fecha precisa en el calendario gregoriano [...] ”
datetime: permite poner el contenido de un time en un formato que una máquina pueda entender.
pubdate: especifica que un time es una fecha de publicación.
La W3C define mark como:
El elemento mark representa una porción de texto [...] marcada o destacada con un propósito de referencia, debido a su relevancia en otro contexto.”
ol: se añaden los atributos start y reversed.
cite: sólo se puede utilizar para marcar la obra, no al autor. Rompe la retrocompatibilidad con anteriores versiones de HTML, y ha generado mucho debate
em, i: em denota énfasis, mientras que i marca una cursiva con fines estilísticos, por ejemplo un extranjerismo.
strong, b: strong denota importancia, mientras que b marca una negrita con fines estilísticos, sin una importancia especial
small: para marcar la "letra pequeña", por ejemplo copyrights, aspectos legales, atribuciones...
applet
big
center
font
frame
blink
Creamos los elementos nuevos con Javascript:
document.CreateElement('nav');
document.CreateElement('header');
document.CreateElement('footer');
document.CreateElement('article');
document.CreateElement('section');
Y... ¡magia! Nuestra flamante página ya se puede ver en todos los navegadores :-)
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Método desarrollado por Nicolas Gallagher
<!--[if ! lt IE 9]><!-->
<link rel="stylesheet" href="/css/default.css">
<!--<![endif]-->
<!--[if (IE 7)|(IE 8)]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>
(function() {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "/css/default.css";
document.getElementsByTagName("head")[0].appendChild(link);
})();
</script>
<![endif]-->
<!--[if lt IE 9]>
<noscript>
<link rel="stylesheet" href="/css/legacy.css">
</noscript>
<![endif]-->
Presentada por Tantek Çelik, consiste en añadir un div dentro o alrededor de cada elemento HTML5:
<article>
<div class=article>
[...]
</div>
</article>
<div class=hgroup>
<hgroup>
[...]
</hgroup>
<div>
.article{
background: #FF0000;
}
.hgroup{
background: #FF0000;
}
Este es el código que, hasta hace poco, nos daba Youtube para incrustar vídeos:
<object width="480" height="385"> <param name="movie" value="http://www.youtube.com/v/w0ffwDYo00Q?fs=1&hl=es_ES"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/w0ffwDYo00Q?fs=1&hl=es_ES" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"> </embed> </object>
:-(
Una nueva forma de incrustar vídeos y audios de forma nativa:
<audio src="cancion.???" > </audio><video src="video.???" > </video>
:-)
autoplay: reproducción automática.
controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto.
poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma.
width, height: si no se especifican, se toman las del poster; si no, serán 300px por 150px.
loop: reproduce el vídeo en bucle.
preload: precarga el vídeo.
src: indica la fuente del vídeo.
Existen multitud de codecs de vídeo, y no todos los navegadores soportan los mismos:
|
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|
| Theora + Ogg | 3.5+ | 5.0+ | 10.5+ | ||||
| H264 + MP4 | 9.0+ | 3.0+ | 5.0+ | 3.0+ | 2.0+ | ||
| WebM | 9.0+ | 4.0+ | 5.0+ | 10.6+ | 2.3+ |
<video controls width="360" height="240" poster="caratula.jpg" >
<source src="vid.mp4" type="video/mp4" >
<source src="vid.ogv" type="video/ogg" >
<p>
Tu navegador no sorporta vídeo. Puedes descargar este vídeo en formato
<a href="vid.mp4">mp4<a> o en formato <a href="vid.ogv">Ogg<a>.
</p>
</video>
¡Todos contentos! :-)
<video controls width="360" height="240" poster="caratula.jpg" >
<source src="vid.mp4" type="video/mp4" >
<source src="vid.ogv" type="video/ogg" >
<object type="application/x-shockwave-flash" width="360" height="240"
data="player.swf?file=vid.mp4">
<param name="vid" value="player.swf?file=vid.mp4">
<a href="vid.mp4">Descargar vídeo</a>
</object>
</video>
¡Ta-da!
list permite añadir opciones, de forma similar a un select
<input type=text list=payasos> <datalist id=payasos> <option value=Miliki> <option value=Fofó> <option value=Gaby> </datalist>
autofocus pone el foco en el campo
<input type=search autofocus>
placeholder es un texto de apoyo dentro del input
<label for=name>Nombre:</label> <input type=text id=name placeholder="Pepe Pérez">
multiple permite subir varios archivos en un <input type=file> o en cualquier otro input
<input type=file multiple>
pattern permite añadir una expresión regular
<label for=dni>DNI:</label>
<input pattern="[0-9]{8}[A-Z]"
id=dni placeholder="con letra, sin guión">
autocomplete permite definir si permitimos o no el autocompletado (por defecto está en on)
<label for=danger>Código del misil nuclear:</label> <input type=text id=danger autocomplete=off>
min y max permite indicar el valor mínimo o máximo
<label for=birth>Año de nacimiento:</label> <input type=number min=1900 max=2010>
step permite controlar los incrementos
<label for=eggs>¿Cuántos huevos quieres comprar?</label> <input type=number id=eggs min=0 max=600 step=6>
required.:required: permite dar estilo a los campos requeridos. Por ejemplo, una imagen de fondo con un asterisco.
:invalid: permite dar estilo a los campos no válidos. Por ejemplo, un borde de color rojo.
<input type=text><canvas id=miCanvas width=500 height=300> Oh, tu navegador no funciona con canvas. Esto era un dibujo ridículo, no te preocupes. </canvas>
<script>
// creamos una referencia para el elemento
var elem = document.getElementById('miCanvas');
// comprobamos el soporte del navegador
if (elem && elem.getContext) {
// inicializamos el contexto 2D (sólo un contexto por elemento)
var context = elem.getContext('2d');
if (context) {
// ¡Podemos dibujar el primer rectángulo!
// Hay que poner las coordenadas (x,y) seguido de width y height
context.fillRect(0, 0, 400, 250);
}
}
</script>
¡Wow! Un rectángulo negro. Bravo, Da Vinci...
// Cara amarilla context.strokeStyle = "#000000"; context.fillStyle = "#FFFF00"; context.beginPath(); context.arc(250,150,100,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill();
// ojos context.strokeStyle = "#000000"; context.fillStyle = "#000000"; context.beginPath(); context.arc(200,120,15,0,Math.PI*2,true); context.closePath(); context.fill(); context.strokeStyle = "#000000"; context.fillStyle = "#000000"; context.beginPath(); context.arc(300,120,15,0,Math.PI*2,true); context.closePath(); context.fill();
// Sonrisa context.strokeStyle = "#000000"; context.beginPath(); context.moveTo(190,190); context.quadraticCurveTo(250,250,310,190); context.quadraticCurveTo(250,230,190,190); context.closePath(); context.stroke();
¿Es el Louvre? ¡Tienen que ver esto!
localStorage.setItem('miClave','miValor');localStorage.getItem('miClave');localStorage.removeItem('miClave');localStorage.clear();IE8 :-)
HTML:
<!DOCTYPE HTML> <html manifest=manifest.cache>
manifest.cache:
CACHE MANIFEST index.html stylesheet.css images/masthead.png scripts/misc.js NETWORK: search.php login.php /api FALLBACK: images/dynamic.php static_image.png # Version 2
Ejemplo: http://html5demos.com/drag
navigator.geolocation.getCurrentPosition(
function (position){
var coords = position.coords;
alert('Latitud: ' + coords.latitude
+ 'Longitud:' + coords.longitude);
}
);
scripts.js
var worker = new Worker('mytask.js');
worker.onmessage = function (event) {
alert('El worker dice: ' + event.data);
};
worker.postMessage('task=job1');
mytask.js
self.onmessage = function(event) {
// Lanzamos una tarea
self.postMessage("recibido:" + event.data);
};
var socket = new WebSocket('ws://mipagina.com/updates');
socket.onopen = function(event) {
socket.send('Toc toc, ¿se puede?');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }