Mobilidade

Desenvolvimento de aplicações móveis

Sobre o palestrante
● Graduado em Ciência da Computação;
● Arquiteto/desenvolvedor com mais de 10 anos de experiência com
desenvolvimento de aplicações de missão crítica;
● Entusiasta ágil;
● Especialista na plataforma Java/JEE;
● Certificados
○ SCEA - Sun Certified Enterprise Architect for the Java2 EE

○ SCBCD – Sun Certified Business Component Developer

○ SCWCD - Sun Certified Web Component Developer for the Java 2EE Platform

○ SCPJ2 - Sun Certified Programmer for Java[tm] 2 Platform 1.2

○ ISEB ISTQB – Foundation Certificate in Software Testing

● Atualmente trabalha como consultor freelancer;

Agenda
● Conceito de mobilidade;
● Mercado;
● Por que aderir?
● Desenvolvimento móvel:
○ Nativo;
○ Web mobile;
○ Web mobile versus Nativo;
Agenda
○ Híbrido;

○ Multiplataforma;

● Plataformas dominantes;
● Qual abordagem?
● Treinamento;
Conceito de mobilidade
● O que é mobilidade?
○ Mobilidade ou sistemas
computacionais móveis são
sistemas que podem facilmente ser
movidos fisicamente ou cujas
capacidades podem ser executadas
enquanto eles estão sendo
movidos;

● Em outras palavras:
○ Informação disponível em qualquer
lugar e a qualquer momento;
Mercado
● Vendas de smartphones em 2011
superaram a venda de PCs;
● Aumento de 45% em relação a 2010;
Mercado
● Em 2013 os smartphones irão superar os
PCs em acesso à internet;
Mercado
● Em 2016 serão vendidos 1.6 bilhões de
smartphones;
Mercado
● Há mais de 3 bilhões de dispositivos móveis;
● 4x o número de PCs;
 Mercado
● Estamos nos tornando uma sociedade pós-PC:
○ Máquinas e serviços que interagem de forma mais
natural com os usuários:
■ Smartphone;
■ Tablet;
■ Qualquer dispositivo móvel conectado a Internet;
Por que aderir?
● Mercado de aplicações e
dispositivos móveis estão
em crescimento acelerado;

● Novos usuários em
potencial;

● Para muitas pessoas o

smartphone é o principal
dispositivo;
Por que aderir?
● Maior visibilidade e novas
oportunidades para as
organizações;

● Segundo GigaOm Pro Survey,

em 2011 38% dos negócios
foram feitos com smartphones,
em comparação a 26% do ano
anterior;
Por que aderir?
● A Internet levou informação para dentro de
nossas casas e escritórios, agora é possível
acessá-la em qualquer lugar;

● Hoje é possível desenvolver praticamente

qualquer tipo de aplicação:
○ E-commerce;
○ ERP;
○ Aplicações dedicadas;
Desenvolvimento móvel
● Novo paradigma com oportunidades e
desafios específicos, onde as melhores
práticas do mundo desktop simplesmente
não se aplicam;
Desenvolvimento móvel
● Criação de um novo ecossistema em
constante mudança;

● Sem padrões estabelecidos;

● Mercado em constante experimentação;

● Usuários mobile têm padrões de uso e

métodos de navegação únicos;
Desenvolvimento móvel
● Características dos dispositivos móveis:

○ Múltiplas versões da aplicação:

■ Crescente variedade de plataformas (BlackBerry, iPhone,
Windows Mobile, Android etc) ;

○ Diferentes modelos de hardware:

■ Android é a plataforma mais fragmentada;
Desenvolvimento móvel
● Tamanho e resolução da tela:
○ A aplicação deve estar preparada para adaptar-se automaticamente
ou devem ser feitas versões diferentes para cada tamanho específico;

● Memória e processamento:
○ A aplicação deve preocupar-se com a capacidade de memória e
processamento do dispositivo que irá ser executada;

● Conexão de rede imprevisível, cobertura limitada e

baixa velocidade;
Desenvolvimento móvel
● Conectividade:
○ Ao desenvolver uma aplicação, deve-se saber de que formas ela vai
se comunicar com meio externo para a troca de informações;

● Aplicação tem que se preocupar com consumo de

bateria;
Desenvolvimento móvel
● Antes de migrar ou criar aplicações móveis
deve-se levar em conta:

○ Layout:
■ Disponibilizar apenas as funcionalidades mais importantes para o
usuário. Nesse caso, menos é mais;
■ Utilizar navegação vertical e transição entre páginas, ao invés de
usar navegação esquerda/direita;
■ Evitar links multinível;
■ Prover atalhos para a home, seção anterior e posterior no fim de
cada página, para que o usuário não precise rolar a página até o
início;
Desenvolvimento móvel
○ Definir público alvo;

○ Conteúdo:
■ Garantir que a informação seja fácil de ler e navegar;

○ Evitar animações complexas para não consumir

bateria desnecessariamente;
Desenvolvimento móvel
● Imagem:

○ Usar imagens apenas quando realmente for necessário;

○ Usar os formatos jpeg, png e gif;
○ Não permitir zooming;
○ Permitir desabilitar imagens;

● Tamanho da página:

○ É essencial manter as páginas simples e pequenas;

○ Evitar que o tamanho das páginas ultrapasse 25 Kb;
Desenvolvimento móvel
● Exemplos:
Desenvolvimento móvel
● Erros comuns:
○ Achar que não há necessidade de criar uma versão
móvel da aplicação só porque a aplicação web abre
no browser do smartphone;

○ Exportar todas as funcionalidades da versão

desktop para a mobile;

○ Utilização frequente do pinch to zoom;

Desenvolvimento móvel
● Erros comuns:

○ Páginas web convencionais não foram projetadas

para serem acessadas por dispositivos móveis:

■ Tamanho pré-fixado;
■ Animações javascript complexas e efeitos mouse-over;
■ Uso de tags específicas;
■ Baixa usabilidade e performance;
Desenvolvimento móvel
● Erros comuns:

○ Desenvolvimento voltado para um tipo de dispositivo

ao invés do tamanho da tela e resolução;

○ Utilizar os mesmos serviços "API" da versão

desktop para a versão móvel:
■ Tráfego desnecessário de dados;

○ Utilizar a mesma abordagem para plataformas

diferentes;
 Desenvolvimento móvel
● O site da TAM não funciona corretamente no
Android, iPhone e iPad;
Desenvolvimento móvel
● Diferenças entre Web Mobile e Web Desktop;
Desenvolvimento móvel
● O desenvolvimento de aplicações móveis é
classificado em:

○ Nativo;

○ Web mobile;

○ Híbrido;

○ Multiplataforma;
Nativo
● Refere-se a aplicações desenvolvidas
usando ling. de programação específica de
uma plataforma como iOS ou Android;

● Atualmente é a solução preferida pelos

programadores;
Nativo
● São rápidas, confiáveis e podem acessar
recursos de hardware (câmera,
acelerômetro, bússola, etc);

● Restrita a plataforma escolhida;

Nativo
● Vantagens:

○ Performance;
○ Usabilidade;
○ Interfaces rica "Rich GUI";
○ Armazenamento local;
○ Offline;
○ Acesso completo aos hardwares e APIs do
dispositivo (câmera, accelerometer, compass, etc);
○ Monetização;
Nativo
● Desvantagens:

○ Alto custo de desenvolvimento e manutenção;

○ Atualização não é transparente ao usuário;
○ Processo de aprovação;
○ Complexidade:
■ Cada plataforma tem características específicas;
○ Escassez de profissionais capacitados;
Nativo
● Arquitetura;
Nativo
● Comparativo entre plataformas;
 Web mobile
● Aplicações que utilizam padrões abertos e
teoricamente podem ser executadas em
qualquer dispositivo que possua browser;

● Possibilita uso de conhecimentos prévios das

tecnologias web (html, xhtml, js e css) com
novas técnicas para fazer a aplicação
funcionar em dispositivos móveis;

● Mesmo código para todos os dispositivos;

Web mobile
● Vantagens:

○ Portável;
○ Uso de tecnologias (HTML/CSS/Javascript)
conhecidas;
○ Problemas de performance são cada vez menos
importante devido evolução dos browsers móveis;
○ Não há processo de aprovação;
○ Atualização transparente para o usuário;
Web mobile
● Desvantagens:

○ Performance inferior às aplicações nativas;

○ Sem acesso a componentes de hardware do
dispositivo (câmera, acelerômetro, bússola, etc);
○ Baixa usabilidade;
○ Especificação HTML5 não finalizada;
○ Dificuldade em adaptar para diferentes dispositivos,
resolução de telas e diversidade de browsers;
Web mobile
● Responsive Web
Design é um conceito
onde o objetivo é
apresentar informação
de forma acessível e
confortável para
diversos meios de
acesso;

