Desktop usability with DHTML

Getting users to like my web-based application is a problem. Whoever said that we should not just meet our customers' expectation, but should aim to exceed them, clearly has not met my user before. Give him what he asked for and he can still complain about a hundred other items that he wanted also. It is difficult putting all these nice features into our existing application, but what if we ravamp part of it with some nice widget?

Can we replicate his desktop application's ease of use with HTML and CSS? The boss asked me to explore how to get HTML to do drag and drop, and stuff like that. We know that it is do-able, we have seen websites doing these things, just that our company has yet to do any of these things internally. What I found blew me away.

There are now a lot of javascript libraries that you can use to create desktop functionality in a browser. It is time for my company's applications to get a face lift! Well, as much as their budget allows, anyway.

http://www.walterzorn.com/dragdrop/dragdrop_e.htm
Cool, now I can also get the latest coordinates of the dopped item and submit it back to the web server! I can resize the image and get its latest width, height, x and y coordinates, set it transparent when dragging and resizing it! It's under the Lesser GPL, which means I can use this in my commercial application, for free!

Other free libraries tend to work with lists, but this looks like IE!
http://www.activewidgets.com/grid/
Tabs, trees, lists, tables can now be done in your browser. The demo on this page is staggering! You can do up your IE Internet Options menu using just HTML!

http://tool-man.org/examples/sorting.html
You can do drag and drop boxes in lists and tables and all over the page. The best part is that lists and tables will arrange themselves and snap back into position smoothly when you drop another item in their midst.

http://brothercake.com/site/resources/scripts/dbx/
Lovely docking boxes that can be closed and dragged.

Advertisements

Leave a comment

Filed under interesting, tech

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s