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.
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
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
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.com
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
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
• Fonts.com (biggest)
• Typekit.com (coolest)
• Many others...
• Free Google samples
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
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
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
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