Repaso rápido a los nuevos estándares web
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Repaso rápido a los nuevos estándares web

  • 6,689 views
Uploaded on

Charla dentro del evento BilboStack.com, desarrollo web en Bilbao que tuvo lugar el 2 de junio de 2012 en la Universidad de Deusto.

Charla dentro del evento BilboStack.com, desarrollo web en Bilbao que tuvo lugar el 2 de junio de 2012 en la Universidad de Deusto.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,689
On Slideshare
3,253
From Embeds
3,436
Number of Embeds
12

Actions

Shares
Downloads
65
Comments
1
Likes
7

Embeds 3,436

http://blog.txipinet.com 2,630
http://bilbostack.com 791
http://cloud.feedly.com 3
http://webcache.googleusercontent.com 2
http://www.linkedin.com 2
http://mail.txipinet.com 2
https://www.google.es 1
http://www.feedly.com 1
http://127.0.0.1 1
http://nodeslide.herokuapp.com 1
http://us-w1.rockmelt.com 1
http://news.google.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. HTML5
  • 3. Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
  • 4. TimedCanvas Web media2D API playback Storage MIME typeand protocol Document handler Microdata editing registration Cross-Browser Drag document history messaging & drop
  • 5. WebGeolocation SQL File API DatabaseWebGL SVG CSS3 Web Web WebRTC Workers sockets
  • 6. JSHTML5 CSS3 APIs
  • 7. Novedades
  • 8. En el marcado...
  • 9. http://www.w3.org/TR/html5-diff/
  • 10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//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
  • 11. Nueva estructura de documento
  • 12. <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
  • 13. <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
  • 14. <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
  • 15. <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
  • 16. <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
  • 17. <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
  • 18. <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
  • 19. <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
  • 20. <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
  • 21. <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
  • 22. <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
  • 23. En CSS3...
  • 24. E[att^="val"]E[att$="val"]E[att*="val"] E:emptyE:root E:targetE:nth-child(n) E:enabledE:nth-last-child(n) E:disabledE:nth-of-type(n) E:checkedE:nth-last-of-type(n) E:selectionE:last-child E:not(selector)E:first-of-type E ~ FE:last-of-typeE:only-childE:only-of-type Nuevos selectoreshttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
  • 25. #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/
  • 26. 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/
  • 27. 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/
  • 28. @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
  • 29. 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
  • 30. En JavaScript...
  • 31. 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
  • 32. function show_status() { var status = navigator.onLine ? Online : Offline; alert(You are +status);}Eventos nuevos: window.ononline window.onoffline Offline / online
  • 33. function show_status() { var status = navigator.onLine ? Online : Offline; alert(You are +status);}Eventos nuevos: window.ononline window.onoffline Offline / online
  • 34. 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
  • 35. history.pushState(json, title, url);addEvent(window, popstate, function (event) { var data = event.state; //...}); Web History
  • 36. 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)
  • 37. Audio Data API + WebGL = insane http://videos.mozilla.org/serv/blizzard/audio-slideshow
  • 38. Y nueva sintaxis...
  • 39. http://espadrine.github.com/New-In-A-Spec/es6/
  • 40. Todo esto, ¿para cuándo?
  • 41. En teoría, HTML5 no será un estándar hasta 2022
  • 42. ¿Qué hacemos hasta entonces?
  • 43. Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 44. Para saber más...
  • 45. W3Chttp://dev.w3.org/html5/spec/Overview.html
  • 46. WHATWGhttp://whatwg.org/html
  • 47. Dive into HTML5 http://diveintohtml5.org/
  • 48. HTML5 Rockshttp://www.html5rocks.com
  • 49. Improving the Performance of your HTML5 App http://www.html5rocks.com/tutorials/speed/html5/
  • 50. HTML 5 Demos and Examples http://html5demos.com
  • 51. Muchas gracias ;-)
  • 52. Referencias● Dive into HTML5.● W3Schools.● IBM developer networks.● Quackit.● HTML5 Rocks.● HTML5 Demos and Examples.
  • 53. All images are property of their own owners*, content is licensed under aCreative Commons by-sa 3.0 license* W3C, WHATWG, Dive into HTML5, HTML5 Rocks, Modernizr, FindmebyIP, Troll.me, Memegenerator.net