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