Patterns
This lesson’s goals
By the end of this lesson, you should know:
- What patterns are.
- How patterns make your life easier.
What’s a pattern
Some situations come up again and again. For example, a bunch of people need to make a choice. Eat all the dog food now, or save some for later? Which movie should we watch? Pirates or ninjas?
Figure 1. Pirates or ninjas?
People have come up with different ways of solving the “group makes a choice” problem. One way is for each person to vote:
Figure 2. Direct voting
This is a pattern, that is, a common way of solving a common problem. We could describe the pattern like this:
Goal: Group decision
Pattern: Direct voting
Works well: When there are a few voters.
Another pattern is to have the people elect representatives. The representatives make the choice on behalf of everyone.
Figure 3. Representative voting
The pattern is:
Goal: Group decision
Pattern: Representative voting
Works well: When there are many voters.
So direct voting and representative voting are common ways of solving a common problem. They’re useful in different situations. One is better when there are just a few voters. One is better when there are lots of voters.
Web patterns
There are patterns for Web sites, too. Suppose an organization called Public Opinion hires you to:
Make a Web site about the pirates versus ninjas debate. It will have four pages. The first one will be the home page, telling people what the site is for. There’ll be a page about pirates. There’ll be another page about ninjas. And the last page will let people vote.
We want everyone to know that Public Opinion owns the site. And that each page is copyrighted.
Also, make it easy for people to get from one page to another.
How do you get started? One way is to look at the goals, and think about patterns. For example, how to let everyone know that its Public Opinion’s site? One way is with a header on every page, like this:
Figure 4. Header pattern
People are used to this pattern. A lot of Web sites use it, including CoreDogs. The pattern is a solution to a common problem: tell people what a site is and who owns it.
Another goal is to tell people that each page is copyrighted. A common pattern for that is to put a copyright notice in the footer of every page:
Figure 5. Footer pattern
Again, we have a common solution to a common problem. How to show a copyright statement? Put it in the footer of every page. Lots of sites do this. Including CoreDogs.
Now, how about this goal: “make it easy for people to get from one page to another.” A common pattern is the nav bar, short for navigation bar. You’ve seen lots of these:
Figure 6. Horizontal nav bar pattern
Figure 7. Vertical nav bar pattern
Either one would work.
You’ll learn how to make all of these pieces in CoreDogs. Put the pieces together, and you have an entire design:
Figure 8. Complete page design
Patterns rule!
Patterns let you do Web work more quickly. You don’t have to relearn all of the time. You learn how to make a nav bar once, and you can use the pattern on site after site.
Patterns make it easier to design sites. You don’t have to think up new solutions to the problem of letting people jump from page to page easily. You already know that nav bars will do this. You can say to yourself, “Self, I’ll put a horizontal nav bar in here,” and leave the details for later.
Patterns make it easier for Web workers to talk to each other. Say “horizontal nav bar,” and every Web designer will know what you mean.
The CoreDogs pattern library
As we go through CoreDogs, we’ll take useful patterns, and add them to a library. When you create a page or a site, you can borrow patterns from the library.
To get to the library, click on the Tools tab, and then the Patterns tab:
Figure 9. Accessing the pattern library
Here’s your first pattern. It’s the template from the previous lesson.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITLE</title>
</head>
<body>
BODY
</body>
</html>
Figure 10. Standard page template (again)
Pattern: HTML page template
To make a simple Web page, begin with this pattern. Copy-and-paste the code into your editor, and get started.
Notice that this template has several different tags in it: <html>, <head>, <body>, and others. Individual HTML tags aren’t very useful by themselves. It’s when tags are combined into patterns that they start to do useful work.
You saw this just above:
Pattern: HTML page template
It tells you that a pattern for what you just read about is in the pattern library. In this case, the code in Figure 10 is in the library.
Remember: patterns are your friends.
Summary
You learned about:
- The structure of a Web page.
- What character sets are.
- Indenting, which makes it easier to change a page.
- Why it’s important to get the
titleright. - What patterns are.
- Patterns make your life easier.
What now?
Let’s start adding some HTML tags to the body.
