本文章是由機器翻譯。
現代化應用程式
行動網站、原生應用程式與混合式應用程式的比較
.jpg)
一個問題的出現通常是在今天的現代發展景觀 — — 是否要建立一個移動網站與本機應用程式與一個混合應用程式。作為開發人員，您需要花時間去把開發軟體在運行之前認為通過幾個注意事項。一種考慮確定您的目標受眾。在大的程度上，這將確定您的目標平臺。
您的使用者會使用許多不同的設備訪問您的軟體。一些將訪問應用程式，通過公司的網路，而其他應用程式都是消費者集中。一旦你確定了觀眾和平臺，你要弄清楚什麼樣的軟體將這些受眾的需求可能與特定于平臺的功能。
有三種主要類型的現代應用程式：移動 Web 應用程式、 本機應用程式和混合的應用程式。我會查看每種類型，其利弊，以及如何開發他們入門。為了這篇文章，我還沒有考慮傳統桌面 （本機） 應用程式，使用 Windows 表單或Windows Presentation Foundation(WPF) 創建的。他們不認為現代的因為它們只運行大型的桌面螢幕上並不是大量的設備。
移動 Web 網站
移動 Web 網站具有最廣泛的受眾的三個主要類型的應用程式。任何智慧手機至少可以顯示內容，並讓使用者與移動頁面進行交互，儘管一些這樣做得比別人好。隨著接觸，另一個好處是方便的部署。只是在一個位置更新和所有使用者自動都有權訪問該網站的最新版本。
如果你已經擁有一個 Web 網站和希望伴侶應用程式，或想要擴展到應用程式市場，你可以通過使您的 Web 網站移動有利於啟動。這就意味著作少量修改，但還有很大的回報，為小小的努力，尤其是建立一套完整的本機應用程式相比。目標桌面或大顯示器的 web 網站是很難在小型設備上使用。所以他們很容易使用在行動裝置上對其進行修改，將直接影響顧客滿意度。
流動性一流的功能在您的網站也會增加到達。很容易使用移動 Web 網站。有較少的快顯視窗和分心。此外，手機設計一般傾向于大正方形或矩形很容易就可以點擊的按鈕。
你可以使用你當前的 Web 開發技能打造您的 Web 網站動員的版本。這意味著使用 HTML、 CSS、 JavaScript 也許一些你最喜歡的框架。動員應用程式所需的知識並不只限于某一平臺或供應商。
兩個大的事情要注意將要移動是集成快速回應的設計和重組的內容，所以它適用于小的硬體。CSS 媒體查詢包括快速回應的設計。媒體查詢是 CSS 代碼的方式，來定義樣式規則，目標特定設備的形式因素。例如，您的網站應該有幾個設備形式因素，包括手機、 平板電腦、 phablets、 膝上型電腦和大螢幕的媒體查詢。
幸運的是，您可以生成一個類別內的幾個設備工作的媒體查詢。重組的內容涉及到一些小小的螢幕可以顯示，便於使用者查看更改佈局。這將更改的資料量。有附帶了 Twitter 的引導的預設媒體查詢，包含順應民意，機靈的流行庫設計 CSS 和風格，讓你開始。
例如， 圖 1 包含 CSS 在大片的設備上工作。中的代碼圖 1 並沒有涵蓋每個情節，但它涵蓋了其中的大部分。你可能會有一些修改，以符合您的需要對代碼進行的。
圖 1 CSS 媒體查詢的流行形式因素
Smartphones
Portrait and Landscape
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) { ... }
Landscape
@media only screen and (min-width : 321px) { ... }
Portrait
@media only screen and (max-width : 320px) { ... }
Tablets, Surfaces, iPads
Portrait and landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) { ... }
Landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape) { ... }
Portrait
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) { ... }}
Desktops, laptops, larger screens
@media only screen and (min-width : 1224px) { ... }
Large screen
@media only screen and (min-width : 1824px) { ... }
Smartphones
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { ... }
Portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { ... }
在 CSS 圖 1 不僅在移動 Web 應用程式，但原生的應用工作。這意味著它適用于所有三種類型的應用程式覆蓋在這篇文章。在 Windows 平臺上，您可以使用它在 Windows 庫中 JavaScript （WinJS） 專案和 C# 中的混合應用。回應應用程式設計的更深入地看，看看我 2013 年 10 月的專欄文章，"生成回應和現代 UI 與 CSS 為 WinJS 應用程式"(msdn.microsoft.com/magazine/dn451447)。
手機網站的使用者介面和灌輸可能不會匹配的主機作業系統，如 Web 和本機平臺傾向于表面某些設計模式和技術。很多人試圖擠入微小的螢幕的智慧手機或平板目標桌面監視器的 Web 網站。這很少效果很好。一定要考慮使用者該如何消費在小型設備上的資訊。
移動 Web 網站的一個缺點是許多功能可用到本機應用程式根本不移動 Web 網站可用的。甚至一些混合動力車享受的本機功能是遙不可及的手機網站。這主要是為了安全的原因。
對檔案系統和本地資源的訪問並不是在 Web 網站中可用，不論他們移動。這將更改瀏覽器廣泛採用檔 API 時。現在，移動 IE、 Opera Mini 和一些 iOS Safari 版本不支援它。代碼不能調用上的攝像頭、 感應器或其他硬體元件。在某種程度上，瀏覽器將公開更多的硬體功能，但現在主要是禁止入內。
若要啟用離線功能，手機網站必須使用 Web 存儲、 IndexedDb 和 AppCache 等 Web 技術。移動網站不能利用的檔案系統資源，但他們的沙箱模型仍允許一些基於用戶端的存放裝置。許多現有的 Web 網站不支援離線功能，使他們變得無用，當他們正在斷開連接。
本機應用程式
對於大多數的平臺，你的目標，你應該能夠保持你的技能。如果你正在開發在 Windows 上，您可以您的應用程式使用 C#，Visual Basic，或 c + +，同時為使用者介面的 XAML 的電源。您還可以編寫在 JavaScript 中，除了 HTML、 CSS 和 WinJS 為 UI。在安卓系統，您可以編寫在JAVA和目標 C，ios。
本機的路線時，您可以利用行銷力的 app store。真的沒關係哪家商店。事實是，他們都盡力説明市場與自由接觸或促銷你否則不會得到您的應用程式。當然，應用程式商店的缺點是潛在的使用者具有查找和安裝您的應用程式。甚至提供行銷商店給你的刺激，會有使用者找不到您的應用程式。
經常會阻止你的面向多個平臺的東西是需要重新創建至少一部分的每個目標平臺的使用者介面。這意味著你需要 UI 為 Windows 應用商店和 Windows Phone、 iOS 和安卓系統。它可以是相當大的挑戰，建立一個靈活的使用者介面，好在幾十個略有不同的螢幕上工作。然而，其結果是使用者獲得他們期望豐富、 本土經驗從品質的應用程式。最後，app store 中的評級反映提供出色的體驗的應用程式
當去的當地人，你得要映射出跨平臺戰略。考慮哪些平臺你的目標，在其中你會出版他們的順序。從移動網路還是本地與混合應用程式問題的角度來看，軌跡平滑的是移動網路到本機的混合。
即使你可能發佈本機應用程式，你會想要移動的網站很好的維護，作為移動帳戶為護城河交通。然後選擇一個平臺，也許一個滿足您的開發背景，並開始開發。有關創建跨平臺的應用程式時的各種考慮的更多指導，請參閱我 2014 年 5 月的專欄文章，"設計跨平臺現代應用程式架構"(msdn.microsoft.com/magazine/dn683800)。
Visual Studio包含很多專案範本創建 Windows 平臺的本機應用程式。在 C#、Visual Basic和 c + +，你會發現 Windows 應用商店和 Windows Phone 的應用程式。Visual Studio也包含 JavaScript 應用程式範本。因為有很多考慮，包括是否該應用程式將跨平臺，必須首先確定要使用的語言。我在 2013 年 9 月專欄，"瞭解你的語言選擇為發展現代應用程式"(msdn.microsoft.com/magazine/dn385713），可以説明您決定要使用的語言。正如你可能期望，還有豐富的生態系統的本機應用程式，包括 Api 和靶向感興趣的每個平臺的控制項周圍的工具。
大多數本機應用程式內特定平臺有一個類似的導航模式。例如，Windows 應用商店平臺採用應用程式欄和策略性地放置的後退按鈕。利用內置的導航方案，讓您的應用程式給使用者熟悉的感覺和沒有學習曲線。這會導致更高評級和更多的下載。我在 2014 年四月專欄，"導航要素在 Windows 應用商店應用程式"(msdn.microsoft.com/magazine/dn342878)，包含有關 Windows 應用商店應用程式導航的所有事實。
混合應用程式
在這之間移動 Web 網站的地方躺下本機應用程式的混合應用程式。混合應用程式是以公開應用程式格式的現有 Web 網站的內容的方式。他們是一個偉大的方式，採取您的 Web 內容，並將其打包為應用程式商店發佈。您可以在任何主要的應用程式商店發佈混合應用程式：微軟 Windows 應用商店、 谷歌播放、 蘋果應用程式商店、 亞馬遜應用商店和甚至黑莓。
一個混合應用程式的偉大在於它可以是一個已發佈的應用程式或一種權宜之計填補店裡，而你正在創建本機應用程式集。進入市場發佈的內容，從而獲取開始而你的工作對完成一個本機應用程式集，如果這是你的目標市場行銷的過程，它給你很大的進展。如果不是，一個混合應用程式可以作為一種方法，要正式列入的曝光，應用程式商店的東西。
混合應用程式可以享受與本地資源比移動網站，取決於主機作業系統規則的幾個更多的特權。這意味著網路攝像頭使用這樣的東西，或者某些感應器可能無法工作無處不在。
如果你正在考慮混合應用的好消息是你可以使用熟悉的 Web 開發技能。混合動力車是本質上是 Web 網站的包裝。其基礎是相同的老 HTML、 JavaScript 和 CSS，你已經知道。
還有協力廠商整個生態系統周圍建築，不同的應用程式商店的混合應用。正如你可能期望，有用於在Visual Studio中創建混合應用程式的範本。最受歡迎的供應商，如 Xamarin、 Telerik、 DevExpress 和 Infragistics 有工具和加快混合應用程式開發過程的控制。
在Visual StudioJavaScript 應用程式中使用 iFrame，您可以創建一個混合應用程式完全從 Web 語言。您還可以構建一個 Windows Phone HTML5 專案範本使用 C# 或Visual Basic.NET 的混合應用程式。最後，採取任何基於 XAML 的應用程式，並添加一個 web 視圖控制項同樣的效果。Web 視圖控制項的行為好像它是一個瀏覽器。這意味著您可以通過調用方法，如導航、 刷新或停止，通常映射到等效的使用者驅動的行動控制它。這裡是 web 視圖控制和一些基本的代碼，以導航到該應用程式的起始頁的一個示例：
在 MainPage.Xaml
<WebView x:Name="webView"/>
在 MainPage.Xaml.Cs
public MainPage()
{
this.InitializeComponent();
Uri targetUri = new Uri("http://rachelappel.com");
webView.Navigate(targetUri);
}
你可以進入 web 視圖事件來執行導航、 載入頁面或其他任務。例如，您可以點擊到航海日誌流行的連結，如本示例所示：
private void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender,
WebViewNavigationCompletedEventArgs args)
{
logNavigation(args.Uri.ToString());
}
Rachel Appel 是 20 多年的經驗，在 IT 行業顧問、 作者、 導師和前微軟員工。她說話在一流的行業會議，如Visual Studio活 ！，DevConnections，混合和更多。她的專長在於內開發對齊業務和技術集中在微軟開發堆疊上，打開 Web 的解決方案。阿佩爾的更多資訊，請訪問她的網址 rachelappel.com。
感謝以下的微軟技術專家對本文的審閱：FrankLa 墓葬