Top Banner
LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01
56

LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Mar 27, 2015

Download

Documents

Lauren Chandler
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

LIS650 web site architecture & design

lecture 0

Thomas Krichel

2003-11-01

Page 2: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

structure of talk

• introduction to the course • talk about you• the basic ingredients of the web, without html• introduction to our basic technical set up

• Krug on usability

• images• introduction to html

Page 3: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Course history

• Course was first run as an institute 2002-05-13 to 2002-05-17

• Title was "Webmastering I: the static web site".• To the curriculum committee, this title did not

sound academic enough. • But webmastering is really what we want to learn

here.

Page 4: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

webmaster

• There are two available definitions that come to mind– A webmaster is a person who has write access to a

set of files that are available for display on the World Wide Web.

– A webmaster is a person who has control over a software installation that can deliver web pages.

• The second is more stricter. We mostly use the first one.

Page 5: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

webmastering

• Webmastering combines many aspects:– Authoring pages– Work on the organization of data to fit onto pages– Set display style of different pages– Organize the contribution of data– Maintain a technical web installation

• Some of them can be learned in a course, but others can not.

• Emphasis has to be on learnable elements.

Page 6: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

teaching philosophy

• Point and click on a computer software is not enough.

• Explain underlying principles.• Promote standards.

– HTML 4.01– CSS level 2

• Avoid proprietary software.

Page 7: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

webmastering I

• Deals with the maintenance of a static web site. Such a web site remains the same whatever the user does with it.

• Topics include– html– css– site usability and information architecture, as far as

relevant for static web sites– http, uri, web server

Page 8: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

things this course does not do

• Forms: allow you to design forms that users fill in. But you do not have the programming skills to do something with the form. That is part of webmastering II, if ever held again.

• Frames: allow you to put several documents into one physical document. Most experts advise against them.

• Any html elements that require executable contents are not covered.

• We do not cover image maps.

Page 9: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Other courses: webmastering II

• Deals with building dynamic web sites. – Users fill in a form– Users submit the form– Web server return a page that is specific to the

request of the user.

• Teaches a language called PHP, that is widely used to generate such web sites.– Gets you introduced to computer programming– Gets you to train analytical thinking.

Page 10: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

other courses: webmastering III

• Deals with XML– XML is a syntax to encode any kind of data. – XML can be constrained to only allow certain types of

data (XML Schema)– XML can be transformed to render the data in various

ways (XSLT)

• Achieve a separation of contents and presentation of a web page.

• advanced course, has both Schema and Transformation

Page 11: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.
Page 12: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

The world wide web

The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:– A uniform naming scheme for locating resources on

the Web (I.e. URIs). – Protocols, for access to named resources over the

Web (e.g., HTTP). – Hypertext, for easy navigation among resources (e.g.,

HTML).

Page 13: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

URI introduction

• Every resource available on the Web -- HTML document, image, video clip, program, etc. -- has an address that may be encoded by a Universal Resource Identifier, or "URI".

• URIs typically consist of three pieces:– The naming scheme of the mechanism used to

access the resource. – The name of the machine hosting the resource. – The name of the resource itself, given as a path.

Page 14: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

example URI

• http://openlib.org/home/krichel

This URI may be read as follows: There is a document available via the HTTP protocol, residing on the site openlib.org, accessible via the path "/home/krichel".

• mailto:[email protected]

This URI may be read as follows: There is email user krichel in a domain openlib.org to whom email may be sent.

Page 15: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

client / server protocol• The web operates mostly on http.• This is a client-server protocol. • The client software is run on the local PC that

you are using. – It is called a web browser or user agent.

• Our server is a piece of hardware called wotan.liu.edu or wotan for short.– It runs the Debian GNU/Linux operating system on a

Intel architecture. – It provides http daemon software that serves http

requests. The particular software is called Apache.

Page 16: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

communication with the server

• The protocol for communicating with the server is the secure shell, short ssh. It is based public-key cryptography.

• We two two ssh clients – For file editing and manipulation, we use putty. – For file transfer, we use winscp.– Both are available on the web.

• Telnet and ftp servers are not available on wotan. Telnet and ftp do not encrypt the communication stream; therefore they are not secure.

Page 17: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

registration time

• As part of the course, you are being provided with web space on the server wotan.liu.edu, at the URL

http://wotan.liu.edu/~username

where username is a user name that you will chose now.

• It is my intention to maintain this web space for you into the foreseeable future.

• You should also choose a password, now. • I will now register you.

Page 18: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

login time

• Use putty, port 22 to wotan.liu.edu• set other attributes of the session as you like,

using the menu on the left, for example– colors– font shapes and sizes– bell

• Save the session as “wotan” (in the first screen) to save all the customization.

• Do the same thing at home!

Page 19: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

free software• I maintain wotan.liu.edu server • You can build your own server if

– you have Internet access– you have an old PC

• All the server software, as well as putty and winscp are free, open-source.

