SlideShare uma empresa Scribd logo
1 de 49
8º Connecting Knowledge
HEIDER 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 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

Mais conteúdo relacionado

Mais procurados

Front-end o que é preciso saber?
Front-end o que é preciso saber?Front-end o que é preciso saber?
Front-end o que é preciso saber?João Praia
 
Oficina Intel XDK - 1ª ETEC Camp
Oficina Intel XDK - 1ª ETEC CampOficina Intel XDK - 1ª ETEC Camp
Oficina Intel XDK - 1ª ETEC CampDiego Cavalca
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 
Microsoft Edge (Teched 2015)
Microsoft Edge (Teched 2015)Microsoft Edge (Teched 2015)
Microsoft Edge (Teched 2015)Fabrício Catae
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudiMasters
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline FirstDan Vitoriano
 
Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019Gabriel Rodrigues Couto
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com PolymerStefan Horochovec
 
Abordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento webAbordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento webWemerson Januario
 
Redação Jornalística para Novas Mídias
Redação Jornalística para Novas MídiasRedação Jornalística para Novas Mídias
Redação Jornalística para Novas MídiasAriane Ribeiro
 
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiênciaAplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiênciaAlexandre Magno Teles Zimerer
 
Utilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveisUtilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveisStefan Horochovec
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsToninho Sousa
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelGuto Xavier
 
WebBr 2013: Apps Mobile Multiplataforma e OpenSource com Sencha Touch e Phon...
WebBr 2013: Apps Mobile Multiplataforma e OpenSource com  Sencha Touch e Phon...WebBr 2013: Apps Mobile Multiplataforma e OpenSource com  Sencha Touch e Phon...
WebBr 2013: Apps Mobile Multiplataforma e OpenSource com Sencha Touch e Phon...Loiane Groner
 

Mais procurados (20)

Front-end o que é preciso saber?
Front-end o que é preciso saber?Front-end o que é preciso saber?
Front-end o que é preciso saber?
 
Oficina Intel XDK - 1ª ETEC Camp
Oficina Intel XDK - 1ª ETEC CampOficina Intel XDK - 1ª ETEC Camp
Oficina Intel XDK - 1ª ETEC Camp
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Microsoft Edge (Teched 2015)
Microsoft Edge (Teched 2015)Microsoft Edge (Teched 2015)
Microsoft Edge (Teched 2015)
 
CMS - Joomla
CMS - JoomlaCMS - Joomla
CMS - Joomla
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
 
Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019Micro Front-end + CQRS/ES - JSSP jul/2019
Micro Front-end + CQRS/ES - JSSP jul/2019
 
Como Criar Um Blog
Como Criar Um BlogComo Criar Um Blog
Como Criar Um Blog
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
 
Abordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento webAbordagens modernas no desenvolvimento web
Abordagens modernas no desenvolvimento web
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Redação Jornalística para Novas Mídias
Redação Jornalística para Novas MídiasRedação Jornalística para Novas Mídias
Redação Jornalística para Novas Mídias
 
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiênciaAplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
 
Utilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveisUtilizando Polymer em aplicações móveis
Utilizando Polymer em aplicações móveis
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
WebBr 2013: Apps Mobile Multiplataforma e OpenSource com Sencha Touch e Phon...
WebBr 2013: Apps Mobile Multiplataforma e OpenSource com  Sencha Touch e Phon...WebBr 2013: Apps Mobile Multiplataforma e OpenSource com  Sencha Touch e Phon...
WebBr 2013: Apps Mobile Multiplataforma e OpenSource com Sencha Touch e Phon...
 
Palestra Webstandards
Palestra WebstandardsPalestra Webstandards
Palestra Webstandards
 
Flutter, prazer
Flutter, prazerFlutter, prazer
Flutter, prazer
 

Semelhante a 8ºConnecting Knowledge Web ou App

Desenvolvimento Mobile
Desenvolvimento MobileDesenvolvimento Mobile
Desenvolvimento MobileElton Minetto
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-PlatformAdriel Café
 
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...Pedro Edson Silva Barros
 
Descomplicando o Android
Descomplicando o AndroidDescomplicando o Android
Descomplicando o AndroidHeider Lopes
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Leonardo Melo Santos
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchLeonardo Soares
 
Marketing digital tecnologia da informação
Marketing digital   tecnologia da informaçãoMarketing digital   tecnologia da informação
Marketing digital tecnologia da informaçãoAna Paula Coelho Barbosa
 
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisApresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisÉdipo Souza
 
Desenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis MultiplataformaDesenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis MultiplataformaJose Augusto Cintra
 
HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1Jose Berardo
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Desmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWADesmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWAStefan Horochovec
 
Aplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test CloudAplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test Cloudakamud
 
Aplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudAplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudWennder Santos
 
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Loiane Groner
 

Semelhante a 8ºConnecting Knowledge Web ou App (20)

Desenvolvimento Mobile
Desenvolvimento MobileDesenvolvimento Mobile
Desenvolvimento Mobile
 
