January 22, 2008

1. LIS 650: Passive Web Site Architecture and Design January 22, 2008 Margaret Kipp margaret.kipp@gmail.com http://myweb.liu.edu/~mkipp/

2. Course Resources • Course website: • http://myweb.liu.edu/~mkipp/650/ • Recommended Textbook: • Castro, Elizabeth (2006). HTML for the World Wide Web, Sixth Edition with XHTML and CSS: Visual QuickStart Guide. Peachpit Press. http://www.cookwood.com/html/ • W3C standards: • http://www.w3.org/

3. Office Hours and Contact Information • Office Hours: • Before class on Tuesdays • Skype or IM - Wednesday or Thursday evening between 5 and 7 • Contact Information: • Email: margaret.kipp@gmail.com

4. Course Focus • Standards Based Web Site Design • XHTML 1.0 • CSS 2.1 • Information Architecture and Design • Usability • Accessibility

5. Course Topics • This course will cover the development of a passive web site. • Passive websites do not change based on user input. • Specific topics include: • XHTML coding • CSS • Usability and accessibility • HTTP, web servers

6. Not Covered • Forms: allow you to collect information from users, but this requires scripting which we also will not be covering • Frames: allow you to put several documents into one physical document. This is not considered good design. • Image maps • Some advanced CSS and HTML • Scripting and CGI

7. Assessments • Web Site Plan • A proposal for the final website. Due February 19th. • Small Site • A small website. • Web Site Analysis (3)‏ • Final Web Site

8. Web Site Analysis • The website analyses will consist of a discussion of the design of a chosen website (your choice). • No more than 2 pages. • Comments on specific aspects of website design, not just a description. • Layout and Design • Site Design and Navigation • Accessibility

9. Small Site • This is essentially a small version of the final web site. It can in fact be the early stages of your final project. • Minimum requirements: • At least 3 web pages linked • at least one image or other link per page • at least 3 links per page • proper use of XHTML tags • Due: February 26th

10. Final Web Site • A website on a particular topic (your choice)‏ • It should be the equivalent of a term paper or essay on the topic but in web form. • It should provide a contribution to knowledge on the chosen topic. • You may not use your own personal site.

11. Final Web Site 2 • Both content and good architecture/design are important. • Accessibility is also important. • Sites must validate as proper XHTML and CSS. • Due: May 6th • You will not be able to change your web site between the deadline and the time that the grade is issued.

12. Course Coverage • Authoring pages using standards • Organisation of data to fit onto pages • Create the display style of a set of pages • Define look and feel of the site • Organize the contribution of data • Maintain a technical web installation

13. Philosophy • Learn the underlying principles of the web • Emphasis on standards (XHTML 1.0, CSS 2.1)‏ • Emphasis on accessibility and good design • Emphasis on skills rather than specific software.

14. LIS 651 • LIS 651 is the companion course to LIS 650 • Covers active web site design • Interactive sites which request user input • Covers scripting and CGI • Covers database access from the web

15. Week 1 • Introduction to Web Protocols and Markup Languages

16. Readings and Tools • Readings: • Castro 2006, Introduction, Chapter 1 • DejaVu: (re)creating web history. http://www.dejavu.org/ • Tools: • Validate HTML or XHTML. http://validator.w3.org/ • Validate CSS. http://jigsaw.w3.org/css-validator/

17. History of the WWW • World Wide Web was invented by Tim Berners-Lee and Robert Cailliau at CERN in Geneva, Switzerland in 1990 • World Wide Web Consortium (W3C) maintains the standards on which the web is based. W3C is based in Boston • Director of the W3C is Tim Berners-Lee • DejaVu: (re)creating web history. http://www.dejavu.org/

18. What is the WWW? • a network of information resources • relies on four standards to make these resources available: • uniform naming scheme for locating resources on the Web (i.e. URIs)‏ • Protocols for access to named resources (e.g. http, https, ftp)‏ • Hypertext for navigating among resources (e.g. HTML)‏ • Vocabularies for describing web objects (i.e. MIME types)

19. URI – Universal Resource Identifier • A uniform naming scheme providing each object with a unique name • Every resource on the web has a URI • URIs consist of three pieces: • Name of the protocol used to access the resource (e.g. Http, ftp, https)‏ • Name of the machine hosting the resource • Name of the resource (including its path)‏

20. URI Examples • http://myweb.liu.edu/~mkipp/650/index.html • Http – the protocol used to read web sites • myweb.liu.edu refers to the machine at liu.edu that hosts the site • The site is located in the directory mkipp/650 and the filename is index.html • .html means it is an HTML file • (index.html is the default name for the main page of a site and can be omitted)‏

