Basic Tips for SEO

  1. Use Correct Doctype
  2. Use Semantic code while htmlizing your website.
  3. Use Meta Content and Meta Keywords
  4. Use unique page titles
  5. Use SEO friendly page name or URL
  6. Use Alt tags for Images
  7. Use Heading Tags (e.g. H1, H2)
  8. Use Valid HTML and CSS Code (Make your code W3C Standard)
  9. Use Div based coding and avoid using Tables
  10. Make a Detailed Sitemap
  11. Use Breadcrumb
  12. Use Footer links
  13. Use Optimized images and code to make your web site load fast
  14. Use External JavaScript and CSS files
  15. Use a meaningful and helpful 404 error page

Important reasons for using web standards

For web programmers who are already using web standards, this list may come in helpful when you want good arguments and feel free to add any extra benefits you can think of. If you’re new to the idea of web standards and are unsure on whether you should spend the time to study all about them or not, here are some of the most important reasons for doing so.

Get better search engine rankings
Well-written content delivered through clean, well-structured, and semantic markup is delicious food for search engine spiders and will help our rankings. This will lead to increased traffic, which is what most website owners want.

Maximize website visitors
You don’t know which browser visitors will use to access your site. The only thing you can be logically sure of is that they are using something that can parse HTML. By using web standards properly you make sure that you have completed your job in making your website work with the largest possible number of browsing devices.

Faster page loading
Clean and well-structured HTML that separates structure and content from presentation will be smaller and faster for visitors to download.

Accessibility
Web standards do not guarantee that all features of our website will be accessible to people with disabilities, but it is a very good start. Make sure your html documents are valid, well-structured, and semantic, and you’re well on the way towards having an accessible website.

Make our HTML easier to maintain
When we need to update our website then we will like to browse through a clean and well-structured document. Using CSS to organize layout also makes it much easier to make overall website design changes.

Look professional
Our colleagues, competitors, friends and potential employers will be able to look at our work and know that the person likes to keep up with changes in technology and make sure that his knowledge and skills are always current. It will make us look like a real web professional.

Making our clients feel good
Use web standards combined with best practices for accessibility and give your clients a chance to talk about how they cater to all people, and how they find it important that everybody can use their services or find information about their products. You will also avoid the bad publicity that can be caused by shutting out visitors like disabled people, Mac users, and mobile phone users.

Future-proof content
If we separate content from presentation and use current web standards, we have done the best we can to ensure that our website content can still be read even after fifty years or hundred years.

Good business sense
Any business owner will like to have more visitors, a faster website, improved search engine rankings, potential good publicity and it does make sense to do so.

Accurate way to do things
Web standards provide the way to build the web from the beginning and now that we can surely do something the right way and have a really important reason to feel good about ourselves.

Server-Side Scripting Languages: Asp and Asp.net

ASP (Active Server Pages) was for the first time was released in December 1996. Since then it has been through major changes and has grown and adapted to the new methods of developing web sites and applications for the internet over the period of time.

There are two major forms of ASP:-
1. Classic ASP
2. ASP.NET

In ASP.Net major weight is on n-tier architecture in the application development and there is separation of data presentation, business logic and data access layers. In traditional ASP these layers are mixed leading to the development of ineffective solutions with huge architecture that are difficult to sustain. The ASP.Net offers object oriented approach for the software development where as ASP does not support classes. Only VBScript and JavaScript were available for scripting in ASP where as, in ASP.Net there are no such boundaries.

The .net compliant languages can be used with ASP.Net like C# and VB.Net, where both of them are server-sided languages where as in ASP only VBScript and JavaScript are available as options to be used. Then the ASP pages are interpreted and the ASP.net Code is compiled .Traditional ASP can run only on Microsoft platforms but ASP.Net can be run on non – Microsoft platforms also. ASP runs under the inetinfo.exe IIS (Internet Information Server) process space and can lead to application crashes due to the start and stop process used by IIS. While ASP.net process is separate from inetinfo.exe and is not related to the IIS process isolation settings. The debugging process is easier in ASP.Net.

In traditional ASP the executable code cannot be separated from the HTML making the page difficult to read and maintain. The code block has to be positioned when ever the output is to be shown. This drawback of code is overcome in ASP.Net by the use of server controls. The HTML and Web Server Controls created on the server require a attribute to work. This attribute indicates that the page will be processed on the server. At the same time it implies that the enclosed controls can be accessed by server scripts. Validation Server Controls are a big plus in ASP.Net. It saves a lot of time and developers do not have to write their own functions as it is with ASP. Built-in validation increases the application reliability. Through this Double validation on client and server side can be performed.

The use of ASP.Net pages gives a performance and security edge. It supports the usage of any .Net language. There is no restriction over the use of JavaScript or VB Script on your Web pages. Finally it can be said that ASP.net has opened up a whole new programming model with the blend and combination of web forms, server-side controls, and data binding along with web services. ASP and ASP.Net has just scratched the surface of the Microsoft Active Server Page technology, which will continue to improve in the coming years with the latest additions on the technology front.

