1

Behind the Scenes:A guide to Web site infrastructure

Pete Cliff

UKOLN

University of Bath

Bath, BA2 7AY

UKOLN is funded by Resource: The Council for Museums, Archives and Libraries, the Joint Information Systems Committee (JISC) of the Higher Education Funding Councils, as well as by project funding from the JISC and the European Union. UKOLN also receives support from the University of Bath where it is based.

Emailp.d.cliff@ukoln.ac.ukURLhttp://www.ukoln.ac.uk/

2

Behind the Scenes

The structure of this talk:

• What is Web site infrastructure?• Why is it desirable?• Thinking about your site• Approaches

• Hierarchy• Content Management Systems

(databases)

3

What is Web site infrastructure?

What are we talking about when we say “Web site infrastructure?”• The array of hardware that is the Internet?

• No• The look and feel of a site

• No

Here we are talking about the backend ‘layout’ of the Web site

4

Why is a sound layout desirable?

Q. What is it you want from your Web site?

A. an up to date, informative, usable and useful, Web resource

Through: • design layout• maintenance• access control

5

Why is a sound layout desirable?

A sound layout facilitates:

• Site maintenance• Site access management• Site consistency• Site scalability

6

Why should I bother?

“My site is only 10 pages in a single directory, this does not apply to me…”

• 10 pages• 100 pages• 1000 pages• 10,000 pages

7

Thinking about maintenance...

Tools and techniques to maintain a Web site:• Infrastructure• User feedback• Metadata• Server log files• Integrity - link checking

8

Thinking about access...

You will need to manage:• Users• Authors• Robots

• even your own site index robot

9

Remember: design layout

Steps towards a Web site:• Define the audience, purpose and content• Group content into logical groups• Define links between content• Create your ‘infostructure’ [ref]• Create your templates• Reflect all of this in the site infrastructure

Thinking about design...

10

Approaches: HierarchyConceptual Hierarchy: A simple library example

www.ourlib.ac.uk

Information

Catalogue

Services

Joining InstructionsMusic

Opening Times

Local Studies

Mobile Library

Reference Library

Children'sHow to renew books

11

Approaches: HierarchyConceptual Hierarchy: A simple library example

www.ourlib.ac.uk

Information

Catalogue

Services

Joining Instructions

Music

Opening Times

Local Studies

Mobile Library

Reference Library

Children's

How to renew books

Top Level Headings

Lower Levels

12

www.ourlib.ac.uk

Information

Catalogue

Services

Joining Instructions

Music

Opening Times

Local Studies

Mobile Library

Reference Library

Children's

How to renew books

Top Level Headings

Lower Levels

Approaches: HierarchyConceptual Hierarchy: A simple library example

13

Approaches: HierarchyConceptual Hierarchy: A simple library example

www.ourlib.ac.uk

Information

Catalogue

Services

Joining Instructions

Music

Opening Times

Local Studies

Mobile Library

Reference Library

Children's

How to renew books

14

www.ourlib.ac.uk

Information

Catalogue

Services

Joining Instructions

Music

Opening Times

Local Studies

Mobile Library

Reference Library

Children's

How to renew books

1 file

directories

Approaches: HierarchyConceptual Hierarchy: A simple library example

15

Approaches: HierarchyFile Hierarchy: A simple library example

/

/information/

/catalogue/

/services/

index.html

...

/mobile/

/reference/

index.html

index.html

16

/

/information/

/catalogue/

/services/

index.html

...

/mobile/

/reference/

index.html

index.html

/renew/

index.cgi

Approaches: HierarchyFile Hierarchy: A simple library example

17

• Reflects the design and navigation of the site

• Use folders to group related content• Avoid local jargon• Make URLs logical• Put ‘index.html’ everywhere

Approaches: Hierarchy

18

• ‘Relative’ internal linksIn file: www.ourlib.gov.uk/search/index.htmlLink: <a href=“http://www.ourlib.gov.uk/search/advanced.html”>|Advanced|</a>

• Not portable• Browser follows path from root

Link: <a href=“advanced.html”>|Advanced|</a>• Users navigate with links - anticipate this

Approaches: Hierarchy

19

Advantages:• You are probably already doing it!• Familiar• Lots of support and tools• Disk structure reflects structure of site• Well established methods• Easy to set up

Approaches: Hierarchy

20

Disadvantages:• As sites grow consistency becomes hard to manage

• Not scalable• Difficult to maintain

• Need to update many pages• Cannot easily transform pages to new HTML standards

Answer: Server Side Includes

Approaches: Hierarchy

21

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

22

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

23

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

24

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

25

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

26

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

27

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

