Your SlideShare is downloading. ×
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Mashup Y! widget
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mashup Y! widget

926

Published on

Make Y! widget

Make Y! widget

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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=&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>
  • 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

×