LIS650 lecture 4 Minor HTML & CSS, Information Architecture Thomas Krichel

today some minor, but still interesting HTML –things that we can have in the advanced CSS –crafty selectors –select properties Information Architecture

subtle points of line breaking You can use the entity to indicate that you don't want a line break at that space, e.g. Prof. Dr. Krichel. This is particularly useful in an anchor. You can suggest the user agents to hyphenate a word at a certain point using the soft hyphen entity ­

the element in This can be used to include metadata in the header. It has an attribute "name" for the property name It has an attribute "content" for the property values It also takes the i18n attributes. Example: is always an empty element.

The description meta name is the one that I think is being used by Google. When the query matches a page an the terms of the query appear in the description, the description appears in the snippet of the result, despite the fact that the description is not visible on the web page. An example is available on the homepage of Bill Goffe.

Apparently, you can use it to guide robots. "content" can be –content="index,follow" –content="noindex,nofollow" –content="index,nofollow" –content="noindex,follow" where follow means to follow links for the page. There is also a whole robots.txt exclusion protocol. It works by placing a robots.txt on the top of the web site. Only the site maintainer can write it.

the "http-equiv" attribute to The "http-equiv" tells the client to behave as if a http header had been received. Example: will tell the server to tell the browser that the page is written in HTML with shift_jis encoding. This is useful when your page is read without http headers, for example from your local disk.

"scheme" attribute of You can give a scheme attribute to. Its content can be a name string, that the user agent may be able to do something with Or it can be a URI, where the user agent may find something to do. But there is no standard way to do things.

the element in Can fix the baseline URL for all the relative links in the document. This URL is given in the "href" attribute to base. This attribute must be present. Within the confines of what we are working with, I do not see a reason for you to use it. Example

the element in appears in the of the page. It creates a link between the current page and others. It takes the "href" attribute to say what page is being pointed to. It takes a "rel" attribute for forward link and "rev" for the reverse link. Example: –Consider two documents A and B. Document A: –Has exactly the same meaning as: Document B: <link href="docA" rev="foo"/

values of "rel" and "rev" attributes The possible values of "rel" and "ref" are –alternate -- stylesheet !! –start -- next –prev -- contents –index-- glossary –copyright -- chapter –section -- subsection –appendix -- help –bookmark

"rel" and "rev" with You can use "rel" and "rev" in. Examples – © – по русскйи Note that search engine support for this is limited.

other attributes to takes the core attributes.(no idea why) It takes the "type" attribute for the MIME type of the page linked to. It takes the "hreflang" attribute to give the language of the page linked to. It takes the "charset" attribute to give the character set of the page being linked to. It takes the "media" attribute to give the media for the page being linked to. Use the CSS media types.

and search engines Using you can give search engine things like –Links to alternate versions of a document, written in another human language. –Links to alternate versions of a document, designed for different media, for instance a version especially suited for printing. –Links to the starting page of a collection of documents. I am not sure if current engines use this.

remember the basic selector The basic selector is a comma-separated list of elementary selectors. Often, the elementary selectors are HTML elments, e.g. h1, h2 {text-align: center} will center all and element contents but the selectors can be more precise

class selectors This is the standard way to style up a class.class { property1: value1, property2: value2 …} will give all the properties and values to any element in the class class. Recall HTML, when you have set the you can apply the class will apply all the attributes of the class class to the element element. Note that you can place any tag into several classes, use blanks to separate the class names

fun with selectors * selects any element. E selects any element called E E F selects any F element that is in the contents of an E element, as a child, grand-child etc E > F selects any F tag that is a child of an E element. This is more restrictive than the previous selector. E:first-child selects E when E is the first child of its enclosing element E:link selects an E element if it is in the contents of an element

more selectors E:visited selects element E if E if it is in the contents of a link and the link has been visited. E:active, E:hover, E:focus selects element E during certain user actions with the mouse. E:lang(c) selects element E if it is in the human language c E + F selects any F element immediately preceded by a sibling element E.

more selectors E[a] selects any E element with an attribute "a", whatever the value E[a="v"] select any E element whose "a" attribute value is exactly equal to "v". E[a~="v"] selects any element E whose "a" attribute value is a list of space-separated values, one of which is exactly equal to "v". Useful for classes, because you can put an element into several classes, separated by blanks.

more selectors E[lang|="en"] selects any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". This would select all en languages, be they en-us or en-gb E:first-letter selects the first letter in the content of element E E:first-word selects the first word in the contents of element E

