Technology : The Vision of Future

Working with HTML Emails

2011-12-12T17:28:00.000+05:30

Off lately I have been working on html emails. i.e sending emails to users on submitting the form on website / newletters etc. These types of emails can be designed in two forms

Plain Text format
HTML based.

It was quite nteresting to build these emails. Because as HTML has reached to its 5th version and we cannot use any of its properties/tags here, we are required to use properties which were even deprecated in HTML4.

All I had to do was to google around the deprecated tags. Another interesting thing is you are required to use table based design here. I hate it! Email clients do not understand the new / clean div tags.

But still, at times its fun to search out the deprecated tags from our html store and use them in building up something really useful. Its like ‘Best out of waste’. ;)

During my study I found out many interesting practices that needs to be followed in email designing, Some of them are :

Keep Design Simple.
Take care that your emails are not sent to SPAM / JUNK folders of users.
Embedded CSS ( Internal CSS ) is not very well supported in newer browser-based email programs like Y!mail, gmail, windows live, Mac mail, AOL webmail.
Make sure you provide ‘plain text alternative’ in your mails. Use MIME Multipart Alternative content type.
Some email clients makes the links clickable , some wont so type out the entire URL if you want your user to visit certain webpage.
Give all image tags an ‘alt’ tag.
Wrap the email in 100% width table.
Do not allow width to extend beyond 600px.
All easy unsubscribing from your mailing list.
As IE troubles webdesigners , how can it spare emails ! Windows live Hotmail adds a few pixels of additional padding below images. We have a hack for it! : img{display:block;}

Resources:

Making Web Handheld Device friendly

2011-10-09T17:27:00.000+05:30

The next generation ofwebsites are going from desktop to laptop to handheld devices.
Overall the world the ratio between number of mobile phones and desktop is varying largely , number of handheld device users are increasing greatly than desktop / laptop users.
This may be theevolution of web world and being aware of approaches to make your websiteshandheld device friendly would be the survival of fitest.

After researching onhandheld friendly web , I found four major approaches that could be adapted tobuild handheld device friendly web. May be there are many but I found thesefour.

Please advice me if you know anything better than this I am still hunting!

1. Responsive WebDesign:

This technique is widely used lately. In thistechnique same url is used and based on viewport size, media queries change thelayout / styles in website.

CSS 3 media querieshave bunch of useful attributes which can help to build websites handhelddevices friendly.

‘Orientation’attribute of media queries helps to develop ipad friendly website whereinwebsite styles changes based on orientation of the iPad.

/* iPads (landscape) ----------- */

