How to add a cool 3D media wall to your site - no coding required

In this article I will show you how to add a web widget to your website or blog for displaying a wall of photos or videos.  This is using a widget from deepwidget.com, which is based on something called the Cooliris Wall from Cooliris. The Cooliris Wall is one of the most polished tool for displaying a large number of photos or videos. It is particularly suited for displaying a large number of media, since such media are laid out on a wall of infinite width, and you can 'fly' around over the wall very easily.

This widget has the following features:

• It displays a collection of photos or videos from a selected source. Currently the supported content sources include Flickr, Picasa, Youtube, Facebook and midea RSS. You can configure what to include at the Cooliris Express site. You can also opt to upload your own media assets to one of the supported sites above, so that you are able to select them for inclusion..
• As with other widget from deepwidget.com, adding this widget to your site does not require any coding skills. If you already have a collection of photos or videos on Flickr or Picasa, you can put this up on your site in a matter minutes.
• This is one of the tabbed widgets from deepwidget.com, which means that you can use it along with other tabbed widgets to create an entire row of tabs on your site to do all kinds of things for you. These tabbed widget does not require you to alter the layout of your current page, so they are very easy to put up.

For a live demonstration of this widget, just click on the tab at the right side of this page to see it in action.

Getting Started

You can skip this section if you are already a registered user of deepwidget.com. Otherwise you will need to register with deepwidget.com in order to add this widget to your site. This is free and can be completed in a minute or two.

You will also need to do an one-time setup of your site. After this one-time setup you will then be able to add not only this widget, but also many other widgets through the deepWidget Sandbox. The deepWidget Sandbox is an easy-to-use WYSIWYG environment for managing the widgets on your page. Here is an article that shows you how to complete this one-time setup, along with instructions on how to use the deepWidget Sandbox.

Preparing Your Assets

You will need to create a 'feed' out of the photos or videos that you want to show in this widgets. Follow the steps at the Cooliris Express site to configure the content source, and modify its layout, theme, control features, etc. Once you are done, copy down the 'embed code' and save it for the next step.

Adding the Widget to Your Site

Adding the widget is very easy to do, and generally takes only a couple of clicks through the Sandbox.  Here is what you need to do:

• Sign onto the deepWidget Sandbox at http://deepwidget.com/sandbox. This displays the Sandbox in your browser.
• Click on the 'Add' button at left to display the widget gallery.
• Select the 'Cooliris Media Wall' widget from the gallery.
• From under the 'Add' button find the icon for this widget, and click the 'edit' icon there. A widget editor will be displayed.
• Enter the the embed code you got in the last section into the field 'embed code'
• Adjust other parameters in the widget editor to change the look and behavior of the widget to suit your needs.
• Click on the 'Save & Close' button to save your changes.
• If you like what you are seeing and ready to go live with it, just click on the 'Publish' button and then confirm your action. 

And there you now have a very cool media wall right on your live website or blog!  Note that this Cooliris Wall does allow you to maximize it to full screen size. If there are any photos or videos that you want to add or delete from your feed, don't forget that you will need to do it through the Cooliris site mentioned earlier. It is also worth noting that since this is based on the free version of the Cooliris Wall, it is possible that some ads may show up on the Wall without notice. You should contact support@smesh.net for a paid version if you really need it to be ad-free.

Related Links

1. The Cooliris Express site
2. A tutorial on how to do the one-time setup and use the deepWidget Sandbox
3. The deepWidget website
4. Other tabbed widgets from deepwidget.com
5. Other video widgets from deepwidget.com

How to add an online survey with QR Code to your website or blog

An online survey is a very useful tool for collecting information from your target audience. You can use it to find out how your customers feel about a particular topic, and then adjust your services accordingly. Here I will show you how to add an online survey form on your website or blog using a widget from deepWidget.com. You don't need any coding skill and it takes only minutes to do this.

