Submit Search
Upload
前端工程與Rwd _ 中原大學資管系
•
Download as PPTX, PDF
•
3 likes
•
930 views
彭其捷 Jack
Follow
在中原資管的演講,內容是一些關於之前擔任前端工程師的經驗分享,以及最近需求很大的手機版網頁 RWD 設計概念
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 49
Download now
Recommended
資料視覺化 (科智企業股份有限公司 內訓課程)
資料視覺化 (科智企業股份有限公司 內訓課程)
彭其捷 Jack
2012 08 24 backbone_2
2012 08 24 backbone_2
彭其捷 Jack
Serv box金點設計獎簡報 v2.0
Serv box金點設計獎簡報 v2.0
彭其捷 Jack
Mobile ux
Mobile ux
彭其捷 Jack
十年前~十年後
十年前~十年後
彭其捷 Jack
2012 07 24 backbone_1
2012 07 24 backbone_1
彭其捷 Jack
致勝談領導八金律
致勝談領導八金律
彭其捷 Jack
FINDIT 平台介紹
FINDIT 平台介紹
彭其捷 Jack
Recommended
資料視覺化 (科智企業股份有限公司 內訓課程)
資料視覺化 (科智企業股份有限公司 內訓課程)
彭其捷 Jack
2012 08 24 backbone_2
2012 08 24 backbone_2
彭其捷 Jack
Serv box金點設計獎簡報 v2.0
Serv box金點設計獎簡報 v2.0
彭其捷 Jack
Mobile ux
Mobile ux
彭其捷 Jack
十年前~十年後
十年前~十年後
彭其捷 Jack
2012 07 24 backbone_1
2012 07 24 backbone_1
彭其捷 Jack
致勝談領導八金律
致勝談領導八金律
彭其捷 Jack
FINDIT 平台介紹
FINDIT 平台介紹
彭其捷 Jack
"I will build My church and the gates of hell shall not prevail agaist it"
"I will build My church and the gates of hell shall not prevail agaist it"
SSMC
Kenkuli
Kenkuli
tia kemppinen
Simeon's bucket list
Simeon's bucket list
SSMC
Linkedin Gen Script
Linkedin Gen Script
howardhuang
PERFIL ALUMNE DEL SEFED
PERFIL ALUMNE DEL SEFED
fjsa2sa4
Technologies and processes
Technologies and processes
guest743866
04 17 kingdom restoration
04 17 kingdom restoration
SSMC
Coding Dojo - Surrey Rubyists #2 - 26 April 2011
Coding Dojo - Surrey Rubyists #2 - 26 April 2011
Gavin Heavyside
Solo or together
Solo or together
SSMC
Audience Evaluation
Audience Evaluation
guest743866
Safa
Safa
BlueCherryBlossom
Presentation web 2.0
Presentation web 2.0
maucgg80
UC Berkeley
UC Berkeley
philipmalonecody
Horaciones Pasado To Be
Horaciones Pasado To Be
afertale137
Orientazioa kontrol txartela
Orientazioa kontrol txartela
Esther
Raising godly children 19 jun 15
Raising godly children 19 jun 15
SSMC
Silk leadership lab_januari_2015_brochure
Silk leadership lab_januari_2015_brochure
Silk Lab
Htdf Presentation For Linked In
Htdf Presentation For Linked In
guest2b77271
True Submission
True Submission
Fanar
Judgement or discernment 18 august 2013 csg
Judgement or discernment 18 august 2013 csg
SSMC
別傻了 你就是不寫測試才會沒時間!CL ft. Hamastar.pdf
別傻了 你就是不寫測試才會沒時間!CL ft. Hamastar.pdf
Yu-Song Syu
琬萱的自我介紹
琬萱的自我介紹
Cindy Cheng
More Related Content
Viewers also liked
"I will build My church and the gates of hell shall not prevail agaist it"
"I will build My church and the gates of hell shall not prevail agaist it"
SSMC
Kenkuli
Kenkuli
tia kemppinen
Simeon's bucket list
Simeon's bucket list
SSMC
Linkedin Gen Script
Linkedin Gen Script
howardhuang
PERFIL ALUMNE DEL SEFED
PERFIL ALUMNE DEL SEFED
fjsa2sa4
Technologies and processes
Technologies and processes
guest743866
04 17 kingdom restoration
04 17 kingdom restoration
SSMC
Coding Dojo - Surrey Rubyists #2 - 26 April 2011
Coding Dojo - Surrey Rubyists #2 - 26 April 2011
Gavin Heavyside
Solo or together
Solo or together
SSMC
Audience Evaluation
Audience Evaluation
guest743866
Safa
Safa
BlueCherryBlossom
Presentation web 2.0
Presentation web 2.0
maucgg80
UC Berkeley
UC Berkeley
philipmalonecody
Horaciones Pasado To Be
Horaciones Pasado To Be
afertale137
Orientazioa kontrol txartela
Orientazioa kontrol txartela
Esther
Raising godly children 19 jun 15
Raising godly children 19 jun 15
SSMC
Silk leadership lab_januari_2015_brochure
Silk leadership lab_januari_2015_brochure
Silk Lab
Htdf Presentation For Linked In
Htdf Presentation For Linked In
guest2b77271
True Submission
True Submission
Fanar
Judgement or discernment 18 august 2013 csg
Judgement or discernment 18 august 2013 csg
SSMC
Viewers also liked
(20)
"I will build My church and the gates of hell shall not prevail agaist it"
"I will build My church and the gates of hell shall not prevail agaist it"
Kenkuli
Kenkuli
Simeon's bucket list
Simeon's bucket list
Linkedin Gen Script
Linkedin Gen Script
PERFIL ALUMNE DEL SEFED
PERFIL ALUMNE DEL SEFED
Technologies and processes
Technologies and processes
04 17 kingdom restoration
04 17 kingdom restoration
Coding Dojo - Surrey Rubyists #2 - 26 April 2011
Coding Dojo - Surrey Rubyists #2 - 26 April 2011
Solo or together
Solo or together
Audience Evaluation
Audience Evaluation
Safa
Safa
Presentation web 2.0
Presentation web 2.0
UC Berkeley
UC Berkeley
Horaciones Pasado To Be
Horaciones Pasado To Be
Orientazioa kontrol txartela
Orientazioa kontrol txartela
Raising godly children 19 jun 15
Raising godly children 19 jun 15
Silk leadership lab_januari_2015_brochure
Silk leadership lab_januari_2015_brochure
Htdf Presentation For Linked In
Htdf Presentation For Linked In
True Submission
True Submission
Judgement or discernment 18 august 2013 csg
Judgement or discernment 18 august 2013 csg
Similar to 前端工程與Rwd _ 中原大學資管系
別傻了 你就是不寫測試才會沒時間!CL ft. Hamastar.pdf
別傻了 你就是不寫測試才會沒時間!CL ft. Hamastar.pdf
Yu-Song Syu
琬萱的自我介紹
琬萱的自我介紹
Cindy Cheng
我要活下來 - Ruby Junior 工程師的存活術
我要活下來 - Ruby Junior 工程師的存活術
Li Hsuan Hung
从学生到工程师
从学生到工程师
RANK LIU
如何靠自學成為工程師
如何靠自學成為工程師
Joseph Lu
詹翔霖副教授-企業管理基礎班-大葉大學
詹翔霖副教授-企業管理基礎班-大葉大學
翔霖 詹
第三章遊戲評量書面電子檔
第三章遊戲評量書面電子檔
chieh40
20150304 面對國小數學科翻轉衝擊的一些想法與做法
20150304 面對國小數學科翻轉衝擊的一些想法與做法
Eastern Chen
Internet resource - cacls
Internet resource - cacls
Ai Cheng Mandarin School
第五章 記錄資料2 回饋單
第五章 記錄資料2 回饋單
chieh40
自學程式的這一年
自學程式的這一年
Denny Ku
Similar to 前端工程與Rwd _ 中原大學資管系
(11)
別傻了 你就是不寫測試才會沒時間!CL ft. Hamastar.pdf
別傻了 你就是不寫測試才會沒時間!CL ft. Hamastar.pdf
琬萱的自我介紹
琬萱的自我介紹
我要活下來 - Ruby Junior 工程師的存活術
我要活下來 - Ruby Junior 工程師的存活術
从学生到工程师
从学生到工程师
如何靠自學成為工程師
如何靠自學成為工程師
詹翔霖副教授-企業管理基礎班-大葉大學
詹翔霖副教授-企業管理基礎班-大葉大學
第三章遊戲評量書面電子檔
第三章遊戲評量書面電子檔
20150304 面對國小數學科翻轉衝擊的一些想法與做法
20150304 面對國小數學科翻轉衝擊的一些想法與做法
Internet resource - cacls
Internet resource - cacls
第五章 記錄資料2 回饋單
第五章 記錄資料2 回饋單
自學程式的這一年
自學程式的這一年
More from 彭其捷 Jack
[演講簡報] Mopcon - 巧用 UI & UX 工具,提升設計溝通品質(彭其捷)
[演講簡報] Mopcon - 巧用 UI & UX 工具,提升設計溝通品質(彭其捷)
彭其捷 Jack
2021/3/22 亞洲大學|數位人文與互動科技
2021/3/22 亞洲大學|數位人文與互動科技
彭其捷 Jack
帶你一窺資料視覺化的神奇與奧妙(彭其捷)
帶你一窺資料視覺化的神奇與奧妙(彭其捷)
彭其捷 Jack
2021/1/7|交大資管人的斜槓旅程
2021/1/7|交大資管人的斜槓旅程
彭其捷 Jack
2020/12 交通大學_資料視覺化與我們的生活|彭其捷
2020/12 交通大學_資料視覺化與我們的生活|彭其捷
彭其捷 Jack
2020/11 PyData|人人都可以學會的資料視覺化(彭其捷)
2020/11 PyData|人人都可以學會的資料視覺化(彭其捷)
彭其捷 Jack
2020/11 台大地理系|Tableau 資料視覺化與地圖製作
2020/11 台大地理系|Tableau 資料視覺化與地圖製作
彭其捷 Jack
2020_11 (南湖高中)用資料視覺化說故事
2020_11 (南湖高中)用資料視覺化說故事
彭其捷 Jack
2020/11 中華電信|科技藝術與互動技術(製作者:彭其捷)
2020/11 中華電信|科技藝術與互動技術(製作者:彭其捷)
彭其捷 Jack
2020_11 台北市立大學 特教學系|講題:善用設計思考,引導團隊溝通共識
2020_11 台北市立大學 特教學系|講題:善用設計思考,引導團隊溝通共識
彭其捷 Jack
【台科大設計所】聊聊設計與數據思維|彭其捷
【台科大設計所】聊聊設計與數據思維|彭其捷
彭其捷 Jack
2020/8/15 AI學校:如何推動組織的 AI 團隊文化?(講者:彭其捷)
2020/8/15 AI學校:如何推動組織的 AI 團隊文化?(講者:彭其捷)
彭其捷 Jack
2020/7/25 台灣人工智慧學校|講題:AI與資料視覺化
2020/7/25 台灣人工智慧學校|講題:AI與資料視覺化
彭其捷 Jack
成大電機|大數據與使用者經驗設計 Workshop|彭其捷
成大電機|大數據與使用者經驗設計 Workshop|彭其捷
彭其捷 Jack
中原資管系|資管人的數位素養|彭其捷
中原資管系|資管人的數位素養|彭其捷
彭其捷 Jack
2019/11/28 環境數據分析|以空污分析為例
2019/11/28 環境數據分析|以空污分析為例
彭其捷 Jack
2019_11_21 世新大學|資料視覺化課程
2019_11_21 世新大學|資料視覺化課程
彭其捷 Jack
【人工智慧學校】2019/11/22 AI 與特徵工程:PM觀點(彭其捷)
【人工智慧學校】2019/11/22 AI 與特徵工程:PM觀點(彭其捷)
彭其捷 Jack
2019/10/27 創造力年會|用設計思考,讓團隊更有創造力|彭其捷
2019/10/27 創造力年會|用設計思考,讓團隊更有創造力|彭其捷
彭其捷 Jack
2019年9月 台北科技大學分享(談閱讀與寫作)
2019年9月 台北科技大學分享(談閱讀與寫作)
彭其捷 Jack
More from 彭其捷 Jack
(20)
[演講簡報] Mopcon - 巧用 UI & UX 工具,提升設計溝通品質(彭其捷)
[演講簡報] Mopcon - 巧用 UI & UX 工具,提升設計溝通品質(彭其捷)
2021/3/22 亞洲大學|數位人文與互動科技
2021/3/22 亞洲大學|數位人文與互動科技
帶你一窺資料視覺化的神奇與奧妙(彭其捷)
帶你一窺資料視覺化的神奇與奧妙(彭其捷)
2021/1/7|交大資管人的斜槓旅程
2021/1/7|交大資管人的斜槓旅程
2020/12 交通大學_資料視覺化與我們的生活|彭其捷
2020/12 交通大學_資料視覺化與我們的生活|彭其捷
2020/11 PyData|人人都可以學會的資料視覺化(彭其捷)
2020/11 PyData|人人都可以學會的資料視覺化(彭其捷)
2020/11 台大地理系|Tableau 資料視覺化與地圖製作
2020/11 台大地理系|Tableau 資料視覺化與地圖製作
2020_11 (南湖高中)用資料視覺化說故事
2020_11 (南湖高中)用資料視覺化說故事
2020/11 中華電信|科技藝術與互動技術(製作者:彭其捷)
2020/11 中華電信|科技藝術與互動技術(製作者:彭其捷)
2020_11 台北市立大學 特教學系|講題:善用設計思考,引導團隊溝通共識
2020_11 台北市立大學 特教學系|講題:善用設計思考,引導團隊溝通共識
【台科大設計所】聊聊設計與數據思維|彭其捷
【台科大設計所】聊聊設計與數據思維|彭其捷
2020/8/15 AI學校:如何推動組織的 AI 團隊文化?(講者:彭其捷)
2020/8/15 AI學校:如何推動組織的 AI 團隊文化?(講者:彭其捷)
2020/7/25 台灣人工智慧學校|講題:AI與資料視覺化
2020/7/25 台灣人工智慧學校|講題:AI與資料視覺化
成大電機|大數據與使用者經驗設計 Workshop|彭其捷
成大電機|大數據與使用者經驗設計 Workshop|彭其捷
中原資管系|資管人的數位素養|彭其捷
中原資管系|資管人的數位素養|彭其捷
2019/11/28 環境數據分析|以空污分析為例
2019/11/28 環境數據分析|以空污分析為例
2019_11_21 世新大學|資料視覺化課程
2019_11_21 世新大學|資料視覺化課程
【人工智慧學校】2019/11/22 AI 與特徵工程:PM觀點(彭其捷)
【人工智慧學校】2019/11/22 AI 與特徵工程:PM觀點(彭其捷)
2019/10/27 創造力年會|用設計思考,讓團隊更有創造力|彭其捷
2019/10/27 創造力年會|用設計思考,讓團隊更有創造力|彭其捷
2019年9月 台北科技大學分享(談閱讀與寫作)
2019年9月 台北科技大學分享(談閱讀與寫作)
前端工程與Rwd _ 中原大學資管系
1.
前端工程 & RWD 行動版網頁 彭其捷 http://about.me/divaka
2.
關於我 2
3.
關於資管 資不資? 管不管? 3
4.
關於我的歷程 中正經濟 系 中正資管 系 交大資管 所 4 都在夜唱跟打球中度過… 開始認真思考未來的方向 但一直找不到,只好一直到處修課 結果修了 215 學分 但還是想不太到… 決定繼續念研究所再說….
5.
關於我的工作 5 既資又 管 不用寫程式, 但又要了解 程式
6.
所以… 到底是在做什麼啊???
7.
軟體 PM 確認軟體需求 • 老師說要考什麼? 確認相關專案時程 •
確認期末考前要念完書 拉 PM, RD, Art 分工合 作 • 功課好的同學.. 定期內部、外部回 報進度 • 定期交作業的意思拉 7
8.
8
9.
喔熊網站 9 http://ohbear.taiwan.net.tw/
10.
鄭愁予網站 10 http://www.digitalpoetry-zcy.ntpu.edu.tw/
11.
外交部各國駐外大使館網站改版 11 http://www.roc-taiwan.org/JP/mp.asp?mp=201
12.
前端工程 讓網頁變好用的魔法技術
13.
你喜歡這樣的網站嗎? 13 http://www.taopic.com/
14.
http://en.viens-la.com/ 你喜歡這樣的網站嗎?
15.
前端的重點:互動性 • D3.js 15
16.
Google 的前端準則 16 https://www.google.com/design/spec/animation/delightful-details.html https://www.google.com/design/spec/animation/responsive- interaction.html#responsive-interaction-material-response
17.
前端工程師的工作 • 不是水電工 • 不是建築師 •
比較像網站 的室內設計師 17
18.
前端工程一點 都不容易 • 比 Diablo
升級到 80 還難太多了 • #我超宅的 18
19.
前端工程師的定位 19
20.
我要怎樣成為前端工程師? • 好好寫程式,培養邏輯力 • 沒事多看看設計的書,培養美感 20
21.
22.
RWD 低頭族正夯 Responsive Web Design
23.
24.
Yahoo! 24 這在手機上打開能看嗎??
25.
26.
手指的特性 26
27.
這樣才對嘛…. • 才能邊走路邊查資料啊! • 很忙耶還要回賴 27
28.
標準的 RWD 五視圖 28
29.
RWD 經典案例 29 http://alistapart.com/d/responsive-web- design/ex/ex-site-FINAL.html
30.
大螢幕框架 30
31.
中型與小型螢幕的網站內容框架 31
32.
來看看幾個網站 • http://responsive-jp.com/ 32
33.
RWD 設計原理 33
34.
RWD 優點 優點 開發與維 護成本 不需下載 APP就能 使用 可同時適 用不同裝 置 34 開發 RWD
網頁 大概 1day ~ 1個月 開發專屬 APP 大概 N 個月
35.
APP / RWD 有什麼不同? 35
36.
APP / RWD 有什麼不同? 36
37.
案例:教育百科 • http://pedia.cloud.edu.tw/ 37
38.
按鈕要給他大一點 • 避免純文字型的按鈕 38
39.
按鈕要給他大一點 39
40.
多使用滿版的排版,但定義出內容寬度 • 定義出中間的區塊,才好進行縮放 • 簡單的作法:寬度一般訂在
1024px(或是 800px) 40
41.
大版面的圖片/影片比較清楚 41 http://www.w3schools.com/css/css_rwd_images.asp http://www.w3schools.com/css/css_rwd_videos.asp
42.
上方選單可縮成單一 icon • Menu
導航 + 下拉式選單的設計 42
43.
頁籤也可以改成下拉式 43
44.
PC/Mobile 內容不一定要完全相同 • 人們在手機上無法消化太多資訊 44
45.
原本網頁側邊的元素 就讓他往下跑吧 45
46.
手機版的設計不一定要多華麗 • 清楚比較重要 46
47.
清楚好點選最重要 47
48.
手機版網頁測試法 • 直接拖拉瀏覽器最快 48
49.
換你了! 大版面的圖 片/影片比較 清楚 按鈕要給他 大一點 網頁 / RWD 內容不一定 要完全相同 上方選單可 縮成單一 icon原本網頁側 邊的元素, 就讓他往下 跑吧 手機版的內 容清楚最重 要 49
Editor's Notes
不要太正式,我們輕鬆一點當成聊天 之後想要做一個 workshop 讓同學聊聊天喔 Q:有人看得懂這個題目嗎?要不要分享一下?
錦慧老師的研究所學弟 他們都叫我 KTV,因為我很愛唱歌 全台灣第一個撰寫相關書籍的作者 其他都是越洋過來的拉
Q:你們為什麼念資管啊? Q:有沒有已經決定要當工程師了? Q:有沒有已經正在準備轉系了?
也是很徬徨了一陣子 電機系 外文系!!! 法律系!!!
Q:有這種工作嗎?當然有,而且非常多
不要太正式,我們輕鬆一點當成聊天 之後想要做一個 workshop 讓同學聊聊天喔 Q:有人看得懂這個題目嗎?要不要分享一下?
不要太正式,我們輕鬆一點當成聊天 之後想要做一個 workshop 讓同學聊聊天喔 Q:有人看得懂這個題目嗎?要不要分享一下?
因為滾動的手勢是很輕鬆的
Download now