Concurso widgets da TMN

2,416 views

Published on

Apresentação do concurso de widgets da TMN.
Apresentação do conceito de Web widget.

Desenvolver Web widgets no portal SAPO Widgets
http://widgets.sapo.pt/

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

No Downloads
Views
Total views
2,416
On SlideShare
0
From Embeds
0
Number of Embeds
866
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Concurso widgets da TMN

  1. 1. Portal SAPO Widget Como desenvolver um widget... … e ganhar prémios … e passar um bom bocado José da Mata Fernandes [email_address]
  2. 2. Programa <ul><li>Concurso de widgets da TMN
  3. 3. O que é um widget Web
  4. 4. Portal SAPO Widgets </li></ul>
  5. 5. Concurso de widgets TMN <ul><li>http://developers.tmn.pt/ </li></ul>
  6. 6. Prémios! <ul><li>Computadores Macintosh
  7. 7. Guitarras eléctricas
  8. 8. Telemóveis
  9. 9. Muitos outros... </li></ul>
  10. 10. Como participar <ul><li>Cumprir as regras do concurso
  11. 11. Desenvolver widgets para telemóvel </li><ul><li>Nokia WRT Widgets, Samsung Widgets, Windows Mobile 6.5 Widgets
  12. 12. No portal SAPO Widgets ou utilizando os SDKs dos fabricantes </li></ul><li>Utilizar o portal SAPO Widgets para submeter o widget a concurso
  13. 13. Cross your fingers! </li></ul>
  14. 14. Como participar Ter uma “grande ideia” Arranjar coragem... … vontade de aprender Desenvolver o Widget Submeter para concurso
  15. 15. Exemplos de widgets <ul><li>Utilidades </li><ul><li>Conversor de moedas; calculadoras; informações sobre tempo, trânsito, mercados financeiros; ToDo lists. </li></ul><li>Mapas </li><ul><li>Pontos de interesse; guias da cidade. </li></ul><li>Notícias, jornal </li><ul><li>Agregador de jornais online, blog e outras fontes de media social. </li></ul><li>Pessoal </li><ul><li>As minhas fotos/vídeos, alertas de email/mensagem privada, os meus tweets </li></ul><li>Jogos
  16. 16. Coisas sem sentido (nonsense!)... </li><ul><li>… mas que de alguma forma as pessoas gostam de instalar </li></ul></ul>
  17. 17. Exemplos de widgets
  18. 18. Para mais informações Portal do concurso de widgets da TMN http://developers.tmn.pt/concurso [email_address]
  19. 19. Widgets Web … O que é um Widget Web
  20. 20. Widget Web <ul><li>Não são widgets Web : </li><ul><li>Componente de interface gráfica (GUI Widget)
  21. 21. Portlet, fragmento para composição de “portais empresariais”: </li><ul><li>Código gerado no servidor, especificações abertas, repositórios de widget </li></ul></ul></ul>
  22. 22. Widget Web <ul><li>Também não são widgets Web: </li><ul><li>Java applets, componentes Flash, ActiveX control
  23. 23. Mobile Apps </li><ul><li>Aplicações para iPhone, Android ou Blackberry </li></ul></ul></ul>
  24. 24. Widgets Web <ul><li>Widgets em customized startup-pages </li><ul><li>Ex: Netvibes, iGoogle. </li></ul></ul>
  25. 25. Widgets Web <ul><li>Widgets para desktop </li><ul><li>Ex: Opera Widgets, iGoogle gadgets, Windows Live! gadgets, Yahoo! widgets, Apple Dashboard widgets. </li></ul></ul>
  26. 26. Widgets Web <ul><li>Widgets para telemóvel </li><ul><li>Ex: Nokia WRT Widgets (1.0 e 1.1), Samsung TouchWiz Widgets, Windows Mobile 6.5 Widgets. </li></ul></ul>
  27. 27. Widgets Web <ul><li>Tecnicamente, um widget Web é uma “pequena” página Web... </li><ul><li>X?HTML[4|5], JavaScript, CSS[2|3], resources
  28. 28. AJAX, APIs DOM, Eventos </li></ul></ul>Host Runtime Environment HTTP URI Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CSS Resources
  29. 29. Widgets Web <ul><li>… em algumas plataformas, são fornecidas APIs adicionais... </li><ul><li>APIs para acesso à lista de contacto, câmera, Geolocalização, etc;
  30. 30. Componentes UI para menus de contexto ou docking
  31. 31. Mecanismo de proxy para operações desligadas. </li></ul></ul>Host Runtime Environment HTTP URI Resources Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CSS Caching / Proxy Widget API UI Controls Metadata API Packaging
  32. 32. Widgets Web <ul><li>Propriedades desejáveis </li><ul><li>Simplicidade, User engagement, Cross platform, Performance.
  33. 33. Facilidade em serem encontradas </li><ul><li>App stores, catálogos </li></ul></ul></ul>
  34. 34. Widgets Web <ul><li>Componentes do widget </li><ul><li>Documento (XHTML, HTML4, HTML5)
  35. 35. Templating </li></ul></ul>
  36. 36. Widgets Web <ul><li>Componentes do widget </li><ul><li>Estilos (CSS2, CSS3)
  37. 37. Apresentação do widget </li></ul></ul>
  38. 38. Widgets Web <ul><li>Componentes do widget </li><ul><li>Código (JavaScript)
  39. 39. Motor do widget </li><ul><li>Widget load
  40. 40. Widget configuration
  41. 41. Widget data (AJAX)
  42. 42. Widget render (HTML DOM API)
  43. 43. Widget lifecycle (HTML DOM Events) </li><ul><li>Eventos de UI, setTimeout, AJAX </li></ul></ul><li>Frameworks JavaScript </li><ul><li>UWA, jQuery, Prototype.js </li></ul></ul></ul>
  44. 45. Widgets Web <ul><li>Componentes do widget </li><ul><li>Descrição do widget </li><ul><li>Título, descrição, versão, autor, Icon, … </li></ul><li>Ficheiros do widget </li><ul><li>Imagens, flash, vídeo, documentos, … </li></ul></ul></ul>
  45. 46. Widgets Web <ul><li>W3C Widgets 1.0 - http://www.w3.org/TR/widgets/ </li><ul><li>Utilizado como base para o modelo de widget de várias plataformas: </li><ul><li>Opera Widgets, Nokia WRT Widgets, Samsung Widgets, Windows Mobile Widget </li></ul><li>Define: </li><ul><li>Packaging
  46. 47. Configuration Document (confix.xml)
  47. 48. Localization
  48. 49. widget API </li></ul></ul></ul>
  49. 50. Widgets Web <ul><li>W3C Widgets 1.0 </li></ul>
  50. 51. SAPO Widgets Portal http://widgets.sapo.pt/
  51. 52. SAPO Widgets <ul><li>Catálogo (App Store)
  52. 53. Developers
  53. 54. Página de Widgets </li></ul>
  54. 55. SAPO Widgets – Catálogo <ul><li>Listagem de widgets </li><ul><li>Widgets em destaque
  55. 56. Widgets por plataformas </li><ul><li>Nokia WRT (1.0 e 1.1), Samsung, Windows Mobile 6.5, Opera Widgets, Netvibes e Web </li></ul><li>Widgets por categorias </li><ul><li>Úteis, desporto, entretenimento, finanças, notícias, social & comunicação, outras </li></ul><li>Widgets a concurso (TMN) </li></ul></ul>
  56. 58. SAPO Widgets – Catálogo <ul><li>Instalação de Widgets </li><ul><li>Mobile </li><ul><li>Download e envio por SMS (para TMN) </li></ul><li>Web </li><ul><li>Instalar na página e colocar no blog (snippet) </li></ul><li>Opera </li><ul><li>Link </li></ul></ul></ul>
  57. 60. SAPO Widgets – Developer <ul><li>A minha conta </li><ul><li>Alguns dados pessoais </li><ul><li>Nickname, Nome completo e email de contacto </li></ul></ul></ul>
  58. 62. SAPO Widgets - Developer <ul><li>Adicionar Widgets </li><ul><li>Importar widget já desenvolvido e empacotado segundo a plataforma </li><ul><li>Nokia WRT, Samsung e Windows Mobile 6.5
  59. 63. Verificação e importação automática de metadata do widget </li><ul><li>Título, descrição, versão, Icon, etc </li></ul><li>Podem ser utilizados os SDK (emulador) dos fabricantes e mais tarde importar o widget na plataforma </li></ul><li>Criar novo widget </li><ul><li>Widget vazio pode ser totalmente construído na plataforma </li></ul></ul></ul>
  60. 66. SAPO Widgets – Developer <ul><li>Os meus widgets </li><ul><li>Listagem de widgets desenvolvidos pelo programador
  61. 67. Eliminar, Editar, Instalar (semelhante ao catálogo)
  62. 68. Submeter para catálogo </li><ul><li>Sujeito a workflow de aprovação </li></ul><li>Submeter para o concurso da TMN </li></ul></ul>
  63. 70. SAPO Widgets – Developer <ul><li>Editar Widget </li><ul><li>Informação básica </li><ul><li>Título, descrição, versão, actualizações, Icon, RichIcon, Thumbnail, categorias, plataformas. </li><ul><li>“Testado em” para cada plataforma móvel </li></ul></ul><li>Parâmetros de configuração </li><ul><li>Passar variáveis para dentro do código do widget </li></ul><li>XHTML (ou HTML[4|5])
  64. 71. CSS </li><ul><li>Externos e editor de código </li></ul></ul></ul>
  65. 73. SAPO Widgets Developer <ul><li>Editar Widget </li><ul><li>JavaScript </li><ul><li>Externos, editor de código e framework
  66. 74. Podem ser utilizados frameworks JavaScript, ex: jQuery, prototype.js, MooTools, outros
  67. 75. JavaScript compilers? </li><ul><li>Script# (C#), Google GWT (Java), RubyJS (Ruby) </li></ul></ul><li>Ficheiros (Resources) </li><ul><li>Painel de upload de ficheiros </li><ul><li>Up to 3072Kb </li></ul><li>Listagem de ficheiros (com token {__WIDGET_BASE__}) </li></ul></ul></ul>
  68. 77. SAPO Widgets – Developer <ul><li>Ferramentas de desenvolvimento (IDE) </li><ul><li>Editor de código com syntax highlight e identação </li><ul><li>E substituição de tokens {__TOKEN_NAME__} </li></ul><li>Preview no Browser </li></ul><li>Outras que podem ser utilizadas: </li><ul><li>Utilização do JSLint para verificação de qualidade do JavaScript
  69. 78. Utilização do Firebug, com Yslow (análise de código)
  70. 79. HTML Tidy e validation. CSS Validation
  71. 80. Utilização de emuladores dos fabricantes </li></ul></ul>
  72. 82. SAPO Widget – Developer <ul><li>Documentação
  73. 83. Exemplos instaláveis
  74. 84. Referência para FAQ do concurso </li></ul>
  75. 85. Exemplo Whack-em-All SAPO
  76. 86. Links Úteis <ul><li>Concurso TMN Widgets: </li><ul><li>http://developers.tmn.pt/
  77. 87. http://widgets.sapo.pt/ </li></ul><li>SDKs/Emuladores: </li><ul><li>Nokia WRT Widgets: http://3155.sl.pt
  78. 88. Samsung Widgets: http://3156.sl.pt
  79. 89. Windows Mobile Widgets: http://3157.sl.pt </li></ul><li>Desenvolvimento </li><ul><li>JSLint: http://www.jslint.com/
  80. 90. Firebug: http://getfirebug.com/
  81. 91. YSlow: http://developer.yahoo.com/yslow/
  82. 92. W3C Validator: http://validator.w3.org/ </li></ul></ul>
  83. 93. Fim Questões?

×