1. BrowserShots

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server.

2. IETester

I have found testing under IE is lot of headache. Fortunately, IETester, a free WebBrowser allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

3. NetRenderer

This web rendering tool is ideally suited for web designers working on Apple iMac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.

Whats your favorite tools? Please share.

Let’s create a simple example of animating a pop out sign.

First Create a Div with images

<div id="signpost">
	<img id="post" src="post.png">
	<img id="sign" src="sign.png">
</div>

Create the bounding box for the signpost, and give it a relative positioning context to ensure that we can position items absolutely within it.

#signpost{
 width:60px;
 height:196px;
 position:relative;
}

Next, the post is positioned with a z-index of two, to place it on top of the sign.

#post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
}

Now we place sign underneath the Post and rotate it with our CSS3 transform property

#sign{
height:46px;
width:80px;
position:absolute;
top:10;
left:60;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
 
-webkit-transform: rotate(86deg);
-moz-transform: rotate(86deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}

The sign is rotated using transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.

We set the transition to change the transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.

#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
         -moz-transform:rotate(0deg); }

Reference: http://net.tutsplus.com

Step 1:
Copy and paste the following code on the head section of your webpage .

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
	var name = "#floatMess";
	var menuYloc = null;
		$(document).ready(function(){
	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () {
				offset = menuYloc+$(document).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
 
			$('#close_message').click(function()
			{
  			$(name).animate({ top:"+=15px",opacity:0 }, "slow");
			});
		});
	 </script>

Step 2:
Add the following code in the CSS style sheet or in the style section of html page.

#floatMess {
		position:absolute;
		top:5px;
		float:left;
		width:95%;
		border:1px solid #999;
		background-color:#456;
		color:#ccc;
		padding:5px 5px 5px 25px;
		text-align:center;
 
		}

The above codes select the color,size font color, width etc of the floating message box.
You can change the upper parameters as per your requirements.

Step 3:
Now it’s the time for adding the main thing in the body section of your webpage ie the main message DIV which is going to be displayed on the webpage. Copy the following codes and paste it in the beginning of the body section or anywhere , it will not affect the other div of the page .

<div id="floatMess"><img id="close_message" style="float:right;cursor:pointer"  src="cross.png" />
      Your message Goes here
 </div>

Step 4:
You will need to download following three files and save it in the same folder which contains the main html file.

• jquery.js
• jquery.dimensions.js
• cross.png ( ICON need to display cross image at the message box )

Downloads:

• Click here to download jquery.js
• Click here to download jquery.dimensions.js
• Click here to download cross.png

DEMO

• Click here to see DEMO
• Click here to download the zip version of demo file .

And sometimes figuring out how to handle such errors when using a CMS such as WordPress can be even more challenging. WordPress has default settings for handling 404 errors, but they leave a lot to be desired.

What Causes Error 404 Pages in WordPress?

404 pages in WordPress are most often caused because of a change in the permalink structure of the site. If a site owner changes the permalink structure of their WP blog, they’re likely going to end up with incoming links pointing to pages that are no longer located at a particular address. This means those incoming visitors will be given a 404 page instead of the content they were looking for.

Other causes of 404 pages may be in the code of your index.php or search.php files. If there’s an error in the code in either file, it may return results with invalid addresses (or it may not return results at all). If you’ve made customizations to your index.php or search.php files, it’s a good idea to check and make sure they’re not serving up invalid addresses and that all of your pages are still working. Always save a backup of the previous version of each file before making changes in case you need to roll back to an earlier version.

Potential Damages of Error 404 Pages

The most obvious damage caused by getting a 404 page has to do with the bounce rate on your site. If a visitor follows a link to your site and they get a 404 page rather than the content they were looking for, it’s unlikely they’ll search your site to find it. They may assume that it no longer exists on your site at all, and simply look elsewhere.

How to Prevent Error 404 Pages

The best way to prevent 404 pages is to be proactive. First of all, set up your permalinks properly from the start. If you take the time when you first launch a blog to set up well-structured permalinks, you’ll be unlikely to need to change them in the future.

Be proactive about incoming links that aren’t correct. Send a quick note to the person who runs the site with the link and ask them to change it to the correct link. Most site owners will be more than happy to do so.

Don’t take down old content. If you have to take something down, rather than deleting it entirely, create a custom page at that address that provides some information on what used to be there, or links to other posts and pages that might be of interest to the visitor.

There are a variety of plugins out there that can help you prevent and manage 404 pages, too.

