Transcript CSS advanced selectors

LIS650 lecture 5
Thomas Krichel
2004-03-05
today
• A look at your web sites
• Fun with selectors
• Boredom with Information Architecture
basic selector
• the basic selector is a comma-separated list of
elementary selectors.
• Often, the elementary selectors are HTML tags,
e.g.
h1, h2 {text-align: center}
will center all <h1> and <h2> tag 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 tag
in the class class.
• Recall HTML, when you have set the you can
apply the class
<tag class="class">
will apply all the attributes of the class class to
the tag tag. Note that you can place any tag into
several classes, use blanks to separate the
class names
fun with selectors
• * selects any tag.
• E selects any tag called E
• E F selects any F tag that is in the contents of an
E tag, as a child, grand-child etc
• E > F selects any F tag that is a child of an E
tag. This is more restrictive.
• E:first-child selects E when E is the first child of
its enclosing tag
• E:link selects an E tag if it is in the contents of
an <a> tag
more selectors
• E:visited select tag 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 tag E during
certain user actions with the mouse.
• E:lang(c) selects tag E if it is in the human
language c
• E + F selects any F tag immediately preceded
by an E tag start.
more selectors
• E[a] selects any E tag with an attribute "a",
whatever the value
• E[a="v"] select any E tag whose "a" attribute
value is exactly equal to "v".
• E[a~="v"] selects any tag 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 a tag into several classes,
separated by blanks…
more selectors
• E[lang|="en"] selects any E tag whose "lang"
attribute has a hyphen-separated list of values
beginning (from the left) with "en".
• E.m convenient shorthand for E[class~="m"]
• E#myid convenient shorthand for E[id="myid"]
• E:first-letter selects the first letter in the content
of tag E
• E:first-word selects the first word in the contents
of tag E
:before and :after
• :before or :after can be used to add contents
before or after a tag.
• We will deal with this next week, but mention it
here for completeness.
examples
• H1, H2, H3 { font-family: sans-serif }
• H1 { color: red }
EM { color: red }
H1 EM { color: blue }
• DIV * P
• DIV P *[href]
• BODY > P { line-height: 1.3 }
• DIV OL>LI P
more example
•
•
•
•
•
•
H1 + P {text-indent: 0}
H1 + H2 {margin-top: -5mm}
H1.opener + H2 {margin-top: -5mm}
H1[title] {color: blue}
SPAN[class=example] {color: blue }
SPAN[hello="Cleveland"][goodbye="Columbus"] {
color: blue}
• A[rel~="copyright"] {color: red}
• A[href="http://www.w3.org/"] {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="http://openlib.org/home/krichel"]
DIV > P:first-child
A:focus:hover
P>*>A
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; fontweight: bold; float: left }
SPAN { text-transform: uppercase }
• HTML
<P><SPAN>The first</SPAN> few words of an article in
The Economist.</P>
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.
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 7 +-2 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 <meta>tags, or in <title> 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ö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.
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 don‘t 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...
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.
example
• This statement says that the Resource identified by the URI
‘http://openlib.org/home/krichel’ was created by the person ‘Thomas
Krichel’:
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22rdf-syntax-ns#"> <Description
about="http://openlib.org/home/krichel"> <Creator
xmlns="http://description.org/schema/">Ora Lassila</Creator>
</Description> </RDF>
http://openlib.org/home/krichel
Thank you for your attention!