Work, distractions, responsibilities and expectations

WORK

Today I want to write about my regular day at work. I will start with work. This is the first thing I love in my life. I like my job a lot and I guess everyone does. Oops! No.... not everyone like their job but a few are very lucky who like what they do. This helps these lucky people create something that they haven't seen or done before. They read and understand what other gurus are doing and they always think about improving their level of quality.

DISTRACTIONS

What if there are so many distractions around me when I am doing my work? I have some work to be delivered in four hours, I'm completely focused in my task and suddenly someone pings me on IM asking for some other work or some help. There isn't one person who distracts me, there are minimum 4/5 people asking for different tasks and helps at the same time. What am I suppose to do? Reply to their questions / leave my desk go to their desk to help them / explain something to someone about how a particular thing can be done / understand what the requirements are / leave everything and focus on my task that I am suppose to deliver in four hours? These question remain unanswered.

RESPONSIBILITIES

My bosses: With the fact that you are a senior employee, it's mandatory for you to be a part of every project that we are working on PLUS the every new project that is coming in. We don't care how you will manage it but we know one thing that you will manage it. Because you are already managing this everything from last two years.

My Developer Colleagues: We work for only one project until the project gets over. Since you are the only designer and UI developer we have for our project, you must respond to our queries instantly. We don't care if you are working on other projects or not. We care about the project we are working on. So keep everything aside that you are doing and solve our issues first.

EXPECTATIONS

In my five years of experience in IT industry I have learned many things, one of them is Expectations. Most of the developers/managers/bosses expect a 'quick response' from others. If they have a query / work / question they will ask you on IM and they will expect a very quick response from you. Sometimes I feel they have kinda lost the sense of patience. Basically it's not their fault. There are many reasons for this lost of patience-ability -

            1. it’s because there is someone else who has asked him about that query/question. He knows that I can solve his issues, so he pings me and expects a quick response.

            2. He has project delivery in an hour and suddenly something stops working. He pings me and expects a quick response because he has very less time to deliver.

            3. He tries to solve the issue on his own. He spends two/three hours on it. He gets frustrated, he pings me and expects a quick response because he is already frustrated.

Spending each day in such environment is a gift for me. This helps me improve my learning & understanding. I also receive a 'Thank You' reply from many people every day, which is great!

Thank you friends for making me work, for distracting me, for making me responsible & for expecting a lot from me. It's because of you I go to bed SATISFIED.

CSS3: Multiple background images explained

CSS3 has introduced us to many wonderful features that we always expected. One of the best features amongst all those is the "multiple background images". It gives us the freedom of attaching multiple background images to a div, p, span etc.

Here is how it works in practical -

<style type="text/css">
@font-face{
font-family: HoneyScript;
src:url(HoneyScript-Light.ttf) format("truetype");
}
.multipleBGs{
margin: 0 auto;
width: 600px;
padding: 10px;
text-align: center;
background: rgba(244, 244, 230, 0.9);
border: 1px solid #d1d1d1;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;

box-shadow: 6px 6px 20px #999999;
-moz-box-shadow: 6px 6px 20px #999999;
-webkit-box-shadow: 6px 6px 20px #999999;
}
.attachBgs{
height: 200px;
padding: 24% 0 8% 0;
background: url(design1.png) no-repeat left top, url(design2.png) no-repeat left bottom, url(design3.png) no-repeat right top, url(design4.png) no-repeat right bottom;
font-family: "HoneyScript", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #638cc5;
}

</style>

<div class="multipleBGs">
<div class="attachBgs">Welcome to the world of multiple backgrounds</div>
</div>

CSS3 Backgrounds compatibility table - http://www.quirksmode.org/css/background.html

Note: Mobile UI developers - please don't wait for w3c's 100% recommendation to CSS3. This feature works perfectly on webkit engine. Use it! Use it now!

HTML5 Video Element

When we use the words HTML5 and CSS3 the very first thing that strikes in is Video/Audio tags introduced in HTML5. Any UI developer keen to learn new trends would surely try to work on these tags and keep them for future references or if he is also working on mobile UIs he will dare implement it for mobile because mobile browsers use webkit browser engine.

Here we go...

I used these tags and checked it in browser on my local machine. It works perfectly! WOW!!

<video width="640" height="360" controls id="movie" poster="movies/html5-iphone.jpg">

<source src="movies/Nimbooda.mp4">
<source src="movies/Nimbooda-Fogg.ogv">

</video>

