Aplicativos modernos

Artigo
04/09/2015

Uma primeira abordagem de dispositivos móveis para desenvolvimento de aplicativos modernos

Rachel Appel Neste momento muito, milhões de dispositivos móveis estão acessando milhões de sites e aplicativos móveis. De acordo com Pew Research e outros estatísticos, mais de 55 por cento dos norte-americanos usam um smartphone para acessar a Internet e 30 por cento dos norte-americanos usam apenas um telefone para acessar a Internet. Esses números estão crescendo conforme os celulares se tornaram mais baratos e fáceis de usar. Se você pode ler a gravação na parede, você sabe que deve ir com um design de dispositivos móveis.

Os usuários podem ter a melhor experiência em todos os dispositivos — de desktops a telefones — quando um site ou aplicativo é projetado com mobilidade primeiro. É difícil reduzir a escala de uma tela grande para uma pequena. A interface do usuário simplesmente não funciona. Não procure além do Microsoft Windows Mobile 6.5 (não deve ser confundido com o Windows Phone) como principal exemplo de uma interface do usuário da área de trabalho reduzida e pouco utilizável.

No entanto, você pode aumentar de um telefone para uma área de trabalho sem jogar a capacidade de uso pela janela. Você pode adicionar recursos à experiência durante o dimensionamento, tornando as transições da interface do usuário simples. Essa técnica é chamada de aprimoramento progressivo. Sites e aplicativos se beneficiam desse tipo de estratégia de desenvolvimento de dispositivos móveis.

Primeiro dispositivos móveis significa design responsivo

Ajustar o conteúdo de acordo com vários tamanhos de tela é o requisito principal para aplicativos de vários dispositivos modernos. Você precisa executar uma das duas abordagens. Você pode criar duas versões de software; uma para desktops e computadores maiores e outra para fatores de forma menores. A outra opção é criar o software para ajustar a interface do usuário em resposta ao dispositivo no qual ele está sendo usado.

Você estará lidando com muitos tipos diferentes de dispositivos. Alguns você pode estar vestindo e outros podem estar ao seu lado. Em breve, você poderá acabar pensando em dispositivos do Internet das Coisas (IoT) como parte dos requisitos de design para desenvolvimento de aplicativos. Dispositivos IoT como Fitbit ou Microsoft Band são dispositivos portáteis que controlam as atividades do usuário.

Outros exemplos de dispositivos IoT incluem o termostato inteligente (como o Nest), um bloqueio de porta inteligente ou o software em um novo veículo. Muitos dispositivos IoT funcionam em conjunto com um site móvel ou aplicativo móvel, como uma máquina de café inteligente. Como os computadores estão se tornando menores e mais barato, mais dispositivos IoT inundam o mercado com mais maneiras de usá-los.

Ficar móvel primeiro significa considerar as implicações da plataforma. Os aplicativos nativos têm desenvolvimento, arquitetura e, às vezes, requisitos de negócios diferentes de aplicativos da Web. Aqui estão algumas considerações de design para um aplicativo de dispositivos móveis:

Interface de usuário responsiva
Navegação
Listas e grades de itens e formatação de conteúdo
Armazenamento, incluindo o armazenamento offline
Suporte ao toque, caneta ou entrada alternativa
Gerenciamento de recursos e desempenho

Vou considerar isso com mais detalhes. Sites da Web, aplicativos de arquitetura de página única (SPA) e híbridos usam CSS para implementar o design responsivo. Aplicativos XAML e aplicativos em plataformas Android ou iOS têm formas privadas diferentes de criar uma interface de usuário responsiva. Por exemplo, o XAML usa um objeto chamado Resources que contém informações de estilo. Você pode aplicar recursos aos controles XAML para processar automaticamente de maneira favorável e responsiva de acordo com o tamanho de tela do dispositivo.

Nos aplicativos HTML (Web ou nativo, como a Biblioteca do Windows para JavaScript [WinJS]), você pode usar o CSS para definir estilos e estética. O CSS usa a noção de uma consulta de mídia para criar uma interface de usuário responsiva. As consultas de mídia são regras de CSS que respondem a diferentes tipos de mídia. Esses tipos de mídia representam diferentes tamanhos de tela, impressa ou TV, braille, orientação da tela e outros recursos. Quando você cria uma consulta de mídia, especifica as regras de CSS para esses recursos suportados do dispositivo, como mostrado no código a seguir:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* style rules */
}
@media only screen and (min-width : 321px) {
/* style rules */
}
@media only screen and (max-width : 320px) {
/* style rules */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* style rules */
}
@media only screen  and (min-width : 1224px) {
/* style rules */
}

