1. O documento discute o projeto de aplicativos móveis usando a plataforma PhoneGap. Apresenta números sobre o uso de dispositivos móveis e aplicativos no Brasil e como isso influencia o desenvolvimento para mobilidade. 2. É destacada a importância da pesquisa, concepção e arquitetura da informação para projetos móveis devido às limitações dos dispositivos e contextos de uso diferentes do desktop. 3. O desenvolvedor deve pensar na priorização de conteúdo e navegação para atender as necessidades dos usu

1. Projetando
Mobile
PhoneGAP
!
By
Igor
Portela

2. 04/04/14 ‹#›
POR
QUE
MOBILE?
Quem sou eu?
• Especialista em Mobilidade e Sistemas Embarcados –
Estácio de Sá
• Certificado LPIC1 (Linux Professional Institute Certified),
• CLA (Novell Certified Linux Administrator),
• Novell Datacenter Technical Specialist.
• CEO e fundador da Wake Up Digital.
• Palestrante IEEE e Google I/O Extend
• Curador do Startup Genome João Pessoa
• Organizador de dois Startups Weekends

3. Números
Gerais
• 73%
não
saem
de
casa
sem
seus
dispositivos
móveis.
!
• 27
milhões
de
Brasileiros
tem
smartphones.
!
• 42%
usam
internet
em
seus
smartphones
pelo
menos
1x
ao
dia…
Destes
59%
para
acessar
redes
sociais,
57%
para
acessar
emails
e
55%
mecanismos
de
pesquisas.
!
• 27%
disseram
preferir
ficar
sem
TV
do
que
seu
celular.
!
• 50%
pesquisam
em
seus
smartphones
todos
os
dias…
destes
48%
procura
informações
sobre
produtos,
29%
restaurantes,
pubs
e
bares
e
28%
viagens.
04/04/14

4. 04/04/14 ‹#›
86%
Comunicação
61%
manter-­‐se
informado
92%
Entretenimento
Usam redes sociais
(atualizam status, verificam
mensagem, visitam páginas de
amigos)
72%
71%
E-mails (enviaram ou
receberam)
Leram notícias em jornais,
portais e revistas.
57%
21%
Analisaram websites, blogs e
fóruns.
Navegaram na internet
79%
71%
Ouviram música
46%
Assistiram vídeos (Youtube)
39%
Usaram jogos
Dados:
Our
Mobile
Planet
by
Google

5. O
Uso
de
Aplicativos
• 14
aplicativos
em
média
instalados
no
smartphone.
!
• 6
aplicativos
usados
nos
últimos
30
dias.
!
• 2
aplicativos
pagos
instalados
em
média.
!
• 88%
dos
usuários
acessam
Redes
Sociais
via
apps.
!
• 50%
pesquisam
em
seus
smartphones
todos
os
dias…
destes
48%
procura
informações
sobre
produtos,
29%
restaurantes,
pubs
e
bares
e
28%
viagens.
04/04/14 !5Dados:
Our
Mobile
Planet
by
Google

6. Mobilidade
possibilita:
Interações
!604/04/14
“…
88%
usam
smartphones
quando
…”
15%
Ouvem
Música
46%
Assistem
TV
55%
Usam a
Internet
26%
Leem
revistas ou
jornais
15%
Leem
livros
29%
Assistem a
filmes
18%
Jogam
videogames
Dados:
Our
Mobile
Planet
by
Google

7. Mobilidade
possibilita:
Interações
• 45%
pesquisaram
no
smartphone
e
depois
compraram
pelo
computador.
!
• 30%
pesquisaram
no
smartphone
e
depois
compraram
em
lojas
físicas.
!
• 31%
dos
usuários
de
smartphones
compraram
produto
ou
serviço
em
seus
aparelhos.
!
• 54%
desses
compradores
fizeram
uma
compra
no
mês
passado.
04/04/14 !7Dados:
Our
Mobile
Planet
by
Google

8. Mobilidade
possibilita:
VENDAS
• 4%
viram
ao
usar
mecanismos
de
pesquisas.
!
• 42%
viram
em
um
website.
!
• 31%
viram
em
um
aplicativo.
!
• 25%
viram
ao
assistir
um
vídeo.
!
• 24%
em
um
web
site
para
vídeos.
!
• 16%
em
um
website
varejista.
Onde
os
anúncios
para
celular
são
mais
notados
04/04/14 !8Dados:
Our
Mobile
Planet
by
Google

