Seminário de Desenvolvimento Mobile

Seminrio de
Desenvolvimento Mobile
Prof Diego Cavalca
Curso Tcnico em Informtica
02/09/2015
Agenda
Aplicativos Hbridos
HTML5 Recursos e Funcionalidades
Apache Cordova
Mercado Mobile Atual
Aplicativos Hbridos
Aplicativos Nativos
Baixados normalmente da loja de Apps do dispositivo.

Desenvolvido especificamente para uma plataforma.
Acesso completo ao dispositivo.
Desenvolvimento caro.
No multi-plataforma.
Aplicativos Hbridos
So parcialmente Nativos e Web.

Baixados normalmente pela loja de Apps do dispositivo.
Acesso completo ao dispositivo.
Baseados em HTML5, JS, CSS. Exibidos em um Webview.
Permite desenvolvimento multi-plataforma.
uma nova verso da

linguagem HTML, com
novos elementos,
atributos e
comportamentos.
Tem a finalidade de ser

executada no interior
de programas ou de
outra linguagem de
programao.
Define estilos para pginas web com efeitos de

transio, imagens e outros, que do um estilo
novo s pginas Web em todos os aspectos de
design do layout.
Web View.
Navegador Web
embutido dentro do
aplicativo.
Quais as vantagens?
Maior facilidade para trabalhar e utilizar seus
recursos.
Menor custo de desenvolvimento.
Concluso mais rpida do projeto.
Compartilhamento de boa parte do cdigo entre
plataformas.
Desvantagens
Limitao no funcionamento off-line.
Possvel perda de performance.
Quando devo usar?

Quando queremos reduzir custos no
desenvolvimento, e ainda assim usar recursos
nativos como: push e cmera.
Crescimento no mercado Mobile
Exemplos de aplicativos hbridos
Principais ferramentas de
desenvolvimento
Recursos e Funcionalidades
O Novo HTML
(W3C)
(IETF)
(WHATWG)
World Wide Web

Consortium
Internet Engineering
Task Force
Grupo de trabalho
tecnolgico de
aplicaes de
hipertexto
HTML5 Classes
HTML
Semntica
HTML5 - Semntica
Semntica : Descrio mais precisa do seu contedo.
Padres de estrutura do documento;

Variaes do elemento INPUT;
Novos elementos:
udio;
Vdeo;
Canvas.
http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html
http://9elements.com/io/projects/html5/canvas/
HTML5 - Semntica
DOCTYPE
No uma tag HTML e sim uma instruo para o browser sobre qual verso do HTML a pgina est escrita.
Deve ser a primeira linha de cdigo do documento antes da tag HTML.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5
<!DOCTYPE html>
HTML5 - Semntica
HTML4.01
HTML5
HTML5 - Semntica
Novos Tipos de INPUT
http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html
HTML5 - Semntica
Novos Tipos de INPUT
HTML5 - Semntica
Novo elemento - CANVAS
HTML
Multimdia
HTML5 Multimdia
Multimdia : Vdeo e udio na primeira classe com tags prprias.
<audio> </audio>
<video> </video>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
HTML5 Multimdia
udio HTML4
HTML5 Multimdia
Vdeo HTML4
HTML5 Multimdia
udio HTML5
HTML5 Multimdia
Vdeo HTML5
HTML
Grficos & 3D
HTML5 Grficos & 3D

3D, Grficos e Efeitos : Gama de opes de apresentao muito mais diversificada, com
efeitos visuais deslumbrantes.
http://www.freeriderhd.com/t/1016-layers
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_circle
HTML5 Grficos & 3D

Canvas - Destinado a delimitar uma rea para renderizao dinmica de grficos. Todo o
trabalho de criao e animao realizado atravs de linguagens de programao dinmica
(usualmente Javascript).
http://html5demos.com/canvas-grad
HTML5 Grficos & 3D

