網頁前端⼯程師與室內裝修師傅的相似之處

網⾴頁前端⼯工程師與室內裝修師傅的相似之處 Vexed

http://mvc.tw n 蔡秉諺⽶米蟲 Tsai Ping-‐Yen n 2001.9 -‐ 2007.7
中正資⼯工 n 2007.10 -‐ 2013.9 中華電信 n 2013.9 -‐ 現在 Yahoo Search Vexed 2

http://mvc.tw n 這是我的經驗整理出來的版本什麼是網⾴頁前端？ 3

http://mvc.tw n PM 開需求給 UED 和 BE n BE 依需求提供 API
n UED 依需求提供 Mockup 與素材 n FE 依 Mockup 組合素材與 API 建置網⾴頁我每天的⼯工作 4 PM - Product Manager UED - User Experience Designer BE - Back-end Engineer FE - Front-end Engineer

5 PM 開需求給 UED 和 BE BE 依需求提供 API UED
依需求提供 Mockup 與素材 FE 依 Mockup 組合素材與 API 建置網頁圖⽚片出處：http://www.palantir.net/blog/website-wireframes-making-your-whole-world-better Wireframe Mockup

6 FE 依 Mockup 組合素材與 API 建置網頁這是圖

http://mvc.tw n FE 將 Mockup 翻譯成 HTML CSS JavaScript n 信達雅
n 可信達意⽂文雅 n 做不做得到怎麼做如果做不到為什麼 n 持續與 PM UED BE 溝通 FE 依 Mockup 組合素材與 API 建置網⾴頁 7

http://mvc.tw n ⼊入⾨門容易精通難 n ⼊入⾨門 n 看起來跟 Mockup ⼀一樣就好
n 怎麼做不在意 n 不明就裡 n Copy & Paste n Try & Error 翻譯成 HTML CSS JavaScript 8

http://mvc.tw 溝通協調 9

http://mvc.tw n FE 永遠是問題回報點溝通協調 10 Timeout Server-side
error JavaScript error CSS issue CDN issue Content issue Cache issue Network issue …

http://mvc.tw n 經驗溝通協調 11

http://mvc.tw n ⼊入⾨門 n 看起來跟 Mockup ⼀一樣就好 n 怎麼做不在意
n 不明就裡 n Copy & Paste n Try & Error ⼊入⾨門容易精通難 12

http://mvc.tw n 難關 n Cross-Browser n SEO n Performance n 第三⽅方
Library 出錯 n 資訊安全⼊入⾨門容易精通難 13

http://mvc.tw n 了解不同瀏覽器環境功能與極限 n 瀏覽器、瀏覽器版本、裝置、作業系統、作業系統版本 n BrowserStack n caniuse.com Cross-‐Browser
14 Combo * 5 排列組合

http://mvc.tw n 放棄任何裝置、瀏覽器都是市占率的取捨 n IE6 COUNTDOWN n 台灣 0.8% n 中國
12.5% n 全世界 3.8% (中國佔其中 2.68%) n App Store Distribution n iOS 6 8% n 持續與 PM UED BE 溝通 Cross-‐Browser 15

http://mvc.tw n 統⼀一不同瀏覽器⾏行為 n <!DOCTYPE html> n 使⽤用標準模式繪製網⾴頁 n CSS Reset
& Normalize.css n HTML5 Shiv n IE 6 7 8 ⽀支援 HTML5 標籤 n jQuery 1.x & 2.x n 1.x ⽀支援 IE 6 7 8 Cross-‐Browser 16

http://mvc.tw n Progressive enhancement & graceful degradation n 漸進式加強 & 優雅的降級
n 持續與 PM UED BE 溝通 Cross-‐Browser 17 動畫圓⾓角漸層陰影 … caniuse.com

http://mvc.tw n Responsive Web Design n 響應式網⾴頁設計 n ⽐比⼀一般網⾴頁設計難需更有經驗的 FE
n Mobile Websites vs Responsive Design n 取 & 捨 n 持續與 PM UED BE 溝通 Cross-‐Browser 18

http://mvc.tw n Search Engine Optimization n 搜尋引擎最佳化 n 真正的 SEO 我也不懂
n 我只是讓 Search Engine 看得懂網⾴頁 SEO 19

http://mvc.tw n Search Engine 只看 HTML 裡的字 n 圖⽚片上的字不看 n FLASH
裡的字原則上不看 n 原則？ n JavaScript 裡的字原則上不看 n 原則？ SEO 20

http://mvc.tw n 搞懂 HTML 標籤的語義 n 標籤原⽂文 n <p> -‐> Paragraph
n <ul> -‐> Unordered list n <li> -‐> List item n … n HTML5 Sectioning Elements n 產⽣生網⾴頁 Outline SEO 21 <article> <section> <aside> <nav>

http://mvc.tw n 釐清 HTML 與 CSS 的界線 n 原則上 n 語意留
HTML n 設計放 CSS n CSS Zen Garden n 事實上 n 界線劃哪是⼤大哉問 SEO 22

http://mvc.tw n CSS Architectures n OOCSS n SMACSS n BEM
n Kuro: 漫談 CSS 架構⽅方法 -‐ 以 OOCSS, SMACSS, BEM 為例 SEO 23

http://mvc.tw n 處理動態網⾴頁 n Making AJAX Applications Crawlable n __escape_fragment__
n 善⽤用 history.pushState() n 以 Facebook 為例 SEO 24

http://mvc.tw n Google PageSpeed & YSlow n Steve Souders n Velocity:
O'Reilly Conferences Performance 25