Since it was working on my local machine I thought of checking it online and uploaded the files on server. OMG! What the hell is happening? It's perfectly working on my local machine, why isn't it working online?? DEAD......

I went on googling. Thankfully Google helped me out with two things I was missing 'types' and 'codecs'. Alright! I've added these attributes. Still no luck. What the....

<video width="640" height="360" controls id="movie" poster="movies/html5-iphone.jpg">

<source src="movies/Nimbooda.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movies/Nimbooda-Fogg.ogv" type='video/ogg; codecs="theora, vorbis"'>

</video>

<script type="text/javascript">
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
});
</script>

Again had to take help of Google, after reading on and on I read this sentence "You need to contact your webhost and get them to add .ogv - video/ogg as a valid MIME type (they should know what you mean) same for MP4."

The root of all evil was the MIME type on server. Make sure you get this done before struggling with page re-load and re-upload.

And finally Fallback for IE -

Note that you shouldn't include classid in the object tag in order to be compatible with browsers other than Internet Explorer.

<!-- IE Fallback -->
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="350" id="newIdPlayer" height="300" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="flash-video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="" />
<param name="base" value="" />


<param name="flashvars" value="filePath=videos/Nimbooda" />

<embed base="" src="flash-video.swf" flashvars="filePath=videos/Nimbooda" quality="high" width="350" height="300" name="newIdPlayer" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

Breaking long word in Table-->TD

1. To table: style="table-layout:fixed;"
2. To td: style="word-wrap: break-word;"

<style type="text/css">
.mainDiv{
width: 600px;
margin: 0 auto;
background: bfbfbf;
}
.colorRows{
background-color:#FCF8EF;
border-right:1px solid #000000;
font-weight:bold;
height:34px;
padding:2px 2px 0 10px;
text-align:left;
vertical-align:middle;
}
.colorRows td{
word-wrap: break-word;
}

</style>



<div class="mainDiv">
<table cellpadding="0" cellspacing="0" align="center" width="100%" border="1" style="table-layout:fixed;">
<tr class="colorRows">
<td align="center" width="20%">Some Content</td>
<td align="center" width="20%">Some Content</td>
<td align="center" width="20%">SomeContentSomeContentSomeContentSomeContentSomeContentSomeContentSomeContentSomeContent</td>
<td align="center" width="20%">Some Content</td>
<td align="center" width="20%">Some Content</td>
</tr>
</table>
</div>

jQuery show hide multiple rows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery show hide multiple rows</title>

<style type="text/css">
.ClassDetails{
width: 330px;
}
.ClassDetails ul li:first-child{
border: 0 none;
width: 100%;
}
.ClassDetails ul li{
display: block;
float: none;
margin: 0 0 10px 0;
}
.ClassDetails .LiLink{
background: url(../images/ClassDetailsLinkIcon.gif) no-repeat left 2px;
padding: 0 0 0 14px;
text-decoration: none;
}
.ClassDetails .LiLinkActice{
background: url(../images/LinkIconActive.gif) no-repeat -1px 4px;
}
.ClassDetails .LinkDesc{
padding: 8px 0 0 12px;
}
</style>

<script type="text/javascript">
//Make the default settings
$(".LinkDesc:not(:first)").hide();
$(".LinkDesc:first").show();
$(".ClassDetails ul li a").addClass("LiLinkActice");

//Show/hide next element after the link
$(".ClassDetails ul li a").click(function(){

$(this).toggleClass()"LiLinkActice");

var currentDescDiv= $(this).next();

$(".LinkDesc").hide(0, function(){
currentDescDiv.show();
});

});
</script>

</head>

<body>

<h4>Show Hide multiple rows with jQuery's $(this) function </h4>
<h4>This example has jquery 'not()' ':first' and '(this)' functions</h4>


<ul>
<li class="ClassDetails">
<ul>
<li>
<a href="#" class="LiLink">Title 1</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 2</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 3</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
</ul>
</li>

</ul>

</body>

</html>

Styling <hr> Element

hr{
margin: 0 0 2px 16px;
padding: 3px 0 0 0;
border-bottom:1px solid #a8a7a2;
border-top:0px;
border-left:0px;
border-right:0px;
line-height:0px;
height:1px;
display:block;
width: 97%;
}

jquery show-hide toggle

Starting with the script =

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$(".departDates li").hover(function () {
$(this).children(".showFlightPopup").toggle("slow");
});
});

</script>

CSS =

