Your SlideShare is downloading. ×
0
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Peter lubbers-html5-overview-sf-dev-conf-2011

4,609

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • Peter, this is a really good presentation but on slide 18 you say, 'OK, so it's not quite ready...' I know what you're trying to say but I'd caution you regarding how you say it. Reading this, many people would come away saying that a noted HTML5 expert is saying HTML5 is not ready to use yet when that isn't quite what you meant!

    Also, what happened to the text on slide 64? Slides 68 t & 70 too.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,609
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
115
Comments
1
Likes
2
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
  • Coming to a head  vote in W3C, WHATWG created
  • Well, that’s the promise, actually  next slide
  • 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
  • Steve Jobs says 90% browser crashes are due to FlashPlug-ins are prone to attacks
  • HTML, CSS, and JS
  • Not deprecated, but obsolete
  • They’re all Web storage
  • Transcript

    • 1. Title
      HTML5Shoes:@matijs
      HTML5: The30,000 Foot Overview(Updated)
      Peter Lubbers
      Senior Director, Technical Communication
      Kaazing
    • 2. About @peterlubbers
    • 3. Not to Be Confused With…
    • 4. About Kaazing
      • High-performance WebSocket Platform
      • 5. Global HTML5 Training
      • 6. Check out our booth, win prizes
      • 7. HTML5 Live Conference (NYC, London)
    • SF HTML5 User Group
      • Free
      • 8. Great monthly events with top speakers
      • 9. Video-taped
      • 10. Twitter: @sfhtml5
      • 11. Sign up today:www.sfhtml5.org
      The HTML5 logo is attributed to the W3C. http://www.w3.org/html/logo/
    • 12. Last Year…
      • SF HTML5 Meetup (<100 members)
      • 13. Less HTML5 features
      • 14. Less browser support
      • 15. 2 Hours + 1 Hr Q&A
      • 16. 30,000’ Overview
      http://www.slideshare.net/peterlubbers/html5-4378635
    • 17. Today…
      • SF HTML5 Meetup: ~2500 members
      • 18. More HTML5 features
      • 19. More browser support
      • 20. 1 Hr (incl. Q&A)
      • 21. So… talk faster or
    • 100,000 Foot Overview
      • Introducing the 100,000’ Overview
    • Agenda
      #html5devconf
      @peterlubbers
    • 27.
      • The new major milestone for HTML
      • 28. Focused on Web Applications
      • 29. Web apsare rapidly becoming first class apps, on par with desktopand native apps
      • 30. Different definitions
      What is HTML5?
      HTML
      JavaScript
      CSS
      NEWT?
    • 31. Browser Support
      • Modern browsers already support a lot of features, including mobile browsers:
      • 32. http://html5test.com
      • 33. Support varies widely for different features
      • 34. IE 6,7 and 8: minimal support
      • 35. Use support matrices:
      • 36. http://caniuse.com
      • 37. http://mobilehtml5.org
      http://paulirish.com/2010/high-res-browser-icons
    • 38. HTML Timeline
    • 39. HTML (1.0)
      • 1991: HTML Tags Specification
      • 40. 1993: First HTML Specification (IETF)
      • 41. First spec ~41 Pages Long
    • HTML 2.0, 3.0
      • 1995: HTML 2.0 (IETF)
      • 42. 1995: HTML 3 Proposed and Abandoned
    • HTML 3.2, 4.0
      1997: HTML 3.2 (W3C)
      1997: HTML 4.0 (W3C)
    • 43. HTML 4.01, XHTML, Web 2.0
      1999: HTML 4.01
      2000: XHTML 1.0
      2001: Last 4.01 Errata
      2001: XHTML 1.1
      2004: Web 2.0
    • 44. HTML5
      • 2004: WHATWG (Web Apps 1.0)
      • 45. 2008: HTML5 Working Draft W3C
      • 46. 2009: XHTML 2.0 Dropped
    • HTML5
      • OK, so it’s not quite ready…
      • 47. May 24 2011: Working Draft Last Call
      • 48. 2012: Candidate Recommendation
      • 49. 2022: Proposed Recommendation
      • 50. Lots of feature support already
    • Why HTML5?
      • 5 Reasons why you should care!
    • 1) HTML5 Paves the Cowpaths
      • Because HTML5 takes a pragmatic approach, fixing common real-world problems
    • PavedCowpath
      HTML4
      <form>
      <input name="email" type="text">
      crapload of validation codeor extra js lib
      (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-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-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01-x09x0bx0cx0e-x7f])+)])
      HTML5
      <input type=email required>
    • 51. 2) HTML5 Simplifies
      Because HTML5 is, well, simpler
    • 52. Simplified Doctype
      HTML4/XHTML
      • HTML 4.01 Strict
      • 53. HTML 4.01 Transitional
      • 54. HTML 4.01 Frameset
      • 55. XHTML 1.0 Strict
      • 56. XHTML 1.0 Transitional
      • 57. XHTML 1.0 Frameset
      • 58. XHTML 1.1
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      HTML5
      <!DOCTYPE html>
    • 59. Simplified Character Set
      HTML4
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      HTML5
      <meta charset=utf-8>
    • 60. SimplifiedMarkup
      HTML5
      <!DOCTYPE html>
      <meta charset=utf-8>
      <title>HTML5</title>
      <h1>HTML5!</h1>
      DOM
      70 characters!
    • 61. Simplified Markup
      Two HTML5 pages in onetweet!
    • 62. 3) HTML5 is Universal
      • Because HTML5 works in all languages and accessibility is built in from the ground up
    • Universal Access
      • Support for all world languages
      • 63. For example, the new <ruby> element
      • 64. Accessibility
      • 65. Semantic markup
      • 66. WebVTT
      <video controls preload="metadata">
      <source src="rocpoc.mp4">
      <track label="English" kind="subtitles"
      src="subtitles_en.vtt”>
      </video>
      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 pretty sweet. I just hope that people use the new features thoughtfully.
      http://html5videoguide.net/presentations/WebVTT
    • 67. 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, sockets)
    • Plugins
      • Built-in is better than bolt-on —@brucel
      • 68. Plugins may not be installed
      • 69. Pluginscan be an attack vector (Proxy poisoning)
      • 70. “Whenever a Mac crashes, more often that not is because of Flash” —Steve Jobs
      http://www.infoq.com/news/2011/09/Metro-Plug-ins
    • 71.
    • 72. Secure by Default
      • HTML5 uses origin-based security
      • 73. Defines secure cross-origin sharing
      • 74. HTML5 is not without flaws, but issues will be fixed (unlike proprietary plugins)
      • 75. Canvas image data
      • 76. WebSocket proxy poisoning
      http://enable-cors.org/
    • 77. 5) It’s Cool!
      • Because all the cool kids use it
    • HTML5 Feature Areas
    • 78. HTML5 Feature Areas
      Semantics: Markup describes purpose of content(e.g. <header> vs. <div class="header">)
      CSS3: New selectors, more visual options
      Multimedia: <audio> and <video>
      Graphics: <canvas> and in-line SVG
    • 79. HTML5 Feature Areas
      Device Access: Geolocation, accelerometer, etc.
      Performance: Run JS in background
      Offline/Storage: Use web apps on/off line
      Connectivity: Improved XHR, SSE, WebSockets
    • 80. Semantic Markup & Microdata
    • 81. Valid HTML vs. Valid XHTML
      • If you’re so proud of your XHTML…
      • 82. Why don’t you serve it with the right mime type?
      • 83. Over 90% of XHTML is delivered with the text/html mime type and therefore broken
      • 84. Delivering XHTML as application/xhtml+xmlis not supported in old IE (Will prompt for download)
    • Valid HTML vs. Valid XHTML
      • Use HTML5 and create valid HTML
      • 85. http://html5.validator.nu/
      • 86. http://validator.w3.org
      • 87. HTML5 allows XML syntax from XHTML 1.0 for backward compatibility
      • 88. For example: <br />
      • 89. HTML5 has well-definedprocessing rules
      http://validator.nu
    • 90. New HTML5 Elements
      <canvas>
      <article>
      <audio>
      <aside>
      <command>
      <dialog>
      <details>
      <datalist>
      <header>
      <hgroup>
      <footer>
      <figure>
      <embed>
      <nav>
      <keygen>
      <mark>
      <meter>
      <ruby>
      <output>
      <section>
      <rp>
      <rt>
      <video>
      <source>
      http://dev.w3.org/html5/markup/elements.html#elements
    • 91. Removed Elements
      <acronym>
      <basefont>
      <applet>
      <big>
      <dir>
      <font>
      <center>
      <s> <strike>
      <frame>
      <u>
      <frameset>
      <noframes>
      <tt>
    • 92. Semantic Markup Benefits
      • Based on research (Opera, Google studies on commonly used div class and id names)
      • 93. Cleaner, less verbose markup (replace div and span elements with meaningful elements)
      • 94. Machine readable:
      • 95. Search engines
      • 96. Syndication
      • 97. Linking and sharing
    • Anatomy of an HTML5 Page
    • 98. HTML5 Page in IE
      I.E. <9
    • 99. Microdata
      • Emphasis on machine readability (SEO)
      • 100. Easy-to-write syntax (add attributes to any element)
      • 101. Use microdata vocabularies: http://data-vocabulary.org
    • 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>
      HTML5 Microdata
    • 102. HTML5 Forms
      • New form functionality:
      • 103. No JavaScript required
      • 104. Native date and color pickers
      • 105. Search, e-mail, web address
      • 106. Client side validation
      • 107. Spin boxes and sliders
      • 108. Features degrade gracefully (unknown input types are treated as text)
      • 109. Benefits:
      • 110. Virtual keyboard support
      • 111. Native widgets and error messages are internationalized
    • 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>
      Example HTML5 Form
    • 112. Forms features
      Date picker
      Color picker
    • 113. CSS3
    • 114. CSS Level 3
      • Modularized for easier browser uptake
      • 115. Almost 50 modules (readiness varies)
      • 116. Use browser-specific prefixes until finalized
      • 117. Dramaticallyimproves performance
      • 118. Examples:
      • 119. Border radius (roundedcornerswithout images)
      • 120. Gradients
      • 121. Multi-column layout
      • 122. Reflection
      • 123. Etc.
      http://css3please.com/
    • 124. Rounded corners
      CSS
      a:hoverimg {
      border-radius: 10px;
      border: 2px solid #F47D31;
      -webkit-transform: scale(1.05);
      }
    • 125. CSS
      /* Linear Gradient for WebKit and Mozilla in CSS3 */
      background-image: -moz-linear-gradient(top, #F47D31, #888);
      background-image: -webkit-gradient( linear, left top, left bottom, color-stop (0,#F47D31), color-stop(1, #888));
      Copyright © 2011 - Kaazing Corporation. All rights reserved.
      Example: Linear Gradient
    • 126. CSS
      /* Define a fallback color and image */
      background-color: #f47d31;
      background: #888888 url("gradient-bg.png") repeat-x top;
      /** In Opera, you can also use SVG:
      background: #f47d31 url("gradient-bg.svg");
      **/
      /* IE(6&7, 8) Fallback, specify 6-digit colors here */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF47D31', EndColorStr='#FF888888');
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF47D31', EndColorStr='#FF888888')";
      Copyright © 2011 - Kaazing Corporation. All rights reserved.
      Linear Gradient Fallback
    • 127. Multi-ColumnLayout
      CSS
      /* Column layout*/
      body {
      -webkit-column-count:3;
      -webkit-column-width: 100px;
      -webkit-column-gap: 10px;
      -webkit-column-rule: 1px solid;
      -moz-column-count:3;
      -moz-column-width: 100px;
      -moz-column-gap: 10px;
      -moz-column-rule: 1px solid;}}
    • 128. Reflection
      For images, videos, etc.
      CSS
      -webkit-box-reflect:
      below 2px -webkit-gradient(
      linear, left top, left bottom,
      from(transparent), color-stop(
      0.6, transparent), to(white));
    • 129. Multimedia
    • 130. HTML5 Audio and Video
      • New HTML5 media elements
      • 131. <audio> and <video>
      • 132. Native audio and video (no plugins required)
      • 133. Programmable with JavaScript
      • 134. Style with CSS
      • 135. Add videos and audio as if it was an image
      • 136. Codec support varies, but multiple source elements and fallback content can be used
    • 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>
    • 137.
    • 138. 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>
      Flash Video Fallback
    • 139. 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.
      WebVTT
    • 140. Graphics and 3D
    • 141. HTML5 Canvas and SVG
      • Provide native drawing functionality
      • 142. Previously possible only with plugins (Flash, Silverlight)
      • 143. Completely integrated into HTML5documents (part of DOM)
      • 144. Can be styled with CSS
      • 145. Can be controlled with JavaScript
      • 146. Use for animation, charts, images,pixel manipulation, and so on
      • 147. Canvas supports 2D and 3D (WebGL)
    • Canvas Pixel Data
    • 148. Interactive Canvas Animation
      everytimezone.com
    • 149. Canvas Demos
      www.canvasdemos.com
    • 150. 3D Canvas (WebGL)
      http://bodybrowser.googlelabs.com/body.html
    • 151. Device Access
    • 152. Device Access Features
      • Lots of features, varying levels of suport:
      • 153. Geolocation
      • 154. Allows users to share their locationfor location-aware services
      • 155. Implemented in all browsers
      • 156. Drag and Drop
      • 157. Filesystem API
      • 158. Speech Input
      • 159. Device orientation (accelerometer)
      • 160. Webcam (bar code, QR code scanning)
    • Geolocation with Map APIs
    • 161. Device Orientation
      Demo: http://slides.html5rocks.com/#slide-orientation
      Image: http://idisk.mac.com/han.solo-Public/Canvas/SteelSeries/Radial.html
    • 162. Speech Input
      HTML
      <input type=text x-webkit-speech>
    • 163. Performance
    • 164. Web Workers
      • JavaScript is single-threaded
      • 165. HTML5 Web Workers provide background processing capabilities to web applications
      • 166. Run background JavaScript (like a thread)
      • 167. Avoid blocking the UI thread
    • Offline and Storage
    • 168. Offline Web Applications
      • Use complete web sites (documentation sets) in offline mode
      • 169. Cache pages that have not been visited yet
      • 170. Browsers cache data in an Application Cache
      • 171. HTML5 allows online and offline detection
      • 172. Allows prefetching of site resources (can speed up pages)
      • 173. Simple manifest mechanism
    • appcache 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
      Example appcache File
    • 174.
      • Reference the manifest file:
      • 175. Use .appcache extension (*.manifest also allowed)
      • 176. Add as attribute to HTML element
      HTML
      <!DOCTYPE html>
      <html manifest="offline.appcache">
      <head>
      <title>HTML5 Application Cache Rocks!</title>
      Example manifest Attribute
      http://appcachefacts.info/
    • 177. Web and DB Storage
      • Many powerful new client-side storage options
      • 178. Web and Web Database storage a.k.a. "cookies on steroids”
      • 179. Web Storage (Session and Local Storage
      • 180. Web Database Storage
      Cookies
      Session
      Local
      Database
    • 181. Connectivity and Real Time
    • 182. Connectivity Features
    • WebSocket
      • Replaces Comet, Reverse Ajax polling
    • WebSockets
      • New W3C API and IETF Protocol for low-latency, real-time, bi-directional connections
      • 187. Easily add social networking components(Chat, etc.) and real-time data to static pages
    • http://forex.kaazing.me
    • 188. The 2011 HTML5 Toolbox
    • 189. Browser Developer Tools
    • 190. HTML5 Boilerplate
      • The best way to get started
      http://html5boilerplate.com
    • 191. Polyfills and Emulation
      • Feature detect with Modernizr (part of H5BP):http://www.modernizr.com
      • 192. Complete polyfill list: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
    • Modernizr
      • Part of H5BP
      • 193. Download or create a custom build
      • 194. Use Modernizr.load to test for feature support
      Javascript
      Modernizr.load({
      test: Modernizr.websocket,
      yep : ’websocket.js',
      nope: ’kz-websocket-polyfill.js'
      });
      http://www.sfhtml5.org/events/28458331
    • 195. Chrome Frame
      • The Ultimate polyfill
      • 196. Embed Chrome in IE
      • 197. 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”>
      http://code.google.com/chrome/chromeframe/
    • 198. Performance Testing Tools
    • Questions?
      • Now or Later
      • 202. E-mail: peter.lubbers@kaazing.com
      • 203. Twitter: @peterlubbers
      • 204. LinkedIn: Peter Lubbers
    • Buy the Book!
      • Pro HTML5 Programming (Apress, 2010)
      • 205. 50% off e-book coupon code:HTML5CONFhttp://www.prohtml5.com
    • Useful HTML5 Resources
      • Modernizr
      • 206. Small, simple JavaScript library that checks support for HTML5 and CSS3 features
      • 207. Moves away from user-agent sniffing and uses feature detection insteadhttp://www.modernizr.com/
      • 208. html5shiv
      • 209. Creates the new HTML5 DOM elements in Internet Explorer so that styles can be applied to themhttp://code.google.com/p/html5shiv/
      • 210. html5boilerplate
      • 211. http://html5boilerplate.com
    • Useful HTML5 Resources
      • HTML5 Validators (Experimental):
      • 212. http://html5.validator.nu/
      • 213. http://validator.w3.org/
      • 214. HTML5 outline algorithm test page
      • 215. http://gsnedders.html5.org/outliner/
      • 216. Performance:
      • 217. Chrome Speed Tracerhttp://code.google.com/webtoolkit/speedtracer/
      • 218. Yslow (for Firebug)http://developer.yahoo.com/yslow/
      • 219. Page Speed (Firefox and Chrome Add-On)http://code.google.com/speed/page-speed/docs/using_chrome.html
      • HTML5 User Group:
      • 220. San Francisco: http://www.sfhtml5.org/
      • 221. Apress book: Pro HTML5 Programming
      • 222. (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/
      • 223. 5by5 podcasts:
      • 224. The Web Ahead
      • 225. The Big Web Show
      • 226. http://5by5.tv
      Learn More
    • 227. Get Trained!
      • Proven, practical worldwide HTML5 Training (training from experts, not just trainers):
      • 228. E-mail us: training@kaazing.com
      • 229. Web site: http://kaazing.com/training/

    ×