網站套版最      恨 的幾件事                             何澤清 TSE-CHING HO                            2013/01/13 WEBCONF.TWSunday, Jan...
Sunday, January 13, 13
套版是誰的事?                         HTTP://WWW.SLIDESHARE.NET/LIS186/20130112WEBCONFSunday, January 13, 13
有⽔水很重要,但不要只會修⽔水管                     HTML 5                     CSS / SASS / COMPASS                     JAVASCRIPT / COFF...
HTTPS://SPEAKERDECK.COM/EVENWU/2012-WEB-TECHNOLOGY-BY-RGBA-GROUP                         網⾴頁設計是資訊流的整理                     ...
CODE FOR SYSTEM                                   NOT FOR PAGES                     SCALABLE AND MODULAR                  ...
⽅方法濫⽤用是災難的開始Sunday, January 13, 13
有時候不只是遺尿的問題                     沒有 CSS                     沒有 CSS REST                     沒有 CSS FRAMEWORK               ...
是包了尿布,還會尿床的問題                     沒有 JAVASCRIPT                     FRAMEWORK                     沒有統⼀一的命名規則              ...
有時候我只是想套                                某個⾴頁⾯面的某個組件                                     FORM_WIZARD.HTML                  ...
看起來很有條理Sunday, January 13, 13
其實是個災難                         ⼀一堆跟樣板⾴頁⾯面                          不相干的 CSSSunday, January 13, 13
即使是 EMPTY ⾴頁⾯面                               還是災難                         EMPTY.HTMLSunday, January 13, 13
別忘了 JAVASCRIPT 也有同樣問題                   FORM_WIZARD.HTML    EMPTY.HTML                                      這些都⽤用得到?      ...
Sunday, January 13, 13
要怎樣才不會被幹到爆呢?                         考量應⽤用程式⼯工程師的使⽤用者經驗!Sunday, January 13, 13
設計師,如果能夠                     遵循被社群接受的法則                     ⼀一定要有 EMPTY.HTML ⽤用來單純套 LAYOUT 版⾯面                     每個樣板⾴頁⾯...
其實我只是想舒坦地套個版Sunday, January 13, 13
梗都是別⼈人的,這就是套版。                         最幹的就是套不進去!Sunday, January 13, 13
DEFINED? ME                     何澤清 Tse-Ching Ho                     twitter: @tsechingho                     https://gith...
Upcoming SlideShare
Loading in …5
×

Webconf2013

535 views

Published on

  • Be the first to comment

Webconf2013

  1. 1. 網站套版最 恨 的幾件事 何澤清 TSE-CHING HO 2013/01/13 WEBCONF.TWSunday, January 13, 13
  2. 2. Sunday, January 13, 13
  3. 3. 套版是誰的事? HTTP://WWW.SLIDESHARE.NET/LIS186/20130112WEBCONFSunday, January 13, 13
  4. 4. 有⽔水很重要,但不要只會修⽔水管 HTML 5 CSS / SASS / COMPASS JAVASCRIPT / COFFEESCRIPT SPRITE IMAGES WEB FONTS / ICON FONTS SVG / CANVAS ...... HTTP://CHARACTER.WORKERCN.CN/C/2011/02/09/110209154040128279566.HTMLSunday, January 13, 13
  5. 5. HTTPS://SPEAKERDECK.COM/EVENWU/2012-WEB-TECHNOLOGY-BY-RGBA-GROUP 網⾴頁設計是資訊流的整理 河川整治是很重要的,不然會氾濫成災!Sunday, January 13, 13
  6. 6. CODE FOR SYSTEM NOT FOR PAGES SCALABLE AND MODULAR NAMING CONVENTION ARCHITECTURE FOR CSS USE CLASS OVER ID CATEGORIZATION USE CHILD SELECTOR BASE (.MENU > LI > A) LAYOUT APPLY A CLASS WHEN THE HTML WON’T BE MODULE PREDICTABLE STATE DECOUPLE HTML/CSS THEME HTTPS://SPEAKERDECK.COM/HLB/MAINTAINABLE-CSS-WITH-SASS-AND-COMPASSSunday, January 13, 13
  7. 7. ⽅方法濫⽤用是災難的開始Sunday, January 13, 13
  8. 8. 有時候不只是遺尿的問題 沒有 CSS 沒有 CSS REST 沒有 CSS FRAMEWORK 沒有統⼀一的 CSS 命名規則 沒有 NAMESPACE 沒有依樣板⾴頁⾯面將 CSS 獨 ⽴立成⼩小檔案 HTTPS://SPEAKERDECK.COM/EVENWU/2012-WEB-TECHNOLOGY-BY-RGBA-GROUPSunday, January 13, 13
  9. 9. 是包了尿布,還會尿床的問題 沒有 JAVASCRIPT FRAMEWORK 沒有統⼀一的命名規則 沒有依樣板⾴頁⾯面將 JAVASCRIPT 獨⽴立成⼩小檔案 沒有模組化 沒有 NAMESPACE 沒有 I18N 策略Sunday, January 13, 13
  10. 10. 有時候我只是想套 某個⾴頁⾯面的某個組件 FORM_WIZARD.HTML HTTP://THEMEFOREST.NET/ITEM/MOONCAKE-RESPONSIVE-ADMIN-TEMPLATE/3138068Sunday, January 13, 13
  11. 11. 看起來很有條理Sunday, January 13, 13
  12. 12. 其實是個災難 ⼀一堆跟樣板⾴頁⾯面 不相干的 CSSSunday, January 13, 13
  13. 13. 即使是 EMPTY ⾴頁⾯面 還是災難 EMPTY.HTMLSunday, January 13, 13
  14. 14. 別忘了 JAVASCRIPT 也有同樣問題 FORM_WIZARD.HTML EMPTY.HTML 這些都⽤用得到? 別亂放外掛!Sunday, January 13, 13
  15. 15. Sunday, January 13, 13
  16. 16. 要怎樣才不會被幹到爆呢? 考量應⽤用程式⼯工程師的使⽤用者經驗!Sunday, January 13, 13
  17. 17. 設計師,如果能夠 遵循被社群接受的法則 ⼀一定要有 EMPTY.HTML ⽤用來單純套 LAYOUT 版⾯面 每個樣板⾴頁⾯面都有獨⽴立、專屬的 CSS / JAVASCRIPT 檔案們 每個組件的 CSS / JAVASCRIPT 檔案都能獨⽴立存在、⽅方便組裝 組件請以某⼀一個 CONTAINER 為單位(.WIZARD) 設計師也是要注重 ASSETS 的維護性 注意 3 PARTY 套件的版本差異Sunday, January 13, 13
  18. 18. 其實我只是想舒坦地套個版Sunday, January 13, 13
  19. 19. 梗都是別⼈人的,這就是套版。 最幹的就是套不進去!Sunday, January 13, 13
  20. 20. DEFINED? ME 何澤清 Tse-Ching Ho twitter: @tsechingho https://github.com/ tsechingho Ruby, Rails, NoSQL ⽣生物資訊與醫療系統Sunday, January 13, 13

×