SlideShare a Scribd company logo
1 of 48
Download to read offline
Monday, November 29, 2010
HTML5*: State of the Union
                            *(Including satellites and CSS3)



                                  MICHAEL MULLANY, SENCHA



Monday, November 29, 2010
HTML5?                         -webkit
                                               text-align
                                                         CSS Text
      accelerometer                              @page
                last call
                                                   Editor Draft
   localStorage
                                                     manifest
             @media
                                                    Working Draft
     transform

              WebSQL                               GeoLocation
                                               canvas
              type=camera
                                                         <video>
                               Proposed
          keyframe                            gradient
                            Recommendation

Monday, November 29, 2010
STANDARDS
               HTML5 Core Spec
        HTML5 Spinouts
                                              “HTML5”
 HTML5 Satellites
   CSS3 Modules


                                                       IMPLEMENTATIONS
                                                  Trident: Microsoft
                                            Webkit: Apple, Google, RIM ++
                                       Gecko: Firefox
                                  Presto: Opera

Monday, November 29, 2010
Unleashing HTML5...
       Unpopular CSS3                                                      Popular CSS3
                  Text   WebFonts             Video       Audio             Borders FlexBox
                                                                     Graphics
        Device Access                                                            Server & Services
             Text Layout                                                  Backgrds Selectors
           Grid Positioning
          Camera                             CSS Styling & Layout           Color    @Media
                                                                                    HTTP
                @Page                                                     Gradients WebFonts
          Location                                                                   AJAX
                                                                         Transforms Multi-Col
               Variables
                                               Semantic HTML             Animations Events
         Aural style sheets
          Contacts
                ruby...                                                      ...        ...
                SMS                               Javascript                          Sockets

          Orientation                                                                   SSL
                              File Systems         Worker
                                                                     x-App
               Gyro                DBs             Parallel                           More...
                                                                    Messaging
                               App Cache          Processing




Monday, November 29, 2010
RM
                  Rich Media & StylingTFull     FO
                                           P LA
                       Resource Access P P
                                    N A
                      ParallelDProcessing
                                 E R
                               O
                              M Communication
                 Inter-AppT E
                       LE
                      P O ine Capability
                  COFull
                     M


Monday, November 29, 2010
Three Questions To Ask
       What does it do?

       What browsers support it?

       Is it a standard?




Monday, November 29, 2010
1. What Does It Do?




Monday, November 29, 2010
HTML5 & Satellites




Monday, November 29, 2010
HTML5 Semantic Tags
           <header>                                   New Content Model
                                                      1.Meta Data
           <nav>            <article>       <aside>   2.Flow
                             <section>                3.Sections
                               <H1>                   4.Headings
                                                      5.Phrasing
                                                      6.Embedded
                             <section>                7.Interactive
                               <H1>
                                                      Revision Control Primitives
                                                      <ins> & <del>
           <footer>                      <time>       and much much more...


Monday, November 29, 2010
HTML5 Canvas
                     Create a drawing area
                          Draw & write in it
             lines, boxes, gradients, arcs ..
                                Transforms
                               Composites
                                  Shadows
                              Tweak pixels
                   Img <-> Canvas <-> Img



                            Low-Level Bit-Map Format

Monday, November 29, 2010
HTML5 <Video> (& <Audio>)
                            Before                                                                  After
             <object width="425"                                          <video src=pudding.ogv
             height="344">                                                  width=320
            <param name="movie"                                             height=240
              value="http://www.youtube.com/                                controls
          v/9sEI1AUFJKw&hl=en_GB&fs=1&"></                                  poster=pudding.jpg>
          param>                                                          </video>
            <param name="allowFullScreen"
              value="true"></param>
            <param name="allowscriptaccess"
              value="always"></param>
            <embed src="http://
          www.youtube.com/v/
          9sEI1AUFJKw&hl=en_GB&fs=1&"
              type="application/x-shockwave-
          flash" allowscriptaccess="always"
              allowfullscreen="true"
          width="425"
              height="344"></embed>
          </object>

                                     http://dev.opera.com/articles/view/introduction-html5-video/


Monday, November 29, 2010
Cross Document Messaging
               foo.com/sender.html
                                         bar.com/receiver.html
                                          iframe
               post message to            add event listener
                 bar.com/receiver.html


                                          receive message
                                           check origin is bar.com




