Best Practices in Widget Development
Examples and Counterexamples


Daniel Dahrendorf (IMC)

ROLE Developer Camp,
Lausanne...
Dr Stephen Dann from flickr.com   jbvkoos from flickr.com




23.08.2010                                       © www.role-...
DESIGN AND USABILITY



23.08.2010                   © www.role-project.eu
In General

• Focus on a single task
     – Give your end user a single functionality
• Own added Value
     – Do not crea...
Size of Widgets

• Use a standard height
• The widget should scale between 250px and 500px
     – Use a width of 100% for ...
Customization

• Let the user customize the widget
     – Color
     – Background
     – Content
• Provide always default ...
Use Space effectively

• Avoid scrollbars
• Use tabs
• Use paging




23.08.2010              © www.role-project.eu
User Account

• Content should be interesting even the user is not logged in
• State the benefits of creating an account
•...
DEVELOPMENT



23.08.2010          © www.role-project.eu
Development Environment

• Own Apache Shindig Server
     – A web application which can be run e.g.
       in a Apache Tom...
Development Environment

• Own Apache Shindig Server
     – A web application which can be run e.g.
       in a Apache Tom...
Using the features provided by the gadget API

• The Gadget and OpenSocial API provides a lot of useful
  features:
     –...
Selected Features:

• Tabs
     – Creates customizable tabs


• Setprefs
     – Allows setting of user preferences


• Pub...
makeRequest and the Same Origin Policy

