Developing web documents and sites

Transcription

1 **** 1 Developing web documents and sites The basics **--!! Task - Assignment!! 2 Read Morrogh, Earl Information architecture: an an emerging 21st century profession. New Jersey :: Prentice Hall, 2003, 194 pp. pp. Chapter Information architecture: from craft to to profession.

2 **** Developing web documents: introduction 3 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... **--!! Task - Assignment!! 4 Read Guide to to Network Resource Tools (GNRT). [online] Available from: [cited 2004] Web publishing Web authoring HTML Graphics in in web pages

3 **--!! Task - Assignment!! 5 Read Clockwatchers, Clockwatchers, Inc. Inc. Web Web Hosting Hosting HTML tutorial. tutorial. [online] [online] Available Available free free of of charge charge from: from: [cited [cited 2005] 2005] Introduction Introduction Documents Documents Formatting Formatting Links Links Images Images Lists Lists Tables Tables **--!! Task - Assignment!! 6 Read Computer Hope Creating a web web site. site. (Where to to start start designing and and setting up up your your own own web web page.) [online] Available free free of of charge from: [cited 2006]

4 **--!! Task - Assignment!! 7 Read FAO FAO and and UNESCO Information Management Resource Kit Kit (IMARK) Module on on Digitization and and Digital Libraries. Unit Unit Electronic documents and and formats. Lesson Presentational mark-up: HTML [online] Available free free of of charge from: [cited 2006], also also published free free of of charge on on CD-ROM. **** Developing web documents: simple programs for editing (Part 1) 8 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

5 **** Developing web documents: simple programs for editing (Part 2) 9 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! ****!! Task - Assignment - Exercise!! Save Save a hypertext page page from from the the Internet. (Note: (Note: Save Save is is not not copy. copy. A page page is is not not the the same same as as a a file.) file.) Check Check how how this this page page is is stored stored on on your your computer Load Load this this in in a relatively simple simple program for for web web page page editing. editing See See how how this this program shows shows the the page, page, in in comparison with with another another browser Modify Modify // edit edit this this page page using using a relatively simple simple program for for web web page page editing. editing Save Save it it in in one one of of the the available HTML HTML formats Check Check to to make make sure sure that that any any web web browser can can view view it it well. well.

6 ****!! Task - Assignment - Exercise!! 11 Start a simple program to to create web pages (files, documents, NOT classical pages to to be be printed), and create and save a very simple new page. Check if if this shows up up well in in a web browser. ****!! Task - Assignment - Exercise!! 12 Start a simple program to to create web pages, create 2 very simple web pages, and create a hyperlink in in page 1 to to page 2, 2, and a hyperlink in in page 2 to to page for for instance, name the the first file 1.htm and the the second file 2.htm Check if if this works well in in a web browser.

7 ****!! Task - Assignment - Exercise!! 13 Rename one of of the files/pages that you have created, using directly your computer operating system software, but keep the file name extension as as.htm for for instance, rename 2.htm to to b.htm See what happens in in your browser if if you look at at file **-- Developing web documents: programs for web code editing 14 To create web documents, you can use a program for the creation and maintenance of the codes, such as Hotdog pro.

8 Developing web documents: open source program for editing 15 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 **** Developing web documents: advanced programs for editing 16 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

9 ****?? Question?? 17 What can the specialized programs for web site creation and maintenance do do more or or better than the simpler programs for web page editing? Programs for web site development: advanced features (Part 1) 18 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!

10 **-- Programs for web site development: advanced features (Part 2) 19 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) ****!! Task - Assignment - Exercise!! 20 Start the the program that that you you have have chosen to to create a web web site. site. Create a new new web! In In that that web, web, create 2 very very simple web web pages, and and create a hyperlink in in page page 1 to to page page 2, 2, and and a hyperlink in in page page 2 to to page page For For instance, name the the first first file file 1.htm and and the the second file file 2.htm. Save Save these files. files. Close your your program for for web web development. Check if if the the created web web works well well in in a web web browser.

