架構行動式網站（使用 ASP.NET MVC 4.0 -twMVC#6

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

http://mvc.tw

Transcript

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