1

Providing Information On The Web

Brian Kelly

UK Web Focus

UKOLN

University of Bath

B.Kelly@ukoln.ac.uk

http://www.ukoln.ac.uk/

2

Contents• Introduction• HTML - the File-Based Approach (bottom-up)

• Basics of the language• Creating HTML pages

• Managing a Web Site - the Site Approach (top-down)• Typical web site problems• Solutions

• More than Simple Pages• Interactivity• Database integration

• Technologies• HTML developments• Other developments

• Conclusions

Aim Of Presentation

To give an appreciation of the issues associated with

providing information on the Web.

3

UK Web FocusUK Web Focus:

• National web coordination post for UK HE community

• Based at UKOLN, University of Bath

• Responsibilities include:– Technology watch– Information dissemination in variety of ways:

– Workshops (national, regional)– Presentations at conferences and seminars– Online

– Coordination activities– Representing JISC on W3C

• Brian Kelly appointed on 1st November 1996– Involved with web since January 1993– Previously worked at University of Newcastle, Leeds,

Liverpool, and Loughborough

4

HTML - It's Easy

HTML is a very simple language

<TITLE>Hello World</TITLE><H1>My First Page</H1><IMG SRC="photo.gif">This is my <B>first</B>page on the web.<P>It's very easy!<A HREF="dog.html">Click here</A> to see my pet

<TITLE>Hello World</TITLE><H1>My First Page</H1><IMG SRC="photo.gif">This is my <B>first</B>page on the web.<P>It's very easy!<A HREF="dog.html">Click here</A> to see my pet

5

HTML - Key Elements

The HTML elements used to create simple HTML documents are very simple:<H1> - <H6> Headings

<P> Paragraph (container)

<B>, <I> Formatting

<IMG SRC="logo.gif"> Inline images

<A HREF="intro.html"> Hypertext link

HTML Element

<A HREF="http://www.w3.org/">The W3C</A>

Start tag End tag

6

HTML - Even Simpler

HTML authoring tools can make the task of creating HTML documents even simpler• No HTML tags to

remember• Avoids typos• Many freely available

• See http://www.stars.com/Vlib/Authoring/HTML_Editors.html

7

HTML From Your Word ProcessorUsers of word processor can create HTML documents without leaving their favourite application.

Alternatively tools such as rtftohtml and HTML Transit can be used to convert from popular word processing formats

Internet Assistant for Word

8

Conclusions

To conclude:• HTML is very simple for simple documents

containing text and graphics• HTML can be created by hand (using an

editor such as Notepad)• HTML authoring tools, and word processing

add-ons are readily available• Good news for authors of small numbers of

pages (e.g. students)

9

Typical Web Site Problems

Many sites are facing problems of uncoordinated growth:

• Large numbers of files to maintain• File and directory management• Out-of-date information• Inappropriate material• Unvalidated HTML• Cost of continual maintenance (e.g. to avoid old-

fashioned looking pages)• Good design (attractive, quick to download,

accessible, consistent, easily navigable) • Inappropriate hypertext writing style ("click here to return to University home page")

10

Unvalidated HTML

HTML which has not been validated can cause problems.

