Not only has a very public (and contentious) debate unfolded on the web about the efficacy of presenting videos using HTML5 instead of Flash, but momentum is gathering behind the nascent web standard.

From giant video sites like YouTube to Wikipedia, everyone it seems wants to get their video out of Flash and into native web formats. With Microsoft recently announcing it will support the HTML5 video tag in the coming Internet Explorer 9, expect even more sites to abandon Flash for native video.

So, you want in on the fun? Do you want to use some HTML5 video tags on your site right now? No problem. Fasten your seat belts, as we’re about to take a tour of the wonderful world of HTML5 video.

Browser Support for HTML5

First, let’s deal with some very basic stuff, like where this will work and where it won’t. As you can see in the table below, only the latest versions of most browsers support native video playback using HTML5′s <video> tag.

Since Firefox 3.0 and IE 7 & 8 lack any support for HTML5 video, you’ll have to come up with a fallback plan for serving video to those users. Depending on what you want to do you, could fallback first to Quicktime and then, failing that, to Flash. That’s the strategy used in Video for Everyone (note that as of v0.4, Video for everyone no longer falls back to QuickTime).

To keep things simple we’re just going to fall straight from HTML5 to Flash.

Formats, Codecs and Technicalities

The next thing you need to understand is what is actually happening when you load and play a video file in your web browser. You’re probably used to thinking of video as .mp4 or .mov files, but unfortunately it’s not that simple. The actual file formats are just containers. Think of them as a bit like a .zip file — they hold other stuff inside.

Each container holds at minimum one video track and, most likely, one audio track. When you watch a movie online, your video player (most likely Flash) decodes both the audio and video and sends the information to your screen and speakers.

Why does this matter? Well, because the process of decoding what’s inside the video container file varies. To know how to decode a movie, the player (which is your web browser in the case of HTML5 video) has to know which codec the movie was encoded with.

When it comes to web video there are two codecs to worry about: H.264 and Theora.

There’s a huge debate right now among web developers, browser makers and just about everyone else as to which codec is right for the web. We believe that a free, open codec without patent and licensing restrictions is the best solution for the web. Sadly, neither codec exactly fulfills that dream, so for now, let’s just skip the whole argument and be practical — we’re going to use both codecs.

Why? Well, have a look at the table below, which shows which codecs work where and you’ll quickly see that there is no one-size-fits-all-browsers solution. Only Google Chrome can play both H.264 and Theora.

So, you may be thinking … if HTML5 video doesn’t work in IE7 or IE8 and it means I’m going to have to encode my videos twice, then why bother at all? Well, the best answer is simple: mobile users. If you want iPhone and Android users to be able to see your video, HTML5 is the only way to do it — Flash support is coming to Android sooner or later but for now HTML5 is the only option, and we all know Flash doesn’t run on the iPhone or the iPad.

The HTML5 Code

Here’s how to actually embed your videos. First, we encode video in both .ogv and .mp4 containers. Encoding video is beyond the scope of this article, so instead we suggest you check out Mark Pilgrim’s online book Dive Into HTML5, which has a whole chapter devoted to understanding video encoding. Pilgrim’s encoding suggestions use free software to get the job done, and in the end you’ll have two files — one .mp4 and one .ogv.

Now it’s time to unleash those movies in pure HTML glory. Here’s the code:

<video width="560" height="340" controls>
  <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Yes, that’s it. What we’ve done here is use the <video> tag to specify the dimensions of our video, and to denote that we want to use the browser’s default controls. Then, within the video tag, we’ve added two <source> elements which link to our video files.

The “type” attribute of the <source> tag helps the browser understand which file it should load. It’s a bit of an ugly chunk of code that needs to specify the container format, the video codec and the audio codec.

In this case we’ve assumed standard .ogv and baseline encoded H.264 video as per Pilgrim’s tutorial. See the WHATWG wiki for more information on which video types you can specify.

And there you have it — native web video, no plugins required.

Dealing With Everyone Else

What about IE7, IE8 and older versions of just about any other browser? Well, for those users, we’ll fall back on Flash. To do that, we just use an <embed> tag within our video tag:

<video width="560" height="340" controls>
  <source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <object width="640" height="384" type="application/x-shockwave-flash"
		data="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4">
		<param name="movie" value="path/to/swf/player.swf?image=placeholder.jpg&file=path/to/myvideo.mp4" />
	</object>
</video>

Now any browser that doesn’t understand the HTML5 video tag will just continue on its way until it hits the object tag, which it should understand (note that the order, mp4 before ogv, is important for iPad support — Apple requires that mp4 be the first video file).

Of course for this to work you need a Flash video container. JW Player is one popular example, or you can roll your own using Adobe’s tools. Also remember that we still haven’t handled the case of an older version of Firefox with no Flash plugin installed (maybe your users are surfing your tubes with an outdated Linux machine). You can always add good old text-based links to the video files as a catch-all fix for anyone who can’t, for whatever reason, see either the HTML5 or Flash versions.

Conclusion

Embedding HTML5 video isn’t significantly more difficult than using Flash, especially if you’ve been using H.264 video files in your Flash player — which is exactly what YouTube has done with its HTML5 beta.

While we’re concerned about the licensing and patent requirements of H.264, it isn’t hard to notice that if you skip Theora and make all non-H.264 fall back to Flash, you’ve still saved yourself a considerable encoding headache. In fact, that’s probably the best practical argument against Mozilla and Opera’s refusal to support H.264.

If you’d like to use some of the more advanced aspects of HTML5 video, be sure to check the SublimeVideo player, which offers very nice JavaScript-powered set of custom controls. Also be sure to have a look at Video for Everybody, which makes for more complex code but handles just about every use case you could imagine. And there’s a handy Video for Everybody WordPress plugin as well.

See Also:

• Building Web Pages With HTML5
• Add Semantic Value to Your Pages With HTML5
• Who Needs Flash?

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing site Flickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.

What is Ajax?

So what is this fancy object that everybody wants a piece of? In brief, it’s a solution to one of the big annoyances of web interfaces. Generally, the user inputs some data or makes a choice, and clicks a button that sends the data to the server. The server takes a look at the data and sends back a whole new web page, which is loaded into the browser. Reloading a page every time you want to do something is annoying, disjunctive and time-consuming for the user. XMLHttpRequest moves that browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! Go take a look at Google Suggest if I’ve lost you — it’s a nice, eloquent example of this.

JavaScript has always been able to sneakily trigger a server-side script without anything happening in the browser by using a few classic tricks. This one, for example:onSubmit='runascript = new Image(); runascript.src="http://www.wired.com/images/archiveyscript.php?" + this.value'. That sort of chicanery is good, maybe, for caching form data to a file on the server, but it doesn’t return any information to the JavaScript that calls it, so its usefulness is limited. Ajax, on the other hand, can get a full parcel of data back from the script it calls. Hence the “XML” part of the name – which really is just there for looks, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML is overkill or just not your cup of tea.

This opens up millions of exciting possibilities. Every form submission, every JavaScript event, and heaven knows what else, can now interact with server-side databases and processing power. Data retrieval, password authentication, image generation – you name it, Ajax can trigger it.

Making Your Own

The potential of Ajax-enhanced web apps is limited only by your imagination – and by browser support. Mozilla-based browsers can do it, and Safari, and newer versions of Explorer, and Opera 8 but not Opera 7. It’s best to incorporate a fallback way of doing things for users who aren’t as cutting edge as you’d like them to be. Also, Explorer does things somewhat differently (of course) from all the other browsers, so it’s necessary to fork the code to account for the irritating little 80-odd percent of the population who use IE.

Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts. First, we need an HTML form. This you’ve seen before:

