Este documento fornece informações sobre como desenvolver widgets para dispositivos móveis e participar no concurso de widgets da TMN. Ele explica o que são widgets web, como usar o portal SAPO Widgets para desenvolver e submeter widgets, e fornece exemplos de widgets bem-sucedidos.

1. Portal SAPO Widget Como desenvolver um widget... … e ganhar prémios … e passar um bom bocado José da Mata Fernandes [email_address]

2. Programa Concurso de widgets da TMN

3. O que é um widget Web

4. Portal SAPO Widgets

5. Concurso de widgets TMN http://developers.tmn.pt/

6. Prémios! Computadores Macintosh

7. Guitarras eléctricas

8. Telemóveis

9. Muitos outros...

10. Como participar Cumprir as regras do concurso

11. Desenvolver widgets para telemóvel Nokia WRT Widgets, Samsung Widgets, Windows Mobile 6.5 Widgets

12. No portal SAPO Widgets ou utilizando os SDKs dos fabricantes Utilizar o portal SAPO Widgets para submeter o widget a concurso

13. Cross your fingers!

14. Como participar Ter uma “grande ideia” Arranjar coragem... … vontade de aprender Desenvolver o Widget Submeter para concurso

15. Exemplos de widgets Utilidades Conversor de moedas; calculadoras; informações sobre tempo, trânsito, mercados financeiros; ToDo lists. Mapas Pontos de interesse; guias da cidade. Notícias, jornal Agregador de jornais online, blog e outras fontes de media social. Pessoal As minhas fotos/vídeos, alertas de email/mensagem privada, os meus tweets Jogos

16. Coisas sem sentido (nonsense!)... … mas que de alguma forma as pessoas gostam de instalar

17. Exemplos de widgets

18. Para mais informações Portal do concurso de widgets da TMN http://developers.tmn.pt/concurso [email_address]

19. Widgets Web … O que é um Widget Web

20. Widget Web Não são widgets Web : Componente de interface gráfica (GUI Widget)

21. Portlet, fragmento para composição de “portais empresariais”: Código gerado no servidor, especificações abertas, repositórios de widget

22. Widget Web Também não são widgets Web: Java applets, componentes Flash, ActiveX control

23. Mobile Apps Aplicações para iPhone, Android ou Blackberry

24. Widgets Web Widgets em customized startup-pages Ex: Netvibes, iGoogle.

25. Widgets Web Widgets para desktop Ex: Opera Widgets, iGoogle gadgets, Windows Live! gadgets, Yahoo! widgets, Apple Dashboard widgets.

26. Widgets Web Widgets para telemóvel Ex: Nokia WRT Widgets (1.0 e 1.1), Samsung TouchWiz Widgets, Windows Mobile 6.5 Widgets.

27. Widgets Web Tecnicamente, um widget Web é uma “pequena” página Web... X?HTML[4|5], JavaScript, CSS[2|3], resources

28. AJAX, APIs DOM, Eventos Host Runtime Environment HTTP URI Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CSS Resources

29. Widgets Web … em algumas plataformas, são fornecidas APIs adicionais... APIs para acesso à lista de contacto, câmera, Geolocalização, etc;

30. Componentes UI para menus de contexto ou docking

31. Mecanismo de proxy para operações desligadas. Host Runtime Environment HTTP URI Resources Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CSS Caching / Proxy Widget API UI Controls Metadata API Packaging

32. Widgets Web Propriedades desejáveis Simplicidade, User engagement, Cross platform, Performance.

33. Facilidade em serem encontradas App stores, catálogos

34. Widgets Web Componentes do widget Documento (XHTML, HTML4, HTML5)

35. Templating

36. Widgets Web Componentes do widget Estilos (CSS2, CSS3)

37. Apresentação do widget

38. Widgets Web Componentes do widget Código (JavaScript)

39. Motor do widget Widget load

40. Widget configuration

41. Widget data (AJAX)

42. Widget render (HTML DOM API)

43. Widget lifecycle (HTML DOM Events) Eventos de UI, setTimeout, AJAX Frameworks JavaScript UWA, jQuery, Prototype.js

