无名小站首页改版 -渐进增强与css3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

无名小站首页改版 -渐进增强与css3

on

  • 6,082 views

 

Statistics

Views

Total Views
6,082
Views on SlideShare
1,764
Embed Views
4,318

Actions

Likes
9
Downloads
64
Comments
0

12 Embeds 4,318

http://www.d2forum.org 4286
http://www.itfeed.cn 10
http://cache.baidu.com 10
http://getpocket.com 3
http://reader.youdao.com 2
http://www.d2forum.org} {990125733|||pingback 1
http://www.d2forum.org} {784058830|||pingback 1
http://www.d2forum.org} {264819571|||pingback 1
http://www.d2forum.org} {365082092|||pingback 1
http://www.d2forum.org} {867206306|||pingback 1
http://www.d2forum.org} {940520128|||pingback 1
http://www.d2forum.org} {824238615|||pingback 1
More...

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

无名小站首页改版 -渐进增强与css3 Presentation Transcript

  • 1. 無名小站首頁改版 - 漸進增強與CSS3 漸進增強與CSS32011.07.09 Adam Wang Frontend engineer, Yahoo!
  • 2. 大家好,我是Adam也有人叫我「阿當」twitter:@adamp3
  • 3. 我喜歡設計,也喜歡用CSS畫畫http://jsfiddle.net/adamp3/8c98P/24/http://jsfiddle.net/adamp3/NF6TF/27/
  • 4. 我從寶島台灣來Check out this. http://jsfiddle.net/adamp3/nNW6J/
  • 5. 我討厭IE,你呢?
  • 6. Yahoo!前端工程師三年去年開始參與無名小站專案
  • 7. 這三年IE7, 8, 9Firefox 3, 4, 5Opera 9, 10, 11Chrome 0 - 14http://www.okaygeek.com/blog/if-web-browsers-were-kids-on-a-playground.html
  • 8. 主題緣起於今年Yahoo!內部的F2E summit
  • 9. 淘寶的小馬覺得這題目很有趣所以我就來了
  • 10. 是什麼?www.wretch.cc
  • 11. 是牆的另一頭未知的世界
  • 12. UGC (User Generated Content)為主相本 博客 視頻 揪團 嘀咕
  • 13. 靓妹很多
  • 14. 帥哥也很多
  • 15. 讓你從無名小卒變成明星!
  • 16. 50%佔Yahoo!台灣總PV #4Yahoo!全球流量排名 50億單月PV
  • 17. 1999無名小站
  • 18. 2001Internet Explorer 6
  • 19. 2008前一次改版
  • 20. 是時候改版了!
  • 21. 不過礙於很多因素我們只能先改衝擊最小的首頁
  • 22. 提升變色龍廣告質感也可以賣更好的價錢
  • 23. 首頁的用途?
  • 24. 把好的博客推廣出去把重要的資訊突顯出來
  • 25. 這是個好時機來玩一下CSS3(css本來就是讓內容加分的)
  • 26. CSS3哪裡好?
  • 27. 對於畫面呈現來說,HTML5和CSS3都是瀏覽器原生支援可以減少Flash的使用量
  • 28. 更安全更快速更容易維護
  • 29. 最近看到一篇射雕兄的博客「日常工作与新技术」http://lifesinger.wordpress.com/2011/06/12/daily-work-and-new-tech/
  • 30. “Q: 为什么感觉前端发展缓慢?
  • 31. “前端最近一两年,涌现的新技术中,HTML5 和 CSS3 等,是非常有利于UED 前端的价值体现。可恨的是淘宝的大部分线上应用还受限于 IE6-8,缺少真实用武之地,这导致去研究去用的人非常有限,这可能就是感觉前端发展慢的原因之一。
  • 32. 無名也一樣現在還有 76%的用戶使用IE6-8(Yahoo!全球有36%)
  • 33. :(
  • 34. 我們需要踏出一小步才有機會改變
  • 35. 我們真的需要讓每個瀏覽器都看起來一模一樣嗎?http://dowebsitesneedtolookexactlythesameineverybrowser.com
  • 36. 好!那我們就來做吧!(熱血)
  • 37. 你知道的…在大公司…
  • 38. 你必須說服他們•項目經理•交互設計師•視覺設計師•測試工程師•你的老闆
  • 39. 「用戶值得更好的體驗!」
  • 40. 設計師和前端工程師的鴻溝
  • 41. 一份設計圖 很多種瀏覽器
  • 42. CSS3裡有很多新的樣式設計師要怎麼表達?
  • 43. transform: rotate(30deg);transition: all 0.3s ease;(如果你是設計師,可以參考http://matthewlein.com/ceaser/ )
  • 44. 前端工程師做出原型(prototype)主動而且不斷更新地給設計師參考(Life w/o Photoshop: http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop )
  • 45. 像是這樣的鬼東西…http://jsfiddle.net/adamp3/UEnjS/
  • 46. 嘿,阿當。我還是希望這些效果可以出現在IE6• border-radius• rotate• gradients• transition
  • 47. 本日主題:漸進增強ProgressiveEnhancement
  • 48. “電扶梯永遠不會壞Escalator never breaks.
  • 49. 錯誤示範
  • 50. 沒有box-shadow、text-shadow 、border-radius和transition其實也無所謂
  • 51. 設計師:「那漸層呢? 總該要有了吧?」
  • 52. 用 Modernizr做到優雅地漸進增強(http://www.modernizr.com/ )
  • 53. Feature SupportModernizr告訴你瀏覽器支援的程度,而非瀏覽器的版本。(試試看 http://caniuse.com )
  • 54. html.cssgradients .belt {...}html.no-cssgradients .belt {...}if (Modernizr.gradients) {…}
  • 55. 如何運作?偵測HTML5功能偵測樣式是否被套用有興趣的話請參考http://blog.ericsk.org/archives/1444
  • 56. 漸進增強 和 備選機制progressive enhancement& fallbacks
  • 57. 痛苦的備選機制:filter透明度和旋轉實踐
  • 58. 利用:after做出具有透明度的陰影效果
  • 59. 透明度工具組*filter:alphaopacityrgba
  • 60. IE8支援:after,但不支援filter在偽類別上IE9支援rgba,問題解決
  • 61. filter還會有奇妙的z-index問題,請小心使用
  • 62. 來談談CSS3與網頁中文字型吧
  • 63. Google Chrome處理中文漸變和文字陰影有奇妙的結果http://jsfiddle.net/adamp3/gVVdv/
  • 64. 最後我們只好把陰影拿掉(這做法實在不夠牛)
  • 65. @font-face的實用性?4~5MB的檔案尺寸
  • 66. 設計師: 黑體和Sans-serif用戶:細明體和Serif
  • 67. 有趣的消息第六屆『方正獎』中文字體設計大賽(活動網站: http://www.foundertype.com/ztds/ )
  • 68. 差不多要結束了希望大家可以帶點東西回家 http://amazingdata.com/rando m-funny-shit/
  • 69. 先進的瀏覽器*就像高清電視機一開始有了高清電視機,才有高清的電視節目(而且瀏覽器還不用花錢)* modern browser
  • 70. 我們要提供更好的技術和內容來 用戶鼓勵使用先進的瀏覽器http://bbs.bj100.com/pic/view_242401_3?PHPSESSID=vn518eqg1pqn74qjs5r2b67js3
  • 71. 建造電扶梯,不是電梯 http://www.elevatorworld.com
  • 72. IE6 must die.
  • 73. Special thanks to… F2E Summit organizer: mentor: Nicholas Zakas Nate Koechley http://www.flickr.com/photos/fr anksvalli/5166427652
  • 74. 免費的好東西…http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/http://www.colorzilla.com/gradient-editor/http://matthewlein.com/ceaserhttp://caniuse.com/http://css3please.com/http://developer.yahoo.com/yui/theater/
  • 75. 聯絡我about.me/adamp3阿里旺旺:adamp3twitter: @adamp3QQ:2477492661
  • 76. 謝謝大家!