9. !904/04/14
“…Ou
seja!
MOBILE
É…”

10. !1004/04/14
“…Ou
seja!
MOBILE
É…”

11. Pensando
mobile
Contexto
mobile
é
totalmente
diferente
do
contexto
desktop…
por
isso
devemos
pensar
diferente
também!
!
No
mundo
mobile
(devido
à
limitações)
todos
somos
daltônicos
e
sofremos
mal
de
Parkinson.
!
Atentar
a:
Interferências
de
pessoas,
sons,
visuais,
etc;
Tempo
dedicado
àquela
interação;
Culturas
diferentes
dos
diversos
usuários;
Devices
e
sistemas
operacionais
diferentes.
04/04/14 !11

12. Pensando
mobile
!1204/04/14
Desktop

13. Pensando
mobile
!1304/04/14
Desktop

14. Pensando
mobile
!1404/04/14
Desktop

15. Pensando
mobile
!1504/04/14
Desktop

16. Pensando
mobile
!1604/04/14
Desktop

17. Pensando
mobile
!1704/04/14
Desktop

18. Pensando
mobile
!1804/04/14
Desktop

19. Pensando
mobile
!1904/04/14
Desktop

20. Pensando
mobile
!2004/04/14
Desktop

21. Pensando
mobile
!2104/04/14
Desktop

22. Pensando
mobile
!2204/04/14
Desktop

23. Pensando
mobile
!2304/04/14
Mobile

24. Pensando
mobile
!2404/04/14
Mobile

25. Pensando
mobile
!2504/04/14
Mobile

26. Pensando
mobile
!2604/04/14
Mobile

27. Pensando
mobile
!2704/04/14
Mobile

28. Pensando
mobile
!2804/04/14
Mobile

29. Pensando
mobile
• Espaço
menor
que
do
desktop…
!
• Isso
é
um
ponto
positivo
ao
desenvolver
um
projeto
de
Design
para
mobile.
!
• Pouco
espaço
força
priorizar
o
que
é
mais
importante
no
conteúdo
que
deve
ser
exibido,
solucionando
de
uma
forma
mais
rápida
o
“problema”.
!
• Ao
desenvolver
para
mobile,
menos
é
mais!
04/04/14 !29

30. 04/04/14 ‹#›
OK!
VAMOS
AO
PROJETO
MOBILE!
:D

31. 04/04/14 ‹#›
1
Pesquisa,
Pesquisa,
Pesquisa!

32. Tipos
de
Pesquisas
• Benchmarking
!
• Questionários
!
• Entrevistas
!
• Pesquisa
de
opinião
04/04/14 !32

33. Tipos
de
Pesquisas:
Benchmarking
!3304/04/14

34. 04/04/14 ‹#›
2
Concepção

35. Concepção
• Momento
VIAGEM!
!
• Brainstorms
!
• Uso
e
análises
de
produtos
semelhantes
!
• Definição
do
que
vai
ter
de
conteúdo,
informação
e
funcionalidades.
04/04/14 !35

36. Concepção
• Momento
VIAGEM!
!
• Brainstorms
!
• Uso
e
análises
de
produtos
semelhantes
!
• Definição
do
que
vai
ter
de
conteúdo,
informação
e
funcionalidades.
04/04/14 !36

37. Concepção
• Momento
VIAGEM!
!
• Brainstorms
!
• Uso
e
análises
de
produtos
semelhantes
!
• Definição
do
que
vai
ter
de
conteúdo,
informação
e
funcionalidades.
04/04/14 !37

38. Concepção
!3804/04/14

39. 04/04/14 ‹#›
3
Arquitetura
da
Informação

40. Arquitetura
da
Informação
• Desenvolver
as
melhores
navegações
e
interações
para
usuários
de
dispositivos
móveis.
!
• Priorizar
as
informações
e
conteúdo,
organizando-­‐os
de
maneira
clara
e
de
fácil
compreensão.
!
• Pensar
nas
plataformas
e
guidelines
existentes.
!
• Desenvolver
protótipos
navegáveis
para
visualização
das
navegações.
!
• Testar,
testar
e
testar
em
protótipo
(teste
de
usabilidade
em
protótipo,
grupo
de
foco,
etc).
04/04/14 !40