• It is one of my fundamental beliefs that free information should run on free software.

• The library community can learn a hell of a lot from the free software community.

• See my talk of 2003-11-07.

Page 20: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

installing putty and winscp at home

• Go to your favorite search engine to search for putty.

• Download and run windows-style installer software to install putty.

• Do the same thing with winscp.• Download and install a recent version of at least

two browsers, for example Netscape Navigator and Microsoft Internet Explorer.

Page 21: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

putty and winscp

• You can either maintain files on wotan– by logging into wotan– using a file editor there, for example nano– past experience has shown that this is hard for

students with no UNIX experience.

• You can also maintain text files locally– each time you make a change, you save the file and

upload to wotan using winscp.– you can use notepad locally to maintain text files– you may be able to use Microsoft Word to maintain

text files, but safe them as text, not "web page".

Page 22: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

create a web page in MS notepad

• Open Microsoft notepad. Type the text

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title></title></head> <body><div></div></body></html>

• save as empty.html• If you want to open it again in notepad, open

notepad, then select file/open, list all files and open empty.html. Don't click on the file and don't choose edit in the context menu.

Page 23: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

creating web pages in MS Word

• My best advice: don't do it.• Microsoft word enters special code into the web

page that will make validation of your pages fail. • If you work with Microsoft windows, use save as

plain text, with the encoding UTF-8.• But don't work with it!• It will all end in tears!

Page 24: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

upload and view file

• Once you have your file empty.html, use the menus of winscp to upload it to your file in the public_html directory of your home directory on wotan.

• Once it is there, use a web browser to view it at http://wotan.liu.edu/~user/empty.html, where user is your user id.

• Then validate it at http://validator.w3.org. – enter the url of the page that you want to validate– hit the validate button

Page 25: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

public_html• Is your web directory. It is automagically created

for you when Thomas registers you.• The web server will map requests to

http://wotan.liu.edu/~user/file to show the file public_html/file.

• Here user stands for your user id, and file is the file name.

• If file ends with ".html" or ".htm" the web browser will be told that the file is a html file. It will be rendered accordingly by the browser.

Page 26: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

index.html

• The web server on wotan will map requests to http://wotan.liu.edu/~user to show the file ~user/public_html/index.html

• If this file is not there, the server will prepare a html document from the list of files that it finds in the directory and send it to the user agent.

• Once you have a file index.html, the web user can no longer see the individual files in your directory.

Page 27: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Web site usability

• This is a big topic in the LIS community.• But it really comes down to common sense. • There is no absolute right/wrong, but one can

learn from experts– Krug

• less technical

– Nielson• also has tons of technical advice

– Morville and Rosenfeld • library focus, less useful

Page 28: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Krug's book

• Short• Deals mainly with the issue of how to build

commercial web sites.• Here user confusion is the cause of lost money.• He mainly deals with sites that have

– extensive scale– searching and browsing– user interaction

• Our sites for this course do not have these features.

Page 29: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Krug's advice

• Krug's rule #1: Don’t make me think. – a site should be obvious– if it can not be obvious, it must be self-explanatory

• Things that make think– non-standard terms

• jobs• employment opportunities• job-o-rama

– links and buttons that are not obvious to find

Page 30: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

search example

• Contrast– http://www.sl.nsw.gov.au/webcat/srchhelp_w.cfm– http://www.amazon.com

for search.• Note, however, that search forms are not part of

this course.

Page 31: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

How people use the web

• Received wisdom would suggest – people read the page– then make the best decision.

• That is wrong. Instead, people – scan pages– look for something that seems vaguely related to the

current aim– click on it if clickable

• User satisfice (term by Herbert Simon, a cross between satisfying and sufficing)

Page 32: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

why do they do that?

• Why do users satisfice?– Users are in a hurry.– The penalty for a wrong guess is low.– Weighing option does not seem much help.– Guessing is more fun.

• Users don't figure out how things work. They muddle through– It does not matter how things work– When they have found something that is useful to

them, users stick with it.

Page 33: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Krug's advice• Create clear visual hierarchy.

– the more important something is, the more prominent it should be

– things that relate logically should relate visually– things that are part of something else should be

nested visually within it.

• Use conventions– they have proven useful

• Break pages into separate parts• Make obvious what is clickable• Reduce visual noise.

Page 34: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Krug's advice

• Krug's second law: it does not matter how many times I have to click as long as each click is a mindless, unambiguous choice.

• Krug's third law: Get rid of half the words on each page, and then get rid of half of what is left.– no happy talk– no instructions

Page 35: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Building navigation

• For commercial web sites, people are usually trying to find something.

• It is more difficult than in a shop– no sense of scale– no sense of direction– no sense of location

• Navigation can– give users something to hold on to– tell users what is here– explain users how to use the site– give confidence in the site builder

Page 36: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Navigation elements

• Site ID• Sections of items• utilities

– link to home page– link to search page – separate instructions sheet

• Current location needs to be highlighted.

Page 37: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

