O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Mobile Dev - Aplicativos

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 30 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Mobile Dev - Aplicativos (20)

Mais recentes (20)

Anúncio

Mobile Dev - Aplicativos

  1. 1. Mobile Dev Alex do Espírito Santo
  2. 2. Desenvolvimento Mobile Pensar em mobile é pensar nas pessoas Pensar em mobile é pensar no comportamento das pessoas
  3. 3. Desenvolvimento Mobile A internet é uma só, não há separação entre os meios digitais e o usuário está no centro.
  4. 4. Desenvolvimento Mobile Precisamos estar presente
  5. 5. Desenvolvimento Mobile Como ? Responsividade é uma opção
  6. 6. Desenvolvimento Mobile App ou Responsivo ? Como decidir ? Podemos Usar alguns Critérios: 1. Funcionalidades do dispositivo 2. Funcionamento offline 3. Descoberta 4. Velocidade 5. Instalação 6. Manuntenção 7. Independência da plataforma 8. Restrição de conteúdo, processo de aprovação e taxas 9. Custo de desenvolvimento 10. Interface do usuário 11. Estratégia de Marketing
  7. 7. Desenvolvimento Mobile Decidimos por app ! E o que fazer diante disso ?
  8. 8. Desenvolvimento Mobile O que preciso aprender ? S.O. Dispositivos Linguagem 1 iOS iPod, iPhone, iPad Objective-C Swift 2 Android * Java (DART ?) 3 Blackberry Blackberry devices C/C++/Qt, JavaScript/CCS/HT ML, ActionScript/AIR, Java Android 4 Windows Phone Windows C# 5 Palm WebOS HP HTML/CSS
  9. 9. Desenvolvimento Mobile O que preciso aprender ? S.O. Dispositivos Linguagem 6 Bada Samsung C++ 7 Symbian Nokia C++ 8 Amazon Fire OS Kindle Fire HDX, Fire Phone JAVA? (Android Open Source) 9 Firefox OS Alcatel, LG, ZTE HTML/CSS 10 Ubuntu Meizu MX4, BQ Aquaris E5 HD, BQ Aquaris E4.5 QML, C or C++ e JavaScript 11 Tizen Samsung Z1 Samsung ZQE9000 JavaScript, CSS, HTML5
  10. 10. Desenvolvimento Mobile Quais as principais Plataformas ?
  11. 11. Desenvolvimento Mobile E dá pra desenvolver uma vez e rodar em todos ? Framework/Suite Tipo de App Linguagem Pago 1 Phonegap Híbrido JS/HTML/CSS (Web) apenas serviços online 2 Apache Cordova Híbrido Web free 3 Xamarin Nativo C# free (agora) 4 Genexus Nativo Própria licença 5 Appacelarator Nativo Web licença 6 Sencha Touch Híbrido Web licença 7 Telerik Híbrido Web licença 8 Delphi Nativo Object Pascal licença 9 Ionic Híbrido Web serviços online
  12. 12. Desenvolvimento Mobile O que é um app híbrido ? Aproveitar o motor web existente nas plataformas, no S.O. dos dispositivos, para criação de aplicações com interface web que interajam com o dispositivo. O código html, javascript e css está embarcado no app. NÃO É SITE!!!
  13. 13. Desenvolvimento Mobile Como desenvolver aplicativos híbridos? Para o desenvolvimento App Híbrido é recomendado escolher um framework javascript para construir as ações do app. Os principais frameworks javascript para uso em conjunto com Cordova são:
  14. 14. Desenvolvimento Mobile Nome Onde ? 1 JQueryMobile http://jquerymobile.com/ 2 Framework7 - F7 http://www.idangero.us/framework7/#.Vddj-VNVik o 3 Sencha Touch https://www.sencha.com/products/touch/#overvie w 4 Chocolate-UI http://chocolatechip-ui.com/ 5 Ratchet http://goratchet.com/examples/ 6 Lungo http://lungo.tapquo.com/ 7 React http://facebook.github.io/react/ 8 Jo http://joapp.com/ Como desenvolver aplicativos híbridos?
  15. 15. Desenvolvimento Mobile Nome Onde ? 9 Junior http://justspamjustin.github.io/junior/#home 10 jQT http://jqtjs.com/ 11 Bootstrap http://getbootstrap.com/ 12 Famo.us https://famo.us/ 13 OnsenUI http://onsen.io/ 14 Intel XDK https://software.intel.com/en-us/intel-xdk 15 Mobile Angular UI http://mobileangularui.com/ 16 Ionic http://ionicframework.com/ Como desenvolver aplicativos híbridos?
  16. 16. Desenvolvimento Mobile Vamos usar Cordova Cerca de 2009 A Nitobi cria o framework PhoneGap Setembro 2011 Nitobi doa código do PhoneGap para a Apache Software Foundation Outubro 2011 Nitobi anuncia que foi adquirida pela Adobe. Adobe oferece suporte a código aberto do PhoneGap. Foi sugerido renomear o projeto por razões legais. Fevereiro 2012 O projeto mantido pela Apache é renomeado "Cordova", por causa de Cordova Street em Vancouver, onde Nitobi tinha a sua sede. História
  17. 17. Desenvolvimento Mobile Vamos usar Cordova É um conjunto de APIs que permitem acessar as funções do dispositivo, como a câmera ou o acelerômetro, a partir do JavaScript. Permite que um aplicativo seja desenvolvido apenas com HTML, CSS e JavaScript, ou seja, sem desenvolver qualquer código nativo (Java, Objective-C, etc) A partir do projeto com Cordova gera-se o aplicativo usando a SDK própria de cada plataforma mobile, que podem estar disponíveis para download na loja de aplicativos de cada fornecedor. Cordova está disponível para as plataformas: Android, iOS, Windows, BlackBerry, Ubuntu, Firefox, LG WebOS e FireOS. Em versões anteriores o Cordova já esteve disponível também para Palm WebOS, Bada, e Symbian
  18. 18. Desenvolvimento Mobile Plugins
  19. 19. Desenvolvimento Mobile Plugins
  20. 20. Desenvolvimento Mobile Escolhemos ...
  21. 21. Desenvolvimento Mobile E porque IONIC ? Mais do que código. Ionic é um Ecosistema ● Desenvolvido inspirado nas SDKs Nativas ● Construído para funcionar com o Cordova Um SDK Web
  22. 22. Desenvolvimento Mobile E porque IONIC ? 1. Trabalha muito bem com o AngularJS. 2. Utiliza o UI-Router para gerenciar as rotas e estados das views. permitindo que criar navegação não linear no app. 3. Todo o CSS é gerado a partir do SASS e foi projetado para ser sobrescrito. 4. Performance é obsessão, com uma interface rápida e consistente. Utiliza recursos de aceleração de hardware e manipula minimamente o DOM. 5. Não possui dependência do jQuery, embora seja possível adicioná-lo. 6. Permite utilizar as ferramentas de debug dos navegadores. 7. Comunidade forte e ativa, em parte pelo fato da utilização do AngularJS 8. Open Source
  23. 23. Desenvolvimento Mobile E porque IONIC ? 9. Componentes de UI próprios de cada plataforma (automático) 10. Componente de listagem que renderiza apenas os itens visíveis (collection-repeat) 11. Permite a navegação de voltar pelos botões da interface, pelo botão do aparelho ou puxando a tela 12. Mantém as Views em cache e o estado de cada tela, até mesmo a posição do scroll é mantida 13. Diversos Componentes de UI 14. +700 ícones disponíveis 15. SVGs Animados de loading que podem ser alterados com css http://ionicframework.com/
  24. 24. Desenvolvimento Mobile E porque IONIC ? ● ngCordova: biblioteca javascript que permite acessar recursos Cordova com diretivas Angular - http://ngcordova.com/
  25. 25. Desenvolvimento Mobile E porque IONIC ? Lab preview web de cada plataforma
  26. 26. Desenvolvimento Mobile E porque IONIC ?
  27. 27. Desenvolvimento Mobile E porque IONIC ?
  28. 28. Desenvolvimento Mobile E porque IONIC ? Cloud IONIC
  29. 29. Desenvolvimento Mobile E porque IONIC ?
  30. 30. Referências http://ionicframework.com/ https://www.owasp.org/index.php/Mobile#tab=Home http://giorgiofellipe.com.br/ionic-present http://www.luisaambros.com/blog/diferenca-entre-aplicativos-nativos-hibridos-e-mobile-web-apps/ http://mobilexpert.com.br/apps/outros/materias/13160/windows-supera-ios-no-brasil-android-continua-lider https://www.linkedin.com/pulse/20140612154131-26248656-ionic-framework-porque-utilizar

×