Archive for the ‘Tips n Travia’ Category
Absolute and Relative Paths
Posted on: September 9, 2009
Whenever you are linking a document or an image in a web page, either you need to have an absolute path or its relative path to link it. Lets see about these two paths in detail.
1. Absolute Path Url:
Absolute path is one which has the full url including the domain name, for example the absolute path to this web page is https://mywebdunia.wordpress.com/2009/09/09/absolute-and-relative-paths/
2. Relative Path Url:
Relative path are those which does not contain the domain name that is it does not starts with http. For example this could be one
<img src=”images/title.gif”>
Here as you can see there is no domain name included into the src .
Relative are much more frequently used than absolute paths.
301 redirects
Posted on: August 21, 2009
301 redirect is the most efficient and Search Engine Friendly method for webpage redirection. Most of us we tend to change our url or move our page to some other location, by doing this our page rank gets affected. So to avoid this we have a best solution for this, that is 301 redirect. So you might be thinking how to do this 301 redirect.
How to redirect a webpage:
Redirect Using .htaccess
1. Create and .htaccess file, just open a notepad, name and save the file as .htaccess (there is no extension).
2. Place the following code into the .htaccess file:
redirect 301 /old/oldfile.htm http://www.youdomain.com/newfile.htm
3. Save the .htaccess file and upload it to the root folder.
IIS Redirect
1. In internet services manager, right click on the file or folder you wish to redirect
2. Select the radio titled “a redirection to a URL”.
3. Enter the redirection page
4. Check “The exact url entered above” and the “A permanent redirection for this resource”
5. Click on ‘Apply’
HTML Redirect
HTML Redirect can be done with .htaccess redirect if your site is hosted on a Linux Server and IIS Redirect, if your site is hosted on a Windows Server.
What is .htaccess :
When a visitor/spider requests a web page, your web server checks for a .htaccess file. The .htaccess file contains specific instructions for certain requests, including security, redirection issues and how to handle certain errors.
The 301 redirect is the safest way to redirect old web pages to the new pages or old web site to the new web site and keep the same search engine rankings. It will also pass on the page rank from your old site to your new site.
Cross Browser CSS Hacks and Tools
Posted on: August 19, 2009
Well as a designer or a developer we are responsible for developing a cross browser product. Most commonly used browsers are
1. Mozilla
2. Internet Explorer
3. Safari
4. Google Chrome
5. Opera
6. Netscape
CSS Hacks:
I always hesitate to share this with anybody, as few days back my colleague came with some cross browser compatibility issue. So I gave her some solution to sort it out. But later I saw that every where she has used the same concept to make it working. That is not gonna work if you tend to use a lot of hacks with the css as according to W3C it wont make your css valid.
Even then these are some tips for CSS hacks
1. For IE
<!–[if IE ]>
<link href=”iecss.css” rel=”stylesheet” type=”text/css”>
<![endif]–>
2. IE 6 Hack:
*html{
width:200px;
}
3. IE 7 Hack:
_html{
width:200px;
}
4. IE 6 !important Hack:
.classname{
width:200px !important; // IE 6 will skip this line
width:220px; // IE 6 will take this width
}
Cross Browsing Tools
These are some of the cross browsing tools that are very useful for checking compatibility
1. IE Tester.
2. Browser Shots.
3. Browser Camp.
How to optimise your website
Posted on: August 19, 2009
We have seen most of us are very keen in designing our website very nicely. To do so we end up with using more good images, css styles and javaScript . So its not only important to develop a good website also to optimise your website. As we why we all others who view your website tend to see that the website should load fast, the moment he types the url on the browser if the user finds that the site is taking time to load. The user gets pissed of and he closes the browser. So its better that you optimise your website. Now you might be thinking of how to optimise website. There are some tips for doing this.
1. Use CSS Sprites : Rather than using multiple CSS background images for your page, instead use CSS sprites that is combine all these into one graphic image. Which will reduce your image size and also the HTTP requests. Say if there are say 5 images so there will be 5 HTTP request generated and sent your server. So rather then 5 images combine them into one, so there will be only one HTTP request.
Ex:
#menu ul li{
background:url(images/menuicons.gif) no-repeat;
}
#menu ul li.design{
background-position:0px -50px;
}
by this the size and HTTP requests will be considerably reduced.
2. Use an external CDN : A CDN is nothing but Content Delivery Network, which basically means use of scripts that are hosted on other sites.
Now you might be thinking why should I use the scripts of others. The reason is users might not download the scripts when they visit your website as it will be already cached.
Google has an AJAX Libraries API that you can use.
<script src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js” type=”text/javascript”></script>
3. Put JavaScript at the bottom: Put all those JS that are not required at the very begining of your webpage. By doing this it will make your content load first and then the rest of the JS.
4. Optimise graphics for web: Save your images using photoshop, with save for web as option. By which you can check the quality of your image and which will help you reducing your image size also.
By these I think you can optimise most of the website. I had tried this one for my website. I think even you should have a try for this and do comment on whether your site got optimised or not.
These are some of the tips for making your CSS coding a pain free.
1. Keep it simple : Write your CSS code as simple as possible, do not write any complicated code which will confuse yourself. Plan your layout logically and work on it with top down approach, which make yourself comfortable to work on your design.
2. Use less Div’s : Use less div tags as much as possible. Too many div’s will lead to increase your number of lines of code and later if you end up with missing some closing div’s then again a mere problem to solve it.
For example:
<div id=”header”>
<div class=”bold”>Heading</div>
</div>
<div id=”subheader”>
*lt;div class=”bold”>Sub Heading</div>
</div>
<div>This is the content</div>
This code can be reduced to
<h1>Heading</h1>
&l;h3>Sub Heading</h3>
<p>This is the content</p>
3. Validate your code : Validate your HTML and CSS code. Validate it regularly do not wait until you have finished the coding your design. It may happen that you might have used some inappropriate feature that might lead you to fix it with a lot of waste of your time. Validating regulary will not lead you to such problems.
4. Hacks : Do not use hacks unless it is a known and documented bug. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with.
5. Flexibility : Always remember that a web page isn’t the same as a printed page and that ultimately the user has more control over how your page will appear than you do. With this in mind try to allow for some flexibility in your design so that things like text resizing issues don’t break your layout. Don’t make everything a fixed height/width or at least use ems to allow the layout to expand when text is resized.
6. Browsers Support : Avery important tip as far as I am concerned. Its very difficult to make it compatible with all the browsers. So I think either talk to your client or customer to which all browsers he is aiming for.
So once decided which to support then we can aim for only those browsers, make sure that you have access to all those browsers in some way.
Do not try to make these changes at the end or wait till you finish coding the design that may lead to a tedious job for you to change.
Important add-ons for Firefox
Posted on: August 13, 2009
These are some of the important add-ons for firefox which will help developers and designers in one or the other way:
1. Firebug : Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
2. MeasureIt : Draw out a ruler to get the pixel width and height of any elements on a webpage.
3. Web Developer : The Web Developer extension adds a menu and a toolbar with various web developer tools.
4. YSlow : YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
5. Live HTTP Headers : View HTTP headers of a page and while browsing.
6. ShowIP : Show the IP address(es) of the current page in the status bar. It also allows querying custom information services by IP (right mouse button) and hostname (left mouse button), like whois, netcraft.
7. Phoenix : An editor with real time syntax highlighting which allows edit, run and test CSS, HTML and JavaScript code. Phoenix will tell you how many CSS and JS files are loaded into a page, how big these are, it will let you edit, pack and de-obfuscate them.
8. Adblock Plus : Ever been annoyed by all those ads and banners on the internet that often take longer to download than everything else on the page? Install Adblock Plus now and get rid of them.
9. IE Tab : This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.
10. ColorZilla : Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
11. AutoPager : The AutoPager Firefox extension automatically loads the next page of a site inline when you reach the end of the current page for infinite scrolling of content. Very important for Designers.
12. FireShot : FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part)
13. Screengrab : Screengrab! saves webpages as images. It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.
14. LinkChecker : Check the validity of links on any webpage.
15. Html Validator : HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
CSS sprites group multiple images into one composite image and display them using CSS background positioning. By this you can save significant amount of HTTP requests by combining it into one or more sprites and using them by CSS.
Before knowing more about Sprites you need to know why to use CSS Sprites. Now you know that what Sprites are all about(grouping of multiple images), you might be thinking why to combine all those images? isin’t it quicker to use smaller images. I say no, by using smaller images you might be thinking that I am loading the site by a loading faster by loading bits. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of these images use a seperate HTTP request, and more number of these require more time and less efficient is your page.
So lets see now how this is achieved.To achieve this you need to do the following,
1. First and the foremost thing is to group all your images(usually icons and decorative images) into a sprite.
2. Then align these images into one or more lines.
3. Then use this image as a background image of some element and position it to X and Y pixels accordingly.
By doing this you get an increased speed and reduced HTTP requests.
This is the simple technique and easy method to improve your web performance.
Search Engine Submission Links
Posted on: April 20, 2009
Here are some of the links where you can submit your site for free for crawling.
1. Google : Click Here
2. Yahoo : Click Here
3. MSN : Click Here
4. Guruji : Click Here
5. Alexa : Click Here
How to Increase Page Rank?
Posted on: April 15, 2009
Here are some of the steps how can you increase your page rank.
1. Update Content : Update your content regulary so that you can have unique content on your site. Which gets you more and more visitors to your site, which indirectly increases your page views and so the page rank also.
2. Inside Linking : You need to provide inside linking in your website that is if you have any blogs in your site, so provide a link for previous blog and next blog when the user is viewing your blogs. Which keeps him more time on your site.
3. Create Sitemap : Create a XML sitemap and submit it to google and yahoo. You can generate XML sitemap either manually or from some sitemap generator website.
4. Linking with other Website : Have linking with other websites that is put their link on your website and put your link in their. Which will help your visibility in search engine more.
Mywebdunia's Blog 