IdeaMonk

thoughts, ideas, code and other things...

Tuesday, March 24, 2009

PowerPoint for Web Mock-Ups

I had read a tip for web designers a few months back - Adobe Illustrator is good for creating mock-ups for a web apps. Well, I got another tip for all those short-cut hungry, time-savers out there - Use PowerPoint.
We had some 5 days left for submission of Project SpaceLock's architecture for Student2Business, and I had no idea how to show to my group, how the Web Interface would look like.
Enter Microsoft PowerPoint into the scene. All I did was layout the menus and a little background, that all, everything else was taken care by PowerPoint.
Don't believe me? have a look at the Mock-Ups yourself - http://www.slideshare.net/ideamonk/space-lock-web-ui

And then compare it to the finished user interface I did today -

Minor improvements are all that you will find. This is the first time I could complete a complete interface in just 4 hours, I usually take more that a day :O :P ;)
And guess what, mysteriously, I never had those famous nasty bugging IE6 design issues. It work's on a newly installed Windows XP too - http://spacelock.blogspot.com/2009/03/wow-that-worked-on-ie6-on-xp-too.html

The Lesson - Do look at PowerPoint too as an alternative for creating rapid prototypes and mocks for Web Interfaces.

Labels: , ,

Wednesday, February 18, 2009

Highlight a Textbox's content on click - Javascript

Project Snapsta is on hold for a while. Mostly due to my other projects and attempts to improve college life with WordPress. One good thing we did on Snapsta is the auto select on click i.e. when you click a text box, the whole content gets selected, so as to facilitate you in easy copy-paste operations.
Now here's the elegant javascript which helps me do that -

<script language="javascript"><br /> function SelectAll(element)<br /> {<br /> element.focus();<br /> element.select();<br /> }<br /></script>

Just put it in your <head> portion or the common js file you include in most of the pages.
Now here comes the ease and beauty, where ever you've gotta put in this functionality, just add an onClick event to the textbox.
Here's how it looks like -

# example 1
<input id="foo" name="beep" value="i get selected :)"
onclick="SelectAll(foo);" type="text">

# example 2 - even better ;) notice 'this'
<textarea onclick="SelectAll(this);">
content to be selected
</textarea>

[ voila, you didn't even need an ID in example 2]
Now isn't that great easy to implement tiny piece of wonder-code :P

Try it -

Labels: ,

Saturday, July 05, 2008

TumTube's Logo Design



























Just finished the design of TumTube's logo. TumTube is going to be a major Indian video sharing website. A lot of improvement is going to be implemented to add social features and engage users to its exclusive contents.
Click here to checkout this piece of work in action.

Labels: ,