Your SlideShare is downloading. ×
Browsers & Web Technology - an Opera talk
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Browsers & Web Technology - an Opera talk

5,925
views

Published on

Published in: Technology

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,925
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
157
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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