Aplicativos modernos

Sites para Celular x Aplicativos Nativos x Aplicativos Híbridos

Rachel Appel

Uma pergunta normalmente surge no cenário de desenvolvimento moderno atual—construir um site para celular ou um aplicativo nativo ou um aplicativo híbrido. Como desenvolvedor, você precisa pensar sobre algumas considerações antes de começar a desenvolver o software. Uma dessas considerações é determinar seu público-alvo. Em grande parte, isso determinará as plataformas alvo.

Seus usuários irão utilizar muitos diferentes dispositivos para acessar o seu software. Alguns vão acessar os aplicativos pela rede da empresa apenas, enquanto outros aplicativos terão o consumidor como foco. Uma vez determinado o público e a plataforma alvo, você deve decidir que tipo de software atenderá às necessidades desse público, potencialmente com recursos específicos à plataforma.

Há três tipos de aplicativo modernos: aplicativos de sites para celular, aplicativos nativos e aplicativos híbridos. Analisarei cada tipo, seus pontos positivos e negativos e como começar a desenvolvê-los. Apenas para esse artigo, não estou considerando os aplicativos (nativo) tradicionais de área de trabalho criados com o Windows Forms ou com o Windows Presentation Foundation (WPF). Eles não são considerados modernos, pois eles são executados apenas em grandes telas de área de trabalho e não em uma variedade de dispositivos.

Sites para Celular

Sites para celular têm o público mais amplo dos três tipos principais de aplicativos. Qualquer smartphone pode, ao menos, exibir o conteúdo e permitir que o usuário interaja com uma página móvel, embora alguns façam isso melhor do que outros. Juntamente com acesso, um outro benefício é a facilidade de implantação. Atualize apenas em um local e todos os usuários automaticamente terão acesso à última versão do site. 

Se você já tem um site e quer um aplicativo complementar ou quer expandir no mercado de aplicativos, você pode começar fazendo o seu site para usuários de dispositivos móveis. Isso significa fazer algumas modificações, mas há uma grande recompensa para um pequeno esforço, especialmente quando comparado a construção de um grupo de aplicativos nativos. Sites destinos à área de trabalho ou a grandes monitores são difíceis para serem usados por pequenos dispositivos. Modificá-los para que eles fiquem mais fáceis para serem usados em dispositivos móveis irá afetar diretamente a satisfação dos clientes.

Fazer da mobilidade um recurso de alta qualidade no seu site aumenta também o acesso. É mais fácil usas sites para celular. Há poucos pop-ups e distrações. Além disso, o design do celular geralmente tende a ter botões retangulares ou grandes quadrados que são fáceis de serem tocados.

Você pode usar todas suas atuais habilidades de desenvolvimento de sites para criar um versão do seu site para dispositivos móveis. Isso significa usar HTML, JavaScript, CSS, e talvez alguns dos seus frameworks preferidos. O conhecimento necessário para tornar aplicativos móveis não é limitado a uma certa plataforma ou fornecedor.

Duas coisas importantes de se observar ao tornar móvel são integrar um design com capacidade de resposta e reestruturar o conteúdo para que funcione em um hardware pequeno. Consultas de mídia do CSS cobrem a capacidade de resposta do design. Consultas de mídia são uma forma de codificar o CSS para definir as regras de estilo dos fatores de forma do dispositivo alvo específico. Por exemplo, o seu site deve ter consultas de mídia para diversos fatores de forma de dispositivo, incluindo telefones, tablets, phablets, laptops e grandes telas.

Felizmente, você pode criar consultas de mídia que funcionam para diferentes dispositivos dentro de uma categoria. Reestruturar o conteúdo implica alterar o layout de uma forma que uma tela pequena possa exibi-lo facilmente para seus usuários. Isso altera o volume de dados também. Há consultas de mídia padrões que vêm com o Twitter Bootstrap, uma biblioteca popular que contém o CSS projetado com capacidade de resposta e estilos para você começar.

Por exemplo, a Figura 1 contém o CSS que funciona com grande grupo de dispositivos. O código na Figura 1 não cobre todos os cenários, porém cobre os mais importantes. Talvez algumas modificações devam ser feitas para que o código atenda às suas necessidades.

Figura 1 CSS Consultas de Mídia para Fatores de Forma Populares

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

O CSS na Figura 1 não apenas funciona em aplicativos para celular, mas também em aplicativos nativos. Isso significa que é aplicável aos três tipos de aplicativos cobertos nesse artigo. Na plataforma Windows, você pode usá-lo em projetos na Biblioteca do Windows para JavaScript (WinJS) e aplicativos híbridos no C#. Para uma análise mais detalhada em design the aplicativo com capacidade de resposta, consulte minha coluna de outubro de 2013, “Crie uma interface de usuário dinâmica e moderna com CSS para aplicativos do WinJS” (msdn.microsoft.com/magazine/dn451447).

