Seminário de Desenvolvimento Mobile - Etec Cafelândia

Seminário de Desenvolvimento Mobile

Profº Diego Cavalca

Curso Técnico em Informática

02/09/2015

Agenda • Aplicativos Híbridos

• HTML5 – Recursos e Funcionalidades

• Apache Cordova

• Mercado Mobile Atual

Aplicativos Híbridos

Aplicativos Nativos

• Baixados normalmente da loja de Apps do dispositivo.

• Desenvolvido especificamente para uma plataforma.

• Acesso completo ao dispositivo.

• Desenvolvimento caro.

• Não é multi-plataforma.

Aplicativos Híbridos

• São 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 versão da linguagem HTML, com

novos elementos, atributos e

comportamentos.

• Tem a finalidade de ser executada no interior de programas ou de outra linguagem de

programação.

• Define estilos para páginas web com efeitos de transição, imagens e outros, que dão um estilo novo às páginas Web em todos os aspectos de design do layout.

• Navegador Web embutido dentro do

aplicativo.

Web View.

Quais as vantagens?

• Maior facilidade para trabalhar e utilizar seus

recursos.

• Menor custo de desenvolvimento.

• Conclusão mais rápida do projeto.

• Compartilhamento de boa parte do código entre

plataformas.

Desvantagens

• Limitação no funcionamento off-line.

• Possível perda de performance.

Quando devo usar?

Quando queremos reduzir custos no

desenvolvimento, e ainda assim usar recursos

nativos como: push e câmera.

Crescimento no mercado Mobile

Exemplos de aplicativos híbridos

Principais ferramentas de

desenvolvimento

Recursos e Funcionalidades

O Novo HTML

World Wide Web Consortium

Grupo de trabalho tecnológico de aplicações de

hipertexto

(WHATWG) (W3C) (IETF)

Internet Engineering Task Force

HTML5 – Classes

HTML

Sem

ântica

HTML5 - Semântica

Semântica : Descrição mais precisa do seu conteúdo.

• Padrões de estrutura do documento;

• Variações do elemento INPUT;

• Novos elementos:

• Áudio;

• Vídeo;

• 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 - Semântica DOCTYPE

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>

Não é uma tag HTML e sim uma instrução para o browser sobre qual versão do HTML a página está escrita.

Deve ser a primeira linha de código do documento antes da tag HTML.

HTML5 - Semântica

HTML4.01 HTML5

HTML5 - Semântica

Novos Tipos de INPUT














HTML5 - Semântica

Novo elemento - CANVAS





HTML

Multim

ídia

HTML5 – Multimídia

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

Multimídia : Vídeo e áudio na primeira classe com tags próprias. • <audio> </audio> • <video> </video>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

HTML5 – Multimídia Áudio – HTML4

HTML5 – Multimídia Vídeo – HTML4

HTML5 – Multimídia Áudio – HTML5

HTML5 – Multimídia Vídeo – HTML5

HTML

Gráfico

s & 3

D

HTML5 – Gráficos & 3D

3D, Gráficos e Efeitos : Gama de opções de apresentação muito mais diversificada, com

efeitos visuais deslumbrantes.

http://9elements.com/io/projects/html5/canvas/ http://www.freeriderhd.com/t/1016-layers http://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_circle


http://www.freeriderhd.com/t/1016-layers



http://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_circle




Canvas - Destinado a delimitar uma área para renderização dinâmica de gráficos. Todo o

trabalho de criação e animação é realizado através de linguagens de programação dinâmica

(usualmente Javascript).

http://html5demos.com/canvas-grad







SVG - Modelo de elementos gráficos de modo retido persistindo em um

modelo na memória. Análogo ao HTML, o SVG cria um modelo de objeto de

elementos, atributos e estilos.

http://html5demos.com/svg-clock






WebGL - API em JavaScript, disponível a partir do novo elemento canvas da

HTML5, que oferece suporte para renderização de gráficos 2D e gráficos 3D.

http://oos.moxiecode.com/js_webgl/autumn/




Jogos em HTML5






HTML

Acesso

a disp

ositiv

os

HTML5 – Acesso a dispositivos

http://html5demos.com/geo http://localhost/examples/photo.html

Acesso a Dispositivo : permitindo o uso de vários dispositivos de entrada e de saída. Acesso ao hardware dos dispositivos.

http://html5demos.com/geo


http://localhost/examples/photo.html

http://localhost/examples/photo.html

HTML5 – Acesso a dispositivos

Geolocalização




HTML

Perfo

rman

ce

HTML5 - Performance

Aplicações web, muito mais rápidas com uma variedade de técnicas e tecnologias de

integração.

Sem plug-ins;

