Existem 6,8 bilhões de pessoas no planeta, 5,1 bilhões das quais possuem um telefone celular. E hoje, uma porcentagem cada vez maior desses dispositivos são smartphones. De acordo com um recente Estudo do Pew Research Center , o número de usuários que acessam a Internet em seus smartphones mais que dobrou nos últimos 5 anos, assim como o número de usuários que baixam e usam aplicativos móveis . Daqueles que usam a Internet ou e-mail em seus telefones, mais de um terço fica online principalmente por meio de seus dispositivos portáteis.

Na verdade, a computação móvel está se tornando cada vez mais onipresente ... e é incrível.

Exceto, é claro, quando não é.

Como um usuário de dispositivo móvel, poucas coisas são tão frustrantes e difíceis de navegar como um aplicativo da web móvel mal projetado ou mesmo um aplicativo nativo.

E como um desenvolvedor de aplicativos móveis , poucas coisas podem ser tão irritantes quanto lutar para oferecer suporte ao maior número possível de clientes móveis, cada um com seu próprio conjunto frustrante de idiossincrasias. Independentemente de você escolher desenvolver um aplicativo da web móvel, nativo ou híbrido, a busca por oferecer suporte a vários navegadores móveis, dispositivos mais exóticos e enfrentar várias plataformas pode ser uma experiência realmente angustiante.

Como um usuário de dispositivo móvel, poucas coisas são tão frustrantes e difíceis de navegar como uma web móvel mal projetada ou um aplicativo nativo. E, como desenvolvedor de aplicativos móveis, poucas coisas podem ser tão irritantes quanto se esforçar para oferecer suporte ao maior número possível de clientes móveis, cada um com seu próprio conjunto frustrante de idiossincrasias.

Obviamente, nem todo desenvolvedor hoje precisa se preocupar com o suporte a clientes móveis. Mas a natureza cada vez mais onipresente dos dispositivos e aplicativos móveis sugere fortemente que aqueles que não precisam oferecer suporte aos clientes móveis hoje, muito provavelmente precisarão fazê-lo em um futuro não muito distante. Então, se você ainda não está pensando desenvolvimento de aplicativo móvel , você provavelmente deveria estar.

Aplicativo da web móvel x aplicativo nativo x aplicativo híbrido

Como acontece com a maioria das seleções de tecnologia, não há uma resposta única para todos quando se trata do tipo de aplicativo móvel a ser desenvolvido. Existem várias práticas recomendadas de aplicativos da web a serem consideradas, nem todas técnicas. Quem é seu público alvo? Eles são mais propensos a preferir uma web móvel ou um aplicativo nativo? Qual é a diferença entre aplicativos nativos e híbridos? Quais recursos de desenvolvimento você possui e com quais tecnologias móveis eles estão mais familiarizados? Qual é o modelo de licenciamento e vendas que você está imaginando para seu produto?

De modo geral (embora sempre haja exceções), a rota do aplicativo móvel da web é mais rápida e barata do que a rota do aplicativo móvel nativo, especialmente quando o objetivo é oferecer suporte a uma ampla variedade de dispositivos. Por outro lado, pode haver recursos nativos para o dispositivo móvel (como o sensor de movimento e assim por diante) que são essenciais para seu aplicativo, mas que só são acessíveis por meio de um aplicativo nativo (o que tornaria, portanto, a escolha do aplicativo da web móvel inicial para você).

E além da questão de aplicativos da web antigos vs. aplicativos nativos, um aplicativo móvel híbrido pode ser a resposta certa para você, dependendo de seus requisitos e restrições de recursos. Aplicativos híbridos, como aplicativos nativos, são executados no próprio dispositivo (ao contrário de dentro de um navegador), mas são escritos com tecnologias da web (HTML5, CSS e JavaScript) e normalmente sustentados por uma estrutura de aplicativo híbrido. Mais especificamente, os aplicativos híbridos são executados dentro de um contêiner nativo e aproveitam o mecanismo do navegador do dispositivo (mas não o navegador) para renderizar o HTML e processar o JavaScript localmente. Uma camada de abstração nativa da web permite o acesso aos recursos do dispositivo que não são acessíveis em aplicativos da web móvel, como acelerômetro, câmera e armazenamento local.

