TMN

developers.tmn.pt

Manual e Formação

tmn

Formação

Em colaboração com o SAPO,a TMN irá realizar algumas actividades de formação para quem quiser aprender a desenvolver widgets. Estas formações serão livres de custos e de obrigações e deverão decorrer em Entrecampos, Lisboa, no edifício Marconi. As mesmas serão anunciadas na página principal deste sítio e listadas nesta página.

Best Practices para Desenvolvimento de Widgets

Pedro Cardoso

26 de Maio 2010, de manhã.

Pedro Cardoso

Diferenças entre web e mobile, coisas que funcionam num lado e se tornam um desastre no outro, cuidados especiais a ter quando se lida com dispositivos móveis e ecrãs mais reduzidos e o que evitar a nível de JavaScript, HTML e CSS.

O panorama actual das implementações de motores de widget, as diferentes resoluções dos terminais, os vários motores de rendering e capacidade de acesso ao hardware para melhor integração com a plataforma.

40 lugares disponíveis

Introdução ao JavaScript

Cládio Gamboa

19 de Maio 2010, de manhã.

Cláudio Gamboa

• Variáveis e tipos de variáveis.
• Funções.
• Métodos para variáveis.
• Introdução a DOM e eventos.

Como fazer um widget

José Fernandes

12 de Maio 2010, de manhã.

José da Mata Fernandes

• Anatomia de um widget, tecnologias necessárias e tecnologias úteis.
• Plataforma SAPO Widgets, SDKs oficiais e como desenvolver um widget de raíz.
• Catálogo, ambientes de desenvolvimento, configuração de um widget e muito mais.
• Todas as bases necessárias para participar no Concurso de Widgets TMN.

Manual

Tecnologias utilizadas para desenvolver os widgets

Os widgets para as plataformas aceites a concurso são desenvolvidos com tecnologias Web e têm três componentes: XHTML, CSS e JavaScript. O XHTML define a estrutura inicial do widget, o CSS a apresentação e o JavaScript o comportamento, como por exemplo o acesso aos dados (provenientes de Feeds ou APIs) e a resposta dos eventos do widget e da interacção com o utilizador. O JavaScript também pode ser utilizado para definir a estrutura do widget, já que grande parte do seu conteúdo depende dos dados e das respostas aos eventos. Adicionalmente, poderão ser inseridos objectos flash dentro do XHTML.

A plataforma de desenvolvimento do SAPO Widgets fornece três editores de código onde o programador insere separadamente as componentes XHTML, CSS e JavaScript do widget.

Grande parte do desenvolvimento do widget é efectuado na componente de JavaScript. A primeira decisão que o programador deverá tomar é se vai utilizar a framework UWA [Ver documentação sobre UWA].

Para programar a componente JavaScript do widget, o programador pode incluir bibliotecas e ficheiros com funções utilizadas para desenvolvimento web. Por exemplo, pode utilizar as frameworks jQuery, Prototype ou MooTools, desde que tenha em conta possíveis incompatibilidades entre as bibliotecas que inclui e a framework UWA (caso esteja a utilizar).

O SAPO Widgets suporta a distribuição de widgets para vários tipos de dispositivos móveis. Portanto, o programador pode escolher utilizar objectos e funções JavaScript disponíveis apenas para determinadas gamas de dispositivos. Estes objectos e funções são distribuídos pelas marcas e podem ser incluídos como bibliotecas externas.

Modelos de dispositivos

A plataforma de desenvolvimento do SAPO Widgets suporta a distribuição para os seguintes modelos de dispositivos móveis:

Tamanho do ecrã

Devido à diversidade de dispositivos móveis no mercado que suportam as tecnologias descritas, não é possível determinar à partida quais as dimensões do ecrã do terminal móvel onde o Widget será executado.

Todas as plataformas suportadas pelo SAPO Widgets obrigam, no ficheiro de configuração do widget, que se defina a dimensão da aplicação.

Para que o widget desenvolvido tenha um comportamento uniforme, tendo em conta as diferenças nas dimensões dos dispositivos móveis em que eventualmente poderá vir a ser executado, ao desenhar o layout, o programador deverá utilizar dimensões dinâmicas através do uso de percentagens na CSS).

Funcionalidades proprietárias