Monday, November 29, 2010
O ine Operation
          sessionStorage            key:
          localStorage             value
                                           Sandboxed
          AppCache
          List of o ine assets              By Origin
          - img, mov, css, js...
                                           w/ Browser
          WebSQL & IndexDB
          o ine databases
                                           Over-rides
          FileAPI
          files & directories               Not general native
                                               file access

Monday, November 29, 2010
Device API
       Media Capture
       - Extends <input> to new types
       - Sound, image, video              <input type="file"
                                          accept="image/*"
       Contacts API                       id="capture">
       - Search & extract contacts info
       - CRUD operations
                                          Prompts user to
       And More..                          take a photo
       - Gallery, SMS
       - Based on Nokia & BONDI APIs




Monday, November 29, 2010
Cascading Style Sheets
                                   Level 3




Monday, November 29, 2010
CSS3 Unpacked
                               Namespace                           SVG Colors
               Selectors                        Color & Images
                              Relationship                            HSLa
                                Attribute                             RGBa
                            Rounded Borders
                            Pseudo-Classes                         Animation
                                                                   Gradients
           Backgrounds &                        Transforms &
              Borders        Border Images
                            Pseudo-Elements      Animations      2D Transform
                            Multiple Bckgrnds                    3D Transform
                               @font-face
                                  Clip                             Transitions
                                                                      align
                  Fonts                           Flex Box
                             font-size adjust
                                   Size                            @keyframe
                                                                    direction
                              font-stretch                            flex
                              Width/Height
                                  Clip                               Count
                                                                     pack
           Media Queries                        Multi-Column
                            Device Dimensions
                                   Size                              Width
                                                                     orient
                               Resolution                             Gap
                               Orientation                       Break, fill, span
Monday, November 29, 2010
HSLa and RBGa




Monday, November 29, 2010
Borders and Backgrounds
                                            multiple backgrounds, stretch,
                                            tile, round, scroll, attach-points...
                            Plain


                            border-radius


                            border-image

                                                        content box
                                                        padding box
                                                         border box

Monday, November 29, 2010
Gradients
       Linear (with angles)
       Radial
       Color-Stops
       Combine with RBGA

       Usable everywhere
         as image replacements




                                 RBGA Magic
Monday, November 29, 2010
Gradients & Clipping
 2 radial gradients: multiple color stops         radial gradient: multiple color stops




         background-clip: text
                                                  slight background gradient

                    box-reflect on underlay DIV with a pure alpha
                                  gradient overlay
Monday, November 29, 2010
Web Fonts
       • Fonts.com (biggest)
       • Typekit.com (coolest)
       • Many others...
       • Free Google samples




Monday, November 29, 2010
2. Who Supports It?




Monday, November 29, 2010
Sources of Data
       Modernizr: Detects basic support
       Wikipedia: Detailed support
        e.g. backface-visibility

       ...mostly up to date




Monday, November 29, 2010
IE 9 PR   Chrome 7   Safari 5   Firefox 4b   iPhone 4   BB Torch Android 2.2
    @font-face
    Canvas
    HTML5 Audio & Video
    rgba(), hsla()
    border-image:
    border-radius:
    box-shadow:
    text-shadow:
    opacity:
    Multiple backgrounds
    Flexible Box Model
    CSS Animations
    CSS Columns
    CSS Gradients
    CSS Reflections
    CSS 2D Transforms
    CSS 3D Transforms
    CSS Transitions
    Geolocation API
                            MODERNIZR
    local/sessionStorage
    SVG/SVG Clipping
    SMIL
    Inline SVG
    Drag and Drop
    hashchange
    X-window Messaging
    History Management
    applicationCache
    Web Sockets
    Web Workers
    Web SQL Database
    WebGL
    IndexedDB
Monday, November 29, 2010
Wikipedia Heatmap
       Hundreds of individual properties
       across HTML5 and CSS2 & 3
                                           Supported
       Color code each property support
       per browser
                                           No Support
                                           Beta Support
       Put it on a single page!
                                           Partial Support
                                           Incorrect Support
                                           Unknown


