Your SlideShare is downloading. ×
0
Monday, November 29, 2010
HTML5*: State of the Union                            *(Including satellites and CSS3)                                  MI...
HTML5?                         -webkit                                               text-align                           ...
STANDARDS               HTML5 Core Spec        HTML5 Spinouts                                              “HTML5” HTML5 S...
Unleashing HTML5...       Unpopular CSS3                                                      Popular CSS3                ...
RM                  Rich Media & StylingTFull     FO                                           P LA                       ...
Three Questions To Ask       What does it do?       What browsers support it?       Is it a standard?Monday, November 29, ...
1. What Does It Do?Monday, November 29, 2010
HTML5 & SatellitesMonday, November 29, 2010
HTML5 Semantic Tags           <header>                                   New Content Model                                ...
HTML5 Canvas                     Create a drawing area                          Draw & write in it             lines, boxe...
HTML5 <Video> (& <Audio>)                            Before                                                               ...
Cross Document Messaging               foo.com/sender.html                                         bar.com/receiver.html  ...
O ine Operation          sessionStorage            key:          localStorage             value                           ...
Device API       Media Capture       - Extends <input> to new types       - Sound, image, video              <input type="...
Cascading Style Sheets                                   Level 3Monday, November 29, 2010
CSS3 Unpacked                               Namespace                           SVG Colors               Selectors        ...
HSLa and RBGaMonday, November 29, 2010
Borders and Backgrounds                                            multiple backgrounds, stretch,                         ...
Gradients       Linear (with angles)       Radial       Color-Stops       Combine with RBGA       Usable everywhere       ...
Gradients & Clipping 2 radial gradients: multiple color stops         radial gradient: multiple color stops         backgr...
Web Fonts       • Fonts.com (biggest)       • Typekit.com (coolest)       • Many others...       • Free Google samplesMond...
2. Who Supports It?Monday, November 29, 2010
Sources of Data       Modernizr: Detects basic support       Wikipedia: Detailed support        e.g. backface-visibility  ...
IE 9 PR   Chrome 7   Safari 5   Firefox 4b   iPhone 4   BB Torch Android 2.2    @font-face    Canvas    HTML5 Audio & Vide...
Wikipedia Heatmap       Hundreds of individual properties       across HTML5 and CSS2 & 3                                 ...
Semantic                                                     Elements                            HTML5 Forms              ...
@page                               CSS2                            SpeechMonday, November 29, 2010
Element Selectors                                                                  Advanced                               ...
About That Salt...       3D transforms       - Performance limited       Mobile Performance       - Canvas, SVG, Animation...
3. Is It A Standard?Monday, November 29, 2010
20 Years of the Web                                            Microsoft                                          Google M...
HTML & CSS Standards Evolution                                                                           Apple Safari     ...
4 Eras of Web Standards    Birth                   ...   Chaos ...    Crisis ... Maturity   <Title>                       ...
XHMTL & CSS2                             “Standardize                                 and                               Ig...
HTML5                            “Implement                                then                            Standardize”Mon...
Standards Making?Monday, November 29, 2010
nal s                       eas      erso ship                   d Id       P                                     on      ...
Lies, Damn Lies, Statistics.      And... Claims About StandardsMonday, November 29, 2010
There Are Only 3 O cial                       Full Standards for CSS                       Document Object Model Level 2 S...
XMLHttpRequest                              (aka AJAX)                Candidate Recommendation                            ...
HTML5                     Status                 Core Spec     WD LC CR LC PR      10/10            Geolocation API    WD ...
Module                 Status                   CSS 2.1    WD LC CR LC PR    09/09             Bcks & Borders   WD LC CR L...
CSS Module                         Status            Paged Media            ED WD LC CR LC PR   10/06              Variabl...
STATE OF THE UNIONMonday, November 29, 2010
HTML5: State of the Union                            WebFonts      Video       Audio      Graphics        Device Access   ...
Thanks!Monday, November 29, 2010
•   High Priority Modules                                        ◦ CSS Backgrounds and Borders Level 3                    ...
Upcoming SlideShare
Loading in...5
×

HTML5: State of the Union

2,906

Published on

