Il presente articolo è stato tradotto automaticamente.

Applicazioni moderne

Confronto tra siti Web mobili, app native e app ibride

Rachel Appel

Una domanda le superfici ordinariamente nel panorama di sviluppo moderno di oggi — se costruire un sito Web mobile contro un app nativa contro un ibrido app. Come sviluppatore, devi prendere il tempo di pensare attraverso alcune considerazioni prima di scappare per sviluppare software. Una tale considerazione è determinante il vostro target di riferimento. In larga misura, questo determinerà le piattaforme di destinazione.

Degli utenti che utilizzeranno molti diversi dispositivi per accedere al vostro software. Alcuni accederà apps attraverso una rete aziendale solo, mentre altre applicazioni sono orientati al consumatore. Una volta stabilito il pubblico e le piattaforme, è necessario capire che tipo di software servirà alle esigenze del pubblico, di quelle potenzialmente con funzionalità specifiche della piattaforma.

Ci sono tre tipi principali di applicazioni moderne: Mobile Web apps, applicazioni native e applicazioni ibride. Io sarò rivedere ogni tipo, i loro pro e contro e come iniziare a svilupparli. Ai fini del presente articolo, non sto considerando tradizionali applicazioni desktop (nativi), creati con Windows Form o Windows Presentation Foundation (WPF). Sono non considerati moderni, come corrono solo su grandi schermi desktop e non in una moltitudine di dispositivi.

Siti Web mobili

Siti Web mobile hanno il più ampio pubblico dei tre tipi principali di applicazioni. Qualsiasi smartphone almeno può visualizzare contenuto e permettere all'utente di interagire con una pagina per dispositivi mobili, anche se alcuni lo fanno meglio di altri. Insieme a distanza, un altro beneficio è facile distribuzione. Solo aggiornare in un'unica posizione e tutti gli utenti hanno automaticamente accesso all'ultima versione del sito.

Se già avete un sito Web e desidera un compagno di app o desidera espandersi nel mercato app, è possibile iniziare facendo il tuo sito Web mobile-friendly. Questo significa fare alcune modifiche, ma c'è una grande vincita per un piccolo sforzo, soprattutto se paragonata alla costruzione di un set completo di nativo di apps. Siti web destinati a monitor desktop o grandi sono difficili da utilizzare su dispositivi di piccole dimensioni. Modificandoli in modo che siano facili da usare su dispositivi mobili influenzerà direttamente la soddisfazione del cliente.

Rendendo la mobilità una funzionalità di prima classe nel tuo sito aumenta anche la portata. È più facile utilizzare siti Web mobile. Ci sono meno pop-up e distrazioni. Inoltre, il design mobile si appoggia generalmente verso grande quadrato o rettangolo pulsanti facili da toccare.

È possibile utilizzare tutte le vostre abilità sviluppo Web attuale per costruire una versione mobile del sito Web. Ciò significa che utilizzando HTML, JavaScript, CSS e forse alcuni dei tuoi quadri preferiti. La conoscenza necessaria per mobilitare apps non è limitata ad una determinata piattaforma o fornitore.

Due grandi cose da notare su mobile andante sono integrando una reattiva progettazione e ristrutturazione il contenuto, quindi funziona su hardware piccolo. Query supporti CSS coprire il design sensibile. Media query sono un modo per codice CSS per definire le regole di stile che fattori di forma specifico dispositivo di destinazione. Ad esempio, il sito dovrebbe avere media query per diversi fattori di forma di dispositivo, inclusi telefoni, tablet, phablets, computer portatili e schermi di grandi dimensioni.

Fortunatamente, è possibile creare query supporti che lavorano per diversi dispositivi all'interno di una categoria. Il contenuto di ristrutturazione comporta cambiando il layout per qualcosa può visualizzare un piccolo schermo che è facile per gli utenti di visualizzare. Questo cambia il volume di dati, pure. Ci sono query supporti predefiniti forniti con Twitter Bootstrap, una biblioteca popolare che contiene responsabilmente progettato CSS e stili per iniziare.

Ad esempio, Figura 1 contiene CSS che lavora su una grande fascia di dispositivi. Il codice in Figura 1 non copre ogni scenario, ma copre la maggior parte di loro. Si potrebbero avere alcune modifiche da apportare al codice per adattarsi alle vostre esigenze.

Figura 1 CSS Media query per i fattori di forma popolare

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) { ... }

Il CSS in Figura 1 non funziona solo in applicazioni Web mobili, ma applicazioni native, pure. Ciò significa che esso si applica a tutti i tre tipi di apps trattati in questo articolo. Sulla piattaforma Windows, può utilizzarla in libreria Windows per JavaScript (WinJS) progetti e applicazioni ibride in c#. Per uno sguardo più approfondito alla progettazione di app reattivo, vedere l'articolo ottobre 2013, "Costruire un reattivo e moderna interfaccia utente con CSS per WinJS Apps" (msdn.microsoft.com/magazine/dn451447).