@media only screen and(min-device-width : 768px) and (max-device-width : 1024px) and (orientation :landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen and(min-device-width : 768px) and (max-device-width : 1024px) and (orientation :portrait) {

/* Styles */

}

In this techniqueimages are also resized according to screen size. However images which arenot intended to display on handheld devices (using “display:none“ ) are not shown on screen but in background it does getsdownloaded on mobile.

Because to displayresizable images <img> tag is used and gets downloaded irrespective ofits display property in CSS.

Being mobile phoneusers have low storage capacity loading unwanted images should not beacceptable.

But the issue is allbrowsers do not support CSS 3 completely.

Popularly contentbased websites uses RWD.

2. Redirect Users todifferent URL:

Use different url formobile version of website. Detectuser-agent and redirect user to mobile version url of website.

Create aflexible website layout here based on standard screen size or meta tags used to stretch page to full available widthof viewport in iOS , Android devices.

WAP / HTML-MP :

This is the type ofmarkup used to develop mobile friendly websites.

In earlier versions of mobile friendly websites, WML was widely used. If you have fixed width layout then may be you would most likely to go for this approach. But it is restricted in use. And mostly mobile phones now support normal HTML / XHTML.

So if your website statistics says mostly your users are using old mobile phones you can still consider this option.

Drawbacks in thisapproach: will need to maintain two sets of website.

3. Provide URL on desktop version:

Buld a mobile version of website and providea link to mobile site on desktop / laptop version site. So user can go to any site as required.

4. Hybrid way:

Responsive web design tolayout your design and detect user agents to organize content on your website.

Website statistics should be analysed and depending upon decision can be taken based on user behavior.

References:

Eye Tracking and Web Designing

2011-10-05T01:07:00.001+05:30

Eye tracking is one of the UX approach to be considered while building UI.

Eye tracking in UI referes to the behaviour of user's eye while traversing UI. There are some useful eye tracking tips that could be followed to develop a sucessful UI.

It takes users about 2-3 seconds to rate your website based on content , look and feel. And an optimized use of this 2-3 seconds by an UI developer can result in success and failure of UI.

Find out where user see first while opening your website, what draws the maximum user attention.
To find out this, eye tracking study plays a vital role.

1. 'F' shaped :

Top left part is the first point where users normally fix their eyes after opening your website. After that according to a general tradition user moves his eyes from left to right and then narrow down their fixation towards the bottom of website. This forms 'F' shape, thus 'F' shape should be considered while putting your website content.

2. Golden Triangle :

As mentioned above 'F' shape is the general way user fix their eyes while traversing the content of your UI. When you'll join the edges of the 'F' , the traingle is formed. Typically content placed in this triangle can result in the success of UI. Pictures, videos, and audio are more useful if they are embedded in this area. Reading and scanning content takes effort, and placing multimedia content in the golden triangle relieves the need to scan for relevant information. The users just have to sit back and immerse themselves in the experience.

3. Single Column before Multi Columns :
Studies also show that one column formats on a page tend to perform better than many columns side by side. Multi column formats can be overwhelming to viewers, so better just to keep it simple and straightforward.

4. Headings get attention :
Similar to newspapers, an attractive heading draws attention of users. In case of an huge heading, starting 2-3 words should be appealing to user that makes him to make an effort to read whole heading.

5. Navigation goes up top :
Navigations are more effective when placed on the top. The point may be that anything at the top of a page will be seen immediately. And since top navigation must be simple because of space limits, top navigation is probably much simpler to use.
However studies does show that side navigation also helps.

6. Paragraphs, White space , remove irrelevant images :
Irrelevant images consumes precious space and does not serve any purpose. These images should be replaced with whitespaces. As recent studies has proved that white spaces supports users to relax their minds and grasp relevant information.
Same as in our print media, paragraphs should be made with proper interval to help users to scan the information. Breaks should be logical, and organized into a flow of ideas rather than distinct paragraphs.

7. Images :
What this means to you: Be very careful when putting important visual cues or content near pictures of faces. If you want to draw attention at some very important message on try putting an image person's face. often face grabs the attention of users.

Reference Links:

Quick Response Codes - A Subway between the Print Media and an Electronic Media

2011-04-11T17:02:00.001+05:30

You might have seen some jigsaw picture built with black and white combination while surfing an internet... on some products... on hoardings... on business cards etc. and might have wondered what this is??

When I saw these images for the first time I thought they are something like placeholders for missing pictures. But then I understood these are something more than placeholders.

They are QR code abbreviated for Quick Response also known as hard links or physical world hyperlinks.

We are very well familiar with barcodes. We could find them on almost every product. They are famous for their quick readability, quick conversion.

QR code has the same concept like bar code. QR codes were built with the aim of storing some important and quick information in a small code by Denoso Wave, subsidiary of Toyota, Japan, in 1994.

Unlike barcodes, QR codes are 2-dimensional codes. Meaning QR codes can store information vertically and horizontally whereas barcodes store information only horizontally. This makes QR code more useful and more efficient.

Bar code can store information only horizontally.

QR codes can store information Vertically and Horizontally both.

Bar codes can only store small amounts of information—a byte or so. But being 2D, QR codes can store a lot more— up to 2 KB of data under the current ISO standards.

What can you store in them?

You can store website url, contact info, some critical info, company logo, can put QR code on dinner plates embedding menu in it! , can gift coffee mug with QR code on it… etc.

How to decode them?

Any smart phone with camera having proper QR decoder application can decode this code.

Many smart phones does have built in QR code decoder applications.

Take a picture of the code and your application will decode this code.

For e.g. if you take picture of the above show image you’ll get redirected to http://www.itlero.com

How to generate QR code?

You could find many online QR code generators. Just add your text and click generate!

Some of them are:

Print media is the one long living and widely spread media across the globe, and QR code is like a subway between print media and the electronic world. So it is an easy way to connect with an user.

References:

Building font-size based UI

2010-10-26T01:19:00.000+05:30

While building pixel perfect website, sometimes we landup in major issue if we want to change the font of the website. In our pixel perfect a simple

change in font size or family disturbs whole layout. So to build font based web-page 'em' unit should be used to give dimensions to the containers.
'em' unit gets calculated , based on the basic font you defined for the page.
the basic formula goes like:
1em = basic font size of the page.

Lets say you defined font-size:12px;

now, suppose we want to build a div container with width 120px and height 240px.
.container{
    width:120px;
    height:240px;
    background:#aaa;
}

so to convert 120px into em:
120px (width of the container) / 12px (font-size) = 10em
and
240px (height of the container) / 12px (font-size) =20em

New CSS:
.container{
    width:10em;
    height:20em;
    background:#aaa;
}

Putting 'em' as unit, now if we happen to change the font size in future our container will change proportionately without disturbing the layout.

It is better idea to provide min-width /height to the container so that even if the font is reduced our design should not shrink, after some point our design remains static.

Make main container 100% of browser height

2010-10-19T13:42:00.000+05:30

Often we realise that putting 100% height to main Container does not cover the whole browser height.
HTML is the stack of container where any child element inherit the properties of its parent element unless properties specified explicitly.
now when we give "100%" height to our div it takes 100% height of its parent element.
So,

<html>
<body>
<div class="mainWrapper">This is My Wrapper Div </div>
</body>
</html>

CSS:
.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}

