ReMobile - Nokia Web Runtime

2.270 visualizações

Publicada em

Slide sobre o Nokia WebRuntime (WRT), exibido durante o evento ReMobile, promovido por Felipe Andrade, co-fundador da i2tecnologia.

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

Sem downloads
Visualizações
Visualizações totais
2.270
No SlideShare
0
A partir de incorporações
0
Número de incorporações
369
Ações
Compartilhamentos
0
Downloads
41
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Bom dia, para aqueles que não me conheçem ainda, sou Felipe Andrade, co-fundador da i2 tecnologia, empresa com foco em entretenimento para dispositivos móveis. Na i2tecnologia trabalhamos com o Adobe Flash, Python S60, Java ME, Widgets, Symbian, desenvolvimento para o iPhone, Android, Palm. Em 2007, recebi o titulo de Forum Nokia Champion, em razão das minhas contribuições para o desenvolvimento mobile utilizando smartphones Nokia.
  • ReMobile - Nokia Web Runtime

    1. 1. ReMobile Felipe Andrade Diretor de Tecnologia – i2 Forum Nokia Champion Forum Nokia Widgets Ambassador Forum Nokia Developer Advisory Council Member twitter.com/felipeandrade blogs.forum.nokia.com/blog/felipe-andrades-forum-nokia-blog Recife – Brazil – 02.2009
    2. 2. ReMobile <ul><li>O foco do ReMobile é trocar informações sobre tecnologias móveis através de palestras, vídeo aulas, artigos no formato Wiki, slides, etc. </li></ul><ul><li>O ReMobile será sempre um evento gratuito </li></ul><ul><li>Contribuições de tempo, dinheiro, programas e equipamentos são bastante necessárias </li></ul><ul><li>Grupo </li></ul><ul><li>http://groups.google.com/group/remobile </li></ul>
    3. 3. Web Runtime (WRT) Desenvolvimento Web para dispositivos Nokia S60
    4. 4. Agenda <ul><li>O que são Widgets </li></ul><ul><li>Evolução dos Widgets </li></ul><ul><li>Widgets para diferentes plataformas </li></ul><ul><li>Nokia Web Runtime </li></ul><ul><ul><li>Web Runtime para plataforma S60 </li></ul></ul><ul><ul><li>O que tem dentro de um web widget S60 </li></ul></ul><ul><ul><li>Desenvolvimento de Widgets </li></ul></ul><ul><ul><ul><li>Emulador </li></ul></ul></ul><ul><ul><ul><li>IDE’s </li></ul></ul></ul><ul><ul><li>Introdução a API’s </li></ul></ul><ul><ul><li>Segurança </li></ul></ul>
    5. 5. O Que São Widgets
    6. 6. Widgets <ul><li>Widgets como uma extensão da Web </li></ul><ul><ul><li>Web Distribuída </li></ul></ul><ul><ul><li>Web Portátil </li></ul></ul><ul><ul><li>Web Remixada </li></ul></ul><ul><ul><li>Web Programada </li></ul></ul><ul><ul><li>Web Gerada pelo Consumidor </li></ul></ul><ul><li>Exemplos de Sucesso </li></ul>
    7. 7. Evolução da Web
    8. 8. Evolução da Web <ul><li>Os Widgets são a evolução natural da Web </li></ul><ul><li>Pequenos pedaços interdependentes das páginas web </li></ul><ul><li>Do-It-Yourself </li></ul>
    9. 9. Widgets para diferentes plataformas
    10. 10. Tipos de Widgets <ul><li>Desktop </li></ul><ul><li>Web </li></ul><ul><ul><li>Widgets Pessoais </li></ul></ul><ul><ul><li>Widgets Públicos </li></ul></ul><ul><li>Mobile </li></ul><ul><li>Físicos </li></ul>
    11. 11. Widget Engine
    12. 12. Nokia Web Runtime
    13. 13. Web Runtime para plataforma S60
    14. 14. Web Runtime para Plataforma S60 <ul><li>Web Browser funciona como uma máquina virtual </li></ul><ul><li>Permite rodar aplicações web fora do web browser para dispositivos S60 </li></ul><ul><li>Suporta padrões de tecnologias já utilizadas na web </li></ul><ul><ul><li>HTML 4.01, XHTML 1.0 (básico e perfil mobile) </li></ul></ul><ul><ul><li>CSS 2.1 </li></ul></ul><ul><ul><li>JavaScript 1.5 (padrão ECMA-262) </li></ul></ul><ul><ul><li>XMLHttpRequest (Ajax) </li></ul></ul><ul><ul><li>DOM Level 2 </li></ul></ul><ul><li>Inclui bibliotecas JavaScript especificas para Widgets (widget, menu, SystemInfo) </li></ul><ul><li>Micro aplicações altamente interativas </li></ul>
    15. 15. Web Runtime como uma VM <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. </li></ul><ul><li>Possui páginas web e aplicações widgets como clientes </li></ul><ul><li>JavaScript como uma linguagem de Programação </li></ul><ul><li>Provê acesso a um certo de nível de propriedades do sistema </li></ul><ul><li>Agora você já conheçe o Web Runtime </li></ul>
    16. 16. Web Browser para S60
    17. 17. Expande as API’s do Web Browser S60
    18. 18. Web Runtime - Objetivos <ul><li>Widgets </li></ul><ul><ul><li>Utilizam serviços da internet e APIs web para acessar informações </li></ul></ul><ul><ul><li>Utilizam XmlHttpRequest e outras técnicas AJAX </li></ul></ul><ul><ul><li>Grande facilidade em portar Widgets de outras plataformas </li></ul></ul><ul><li>Widgets Integrados a experiência do usuário </li></ul><ul><ul><li>Ícones da aplicação no menu principal </li></ul></ul><ul><ul><li>Podem ser utilizados em telas de espera e atalhos </li></ul></ul><ul><ul><li>Aparecem na lista de aplicativos ativos </li></ul></ul><ul><ul><li>Funcionam da mesma forma que aplicações S60 já existentes </li></ul></ul><ul><ul><li>Habilita o acesso a APIs especificas dos Widgets (widget, system, info, menu) </li></ul></ul>
    19. 19. Web Runtime - Futuro <ul><li>Widgets </li></ul><ul><ul><li>Combinam informações da internet com a plataforma de serviços </li></ul></ul><ul><ul><li>Aumentam a experiência do usuário </li></ul></ul><ul><ul><li>Informações sobre a localização, PIM, e media </li></ul></ul><ul><ul><li>Integrados em telas de espera </li></ul></ul><ul><ul><li>Melhorias na UI e novas funcionalidades </li></ul></ul><ul><li>Widgets como uma plataforma de desenvolvimento </li></ul><ul><ul><li>Integração segura com a plataforma de serviços S60 </li></ul></ul><ul><ul><li>Acesso a plataforma de serviços via APIs web </li></ul></ul><ul><ul><li>Segurança e modelo de assinatura para widgets </li></ul></ul>
    20. 20. Mobile Widgets <ul><li>A plataforma S60 foi a primeira a anunciar suporte a Widgets </li></ul><ul><li>Totalmente baseada em padrões de tecnologias Web </li></ul><ul><li>A única plataforma mobile a suportar conteúdo Flash em Widgets </li></ul>
    21. 21. O que tem dentro de um web widget S60
    22. 22. Estrutura de um Web Widget S60 <ul><li>Um widget é construído por um conjunto de arquivos </li></ul><ul><ul><li>info.plist(required) </li></ul></ul><ul><ul><li>[name].html (required) </li></ul></ul><ul><ul><li>icon.png(optional) </li></ul></ul><ul><ul><li>[name].css(optional) </li></ul></ul><ul><ul><li>[name].js(optional) </li></ul></ul><ul><ul><li>resources(optional) </li></ul></ul><ul><li>O projeto de um Widget não é nada mais do que um diretório no sistema onde os arquivos estão armazenados </li></ul><ul><li>Os arquivos necessários e o ícone devem estar localizados no diretório root do projeto </li></ul>
    23. 23. Info.plist – Propriedades de um Widget <ul><li>É um arquivo XML contendo as propriedades e informações de configuração de um Widget </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><!DOCTYPE plistPUBLIC &quot;-//Nokia//DTD PLIST 1.0//EN&quot; &quot;http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd&quot;> </li></ul><ul><li><plistversion=&quot;1.0&quot;> </li></ul><ul><ul><li><dict> </li></ul></ul><ul><ul><ul><li><key>DisplayName</key> </li></ul></ul></ul><ul><ul><ul><li><string>WidgetName</string> </li></ul></ul></ul><ul><ul><ul><li><key>Identifier</key> </li></ul></ul></ul><ul><ul><ul><li><string>com.company.widget.project</string </li></ul></ul></ul><ul><ul><ul><li><key>MainHTML</key> </li></ul></ul></ul><ul><ul><ul><li><string>Main.html</string> </li></ul></ul></ul><ul><ul><li></dict> </li></ul></ul><ul><li></plist> </li></ul>
    24. 24. WRT - Propriedades suportadas Nome Tipo Status Descrição DisplayName String Required Especifica o atual nome do widget listado na barra de aplicações Identifier String Required Especifica um nome único para o widget no formato de domínio reverso MainHTML String Required Especifica o nome do HTML principal AllowNetworkAcess Boolean Opcional Especifica acesso a dados da rede através dos recursos do Widget ShortVersionString String Opcional Especifica a versão do release da aplicação Version Number Opcional Especifica a versão do pacote
    25. 25. Icon.png <ul><li>O ícone de widget é um arquivo salvo no formato PNG </li></ul><ul><li>O tamanho recomendado de um ícone é de 88x88 pixels </li></ul><ul><li>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></ul>
    26. 26. Dentro de um WRT Widget S60 <ul><li>O arquivo de instalação de um Widget é um arquivo ZIP </li></ul><ul><li>A extensão do arquivo de instalação é [widgetname].WGZ </li></ul><ul><li>O tipo MIME de um widget é application/x-nokia-widget </li></ul>
    27. 27. Processo de Instalação de um Widget
    28. 28. Desenvolvimento de Widgets
    29. 29. 4 Passos para Desenvolver Widgets <ul><li>Crie uma pasta no seu desktop. Ex: </li></ul><ul><ul><li>C:ReMobile </li></ul></ul><ul><li>Crie e adicione as informações necessárias no arquivo info.plist, salve este arquivo no diretório criado na etapa 1 </li></ul><ul><li>C:ReMobile </li></ul><ul><li>info.plist </li></ul><ul><li>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 </li></ul><ul><li>C:ReMobile </li></ul><ul><li>info.plist </li></ul><ul><li>remobile.html </li></ul><ul><li>Crie e/ou adicione arquivos opcionais ao diretório </li></ul><ul><ul><li>C:Remobile </li></ul></ul><ul><ul><li>info.plist </li></ul></ul><ul><ul><li>remobile.html </li></ul></ul><ul><ul><li>remobile.js </li></ul></ul><ul><ul><li>remobile.css </li></ul></ul>
    30. 30. 3 Passos para Publicar Widgets <ul><li>Utilize uma ferramenta para comprimir o arquivo no formato ZIP </li></ul><ul><ul><li>C:ReMobile C:ReMobile.zip </li></ul></ul><ul><ul><li>info.plist </li></ul></ul><ul><ul><li>remobile.html </li></ul></ul><ul><li>Mude o nome da extensão do arquivo para WGZ </li></ul><ul><ul><li>C:ReMobile.zip C:ReMobile.WGZ </li></ul></ul><ul><ul><li>Envie o arquivo via Bluetooth ou abra o arquivo ReMobile.WGZ no emulador </li></ul></ul>
    31. 31. O que você precisa para começar? <ul><li>Para implementar o código de um Widget: </li></ul><ul><ul><li>Uma ferramenta de edição de texto ou edição web </li></ul></ul><ul><li>Para debugar um widget </li></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><ul><li>firebug </li></ul></ul></ul><ul><ul><ul><li>Greasemonkey </li></ul></ul></ul><ul><ul><ul><li>Um script para liberar o acesso a rede através de chamadas locais (XmlHttpRequest Bypass Security) </li></ul></ul></ul><ul><li>Para testar um Widget </li></ul><ul><ul><li>Emulador S60 3rd Edition FP2 SDK </li></ul></ul><ul><ul><li>Emulador S60 5th SDK </li></ul></ul><ul><ul><li>Um dispositivo que suporte a tecnologia </li></ul></ul>
    32. 32. Aptana Studio
    33. 33. Desenvolvendo Web Widgets no Emulador
    34. 34. Desenvolvendo Web Widgets no Emulador
    35. 35. Adicionando Conteúdo Interativo <ul><li>SVG </li></ul><ul><li><object data=&quot;resources/gnu.svg&quot; width=&quot;120&quot; height=&quot;120&quot; type=&quot;image/svg+xml&quot;></object> </li></ul><ul><li><embed src=&quot;resources/gnu.svg&quot; width=&quot;120&quot; height=&quot;120&quot; type=&quot;image/svg+xml&quot; /> </li></ul><ul><li>Flash Lite </li></ul><ul><li><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;> </li></ul><ul><li><param name=&quot;allowScriptAccess&quot; value=&quot;sameDomain&quot; /> </li></ul><ul><li><param name=&quot;movie&quot; value=&quot;MyFlash.swf&quot; /> </li></ul><ul><li><param name=&quot;loop&quot; value=&quot;false&quot; /> </li></ul><ul><li><param name=&quot;menu&quot; value=&quot;false&quot; /> </li></ul><ul><li><param name=&quot;quality&quot; value=&quot;high&quot; /> </li></ul><ul><li><param name=&quot;wmode&quot; value=&quot;opaque&quot; /> </li></ul><ul><li><param name=&quot;bgcolor&quot; value=&quot;#ffffff&quot; /> </li></ul><ul><li><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; /> </li></ul><ul><li></object> </li></ul>
    36. 36. Introdução a API’s WRT
    37. 37. Objeto Widget <ul><li>Módulo embutido do Widget, acessado através das variáveis widget ou window.widget </li></ul><ul><li>Widget methods </li></ul><ul><li>openURL(String:url) </li></ul><ul><li>setPreferenceForKey(String:preference, String:key) </li></ul><ul><li>preferenceForKey(String:key) </li></ul><ul><li>prepareForTransition(String:transitionState) </li></ul><ul><li>performTransition(void) </li></ul><ul><li>setNavigationEnabled(Boolean:flag) </li></ul><ul><li>openApplication(Hex:Uid, String:param) </li></ul><ul><li>setDisplayLandscape(void) </li></ul><ul><li>setDisplayPortrait(void) </li></ul><ul><li>• Widget properties </li></ul><ul><li>identifier [readonly, String] </li></ul><ul><li>onshow[assigned callback function] </li></ul><ul><li>onhide[assigned callback function] </li></ul><ul><li>isrotationsupported[readonly, Booloean] </li></ul>
    38. 38. Objeto Widget function manipularTela() { var h = window.screen.height; var w = window.screen.width; if (h < w) widget.setDisplayLanscape(); else widget.setDisplayPortrait(); }
    39. 39. Objeto Menu <ul><li>É uma extensão do objeto widget </li></ul><ul><li>Provê uma interface para manipular o menu de opções e softkeys de um widget </li></ul><ul><li>Menu methods </li></ul><ul><li>append(MenuItemmenuItem) </li></ul><ul><li>remove(MenuItemmenuItem) </li></ul><ul><li>getMenuItemById(Integer:id) </li></ul><ul><li>getMenuItemByName(String:label) </li></ul><ul><li>setRightSoftkeyLabel(String:label, function:callbackfunction) </li></ul><ul><li>showSoftkeys(void) </li></ul><ul><li>hideSoftkeys(void) </li></ul><ul><li>clear(void) </li></ul><ul><li>Menu properties </li></ul><ul><ul><li>onShow[assigned callback function] </li></ul></ul>
    40. 40. Objeto MenuItem <ul><li>Provê uma interface para criar itens de menu </li></ul><ul><li>Metódos do Menu Item </li></ul><ul><li>new MenuItem(String:label, Integer:id) </li></ul><ul><li>append(MenuItem:childMenuItem) </li></ul><ul><li>remove(MenuItem:childMenuItem) </li></ul><ul><li>replace(MenuItem:oldMenuItem, MenuItem:newMenuItem) </li></ul><ul><li>setDimmed(Boolean:flag) </li></ul><ul><li>Propriedades do Menu Item </li></ul><ul><ul><li>onSelect [assigned callback function] </li></ul></ul>
    41. 41. Objeto MenuItem function createMenu { var settings = new MenuItem(‘Settings’, 10); settings.onSelect = showSettings; window.menu.append(settings); } function showSettings(id) { document.getElementById(‘setting’).style.display = ‘block’; }
    42. 42. SystemInfo Service API <ul><li>SystemInfo service API é um plugin Netscape </li></ul><ul><ul><li>Subconjunto de propriedades do sistema </li></ul></ul><ul><ul><li>Memória, rede, status da bateria, etc. </li></ul></ul><ul><li>O plugin SystemInfo Service é carregado via o elemento <embed> do HTML </li></ul><ul><li><embed type=&quot;application/x-systeminfo-widget&quot; hidden=&quot;yes&quot;> </embed> </li></ul><ul><li>SystemInfo service não é carregado no contexto do Browser </li></ul>
    43. 43. SystemInfo Service API <ul><li>Power properties </li></ul><ul><ul><li>chargelevel [readonly, int] </li></ul></ul><ul><ul><li>chargerconnected [readonly, int] </li></ul></ul><ul><ul><li>onchargelevel [writeonly, function] </li></ul></ul><ul><ul><li>onchargerconnected [writeonly, function] </li></ul></ul><ul><li>Network properties </li></ul><ul><ul><li>signalbars [readonly, int] </li></ul></ul><ul><ul><li>signalstrength [readonly, int] </li></ul></ul><ul><ul><li>networkname [readonly, string] </li></ul></ul><ul><ul><li>registrationstatus [readonly, int] </li></ul></ul><ul><ul><li>onsignalstrength [assigned callback function] </li></ul></ul><ul><ul><li>onregistrationstatus [assigned callback function] </li></ul></ul>
    44. 44. SystemInfo Service API <ul><li>Light methods </li></ul><ul><ul><li>lighton(Int:lighttarget, Int:duration, Int:intensity, Int:fadein) </li></ul></ul><ul><ul><li>lightblink(Int:lighttarget, Int:duration, Int:onduration, Int:offduration, Int:intensity) </li></ul></ul><ul><ul><li>lightoff(Int:lighttarget, Int:duration, Int:fadeout) </li></ul></ul><ul><li>Light properties </li></ul><ul><ul><li>lightminintensity [readonly, Int] </li></ul></ul><ul><ul><li>lightmaxintensity [readonly, Int] </li></ul></ul><ul><ul><li>lightdefaultintensity [readonly, Int] </li></ul></ul><ul><ul><li>lightinfiniteduration [readonly, Int] </li></ul></ul><ul><ul><li>lightmaxduration [readonly, Int] </li></ul></ul><ul><ul><li>lightdefaultcycletime [readonly, Int] </li></ul></ul><ul><ul><li>lighttargetprimarydisplayandkeyboard [readonly, Int] </li></ul></ul><ul><ul><li>lighttargetsystem [readonly, Int] </li></ul></ul>
    45. 45. SystemInfo Service API <ul><li>Vibra methods </li></ul><ul><ul><li>startvibra(Integer:duration, Integer:intensity) </li></ul></ul><ul><ul><li>stopvibra(void) </li></ul></ul><ul><ul><li>Vibra properties </li></ul></ul><ul><ul><li>vibraminintensity [readonly, Integer] </li></ul></ul><ul><ul><li>vibramaxintensity [readonly, Integer] </li></ul></ul><ul><ul><li>vibramaxintensity [readonly, Integer] </li></ul></ul><ul><ul><li>vibrasettings [readonly, Integer] </li></ul></ul><ul><li>Beep methods </li></ul><ul><li>beep(Integer:frequency, Integer:duration) </li></ul><ul><li>Memory properties </li></ul><ul><ul><li>totalram [readonly, Integer] </li></ul></ul><ul><ul><li>freeram [readonly, Integer] </li></ul></ul>
    46. 46. SystemInfo Service API File system methods drivesize(String:drive) drivefree(String:drive) File system properties drivelist [readonly, String] Language properties language [readonly, String]
    47. 47. Segurança nos Widgets
    48. 48. Visão Geral <ul><li>Ao contrário dos arquivos SIS, Widgets não precisam ser assinados. </li></ul><ul><li>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 </li></ul><ul><li>Widgets acessam a rede através do Web Browser S60. </li></ul><ul><li>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></ul>
    49. 49. Política de Segurança WRT 1.1 JavaScript Service API Capability SystemInfo ReadUserData, Location Messaging ReadUserData, WriteUserData, NetworkServices Logging ReadUserData, WriteUserData Location Location Landmarks ReadUserData, WriteUserData Contacts ReadUserData, WriteUserData Calender ReadUserData, WriteUserData Application Manager ReadUserData
    50. 50. Obrigado!

    ×