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 atendido

No carro de carona

No transporte público

Enquanto espera o inicio de um evento (CK, cinema, teatro, entre outros)

Enquanto trabalha

No banheiro

Enquanto assiste TV

Enquanto 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 paracada plataforma

• Conhecer diferenteslinguagens (de acordo com a plataforma a serdesenvolvida)

Web

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

• Baixo ou nenhumretrabalho para migrar paracada plataforma suportada

Orçamento Disponível

App

• Curva de aprendizado paracada plataforma

• Mão de obra distintas / Maior custo

• Dificil/impossívelreutilizaçã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 sistemaoperacional

• Integração com funçõesavanç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ésde 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ódigosmaliciosos

• 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 SistemaOperacional

• App precisa ser instalada(podendo ser um processolento)

Web

• Roda dentro do navegadorque interpreta seuHTML/CSS/JS

• *Precisa ser baixada do servidor com suasdependências

Usabilidade e visual

App

• Mais familiar para o usuário– Componentes

– Navegação

Web

• Preferência linguagemvisual única na web

Instalação e distribuição

App

• Precisa ser instalada(geralmente pela loja)

• Custo para serdesenvolvedor cadastrado

• Submeter apps paraaprovação

• Baixa a aplicação completa

• Exposição e busca na Loja

Web

• Abre o link do navegador

• Pode adicionar aos favoritosna tela inicial

• Permissões mais avançadassão solicitadas pelonavegador

• Acesso sempre a versãomais 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, carregandopoucas imagens para serem carregados maisrápidos

http://m.site.com.br ouhttp://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 webapps.

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