<style type="text/css">
.departDates{
border-top: 2px dotted #6c6c6c;
padding: 10px 0;
line-height: 18px;
overflow: hidden;
}
.departDates .showFlightPopup{
width: 150px;
border: 1px #d7d7d7 solid;
position: absolute;
background: #fff;
margin: 0 0 0 40px;
display: none;
}
</style>

And the markup
<ul class="departDates">
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
</ul>

Accordion Forms to avoid multiple pages form submitting process

Accordion forms use dynamic interactions on a single web page to hide and reveal sections of related questions as people go through the process of completing a form. This allows people to focus their attention on one set of questions at a time without requiring them to navigate between different web pages.




Read more on - http://www.alistapart.com/articles/testing-accordion-forms/

hypenation & text-align:justify

Using text-align:justify; looks good for news-paper, magazine and books. In print media they use the typeset called 'hypenation' which adds a hypen('-') at the end of the line if a word is too big to fit in the same line. This technique works very well in print media, but if we want to use the same on web it's very hard to implement and would be foolish to make hard coded efforts like this -

With the elec&shy;tron&shy;ic word, au&shy;thor&shy;ity dif&shy;fuses it&shy;self between writer and read&shy;er. Al&shy;though we sel&shy;dom think of it in this way, the print me&shy;di&shy;um

We need add &shy; in every long word, that's a tedious task to do. Another bad impact of using text-align:justify on web is that the paragraph creates a 'river of spaces' on the page where we loose the readability aspect. Additionally, these &shy; space may create difficulties for search engines. - http://www.cs.tut.fi/~jkorpela/shy.html#se

Read more on - http://www.alistapart.com/articles/the-look-that-says-book/

Chrome, Safari (Webkit) - get rid of the border on fucus

When you set focus on any form field in IE or Firefox the fields don't change their appearance much, but in Safari and Chrome it's quite visible. Set it's outline to none and say goodbye to that annoying border. Here goes the css -

.signup input:focus
{
background: #f00;
background-position: 379px -61px;
outline: none;
-moz-outline-style: none;
-webkit-outline-style: none;
}

HTML combobox(select drop down) issues in Safari

There are two main CSS attributes related to select form tag that Safari browser for windows doesn't understand.

1. If I assign a border to 'select' tag in CSS the Safari browser will not display the 'dropdown icon' at all.

2. If I want to increase the height of combobox I will possibly use a 'height' or 'padding' attributes. Safari doesn't understand both the attributes in case of 'select' tag. In order to increase the height of dropdown box in safari 'line-height' attribute comes to rescue.

Remember: If you set border or background color to combo box, it will not display the drop down arrow on Safari.

select {
padding:2px 3px 2px 2px;
line-height: 20px;
vertical-align:middle;
}

<select>
<option>Please Select</option>
</select>

CSS3 HTML5 form validation

http://www.alistapart.com/d/forward-thinking-form-validation/enhanced_2.html

http://www.alistapart.com/articles/forward-thinking-form-validation/

Editable DIV With character count

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Editable DIV and character count</title>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
/*
$(document).ready(function(){
alert($("#content").text().length);
});
*/
</script>


</head>

<body>

<div id="content" contenteditable="true" style="border:1px solid #f00;">ABC</div>

<script type="text/javascript">

var count = document.getElementById("content").innerHTML.length;
alert(count);

</script>


</body>

</html>

jQuery: hide div when click outside

Useful for log-in popups/dropdown menus/links

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>jQuery: hide div when click outside</title>

<style type="text/css">
a{
text-decoration: underline;
color: blue;
cursor: pointer;
}
.headerLogin{
background: #fe0000;
position: absolute;
top: 40px;
left: 50px;
z-index: 2;
padding: 6px;
margin: 0 -4px 0 0;
width: 200px;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
display: none;
}
</style>


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".headerLoginLink").click(function(){
$(".headerLogin").slideDown('slow', function() {
// Animation complete.
});
/*
if ($(".headerLogin").is(':hidden'))
$(".headerLogin").show();
else{
$(".headerLogin").hide();
}
return false;
*/
});

$('.headerLogin, .headerLoginLink').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
//$('.headerLogin').hide();
$(".headerLogin").slideUp('slow', function() {
// Animation complete.
$(".headerLogin").fadeOut('slow');
});

});

});
</script>

</head>

<body>

<a class="headerLoginLink">Login</a>

