How to Create Web Widgets
The term "widget" has several definitions in the computer world, but in 2010 most people associate the word with small, shared Web features containing code that produces a unique graphical user interface (GUI) for a website visitor's enjoyment and use. Widgets are small packages of Web coding that can automate a process or display features like video clips or news tickers. They are most often intended to be portable and freely and easily shared with other Web designers.
Other People Are Reading
Instructions
-
-
1
Investigate whether a widget construction tool would save you time or help you overcome any deficits you might have in your HTML or JavaScript coding skills. Several widget-oriented websites, like Widgetbox.com, offer Build Your Own Widget tools that allow you to quickly produce a high-quality widget. Even if you know little or nothing about HTML, you can use these tools to make a custom widget for your website and distribution elsewhere.
-
2
Determine the type of widget you want to produce. There are many choices available, including Flash and HTML/Java Script, and widgets created for specific platforms like WordPress, Joomla, Facebook and Twitter.
-
-
3
Open a new code project on your HTML editor. Set your perimeters for the widget, remembering that most widgets are small, usually one column in width by two or three times the number of pixels in height. This standard one-column width by 2 or 3 inches in height is the standard size but by no means a rule; you can certainly make widgets larger or smaller. Just keep the user's ability to interact with a very small widget, as well as page load times, in mind. Most Web designers won't want to use your widget if it is too large or too small.
-
4
Code your widget. Treat the project as if it were a small website that can be dropped onto a larger website. Your widget project must be a self-contained little world of code that is dependant on no other element of your website. It must be portable, and useful to other web designers. Offer your widget's fans the ability to adjust the size, color, or other functioning aspects for their own purposes. Your end result must be a snippet of code that can be copied and pasted by widget users onto their Web pages.
-
5
Remember that the goal of the widget is to produce an effect or information when the viewer clicks on the widget or observes the widget on the Web page. One of the classic widgets of all time was the famous "Neko The Cat" widget, which featured an animated cat that "watched" the user's mouse as it moved around the Web page. Other classic widgets include countdown clocks, news feeds or direct links to specific content on YouTube or Flickr. Whatever your widget does, it should be desirable to other Web developers.
-
6
Share your widget when it is complete. You can enter your widget into several of the popular free widget galleries available, including Widgetbox.com and Widgipedia.com. These gallery sites will place widgets on the market for pick up by other Web designers. You can also attempt to sell your widget code to other developers, particularly if the widget is particularly outstanding or produces a very unusual product result.
-
1
Tips & Warnings
Spare yourself the frustration: If you are not an experienced HTML or JS coder, the online widget-making tools are highly recommended.
References
Resources
- Photo Credit world wide web image by dead_account from Fotolia.com