SVG - Modelo de elementos grficos de modo retido persistindo em um
modelo na memria. Anlogo ao HTML, o SVG cria um modelo de objeto de

elementos, atributos e estilos.
http://html5demos.com/svg-clock
HTML5 Grficos & 3D

WebGL - API em JavaScript, disponvel a partir do novo elemento canvas da
HTML5, que oferece suporte para renderizao de grficos 2D e grficos 3D.
http://oos.moxiecode.com/js_webgl/autumn/
HTML5 Grficos & 3D

Jogos em HTML5
http://www.freeriderhd.com/t/1016-layers
HTML
Acesso a dispositivos
HTML5 Acesso a dispositivos

Acesso a Dispositivo : permitindo o uso de vrios dispositivos de entrada e
de sada. Acesso ao hardware dos dispositivos.
http://html5demos.com/geo
http://localhost/examples/photo.html
HTML5 Acesso a dispositivos

Geolocalizao
http://html5demos.com/geo
HTML
Performance
HTML5 - Performance
Aplicaes web, muito mais rpidas com uma variedade de tcnicas e tecnologias de
integrao.
Sem plug-ins;
Aproveitamento da sintaxe Javascript para acessar suas APIs (canvas, geo, etc.);
HTML5 - Performance
Quem usa o HTML5?
HTML5 - Performance
http://www.tecnologia.com.pt/2015/01/youtube-troca-em-definitivo-o-flash-pela-norma-html5/
HTML5 - Performance
HTML
Offline & Storage
HTML5 Offline & Storage

Aplicativos do HTML5 comearo mais rpido e tambm funcionaro mesmo se no houver
conexo com a Internet, graas ao cache do App, que ser em armazenado localmente, Banco
de dados cadastrados, e APIs do prprio arquivo local.

Web Offline
Os usurios podem navegar por todo o site quando esto off-line;
Os recursos armazenados em cache so locais e, portanto, so carregados mais rapidamente;
O navegador far download do servidor apenas dos recursos que forem alterados.

Desenvolvedores podem armazenar dados no lado do cliente:
Session Storage
Os dados ficam disponveis apenas para a janela que criou o dado at que seja fechada
Local Storage
No depende da sesso.
Os dados ficam disponveis para qualquer janela.

Permanece disponvel at que seja explicitamente deletada pelo programador do site ou
pelo o usurio.
http://html5demos.com/storage
HTML
Conectividade
HTML5 Conectividade
Conectividade : Comunicao com o servidor de maneiras novas e inovadoras.
WebSocket (Servidor Cliente)

Canal de comunicao full-duplex, que opera atravs de um nico socket pela web;
WebRTC (Cliente Cliente)
API que permite aos navegadores executar aplicaes de
chamada telefnica, video chat e compartilhamento P2P sem a
necessidade de plugins;
HTML5 Conectividade
WebSocket- (Servidor Cliente)
http://rumpetroll.com/
HTML5 Conectividade
WebRTC - (Cliente Cliente)
https://tecnoblog.net/123431/webrtcchrome-firefox-video/
HTML
Estilos Visuais
HTML5 CSS3
Estilo: Escrita com temas mais sofisticados.
Conjunto de APIs que permitem manipular CSS a partir de JavaScript;

Permite ler e modificar o estilo CSS de forma dinmica.
http://www.w3schools.com/css/tryit.asp?filename=trycss3_text-shadow3
http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_count2
HTML5 CSS3
CSS3 Exemplo sem o CSS
HTML5 CSS3
CSS3 Exemplo com o CSS
HTML5 CSS3
CSS3 Exemplo sem o CSS
HTML5 CSS3
CSS3 Exemplo com o CSS
HTML5 Concluso
Apache Cordova
O que ?
Apache Cordova um conjunto de APIs de dispositivos que permitem que