<div class="headerLogin">
<span>
<input type="text" value="email" onfocus="if(this.value=='email'){this.value=''}" onblur="if(this.value==''){this.value='email'}" />
<input type="password" value="password" onfocus="if(this.value=='password'){this.value=''}" onblur="if(this.value==''){this.value='password'}" />
</span>
<b class="fBeforeLoginText"><input type="checkbox" /> remember &nbsp; <a href="#">forgot password</a></b> <br />
<span><input type="button" value="login" /></span>
</div>


</body>

</html>

jQuery, CSS overlay popup onload

jQuery: I'm Lovin It!



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>CSS overlay onload</title>

<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
color: #000;
}
a{
cursor: pointer;
}
img{
border: 0;
}
.sliderWrap {
margin: -141px auto 0 auto;
position: relative;
background: #ccc;
width: 300px;
height: 159px;
text-align: center;
}
h1{
padding: 0;
margin: 0;
}
.openCloseWrap {
position: absolute;
bottom: 0;
font-size: 12px;
font-weight: bold;
}
</style>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".sliderWrap").animate({
marginTop: "0px"
}, 500 );

//$(".sliderWrap").fadeIn().delay(2000).fadeOut('slow');

$("#topMenuImage").html('<img src="close.png" alt="close" />');
/////////////////////////////////////////////////////////////////////////
$(".topMenuAction").click( function() {
$(".sliderWrap").animate({
marginTop: "-160px"
}, 500 );
$("#topMenuImage").html('<img src="open.png" alt="open" />');
});

});
</script>


</head>

<body>

<div class="sliderWrap">
<h1>Isn&#39;t this nice?</h1>
<div class="openCloseWrap"><a id="topMenuImage" class="topMenuAction"><img alt="open" src="open.png" /></a></div>
</div>


</body>

</html>

Download source file here

CSS/HTML: Wrap long word/url

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Word Wrap</title>

<style type="text/css">
.wrapMe{
width: 350px;
border: 1px solid #090;
word-wrap: break-word;
}
</style>

</head>

<body>
<div class="wrapMe">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>

</html>

42 Desing/Tech Magazines to read

In order to keep yourself updated with latest developments in Design, Web-related areas and developments, it's essential to read design/tech online magazines. However the WWW is huge and so are the choices. you can find 42 design/tech magazines in this link - http://www.smashingmagazine.com/2007/03/19/40-designtech-magazines-to-read/

Check what Bing is doing with HTML5

Microsoft, which seems to be pushing Google to try new things, continues to experiment with its Bing search engine. Check out what engineers have done with Bing and HTML5 in the video below:





I will come up with HTML5's all separate implementations(tutorials) soon!

Developing website for iPhone?

Here is Apple to your rescue - http://developer.apple.com/iphone/index.action

CSS :first-child, :last-child pseudo elements

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS first-child last-child pseudo elements</title>
<style type="text/css">
.pDiv p:first-child {
color: #00f;
}
.pDiv p:last-child {
color: #f00;
}
</style>
</head>

<body>
<h1>First child and last child of any element. Best use for navigation/td borders/float
div margins, paddings/UL LI first and last</h1>

<div class="pDiv">
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</div>

<h4>:last-child doesn't work in IE 7 and 8</h4>

</body>

</html>

CSS :before, :after selectors

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Test paragraph with before and after selectors</title>

<style type="text/css">

p.test:before {
padding-right: 5px;
content: url(googleIcon.jpg);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}

</style>

</head>

<body>

<p class="test">Test paragraph with </p>


</body>

</html>

5 questions for 35 designers

http://www.smashingmagazine.com/2007/04/20/35-designers-x-5-questions/

(Almost) never add a reset button to a form

There was a time when many, many, forms on the web had a reset button. Thankfully, reset buttons are not quite as common these days, but there are enough of them out there to cause users lots of frustration.

I can’t remember one single time in my years of building web sites that I have encountered a form that actually needed a reset button. That doesn’t mean that there are no valid use cases for reset buttons, but I think it does indicate how rarely they should be used.
One of the very few valid use cases for rest buttons is when a form is filled out repeatedly and frequently by the same user.
When you click a reset button in a form, all controls in the form are reset to their initial values, removing anything you have entered and any changes you have made. This is rarely what the user wants, and it can happen much too easily since

• reset buttons are often placed next to a submit button, making them easy to click by mistake
• most of the time, no warning is given before the form is reset

