State of the Open WebBrad Neuberg, Google
http://flickr.com/photos/jamespaullong/164875156/
Who is this guy?Ajax Image CC: jopemoro/Flickr
Who is this guy?Ajax Image CC: jopemoro/Flickr
Who is this guy?
Ajax
Ajax Image CC: jopemoro/Flickr
Who is this guy?
Ajax
Ajax Image CC: jopemoro/Flickr
Gears
Who is this guy?
CoworkingAjax
Ajax Image CC: jopemoro/Flickr
Gears
Who is this guy?
CoworkingAjax
Ajax Image CC: jopemoro/Flickr
Gears Open Web
What is the Open Web?
http://flickr.com/photos/virtualsugar/316200555/
Cross-Platform Standards
http://flickr.com/photos/nzgabriel/2607046460/
1
2Open Source Implementations
3No Vendor Lock-In
4Anyone Can Innovate
5Universal Powerful Clients
*
*Mashable
*MashableSearchable
*MashableSearchableIntegrated
Why Should You Care?
Why Should You Care?
Idealist
Why Should You Care?
IdealistPragmatist
Why Should You Care?
IdealistPragmatist
Why Should You Care?
IdealistPragmatist
Why Google?
Google’s Motivation
Google’s MotivationMore users on the web
&
Better web browsers
Google’s MotivationMore users on the web
&
Better web browsers
Searching
Advertisements
Better Applications
Google’s MotivationMore users on the web
&
Better web browsers
Searching
Advertisements
Better Applications
$
Google’s MotivationMore users on the web
&
Better web browsers
Searching
Advertisements
Better Applications
€
Chrome
Chrome
Chrome
Open Web
Chrome
Agenda
Agenda
Introduction
Agenda
Introduction
Agenda
Introduction
http://flickr.com/photos/flickrsven/2729357011/
Agenda
Introduction
http://flickr.com/photos/flickrsven/2729357011/
Agenda
Introduction
http://flickr.com/photos/flickrsven/2729357011/
Vector Graphics
Vector Graphics
Vector Graphics
Mathematical equations
Vector Graphics
Vector Graphics
Mathematical equations
Raster Graphics (GIF, JPG, PNG)
Array of pixels
Vector Graphics
Vector Graphics
Mathematical equations
Raster Graphics (GIF, JPG, PNG)
Array of pixels
Vector GraphicsCanvas Tag
Scalable Vector Graphics (SVG)
Canvas
CanvasHTML Tag + API for drawing
Canvas Example
<canvas id=”myCanvas”></canvas>
var canvas = document.getElementById ("canvas");var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect(10, 10, 55, 50);
Canvas Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Yes Yes Yes Almost1 Almost1 Yes Yes
Canvas Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Yes Yes Yes Almost1 Almost1 Yes Yes
1 IE: Requires JavaScript shim; performance issues
Canvas Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Yes Yes Yes Almost1 Almost1 Yes Yes
1 IE: Requires JavaScript shim; performance issues READY
Canvas ShimsExplorerCanvas
Canvas for Internet Explorer
Created by Emil Eklund and Google
Open source
Uses VML
Be careful with performance
http://excanvas.sourceforge.net/
SVG
SVGMarkup language for graphics
SVG Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="60" height="60" x="0" y="0" stroke-fill="green"/></svg>
SVG Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost Almost Almost No No Almost Almost1
http://www.codedread.com/svg-support.php
SVG Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost Almost Almost No No Almost Almost1
http://www.codedread.com/svg-support.php
1 iPhone: SVG Support arrived in iPhone version 2.1
SVG Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost Almost Almost No No Almost Almost1
http://www.codedread.com/svg-support.php
1 iPhone: SVG Support arrived in iPhone version 2.1NOT READY
SVG ShimsNone yet
JavaScript shim being developed for Internet Explorer
Adobe SVG Viewer discontinued
SVG Vs. CanvasNeed both!
Canvas
Immediate-mode API
SVG
Retained mode
Ajax History/Bookmarking
Ajax History/BookmarkingBookmark Ajax applications
Respond to back/forward buttons
Ajax History/Bookmarking Example
<body onhashchange="update()">
function update() { alert('The new location is: ' + location.hash);}
Ajax History/Bookmarking Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Almost1 Almost1 Yes2 Almost1 Almost1
Ajax History/Bookmarking Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Almost1 Almost1 Yes2 Almost1 Almost1
1 Requires JavaScript shim; not HTML 5 API
Ajax History/Bookmarking Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Almost1 Almost1 Yes2 Almost1 Almost1
1 Requires JavaScript shim; not HTML 5 API2 Implements HTML 5 History API
Ajax History/Bookmarking Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Almost1 Almost1 Yes2 Almost1 Almost1
1 Requires JavaScript shim; not HTML 5 API2 Implements HTML 5 History API
READY
Ajax History/Bookmarking ShimsdsHistory
http://code.google.com/p/dshistory/
YUI Browser History Manager
http://developer.yahoo.com/yui/history/
Really Simple History
http://code.google.com/p/reallysimplehistory/
JavaScript Toolkits
How to Choose an Ajax Framework
XHR
How to Choose an Ajax Framework
XHR
How to Choose an Ajax Framework
The Old Taxonomy
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
jQueryNew, DOM-centric JavaScript helper
The Old Taxonomy
dojoYour Soup-to-Nuts Ajax/Javascript
Platform
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
jQueryNew, DOM-centric JavaScript helper
The New Taxonomy
Prototype jQuery Dojo Core
The New Taxonomy
Prototype jQuery Dojo Core
Plug-in Communityscripteka.com
Plug-in Communityplugins.jquery.com
Plug-in Communitydojox
The New Taxonomy
Prototype jQuery Dojo Core
Plug-in Communityscripteka.com
Plug-in Communityplugins.jquery.com
Plug-in Communitydojox
Script.aculo.us jQuery UI dijit
The New Taxonomy
Prototype jQuery Dojo Core
Plug-in Communityscripteka.com
Plug-in Communityplugins.jquery.com
Plug-in Communitydojox
Script.aculo.us jQuery UI dijit
The New Taxonomy
READY
Web FontsAdvanced typography for the web
Web FontsPretty fragmented
Embedded Open Type (EOT)
Internet Explorer
TrueType Fonts
Safari 3.1
SVG Fonts
Safari 3, Firefox 3.1
Web Fonts Example (TTF)
@font-face font-family: "Kimberley"; src: url(kimberle.ttf) format("truetype");}
h1 { font-family: "Kimberley", sans-serif}
Web Fonts Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Yes2 Almost1,3 Almost1,3 Almost1 No1
Web Fonts Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Yes2 Almost1,3 Almost1,3 Almost1 No1
1Requires JavaScript shim (Dojo GFX Fonts)
Web Fonts Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Yes2 Almost1,3 Almost1,3 Almost1 No1
1Requires JavaScript shim (Dojo GFX Fonts)2Safari 3.1: Supports TTF and SVG Fonts
Web Fonts Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Yes2 Almost1,3 Almost1,3 Almost1 No1
1Requires JavaScript shim (Dojo GFX Fonts)2Safari 3.1: Supports TTF and SVG Fonts3IE: Supports EOT; Shim can be glitchy
Web Fonts Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Almost1 Almost1 Yes2 Almost1,3 Almost1,3 Almost1 No1
1Requires JavaScript shim (Dojo GFX Fonts)2Safari 3.1: Supports TTF and SVG Fonts3IE: Supports EOT; Shim can be glitchy
ALMOST
Web Fonts ShimsDojo GFX Fonts
http://www.sitepen.com/blog/2008/09/08/custom-fonts-with-dojoxgfx/
sIFR
http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement
CSSCSS Animations, Reflections, and Masks
CSS 2.1
Selectors
Content/Counters
CSS 3
Selectors
Multicolumn layout
CSS 2.1 Example
<div myattr=”hello”></div>
[myattr|=hello] { background-color: blue;}
CSS Report Card
CSS 2.1
CSS 3CSS Effects
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
1Safari 3 only (some in Firefox 3.1)
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
READY
2
1Safari 3 only (some in Firefox 3.1)
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
READY
2
1Safari 3 only (some in Firefox 3.1)2IE 8 > IE 7 > IE 6
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
READY
2NOT READY
3
1Safari 3 only (some in Firefox 3.1)2IE 8 > IE 7 > IE 6
CSS Report Card
CSS 2.1
CSS 3CSS Effects
3Some support in Safari 3 and Firefox 3/3.1, a little in IE 8
NOT READY
1
READY
2NOT READY
3
1Safari 3 only (some in Firefox 3.1)2IE 8 > IE 7 > IE 6
HTML 5
HTML 5Next revision of HTML
HTML 5Next revision of HTML
Two parts
HTML 5Next revision of HTML
Two parts
Document how web currently works
HTML 5Next revision of HTML
Two parts
Document how web currently works
New features
HTML 5 New ModulesDrawing
Client-Side Storage
Offline
Editing
Drag and drop
Messaging/Networking
....And a Pony!
HTML 5 New ModulesDrawing
Client-Side Storage
Offline
Editing
Drag and drop
Messaging/Networking
....And a Pony!
NOT READY
XML WebIntegrated set of technologies based on XML
Runs in the browser
XML Web Report Card
XML Web Report Card
XML
XML Web Report Card
XMLREADY
XML Web Report Card
XML
XSLT
READY
XML Web Report Card
XML
XSLT
READY
READY
XML Web Report Card
XML
XSLT
XPath
READY
READY
XML Web Report Card
XML
XSLT
XPath
READY
READY
READY
XML Web Report Card
XML
XSLT
XPath
CSS/XMLREADY
READY
READY
XML Web Report Card
XML
XSLT
XPath
CSS/XMLREADY
READY
READY
ALMOST
XML Web Report Card
XML
XSLT
XPath
CSS/XML
XHTML
READY
READY
READY
ALMOST
XML Web Report Card
XML
XSLT
XPath
CSS/XML
XHTML
READY
READY
READY
NOT READY
ALMOST
Video on the Web
Video on the WebHTML tag to drop videos into your web page
Video on the Web Example
<video src='myMovie' id='vid' />
var vid = document.getElementById("vid");vid.play();vid.pause();vid.stop();vid.muted = true;
vid.addCueRange("ranges", 10, 20, false, enterCallBack, exitCallBack);
Video on the Web Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
No No1 No1 No No No No
Video on the Web Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
No No1 No1 No No No No
1 Firefox 3.1/Safari 3.1 will support
Video on the Web Report Card
Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
No No1 No1 No No No No
1 Firefox 3.1/Safari 3.1 will support
NOT READY
Even More
Even More
Client-Side Storage
Even More
Client-Side StorageREADY
1
Even More
Client-Side Storage
1 JavaScript shims (Dojo Storage); Gears
READY
1
Even More
Client-Side Storage
Offline1 JavaScript shims (Dojo Storage); Gears
READY
1
Even More
Client-Side Storage
Offline1 JavaScript shims (Dojo Storage); Gears
READY
1
READY
2
Even More
Client-Side Storage
Offline1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
Even More
Client-Side Storage
Offline
X-Domain1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
Even More
Client-Side Storage
Offline
X-Domain1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
READY
3
Even More
Client-Side Storage
Offline
X-Domain3 JSONP
1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
READY
3
Even More
Even More
Fast JavaScript
Even More
Fast JavaScriptALMOST
1
Even More
Fast JavaScript
1 All browsers but IE (Tracemonkey, V8, etc.)
ALMOST
1
Even More
Fast JavaScript
JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)
ALMOST
1
Even More
Fast JavaScript
JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)
NOT READY
2ALMOST
1
Even More
Fast JavaScript
JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)2 Still in standards bodies
NOT READY
2ALMOST
1
Take Action
Take Actioncode.google.com
Take Actioncode.google.com
code.google.com/doctype
Take Actioncode.google.com
code.google.com/doctype
ajaxian.com
Take Actioncode.google.com
code.google.com/doctype
ajaxian.com
whatwg.org
Take Actioncode.google.com
code.google.com/doctype
ajaxian.com
whatwg.org
Slides:
State of the Open WebBrad Neuberg, Google