Monday, November 29, 2010
Semantic
                                                     Elements
                            HTML5 Forms




                               HTML5
                                          Canvas
                             & Satellites
                                                   Media Playback
                                                      Events



Monday, November 29, 2010
@page




                               CSS2

                            Speech


Monday, November 29, 2010
Element Selectors

                                                                  Advanced
                                                                Border Images
                                          Advanced Text


                            Speech
                             CSS
                                            CSS3
                                                                 Animations,
                                                              Flexbox, Marquee



                                                          CSS3 Values (vh, dpi)


Monday, November 29, 2010
About That Salt...
       3D transforms
       - Performance limited

       Mobile Performance
       - Canvas, SVG, Animations

       Video Codecs

       Box-Shadow-Blur
       - Not combinable with border radius

       Border-images
       - Image o sets & gradients still getting shaken out

Monday, November 29, 2010
3. Is It A Standard?




Monday, November 29, 2010
20 Years of the Web
                                            Microsoft                                          Google Maps
                        Mosaic               Cancels                        Internet            “Web 2.0”
                        Demo                Blackbird                       Explorer
                                                                              96%
                                  Microsoft             IE 3.0 Ships         Share                           iPhone         iPad
 Tim Berners Lee                 Web Strategy                                          WHATWG                 Ships         Ships
    Publishes                      Memo                                                 Schism
                                                             AOL/Netscape




    1990                             1995                          2000                          2005                       2010


                                                                                                                      Google Chrome
                                       Netscape                             Apple Safari                                1.0 Ships
          CERN puts Web                  IPO         Apple/                  1.0 Ships
        foundations into the                        Microsoft
           public domain                            O ce/IE                               Firefox              Google
                                                      Deal                               1.0 Ships           Android 1.0
                                                                                                              Released



Monday, November 29, 2010
HTML & CSS Standards Evolution
                                                                           Apple Safari
                                                                            1.0 Ships
                                                                                           Google Maps
                                                                                             “Web 2.0”   Google
                        Mosaic                                         Internet
                                                                                     Firefox           Android 1.0
                        Demo                                           Explorer                                          iPad
                                                                                    1.0 Ships           Released
                                       Netscape                          96%                                             Ships
                                         IPO IE 3.0 Ships               Share                          iPhone
 Tim Berners Lee                                                                   WHATWG               Ships    Chrome
    Publishes                                                                       Schism                      1.0 Ships
                                                        AOL/Netscape




    1990                             1995                       2000                            2005                        2010


        HTML                     1          2       3       4      (XHTML)                                           5

                     CSS                        1                 2                       2.1                   3


Monday, November 29, 2010
4 Eras of Web Standards
    Birth                   ...   Chaos ...    Crisis ... Maturity
   <Title>                        <FRAMESET>   Xpath       HTML5
   <NextID>                       <FONT>       XQuery        &
   <?> Base Address               <CENTER>     XSLT         CSS3
   <A>                            <MARQUEE>    XForms
   <IsIndex>                      <LAYER>      ...
   <Plaintext>                    <BLINK>
   <Listing>
   <p>, <h1>...
   <Address>
   <HP1> (Highlights)
   <DL> <DT> (Glossary)
   <LI> (UL, Menu, Dir)

Monday, November 29, 2010
XHMTL & CSS2
                             “Standardize
                                 and
                               Ignore”


Monday, November 29, 2010
HTML5
                            “Implement
                                then
                            Standardize”


Monday, November 29, 2010
Standards Making?




Monday, November 29, 2010
nal s
                       eas      erso ship
                   d Id       P
                                     on           The
             Goo              elat
                                   i            n
                                            ts o d
                                                                 y
                                                            gac lity
                             R           Fac oun         Le ibi
             r                              Gr              pat
          wse ties                                    Com
      Bro iori                  l                              .
        m Pr             tiona            aut
                                              s         o re..
    Tea              rna             tron          n dm
               Inte               As              A
         dor
     Ven gies                  s
         te              litie
    Stra
               Per
                   s ona
                                                  Standards Making
                                                                       STANDARD



                                                                                 Proposed
                                   Working Draft                              Recommendation

                                                                     Candidate
                                                                  Recommendation




Monday, November 29, 2010
Lies, Damn Lies, Statistics.
      And... Claims About Standards


