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

1. ASP.NET MVC 善用網路資源快速打造網站
demo fan

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. http://mvc.tw
 如何快速發想一個網站
這堂課會有什麼？
3

4. http://mvc.tw
 如何快速發想一個網站
 設計很弱怎麼補強？
這堂課會有什麼？
4

5. http://mvc.tw
 如何快速發想一個網站
 設計很弱怎麼補強？
 資料源怎麼找？
這堂課會有什麼？
5

6. http://mvc.tw
 很神的快速做出一個網站！
這堂課不會有什麼？
6

7. http://mvc.tw
 很神的快速做出一個網站！
 刷刷刷的快速操作！
這堂課不會有什麼？
7

8. http://mvc.tw
 很神的快速做出一個網站！
 刷刷刷的快速操作！
 一堆專有名詞假裝自己很厲害！
這堂課不會有什麼？
8

9. 嗯？
9

10. ASP.NET MVC 勒？
10

11. <asp:TextBox
11

12. <asp:TextBox
12
這玩意你要怎麼整合網路資源？

13. 說穿了，這場次結束，你只會拿到滿滿的連結
13

14. OK 開始了！
14

15. 以前的我們是怎麼做網站的？
15

16. 在那個純真年代
16

17. 在那個純真年代
17
有個偉大的技術愛好者

18. 在那個純真年代
18
有個偉大的技術愛好者
做了一個偉大的網站

19. 首頁建置百寶箱
19

20. 首頁建置百寶箱
20

21. 首頁建置百寶箱
21

22. http://mvc.tw
來點正經的網站建構順序
22

23. http://mvc.tw
 先畫 Wireframe
來點正經的網站建構順序
23

24. http://mvc.tw
 先畫 Wireframe
 Wireframe是什麼鬼？
 http://akanelee.logdown.com/posts/159788-what-is-wireframe
來點正經的網站建構順序
24

25. http://mvc.tw
 先畫 Wireframe
 Wireframe是什麼鬼？
 http://akanelee.logdown.com/posts/159788-what-is-wireframe
 利用極快速的工具，先發想要做的網站版面
來點正經的網站建構順序
25

26. http://mvc.tw
 先畫 Wireframe
 Wireframe是什麼鬼？
 http://akanelee.logdown.com/posts/159788-what-is-wireframe
 利用極快速的工具，先發想要做的網站版面
 超簡單：https://wireframe.cc/
來點正經的網站建構順序
26

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

29. 不想學新的程式操作方法？
29

30. Wireframe 王道
30

31. 手繪
31

32. 手繪
32
http://www.uistencils.com/products/windows-phone-sketch-pad

33. http://mvc.tw
Prototype
33

34. http://mvc.tw
 Prototype 是什麼？
Prototype
34

35. http://mvc.tw
 Prototype 是什麼？
 直翻就是原型，你網站的原型，當使用 Wireframe 打好稿後，
就可以開始製作 Prototype 了
Prototype
35

36. http://mvc.tw
 Prototype 是什麼？
 直翻就是原型，你網站的原型，當使用 Wireframe 打好稿後，
就可以開始製作 Prototype 了
 製作要點
 盡量減少重工
Prototype
36

37. Prototype 推薦使用
37
Bootstrap

38. Prototype 推薦使用
38
Why?

39. http://mvc.tw
 Bootstrap 本來就是製作 Prototype 的工具
Bootstrap
39

40. http://mvc.tw
 Bootstrap 本來就是製作 Prototype 的工具
 而且做好的 Prototype 很美觀
Bootstrap
40

41. 我畫好 Prototype 了，這樣可以嗎？
41

42. 我畫好 Prototype 了，這樣可以嗎？
42

43. 我畫好 Prototype 了，這樣可以嗎？
43

44. 我畫好 Prototype 了，這樣可以嗎？
44

45. 我畫好 Prototype 了，這樣可以嗎？
45

46. 我畫好 Prototype 了，這樣可以嗎？
46

47. http://mvc.tw
 Bootstrap 本來就是製作 Prototype 的工具
 而且做好的 Prototype 很美觀
 因為有一定的水準，而且還能動！所以很容易不小心就會變
Production
Bootstrap
47

48. 48

49. http://mvc.tw
 Bootstrap 會不會很難學？
Prototype
49

50. http://mvc.tw
 Bootstrap 會不會很難學？
 有完整文件：http://getbootstrap.com/
Prototype
50

51. http://mvc.tw
 Bootstrap 會不會很難學？
 有完整文件：http://getbootstrap.com/
 有豐富範例：http://bootsnipp.com/
Prototype
51

52. http://mvc.tw
 Bootstrap 會不會很難學？
 有完整文件：http://getbootstrap.com/
 有豐富範例：http://bootsnipp.com/
 有超多套件：
http://www.twittstrap.com/resources/index
Prototype
52

53. 還是有障礙？
53

54. http://mvc.tw
 Button Builder：
 http://bootsnipp.com/buttons
Bootstrap
54

55. http://mvc.tw
 Button Builder：
 http://bootsnipp.com/buttons
 Form Builder：
 http://minikomi.github.io/Bootstrap-Form-Builder/
Bootstrap
55

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. 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. 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. http://mvc.tw
 網站規劃完了
 版面也設計好了
 資料勒？
找資料
59

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. 不只以上，還有更多的 Open Data
平台，但是我累了…
61

62. 很難想像一個小小的台灣有那麼多種
的 Open Data 平台，整理了以後我
只有一個感覺
62

63. 63

64. http://mvc.tw
 公開資料很沒FU，我就是想做人家做不到的
資料源
64

65. http://mvc.tw
 公開資料很沒FU，我就是想做人家做不到的
資料源
65

66. http://mvc.tw
 最豐富的資料都是幹出來的！
 HTML Agility Pack
 http://msdn.microsoft.com/zh-tw/ee787055.aspx
資料源
66

67. 本課程唯一的範例
67

68. 68

69. 69

70. http://mvc.tw
 最豐富的資料都是幹出來的！
 HTML Agility Pack
 http://msdn.microsoft.com/zh-tw/ee787055.aspx
資料源
70

71. IE很尊重版權！
71

72. IE很尊重版權！
72

73. 73
http://1drv.ms/1j8E6H4

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
提醒
上滿4堂課 交回問卷 問卷禮

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. 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