• The gadget API provides a function to fetch
  HTML/XML/JSON content (OpenSocial ...
Caching Problems




• If you are using makeRequest() to fetch content that is
  updated more than once an hour, such as f...
Refreshing the Content Cache

• Solution: create a wrapper with a refresh interval

 function makeCachedRequest(url, callb...
Caching of external files

• Container caches:
     – JavaScript added with <script>
     – CSS added with <link>
     – C...
Loading JavaScript / CSS dynamically
                                                         http://www.bitsbythepound.co...
Performance

• Goal: Reduce size of the files and number of HTTP requests

• Minify JavaScript code
     – E.g. http://www...
Performance Testing and debugging

• Use e.g. the Firebug extension of Firefox for debugging and
  measuring the performan...
Conclusions

• Guidelines are helping to provide a user friendly interface
• Customizations allows users to personalize th...
ROLE ALLIANCE PROGRAM


                  What is the Alliance Program?
       A partner network of strategic users, vendo...
References

• http://www.google.com/webmasters/gadgets/guidelines.html
• http://www.seoish.com/how-to-internationalize-goo...
Upcoming SlideShare
Loading in...5
×

Best Practices in Widget Development - Examples and Counterexamples

3,006

Published on

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

No Downloads
Views
Total Views
3,006
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Best Practices in Widget Development - Examples and Counterexamples

  1. 1. Best Practices in Widget Development Examples and Counterexamples Daniel Dahrendorf (IMC) ROLE Developer Camp, Lausanne, Switzerland August 23, 2010 © www.role-project.eu
  2. 2. Dr Stephen Dann from flickr.com jbvkoos from flickr.com 23.08.2010 © www.role-project.eu
  3. 3. DESIGN AND USABILITY 23.08.2010 © www.role-project.eu
  4. 4. In General • Focus on a single task – Give your end user a single functionality • Own added Value – Do not create a Widget which requires a second widget • Self explanatory interface – There should be no need for help text or support 23.08.2010 © www.role-project.eu
  5. 5. Size of Widgets • Use a standard height • The widget should scale between 250px and 500px – Use a width of 100% for the main elements of the widget – Center elements • Use views – Canvas, home and profile views 23.08.2010 © www.role-project.eu
  6. 6. Customization • Let the user customize the widget – Color – Background – Content • Provide always default or sample values and include a “welcome mode” • Use the user preferences feature of Google Gadgets 23.08.2010 © www.role-project.eu
  7. 7. Use Space effectively • Avoid scrollbars • Use tabs • Use paging 23.08.2010 © www.role-project.eu
  8. 8. User Account • Content should be interesting even the user is not logged in • State the benefits of creating an account • Use OAuth if possible 23.08.2010 © www.role-project.eu
  9. 9. DEVELOPMENT 23.08.2010 © www.role-project.eu
  10. 10. Development Environment • Own Apache Shindig Server – A web application which can be run e.g. in a Apache Tomcat • OSDE – Eclipse plugin with built in Apache Shindig server • Google Gadget Editor – A Google gadget which provides an editor and the possibility to save the widgets at iGoogle 23.08.2010 © www.role-project.eu
  11. 11. Development Environment • Own Apache Shindig Server – A web application which can be run e.g. in a Apache Tomcat – Comfortable way to create complex interacting widgets 23.08.2010 © www.role-project.eu
  12. 12. Using the features provided by the gadget API • The Gadget and OpenSocial API provides a lot of useful features: – fetch social data – provide UI element – Get data from external sources • Only available for type=“html’’ widgets 23.08.2010 © www.role-project.eu
  13. 13. Selected Features: • Tabs – Creates customizable tabs • Setprefs – Allows setting of user preferences • Pubsub (OpenSocial 0.8 only) – Inter-widget-communication – Use OpenApp instead (http://code.google.com/p/open-app/) • Internationalization – Provides a mechanism to translate widgets 23.08.2010 © www.role-project.eu
  14. 14. makeRequest and the Same Origin Policy • The gadget API provides a function to fetch HTML/XML/JSON content (OpenSocial 0.8): gadgets.io.makeRequest(url, callback, opt_params) • As widgets run in iFrames this proxy approach allows to fetch data from other domains (same origin policy) • Other approaches to solve cross domain problems are: – JSONP (retrieving JSON via Script Tags) – PMRPC (http://code.google.com/p/pmrpc/) 23.08.2010 © www.role-project.eu
  15. 15. Caching Problems • If you are using makeRequest() to fetch content that is updated more than once an hour, such as feed data, you might not get the latest updates 23.08.2010 © www.role-project.eu
  16. 16. Refreshing the Content Cache • Solution: create a wrapper with a refresh interval function makeCachedRequest(url, callback, params, refreshInterval) { var timestamp = new Date().getTime(); var sep = "?"; if (refreshInterval && refreshInterval > 0) { timestamp = Math.floor(timestamp / (refreshInterval * 1000)); } if (url.indexOf("?") > -1) { sep = "&"; } url = [ url, sep, "nocache=", timestamp ].join(""); gadgets.io.makeRequest(url, callback, params); } 23.08.2010 © www.role-project.eu
  17. 17. Caching of external files • Container caches: – JavaScript added with <script> – CSS added with <link> – Content got using the gadget API • Further because of the widget infrastructure only absolute links are allowed • External files are needed if the widget becomes more complex 23.08.2010 © www.role-project.eu
  18. 18. Loading JavaScript / CSS dynamically http://www.bitsbythepound.com/include- 1. Determine the location of the xml external-javascript-and-css-files-with-a- google-wave-gadget-249.html function getModuleBase() { if (window.__moduleBase) return window.__moduleBase; if (_args){ var moduleBase = _args()['url']; moduleBase = moduleBase.substring(0, moduleBase.lastIndexOf('/') + 1); window.__moduleBase = moduleBase; return window.__moduleBase; } alert('Can not find module base. Gadget may not work properly.'); return ''; }; 2. Create mechanism for loading JS and CSS jQuery provides a cross-browser require script plugin (requireScript) 3. Load the js/css in gadget init function init() { var useCaching = false; addScript("js/default.js",useCaching); addStylesheet("css/style.css",useCaching); }; gadgets.util.registerOnLoadHandler(init); 23.08.2010 © www.role-project.eu
  19. 19. Performance • Goal: Reduce size of the files and number of HTTP requests • Minify JavaScript code – E.g. http://www.crockford.com/javascript/jsmin.html • Pack all stuff in one XML file – Suggestion of Google • Use the containers’ cache – gadgets.io.getProxyUrl • More sources for optimization: – http://code.google.com/intl/de-DE/apis/gadgets/docs/publish.html – http://wiki.opensocial.org/index.php?title=OpenSocial_Latency_Meas urement Maintainability VS. Performance? 23.08.2010 © www.role-project.eu
  20. 20. Performance Testing and debugging • Use e.g. the Firebug extension of Firefox for debugging and measuring the performance 23.08.2010 © www.role-project.eu
  21. 21. Conclusions • Guidelines are helping to provide a user friendly interface • Customizations allows users to personalize their widgets • An own Apache Shindig server can be used to develop interacting widgets • Using the Gadget API prevents to “reinvent the wheel” • Caching and cross domain problems can be handled with several methods • A widget can be optimized regarding its performance • Tools are available for debugging and performance measuring 23.08.2010 © www.role-project.eu
  22. 22. ROLE ALLIANCE PROGRAM What is the Alliance Program? A partner network of strategic users, vendors and other stakeholder Why should I become a member? As a member you have a lot of benefits e.g., access to our showcase platform, free visit of specific workshops, test of prototypes or attendance at Alliance Partner meetings How can I become part of the Alliance Program? Please register under http://www.roleproject.eu/AllianceProgram 23.08.2010 © www.role-project.eu
  23. 23. References • http://www.google.com/webmasters/gadgets/guidelines.html • http://www.seoish.com/how-to-internationalize-google- gadgets/ • Lal, R. and Chava, L. C. 2010 Developing Web Widget with Html, Css, JSON and Ajax: a Complete Guide to Web Widget. CreateSpace. • http://www.bitsbythepound.com/include-external-javascript- and-css-files-with-a-google-wave-gadget-249.html • http://code.google.com/intl/de/apis/gadgets/docs/remote- content.html 23.08.2010 © www.role-project.eu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×