Tendo em conta a gama de dispositivos móveis que o programador decide suportar, é possível tirar proveito de algumas das suas características nativas.

Exemplos:

  • Calendário - aceder ao calendário do dispositivo móvel.
  • Contactos - aceder aos contactos do dispositivo móvel.
  • Câmara - utilizar a câmara instalada no dispositivo móvel.
  • GEO Location - aceder à localização geográfica do dispositivo móvel.
  • Accelerometer - obter a orientação e inclinação do dispositivo móvel.
  • Logging - obter os logs armazenados no dispositivo móvel.
  • Sensors - obter dados de sensores disponíveis, como, por exemplo, luminosidade.
  • Multitouch - obter dados sobre a interacção do utilizador com o ecrã do dispositivo.
  • UI - utilizar áreas da interface de utilizador do dispositivo móvel, como menus de contexto ou a dock.
  • System information - obter informação sobre a bateria, rede, toques, etc.

APIs proprietárias dos dispositivos móveis

Para que a aplicação possa tirar partido das funcionalidades de um determinado dispositivo, pode incluir as bibliotecas JavaScript disponibilizadas pelo fabricante. Mas, ao utilizar objectos ou funções JavaScript proprietárias e que se referem a APIs específicas de uma gama de dispositivos, deve ter em conta que o widget apenas poderá ser executado nos dispositivos correspondentes.

Para tirar partido de objectos ou funções JavaScript proprietárias semelhantes do ponto de vista da funcionalidade, mas de diferentes plataformas, deverá criar um widget para cada uma delas, copiar todo o código que é comum e escrever o código que é específico, tendo em conta os objectos e funções definidas pela respectiva plataforma.

Em determinados casos, é possível detectar, no ambiente de execução, a existência de certos objectos JavaScript que indicam a plataforma que se encontra em execução. Nesses casos, é possível desenvolver o mesmo widget de modo a que suporte várias plataformas, detectando a plataforma de execução e executando os respectivos métodos.

Nokia, modelos Symbian OS S60 3ed ou superior (WRT Widgets 1.0 e WRT Widgets 1.1)

Existem dois standard:

  • WRT 1.0, que está disponivel para Nokia S60 da terceira edição ou superior;
  • WRT 1.1, disponível para a quinta edição ou superior.

Ver a documentação em: http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-65AAF569-D347-462B-B59A-9D7CA184AB9C.html

Todos os dispositivos móveis que suportam WRT 1.1 suportam também WRT 1.0. A diferença entre os dois está no acesso às funções e objectos nativos:

WRT 1.0

WRT 1.1

Platform Services 1.0 JavaScript API reference
Platform Services 2.0 JavaScript API reference

É possível detectar o suporte de WRT 1.0 e WRT 1.1 na execução da aplicação, testando a existência dos objectos JavaScript 'widget' e 'device'.

Exemplo:

if (typeof window.widget !== 'undefined') {
  // WRT 1.0 e WRT 1.1
}
if (typeof window.device !== 'undefined') { 
  // WRT 1.1
}

O browser dos modelos S60 da Nokia foi desenvolvido pela Nokia e o motor de rendering é
baseado no Webkit da Apple. Por isso, os widgets deverão ser testados no browser Safari.

Samsung, modelos com interface TouchWiz (Samsung Widgets)

O fabricante de telemóveis Samsung oferece um SDK e ambiente de desenvolvimento para Mobile Widgets. Os Widgets Samsung correm em todos os equipamentos da Samsung que suportam a interface TouchWiz.

Exemplos de modelos: Omnia [SGH-i900], Omnia II [GT-i8000], Jet [GT-S8000], Star [GT-S5230].

