These are the notes for my "Introduction to Plone" class. I'll update these from time to time, so watch this space for further developements....

Welcome, please have a seat, and log into a PC, and get your browser started up and pointed to here:

• http://www.sunyrockland.edu/

Today I want to cover a little about what this "Plone" thing is and isn't, explain the parts of the screen, and then get you signed in and creating content. (This is aimed at a semi-technical audience, but I'll try not to get in too deep.) ;)

What is Plone?

Plone is a kind of web server, kind of. ;)

As implemented here at RCC, it's just the top layer in a stack:

• Plone
• CMS
• Zope+ZEO
• Squid
• Apache
• Linux
• Hardware

Plone's whole purpose is to hide the rest of the layers behind an easy to use interface. Mostly, it succeeds; however, it helps to understand a little bit about what's going on further down.

For example, you need to know that requests from users' browsers come in at the bottom layer and work their way up, and responses go back down and out. This matters because those other layers can (and often will) intercept requests before they get up to Plone.

At the top of our new homepage, please click on the file-folder tab labeled "Directory of Offices & Services"; on the next page, please click on "The Automotive Technology Center", near the bottom of the list.

What you see next doesn't look like Plone, because it isn't coming from Plone. As a temporary step during migration, most of the website is being served at the Apache layer; over the next few months, each area will be cleaned up (I've written some scripts to help this) and imported (via FTP) into Plone, and then Apache will be told to stop intercepting requests for that area.

Please click your browser's "Back" button twice, to return to the new homepage.

One other thing, while we're talking about layers: If you're ever in Plone, make a change, and don't see any results, do a "forced reload" by holding down the "shift" key on your keyboard and clicking the "Reload" button on your browser. The Squid proxy-cache layer in the stack does its best to deal with re-requests for content without bothering Plone, by serving cached copies from memory; the "forced reload" makes it pass the request through anyway.

(Yes, that's the same Squid software that sits between your on-campus browser and the outside world; only in this case, instead of virus scanning, it's speeding up Plone about 400 times.)

Using Plone

In the top right corner of the page is a "Search" button. Please click on the box next to it, and sloooowly, type "demo". About when you get to "e" or "m", a box will pop up showing you what Plone has found for you.

If you hit the "down arrow" key on your keyboard, you'll find yourself navigating your way down the list of search results; this is an example of how Plone adds lots of accessibility features, such as mouseless navigation. (You can also put yourself into the Search box by typing Alt-4 in Netscape, or Alt-4 Enter in IE.)

Using either the keyboard or the mouse, please choose "Demo Page" from the results list.

Now have a look at your screen. At the top left is the RCC logo, and below that are several orange "file tabs" with links to specific pages. Below that is a line which starts "You are here:", showing where this page fits into the site's structure, and providing handy links to help you move "up the tree".

In the top right corner, above the search box, please click on "Accessibility". In the page that comes next, near the top, click on "Large", then "Small", then "Normal". Notice that the results are instantaneous: Plone uses CSS and JavaScript to create a very fast, interactive interface; it also provides text-mode alternatives for everything, to ensure that all users can access all content.

Notice how the menus and boxes which surround each page's content are uniform and mostly unchanging; some of these (the left and right areas) can be modified by users, while others (the top and bottom areas) are controlled on a site-wide basis.

In the search box, type "class", and choose "Hello Plone Class!", to see a page in my personal folder.

Notice how the left-hand boxes have changed. The new "Navigation" box is Plone's "real" one; the "fake" one on the homepage is just the text from a page called "left-menu.html" in the root folder. (The fancy rollover behavior is just some CSS I borrowed from the "real" one.)

Below that "Navigation" box is a "left-menu.html" box, based on a page of that name in my folder; if I hadn't put it there, Plone would have searched its way "up the tree" until it found the one in the root folder, and displayed that instead. This way, any section of the site can easily create a localized version of a box, without having to fiddle around "under the hood", just by creating a page with the right name.

Click on the "Future Students" tab at the top of the page for an example of this in action; the left-hand "Navigation" box is replaced by a local, customized version.

Creating Content

Now, we'll log in and have some fun. :)

In the top right corner of the page, at the right end of that orange bar, please click on the "Log in" link. In the form that comes up, log in using your email account name and password.

Notice that the next page you see is whatever page you were looking at when you clicked "Log in", but now there's an orange "Welcome!" box near the top of the page. That "status box" also pops up whenever you do something that produces a result, like creating or editing a page.

The orange bar (called the "personal bar") now contains several links specific to your account. Let's have a quick look at "Preferences" (by clicking that).

You'll see that the left-hand box is now called "Site Setup", and doesn't let you do anything. Just ignore that, it's for server admin stuff. :)

You should see two links, one for an editor and one for Personal Preferences, click the second one.

Here you'll find many settings for things you don't care about right now. ;) However, I'd like to point out the setting for "Content editor", which lets you choose from three editing interfaces:

• Basic (just a plain web form text box)
• Kupu (a slightly fancy editor, designed for beginners, "fixes" your HTML)
• FCKeditor (a very fancy editor, designed for "power users", may modify your HTML a little)

It should be set to Kupu right now; we'll leave that alone and just click on "My Folder" at the top of the page.

Note that, while Kupu actively modifies your content, Plone always filters content at display time, too. Because of Plone's built-in security features, using features like forms and stylesheets and JavaScript require special tools, which we won't cover here today.