convenient shorthand We have already seen some. E.m is a convenient shorthand for E[class~="m"] E#myid is a convenient shorthand for E[id="myid"].m is a convenient shorthand for *.m

E:before and E:after E:before or E:after can be used to add contents before or after a element E. We will deal come to these when we discuss generated contents properties. This will be coming up after the examples for selectors that we will discuss now.

examples h1, h2, h3 { font-family: sans-serif } h1 { color: red } em { color: red } h1 em { color: blue } div p *[href] body > p { line-height: 1.3 } div ol > li p h1 + p {text-indent: 0}

more example h1 + h2 {margin-top: -5mm} h1.opener + h2 {margin-top: -5mm} h1[title] {color: blue} span[class="example"] {color: blue } span[hello="Cleveland"][id="Columbus"] { color: blue} a[rel~="copyright"] {color: red} a[href=" {background-color: grey} *[lang=fr] {display: none}

more examples *[lang|="en"] {color : red }.dialog.romeo {voice-family: "Lawrence Olivier", charles, male} a:link {color: red} /* unvisited links */ a:visited {color: blue} /* visited links */ a:hover {color: yellow} /* user hovers */ a:active {color: lime} /* active links */ a.external:visited {color: blue}

more examples html:lang(fr) { quotes: '« ' ' »' } html:lang(de) { quotes: '' '} *:lang(fr) > q { quotes: '« ' ' »' } *:lang(de) > q { quotes: '' '} (quotation style depending on the surrounding language, not the language of the quote!)

more examples a[rel~="copyright"] a[href=" div > p:first-child a:focus:hover p > * > p div[class~="ny"][id="albany"]

example: drop caps with uppercase CSS p { font-size: 12pt; line-height: 12pt } p:first-letter { font-size: 200%; font-style: italic; font- weight: bold; float: left } span { text-transform: uppercase } HTML The first few words of an article in The Economist.

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.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 Example p.note:before {content: "note"} will insert the string "note" before any paragraph in the class 'note'.

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 h1:before {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!

user interface properties I There is a {cursor:} property to change the shape of the cursor. It takes the following values –auto-- crosshair-- default –pointer (something suggesting a link) –e-resize –ne-resize –nw-resize –n-resize –se-resize –sw-resize, --s-resize –w-resiz (Indicate that some edge is to be moved) –text (usually as an I) --wait (watch or hourglass) –help (question mark or balloon) –url (with a uri to svg file, that has the graphic to show) use these to totally confuse your users

user interface properties II outlines are like borders, but they don't take up space. they are decorative shades drawn around some {outline-width: } sets the width {outline-style: } takes the same values as {border- style: } {outline-color: } has a color value.

paged media support I CSS has the concept of a page box in which paged output should be placed rule can be used to specify the size of the {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.

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. The default printer margins are beyond your control. You can add a {marks: crop} property to add crop marks You can add a {mark: cross} property to create registration marks.

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 :first {margin-top: 3in}

named pages You can give a page rule an optional name. 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.

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.

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

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

Reasons to like a web site useful attractive to look at thought provoking findabilty personalisation

Why is it so difficult technical expertise graphical design expertise overall structure

IA determines organization content functionality –navigation –labeling –searching

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

Topics covered classification navigation labelling making a site searchable

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

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

The mixed-up library adult arts and humanities community center get a library card learn about our library science teen youth

Organizational form: hierarchies keep balance between breadth and depth obey rule horizontally, no more than 5 levels vertically cross-link ambiguous items if really necessary keep new sites shallow

organizational forms: hypertext great flexibility great potential for confusion not good as a prime organizational structure

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

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

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

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

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

Frames are problematic potential waste of pages real estate speed of display disrupt the page model complex design

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

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

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

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

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

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)

Labels as indexing terms use in tags, or in tag use as controlled vocabulary in the database but some search, in fact almost all, engines do not use metadata

Textual labels born in Völklingen, (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.

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

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

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

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

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

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

why make a site searchable cope with bad organization (Foyle's) dynamic contents large contents

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

user's searching expectation known-item searching existence searching exploratory searching comprehensive searching

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

designing search interfaces I level of expertise –boolean? –concept search? amount returned –comprehensive? –verbose? how much to make searchable

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

features of sophisticated search engines fielded searches sophisticated query languages reusable results set customizable relevance

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

Please shutdown the computers when you are done. Thank you for your attention!