• Separate these out and keep them in a separate directory

/

/information/

/catalogue/

/services/

index.html

...

/mobile/

/reference/

index.html

index.html

/site/

28

Approaches: Templates and SSIs

• Identify the ‘elements’ of your Web site defined by the template

• Separate these out and keep them in a separate directory

• Dynamically include the elements into each page

29

• Identify the ‘elements’ of your Web site defined by the template

• Separate these out and keep them in a separate directory

• Dynamically include the elements into each page

User

GET: /index.html

Web server

Approaches: Templates and SSIs

30

• Identify the ‘elements’ of your Web site defined by the template

• Separate these out and keep them in a separate directory

• Dynamically include the elements into each page

User

GET: /index.html

/index.html

Web server

Approaches: Templates and SSIs

31

• Identify the ‘elements’ of your Web site defined by the template

• Separate these out and keep them in a separate directory

• Dynamically include the elements into each page

User

GET: /index.html

/index.html

<!--#include file=“/site/nav.ssi”-->

Web server

Approaches: Templates and SSIs

32

• Identify the ‘elements’ of your Web site defined by the template

• Separate these out and keep them in a separate directory

• Dynamically include the elements into each page

User

GET: /index.html

/index.html /site/*

Web serverVirtualPage

Approaches: Templates and SSIs

33

Advantages:• Changes to a handful of files effect the

whole site• Repeated content only stored once• Almost a database...

Approaches: Templates and SSIs

34

Disadvantages:• Access management

• restricted by the file system• No ‘management system’• Cannot easily output other formats - XML,

WML, RSS, etc.

Approaches: Templates and SSIs

35

Approaches: Databases: Users

Users

36

Approaches: Databases: Users

DBMS

Web Interface

Users

37

Approaches: Databases: Users

ContentData

TemplateData

Web Interface

Users

DBMS

38

Approaches: Databases: Authors

ContentData

TemplateData

DBMS

Web Interface

Author

Author

39

Approaches: Databases: Admin

ContentData

TemplateData

DBMS

Web Interface

Administrator

Administrator

40

Content Management Systems

“ACS, AOLServer, BackStream, Broadvision, CMS, Cocoon, ColdFusion, Communique 2, Communiware, Conversant, DB Prism, DVP.HTMPlates Pro, EditTag, Enhydra, FileMaker Pro, Frontier, FutureTense, GIST, InCopy, Mason, MediaDepot, Mediasurface, Midgard, NetObjects Fusion, Netscape Application Server , NewsPro, Onion, PAS, Provue SiteWarrior, RedDot,RedSnapper, Revize, RiSource, Roosh Newspublisher, SiteBuilder, SiteEditor, Slashdot, SmartWorker, Spectra, SquishDot, StoryServer, Tallyman, Teamsite, Tempest, WebMacro, WebObjects, WebSite Director, Zope”

List supplied by Paul Browning, University of Bristol

41

Approaches: Databases: Issues

• Search engines might not index all pages• Ensure the database serves pages as

though they were flat pages• CMSs often provide their own tools

• Will all your users want to use them?• Dependence on a single supplier• Requires specialist software

• Who hosts your Web server?• High cost - software and training

42

Behind the Scenes: Conclusion

Look at your site and ask:• How scalable is it?• What are the static elements?• What are the dynamic elements?• How do these fit together to create a page?

• How am I going to manage access?

43

References

A Guide to Good Practice for WWW Authors, Margaret Isaacs

http://www.dcs.glas.ac.uk/SIMA/toc.html

Webmonkey

http://hotwired.lycos.com/webmonkey/

http://hotwired.lycos.com/webmonkey/99/39/index3a.html

Composing Good HTML, Eric Tilton, (“Infostructure”)

http://www.ology.org/tilt/cgh/ (the rest of www.ology.org is odd…)

Content Management Systems Parallel Session Resources from IWMC 2000

http://www.bris.ac.uk/ISC/cms/

Buyers Guide to Content Management Systems

http://www.networkcomputing.com/1111/1111buyers2.html

Microsoft White Paper on Content Management

http://www.microsoft.com/technet/ecommerce/contmgt.asp

44

Behind the Scenes:A guide to Web site infrastructure

Pete Cliff

UKOLN

University of Bath

Bath, BA2 7AY

UKOLN is funded by Resource: The Council for Museums, Archives and Libraries, the Joint Information Systems Committee (JISC) of the Higher Education Funding Councils, as well as by project funding from the JISC and the European Union. UKOLN also receives support from the University of Bath where it is based.

Emailp.d.cliff@ukoln.ac.ukURLhttp://www.ukoln.ac.uk/