o aplicativo acesse funes nativas do dispositivo
Cmera;
GPS;
Etc.
Utiliza a linguagem JAVASCRIPT para acessar esses recursos;
Com isso, permite desenvolver um aplicativo com apenas HTML, CSS e

JavaScript!
Sem precisar programar no cdigo nativo do OS do dispositivo mvel.
Como funciona
Ao usar as APIs Cordova, um aplicativo pode ser
construdo sem qualquer cdigo nativo (Java,
Objective-C, etc).
Em vez disso, so utilizadas tecnologias web
(HTML, CSS e JS), e eles esto hospedados na
prpria app localmente;
Roda atravs do Webview.
Como funciona
Em quais plataformas o
Cordova usado?
Por que usar o Apache Cordova?

Prs
Voc no tem que aprender nenhuma nova
linguagem de programao.
Fcil de criar vetores grficos e designs
especficos.
Contras
Algumas funes no estaro disponveis em
todos os tipos dispositivos.
Consideraes na hora de criar um app

Para iOS rodar melhor em verses superiores ao
iOS 6.
Android
2.2 no possui Google Play.

2.3 no suporta a maioria dos plug-ins.
3.0 pouco usado e est ultrapassado.
4.0/4.3 exigir certo esforo do hardware.
4.4 possui um excelente desempenho.
Por que demora tanto para um

aplicativo sair em outra plataforma?
Desenvolvedor se preocupa com os custos e a
complexidade.
iOS existem de 6 a 8 dispositivos mobiles
diferentes.
J nas outras plataformas como Android e
Windows Phone existem diversas variaes como
tamanho e resolues de tela diferentes,
hardwares e verses de softwares.
Empresas que usam o Apache Cordova
Quem recomenda usar o Cordova?
Curiosidades
Apache Cordova teve sua verso estvel finalizada em
2012;
Grupo de desenvolvedores Apache Software Foundation (ASF)
Foi adquirido pela Adobe;
Repassado para a comunidade Open-Source da Apache;

Atravs da ASF, garante que ele sempre permanecer livre e de
cdigo aberto sob a licena Apache.
Mercado Mobile Atual
Crescimento exponencial
O mercado mobile esta em plena expanso no Brasil, e
no mundo ;
Segundo dados divulgados pela Anatel .

O nmero de terminais mveis ativos com acesso
internet cresceu 99%;
20,6 milhes, em 2010, para 41,1 milhes em 2011;
Crescimento exponencial
Previso de 2,7 bilhes de pessoas conectadas
na internet em 2015;
Ainda este ano, a venda de smartphones e
tablets j ter superado em muito a venda de
PCs e Notebook.
Mercado de Jogos Mobile

De acordo com um estudo realizado pelo centro de
pesquisa de mercado Newzoo e o sistema de
traduo OneSky:
o mercado de games mobile no Brasil arrecadar cerca de...
US$ 296,8 milhes at o fim de 2015!!!
Mercado de Jogos Mobile

O Brasil possui a maior parcela de usurios que paga por
contedo:
De 48,6 milhes de pessoas que jogam games mobile no pas,
17,2 milhes pagou por eles - cerca de 35,4% do total.
Em comparao:
ndia: 18% ;
Rssia: 27%
China: 30,1%.
O crescimento do mercado de jogos mobile est em franca ascenso. O

Brasil cresceu 85,6% em relao ao ano passado.
Nmero de pessoas que pagam por jogos mobile (mobile paying gamers),
o nmero de jogadores mobile (mobile gamers) a populao online
(online population)
Crescimento do mercado mobile no Brasil (em milhes)
Crescimento do nmero de jogadores de games mobile (em

milhes)
Mercado de Trabalho Mobile

Segundo estudos, em 2015, o desenvolvedor mobile
uma das 9 profisses com mais demanda no Brasil!
Motivos para o aumento:
Procura crescente por essa plataforma reflete na
demanda;
Em 2015, sero investidos cerca de US$ 38 bilhes em aplicativos,
o que aumenta a demanda por profissionais capacitados dentro
dessa rea.
Fonte: http://glo.bo/16XgnVk
So Paulo o estado com maior nmero de