If you want to know how this widget looks like without reading this entire article, just click on the 'Survey' tab on the right side of this blog and you will see a live survey form sliding out into view.

This widget is based on Google Forms, which allows you to create a survey containing a series of question of various types, such as text, multiple choices, yes-no question, scale, etc. If you have some HTML knowledge you definitely can incorporate such a form directly into your website or blog without using the widget mentioned here. However, if you take the approach here then you will also get the following benefits:

• The Google Form instance that you created is wrapped in a floating panel that can be docked to one side of the page as a non-intrusive tab. Aside from the cool animation effects that come with it, this also allows you to add the survey form without having to alter the layout of your current page.
• You also get a QR Code for this survey form, so that you can do things such as posting a printed copy of this QR Code in your brick-and-mortar store, and your customers will then be able to fill the survey form on the phone right there and then by simply taking a picture of the QR Code with their smart phone .
• You can configure this survey to be displayed as soon as the page is opened. This is useful when you really really want your users to take the survey (but at the risk of annoying your users).
• You don't need any coding skill to in order to use this widget, just like other widgets from deepwidget.com.

 
Do the One-time Setup

You can skip this section if you are already a registered user of deepwidget.com and have already completed the one-time setup for your website or blog.

Otherwise you will need to do an one-time setup of your target webpage or blog following the 'Do the one-time setup' section in this tutorial. This will allow you to add all kinds of widgets (not just the one mentioned in this post) to your website or blog from inside the deepWidget Sandbox in a WYSIWYG manner with just a couple of clicks.

Create the Survey Form

Here is an excellent tutorial on how to create a survey using Google Forms. After you have created your survey, do the following:

• With the form opened inside Google Docs, click on 'Form' in the menu bar.
• Click on 'Go to live form'
• Copy the URL displayed there for use in the next section.

Add the Survey Form to Your Website or Blog

In order to add the survey form that you just created to your website or blog, you will need to use the deepWidget Sandbox for this. If you are not familiar with the deepWidget Sandbox you can find a tutorial here.

Do the following from the Sandbox:

• Navigate to your website or blog by entering its URL to the text box on top. Your website or blog will then get displayed inside the Sandbox.
• Click on the 'Add' button on the left side. A gallery containing many widgets will be displayed.
• Select the 'Survey with QR Code' widget from the gallery. As a result you will find a 'Survey' tab showing up on the right side of your page. If you click on this tab you will find a survey form sliding into view containing a sample survey in it.
• Click on 'edit' icon right under the 'Survey with QR Code' icon at the left side to bring up a widget editor.
• Enter the survey form URL you got in the last section into the field 'Go to live from' URL from Google Forms in the widget editor.
• Adjust other parameters in the widget editor to suit your needs.
• Click on the 'Survey' tab now to see your very own survey and make sure that everything looks good to you.
• Click on the 'Publish' button on top and confirm your action when prompted.

And there you have it! If you visit your live website or blog right now, you will then see the survey form right there. To find out how the survey turns out, just log onto your Google Docs account and open your survey form there, and you will find the survey result collected there neatly in a spreadsheet. From there you can then do the typical spreadsheet tricks to analyze the result, creating charts, etc.

Using the QR Code

In case that you are not familiar with QR Code, it is a kind of advanced bar code that when scanned with your smart phone you can make things happen on your phone, such as making a phone call, navigate to a certain website, etc.

Clicking on the 'QR Code' link at the header bar of this widget will bring out a display of the QR Code that links to the survey form. But why would you need a QR Code linking to the survey form when you already have it right in front of you? In fact you don't. This QR Code is intended to be posted somewhere else, so a good practice here is to print out this QR Code along with some simple instruction (e.g., "Take our survey here with your smart phone and win free dinner!") and put it up somewhere where your target customers will see it (e.g., inside the premise of a store, on a physical bulletin board, etc.). This way you can also get some mobile users to take the same survey.

Other Usages

