Portal SAPO Widget Como desenvolver um widget... … e ganhar prémios … e passar um bom bocado José da Mata Fernandes [email...
Programa <ul><li>Concurso de widgets da TMN
O que é um widget Web
Portal SAPO Widgets </li></ul>
Concurso de widgets TMN <ul><li>http://developers.tmn.pt/ </li></ul>
Prémios! <ul><li>Computadores Macintosh
Guitarras eléctricas
Telemóveis
Muitos outros... </li></ul>
Como participar <ul><li>Cumprir as regras do concurso
Desenvolver widgets para telemóvel </li><ul><li>Nokia WRT Widgets, Samsung Widgets, Windows Mobile 6.5 Widgets
No portal SAPO Widgets ou utilizando os SDKs dos fabricantes </li></ul><li>Utilizar o portal SAPO Widgets para submeter o ...
Cross your fingers! </li></ul>
Como participar Ter uma “grande ideia” Arranjar coragem... … vontade de aprender Desenvolver o Widget Submeter para concu...
Exemplos de widgets <ul><li>Utilidades </li><ul><li>Conversor de moedas; calculadoras; informações sobre tempo, trânsito, ...
Coisas sem sentido (nonsense!)... </li><ul><li>… mas que de alguma forma as pessoas gostam de instalar </li></ul></ul>
Exemplos de widgets
Para mais informações Portal do concurso de widgets da TMN http://developers.tmn.pt/concurso [email_address]
Widgets Web … O que é um Widget Web
Widget Web <ul><li>Não são widgets Web : </li><ul><li>Componente de interface gráfica (GUI Widget)
Portlet, fragmento para composição de “portais empresariais”: </li><ul><li>Código gerado no servidor, especificações abert...
Widget Web <ul><li>Também não são widgets Web: </li><ul><li>Java applets, componentes Flash, ActiveX control
Mobile Apps </li><ul><li>Aplicações para iPhone, Android ou Blackberry </li></ul></ul></ul>
Widgets Web <ul><li>Widgets em customized startup-pages </li><ul><li>Ex: Netvibes, iGoogle. </li></ul></ul>
Widgets Web <ul><li>Widgets para desktop </li><ul><li>Ex: Opera Widgets, iGoogle gadgets, Windows Live! gadgets, Yahoo! wi...
Widgets Web <ul><li>Widgets para telemóvel </li><ul><li>Ex: Nokia WRT Widgets (1.0 e 1.1), Samsung TouchWiz Widgets, Windo...
Widgets Web <ul><li>Tecnicamente, um widget Web é uma “pequena” página Web... </li><ul><li>X?HTML[4|5], JavaScript, CSS[2|...
AJAX, APIs DOM, Eventos </li></ul></ul>Host Runtime Environment HTTP URI Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CS...
Widgets Web <ul><li>… em algumas plataformas, são fornecidas APIs adicionais... </li><ul><li>APIs para acesso à lista de c...
Componentes UI para menus de contexto ou docking
Mecanismo de proxy para operações desligadas. </li></ul></ul>Host Runtime Environment HTTP URI Resources Unicode URI DOM X...
Widgets Web <ul><li>Propriedades desejáveis </li><ul><li>Simplicidade, User engagement, Cross platform, Performance.
Facilidade em serem encontradas </li><ul><li>App stores, catálogos </li></ul></ul></ul>
Widgets Web <ul><li>Componentes do widget </li><ul><li>Documento (XHTML, HTML4, HTML5)
Templating </li></ul></ul>
Widgets Web <ul><li>Componentes do widget </li><ul><li>Estilos (CSS2, CSS3)
Apresentação do widget </li></ul></ul>
Widgets Web <ul><li>Componentes do widget </li><ul><li>Código (JavaScript)
Motor do widget </li><ul><li>Widget load
Widget configuration
Widget data (AJAX)
Widget render (HTML DOM API)
Widget lifecycle (HTML DOM Events) </li><ul><li>Eventos de UI, setTimeout, AJAX </li></ul></ul><li>Frameworks JavaScript <...
 
Widgets Web <ul><li>Componentes do widget </li><ul><li>Descrição do widget </li><ul><li>Título, descrição, versão, autor, ...
Widgets Web <ul><li>W3C Widgets 1.0 - http://www.w3.org/TR/widgets/ </li><ul><li>Utilizado como base para o modelo de w...
Configuration Document (confix.xml)
Localization
of 48

Concurso widgets da TMN

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 on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Concurso widgets da TMN

  • 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 <ul><li>Concurso de widgets da TMN
  • 3. O que é um widget Web
  • 4. Portal SAPO Widgets </li></ul>
  • 5. Concurso de widgets TMN <ul><li>http://developers.tmn.pt/ </li></ul>
  • 6. Prémios! <ul><li>Computadores Macintosh
  • 7. Guitarras eléctricas
  • 8. Telemóveis
  • 9. Muitos outros... </li></ul>
  • 10. Como participar <ul><li>Cumprir as regras do concurso
  • 11. Desenvolver widgets para telemóvel </li><ul><li>Nokia WRT Widgets, Samsung Widgets, Windows Mobile 6.5 Widgets
  • 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. Cross your fingers! </li></ul>
  • 14. Como participar Ter uma “grande ideia” Arranjar coragem... … vontade de aprender Desenvolver o Widget Submeter para concurso
  • 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. Coisas sem sentido (nonsense!)... </li><ul><li>… mas que de alguma forma as pessoas gostam de instalar </li></ul></ul>
  • 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 <ul><li>Não são widgets Web : </li><ul><li>Componente de interface gráfica (GUI Widget)
  • 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. Widget Web <ul><li>Também não são widgets Web: </li><ul><li>Java applets, componentes Flash, ActiveX control
  • 23. Mobile Apps </li><ul><li>Aplicações para iPhone, Android ou Blackberry </li></ul></ul></ul>
  • 24. Widgets Web <ul><li>Widgets em customized startup-pages </li><ul><li>Ex: Netvibes, iGoogle. </li></ul></ul>
  • 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. 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. 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. AJAX, APIs DOM, Eventos </li></ul></ul>Host Runtime Environment HTTP URI Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CSS Resources
  • 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. Componentes UI para menus de contexto ou docking
  • 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. Widgets Web <ul><li>Propriedades desejáveis </li><ul><li>Simplicidade, User engagement, Cross platform, Performance.
  • 33. Facilidade em serem encontradas </li><ul><li>App stores, catálogos </li></ul></ul></ul>
  • 34. Widgets Web <ul><li>Componentes do widget </li><ul><li>Documento (XHTML, HTML4, HTML5)
  • 35. Templating </li></ul></ul>
  • 36. Widgets Web <ul><li>Componentes do widget </li><ul><li>Estilos (CSS2, CSS3)
  • 37. Apresentação do widget </li></ul></ul>
  • 38. Widgets Web <ul><li>Componentes do widget </li><ul><li>Código (JavaScript)
  • 39. Motor do widget </li><ul><li>Widget load
  • 40. Widget configuration
  • 41. Widget data (AJAX)
  • 42. Widget render (HTML DOM API)
  • 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>
  • 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>
  • 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
  • 47. Configuration Document (confix.xml)
  • 48. Localization
  • 49. widget API </li></ul></ul></ul>
  • 50. Widgets Web <ul><li>W3C Widgets 1.0 </li></ul>
  • 51. SAPO Widgets Portal http://widgets.sapo.pt/
  • 52. SAPO Widgets <ul><li>Catálogo (App Store)
  • 53. Developers
  • 54. Página de Widgets </li></ul>
  • 55. SAPO Widgets – Catálogo <ul><li>Listagem de widgets </li><ul><li>Widgets em destaque
  • 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>
  • 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>
  • 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>
  • 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
  • 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>
  • 66. SAPO Widgets – Developer <ul><li>Os meus widgets </li><ul><li>Listagem de widgets desenvolvidos pelo programador
  • 67. Eliminar, Editar, Instalar (semelhante ao catálogo)
  • 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>
  • 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])
  • 71. CSS </li><ul><li>Externos e editor de código </li></ul></ul></ul>
  • 73. SAPO Widgets Developer <ul><li>Editar Widget </li><ul><li>JavaScript </li><ul><li>Externos, editor de código e framework
  • 74. Podem ser utilizados frameworks JavaScript, ex: jQuery, prototype.js, MooTools, outros
  • 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>
  • 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
  • 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 </li></ul></ul>
  • 82. SAPO Widget – Developer <ul><li>Documentação
  • 83. Exemplos instaláveis
  • 84. Referência para FAQ do concurso </li></ul>
  • 85. Exemplo Whack-em-All SAPO
  • 86. Links Úteis <ul><li>Concurso TMN Widgets: </li><ul><li>http://developers.tmn.pt/
  • 87. http://widgets.sapo.pt/ </li></ul><li>SDKs/Emuladores: </li><ul><li>Nokia WRT Widgets: http://3155.sl.pt
  • 88. Samsung Widgets: http://3156.sl.pt
  • 89. Windows Mobile Widgets: http://3157.sl.pt </li></ul><li>Desenvolvimento </li><ul><li>JSLint: http://www.jslint.com/
  • 90. Firebug: http://getfirebug.com/
  • 91. YSlow: http://developer.yahoo.com/yslow/
  • 92. W3C Validator: http://validator.w3.org/ </li></ul></ul>
  • 93. Fim Questões?

Related Documents