Stimati angajati,

Va rugam sa recoltati si sa predati fiecare la departamentul resurse
umane 2 ml. de sange si 2 g. fecale, deorece dorim sa stabilim daca
aveti munca in sange sau va cacati pe ea.

CONDUCEREA

“Once upon a time, there was … ‘A king!’ my little readers will say right away. No, children, you are wrong. Once upon a time there was a piece of wood …”
–The Adventures of Pinocchio

You can do a lot without JavaScript. Using Hypertext Markup Language (HTML — throughout this article, we’ll refer to HTML and XHTML as just HTML. Which you choose is up to you, and doesn’t have a much to do with JavaScript. In case it matters to you, the HTML code we’ll present in this article will be valid XHTML 1.0 Strict), you can produce complex documents that intricately describe the content of a page — and that content’s meaning — to the minutest detail. In this chapter from the new Simply Javascript (you can also download this article, along with two others, as a PDF), I’ll show you that by using Cascading Style Sheets (CSS), you can present that content in myriad ways, with variations as subtle as a single color, as striking as replacing text with an image.

No matter how you dress it up, though, HTML and CSS can only achieve an animatronic monstrosity that wobbles precariously when something moves nearby. It’s when you wheel in the JavaScript that you really can breathe life into your Pinocchio, lifting you as its creator from humble shop clerk to web design mastery!

But whether your new creation has the graceful stride of a runway model, or the shuffling gait of Dr. Frankenstein’s monster, depends as much on the quality of its HTML and CSS origins as it does on the JavaScript code that brought it to life.

Before we learn to work miracles, therefore, let’s take a little time to review how to build web sites that look good both inside and out, and see how JavaScript fits into the picture.

Keep ‘em Separated

Not so long ago, professional web designers would gleefully pile HTML, CSS, and JavaScript code into a single file, name it index.html (or default.htm, if they had been brainwashed by Microsoft), and call it a web page. I’ve conceptualized this as something like Figure 1. You can still do this today, but be prepared for your peers to call it something rather less polite.

Figure 1. A single-file mess (click to view image)

Somewhere along the way, web designers realized that the code they write when putting together a web page does three fundamental things:

• It describes the content of the page.
• It specifies the presentation of that content.
• It controls the behavior of that content.

They also realized that keeping these three types of code separate, as depicted in Figure 2, “Separation of concerns,” made their jobs easier, and helped them to make web pages that work better under adverse conditions, such as when users have JavaScript disabled in their browsers.

Computer geeks have known about this for years, and have even given this principle a geeky name: the separation of concerns.

Figure 2. The separation of concerns (click to view image)

Now, realizing this is one thing, but actually doing it is another — especially if you’re not a computer geek. I am a computer geek, and I’m tempted to do the wrong thing all the time.

I’ll be happily editing the HTML code that describes a web page’s content, when suddenly I’ll find myself thinking how nice that text would look if it were in a slightly different shade of gray, if it were nudged a little to the left, and if it had that hee-larious photocopy of my face I made at the last SitePoint office party in the background. Prone to distraction as I am, I want to make those changes right away. Now which is easier: opening up a separate CSS file to modify the page’s style sheet, or just typing those style properties into the HTML code I’m already editing?

Like behaving yourself at work functions, keeping the types of code you write separate from one another takes discipline. But once you understand the benefits, you too will be able to summon the willpower it takes to stay on the straight and narrow.

Three Layers

Keeping different kinds of code as separate as possible is a good idea in any kind of programming. It makes it easier to reuse portions of that code in future projects, it reduces the amount of duplicate code you end up writing, and it makes it easier to find and fix problems months and years later.

When it comes to the Web, there’s one more reason to keep your code separate: it lets you cater for the many different ways in which people access web pages.

Depending on your audience, the majority of your visitors may use well-appointed desktop browsers with cutting-edge CSS and JavaScript support, but many might be subject to corporate IT policies that force them to use older browsers, or to browse with certain features (like JavaScript) disabled.

Visually impaired users often browse using screen reader or screen magnifier software, and for these users your slick visual design can be more of a hindrance than a help.

Some users won’t even visit your site, preferring to read content feeds in RSS or similar formats if you offer them. When it comes time to build these feeds, you’ll want to be able to send your HTML content to these users without any JavaScript or CSS junk.

The key to accommodating the broadest possible range of visitors to your site is to think of the Web in terms of three layers, which conveniently correspond to the three kinds of code I mentioned earlier. These layers are illustrated in Figure 3, “The three layers of the Web.”

Figure 3. The three layers of the Web (click to view image)

When building a site, we work through these layers from the bottom up:

1. We start by producing the content in HTML format. This is the base layer, which any visitor using any kind of browser should be able to view.
2. With that done, we can focus on making the site look better, by adding a layer of presentation information using CSS. The site will now look good to users able to display CSS styles.
3. Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behavior, which will make the site easier to use in browsers equipped with JavaScript.

If we keep the HTML, CSS, and JavaScript code separate, we’ll find it much easier to make sure that the content layer remains readable in browsing environments where the presentation and/or behavior layers are unable to operate. This “start at the bottom” approach to web design is known in the trade as progressive enhancement.

Let’s look at each of these layers in isolation to see how we can best maintain this separation of code.

HTML for Content

Everything that’s needed to read and understand the content of a web page belongs in the HTML code for that page — nothing more, nothing less. It’s that simple. Web designers get into trouble when they forget the K.I.S.S. principle (Keep It Simple, Stupid) and cram non-content information into their HTML code, or alternatively move some of the page’s content into the CSS or JavaScript code for the page.

A common example of non-content information that’s crammed into pages is presentational HTML — HTML code that describes how the content should look when it’s displayed in the browser. This can include old-fashioned HTML tags like <b>, <i>, <u>, <tt>, and <font>:

<p>Whatever you do, <a href="666.html"><font color=”red”>don’t
click this link</font></a>!</p>

It can take the form of inline CSS applied with the style attribute:

<p>Whatever you do, <a href="666.html" style=”color: red;”>don’t
click this link</a>!</p>

It can also include the secret shame of many well-intentioned web designers: CSS styles applied with presentational class names:

<p>Whatever you do, <a href="666.html" class=”red”>don’t click
this link</a>!</p>

Presentational Class Names? If that last example looks okay to you, you’re not alone, but it’s definitely bad mojo. If you later decide you want that link to be yellow, you’re either stuck updating both the class name and the CSS styles that apply to it, or living with the embarrassment of a class named “red” that is actually styled yellow. That’ll turn your face yellow — er, red!