In this example a quote (") is missing.

This error will not be detected by looking at the page, only by following all links or using a validator.

In this example a quote (") is missing.

This error will not be detected by looking at the page, only by following all links or using a validator.

The talk on <EM>Providing Information on the Web</EM> will be given at <A HREF="http://www.herts.ac.uk/Libtech/libtech.htm>LibTech 97</A>

11

File / Directory Management

Lack of file and directory naming conventions can cause problems:

• Does http://www.ambridge.ac.uk/conferences/LIS/ refer to this years conference or last? If it's this year's will it still exist in a year's time?

• Is the URL http://www.ambridge.ac.uk/conferences/lis/ , http://www.ambridge.ac.uk/Conferences/LIS/ or http://www.ambridge.ac.uk/Conferences/lis/

• Who should have permissions to update the Conferences directory?

12

Out-of-date Information

On a large web site how is it possible to:

• Find out-of-date information?

• Identify ownership of resources?

Are manual processes satisfactory?

What Year?

This existing web page refers to a conference held in April 1993!

Note that no dates or information on ownership is provided.

13

Inappropriate Material

Who is legally responsible for the following?• A student publishes pornography on his

personal home page• A member of staff provides pointers to racists

materials• A student makes defamatory remarks about her

supervisor• A set of departmental web pages contain

copyrighted images from Disney cartoons

14

Solutions

Management Of Resources• Site/project management tools (e.g. Microsoft

Front Page, NetObjects Fusion) enable pages to be managed in groups

• Site management tools often allow meta information (e.g. review-by dates) to be provided

Acceptable Use Policy• An Acceptable Use Policy (AUP) is essential for

dealing with potential legal problems

Planning Process• Need to sketch out directory structure (plan for

future growth)

15

Directory Structures

An example of a directory structure is shown

root

jbrown adminstaff-list.html

intro.html

materials

providing-info

iap-html providing.ppt

staff events docs training about

Jane Brown maintains

Training manager maintains

Automatically generated files stored in separate directory

NOTE Persistency of URLs is important. A reorganisation of your filestore will cause links to break

NOTE Persistency of URLs is important. A reorganisation of your filestore will cause links to break

courses

timetable.html

timetable-96.html

16

Design IssuesIssues:

• Attractive web pages can be important

• But HTML defines structure• Images are (over) used for

design purposes• This is slow, and causes

accessibility problems• Proprietary HTML extensions

but reduce accessibility• Technologies such as animation,

frames, etc are controversial• Web design is a new skill (cf

DTP in early 1980s)

Egoless Design• Prepare a checklist of good and

web design points• Produce a list of websites similar to

your own• Ask your colleagues to view the

sites and give comments on the checklist)

• Produce a design specification based on the feedback

Egoless Design• Prepare a checklist of good and

web design points• Produce a list of websites similar to

your own• Ask your colleagues to view the

sites and give comments on the checklist)

• Produce a design specification based on the feedback

17

Design Issues

Think about hypertext writing style and content:

• Avoid "click here"• Avoid "Back"• Which company?• When was resource

updated?• What about

copyright information, disclaimer, etc?

ACME

Welcome to ACME's WWW site.

Click here for product information.

Click here for current price lists.

Back to company home page

18

More Than Static Pages - CGI

CGI (Common Gateway Interface):

• A standard for running software on the server

• Creates a virtual document

• Often used to link with web indexing software

• Often used in conjunction with forms

Writing CGI software requires computing expertise

Using a CGI program to search for clearing vacancies at the University of Hertfordshire

19

More Than Static Pages - Java

Java can be regarded as a programming environment for the web

Used for:• Platform independent

software development

• Enhanced user interfaces

But:• Steep learning curve

(although tools arriving)

20

Database IntegrationWeb / Database integration important:

• Providing access to corporate databases• Providing consistent user interface

Can be achieved by:• Batch conversion (e.g. using report option to

include HTML tags)• Dynamic access• Various models for dynamic access:

– CGI gateways– ODBC, JDBC– Web server plugins

21

Server-Side Management

Server-side management techniques can be used to manage resources

Software such as MS Active Server Pages, Netscape SuiteTools, PHP/FI, is available.

<If useragent=netscape1.1 thenelse if useragent= …>

<P>This resource is copyright ...

Adding code / text to static HTML resource:

• complex• difficult to maintain

Adding code / text to static HTML resource:

• complex• difficult to maintain

<#If useragent=netscape1.1 thenelse if useragent= …>

<#include copyright-1.txt>

Server side management tools:

• HTML resource clean• easier to maintain

Server side management tools:

• HTML resource clean• easier to maintain

22

HTML DevelopmentsEnd user control over layout, better printing, ...

Why: Increased functionality

Barriers: Lack of standards

How: CSS, HTML 4.0 (Cougar)

Familiarisation: IE 4, Netscape 4, HTML 4.0 proposal

HTML 4.0 and Related Work

• Forms:Improved forms

• Printing:Better control over printing

• CSS:Stylesheets

• Layout:Absolute positioning of HTML elements, layering, etc

• Document Object Model (DOM): APIs (application program interface) for HTML/CSS elements. Provides a programming interface for HTML (hooks for Javascript, etc.)

HTML 4.0 and Related Work

• Forms:Improved forms

• Printing:Better control over printing

• CSS:Stylesheets

• Layout:Absolute positioning of HTML elements, layering, etc

• Document Object Model (DOM): APIs (application program interface) for HTML/CSS elements. Provides a programming interface for HTML (hooks for Javascript, etc.)

23

