# DIG6137 Information Architecture

Shared by:
Categories
Tags
-
Stats
views:
1
posted:
2/27/2013
language:
Latin
pages:
40
Document Sample

```							DIG6137 Information
Architecture

LECTURE 2: HTML
AND CSS

DR. MCDANIEL
FALL 2007
Outline

 Review of information content and quality equations
and sample problems
   A brief history of the Internet
   Basic HTML tutorial
   Basic CSS tutorial
   Minor Assignment 1 details
Information Equations

I = -p log2 p and C = W log2 (1 + S/N)
Example question: What is the total information involved in gaining knowledge
of the event of tossing a coin and turning up heads?
I = -1/2 (log2 (1/2)) = -1/2(-1) = .5 We are expecting heads. We will be surprised
half of the time!

Turning up tails? This is the same probability, so we will still be surprised half of
the time.

Tossing a coin? Now we must add both probabilities. I = -1/2 (log2 (1/2)) + -1/2
(log2 (1/2)) = -1/2 * -1 + -1/2 * -1 = 1 bit. We will be surprised all of the time,
since we are expecting neither heads nor tails!
Sample Questions

 Sample questions on information transfer will focus more
on understanding binary encoding and logarithms than on
understanding probability.
 Example: ASCII is a 7-bit code. How many unique “codes”
can be stored in ASCII format?
 Example: Razzamaraz Joyce is a secret agent working for
the Dutch. Her communiqués are strings of numbers (zero
through nine). If her message contains ten distinct encoded
numbers, how many bits are needed to encode her message
for transmission? What size is ideal for encoding each
distinct number: a byte, half-byte, or single bit?
What is the Internet?

 Operationally, we can define the Internet as a vast
network of Web servers that allows us to:
   Link to other Web sites
   Display images and multimedia information
   Connect with databases
   Access unlimited amounts of porn
   Reach out and touch the world
 Are the Internet and the World Wide Web the same
thing?
Key Events in the Internet Evolution

 1965: The term “hypertext” is coined by Ted
Nelson
   1969: Goldfarb, Mosher, and Lorie invent the
Generalized Markup Language (GML)
   1969: ARPANET is formed
   1986: SGML, derived from GML, is adopted as
an ISO standard
   1987: 10,000 Internet hosts
   1989: Tim Berners-Lee begins work on the
World Wide Web Project
Tim Berners-Lee

    Hoped to connect the distributed work of physics
researchers.
    Devised a prototype system based on three
components:
2.   A protocol for transmitting information
3.   A language for encoding information
    The prototype system was called Worldwideweb.
HTML

 HTML was derived from SGML, but with a few key
differences:
   It was simplified.
   It was universal.
   It was degradable. New versions of HTML must never break
older releases of the language.
Key Events (cont.)

 1991: First draft of Hypertext Markup Language
(HTML) is online
   1993: Mosaic is developed
   1994: Netscape Navigator is released
   1995: Internet Explorer is released
   1995: 10 million Internet hosts
   1996: CSS becomes a W3C recommendation
Key Events (cont.)

 1997: Dynamic HTML is supported in 4.0 browsers
 1998: eXtensible markup language (XML) becomes a
W3C recommendation
 2000: 75 million Internet hosts
 2004: 275 million Internet hosts
 2005: AJAX appears and heralds Web 2.0.

 Hobbe’s Timeline:
http://www.zakon.org/robert/internet/timeline/
Learning to be an Information Architect

 Anyone can create BAD Web pages.
 Anyone can create INEFFICIENT Web pages.
 Our goal is to learn how to think like an information
ARCHITECT. What does that mean?
   Careful planning and analysis
   Usability testing and considerations
   Using interactivity wisely
   Taking advantage of the latest technologies
   Making the information work for us
   Learning how to code and script! We don’t need no stinkin’
WYSIWYGs!
HTML Basics

 The building blocks of HTML are called elements.
Examples of elements include BODY, P, and OL.
 When we surround these elements with angle
brackets, we have <BODY>, <P>, and <OL>, which
we now call tags.
 Elements in HTML normally have three parts:
1.    Start tags
2.    Content
3.    End tags
        Here is an example: <P>Hello there!</P>.
HTML Tags

 For a more comprehensive list, see the HTML 4.01
Quick List available here:
http://www.w3schools.com/html/html_quick.asp.
Other Notes

 HTML elements/tags are case-insensitive (i.e.,
<B>=<b>)
 Some elements have no content (e.g., <br>)
 Some elements have no end tags
 Comments can be used in this format
<!– This is a comment in HTML code -->
 If you are new to HTML and CSS, a reference book is
highly recommended! I like both the Visual
Quickstart series of books as well as the HTML Bible
series. There are also lots of good tutorials online.
Basic Document Outline

meta tags are optional but useful for some search engines
A Document With Content
HTML Tables (Code View)

 See http://www.w3schools.com/html/html_tables.asp for
a good tutorial on tables.
HTML Tables (Browser View)
Establishing Good Habits

 Although some tags such as <LI> and <P> do not
require end tags (because their ending can be
determined by the beginning of the next tag) it is a
good idea to close them with an end tag anyway.
 Use indenting to line up blocks of nested tags.

NOT SO GOOD

GOOD

 This new file will be named example2.html.

example1.html file to this
new example2.html file.

We’ll let the user click on
and open up this list of
vendors.

Clicking Here….

(example1.html)

(example2.html)
Content versus Formatting

 Another good habit to learn is to separate the
descriptive data in your site from the formatting
data.
 Why is this a good idea?
 We can accomplish this using Cascading Style Sheets
(CSS).
 There are several ways to use CSS in your HTML
documents. The way we will learn in this class is to

 Using the link tag, we can specify an external
stylesheet to be loaded when rendering the content
on our page.
alpaca_style.css (Example CSS file)
Browser Output
CSS Syntax

 CSS Syntax uses three parts: a selector, a property,
and a value. A semicolon should follow each value.
body, h1, p, and td are
selectors.

background, color,
font-size, and font-
family are properties.

#CCFFFF, green,
34px, Garamond…,
blue, 28px,
Helvetica…, are
values.
Using Classes

 Classes allow you to further customize elements in
your page and define more than one look for a given
Remove all formatting code from HTML

 Before

 After
Browser Output
Positioning in CSS

 CSS can also be used to position elements within
   Relative positioning means that an element is positioned
relative to its normal position.
   Fixed positioning means that an element is positioned relative
to the browser window.
   Absolute positioning means that an element can be positioned
anywhere on the page according to exact coordinates.
 You can find lots of examples for each online. We’ll
just look at one example here – relative positioning.
Relative Positioning (Code)

CSS File

HTML File
Relative Positioning (Browser)

Note the two HTML
elements that are
indented relative to
their original
positions.

 Read chapter 3 in the Polar Bear book.
 Complete the Online Tutorials #2-3 on
 Complete an online tutorial of your choice on
basic HTML or CSS (I recommend
http://www.w3schools.com/html/default.asp
and
http://www.w3schools.com/css/default.asp).
 Read the handout by Tim Berners Lee.

 Complete Minor Project 1
 On your own, research how to:
1.   Use hyperlinks to open new browser windows
2.   Use named anchors
3.   Insert images into your HTML pages
4.   Use ordered and unordered lists
5.   Use pseudo-classes in CSS to customize link behaviors
 Begin working on IIS-report
 (Optional) Read draft chapter on XML and CSS (will be
posted to WebCT later this week).
Minor Project 1

 Create a Web page that displays an inventory of at
least 30 items for sale for a hypothetical online
outlet. Use CSS to format and style your page.
Sulley account. Link an external CSS sheet and
upload that as well. Edit the prior “index1.php” file
to comment out lines 17-21 (see next slide).
 If done correctly, your assignment 1 should
site (the one linked from our class Wiki) and the
server information should no longer appear.
Editing index.php

 Use the comment format to begin your comment on
line 17 with <!-- and end it on line 21 with -->. In
PHP we will learn a slightly different syntax for
40th Slide

 This is a 40th
slide
included only
because it
would make
Mr. Monk
happy.

```
Related docs
Other docs by yurtgc548
Real Options and VOIP
Raina EMF Trace IFA 1-2006