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

demo fan

http://mvc.tw 2

連任五屆微軟最有價值專家，從 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 ？

http://mvc.tw 3

如何快速發想一個網站

這堂課會有什麼？

http://mvc.tw 4

如何快速發想一個網站

設計很弱怎麼補強？

這堂課會有什麼？

http://mvc.tw 5

如何快速發想一個網站

設計很弱怎麼補強？

資料源怎麼找？

這堂課會有什麼？

http://mvc.tw 6

很神的快速做出一個網站！

這堂課不會有什麼？

http://mvc.tw 7

很神的快速做出一個網站！

刷刷刷的快速操作！

這堂課不會有什麼？

http://mvc.tw 8

很神的快速做出一個網站！

刷刷刷的快速操作！

一堆專有名詞假裝自己很厲害！

這堂課不會有什麼？

9

嗯？

10

ASP.NET MVC 勒？

11

<asp:TextBox

12

<asp:TextBox

這玩意你要怎麼整合網路資源？

13

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

14

OK 開始了！

15

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

16

在那個純真年代

17

在那個純真年代

有個偉大的技術愛好者

18

在那個純真年代

有個偉大的技術愛好者

做了一個偉大的網站

19

首頁建置百寶箱

20

首頁建置百寶箱

21

首頁建置百寶箱

執行 CP 值最高的 Copy Paste

http://mvc.tw 22

來點正經的網站建構順序

http://mvc.tw 23

先畫 Wireframe

來點正經的網站建構順序

http://mvc.tw 24

先畫 Wireframe

Wireframe 是什麼鬼？ http://akanelee.logdown.com/posts/159788-what-is-wireframe

來點正經的網站建構順序

http://mvc.tw 25

先畫 Wireframe

Wireframe 是什麼鬼？ http://akanelee.logdown.com/posts/159788-what-is-wireframe

利用極快速的工具，先發想要做的網站版面

來點正經的網站建構順序

http://mvc.tw 26

先畫 Wireframe

Wireframe 是什麼鬼？ http://akanelee.logdown.com/posts/159788-what-is-wireframe

利用極快速的工具，先發想要做的網站版面 超簡單： https://wireframe.cc/

來點正經的網站建構順序

http://mvc.tw 27

先畫 Wireframe

Wireframe 是什麼鬼？ http://akanelee.logdown.com/posts/159788-what-is-wireframe

利用極快速的工具，先發想要做的網站版面 超簡單： https://wireframe.cc/

夠完整： https://cacoo.com/lang/zh_tw/

來點正經的網站建構順序

28

畫起來好累？！

29

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

30

Wireframe 王道

31

手繪

32

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

http://mvc.tw 33

Prototype

http://mvc.tw 34

Prototype 是什麼？

Prototype

http://mvc.tw 35

Prototype 是什麼？ 直翻就是原型，你網站的原型，當使用 Wireframe 打好稿後，

就可以開始製作 Prototype 了

Prototype

http://mvc.tw 36

Prototype 是什麼？ 直翻就是原型，你網站的原型，當使用 Wireframe 打好稿後，

就可以開始製作 Prototype 了

製作要點 盡量減少重工

Prototype

37

Prototype 推薦使用

Bootstrap

38

Prototype 推薦使用

Why?

http://mvc.tw 39

Bootstrap 本來就是製作 Prototype 的工具

Bootstrap

http://mvc.tw 40

Bootstrap 本來就是製作 Prototype 的工具

而且做好的 Prototype 很美觀

Bootstrap

41

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

42

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

43

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

44

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

45

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

46

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

http://mvc.tw 47

Bootstrap 本來就是製作 Prototype 的工具

而且做好的 Prototype 很美觀

因為有一定的水準，而且還能動！所以很容易不小心就會變 Production

Bootstrap

48

http://mvc.tw 49

Bootstrap 會不會很難學？

Prototype

http://mvc.tw 50

Bootstrap 會不會很難學？ 有完整文件： http://getbootstrap.com/

Prototype

http://mvc.tw 51

Bootstrap 會不會很難學？ 有完整文件： http://getbootstrap.com/

有豐富範例： http://bootsnipp.com/

Prototype

http://mvc.tw 52

Bootstrap 會不會很難學？ 有完整文件： http://getbootstrap.com/

有豐富範例： http://bootsnipp.com/

有超多套件： http://

www.twittstrap.com/resources/index

Prototype

53

還是有障礙？

http://mvc.tw 54

Button Builder ： http://bootsnipp.com/buttons

Bootstrap

http://mvc.tw 55

Button Builder ： http://bootsnipp.com/buttons

Form Builder ： http://minikomi.github.io/Bootstrap-Form-Builder/

Bootstrap

http://mvc.tw 56

Button Builder ： http://bootsnipp.com/buttons

Form Builder ： http://minikomi.github.io/Bootstrap-Form-Builder/

Lavish ： http://www.lavishbootstrap.com/

Bootstrap

http://mvc.tw 57

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

http://mvc.tw 58

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

http://mvc.tw 59

網站規劃完了

版面也設計好了

資料勒？

找資料

http://mvc.tw 60

資料源 政府資料開放平台

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

x

高雄市政府開放資料平台 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/

61

不只以上，還有更多的 Open Data 平台，但是我累了…

62

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

63

http://mvc.tw 64

公開資料很沒 FU ，我就是想做人家做不到的

資料源

http://mvc.tw 65

公開資料很沒 FU ，我就是想做人家做不到的

資料源

http://mvc.tw 66

最豐富的資料都是幹出來的！

HTML Agility Pack

http://msdn.microsoft.com/zh-tw/ee787055.aspx

資料源

67

本課程唯一的範例

68

69

http://mvc.tw 70

最豐富的資料都是幹出來的！

HTML Agility Pack

http://msdn.microsoft.com/zh-tw/ee787055.aspx

資料源

擷取網路資料可能會有侵權行為，請尊重所有人的權利

71

IE 很尊重版權！

72

IE 很尊重版權！

73

http://1drv.ms/1j8E6H4

謝謝各位

• 本投影片所包含的商標與文字皆屬原著作者所有。• 本投影片使用的圖片皆從網路搜尋。• 本著作係採用姓名標示 - 非商業性 - 相同方式分享 3.0 台灣授權。閱讀本授權條款，請到

http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信至 Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

http://mvc.tw

75

提醒

上滿 4 堂課 交回問卷 問卷禮

參加美國微軟產品組線上會議 MVP logo

使用權

提供產品建議給微軟產品組

美國 MVP全球年會

MSDN Online combo Subscription

MVP 專屬討論區 Knowledge Base

Technical Support3 個專業資訊人員技術支援服務

MVP 專屬 live meeting account

Microsoft MVP Award報名申請: twmvp@microsoft.com

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