Introdução ao Desenvolvimento para Dispositivos...
Transcript of Introdução ao Desenvolvimento para Dispositivos...
![Page 1: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/1.jpg)
Introdução ao Desenvolvimento para Dispositivos Móveis
Victor Adriel de Jesus OliveiraINF - UFRGS
PARTE I
![Page 2: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/2.jpg)
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)
![Page 3: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/3.jpg)
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
![Page 4: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/4.jpg)
Plataformas Móveis
![Page 5: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/5.jpg)
O que é um dispositivo móvel?
• Dispositivo computadorizado que caiba no bolso
• Que funcione e se utilize em movimento
5
![Page 6: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/6.jpg)
A cada dia mais móvel
Hoje, carregamos um poder computacional maior nos nossos bolsosdo que tínhamos no mundo inteiro há 60 anos.
![Page 7: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/7.jpg)
Ubiquo e Pervasivo
MAINFRAMEMuitas pessoas dividem 1 computador
PC1 pessoa com 1 computador
![Page 8: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/8.jpg)
Ubiquo e Pervasivo
Computação UbiquaVários computadores servem cada pessoa
![Page 9: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/9.jpg)
• 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.”
![Page 10: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/10.jpg)
Desafios no Desenvolvimento de Apps Móveis
• Recursos físicos limitados
• Contextos de uso diversificados
• Diferentes atividades
• Atenção limitada
![Page 11: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/11.jpg)
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
![Page 12: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/12.jpg)
Desafios no Desenvolvimento de Apps Móveis
• Contextos de uso diversificados
![Page 13: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/13.jpg)
Desafios no Desenvolvimento de Apps Móveis
• Diferentes atividades
Lembretes Anotando Receitas To-Do lists
![Page 14: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/14.jpg)
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
![Page 15: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/15.jpg)
Técnicas de Interação com Dispositivos Móveis
JustDance Siri, Cortana, Google Assistant
QR Codes
• Apontamento, entrada por voz, entrada por imagem…
![Page 16: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/16.jpg)
Dispositivos Móveis Hoje
17
![Page 17: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/17.jpg)
Dispositivos Móveis Hoje
18
![Page 18: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/18.jpg)
Dispositivos Móveis Hoje
19
![Page 19: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/19.jpg)
Dispositivos Móveis Hoje
20
![Page 20: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/20.jpg)
Dispositivos Móveis Hoje
21
![Page 21: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/21.jpg)
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
![Page 22: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/22.jpg)
Projetando Apps
![Page 23: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/23.jpg)
iOS Human Interface Guidelines
![Page 24: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/24.jpg)
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
![Page 25: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/25.jpg)
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
![Page 26: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/26.jpg)
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)
![Page 27: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/27.jpg)
Android Styleguide
![Page 28: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/28.jpg)
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
![Page 29: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/29.jpg)
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/
![Page 30: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/30.jpg)
Windows Phone Design Guidelines
![Page 31: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/31.jpg)
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
![Page 32: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/32.jpg)
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
![Page 33: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/33.jpg)
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
![Page 34: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/34.jpg)
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
![Page 35: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/35.jpg)
Foco da UX
Contexto
UsuáriosConteúdo
![Page 36: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/36.jpg)
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
![Page 37: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/37.jpg)
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
![Page 38: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/38.jpg)
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
![Page 39: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/39.jpg)
ConteúdoContexto
UsuáriosConteúdo
![Page 40: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/40.jpg)
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
![Page 41: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/41.jpg)
Métodos
![Page 42: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/42.jpg)
Etnografia
• Escrevendo sobre pessoas
![Page 43: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/43.jpg)
Personas
![Page 44: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/44.jpg)
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
![Page 45: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/45.jpg)
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: • Atender chamados de passageiros;• Planejar e executar rotas de entrega.
• Usa constantemente o celular conectado à redemóvel. Passa maior parte do tempo no trânsito.
• Citação: “Tempo é dinheiro”
![Page 46: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/46.jpg)
Design Participativo
![Page 47: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/47.jpg)
Prototipagem
• Wireframes
![Page 48: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/48.jpg)
Prototipagem
• Storyboards
![Page 49: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/49.jpg)
Prototipagem (Prática)
• Projete um aplicativo para smartphone para rachar a contaque 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
![Page 50: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/50.jpg)
Apps Híbridos
![Page 51: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/51.jpg)
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
![Page 52: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/52.jpg)
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
![Page 53: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/53.jpg)
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
![Page 54: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/54.jpg)
HTML 5 para Mobile
• Estas páginas que se adaptam às diferentes resoluções são chamadas responsivas
55
![Page 55: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/55.jpg)
Apps HTML 5 vs. Apps Nativos
AppsHTML5
AppsNativos
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
![Page 56: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/56.jpg)
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
![Page 57: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/57.jpg)
Aplicativos Híbridos
• Apps desenvolvidos em HTML5 e podem utilizar recursos de hardware disponíveis aos NDKs de cada plataforma
58
AplicativosHí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.)
![Page 58: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/58.jpg)
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.
![Page 59: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/59.jpg)
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
![Page 60: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/60.jpg)
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
![Page 61: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/61.jpg)
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
![Page 62: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/62.jpg)
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
![Page 63: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/63.jpg)
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
![Page 64: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/64.jpg)
Hello World com HMTL
65
![Page 65: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/65.jpg)
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
![Page 66: Introdução ao Desenvolvimento para Dispositivos Móveisvajoliveira/images/cei/docs/IntroToMobileI.pdf · • Projeto guiado por 4 princípios básicos ... Experiência do Usuário](https://reader036.fdocumentos.tips/reader036/viewer/2022081513/5befc44d09d3f2eb288c4b82/html5/thumbnails/66.jpg)
Introdução ao Desenvolvimento para Dispositivos Móveis
Victor Adriel de Jesus [email protected]
Skype: victor.adriel