ASP.NET MVC 善用網路資源快速完打造網站

2,767 views

Published on

ASP.NET MVC 善用網路資源快速完打造網站

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,767
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
67
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

ASP.NET MVC 善用網路資源快速完打造網站

  1. 1. ASP.NET MVC 善用網路資源快速打造網站 demo fan
  2. 2. http://mvc.tw  連任五屆微軟最有價值專家,從 ASP.NET MVC 1 Beta3 接觸到 MVC 架構後就開始投入,並且撰寫 Blog http://demo.tc 推廣 MVC 相關 技術,出版著作有 《ASP.NET MVC4 網站開發美學》等書籍。  MSDN 講座特約講師  TechDays Taiwan 2012~2013 特約講師  微軟實戰課程日講師  微軟雲端平台開發者日講師  twMVC創辦人兼核心講師 http://mvc.tw  SkillTree 創辦人兼專任講師 http://skilltree.my 講師介紹 demo? 2
  3. 3. http://mvc.tw  如何快速發想一個網站 這堂課會有什麼? 3
  4. 4. http://mvc.tw  如何快速發想一個網站  設計很弱怎麼補強? 這堂課會有什麼? 4
  5. 5. http://mvc.tw  如何快速發想一個網站  設計很弱怎麼補強?  資料源怎麼找? 這堂課會有什麼? 5
  6. 6. http://mvc.tw  很神的快速做出一個網站! 這堂課不會有什麼? 6
  7. 7. http://mvc.tw  很神的快速做出一個網站!  刷刷刷的快速操作! 這堂課不會有什麼? 7
  8. 8. http://mvc.tw  很神的快速做出一個網站!  刷刷刷的快速操作!  一堆專有名詞假裝自己很厲害! 這堂課不會有什麼? 8
  9. 9. 嗯? 9
  10. 10. ASP.NET MVC 勒? 10
  11. 11. <asp:TextBox 11
  12. 12. <asp:TextBox 12 這玩意你要怎麼整合網路資源?
  13. 13. 說穿了,這場次結束,你只會拿到滿滿的連結 13
  14. 14. OK 開始了! 14
  15. 15. 以前的我們是怎麼做網站的? 15
  16. 16. 在那個純真年代 16
  17. 17. 在那個純真年代 17 有個偉大的技術愛好者
  18. 18. 在那個純真年代 18 有個偉大的技術愛好者 做了一個偉大的網站
  19. 19. 首頁建置百寶箱 19
  20. 20. 首頁建置百寶箱 20
  21. 21. 首頁建置百寶箱 21
  22. 22. http://mvc.tw 來點正經的網站建構順序 22
  23. 23. http://mvc.tw  先畫 Wireframe 來點正經的網站建構順序 23
  24. 24. http://mvc.tw  先畫 Wireframe  Wireframe是什麼鬼?  http://akanelee.logdown.com/posts/159788-what-is-wireframe 來點正經的網站建構順序 24
  25. 25. http://mvc.tw  先畫 Wireframe  Wireframe是什麼鬼?  http://akanelee.logdown.com/posts/159788-what-is-wireframe  利用極快速的工具,先發想要做的網站版面 來點正經的網站建構順序 25
  26. 26. http://mvc.tw  先畫 Wireframe  Wireframe是什麼鬼?  http://akanelee.logdown.com/posts/159788-what-is-wireframe  利用極快速的工具,先發想要做的網站版面  超簡單:https://wireframe.cc/ 來點正經的網站建構順序 26
  27. 27. http://mvc.tw  先畫 Wireframe  Wireframe是什麼鬼?  http://akanelee.logdown.com/posts/159788-what-is-wireframe  利用極快速的工具,先發想要做的網站版面  超簡單:https://wireframe.cc/  夠完整:https://cacoo.com/lang/zh_tw/ 來點正經的網站建構順序 27
  28. 28. 畫起來好累?! 28
  29. 29. 不想學新的程式操作方法? 29
  30. 30. Wireframe 王道 30
  31. 31. 手繪 31
  32. 32. 手繪 32 http://www.uistencils.com/products/windows-phone-sketch-pad
  33. 33. http://mvc.tw Prototype 33
  34. 34. http://mvc.tw  Prototype 是什麼? Prototype 34
  35. 35. http://mvc.tw  Prototype 是什麼?  直翻就是原型,你網站的原型,當使用 Wireframe 打好稿後, 就可以開始製作 Prototype 了 Prototype 35
  36. 36. http://mvc.tw  Prototype 是什麼?  直翻就是原型,你網站的原型,當使用 Wireframe 打好稿後, 就可以開始製作 Prototype 了  製作要點  盡量減少重工 Prototype 36
  37. 37. Prototype 推薦使用 37 Bootstrap
  38. 38. Prototype 推薦使用 38 Why?
  39. 39. http://mvc.tw  Bootstrap 本來就是製作 Prototype 的工具 Bootstrap 39
  40. 40. http://mvc.tw  Bootstrap 本來就是製作 Prototype 的工具  而且做好的 Prototype 很美觀 Bootstrap 40
  41. 41. 我畫好 Prototype 了,這樣可以嗎? 41
  42. 42. 我畫好 Prototype 了,這樣可以嗎? 42
  43. 43. 我畫好 Prototype 了,這樣可以嗎? 43
  44. 44. 我畫好 Prototype 了,這樣可以嗎? 44
  45. 45. 我畫好 Prototype 了,這樣可以嗎? 45
  46. 46. 我畫好 Prototype 了,這樣可以嗎? 46
  47. 47. http://mvc.tw  Bootstrap 本來就是製作 Prototype 的工具  而且做好的 Prototype 很美觀  因為有一定的水準,而且還能動!所以很容易不小心就會變 Production Bootstrap 47
  48. 48. 48
  49. 49. http://mvc.tw  Bootstrap 會不會很難學? Prototype 49
  50. 50. http://mvc.tw  Bootstrap 會不會很難學?  有完整文件:http://getbootstrap.com/ Prototype 50
  51. 51. http://mvc.tw  Bootstrap 會不會很難學?  有完整文件:http://getbootstrap.com/  有豐富範例:http://bootsnipp.com/ Prototype 51
  52. 52. http://mvc.tw  Bootstrap 會不會很難學?  有完整文件:http://getbootstrap.com/  有豐富範例:http://bootsnipp.com/  有超多套件: http://www.twittstrap.com/resources/index Prototype 52
  53. 53. 還是有障礙? 53
  54. 54. http://mvc.tw  Button Builder:  http://bootsnipp.com/buttons Bootstrap 54
  55. 55. http://mvc.tw  Button Builder:  http://bootsnipp.com/buttons  Form Builder:  http://minikomi.github.io/Bootstrap-Form-Builder/ Bootstrap 55
  56. 56. http://mvc.tw  Button Builder:  http://bootsnipp.com/buttons  Form Builder:  http://minikomi.github.io/Bootstrap-Form-Builder/  Lavish:  http://www.lavishbootstrap.com/ Bootstrap 56
  57. 57. http://mvc.tw  Button Builder:  http://bootsnipp.com/buttons  Form Builder:  http://minikomi.github.io/Bootstrap-Form-Builder/  Lavish:  http://www.lavishbootstrap.com/  Jetstrap:  https://jetstrap.com/plans Bootstrap 57
  58. 58. http://mvc.tw  Button Builder:  http://bootsnipp.com/buttons  Form Builder:  http://minikomi.github.io/Bootstrap-Form-Builder/  Lavish:  http://www.lavishbootstrap.com/  Jetstrap:  https://jetstrap.com/plans  Layoutlt:  http://www.layoutit.com/ Bootstrap 58
  59. 59. http://mvc.tw  網站規劃完了  版面也設計好了  資料勒? 找資料 59
  60. 60. http://mvc.tw 資料源  政府資料開放平台  http://data.gov.tw/  台北市政府資料開放平台  http://data.taipei.gov.tw/  新北市政府資料開放平台  http://data.ntpc.gov.tw/NTPC/  台中市政府資料開放平台  http://data.taichung.gov.tw/GipOpenWeb/wSite/mp? mp=1  台南市教育局公開資料服務  http://odata.tn.edu.tw/  宜蘭縣政府資料開放平台  http://opendata.e- land.gov.tw/OpenData/Category1.aspx  高雄市政府開放資料平台  http://data.kaohsiung.gov.tw/Opendata/  文化資料開放服務網  http://cloud.culture.tw/opendata/  行政院農業委員會資料開放平台  http://data.coa.gov.tw/  行政院環境保護署環境資源資料開放平台  http://opendata.epa.gov.tw/  國立故宮博物院 Open Data 資料開放平台  http://www.npm.gov.tw/opendata/  商工行政資料開放平台  http://data.gcis.nat.gov.tw/od/datacategory  交通部中央氣象局開放資料平台  http://opendata.cwb.gov.tw/ 60
  61. 61. 不只以上,還有更多的 Open Data 平台,但是我累了… 61
  62. 62. 很難想像一個小小的台灣有那麼多種 的 Open Data 平台,整理了以後我 只有一個感覺 62
  63. 63. 63
  64. 64. http://mvc.tw  公開資料很沒FU,我就是想做人家做不到的 資料源 64
  65. 65. http://mvc.tw  公開資料很沒FU,我就是想做人家做不到的 資料源 65
  66. 66. http://mvc.tw  最豐富的資料都是幹出來的!  HTML Agility Pack  http://msdn.microsoft.com/zh-tw/ee787055.aspx 資料源 66
  67. 67. 本課程唯一的範例 67
  68. 68. 68
  69. 69. 69
  70. 70. http://mvc.tw  最豐富的資料都是幹出來的!  HTML Agility Pack  http://msdn.microsoft.com/zh-tw/ee787055.aspx 資料源 70
  71. 71. IE很尊重版權! 71
  72. 72. IE很尊重版權! 72
  73. 73. 73 http://1drv.ms/1j8E6H4
  74. 74. 謝謝各位 • 本投影片所包含的商標與文字皆屬原著作者所有。 • 本投影片使用的圖片皆從網路搜尋。 • 本著作係採用姓名標示-非商業性-相同方式分享 3.0 台灣授權。閱讀本授權條款,請到 http://creativecommons.org/licenses/by-nc-sa/3.0/tw/,或寫信至Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. h t t p : / / m v c . t w
  75. 75. 75 提醒 上滿4堂課 交回問卷 問卷禮
  76. 76. 參加美國微軟產 品組 線上會議 MVP logo 使用權 提供產品建議 給微軟產品組 美國MVP全 球年會 MSDN Online combo Subscription MVP 專屬討論區 Knowledge Base Technical Support 3個專業資訊人員 技術支援服務 MVP 專屬 live meeting account Microsoft MVP Award 報名申請: twmvp@microsoft. com
  77. 77. http://mvc.tw MVA學習資源 (持續更新中文課程)  立即上手 Windows Azure http://aka.ms/mva-azure-overview  SQL Server 2014 線上交易記憶體內資料庫簡介 http://aka.ms/mva-sql2014  針對網站開發人員的 Visual Studio 使用技巧 http://aka.ms/vstips4web  Web Services 開發實戰: 使用 ASP.NET Web API 2 http://aka.ms/mva-webapi2  Visual Studio Online 與 Git 版本控管實戰 http://aka.ms/mva-vso-git  使用 App Studio 快速開發 Windows Phone 應用程式 http://aka.ms/mva-appstudio

×