O CSS aqui funciona para smartphones nos modos retrato e paisagem e iPads nos modos retrato e paisagem e, finalmente, dispositivos maiores, como laptops ou desktops. Para ler mais sobre como usar o CSS para aplicativos nativos do Windows, consulte "Criar uma interface do usuário moderna e responsiva com CSS para aplicativos do WinJS" em msdn.microsoft.com/magazine/dn451447.

Para o bom design responsivo de dispositivos móveis, não oriente para tipos específicos de dispositivos em seu código. Você nunca poderá acompanhar os diversos disponíveis. Sempre oriente para uma variedade de tamanhos de tela de destino. Por exemplo, você talvez queira orientar para dispositivos de 3 a 4 polegadas, dispositivos de 5 a 8 polegadas, tablets de 10 a 13 polegadas e laptops e desktops maiores de 13 polegadas. Dessa forma, você pode criar uma interface do usuário que funciona para o maior público possível. Se concentre em apenas alguns tamanhos de telefone comuns. Esse código continuará a ser mantido conforme o tempo passa e novos dispositivos surgem no mercado, porque você já está os direcionando por intervalo de tamanho.

Uma maneira fácil de fazer isso e criar um projeto que pode ser dimensionado do smartphone para um desktop é escolher um tipo de projeto de Aplicativo Universal no Visual Studio para a Windows Store e Windows Phone. Aplicativos universais têm todos os códigos e a estrutura para reagir aos clientes diferentes. Você pode usar XAML ou HTML para criar um Aplicativo Universal. Esses aplicativos compartilham uma parte significativa do seu código, portanto, você se acostuma a reutilizar muito código. Se você precisar se atualizar sobre os aplicativos universais, consulte "Criar aplicativos universais para a plataforma Windows" (msdn.microsoft.com/magazine/dn781364).

Os desenvolvedores geralmente exibem dados em formatos de tabela ou lista em sites e aplicativos. Listas pequenas em telefones funcionarão bem em telas maiores, embora haja espaço desperdiçado. Uma interface do usuário aprimorada progressivamente adicionará e formatará mais conteúdo à medida que aumenta o tamanho da tela. Isso também será feito ao inverso, removendo e reformatando a tela para exibir menos conteúdo em dispositivos menores.

Como você pode esperar, aplicativos de telefone tendem a mostrar somente o conteúdo mais importante, porque smartphones são pequenos e o espaço é limitado. Aplicativos de telefone geralmente são diretos. Embora haja anúncios, eles são pequenos e normalmente localizados nos mesmos locais. Como há muito espaço até na menor das áreas de trabalho, você verá anúncios e conteúdo que nem sempre são relevantes para o tópico da página da Web. Portanto, quando você adiciona conteúdo, torne-o relevante e significativo para que não atrapalhe o usuário. O conteúdo adicionado pode ser barras laterais sobre o próprio conteúdo, anúncios relevantes ou até mesmo alguns links rápidos.

Navegação de dispositivos móveis

É importante ter um esquema de navegação simples e fácil de usar. A navegação é uma maneira de interagir com o aplicativo em si. Também é uma maneira de acessar o conteúdo desejado. Cada aplicativo tem navegação; infelizmente, vários aplicativos têm navegação ruim.

Software de desktop nativo, como o Windows Forms, tende a usar os menus em cascata tradicionais como navegação. Sites da Web geralmente pode fazer o mesmo. Na verdade, sites da Web normalmente usam terríveis menus suspensos de JavaScript que exigem a precisão de um cirurgião. Felizmente, essa prática está desaparecendo rapidamente. É óbvio que esses tipos de menus simplesmente não funcionam em smartphones. O que funciona em smartphones são várias técnicas de navegação específicas:

