Aplicações Móveis                 Híbridas: usando Web e                      Nativo juntos                       cristian...
Agenda                   • Aplicações Mobile Web                   • Aplicações Mobile Nativas                   • Aplicaç...
1. Aplicações Mobile                                WebTuesday, 22 May 2012                          3
No início era o nativoTuesday, 22 May 2012                            4
Sir Tim Berners-Lee      e então Berners-Lee criou a webTuesday, 22 May 2012                         5
e desde 1991                   • HTML, CSS e JavaScript                   • Pearl, PHP e ASP                   • Java     ...
hoje na web                   • Sistemas corporativos                   • Google Docs                   • e-Learning      ...
mas nós queríamos mais              • WML e WMLScript              • XHTML MP              • JavaME              • Nativos...
Fonte: WikipediaTuesday, 22 May 2012                      9
e chega o iPhone                                   Steve JobsTuesday, 22 May 2012                            10
Tuesday, 22 May 2012   11
HTML + CSS + JAVASCRIPTTuesday, 22 May 2012                   12
ainda em desenvolvimento!                   • Chrome                   • Firefox                   • Safari               ...
e o que promete?                   • Novas API’s                   • Multimídia embutido                   • Uso off-line ...
http://www.html5rocks.com/en/                       http://html5demos.com/Tuesday, 22 May 2012                            ...
SemânticaTuesday, 22 May 2012               16
CanvasTuesday, 22 May 2012            17
Canvas                   • 2D APIs                   • 3D APIs (WebGL)                   • Inline SVGTuesday, 22 May 2012 ...
GeolocationTuesday, 22 May 2012                 19
StorageTuesday, 22 May 2012             20
Áudio e VídeoTuesday, 22 May 2012                   21
CSS3                   • seletores, atributos, targets                   • instruções                   • webfonts        ...
CSS3Tuesday, 22 May 2012          23
JavaScript                   • Ele sempre esteve entre nós!                   • Nova API DOM (getElementBy...)            ...
web mobile apps?                   • Afinal de contas, é HTML                   • Portável                   • Padrão abert...
e ainda...                   • Device orientation                   • Multi-touch                   • Desenvolvimento prod...
...e por últimoTuesday, 22 May 2012                     27
SoC                   • html estrutura                   • css view/estilo                   • javascript lógicaTuesday, 2...
alguns (bons) exemplos                   • Financial Times                   • Basecamp                   • http://www.app...
Financial TimesTuesday, 22 May 2012                     30
2. Aplicações Mobile                              NativasTuesday, 22 May 2012                          31
Native mode (wikipedia)                   •   The term native mode or native code is used in computing in two             ...
Conceito                   • Native App:                       • An application that is specifically                       ...
Devices                   • Feature-phones                   • Smart-phones     What else?                   • Tablets    ...
Plataformas Nativas                   • Plataformas e suas Linguagens de                     Programação                  ...
Tuesday, 22 May 2012   36
Tuesday, 22 May 2012   37
Tuesday, 22 May 2012   38
Tuesday, 22 May 2012   39
Android => Java + Dalvik               • Java é uma linguagem familiar para                 muitos desenvolvedores, muitas...
Objective-C                   • Objective-C criada na decada de 90                     (NeXT) e possui uma vasta API =>   ...
C/C++                   • Diversos Devices                   • Possivel desenvolver em C/C++ para                     iOS ...
Características Apps                             Nativas                   • Aparência Nativa (Native look & feel):       ...
Características Apps                             Nativas                   • Integração com SO: concorrência,             ...
Características Apps                             Nativas                   • Uso “off-line”                   • In-App Pur...
Human Interface Guidelines  Fonte:  http://developer.android.com/guide/practices/ui_guidelines/index.html  http://develope...
Armazenamento (off-line)Tuesday, 22 May 2012                      47
Principais Características                “ordenadas” para App Nativas                   1. offline mode                   ...
Domínio de Aplicações                   • GAMES                   • Acesso a recursos nativos:                     ACCELER...
Native UI Kits                   • Cocoa Touch                   • Android UI                                   !"#$%&"(  ...
$$$               • $32,639 for a simple app               • 2 months to create               • 2 weeks per feature = 4 fe...
App Store, Market, etc               • “o um lugar" para encontrar aplicações                             Fonte: Google Im...
Apple Store                       Preço       #Apps        Games         Total      % TOTAL                       Free    ...
Tuesday, 22 May 2012   54
Cases                   • Games: angry birds, plats vs zombies                   • Facebook, Twitter                   • S...
Cases                   • “We bet everything on Apple and iOS                     and then Apple killed us by changing    ...
Resumindo...          • Web             - portabilidade             - padrões abertos             - simplicidade          ...
3. Aplicações Mobile                              HíbridasTuesday, 22 May 2012                          58
Conceito                   • Hybrid App:                       • An application using primarily web                       ...
Aplicações Híbridas                   • WebView                   • WebKit                   • JavaScript bridgeTuesday, 2...
WebView                   • Android e iOS                   • Usa o WebKit como engineTuesday, 22 May 2012                ...
WebKit                   • Browser Engine                   • Apple, Google, KDE, Nokia, RIM,                     Samsung ...
JavaScript Bridge                   • Nativo pro WebView                   • WebView pra Nativo                   • Evento...
JavaScript => AndroidTuesday, 22 May 2012                           64
Android => JavaScriptTuesday, 22 May 2012                           65
Formas de Fazer                   • WebView e recursos nativos                   • WebView dentro de frame nativo         ...
cross-plataform frameworks                   •   App Inventor                   •   DroidDraw                   •   Rhomob...
Appcelerator/TitaniumTuesday, 22 May 2012                      68
cristiano@lab360.com.br                              @cbsanchez                       wladimir@lab360.com.br              ...
Upcoming SlideShare
Loading in …5
×

QCON SP 2012

597 views
554 views

Published on

Palestra sobre desenvolvimento para plataformas móveis: nativos, HTML5, híbridos.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
597
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

QCON SP 2012

  1. 1. Aplicações Móveis Híbridas: usando Web e Nativo juntos cristiano@lab360.com.br (@cbsanchez) wladimir@lab360.com.br (@wlads)Tuesday, 22 May 2012 1
  2. 2. Agenda • Aplicações Mobile Web • Aplicações Mobile Nativas • Aplicações Mobile HíbridasTuesday, 22 May 2012 2
  3. 3. 1. Aplicações Mobile WebTuesday, 22 May 2012 3
  4. 4. No início era o nativoTuesday, 22 May 2012 4
  5. 5. Sir Tim Berners-Lee e então Berners-Lee criou a webTuesday, 22 May 2012 5
  6. 6. e desde 1991 • HTML, CSS e JavaScript • Pearl, PHP e ASP • Java • .NET • AppletTuesday, 22 May 2012 6
  7. 7. hoje na web • Sistemas corporativos • Google Docs • e-Learning • Twitter, Facebook, GitHub, Basecamp, Netflix...Tuesday, 22 May 2012 7
  8. 8. mas nós queríamos mais • WML e WMLScript • XHTML MP • JavaME • Nativos Martin CooperTuesday, 22 May 2012 8
  9. 9. Fonte: WikipediaTuesday, 22 May 2012 9
  10. 10. e chega o iPhone Steve JobsTuesday, 22 May 2012 10
  11. 11. Tuesday, 22 May 2012 11
  12. 12. HTML + CSS + JAVASCRIPTTuesday, 22 May 2012 12
  13. 13. ainda em desenvolvimento! • Chrome • Firefox • Safari • IE • Chrome FrameTuesday, 22 May 2012 13
  14. 14. e o que promete? • Novas API’s • Multimídia embutido • Uso off-line • Depuração de errosTuesday, 22 May 2012 14
  15. 15. http://www.html5rocks.com/en/ http://html5demos.com/Tuesday, 22 May 2012 15
  16. 16. SemânticaTuesday, 22 May 2012 16
  17. 17. CanvasTuesday, 22 May 2012 17
  18. 18. Canvas • 2D APIs • 3D APIs (WebGL) • Inline SVGTuesday, 22 May 2012 18
  19. 19. GeolocationTuesday, 22 May 2012 19
  20. 20. StorageTuesday, 22 May 2012 20
  21. 21. Áudio e VídeoTuesday, 22 May 2012 21
  22. 22. CSS3 • seletores, atributos, targets • instruções • webfonts • linhas e colunas • transforms e animationsTuesday, 22 May 2012 22
  23. 23. CSS3Tuesday, 22 May 2012 23
  24. 24. JavaScript • Ele sempre esteve entre nós! • Nova API DOM (getElementBy...) • History API • FileSystem API • GeolocationTuesday, 22 May 2012 24
  25. 25. web mobile apps? • Afinal de contas, é HTML • Portável • Padrão aberto • Porque é possívelTuesday, 22 May 2012 25
  26. 26. e ainda... • Device orientation • Multi-touch • Desenvolvimento produtivo • Comunidade • Separation of ConcernsTuesday, 22 May 2012 26
  27. 27. ...e por últimoTuesday, 22 May 2012 27
  28. 28. SoC • html estrutura • css view/estilo • javascript lógicaTuesday, 22 May 2012 28
  29. 29. alguns (bons) exemplos • Financial Times • Basecamp • http://www.apple.com/webapps/Tuesday, 22 May 2012 29
  30. 30. Financial TimesTuesday, 22 May 2012 30
  31. 31. 2. Aplicações Mobile NativasTuesday, 22 May 2012 31
  32. 32. Native mode (wikipedia) • The term native mode or native code is used in computing in two related senses: • to describe something running on a computer natively or in native mode meaning that it is running without any external support as contrasted to running in emulation (i.e. browser) • Native operating system, native instruction set, etc., in application to a computer processor means that the corresponding item was implemented specifically for the given model of the computer or microprocessor, as opposed to emulation or compatibility mode.Tuesday, 22 May 2012 32
  33. 33. Conceito • Native App: • An application that is specifically written for a device platform.Tuesday, 22 May 2012 33
  34. 34. Devices • Feature-phones • Smart-phones What else? • Tablets • TVTuesday, 22 May 2012 34
  35. 35. Plataformas Nativas • Plataformas e suas Linguagens de Programação • iOS => Objective-C, C • Android => Java • BlackBerry => Java • Windows Mobile (Nokia) => .NetTuesday, 22 May 2012 35
  36. 36. Tuesday, 22 May 2012 36
  37. 37. Tuesday, 22 May 2012 37
  38. 38. Tuesday, 22 May 2012 38
  39. 39. Tuesday, 22 May 2012 39
  40. 40. Android => Java + Dalvik • Java é uma linguagem familiar para muitos desenvolvedores, muitas vezes é a primeira linguagem • Gustav’s Moto: “Anybody can cook” • Android fornece uma excelente APITuesday, 22 May 2012 40
  41. 41. Objective-C • Objective-C criada na decada de 90 (NeXT) e possui uma vasta API => produtos Apple • Runtime C orientado a objetos • Ganhou muita popularidade com o lançamento do iPhone e do iOS SDKTuesday, 22 May 2012 41
  42. 42. C/C++ • Diversos Devices • Possivel desenvolver em C/C++ para iOS e Android • Projetos Open-Source!!! • UI???Tuesday, 22 May 2012 42
  43. 43. Características Apps Nativas • Aparência Nativa (Native look & feel): impossível para Web por definição • APIs: video, alarm clock, file access, push notification, ... • Integração com aplicações: maps, mail, camera, youtube, gallery, agenda, ...Tuesday, 22 May 2012 43
  44. 44. Características Apps Nativas • Integração com SO: concorrência, system events • Melhor Performance e uso da Bateria • Web engines, plugins (e.g. <video> codecs) • Desenvolvimento: debuggingTuesday, 22 May 2012 44
  45. 45. Características Apps Nativas • Uso “off-line” • In-App Purchase: CC cadastrado + billing (e.g. High Noon) • Tratamento de diferentes tamanhos e resoluções de tela (i.e. Android)Tuesday, 22 May 2012 45
  46. 46. Human Interface Guidelines Fonte: http://developer.android.com/guide/practices/ui_guidelines/index.html http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdfTuesday, 22 May 2012 46
  47. 47. Armazenamento (off-line)Tuesday, 22 May 2012 47
  48. 48. Principais Características “ordenadas” para App Nativas 1. offline mode 2. uso dos recursos (+hardware) do device 3. experiência de uso 4. centralização das aplicacoes (base de potenciais usuários) 5. integração com outras apps 6. notificações (push) e recursos de sistema (e.g. alarme) 7. “monetization” das lojas (busca e faturamento) 8. performance e uso da bateriaTuesday, 22 May 2012 48
  49. 49. Domínio de Aplicações • GAMES • Acesso a recursos nativos: ACCELEROMETER, CAMERA, COMPASS, CONTACTS, GEOLOCATION, NETWORK, NOTIFICATION, STORAGE • NFC?????? Fonte: Google Images (http://goo.gl/7ZQLS)Tuesday, 22 May 2012 49
  50. 50. Native UI Kits • Cocoa Touch • Android UI !"#$%&"( 12&$!"#$( )*&++",( -./0+(Tuesday, 22 May 2012 50
  51. 51. $$$ • $32,639 for a simple app • 2 months to create • 2 weeks per feature = 4 features • $8,160 per feature Fonte: Pinch/Zoom (Seatle)Tuesday, 22 May 2012 51
  52. 52. App Store, Market, etc • “o um lugar" para encontrar aplicações Fonte: Google Images (http://goo.gl/cKArV) • modelo de revenue share 70/30Tuesday, 22 May 2012 52
  53. 53. Apple Store Preço #Apps Games Total % TOTAL Free 160.705 27,670 188,375 39.97% $0.99 101.451 29,491 130,942 27.78% $1.99 47.028 7,999 55,027 11.68% 79.43% Fonte: http://148apps.biz/app-store-metrics/?mpage=apppriceTuesday, 22 May 2012 53
  54. 54. Tuesday, 22 May 2012 54
  55. 55. Cases • Games: angry birds, plats vs zombies • Facebook, Twitter • Shazan • Flipboard • Narizinho, AutoEsporte, Fibria, QuemCarnaval :DTuesday, 22 May 2012 55
  56. 56. Cases • “We bet everything on Apple and iOS and then Apple killed us by changing the rules in the middle of the game” • Finantial Times (ft.com) • Primeiro: Nativo • Depois: WebTuesday, 22 May 2012 56
  57. 57. Resumindo... • Web - portabilidade - padrões abertos - simplicidade • Nativas - integração hardware/plataforma - APIs novas - experiência + ricaTuesday, 22 May 2012 57
  58. 58. 3. Aplicações Mobile HíbridasTuesday, 22 May 2012 58
  59. 59. Conceito • Hybrid App: • An application using primarily web technologies inside a native container.Tuesday, 22 May 2012 59
  60. 60. Aplicações Híbridas • WebView • WebKit • JavaScript bridgeTuesday, 22 May 2012 60
  61. 61. WebView • Android e iOS • Usa o WebKit como engineTuesday, 22 May 2012 61
  62. 62. WebKit • Browser Engine • Apple, Google, KDE, Nokia, RIM, Samsung entre outrasTuesday, 22 May 2012 62
  63. 63. JavaScript Bridge • Nativo pro WebView • WebView pra Nativo • Eventos do browser e JS com callback pro nativoTuesday, 22 May 2012 63
  64. 64. JavaScript => AndroidTuesday, 22 May 2012 64
  65. 65. Android => JavaScriptTuesday, 22 May 2012 65
  66. 66. Formas de Fazer • WebView e recursos nativos • WebView dentro de frame nativo • Transitando entre WebView e nativoTuesday, 22 May 2012 66
  67. 67. cross-plataform frameworks • App Inventor • DroidDraw • Rhomobile • Appcelerator/Titanium • SproutCore • MonoTouch • JQuery Mobile • Jo • Sencha Touch • PhoneGapTuesday, 22 May 2012 67
  68. 68. Appcelerator/TitaniumTuesday, 22 May 2012 68
  69. 69. cristiano@lab360.com.br @cbsanchez wladimir@lab360.com.br @wlads @lab_360Tuesday, 22 May 2012 69

×