Mas seja qual for a escolha que você fizer - seja um aplicativo da web móvel, um aplicativo nativo ou híbrido - tenha o cuidado de pesquisar e confirmar adequadamente suas suposições. Por exemplo, para os fins deste tutorial de desenvolvimento de aplicativo da web móvel, você pode ter decidido desenvolver um aplicativo móvel nativo para e-commerce para vender seus produtos. Mas, de acordo com Hubspot , 73% dos usuários de smartphones dizem que usam a web móvel mais do que aplicativos nativos para fazer suas compras ... Então, neste caso, você pode ter apostado no cavalo errado.

Mas seja qual for a escolha que você fizer - seja web móvel, aplicativo nativo ou híbrido - tenha o cuidado de pesquisar e confirmar adequadamente suas suposições.

E então, é claro, há as considerações práticas de tempo e orçamento. Como diz uma das minhas frases favoritas, “Mais rápido, melhor, mais barato ... escolha dois” . Embora as restrições de tempo para comercialização e custos sejam de suma importância no desenvolvimento de aplicativos da web, é crucial não comprometer muito a qualidade do processo. É muito difícil recuperar a confiança de um usuário que teve uma experiência inicial ruim.

Na verdade, a web móvel, os aplicativos nativos e híbridos são todos animais radicalmente diferentes, cada um com seu próprio conjunto único de benefícios e desafios. Este tutorial de desenvolvimento da web móvel foca especificamente em metodologias e ferramentas a serem empregadas, e armadilhas a evitar, no desenvolvimento de aplicativos da web móveis altamente funcionais, intuitivos e fáceis de usar.

O desenvolvimento de aplicativos da Web para dispositivos móveis requer planejamento detalhado

Identificar seus requisitos (ou os de seu cliente) é uma das melhores práticas essenciais no desenvolvimento de aplicativos, móveis ou outros. Pesquise cuidadosamente os recursos desejados para determinar se eles podem ser alcançados em seu aplicativo da web móvel. É muito frustrante e altamente improdutivo perceber que uma ou mais das funções essenciais do cliente não são suportadas, quando você já investiu tempo e recursos para projetar a interface baseada na web e a infraestrutura de suporte.

números reais de cartão de crédito hackeados

Outra pegadinha comum para novatos em desenvolvedores de aplicativos da web móvel é presumir que o código baseado na web para um navegador de desktop funcionará 'como está' em um navegador móvel. Não. Definitivamente está diferenças e, se você não estiver ciente delas, elas podem definitivamente morder você. A funcionalidade de reprodução automática da tag HTML5, por exemplo, não funciona em navegadores móveis. Da mesma forma, o CSS transition e opacity as propriedades não são suportadas (ou pelo menos não são consistentemente suportadas) na maioria dos navegadores móveis hoje em dia. Você também terá problemas com alguns métodos de API da web em uma plataforma móvel, como a API de streaming de música SoundCloud que requer Adobe Flash, que não é compatível com a maioria dos dispositivos móveis.

Uma pegadinha comum para novatos em desenvolvedores de aplicativos da web móvel é me assegurar que o código baseado na web para um navegador de desktop funcionará 'como está' em um navegador móvel.

Um fator particularmente complicador no desenvolvimento de aplicativos da web móvel é que a vida útil dos dispositivos móveis tende a ser muito mais curta do que a dos monitores de desktop (a vida útil média de um telefone celular nos EUA é de cerca de 21 meses). Esses ciclos de vida mais curtos dos dispositivos, acompanhados por lançamentos constantes de novos dispositivos e tecnologias móveis, geram uma paisagem em constante mudança de dispositivos a serem visados. Embora trabalhar em um navegador alivie um pouco esse problema, protegendo você de uma série de problemas específicos do dispositivo, você ainda precisará projetar uma visualização baseada em navegador que ofereça suporte a muitas resoluções de tela diferentes (bem como ajuste adequado para orientações retrato e paisagem )