What's described above is useful for many purposes beyond just doing surveys. Here are some ideas:

• Collect a list of subscriptions to your periodic publication, such as a newsletter, etc.
• Conduct a simple poll and optionally showing the result to your site visitors.
  
• Use it as a virtual sign-up sheet of some sort.
• Use it as a feedback form to collect your customer's input regarding your services.
• Use it for your site visitors to leave a message for you.
• Use it as a quiz.
  

You should be aware that there is no way to control who is allowed to enter information into this survey form, no way to limit how many times they can enter information, and no way to authenticate who a user really is. As such you should be using this for non-critical purposes only.

How to add a floating video player to your website or blog

In this article I will show you how to add a video player to your website or blog using a widget from deepwidget.com. This is useful for playing a single on-demand or live video at user's command, or for showing a 'splash' video that is played automatically as soon as the page is opened.

You can get a taste of how it works by simply clicking on the red tab on the right side of this article to see a video playing. Note that this widget stays at a fixed location and appears to float over the content of the page, so there is no need for you to change your page layout in order to fit it onto the page.

As with all the other widgets from deepwidget.com, once you have done the one-time setup you can add such a video widget, or any other widgets from deepwidget.com, without having to deal with any HTML/Javascript code.  If you are not yet familiar with deepWidget's Sandbox (a what-you-see-is-what-you-get environment where you can try out the widget right on your page), you can find more about it here. If you are a first-time user, you can trying things out in the Sandbox without doing the one-time setup of your page.

Adding the Video Player to Your Page

The widget that we are going to use here is 'Youtube Video with Lightbox Effect.' From inside the Sandbox click on the 'Add' button at left to bring out the list of all available widgets, and select 'Youtube Video with Lightbox Effect'. This will add a red tab labeled as 'Video' on the right side of your page. If you click on the tab you will find a video player sliding out to the center of the page, and begin to play a default tutorial video. This video player will be minimized automatically into a tab when the video is finished.

Customizing the Video Player

You can change the look and behavior of this video player in several ways. In order to start changing the video, find this widget in the left panel of the Sandbox (which displays all of the widgets that you have added onto your page), and click on the 'edit' icon there to bring a widget editor.

• Changing the video. Since this video player is from Youtube, in order to change it to play a different video you will need to get the ID for your video. This ID is an 11-letter sequence (the part highlighted in yellow below) in your Youtube video URL, such as any of the following:
  
       http://www.youtube.com/watch?v=1ANFbUXFoLE
       http://youtu.be/1ANFbUXFoLE
  
  Enter this ID into the field 'The 11-letter Youtube video ID' in the widget editor.

• Changing look and behavior. Since this is one of many 'tabbed' widgets from deepWidget.com, it can be configured to work with other such widgets to create a row of tabs. You can choose to move the tab to the left side of the page, choose whether you want the 'lightbox effect' which dims the page when the video player comes out, or move the tab up and down so that it will be at a place that you want.

• Configure the video to play on page load. For this just change the parameter 'Play the video as soon as the page is loaded' to 'Yes.' The video player will be minimized automatically into a tab when the video is done playing.

Since this widget is based on the Youtube's video player, you will get everything that come with it. This means that if Youtube chooses to insert an ad into your video, then you will see the ad here to. And of course if you want to use a new video, then you will need to upload it to Youtube first.

How to add social networking features to YOUR website or blog

If you believe that social networking will play an important role with your presence on the web, whether it is for personal or business purposes, I am sure that by now you already have accounts with various social networking sites such as Facebook, Twitter, etc.

While these social networking sites are great, there are times when you would rather that these social networking features are available right on YOUR own website or blog (assuming that you have one). This is for a good reason, since normally you want your visitors go to your principal website or blog, so that you have more control about how to communicate with them there.

Most social networking sites understood this need in the marketplace, so they usually do offer many web widgets that allow you to add various social networking features to your website easily. These are of the first-generation web widgets, where to use them you just need to get the code from them, and insert it into your website.

