Your SlideShare is downloading. ×
Web Standards @ Opera Talk Oslo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web Standards @ Opera Talk Oslo

1,054
views

Published on

standards,canvas,geolocation

standards,canvas,geolocation


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

No Downloads
Views
Total Views
1,054
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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