the main reason that makes me writing this articles is one of my friends told me that he is not going to use ajax in his web site because he needs to be highly seo optimized.

many reason that makes my friend and many other think like that is poor developers that uses this technology in the bad way , you can write javascript code to perform ajax in many ways some of it can get the benefits of seo and we are here to clear and study that ways so lets begin

first : google or other search engines cant crawl javascript so the secret is dont EVER let javascript handle the links without html support in another meaning lets see that example

<a href="mylink.html"><img src="anyone.jpg" /></a>
<img src="anyone.jpg" onclick="location.href='mylink.html'" />

the two lines declare two simple ways to link and the two ways actually work but one of them is seo friendly which is the first one because we use simple html tag attribute (href)

the same thing in the ajax make the links in simple anchors with (href) attribute but handle click event of this anchor make the ajax request and prevent the browser default action by returning false

lets see it in action

$(function(){
 
$('a.ajx').click(function(){
 
$('div.response').load('ajaxfile.html');
 
});
 
});
 
<a href="ajaxfile.html" class="ajx">Click me i am seo friendly ajax link</a>
 
<div class="response"></div>

when search engine crawel the page it reads only the html tags so he read this anchor and (href) attribute and follow the page ajaxfile.html to crawel it and add it to the site map

and when human go to this page and click on the link the click event fired and we do tha ajax request and because the return false the page never reloaded

this is the point think as the search engine and you will win

feel free to feedback me

thanks

we will talk to day about the most common techniques on the web nowadays – yes thats right we will talk about mod rewrite that awesome module that brings static urls benefits into dynamic contents

ok lets start

1- check for the module before rewrite:-

before you use rewrite check for the module in htaccess by doing this

<IfModule mod_rewrite.c>

#here is the rewrite rules and conditions

</IfModule>

this is more tidy and clean code it just ensure the you have mod rewrite module installed and loaded with apache before run the rewrite code

2- rewrite css and images and other files:-

on of the most issues you will gonna face in rewrite is image and css not being rewrite in the web

here is example

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule (.*)  index.php?url=$1  [L]
</IfModule>

this rule will rewrite all urls to index.php with parameter url but in this conditions all urls will rewrite including images and css and js files and that will produce errors

so we can fix this problem by telling rewrite that rewrite only notfound urls but the existing files will exculde from rewrite by adding this two lines before rewrite rule

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

the first line will exclude exsiting folders and the second will exclude files

here is the last code

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule (.*)  index.php?url=$1  [L]
</IfModule>

3- rewrite and wildcard domains:-

do you want to controll subdomains via script this is the right choice

we will do this in steps

first you just will added *.domain to be treated like www.domain.com by adding this line in httpd.conf

ServerAlias www.domain.com domain.com *.domain.com

then you have to create the rewrite

<IfModule mod_rewrite.c>
Options +FollowSymLinks
Options +Indexes
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !www.domain.com$ [NC]
RewriteCond %{HTTP_HOST} ^(www.)?([a-z0-9-]+).domain.com [NC]
RewriteRule (.*) %2/$1 [L]
</IfModule>

4- with www or without it :-

you can use rewrite to force www to be added in the domains , that is very useful is search engine optimization – SEO

you can do it by this code

<IfModule mod_rewrite.c>
Options +FollowSymLinks
Options +Indexes
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^domain\.com$
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]
</IfModule>

5- 301 redirect :-

if you want to redirect page to another never ever use meta redirect or javascript redirect because its too bad for search engines coz its a common way for the spammers and absolutely you dont want to be  a spammer in search engines eye

the right way is 301 redirect ( search engine friendly redirect )

you can do it like that :

<IfModule mod_rewrite.c>
Options +FollowSymLinks
Options +Indexes
RewriteEngine On
RewriteBase /
RewriteRule ^moved_page.html$  new_page.html [R=301,L]
</IfModule>

you will notice the we used tag R with value 301 that means we will refresh with 301 notice the means moved permanently

thats all i have for now

if you have any questions dont hesitate comment here

google called this plugin chromeframe and  according to google google chrome frame is an open source plugin that bring google chrome technology to internet explorer

the next video shows the power of the google chromeframe the google plugin

what you are waiting for ,  if you are using internet explorer get the plugin now

http://code.google.com/chrome/chromeframe/

1- background image size:-

with css2 it was impossible to define a size to background image  but with css3 you can simply define the background image size by a few css lines

you can add something like that if we want 100% background size in css3

background:transparent url(img/simplebg.jpg) no-repeat;

background-size: 100%;

simple , isn’l , but wait

you tried it and it  didn’t work with you ??

unforunately that will face you much when you dealing with css 3 issues becasue it doesnt implemented the same way in all browsers and doesn’t implemented yet in browsers such as internet explorer

so we will add some lines to work in the most browsers

-o-background-size for opera browser

-webkit-background-size for webkit engine browsers -> safari and google chrome

unfortunately it didn’t work with firefox

so our code will be

background:transparent url(img/simplebg.jpg) no-repeat;

background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%

2- multi background :-

another awesome feature in css3 is multi background

you can add multi background to one container , you think its hard look at this

background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;

simple and easy  thats it

important note :-

the order is very important here because the first image will be above the next one etc..

we can merge the previous features together like that

background:url(img/twiter.png) no-repeat top right,url(img/simplebg.jpg) no-repeat top left;

-webkit-background-size:auto  auto, 100%;

3 - background-border :-

yes you can now define a background to be a border to a container

see the  next image

you can define the border cordinations like that

border-image:url("img/simpleborder.png") 25% 30% 12% 20%

we can use some reserved words like (stretch,repeat,round)

and we will add some extentions to work with most common browsers

-webkit-border-image:url("img/simpleborder.png") 25% 30% 12% 20%;

-moz-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

-o-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

-khtml-border-image: url("img/simpleborder.png") 25% 30% 12% 20%;

4-  transparent colors:-

we was doing transparent colors by making the global container transparent via obacity features  but now you can simply make the  background colors only transparent by rgba

rgba(0,0,0,0.5)

the first 3 values is the rgb  values and the last value is the obacity value

note: there is a code from webdesignerdepot http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today

many of us working on css to style web page for the visitors
you may added this line before in your page

<link rel="stylesheet" type="text/css" href="cssfile.css" />

ok the css file now will affect the screen but what if we want the css affect the print

yes we want the visitor print the page but without the menu , advertisement .. etc

ok we will now create a  css file and we will name it print.css

now add this line to your page

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

do you notice someting ??
yes , media=”print” this tells the browser to use this css file when print

concepts of print style sheet:-

1- adjust body margin

adjust the body margin so printed page margin will be as you want not the browser default
you can use this for example

body{margin:0;

you must use one measure for font size and related things like pt , em so it can display good on your printer

3- page break

the biggest problem will face any developer in print issues is page break , the browsers differ in page break , many times before i used print css if web page is longer than one page it cause pagebreak but if there is image in the middle of that break it will cut and there is a disaster

so you can adjust the page break by

page-break-beforepage-break-after

for example if you want page to break after the div named “break-div” you may type this line in print.css

#break-div{page-break-after:always;

- don’t ever use background color or background image in your print stylesheet the visitor will hate you

- try to be very simple the visitor when he wants to print your page he wants to keep the information in your page not the design

- just use the print css its better and more professional

enjoy and see you in another post

ok first lets make a small div

ok now in css lets type

.transparent_div{
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}

now you can see your div transparent
i tested the code on firefox , internet explorer and opera
have fun and see u