45. Widgets Web Componentes do widget Descrição do widget Título, descrição, versão, autor, Icon, … Ficheiros do widget Imagens, flash, vídeo, documentos, …

46. Widgets Web W3C Widgets 1.0 - http://www.w3.org/TR/widgets/ Utilizado como base para o modelo de widget de várias plataformas: Opera Widgets, Nokia WRT Widgets, Samsung Widgets, Windows Mobile Widget Define: Packaging

47. Configuration Document (confix.xml)

48. Localization

49. widget API

50. Widgets Web W3C Widgets 1.0

51. SAPO Widgets Portal http://widgets.sapo.pt/

52. SAPO Widgets Catálogo (App Store)

53. Developers

54. Página de Widgets

55. SAPO Widgets – Catálogo Listagem de widgets Widgets em destaque

56. Widgets por plataformas Nokia WRT (1.0 e 1.1), Samsung, Windows Mobile 6.5, Opera Widgets, Netvibes e Web Widgets por categorias Úteis, desporto, entretenimento, finanças, notícias, social & comunicação, outras Widgets a concurso (TMN)

58. SAPO Widgets – Catálogo Instalação de Widgets Mobile Download e envio por SMS (para TMN) Web Instalar na página e colocar no blog (snippet) Opera Link

60. SAPO Widgets – Developer A minha conta Alguns dados pessoais Nickname, Nome completo e email de contacto

62. SAPO Widgets - Developer Adicionar Widgets Importar widget já desenvolvido e empacotado segundo a plataforma Nokia WRT, Samsung e Windows Mobile 6.5

63. Verificação e importação automática de metadata do widget Título, descrição, versão, Icon, etc Podem ser utilizados os SDK (emulador) dos fabricantes e mais tarde importar o widget na plataforma Criar novo widget Widget vazio pode ser totalmente construído na plataforma

66. SAPO Widgets – Developer Os meus widgets Listagem de widgets desenvolvidos pelo programador

67. Eliminar, Editar, Instalar (semelhante ao catálogo)

68. Submeter para catálogo Sujeito a workflow de aprovação Submeter para o concurso da TMN

70. SAPO Widgets – Developer Editar Widget Informação básica Título, descrição, versão, actualizações, Icon, RichIcon, Thumbnail, categorias, plataformas. “Testado em” para cada plataforma móvel Parâmetros de configuração Passar variáveis para dentro do código do widget XHTML (ou HTML[4|5])

71. CSS Externos e editor de código

73. SAPO Widgets Developer Editar Widget JavaScript Externos, editor de código e framework

74. Podem ser utilizados frameworks JavaScript, ex: jQuery, prototype.js, MooTools, outros

75. JavaScript compilers? Script# (C#), Google GWT (Java), RubyJS (Ruby) Ficheiros (Resources) Painel de upload de ficheiros Up to 3072Kb Listagem de ficheiros (com token {__WIDGET_BASE__})

77. SAPO Widgets – Developer Ferramentas de desenvolvimento (IDE) Editor de código com syntax highlight e identação E substituição de tokens {__TOKEN_NAME__} Preview no Browser Outras que podem ser utilizadas: Utilização do JSLint para verificação de qualidade do JavaScript

78. Utilização do Firebug, com Yslow (análise de código)

79. HTML Tidy e validation. CSS Validation

80. Utilização de emuladores dos fabricantes

82. SAPO Widget – Developer Documentação

83. Exemplos instaláveis

84. Referência para FAQ do concurso

85. Exemplo Whack-em-All SAPO

86. Links Úteis Concurso TMN Widgets: http://developers.tmn.pt/

87. http://widgets.sapo.pt/ SDKs/Emuladores: Nokia WRT Widgets: http://3155.sl.pt

88. Samsung Widgets: http://3156.sl.pt

89. Windows Mobile Widgets: http://3157.sl.pt Desenvolvimento JSLint: http://www.jslint.com/

90. Firebug: http://getfirebug.com/

91. YSlow: http://developer.yahoo.com/yslow/

92. W3C Validator: http://validator.w3.org/

93. Fim Questões?