Monday, November 29, 2010
There Are Only 3 O cial
                       Full Standards for CSS
                       Document Object Model Level 2 Style Specification 2000

                            Cascading Style Sheets Level 1 Specification 2008

                            Associating Style Sheets with XML documents 1.0
                                          (Second Edition) 2010




Monday, November 29, 2010
XMLHttpRequest
                              (aka AJAX)
                Candidate Recommendation
                            August 2010

Monday, November 29, 2010
HTML5                     Status
                 Core Spec     WD LC CR LC PR      10/10
            Geolocation API    WD LC CR LC PR      09/10
              Web Workers      WD LC CR LC PR      12/09
              Web Sockets      WD LC CR LC PR      12/09
                IndexedDB      WD LC CR LC PR      08/10
                 Web SQL       SUSPENDED           12/09
          Server-Sent Events   WD LC CR LC PR      12/09
           DeviceOrientation   Editor’s Draft      08/10
               Contacts API    WD LC CR LC PR      08/10
                  SMS API      WD LC CR LC PR      08/10
             Media Capture     WD LC CR LC PR      09/10
                   File API    WD LC CR LC PR      10/10
Monday, November 29, 2010
Module                 Status
                   CSS 2.1    WD LC CR LC PR    09/09
             Bcks & Borders   WD LC CR LC PR    06/10
                     Color    WD LC CR LC PR    10/10
              Image Values    WD LC CR LC PR    09/10
             Media Queries    WD LC CR LC PR    07/10
                 Selectors    WD LC CR LC PR    12/09
               Animations     WD LC CR LC PR    03/09
                  Flex Box    WD LC CR LC PR    07/09
                    Fonts     WD LC CR LC PR    06/09
          Generated Content   WD LC CR LC PR    05/03
              Multi-Column    WD LC CR LC PR    12/09
             2D Transforms    WD LC CR LC PR    12/09
             3D Transforms    WD LC CR LC PR    03/09
                Transitions   WD LC CR LC PR    12/09
Monday, November 29, 2010
CSS Module                         Status
            Paged Media            ED WD LC CR LC PR   10/06
              Variables            ED WD LC CR LC PR   04/08
           Mobile Prof 2.0         ED WD LC CR LC PR
                                                         io
                                                       12/08n
              Box Model            ED WD LC CR LC PR tat
                                                       08/07
         GC for Paged Media        ED WD LC CR LC PRen 06/10
          Grid Positioning                      l
                                   ED WD LC CR LC  m
                                                  ePR 09/07
                                   ED WD LCm
                                               pLC PR 11/02
                 Lists
                                           I CR
                                          - CR LC PR 08/10
            Object Model
                                       on
                                   ED WD LC
                                     N LC CR LC PR 08/09
          Obj Model - View         t
                                  nED WD LC CR LC PR 05/08
            Namespaces          ca ED WD
                              ifi ED WD LC CR LC PR 05/03
                 ruby
                         ig n
                       S
          Template Layout          ED WD LC CR LC PR   04/10
                 Text              ED WD LC CR LC PR   10/10
             Text Layout           ED WD LC CR LC PR   05/03
               Basic UI            ED WD LC CR LC PR   05/04
           Values & Units          ED WD LC CR LC PR   09/06
Monday, November 29, 2010
STATE OF THE UNION




Monday, November 29, 2010
HTML5: State of the Union
                            WebFonts      Video       Audio      Graphics
        Device Access                                                       Server & Services

             Camera                      CSS Styling & Layout                    HTTP

            Location                                                             AJAX
                                           Semantic HTML
            Contacts                                                              SSL

                SMS                           Javascript                         Events

          Orientation                                                           Sockets
                             App Cache
                                               Worker
                                                                 x-App
               Gyro           Storage          Parallel
                                                                Messaging
                                              Processing
                             DBs/Files



Monday, November 29, 2010
Thanks!




