Transcript Developing web documents and sites

1
How to provide access to information
through the Internet and the WWW?
Paul Nieuwenhuysen
• Vrije Universiteit Brussel
• Information and Library Science, University of Antwerp
Belgium
Workshop in Sofia, Bulgaria
20 June 2003
2
The slides used in this workshop have been selected from the
presentations that are available from
http://www.vub.ac.be/BIBLIO/nieuwenhuysen/courses/chapters/
(note: BIBLIO and not biblio)
Contents
summary
• Providing workstations
for public access to
information on the Internet
• Pictures on computers
• Developing web documents
and sites !
3
4
***-
Providing workstations for public
access to information on the Internet
5
***-
An additional method
to provide access to information
• More and more useful information becomes available
online on the Internet
»free of charge
»by using standard, affordable hardware
»accessible by using only 1 integrated Internet client
program (which includes client software for
WWW, downloading by ftp,…)
• Therefore, offering public access to this information has
become feasible in libraries and similar environments.
6
***-
Why libraries and information centers
should offer access to the Internet
• The links between documents in print and on CD-ROM
with information on the Internet become increasingly
important:
»Many documents in print or on CD-ROM refer to
information on Internet (or explain how to use the Internet)
»Many references to printed material can be found on the
Internet (in particular, in the form of bibliographic
databases)
• Many potential users still lack the opportunity to access
information on the Internet.
7
**--
How to offer access to the Internet?
Many questions and possible answers
When you want to offer access to information on the
Internet:
»Many questions and problems arise.
Many decisions must be made.
»No standard answers exist.
Optimal solutions depend on the local environment.
»Everything must fit in the budget.
8
**--
Questions & answers related to
the workstations
• Use the computers available for access to
»the online public access catalogue
»CD-ROM products
or install dedicated (better?) machines?
• Use reservation lists for the public Internet access
workstations?
• Allow users to connect their own hardware to the
network?
9
**--
Questions & answers related to
microcomputer hardware
• What should be the specifications of the client computers?
• Which video displays to install?
• Which spatial resolution and number of colours to use?
• Offer print facilities?
If yes: black and white, or colours?
• Add speakers or headphones, or disable sound?
• ...
10
**--
Questions & answers related to
server computers
• Where to keep the Internet client software:
on each client computer or on a server in the LAN?
• Where to keep the WWW pages offered by the local
institute:
on each client computer or on a server in the LAN?
• When using a server computer in the LAN:
use an available server (for instance of a computer
centre), or install an independent server (for instance at
library level)?
11
**--
Questions & answers related to
data communication
• Which operating system and
compatible TCP/IP network stack software to use?
»Microsoft Windows 95, 98, ME;
Microsoft Windows NT4, 2000, XP…?
»...
• How fast should the Internet connection be?
Which type of Internet access to offer:
modem(s) or ISDN, with (SLIP or) PPP;
direct, continuous access;...?
12
**--
Questions & answers related to
the browser software
• Offer only 1 WWW client browser program?
Or several WWW clients + other, more specialised
programs for
»e-mail,
»text chatting,
»Usenet News...
• Which WWW client program to offer in Windows?
»Netscape Communicator,
»Microsoft Internet Explorer...
13
**--
Questions & answers related to
the installation of the browser
• How to set the numerous options in the WWW browser?
In particular: How to set up
»caching of incoming files?
»the memory of visited URLs?
• How to make the system (browser program) return
automatically back to the right, local home page?
14
**--
Questions & answers related to
additional software
• Should a telnet client be offered on the public Internet
workstation?
If yes, then which one?
• For public Internet workstations, additional software to
view various types of files should be considered as
candidates for installation
(besides the programs that have already been
incorporated in the WWW browser)
**--Examples
Internet workstations:
examples of additional software
• Adobe Acrobat PDF viewer/reader
• Microsoft Word (or viewer only)
• Microsoft Excel (or viewer only)
• Microsoft PowerPoint (or viewer only)
• [Microsoft e-book reader]
• Macromedia Flash viewer
• Microsoft Media Player for sound and video
• Real player for sound and video
• Apple QuickTime (various programs)
• some VRML viewer
15
16
**--
Questions & answers related to
the personal disk space for users
• Allow users to save files to diskette?
• Offer personal, private disk space to the user?
If yes:
»temporary disk space on the client computer?
»more permanent, private space on a server in the LAN?
(If yes: Which network software to use for this?)
17
**--
Questions & answers related to
the personal files in the client
• Allow users to apply and save personal files related to the
Internet client software?
for instance: client display options, visited URL’s,
cached pages (files), bookmarks = favorites = …, cookies
• Which method to use for this?
»Saving the files containing the personal settings on
personal disk space
»Allowing direct usage of personal portable computers
18
**--
Questions & answers related to
security risks on the client computers
• How to reduce the security risks on the client computer?
»At the level of the operating system
»At the level of the Internet client/application programs
(e.g. by blocking active contents:
ActiveX components, Java applets,...)
»By installing additional security software
»…
• How to maintain disk backups?
• How to reinstall disk backups when required?
19
**--
Questions & answers related to
upgrading of software
• When to upgrade software?
knowing that it may
++ yield better performance
++ offer more features
-- disturb users
-- cost money
-- cost personnel time
-- cost users time to adapt and learn the novelties
20
**--
Questions & answers related to
the lack of integration
• How to integrate access from each public access
microcomputer to
»the local library catalogue(s)
»CD-ROM products (accessible in the institute’s LAN ?)
»information sources THROUGH (and also those ABOUT)
the Internet (via WWW, gopher, ftp, telnet, locally
accessible Usenet newsgroups, E-mail interest groups,…)
»WAIS or Z39.50 sources lacking a WWW gateway
• How to make clear the lack of integration existing today?
21
**--
Questions & answers related to
software levels and interactions
How to deal with the fact that the inexperienced user is
confronted with various levels of software interacting at
the same time:
1 Operating system + basic TCP/IP networking software
2 Browser + additional application software
3 Contents (both classical, static, hypertext
+ dynamic, active contents; interfaces to databases,…)
22
**--
Questions & answers related to
possible restrictions
• Offer the complete WWW or a (filtered) selection only?
• Offer also local access to Usenet News?
If yes: to which newsgroups?
• Develop and implement an Internet access and fair use
policy? If yes: How to make this clear to users?
• Allow use without supervision or supervise users to avoid
“misuse” according to the local policy?
• Allow use to adults only?
• Restrict the time of usage per user?
23
**--
Questions & answers related to
electronic mail
• Allow the use of e-mail systems through the WWW to
read and send messages?
• Offer one or more e-mail client software packages on the
workstations (like Eudora, Netscape mail, Outlook
Express…)
If yes:
Then how to fill in automatically the reply address and
the user name?
Then choose for deletion of messages from the e-mail
server after downloading (and reading), or not?
24
**--
Questions & answers related to
marketing
• How to inform and attract potential users?
»Distribute leaflets about the service?
»Install posters about the service?
»Organise classes about Internet applications?
• Where to place the Internet client computers
within the public access area?
Grouped or scattered around?
• How to receive feedback and evaluations?
• ...
25
**--
Questions & answers related to
“free or fee”
• Charge for usage of online access facilities or not?
Charge for usage of a printer or not?
If yes: How to collect fees?
• How to make clear the distinction between information
sources which are
»directly accessible without passwords and free of charge
»more “hidden” and fee-based
26
**--
Questions & answers related to
personnel / staff
• Is additional personnel / staff or a shift of functions
required
»to install and maintain the Internet access system?
»to guide users?
• How to motivate, prepare and train the personnel when
their tasks change?
• ...
27
**--
Questions & answers related to
user guidance
• How to assist first-time and inexperienced users?
»Offer printed leaflets?
»Create and display posters near the public access PCs?
»Offer help page(s) in the WWW browser software?
• How much effort should be spent in setting up WWW
pages to guide users to information?
• How to optimise access for patrons with various
disabilities?
28
**--
!? Task !?
Read about authentication and autorisation
of local and remote users of Internet-based information:
Webster, Peter
Remote patron validation. (Posting a proxy server…)
Computers in Libraries, September 2002, pp. 19-23.
29
**--
Internet access
for the inexperienced user
• How to use hypertext / hypermedia is not understood
immediately by inexperienced users, while public access
computers are mainly aimed at this type of users.
Therefore:
»Complete blocks or phrases should be linked, instead of
small parts of a page
(for instance: a menu line instead of only 1 word)
»Some guidance should be provided, for instance
about the basics of hypertext and about saving to diskette
(possibly in a separate HTML frame on the display)
30
**--
User feedback
through WWW and e-mail
• Users should be enabled to use the system itself
»To provide feedback to the manager(s)
»To ask questions about the system
»To make suggestions for improvement
• This can be done by offering a hypertext link to a URL of
the mailto: type
31
****
Pictures on computers
32
****
Why learn the basics
of bitmap pictures?
• Bitmap pictures / graphics / images are often inserted in
»word processing documents
»presentations with slides
»web pages
• So it is interesting to know how to acquire and improve
bitmap pictures.
• As documents are more and more made available through
the Internet, it is important to make the file sizes small
while preserving an appropriate image/picture quality.
33
****
How to obtain computer files with
images/pictures?
• from the collection of clip art delivered with the software
to create presentations
• from printed material
(by scanning)
• from the WWW or an intranet
(by saving to disk)
• by making photographs yourself
•…
34
***-
How to create digital photographs for
use on computers?
• To obtain digitized photos to insert in your presentation
file, you can
»use a classical, chemical camera and digitize the results,
—by scanning the printed photo by using a page scanner
—by using a specialized scanner to scan the photo film
—by using the Kodak PhotoCD service through a good
photo shop
»use directly a digital camera
35
**--
!? Task !?
You can learn the basics of digital photography
by reading for instance:
Curtin, Dennis P.
Available from http://www.shortcourses.com/choosing/ [cited 2003]
36
**--Examples
Software suitable to edit image files,
produced by Microsoft: examples
• The drawing module that is
available to all application
programs in the suite Microsoft
Office 97, 2000
• NOT suitable to create
appropriately compressed files
• The drawing module that is
available to all application
programs in the suite Microsoft
Office XP=2002
• saving in PowerPoint XP with
Tools | Compress pictures
allows appropriate compression
• Microsoft PhotoEditor
(part of Microsoft Office 97)
• suitable to create JPG files,
but an obsolete program
• Microsoft PhotoDraw
2000,…
• suitable to create JPG files;
easy to use program
37
***-Examples
Software suitable to edit image files,
independent of Microsoft: examples
• JASC PaintShop
• suitable to create JPG files;
shareware
• Corel PhotoPaint
• suitable to create JPG files;
commercial software
• Adobe PhotoShop !
• suitable to create JPG files;
powerful, expensive, and
complicated program
• Adobe PhotoShop Elements !!
• suitable to create JPG files;
powerful program,
much cheaper than PhotoShop
38
***-
!? Question !?
Which program will YOU use
to improve your digitized photos?
39
***-
Creating pictures on computer
for printing (1)
• Scanning or PhotoCD or digital photography
• Save (lossless) as a (big) master file,
for instance in TIFF format,
using lossless compression such as LZW during the saving
or not

