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

HCI 201 Notes #1A2 A little bit about me… How to contact me By Office hours: Monday & Wednesday: 14:15~15:00 Or catch me at either one of the two places: (CTI#823 – PhD students office) (CTI#806 – M-Commerce Lab)

HCI 201 Notes #1A3 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 #1A4 A little bit about this course… Textbook HTML & XHTML - The Definitive Guide 4 th Edition (ISBN X) Chuck Musciano and Bill Kennedy O’Reilly and Associated, Inc., 2000 Grading Assignments 40% Quizzes 10% Midterm project20% Final project30%

HCI 201 Notes #1A5 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 #1A6 A little bit more about this course… 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 #1A7 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 #1A8 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 #1A9 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 #1A10 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.

HCI 201 Notes #1A11 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 #1A12 A picture of the Internet *By courtesy of Laura McFall.

HCI 201 Notes #1A13 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. Domain Name Sever: special computers that keep tables of machine names and IP addresses.

HCI 201 Notes #1A14 A picture of the IP address

HCI 201 Notes #1A15 A picture of the Domains amazon.com yahoo.com microsoft.com depaul.edu chicago.com news.com cnn.com

HCI 201 Notes #1A16 A picture of the Domain Names amazon.com yahoo.com microsoft.com depaul.edu chicago.com news.com cnn.com

HCI 201 Notes #1A17 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.

HCI 201 Notes #1A18 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 #1A19 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. “ or “ ” Directories: E.g. “/HCI201/Assignments/assignment1/” File name: “FileName.FileExtension” E.g. “MyFirstPage.html”

HCI 201 Notes #1A20 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…

HCI 201 Notes #1A21 Standards Organizations The World Wide Web Consortium (W3C) The Internet Engineering Task Force (IETF)

HCI 201 Notes #1A22 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 v Follow the standards to make sure your pages will be displayed correctly and effectively. - Use extensions properly to improve your pages.

HCI 201 Notes #1A23 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 #1A24 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 #1A25 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.