Transcript [Powerpoint 97 Format]

Providing Information
On The Web
1
Brian Kelly
UK Web Focus
UKOLN
University of Bath
[email protected]
http://www.ukoln.ac.uk/
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
2
• Conclusions
Aim Of Presentation
To give an appreciation of
the issues associated with
providing information
on the Web.
UK Web Focus
UK 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
3
– Involved with web since January 1993
– Previously worked at University of Newcastle, Leeds,
Liverpool, and Loughborough
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
4
HTML - Key Elements
The HTML elements used to create simple
HTML documents are very simple:
<H1> - <H6>
<P>
<B>, <I>
<IMG SRC="logo.gif">
<A HREF="intro.html">
Headings
Paragraph (container)
Formatting
Inline images
Hypertext link
HTML Element
<A HREF="http://www.w3.org/">The W3C</A>
Start tag
5
End tag
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
6
HTML From Your Word
Processor
Users of word
processor can
create HTML
documents without
leaving their
favourite
application.
Internet Assistant for Word
Alternatively tools
such as rtftohtml
and HTML Transit can be used to convert from
popular word processing formats
7
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)
8
Typical Web Site Problems
9
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 oldfashioned looking pages)
• Good design (attractive, quick to download,
accessible, consistent, easily navigable)
• Inappropriate hypertext writing style ("click here
to return to University home page")
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.
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>
10
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/
11
• Who should have permissions to update the
Conferences directory?
Out-of-date Information
On a large web site
how is it possible to:
• Find out-of-date
information?
• Identify ownership of
resources?
What Year?
Are manual processes
satisfactory?
This existing web page refers to a
conference held in April 1993!
Note that no dates or information
on ownership is provided.
12
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
13
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)
14
Directory Structures
An example of a directory structure is shown
root
staff
staff-list.
html
jbrown
events
Training
manager
maintains
docs
training
admin
about
materials
providing-info
intro.html
Jane
Brown
maintains
Automatically
generated files
stored in separate
directory
iap-html
providing.ppt
NOTE Persistency of URLs is important. A reorganisation of
your filestore will cause links to break
15
courses
timetable
.html
timetable-96
.html
Design Issues
Issues:
16
• 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
Design Issues
Think about
hypertext writing
style and content:
•
•
•
•
17
ACME
Welcome to ACME's
WWW site.
Avoid "click here"
Avoid "Back"
Click here for product
Which company?
information.
When was
resource
Click here for current
updated?
price lists.
• What about
Back to company home page
copyright
information,
disclaimer, etc?
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
18
Writing CGI software
requires computing
expertise
Using a CGI program to search for
clearing vacancies at the University
of Hertfordshire
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)
19
Database Integration
Web / 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:
20
– CGI gateways
– ODBC, JDBC
– Web server plugins
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 then
else if useragent= …>
<P>This resource is copyright ...
Adding code / text to static
HTML resource:
• complex
• difficult to maintain
<#If useragent=netscape1.1 then
else if useragent= …>
<#include copyright-1.txt>
21
Server side management
tools:
• HTML resource clean
• easier to maintain
HTML Developments
End 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
22
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.)
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide this from JavaScript-challenged browsers
var 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
*/ <HTML><BODY >
<A HREF="JavaScript:parent.
function CvtNtoS(iNum)
ItemClicked(1, 0)"> An Introduction to
{return ("" + iNum);}
/* This function prefixes strings with the correct # of 0's */Metadata </A><BR>
<A HREF="JavaScript:parent.
function ZeroFill(iNum, iDigits)
ItemClicked(2, 0)"> UK Web Focus
{ var sNum = CvtNtoS(iNum);
</A><BR><A HREF="JavaScript:
while (sNum.length < iDigits)
parent.ItemClicked(3, 0)"> Early Days
sNum = "0" + sNum;
of the Web (1) </A><br>
return sNum;}
HTML><BODY >
/* this function handles the setting the navigation buttons.
<base target="_top">
The name of navigation control is used here so change it if it is renamed
*/
<A
HREF="JavaScript:
function ItemClicked(iIndex, iNoteOnly)
parent.OutlineExpand(0)"><IMG
{var sIndex = ZeroFill(iIndex, 3);
SRC="collapse.gif" BORDER=0
var sNoteHref = "note" + sIndex + ".htm";
ALT="Collapse"></A>
var sSlideImage = "img" + sIndex + ".htm";
<A HREF="JavaScript:
if (!iNoteOnly)
// not active X, update image and nav btns
parent.OutlineExpand(1)"><IMG
frames["SlideImage"].location.href = sSlideImage;
SRC="expand.gif" BORDER=0
frames["Notes"].location.href = sNoteHref;
ALT="Expand"></A>
CurrentSlide = iIndex;}
<STRONG>Demise of Tags</STRONG>
Demise of text editor
for authoring
Why: HTML will be too
complex
Barriers: Inertia. Too
many tools!
How: Recommendations
on authoring tools
Familiarisation: Front
Page, Netobjects
Fusion, ...
23
Style Sheets
HTML philosophy:
• HTML describes
document structure
• Document appearance
defined elsewhere
Netscape / Microsoft
wars resulted in:
24
• Breakdown of this
philosophy
• Proprietary tags
• Increases in network
traffic
• Lacked flexibility
Increasing Use Of Java
25
Expect 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
Z39.50 clients are being
Familiarisation:
http://www.gamelan developed using Java
.com/
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/
26
Replace this with use of
cookies or transparent
content negotiation
Check List (1)
Business Case
Clarify 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?
27
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
28
Who Does The Work?
The term webmaster is a misnomer - a web
team is needed for large web sites
Web Policy
Group
• Management
group
• Deals with
resources
and policies
29
System
Administrator
• Installs and maintains
server software
• Deals with security
Web
designer
Information
specialist
• Knowledge of
information flow
procedures
• Defines
guidelines
Software
support
• Design skills
• Knowledge of web
design issues
Content
provider(s)
• Supports desktop software
(e.g. authoring tools)
• May be computing service
• Everybody?
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
30