Download the Worksheet here (MS Word)

Remember, a big part of really making web analytics work for you is to set clear goals and then decide upon specific metrics to track those goals. The specifics of how to craft goals and tracking schemes are not covered in this document, but Groundwire does offer consulting in this area.

Copy all the code in the Embed box. The URL box will only give you a link to the YouTube page where the video resides, not the code necessary to add it to your website.

Now, go to the page on your Plone site where you want the video to appear. Click the Edit tab and then click the HTML icon to switch to HTML mode. Now paste the code. If you already have content on the page, you may need to know a thing or two about HTML to get it in the right place. If you don't know HTML very well, start with a blank page to insert your video on.

If you've copied the code correctly, it should look something like this:

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/ydLiasdJeoo">
</param><param name="wmode" value="transparent">
</param><embed src="http://www.youtube.com/v/ydLiasdJeoo" width="425" height="350">
</embed></object>

Now Save the page you are working on and the video should be there!

Copy all the code in the Embed box. The URL box will only give you a link to the YouTube page where the video resides, not the code necessary to add it to your website.

Now, go to the page on your Plone site where you want the video to appear. Click the Edit tab and then click the HTML icon to switch to HTML mode. Now paste the code. If you already have content on the page, you may need to know a thing or two about HTML to get it in the right place. If you don't know HTML very well, start with a blank page to insert your video on.

If you've copied the code correctly, it should look something like this:

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/ydLiasdJeoo">
</param><param name="wmode" value="transparent">
</param><embed src="http://www.youtube.com/v/ydLiasdJeoo" width="425" height="350">
</embed></object>

Now Save the page you are working on and the video should be there!

Flickr is a popular, low-cost, powerful web-based service for storing, managing and sharing photos. As such, it makes an excellent tool for creating and sharing polished slideshows. Even better, it is very easy to integrate Flickr slideshows directly into a Plone website. Here are two ways you can embed a slideshow.

Using embed code

You can go to any collection of images in Flickr and initiate a slideshow via the Slideshow button in the upper-right corner of the Flickr site.

Once you've done that, notice the Share link in the upper-right corner. There you will find several ways to share the slideshow, including using the embed code.

Copy the entire embed code and paste it into a page on your site. Make sure you're editing in HTML mode so the code gets applied properly.

Example:

Using iframes

Step 1

Many of us use Word (or similar word processing programs like Open Office, or Text Edit) to create, share, and collaborate on content creation. Word is a great tool to for intra-office use and it works well in conjunction with PowerPoint, Excel, and other Microsoft Office programs. However, Word was never intended to be used to generate web pages or to be used in conjunction with a Content Management System such as Plone.

Copying from Word brings tag attributes, stylesheet information, and invalid HTML into Plone. You cannot see this information unless you switch to the edit HTML mode in the visual editor.

This isn't Plone's or the Internet's fault - Word documents contain formatting information that was designed to be understood by other Microsoft Office programs, not web browsers. Still, it is very common that the bulk of the content an organization wants to post online is coming from Word documents.

Hence the frequently asked question: Can I copy and paste my page content from Word directly into Plone?

The short answer is no. The longer answer is, yes but you need to prepare the content first. You must get rid of the Word-centric formatting first by using either Notepad or Text Edit for Mac users.

Notepad

The best method is to simply copy content from Word and paste it into Notepad. From there, copy the content out of Notepad and paste it into Plone. This removes all the extra formatting that comes from copying out of Word. You will lose formatting such as bold, italics, font sizes, and so on, but you can use the toolbar in Plone's visual editor to recreate it. This method is the "cleanest" way to move content from Word into Plone.

Mac users can use Text Edit to accomplish the same thing. Be sure that Text Edit is in "plain text" mode.

Examples of Word Formatting

Below is an example of what problematic Word formatting looks like. If you happen to see this kind of formatting information either rendered on a page, or in the HTML view of your Plone page, you (or someone you know) probably copied the content from Word without going through Notepad first.

