Mashup (GUI Tools) ทำ ง่ายโคตร [email_address]

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

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

RSS

ATOM

Demo

The Mashup Pyramid : APIs GUI Tools Code Libraries APIs Data Feeds Platforms Dynamic data feed Specific to the data service

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

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 Boxely Adobe AIR SnapLogic

Graphical widgets

Boxely

Adobe 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) ‏

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

A single function application

Made from web technologies (easy to build)

Usually access local info or web services

Types:

Desktop

Mobile

Web

Physical

Desktop and Web Widgets Desktop Widgets Web Widgets Yahoo! Widgets and Sidebar iGoogle Gadgets

Desktop Widgets

Web Widgets

Mobile and Physical Widgets Mobile widgets Physical Widget Webwag WidgetStation

Mobile widgets

Physical Widget

Widget Engines Software on which widgets run. Dashboard, Sidebar, Yahoo, Google Gadgets Dashboard (Apple Inc.) Yahoo! Widgets engine

Software on which widgets run.

Dashboard, Sidebar, Yahoo, Google Gadgets

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. 06/06/09

Make a web page

Zip it up

Publish it online (or send it out)

… or at least it should be that easy.

Step by Step 1.0 Idea >> RSS Widget Duocore.com

1.0 Idea >> RSS Widget Duocore.com

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

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

Step by Step 3.0 Create UI (.PNG)

3.0 Create UI (.PNG)

Step by Step 4.0 Create Script 4.1 Main File (.kon) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <widget version=&quot;1.0&quot; minimumVersion=&quot;4.0&quot;> <debug>off</debug> <window title=&quot;Duocore.tv&quot;> <name>mainWindow</name> <width>350</width> <height>350</height> <visible>1</visible> <shadow>0</shadow> </window> <action trigger=&quot;onLoad&quot;> <!-- … include( &quot;Scripts/Main.js&quot; ); GetFeed(); --> </action> </widget>

4.0 Create Script

4.1 Main File (.kon) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>

<widget version=&quot;1.0&quot; minimumVersion=&quot;4.0&quot;>

<debug>off</debug> <window title=&quot;Duocore.tv&quot;>

<name>mainWindow</name>

<width>350</width>

<height>350</height>

<visible>1</visible>

<shadow>0</shadow>

</window>

<action trigger=&quot;onLoad&quot;>

<!-- …

include( &quot;Scripts/Main.js&quot; );

GetFeed();

-->

</action> </widget>

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 ); ……

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 ); ……

Step by Step 5.0 Test Run !!! Main file : <debug>off</debug> -> <debug>on</debug>

5.0 Test Run !!!

Main file :

<debug>off</debug>

->

<debug>on</debug>

Step by Step 6.0 Pack!!! Main file : <debug>on</debug> -> <debug>off</debug> Use : Widget Converter

6.0 Pack!!!

Main file :

<debug>on</debug>

->

<debug>off</debug>

Use : Widget Converter

Step by Step 7.0 Send to Owner -> Duocore.tv

7.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

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

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

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

RSS

ATOM

Demo