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

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

on

  • 6,058 views

 

Statistics

Views

Total Views
6,058
Views on SlideShare
1,740
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 无名小站首页改版 -渐进增强与css3 Presentation Transcript

  • 無名小站首頁改版 - 漸進增強與CSS3 漸進增強與CSS32011.07.09 Adam Wang Frontend engineer, Yahoo!
  • 大家好,我是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-playground.html
  • 主題緣起於今年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://www.flickr.com/photos/fr anksvalli/5166427652
  • 免費的好東西…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/
  • 聯絡我about.me/adamp3阿里旺旺:adamp3twitter: @adamp3QQ:2477492661
  • 謝謝大家!