Repaso rápido a los nuevos estándares web

Repaso rápido a los nuevos estándares web
REPASO RÁPIDO A LOS NUEVOS ESTÁNDARES WEB HTML5, CSS3 y las nuevas API de JavaScript Pablo Garaizar Sagarminaga BilboStack, 2012 Universidad de Deusto, Bilbao
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 Web Web WebRTC Workers sockets
JS HTML5 CSS3 APIs
Novedades
En el marcado...
http://www.w3.org/TR/html5-diff/
<!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> Declaración simplificada
Nueva estructura de documento
<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”> Nueva cabecera
<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> 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
<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> SVG
<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 CSS3...
E[att^="val"] E[att$="val"] E[att*="val"] E:empty E:root E:target E:nth-child(n) E:enabled E:nth-last-child(n) E:disabled E:nth-of-type(n) E:checked E:nth-last-of-type(n) E:selection E:last-child E:not(selector) E:first-of-type E ~ F E:last-of-type E:only-child E:only-of-type Nuevos selectores http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
#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); } Transformaciones http://dev.w3.org/csswg/css3-transforms/
div { transition-property: opacity; transition-delay: 0.5s; transition-duration: 2s; transition-timing-function: linear; opacity: 30%; } div:hover { opacity: 100%; } Transiciones http://www.w3.org/TR/css3-transitions/
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; } } Animaciones http://www.w3.org/TR/css3-animations/
@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 } @font-face http://www.font-face.com
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; } El infierno de los prefijos http://www.sitepoint.com/opera-css3-webkit-prefix
En JavaScript...
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
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
Timing control for script-based animations (RequestAnimationFrame) Web Audio API / Fullscreen API Audio Data API getUserMedia() Pointer Lock API WebRTC Timed track API (WebVTT, WebSRT) Server-Sent Events (EventSource)
Audio Data API + WebGL = insane http://videos.mozilla.org/serv/blizzard/audio-slideshow
Y nueva sintaxis...
http://espadrine.github.com/New-In-A-Spec/es6/
Todo esto, ¿para cuándo?
En teoría, HTML5 no será un estándar hasta 2022
¿Qué hacemos hasta entonces?
Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Para saber más...
W3C http://dev.w3.org/html5/spec/Overview.html
WHATWG http://whatwg.org/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
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

Repaso rápido a los nuevos estándares web

Check these out next

Repaso rápido a los nuevos estándares web

Recommended

More Related Content

Viewers also liked(18)

Similar to Repaso rápido a los nuevos estándares web(20)

More from Pablo Garaizar(20)

Recently uploaded(20)

Repaso rápido a los nuevos estándares web