Now here, <body> is the parent element of <div> so <div> will take 100% of <body> height. But since we have not defined any height for <body> , we cannot see any change in the height of div.

Adding couple of more entries in our CSS files may add success to our problem:

html,body{
height:100%;
}

.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}

Putting this CSS can give you 100% browser height to your <div>. Since <html> and <body> are parent elements. We provided them 100% height which says <html> and <body>
elements to take 100% of browser height.

Share your Blog / Website articles in facebook, twitter, linkedIn, buzz

2010-10-07T18:52:00.000+05:30

Some quick ways to create buttons for your website/blog and share your articles on buzzing social networking.

Copy and paste the following codes in single.php in your wordpress theme.
1. Official Tweet Button:
goto twitter.com -> Goodies -> tweet button
make necessary settings and copy the generated code in you single.php

Something Similar link gets generated:
<a class="twitter-share-button" data-count="none" data-via="shrutijakhete" href="http://twitter.com/share">Tweet New</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>

2. Facebook like button:
Facebook like button can be integrated in two ways.
1. Iframe
2. Javascript Version

Iframe is the easiest way to put like button whereas javascript version allows you customize your settings. Thanks to hyperarts.com they have explained javascript version is explained here quite well.

Using Iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:30px;"></iframe>

3.LinkedIn:
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&title=<?php the_title();?>&source=<?php wp_title();?>" target="_blank"><img src="http://static03.linkedin.com/img/pic/pic_logo_119x32.png" border=0 alt="Share on LinkedIn" title="LinkedIn" height="20px"></a>

4. Buzz:
<a class="google-buzz-button" data-button-style="small-count" data-locale="en_IN" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a><script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>

Reference:
1. http://www.developer.facebook.com
2. http://www.twitter.facebook.com
3. http://www.developer.linkedIn.com

swfObject

2010-02-03T23:24:00.002+05:30

swfObject is the small javascript library (10Kb / GZIPed: 3.9Kb), used to embed flash content in your html page.

Major Advantages:

1. 1. It detects if the browser has flash player to play the flash content.

2. 2. It detect flash player version.

3. 3. Can be helpful to display an alternative content if your browser does not have flash player installed in it.

4. 4. SEO optimization of flash content.

5. 5. Better way around for <embed> tag which is not w3c valid tag.

How to Use?

1. Download the library.

2. Add it in your app.

3. Add some container in your html page which could hold the flash content.

e.g. <div id=”flashContent”> </div>

4. <script type="text/javascript">

