31 December, 2008

How to create a google sitemap

Sitemaps an important fact in the realm of web development.

There are some benefits you can have with sitemaps, as listed bellow.
  1. helps to index the new pages and recent changes
  2. helps to index your webpages more quickly on search engines
  3. Also helps search engine to keep search content fresh
Now without going to much detail lets see how to create a site map, find bellow a very brief site map, which I will use to explain how to create your own one.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84
http://www.google.com/schemas/sitemap/0.84/sitemap.xsd">


<url>
<loc>http://mysite.com/</loc>
<lastmod>2008-27-23</lastmod>
<changefreq>never</changefreq>
<priority>1.0</priority>
</url>

<url>
<loc>http://mysite.com/about</loc>
<lastmod>2008-27-23</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>

<url>
<loc>http://mysite.com/contact</loc>
<lastmod>2008-27-23</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>

</urlset>


Okay by having a quick glance at the example you will notice that this it XML, now dont panic if you dont know XML, its really easy to learn. Go to http://w3schools.com/ to find tutorials.
Now as a fact Google sitemaps are created using XML, right thats what I wanted to mention huh!.

think it is the time to review the sitemap,
Lets assume that my site is a three page website, all the pages are just and index page, an about page and a simple contact form. Have a look at the sitemap, can you see three code snippets just like this

<url>
<loc>http://mysite.com/</loc>
<lastmod>2008-27-23</lastmod>
<changefreq>never</changefreq>
<priority>1.0</priority>
</url>


Now for ease I would say that each of these snippets represents a web page. lets go through it, the whole thing is wrapped inside a url tag (simple xml tag huh!).

there notice the for tags nested inside the url tag. lets go through them first.

  1. <loc>= okay this is the location of your webpage. so it is my index page as well, and it is a complete url.
  2. <lastmod> = now this I wont have to explain, simply the last modified date.
  3. <changefreq> = this is the frequency you change your page. you can state the frequency with hourly,daily,weekly,monthly,yearly, never. Okay in my case I have not planned to change my webpage, so I have used never. I dont think I will have that much time to change it hourly huh! ;)
  4. <priority> = now this is another important data. the priority of your webpage in your site. You might be thinking of the greatest priority, with a lot of 9s. yeah lots of 9s make a big number, but google has their own way of specifying the priority. you can state it by using a decimal which is in the range of 0 - 1. The high priority one is 1 and the lowest is 0 anything can be used within here, 0.1, 0.2, ...., 0.8,0.9, 1. the 0.5 is the medium priority is 0.5.
Okay now we disscussed about the addition of the pages. now what about these


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84
http://www.google.com/schemas/sitemap/0.84/sitemap.xsd">


the first line says that the XML is using UTF-8 encoding, oh yes google needs in that way in order to accomadate special characters. and the second line decalres the namespaces.
now these two lines are going to be the same for any google sitemap. so you dont have worry, just do a copy and space.

Okay, now you are ready to create your sitemap, whoops! hell your site has 100 and 1 pages.
now what it will take days to create one, dont worry there are sitemap generators.

screen the following URLs,

http://www.sitemapspal.com/

28 December, 2008

Greetings website is doing a nice job!

I have blogged about the greetings.whynotonline.com website which I coded up in just 5 hours. It is a free service which let you send your warm wishes to your loved ones.

Whynotonline.com officially launched this site on the 8th December 2008. At this moment it has been working for 21 days. The fact that drove me to write this blog post is that for this 21 days the site has sent more than 250 greeting cards. This is a giant step for a very new website.

If you still didnt hear about this new website pay a visit, Click Here.

17 December, 2008

whynotonline.com redesigned

whynotonline.com is redesigned.

As the earlier design is somewhat messy and hard to find the content on the website we, me and my friends thought of coming up with a new good design. Also while designing our website we thought of coding up new modules to manage the portfolio, and the content.

So finally we came up with a nice design template, (its me who designed it!), and after the approval I had to work on it.

After two sleepless days we managed to get our site ready with a new fresh theme.

Have a look!


I would like to thank all my friends at whynotonline.com for helping me to complete this job successfully.
Read the whynotonline.com blog post

Vote us on CSS Fights

cssfights vote

14 December, 2008

List Style Image not working with IE

I found another crappy issue with IE, the CSS list-style-image doesn't work with IE.

After spending 10, 15 minutes on the internet searching for some hack I found that this is an issue everyone are experiencing, unfortunately I was not able to find any hack.

Now I thought of some thing by my self, what I did was add the image I needed as the background, then add some padding to make sure the list content doesnt not overlap with the image.

Now my code is something like the following,

#Navigation ul li{
float:left;
background:url(../images/nav-bullet.gif) left no-repeat;
list-style:none;
list-style-type:none;
width:auto;
padding:0px 8px;
}

This worked for me, but not the right code I needed, if you got into the same problem try this.

08 December, 2008

IE Hacks!

I hate IE!

yes I do, I guess that there wont be a single web designer who doesn't.

I have been working as a web developer for the last 4 years, and I would say that all of the time IE has been my nemesis. I had to write separate CSS for IE all the time, but as I got to know about the CSS hacks two years back, I found it easy to use them. They are pretty nice little code snippets which only affect on the web page if it is only being rendered in IE.

I thought of posting two friendly websites, where I read a lot about these CSS Hacks.

Find them bellow this page.

Still I don't feel any good about IE, in my world it is just some crappy software which doesnt know how to render a simple HTML. Anyway this is our fate! most of the people still use IE, so we have to make our websites ready for IE too, I am concerned about these hacks and all, because of the prefixed reason.

Even the new google browser Chrome is 1000 times better than IE, anyway as we designers doesnt have any other choice lets pray, people will use browsers except IE then we can forget about this crap :)

http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/
http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/

06 December, 2008

Greetings.whynotonline.com

Send your friends and family heartfelt wishes this christmas and new year
season using the free service provided to you by whynotonline.com.

This is again a website project where I am involved with the development, I was the only developer and I completed the whole website within just 5 hours, from designing upto coding.

I used SilverStripe Open Source here to do this, yes the Sapphire framework is really great for web development, welcome to try it out. go to http://silverstripe.org

Creating widget ready Wordpress themes

I thought writing some thing about creating Wordpress themes.

This post is about creating widget ready Wordpress themes. Is really easy.

Now all you need is two php files in your theme folder
  1. sidebar.php
  2. functions.php
In the sidebar.php just add the following code.

<?php
if(function_exists('dynamic_sidebar'))
dynamic_sidebar();
?>

Then in the functions.php you have to add the following code.

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div id="%1$s" class="sidebar-box %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
?>

Now let me explain what we did with these codes,

in the sidebar.php we are calling the dynamic_sidebar function to render the sidebar which is dynamically created by the wordpress, and in the functions.php we are registering a side bar.

Now go to your admin area and then add any widgets to your side bar, when you save your settings you are done. Just refresh the page and see whether it is working.

For further reference read the following page from the Wordpress codex

http://codex.wordpress.org/WordPress_Widgets_Api/dynamic_sidebar