41. Arquitetura
da
Informação
Guidelines
existentes:
• Android
http://developer.android.com/design/index.html
!
• IOS
http://developer.apple.com/library/ios/#documentation/
userexperience/conceptual/mobilehig/Introduction/
Introduction.html
!
• Windows
Phone
http://msdn.microsoft.com/en-­‐us/library/windowsphone/design
04/04/14 !41

42. Arquitetura
da
Informação
!4204/04/14

43. Arquitetura
da
Informação
!4304/04/14

44. Arquitetura
da
Informação
!4404/04/14

45. 04/04/14 ‹#›
4
Design
Visual

46. Design
Visual:
Processo
!4604/04/14
Diagrama:
Jesse
James
Garrett

47. Design
Visual:
Processo
!4704/04/14

48. Design
Visual:
Processo
• Painel
visual:
Conceito
04/04/14 !48

49. Design
Visual:
Processo
• Painel
visual:
Público
Alvo
04/04/14 !49

50. Design
Visual:
Processo
• Pesquisa
de
referências
visuais
04/04/14 !50

51. Design
Visual:
Processo
!5104/04/14
Forma

52. Design
Visual:
Processo
!5204/04/14
Forma Cor

53. Design
Visual:
Processo
!5304/04/14
Forma Cor Tipografia

54. Design
Visual:
Processo
!5404/04/14
?

55. !55
Design
Visual

56. !56
Design
Visual:
Processo
Forma

57. !57
Design
Visual:
Processo
Forma
Simbólico
• Ícones

58. !58
Design
Visual:
Processo
Forma
Simbólico
Físico
• Ícones
• Área
de
toque

59. !59
Design
Visual:
Processo
Cor

60. !60
Design
Visual:
Processo
Contraste
Cor

61. !61
Design
Visual:
Processo
Contraste
Feedback
Cor

62. !62
Design
Visual:
Processo
Tipografia

63. !63
Design
Visual:
Processo
Legibilidade
Tipografia

64. !64
Design
Visual:
Processo
Legibilidade
Hierarquia
Tipografia

65. Design
Visual:
Resoluções
• IOS:
iPhone
!65
iPhones
4
e
4s
640
px
x
960
px iPhones
5:
640
px
x
1136
px

66. Design
Visual:
Resoluções
• Android
!66

67. !67
Design
Visual
“
Um
objetivo
geral
do
design
de
interação
é
desenvolver
sistemas
interativos
que
provoquem
respostas
positivas
por
parte
dos
usuários,
como
sentir-­‐se
à
vontade,
confortável
e
apreciar
a
experiência
de
estar
utilizando
tais
sistemas.
”
Preece.
Design
de
interação:
Além
da
interação
homem-­‐computador

68. 04/04/14 ‹#›
5
Implementação

69. Implementação
• Planejar
seu
cronograma,
pois
além
do
desenvolvimento
e
testes,
seu
aplicativo
passará
por
revisão
nas
App
Stores
(
Apple
Store,
Google
Play,
Windows
Store)
e
estará
sujeita
a
reprovação
!
• Definir
qual
é
a
tecnologia
que
será
utilizada
para
o
desenvolvimento
do
aplicativo.
Nativo
vs.
HTML5
!69

70. Nativo
vs
HTML5
• É
um
assunto
polêmico!!!
!
• As
duas
abordagens
tem
pontos
positivos
e
negativos
!
• Vamos
ver
algumas
comparações
!70

71. !71
Nativo
vs
HTML5:
Custo
Nativo
HTML5

72. !72
App
Nativo
vs
HTML5
Nativo HTML5
Custo X

73. Nativo
vs
HTML5:
Performance
Consegue
aproveitar
ao
máximo
os
recursos
do
hardware
!73
Nativo
HTML5 Acesso
a
recursos
é
limitado
pela
capacidade
de
processamento
do
Browser/Web
View

74. !74
App
Nativo
vs
HTML5
Nativo HTML5
Custo X
Performance X

