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