É preciso pensar também no suporte aos monitores de retina da Apple (monitores de cristal líquido com densidade de pixels alta o suficiente para que o olho humano seja incapaz de discernir pixels individuais a uma distância de visualização típica). Vários produtos da Apple - incluindo iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini e iPad Air - oferecem telas Retina. Para um aplicativo da web para celular em particular, é importante estar ciente de que uma tela Retina faz com que as imagens de baixa resolução (que normalmente são veiculadas em dispositivos móveis) pareçam confusas e pixelização pode acontecer. A melhor solução de desenvolvimento de aplicativos nesses casos é fazer com que o servidor reconheça que a solicitação está vindo de um dispositivo Retina e, em seguida, forneça uma imagem alternativa de resolução mais alta ao cliente.

Se você quiser usar algumas das coisas legais do HTML5, lembre-se de verificar com antecedência se a funcionalidade que você está procurando é compatível com o cenário de dispositivos que seus clientes provavelmente usarão. Por exemplo, no iOS 6 e superior, não há suporte para o navegador getUserMedia funcionalidade, uma vez que a câmera só pode ser acessada por meio de aplicativos nativos. Dois grandes recursos para verificar o que é compatível com dispositivos e navegadores específicos são caniuse.com e html5test.com .

Lembre-se de verificar com antecedência se a funcionalidade que você está procurando é compatível com o cenário de dispositivos que seus clientes provavelmente usarão.

As consultas de mídia CSS3 também podem ajudá-lo a fornecer conteúdo personalizado para cada dispositivo. Aqui está um exemplo de código para capturar diferentes características do dispositivo, como densidade de pixels, resolução de tela e orientação:

/* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Otimizando Seu Aplicativo da Web Móvel para Desempenho

'OMG, essa coisa é tãããão lenta!' Como um desenvolvedor de aplicativos da web móvel, essas são provavelmente as últimas palavras que você deseja ouvir de um de seus usuários. Você deve, portanto, pensar cuidadosamente sobre como reduzir e otimizar cada transferência de byte e servidor para reduzir o tempo de espera do usuário. É irreal esperar que as transferências sempre sejam feitas por uma rede WiFi, e você deve saber que 60% dos usuários da web móvel dizem que esperam que um site carregue em seus telefones celulares em 3 segundos ou menos (fonte). Da mesma forma, o Google descobriu que, para cada cinco segundos extras de tempo de carregamento, o tráfego caiu 20% (e também é importante notar que os motores de busca consideram os tempos de carregamento como parte do cálculo do índice de qualidade da página).

60% dos usuários da web para celular dizem que esperam que um site carregue em seus celulares em 3 segundos ou menos.

Como parte deste tutorial de desenvolvimento de aplicativos da web para celular, aqui estão algumas dicas que podem ajudar a otimizar o desempenho de seus aplicativos da web para celular e minimizar a latência:

• Otimização de imagem. O tempo de carregamento da imagem é conhecido por ser um dos maiores problemas de desempenho que afetam o carregamento da página em dispositivos móveis. Uso de otimizadores de imagem online, como smushit.com , pode ser útil para resolver esse problema.
• Compressão de código. Compactar seus arquivos JavaScript e CSS, dependendo da quantidade de código que você possui, pode ter um impacto significativo no desempenho.
• Consultas de banco de dados.
  • Alguns navegadores de dispositivos móveis não aceitam tantos cookies quanto os navegadores de desktop, o que pode resultar na necessidade de executar ainda mais consultas do que o normal. O cache do lado do servidor é, portanto, especialmente crucial ao oferecer suporte a clientes de aplicativos da web móvel.
  • Lembre-se de empregar os filtros apropriados para impedir a injeção de consulta SQL que poderia comprometer a segurança de seu site e servidor.
• Redes de distribuição de conteúdo (CDN). Se você planeja fornecer muitos vídeos, imagens, arquivos de áudio ou outros tipos de mídia, o uso de um CDN é altamente recomendado. Alguns dos CDNs comerciais mais comuns incluem Amazon S3 , Microsoft Windows Azure e MaxCDN . As vantagens de usar um CDN são inúmeras e incluem:
  • Desempenho de download aprimorado. Aproveitar os recursos de um CDN permite distribuir a carga, economizar largura de banda e aumentar o desempenho. Os melhores CDNs oferecem maior disponibilidade, menor latência de rede e menor perda de pacotes. Além disso, muitos CDNs fornecem uma seleção globalmente distribuída de centros de dados, permitindo que os downloads ocorram de um servidor mais próximo da localização do usuário (resultando em menos saltos de rede e downloads mais rápidos).
  • Mais downloads simultâneos. Os navegadores normalmente limitam o número de conexões simultâneas a um único domínio, após o que downloads adicionais são bloqueados até que um dos downloads anteriores seja concluído. Muitas vezes você pode ver esse limite em ação ao baixar muitos arquivos grandes do mesmo site. Cada CDN adicional (em um domínio diferente) permite downloads simultâneos adicionais.
  • Análise aprimorada. Muitos CDNs comerciais fornecem relatórios de uso que podem complementar a análise de seu próprio site e que podem oferecer uma melhor quantificação das visualizações de vídeo e downloads. GTmetrix , por exemplo, tem uma excelente ferramenta de relatório de site para monitorar e otimizar as fontes carregadas em seu site.

Ferramentas de desenvolvimento de aplicativos da web para celular

“As ferramentas certas para o trabalho certo” é um ditado antigo que se aplica tanto ao desenvolvimento de software quanto a qualquer outro domínio. Este tutorial fornece uma introdução a algumas das ferramentas mais populares e amplamente utilizadas para o desenvolvimento de aplicativos da web móvel, mas tenha em mente que pode muito bem haver outras ferramentas que são as 'certas' para desenvolver seu aplicativo da web móvel, dependendo de seus requisitos e recursos disponíveis.

Escolhendo o JavaScript Mobile Web App Framework certo

Como o desenvolvimento de aplicativos da web para dispositivos móveis tende a criar muitos dos mesmos desafios comuns - como compatibilidade entre navegadores e HTML e CSS inconsistentes em navegadores móveis - foram desenvolvidas estruturas (baseadas em HTML5 e CSS3) que são especificamente projetadas para resolver esses problemas e para funcionar da forma mais perfeita possível em uma ampla variedade de smartphones e tablets. A maioria dessas estruturas de aplicativos da web móvel são leves, o que ajuda a facilitar a navegação rápida na web móvel sem comprometer a aparência do seu site.

Ampliando nossa visão além do cenário móvel, se houver uma única estrutura JavaScript popular que valha a pena mencionar, é jQuery . Se você estiver familiarizado com a versão para desktop, recomendo tentar jQuery Mobile para seu aplicativo da web móvel. Ele tem uma biblioteca de widgets que converte a marcação semântica em um formato amigável para gestos, facilitando as operações em telas sensíveis ao toque. A versão mais recente consiste em uma base de código muito leve que agrega muitos elementos gráficos que podem realmente melhorar sua IU.

Outra alternativa, Sencha Touch , também está ganhando participação de mercado rapidamente. Ele oferece excelente desempenho geral e ajuda a produzir uma interface de usuário da web móvel que se parece muito com uma interface nativa. Sua biblioteca de widgets com recursos completos é baseada no Sencha ExtJS Biblioteca JavaScript.

Aqui estão algumas diferenças importantes a serem consideradas ao comparar o jQuery Mobile e o Sencha Touch:

• Olhe e sinta. De modo geral, a aparência de um aplicativo Sencha Touch é mais nítida e superior à de um aplicativo móvel jQuery, mas é importante lembrar que tais reações tendem a ser altamente subjetivas.
• Extensibilidade. O jQuery Mobile oferece muitas extensões de terceiros e é inerentemente projetado para ser altamente extensível, enquanto o Sencha Touch é atualmente muito mais uma estrutura “fechada”.
• Suporte para dispositivos. O jQuery Mobile atualmente tem como alvo uma seção transversal maior de dispositivos do que o Sencha Touch.
• HTML “vs.” JavaScript. jQuery é amplamente centrado em HTML (ou seja, estendendo e manipulando HTML existente em JavaScript), enquanto a codificação Sencha Touch é inteiramente baseada em JavaScript. (Este é um exemplo, aliás, do conjunto de habilidades de sua equipe de desenvolvimento sendo importante considerar ao fazer suas seleções de tecnologia.)
• Dependências externas. O jQuery mobile requer jQuery e jQuery UI para manipulação de DOM, enquanto o Sencha Touch não tem dependências externas.
• Curva de aprendizado. A maioria dos desenvolvedores acha que o tempo de aceleração do jQuery é menor do que o do Sencha Touch, talvez alimentado pela grande porcentagem de desenvolvedores da web que já estão familiarizados com as bibliotecas jQuery padrão.

Estruturas responsivas e aplicativos móveis da Web

Um número crescente de estruturas responsivas começou a surgir nos últimos anos, sendo duas das mais populares Bootstrap e Fundação . Resumindo, estruturas responsivas simplificam e agilizam design de IU responsivo baseado na web e implementação, encapsulando os layouts e paradigmas de IU mais comuns em uma estrutura reutilizável e com desempenho otimizado. Baseadas principalmente em CSS e JavaScript, muitas dessas estruturas são de código aberto, de download gratuito e facilmente personalizáveis. A menos que você tenha um conjunto altamente peculiar de requisitos, é provável que o uso de uma dessas estruturas reduza o nível de esforço para projetar e implementar seu aplicativo da web móvel.

Examinando as duas opções principais, Bootstrap e Foundation, algumas das principais diferenças a serem consideradas incluem:

• Plataformas direcionadas. Embora o Bootstrap ofereça suporte a dispositivos móveis, tablets e desktops, ele é principalmente orientado para o uso em desktops. A base, por outro lado, foi projetada para essencialmente todos os tamanhos e tipos de tela.
• Compatibilidade do navegador. O Bootstrap é compatível com o IE7 ou superior, enquanto o Foundation só é compatível com o IE9 ou superior.
• Diversidade de layouts e componentes. O Bootstrap possui uma coleção significativamente maior de elementos de interface do usuário do que a oferecida pela Foundation.
• Redimensionamento automático. Com o Foundation, a grade encolhe e se estende de acordo com a altura e largura do navegador atual, enquanto o Bootstrap oferece suporte apenas a um conjunto predefinido de tamanhos de grade com base em um conjunto padrão de tamanhos de tela.

Depuração e teste de aplicativos da web móvel

Depurar aplicativos da web para dispositivos móveis pode ser complicado e um tanto frustrante, especialmente se você precisar vasculhar diferentes dispositivos para testar ou instalar SDKs para uma emulação (geralmente imperfeita) das plataformas de cliente alvo.

Nesse contexto, uma vantagem clara do desenvolvimento da web móvel (em comparação com o desenvolvimento de aplicativo nativo) é que você pode utilizar ferramentas de desenvolvedor padrão baseadas em navegador para depurar seu aplicativo. Com base na minha preferência pessoal por depuração remota, o que recomendo neste tutorial de desenvolvimento de aplicativos é o Chrome com suas DevTools. Outras opções padrão incluem Firefox com Firebug ou ferramentas Dragonfly do Opera.

como criar um protótipo

Algumas das razões que prefiro Chrome com seu DevTools incluir:

• Emulador de celular no DevTools do Chrome. Essa talvez seja uma razão suficiente para selecionar o Chrome para depuração de aplicativos da web móveis. Os principais recursos incluem emulação de eventos de toque, falsificação de agente de usuário, otimização de largura de banda de rede, substituições de geolocalização, substituições de orientação de dispositivo e emulação de tipo de mídia CSS.
• Editor interativo. Capacidade de editar JavaScript ou CSS em tempo real.
• Depurador de JavaScript superior. Permite pontos de interrupção DOM e fornece a capacidade de traçar o perfil de seu tempo de execução de código JavaScript.
• Visualizadores JSON e XML integrados. Evita a necessidade de qualquer plug-in inspecionar as respostas do servidor.
• Suporte para o protocolo Android Debug Bridge (ADB) diretamente por USB. Facilita a instanciação fácil de uma sessão de depuração remota. ( Aqui é um bom tutorial do Google sobre como começar a depurar remotamente no Chrome.)
• Inspeção dinâmica de recursos. Permite que você inspecione as fontes de dados locais do seu aplicativo, incluindo bancos de dados IndexedDB ou Web SQL, armazenamento local e de sessão, cookies e recursos de cache de aplicativo. Você também pode inspecionar rapidamente os recursos visuais do seu aplicativo, incluindo imagens, fontes e folhas de estilo.

Para testar o layout e a compatibilidade de navegação cruzada do seu aplicativo da web, você também pode usar algumas ferramentas online úteis, como BrowserStack . Basta inserir o URL do seu aplicativo, selecionar o navegador, a versão e o sistema operacional, e você obterá a visualização emulada (e a velocidade de carregamento) do seu site nesse ambiente. Outra ferramenta útil para este propósito é CrossBrowserTesting .

Embrulhar

Com a expansão rápida e contínua do número, variedade e sofisticação dos dispositivos móveis no mercado e em uso hoje, a necessidade de aplicativos móveis eficazes, fáceis de usar e de alto desempenho provavelmente aumentará substancialmente. Ser capaz de desenvolver esses aplicativos de forma inteligente e eficiente continuará, portanto, a ser de suma importância.

Muitos fatores devem ser considerados ao escolher entre as opções de aplicativos móveis da web, nativos e híbridos para dispositivos móveis. Cada um tem suas próprias vantagens, mas os aplicativos da web móveis geralmente representam sua opção de desenvolvimento mais eficiente (e, portanto, tempo de colocação no mercado). Se você optar por seguir esse caminho, espero que este tutorial de desenvolvimento de aplicativos da web móvel ajude a levá-lo mais diretamente e com sucesso ao seu destino.

Relacionado: Torne seu aplicativo lucrativo - aproveite o Mobile Analytics

Compreender o básico

O que é um aplicativo da web móvel?

Os aplicativos da web para celular são otimizados para uma boa experiência no telefone. Eles não são aplicativos móveis, mas sites escritos em HTML / CSS e executados por um navegador. Embora possam ser projetados para se parecer com aplicativos de smartphone, eles não têm muito em comum.

O que é um aplicativo nativo?

Um aplicativo nativo é um aplicativo escrito para uma plataforma específica, fazendo uso de APIs específicas da plataforma.

O que é um aplicativo híbrido?

Um aplicativo híbrido é um aplicativo escrito usando tecnologias da web e empacotado em um navegador da web nativo fino. Um aplicativo híbrido pode ser rapidamente transferido para várias plataformas onde compartilham a mesma base de código subjacente.

Qual é a diferença técnica entre aplicativos nativos e híbridos?

Os aplicativos nativos são escritos em linguagens específicas de plataforma usando APIs de plataforma, como Java ou Kotlin para Android e Objective C ou Swift para iOS. Os aplicativos híbridos são escritos usando tecnologias da web como HTML5 / CSS e Javascript

Aplicativo nativo vs. aplicativo da web: Qual é o impacto na experiência do usuário?

Um aplicativo da web para celular é um site otimizado para ser usado em um celular. Se bem feito, a experiência é notavelmente semelhante a um aplicativo nativo ou híbrido. Como exemplo, consulte https://paperplanes.world/.

Por que os aplicativos nativos geralmente oferecem desempenho superior?

Os aplicativos híbridos geralmente têm erros e são mais lentos do que os aplicativos nativos, pois os aplicativos nativos não passam por obstáculos e camadas de contêineres para funcionar. Os aplicativos nativos têm muito mais desempenho. No entanto, o React Native conseguiu mudar o jogo.