HTML5: State of the Union

  • 2,776 views
Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,776
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
82
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Monday, November 29, 2010
  • 2. HTML5*: State of the Union *(Including satellites and CSS3) MICHAEL MULLANY, SENCHAMonday, 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 RecommendationMonday, 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: OperaMonday, 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 ProcessingMonday, 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 MMonday, 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 & SatellitesMonday, 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 FormatMonday, 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.comMonday, 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 accessMonday, 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 APIsMonday, November 29, 2010
  • 16. Cascading Style Sheets Level 3Monday, 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, spanMonday, November 29, 2010
  • 18. HSLa and RBGaMonday, 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 boxMonday, November 29, 2010
  • 20. Gradients Linear (with angles) Radial Color-Stops Combine with RBGA Usable everywhere as image replacements RBGA MagicMonday, 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 overlayMonday, November 29, 2010
  • 22. Web Fonts • Fonts.com (biggest) • Typekit.com (coolest) • Many others... • Free Google samplesMonday, 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 dateMonday, 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 IndexedDBMonday, 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 UnknownMonday, November 29, 2010
  • 27. Semantic Elements HTML5 Forms HTML5 Canvas & Satellites Media Playback EventsMonday, November 29, 2010
  • 28. @page CSS2 SpeechMonday, 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 outMonday, 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 ReleasedMonday, 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 3Monday, 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
  • 37. Standards Making?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 RecommendationMonday, November 29, 2010
  • 39. Lies, Damn Lies, Statistics. And... Claims About StandardsMonday, 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) 2010Monday, November 29, 2010
  • 41. XMLHttpRequest (aka AJAX) Candidate Recommendation August 2010Monday, 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/10Monday, 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/09Monday, 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/06Monday, November 29, 2010
  • 45. STATE OF THE UNIONMonday, 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/FilesMonday, November 29, 2010
  • 47. Thanks!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 3Monday, November 29, 2010