repaso rápido a los nuevos estándares web
Post on 26-Jan-2015
6.541 Views
Preview:
DESCRIPTION
TRANSCRIPT
REPASO RÁPIDO A LOS NUEVOS ESTÁNDARES WEBHTML5, CSS3 y las nuevas API de JavaScript
Pablo Garaizar SagarminagaBilboStack, 2012
Universidad de Deusto, Bilbao
HTML5
Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
Timed media
playback
Cross-document messaging
Microdata
Web Storage
Drag& drop
Document editing
Canvas 2D API
Browser history
MIME type and protocol
handler registration
Web SQL
Database
WebRTC
File API
Websockets
Geolocation
WebWorkers
SVG CSS3WebGL
CSS3JS
APIsHTML5
Novedades
En el marcado...
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/xhtml1-strict.dtd">
<!DOCTYPE html>
Nueva estructura de documento
Nueva cabecera
<html><html lang="en" manifest="app.manifest">
<meta><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8" />
<link><link rel=”stylesheet|alternate|icon|license|prefetch|nofollow|noreferrer|pingback|search|sidebar|tag”>
Etiquetas semánticas
<time><time datetime="2011-03-17T17: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>G-force 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;stroke-width: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 CSS3...
Nuevos selectoreshttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
E[att^="val"]E[att$="val"]E[att*="val"]
E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-child
E:first-of-typeE:last-of-typeE:only-childE:only-of-type
E:emptyE:targetE:enabledE:disabledE:checkedE:selection
E:not(selector)E ~ F
Transformacioneshttp://dev.w3.org/csswg/css3-transforms/
#skew {transform:skew(35deg);
}#scale {
transform:scale(1,0.5);}#rotate {
transform:rotate(45deg);}#translate {
transform:translate(10px, 20px);}
#rotate-skew-scale-translate {transform:skew(30deg) scale(1.1,1.1) rotate(40deg)
translate(10px, 20px);}
Transicioneshttp://www.w3.org/TR/css3-transitions/
div { transition-property: opacity; transition-delay: 0.5s; transition-duration: 2s; transition-timing-function: linear; opacity: 30%; }
div:hover { opacity: 100%; }
Animacioneshttp://www.w3.org/TR/css3-animations/
div { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; }
@keyframes diagonal-slide {
0% { left: 0; top: 0; }
100% { left: 100px; top: 100px; }
}
@font-facehttp://www.font-face.com
@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>];}
@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://server.com/VeraSeBd.ttf");} body { font-family: "Bitstream Vera Serif Bold", serif }
El infierno de los prefijoshttp://www.sitepoint.com/opera-css3-webkit-prefix
div { webkit-transition: opacity 2s linear; moz-transition: opacity 2s linear; ms-transition: opacity 2s linear; o-transition: opacity 2s linear; transition: opacity 2s linear; }
En JavaScript...
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
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; //...});
Timing control for script-based animations
(RequestAnimationFrame)
Web Audio API / Audio Data APIFullscreen API
getUserMedia()Pointer Lock API
Server-Sent Events(EventSource)
WebRTCTimed track API(WebVTT, WebSRT)
Audio Data API + WebGL = insanehttp://videos.mozilla.org/serv/blizzard/audio-slideshow
Y nueva sintaxis...
Todo esto, ¿para cuándo?
En teoría, HTML5 no será un estándar hasta 2022
¿Qué hacemos hasta entonces?
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, Troll.me, Memegenerator.net
top related