40
***-
Creating pictures on computer
for printing (2)
• Use a graphics program and if required:
1. rotate,
2. crop,
3. convert to grayscale
4. increase the tonal range (which also increases contrast)
5. decrease or increase brightness
6. increase or decrease contrast
7. increase (or decrease) color saturation

41
***-
Creating pictures on computer
for printing (3)
• (Do NOT decrease size, to keep high quality)
• Sharpen (if appropriate) (always as last step)
• Save (lossless) (for instance in TIFF format)
• Print
42
***-
Creating pictures on computer
for a presentation or web (1)
• Scanning or PhotoCD or digital photography
• Save (lossless) as a big master file
(for instance in TIFF format)

43
***-
Creating pictures on computer
for a presentation or web (2)
• Use a graphics program and if required:
1. rotate,
2. crop,
3. convert to grayscale,
4. increase the tonal range (which also increases contrast)
5. decrease or increase brightness
6. decrease or increase contrast
7. decrease or increase color saturation
8. resize/resample (to make the file smaller)

44
***-
Creating pictures on computer
for a presentation or web (3)
9. Sharpen (if appropriate) (always as last step)
10. Save (lossless) (for instance in TIFF format)
11. Save as JPEG file at an appropriate level of quality
or as a GIF file
• Finally: Insert in a document or in a slide or in a web page
45
***-
!? Question !?
What is an important difference
between creating pictures on computer
•for printing
•for a presentation or for a web
46
***-
Developing web documents:
guidelines related to graphics
• File formats used mostly on a web are
GIF, JPG, PNG, because the common browsers include
viewers for the file formats.
• For each image/picture, use an appropriate graphics file
format.
• Graphics/images/pictures take long to download.
To speed things up, compress JPG (or PNG) files to make
them as small as possible, while preserving an
appropriate quality.
47
***-
!? Question !?
For which applications is
the GIF file format appropriate?
For which applications is
the JPEG/JPG file format appropriate?
48
***-
Graphics formats for bitmap pictures:
a comparison
BMP
• Maximum number
» of colours in one image
GIF
JPG
256
256*256*256 =
PNG
TIF
RLE
256*256*256 =
16 777 216
more 256*256*256 =
16 777 216
16 777 216
 of bits per pixel