Guidelines for a clean HTML code

A good HTML is the base of a beautiful website. A good CSS can only exist with similarly good HTML markup. The advantages of clean, semantic HTML are many, yet lots of websites suffer from badly written markup.

Let’s take a look at some points to improve your written HTML code.

1. Use Strict DOCTYPE for HTML 4.01 or XHTML 1.0

2. Declare Character set just after the opening <head> tag.

3. Use properly encoded Special/funny characters like “&amp;” for “&” instead.

4. Proper indentation of markup for readability of code.

5. Keep your CSS and JavaScript external.

6. Nest your tags properly.

7. Remove unnecessary divs/tags.

8. Use better naming conventions for CSS classes and ids.

9. Leave typography to the CSS (Text uppercase and lowercase etc.)

10. Apply unique class or id to the page content lies in the “body” tag.

11. Use heading tags like <h1>, <h2> etc. for page headings.

12. Validate your code using W3C validator tool.

13. Logical ordering of the sections of your website in code.

14. Just do what you can to make it right.

jQuery: Easy JavaScript for Front-end Programmers

I’m a big jQuery fan because it just makes things a lot easier and a lot simpler for a mostly front-end programmer like myself. It’s the first Javascript framework I’ve looked at, but I don’t see myself going back.

What Is jQuery?
jQuery is yet another JavaScript library to join the previously crowded space that includes Prototype, Scriptaculous, Rico, Moo.Fx and more than a dozen others. To use it, simply attach the .js file in the head of your page: magically, you have access to lots of pre-built functions and gizmos.

Why jQuery?
The true beauty of jQuery is what it can present you within the first 10 minutes of your using it. The key feature of jQuery is its simplicity. Few lines of jQuery code can replace a dozen lines of normal JavaScript, yet it remains very elemental and flexible. Let me illustrate this point with an example. Two years ago, we used the following script to fix the web page horizontal rule:

function ourRules() {
if (!document.getElementsByTagName) return;
var hr = document.getElementsByTagName(“hr”);
for (var i=0; i
var newhr = hr[i];
var wrapdiv = document.createElement(‘div’);
wrapdiv.className = ‘line’;
newhr.parentNode.replaceChild(wrapdiv, newhr);
wrapdiv.appendChild(newhr);
}
}

window.onload = ourRules;

Result of the code, the browser waits for the page to finish loading before rifling through the DOM to find each occurrence of hr. Each time it finds one, it creates a new div, gives it the class name “line”, inserts it where the hr was, and pops the old hr inside the new div, to achieve the markup required to apply this particular effect. The end result of this script was that we were able to get the desired result without having to change hundreds of pages.

But, we’d achieve the same result using jQuery.

$(document).ready(function(){
$(“hr”).wrap(“<div class=’fline’> </div>”);
});

To break it down:

$(document).ready(function(){

});

The first and third lines are jQuery’s load event, and they replace the old window.onload from above. Any activity that we wish to complete during the page load can be dropped inside these curly braces. This is a great upgrade on the old onload method, because rather than waiting until everything has finished loading, jQuery’s function watches everything that comes in, and starts working as soon as it has all the parts it needs. It’s really very neat.

Surprisingly, the second line is even simpler:

$(“hr”).wrap(“<div class=’fline’></div>”);

The “dollar object” $(“hr”) is all we need to tell jQuery to grab every horizontal rule on this page, and wrap is what we will be doing to those hr elements.

jQuery’s built-in wrap function takes in whatever HTML we give it (in this case “<div class=’fline’> </div>”) and wraps it around each hr in our page – no loops or tests required.

We’ve used a div here, but we could just as easily been modifying or wrapping a b, span, or a element.

And although we’ve used a very simple selection rule here (all hrs), we could have easily been much more specific with what we targeted. Using familiar old CSS syntax, we could have used any of the following:

$(“hr.separate”) – Get the hr elements with the class name “separate “.
$(“li:only-child”) – Get list items that are by themselves.
$(“ul > li”) – Get only list items with unordered parent lists.

While I’ve found wrap to be of the most instantly helpful jQuery functions, it’s just one of many, including hide, show, fadeOut(“slow”) and slideUp(“fast”), just to name a few. You can perhaps guess what each one of these functions does. The jQuery starter’s tutorial on the jQuery site is quite a gentle beginner’s guide, and takes you through some of the most regular functions. But perhaps jQuery’s single neatest feature is its ability to “chain” functions together. Like, if I wanted to add a second div to our hr elements for some foolish reason, I could simply add another call to the wrap function to the end of my code, like this:

$(“hr”).wrap(“<div class=’fline’></div>”).wrap(“<div class=’sline’></div>”);

Example of jQuery
Example of jQuery

It’s so easy, it’s wild. Wild like a fox!

