Introducing Mobile Development for Web Developers
Upcoming SlideShare
Loading in...5
×
 

Introducing Mobile Development for Web Developers

on

  • 2,416 views

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.)

Statistics

Views

Total Views
2,416
Slideshare-icon Views on SlideShare
2,411
Embed Views
5

Actions

Likes
1
Downloads
28
Comments
0

1 Embed 5

http://www.slideshare.net 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Introducing Mobile Development for Web Developers Introducing Mobile Development for Web Developers Presentation Transcript

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