http://mvc.tw n Web Performance Best Practices n 搞懂瀏覽器繪製網⾴頁的流程 n 各種載⼊入 JS
CSS Image 的⽅方式與差別 n 搞懂 HTTP n 計算 HTTP Request 數量 & ⼤大⼩小 n CSS Sprite 、 JS / CSS / Image 合併壓縮、 Gzip 、 … n Cache 機制 n Brower Cache 、 If-‐Modified-‐Since 、 ETag 、 … n Session & Cookie Performance 26

http://mvc.tw n SPDY n Chrome Firefox Opera IE11 Safari 8
n Ihower: A brief introduction to SPDY Performance 27

http://mvc.tw n Bug n jQuery Open Bugs 45 Matches n jQuery
Plugin？ n 其他專案？ n 更多時候是不符預期第三⽅方 Library 28

http://mvc.tw n Trace Code n 改？不改？ n 送 Patch？ n ⾃自建
Library 第三⽅方 Library 29

http://mvc.tw n 重新了解 HTML CSS JavaScript 的基礎 n jQuery 幫你做了哪些事
n DOM n JavaScript 與其它語⾔言的不同之處 n ⾃自動轉型 n Closure n Prototype n … 第三⽅方 Library 30 良葛格 JavaScript 本質部份

http://mvc.tw n XSS n Cross-‐site scripting n Session Hijacking n CSRF
n Cross-‐site request forgery n Session Riding 資訊安全 31

32 Q & A

http://mvc.tw n ⾼高中 n CityFamily n 網路同學會 n 只是想讓字變⾊色 n <font
color="red" >炫</font> n 現在看全都是 XSS n 班網 n 教官室網⾴頁 n IE5 我的網⾴頁前端之路 33

http://mvc.tw n ⼤大學 n 中正計中 n 主管資訊系統 n 教職員數位學習系統 n 全端⼯工程師
n PHP n Sybase n ⼤大專創意競賽網站我的網⾴頁前端之路 34

http://mvc.tw n GAIS Lab n Nopam n NUWeb n NUBlog
n ⾃自建 Cross-‐Browser JavaScript Library 我的網⾴頁前端之路 35

http://mvc.tw n 社會 n 中華電信 n Xuite n Hami+ n XUI
n Yahoo Search 我的網⾴頁前端之路 36

http://mvc.tw n 不是學校教的 n 不是⾃自⼰己選擇的 n 團隊需要各司其職我的網⾴頁前端之路 37

http://mvc.tw 1.  網⾴頁全端轉網⾴頁前端 2.  UED 轉網⾴頁前端 n 各有優缺
n 就是沒有學校教出來的網⾴頁前端市⾯面上的網⾴頁前端 38

http://mvc.tw n Why can’t we find Front End developers? n 為什麼我們找不到前端⼯工程師？
為什麼我們找不到前端⼯工程師？ 39

http://mvc.tw n 臺⼤大資⼯工⼤大學部課程 n 網路及平台服務程式設計 n 選修額滿研究⽣生旁聽現狀開始改變
40

http://mvc.tw n 不是我講的 n Adam: 那些mockup沒告訴你的事網⾴頁前端⼯工程師與室內裝修師傅的相似之處 41

http://mvc.tw n Kuro: 前端⼯工程師如何與團隊合作網⾴頁前端⼯工程師與室內裝修師傅的相似之處 42

http://mvc.tw n ⾃自此之後我都說我是做⽔水電的 n 後來想想 n 我不只做⽔水電 n 我也要漆油漆 n 所以改室內裝修網⾴頁前端⼯工程師與室內裝修師傅的相似之處
43

http://mvc.tw n ⽔水電出問題 n 先 DIY n 不⾏行才叫⽔水電師傅 n 隨便 1200
上看 2000 n 師傅還不⼀一定來網⾴頁前端⼯工程師與室內裝修師傅的相似之處 44

http://mvc.tw n DIY vs. ⽔水電師傅 n ⼊入⾨門 vs. 精通 n 不明就裡
Copy & Paste Try & Error n 看起來跟 Mockup ⼀一樣就好了 n ⽔水電師傅 n 良⼼心事業 n 顧客只會看 n 昧著良⼼心問題不會不⾒見網⾴頁前端⼯工程師與室內裝修師傅的相似之處 45

http://mvc.tw n ⼀一開始⽴立志做⽔水電師傅的少 n ⽴立志做建築師電⼒力⼯工程師室內設計師的多 n ⽔水電做久了也是⼀一⾨門學問
網⾴頁前端⼯工程師與室內裝修師傅的相似之處 46

47 Q & A

http://mvc.tw 好活動需要⽀支持感謝 KKTIX 贊助 twMVC 活動報名平台 48

http://mvc.tw 好輸⼊入法需要露出 49 http://www.iq-t.com/DOWNLOAD/software.asp

http://mvc.tw 好課程需要⽀支持 50 http://skilltree.my

謝謝各位 •  本投影⽚片所包含的商標與⽂文字皆屬原著作者所有。 •  本投影⽚片使⽤用的圖⽚片皆從網路搜尋。 •  本著作係採⽤用姓名標⽰示-⾮非商業性-相同⽅方式分享 3.0 台灣授權。閱讀本授權條款，請到 http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信⾄至Creative
Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. h t t p : / / m v c . t w

網頁前端⼯程師與室內裝修師傅的相似之處

網頁前端⼯程師與室內裝修師傅的相似之處

More Decks by Ping-Yen Tsai

Other Decks in Technology

Featured

Transcript