Next time you consider adding a reset button to a form, think it through very carefully first. Does the user really benefit from being able to reset the form? Is being able to reset the form to its initial state so valuable that it is worth the risk of the user losing the data they have entered? Probably not.


Source - http://www.456bereastreet.com/archive/200909/almost_never_add_a_reset_button_to_a_form/

jQuery target attribute instead of javascript window.open

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery target attribute instead javascript window.open</title>


<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
$("a.new-window").append(' <em>(new window)</em>').attr('target', '_blank');
});


</script>

</head>

<body>

<a class="new-window" href="http://www.google.co.in">Google in new window</a>
<br />
<a href="http://www.in.msn.com">MSN in same window</a>

</body>
</html>

For better explanation visit to - http://www.456bereastreet.com/archive/201006/new_windows_with_javascript_and_the_target_attribute/

Elements of design

Design is the organized arrangement of one or more elements and principles (e.g. line color or texture) for a purpose.

Design elements are the basic units of a visual image. These elements include:

Space
Space is the area provided for a particular purpose. It may have two dimensions (length and width), such as a floor, or it may have three dimensions (length, width, and height). Space includes the background, foreground and middle ground. Space refers to the distances or areas around, between or within components of a piece. There are two type of space: positive and negative space. Positive space refers to the space of a shape representing the subject matter. Negative space refers to the space around and between the subject matter.

Line
Line is the basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two dimensional shapes like a house's plan. Every line has length, thickness, and direction. There are curve, horizontal, vertical, diagonal, zigzag, wavy, parallel, dash, and dotted lines.

Balance
Balance can be either symmetrical or asymmetrical. Balance also refers to a sense that dominant focal points don't give a feeling of being pulled too much to any specific part of the artwork. Balance can be achieved by the location of objects, volume or sizes of objects, and by color. It can also be achieved by balancing lighter colors with darker colors, or bold colors with light neutral colors.

Color
Color is seen either by the way light reflects off a surface, or in colored light sources. Red colors seem to come forward while blue seems to recede into the distance. Color and particularly contrasting color is also used to draw the attention to a particular part of the image. There are primary colors, secondary colors, and tertiary colors. Complementary colors are colors that are opposite to each other on the color wheel. Complementary colors are used to create contrast. Analogous colors are colors that are found side by side on the color wheel. These can be used to create color harmony. Monochromatic colors are tints and shades of one color. Warm colors are a group of colors that consist of reds, yellows, and oranges. Cool colors are group of colors that consist of purples, greens, and blues.

Shape
A shape is defined as an area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, color, or texture. Shapes can also show perspective by overlapping. They can be geometric or organic. Shapes in house decor and interior design can be used to add interest, style, theme to a design like a door. Shape in interior design depends on the function of the object like a kitchen cabinet door. Natural shapes forming patterns on wood or stone may help increase visual appeal in interior design. In a landscape, natural shapes, such as trees contrast with geometric such as houses.

Texture
Texture is perceived surface quality. In art, there are two types of texture: tactile and implied. Tactile texture (real texture) is the way the surface of an object actual feels. Examples of this include sandpaper, cotton balls, tree bark, puppy fur, etc. Implied texture is the way the surface on an object looks like it feels. The texture may look rough, fizzy, gritty, but cannot actually be felt. This type of texture is used by artist when drawing or painting.

Form
Form is any three dimensional object. Form can be measured, from top to bottom (height), side to side (width), and from back to front (depth). Form is also defined by light and dark. There are two types of form, geometric (man-made) and natural (organic form). Form may be created by the combining of two or more shapes. It may be enhanced by tone, texture and color. It can be illustrated or constructed.

Value
Value is an element of art that refers to the relationship between light and dark on a surface or object and also helps with Form. It gives objects depth and perception. Value is also referred to as tone.

Source - http://en.wikipedia.org/wiki/Design_principles_and_elements

The best markup(HTML) for web forms

While HTML-izing forms web developers/designers usually prefer to go with 'table' structure and if the client insists for 'div' structure we have no another option than creating a 'sea of div' tags with float:left and float:right attributes.

Recently I spend some time looking for a better way of HTML-izing form and it was a relief for me to come up with the markup and css below -


<style type="text/css">

.signup ul{
padding: 20px;
margin: 6px 0 0 0;
}
.signup ul li{
padding: 4px 0;
}
.signup ul li label{
display: inline-block;
text-align: right;
}
.signup ul li input{
width: 204px;
}
.signupCont ul li img{
vertical-align: middle;
}

</style>