The website deepwigdet.com offers a number of 'deepWidgets' that wrap around those widgets from social networking sites to make them nicer to use and easier to manage. Compared to adding such social networking widget codes to your website on your own, you get the following benefits:

• As with all the widgets from deepwidget.com, you get to add, remove, and configure them through an easy-to-use web-based administration portal (i.e., the deepWidget Sandbox), so that you don't have to worry about having to constantly dealing with inserting the widget code into your webpage or blog.
• Such widgets are encased in a floating panel, so that you don't have to worry about how you should alter your page layout in order to accommodate them.
• Some of them come with some usability enhancements to give your visitors a better usage experience. For example, the floating panel can be minimized to become a tab on the side of the page, various animation effects are available, and there is an optional lightbox effect (which dims your page) to focus your visitor's attention on the panel that slides out.
• You can combine such widgets with other tabbed widgets from deepwidget.com to create a group of tabs that sit on the side of your webpage. This practically adds an entirely new layer of functionality over your original webpage! And of course you can rearrange, add, remove such tabs without touching your original webpage code.
• You can add sophisticated 'mashup' functionality (upcoming) in a matter of minutes. For example, you can specify that a tab is to become visible only when certain part of your page becomes visible. More on this later in another post, but you can get a sense of this by simply looking at this very post, where you will find a couple of widgets become visible only when you have scrolled the bottom part of this post into view.

On the right side of this post are a number of deepWidgets that offer Facebook features. Just click on them to try it out! You can have the same thing, with your customizations, through the deepWidget Sandbox.

If you are not familiar with deepWidget here are links to additional information:

• The deepWidget website: http://deepwidget.com
• A tutorial for the deepWidget Sandbox: http://kaihuchen.blogspot.com/2011/07/deepwidget-sandbox-tutorial.html
• An introduction to web widgets: http://kaihuchen.blogspot.com/2011/07/introduction-to-web-widgets.html
• Some social networking widgets offered by deepWidget: http://deepwidget.com/widgets/all/1/10060/0/0 .

Turbocharge your blog without coding - introduction

Blogging is a great way to get an instant presence on the web. You can get it going in a matter of minutes and begin to blog away, and hopefully in no time you will get a community of readers to follow you. Nowadays many small businesses may even choose to use a blog or Facebook pages as their 'main site,' and save the cost and headache that come with building and maintaining a website.

However, if you have been a regular blogger it is likely that you have had one of those 'how do I do this or that' moments with your blogging site. It is possible that you are hitting the limits of your blogging site. Or more often it is because you don't have the coding knowledge needed in order to achieve you want to do. If you are considering using a blog site as the main site for your business, then you definitely should be aware of such disadvantages.

In this post I will show you how you can add all kinds of useful enhancements to your blog, even if you know nothing about coding. This is based on the free services from deepwidget.com, and if you are patient with me you will be rewarded with a very high quality announcement ad on your blog in a couple of minutes! This is meant to demonstrate to you that while using a blog is convenient with many limitations, but by adding deepWidget into the mix then you will find yourself be able to do much much more with a blog.

In this tutorial I am using blogspot.com (where this blog is hosted) as an example. You should be able to do the same with other blog sites, so long as they allow you to add Javascript to your blog.

In case you are wondering if this is one of those web widgets that you find all over the Internet, then the short answer is 'no,' it is something much more advanced and much easier to use. If you want the long answer you can find it here.

First, Do The One-time Setup

First you must do an one-time setup of your blog template, using one line of setup code that you get from deepwidget.com. This is the magic code that makes it extremely easy to add widgets onto your blog in just a couple of mouse clicks. You can find out how to get the setup code using the instructions here. Once you get the code, follow the steps below to insert it into your blog

