O seminário discute o desenvolvimento de aplicativos móveis, abordando aplicativos híbridos, HTML5, Apache Cordova e o mercado mobile atual. A agenda inclui recursos e funcionalidades do HTML5, como canvas, multimídia e acesso a dispositivos, além de apresentar Apache Cordova e o crescimento do mercado de aplicativos móveis.
5. 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.
6. 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.
7. • É uma nova versão da
linguagem HTML, com
novos elementos,
atributos e
comportamentos.
8. • Tem a finalidade de ser
executada no interior
de programas ou de
outra linguagem de
programação.
9. • 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.
11. 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.
18. O Novo HTML
World Wide Web
Consortium
Grupo de trabalho
tecnológico de
aplicações de
hipertexto
(WHATWG)(W3C) (IETF)
Internet Engineering
Task Force
21. 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/
22. 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.
34. 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
35. HTML5 – Gráficos & 3D
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
36. HTML5 – Gráficos & 3D
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
37. HTML5 – Gráficos & 3D
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/
38. HTML5 – Gráficos & 3D
Jogos em HTML5
http://www.freeriderhd.com/t/1016-layers
40. 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.
41. HTML5 – Acesso a dispositivos
Geolocalização
http://html5demos.com/geo
43. 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.);
48. 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.
49. HTML5 – Offline & Storage
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
50. HTML5 – Offline & Storage
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.
53. 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;
57. 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
64. 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.
65. 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.
68. 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.
69. 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.
70.
71. 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.
74. 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.
76. 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;
77. • 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
78. 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
79. • 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
80. • O crescimento do mercado de jogos mobile está em franca ascensão. O
Brasil cresceu 85,6% em relação ao ano passado.
81. • 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)
83. • Crescimento do número de jogadores de games mobile (em
milhões)
84. 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
85. 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%).
86. 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/
90. 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