What do you want your website to do? Is it going to be primarily a static website, like an online brochure? Or is it going to be a fully-functioning ecommerce site? Or maybe it’s going to be really media-heavy with tons of videos, photos, and audio files. Or is a blog going to be the primary focus?

Whatever your site’s primary function is going to be, you need to define it and then find a CMS that does that particular thing really, really well. If blogging is the main focus of the site, then use a blog platform. If images and video are the main focus, then you need to find a CMS that either has great support for media built-in or has great plugins for enabling those functions. If your site is going to focus on an online store, then the platform you choose needs to be able to seamlessly integrate that online store without a ton of extra work.

2. A CMS needs to work intuitively.

When you average user opens up the backend of the site, they should be able to figure out how to do basic functions without too much instruction. Different elements of the site should be clearly labeled. The basics of posting a new page, editing a page, and even changing themes or sidebar elements should all be relatively simple to figure out for the average computer user.

3. The backend needs to be standardized.

Things should all work basically the same way in the backend of the site. A good CMS should have a standardized format for each section of the backend. If one section uses a drop-down menu for selecting something, then all of the other sections should use the same type of menu for similar options—not radio buttons or some other selector.

The same goes for the way things are named or otherwise referred to. If something is called a “page” in one place and a “post” in another, that’s going to get confusing (plus, most people consider those two different things). If it’s a “sidebar” in one place and a “second column” somewhere else, that’s going to confuse your average user.

4. The backend needs to be logical and well-organized.

Things should be laid out logically in the backend. This means that all of the functions related to editing, or sidebars, or themes, or creating new content, should be grouped somehow or otherwise function the same. Alternatively, some CMSs put all of the things related to pages in one place, sidebars in another, plugins in another, etc. Either way, they’re laid out logically and once you know the basic architecture, it’s easy enough to figure out where things are supposed to be.

5. The right CMS shouldn’t have a ton of extra functionality you’ll never use.

This is a completely personal choice. Some sites will make use of tons of advanced functionality. Other sites won’t. If you’re never going to have an online store, why do you need a CMS that focuses on ecommerce? If you never plan to do anything beyond posting photos to your site, why have a CMS that does that plus a hundred other things? Instead, find a CMS that does the one thing you want to do really well and forget about the other features.

6. The right CMS should be easy for non-geeks to use.

Web designers and developers are very good at using web-based applications and pretty much anything else computer-related. A lot of their clients, on the other hand, probably aren’t. While most of the end-users of any CMS are going to have at least basic computer knowledge, they’re probably not super tech savvy. While you might love a particular CMS and think it’s the best thing since solid-state hard drives, your clients might find it confusing, hard to use, and overly complicated.

The question I always ask myself when considering this is, “Could my mother use this?” My mother is your typical business computer user. She can do spreadsheets, word processing, and email, but she’s definitely not a techy. If I’m confident that I could easily explain a CMS to her and she’d then be able to use it with a minimum of later support, then I know it’s going to be appropriate for 90% of other likely users.

7. It needs to include a WYSIWYG editor.

WYSIWYG editors make life easier for your clients. Most clients don’t know HTML and don’t care to learn. But they want to be able to use bold or italic text or use header tags to create sections within their pages. A WYSIWYG editor makes that all possible for non-tech-savvy users.

8. The pages it creates should be fast-loading and have simple code.

One of the major advantages of a CMS is that it simplifies the updating and management of a website. So the pages it produces should also be simple. There shouldn’t be a lot of extra code or provisions for unused functionality in the final page code. All that serves to do is slow the load times for the page and increase the likelihood that something will render wrong or throw an error.

9. The template engine should allow you complete creative control.

Some CMSs have very set ideas about what a website should look like. There needs to be a sidebar for navigation. You shouldn’t use navigation dropdowns. The content has to be arranged in nice, neat columns. Who’s the designer here? Whatever CMS you choose should let you design pages the way you want and should work around your needs.

10. The right CMS should have adequate support and documentation.

In all likelihood, you’re going to run into some sort of problems with any CMS you choose. Whether this is caused by add-ons or in the course of customizing some bit of code, or whether the CMs is doing something unexpected, having somewhere you can turn to to get advice on how to fix the problem is invaluable.

This doesn’t necessarily have to be some expensive tech support phone number or other paid support. Sometimes you can get quicker and better responses from a user community. Does the CMS you’re considering have support forums frequented both by other users and by those involved in the project? Are there other, off-site forums dedicated to that particular CMS? The people who visit these forums can be a wealth of information for doing just about anything with your CMS of choice.

