REPASO RÁPIDO A LOS NUEVOS ESTÁNDARES WEB           HTML5, CSS3 y las nuevas API de JavaScript                 Pablo Garai...
HTML5
Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
TimedCanvas                       Web                 media2D API           playback   Storage MIME typeand protocol      ...
WebGeolocation    SQL       File API              DatabaseWebGL         SVG         CSS3   Web                    Web     ...
JSHTML5   CSS3               APIs
Novedades
En el marcado...
http://www.w3.org/TR/html5-diff/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC...
Nueva estructura de documento
<html><html lang="en" manifest="app.manifest"><meta><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><met...
<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 im...
<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>...
<audio><audio src="music.mp3"    autoplay loop="3" controls preload /><video><video width="320" height="240" controls>  <s...
<canvas><canvas id=”area” width=”320” height=”240”></canvas><script>function draw() {  var area = document.getElementById(...
<svg><svg id="flag" height="200" xmlns="http://www.w3.org/2000/svg">  <circle id="redcircle" cx="50" cy="50" r="50" fill="...
<input><input  type="search"                            search box  type="number"                            spinbox  type...
<datalist><input type=”text” list="cars" /><datalist id="cars">  <option value="BMW">  <option value="Ford">  <option valu...
<menu> + <command><menu>  <command onclick="alert(first!)" label="Do 1st Command"/>  <command onclick="alert(second!)" lab...
<details>Dive into HTML5<details open>  <legend>Pilgrim, M. (2011)</legend>  <p>    Mark Pilgrim, Dive into HTML5,    <a h...
<figure> +<figcaption><figure>  <img src=”fig1.jpg” title=”Graphic” />  <figcaption>Figure 1. Overall scores.</figcaption>...
En CSS3...
E[att^="val"]E[att$="val"]E[att*="val"]                                   E:emptyE:root                                   ...
#skew {   transform:skew(35deg);}#scale {   transform:scale(1,0.5);}#rotate {   transform:rotate(45deg);}#translate {   tr...
div {  transition-property: opacity;  transition-delay: 0.5s;  transition-duration: 2s;  transition-timing-function: linea...
div {  animation-name: diagonal-slide;  animation-duration: 5s;  animation-iteration-count: 10;}@keyframes diagonal-slide ...
@font-face {  font-family: <a-remote-font-name>;  src: <source> [,<source>]*;  [font-weight: <weight>];  [font-style: <sty...
div {  webkit-transition: opacity 2s linear;  moz-transition: opacity 2s linear;  ms-transition: opacity 2s linear;  o-tra...
En JavaScript...
function get_location() {  navigator.geolocation.getCurrentPosition(show_location);}function show_location(position) {  va...
function show_status() {  var status = navigator.onLine ? Online : Offline;  alert(You are +status);}Eventos nuevos:   win...
function show_status() {  var status = navigator.onLine ? Online : Offline;  alert(You are +status);}Eventos nuevos:   win...
var foo = localStorage.getItem("bar");// ...localStorage.setItem("bar", foo);var foo = localStorage["bar"];// ...localStor...
history.pushState(json, title, url);addEvent(window, popstate, function (event) {  var data = event.state;  //...});      ...
Timing control for script-based                              animations                          (RequestAnimationFrame)  ...
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?
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 Ex...
All images are property of their own owners*, content is licensed under aCreative Commons by-sa 3.0 license* W3C, WHATWG, ...
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
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
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
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
Upcoming SlideShare
Loading in...5
×

Repaso rápido a los nuevos estándares web

7,675

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

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,675
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
67
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Repaso rápido a los nuevos estándares web

  1. 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. 2. HTML5
  3. 3. Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
  4. 4. TimedCanvas Web media2D API playback Storage MIME typeand protocol Document handler Microdata editing registration Cross-Browser Drag document history messaging & drop
  5. 5. WebGeolocation SQL File API DatabaseWebGL SVG CSS3 Web Web WebRTC Workers sockets
  6. 6. JSHTML5 CSS3 APIs
  7. 7. Novedades
  8. 8. En el marcado...
  9. 9. http://www.w3.org/TR/html5-diff/
  10. 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. 11. Nueva estructura de documento
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. En CSS3...
  24. 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. 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. 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. 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. 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. 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. 30. En JavaScript...
  31. 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. 32. function show_status() { var status = navigator.onLine ? Online : Offline; alert(You are +status);}Eventos nuevos: window.ononline window.onoffline Offline / online
  33. 33. function show_status() { var status = navigator.onLine ? Online : Offline; alert(You are +status);}Eventos nuevos: window.ononline window.onoffline Offline / online
  34. 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. 35. history.pushState(json, title, url);addEvent(window, popstate, function (event) { var data = event.state; //...}); Web History
  36. 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. 37. Audio Data API + WebGL = insane http://videos.mozilla.org/serv/blizzard/audio-slideshow
  38. 38. Y nueva sintaxis...
  39. 39. http://espadrine.github.com/New-In-A-Spec/es6/
  40. 40. Todo esto, ¿para cuándo?
  41. 41. En teoría, HTML5 no será un estándar hasta 2022
  42. 42. ¿Qué hacemos hasta entonces?
  43. 43. Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  44. 44. Para saber más...
  45. 45. W3Chttp://dev.w3.org/html5/spec/Overview.html
  46. 46. WHATWGhttp://whatwg.org/html
  47. 47. Dive into HTML5 http://diveintohtml5.org/
  48. 48. HTML5 Rockshttp://www.html5rocks.com
  49. 49. Improving the Performance of your HTML5 App http://www.html5rocks.com/tutorials/speed/html5/
  50. 50. HTML 5 Demos and Examples http://html5demos.com
  51. 51. Muchas gracias ;-)
  52. 52. Referencias● Dive into HTML5.● W3Schools.● IBM developer networks.● Quackit.● HTML5 Rocks.● HTML5 Demos and Examples.
  53. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×