Html5/CSS3 in shanghai 2010

2,338 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,338
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
189
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html5/CSS3 in shanghai 2010

  1. 1. HTML5 & CSS3 2010 Saturday, August 7, 2010
  2. 2. zibin Web Evangelist twitter:zibin Saturday, August 7, 2010
  3. 3. Saturday, August 7, 2010
  4. 4. Saturday, August 7, 2010
  5. 5. Why do open standards matter? Saturday, August 7, 2010
  6. 6. 13717712538 Saturday, August 7, 2010
  7. 7. Saturday, August 7, 2010
  8. 8. Saturday, August 7, 2010
  9. 9. W3C HTML4 HTML XML W3C has no intention to extend HTML4 as such. Instead, further work is focusing on a reformulatoin of HTML in XML 1999 Saturday, August 7, 2010
  10. 10. ... XHTML2 HTML4 XHTML1.0 XHTML1.1. XHTML2 ...while the ancestry of XHTML2 comes from HTML4, XHTML 1.0 and XHTML 1.1. It is not intended to be backward compatible with its earlier versions 2002 Saturday, August 7, 2010
  11. 11. 350 4 5 W3C 2008 http://dev.opera.com/articles/view/mama-w3c-validator-research-2/ Saturday, August 7, 2010
  12. 12. WHAT-WG Saturday, August 7, 2010
  13. 13. < /> HTML5 Text Saturday, August 7, 2010
  14. 14. Text http://devfiles.myopera.com/articles/572/idlist-url.htm Saturday, August 7, 2010
  15. 15. Text Saturday, August 7, 2010
  16. 16. Text Saturday, August 7, 2010
  17. 17. < /> HTML5 Text Saturday, August 7, 2010
  18. 18. <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> Saturday, August 7, 2010
  19. 19. < /> Video source: http://zibin.tehais.com/?p=1641 Saturday, August 7, 2010
  20. 20. < /> CANVAS 3D? Saturday, August 7, 2010
  21. 21. < /> SVG Saturday, August 7, 2010
  22. 22. Saturday, August 7, 2010
  23. 23. < /> Web Forms Text Saturday, August 7, 2010
  24. 24. type="date" Text Saturday, August 7, 2010
  25. 25. demo Saturday, August 7, 2010
  26. 26. < /> Appcache http://dev.opera.com/articles/view/offline-applications-html5-appcache/ Saturday, August 7, 2010
  27. 27. < /> Geolocation Text not html5 Saturday, August 7, 2010
  28. 28. < /> Widgets not html5 Text Saturday, August 7, 2010
  29. 29. W3C Standards Browser Independent Runs on phone, TV, desktop Saturday, August 7, 2010
  30. 30. Saturday, August 7, 2010
  31. 31. demo Saturday, August 7, 2010
  32. 32. HTML5 Semantics CSS3 Design Saturday, August 7, 2010
  33. 33. < /> CSS3 Saturday, August 7, 2010
  34. 34. Borders Background Saturday, August 7, 2010
  35. 35. border-radius border-radius: 25px; Saturday, August 7, 2010
  36. 36. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; Saturday, August 7, 2010
  37. 37. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; Saturday, August 7, 2010
  38. 38. border-radius Saturday, August 7, 2010
  39. 39. border-radius source: http://zibin.tehais.com/?p=1410 Saturday, August 7, 2010
  40. 40. multiple background images Saturday, August 7, 2010
  41. 41. multiple background images background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat; Saturday, August 7, 2010
  42. 42. box-shadow box-shadow: 10px 10px 0px #fff; Saturday, August 7, 2010
  43. 43. box-shadow box-shadow: 10px 10px 20px #fff; Saturday, August 7, 2010
  44. 44. box-shadow width, height: 100px; box-shadow:10px 10px 20px #ff0000; border-radius:60px; Saturday, August 7, 2010
  45. 45. Transitions Transform Saturday, August 7, 2010
  46. 46. Transitions Saturday, August 7, 2010
  47. 47. div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s; } Saturday, August 7, 2010
  48. 48. Transform Saturday, August 7, 2010
  49. 49. Transform - translate -o-transform: translate(50px, 100px); Saturday, August 7, 2010
  50. 50. Transform - scale -o-transform: scale(2.5); Saturday, August 7, 2010
  51. 51. Transform - skew -o-transform: skew(10deg, 20deg) Saturday, August 7, 2010
  52. 52. Transform - rotate -o-transform: rotate(30deg) Saturday, August 7, 2010
  53. 53. Saturday, August 7, 2010
  54. 54. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; } Saturday, August 7, 2010
  55. 55. SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! } Saturday, August 7, 2010
  56. 56. text-shadow Saturday, August 7, 2010
  57. 57. text-shadow text-shadow: #000000 10px 10px 19px; Saturday, August 7, 2010
  58. 58. text-shadow text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; Saturday, August 7, 2010
  59. 59. Saturday, August 7, 2010
  60. 60. Saturday, August 7, 2010
  61. 61. Saturday, August 7, 2010
  62. 62. Saturday, August 7, 2010
  63. 63. Dragonfly JavaScript CSS HTTP Header DOM Saturday, August 7, 2010
  64. 64. Saturday, August 7, 2010
  65. 65. Future is Now Saturday, August 7, 2010
  66. 66. < :-)/> Saturday, August 7, 2010
  67. 67. zibin AT opera.com www.opera.com/developer ( ) zibin.tehais.com( ) twitter: zibin slideshare.net/zibin PPT Saturday, August 7, 2010
  68. 68. love http://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/ 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/ dinosaur http://www.flickr.com/photos/valerianasolaris/3205069930/sizes/l/ 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/ using internet http://farm4.static.flickr.com/3295/2676703205_30cc3322d9_b.jpg me http://www.douban.com/photos/album/30539339/ expo http://www.flickr.com/photos/simonhua/4660243736/sizes/l/in/photostream/ Saturday, August 7, 2010
  69. 69. Demo &   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 Geolocation demo http://people.opera.com/shwetankd/external/demos/demo_geo_googlemap.htm newspaper http://people.opera.com/zibin/newspaper/newspaper_test.html#image1 Saturday, August 7, 2010
  70. 70. introduction to CSS2.1 and CSS3 http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3 Saturday, August 7, 2010

×