Mashup (GUI Tools)

ทำ�

ง่��ยโคตร

pkhongsa@yahoo.com

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