contrataes destes profissionais, com 48,64%
Seguido por Rio de Janeiro (11,43%) .
Paran (6,35%).
Mercado de Trabalho Mobile

Funo: Desenvolver aplicativos mveis para Android,
iOS, WindowsPhone, etc.
Salrio: R$ 2.506,81 a
Modo de Atuao:
Tradicional (empresa);
Freelancer!
Fonte: http://www.catho.com.br/profissoes/programador-mobile/
Vdeo sobre mercado Mobile (Olhar Digital)
Obrigado!
Dvidas?!
Integrantes
Matheus Paice
Hugo Zabini
Rafael Campos
Joo Pedro
Henrique Veloso
Cleiton
Jeferson
Joo Soares
Carvalho
Marco Almeida
Joo Vitor
Sabrina Carla
Lucas Rodler
Noemi Iba
Ricardo Prado
Eduardo
Lus Felipe
Rener
Referncias
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
http://www.tecnologia.com.pt/2015/01/youtube-troca-em-definitivo-oflash-pela-norma-html5/
http://escreveassim.com.br/2011/01/19/veja-o-novo-logotipo-html5-econheca-suas-classes/
http://diegocavalca.com/minicurso-intel-xdk/

Seminário de Desenvolvimento Mobile

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Seminário de Desenvolvimento Mobile

Enviado por

Direitos autorais:

Formatos disponíveis

Seminrio de

Baixados normalmente da loja de Apps do dispositivo.

So parcialmente Nativos e Web.

uma nova verso da

Tem a finalidade de ser

Define estilos para pginas web com efeitos de

Quando devo usar?

Crescimento no mercado Mobile

Exemplos de aplicativos hbridos

World Wide Web

Padres de estrutura do documento;

Deve ser a primeira linha de cdigo do documento antes da tag HTML.

HTML5 Grficos & 3D

efeitos visuais deslumbrantes.

HTML5 Grficos & 3D

HTML5 Grficos & 3D

modelo na memria. Anlogo ao HTML, o SVG cria um modelo de objeto de

HTML5 Grficos & 3D

HTML5, que oferece suporte para renderizao de grficos 2D e grficos 3D.

HTML5 Grficos & 3D

HTML5 Acesso a dispositivos

HTML5 Acesso a dispositivos

Quem usa o HTML5?

Offline & Storage

HTML5 Offline & Storage

HTML5 Offline & Storage

HTML5 Offline & Storage

Os dados ficam disponveis para qualquer janela.

HTML5 Offline & Storage

WebSocket (Servidor Cliente)

Conjunto de APIs que permitem manipular CSS a partir de JavaScript;

Apache Cordova um conjunto de APIs de dispositivos que permitem que

Utiliza a linguagem JAVASCRIPT para acessar esses recursos;

Com isso, permite desenvolver um aplicativo com apenas HTML, CSS e

Por que usar o Apache Cordova?

Consideraes na hora de criar um app

2.2 no possui Google Play.

Por que demora tanto para um

Empresas que usam o Apache Cordova

Quem recomenda usar o Cordova?

Foi adquirido pela Adobe;

Repassado para a comunidade Open-Source da Apache;

Mercado Mobile Atual

Segundo dados divulgados pela Anatel .

Mercado de Jogos Mobile

US$ 296,8 milhes at o fim de 2015!!!

Mercado de Jogos Mobile

O crescimento do mercado de jogos mobile est em franca ascenso. O

Crescimento do mercado mobile no Brasil (em milhes)

Crescimento do nmero de jogadores de games mobile (em

Mercado de Trabalho Mobile

So Paulo o estado com maior nmero de

Mercado de Trabalho Mobile

Vdeo sobre mercado Mobile (Olhar Digital)

Você também pode gostar