Monday, November 29, 2010
•   High Priority Modules
                                        ◦ CSS Backgrounds and Borders Level 3
                                        ◦ CSS Color Level 3
                                        ◦ CSS Namespaces
                                        ◦ CSS Object Model View Module
                                        ◦ CSS Paged Media Level 3
                   CSS                  ◦ CSS Variables
                                        ◦ Media Queries
                                        ◦ Selectors Level 3

                Working            •   Medium Priority Modules
                                        ◦ CSS Animations
                                        ◦ CSS Basic Box Model Level 3

                 Group                  ◦ CSS Fonts Level 3
                                        ◦ CSS Generated and Replaced Content Level 3
                                        ◦ CSS Grid Positioning

                Priorities              ◦ CSS Marquee Level 3
                                        ◦ CSS Multi-column Layout
                                        ◦ CSS Object Model Level 3
                                        ◦ CSS Ruby
                                        ◦ CSS Template Layout
                                        ◦ CSS Transformations
                                        ◦ CSS Transitions
                            2010   •
                                        ◦ CSS Values and Units Level 3
                                       Low Priority Modules
                                        ◦ CSS Extended Box Model Level 3
                                        ◦ CSS Flexible Box
                                        ◦ CSS Generated Content for Paged Media
                                        ◦ CSS Lists Level 3
                                        ◦ CSS Tables Level 3
                                        ◦ CSS Text Layout Level 3




Monday, November 29, 2010

More Related Content

Similar to HTML5: State of the Union

Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsJames Pearce
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web appsJames Pearce
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web appsJames Pearce
 
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Shreeraj Shah
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsJames Pearce
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionJames Pearce
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsJames Pearce
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5James Pearce
 
HTML5, Silverlight & Kinect
HTML5, Silverlight & KinectHTML5, Silverlight & Kinect
HTML5, Silverlight & KinectFrank La Vigne
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In MalaysiaGen Kanai
 
HTML5 Top 10 Threats - Silent Attacks and Stealth Exploits
HTML5 Top 10 Threats - Silent Attacks and Stealth ExploitsHTML5 Top 10 Threats - Silent Attacks and Stealth Exploits
HTML5 Top 10 Threats - Silent Attacks and Stealth ExploitsShreeraj Shah
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha TouchJames Pearce
 
about:HTML&Firefox
about:HTML&Firefoxabout:HTML&Firefox
about:HTML&Firefoxdynamis
 
Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?ukdpe
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptSencha
 
전문가토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가토크릴레이 1탄 html5 전망 (전종홍 박사)전문가토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가토크릴레이 1탄 html5 전망 (전종홍 박사)Saltlux zinyus
 
전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)zinyus
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものMicrosoft
 

Similar to HTML5: State of the Union (20)

Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web Apps
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web apps
 
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5
 
HTML5, Silverlight & Kinect
HTML5, Silverlight & KinectHTML5, Silverlight & Kinect
HTML5, Silverlight & Kinect
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In Malaysia
 
HTML5 Top 10 Threats - Silent Attacks and Stealth Exploits
HTML5 Top 10 Threats - Silent Attacks and Stealth ExploitsHTML5 Top 10 Threats - Silent Attacks and Stealth Exploits
HTML5 Top 10 Threats - Silent Attacks and Stealth Exploits
 
Silver Light1.0
Silver Light1.0Silver Light1.0
Silver Light1.0
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha Touch
 
about:HTML&Firefox
about:HTML&Firefoxabout:HTML&Firefox
about:HTML&Firefox
 
Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScriptBuilding Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
 
전문가토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가토크릴레이 1탄 html5 전망 (전종홍 박사)전문가토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가토크릴레이 1탄 html5 전망 (전종홍 박사)
 
전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)
전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすもの
 

More from Sencha

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsSencha
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 HighlightsSencha
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridSencha
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportSencha
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsSencha
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSencha
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...Sencha
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...Sencha
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsSencha
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...Sencha
 

More from Sencha (20)

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
 

Recently uploaded

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 