Interfacce utente sito mobile e UXes probabilmente non corrisponde a quella dell'host OS, come il Web e piattaforme nativi tendono ad alcuni modelli di progettazione e le tecniche di superficie. Molte persone cercano di stipare un sito Web che gli obiettivi di monitor desktop in piccoli schermi di smartphone o phablet. Questo raramente funziona bene. Assicurarsi di considerare come gli utenti utilizzano informazioni su dispositivi di piccole dimensioni.

Uno svantaggio di siti Web mobile è che molte funzioni disponibili alle applicazioni native non sono semplicemente disponibili per siti Web mobile. Anche alcuni ibridi godono le funzioni native sono fuori portata per siti Web mobile. Questo è principalmente per motivi di sicurezza.

L'accesso al file system e risorse locali non è disponibile nei siti Web, indipendentemente dal fatto che sono mobili. Questo cambierà quando browser adottare ampiamente la File API. Per ora, IE Mobile, Opera Mini e alcune versioni di Safari di iOS non supportano. Codice non è possibile chiamare la webcam, sensori o altri componenti hardware. Ad un certo punto, browser esporrà più delle caratteristiche hardware, ma per ora è per lo più off-limits.

Per abilitare le funzionalità offline, siti Web mobile deve utilizzare tecnologie Web come Web Storage, IndexedDb e AppCache. Siti mobile non possono sfruttare le risorse di sistema del file, ma il loro modello di sabbiera consente ancora qualche archiviazione basate su client. Molti siti Web esistenti non supportano le funzionalità offline, rendendoli inutili quando essi sei disconnesso.

Applicazioni native

Per la maggior parte delle piattaforme che il targeting, dovrebbe essere in grado di conservare le tue abilità. Se si sta sviluppando su Windows, è possibile alimentare l'app con c#, Visual Basico C++, al fianco di XAML per l'interfaccia utente. Si potrebbe anche scrivere in JavaScript, al fianco di HTML, CSS e WinJS per l'interfaccia utente. Su Android, è possibile scrivere in Java e Objective-C per iOS.

Quando si passa il percorso nativo, è possibile sfruttare il potere del marketing di app store. Non importa quale memorizzare. Il fatto è che tutti cercano di aiutare il mercato app con esposizione libera o promo otterrebbe altrimenti. Naturalmente, lo svantaggio di un app store è che un potenziale utente deve trovare e installare l'app. Anche con la Spinta di marketing che negozio ti dà, ci saranno gli utenti che non troveranno l'app.

Qualcosa che spesso si blocca da piattaforme multiple di targeting è la necessità di ricreare almeno una parte dell'interfaccia utente per ogni piattaforma mirato. Che significa che avrete bisogno di un'interfaccia utente per Windows Store e Windows Phone, iOS e Android. Può essere abbastanza una sfida per costruire un'interfaccia utente flessibile che funziona bene su decine di schermi leggermente diversi. Tuttavia, il risultato è che gli utenti di ottenere quella ricca esperienza nativa che si aspettano dalle app di qualità. Alla fine, il rating nel deposito di app riflettono applicazioni che forniscono un'eccellente UX.

Quando andando nativo, sarà necessario delineare una strategia multipiattaforma. Considerare delle piattaforme sarà come bersaglio e l'ordine in cui li pubblicheremo. Dal punto di vista del Web mobile contro nativi contro domanda apps ibrido, il percorso più regolare è mobile Web per ibrido nativo.

Anche se si potrebbero pubblicare applicazioni native, ti consigliamo di mantenere il sito Web mobile ben tenuto, come account mobile per traffico di fossato. Poi scegliere una piattaforma, forse uno che soddisfa il vostro sfondo di sviluppatore e iniziare a sviluppare. Per maggiori indicazioni sulle varie considerazioni quando si creano applicazioni multipiattaforma, vedere l'articolo maggio 2014, "Design un Cross-Platform App architettura moderna" (msdn.microsoft.com/magazine/dn683800).

Visual Studio contiene molti modelli di progetto per la creazione di applicazioni native per la piattaforma Windows. Sotto C#, Visual Basic e C++, troverete l'App Store di Windows e Windows Phone. Visual Studio contiene anche modelli per applicazioni JavaScript. È necessario innanzitutto determinare la lingua che userete, come ci sono molte considerazioni qui, anche se l'app sarà multipiattaforma. Mio articolo di settembre 2013, "Comprensione le tue lingua scelte per lo sviluppo di moderne applicazioni" (msdn.microsoft.com/magazine/dn385713), può aiutarvi a decidere quale lingua utilizzare. Come ci si potrebbe aspettare, c'è un ecosistema ricco di strumenti per applicazioni native API e controlli ogni piattaforma di interesse di targeting.

