Web Standards
    Canvas, SVG, GeoLocation, Widgets
            by Zi Bin Cheah




                         Opera 2010

M...
OpenWeb stack
                                                   [OGG/ VMS/Dirac]?                        Widgets
        ...
SVG



                         Opera 2010

Monday, April 26, 2010
<svg></svg>
    XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e.
       ...
Monday, April 26, 2010
Monday, April 26, 2010
W3C Standards
                         Search engine friendly
                         Mobile friendly
                   ...
Industry leading SVG support
                                                  SVG 1.1 support (%)


                   Op...
Example !




Monday, April 26, 2010
Canvas



                         Opera 2010

Monday, April 26, 2010
<canvas></canvas>
   The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and
   ...
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPat...
Example Time!




Monday, April 26, 2010
Monday, April 26, 2010
Widgets



                         Opera 2010

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




Monday,...
Monday, April 26, 2010
More Example !




Monday, April 26, 2010
Geolocation



                         Opera 2010

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




Monday, April 26, 2010
More Example !




Monday, April 26, 2010
www.opera.com/developer
                         zibin@opera.com
                         twitter: zibin
Monday, April 26,...
Creative Commons license image

                Phone booth http://www.flickr.com/photos/rickharris/261846074/
           ...
Demo links

                Operating System Chrome using SVG, CSS
                http://people.opera.com/dstorey/user-in...
Upcoming SlideShare
Loading in …5
×

Web Standards @ Opera Talk Oslo

2,058 views

Published on

standards,canvas,geolocation

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,058
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Standards @ Opera Talk Oslo

  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

×