In the last Pulse of the Web I mentioned Inbox 2.0: Yahoo and Google to Turn E-Mail Into a Social Network, Google offers API for Outlook migration to Gmail, and a few other headlines. The gist was that the future of the web seems to be pointing to an open community centered world where successful companies make it by enabling the community to socialize, produce content, and create tools. There was also a bit of information supporting the migration to online applications and more open source competition for Microsoft.

This week we see continuing movement to develop online applications, increased focus on how to advertise and extend company reach through social networking sites like FaceBook, and interesting developments in the legal realm for search results providers like Google.

Here are the headlines to watch:

Watchdog says Google has not done enough to distinguish between sponsored advertising links and the search links

Google will go before an Australian court in June next year to defend allegations made by the nation’s competition regulator over alleged misleading sponsored advertising links …… The watchdog says Google has not done enough to distinguish between sponsored advertising links and the search links that result when customers type keywords into Google’s search system, which it asserts are deceptive.

Why is this important?
Because if the watchdog group wins the case it has huge implications for the way that text advertising is placed not just on search engines, but across all websites. The president that this sets could dramatically impact click-through rates. I’m not saying that I think it is a bad thing. I personally don’t like deceptive ad placement, but I do realize that many companies rely on that placement for revenue.

New version of Zoho Writer allows offline editing

Okay, Zoho Writer is a cool set of apps that enable online colaboration and basic “office” functionality like word processing, spread sheets, etc. It points to some momentum around online apps. But, the coolest part is this:

The offline functionality has been added using Google Gears, an open source browser extension, currently only available in beta, that enables web applications to use JavaScript APIs to allow offline working.

Why is this important?
By using Google Gears and its JavaScript APIs we are seeing the integration of web applications to the desktop. This is by no means perfect, but it is another stone thrown at the MS Office suite of applications. What would be really cool would be if MS Office launched a counter attack and came up with a free MS Office web application of it’s own. They have launched Windows Live, but just imagine if Word and Excel came in a free online version. It is going to happen at some point, it is just a matter of time.

Understanding Web Design by Jeffrey Zeldman

Way back when I worked as a product marketing manager for many of Jeffrey Zeldman’s books and his site is one to watch for information on trends in web design. In this article Zeldman reminds us of what web design is:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Why is this important?
The article makes several points about what web design is, and what it isn’t. Those interested in developing sites for personal or corporate use should use the above definition of “what web design is” as a mantra. This simple statement is a key component of web philosophy and reflects the trends of the web today. By encouraging human activity we are encouraging community creation, and expression. The statement implies empowering users to achieve and create and it demonstrates where the web is heading.

Hotmail founder announces online offline productivity suite, Live Documents

As I stated earlier:

What would be really cool would be if MS Office launched a counter attack and came up with a free MS Office web application of it’s own. They have launched Windows Live, but just imagine if Word and Excel came in a free online version. It is going to happen at some point, it is just a matter of time.

Well, it *is* only a matter of time.

The co-founder of Hotmail has joined the rush to move office applications from the desktop to the web. Like Google Docs and Microsoft’s Office Live Workspace, Sabeer Bhatia’s Live Documents provides a web-based word processor, spreadsheet and presentation applications that can be accessed from any platform.

Why is this important?
The trend is pointing toward the elimination of Desktop computing. At some point everything we normally store on our computer will happen through the internet. This means no software to download because it will be online. No need to worry about hard drive space because it will be unlimited online, and connections will be a secure, free, and always on. You’ll have 24 hour access to all of your information from your car, phone, television, or personal home console, or work console. For companies dabbling in web-based software there is a gold mine coming. For those reaping huge profits from software that needs to be installed… Well, all I can say is that the decline is on the horizon. It may not be for several years, but it is coming.

Time for another “Pulse of the Web” update. In my last Pulse of the Web there were several interesting headlines related to the rise of open source, alternative operating systems such as Linix, the Android OS by Google, and interesting tidbits of information about a possible direction of Microsoft in the Social web arena.

In this weeks Pulse of the Web well look at a just a few interesting developments:

• Inbox 2.0: Yahoo and Google to Turn E-Mail Into a Social Network

