Your SlideShare is downloading. ×
0
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Introducing Mobile Development for Web Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducing Mobile Development for Web Developers

1,592

Published on

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

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

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

No Downloads
Views
Total Views
1,592
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • A i2tecnologia tambémfoicontempladapelo FACEPE e PRIME paradesenvolvimento de inovaçõestecnologicas.Recebeu um aporte de capital do fundo de investimento Open Screen Fund coordenadopela Nokia e Adobe.Possocitardoisexemplos: controleremotoparajogoseecgmobicare
  • 1o. De Abril?! 
  • Qt 4.6, um framework multiplataforma de desenvolvimentonativo, com váriasbibliotecasparaanimação.Flash LiteeorecémsuporteparacompilaçãoparaoiPhone.
  • 1o. De Abril?! 
  • 1o. De Abril?! 
  • Atualmente, existem mais de 18 dispositivos anunciados e vendidos que suportam a tecnologia Web Runtime.Estes dispositivos são utilizados por milhões de usuários e o este número está crescendo cada vez mais rápido.
  • Atualmente, existem mais de 18 dispositivos anunciados e vendidos que suportam a tecnologia Web Runtime.Estes dispositivos são utilizados por milhões de usuários e o este número está crescendo cada vez mais rápido.
  • Na API do WRT existeumafunçãochamada “openURL” paraabriro browser nativo do dispositivo. Vocêtambémpodeutilizarodocument.locationparasetaro html do seu widget paraoutralocalização, mas a melhor forma continua sendoutilizaro AJAX paracarregarerenderizar dados ondevocêquiser no seu HTML principal. Estáfunçãosempreabreo browser nativo do aparelho.A versão do WRT 1.1 terásuporteemaparelhos no S60 5th edition (nokia 5800, N97) com integração de S60 GUI, Jqueryeacesso a caracteristicas do dispositivo, calendar, contacts and location.
  • Transcript

    1. Introdução ao Desenvolvimento Mobile para Desenvolvedores Web<br />Felipe Andrade | CTO e Co-Fundador da i2tecnologia<br />
    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. 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. Forum Nokia Rewards<br />
    5. Escolhendo a sua Plataforma<br />Desenvolvimento Web paraSmartphones<br />
    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. 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. Runtimes<br />Qt<br />Python for S60<br />Flash Lite<br />.NET<br />Java ME…<br />Qualdevoescolher! <br />
    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. Novas Idéias<br />
    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. Desenvolvimento Flash para Smartphones<br />
    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. S60 Platform Services<br />Sensores (Acelerometro)<br />GPS<br />Calendário<br />Contatos<br />Logs<br />SMS e MMS<br />
    15. Web Runtime – Extensão da Web<br />
    16. Widgets<br />Widgets como uma extensão da Web<br /><ul><li> Web Distribuída
    17. Web Portátil
    18. Web Remixada
    19. Web Programada
    20. Web Gerada pelo Consumidor</li></ul>Exemplos de Sucesso<br />
    21. Tipos de Widgets<br /><ul><li> Desktop
    22. Web
    23. Widgets Pessoais
    24. Widgets Públicos
    25. Mobile
    26. Físicos</li></li></ul><li>Widget Engine<br />
    27. Web Runtime para plataforma S60<br />
    28. Web Runtime para Plataforma S60<br /><ul><li> Web Browser funciona como uma máquina virtual
    29. Permite rodar aplicações web fora do web browser para dispositivos S60
    30. Suporta padrões de tecnologias já utilizadas na web
    31. HTML 4.01, XHTML 1.0 (básico e perfil mobile)
    32. CSS 2.1
    33. JavaScript 1.5 (padrão ECMA-262)
    34. XMLHttpRequest (Ajax)
    35. DOM Level 2
    36. Inclui bibliotecas JavaScript especificas para Widgets (widget, menu, SystemInfo)
    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. Possui páginas web e aplicações widgets como clientes
    39. JavaScript como uma linguagem de Programação
    40. Provê acesso a um certo de nível de propriedades do sistema
    41. Agora você já conheçe o Web Runtime</li></li></ul><li>Web Browser para S60<br />
    42. Expande as API’s do Web Browser S60<br />
    43. Web Runtime - Objetivos<br /><ul><li> Widgets
    44. Utilizam serviços da internet e APIs web para acessar informações
    45. Utilizam XmlHttpRequest e outras técnicas AJAX
    46. Grande facilidade em portar Widgets de outras plataformas
    47. Widgets Integrados a experiência do usuário
    48. Ícones da aplicação no menu principal
    49. Podem ser utilizados em telas de espera e atalhos
    50. Aparecem na lista de aplicativos ativos
    51. Funcionam da mesma forma que aplicações S60 já existentes
    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. Combinam informações da internet com a plataforma de serviços
    54. Aumentam a experiência do usuário
    55. Informações sobre a localização, PIM, e media
    56. Integrados em telas de espera
    57. Melhorias na UI e novas funcionalidades
    58. Widgets como uma plataforma de desenvolvimento
    59. Integração segura com a plataforma de serviços S60
    60. Acesso a plataforma de serviços via APIs web
    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. Totalmente baseada em padrões de tecnologias Web
    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. Estrutura de um Web Widget S60<br /><ul><li>Um widget é construído por um conjunto de arquivos
    65. info.plist(required)
    66. [name].html (required)
    67. icon.png(optional)
    68. [name].css(optional)
    69. [name].js(optional)
    70. resources(optional)
    71. O projeto de um Widget não é nada mais do que um diretório no sistema onde os arquivos estão armazenados
    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. WRT - Propriedades suportadas<br />
    74. Icon.png<br /><ul><li> O ícone de widget é um arquivo salvo no formato PNG
    75. O tamanho recomendado de um ícone é de 88x88 pixels
    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. A extensão do arquivo de instalação é [widgetname].WGZ
    78. O tipo MIME de um widget é application/x-nokia-widget</li></li></ul><li>Processo de Instalação de um Widget<br />
    79. Desenvolvendo Widgets<br />Passo a passo no desenvolvimento de Widgets<br />
    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. 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. O que você precisa para começar?<br /><ul><li> Para implementar o código de um Widget:
    83. Uma ferramenta de edição de texto ou edição web
    84. Para debugar um widget
    85. Firefox
    86. firebug
    87. Greasemonkey
    88. Um script para liberar o acesso a rede através de chamadas locais (XmlHttpRequest Bypass Security)
    89. Para testar um Widget
    90. Emulador S60 3rd Edition FP2 SDK
    91. Emulador S60 5th SDK
    92. Um dispositivo que suporte a tecnologia</li></li></ul><li>AptanaStudio, Dreamweaver, Visual Studio<br />
    93. Desenvolvendo Web Widgets no Emulador<br />
    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. Introdução a API’s WRT<br />Como tratar eventos do aparelho<br />
    96. Objeto Widget<br /><ul><li> Módulo embutido do Widget, acessado através das variáveis widget ou window.widget
    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. 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. Segurança nos Widgets<br />Como manter seus widgets seguros<br />
    100. Visão Geral<br /><ul><li> Ao contrário dos arquivos SIS, Widgets não precisam ser assinados.
    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. Widgets acessam a rede através do Web Browser S60.
    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 />

    ×