Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
網頁前端⼯程師與室內裝修師傅的相似之處
Search
Ping-Yen Tsai
August 16, 2014
Technology
0
80
網頁前端⼯程師與室內裝修師傅的相似之處
應 DEMO 之邀,於 twMVC 分享。
Ping-Yen Tsai
August 16, 2014
Tweet
Share
More Decks by Ping-Yen Tsai
See All by Ping-Yen Tsai
「台灣報紙新聞」與「台灣即時新聞」
pingyen
0
110
我的工作經驗 (到目前為止)
pingyen
2
410
JavaScript Closure
pingyen
1
100
HTML5 Sectioning Elements
pingyen
0
45
次世代搜尋引擎戰爭
pingyen
0
95
進階 JavaScript
pingyen
0
220
jQuery 入門
pingyen
0
50
Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)
pingyen
0
87
Windows 市集應用程式開發實戰 (使用 JavaScript)
pingyen
0
68
Other Decks in Technology
See All in Technology
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
2
830
Eventual Detection Engineering
ken5scal
0
1.3k
EitherT_with_Future
aoiroaoino
1
1k
技術ブログや登壇資料を秒で作るコツ伝授します
minorun365
PRO
23
5.4k
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
200
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
250
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
300
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
290
Segment Anything Model 2
tenten0727
3
540
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
130
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
890
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
170
Featured
See All Featured
The Invisible Side of Design
smashingmag
295
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Testing 201, or: Great Expectations
jmmastey
36
7k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Teambox: Starting and Learning
jrom
131
8.7k
Documentation Writing (for coders)
carmenintech
65
4.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
Happy Clients
brianwarren
96
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
600
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Transcript
網⾴頁前端⼯工程師與室內裝修師傅的相似之處 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