Aproveitamento da sintaxe Javascript para acessar suas API’s (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

Offlin

e & S

torag

e

HTML5 – Offline & Storage

Aplicativos do HTML5 começarão mais rápido e também funcionarão mesmo se não houver

conexão com a Internet, graças ao cache do App, que será em armazenado localmente, Banco

de dados cadastrados, e APIs do próprio arquivo local.


Os usuários podem navegar por todo o site quando estão off-line;

Os recursos armazenados em cache são locais e, portanto, são carregados mais rapidamente;

O navegador fará download do servidor apenas dos recursos que forem alterados.

Web Offline


Desenvolvedores podem armazenar dados no lado do cliente:

Session Storage

Os dados ficam disponíveis apenas para a janela que criou o dado até que seja fechada

Local Storage

Não depende da sessão.

Os dados ficam disponíveis para qualquer janela.

Permanece disponível até que seja explicitamente deletada pelo programador do site ou

pelo o usuário.


http://html5demos.com/storage



HTML

Conectiv

idad

e

HTML5 – Conectividade

Conectividade : Comunicação com o servidor de maneiras novas e inovadoras.

WebSocket (Servidor → Cliente)

Canal de comunicação full-duplex, que opera através de um único socket pela web;

WebRTC (Cliente ↔ Cliente)

API que permite aos navegadores executar aplicações de

chamada telefônica, video chat e compartilhamento P2P sem a

necessidade de plugins;


http://rumpetroll.com/

WebSocket- (Servidor → Cliente)




https://tecnoblog.net/123431/webrtc-

chrome-firefox-video/

WebRTC - (Cliente ↔ Cliente)

https://tecnoblog.net/123431/webrtc-chrome-firefox-video/








HTML

Estilo

s Visu

ais

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 dinâmica.

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

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 – Conclusão

Apache Cordova

O que é? • Apache Cordova é um conjunto de APIs de dispositivos que permitem que

o aplicativo acesse funções nativas do dispositivo – Câmera; – 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 código nativo do OS do dispositivo móvel.

Como funciona • Ao usar as APIs Cordova, um aplicativo pode ser

construído sem qualquer código nativo (Java, Objective-C, etc).

• Em vez disso, são utilizadas tecnologias web (HTML, CSS e JS), e eles estão hospedados na própria app localmente; – “Roda” através do Webview.

Como funciona

Em quais plataformas o Cordova é usado?

Por que usar o Apache Cordova?

• Prós – Você não tem que aprender nenhuma nova

linguagem de programação.

– Fácil de criar vetores gráficos e designs específicos.

• Contras – Algumas funções não estarão disponíveis em

todos os tipos dispositivos.

Considerações na hora de criar um app

• Para iOS rodará melhor em versões superiores ao iOS 6.

• Android – 2.2 não possui Google Play. – 2.3 não suporta a maioria dos plug-ins. – 3.0 é pouco usado e está ultrapassado. – 4.0/4.3 exigirá certo esforço 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 variações como tamanho e resoluções de tela diferentes, hardwares e versões de softwares.

Empresas que usam o Apache Cordova

Quem recomenda usar o Cordova?

Curiosidades • Apache Cordova teve sua versão estável finalizada em

2012; – Grupo de desenvolvedores Apache Software Foundation (ASF)

• Foi adquirido pela Adobe;

• Repassado para a comunidade “Open-Source” da Apache;

– Através da ASF, garante que ele sempre permanecerá livre e de código aberto sob a licença Apache.

Mercado Mobile Atual

Crescimento exponencial

• O mercado mobile esta em plena expansão no Brasil, e no mundo ;

• Segundo dados divulgados pela Anatel . – O número de terminais móveis ativos com acesso à

internet cresceu 99%; – 20,6 milhões, em 2010, para 41,1 milhões em 2011;

• Previsão de 2,7 bilhões 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.

Crescimento exponencial

De acordo com um estudo realizado pelo centro de pesquisa de mercado Newzoo e o sistema de tradução OneSky: • o mercado de games mobile no Brasil arrecadará cerca de...

US$ 296,8 milhões até o fim de 2015!!!

Mercado de Jogos Mobile

• O Brasil possui a maior parcela de usuários que paga por conteúdo: – De 48,6 milhões de pessoas que jogam games mobile no país,

17,2 milhões pagou por eles - cerca de 35,4% do total.

– Em comparação: • Índia: 18% ; • Rússia: 27% • China: 30,1%.

Mercado de Jogos Mobile

• O crescimento do mercado de jogos mobile está em franca ascensão. O Brasil cresceu 85,6% em relação ao ano passado.

• Número de pessoas que pagam por jogos mobile (mobile paying gamers), o número de jogadores mobile (mobile gamers) a população online (online population)

• Crescimento do mercado mobile no Brasil (em milhões)

• Crescimento do número de jogadores de games mobile (em milhões)

Mercado de Trabalho Mobile

• Segundo estudos, em 2015, o desenvolvedor mobile é uma das 9 profissões com mais demanda no Brasil!

• Motivos para o aumento: – Procura crescente por essa plataforma reflete na

demanda; • Em 2015, serão investidos cerca de US$ 38 bilhões em aplicativos,

o que aumenta a demanda por profissionais capacitados dentro dessa área.

Fonte: http://glo.bo/16XgnVk

São Paulo é o estado com maior número de contratações destes profissionais, com 48,64%

• Seguido por Rio de Janeiro (11,43%) .

• Paraná (6,35%).

Mercado de Trabalho Mobile • Função: Desenvolver aplicativos móveis para Android,

iOS, WindowsPhone, etc.

• Salário: R$ 2.506,81 a ∞ • Modo de Atuação:

– Tradicional (empresa); – Freelancer!

Fonte: http://www.catho.com.br/profissoes/programador-mobile/

Vídeo sobre mercado Mobile (Olhar Digital)

https://www.youtube.com/watch?v=HKM76yIZi1o

Obrigado!

Dúvidas?!

Integrantes Matheus Paice Rafael Campos

Henrique Veloso Jeferson Carvalho

João Vitor Lucas Rodler

Hugo Zabini João Pedro

Cleiton João Soares

Marco Almeida Sabrina Carla

Noemi Iba

Ricardo Prado Eduardo

Luís Felipe Rener

Referências

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 http://www.tecnologia.com.pt/2015/01/youtube-troca-em-definitivo-o-flash-pela-norma-html5/

http://escreveassim.com.br/2011/01/19/veja-o-novo-logotipo-html5-e-conheca-suas-classes/

http://diegocavalca.com/minicurso-intel-xdk/
















































Seminário de Desenvolvimento Mobile - Etec Cafelândia

Software

Transcript of Seminário de Desenvolvimento Mobile - Etec Cafelândia