[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!

  • 1,487 views
Uploaded on

Although the specification is still being written, HTML5 can be implemented on your website today. Get an overview of the new HTML elements and their semantics, learn how to incorporate audio and …

Although the specification is still being written, HTML5 can be implemented on your website today. Get an overview of the new HTML elements and their semantics, learn how to incorporate audio and video without Flash, get acquainted with new JavaScript APIs (like geolocation), and more.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,487
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

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. EDUICONF 2011HTML5D E& IHTML5? S GN ❦ Christopher Schmitt http://twitter.com/@teleject
  • 2. XHTML EveryoneTHINGS ARE GOOD elseBETWEEN 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. 8
  • 9. 9
  • 10. WEB 2.0 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• Building with HTML5 (You are here.) • YOU CAN HAZ Video • YOU CAN HAZ Audio • YOU CAN HAZ GeoLocation• YOU CAN HAZ Prizes! 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. SYNTAX 22
  • 23. <img src=“file.png” /> 23
  • 24. <IMG SRC=file.png /> 24
  • 25. <iMg SrC=file.png /> 25
  • 26. <IMG SRC=file.png /> 26
  • 27. <video controls=“controls”> 27
  • 28. EVERYTHING THATWAS BAD IN 1999IS GOOD AGAIN 28
  • 29. PAGE STRUCTURE 29
  • 30. DIV ID=“header” DIV ID=“nav”DIV ID=“section” DIV ID=“sidecolumn”DIV ID=“article” DIV ID=“footer” 30
  • 31. <HEADER> <NAV><SECTION> <ASIDE><ARTICLE> <FOOTER> 31
  • 32. 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 32
  • 33. 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.” 33
  • 34. <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 <timedatetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Mistycollection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer></body> 34
  • 35. 35
  • 36. 36
  • 37. <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/ 37
  • 38. 38
  • 39. PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM) 39
  • 40. http://modernizr.com/ 40
  • 41. <script src="-/js/modernizr.min.js" type="text/javascript" ></script> 41
  • 42. <html lang="en" class=" canvas canvastextgeolocation rgba hsla multiplebgs borderimageborderradius boxshadow opacity cssanimationscsscolumns cssgradients cssreflectionscsstransforms csstransforms3d csstransitionsvideo audio localstorage sessionstoragewebworkers applicationcache fontface"> 42
  • 43. content { ... }.geolocation content { ... } 43
  • 44. <script src="modernizr.js"></script>...<script> if (!Modernizr.input.autofocus){ $("#fieldname").focus(); }</script> 44
  • 45. CLOSERLOOK ATHTML5 ELEMENTS 45
  • 46. HTML5 AUDIO 46
  • 47. <!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> 47
  • 48. DEMO 48
  • 49. HTML5 AUDIO• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS• If you don’t have CONTROL, player becomes transparent 49
  • 50. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9 Ogg Y Y YVorbisMP3 Y Y YWAV Y Y Y 50
  • 51. SUPPORTING AUDIO<audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT codehere --></audio> 51
  • 52. HTML5 VIDEO 52
  • 53. <!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> 53
  • 54. <!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> 54
  • 55. <!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> 55
  • 56. 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. 56
  • 57. 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... 57
  • 58. HTML5 VIDEO “It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecsthat satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additionalsubmarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.” - http://www.whatwg.org/specs/web-apps/current-work/#video- and-audio-codecs-for-video-elements 58
  • 59. 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 59
  • 60. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9Ogg Y Y YH.264 Y Y* YWebM (W4.02+) (Ch6+) Y 60
  • 61. 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 61
  • 62. http://firefogg.org/ 62
  • 63. http://www.videolan.org/vlc/ 63
  • 64. http://handbrake.fr/ 64
  • 65. 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.info/video.html • Good primer: http://dev.opera.com/articles/view/introduction-html5-video/ 65
  • 66. 66
  • 67. 67
  • 68. <script> function playPause() { var myVideo = document.getElementsByTagName(video)[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> 68
  • 69. <input type=button onclick="playPause()" value="Play/Pause"tabindex="0" /> 69
  • 70. HTML5 VIDEO & CAPTIONS 70
  • 71. [Captioning] has been shown to improvereading skills among adults who are non-readers.http://www.ldonline.org/article/35793 71
  • 72. 72
  • 73. DEMO 73
  • 74. QUICK & DIRTYCAPTIONING 74
  • 75. http://github.com/johnmcc/jCaps 75
  • 76. 76
  • 77. 77
  • 78. SRT FILES• SRT files are text files used in video playback; therefore, they do not contain any video data.• Text file containing subtitles used by various video playback programs; supported by DivX, DVD, and other video formats; • Includesthe time each subtitle should be displayed followed by the text of the subtitles. • Subtitlefiles are often named according to the language of the subtitles, i.e. "moviename-eng.srt" for English and "moviename-ger.srt" for German subtitles. 78
  • 79. TRANSCRIPT-EN.SRT100:00:00,000 --> 00:00:6,000Allow me to introduce myself My name is Tay Its T-A-Y, T-A-Y to the Z200:00:06,000 --> 00:00:9,000This is the web and its gonna murder your TV It was Chocolate Rain300:00:09,500 --> 00:00:11,500Wrote a song about that history Chocolate Rain400:00:12,000 --> 00:00:15,000Now Im paid a hefty hefty fee Chocolate Rain 79
  • 80. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script> 80
  • 81.  <video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffer controls>  <track src="transcript-en.srt" type="text/srt" language="en"role="textaudesc"></track>  <track src="transcript-gr.srt" type="text/srt" language="gr"role="textaudesc"></track>  <p>Alternative text...</p></video> 81
  • 82.  <video id="myVid" width="400" src="cherry-chocolate-rain.ogv"autobuffer controls>  <track src="transcript-en.srt" type="text/srt"language="en" role="textaudesc"></track>  <track src="transcript-gr.srt" type="text/srt"language="gr" role="textaudesc"></track>  <p>Alternative text...</p></video> 82
  • 83. HTML5 & GEOLOCATION 83
  • 84. 84
  • 85. 85
  • 86. 86
  • 87. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(show_coordinates); function show_coordinates(position){ alert(Your latitude is + position.coords.latitude + + and your longitude is + position.coords.longitude +.); }} 87
  • 88. 88
  • 89. http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin 89
  • 90. THAT’S GREAT, BUT•I don’t read longitude and latitude. • More importantly, my clients or site visitors don’t comprehend longitude and latitude.• And I don’t love the code! 90
  • 91. http://2010.incontrolconference.com/eats/ 91
  • 92. http://atxwebshow.com/coffeeshops/ 92
  • 93. http://atxwebshow.com/coffeeshops/ 93
  • 94. STEP #1Muck-N-Daves Texas BBQ1603 South CongressAustin, TX 78704 USA512-590-3387Old School BBQ and Grill2326 E Cesar Chavez StAustin, TX, 78702 USA512-974-6830The Shed BBQ Rolling Joint1816 E 6th Street.Austin, TX, 78702 USA 94
  • 95. STEP #2• Convert addresses to hCard microformats http://microformats.org/code/hcard/creator 95
  • 96. <div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div> <div class="adr"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div> http://microformats.org/code/hcard/creator</div> 96
  • 97. STEP #3 hCard hCard hCard hCard 97
  • 98. STEP #3<ol> <li> hCard </li> <li> hCard </li> <li> hCard </li> <li> hCard 98 </li>
  • 99. STEP #4<div id="locations"> <ol> <li><!-- Microformats address 1 --></li> <li><!-- Microformats address 2 --></li> <li><!-- Microformats address 3 --></li> <li><!-- Microformats address 4 --></li> ... </ol></div> 99
  • 100. STEP #5http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin 100
  • 101. STEP #6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.js"></script> 101
  • 102. STEP #7http://code.google.com/apis/maps/signup.html 102
  • 103. STEP #8<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.1.0.0.js"></script><script type="text/javascript"> $(document).ready(function() { $(#locations2).location({ apiKey : YOUR_API_KEY_HERE }); });</script> 103
  • 104. STEP #9 PROFIT! 104
  • 105. DATA- ATTRIBUTE 105
  • 106. <div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div> <div class="adr" data-longitude="-97.723410" data-latitude="30.262098"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div> http://geocoder.us/</div> 106
  • 107. TAKE AWAYS• New HTML5 elements for improved semantics• HTML5 Audio• HTML5 Video • Online video with HTML+JS captioning• HTML5 Geolocation 107
  • 108. 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 Cookbook by Christopher Schmitt, Kyle Simpson, & HTML5• HTML5 Community Experts 108
  • 109. ONE MORE THING... 109
  • 110. CHEEZBURGER 110
  • 111. THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 111