Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

前端工程與Rwd _ 中原大學資管系

664 views

Published on

在中原資管的演講,內容是一些關於之前擔任前端工程師的經驗分享,以及最近需求很大的手機版網頁 RWD 設計概念

Published in: Engineering
  • Be the first to comment

前端工程與Rwd _ 中原大學資管系

  1. 1. 前端工程 & RWD 行動版網頁 彭其捷 http://about.me/divaka
  2. 2. 關於我 2
  3. 3. 關於資管 資不資? 管不管? 3
  4. 4. 關於我的歷程 中正經濟 系 中正資管 系 交大資管 所 4 都在夜唱跟打球中度過… 開始認真思考未來的方向 但一直找不到,只好一直到處修課 結果修了 215 學分 但還是想不太到… 決定繼續念研究所再說….
  5. 5. 關於我的工作 5 既資又 管 不用寫程式, 但又要了解 程式
  6. 6. 所以… 到底是在做什麼啊???
  7. 7. 軟體 PM 確認軟體需求 • 老師說要考什麼? 確認相關專案時程 • 確認期末考前要念完書 拉 PM, RD, Art 分工合 作 • 功課好的同學.. 定期內部、外部回 報進度 • 定期交作業的意思拉 7
  8. 8. 8
  9. 9. 喔熊網站 9 http://ohbear.taiwan.net.tw/
  10. 10. 鄭愁予網站 10 http://www.digitalpoetry-zcy.ntpu.edu.tw/
  11. 11. 外交部各國駐外大使館網站改版 11 http://www.roc-taiwan.org/JP/mp.asp?mp=201
  12. 12. 前端工程 讓網頁變好用的魔法技術
  13. 13. 你喜歡這樣的網站嗎? 13 http://www.taopic.com/
  14. 14. http://en.viens-la.com/ 你喜歡這樣的網站嗎?
  15. 15. 前端的重點:互動性 • D3.js 15
  16. 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. 前端工程師的工作 • 不是水電工 • 不是建築師 • 比較像網站 的室內設計師 17
  18. 18. 前端工程一點 都不容易 • 比 Diablo 升級到 80 還難太多了 • #我超宅的 18
  19. 19. 前端工程師的定位 19
  20. 20. 我要怎樣成為前端工程師? • 好好寫程式,培養邏輯力 • 沒事多看看設計的書,培養美感 20
  21. 21. RWD 低頭族正夯 Responsive Web Design
  22. 22. Yahoo! 24 這在手機上打開能看嗎??
  23. 23. 手指的特性 26
  24. 24. 這樣才對嘛…. • 才能邊走路邊查資料啊! • 很忙耶還要回賴 27
  25. 25. 標準的 RWD 五視圖 28
  26. 26. RWD 經典案例 29 http://alistapart.com/d/responsive-web- design/ex/ex-site-FINAL.html
  27. 27. 大螢幕框架 30
  28. 28. 中型與小型螢幕的網站內容框架 31
  29. 29. 來看看幾個網站 • http://responsive-jp.com/ 32
  30. 30. RWD 設計原理 33
  31. 31. RWD 優點 優點 開發與維 護成本 不需下載 APP就能 使用 可同時適 用不同裝 置 34 開發 RWD 網頁 大概 1day ~ 1個月 開發專屬 APP 大概 N 個月
  32. 32. APP / RWD 有什麼不同? 35
  33. 33. APP / RWD 有什麼不同? 36
  34. 34. 案例:教育百科 • http://pedia.cloud.edu.tw/ 37
  35. 35. 按鈕要給他大一點 • 避免純文字型的按鈕 38
  36. 36. 按鈕要給他大一點 39
  37. 37. 多使用滿版的排版,但定義出內容寬度 • 定義出中間的區塊,才好進行縮放 • 簡單的作法:寬度一般訂在 1024px(或是 800px) 40
  38. 38. 大版面的圖片/影片比較清楚 41 http://www.w3schools.com/css/css_rwd_images.asp http://www.w3schools.com/css/css_rwd_videos.asp
  39. 39. 上方選單可縮成單一 icon • Menu 導航 + 下拉式選單的設計 42
  40. 40. 頁籤也可以改成下拉式 43
  41. 41. PC/Mobile 內容不一定要完全相同 • 人們在手機上無法消化太多資訊 44
  42. 42. 原本網頁側邊的元素 就讓他往下跑吧 45
  43. 43. 手機版的設計不一定要多華麗 • 清楚比較重要 46
  44. 44. 清楚好點選最重要 47
  45. 45. 手機版網頁測試法 • 直接拖拉瀏覽器最快 48
  46. 46. 換你了! 大版面的圖 片/影片比較 清楚 按鈕要給他 大一點 網頁 / RWD 內容不一定 要完全相同 上方選單可 縮成單一 icon原本網頁側 邊的元素, 就讓他往下 跑吧 手機版的內 容清楚最重 要 49

×