Grandes blocos: Quadrado ou retângulo, muito semelhante ao Windows 8.
Listas de toque amigável: Retângulos que são largos e altos o suficiente para todos os tamanhos de dedo e polegar.
Guias deslizantes: Eles permitem que os usuários façam movimentos horizontais curtos, uma ótima maneira de apresentar um menu de opções para uma determinada categoria ou recurso.
Barras de aplicativo encaixadas: As opções estão em uma faixa na parte superior ou inferior da tela. Você pode ocultar a barra de aplicativos e mostrá-la quando o usuário passar para solicitá-la.

Você também pode usar uma combinação de técnicas de navegação, como guias deslizantes com uma boa lista de opções de toque. Geralmente, esses tipos de menus de navegação são parte do conteúdo em si, como um aplicativo de notícias que permite tocar na manchete textual para ler o artigo. O que você escolher, verifique se os usuários podem navegar também para trás. Um botão Voltar proeminente funciona bem.

Em aplicativos da Windows Store, o paradigma de navegação usa o sistema de grades do Windows para exibir dados e permite que o usuário clique ou toque para navegar até os detalhes sobre o item de grade atual. Há também um botão Voltar proeminente, para que o usuário sempre possa reverter uma série de etapas de navegação. Como alternativa, os aplicativos podem apresentar uma barra de aplicativos completa de opções de navegação.

Armazenamento de dados e recursos offline

É raro encontrar um aplicativo que não se beneficia de algum suporte offline. Até mesmo companhias aéreas que enviam passagens aéreas como um hiperlink por meio de texto são simplesmente páginas da Web que não serão exibidos se você não tiver nenhuma conectividade. Um aplicativo de qualidade deve oferecer suporte aos recursos offline.

Muitos aplicativos não armazenam conteúdo localmente. Eles chamam um serviço Web ou fazem uma chamada remota para recuperar dados e salvar os dados remotamente. Claro, sempre há uma pequena parte dos dados que você precisa armazenar localmente, mesmo assim, como preferências e configurações de aplicativo ou usuário. Armazene coisas que só fazem sentido armazenar localmente, como o local atual em um eReader ou um jogo ou a cor de tema do aplicativo.

Aqui é onde os requisitos de armazenamento são diferentes dependendo da plataforma de destino. Em aplicativos de cliente HTML, você pode usar o Armazenamento de Modelo do Objeto de Domínio (DOM) ou IndexedDB. Em aplicativos nativos de XAML, você pode usar as configurações do aplicativo local ou um objeto StorageFile.

Armazenamento de DOM (armazenamento local do HTML5): Isso é um contêiner leve para dados locais em aplicativos HTML.
IndexedDB: Armazena uma quantidade significativa de dados localmente. Use o IndexedDB em aplicativos HTML e armazene dados relacionais ou BLOB em pares de chave-valor.
Configurações de aplicativo: Aplicativos XAML e HTML da Windows Store e Windows Phone podem acessar estruturas de dados de configurações do aplicativo. O aplicativo pode armazenar dados nesses objetos pequenos. Eles geralmente contêm configurações, como o nome de logon, a cor do tema ou outras configurações.
Arquivos de armazenamento: Esses são bons arquivos antigos, mas com uma API para a Windows Store e aplicativos do Windows Phone XAML ou HTML.

Você pode salvar as configurações do aplicativo no objeto ApplicationDataContainer somente leitura. Você acessaria isso com a propriedade localSettings applicationData. O código a seguir recupera as configurações de aplicativos locais e móveis e em suas pastas:

var localSettings = applicationData.localSettings;
var roamingFolder = applicationData.roamingFolder;
var roamingSettings = applicationData.roamingSettings;

Configurações locais, obviamente, só estão disponíveis localmente no dispositivos associados, enquanto que as configurações de mobilidade podem ser acessadas por vários dispositivos ou locais. Para obter mais informações sobre o armazenamento de dados em aplicativos da Windows Store, consulte "Dados de acesso e opções de armazenamento nos aplicativos da Windows Store" (msdn.microsoft.com/magazine/jj991982).

Desenvolvimento e arquitetura de dispositivos móveis

O importante sobre dispositivos móveis é, na verdade, verificar se o software que você está criando funciona primeiro em dispositivos móveis. É mais fácil dimensionar maiores que menores quando se trata de telas e experiência do usuário. Você sempre pode adicionar informações como aumento de tamanhos de tela.

