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

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

5,847

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,847
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
65
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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

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

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

×