<HTML 5>
 & microformats
 for pragmatists


Wojtek Zajac       Kraków, 29.04.2010 r.
H!
    I’m Wojtek Zając. Some facts about me:
•   Since 2006 working for XHTMLized.com
    (earlier: freelance)

•   speci...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
·A                           ·




                            }
•   Introduction                                         ...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
R
                                                 .
                      T            I                 W



http://www....
Tim Berners-Lee
                   DIRECTOR, WORLD WIDE WEB CONSORTIUM


                      “The attempt to get the wor...
·O                  !DOCTYPE ·


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/...
·N                  !DOCTYPE ·

                Optional for
                                 XHTML 5


<!DOCTYPE html>
<h...
DIV ID=“header”


                    DIV ID=“nav”

 DIV CLASS=“article”



                                        DIV ID...
<header>


                      <nav>

       <article>



                                            <aside>
      <sec...
<header>


                      <nav>

       <article>



                                            <aside>
      <sec...
New structural elements


                                                       <header>
• header
• nav                  ...
Even more elements


•   hgroup                                   This album got
                                         ...
Changes


•   Links can contain block elements
•   <b>, <i>, <small> with changed semantics             <a href=”#” class=...
Web Forms 2.0
much better than Your Old HTML 4.01 Forms




        wojtek zajac   •   @theanxy   •   wojtekzajac.com
Placeholder text




<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Se...
E-mail address


<form>
  <input type="email">
  <input type="submit" value="Go">
</form>




           wojtek zajac   • ...
Number input


<form>
  <input type="number">
  <input type="submit" value="Go">
</form>




           wojtek zajac   •  ...
Web address


<form>
  <input type="url">
  <input type="submit" value="Go">
</form>




           wojtek zajac   •   @th...
Range




<form>
  <input type="range" min=“1” max=“11” value=“9”>
  <input type="submit" value="Go">
</form>




     woj...
Date, time

<input type=”date”>                                  O nly:
<input type=”month”>
<input type=”week”>
<input ty...
Search



                                       Plays nic
                                                 e   with WA
  ...
WAI-ARIA
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
WAI-ARIA Landmark Roles

    Landmark                              HTML 5 element
  role=”application”                    ...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
role=”banner”
                                   role=”search”




                                 role=”main”




    ro...
SVG/C
Scalable Vector Graphics (SVG)



<rect

   x=”0” y=”0”

   width=”100” height=”100”

   fill=”blue” stroke=”red”

   stro...
Scalable Vector Graphics (SVG)
<!DOCTYPE html>

<html>

<body>

<svg width=”200” height=”200”>

   <rect

         x=”0” y...
Scalable Vector Graphics (SVG)


var rect = $(‘#myRect’);

rect.style.fill = ‘green’;

rect.onclick(funtion(){

      aler...
Canvas API

<canvas id=”canvas” width=”150” height=”150”></canvas>



var canvas = document.getElementById(“canvas”);

if ...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
http://code.google.com/p/quake2-gwt-port/

wojtek zajac   •   @theanxy   •   wojtekzajac.com
V   /A
http://www.flickr.com/photos/sugu/145087521/
S
                                            youtube.com


<object width="640" height="385">

  <param name="movie" value...
N                                   /

  <video src=video.mp4                                         controls
         wi...
http://media.chikuyonok.ru/ambilight/

wojtek zajac   •   @theanxy   •   wojtekzajac.com
P




~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash

            wojtek zajac   •   @theanxy   •...
P
                                                        100%
                                                        90%...
G
❶




wojtek zajac   •   @theanxy   •   wojtekzajac.com
❶




    wojtek zajac   •   @theanxy   •   wojtekzajac.com
❶                                     ❷




    wojtek zajac   •   @theanxy   •   wojtekzajac.com
❶                                     ❷




    wojtek zajac   •   @theanxy   •   wojtekzajac.com
Pretty pr
                                               ecise.
❶                                      ❷




    wojtek za...
G
                      current location


function get_location() {
  if (Modernizr.geolocation) {
    navigator.geolocat...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
W
W
•   JS threading
               •   interface is not blocked
               •   http://html5demos.com/worker




wojtek za...
When can I use HTML 5?


•   HTML 5 shiv

         <!--[if lt IE 9]>
         <script src="http://html5shiv.googlecode.com...
When can I use HTML 5?


•   HTML 5 shiv

         <!--[if lt IE 9]>
         <script src="http://html5shiv.googlecode.com...
U                        R

       A List Apart   http://www.alistapart.com/articles/previewo tml5

        W3C spec      ...
M
wojtek zajac   •   @theanxy   •   wojtekzajac.com
Microformats
                                    http://microformats.org/about


               “Designed for humans first ...
Social Graph API
     http://code.google.com/apis/socialgraph/




  wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
<a href=“http://facebook.com/jkowalski”>My profile</a>



    wojtek zajac   •   @theanxy   •   wojtekzajac.com
<a href=“http://facebook.com/jkowalski”>My profile</a>



    wojtek zajac   •   @theanxy   •   wojtekzajac.com
Indentity consolidation




<a href=“http://facebook.com/jkowalski” rel=“me”>My profile</a>


        wojtek zajac   •   @...
Indentity consolidation




<a href=“http://facebook.com/jkowalski” rel=“me”>My profile</a>


        wojtek zajac   •   @...
XFN:
                                       XHTML friends network




<a href=“http://joe.com/” rel=“friend”>Joe’s website...
XFN:
                                       XHTML friends network




              Relation?




<a href=“http://joe.com/...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
· hCard ·


                          http://wojtekzajac.com/">
                           Wojtek
                        ...
· hCard ·


<div                   >
   <a                           href="http://wojtekzajac.com/">
     <span           ...
· hCard ·


<div class=“vcard”>
   <a class=“fn n url” href="http://wojtekzajac.com/">
     <span class=“given-name”>Wojte...
❶   wojtek zajac
                   Use case:
Extracting physical address
      from a website



                   •   @...
wojtek zajac • @theanxy • wojtekzajac.com
 wojtek zajac •          • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
 wojtek zajac •          • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
 wojtek zajac •          • wojtekzajac.com
❷  wojtek zajac
                  Use case:
Exporting business cards
  to the address book



                  •   @thean...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
❸
wojtek zajac
               Use case:
      Adding event
     to the calendar



               •   @theanxy   •   wojte...
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
wojtek zajac   •   @theanxy   •   wojtekzajac.com
Specifications
            hCalendar          events information
                  hCard        contact information
       ...
U                         R

Microformats.org official wiki     http://microformats.org/wiki/Main_Page

           hCard gen...
Thanks!
                            Questions?



http://www.slideshare.net/wojciechzajac

Wojtek Zając
wojtek@wojtekzajac...
HTML5 and microformats for pragmatists
HTML5 and microformats for pragmatists
HTML5 and microformats for pragmatists
HTML5 and microformats for pragmatists
HTML5 and microformats for pragmatists
HTML5 and microformats for pragmatists
HTML5 and microformats for pragmatists
Upcoming SlideShare
Loading in...5
×

HTML5 and microformats for pragmatists

2,437

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,437
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

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

×