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

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

• 1.
  ASP.NET MVC 善用網路資源快速打造網站 demofan
• 2.
  http://mvc.tw  連任五屆微軟最有價值專家，從 ASP.NETMVC 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  最豐富的資料都是幹出來的！  HTMLAgility Pack  http://msdn.microsoft.com/zh-tw/ee787055.aspx 資料源 66
• 67.
  本課程唯一的範例 67
• 68.
  68
• 69.
  69
• 70.
  http://mvc.tw  最豐富的資料都是幹出來的！  HTMLAgility 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 comboSubscription 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