21. URI Examples 2 • mailto:margaret.kipp@gmail.com • Protocol: mailto, this generates an email to the given address • Machine or network name: gmail.com • User name or directory: margaret.kipp

22. Protocols • A protocol is a set of standard steps required to connect two or more systems • Computers connected to the Internet (“hosts”) use different application level protocols to do things • The most commonly used protocol for the web is hypertext transfer protocol or http • Another protocol that we will use in class is secure shell or ssh

23. Client/Server Protocols • A client/server protocol allows a client to connect to a server • For example: HTTP is a client/server protocol that allows your computer to connect to another computer to view websites • A client sends a request • A server sends a response to the client

24. HTTP • http is stateless. This means that each transaction (request and response) has no relationship to the previous transaction. This is why cookies are used. They store information. • http has a limited set of requests and responses purely for sending and receiving web pages • The contents of standard http transactions can be observed. https adds security to http

25. SSH • ssh is a protocol that uses public key cryptography to encode communications between two machines • An ssh client allows users to connect to another machine that is running an SSH server. Users can run programmes on the machine or copy files to or from the machine.

26. Software • Different software for different jobs • Web Browser • Viewing web pages • SSH Client • Uploading web pages to the server (machine that hosts web pages) or downloading pages from the machine to your computer • Editor • Creating and modifying web pages

27. Web Browsers • Web browser wars • Historically, Mosaic was the first graphical browser, followed by Netscape • Now, Firefox, a derivative of Netscape, challenges Internet Explorer's dominance in Europe • In this course, we will want to examine websites in multiple browsers

28. Web Browsers 2 • Internet Explorer (Windows)‏ • Already installed on all Windows machines • Firefox (All)‏ • http://www.mozilla.com/firefox/ • Safari (Mac or Windows)‏ • http://www.apple.com/safari/ • Opera (All)‏ • http://www.opera.com/ • Lynx • http://home.pacific.net.sg/~kennethkwok/lynx/download.html

29. Web Browsers 3 • Each browser offers slightly different options, but all will view HTML • For this course you will need to have at least 2 different web browsers installed on your computer. • I recommend adding Firefox (or Camino for Mac users) but you way also wish to try Opera or another browser

30. SSH Clients • WinSCP (Windows)‏ • http://winscp.net/eng/index.php • MacSSH (Mac)‏ • http://pagespro-orange.fr/chombier/MacSSH/SSH_info.html • Fugu (Mac)‏ • http://rsug.itd.umich.edu/software/fugu/

31. Editors • There are many editors for HTML or XHTML. Even MS Word will generate HTML. However, this course is about learning to write your own code. • Notepad is a perfectly acceptable choice for writing XHTML code. Any programme which produces plain text is acceptable.

32. Server • Next week we will handle using SSH to connect to the server and setup accounts.

33. MIME type • On windows MIME type is keyed to the extension of a file. The extension is the part after the . • The extension of an HTML file is .html • .html tells the web browser that this is a file of type text/html • A plain text file would be text/plain • A word document is application/msword • The browser needs to know what type of page it has in order to display it properly

34. Markup • XHTML, XML and HTML share similar syntax in their markup • e.g. <html></html> are the tags that enclose an entire page in XHTML and HTML for XML these tags would be <xml></xml>

35. Basic HTML Page <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <body> <p>This is a basic HTML page. </body> </html>

36. Basic XHTML Page <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <body> <p>This is a basic xhtml page.</p> </body> </html>

37. Basic XHTML Page 2 • The first line is the DOCTYPE which defines which type and version of Markup Language we are using, this is the DOCTYPE for XHTML • The second line is the opening tag for any HTML or XHTML page and includes a declaration that this is an XHTML page. • The third and fifth lines enclose content. • The fourth line is structured content. • The sixth line is the closing tag.

38. XHTML Examples on the Web • The following website is written in XHTML • http://www.w3schools.com/xhtml/ • Take a look at the source code of the webpage. Notice the tags. • All XHTML tags come in two parts • <tag></tag> an open tag and a close tag • Occasionally you may see <tag /> this is a combined open/close tag

39. XHTML tutorials on the web • Some XHTML tutorials: • http://www.yourhtmlsource.com/accessibility/xhtmlexplained.html • http://www.w3schools.com/xhtml/ • http://www.freewebmasterhelp.com/tutorials/xhtml

40. Homework • Install an additional browser on your computer • Install an SSH client • Try to create a basic XHTML web page with a title and some text in the body for next class. • Start thinking about the final website. Your website plan is due February 19th and should be no more than one page.