Multimedia and the World Wide Web

1
Multimedia and the World Wide Web

• HCI 201 Lecture Notes 1A

2
A little bit about me

• How to contact me
• By email sxu_at_cs.depaul.edu
• Office hoursMonday Wednesday 14151500
• Or catch me at either one of the two places
• 312.362.8265 (CTI823 PhD students office)
• 312.362.5695 (CTI806 M-Commerce Lab)

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)

4
A little bit about this course

• Textbook
• HTML XHTML - The Definitive Guide4th Edition
  (ISBN 0-596-00026-X)Chuck Musciano and Bill
  KennedyOReilly and Associated, Inc., 2000
• Grading
• Assignments 40Quizzes 10Midterm
  project 20Final project 30

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

6
A little bit more about this course

• About quizzes
• Always on Monday, last 1015 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.

7
A little bit more about this course

• Get familiar with the basics (before midterm)
• Chapter 1, 2 Overview of Internet, HTML, and
  XHTML (week1)
• Chapter 3, 4 Basic HTML elements (week2)
• Chapter 5, 6 Links, images, and multimedia
  (week3)
• Chapter 7, 10 Lists and Tables (week4)
• Chapter 9, 11 Forms and Frames (week5)

8
A little bit more about this course

• Week6
• Usability heuristics (Week6)
• Play around with the cool stuff (after midterm)
• Chapter 8 Cascading Style Sheets (Week7)
• Chapter 12 JavaScript (week8)
• Chapter 13 Dynamic Documents (week9)
• Chapter 15, 16 XML and XHTML (week10)

9
The Internet

• Whats 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.

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.

11
The World Wide Web

• Whats the World Wide Web
• It organizes the Internets 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.

12
A picture of the Internet
By courtesy of Laura McFall.
13
Talking the Internet Talk

• IP address
• - Internet Protocol Address, the identification
  of every computer connected to the Internet.
• - Format 0255.0255.0255.0255
• 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.

14
A picture of the IP address
15
A picture of the Domains
16
A picture of the Domain Names
www.chicago.com
www.cti.depaul.edu
www.yahoo.com
www.depaul.edu
www.microsoft.com
17
Talking the Internet Talk

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

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

19
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
• DirectoriesE.g. /HCI201/Assignments/assignment1
  /
• File name FileName.FileExtension
• E.g. MyFirstPage.html

20
Flow of Information

• (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

21
Standards Organizations

• The World Wide Web Consortium (W3C)
• http//www.w3.org
• The Internet Engineering Task Force (IETF)
• http//www.ietf.org

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

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

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

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