SlideShare a Scribd company logo
1 of 142
Download to read offline
HTML5: The 30,000’ View
      A fast-paced overview of HTML5


                                                                By Peter Lubbers, Kaazing
                                                                       HTML5 User Group
                                                                           San Francisco
                                                                               May, 2010




1

          Copyright © 2010 - Kaazing Corporation. All rights reserved.
Thanks to the Sponsors!
• Twilio (event venue)
  Twilio’s software allows your web application to easily
  make and receive phone calls and SMS text messages
  using a simple web service API.
  Kaazing (event pizza and drinks)
  Kaazing WebSocket Gateway features patent-pending,
  ultra high-performance HTML5 WebSocket Acceleration™
  technology that enables companies to quickly deliver
  massively scalable, real-time web applications
• Marakana (event organization)
  Marakana provides cutting-edge open source software
  training in San Francisco, New York, Toronto, and on-
  demand corporate training
 2
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
About Peter Lubbers
• Director of Documentation and Training, Kaazing
• Co-Founder San Francisco HTML5 User Group
  http://www.sfhtml5.org/
• Co-author Pro HTML5 Programming
    o Alpha Release: www.prohtml5.com
    o Special 50% Off Coupon Code:
      APRESSPROHTML5WR
     (expires May 31st)
• Ultra Distance Runner
• Twitter: @peterlubbers

3
                          Copyright © 2010 - Kaazing Corporation. All rights reserved.
Agenda
•       HTML5 History and Vision
•       HTML5 Markup
•       HTML5 Forms
•       HTML5 APIs
•       Other HTML5 features
•       Developing HTML5 Applications
•       Q&A



    4
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Verbatim
    “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
     “In a nutshell, we love HTML5, we love it so much we want
     it to actually work.
      —Dean Hachamovitch, General Manager for Internet Explorer,
       Microsoft
      “I had no idea there was so much HTML5 already in play”
5
      —Tim O’Reilly
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML Timeline




6
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML Timeline 1980-1990




7
            Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML Timeline 1991-2000




8
            Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML Timeline 2001-2011




9
            Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML Timeline 2012-2022




10
             Copyright © 2010 - Kaazing Corporation. All rights reserved.
Standards Bodies and
         Specifications




11
          Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Standards Bodies
• Web Hypertext Application Technology Working
  Group (WHATWG)
     o Founded in 2004 (by individuals working for browser
       vendors Apple, Mozilla, Google, and Opera)
     o Develops HTML and APIs for web application
       development
     o Unofficial and open collaboration of browser vendors
       and interested parties
• World Wide Web Consortium (W3C)
     o Created draft of HTML5 in 2008
• Internet Engineering Task Force (IETF)
     o Protocols (HTTP, WebSocket)
12
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Specifications
     • WHATWG
        o http://www.whatwg.org/specs/web-apps/current-work/
     • W3C
        o http://dev.w3.org/html5/spec/Overview.html
     • IETF (WebSocket specification)
        o http://tools.ietf.org/html/draft-hixie-
          thewebsocketprotocol




13
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Is This HTML5?
     • Many pieces of the HTML5 effort (for example,
       Local Storage, WebSocket, and Geolocation)
       were originally part of the HTML5 specification
     • Moved to a separate standards document to
       keep the specification focused
     • Industry still refers to the original set of features,
       including Web Sockets, as "HTML5“
     • See:
       http://www.whatwg.org/specs/web-apps/current-
       work/multipage/introduction.html#is-this-html5?
14
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Vision and
     Design Principals




15
          Copyright © 2010 - Kaazing Corporation. All rights reserved.
Design Principal #1
     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
16
       better one!)
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Design Principal #2
     Utility
     • Priority of Constituencies:
        o When in doubt… value users over authors, over
          implementers (browsers), over specifiers
          (W3C/WHATWG), over theoretical purity.
     • Secure by design
     • DOM consistency
       (HTML5 and XHTML5)
     • Separation of
       presentation and
       content
17
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Presentation vs. Content
     • HTML5 strives to separate content from
       presentation where possible (use CSS)
     • Most of the presentational features from
       earlier versions of HTML are no longer
       supported
     • This was already in the works (HTML4
       Transitional, XHTML1.1)
     • Problems with presentational markup:
       o Poor accessibility
       o Unnecessary complexity
18
       o Larger document size
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Design Principal #3
     Interoperability
     • Specify well-defined behavior
       o Specific instead of vague
     • Handle errors well
       o Improved and ambitious error
         handling plans
       o Prefer graceful error recovery to
         hard failure
     • Avoid needless complexity
       o Simple is better

19
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Simple is Better
     • Simplify wherever possible
     • Examples:
       o Native browser ability instead of complex
         JavaScript code
       o New doctype
       o Character set
       o HTML5 APIs




20
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
•
         HTML4/XHTML
     HTML 4.01 Strict
                              Simplified Doctype
•    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


    21
                                                                              <!DOCTYPE html>
                              Copyright © 2010 - Kaazing Corporation. All rights reserved.
Simplified Character Set
                                  HTML4

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




                                    HTML5

           <meta charset="utf-8">


22
              Copyright © 2010 - Kaazing Corporation. All rights reserved.
More Detail (Where Needed)
• HTML5 is more detailed than previous specs to
  avoid misinterpretation
• Aim to define
  things thoroughly,
  especially web
  applications
• ~900 Pages
  spread over
  multiple
  specifications
23
                Copyright © 2010 - Kaazing Corporation. All rights reserved.
Design Principal #4
     Universal Access
     • Support for all world
       languages
        o For example, <ruby>
          (Ruby annotations, used
          in East Asian typography)
     • Accessibility
        o Support users with disabilities
        o Web Accessibility Initiative (WAI) Accessible Rich
          Internet Applications (ARIA)
        o WAI-ARIA roles can be added today
24
        o Supported by screen readers
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Plugin-Free Paradigm
     • HTML5 provides native support for many
       features that were only possible with plugins
       or complex hacks
       o Plugins may not be installed
       o Plugins can be disabled or blocked (iPad does not
         ship with Flash plugin)
       o Plugins are a separate attack vector
       o Plugins are difficult to integrate with the rest of an
         HTML document (plugin boundaries, clipping, and
         transparency issues)
       o Plugins are crash prone
25
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Features




26
        Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Features
     • HTML5 Markup
       o New and removed HTML elements
       o New content types
     • HTML5 Forms
     • HTML5 APIs
     • Other HTML5 Features




27
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Markup




28
       Copyright © 2010 - Kaazing Corporation. All rights reserved.
New HTML5
Tags
                <article>           <aside>                                  <audio>            <canvas>


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


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


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


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


                 <source>                         <video>



 29
                              Copyright © 2010 - Kaazing Corporation. All rights reserved.
Removed Tags in HTML5
                            <acronym>

                                     <applet>                              <basefont>

     <big>                                                     <dir>              <font>

       <center>
                                                                               <s> <strike>

     <frame>                                                                         <u>
                <frameset>

               <noframes>                                  <tt>



30
                Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Cheat Sheet




By Antonio Lupetti
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
31
                         Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Content Types
     • Metadata content
       o Elements—commonly found in the head section—
         that set up the presentation or behavior of the rest
         of the document, for example script, style,
         title
     • Flow content
       o Elements used in the body of documents and
         applications, for example form, h1, small
     • Sectioning content
       o Elements that define sections in the document, for
         example article, aside, title
32
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Content Types (Continued)
     • Heading content
       o Section headers, for example h1, h2, hgroup
     • Phrasing content
       o Text and text markup elements, for example mark,
         kbd, sub, sup, b
     • Embedded content
       o Content that imports other resources into the
         document, for example audio, video, canvas,
         iframe
     • Interactive content
       o Content that users interact with, for example
33       audio or video controls, button, textarea
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an
     HTML5 Page




