Repaso rápido a los nuevos estándares web

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

http://www.w3.org/TR/html5-diff/

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

<time>
<time datetime="2011-03-17T17:59:37+01:00" pubdate>
March 17, 2011 5:37pm GMT+1
</time>

<mark>
<p>This is <m>really important</m> to understand HTML5</p>

Etiquetas semánticas

<meter>
<p>G-force is
<meter value="9.2" min="0" max="19.6" low="9.5"
high="10.3" optimum="9.8">9.2</meter>.
</p>

<progress>
<p>Downloaded:
<progress value="1534602" max="4603807">33%</progress>
</p>

Etiquetas semánticas

<audio>
<audio src="music.mp3"
autoplay loop="3" controls preload />

<video>
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Multimedia

<canvas>
<canvas id=”area” width=”320” height=”240”>
</canvas>

<script>
function draw() {
var area = document.getElementById("area");
var ctx = area.getContext("2d");
ctx.fillRect(50, 25, 150, 100);
}
</script>

Se pueden hacer muchas cosas: rectángulos, círculos, elipses, caminos, texto,
imágenes, gradientes, transformaciones.

Canvas

<input>
<input
type="search" search box
type="number" spinbox
type="range" slider
type="color" color picker
type="tel" telephone number
type="url" web address
type="email" email address
type="date|time|month|week|datetime"
required autofocus placeholder=”Type here...”
/>

Formularios

<datalist>
<input type=”text” list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

<keygen>
<form action="signup.asp" method="post">
user: <input type="text" name="username" />
encryption: <keygen name="security" />
<input type="submit" />
</form>

Formularios

<menu> + <command>
<menu>
<command onclick="alert('first!')" label="Do 1st Command"/>
<command onclick="alert('second!')" label="Do 2nd Command"/>
<command onclick="alert('third!')" label="Do 3rd Command"/>
</menu>

<datagrid>
<datagrid>
<table ...>
</datagrid>

Etiquetas interactivas

<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

E[att^="val"]
E[att$="val"]
E[att*="val"]
E:empty
E:root
E:target
E:nth-child(n)
E:enabled
E:nth-last-child(n)
E:disabled
E:nth-of-type(n)
E:checked
E:nth-last-of-type(n)
E:selection
E:last-child
E:not(selector)
E:first-of-type
E ~ F
E:last-of-type
E:only-child
E:only-of-type

Nuevos selectores
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

#skew {
transform:skew(35deg);
}
#scale {
transform:scale(1,0.5);
}
#rotate {
transform:rotate(45deg);
}
#translate {
transform:translate(10px, 20px);
}

#rotate-skew-scale-translate {
transform:skew(30deg) scale(1.1,1.1) rotate(40deg)
translate(10px, 20px);
}

Transformaciones
http://dev.w3.org/csswg/css3-transforms/

div {
transition-property: opacity;
transition-delay: 0.5s;
transition-duration: 2s;
transition-timing-function: linear;
opacity: 30%;
}

div:hover {
opacity: 100%;
}

Transiciones
http://www.w3.org/TR/css3-transitions/

div {
animation-name: diagonal-slide;
animation-duration: 5s;
animation-iteration-count: 10;
}

@keyframes diagonal-slide {

0% {
left: 0;
top: 0;
}

100% {
left: 100px;
top: 100px;
}

}

Animaciones
http://www.w3.org/TR/css3-animations/

@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
}

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://server.com/VeraSeBd.ttf");
}

body { font-family: "Bitstream Vera Serif Bold", serif }

@font-face
http://www.font-face.com

div {
webkit-transition: opacity 2s linear;
moz-transition: opacity 2s linear;
ms-transition: opacity 2s linear;
o-transition: opacity 2s linear;
transition: opacity 2s linear;
}

El infierno de los prefijos
http://www.sitepoint.com/opera-css3-webkit-prefix

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

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

history.pushState(json, title, url);

addEvent(window, 'popstate', function (event) {
var data = event.state;
//...
});

Web History

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

http://espadrine.github.com/New-In-A-Spec/es6/

En teoría, HTML5 no será un
estándar hasta 2022

¿Qué hacemos hasta
entonces?

Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

W3C
http://dev.w3.org/html5/spec/Overview.html

Dive into HTML5
http://diveintohtml5.org/

HTML5 Rocks
http://www.html5rocks.com

Improving the Performance of your HTML5 App
http://www.html5rocks.com/tutorials/speed/html5/

HTML 5 Demos and Examples
http://html5demos.com

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

Repaso rápido a los nuevos estándares web

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to Repaso rápido a los nuevos estándares web

Similar to Repaso rápido a los nuevos estándares web (20)

More from Pablo Garaizar

More from Pablo Garaizar (20)

Recently uploaded

Recently uploaded (20)

Repaso rápido a los nuevos estándares web