widget driveby chorong hwang. what is widget? widgets are small programs that can be placed on your...

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