SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
1.
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
3.
Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
4.
Timed
Canvas Web
media
2D API playback Storage
MIME type
and protocol Document
handler
Microdata
editing
registration
Cross-
Browser Drag
document
history messaging & drop
5.
Web
Geolocation SQL File API
Database
WebGL SVG CSS3
Web Web
WebRTC
Workers sockets
10.
<!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
21.
<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
22.
<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
31.
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
32.
function show_status() {
var status = navigator.onLine ? 'Online' : 'Offline';
alert('You are '+status);
}
Eventos nuevos:
window.ononline
window.onoffline
Offline / online
33.
function show_status() {
var status = navigator.onLine ? 'Online' : 'Offline';
alert('You are '+status);
}
Eventos nuevos:
window.ononline
window.onoffline
Offline / online
34.
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
35.
history.pushState(json, title, url);
addEvent(window, 'popstate', function (event) {
var data = event.state;
//...
});
Web History
36.
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)
37.
Audio Data API + WebGL = insane
http://videos.mozilla.org/serv/blizzard/audio-slideshow
52.
Referencias
● Dive into HTML5.
● W3Schools.
● IBM developer networks.
● Quackit.
● HTML5 Rocks.
● HTML5 Demos and Examples.
53.
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