var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");

so.write("flashcontent");

</script>

What each parameter means:

var so = new SWFObject(swf, id, width, height, version, background-color);

Related Links:

1. http://osflash.org/swfobject

2. http://blog.deconcept.com/swfobject/

3. http://www.reelseo.com/swfobject-video-seo/

4. http://code.google.com/p/swfobject/wiki/documentation

jQuery.noConflict()

2009-11-07T20:45:00.001+05:30

There are different JavaScript libraries such as jQuery,mootools,ajax etc available which helps us to add functionalities to our web applications.
Hundreds of plugins built using those libraries are making our tasks easy. So without actually peeping into the code we use those plugins.
Now, the problem arises when these libraries are used together.

I stuck in the same problem when I was implementing jquery in my application which already had lighbox implemented in it.
After researching a lot I figured out that prototype.js which was used for implementing Lightbox and jQuery.js in my application were conflicting.

The real problem was both libraries were using '$' as their main function name. Hence one library was breaking the behaviour of other library.

for e.g. in jquery we use :
$(function(){
---
---
});

Here '$' represents jQuery. Similarly in prototype.js for lightbox '$' was used which was representing its main function.
jQuery has provided us the solution to get rid of this problem. Simply use noConflict() function immediately after jQuery.js.
When you use noConflict(), jQuery will return $() to its previous owner and you will need to use jQuery() instead of shorthand $() function.

so it can be written as
jQuery(function(){
---
---
});

else...

var j=jQuery.noConflict();

so,
j(Function(){
--
--
});

So now, jQuery is compatible with other javascript libraries and can be used easily.

CSS SPRITE

2009-08-29T11:07:00.007+05:30

I have been working on this technique and found it quite interesting and loved working on it. Lets discuss more about this technique.

What it is??

Technique wherein small images are consolidated at one place and then that consolidated image is used to apply those small images around your application.

Whole magic is done by background position property. By using background position property the exact position of the required image can be identified.

Why to use??

The technique helps you to reduce HTTP request and thus performance gaining of your application.

When you look for optimization of web application you look around to reduce the number of HTTP requests.

So here if you have 10 different small images in your application then 10 different HTTP requests would be sent to fetch those images from server. Wherein when we use CSS SPRITE, all 10 images are consolidated in one image and then only one HTTP request is sent to fetch the images.

Where it has been used??

CSS sprite is now majorly used. Put your firebug (in Firefox) on and see the CSS of yahoo.com, aol.com, digg.com all are using CSS sprite to display small images.

When to use??

Typically the technique should be used to access small images.

How to make it?

Sprite images can be build in photshop or to make your life easier there are number of CSS SPRITE generators available on web wherein they ask you to upload your images and build sprite image for you with respective background position of particular image. I use www.csssprites.com

Useful Resources:

http://css-tricks.com/css-sprites/

http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

http://websitetips.com/articles/css/sprites/#why-sprites

http://csssprites.org/

DATA URI

2009-08-23T09:46:00.002+05:30

To fetch each file (images on your website, any plain text file) browser has to make separate http request with server. So the thumb rule to optimize any web application is to reduce the number of http requests.So lesser the number of requests made fast your application will load.

We use different techniques such as CSS Sprites to reduce these http requests.

Data URL is one of such techniques. And is supported in all major browsers including Internet Explorer 8.

There are many URL schemes available eg http, ftp,mailto: etc. each scheme has its own meaning. Similarly the data: URL scheme is a way to embed “immediate data” as if it was included externally.

Syntax:

data:[<mediatype>][;base64],<data>

The mediatype is a MIME type string, such as "image/jpeg" for a JPEG image file.

If omitted, defaults to text/plain;charset=US-ASCII

If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

Examples:

data:,Hello%2C%20World!

Simple text/plain data

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

base64-encoded version of the above

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

Embedding an image in the HTML using data url:

E.g.

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/

/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp

V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"

width="16" height="14" alt="embedded folder icon">

Useful resourcesl:

http://tools.ietf.org/html/rfc2397

http://nametrends.net/about/sparklines.htm

http://eligrey.com/blog/projects/data-uri-tool

