LIS650 lecture 1 - PowerPoint PPT Presentation

Loading...

PPT – LIS650 lecture 1 PowerPoint presentation | free to download - id: 2047bf-NGNkN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

LIS650 lecture 1

Description:

The classic value is 'ltr' ... of devices, e.g. web browser for car drivers ... attribute that can take the values 'left', 'right' and 'center' and ' ... – PowerPoint PPT presentation

Number of Views:34
Avg rating:3.0/5.0
Slides: 54
Provided by: kric2
Learn more at: http://openlib.org
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: LIS650 lecture 1


1
LIS650 lecture 1
  • Thomas Krichel
  • 2003-11-08

2
Administrative stuff
  • Get your grade at http//wotan.liu.edu/home/kriche
    l/lis650w03a/grades/secret.html where secret is
    your secret word transliterated to all lower
    case.
  • Thomas will send answers to any question you
    email him to the whole class unless
  • the matter is clearly of a private nature
  • you have informed him that you wish a private
    response.

3
today
  • Review of ways to edit pages
  • abstract part
  • HTML tags at the beginning of the document
  • Generic attributes
  • Nielson on page design
  • fun part
  • Text markup, links, and images
  • lists

4
"my HTML"
  • I will do a list of tags that describe the
    structure of the page.
  • I will only do the tags of the strict DTD
  • The loose DTD has more tags, but all the
    functionality of these tags is best done with
    style sheets.
  • Thus, the pages created today will look rather
    boring because we do cover style sheets only
    later.

5
My HTML speak
  • I will say tag lttaggt requires attribute
    attribute .
  • I will say tag lttaggt takes attribute attribute
    if the attribute is optional.
  • Some times these slides say admit. It is the
    same thing as take

6
literature
  • I work from the text of the official standard at
    http//www.w3.org/TR/html4/
  • To work with it faster, I made a copy at
    http//wotan.liu.edu/krichel/html4/
  • You can work from any HTML book.

7
working with wotan
  • You can work with wotan directly if you like. Use
    putty to connect to wotan.liu.edu, then type
  • cd public_html
  • You can start from empty.html, the file that
    validates, and copy it to test.html
  • cp empty.html test.html
  • nano test.html
  • Then you can change test.html to try out the tags
    as I discuss them here.

8
working on the local machine
  • Open empty.html on your web site and save as
    test.html
  • edit it with notepad to be safe
  • open with Internet Explorer to see the rendered
    html
  • to validate
  • you have to upload the file first to your
    public_html directory on wotan.liu.edu
  • Then use the W3C validator at http//validator.w3c
    .org

9
comments
  • In HTML, you can make comments about your code.
    These are notes to yourself.
  • They will not be shown in the rendered HTML
  • But when the HTML code is downloaded, it will
    have to comments included.
  • Comments start with lt!--
  • Comments end with --gt
  • Example lt!-- this is a comment --gt
  • Comments can not be nested!

10
the lthtmlgt tag
  • appears after the DTD declaration
  • encloses the html contents
  • has required contents ltheadgt and ltbodygt.
  • has two optional attributes
  • the "dir" attribute says in which direction the
    contents is rendered. The classic value is "ltr",
    "rtl" is also valid.
  • the "lang" attribute says in which language the
    contents is. Use ISO 639 codes, e.g. lang"en-us"
  • Example lthtml lang"en-us"gt … lt/htmlgt

11
Internationalization
  • Since this is a long word, it is usually
    abbreviated i18n.
  • Thus we will call "dir" and "lang" the i18n
    attributes.

12
the ltheadgt tag
  • ltheadgt appears right after the lthtmlgt tag start
    to give metadata about the document.
  • Takes the optional i18n attributes.
  • Takes an attribute "profile" to be discussed
    later
  • ltheadgt must contain a lttitlegt tag.
  • ltheadgt may also contain
  • ltstylegt -- ltlinkgt
  • ltbasegt -- ltmetagt (all discussed later)
  • and some other stuff that I do not cover