Mobile Apps Cross-Platform
Mobile Apps Cross-PlatformMobile Apps Cross-Platform
Mobile Apps Cross-Platform
 
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
Desenvolvimento de Aplicações para Dispositivos Móveis: Aplicativos Nativos, ...
 
Descomplicando o Android
Descomplicando o AndroidDescomplicando o Android
Descomplicando o Android
 
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
Sencha Touch, RhoMobile, AppMobi e jQuery Mobile um comparativo entre platafo...
 
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha TouchIntrodução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch
 
Marketing digital tecnologia da informação
Marketing digital   tecnologia da informaçãoMarketing digital   tecnologia da informação
Marketing digital tecnologia da informação
 
Apps Hibridos
Apps HibridosApps Hibridos
Apps Hibridos
 
A vez do mobile - Dev in Bahia #3
A vez do mobile - Dev in Bahia #3A vez do mobile - Dev in Bahia #3
A vez do mobile - Dev in Bahia #3
 
Web Mobile
Web MobileWeb Mobile
Web Mobile
 
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias DigitaisApresentação de minha Monografia do curso de Sistema e Mídias Digitais
Apresentação de minha Monografia do curso de Sistema e Mídias Digitais
 
Desenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis MultiplataformaDesenvolvimento de Aplicativos Móveis Multiplataforma
Desenvolvimento de Aplicativos Móveis Multiplataforma
 
Android iOS Híbridos
Android iOS HíbridosAndroid iOS Híbridos
Android iOS Híbridos
 
HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1
 
Palestra Android
Palestra AndroidPalestra Android
Palestra Android
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Desmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWADesmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWA
 
Aplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test CloudAplicativos Híbridos e Xamarin Test Cloud
Aplicativos Híbridos e Xamarin Test Cloud
 
Aplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test CloudAplicativos híbridos e Xamarin Test Cloud
Aplicativos híbridos e Xamarin Test Cloud
 
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
 

Mais de Heider Lopes

Workshop do Bem: O mundo das APIs
Workshop do Bem: O mundo das APIsWorkshop do Bem: O mundo das APIs
Workshop do Bem: O mundo das APIsHeider Lopes
 
Android Wear: Expandindo as funcionalidades do seu Android
Android Wear: Expandindo as funcionalidades do seu AndroidAndroid Wear: Expandindo as funcionalidades do seu Android
Android Wear: Expandindo as funcionalidades do seu AndroidHeider Lopes
 
1 2 3 - Testando - Automatizando os testes de software
1 2 3 - Testando - Automatizando os testes de software1 2 3 - Testando - Automatizando os testes de software
1 2 3 - Testando - Automatizando os testes de softwareHeider Lopes
 
5º ck o java e o android no iot
5º ck o java e o android no iot5º ck o java e o android no iot
5º ck o java e o android no iotHeider Lopes
 
Arduíno muito prazer
Arduíno muito prazerArduíno muito prazer
Arduíno muito prazerHeider Lopes
 
Programando java independente da ide
Programando java independente da ideProgramando java independente da ide
Programando java independente da ideHeider Lopes
 
Montando ambiente de desenvolvimento android em um tablet
Montando ambiente de desenvolvimento android em um tabletMontando ambiente de desenvolvimento android em um tablet
Montando ambiente de desenvolvimento android em um tabletHeider Lopes
 
Conversando com o android
Conversando com o androidConversando com o android
Conversando com o androidHeider Lopes
 

Mais de Heider Lopes (11)

Apicon2018.pptx
Apicon2018.pptxApicon2018.pptx
Apicon2018.pptx
 
Workshop do Bem: O mundo das APIs
Workshop do Bem: O mundo das APIsWorkshop do Bem: O mundo das APIs
Workshop do Bem: O mundo das APIs
 
Mobile
MobileMobile
Mobile
 
Tht na web
Tht na webTht na web
Tht na web
 
Android Wear: Expandindo as funcionalidades do seu Android
Android Wear: Expandindo as funcionalidades do seu AndroidAndroid Wear: Expandindo as funcionalidades do seu Android
Android Wear: Expandindo as funcionalidades do seu Android
 
1 2 3 - Testando - Automatizando os testes de software
1 2 3 - Testando - Automatizando os testes de software1 2 3 - Testando - Automatizando os testes de software
1 2 3 - Testando - Automatizando os testes de software
 
5º ck o java e o android no iot
5º ck o java e o android no iot5º ck o java e o android no iot
5º ck o java e o android no iot
 
Arduíno muito prazer
Arduíno muito prazerArduíno muito prazer
Arduíno muito prazer
 
Programando java independente da ide
Programando java independente da ideProgramando java independente da ide
Programando java independente da ide
 
Montando ambiente de desenvolvimento android em um tablet
Montando ambiente de desenvolvimento android em um tabletMontando ambiente de desenvolvimento android em um tablet
Montando ambiente de desenvolvimento android em um tablet
 
Conversando com o android
Conversando com o androidConversando com o android
Conversando com o android
 

8ºConnecting Knowledge Web ou App