O documento discute as estratégias de desenvolvimento de aplicativos mobile, comparando o desenvolvimento nativo, mobile web apps e híbrido. Ele analisa fatores como prazo, orçamento, acesso a recursos do dispositivo, segurança, desempenho, instalação e monetização para cada abordagem. O documento também discute estratégias para criar sites responsivos como media queries e layout fluido.

1. 8º Connecting Knowledge
HEIDER LOPES
Web App

2. Heider Lopes
• Pós-Graduado em Sistemas e Desenvolvimento Web
• Analista Programador
• THT Member

3. Redes Sociais do THT Member
twitter.com/heiderlopes
github.com/heiderlopes
slideshare.net/heiderlopes
www.heiderlopes.com.br

4. Agenda
• Introdução
• Web ou App?
• Estratégias de Desenvolvimento
• Conclusão

5. Introdução

6. Oportunidades

7. Introdução
Você acaba de ter a idéia de criar um
aplicativo!!!

8. Por que tem que ser mobile?

9. Rápida Pesquisa
Em qual dessas situações você utiliza seu celular?
Enquanto espera para ser atendido
No carro de carona
No transporte público
Enquanto espera o inicio de um evento (CK, cinema, teatro,
entre outros)
Enquanto trabalha
No banheiro
Enquanto assiste TV
Enquanto conversa com os amigos

10. Por que mobile?

11. Quanto mais melhor
“Normalmente”queremos atingir a maior
quantidade de usuários

12. Plataformas Mobile
Porém no deparamos com diversas
plataformas

13. …
E AGORA???

15. Relembrando: Web X Desktop

16. Web ou App?

17. Deadline de entrega
App
• Criar um aplicativo para
cada plataforma
• Conhecer diferentes
linguagens (de acordo com
a plataforma a ser
desenvolvida)
Web
• O aplicativo irá abranger
diversas plataformas do
mercado
(Phonegap/Cordova)
• Baixo ou nenhum
retrabalho para migrar para
cada plataforma suportada

18. Orçamento Disponível
App
• Curva de aprendizado para
cada plataforma
• Mão de obra distintas /
Maior custo
• Dificil/impossível
reutilização entre as
plataformas
Web
• Curva de aprendizado web
(HTML5/CSS3/JS)
• Redução de custo
• Reutilização do código

19. Integração com Hardware
App
• Acesso direto ao hardware
• Acesso a recurso do sistema
operacional
• Integração com funções
avançadas e a outras Apps
• Manipulação do aparelho
Web
• Não tem acesso direto a
plataforma nativa
• Roda dentro de um
navegador
• Acesso a recursos através
de APIs (câmera,
geolocalização,
acelerômetro, giroscópio,
animações 3D)

20. Segurança e Privacidade
App
• Restrições explícitas que o
usuário tem que aprovar (Loja)
• Lojas com mecanismos de
aprovação
• Detecção de códigos
maliciosos
• Maior acesso a dados do
usuário e altos privilégios
Web
• Restrição de segurança
• Menor acesso a dados do
usuário e baixo privilégios

21. Performance
App
• Normalmente mais rápidos
• Rodam direto no Sistema
Operacional
• App precisa ser instalada
(podendo ser um processo
lento)
Web
• Roda dentro do navegador
que interpreta seu
HTML/CSS/JS
• *Precisa ser baixada do
servidor com suas
dependências

22. Usabilidade e visual
App
• Mais familiar para o usuário
– Componentes
– Navegação
Web
• Preferência linguagem
visual única na web

23. Instalação e distribuição
App
• Precisa ser instalada
(geralmente pela loja)
• Custo para ser
desenvolvedor cadastrado
• Submeter apps para
aprovação
• Baixa a aplicação completa
• Exposição e busca na Loja
Web
• Abre o link do navegador
• Pode adicionar aos favoritos
na tela inicial
• Permissões mais avançadas
são solicitadas pelo
navegador
• Acesso sempre a versão
mais recente
• Busca através de sites

24. Monetização
App
• Lojas são plataformas de
pagamento integradas
• Baixo trabalho para o
usuário comprar apps e
assinaturas
Web
• Serviços de pagamentos

25. Web First e Mobile First

27. Site Mobile
• Possuem layout muito resumido, carregando
poucas imagens para serem carregados mais
rápidos
http://m.site.com.br ou
http://mobile.site.com.br

28. Design Responsivo

29. Media Queries
Expressões que direcionam o usuário para uma
folha de estilo diferente de acordo com o
dispositivo que ele esta usando.

30. O que podemos definir com MQ
• Tipo de dispositivo
– Móvel,
– Monitores
– Impressão
– etc)
• Tela
– Largura
– Orientação
– Resolução
– Proporção de tela

31. Layout Fluído
Segredo é não usar pixels nas medidas e sim
porcentagens e ems para um layout mais
fluído e flexível

32. Imagens Flexíveis
Imagem devem se adaptar à todo tipo de
resolução

33. Link Demo: https://github.com/daniguerrato/design-responsivo-demo

35. Estratégias de Desenvolvimento

36. Desenvolvimento Nativo
Os aplicativos são desenvolvidos
especificamente para uma plataforma utilizando
a linguagem e as APIs do dispositivo.

37. Android

38. iOS

39. Windows Phone

40. Mobile Web Apps
São sites que diversas formas parecem um
aplicativo nativo. São executados através de
um navegador.

41. Funcionalidades Acessíveis
• Esconder botão do navegador
• Gestos de navegação
• Cache do navegador
• GPS
• Link para ligação direta

42. Funcionalidades Inacessíveis
• Uso de notificação do Sistema Operacional
• Execução em segundo plano
• Informações do acelerômetro
• Gestos complexo

43. Desenvolvimento Híbrido
São parcialmente nativos e parcialmente web
apps.

44. Sencha Touch

45. Phonegap/Cordova

46. IONIC Framework

47. Conclusão
App
• Objetivo bem definido
• Performance perfeita
• Uso intensivo do hardware
• Aplicativo off-line
Web
• Criar mínimo produto viável
• Desenvolvimento rápido
• Público alvo heterogêneo
• Não exige alta performance
• Não ter problema em exigir o
usuário conectado a internet

48. Dúvidas

49. THT nas Redes Sociais
MEETUP.COM/THT-THINGS-HACKER-TEAM
THINGS HACKER TEAM
SLIDESHARE.NET/THINGSHACKERTEAM
TWITTER.COM/THINGSHACKERTM
GITHUB.COM/THINGSHACKERTEAM
FACEBOOK.COM/THINGSHACKERTEAM
WWW.THINGSHACKERTEAM.COM