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

  • 4,321 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,321
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
103
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/