<div class="signup">

<ul>
<li>
<label>Full Name:</label>
<input type="text" tabindex="1" id="Text1" />
</li>
<li>
<label>Last Name:</label>
<input type="text" tabindex="2" id="Text2" />
</li>
</ul>

</div>

CSS3: Multi-column layout

Using CSS3 for Multi-column layout is the way to go for the web developers, though IE7 and IE8 don't support this CSS attribute. We can always create a separate CSS file for IE7 and IE8, where we can define a columned inline bock level CSS for these two IE versions. It would be a great beginning if we start using CSS3 from now on.

<style type="text/css">

div#multicolumn1 {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

</style>


<div id="multicolumn1">

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

</div>

CSS3: Gradient Background Color

Okay... if you need to use an image anyway, why bother with declaring the gradient with CSS?

That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

<style type="text/css">

/*Horizontal Gradient Background*/
#linearBg1 {
height: 100px;
width: 760px;
background-color: #1a82f7;
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important;
background-image: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)) !important;
background-image: url(linear_bg_1.png);
}
/*Vertical Gradient Background*/
#linearBg2 {
height: 100px;
width: 760px;
background-color: #1a82f7; /* fallback color */;
background-image: url(linear_bg_2.png); /* fallback image */;
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

</style>

Using CSS3 @font-face; it's great!

EOT(Embedded OpenType)
IE supports EOT format(Including IE9)

OTF = IE9 will support PostScript-flavored OTF CFF fonts, as do the rest of the “big five” browsers.

So, it would be a good thing to convert TTF(TrueType Format) to OTF(OpenType Format)
Online Font Converter = http://onlinefontconverter.com/ (Skip Login)


Here is how we can use it -
<style type="text/css">

@font-face{ /* for IE */
font-family:Angelina;
src:url(angelina.eot);
}
@font-face { /* for non-IE */
font-family:Angelina;
src:url(angelina.ttf) format("truetype");
/*url(http://:/) format("No-IE-404"),url(angelina.ttf) format("truetype");*/
}

body {
font-family: "Angelina", Arial, Helvetica, sans-serif;
font-size: 2em;
}

</style>

For more information about font format support in different browsers, refer these links -
Links to refer -
http://code.google.com/webfonts
http://openfontlibrary.org
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/

Are You Adding CAPTCHA To A Form?

If you are adding CAPTCHA to a form, it would be a good usability aspect, if we make the text field(Not Case Sensitive) and put small note below the text box which says “Note: Type the characters shown in the image above (not case sensitive).”


Specifying not case sensitive is important because many people try to type the characters as it appears in the image and they fail. Most of the times it’s difficult to identify if the character is Capital or Small.


It’s only a better user experience practice.

Word Wrap un Visual Studio 2008

Word Wrap un Visual Studio 2008, keyboard shortcut key = ctrl+E+W

Introduction to UX Design & Testing

An Introduction to UX Design & Testing

View more presentations from A.J. Kandy.

Meaning of all HTML Meta Tags, The most important meta tags

Meaning of all Meta tags:
http://www.metatags.org/all_metatags


Meta Tags Google Advice:
http://www.webmarketingnow.com/tips/meta-tags-google-meta-tags.html

AS3.0 adding total time and lapsed time to a FLVPlayback Video Player

player.addEventListener(MetadataEvent.METADATA_RECEIVED, timeListener);

function timeListener(eventObject:MetadataEvent):void {
var totalSeconds = String(eventObject.info.duration);
var durationTime:String = (totalSeconds > 3600 ? Math.round(totalSeconds / 3600) + ":" : "") + (totalSeconds % 3600 < 600 ? "0" : "") + Math.round(totalSeconds % 3600/60) + ":" + (totalSeconds % 60 < 10 ? "0":"") + Math.round(totalSeconds % 60);
TxttotalTime.text = durationTime;
}

stage.addEventListener(Event.ENTER_FRAME, updateTime);

function updateTime (ev:Event):void {
var elapsedSeconds = String(player.playheadTime);
var runTime:String = (elapsedSeconds > 3600 ? Math.floor(elapsedSeconds / 3600) + ":" : "") + (elapsedSeconds % 3600 < 600 ? "0" : "") + Math.floor(elapsedSeconds % 3600/60) + ":" + (elapsedSeconds % 60 < 10 ? "0":"") + Math.floor(elapsedSeconds % 60) ;
elapsedTime.text = runTime;
}

Regards, Dipak

