Archive for August 2009
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.
onmouseover marquee stop/start
Posted on: August 11, 2009
- In: HTML
- Leave a Comment
As we are all aware of the HTML tag marquee what it does, it will scroll the text either from left, right, top or bottom. You people might have observed that if you mouseover the text it will still be moving. So to stop this text onmouseover what should we do, here is a small trick.
Just try it by yourself:
<marquee behavior=”scroll” direction=”left” scrollamount=”3″ onmouseout=”this.start()” onmouseover=”this.stop()” >
Thankyou for looking out for my blog.
</marquee>
Great isn’t it, just call two functions onmouseout and onmouseover and that will do it for you, no need of big big JavaScript functions.
HTML 5 tags
Posted on: August 10, 2009
- In: HTML | Tutorials
- Leave a Comment
HTML 5 reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.
As you all guys know that the previous/current version of HTML is HTML 4.01. Below are some of the lists that are new and got added to HTML 5. But these are not supported by all the browsers as of now.
Here is the list of tags that got added to HTML 5:
<article> : Specifies an article.
<aside> : Defines content aside from the page content.
<audio> : Defines sound content.
<canvas> : Define graphics.
<command> : Specifies a command.
<datagrid> : Defines data in a tree-list.
<datalist> : Specifies an “autocomplete” dropdown list.
<datatemplate> : Defines a data template.
<details> : Specifies details of an element.
<dialog> : Defines a dialog (conversation)
<embed> : Specifies external application or interactive content.
<eventsource> : Defines a target for events sent by a server.
<figure> : Defines a group of media content, and their caption.
<footer> : Specifies a footer for a section or page.
<header> : Specifies a header for a section or page.
<meter> : Defines measurement within a predefined range.
<nav> : Specifies navigation links.
<progress> : Specifies progress of a task of any kind.
<section> : Specifies a section.
<source> : Defines media resources.
<video> : Defines a video.
<time> : Specifies a date/time
<rule> : Defines the rules for updating a template.
Internet Explorer woun’t support the above tags as usual. IE 8 is now supporting some of these. Mozilla Firefox 3 and Opera 9.5 supports most of them.
Note: HTML 5 is not a W3C recommendation yet!
So need not worry about these tags. 🙂
JavaScript innerHTML
Posted on: August 6, 2009
- In: JavaScript | Tutorials
- 2 Comments
You people might be wondering how you could change the contents of an HTML element? like to replace the innerhtml with the one selected from the select box. Its very easy, you’ll be able to change your text and HTML as much as you like with the help of JavaScript innerHTML.
Many HTML elements rather you can say each HTML element have an innerHTML property, and this property allows you to access the text related to an element and modify it.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id thats very important. With that id in place you will be able to use the getElementById function, which works on all browsers.
For Eample:
here is the JavaScript Code:
<script type=”text/javascript”>
function changeText(){
document.getElementById(‘chngTxt’).innerHTML = ‘the world of Mywebdunia’;
}
</script>
<p>Welcome to <b id=’chngTxt’>mysite</b> </p>
<input type=’button’ onclick=’changeText()’ value=’Change Text’/>
thats it very simple, try it out yourself.
what is the DOM?
Posted on: August 6, 2009
DOM stands for Document Object Model is a W3C (World Wide Web Consortium) standard.
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
DOM has three different levels:
1. Core DOM – standard model for any structured document.
2. HTML DOM – standard model for HTML documents.
3. XML DOM – standard model for XML documents.
DOM also defines the objects and properties of all document elements, and the methods (interface) to access them.
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.
Mywebdunia's Blog 