state of the open webcodinginparadise.org/presentations/state of the... · canvas html tag + api...

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

Ajax Image CC: jopemoro/Flickr

Who is this guy?

Ajax


Gears

Who is this guy?

CoworkingAjax


Gears

Who is this guy?

CoworkingAjax


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?


Idealist


IdealistPragmatist

Why Google?

Google’s Motivation

Google’s MotivationMore users on the web

&

Better web browsers


&

Better web browsers

Searching

Advertisements

Better Applications


&

Better web browsers

Searching

Advertisements

Better Applications

$


&

Better web browsers

Searching

Advertisements

Better Applications

€

Chrome

Open Web

Chrome

Agenda

Agenda

Introduction

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



1 IE: Requires JavaScript shim; performance issues

Canvas Report Card

Firefox 2



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/

http://excanvas.sourceforge.net

http://excanvas.sourceforge.net

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>

http://www.w3.org/2000/svg

http://www.w3.org/2000/svg

SVG Report Card

Firefox 2


Almost Almost Almost No No Almost Almost1

http://www.codedread.com/svg-support.php



SVG Report Card

Firefox 2




1 iPhone: SVG Support arrived in iPhone version 2.1



SVG Report Card

Firefox 2




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


Almost1 Almost1 Almost1 Almost1 Yes2 Almost1 Almost1


Firefox 2



1 Requires JavaScript shim; not HTML 5 API


Firefox 2



1 Requires JavaScript shim; not HTML 5 API2 Implements HTML 5 History API


Firefox 2



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

The Old Taxonomy

The Old Taxonomy

PrototypeLightweight Ajax/JavaScript helpers

The Old Taxonomy


GWTHate JavaScript? No problem, use Java.

The Old Taxonomy



jQueryNew, DOM-centric JavaScript helper

The Old Taxonomy

dojoYour Soup-to-Nuts Ajax/Javascript

Platform



jQueryNew, DOM-centric JavaScript helper

The New Taxonomy

Prototype jQuery Dojo Core

The New Taxonomy


Plug-in Communityscripteka.com

Plug-in Communityplugins.jquery.com

Plug-in Communitydojox

The New Taxonomy





Script.aculo.us jQuery UI dijit

The New Taxonomy





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




1Requires JavaScript shim (Dojo GFX Fonts)




1Requires JavaScript shim (Dojo GFX Fonts)2Safari 3.1: Supports TTF and SVG Fonts




1Requires JavaScript shim (Dojo GFX Fonts)2Safari 3.1: Supports TTF and SVG Fonts3IE: Supports EOT; Shim can be glitchy




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


1

1Safari 3 only (some in Firefox 3.1)

CSS Report Card

CSS 2.1


1

READY

2

1Safari 3 only (some in Firefox 3.1)

CSS Report Card

CSS 2.1


1

READY

2

1Safari 3 only (some in Firefox 3.1)2IE 8 > IE 7 > IE 6

CSS Report Card

CSS 2.1


1

READY

2NOT READY

3


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


HTML 5

HTML 5Next revision of HTML


Two parts


Two parts

Document how web currently works


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


No No1 No1 No No No No




1 Firefox 3.1/Safari 3.1 will support




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


code.google.com/doctype



ajaxian.com



ajaxian.com

whatwg.org



ajaxian.com

whatwg.org

Slides:

State of the Open WebBrad Neuberg, Google

state of the open webcodinginparadise.org/presentations/state of the... · canvas html tag + api...

Documents