34
       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
     HTML code (head section)
     <!DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8" />
         <title>HTML 5</title>
         <link rel="stylesheet" href="html5.css">
       </head>




35
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
     HTML code body section (part 1)
      <body>
        <header>
          <h1>Header</h1>
        </header>

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



36
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
     HTML code body section (part 2)
     <section>
       <article>
         <header>
           <h1>Article Header</h1>
         </header>
         <footer>
           <h2>Article Footer</h2>
         </footer>
       </article>
     </section>


37
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page
     HTML code body section (part 3)
           <aside>
             <h3>Aside</h3>
           </aside>
           <footer>
             <h2>Footer</h2>
           </footer>
         </div>
       </body>
     </html>



38
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page




39
        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page




40
        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Anatomy of an HTML5 Page




41
        Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 and CSS Level 3
     • CSS level 2 (W3C)
       o published as a Recommendation1998
       o Candidate Recommendation 2007
     • CSS Level 3 (W3C)
       o Like HTML5, under development
       o Modularized with sub-specifications for easier
         browser uptake (transformation, animation,
         transition)
     • Some CSS Level 3 examples:
       o http://www.zurb.com/playground/
       o http://www.zachstronaut.com/
42
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Forms




43
       Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Forms
     • Formerly called Web Forms 2.0
     • Native functionality (no scripting for validation)
       means less coding, for example:
       Regular expression for a valid e-mail address:
      (?:[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])+)])
44
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Forms
     • New form functionality:
       o   Date and color pickers
       o   Search, e-mail, web address input types
       o   Validation
       o   Spin boxes and Sliders
       o   More
     • Backward compatible
     • Features degrade gracefully (unknown input
       types are treated as text-type) input

45
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example HTML5 Forms




46
            Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
     Forms
     • Opera 9.6+
     • Chrome (Partial)
     • Safari (Partial)




47
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



48

     Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 APIs




49
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 APIs
     •   Canvas and SVG
     •   Audio and Video
     •   WebSocket
     •   Server-Sent Events
     •   Communication
         o Cross Document Messaging
         o XMLHttpRequest Level 2
     • Web Workers
     • Geolocation
     • Web Storage
50
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5
     Canvas
       &
      SVG



51
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
About Canvas and SVG
     • Previously possible with Flash, VML,
       Silverlight
     • Very complex to do in JavaScript without
       plugins (for example, rounded corners or
       diagonal lines)
     • Provide native drawing functionality on the
       Web
     • Completely integrated into HTML5 documents
       (part of DOM)
     • Can be styled with CSS
52   • Can be controlled with JavaScript
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
Canvas vs. SVG
     • Not a matter of good or bad
     • Both can be used and they can also be
       combined
                   Canvas                                                                  SVG
      Low level                                             High level
      Immediate mode                                        Retained mode
      Fixed size                                            Scalable
      Best for keyboard-based apps                          Best for mouse-based apps
      Animation (no object storage)                         Medium animation
      Pixels                                                XML object model
      No interaction                                        User interaction (hit detection,
                                                            events on the tree)
53
                            Copyright © 2010 - Kaazing Corporation. All rights reserved.
Canvas
     • HTML5 element and plugin-free 2D drawing
       API that enables you to dynamically generate
       and render
       o   Graphics
       o   Charts
       o   Images
       o   Animation
     • Canvas was originally introduced by Apple to
       be used in Mac OS X WebKit to create
       dashboard widgets

