Browsers & Web Technology - an Opera talk
5 likes•4,719 views
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.
Browsers & Web Technology - an Opera talk
- 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
- 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