Your SlideShare is downloading. ×
0
Widget Platform tear the Web apart and assemble the pieces together José da Mata Fernandes [email_address] http://jose.wrk...
Widget Platform <ul><li>What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development </li></ul>
Widget Platform <ul><li>What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development </li></ul>
What is a Web widget <ul><li>Essentially, a Web widget is a local HTML/CSS/JavaScript Web application </li><ul><li>Web Bro...
Examples
What is a Web widget <ul><li>Desired properties </li><ul><li>Simplicity, Reuse, User engagement, Remixability, Cross platf...
Widget Platform <ul><li>What is a Web widget
Widget Origins
SAPO Widgets Platform
Technical Details
UWA Widgets Development </li></ul>
Widget Origins <ul><li>From websites, keyword search, directory portals, ...
From wikis, weblogs, social media aggregation, social networks, ...
From Enterprise 2.0, mashups, real-time Web, semantic search?
Widgets are Web 1.0, 2.0 and 3.0. But are only really interesting since 2.0. </li></ul>2004 1995 5.5 2000 2002 2008 email ...
Widget Origins <ul><li>What have: </li><ul><li>HTML/JS Snippets, Portlets, Web parts, Flash Widgets, Mashups </li></ul><li...
First Widget ever... … the hit counter!
Others alike... Snippets <ul><li>Copy past HTML+Javascript snippet to website
Can have visitor state (cookies)
May have been impressive...
Simplicity </li></ul>
Portlets <ul><li>Pluggable, reusable component
Fragment of markup code for portal composition
Used in the late 90s:  </li><ul><li>Altavista, AOL, Excite and Yahoo! </li></ul><li>Now prepackaged in Enterprise Portal s...
Web part (WSS sharepoint) <ul><li>Windows Sharepoint services
Server side based
Output HTML
XML config and metadata
Maybe too much for a <p>Hello World</p>? </li></ul>
Portlets example (JSR) <ul><li>Java portlet specification JSR286
Server side based
Output HTML
XML config and metadata
Open specification based </li><ul><li>Reuse </li></ul></ul>
Media is Everything... Flash Widgets <ul><li>Flash (other media) object HTML reference
Multi-media based (why  always  the dark themes?)
Cross-browser (assuming user has the plugin...)
Advertising
User engagement </li></ul>
Mashup Remix the Web <ul><li>Combination – combine application data with external data
Aggregation – create information with the data
Visualization – explain complex information </li></ul>
Mashup technology <ul><li>Data format </li><ul><li>JSON, XML, YAML, CSV, </li></ul><li>Data API </li><ul><li>REST, SOAP, X...
Mobile Widgets <ul><li>Web Standards: W3C Widgets 1.0 based
Widget is downloaded and stored: </li><ul><li>Available for offline use </li></ul><li>Proprietary device APIs (camera, geo...
Desktop browsers are becoming boring: </li><ul><li>Android Webkit, Opera Mobile, Opera Mini, Netfront, Safari, Blackberry,...
Web widgets origins <ul><li>Snippets
Portlets
Flash Widgets (Silverlight, Adobe Air, etc)
Mashup
Upcoming SlideShare
Loading in...5
×

Widget Platform

6,249

Published on

Widget Platform. Tear the Web apart and assemble the pieces together.

Brief survey on Widget Technology; widget platform and repository architecture; and UWA widget tutorial.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,249
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
199
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Widget Platform"

  1. 1. Widget Platform tear the Web apart and assemble the pieces together José da Mata Fernandes [email_address] http://jose.wrkwrks.com www.twitter.com/josemf
  2. 2. Widget Platform <ul><li>What is a Web widget
  3. 3. Widget Origins
  4. 4. SAPO Widgets Platform
  5. 5. Technical Details
  6. 6. UWA Widgets Development </li></ul>
  7. 7. Widget Platform <ul><li>What is a Web widget
  8. 8. Widget Origins
  9. 9. SAPO Widgets Platform
  10. 10. Technical Details
  11. 11. UWA Widgets Development </li></ul>
  12. 12. What is a Web widget <ul><li>Essentially, a Web widget is a local HTML/CSS/JavaScript Web application </li><ul><li>Web Browser Environment </li></ul><li>Small piece of your site </li></ul>Host Runtime Environment HTTP URI Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CSS Resources
  13. 13. Examples
  14. 14. What is a Web widget <ul><li>Desired properties </li><ul><li>Simplicity, Reuse, User engagement, Remixability, Cross platform </li></ul><li>Where these properties may come from? </li></ul>
  15. 15. Widget Platform <ul><li>What is a Web widget
  16. 16. Widget Origins
  17. 17. SAPO Widgets Platform
  18. 18. Technical Details
  19. 19. UWA Widgets Development </li></ul>
  20. 20. Widget Origins <ul><li>From websites, keyword search, directory portals, ...
  21. 21. From wikis, weblogs, social media aggregation, social networks, ...
  22. 22. From Enterprise 2.0, mashups, real-time Web, semantic search?
  23. 23. Widgets are Web 1.0, 2.0 and 3.0. But are only really interesting since 2.0. </li></ul>2004 1995 5.5 2000 2002 2008 email ftp usenet IRC BBS Gopher World Wide Web 1990 HTTP HTML SOAP Java XML Javascript P2P Flash RDF OpenID RSS AJAX ATOM OWL SPARQL Web 2.0 Semantic Web Microformats JS Frameworks
  24. 24. Widget Origins <ul><li>What have: </li><ul><li>HTML/JS Snippets, Portlets, Web parts, Flash Widgets, Mashups </li></ul><li>To do with: </li><ul><li>Web Widgets? </li></ul></ul>
  25. 25. First Widget ever... … the hit counter!
  26. 26. Others alike... Snippets <ul><li>Copy past HTML+Javascript snippet to website
  27. 27. Can have visitor state (cookies)
  28. 28. May have been impressive...
  29. 29. Simplicity </li></ul>
  30. 30. Portlets <ul><li>Pluggable, reusable component
  31. 31. Fragment of markup code for portal composition
  32. 32. Used in the late 90s: </li><ul><li>Altavista, AOL, Excite and Yahoo! </li></ul><li>Now prepackaged in Enterprise Portal software: </li><ul><li>Liferay, JBoss Enterprise, DotNetNuke, Joomla!, IBM Websphere… </li></ul><li>Portlet Specifications... </li><ul><li>Java portlet specification (JSR) </li></ul><li>… for portlet engines </li><ul><li>Personalization, presentation and security </li></ul></ul>
  33. 33. Web part (WSS sharepoint) <ul><li>Windows Sharepoint services
  34. 34. Server side based
  35. 35. Output HTML
  36. 36. XML config and metadata
  37. 37. Maybe too much for a <p>Hello World</p>? </li></ul>
  38. 38. Portlets example (JSR) <ul><li>Java portlet specification JSR286
  39. 39. Server side based
  40. 40. Output HTML
  41. 41. XML config and metadata
  42. 42. Open specification based </li><ul><li>Reuse </li></ul></ul>
  43. 43. Media is Everything... Flash Widgets <ul><li>Flash (other media) object HTML reference
  44. 44. Multi-media based (why always the dark themes?)
  45. 45. Cross-browser (assuming user has the plugin...)
  46. 46. Advertising
  47. 47. User engagement </li></ul>
  48. 48. Mashup Remix the Web <ul><li>Combination – combine application data with external data
  49. 49. Aggregation – create information with the data
  50. 50. Visualization – explain complex information </li></ul>
  51. 51. Mashup technology <ul><li>Data format </li><ul><li>JSON, XML, YAML, CSV, </li></ul><li>Data API </li><ul><li>REST, SOAP, XML-RPC, </li></ul><li>Server side, desktop, browser </li><ul><li>XmlHttpRequest, sockets, cURL, </li></ul><li>Presentation </li><ul><li>Flash, DOM, HTML5 Canvas, </li></ul><li>Remixability </li></ul>Data sources Information Mashup
  52. 52. Mobile Widgets <ul><li>Web Standards: W3C Widgets 1.0 based
  53. 53. Widget is downloaded and stored: </li><ul><li>Available for offline use </li></ul><li>Proprietary device APIs (camera, geolocation, SMS, etc)
  54. 54. Desktop browsers are becoming boring: </li><ul><li>Android Webkit, Opera Mobile, Opera Mini, Netfront, Safari, Blackberry, S60 Webkit, IE Mobile, Iris, Bolt, Skyfire, and more... </li></ul><li>Cross Platform (some day hopefully...) </li></ul>
  55. 55. Web widgets origins <ul><li>Snippets
  56. 56. Portlets
  57. 57. Flash Widgets (Silverlight, Adobe Air, etc)
  58. 58. Mashup
  59. 59. Mobile Widget </li></ul>
  60. 60. Widget Platform <ul><li>What is a Web widget
  61. 61. Widget Origins
  62. 62. SAPO Widgets Platform
  63. 63. Technical Details
  64. 64. UWA Widgets Development </li></ul>
  65. 66. Project Insight <ul><li>Started at consulting as a customized startup page for
  66. 67. Adopted by for the widget repository and environment for
  67. 68. Included developers tools
  68. 69. Extended for multi-platform (cross-domain) widget services
  69. 70. Extended for multi-format widget services </li></ul>
  70. 71. Customized startup page <ul>Apache Server </ul><ul>Widgets page </ul><ul><li>Widgets as xhtml documents
  71. 72. PHP, Mysql, Javascript
  72. 73. JQuery for “widget framework”
  73. 74. Fetched server side and embedded on “the slot”
  74. 75. IFrame
  75. 76. Some support for widget settings </li></ul>
  76. 77. Widget storage and UWA <ul>UWA </ul><ul>Widget Platform </ul><ul><li>Exposition Server (Netvibes)
  77. 78. UWA Widgets (Netvibes)
  78. 79. Widget database storage
  79. 80. Development tools </li></ul>
  80. 81. Multi-platform API <ul>UWA </ul><ul>Widget Platform </ul><ul><li>API for widgets services </li><ul><li>Based on Apache Wookie </li></ul><li>PHP libraries for server-side integration
  81. 82. Template for widgets pages </li><ul><li>For widget runtime environment
  82. 83. For widget instantiation </li></ul></ul>
  83. 84. Multi-platform API <ul>UWA </ul><ul>Widget Platform </ul><ul><li>Cross-domain AJAX
  84. 85. Service profile concept </li><ul><li>Widget environment
  85. 86. Widget catalog </li></ul><li>Security </li><ul><li>Widget boxing in widget pages
  86. 87. HTTP Basic/Digest with SSL </li></ul></ul>
  87. 88. Multi-format support <ul>Widgets SAPO </ul><ul><li>Widget import feature for several widget formats
  88. 89. On-demand conversion for other formats
  89. 90. Open developer tools for developers
  90. 91. Open catalog for users </li></ul>
  91. 92. Widget Platform <ul><li>What is a Web widget
  92. 93. Widget Origins
  93. 94. SAPO Widgets Platform
  94. 95. Technical Details
  95. 96. UWA Widgets Development </li></ul>
  96. 97. Customized startup page
  97. 98. Customized startup page <ul><li>Page layout server side, with widget skeleton </li><ul><li>Environment (Browser) call widget.onLoad for each widget </li></ul><li>Widgets run inline in the page (vs Iframe method)
  98. 99. Widget approval mechanism </li><ul><li>Best case scenario should be widget “boxing” or capability model. </li><ul><li>Ex: Google Caja, Ad Safe </li></ul></ul><li>UWA Widgets </li><ul><li>Javascript framework for DOM, AJAX and widget properties </li></ul></ul>
  99. 100. Customized startup page <ul><li>AJAX </li><ul><li>Cross domain requests
  100. 101. On demand javascript, <script> tag
  101. 102. Json-p for Json requests </li></ul></ul>
  102. 103. Widget Catalog
  103. 104. Widget Catalog <ul><li>UWA Widget Importation </li></ul>
  104. 105. Widget Catalog <ul><li>UWA Widget Exportation </li><ul><li>Platforms UWA, Opera, Nokia WRT, Samsung W3C, Igoogle, Applet dashboard, Windows Vista, Windows Live, Yahoo widgets, etc </li></ul><li>Fetch widget parts -> Instantiate target compiler -> set parameters -> call render() </li><ul><li>Fetch referenced images and other dependencies, if it must </li></ul></ul>
  105. 106. Widget Syndication API <ul><li>Apache Wookie
  106. 107. W3C Widgets 1.0
  107. 108. REST API </li></ul>
  108. 109. Widget Syndication API <ul><li>Widget REST Services </li><ul><li>Widget API </li><ul><li>Fetch widget parts from ids
  109. 110. Fetch “catalog” widgets
  110. 111. Update/Store widgets </li></ul><li>Category API </li><ul><li>Fetch categories
  111. 112. Fetch associated widgets
  112. 113. Create/change categories
  113. 114. Associate widgets to categories </li></ul><li>Environment API </li><ul><li>Fetch widget runtime environment for portals implementing widget page technology </li></ul></ul></ul>
  114. 115. Widget Platform <ul><li>What is a Web widget
  115. 116. Widget Origins
  116. 117. SAPO Widgets Platform
  117. 118. Technical Details
  118. 119. UWA Widgets Development </li></ul>
  119. 120. UWA Widgets Development
  120. 121. UWA Widgets Development <ul><li>A UWA Codebits Widget
  121. 122. Into the Universal Widget API
  122. 123. SAPO Widgets for developers </li></ul>
  123. 124. UWA file format Title Metadata Widget preferences Widget Stylesheet Widget Code Widget Body
  124. 125. UWA document <ul><li>XHTML strict Based </li><ul><li>XML extension for widget preferences
  125. 126. Netvibes namespace </li></ul><li>UTF-8
  126. 127. No server side code </li></ul>
  127. 128. Widget Metadata <ul><li>Gives information about: </li><ul><li>The widget
  128. 129. Developers
  129. 130. Environment </li></ul></ul>
  130. 131. SAPO Widget Metadata
  131. 132. Widget Preferences <ul><li>Widget (Application) settings and state persistence
  132. 133. Data types: Text, Boolean, Hidden, Password, List, Range </li></ul>
  133. 134. SAPO Widget Preferences
  134. 135. Widget Body <ul><li>XHTML
  135. 136. Just the <body> part (without the tag)
  136. 137. No JavaScript, No Styles </li><ul><li>Although you can use the style attribute </li></ul></ul>
  137. 138. SAPO Widget Body
  138. 139. Widget Style <ul><li>CSS inside the <head><style> tag
  139. 140. You should “namespace“ your styles </li></ul>
  140. 141. SAPO Widget Style
  141. 142. Widget Code <ul><li>JavaScript
  142. 143. UWA Data API </li><ul><li>AJAX
  143. 144. UWA Feed Format </li></ul><li>Widget API </li><ul><li>Events
  144. 145. Preferences
  145. 146. DOM </li></ul><li>DOM Extensions </li></ul>
  146. 147. SAPO Widget Code
  147. 148. UWA API Host Runtime Environment HTTP URI Resources Unicode URI DOM XMLHTTPRequest JSON, XML, HTML CSS UWA.Data API Widget API UWA Events UWA Extensions UWA Prefs
  148. 149. UWA.Data API <ul><li>UWA.Data.getText(url, callback)
  149. 150. UWA.Data.getXml(url, callback)
  150. 151. UWA.Data.getJson(url, callback)
  151. 152. UWA.Data.getFeed(url, callback) </li></ul><ul><li>UWA.Data.request </li></ul>method: GET, POST proxy: ajax, feed type: text, xml, json, html cache: in seconds onComplete: callback parameters: url encoded onFailure: callback
  152. 153. UWA.Data Feed API RSS, RSS2, Atom UWA JSON Feed Format Items* enclosures*
  153. 154. Widget Events API <ul><li>widget.onRefresh
  154. 155. widget.onResize
  155. 156. widget.onKeyboardAction
  156. 157. widget.onSearch </li></ul>
  157. 158. Widget Preferences API <ul><li>Getters: </li><ul><li>getValue, getInt, getBool </li></ul><li>Setters: </li><ul><li>setValue </li></ul></ul>
  158. 159. UWA Extensions <ul><li>Widget API for DOM </li><ul><li>widget.body
  159. 160. widget.setBody
  160. 161. widget.createElement </li></ul><li>DOM Element </li><ul><li>appendText, empty, setHtml, setStyle,getDimensions, show, ... </li></ul><li>Array </li><ul><li>Based on JavaScript 1.6
  161. 162. forEach, some, map, ... </li></ul><li>String </li><ul><li>IsEmail, stripTags, ... </li></ul></ul>
  162. 163. Fim Any Questions?
  1. A particular slide catching your eye?

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

×