60
一起來談 HTML5 / CSS3 Friday, March 18, 2011
| Date post: | 31-Oct-2014 |
| Category: |
Technology |
| Upload: | zi-bin-cheah |
| View: | 5 times |
| Download: | 2 times |
一起來談 HTML5 / CSS3
Friday, March 18, 2011
http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
互聯網是我發明
Friday, March 18, 2011
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
This machine is a server, DO NOT POWER DOWN!
Friday, March 18, 2011
網路警察
Friday, March 18, 2011
Why do open standards matter?
紅，黃，綠！GO!
Friday, March 18, 2011
13717712538
http://gpssystems.net/wp-content/uploads/2009/11/sao-paulo-traffic-jam.jpg
紅，黃，綠！GO! 堵車！
Friday, March 18, 2011
網路世界
Friday, March 18, 2011
網路世界，盡在瀏覽器
Friday, March 18, 2011
網路世界，盡在瀏覽器
Friday, March 18, 2011
HTML 進化論
Friday, March 18, 2011
HTML5 ＝HTML4潮人
Friday, March 18, 2011
TextHTML5
device element
Canvas
parser3D
Video
HTML5 and friends
http://www.flickr.com/photos/fuyoh/809640616/sizes/o/
widgets
geolocation
Friday, March 18, 2011
source: http://zibin.tehais.com/?p=1641
Video
Friday, 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.com
Friday, 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 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
誰不愛flash？
Friday, March 18, 2011
地理訂位
http://www.dailyhtcblog.com/2010/11/augmented-reality-apps-for-android/
Friday, March 18, 2011
IP定位
Cell-ID基地台三角測
Wi-Fi三角測量定位
GPS定位
Friday, 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
TextWebGL<trend 1>
3D瀏覽器在哪裡？
http://img9.zol.com.cn/desk_pic/big_432/431808.jpg
Friday, March 18, 2011
瀏覽器上實現3D功能
Friday, March 18, 2011
Text
http://devfiles.myopera.com/articles/572/idlist-url.htm
語義
Friday, March 18, 2011
HTML4 / XHTML HTML5
Friday, March 18, 2011
<trend 1>
Device 標簽
http://www.flickr.com/photos/anniehp/4312513225/
Friday, March 18, 2011
<trend 1>
<!DOCTYPE html><h1>Simple web camera display demo</h1><device type="media"/><video autoplay></video><script type="text/javascript">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
CSS3HTML5Semantics Design
Friday, March 18, 2011
CSS3<談一談/>
Friday, March 18, 2011
Borders Background邊框背景
Friday, March 18, 2011
border-radius圓角
border-radius: 25px;
Friday, March 18, 2011
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-radius圓角
Friday, March 18, 2011
border-radius
source: http://zibin.tehais.com/?p=1410
圓角
Friday, March 18, 2011
多背景圖片 multiple background images
Friday, March 18, 2011
background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;
multiple background images多背景圖片
Friday, March 18, 2011
陰影效果
box-shadow: 10px 10px 0px #fff;
box-shadow
Friday, March 18, 2011
box-shadow: 10px 10px 20px #fff;
box-shadow陰影效果
Friday, March 18, 2011
Transitions Transform
轉變
Friday, March 18, 2011
Transitions動態轉變
Friday, 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
@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }
SVG 網絡字型
Friday, March 18, 2011
文字陰影 text-shadow
Friday, March 18, 2011
text-shadow
text-shadow: #000000 10px 10px 19px;
文字陰影
Friday, March 18, 2011
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
text-shadow文字陰影
Friday, March 18, 2011
透明Friday, March 18, 2011
opacity
opacity: 1.0;
透明
opacity: 0.2; opacity: 0.5;
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
zibin AT opera.comtwitter: zibin
Q&A
Friday, March 18, 2011
Creative Commons license imageclaphttp://www.flickr.com/photos/tudor/953584594/spider webhttp://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/nowhttp://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-maximize-profitsshadowhttp://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/transitions transformhttp://www.flickr.com/photos/28481088@N00/1298930743/borders and backgroundhttp://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/web fontshttp://www.flickr.com/photos/sekimura/4363831481/sizes/o/clapping photohttp://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpgsun flowerhttp://www.flickr.com/photos/treyevan/429692359/sizes/l/transitionhttp://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
Friday, March 18, 2011
Demo & articlebackground and borders articleshttp://dev.opera.com/articles/view/css3-border-background-boxshadow/border-radius flower demohttp://people.opera.com/zibin/css3flower/flower.htmltransiitons and transform articlehttp://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/web fonts articlehttp://dev.opera.com/articles/view/seven-web-fonts-showcases/9elements HTML5 demohttp://9elements.com/io/projects/html5/canvas/David’s photobook demohttp://people.opera.com/dstorey/transforms/image-gallery.html
Presentation referenceintroduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Friday, March 18, 2011
![MR MRZMXMRK ]SY XS ')0)&6%8)Taiwan Bamboto Orchestra/ Mei-Bei Elementary School Bamboo Bands ( Music Group ) Talk by : Ms. Dulce Blanca Punzalan, Philippines Talk by: Mr. Munir Vahanti](https://static.documents.pub/doc/80x56/60f7471b9723732380025ffc/mr-mrzmxmrk-sy-xs-068-taiwan-bamboto-orchestra-mei-bei-elementary-school.jpg)
