• Save
[heweb11] HTML5 Makeover
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,635
On Slideshare
1,633
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
1
Likes
7

Embeds 2

http://localhost 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HIGHEDWEB 2012HTML5+CSSW O R K S H O P !Christopher Schmitt | http://twitter.com/@teleject
  • 2. THINGS ARE GOODBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF. 2 3
  • 3. http://dev.opera.com/articles/view/mama-markup-validation-report/ 3
  • 4. 4
  • 5. “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.” SIR TIM BERNERS-LEE 5
  • 6. http://www.flickr.com/photos/teleject/432030263/ 6
  • 7. 7
  • 8. http://microformats.org/ 8
  • 9. 9
  • 10. 10
  • 11. 11
  • 12. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 12
  • 13. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.”FRANK LLOYD WRIGHT 13
  • 14. AGENDA ITEMS• What’s different from XHTML to HTML5• Why are you here? http://goo.gl/ozNbH (You are here.) • HTML5, then coding with HTML5 • CSS3, then coding with CSS3• Prizes! http://interactwithwebstandards.com/ 14
  • 15. BUILDINGWITH HTML5 15
  • 16. DOCTYPE 16
  • 17. HTML 4.01 Transitional DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">XHTML 1.0 Transitional DTD:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 17
  • 18. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> 18
  • 19. EXERCISE• Go to HTML validator at http://validator.w3.org/#validate_by_input• Then type the following HTML (below) and hit validate: <!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p> 19
  • 20. 20
  • 21. 21
  • 22. CHARACTER SET 22
  • 23. <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" /> 23
  • 24. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> http://shiflett.org/blog/2005/dec/googles-xss-vulnerability. 24
  • 25. SPECIFY YOUR LANGUAGE 25
  • 26. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> 26
  • 27. INCLUDING<SCRIPT> & <STYLE> 27
  • 28. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" /> <script src="scripts.js"></script> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body> 28
  • 29. SYNTAX 29
  • 30. <img src=“file.png” /> 30
  • 31. <IMG SRC=file.png /> 31
  • 32. <iMg SrC=file.png /> 32
  • 33. <IMG SRC=file.png /> 33
  • 34. <video controls=controls> 34
  • 35. EVERYTHING THATWAS BAD IN 1999IS GOOD AGAIN 35
  • 36. RELEARNING SYNTAX• Attribute quotes “not really” required• UPPERCASE and lowercase HTML elements allowed • So is CaMeLcAse typing.• No more need to do self-closing tags like <IMG /> or <BR />• Also, no more minimalization. So, this is okay: <dl compact>• Basically, everything that was bad from HTML4 in XHTML5 is good again. • Full circle, baby! One more time. 36
  • 37. BRINGING BACK <B> AND OTHER TAGS 37
  • 38. <p>My name is<em>Jane</em>, not John.</p> 38
  • 39. <p>Sally thought toherself, <i>when will IE6 die?</i></p> 39
  • 40. <p><strong>Registration isrequired</strong> for this event.</p> 40
  • 41. <p><b>Once upon atime,</b> there was a man who lost his mind.</p> 41
  • 42. <p><small>The owner ofthis blog is not responsible for mind blowage. Please consume at your own risk.</small></p> 42
  • 43. <abbr title="Accessible Rich InternetApplications">ARIA</ abbr> No more <acronym> 43
  • 44. THE COOLEST THINGEVER ABOUT HTML5. (TO ME.) 44
  • 45. <h1><a href="http://example.com"> HTML5, for Fun &amp; Profit</a></h1><a href="http://example.com"><img src="logo.png" alt="HTML5 forFun and Profit" /></a> 45
  • 46. <a href="http://example.com"><h1>HTML5, for Fun &amp; Profit</h1><img src="logo.png" alt="HTML5 forFun and Profit" /></a> 46
  • 47. FIGURES & CAPTIONS 47
  • 48. <figure>! <img src="chart.png" alt="Chart ofincreasing awesomeness" />! <figcaption>The increasing amount ofawesome that this blogdemonstrates.</figcaption></figure> 48
  • 49. FIGURE• Not restricted to containing IMGs • Tables • Audio • Video • Charts • Code snippets 49
  • 50. COLLAPSABLE CONTENT 50
  • 51. 51
  • 52. <details> <summary>Upcoming Topics</summary> <p>For the new year, we have a great line upof articles!</p> <ul> <li>Understanding theOutline Algorithm</li> <li>When to Use! <code>hgroup</code></li> <li>Machine Semantics with Microdata</li></ul></details>Only works in Chrome; all others - https://gist.github.com/370590 52
  • 53. NUMBERING LISTS 53
  • 54. 54
  • 55. <ol start="3"><li>Apples</li><li>Oranges</li><li>Bananas</li></ol> 55
  • 56. 56
  • 57. <p>The results are in for your favorite fruit,and we have a tie for first place!</p><ol><li value="1">Bananas</li><li value="1">Oranges</li><li value="2">Apples</li></ol> 57
  • 58. EDITABLE ELEMENTS 58
  • 59. 59
  • 60. <div contenteditable><p>Quick Fox Jumped Over the Lazy Dog</p></div> 60
  • 61. DRAG N DROP 61
  • 62. <h2 draggable>Block-Level Links</h2> http://html5doctor.com/native-drag-and-drop/ 62
  • 63. HTML5, MICROFORMATS & METADATA 63
  • 64. 64
  • 65. “Designed for humans first and machines second,microformats are a set of simple, open data formats built upon existing and widely adopted standards.” 65
  • 66. “HTML design patterns for commonchunks of content that web builders need to markup anyway.”“Oh, and Google understands them, too.” 66
  • 67. 67
  • 68. REPLACING ABBR• <ABBR> element is used by screenreaders to expand abbreviations like “lbs” or “NCAAP”• However unintended consequences occurred trying to workaround browser bugs for other HTML elements• What happens when a screenreaders text like this: • “Let’s go to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</abbr>” http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 68
  • 69. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart"title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">20</abbr>,at the <span class="location">Argent Hotel, San Francisco,CA</span></div> 69
  • 70. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart"datetime="2007-10-05">October 5</time>- <time class="dtend"datetime="2007-10-19">19</time>,at the <span class="location">Argent Hotel, San Francisco,CA</span></div>http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 70
  • 71. POSTSCRIPT• <ABBR> issue has ben resolved with new pattern (dropping <ABBR> altogether): http://microformats.org/wiki/value-class-pattern • <p>Let’s go to <span class="geo">51° 30 48.45", -0° 8 53.23" (<span class="value">51.513458;-0.14812</ span>)</span> </p> 71
  • 72. DATA-ATTRIBUTE• You can set data-attribute to any element you want.• Set meta information that can be utilized by JavaScript or CSS later on. <img src=“john-smith.jpg” data-imgtype=“mugshot” alt=“John Smith’s mugshot”> 72
  • 73. ATTR SELECTORimg[data-imgtype=“mugshot”] {/* CSS rules go here */} 73
  • 74. PAGE STRUCTURE 74
  • 75. DIV ID=“header” DIV ID=“nav”DIV ID=“section” DIV ID=“sidecolumn”DIV ID=“article” DIV ID=“footer” 75
  • 76. <HEADER> <NAV><SECTION> <ASIDE><ARTICLE> <FOOTER> 76
  • 77. ARTICLE VS ASIDE VS SECTION• Marc Grabsanki says: • Article is unique content to that document • Section is a thematic grouping of content, typically with a heading - pretty generic • Aside is content that is tangentially related, like a sidebar div has no meaning whatsoever, so there is nothing semantic about divs 77
  • 78. ARTICLE VS ASIDE VS SECTION• Bruce Lawson says: • Aside is for something tangentially related to its parent element. Or, if a sibling to the main content, it can be used to make sidebars of navigation, recent comments, colophons, author bios etc. • Article is a discrete piece of content that could be syndicated - a blog post, a news item, a comment, a widget • Section can also contain articles. for example, you could have a page with a <section> full of entertainment articles, and a section of political news etc. 78
  • 79. ARTICLE VS ASIDE VS SECTION• Molly Holzschlag, Opera standards evangelist, says: • <section> clarifies <div> • <article> replaces <div id="content"> • <aside> replaces <div id="sidebar">• Chris Mills, Opera browser employee, plays it safe: http://boblet.tumblr.com/post/130610820/html5-structure1 79
  • 80. WHAT ABOUT THE DIVS?• Marc Grabanski, jQuery and HTML5 guy: • “div has no meaning whatsoever, so there is nothing semantic about divs”• Bruce Lawson, Opera browser employee: • “Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, its a div.” 80
  • 81. <body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul>! </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section>! <aside> <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <ahref="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer></body> 81
  • 82. 82
  • 83. 83
  • 84. <script type="text/javascript">document.createElement(header);document.createElement(nav);document.createElement(section);document.createElement(article);document.createElement(aside);document.createElement(footer);</script> http://ejohn.org/blog/html5-shiv/ 84
  • 85. 85
  • 86. PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM) 86
  • 87. 87
  • 88. http://modernizr.com/ 88
  • 89. <script src="-/js/modernizr.min.js" type="text/javascript" ></script> 89
  • 90. <html lang="en" class=" canvas canvastextgeolocation rgba hsla multiplebgs borderimageborderradius boxshadow opacity cssanimationscsscolumns cssgradients cssreflectionscsstransforms csstransforms3d csstransitionsvideo audio localstorage sessionstoragewebworkers applicationcache fontface"> 90
  • 91. .audio #error { display: none;}.no-audio #error-box { background-color: #ffffcc; padding: 1px 10px; color: #000; border: 5px solid #ffff66;} CSS Feature Detection 91
  • 92. <script>if (Modernizr.audio) { function playPause() { var myAudio = document.getElementsByTagName(audio)[0];if(myAudio.paused) myAudio.play(); else myAudio.pause();}}</script> JS Feature Detection 92
  • 93. Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js}); JS Feature Detection 93
  • 94. 94
  • 95. Pick and Choose Features to Detect 95
  • 96. AUDIO/VIDEO 96
  • 97. HTML5 AUDIO 97
  • 98. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>! </head>! <body><h1>Video Example</h1><audio src="html5test.ogg" autoplay controls>! <a href="html5test.ogg">Download audio</a></audio>! </body></html> 98
  • 99. DEMO 99
  • 100. HTML5 AUDIO• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS• If you don’t have CONTROL, player becomes transparent 100
  • 101. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Y Y YVorbisMP3 Y Y YWAV Y Y Y 101
  • 102. SUPPORTING AUDIO<audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT codehere --></audio> Use Flash for older versions of IE 102
  • 103. SUPPORTING AUDIO• If you do insert audio, setting the file to autoplay is not recommended, as it interferes with the experience for web surfers using screen readers.• Don’t use WAV file type. • Better to ship a compact disc to the user instead. 103
  • 104. HTML5 VIDEO 104
  • 105. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>! </head>! <body><h1>Video Example</h1><object width="425" height="344"><param name="movie"value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="425"height="344"></embed></object>! </body></html> 105
  • 106. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>! </head>! <body><h1>Video Example</h1><video src="html5test.ogg"! width="320" height="240" controls! poster="html5testvideoposter.jpg">! <a href="html5testvideo.ogg">Download movie</a></video>! </body></html> 106
  • 107. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>! </head>! <body><h1>Video Example</h1><video src="html5test.ogg"! width="320" height="240" controls! poster="html5testvideoposter.jpg"> DEMO! <a href="html5testvideo.ogg">Download movie</a></video>! </body></html> 107
  • 108. HTML5 VIDEO• WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself.• Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value.• Text can be included within VIDEO element to allow user to download video if their browser doesn’t support.• If you want to give users control, use CONTROL attribute. 108
  • 109. HTML5 VIDEO• Video can start automatically if using the AUTOPLAY=”1” attribute and value.• Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1.• Codecs support... 109
  • 110. HTML5 VIDEO“It would be helpful for interoperability if all browsers couldsupport the same codecs.However, there are no known codecs that satisfy all thecurrent players: we need a codec that is known to not requireper-unit or per-distributor licensing, that is compatible with theopen source development model, that is of sufficient quality asto be usable, and that is not an additional submarine patentrisk for large companies.This is an ongoing issue and this section will be updated oncemore information is available.”- http://www.whatwg.org/specs/web-apps/current-work/#video-and- audio-codecs-for-video-elements 110
  • 111. CODECS• Ogg (or “Vorbis”) • No need to worry about patents• H.264 • Created by the MPEG group • If you have blu-ray disc player, you are using it• WebM • A wrapper for the VP8 video and Ogg audio streams 111
  • 112. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+Ogg Y Y YH.264 Y Y* YWebM (W4.02+) (Ch6+) Y 112
  • 113. LESSONS LEARNED• To get most <video> support, you need 2 video files: H.264 and .OGG. • iOS Devices can handle MP4 (H.264) • Safari, IE, Flash can deliver MP4 (H.264) • Firefox, Opera can deliver .OGG • Then hit them with FLV video, which supports H.264 http://camendesign.com/code/video_for_everybody 113
  • 114. http://firefogg.org/ 114
  • 115. http://www.videolan.org/vlc/ 115
  • 116. http://handbrake.fr/ 116
  • 117. LESSONS LEARNED• Use VLC or Firefogg to encode common movie files types to OGG• H.264 encoding? Use Handbrake• If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial: http://diveintohtml5.org/video.html • Good primer: http://dev.opera.com/articles/view/introduction-html5-video/ 117
  • 118. 118
  • 119. 119
  • 120. ! <script>! function playPause() {! var myVideo = document.getElementsByTagName(video)[0];! if (myVideo.paused)! myVideo.play();! else! myVideo.pause();! }! </script> 120
  • 121. <input type=button onclick="playPause()" value="Play/Pause"tabindex="0" /> 121
  • 122. XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC. 122
  • 123. RECOMMENDED Design for Web Applications by Matt May and Wendy• Universal Chisholm• Bulletproof Ajax by Jeremy Keith• Designing with Progressive Enhancement by Filament Group• Microformats Made Simple by Emily Lewis• HTML5 Cookbook by a whole bunch of people! 123
  • 124. THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 125