<html>

 <head>

 <title>Report</title>

 <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post">



 <p>Welcome, student. Please enter your essay here:<textarea name="essay" id="essay">

 </textarea> <input type="submit" name="submit" value="Submit" onClick="return

 grade(this.form.essay.value);">

 </p>

 </form>

 </body>



 </html>

Note that, for users without support for our script (named xhr.js), the form will just submit to the fallback page at fallbackpage.php.

Next comes the JavaScript. This is the exciting part, so we’ll take it slow.

 function grade(essay) {

 

First, we initialize the object. We have to do it two ways, for different browsers.

    // Mozilla version

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();

    }

    // IE version

    else if (window.ActiveXObject) {

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

 

Then, we escape the user input to make it URL-safe:

    essay=encodeURIComponent(essay);

 

and use the open method of the object to open a connection to the PHP script:

    xhr.open("POST","grade.php");

 

The method requires two arguments:first, the HTTP method (GET or POST); second, the URL of the script.

A quick HTTP header prepares the script for what it’s getting, and then the send method transmits the actual request:

 xhr.setRequestHeader(

      'Content-Type',

      'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay); 

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL.

Getting Results

Now we’re ready to see if the HTTP request worked. The readyState property counts up from zero during the request, and shows 4 when the server page has loaded successfully.

 xhr.onreadystatechange=function() {

      if (xhr.readyState==4) {

 

If the request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. For more complex server script output, a responseXML property, which can hold a full document object of XML data, is also available.

      grade = xhr.responseText;

      alert ("Nice essay. Your grade is " + grade);

    }

    return false;

 }

 

Want to see all that in a pastable block? Here it is in a separate file.

Finally, the third component is the PHP script, which lives on the server and waits patiently for the JavaScript to pass it some juicy data. This example uses PHP, but any language you like — Ruby, Perl, C, ASP — can do as well. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space.

 <?php

 function grade_essay($essay) {

      return strlen($essay);

 }

 $essay = urldecode(implode(file('php://input')));

 $grade = grade_essay($essay);

 echo $grade;

 ?>



 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the ingenious grading algorithm. The algorithm returns a numeric grade. Lastly, we just output the grade with echo – ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page must be set to text/xml.

What the user sees is this:She types her essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving her a final grade on the essay. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP gnomes, and returned with a grade, without ever reloading the page. The user can modify her essay and resubmit it endlessly.

And that’s the gist of the almost magical XMLHttpRequest object! The example is simple, but the uses of the object can be elaborately, multifariously clever. If you need further inspiration and edification, a burgeoning number of examples are dotted around the Web:

• Ajax-powered start pages like iGoogle, Pageflakes and Netvibes

• Social news site Digg

• Movie rentals site Netflix

But what data you send and receive with Ajax is up to you.

Lesson 2 of our stylesheets tutorial was all about fonts and controlling text. This lesson is about how those words and lines can be spaced relative to one another. These stylesheets properties give us power over the space between words and letters, the leading (vertical spacing) between lines of text, and the alignment of text, margins and padding, borders, and floating elements.

Here’s what we’ll be covering:

• word-spacing
• letter-spacing
• line-height
• text-align
• vertical-align
• text-indent
• margin-top, margin-left, etc.
• padding-top, padding-left, etc.
• border-width, border-color, border-style, etc.
• float
• clear

Obviously we have a lot to do in this lesson, so we’re going to speed up a bit. Let’s go!

Spacing Words and Letters

First up is a pair of properties that enables you to do things you can’t do with HTML tags:control the spacing between words and the spacing between individual characters.

word-spacing

With the word-spacing property, you can add additional space between words:

H3 { word-spacing:1em }

The value you specify will be added to whatever default value the browser already uses. You can use any of the length units we talked about in Lesson 2 when looking at font-size:

• in (inches)
• cm (centimeters)
• mm (millimeters)
• pt (points)
• pc (picas)
• em (ems)
• ex (x-height)
• px (pixels)

Here’s word-spacing in action:

Behold the power of cheese.

Don’t see anything different? That’s probably because your browser doesn’t support this property. Only the Mac version of IE 4 likes word-spacing.

letter-spacing

We have better luck with letter-spacing, which affects the kerning between characters and works in IE 4 and 5 (but not in Communicator, alas).

H3 { letter-spacing:10px } 

The functionality is similar to word-spacing:Values are added to the default browser spacing. And you can use any of the same units listed above.

If you’re using IE 4 or 5, here’s an example:

Behold the power of cheese.

For both of these properties, you can also use a value of normal, which will ensure that the default browser spacing is used instead of any inherited word or letter spacing.

Don’t be too discouraged! There are a lot of stylesheets properties that do work in both of the major browsers. One example is coming up next.

Spacing Between Lines

The common term for the spacing between lines is leading. The common term that Web designers scream when they find out they can now control leading is, “Wheee!”

line-height

line-height is a godsend. With it, we can achieve control over the vertical spacing between lines of text:

B { line-height:16pt }  

Whatever value you use is the amount of space between the baselines of two adjacent lines of text (the baseline is what characters without descenders — “x” but not “y,” for example – sit on). Note that your value totally replaces the default browser value.

Netscape Communicator and Internet Explorer add the line-height value before the line. Thus, if you specify a value of 10px, then the browsers will display the first line of text 10 pixels down.

There are three different ways to give a value to line-height:

• by number,
• by length unit, and
• by percentage.

Leading by Number

B { font-size:12pt; line-height:2 }  

When you specify line-height with a number, the browser uses font-size to obtain the leading:It multiplies font-size by the number. So in this example, the line-height is 24 points, like so:

Four score and seven years ago, the Web wasn’t yet a glimmer in anyone’s eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

By the way, you can also use nonintegers (such as 2.3) as values.

(You should know that IE 3 doesn’t support number values. More often than not, using number values with IE 3 will result in a big mess of overlapping text.)

Leading by Length Unit

B { font-size:12pt; line-height:11pt } 

Another way to define line-height is by using any of the length units we reviewed on the previous page (em and pt are most commonly used). Here’s the above stylesheet rule in action:

Four score and seven years ago, the Web wasn’t yet a glimmer in anyone’s eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?

Note that you can make lines of text closer together just as easily as you can separate them. It’s easy with stylesheets!

Leading by Percentage

B { font-size:10pt; line-height:140% }  

If you want yet another way to use line-height, try percentage values. In the above example, the leading is 140 percent of 10 points or 14 points. You get the idea. </tt>

Overlapping Text

You might have already asked yourself this question:What happens when line-height is so small that the lines of text overlap?

Well, they overlap, that’s what. Check out this code:

B { font-size:28pt; line-height:2pt }  

Here’s what you get:

Whoa
Cool.

“Whoa” uses the browser’s default line-height, but “Cool” has so little line-height that it lies on top of the first line.

(Communicator and Internet Explorer interpret line-height differently. In Communicator, the text above is overlapped quite a bit. In IE 5, it’s not overlapped at all.)

If you want to overlap elements on your page, line-height isn’t the best way to do it because of browser inconsistencies. In Lesson 5, we’ll look at the best ways to layer text, images, and so on.

Now that we can control the spacing of lines of text, let’s move on and talk about the alignment of entire paragraphs.

Aligning and Indenting Text

The following attributes deal with aligning text and images and adding indentation.

text-align

With the text-align property, you can control the horizontal alignment of paragraphs:

H4 { text-align:center } 

This property works only on block-level elements, which are tags that define new paragraphs on their own, such as  P>,  H1>- H6>,  BLOCKQUOTE>, and <UL>.

Here are your options:

A value of left means the element will be left-aligned.

A value of right means the element will be right-aligned.

A value of center means the element will be centered.

And finally, a value of justify means the element will be justified. This is difficult to see without multiple lines of text, so I’ll add some text here. Note that justify works in Communicator (both platforms) and IE 4 and 5 (Windows) but not in IE 3 or 4 (Mac).

Until now, we’ve been talking only about applying stylesheets to text. But many properties can also be used on replaced elements. (A replaced element is any object that is replaced by other content. Graphics are the most common replaced elements, but Java applets and QuickTime movies are also frequently replaced.)

So we can also right-align an image, like so:

(Communicator sometimes doesn’t like it if you apply CSS properties directly to the <img> tag. A work-around is to surround <img> with  SPAN> or <DIV> and then apply the stylesheet to the <SPAN> or <DIV> tag instead. <DIV> is better, because IE for Windows sometimes has problems associating a style with <SPAN>.)

vertical-align

Let me say right off the bat that browser support for vertical-align is almost zero. But I will state the basics here, in the hope that later browsers will support it.

H4 { vertical-align:top }

The vertical-align attribute enables you to control the vertical placement of text or replaced elements (e.g., images) relative to a parent element. For example, if you vertical-align as top a 2-by-2-pixel GIF and its parent is <H1> text, then that GIF will appear at the top of that line of text.

Here are all the possible values for vertical-align:

• top aligns the top of the element with the tallest parent element on the line.
• bottom aligns the bottom of the element with the lowest parent element on the line.
• text-top aligns the top of the element with the top of the font of the parent element.
• text-bottom aligns the bottom of the element with the bottom of the font of the parent element.
• baseline aligns the baseline of the element with the baseline of the parent element.
• middle aligns the midpoint of the element with the middle of the parent element.
• sub puts the element in subscript.
• super puts the element in superscript.

The only current browser support for any of this comes from IE 4 and 5, which support the last two values. That’s it for now.

text-indent

Want to give a paragraph an indent? (After living on the Internet for a while, you may have forgotten what an indent is!) Use the text-indent property:

P { text-indent:2em }  

Here you can see the above rule applied. The property works only on block-level elements (as defined earlier on this page). You can specify text-indent using any of the familiar length units.</tt>

You can also use percentage values. For example, this paragraph has an indent of 40 percent, which means the first line is indented 40 percent from where it would normally begin. (IE 4 for Windows assumes the percentage refers to the entire browser window, not just the width of the paragraph.)

Finally, if you give your text-indent a negative value, then you get a so-called hanging indent, in which the first line actually begins left of where it normally would. This paragraph has a text-indent of -10 pixels. IE 4 and 5 are a little buggy:They might not display the first few letters.

Use your indenting power well, young Jedi knight.

Indents are nice, but what about genuine margins? You got it.

Margins and Padding

As we know, to make a margin using HTML, you have to use tables. But not any more. Stylesheets to the rescue …

Some Quick Definitions

First, we need to understand the terminology of the stylesheets language. Every single block-level element or replaced element is contained in what the cascading stylesheets creators call a box. That box consists of:

• the element itself,
• the padding around the element,
• the border around the padding, and
• the margin around the border.

An illustration might help:

You can control the padding, border, and margin separately, as we’re about to see.

margin-top, margin-bottom, margin-left, margin-right

These four properties enable you to control the margin around each side of an element, like so:

H4 { margin-top:20px; margin-bottom:5px; margin-left:100px; margin-right:55px }  

As you can see, each margin can be set differently. Or you can choose to set just one margin side and let the browser use its default margin sizes for the other sides. You can apply margins to replaced elements (e.g., graphics) as well as to text.

The most obvious way to set margin values is through the length units we discussed previously:px (pixels), pt (points), and so on. But you can also set margins using percentage values.

Let’s look at a few examples:

• margin-top in action
• margin-bottom in action
• margin-left and margin-right in action

When two margins meet, the browser adds the margins together. Thus, if this paragraph has a margin-bottom of 10 pixels …

… and if this paragraph has a margin-top of 30 pixels, then the paragraphs should be separated by 40 pixels.

Can you overlap elements by using negative margin values? You betcha. Once again, this isn’t the ideal way to layer elements on a page, but it is possible:

Books

are mind food.

Above, “are mind food” has a top margin of -55 pixels and a right margin of 60 pixels.

A big drawback of using negative margins to overlap elements is that browsers handle margin sizes differently. For instance, when displaying the example above, each of the four main 4.0 browsers (Communicator for PC, Communicator for Mac, IE for PC, IE for Mac) overlaps the text a different amount. (Communicator for PC doesn’t overlap the text at all!)

Another drawback is that you can’t completely control what gets layered on top. Again, different browsers behave differently. Communicator, for example, always places graphics on top of text. IE seems to display elements in the order they are loaded into the browser window.

In other words, if you want to layer elements, don’t use negative margins. The Lesson 5 installment of this tutorial will cover how to layer elements.

Here are some other notes about browser support:

• IE 3 will sometimes display extra space when you use ruler units (e.g., inches and centimeters) for margin-bottom. Also, some HTML tags work with margin-bottom, but many don’t.
• IE 4 sometimes has problems giving left margins to replaced elements such as graphics. Try wrapping the image in a <DIV> and styling the <DIV>.

padding-top, padding-bottom, padding-left, padding-right

Padding (the space between the element and its border) works just like margin control. You can define padding size for the top, bottom, left, and right sides of an element.

H4 { padding-top:20px; padding-bottom:5px; padding-left:100px; padding-right:55px } 

Just as with margins, you can use any length units or percentage values. We won’t bother to go into detailed examples, since these properties work so similarly to the margin properties. You should know, however, that you can’t use negative values for padding as you can for margins. (Also, I’m sorry to report that IE 3 doesn’t support the padding properties.)

Now let’s talk about what’s between margins and padding:borders.

Borders

Quite a few different stylesheets properties relate to putting a border around an element on a Web page.

(Red alert! IE 3 doesn’t support any of the border properties discussed on this page — just so you know.)

border-top-width, border-bottom-width, border-left-width, border-right-width

The first thing you can control is the width of the border, and you can control each side separately:

H4 { border-top-width:2px; border-bottom-width:5px; border-left-width:1px; border-right-width:1px }  

Here’s the result of the above CSS rule:

You can apply borders to replaced elements as well as to text elements. Fun, eh?

You don’t necessarily have to define a border for all sides of an element. If you want, you can put a border on just one side, as seen to the left of this paragraph. (In IE 4 and 5, you need to define the other sides as 0 or else the browser will give them its own idea of size.)

For specifying width, you can use any of the same length values we’ve seen before. You can also use some built-in keywords:

The border above this text has a value of thin.

The border above this text has a value of medium.

The border above this text has a value of thick.

Do you want all sides of your border to be the same width? Simply use the shortcut border-width tag. The following stylesheets rule would put an even 1-inch border all the way around the graphic:

img { border-width:1in }

border-color

The second aspect of borders that is under your control is color.

P { border-color:green; border-width:3px }

This paragraph shows the above code in action.

You can use the color names browsers already recognize or, better yet, you can use hexadecimal values, like so:

H4 { border-color:#FF0033; border-width:thick }  

If you want each side of your border to be a different color, you can make it so by listing each color:

P { border-color:#666699 #FF0033 #000000 #FFFF99; border-width:3px }  

The browser uses the first color value for the top side, the second for the right side, the third for the bottom, and the fourth for the left.

This paragraph shows the above code in action.

Note:Communicator doesn’t recognize multiple colors, so you’re stuck with just one. (When multiple colors are used, Communicator often uses blue for the whole border. We have no idea why.)

By the way, if border-color isn’t used, then the border will take on the color of the element itself.

border-style

Finally, you can specify the style of the border line:

P { border-style:double; border-width:3px } 

The possible keywords are:

solid

double

dotted

dashed

groove

ridge

inset

outset

Note:You have to use border-style with IE 4 and 5, or they won’t display any border at all.

IE 4.x for the Mac is the only browser to support dotted and dashed.

Another thing you might notice is that IE gives a border to the entire width of the area, whereas Navigator gives a border only to the word itself.

If you so desire, you can also set border styles individually for each side (though I have no idea why you’d want to do so). As with border-color, you declare the values in this order:top side, right side, bottom side, left side.

And that about does it for borders. We have one more topic to look at in this lesson:floating elements.

Floating Stuff

We’re already used to seeing floating images and tables on Web pages. Simply use the ALIGN=left attribute on an <img> tag, for example, and text will flow around the right side of the floating image. Stylesheets have a somewhat more flexible syntax for floating elements, which is what this page is all about.

(I’m sorry to report that Internet Explorer 3 doesn’t support anything on this page. IE 4 and 5 can be a bit buggy too.)

float

The float property enables you to flow text around an element, including not just images but any block-level text as well.

H4 { float:left }  

If the floating element has too little space around it, you can add padding with one of the properties we discussed earlier in this lesson. (For some reason, using margins seems to cause trouble.)

clear

What if you want to wrap one paragraph around a floating element but make sure the next paragraph doesn’t wrap? Use the clear property, much like you’d use the CLEAR attribute in HTML (for example:CLEAR=right).

P { clear:left }  

Let’s look at a quick example:

This is one paragraph that is wrapping around an image that’s floating left.

This is another paragraph. Without any clear property, it also wraps, as you can see.

And here’s what happens if we use clear

This is one paragraph that is wrapping around an image that’s floating left.

This is another paragraph. Now I’ve set clear:left, so the browser makes sure that the left side is clear of all floating elements before it displays the paragraph.

You can also use values of right and both.

Congrats, you’ve made it through the bulk of Lesson 3. Let’s walk the walk.

Lesson 3 Exercise

Look at this page and try to rebuild it yourself without looking at the code. Remember that you must have at least a 4.0 browser for the examples to work correctly. It uses several of the stylesheets properties we’ve discussed in this lesson (as well as a few from Lesson 2). There’s only one image on the page — the rest is HTML and cascading stylesheets.

(Note:Because different browsers behave differently, the example page will look different from browser to browser.)

Bonus Question:How can you make a drop-shadow effect using just CSS and HTML, with no GIFs whatsoever? Tune in for the answer tomorrow.

Before we end this lesson, let’s review.

Review of Lesson 3

This lesson was a good one. We expanded our cascading stylesheets toolbox to include the realm of typography and layout, where the spacing and alignment of text and images are under our control. It’s a wondrous land, because in it we can do things that simply aren’t possible now with plain ol’ HTML tags.

Here are the stylesheets properties we covered:

• word-spacing defines the space between words.
• letter-spacing controls the kerning or space between individual characters.
• line-height is the key to leading, the vertical space between lines of text.
• text-align enables you to left-align, right-align, center, or justify paragraphs.
• vertical-align is for vertically aligning text.
• text-indent can give indents to paragraphs.
• All the margin properties specify margins surrounding text blocks, images, and so on.
• And the padding properties are for padding.
• The border properties define the width, color, and style of borders.
• float and clear are for controlling how elements wrap around one another.

Mulder, can there be more to salivate over in this magical realm of cascading stylesheets? Yes indeed. In Lesson 4, we’ll examine the power stylesheets give us over colors and backgrounds. Don’t miss it.

Interactivity, shminteractivity. Most web pages that claim interactivity really mean you can click on hyperlinks to go to new pages. Even web pages that have CGI scripts behind them don’t really seem all that interactive: Fill out a form, hit the Submit button, and wait. It’s more like throwing bottles into an ocean and hoping for a meaningful reply.

Happily, we have JavaScript. With JavaScript, images can swap when you move a cursor over them, form elements can influence each other on the fly, and calculations can be made without having to resort to a CGI script. There’s none of this submit-and-wait stuff — everything happens on your web page while you’re playing with it.

One of the best things about JavaScript is that you can do a great deal with very little programming. You don’t need a fancy computer, you don’t need any software other than a word processor and a web browser, and you don’t need access to a web server; you can do all your work right on your own computer.

Even though it’s simple to work with, JavaScript is a complete programming language, so as you learn more complicated JavaScript, you’re also learning the basics of computer programming. If you want to move on to other programming languages, like Perl, C, C++, or Java, JavaScript is a great introduction.

Enough hype about JavaScript. On to hype about this tutorial.

All About This Tutorial

This five-part tutorial aims to get you writing useful JavaScripts immediately. And not just silly JavaScripts — this tutorial will teach you how to build the browser of your dreams. As we go through the examples in the course, you will build a fancier and fancier browser that you can tweak to your heart’s content. Tweaking is the Webmonkey way, after all.

Here’s a brief outline of what you will learn each day, with an example of what you’ll be able to do by the end of that lesson.

• Day 1: Introductions, some examples, and your first JavaScript (example)
• Day 2: Variables, if-then branching, link events, and image swaps
• Day 3: Windows, frames, and the Document Object Model
• Day 4: Loops, arrays, and functions
• Day 5: Forms, forms, and more forms

Before we jump in, here are few important things to note about JavaScript and this tutorial.

First, JavaScript is not Java.

Second, sometimes JavaScript isn’t JavaScript! It turns out that different browsers deal with JavaScript differently. In fact, different versions of the same browser handle JavaScript differently. So always double-check your JavaScripted pages on as many different browsers (or even platforms) as possible.

Third, this tutorial is not a substitute for a good reference book. JavaScript is very rich, and although you’ll learn most of the grammar of JavaScript here, you won’t learn the entire language. So, if you like what you’ve learned here and are serious about writing your own JavaScripts, go out and get a book. Whatever book you get should have an extensive reference section. I suggest JavaScript: The Definitive Guide by David Flanagan, or, ahem, Dave Thau’s The Book of Javascript: A Practical Guide to Interactive Web Pages.

Fourth, view source! The best way to learn JavaScript is to look at scripts other people have written. JavaScript, just like HTML, can be viewed by selecting View Source on your browser. Do it frequently!

Finally, as with HTML, the best way to learn JavaScript is to experiment freely and often. At several places in this tutorial, you’ll be given the opportunity to try things out. Don’t be afraid to expand beyond the exercise to try new things.

All right, enough with the disclaimers. Let’s write some JavaScript.

Down to Business

Click here to see an example of JavaScript in action!

If you view source, you’ll see something that looks like this:

<html>

<head>

<title>



Thau's JavaScript Tutorial

</title>



<script language="JavaScript">



// put up an alert box, to show how they work



alert("Soon, I will rebuild my browser!");

</script>



</head>

Here are the key things to notice:JavaScript usually goes between the </title> tag and the </head> tag. Like HTML, JavaScript is just text that can be typed into a word processor. It goes right into the HTML that describes your page. (Although I’ve only shown JavaScript in the header of the HTML page, you can also put JavaScript in the body. You’ll see an example of this in the next lesson.)

The beginning of a bit of JavaScript begins with <script language="JavaScript">

Right now, you don’t really have to put the language="JavaScript" element in there because JavaScript is the default script language for all browsers. However, this could change, so it’s a good idea to include the language element.

Everything between // and the end of a line is a comment and will be ignored.

Comment, comment, comment! A basic rule of good programming style is that you should always think about the next person who has to look at your script. It might be a friend, a co-worker, an employer, or it could be you in three months. The easiest way to make sure you’ll understand your own script in three months is to comment freely and often. If you want to comment a huge block of text, you can put it between /* and */ like this:

/* this is



a huge block



of text that I've



commented out */

alert("Soon, I will rebuild my browser!"); calls up a simple dialog box with the words “Soon, I will rebuild my browser!” inside.

Here’s your first piece of JavaScript:the alert method. You’ll learn more about how this line works in the next lesson. For now, you just need to know that you should end it with a semicolon, and put the text you want in the alert box between quotes.

The beginning of a bit of JavaScript begins with <script language=”JavaScript”> tag. No rocket science here. Easy as HTML. Simple, right? Well … actually, there’s one complication.

Hiding JavaScript

The following discussion on hiding JavaScript is obsolete since all modern browsers understand the <script> tag. Further, using this technique to hide a script is NOT XHTML compliant. It is, however, an interesting (historical) hack that’s worth a read.

The problem with the last example is that some old browsers don’t understand the <script> tag. These browsers will treat your JavaScript just like HTML, so the page will come out like this:

//put up an alert box, to show how they work



alert("Soon, I will rebuild my browser!");



'''Congratulations!'''

Which isn’t great. Luckily, there’s a trick involving HTML comments:

<html>



<head>



<title> blah blah blah </title>



<script language="JavaScript">



<!-- hide this stuff from other browsers



YOUR SCRIPT HERE



// end the hiding comment -->



</script>



</head>



<body>



etc., etc., etc.

The reasons why this trick works evaded me for a while, and you can use it without understanding why it works. However, if you really want to know, here’s why the comment trick works.

OK, believe it or not, you’re ready for your first JavaScript exercise.

Once you’ve conquered that assignment, take a minute to read our review of Lesson 1.

OK! You’re well on your way to understanding JavaScript. Here’s a quick review of what was covered today:

• The greatness of JavaScript
• Browser-compatibility problems
• Other ways to learn JavaScript
• Where JavaScript goes on a page
• How to comment (freely and often!)
• Hiding your JavaScript from unsavvy browsers
• How alert boxes work

Today was just an introduction to give you a feel for how things work. Next time we’ll start getting serious.

Topics for next time:

• What sorts of information JavaScript knows about
• How JavaScript stores that information
• How JavaScript decides what to do
• How to do those nifty image swaps

Ready? Then on to Lesson 2!

My friend remarked the other day that if a life can be said to have a killer app, peer-to-peer file sharing is his. Well, e-mail is mine. It is the key conduit for my work, entertainment, hobbies, relations with family and friends, and all sorts of other activities. But as I come to rely on it more and more, its shortcomings are magnified, and my patience for them diminished.

I am endlessly irritated by the inelegances of POP e-mail. When I’m forced to use other people’s computers, or just when I switch from one laptop to another, I want all my e-mail, fifteen years’ worth, received as well as sent, to be right there at my fingertips, neatly categorized. If I have to stop in at a public web terminal and send an urgent message to my date for the evening, I want the message I send to be archived with the rest of my sent mail.

A year or so ago, I decided I had had enough. The old method of checking e-mail with a POP client at home, and stopping in to use Mail2Web or another public, on-the-road interface just wasn’t doing it for me. I wanted a central repository for all my e-mail, accessible easily from anywhere. After a perusal of the services that were available, I reached the conclusion that the amount of storage space and the functionality I desired would incur too high monthly cost. I took matters into my own hands.

Using an old Pentium box I had lying around, I tried out a few different configurations and possibilities, and eventually wound up with the system I wanted. Now, with that machine (which I named Potto) as a mail drop, I can access my e-mail — all my e-mail through history — from anywhere, using any mail client I like. There is also a handy web interface for checking e-mail from public terminals like the Apple store. And I even hacked together a hybrid interface so I can call up and have a Stephen-Hawking-a-like read me my e-mail over the phone! But that’s another story, and shall be told another time.

What follows is the story of how I changed my e-mail life, and the e-mail lives of several friends, by hosting my own e-mail, and theirs, at home. In a broom closet! And how you can do the same.

The Basics of Mail Hosting

You don’t need a particularly powerful machine to handle e-mail. Unless you are planning to support hundreds of users — or you yourself get hundreds of users’ worth of e-mail — an old Pentium should be fine, speedwise. You’ll want plenty of hard drive space, but that’s cheap these days; RAM is very nice to have as well. Since you are going to be leaving this machine running constantly, you will want it to have powerful yet quiet fans installed. I learned that the hard way.

A basic install of Linux and a web server is a good place to start. You may already have one. If not, whatever are you waiting for?

When you’re setting it up, make sure to allot plenty of hard drive space for the /var partition, and plenty more for the /home partition. This is where all that e-mail is going to live.

What you will be doing is running a machine at home (or at another location of your choice) that is connected to the internet, presumably over your DSL or other high-speed connection. Unless you want to restrict your user base to people on your home network and never talk to the outside world, people will be accessing this machine remotely. This raises a few issues.

One: To resolve a domain name to your box, the box will need an IP address. You can either get a static IP address, which some ISPs charge a bit extra for, but which makes life easy; or you can use so-called dynamic DNS. This involves running a little program on your server that detects what its current IP address is, and, every time the address changes, notifying the DNS server. Technopagan has an excellent explanation of dynamic DNS, with listings and ratings of providers.

Two: Technically speaking, you are “running a server,” which some ISPs frown upon. However, since you are limiting access to a handful of friends and relatives, it’s not really a big drain on their bandwidth, so unless you have a truly draconian ISP and you flaunt the fact that you are occasionally connecting to ports 143 and 80 from outside, you shouldn’t anticipate any problems.

Three: Security is an issue. Lock down your box. In brief, don’t open any ports you don’t have to, don’t run any daemons you don’t have to, and keep everything up to date. Linux Security is a good security tutorial site.

If these obstacles seem large to you, you always have the option of paying someone else to host a machine remotely. That’s an excellent option if you are willing to trade money for the absence of headaches.

Anyway. Once you’ve got the machine up, running, and connected, with that lovely Apache test page, you are ready to proceed. Read any of the excellent guides to Linux out there if you are feeling lost.

Getting the Mail

Now then, a proper mail server has a relatively high-profile net presence:It runs Sendmail or Qmail or Postfix, has a proper DNS MX entry, and receives mail that is sent to its domain. That’s more than most people want to shoulder, in terms of configuration, maintenance, and server horsepower. I already have an ISP that receives my incoming e-mail and stores it briefly. Doubtless you do too. I also receive mail at a couple of other POP-accessible accounts. I wanted to set up my machine Potto to get the mail from the ISP and the other accounts and store it all locally. My ISP has a lot more man- and server power than I can muster, and they do what they do very well. I take the e-mail off their hands and make up for their front-end shortcomings with my flexible, customized system. (Another advantage to this setup is that if Potto ever goes down, all the new incoming mail will just stay on the ISP’s server, instead of bouncing or getting lost in the ether.)

The mail is downloaded from the ISP with Fetchmail. This is an elegant little piece of software that comes with every Linux distribution and does just what its name implies. Every couple of minutes, Fetchmail polls the various ISPs where the new mail comes in. It retrieves that mail and removes it from the server. For each user on Potto, there is a line in my /etc/fetchmailrc config file that looks like this:

poll mail.server.net with proto auto

 user "username" there with password "p@55w3rd" is username here

This is an instruction that tells Fetchmail, every time it runs, to poll the specified server, automatically detecting the protocol, and get all mail for “username”. That mail is then placed in the local mail spool for the specified user on Potto. I also include the line set daemon 120, which tells Fetchmail to run every 120 seconds.

OK, so now all this mail’s sitting on the mail drop machine. What next?

Well, in the simplest case, users can connect to the server using SSH or telnet, and access their mail via a terminal with Pine or Mutt or another such console-based client. These clients have very clean interfaces and powerful, streamlined features. And indeed they are popular with a certain geeky cross-section of Potto users. But even Mutt’s free keybinding and regex support weren’t enough to convince my dad to switch from Eudora. I needed an easier way to access the mail. Fortunately, what I required was invented many years ago.

POP Versus IMAP

Mail clients like Eudora communicate with a mail host via one of two protocols:POP and IMAP. Therefore, to support such mail clients, a mail host has to be able to speak at least one of these.

POP, the Post Office Protocol, is the most widespread protocol by which mail clients retrieve e-mail from a server. It uses the so-called offline operation model — it makes a quick connection to the server, downloads the messages that are waiting, and typically removes them from the server, then disconnects. The messages are then on the client for good.

This method is what gives rise to all the things I was complaining about in the introduction. When you offload e-mail from the server to your local machine, you lose flexibility. I wanted all the e-mail to live on Potto, and be readable from anywhere at any time. IMAP was the answer.

IMAP, the Internet Message Access Protocol, was designed to solve some of the issues that POP leaves unaddressed. Although IMAP allows for offline-style operation, its specialty is accessing messages that live permanently on a server. It supports multiple server folders, flags reflecting the New/Read/Answered, etc. status of messages, and a host of other features that place it far above POP, in terms of pretty much everything except popularity. Although IMAP has been around since 1986, POP is the de facto standard, and enjoys much more widespread use than IMAP. Rock-solid proof — as if we needed more — that the majority choice is not always the best choice. The differences between IMAP and POP — from an admittedly pro-IMAP standpoint, though I don’t know of anyone espousing the other view — are enumerated at imap.org.

List of IMAP Server Software

So yeah, IMAP. There’s a bit of a choice when it comes to which free UNIX IMAP server to use:

• The University of Washington folks who brought you Pine distribute the UW IMAP server

• Carnegie Mellon distributes the Cyrus server

• There’s Courier too

• And I’m assured that Dovecot and DKIMAP4 are excellent in their own right, though my testing was limited.

I chose UW IMAP to use on Potto, because it supports Unix mbox-style folders, which is the format in which my decade-plus of saved mail happens to be archived; and because it is pretty fast, stable, and secure. Cyrus and Courier may have their advantages when it comes to speed, configuration, and authentication, but both servers prefer alternate ways of storing mail. You can choose the server that best meets your needs — and I may yet switch — but for now UW IMAP is doing a fine job.

Installing UW IMAP

To install it, I downloaded the source code and unzipped it. The software requires, somewhat inflexibly, that configuration settings be set before compiling, but in the vast majority of cases the default settings are fine and nothing needs to be touched. So, following the onboard instructions, I simply typed “make lnp” and then copied the resulting file, imapd, into the /usr/sbin directory where it would run.

After installing the IMAP server software, it is necessary to configure inetd or xinetd, which is the daemon that handles internet traffic for services (like IMAP servers) that need it. In the version of Linux that Potto runs, xinetd is the order of the day, and its services are configured in the /etc/xinetd.d directory. In a config file called imap in this directory, I specified the following:

service imap { socket_type = stream wait = no user = root disable = no server = /usr/sbin/imapd }

disable = no turns on the service, and server = /usr/sbin/imapd indicates where the server program lives. Plenty of other configuration options are available here, involving security, logging, and other behavior, which you may customize for your needs.

Add the following line to /etc/hosts.allow (this can be modified later to restrict access):

imapd :ALL :ALLOW

Now restart inetd.

After restarting your inetd, you should find that the IMAP server is listening on port 143. (If you have a firewall blocking this port, unblock it.) Running telnet localhost 143 on the server machine should put you in contact with your IMAP server:

 $ telnet localhost 143

 Trying 127.0.0.1...

 Connected to localhost.localdomain (127.0.0.1).

 Escape character is '^]'.

 * OK [CAPABILITY IMAP4REV1 LOGIN-REFERRALS STARTTLS AUTH=LOGIN] localhost.localdomain IMAP4rev1

If this doesn’t work, make sure that the inetd settings are correct, and restart inetd.

You can use /etc/hosts.allow and /etc/hosts.deny to control access to your glistening new IMAP server.

Users can now configure their mail clients to talk to the IMAP server. They just need to specify the server name. Via the client, they can create new folders on the server, sort mail, and so forth.

Tip: UW IMAP keeps each user’s INBOX in their mail spool file — typically /var/spool/mail/username. This is where incoming mail goes by default. In addition to this main INBOX, users can create any number of other mail folders in their home directories, for sorting mail into categories. Procmail is extremely useful for automatic mail sorting.)

Tip: Mulberry is a terrific mail client that’s designed to work with IMAP.

But the grand plan isn’t complete yet. Mulberry and Eudora are all well and good when you’re at home or at work, but what about when you’re on the road? A web interface is a must.

Set Up a Web Interface

If you forgot to print out the directions to that party, just pull over at a public web terminal and look up the old e-mail!

There are several different ways to implement a web mail interface, but the easiest I’ve found is SquirrelMail, a PHP-based package that is fairly flexible but requires little setup. It works off an IMAP backend, which you have, and needs only Apache and PHP to run. Apache comes pre-packaged with most Linux distributions. PHP does too.

When you’ve got the requirements squared away, download the SquirrelMail package. Uncompress it in your web server directory. On Potto, this is /var/www/html. This will create a new subdirectory called squirrelmail-version, where “version” is the version number of SquirrelMail. Clear?

Create the attachments directory (which for some reason isn’t there by default):

mkdir squirrelmail-version/attachments

Fix the ownership and permissions, for security’s sake:

 chown -R root.apache squirrelmail-version

 chown -R apache.apache data

 chown apache.apache attachments

 chmod 730 attachments

 chmod 730 data

Did I mention that you need Perl as well? Well, you don’t strictly need it to run SquirrelMail, but the configuration program runs in Perl. Type

 cd squirrelmail-version ./configure

This will launch the configuration program. If you really don’t have Perl on your system, it’s easy enough to edit the config file by hand:it’s located at squirrelmail-version/config/config.php.

What you need to set to get the program running is the following:In Server Settings:

 1. Domain :''your domain name''

 2. IMAP Server :localhost

 3. IMAP Port :143

If you have an ISP through which you typically send your e-mail, it reduces overhead to use them as your SMTP server:

 4. Use Sendmail/SMTP :SMTP

 6. SMTP Server :mail.yourisp.net

 7. SMTP Port :25



 10. Server :uw

Next, in General Options:

 2. Data Directory :../data/

 3. Attachment Directory :../attachments/

Those are the essentials — the rest is customization. You can even use your own CSS files to get it looking exactly the way you want.

Now try it out! Browse to http://yourdomainname.net/squirrelmail-version/ and you should see the login screen. Even better, you should be able to log in successfully and see your e-mail folders!

Congratulations. You are free of POP tyranny. You’ve never been so hands-on before. Your friends will love your hosting service, and — yes! — that’s your e-mail purring in the next room.

Thus far in our introductory Django tutorial, we’ve installed the open-source Django framework, set up a blog and beefed it up by adding some extras like semantic content tags, some handy template tags and a list of our bookmarks from delicious.com. If you haven’t been following along, now would be a good time to go back to Lesson 1 and catch up.

However, what we’ve created is not much different than what one could do with WordPress or another out-of-the-box blogging tool. That’s OK for a learning project. But now we’re getting close to being experts, we are going to explore some territory beyond what we can do with pre-built tools.

Let’s build something a little more advanced. Let’s build a microblog.

Let’s get ready to Tumble

These days, many of us follow our friends on services like FriendFeed or Facebook, where the concept of a “blog post” is much looser, smaller and faster.

Whether you want to call it a newsfeed, lifestream, microblog, tumblelog or a dozen other clever portmanteaus or neologisms, the concept is the same: a site to log snippets of your life and its discoveries in one place.

FriendFeed is a favorite. The service combines tweets from Twitter, photos from Flickr, links from Delicious, updates from Facebook and other sundry data and displays them all on one page. The page itself also has an RSS feed, giving you (or any of your many fans) a way to follow your every move.

Let’s build a version of Friendfeed using Django. We’ll build a page displaying both our links and blog posts together in a single, time-based “river.” As a bonus we’ll add in some RSS sugar so our friends can follow along without having to visit the site.

Laying the groundwork

Before we get started, let’s think for a bit about what needs to be done. We will post data two separate using two models: the blog Entry model and the Link model. We need to query them both at the same time and then sort the feed into reverse chronological order.

The key to making it work is by creating a way to normalize our data. The database table for each of these models are significantly different. Instead of querying both models, wouldn’t it be better if we just query against one table?

Let’s do it.

How it works

There’s one thing all models will have in common: a publication date. What we’re going to do is create a kind of meta model which stores the date as well as what kind of data it is (i.e. blog entry, link, etc).

Django ships with two tools which actually make it very easy to build our meta model. The first is the content types framework. As the docs explain, “instances of ContentType represent and store information about the models installed in your project, and new instances of ContentType are automatically created whenever new models are installed.”

Huh? Basically, what the Django Project is telling us is just by referencing the content type, we will always know what type of content we’re storing. Storing the content type is half the battle.

The other half of the battle will be won by using a built-in field known as a GenericForeignKey. You may have noticed a ForeignKey field in the Django docs. ForeignKey is similar to what we’re going to use. Where ForeignKey refers to a single model, our GenericForeignKey can refer to any model by referencing the content_type instead.

If that sounds confusing, don’t worry. It’ll make more sense when you see it in action.

Let’s start writing some code. I’m going to store our meta app in a folder named “tumblelog” so create the folder and create a new models.py file inside it (don’t forget the __init__.py file as well, Python’s never-ending “gotcha”). Open up models.py in your text editor and paste in this code:

from django.db import models

from django.contrib.contenttypes import generic



class TumbleItem(models.Model):

    content_type = models.ForeignKey(ContentType)

    object_id = models.PositiveIntegerField()

    pub_date = models.DateTimeField()

    content_object = generic.GenericForeignKey('content_type', 'object_id')



    class Meta:

        ordering = ('-pub_date',)



    def __unicode__(self):

        return self.content_type.name

If you’re familiar with our previous tutorials (or Django in general), by now this should look somewhat familiar. We have a regular ForeignKey to the ContentType as we discussed above. Then we have an id field, which we need to pass to the GenericForeignKey field (along with content_type). Finally we add a datetime field for easy sorting. If you look at the GenericForeignKey documentation you’ll notice this is pretty much the same code used to demonstrate GenericForeignKeys. The only difference is we’ve added a date field.

Now we have a basic script, but we certainly don’t want to update this by hand every time we post something. Especially since our delicious.com import script runs automatically.

Well, it turns out there’s a very powerful feature baked into Django which can handle the task for us.

Django includes an internal “dispatcher” which allows objects to listen for signals from other objects. In our case, our tumblelog app is going to “listen” to our Entry and Link models. Every time a new Entry or Link is saved, those models will send out a signal. When the tumblelog app gets the signal it will automatically update itself.

Sweet. How do we do it?

Listen for the Signals

The first thing we need to do is import the signals framework. Add this to the top of your model.py file:

from django.db.models import signals

from django.contrib.contenttypes.models import ContentType

from django.dispatch import dispatcher

from blog.models import Entry

from links.models import Link

OK, now move to the bottom of the file and add these lines:

for modelname in [Entry, Link]:

	dispatcher.connect(create_tumble_item, signal=signals.post_save, sender=modelname)

In Django 1.1 (and 1.0 I think) the signal have changed. Change the import to:

from django.db.models import signals

from django.contrib.contenttypes.models import ContentType

from django.db.models.signals import post_save

from blog.models import Entry

from links.models import Link

and change the dispatcher line to

post_save.connect(create_tweet_item, sender=Entry)

post_save.connect(create_tweet_item, sender=Link)

So what’s it do? Well it tells the dispatcher to listen for the post_save signal from out Entry and Link models and whenever it gets the signal, it will fire off our create_tumble_item function.

But wait, we don’t have a create_tumble_item function do we?

No, so we better write one. Just above the dispatcher function add this code:

def create_tumble_item(sender, instance, signal, *args, **kwargs):

	if 'created' in kwargs:

		if kwargs['created']:

			create = True

			ctype = ContentType.objects.get_for_model(instance)

			if ctype.name == 'link':

				pub_date = instance.date

			else:

				pub_date = instance.pub_date

			if create:

				t = TumbleItem.objects.get_or_create(content_type=ctype, object_id=instance.id, pub_date=pub_date)

What’s this function doing? For the most part it’s just taking the data sent by the dispatcher and using it to create a new TumbleItem.

The first line looks to see if a variable, created, has been passed by the dispatcher. The post_save signal is sent everytime an object is saved, so it’s possible we’ve just updated an existing item rather than creating a new one. In that case, we don’t want to create a new TumbleItem, so the function checks to make sure this is, in fact, a new object.

If the dispatcher has passed the variable created, and its true, then we set our own create flag and get the content_type of the passed instance. This way, we know whether it’s a Link or an Entry.

If it’s a Link we need to find the datetime info. When we built our Link model, we called the field date, so we set our normalizing pub_date field equal to the instance.date field.

If the instance is a blog Entry we set pub_date to the value of the instance’s pub_date field since, it shares the name we used in our Entry model.

Then we create a new TumbleItem using the built-in get_or_create method. We also pass in a content_type, id and pub_date<code> to their respective fields.

And there you have it. Any time you create a blog entry or the script adds a new link, our new TumbleItem model will automatically update.

There’s a slight problem though. What about the data we’ve already got in there?

Well to make sure it gets added, we’re going to have to comment out the following lines:

	if 'created' in kwargs:

		if kwargs['created']:

Comment it out and save the file. Then fire up the terminal and enter this code one line at a time:

>>> from blog.models import Entry

>>> from link.models import Link

>>> entries = Entry.objects.all()

>>> for entry in entries:

...     entry.save()

...



>>> links = Link.objects.all()

>>> for link in Link:

...     link.save()

...

>>>

What did it do? We just called the <code>save method and dispatcher passed its signal along to the TumbleItem model which then updated itself. Because we commented out the lines that check to see if an item is new, the function ran regardless of the instance’s created variable.

Now uncomment those lines and save the file.

Before we move on I should point out post_save isn’t the only signal Django can send. There are in fact a whole bunch of useful signals like request_started, pre_save and many more. Check out the Django wiki for more details.

Writing the URLs and views

Now we need to add a tumblelog URL and pull out the data. Open up your project level urls.py file and add this line:

(r'^tumblelog/', 'tumblelog.views.tumbler'),

Now create a new views.py file inside your tumblelog folder and open it up to paste in this code:

from tumblelog.models import TumbleItem

from django.shortcuts import render_to_response



def tumbler(request):

	context = {

		'tumble_item_list': TumbleItem.objects.all().order_by('-pub_date')

	}



	return render_to_response('tumblelog/list.html', context)

What’s going on here? Well first we grab the tumblelog items and then we use a Django shortcut function to return to pass the list on to template named list.html.

Let’s create the template. Add a new folder “tumblelog” inside your templates folder and create the list.html file. We’ll start by extending our base template and filling in the blocks we created in an earlier lesson:

{% block title %}My Tumblelog{% endblock %}

{% block primary %}

{% for object in object_list %}

	{%if object 'link'%}

		<a href="{{ obj.url }}" title="{{ obj.title}}">{{ obj.title}}</a>{{object.description}} Posted on {{object.pub_date|date:"D d M Y"}}

	{% endif %}



	{%if object 'entry'%}

		<h2>{{ object.title }}</h2>



		<p>{{ object.pub_date }}</p>

		{{ object.body_html|truncatewords_html:"20"|safe }}

		<p><a href="{{object.get_absolute_url}}">more</a></p>

	{% endif %}

{% endfor %}

{% endblock %}

If you start up the development server and head to http://127.0.0.1:8000/tumblelog/ you should see your blog entries and links ordered by date.

Where do we go from here?

We’re looking pretty good up until we get to the template stage. The if statements aren’t so bad when we’re only sorting two content types, but if you start pulling in tons of different types of data you’ll quickly end up with spaghetti code.

A far better idea would be to write a template tag which takes the content type as an argument, uses it to call a template file, renders it and passes back to the html as a string.

We’ll leave it up to you as an exercise (hint: read up on Django’s render_to_string method).

The other thing you might be wondering about is pagination. If you save dozens of links a day and blog like a madman, this page is going to get really large really fast. Django ships with some built-in pagination tools (see the docs) and there’s also a slick django-pagination app available from Eric Florenzano. Eric even has a very nice screencast on how to set things up.

RSS feeds

We’re almost done. Let’s hook up some RSS feeds for our new site.

It turns out, Django ships with a very nice syndication framework. All we need to do is turn it on and hook it up.

Let’s start by going into our TumbleItem models.py file and setting up the framework. Paste in this code at the bottom of the file:

from django.contrib.syndication.feeds import Feed

class LatestItems(Feed):

    title = "My Tumblelog: Links"

    link = "/tumblelog/"

    description = "Latest Items posted to mysite.com"

    description_template = 'feeds/description.html'



    def items(self):

        return TumbleItems.objects.all.order_by('-pub_date')[:10]

Here we’ve imported the syndication class Feed and then defined our own feed class to fill in some basic data. The last step is returning the items using a normal objects query.

We need to create the URLs first. There are several places you could do this, I generally opt for the main project URLs.py file. Open it up and paste this code just below the other import statements:

from tumblelog.models import LatestItems

feeds = {

    'tumblelog': LatestItems

}

Now add this line to your urlpattern function:

(r'^feeds/(?P<url>.*)/$', 'django.contrib.syndication.views.feed', {'feed_dict': feeds}),

The last step is creating the description template in a new folder we’ll lable “feeds.” Just plug in the same code from the tumblelog template, but delete the forloop tag since we’re only passing a single object this time.

And there you have it. Fire up the development server and point it to http://127.0.0.1:8000/feeds/tumblelog/. If you want to add separate feeds for links or just blog entries, all you need to do is repeat the process, creating new feed classes for each.

Conclusion

Whew! It’s been a long journey and we wrote a lot of code, but hopefully you learned a good bit about how Django works. You not only have a blog/linklog/tumblelog, but hopefully some ideas of how to approach other projects.

Speaking of projects, although we used one, there’s really no need to organize your code this way. Sometimes the projects come in handy, but other times they make your PYTHONPATH into a snarled mess. For some other ideas on how organize you code, check out James Bennet’s article on the subject.

If you ever have questions about Django, jump on the #Django IRC channel, there’s load of friendly and helpful developers who can point you in the right direction, and be sure to join the mailing list. Happy coding!

Childhood, as far as your basic cheese selections go, was easy. In your typical middle-class family, you had one of three choices:cheddar, Monterey Jack, and those precious, flat, sandwich-sized slices of American. That’s what all the cool kids ate. I had to fight my mother to get those into my lunch. She used to make sandwiches with these huge slabs of cheddar cheese that looked like they were hewed from the side of an orange glacier. Although I lost the Wonder Bread battle, I didn’t give an inch on this one. For some reason, Mom couldn’t see the simple beauty in a perfectly proportioned square of processed cheese food.

The problem with childhood is that we never appreciate it while we have the chance. As I grew up, I developed more mature needs and tastes. Like many young adults lost in the hype of ’80s mass cultural wonders like Molly Ringwald and Oingo Boingo, I began to experiment. I told myself that I didn’t have a problem, but a little brie here, and a bit of Chaumont there, and before I knew it, I was hooked.

My problems aside, cheese took a serious hit in the early ’90s. Cheese, it was discovered, is composed mostly of fat. It’s “bad” for you. Less fattening cheeses like feta became all the rage. Feta, if you’re unaware, originated in Greece and has been made the same way for thousands of years. Now, aside from the fact that “feta” and “meta” rhyme and share common Greek etymologies, there is absolutely no correlation between the two. You can’t eat a <meta> tag, which, frankly, makes it a lot less interesting.

So what is it? Glad you asked. The <meta> tag is often found at the top of an HTML document between the </title> and the </head> tag. It has a variety of uses, but one of the most common is the client-pull function, used to either reload or redirect pages after a specified amount of time. The reload function is relatively simple, and the syntax looks like this:

<meta http-equiv="Refresh" content="30"> 

Let’s break this down. http-equiv gives the name of the http function that you want parsed by the server and content is the amount of time you want to wait before the server goes ahead with the http-equiv. In this case, we’re waiting 30 seconds before reloading.

If you want to redirect users to another page, you would add a URL to the tag syntax to tell the server where it should go.

<meta http-equiv="refresh" content="30; URL=http://www.webmonkey.com/">

In this case, when 30 seconds have expired, we’re redirected to a new page, which is defined by the URL attribute in the tag.

The <meta> tag can also be used to convey information about your document that can’t be found anywhere within it. A lot of people use it to add keywords to their pages. This used to have a huge effect on how the page was indexed by search engines, but since search engines (and keyword writers) have gotten smarter, meta tag keywords have come to carry less sway over search engine indexing.

Putting keywords in your meta tags still helps define what the page is about for some users, though. To do this, you need the name element to — what else — give the information a name. This might sound a little silly at first, but if you use the <meta> tag several times in one document to do many different things, it’s important to keep the tags straight, otherwise you might have trouble remembering what each one does. The content attribute also differs here. Rather than assigning a refresh time, you use this space to add the keywords:

<meta name="keywords" content="chicken, biscuits, cheese">

In the above example, your document will be referenced by the additional keywords chicken, biscuit and cheese, even if the only thing on your page is a giant JPEG of your favorite NASCAR driver. Of course, this isn’t very helpful to your readers, so try to use words that relate to your content.

The uses for the <meta> tag are continuously expanding, so when I figure out more, I’ll let you know. Oh, and if you’re selecting fine cheeses, I recommend a nice havarti. Although it’s from Scandinavia — which isn’t known for its fine cheeses — havarti’s quite delicious.

Information architecture is the science of figuring out what you want your site to do and then constructing a blueprint before you dive in and put the thing together. It’s more important than you might think, and John Shiple, aka Squishy, tells you why.

Squishy first looks at how to define your site’s goals, shedding light on the all-important art of collecting clients’ or co-workers’ opinions and assembling them in a coherent, weighted order of importance. He also shares his scheme for documenting everything so that all parties can keep up.

The next step is figuring out who the heck your audiences are going to be. Once that’s out of the way, you can start organizing your future site into pages of content and functions that the site will need to have.

Next, Squishy gets into creativityland, where you start to build the beast:form a skeleton, pick your metaphors, map out your navigation. Then it’s time to break out the graphics program, come up with layout grids, design sketches, and mock-ups, and get ready to build!

Suggested readings