html5

INTRODUCCIÓN A

Pablo Garaizar Sagarminaga
UniEncounter 2011, Eibar/Ermua

Agenda
● Breve historia de HTML5.
● ¿Qué es y qué no es HTML5?
● Novedades en...
● HTML
● CSS
● JS
● Soporte actual de HTML5

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

The
Web Indexed Web
Workers Database sockets
API

<!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/xhtml1strict.dtd">

<!DOCTYPE html>

Declaración simplificada

<time>
<time datetime="20110317T17: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>Gforce 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:nthchild(n) E:enabled
E:nthlastchild(n) E:disabled
E:nthoftype(n) E:checked
E:nthlastoftype(n) E:selection
E:lastchild
E:not(selector)
E:firstoftype E ~ F
E:lastoftype
E:onlychild
E:onlyoftype

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

borderradius
bordertopleftradius
bordertoprightradius
borderbottomrightradius
borderbottomleftradius

webkitborderradius
webkitbordertopleftradius
webkitbordertoprightradius
webkitborderbottomrightradius
webkitborderbottomleftradius

mozborderradius
mozborderradiustopleft
mozborderradiustopright
mozborderradiusbottomright
mozborderradiusbottomleft

Bordes redondeados

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

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

Transformaciones
http://css3.bradshawenterprises.com/

#id {
webkittransition: all 1s easeinout;
moztransition: all 1s easeinout;
otransition: all 1s easeinout;
transition: all 1s easeinout;
}

Transiciones

@fontface {
  fontfamily: <aremotefontname>;
  src: <source> [,<source>]*;
  [fontweight: <weight>];
  [fontstyle: <style>];
}

@fontface {
  fontfamily: "Bitstream Vera Serif Bold";
  src: url("http://server.com/VeraSeBd.ttf");
}

body { fontfamily: "Bitstream Vera Serif Bold", serif }

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

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

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

En la práctica, soportadas muchas cosas
http://www.findmebyip.com/litmus

Buena práctica: detectar
funcionalidades soportadas

Modernizr
http://www.modernizr.com

¿Y si no hay soporte?
Polyfills

<![if lt IE 9]>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist," +
    "details,figure,footer,header,hgroup,mark,menu,meter," +
    "nav,output,progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<![endif]>

¿Polyqué? Polyfills ;-)

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

html5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to html5

Similar to html5 (20)

Recently uploaded

Recently uploaded (20)

html5