Rather than embedding presentation information in your HTML code, you should focus on the reason for the action — for example, you want a link to be displayed in a different color. Is the link especially important? Consider surrounding it with a tag that describes the emphasis you want to give it:

<p>Whatever you do, <em><a href=”evil.html”>don’t click this
link</a></em>!</p>

Is the link a warning? HTML doesn’t have a tag to describe a warning, but you could choose a CSS class name that conveys this information:

<p>Whatever you do, <a href="evil.html" class=”warning”>don’t
click this link</a>!</p>

You can take this approach too far, of course. Some designers mistake tags like <h1> as presentational, and attempt to remove this presentational code from their HTML:

<p class="heading">A heading with an identity crisis</p>

Really, the presentational information that you should keep out of your document is the font, size, and color in which a heading is to be displayed. The fact that a piece of text is a heading is part of the content, and as such should be reflected in the HTML code. So this code is perfectly fine:

<h1>A heading at peace with itself</h1>

In short, your HTML should do everything it can to convey the meaning, or semantics of the content in the page, while steering clear of describing how it should look. Web standards geeks call HTML code that does this semantic markup.

Writing semantic markup allows your HTML files to stand on their own as meaningful documents. People who, for whatever reason, cannot read these documents by viewing them in a typical desktop web browser will be better able to make sense of them this way. Visually impaired users, for example, will be able to use assistive software like screen readers to listen to the page as it’s read aloud, and the more clearly your HTML code describes the content’s meaning, the more sense tools like these will be able to make of it.

Best of all, however, semantic markup lets you apply new styles (presentation) and interactive features (behavior) without having to make many (or, in some cases, any!) changes to your HTML code.

CSS for Presentation

Obviously, if the content of a page should be entirely contained within its HTML code, its style — or presentation — should be fully described in the CSS code that’s applied to the page.

With all the work you’ve done to keep your HTML free of presentational code and rich with semantics, it would be a shame to mess up that file by filling it with snippets of CSS.

As you probably know, CSS styles can be applied to your pages in three ways:

inline styles:
<a href="evil.html" style=”color: red;”>
Inline styles are tempting for the reasons I explained earlier: you can apply styles to your content as you create it, without having to switch gears and edit a separate style sheet. But as we saw in the previous section, you’ll want to avoid inline styles like the plague if you want to keep your HTML code meaningful to those who cannot see the styles.

embedded styles:
<style type="text/css">
.warning {
color: red;
}
</style>
&#8942;
<a href=”evil.html” class=”warning”>
Embedded styles keep your markup clean, but tie your styles to a single document. In most cases, you’ll want to share your styles across multiple pages on your site, so it’s best to steer clear of this approach as well.

external styles:
<link rel="stylesheet" href="styles.css" />
&#8942;
<a href="evil.html" class=”warning”>
Example 1.1. styles.css

.warning {
color: red;
}
External styles are really the way to go, because they let you share your styles between multiple documents, they reduce the amount of code browsers need to download, and they also let you modify the look of your site without having to get your hands dirty editing HTML.

But you knew all that, right? We’re dealing with a JavaScript book, after all, so let’s talk about the JavaScript that goes into your pages.

JavaScript for Behavior

As with CSS, you can add JavaScript to your web pages in a number of ways.

You can embed JavaScript code directly in your HTML content:
<a href="evil.html" onclick=”JavaScript code here”>

You can include JavaScript code at the top of your HTML document in a <script> tag:
<script type="text/javascript"><!--//--><![CDATA[//><!--
JavaScript code here
//–><!]]></script>
&#8942;
<a href=”evil.html” class=”warning”>

CDATA? If you’re wondering what all that gobbledygook is following the <script> tag and preceding the </script> tag, that’s what it takes to legitimately embed JavaScript in an XHTML document without confusing web browsers that don’t understand XHTML (like Internet Explorer).

If you write your page with HTML instead of XHTML, you can get away with this much simpler syntax:
<script type="text/javascript">
JavaScript code here
</script>

You can put your JavaScript code in a separate file, then link to that file from as many HTML documents as you like:
<script type="text/javascript" src="script.js"></script>
&#8942;
<a href="evil.html" class=”warning”>
Example 1.2. script.js (excerpt)
JavaScript code here

Guess which method you should use.

Writing JavaScript that enhances usability without cluttering up the HTML document(s) it is applied to, without locking out users that have JavaScript disabled in their browsers, and without interfering with other JavaScript code that might be applied to the same page, is called unobtrusive scripting.

Unfortunately, while many professional web developers have clued in to the benefits of keeping their CSS code in separate files, there is still a lot of JavaScript code mixed into HTML out there. By showing you the right way to use JavaScript, we hope to help change that.

The Right Way

So, how much does all this stuff really matter? After all, people have been building web sites with HTML, CSS, and JavaScript mixed together for years, and for the majority of people browsing the Web, those sites have worked.

Well, as you come to learn JavaScript, it’s arguably more important to get it right than ever before. JavaScript is by far the most powerful of the three languages that you’ll use to design web sites, and as such it gives you unprecedented freedom to completely mess things up.

As an example, if you really, really like JavaScript, you could go so far as to put everything — content, presentation, and behavior — into your JavaScript code. I’ve actually seen this done, and it’s not pretty — especially when a browser with JavaScript disabled comes along.

Even more telling is the fact that JavaScript is the only one of these three languages that has the ability to hang the browser, making it unresponsive to the user.

Therefore, we’ll do our darnedest to show you the right way to use JavaScript, not just because it keeps your code tidy, but because it helps to keep the Web working the way it’s meant to — by making content accessible to as many people as possible, no matter which web browser they choose to use.

JavaScript Libraries

As I mentioned, one of the benefits of keeping different kinds of code separate is that it makes it easier to take code that you’ve written for one site and reuse it on another. Certain JavaScript maniacs (to be referred to from this point on as “people”) have taken the time to assemble vast libraries of useful, unobtrusive JavaScript code that you can download and use on your own web sites for free.

Throughout Simply Javascript, we build each of the examples from scratch — all of the JavaScript code you need can be found right there. Since there isn’t always time to do this in the real world, however, and because libraries are quickly becoming an important part of the JavaScript landscape, we’ll also look at how the popular JavaScript libraries do things whenever the opportunity presents itself.

Here are the libraries that we use in the book:

• Prototype
• script.aculo.us
• Yahoo! User Interface Library (YUI)
• Dojo
• jQuery
• MooTools

