Post on 26-Jan-2015
description
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
Nueva cabecera
<html><html lang="en">
<meta><meta httpequiv="ContentType" content="text/html; charset=utf8">
<meta charset="utf8" />
<link><link rel=”stylesheet|alternate|icon|license|prefetch|nofollow|noreferrer|pingback|search|sidebar|tag”>
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 }
En JS
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.
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