Ignore Orkut, OpenSocial, Yahoo Mash and Yahoo 360. Google and Yahoo have come up with new and very similar plans to respond to the challenge from MySpace and Facebook: They hope to turn their e-mail systems and personalized home page services (iGoogle and MyYahoo) into social networks.

Why is this important?
This is a significant shift in strategy for the companies. Rather than compete head on with MySpace and Facebook this strategy is more of a way to make MySpace and Facebook irrelevant. Here’s the idea. Originally the web was all about communication and facilitating communication. That led to things like instant messenger, online email, and profile pages with web logs (blogs). Then came along Social networking where you could claim your friends and join in the online popularity contests for friends. The cool thing was that you could find people just as strange and wonderful as yourself within a few clicks. The fear on the email, and IM service provider side of things is that if they don’t get people to keep using their tools, social networking sites are going to make them defunct. So, rather than wait around they are trying to shift focus back to the applications by integrating social features that, if all goes well, will make the social sites seem “old news”. Instead users will be able to be social through the traditional apps. I’m skeptical about the plan because the reason people go to places like mySpace and Facebook is because it is like going to an online club where you can find your friends. It is a little different than just using an application. None the less, the app providers are sooting off their guns, and they are aimed at MySpace and FaceBook.

• Google offers API for Outlook migration to Gmail

The new migration tool will move e-mail from any system, including Microsoft Outlook calendars, e-mail, and contacts into Google Apps, or any other type of mail server to Premier, Education, or Partner editions of Google Apps.

Why is this important?
In the future the prediction is that web based applications will replace software. That means that applications like Outlook will be replaced with hosted applications with a constant free connection to the internet. With Google purchasing the new cell phone bandwidth, launching a host of free online application and moving toward open source it is clear that the web is changing at light speed. What will be interesting is to see if Google can get corporate users to switch from Outlook to hosted apps. This article is another indication that moving users is exactly what they intend. And it is no secret that Microsoft is on Google’s hit list.

• The 10 Worst Consumer Tech Trends

I don’t care about corporate interests or revenue streams. I’m the consumer, and as far as I’m concerned it’s all about me.

Why is this important?
This article is a great summary, and warning to all people doing business in the space. And, it provides an insight into where things are going. The short version: Consumers want everything open, without limits, and they don’t want spin.

• Facebook Offers $85 Million To Acquire Chinese Social Networking Site Zhanz

Facebook is said to have offered $85 million to acquire Zhanzuo.com, a Chinese social networking site with seven million users.

Why is this important?
Asia is the next big market and American companies are jockeying for position as the region gears up and grows. Chinese users are still largely untapped and if the markets can act anything like they did here in the US there is a lot of money to be made.

In PHP Tutorial 11 we covered the basics of working with forms in PHP. In that tutorial we created a simple “contact us” form. We used the POST method in our HTML. In this section we are going to discuss the variables that relate to both the POST and GET methods. Those are $_POST, $_GET, and $_REQUEST variables. By the time you are finished with this tutorial you’ll have a solid understanding of how and when to use each.

$_POST and $_GET

You may already have an idea about how these two variables work from your experience with HTML. The fundamental difference between GET and POST is that GET can be encoded into a URL while POST is invisible. The variables $_POST and $_GET relate to the specific methods. If you use the POST method in your form then you would use the $_POST variable to retrieve and array of each of the different values sent in the form. If you used the GET method you would use the $_GET variable to retrieve the array of values.

When to Use POST and When to Use GET

In it’s simplest form people use GET for retrieving data, and they use POST for sending data. For example GET is common in search forms. With get you can store the request in a URL string. This means that it can be bookmarked. So if you created a search and wanted to bookmark it so you could always get to the results page you could. One other point to note is that the GET URL string can only contain 100 characters. POST on the other hand can contain an unlimited number of characters and since it is not something that you see in a URL string, it is often used for sending things like passwords, emails, or communications that you don’t want to show up in a URL string.

Here is an example:

<form action="usr_details.php" method="post">
First Name: <input type="text" name="first_name">
Last Name: <input type="text" name="last_name">
Email Address: <input type="text" name="email">
<input type="submit">
</form>

Saving this form and opening it up in a browser you’ll notice that when you click on submit you see only:

http://www.YOUR_URL.com/usr_details.php

None of the information submitted in the form shows up in the URL. If you had used the GET method you would see something like this instead:

http://www.YOUR_URL.com/usr_details.php?first_name=Bob&last_name=Smith&email=bsmith%40test.com

In the PHP script that we use to process the form data (usr_details.php) we simply use the $_GET and $_POST variables where appropriate depending on which method you used (POST or GET). If we were using POST and wanted to print the data that was sumbited on screen we would code something like this:

<?php
echo "<p>".$_POST["first_name"]."<br />";
echo $_POST['last_name']."<br />";
echo $_POST['email']."</p>";
?>

If we were using GET and wanted to print the data that was sumbited on screen we would code something like this:

<?php
echo "<p>".$_GET["first_name"]."<br />";
echo $_GET['last_name']."<br />";
echo $_GET['email']."</p>";
?>

Again, the big difference is that when the form is submitted and processed the URL string that shows is either something like:

http://SOME_URL.com/usr_details.php?first_name=Bob&last_name=Smith&email=bsmith%40test.com

Or if you used post it would look something like:

http://SOME_URL.com/usr_details.php

The $_REQUEST Variable
The last variable that you can use is the $_REQUEST variable. This variable is very useful because it contains information related to both POST and GET along with any cookies that have been set. We’ll discuss cookies in more detail in later tutorials. For now just know that you can use the $_REQUEST variable to retrieve information on both GET and POST along with cookies. Similar to $_GET and $_POST the code looks like this:

<?php
echo "<p>".$_REQUEST["first_name"]."<br />";
echo $_REQUEST['last_name']."<br />";
echo $_REQUEST['email']."</p>";
?>

[ Go back to PHP Tutorial 10 | Using External File Includes in PHP ]

Writing code or script tutorials online can be a tedious task. The biggest problem is that to get the code to display property I’ve generally had to edit code brackets, quotes, dashes and other characters. Thankfully with WordPress there is an easier solution. Just use a plugin. There are several options available but the one that I’ve found most useful is called Code Markup and it was built by Bennett McElwee.

Visit his site to download the Code Markup plugin.

As his site states the reason this is useful is:

The plugin allows you to quickly copy and paste code into your blog, and add HTML markup to it to emphasise certain parts of it. Normally this is not possible without a lot of fiddly manual editing.

In the spirit of openness Bernette goes one step further. If you don’t feel that this plugin is exactly what you need he even suggests a few alternatives.

• Preserve Code Formatting has a slightly more robust untexturizer (it correctly handles a triple dash, for example), but doesn’t allow any markup at all in code blocks.
• Code Viewer displays code from an external file, so it’s not so good for tiny code snippets. However, it does allow readers to download the code, and it also adds line numbers. But again, no manual markup allowed.
• Unfancy quote plugin uses the sledgehammer technique to avoid WordPress’s fancification of text: it disables it completely.

Of all the options available however, I prefer Code Markup. It is flexible and once you get the hang of the features you’ll find yourself creating and using code snips all over the place.

CSS (Cascading Style Sheets) is a way to style HTML content. CSS provides a method for separating the content of a web page from the instructions used to determine layout and design. When creating websites, as a rule of thumb, you want to separate the content from the design of the site so that as you make changes to the site over time you are able to effectively apply those changes across the site with minimal effort.

For example, if you have a 300 page website and decide you want to change the font color on the site it could be either a simple change or a change that could take all day depending on whether or not you implemented a cascading style sheet. If you did implement a cascading style sheet you would simply need to change a line of code. If you didn’t you would need to go in and change the font tag across 300 pages.

So how does CSS work?

As you know, HTML tags have elements, attributes, and values. So an HTML page with simple paragraph might look something like this:

<html>
<head>
</head>
<body>

<p class="CSS_01" >A tutorial on CSS (cascading style sheets)</p>

</body>
</html>

In this example you have a paragraph element with an “class” attribute. That attribute has a value of “CSS_01″. Assigning a “class” attribute is like giving the paragraph a name. As we create our CSS we will be able to refer to the “class” and provide instructions for how to style elements with class value of “CSS_01″. As I stated earlier, style instructions should be kept separate from page content. In order to do that we need to create a style sheet as a separate file from our HTML page. To do this, open a new file in a plain text editor and save it as css_01_sheet.css. You’ll also want to create and save your HTML file if you haven’t done so already. Save them in the same folder on your desktop or wherever you like.

CSS code is similar to HTML in that it is plain text. There is nothing fancy about it and with any text editor you can read it. It is important to note that when you create a style sheet you need to save it with the extension .css rather than .txt.

Now that you have created a blank cascading style sheet the first thing to do is link the style sheet to the html page. To do this we add a line of code to our HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css_01_sheet.css" />
</head>
<body>
<p class="CSS_01">A tutorial on CSS (cascading style sheets)</p>
</body>
</html>

The line that we have added is a “link” element. The link element is what we use to link the CSS style sheet to the html page. What it does is say to the browser “hey, there is a style sheet for this page in this location that you need to look at”. The “rel” attribute tells the browser what it is. The “type” attribute tells the browser how the code is going to be written. In this case text/css. And the “href” attribute tells the browser were to look. Since we placed the files in the same directory all we need is the file name.

Next we need to create a style rule in our CSS style sheet. In CSS, style rules are made up of what are called Selectors, Properties, and Values. This is similar to Elements, Attributes, and Values in HTML. Here is a quick look at the syntax:

selector {property:value; property:value;}

Here’s how it works, for each Selector there is a Property/Value pair. Selectors, “select” elements on an HTML page and use Property/Value pairs to style the content. Let’s go to our style sheet and create a selector. To begin we add the following code to our style sheet:

p.CSS_01 {}

Looking at the code notice the format used. What we have done is select the paragraph tag by typing the letter “p”. We then clarified that we want to select only paragraph tags with a specific class. That class is specified by typing .CSS_01 right after “p”. Remember in our HTML code that we gave the paragraph a class attribute with the value of CSS_01. This is how we know which element we are applying the style rule to. The last bit of code is the two curly brackets “{}”. These brackets will contain our Property/Value pairs. There several property value pairs that we could apply. For our purposes here we’ll choose a font, and a background color:

p.CSS_01 {
          background-color: yellow;
          font-family: "verdana", "arial";
          }

Notice how property value pairs work. First you identify the property in this case “background-color” and “font-family”. Then you assign values. It is important to note that some properties can have multiple values such as “font-family”. We’ll go into more detail in latter tutorials.

Now, save all of your documents and open up your HTML page in a browser. You should see something like this:

Congratulations. You have just created your first CSS style sheet, linked it to your HTML page, built a style rule, and styled your content. You are well on your way to becoming a CSS master. Keep an eye out for the next tutorial!

Here is a little project that has been developing this year and has just now released the 1.0 version. Miro 1.0. What is Miro?
Percy Cabello puts it best in his review:

Miro is an open source video player that aims to provide both, a capable video player and a platform for enabling people to create and distribute their own video content.

After downloading it I think of it like a better iTunes video player. It allows users to select video content from across the web, organize it, manage the files, and play it all in one space. At the moment the project is still relatively small but it is growing fast. Because it is open source there are loads of options for end users who want to get creative with things. Users have the ability to co-brand players, create and submit their own feeds, and best of all change and use the source code.

Why is an open-source video player such a big deal?
Think about it. With open source anyone is free to change the source code, contribute bug fixes and features, and make new versions. This is a huge push for the little guy to be able to compete and pushes the web forward. All of a sudden technology becomes accessible and available.

Looking at the player I’m impressed with the interface:

Like I said, it feels a bit like iTunes, but it has some nifty features. For example you can search for videos from across the web. Not just in iTunes. You have the option of searching video sites like YouTube, Veoh Video networks, Google Video, Daily Motion and more. Additionally, you can move your entire library to an external hard drive if you run out of space. And videos that you download will auto-delete after a few days OR you can choose to have them remain forever depending on selections that you choose.

Anyway, this is a project that web video geeks should be watching. I suspect a few big companies may even have heard a shot coming across the bow (fake cough.. apple).

For more info check out the Miro 1.0 features list.

The Pulse of the web is a collection of the weeks must read headlines for web geeks. Each headline is coupled with a bit of background information that lets you know why you should care. Over the last few weeks here is the list:

$200 Linix Based PCs Sell Out at Wall-Mart

by Adrian Kingsley-Hughes

Q. Why is this important?
A. Wall-Mart initially ordered about 10K units. They have only been selling them for a few weeks and they are already sold out. This points to strong demand for affordable alternatives to the Windows based platform. The computers do most everything an entry level user would need. And, with the installation of Open Office or the IBM Lotus Symphony version of open office users are able to effectively do everything from word processing, to accessing the web, to creating spreadsheets, and even developing databases. It is a clear signal that people are increasingly comfortable with free, open source software as an alternative to more expensive alternatives.

Mac OSX Out-Sells Windows in Japan

Q. Why is this important?
A. Japan has long since been considered the trend setter. Over the years the windows opperating system has been plagued with security holes and many experts have questioned if this coupled with the iPod “halo effect” would lead to increased demand for the Macintosh opperating system over Windows. This quote speaks loads to how the trend is unfolding:

… while sales of Mac OS X increased dramatically between September and October, climbing from a rate of 15.5 percent year-over-year to 60.5 percent, Microsoft suffered from the reverse effect. Sales growth of Windows plummeted from 75.3 percent to 28.7 percent. The sudden switch provided Apple with about 53.9 of the total OS-only marketshare in Japan during October — a breakthrough for the company, BCN says.

Build a Hackintosh Mac for $800

Q. Why is this important?
A. There is a theory running around the web that users will find a way to get what they want and the companies of the Web 3.0 movement (yes this is past web 2.0) will be those that best enable open source and community development. This is beyond simple web 2.0 user generation of content in that it takes companies pushing complete open development. At the moment Apple has slowly began earning a reputation for not being as open as it could be. As mashups and peer to peer sites become more prevalent there is a debate around cost related to maintaining closed source systems, licensing, and other things like DRM (digital rights management). This article is simply another bit of proof that no matter who you are you can’t completely control what happens to your software. People hack it, mash it, and will do with it what they want in the end.

Rumors of Windows Building a Flickr Compeditor

by Thomas Hawk

Q. Why is this important?
A. With the launch of Windows Live it is clear that something is going on over there at Microsoft. They have consistently been behind the curve on the whole Web 2.0 thing and have recently been beginning to gain just a bit of momentum. Everyone knows they have Google in their sites, and they have just inked a deal with Facebook. Flickr is not a Microsoft ally and it would be a good thing from a competitive standpoint for the company to come up with an answer to the property.

Google Android OS Now Available | An Open Source Operating System for Mobile Phones

Q. Why is this important?
A. Well, it’s a stab at competing with Windows Mobile and the iPhone OS along with others. But once again, it is open source so development is happening all over the place and given it’s nature it may lead to reduced costs.

Ubuntu Home Server, possible competition for Windows Home Server?

Q. Why is this important?
A. Most people will say this is not going to be any real competition to Windows Home Server, but for those purchasing a Linix system at Wall-Mart, congratulations you have a solution to your home server needs

Honestly, it is important. It shows that there are other solutions and there is even an emerging demand. Microsoft, I’m sure, knows better than to act like this is not something on the horizon. Only time will tell what happens to it.

Google’s Acquisition of DoubleClick Rejected by EC

Q. Why is this important?
A. Internet advertising hangs in the balance. We all know there are not many large alternatives to Google Adwords and Double Click, for a long while was a good one.

If you post images to websites with any frequency you’ll eventually realize that you end up doing the same routines time and time again to prepare photos for the web. For example you may always end up with a 200×200px square with a border and some padding, or each image you work with may have some specific information printed on it, or each one may need to be set to black and white, etc. What if I told you that you can get through an entire day’s worth of formating in just a few minutes? You’d want to find out how right? Of course you would.

Thankfully those creative folks over at Adobe know a thing or two about how to increase productivity. That’s why the built the functionality to create “actions” in Photoshop.

What are Photoshop Actions?

In Photoshop, actions are a set of recorded events. They range from selecting and using tools to re-sizing, changing colors, applying filters, all the way down to cropping and saving. The user creates the actions either by coding them in a script or recording them. Once the action is played back the recorded/coded events take place in the order they were saved and are applied to the current image.

Batch processing is the task of applying an action or set of actions to a set of images. So how do you batch process images? Simple, just follow the steps below.

Batch Processing with Photoshop

Imagine we have a group of photos that we want to turn into smaller web snaps for our travel blog. They are all big photos, with not much consistency from one to another:

Looking at the pictures we decided that for our blog we want to re-size them all, add a border with some padding, and then save the output to a separate file and close out of the original image.

Step One, Open the Image and Create an Action Set

To create a new action go to Windows > Actions to bring up the actions pallet and then select the icon that creates a new action. It’s located right next to the little trashcan and looks like the new layer icon.

We’ll create an action called Create Blog Post Card and hit the record button. What this does is follow us through the first creation of a blog post card image. It is important to remember that the events that are recorded will be applied to every image that is processed so we need to think carefully about what we are doing to our images.

For our purposes we are going to first re-size the image:

We set the image to 400px wide and didn’t pay attention to the height. You could if you want to, but for our purposes here it isn’t needed. Next we’ll add a border to the image by extending the canvas size:

And finally we’ll output the image to the web.

Stop the Recording

Once you have completed the process once you simply stop recording by pressing the stop button.

Start Batch Automation

Now that we have the action, it is time to batch process the images. To do this, select File > Automate > Batch from the file menu. To bring up the Batch Process window. Fill it out, run the process and your done!

Spam is the scourge of the internet. Brought to us by spineless low class individuals who’s parasitic websites can’t get traffic on their own accord. Spammers will stop at nothing to leach traffic off of your hard work. When owning a blog that generally means that once you get a bit of traffic you run into Comment Spam. Thankfully for those of us using WordPess Blogs there are a number of WordPress plugins to help stop comment spam.

When you begin to notice that you are receiving comment spam you may be tempted to turn off the ability to comment completely. It is an option; however, it does limit your ability to interact with your audience. So, what are our options for stopping spam if we don’t turn off comments? In truth, you can’t totally stop it without shutting comments off completely. However there are several ways to limit the amount of spam that you receive.

Five Suggestions for Stopping Comment Spam

1. Implement a Turing test: The most well known Turing test is an image response scenario which creates a situation where the person posting the comment must enter a code which they receive on screen via randomly generated images (Figure 4.A). Most blogs have this functionality, or a plugin that will enable this functionality. The con with this type of test is that, depending on how you implement it, you may be creating an accessibility issue. People with limited vision often have a hard time reading images on screen which may or may not be an issue for you.
   

   On my blog I’m using Version 0.2.4 of Peter’s Random Anti-Spam Image for WordPress. It has some nice features that avoid creating accessibility issues. (Thanks Peter!)

2. Turn comments *off* for old posts: When posting, many blogs allow you to simply turn off comments for a specific post. Think of it like auto-archiving the comments feature. Essentially when a post becomes out dated (you determine when) the ability to comment is turned off. Open source blogs such as WordPress and Movable Type have plugins that allow for “auto shut-off” of comments based on their date of creation and most blogs also have manual setting that you can turn on and off to manage this feature on older posts. The con with this is that you loose some ability to receive comments on older posts.
   

   The plugin that I currently use for auto-archiving of comments is called Comment Timeout. by James McKay (Thanks for developing this James!). It is a great little plugin and has some outstanding features like:

   Per-post settings: You can set a longer (or shorter) duration for the discussion on particular posts, or even designate some posts to have comments kept open indefinitely.

   Extended discussions for popular posts: You can set a cutoff number of comments above which a post is automatically considered “popular” and entitled to have comments left open for a longer period of time.

   Send to moderation queue: You have the choice between closing comments altogether on older posts or sending them to the moderation queue.

   Advance warning: The comment form now informs your users when the discussion will be closed.