54
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Canvas
     • Canvas is a scriptable bitmap canvas (images
       that are drawn are final and cannot be resized
     • No object tree
     • Can be manipulated with JavaScript and styled
       with CSS
     • 2D Context
     • 3D Context (Web GL)




55
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example: Canvas Animation




            http://www.canvasdemos.com
56
              Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
     2D Canvas
     •   Chrome 2.0+
     •   Firefox 3.0+ (3.5+)*
     •   Opera 9.6+ (10.5+)*
     •   Safari 3.1+ (4.0+)*

     * Additional support for Canvas Text API



57
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
     3D Canvas (Web GL)
     • Chrome 5.0+
     • Nightly builds of Safari
     • Planned for Firefox 3.7
     * Additional support for Canvas Text API




58
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
SVG
     • “Scalable” Vector
       Graphics—not bitmaps




59
                   Copyright © 2010 - Kaazing Corporation. All rights reserved.
SVG
     • Modularized, XML-based language for describing
       2D vector and mixed vector/raster graphics
     • SVG has been around on the Web since 2002
       (using plugins)
     • SVG provides high fidelity graphics at any zoom
       level
     • Until now mostly used for static content (maps,
       org charts, floor plans, etc.)
     • HTML5 now allows native SVG content in the
       browser (control with JavaScript, style with CSS)
60
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example SVG Game




        http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/
61
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
     SVG
     The percentages shown are based on
       combined support for all SVG modules
       (for example Basic, Inline, filters):
     • Chrome 2.0+ (58%)
     • Firefox 3.0 (33%) 3.6 (46%)
     • Opera 9.6+ (83%)
     • Safari 3.1 (13%) 3.2 (46%) 4.0 (58%)

     Note: IE 9 Will provide full support
62
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



63

     Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Audio and Video




64
           Copyright © 2010 - Kaazing Corporation. All rights reserved.
Audio and Video
     • New HTML5 media elements
       o <audio>
       o <video>
     • Control using Audio/Video API
     • Native support in the browser (embedded
       codecs)
     • Originally, the HTML5 specification was going to
       require codec support…



65
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
AV Containers and Codecs
     • Audio and Video containers:
       o H264 and Ogg
     • Audio and video codecs (algorithms used to
       encode and decode an audio or video stream):
       o Audio: AAC, MP3, Vorbis
       o Video: H264, MP4, Theora
     • Stalemate over patented/free codec inclusion
     • You can add multiple formats per (audio/video)
       element to fallback

66
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example:
YouTube HTML5 Channel




      http://www.youtube.com/user/rocpoc
67
            Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
     Audio and Video
     •   Chrome 3.0+ (Ogg + H264)
     •   Firefox 3.5+ (Ogg)
     •   Safari 3.2 (H264)
     •   Opera 10.5 (Ogg)




68
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



69

     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Using
     HTML5 WebSocket




70
         Copyright © 2010 - Kaazing Corporation. All rights reserved.
About HTTP
• HTTP was originally designed for document
  transfer
• HTTP is half-duplex (traffic flows in only one
  direction at a time)
• Hard to achieve real-time,
  bi-directional communication
• Tons of unnecessary HTTP
  header information sent
  with each HTTP request
  and response and added latency

71
                   Copyright © 2010 - Kaazing Corporation. All rights reserved.
Comet and Polling:
Tin-Can Communication
• Comet and (Reverse) Ajax
  o Great toilet cleaners
  o Bad for real-time communication
  o Polling and Long-Polling




72
                 Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example HTTP Request Headers
     POST /gwt/EventService HTTP/1.1
     Host: gpokr.com
     Connection: keep-alive
     User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US)
        AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5
     Referer: http://gpokr.com/gwt/7F5E66657B938E2FDE9CD39095A0E9E6.cache.html
     Content-Length: 134
     Origin: http://gpokr.com
     Content-Type: text/plain; charset=utf-8
     Accept: */*
     Accept-Encoding: gzip,deflate,sdch
     Accept-Language: en-US,en;q=0.8
     Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
     Cookie:
        __utmz=247824721.1273102477.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd
        =(none); JSESSIONID=E7AAE0E60B01FB88D1E3799FAD5C62B3;
        __utma=247824721.1247485893.1273102477.1273104838.1273107686.3;
        __utmc=247824721; __utmb=247824721.4.10.127


73
                           Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTTP Response Headers
      200 OK
      Server: Apache-Coyote/1.1
      Expires: Thu, 06 May 2010 01:06:51 GMT
      Content-Type: text/plain;charset=UTF-8
      Content-Length: 303
      Date: Thu, 06 May 2010 01:06:50 GMT


     • Total (unnecessary) HTTP request and
       response header information overhead:
       871 bytes (example)
     • Overhead can be as much as 2000 bytes

74
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
75
     Copyright © 2010 - Kaazing Corporation. All rights reserved.
WebSocket and Model Trains




76
         Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 WebSocket
• W3C API and IETF Protocol
• Full-duplex, text-based socket
• Enables web pages to communicate with a
  remote host
• Traverses firewalls, proxies, and routers
  seamlessly
• Share port with existing HTTP content
  (80/443)
• Cross-domain ready (leverages Cross-Origin
  Resource Sharing)
77
                Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 WebSocket
     • Connection established by upgrading from the
       HTTP protocol to the WebSocket protocol
       using the same TCP connection
     • Once upgraded, WebSocket data frames can
       be sent back and forth between the client and
       the server in full-duplex mode
     • Frames can be sent full-duplex, in either
       direction at any the same time
     • Each frame of data:
       o Starts with a 0x00 byte and End with a 0xFF byte
78
       o Contains UTF-8 data in between
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Dramatic Overhead Reduction




79
         Copyright © 2010 - Kaazing Corporation. All rights reserved.
Overheard…
      “Reducing kilobytes of data to 2 bytes…and
      reducing latency from 150ms to 50ms is far
      more than marginal. In fact, these two factors
      alone are enough to make WebSocket
      seriously interesting to Google.”
       —Ian Hickson (Google, HTML5 spec lead)




80
                     Copyright © 2010 - Kaazing Corporation. All rights reserved.
Beyond WebSocket
• Once you have WebSocket, you can
  communicate with WebSocket Servers and back-
  end servers and directly with message brokers
• You can extend client-server protocols to the web:
     •   XMPP, Jabber
     •   Pub/Sub (Stomp/AMQP)
     •   Gaming protocols
     •   Any TCP-based protocol
• Browser becomes a
  first-class network
81
  communication citizen
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example: WebSocket-
Based Quake II Game Port




82    http://code.google.com/p/quake2-gwt-port
              Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
WebSocket
     •   Chrome 4.0+
     •   WebKit Nightly builds
     •   Support planned for Firefox 3.7, Opera
     •   Note: Full HTML4 Emulation available
         o Kaazing WebSocket Gateway (supports
           native WebSocket and provides emulation
           for older browsers)



83
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



84

     Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5
     Server-Sent Events




85
          Copyright © 2010 - Kaazing Corporation. All rights reserved.
Server-Sent Events
     • Server-Sent Events (SSE) standardizes and
       formalizes how a continuous stream of data
       can be sent from a server to a browser
     • Effectively standardizes Comet and Reverse
       Ajax
     • EventSource API for broadcasting data from
       server to client




86
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example: News Broadcast




                    http://kaazing.me/
87
             Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
Server-Sent Events
     • Opera 9.0+ partial support
     • Development in Firefox Trunk
     • Note: With WebSocket support, SSE
       support is not as important




88
                  Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



89

     Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Communication




90
           Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Communication
     HTML5 defines two improved document
       communication features
     • Cross Document Messaging
     • XMLHttpRequest Level 2




91
                   Copyright © 2010 - Kaazing Corporation. All rights reserved.
Cross Document Messaging
     • Enables secure cross-origin communication
       across iframes, tabs, and windows (using
       origin security)
     • Defines the PostMessage API as a standard
       way to send messages
     • Provides asynchronous message passing
       between JavaScript contexts
     • HTML5 clarifies and refines domain security
       by introducing the concept of an origin

92
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
Origin Concept
     • An origin is a subset of an address used for
       modeling trust relationships on the Web
     • Origins are made up of a scheme, a host,
       and a port—different origin:
       o https://www.example.com
       o http://www.example.com
     • The path is not considered in the origin
       value—same origin:
       o http://www.example.com/index.html
       o http://www.example.com/page2.html
93
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
PostMessage Architecture




94
             Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
Cross Document
Messaging
     •   Chrome 2.0+
     •   Firefox 3.5+
     •   IE 8.0+
     •   Opera 9.6+
     •   Safari 4.0+



95
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
XMLHttpRequest Level 2
     • XMLHttpRequest Level 2
     • XMLHttpRequest is the API that made Ajax
       possible
     • XMLHttpRequest Level 2 significantly
       enhances XMLHttpRequest
       o Progress events
       o Cross-origin XMLHttpRequest
     • XMLHttpRequest Level 2 allows for cross-
       origin XMLHttpRequests using Cross Origin
       Resource Sharing (CORS)
       http://www.w3.org/TR/access-control/
96
                         Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example XHR2 Architecture




97
             Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
XMLHttpRequest Level 2
     • Chrome 2.0+
     • Firefox 3.5+
     • Safari 4.0+




98
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Web Workers




99
          Copyright © 2010 - Kaazing Corporation. All rights reserved.
Web Workers
      • Provide background processing capabilities to
        web applications
      • Typically run on separate threads so apps can
        take advantage of multicore CPUs
        o Background number-crunchers
        o Background price updates from server
        o Search queries




100
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example: Prime Numbers




101      http://htmlfive.appspot.com/static/primes-good.html
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
Web Workers
      • Chrome 4.0+
      • Firefox 3.5+
      • Safari 4.0+




102
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



103

      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Geolocation




104
          Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Geolocation
      • Allows users to share their location for
        location-aware services
         o   Show user's position on map
         o   Tag content (photos/sound/video)
         o   Turn-by-turn navigation
         o   Alert users of nearby points of interest
         o   Social networking
      • Users must be allowed to opt in to
        location sharing


105
                           Copyright © 2010 - Kaazing Corporation. All rights reserved.
Location Data
      • Location information consists of a pair of
        latitude and longitude coordinates and
        accuracy information
        o Latitude is the numerical value indicating distance
          north or south of the equator
        o Longitude is the numerical value indicating distance
          east or west of Greenwich, England
        o For Example, Lake Tahoe:
          Latitude: 39.17222, Longitude: -120.13778
      • Coordinates are always returned in decimal
        format
106
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Additional Location Metadata
      • Depending on the device, additional
        meta data can be provided:
        o   Altitude
        o   altitudeAccuracy
        o   Heading
        o   Speed
      • If this additional metadata is not
        available it will be returned as a
        null value.
107
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Location Sources
      • A device can use any of the following
        sources:
        o IP address
        o Coordinate triangulation
        o Global Positioning System (GPS)
        o Wi-Fi with MAC addresses from RFID, Wi-Fi, and
          Bluetooth
        o GSM or CDMA cell phone IDs
        o User defined
      • Each have pros and cons
108
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Geolocation Architecture
                                                                             Server that hosts
                                                                             the Geolocation
                                                                               Application




                                                                             External Location
                                                                                  Service




109
              Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example: Privacy Explanation




110
         Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example: Geolocation App




111     http://maxheapsize.com/static/html5geolocationdemo.html
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Map Integration
      • Coordinates are not easy to decipher, easier to
        see on a map
      • Google Maps has built support for HTML5
        Geolocation into its user interface (Show My
        Location button)




112
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
Geolocation
      •   Firefox 3.5+
      •   Safari 4.0+ on iPhone
      •   Chrome (Dev channel)
      •   Support planned in Opera
      •   Also available in Gears



113
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



114

      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Web Storage




115
          Copyright © 2010 - Kaazing Corporation. All rights reserved.
Web Storage
  • Web Storage a.k.a “cookies on steroids”
  • Three types:
  1. Session Storage Area
  2. Local Storage Area
  3. Web SQL Database




Cookies
116
             Session                                    Local                     SQL DB
                   Copyright © 2010 - Kaazing Corporation. All rights reserved.
Cookies vs. Web Storage
      • Cookies are limited in size
      • Cookies are transferred back and forth on
        every request (bandwidth)
      • Cookies are visible on the network (security)
      • Data leaks (while switching tabs)
      • Web Storage provides a simple API for storing
        values in easily retrievable JavaScript objects
        which persist across page loads


117
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Example: Storage Demo




118         http://html5demos.com/storage
               Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
Web Storage
      •   Chrome 3.0+
      •   Firefox 3.0+
      •   Safari 4.0+
      •   Opera 10.5+
      •   IE 8.0+




119
                         Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
Web SQL Database
      •   Chrome 3.0+
      •   Safari 3.2+
      •   Opera 10.5+
      •   Note: Web SQL Database is based on
          SQLite and listed as stalled in the WHATWG
          spec. Indexed Database (a.k.a WebSimpleDB)
          is simpler and with no specific SQL database
          version, but not implemented yet.
120
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Demo



121

      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Other HTML5 Features




122
            Copyright © 2010 - Kaazing Corporation. All rights reserved.
Offline Web Applications




123
              Copyright © 2010 - Kaazing Corporation. All rights reserved.
Offline Web Applications
      • Offline Web Applications
        o HTML5 allows detection of online/offline mode
        o Users can continue to interact with web
          applications and documents when their network
          connection is unavailable
        o Example: Gmail (Moving away from Gears)
      • Use a cache manifest file with details about
        files to be cached
      • Browsers cache data is in the application
        cache

124
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Browser Support for
Offline Web Applications
      • Chrome 4.0+
      • Firefox 3.5+
      • Safari 4.0+




125
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Other HTML5 Features
      • Drag and Drop Mechanism,
        o Currently only in Firefox 3.5+
      • History
        o Includes nested browsing contexts
        o Not widely supported yet
      • ContentEditable
        o Editable elements
        o HTML5 provides a formalization of what is already
          implemented in HTML4 (all browsers)


126
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Developing HTML5
        Applications




127
          Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Application Assets
      • Typical HTML5 Application
        o   HTML
        o   CSS
        o   JavaScript
        o   Images
        o   Manifest (for caching offline applications)




128
                          Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 IDEs and Tools
 • Currently limited HTML5 IDE support
       o SEEdit (Text editor)
 • HTML5 simplicity reduces work
 • Advanced browser development tools allow for
   “semi-rapid” development and live coding
       o Safari Web Inspector
       o Chrome Developer console
       o Firefox Firebug Add-on and Opera Firefly
 • more IDE support as specification solidifies
 • In the meantime, browser detection and feature
   emulation is growing
129
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Helper Tools
      • modernizr
        o Small, simple JavaScript library that checks
          support for HTML5 and CSS3 features
        o Moves away from user-agent sniffing and uses
          feature detection instead
        o http://www.modernizr.com/
      • html5shiv
        o Creates the new HTML5 DOM elements in Internet
          Explorer so that styles can be applied to them
        o http://code.google.com/p/html5shiv/

130
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
HTML5 Feature Emulation
      • Google Gears
      • Flash plugins
      • JavaScript-based emulations
      • Exporercanvas—Canvas emulation for
        Internet Explorer:
        http://code.google.com/p/explorercanvas/
      • SVG Web Toolkit—SVG in Internet Explorer:
        http://code.google.com/p/svgweb/
      • WebSocket emulation for HTML4 browsers:
        Kaazing WebSocket Gateway
131
        www.kaazing.com
                    Copyright © 2010 - Kaazing Corporation. All rights reserved.
Moving Away From Flash
      • Reasons: iPad does not support Flash
      • Flash content can in some cases be
        converted
      • Various HTML5 Canvas converters:
        o Flash CS5 Export to Canvas:
          http://www.9to5mac.com/Flash-html5-canvas-
          35409730
        o Opacity: http://likethought.com/opacity/
        o Illustrator to Canvas:
          http://webdev.stephband.info/canvas/convert.html

132
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
Testing and Deploying
      • Testing HTML5 Applications is not much
        different from HTML4 testing
      • Check for feature support in target browsers
      • Recent browsers provide better debugging
        capabilities (extensive debug consoles)
        o Firebug
        o Webkit-based inspector
        o Dragonfly
      • Additional QA tools
        o Dynatrace (performance)
133
        o Wireshark (wire traffic inspection)
                        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Mobile HTML5 Applications
      • HTML5 applications served in a browser,
        therefore essentially not any different
      • Feature support may be different for mobile
        devices (for example, Geolocation on Safari
        Desktop vs. iPhone)
      • Widgets and iAd developments




134
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
What’s Next?




135
        Copyright © 2010 - Kaazing Corporation. All rights reserved.
Microsoft IE and HTML5
• IE8 implementations for some parts of HTML5
• Recently joined HTML5 graphics working group
  (12/09)
• “Doubling down” in IE9 (9th time’s a charm)
       o   Audio
       o   Video
       o   SVG
       o   CSS3
       o   2D Acceleration
       o   Does not run on XP
136
                         Copyright © 2010 - Kaazing Corporation. All rights reserved.
What’s Next?
      • Candidate Recommendation 2012
      • Proposed Recommendation 2022
      • There are already various features on the
        roadmap that will not make it into HTML5
        o device element
        o ping attribute
      • Maybe just “HTML” (not version 6)?




137
                      Copyright © 2010 - Kaazing Corporation. All rights reserved.
138
      Copyright © 2010 - Kaazing Corporation. All rights reserved.
Resources
• “When Can I Use?” a website with up-to-date
  HTML5 Feature support matrix:
   http://a.deveria.com/caniuse
• WHATWG HTML5 Spec
      o http://www.whatwg.org/specs/web-apps/current-work/
• W3C HTML5 Spec
      o http://dev.w3.org/html5/spec/Overview.html




139
                       Copyright © 2010 - Kaazing Corporation. All rights reserved.
E-mail: peter.lubbers@kaazing.com
      Twitter: @peterlubbers
140
                 Copyright © 2010 - Kaazing Corporation. All rights reserved.
User Group Special!

                                                   HTML5ROCKS




           10% Off Any HTML5 Training
      With Coupon Code HTML5ROCKS
      http://tech.kaazing.com/training/index.html
141

                  Copyright © 2010 - Kaazing Corporation. All rights reserved.
Copyright © 2010 Kaazing Corporation, All rights reserved.
      All materials, including labs and other handouts are property of Kaazing Corporation. Except when
         expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any
                              part of this training material, in any form, or by any means.




142
                                   Copyright © 2010 - Kaazing Corporation. All rights reserved.

More Related Content

What's hot

What's hot (20)

GoによるiOSアプリの開発
GoによるiOSアプリの開発GoによるiOSアプリの開発
GoによるiOSアプリの開発
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
WebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話すWebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話す
 
A New Era of SSRF - Exploiting URL Parser in Trending Programming Languages! ...
A New Era of SSRF - Exploiting URL Parser in Trending Programming Languages! ...A New Era of SSRF - Exploiting URL Parser in Trending Programming Languages! ...
A New Era of SSRF - Exploiting URL Parser in Trending Programming Languages! ...
 
코드로 인프라 관리하기 - 자동화 툴 소개
코드로 인프라 관리하기 - 자동화 툴 소개코드로 인프라 관리하기 - 자동화 툴 소개
코드로 인프라 관리하기 - 자동화 툴 소개
 
Spring Boot & Actuators
Spring Boot & ActuatorsSpring Boot & Actuators
Spring Boot & Actuators
 
JIT のコードを読んでみた
JIT のコードを読んでみたJIT のコードを読んでみた
JIT のコードを読んでみた
 
アプリの鍵が消える時_Droid kaigi2018
アプリの鍵が消える時_Droid kaigi2018アプリの鍵が消える時_Droid kaigi2018
アプリの鍵が消える時_Droid kaigi2018
 
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
レシピの作り方入門
レシピの作り方入門レシピの作り方入門
レシピの作り方入門
 
PostgreSQL
PostgreSQLPostgreSQL
PostgreSQL
 
Css
CssCss
Css
 
PDOでデータベース接続と SQLインジェクション対策
PDOでデータベース接続と SQLインジェクション対策PDOでデータベース接続と SQLインジェクション対策
PDOでデータベース接続と SQLインジェクション対策
 
GitHubにバグ報告して賞金$500を頂いた話
GitHubにバグ報告して賞金$500を頂いた話GitHubにバグ報告して賞金$500を頂いた話
GitHubにバグ報告して賞金$500を頂いた話
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
Format string Attack
Format string AttackFormat string Attack
Format string Attack
 
H.264で相互接続 - WebRTC Meetup Tokyo #10
H.264で相互接続 - WebRTC Meetup Tokyo #10H.264で相互接続 - WebRTC Meetup Tokyo #10
H.264で相互接続 - WebRTC Meetup Tokyo #10
 

Viewers also liked

Wiki vs Email Reply-All
Wiki vs Email Reply-AllWiki vs Email Reply-All
Wiki vs Email Reply-All
spshow
 
哈佛公開課程_E-75 建構動態網站 第4講_SQL
哈佛公開課程_E-75 建構動態網站 第4講_SQL哈佛公開課程_E-75 建構動態網站 第4講_SQL
哈佛公開課程_E-75 建構動態網站 第4講_SQL
奕孝 陳
 
Open Data 上手簡介
Open Data 上手簡介Open Data 上手簡介
Open Data 上手簡介
TH Schee
 
哈佛公開課_E-75 建構動態網站 第2講 PHP(續)
哈佛公開課_E-75 建構動態網站 第2講 PHP(續)哈佛公開課_E-75 建構動態網站 第2講 PHP(續)
哈佛公開課_E-75 建構動態網站 第2講 PHP(續)
奕孝 陳
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5
onkar_bhosle
 
Mobile architecture overview
Mobile architecture overviewMobile architecture overview
Mobile architecture overview
David Scruggs
 
當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片
當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片
當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片
Chyi-Tsong Chen
 

Viewers also liked (20)

Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Wiki vs Email Reply-All
Wiki vs Email Reply-AllWiki vs Email Reply-All
Wiki vs Email Reply-All
 
Developing architects by design
Developing architects by designDeveloping architects by design
Developing architects by design
 
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(1)
 
Html5 Future of WEB
Html5 Future of WEBHtml5 Future of WEB
Html5 Future of WEB
 
哈佛公開課程_E-75 建構動態網站 第4講_SQL
哈佛公開課程_E-75 建構動態網站 第4講_SQL哈佛公開課程_E-75 建構動態網站 第4講_SQL
哈佛公開課程_E-75 建構動態網站 第4講_SQL
 
Open Data 上手簡介
Open Data 上手簡介Open Data 上手簡介
Open Data 上手簡介
 
哈佛公開課_E-75 建構動態網站 第2講 PHP(續)
哈佛公開課_E-75 建構動態網站 第2講 PHP(續)哈佛公開課_E-75 建構動態網站 第2講 PHP(續)
哈佛公開課_E-75 建構動態網站 第2講 PHP(續)
 
HTML 5 & CSS3
HTML 5 & CSS3HTML 5 & CSS3
HTML 5 & CSS3
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile
 
Difference Between HTML and HTML5
Difference Between HTML and HTML5Difference Between HTML and HTML5
Difference Between HTML and HTML5
 
Introdution to HTML 5
Introdution to HTML 5Introdution to HTML 5
Introdution to HTML 5
 
Mobile architecture overview
Mobile architecture overviewMobile architecture overview
Mobile architecture overview
 
當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片
當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片
當mit遇見MIT_波士頓見聞分享~陳奇中教授演講投影片
 
Mobile application architecture
Mobile application architectureMobile application architecture
Mobile application architecture
 
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript -  - MeeGo Confere...
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
 
Mobile Application Architecture Strategy
Mobile Application Architecture StrategyMobile Application Architecture Strategy
Mobile Application Architecture Strategy
 

Similar to HTML5--The 30,000' View (A fast-paced overview of HTML5)

Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
Html5 today
Html5 todayHtml5 today
Html5 today
Roy Yu
 
HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the Web
Berg Brandt
 
Peter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-appsPeter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-apps
Skills Matter
 

Similar to HTML5--The 30,000' View (A fast-paced overview of HTML5) (20)

Html5 Flyover
Html5 FlyoverHtml5 Flyover
Html5 Flyover
 
HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)HTML5 Overview (Silicon Valley User Group)
HTML5 Overview (Silicon Valley User Group)
 
HTML 5
HTML 5HTML 5
HTML 5
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Html5 today
Html5 todayHtml5 today
Html5 today
 
Html5
Html5Html5
Html5
 
Html 5
Html 5Html 5
Html 5
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
 
HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the Web
 
Html5
Html5Html5
Html5
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm Software
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
Peter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-appsPeter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-apps
 
HTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerfulHTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerful
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
Prueba ppt
Prueba pptPrueba ppt
Prueba ppt
 
Html5v1
Html5v1Html5v1
Html5v1
 
Apache deep learning 101
Apache deep learning 101Apache deep learning 101
Apache deep learning 101
 
Html5
Html5Html5
Html5
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 

More from Peter Lubbers

Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
Peter Lubbers
 

More from Peter Lubbers (8)

HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
HTML5 Real Time and WebSocket Code Lab (SFHTML5, GTUGSF)
 
HTML5 Real-Time and Connectivity
HTML5 Real-Time and ConnectivityHTML5 Real-Time and Connectivity
HTML5 Real-Time and Connectivity
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
 
HTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebHTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the Web
 
Los Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert SessionLos Angeles HTML5 User Group Meeting Ask the Expert Session
Los Angeles HTML5 User Group Meeting Ask the Expert Session
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
 

Recently uploaded

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 

HTML5--The 30,000' View (A fast-paced overview of HTML5)

  • 1. HTML5: The 30,000’ View A fast-paced overview of HTML5 By Peter Lubbers, Kaazing HTML5 User Group San Francisco May, 2010 1 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 2. Thanks to the Sponsors! • Twilio (event venue) Twilio’s software allows your web application to easily make and receive phone calls and SMS text messages using a simple web service API. Kaazing (event pizza and drinks) Kaazing WebSocket Gateway features patent-pending, ultra high-performance HTML5 WebSocket Acceleration™ technology that enables companies to quickly deliver massively scalable, real-time web applications • Marakana (event organization) Marakana provides cutting-edge open source software training in San Francisco, New York, Toronto, and on- demand corporate training 2 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 3. About Peter Lubbers • Director of Documentation and Training, Kaazing • Co-Founder San Francisco HTML5 User Group http://www.sfhtml5.org/ • Co-author Pro HTML5 Programming o Alpha Release: www.prohtml5.com o Special 50% Off Coupon Code: APRESSPROHTML5WR (expires May 31st) • Ultra Distance Runner • Twitter: @peterlubbers 3 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 4. Agenda • HTML5 History and Vision • HTML5 Markup • HTML5 Forms • HTML5 APIs • Other HTML5 features • Developing HTML5 Applications • Q&A 4 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 5. Verbatim “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 “In a nutshell, we love HTML5, we love it so much we want it to actually work. —Dean Hachamovitch, General Manager for Internet Explorer, Microsoft “I had no idea there was so much HTML5 already in play” 5 —Tim O’Reilly Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 6. HTML Timeline 6 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 7. HTML Timeline 1980-1990 7 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 8. HTML Timeline 1991-2000 8 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 9. HTML Timeline 2001-2011 9 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 10. HTML Timeline 2012-2022 10 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 11. Standards Bodies and Specifications 11 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 12. HTML5 Standards Bodies • Web Hypertext Application Technology Working Group (WHATWG) o Founded in 2004 (by individuals working for browser vendors Apple, Mozilla, Google, and Opera) o Develops HTML and APIs for web application development o Unofficial and open collaboration of browser vendors and interested parties • World Wide Web Consortium (W3C) o Created draft of HTML5 in 2008 • Internet Engineering Task Force (IETF) o Protocols (HTTP, WebSocket) 12 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 13. Specifications • WHATWG o http://www.whatwg.org/specs/web-apps/current-work/ • W3C o http://dev.w3.org/html5/spec/Overview.html • IETF (WebSocket specification) o http://tools.ietf.org/html/draft-hixie- thewebsocketprotocol 13 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 14. Is This HTML5? • Many pieces of the HTML5 effort (for example, Local Storage, WebSocket, and Geolocation) were originally part of the HTML5 specification • Moved to a separate standards document to keep the specification focused • Industry still refers to the original set of features, including Web Sockets, as "HTML5“ • See: http://www.whatwg.org/specs/web-apps/current- work/multipage/introduction.html#is-this-html5? 14 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 15. HTML5 Vision and Design Principals 15 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 16. Design Principal #1 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 16 better one!) Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 17. Design Principal #2 Utility • Priority of Constituencies: o When in doubt… value users over authors, over implementers (browsers), over specifiers (W3C/WHATWG), over theoretical purity. • Secure by design • DOM consistency (HTML5 and XHTML5) • Separation of presentation and content 17 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 18. Presentation vs. Content • HTML5 strives to separate content from presentation where possible (use CSS) • Most of the presentational features from earlier versions of HTML are no longer supported • This was already in the works (HTML4 Transitional, XHTML1.1) • Problems with presentational markup: o Poor accessibility o Unnecessary complexity 18 o Larger document size Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 19. Design Principal #3 Interoperability • Specify well-defined behavior o Specific instead of vague • Handle errors well o Improved and ambitious error handling plans o Prefer graceful error recovery to hard failure • Avoid needless complexity o Simple is better 19 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 20. Simple is Better • Simplify wherever possible • Examples: o Native browser ability instead of complex JavaScript code o New doctype o Character set o HTML5 APIs 20 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 21. HTML4/XHTML HTML 4.01 Strict Simplified Doctype • 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 21 <!DOCTYPE html> Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 22. Simplified Character Set HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset="utf-8"> 22 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 23. More Detail (Where Needed) • HTML5 is more detailed than previous specs to avoid misinterpretation • Aim to define things thoroughly, especially web applications • ~900 Pages spread over multiple specifications 23 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 24. Design Principal #4 Universal Access • Support for all world languages o For example, <ruby> (Ruby annotations, used in East Asian typography) • Accessibility o Support users with disabilities o Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (ARIA) o WAI-ARIA roles can be added today 24 o Supported by screen readers Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 25. Plugin-Free Paradigm • HTML5 provides native support for many features that were only possible with plugins or complex hacks o Plugins may not be installed o Plugins can be disabled or blocked (iPad does not ship with Flash plugin) o Plugins are a separate attack vector o Plugins are difficult to integrate with the rest of an HTML document (plugin boundaries, clipping, and transparency issues) o Plugins are crash prone 25 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 26. HTML5 Features 26 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 27. HTML5 Features • HTML5 Markup o New and removed HTML elements o New content types • HTML5 Forms • HTML5 APIs • Other HTML5 Features 27 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 28. HTML5 Markup 28 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 29. New HTML5 Tags <article> <aside> <audio> <canvas> <command> <datalist> <details> <dialog> <embed> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <ruby> <rt> <rp> <section> <source> <video> 29 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 30. Removed Tags in HTML5 <acronym> <applet> <basefont> <big> <dir> <font> <center> <s> <strike> <frame> <u> <frameset> <noframes> <tt> 30 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 31. HTML5 Cheat Sheet By Antonio Lupetti http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf 31 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 32. HTML5 Content Types • Metadata content o Elements—commonly found in the head section— that set up the presentation or behavior of the rest of the document, for example script, style, title • Flow content o Elements used in the body of documents and applications, for example form, h1, small • Sectioning content o Elements that define sections in the document, for example article, aside, title 32 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 33. Content Types (Continued) • Heading content o Section headers, for example h1, h2, hgroup • Phrasing content o Text and text markup elements, for example mark, kbd, sub, sup, b • Embedded content o Content that imports other resources into the document, for example audio, video, canvas, iframe • Interactive content o Content that users interact with, for example 33 audio or video controls, button, textarea Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 34. Anatomy of an HTML5 Page 34 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 35. Anatomy of an HTML5 Page HTML code (head section) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML 5</title> <link rel="stylesheet" href="html5.css"> </head> 35 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 36. Anatomy of an HTML5 Page HTML code body section (part 1) <body> <header> <h1>Header</h1> </header> <div id="container"> <nav> <h3>Nav</h3> </nav> 36 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 37. Anatomy of an HTML5 Page HTML code body section (part 2) <section> <article> <header> <h1>Article Header</h1> </header> <footer> <h2>Article Footer</h2> </footer> </article> </section> 37 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 38. Anatomy of an HTML5 Page HTML code body section (part 3) <aside> <h3>Aside</h3> </aside> <footer> <h2>Footer</h2> </footer> </div> </body> </html> 38 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 39. Anatomy of an HTML5 Page 39 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 40. Anatomy of an HTML5 Page 40 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 41. Anatomy of an HTML5 Page 41 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 42. HTML5 and CSS Level 3 • CSS level 2 (W3C) o published as a Recommendation1998 o Candidate Recommendation 2007 • CSS Level 3 (W3C) o Like HTML5, under development o Modularized with sub-specifications for easier browser uptake (transformation, animation, transition) • Some CSS Level 3 examples: o http://www.zurb.com/playground/ o http://www.zachstronaut.com/ 42 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 43. HTML5 Forms 43 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 44. HTML5 Forms • Formerly called Web Forms 2.0 • Native functionality (no scripting for validation) means less coding, for example: Regular expression for a valid e-mail address: (?:[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])+)]) 44 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 45. HTML5 Forms • New form functionality: o Date and color pickers o Search, e-mail, web address input types o Validation o Spin boxes and Sliders o More • Backward compatible • Features degrade gracefully (unknown input types are treated as text-type) input 45 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 46. Example HTML5 Forms 46 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 47. Browser Support for Forms • Opera 9.6+ • Chrome (Partial) • Safari (Partial) 47 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 48. Demo 48 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 49. HTML5 APIs 49 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 50. HTML5 APIs • Canvas and SVG • Audio and Video • WebSocket • Server-Sent Events • Communication o Cross Document Messaging o XMLHttpRequest Level 2 • Web Workers • Geolocation • Web Storage 50 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 51. HTML5 Canvas & SVG 51 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 52. About Canvas and SVG • Previously possible with Flash, VML, Silverlight • Very complex to do in JavaScript without plugins (for example, rounded corners or diagonal lines) • Provide native drawing functionality on the Web • Completely integrated into HTML5 documents (part of DOM) • Can be styled with CSS 52 • Can be controlled with JavaScript Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 53. Canvas vs. SVG • Not a matter of good or bad • Both can be used and they can also be combined Canvas SVG Low level High level Immediate mode Retained mode Fixed size Scalable Best for keyboard-based apps Best for mouse-based apps Animation (no object storage) Medium animation Pixels XML object model No interaction User interaction (hit detection, events on the tree) 53 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 54. Canvas • HTML5 element and plugin-free 2D drawing API that enables you to dynamically generate and render o Graphics o Charts o Images o Animation • Canvas was originally introduced by Apple to be used in Mac OS X WebKit to create dashboard widgets 54 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 55. Canvas • Canvas is a scriptable bitmap canvas (images that are drawn are final and cannot be resized • No object tree • Can be manipulated with JavaScript and styled with CSS • 2D Context • 3D Context (Web GL) 55 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 56. Example: Canvas Animation http://www.canvasdemos.com 56 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 57. Browser Support for 2D Canvas • Chrome 2.0+ • Firefox 3.0+ (3.5+)* • Opera 9.6+ (10.5+)* • Safari 3.1+ (4.0+)* * Additional support for Canvas Text API 57 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 58. Browser Support for 3D Canvas (Web GL) • Chrome 5.0+ • Nightly builds of Safari • Planned for Firefox 3.7 * Additional support for Canvas Text API 58 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 59. SVG • “Scalable” Vector Graphics—not bitmaps 59 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 60. SVG • Modularized, XML-based language for describing 2D vector and mixed vector/raster graphics • SVG has been around on the Web since 2002 (using plugins) • SVG provides high fidelity graphics at any zoom level • Until now mostly used for static content (maps, org charts, floor plans, etc.) • HTML5 now allows native SVG content in the browser (control with JavaScript, style with CSS) 60 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 61. Example SVG Game http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/ 61 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 62. Browser Support for SVG The percentages shown are based on combined support for all SVG modules (for example Basic, Inline, filters): • Chrome 2.0+ (58%) • Firefox 3.0 (33%) 3.6 (46%) • Opera 9.6+ (83%) • Safari 3.1 (13%) 3.2 (46%) 4.0 (58%) Note: IE 9 Will provide full support 62 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 63. Demo 63 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 64. HTML5 Audio and Video 64 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 65. Audio and Video • New HTML5 media elements o <audio> o <video> • Control using Audio/Video API • Native support in the browser (embedded codecs) • Originally, the HTML5 specification was going to require codec support… 65 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 66. AV Containers and Codecs • Audio and Video containers: o H264 and Ogg • Audio and video codecs (algorithms used to encode and decode an audio or video stream): o Audio: AAC, MP3, Vorbis o Video: H264, MP4, Theora • Stalemate over patented/free codec inclusion • You can add multiple formats per (audio/video) element to fallback 66 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 67. Example: YouTube HTML5 Channel http://www.youtube.com/user/rocpoc 67 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 68. Browser Support for Audio and Video • Chrome 3.0+ (Ogg + H264) • Firefox 3.5+ (Ogg) • Safari 3.2 (H264) • Opera 10.5 (Ogg) 68 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 69. Demo 69 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 70. Using HTML5 WebSocket 70 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 71. About HTTP • HTTP was originally designed for document transfer • HTTP is half-duplex (traffic flows in only one direction at a time) • Hard to achieve real-time, bi-directional communication • Tons of unnecessary HTTP header information sent with each HTTP request and response and added latency 71 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 72. Comet and Polling: Tin-Can Communication • Comet and (Reverse) Ajax o Great toilet cleaners o Bad for real-time communication o Polling and Long-Polling 72 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 73. Example HTTP Request Headers POST /gwt/EventService HTTP/1.1 Host: gpokr.com Connection: keep-alive User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5 Referer: http://gpokr.com/gwt/7F5E66657B938E2FDE9CD39095A0E9E6.cache.html Content-Length: 134 Origin: http://gpokr.com Content-Type: text/plain; charset=utf-8 Accept: */* Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 Cookie: __utmz=247824721.1273102477.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd =(none); JSESSIONID=E7AAE0E60B01FB88D1E3799FAD5C62B3; __utma=247824721.1247485893.1273102477.1273104838.1273107686.3; __utmc=247824721; __utmb=247824721.4.10.127 73 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 74. HTTP Response Headers 200 OK Server: Apache-Coyote/1.1 Expires: Thu, 06 May 2010 01:06:51 GMT Content-Type: text/plain;charset=UTF-8 Content-Length: 303 Date: Thu, 06 May 2010 01:06:50 GMT • Total (unnecessary) HTTP request and response header information overhead: 871 bytes (example) • Overhead can be as much as 2000 bytes 74 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 75. 75 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 76. WebSocket and Model Trains 76 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 77. HTML5 WebSocket • W3C API and IETF Protocol • Full-duplex, text-based socket • Enables web pages to communicate with a remote host • Traverses firewalls, proxies, and routers seamlessly • Share port with existing HTTP content (80/443) • Cross-domain ready (leverages Cross-Origin Resource Sharing) 77 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 78. HTML5 WebSocket • Connection established by upgrading from the HTTP protocol to the WebSocket protocol using the same TCP connection • Once upgraded, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode • Frames can be sent full-duplex, in either direction at any the same time • Each frame of data: o Starts with a 0x00 byte and End with a 0xFF byte 78 o Contains UTF-8 data in between Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 79. Dramatic Overhead Reduction 79 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 80. Overheard… “Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make WebSocket seriously interesting to Google.” —Ian Hickson (Google, HTML5 spec lead) 80 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 81. Beyond WebSocket • Once you have WebSocket, you can communicate with WebSocket Servers and back- end servers and directly with message brokers • You can extend client-server protocols to the web: • XMPP, Jabber • Pub/Sub (Stomp/AMQP) • Gaming protocols • Any TCP-based protocol • Browser becomes a first-class network 81 communication citizen Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 82. Example: WebSocket- Based Quake II Game Port 82 http://code.google.com/p/quake2-gwt-port Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 83. Browser Support for WebSocket • Chrome 4.0+ • WebKit Nightly builds • Support planned for Firefox 3.7, Opera • Note: Full HTML4 Emulation available o Kaazing WebSocket Gateway (supports native WebSocket and provides emulation for older browsers) 83 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 84. Demo 84 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 85. HTML5 Server-Sent Events 85 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 86. Server-Sent Events • Server-Sent Events (SSE) standardizes and formalizes how a continuous stream of data can be sent from a server to a browser • Effectively standardizes Comet and Reverse Ajax • EventSource API for broadcasting data from server to client 86 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 87. Example: News Broadcast http://kaazing.me/ 87 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 88. Browser Support for Server-Sent Events • Opera 9.0+ partial support • Development in Firefox Trunk • Note: With WebSocket support, SSE support is not as important 88 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 89. Demo 89 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 90. HTML5 Communication 90 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 91. HTML5 Communication HTML5 defines two improved document communication features • Cross Document Messaging • XMLHttpRequest Level 2 91 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 92. Cross Document Messaging • Enables secure cross-origin communication across iframes, tabs, and windows (using origin security) • Defines the PostMessage API as a standard way to send messages • Provides asynchronous message passing between JavaScript contexts • HTML5 clarifies and refines domain security by introducing the concept of an origin 92 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 93. Origin Concept • An origin is a subset of an address used for modeling trust relationships on the Web • Origins are made up of a scheme, a host, and a port—different origin: o https://www.example.com o http://www.example.com • The path is not considered in the origin value—same origin: o http://www.example.com/index.html o http://www.example.com/page2.html 93 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 94. PostMessage Architecture 94 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 95. Browser Support for Cross Document Messaging • Chrome 2.0+ • Firefox 3.5+ • IE 8.0+ • Opera 9.6+ • Safari 4.0+ 95 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 96. XMLHttpRequest Level 2 • XMLHttpRequest Level 2 • XMLHttpRequest is the API that made Ajax possible • XMLHttpRequest Level 2 significantly enhances XMLHttpRequest o Progress events o Cross-origin XMLHttpRequest • XMLHttpRequest Level 2 allows for cross- origin XMLHttpRequests using Cross Origin Resource Sharing (CORS) http://www.w3.org/TR/access-control/ 96 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 97. Example XHR2 Architecture 97 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 98. Browser Support for XMLHttpRequest Level 2 • Chrome 2.0+ • Firefox 3.5+ • Safari 4.0+ 98 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 99. HTML5 Web Workers 99 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 100. Web Workers • Provide background processing capabilities to web applications • Typically run on separate threads so apps can take advantage of multicore CPUs o Background number-crunchers o Background price updates from server o Search queries 100 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 101. Example: Prime Numbers 101 http://htmlfive.appspot.com/static/primes-good.html Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 102. Browser Support for Web Workers • Chrome 4.0+ • Firefox 3.5+ • Safari 4.0+ 102 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 103. Demo 103 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 104. HTML5 Geolocation 104 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 105. HTML5 Geolocation • Allows users to share their location for location-aware services o Show user's position on map o Tag content (photos/sound/video) o Turn-by-turn navigation o Alert users of nearby points of interest o Social networking • Users must be allowed to opt in to location sharing 105 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 106. Location Data • Location information consists of a pair of latitude and longitude coordinates and accuracy information o Latitude is the numerical value indicating distance north or south of the equator o Longitude is the numerical value indicating distance east or west of Greenwich, England o For Example, Lake Tahoe: Latitude: 39.17222, Longitude: -120.13778 • Coordinates are always returned in decimal format 106 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 107. Additional Location Metadata • Depending on the device, additional meta data can be provided: o Altitude o altitudeAccuracy o Heading o Speed • If this additional metadata is not available it will be returned as a null value. 107 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 108. Location Sources • A device can use any of the following sources: o IP address o Coordinate triangulation o Global Positioning System (GPS) o Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth o GSM or CDMA cell phone IDs o User defined • Each have pros and cons 108 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 109. Geolocation Architecture Server that hosts the Geolocation Application External Location Service 109 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 110. Example: Privacy Explanation 110 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 111. Example: Geolocation App 111 http://maxheapsize.com/static/html5geolocationdemo.html Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 112. Map Integration • Coordinates are not easy to decipher, easier to see on a map • Google Maps has built support for HTML5 Geolocation into its user interface (Show My Location button) 112 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 113. Browser Support for Geolocation • Firefox 3.5+ • Safari 4.0+ on iPhone • Chrome (Dev channel) • Support planned in Opera • Also available in Gears 113 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 114. Demo 114 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 115. HTML5 Web Storage 115 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 116. Web Storage • Web Storage a.k.a “cookies on steroids” • Three types: 1. Session Storage Area 2. Local Storage Area 3. Web SQL Database Cookies 116 Session Local SQL DB Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 117. Cookies vs. Web Storage • Cookies are limited in size • Cookies are transferred back and forth on every request (bandwidth) • Cookies are visible on the network (security) • Data leaks (while switching tabs) • Web Storage provides a simple API for storing values in easily retrievable JavaScript objects which persist across page loads 117 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 118. Example: Storage Demo 118 http://html5demos.com/storage Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 119. Browser Support for Web Storage • Chrome 3.0+ • Firefox 3.0+ • Safari 4.0+ • Opera 10.5+ • IE 8.0+ 119 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 120. Browser Support for Web SQL Database • Chrome 3.0+ • Safari 3.2+ • Opera 10.5+ • Note: Web SQL Database is based on SQLite and listed as stalled in the WHATWG spec. Indexed Database (a.k.a WebSimpleDB) is simpler and with no specific SQL database version, but not implemented yet. 120 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 121. Demo 121 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 122. Other HTML5 Features 122 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 123. Offline Web Applications 123 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 124. Offline Web Applications • Offline Web Applications o HTML5 allows detection of online/offline mode o Users can continue to interact with web applications and documents when their network connection is unavailable o Example: Gmail (Moving away from Gears) • Use a cache manifest file with details about files to be cached • Browsers cache data is in the application cache 124 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 125. Browser Support for Offline Web Applications • Chrome 4.0+ • Firefox 3.5+ • Safari 4.0+ 125 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 126. Other HTML5 Features • Drag and Drop Mechanism, o Currently only in Firefox 3.5+ • History o Includes nested browsing contexts o Not widely supported yet • ContentEditable o Editable elements o HTML5 provides a formalization of what is already implemented in HTML4 (all browsers) 126 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 127. Developing HTML5 Applications 127 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 128. HTML5 Application Assets • Typical HTML5 Application o HTML o CSS o JavaScript o Images o Manifest (for caching offline applications) 128 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 129. HTML5 IDEs and Tools • Currently limited HTML5 IDE support o SEEdit (Text editor) • HTML5 simplicity reduces work • Advanced browser development tools allow for “semi-rapid” development and live coding o Safari Web Inspector o Chrome Developer console o Firefox Firebug Add-on and Opera Firefly • more IDE support as specification solidifies • In the meantime, browser detection and feature emulation is growing 129 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 130. HTML5 Helper Tools • modernizr o Small, simple JavaScript library that checks support for HTML5 and CSS3 features o Moves away from user-agent sniffing and uses feature detection instead o http://www.modernizr.com/ • html5shiv o Creates the new HTML5 DOM elements in Internet Explorer so that styles can be applied to them o http://code.google.com/p/html5shiv/ 130 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 131. HTML5 Feature Emulation • Google Gears • Flash plugins • JavaScript-based emulations • Exporercanvas—Canvas emulation for Internet Explorer: http://code.google.com/p/explorercanvas/ • SVG Web Toolkit—SVG in Internet Explorer: http://code.google.com/p/svgweb/ • WebSocket emulation for HTML4 browsers: Kaazing WebSocket Gateway 131 www.kaazing.com Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 132. Moving Away From Flash • Reasons: iPad does not support Flash • Flash content can in some cases be converted • Various HTML5 Canvas converters: o Flash CS5 Export to Canvas: http://www.9to5mac.com/Flash-html5-canvas- 35409730 o Opacity: http://likethought.com/opacity/ o Illustrator to Canvas: http://webdev.stephband.info/canvas/convert.html 132 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 133. Testing and Deploying • Testing HTML5 Applications is not much different from HTML4 testing • Check for feature support in target browsers • Recent browsers provide better debugging capabilities (extensive debug consoles) o Firebug o Webkit-based inspector o Dragonfly • Additional QA tools o Dynatrace (performance) 133 o Wireshark (wire traffic inspection) Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 134. Mobile HTML5 Applications • HTML5 applications served in a browser, therefore essentially not any different • Feature support may be different for mobile devices (for example, Geolocation on Safari Desktop vs. iPhone) • Widgets and iAd developments 134 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 135. What’s Next? 135 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 136. Microsoft IE and HTML5 • IE8 implementations for some parts of HTML5 • Recently joined HTML5 graphics working group (12/09) • “Doubling down” in IE9 (9th time’s a charm) o Audio o Video o SVG o CSS3 o 2D Acceleration o Does not run on XP 136 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 137. What’s Next? • Candidate Recommendation 2012 • Proposed Recommendation 2022 • There are already various features on the roadmap that will not make it into HTML5 o device element o ping attribute • Maybe just “HTML” (not version 6)? 137 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 138. 138 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 139. Resources • “When Can I Use?” a website with up-to-date HTML5 Feature support matrix: http://a.deveria.com/caniuse • WHATWG HTML5 Spec o http://www.whatwg.org/specs/web-apps/current-work/ • W3C HTML5 Spec o http://dev.w3.org/html5/spec/Overview.html 139 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 140. E-mail: peter.lubbers@kaazing.com Twitter: @peterlubbers 140 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 141. User Group Special! HTML5ROCKS 10% Off Any HTML5 Training With Coupon Code HTML5ROCKS http://tech.kaazing.com/training/index.html 141 Copyright © 2010 - Kaazing Corporation. All rights reserved.
  • 142. Copyright © 2010 Kaazing Corporation, All rights reserved. All materials, including labs and other handouts are property of Kaazing Corporation. Except when expressly permitted by Kaazing Corporation, you may not copy, reproduce, publish, or display any part of this training material, in any form, or by any means. 142 Copyright © 2010 - Kaazing Corporation. All rights reserved.