Your SlideShare is downloading. ×
0
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Widget Platform
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Widget Platform

6,165

Published on

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

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,165
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
199
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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. Widget Platform <ul><li>What is a Web widget
  3. Widget Origins
  4. SAPO Widgets Platform
  5. Technical Details
  6. UWA Widgets Development </li></ul>
  7. Widget Platform <ul><li>What is a Web widget
  8. Widget Origins
  9. SAPO Widgets Platform
  10. Technical Details
  11. UWA Widgets Development </li></ul>
  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. Examples
  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. Widget Platform <ul><li>What is a Web widget
  16. Widget Origins
  17. SAPO Widgets Platform
  18. Technical Details
  19. UWA Widgets Development </li></ul>
  20. Widget Origins <ul><li>From websites, keyword search, directory portals, ...
  21. From wikis, weblogs, social media aggregation, social networks, ...
  22. From Enterprise 2.0, mashups, real-time Web, semantic search?
  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. 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. First Widget ever... … the hit counter!
  26. Others alike... Snippets <ul><li>Copy past HTML+Javascript snippet to website
  27. Can have visitor state (cookies)
  28. May have been impressive...
  29. Simplicity </li></ul>
  30. Portlets <ul><li>Pluggable, reusable component
  31. Fragment of markup code for portal composition
  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. Web part (WSS sharepoint) <ul><li>Windows Sharepoint services
  34. Server side based
  35. Output HTML
  36. XML config and metadata
  37. Maybe too much for a <p>Hello World</p>? </li></ul>
  38. Portlets example (JSR) <ul><li>Java portlet specification JSR286
  39. Server side based
  40. Output HTML
  41. XML config and metadata
  42. Open specification based </li><ul><li>Reuse </li></ul></ul>
  43. Media is Everything... Flash Widgets <ul><li>Flash (other media) object HTML reference
  44. Multi-media based (why always the dark themes?)
  45. Cross-browser (assuming user has the plugin...)
  46. Advertising
  47. User engagement </li></ul>
  48. Mashup Remix the Web <ul><li>Combination – combine application data with external data
  49. Aggregation – create information with the data
  50. Visualization – explain complex information </li></ul>
  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. Mobile Widgets <ul><li>Web Standards: W3C Widgets 1.0 based
  53. Widget is downloaded and stored: </li><ul><li>Available for offline use </li></ul><li>Proprietary device APIs (camera, geolocation, SMS, etc)
  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. Web widgets origins <ul><li>Snippets
  56. Portlets
  57. Flash Widgets (Silverlight, Adobe Air, etc)
  58. Mashup
  59. Mobile Widget </li></ul>
  60. Widget Platform <ul><li>What is a Web widget
  61. Widget Origins
  62. SAPO Widgets Platform
  63. Technical Details
  64. UWA Widgets Development </li></ul>
  65.  
  66. Project Insight <ul><li>Started at consulting as a customized startup page for
  67. Adopted by for the widget repository and environment for
  68. Included developers tools
  69. Extended for multi-platform (cross-domain) widget services
  70. Extended for multi-format widget services </li></ul>
  71. Customized startup page <ul>Apache Server </ul><ul>Widgets page </ul><ul><li>Widgets as xhtml documents
  72. PHP, Mysql, Javascript
  73. JQuery for “widget framework”
  74. Fetched server side and embedded on “the slot”
  75. IFrame
  76. Some support for widget settings </li></ul>
  77. Widget storage and UWA <ul>UWA </ul><ul>Widget Platform </ul><ul><li>Exposition Server (Netvibes)
  78. UWA Widgets (Netvibes)
  79. Widget database storage
  80. Development tools </li></ul>
  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
  82. Template for widgets pages </li><ul><li>For widget runtime environment
  83. For widget instantiation </li></ul></ul>
  84. Multi-platform API <ul>UWA </ul><ul>Widget Platform </ul><ul><li>Cross-domain AJAX
  85. Service profile concept </li><ul><li>Widget environment
  86. Widget catalog </li></ul><li>Security </li><ul><li>Widget boxing in widget pages
  87. HTTP Basic/Digest with SSL </li></ul></ul>
  88. Multi-format support <ul>Widgets SAPO </ul><ul><li>Widget import feature for several widget formats
  89. On-demand conversion for other formats
  90. Open developer tools for developers
  91. Open catalog for users </li></ul>
  92. Widget Platform <ul><li>What is a Web widget
  93. Widget Origins
  94. SAPO Widgets Platform
  95. Technical Details
  96. UWA Widgets Development </li></ul>
  97. Customized startup page
  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)
  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>
  100. Customized startup page <ul><li>AJAX </li><ul><li>Cross domain requests
  101. On demand javascript, <script> tag
  102. Json-p for Json requests </li></ul></ul>
  103. Widget Catalog
  104. Widget Catalog <ul><li>UWA Widget Importation </li></ul>
  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>
  106. Widget Syndication API <ul><li>Apache Wookie
  107. W3C Widgets 1.0
  108. REST API </li></ul>
  109. Widget Syndication API <ul><li>Widget REST Services </li><ul><li>Widget API </li><ul><li>Fetch widget parts from ids
  110. Fetch “catalog” widgets
  111. Update/Store widgets </li></ul><li>Category API </li><ul><li>Fetch categories
  112. Fetch associated widgets
  113. Create/change categories
  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>
  115. Widget Platform <ul><li>What is a Web widget
  116. Widget Origins
  117. SAPO Widgets Platform
  118. Technical Details
  119. UWA Widgets Development </li></ul>
  120. UWA Widgets Development
  121. UWA Widgets Development <ul><li>A UWA Codebits Widget
  122. Into the Universal Widget API
  123. SAPO Widgets for developers </li></ul>
  124. UWA file format Title Metadata Widget preferences Widget Stylesheet Widget Code Widget Body
  125. UWA document <ul><li>XHTML strict Based </li><ul><li>XML extension for widget preferences
  126. Netvibes namespace </li></ul><li>UTF-8
  127. No server side code </li></ul>
  128. Widget Metadata <ul><li>Gives information about: </li><ul><li>The widget
  129. Developers
  130. Environment </li></ul></ul>
  131. SAPO Widget Metadata
  132. Widget Preferences <ul><li>Widget (Application) settings and state persistence
  133. Data types: Text, Boolean, Hidden, Password, List, Range </li></ul>
  134. SAPO Widget Preferences
  135. Widget Body <ul><li>XHTML
  136. Just the <body> part (without the tag)
  137. No JavaScript, No Styles </li><ul><li>Although you can use the style attribute </li></ul></ul>
  138. SAPO Widget Body
  139. Widget Style <ul><li>CSS inside the <head><style> tag
  140. You should “namespace“ your styles </li></ul>
  141. SAPO Widget Style
  142. Widget Code <ul><li>JavaScript
  143. UWA Data API </li><ul><li>AJAX
  144. UWA Feed Format </li></ul><li>Widget API </li><ul><li>Events
  145. Preferences
  146. DOM </li></ul><li>DOM Extensions </li></ul>
  147. SAPO Widget Code
  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
  149. UWA.Data API <ul><li>UWA.Data.getText(url, callback)
  150. UWA.Data.getXml(url, callback)
  151. UWA.Data.getJson(url, callback)
  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
  153. UWA.Data Feed API RSS, RSS2, Atom UWA JSON Feed Format Items* enclosures*
  154. Widget Events API <ul><li>widget.onRefresh
  155. widget.onResize
  156. widget.onKeyboardAction
  157. widget.onSearch </li></ul>
  158. Widget Preferences API <ul><li>Getters: </li><ul><li>getValue, getInt, getBool </li></ul><li>Setters: </li><ul><li>setValue </li></ul></ul>
  159. UWA Extensions <ul><li>Widget API for DOM </li><ul><li>widget.body
  160. widget.setBody
  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
  162. forEach, some, map, ... </li></ul><li>String </li><ul><li>IsEmail, stripTags, ... </li></ul></ul>
  163. Fim Any Questions?

×