navigational elements on the page• All pages except should have navigation except

perhaps– home page– search page– instructions pages

• Page names are also important– every page needs one– in the frame of contents that is unique to the page– the name needs to be prominent– the name needs to match what users click to get

there.

Page 38: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

ways to do navigation

• Breadcrumbs like "store > fruit & veg > tomato"• Tabs, like the ones seen in Amazon.com

– Krug's favorite.

• A table on the left or right hand side that stays the same– will do just fine for us

• Pulldown menus• Rollovers

Page 39: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Home page design

• For large site, it is a mission impossible• But above all it has to convey the big picture

– tagline• clear and informative• just long enough• differentiating• clear benefit showing• lively, personable and sometimes clever

– welcome blurb– but no mission statement

Page 40: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

bad home pages

• put a banner add even though they don't need it• let deals drive the home page• promote everything• are greedy for user data

Page 41: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

That's about all from Krug, folks

• The rest of the book is about how to do usability testing.

• Before he gets to that, we have the best part of the book, the cartoon page 131-132.

• I will distribute and discuss this now.

• And then we start about images

Page 42: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

special topic: images

• The appeal of the web to the masses has a lot to do with its capability to transport image.

• Image format are independent of the web, but there are two classic format that are widely supported by user agents.– GIF– JPEG

Page 43: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

GIF

• stands for graphics interchange format. • developed by CompuServe.• unresolved copyright issues make the format

abhorred by the free software community.• 250 colors maximum• uses a loss-less compression technique

Page 44: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

GIF has three tricks• interlacing:

– when downloading the file, the browser can show every forth row first

– user gets in an idea of the picture before it is sharp

• transparency– some GIFs are transparent, so you can see them on

top of already exist– technically, the GIF has one color as the background

color, and pixels of that color are ignored by the user agent

• animation– some GIFs are in fact sequences of GIFs that can be

rendered one after the other.

Page 45: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

JPEG

• The Joint Photographic Experts Group is a standard-making body for images

• They can support thousands of colors.• The compression is lossy, i.e. the JPEG file will

look like the original image, but not be the same.• The compression does not work well with

drawings. • There are no copyright and patent problems with

JPEG

Page 46: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

HTML and XHTML

• HTML is the hypertext markup language• HTML is a markup language that is widely used

on the Word Wide Web (WWW)• The latest, and probably last version of HTML is

at http://www.w3.org/TR/html4/• The WC3, the standard making body for the

WWW, have issued XHTML, a replacement of HTML that is compatible with XML.

• We will ignore XHTML for the rest of the course.

Page 47: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

what is markup?

• Everything in a document that is not content. It can be give in two ways

• 1: Procedural– Codes identify point size, style, font, etc.– Usually understood by defining tool– Example: M$ Word

• 2: Descriptive– Describes purpose of text within the document– Chapter head, Paragraph, Section Head, TOC– Structure and Style are kept separate– Example: LaTeX, SGML

Page 48: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Procedural vs Descriptive

Page 49: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

SGML• Standard Generalized Markup Language• Descriptive approach with three separate layers

– structure: types of information in document– content: the information itself– style: matches typesetting with structure

• Developed for the publishing industry by a group around Goldfarb.

• So complicated that no software implements it fully • Document Type Definition (DTD)

– Defines the structure

Page 50: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Document Type Definition (DTD)

• Describes information the document handles– e.g Title,TOC, Chapter, Section

• Relationships between fields– e.g. A Chapter contains Sections

• Consistency• Logical structure• Information defined by tags

Page 51: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

HTML

• HyperText Markup Language• Defines an SGML DTD

– Head, Title, Body, Paragraph, etc.– Headings, Bold, Italic, etc.– Table, List, Image, etc.– Links to other documents– Forms

• Style applied by Web Browser– User has some control

Page 52: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

HTML tags• HTML markup is written as tags. Tags are written

as pairs (typically)– begin with <atag> "tag start"– end with </atag> "tag end"– atag is the tag name

• Can be nested • Can contain non-markup data• Tag names are case-insensitive, but it is best to

use the same case, consistently, for human readability.

Page 53: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

attributes to tags

• <atag attribute_name_one=“value_one” attribute_name_two=“value_two”>

• Here attribute_name_one and attribute_name_two are attribute names

• and value_one and value_two are attribute values.

Page 54: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

common frame for pages

• Put the following in your pages: <!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title></title></head> <body><div></div></body> </html>• The first three lines are the SGML document

type declaration that says which kind of HTML it is.

Page 55: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

Homework

• Look at course home page http://wotan.liu.edu/home/krichel/lis650w03a

• Send [email protected] your secret word for course result delivery.

• Prepare a one-page max summary of the type of website that you want to build, bring printed copy with you next week.

• Prepare for quiz at the beginning of next lecture.

Page 56: LIS650 web site architecture & design lecture 0 Thomas Krichel 2003-11-01.

http://openlib.org/home/krichel

Thank you for your attention!