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 i mikroformaty dla pragmatyków

2,894 views

Published on

http://artbuzz.edu.pl/training/artbuzz-1/

Kraków
AGH University of Science and Technology
29.04.2010 r.

Published in: Technology

HTML5 i mikroformaty dla pragmatyków

  1. 1. <HTML 5> i mikroformaty dla pragmatyków Wojtek Zajac Kraków, 29.04.2010 r.
  2. 2. C ! Nazywam się Wojtek Zając. Kilka faktów: • od 2006 r. związany z XHTMLized.com (wcześniej: freelance) • specjalność: • audyty dostępności (web accessibility) • optymalizacja wydajności front-end • klienci: • Twitter • FOX • Threadless • O’Reilly • obecnie… User Experience Designer, PlatformaKiwi.pl wojtek zajac • @theanxy • wojtekzajac.com
  3. 3. wojtek zajac • @theanxy • wojtekzajac.com
  4. 4. ·A · } • Wstęp M • Nowe elementy i atrybuty • XFN • Web Forms 2.0 • hCard • Przypadki użycia: • Dostępność (WAI-ARIA) • adr • Grafika (SVG/Canvas) • hCard • Multimedia (Video/Audio) • hCalendar • Geolokalizacja • Web Workers wojtek zajac • @theanxy • wojtekzajac.com
  5. 5. wojtek zajac • @theanxy • wojtekzajac.com
  6. 6. wojtek zajac • @theanxy • wojtekzajac.com
  7. 7. wojtek zajac • @theanxy • wojtekzajac.com
  8. 8. wojtek zajac • @theanxy • wojtekzajac.com
  9. 9. R . Ś I http://www.flickr.com/photos/sprengben/4315145017/ wojtek zajac • @theanxy • wojtekzajac.com
  10. 10. Tim Berners-Lee DIRECTOR, WORLD WIDE WEB CONSORTIUM “The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work.” wojtek zajac • @theanxy • wojtekzajac.com
  11. 11. ·N !DOCTYPE · <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> wojtek zajac • @theanxy • wojtekzajac.com
  12. 12. ·N !DOCTYPE · Opcjonalne dla XHTML 5 <!DOCTYPE html> <html lang=“pl”> <head> <meta charset="utf-8"> wojtek zajac • @theanxy • wojtekzajac.com
  13. 13. DIV ID=“header” DIV ID=“nav” DIV CLASS=“article” DIV ID=“sidebar” DIV CLASS=“section” DIV ID=“footer” wojtek zajac • @theanxy • wojtekzajac.com
  14. 14. <header> <nav> <article> <aside> <section> <footer> wojtek zajac • @theanxy • wojtekzajac.com
  15. 15. <header> <nav> <article> <aside> <section> <footer> wojtek zajac • @theanxy • wojtekzajac.com
  16. 16. Nowe strukturalne elementy <header> • header • nav <nav> • section <article> • article <aside> • aside <section> • footer <footer> wojtek zajac • @theanxy • wojtekzajac.com
  17. 17. Więcej nowych elementów • hgroup Ten album uzyskał ocenę <meter value="5.2" • details min="0.0" max="10.0" • summary low="5.0" high="7.5" • mark optimum="9.0"> • time 7.4 </meter> w naszym teście. • output Jesteś <progress value="48" • meter max="91"> w połowie czytania • progress tego artykułu. wojtek zajac • @theanxy • wojtekzajac.com
  18. 18. Zmiany • blokowe linki! • <b>, <i>, <small> zmieniły znaczenie <a href=”#” class=”story”> <img src=”img.png” /> • <address> ma nową definicję <h4>Tytuł</h4> <p>Opis tekstowy</p> • atrybuty <ol>: start, reversed </a> • contenteditable • data-* wojtek zajac • @theanxy • wojtekzajac.com
  19. 19. Web Forms 2.0 poprawiona wersja formularzy z HTML 4.01 wojtek zajac • @theanxy • wojtekzajac.com
  20. 20. Placeholder text <form> <input name="q" placeholder="Search Bookmarks and History"> <input type="submit" value="Search"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  21. 21. Adres e-mail <form> <input type="email"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  22. 22. Pole liczbowe <form> <input type="number"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  23. 23. Adres WWW <form> <input type="url"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  24. 24. Zakres <form> <input type="range" min=“1” max=“11” value=“9”> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  25. 25. Czas <input type=”date”> Tylko: <input type=”month”> <input type=”week”> <input type=”time”> <input type=”datetime”> wojtek zajac • @theanxy • wojtekzajac.com
  26. 26. Wyszukiwanie Wspólgr a z WAI- ARIA! <input type="search" role=”search”> wojtek zajac • @theanxy • wojtekzajac.com
  27. 27. WAI-ARIA
  28. 28. wojtek zajac • @theanxy • wojtekzajac.com
  29. 29. wojtek zajac • @theanxy • wojtekzajac.com
  30. 30. WAI-ARIA Landmark Roles Landmark Element HTML 5 role=”application” brak role=”banner” brak role=”complementary” <aside> role=”contentinfo” <footer> role=”main” brak role=”navigation” <nav> role=”search” brak ~ The Paciello Group wojtek zajac • @theanxy • wojtekzajac.com
  31. 31. wojtek zajac • @theanxy • wojtekzajac.com
  32. 32. role=”banner” role=”search” role=”main” role=”main” role=”complementary” role=”contentinfo” wojtek zajac • @theanxy • wojtekzajac.com
  33. 33. SVG/C
  34. 34. Scalable Vector Graphics (SVG) wojtek zajac • @theanxy • wojtekzajac.com
  35. 35. Scalable Vector Graphics (SVG) <rect wojtek zajac • @theanxy • wojtekzajac.com
  36. 36. Scalable Vector Graphics (SVG) <rect x=”0” y=”0” wojtek zajac • @theanxy • wojtekzajac.com
  37. 37. Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” wojtek zajac • @theanxy • wojtekzajac.com
  38. 38. Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” wojtek zajac • @theanxy • wojtekzajac.com
  39. 39. Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” wojtek zajac • @theanxy • wojtekzajac.com
  40. 40. Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” wojtek zajac • @theanxy • wojtekzajac.com
  41. 41. Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” id=”myRect” class=”chart” /> wojtek zajac • @theanxy • wojtekzajac.com
  42. 42. Scalable Vector Graphics (SVG) <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” id=”myRect” class=”chart” /> wojtek zajac • @theanxy • wojtekzajac.com
  43. 43. Scalable Vector Graphics (SVG) <!DOCTYPE html> <html> <body> <svg width=”200” height=”200”> <rect x=”0” y=”0” width=”100” height=”100” fill=”blue” stroke=”red” stroke-width=”5px” rx=”8” ry=”8” id=”myRect” class=”chart” /> </svg> </body> </html> wojtek zajac • @theanxy • wojtekzajac.com
  44. 44. Scalable Vector Graphics (SVG) wojtek zajac • @theanxy • wojtekzajac.com
  45. 45. Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); wojtek zajac • @theanxy • wojtekzajac.com
  46. 46. Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; wojtek zajac • @theanxy • wojtekzajac.com
  47. 47. Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ wojtek zajac • @theanxy • wojtekzajac.com
  48. 48. Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ alert(‘Witaj świecie!’); wojtek zajac • @theanxy • wojtekzajac.com
  49. 49. Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ alert(‘Witaj świecie!’); }); wojtek zajac • @theanxy • wojtekzajac.com
  50. 50. Canvas API wojtek zajac • @theanxy • wojtekzajac.com
  51. 51. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> wojtek zajac • @theanxy • wojtekzajac.com
  52. 52. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); wojtek zajac • @theanxy • wojtekzajac.com
  53. 53. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { wojtek zajac • @theanxy • wojtekzajac.com
  54. 54. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); wojtek zajac • @theanxy • wojtekzajac.com
  55. 55. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; wojtek zajac • @theanxy • wojtekzajac.com
  56. 56. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); wojtek zajac • @theanxy • wojtekzajac.com
  57. 57. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0 200, 0.5)”; wojtek zajac • @theanxy • wojtekzajac.com
  58. 58. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0 200, 0.5)”; ctx.fillRect (30, 30, 55, 50); wojtek zajac • @theanxy • wojtekzajac.com
  59. 59. Canvas API <canvas id=”canvas” width=”150” height=”150”></canvas> var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0 200, 0.5)”; ctx.fillRect (30, 30, 55, 50); } wojtek zajac • @theanxy • wojtekzajac.com
  60. 60. wojtek zajac • @theanxy • wojtekzajac.com
  61. 61. wojtek zajac • @theanxy • wojtekzajac.com
  62. 62. http://code.google.com/p/quake2-gwt-port/ wojtek zajac • @theanxy • wojtekzajac.com
  63. 63. V /A http://www.flickr.com/photos/sugu/145087521/
  64. 64. S <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/km2UpEcSUGY&hl=en_US&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/km2UpEcSUGY&hl=en_US&fs=1&" type="application/x-shockwave-flash" width="640" height="385"> </embed> </object> wojtek zajac • @theanxy • wojtekzajac.com
  65. 65. S <video src=video.mp4 controls width=300 height=400 autobuffer poster=okladka.jpg> loop Treść alternatywna tutaj </video> autoplay Opera, Chrome, Firefox: Ogg Theora <audio src=audio.mp3> Treść alternatywna tutaj Safari, Chrome: H.264 </audio> wojtek zajac • @theanxy • wojtekzajac.com
  66. 66. http://media.chikuyonok.ru/ambilight/ wojtek zajac • @theanxy • wojtekzajac.com
  67. 67. W ~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash wojtek zajac • @theanxy • wojtekzajac.com
  68. 68. W 100% 90% 80% 70% Zużycie procesora 60% 50% 40% 30% 20% 10% Flash 0% HTML 5 ~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash wojtek zajac • @theanxy • wojtekzajac.com
  69. 69. G
  70. 70. ❶ wojtek zajac • @theanxy • wojtekzajac.com
  71. 71. ❶ wojtek zajac • @theanxy • wojtekzajac.com
  72. 72. ❶ ❷ wojtek zajac • @theanxy • wojtekzajac.com
  73. 73. ❶ ❷ wojtek zajac • @theanxy • wojtekzajac.com
  74. 74. Calkiem dokladn ❶ ❷ ie :) wojtek zajac • @theanxy • wojtekzajac.com
  75. 75. P obecnej lokacji function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // brak wsparcia } } wojtek zajac • @theanxy • wojtekzajac.com
  76. 76. wojtek zajac • @theanxy • wojtekzajac.com
  77. 77. W W
  78. 78. • wątkowanie JS • interfejs nie jest blokowany • http://html5demos.com/worker wojtek zajac • @theanxy • wojtekzajac.com
  79. 79. Czy powinienem używać HTML 5 już dzisiaj? • HTML 5 shiv <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script> <![endif]--> http://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com/ wojtek zajac • @theanxy • wojtekzajac.com
  80. 80. Czy powinienem używać HTML 5 już dzisiaj? • HTML 5 shiv <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script> <![endif]--> http://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com/ wojtek zajac • @theanxy • wojtekzajac.com
  81. 81. P Z A List Apart http://www.alistapart.com/articles/previewo tml5 W3C spec http://dev.w3.org/html5/spec/Overview.html HTML 5 differences http://www.w3.org/TR/html5-diff/ Dive into HTML 5 http://diveintohtml5.org HTML 5 Doctor http://html5doctor.com HTML 5 Readiness http://html5readiness.com/ wojtek zajac • @theanxy • wojtekzajac.com
  82. 82. M
  83. 83. wojtek zajac • @theanxy • wojtekzajac.com
  84. 84. Microformats http://microformats.org/about “Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.” wojtek zajac • @theanxy • wojtekzajac.com
  85. 85. Social Graph API http://code.google.com/apis/socialgraph/ wojtek zajac • @theanxy • wojtekzajac.com
  86. 86. wojtek zajac • @theanxy • wojtekzajac.com
  87. 87. <a href=“http://facebook.com/jkowalski”>Mój profil</a> wojtek zajac • @theanxy • wojtekzajac.com
  88. 88. <a href=“http://facebook.com/jkowalski”>Mój profil</a> wojtek zajac • @theanxy • wojtekzajac.com
  89. 89. Indentity consolidation <a href=“http://facebook.com/jkowalski” rel=“me”>Mój profil</a> wojtek zajac • @theanxy • wojtekzajac.com
  90. 90. Indentity consolidation <a href=“http://facebook.com/jkowalski” rel=“me”>Mój profil</a> wojtek zajac • @theanxy • wojtekzajac.com
  91. 91. XFN: XHTML friends network <a href=“http://franek.com/” rel=“friend”>Strona Franka</a> wojtek zajac • @theanxy • wojtekzajac.com
  92. 92. XFN: XHTML friends network Relacja? <a href=“http://franek.com/” rel=“friend”>Strona Franka</a> wojtek zajac • @theanxy • wojtekzajac.com
  93. 93. wojtek zajac • @theanxy • wojtekzajac.com
  94. 94. · hCard · http://wojtekzajac.com/"> Wojtek Zajac wojtek zajac • @theanxy • wojtekzajac.com
  95. 95. · hCard · <div > <a href="http://wojtekzajac.com/"> <span >Wojtek</span> <span >Zajac</span> </a> </div> wojtek zajac • @theanxy • wojtekzajac.com
  96. 96. · hCard · <div class=“vcard”> <a class=“fn n url” href="http://wojtekzajac.com/"> <span class=“given-name”>Wojtek</span> <span class=“family-name”>Zajac</span> </a> </div> wojtek zajac • @theanxy • wojtekzajac.com
  97. 97. ❶ Przypadek użycia: Wykorzystanie adresu na stronie WWW wojtek zajac • @theanxy • wojtekzajac.com
  98. 98. wojtek zajac • @theanxy • wojtekzajac.com wojtek zajac • • wojtekzajac.com
  99. 99. wojtek zajac • @theanxy • wojtekzajac.com wojtek zajac • • wojtekzajac.com
  100. 100. wojtek zajac • @theanxy • wojtekzajac.com wojtek zajac • • wojtekzajac.com
  101. 101. ❷ Przypadek użycia: Zapis wizytówek do książki adresowej wojtek zajac • @theanxy • wojtekzajac.com
  102. 102. wojtek zajac • @theanxy • wojtekzajac.com
  103. 103. wojtek zajac • @theanxy • wojtekzajac.com
  104. 104. wojtek zajac • @theanxy • wojtekzajac.com
  105. 105. wojtek zajac • @theanxy • wojtekzajac.com
  106. 106. ❸ Przypadek użycia: Dodanie wydarzenia do kalendarza wojtek zajac • @theanxy • wojtekzajac.com
  107. 107. wojtek zajac • @theanxy • wojtekzajac.com
  108. 108. wojtek zajac • @theanxy • wojtekzajac.com
  109. 109. wojtek zajac • @theanxy • wojtekzajac.com
  110. 110. wojtek zajac • @theanxy • wojtekzajac.com
  111. 111. wojtek zajac • @theanxy • wojtekzajac.com
  112. 112. wojtek zajac • @theanxy • wojtekzajac.com
  113. 113. wojtek zajac • @theanxy • wojtekzajac.com
  114. 114. Specyfikacje hCalendar informacje o wydarzeniach hCard informacje o kontaktach rel-license oznaczanie licencji rel-nofollow ograniczanie podążania za linkami rel-tag tagi Szkice hAtom: treść aktualizowana rel-enclosure hAudio: pliki dźwiękowe rel-home hListing: ogłoszenia rel-payment hRecipe: przepisy hResume: publikowane CV hReview: recenzje wojtek zajac • @theanxy • wojtekzajac.com
  115. 115. Przydatne linki Wiki microformats.org http://microformats.org/wiki/Main_Page Generator hCard http://microformats.org/code/hcard/creator Generator hCalendar http://microformats.org/code/hcalendar/creator Optimus (transformer) http://microformatique.com/optimus/ Operator (plugin do Firefoksa) https://addons.mozilla.org/en-US/firefox/addon/4106 Social Graph API http://codebits.eu/intra/s/session/79 wojtek zajac • @theanxy • wojtekzajac.com
  116. 116. Dziękuję za uwagę. Pytania? http://www.slideshare.net/wojciechzajac Wojtek Zając wojtek@wojtekzajac.com This work is licensed under a Creative @theanxy Commons Attribution 3.0 Unported License

×