Docstoc

HTML5 The Next Internet Gold Rush

Document Sample
HTML5 The Next Internet Gold Rush Powered By Docstoc
					                                    Title

    HTML5: The Next Internet Gold Rush
       (HTML5 and its impact on technical communication)
                                                                Peter Lubbers
                                    Senior Director, Technical Communication
1    © 2011 – Kaazing Corporation                                     Kaazing
About @peterlubbers




 2   © 2011 – Kaazing Corporation
Not to Be Confused With…




 3   © 2011 – Kaazing Corporation
Agenda

• HTML5 History (The 2-Minute Version)
• HTML5 Vision
                                      #stc11
• HTML5 Feature Areas             @peterlubbers
  and their impact on                 #html5
  Technical
  Communication
• Q&A




 4   © 2011 – Kaazing Corporation
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… we're 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 O'Reilly
 5       © 2011 – Kaazing Corporation
HTML5 Feature Areas




 6   © 2011 – Kaazing Corporation
HTML Timeline




 7   © 2011 – Kaazing Corporation
HTML (1.0)

 • 1991: HTML Tags Specification
 • 1993: First HTML Specification (IETF)
 • First spec ~41 Pages Long




 8   © 2011 – Kaazing Corporation
HTML 2.0, 3.0

 •   1995: HTML 2.0 (IETF)
 •   1995: HTML 3 Proposed and Abandoned




 9   © 2011 – Kaazing Corporation
HTML 3.2, 4.0

 1997: HTML 3.2 (W3C)
 1997: HTML 4.0 (W3C)




 10   © 2011 – Kaazing Corporation
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




 11   © 2011 – Kaazing Corporation
HTML5

•     2004: WHATWG (Web Apps 1.0)
•     2008: HTML5 Working Draft W3C
•     2009: XHTML 2.0 Dropped




 12    © 2011 – Kaazing Corporation
HTML5

 •    OK, so it’s not quite ready…
 •    May 24th, 2011: Working Draft Last Call
 •    2012: Candidate Recommendation
 •    Lots of feature support already
 •    caniuse.com
 •    html5test.com




 13     © 2011 – Kaazing Corporation
HTML5 Design Principles




 14   © 2011 – Kaazing Corporation
Compatibility

• Pave the cow paths
• Degrade gracefully
• Research common
  behavior, solve real
  problems
• Support existing
  content
• Evolution not revolution
• Don't reinvent the wheel
  (or at least make a better one!)

 15   © 2011 – Kaazing Corporation
Utility

• Priority of Constituencies:
      • When in doubt…
        value users
        over authors,
        over implementers
        (browsers)
        over specifiers
        (W3C/WHATWG)
        over theoretical purity
• Secure by design
• DOM consistency
• Separation of presentation and content (Use CSS)
 16     © 2011 – Kaazing Corporation
Interoperability

• Specify well-defined behavior
      • Specific instead of vague
      • Specification now >900 pages!
• Handle errors well
      • Improved and ambitious error
        handling plans
      • Prefer graceful error recovery to
        hard failure
• Avoid needless complexity



 17      © 2011 – Kaazing Corporation
Universal Access

• Support for all world
  languages
      • For example, <ruby>
        (Ruby annotations, used
        in East Asian typography)
• Accessibility
      • Support users with disabilities
         • For example, screen readers
      • Web Accessibility Initiative for Accessible Rich
        Internet Applications (WAI-ARIA)
         • WAI-ARIA roles can be added today



 18      © 2011 – Kaazing Corporation
A Plugin-Free Paradigm

 • HTML5 provides native support for many
   features that were possible only with plugins or
   complex hacks (audio/video, drawing, sockets)
 • Problems with plugins:
      • Plugins may be disabled, blocked (iPad does not ship
        with Flash plugin), or not installed
      • Plugins are a separate attack vector
      • Plugins are difficult to integrate with the rest of an
        HTML document (plugin boundaries, clipping, and
        transparency issues)
 • “Whenever a Mac crashes, more often that not is
   because of Flash” —Steve Jobs
 19     © 2011 – Kaazing Corporation
20   © 2011 – Kaazing Corporation
HTML5, Meet Tech Com

• HTML5 impact on Technical
  Communication will be bigger
  than DITA
• Specific benefits in all feature
  areas
• Widespread adoption is around
  the corner, so it is time to start
  using it!
• Many HTML5 features can be
  used today


 21   © 2011 – Kaazing Corporation
Browser Support
• Modern browsers already support a lot of features,
  including mobile browsers
• Support varies widely for different features
      • Internet Explorer 6,7 and 8 have very little support
      • Use support matrix at http://caniuse.com
• Use feature detection and polyfill libraries to fill the
  gaps
      • Modernizr
      • HTML5 Boilerplate templates




 22      © 2011 – Kaazing Corporation
Semantic Markup & Microdata




 23   © 2011 – Kaazing Corporation
Valid HTML vs. Valid XHTML

• So you created XHTML…