● Layout agnostic;
Web mobile
● Com o crescimento da variedade de
dispositivos, onde os websites são
visualizados em laptops, tablets, netbooks,
smartphones e etc, torna-se praticamente
impossível criar múltiplas versões do mesmo
web site;

● O web site deve se adaptar para qualquer

tipo, tamanho e resolução do dispositivo;
Web mobile
● Detecta as características do aparelho como
resolução e tamanho através de "media
queries", ao invés do tipo;

● Uso de tecnologias conhecidas como js e

css para montar o layout do web site;

● Performance pode ser inferior em relação a

abordagem de diferentes web site para cada
dispositivo;
Web mobile
● Exemplos:
Web mobile
Exemplos:
Web mobile
● Um design responsivo incluí:

○ Adaptar o layout da página de acordo com a

resolução em que está sendo visualizada;

○ Redimensionar as imagens automaticamente para

que caibam na tela e para que não sobrecarreguem
a transferência de dados;
Web mobile
○ Ocultar elementos desnecessários nos dispositivos;

○ Adaptar tamanho de botões e links para interfaces

touch onde o ponteiro do mouse é substituído pelo
dedo do usuário;

○ Utilizar de forma inteligente recursos mobile como

geolocalização e mudança na orientação do
aparelho (horizontal ou vertical);
Web mobile
Exemplos:
Web mobile
Exemplos:
Web mobile
● Atualmente há um crescente interesse no
uso da tríade (HTML5, JS e CSS3) para o
desenvolvimento de aplicações web mobile;

● HTML5 permite criar aplicações que

ofereçam experiência próxima a das
aplicações nativas:
○ Suporte a multitouch, GPS;
○ Armazenamento local;
Web mobile
● Frameworks específicos "JQuery Mobile"
HTML5 para o desenvolvimento móvel;

● Empresas como Microsoft, Facebook e

Financial Times estão investindo em
HTML5;

● Microsoft anunciou que será possível

desenvolver aplicação para o Windows 8
usando apenas HTML5 e JavaScript;
 Web mobile
● Tendências para 2012 segundo relatório do
Appcelerator/IDC:
○ Crescente interesse por HTML5;
○ 79% dos desenvolvedores dizem que planejam usar ou integrar HTML5
em suas aplicações mobile;
○ O principal problema do HTML5 é que o padrão ainda não foi finalizado;
Web mobile
● Apesar das aplicações web mobile ainda
não conseguirem obter a mesma eficácia e
eficiência das aplicações nativas, é apenas
questão de tempo para aplicações web
mobile superarem as aplicações nativas;

● A história está se repetindo:

○ Alguém se lembra dos anos 90´s?
 Web mobile versus nativo
The Issues Native Apps
Internet access Not required
Installation/updates Must be deployed or
downloaded
User interface Native apps are responsive and
functional
Device compatibility Platform-dependent, hardware-
dependent
Animation/Graphics Fast and responsive
Streaming media Few problems with audio and
video. Flash works, but only if
the device supports it
Web Apps
Required, except for rare apps with offline
capability
Hit refresh
Browsers can be clunky, but new
advancements in JavaScript like jQuery
Mobile are catching up fast
Platform-agnostic, content can be
reformatted with CSS to suit any device
Web apps are getting closer, but will
probably always lag
Flash works where supported. Browser-
based audio and video are getting there,
but still beset by compatibility headaches.
Give it a year or two
 Web mobile versus nativo
The Issues Native Apps Web Apps
Access to Yes, all of them: camera, Access through the browser is limited, though
hardware sensors gyroscope, microphone, compass, geolocation is common
accelerometer, GPS
Development Specific tools required for some Write once, publish once, view it anywhere.
platforms (like Apple’s). You have Multiple tools and libraries to choose from
to build a new app for each target
platform
Can I sell it? Charge whatever you want. Most Advertising is tolerated, subscriptions and
app distributors take a slice, up to paywalls less so. No distribution costs
30% beyond server fees
Distribution Most app stores require approval. No such hassle
And you gotta wait

Outside access to No, the reader must download your Yep, just click a link
your content app
Advertising Control over design (though limited More choices for design, plus access to web
in iAds) and rate analytics. Rates vary widely
Híbrido
● Aplicação nativa que encapsula tecnologias
web;

● Transparente para o usuário;

● Regra de negócio fica no servidor;