While designing a web page, you want to add a small icon to the bottom corner of each thumbnail. This required each img element to be wrapped in a container div, and another div showing the icon to be positioned in the container div. Again, the jQuery code is just one line.

$(“#thumbnails li img”)
.wrap(“<div class=’mywrap’></div>”)
.before(“<div class=’mythumb’></div>”);

In simple English, this code just asks jQuery to locate all the images in li elements that are inside #thumbnails, Wrap these images in a div called “wrap”, Squeeze another div (the one with the icon graphic) in my “wrap” div just before my image.

Now that we have the structure, CSS does the rest. If JavaScript is turned off, the thumbnails link directly to the raw image files, and there’s no need for the icons. Now that’s what I call graceful degradation. Like most other JavaScript libraries, jQuery is competent of some very high-end actions, but the main attraction for me was its ability to solve the little problems quickly and with a minimum of fuss.

I hope you’ll find it helpful too.

Download Files

jQuery Minified (54.5 kb)
jQuery Packed (30.3 kb)
jQuery Regular (98.2 kb)

Click here to view jquery tutorials

What is CSS Sprites?

CSS sprites is a technique to create a single image file that contains all the images laid out in a grid, requiring only a single image and only a single server call. It is a technique to decrease the number of HTTP requests made for image resources referenced by our site. It can be very effective for improving website performance, particularly in situations where many small images, such as menu icons, are used. CSS property “background-position” can be used to shift the visible area of the combined image. This technique has also been used on the Yahoo! home page.

Using CSS sprites can reduce the delay for certain events on web pages and making our website perform more efficiently and improving our visitor’s experience. On large sites, every little server call matters. This is one way to reduce server calls while maintaining separation of content from presentation, accessibility, and graceful degradation. Using CSS sprites takes a little extra care and planning. We have to keep track of the pixel position of each sprite, but that’s not much harder than keeping track of the paths for the individual image files this single file will replace.

Using CSS Sprite in web page

<html>
<head>
<title>CSS Sprite</title>
<style>
a#top-left { background: url(‘vikas_sprite.gif’) 0px 0px no-repeat; }
a#top-left:hover { background: url(‘vikas_sprite.gif’) 0px -210px no-repeat; }
a#top-left:visited { background: url(‘vikas_sprite.gif’) 0px -210px no-repeat; }

a#top-right { background: url(‘vikas_sprite.gif’) -130px 0px no-repeat; }
a#top-right:hover { background: url(‘vikas_sprite.gif’) -130px -210px no-repeat; }
a#top-right:visited { background: url(‘vikas_sprite.gif’) -130px -210px no-repeat; }

a#bottom-left { background: url(‘vikas_sprite.gif’) 0px -105px no-repeat; }
a#bottom-left:hover { background: url(‘vikas_sprite.gif’) -0px -315px no-repeat; }
a#bottom-left:visited { background: url(‘vikas_sprite.gif’) -0px -315px no-repeat; }

a#bottom-right { background: url(‘vikas_sprite.gif’) -130px -105px no-repeat; }
a#bottom-right:hover { background: url(‘vikas_sprite.gif’) -130px -315px no-repeat; }
a#bottom-right:visited { background: url(‘vikas_sprite.gif’) -130px -315px no-repeat; }
</style>
</head>
<body>
<div id=”mysprites”>
<a id=”top-left” href=”#”></a>
<a id=”top-right” href=”#”></a>
<a id=”bottom-left” href=”#”></a>
<a id=”bottom-right” href=”#”></a>
</div>
</body>
</html>

Ajax reduces load time

Earlier web applications submit user completed forms to a web server and the web server responds by sending a web page back. This makes applications run more slowly and awkwardly than their native counterparts. Ajax is a term that refers to the use of a group of technologies together. Ajax applications can send requests to the web server to retrieve only the data that is needed; usually using SOAP or some other XML-based web services dialect. JavaScript processes the web server response at client side.

The final result is a quick interface, as the amount of data exchanged between the web browser and web server is greatly condensed. Web server processing time is also saved, since much of it is done on the client. Ajax is more a natural progression from an existing set of techniques as opposed to being something completely brand new. Yet within that progression, things are markedly different than in previous years in a couple of key areas.

Ajax provides a device to juggle up xml with xhtml. It drastically abridges the job fetching things from the server. It also defeats some speed glitches that conventional Web development has fallen prey too. In most instances an Ajax based site will load quicker than a comparable traditional Web site. Ajax significantly reduces initial load times. Ajax has some problems that it needs to overcome as it continues to mature.

But it is a promising field to be involved within and as the years roll on, it probably will greatly affect the way we think about building Web pages and Web applications. It also has to be apparent that Ajax is not a technology as such but to a certain extent is a technique that merges well with other technologies and techniques. For example: XHTML XML, DHTML and CSS. Actually, Ajax really is DHTML with the xmlhttprequest object thrown in. It is wonderful to believe how one object can modify the whole scenario of web technologies.