Introduction to Web Widgets

Web widget is one of the easily ways to add new features to your website. It is worth noting that a ‘web widget’ is meant to be used specifically for enhancing a webpage, and it shouldn’t be confused with other types of software components that are also called 'widgets,' such as those meant to be installed on a PC’s desktop, or user interface code libraries intended for use by software developers, etc.

If you have ever created a YouTube video player on your website, then you already have experience using a typical web widget. In case that you have never done this before, it is achieved with steps like the following (using YouTube as an example):

1. Go to http://youtube.com and find a video that you like
2. Clicking on the ‘Share’ button right under the video
3. Click on the ‘Embed’ button
4. Copy the code to your clipboard
5. Find a suitable place in your webpage and insert the code into your webpage
   
6. Deploy your webpage to your web server so the change becomes visible to the public

these relatively simple steps you now have a video player on your webpage! Virtually all of the web widgets out there work this this, and there are many types of web widgets for meeting all kinds of purposes. This is suitable for someone with some knowledge with the HTML and is comfortable with tweaking a webpage. This tweaking could be as easy as inserting the code at a suitable place in the webpage's HTML code. The code for a 'floating widget' (which does not alter the layout of your webpage) is typically placed at the end of the 'body' tag. This is so that the widget will have minimum impact on the rendering speed of the webpage. In some cases you may need to change the layout of the webpage in order to open up a space for the widget, and in this case the level of HTML skill needed is much higher. Some widget vendors design their widgets in such a way that you can update certain parameters of the widget through an online editor, so that you don't have to redeploy the code whenever you have updated the widget. But in just about all cases if you decide to add a new widget to the page, you still need to open up the webpage and deal with the HTML code again. Popular websites that offer this type of widgets include Widgetbox, Wibiya, etc.

There is an ongoing trend where more and more widgets are of the 'floating' type, which hovers over your webpage. Such widget's position on the screen appears to be fixed and is not affected by how you scroll the page. This has the advantage where you don't have to worry about changing the layout of your webpage.

While today's widget technology is a major advancement from the old days, it nonetheless has some disadvantages:

• It is still a little too hard for average people to use, due to the need to constantly inserting the widget code into the target webpage. Such 'average people' include individual website owners, marketing people for large websites, owner of small business websites, etc. Improved ease-of-use of the widget technology will no doubt broaden its appeal greatly.

• The deployment workflow could be easier. If you have a small website and has the technical knowledge to update the website by yourself, then all is well. Unfortunately many small-medium businesses must rely on someone else to update the website for them, and non-technical people who manage the business side of the website cannot see the outcome until the changes are completed by a web developer. If there is any error, or change of mind (like, errr, I think I want the text color to be red instead), then you have to repeat the whole process. The situation actually gets worse with larges websites, since it usually will involve even more people, including designers, developers, QA, marketing, etc. It is no wonder that even for very large corporations the website is something that you don't want to change unless you really have to. But we are now in an age where website is becoming a vital tool for businesses and individuals, and leaving the website stale is just not acceptable. An improved widget technology that allows marketing people to have direct control of what they need to do will change the landscape greatly.

• Shallow integration. Virtually all of the current-generation widgets are just something that sit on your webpage, and useful as they are they do not respond to other contents on your website. A widget that supports 'deep integration' with your website is capable of changing it look and behavior based on the contents on your website, and this gives you sophisticated functions not possible with the current-generation widgets.

Next-generation web widget

There is a relatively new type of widget called ‘deepWidget’ which is designed to solve the problems mentioned above. It is based on a Web Layering technology which allows you to add layers of widgets over your existing webpage in a web-based WYSIWYG (what-you-see-if-what-you-get) environment, and as a result you get the following advantages:

• Greater ease of use. It allows you to use it even if you have no knowledge with HTML. This means that you can update the widgets that you deployed earlier, remove them, or add new ones, all without having to deal with widget code. This makes it accessible to even tech dummies.

• Instant preview. You get to preview the result in a realistic fashion, which shows you how it looks like with the widget on your target webpage. Amazingly this is not just a static screenshot of how it might look like, but rather it is a functional copy of your webpage plus a fully functional copy of the widget. This means that you can inspect how it is supposed to look or function before it is published, so that there is no guess work. Making your changes go live takes only a couple of mouse clicks.

• Add 'visual depth’ to your webpage. Many deepWidgets are of the ‘floating’ type, which do not require you to update the layout of your webpage. This may seem like a minor plus, but changing webpage layout is actually very much a hassle since there are many things that can go wrong, and there are also many browser types that you need to check against to ensure that there is no problem. You can think of the deepWidget technology as adding layers of page components to your webpage, and aside from the cool look it also allows you to easily add or remove a layer with minimal interference with your existing page, so the risk of making such changes is low.
  
  
• 'Deep integration' with your website. Widgets with such 'deep integration' capability give you sophisticated functions with little effort. This kind of widget changes it look and behavior in response to the content on your website, and it truly become a part of your website. Why would you need this? Just imagine that you can have a countdown widget that is based on the game schedule listed on YOUR website, or a slideshow/video widget that slides out when user scroll a relevant article on YOUR website into view. Simply put, having 'deep integration' means that you get to add sophisticated functions easily that were previously available only with custom web development projects. More on this topic in another post.
  

Note that using the deepWidget does require an one-time setup, where you need to acquire a special code from http://deepwidget.com, and insert it into your webpage. This is an improvement over the current widget technology because you do this only once for your target webpage, regardless of what widgets you want to add later, how many widgets you want to add, or even how often you changed you mind and want to alter the parameters of a widget.

To get a quick sense of how this works you can view this short tutorial video. Alternatively you can also view the tutorial video right here at the bottom of this screen. The video widget displayed here is also a demonstration of what you could do with deepWidget. Note that the widget becomes invisible as soon as you scroll this text out of view. Later I will make another post showing you how you can do something like this in your own blog or website.

More information can be found at the deepWidget website at http://deepwidget.com.