http://www.websiteoptimization.com/speed/tweak/inline-images/

http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

https://developer.mozilla.org/en/The_data_URL_scheme

Emulate IE8 as IE7

2009-07-29T15:25:00.006+05:30

IE8 has come up with many updates that might affect your existing application/website design. So if you really running out of time and need to fix these issues as soon as possible then what you could do is actually inserting a meta tag in head section and asking your IE8 to render the page as IE7 or any other IE version.

<meta http-equiv="X-UA-Compatible" content="IE=…." />

There are two ways of using this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

IE=7 : Display in IE7 Standards mode; Already supported in the IE8 Beta 1 release

IE=EmulateIE7 : Display standards DOCTYPEs in IE7 Standards mode; Display quirks DOCTYPEs in Quirks mode;

There are two ways to implement this tag:

On a per-site basis, add a custom HTTP header

X-UA-Compatible: IE=EmulateIE7

On a per-page basis, add a special HTML tag to each document, right after the tag

Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site.

Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

NOTE: The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content.

Useful resources:

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

http://www.microsoft.com/windows/internet-explorer/readiness/developers-new.aspx#versioning

http://stackoverflow.com/questions/1105381/why-is-internet-explorer-8-messing-up-my-website-look-and-feel

http://www.programmerfish.com/how-to-make-your-web-site-ie-8-compatible/

http://msdn.microsoft.com/en-us/library/cc288472%28VS.85%29.aspx

2009-07-24T08:09:00.000+05:30

What is Doctype:

In HTML and XHTML, the DocType is a special tag that goes right at the top of the page above <HTML> and warns the browser what's coming.

e.g. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

It should be written exactly as specified with respect to spellings and case. i.e. doctype in capital letters, exact url for dtd etc.

It informs browser using which html standards it should render the coming html page.

It switches the browser from ‘Quirk’ to ‘Standard’ mode which is known as ‘Doctype switching.’

Quirk mode: The way the old browsers would have rendered your page, using old standards.

For e.g. IE Quirks Mode is IE5.5. IE6, 7 and 8 all switch back to 5.5 when they encounter a Quirks Mode page.

Quirks mode is generated when you either use the HTML 4.01 Transitional Doctype, you don't define a Doctype, or you use a doctype without a URL DTD defined. For example, Internet Explorer changes how the pages are displayed if you remove the DTD from the Transitional Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Standard mode: Browser would render the page using the new standard way.

Difference Between DOCTYPE and dtd:

The document type declaration is said to communicate HTML version information

DOCTYPE switches the browser from standard to quirk mode and dtd tells browser to use which standards.

What if I remove DTD and only put DOCTYPE:

On removing the dtd the browser is suspected to remain to quirk mode. Because browser cannot detect the standards to render the web page/app without dtd url.

IE remains in quirk mode if you do not put dtd.

Some of the problems that can be encountered:

You will not be able to use a HTML (HyperText Markup Language) Validator to check the page coding. HTML validation requires the DOCTYPE declaration.
The browser rending the web page will process the coding in Quirks Mode.
The stylesheet may not be implemented as planned.

Some of the commonly used DOCTYPES:

HTML 4.01 Transitional - Safe for Most Browsers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The HTML 4.01 Transitional DOCTYPE is probably the most popular DTD out there. It gives you the older tags like fonts that are no longer part of the strict specification. It tells browsers that you are using the most up-to-date HTML, but need some backwards compatibility.

HTML 4.01 Strict DOCTYPE is Harder to Implement

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Strict removes all the deprecated tags from the specification. Be careful whenever you use strict DTDs to validate your HTML ensure that it's correct. Strict DTDs are great for being absolutely correct against the standard, but not all browsers handle the alternatives to tags that are missing.

Useful Resources for DOCTYPE:

http://www.alistapart.com/articles/doctype/
http://www.htmlbasictutor.ca/doctype-declaration.htm
http://www.evotech.net/blog/2007/04/dtd-the-document-type-declaration/
http://www.wpdfd.com/issues/67/doctype_amp_dtd/
http://webdesign.about.com/od/dtds/qt/tipdoctypelist.htm
http://www.quirksmode.org/css/quirksmode.html#t10

