Introdução a dispositivos móveis

Prévia do material em texto

Introdução ao Desenvolvimento 
para Dispositivos Móveis
Victor Adriel de Jesus Oliveira
INF - UFRGS
PARTE I
About Me
Victor Adriel de J. Oliveira
PhD student in Computer Science - UFRGS
- Design and Assessment of Haptic Interfaces
Masters in Computer Science - UFRGS (2014)
- Designing Tactile Vocabularies for Human-Computer 
Interaction
Computer Scientist - UESC (2012)
- Acessibilidade em Sites e Sistemas Web
Member of the EuroHaptics Society (EHS), of the 
Technical Committee on Haptics (TCH), of the Institute 
of Electrical and Electronics Engineers (IEEE), and of the 
Sociedade Brasileira de Computação (SBC)
Summary
• PARTE I
• Introdução a Plataformas Móveis
• Padrões para o Desenvolvimento de Aplicativos
• Prototipagem de Apps Móveis (+ prática)
• Programação de Apps Híbridos com HTML (+ prática)
• PARTE II
• Programação de Apps Híbridos com HTML (+ prática)
• Programação de Apps Nativos com Android (+ prática)
• Novos Usos para Dispositivos Móveis
Plataformas Móveis
O que é um dispositivo móvel?
• Dispositivo computadorizado que caiba no bolso
• Que funcione e se utilize em movimento
5
A cada dia mais móvel
Hoje, carregamos um poder computacional maior nos nossos bolsos
do que tínhamos no mundo inteiro há 60 anos.
Ubiquo e Pervasivo
MAINFRAME
Muitas pessoas dividem 1 computador
PC
1 pessoa com 1 computador
Ubiquo e Pervasivo
Computação Ubiqua
Vários computadores servem cada pessoa
• Princípios da computação ubiqua
• O objetivo de um computador é ajudar-nos a realizar alguma tarefa
• O melhor computador é tranquilo, como um servo invisível
• Quanto mais coisas você puder fazer usando sua intuição, mais 
esperto você é; o computador deve estender o seu inconsciente
Ubiquo e Pervasivo
Mark Weiser (1952 – 1999)
“As tecnologias mais profundas são aquelas que 
desaparecem. Misturam-se na vida cotidiana o 
ponto em que não podem mais ser distinguidas.”
Desafios no Desenvolvimento de Apps Móveis
• Recursos físicos limitados
• Contextos de uso diversificados
• Diferentes atividades
• Atenção limitada
Desafios no Desenvolvimento de Apps Móveis
• Recursos físicos limitados
• CPU, Memória, Tamanho da Tela, Dispositivos de Entrada, Tempo 
de Bateria, Telas pequenas...
Doodle: Web Version Doodle: App
Desafios no Desenvolvimento de Apps Móveis
• Contextos de uso diversificados
Desafios no Desenvolvimento de Apps Móveis
• Diferentes atividades
Lembretes Anotando Receitas To-Do lists
Desafios no Desenvolvimento de Apps Móveis
• Atenção limitada
Repense o design se uma tarefa típica na sua solução atual requer 
mais de 10 minutos seguidos de operação para um usuário médio
Técnicas de Interação com Dispositivos Móveis
JustDance Siri, Cortana, 
Google Assistant
QR Codes
• Apontamento, entrada por voz, entrada por imagem…
Dispositivos Móveis Hoje
17
Dispositivos Móveis Hoje
18
Dispositivos Móveis Hoje
19
Dispositivos Móveis Hoje
20
Dispositivos Móveis Hoje
21
Comentários Finais
• Computação ubiqua e pervasiva
• O desenvolvimento para aplicações móveis possue desafios 
intrínsecos 
• O S.O. Android lidera vendas
Projetando Apps
iOS Human Interface Guidelines
iOS Human Interface Guidelines
• O que devemos fazer para que nossas Apps sejam aceitas 
na Apple app store?
• iOS Human Interface Guidelines
• https://goo.gl/2sXmNS
• Muito detalhado com recomendações genéricas e específicas
• Design diferenciado em três pontos básicos:
• Clareza
• Deferência
• Profundidade
https://goo.gl/2sXmNS
iOS Human Interface Guidelines
• Ao projetar interfaces para o iOS, tenha em mente os 
seguintes princípios:
• Priorize a integridade estética
• Matenha consistência com elementos conhecidos pelos usuários
• Permita manipulação direta dos elementos na tela
• Forneça feedback sobre o estado do app e ações
• Metáforas facilitam a compreensão pelo usuário
• Priorize o controle do usuário sobre o sistema
Novidades no iOS 10
• É possível adicionar widgets na tela Pesquisa e na tela inicial
• Integração com mensagens para compartilhar conteúdos 
específicos do app
• Integração de apps com Siri
• Notificações expandidas usando 3D Touch (ação disparada 
ao pressionar a tela) 
Android Styleguide
Android Styleguide
• Mais bonito do que o HIG da Apple
• Android user interface guidelines [general]
• Parte de 3 premissas básicas
• Encante-me
• Simplifique minha vida
• Surpreenda-me
Material Design
• Material Design é um guia completo para design visual, de 
movimento, e de interação em diferentes plataformas e 
dispositivos
• É definido como uma linguagem visual que sintetiza os 
princípios clássicos de bom design 
• O guia do Material Design é constantemente atualizado e 
pode ser acessado em: https://material.google.com/
https://material.google.com/
Windows Phone Design Guidelines
32
Windows Phone Design Guidelines
• Design Guidelines for Windows Phone
• Projeto guiado por 4 princípios básicos
• Matenha Isso Simples
• Faça Algo Pessoal
• Pense Universal
• Crie Algo Prazeroso
33
Windows Phone Design Guidelines
• As interfaces para Windows Phone são geralmente muito 
simples
• A tipografia (fonte, tamanho, cor do texto) é o que define 
estrutura e fluxo nos apps
• A documentação da Microsoft é direta e simplificada para 
desenvolvedores, mas menos detalhada que a do Android 
https://go.microsoft.com/fwlink/p/?LinkId=760679
https://go.microsoft.com/fwlink/p/?LinkId=760679
Design Guidelines
• Os guias de design são todos muito parecidos
• Contém princípios básicos
• Detalhes de concepção
• Não diferem nem no estilo e nem nas ideias centrais
• Ao desenvolver para dispositivos móveis, é fundamental 
manter-se fiel aos estilos e recomendações
Experiência do Usuário (UX)
• Respostas e percepções do usuário relacionadas a um 
produto, sistema ou serviço antes, durante e depois de 
utilizá-lo. ISO 9241-210
Foco da UX
Contexto
UsuáriosConteúdo
Contexto
• O contexto envolve a situação atual:
• Física: Condições do ambiente de acordo seus sentidos
• Social: Como outras pessoas afetam sua experiência
• Temporal: Variáveis de tempo
• Infra-estrutural: Disponibilidade da rede, custo da ligação.
• Tarefas: Possibilidades
Contexto
UsuáriosConteúdo
Usuários
• Quem são os usuários desse app?
• Quais são suas tarefas e objetivos?
• Quais seus níveis de experiência com esse app e apps como 
esse?
• Quais funcionalidades os usuários precisam?
• Que informações os usuários precisam e de que forma elas 
devem ser transmitidas?
• Como os usuários acham que o sistema deveria funcionar?
Contexto
UsuáriosConteúdo
Conteúdo
• Facilidade de uso
• Velocidade de aprendizado
• Eficiência na utilização
• Grau de propensão a erros
• Permitir o acesso à informação independente de 
características físicas, motoras, cognitivas e etárias.
• Eliminar verbosidade desnecessária
• Linguagem simples e objetiva
• Aumentar legibilidade
Contexto
UsuáriosConteúdo
Conteúdo
Contexto
UsuáriosConteúdo
Benefícios
• Evita a criação de funcionalidades desnecessárias;
• Simplifica o design do projeto;
• Melhora a usabilidade e a ergonomia do projeto;
• Acelera o design e desenvolvimento por meio de guidelines;
• Foca os negócios e o marketing de acordo as características 
dos usuários
Métodos
Etnografia
• Escrevendo sobre pessoas
Personas
Personas
Grupo da Persona (ex. web manager)
Nome Fictício
• Cargos e maiores responsabilidades
• Demographics (idade, educação, etnia, estado civil)
• Objetivos e tarefas que está tentando executar ao
usar o app
• Seu ambiente físico, social e tecnológico
• Uma citação que sumarie o que importa mais para 
essa persona relacionada ao seu app
• Imagens casuais que representem o grupo desse
usuário
Personas
Motorista
Roberto Carlos
• Motorista e entregador
• 32 anos, casado, pai de um filho, ensino médio
completo
• Focado em operar com segurança e eficiência. 
Entre suas tarefas, ele precisa: 
• Atenderchamados de passageiros;
• Planejar e executar rotas de entrega.
• Usa constantemente o celular conectado à rede
móvel. Passa maior parte do tempo no trânsito. 
• Citação: “Tempo é dinheiro”
Design Participativo
Prototipagem
• Wireframes
Prototipagem
• Storyboards
Prototipagem (Prática)
• Projete um aplicativo para smartphone para rachar a conta
que não seja tão simplicista como apenas dividir o valor 
total pelo número de participantes.
• Divisao em grupos para design participativo
• Analise de requisitos, cenários, perfis de usuário, prototipagem
Apps Híbridos
HTML 5 para Mobile
• É possível criar duas versões da sua página HTML: uma para 
ser visualizada em desktop e outra versão para o dispositivo 
móvel
• É o exemplo da página do Globo Esporte.
Quando acessada de um aparelho móvel, outro domínio é acessado
52
globoesporte.globo.com m.globoesporte.globo.com
HTML 5 para Mobile
• É possível criar duas versões da sua página HTML: uma para 
ser visualizada em desktop e outra versão para o dispositivo 
móvel
• É o exemplo da página do Globo Esporte.
Quando acessada de um aparelho móvel, outro domínio é acessado
• Mas criar dois domínios diferentes pode dificultar a 
manutenção das diferentes versões do site
53
HTML 5 para Mobile
• Uma segunda abordagem consiste em mudar o estilo da 
página segundo o dispositivo no qual ela é acessada. 
Apenas uma versão é criada para diferentes dispositivos
54
HTML 5 para Mobile
• Estas páginas que se adaptam às diferentes resoluções são 
chamadas responsivas
55
Apps HTML 5 vs. Apps Nativos
Apps
HTML5
Apps
Nativos
Padrões abertos 
(HTML5, CSS3, Javascript)
Portável para diferentes plataformas
(Diferentes aparelhos e S.O.)
Elementos de interface nativa e acesso a sensores 
(Acesso a câmera, GPS, SMS, contatos.)
Comercialização da aplicação 
(Google Play, Apple App Store, etc.)
56
Apps HTML 5 vs. Apps Nativos
• Aplicativos HTML5 são, na sua essência, multiplataforma, 
limitados apenas à compatibilidade dos navegadores
• No entanto, os recursos como acelerômetro, bússola, 
câmera, geolocalização e armazenamento de arquivos estão 
tradicionalmente disponíveis apenas para quem utiliza os 
kits de desenvolvimento de software nativos (NDKs)
57
Aplicativos Híbridos
• Apps desenvolvidos em HTML5 e podem utilizar recursos de 
hardware disponíveis aos NDKs de cada plataforma
58
Aplicativos
Híbridos
Padrões abertos 
(HTML5, CSS3, Javascript)
Portável para diferentes plataformas
(Diferentes aparelhos e S.O.)
Elementos de interface nativa e acesso a sensores 
(Acesso a câmera, GPS, SMS, contatos.)
Comercialização da aplicação 
(Google Play, Apple App Store, etc.)
Aplicativos Híbridos
• Existem frameworks que compilam o código HTML5 (HTML, 
CSS e JS) para rodar como aplicações nativas
• PhoneGAP, Cordova e Trigger.io são alguns destes 
frameworks
59
Frameworks como o 
PhoneGAP compilam o 
código HTML e 
produzem como saída 
uma aplicação móvel 
híbrida.
Aplicativos Híbridos
• O PhoneGap, é um framework Open Source
• Ele é compatível com 7 diferentes sistemas operacionais 
móveis (iOS, Android, Blackberry, Windows Phone, Palm 
WebOS, Bada e Symbian)
60
Aplicativos Híbridos
• O desempenho de aplicações nativas ainda costuma ser 
melhor 
• No entanto, aplicações criadas em HTML 5 são práticas de 
serem criadas e mantidas. Um mesmo código pode ser 
compilado para diversas plataformas e a experiência do 
usuário com aplicativos híbridos pode ser a mesma de 
aplicativos nativos
61
Frameworks para interface
• O HTML 5 fornece muita liberdade ao desenvolvedor na 
construção das interfaces
• Existem frameworks com elementos de interfaces móveis 
que auxiliam a adequação aos diferentes padrões
62
Frameworks para interface
• Ionic e Ratchet são dois desses frameworks
• O Ratchet é o mais simples dos dois. Para formatar sua 
aplicação segundo os estilos predefinidos pelo Ratchet, 
basta usar as classes correspondentes
63
Comentários finais
• O HTML5 é mais do que uma melhoria na especificação do 
HTML4. HTML5 é uma versão completamente nova 
• Aplicações em HTML5 são multiplataforma. Um mesmo 
conteúdo pode ser adaptado para diferentes mídias, o que 
facilita sua manutenção 
• No entanto aplicações HTML5, ainda que híbridas, podem 
não atingir o mesmo desempenho de aplicativos nativos
64
Hello World com HMTL
65
Referências
• http://www.mobilehci2012.org
• https://www.statista.com/statistics/266136/global-market-share-held-by-smartphone-
operating-systems/
• https://www.theverge.com/2017/2/16/14634656/android-ios-market-share-blackberry-2016
• Jingtao Wang, course notes at Berkeley University
• http://ignorethecode.net/blog/2009/08/07/virtual-keyboards-on-iphone-and-android/
• http://www.commonagency.com/blog/2012/01/official-mobile-interface-guidelines/
• http://tableless.com.br/html5-estrutura-semantica/
• http://www.w3schools.com/html/html5_intro.asp
• http://html5doctor.com/
• http://html5demos.com/
• http://phonegap.com/
• http://goratchet.com/
66
http://www.mobilehci2012.org/
https://www.statista.com/statistics/266136/global-market-share-held-by-smartphone-operating-systems/
https://www.theverge.com/2017/2/16/14634656/android-ios-market-share-blackberry-2016
http://ignorethecode.net/blog/2009/08/07/virtual-keyboards-on-iphone-and-android/
http://www.commonagency.com/blog/2012/01/official-mobile-interface-guidelines/
http://tableless.com.br/html5-estrutura-semantica/
http://www.w3schools.com/html/html5_intro.asp
http://html5doctor.com/
http://html5demos.com/
http://phonegap.com/
http://goratchet.com/
Introdução ao Desenvolvimento 
para Dispositivos Móveis
Victor Adriel de Jesus Oliveira
vajoliveira@inf.ufrgs.br
Skype: victor.adriel
mailto:vajoliveira@inf.ufrgs.br