Apr 21, 2009 HTML, Web Guidelines, standards
Links are the Web’s number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site. Lets see what Markup Gurus say about links, and when links meet the standard or non-standard criteria. The usability guideline for any type of navigational design is to help users understand three major points:
- Where they’ve been?
- Where they are?
- Where they can go (past, present, and future)?
These three are interrelated: If we consider browsing a site, a journey; then knowing your past and present locations makes it easier to decide where to go next.
Read More..
Apr 21, 2009 HTML
Ever experienced a problem when regular image HTML code is displaying images in firefox but not displaying in internet explorer? If you are facing the same problem then consider taking care of following points:
- Do not name images as ‘banner’. This can cause problems with some antivirus software or browser add-on.
- validate the html document and css file. You can lose a lot of time trying to fix something when there are errors in your code.
W3C Validator - HTML
W3C Validator - CSS
- Check for valid code - make sure all tags are closed.
You may have neglected to close an element, or perhaps you meant to “self-close” an element, that is, ending it with “/>” instead of “>” in case of XHTML
- Check that ’show pictures’ option is enabled in IE.
Go to tools > Internet Options > Multimedia > Show Pictures
Jan 23, 2009 Advanced, Javascript, Tricks, fonts
Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.
Using FLIR to display any font in web page is even easy. Here they have got complete instructions for just that.
I have tried type face method and here is its example to download.
Type Face Example Download
Related Resources
Implementing sIFR for smoothness of fonts in webpages
http://typeface.neocracy.org
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
Jan 23, 2009 CSS, Javascript, Tricks
We can simply use CSS alone to reproduce opacity effect that have traditionally been done using scripting. The advantage of looking to CSS instead is obvious - much more lightweight and easier to implement.
We can use this method where we need to use a dim or faint version of image, while when some one places mouse over it, then image comes sharp, clear and bright.
Use the following code in head section of web page.
<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}
.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>Use the following code in body where the image is located.
<a href="#" class="opacityit"><img border="0" src="email.gif" /></a>
By this method image loads kind of blur in background and in light colors, but when some one places mouse over it. It becomes sharp.
Simple Opacity
We are using JavaScript to change the opacity of an image here. The technique works in both IE4+ and NS6+, and can be used to create some interesting “fading” effects. Here is the simple way to just place an image with opacity.
<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">
In -moz-opacity:0.5 accepted range of values are 0 to 1, where 0 would make the image disappear and in alpha(opacity=50) range is between 1 to 100. We have combined the code both for IE and Mozilla for code compatibility.
We can also alter the opacity of image using javascript.
Head section code
<script>
function alteropacity(imageobject, opacity){
if (navigator.appName.indexOf("Netscape")!=-1
&&parseInt(navigator.appVersion)>=5)
imageobject.style.MozOpacity=opacity/100
else if (navigator.appName.indexOf("Microsoft")!= -1
&&parseInt(navigator.appVersion)>=4)
imageobject.filters.alpha.opacity=opacity
}
</script>Body Section Code
<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5"
onMouseover="alteropacity(this, 100)" onMouseout="alteropacity(this, 30)">
Dec 1, 2008 Tools
To listen to customers or your online visitors there have been many solutions but this one is very simple, easy and easy. Shoutbox a.k.a tagboard/chatbox, is an easy to use messaging system that allows you to interact with others instantly while you are at website. A shoutbox can be placed on your blog or website. Your visitors can then easily post comments in it. They can also use the shoutbox to chat with you and other visitors at the same time. The free shoutbox has both IP and URL banning features also! Everything is customizable. One minute setup.
Shout Mix Website
http://www.shoutmix.com/main/
To control fonts in percentage is the easiest method which we can choose while playing with the fluid layouts, or perhaps while working with widgets and web 2.0 elements. 
