1

Web Training Course: Introduction to Web Editing Version 1.4 October 2007 Version 2.0 December 2007 Version 3.0 September 2008

Course Rationale:

The university recently rolled out new Web publishing templates to all organisational units. The templates are only editable using our Content Management System (CMS).

The CMS is a Web page online editing tool that replaces existing tools used by organisational units, (namely MS FrontPage, Macromedia Dreamweaver, and WS­FTP). This tool allows users to quickly, safely, and easily:

• Create new Web pages • Change textual content on their Web pages • Upload and insert images into editable areas of their Web pages • Manage their Web site’s side navigation bar • Edit Meta Tags (used by search engines for page ranking)

Aims & Objectives:

To familiarise university Web administration staff with NUI Galway's Web Services, Web content generation, using the Web, and an introduction to the Content Management System (CMS).

Prerequisites:

• You are a university Web administrator

Course Content:

1. Introduction to Web services provided by NUI Galway 2. NUI Galway’s Web policy and Web publishing template 3. Web content generation 4. Using the Web 5. Introduction to the Content Management System (CMS).

2

1. Introduction to Web services provided by NUI Galway

1.1. Web Services management

• Kieran Loftus – Director of Computer Services • Pat Dempsey – Head of Strategic Services, Computer Services

1.2. Web Services team

• Denise Melia, Technical Specialist • Cillian Joy, Web Editor • Evan Ryder, Web Technologist • Web site: http://www.nuigalway.ie/web/

1.3. Services provided

• Web site hosting • DNS hosting • Web training • Automated broken link notification system ­ 404 email • Tools

o HTML cleaner o IP address o Header information o Page load timer

1.4. Add­ons provided

• Labelled interactive campus map • New and recently updated pages list • Random images • Printer friendly pages • RSS reader • Search facility • Online survey framework • Online tutorial booking system

3

2. NUI Galway’s Web policy and Web publishing template

2.1. Web policy framework

University­wide policy and standards framework contain two documents.

• Top level policy document • Web standards document ­ outlining mandatory standards, covering three

distinct areas i. Organisational responsibilities ii. Layout – describes which Web publishing template is required for

which organisational unit category. iii. Content

Available at http://www.nuigalway.ie/web/documentation/

2.2. Web publishing standard template

This template applies to organisational units’ Web sites that cater to a specific target audience as outlined below. The template incorporates certain flexibility allowing the sub­site to establish a slightly customised look and feel, based on the corporate template.

• University Management Offices • Faculty Offices • Administration Offices • Departments • Services Offices • Research

For an example of this template view http://www.nuigalway.ie/hr/