1. Log onto your blogspot.com account. For my own blog it is http://kaihuchen.blogspot.com/
2. Click on 'Design'
3. Click on 'Edit HTML'
4. Find the 'Edit Template' area and insert the code you got from deepWidget.com to the end of the HTML code, just before the closing HTML tag. The last part of your template code should looking something similar to the following:
   
   <script src='http://cdnsysfiles.smesh.net/javascripts/dwms.js'/> <script type='text/javascript'/> __dwms('xxxxxx/wp_xxxx') </script/>
   </html/>
   
   Your code should look a little different from the example given above with the 'xxxxx' being some numbers specifically generated for you.
5. Click on the 'SAVE TEMPLATE' button

And you are already done with the hard part! From this point on you can add, remove, or configure all kinds of widgets onto your blog in a WYSIWYG (what-you-see-is-what-you-get, i.e., no need to see or handle the code) manner, so it is all very easy.

Now The Fun Part

Next as a demonstration I will show you how to add a component (called 'widget') to your blog. For this you need to sign onto the deepWidget Sandbox, which is a web-based administration portal, and that's where you manage the widgets on your blog in an easy-to-use environment. If you are not familiar with the deepWidget Sandbox, please read the illustrated instruction here. Here I am just going to show you a simple example to give you a taste of how it works.

1. Go to http://deepwidget.com, sign on, and go into the 'deepWidget Sandbox'.
2. Enter the URL of your blog (the same one you used earlier when getting the setup code) into the Sandbox. You should see your blog displayed inside the Sandbox.
3. Click on the 'Add' button (on the left panel, near the icon of this widget) to display the widget gallery, then select the 'Business/professional Poster' widget. You should see this widget displayed in the Sandbox immediately.
4. Click on the 'Publish' button and confirm your action, and this widget is now live on your blog! See the lower-right corner of this blog for an example of such a widget.

If you open up your blog in another browser window now, you will see this widget already there. This widget will stay at the lower-right corner of your blog regardless of how your scroll the page. So there you now have a powerful way to announce something important (upcoming events, sales, important notice, etc.) on your blog, and keep it there at all times. This is something you cannot do previously unless you are a very good coder!

And of course you can go ahead to click on the 'edit' button to configure this widget with a different background image, a different 'decal' (i.e., the image at the lower-left corner of this widget), and also change the text to something that suits your need. You should be able to complete all these in just a couple of minutes, and then by simply clicking on the 'Publish' button again your blog instantly has the updated widget up there. No code, no mess.

From the Sandbox, you can go ahead to add other widgets onto your blog to try them out. I am sure you will be amazed at how easy it is to add all those cool-looking and useful widgets to your blog.

So here you have learned the basics about how to add widgets to your blog. The same procedure (except for the part about the one-time setup) also work for your website.

Advance Techniques

Since the postings on you blog are usually moved to secondary blog pages or to an archive after a while, you may find that sometimes it is desirable to keep a given widget in sync with a certain post. For example, if you have a post about a certain restaurant with a slideshow widget displaying the photos of dishes from the restaurant, then you certainly want this slideshow widget to stay with the post no matter where the post is moved to by the system. This way the slideshow also won't be present at all times displaying on top of other unrelated posts. This is certainly possible with deepWidget. The live 'Poster' widget that you are seeing here is in fact tied to this very post that you are reading right now, so you will find it disappears from the screen if you proceed to read other posts. I will talk more about how to do this later in a separate tutorial.

deepWidget Sandbox Tutorial

The website http://deepwidget.com offers an online service that allows you to add all kinds of cool widgets (e.g., slideshow, announcements, etc.) onto you website, blog, or Facebook page. It is an entirely new technology where it makes it appears as if you are placing such widgets directly onto your page. And aside from the one-time setup (which average non-technical user should be able to muddle through) you don't need to have HTML knowledge in order to use it.

If you want to know how deepWidget differs from all of the web widgets out there, you can find more about it in this post.

