現在行動式的網站已經是不可不碰的議題了，在MVC4上針對行動網頁的支援與功能加強了許多，這裡就讓我們一起踏入行動網頁開發的領域，課程中會介紹行動網頁的一些設計原則以及MVC4 和 Visual Studio2012針對這方面的支援。 http://mvc.tw

1. 架構行動式網站
使用 ASP.NET MVC 4
2012/11/24

2. http://mvc.tw
 行動網頁設計要素
 技術名詞
 開發與偵錯工具
 使用ASP.NET MVC4建立網站
 修改成支援行動瀏覽的混合式網站
 美化網站
 針對特定行動平台優化
 提供資料新選擇Web API
大綱
2

3. http://mvc.tw
1. 說重點
2. 夠貼心
3. 少輸入
4. 去廣告
5. 不花俏
6. 輕量化
3
行動網站設計要素

4. http://mvc.tw
 響應式網頁設計（Responsive Web Design）
 Media queries
4
技術名詞

5. http://mvc.tw
 響應式網頁設計（Responsive Web Design）
 Media queries
 範例
 http://www.webdesignyorkshire.com/ （標準的用法
 http://foodsense.is/ （選單是可以改變位置的
 http://galaxy.fili.nl/ （在行動頁面不一定要長得一樣
 http://webdesignhabits.com/85-amazing-showcase-of-responsive-web-design/
5
技術名詞

6. http://mvc.tw
 jQuery Mobile
 jQuery Mobile 是開發行動網站一個很方便的框架 ，可以省下很多事。
6
技術名詞

7. http://mvc.tw
 Display Switch
 ASP.NET MVC4新功能，可以快速處理顯示模式的切換，對於複合式
網站十分方便。
7
技術名詞

8. http://mvc.tw
 Visual Studio 2012
 http://www.microsoft.com/visualstudio/cht/downloads#anchor=ultimate
8
開發與偵錯工具

9. http://mvc.tw
 Visual Studio 2012
 http://www.microsoft.com/visualstudio/cht/downloads#anchor=ultimate
 瀏覽器
 Firefox （http://moztw.org/firefox/download/latest-win.html）
 IE （http://msdn.microsoft.com/zh-tw/ie/aa740471.aspx）
 Chrome（http://www.google.com/intl/zh-TW/chrome/browser/）
9
開發與偵錯工具

10. http://mvc.tw
 Visual Studio 2012
 http://www.microsoft.com/visualstudio/cht/downloads#anchor=ultimate
 瀏覽器
 Firefox （http://moztw.org/firefox/download/latest-win.html）
 IE （http://msdn.microsoft.com/zh-tw/ie/aa740471.aspx）
 Chrome（http://www.google.com/intl/zh-TW/chrome/browser/）
 一個查詢Uaer Agent的網站
 http://www.useragentstring.com/pages/useragentstring.php
10
開發與偵錯工具

11. http://mvc.tw 11
開發與偵錯工具
一顆火熱的心

12. http://mvc.tw
 使用網際網路應用程式範本
 介接台北市政府公開資料（停車場）
 http://www.api.cloud.taipei.gov.tw/CSCP_API/trf/pli/
 http://www.api.cloud.taipei.gov.tw/CSCP_API/trf/pli/cat
egories/{0}/topics
12
使用ASP.NET MVC4建立網站

13. http://mvc.tw 13

14. http://mvc.tw
 使用NuGet下載 jQuery Mobile
14
修改成支援行動瀏覽的網站
PM> Install-Package jQuery.Mobile.MVC

15. http://mvc.tw
美化網站
15

16. http://mvc.tw
jQuery Mobile
 參考別人怎麼做
http://www.jqmgallery.com/
16
美化網站

17. http://mvc.tw
美化網站
17

18. http://mvc.tw
jQuery Mobile
 參考別人怎麼做
http://www.jqmgallery.com/
 Theme產生器
http://jquerymobile.com/themeroller/
18
美化網站

19. http://mvc.tw
美化網站
19

20. http://mvc.tw
jQuery Mobile
 參考別人怎麼做
http://www.jqmgallery.com/
 Theme產生器
http://jquerymobile.com/themeroller/
 Layout產生器
http://codiqa.com/
20
美化網站

21. http://mvc.tw
美化網站
21

22. http://mvc.tw 22
針對特定行動平台優化
12:38

23. http://mvc.tw 23
針對特定行動平台優化
12:38
Display Switch

24. http://mvc.tw
美化網站
24

25. http://mvc.tw
 線上影片
 http://www.youtube.com/watch?v=OV5nJLb-cEg
 http://www.youtube.com/watch?v=MlYBVTgcHk0
 推薦書籍
 http://books.gotop.com.tw/OreillyBooks/BookDetails
.aspx?Types=d&bn=A333
25
jQuery Mobile 學習資源

26. 資料提供新選擇
Web API
26

27. http://mvc.tw
Web API
RESTful
獨立出一個 WebApiConfig.cs
利用網址簡單呼叫 CRUD
習慣取代配置
無痛上手
27
資料提供新選擇 Web API
RESTful

28. http://mvc.tw
Web API
28

29. http://mvc.tw
 OData
 Top
 Skip
 Orderby
 filter
29
Web API

30. http://mvc.tw
 OData
 filter
 Web API – OData支援的比較運算子
 eq （Equal to，等於）
 gt （Greater than，大於）
 lt （Less than，小於）
 ne （Not equal to，不等於）
30
Web API

31. http://mvc.tw
OData正式版將在
秋季更新出現
http://aspnet.codeplex.com/

32. ASP.NET MVC4 網站開發美學
近期上市

33. 聯絡資訊
Blog: http://demo.tc
twMVC: http://mvc.tw
G+: http://demo.tc/+
FB: http://fb.me/demo.fan
Plurk: http://plurk.com/demoshop

34. 謝謝各位
• 本投影片所包含的商標與文字皆屬原著作者所有。
• 本投影片使用的圖片皆從網路搜尋。
• 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。
h t t p : / / m v c . t w