8º Connecting KnowledgeHEIDER LOPES

Web App

Heider Lopes

• Pós-Graduado em Sistemas e Desenvolvimento Web

• Analista Programador

• THT Member

Redes Sociais do THT Member

twitter.com/heiderlopes

github.com/heiderlopes

slideshare.net/heiderlopes

www.heiderlopes.com.br

Agenda• Introdução

• Web ou App?

• Estratégias de Desenvolvimento

• Conclusão

Introdução

Oportunidades

Introdução

Você acaba de ter a idéia de criar um

aplicativo!!!

Por que tem que ser mobile?

Rápida Pesquisa

Em qual dessas situações você utiliza seu celular?Enquanto espera para ser atendidoNo carro de caronaNo transporte públicoEnquanto espera o inicio de um evento (CK, cinema, teatro, entre outros)Enquanto trabalhaNo banheiroEnquanto assiste TVEnquanto conversa com os amigos

Por que mobile?

Quanto mais melhor

“Normalmente”queremos atingir a maior

quantidade de usuários

Plataformas Mobile

Porém no deparamos com diversas

plataformas

…

E AGORA???

Relembrando: Web X Desktop

Web ou App?

Deadline de entrega

App

• Criar um aplicativo para cada plataforma

• Conhecer diferentes linguagens (de acordo com a plataforma a ser desenvolvida)

Web

• O aplicativo irá abranger diversas plataformas do mercado (Phonegap/Cordova)

• Baixo ou nenhum retrabalho para migrar para cada plataforma suportada

Orçamento Disponível

App

• Curva de aprendizado para cada plataforma

• Mão de obra distintas / Maior custo

• Dificil/impossível reutilização entre as plataformas

Web

• Curva de aprendizado web (HTML5/CSS3/JS)

• Redução de custo

• Reutilização do código

Integração com Hardware

App

• Acesso direto ao hardware

• Acesso a recurso do sistema operacional

• Integração com funções avançadas e a outras Apps

• Manipulação do aparelho

Web

• Não tem acesso direto a plataforma nativa

• Roda dentro de um navegador

• Acesso a recursos através de APIs (câmera, geolocalização, acelerômetro, giroscópio, animações 3D)

Segurança e Privacidade

App

• Restrições explícitas que o usuário tem que aprovar (Loja)

• Lojas com mecanismos de aprovação

• Detecção de códigos maliciosos

• Maior acesso a dados do usuário e altos privilégios

Web

• Restrição de segurança

• Menor acesso a dados do usuário e baixo privilégios

Performance

App

• Normalmente mais rápidos

• Rodam direto no Sistema Operacional

• App precisa ser instalada (podendo ser um processo lento)

Web

• Roda dentro do navegador que interpreta seu HTML/CSS/JS

• *Precisa ser baixada do servidor com suas dependências

Usabilidade e visual

App

• Mais familiar para o usuário– Componentes– Navegação

Web

• Preferência linguagem visual única na web

Instalação e distribuição

App

• Precisa ser instalada (geralmente pela loja)

• Custo para ser desenvolvedor cadastrado

• Submeter apps para aprovação

• Baixa a aplicação completa

• Exposição e busca na Loja

Web

• Abre o link do navegador

• Pode adicionar aos favoritos na tela inicial

• Permissões mais avançadas são solicitadas pelo navegador

• Acesso sempre a versão mais recente

• Busca através de sites

Monetização

App

• Lojas são plataformas de pagamento integradas

• Baixo trabalho para o usuário comprar apps e assinaturas

Web

• Serviços de pagamentos

Web First e Mobile First

Site Mobile

• Possuem layout muito resumido, carregando poucas imagens para serem carregados mais rápidos

http://m.site.com.br ou http://mobile.site.com.br

Design Responsivo

Media Queries

Expressões que direcionam o usuário para uma folha de estilo diferente de acordo com o

dispositivo que ele esta usando.

O que podemos definir com MQ

• Tipo de dispositivo – Móvel,– Monitores– Impressão– etc)

• Tela– Largura– Orientação– Resolução– Proporção de tela

Layout Fluído

Segredo é não usar pixels nas medidas e sim porcentagens e ems para um layout mais

fluído e flexível

Imagens Flexíveis

Imagem devem se adaptar à todo tipo de resolução

Link Demo: https://github.com/daniguerrato/design-responsivo-demo

Estratégias de Desenvolvimento

Desenvolvimento Nativo

Os aplicativos são desenvolvidos especificamente para uma plataforma utilizando a linguagem e

as APIs do dispositivo.

Android

iOS

Windows Phone

Mobile Web Apps

São sites que diversas formas parecem um aplicativo nativo. São executados através de

um navegador.

Funcionalidades Acessíveis

• Esconder botão do navegador

• Gestos de navegação

• Cache do navegador

• GPS

• Link para ligação direta

Funcionalidades Inacessíveis

• Uso de notificação do Sistema Operacional

• Execução em segundo plano

• Informações do acelerômetro

• Gestos complexo

Desenvolvimento Híbrido

São parcialmente nativos e parcialmente web apps.

Sencha Touch

Phonegap/Cordova

IONIC Framework

Conclusão

App

• Objetivo bem definido

• Performance perfeita

• Uso intensivo do hardware

• Aplicativo off-line

Web

• Criar mínimo produto viável

• Desenvolvimento rápido

• Público alvo heterogêneo

• Não exige alta performance

• Não ter problema em exigir o usuário conectado a internet

Dúvidas

THT nas Redes Sociais

MEETUP.COM/THT-THINGS-HACKER-TEAM

THINGS HACKER TEAM

SLIDESHARE.NET/THINGSHACKERTEAM

TWITTER.COM/THINGSHACKERTM

GITHUB.COM/THINGSHACKERTEAM

FACEBOOK.COM/THINGSHACKERTEAM

WWW.THINGSHACKERTEAM.COM