Not All Libraries are Created Equal Watch out for sites offering snippets of JavaScript code for you to copy and paste into your web pages to achieve a particular effect. There is a lot of free code out there, but not all of it is good. In general, the good libraries come in the form of JavaScript (.js) files that you can link into your pages unobtrusively, instead of pasting JavaScript directly into your HTML code. If you don’t feel confident to judge whether a particular JavaScript library is good or bad, ask for some advice in the SitePoint Forums, or just stick with the libraries I just mentioned — they’re all very good.

Let’s Get Started!

Enough preaching — you checked out this article to learn JavaScript, right? Clean HTML and CSS are nice and all, but it’s time to take the plunge into the third layer of the Web: behavior. The chapters of Simply Javascript that follow the one from which this article is reproduced deal in greater depth with this topic — and because we’re feeling generous, we’ve decided to throw them in for your delectation! So don’t forget to download this chapter as a PDF, as well as Chapter 2: Programming with JavaScript and Chapter 3: Document Access.

In Chapter 2, you’ll learn that as JavaScript is a programming language, you must get your head around the way computer programs work — which to some extent means learning to think like a computer — in order to use it most effectively. The simple concepts introduced in this chapter — statements, variables, expressions, loops, functions, and objects — are the building blocks for every JavaScript program you’ll ever write.

And Chapter 3? While certain people enjoy writing JavaScript code for its own sake, you wouldn’t want to run into them in a dark alley at night. As a well-adjusted web developer, you’ll probably want to use JavaScript to make changes to the contents of your web pages using the Document Object Model (DOM). Lucky for you, we wrote a whole chapter to show you how!

Then, of course, there’s more…

Get ready to start using some cool (and unobtrusive) JavaScript!

Unless you limit yourself to one-page web sites, you’ll need to design navigation. In fact, navigation is among the most important parts of any web design, and requires a great deal of thought if visitors are to move around your site easily.

Making site navigation easy is one area in which CSS really comes into its own. Older methods of creating navigation tended to rely on lots of images, nested tables, and JavaScript — all of which can seriously affect the usability and accessibility of a site. If your site cannot be navigated using a device that doesn’t support JavaScript, for example, not only are you blocking users who have turned JavaScript off, but you’re also locking out text-only devices such as screen readers and search engine robots — they’ll never get past your home page to index the content of your site. If your design clients don’t care about accessibility, tell them their clunky menu is stopping them from achieving a decent search engine ranking!

CSS allows you to create attractive navigation that, in reality, is no more than text — text that can be marked up in such a way as to ensure that it’s both accessible and understandable by all those who can’t physically see your design, but still want to get to your content. In this chapter, we’ll look at a variety of solutions for creating CSS-based navigation. Some are suited to implementation on an existing site, to make it load more quickly, and boost its accessibility by replacing an old-fashioned, image-based navigation. Others are more suited to incorporation within a pure CSS layout.

Before you begin, you might want to download this article in PDF format, so you can use it offline, at your leisure. The PDF also includes other chapters from The CSS Anthology: 101 Essential Tips, Tricks and Hacks on using CSS with images, and accessibility and alternative devices.

But now, on with the show.

How do I style a structural list as a navigation menu?

For new sites, you’re likely to be trying to avoid using tables for layout, or using them only where absolutely necessary. Therefore, a navigation solution that doesn’t involve tables is useful; also, by eradicating table elements, you’ll find that your page contains far less markup.

Solution

A navigation system is simply a list of places that users can visit on the site. Therefore, an unordered list is the ideal way to mark up your navigation. The navigation in Figure 1 is marked up as a list, and styled using CSS, as you can see.

Creating navigation by styling a list (click to view image)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”listnav1.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}

Discussion

To create navigation based on an unordered list, first create your list, placing each navigation link inside a li element:

<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>

Next, wrap the list in a div with an appropriate ID:

<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>

As Figure 2 shows, this markup looks fairly ordinary with the browser’s default styles applied.

A very basic, unstyled list (click to view image)

The first thing we need to do is style the container in which the navigation sits — in this case, #navigation:

#navigation {
width: 200px;
}

I’ve given #navigation a width. If this navigation system were part of a CSS page layout, I’d probably add some positioning information to this ID as well.

Next, we style the list:

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

As Figure 3 illustrates, the above rule removes list bullets and the indented margin that browsers apply, by default, when displaying a list.

Viewing the list after indentation and bullets are removed (click to view image)

The next step is to style the li elements within #navigation, to give them a bottom border:

#navigation li {
border-bottom: 1px solid #ED9F9F;
}

Finally, we style the link itself:

#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}

Most of the work is done here, creating CSS rules to add left and right borders, remove the underline, and so on. The first property declaration in this rule sets the display property to block. This causes the link to display as a block element, meaning that the whole area of each navigation “button” is active when you move the cursor over it — the same effect you’d see if you used an image for the navigation.

Can I use CSS and lists to create a navigation system with subnavigation?

Sometimes, more than one navigation level is necessary — but is it possible to create multi-leveled navigation using styled lists in CSS?

Solution

The perfect way to display subnavigation within a navigation system is to create a sublist within a list. The two levels of navigation will be easy to understand when they’re marked up in this way — even in browsers that don’t support CSS.

To produce multi-level navigation, we create a nested list and style the colors, borders, and link properties of the new list’s items:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_sub.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>

#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

The result of these additions is shown in Figure 4.

The CSS list navigation containing subnavigation (click to view image)

Discussion

Nested lists are a perfect way to describe the navigation system that we’re working with here. The first list contains the main sections of the site; the sublist under Recipes shows the subsections within the Recipes category. Even without any CSS styling, the structure of the list is still clear and comprehensible, as you can see in Figure 5.

The navigation remaining logical without the CSS (click to view image)

The HTML that we use to mark up this list simply nests the sublist inside the li element of the appropriate main item:

<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>

With this HTML, and without any changes to the CSS, the menu will display as shown in Figure 6, “The sublist taking on the styles of the main navigation”, where the li elements inherit the styles of the main menu.

The sublist taking on the styles of the main navigation (click to view image)

Let’s add a style rule for the nested list to communicate visually that it’s a submenu, and not part of the main navigation:

#navigation ul ul {
margin-left: 12px;
}

This rule will indent the nested list so that it’s in line with the right edge of the border for the main menu, as demonstrated in Figure 7.

The indented subnavigation (click to view image)

Let’s add some simple styles to the li and a elements within the nested list to complete the effect:

#navigation ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

How do I make a horizontal menu using CSS and lists?

So far, we’ve dealt with vertical navigation — the kind of navigation that will most likely be found in a column to the left or right of a site’s main content area. However, site navigation is also commonly found as a horizontal menu close to the top of the document.

Solution