HTML5: State of the Union

  • 2. HTML5*: State of the Union *(Including satellites and CSS3) MICHAEL MULLANY, SENCHA Monday, November 29, 2010
  • 3. HTML5? -webkit text-align CSS Text accelerometer @page last call Editor Draft localStorage manifest @media Working Draft transform WebSQL GeoLocation canvas type=camera <video> Proposed keyframe gradient Recommendation Monday, November 29, 2010
  • 4. STANDARDS HTML5 Core Spec HTML5 Spinouts “HTML5” HTML5 Satellites CSS3 Modules IMPLEMENTATIONS Trident: Microsoft Webkit: Apple, Google, RIM ++ Gecko: Firefox Presto: Opera Monday, November 29, 2010
  • 5. Unleashing HTML5... Unpopular CSS3 Popular CSS3 Text WebFonts Video Audio Borders FlexBox Graphics Device Access Server & Services Text Layout Backgrds Selectors Grid Positioning Camera CSS Styling & Layout Color @Media HTTP @Page Gradients WebFonts Location AJAX Transforms Multi-Col Variables Semantic HTML Animations Events Aural style sheets Contacts ruby... ... ... SMS Javascript Sockets Orientation SSL File Systems Worker x-App Gyro DBs Parallel More... Messaging App Cache Processing Monday, November 29, 2010
  • 6. RM Rich Media & StylingTFull FO P LA Resource Access P P N A ParallelDProcessing E R O M Communication Inter-AppT E LE P O ine Capability COFull M Monday, November 29, 2010
  • 7. Three Questions To Ask What does it do? What browsers support it? Is it a standard? Monday, November 29, 2010
  • 8. 1. What Does It Do? Monday, November 29, 2010
  • 9. HTML5 & Satellites Monday, November 29, 2010
  • 10. HTML5 Semantic Tags <header> New Content Model 1.Meta Data <nav> <article> <aside> 2.Flow <section> 3.Sections <H1> 4.Headings 5.Phrasing 6.Embedded <section> 7.Interactive <H1> Revision Control Primitives <ins> & <del> <footer> <time> and much much more... Monday, November 29, 2010
  • 11. HTML5 Canvas Create a drawing area Draw & write in it lines, boxes, gradients, arcs .. Transforms Composites Shadows Tweak pixels Img <-> Canvas <-> Img Low-Level Bit-Map Format Monday, November 29, 2010
  • 12. HTML5 <Video> (& <Audio>) Before After <object width="425" <video src=pudding.ogv height="344"> width=320 <param name="movie" height=240 value="http://www.youtube.com/ controls v/9sEI1AUFJKw&hl=en_GB&fs=1&"></ poster=pudding.jpg> param> </video> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http:// www.youtube.com/v/ 9sEI1AUFJKw&hl=en_GB&fs=1&" type="application/x-shockwave- flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object> http://dev.opera.com/articles/view/introduction-html5-video/ Monday, November 29, 2010
  • 13. Cross Document Messaging foo.com/sender.html bar.com/receiver.html iframe post message to add event listener bar.com/receiver.html receive message check origin is bar.com Monday, November 29, 2010
  • 14. O ine Operation sessionStorage key: localStorage value Sandboxed AppCache List of o ine assets By Origin - img, mov, css, js... w/ Browser WebSQL & IndexDB o ine databases Over-rides FileAPI files & directories Not general native file access Monday, November 29, 2010
  • 15. Device API Media Capture - Extends <input> to new types - Sound, image, video <input type="file" accept="image/*" Contacts API id="capture"> - Search & extract contacts info - CRUD operations Prompts user to And More.. take a photo - Gallery, SMS - Based on Nokia & BONDI APIs Monday, November 29, 2010
  • 16. Cascading Style Sheets Level 3 Monday, November 29, 2010
  • 17. CSS3 Unpacked Namespace SVG Colors Selectors Color & Images Relationship HSLa Attribute RGBa Rounded Borders Pseudo-Classes Animation Gradients Backgrounds & Transforms & Borders Border Images Pseudo-Elements Animations 2D Transform Multiple Bckgrnds 3D Transform @font-face Clip Transitions align Fonts Flex Box font-size adjust Size @keyframe direction font-stretch flex Width/Height Clip Count pack Media Queries Multi-Column Device Dimensions Size Width orient Resolution Gap Orientation Break, fill, span Monday, November 29, 2010
  • 18. HSLa and RBGa Monday, November 29, 2010
  • 19. Borders and Backgrounds multiple backgrounds, stretch, tile, round, scroll, attach-points... Plain border-radius border-image content box padding box border box Monday, November 29, 2010
  • 20. Gradients Linear (with angles) Radial Color-Stops Combine with RBGA Usable everywhere as image replacements RBGA Magic Monday, November 29, 2010
  • 21. Gradients & Clipping 2 radial gradients: multiple color stops radial gradient: multiple color stops background-clip: text slight background gradient box-reflect on underlay DIV with a pure alpha gradient overlay Monday, November 29, 2010
  • 22. Web Fonts • Fonts.com (biggest) • Typekit.com (coolest) • Many others... • Free Google samples Monday, November 29, 2010
  • 23. 2. Who Supports It? Monday, November 29, 2010
  • 24. Sources of Data Modernizr: Detects basic support Wikipedia: Detailed support e.g. backface-visibility ...mostly up to date Monday, November 29, 2010
  • 25. IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2 @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity: Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API MODERNIZR local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB Monday, November 29, 2010
  • 26. Wikipedia Heatmap Hundreds of individual properties across HTML5 and CSS2 & 3 Supported Color code each property support per browser No Support Beta Support Put it on a single page! Partial Support Incorrect Support Unknown Monday, November 29, 2010
  • 27. Semantic Elements HTML5 Forms HTML5 Canvas & Satellites Media Playback Events Monday, November 29, 2010
  • 28. @page CSS2 Speech Monday, November 29, 2010
  • 29. Element Selectors Advanced Border Images Advanced Text Speech CSS CSS3 Animations, Flexbox, Marquee CSS3 Values (vh, dpi) Monday, November 29, 2010
  • 30. About That Salt... 3D transforms - Performance limited Mobile Performance - Canvas, SVG, Animations Video Codecs Box-Shadow-Blur - Not combinable with border radius Border-images - Image o sets & gradients still getting shaken out Monday, November 29, 2010
  • 31. 3. Is It A Standard? Monday, November 29, 2010
  • 32. 20 Years of the Web Microsoft Google Maps Mosaic Cancels Internet “Web 2.0” Demo Blackbird Explorer 96% Microsoft IE 3.0 Ships Share iPhone iPad Tim Berners Lee Web Strategy WHATWG Ships Ships Publishes Memo Schism AOL/Netscape 1990 1995 2000 2005 2010 Google Chrome Netscape Apple Safari 1.0 Ships CERN puts Web IPO Apple/ 1.0 Ships foundations into the Microsoft public domain O ce/IE Firefox Google Deal 1.0 Ships Android 1.0 Released Monday, November 29, 2010
  • 33. HTML & CSS Standards Evolution Apple Safari 1.0 Ships Google Maps “Web 2.0” Google Mosaic Internet Firefox Android 1.0 Demo Explorer iPad 1.0 Ships Released Netscape 96% Ships IPO IE 3.0 Ships Share iPhone Tim Berners Lee WHATWG Ships Chrome Publishes Schism 1.0 Ships AOL/Netscape 1990 1995 2000 2005 2010 HTML 1 2 3 4 (XHTML) 5 CSS 1 2 2.1 3 Monday, November 29, 2010
  • 34. 4 Eras of Web Standards Birth ... Chaos ... Crisis ... Maturity <Title> <FRAMESET> Xpath HTML5 <NextID> <FONT> XQuery & <?> Base Address <CENTER> XSLT CSS3 <A> <MARQUEE> XForms <IsIndex> <LAYER> ... <Plaintext> <BLINK> <Listing> <p>, <h1>... <Address> <HP1> (Highlights) <DL> <DT> (Glossary) <LI> (UL, Menu, Dir) Monday, November 29, 2010
  • 35. XHMTL & CSS2 “Standardize and Ignore” Monday, November 29, 2010
  • 36. HTML5 “Implement then Standardize” Monday, November 29, 2010
  • 38. nal s eas erso ship d Id P on The Goo elat i n ts o d y gac lity R Fac oun Le ibi r Gr pat wse ties Com Bro iori l . m Pr tiona aut s o re.. Tea rna tron n dm Inte As A dor Ven gies s te litie Stra Per s ona Standards Making STANDARD Proposed Working Draft Recommendation Candidate Recommendation Monday, November 29, 2010
  • 39. Lies, Damn Lies, Statistics. And... Claims About Standards Monday, November 29, 2010
  • 40. There Are Only 3 O cial Full Standards for CSS Document Object Model Level 2 Style Specification 2000 Cascading Style Sheets Level 1 Specification 2008 Associating Style Sheets with XML documents 1.0 (Second Edition) 2010 Monday, November 29, 2010
  • 41. XMLHttpRequest (aka AJAX) Candidate Recommendation August 2010 Monday, November 29, 2010
  • 42. HTML5 Status Core Spec WD LC CR LC PR 10/10 Geolocation API WD LC CR LC PR 09/10 Web Workers WD LC CR LC PR 12/09 Web Sockets WD LC CR LC PR 12/09 IndexedDB WD LC CR LC PR 08/10 Web SQL SUSPENDED 12/09 Server-Sent Events WD LC CR LC PR 12/09 DeviceOrientation Editor’s Draft 08/10 Contacts API WD LC CR LC PR 08/10 SMS API WD LC CR LC PR 08/10 Media Capture WD LC CR LC PR 09/10 File API WD LC CR LC PR 10/10 Monday, November 29, 2010
  • 43. Module Status CSS 2.1 WD LC CR LC PR 09/09 Bcks & Borders WD LC CR LC PR 06/10 Color WD LC CR LC PR 10/10 Image Values WD LC CR LC PR 09/10 Media Queries WD LC CR LC PR 07/10 Selectors WD LC CR LC PR 12/09 Animations WD LC CR LC PR 03/09 Flex Box WD LC CR LC PR 07/09 Fonts WD LC CR LC PR 06/09 Generated Content WD LC CR LC PR 05/03 Multi-Column WD LC CR LC PR 12/09 2D Transforms WD LC CR LC PR 12/09 3D Transforms WD LC CR LC PR 03/09 Transitions WD LC CR LC PR 12/09 Monday, November 29, 2010
  • 44. CSS Module Status Paged Media ED WD LC CR LC PR 10/06 Variables ED WD LC CR LC PR 04/08 Mobile Prof 2.0 ED WD LC CR LC PR io 12/08n Box Model ED WD LC CR LC PR tat 08/07 GC for Paged Media ED WD LC CR LC PRen 06/10 Grid Positioning l ED WD LC CR LC m ePR 09/07 ED WD LCm pLC PR 11/02 Lists I CR - CR LC PR 08/10 Object Model on ED WD LC N LC CR LC PR 08/09 Obj Model - View t nED WD LC CR LC PR 05/08 Namespaces ca ED WD ifi ED WD LC CR LC PR 05/03 ruby ig n S Template Layout ED WD LC CR LC PR 04/10 Text ED WD LC CR LC PR 10/10 Text Layout ED WD LC CR LC PR 05/03 Basic UI ED WD LC CR LC PR 05/04 Values & Units ED WD LC CR LC PR 09/06 Monday, November 29, 2010
  • 45. STATE OF THE UNION Monday, November 29, 2010
  • 46. HTML5: State of the Union WebFonts Video Audio Graphics Device Access Server & Services Camera CSS Styling & Layout HTTP Location AJAX Semantic HTML Contacts SSL SMS Javascript Events Orientation Sockets App Cache Worker x-App Gyro Storage Parallel Messaging Processing DBs/Files Monday, November 29, 2010
  • 48. High Priority Modules ◦ CSS Backgrounds and Borders Level 3 ◦ CSS Color Level 3 ◦ CSS Namespaces ◦ CSS Object Model View Module ◦ CSS Paged Media Level 3 CSS ◦ CSS Variables ◦ Media Queries ◦ Selectors Level 3 Working • Medium Priority Modules ◦ CSS Animations ◦ CSS Basic Box Model Level 3 Group ◦ CSS Fonts Level 3 ◦ CSS Generated and Replaced Content Level 3 ◦ CSS Grid Positioning Priorities ◦ CSS Marquee Level 3 ◦ CSS Multi-column Layout ◦ CSS Object Model Level 3 ◦ CSS Ruby ◦ CSS Template Layout ◦ CSS Transformations ◦ CSS Transitions 2010 • ◦ CSS Values and Units Level 3 Low Priority Modules ◦ CSS Extended Box Model Level 3 ◦ CSS Flexible Box ◦ CSS Generated Content for Paged Media ◦ CSS Lists Level 3 ◦ CSS Tables Level 3 ◦ CSS Text Layout Level 3 Monday, November 29, 2010