Multimedia and the World Wide Web HCI 201 Lecture Notes #1A

Multimedia and the World Wide Web

HCI 201 Lecture Notes #1A

HCI 201 Notes #1A 2

A little bit about me…

How to contact me By email:

[email protected] 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 3

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 4

A little bit about this course…

TextbookHTML & XHTML - The Definitive Guide4th Edition (ISBN 0-596-00026-X)Chuck Musciano and Bill Kennedy

O’Reilly and Associated, Inc., 2000 Grading

Assignments 40%Quizzes 10%Midterm project 20%Final project 30%

HCI 201 Notes #1A 5

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 attendanceNot required, but would be definitely beneficial.

HCI 201 Notes #1A 6


About quizzes- Always on Monday, last 10~15 minutes.- True or false, multiple choices, filling blanks, etc.- Cheat-sheet: letter size, both sides.

About midterm project (due on week #7)- 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 7


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 8


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 9

The Internet

What’s the InternetA 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 10

Internet, Intranet, and Extranet

Internet- Worldwide public.

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


The World Wide Web

What’s the World Wide WebIt 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.


A picture of the Internet

*By courtesy of Laura McFall.


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.


A picture of the IP address

126.12.1.7

126.1.1.1

126.12.1.1

126.12.1.2126.12.1.3

126.12.1.4

126.12.1.5126.12.1.6

15.35.200.1

15.35.200.2

15.35.200.3

132.12.1.6

132.12.1.5

132.12.1.4

132.12.1.3

132.12.1.2

132.12.1.7

132.12.1.1 245.12.50.5

245.12.50.6

245.12.50.7

245.12.50.8

245.12.50.9

152.123.200.1

152.124.20.2

152.124.20.3

152.124.20.4

152.124.20.5

152.124.20.6152.124.20.7

152.124.20.8

146.182.0.1

146.182.0.2

146.182.0.3

146.182.0.4

146.182.0.5

146.182.0.6

146.182.0.7

146.182.5.5145.12.50.1

172.11.11.1

172.11.11.2

172.11.11.3

172.11.11.4172.11.11.5

172.11.11.6

172.11.11.7

172.11.11.8

172.11.11.9

172.11.11.10

172.11.11.11

172.11.11.12

172.11.11.13

172.11.11.14

172.11.11.15

172.11.11.16


A picture of the Domains

amazon.com

yahoo.com

microsoft.com

depaul.edu

chicago.com

news.com

cnn.com


A picture of the Domain Names

amazon.com

yahoo.com

microsoft.com

depaul.edu

chicago.com

news.com

cnn.com

www.yahoo.com

www.cti.depaul.edu

www.depaul.edu

www.chicago.com

www.microsoft.com



Different branches of domains.com A company, commercial institution or organization.

.edu An educational institution.

.gov A government site.

.org A nonprofit organization.

.net An Internet service provider.

.mil A military site.

A two-letter name abbreviation for countries (outside of the US):

e.g. .ca for Canada, .uk for United Kingdom.



Sever

The computers that serve up documents – “information providers”.

ClientThe computers that retrieve and display documents for us – “information consumers”.

BrowserComputer applications that run on the client-side to access and display HTML documents – “information viewers”.



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”


Flow of Information

1. (You) Enter the URL in a browser

2. (Browser) Get IP address from Domain Name Server

3. (Browser) Send request to that web server

4. (Server) Verify if the request is allowed

5. (Sever) Send the document to your browser

6. (Sever) Log information

7. (Browser) Render the received document and display it

8. (You) Read the document and continue browsing…


Standards Organizations

The World Wide Web Consortium (W3C)

http://www.w3.org The Internet Engineering Task Force (IETF)

http://www.ietf.org


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.


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.


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. AppearanceContent is paramount, appearance is secondary.

Form Follows FunctionAdding fancy visual effects does not necessarily improve the usability of your web page.


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.