Widget DriveBy

ChoRong Hwang

What is Widget?

widgets are small programs that can be placed on your desktop

Why widgets are cool~?

• Local Data / Web Data

• Open Sources

• HTML, CSS, XML and JavaScript…..

• Don’t need to be in the browser

• Don’t need to be square shape

What is a good widget?

• Simple:Should have only one function

• Small:Small enough to not bother desktop

• Personalize:Users can choose some options

Widget Engines

• Yahoo Widgethttp://widgets.yahoo.com/download/

• Apple Dashboardhttp://www.apple.com/downloads/dashboard/

• Windows Vista Sidebarhttp://vista.gallery.microsoft.com/vista/SideBar.aspx

Let’s make a Yahoo Widget!

What do I need?

1. Widget Engine : http://widgets.yahoo.com/download/

2. Widget Converter : http://widgets.yahoo.com/widgets/widget-converter

3. Text Editor : BBedit, TextWrangler, TextEdit..

4. Photoshop / Illustrator

Up zip the .widget file

• Documents > Widgets > blabla.widget

• Drag it in to Widget ConverterChoose ‘Convert to: Floder’ and covert!

• There will be a floder in the same directory with the blabla.widget :D

Files

• Documents>Widgets>WidgetName>Cotents>Resources, .kon, …….

• .kon Contains the main code for a WidgetXML format

• .jspure JavaScript (Not required)

• ResourcesFor images, sound files…

Example 1

• Copy this code to text editor http://itp.nyu.edu/~crh272/widgets/code01.html

• Save it as a my_first_widget.kon into my_first_widget/contents/

• Convert the my_first_widget forder to .widget using Yahoo widget converter

Example2

• Add this code to my_first_widget.kon(put it between <window></window>)http://itp.nyu.edu/~crh272/widgets/code02.html

• Reload it or convert it again!

References

• http://manual.widgets.yahoo.com/

• http://widgets.yahoo.com/

Let’s make an Apple Widget!

Let’s Hack a widget!

• Download a widget which you likeor

• Library > Widgets > blabla.wdgt

• Delete the extention .wdgt

• It will change to a folder

• Modify it as much as you can

• Add extetion .wdgt again!!!!

Good Bye World Apple Widget

• Download a file from here

• http://itp.nyu.edu/~crh272/widgets/Goodbye World.zip

Reference

• http://developer.apple.com/samplecode/AppleApplications/idxDashboard-date.html

• http://www.apple.com/downloads/dashboard/

How can I distribute my widget?

• Post on your website

• Submit to Yahoo! Widgetshttp://widgets.yahoo.com/submit/

• Submit to Apple Widgetshttp://www.apple.com/downloads/dashboard/“Submit a Widget” button click

Thank you.

• ChoRong Hwanghcholong82@gmail.comwww.hwangchorong.com

• Etch a Sketchhttp://widgets.yahoo.com/widgets/y-etch-a-sketch