• But did you know that:
      • Over 90% of XHTML is delivered with the text/html
        mime type and therefore broken
      • Delivering XHTML as text/xml or
        application/xhtml+xml is risky (not supported in
        old IE)
 24      © 2011 – Kaazing Corporation
Valid HTML vs. Valid XHTML

• Use HTML5 and create valid HTML
      • http://html5.validator.nu/
      • http://validator.w3.org
• HTML5 allows XML syntax from XHTML 1.0 for
  backward compatibility
      • For example: <br/>
• HTML5 has well-defined
  processing rules
• Simple is better
      • New doctype
      • Character set

 25       © 2011 – Kaazing Corporation
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

    26      © 2011 – Kaazing Corporation
                                           <!DOCTYPE html>
Simplified Character Set



                                     HTML4

    <meta http-equiv="Content-Type"
  content="text/html; charset=utf-8">



                                              HTML5

                                      <meta charset=utf-8>


 27   © 2011 – Kaazing Corporation
Minimal HTML5 Page



                                       HTML5
      <!DOCTYPE html>
                                               DOM
      <meta charset=utf-8>
      <title>HTML5</title>
      <h1>HTML5!</h1>




 28     © 2011 – Kaazing Corporation
New HTML5 Elements


                    <article>                     <aside>      <audio>       <canvas>


              <command>                      <datalist>        <details>         <dialog>


      <embed>                  <figure>            <footer>     <header>       <hgroup>

                    <keygen>                  <mark>          <meter>                    <nav>


       <output>                          <ruby>       <rt>     <rp>      <section>


                         <source>                    <video>

                                                                           http://dev.w3.org/html5/
                                                                           markup/elements.html#
 29       © 2011 – Kaazing Corporation
                                                                           elements
Deprecated Elements



                                          <acronym>

                                            <applet>      <basefont>

                    <big>                             <dir>      <font>
                             <center>
                                                              <s> <strike>

                    <frame>                                         <u>
                                      <frameset>

                                     <noframes>    <tt>



 30   © 2011 – Kaazing Corporation
Framesets

• That’s right! Frames are deprecated
• Should continue to work in most browsers, but
  look for alternatives
• Frames are used heavily in:
      • Online Help systems
      • API documentation




 31      © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page


       HTML

      <!DOCTYPE html>
      <html lang="en" manifest="offline.manifest">
        <head>
          <meta charset=utf-8>
          <title>HTML5</title>
          <link rel="stylesheet" href="html5.css">
        </head>




 32     © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page

      HTML

      <body>
        <header>
          <h1>Header</h1>
        </header>

         <div id="container">
           <nav>
             <h3>Nav</h3>
           </nav>




 33    © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page

        HTML

      <section>
        <article>
          <header>
            <h1>Article Header</h1>
          </header>
           <p>Lorem ipsum <mark>HTML5</mark> rocks…</p>
          <footer>
            <h2>Article Footer</h2>
          </footer>
        </article>



 34      © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page
      HTML

 <article>
   <header><h1>Article Header</h1></header>
    <figure>
      <figcaption>This image…</figcaption>
      <img src="data:image/gif;base64,
            R0lGODlhEAAOALMAAOlh
             …
            EAAOALMAAOazgAwXEQA7"
            width="160" height=”100" alt=”Lake Tahoe”>
       </figure>
       <footer><p>footer</p></footer>
  </article>
 </section>


 35     © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page

        HTML


            <aside>
              <h3>Aside</h3>
            </aside>
            <footer>
              <h2><small>Footer</small></h2>
            </footer>
          </div>
        </body>
      </html>




 36      © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page




 37   © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page




 38   © 2011 – Kaazing Corporation
Anatomy of an HTML5 Page




 39   © 2011 – Kaazing Corporation
html5shiv

         HTML


      <head>
       <!--[if lt IE 9]>
        <script
        src="http://html5shiv.googlecode.com/svn/trunk/
        html5.js"></script>
       <![endif]-->
      </head>

      http://code.google.com/p/html5shiv/




 40       © 2011 – Kaazing Corporation
Semantic Markup & Microdata

• Emphasis on machine readability
• SEO advantage
• 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


 41   © 2011 – Kaazing Corporation
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>




 42      © 2011 – Kaazing Corporation
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
 43        © 2011 – Kaazing Corporation
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>




 44      © 2011 – Kaazing Corporation
CSS3




 45   © 2011 – Kaazing Corporation
CSS Level 3
•        Modularized for easier browser uptake
•        Almost 50 modules (readiness varies)
•        Use browser-specific prefixes until finalized
•        Dramatically improve performance
•        Examples:
         •   Border radius (rounded corners)
         •   Gradients
         •   Multi-column layout
         •   Selectors
         •   Transformations and Transitions
         •   Web Fonts
         •   Media Queries
    46        © 2011 – Kaazing Corporation
Multimedia




 47   © 2011 – Kaazing Corporation
HTML5 Audio and Video

• New HTML5 media elements
      • <audio> and <video>
• Native audio and video (no plugins required)
      • Programmable with JavaScript
      • Style with CSS
• Codec support varies, but multiple
  source elements can be used




 48     © 2011 – Kaazing Corporation
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 about HTMl5
       </video>
 49      © 2011 – Kaazing Corporation
