Taiwan Web Standards Talk 2011
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Taiwan Web Standards Talk 2011

on

  • 1,436 views

 

Statistics

Views

Total Views
1,436
Views on SlideShare
1,369
Embed Views
67

Actions

Likes
2
Downloads
201
Comments
1

5 Embeds 67

http://t7yang.blogspot.com 49
http://t7yang.serveblog.net 11
http://t7yang.blogspot.tw 5
http://feeds.feedburner.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Taiwan Web Standards Talk 2011 Presentation Transcript

  • 1. HTML5 / CSS3Friday, March 18, 2011
  • 2. http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpgFriday, March 18, 2011
  • 3. This machine is a server, DO NOT POWER DOWN! 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.jpgFriday, March 18, 2011
  • 4. Friday, March 18, 2011
  • 5. GO! Why do open standards matter?Friday, March 18, 2011
  • 6. GO! 13717712538 http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpgFriday, March 18, 2011
  • 7. Friday, March 18, 2011
  • 8. Friday, March 18, 2011
  • 9. Friday, March 18, 2011
  • 10. HTMLFriday, March 18, 2011
  • 11. HTML5 HTML4Friday, March 18, 2011
  • 12. device element 3D parser HTML5 widgets Canvas Text Video geolocation HTML5 and friends http://www.flickr.com/photos/fuyoh/809640616/sizes/o/Friday, March 18, 2011
  • 13. Video source: http://zibin.tehais.com/?p=1641Friday, March 18, 2011
  • 14. <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/ u1zgFlCw8Aw?fs=1"</param> <param name="allowFullScreen" value="true"></param> <param name="allowScriptAccess" value="always"></param> <embed src="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="425" height="344"> </embed> </object>Friday, March 18, 2011
  • 15. <video src="video.ogg" width="300" height="150" controls></video>Friday, March 18, 2011
  • 16. CANVAS http://www.canvasdemos.comFriday, March 18, 2011
  • 17. <canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas> // Get a reference to the element. var elem = document.getElementById(myCanvas); // Always check for properties and methods, to make sure your code doesnt break // in other browsers. if (elem && elem.getContext) { // Get the 2d context. // Remember: you can only initialize one context per element. var context = elem.getContext(2d); if (context) { // You are done! Now you can draw your first rectangle. // You only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillRect(0, 0, 150, 100); } }Friday, March 18, 2011
  • 18. flashFriday, March 18, 2011
  • 19. http://www.dailyhtcblog.com/2010/11/augmented-reality-apps-for-android/Friday, March 18, 2011
  • 20. IP Wi-Fi Cell-ID GPSFriday, March 18, 2011
  • 21. Friday, March 18, 2011
  • 22. if navigator.geolocation { navigator.geolocation.getCurrentPosition successFunction , errorFunction ; } else { alert “no support” ; } function successFunction position { var lat = position.coords.latitude; var long = position.coords.longitude; alert Your latitude is :+lat+ and longitude is +long ; }Friday, March 18, 2011
  • 23. Friday, March 18, 2011
  • 24. 3D <trend 1> WebGL Text http://img9.zol.com.cn/desk_pic/big_432/431808.jpgFriday, March 18, 2011
  • 25. 3DFriday, March 18, 2011
  • 26. Text http://devfiles.myopera.com/articles/572/idlist-url.htmFriday, March 18, 2011
  • 27. HTML4 / XHTML HTML5Friday, March 18, 2011
  • 28. Device <trend 1> http://www.flickr.com/photos/anniehp/4312513225/Friday, March 18, 2011
  • 29. <!DOCTYPE html> <h1>Simple web camera display demo</h1> <device type="media"/> <video autoplay></video> <script type="text/javascript"> <trend 1> var device = document.getElementsByTagName(device)[0], video = document.getElementsByTagName(video)[0]; device.addEventListener(change, function() { video.src = device.data; }, true); </script>Friday, March 18, 2011
  • 30. Widgets < />Friday, March 18, 2011
  • 31. HTML5 Semantics CSS3 DesignFriday, March 18, 2011
  • 32. < /> CSS3Friday, March 18, 2011
  • 33. Borders BackgroundFriday, March 18, 2011
  • 34. border-radius border-radius: 25px;Friday, March 18, 2011
  • 35. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;Friday, March 18, 2011
  • 36. border-radius source: http://zibin.tehais.com/?p=1410Friday, March 18, 2011
  • 37. multiple background imagesFriday, March 18, 2011
  • 38. multiple background images background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;Friday, March 18, 2011
  • 39. box-shadow box-shadow: 10px 10px 0px #fff;Friday, March 18, 2011
  • 40. box-shadow box-shadow: 10px 10px 20px #fff;Friday, March 18, 2011
  • 41. Transitions TransformFriday, March 18, 2011
  • 42. TransitionsFriday, March 18, 2011
  • 43. div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s; }Friday, March 18, 2011
  • 44. Friday, March 18, 2011
  • 45. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }Friday, March 18, 2011
  • 46. SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }Friday, March 18, 2011
  • 47. text-shadowFriday, March 18, 2011
  • 48. text-shadow text-shadow: #000000 10px 10px 19px;Friday, March 18, 2011
  • 49. text-shadow text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;Friday, March 18, 2011
  • 50. Friday, March 18, 2011
  • 51. opacity opacity: 1.0; opacity: 0.5; opacity: 0.2;Friday, March 18, 2011
  • 52. rgba hsla rgba(255,0,0,1.0); rgba(255,0,0,0.8); rgba(255,0,0,0.6); rgba(255,0,0,0.4); rgba(255,0,0,0.2);Friday, March 18, 2011
  • 53. Friday, March 18, 2011
  • 54. Friday, March 18, 2011
  • 55. Friday, March 18, 2011
  • 56. Friday, March 18, 2011
  • 57. < :-)/>Friday, March 18, 2011
  • 58. Q&A zibin AT opera.com twitter: zibinFriday, March 18, 2011
  • 59. 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, March 18, 2011
  • 60. Demo & article 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-3Friday, March 18, 2011