AIGA EDGE

670 views

Published on

Presentation to local AIGA

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

  • Be the first to like this

No Downloads
Views
Total views
670
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • AIGA EDGE

    1. 1. HTML5For Designers?
    2. 2. HTML5 ForDesignersJeremy Keith
    3. 3. Why Should Designers CareAbout Markup?
    4. 4. Im shocked that in 2010 Im still comingacross ‘web designers’ who cant codetheir own designs.
    5. 5. Architects dont build thebuildings they design
    6. 6. But...
    7. 7. But...Architects understand the building process
    8. 8. But...Architects understand the building processArchitects understand the requirements of the various trades
    9. 9. But...Architects understand the building processArchitects understand the requirements of the various tradesArchitects understand the limitations of the materials selected
    10. 10. The best architects DO know how to build their designs
    11. 11. Know That vs Know How
    12. 12. Know That vs Know Howknow that the wrist rotates to throw a curve without knowing how to strike out Ryan Braun.
    13. 13. Know That vs Know Howknow that the wrist rotates to throw a curve without knowing how to strike out Ryan Braun.know that water pipes need to run through this wall without knowing how to join the pipes perfectly
    14. 14. Know That vs Know Howknow that the wrist rotates to throw a curve without knowing how to strike out Ryan Braun.know that water pipes need to run through this wall without knowing how to join the pipes perfectlyknow that a piece of content should be marked as navigation, without knowing how to compensate for every (un)known browser bug.
    15. 15. Basic Markup Knowledge
    16. 16. Basic Markup KnowledgeIs easy to acquire
    17. 17. Basic Markup KnowledgeIs easy to acquireImproves communication
    18. 18. Basic Markup KnowledgeIs easy to acquireImproves communicationGives a better understanding of the medium
    19. 19. Basic Markup KnowledgeIs easy to acquireImproves communicationGives a better understanding of the mediumSaves Time
    20. 20. Isnt HTML5 still changing?
    21. 21. “Web pundits dumbfounded as W3C votes to take HTML5 to Last Call before Rapture!”
    22. 22. Last Call
    23. 23. Last CallWorking Group believes it has now satisfied the technical requirements
    24. 24. Last CallWorking Group believes it has now satisfied the technical requirementsWorking Group believes it has satisfied dependencies on other groups
    25. 25. Last CallWorking Group believes it has now satisfied the technical requirementsWorking Group believes it has satisfied dependencies on other groupsWorking Group is seeking confirmation of both
    26. 26. Last CallWorking Group believes it has now satisfied the technical requirementsWorking Group believes it has satisfied dependencies on other groupsWorking Group is seeking confirmation of bothWill last a minimum of three weeks, chairs expect ten
    27. 27. Comments solicited onHTML5HTML+RDFaHTML MicrodataHTML Canvas 2DPolyglot Markup (HTML-compatible XHTML)Text Alternatives for HTML5
    28. 28. HTML5 - It’s all aboutsemantics!
    29. 29. HTML5 - It’s all aboutsemantics! POSH - Plain Old Semantic HTML
    30. 30. HTML5 - It’s all aboutsemantics! POSH - Plain Old Semantic HTML Tags describe content, not presentation or SEO
    31. 31. HTML5 - It’s all aboutsemantics! POSH - Plain Old Semantic HTML Tags describe content, not presentation or SEO Begin thinking semantically
    32. 32. Thinking Semantically
    33. 33. Thinking SemanticallyOutline your document Map document sections to sections of your outline Use sectioning elements to reflect that structure http://gsnedders.html5.org/outliner/
    34. 34. Thinking SemanticallyOutline your document Map document sections to sections of your outline Use sectioning elements to reflect that structure http://gsnedders.html5.org/outliner/Expand to more complete site outline Aids document processing
    35. 35. New Structure Elements
    36. 36. New Structure ElementsThey’re not just <div>’s with a new name
    37. 37. New Structure ElementsThey’re not just <div>’s with a new nameThey have semantic meanings which can be used byassistive technologies Can locate navigation links more easily Locate page’s main content easily Pages can be meaningfully processed (SEO, etc.)
    38. 38. Sectioning Elements
    39. 39. Sectioning ElementsThere are far more in HTML5 than just <div>
    40. 40. Sectioning ElementsThere are far more in HTML5 than just <div>To avoid confusion, ask yourself a series of questionsabout the content of the section to help clarify yourchoice
    41. 41. Is it introductory info?
    42. 42. Is it introductory info? This info could also include a ToC or other nav aids, such as search forms.
    43. 43. Is it introductory info? This info could also include a ToC or other nav aids, such as search forms. If yes, mark it up as <header>
    44. 44. Does it contain summaryinformation?
    45. 45. Does it contain summaryinformation?This sort of information would include info such ascopyright date, author information, links to relateddocuments, etc.
    46. 46. Does it contain summaryinformation?This sort of information would include info such ascopyright date, author information, links to relateddocuments, etc.If yes, mark it up as <footer>
    47. 47. Is it a major navigationblock?
    48. 48. Is it a major navigationblock? If yes, use the <nav> element to mark it up
    49. 49. Does it make sense as astandalone item?
    50. 50. Does it make sense as astandalone item?If yes, mark it up as <article>
    51. 51. Is it directly related to themain content?
    52. 52. Is it directly related to themain content? If yes, it’s either <aside> or <figure>
    53. 53. Is it directly related to themain content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content?
    54. 54. Is it directly related to themain content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside>
    55. 55. Is it directly related to themain content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix?
    56. 56. Is it directly related to themain content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix? If yes, mark it up as <figure>
    57. 57. Is it directly related to themain content? If yes, it’s either <aside> or <figure> Is it required in order to understand the content? If no, mark it up as <aside> If yes, could it also be an appendix? If yes, mark it up as <figure> If no, it’s really part of the main content (see next question)
    58. 58. Might it logically have itsown heading?
    59. 59. Might it logically have itsown heading? If yes, mark it up as a <section>
    60. 60. Does it have semanticmeaning?
    61. 61. Does it have semanticmeaning?If yes, mark it up with the element that reflects itssemantic value
    62. 62. Does it have semanticmeaning?If yes, mark it up with the element that reflects itssemantic valueIf no, then use a <div>
    63. 63. <audio> Browser mp3 Vorbis wav AAC Firefox x x Opera x x Safari x x x Chrome x x IE9 x ? x
    64. 64. <audio> Browser mp3 Vorbis wav AACProblematic, due tolack of unified suport Firefox x x Opera x x Safari x x x Chrome x x IE9 x ? x
    65. 65. <audio> Browser mp3 Vorbis wav AACProblematic, due tolack of unified suport Firefox x xElement allows Opera x xfallback sources Safari x x x Chrome x x IE9 x ? x
    66. 66. <audio> Browser mp3 Vorbis wav AACProblematic, due tolack of unified suport Firefox x xElement allows Opera x xfallback sources Safari x x xhttp://dev.opera.com/ Chrome x xarticles/view/html5-audio-radio-player/ IE9 x ? x
    67. 67. Audio Delivery jPlayer - http://www.jplayer.org/ jQuery-based audio player Speakker - http://www.speakker.com/
    68. 68. <video> Browser Theora H.264 WebM Chrome x x * Firefox x * IE9 * Opera x x Safari x
    69. 69. <video> Browser Theora H.264 WebMLacks universal support Chrome x x * Firefox x * IE9 * Opera x x Safari x
    70. 70. <video> Browser Theora H.264 WebMLacks universal support Chrome x x *Allows for fallback Firefox x *sources IE9 * Opera x x Safari x
    71. 71. <video> Browser Theora H.264 WebMLacks universal support Chrome x x *Allows for fallback Firefox x *sources IE9 *IE9 will support VP8 Opera x xcodec with separateinstall, but not WebM Safari x
    72. 72. Flash as fallback
    73. 73. Flash as fallback Currently supports H.264 video on all supported platforms
    74. 74. Flash as fallback Currently supports H.264 video on all supported platforms Announced support for VP8, not WebM, and so far no working examples.
    75. 75. Video Delivery
    76. 76. Video Deliveryhttp://camendesign.com/code/video_for_everybody
    77. 77. Video Deliveryhttp://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv files
    78. 78. Video Deliveryhttp://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv filesProjekktor - http://www.projekktor.com/
    79. 79. Video Deliveryhttp://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv filesProjekktor - http://www.projekktor.com/jPlayer - http://www.jplayer.org/
    80. 80. Video Deliveryhttp://camendesign.com/code/video_for_everybody HTML solution which uses multiple sources to support video delivery, falling back to Flash, and even to .wmv filesProjekktor - http://www.projekktor.com/jPlayer - http://www.jplayer.org/ jQuery-based video player
    81. 81. <details>
    82. 82. <details> Expandable box containing further information
    83. 83. <details> Expandable box containing further information Contains <summary> element (title of details box) followed by flow content
    84. 84. <details> Expandable box containing further information Contains <summary> element (title of details box) followed by flow content Enables authors to implant further details in a page without resorting to javascript
    85. 85. Forms
    86. 86. FormsMost <form> improvements mimic current javascriptpractice
    87. 87. FormsMost <form> improvements mimic current javascriptpracticeSupport for them is currently spotty and idiosyncratic
    88. 88. FormsMost <form> improvements mimic current javascriptpracticeSupport for them is currently spotty and idiosyncraticBest practice is to set up a fallback to javascript fordumb browsers to use.
    89. 89. New Form Field Attributes
    90. 90. New Form Field Attributesautofocus Focus will automatically start on this field
    91. 91. New Form Field Attributesautofocus Focus will automatically start on this fieldplaceholder Placeholder text
    92. 92. New Form Field Attributesautofocus Focus will automatically start on this fieldplaceholder Placeholder textuse javascript fallback if (!("autofocus" in document.createElement("input")))
    93. 93. New <input> types
    94. 94. New <input> typesEmail, URL, Search, Color
    95. 95. New <input> typesEmail, URL, Search, ColorNumber, Range min, max, step, value stepUp, stepDown, valueAsNumber
    96. 96. New <input> typesEmail, URL, Search, ColorNumber, Range min, max, step, value stepUp, stepDown, valueAsNumberDate
    97. 97. Why use them?
    98. 98. Why use them?If not supported, no effect on browser
    99. 99. Why use them?If not supported, no effect on browserSome user agents can modify behavior accordingly
    100. 100. Why use them?If not supported, no effect on browserSome user agents can modify behavior accordinglyIf supported, built-in-browser validation will checkthem for you
    101. 101. Why use them?If not supported, no effect on browserSome user agents can modify behavior accordinglyIf supported, built-in-browser validation will checkthem for you pattern attribute supplies regex for “normal” fields
    102. 102. Why use them?If not supported, no effect on browserSome user agents can modify behavior accordinglyIf supported, built-in-browser validation will checkthem for you pattern attribute supplies regex for “normal” fieldsIf not supported, use a js fallback
    103. 103. But they don’t work everywhere!!
    104. 104. HTML5 Boilerplate - http://html5boilerplate.com/
    105. 105. HTML5 Boilerplate - http://html5boilerplate.com/modernizr -http://modernizr.github.com/Modernizr/2.0- beta/
    106. 106. HTML5 Boilerplate - http://html5boilerplate.com/modernizr -http://modernizr.github.com/Modernizr/2.0- beta/initializr - http://initializr.com/
    107. 107. HTML5 Boilerplate - http://html5boilerplate.com/modernizr -http://modernizr.github.com/Modernizr/2.0- beta/initializr - http://initializr.com/selectivizr - http://selectivizr.com/
    108. 108. HTML5 Boilerplate - http://html5boilerplate.com/modernizr -http://modernizr.github.com/Modernizr/2.0- beta/initializr - http://initializr.com/selectivizr - http://selectivizr.com/yepnope - http://yepnopejs.com/
    109. 109. HTML5 - RDFa
    110. 110. HTML5 - RDFahttp://www.w3.org/TR/xhtml-rdfa-primer/
    111. 111. HTML5 - RDFahttp://www.w3.org/TR/xhtml-rdfa-primer/http://www.w3.org/TR/xhtml-rdfa-scenarios/
    112. 112. HTML5 - RDFahttp://www.w3.org/TR/xhtml-rdfa-primer/http://www.w3.org/TR/xhtml-rdfa-scenarios/http://www.heppnetz.de/ontologies/goodrelations/v1
    113. 113. HTML5 - RDFahttp://www.w3.org/TR/xhtml-rdfa-primer/http://www.w3.org/TR/xhtml-rdfa-scenarios/http://www.heppnetz.de/ontologies/goodrelations/v1Wonderfully complex spec which, in the end, does very little for you today. Bottom Line: Not something that can be covered in a few minutes.
    114. 114. HTML5 - Microdata
    115. 115. HTML5 - Microdatahttp://www.w3.org/TR/2011/WD-microdata-20110525/
    116. 116. HTML5 - Microdatahttp://www.w3.org/TR/2011/WD-microdata-20110525/http://www.data-vocabulary.org/
    117. 117. HTML5 - Microdatahttp://www.w3.org/TR/2011/WD-microdata-20110525/http://www.data-vocabulary.org/It’s a relative of microformats
    118. 118. HTML5 - Microdatahttp://www.w3.org/TR/2011/WD-microdata-20110525/http://www.data-vocabulary.org/It’s a relative of microformatsIt’s simpler than RDFa
    119. 119. HTML5 - Microdatahttp://www.w3.org/TR/2011/WD-microdata-20110525/http://www.data-vocabulary.org/It’s a relative of microformatsIt’s simpler than RDFaAlso supported by Google
    120. 120. HTML5 - Microdatahttp://www.w3.org/TR/2011/WD-microdata-20110525/http://www.data-vocabulary.org/It’s a relative of microformatsIt’s simpler than RDFaAlso supported by GoogleBut aside from javascript, it’s only current use is for advanced CSS
    121. 121. So, Microdata or RDFa?
    122. 122. So, Microdata or RDFa?http://www.google.com/support/webmasters/bin/ answer.py?answer=99170
    123. 123. So, Microdata or RDFa?http://www.google.com/support/webmasters/bin/ answer.py?answer=99170http://www.gossamer-threads.com/lists/wiki/wikitech/ 186906 “Most markup of both Microdata and RDFa should also be left to the CMS code”
    124. 124. So, Microdata or RDFa?http://www.google.com/support/webmasters/bin/ answer.py?answer=99170http://www.gossamer-threads.com/lists/wiki/wikitech/ 186906 “Most markup of both Microdata and RDFa should also be left to the CMS code”http://blog.foolip.org/2009/08/23/microformats-vs-rdfa- vs-microdata/
    125. 125. HTML5 - Canvashttp://www.w3.org/TR/2dcontext/Not of much use yet to designers, as the tools dont exist.
    126. 126. HTML5 - Ployglothttp://www.w3.org/TR/html-polyglot/Polyglot documents parse identically as HTML and XHTML
    127. 127. HTML5 - Techniques for textalternativeshttp://www.w3.org/TR/html-alt- techniques/Best practice guidelines for providing text alternatives for images
    128. 128. Web Resources
    129. 129. TheAuthoringSpecIan Hickson, editorhttp://www.w3.org/TR/html5/author
    130. 130. Dive IntoHTML5Mark Pilgrimhttp://diveintohtml5.org/
    131. 131. HTML5 DoctorRich Clark, BruceLawson, TomLeadbetter, JackOsborne, Mike Robinson,Remy Sharp, OliStudholmehttp://html5doctor.com/
    132. 132. HTML5GalleryShowcase of HTML5-based siteshttp://html5gallery.com/
    133. 133. HTML5Rockshttp://www.html5rocks.com
    134. 134. HTML5DemosBuilt by Remy Sharphttp://www.html5demos.com/

    ×