13
the lttitlegt tag
  • appears in the ltheadgt
  • defines the title of the document
  • takes the i18n attributes
  • Example
  • …lthtmlgtlthead lang"en-us"gt
  • lttitlegtThomas Krichel's favorite
    limericklt/titlegt
  • lt/headgt
  • ltbodygtltdivgtThere was a young friar named Tuck
    …
  • it must not contain other HTML tags.

14
usability concerns with lttitlegt
  • The title is used by the user agent in a special
    manner
  • as bookmark default title
  • as the title for a window in which the user agent
    runs
  • Google uses the title as anchor text to your web
    page.
  • It is a crucial ad for your page
  • Google may truncate the title.
  • Bad ideas for titles
  • section 1 -- home page

15
the ltbodygt tag
  • This encloses the contents of the page as opposed
    to its header.
  • Validation requires one and only one body.
  • It takes the i18n attributes. as well as some
    others that we will discuss now. These fall into
    a another group of attributes we call "core
    attributes"

16
core attributes id
  • This attribute assigns a name to a tag.
  • This name must be unique in a document. In the
    ltbodygt element, this requirement is superfluous,
    of course.
  • The id attribute has several roles in HTML,
    including
  • As a style sheet selector
  • As a target anchor for hypertext links

17
core attributes class
  • The class attribute is a friend of the "id"
    attribute.
  • It assigns one or more class names to a tag the
    tag may be said to belong to these classes. A
    class name may be shared by several tags.
  • It is like placing the tag instance into a set of
    tags.
  • The class attribute has several roles in HTML,
    but it is most useful as a style sheet selector,
    when you want to assign style information to a
    set of tags.

18
Example for "class" and "id"
  • ltp class"limerick" id"limerick_1"gt
  • There was a young man from Perultbrgt
  • Whose limericks stopped at line twoltpgt
  • ltpgtThis is really a stupid limerick. Let us look
    at anotherltpgt
  • ltp class"limerick" id"limerick_2"gt
  • There was a young man from Japanltbrgt
  • Whose limericks would never scanltbrgt
  • And when they asked whyltbrgt
  • He said it is because Iltbrgt
  • Try to put as many words into the last line as a
    possibly canlt/pgt

19
core attributes title
  • The "title" attribute sets a title in use with
    the tag.
  • There is no prescribed way in with the title is
    being rendered by a user agent.
  • Sometimes it is shown as a tool tip, i.e.
    something that flashes up when the mouse is
    rolled over it.
  • This is not to say that the "title" attribute is
    for flashers only.

20
core attributes style
  • Use the "style" attribute to give style
    information to a particular tag.
  • This will be more discussed when we do the style
    sheets.
  • I advise against using it.

21
summary core attributes
  • To summarize, we have a group of core attributes
  • These attributes can be used with almost all
    elements.
  • There are other attributes that can be almost
    universally used, called "event attributes", but
    they have to do with scripting, they are
    therefore not studied in this course.

22
the ltdivgt and ltpgt tags
  • The ltdivgt tag allows you to set arbitrary block
    level divisions in your document.
  • It takes the core attributes.
  • RULE put all your contents that is vertically
    aligned into a ltdivgt
  • The ltpgt tag is like ltdivgt but it signals the
    start and end of a paragraph.

23
The ltspangt tag
  • This is another tag for arbitrary divisions, but
    it operates on inline content. This is contents
    that is put in lines horizontally, rather than
    block-level contents, that is put in vertically.
  • Admits core attributes.
  • Put things in a ltspangt that belong together in a
    line.

24
abstraction ends here
  • Up until now, we have done a lot of abstract tags
    and attributes that do not achieve much visual
    impact.
  • Instead, they
  • point the style sheet to where things are
  • create a semantic design
  • We will now turn to more physical descriptions.
  • Before that, we will hear from Jakob Nielsen.

25
Nielson's book
  • page design 1697
  • content design 98160
  • site design 162259
  • intranet design 260293
  • accessibility 296311
  • i18n 312344
  • future predictions 346376
  • conclusions 378396