Applicazioni più nativi all'interno di una particolare piattaforma hanno un simile paradigma di navigazione. Ad esempio, la piattaforma Windows Store impiega barre di app e un pulsante indietro in posizione strategica. Approfittando di schemi di navigazione incorporata permette l'app dare agli utenti una sensazione di familiarità e nessuna curva di apprendimento. Questo si traduce in migliori recensioni e download più. Mia colonna aprile 2014, "Essentials navigazione nelle applicazioni Windows Store" (msdn.microsoft.com/magazine/dn342878), contiene tutti i fatti riguardanti la navigazione app Store di Windows.

Applicazioni ibride

In che luogo tra siti Web mobile e app native si trovano le applicazioni ibride. Applicazioni ibride sono un modo per esporre il contenuto di siti Web esistenti in formato app. Sono un ottimo modo per prendere il vostro Web content e imballarlo per pubblicazione in un deposito di app. È possibile pubblicare applicazioni ibride in uno dei negozi principali app: Microsoft Windows Store, Google Play, Apple App Store, Amazon Appstore e anche mondo BlackBerry.

La cosa grandiosa di un app ibrido è che può essere un app pubblicate o una misura di ripiego per riempire il negozio, mentre si sta lavorando sulla creazione di un set di applicazioni native. Ti dà grandi progressi nel mercato di pubblicare qualcosa e ottenere il processo di marketing iniziato mentre si lavora sul completamento di una serie di app nativa, se quello è il tuo obiettivo. Se così non fosse, un ibrido app può servire come un modo per avere qualcosa di formalmente elencati nell'app store per l'esposizione.

Applicazioni ibride possono godere di alcuni privilegi più con le risorse locali di siti Web mobili, secondo le regole del sistema operativo host. Ciò significa che le cose come l'uso di webcam o determinati sensori non potrebbero funzionare ovunque.

La buona notizia, se stai pensando di applicazioni ibride è che si arriva a utilizzare la conoscenza di competenze di sviluppo Web. Ibridi sono essenzialmente sito Web wrapper. La loro fondazione è lo stesso vecchio HTML, JavaScript e CSS che già sapete.

C'è un intero ecosistema di terze parti intorno a costruire applicazioni ibride per i vari negozi di app. Come ci si potrebbe aspettare, ci sono modelli per la creazione di applicazioni ibride in Visual Studio. Fornitori popolari come Novell, Telerik, DevExpress e Infragistics hanno strumenti e controlli che accelerare il processo di sviluppo di app ibrido.

Utilizzando un iFrame in Visual Studio applicazioni JavaScript, è possibile creare un ibrido app completamente da linguaggi Web. Si può anche costruire un app ibrido utilizzando il modello di progetto Windows Phone HTML5 con C# o Visual Basic .NET. Infine, prendere qualsiasi applicazione basata su XAML e aggiungere un controllo WebView per lo stesso effetto. Controllo WebView si comporta come se fosse un browser. Questo significa che voi controllarlo chiamando metodi come Navigate, Refresh o Stop, spesso il mapping a un'equivalente azione guidata dall'utente. Ecco un esempio di controllo WebView e qualche codice di base che si accede a una pagina di avvio per l'app:

In MainPage. xaml

<WebView x:Name="webView"/>

Nel file MainPage.Xaml.Cs

public MainPage()
{
  this.InitializeComponent();
  Uri targetUri = new Uri("http://rachelappel.com");
  webView.Navigate(targetUri);
}

Si può toccare in WebView eventi per eseguire la navigazione, il caricamento della pagina o altre attività. Ad esempio, è possibile toccare nella navigazione per registrare i collegamenti popolari, come in questo esempio:

private void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender,
  WebViewNavigationCompletedEventArgs args)
{
  logNavigation(args.Uri.ToString());
}

---

Rachel Appel è un consulente, autore, mentore ed ex dipendente di Microsoft con più di 20 anni di esperienza nel settore IT. Lei parla a conferenze di settore superiore come Visual Studio Live!, DevConnections, MIX e altro ancora. Sua competenza si trova all'interno di sviluppare soluzioni che allineare business e tecnologia concentrandosi sullo stack Microsoft dev e aprire il Web. Per ulteriori informazioni su Appel, visitare il suo Web site a rachelappel.com.

Grazie al seguente Microsoft esperto tecnico per la revisione di questo articolo: Frank La Vigne