1. TinyMCE
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”>
tinyMCE.init({
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,”
+“undo,redo,cleanup,code,separator,sub,sup,charmap”,
theme_advanced_buttons3 : “”,
height:“350px”,
width:“600px”
});
</script>
<body>
<textarea id=“elm1” name=“elm1” rows=“15” cols=“80”><?php echo $sContent;?></textarea>
</body>
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.
2. Colorbox
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.
3. FFMPEG
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 72×92 -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 320×240 -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
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.
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.
9. Carousels.
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.
My Top 10 Web Development Widgets/Control
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!!