CSS tips for newbeeies….

2009-05-28T23:53:00.000+05:30

Don’t use empty DIVS:

Instead of using empty divs to clear the floats use element below the floating element to clear the floats. Else clear the container holding your whole document.

Inheriting the link color:

To let the link to inherit the color as same as the text around it, use

{ Color:inherit }

e.g.: Suppose <span id="eg1">This is the example text to <a>illustrate</a> the <a> inherit </a> propertylt;span>

Now the css for the above text could be:

#eg1{ color:#aaa; }

Now if u want the link in the document should inherit the color of its parent element, use inherit property,

#eg1 a{ Color:inherit; }

Background-Position:

Values:	top, center, bottom, left, center, right
Initial:	0% 0%
Inherited:	No

If a background image has been specified, the value of 'background-position' specifies its initial position.

One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:

'top left' and 'left top' both mean the same as '0% 0%'.

'top', 'top center' and 'center top' mean the same as '50% 0%'.

'right top' and 'top right' mean the same as '100% 0%'.

'left', 'left center' and 'center left' mean the same as '0% 50%'.

'center' and 'center center' mean the same as '50% 50%'.

'right', 'right center' and 'center right' mean the same as '100% 50%'.

'bottom left' and 'left bottom' mean the same as '0% 100%'.

'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.

'bottom right' and 'right bottom' mean the same as '100% 100%'.

Examples:

BODY { background: url(banner.jpeg) right top } /* 100% 0% */

BODY { background: url(banner.jpeg) top center } /* 50% 0% */

Empty div height:

Empty div has some default height in IE whereas firefox does not show this default height. This is because IE takes some default alphabet in the empty div. and hence it shows height in the empty div.

So To fix this bug use font-size=1 in that div.

Eg: <div style=”font-size:1px”></div>

Table Rules:

To display only rules in table use rules attribute . IE does not display rules without frames attributes.

Eg. : <table rules=”rows” frames=”void”>

<tr>

<td>TABLE RULES</td>

</tr>

</table>

List:

To align the text justify in ‘li’, use

Display:block;

List-style-type:

We use list style type property to change the shape of bullet in the unordered list. Sometimes the web browser behaves in the tricky way and shows different bullet shapes than that was specified.

In a such a case instead of explicitly defining

list-style-type:square

Place the image to the background of 'li' item and adjust in such a way that it emulates the bullet of the list.

Eg:

.boxContent li {

background:transparent url(../styleImages/bullet.jpg) no-repeat scroll 0 4px;

list-style-type:none;

padding-left:12px;

}

Remove the white space in between li and its content:

Use li{

display:inline-block;

}

Remove the dotted border around the active link in Firefox:

outline: none;

}

Opera's MAMA

2008-10-16T04:07:00.000+05:30

Opera is planning to launch a new search engine MAMA of its own kind at the end of the year.
MAMA (Metadata Analysis and Mining Application search engine) is a search engine for developers. It will help developers to identify the technology used behind website. It could help web developer to understand the current market trends.
MAMA crawls the Web, but instead of indexing the content of Web sites, as most search engines do, it discards the content and indexes the types of technologies being used on sites, such as Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), XHTML etc.
MAMA could be the effiective tool for developers and others to identify the market trends for using technologies.

First ever Made in India Microprocessor !!!

2008-10-08T08:52:00.000+05:30

India launched its first microprocessor for the servers, through world’s largest chipmaker Intel. This was the first x86 microprocessor with 45nm technology from Intel which has been completely made by the team of 300 Indian's based in Intel's Bangalore research and development centre.

This new Intel Xeon 7400 series processor has up to six processing cores per chip, 16MB of shared cache memory and 1.9 billion transistors. Platforms based on these processors can scale up to 16 processor 'sockets' to deliver servers with up to 96 processing cores inside, offering scalability, ample computing threads and extensive memory resources, Intel said. It delivers almost 50 percent better performance in some cases, and up to 10 percent reduction in platform power, the company said.

Praveen Vishakantaiah, President, Intel India, said, “The quality of available talent, technology ecosystem and business potential are factors which make India a strategic business site for Intel. We have achieved a considerable degree of expertise in product design.”