75. !75
Nativo
vs
HTML5:
Tempo
de
Desenvolvimento
Nativo
HTML5

76. !76
App
Nativo
vs
HTML5
Nativo HTML5
Custo X
Performance X
Tempo
de
Desenvolvimento X

77. !77
Nativo
vs
HTML5:
Divulgação
Nativo
HTML5

78. !78
App
Nativo
vs
HTML5
Nativo HTML5
Custo X
Performance X
Tempo
de
Desenvolvimento X
Divulgação
(App
Store) X

79. 04/04/14 ‹#›
OK…
ENTÃO
EU
FAÇO
UM
APLICATIVO
NATIVO
OU
EM
HTML5???

80. A
resposta
é:
• Não
existe
resposta
certa!
!
• Existe
o
bom
senso
!
• Escolher
a
tecnologia
que
melhor
atenda
sua
necessidade,
esta
é
a
resposta
correta
!80

81. Exemplo
1
Eu
preciso
de
um
aplicativo
que:
!
• Liste
todos
os
eventos
da
Campus
Party
!
• Exiba
as
informações
de
todos
os
palestrantes,
como
foto
e
descrição
!
• Mostre
as
perguntas
frequentes
sobre
o
evento
!
• Exiba
um
mapa
do
evento
e
acampamento
!81

82. Exemplo
2:
Eu
preciso
de
um
aplicativo
que:
!
• O
usuário
possa
tirar
uma
foto
com
o
dispositivo
!
• Processe
a
imagem
para
aplicar
diversos
filtros
na
foto
!
• O
usuário
tenha
a
possibilidade
de
compartilhar
essa
foto
por
redes
sociais
ou
bluetooth
!82

83. !83
Final
do
Final
“…
Testar
uma
versão
beta
com
os
usuários
em
pontencial
…”
“…
Corrigir
eventuais
bugs
…”
“…
Fazer
atualizações
para
adicionar
novas
funcionalidades
…”

84. !84
Quer saber mais?
!
!
Então lá vai… vamos começar
com PhoneGap!

85. O
que
é
PhoneGap?
PhoneGap é uma soluções de código aberto
para a construção de aplicativos móveis multi-
plataformas com tecnologias web padrão
como HTML, JavaScript e CSS
!85

86. Um
pouco
da
história…
Iniciado por Nitobi Software;
Adobe adquire Nitobi em 2011;
PhoneGap foi doado a Fundação
Apache Software;
Inicialmente chamado Apache Callback;
Depois renomeado para Apache Cordova;
http://cordova.apache.org/
!86

87. Apache
Cordova
e
PhoneGap
PhoneGap é uma distribuição do
Apache Cordova
Apache Cordova é o motor que
move o PhoneGap
PhoneGap poderá possuir outras
ferramentas da Adobe que não
seriam apropriadas ao Projeto
Apache
○ PhoneGap Build
!87

88. Por
quê
o
phonegap?
!88

89. Por
quê
o
phonegap?
!
Problema: muitas plataformas, aparelhos e
lojas de aplicativos.
!
Solução: utilizar o desenvolvimento web
• Multi plataforma;
• Padrões abertos;
• Código aberto.
!89

90. Plataformas?
!90

91. Mais…
!91
PhoneGap é uma ponte entre o browser e
as APIs disponíveis no aparelho. Permite
acesso a recursos que normalmente não
são acessíveis para o browser sozinho.

92. Recursos
!92

93. Arquitetura
!93

94. Arquitetura
!94

95. Mãos
à
obra
Veja
se
está
na
sua
máquina:
!
•Eclipse
•Android
SDK
•PhoneGap
!95

96. • Baixe
o
Phonegap2.9.0
!
• Download
no
link
http:
//phonegap.com/install/
!96
Mãos
à
obra

97. !97
Mãos
à
obra

98. !98
Mãos
à
obra

99. !99
Mãos
à
obra

100. • Estrutura
do
projeto
!100
Mãos
à
obra

101. !101
Mãos
à
obra

102. Mãos
à
obra

103. !103
Mãos
à
obra

104. !104
Mãos
à
obra

105. !105
DeviceReady

106. !106
DeviceReady

107. !107
Eventos

108. !108
Eventos