Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

html5

702 views

Published on

introducciona html5

Published in: Design
  • Be the first to comment

  • Be the first to like this

html5

  1. 1. INTRODUCCIÓN A Pablo Garaizar SagarminagaUniEncounter 2011, Eibar/Ermua
  2. 2. Agenda● Breve historia de HTML5.● ¿Qué es y qué no es HTML5?● Novedades en... ● HTML ● CSS ● JS● Soporte actual de HTML5
  3. 3. Breve historia...
  4. 4. Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
  5. 5. ¿Qué es...
  6. 6. TimedCanvas Web media2D API playback Storage MIME typeand protocol Document handler Microdata editing registration Cross-Browser Drag document history messaging & drop
  7. 7. ...y qué no es?
  8. 8. WebGeolocation SQL File API DatabaseWebGL SVG CSS3 The Web Indexed Web Workers Database sockets API
  9. 9. A pesar de esto...
  10. 10. JSHTML5 CSS3 APIs
  11. 11. Novedades
  12. 12. En HTML
  13. 13. <!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
  14. 14. Nueva estructura de documento
  15. 15. <html><html lang="en"><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
  16. 16. <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
  17. 17. <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
  18. 18. <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
  19. 19. <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
  20. 20. <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
  21. 21. <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
  22. 22. <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
  23. 23. <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
  24. 24. <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
  25. 25. <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
  26. 26. En CSS
  27. 27. 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/
  28. 28. border­radiusborder­top­left­radiusborder­top­right­radiusborder­bottom­right­radiusborder­bottom­left­radius­webkit­border­radius­webkit­border­top­left­radius­webkit­border­top­right­radius­webkit­border­bottom­right­radius­webkit­border­bottom­left­radius­moz­border­radius­moz­border­radius­topleft­moz­border­radius­topright­moz­border­radius­bottomright­moz­border­radius­bottomleft Bordes redondeados
  29. 29. #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://css3.bradshawenterprises.com/
  30. 30. #id { ­webkit­transition: all 1s ease­in­out; ­moz­transition: all 1s ease­in­out; ­o­transition: all 1s ease­in­out; transition: all 1s ease­in­out;} Transiciones
  31. 31. @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
  32. 32. En JS
  33. 33. 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
  34. 34. function show_status() {  var status = navigator.onLine ? Online : Offline;  alert(You are +status);}Eventos nuevos: window.ononline window.onoffline Offline / online
  35. 35. 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
  36. 36. history.pushState(json, title, url);addEvent(window, popstate, function (event) {  var data = event.state;  //...}); Web History
  37. 37. Todo esto, ¿para cuándo?
  38. 38. En teoría, HTML5 no será un estándar hasta 2022
  39. 39. En la práctica, soportadas muchas cosas http://www.findmebyip.com/litmus
  40. 40. Buena práctica: detectarfuncionalidades soportadas
  41. 41. 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;} Detección de funcionalidades
  42. 42. Modernizrhttp://www.modernizr.com
  43. 43. ¿Y si no hay soporte? Polyfills
  44. 44. <!­­[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]­­> ¿Polyqué? Polyfills ;-)
  45. 45. Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  46. 46. Para saber más...
  47. 47. W3Chttp://dev.w3.org/html5/spec/Overview.html
  48. 48. WHATWGhttp://whatwg.org/html
  49. 49. Dive into HTML5 http://diveintohtml5.org/
  50. 50. HTML5 Rockshttp://www.html5rocks.com
  51. 51. Improving the Performance of your HTML5 App http://www.html5rocks.com/tutorials/speed/html5/
  52. 52. HTML 5 Demos and Examples http://html5demos.com
  53. 53. Muchas gracias ;-)
  54. 54. Referencias● Dive into HTML5.● W3Schools.● IBM developer networks.● Quackit.● HTML5 Rocks.● HTML5 Demos and Examples.
  55. 55. All images are property of their ownowners*, content is licensed under aCreative Commons by-sa 3.0 license * W3C, WHATWG, Dive into HTML5, HTML5 Rocks, Modernizr, FindmebyIP

×