html5: state of the union
DESCRIPTION
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.TRANSCRIPT
![Page 1: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/1.jpg)
Monday, November 29, 2010
![Page 2: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/2.jpg)
HTML5*: State of the Union*(Including satellites and CSS3)
MICHAEL MULLANY, SENCHA
Monday, November 29, 2010
![Page 3: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/3.jpg)
HTML5?
localStorage
WebSQL
gradient
-webkit
CSS Text
GeoLocation
canvastype=camera
Editor Draft
Working Draft
@page
@mediamanifest
ProposedRecommendation
last call
accelerometer
keyframe
transform
text-align
<video>
Monday, November 29, 2010
![Page 4: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/4.jpg)
HTML5 Core Spec
HTML5 Spinouts
CSS3 Modules
STANDARDS
IMPLEMENTATIONSTrident: Microsoft
Webkit: Apple, Google, RIM ++Gecko: Firefox
Presto: Opera
“HTML5”HTML5 Satellites
Monday, November 29, 2010
![Page 5: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/5.jpg)
Unleashing HTML5...
Worker Parallel
Processing
File SystemsDBs
App Cache
Javascript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
x-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Server & Services
HTTP
AJAX
Events
Sockets
SSL
More...
Unpopular CSS3Text
Text Layout Grid Positioning
@PageVariables
Aural style sheetsruby...
Popular CSS3Borders
BackgrdsColor
GradientsTransformsAnimations
...
FlexBoxSelectors@Media
WebFontsMulti-Col
...
Monday, November 29, 2010
![Page 6: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/6.jpg)
Rich Media & Styling Full Resource Access
Parallel ProcessingInter-App Communication
Full O!ine Capability COMPLETE MODERN APP PLATFORM
Monday, November 29, 2010
![Page 7: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/7.jpg)
Three Questions To AskWhat does it do?
What browsers support it?
Is it a standard?
Monday, November 29, 2010
![Page 8: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/8.jpg)
1. What Does It Do?
Monday, November 29, 2010
![Page 9: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/9.jpg)
HTML5 & Satellites
Monday, November 29, 2010
![Page 10: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/10.jpg)
HTML5 Semantic Tags
<nav> <article>
<section>
<section>
<H1>
<H1>
<aside>
<footer>
<header> New Content Model1.Meta Data2.Flow3.Sections4.Headings5.Phrasing6.Embedded 7.Interactive
Revision Control Primitives<ins> & <del>
and much much more...<time>
Monday, November 29, 2010
![Page 11: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/11.jpg)
HTML5 CanvasCreate a drawing area
Draw & write in itlines, boxes, gradients, arcs ..
TransformsComposites
ShadowsTweak pixels
Img <-> Canvas <-> Img
Low-Level Bit-Map Format
Monday, November 29, 2010
![Page 12: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/12.jpg)
HTML5 <Video> (& <Audio>)
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param> <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>
Before After<video src=pudding.ogv width=320 height=240 controls poster=pudding.jpg></video>
http://dev.opera.com/articles/view/introduction-html5-video/
Monday, November 29, 2010
![Page 13: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/13.jpg)
Cross Document Messaging
post message to bar.com/receiver.html
foo.com/sender.html
iframeadd event listener
receive message check origin is bar.com
bar.com/receiver.html
Monday, November 29, 2010
![Page 14: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/14.jpg)
O!ine Operation
sessionStoragelocalStorage
AppCacheList of o!ine assets- img, mov, css, js...
WebSQL & IndexDBo!ine databases
FileAPIfiles & directories
key:value
Sandboxed By Origin
w/ BrowserOver-rides
Not general native file access
Monday, November 29, 2010
![Page 15: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/15.jpg)
Device APIMedia Capture- Extends <input> to new types- Sound, image, video
Contacts API- Search & extract contacts info- CRUD operations
And More..- Gallery, SMS- Based on Nokia & BONDI APIs
<input type="file" accept="image/*" id="capture">
Prompts user to take a photo
Monday, November 29, 2010
![Page 16: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/16.jpg)
Cascading Style SheetsLevel 3
Monday, November 29, 2010
![Page 17: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/17.jpg)
Selectors Color & ImagesNamespace
Relationship
Attribute
Pseudo-Classes
Pseudo-Elements
Rounded Borders
Border Images
Multiple Bckgrnds
Clip
Size
Backgrounds & Borders
Fonts@font-face
font-size adjust
font-stretch
Clip
Size
Transforms & Animations
Animation
2D Transform
3D Transform
Transitions
@keyframe
align
direction
flex
pack
orientMedia Queries
Width/Height
Device Dimensions
Resolution
Orientation
Multi-ColumnCount
Width
Gap
Break, fill, span
Flex Box
SVG Colors
HSLa
RGBa
Gradients
CSS3 Unpacked
Monday, November 29, 2010
![Page 18: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/18.jpg)
HSLa and RBGa
Monday, November 29, 2010
![Page 19: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/19.jpg)
Borders and Backgrounds
Plain
border-radius
border-image
padding boxcontent box
border box
multiple backgrounds, stretch, tile, round, scroll, attach-points...
Monday, November 29, 2010
![Page 20: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/20.jpg)
RBGA Magic
GradientsLinear (with angles)RadialColor-StopsCombine with RBGA
Usable everywhere as image replacements
Monday, November 29, 2010
![Page 21: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/21.jpg)
Gradients & Clipping
slight background gradientbackground-clip: text
2 radial gradients: multiple color stops radial gradient: multiple color stops
box-reflect on underlay DIV with a pure alpha gradient overlay
Monday, November 29, 2010
![Page 22: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/22.jpg)
Web Fonts • Fonts.com (biggest)• Typekit.com (coolest)• Many others...• Free Google samples
Monday, November 29, 2010
![Page 23: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/23.jpg)
2. Who Supports It?
Monday, November 29, 2010
![Page 24: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/24.jpg)
Sources of DataModernizr: Detects basic supportWikipedia: Detailed support e.g. backface-visibility
...mostly up to date
Monday, November 29, 2010
![Page 25: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/25.jpg)
IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2@font-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB
MODERNIZR
Monday, November 29, 2010
![Page 26: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/26.jpg)
Wikipedia HeatmapHundreds of individual properties across HTML5 and CSS2 & 3
Color code each property support per browser
Put it on a single page!
Supported
No Support
Beta Support
Incorrect Support
Unknown
Partial Support
Monday, November 29, 2010
![Page 27: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/27.jpg)
SemanticElements
HTML5 Forms
Media PlaybackEvents
Canvas
HTML5& Satellites
Monday, November 29, 2010
![Page 28: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/28.jpg)
@page
Speech
CSS2
Monday, November 29, 2010
![Page 29: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/29.jpg)
Element Selectors
AdvancedBorder Images
Advanced Text
Speech CSS
Animations, Flexbox, Marquee
CSS3 Values (vh, dpi)
CSS3
Monday, November 29, 2010
![Page 30: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/30.jpg)
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
![Page 31: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/31.jpg)
3. Is It A Standard?
Monday, November 29, 2010
![Page 32: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/32.jpg)
20 Years of the Web
MicrosoftWeb Strategy
Memo
Tim Berners LeePublishes
MosaicDemo
CERN puts Web foundations into the
public domain
NetscapeIPO
MicrosoftCancels
Blackbird
Apple/Microsoft O!ce/IE
Deal
InternetExplorer
96%ShareIE 3.0 Ships
AOL/Netscape
Apple Safari1.0 Ships
WHATWG Schism
Google Maps“Web 2.0”
Google Chrome1.0 Ships
Firefox1.0 Ships
iPhoneShips
Google Android 1.0
Released
iPadShips
1990 1995 2000 2005 2010
Monday, November 29, 2010
![Page 33: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/33.jpg)
HTML & CSS Standards Evolution
Tim Berners LeePublishes
MosaicDemo
NetscapeIPO
InternetExplorer
96%ShareIE 3.0 Ships
AOL/Netscape
Apple Safari1.0 Ships
Google Maps“Web 2.0”
Chrome1.0 Ships
Firefox1.0 Ships
iPhoneShips
Google Android 1.0
Released iPadShips
1990 1995 2000 2005 2010
1 2 3HTML 4 (XHTML) 5
CSS 1 2 32.1
WHATWG Schism
Monday, November 29, 2010
![Page 34: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/34.jpg)
4 Eras of Web Standards
<Title><NextID><?> Base Address<A> <IsIndex><Plaintext><Listing><p>, <h1>...<Address><HP1> (Highlights)<DL> <DT> (Glossary)<LI> (UL, Menu, Dir)
<FRAMESET><FONT><CENTER><MARQUEE><LAYER><BLINK>
XpathXQueryXSLTXForms...
HTML5&
CSS3
Birth ... Chaos ... Crisis ... Maturity
Monday, November 29, 2010
![Page 35: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/35.jpg)
XHMTL & CSS2“Standardize
andIgnore”
Monday, November 29, 2010
![Page 36: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/36.jpg)
HTML5“Implement
thenStandardize”
Monday, November 29, 2010
![Page 37: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/37.jpg)
Standards Making?
Monday, November 29, 2010
![Page 38: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/38.jpg)
Standards Making
Good Ideas
Working Draft
Candidate Recommendation
Proposed Recommendation
STANDARD
Legacy
CompatibilityPersonal
Relationships
International
Vendor
Strategies
Astronauts
Facts on The
Ground
Personalities
And more...Browser
Team Priorities
Monday, November 29, 2010
![Page 39: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/39.jpg)
Lies, Damn Lies, Statistics.
And... Claims About Standards
Monday, November 29, 2010
![Page 40: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/40.jpg)
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
![Page 41: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/41.jpg)
XMLHttpRequest (aka AJAX)
Candidate Recommendation
August 2010
Monday, November 29, 2010
![Page 42: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/42.jpg)
HTML5 StatusCore Spec WD LC CR LC PR 10/10
Geolocation API WD LC CR LC PR 09/10Web Workers WD LC CR LC PR 12/09Web Sockets WD LC CR LC PR 12/09
IndexedDB WD LC CR LC PR 08/10Web SQL SUSPENDED 12/09
Server-Sent Events WD LC CR LC PR 12/09DeviceOrientation Editor’s Draft 08/10
Contacts API WD LC CR LC PR 08/10SMS API WD LC CR LC PR 08/10
Media Capture WD LC CR LC PR 09/10File API WD LC CR LC PR 10/10
Monday, November 29, 2010
![Page 43: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/43.jpg)
Module StatusCSS 2.1 WD LC CR LC PR 09/09
Bcks & Borders WD LC CR LC PR 06/10Color WD LC CR LC PR 10/10
Image Values WD LC CR LC PR 09/10Media Queries WD LC CR LC PR 07/10
Selectors WD LC CR LC PR 12/09Animations WD LC CR LC PR 03/09
Flex Box WD LC CR LC PR 07/09Fonts WD LC CR LC PR 06/09
Generated Content WD LC CR LC PR 05/03Multi-Column WD LC CR LC PR 12/092D Transforms WD LC CR LC PR 12/093D Transforms WD LC CR LC PR 03/09
Transitions WD LC CR LC PR 12/09Monday, November 29, 2010
![Page 44: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/44.jpg)
CSS Module StatusPaged Media ED WD LC CR LC PR 10/06
Variables ED WD LC CR LC PR 04/08Mobile Prof 2.0 ED WD LC CR LC PR 12/08
Box Model ED WD LC CR LC PR 08/07GC for Paged Media ED WD LC CR LC PR 06/10
Grid Positioning ED WD LC CR LC PR 09/07Lists ED WD LC CR LC PR 11/02
Object Model ED WD LC CR LC PR 08/10Obj Model - View ED WD LC CR LC PR 08/09
Namespaces ED WD LC CR LC PR 05/08ruby ED WD LC CR LC PR 05/03
Template Layout ED WD LC CR LC PR 04/10Text ED WD LC CR LC PR 10/10
Text Layout ED WD LC CR LC PR 05/03Basic UI ED WD LC CR LC PR 05/04
Values & Units ED WD LC CR LC PR 09/06
Significant Non-Implementation
Monday, November 29, 2010
![Page 45: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/45.jpg)
STATE OF THE UNION
Monday, November 29, 2010
![Page 46: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/46.jpg)
HTML5: State of the Union
Worker Parallel
Processing
Javascript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
x-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Server & Services
HTTP
AJAX
Events
Sockets
SSL
App Cache
Storage
DBs/Files
Monday, November 29, 2010
![Page 47: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/47.jpg)
Thanks!
Monday, November 29, 2010
![Page 48: HTML5: State of the Union](https://reader034.vdocuments.us/reader034/viewer/2022050801/54be98c34a79590c528b46a4/html5/thumbnails/48.jpg)
• 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 Variables◦ Media Queries◦ Selectors Level 3
• Medium Priority Modules◦ CSS Animations◦ CSS Basic Box Model Level 3◦ CSS Fonts Level 3◦ CSS Generated and Replaced Content Level 3◦ CSS Grid Positioning◦ CSS Marquee Level 3◦ CSS Multi-column Layout◦ CSS Object Model Level 3◦ CSS Ruby◦ CSS Template Layout◦ CSS Transformations◦ CSS Transitions◦ 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
CSS Working
Group Priorities
2010
Monday, November 29, 2010