Interfaces de usuário e Uxes de sites para celular provavelmente não vão corresponder aos do sistema operacional de host, pois as plataformas Web e nativas tendem a trazer à tona certos padrões de design e técnicas. Muitas pessoas tentam espremer um site destinado a monitores com áreas de trabalho dentro das pequenas telas de smartphone ou phablet. Isso raramente dá certo. Lembre-se de considerar como os usuários consomem informações em dispositivos pequenos.

Um lado negativo dos sites para celular é que muitos recursos disponíveis no aplicativo nativo simplesmente não estão disponíveis nos sites para celular. Até mesmo alguns dos recursos nativos que os híbridos possuem estão fora do alcance dos sites para celular. Isto acontece principalmente por questões de segurança.

Acesso ao sistema de arquivos e aos recursos locais não estão disponíveis nos sites, indiferente se são sites para celular ou não. Isso mudará quando os navegadores adotarem amplamente o Arquivo API. No momento, o Internet Explorer Mobile, o Opera Mini e algumas versões do Safari no iOS não suportam isso. O código não pode chamar na webcam, nos sensores em outros componentes do hardware. Em algum momento, os navegadores irão expor mais dos recursos do hardware, mas agora a maioria deles está inacessível.

Para habilitar capacidades off-line, os sites para celular têm que usar tecnologias da Web como Armazenamento na Web, IndexedDb e AppCache. Os sites para celular não aproveitam dos recursos de sistema de arquivo, mas seus modelos de área restrita ainda permitem um pouco de armazenamento com base no cliente. Muitos sites para celular atuais não suportam capacidades off-line, tornando-os inúteis quando estão desconectados.

Aplicativos Nativos

Para a maioria das plataformas que está almejando, você deve ser capaz de manter suas habilidades. Se estiver desenvolvendo no Windows, você pode potencializar o seu aplicativo com o C#, Visual Basic, ou C++, juntamente com o XAML para a interface do usuário. Você pode também gravar em JavaScript, juntamente com HTML, CSS e WinJS para a interface do usuário. No Android, você pode gravar em Java e Objective-C para o iOS.

Quando escolher o caminho nativo, é possível alavancar o poder de vendas de sua loja de aplicativos. Não importa qual loja. O fato é que, todas elas tentam ajudar a vender seu aplicativo com exposição e promoções grátis que você não teria de outra forma. É claro que o lado negativo de uma loja de aplicativos é do possível usuário ter que encontrar e instalar o seu aplicativo. Mesmo com o incentivo de marketing que a loja lhe dá, haverá usuários que não vão encontrar o seu aplicativo.

Algo que normalmente o bloqueia de direcionar múltiplas plataformas é a necessidade de recriar, ao menos parte, da interface do usuário para cada plataforma alvo. Isso significa que é necessário ter um interface de usuário para Windows Store e Windows Phone, iOS e Android. Pode ser um grande desafio criar um interface de usuário flexível que funcione bem em dezenas de telas levemente diferentes. Entretanto, o resultado é o usuário ter a rica experiência rica do aplicativo nativo, esperada dos aplicativos de qualidade. No final das contas, as avaliações da loja de aplicativos refletem os aplicativos que oferecem uma excelente experiência do usuário.

Quando optar pelo nativo, será necessário mapear as estratégias entre várias plataformas. Considere quais as plataformas que irá focar e coloque-as na ordem em que vai publicá-las. Da perspectiva de perguntas de aplicativos de site para celular x nativo x híbrido, o caminho mais fácil é site para celular para híbrido para nativo.

Embora você possa publicar aplicativos nativos, é necessário manter o site para celular em boas condições, pois o móvel é responsável pela maior parte do tráfego. Por isso, escolha uma plataforma, talvez uma que atenda às necessidades de de segundo plano do seu desenvolvedor, e comece a desenvolver. Para obter mais informações sobre diversas considerações ao criar aplicativos para várias plataformas, consultes a minha coluna de maio de 2014, “Design uma arquitetura de aplicativo moderno para várias plataformas” (msdn.microsoft.com/magazine/dn683800).