<SCRIPT LANGUAGE="JavaScript"><!-- Hide this from JavaScript-challenged browsersvar FirstSlide = 1;var LastSlide = 17; var CurrentSlide = FirstSlide;var ImageWidth = 708 - 8;var ImageHeight = 520; var CurImageWidth = ImageWidth; var CurImageHeight = ImageHeight;/* This function concerts numbers to strings */function CvtNtoS(iNum){return ("" + iNum);}/* This function prefixes strings with the correct # of 0's */function ZeroFill(iNum, iDigits){ var sNum = CvtNtoS(iNum); while (sNum.length < iDigits) sNum = "0" + sNum; return sNum;}/* this function handles the setting the navigation buttons. The name of navigation control is used here so change it if it is renamed */function ItemClicked(iIndex, iNoteOnly){var sIndex = ZeroFill(iIndex, 3); var sNoteHref = "note" + sIndex + ".htm"; var sSlideImage = "img" + sIndex + ".htm"; if (!iNoteOnly) // not active X, update image and nav btns frames["SlideImage"].location.href = sSlideImage; frames["Notes"].location.href = sNoteHref; CurrentSlide = iIndex;}

<STRONG>Demise of Tags</STRONG>

Demise of text editor for authoringWhy: HTML will be too

complex

Barriers: Inertia. Too many tools!

How: Recommendations on authoring tools

Familiarisation: Front Page, Netobjects Fusion, ...

<HTML><BODY ><A HREF="JavaScript:parent.ItemClicked(1, 0)"> An Introduction to Metadata </A><BR><A HREF="JavaScript:parent.ItemClicked(2, 0)"> UK Web Focus </A><BR><A HREF="JavaScript:parent.ItemClicked(3, 0)"> Early Days of the Web (1) </A><br>

HTML><BODY ><base target="_top"><A HREF="JavaScript:parent.OutlineExpand(0)"><IMG SRC="collapse.gif" BORDER=0 ALT="Collapse"></A><A HREF="JavaScript:parent.OutlineExpand(1)"><IMG SRC="expand.gif" BORDER=0 ALT="Expand"></A>

24

Style Sheets

HTML philosophy:• HTML describes document

structure• Document appearance

defined elsewhere

Netscape / Microsoft wars resulted in:• Breakdown of this

philosophy• Proprietary tags• Increases in network traffic• Lacked flexibility

25

Increasing Use Of JavaExpect to see increasing use of Java:

Why: Provide extra functionality on client; Minimise support load for desktop applications

Barriers: Performance concerns (real and imaginary - cf XMosaic)

How: Standard web browser

Familiarisation: http://www.gamelan.com/

Z39.50 clients are being developed using Java

Z39.50 clients are being developed using Java

26

A Customisable Web

End user choice of preferred formats (HTML or PDF, GIF or PNG), features (frames or tables), languages, etc.

Why: Choice for the end user, deployment of new features

Barriers: Lack of standards, misuse of HTML

How: TCN, Cookies

Familiarisation: http://tips.iworld.com/

Replace this with use of cookies or transparent content negotiation

27

Check List (1)

Business CaseClarify your need for a web site:

– Everyone else has one– It's fashionable– Reduce costs (will it?)– Improve quality of access to information

Costings– Hardware, software and network costs– Staffing costs

Information Flow– How will web service integrate with existing information

systems?– Who "owns" the information?

28

Check List (2)

Technologies• Choice of server architecture• Authoring models (file-based v. project/site based)• Integration of existing systems (e.g. databases)• (Appropriate) Use of new technologies (e.g. Java,

HTML 4.0, Style Sheets, etc.)

Guidelines• Formulation of acceptable use policies• Procedures for misuse• Guidelines for information providers

29

• Everybody?

Who Does The Work?

The term webmaster is a misnomer - a web team is needed for large web sites

Web Policy Group

System Administrator

Informationspecialist

Software support

Content provider(s)

Web designer

• Installs and maintains server software

• Deals with security

• Design skills• Knowledge of web design issues

• Knowledge of information flow procedures

• Defines guidelines

• Management group

• Deals with resources and policies

• Supports desktop software (e.g. authoring tools)

• May be computing service

30

Conclusions

• Creating Web pages is easy for "Joe Homepage"

• Creating and maintaining a large web site can be expensive

• Several models for providing web sites can be used

• A variety of technologies can be used• Careful planning is essential to avoid

escalating costs