● Interface do usuário nativa da plataforma:

○ Assegura acesso a componentes de hardware;
Híbrido
● Arquitetura;
Híbrido
● Exemplos;
Desenvolvimento móvel
● Comparativo entre abordagens;
Desenvolvimento móvel
● Trade-off;
Multiplataforma
● Frameworks projetados para criar
aplicações multiplataforma sem a
necessidade de reescrever a aplicação para
cada plataforma;

● Foco no negócio da aplicação;

● Frameworks populares:
○ Titanium;
○ PhoneGAP;
Multiplataforma
● Vantagens

○ Interface gráfica nativa da plataforma;

○ Acesso aos recursos de hardware do dispositivo;

○ Código fonte único;

○ Menor time to market;

Multiplataforma
● Desvantagens:

○ Pode ser necessário ter que aprender ling. ou

tecnologia proprietária;

○ Dependência do framework;

○ Custo;

○ Não adequado para desenvolvimento de aplicações

complexas;
Multiplataforma
● Titanium:
○ Tecnologias Web(HTML, JS, CSS e Python);
○ Cria aplicação web e/ou nativa;
○ Acesso completo aos hardwares e APIs do
dispositivo;
○ Suporte para iPhone,iPad e Android;

● PhoneGap:
○ Tecnologias Web(HTML e JS);
○ Acesso completo aos hardwares e APIs do
dispositivo;
○ Suporte para iPhone, iPad e Android, Blackberry e
Symbian;
Multiplataforma
 Plataformas dominantes
● De acordo com o NDP as plataformas iOS e
Android representaram 90% do mercado
móvel em 2011;
Plataformas dominantes
● Android 47%
● iOS 43%
iOS
● Linguagem: Objective-C;

● Curva de aprendizado maior na ling.

Objective-C por ser pouca difundida;

● Muitas funcionalidades na API, mas

aplicações ficam presas numa "sandbox";

● Exclusivo para iPhone, iPod e iPad;

iOS
● IDE: Xcode (Apenas Mac OS);

● Mensalidade anual de $99,00;

● Interface do usuário e hardware

padronizados para todos os dispositivos;

● Aprovação de uma aplicação na App Store

dura aproximadamente 15 dias;
iOS
● Arquitetura;
Android
● Plataforma mais popular;

● Faz parte da Open Handset Alliance:

○ Samsung;
○ Motorola;
○ LG;

● Código aberto;

● Linguagem: Java;
Android
● IDE: Eclipse;

● Aplicação é executada dentro da máquina

virtual "Dalvik";

● Fragmentada:
○ Diversos tipos de aparelhos com hardwares,
memórias e versões do Android diferentes;

● Taxa de licenciamento única de $25,00;

Android
● Muitas funcionalidades na API;

● Pequena curva de aprendizado para quem

conhece Java;

● Processo de aprovação simples e rápido;

● Houve casos de aplicações infectadas por

Malware;
Android
● Arquitetura;
Qual abordagem?
● Não existe solução única e padronizada
para todos os tipos de aplicações;

● Cada solução precisa de uma análise

detalhada de todos os requisitos que devem
ser implementados na aplicação;

● Foco no curto prazo, pois os conceitos

estão em constante mudança;
 Qual abordagem?
● Geralmente aplicações Web mobile são mais
baratas para desenvolver e distribuir, mas não
oferecem a mesma experiência que as
aplicações nativas;

● Se acesso a recursos de hardware for

requisito mandatório, acredito que a
abordagem "híbrida", "multiplataforma" ou
"nativa" seja mais adequada;
Treinamento
Referências
● http://www.gartner.com;
● http://www.businessinsider.com/category/intelligence;
● http://www.morganstanley.com/;
● http://econsultancy.com/us/blog/7832-the-fight-gets-technical-mobile-apps-
vs-mobile-sites;
● http://www.yahoo.com;
● http://pro.gigaom.com/;
● http://www.appcelerator.com/company/survey-results/mobile-developer-
report-q-2012/;
● http://marketshare.hitslink.com;
● http://www.jumptap.com/blog/android-and-iphone-now-hog-91-of-mobile-
os-market-share/;
● http://www.zdnetasia.com/analysis-of-mobile-development-approaches-
62300902.htm;
● http://phonegap.com/2011/10/13/phonegap-build-pricing-plans-update/;
● http://www.appcelerator.com/products/titanium-mobile-application-
development/;
● http://www.boxuk.com/blog/mobile-the-business-case;