3. Filter comment content: Although this does not catch everything, filtering comments and auto-blacklisting comments based on things like the number of links in the comment or the types of words used does help to limit the amount of spam received. The con is that filtering comment limits the ability to be free with language. However, I’ve found that most of the language I’ve put on my blacklist I don’t want on my site anyway.
4. Force IP address and email validation in order to post comments: Spammers hate being identified, and forced validation helps to keep them off of your blog. The downside is that forcing people to validate an email address is sometimes viewed as a haste. On my site I’ve chosen only a valid IP address and that they submit an email, not necessarily validate it.
5. Force comment moderation based on user level: This is sometimes more work than it is worth, but it is effective. It involves forcing users to register to place comments and then allowing them to comment based on whether or not a moderator has approved them in the past. First time users go instantly to moderation while those who have already been approved are allowed to post instantly without moderation.

As you can see there are several options for limiting the amount of spam you receive. The best option for most users is to use a combination of methods to limit exposure. For example on my own blog I use IP address validation, a Turing test, a black list, forced email submission, and auto shut-off of comment capabilities on out-dated posts. It has significantly reduced the amount of spam I am exposed to, but I still do get some.

Feel free to post other solutions that you’ve found below.

What are rollovers you ask? You remember, way back when you had image rollovers that you had to implement with Javascript. Basically when you moused over a bit of text in the navigation that bit of text would appear to light up. In the past it was created with images of the text. We had one image as the default state and another as the “on mouseover” state and we used Javascript to make it happen. I know, I’m dating myself, but people used this all the way up to about 2002 and some designers still do it!

Anyway, thankfully we now have cascading style sheets or in other words, CSS. The advantage to using CSS to create a rollover effect is that you no longer need images. With cascading style sheets we have the ability to create the rollover effect and attribute it to the text itself. This is a huge advantage in two ways:

First, there are no images to load so the navigation doesn’t pop into place or take any extra time to generate. It is a much faster system.

Second, it allows for search engines to index more text on your page and helps with ranking.

So how do we get started? Just follow these few steps:

Step 1, Create the Navigation DIV

To begin we’ll want to make sure that our navigation links are contained in a DIV tag. We do this so that we can be sure we are styling the appropriate set of links. Of course you could also specify a default rollover state for all links with CSS if you wanted to, but for our purposes we will be focusing on how to create rollovers in CSS for navigation. To set up our navigation to accept css rollovers with begin with the following example navigation links contained within a DIV tag:

<div id="nav">

  <ul>

      <li><a href="link1"> Link 1 </a></li>
      <li><a href="link1"> Link 1 </a></li>
      <li><a href="link1"> Link 1 </a></li>

  <ul>

</div>

Notice that I set my links up within an unordered list. You could set them up any way you like, but I find that using and unordered list is a nice way to manage organization.

Step 2, Create a CSS Style Rule

Next we want to create a CSS style rule. In this rule we’ll be styling the links and the list items.

#nav ul{margin:0; padding:9px}
#nav ul li{display: inline}
#nav ul li a{padding: 4px 7px 4px 7px; background:#F0F3F7; color: #555;}
#nav ul li a:hover{background: #ff0; color: #000; text-decoration: none;}
#nav ul li a:active{background: #fff; color: #00C; text-decoration: none;}

I know, that is a lot of code for a tip! But don’t worry we’ll go through it line by line so that you know what is going on. The first line #nav ul{margin:0; padding:9px} sets up a margin of zero (meaning none) and adds padding around the list. The second line #nav ul li{display: inline} tells us that rather than display a list of bullets, we want to display the list in line. In other words, all on one line without the bullets. The next line is attributed to styling the link itself #nav ul li a{padding: 4px 7px 4px 7px; background:#F0F3F7; color: #555;} On this line you’ll notice that we added some padding around the link, gave a background color and a color for the text. This creates the illusion that the text is contained in a box. The next two lines are similar, they are simply saying that on hover and on click change things a bit. Here is the final result:

That is all there is too it. If you want to display the elements as a list rather than in-line simply remove the line about display: inline. Also, if you want, you can download the HTML and the CSS in one HTML page. HTML and CSS Style Example for CSS Tutorial #4

Fell free to use the code as you like.