Video Fallback

      HTML

      <!—Multiple videos with alternate Flash content-->
      <video controls>
       <source src=”goldrush.webm">
       <source src=”goldrush.mp4”>
       <object data="videoplayer.swf"
           type="application/x-shockwave-flash">
          <param name="movie" value="rocpoc.swf"/>
          </object>
          A movie by Rocky Lubbers
      </video>




 50      © 2011 – Kaazing Corporation
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.




 51       © 2011 – Kaazing Corporation
Graphics and 3D




 52   © 2011 – Kaazing Corporation
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
Device Access




 54   © 2011 – Kaazing Corporation
Device Access Features

• Geolocation
      • Allows users to share their location
        for location-aware services
      • Implemented in all browsers
• Drag and Drop
• File API
• Very early stages:
      • Speech Input
      • Device orientation
      • Other device features
        (webcams, audio devices)

 55      © 2011 – Kaazing Corporation
Performance




 56   © 2011 – Kaazing Corporation
Web Workers & Performance

• HTML5 Web Workers provide background
  processing capabilities to web applications
      • Run background JavaScript
• Important performance tips:
         •    CSS3
         •    Sprites (combine images)
         •    Minification
         •    Data URIs
• Data URIs
      • Use for frequently used,
        small images, such as
        warnings or logos
• Test with optimization tools (Yslow, Page Speed)
 57      © 2011 – Kaazing Corporation
Data URI Example


      HTML

 <img src="data:image/png;base64,
 R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//
 ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA
 4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmT
 IHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIy
 d7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16"
 height="14" alt="embedded folder icon">




 58     © 2011 – Kaazing Corporation
Offline and Storage




 59   © 2011 – Kaazing Corporation
Offline Web Applications

• Use complete web sites offline
• 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


    60   © 2011 – Kaazing Corporation
Example appcache File
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

 61      © 2011 – Kaazing Corporation
Example appcache 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>




 62      © 2011 – Kaazing Corporation
Web and DB Storage
• Many powerful new client-side storage options
• Web and Web Database storage a.k.a.
  "cookies on steroids”
• Web Storage (Session and Local Storage
• Web Database Storage




  Cookies                             Session   Local   Database
 63    © 2011 – Kaazing Corporation
Connectivity and Real Time




 64   © 2011 – Kaazing Corporation
Connectivity Features

 •    Cross Document Messaging
 •    XMLHttpRequest Level 2
 •    Server-Sent Events
 •    WebSockets




 65    © 2011 – Kaazing Corporation
WebSockets
• New W3C API and IETF Protocol
• Real-time, bi-directional
• Dramatically increases real-time web performance
      • Up to 1000:1 reduction in
        unnecessary network traffic
      • Reduces average latency by 2/3
• Secure cross-domain
  communication
• Easily add social
  networking components
  (Chat, etc.) and real-time
  data to static pages
 66      © 2011 – Kaazing Corporation
Questions?




 •    Now or Later
 •    E-mail: peter.lubbers@kaazing.com
 •    Twitter: @peterlubbers
 •    LinkedIn: Peter Lubbers
 67     © 2011 – Kaazing Corporation
Buy the Book!

 • Pro HTML5 Programming (Apress, 2010)
 • Visit the conference book store
 • E-book coupon code for STC Summit 2011:
   LUBBERSHTML5




 68   © 2011 – Kaazing Corporation
Useful HTML5 Resources

• Modernizr
     • Small, simple JavaScript library that checks
       support for HTML5 and CSS3 features
     • Moves away from user-agent sniffing and uses
       feature detection instead
       http://www.modernizr.com/
• html5shiv
     • Creates the new HTML5 DOM elements in Internet
       Explorer so that styles can be applied to them
       http://code.google.com/p/html5shiv/
• html5boilerplate
     • http://html5boilerplate.com
69     © 2011 – Kaazing Corporation
Useful HTML5 Resources
• HTML5 Validators (Experimental):
      • http://html5.validator.nu/
      • http://validator.w3.org/
• HTML5 outline algorithm test page
      • http://gsnedders.html5.org/outliner/
• Performance:
      • Chrome Speed Tracer
        http://code.google.com/webtoolkit/speedtracer/
      • Yslow (for Firebug)
        http://developer.yahoo.com/yslow/
      • Page Speed (Firefox and Chrome Add-On)
        http://code.google.com/speed/page-
        speed/docs/using_chrome.html
 70      © 2011 – Kaazing Corporation
Learn More

• HTML5 User Group:
      • San Francisco: http://www.sfhtml5.org/
• Apress book: Pro HTML5 Programming
      • (Peter Lubbers, Brian Albers, & Frank Salim)
        http://www.prohtml5.com/
• World Wide HTML5 Training:
      • E-mail us: training@kaazing.com
      • Web site: http://tech.kaazing.com/training/




 71      © 2011 – Kaazing Corporation
72   © 2011 – Kaazing Corporation

				
DOCUMENT INFO
Description: Great presentations from experts about various web technologies and programming languages.