Introducing Mobile Development for Web Developers

1.915 visualizações

Publicada em

During the session I’ve talked about web and mobile development integration (qt, maemo, symbian, wrt widgets, flash lite, nokia, android, etc.)

Publicada em: Tecnologia, Negócios
  • Seja o primeiro a comentar

Introducing Mobile Development for Web Developers

  1. 1. Introdução ao Desenvolvimento Mobile para Desenvolvedores Web<br />Felipe Andrade | CTO e Co-Fundador da i2tecnologia<br />
  2. 2. i2tecnologia<br />Forum Nokia LaunchPad<br />FornecedorOficial Nokia no Brasil<br />Membrosparticipantes do programa Forum Nokia Champion<br />Tecnologiasatualmenteutilizadas:<br />Symbian C++<br />Flash Lite<br />WRT (Web Runtime – HTML, CSS, AJAX)<br />Objective-C (iPhone)<br />
  3. 3. Forum Nokia<br />Participante da maratona do Forum Nokia Developer Summit Hackathon, Monaco, 2009<br />Vencedor do concurso Nokia Sem Limites, 2009<br />Forum Nokia Champion, 2008-2009<br />Forum Nokia Champion, 2007-2008<br />Forum Nokia Champion, 2008-2009<br />Forum Nokia Champion of the Month, June, 2008<br />Forum Nokia Champion of the Month, July, 2009<br />Vencedor do Forum Nokia 2008 Code Example Challenge, 2008<br />Finalista do Nokia Mobile Rules&apos;08 (Plano de Negócios)<br />
  4. 4. Forum Nokia Rewards<br />
  5. 5. Escolhendo a sua Plataforma<br />Desenvolvimento Web paraSmartphones<br />
  6. 6. QualPlataformaEscolher?<br />Rode emmilhares de aparelhos<br />Suporteospadrões de tecnologiaexistentes no mercado<br />Sejafácilerápido de desenvolver<br />Possuaumalojapara vender seusprodutos<br />Ofereçaomelhorsuporteaodesenvolvedor<br />
  7. 7. ConheçendooSymbian OS<br />Sistemaoperacionalpresenteemcerca de 50% dos Smartphones<br />TotalmenteIndependente, totalmenteaberto<br />Verdadeiramente multi tarefa<br />Cerca de 11 runtimes disponíveis<br />Ovi Store (Loja de Aplicativos)<br />Forum Nokia (http://forum.nokia.com)<br />Symbian Developer (http://developer.symbian.org)<br />
  8. 8. Runtimes<br />Qt<br />Python for S60<br />Flash Lite<br />.NET<br />Java ME…<br />Qualdevoescolher! <br />
  9. 9. Ferramentas de Desenvolvimento<br />Carbide C++ 2.x (EPL)<br />Qt Creator (LGPL)<br />Eclipse (Pluginspara Python e Java ME disponíveis)<br />Adobe Flash CS 4 (Adobe Device Central)<br />
  10. 10. Novas Idéias<br />
  11. 11. Smart Toaster X<br />BreadSense - Usasensoresinternosparamedir a configuraçãoe tempo ideal para a torrada.<br />Telatouchscreen UI - paraconfigurar de forma maisfácil.<br />Configuraçõespersonalizadaspodem ser armazenadaspor digital. Basta se identificare a torradeirajásaberácomovocêpreferesuastorradas.<br />Configuraçõesadicionaisesugestões de preparopoderão ser baixadaspela internet via conexão WI-FI.<br />Configuraçõespessoaiscompartilhadastambém online.<br />Conecta com ocelular via Bluetooth paraenviarlembretes de, porexemplo, comprarpãoquandosair de casa.<br />Notícias, previsão do tempo evídeos no café-da-manhã.<br />Atualizações de firmware baixadasautomaticamente via WI-FI<br />
  12. 12. Desenvolvimento Flash para Smartphones<br />
  13. 13. Desenvolvimento Flash Mobile<br />Desenvolvimento Flash para iPhone<br />Dispositivo Nokia S40, S60 e Maemo<br />Desenvolvimento Flash para Android<br />Atualmente Flash Lite (actionscript 2.0)<br />Em breve Adobe AIR (actionscript 3.0)<br />Sony Ericsson Capuchin (38 aparelhos)<br />O Projeto Capuchin éumatecnologiaproprietária dos dispositivos Sony Ericsson<br />Flyer e Jarpa Framework (Brasileiros)<br />
  14. 14. S60 Platform Services<br />Sensores (Acelerometro)<br />GPS<br />Calendário<br />Contatos<br />Logs<br />SMS e MMS<br />
  15. 15. Web Runtime – Extensão da Web<br />
  16. 16. Widgets<br />Widgets como uma extensão da Web<br /><ul><li> Web Distribuída
  17. 17. Web Portátil
  18. 18. Web Remixada
  19. 19. Web Programada
  20. 20. Web Gerada pelo Consumidor</li></ul>Exemplos de Sucesso<br />
  21. 21. Tipos de Widgets<br /><ul><li> Desktop
  22. 22. Web
  23. 23. Widgets Pessoais
  24. 24. Widgets Públicos
  25. 25. Mobile
  26. 26. Físicos</li></li></ul><li>Widget Engine<br />
  27. 27. Web Runtime para plataforma S60<br />
  28. 28. Web Runtime para Plataforma S60<br /><ul><li> Web Browser funciona como uma máquina virtual
  29. 29. Permite rodar aplicações web fora do web browser para dispositivos S60
  30. 30. Suporta padrões de tecnologias já utilizadas na web
  31. 31. HTML 4.01, XHTML 1.0 (básico e perfil mobile)
  32. 32. CSS 2.1
  33. 33. JavaScript 1.5 (padrão ECMA-262)
  34. 34. XMLHttpRequest (Ajax)
  35. 35. DOM Level 2
  36. 36. Inclui bibliotecas JavaScript especificas para Widgets (widget, menu, SystemInfo)
  37. 37. Micro aplicações altamente interativas</li></li></ul><li>Web Runtime como uma VM<br /><ul><li> A engine do Web Browser processa os componentes chave como a engine XML, processador HTML, engine JavaScript, processador CSS, e a engine de renderização.
  38. 38. Possui páginas web e aplicações widgets como clientes
  39. 39. JavaScript como uma linguagem de Programação
  40. 40. Provê acesso a um certo de nível de propriedades do sistema
  41. 41. Agora você já conheçe o Web Runtime</li></li></ul><li>Web Browser para S60<br />
  42. 42. Expande as API’s do Web Browser S60<br />
  43. 43. Web Runtime - Objetivos<br /><ul><li> Widgets
  44. 44. Utilizam serviços da internet e APIs web para acessar informações
  45. 45. Utilizam XmlHttpRequest e outras técnicas AJAX
  46. 46. Grande facilidade em portar Widgets de outras plataformas
  47. 47. Widgets Integrados a experiência do usuário
  48. 48. Ícones da aplicação no menu principal
  49. 49. Podem ser utilizados em telas de espera e atalhos
  50. 50. Aparecem na lista de aplicativos ativos
  51. 51. Funcionam da mesma forma que aplicações S60 já existentes
  52. 52. Habilita o acesso a APIs especificas dos Widgets (widget, system, info, menu)</li></li></ul><li>Web Runtime - Futuro<br /><ul><li> Widgets
  53. 53. Combinam informações da internet com a plataforma de serviços
  54. 54. Aumentam a experiência do usuário
  55. 55. Informações sobre a localização, PIM, e media
  56. 56. Integrados em telas de espera
  57. 57. Melhorias na UI e novas funcionalidades
  58. 58. Widgets como uma plataforma de desenvolvimento
  59. 59. Integração segura com a plataforma de serviços S60
  60. 60. Acesso a plataforma de serviços via APIs web
  61. 61. Segurança e modelo de assinatura para widgets</li></li></ul><li>Mobile Widgets<br /><ul><li> A plataforma S60 foi a primeira a anunciar suporte a Widgets
  62. 62. Totalmente baseada em padrões de tecnologias Web
  63. 63. A única plataforma mobile a suportar conteúdo Flash em Widgets</li></li></ul><li>O que tem Dentro de um Web Widget S60<br />
  64. 64. Estrutura de um Web Widget S60<br /><ul><li>Um widget é construído por um conjunto de arquivos
  65. 65. info.plist(required)
  66. 66. [name].html (required)
  67. 67. icon.png(optional)
  68. 68. [name].css(optional)
  69. 69. [name].js(optional)
  70. 70. resources(optional)
  71. 71. O projeto de um Widget não é nada mais do que um diretório no sistema onde os arquivos estão armazenados
  72. 72. Os arquivos necessários e o ícone devem estar localizados no diretório root do projeto</li></li></ul><li>Info.plist – Propriedades de um Widget<br /><ul><li> É um arquivo XML contendo as propriedades e informações de configuração de um Widget</li></ul>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;!DOCTYPE plistPUBLIC &quot;-//Nokia//DTD PLIST 1.0//EN&quot; &quot;http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd&quot;&gt;<br />&lt;plistversion=&quot;1.0&quot;&gt;<br />&lt;dict&gt;<br />&lt;key&gt;DisplayName&lt;/key&gt;<br />&lt;string&gt;WidgetName&lt;/string&gt;<br />&lt;key&gt;Identifier&lt;/key&gt;<br />&lt;string&gt;com.company.widget.project&lt;/string<br />&lt;key&gt;MainHTML&lt;/key&gt;<br />&lt;string&gt;Main.html&lt;/string&gt;<br />&lt;/dict&gt;<br />&lt;/plist&gt;<br />
  73. 73. WRT - Propriedades suportadas<br />
  74. 74. Icon.png<br /><ul><li> O ícone de widget é um arquivo salvo no formato PNG
  75. 75. O tamanho recomendado de um ícone é de 88x88 pixels
  76. 76. Se o ícone for omitido do pacote de instalação, o widget irá parecer no menu do dispositivo como uma aplicação padrão S60</li></li></ul><li>Dentro de um WRT Widget S60<br /><ul><li> O arquivo de instalação de um Widget é um arquivo ZIP
  77. 77. A extensão do arquivo de instalação é [widgetname].WGZ
  78. 78. O tipo MIME de um widget é application/x-nokia-widget</li></li></ul><li>Processo de Instalação de um Widget<br />
  79. 79. Desenvolvendo Widgets<br />Passo a passo no desenvolvimento de Widgets<br />
  80. 80. 4 Passos para Desenvolver Widgets<br /> Crie uma pasta no seu desktop. Ex:<br />C:ReMobile<br />Crie e adicione as informações necessárias no arquivo info.plist, salve este arquivo no diretório criado na etapa 1<br /> C:ReMobile<br /> info.plist<br />Crie e adicione algumas informações no arquivo HTML, não esqueça de utilizar o mesmo nome definido na tag MainHTML do arquivo info.plist<br /> C:ReMobile<br /> info.plist<br /> remobile.html<br />Crie e/ou adicione arquivos opcionais ao diretório<br />C:Remobile<br /> info.plist<br /> remobile.html<br /> remobile.js<br /> remobile.css<br />
  81. 81. 3 Passos para Publicar Widgets<br /> Utilize uma ferramenta para comprimir o arquivo no formato ZIP<br />C:ReMobile C:ReMobile.zip<br /> info.plist<br /> remobile.html<br />Mude o nome da extensão do arquivo para WGZ<br />C:ReMobile.zip C:ReMobile.WGZ<br />Envie o arquivo via Bluetooth ou abra o arquivo ReMobile.WGZ no emulador<br />
  82. 82. O que você precisa para começar?<br /><ul><li> Para implementar o código de um Widget:
  83. 83. Uma ferramenta de edição de texto ou edição web
  84. 84. Para debugar um widget
  85. 85. Firefox
  86. 86. firebug
  87. 87. Greasemonkey
  88. 88. Um script para liberar o acesso a rede através de chamadas locais (XmlHttpRequest Bypass Security)
  89. 89. Para testar um Widget
  90. 90. Emulador S60 3rd Edition FP2 SDK
  91. 91. Emulador S60 5th SDK
  92. 92. Um dispositivo que suporte a tecnologia</li></li></ul><li>AptanaStudio, Dreamweaver, Visual Studio<br />
  93. 93. Desenvolvendo Web Widgets no Emulador<br />
  94. 94. Adicionando Conteúdo Interativo<br /><ul><li> SVG</li></ul>&lt;object data=&quot;resources/gnu.svg&quot; width=&quot;120&quot; height=&quot;120&quot; type=&quot;image/svg+xml&quot;&gt;&lt;/object&gt;<br />&lt;embed src=&quot;resources/gnu.svg&quot; width=&quot;120&quot; height=&quot;120&quot; type=&quot;image/svg+xml&quot; /&gt;<br /><ul><li> Flash Lite</li></ul>&lt;object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; width=&quot;238&quot; height=&quot;318&quot; id=&quot;MyFlash&quot; align=&quot;middle&quot;&gt;<br /> &lt;param name=&quot;allowScriptAccess&quot; value=&quot;sameDomain&quot; /&gt;<br /> &lt;param name=&quot;movie&quot; value=&quot;MyFlash.swf&quot; /&gt;<br /> &lt;param name=&quot;loop&quot; value=&quot;false&quot; /&gt;<br /> &lt;param name=&quot;menu&quot; value=&quot;false&quot; /&gt;<br /> &lt;param name=&quot;quality&quot; value=&quot;high&quot; /&gt;<br /> &lt;param name=&quot;wmode&quot; value=&quot;opaque&quot; /&gt;<br /> &lt;param name=&quot;bgcolor&quot; value=&quot;#ffffff&quot; /&gt;<br /> &lt;embed src=&quot;MyFlash.swf&quot; loop=&quot;false&quot; menu=&quot;false&quot; quality=&quot;high&quot; wmode=&quot;opaque&quot; bgcolor=&quot;#ffffff&quot; width=&quot;238&quot; height=&quot;318&quot; name=&quot;Finish&quot; align=&quot;middle&quot; allowScriptAccess=&quot;sameDomain&quot; type=&quot;application/x-shockwave-flash&quot; pluginspage=&quot;http://www.macromedia.com/go/getflashplayer&quot; /&gt;<br /> &lt;/object&gt;<br />
  95. 95. Introdução a API’s WRT<br />Como tratar eventos do aparelho<br />
  96. 96. Objeto Widget<br /><ul><li> Módulo embutido do Widget, acessado através das variáveis widget ou window.widget
  97. 97. Widget methods</li></ul> openURL(String:url)<br /> setPreferenceForKey(String:preference, String:key)<br /> preferenceForKey(String:key)<br /> prepareForTransition(String:transitionState)<br /> performTransition(void)<br /> setNavigationEnabled(Boolean:flag)<br /> openApplication(Hex:Uid, String:param)<br /> setDisplayLandscape(void)<br /> setDisplayPortrait(void)<br />•Widget properties<br /> identifier [readonly, String]<br /> onshow[assigned callback function]<br /> onhide[assigned callback function]<br /> isrotationsupported[readonly, Booloean]<br />
  98. 98. Objeto Widget<br />function manipularTela() {<br /> var h = window.screen.height;<br /> var w = window.screen.width;<br /> if (h &lt; w)<br /> widget.setDisplayLanscape();<br /> else<br /> widget.setDisplayPortrait();<br />} <br />
  99. 99. Segurança nos Widgets<br />Como manter seus widgets seguros<br />
  100. 100. Visão Geral<br /><ul><li> Ao contrário dos arquivos SIS, Widgets não precisam ser assinados.
  101. 101. Widgets são considerados inseguros. Para acessar serviços nativos do aparelho existe o controle do usuário, que neste caso precisa autorizar o aplicativo para acessar estes recursos
  102. 102. Widgets acessam a rede através do Web Browser S60.
  103. 103. Widgets acessam a plataforma de serviços S60 através de APIs de serviços JavaScript. Para o WRT 1.0, o Web Runtime controla o acesso a plataforma de serviços através do Web Browser S60. Para o WRT 1.1, o Web Runtime utiliza o Runtime Security Manager para controlar o acesso a plataforma de serviços.</li></li></ul><li>Dúvidas?<br />felipe.andrade@i2tecnologia.com.br<br />http://twitter.com/felipeandrade<br />http://twitter.com/symbiandevco<br />gtalk: felipebzr@gmail.com<br />http://blog.felipeandrade.org<br />

×