The document provides an overview of browser and web technology including a brief history from the first World Wide Web server to modern HTML5 capabilities. It discusses the evolution of HTML over time from early versions to HTML5, and new features in HTML5 like video, canvas, forms, geolocation and widgets. It also covers CSS3 features such as border-radius, box-shadow, text-shadow and web fonts. The document emphasizes that the future of the web is now enabled by these new HTML5 and CSS3 technologies.

1. Browser and Web Technology
browser and web technology: a brief
overview of everything
http://www.flickr.com/photos/suzijane/243962216/sizes/o/
Friday, October 1, 2010

2. Hej hej
zibin
Web Evangelist
twitter:zibin
http://www.slideshare.net/zibin
Friday, October 1, 2010

3. God bless Internet
http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
Friday, October 1, 2010

4. 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
Friday, October 1, 2010

5. W3C is WWW’s standards police
Friday, October 1, 2010

6. Why do open
Red, orange, green...Standards GO!
standards matter?
Friday, October 1, 2010

7. When Standards go wrong
13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
Friday, October 1, 2010

8. Everything you need
Friday, October 1, 2010

9. Everything you need...now runs in a browser
Friday, October 1, 2010

10. Evolution of HTML
Friday, October 1, 2010

11. HTML5 = HTML (with bling)
Friday, October 1, 2010

12. Web Workers
Web Forms
Cross Document Messaging
HTML5
widgets Canvas
Text
Video
geolocation
HTML5
and friends
http://www.flickr.com/photos/fuyoh/809640616/sizes/o/
Friday, October 1, 2010

13. Video
source: http://zibin.tehais.com/?p=1641
Friday, October 1, 2010

14. 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-flash"></embed>
Friday, October 1, 2010

15. Video
<video src="video.ogg" width="300" height="150"
controls></video>
Friday, October 1, 2010

16. Canvas
Friday, October 1, 2010

17. SVG
Friday, October 1, 2010

18. Friday, October 1, 2010

19. Web Forms
Text
type="date"
Friday, October 1, 2010

20. Appcache
Web Storage
WebDB
http://dev.opera.com/articles/view/offline-applications-html5-appcache/
http://www.flickr.com/photos/bfionline/2380398365/
Friday, October 1, 2010

21. Geolocation
http://www.flickr.com/photos/turatti/4550842025/sizes/m/
Friday, October 1, 2010

22. Widgets
Friday, October 1, 2010

23. Widgets on desktop, TV, mobile....fridge?
Friday, October 1, 2010

24. CSS3
Friday, October 1, 2010

25. border-radius aka rounded-corners
border-radius: 25px;
Friday, October 1, 2010

26. border-radius aka rounded-corners
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
Friday, October 1, 2010

27. border-radius aka rounded-corners
Friday, October 1, 2010

28. box-shadow
box-shadow: 10px 10px 0px #fff;
Friday, October 1, 2010

29. box-shadow
box-shadow: 10px 10px 20px #fff;
Friday, October 1, 2010

30. Web fonts
Friday, October 1, 2010

31. Friday, October 1, 2010

32. text-shadow: #000000 10px 10px 19px;
Friday, October 1, 2010

33. 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

34. p le
x a m
E
CSS3 + HTML5
Friday, October 1, 2010

35. Future is now
Friday, October 1, 2010

36. <Thank you:-)/>
Friday, October 1, 2010

37. Q&A
zibin AT opera.com
twitter: zibin
Friday, October 1, 2010

38. 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/
Friday, October 1, 2010

39. 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
Friday, October 1, 2010