Mashup Y! widget

995
-1

Published on

Make Y! widget

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

No Downloads
Views
Total Views
995
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mashup Y! widget

  1. 1. Mashup (GUI Tools) ทำ ง่ายโคตร [email_address]
  2. 2. Wikipedia Says <ul><li>Mashup (music), a musical genre of songs that consist entirely of parts of other songs </li></ul><ul><li>Mashup (video), a video that is edited from more than one source to appear as one </li></ul><ul><li>Mashup (web application hybrid), a website or web application that combines content from more than one source </li></ul>
  3. 3. The Mashup Pyramid GUI Tools Code Libraries APIs Data Feeds Rich, Easy Flexible, Low-level Platforms
  4. 4. The Mashup Pyramid : Data Feed GUI Tools Code Libraries APIs Data Feeds Platforms <ul><li>RSS </li></ul><ul><li>ATOM </li></ul><ul><li>Demo </li></ul>
  5. 5. The Mashup Pyramid : APIs GUI Tools Code Libraries APIs Data Feeds Platforms <ul><li>Dynamic data feed </li></ul><ul><li>Specific to the data service </li></ul>
  6. 6. The Mashup Pyramid : Code Lib. GUI Tools Code Libraries APIs Data Feeds Platforms <ul><li>Check the API providers first! </li></ul><ul><li>Web Frameworks: Django, Ruby on Rails, Zend Framework </li></ul><ul><li>Yahoo! code libraries </li></ul><ul><li>Google AJAX Search API </li></ul>
  7. 7. The Mashup Pyramid : GUI Tools GUI Tools Code Libraries APIs Data Feeds Platforms <ul><li>Graphical widgets </li></ul><ul><li>Boxely </li></ul><ul><li>Adobe AIR </li></ul><ul><li>SnapLogic </li></ul>
  8. 8. The Mashup Pyramid : Platforms GUI Tools Code Libraries APIs Data Feeds Platforms
  9. 9. Mashups Platforms <ul><li>No server needed </li></ul><ul><li>Graphical building tools </li></ul><ul><li>Think MS Access for mashups </li></ul><ul><li>Google Mashup Editor </li></ul><ul><li>Yahoo! Pipes </li></ul><ul><li>Boxely </li></ul><ul><li>Popfly </li></ul><ul><li>Dappr </li></ul><ul><li>Kapow </li></ul><ul><li>Facebook </li></ul><ul><li>(you really have no excuse now) ‏ </li></ul>
  10. 10. Mashup Tools
  11. 11. The Mashup Pyramid : GUI Tools GUI Tools Code Libraries APIs Data Feeds Platforms
  12. 12. What’s a Widget? <ul><li>A single function application </li></ul><ul><li>Made from web technologies (easy to build) </li></ul><ul><li>Usually access local info or web services </li></ul><ul><li>Types: </li></ul><ul><ul><li>Desktop </li></ul></ul><ul><ul><li>Mobile </li></ul></ul><ul><ul><li>Web </li></ul></ul><ul><ul><li>Physical </li></ul></ul>
  13. 13. Desktop and Web Widgets <ul><li>Desktop Widgets </li></ul><ul><li>Web Widgets </li></ul>Yahoo! Widgets and Sidebar iGoogle Gadgets
  14. 14. Mobile and Physical Widgets <ul><li>Mobile widgets </li></ul><ul><li>Physical Widget </li></ul>Webwag WidgetStation
  15. 15. Widget Engines <ul><li>Software on which widgets run. </li></ul><ul><li>Dashboard, Sidebar, Yahoo, Google Gadgets </li></ul>Dashboard (Apple Inc.) Yahoo! Widgets engine
  16. 16. X-Ray of a Widget Engine Widget: “An end-user's conceptualisation of an interactive single purpose application for displaying and/or updating local data or data on the Web, packaged in a way to allow a single download and installation on a user's machine or mobile device.” [Widget-reqs]
  17. 17. Yahoo Widget
  18. 18. How you make desktop widgets? <ul><li>Make a web page </li></ul><ul><li>Zip it up </li></ul><ul><li>Publish it online (or send it out) </li></ul><ul><li>… or at least it should be that easy. </li></ul>06/06/09
  19. 19. Step by Step <ul><li>1.0 Idea >> RSS Widget Duocore.com </li></ul>
  20. 20. Step by Step <ul><li>2.0 Creating the widget's folders </li></ul><ul><li>folder >> Douocore.tv </li></ul><ul><li> Duocore.tv.kon -> Main File </li></ul><ul><li> Widget.xml -> Config File </li></ul><ul><li> Resources -> Image folder </li></ul><ul><li> Scripts -> Script folder </li></ul>
  21. 21. Step by Step <ul><li>3.0 Create UI (.PNG) </li></ul>
  22. 22. Step by Step <ul><li>4.0 Create Script </li></ul><ul><li>4.1 Main File (.kon) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><widget version=&quot;1.0&quot; minimumVersion=&quot;4.0&quot;> </li></ul><ul><li><debug>off</debug> <window title=&quot;Duocore.tv&quot;> </li></ul><ul><li><name>mainWindow</name> </li></ul><ul><li><width>350</width> </li></ul><ul><li><height>350</height> </li></ul><ul><li><visible>1</visible> </li></ul><ul><li><shadow>0</shadow> </li></ul><ul><li></window> </li></ul><ul><li><action trigger=&quot;onLoad&quot;> </li></ul><ul><li><!-- … </li></ul><ul><li>include( &quot;Scripts/Main.js&quot; ); </li></ul><ul><li>GetFeed(); </li></ul><ul><li>--> </li></ul><ul><li></action> </widget> </li></ul>
  23. 23. Step by Step <ul><li>4.0 Create Script </li></ul><ul><li>4.2 Script (.js) function GetFeed() // By Phornthep Khongsathian </li></ul><ul><li>{ </li></ul><ul><li>var url = new URL(); </li></ul><ul><li>rssURL ='http://www.duocore.tv/rss.php'; </li></ul><ul><li>var feed= url.fetch(rssURL); </li></ul><ul><li>try </li></ul><ul><li>{ </li></ul><ul><li>var xmlDoc = XMLDOM.parse( feed ); …… </li></ul>
  24. 24. Step by Step <ul><li>5.0 Test Run !!! </li></ul><ul><li>Main file : </li></ul><ul><li><debug>off</debug> </li></ul><ul><li>-> </li></ul><ul><li><debug>on</debug> </li></ul>
  25. 25. Step by Step <ul><li>6.0 Pack!!! </li></ul><ul><li>Main file : </li></ul><ul><li><debug>on</debug> </li></ul><ul><li>-> </li></ul><ul><li><debug>off</debug> </li></ul><ul><li>Use : Widget Converter </li></ul>
  26. 26. Step by Step <ul><li>7.0 Send to Owner -> Duocore.tv </li></ul>
  27. 27. Widget Packaging <ul><li>Format </li></ul><ul><ul><li>Zip (version 2) </li></ul></ul><ul><ul><ul><li>Deflate or uncompressed </li></ul></ul></ul><ul><ul><li>Excludes support for: </li></ul></ul><ul><ul><ul><li>64Bit </li></ul></ul></ul><ul><ul><ul><li>Encryption </li></ul></ul></ul><ul><ul><ul><li>Splitting </li></ul></ul></ul><ul><ul><ul><li>Unicode  </li></ul></ul></ul><ul><ul><li>Maximize interoperability </li></ul></ul><ul><li>Media Type </li></ul><ul><ul><li>application/widget </li></ul></ul><ul><li>Extension </li></ul><ul><ul><li>*.widget </li></ul></ul>
  28. 28. Autmatic updates <ul><li>Keep widget up to date </li></ul><ul><li>Widget engine periodically checks for updates: </li></ul><ul><ul><li>Is the Version number </li></ul></ul><ul><ul><li>HTTP Caching control </li></ul></ul><ul><ul><ul><li>Etags, Last modified date </li></ul></ul></ul><ul><li>What happens when there is no caching info? </li></ul><ul><li>What happens when a widget is auto generated?d </li></ul>
  29. 29. Flow, when the desktop and cloud combine
  30. 30. Use cases… <ul><li>To make a widget more useful: </li></ul><ul><li>Ajax (web 2.0 stuff) </li></ul><ul><li>Web services </li></ul><ul><li>RSS/podcasts </li></ul><ul><li>Web APIs/mashups </li></ul><ul><li>Access to device </li></ul><ul><ul><li>Camera, SMS, etc </li></ul></ul>
  31. 31. คำถาม Data Feed วันนี้คุณมี Data Feed หรือยัง <ul><li>RSS </li></ul><ul><li>ATOM </li></ul><ul><li>Demo </li></ul>
  1. A particular slide catching your eye?

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

×