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