Yahoo Launches new Social Networking site... SpotM !

2008-09-22T18:16:00.000+05:30

In Social networking space mow yahoo is spreading its wings with SpotM - Social networking site only in India...

How it is different from other website...
Allows users to define secret friends that their other friends won’t be able to see SMS integration/Anonymous chat
Private conversations with others without revealing their mobile number.

How GOOGLE works???

2008-09-22T12:27:00.000+05:30

Google the most efficient and popular search Engine.... How it Works... lets see....

Google runs on a distributed network of thousands of low-cost computers and can therefore carry out fast parallel processing. Parallel processing is a method of computation in which many calculations can be performed simultaneously, significantly speeding up data processing. Google has three distinct parts:

Googlebot, a web crawler that finds and fetches web pages.
The indexer that sorts every word on every page and stores the resulting index of words in a huge database.
The query processor, which compares your search query to the index and recommends the documents that it considers most relevant.

Let’s take a closer look at each part.

1. Googlebot,:

Googlebot is Google’s web crawling robot, which finds and retrieves pages on the web and hands them off to the Google indexer. It’s easy to imagine Googlebot as a little spider scurrying across the strands of cyberspace, but in reality Googlebot doesn’t traverse the web at all. It functions much like your web browser, by sending a request to a web server for a web page, downloading the entire page, then handing it off to Google’s indexer.

Googlebot consists of many computers requesting and fetching pages much more quickly than you can with your web browser. In fact, Googlebot can request thousands of different pages simultaneously. To avoid overwhelming web servers, or crowding out requests from human users, Googlebot deliberately makes requests of each individual web server more slowly than it’s capable of doing.

Googlebot finds pages in two ways: through an add URL form, www.google.com/addurl.html, and through finding links by crawling the web.

When Googlebot fetches a page, it culls all the links appearing on the page and adds them to a queue for subsequent crawling. Googlebot tends to encounter little spam because most web authors link only to what they believe are high-quality pages. By harvesting links from every page it encounters, Googlebot can quickly build a list of links that can cover broad reaches of the web. This technique, known as deep crawling, also allows Googlebot to probe deep within individual sites. Because of their massive scale, deep crawls can reach almost every page in the web. Because the web is vast, this can take some time, so some pages may be crawled only once a month.

Although its function is simple, Googlebot must be programmed to handle several challenges. First, since Googlebot sends out simultaneous requests for thousands of pages, the queue of “visit soon” URLs must be constantly examined and compared with URLs already in Google’s index. Duplicates in the queue must be eliminated to prevent Googlebot from fetching the same page again. Googlebot must determine how often to revisit a page. On the one hand, it’s a waste of resources to re-index an unchanged page. On the other hand, Google wants to re-index changed pages to deliver up-to-date results.

To keep the index current, Google continuously recrawls popular frequently changing web pages at a rate roughly proportional to how often the pages change. Such crawls keep an index current and are known as fresh crawls.

2. Google’s Indexer

Googlebot gives the indexer the full text of the pages it finds. These pages are stored in Google’s index database. This index is sorted alphabetically by search term, with each index entry storing a list of documents in which the term appears and the location within the text where it occurs. This data structure allows rapid access to documents that contain user query terms.

To improve search performance, Google ignores (doesn’t index) common words called stop words (such as the, is, on, or, of, how, why, as well as certain single digits and single letters), some punctuation and multiple spaces, as well as converting all letters to lowercase, to improve Google’s performance.

3. Google’s Query Processor

The query processor has several parts, including the user interface (search box), the “engine” that evaluates queries and matches them to relevant documents, and the results formatter.

PageRank is Google’s system for ranking web pages. A page with a higher PageRank is deemed more important and is more likely to be listed above a page with a lower PageRank.

Google also applies machine-learning techniques to improve its performance automatically by learning relationships and associations within the stored data. For example, the spelling correcting system uses such techniques to figure out likely alternative spellings.

Indexing the full text of the web allows Google to go beyond simply matching single search terms. Google gives more priority to pages that have search terms near each other and in the same order as the query. Google can also match multi-word phrases and sentences.