Browsers & Web Technology - an Opera talk

Browser and Web Technology

browser and web technology: a brief
overview of everything

http://www.ﬂickr.com/photos/suzijane/243962216/sizes/o/

Friday, October 1, 2010

Hej hej

zibin
Web Evangelist

twitter:zibin
http://www.slideshare.net/zibin


God bless Internet

http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg

that’s the whole universe WWW

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

W3C is WWW’s standards police


Why do open
Red, orange, green...Standards GO!

standards matter?


When Standards go wrong

13717712538

http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-trafﬁc-jam.jpg


Everything you need


Everything you need...now runs in a browser


Evolution of HTML

HTML5 = HTML (with bling)

Web Workers

Web Forms
Cross Document Messaging

HTML5
widgets Canvas

Text
Video

geolocation

HTML5
and friends
http://www.ﬂickr.com/photos/fuyoh/809640616/sizes/o/


Video

source: http://zibin.tehais.com/?p=1641


Video

<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-ﬂash"></embed>


Video

<video src="video.ogg" width="300" height="150"
controls></video>


Canvas


SVG


Web Forms

Text

type="date"


Appcache

Web Storage

WebDB

http://dev.opera.com/articles/view/offline-applications-html5-appcache/

http://www.flickr.com/photos/bfionline/2380398365/


Geolocation

http://www.ﬂickr.com/photos/turatti/4550842025/sizes/m/


Widgets


Widgets on desktop, TV, mobile....fridge?


border-radius aka rounded-corners

border-radius: 25px;



border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;


box-shadow

box-shadow: 10px 10px 0px #fff;


box-shadow

box-shadow: 10px 10px 20px #fff;


Web fonts

text-shadow: #000000 10px 10px 19px;


text-shadow:
0 0 4px white, 0 -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -25px 18px #f20;


p le
x a m
E

CSS3 + HTML5

Future is now


Q&A

zibin AT opera.com
twitter: zibin


Creative Commons license image
clap
http://www.flickr.com/photos/tudor/953584594/
spider web
http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/
now
http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-
maximize-profits
shadow
http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/
transitions transform
http://www.flickr.com/photos/28481088@N00/1298930743/
borders and background
http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/
web fonts
http://www.flickr.com/photos/sekimura/4363831481/sizes/o/
clapping photo
http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg
sun flower
http://www.flickr.com/photos/treyevan/429692359/sizes/l/
transition
http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/


Demo & artlcle
background and borders articles
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
border-radius flower demo
http://people.opera.com/zibin/css3flower/flower.html
transiitons and transform article
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
web fonts article
http://dev.opera.com/articles/view/seven-web-fonts-showcases/
9elements HTML5 demo
http://9elements.com/io/projects/html5/canvas/
David’s photobook demo
http://people.opera.com/dstorey/transforms/image-gallery.html

Presentation reference
introduction to CSS2.1 and CSS3
http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3


Browsers & Web Technology - an Opera talk

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Browsers & Web Technology - an Opera talk

Similar to Browsers & Web Technology - an Opera talk (20)

More from Zi Bin Cheah

More from Zi Bin Cheah (12)

Recently uploaded

Recently uploaded (20)

Browsers & Web Technology - an Opera talk