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 platafo...
Aplicativos Híbridos
• São parcialmente Nativos e Web.
• Baixados normalmente pela loja de Apps do dispositivo.
• Acesso c...
• É 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 tod...
• Navegador Web
embutido dentro do
aplicativo.
Web View.
Quais as vantagens?
• Maior facilidade para trabalhar e utilizar seus
recursos.
• Menor custo de desenvolvimento.
• Conclu...
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âme...
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)
Inter...
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 d...
HTML5 - Semântica
DOCTYPE
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.d...
HTML5 - Semântica
HTML4.01 HTML5
HTML5 - Semântica
 Novos Tipos de INPUT
 http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-for...
HTML5 - Semântica
 Novos Tipos de INPUT
HTML5 - Semântica
 Novo elemento - CANVAS
http://9elements.com/io/projects/html5/canvas/
HTML
Multimídia
HTML5 – Multimídia
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all
http://www.w3schools.com/html/try...
HTML5 – Multimídia
Áudio – HTML4
HTML5 – Multimídia
Vídeo – HTML4
HTML5 – Multimídia
Áudio – HTML5
HTML5 – Multimídia
Vídeo – HTML5
HTML
Gráficos&3D
HTML5 – Gráficos & 3D
 3D, Gráficos e Efeitos : Gama de opções de apresentação muito mais diversificada, com
efeitos visu...
HTML5 – Gráficos & 3D
 Canvas - Destinado a delimitar uma área para renderização dinâmica de gráficos. Todo o
trabalho de...
HTML5 – Gráficos & 3D
 SVG - Modelo de elementos gráficos de modo retido persistindo em um
modelo na memória. Análogo ao ...
HTML5 – Gráficos & 3D
 WebGL - API em JavaScript, disponível a partir do novo elemento canvas da
HTML5, que oferece supor...
HTML5 – Gráficos & 3D
 Jogos em HTML5
http://www.freeriderhd.com/t/1016-layers
HTML
Acessoadispositivos
HTML5 – Acesso a dispositivos
http://html5demos.com/geo
http://localhost/examples/photo.html
Acesso a Dispositivo : per...
HTML5 – Acesso a dispositivos
 Geolocalização
http://html5demos.com/geo
HTML
Performance
HTML5 - Performance
 Aplicações web, muito mais rápidas com uma variedade de técnicas e tecnologias de
integração.
 Sem ...
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 começarão mais rápido e também funcionarão mesmo se não houver
conexão co...
HTML5 – Offline & Storage
 Os usuários podem navegar por todo o site quando estão off-line;
 Os recursos armazenados em ...
HTML5 – Offline & Storage
Desenvolvedores podem armazenar dados no lado do cliente:
 Session Storage
 Os dados ficam dis...
HTML5 – Offline & Storage
 http://html5demos.com/storage
HTML
Conectividade
HTML5 – Conectividade
 Conectividade : Comunicação com o servidor de maneiras novas e inovadoras.
