Introduccion a 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

Introduccion a HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduccion a HTML5

Similar to Introduccion a HTML5 (20)

More from Pablo Garaizar

More from Pablo Garaizar (20)

Recently uploaded

Recently uploaded (20)

Introduccion a HTML5