Multimedia and the World Wide Web
HCI 201 Lecture Notes #1A
A little bit about me…

How to contact me

By email:
sxu@cs.depaul.edu

Office hours:
Monday & Wednesday: 14:15~15:00

Or catch me at either one of the two places:
312.362.8265 (CTI#823 – PhD students office)
312.362.5695 (CTI#806 – M-Commerce Lab)
HCI 201 Notes #1A
2
A little bit about you…

Your experience




Internet browsing
Programming
Web page design/developing
Your equipments


Web browser
Tools you MIGHT need for this course:



HTML editor (Notepad, FrontPage, HomeSite, etc.)
Image editor (Paint, PhotoShop, Illustrator, etc.)
Media editor (for editing sound and video)
HCI 201 Notes #1A
3
A little bit about this course…

Textbook
HTML & XHTML - The Definitive Guide
4th Edition (ISBN 0-596-00026-X)
Chuck Musciano and Bill Kennedy
O’Reilly and Associated, Inc., 2000

Grading
Assignments
Quizzes
Midterm project
Final project
HCI 201 Notes #1A
40%
10%
20%
30%
4
A little bit more about this course…

About assignments
-
-

4 out of 5 assignments, drop the lowest score.
Due on Wednesday NOON.
Penalty for last submission: 10 points off per week.
Save (copy & paste) ALL your HTML code into ONE MS Word file.
Highlight the following items on your submission:
- Your name
- URL of this submission
- Required code
- Function properly? Unfixed bugs?
- Time used
- Self grading & your rationale
About attendance
Not required, but would be definitely beneficial.
HCI 201 Notes #1A
5
A little bit more about this course…

About quizzes
-

About midterm project (due on week #7)
-

Always on Monday, last 10~15 minutes.
True or false, multiple choices, filling blanks, etc.
Cheat-sheet: letter size, both sides.
Individual project – web site usability evaluation.
Detailed requirements will be available after week #4.
About final project (due on week #11)
-
Individual project – web site development.
Detailed requirements will be available after midterm.
HCI 201 Notes #1A
6
A little bit more about this course…

Get familiar with the basics (before midterm)
-
-
Chapter 1, 2: Overview of Internet, HTML, and XHTML
(week#1)
Chapter 3, 4: Basic HTML elements (week#2)
Chapter 5, 6: Links, images, and multimedia (week#3)
Chapter 7, 10: Lists and Tables (week#4)
Chapter 9, 11: Forms and Frames (week#5)
HCI 201 Notes #1A
7
A little bit more about this course…

Week#6
-

Usability heuristics (Week#6)
Play around with the cool stuff (after midterm)
-
-
Chapter 8: Cascading Style Sheets (Week#7)
Chapter 12: JavaScript (week#8)
Chapter 13: Dynamic Documents (week#9)
Chapter 15, 16: XML and XHTML (week#10)
HCI 201 Notes #1A
8
The Internet

What’s the Internet
A worldwide collection of computer networks, sharing digital
information via a common set of networking and software
protocols.

History of the Internet
-
Began in the late 1960s, funded by the US Dept. of Defense.
ARPAnet (Advanced Research Projects Agency Network of the
Department of Defense)
-
Opened to businesses and individuals in early 1990s.
Took off around 1993, with the development of World Wide
Web.
HCI 201 Notes #1A
9
Internet, Intranet, and Extranet

Internet
-

Intranet
-

Worldwide public.
Private networks.
Restrict access to only members.
Unconnected to outside institutional boundaries.
Extranet
-
Semi-private networks.
Restrict access to only members.
Provide services to members via the Internet.
HCI 201 Notes #1A
10
The World Wide Web

What’s the World Wide Web
It organizes the Internet’s vast resources to give users easy
access to information.

History of the World Wide Web
-
-
-
Developed in 1989, by Timothy Berners-Lee and other
researchers at CERN.
Hypertext Markup Language (HTML) was born with the World
Wide Web.
Mosaic, developed at NCSA, also contributed to the
popularity of the World Wide Web.
HCI 201 Notes #1A
11
A picture of the Internet
*By courtesy of Laura McFall.
HCI 201 Notes #1A
12
Talking the Internet Talk

IP address
- Internet Protocol Address, the identification of every computer
connected to the Internet.
- Format: [0~255].[0~255].[0~255].[0~255]

DNS



Domain: a subset of Internet, e.g. Microsoft.com, IBM.com.
Domain Name: refers to the machine in a specific domain.
e.g. www.microsoft.com, www.depaul.edu.
Domain Name Sever: special computers that keep tables of
machine names and IP addresses.
HCI 201 Notes #1A
13
A picture of the IP address
126.1.1.1
15.35.200.2
126.12.1.1
126.12.1.6
15.35.200.1
132.12.1.5
132.12.1.6
126.12.1.5
126.12.1.7
126.12.1.2
126.12.1.3
126.12.1.4
132.12.1.7
132.12.1.2
245.12.50.6
132.12.1.4
245.12.50.9
152.123.200.1
245.12.50.8
132.12.1.3
152.124.20.8
152.124.20.6
15.35.200.3
152.124.20.7
245.12.50.7
245.12.50.5
132.12.1.1
172.11.11.16
172.11.11.14
152.124.20.2
152.124.20.5
152.124.20.3
152.124.20.4
146.182.5.5
145.12.50.1
146.182.0.1
146.182.0.7
146.182.0.2
172.11.11.15
172.11.11.10
172.11.11.8
146.182.0.6
172.11.11.1
146.182.0.3
146.182.0.4
172.11.11.9
172.11.11.7
172.11.11.2
146.182.0.5
172.11.11.3
172.11.11.12
172.11.11.11
172.11.11.13
172.11.11.6
172.11.11.4
172.11.11.5
HCI 201 Notes #1A
14
A picture of the Domains
news.com
amazon.com
cnn.com
chicago.com
yahoo.com
depaul.edu
microsoft.com
HCI 201 Notes #1A
15
A picture of the Domain Names
news.com
amazon.com
cnn.com
chicago.com
yahoo.com
www.chicago.com
www.cti.depaul.edu
www.yahoo.com
www.microsoft.com
depaul.edu
www.depaul.edu
microsoft.com
HCI 201 Notes #1A
16
Talking the Internet Talk

Different branches of domains
.com
.edu
.gov
.org
.net
.mil
A company, commercial institution or organization.
An educational institution.
A government site.
A nonprofit organization.
An Internet service provider.
A military site.
A two-letter name abbreviation for countries (outside of the US):
e.g. .ca for Canada, .uk for United Kingdom.
HCI 201 Notes #1A
17
Talking the Internet Talk

Sever
The computers that serve up documents –
“information providers”.

Client
The computers that retrieve and display documents for us –
“information consumers”.

Browser
Computer applications that run on the client-side to access and
display HTML documents – “information viewers”.
HCI 201 Notes #1A
18
Talking the Internet Talk

URL – Uniform Resource Locator

Protocol: a set of rules describing how to transmit data. E.g.
“http”, “ftp”, “https”

Domain name or server IP address:
E.g. “www.yahoo.com” or “64.58.76.223”

Directories:
E.g. “/HCI201/Assignments/assignment1/”

File name: “FileName.FileExtension”
E.g. “MyFirstPage.html”
HCI 201 Notes #1A
19
Flow of Information
1.
2.
3.
4.
5.
6.
7.
8.
(You) Enter the URL in a browser
(Browser) Get IP address from Domain Name Server
(Browser) Send request to that web server
(Server) Verify if the request is allowed
(Sever) Send the document to your browser
(Sever) Log information
(Browser) Render the received document and display it
(You) Read the document and continue browsing…
HCI 201 Notes #1A
20
Standards Organizations

The World Wide Web Consortium (W3C)
http://www.w3.org

The Internet Engineering Task Force (IETF)
http://www.ietf.org
HCI 201 Notes #1A
21
HTML: What it is?

HyperText Documents
- Electronic files that contain links leading to other electronic files.
- HTML = Tags(directions) + Contents + Comments(optional)
- Provide a new way of processing through a series of documents.

Standards vs. Extensions
- Standards define the basic HTML syntax and semantics.
- Getting matured through iterations, came to HTML v4.01.
- Follow the standards to make sure your pages will be displayed
correctly and effectively.
- Use extensions properly to improve your pages.
HCI 201 Notes #1A
22
XHTML: What it is?

The Markup Language Family
- SGML (Standard Generalized Markup Language)
Too broad, difficult to use.
- HTML (HyperText Markup Language)
- XML (Extensible Markup Language)
An HTML-like markup language, with more rigid rules,
to handle different network documents.
- XHTML (Extensible HyperText Markup Language)
A reformulation of HTML to be compliant under XML.
HCI 201 Notes #1A
23
What are HTML/XHTML for?

Their fundamental purpose
“… is to define the structure of documents so that they can be
delivered quickly and easily to a user over the network, and
rendered properly on a variety of display devices…”
- HTML & XHTML – The Definitive Guide

Content vs. Appearance
Content is paramount, appearance is secondary.

Form Follows Function
Adding fancy visual effects does not necessarily improve the
usability of your web page.
HCI 201 Notes #1A
24
Tools you will need

An editor
- text editor (notepad, Word, etc)
- WYSIWYG editor (FrontPage, DreamWeaver, etc)

An browser (Netscape vs. Internet Explorer)
Be professional – make sure different web browsers display your
web page consistently.

A connection to the Internet
- NOT necessary when you develop your web pages.
- To upload your finished web pages online and test external links.
- To check out the good/bad design examples online
- To get answers quickly for your programming FAQs.
HCI 201 Notes #1A
25