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.
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.
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.
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.
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 .
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... */ } }
'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:
“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.
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:
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:
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:
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 .
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 AnalyticsOs 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.
Um aplicativo nativo é um aplicativo escrito para uma plataforma específica, fazendo uso de APIs específicas da plataforma.
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.
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
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/.
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.