HTML5 / CSS3Friday, March 18, 2011
http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpgFriday, March 18, 2011
This machine is a                                                                                                   server...
Friday, March 18, 2011
GO!                    Why do open                 standards matter?Friday, March 18, 2011
GO!                                13717712538                           http://gpssystems.net/wp-content/uploads/2009/11/...
Friday, March 18, 2011
Friday, March 18, 2011
Friday, March 18, 2011
HTMLFriday, March 18, 2011
HTML5   HTML4Friday, March 18, 2011
device element           3D                                                                       parser                  ...
Video                                 source: http://zibin.tehais.com/?p=1641Friday, March 18, 2011
<object width="425" height="344">      <param name="movie" value="http://www.youtube.com/v/      u1zgFlCw8Aw?fs=1"</param>...
<video src="video.ogg" width="300" height="150"                            controls></video>Friday, March 18, 2011
CANVAS                                  http://www.canvasdemos.comFriday, March 18, 2011
<canvas id="myCanvas" width="300" height="150">                         Fallback content, in case the browser does not sup...
flashFriday, March 18, 2011
http://www.dailyhtcblog.com/2010/11/augmented-reality-apps-for-android/Friday, March 18, 2011
IP                         Wi-Fi                         Cell-ID                                 GPSFriday, March 18, 2011
Friday, March 18, 2011
if     navigator.geolocation                             {                                   navigator.geolocation.getCurr...
Friday, March 18, 2011
3D                         <trend 1>                                WebGL              Text                               ...
3DFriday, March 18, 2011
Text                          http://devfiles.myopera.com/articles/572/idlist-url.htmFriday, March 18, 2011
HTML4 / XHTML   HTML5Friday, March 18, 2011
Device                         <trend 1>                                     http://www.flickr.com/photos/anniehp/431251322...
<!DOCTYPE html>                  <h1>Simple web camera display demo</h1>                  <device type="media"/>          ...
Widgets                         <    />Friday, March 18, 2011
HTML5                         Semantics                                     CSS3                                      Desi...
<   />                         CSS3Friday, March 18, 2011
Borders BackgroundFriday, March 18, 2011
border-radius       border-radius: 25px;Friday, March 18, 2011
border-radius    border-bottom-left-radius: 40px;    border-bottom-right-radius: 40px;Friday, March 18, 2011
border-radius                                         source: http://zibin.tehais.com/?p=1410Friday, March 18, 2011
multiple background imagesFriday, March 18, 2011
multiple background images     background:       url(rose.png) no-repeat 150px -20px,       url(driedrose.png) no-repeat,!...
box-shadow      box-shadow: 10px 10px 0px #fff;Friday, March 18, 2011
box-shadow    box-shadow: 10px 10px 20px #fff;Friday, March 18, 2011
Transitions TransformFriday, March 18, 2011
TransitionsFriday, March 18, 2011
div {     -o-transition-property: background-color,   width, height;     -o-transition-duration: 4s, 8s, 5s;     -o-transi...
Friday, March 18, 2011
@font-face {     src: url(DeutscheZierschrift.ttf) format("truetype");     font-family: "Zierschrift";     font-style: nor...
SVG     @font-face {     !      font-family: Blackout-Midnight;     !      src: url(Blackout-Midnight.ttf) format("truetyp...
text-shadowFriday, March 18, 2011
text-shadow    text-shadow: #000000 10px 10px 19px;Friday, March 18, 2011
text-shadow         text-shadow:         0 0 4px white, 0 -5px 4px #ff3,         2px -10px 6px #fd3, -2px -15px 11px #f80,...
Friday, March 18, 2011
opacity                  opacity: 1.0;    opacity: 0.5;   opacity: 0.2;Friday, March 18, 2011
rgba hsla                                     rgba(255,0,0,1.0);                                     rgba(255,0,0,0.8);   ...
Friday, March 18, 2011
Friday, March 18, 2011
Friday, March 18, 2011
Friday, March 18, 2011
<   :-)/>Friday, March 18, 2011
Q&A                         zibin AT opera.com                         twitter: zibinFriday, March 18, 2011
Creative Commons license image                  clap                  http://www.flickr.com/photos/tudor/953584594/       ...
Demo & article                  background and borders articles                  http://dev.opera.com/articles/view/css3-b...
Upcoming SlideShare
Loading in...5
×

Taiwan Web Standards Talk 2011

1,418

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,418
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
201
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Taiwan Web Standards Talk 2011

  1. 1. HTML5 / CSS3Friday, March 18, 2011
  2. 2. http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpgFriday, March 18, 2011
  3. 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. 4. Friday, March 18, 2011
  5. 5. GO! Why do open standards matter?Friday, March 18, 2011
  6. 6. GO! 13717712538 http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpgFriday, March 18, 2011
  7. 7. Friday, March 18, 2011
  8. 8. Friday, March 18, 2011
  9. 9. Friday, March 18, 2011
  10. 10. HTMLFriday, March 18, 2011
  11. 11. HTML5 HTML4Friday, March 18, 2011
  12. 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. 13. Video source: http://zibin.tehais.com/?p=1641Friday, March 18, 2011
  14. 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. 15. <video src="video.ogg" width="300" height="150" controls></video>Friday, March 18, 2011
  16. 16. CANVAS http://www.canvasdemos.comFriday, March 18, 2011
  17. 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. 18. flashFriday, March 18, 2011
  19. 19. http://www.dailyhtcblog.com/2010/11/augmented-reality-apps-for-android/Friday, March 18, 2011
  20. 20. IP Wi-Fi Cell-ID GPSFriday, March 18, 2011
  21. 21. Friday, March 18, 2011
  22. 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. 23. Friday, March 18, 2011
  24. 24. 3D <trend 1> WebGL Text http://img9.zol.com.cn/desk_pic/big_432/431808.jpgFriday, March 18, 2011
  25. 25. 3DFriday, March 18, 2011
  26. 26. Text http://devfiles.myopera.com/articles/572/idlist-url.htmFriday, March 18, 2011
  27. 27. HTML4 / XHTML HTML5Friday, March 18, 2011
  28. 28. Device <trend 1> http://www.flickr.com/photos/anniehp/4312513225/Friday, March 18, 2011
  29. 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. 30. Widgets < />Friday, March 18, 2011
  31. 31. HTML5 Semantics CSS3 DesignFriday, March 18, 2011
  32. 32. < /> CSS3Friday, March 18, 2011
  33. 33. Borders BackgroundFriday, March 18, 2011
  34. 34. border-radius border-radius: 25px;Friday, March 18, 2011
  35. 35. border-radius border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;Friday, March 18, 2011
  36. 36. border-radius source: http://zibin.tehais.com/?p=1410Friday, March 18, 2011
  37. 37. multiple background imagesFriday, March 18, 2011
  38. 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. 39. box-shadow box-shadow: 10px 10px 0px #fff;Friday, March 18, 2011
  40. 40. box-shadow box-shadow: 10px 10px 20px #fff;Friday, March 18, 2011
  41. 41. Transitions TransformFriday, March 18, 2011
  42. 42. TransitionsFriday, March 18, 2011
  43. 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. 44. Friday, March 18, 2011
  45. 45. @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }Friday, March 18, 2011
  46. 46. SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }Friday, March 18, 2011
  47. 47. text-shadowFriday, March 18, 2011
  48. 48. text-shadow text-shadow: #000000 10px 10px 19px;Friday, March 18, 2011
  49. 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. 50. Friday, March 18, 2011
  51. 51. opacity opacity: 1.0; opacity: 0.5; opacity: 0.2;Friday, March 18, 2011
  52. 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. 53. Friday, March 18, 2011
  54. 54. Friday, March 18, 2011
  55. 55. Friday, March 18, 2011
  56. 56. Friday, March 18, 2011
  57. 57. < :-)/>Friday, March 18, 2011
  58. 58. Q&A zibin AT opera.com twitter: zibinFriday, March 18, 2011
  59. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×