As Figure 8 shows, this type of menu can be created using styled lists in CSS. The li elements must be set to display inline so that each list item does not display on its own line.

Using CSS to create horizontal list navigation (click to view image)

Here’s the HTML and CSS that creates this display:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”listnav_horiz.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>

#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}

Discussion

To create the horizontal navigation, we start with a list that’s identical to the one we created for our vertical list menu:

<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>

We style the #navigation container to apply some basic font information, as we did with the vertical navigation. In a CSS layout, this ID would probably also contain some additional styles that determine the navigation’s position on the page:

#navigation {
font-size: 90%;
}

In styling the ul element, we remove the list bullets and default indentation applied to the list by the browser:

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}

The property that transforms our list from a vertical to a horizontal display is applied to the li element:
#navigation li {
display: inline;
}

After we set the display property to inline, the list looks like Figure 9.

Displaying the list menu horizontally (click to view image)

All that’s left for us to do is to style the links for our navigation:

#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}

If you’re creating boxes around each link, as I have here, remember that, in order to make more space between the text and the edge of its container, you’ll need to add more left and right padding to the links. To create more space between the navigation items, add left and right margins to the links.

How do I create button-like navigation using CSS?

Navigation that appears to be composed of clickable buttons is a feature of many web sites. This kind of navigation is often created using images to which effects are applied to make the edges look beveled and button-like. Often, some JavaScript code is used to swap in another image, so the button appears to depress when the user holds the cursor over it or clicks on the image.
Is it possible to create such button-like navigation systems using only CSS? Absolutely!

Solution

Creating a button effect like that shown in Figure 10 is possible, and fairly straightforward, using CSS. The effect’s success hinges on your use of the CSS border properties.

Building button-like navigation with CSS (click to view image)

Here’s the code you’ll need:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_button.css"
/>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>

#navigation {
font-size:90%
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

Discussion

To create this effect, we’ll use the horizontal list navigation described in the section called “How do I make a horizontal menu using CSS and lists?” However, to create the button look, we’ll use different colored borders at the top and left than we use for the bottom and right sides of each button. By giving the top and left edges of the button a lighter colored border than we assign to the button’s bottom and right edges, we create a slightly beveled effect:

#navigation a:link, #navigation a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}

We reverse the border colors for the hover state, which creates the effect of the button being pressed:

#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

Try using heavier borders, and changing the background images on the links, to create effects that suit your design.

How do I create tabbed navigation with CSS?

Navigation that appears as tabs across the top of the page is a popular navigation choice. Many sites create tabs using images. However, this approach suffers from the problems associated with text contained in images, which we discussed in the section called “How do I replace image-based navigation with CSS?” However, it is possible to create a tab effect by combining background images and text styled with CSS.

Solution

The tabbed navigation shown in Figure 11 can be created by styling a horizontal list.

Using CSS to create tabbed navigation (click to view image)

Here’s the HTML and CSS that creates this effect:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”tabs.css” />
</head>
<body id=”recipes”>
<div id=”header”>
<ul id=”tabnav”>
<li class=”recipes”><a href=”#”>Recipes</a></li>
<li class=”contact”><a href=”#”>Contact Us</a></li>
<li class=”articles”><a href=”#”>Articles</a></li>
<li class=”buy”><a href=”#”>Buy Online</a></li>
</ul>
</div>
<div id=”content”>
<h1>Recipes</h1>
<p>Lorem ipsum dolor sit amet, … </p>
</div>
</body>
</html>

body {
font: .8em/1.8em verdana, arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 0 10% 0 10%;
}

#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}

#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}

#header li {
float: left;
background-image: url("images/tab_left.gif“);
background-repeat: no-repeat;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}

#header a {
float: left;
display: block;
background-image: url("images/tab_right.gif");
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #333366;
}

#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url("images/tab_active_left.gif");
}

#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url("images/tab_active_right.gif");
background-color: transparent;
color:#FFFFFF;
}

Discussion

The tabbed navigation approach I’ve used here is a basic version of Douglas Bowman’s Sliding Doors of CSS method, which is a tried and tested technique for creating a tabbed interface. The structure that I’ve given to the navigation menu is the same kind of simple unordered list that we’ve worked with so far, except that each list item is assigned a class attribute that describes the link it contains. We’ve also wrapped the entire list in a div with an id of header. The technique takes its name from the two images used to implement it — one overlaps the other, and the images slide apart as the text size increases.

You’ll need four images to create this effect: two to create the regular tab color, and two to use when the tab is the currently selected (highlighted) tab. The images I’ve used in this example are shown in Figure 12. As you can see, they’re far wider and taller than would generally be necessary for a tab?this provides plenty of space for the tab to “grow” if the user’s browser is configured to display text at a very large size.

The image files used to create the tabs (click to view image)

Here’s the basic list of navigation items:

<div id="header">
<ul id="tabnav">
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
</div>

The first step is to style the container that surrounds the navigation. We’re going to give our header a simple bottom border for the purposes of this exercise, but on a real-world site this container may hold other elements in addition to our tabs (such as a logo or search field):

#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}

As you’ll have noticed, we float the header to the left. We’ll also float the individual list items; floating the container that houses them ensures that they remain contained once they’re floated, and that the border will display below them.

Next, we create a style rule for the ul element inside the header:

#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}

This rule removes the bullets and alters the margin and padding on our list — we’ve added two ems of padding to the top of the ul element. Figure 13 shows the results of our work so far.

Displaying the navigation after styling the /#c#/ul/#ec#/ element (click to view image)

Now we need to style the list items:

#header li {
float: left;
background-image: url("images/tab_left.gif");
background-repeat: no-repeat;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}

This rule uses the float property to position the list items horizontally while maintaining the block-level status of each. We then add the first of our “sliding door” images — the thin left-hand side of the tab — as a background image. A single-pixel right margin on the list item creates a gap between one tab and the next. Figure 14 shows that the left-hand tab image now appears for each tab.

The navigation tabs reflecting the new styles (click to view image)

Next, we style the links, completing the look of our tabs in their unselected state. The image that forms the right-hand side of the tab is applied to each link, completing the tab effect:

#header a {
float: left;
display: block;
background-image: url("images/tab_right.gif");
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #333366;
}

The results are shown in Figure 15.

Styling the navigation links (click to view image)

If you increase the text size in the browser, you can see that the tabs neatly increase in size too. In fact, they do so without overlapping and without the text protruding out of the tab — this is because we have used images that allow plenty of room for growth.

To complete the tab navigation, we need to highlight the tab that corresponds to the currently displayed page. You’ll recall that each list item has been assigned a unique class name. If we assign to the body element an ID that has a value equal to the value of each list item class, CSS can do the rest of the work:

<body id="recipes">

Although it looks like a lot of code, the CSS code that styles the tab matching the body ID is relatively straightforward. The images I’ve used are exact copies of the left and right images that we applied to the tabs, but they’re a different color, which produces the effect of one tab appearing to be highlighted.

Here’s the CSS:

#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url("images/tab_active_left.gif");
}

#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url("images/tab_active_right.gif");
background-color: transparent;
color: #FFFFFF;
}

With these rules in place, specifying an ID of recipes to our body will cause the Recipes tab to be highlighted, specifying contact will cause the Contact Us tab to be highlighted, and so on. The results of this work are shown in Figure 16.

Identifying a Useful Technique
The technique of adding an ID to the body element can be very useful. For example, you may have different color schemes for different sections of your site, to help the user identify which section they’re using. You can simply add the section name to the body element and make use of it within the style sheet, as we did in this example.

Highlighting the Contact Us tab (click to view image)

How do I create rollovers in CSS without using JavaScript?

CSS-based navigation can provide some really interesting effects, but there are still some effects that require the use of images. Is it possible to enjoy the advantages of text-based navigation and still use images?

Solution

It is possible to combine images and CSS to create JavaScript-free rollovers. This solution is based on a technique described at WellStyled.com. Here’s the code you’ll need:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”images.css” />
</head>
<body>
<ul id=”nav”>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</body>
</html>

ul#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("peppers.gif“) top left no-repeat;
text-decoration: none;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}

The results can be seen in Figure 17, but to enjoy the full effect I suggest you try it for yourself. Don’t forget to click on a link or two!

Using images to advantage in the completed menu (click to view image)

Discussion

This solution offers a means of using images in your navigation without having to resort to preloading lots of separate files.

The navigation has three states, but these states aren’t depicted using three separate images. Instead, we use one large image that contains images for all three states, as shown in Figure 18.

The pepper image containing images for all three rollover states (click to view image)

The navigation is marked up as a simple list:

<ul id="nav">
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>

We control the display of the background image within the declaration block for the navigation links. However, because the image is far bigger than the area required for this element, we only see the yellow pepper at first:

#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("peppers.gif") top left no-repeat;
text-decoration: none;
}

When the :hover state is activated, the background image moves up the exact number of pixels required to reveal the red pepper. In this example, I had to move it by 69 pixels, but this figure will vary depending on the image that you use. You could probably work it out mathematically, or you could do as I do and simply increment the background position a few pixels at a time, until it appears in the right location on hover:

#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}

When the :active state is activated, the background image shifts again, this time to display the green pepper when the link is clicked:

#nav a:active {
background-position: 0 -138px;
color: #006E01;
}

That’s all there is to it! The effect can fall apart if the user resizes the text in the browser to a larger font, which allows the edges of the hidden images to display. You can anticipate this eventuality to some degree by leaving quite a large space between each of the three images — keep this in mind when preparing your images.

Image Flickering in Internet Explorer
This technique sometimes causes the navigation to “flicker” in Internet Explorer. In my tests, this only tends to be a problem when the image is larger than the ones we’ve used here; however, if your navigation items flicker, a well-documented remedy is available.

How can I create pure CSS drop-down menus?

In the previous section, we learned to create image- and JavaScript-free rollovers. Can the same be achieved for drop-down menus?

Solution

The answer is yes … but the resulting menus don’t work in Internet Explorer 6! Nevertheless, Figure 19 illustrates this interesting technique, which will become more useful as Internet Explorer 7 gains market share.

Creating a CSS-only drop-down menu (click to view image)

Here’s the markup used for this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>CSS Flyout menus</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menus.css" />
</head>
<body>
<ul id="nav">
<li><a href="#">Starters</a>
<ul>
<li><a href="">Fish</a></li>
<li><a href="">Fruit</a></li>
<li><a href="">Soups</a></li>
</ul>
</li>
<li><a href="#">Main courses</a>
<ul>
<li><a href="">Meat</a></li>
<li><a href="">Fish</a></li>
<li><a href="">Vegetarian</a></li>
</ul>
</li>
<li><a href="#">Desserts</a>
<ul>
<li><a href="">Fruit</a></li>
<li><a href="">Puddings</a></li>
<li><a href="">Ice Creams</a></li>
</ul>
</li>
</ul>
</body>
</html>

And here are the style rules to implement this effect:

body {
font: 1em Verdana, Arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 1em 0 0 1em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font-size: 80%;
margin-right: 1em;
}
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
padding-left: 1em;
color: #2D486C;
}
* html #nav a {
width: 100%;
}
#nav ul {
display: none;
position: absolute;
padding: 0;
}
#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}
#nav li:hover ul {
display: block;
}

Discussion

Though this attractive and easy effect will not work in Internet Explorer 6, it is supported by several other, newer browsers. This solution allows you to create a drop-down menu without using any JavaScript at all. The technique is based on the Suckerfish Dropdowns solution detailed on A List Apart.

The menus themselves are based on simple unordered lists. The top-level menu items consist of one main list; the items that fall under each main item are contained in nested lists:

<ul id="nav">
<li><a href="#">Starters</a>
<ul>
<li><a href="">Fish</a></li>
<li><a href="">Fruit</a></li>
<li><a href="">Soups</a></li>
</ul>
</li>
&#8942;

As you can see in Figure 20, when styles aren’t applied to the menu, the page displays as a logically structured, unordered list with subsections that are easy to spot.

Displaying lists logically in browsers that don’t support CSS (click to view image)

To begin with, we style the top-level menu, removing its list style. We also float the list items to the left so that they stack horizontally. The list items are given a position value of relative so that we can position our fly-out menus within them later on:

#nav, #nav ul {
⋮
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
⋮
margin-right: 1em;
}

We coerce the links in the menu to display as blocks, so they fill the rectangular areas defined by the menu items. Internet Explorer 6 (and earlier) doesn’t recognize this; however, setting the width of each link to 100% ensures that our clickable region expands to fill the containing block.

#nav a:link, #nav a:visited {
display: block;
⋮
}
* html #nav a {
width: 100%;
}

Next, we style the nested lists that constitute our fly-out menus so that, by default, they are not displayed (display: none). We do, however, specify that absolute positioning is to be used when they are displayed, so that they don’t affect the flow of the rest of the document:

#nav ul {
display: none;
position: absolute;
⋮
}

To prevent our fly-out menu list items from being floated horizontally the way the main menu items are, we need to set their float property to none:

#nav ul li {
float: none;
⋮
}