Thorough documentation for the CMS is also valuable. It should provide information on everything from basic use of the CMS to customizations and advanced functionality.

Article Source

I don’t mean the entire article content coz twitter only allows 140 chars max :) I just mean publishing your article title and link to twitter.

Here is an awesome wordpress plugin which lets you post your wordpress article to your twitter status automatically. It’s called WP to Twitter.

It has very good options to be selected. You can tweet whenever your post is published. Or, even when your post is being edited. You can also tweet whenever your wp pages are published or edited.

The prominent feature I like about this plugin is that it lets you post your wordpress article’s content as tweet by setting character limit. Moreover, it publishes your wp article tags as hashtags in twitter.

The URL Shortener is always there. You can do with Cli.gs, Bit.ly or use wordpress as url shortener.

This plugin is very beneficial and is a must if you are a twitter user or a twitter fan lik e me :)

Keep blogging and keep tweeting…

Cheers,

Step 1:
We will create a PHP file; lets say follower_count.php or whatever you’d like to name it. Then simply put following contents in that page.

<?php
$twitter_username	=	'designgala';	// please replace it with your twitter username
$tw	=	get_option("total_twitter_followers");
if ($tw['lastcheck'] < ( mktime() – 3600 ) ) { 	$xml	=	file_get_contents('http://twitter.com/users/show.xml?screen_name='. $twitter_username); 	if (preg_match('/followers_count>(.*)

Explanation:
I used 2 PHP functions file_get_contents() and preg_match() here. file_get_contents fetches twitter xml file and stores in buffere while preg_match searches followers_count for a match in the buffer returned by earlier function.

Step 2:
Now you can include above file using PHP include like below in any template file.

<?php include("follower_count.php"); ?>

Thats it. It will show twitter follower count.

[Photo Credit: JavaJunky via Flickr]

You can add the toolbar to wordpress, blogger, typepad, drupal, joomla, ning, vBulletin, and even in your custom website as well.

Benefits
- Increase page views and time on site
- Increase content sharing with the social tools available
- Enrich your content and increase communication

Here is a list of Applications available in wibiya toobar (there are more applications than the list below):

- Search (add search box in the toolbar)

- Google Translation (translate your page with google translation)

- Latest posts (view latest posts from the toolbar)

- Random posts (view random posts)

- Live notifications (broadcast alerts, messages, news and more to all your visitors)

- Real time users (display real time stats of your website including number of online users, popular pages and a dynamic geolocaion user map)

- Navigation links (create a custom navigation menu or button that make it easier for your visitors to reach different pages)

- Subscribe (add rss subscription button)

- Sharing tools (facebook, twitter, email, digg, stumbleupon, yahoo! buzz, myspace and more)

- Facebook community (create your own website community with facebook connect in just one click)

- Twitter dashboard (post tweets from website, latest tweets, twitter search, and more)

- Facebook fan page (bring your fan page to your website and grow the number of fans)

- Photo gallery (display your flickr photogallery in your website)

- Youtube channel (display your youtube video gallery in your website)

You can view the demo of the toolbar in the wibiya homepage itself.

Use wibiya toolbar, make your site more popular, interactive and cool. ;)

You are browsing the web. You liked a url and wanted to share it, probably on twitter.

The old lengthy way:

You will open twitter.com, login with you username and password. Open url shortner like bit.ly and shorten the url you want to share. Then post your tweet with some text and shortened url.

The new and quick way:

You can do the same very easily and quickly. I hope you are using Firefox. So, there is a firefox addon Shorten url which will shorten the url and display the result in location bar. It supports more than 100 URL shorteners.

You can always remain logged in in twitter with the firefox addon Echofon. Echofon adds a tiny status bar icon that notifies you when your friends post tweets. You can also view updates in a timeline and post your own tweets.

So, it’s just simple. Shorten any url with Shorten url ff addon. And share it adding some text with Echofon ff addon.

Enjoy tweeting!

There are very simple steps to achieve this:
Step 1:
Copy the following code and paste it in the head section of your webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

Here, above the file “reload.php” will be reloaded in every 20000ms i.e 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly, the #loaddiv is the name of DIV which is going to be refreshed.

Step 2:
and now you need to put the div in the body section of your page

<div id="loaddiv">
</div>

Step 3:
Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement.
here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.

echo"<img src='http://www.76miles.com/'/>";

Now your page is ready .
Click here to see the demo.