11 ****!! Task - Assignment - Exercise!! 21 Rename one one of of the the files/pages using your your operating system in in the the normal way, way, but but keep keep the the right file file name extension (for (for instance htm); see see what happens with with a browser. Put Put one one file file in in another folder using using your your operating system system in in the the normal normal way; way; probably you you first first have have to to create a subfolder for for this this exercise; see see what happens using a browser. ****!! Task - Assignment - Exercise!! 22 Rename one one of of the the files/pages using your your program for for web web development, but but keep keep the the right file file name extension (for (for instance htm); see see what happens with with a browser. Put Put one one file file in in another folder using your your program for for web web development; probably you you first first have have to to create a subfolder for for this this exercise; see see what happens using a browser.

12 ****?? Question?? 23 Explain how a program like Microsoft FrontPage allows renaming and relocating a file or or folder, in in such a way that web hyperlinks are not broken. Developing web sites: programs on a server 24 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

13 Developing web sites: programs for content management 25 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. **-- Developing web sites: programs for content management 26 Detailed information about concrete programs is available from

14 Developing web sites with several contributors: scheme 27 Web Web developer Client computer Web Web developer Client computer Web Web server computer Developing web sites without centralised software: scheme 28 Web Web developer Web Web developer Client computer with with software for for web web development Client computer with with software for for web web development Web Web server computer without web web development software

15 Developing web sites without centralised software: advantages 29 + Web development is possible independent of a central server, anyplace, anywhere, even NOT linked to the computer network. Developing web sites without centralised software: disadvantages 30 - 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.

16 Developing web sites with centralised software: scheme 31 Web Web developer Web Web developer Client computer without software for for web web development Client computer without software for for web web development Web Web server computer with with web web development software for for the the organisation Developing web sites with centralised software: advantages 32 + 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.

17 Developing web sites with centralised software: disadvantages 33 - 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. Developing web sites with several contributors: conclusions 34 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!

18 !! Task - Assignment!! 35 If If you you want to to use use Microsoft FrontPage to to develop and and maintain a web web site, site, then then you you can can have have a look look at at Lesson 1 of of the the computer-based FrontPage tutorial that that is is offered by by Microsoft. You You only only have have to to download one one file file and and install it it on on the the computer that that you you will will use. use. **** The various types of webs 36 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

19 Microsoft FrontPage Web Server software Extensions 37 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,» Programs for web site development and web server software extensions 38 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

20 Enable or disable the Server Extensions in FrontPage 39 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.!! Task - Assignment!! 40 Check with the manager of of the web server that you will use or or with another expert, how well the server software supports non-standard extended functions that are provided by by the program that you use to to create a web site (like the FrontPage extensions)

21 ****?? Question?? 41 Which program will you use to to edit HTML documents? Programs for web site development: the problem of mixed case in a web 42 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).

22 **--?? Question?? 43 How can we we cope with the difficulty that some servers are case-sensitive, while the editing system used may only create hyperlinks in in lowercase??? Question?? 44 Explain that web site creation and maintenance is is more than creating // editing web pages.

23 Developing web sites: development phases (Part 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. **--!! Task - Assignment - Exercise!! 46 Write a mission statement of of a few lines for the site that you develop.

24 Developing web sites: development phases (Part 2) Design»Content»Creativity»Technical aspects 3. Test 4. Roll-out 5. Maintenance and improvement **--!! Task - Assignment - Exercise!! 48 Write down a description of of your intended audience of of their Internet access speed, hardware, software conclusions from this, for the type of of site that you develop: language? version of of HTML? images? sound? video? scripts? Java applets? ActiveX controls? need for plug-ins in in the client software?

25 !! Task - Assignment - Exercise!! Write down the messages = ideas = subjects = topics = categories that you want to to include in in your web site. For For instance: a personal WWW site. site. For For each each topic, you you can can use use for for instance a sticky note note or or a piece of of paper. **--!! Task - Assignment - Exercise!! Plan the hyperlinks among your topics on on the web site that you develop. For For instance: a personal WWW site. site. (You (You can can use use for for instance one one sticky note note for for each each topic, organize these these on on a large large sheet sheet of of paper, and and indicate hyperlinks with with written arrows.)

26 **--!! Task - Assignment - Exercise!! Plan Plan the the files files and and good good file file names + a hierarchical structure of of subfolders with with good good folder names (and (and the the links links among these) of of the the web web site site that that you you develop. For For instance: a personal WWW site. site. (You (You can can use use one one sticky note note to to represent each each file file with with the the name of of the the file file written on on each each note note and and organize these these on on a large large sheet sheet of of paper.) Hint: Hint: create an an index.html file file in in each each folder. Developing web sites: basic elements of a web site 52 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

27 ?? Question?? 53 When you create a directory // folder structure for a web site: What is is the advantage of of using a separate directory/folder for image files? Would you put all all image files there?!! Task - Assignment - Exercise!! 54 Show with an an example of of a concrete simple web site that you realize that the navigation structure of of a web (the view of of the user/reader/consumer) is is a different concept from the folder structure of of a web site (the view of of the producer/author/creator)?

28 ?? Question?? 55 Give examples in in reality of of a hierarchical structure and of of a web structure.?? Question?? 56 Is Is the navigation structure of of a web site a tree structure or or a web structure?

29 ?? Question?? 57 Is Is the folder and file structure of of a web site on on a web server a tree structure or or a web structure?!! Task - Assignment - Exercise!! 58 Look for similar and/or overlapping and/or competing web sites. If If these exist, then learn from these.

30 **** Developing web documents: basic guidelines (Part 1) 59 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. **** Developing web documents: basic guidelines (Part 2) 60»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.

31 **** Developing web documents: basic guidelines (Part 3) 61»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 address or another relevant address, and by providing a link of the mailto: type to your address, or (by offering a feedback form) **** Developing web documents: basic guidelines (Part 4) 62»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.

32 **** Developing web documents: basic guidelines (Part 5) 63»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. **-- Developing web documents: basic guidelines (Part 6) 64»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)

33 ?? Question?? 65 In In editing and formatting programs (like Microsoft Word, PowerPoint, FrontPage ) we we want What You See Is Is What You Get (WYSIWYG). However, explain that WYSIWYG has a slightly different meaning in in web page building than for instance in in developing presentation slides. Developing web sites: guidelines related to structure (Part 1) 66 Put yourself in the shoes of potential, inexperienced readers/users; try to imagine how they will approach the document.

34 Developing web sites: guidelines related to structure (Part 2) 67 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. Developing web sites: guidelines related to structure (Part 3) 68 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

35 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»...

36 Developing web sites: guidelines related to hyperlinking (3) 71 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.?? Question?? 72 How can we we avoid broken links?

37 Developing web sites: guidelines related to the context 73 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?? Question?? 74 Which guidelines should we we have in in mind, when we we create a URL for a web page? In In other words: How does an an ideal URL look like? or: Which kind of of URL to to avoid?

38 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.)

39 Developing web sites: guidelines related to the URL (Part 3) 77 Avoid renaming your folders and files, to avoid changing URLs. Developing web sites: guidelines related to the URL (Part 4) 78 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)

40 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.

41 Developing web sites: guidelines related to accessibility (3) 81 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 Do not use index.htm (without l at the end), because not all web servers send this as default document. Developing web sites: guidelines related to accessibility (4) 82 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

42 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 Developing web documents: guidelines related to HTML (2) 84 To segregate logical document components for better readability, insert»blank lines, or»horizontal lines, or»small pictures

43 ?? Question?? 85 For which hyperlinks in in your web pages do do you use absolute linking, and for which relative linking? Why??? Question?? 86 Why should we we avoid using absolute hyperlinks in in the code of of our web pages for the internal links within our web site?

44 ?? Question?? 87 When developing a web site, we we should use as as much as as possible relative links. But in in which case do do we we use absolute links in in our web sites? Developing web documents: guidelines related to tables 88 If you want to determine the positions of texts and pictures 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.

45 !! Task - Assignment - Exercise!! 89 Why should we we avoid in in most cases to to format the absolute size of of most tables on on web pages that we we create? Developing web documents: guidelines related to typography 90 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 [cited August 2001]

46 !! Task - Assignment - Exercise!! 91 Use the program that you have chosen for HTML/XHTML editing, and create a page that includes graphics.!! Task - Assignment - Exercise!! Use a program to to save some page that includes graphics Inspect your hard disk to to check if if all all the required files were saved indeed.

47 *---!! Task - Assignment - Exercise!! 93 Start a web browser that does not display graphics (such as as lynx on on the Unix platform) and check how well a chosen web page is is displayed.?? Question?? 94 Which are the most widely used file formats for graphics on on a web?

48 ?? Question?? 95 TIF is is a powerful picture file format, but you should avoid using it it in in your WWW sites. Why? Developing web documents: guideline related to image sizes 96 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.

49 !! Task - Assignment - Exercise!! 97 Check for each of of the images in in your web pages, that the HTML/XHTML code does NOT force the browser to to change the display size of of the image.?? Question?? 98 What are thumbnails and why are they used on on the web?

50 ?? Question?? 99 What is is the relation between thumbnails and the possibility to to use HTML to to make the browser display a picture with a size that is is different from the original, internal, real size? Developing web documents: image thumbnails 100 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.

51 !! Task - Assignment - Exercise!! 101 Replace a large image on on your web site by by a thumbnail image that is is linked to to the original, larger image. Developing web documents: guidelines related to icons 102 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.

52 Developing web documents: text replacements for pictures 103 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. Developing web documents: graphics as a part of a web page 104 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

53 **--!! Task - Assignment - Exercise!! 105 Prepare a printout of of a browser displaying a web web page page that that you you made made and and that that contains a table table with with colored colored borders borders and and with with 3 columns of of equal equal width, width, that that contain contain 1) 1) a static static image image of of an an animal animal in in thumbnail size, size, 2) 2) the the name name of of that that animal, animal, 3) 3) your your name name (To (To avoid avoid that that everyone does does the the same same work: work: the the name name of of the the animal animal in in English English should should start start with with the the same same character as as your your family family name.) name.) The The thumbnail should should link link to to another another web web page page that that shows shows the the original original full-size full-size image image on on a black black background. **--?? Question?? 106 Assume that that you you have have a file file in in the the default file file format created by by a program like like Microsoft Excel or or PowerPoint or or by by an an alternative similar program, and and that that this this contains a chart that that you you want to to include in in one one of of your your classical HTML web web pages. Then how how can can you you proceed to to do do this this efficiently with with a good good result?