<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
 </w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
 /* Style Definitions */
 table.MsoNormalTable
    {mso-style-name:"Table Normal";
    mso-tstyle-rowband-size:0;
    mso-tstyle-colband-size:0;
    mso-style-noshow:yes;
    mso-style-parent:"";
    mso-padding-alt:0in 5.4pt 0in 5.4pt;
    mso-para-margin:0in;
    mso-para-margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
   }
</style>
<![endif]--><!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext="edit" spidmax="1026"    />
</xml><![endif]--><!--[if gte mso 9]><xml>
 <o:shapelayout v:ext="edit">
  <o:idmap v:ext="edit" data="1"    />
 </o:shapelayout></xml><![endif]-->

This kind of inline style information will conflict with the stylesheet information in Plone. In short, you may observe strange behavior on your pages.

In order to get rid of it, you will have to edit the HTML of the page (via the HTML icon in the visual editor), or simply delete the page and start over!

What is a shortcut?

Also known as 'hot keys' a keyboard shortcut is a combination of keystrokes which sends a particular command to your computer. In the examples below, most of them will use the CTRL key plus a letter on the keyboard. Note to Mac users - simply substitute the 'command' or 'apple' key in place of the PC-centric CTRL button.

The Moves

• CTRL+C - Copy
• CTRL+X - Cut
• CTRL+V - Paste
• CTRL+Z - Undo
• CTRL+A - Select All
• Shift+Enter - Line break (very useful for getting page layouts right)
• Shift+Del - Remove line break

What's Wrong with Using a Mouse?

We've got nothing against the trusty rodent but some applications disable the familiar right-click menu. In those cases it's helpful to be able to fall back on the original data entry device: your keyboard! Plus knowing keyboard shortcuts make you look like a computer genius.

One of the concepts that many newcomers to Plone struggle with is understanding how or why Plone displays the content that it does. It's fairly obvious how content on a page got there: you simply edit the page and use the visual editor to add content. But what about folders and collections?

Containers and Aggregators

Certain content types in Plone are what are called containers. A folder is an example of a container in Plone. Simply put, a folder is a content item that contains other content items (such as pages, images, and files). Collections are also containers, although more properly they are called an aggregator. The items in a collection don't literally reside there as they do in the case of folders; instead a collection aggregates content items from the site and displays them in one place.

When working in Plone, you don't necessarily need to make distinctions between aggregators and containers other than to realize that only these content types have the display menu available to them. Pages, images, files and so on do not have the Display menu.

Folder Views

Let's start with a discussion of folder views and the options available in the folder's Display drop-down menu. There are five default options available in a folder Display menu. They are:

• Summary View - Displays folder contents by Title & Description. If the content item being displayed has an attached thumbnail image (i.e. News Item), it will appear also.
• Tabluar View - Items are displayed in a simple table by Title & Type. If you are logged in as a Manager, you'll also see the Author and Modification Date.
• Thumbnail View - This viewed is designed for Images only to create a simple photo gallery. Images are displayed as thumbnails which click through to the full-sized image.
• Standard View - The view a folder has when you first create the folder. Items are listed by Title & Description.
• Default Content Item View - If you want to use the content of a single item in the folder, use this view. This is most commonly used when you desire a folder to have a 'landing page' instead of a listing of contents.

Collection Views

A Collection has all the same views available to it that a folder has, plus a special Collection View. By default, the Collection View and Standard View appear identical but your web developer can customize each independently of each other. Note that you select Collection Views in the Display menu under the Item Display heading (the bottom half of the menu) and not the Folder Display heading (top half of the menu).

Remember, Collections aggregate content items - they do not contain them. That is to say that you cannot literally move items in and out of a Collection in the same way you can with a Folder. However, as a site manager you can make bulk changes to items aggregated in a Collection by appending "folder_contents" to the end of the URL of the Collection. For example:

http://www.mysite.org/news/aggregator/folder_contents

Custom Views

Many Plone add-on products provide additional views for folders and collection as well as custom views your web developer may have created for you. These views will be available under the Display menu along with the standard Plone views.

Basics of HTML

HTML uses what are called tags to give a document its layout and some of its formatting. All HTML tags are denoted by the "greater than" and "less than" symbols, sometimes referred to as "angle brackets". Here are some examples:

