REPASO RÁPIDO A LOS NUEVOS ESTÁNDARES WEB
HTML5, CSS3 y las nuevas API de JavaScript
Pablo Garaizar Sagarminaga
BilboStack, 2012
Universidad de Deusto, Bilbao
Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
Timed
Canvas Web
media
2D API playback Storage
MIME type
and protocol Document
handler
Microdata
editing
registration
Cross-
Browser Drag
document
history messaging & drop
Web
Geolocation SQL File API
Database
WebGL SVG CSS3
Web Web
WebRTC
Workers sockets
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
Declaración simplificada
<details>
Dive into HTML5
<details open>
<legend>Pilgrim, M. (2011)</legend>
<p>
Mark Pilgrim, Dive into HTML5,
<a href=”http://diveintohtml5.org”>updated!</a>.
</p>
</details>
Etiquetas interactivas
<figure> +
<figcaption>
<figure>
<img src=”fig1.jpg” title=”Graphic” />
<figcaption>Figure 1. Overall scores.</figcaption>
</figure>
<wbr>
<p>You can break the line here<wbr> or here<wbr>, or even here<wbr>.</p>
Otras etiquetas
function get_location() {
navigator.geolocation.getCurrentPosition(show_location);
}
function show_location(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert('You are here: ('+latitude+','+longitude+')');
}
Geolocalización
function show_status() {
var status = navigator.onLine ? 'Online' : 'Offline';
alert('You are '+status);
}
Eventos nuevos:
window.ononline
window.onoffline
Offline / online
function show_status() {
var status = navigator.onLine ? 'Online' : 'Offline';
alert('You are '+status);
}
Eventos nuevos:
window.ononline
window.onoffline
Offline / online
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;
Algunos navegadores soportan Web SQL Database (WebDB), pero no está
estandarizado.
Local Storage
Timing control for script-based
animations
(RequestAnimationFrame)
Web Audio API /
Fullscreen API Audio Data API
getUserMedia()
Pointer Lock API
WebRTC
Timed track API
(WebVTT, WebSRT)
Server-Sent Events
(EventSource)
Audio Data API + WebGL = insane
http://videos.mozilla.org/serv/blizzard/audio-slideshow
Referencias
● Dive into HTML5.
● W3Schools.
● IBM developer networks.
● Quackit.
● HTML5 Rocks.
● HTML5 Demos and Examples.
All images are property of their own
owners*, content is licensed under a
Creative Commons by-sa 3.0 license
* W3C, WHATWG, Dive into HTML5, HTML5 Rocks, Modernizr, FindmebyIP, Troll.me,
Memegenerator.net