54 **--!! Task - Assignment - Exercise!! 107 Create a web web page page with with some text text and and include a chart that that has has been been made in in a program like like Excel or or PowerPoint and and that that you you get get as as a file file created and and saved by by such such a program. **--!! Task - Assignment - Exercise!! 108 Make a printout with a normal web browser of of a web page that you have made, that contains a chart that you have made, that can be be completely seen with a normal web browser, even on on a screen with a resolution as as low as as 800x600. Make your name the title of of the web page.

55 **--!! Task - Assignment - Exercise!! 109 Make a printout with a normal web browser of of a web page that you have made, and that contains some computer screenshot that can be be completely seen with a normal web browser, even on on a screen with a resolution as as low as as 800x600. Make your name the title of of the web page. Developing web documents: guidelines related to multimedia (1) 110 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,

56 Developing web documents: guidelines related to multimedia (2) 111 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!! Task - Assignment!! 112 Read Lynch, Patrick J., J., and Horton, Sarah Web style guide: basic design principles for for creating web sites. New Haven and London :: Yale University Press, 1999, 164 pp.

57 Developing web documents: guidelines related to frames 113 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.)?? Question?? 114 Why should you avoid creating pages with frames in in most cases?

58 Developing web documents: difficulties with frames (1) 115 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. Developing web documents: difficulties with frames (2) 116»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.

59 Developing web documents: difficulties with frames (3) 117»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. Developing web documents: difficulties with frames (4) 118»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.

60 Developing web documents: difficulties with frames (5) 119»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.?? Question?? 120 Which methods do do you know to to assure the uniformity of of the appearance of of related web pages?

61 **--!! Task - Assignment!! 121 Read Lie, Håkon Wium and Bos, Bert CSS. Chapter 2 of of the the book Cascading Style Sheets, designing for for the the Web, (2nd edition, 1999, Addison Wesley, ISBN [online] Available from: [cited 2005] **--!! Task - Assignment!! 122 Read: Ernst, Warren Cascading style sheets. PC PC Magazine (USA), September 3, 3, 2002, IP01-IP04. More than markup Cascading a style External style sheets

62 **--!! Task - Assignment - Exercise!! 123 Learn about Cascading Style Sheets from the online help pages of of the software package that you use to to create web pages, and apply an an external style sheet in in your web site to to increase the uniformity of of the appearance of of all all related pages. **--?? Question?? 124 If If a page page on on the the WWW is is formatted with with an an external style style sheet (that (that is is --by --by definition-- stored in in a separate file), file), then then what happens with with the the formatting when you you download and and save save such such a page page to to your your microcomputer? Is Is the the formatting kept kept with with the the page? If If yes, yes, then then where is is it it stored?

63 **--!! Task - Assignment - Exercise!! 125 If If you use an an advanced program for web development, then check if if this can include a page in in another page. If If this is is possible, then use this feature for instance to to include the contents of of a separate file in in each of of your web pages as as a common footer. (This reduces redundancy and increases uniformity.)?? Question?? 126 How can we we increase the chance that our WWW pages will be be found by by potential readers who use an an Internet search engine?

64 Developing web documents: guidelines related to web indexes (1) 127 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. Developing web sites: guidelines related to web indexes (2) 128»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.

65 Developing web sites: guidelines related to web indexes (3) 129»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; Developing web documents: guidelines related to web indexes (4) 130»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.

66 *--- Developing web sites: guidelines related to web indexes (5) 131»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). *---!! Task - Assignment - Exercise!! 132 Search for documents using one of of the popular WWW indexes, inspect the presented summary of of a retrieved document, consider the quality of of that summary and compare it it with the corresponding original document.

