Date post: | 17-May-2015 |
Category: |
Technology |
Upload: | phornthep-khongsathian |
View: | 936 times |
Download: | 0 times |
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
The Mashup Pyramid
GUI Tools
Code Libraries
APIs
Data Feeds
Rich,Easy
Flexible, Low-level
Platforms
The Mashup Pyramid : Data Feed
GUI Tools
Code Libraries
APIs
Data Feeds
Platforms
RSS ATOM Demo
The Mashup Pyramid : APIs
GUI Tools
Code Libraries
APIs
Data Feeds
Platforms
Dynamic data feed
Specific to the data service
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
The Mashup Pyramid : GUI Tools
GUI Tools
Code Libraries
APIs
Data Feeds
Platforms
Graphical widgets
BoxelyAdobe AIR SnapLogic
The Mashup Pyramid : Platforms
GUI Tools
Code Libraries
APIs
Data Feeds
Platforms
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)
Mashup Tools
The Mashup Pyramid : GUI Tools
GUI Tools
Code Libraries
APIs
Data Feeds
Platforms
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
12
Desktop and Web Widgets
Desktop Widgets Web Widgets
Yahoo! Widgets and Sidebar iGoogle Gadgets
Mobile and Physical Widgets
Mobile widgets Physical Widget
14
Webwag WidgetStation
Widget Engines
• Software on which widgets run.• Dashboard, Sidebar, Yahoo, Google Gadgets
15Dashboard (Apple Inc.)
Yahoo! Widgets engine
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]
Yahoo Widget
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.
04/12/23 18
Step by Step1.0 Idea >> RSS Widget Duocore.com
Step by Step2.0 Creating the widget's folders
folder >> Douocore.tv Duocore.tv.kon -> Main File
Widget.xml -> Config File Resources -> Image folder Scripts -> Script folder
Step by Step3.0 Create UI (.PNG)
Step by Step4.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>
Step by Step4.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 );
……
Step by Step5.0 Test Run !!!
Main file : <debug>off</debug>-><debug>on</debug>
Step by Step6.0 Pack!!!
Main file : <debug>on</debug>-><debug>off</debug>
Use : Widget Converter
Step by Step7.0 Send to Owner -> Duocore.tv
Widget Packaging
• Format– Zip (version 2)
• Deflate or uncompressed
– Excludes support for:• 64Bit• Encryption• Splitting• Unicode
– Maximize interoperability
• Media Type– application/widget
• Extension– *.widget
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
Flow, when the desktop and cloud combine
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
คำ�ถ�ม
Data Feed
วั�นน��คุ�ณมี� Data Feed หรื อยั�ง RSS ATOM Demo