Date post: | 21-Jan-2015 |
Category: |
Technology |
Upload: | sencha |
View: | 2,821 times |
Download: | 4 times |
Monday, November 29, 2010
HTML5*: State of the Union*(Including satellites and CSS3)
MICHAEL MULLANY, SENCHA
Monday, November 29, 2010
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
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
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
Rich Media & Styling Full Resource Access
Parallel ProcessingInter-App Communication
Full O!ine Capability COMPLETE MODERN APP PLATFORM
Monday, November 29, 2010
Three Questions To AskWhat 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
<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
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
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
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
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
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
Cascading Style SheetsLevel 3
Monday, November 29, 2010
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
HSLa and RBGa
Monday, November 29, 2010
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
RBGA Magic
GradientsLinear (with angles)RadialColor-StopsCombine with RBGA
Usable everywhere as image replacements
Monday, November 29, 2010
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
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 DataModernizr: Detects basic supportWikipedia: 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-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
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
SemanticElements
HTML5 Forms
Media PlaybackEvents
Canvas
HTML5& Satellites
Monday, November 29, 2010
@page
Speech
CSS2
Monday, November 29, 2010
Element Selectors
AdvancedBorder Images
Advanced Text
Speech CSS
Animations, Flexbox, Marquee
CSS3 Values (vh, dpi)
CSS3
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
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
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
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
XHMTL & CSS2“Standardize
andIgnore”
Monday, November 29, 2010
HTML5“Implement
thenStandardize”
Monday, November 29, 2010
Standards Making?
Monday, November 29, 2010
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
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 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
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
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
STATE OF THE UNION
Monday, November 29, 2010
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
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 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