Projetando Mobile - PhoneGap

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.


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


!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


• Brainstorms !



04/04/14 !36

Concepção


• Brainstorms !



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


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

http://developer.android.com/design/index.html



http://developer.apple.com/library/ios/



http://msdn.microsoft.com/en-us/library/windowsphone/design




!4204/04/14


!4304/04/14


!4404/04/14

04/04/14 ‹#›

4

Design

Visual

Design Visual: Processo

!4604/04/14Diagrama: Jesse James Garrett


!4704/04/14


• Painel visual: Conceito

04/04/14 !48


• Painel visual: Público Alvo

04/04/14 !49


• Pesquisa de referências visuais

04/04/14 !50


!5104/04/14

Forma


!5204/04/14

Forma Cor


!5304/04/14

Forma Cor Tipografia


!5404/04/14

?

!55

Design Visual

!56


Forma

!57


Forma

Simbólico• Ícones

!58


Forma

Simbólico

Físico

• Ícones

• Área de toque

!59


Cor

!60


Contraste

Cor

!61


Contraste

FeedbackCor

!62


Tipografia

!63


Legibilidade

Tipografia

!64


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

http://phonegap.com/install/

!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

Projetando Mobile - PhoneGap

Devices & Hardware

Transcript of Projetando Mobile - PhoneGap