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 and microformats for pragmatists

3,233 views

Published on

Published in: Technology
  • Be the first to comment

HTML5 and microformats for pragmatists

  1. 1. <HTML 5> & microformats for pragmatists Wojtek Zajac Kraków, 29.04.2010 r.
  2. 2. H! I’m Wojtek Zając. Some facts about me: • Since 2006 working for XHTMLized.com (earlier: freelance) • specialities: • web accessibility • high performance optimization • worked for: • Twitter • FOX • Threadless • O’Reilly • also… User Experience Designer, PlatformaKiwi.pl (startup) wojtek zajac • @theanxy • wojtekzajac.com
  3. 3. wojtek zajac • @theanxy • wojtekzajac.com
  4. 4. ·A · } • Introduction M • New elements / attributes • XFN • Web Forms 2.0 • hCard • Use cases: • Accessibility (WAI-ARIA) • adr • Graphics (SVG/Canvas) • hCard • Multimedia (Video/Audio) • hCalendar • Geolocation • 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 . T I W 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. ·O !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 · Optional for 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. New structural elements <header> • header • nav <nav> • section <article> • article <aside> • aside <section> • footer <footer> wojtek zajac • @theanxy • wojtekzajac.com
  17. 17. Even more elements • hgroup This album got <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> points in review. • output You’re <progress value="48" • meter max="91"> halfway through • progress reading this article. wojtek zajac • @theanxy • wojtekzajac.com
  18. 18. Changes • Links can contain block elements • <b>, <i>, <small> with changed semantics <a href=”#” class=”story”> <img src=”img.png” /> • <address> issues <h4>Title</h4> • <ol> attributes: start, reversed <p>Text description</p> </a> • contenteditable • data-* wojtek zajac • @theanxy • wojtekzajac.com
  19. 19. Web Forms 2.0 much better than Your Old HTML 4.01 Forms 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. E-mail address <form> <input type="email"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  22. 22. Number input <form> <input type="number"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  23. 23. Web address <form> <input type="url"> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  24. 24. Range <form> <input type="range" min=“1” max=“11” value=“9”> <input type="submit" value="Go"> </form> wojtek zajac • @theanxy • wojtekzajac.com
  25. 25. Date, time <input type=”date”> O nly: <input type=”month”> <input type=”week”> <input type=”time”> <input type=”datetime”> wojtek zajac • @theanxy • wojtekzajac.com
  26. 26. Search Plays nic e with WA I-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 HTML 5 element role=”application” none role=”banner” none role=”complementary” <aside> role=”contentinfo” <footer> role=”main” none role=”navigation” <nav> role=”search” none ~ 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) <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
  35. 35. 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
  36. 36. Scalable Vector Graphics (SVG) var rect = $(‘#myRect’); rect.style.fill = ‘green’; rect.onclick(funtion(){ alert(‘Witaj świecie!’); }); wojtek zajac • @theanxy • wojtekzajac.com
  37. 37. 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
  38. 38. wojtek zajac • @theanxy • wojtekzajac.com
  39. 39. wojtek zajac • @theanxy • wojtekzajac.com
  40. 40. http://code.google.com/p/quake2-gwt-port/ wojtek zajac • @theanxy • wojtekzajac.com
  41. 41. V /A http://www.flickr.com/photos/sugu/145087521/
  42. 42. S youtube.com <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
  43. 43. N / <video src=video.mp4 controls width=300 height=400 autobuffer poster=poster.jpg> loop alternative content </video> autoplay Opera, Chrome, Firefox: Ogg Theora <audio src=audio.mp3> alternative content Safari, Chrome: H.264 </audio> wojtek zajac • @theanxy • wojtekzajac.com
  44. 44. http://media.chikuyonok.ru/ambilight/ wojtek zajac • @theanxy • wojtekzajac.com
  45. 45. P ~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash wojtek zajac • @theanxy • wojtekzajac.com
  46. 46. P 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
  47. 47. G
  48. 48. ❶ wojtek zajac • @theanxy • wojtekzajac.com
  49. 49. ❶ wojtek zajac • @theanxy • wojtekzajac.com
  50. 50. ❶ ❷ wojtek zajac • @theanxy • wojtekzajac.com
  51. 51. ❶ ❷ wojtek zajac • @theanxy • wojtekzajac.com
  52. 52. Pretty pr ecise. ❶ ❷ wojtek zajac • @theanxy • wojtekzajac.com
  53. 53. G current location function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // not supported } } wojtek zajac • @theanxy • wojtekzajac.com
  54. 54. wojtek zajac • @theanxy • wojtekzajac.com
  55. 55. W W
  56. 56. • JS threading • interface is not blocked • http://html5demos.com/worker wojtek zajac • @theanxy • wojtekzajac.com
  57. 57. When can I use HTML 5? • 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
  58. 58. When can I use HTML 5? • 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
  59. 59. U R 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
  60. 60. M
  61. 61. wojtek zajac • @theanxy • wojtekzajac.com
  62. 62. 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
  63. 63. Social Graph API http://code.google.com/apis/socialgraph/ wojtek zajac • @theanxy • wojtekzajac.com
  64. 64. wojtek zajac • @theanxy • wojtekzajac.com
  65. 65. <a href=“http://facebook.com/jkowalski”>My profile</a> wojtek zajac • @theanxy • wojtekzajac.com
  66. 66. <a href=“http://facebook.com/jkowalski”>My profile</a> wojtek zajac • @theanxy • wojtekzajac.com
  67. 67. Indentity consolidation <a href=“http://facebook.com/jkowalski” rel=“me”>My profile</a> wojtek zajac • @theanxy • wojtekzajac.com
  68. 68. Indentity consolidation <a href=“http://facebook.com/jkowalski” rel=“me”>My profile</a> wojtek zajac • @theanxy • wojtekzajac.com
  69. 69. XFN: XHTML friends network <a href=“http://joe.com/” rel=“friend”>Joe’s website</a> wojtek zajac • @theanxy • wojtekzajac.com
  70. 70. XFN: XHTML friends network Relation? <a href=“http://joe.com/” rel=“friend”>Joe’s website</a> wojtek zajac • @theanxy • wojtekzajac.com
  71. 71. wojtek zajac • @theanxy • wojtekzajac.com
  72. 72. · hCard · http://wojtekzajac.com/"> Wojtek Zajac wojtek zajac • @theanxy • wojtekzajac.com
  73. 73. · hCard · <div > <a href="http://wojtekzajac.com/"> <span >Wojtek</span> <span >Zajac</span> </a> </div> wojtek zajac • @theanxy • wojtekzajac.com
  74. 74. · 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
  75. 75. ❶ wojtek zajac Use case: Extracting physical address from a website • @theanxy • wojtekzajac.com
  76. 76. wojtek zajac • @theanxy • wojtekzajac.com wojtek zajac • • wojtekzajac.com
  77. 77. wojtek zajac • @theanxy • wojtekzajac.com wojtek zajac • • wojtekzajac.com
  78. 78. wojtek zajac • @theanxy • wojtekzajac.com wojtek zajac • • wojtekzajac.com
  79. 79. ❷ wojtek zajac Use case: Exporting business cards to the address book • @theanxy • wojtekzajac.com
  80. 80. wojtek zajac • @theanxy • wojtekzajac.com
  81. 81. wojtek zajac • @theanxy • wojtekzajac.com
  82. 82. wojtek zajac • @theanxy • wojtekzajac.com
  83. 83. wojtek zajac • @theanxy • wojtekzajac.com
  84. 84. ❸ wojtek zajac Use case: Adding event to the calendar • @theanxy • wojtekzajac.com
  85. 85. wojtek zajac • @theanxy • wojtekzajac.com
  86. 86. wojtek zajac • @theanxy • wojtekzajac.com
  87. 87. wojtek zajac • @theanxy • wojtekzajac.com
  88. 88. wojtek zajac • @theanxy • wojtekzajac.com
  89. 89. wojtek zajac • @theanxy • wojtekzajac.com
  90. 90. wojtek zajac • @theanxy • wojtekzajac.com
  91. 91. wojtek zajac • @theanxy • wojtekzajac.com
  92. 92. Specifications hCalendar events information hCard contact information rel-license specifying the license rel-nofollow blocking link–crawling rel-tag marking up tags Drafts hAtom: syndicated content rel-enclosure hAudio: audio files rel-home hListing: listings / classifieds rel-payment hRecipe: recipes hResume: resumes hReview: reviews wojtek zajac • @theanxy • wojtekzajac.com
  93. 93. U R Microformats.org official wiki http://microformats.org/wiki/Main_Page hCard generator http://microformats.org/code/hcard/creator hCalendar generator http://microformats.org/code/hcalendar/creator Optimus transformer http://microformatique.com/optimus/ Operator (Firefox plugin) https://addons.mozilla.org/en-US/firefox/addon/4106 Social Graph API http://codebits.eu/intra/s/session/79 wojtek zajac • @theanxy • wojtekzajac.com
  94. 94. Thanks! Questions? 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

×