24
8
24
24
24
• Compression of file size
without loss of quality
RLE
LZW
JPEG
+
+
+
+ (but colours
can be lost)
-
-
+
65535 x 65535
65535 x 65535
more
more
-
+
-
-
+
-
+
-
-
+
• Maximum no. of pixels per
image
• Multiple images in 1 file
Animation is possible
65535 x 65535
49
***-
!? Question !?
Which programs do you know
and which program do you use
to save images as JPEG/JPG files?
50
**--
Maximum number of colours
displayed by computers: introduction
• The number of colours
(including shades of a colour also)
that can be displayed simultaneously on a computer
screen/display is limited.
• This limitation is primarily caused by the limitations of
the video/graphics card used by your computer.
51
**--
Maximum number of colours
displayed by computers: examples
• Examples of limitations / maximum number
of colours on a computer display:
»8-bit = 2**8 = 256 typical for older systems
»16-bit = 2**16 = 65536 = “thousands of colors”
= “High Color”
»24-bit = 2**24 = (2**8)*(2**8)*(2**8) = 256*256*256
=“True Color”
»32-bit = 2**32
52
**--
!? Question !?
What is the maximum number of colours
that your computer can display simultaneously
with the appropriate settings of the software?
(If you do not know, then check it
with the software for the display settings.)
53
**--
Maximum number of colours
displayed by computers: consequences
• The computer system that is asked to display a graphics
file with more colours than can be displayed
simultaneously by the system will
»dither the image to display it with less colours
»shift colours to nearby colours that the system can display
• The result will depend on
»the type of computer, and on
»the particular application software that is used to display
the file.
54
**--
Developing documents for computers:
guidelines related to colours
Take into account / realize the limitations of computers and
the variations in client computer hardware and software
used to view your documents:
»Do not expect that all users will view the documents that
you create and publish in the same way.
»See that your colours are not essential for your message.
55
****
Developing web documents and sites
The basics
56
****
Developing web documents:
introduction
Different ways to describe the same activity:
• developing / creating / editing / authoring
WWW / web / HTML documents
• HTML editing / authoring
• editing / authoring for the web/WWW/intranet
• ...
57
****
Developing web documents:
simple programs for editing (Part 1)
To create documents in HTML, you can use
• a simple text editor
such as Windows Notepad, Windows WordPad
• a word processor without HTML facilities
such as versions of Microsoft Word before Office 97
• a word processor with HTML facilities added afterwards
such as Microsoft Word from Office 95
with Microsoft Internet Assistant
–continued
58
****
Developing web documents:
simple programs for editing (Part 2)
• a word processor with integrated HTML facilities
such as Microsoft Word 97, 2000, 2002=XP...
• an HTML editor included in a web browser such as
»Microsoft Explorer version 4
including FrontPage Express
»Netscape
including (Page) Composer!
59
****
!? Task !?
1. Save a hypertext page from the Internet.
2. Modify / edit this using a simple program
for web page editing.
3. Save it in HTML format.
4. Check to make sure that even
another web browser can view it well.
60
****
!? Task !?
Start a simple program
to create web pages
(files, documents,
NOT classical pages to be printed),
and create and save a very simple new page.
Check if this shows up well in a web browser.
61
****
!? Task !?
Start a simple program to create web pages,
create 2 very simple web pages, and create
a hyperlink in page 1 to page 2,
and a hyperlink in page 2 to page 1.
for instance,
name the first file 1.htm and the second file 2.htm
Check if this works well in a web browser.
62
****
!? Task !?
Rename one of the files/pages that you have created,
using directly your computer operating system software,
but keep the file name extension as .htm
for instance, rename 2.htm to b.htm
See what happens in your browser
when you look at file 1.htm
63
****
Developing web documents:
advanced programs for editing
• a more specialized, dedicated program for the creation
and maintenance of web documents and sites,
such as
» (Adobe PageMill) Adobe GoLive !
» Allaire HomeSite
» Claris HomePage
» Macromedia Dreamweaver !!
» Microsoft FrontPage versions 97, 98, 2000, XP=2002… !!
see news:microsoft.public.frontpage.client
» NetObjects Fusion !
» SoftQuad HoTMetaL
64
****
!? Question !?
What can the specialized programs
for web site creation and maintenance
do more or better
than the simpler programs
for web page editing?
65
***-
Programs for web site development:
advanced features (Part 1)
• Link management to lower the risk of broken links within
a web
• Verification of hyperlinks !!
(within a web and to outside web sources)
• Cascading Style Sheets !!
• Creating reports (size and number of files, warnings,…) !
• Showing the hyperlinks from any web page in a graph !
66
**--
Programs for web site development:
advanced features (Part 2)
• Frame creation / Form creation / DHTML tools / Layer
handling
• Pre-defined templates
• Database integration
• Integrated ftp and more sophisticated “publishing” to a
web server
• Edit remote server pages “directly”
67
***-
Developing web sites:
programs on a server
• In contrast with client-based programs to edit web pages
and to manage web sites, some servers offer online
accessible programs for these functions.
• This is an example of an online
ASP = Application Software Provider.
• When using such a system, only basic, common, general
editing software is required on the client to create texts,
images/pictures…
68
***-
Developing web sites:
programs for content management
More advanced and expensive programs for the creation
and maintenance of web documents and sites offer better
features for
• workflow,
• collaboration of individuals or groups or departments
that build together one web site,
• authentication of developers and users,
• template design and template management to ensure
consistent formats,
• content management.
69
****
The various types of webs
From simple to more complicated :
• disk-based webs, not using a web server
(for instance on a hard disk or on a CD-ROM)
• webs on a web server without web software extensions
• webs on a web server with specific web software extensions
70
****
!? Question !?
Which program will you use
to edit HTML documents?
71
****
!? Task !?
Start the program that you have chosen to create a web site.
Create a new “web”.
In that web, create 2 very simple web pages, and create
a hyperlink in page 1 to page 2,
and a hyperlink in page 2 to page 1.
For instance,
name the first file 1.htm and the second file 2.htm.
Save these files.
Check if this works well in a web browser.
72
****
!? Task !?
Rename one of the files/pages
using that program for web development,
but keep the right file name extension (for instance htm);
see what happens with a browser.
Put one file in another folder
using that program for web development
and see what happens using a browser.
73
****
!? Question !?
Explain how a program like Microsoft FrontPage
allows renaming and relocating
a file or folder,
in such a way that web hyperlinks are not broken.
74
***-
Programs for web site development:
the problem of mixed case in a web
• Unix-based server computers,
including web servers on such computers,
make a distinction between lowercase and uppercase
characters.
• Therefore the characters in the hyperlinks of a web
running on such a server should correspond exactly to
those in the source folders and files.
• However, some web site development programs create
hyperlinks in lowercase only; for instance:
FrontPage 2000 (NOT FrontPage 1997, 1998).
75
***-
Microsoft FrontPage Web Server
software Extensions
• If a web is server-based and if the server is using the
Microsoft FrontPage Server Extensions, then the
functionality of the web can be extended, by adding page
elements such as
»hit counters,
»search forms,…
76
***-
Programs for web site development
and web server software extensions
• Some functions of a program for web site development
can result in functions on the created web pages, that
require specific web server software extensions.
• So you should check which functions are supported and
which not, by the web server that you will use to make
your web pages available.
• Example: Microsoft FrontPage
77
***-
Enable or disable the
Server Extensions in FrontPage
• To ensure compatibility with servers that do not use the
FrontPage Server Extensions, you can enable or disable
commands that rely on the presence of the Server
Extensions software on the server.
If you disable the server extensions for a web, the related
commands will be unavailable (that is, they will appear
dimmed) on menus in FrontPage at authoring time.
• On the Tools menu, point to Page Options, and then click
the Compatibility tab.
78
***-
Developing web sites:
development phases (Part 1)
1. Conception
»Write a mission statement.
»Evaluate your intended audience.
»Think about possible content.
»Formulate the web structure with hyperlinks,
and perhaps with a hierarchy of file folders.
»Search, find and study similar and/or competing web sites
to get ideas.
79
***-
Developing web sites:
development phases (Part 2)
2. Design
»Content
»Creativity
»Technical aspects
3. Test
4. Roll-out
5. Maintenance and improvement
80
****
!? Task !? Problem !?
Create a structure
for the pages (and the links among these)
of the web site that you develop.
For instance: your personal WWW site.
(You can use for instance
a sticky note to represent each page
with the name of the file written on each note
and organize these on a large sheet of paper.)
81
****
!? Task !?
Give good names to the files/pages
of the web site that you develop
and create the hierarchical structure
of the (sub)directories / folders
in which you will store these files.
You can also use the sticky notes for this;
keep in mind that each note represents a file,
NOT a folder.
Hint: create an index.htm file in each folder.
82
**--
!? Task !?
Assume that you create a web
with a simple, hierarchical structure.
(for instance your personal WWW site)
Then make a proposal for the organisation/structure of
the corresponding computer files in folders/directories,
and explain why you prefer this structure.
83
**--
!? Question !? Task !? Problem !?
Show with an example of a concrete simple web site
that you realize
that the navigation structure of a web
(the view of the user/reader/consumer)
is a different concept from
the folder structure of a web site
(the view of the producer/author/creator)?
84
***-
!? Question !?
When you create a directory structure
for a web site:
What is the advantage of
using a separate directory/folder
for image files?
Would you put all image files there?
85
**--
!? Task !?
Look for
similar and/or overlapping and/or competing web sites.
If these exist, then learn from these.
86
****
Developing web documents:
basic guidelines (Part 1)
• Follow most of the older, more classical guidelines
applicable to the creation of non-web documents and
presentations without or with hyperlinks.
»Try to know your target audience, and which style of
writing and structure and multimedia they prefer.
»Spell accurately. Use good grammar.
»Keep texts short. Be brief.
Keep paragraphs short.
Focus on quality, NOT on quantity.
87
****
Developing web documents:
basic guidelines (Part 2)
»Make your message immediately clear.
Get right to the point.
Avoid long introductions.
Start with the conclusion and finish with the introduction
on each page.
Use meaningful titles.
Use a writing style similar to the one of journalists who
write a newspaper article.
»Highlight important keywords in the text, using bold
characters for instance.
88
****
Developing web documents:
basic guidelines (Part 3)
»Keep the lay-out simple.
»Note the version date on the document.
»Clearly identify the author.
»Provide facilities for easy feedback and comments by the
user/reader of your documents
—by mentioning your own e-mail address or another
relevant e-mail address, and
—by providing a link of the mailto: type to your e-mail
address, or
—(by offering a feedback form)
89
****
Developing web documents:
basic guidelines (Part 4)
»Use simple language, whenever possible.
Avoid abbreviations, acronyms and jargon.
Spell out acronyms, at least at the first occurrence on each
page.
»Be clear about the copyright status of the material.
»Show how the information you provide relates to other
information sources existing elsewhere.
»Maintain
uniformity of formatting = a consistent look and feel.
90
****
Developing web documents:
basic guidelines (Part 5)
»Users may start browsing and reading NOT from the home
page, but from one of the sub-pages of the web;
therefore each page should make sense also independent of
the home page;
therefore you can repeat important, basic content on
several pages.
»Let someone proofread and browse your web and learn
from the comments to improve your creation.
91
****
Developing web documents:
basic guidelines (Part 6)
»Use a fixed width font, when alignment is important
(in a table for instance, when the table formatting codes of
HTML/XHTML is NOT used)
92
***-
Developing web sites:
guidelines related to structure (Part 1)
• Put yourself in the shoes of potential, inexperienced
readers/users;
try to imagine how they will approach the document.
93
***-
Developing web sites:
guidelines related to structure (Part 2)
• Strive for high “scan ability”, the ability to scan a page
and quickly see what is available from it.
• Do not offer superseded or out-of-date information.
• Include a section highlighting new information content.
• When access to some information is restricted to
particular users only, then indicate this.
94
***-
Developing web sites:
guidelines related to structure (Part 3)
• Structure your information to take advantage of the
hypertext environment;
do not put everything on 1 page;
break into pieces which can stand on their own, and link
to the other pieces;
however, avoid exaggeration which leads to scattered
information which is hard to collect and/or print.
Good for printing...Middle ground...Good for “surfing”
95
***-
Developing web sites:
guidelines related to hyperlinking (1)
• Try to make clear (announce in advance) what will
happen when a reader/user will activate a link.
• Include a warning, when a link leads to a large file.
• Try to make it easy to understand a link by linking a clear
concept or a sentence (and not only words here and
there).
• Avoid using underlines like this that do not indicate
hyperlinks, because this may confuse the users.
• Do not offer links to documents lacking information or
under construction.
96
***-
Developing web sites:
guidelines related to hyperlinking (2)
• Do not use “click here” for links
(because not everyone uses a mouse and
because you cannot mention this at every link anyway)
• You can indicate hyperlinks in the text for instance as
»to more about THIS subject
»to more about THAT subject
»...
97
***-
Developing web sites:
guidelines related to hyperlinking (3)
• Make clear where the links are on a page.
Try to avoid putting hyperlinks in an image,
because it is less clear than a conventional underlined
text.
If you use links in images anyway, because this adds
value, then make clear to the user which images or parts
of images are hyperlinks, and which are not,
to avoid that the user does not find all useful hyperlinks.
• Avoid “broken” / “dead” links = avoid “link rot”.
98
***-
!? Question !?
How can we avoid broken links?
99
***-
Developing web sites:
guidelines related to the context
• Clearly identify the host institution,
by providing a link to its welcome page.
• Clearly identify dates
(for instance: origin, expiration, most recent update).
• Clearly identify
»which information is local
(created by you or your institution)
»which is mirrored (copied) from another site
»which is a link to another site
100
***-
!? Question !?
Which guidelines should we have in mind,
when we create a URL for a web page?
In other words:
How does an ideal URL look like?
or: Which kind of URL to avoid?
101
***-
Developing web sites:
guidelines related to the URL (Part 1)
• Try to create URLs with words that approximate natural
language, so that they are
»meaningful and informative for users
»easy to remember by users
»helpful in retrieval through search engines that index your
site and that offer results with relevance ranking
102
***-
Developing web sites:
guidelines related to the URL (Part 2)
• Try to have short URLs, so that users do NOT have to
»remember long URLs
»type a long URL in their browser
(This is of course directly related to the folder / directory /
path structure of your web site.)
103
***-
Developing web sites:
guidelines related to the URL (Part 3)
• Avoid renaming your folders and files, to avoid changing
URLs.
104
***-
Developing web sites:
guidelines related to the URL (Part 4)
• For each of your pages, consider writing the URL of the
page somewhere at the end of that page
(because saving or printing does not always register the
URL, so that it may be difficult for the user to find the
page back on the network or to give the URL to someone
else)
105
***-
Developing web sites:
guidelines related to accessibility (1)
• Try to serve your documents from a fast computer on a
fast network link,
that is accessible 24 hours/day, 7 days/week, all year.
• Make sure your documents display well in different
browsers / clients (including non-graphics systems).
106
***-
Developing web sites:
guidelines related to accessibility (2)
• Avoid moving your files to another
»folder / directory or
»server computer.
• If you move a file anyway, then replace it with a small file
with the same name, that is almost empty and small, that
links to the new location.
107
***-
Developing web sites:
guidelines related to accessibility (3)
• Include an index.html file in each folder / directory in
your web site, if you want to offer some information when
a user takes the directory name (and not a file name)
as a URL of the type
http://server_computer/directory/subdirectory/
• Do not use index.htm (without l at the end), because not
all web servers send this as default document.
108
***-
Developing web sites:
guidelines related to accessibility (4)
• Consider to include spelling variations of each address
(URLs) (folder or file) to increase the chance that users
get to the site when they type in a URL.
Then make that they all point to the one and only real
folder or file. For instance:
//webserver/african-art
//webserver/african art
//webserver/african_art
//webserver/africanart
//webserver/african-arts
//webserver/african arts
//webserver/african_arts
//webserver/africanarts
109
***-
Developing web documents:
guidelines related to HTML (1)
• Tag according to HTML or XHTML standard
specifications as well as possible.
You can check
»HTML syntax
»HTML browser compatibility
»absence of broken links
»spelling of an HTML page,...
online free of charge, using
http://www.netmechanic.com/
110
***-
Developing web documents:
guidelines related to HTML (2)
• To segregate logical document components for better
readability, insert
»blank lines, or
»horizontal lines, or
»small pictures
111
***-
!? Question !?
For which hyperlinks in your web pages
do you use absolute linking,
and for which relative linking?
Why?
112
***-
!? Question !?
When developing a web site,
we should use as much as possible relative links.
But in which case do we use absolute links
in our web sites?
113
***-
!? Task !?
Use the program
that you have chosen for HTML/XHTML editing,
and create a page
that includes graphics.
114
***-
!? Task !?
1. Use a program
to save some existing page
that includes graphics from the web.
2. Inspect your hard disk
to check if all the required files
were saved indeed.
115
***-
!? Question !?
Which are the most widely used file formats
for graphics on a web?
116
***-
!? Task !?
Check for each of the images
in your web pages,
that the HTML/XHTML code does not force
the browser
to change the display size of the image.
117
***-
Developing web documents:
guidelines related to icons
• Avoid icons and other elements that look like buttons to
activate links, but which are NOT.
• Add explanations to icons which may not be directly clear
to the reader/user.
118
***-
Developing web documents:
guidelines related to multimedia (1)
• A page can contain an element or a link to an element that
can NOT be displayed / accessed by all browsers with
common settings.
• Examples:
»JavaScript, Java, Dynamic HTML,
»BMP, TIF, PDF, RTF, PPT, PPS,
»AVI, MP3, MPG,
»VRML,…
119
***-
Developing web documents:
guidelines related to multimedia (2)
• When required, indicate on the web page, that access to
the information or service requires
»a specific setting of the options (and explain which one), or
»a specific browser
(and indicate where this can be obtained), or
»a recent version of a browser
(and indicate where this can be obtained), or
»an additional type of software
(and indicate where this can be obtained), or …
121
***-
Developing web documents:
guidelines related to frames
• To lay out text on a page, you can use tables instead of
frames.
• You can use frames for the things that can only be done
using frames, and for nothing else:
For instance, to obtain individual scrollable regions on 1
page.
(So that for example you can have instructions stay fixed,
at the left but the large document on the right can scroll.)
123
***-
Developing web documents:
difficulties with frames (1)
• Avoid in most cases creating pages with frames,
for the following reasons:
»It is not always clear what will be the result of printing.
»To print the contents of a particular frame, that one has to
be clicked / indicated / selected, before invoking the print
command, and that is not known by all users.
»Accessibility for disabled users that do not use a normal,
common graphical browser can be hindered.
124
***-
Developing web documents:
difficulties with frames (2)
»Navigating by using forward and backward can be
confusing with frames.
»Less “normal” screen space is available for the message.
»Scrolling requires that the right / relevant
part / frame of the page
is clicked / indicated / selected first.
»Pages with frames cannot be displayed and edited well by
all programs that can handle pages without frames.
125
***-
Developing web documents:
difficulties with frames (3)
»Search engines cannot or do not always index all pages in
frames.
»Jumping to a linked file from a framed display, displays
the new file often in the same framed structure.
That can be annoying and confusing.
»The contents of small frames as planned by the
creator/designer can be messed up by variations in font
size or display resolution determined by the user /client.
126
***-
Developing web documents:
difficulties with frames (4)
»The URL/address displayed can be less informative than
when no frames are used.
»Referring/linking to a particular page directly or copying
its URL is not always possible when it is part of a site in
which frames are used.
»Creating a bookmark to some pages with frames is not as
easy as creating a bookmark to a normal page without
frames.
127
***-
Developing web documents:
difficulties with frames (5)
»When a user enters an interior page directly (without
seeing the other frames) from for instance a link offered by
a search engine, the this may be confusing and may hinder
further navigation.
128
***-
!? Question !?
Which methods do you know
to assure the uniformity of the appearance
of related web pages?
129
**--
!? Task !?
Learn about Cascading Style Sheets
from the online help pages
of the software package
that you use to create web pages,
and apply an external style sheet in your web site
to increase the uniformity
of the appearance of all related pages.
130
**--
!? Question !?
If a web page is formatted with an external style sheet
(that is --by definition-- stored in a separate file),
then what happens with the formatting
when you save such a page
to your microcomputer?
Is the formatting kept with the page?
If yes, then where is it stored?
131
***-
!? Question !?
How can we increase the chance
that our WWW pages will be found by potential readers
who use an Internet search engine?
132
***-
Developing web documents:
guidelines related to web indexes (1)
• Ensure that your site will be retrieved by a greater
number of WWW searchers who use search engines.
• In other words:
Design your site in such a way that the likelihood of its
being indexed accurately will be high.
• It is good to keep several guidelines for this in mind.
133
***-
Developing web documents:
guidelines related to web indexes (2)
»Use meaningful names for the folders and files in the URL
for each of your WWW pages.
»Place vital information as a HTML/XHTML-heading
towards the top of the page.
»Create a meaningful HTML/XHTML-title for each of your
WWW pages. (That is the content of the Title tag.)
Note that dynamically generated pages from a database or
contents management system have no meaningful URL in
many cases.
134
***-
Developing web sites:
guidelines related to web indexes (3)
»Include synonyms of significant words and narrower terms
in your web pages.
»Add keywords in another relevant language to your web
pages.
»Do NOT include vital information exclusively in parts that
will not be read by most search engines:
—in graphics, image maps;
—in video;
—in Flash animations;…
135
***-
Developing web documents:
guidelines related to web indexes (4)
»Structure the document so that each of the popular WWW
indexes presents an interesting, useful, clear summary of
your document when it is retrieved in a search.
Some WWW indexes present the first lines of the page,
others present your keywords in the context of the page.
»Try to receive hyperlinks to your pages from other and
famous, high-quality pages.
Then Internet search engines will probably rank your
WWW pages higher in the result sets that they present.
136
***-
!? Task !?
Try to find a program that can analyse your web site
and that can report about the results;
apply this program and learn from the report
how to improve your site
(by eliminating files and pages that take long to download,
by eliminating broken links,…).
For instance Microsoft FrontPage offers such features.
137
***-
Developing web sites:
content accessibility
• The content of web pages should also be accessible by
users with physical disabilities.
• More information on this issue is given by the W3C Web
Accessibility Initiative (WAI) http://www.w3.org/WAI/
• Testing the accessibility of the content of a web page
is possible free of charge through
http://www.cast.org/bobby/
138
***-
!? Task !?
Read the article
Poole, Nick
Approaches to web accessibility.
VINE, No. 124, 2001, p. 12-16.
Web accessibility – current tools, standards and guidance
Web accessibility – new developments
Future developments
139
***-
!? Question !?
Why should we normally avoid formatting
of the absolute size of most texts
on the web pages that we create?
140
***-
!? Task !?
Test the accessibility
of the contents of your web pages.
141
***-
Developing web sites:
placing documents on a web server
• To make your documents/pages/site available through the
web, you place them on a web server
»at your Internet Service Provider
outside your organisation, or
»on a server managed within your organisation,
for instance by the computer centre
or within your department
»on another server, such as
http://geocities.yahoo.com/home/
142
***-
Developing web sites:
which web server to use?
• When you must decide which web server to use, consider
»costs
»support
»continuous, permanent availability; good maintenance
»fast access from your institute OR your region OR from
other parts of the world?
»absence of advertisements inserted by the server’s
company on your web pages
»…
143
***-
Developing web sites: how to place
documents on a web server?
• The exact procedure to place your documents on a web
server depends on the particular server.
So, you should follow the instructions given to you by
YOUR web server manager.
• Making a copy of your files from your pc to the server is
of course always involved, in some way or another.
144
***-
Developing web sites:
software to copy/publish a web
• To publish/export/transfer/copy/move a web,
you can use
»the export or publish function of your web site
development program
»an ftp program
»...
145
***-
!? Task !?
Learn to copy (in one action) a few files
to a remote computer
from your own computer, using ftp.
Then you can use this method for instance
to upload your web pages to a web server computer.
146
***-
!? Question !?
Why is it important to preserve
all directory structures and directory names,
when you copy a set of web pages
from your development environment
to a web server?
147
***-
!? Task !?
1. Copy your web site to a web server,
but keep it unavailable for public access.
2. Test.
3. Publish your web site
= make it accessible for your public.
148
***-
Developing web sites:
increase the “visibility” of your site
• In some cases, people who know only approximately the
URL of your web site, will perhaps use a spelling
variation of a term in the real URL.
Therefore, you can include additional URLs in you web
site with names that contain spelling variations of the
“real” URL.
Make these point / link to the real URL.
Example:
http://www.computer.com/.../photos/
http://www.computer.com/.../fotos/
…
149
***-
Developing web sites:
advertise your web site
To let people know about your WWW site, you can
• mention the address (URL) on your standard stationary
that is used to send classical letters
• mention the address (URL) in the signature that you place
automatically in your e-mail messages
• send e-mail messages to individuals or mailing lists
announcing your new web site or changes
• distribute classical brochures mentioning your web site
• request related web sites to include a hyperlink to your
web site
150
***-
!? Task !?
Search for the documents that you developed
using the most popular WWW indexes;
consider the quality of
the presented summaries of these documents;
try to improve the summaries
by changing your documents.
151
***-
Developing web sites:
maintenance and improvements
• “Maintenance” means here maintenance of
»contents
»hyperlinks in the documents
»development software
»hardware (the development computer)
• Who will be responsible for maintenance?
• On which development computer(s) will maintenance be
carried out?
152
***-
Developing web sites:
monitoring the usage statistics (1)
See that you can access a log of the accesses to your web
pages to monitor the usage of your pages, by exploiting
• the facilities provided by your server, or
• an external service, to which your page is linked
***-Examples
Developing web sites:
monitoring the usage statistics (2)
Examples of services that monitor the usage of your web pages,
provided free of charge:
»http://be.nedstat.net/ (in Dutch or French)
»http://uk.nedstat.net/ (in English)
»http://www.addfreestats.com/
»http://www.cqcounter.com/
»http://www.websitegarage.com/ (in English)
153
154
**--
!? Question !?
How does nedstat and similar systems work?
In other words:
What is the underlying mechanism
that makes it possible for these systems
to offer usage data?
155
**--
!? Question !?
The number of requests received by a web server
are recorded in the usage statistics.
Why does such a log NOT accurately reflect
the absolute, real number of pages viewed by users?
156
***-
Developing web sites:
usability studies
• Study usage statistics.
• Study actual usage:
»select a few interested and motivated users
»develop a few test questions for your specific site
»conduct the usability test
»stay neutral during the test
»document the observations you make
• Draw conclusions.
• Use these conclusions to improve your web site.
157
***-
!? Task !?
Test how your site is actually used
by a few selected users,
draw conclusions
and improve your web site.
158
***-
Developing web sites:
monitoring links to your pages (1)
WWW
Your WWW page
159
***-
Developing web sites:
monitoring links to your pages (2)
• We can use some of the general WWW search engines,
(for instance AltaVista, Google)
to search for WWW pages that contain a hyperlink to one
or our pages.
• This can learn us
»how many and which pages link to our pages, and
»how this “popularity” evolves over time
160
***-
!? Task !?
Check which pages in the WWW
contain a link to one of the pages
of your WWW site.
161
***-Example
Web site evaluation:
an example
See for instance
The Library Web Manager's Reference Center
http://sunsite.berkeley.edu/Web4Lib/RefCenter/
Have a look at this professional WWW page,
make some critical remarks
and suggestions for improvement.
162
***-Example
Web site evaluation:
an example
See for instance
The Library Web Manager's Reference Center
http://sunsite.berkeley.edu/Web4Lib/RefCenter/
Suggestions for improvement:
•3 news sections instead of 1 may be confusing
•font size cannot be changed, which can cause poor readability
•4 menus instead of 1 may be confusing
•some text is not shown completely
•it is not directly clear what is a hyperlink and what not
163
***-
Developing web documents and sites
Creating documents for both
printing and computer-based distribution
164
***-
Creating documents for both printing
and computer-based distribution
Many documents should be distributed
• by using the classical form of printed material,
as well as
• by using more recent methods
based on computers and networks, for instance
»through the WWW,
»through an intranet,
»on CD-ROM,...
165
***-
Creating documents:
which software to use?
• For the distribution based on computers, hypermedia
based on HTML/XHTML are increasingly used.
These documents can be read/viewed by using one of the
common, popular Internet browsers (programs).
• Ideally, the application software used to create both types
of documents should be
»already known by the document creators, or easy to learn
»available free of charge,
or already available to create documents anyway,
or cheap to buy
166
***-
Creating documents:
an ideal, simple, neutral scheme
In this ideal scheme, no preference is given to any format:
author
microcomputer
neutral, well-structured, computer-based master-document
printer
printed document
document on
WWW or intranet or CD-ROM or...
167
***-
Creating documents:
problems with the ideal scheme
• Which application software is available today that can
produce the ideal, neutral, well-structured, computerbased master-document, that forms the ideal basis
»for later printing as well as
»for distribution using computers and networks?
• Can such an ideal computer program exist?
• Which file format is suitable for such a master document:
SGML? XML? An advanced version of HTML/XHTML?
A proprietary format? A combination of all these?
168
***-
XML
= eXtended Markup Language
• XML = eXtended Markup Language
• Developed by a working group
of the World-Wide Web Consortium (W3C)
• A subset of the
Standard Generalised Markup Language (SGML)
• Still evolving
• Requires an XML capable browser to view/interpret
documents marked-up with XML
169
***-
XML
versus SGML and HTML
• XML is simpler than SGML
• XML is more powerful and complex than HTML
• XML allows the creation of documents that contain more
meta-information, more structure than HTML
(for instance in documents generated from databases)
• XML is better than HTML in allowing a separation of
»content
»structure / lay-out / display
»semantics / context / meaning
format
of parts of the content
170
***-
From SGML
to HTML, XML and XHTML
SGML
XML
advanced HTML XHTML
HTML
Complexity
Time / History
Year 2000
|
171
***-
Creating documents as both
print-outs and hypermedia: conclusion
• A simple and cheap solution does not exist (yet).
• As a consequence, in practice, in many cases, the same
information is now stored in 2 ways:
»using 1 file format for 1 program in a combination that is
good in printing
»as HTML/XHTML + GIF + JPG +... files for distribution
through the WWW or an intranet or on CD-ROM
172
***-
Creating documents as both
print-outs and hypermedia: conclusion
In comparison with managing the information in only 1
document version, using 2 document versions
- requires more expertise
- costs more work to create the documents initially
- requires double work in the case of changes in contents
- causes the danger of differences in the contents, in the
message of the 2 document versions
(for instance: prices, dates, regulations, ...)
173
***-
Creating documents as both
print-outs and hypermedia: formats
good for
printing
independent of
computer
platform;
good for
hypermedia
open
standard;
not
proprietary
•Proprietary word
processing file formats
•Portable Document
Format (PDF)
•HTML
+
-
-
+
+
-
-
+
+
•XML!
+
+
+
174
***-
!? Question !?
What are disadvantages
of placing information on your WWW site
in the form of PDF files?
175
***-
!? Question !?
When we want to make information available
through a web,
in which case then should we consider
putting this in the form of a PDF file?
176
***-
Creating documents as both
print-outs and hypermedia: XML
XML is a recent file format which is better suited
• than classical word processing formats and
• than HTML
to create master documents
• that can be printed well and
• that can be made available through the web for browsers.
177
***-
!? Question !? Task !? Problem !?
Save a document file in HTML/XML format,
using for instance Microsoft Word 2000
or a more recent version.
Load it in a web browser, look at the result
and view the source of the HTML/XML page;
or view the HTML source directly in Word.
See that some information is saved
not in the form of HTML codes, but with XML codes.
Give examples of what is saved with XML.
178
***-
Creating documents as both
print-outs and hypermedia: future
Recent generations of common office software packages are
better
• in creating hypermedia based on advanced HTML / XML
• in converting documents to HTML / XML hypermedia
• in integrating word processing with a more specialized
program for web creation and maintenance
• in viewing and creating documents formatted according
to advanced HTML or XML
(with more advanced structures and formats)