1
The basics ****
Developing web documents and sites
2
!! Task - Assignment !!
Read
Morrogh, Earl
Information architecture:
an emerging 21st century profession.
New Jersey : Prentice Hall, 2003, 194 pp.
Chapter 1.
Information architecture: from craft to profession. Read
Morrogh, Earl
Information architecture:
an emerging 21st century profession. New Jersey : Prentice Hall, 2003, 194 pp. Chapter 1.
Information architecture: from craft to profession.
**--3
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
• ... ****
4
!! Task - Assignment !!
Read
Guide to Network Resource Tools (GNRT). [online]
Available from: http://gnrt.terena.nl/[cited 2004] • Web publishing
• Web authoring
• HTML
• Graphics in web pages Read
Guide to Network Resource Tools (GNRT). [online] Available from: http://gnrt.terena.nl/[cited 2004] • Web publishing
• Web authoring
• HTML
• Graphics in web pages
**--5
!! Task - Assignment !!
Read
Clockwatchers, Inc. Web Hosting HTML tutorial. [online]
Available free of charge from: http://www.clockwatchers.com/html_main.html[cited 2005]
Introduction Documents Formatting Links Images Lists Tables Read
Clockwatchers, Inc. Web Hosting HTML tutorial. [online]
Available free of charge from: http://www.clockwatchers.com/html_main.html[cited 2005]
Introduction Documents Formatting Links Images Lists Tables **--6
!! Task - Assignment !!
Read Computer HopeCreating a web site.
(Where to start designing and setting up your own web page.) [online]
Available free of charge from: http://www.computerhope.com/starthtm.htm
[cited 2006]
Read
Computer Hope
Creating a web site.
(Where to start designing and setting up your own web page.) [online]
Available free of charge from:
http://www.computerhope.com/starthtm.htm
[cited 2006]
**--7
!! Task - Assignment !!
Read
FAO and UNESCO
Information Management Resource Kit (IMARK) Module on Digitization and Digital Libraries. Unit 2. Electronic documents and formats. Lesson 4. Presentational mark-up: HTML [online]
Available free of charge from: http://www.imarkgroup.org/2005 [cited 2006],
also published free of charge on CD-ROM.
Read
FAO and UNESCO
Information Management Resource Kit (IMARK) Module on Digitization and Digital Libraries. Unit 2. Electronic documents and formats. Lesson 4. Presentational mark-up: HTML [online]
Available free of charge from: http://www.imarkgroup.org/2005 [cited 2006],
also published free of charge on CD-ROM.
**--8
Developing web documents:
simple programs for editing (Part 1)
To create web documents, 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
9
Developing web documents:
simple programs for editing (Part 2)
• a word processor with integrated HTML facilities, such as
»Microsoft Word 97, 2000, 2002=XP, 2003…
»Open Office Writer from Sun, available free of charge
• a simple HTML editor included in a web browser, such as
»Microsoft Explorer version 4 including FrontPage Express
»Netscape
including (Page) Composer! ****
10
!! Task - Assignment - Exercise !!
1. Save a hypertext page from the Internet. (Note: Save is not copy. A page is not the same as a file.)
2. Check how this page is stored on your computer. 3. Load this in a relatively simple program for web page editing. 4. See how this program shows the page, in comparison with another browser.
5. Modify / edit this page
using a relatively simple program for web page editing. 4. Save it in one of the available HTML formats. 5. Check to make sure that any web browser can view it well.
1. Save a hypertext page from the Internet.
(Note: Save is not copy. A page is not the same as a file.)
2. Check how this page is stored on your computer. 3. Load this in a relatively simple program for web page editing. 4. See how this program shows the page, in comparison with another browser.
5. Modify / edit this page
using a relatively simple program for web page editing. 4. Save it in one of the available HTML formats. 5. Check to make sure that any web browser can view it well.
11
!! Task - Assignment - Exercise !!
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.
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. ****
12
!! Task - Assignment - Exercise !!
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. 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.htmand the second file 2.htm
Check if this works well in a web browser. ****
13
!! Task - Assignment - Exercise !!
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 if you look at file 1. 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.htmto b.htm
See what happens in your browser if you look at file 1. ****
14
Developing web documents:
programs for web code editing
To create web documents, you can use a program for the creation and maintenance of the codes,
such as Hotdog pro.
**--15
Developing web documents:
open source program for editing
You can use an open source program, available free of charge, for the creation and maintenance of web documents and sites:
»Open Office Writer from Sun, available free of charge
»NVU available from http://www.nvu.com
***-16
Developing web documents:
advanced programs for editing
To create web documents, you can use a more specialized, dedicated program for the creation and maintenance of web documents and sites,
such as
»Adobe GoLive !
»Macromedia Dreamweaver !!
»Microsoft FrontPage versions 97, 98, 2000, XP=2002, 2003… !!
see news:microsoft.public.frontpage.client ****
17
?? Question ??
What can the specialized programs for web site creation and maintenance
do more or better than the simpler programs
for web page editing? What can the specialized programs for web site creation and maintenance
do more or better than the simpler programs
for web page editing? ****
18
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 !
• Creating forms !
• Testing the accessibility of web pages !
***-19
Programs for web site development:
advanced features (Part 2)
• DHTML tools
• Layer handling
• Pre-defined templates
• Database integration
• Integrated ftp and more sophisticated “publishing” to a web server
• Edit remote server pages “directly”
• (Creating frames)
**--20
!! Task - Assignment - Exercise !!
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.
Close your program for web development. Check if the created web works well in a web browser. 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.htmand the second file 2.htm.
Save these files.
Close your program for web development. Check if the created web works well in a web browser.
21
!! Task - Assignment - Exercise !!
Rename one of the files/pages
using your operating system in the normal way, but keep the right file name extension (for instance htm);
see what happens with a browser. Put one file in another folder using your operating system in the normal way;
probably you first have to create a subfolder for this exercise; see what happens using a browser.
Rename one of the files/pages
using your operating system in the normal way, but keep the right file name extension (for instance htm);
see what happens with a browser. Put one file in another folder using your operating system in the normal way;
probably you first have to create a subfolder for this exercise; see what happens using a browser.
****
22
!! Task - Assignment - Exercise !!
Rename one of the files/pages using your 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 your program for web development;
probably you first have to create a subfolder for this exercise; see what happens using a browser.
Rename one of the files/pages using your 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 your program for web development;
probably you first have to create a subfolder for this exercise; see what happens using a browser.
23
?? 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. 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. ****
24
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…
***-25
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.
***-26
Developing web sites:
programs for content management
Detailed information about concrete programs is available from http://www.cmsmatrix.org/
**--27
Developing web sites
with several contributors: scheme
***-Web developer Web developer Client computer Client computer
Web server computer Web server computer
Web developer
Web
developer Client computer
Client computer
28
Developing web sites
without
centralised software: scheme
***-Web developer
Web
developer Client computer with
software for web development
Client computer
with
software for web development
Web developer Web developer Web developer Web
developer Client computer with
software for web development
Client computer
with
software for web development
Web server computer
without
web development software
Web server computer
without
web development software
Web developer Web developer Client computer with software for web development
Client computer
with
software for web development
29
Developing web sites without
centralised software:
advantages
+ Web development is possible independent of a central server, anyplace, anywhere, even NOT linked to the computer network.
***-30
Developing web sites without
centralised software:
disadvantages
- All contributors to web development need individual web development software, and this has to be maintained. - It is difficult to ensure uniformity / consistency of web
pages that conform to the agreed style of the organisation.
- It is difficult to change / modify later the formatting of all web pages consistently.
***-31
Developing web sites
with
centralised software: scheme
***-Web developer
Web
developer Client computerwithout software for web development
Client computer
without
software for web development
Web server computer
with
web development software for the organisation Web server computer
with
web development software for the organisation
Web developer
Web
developer Client computer without
software for web development
Client computer
without
software for web development
32
Developing web sites with centralised
software:
advantages
+ All contributors to web development do NOT need individual web development software.
+ It is easy to ensure uniformity / consistency of web pages that conform to the agreed style of the organisation. + It is easy to change / modify later the formatting of all
web pages consistently.
***-33
Developing web sites with centralised
software:
disadvantages
- Web development is NOT possible independent of a central server, anyplace, anywhere, even NOT linked to the computer network.
- In many of such systems, the URLs is given automatically to each web page and such a URL is not meaningful for the users.
***-34
Developing web sites
with several contributors: conclusions
• Various approaches are possible:
»decentralised development on individual microcomputers
»centralised online development on a server computer
—at the level of departments
—at the level of the whole organisation
»combinations of these methods!
***-35
!! Task - Assignment !!
If you want to use Microsoft FrontPage to develop and maintain a web site, then you can have a look at Lesson 1 of the computer-based FrontPage tutorial
that is offered by Microsoft. You only have to download one file and install it on the computer that you will use.
If you want to use Microsoft FrontPage to develop and maintain a web site, then you can have a look at Lesson 1 of the computer-based FrontPage tutorial
that is offered by Microsoft. You only have to download one file and install it on the computer that you will use.
***-36
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 ****
37
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, »… ***-38
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
***-39
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 Toolsmenu, point to Page Options, and then click the Compatibilitytab.
***-40
!! Task - Assignment !!
Check with
the manager of the web server that you will use or with another expert, how well the server software
supports non-standard extended functions that are provided by the program that you use
to create a web site (like the FrontPage extensions)
Check with
the manager of the web server that you will use or with another expert, how well the server software
supports non-standard extended functions that are provided by the program that you use
to create a web site (like the FrontPage extensions)
***-41
?? Question ??
Which program will you use to edit HTML documents? Which program will youuse
to edit HTML documents? ****
42
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).
***-43
?? Question ??
How can we cope with the difficulty that some servers are case-sensitive,
while the editing system used may only create hyperlinks in lowercase?
How can we cope with the difficulty that some servers are case-sensitive,
while the editing system used may only create hyperlinks in lowercase?
**--44
?? Question ??
Explain that
web site creation and maintenance is more than creating / editing
web pages. Explain that
web site creation and maintenance is more than creating / editing
web pages.
***-45
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.
***-46
!! Task - Assignment - Exercise !!
Write a mission statement of a few lines
for the site that you develop. Write a mission statement
of a few lines
for the site that you develop.
**--47
Developing web sites:
development phases (Part 2)
2. Design »Content »Creativity »Technical aspects 3. Test 4. Roll-out
5. Maintenance and improvement
***-48
!! Task - Assignment - Exercise !!
Write down
1. a description of your intended audience
2. of their Internet access speed, hardware, software... 3. conclusions from this,
for the type of site that you develop: language? version of HTML? images?
sound? video? scripts? Java applets? ActiveX controls? need for plug-ins in the client software?
Write down
1. a description of your intended audience
2. of their Internet access speed, hardware, software... 3. conclusions from this,
for the type of site that you develop: language? version of HTML? images?
sound? video? scripts? Java applets? ActiveX controls? need for plug-ins in the client software?
**--49
!! Task - Assignment - Exercise !!
1.
Write down the
messages = ideas = subjects = topics = categories that you want to include in your web site.
For instance: a personal WWW site.
For each topic, you can use for instance a sticky note or a piece of paper. 1.
Write down the
messages = ideas = subjects = topics = categories that you want to include in your web site.
For instance: a personal WWW site.
For each topic, you can use for instance a sticky note or a piece of paper.
***-50
!! Task - Assignment - Exercise !!
2.
Plan the hyperlinks among your topics on the web site that you develop.
For instance: a personal WWW site.
(You can use for instance one sticky note for each topic, organize these on a large sheet of paper, and indicate hyperlinks with written arrows.)
2.
Plan the hyperlinks among your topics on the web site that you develop.
For instance: a personal WWW site.
(You can use for instance one sticky note for each topic, organize these on a large sheet of paper, and indicate hyperlinks with written arrows.)
**--51
!! Task - Assignment - Exercise !!
3.
Plan the files and good file names + a hierarchical structure of subfolders
with good folder names (and the links among these) of the web site that you develop. For instance: a personal WWW site.
(You can use one sticky note to represent each file with the name of the file written on each note and organize these on a large sheet of paper.) Hint: create an index.html file in each folder.
3.
Plan the files and good file names + a hierarchical structure of subfolders
with good folder names (and the links among these) of the web site that you develop. For instance: a personal WWW site.
(You can use one sticky note to represent each file with the name of the file written on each note and organize these on a large sheet of paper.) Hint: create an index.html file in each folder.
**--52
Developing web sites:
basic elements of a web site
Thinking of web creation, we are confronted with:
• Topics = messages = categories = subjects =…
• Hyperlinks = relations =…
• Files = pages, each with their name, including the index.html files/pages
• Folders = subfolders, each one with a name
***-53
?? Question ??
When you create a directory / folder 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? When you create a directory / folder 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?
***-54
!! Task - Assignment - Exercise !!
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)?
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)?
***-55
?? Question ??
Give examples in reality of a hierarchical structure and
of a web structure. Give examples in reality of a hierarchical structure and
of a web structure.
***-56
?? Question ??
Is the navigation structure of a web site a tree structure or a web structure? Is the navigation structure of a web site
a tree structure or a web structure?
***-57
?? Question ??
Is the folder and file structure of a web site on a web server a tree structure or a web structure?
Is the folder and file structure of a web site on a web server a tree structure or a web structure?
***-58
!! Task - Assignment - Exercise !!
Look for
similar and/or overlapping and/or competing web sites. If these exist, then learn from these.
Look for
similar and/or overlapping and/or competing web sites. If these exist, then learn from these.
***-59
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. ****
60
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.
61
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) ****
62
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. ****
63
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.
****
64
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)
**--65
?? Question ??
In editing and formatting programs (like Microsoft Word, PowerPoint, FrontPage…) we want What You See Is What You Get (WYSIWYG).
However, explain that WYSIWYG has a slightly different meaning
in web page building
than for instance in developing presentation slides. In editing and formatting programs
(like Microsoft Word, PowerPoint, FrontPage…) we want What You See Is What You Get (WYSIWYG).
However, explain that WYSIWYG has a slightly different meaning
in web page building
than for instance in developing presentation slides.
***-66
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.
***-67
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.
• Use bulleted list, whenever possible, because this makes the structure better visible and because it increases scan ability.
• 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.
***-68
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.
69
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.
***-70
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
»...
***-71
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”.
***-72
?? Question ??
How can we avoid broken links? How can we avoid broken links?
***-73
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
***-74
?? 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? 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?
***-75
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
***-76
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.)
***-77
Developing web sites:
guidelines related to the
URL
(Part 3)
• Avoid renaming your folders and files, to avoid changing URLs.
***-78
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 completely, 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)
***-79
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).
***-80
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.
***-81
Developing web sites:
guidelines related to
accessibility
(3)
• Include an index.htmlfile 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 lat the end), because not all web servers send this as default document.
***-82
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-arts //webserver/african art //webserver/african arts //webserver/african_art //webserver/african_arts //webserver/africanart //webserver/africanarts
***-83
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/
***-84
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
***-85
?? Question ??
For which hyperlinks in your web pages do you use absolute linking, and for which relative linking?
Why?
For which hyperlinks in your web pages do you use absolute linking, and for which relative linking?
Why?
***-86
?? Question ??
Why should we avoid using absolute hyperlinks in the code of our web pages
for the internal links within our web site? Why should we avoid using absolute hyperlinks
in the code of our web pages for the internal links within our web site?
***-87
?? 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? 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?
***-88
Developing web documents:
guidelines related to
tables
• If you want to determine the positions of texts andpictures on a web page in a way that is more complicated than simply sequentially, then you can insert a table.
• However, avoid giving the table an absolute size, because viewers have different displays and this forces some viewers to scroll horizontally while reading your page;
instead give the table a size that is expressed as a percentage of the display, so that it adapts to various displays.
***-89
!! Task - Assignment - Exercise !!
Why should we avoid in most cases to format the absolute size
of most tables on web pages that we create? Why should we avoid in most cases
to format the absolute size
of most tables on web pages that we create?
***-90
Developing web documents:
guidelines related to
typography
• Typography is important for all kinds of documents.• For documents that will be read on a computer display, like web pages some specific aspects are important.
• See:
Web page design for designers: typography. [online] By Gillespie, Joe
Available from http://www.wpdfd.com/wpdtypo.htm
[cited August 2001]
***-91
!! Task - Assignment - Exercise !!
Use the program
that you have chosen for HTML/XHTML editing, and create a page
that includes graphics. Use the program
that you have chosen for HTML/XHTML editing, and create a page
that includes graphics.
***-92
!! Task - Assignment - Exercise !!
1. Use a program to save some page that includes graphics. 2. Inspect your hard disk to check if all the required files were saved indeed.
1. Use a program to save some page that includes graphics. 2. Inspect your hard disk to check if all the required files were saved indeed.
***-93
!! Task - Assignment - Exercise !!
Start a web browser that does not display graphics (such as lynx on the Unix platform)
and check how well a chosen web page is displayed.
Start a web browser that does not display graphics (such as lynx on the Unix platform)
and check how well a chosen web page is displayed.
*---94
?? Question ??
Which are the most widely used file formats for graphics on a web?
Which are the most widely used file formats for graphics on a web?
***-95
?? Question ??
TIF is a powerful picture file format, but you should avoid using it in your WWW sites.
Why?
TIF is a powerful picture file format, but you should avoid using it in your WWW sites.
Why?
***-96
Developing web documents:
guideline related to image sizes
• HTML allows to determine the display size of image files by the browser software,
independent of the real size of the image.
Some web creation programs write this display size in the HTML file code.
However, avoid a display size different from the real size, because resizing the image by the browser software normally causes a display quality that is lower than when the image is displayed directly without resizing.
***-97
!! Task - Assignment - Exercise !!
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. 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.
***-98
?? Question ??
What are “thumbnails” and
why are they used on the web? What are “thumbnails”
and
why are they used on the web?
***-99
?? Question ??
What is the relation between “thumbnails” and the possibility to use HTML
to make the browser display a picture with a size that is different from the original, internal, real size?
What is the relation between “thumbnails” and the possibility to use HTML
to make the browser display a picture with a size that is different from the original, internal, real size?
***-100
Developing web documents:
image thumbnails
• Graphics take long to download.
• To speed things up you can use small images (thumbnails) linked to larger versions when appropriate, so that the user can decide whether to wait for the larger image to download.
***-101
!! Task - Assignment - Exercise !!
Replace a large image on your web site by a thumbnail image
that is linked to the original, larger image. Replace a large image on your web site
by a thumbnail image
that is linked to the original, larger image.
***-102
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.
***-103
Developing web documents:
text replacements for pictures
• Realize that some users do not view graphics/images/pictures
»because they cannot see well, or
»because this is faster, or
»because their web browser does not support graphics…
• Create a meaningful text as an automatic replacement for users who will not see the graphics/images/pictures.
***-104
Developing web documents:
graphics as a part of a web page
Consider showing each full picture not just as a separate item, but as a part of a web page for that picture.
This allows a better display, as this makes it possible for instance
»to center the picture in the displaying window
»to create a border around the picture
»to adapt the window background
—to the colours or message of the picture or
—to the background of other parts of the site
***-105
!! Task - Assignment - Exercise !!
Prepare a printout of a browser displaying a web page that you made and that contains a table with colored borders
and with 3 columns of equal width, that contain 1) a static image of an animal in thumbnail size,
2) the name of that animal, 3) your name
(To avoid that everyone does the same work: the name of the animal in English should start with the same character as your family name.)
The thumbnail should link to another web page that shows the original full-size image on a black background. Prepare a printout of a browser displaying a web page that you made
and that contains a table with colored borders and with 3 columns of equal width, that contain 1) a static image of an animal in thumbnail size,
2) the name of that animal, 3) your name
(To avoid that everyone does the same work: the name of the animal in English should start with the same character as your family name.)
The thumbnail should link to another web page that shows the original full-size image on a black background.
**--106
?? Question ??
Assume that you have a file
in the default file format created by a program like Microsoft Excel or PowerPoint 2003 or by an alternative similar program, and that this contains a chart
that you want to include in one of your classical HTML web pages. Then how can you proceed
to do this efficiently with a good result? Assume that you have a file
in the default file format created by a program like Microsoft Excel or PowerPoint 2003 or by an alternative similar program, and that this contains a chart
that you want to include in one of your classical HTML web pages. Then how can you proceed
to do this efficiently with a good result?
**--107
!! Task - Assignment - Exercise !!
Create a web page with some text and include a chart
that has been made in a program like Excel or PowerPoint and that you get as a file created and saved by such a program. Create a web page with some text
and include a chart
that has been made in a program like Excel or PowerPoint and that you get as a file created and saved by such a program.
**--108
!! Task - Assignment - Exercise !!
Make a printout with a normal web browser of a web page that you have made, that contains a chart that you have made,
that can be completely seen with a normal web browser, even on a screen with a resolution as low as 800x600.
Make your name the title of the web page. Make a printout with a normal web browser
of a web page that you have made, that contains a chart that you have made,
that can be completely seen with a normal web browser, even on a screen with a resolution as low as 800x600.
Make your name the title of the web page.
**--109
!! Task - Assignment - Exercise !!
Make a printout with a normal web browser of a web page that you have made, and that contains some computer screenshot that can be completely seen with a normal web browser,
even on a screen with a resolution as low as 800x600. Make your name the title of the web page. Make a printout with a normal web browser
of a web page that you have made, and that contains some computer screenshot that can be completely seen with a normal web browser,
even on a screen with a resolution as low as 800x600. Make your name the title of the web page.
**--110
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,…
***-111
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 …
***-112
!! Task - Assignment !!
Read
Lynch, Patrick J., and Horton, Sarah
Web style guide:
basic design principles for creating web sites.
New Haven and London : Yale University Press, 1999, 164 pp.
Read
Lynch, Patrick J., and Horton, Sarah Web style guide:
basic design principles for creating web sites. New Haven and London : Yale University Press,
1999, 164 pp.
***-113
Developing web documents:
guidelines related to
frames
• To lay out text on a page, you can use tables instead offrames.
• 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.)
***-114
?? Question ??
Why should you avoid creating pages with frames in most cases?
Why should you avoid creating pages with frames in most cases?
***-115
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.
***-116
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.
***-117
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.
***-118
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.
***-119
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.
***-120
?? Question ??
Which methods do you know
to assure the uniformity of the appearance of related web pages?
Which methods do you know
to assure the uniformity of the appearance of related web pages?
***-121
!! Task - Assignment !!
Read
Lie, Håkon Wium and Bos, Bert
CSS.
Chapter 2 of the book
Cascading Style Sheets, designing for the Web,
(2nd edition, 1999, Addison Wesley, ISBN 0-201-59625-3. [online]
Available from: http://www.w3.org/Style/LieBos2e/enter/ [cited 2005]
Read
Lie, Håkon Wium and Bos, Bert CSS.
Chapter 2 of the book
Cascading Style Sheets, designing for the Web,
(2nd edition, 1999, Addison Wesley, ISBN 0-201-59625-3. [online]
Available from: http://www.w3.org/Style/LieBos2e/enter/
[cited 2005] **--122
!! Task - Assignment !!
Read: Ernst, WarrenCascading style sheets.
PC Magazine (USA), September 3, 2002, IP01-IP04. •More than markup
•Cascading a style •External style sheets
Read:
Ernst, Warren
Cascading style sheets.
PC Magazine (USA), September 3, 2002, IP01-IP04. •More than markup
•Cascading a style •External style sheets
**--123
!! Task - Assignment - Exercise !!
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. 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.
**--124
?? Question ??
If a page on the WWW is formatted with an external style sheet
(that is --by definition-- stored in a separate file), then what happens with the formatting when you download and save such a page
to your microcomputer? Is the formatting kept with the page?
If yes, then where is it stored? If a page on the WWW is formatted
with an external style sheet
(that is --by definition-- stored in a separate file), then what happens with the formatting when you download and save such a page
to your microcomputer? Is the formatting kept with the page?
If yes, then where is it stored?
**--125
!! Task - Assignment - Exercise !!
If you use an advanced program for web development,
then check if this can include a page in another page. If this is possible, then use this feature
for instance to include the contents of a separate file in each of your web pages as a common footer. (This reduces redundancy and increases uniformity.)
If you use an advanced program for web development,
then check if this can include a page in another page. If this is possible, then use this feature
for instance to include the contents of a separate file in each of your web pages as a common footer. (This reduces redundancy and increases uniformity.)
**--126
?? Question ??
How can we increase the chance
that our WWW pages will be found by potential readers who use an Internet search engine?
How can we increase the chance
that our WWW pages will be found by potential readers who use an Internet search engine?
***-127
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.
***-128
Developing web sites:
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.
***-129
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;…
***-130
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.
***-131
Developing web sites:
guidelines related to
web indexes
(5)
»Visit the major search engines and for each one, look for the link “Add URL” or “Add page”
or “Submit URL” or “Submit page” or an equivalent, and use it for your URL(s) / page(s).
*---132
!! Task - Assignment - Exercise !!
Search for documents
using one of the popular WWW indexes, inspect the presented summary
of a retrieved document, consider the quality of that summary
and compare it
with the corresponding original document. Search for documents
using one of the popular WWW indexes, inspect the presented summary
of a retrieved document, consider the quality of that summary
and compare it
with the corresponding original document.
