8º Connecting Knowledge
HEIDER LOPES
Web App
Heider Lopes
• Pós-Graduado em Sistemas e Desenvolvimento Web
• Analista Programador
• THT Member
Redes Sociais do THT Member
twitter.com/heiderlopes
github.com/heiderlopes
slideshare.net/heiderlopes
www.heiderlopes.com....
Agenda
• Introdução
• Web ou App?
• Estratégias de Desenvolvimento
• Conclusão
Introdução
Oportunidades
Introdução
Você acaba de ter a idéia de criar um
aplicativo!!!
Por que tem que ser mobile?
Rápida Pesquisa
Em qual dessas situações você utiliza seu celular?
Enquanto espera para ser atendido
No carro de carona
No...
Por que mobile?
Quanto mais melhor
“Normalmente”queremos atingir a maior
quantidade de usuários
Plataformas Mobile
Porém no deparamos com diversas
plataformas
…
E AGORA???
Relembrando: Web X Desktop
Web ou App?
Deadline de entrega
App
• Criar um aplicativo para
cada plataforma
• Conhecer diferentes
linguagens (de acordo com
a plata...
Orçamento Disponível
App
• Curva de aprendizado para
cada plataforma
• Mão de obra distintas /
Maior custo
• Dificil/impos...
Integração com Hardware
App
• Acesso direto ao hardware
• Acesso a recurso do sistema
operacional
• Integração com funções...
Segurança e Privacidade
App
• Restrições explícitas que o
usuário tem que aprovar (Loja)
• Lojas com mecanismos de
aprovaç...
Performance
App
• Normalmente mais rápidos
• Rodam direto no Sistema
Operacional
• App precisa ser instalada
(podendo ser ...
Usabilidade e visual
App
• Mais familiar para o usuário
– Componentes
– Navegação
Web
• Preferência linguagem
visual única...
Instalação e distribuição
App
• Precisa ser instalada
(geralmente pela loja)
• Custo para ser
desenvolvedor cadastrado
• S...
Monetização
App
• Lojas são plataformas de
pagamento integradas
• Baixo trabalho para o
usuário comprar apps e
assinaturas...
Web First e Mobile First
Site Mobile
• Possuem layout muito resumido, carregando
poucas imagens para serem carregados mais
rápidos
http://m.site.co...
Design Responsivo
Media Queries
Expressões que direcionam o usuário para uma
folha de estilo diferente de acordo com o
dispositivo que ele e...
O que podemos definir com MQ
• Tipo de dispositivo
– Móvel,
– Monitores
– Impressão
– etc)
• Tela
– Largura
– Orientação
–...
Layout Fluído
Segredo é não usar pixels nas medidas e sim
porcentagens e ems para um layout mais
fluído e flexível
Imagens Flexíveis
Imagem devem se adaptar à todo tipo de
resolução
Link Demo: https://github.com/daniguerrato/design-responsivo-demo
Estratégias de Desenvolvimento
Desenvolvimento Nativo
Os aplicativos são desenvolvidos
especificamente para uma plataforma utilizando
a linguagem e as AP...
Android
iOS
Windows Phone
Mobile Web Apps
São sites que diversas formas parecem um
aplicativo nativo. São executados através de
um navegador.
Funcionalidades Acessíveis
• Esconder botão do navegador
• Gestos de navegação
• Cache do navegador
• GPS
• Link para liga...
Funcionalidades Inacessíveis
• Uso de notificação do Sistema Operacional
• Execução em segundo plano
• Informações do acel...
Desenvolvimento Híbrido
São parcialmente nativos e parcialmente web
apps.
Sencha Touch
Phonegap/Cordova
IONIC Framework
Conclusão
App
• Objetivo bem definido
• Performance perfeita
• Uso intensivo do hardware
• Aplicativo off-line
Web
• Criar...
Dúvidas
THT nas Redes Sociais
MEETUP.COM/THT-THINGS-HACKER-TEAM
THINGS HACKER TEAM
SLIDESHARE.NET/THINGSHACKERTEAM
TWITTER.COM/THI...
8ºConnecting Knowledge Web ou App
8ºConnecting Knowledge Web ou App
8ºConnecting Knowledge Web ou App
Próximos SlideShares
Carregando em…5
×

8ºConnecting Knowledge Web ou App

590 visualizações

Publicada em

O que levar em consideração ao decidir criar uma app ou web. Veja alguns fatores que podem tem ajudar a tomar a decisão.

Publicada em: Internet
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
590
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

8ºConnecting Knowledge Web ou App

  1. 1. 8º Connecting Knowledge HEIDER LOPES Web App
  2. 2. Heider Lopes • Pós-Graduado em Sistemas e Desenvolvimento Web • Analista Programador • THT Member
  3. 3. Redes Sociais do THT Member twitter.com/heiderlopes github.com/heiderlopes slideshare.net/heiderlopes www.heiderlopes.com.br
  4. 4. Agenda • Introdução • Web ou App? • Estratégias de Desenvolvimento • Conclusão
  5. 5. Introdução
  6. 6. Oportunidades
  7. 7. Introdução Você acaba de ter a idéia de criar um aplicativo!!!
  8. 8. Por que tem que ser mobile?
  9. 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. 10. Por que mobile?
  11. 11. Quanto mais melhor “Normalmente”queremos atingir a maior quantidade de usuários
  12. 12. Plataformas Mobile Porém no deparamos com diversas plataformas
  13. 13. … E AGORA???
  14. 14. Relembrando: Web X Desktop
  15. 15. Web ou App?
  16. 16. 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
  17. 17. 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
  18. 18. 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)
  19. 19. 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
  20. 20. 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
  21. 21. Usabilidade e visual App • Mais familiar para o usuário – Componentes – Navegação Web • Preferência linguagem visual única na web
  22. 22. 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
  23. 23. 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
  24. 24. Web First e Mobile First
  25. 25. 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
  26. 26. Design Responsivo
  27. 27. Media Queries Expressões que direcionam o usuário para uma folha de estilo diferente de acordo com o dispositivo que ele esta usando.
  28. 28. 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
  29. 29. Layout Fluído Segredo é não usar pixels nas medidas e sim porcentagens e ems para um layout mais fluído e flexível
  30. 30. Imagens Flexíveis Imagem devem se adaptar à todo tipo de resolução
  31. 31. Link Demo: https://github.com/daniguerrato/design-responsivo-demo
  32. 32. Estratégias de Desenvolvimento
  33. 33. Desenvolvimento Nativo Os aplicativos são desenvolvidos especificamente para uma plataforma utilizando a linguagem e as APIs do dispositivo.
  34. 34. Android
  35. 35. iOS
  36. 36. Windows Phone
  37. 37. Mobile Web Apps São sites que diversas formas parecem um aplicativo nativo. São executados através de um navegador.
  38. 38. Funcionalidades Acessíveis • Esconder botão do navegador • Gestos de navegação • Cache do navegador • GPS • Link para ligação direta
  39. 39. Funcionalidades Inacessíveis • Uso de notificação do Sistema Operacional • Execução em segundo plano • Informações do acelerômetro • Gestos complexo
  40. 40. Desenvolvimento Híbrido São parcialmente nativos e parcialmente web apps.
  41. 41. Sencha Touch
  42. 42. Phonegap/Cordova
  43. 43. IONIC Framework
  44. 44. 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
  45. 45. Dúvidas
  46. 46. 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

×