If you just want to get some really quick idea about how this whole thing works, you can watch this tutorial video right here at the bottom of this screen. Note that this video is displayed using a video widget that you could easily add to your own site as well. Note also that the video bar has this cool feature where it disappears as soon as you scroll this paragraph of text out of view. This is something that you can easily add to your blog or website as well, but that's for another post later.

In this post I will show you how to use the deepWidget Sandbox to add all kinds of cool components to your website in a matter of minutes. While this post may seems a little long, believe that it is actually fairly easy.

The deepWidget Sandbox is the web-based administration portal through which you can manage the widgets on your website, blog, or Facebook pages. Why do we need such a portal? Well, this is because it is the key to make it really easy to add cool components to your site, even if you are not technical by any stretch of imagination. In addition, this portal also makes it possible to support an entirely new type of widget called the 'mashup widget' that allows 'deep integration' with the content of your webpage. Don't worry if you have no clue what this means. I will have a post on this topic shortly. Meanwhile just take it to mean that there is a new type of web widgets with amazing functions coming your way soon.

There is nothing that you need to install in order to use the Sandbox. The Sandbox is known to work with Firefox 3.5+, Chrome 7+, and Internet Explorer 9+, so you will need one of these in order to use the Sandbox. Unfortunately the Sandbox does not work with Internet Explorer 7 or 8. While this means that you cannot use IE 7/8 to manage your widgets through the Sandbox, the widgets added to your website nonetheless will work just fine even on IE 7/8.


Registration

You will need to register yourself first in order to gain access to the Sandbox. There is no charge for registration, and you won't be asked your credit card number. You will get an email after registration, and you will need to click on the link inside the email in order to complete your registration.

Alternatively you can also access the Sandbox without registration simply by using your Facebook or Twitter account. This is not yet there as of the writing of this post, but it should become available very shortly.

Note that it is important that you always use the same way to access the Sandbox. If you sign on first using your Facebook account, and later sign on use your Twitter account, then you will end up with two entirely separate accounts with no way to share anything between the two. The same also applies if you have, say, multiple Facebook accounts.


Navigate to your website

Once you have signed on you will find yourself inside the deepWidget Dashboard. This is where you get to manage the list of your webpages that you have entered before. At this point this list is of course empty. Simply enter the URL of your target webpage into the text box at the top, and you will then be taken to the deepWidget Sandbox.  There where you can begin putting the widgets that you want onto your webpage.

If for any reason you can't or don't want to enter the URL of your target webpage, you may instead enter an arbitrary text label into the text box. In this case you will then see a 'test page' inside the Sandbox for you to play with the widgets.


Adding Widgets to Your Website

The Sandbox allows you to see a realistic copy of your webpage inside it, so that you can experiment with putting all kinds of widgets on it, adjust the widget's parameters, and preview the result to see if it is to your liking.

There is a possibility that for some reasons your webpage may not get displayed properly inside the Sandbox, and when this is detected a separate 'test page' will be displayed in its place. You can go ahead and put widgets onto this 'test page', and when 'published' (see below) the widgets will appear properly on your actual webpage.

The deepWidget technology is designed to work with any existing webpage, regardless of how it was created originally. Note however that there are some special cases where the widgets may not work properly on your webpage. This is more likely if your webpage is one of the following type:

1. It is heavily protected and the Sandbox is unable to access the page
2. It's page structure changes dynamically in complex manner
   
3. It is improperly coded and contains non-standard or erroneous syntax
4. It contains certain page components that are coded to be 'exclusive,' such as one that is coded to be always on top of all other elements on the page, thus covering up widgets added to the page.
   

Luckily unlike the cases above, most webpages are fairly simple so there is a good chance that your page will show up in the Sandbox without problem. If you run into such problems please report it to support@smesh.net, and we will do our best to find ways to resolve it.

Do the one-time setup

