Date post: | 04-Jan-2016 |
Category: |
Documents |
Upload: | tracy-mcdaniel |
View: | 215 times |
Download: | 1 times |
1
Providing Information On The Web
Brian Kelly
UK Web Focus
UKOLN
University of Bath
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