Different style sheets and header images are loaded depending on the category of the Web site. Each style sheet is colour coded, for example “Administration & Services” is blue and “Current Students” is yellow. For details of all the colours used, view the Web page (http://www.nuigalway.ie/colours_used.html). Header images loaded are randomly selected from specific categories, again, depending on the category of Web site. The images are loaded from a central image library and broken into the following categories: Research, Future, Current, About, Admin, Faculty, All, or General.

Options:

• Standard – no right bar • Standard – with right bar • Standard – full width

4

3. Web content generation

3.1. Web content generation guidelines

The university Web content generation guidelines encourage the creation of effective Web sites. These Web sites establish a clear identity for the university on the World Wide Web consistent with the university's standing as an internationally recognised, research intensive university with an excellent teaching reputation.

The guidelines encourage the development and maintenance of sites to facilitate ease of access for users moving from site to site across the university Web site. This is achieved by bringing a measure of consistency to the design, navigational methods, structure, and language used.

General Objectives of University Web Guidelines

The university seeks to ensure that Web sites published under its domain are

• Authoritative, • Secure, • Accurate, • Relevant, • Current

Authoritative

Appropriate control should be exercised over information and services published on the World Wide Web in order to ensure that they effectively meet the other objectives as listed above. Official Web sites must be immediately identifiable as an authoritative source of information by their adherence to consistent design measures.

Secure

Appropriate security precautions should be taken to protect the information from interference and inappropriate access. Computer Services are responsible for the security of the system.

Accurate

Information made available should accurately reflect university policies and positions. Organisational units should avoid disseminating or duplicating information for which they are not the primary source.

5

Relevant

Information made available should address the particular needs of potential clients and users of the Web site. Information should be presented in a user­ focused fashion.

Current

Appropriate procedures and technologies should be employed to ensure that the information made available is always up to date.

3.2 Organising information

Without a solid and logical organisational structure, your Web site will not function well even if your basic content is accurate, current, relevant, attractive, and well written. It is accepted that most people can hold only about four to seven discrete chunks of information in short­term memory. The way people seek, use, and reference information also suggests that smaller, discrete sections of information are more functional and easier to handle than long, undifferentiated sections or Web pages.

There are five basic steps in organising your information [1]:

1. Divide your content into logical sections 2. Order these sections according to importance 3. Use this order/structure to define navigation – thereby creating a sitemap 4. Build a Web site (file structure) that is closely based on your sitemap 5. Analyse and review success of the Web site’s navigation from a functional

and user perspective

6

A sitemap is a collection of hyperlinks that reflects the structure of your Web site, based on the importance you placed on each section. This sitemap is the basis of your Web site’s navigation.

When you have created a sitemap you can begin generating content for your Web site. The sitemap should be your starting and your reference point throughout the process of creating and maintaining your Web site.

From the sitemap, you generate the file structure, which is the logical arrangement of files and directories on the Web server.

[1]

7

Example:

Sitemap

• Home • Services

§ Hosting § Training

• Help § Support

• Telephone • Email • Web

§ FAQs • Staff • Contact

File Structure

8

Exercise:

A local fitness club have been in operation for a number of years. They have many loyal members who participate in the club’s many activities. Recently, they introduced several new classes and timetables and want to publicise this to both existing and potential members. Traditionally they would have distributed brochures and flyers; however, this is no longer cost effective. Therefore, the club has decided to use a Web site to inform everyone. In addition, the fitness club would like to provide general information about themselves, their history, and founding members etc on the Web site. In particular the fitness club would like to highlight the new classes and changes to the timetable in each of these areas on the Web site:

• Gym • Pool • Tennis • Fit zone

Finally, they would also like to include information on prices for all activities/courses and contact information.

As a Web administrator you are asked to generate a suitable sitemap and file structure for the club based on the information they have available.

9

Sitemap:

File structure:

10

4. Using the Web

4.1. What are the Internet and the World Wide Web?

The Internet is a network of computers across the globe allowing individuals to communicate with one another. Often called the World Wide Web or Web for short, it is a collection of electronic documents that are linked together in a structure similar to a spider’s web. These documents are stored in various locations around the globe on computers called servers. [2] [3]

4.2. What is the Web made of?

The Web is made up of a user’s Personal Computer (PC), Web browser software used to gain access to the Web, a connection to an Internet Service Provider (ISP), servers to host the data, and finally routers and switches. The routers and switches are used to direct the transfer and flow of this data for viewing as Web pages in Web browsers. [2] [3]

4.2.1. Web Browser

An Internet browser is a software programme used for accessing and navigating the Internet to view Web pages on a PC. A browser, also known as client software, retrieves data from servers and displays this data as Web pages. The two most commonly used browsers for viewing the Internet are Microsoft Internet Explorer (IE) and Mozilla Firefox (Firefox). Some others include Safari, Opera, and Netscape. [2] [3]

Title Bar The name of the Web site or title of the Web page can be found in the top left hand corner of the browser screen in the title bar section. It is the horizontal blue bar that runs across the screen. [3]

Address Bar The address bar can be used for navigating the Web. If you know the address of a Web page you want to visit, type the Uniform Resource Locator (URL) in the address bar and press Return/Enter on the keyboard, or Go on the right hand side of the address bar. [3]

Status Bar The status bar is the name given to the bar that runs across the bottom of the browser screen. It reports on the progress of data download and also displays link information when hovering over a hyperlink. [2]

Note: You should be familiar with your browser type and also know the version of the browser you are using. New versions are frequently made available to computer users and we recommend that you upgrade as soon as possible.

11

4.2.2. Servers

Web pages are stored as data on Web servers located across the globe. Entering a URL of a Web page into the address bar of a Web browser or clicking a link sends a request to a server which hosts the data for the required Web page. The server sends the Web page to your PC and your Web browser displays the information on your screen. [2]

4.2.3. Web pages

A Web page is an electronic document written in computer language called HTML. Web pages are usually a combination of text and images. Each page has a unique address, URL, which identifies its location on the server. [2]

The URL must be typed exactly as it exists for the browser to locate the desired Web page.

The meaning of a URL address:

http://www.nuigalway.ie/webtraining/training.html

• http:// Short for HyperText Transfer Protocol, this indicates a hypertext document or directory.

• www.nuigalway.ie ­ this is the domain name. • /webtraining/ ­ this is a sub­directory or folder of the Web site. • training.html ­ this is the filename of the Web page inside the folder.

Web pages usually contain hyperlinks to other Web pages. Hyperlinks can be text hyperlinks or hyperlinked graphic images that reference the URLs of other Web pages. [2] [3]

4.2.4. Web sites

A Web site is a collection of related Web pages. Each Web site contains a home page, which acts like an index, indicating the content on the site, and may contain additional pages. From the home page you can click hyperlinks to access other Web pages. The Internet is dynamically changing therefore many Web sites change on a daily or even hourly basis. [2] [3]

12

4.3. Navigating Web sites

There are many ways to navigate through Web sites and Web pages.

URL Typing the URL of a Web site or Web page into the address bar of your Web browser and then pressing the Return/Enter key or Go button. [2]

Favourites Using the Favourites function of the Menu Bar is a quick and easy way to navigate around previously saved links.

Hyperlinks Clicking a text hyperlink or a hyperlinked graphic image will provide access to other Web pages that have their addresses embedded in that hyperlink. [2] [3]

Side Navigation Web sites generally have a list of links that represent the main Web pages of that Web site. Although the words may not be underlined these items are still hyperlinks.

Note: The hand icon symbol appears when you hover over a text hyperlink or a hyperlinked graphic image.

13

5. Introduction to the Content Management System (CMS)

5.1. Introduction to the CMS

The CMS is a Web page online editing tool that replaces existing tools used by organisational units, (namely MS FrontPage, Macromedia Dreamweaver, and WS­FTP). This tool allows users to quickly, safely, and easily:

• Create new Web pages • Change textual content on their Web pages • Upload and insert images into editable areas of their Web pages • Manage their Web site’s side navigation bar. • Edit Meta Tags (used by search engines for page ranking)

The URL for the CMS is: http://www.nuigalway.ie/cms/

5.2. Data Flow

14

5.3. Explaining the Interface

5.3.1 Login

Login using the URL http://www.nuigalway.ie/cms/ and your username and password for the Web server.

15

5.3.2 File Structure

After you login, the following Web page will be displayed. We call this page the “File Structure page” as it displays a list of the files & folders that make up your Web site.

1: General activity of university CMS users 2: Auto logout display timer 3: Web site File Structure

• index.html – this is your home page and only Web page to start with • /documents/ ­ documents folder which stores all your documents

which are not HTML i.e. PDF, Word, Excel, Power point. • /template/ ­ template folder the contents of which are used by the CMS

as the template when creating new Web pages. Functions

• “New File Here” • “New Sub­Folder Here”

To edit a Web page you must click on the HTML file to open the Web page in Edit mode. To preview a Web page you must mouse over the HTML file to view it in the preview area.

16

Bibliography

[1] ­ Lynch, P. J., Horton, S. (2002). Web Style Guide: Basic Design Principles for Creating Web Sites, Second Edition. Yale University Press

[2] ­ http://www.learnthenet.com/english/web/000www.htm

[3] ­ http://www.aarp.org/learntech/computers/basic_web/a2004­10­15­lti­lesson1.html