@peterlubbers                                                                    Kaazing                                  ...
Your host: @peterlubbers2   © 2011 – Kaazing Corporation
Image @rdclark3   © 2011 – Kaazing Corporation
Image: @jeffreypalermo4   © 2011 – Kaazing Corporation
Agenda•    HTML5—What and Why?•    HTML5 Features                                       #stc12•    Your HTML5 Toolkit     ...
Word on the Street…"The world is moving to HTML5"     —Steve Jobs, Apple"The Web has not seen this level of  transformatio...
HTML5 and DITA • Continue to author in DITA, but output to   HTML5 and CSS3 • Replacement of tri-pane layouts of DITA OT  ...
#1 Job Trend 2011                              ―HTML5" is the #1 job trend - the fastest growing                          ...
What is HTML5?• The new major  milestone for  HTML• Focused on  Web Applications• Web apps are  rapidly becoming  first cl...
HTML5 Feature Areas 10   © 2011 – Kaazing Corporation
HTML5 At a Glance 11   © 2011 – Kaazing Corporation
Why HTML5?                       5 Reasons why you should care! 12   © 2011 – Kaazing Corporation
1) HTML5 Paves the Cow Paths • Because HTML5 takes a pragmatic   approach, fixing common real-world problems  13   © 2011 ...
Paved Cow Path                                          HTML4<form><input name="email" type="text">                       ...
2) HTML5 Simplifies Because HTML5 is, well, simpler 15   © 2011 – Kaazing Corporation
Simplified Doctype         HTML4/XHTML•    HTML 4.01 Strict•    HTML 4.01 Transitional•    HTML 4.01 Frameset•    XHTML 1....
Simplified Character Set                                     HTML4   <meta http-equiv="Content-Type"  content="text/html; ...
Simplified Markup                                     HTML5  <!DOCTYPE html>                                             D...
Simplified Markup 19   © 2011 – Kaazing Corporation
3) HTML5 is Universal• Because HTML5 works  in all languages and  accessibility is built in  from the ground up 20   © 201...
Universal Access• Support for all world languages       • For example, the new <ruby> element• Accessibility       • Seman...
4) HTML5 Means Less Plugins• Because HTML5  provides native support  for many features that  were possible only with  plug...
Plugins are on the way out•     Built-in is better than bolt-on —@brucel•     Plugins may not be installed (for long)•    ...
5) HTML5 is Secure by Default • HTML5 uses origin-based security • Defines secure cross-origin sharing • Issues in HTML5 a...
Semantic Markup & Microdata 25   © 2011 – Kaazing Corporation
New HTML5 Elements Layout (semantics)                                 Multimedia       Other article     section          ...
Obsolete Elements      Presentational Frames                                          Other      basefont                 ...
Semantic Markup Benefits • Based on research (Opera, Google studies on   commonly used div class and id names) • Cleaner, ...
Semantic Markup 29   © 2011 – Kaazing Corporation
Moving to Structural/Semantic Markup                                          nav 1. Identify functional areas /    use st...
Details Element        HTML      <!-- Progressive Information Disclosure -->      <details>      <summary>What are my down...
Progressive Info. Disclosure 32   © 2011 – Kaazing Corporation   http://tech.kaazing.com/documentation/html5/3.3/setup-gui...
Valid HTML vs. Valid XHTML• So you created XHTML…• But did you know that:      • Over 90% of XHTML is delivered with the t...
Microdata• Emphasis on machine readability• SEO advantages• Use Microdata embed machine-readable data in  HTML documents• ...
HTML5 Microdata Example       HTML      <section itemscope>      <article id="html5-fast-track"      itemtype="http://data...
Microdata Testing 36   © 2011 – Kaazing Corporation   http://www.google.com/webmasters/tools/richsnippets
HTML5 Forms• New form functionality:      •   No JavaScript required      •   Native date and color pickers      •   Searc...
Example HTML5 Form       HTML      <form>      <p><label for="phone">Telephone number:</label>      <input type=tel      p...
New Input Types                                     Date picker 39   © 2011 – Kaazing Corporation   Color picker
CSS3 40   © 2011 – Kaazing Corporation
CSS Level 3•        Modularized for easier browser uptake•        Almost 50 modules (readiness varies)•        Use browser...
Rounded corners        CSS      a:hoverimg {              border-radius: 10px;              border: 2px solid #F47D31;    ...
Web Fonts       HTML      <html>      <head>      <link rel="stylesheet" type="text/css"      href="http://fonts.googleapi...
Media Queries        CSS      /* Media-specific sections of stylesheet */      @media all and (orientation:landscape) {   ...
Responsive Web Design                             http://www.boston.com/bostonglobe/features/ 45   © 2011 – Kaazing Corpor...
Multimedia 46   © 2011 – Kaazing Corporation
HTML5 Audio and Video• New HTML5 media elements      • <audio> and <video>• Native audio and video (no plugins required)  ...
HTML5 Video Example      HTML       //Basic Video       <video controls src=”goldrush.mp4">           A movie about HTML5 ...
Flash Video Fallback      HTML      <!—Multiple videos with alternate Flash content-->      <video controls>      <source ...
WebVTT (Video Accessibility)      WebVTT      WEBVTT      1      00:00:01,000 --> 00:00:03,050      What do I think about ...
Video API 51   © 2011 – Kaazing Corporation                                     http://www.w3.org/2010/05/video/mediaevent...
Graphics and 3D 52   © 2011 – Kaazing Corporation
HTML5 Canvas and SVG• Provide native drawing functionality      • Previously possible only with plugins        (Flash, Sil...
Canvas Animation 54   © 2011 – Kaazing Corporation   Demo courtesy Gary Davis, AniWorx
SVG "Scalable" Vector Graphics (not bitmaps)                      http://www.croczilla.com/bits_and_pieces/svg/samples/tig...
SVG Libraries 56   © 2011 – Kaazing Corporation   http://mbostock.github.com/d3/
Device Access 57   © 2011 – Kaazing Corporation
Speech Input 58   © 2011 – Kaazing Corporation                                     http://slides.html5rocks.com/#speech-in...
Accelerometer/WebSocket 59   © 2011 – Kaazing Corporation                                     http://demo.kaazing.com/racer/
Device OrientationDemo: http://slides.html5rocks.com/#slide-orientation      Image: http://idisk.mac.com/han.solo-Public/C...
Offline and Storage 61   © 2011 – Kaazing Corporation
Offline Web Applications• Use complete web sites (documentation sets) in  offline mode• Cache pages that have not been vis...
Example appcache Fileappcache File      CACHE MANIFEST      # manifest version 1.0.1      # Files to cache      index.html...
Example manifest Attribute• Reference the manifest file:       • Use .appcache extension (*.manifest also allowed)       •...
The 2012 HTML5 Toolbox 65   © 2011 – Kaazing Corporation
Browser Support• Modern browsers (incl. mobile) already support a  lot of features, :      • http://html5test.com• Support...
Browser Developer ToolsBrowser                                  Built-In Tool     Mac Shortcut   Windows ShortcutChrome   ...
HTML5 Boilerplate • The best way to get started                                     http://html5boilerplate.com 68   © 201...
Modernizr • Part of H5BP • Download or create a   custom build • Use Modernizr.load   to test for feature   support  Javas...
Polyfills and Emulation • Feature detect with Modernizr (part of H5BP):   http://www.modernizr.com • Complete polyfill lis...
Chrome Frame • The Ultimate polyfill • Embed Chrome in IE • No admin privileges   needed to install      HTML <!-- Always ...
Mobile Boilerplate 72   © 2011 – Kaazing Corporation   http://html5boilerplate.com/mobile/
320 and up 73   © 2011 – Kaazing Corporation                                     http://stuffandnonsense.co.uk/projects/32...
Opera Mobile Emulator 74   © 2011 – Kaazing Corporation                                     http://www.opera.com/developer...
Ripple Mobile Emulator 75   © 2011 – Kaazing Corporation   http://ripple.tinyhippos.com/download
Questions? •    Now or Later •    E-mail: peter.lubbers@kaazing.com •    Twitter: @peterlubbers •    LinkedIn: Peter Lubbe...
Buy the Book! • Pro HTML5 Programming (Apress, 2011) • 50% off e-book coupon code:   HTL528   http://goo.gl/4RmFk 77   © 2...
Get Trained! • Proven, practical worldwide HTML5 Training   (training from experts, not just trainers):      • E-mail us: ...
SF HTML5 User Group • Free • Great monthly events with   top speakers • Video-taped • Twitter: @sfhtml5 • Sign up today:  ...
Other Great Resources • HTML5 Weekly (weekly newsletter):   http://html5weekly.com/ • The Web Ahead (5x5 Podcast):   http:...
Elements Overview                                     http://html5doctor.com/element-index/ 81   © 2011 – Kaazing Corporat...
Who is Developing HTML5? • Web Hypertext Application Technology   Working Group (WHATWG)      http://www.whatwg.org/specs/...
83   © 2011 – Kaazing Corporation
Upcoming SlideShare
Loading in...5
×

Getting Started with HTML5 in Tech Com (STC 2012)

119,111

Published on

Peter Lubbers' session about getting started with HTML5 for technical communicators, presented at the May 2012 STC Summit in Chicago.

Published in: Technology, Design
11 Comments
95 Likes
Statistics
Notes
No Downloads
Views
Total Views
119,111
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
1,169
Comments
11
Likes
95
Embeds 0
No embeds

No notes for slide
  • In this session, Peter will explain why HTML5 is going to have a tremendous impact on technical communication. He will introduce you to the most relevant HTML5 features and show you practical tools, tips, and tricks so you can start using HTML5 in your technical communication projects right away.
  • HTML, CSS, and JS
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • Open /code/canvas-svg/svg.html and zoom in to show how it doesn’t pixelate
  • WhatWG:Founded in 2004 (by individuals working for browser vendors Apple, Mozilla, Google, and Opera)Develops HTML and APIs for web application developmentUnofficial and open collaboration of browser vendors and interested partiesW3C:Created draft of HTML5 in 2008IETF:Protocols (HTTP, WebSocket)
  • Getting Started with HTML5 in Tech Com (STC 2012)

    1. 1. @peterlubbers Kaazing #stc121 Getting Started with HTML5 © 2011 – Kaazing Corporation Illustration by Will Phillips Jr. | HTML5 Logo attributed W3C
    2. 2. Your host: @peterlubbers2 © 2011 – Kaazing Corporation
    3. 3. Image @rdclark3 © 2011 – Kaazing Corporation
    4. 4. Image: @jeffreypalermo4 © 2011 – Kaazing Corporation
    5. 5. Agenda• HTML5—What and Why?• HTML5 Features #stc12• Your HTML5 Toolkit @peterlubbers• Q&A 5 © 2011 – Kaazing Corporation
    6. 6. Word on the Street…"The world is moving to HTML5" —Steve Jobs, Apple"The Web has not seen this level of transformation, this level of acceleration, in the past ten years… were betting big on HTML5" —Vic Gundotra, VP of Engineering, Google“If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we. —Steve Ballmer, CEO Microsoft"I had no idea there was so much HTML5 already in play" —Tim OReilly"HTML5’s impact on Tech Com will be bigger than DITA" 6 —Peter Lubbers © 2011 – Kaazing Corporation
    7. 7. HTML5 and DITA • Continue to author in DITA, but output to HTML5 and CSS3 • Replacement of tri-pane layouts of DITA OT with style-based layouts ―Users of DITA … see some clear associations of these HTML5 elements with structures in both DITA topics and DITA maps.‖ —Don Day http://learningbywrote.com/blog/2011/08/html-5-in-the-world-of-dita/ 7 © 2011 – Kaazing Corporation
    8. 8. #1 Job Trend 2011 ―HTML5" is the #1 job trend - the fastest growing keyword found in online job postings‖ —indeed.com (http://goo.gl/xXZVm) 8 © 2011 – Kaazing Corporation
    9. 9. What is HTML5?• The new major milestone for HTML• Focused on Web Applications• Web apps are rapidly becoming first class apps, on par with desktop and native apps• Different definitions 9 © 2011 – Kaazing Corporation
    10. 10. HTML5 Feature Areas 10 © 2011 – Kaazing Corporation
    11. 11. HTML5 At a Glance 11 © 2011 – Kaazing Corporation
    12. 12. Why HTML5? 5 Reasons why you should care! 12 © 2011 – Kaazing Corporation
    13. 13. 1) HTML5 Paves the Cow Paths • Because HTML5 takes a pragmatic approach, fixing common real-world problems 13 © 2011 – Kaazing Corporation
    14. 14. Paved Cow Path HTML4<form><input name="email" type="text"> (?:[a-z0-9!#$%&*+/=?^_`{|}~-]+(?:.[a-z0- 9!#$%&*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-crapload of x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e- x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0- validation code 9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0- 5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0- 4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01- or extra js lib x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01- x09x0bx0cx0e-x7f])+)]) HTML5 14 © 2011 – Kaazing Corporation <input type=email required>
    15. 15. 2) HTML5 Simplifies Because HTML5 is, well, simpler 15 © 2011 – Kaazing Corporation
    16. 16. Simplified Doctype HTML4/XHTML• HTML 4.01 Strict• HTML 4.01 Transitional• HTML 4.01 Frameset• XHTML 1.0 Strict• XHTML 1.0 Transitional• XHTML 1.0 Frameset• XHTML 1.1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 16 © 2011 – Kaazing Corporation <!DOCTYPE html>
    17. 17. Simplified Character Set HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset=utf-8> 17 © 2011 – Kaazing Corporation
    18. 18. Simplified Markup HTML5 <!DOCTYPE html> DOM <meta charset=utf-8> <title>HTML5</title> <h1>HTML5!</h1> 18 © 2011 – Kaazing Corporation
    19. 19. Simplified Markup 19 © 2011 – Kaazing Corporation
    20. 20. 3) HTML5 is Universal• Because HTML5 works in all languages and accessibility is built in from the ground up 20 © 2011 – Kaazing Corporation
    21. 21. Universal Access• Support for all world languages • For example, the new <ruby> element• Accessibility • Semantic markup • WebVTT <video controls WEBVTT preload="metadata"> <source src="rocpoc.mp4"> 1 <track label="English" 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... kind="subtitles" src="subtitles_en.vtt”> 2 </video> 00:00:04,000 --> 00:00:07,100 It’s pretty sweet. I just hope that people use the new featureshttp://html5videoguide.net/presentations/WebVTT thoughtfully. 21 © 2011 – Kaazing Corporation
    22. 22. 4) HTML5 Means Less Plugins• Because HTML5 provides native support for many features that were possible only with plugins or complex hacks (audio/video, drawing, so ckets) 22 © 2011 – Kaazing Corporation
    23. 23. Plugins are on the way out• Built-in is better than bolt-on —@brucel• Plugins may not be installed (for long)• Plugins can be an attack vector (Proxy poisoning)• ―Whenever a Mac crashes, more often that not is because of Flash‖ —Steve Jobs http://goo.gl/mzFjM 23 © 2011 – Kaazing Corporation http://www.infoq.com/news/2011/09/Metro-Plug-ins
    24. 24. 5) HTML5 is Secure by Default • HTML5 uses origin-based security • Defines secure cross-origin sharing • Issues in HTML5 are fixed quickly http://enable-cors.org/ 24 © 2011 – Kaazing Corporation
    25. 25. Semantic Markup & Microdata 25 © 2011 – Kaazing Corporation
    26. 26. New HTML5 Elements Layout (semantics) Multimedia Other article section audio, video command, menu* aside nav source embed figure figcaption header footer Graphics Forms details summary canvas datalist wbr hgroup svg progress time mark output meter ruby, rp, rt keygen * menu redefined from HTML 4 26 © 2011 – Kaazing Corporation dev.w3.org/html5/markup/elements.html
    27. 27. Obsolete Elements Presentational Frames Other basefont frame acronym big frameset applet center noframes isindex font strike tt 27 © 2011 – Kaazing Corporation http://www.w3.org/TR/html5-diff/#obsolete-elements
    28. 28. Semantic Markup Benefits • Based on research (Opera, Google studies on commonly used div class and id names) • Cleaner, less verbose markup (replace div and span elements with meaningful elements) • Machine readable: • Search engines • Syndication • Linking and sharing 28 © 2011 – Kaazing Corporation
    29. 29. Semantic Markup 29 © 2011 – Kaazing Corporation
    30. 30. Moving to Structural/Semantic Markup nav 1. Identify functional areas / use structural tags 2. Separate content from presentation • Move styles to CSS file section • Use a reset stylesheet • Consider a grid system for layout 3. Consider alternate article layouts (e.g. mobile) footer + nav 30 © 2011 – Kaazing Corporation
    31. 31. Details Element HTML <!-- Progressive Information Disclosure --> <details> <summary>What are my download options?</summary> <ul> <li><strong>Base:</strong> Contains a minimal download...</li> <li><strong>Full:</strong> Contains the Base download plus documentation and demos.</li> </ul> </details> 31 © 2011 – Kaazing Corporation
    32. 32. Progressive Info. Disclosure 32 © 2011 – Kaazing Corporation http://tech.kaazing.com/documentation/html5/3.3/setup-guide.html
    33. 33. Valid HTML vs. Valid XHTML• So you created XHTML…• But did you know that: • Over 90% of XHTML is delivered with the text/html • Delivering XHTML as application/xhtml+xml is risky (not supported in old IE)• Instead, use HTML5 and create valid HTML • http://html5.validator.nu/ and http://validator.w3.org• HTML5 allows XML syntax from XHTML 1.0 for backward compatibility 33 © 2011 – Kaazing Corporation
    34. 34. Microdata• Emphasis on machine readability• SEO advantages• Use Microdata embed machine-readable data in HTML documents• Easy-to-write syntax (add to any element)• Compatible with other data formats such as RDF and JSON• Use microdata vocabularies: http://data-vocabulary.org 34 © 2011 – Kaazing Corporation
    35. 35. HTML5 Microdata Example HTML <section itemscope> <article id="html5-fast-track" itemtype="http://data-vocabulary.org/Product"> <header> <h1 itemprop="name”>HTML5 Fast Track</h1> </header> <p itemprop="description">The HTML5 Fast Track training course is a two day experience... </p> </article> </section> 35 © 2011 – Kaazing Corporation
    36. 36. Microdata Testing 36 © 2011 – Kaazing Corporation http://www.google.com/webmasters/tools/richsnippets
    37. 37. HTML5 Forms• New form functionality: • No JavaScript required • Native date and color pickers • Search, e-mail, web address • Client side validation • Spin boxes and sliders• Features degrade gracefully (unknown input types are treated as text)• Benefits: • Virtual keyboard support • Native widgets and error messages are internationalized 37 © 2011 – Kaazing Corporation
    38. 38. Example HTML5 Form HTML <form> <p><label for="phone">Telephone number:</label> <input type=tel placeholder="(xxx) xxx-xxx" required></p> <p><label for="emailaddress">E-mail address:</label> <input id="emailaddress" name="emailaddress" type=email required></p> <p><label for="dob">DOB:</label><input id="dob” name="dob” type=date value=1944-06-06 max=1992-05-01></p> <p><label for="color">Shirt Color:</label> <input id="color" name="color" type="color"></p> 38 © 2011 – Kaazing Corporation
    39. 39. New Input Types Date picker 39 © 2011 – Kaazing Corporation Color picker
    40. 40. CSS3 40 © 2011 – Kaazing Corporation
    41. 41. CSS Level 3• Modularized for easier browser uptake• Almost 50 modules (readiness varies)• Use browser-specific prefixes until finalized• Dramaticallyimproves performance• Examples: • Border radius (rounded corners) without images • Gradients • Multi-column layout • Transformations and transitions • Web Fonts • Media Queries 41 © 2011 – Kaazing Corporation
    42. 42. Rounded corners CSS a:hoverimg { border-radius: 10px; border: 2px solid #F47D31; -webkit-transform: scale(1.05); } 42 © 2011 – Kaazing Corporation
    43. 43. Web Fonts HTML <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> h1 { font-family: Tangerine, serif; font-size: 48px; } </style> </head> <body><h1>Making the Web Beautiful!</h1></body> http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start 43 © 2011 – Kaazing Corporation
    44. 44. Media Queries CSS /* Media-specific sections of stylesheet */ @media all and (orientation:landscape) { /* e.g. rotated smartphone */ } @media screen and (max-device-width: 480px) { /* small screen */ } @media print { /* drop navigation elements that make no sense on paper */ nav { visibility:hidden; } } 44 © 2011 – Kaazing Corporation
    45. 45. Responsive Web Design http://www.boston.com/bostonglobe/features/ 45 © 2011 – Kaazing Corporation
    46. 46. Multimedia 46 © 2011 – Kaazing Corporation
    47. 47. HTML5 Audio and Video• New HTML5 media elements • <audio> and <video>• Native audio and video (no plugins required) • Programmable with JavaScript • Style with CSS• Add videos and audio as if it was an image• Codec support varies, but multiple source elements and fallback content can be used• Complete JavaScript API available 47 © 2011 – Kaazing Corporation
    48. 48. HTML5 Video Example HTML //Basic Video <video controls src=”goldrush.mp4"> A movie about HTML5 </video> // Video with additional attributes <video id="movies" controls preload="metadata" width="400px" height="300px" poster="html5.png" > <source src="goldrush.webm"> <source src="goldrush.mp4"> <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt"> A movie by Rocky Lubbers </video> 48 © 2011 – Kaazing Corporation
    49. 49. Flash Video Fallback HTML <!—Multiple videos with alternate Flash content--> <video controls> <source src=”goldrush.webm"> <source src=”goldrush.mp4”> <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt"> <object data="videoplayer.swf" type="application/x-shockwave-flash"> <param name="movie" value="rocpoc.swf"/> A movie by Rocky Lubbers </object> </video> 49 © 2011 – Kaazing Corporation
    50. 50. WebVTT (Video Accessibility) WebVTT WEBVTT 1 00:00:01,000 --> 00:00:03,050 What do I think about HTML 5?... 2 00:00:04,000 --> 00:00:07,100 It’s the next big thing! I just hope that people use the new features thoughtfully. 50 © 2011 – Kaazing Corporation
    51. 51. Video API 51 © 2011 – Kaazing Corporation http://www.w3.org/2010/05/video/mediaevents.html
    52. 52. Graphics and 3D 52 © 2011 – Kaazing Corporation
    53. 53. HTML5 Canvas and SVG• Provide native drawing functionality • Previously possible only with plugins (Flash, Silverlight)• Completely integrated into HTML5 documents (part of DOM) • Can be styled with CSS • Can be controlled with JavaScript• Use for animation, charts, images, pixel manipulation, and so on• Canvas supports 2D and 3D (WebGL)• Will impact animated graphics and diagrams soon (use libraries) 53 © 2011 – Kaazing Corporation
    54. 54. Canvas Animation 54 © 2011 – Kaazing Corporation Demo courtesy Gary Davis, AniWorx
    55. 55. SVG "Scalable" Vector Graphics (not bitmaps) http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg55 © 2011 – Kaazing Corporation
    56. 56. SVG Libraries 56 © 2011 – Kaazing Corporation http://mbostock.github.com/d3/
    57. 57. Device Access 57 © 2011 – Kaazing Corporation
    58. 58. Speech Input 58 © 2011 – Kaazing Corporation http://slides.html5rocks.com/#speech-input
    59. 59. Accelerometer/WebSocket 59 © 2011 – Kaazing Corporation http://demo.kaazing.com/racer/
    60. 60. Device OrientationDemo: http://slides.html5rocks.com/#slide-orientation Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html 60 © 2011 – Kaazing Corporation
    61. 61. Offline and Storage 61 © 2011 – Kaazing Corporation
    62. 62. Offline Web Applications• Use complete web sites (documentation sets) in offline mode• Cache pages that have not been visited yet• Browsers cache data in an Application Cache• HTML5 allows online and offline detection• Allows prefetching of site resources (can speed up pages)• Simple manifest mechanism 62 © 2011 – Kaazing Corporation
    63. 63. Example appcache Fileappcache File CACHE MANIFEST # manifest version 1.0.1 # Files to cache index.html cache.html html5.css image1.jpg img/foo.gif http://www.example.com/styles.css # Use from network if available NETWORK: network.html # Fallback content FALLBACK: / fallback.html 63 © 2011 – Kaazing Corporation
    64. 64. Example manifest Attribute• Reference the manifest file: • Use .appcache extension (*.manifest also allowed) • Add as attribute to HTML element HTML <!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title> 64 © 2011 – Kaazing Corporation http://appcachefacts.info/
    65. 65. The 2012 HTML5 Toolbox 65 © 2011 – Kaazing Corporation
    66. 66. Browser Support• Modern browsers (incl. mobile) already support a lot of features, : • http://html5test.com• Support varies widely for different features • IE 6,7 and 8: minimal support • Use support matrices: • http://caniuse.com • http://mobilehtml5.org 66 © 2011 – Kaazing Corporation http://paulirish.com/2010/high-res-browser-icons
    67. 67. Browser Developer ToolsBrowser Built-In Tool Mac Shortcut Windows ShortcutChrome Developer Tools Command + CTRL + Shift + J Option + JFirefox Firebug F12 F12Opera Dragonfly Command + CTRL + Shift + I Option + ISafari Web Inspector Command + CTRL + Alt + I Option + IInternet Explorer Developer Tools F12 67 © 2011 – Kaazing Corporation
    68. 68. HTML5 Boilerplate • The best way to get started http://html5boilerplate.com 68 © 2011 – Kaazing Corporation
    69. 69. Modernizr • Part of H5BP • Download or create a custom build • Use Modernizr.load to test for feature support Javascript Modernizr.load({ test: Modernizr.websocket, yep : ’websocket.js, nope: ’kz-websocket-polyfill.js }); 69 © 2011 – Kaazing Corporation http://www.sfhtml5.org/events/28458331
    70. 70. Polyfills and Emulation • Feature detect with Modernizr (part of H5BP): http://www.modernizr.com • Complete polyfill list: https://github.com/Modernizr/Modernizr/wiki/HT ML5-Cross-browser-Polyfills 70 © 2011 – Kaazing Corporation
    71. 71. Chrome Frame • The Ultimate polyfill • Embed Chrome in IE • No admin privileges needed to install HTML <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame <meta http-equiv="X-UA-Compatible“ content="IE=edge,chrome=1”> 71 © 2011 – Kaazing Corporation http://code.google.com/chrome/chromeframe/
    72. 72. Mobile Boilerplate 72 © 2011 – Kaazing Corporation http://html5boilerplate.com/mobile/
    73. 73. 320 and up 73 © 2011 – Kaazing Corporation http://stuffandnonsense.co.uk/projects/320andup
    74. 74. Opera Mobile Emulator 74 © 2011 – Kaazing Corporation http://www.opera.com/developer/tools/mobile/
    75. 75. Ripple Mobile Emulator 75 © 2011 – Kaazing Corporation http://ripple.tinyhippos.com/download
    76. 76. Questions? • Now or Later • E-mail: peter.lubbers@kaazing.com • Twitter: @peterlubbers • LinkedIn: Peter Lubbers 76 © 2011 – Kaazing Corporation
    77. 77. Buy the Book! • Pro HTML5 Programming (Apress, 2011) • 50% off e-book coupon code: HTL528 http://goo.gl/4RmFk 77 © 2011 – Kaazing Corporation
    78. 78. Get Trained! • Proven, practical worldwide HTML5 Training (training from experts, not just trainers): • E-mail us: training@kaazing.com • Web site: http://kaazing.com/training/ 78 © 2011 – Kaazing Corporation
    79. 79. SF HTML5 User Group • Free • Great monthly events with top speakers • Video-taped • Twitter: @sfhtml5 • Sign up today: www.sfhtml5.org 79 © 2011 – Kaazing Corporation The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
    80. 80. Other Great Resources • HTML5 Weekly (weekly newsletter): http://html5weekly.com/ • The Web Ahead (5x5 Podcast): http://5by5.tv/webahead/ 80 © 2011 – Kaazing Corporation
    81. 81. Elements Overview http://html5doctor.com/element-index/ 81 © 2011 – Kaazing Corporation
    82. 82. Who is Developing HTML5? • Web Hypertext Application Technology Working Group (WHATWG) http://www.whatwg.org/specs/web-apps/current-work/ • World Wide Web Consortium (W3C) http://dev.w3.org/html5/spec/Overview.html • Internet Engineering Task Force (IETF) http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol 82 © 2011 – Kaazing Corporation
    83. 83. 83 © 2011 – Kaazing Corporation
    1. A particular slide catching your eye?

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

    ×