A Samsung fornece um conjunto de bibliotecas JavaScript que definem uma framework JavaScript para o desenvolvimento de Widgets nos seus dispositivos móveis. Estas bibliotecas são distribuidas num ficheiro zip juntamente com outros ficheiros, que definem a base de um Widget Samsung. (Ver "The Common Library" http://innovator.samsungmobile.com/down/cnts/toolSDK.detail.view.do?platformId=12&cntsId=4964)
Todos estes ficheiros podem ser inseridos na plataforma de SAPO Widgetse constituir a base de um novo projecto de Widget.

Não é, no entanto, necessária a utilização da framework acima descrita para desenvolver para estes dispositivos.

A API fornecida pela Samsung encontra-se descrita em: http://innovator.samsungmobile.com/down/cnts/toolSDK.detail.view.do?platformId=12&cntsId=5380

Suporta:

  • Localização
  • Estado da rede (network status)
  • Redimensionamento da janela do Widget
  • Notificação de erros
  • Armazenamento de parâmetros do Widget

É possível detectar o ambiente de execução JavaScript do widget para os terminais Samsung.

Exemplo:

if (typeof window.widget !== 'undefined' && typeof window.widget.sysInfo != 'undefined') {
  // Samsung widget
}

Nota: os telemóveis da Samsung utilizam combinações diferentes de sistema operativo e browser.

  • NetFront (ACCESS), para alguns Samsung Handset Platform (SHP)
  • Opera, para Windows Mobile devices
  • Dolfin (WebKit), para alguns SHP devices

O código deverá ser testado nos diferentes dispositivos.

Modelos Windows Mobile 6.5 ou superior (Windows Mobile Widgets)

A API dos Windows Mobile Widgets (6.5 e superior) permite o acesso a algumas funções proprietárias dos respectivos dispositivos móveis.

A API está descrita em: http://msdn.microsoft.com/en-us/library/dd721906.aspx

Suporta as seguintes funcionalidades:

  • Orientação do ecrã
  • Localização
  • Estado da bateria
  • Estado da rede
  • UI (menus de contexto)
  • Armazenamento de parâmetros do widget

É possível detectar o ambiente de execução JavaScript do widget para os terminais Windows Mobile 6.5.

Exemplo:

if (typeof SystemState !== 'undefined') {
  // Windows Mobile 6.5
}

O browser para os modelos Windows Mobile 6.5 é o IE Mobile, que é baseado no IE6.

Modelos mais Populares para as Plataformas a Concurso

Modelo Plataforma
Samsung SGH-S5230 (TMN STAR) Samsung Widgets
Nokia 5530 Nokia WRT 1.1
Nokia N95 Nokia WRT 1.0
Nokia 5320 Nokia WRT 1.0
Nokia 5800 Nokia WRT 1.1
Nokia E71 Nokia WRT 1.0
Nokia E66 Nokia WRT 1.0
Samsung SGH-F480 Samsung Widgets
Nokia N97 Nokia WRT 1.1
Nokia 6210 Nokia WRT 1.0
Nokia N95 8GB Nokia WRT 1.0
Samsung SGH-S8000 (Jet) Samsung Widgets
Nokia N82 Nokia WRT 1.0
Bluebelt II Windows Mobile Widgets
Nokia N96 Nokia WRT 1.0
Silverbelt Windows Mobile Widgets
Nokia 6700 Nokia WRT 1.0
Samsung M5650 Lindy Samsung Widgets
Nokia N86 Nokia WRT 1.0
Nokia 5630 Xpm Nokia WRT 1.0
Samsung i8000 OMNIA II Windows Mobile Widgets
Nokia E75 Nokia WRT 1.0
Nokia E63 Nokia WRT 1.0
Nokia E90 Nokia WRT 1.0
Nokia E52 Nokia WRT 1.0
Samsung B7300 Omnia lite Windows Mobile Widgets
Nokia N85 Nokia WRT 1.0
Samsung SGH-S8300 Samsung Widgets
Nokia E72 Nokia WRT 1.0
Nokia 6710 Navigator Nokia WRT 1.0
Nokia 5730 Nokia WRT 1.0
Nokia E55 Nokia WRT 1.0
Nokia 6720 Classic Nokia WRT 1.0
Nokia 5230 Nokia WRT 1.1
Nokia 6650 Nokia WRT 1.0
Nokia 6730 Nokia WRT 1.0
Samsung S7070 Samsung Widgets
Nokia 6788 Nokia WRT 1.0
Nokia N78 Nokia WRT 1.0
Nokia C5-00 Nokia WRT 1.0
Nokia 5235 Nokia WRT 1.1
Nokia X6 Nokia WRT 1.1
Nokia 5730 XpressMusic Nokia WRT 1.0
NAVEGAÇÃO
Home Concurso Manual e Formação Serviços e API'S Widgets Regulamento FAQ
COMUNIDADE
facebook linked in twitter
sapo.pt