1 / 25

Multimedia and the World Wide Web

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)

leslie-estes
Download Presentation

Multimedia and the World Wide Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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@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) 2

  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) 3

  4. A little bit about this course… • Textbook HTML & XHTML - The Definitive Guide4th Edition (ISBN 0-596-00026-X)Chuck Musciano and Bill KennedyO’Reilly and Associated, Inc., 2000 • Grading Assignments 40%Quizzes 10%Midterm project 20%Final project 30% 4

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

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

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

  8. 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) 8

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

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

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

  12. A picture of the Internet *By courtesy of Laura McFall. 12

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

  14. 126.1.1.1 15.35.200.2 126.12.1.1 15.35.200.1 15.35.200.3 126.12.1.6 132.12.1.5 126.12.1.5 132.12.1.7 132.12.1.6 126.12.1.7 132.12.1.2 245.12.50.6 126.12.1.2 126.12.1.3 132.12.1.4 245.12.50.9 126.12.1.4 152.123.200.1 245.12.50.8 132.12.1.3 152.124.20.8 245.12.50.7 152.124.20.7 132.12.1.1 172.11.11.16 245.12.50.5 152.124.20.6 172.11.11.14 152.124.20.2 152.124.20.5 145.12.50.1 172.11.11.15 146.182.5.5 152.124.20.3 146.182.0.1 172.11.11.10 152.124.20.4 146.182.0.7 146.182.0.2 172.11.11.12 172.11.11.8 146.182.0.6 172.11.11.11 172.11.11.1 172.11.11.13 146.182.0.3 172.11.11.9 172.11.11.7 146.182.0.4 172.11.11.2 146.182.0.5 172.11.11.6 172.11.11.3 172.11.11.4 172.11.11.5 A picture of the IP address 14

  15. news.com amazon.com cnn.com chicago.com yahoo.com depaul.edu microsoft.com A picture of the Domains 15

  16. news.com amazon.com cnn.com chicago.com yahoo.com depaul.edu microsoft.com A picture of the Domain Names www.chicago.com www.cti.depaul.edu www.yahoo.com www.microsoft.com www.depaul.edu 16

  17. Talking the Internet Talk • Different branches of domains .comA company, commercial institution or organization. .edu An educational institution. .gov A government site. .orgA nonprofit organization. .netAn 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. 17

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

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

  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… 20

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

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

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

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

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

More Related