You can skip this step if you just want to try things out. If you skip the setup you won't be able to publish the widgets to your live site for real, but you still can experiment with the widgets in the Sandbox to see whether they work the way you wanted.

The setup involves inserting one line of code into your target page. It is an 'one-time setup' because once you have completed the setup you can put all kinds of widgets on your page, remove them, or change them at will without having the do the setup again. This is something that is totally unique.

To get the setup code:

1. Navigate to your target page in the Sandbox as described earlier.
2. Click the 'Get Code' button and copy the code to your clipboard.
3. Insert the code at the end of your target webpage, just before the closing 'body' tag
4. Deploy the updated version of your webpage to your web server.

The steps above may look a little scary if you are not technical, but fortunately once you are through it, you don't need to do it ever again (which is unlike the current web widget technology out there).

You can put the same setup code on multiple pages. If you do so then all these pages will be sharing the same set of widgets. This means that you update a widget on page A in the Sandbox, then you will find this change also get reflected on page B that has the same code installed. If you have two pages that are meant to have different widgets on them, then you should do this setup for these two pages with different setup code.


Adding a widget

Follow the simple steps below to add a new widget onto your target page displayed in the Sandbox:

1.  Click on the 'Add' button in the left panel. A gallery of widgets will display.
2. Click on the widget that you want to add.

At this point you should see the widget you selected appearing over your webpage. Note that what you are seeing is a fairly faithful rendition of how it is going to turn out on your live site, include animation, etc. You can repeat the steps above as often as you want to add many widgets onto your webpage. Just beware that in many cases adding the same widget twice does not make practical sense, and sometime two different widgets might occupy the same space so you should add only one of each type.


Updating a widget

When a widget is added initially to your webpage, it will assume some default look and feel. In most cases you do want to change some of its parameters in order to make it fit your needs. To do so:

1. Find the widget that you want to change in the left panel.
2. Click on the 'edit' icon there to bring up a widget editor. This editor displays all the parameters (color, text, link, image, etc.) that you are allowed to change.
3. Adjust the parameters as you see fit. Note that if a parameter is of the image URL type, then you may either upload your image to your deepWidget account (limitations apply as per you account), or if the image is located somewhere else on the Internet then you may simply enter the full URL for the image. You should be able to see your changes take effect immediately in the Sandbox.
   
4. Click on the "Save and Close" button at the top of the editor to save your changes. Note that if you neglected to click on this button and simply dismiss the editor, then the change you just made will not be persisted.
   

Publishing your changes

Let's say you have added widgets onto your page and configure them to your liking. At this point whatever changes that you have made in the Sandbox are not yet reflected on your live website. To make your changes 'go live' you will need to publish them from the Sandbox. To do so simply click on the 'Publish' button on top, and as soon as you confirmed the action the changes will take effect on your live site. You don't need to do any code copying like the current widget technology.


Deleting a widget

You can remove a widget previously added onto your webpage permanently simply by clicking on the 'delete' button (i.e., the trashcan icon) under a widget listed in the left panel. Note that you will then need to click on the 'Publish' button in order to get the deletion reflected on your live site.


Showing/Hiding a widget

Sometimes you may want to make a widget disappear from your live site, but still keeping it around in the Sandbox so that you can do something about it later (such as making it show up at a later time). You can achieve these using the 'show' or 'hide' buttons in the left panel.

To hide a widget on the live site:

1. Click on the 'hide' button for the widget to make it disappear from the Sandbox, and its corresponding control on the left panel will appear dimmed.
   
2. Click on the 'Publish' button to make the change take effect on your live site.
   

To show a previously hidden widget:

1. Click on the 'show' button for the widget will make it re-appear in the Sandbox, and its corresponding control on the left panel will change from dimmed to normal.
   
2. Click on the 'Publish' button to make the change take effect on your live site.

Refreshing a widget

Sometimes you may want to refresh a widget in the Sandbox. You may need this if you want to get the latest saved version of the widget to display in the Sandbox, or when the widget has disappeared by design (e.g., for the Splash widget which disappears automatically after a set time period).