Finally, we use the :hover pseudo-class to display the fly-out menu within any main menu item when the cursor is moved over it:

#nav li:hover ul {
display: block;
}

With these basic CSS rules in place, the menus display as shown in Figure 21.

Altering the menu display with the addition of basic CSS (click to view image)

This code initially sets the nested lists to display: none. When the user hovers the cursor over a main menu list item, the property of the nested list within that list item is set to display: block, and the menu appears. However, this approach doesn’t work in Internet Explorer, as in that browser the :hover pseudo-class works only on links — not on any other element.

The rest of the CSS simply applies visual styles to make the menus look good.

Falling Between the Cracks
When a fly-out menu opens, the user must move the cursor down to the fly-out menu items to select one. If, in this motion, the cursor moves outside of the list item that opened the fly-out menu, the menu will close immediately, as the :hover pseudo-class will no longer be in effect.

Looking at the style rules for this page, you can see that we use absolute positioning to display the nested list over the top of the rest of the page content without disturbing it.

In theory, we should be able to leave a little space between the top-level menu item and the fly-out menu simply by adding margin to the top of the list; however, in Internet Explorer 7 the fly-out menu will disappear if the cursor passes over a margin area, rendering the menu unusable. Instead, I’ve created the effect by applying a white border to the top of the menu.

I’ve also added a very small margin to the top of each list item, and a negative margin of the same amount to the bottom. This has the effect of shifting our menu down by one pixel — just enough to ensure that our white border doesn’t cover up the bottom of our top-level menu item.

#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}

Accessibility Concerns
When you’re using any drop-down menu — with or without JavaScript — make sure that users who don’t see the full effect of the menus are still able to move around your site.

In the case of this example, users who don’t have CSS support will see the expanded nested lists, and will be able to navigate through the site. Anyone who uses a browser that doesn’t support the display of the submenus, such as Internet Explorer 6, will still be able to navigate so long as the pages to which the top-level menu items link contain links to all the pages in that section’s submenu.

Any menu system that prevents users whose browsers don’t support it from navigating the site is bad news.

Summary

This chapter has discussed a range of different ways in which we can create navigation using structurally sound markup, and provided examples that can be used as starting points for your own experiments.

On existing sites where a full redesign is not possible, introducing a CSS-based navigation system can be a good way to improve the site’s accessibility and load speed without affecting its look and feel in a big way.

Where to next? Download this article in PDF format, and you’ll also receive two other chapters:

• Chapter 3, CSS and Images, which demonstrates the basics of working with images and answers common image-related questions
• Chapter 8, Accessibility and Alternative Devices, which moves through the basics of separating content from presentation before dealing with questions of alternative style sheets and addressing users’ particular accessibility needs

And don’t forget to check out the Table of Contents for more on what’s in The CSS Anthology: 101 Essential Tips, Tricks and Hacks.

At the end of May this year, the Facebook team announced major changes to the package’s developer tools, known as the Facebook Platform. Although the platform itself had been available for several months prior to this release, a host of new features were announced at f8, the Facebook developer event in San Francisco. This launch generated a lot of press coverage — from the Wall Street Journal to TechCrunch. But the important question is: why should you care?

The face of Facebook (click to view image)

According to Alexa, Facebook is one of the top 20 sites on the Web, and it has some impressive statistics:

• The site’s growth is around 3% per week, which equates to 100,000 new users per day.
• 50% of registered users visit the site every day.
• The site attracts more traffic than eBay: 40 billion page views per month, which equates to an average of 50 pages per user, per day.

Just looking at these statistics should start you thinking about the ways in which you can leverage this level of traffic to benefit your own web site. If you could tap into the Facebook userbase, you could very easily and quickly increase the audience’s awareness of your brand, product, service, or web site.

Let’s consider a real-world example. I’m currently working on welovelocal.com, a UK directory that allows its users to find and review businesses. While this isn’t necessarily a new idea, the site adds a social element whereby users can view reviews from their friends to find out about businesses that other users with similar interests are reviewing. And by leveraging Facebook, a site like this can significantly increase its exposure to a given user’s network of friends.

For example, if Stacy, a welovelocal user, writes a review about a restaurant, that review will be published to Stacy’s Facebook news feed. All of Stacy’s friends on Facebook will be able to see that she’s written a new review, and can click through to welovelocal to read it.

Can you see the potential?

You can work with the Facebook Platform in many ways, including creating apps that exist just within Facebook itself. However, I feel that the greatest potential lies with integrating Facebook into an existing site, and that’s what I’ll cover in this article.

The news feed is perhaps the most important element of the platform, as it adds a real viral element to any kind of notification you send out — being able to reach the entire network of friends for any of your users is certainly a great feature. But there are many other avenues by which content can be communicated to users. For example, you can:

• Add a link to your own site from the left-hand menu bar of a user’s Facebook profile page, as shown below.

A link has been added to a Facebook sidebar (click to view image)

• Add to a user’s profile a content box that contains whatever content you like. With welovelocal, we use this to display the user’s latest five reviews, complete with ratings and links back to the actual reviews on our site, as shown here.

A content box displaying a user’s last five reviews (click to view image)

• Send requests to users to perform certain actions. For example, you could retrieve a list of your users’ friends, and send a request to all of them to add your app to their Facebook profiles.
• Upload photos, create albums, get photos, and manage photos within Facebook. One use for this might be to access the photos a user has added to their Facebook account and pull them into your site, or to push photos that have been uploaded to your site back to Facebook.

How Do I Use It?

In this article, we’ll walk through the basics of using the Facebook platform using PHP 5. If you’re interested in integrating your site with Facebook using another language, there is plenty of information on the Facebook developers’ wiki:

• ASP.NET
• ASP(VBScript)
• ColdFusion
• C++
• C#
• Java
• Perl
• PHP
• Python
• Ruby on Rails
• VB.NET

I was fortunate (or unfortunate) to develop the welovelocal application prior to the official platform release in May. This meant that I had to write my own code to call the functions. There is an official PHP 5 library as well as an unofficial PHP 4 version (see the PHP link above) that you can probably use to get up and running more quickly and easily than I did. However, in order to gain a proper understanding of how the platform works, it’s worth looking at the raw interactions that take place.

First Steps

You must register for an API key before you can access the Facebook Platform. To do this, you’ll need to sign up for a Facebook account, then add the “Developer” application to your Facebook account. You can do so by following the very simple instructions at www.facebook.com/developers. Once it’s added, you’ll find that the Developer application is very much like a normal Facebook group, but it has an additional link near the top of the page called “My Applications” which, when clicked, will display a list of all the Facebook applications that you have registered.

