Taiwan Web Standards Talk 2011
•
2 likes•1,402 views
This document provides an overview of HTML5 and CSS3 features including new semantic HTML5 elements, multimedia capabilities like video and canvas, geolocation, and CSS3 properties for styling like borders, backgrounds, shadows, fonts, transitions and transforms. It includes code examples and screenshots to illustrate these new capabilities.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Taiwan Web Standards Talk 2011
Similar to Taiwan Web Standards Talk 2011 (20)
More from Zi Bin Cheah
More from Zi Bin Cheah (18)
Recently uploaded
Recently uploaded (20)
Taiwan Web Standards Talk 2011
- 1. HTML5 / CSS3 Friday, 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.jpg Friday, 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.jpg Friday, March 18, 2011
- 7. Friday, March 18, 2011
- 8. Friday, March 18, 2011
- 9. Friday, March 18, 2011
- 10. HTML Friday, March 18, 2011
- 11. HTML5 HTML4 Friday, 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=1641 Friday, 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.com Friday, 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 doesn't 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. flash Friday, March 18, 2011
- 20. IP Wi-Fi Cell-ID GPS Friday, 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.jpg Friday, March 18, 2011
- 25. 3D Friday, March 18, 2011
- 26. Text http://devfiles.myopera.com/articles/572/idlist-url.htm Friday, March 18, 2011
- 27. HTML4 / XHTML HTML5 Friday, 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 Design Friday, March 18, 2011
- 32. < /> CSS3 Friday, March 18, 2011
- 33. Borders Background Friday, 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=1410 Friday, March 18, 2011
- 37. multiple background images Friday, 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 Transform Friday, March 18, 2011
- 42. Transitions Friday, 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-shadow Friday, 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: zibin Friday, 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-3 Friday, March 18, 2011