Notice the new green tabbed box in the middle of the page; you'll see this on any page which you own, or have write access to. Also notice the items at the right end of the green bar; they're drop-down menus.

Click on "Add item" in the green bar, and choose "Page". In the form that comes up, in the "Title" box, type "Sample Page"; in the "Description" box, type "Exercise from Plone class"; in the "Body Text" box, write whatever you like; then, scroll down to the bottom of the page and click "Save".

On the page that comes up next, you'll see a "Changes saved" message, and your new page content. Now, let's explore the other green menus:

• Under "Actions", you'll find Cut, Copy, Paste (sometimes), Delete, Rename, and Spelling. (Yes, there's a spell checker!)
• Under "Add to folder", there are many kinds of content available. (You'll mostly want to create Folders, Pages, and Images for now.)
• Under "State: Public Draft", you can change the publishing status of the page. If you have the rights in your folder (which you don't yet), you can "Publish" the page, which makes it show up in a Quick Search (that box in the top-left corner of every page); unpublished content can only be found by clicking links, or doing an Advanced Search. (This restricts what can be found by first-time visitors, and helps us hide all of the old content we haven't cleaned up yet!) You can also make a page "Private", so only its owner(s) can see it. (Note: To edit a Published page, "Retract" it back to the "Draft" state first.)

Let's try the green tabs next:

• Click on the "View" tab, and notice that nothing much changes, since that's where you were already. :)
• Click on the "Edit" tab, and you'll have a chance to modify your page.
• Click on the "Properties" tab, and you'll find some obscure options you don't need to worry about right now. ;)
• Click on the "Sharing" tab, and you'll find tools to let you give specific users (or groups) specific rights (which you must already have) to your pages and folders, including shared write access! (To share a whole subtree, just share the top folder.)

Note the warning message you get when you click "Sharing" on a Page, which says: "Attention! You are setting the sharing permissions for a Page. If you want to set the permissions for its container, click here." The word "here" is a link; please click that, to go to the "Sharing" tab for your own personal folder.

Go down to the first "Search term" box on that page, and type in my username, "mdonovan", and click "Perform Search". That part of the page will change to show all matches (just me) and a box listing the "Role to assign"; if (don't do this now!) you clicked "Owner" and then "Assign Local Role to Selected User(s)", I would then have full rights to that folder and all subfolders. (You can take those rights away again later using the form at the top of that page.)

Now, click on the green "Contents" tab, which only shows up when you're looking at a Folder (or something "folderish").

You'll see a table with many columns:

• A checkbox, which selects items for use with the buttons below the table ("Copy", etc.)
• The title of the page (which you can change from that item's "Edit" tab)
• The size of the item (mostly important for Images and Files)
• The date of last modification
• The publication state (typically "Public Draft")
• The "Order" column, with up and down arrows

This is what Plone calls an "Ordered Folder", meaning that it doesn't get alphabetized for you, and you can rearrange the items into whatever order you like. (Moving items via drag-and-drop works too!)

Why would this matter? Click the "View" tab on the folder to find out.

What you should see next is an ordered, summarized list of items in your folder (just one right now), and a new menu on the green bar called "Display", with several choices:

• Summary view (sections with "Read More..." links)
• Tabular view (like the "Contents" tab with different columns)
• Thumbnail view (good for folders full of Images)
• Standard view (just a quick paragraph for each item)
• Select (lets you pick a page to act as "index.html" for the folder)

If you change the view, you may need to "force reload" to see the change.

There is a special situation which overrides the "Display" menu: if a folder contains a page called "index.html" (or any of several variations thereof) it is automatically treated as the Selected View, and nothing short of renaming that page will turn that off.

One last step before we're done: Go to the "Contents" view of your personal folder, click the check box next to your "Sample Page", and then click the "Rename" button below the table.

In the form which comes up, you'll see two boxes:

• New Short Name, which shows the "filename" for the page, which will be used in links; change this to "sample.html"
• New Title, which shows the page's title, which we'll leave alone right now

Then click "Rename All". (This method lets you rename many files at once; you could also View the page, click on the Actions menu, and choose Rename to get to the same form.)

When you get back to the "Contents" view, hover your mouse pointer over the green "Sample Page" link in the table, and notice two things:

• When you hover over a page's link, the page's Description shows up in a little yellow box
• In your browser's status bar, you'll see the link now goes to "sample.html" instead of "sample_page".

If you click on that link, you'll see a Plone (version 2.5.0) bug: you'll go to the nonexistent "Contents" view of your Page; you can then click on the "View" tab to fix your view. (This won't bother anonymous site visitors, since only content owners ever see the "Contents" tab and the buggy link. Plus, this will be fixed soon anyway!)

Notice that Plone didn't give you a chance to specify a filename for your new page, and made up a name without any ".html" on it. If you are working entirely within Plone, this isn't important, and shouldn't be a problem; if you plan to bring pages in and out via FTP, however, you'll want to get in the habit of checking and/or fixing filenames whenever you create new content. (Tip: if the new page Title looks like a filename, Plone will *usually* do what you'd want.)

OK, play time! Please go to your personal folder and create several Folders and Pages, and maybe upload a few Images, too. You may also want to try out the other editor options (in your Personal Preferences) to decide which one suits you best.