Once you’ve registered, you need to generate a key. Click the Apply for another key link and you’ll be walked through the process of creating a Facebook application. There are a number of fields that you can provide optional information to, all of which are explained in the quick start guide on the Facebook Developers site.

Your application is actually now ready to be used, although it won’t do anything! Depending on what you want your application to do, your users may need to perform a number of steps to install your app into their Facebook accounts. The process usually consists of them clicking an Install link, then confirming the request, as shown here.

Adding an application to a Facebook account (click to view image)

Once the application is added, it will appear in the user’s news feed and on their mini-feed, both of which are viewable by all their friends — your first bit of free publicity!

Authentication

Your application is ready to be used, but of course you’ll want to provide some content for your user. The two most important features for web site owners are:

• the ability to publish items to the news feed
• the ability to add a profile box

Before you can use either of these pieces of functionality, you need to authenticate the current user with the Facebook platform.

Each call to the Facebook Platform API requires a session key that identifies the user who’s logged in and is using the system. To obtain this key, you must make a call to the Facebook API that redirects the user to log in to the Facebook web site and authorize the request.

One hurdle here is that this authorization provides a session key that only lasts for a certain period of time — around 24 hours. A key that didn’t expire would be much more useful. Fortunately, we can obtain such a key by following these two steps, which I’ll explain in more detail in a moment:

1. First, ask the user to authorize your application so that it can access the user’s account on Facebook. This returns auth token 1, which generates a session key that expires after 24 hours.
2. Then, ask the user to generate auth token 2, which they should then paste into a form on your web site. With this token in place, you’ll be able to generate a session key that never expires.

Once you have the final token, you can request a permanent session key by calling the facebook.auth.getSession function.

But first, allow me to elaborate on those two steps.

Step 1 - Obtaining Auth Token 1

From your web site, direct your user to Facebook using a URL appended with your API key, like this: www.facebook.com/login.php?api_key=APIKEY (where APIKEY should be replaced with your own API key). If the user is not currently logged in, they’ll be asked to do so.

The user will then be asked to accept any terms of service you set, and will be redirected to the callback URL that you specified when creating the application. This can be changed by editing your application through the Developer link in Facebook’s sidebar.

With the redirect in place, Facebook will append ?auth_token=TOKEN to the URL, using an actual authentication token. You can use this token with the facebook.auth.getSession function; it’s available as a GET variable in PHP.

However, because we want to get an infinite session, that auth token is actually irrelevant — we need to get another token that we can use to get a permanent session key. If we were not interested in an infinite session, this is where we would stop. We could use the auth token with the facebook.auth.getSession function below.

Step 2 - Obtaining Auth Token 2

Once your user has returned to your site after logging into Facebook, you’ll need to send them to www.facebook.com/code_gen.php?api_key=APIKEY. Back on the Facebook site, the user will be asked to generate a token that will be displayed to them. They must then copy and paste it into a form on your web site — it’s not passed through via GET/POST. It’s up to you to create a form that accepts this token from your user.

Once the user has submitted this second token to your site, you’ll need to call the facebook.auth.getSession function, passing the token as a parameter. This will finally return a session key that you can use continuously to authenticate that user; this key could, for example, be stored in the database alongside the user’s account for easy retrieval in the future.

It’s important to note that, should the user delete your application from their Facebook account, they’ll need to repeat this authentication process in order to use your Facebook application. You should therefore provide the option for the user to reset their Facebook integration and set it up again. If you’re storing the user’s session key in the database, this task would simply involve deleting that session key and taking the user through the two-step authentication process above.

Calling facebook.auth.getSession

Now that you have an authentication token, you’ll need to get yourself a session key for the current user. This key is passed to every other Facebook API call, to identify the user upon which your application is conducting an action.

Because we’re not using a library provided by Facebook, we’ll need to manually construct the HTTP query that we’ll send to Facebook, and write some code to process the response. With every call, you must provide three required values, as described on the Facebook web site:

• method - The first parameter is the method name. The method must be one of those exposed by the API documentation, or the API will return error code 3 (with message Unknown method).
• api_key - The vendor-specific API key corresponding to the site making the API call. This is the same key that we used in the login request, as provided to you when you registered your application.
• sig - The signature for the method call.

The signature is generated as described by this pseudocode:

args = array of args to the request, formatted in arg=val pairs
sorted_array = alphabetically_sort_array_by_keys(args);
request_str = concatenate_in_order(sorted_array);
signature = md5(concatenate(request_str, secret))

Rather than having to do this manually every time you need to perform an HTTP query, I’ve written a short do_facebook_request() function that is available for download. This takes the optional parameters that are to be sent for a specific API function, as well as the name of that function. It constructs and sends the request, then returns the result:

do_facebook_request.php
<?php
/**
* Sends an API request to Facebook
*
* @param array $parameters Array of parameters to send
* @param string $method The API function to call
* @return array Returns array of data returned
*/
function do_facebook_request($parameters, $method)
{
if (empty($parameters) || empty($method))
{
return false;
}

// Build Facebook args
// http://developers.f8.facebook.com/documentation.php?v=1.0&doc=auth
$data['api_key'] = 'API KEY';
$data['method'] = $method;
$data['v'] = '1.0';

// Loop through and set as array
foreach ($parameters as $key => $value)
{
$data[$key] = $value;
}

// Sort
ksort($data);

$args = '';

foreach ($data as $key => $value)
{
$args .= $key.'='.$value;
}

$data['sig'] = md5($args.'secret');

// Get a Facebook session
$response = do_post_request('http://api.facebook.com/restserver.php', $data);

// Handle XML
$xml = simplexml_load_string($response);

return $xml;
}

/**
* Sends a POST request with necessary parameters
* Code based on http://netevil.org/node.php?nid=937
* We use HTTP here. See http://uk2.php.net/manual/en/wrappers.http.php
*
* @param string $url The URL to perform the POST on. Include http://
* @param array $data The data to POST in array format
* @param array $optional_headers Any HTTP headers. See http://www.php.net/manual/sv/function.header.php or http://www.faqs.org/rfcs/rfc2616
* @param string $method The method for the request. Defaults to POST
* @return string The response
*/
function do_post_request($url, $data, $optional_headers = NULL, $method = ‘POST’)
{
// Just defining some parameters for the request here
// See http://uk2.php.net/manual/en/wrappers.http.php#AEN268663 for additional context options
$params = array(’http’ => array(’method’ => $method, ‘content’ => http_build_query($data)));

if ($optional_headers !== NULL) // Add in any additional headers
{
$params[’http’][’header’] = $optional_headers;
}

// Makes it easier to add additional parameters such
// as any optional HTTP headers as set above
$context = stream_context_create($params);

$fp = @fopen($url, ‘rb’, false, $context);

if (!$fp)
{
return false;
}

$response = @stream_get_contents($fp);

if ($response === false)
{
fclose($fp);
return false;
}

fclose($fp);

return $response;
}
?>

