HTML5: State of the Union

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


STANDARDS
HTML5 Core Spec
HTML5 Spinouts
“HTML5”
HTML5 Satellites
CSS3 Modules

IMPLEMENTATIONS
Trident: Microsoft
Webkit: Apple, Google, RIM ++
Gecko: Firefox
Presto: Opera


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


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


Three Questions To Ask
What does it do?

What browsers support it?

Is it a standard?


1. What Does It Do?


HTML5 & Satellites


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...


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


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/


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


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
ﬁles & directories Not general native
ﬁle access


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


Cascading Style Sheets
Level 3


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 ﬂex
Width/Height
Clip Count
pack
Media Queries Multi-Column
Device Dimensions
Size Width
orient
Resolution Gap
Orientation Break, ﬁll, span

HSLa and RBGa


Borders and Backgrounds
multiple backgrounds, stretch,
tile, round, scroll, attach-points...
Plain

border-radius

border-image

content box
padding box
border box


Gradients
Linear (with angles)
Radial
Color-Stops
Combine with RBGA

Usable everywhere
as image replacements

RBGA Magic

Gradients & Clipping
2 radial gradients: multiple color stops radial gradient: multiple color stops

background-clip: text
slight background gradient

box-reﬂect on underlay DIV with a pure alpha
gradient overlay

Web Fonts
• Fonts.com (biggest)
• Typekit.com (coolest)
• Many others...
• Free Google samples


2. Who Supports It?


Sources of Data
Modernizr: Detects basic support
Wikipedia: Detailed support
e.g. backface-visibility

...mostly up to date


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

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


Semantic
Elements
HTML5 Forms

HTML5
Canvas
& Satellites
Media Playback
Events


@page

CSS2

Speech


Element Selectors

Advanced
Border Images
Advanced Text

Speech
CSS
CSS3
Animations,
Flexbox, Marquee

CSS3 Values (vh, dpi)


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


3. Is It A Standard?


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


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


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)


XHMTL & CSS2
“Standardize
and
Ignore”


HTML5
“Implement
then
Standardize”


Standards Making?


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


Lies, Damn Lies, Statistics.
And... Claims About Standards


There Are Only 3 O cial
Full Standards for CSS
Document Object Model Level 2 Style Speciﬁcation 2000

Cascading Style Sheets Level 1 Speciﬁcation 2008

Associating Style Sheets with XML documents 1.0
(Second Edition) 2010


XMLHttpRequest
(aka AJAX)
Candidate Recommendation
August 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

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

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
iﬁ 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

STATE OF THE UNION


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


Thanks!


• 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


HTML5: State of the Union

Recommended

Recommended

More Related Content

Similar to HTML5: State of the Union

Similar to HTML5: State of the Union (20)

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

HTML5: State of the Union