More here

See Also Following Topics:

• An Introduction to Object Oriented PHP
• PHP Image File Upload Tutorial
• PHP Redirect to another Page/URL Script
• Delete Multiple Records Using Checkbox With Select All Buttons
• Advanced PHP Query function

What the heck are Objects and Classes?

Classes, at their simplest point, are just receptacles of functions. They can be compared to a folder on your computer (assuming you aren’t running DOS). Inside the folder you may have three files, or in this case, functions. Let’s use a classic example, a Dog.

Take a look at the following image:

As you can see, a Dog has many “functions”. It can run, walk, sit, play, and bark. This is the essence of what a class is.

An Object, on the other hand, is a way to represent your class. For example, you can have your class named “Dog”, but you can reference it by a variable called Cat if you really wanted to confuse yourself.

That’s all we’re going to cover in this section, so if you’re still confused, read on and I believe the examples will make some coherent sense.

Writing our first class

Since this is just our first class, we’re going to keep things nice and simple. Open up your text editor of choice and make a new file in your web root called myClass.php. Add in the following code:

<?php

?>

If you navigate to this file on your server, nothing will show up. All we did was set up a class (container) and add in a function, we never referenced it to be run.

How to use your freshly written class

Now that we have our myClass.php file all written, we’re going to reference it and use it. Make a new file in the same folder as your class is in, called index.php. Add in the following code:

<?php

?>

If you run the file, you should see “Hello World!” echoed out. Let’s go over what we did to make this work. First, you can see that we required the myClass.php file, which contains our container full of functions. Next, we had to make a new Object, and we used the class name as the object name, just for ease of use. And finally, we referenced our sayHello function by writing the Object name with an arrow and the function name.

Making it Friendlier

Right now, if we wanted to use this to greet a logged in user, there wouldn’t be much of a sense of personalization, would there? Wouldn’t it be nice if we could say Hello to the specific user? Well, we can! Go back to your myClass.php file and edit it accordingly:

<?php

?>

All we did was add a parameter to the function called name, that we can pass along to the function from our index file. Go back to your index.php file now and add your name like so:

<?php

Now, reload your index.php file and you should see a nice textual greeting!

Conclusion

Now that we’ve covered the very basics of Object-Oriented PHP, you can practically do it all. And was it hard? Hopefully not! Be sure to check in later for the rest of this series, in which we’ll be making a fully functional MySQLi Database interaction class! Thanks for reading.

Constructors and Destructors

Think of PHP constructors and destructors like a building. You construct a building at first, then when you’re done using it, you destruct it. Except in PHP, there are no live explosives for the destruction. Let’s look at the following example of constructors:

<?php

?>

In this example, we create a new class simply called MyClass, then a constructor function that says MyClass Loaded!. Basically, anything you want to happen when you call upon your class, should go in the constructor function.

In PHP, you don’t need to worry about always having a __destruct() method in your class, as all classes and variables are removed after your object is destroyed. (At the end of execution).

Returning data from your functions

In the real world, you don’t want to be using echo statements within your functions, you want to run your function and return the data for you to echo out where you want it. Let’s take a look at the following example that could be part of a blog application:

<?php

?>

Here, we are using a constructor to make a new MySQLi connection, and then using that connection set in the constructor to run a possible query, then to return the result set to be used however you’d like to display the data. Simple, right?

Keeping Organized

In the first part of this series, I described classes as boxes, and functions as the things within the boxes. This picture is a great representation of keeping your classes well separated from each other, and their contents nicely arranged.

One key aspect of writing classes is to keep things easy to read and edit later. Let’s take a look at a file from the very popular blogging platform Wordpress. As you can see, above every variable declaration, class declaration, and function declaration, there is vital information about the parameters, what the function does, and what it returns. Let’s write our own example now:

<?php

php?>

Here, we have said what our class is, what it does, and then defined each function or variable within it. In the insert_userdata() function, we have said what the parameters are and what it returns above the function. As you can already see, these comments help immensely when trying to read your code or trying to find a problem with your code.

Variables and Constructor

Create a new file called class.db.php and insert the following:

<?php

?>

**Try and dissect what we have done here before reading the explanation!**

First, we have done the most important part of Object Oriented PHP – organization! We have said what the class name is, and all the parameters that need to be passed to it when it is loaded. Next, inside the class, we have defined our four variables for MySQL connection and then required them as parameters of the constructor function, which can be passed when the class is loaded at the bottom of the file. Next, we have set our $mysqli variable to a new MySQLi Object. Simple, right? Let’s move on.

Main Functions

SELECT

Now that we have the connection down, we can start working with the database. Add a select function like this:

/*

}

Here we have made a select function for selecting data from a MySQL table. We have defined three parameters, and you can see how they fit into the final query. All we return from this function is a query result set, which you can work with however you like in your pages.

INSERT

Of course, we can select data with our class now, but we don’t have anything to select unless we insert it! Let’s do that now by adding this function to your class:

/*

}

Another quite simple function, we are just requiring two parameters: the table name to insert the data into, and the values for the fields. Instead of returning any real data for this function, we just go ahead and run it and if it inserted the data, it returns true, and if not, false. Simple for inserting data.

DELETE

Now that we can insert and then select our data, we have to have a way to delete it say if a user wanted to delete their account. Add this function:

<?php

?>

Some extra goodies

You probably noticed the last_query variable we defined at the beginning of the class, then we set it every time we ran a query in a function. This is very vital for troubleshooting, to see what’s wrong with your query. Another possible class variable could be a last_error, that would hold the last error returned.

Thanks to BuildInternet

Original Source From: http://buildinternet.com/

See Also Following Topics:

• 10 Simple PHP Login Sytem Tutorial
• PHP Image File Upload Tutorial
• PHP Redirect to another Page/URL Script
• Delete Multiple Records Using Checkbox With Select All Buttons
• Advanced PHP Query function

1. Smashing Magazine

2. noupe

3. TutsPlus

Tuts+ having great collection of resources related to audio, UI design and much more.

4. Six Revisions

5. Design Follow

6. Design Mag

7. Blogfreakz

8. CreativeOverflow

9. Denbagus

10. Extra Tuts

11. PSD Vault

12. Smashing Buzz

13. Tutorial Lounge

14. Wordpress Arena

15. Design Ussion

16. Psdeluxe

17. Designtutorials 4u

18. Perishable Press

19. Artfans Design

20. Inspire Bit

21. Design Dazzling

22. Tutorials Palace

23. Web and Designers

24. Out Law Design Blog

25. Designrfix

See Also Following Topics:

• 32 Visual Impressive Graphical Layout CSS Web Pages Showcase

The position property is used to define whether an element is absolute, relative, static or fixed. This is the fun part. Using CSS you can define the position for your id’ed divs. Store your position information in a style call like this:

For Example

#banner {

position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#divname{
   position:static;
 }

position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

#divname {
 position:relative;
 top:20px;
 left:-40px;
 }

position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

#divname {
   position:absolute;
   top:0;
   right:0;
   width:200px;
 }

position:relative + position:absolute

If we set relative positioning on first div, any elements within first div will be positioned relative to first div. Then if we set absolute positioning on second, we can move it to the top right of first div:

   #firstdiv {
   position:relative;
   }
   #seconddiv {
   position:absolute;
   top:0;
   right:0;
   width:200px;
   }

Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. For variable height columns, absolute positioning does not work, so let’s come up with another solution.

We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it.

#divname {
 float:left;
 width:200px;
 }

Then after the floating elements we can “clear” the floats to push down the rest of the content.

#divclear{
 clear:both;
 }

What is z-index

When you’re using CSS positioning to position elements on the page, you need to think in virtual 3-D. Each element on the page can be layered on top or beneath any other element. The z-index determines where in the stack each element is. I like to think of the elements as pieces of paper, and the Web page is a collage. Where I lay the paper is determined by positioning, and how much of it shows through the other elements is the z-index.

img
   {
   position:absolute;
   left:0px;
   top:0px;
   z-index:-1;//Set behind of any element while the z-index is -1.
 }

On short note z-index is used to stack order of an element.

See Also Following Topics:

• CSS 3 Column Fixed width centered layout Tutorial
• 20 Great CSS Web Galleries

Start With Form :

<form action="" method="post" enctype="multipart/form-data" name="form1"><p>
<input name="fileImage" type="file" id="fileImage">
</p><p>
<input name="save-image" type="submit" id="save-image" value="Upload Image">
</p>

Upload Code:

<?phpif(isset($_POST['save-image'])){//Line Use to check if the buttton was pressed.

Full Code:

<?phpif(isset($_POST['save-image'])){$fileName=$_FILES['fileImage']['name'];

See Also Following Topics:

• 10 Simple PHP Login Sytem Tutorial
• An Introduction to Object Oriented PHP
• PHP Redirect to another Page/URL Script
• Delete Multiple Records Using Checkbox With Select All Buttons
• Advanced PHP Query function

Using headers():

In header() method you must remember to call it before any output is sent. Means nothing should be printed in page.

<?php

  //Redirect to page or URL 

  header("Location: URL or Page Address ");

  //End the code with exit 

  exit;

  ?> 

Using Javascritp:

In this method you can use this JavaScript at any part of your page.

<script language="JavaScript" type="text/javascript">

window.location = "redirect page/URL here"

</script> 

You can also show any error message to your user:

<script language="JavaScript" type="text/javascript">alert("any message here ")

window.location = "redirect page/URL here"

</script> 

Using Meta tag method:

You can use this script at any part of your page.

<?php

  echo "<meta http-equiv='refresh' content='0;url=redirect page/URL here'>";

?>

Enjoy!!!

See Also Following Topics:

• 10 Simple PHP Login Sytem Tutorial
• An Introduction to Object Oriented PHP
• PHP Image File Upload Tutorial
• Delete Multiple Records Using Checkbox With Select All Buttons
• Advanced PHP Query function

Last Time I post “Deleting multiple records using checkbox”. One of my friend request me to add some features like yahoo mail, gmail where we can select all or unselect all records. WOW! it was really helpful for everyone. So I am here going to show you Delete Multiple Records Using Select All and Unselect Features. I have simply added a javascript code in my previous post which you can see here. All of the Features are same as my previous code and I am using the new codes which I added on my last one.

Now Create your database and table as your required. Write your connection string and finish all of the work. Which you can see in my previous post.

Ok Now add this javascript before your </head> tag.

<script>
function selectAllCheckBoxes(FormName, FieldName, CheckValue)
{
	if(!document.forms[FormName])
		return;
	var objCheckBoxes = document.forms[FormName].elements[FieldName];
	if(!objCheckBoxes)
		return;
	var countCheckBoxes = objCheckBoxes.length;
	if(!countCheckBoxes)
		objCheckBoxes.checked = CheckValue;
	else
		// set the check value for all check boxes
		for(var i = 0; i < countCheckBoxes; i++)
			objCheckBoxes[i].checked = CheckValue;
}
</script>

And Now add this code before </form> tag. Which add two buttons in your code.

 <input type="button" onclick="selectAllCheckBoxes('form1', 'checkbox[]', true);" value="Select All">
<input type="button" onclick="selectAllCheckBoxes('form1', 'checkbox[]', false);" value="Clear All"> 

You have done.

Get Complete Code Here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Delete Multiple Records</title>
<script>
function selectAllCheckBoxes(FormName, FieldName, CheckValue)
{
	if(!document.forms[FormName])
		return;
	var objCheckBoxes = document.forms[FormName].elements[FieldName];
	if(!objCheckBoxes)
		return;
	var countCheckBoxes = objCheckBoxes.length;
	if(!countCheckBoxes)
		objCheckBoxes.checked = CheckValue;
	else
		// set the check value for all check boxes
		for(var i = 0; i < countCheckBoxes; i++)
			objCheckBoxes[i].checked = CheckValue;
}
</script>
</head>
<body>
<?php
 $dbhost="localhost";
   $dbuser="root";
   $dbpass="";
   $dbname="test";
mysql_connect("$dbhost","$dbuser","$dbpass") or die('Could not connect');
mysql_select_db($dbname);
?>
<form name="form1" method="post" action="">
<table width="409" border="0" cellpadding="2" cellspacing="0" bordercolor="#999999">
<tr bgcolor="#CCCCCC">
<td width="52"><div align="center">Select</div></td>
<td width="98"><div align="center">Name</div></td>
<td width="142"><div align="center">Address</div></td>
<td width="101"><div align="center">Contact No</div></td>
</tr>
<?php
$query="SELECT * FROM tbluser";
$result=mysql_query($query);
$sno=1;
while($row=mysql_fetch_array($result, MYSQL_ASSOC)){
?>
<tr>
<td><input name="checkbox[]" type="checkbox" id="checkbox[]" value="<? echo $row['userid']; ?>"></td>
<td><? echo $row['name'];?></td>
<td><? echo $row['address'];?></td>
<td><? echo $row['contactno'];?></td>
</tr>
<?
	$sno=$sno+1;
	}
	?>
<tr>
<td>&nbsp;</td>
<td colspan="3">
<div align="right">
<input name="delete" type="submit" id="delete" value="Delete Records">
&nbsp;&nbsp;
<input type="button" onclick="selectAllCheckBoxes('form1', 'checkbox[]', true);" value="Select All">
&nbsp;&nbsp;
<input type="button" onclick="selectAllCheckBoxes('form1', 'checkbox[]', false);" value="Clear All">
</div></td>
</tr>
</table>
<?
if($_POST['delete']){
//print_r($_POST);
$checkbox=$_POST['checkbox'];
//exit;
for($i=0;$i<count($checkbox);$i++){
$del_id = $checkbox[$i];
$sql = "DELETE FROM tbluser WHERE userid='$del_id'";
$result = mysql_query($sql);
}
// if successful redirect to delete_multiple.php
if($result){
echo "<meta http-equiv=\"refresh\" content=\"0;URL=deletemultiplerecords.php\">";
}
}
?>
</form>
</body>
</html>

Download Zip Here

Source: www.jagadishwor.com.np

See Also Following Topics:

• 10 Simple PHP Login Sytem Tutorial
• An Introduction to Object Oriented PHP
• PHP Image File Upload Tutorial
• PHP Redirect to another Page/URL Script
• Advanced PHP Query function

The possible image reductions are:

• Bit depth reduction

  The bit depth can be reduced to a minimum value that is acceptable for all samples. For example, if all sample values in a 16-bit image have the form (256+1)*n, (e.g. #0000, #2323, #FFFF), then the bit depth can be reduced to 8, and the new sample values will become n, (e.g. #00, #23, #FF).

• Color type reduction

  - If an RGB image has 256 distinct colors or less, it can be reencoded as a Palette image.

  - If an RGB or Palette image has only gray pixels, it can be reencoded as Grayscale.

  A color type reduction can also enable a bit depth reduction.

• Color palette reduction

  If the color palette contains redundant entries (i.e. duplicate entries that indicate the same RGB value) or sterile entries (i.e. entries that do not have a correspondent in the raw pixel data), these entries can be removed.

  A color palette reduction can also enable a bit depth reduction.

• Alpha channel reduction

  If all pixels in a Grayscale+Alpha or an RGB+Alpha image are fully opaque (i.e. all alpha components are equal to 2^bitdepth-1), or if the transparency information can be stored entirely in a (much cheaper) tRNS chunk, the alpha channel can be stripped.

There are, however, a few cases when some image type reductions do not necessarily lead to the reduction of the compressed stream. The PNG-Tech site contains experimental analyses of these possibilities; for example, see the article 8 bits per pixel in paletted images.

Interlacing, useful for a faster, progressive rendering, is another component of the PNG image type that affects compression. In an interlaced stream, the samples corresponding to neighboring pixels are stored far away, hence the data in it is less correlated and less compressible. Unlike JPEG, where interlacing may improve the compression slightly, the PNG interlacing degrades the compression significantly.”

Optimizing image data

Photoshop’s Save for Web feature does a reasonable optimization, but it’s far from perfect. We can improve on it.

If you’ve been in web development for any length of time, you’ll probably have heard of command line tools to optimize PNG image data. The two most popular are PNGout and PNGcrush. PNGout can produce slightly smaller files than PNGcrush but at the expense of speed: it’s far, far slower. As I opt for speed rather than the absolute best compression, I use PNGcrush. (Note that neither tool will change the original format of the file, so you can’t use them to create an 8-bit image from a 24-bit source. Make sure your PNGs are in the correct format before you start to play with these tools.)

Download PNGcrush and copy the executable into your Windows XP directory (sorry to non-Windows or Vista users, XP is all I use). I also recommend that you install the Command prompt here powertoy–or you can create the hack manually. This allows you to open a command prompt at any folder, by right clicking its name in Windows Explorer.

Once you’ve done this, open a command line at the folder where your PNG image resides and type:

pngcrush infile.png outfile.png

This will create a new optimised file, but only if the output is smaller than the input. Note that the new file might not be the smallest it could be as by default PNGcrush only tries a few compression methods. If you want to get the absolute best compression, you can ask PNGcrush to try all its methods, but this can take a very long time and doesn’t always yield much of a benefit. To do so, add the -brute option:

pngcrush -brute infile.png outfile.png

If you want to optimize all your images, you can do it in batch by creating a new file for every input file:

pngcrush -e -crushed *.png

This will create new, optimized files with the original filename plus the extra suffix “-crushed”. Alternatively, you can put the crushed images into a sub folder instead which will leave them with their original filename and won’t overwrite the original files:

pngcrush -d crushed-files *.png

Using any of these methods should have given you some smaller files.

Using PNGCrusher

I like to make sure that my PNGs are as well-compressed as possible. There’s a great CLI tool to do that, called pngcrush OptiPNG.

To automate processing of PNG files with OptiPNG, I slapped the following code together, threw it through Platypus, and out came PNGCrusher.

PNGCrusher has a bad rating at VersionTracker because some people are clueless and don’t realize that some PNGs are already as compressed as they can get. Please help PNGCrusher by giving it a sane rating!

Download Here

Usage notes

Just drag-and-drop PNG files onto PNGCrusher. OptiPNG will overwrite each file only if it was able to improve the compression rate.

If you drag a lot of files onto PNGCrusher, it may take a while to finish. Don’t move, delete, or rename the files in the meantime.

PNGCrusher is distributed under the GNU General Public License.

Creative Use of PNG Transparency in Web Design

The PNG image has been widely overlooked by the web design community—and mostly for good reason. Until recently, it hasn’t been possible to take full advantage of the format and have it work reliably in all browsers. But, with proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.

PNG

• Greater compression: For most images, PNG achieves a smaller file size than GIF.
• Greater color depths: PNG offers truecolor up to 48 bits, whereas GIF allows only 256-color palettes.
• Alpha-channel transparency: Whereas GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects by enabling an alpha channel for transparency.

It’s worth mentioning that PNG does not allow for animation, as GIF does. There is a related standard called Multiple-image Network Graphics (MNG) that does allow both, but it is not widely supported by web browsers or imaging software.

PNG Transparency for Internet Explorer (IE6 and Beyond)

If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent.

Web developers who work with PNG files can use the AlphaImageLoader filter, as demonstrated in the following example:

<html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image.  -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>

Like GIFs and JPEGs, PNG images are ideal for web use. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha transparency.

What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Below is an image with layers of varying transparency:

PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs web design, primarily because of the impression that PNGs don’t enjoy wide browser support.

This view on PNGs is a bit of a misconception.

While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.

While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.

Compared to GIF

Compared to GIF files, a PNG file with the same information (256 colors, no ancillary chunks/metadata), compressed by a good compressor will usually be smaller than GIF, though lack of agreed data sets make controlled comparison impossible. Depending on the file and the compressor, PNG may range from somewhat smaller (10%) to significantly smaller (50%) to somewhat larger (5%), but is rarely significantly larger.

This is attributed to the performance of PNG’s DEFLATE compared to GIF’s LZW, and because the added precompression layer of PNG’s predictive filters take account of the 2-dimensional image structure to further compress files—as filtered data encodes differences between pixels, they will tend to cluster closer to 0, rather than being spread across all possible values, and thus be more easily compressed by DEFLATE.

However, PNG is much more flexible than GIF, and thus PNG files can potentially be much larger than GIF files, because they can include much more information, and may be poorly compressed.

File size factors

PNG files vary in size due to a number of factors:

color depth

Color depth can range from 1–64 bits per pixel.

ancillary chunks

PNG supports much metadata—this may be useful for edition, but unnecessary for viewing, as on websites.

interlacing

As each pass of the Adam7 algorithm is separately filtered, this can increase file size.

filter

As a precompression stage, each line is filtered by a predictive filter, which can change from line to line. As the ultimate DEFLATE step operators on the whole image’s filtered data, one cannot optimize this row-by-row; the choice of filter for each row is thus potentially very variable, though heuristics exist.

compression

With addition computation, DEFLATE compressors can produce smaller files.

There is thus a filesize trade-off between high color depth, maximal metadata (including color space information, together with information that does not affect display), interlacing, and speed of compression, which all yield large files, with lower color depth, fewer or no ancillary chunks, no interlacing, and tuned but computationally intensive filtering and compression. For different purposes one will choose different trade-offs—a maximal file may be best for archiving and edition, while a stripped down file may be best for use on a website, and similarly fast but poor compression is preferred when repeatedly editing and saving a file, while slow but high compression is preferred when a file is stable: when archiving or posting. Interlacing is a trade-off—it dramatically speeds up early rendering of large files (improves latency), but may increase file size (decrease throughput) for little gain, particularly for small files.

Most Commented Posts

• Display Wordpress content outside of your blog
• Top 10 Magazine WordPress Themes from Premiumthemes
• WordPress Meta-Tags Plugin
• Simple JQuery Image Slide Show with Semi-Transparent Caption
• Web 2.0 and SEO
• Photoshop Tutorial Sites
• How to: Embed Google Ad in your post
• Wordpress Tips and Tricks
• Digital Photography Tutorial and Tips
• Useful Wordpress Tricks to Make Your Theme Even Better

The list below is a summary of many of the common features of typical “Web 2.0″ sites.

Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t make a design “2.0″ – or good!

Introduction

I’m going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.

If I had to sum up “Web 2.0″ design in one word, it would have to be “simplicity”, so that’s where we’ll start.

I’m a great believer in simplicity. I think it’s the way forward for web design.

Today’s simple, bold, elegant page designs deliver more with less:

• They enable designers to shoot straight for the site’s goals, by guiding the site visitor’s eye through the use of fewer, well-chosen visual elements.
• They use fewer words but say more, and carefully selected imagery to create the desired feel.
• They reject the idea that we can’t guess what people want from our sites

1 Simplicity

“Use as few features as are necessary to achieve what you need to achieve”

Web design is simpler than ever, and that’s a good thing.

2.0 design means focused, clean and simple.

That doesn’t necessarily mean minimalist, as I’ll explain later.

I really believe in simplicity. That’s not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.

One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.

Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is… but would that make them stronger?

The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don’t mind – it’s easy, and you get just what you came for.

Why simplicity is good

• Web sites have goals and all web pages have purposes.
• Users’ attention is a finite resource.
• It’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice)
• Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
• So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.

When & how to make your designs simple

When?

Always!

How?

There are two important aspects to achieving success with simplicity:

Remove unnecessary components, without sacrificing effectiveness.

Try out alternative solutions that achieve the same result more simply.

“It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.”

2 Central layout

Basically, the vast majority of sites these days are positioned centrally within the browser window. Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a few years ago.

Why a central layout is good

This “2.0″ style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest.

Also, because we’re being more economical with our pixels (and content), we’re not as pressurised to cram as much information as possible above the waterline/fold.

We’re using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.

When & how to use a central layout

I’d say, position your site centrally unless there’s a really good reason not to.

You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with a web app).

3 Fewer columns

A few years ago, 3-column sites were the norm, and 4-column sites weren’t uncommon. Today, 2 is more common, and 3 is the mainstream maximum.

Why using fewer columns is good

Less is more. Fewer columns feels simpler, bolder, and more honest. We’re communicating less information more clearly.

There’s also a by-product of the domination of centered layouts. Because we’re not filling the whole screen so much, and not trying to get as much on-screen at any one time, we simply don’t need as many columns of information.

4 Separate top sections

This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).

Of course, there’s nothing new about this approach. It’s a good idea, and has been used for ever. But it’s being used more than ever now, and the distinction is often stronger.

Why distinct top sections are good

The top section says “Here’s the top of the page”. Sounds obvious, but it feels good to know clearly where the page starts.

It also starts the site/page experience with a strong, bold statement. This is very “2.0″-spirited. We like strong, simple, bold attitude.

2 of these top-sections contain just branding (Protolize, Mediconmedia), 1 has just navigation (Cross Connector), and the remaining 3 have both.

The weakness of Cross Connector, in my view, is that the logo comes after the nav. I prefer the nav to be high-up, and clear (like e.g. Simple Bits).

When & how to use a distinct top section

On any site, both the main branding and main navigation should be obvious, bold and clear.

So it’s a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly.

Always put your logo right up the top of the screen. I’d always recommend putting your main navigation right after it.

It’s definitely a good thing to mark the top of the page with a section that marks out the high-level screen features as separate from the main site content.

The top section should be visually distinct from the rest of the page content. The strongest way to differentiate is to use a bold, solid block of different colour or tone, but there are alternatives.

5 Solid areas of screen real-estate

Leading on from the clearly differentiated top area, you’ll notice that lots of sites define the various areas of real-estate boldly and clearly.

Real estate comes in various forms, including:

• Navigation
• Background / canvas
• Main content area
• Other stuff
• Callouts / cross-links

It’s possible to design a web page so that these areas are immediately distinct from their neighbours.

The strongest way to do this is using colour.

But white space can be just as effective.

The risk with strong colour is that it draws the eye, so it can take attention away from other relevant screen elements.

I think that placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.

6 Simple nav

Permanent navigation – your global site nav that appears on every page as part of the page template – needs to be clearly identifiable as navigation, and should be easy to interpret, target and select.

• 2.0 design makes global navigation large, bold, clean and obvious.
• Inline hyperlinks (links within text) are typically clearly differentiated from normal text.

Why simple navigation is better

Users need to be able to identify navigation, which tells them various important information:

• Where they are (in the scheme of things)
• Where else they can go from here
• And what options they have for doing stuff

Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are:

• Positioning permanent navigation links apart from content
• Differentiating navigation using colour, tone and shape
• Making navigation items large and bold
• Using clear text to make the purpose of each link unambiguous

How to keep your nav simple

Simply remember the key: navigation should be clearly distinguishable from non-navigation.

Inline hyperlinks should also stand out sufficiently from the text around them.

Check out these snippets. In each case, you’re in do doubt what’s a link. (Personally, I prefer using blue text (non-underlined) which turns to underlined red on hover…)

7 Bold logos

A clear, bold, strong brand – incorporating attitude, tone of voice, and first impression – is helped by a bold logo.

Here are some (100% scale). Notice that logos are tending to be quite large, in line with the general 2.0 principles.

Why?

Strong, bold logos say “This is who we are.” in a way that we can believe.

Your logo should:

• work visually in its main context, and any other uses in which it may be used (like flyers or t-shirts?)
• be recognisable and distinctive
• represent your brand’s personality and qualities on first viewing

8 Bigger text

Lots of “2.0″ web sites have big text, compared to older-style sites.

If you fill the same amount of space with less “stuff”, you have more room.

When you’ve made more room, you can choose to make more important elements bigger than less important elements (if they’re still there).

Making things bigger makes them more noticeable than lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.

Not only does big text stand out, but it’s also more accessible to more people. That’s not just people with visual impairments, but also people looking on LCD screens in sunlight, people sitting a little further from the screen, and people just skimming the page. If you think about it, that could be quite a lot of people!

When & how to use big text

Big text makes most pages more usable for more people, so it’s a good thing.

Of course, size is relative. You can’t take a normal, busy site, make ALL the text bigger, and make it more usable. That might not work, that might be worse.

In order to use big text, you have to make room by simplifying, removing unnecessary elements.

You also need to haave a reason to make some text bigger than other text. And the text must be meaningful and useful. There’s no point adding some big text just because it’s oh-so 2.0!

If you need to have a lot of information on a page, and it’s all relatively equal in importance, then maybe you can keep it all small.

9 Bold text introductions

Leading on from the big text theme, many sites lead with strong all-text headline descriptions.

These normally set out the site’s USP, elevator pitch or main message.

They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the page’s visual impact, especially early on in a browsing experience.

When & how to use a bold text intro

Only use one if you’ve got something bold to say. v (If you haven’t got something bold to say, maybe it’s worth having a think about the purpose of your page/site and coming up with somethign worth saying boldly!)

If you have a simple message that you want to be seen first, go ahead and headline it. Make it clear by putting it against a relatively plain background.

10 Strong colours

Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements.

When you have a simple, stripped-out design, you can use a bit of intense colour to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice.

Remember to use sparingly

If you’re using strong colours to attract the eye, it only works if there’s lots of area that isn’t strongly coloured.

If everything is trying to attract the eye, then the eye just gets confused, and the site will feel confusing and chaotic.

11 Rich surfaces

Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.

We all know that these little touches just feel nice, but we may not know why.

Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and “finished”.

They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors. Making stuff look solid and real can make it look “touchable”, which is likely to appeal.

When & how to use rich surfaces

The golden rule here is to use with care, and not to overdo it.

Like any of these techniques, a rich surface may add value to your design when used sensitively and appropriately.

If your navigation/icon/logo/layout sucks fundamentally, you can’t polish your way out. Get the fundamentals right first.

It can also be important to maintain a consistent light-source. Although this can get more complex with the illusion of back-lit diffusion in buttons etc., you still know whether an overall design feels consistent.

3D effects can also make elements seem to stand out from the page, but only if the rest of the page is relatively flat.

Avoid trying to make your entire design 3D-realistic because:

• It’s more work
• It will increase the overall size of the page assets
• And you don’t need to. 3D effects use lots of different pixels, and different pixels should be used deliberately to draw the visitor’s attention to key content elements, or to enhance “soft” informational aspects. A little goes a long way.

12 Gradients

Web 2.0 design has more gradients than the Alps.

Why gradients are so useful

Gradients soften areas that would otherwise be flat colour/tone.

They’re also an integral part of drop-shadows, and the inner-glows and specular highlights you see on glass- or plastic-style buttons.

Note that gradients usually work best when juxtaposed with areas of flat colour or tone.

13 Reflections

The illusion of reflection is one of the most common applications on gradients.

These commonly come in 2 kinds:

• Highlights caused by light reflecting on shiny surfaces
• That shiny table effect!

Specular highlights

Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years.

That shiny table effect!

Pioneered by Apple again (I’m sure). This is a really nice effect which is so prevalent now, it’s in danger of being overused, now starting to look tired and is falling out of favour with designers.

Remember, of course, that web designers are usually more sensitive to these things, so even if we’re getting turned off by it, the general public may still think it’s cool for some time to come.

14 Cute icons

Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning.

Icons can be useful when they’re easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective.

In the old days, icons were sometimes overused. It seemed that everyone wanted an icon for every navigation link or tab. Now, we use clear text more extensively, and are less ready to litter a page with icons.

Where 2.0 designers do employ icons, they are reserved for higher-value spots, where .

Simpler, more spacious designs demand less attention and allow for a richer icons.

Some examples, demonstrating various attributes.

15 Star flashes

These are the star-shaped labels that you see stuck on web pages, alerting you to something important.

They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites.

They can really work well, but of course should only be used to draw attention to something important.

I’d recommend only using one on a page (at most!).

Another style that’s seeming over-used, and will probably run its course over the next year.

Source: http://webdesignfromscratch.com/

See Also Following Topics:

• Web 2.0 and SEO
• How to Create Web 2.0 Site

Google Adsense is a best way to earn some money from your site. Using high paying keywords you will increase your adsense revenue. We know keyword is a most important part for the high paying Google ads. Here is some of the keywords whic payout on the range of $1-$100. I think you will get some idea from this collection.

The keywords :

1. Structured settlements

2. Mesothelioma

3. Acne

4. Life Insurance

5. Death Insurance

6. Bextra

7. Asbestos

8. Car Insurance

9. Dental Plans

10. Private Jets

11. Debt Consolidation

12. Credit Cards

13. Rewards Cards

14. Equity Loans

15. Equity Line Credit

16. Loans

17. Mortgages

18. Pay Day Loans

19. Cash Advance

20. Bankruptcy

21. Reduce Debt

22. Refinance

23. Jet Charter

24. Vioxx

25. Wrongful death

26. Legal Advice

27. Taxes

28. Investing

29. Bonds

30. Online Trading

31. IRA Rollover

32. Refinance Quotes

33. Adult Education

34. Distance Learning

35. Alcohol Treatment

36. Rehab

37. Drug Rehab

38. Spyware

39. Cell Phone Plans

40. Calling Cards

41. VOIP

42. Weight Loss

43. Canadian Pharmacy

44. Depression

45. Spam Filter

46. Lasik

47. Facelift

48. Teeth Whitening

49. Annuity

50. Anti Virus Protection

51. Adult Diaper

52. Free Credit Report

53. Credit Score

54. Satellite

55. Anti Spam Software

56. Dedicated Hosting

57. Domain Name

58. Need Money

59. Bachelor Degree

60. Master Degree

61. Doctorate Degree

62. Work at Home

63. Quick Book

64. Extra Money

65. Eloan

66. Malpractice Lawyer

67. Lenox China

68. Cancer

69. Payperclick

70. Personal Injury Attorney

71. Lexington Law

72. Video Conferencing

73. Transfer Money

74. Windstar Cruise

75. Casinos Online

76. Term Life

77. Online Banking

78. Borrow Money

79. Low Interest Credit Cards

80. Personal Domain Name

81. Cellular Phone Rental

82. Internet Broker

83. Trans Union

84. Cheap Hosting

85. University Degrees Online

86. Online Marketing

87. Consolidate

88. Helpdesk Software

89. Web Host

90. Homeowner’s Insurance

91. Yellow Page Advertising

92. Travel Insurance

93. Register Domain

94. Credit Counseling

95. Email Hosting

96. Business Credit

97. Consumer Credit

98. Blue Cross

99. Laptop Computer

Source: http://ezinearticles.com/

And Some More here…

Forex, Insurance, Laptop Computer, Drug Rehab, Equity Line Credit, Investing, Payperclick, Video Conferencing, Malpractice Lawyer, University Degrees Online, Online Banking, Canadian Pharmacy, Loans, Online Trading, Mortgages, Credit Cards, Debt Consolidation, Private Jets, Dental Plans, Car Insurance, Asbestos, Death Insurance, Life Insurance, Acne, Mesothelioma, Structured settlements, search engine optimization, affiliate programs, register domain, merchant account, domain registration, refinance, hard drive recovery, buy contacts, web hosting, merchant accounts, merchant account application, student loan, credit card application, point of sale software, broadband phone, video conference, video conferencing, wireless security camera, Email Hosting, Business Credit, Car Insurance, Wisconsin Mortgage, Cash Annuity, Wrongful Death, Sell Notes, California Mortgage, Texas Mortgage, Online Trading, IRA Rollover, Doctorate Degree, Credit Counseling, Master Degree, Term Life, Low Interest Credit Cards, Bankruptcy, Tax Attorney, Slots, Car Credit, Alcohol Treatment, Pay Day Loans, Accept Credit Cards, Adult Education, Cash Advance, Spam Filter, Anti Virus Protection, Life Insurance, Breast Cancer, Cell Phone Plans, SEO, Blue Cross, Homeowner’s Insurance, Structured settlements, VOIP, Acne, Debt Consolidation, Web Hosting Reseller, Dedicated Hosting, Consolidate, Consumer Credit, Rehab, Reduce Debt, Teeth Whitening, Web Host, Refinance Quotes, Private Jets, Equity Loans, Idaho Mortgage, Internet Broker, Casinos Online, Helpdesk Software, Drug Rehab, Investing, Bachelor Degree, Distant Learning, Poker, Online Banking, Free Credit Report, Adult Diaper, Casinos, Dishtv, Diabetes, Jet Charter, Lexington Law, Personal Injury Attorney, Blue Shield, Yellow Page Advertising, Spyware, Cheap Hosting, Server, Ameriquest Mortgage, Register Domain, Lawyer, Lasik, Cruise, Direct Mail, Cellular Phone Rental, Phone, directv, Windstar Cruise, College, prepaid legal, Travel Insurance, Need Money, Personal Domain Name, Depression, Transfer Money, Asbestos, Bextra, Viagra, Divorce, Work at Home, Online Marketing, Taxes, Weight Loss, Vioxx, Calling Cards, laser hair removal, consumer credit counseling, business web hosting, search engine marketing etc.

Payouts are depend on PPC. May you know about the Traffic and it depends on.

See Also Following Topics:

• How to: Embed Google Ad in your post