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

849 views

Published on



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

http://mvc.tw

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
849
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 架構行動式網站 使用 ASP.NET MVC 4 2012/11/24
  2. 2. http://mvc.tw  行動網頁設計要素  技術名詞  開發與偵錯工具  使用ASP.NET MVC4建立網站  修改成支援行動瀏覽的混合式網站  美化網站  針對特定行動平台優化  提供資料新選擇Web API 大綱 2
  3. 3. http://mvc.tw 1. 說重點 2. 夠貼心 3. 少輸入 4. 去廣告 5. 不花俏 6. 輕量化 3 行動網站設計要素
  4. 4. http://mvc.tw  響應式網頁設計(Responsive Web Design)  Media queries 4 技術名詞
  5. 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. 6. http://mvc.tw  jQuery Mobile  jQuery Mobile 是開發行動網站一個很方便的框架 ,可以省下很多事。 6 技術名詞
  7. 7. http://mvc.tw  Display Switch  ASP.NET MVC4新功能,可以快速處理顯示模式的切換,對於複合式 網站十分方便。 7 技術名詞
  8. 8. http://mvc.tw  Visual Studio 2012  http://www.microsoft.com/visualstudio/cht/downloads#anchor=ultimate 8 開發與偵錯工具
  9. 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. 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. 11. http://mvc.tw 11 開發與偵錯工具 一顆火熱的心
  12. 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. 13. http://mvc.tw 13
  14. 14. http://mvc.tw  使用NuGet下載 jQuery Mobile 14 修改成支援行動瀏覽的網站 PM> Install-Package jQuery.Mobile.MVC
  15. 15. http://mvc.tw 美化網站 15
  16. 16. http://mvc.tw jQuery Mobile  參考別人怎麼做 http://www.jqmgallery.com/ 16 美化網站
  17. 17. http://mvc.tw 美化網站 17
  18. 18. http://mvc.tw jQuery Mobile  參考別人怎麼做 http://www.jqmgallery.com/  Theme產生器 http://jquerymobile.com/themeroller/ 18 美化網站
  19. 19. http://mvc.tw 美化網站 19
  20. 20. http://mvc.tw jQuery Mobile  參考別人怎麼做 http://www.jqmgallery.com/  Theme產生器 http://jquerymobile.com/themeroller/  Layout產生器 http://codiqa.com/ 20 美化網站
  21. 21. http://mvc.tw 美化網站 21
  22. 22. http://mvc.tw 22 針對特定行動平台優化 12:38
  23. 23. http://mvc.tw 23 針對特定行動平台優化 12:38 Display Switch
  24. 24. http://mvc.tw 美化網站 24
  25. 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. 26. 資料提供新選擇 Web API 26
  27. 27. http://mvc.tw Web API RESTful 獨立出一個 WebApiConfig.cs 利用網址簡單呼叫 CRUD 習慣取代配置 無痛上手 27 資料提供新選擇 Web API RESTful
  28. 28. http://mvc.tw Web API 28
  29. 29. http://mvc.tw  OData  Top  Skip  Orderby  filter 29 Web API
  30. 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. 31. http://mvc.tw OData正式版將在 秋季更新出現 http://aspnet.codeplex.com/
  32. 32. ASP.NET MVC4 網站開發美學 近期上市
  33. 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. 34. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。 h t t p : / / m v c . t w

×