V Vancouver Community Network the Regional Freenet

v Vancouver Community Network the regional FreeNet

Instructors Guide: WebGUI Basic Training

Session Outline (Length: 2 1/2 to 3 hours)

Summary: WebGUI Content/Application Framework

Learning Objectives:

· To learn the basic parts of the WebGUI interface
· To learn create a page
· To learn how to add some basic Wobjects to a page.

Session handouts:

How To's:
· Add a Page,
· Add an Events Calendar,
· Add an Article,
· Add a Link List
Other:
Disks with images for learners to use

Pre-workshop Check list:

Create a training area with a page for each of the participants. Make certain that each page has its own unique owner.
Check that the user logins work for each of the pages and that any content remaining from previous sessions has been deleted.
Does the website you are training on have a Flexmenu down the left side of the page?

Web Design Tips:

1. Keep it simple: short simple names and titles

2. Remember that different browsers, and the same browsers on different kinds of computers (eg., Linux, Mac, Windows), will display certain elements of your page differently. Also, not everyone has the same kind of hardware (video cards, monitors). What looks good on your computer may look silly, confusing or just plain ugly on another: keep it simple.

Introduction

WebGUI is a web-content creation and management system. Using WebGUI, it is possible to create and maintain a web site without having to understand any computer languages. WebGUI does this by providing a number of pre-made templates or Wobjects [“web objects"].

Objective #1: Explore the WebGUI Interface 5 min

Point out:

- Web banner header at the top and flex menu on the left side (the Style Sheet - learners won't need to change this)

- Central part of the page (the Template - this is where you will be working)

Objective #2: How to Get Started 10 min

User Task: Login

1. Go to the designated area.

2. Click on Login.

3. On the login screen that appears, enter your WebGUI username and password in the appropriate fields.

4. Click the "login" button.

NOTE: ALWAYS LOG OUT from WebGUI!! WebGUI uses what is called persistent logins. If the browser and/or computer are shutdown or turned off without you having logged out from WebGUI, the login persists until the session ends. How long a session lasts depends on the setup of the site. It can be FOREVER. This means that anyone who sits down at the same computer as you can point the browser at your site, and will automatically be logged in as you. This is bad, especially at public terminals. ALWAYS LOG OUT from WebGUI!!

User Task: Click on "Turn admin on"

Point out:

- There are now three drop down menus across the top of the page;

- The "turn admin off" and "help" options in the right hand drop-down menu called "Administrative functions...";

- The "Paste from clipboard..." drop-down menu.

- Explain the difference between cut and delete – delete after a waring gets sent to the trash and cut goes to the clipboard;

- The "Add content..." drop-down menu – where the Wobjects are accessed;

- That there is now at least one funny yellow "Edit" bar with buttons on it(them);

Objective #3: Creating Content 1 hour

Explain:

- WebGUI allows easy webpage creation by providing pre-made components called "plug-ins" or "Wobjects" (web objects);

- Wobjects function like templates. After selecting the type of Wobject required, you fill in a form which defines this particular copy of the Wobject;

- For example, if you have some story to tell, an "article" Wobject can be used. If you want to collect or present photographs, a "User Submission System" Wobject is called for. There are several other kinds of Wobjects such as "Message Board", "Events Calendar", "Link List". The most fundamental Wobjects are the "Page" and “Article” Wobjects;

- That you must first "turn admin on" to be able to add or edit any web object;

- Need to have editing privileges for a page before anything else can be added;

User Task: Create a page

- From the "Add content..." drop-down menu, select "Page" [See “How to Add a Page”];

- Highlight the following under the Page Property Tab:

· Title: Enter your page title. WebGUI uses this information in a number of ways. One is that it appears on the top of the browser in the title bar and the other is for a page tree, which is a long list of all the pages in the site. In addition when you cut and paste this page, the Title will appear in the clipboard. Therefore, it is good to be somewhat descriptive with this feature.

· Menu Title: Enter the name you would like to appear on the menu that goes down the left side of the screen.

· Page URL: Enter the name to appear in the URL, or address, of the site you are creating. You do not need to enter the entire URL, simply the name. If the URL of your site is vcn.bc.ca then the name you enter for the page will appear as: vcn.bc.ca/name. It is good to keep this short yet descriptive. If there is another page in the site with the same name, WebGUI will add a number to the name you have entered. You can re-edit the page if you would like to change the URL.

- Highlight the following under the Layout Tab:

· Layout: Layout determines how the top image and side menu bar on the page look. You can select from several styles in your site. To create a new style you need special privileges and also to have some knowledge of HTML. If you wish to change the current page and all the sub pages to this particular style, select "Yes" to change all the pages under this page to this style. If there are not any sub pages or you are not at a sufficient user level, this option will not appear.

· Template: Template sets where the web object (Wobject) you add to the page goes. The page is divided up and each section is given a number (e.g. from 1 to 4). When you add content you can choose which section to place the Wobject. The default page has only one section. If you choose this, everything goes into the same area. When you choose another template (for example, Side by side, or Three over one) you will see a little diagram of how the page will be divided. You can also select yes or no to change the styles to match this for all your pages.

- Click on "save";

Explain:

- The new page has its own little yellow edit bar and appears as a child or sub-page indented from the original page.

User Task: From the current location create another new second page.

Explain:

- The new page is indented from the previously added page. Show that when you return to the original page the second page is hidden in the hierarchy. Now we are going to move that page to a different location.

User Task: Return to the second page and cut it to the clipboard. Return to the original page you started with and paste the cut page from the clipboard. [Center drop-down menu].

Explain:

- Both the new pages are aligned with the original page.

User Task: Create an Events Calendar on the first page you created.

- from the "Add content..." drop-down menu, select "Events Calendar";

- "Title" - this is the title your EC Wobject will have;

- "Page Template Position" - This refers to page templates chosen when creating a new page. This will matter only for some page templates. The default template, for example, has only one position. The three over one template, however, has four positions. A small template diagram appears immediately below demonstrating the available positions on the chosen template;

- "rich edit" - applies to the "Description" text area described below. For those who don't know HTML, rich edit provides some simple formatting options. A separate window opens in which to edit;

- "Description" - The text you type here will appear between the Calendar title and the calendar itself. You might want to give a brief description of what is to be found in the calendar, how the calendars are laid out;

- "Template" - describes how the EC will be formatted.

- "Calendar Month (Big)" shows a calendar on a monthly basis with the title visible on the date of the event. Clicking on any given event gives you the details of the entry. Small, only highlights the date. List, lists all the details, no extra dates.

- Start Month

- End Month – the number of months entered here will be displayed under the calendar as numbers, i.e 1,2,3,4,5… with a Next (previous) Page [sic] (should be Calendar) button

- Default Month –the calendar will move along. You can make it current or the first month in the events.

- Paginate after – makes a new page after x number of entries

BREAK FOR 10 MINUTES

User Task: Create an article on the second page you created.

- from the "Add content..." drop-down menu, select "Article";

- "Title" - this is the title your article will have;

- "Page Template Position" - This refers to page templates chosen when creating a new page. This will matter only for some templates. The default template, for example, has only one position. The three over one template, however, has four positions. A small template diagram appears immediately below demonstrating the available positions on the chosen template;

- "rich edit" - applies to the "Description" text area described below.

- "Description" - This is where you type the body of your article. This is different from most if not all other Wobjects where Description is a brief explanation of the information to follow. For articles, "Description" is the information itself, not a brief explanation;

- "Template" - describes where an accompanying photo/image will appear: to the right (default), centred, or to the left. Linked image with caption allows you to add an image and make this image itself a link to another page. The image appears to the right, text to the left. You must also enter a URL for the image in the Link field. See: http://cln.vcn.bc.ca/index.pl/wobj_examps

- "Image" - name a file on, or browse, your local machine to find an image to accompany the article. The named photo will appear in whatever position was selected in "Template" above;

- "Attachment" - another file can be associated with your article as an attachment. This could be a supporting article, background information, a sound file, or maybe a second photograph. Name the local file to attach, or browse for it on your local machine;

- "Link" - a link to an external site (or another page on the current site) can be included with the article. Unlike the accompanying images and attachments mentioned above, a link is not accessed locally. Give the address in the URL field (eg., http://www.vcn.bc.ca) and a descriptive phrase in the "...Title" field (eg., "The infamous home page of the celebrated VCN"). The link will not appear if you don't give it a title. This is also where you enter a link if you want a linked image;

- "Convert carriage returns?" - set to "Yes" if you want carriage returns (new lines, line breaks) that you entered in the "Description" text area above to be maintained. If you select "No" the text you entered in the "Description" field will appear as one big block of text without paragraphs;

- "Allow discussion?" - if set to "Yes", readers will be able to post comments to the article and to each other's comments;

- Click the save button.

User Task: Create a Link List on the third page you created.

- from the "Add content..." drop-down menu, select "Link List";

- "Title" - this is the title your Link List Wobject will have;

- "rich edit" - applies to the "Description" text area described below.

- "Description" - The text you type here will appear between the Title and your list of links. You might want briefly to explain the focus of your Link List; See here for examples: http://cln.vcn.bc.ca/index.pl/linklist

- "What next?" - you can either add your first link, or go right back to the page and add links at a later time;

- Click the save button.

Adding a link:

- Make up a title for the link you are adding, and put the target address in the URL field. For example, if you want to list a link about open source software, you might provide a title of "Computing Freedom" and to go with the URL http://www.opensource.org/;

- For links to articles on the Carnegie's 100th Anniversary, go to the Vancouver Sun website and look for the article on April 26th.

- "Open in a new window?" - If you click "Yes", the link will open in a different browser window leaving the page the link was on intact. If you click "No", the linked to page will open in the current browser window replacing the current contents;