HTML textarea resize in Chrome & Safari(webkit)

The 'resize' CSS property is basically CSS 3 property and it's currently turned ON by default for textarea in webkit. Setting this property to 'none' will disable resizing.

Here is the example -

<textarea cols="50" rows="10" style="resize:none;">
You text
</textarea>

Regards,
Dipak.

Myths of UI Design

Because user interface design is not an established and recognized discipline, the vacuum is filled by all sorts of people with very different skills.

MYTH: Good user interface developers can both design and code the user interface.

REALITY: An analogy would be to ask an HCI expert to design the user interface and the internals, and then go ahead and code the product. User interface coders implement designs; their skill is designing and coding the internals. Mitch Kapor's (1996) ideal of a software designer as distinct from software coder is not the current practice. Typically, user interface design is done by a coder on a part-time basis. This practice is attributed by Terry Winograd (1996) to the immaturity of software development. In building construction, the division of labor between architect and contractor evolved as the industry matured. Occasionally, an exceptional software developer can both design and code the user interface, but the majority do not have the critical skills for user interface design. These include:

• The ability to apply the principles of navigation, selection, direct manipulation, consistency, and standard interaction styles
• The ability to apply user input to design (wants and needs, tasks and scenarios, competitor information, feedback on user interface designs)
• A grasp of high-level design (metaphors, user models, systems design, usefulness and conceptual consistency, task flow)
• An understanding of user interface paradigms (form-based, menu-based, application-oriented graphical user interfaces, multiple-document interfaces, object-oriented interfaces, compound-document interfaces) and knowledge of what makes a good hybrid

Of course, a coder needs to appreciate design (just as a designer needs to appreciate implementation constraints). Each has their own expertise. Communicating their designs is at least half the job for user interface designers. This task continues right up to the product ship date, in order to avoid the "last person to touch the code is the user interface designer" phenomenon. Communication between practitioners of these two disciplines is a fascinating subject worthy of further analysis.

Source: http://www.ibm.com/developerworks/library/us-myth.html

Kind regards,

Dipak.

UI Design objectives

Here are the major objec­tives in con­struct­ing a UI: con­sis­tency, usabil­ity, nav­i­ga­tion, visual appeal, inter­op­er­abil­ity, per­for­mance, and accessibility.

Consistency

If I were to say that there was a foundation to others it would be consistency. Without consistency such things as usability, navigation, etc. couldn’t exist. Consistency applies to every aspect of the user interface. Some things to keep in mind when thinking about this:

* Does the layout of our application stay the same with minimal aberrations?
* Is the navigation clear and consistent, or is every click a gamble?
* Do even small details such as the link color/behavior stay the same throughout?


Usability

Usability is the endeavor that is often skipped during development due to resources, which is a shame, because many errors could be discovered earlier. Usability brings the application to the people that will actually use it. How many requirements meetings have you been in that revolve around your end users? Most of the time, whether intentional or not, we tend to project our personal preferences onto this mythical “iUser” that doesn’t exist. If your application is not usable then guess what? No one’s going to use it.

* Have you brought in a sample of your demographic to test the application?
* Does your application adhere to common “best practices”?
* Have you read Steve Krug’s Don’t Make Me Think?

Navigation

Navigation is to an application as table of contents are to a book. At a glance I should be able to know where I’m at, where I’ve been, and where I’m going. In other words, navigation should answer the question: Where Am I? I see this as being the aspect that we tend to have the tendency of projecting our preferences onto a design. Navigation should also encompass the taxonomy you have for your site so I know the content of your site.

* What are sites that you find easy/hard to navigate, and do you consider that when designing?
* Does your navigation truly serve the purpose of navigation?
* Is your navigation hidden, or is it prominent, clear, and usable?

Visual Appeal

The fact that we want to design something that is in fact visually appealing is not a bad desire to have. The only problem is when we design interfaces for visual appeal at the expense of the others on this list. We also need to separate the thought that visual appeal corresponds to filling the entire page. One of aspect of “Web 2.0 style” (yep, I said it) is a proper use of white space. Your design shouldn’t look like you applied some “Make My Logo Bigger Cream”.

* Have you ensured that your desire for visual appeal hasn’t come at the expense of usability, accessibility, etc.?
* Does your site look good without all the fluff? In a syndication world we need to make sure that our content stays the primary focus.
* Does your site contain stock photos? If so, abandon quickly.

Interoperability

