standards,canvas,geolocation

1. Web Standards
Canvas, SVG, GeoLocation, Widgets
by Zi Bin Cheah
Opera 2010
Monday, April 26, 2010

2. OpenWeb stack
[OGG/ VMS/Dirac]? Widgets
Audio & Video
SMIL
Media
Sycronise-
SVG PNG/JPG/GIF <canvas>
ation
Vector Graphics Raster Graphics Drawing API
ECMA/ GeoLoc
Behaviour
DOM
Document API JavaScript
Presentation
CSS
Style sheets
Structure
XML HTML 5/XHTML RDFa ARIA
Markup Semantics Accessibility
Monday, April 26, 2010

3. SVG
Opera 2010
Monday, April 26, 2010

4. <svg></svg>
XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e.
interactive or animated)
Monday, April 26, 2010

5. Monday, April 26, 2010

6. Monday, April 26, 2010

7. W3C Standards
Search engine friendly
Mobile friendly
resource friendly
Monday, April 26, 2010

8. Industry leading SVG support
SVG 1.1 support (%)
Opera 10 93.89
Safari 4 81.93
Firefox 3.5 60.40
IE 8
0 25 50 75 100
Source: http://www.codedread.com/svg-support.php
Monday, April 26, 2010

9. Example !
Monday, April 26, 2010

10. Canvas
Opera 2010
Monday, April 26, 2010

11. <canvas></canvas>
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and
bitmap images.
Monday, April 26, 2010

12. canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
and loads of other exciting functions – if you like maths
and stuff
Monday, April 26, 2010

13. Example Time!
Monday, April 26, 2010

14. Monday, April 26, 2010

15. Widgets
Opera 2010
Monday, April 26, 2010

16. Monday, April 26, 2010

17. Monday, April 26, 2010

18. W3C Standards
Browser Independent
Runs on phone, TV, desktop
Monday, April 26, 2010

19. Monday, April 26, 2010

20. More Example !
Monday, April 26, 2010

21. Geolocation
Opera 2010
Monday, April 26, 2010

22. Monday, April 26, 2010

23. A set of API to retrieve location
Monday, April 26, 2010

24. More Example !
Monday, April 26, 2010

25. www.opera.com/developer
zibin@opera.com
twitter: zibin
Monday, April 26, 2010

26. Creative Commons license image
Phone booth http://www.flickr.com/photos/rickharris/261846074/
Speedometer: http://www.flickr.com/photos/adc/391594014/
Danish sockets: http://www.flickr.com/photos/xoxoryan/3767746478/
People Globe http://www.flickr.com/photos/linhngan/2645589939/
Norwegian mountains
Baby face http://www.flickr.com/photos/hypertypos/
Baby face 2 http://www.flickr.com/photos/dq090702/
World map http://www.flickr.com/photos/kahtava/
Rojak http://www.flickr.com/photos/stuart_spivack/
Other Slides/images
HTML5 scientist by Bruce Lawson
Closed and Open platform by David Storey
ACID3 test snapshot by David Storey
Opera Unite globe by Oleg Melnychuk
Slides design and contents by Zibin Cheah
Monday, April 26, 2010

27. Demo links
Operating System Chrome using SVG, CSS
http://people.opera.com/dstorey/user-interfacesvgcss.html
Canvas shooting game, and flower game
http://www.benjoffe.com/code/demos/canvascape/
http://htmlfive.appspot.com/static/gifter.html
Geolocation
http://experimenting.in/other/demo_geo_twitter_mashup.htm
Geolocation Opera Build
http://my.opera.com/core/blog/geolocation-enabled-build
Monday, April 26, 2010