widget driveby chorong hwang. what is widget? widgets are small programs that can be placed on your...
Post on 22-Dec-2015
214 views
TRANSCRIPT
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 [email protected]
• Etch a Sketchhttp://widgets.yahoo.com/widgets/y-etch-a-sketch