Más contenido relacionado

Más de Sencha(20)


HTML5: State of the Union

  1. Monday, November 29, 2010
  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=" 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:// 9sEI1AUFJKw&hl=en_GB&fs=1&" type="application/x-shockwave- flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object> Monday, November 29, 2010
  13. Cross Document Messaging iframe post message to add event listener receive message check origin is 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 • (biggest) • (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
  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 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
  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 3 Monday, November 29, 2010