Desempenho é extremamente importante para usuários móveis. As pessoas pagam por planos de dados caros, mas geralmente limitados. Eles não querem esperar, pagando para fazer o download de uma página da Web ou aplicativo. Se você pensou que acabaram os dias onde você precisa gerenciar e reservar todos os bits e bytes, você está pensando prematuramente. Gerenciar recursos e memória é muito importante no desenvolvimento para dispositivos móveis.

Os telefones e dispositivos IoT atuais estão em níveis comparáveis de proficiência tecnológica aos seus colegas desktops do passado. Muitos dispositivos IoT ainda têm menos de 1GB de RAM, mesmo que a capacidade de armazenamento atinja níveis astronômicos. Não vamos nos esquecer a vida útil da bateria. Os usuários despejarão seu aplicativo rapidamente se ele descarregar a bateria. E você deseja usar o máximo do mesmo código base possível entre plataformas. Abordagens de dispositivos móveis funcionam para sites e aplicativos. Lembre-se de que não é apenas sobre o tamanho de tela.

Como parte de uma arquitetura de dispositivos móveis, primeiro determine que tipo de aplicativo móvel você produzirá. É um site da Web móvel? Talvez seja um aplicativo nativo. Quantas plataformas ele deve suportar? Se você tiver um site mobilizado existente e deseja entrar em uma loja de aplicativos rapidamente, talvez híbrido seja a melhor opção.

Se precisar de ajuda para decidir qual escolher, leia "Sites móveis versus aplicativos nativo versus aplicativos híbridos" em msdn.microsoft.com/magazine/dn818502. Depois de ter uma visão clara do que criar, a próxima etapa é ilustrar a arquitetura do aplicativo. Para obter mais detalhes sobre como planejar seu site ou aplicativo móvel, consulte minha coluna, "Criar uma arquitetura de aplicativo moderna entre plataformas" em msdn.microsoft.com/magazine/dn683800.

Os desenvolvedores independentes que estão orientados para lojas de aplicativos pensam em dispositivos móveis. Seus destinos de implantação são geralmente uma ou mais lojas de aplicativos. Os desenvolvedores corporativos tendem a implantar em um local na rede interna ou talvez na sua nuvem privada.

No desenvolvimento empresarial, o JavaScript ganhou muita força. Os desenvolvedores estão até mesmo executando no servidor. Agora, é provavelmente o mais popular do mundo. Goste ou não, os desenvolvedores usam JavaScript como a maneira mais fácil de fornecer software de plataforma cruzada na forma de um aplicativo da Web. Até os desenvolvedores corporativos estão usando mais JavaScript para aprimorar as interfaces do usuário do aplicativo de negócios. Isso é especialmente verdadeiro com o advento do movimento BYOD (Traga seu próprio dispositivo) na empresa, porque os operadores utilizam seus iPads, Surfaces e smartphones nos espaços de trabalho em todos os lugares.

Se você estiver escrevendo aplicativos JavaScript ou SPA para empresas, é possível considerar o uso do TypeScript. O TypeScript implementou todos os requisitos de ECMAScript 6 pelos quais os desenvolvedores estão esperando pacientemente, como uma herança, bem como um conjunto de tipos, orientação a objeto e outros recursos que ajudam você a gerar melhor código, arquivo e organização de projeto. É uma boa ideia se familiarizar com os padrões de design da interface do usuário e padrões de desenvolvimento. Ambos ajudam em uma estrutura mais organizada do projeto. Antes de usar o TypeScript em seus projetos de JavaScript empresarial, consulte "Use TypeScript em aplicativos modernos" em msdn.microsoft.com/magazine/dn201754.

Conclusão

A vantagem mais importante aqui é que criar software com o dispositivo móvel em mente se tornará mais fácil dimensionar para maior. Interfaces do usuário projetadas progressivamente geralmente significam uma arquitetura mais modular. Isso inerentemente torna mais fácil codificar para manter e adicionar novos recursos. Além disso, os usuários certamente apreciam uma interface de usuário bem projetada e elegante. Uma estratégia de dispositivo móvel força você a se concentrar nos dados e recursos mais importantes. Esses mesmos recursos são o que fazer para classificações altas e adicionar mais vendas em lojas de aplicativos.

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