O Visual Studio contém muitos modelos de projetos para criar aplicativos nativos para a plataforma Windows. No C#, Visual Basic e C++, você encontrará a Windows Store e os aplicativos do Windows Phone. O Visual Studio também contém modelos para aplicativos do JavaScript. Deve ser determinado a linguagem a ser usada, pois há muitas considerações nisso, inclusive se o aplicativo será entre plataformas. Minha coluna de setembro de 2013, “Compreendendo as opções de linguagem para o desenvolvimento de aplicativos modernos” (msdn.microsoft.com/magazine/dn385713), pode ajudá-lo a decidir qual idioma usar. Como pode ser esperado, há um ecossistema avançado de ferramentas ao redor dos aplicativos nativos incluindo APIs e ele controla o direcionamento do interesse de cada plataforma.

A maioria dos aplicativos nativos dentro de uma plataforma específica tem um paradigma de navegação similar. Por exemplo, a plataforma Windows Store emprega barras de aplicativos e um botão voltar estrategicamente localizado. Para aproveitar os esquemas de navegação integrados deixe o seu aplicativo dar aos usuários uma sensação familiar e nenhuma curva de aprendizagem. Isso resulta em melhores avaliações e mais downloads. Minha coluna de abril de 2014, “Essenciais de navegação na loja de aplicativos Windows ” (msdn.microsoft.com/magazine/dn342878), contém todos os fatos sobre navegação na loja de aplicativos Windows.

Aplicativos Híbridos

Entre os sites para celular e os aplicativos nativos estão os aplicativos híbridos. Os aplicativos híbridos são o caminho para expor o conteúdo de sites existentes em formato de aplicativo. Eles são uma excelente forma de lançar o conteúdo e o pacote do seu site para ser publicado em uma loja de aplicativos. Você pode publicar aplicativos híbridos em qualquer uma das grandes lojas de aplicativos: Microsoft Windows Store, Google Play, Apple App Store, Amazon Appstore e até mesmo BlackBerry World.

A grande vantagem do aplicativo híbrido é que ele pode ser um aplicativo publicado ou uma medida provisória enquanto você está trabalhando na criação de um grupo de aplicativos nativos. Essa é uma grande vantagem no mercado para publicar algo e deixar o processo de marketing iniciar enquanto você trabalha para completar o grupo de aplicativos nativos, se esse for o objetivo. Se não for, o aplicativo híbrido pode servir como uma maneira de ter algo formalmente listado nas lojas de aplicativos para criar exposição.

Os aplicativos híbridos podem desfrutar de mais alguns privilégios com recursos locais do que os sites para celular, dependendo das regras de sistema operacional de host. Isso significa que coisas como o uso de webcam ou certos sensores podem não funcionar em nenhum lugar.

A boa notícia se você estiver considerando os aplicativos híbridos é você se familiarizar com as habilidades de desenvolvimento de sites. Os híbridos são essencialmente as embalagens dos sites. Sua base é a mesma velha conhecida HTML, JavaScript e CSS.

Há um terceiro ecossistema inteiro construído ao redor de aplicativos híbridos por várias lojas de aplicativos. Como você já devia esperar, há modelos para a criação de aplicativos híbridos no Visual Studio. Fornecedores populares como Xamarin, Telerik, DevExpress e Infragistics têm ferramentas e controles que aceleram o processo de desenvolvimento do aplicativo híbrido.

Usando um iFrame nos aplicativos JavaScript do Visual Studio, você pode criar um aplicativo híbrido completamente a partir de linguagens Web. Você também pode criar um aplicativo híbrido usando o modelo de projeto HTML5 do Windows Phone com C# ou Visual Basic .NET. Finalmente, pegue qualquer aplicativo com base em XAML e adicione um controle WebView para o mesmo efeito. O controle WebView se comporta como se fosse um navegador. O que significa que você o controla ao chamar métodos como Navegar, Atualizar ou Parar, frequentemente mapeando uma ação equivalente voltada ao usuário. Este é um exemplo de controle WebView e de alguns códigos básicos de navegação para uma página inicial de aplicativo:

Em MainPage.Xaml

<WebView x:Name="webView"/>

Em MainPage.Xaml.Cs

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

Toque em eventos WebView para fazer uma navegação, carregamento de página ou outras tarefas. Por exemplo, toque em navegação para entrar em links populares, como no exemplo:

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

Rachel Appel é consultora, autora, mentora e antiga funcionária da Microsoft com mais de 20 anos de experiência no setor de TI. Ela dá palestras em importantes congressos do setor, como o Visual Studio Live!, o DevConnections, o MIX e muitos outros. Sua experiência está ligada a soluções de desenvolvimento que alinham negócios e tecnologia com foco na pilha de desenvolvimento da Microsoft e em Web aberta. Para obter mais informações sobre a Appel, visite seu site em rachelappel.com.

Agradecemos ao seguinte especialista técnico da Microsoft pela revisão deste artigo: Frank La Vigne