WebSocket (Servidor → C...
HTML5 – Conectividade
http://rumpetroll.com/
 WebSocket- (Servidor → Cliente)
HTML5 – Conectividade
https://tecnoblog.net/123431/webrtc-
chrome-firefox-video/
 WebRTC - (Cliente ↔ Cliente)
HTML
EstilosVisuais
HTML5 – CSS3
 Estilo: Escrita com temas mais sofisticados.
 Conjunto de APIs que permitem manipular CSS a partir de Java...
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 di...
Como funciona
• Ao usar as APIs Cordova, um aplicativo pode ser
construído sem qualquer código nativo (Java,
Objective-C, ...
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 ...
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 ...
Por que demora tanto para um
aplicativo sair em outra plataforma?
• Desenvolvedor se preocupa com os custos e a
complexida...
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 Found...
Mercado Mobile Atual
Crescimento exponencial
• O mercado mobile esta em plena expansão no Brasil, e
no mundo ;
• Segundo dados divulgados pela ...
• Previsão de 2,7 bilhões de pessoas conectadas
na internet em 2015;
• Ainda este ano, a venda de smartphones e
tablets já...
De acordo com um estudo realizado pelo centro de
pesquisa de mercado Newzoo e o sistema de
tradução OneSky:
• o mercado de...
• 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 n...
• 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 popu...
• 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 B...
São Paulo é o estado com maior número de
contratações destes profissionais, com 48,64%
• Seguido por Rio de Janeiro (11,43...
Mercado de Trabalho Mobile
• Função: Desenvolver aplicativos móveis para Android,
iOS, WindowsPhone, etc.
• Salário: R$ 2....
Vídeo sobre mercado Mobile (Olhar Digital)
Obrigado!

Dúvidas?!
Integrantes
Matheus Paice
Rafael Campos
Henrique Veloso
Jeferson
Carvalho
João Vitor
Lucas Rodler
Hugo Zabini
João Pedro
C...
Referências
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
http://www.tecnologia.com.pt/2015/01/youtube-t...
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Próximos SlideShares
Carregando em…5
×

Seminário de Desenvolvimento Mobile - Etec Cafelândia

606 visualizações

Publicada em

Evento organizado pelo professor Diego Cavalca, onde expõe uma visão geral sobre os principais aspectos da carreira de desenvolvimento de aplicativos móveis, apresentada de modo prático pelos alunos do 3º Módulo de Informática.

Palestras:
- Aplicativos híbridos
- HTML5 - Recursos e Funcionalidades
- Apache Cordova
- Mercado Mobile Atual

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
606
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Seminário de Desenvolvimento Mobile - Etec Cafelândia

  1. 1. Seminário de Desenvolvimento Mobile Profº Diego Cavalca Curso Técnico em Informática 02/09/2015
  2. 2. Agenda • Aplicativos Híbridos • HTML5 – Recursos e Funcionalidades • Apache Cordova • Mercado Mobile Atual
  3. 3. Aplicativos Híbridos
  4. 4. 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.
  5. 5. 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.
  6. 6. • É uma nova versão da linguagem HTML, com novos elementos, atributos e comportamentos.
  7. 7. • Tem a finalidade de ser executada no interior de programas ou de outra linguagem de programação.
  8. 8. • 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.
  9. 9. • Navegador Web embutido dentro do aplicativo. Web View.
  10. 10. 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.
  11. 11. Desvantagens • Limitação no funcionamento off-line. • Possível perda de performance.
  12. 12. Quando devo usar? Quando queremos reduzir custos no desenvolvimento, e ainda assim usar recursos nativos como: push e câmera.
  13. 13. Crescimento no mercado Mobile
  14. 14. Exemplos de aplicativos híbridos
  15. 15. Principais ferramentas de desenvolvimento
  16. 16. Recursos e Funcionalidades
  17. 17. O Novo HTML World Wide Web Consortium Grupo de trabalho tecnológico de aplicações de hipertexto (WHATWG)(W3C) (IETF) Internet Engineering Task Force
  18. 18. HTML5 – Classes
  19. 19. HTML Semântica
  20. 20. 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/
  21. 21. 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.
  22. 22. HTML5 - Semântica HTML4.01 HTML5
  23. 23. HTML5 - Semântica  Novos Tipos de INPUT  http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html
  24. 24. HTML5 - Semântica  Novos Tipos de INPUT
  25. 25. HTML5 - Semântica  Novo elemento - CANVAS http://9elements.com/io/projects/html5/canvas/
  26. 26. HTML Multimídia
  27. 27. 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>
  28. 28. HTML5 – Multimídia Áudio – HTML4
  29. 29. HTML5 – Multimídia Vídeo – HTML4
  30. 30. HTML5 – Multimídia Áudio – HTML5
  31. 31. HTML5 – Multimídia Vídeo – HTML5
  32. 32. HTML Gráficos&3D
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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/
  37. 37. HTML5 – Gráficos & 3D  Jogos em HTML5 http://www.freeriderhd.com/t/1016-layers
  38. 38. HTML Acessoadispositivos
  39. 39. 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.
  40. 40. HTML5 – Acesso a dispositivos  Geolocalização http://html5demos.com/geo
  41. 41. HTML Performance
  42. 42. 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.);
  43. 43. HTML5 - Performance Quem usa o HTML5?
  44. 44. HTML5 - Performance http://www.tecnologia.com.pt/2015/01/youtube-troca-em-definitivo-o-flash-pela-norma-html5/
  45. 45. HTML5 - Performance
  46. 46. HTML Offline&Storage
  47. 47. 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.
  48. 48. 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
  49. 49. 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.
  50. 50. HTML5 – Offline & Storage  http://html5demos.com/storage
  51. 51. HTML Conectividade
  52. 52. 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;
  53. 53. HTML5 – Conectividade http://rumpetroll.com/  WebSocket- (Servidor → Cliente)
  54. 54. HTML5 – Conectividade https://tecnoblog.net/123431/webrtc- chrome-firefox-video/  WebRTC - (Cliente ↔ Cliente)
  55. 55. HTML EstilosVisuais
  56. 56. 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
  57. 57. HTML5 – CSS3  CSS3 – Exemplo sem o CSS
  58. 58. HTML5 – CSS3  CSS3 – Exemplo com o CSS
  59. 59. HTML5 – CSS3  CSS3 – Exemplo sem o CSS
  60. 60. HTML5 – CSS3  CSS3 – Exemplo com o CSS
  61. 61. HTML5 – Conclusão
  62. 62. Apache Cordova
  63. 63. 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.
  64. 64. 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.
  65. 65. Como funciona
  66. 66. Em quais plataformas o Cordova é usado?
  67. 67. 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.
  68. 68. 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.
  69. 69. 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.
  70. 70. Empresas que usam o Apache Cordova
  71. 71. Quem recomenda usar o Cordova?
  72. 72. 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.
  73. 73. Mercado Mobile Atual
  74. 74. 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;
  75. 75. • 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
  76. 76. 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
  77. 77. • 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
  78. 78. • O crescimento do mercado de jogos mobile está em franca ascensão. O Brasil cresceu 85,6% em relação ao ano passado.
  79. 79. • 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)
  80. 80. • Crescimento do mercado mobile no Brasil (em milhões)
  81. 81. • Crescimento do número de jogadores de games mobile (em milhões)
  82. 82. 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
  83. 83. 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%).
  84. 84. 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/
  85. 85. Vídeo sobre mercado Mobile (Olhar Digital)
  86. 86. Obrigado! 
  87. 87. Dúvidas?!
  88. 88. 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
  89. 89. 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/

×