67 !! Task - Assignment - Exercise!! 133 Try Try to to find find a program that that can can analyse your your web web site site and and that that can can report about the the results; apply this this program and and learn from the the report how how to to improve your your site site (by (by eliminating files files and and pages that that take take long long to to download, by by eliminating broken links, etc ). For For instance Microsoft FrontPage offers such such features. Developing web sites: content accessibility 134 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)

68 !! Task - Assignment!! 135 Read Read the the article Poole, Nick Nick Approaches to to web web accessibility. VINE, No. No. 124, 124, 2001, p. p Web Web accessibility current tools, standards and and guidance Web Web accessibility new new developments Future developments?? Question?? 136 Why should we we normally avoid formatting of of the absolute size of of most texts on on the web pages that we we create?

69 !! Task - Assignment - Exercise!! 137 Test the accessibility of of the contents of of your web pages. Developing web sites: placing documents on a web server 138 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»that provides services free of charge, such as another server

70 Developing web sites: which web server to use? 139 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» Developing web sites: how to place documents on a web server? 140 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.

71 Developing web sites: software to copy/publish a web 141 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!»...!! Task - Assignment - Exercise!! 142 Learn to to copy (in (in one action) a few files to to a remote computer from your own computer, using ftp. Then you can use this method for for instance to to upload your web pages to to a web server computer.

72 ?? Question?? 143 Why is is it it important to to preserve all all directory structures and directory names, when you copy a set set of of web pages from your development environment to to a web server? *---!! Task - Assignment - Exercise!! 144 When you will develop and maintain a part of of a larger web site, then write a proposal for the definition of of your responsibility and for the methods to to be be used: password(s) to to the server, sharing 1 site on on 1 or or more development pc s...

73 !! Task - Assignment - Exercise!! Copy your web site to to a web server, but keep it it unavailable for public access Test. Does all all work as as it it should? Report about any problems Publish your web site = make it it accessible for your public. Developing web sites: increase the visibility of your site 146 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:

74 Developing web sites: advertise your web site 147 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 messages send 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 Developing web sites: maintenance and improvements 148 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 will maintenance be carried out?

75 ?? Question?? 149 Why can web usage statistics be be useful for the web developer and publisher? Which methods can be be used to to obtain usage statistics for your web? Developing web sites: monitoring the usage statistics (1) 150 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

76 Examples Developing web sites: monitoring the usage statistics (2) 151 Examples of services that monitor the usage of your web pages, provided free of charge:» (in English)» Question?? 152 How does nedstat and similar systems work? In In other words: What is is the underlying mechanism that makes it it possible for these systems to to offer usage data?

77 **--?? Question?? 153 The number of of requests received by by a web server are recorded in in the usage statistics. Why does such a log NOT accurately reflect the absolute, real number of of pages viewed by by users? Developing web sites: usability studies 154 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.

78 !! Task - Assignment - Exercise!! 155 Test how your site is is actually used by by a few selected users, draw conclusions and improve your web site.!! Task - Assignment!! 156 Read Nielsen, Jacob Top ten mistakes in in Web design. [online] Available free of of charge from: [cited 2007]

79 Developing web sites: monitoring links to your pages (1) 157 WWW Your WWW page Developing web sites: monitoring links to your pages (2) 158 It is interesting to find out»how many and which pages/documents link to our pages, and»how this popularity evolves over time

80 Developing web sites: monitoring links to your pages (3) 159 Methods to investigate links to your web pages:»by searching for web pages that contain a hyperlink to one or your pages, using some of the general WWW search engines (for instance AltaVista, Google)»by using a system to collect statistics of usage, that reveals which web documents were the starting points of the incoming followed hyperlinks!! Task - Assignment - Exercise!! 160 Check which pages in in the WWW contain a link to to one of of the pages of of your WWW site.

81 **--Example Web site evaluation: an example 161 Have a look at at this professional WWW page, make some critical remarks and suggestions for improvement. **--Example Web site evaluation: an example 162 Suggestions for improvement: 3 3 news sections instead of of 1 may be be confusing font size cannot be be changed, which can cause poor readability 4 4 menus instead of of 1 may be be confusing some text is is not shown completely it it is is not directly clear what is is a hyperlink and what not

82 163 Developing web documents and sites Creating documents for both printing and computer-based distribution Creating documents for both printing and computer-based distribution 164 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»...

83 Creating documents for both printing and computer-based distribution 165 Here the case is discussed of relatively simple, classical documents that are normally created by software for word processing, for instance not databases not video not... Creating documents: which software to use? 166 For the distribution based on computers, hypermedia based on HTML 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

84 Creating documents: an ideal, simple, neutral scheme 167 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... Creating documents: problems with the ideal scheme 168 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?