State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API...
Transcript of State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API...
![Page 1: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/1.jpg)
State of the Open WebBrad Neuberg, Google
![Page 2: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/2.jpg)
http://flickr.com/photos/jamespaullong/164875156/
![Page 3: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/3.jpg)
Who is this guy?Ajax Image CC: jopemoro/Flickr
![Page 4: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/4.jpg)
Who is this guy?Ajax Image CC: jopemoro/Flickr
![Page 5: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/5.jpg)
Who is this guy?
Ajax
Ajax Image CC: jopemoro/Flickr
![Page 6: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/6.jpg)
Who is this guy?
Ajax
Ajax Image CC: jopemoro/Flickr
Gears
![Page 7: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/7.jpg)
Who is this guy?
CoworkingAjax
Ajax Image CC: jopemoro/Flickr
Gears
![Page 8: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/8.jpg)
Who is this guy?
CoworkingAjax
Ajax Image CC: jopemoro/Flickr
Gears Open Web
![Page 9: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/9.jpg)
![Page 10: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/10.jpg)
![Page 11: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/11.jpg)
![Page 12: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/12.jpg)
![Page 13: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/13.jpg)
![Page 14: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/14.jpg)
What is the Open Web?
http://flickr.com/photos/virtualsugar/316200555/
![Page 15: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/15.jpg)
Cross-Platform Standards
http://flickr.com/photos/nzgabriel/2607046460/
1
![Page 16: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/16.jpg)
2Open Source Implementations
![Page 17: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/17.jpg)
3No Vendor Lock-In
![Page 18: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/18.jpg)
4Anyone Can Innovate
![Page 19: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/19.jpg)
5Universal Powerful Clients
![Page 20: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/20.jpg)
*
![Page 21: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/21.jpg)
*Mashable
![Page 22: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/22.jpg)
*MashableSearchable
![Page 23: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/23.jpg)
*MashableSearchableIntegrated
![Page 24: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/24.jpg)
Why Should You Care?
![Page 25: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/25.jpg)
Why Should You Care?
Idealist
![Page 26: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/26.jpg)
Why Should You Care?
IdealistPragmatist
![Page 27: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/27.jpg)
Why Should You Care?
IdealistPragmatist
![Page 28: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/28.jpg)
Why Should You Care?
IdealistPragmatist
![Page 29: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/29.jpg)
Why Google?
![Page 30: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/30.jpg)
Google’s Motivation
![Page 31: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/31.jpg)
Google’s MotivationMore users on the web
&
Better web browsers
![Page 32: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/32.jpg)
Google’s MotivationMore users on the web
&
Better web browsers
Searching
Advertisements
Better Applications
![Page 33: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/33.jpg)
Google’s MotivationMore users on the web
&
Better web browsers
Searching
Advertisements
Better Applications
$
![Page 34: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/34.jpg)
Google’s MotivationMore users on the web
&
Better web browsers
Searching
Advertisements
Better Applications
€
![Page 35: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/35.jpg)
![Page 36: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/36.jpg)
![Page 37: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/37.jpg)
![Page 38: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/38.jpg)
Chrome
![Page 39: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/39.jpg)
Chrome
![Page 40: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/40.jpg)
Chrome
![Page 41: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/41.jpg)
Open Web
Chrome
![Page 42: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/42.jpg)
Agenda
![Page 43: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/43.jpg)
Agenda
Introduction
![Page 44: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/44.jpg)
Agenda
Introduction
![Page 45: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/45.jpg)
Agenda
Introduction
http://flickr.com/photos/flickrsven/2729357011/
![Page 46: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/46.jpg)
Agenda
Introduction
http://flickr.com/photos/flickrsven/2729357011/
![Page 47: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/47.jpg)
Agenda
Introduction
http://flickr.com/photos/flickrsven/2729357011/
![Page 48: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/48.jpg)
Vector Graphics
![Page 49: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/49.jpg)
Vector Graphics
Vector Graphics
Mathematical equations
![Page 50: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/50.jpg)
Vector Graphics
Vector Graphics
Mathematical equations
Raster Graphics (GIF, JPG, PNG)
Array of pixels
![Page 51: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/51.jpg)
Vector Graphics
Vector Graphics
Mathematical equations
Raster Graphics (GIF, JPG, PNG)
Array of pixels
![Page 52: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/52.jpg)
Vector GraphicsCanvas Tag
Scalable Vector Graphics (SVG)
![Page 53: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/53.jpg)
Canvas
![Page 54: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/54.jpg)
CanvasHTML Tag + API for drawing
![Page 55: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/55.jpg)
![Page 56: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/56.jpg)
![Page 57: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/57.jpg)
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);
![Page 58: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/58.jpg)
Canvas Report Card
Firefox 2
Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iPhone
Yes Yes Yes Almost1 Almost1 Yes Yes
![Page 59: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/59.jpg)
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
![Page 60: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/60.jpg)
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
![Page 61: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/61.jpg)
Canvas ShimsExplorerCanvas
Canvas for Internet Explorer
Created by Emil Eklund and Google
Open source
Uses VML
Be careful with performance
http://excanvas.sourceforge.net/
![Page 62: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/62.jpg)
SVG
![Page 63: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/63.jpg)
SVGMarkup language for graphics
![Page 64: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/64.jpg)
![Page 65: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/65.jpg)
![Page 66: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/66.jpg)
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>
![Page 67: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/67.jpg)
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
![Page 68: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/68.jpg)
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
![Page 69: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/69.jpg)
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
![Page 70: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/70.jpg)
SVG ShimsNone yet
JavaScript shim being developed for Internet Explorer
Adobe SVG Viewer discontinued
![Page 71: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/71.jpg)
![Page 72: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/72.jpg)
![Page 73: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/73.jpg)
SVG Vs. CanvasNeed both!
Canvas
Immediate-mode API
SVG
Retained mode
![Page 74: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/74.jpg)
Ajax History/Bookmarking
![Page 75: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/75.jpg)
Ajax History/BookmarkingBookmark Ajax applications
Respond to back/forward buttons
![Page 76: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/76.jpg)
![Page 77: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/77.jpg)
![Page 78: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/78.jpg)
Ajax History/Bookmarking Example
<body onhashchange="update()">
function update() { alert('The new location is: ' + location.hash);}
![Page 79: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/79.jpg)
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
![Page 80: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/80.jpg)
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
![Page 81: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/81.jpg)
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
![Page 82: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/82.jpg)
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
![Page 83: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/83.jpg)
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/
![Page 84: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/84.jpg)
JavaScript Toolkits
![Page 85: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/85.jpg)
![Page 86: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/86.jpg)
How to Choose an Ajax Framework
XHR
![Page 87: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/87.jpg)
How to Choose an Ajax Framework
XHR
![Page 88: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/88.jpg)
How to Choose an Ajax Framework
![Page 89: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/89.jpg)
The Old Taxonomy
![Page 90: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/90.jpg)
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
![Page 91: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/91.jpg)
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
![Page 92: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/92.jpg)
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
jQueryNew, DOM-centric JavaScript helper
![Page 93: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/93.jpg)
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
![Page 94: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/94.jpg)
The New Taxonomy
![Page 95: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/95.jpg)
Prototype jQuery Dojo Core
The New Taxonomy
![Page 96: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/96.jpg)
Prototype jQuery Dojo Core
Plug-in Communityscripteka.com
Plug-in Communityplugins.jquery.com
Plug-in Communitydojox
The New Taxonomy
![Page 97: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/97.jpg)
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
![Page 98: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/98.jpg)
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
![Page 99: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/99.jpg)
Web FontsAdvanced typography for the web
![Page 100: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/100.jpg)
![Page 101: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/101.jpg)
![Page 102: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/102.jpg)
Web FontsPretty fragmented
Embedded Open Type (EOT)
Internet Explorer
TrueType Fonts
Safari 3.1
SVG Fonts
Safari 3, Firefox 3.1
![Page 103: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/103.jpg)
Web Fonts Example (TTF)
@font-face font-family: "Kimberley"; src: url(kimberle.ttf) format("truetype");}
h1 { font-family: "Kimberley", sans-serif}
![Page 104: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/104.jpg)
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
![Page 105: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/105.jpg)
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)
![Page 106: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/106.jpg)
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
![Page 107: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/107.jpg)
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
![Page 108: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/108.jpg)
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
![Page 109: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/109.jpg)
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
![Page 110: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/110.jpg)
![Page 111: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/111.jpg)
![Page 112: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/112.jpg)
CSSCSS Animations, Reflections, and Masks
CSS 2.1
Selectors
Content/Counters
CSS 3
Selectors
Multicolumn layout
![Page 113: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/113.jpg)
![Page 114: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/114.jpg)
![Page 115: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/115.jpg)
![Page 116: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/116.jpg)
CSS 2.1 Example
<div myattr=”hello”></div>
[myattr|=hello] { background-color: blue;}
![Page 117: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/117.jpg)
CSS Report Card
CSS 2.1
CSS 3CSS Effects
![Page 118: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/118.jpg)
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
![Page 119: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/119.jpg)
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
1Safari 3 only (some in Firefox 3.1)
![Page 120: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/120.jpg)
CSS Report Card
CSS 2.1
CSS 3CSS EffectsNOT READY
1
READY
2
1Safari 3 only (some in Firefox 3.1)
![Page 121: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/121.jpg)
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
![Page 122: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/122.jpg)
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
![Page 123: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/123.jpg)
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
![Page 124: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/124.jpg)
HTML 5
![Page 125: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/125.jpg)
HTML 5Next revision of HTML
![Page 126: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/126.jpg)
HTML 5Next revision of HTML
Two parts
![Page 127: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/127.jpg)
HTML 5Next revision of HTML
Two parts
Document how web currently works
![Page 128: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/128.jpg)
HTML 5Next revision of HTML
Two parts
Document how web currently works
New features
![Page 129: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/129.jpg)
HTML 5 New ModulesDrawing
Client-Side Storage
Offline
Editing
Drag and drop
Messaging/Networking
....And a Pony!
![Page 130: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/130.jpg)
HTML 5 New ModulesDrawing
Client-Side Storage
Offline
Editing
Drag and drop
Messaging/Networking
....And a Pony!
NOT READY
![Page 131: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/131.jpg)
XML WebIntegrated set of technologies based on XML
Runs in the browser
![Page 132: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/132.jpg)
XML Web Report Card
![Page 133: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/133.jpg)
XML Web Report Card
XML
![Page 134: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/134.jpg)
XML Web Report Card
XMLREADY
![Page 135: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/135.jpg)
XML Web Report Card
XML
XSLT
READY
![Page 136: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/136.jpg)
XML Web Report Card
XML
XSLT
READY
READY
![Page 137: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/137.jpg)
XML Web Report Card
XML
XSLT
XPath
READY
READY
![Page 138: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/138.jpg)
XML Web Report Card
XML
XSLT
XPath
READY
READY
READY
![Page 139: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/139.jpg)
XML Web Report Card
XML
XSLT
XPath
CSS/XMLREADY
READY
READY
![Page 140: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/140.jpg)
XML Web Report Card
XML
XSLT
XPath
CSS/XMLREADY
READY
READY
ALMOST
![Page 141: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/141.jpg)
XML Web Report Card
XML
XSLT
XPath
CSS/XML
XHTML
READY
READY
READY
ALMOST
![Page 142: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/142.jpg)
XML Web Report Card
XML
XSLT
XPath
CSS/XML
XHTML
READY
READY
READY
NOT READY
ALMOST
![Page 143: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/143.jpg)
Video on the Web
![Page 144: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/144.jpg)
Video on the WebHTML tag to drop videos into your web page
![Page 145: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/145.jpg)
![Page 146: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/146.jpg)
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);
![Page 147: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/147.jpg)
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
![Page 148: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/148.jpg)
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
![Page 149: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/149.jpg)
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
![Page 150: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/150.jpg)
Even More
![Page 151: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/151.jpg)
Even More
Client-Side Storage
![Page 152: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/152.jpg)
Even More
Client-Side StorageREADY
1
![Page 153: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/153.jpg)
Even More
Client-Side Storage
1 JavaScript shims (Dojo Storage); Gears
READY
1
![Page 154: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/154.jpg)
Even More
Client-Side Storage
Offline1 JavaScript shims (Dojo Storage); Gears
READY
1
![Page 155: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/155.jpg)
Even More
Client-Side Storage
Offline1 JavaScript shims (Dojo Storage); Gears
READY
1
READY
2
![Page 156: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/156.jpg)
Even More
Client-Side Storage
Offline1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
![Page 157: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/157.jpg)
Even More
Client-Side Storage
Offline
X-Domain1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
![Page 158: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/158.jpg)
Even More
Client-Side Storage
Offline
X-Domain1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
READY
3
![Page 159: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/159.jpg)
Even More
Client-Side Storage
Offline
X-Domain3 JSONP
1 JavaScript shims (Dojo Storage); Gears2 Gears
READY
1
READY
2
READY
3
![Page 160: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/160.jpg)
Even More
![Page 161: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/161.jpg)
Even More
Fast JavaScript
![Page 162: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/162.jpg)
Even More
Fast JavaScriptALMOST
1
![Page 163: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/163.jpg)
Even More
Fast JavaScript
1 All browsers but IE (Tracemonkey, V8, etc.)
ALMOST
1
![Page 164: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/164.jpg)
Even More
Fast JavaScript
JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)
ALMOST
1
![Page 165: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/165.jpg)
Even More
Fast JavaScript
JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)
NOT READY
2ALMOST
1
![Page 166: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/166.jpg)
Even More
Fast JavaScript
JavaScript++1 All browsers but IE (Tracemonkey, V8, etc.)2 Still in standards bodies
NOT READY
2ALMOST
1
![Page 167: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/167.jpg)
Take Action
![Page 168: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/168.jpg)
Take Actioncode.google.com
![Page 169: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/169.jpg)
Take Actioncode.google.com
code.google.com/doctype
![Page 170: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/170.jpg)
Take Actioncode.google.com
code.google.com/doctype
ajaxian.com
![Page 171: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/171.jpg)
Take Actioncode.google.com
code.google.com/doctype
ajaxian.com
whatwg.org
![Page 172: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/172.jpg)
Take Actioncode.google.com
code.google.com/doctype
ajaxian.com
whatwg.org
Slides:
![Page 173: State of the Open Webcodinginparadise.org/presentations/State of the... · Canvas HTML Tag + API for drawing. Canvas Example ... CSS Animations, Reflections, and Masks CSS 2.1 Selectors](https://reader034.fdocuments.us/reader034/viewer/2022043006/5f3aba32e5812913fa3dd3db/html5/thumbnails/173.jpg)
State of the Open WebBrad Neuberg, Google