State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API...

transcript

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?

CoworkingAjax

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/

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

Searching

Advertisements

Better Applications

Chrome

Open Web

Chrome

Agenda

Introduction

Agenda

Introduction

Agenda

Introduction

http://flickr.com/photos/flickrsven/2729357011/

Agenda

Introduction

Agenda

Introduction

Vector Graphics

Mathematical equations

Vector Graphics

Raster Graphics (GIF, JPG, PNG)

Array of pixels

Vector Graphics

Raster Graphics (GIF, JPG, PNG)

Array of pixels

Vector GraphicsCanvas Tag

Scalable Vector Graphics (SVG)

Canvas

CanvasHTML Tag + API for drawing

Canvas Example

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/

SVGMarkup language for graphics

SVG Example

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

Retained mode

Ajax History/Bookmarking

Ajax History/BookmarkingBookmark Ajax applications

Respond to back/forward buttons

Ajax History/Bookmarking Example

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

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

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

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

ALMOST

Web Fonts ShimsDojo GFX Fonts

http://www.sitepen.com/blog/2008/09/08/custom-fonts-with-dojoxgfx/

http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement

CSSCSS Animations, Reflections, and Masks

CSS 2.1

Selectors

Content/Counters

Selectors

Multicolumn layout

CSS 2.1 Example

[myattr|=hello] { background-color: blue;}

CSS Report Card

CSS 2.1

CSS 3CSS Effects

CSS Report Card

CSS 2.1

CSS 3CSS EffectsNOT READY

CSS Report Card

CSS 2.1

1Safari 3 only (some in Firefox 3.1)

CSS Report Card

CSS 2.1

1Safari 3 only (some in Firefox 3.1)

CSS Report Card

CSS 2.1

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

CSS Report Card

CSS 2.1

2NOT READY

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

2NOT READY

HTML 5

HTML 5Next revision of HTML

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

XMLREADY

XML Web Report Card

CSS/XMLREADY

XML Web Report Card

CSS/XMLREADY

ALMOST

XML Web Report Card

CSS/XML

ALMOST

XML Web Report Card

CSS/XML

NOT READY

ALMOST

Video on the Web

Video on the WebHTML tag to drop videos into your web page

Video on the Web Example

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

NOT READY

Even More

Client-Side Storage

Even More

Client-Side StorageREADY

Even More

Client-Side Storage

1 JavaScript shims (Dojo Storage); Gears

Even More

Client-Side Storage

Offline1 JavaScript shims (Dojo Storage); Gears

Even More

Client-Side Storage

Offline1 JavaScript shims (Dojo Storage); Gears

Even More

Client-Side Storage

Offline1 JavaScript shims (Dojo Storage); Gears2 Gears

Even More

Client-Side Storage

Offline

X-Domain1 JavaScript shims (Dojo Storage); Gears2 Gears

Even More

Client-Side Storage

Offline

X-Domain1 JavaScript shims (Dojo Storage); Gears2 Gears

Even More

Client-Side Storage

Offline

X-Domain3 JSONP

1 JavaScript shims (Dojo Storage); Gears2 Gears

Even More

Fast JavaScript

Even More

Fast JavaScriptALMOST

Even More

Fast JavaScript

1 All browsers but IE (Tracemonkey, V8, etc.)

ALMOST

Even More

Fast JavaScript

JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)

ALMOST

Even More

Fast JavaScript

JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)

NOT READY

2ALMOST

Even More

Fast JavaScript

JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)2 Still in standards bodies

NOT READY

2ALMOST

Take Action

Take Actioncode.google.com

code.google.com/doctype

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