Web standards have, at their core, a focus on increasing interoperability. Wouldn’t it be nice that if we followed a standard that regardless of browser our design would look the same, and regardless of device our content will be delivered? Sometimes it is appropriate to design for a specific demographic, but most of need to consider at least the major players in the browser/OS market. I should never again see a “this page is best viewed in…” message again.

* Does my application perform well in various environments including the presentation and behavior?
* Are you using hacks to target certain browsers? Well, then stop it.
* Is my content tied to my interface, or does my interface allow syndication?

Performance

Remember the good olé’ days of dial-up? Ya, I’d rather not remember that either. We live in a broadband world now, but we still have to be conscientious that our application doesn’t make us cook dinner while we wait for it to load. Standards-based design helps in this regard. With cleaner, semantic markup and abstracting the presentation from the structure we reduce the performance concern?

* Does your markup look beautiful?
* Does your content perform well in a non-desktop environment (i.e. mobile)?
* Are you using tools like YSlow to find performance bottlenecks?

Accessibility

Accessibility usually all had to be pushed from a social responsibility perspective (which many managers outside of the government could care less about) until we could start masking it under the guise that Google’s spider was the #1 blind web user. The truth is that accessibility is important, and even CSS 2.1 added markup to help with screen readers. Remember that you don’t want to alienate anyone from viewing your content. And yes, it’s true that accessibility does help your SEO if you need another reason to sell it.

* Have you considered the accessibility standards such as Section 508 and/or the Web Accessibility Initiative (WAI)?
* Have you tried to browse your site with a screen reader?
* Do you lock in the font sizes, or do you allow and even encourage the user to increase/decrease the font?

Conclusion

Developing user interfaces is a complex process that deserves a lot of foresight and ability to adapt to your users, industry trends, and changing technologies. If you keep these considerations in mind you will be well on your way to creating an application that is usable, flexible, scalable, and so much more!

Top eCommerce design templates

20 Gorgeous Examples of E-Commerce Done Right
http://designshack.co.uk/articles/inspiration/20-gorgeous-examples-of-e-commerce-done-right

50 Inspirational E-Commerce Website Designs
http://psdcollector.blogspot.com/2010/03/200-web-design-inspiration-e-commerce.html


200+ Web Design Inspiration : E-Commerce
http://acrisdesign.com/2010/02/65-well-designed-ecommerce-website-for-design-inspiration/

Applying color to ordered list numbers, NOT content

It's a little tough task to have different colors to the list numbers and its content without much of hacks.

Here's a simple solution to it: Demo

OOP Concepts in Actionscript 3.0: Inheritance vs. composition

A simple rule of thumb determines whether the relationship between classes is one that warrants inheritance or composition. If you can say class A "is a" class B, you're dealing with inheritance. If you can say class A "has a" class B, the relationship is one of composition.

Here are some examples of inheritance:

* Cat "is an" animal
* Engineer "is an" employee
* Rugby "is a" sport

Here are examples of composition:

* Wall "has a" brick
* Computer "has a" keyboard
* School "has a" teacher


So what is the difference in how inheritance and composition are implemented? Let's compare how this works, starting with inheritance:

Animal.as ====

package {
public class Animal {

public var furry:Boolean;
public var domestic:Boolean;

public function Animal() {
trace("new animal created");
}
}
}


The Animal.as code is the base Animal class, which you will now extend using inheritance with a Cat class:

Cat.as

package {
public class Cat extends Animal {
public var family:String;
public function Cat() {
furry = true;
domestic = true;
family = "feline";
}
}
}


Let's do a quick test of this class by instantiating it on the main Timeline of a blank FLA file:

import Animal;
var myCat:cat = new cat();


================================================================================

Let's take the Brick class created earlier. In this next example you'll create a Wall class that uses composition to instantiate instances of the Brick class:

Wall.as

package com.adobe.ooas3 {
import com.adobe.ooas3.Brick;
public class Wall {

public var wallWidth:uint;
public var wallHeight:uint;

public function Wall(w:uint, h:uint) {
wallWidth = w;
wallHeight = h;
build();
}
public function build():void {
for(var i:uint=0; i for(var j:uint=0; j var brick:Brick = new Brick();
}
}
}
}
}

In the code above, the Wall class accepts two arguments passed to its constructor, defining the width and height in bricks of the wall you want to create.

Let's do a quick test of this class by instantiating it on the main Timeline of a blank FLA file:

import Wall;
var myWall:Wall = new Wall(4,4);