<p>This is a paragraph of text</p>

<p>An image can be displayed like this: <img src="../../logo.jpg" /></p>

Notice that text is contained within the HTML tags. You can always tell where a tag ends because you'll see the same tag with a forward slash like this: </p>

You can use the page text to help orient yourself when looking at a large HTML document, as it can be confusing at first with all the tags alongside your page content.

Things to Look For

One of the most common problems in page layouts is that you either have too little or too much spacing between paragraphs or headers. No matter how many times you keep pushing enter or delete or starting over, you still can't get the spacing quite right. Look at the HTML code of the page and be on the lookout for:

• Empty paragraphs - They look like this <p>&nbsp;</p>
• A line break - They look like this <br /> or <br>
• Other troublemakers - <blockquote></blockquote> OR <div></div>

Those are fairly easy to spot when they're all by themselves. Things get a bit more tricky when content you DO want to keep is wrapped inside an HTML tag you didn't intend on. Here's an example:

<div class="portal-content">
<p>Some text I'd like to keep, but for some reason there's some 
extra blank space above this paragraph</p>
</div>

Notice that the paragraph you want to keep is wrapped inside a <div> tag. If you want to get rid of the tag, you must remove both the start <div> and the end </div>. The result would then be:

<p>Some text I'd like to keep, but for some reason 
there's some extra blank space above this paragraph</p>

Signal-to-Noise

Most of the examples above have been very simple. A page with many elements (i.e. lots of formatting) will look much more confusing at first. One reason is that many of the tags will contain attributes, which basically add to the amount of characters you must scan over to find the part of the document you're trying to troubleshoot. For the most part, you can ignore those tag attributes (unless you know some things about them and how Plone uses them).

Attributes look like this:

<p class="align-left">Some text here with an image next to it
<img src="../../logo.jpg" alt="Our Logo" class="image-inline" id="news-item" /> 
</p>

Most browsers support text searching, which can be a convenient way of find the part of the page you're trying to edit. I use the keyboard shortcut: crtl+f to initiate a search.

A List of Common HTML Tags

Below is a list of common tags you're likely to encounter when troubleshooting a page in Plone:

• <p> Beginning of a paragraph
• </p> End of a paragraph
• <br /> or <br> A line break
• <strong> or <b> Start of bold text
• </strong> or </b> end of bold text
  
• <h2> A heading
• </h2> End of a heading
• <h3> A subheading
• </h3> End of a subheading
• <a> Beginning of a link, usually with tag attributes like this: <a href="http://www.site.org">
• </a> End of a link
  
• <img> An image, usually with tag attributes like this: <img src="http://www.site.org" class="image-inline" />
• <ul> Beginning of a bulleted list
• <li> An item in a list
• </ul> End of a bulleted list
• <ol> Beginning of a numbered list
• </ol> End of a numbered list
  

Copy and Paste from a Website or Word Document

Getting Your Pages to Look the Way the Used to

Troubleshooting: Tricks and Tips

Moving Images into Plone

The Short Name

Plone actually has two names for everything. Title, which you are already familiar with, and something called the Short Name. The Short Name is always in lowercase and uses hyphens instead of spaces between words. The reason for this is that Short Name is used to generate the URL for the item in question. In other words, if you simply change the Title of something, without also changing the Short Name, things can get very confusing.

To change the Short Name, go to the Contents tab of the task bar. Then select an item or several items to rename from the list and push the Rename button.

Now you'll see a screen that shows all the items you selected to rename. It looks like this:

If you need to rename something, the best practice is to change both the Short Name and the Title to the same thing. As you can see, About Us should be written about-us for the Short Name. The importance of renaming this way becomes very apparent as your site gets bigger and bigger. Links will break, and things will get hard to find if you are not consistent about your naming.

A couple of things to keep in mind:

• Changing the Short Name causes anything that is linked externally to that item to stop working (such as from an email or other website).
• You can't change a Short Name to anything that already exists in the same folder.  In other words, if there's already a folder called  "about-us", you can't rename something else with the same short name.

