위젯 디자인 가이드

1. 맥용 위젯 디자인 하기

2. 비스타용 위젯 디자인하기


Widget Design Procedure
Tuesday, 29. August 2006, 18:02:18

Procedure, Design, widget
After reading countless books on Code Development and In the process of creating my own procedure manual for my current work place, I have decided to strip out pieces of the procedure manual that can pertain to common knowledge or add to it.

With that said this post will be on the Widget Design Procedure. This procedure I do not follow specifically due to time constraints but in a perfect world the design process for most of my widgets would be as follows:

Define the purpose of the widget. The widget can have many purposes from fun and games to professional tools. It can be something anyone can use or only specific group of people. You control the look and feel of your widget.
Define the actions of the widget. What do you want your widget to do, and what special features to do want to see? The most common widgets that I have design have a Version Tracker and a Print function added. Some widgets have the ability to Maximize and Minimize to the users’ discretion. Then you have the raw function of the widget, if your widget is a calculator type widget, you’ll need the addition (+), subtraction (-), division (/), multiplication (*) and the total (=) abilities to say the least. Once all the features are defined you can begin to design your widget.
Define the Personality of the widget. Your widget needs a personality; determine if your widget is to be a “happy” widget or a “teachers” widget.
Determine color scheme. With your personality in place you can determine the color scheme you need to convey your widgets personality.
Sketch your widget. Paper before code, this is true in many ways; some like other code first (me), and design later. Depending on your school of thought and what you’re most accustomed to. Personally I am learning design in baby steps-- I am redesign my personal website good luck to me. Make sure you sketch all the elements of your widget do not leave out anything, show the different forms your widget can take depending on the features you added, ex., Max, Min, Front, Back, Print view.
Implement your design. Once you have your design sketched out in front of you, you can now begin to code the design.
Test your design/Widget. Test your widget, if possible in all available OS, be it Windows, Mac and Linux. Test for design flaws and functionality.
Adjust design and functionality. If there are any flaws in design and functionality, in which many cases there are, adjust and Test again.
Publish. Once you are satisfied with your widget in its entirety and all the widget elements are complete, the XML configuration file, index.html is final and all images and styles are in place. Zip and publish your widget.
I do hope this widget design procedure comes in handy for you widgeters out there and please feel free to append to this procedure as you see fit, I found it that If you follow how others do it but adapt to it and make it your own, you will be in the right direction designing comfortably. I gave you the paint, you have the brush and canvas now the rest is up to you.

Albert Rosa.

FAQ: Technical Considerations When Designing Your Widgets
In a bit of a departure from the typical content you see on this blog, today I'm going to delve into some technical considerations when you are designing and building NewsGator widgets using Editor's Desk.

Designing Widgets

Designing widgets, especially viral widgets, may be an unfamiliar challenge for many designers. Unlike most HTML designs, widget designs must work well on a number of different web sites. Even worse, the content of the posts within the widget may be unknown. Following are some general guidelines for designing widgets and implementing them in HTML and CSS.

Dealing With Host Pages

Viral widgets will be placed on a huge number of web pages that you don’t know anything about and have absolutely no control over. The pages will use HTML4, XHTML Transitional or XHTML Strict or maybe even HTML5. They might have a DOCTYPE that puts the browser into standards mode or they might leave the browser in quirks mode. They might use CSS to redefine the appearance of basic HTML elements. They will place your widget in odd places on their page.

Because host pages are so unpredictable, dealing with them can be the biggest challenge in designing and coding a widget. You must try to predict what could go wrong with the widget and try to code defensively to avoid problems. The following guidelines will help you on your way.

Avoid complex designs if possible, particularly designs using floats. It can be very difficult to make these layouts work in the face of quirks/standards mode changes and varying CSS rules from the host page. Instead, consider using table-based layouts. Yes, it’s so last century and all the cool designers are using floats, but tables are very predictable across all browsers and in nearly all circumstances.

Dealing with Content

If you are using content from feeds that you don’t control consider what might be in the posts. Sometimes posts contain large images, long words or URLs that won’t wrap properly, or other odd HTML Frequently your best bet is to use the stripHTML modifier to remove all HTML from the post Description.

Posts may also have very long descriptions. Some posts descriptions run to several pages of text. So it’s a good idea to use the excerpt modifier to ensure posts don’t go on for too long.

If you are counting on photo or video content in your widget remember that posts do not always have media attached. Even in feeds that nearly always have media there may sometime be a post without media, so be sure to use {if} statements to ensure that the media is available.

Javascript

Writing Javascript code for widgets will be the topic of another article. But remember that your Javascript code is loaded into the global context along with all the other Javascript on that page. Therefore you must be careful about naming your functions and variables because they might conflict with other functions on the page.

WZD Widget API Specification