Projetando  MobilePhoneGAP  !By  Igor  Portela

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

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

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

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

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

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

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

!904/04/14

“…Ou  seja!  MOBILE  É…”

!1004/04/14

“…Ou  seja!  MOBILE  É…”

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

Pensando  mobile

!1204/04/14

Desktop

Pensando  mobile

!1304/04/14

Desktop

Pensando  mobile

!1404/04/14

Desktop

Pensando  mobile

!1504/04/14

Desktop

Pensando  mobile

!1604/04/14

Desktop

Pensando  mobile

!1704/04/14

Desktop

Pensando  mobile

!1804/04/14

Desktop

Pensando  mobile

!1904/04/14

Desktop

Pensando  mobile

!2004/04/14

Desktop

Pensando  mobile

!2104/04/14

Desktop

Pensando  mobile

!2204/04/14

Desktop

Pensando  mobile

!2304/04/14

Mobile

Pensando  mobile

!2404/04/14

Mobile

Pensando  mobile

!2504/04/14

Mobile

Pensando  mobile

!2604/04/14

Mobile

Pensando  mobile

!2704/04/14

Mobile

Pensando  mobile

!2804/04/14

Mobile

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

04/04/14 ‹#›

OK!  VAMOS  AO  PROJETO  MOBILE!  :D

04/04/14 ‹#›

1

Pesquisa,   Pesquisa,   Pesquisa!

Tipos  de  Pesquisas

• Benchmarking  !

• Questionários  !

• Entrevistas  !

• Pesquisa  de  opinião

04/04/14 !32

Tipos  de  Pesquisas:  Benchmarking

!3304/04/14

04/04/14 ‹#›

2

Concepção

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

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

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

Concepção

!3804/04/14

04/04/14 ‹#›

3  Arquitetura  da  Informação

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

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  Phonehttp://msdn.microsoft.com/en-­‐us/library/windowsphone/design

04/04/14 !41

Arquitetura  da  Informação

!4204/04/14

Arquitetura  da  Informação

!4304/04/14

Arquitetura  da  Informação

!4404/04/14

04/04/14 ‹#›

4

Design

Visual

Design  Visual:  Processo

!4604/04/14Diagrama:  Jesse  James  Garrett

Design  Visual:  Processo

!4704/04/14

Design  Visual:  Processo

• Painel  visual:  Conceito

04/04/14 !48

Design  Visual:  Processo

• Painel  visual:  Público  Alvo

04/04/14 !49

Design  Visual:  Processo

• Pesquisa  de  referências  visuais

04/04/14 !50

Design  Visual:  Processo

!5104/04/14

Forma

Design  Visual:  Processo

!5204/04/14

Forma Cor

Design  Visual:  Processo

!5304/04/14

Forma Cor Tipografia

Design  Visual:  Processo

!5404/04/14

?

!55

Design  Visual

!56

Design  Visual:  Processo

Forma

!57

Design  Visual:  Processo

Forma

Simbólico• Ícones

!58

Design  Visual:  Processo

Forma

Simbólico

Físico

• Ícones

• Área  de  toque

!59

Design  Visual:  Processo

Cor

!60

Design  Visual:  Processo

Contraste

Cor

!61

Design  Visual:  Processo

Contraste

FeedbackCor

!62

Design  Visual:  Processo

Tipografia

!63

Design  Visual:  Processo

Legibilidade

Tipografia

!64

Design  Visual:  Processo

Legibilidade

HierarquiaTipografia

Design  Visual:  Resoluções

• IOS:  iPhone

!65

iPhones  4  e  4s  640  px  x  960  px iPhones  5:  640  px  x  1136  px

Design  Visual:  Resoluções

• Android

!66

!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

04/04/14 ‹#›

5  Implementação

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

Nativo  vs  HTML5

• É  um  assunto  polêmico!!!  !

• As  duas  abordagens  tem  pontos  positivos  e  negativos  !

• Vamos  ver  algumas  comparações

!70

!71

Nativo  vs  HTML5:  Custo

Nativo

HTML5

!72

App  Nativo  vs  HTML5

Nativo HTML5

Custo X

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

App  Nativo  vs  HTML5

Nativo HTML5

Custo X

Performance X

!75

Nativo  vs  HTML5:  Tempo  de  Desenvolvimento

Nativo

HTML5

!76

App  Nativo  vs  HTML5

Nativo HTML5

Custo X

Performance X

Tempo  de  Desenvolvimento X

!77

Nativo  vs  HTML5:  Divulgação

Nativo

HTML5

!78

App  Nativo  vs  HTML5

Nativo HTML5

Custo X

Performance X

Tempo  de  Desenvolvimento X

Divulgação  (App  Store) X

04/04/14 ‹#›

OK…ENTÃO  EU  FAÇO  UM  APLICATIVO  NATIVO  OU  EM  HTML5???

A  resposta  é:

• Não  existe  resposta  certa!  !

• Existe  o  bom  senso  !

• Escolher  a  tecnologia  que  melhor  atenda  sua  necessidade,  esta  é  a  resposta  correta

!80

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

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

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

Quer saber mais? !

!

Então lá vai… vamos começar com PhoneGap!

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

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

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

Por  quê  o  phonegap?

!88

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

Plataformas?

!90

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.

Recursos

!92

Arquitetura

!93

Arquitetura

!94

Mãos  à  obra

Veja  se  está  na  sua  máquina:  !

•Eclipse  •Android  SDK  •PhoneGap

!95

• Baixe  o  Phonegap2.9.0  !

• Download  no  link  http:  //phonegap.com/install/

!96

Mãos  à  obra

!97

Mãos  à  obra

!98

Mãos  à  obra

!99

Mãos  à  obra

• Estrutura  do  projeto

!100

Mãos  à  obra

!101

Mãos  à  obra

Mãos  à  obra

!103

Mãos  à  obra

!104

Mãos  à  obra

!105

DeviceReady

!106

DeviceReady

!107

Eventos

!108

Eventos