Uploaded on

Make Y! widget

Make Y! widget

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
892
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
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