Embed Size (px)
DESCRIPTION
standards,canvas,geolocation
Citation preview
Web Standards
Opera 2010
by Zi Bin Cheah
Canvas, SVG, GeoLocation, Widgets
Monday, April 26, 2010
OpenWeb stack
SVG Vector Graphics
PNG/JPG/GIF Raster Graphics
[OGG/ VMS/Dirac]? Audio & VideoSMIL
Sycronise-ation
Med
ia
DOM Document API
ECMA/JavaScriptBe
havi
our
CSS Style sheets
Pres
enta
tion
XML
HTML 5/XHTML Markup
RDFa Semantics
ARIA AccessibilitySt
ruct
ure
<canvas> Drawing API
Widgets
GeoLoc
Monday, April 26, 2010
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.
interactive or animated)
Monday, April 26, 2010
Monday, April 26, 2010
Monday, April 26, 2010
W3C StandardsSearch engine friendlyMobile friendlyresource friendly
Monday, April 26, 2010
Opera 10
Safari 4
Firefox 3.5
IE 8
0 25 50 75 100
60.40
81.93
93.89
SVG 1.1 support (%)
Source: http://www.codedread.com/svg-support.php
Industry leading SVG support
Monday, April 26, 2010
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
bitmap images.
Monday, April 26, 2010
canvas has standard API methods for drawingctx = 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
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 StandardsBrowser IndependentRuns on phone, TV, desktop
Monday, April 26, 2010
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
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 LawsonClosed and Open platform by David StoreyACID3 test snapshot by David StoreyOpera Unite globe by Oleg Melnychuk
Slides design and contents by Zibin Cheah
Monday, April 26, 2010
Demo links
Operating System Chrome using SVG, CSShttp://people.opera.com/dstorey/user-interfacesvgcss.html
Canvas shooting game, and flower gamehttp://www.benjoffe.com/code/demos/canvascape/http://htmlfive.appspot.com/static/gifter.html
Geolocationhttp://experimenting.in/other/demo_geo_twitter_mashup.htmGeolocation Opera Buildhttp://my.opera.com/core/blog/geolocation-enabled-build
Monday, April 26, 2010