HTML5 has emerged as this year's web technology buzzword, but it's quickly become overloaded and overused. In this session, we'll walk through the various parts of "HTML5" separating out the core spec from its satellite specs, as well as the CSS3 family. We'll also take a look at the state of implementations on mobile and desktop browsers.

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,906
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
86
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5: State of the Union"

  1. 1. Monday, November 29, 2010
  2. 2. HTML5*: State of the Union *(Including satellites and CSS3) MICHAEL MULLANY, SENCHAMonday, November 29, 2010
  3. 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 RecommendationMonday, November 29, 2010
  4. 4. STANDARDS HTML5 Core Spec HTML5 Spinouts “HTML5” HTML5 Satellites CSS3 Modules IMPLEMENTATIONS Trident: Microsoft Webkit: Apple, Google, RIM ++ Gecko: Firefox Presto: OperaMonday, November 29, 2010
  5. 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 ProcessingMonday, November 29, 2010
  6. 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 MMonday, November 29, 2010
  7. 7. Three Questions To Ask What does it do? What browsers support it? Is it a standard?Monday, November 29, 2010
  8. 8. 1. What Does It Do?Monday, November 29, 2010
  9. 9. HTML5 & SatellitesMonday, November 29, 2010
  10. 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. 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 FormatMonday, November 29, 2010
  12. 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. 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.comMonday, November 29, 2010
  14. 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 accessMonday, November 29, 2010
  15. 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 APIsMonday, November 29, 2010
  16. 16. Cascading Style Sheets Level 3Monday, November 29, 2010
  17. 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, spanMonday, November 29, 2010
  18. 18. HSLa and RBGaMonday, November 29, 2010
  19. 19. Borders and Backgrounds multiple backgrounds, stretch, tile, round, scroll, attach-points... Plain border-radius border-image content box padding box border boxMonday, November 29, 2010
  20. 20. Gradients Linear (with angles) Radial Color-Stops Combine with RBGA Usable everywhere as image replacements RBGA MagicMonday, November 29, 2010
  21. 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 overlayMonday, November 29, 2010
  22. 22. Web Fonts • Fonts.com (biggest) • Typekit.com (coolest) • Many others... • Free Google samplesMonday, November 29, 2010
  23. 23. 2. Who Supports It?Monday, November 29, 2010
  24. 24. Sources of Data Modernizr: Detects basic support Wikipedia: Detailed support e.g. backface-visibility ...mostly up to dateMonday, November 29, 2010
  25. 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 IndexedDBMonday, November 29, 2010
  26. 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 UnknownMonday, November 29, 2010
  27. 27. Semantic Elements HTML5 Forms HTML5 Canvas & Satellites Media Playback EventsMonday, November 29, 2010
  28. 28. @page CSS2 SpeechMonday, November 29, 2010
  29. 29. Element Selectors Advanced Border Images Advanced Text Speech CSS CSS3 Animations, Flexbox, Marquee CSS3 Values (vh, dpi)Monday, November 29, 2010
  30. 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 outMonday, November 29, 2010
  31. 31. 3. Is It A Standard?Monday, November 29, 2010
  32. 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 ReleasedMonday, November 29, 2010
  33. 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 3Monday, November 29, 2010
  34. 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. 35. XHMTL & CSS2 “Standardize and Ignore”Monday, November 29, 2010
  36. 36. HTML5 “Implement then Standardize”Monday, November 29, 2010
  37. 37. Standards Making?Monday, November 29, 2010
  38. 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 RecommendationMonday, November 29, 2010
  39. 39. Lies, Damn Lies, Statistics. And... Claims About StandardsMonday, November 29, 2010
  40. 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) 2010Monday, November 29, 2010
  41. 41. XMLHttpRequest (aka AJAX) Candidate Recommendation August 2010Monday, November 29, 2010
  42. 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/10Monday, November 29, 2010
  43. 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/09Monday, November 29, 2010
  44. 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/06Monday, November 29, 2010
  45. 45. STATE OF THE UNIONMonday, November 29, 2010
  46. 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/FilesMonday, November 29, 2010
  47. 47. Thanks!Monday, November 29, 2010
  48. 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 3Monday, November 29, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×