Carregado porIgor Amorim Costa Portela
Projetando Mobile - PhoneGap
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
Projetando Mobile - PhoneGap
- 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 Usamredes 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.
- 10.
- 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.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 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.
- 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.
- 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.
- 43.
- 44.
- 45.
- 46. Design Visual: Processo !4604/04/14 Diagrama: Jesse James Garrett
- 47.
- 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.
- 52.
- 53. Design Visual: Processo !5304/04/14 FormaCor Tipografia
- 54.
- 55.
- 56.
- 57.
- 58. !58 Design Visual: Processo Forma Simbólico Físico •Ícones • Área de toque
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 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.
- 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ãolá 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.
- 91. Mais… !91 PhoneGap é umaponte 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.
- 93.
- 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.
- 98.
- 99.
- 100. • Estrutura do projeto !100 Mãos à obra
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.