To refresh a widget simple click on the 'refresh' button for the given widget in the left panel.

So there you have it! If you are still interested, then you should check out our gallery of widgets at deepwidget.com, or follow this blog where various widgets will be illustrated in detail from time to time.

Add Mobile Connection to your website with the QR Code

Have you ever seen something like this weird-looking image (see left) and wonder what it is for? Well, it is a kind of 2D barcode called the QR Code, and by just taking a picture of it using your smart phone you can make things happen on your phone, such as jumping to a website, calling a certain phone number, or sending a text message. It is most commonly used on printed material, such as product tags, posters, business cards, etc. Imagine going to the Home Depot and finding a pot of flower that you like, and then by simply taking a picture of the QR Code printed on the tag you are taken to a website with all the information about this type of flower!

It is also useful on your website or blog, where your users will be able to get your information (e.g., map, direction, phone number, URL to your mobile applications, etc.) onto their smart phone with minimum effort.

How you use the QR Code feature differs from phone to phone, so you may want to consult the manual for your model to figure this out. Following are the steps of what you have to do on a Blackberry Bold 9700:

1. Press the button with the Blackberry icon on it, which is to the immediate left of the trackpad.
   
2. Click on the "Instant Messaging" folder.
3. Click on the "BlackBerry Messenger" app.
4. Click on the "Scan a Group Barcode" entry
5. Aim your Blackberry' camera at the QR Code on the screen, so that it nearly fills the entire view of your camera. Wait a few seconds, and you will be prompted to either navigate to the target website, or call a certain phone number, etc.

On the right side of this page are two tabs that when clicked will display live QR Code widgets created from deepWidget. One of these will take you to a website, and the other will play an audio on your phone. Bring out your smart phone and give it a try now!

These widgets have the following features:

• Display the QR Code for the target URL or phone number in a floating panel that slides out from one side.
• The widget is docked to one side and turns into a tab when user closes the widget.
• The widget supports optional 'lightbox' effect, i.e., the dimming of the screen when the widget is displayed.
• Option to place the tab either on the right or left side of the screen.
• Choice of various tab styles.
• Choice of the tab's vertical location. You can combine several widgets of this type to create a nice group of tabs.

Note that if the URL that you are using for the QR Code is too long, then the resulting QR Code pattern may become too complex for some smart phones to pick it up reliably. In such a case you should use a URL shortening service such as http://goo.gl/ to shorten your URL first, and then enter the shortened version of the URL into the widget.

These are standard 'deepWidgets' that you can use for free. And just like other deepWidgets, adding these to your website or blog takes only a couple of mouse clicks. If you are not familiar with deepWidget you can find more information about it in this post or at the deepWidget website.

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.

Musings on the Instant Web

The Internet is evolving ever so quickly, and more and more people and businesses are feeling the need to have a presence over the Internet. Increasingly such needs are fulfilled through 'instant' and low-cost solutions such as posting on blogging or social networking sites, or using web widgets to enhance an existing website. While this has helped to make it easier to maintain a web presence, it is nonetheless still not an easy task. In particular for average people and small businesses who have little money or technical skills, there are constant challenges such as 'how do I do this or that my blogging site or website does not support', hopefully for free and dummy-proof too.

There was a time when adding up a larger table of numbers means that you will need to have a programmer at your disposal. It was expensive and took a while to do. And then the spreadsheet was invented, and its ease-of-use empowers average people to do more with less, which then created a revolution in personal computing. I believe that when it comes to maintaining a web presence we are still at the pre-spreadsheet era (so to speak). What we need are flexible web technologies that not only meet the many different needs of average people, but just like the spreadsheet also empower the average people to achieve what they need to do easily, quickly, and at low cost.

So here are my musings on where the Internet is heading, and also the solutions that are (or will be) available to the average people.