introduccion a html5

INTRODUCCIÓN A

Pablo Garaizar SagarminagaUniEncounter 2011, Eibar/Ermua

Agenda● Breve historia de HTML5.● ¿Qué es y qué no es HTML5?● Novedades en...

● HTML● CSS● JS

● Soporte actual de HTML5

Breve historia...

Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University

¿Qué es...

Timed media

playback

Cross-document messaging

Microdata

Web Storage

Drag& drop

Document editing

Canvas 2D API

Browser history

MIME type and protocol

handler registration

...y qué no es?

Web SQL

Database

The Indexed Database

API

File API

Websockets

Geolocation

WebWorkers

SVG CSS3WebGL

A pesar de esto...

CSS3JS

APIsHTML5

Novedades

En HTML

Declaración simplificada

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

Nueva estructura de documento

Etiquetas semánticas

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

Multimedia

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

Canvas

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

SVG

<svg><svg id="flag" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> <rect id="redrect" width="300" height="100" fill="white" /> <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;strokewidth:2"/> <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" /> <polygon points="20,10 300,20, 170,50" fill="white" /> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" /></svg>

Formularios

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

Etiquetas interactivas

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

Otras etiquetas

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

En CSS

Nuevos selectoreshttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

E[att^=”val”]E[att$=”val”]E[att*=”val”]

E:rootE:nthchild(n)E:nthlastchild(n)E:nthoftype(n)E:nthlastoftype(n)E:lastchild

E:firstoftypeE:lastoftypeE:onlychildE:onlyoftype

E:emptyE:targetE:enabledE:disabledE:checkedE:selection

E:not(selector)E ~ F

Bordes redondeados

borderradiusbordertopleftradiusbordertoprightradiusborderbottomrightradiusborderbottomleftradius

webkitborderradiuswebkitbordertopleftradiuswebkitbordertoprightradiuswebkitborderbottomrightradiuswebkitborderbottomleftradius

mozborderradiusmozborderradiustopleftmozborderradiustoprightmozborderradiusbottomrightmozborderradiusbottomleft

Transformacioneshttp://css3.bradshawenterprises.com/

#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);}

Transiciones

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

}

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

@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 }

Geolocalización

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+')');}

Offline / online

function show_status() { var status = navigator.onLine ? 'Online' : 'Offline'; alert('You are '+status);}

Eventos nuevos:

window.ononlinewindow.onoffline

Local Storage

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.

Web History

history.pushState(json, title, url);

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

Todo esto, ¿para cuándo?

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

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

Buena práctica: detectar funcionalidades soportadas

Detección de funcionalidades

function supports_canvas() { return !!document.createElement('canvas').getContext; //return Modernizr.canvas;}

function supports_video() { return !!document.createElement('video').canPlayType; //return Modernizr.video;}

function supports_ogg_theora_video() { if (!supports_video()) { return false; } var v = document.createElement("video"); return v.canPlayType('video/ogg; codecs="theora, vorbis"'); //return Modernizr.video.ogg;}

Modernizrhttp://www.modernizr.com

¿Y si no hay soporte?Polyfills

¿Polyqué? 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]>

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

Para saber más...

W3Chttp://dev.w3.org/html5/spec/Overview.html

WHATWGhttp://whatwg.org/html

Dive into HTML5http://diveintohtml5.org/

HTML5 Rockshttp://www.html5rocks.com

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

HTML 5 Demos and Exampleshttp://html5demos.com

Muchas gracias ;-)

Referencias● Dive into HTML5.● W3Schools.● IBM developer networks.● Quackit.● HTML5 Rocks.● HTML5 Demos and Examples.

http://diveintohtml5.org/

http://www.w3schools.com/

http://www.ibm.com/developerworks/library/x-html5/

http://www.quackit.com/html_5/tags/

http://www.html5rocks.com/

http://html5demos.com/

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

Technology