Now simply select the items you'd like to modify by checking the box next to it. You can select everything within a given folder by clicking the top most box. Now, you may copy, cut or delete the selected items. If you chose copy or cut, you'll see that Paste is added as a choice after the page reloads. In order to paste the item into a new place in the site, you will need to navigate into that area. For the example shown above, if you wanted to move the "News" item into the "Programs" folder, you would click on the name "Programs" and then click the Paste button.

Rearrange Content

The order that contents list in the navigation, or in folder listings depends on the order those items appear in the containing folder. With the Contents tab, you can rearrange the items in a folder.

If you need to rearrange the items within a folder, hover your mouse pointer over the order column of the Contents view. You can then click-and-drag the item within the folder listing.

1. Go to the proper folder (usually the Images folder) and click on the Add New . . . drop-down menu
2. Select Image or File from the menu
3. Next, you'll be taken to the edit screen for that content item
4. Fill in a Title and Description
5. For images, try to use the complete file name for the title (i.e. mypicture.jpg)
   
6. Browse to find the image or file on your hard drive
7. Push Save to finish

Tips for Preparing Images

Before you are ready to add a new image to your Plone website, you need to consider a couple of things. Many images, as you find them, are not ready to be uploaded and used online. Many are too big and must be resized or compressed before it is appropriate to include them on your website. Here are the three guidelines for preparing images:

1. How big is the image? This is the the actual dimensions of the image in pixels. For the most part, any image larger than 250 pixels square is going to be too big to include on a webpage. 150 pixels square is a typical size, good for staff photos and the like. To resize images, you'll have to use some type of image software like Photoshop or XnView.
2. What is the filesize of the image? This is how big the image file is in bytes, usually expressed as kilo- or mega- bytes. Images much larger than 50Kb are not recommended as they will make your site difficult to access for people using a dial-up internet connection. To make image files smaller, you may need to apply compression.
3. What format is the image in? This refers to the file type of the image, such as, JPEG, GIF, PNG, BMP and so on. For the best results, stick to JPEG and GIF as they are the best supported formats around the world. The difference between JPEG and GIF lies in how they render image information and how they handle compression. It's too long of topic to go into here, but you can better familiarize yourself with these formats with the Preparing Images for the Web tutorial.

Tips for Files

Just to be clear about definitions, when talking about a File in the context of Plone what we mean are things like a Word, Excel, PDF, MP3, or MPEG file. In other words it is a document that you intend your site visitors to download and view locally on their computer. When considering files, there are two possible scenarios for how they will be used:

1. You may have some content that you wrote in a Word document and want to put that content on a webpage. As long as the content is fairly short, you would want to simply create a page, and then copy-and-paste the words onto the webpage.
2. Sometimes though, you really do want your site visitors to download a copy of the file. You usually aren't going to post a Word document for download unless the document is really long (like a 50-page report or something). The other file formats mentioned above usually ARE posted for download, especially PDFs and Excel documents.
3. To allow your site visitor the chance to download your file, use the Internal Link and create a link from a page to your file. When you do, indicate in the link text what the file type and size are. For example: Download our annual report (PDF 1.5Mb).

Navigate to the page you want to insert an image.

Click on the Edit button in the toolbar to edit the page.

Place your cursor in the spot where you want to insert the image

Click the Insert Image icon from the toolbar. You should now see a window that looks like this:

Now navigate to the image you want to use.

Hint: You have to click on one of the folders on the left to populate information in the middle column.

For instance, clicking on "home" will give you choices to select from in the middle column. Then you can navigate to the location of the image you wish to use.

Choose image settings

Choose an alignment, image size and change the "alt" text, if you wish. ALT-text is the text that will be shown to users whose web browsers can't display images, or used for vision-impared web browers. In most browsers, the ALT-text will also appear when a person hovers the mouse over the image. By default, Plone will use the image's Title as the ALT-text or you can put some sort of brief descriptive text here.

Uploading Images

In this example, the Sunset image had already been uploaded to the site. If you need to upload an image, you can do so using the Insert Image button. Simply click Upload Image Here, instead of choosing a pre-existing image.