26
screen real estate
  • on a screen that displays a web page, as much as
    possible should be the contents of the page.
  • Ideally the contents should occupy more than 50
    of the screen. Most often it does not.
  • Some white space is almost inevitable
  • Cut navigation to below 20 of screen
  • When examining a page for usability, remove
    features by trial and error. If the page is still
    usable without the feature, remove it. Simplicity
    wins over complexity.

27
cross-platform design
  • Unlike traditional GUI systems, the web offers
    very little to control the user.
  • They could come right into the middle of the site
    from a search engine.
  • They could use a variety of devices, e.g. web
    browser for car drivers
  • Most pages only look good on an 17in monitor with
    at least 1024768 pixels. It should not be that
    way.
  • WYSIWYG is dead!
  • Separate contents from presentation, use style
    sheets.

28
resolution independent design
  • Never use fixed width in pixels except perhaps
    for thin stripes and lines
  • Make sure that design looks good with small and
    large fonts in the browser.
  • Graphics must work at 100dpi and better.
  • Text in graphics to be avoided.
  • Provide a print version for long documents.

29
be conservative
  • Avoid non-standard HTML code.
  • Take account of installation inertia. Figures for
    1998/1999 show 1 of browsers updated a week.
  • Only use technology that is at least 1 year old,
    if not at 2 years old. Let other make the errors
    that come with trial.

30
semantics versus presentation
  • The original HTML tags were all based on
    semantics. For example lth2gt is a second level
    heading.
  • Semantic encoding was lost with the "extensions"
    invented by the browser vendors.
  • There will be a wide variety of browser in the
    future. It is already impossible to test pages on
    all user agents.
  • Style sheets already make it possible to style
    the page according to the "media" used by the
    user agent.

31
watch response times
  • Users loath waiting for downloads.
  • Classic research by Mille in 1968 found
  • delay below 0.1 second means instantaneous
    reaction to the user
  • 1 second is the limit for the user's train of
    thought not to be disrupted
  • 10 seconds is the limit to keep the user
    interested, otherwise they will start a parallel
    task
  • low variability of responses is also important
    but the web is notoriously poor for this.

32
factors affecting speed
  • The user's perceived speed depends on the weakest
    of the following
  • the throughput of the server
  • the server's connection to the Internet
  • the speed of the Internet
  • the user's connection to the Internet
  • the rendering speed of the computer

33
making speedy pages
  • keep page sizes small
  • reduce use of graphics
  • use multimedia only when it adds to the user's
    understanding
  • use the same image several times on the site
  • make sure that the / appear at the end of the URL
    for directories. http//openlib.org/home/krichel/
    downloads faster than http//openlib.org/home/kric
    hel

34
know your limits
  • 1 second implies maximum pages size of 2KB on a
    modem, 8 KB on ISDN, and 100 KB on a T1. 10
    seconds implies maximum size of 34KB on a modem,
    150KB on an ISDN and 2MB on T1, Nielson writes.
  • I doubt these numbers.
  • It would be good to find an update on these
    numbers.

35
get some meaning out fast
  • What matters most is the time until the user sees
    something that makes sense. The time for the full
    page to be available matters less. therefore
  • top of the page should be meaningful without
    images having been downloaded
  • use meaningful "alt" attribute for images
  • use "width" and "height" attribute so that the
    user agent can build the page quickly
  • cut down on table complexity. top table should be
    particularly easy.

36
ok, so good so far
  • This has got us to page 51.
  • More next week.
  • Now back to HTML tags

37
header tags
  • Headers lth1gt to lth6gt
  • Simple form of text formatting
  • Vary text size based on the headers level
  • Actual size of text of header element is selected
    by browser.
  • Results can vary significantly between user
    agents.
  • All take the core attributes

38
Now we can start to play
  • Create a document with various headers
  • Compare results in a couple of user agents.
  • and then I will do images and multimedia

39
lthrgt tag
  • create a horizontal rule
  • admits the core attributes
  • other attributes have been deprecated, i.e. are
    allowed in the loose DTD but not the strict one.

40
the ltimggt tag I
  • "src" attribute says where the image is
  • "alt" attribute give a text to show for user
    agents that do not display image. It may be shown
    by the user agents as the user highlights the
    image. It is limited to 1024 characters.
  • "longdesc" attribute is the same as "alt" but
    does not have the length limitation.
  • Example ltimg srcthomas_krichel.jpg
    altpicture of Thomas Krichelgt

