• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Taiwan Web Standards Talk 2011
 

Taiwan Web Standards Talk 2011

on

  • 1,332 views

 

Statistics

Views

Total Views
1,332
Views on SlideShare
1,266
Embed Views
66

Actions

Likes
2
Downloads
24
Comments
1

5 Embeds 66

http://t7yang.blogspot.com 49
http://t7yang.serveblog.net 11
http://t7yang.blogspot.tw 4
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

11 of 1 previous next

  • 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 Taiwan Web Standards Talk 2011 Presentation Transcript

    • 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, 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
    • Friday, March 18, 2011
    • GO! Why do open standards matter?Friday, March 18, 2011
    • GO! 13717712538 http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpgFriday, March 18, 2011
    • 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 HTML5 widgets Canvas Text Video geolocation HTML5 and friends http://www.flickr.com/photos/fuyoh/809640616/sizes/o/Friday, March 18, 2011
    • 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> <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
    • <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 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
    • 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.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
    • Friday, March 18, 2011
    • 3D <trend 1> WebGL Text http://img9.zol.com.cn/desk_pic/big_432/431808.jpgFriday, March 18, 2011
    • 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/4312513225/Friday, March 18, 2011
    • <!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
    • Widgets < />Friday, March 18, 2011
    • HTML5 Semantics CSS3 DesignFriday, March 18, 2011
    • < /> 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,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;Friday, March 18, 2011
    • 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-transition-delay: 0s, 0s 2s; }Friday, March 18, 2011
    • Friday, March 18, 2011
    • @font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }Friday, March 18, 2011
    • SVG @font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }Friday, March 18, 2011
    • 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, 2px -25px 18px #f20;Friday, March 18, 2011
    • 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); rgba(255,0,0,0.6); rgba(255,0,0,0.4); rgba(255,0,0,0.2);Friday, March 18, 2011
    • 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/ 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
    • 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