SKETCH YOUR WEBSITE

If you already have an experience designing a website you are probably aware of how much difficult it is to design a good looking website based on your imagination. It really takes a toll of your thinking ability and I'm pretty sure you have always wanted to make a rough sketch on a piece of paper. That's what I'm going to discuss right now. It's always a great idea to sketch a website design or a single webpage design before actually coding them!

So you can always take a rough sheet, sketch some design that's coming to your mind, and I guess you know, how much easy things become after that. If you haven't tried this technique, trust me on this. And if you sketch them in a systematic manner, it eases your work to a great extent! What I mean by "systematic manner" is sketching your website on a paper browser! Paper browser is nothing but a browser drawn on a paper providing you a real time perspective of a real browser.

There are lots of paper browser templates available over the internet to download for free...specially THIS ONE.

But I wasn't satisfied with a downloadable template...and decided to make one of my own, taking Google Chrome as the browser template. Just a screenshot and few Photoshop editing did the trick for me. Here's what i got -

PAPER BROWSER WITH GRID


Page Size: 1024px * 768px


Grid Size: 32px


PAPER BROWSER WITHOUT GRID


Page Size: 1024px * 768px


Grid Size: NO GRIDS


These paper browsers helped me a lot to ease my designing job.
Here's an example of my work with a paper browser -

Hope you'll find paper browser quite useful!!

---

A SIMPLE POPUP USING JAVASCRIPT

I still remember, a long time back (almost a year), when I first wanted to implement a popup in my web-designs with translucent background. And as usual the internet and google were the first 2 things that came into my mind. I went searching on and found cool and sleek stuffs like greybox, lightbox, thickbox,....and lot, with neat colors and cool jQuery effects.

But back then it was pretty heavy for me and I wanted something simpler. So I thought why not I make a popup starting simply with JavaScript, without any jQuery effect! So, I rolled up my sleeves and started coding a popup with translucent background using simple HTML, css and JavaScript and wanted to keep it as simple as possible. And here's what I got -

DEMONSTRATION: CLICK HERE (Best viewed in Google chrome, Mozilla Firefox, IE7 and above)

» This is how I did it -

First, I created two <div> tags. One for the translucent black layer with id="overlay" and class="translucent_cover" and the other for the popup with message in it with id="top_block" and class="top_block". Then I put some content within the 2nd div, i.e, the message to be shown in the popup box.

HTML:

<div class="translucent_cover" id="overlay" style="visibility: hidden;">
</div>

<div class="top_block" id="top_block" style="visibility: hidden;">


<div class="text_embross">
<b>SIMPLE POPUP</b>
</div>
<hr/>
<div class="black_text">
<i>This is a demo of a little sophisticated version<br/>
of the simple popup using JavaScript.<br/>
Hope you liked it.</i>
</div>
<div align="right">
<input class="blue_button" onclick="close_pop()" type="button" value="Close" />
</div>

</div>

The next thing I had to do is to add css classes in oder to design those <div>s the way I wanted. The "translucent_cover" covering the whole page with black color and opacity of 80%. The "top_block" over it with content already added.

CSS:

.translucent_cover
{


position: absolute;
display: block;
height: 1500px;
width: 2000px;
top: 0;
left: 0;
z-index: 1000;
background: black;
-moz-opacity: 0.8;
opacity:.80;
margin-top: -300px; //adjust as per need
margin-left: -100px; //adjust as per need
filter: alpha(opacity=80);

}

.top_block
{

position: absolute;
display: block;
min-height: 100px; //adjust as per need
min-width: 350px; //adjust as per need
z-index: 1001;
background: white;
margin-left: -150px; // adjust as per need
left: 50%;
top: 65%;
border: 6px solid white;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
padding: 15px;

}

Next came the biggest thing. The designs being done, the only thing that was left was to adjust the popup's visibility using JavaScript. The first and foremost thing was to create an event either through a link or through a button or through any click that will call the function, which will initiate the pop-up's visibility. I chose to go for a link.

HTML:

<a href="javascript:void(0)" onclick="pop()">CLICK HERE</a>

Finally came the JavaScript functions:

JAVASCRIPT:

function close_pop()
{
document.getElementById("overlay").style.visibility='hidden';
document.getElementById("top_block").style.visibility='hidden';
}

function pop()
{
document.getElementById("overlay").style.visibility='visible';
document.getElementById("top_block").style.visibility='visible';
}

That's it..my simple JavaScript popup was ready and running. May be you might argue this is not the best way to do it, but still, I was pretty satisfied with my first popup. Later on, it went through a lot of optimizations with dynamic content loading ability and smooth jQuery effects, but this has been my first stepping stone! Don't worry, they'll be coming soon in this blog!

Hope you liked it...!!

---

SIMPLE POPUP

---

This is a demo of a little sophisticated version
of the simple popup using JavaScript.
Hope you liked it.

MY FIRST POST

Finally I decided my first post of this blog! MY IBM The Great Mind Challenge(TGMC) 2010 SRS for the project scenario ECOPS. An effort of my team's 20hrs at a stretch documentation!..pheww...it was pretty tiring!..and here it goes -

Ecops srs

LET THERE BE LIGHT

Today I was working on my computer, when my mother told me to switch on a light. I was so engaged with work then that i forgot to switch it on, and after some time she herself switched it on and scolded me.."can't you even switch on a light??"

Well, see....I CAN SWITCH ON A LIGHT! everybody can....



CLICK ON THE SWITCH TO TOGGLE(ON/OFF) AND SEE....