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

TimedCanvas Web media2D API playback Storage MIME typeand protocol Document handler Microdata editing registration Cross-Browser Drag document history messaging & drop

...y qué no es?

WebGeolocation SQL File API DatabaseWebGL SVG CSS3 The Web Indexed Web Workers Database sockets API

A pesar de esto...

JSHTML5 CSS3 APIs

Novedades

En HTML

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

Nueva estructura de documento

<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

En CSS

E[att^=”val”]E[att$=”val”]E[att*=”val”] E:emptyE:root E:targetE:nthchild(n) E:enabledE:nthlastchild(n) E:disabledE:nthoftype(n) E:checkedE:nthlastoftype(n) E:selectionE:lastchild E:not(selector)E:firstoftype E ~ FE:lastoftypeE:onlychildE:onlyoftype Nuevos selectoreshttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

borderradiusbordertopleftradiusbordertoprightradiusborderbottomrightradiusborderbottomleftradiuswebkitborderradiuswebkitbordertopleftradiuswebkitbordertoprightradiuswebkitborderbottomrightradiuswebkitborderbottomleftradiusmozborderradiusmozborderradiustopleftmozborderradiustoprightmozborderradiusbottomrightmozborderradiusbottomleft 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

Todo esto, ¿para cuándo?

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: detectarfuncionalidades soportadas

Modernizrhttp://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 ;-)

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 HTML5 http://diveintohtml5.org/

HTML5 Rockshttp://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

Muchas gracias ;-)

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

All images are property of their ownowners*, content is licensed under aCreative Commons by-sa 3.0 license * W3C, WHATWG, Dive into HTML5, HTML5 Rocks, Modernizr, FindmebyIP

http://educacion.creaciondemedios.com	1037
http://nandoweb.webcindario.com	125
http://localhost	115
http://enekopalencia.tumblr.com	7
http://192.168.1.113	6
http://twitter.com	1
http://paper.li	1
https://si0.twimg.com	1

Introduccion a HTML5

by Pablo Garaizar

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 1,293

Statistics

Introduccion a HTML5 Presentation Transcript