Posts Tagged ‘drag+drop’

Art*chemistry*code = UI flexibility

Sunday, March 29th, 2009

I have an admission to make. I’m a person of peculiarities.

I like to adapt, re-configure and re-arrange things until I maximize utility and personal convenience from whatever technology I’m using. This, I believe, is a reflection of typical human creativity and curiosity. We all like to customize our environments: our homes, our clothes, our cars, our desks, our own bodies (anything from a simple ear piercing to plastic surgery) etc etc etc………The list is endless because humans are infinitely inventive and innovative.

Personally, my love of moving things around may stem from learning to play chess when I was about 5 and realizing that if I moved Piece X to a different square it completely changed the nature of the game. The adaptation trait first manifested itself when — before the advent of automatic pencils and earning any pocket money to buy lots of new pencils — I prolonged the usage of my pencil stubs by putting them into old felt-tip tubes which I’d widened by getting my Dad to gently heat them so the plastic would expand and I could push my pencil stub inside them.

In any case……..if something doesn’t exist that makes your life more convenient or beautiful……CREATE IT!

(Or move towards the mountain and climb it, step-by-steady-step, instead of fearing it from afar.)

The mountain before me is quite substantial. I want to code a genuine collaboration wiki-hub-whatjammijig. Instead of getting into a blind “headless chicken” panic about it I’m using the work of others to guide me.

For several years now, I’ve been in awe of Alan Kay and the development work which has taken place with the SQUEAK-TWEAK object-oriented languages (OOLs and OOPs to tech aficionados). Why? Well because it enables you to move things around at will. In certain respects it’s equivalent to the code version of biochemical mechanisms like proteins and DNA. Bits of code and UI objects can attach/detach to X,Y locations in a similar way to how molecules attach/detach to each other at X,Y locations. These concepts I understand well having studied organic chemistry in some depth.

To gain more insight on the processes I mean, please watch this YouTube video:

Now, in normal programming lexicon this ability to move objects around is known as “drag+drop”. It’s been shown on sites like iGoogle, netvibes and more recently Kosmix:

(incidentally, I’m excited by Kosmix’s potential as a search+browse alternative to Google as well as by the MeeHive offering which is being developed by the same company.)

In my quest to create a collab hub, I’m looking beyond the standard wikis like Wikipedia or even Wordpress Mu / multi-user Typepad. Here are three examples I’m looking at:

* GE’s Imagination Cubed

* Google Docs Draw

* Swarmsketch

So far, this is what I have in mind and have managed to code whilst I’m architecting as much user flexibility and collective wiki-ness as possible into Project ART:

Ideally, it will get to the stage where people can co-create a magazine online (graphics, video embeds et al within movable and editable panels) and not simply more UGC text of comments and opinions. This is all very valuable but there is nothing like working towards an end-product around which…

CONTRIBUTORS WILL EARN A SHARE OF THE ADVERTISING SPACE REVENUES because they helped to create it!

Ok, more time in the code bunker ahead for me…………..

Dynamic news RSS + Media Sensors integration

Sunday, December 28th, 2008

This is a preview of the dynamic AJAX news feed and user commenting page that will be released on @T (Always the Twain) in the New Year 2009. Content is dynamically loaded from multiple rss feeds which users have control over. In the top corner there’s a dialogue box into which the reader’s choice of feeds can be input. This then generates a feed box.

Most importantly each of these boxes is fully…………DRAG+DROP like iGoogle’s UI so users can prioritize their viewing panel. 

 

Additionally, once the feed box has been generated it’s possible to edit the feed — for example if instead of choosing the Technology pages from BusinessWeek users can change it to the Business page feeds. Over time images will also be automatically pulled in. The image below shows that some adjustment on the DIV css needs to be made first — LOL!

 

Once the RSS-all-in-one feature has been tidied up the next stage will be to incorporate the DIV which houses the Media Sensors rating tool into the xhtml. 

 

MEDIA SENSORS

This is completely my original idea. There are several variations on the 5-star rating system coded in Ajax / PHP / CSS as well as the “thumbs-up-thumbs-down” alternatives but there is absolutely no other system like Media Sensors with its proprietary calibration system, ratings pH, 360-2020 perception wheel and savable to a database — initially SQL.

It is arguably the best innovation I’ve originated to-date and something I’m really looking forward to developing further in 2009 because it is………..DISRUPTIVE………..UNIQUE………A GAME CHANGER!