The code is part of a class I wrote for the welovelocal application, and is based on the code provided in Wez Furlong’s blog. You’ll need to replace the API_KEY on line 20 with your own key, as well as the secret on line 40 to generate the signature. The secret is a string generated by Facebook, and is displayed underneath your API key on the My Applications section of the Developer application within Facebook.
Here’s an example in which we’re calling the do_facebook_request function:

$xml = do_facebook_request(array('auth_token' => $token), 'facebook.auth.getSession');

After the request has been processed, the $xml variable will contain something that looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<auth_getSession_response xmlns="http://api.facebook.com/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd">
<session_key>5f34e11bfb97c762e439e6a5-8055</session_key>
<uid>8055</uid>
<expires></expires>
</auth_getSession_response>

This is the session_key that you can store and use for all subsequent requests. See the auth.getSession documentation for detailed information.

The User Profile Box

Displaying contributed content as part of users’ profiles is a great way for users to show off the work they’ve done on your web site. With welovelocal, we let people list their latest reviews on their profile, so that their friends can read what they’ve been writing. This concept could be extended for photos, news articles, game high scores — almost anything, really.

Facebook uses its own subset of the HTML language to allow you to put rich content in a user’s profile without opening security issues or destroying the layout of a site. This markup language is called FBML — Facebook Markup Language — and is well documented on the Facebook developer web site.

Pushing the content to a profile is very simple — you generate the FBML within your code, then send it to the API, which makes the content live. The function is called facebook.profile.setFBML and requires you to provide both the session key we obtained earlier and the actual FBML you want to display.

Creating FBML is very straightforward and is well explained in the official documentation, so I won’t go into any detail here. You can use the FBML test console to see a preview of what the output will look like.

Once you’ve written the FBML, you can use the do_facebook_request() function to send it to Facebook’s API:

$xml = do_facebook_request(array('session_id' => 'idhere', 'call_id' => microtime(), 'markup' => $markup), 'facebook.profile.setFBML');

You’ll notice a call_id as the final parameter that we passed to the do_facebook_request function. This is a unique ID for the request. Facebook recommends that you use the current time in milliseconds, which is available via the microtime() function.

And that’s it — the profile content will appear immediately!

News Feeds

The news feed in Facebook is a summary of everything that’s going on with your friends — it’s something of a history of their interactions with the site. Through a friend’s news feed, you can:

• find out what they’re doing with status updates (like Twitter)
• learn who they’ve become friends with
• see when they’ve updated their profiles

… as well as almost anything else that happens to them on Facebook. I’m sure you’ll agree that being able to post items to all of a user’s friends is a great way to publicize activity that’s occurring on your own web site.

You can publish a news item to the feed of a single user, or to the feeds of all the friends of a specific user. Next up, we’re going to look at the latter task — using the feed.publishActionOfUser function — as this is the most useful for notifying people about things that are happening on your own site.

While the feed.publishActionOfUser function allows you to send up to four images (which is ideal for sites that use graphical content), to keep things simple, I’ll keep this example to the simple task of sending text.

When sending a news item you must specify a title (max. 40 characters), but you can also optionally provide body text. The title will be displayed in bold, and the body text in regular paragraph styling. The body text is usually used to elaborate on the details contained in the title.

Facebook allows the use of certain tags in the title and body. These tags allow you to display context-sensitive information, such as the name of the user and a link to the profile. So, if I were to send the following request to post information to my friends:

<fb:userlink uid="profileowner"/> wrote a new review.

It would show up as:

David Mytton (Network Name) wrote a new review.My name would be linked to my Facebook profile, and the Network Name would be replaced with the network through which the person viewing the news feed knows me (for example, university name, club name, or the like).

To prevent spamming, Facebook imposes limits on the number of times you can send out news items. This is explained in detail in the developer documentation.

As we saw earlier, you can also use the do_facebook_request function to send out a news feed, like so:

$params['call_id'] = microtime();
$params['session_id'] = 'idhere';
$params['title'] = '<fb:userlink uid="profileowner"/> wrote a new review';
$params['body'] = '<a href="http://www.welovelocal.com/business/'.$business['url_company'].'/#r'.$review_id.'">Read the full review...</a>';
do_facebook_request($params, 'facebook.feed.publishActionOfUser');

Spreading your Wings

We’ve touched on just a few of the key Facebook Platform functions in this article, but there are plenty of other features that you could utilize to push more content out to Facebook.

User Data - Documentation

Once you’ve authenticated the user, you can grab almost all of their profile data (though the data available may be limited depending on their privacy settings). Of course, one should use this data responsibly — one approach that comes to mind is to use it to pre-populate a lot of the fields on your own site, to save the user having to enter the same data twice.

Events - Documentation

As any given user tends to connect with many friends on Facebook, the site is often used to organize social events. The Facebook API allows you to tap into this and return a list of all the events that a user can see, based on certain criteria. The criteria by which you can filter this data include start and end dates, and whether the user has indicated that they will attend the event.

You could use this feature to present a calendar to your users, so that they can plan other events around other commitments they have in place with their friends.

Groups - Documentation

Similar to the ways in which you can use events data, you can use the Facebook API to find out which groups a user belongs to, and retrieve a list of members of those groups. This could be useful to combine with the notifications API, for example, to send requests to all users in a group to join your web site. Of course, this approach could be seen as spamming, so you would definitely need to ensure that the content you broadcast is relevant.

Photo Uploads - Documentation

Facebook has over 60 million photos uploaded every week, and 160TB of photo storage is currently available, which makes it an extremely popular way to share photos. Using the API, you can:

• create a new album to store photos
• retrieve a list of the existing albums, to choose which one to upload photos to
• upload photos to the site
• retrieve photos from a specific album, or from all photos across the entire site to which the current user has access

This means that you could present a user with a list of their Facebook photos, and provide them with the ability to display them on your own site. They could also do the reverse: copy photos from your site to Facebook, thereby allowing all their friends to see them.

Summary

This article looked at some of the ways in which you can integrate your web site with Facebook. Whether you choose to utilize only one small aspect of the Web’s fastest growing community, or embrace it with open arms, the Facebook API is a powerful tool both to enhance the experience for existing users, and to attract new users by driving traffic to your site