Tuesday, January 25, 2011

My Top 10 Web Development Widgets/Control

We wanted our users to contribute web content and found tinyMCE as tool of our need. .TinyMCE is a javascript tool which provides an easy to integrate WYSIWYG editor. It can be integrate into content management systems for providing users ability to contribute web content.

A simple example of tinyMCE integration is

1. <script language="javascript" type="text/javascript"  src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
2. <script language="javascript" type="text/javascript">
    theme : "advanced",
    mode: "exact",
    elements : "elm1",
    theme_advanced_toolbar_location : "top",
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
    + "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
    + "bullist,numlist,outdent,indent",
    theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
    theme_advanced_buttons3 : "",

 <textarea id="elm1" name="elm1" rows="15" cols="80"><?php echo $sContent;?></textarea>

In the code sample above first we are actually including tinyMCE.js in the next line we are calling tinyMCE init method to initialise tinyMCE and we pass some parameters on the basis of what behaviour we expect. The most noticeable property is “elements” which defines which textarea element needs to be converted into a tinyMCE control.

Colorbox is a customizable lightbox. Lightboxes can be used in several ways.

1. In Showing Image SlideShows.
2. In preventing popup windows and providing a better alternative for showing intermediate warnings, confirmations or extra information.

Colorbox is a jQuery plugin the example page is at http://colorpowered.com/colorbox/core/example1/index.html.

I came to know about FFMPEG.exe in one of the joomla components “seyret” which is basically a component for uploading,downloading, playing of Multimedia files. In its core seryret uses ffmpeg.exe for conversion of one video format to another and for creation of thumbnails for videos and images. Since joomla is a php cms it uses shell_exec command to execute a ffmpeg.exe command.

An example of ffmpeg command line is: 

ffmpeg.exe -i "imageLarge.jpg" -y -f mjpeg -s 72x92 -vframes 1 -an thumbnail7292.jpg

As the command suggests a larger image's thumbnail of size 72*92 is generated in this command.

Another example where conversion from one video format to other happens

ffmpeg.exe  -i video1.avi -ab 56 -ar 44100 -b 200 -r 15 -s 320x240 -f flv video2.flv

The command converts avi format to flv format.

for a more compiled list of ffmpeg command read http://www.catswhocode.com/blog/19-ffmpeg-commands-for-all-needs

4. SWFUpload
This is again another control we learned from Seyret. Seyret uses SWF Upload as flash based file upload tool. It’s a small JavaScript/flash based library which uses upload capabilities from flash and combines the strength and beauty of JavaScript events and HTML/CSS. SWF Documentation is available at http://demo.swfupload.org/Documentation/.

While searching Content on Google you start getting Suggestions based on what you are typing this helps users in many ways, A user can have certain words on mind and he is not aware of exactly what to type AutoSuggest helps him certain matching results based on what he has typed and eases the search. Search as you Type or as popularly called SAYT is an open source script from Google which provides Auto Suggest behavior the SAYT implementation guide is available at http://code.google.com/p/search-as-you-type/wiki/SearchAsYouTypeInstallationGuide . Another similar implementation is with jQuery UI plugin and is called AutoComplete.
We wanted our users to rate articles contributed by business and we wanted the rating system to be natural and intuitive.
We found star rating control as a wonderful idea for doing this.
Technically star rating can be implemented in a number of ways. One way is to use a set of LI elements and beautify those using CSS to look like stars. Each LI element will have an anchor as a child in it and anchor will point to a JavaScript function to support AJAX hit capture. Another method can be to setup a set of radio buttons and beautify radio button with CSS to look like stars.

7.Date-picker or Calendar Control
When on a HTML form you need your user to enter date in a particular format. It’s better to provide him a date control jQuery-UI provides a comprehensive api for using date control and using its variations in different ways.
8. Data-Grids.
We are having a metrics site which shows some tabular data in a grid. Quite recently we had to modify some of the information in this grid and we found that the grid is basically a jQuery plugin named flexigrid, what I found wonderful about flexigrid was its clean approach for fetching and populating data inside it. Flexigrid has a Constructor in which a settings object is passed. Settings object takes several parameters important of which are “URL” which tells which url to hit for getting the data. “dataType” which tells what kind of dataType its expecting like JSON XML etc.

Ext-JS is another JavaScript library provides most robust set of grids. However its open source license must be read carefully before starting to use it.
Carousels are great UI component to show a series of thumbnails in a small space on your web page. Several JS Libraries provides implementation of Carousels. The one we have used is from jQuery http://plugins.jquery.com/project/uicarousel .

10. Graphs.
Graph are great way of doing quick analysis of your data to gain to understand trends and retrieve information. There are various api’s available in different programming languages for drawing graphs based on certain input parameters like in php we have API’s like jpgraph and graphpite in java we have JgraphT and EasyCharts. We used jQuery’s sparkline plugin for creating graph.


  1. Welcome to the world of blogging!
    I am great fan of your UI skills and know world can get benefit by your views around the subject.

    Keep posting!!

  2. This is the era of Internet and whole world is depending on internet for their daily needs. Popularity of an application depends upon their usability and how much user-friendly it is! Sushil, whatever tools and application you mentioned above have removed the gap between Desktop applications and web applications. Tools like ffmpeg, sparkline chart, tinymce, datepicker, caraousels are very useful in developing rich internet applications.
    Thanks for sharing your experiences with these tools.

  3. Hi, I appreciate your speculating as it attracts people’s attention and make this topic discussable.
    High quality website design services have become very expensive for the UK
    Web Development UK

  4. I am very impressed with your views and interesting content. I hope you intend to continue writing more informational articles.This blog Is very informative , I am really pleased to post my comment on this blog..
    joomla extensions

  5. Hey friend! You’ve got a interesting weblog here. I truly liked it. Very nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts.