LIS650 lecture 4

1
LIS650 lecture 4

• Thomas Krichel
• 2003-12-06

2
today

• CSS Properties
• Box properties -- List properties
• Table properties -- Classification properties
• (Audio properties) -- Generated content
  properties
• Paged properties
• Nielsen on site design
• http
• Information architecture
• Semantic web

3
the 'inherit' value

• Each property can have the 'inherit' value. In
  this case, the value of the property for the tag
  is determined by the containing tag.
• Sometimes, 'inherit' is the default value.

4
validating CSS

• It is at http//jigsaw.w3.org/css-validator/
• check your style sheet there when you wonder why
  the damn thing does not work.
• Note that checking the style sheet will not be
  part of the assessment of the web site.

5
the box model

• It derives from the assumption that there is a
  conceptual box around the element contents.
• The total width of the box that the box takes is
  the sum of
• the left and right margin
• the left and right border width
• the left and right padding
• the width of the box' contents
• A similar reasoning holds for the height of a box.

6
box properties I

• border-color can hold up to four colors,
  separated by blanks
• one value means all borders have the same color
• two values mean first number for top and bottom,
  second for left and right
• three values mean first sets top, second left
  and right, third bottom
• four values mean first sets top, second sets
  right etc.
• border-width can hold up to four widths, for
  example "thin think medium 2mm"

7
box border properties

• border-style border-top-style
  border-right-style border-bottom-style
  border-right-style take the following values
• none No border. border-width becomes zero
• hidden Same as 'none', except in terms of border
  conflict resolution
• dotted The border is a series of dots.
• dashed The border is a series of short line
  segments.
• solid The border is a single line segment.
• double The border is two solid lines.
• groove The border looks as though it were carved
  into the canvas.
• ridge The border looks as though it were coming
  out of the canvas.
• inset The border makes the box look like
  embedded in the canvas.
• outset The border makes the box look like coming
  out of the canvas.

8
box properties II

• border-top-width , border-bottom-width ,
  border-left-width and border-right-width
  also exist.
• same properties exists for margin-top ,
  margin-bottom etc and padding-top ,
  padding-bottom etc.
• float can be one of 'left', 'right' or 'none'
  which is the default. If a float is set, the text
  near the tag floats on the left or right site of
  the tag contents. You can use this to create
  run-in headers.

9
box properties III

• width sets the total width of the box
• height sets the total height of the box
• both take a dimension or the word 'auto' e.g.
• img width 100px height auto

10
position

• 'static' The box is a normal box, laid out
  according to the normal flow.
• 'relative' The box's position is calculated
  according to the normal flow. Then it is offset
  relative to its normal position. The position of
  the following box is not affected.
• 'absolute' The box's position (and possibly size)
  is specified with the left, right, top,
  and bottom properties that specify offsets
  with respect to the box's containing tag. There
  is no effect on sibling boxes.
• 'fixed' The box's position is calculated
  according to the 'absolute' model, but the
  reference is not the containing tag but
• For continuous media, the box is fixed with
  respect to the viewport
• For paged media, the box is fixed with respect to
  the page

11
properties with position

• top, right, bottom, left set offsets
  if positioning is relative, absolute or fixed.
• They can take length values, percentages, and
  'auto'.
• the effect of 'auto' depends on which other
  properties have been set to 'auto'

12
box properties V

• z-index let you set and integer value for a
  layer on the canvas where the tag will appear.
• Thus if tag 1 has z-index value 1 and tag 2 has
  z-index value number 2, they are laying on top of
  each other.
• (this is the same thing as the "layer" from
  photoshop)
• browser support for this property is limited.

13
box properties VI

• the clear property tells the user agent
  whether to place the current element next to a
  floating element or on the next line below it.
• value 'none' tells the user agent to put contents
  on either side of the floating element
• value 'left' means that the left side has to stay
  clear
• value 'right' means that the right side has to
  stay clear
• value 'all' means that both sides have to stay
  clear

14
box properties VII

• The visibility property sets the visibility
  of a tag. It takes values
• 'visible' The generated box is visible.
• 'hidden' The generated box is invisible (fully
  transparent), but still affects layout.
• 'collapse' The tag collapses in the table. If
  used on elements other than rows or columns,
  'collapse' has the same meaning as 'hidden'.
• With this you can do sophisticated alignments

15
box properties VII

• The clip and overflow properties let you
  specify how large the box of contents is. Example
• p overflow hidden clip rect(15px, -10px,
  5px, 10px)
• when the overflow property is not set to
  'hidden' it will take no effect.
• otherwise, it displays the start of the paragraph
  in the rectangular box.
• overflow can also take value scroll to add a
  scroll bar and auto to add a scroll bar only
  when needed.
• browser support is not sure

16
classification properties VII

• overflow sets what to do when the element
  flows out of its box. It takes values
• visible contents may be rendered outside tag box
• hidden contents is clipped, no access to clipped
  contents
• scroll contents is clipped but can be reached
  through a scroll. Scrollbar will always appear,
  whether contents overflows or not. When the
  medium is 'print' or 'projection', overflowing
  content should be printed.
• auto The behavior of the 'auto' value is user
  agent-dependent, but should cause a scrolling
  mechanism to be provided for overflowing boxes.

17
example for clipping

• ltDIV style" width 100px height 100px
  border thin solid redgt
• ltBLOCKQUOTE style"width 125px height 100px
  margin-top 50px margin-left 50px border thin
  dashed black"gt
• ltPgtI didn't like the play, but then I saw it
  under adverse conditions - the curtain was up.
• ltDIV style" text-align right gt- Groucho
  Marxlt/DIVgtlt/BLOCKQUOTEgtlt/DIVgt
• lt! you can try out the overflow here ?

18
list properties

• list-style-position can take the value
  inside or outside. The latter is the default,
  the property refers to the position of the list
  item start marker
• list-style-image define the bullet point of a
  list as a graphic, use url(URL) to give the
  location of the graphic.
• list-style-property
• takes the values disc, circle, square,
  none with an unordered list
• takes the value decimal, lower-roman,
  upper-roman, lower-alpha, upper-alpha with
  ordered list.

19
table properties I

• border-collapse allows to choose the
  fundamental table model. It can take two values
• 'separate' implies that each cell has its own
  box.
• 'collapse' implies that adjacent cells share the
  same border

20
table properties II

• The properties on this slide are only useful if
  you choose the separated border model.
• You can set the distance between adjacent cells
  using the border-spacing property. Set it to two
  distances to specify different horizontal and
  vertical values
• empty-cells can be set to
• 'show' shows empty cells with their border
• 'hide' does not show the border around an empty
  cell
• there are some other table properties

21
classification properties I

• display sets the display type of an tag, it
  take the following values
• 'block' displays the tag contents as a block
• 'inline' displays it as inline contents
• 'list-item' makes it an item of a list, you can
  then
• attach list properties to it
• 'none' does not display it
• 'run-in' (see later)
• 'compact' (see later)

22
classification properties II

• display also takes the following values
• table -- table-footer-group
• table-row -- table-row-group
• table-cell -- table-column
• table-caption -- table-column-group
• inline-table -- table-header-group
• these means that they behave like the table
  elements that we already discussed

23
run-in box

• If a block box (that does not float and is not
  absolutely positioned) follows the run-in box,
  the run-in box becomes the first inline box of
  the block box.
• Otherwise, the run-in box becomes a block box.
• Example on next page

24
example for run-in box

• ltheadgtlttitlegta run-in box examplelt/titlegt
• ltstyle type"text/css"gt
• h3 display run-in
• lt/stylegt
• lt/headgt
• ltbodygt lth3gta run-in heading.lt/h3gt ltpgtand a
  paragraph of text that follows it and it
  continues on the line of the h3 lt/bodygt

25
compact box

• If a block-level box follows the compact box, the
  compact box is formatted like a one-line inline
  box. The resulting box width is compared to one
  of the side margins of the block box,
• left margin if direction is left-to-right
• right margin if direction is right-to-left
• If the inline box width is less than or equal to
  the margin, the inline box is given a position in
  the margin as described immediately below.
• Otherwise, the compact box becomes a block box.

26
compact box example

• ltdiv style"dt display compact
• dd margin-left 4em gt
• ltdlgt ltdtgtshort ltddgtltpgtdescription goes here.
• ltdtgttoo long for the margin
  ltddgtltpgtdescription goes here.
• lt/divgt

27
classification properties III

• the whitespace property controls the display of
  white space in a block level tag.
• 'normal' collapses white space
• 'pre' value similar to ltpregt tag
• 'nowrap' ignores carriage returns only

28
generated contents properties

• generated contents is, for example, the bullet
  appearing in front of a list item.
• content can be used with the before and
  after selectors. Example
• p.notebefore content "note" will insert the
  string "note" before any paragraph in the class
  'note'. The content can be
• a text string
• a url(URL) where the contents is to be found
• a attr(att) where att is the name of the
  attribute, the content of which is being inserted

29
generated contents properties II

• Here are some counter properties
• counter-reset counter resets a counter counter
• counter-increment counter increments a counter
• counter(counter) uses the counter
• Example
• h1before counter-increment chapter_counter
• counter-reset section_counter
• content "Chapter " counter(chapter_counter) ""
• and then we can use h2 for the sections, of
  course!
• browser support uncertain!

30
Paged media support I

• CSS has the concept of a page box in which paged
  output should be placed into.
• _at_page rule can be used to specify the size of the
  page
• _at_page size 8.5in 11in
• Valid values are one or two lengths and they
  words portrait and landscape. The latter will
  depend on the default print sheet size,
  country-specific.

31
Paged media support II

• You can add margin , margin-top ,
  margin-left , and margin-right properties.
  They will add to the margins that the printer
  will set by default, and these margins you will
  not be able to control.
• You can add a marks crop property to add crop
  marks
• You can add a mark cross property to create
  registration marks.

32
Paged media support III

• You can use three pseudoclasses to specify
  special cases
• first for the first page
• left for any left page
• right for any right page
• Example
• _at_page first margin-top 3in

33
Named pages

• You can give a page rule an optional name.
  Example
• _at_page rotated size landscape
• Then you can use this with the page property to
  specify specific ways to print things. Example
• table page rotated
• will print the table on a landscape sheet.
  This comes in handy for bulky tables.

34
Actual page breaking

• Pages will break if
• the current page box flows over or if
• a new page format is being used with a page
  property
• You can take some control with the
  page-break-before and page-break-after
  properties. They take the values
• auto always avoid left right
• The latter two make sure that the element is
  on a left or right page. Sometimes this will
  require two page breaks.

35
conclusions

• These are not all the properties.
• Audio properties are still missing
• But I am not sure if I should go into more.

36
Nielsen on site design

• This is the longest of the chapters in his book.
• It is about the organization of sites.
• But the chapter itself is badly organized. It
  looks like a Jackson Pollock painting and reads
  like a bad student essay
• no structure
• things repeated from before

37
Nielsen on site design

• Usually there is more attention on pages design
  than on site design. Presumably because the page
  design is visual.
• But site design is more important.
• Study found that only 42 of users could find
  simple answers to questions on a web site.

38
the home page

• has to be designed differently than other pages.
• must answer the questions
• where am I?
• what does this site do?
• need a directory of main area
• needs a summary of the site purpose
• a principal search feature may be included,
  otherwise a link to a search page will do
• you may want to put news, but not prominently

39
the home page

• make the home pages a splash screen is not a good
  idea
• the name of the site should be very prominent,
  more so than on interior pages, where it should
  also be named
• There should be a link to the homepage from all
  interior pages, maybe in the logo.
• The less famous a site, the more it has to have
  information about the site on interior pages.
• Users should not be "forced" to go through the
  home page.

40
metaphor

• (why does he talk about this here?)
• it is usually not a good idea to have metaphor on
  the home page.
• a notable exception the shopping cart
• has become a standard feature
• but still illustrates some limits of metaphors
• when you want to buy multiple items of the same
  kind
• when you want to move something out of the cart

41
why navigation?

• Navigation should address three questions
• where am I?
• relative to the whole web
• relative to the site
• the former dominates, as users only click through
  4 to 5 pages on a site
• where have I been?
• but this is mainly the job of the browser esp. if
  links colors are not tempered with
• where can I go?
• this is a matter for site structure

42
site structure

• to visualize it, you have to have it first. Poor
  information architecture will lead to bad
  usability.
• Some sites have a linear structure,
• but most sites are hierarchically organized.
• What ever the structure, it has to reflect the
  users' tasks, not the company structure.

43
Nielsen's example company

• A corporate site may be divided into
• product information
• product families
• individual products
• employment information --investor information
• Now consider a page with configuration and
  pricing for SuperWidgets. It may belong to
• company's web site -- Widgets products
• products category -- SuperWidgets
• pricing and configuration
• Nielsen says show all five levels of navigation.
  Have links to WidgetsClassic and MiniWidgets on
  the SuperWidgets page.

44
breath vs depth in navigation

• some sites list all the top categories on the
  left or top
• users are reminded of all that the site has to
  offer
• stripe can brand a site through a distinctive
  look
• an alternative is to list the hierarchical path
  to the position that the user is in, through the
  use of breadcrumbs
• can be done as a one liner
• combining both
• takes up a lot of space -- can be done as an L
  shape
• recommended for large (10k pages) with
  heterogeneous contents

45
large volumes of information

• most user interfaces on the web are clones of the
  design of the Mac in 1984. They are not designed
  to handle vast amounts of information. Nielsen
  does not say why.
• Historically, early web pages had long lists of
  links
• Nowadays, there is more selective linking
• Users want site maps but they don't seem to be
  much help.

46
reducing navigational clutter

• aggregation shows that a single piece of data is
  part of a whole
• summarization represents large amounts of data by
  a smaller amount
• filtering is throwing out information that we
  don't need
• truncation is having a "more" link on a page
• example-based presentation is just having a few
  examples

47
subsites

• most sites are too large for the page belonging
  to them adding much information.
• therefore subsites can add structure
• a subsite is a bunch of pages with common
  appearance and navigational structure, with one
  page as the home page.
• each page in the subsite should point to the
  subsite home page as well as to global homepage
• should combine global and local navigation

48
search and link behavior

• Nielson says that his studies show that slightly
  more than 50 of users are search-dominant, they
  go straight to the search.
• One in five users is link-dominant. They will
  only use the search after extensive looking
  around the site through links
• The rest have mixed behavior. They will make up
  their mind depending on the task and the look of
  the site.

49
search

• site search should be on all pages
• in general it is not a good idea to scope the
  search to the subsite that you are on
• users don't understand the site structure
• users don't understand the scope of the search
• if you have a scoped search
• state the scope in query and results page
• include link to the search of the whole site, in
  query and results page "not found? try to
  ltagtsearch entire sitelt/agt"

50
Boolean searches

• they should be avoided because noone understands
  them.
• Example task.
• "you have the following pets
• cats
• dogs
• find information about your pet"
• users search "cats and dogs" and find nothing.
• geeks or librarians among users will then say
  "oh, I should have used OR".

51
help the user search

• Nielsen says that computers are good at
  remembering synonyms, checking spelling etc, so
  they should evaluate the query and make
  suggestions on how to improve it.
• but I am not aware of systems that do this "out
  of the box".
• use a wide box. Information retrieval research
  has shown that users tend to enter more words in
  a wider box.

52
the results page

• computed relevance scores are useless for the
  user
• URLs pointing to the same page should be
  consolidated
• search should use quality evaluation. say, if the
  query matches the FAQ, the FAQ should give higher
  ranking.
• he has other suggestions that are either
  unrealistic or would be part of serious
  information retrieval research

53
metadata

• Nielsen thinks that metadata should be used
  because humans are better at saying what the page
  is about than machines.
• He recommends writing into the "name" attribute
  of ltmetagt with the value 'description'
• He also says you should add keywords, with your
  own keywords and those of your competitors.
• He mentions no engine that uses these

54
search destination design

• when the user follows a link from search to a
  page, the page should be presented in context of
  the user's search
• the most common way is to highlight all the
  occurrences of the search terms.
• This helps scanning the destination page.
• Helps understanding why the user reached this
  result.
• but will be no good if the term is in the
  metadata

55
URL design

• URLs should not be part of design, but in
  practice, they are.
• Leave out the "http//" when referring to your
  web page.
• You need a good domain name that is easy to
  remember.

56
understandable URLs

• Users rely on reading URLs when getting an idea
  about where they are on the web site.
• all directory names must be human-readable
• they must be words or compound words
• site must support URL butchering where users
  remove the trailing part after a slash
• make URLs as short as possible
• use lowercase letters throughout
• avoid special chars i.e. anything but letters or
  digits
• stick to one visual word separator, i.e. either
  hyphen or underscore

57
archival URL

• After search engines and email recommendations,
  links are the third most common way for people to
  come across a web site.
• Incoming links must not be discouraged by
  changing site structures

58
dealing with yesterday current contents

• Sometimes it is necessary to have two URLs for
  the same contents
• "todays_news"
• "feature_2003-12-06"
• some may wish to link to the former, others
  to the latter
• In this case you should advertise the URL at
  which the contents is archived (immediately) an
  hope that link providers will link to it there.
• You can put a note on the bottom of the page, or
  possibly use a simple convention if it is very
  easy to guess.

59
supporting old URLs

• Old URLs should be kept alive for as long as
  possible.
• Best way to deal with them is to set up a http
  redirect 301
• good browsers will update bookmarks
• search engines will delete old URLs
• There is also a 302 temporary redirect.

60
refresh header

• ltheadgtltmeta http-equiv"refresh" content"0
• urlnew_url"gt lt/headgt
• This method has a bad reputation because it is
  used by search engine spammers. They create pages
  with useful keywords, and then the user is
  redirect to a page with spam contents.

61
.htaccess

• If you use Apache, you can create a file
  .htaccess (note the dot!) with a line
• redirect 301 old_url new_url
• old_url must be a relative path from the top of
  your site
• new_url can be any URL, even outside your site
• This works on wotan by virtue of configuration
  set for apache for your home directory. Examples
• redirect 301 /krichel http//openlib.org/home/kri
  chel
• redirect 301 Cantcook.jpg http//www.foodtv.com

62
http

• Stands for the hypertext transfer protocol. This
  is the most important application layer protocol
  on the Internet today, because it provides the
  foundation for the world wide web.
• defined in Fielding, Roy T., James Gettys,
  Jeffrey C. Mogul, Paul J. Leach, Tim Berners-Lee
  Hypertext Transfer Protocol -- HTTP/1.1''
  (1999), RFC 2616

63
history

• 1990 version 0.9 allows for transfer of raw
  data.
• 1996 rfc1945 defines version 1.0. by adding
  attributevalue headers.
• 1999 rfc 2616 adds support for
• hierarchical proxies
• caching,
• virtual hosts and some
• support for persistent connections
• and is more stringent.

64
http resource identification

• identification of resources is assumed through
  Uniform Resource Identifiers (URI).
• As far as http is concerned, URIs are string.
• http can use absolute'' and relative'' URIs.
• A URL is a special case of a URI.

65
rfc about http

• An application-level protocol for distributed,
  collaborative, hypermedia information systems.
• HTTP is also used as a generic protocol for
  communication between user agents and
  proxies/gateways to other Internet systems,
  including those supported by the SMTP, NNTP, FTP,
  Gopher, and WAIS protocols. In this way, HTTP
  allows basic hypermedia access to resources
  available from diverse applications.

66
overall operation client side

• Client sends request, required items are
• method
• request URI
• protocol version
• optional items are
• request modifiers
• client information

67
overall operation server side

• Server sends response, required items are
• status line
• protocol version
• success or error code
• optional items are
• server information
• body

68
middleman

• intermediaries come in three flavors
• proxies, i.e. forwarding agents
• gateways, i.e. receiving agents
• tunnels, i.e. relay points that do not change the
  message such as an encryption and decryption
  device

69
http assumes transport

• http assumes that there is a reliable way to
  transport data from one host on the Internet to
  another one.
• All http requests and responses are separate TCP
  connections. The default is TCP port 80, but
  other ports can be used.

70
Absolute http URL

• the absolute http URL is
• http//hostportabs_path?query
• If abs_path is empty, it is /.
• The scheme name "http" and the host name are
  case-insensitive.
• Characters other than those in the reserved''
  and unsafe'' sets of RFC 2396 are equivalent to
  their HEX HEX'' encoding.
• optional components are in

71
character sets

• A character set is a method used with one of more
  tables to convert a sequence of binary digits
  into a sequence of characters.
• http shares the same registry as the MIME
  multimedia email extensions. It is based at the
  IANA, at
• http//www.isi.edu/innotes/iana/
• assignments/media-types/media-types
• The default character set is ISO-8859-1.

72
http messages

• There are two types of messages.
• Requests are sent form the client to the server.
• Responses are sent from the server to the client.
• The generic format is the same as for email
  messages
• start line
• message headers
• empty line
• body
• Empty lines before the start line are ignored.
• The request's start line is called the
  request-line
• The response start line is called the
  status-line.

73
The request headers

• Accept Accept-Charset
• Accept-Encoding Accept-Language
• Authorization Expect
• From Host
• If-Match If-Modified-Since
• If-None-Match If-Range
• If-Unmodified-Since Max-Forwards
• Proxy-Authorization Range
• Referer TE
• User-Agent

74
The status line

• The status line is a set of lines that are of
  the form
• HTTP-Version Status-Code Reason-Phrase
• The status code is a 3-digit number used by the
  computer.
• The reason line is a friendly note for a human to
  read.

75
Status code classes

• 1 Informational Request received, continuing
  process
• 2 Success The action was successfully received,
  understood, and accepted
• 3 Redirection Further action must be taken in
  order to complete the request
• 4 Client Error The request contains bad syntax
  or cannot be understood
• 5 Server error The request is valid but can not
  be executed by the server

76
Error codes

• 100 Continue
• 101 Switching Protocols
• 200 OK
• 201 Created
• 202 Accepted
• 203 Non-Authoritative Information
• 204 No Content
• 205 Reset Content
• 206 Partial Content

77
Error codes II

• 300 Multiple Choices
• 301 Moved Permanently
• 302 Found
• 303 See Other
• 304 Not Modified
• 305 Use Proxy
• 307 Temporary Redirect

78
Error codes III

• 400 Bad Request
• 401 Unauthorized
• 402 Payment Required
• 403 Forbidden
• 404 Not Found
• 405 Method Not Allowed
• 406 Not Acceptable
• 407 Proxy Authentication Required
• 408 Request Time-out

79
Error codes IV

• 409 Conflict
• 410 Gone
• 411 Length Required
• 412 Precondition Failed
• 413 Request Entity Too Large
• 414 Request-URI Too Large
• 415 Unsupported Media Type
• 416 Requested range not satisfiable
• 417 Expectation failed

80
Error codes V

• 500 Internal Server Error
• 501 Not Implemented
• 502 Bad Gateway
• 503 Service Unavailable
• 504 Gateway Time-out
• 505 HTTP Version not supported

81
Response headers

• Accept-Ranges
• Age
• Etag
• Location
• Proxy-Authenticate
• Retry-After
• Server
• Vary
• WWW-Authenticate

82
Entity headers, common to response and request

• Allow
• Content-Encoding
• Content-Language
• Content-Length
• Content-Location
• Content-MD5
• Content-Range
• Content-Type
• Expires
• Last-Modified

83
The body

• The entity-body (if any) sent with an HTTP
  request or response is in a format and encoding
  defined by the entity-header fields.
• When an entity-body is included with a message,
  the data type of that body is determined via the
  header fields Content-Type and Content-Encoding

84
GET and HEAD method

• The GET method means retrieve whatever
  information (in the form of an entity) is
  identified by the Request-URI. If the Request-URI
  refers to a data-producing process, it is the
  produced data which shall be returned as the
  entity in the response and not the source text of
  the process.
• The HEAD method is identical to GET except that
  the server MUST NOT return a message-body in the
  response.

85
Conditional partial GET

• The semantics of the GET method change to a
  conditional GET'' if the request message
  includes an
• If-Modified-Since
• If-Unmodified-Since
• If-Match
• If-None-Match
• If-Range header
• The semantics of the GET method change to a
  partial GET'' if the request message includes a
  Range header field. A partial GET requests that
  only part of the entity be transferred

86
The POST method

• The POST method is used to request that the
  origin server accept the entity enclosed in the
  request as a new subordinate of the resource
  identified by the Request-URI in the
  Request-Line. POST is designed to allow a uniform
  method to cover the following functions
• Annotation of existing resources
• Posting a message to a bulletin board, newsgroup,
  mailing list, or similar group of articles
• Providing a block of data, such as the result of
  submitting a form, to a data-handling process
• Extending a database through an append operation.

87
PUT and DELETE methods

• The PUT method requests that the enclosed entity
  be stored under the supplied Request-URI. If the
  Request-URI refers to an already existing
  resource, the enclosed entity should be
  considered as a modified version of the one
  residing on the origin server.
• The DELETE method requests that the origin server
  delete the resource identified by the Request-URI.

88
The Semantic Web

• The W3C has been developing a new architecture
  that applies knowledge representation technology
  to the WWW.
• Using the Resource Description Framework (RDF),
  Statements are made using a Subject, Predicate
  and Object (very similar to Lisp and other
  predicate based languages).
• Each Subject, Predicate or Object are Resources
  in the URI sense and are identified by URIs
  within an RDF Statement using XML Namespaces.

89
Reading

• Information Architecture'' by Louis Rosenfeld
  and Peter Morville, O'Reilly 1998
• There is now a second edition, hopefully it is
  better
• Contents is very thin, I summarize the whole book
  here.

90
Sensitivity exercise

• What do you hate about a web site?
• What do you like about a web site?
• All issues to do with that fall into three
  categories
• Technical
• Look and Feel
• Architecture

91
Reasons to hate a web site

• Can't find it.
• Page crowded
• Loud colours
• Gratuitous use of technology
• Inappropriate tone
• Designer centered
• Lack of attention to detail

92
Reasons to like a web site

• useful
• attractive to look at
• thought provoking
• findabilty
• personalisation

93
Why is it so difficult

• technical expertise
• graphical design expertise
• overall structure

94
IA determines

• organization
• content
• functionality
• navigation
• labeling
• searching

95
Good IA is important for the producer

• web site an important point of first contact
• needs to determine overall design before the site
  is built
• reorganizing a site is
• costly
• difficult

96
Topics covered

• Classification
• navigation
• labelling
• making a site searchable

97
The challenge of classification

• ambiguity
• a tomato is a red or yellowish fruit with a
  juicy pulp, used as a vegetable, botanically it
  is a berry.''
• heterogeneity
• in a library
• on a web site
• granularity
• format
• difference in perspective
• internal politics

98
Organizational schemes

• Exact schemes
• alphabetical
• chronological
• geographical
• ambiguous schemes
• topical should be there, but not the only scheme
• task-oriented
• audience-specific open or closed
• metaphor-driven not as overall organization
• Hybrid schemes are not good

99
The mixed-up library

• adult
• arts and humanities
• community center
• get a library card
• learn about our library
• science
• teen
• youth

100
Organizational form hierarchies

• keep balance between breadth and depth
• obey 7 -2 rule horizontally,
• no more than 5 levels vertically
• cross-link ambiguous items if really necessary
• keep new sites shallow

101
organizational forms hypertext

• great flexibility
• great potential for confusion
• not good as a prime organizational structure

102
organizational forms database

• powerful for searching
• useful if there is controlled vocabulary
• easy reorganization
• on the fly or static generation of pages
• but ensure robot indexing
• not good for heterogenous data

103
Navigation aids

• provide context
• allow for flexibility of movement
• support associative learning
• danger of overwhelming the user

104
browser navigation aids

• They include
• open
• back
• forward
• history
• bookmarks
• prospective view
• visited url color
• sites should not corrupt the browser.

105
navigation

• the you are here'' mark
• pages should indicate site name
• navigation should be consistent
• navigation not to refer to current pages
• highlight current page in a different way
• allow for lateral navigation

106
Types of navigational systems

• global hierarchical navigation systems
• text
• icon
• local navigation systems integration with global
  system can be challenging
• ad hoc navigation clear label are required

107
Frames are problematic

• potential waste of pages real estate
• speed of display
• disrupt the page model
• complex design

108
remote navigation system I

• table of contents
• good in a hierarchical web site
• reinforce the hierarchy
• facilitate known-item access
• resist temptation to overwhelm user
• indexes
• presents key term without hierarchy
• key terms found from search behavior
• links terms to final destination pages
• use term rotation

109
remote navigation systems II

• site maps
• is a graphical representationof the site's
  contents
• new because no equivalent in print
• there are automated tools to generate site maps
• seldomly well-done
• to be kept simple
• guided tours
• important for sites with restricted access
• should feature linear navigation

110
labelling

• a label is short expression that represents a
  larger set of information.
• example contact us''
• labelling is an outgrowth of site organization,
  that we have discussed previously.
• labelling communicates the organization of the
  site

111
Why bother

• we need to guess at how users respond to a label
• users will not spend much time interpreting the
  label
• appropriate tone, no hot'', cool'', stuff''
• should reflect thinking of the user, not of the
  owner
• it is easy to have unplanned labelling

112
Good labelling

• Sticking with the familiar
• main, main page, home, home page
• search, find
• browse
• contact, contact us, feedback
• Help, FAQ, Frequently Asked Questions
• About, About Us
• Labels may be augmented with scope notes

113
Grammatical consistency

• contact us, search our site, browse our content
• contact, search, browse
• contact information, search page, table of
  contents
• (also good in student essays)

114
Labels as indexing terms

• use in ltmetagttags, or in lttitlegt tag
• use as controlled vocabulary in the database
• but some search, in fact almost all, engines do
  not use metadata

115
Textual labels

• born in Vöklingen, (Saarland) in 1965, I studied
  Economics and Social Sciences at the universities
  of Toulouse, Paris, Exeter and Leicester. Between
  Febrary 1993 and April 2001 I lectured in the
  Department of Economics at the University of
  Surrey. In 1993 I founded NetEc, a consortium of
  Internet projects for academic economists. In
  1997, I founded the RePEc dataset to document
  Economics. Between October and December 2000, I
  held a visiting professorship at Hitotsubashi
  University.

116
labels as headings

• good practice
• consistency in terminology wording on labels is
  uniform and cohesive
• consistency in granularity
• chunks covered by labels at the same level is
  roughly equal
• chunks covered do not vary by their depth

117
Iconic labels

• There is only a limited vocabulary'' of
  commonly understood labels
• it is fine for some key concepts
• labels need to be very consistently placed
• they can communicate a graphic identity for the
  page
• they are easy to find on a page, provided that
  page is not long

118
Designing labelling systems I

• start from existing one
• put in table or tree (on paper)
• make small changes towards consistency
• benevolent plagiarism'' from competitors and
  academic sites
• use controlled vocabularies, example yellow pages

119
Designing labeling systems II

• use a thesaurus, example legislative indexing
  vocabulary
• see'' link
• see also'' links
• broader terms
• narrower terms
• labels from contents best judged by an outsider
• labels from query logs
• labels from user interviews
• labels from modeling user needs

120
fine tuning a labelling system

• remove duplicates
• sort alphabetically
• homogenize case and punctuation and grammar
• remove synonyms according to audience
• make labels as different from one another as
  possible
• search for gaps
• look into the future
• keep scope focussed
• consider granularity

121
why not make a site searchable

• not a tool to satisfy all user's needs
• not good on poor contents
• not a cure for bad browsing!
• needs good planning

122
why make a site searchable

• cope with bad organization (Foyle's)
• dynamic contents
• large contents

123
user needs

• some want overview, others want detail
• some need accuracy, others dont care much
• some can wait, others need it now
• some need some info, others need a comprehensive
  answer

124
user's searching expectation

• known-item searching
• existence searching
• exploratory searching
• comprehensive searching

125
integrated searching and browsing

• literature deals with separate browsing and
  searching systems
• browsing and searching in a single system
• with multiple iteration
• and associative learning takes place

126
designing search interfaces I

• level of expertise
• boolean?
• concept search?
• amount returned
• comprehensive?
• verbose?
• how much to make searchable

127
designing search interfaces II

• search target
• navigation pages?
• HTML only?
• are there specific types of data that users will
  want multi-lingual?
• audience difference

128
features of sophisticatedsearch engines

• fielded searches
• sophisticated query languages
• reusable results set
• customizable relevance

129
Deal with problems

• getting too much suggest boolean AND
• getting nothing suggest boolean OR or
  truncation
• bad answers suggest to contact an expert, may
  be not...

130
The Semantic Web

• The combination of Web Services and the Semantic
  Web should give the Web the ability to turn any
  existing Web Resource into a full node in a
  purposefully built knowledge representation
  system with a functional component that allows
  that knowledge to be acted on.
• And both are based on the simple Uniform Resource
  Identifier.

131
example

• This statement says that the Resource identified
  by the URI http//openlib.org/home/krichel was
  created by the person Thomas Krichel
• lt?xml version"1.0"?gt ltRDF xmlns"http//www.w
  3.org/1999/02/22-rdf-syntax-ns"gt ltDescription
  about"http//openlib.org/home/krichel"gt ltCreator
  xmlns"http//description.org/schema/"gtOra
  Lassilalt/Creatorgt lt/Descriptiongt lt/RDFgt

132
http//openlib.org/home/krichel

• Thank you for your attention!