Browsers & Web Technology - an Opera talk
39
browser and web technology: a brief overview of everything Browser and Web Technology http://www.flickr.com/photos/suzijane/243962216/sizes/o/ Friday, October 1, 2010
-
Upload
zi-bin-cheah -
Category
Technology
-
view
5.968 -
download
0
Transcript of Browsers & Web Technology - an Opera talk
browser and web technology: a brief overview of everything
Browser and Web Technology
http://www.flickr.com/photos/suzijane/243962216/sizes/o/
Friday, October 1, 2010
zibinWeb Evangelist
twitter:zibinhttp://www.slideshare.net/zibin
Hej hej
Friday, October 1, 2010
http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
God bless Internet
Friday, October 1, 2010
http://obamapacman.com/wp-content/uploads/2009/08/First-World-Wide-Web-Server-at-CERN-made-possible-by-Tim-Berners-Lee-hosted-on-Steve-Jobs-NeXT-workstation-computer-300x225.jpg
that’s the whole universe WWW
Friday, October 1, 2010
W3C is WWW’s standards police
Friday, October 1, 2010
Why do open standards matter?
Red, orange, green...Standards GO!
Friday, October 1, 2010
13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
When Standards go wrong
Friday, October 1, 2010
Everything you need
Friday, October 1, 2010
Everything you need...now runs in a browser
Friday, October 1, 2010
Evolution of HTML
Friday, October 1, 2010
HTML5 = HTML (with bling)
Friday, October 1, 2010
TextHTML5
Web Workers
Canvas
Cross Document MessagingWeb Forms
Video
HTML5 and friends
http://www.flickr.com/photos/fuyoh/809640616/sizes/o/
widgets
geolocation
Friday, October 1, 2010
source: http://zibin.tehais.com/?p=1641
Video
Friday, October 1, 2010
<embed src="http://player.youku.com/player.php/sid/XMTk1NjY4NDc2/v.swf" quality="high" width="480"
height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-
shockwave-flash"></embed>
Video
Friday, October 1, 2010
<video src="video.ogg" width="300" height="150" controls></video>
Video
Friday, October 1, 2010
Canvas
Friday, October 1, 2010
SVG
Friday, October 1, 2010
Friday, October 1, 2010
Text
type="date"
Web Forms
Friday, October 1, 2010
http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Appcache
Web Storage
WebDB
http://www.flickr.com/photos/bfionline/2380398365/
Friday, October 1, 2010
Geolocation
http://www.flickr.com/photos/turatti/4550842025/sizes/m/
Friday, October 1, 2010
Widgets
Friday, October 1, 2010
Widgets on desktop, TV, mobile....fridge?
Friday, October 1, 2010
CSS3 Friday, October 1, 2010
border-radius aka rounded-corners
border-radius: 25px;
Friday, October 1, 2010
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Friday, October 1, 2010
border-radius aka rounded-corners
Friday, October 1, 2010
box-shadow
box-shadow: 10px 10px 0px #fff;
Friday, October 1, 2010
box-shadow
box-shadow: 10px 10px 20px #fff;
Friday, October 1, 2010
Web fontsFriday, October 1, 2010
Friday, October 1, 2010
text-shadow: #000000 10px 10px 19px;
Friday, October 1, 2010
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
Friday, October 1, 2010
CSS3 + HTML5 Exam
ple
Friday, October 1, 2010
Future is now
Friday, October 1, 2010
<Thank you:-)/>
Friday, October 1, 2010
zibin AT opera.comtwitter: zibin
Q&A
Friday, October 1, 2010
Creative Commons license imageclaphttp://www.flickr.com/photos/tudor/953584594/spider webhttp://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/nowhttp://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-maximize-profitsshadowhttp://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/transitions transformhttp://www.flickr.com/photos/28481088@N00/1298930743/borders and backgroundhttp://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/web fontshttp://www.flickr.com/photos/sekimura/4363831481/sizes/o/clapping photohttp://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpgsun flowerhttp://www.flickr.com/photos/treyevan/429692359/sizes/l/transitionhttp://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
Friday, October 1, 2010
Demo & artlclebackground and borders articleshttp://dev.opera.com/articles/view/css3-border-background-boxshadow/border-radius flower demohttp://people.opera.com/zibin/css3flower/flower.htmltransiitons and transform articlehttp://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/web fonts articlehttp://dev.opera.com/articles/view/seven-web-fonts-showcases/9elements HTML5 demohttp://9elements.com/io/projects/html5/canvas/David’s photobook demohttp://people.opera.com/dstorey/transforms/image-gallery.html
Presentation referenceintroduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Friday, October 1, 2010
