Creating and Managing a Web Site
University of Cambridge, March 2012

Computing Service Course

Helen Sargan <hvs1001@cam.ac.uk>

[University of Cambridge]

Creating and Managing a Web Site
University of Cambridge, March 2012

Hit the space bar for next slide, or use arrow keys to go back and forth between slides

Introduction

Website design has four main aspects

Planning the Site - 1

Resources (human and hardware) and skills


Planning the Site - 2

Hosting of the site and design work required

There are a number of alternatives in the University both for hosting and for the availability of University templates.


Planning the Site - 3

The process of developing a site

The process of developing a site is in several strands - see http://www.webstyleguide.com/wsg3/1-process/7-development-process.html


Examples of audience groups


Planning the Site - 4

The home page

Planning the Site - 5

Structuring your content (information architecture)

Aim for a hierarchical structure with a home page at the top of the tree, and several major submenus within branches of your tree. The major links off the home page are the branches of information. This gives 'browse functionality' by contextualising content within sections. Folders and sub-folders form the sections.

http://www.webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html gives different models for structure.

Planning the Site - 6

Example structure of a department

departmental information architecture

The orange (darker) boxes are directories/folders and the yellow (lighter) are pages.

Designing the site - 1

University web page templates

If you are working on University pages, then there are guidelines and templates available to you (at http://www.cam.ac.uk/about/webstyle/) that have been tested and are accessible.

If you use the Falcon content management service, the site is already templated with the University templates, although you can select from a number of colour schemes and features.


Designing the site - 2

Creating your own templates

Aim for:

Recommended reading: Web style Guide - see http://www.webstyleguide.com/wsg3/6-page-structure/3-site-design.html


Looking at designs


Designing the site - 3

The home page

Second level and 'content' pages


Designing the site - 4

Creating a navigation scheme

Navigation is essential to direct users around your site. Navigation devices allow them to enter the site at any point and to get to other areas they might want.

Examples


Designing the site - 5

Making a grid


Designing the site - 6

Creating templates

Create a code framework that will deliver the grid.


Designing the site - 6

Technical recommendations for designs


Designing the site - 7

Accessibility requirements

The Equality Act 2010 mandates that web information and services provided by an institution or part of an institution, either as information or services for students or prospective students or teaching materials, must be accessible, and you must anticipate this requirement. Accessibility applies to:

TechDis makes available some useful recommendations for technical teams (http://www.jisctechdis.ac.uk/techdis/userneeds/seamlesssupport/technicalteams) and details about creating accessible materials (http://www.jisctechdis.ac.uk/techdis/userneeds).

There is an overview of the accessibility of University pages at http://www.cam.ac.uk/site/ and a full University Web Accessibility policy, which was updated in April 2010/May 2011, at http://www.cam.ac.uk/site/accessibility/.


Designing the site - 8

How to make your web pages accessible

There are guidelines for how to make content accessible available at http://www.cam.ac.uk/site/accessibility-guidelines/pages.html – here is a synopsis of what they say:

Excellent information about web accessibility may be found at the WebAIM site.


Building and testing the website - 1

How to manage your content

Web page content can be inserted by hand into template files, which can be useful if you have only a few pages, other wise it is very time consuming and subject to error. Increasingly content is being managed in content management systems, but there are more simple ways to manage content in templates.

Building pages without using a database can utilise a set of templates. There are a number of ways they can be used:


Building and testing the website - 2

Databases

The use of databases on the web is usually referred to as being at the 'back-end', because they hold the information for the page in a raw form that will be finally presented possibly in a number of different ways.

There are two basic ways that databases can be used on the web:

Databases will only be effective with suitably structured data.


Building and testing the website - 3

Simple templating and automating

Pages created from a database into a template framework are no different to standard web pages - the pages are assembled using a script that takes the data and inserts it by some means into a template, which is then stored in a static form until a further update of the content takes place. It is virtually impossible to detect pages that are generated in this way as their final appearance is of a static page.

Virtually any database can be used in a simple way to generate pages by inserting database fields into a template composed of the html. The set up has to be very detailed if components of the template that could be dynamic, such as navigation, get changed, so it’s only suitable for simple sites or tranches of content.


Building and testing the website - 4

Using and repurposing Wikis and blogs

At a simple level both wikis and blogs are websites. Several technical users have looked at the wiki as an ideal way to have direct input to web pages and have developed tools for this re-purposing.

Blogs can also be used more broadly for publishing a website (see http://manila.userland.com/ but other blogging tools can be used). Since version 2.5, WordPress has had options that allow it to publish a website instead of a blog - see http://codex.wordpress.org/Pages for information.


Building and testing the website - 5

There are a group of products that put in place a framework for managing information, on top of which can sit a more specialized module for content management. The are often, but not solely, open source, and a number are listed here:

Product Type of product CMS add-ons or other info
Apache Cocoon Open source (Java) None undergoing development in last year
Daisy
Hippo
Lenya
HTML::Mason (with links to Mason v2) Open source (Perl) Bricolage (undergoing active development)
PHP plus database Open source Drupal, Joomla, ModX (and many others)
Zope Open source (python) Plone
Atex/Polopoly Commercial (Java) Polopoly content manager
Contensis Commercial (ASP) integrated
Terminalfour Site Manager Commercial integrated

In 2011 the Packt Open Source awards the following all were mentioned: Drupal, Joomal, Plone.

http://www.cmsmatrix.org/ is a handy CMS comparison tool. Open Source products may require Apache with particular modules running, such as cocoon, Jakarta (for Java), Mod-Perl, WebDAV.


Building and testing the website - 6

Content management systems (cms) may be bespoke, intended for commercial organizations, and cost very large amounts of money; or they may be open source, used by anyone with enough technical skill, and the software may be free-of-charge. No CMS is free. The most important aspects of a cms are:

In an institutional setting, what you choose depends a lot on the skills and money you have. If the site you want is fairly simple it could be that WordPress will do the job for you. If you have any Java expertise available, then Daisy may be worth evaluating. Likewise if you have php experience, Drupal might be a good choice. They all required work or one sort or another.

The Computing Service have University templates for WordPress and for Drupal – contact Kate Abernethy

The Falcon content management service (see http://www.ucs.cam.ac.uk/falcon/) gives you a fully featured site (based on Plone) with all management of content and configuration through the web.


Building and testing the website - 7

CMS Problem areas

Major difficulties arise from several places.


Building and testing the website - 8

Tools to use to view and test web pages

Many of the suggested tests can be easily accomplished by using a good html editor or


Building and testing the website - 9

Accessibility testing tools

Test your templates for accessibility with a validation tool that reports on possible problems for disabled users. Check sample pages against two of:


Building and testing the website - 10

Co-workers and external workers

Local Guidelines

Ensure that you have an adequate set of guidelines or recommendations for your server and/or other server managers on your site. Existing and new information providers should be supplied with the guidelines to help them understand the issues behind accessibility problems and these guidelines must be distributed to any web designers you employ or consider employing.

Contracting out the design of a website

You should set out the structural requirements for the site - how many different versions of a first design you want to see, what the home page should contain, what colours to avoid, how many other templates you'd wish, or, if you wish the complete site produced, how many pages are required. In addition, you should also produce a technical specification for the site, including the following:

The guidance and templates for the University house style for web pages is available on the web at http://www.cam.ac.uk/about/webstyle/. If you want to use the templates, do so exactly as supplied, following the guidelines for the required adaptation for local use. Falcon uses these templates.


Building and testing the website - 11

Converting documents

The process converting pre-existing documents to web pages has three aspects:


Building and testing the website - 12

Filenames and line ends

Keep your filenames (or short names) simple, without spaces or slashes. Use real words when possible as they will do better in Google searches. If you are moving files between platforms:

Building and testing the website - 13

Usability testing


Maintaining information and structure - 1


Maintaining information and structure - 2

Re-organising your website

If you reorganise your site:


Maintaining information and structure - 3

Indexing your website: Controlling access

If you don't want people to read files, then they shouldn't be on the web server. 'Spring clean' files and remove all the information that is no longer pertinent on an annual basis.

There will be some directories that you do not want your indexer to look at and index. Controls over indexing are through a number of means and will be observed by Internet indexers, as well as your local indexer.

These controls are:

The first is the most useful. All 'proper' search engines will observe a robots.txt file and do what it says; the robots metadata tag has to be added on a page-by-page basis (see http://www.searchenginewatch.com/webmasters/article.php/2167891). Remember to maintain your robots.txt file.

Access to branches of a web server can be limited by the server. Combining access control with use of metadata can give information to those within the access domain and some limited information to those outside.


Maintaining information and structure - 4

robots.txt

Robots.txt sits at the root level of your web server and give information about what should not be indexed. An example of an instruction to any indexer (shown by the use of *) might look like this:

# A comment line just to show what one looks like; it is ignored.
User-agent: *
Disallow: /bin/
Disallow: /cgi/
Disallow: /includes/
Disallow: /tmp/
Disallow: /~
Disallow: /stats/
Disallow: /local.html

Another example, including a reference to a named search engine robot, as well as a general instruction, might look like this:

User-agent: Ultraseek (webmaster@ucs.cam.ac.uk)  # local search engine
Disallow: /bin/
Disallow: /cgi/
Disallow: /includes/
Disallow: /tmp/
Disallow: /~
Disallow: /stats/
Disallow: /local.html

# tell all others to go away

User-agent: *
Disallow: /

Maintaining information and structure - 5

Stopping access unintentionally

Depending on how your pages are generated, you may be excluding indexers without intending to, or knowing. Problems will arise with indexing of:


Maintaining information and structure - 6

Aids to better indexing

There are several things you can do to ensure the indexing of your files is as good as possible. The Google webmaster guidelines also have valuable advice and gives access to some new tools and a blog for keeping up with new information.

For instance;

<head>
<title>Stamp Collecting World</title>
<meta name="description" content="Everything you wanted to know about
stamps, from prices to history." />
<meta name="keywords" content="stamps, stamp collecting, stamp history,
prices, stamps for sale" />
</head>

Maintaining information and structure - 7

Using the University site-wide search

There is extensive information on the web about how you can use the University site-wide search engine - see http://www.ucs.cam.ac.uk/web-search/. A synopsis of some important points follows here.

The University-wide search engine consists of two separate indexes - the internal one provides results if you Raven authenticate.

Adding a new web server

If you start a new server contact web-support@ucs.cam.ac.uk to let us know - the web server could well be picked up automatically but there are other administrative functions that can be carried out if we are made aware.

Adding the search facility to your server

You can add a search facility onto any page of your web server, which could give a search of the whole University index or one or several parts of it, either by giving a configured link or a form. Full information is at http://www.ucs.cam.ac.uk/web-search/searchforms.html

Looking at what is indexed

The search facility server gives access to a list of what is indexed for your site, as well as being the place you can add urls to the index or reindex your site). Go to http://int.web-search.cam.ac.uk/ and select Help and you will see this (or http://ext.web-search.cam.ac.uk/ and select Help and you will see this for the external view)

You can select topics from the right menu (some of which may not be available, depending on whether you are connected to the CUDN). For instance, if you select View Sites and then select View site-by-site details, you will see this, which gives you raw information about the extent of the indexing (you will see your cam-only content included on the int. view, and not on the ext. view).

If you click the link to your website from the right-hand list, you will see a list of the urls that have been indexed (clicking on an individual page now will give you details of the search results and when the page was last indexed).

Revisiting a site

Back at the help pages, select Revisit site from right hand menu, to see this. You can select an option out of those listed depending on your requirements.

To ensure a new file in added to the index

Back at the help pages, select Add URL from right hand menu (to see this), and type in the url you need adding.


Further info