41
the ltimggt tag II
  • "width" attribute gives the user agent a
    suggestion for the width of the image.
  • "height" attribute gives the user agent a
    suggestion for the height of the image
  • both can be expressed
  • in pixels, as a number
  • in age of the current display width
  • of course ltimggt supports the core attributes.

42
contents-based style tags
  • ltabbrgt encloses abbreviations
  • ltacronymgt encloses acronyms
  • ltcitegt encloses citations
  • ltcodegt encloses computer code snippets
  • ltdfngt encloses things being define
  • ltemgt encloses emphasized text
  • ltkbdgt encloses text typed on a keyboard
  • ltsampgt encloses literal samples
  • ltstronggt encloses strong text
  • ltvargt encloses variables
  • all admit the core attributes

43
physical style tags
  • ltbgt encloses bold contents
  • ltbiggt encloses big contents
  • ltsmallgt encloses small contents
  • ltigt encloses italics contents
  • ltsubgt encloses subscripted contents
  • ltsupgt encloses superscripted contents
  • ltttgt encloses typewriter-style contents
  • all admit the core attributes

44
the ltbrgt tag
  • is used to create a line break
  • It has the clear attribute that can take the
    values "left", "right" and "center" and "all".
    This prevents textual content to float around
    other content.
  • It is not required to close the tag, but Thomas
    Krichel recommends to write it as ltbr/gt, this
    closes the tag.

45
the ltpregt tag
  • encloses contents that is to be rendered with the
    characters and line breaks just like in the
    source text. Markup is still allowed, but tags
    that do spacing should not be used, obviously.
  • If you want to render HTML, quote
  • lt as lt
  • gt as gt
  • as amp
  • It takes the core attirbutes and a width
    attribute setting the number of characters per
    line.

46
ltblockquotegt and ltqgt tags
  • ltblockquotegt quotes a paragraph
  • ltqgt make a short quote inside a paragraph
  • both takes a "cite" attribute that take the value
    of a URL of the source of the quote.
  • They also take the core attributes.

47
the ltagt tag
  • opens a hyperlink, contents of tag is the anchor
    text, it is limited to text only
  • "href" attribute has the target URL
  • "hreflang" has the language of the target
  • "type" attribute gives the MIME-type of the
    target
  • Some other attributes for which we have no use
  • coords shape accesskey tabindex
  • and of course, ltagt takes the core attributes

48
the ltagt tag II
  • it takes the "rel" attributes to specify the
    relationship between the current document and the
    link target, as well as the "rev" attribute to
    specify the reverse.
  • This is not currently well supported by the
    browsers.
  • I will come back to these relational attributes
    when discussing the ltlinkgt tag.
  • Ex lta hrefhttp//openlib.org/home/krichelgta
    nice manlt/agt.

49
linking within a document
  • If you have the "id" attribute (one of the core)
    set to id on an element in a document at a URL
    URL, you can make the element the target of a
    link.
  • You use the URL URLid for this purpose.
  • The "name" attribute can also be used for this
    purpose, instead of "id", but this is only
    allowed for historical reasons.
  • If the document linked to is the current
    document, you dont need to reference its URL.

50
list tags ltolgt and ltulgt
  • ltolgt creates an ordered list.
  • ltulgt unordered list
  • of course, they also take the core attributes

51
the ltligt tag
  • It marks each item of a list.
  • it is usually not closed.
  • it takes the "type" attribute, so you can style
    each item differently
  • it takes a "value" attribute, so you can give
    each item a different numerical value in an
    ordered list. You can do that if you want to
    confuse the hell out of your users. The value of
    "value" must be a number, of course.
  • ltligt takes the core.

52
definition lists tags
  • ltdlgt encloses a definition list
  • ltdtgt encloses the term that is being defined
  • ltddgt encloses the definition
  • All take the core attributes.

53
http//openlib.org/home/krichel
  • Thank you for your attention!
About PowerShow.com