LIS 390W1A - Schedule

Introduction

• Introductions
• Brief Overview of the Class
• Administrative Stuff
• Assignments & Grading
• Expectations & Philosophy

Lab

Lab 1: Introduction to HTML: How Easy is Easy?

We'll need to setup your GSLIS I: drives for you to complete the lab.

How Computers Work

Quiz

There will be a short Quiz on Monday about how computers work, so pay attention in class.

Required Reading

• Basic Computer Tutorial

Related Readings (Optional):

• Shuler, R. (2002). How does the Internet Work?
• Horton, M. (1986) What is a Domain?
• A Brief History of the Internet
• Windbigler, K. Exploring the Domain Name Space
• Gilbert, H. (1995). TCP/IP
• http://www2.rad.com/networks/1994/osi/layers.htm

Lab

None. Instead we'll be having a Quiz on Monday.

How the Internet Works

Quiz 1

Today we will be taking Quiz 1 at the beginning of class.

Required Reading

• Shuler, R. (2002). How does the Internet Work?
• Horton, M. (1986) What is a Domain?

Related Readings (Optional):

• Basic Computer Tutorial
• A Brief History of the Internet
• Windbigler, K. Exploring the Domain Name Space
• Gilbert, H. (1995). TCP/IP
• http://www2.rad.com/networks/1994/osi/layers.htm

Lab

Lab 2: Shuler's "Check It Out" Exercises

Fun with Technology!

We will be learning how to use all the main technologies that we will be using in this course, including text editors, web browsers, ssh, netfiles, I: Drive, etc. We ought to finish with these technologies today.

In this class, we will be utilizing the Course Technologies section of the course website a great deal.

Lab

For anyone who has not already done so, we'll need to setup your GSLIS I: drives, and then we'll need to do a bit of quick admin work. Then we can start on the lab.

Finish Lab 2: Shuler's "Check It Out" Exercises

We will be skipping Lab 3: Downloading and Uploading an HTML File

No Class!!!

Fun with Technology!

We will be learning how to use all the main technologies that we will be using in this course, including text editors, web browsers, ssh, webdav, netfiles, I: Drive, etc. We ought to finish with these technologies today.

In this class, we will be utilizing the Course Technologies section of the course website a great deal.

Lab

Finish Lab 2: Shuler's "Check It Out" Exercises

URLs, paths and links

Required Reading

• Graham, Ian (1998). Uniform Resource Locators
• Mapping URLs to Filesystem Locations

Lab

We'll have to do the quick admin work, then we'll move on to Lab 4: File Systems and Decomposing URLs.

Hyperlinking, navigation and information organization

Required Reading

• Raggett, D. (2005). Getting Started with HTML

Useful Reference:

• W3 Schools
• W3C HTML Working Group

Lab

Lab 5: Basic HTML 5

The Importance of Standards & HTML Validation

Required Reading

• Boudreau (2002). The Importance of Web Standards.
• Richmond, A. HTML Standards Compliance - Why Bother?

Also, check out the W3 HTML Validator

Related Readings (Optional)

• XHTML Standard

Lab

Lab 6: Writing Valid HTML/XHTML

Markup and HTML

Required Reading

• Resseler, S. (1996). The Art of Electronic Publishing. Section 4.3
• On Semantics and Markup
• HTML DOM

Related Readings (Optional):

• Markup Systems and the Future of Scholarly Text Processing by James H. Coombs, Allen H. Renear, and Steven J. DeRose (1987).

Lab

Lab 7: Kinds of Markup

More HTML

Required Reading

• Raggett, D. (2005). More advanced features

Useful Reference:

• W3 Schools

Lab

Lab 8: Writing More HTML.

Note

Quiz 2 (50 points) is on Wednesday of next week.

HTML & CSS

Required Reading

• CSS Zen Garden
• Raggett, D. (2002). Adding a touch of style
• Learning Cascading Style Sheets - Pick one or two things to skim

Note

Quiz 2 (50 points) is on Wednesday of next week.

Lab

More CSS

Required Reading

Continue readings from last class.

Note

Quiz 2 (50 points) is on Wednesday.

Lab

Lab 9: Messing with CSS.

Test page from 2009's lecture on this topic.

Test page from 2007's lecture on this topic.

Web Design and Web Usability

Quiz 2 (50 points) is Today

Slides

Slides for the usability lecture.

Required Reading

• Usability 101
• Usability Misconceptions
• Usability Testing

Related Readings (Optional):

• Nielsen, Jakob. "About Us Pages."
• Nielsen, Jakob. "Why This Site Has Almost No Graphics."
• Play with Speed Reader
• "Usability", from Wikipedia
• "Vincent Flanders’ Web Pages that Suck."
• Nielsen (1997). How users READ on the web.
• Morkes, J., Nielsen, J. (1997) Concise, SCANNABLE, and Objective: How to Write for the Web

Lab

We will be skipping Lab 10: Writing for the Web.

None. Work on the Website Made to Order Assignment, part I of which is due next week Wednesday.

Please be sure to incorporate what you learned today into your Website Made to Order Assignment prototype.

History of the Web

Required Reading

• A Brief History of the Internet
  • Try this link if the above link does not work.
• Bush, V. (1945) As we may think, The Atlantic Monthly, July 1945.

Related Readings (Optional):

• Licklider, J.C.R. (1968). The Computer as a Communication Device. Science and Technology. April 1968.
• O'Neill et al. (2003) Trends in the Evolution of the Public Web. D-Lib Magazine, 9(4).
• Size and Growth from OCLC Web Characterization Project
  • More Sources for Internet and Web Statistics
• Hobbes's Internet Timeline
• Jules Verne bibliography
• The Visible Man: An FBI Target Puts His Whole Life Online - The tale of Hasan Elahi.
• A Decade of Internet Evolution by Vinton G. Cerf.
• A Decade in the Life of the Internet by Geoff Huston

Lab

None. Keep working on your Website Made to Order Assignment due Wednesday.

HTML and CSS Review Day

Today will be a day for discussion and talking about the problems and issues you are having with HTML and CSS. Please come prepared with your questions.

Required Reading

None.

Lab

None. Please keep working on your Website Made to Order Assignment.

HTML Tables

Required Reading

• Graham, Ian. (1998). Introduction to HTML. Chapter 4. Tables
• W3C HTML Tables
• W3C Tables and CSS
• Table tutorial - especially useful for understanding how to use <thead> and <tbody> and <tfoot> tags.

Related Readings (Optional):

• W3C Table Layout Techniques
• CSS Tables by Robert Denton
• W3Schools CSS: border-collapse

Lab

Lab 11: HTML Tables.

CSS: Relative Layouts

Required Reading

• Zeldman, J. From Table Hacks to CSS Layout: A Web Designer's Journey
• Korpela, Jukka. (2001). Why style sheets are Harmful

Related Readings (Optional):

• A List Apart
• W3 Schools
• Newhouse, M. Practical CSS Layout Tips, Tricks and Techniques
• Holzschlag, M. E. Thinking outside the Grid

Lab

Lab 12: More CSS.

More CSS: Three columned layouts and more...

No readings.

Lab

We will not be doing Lab 19: Three Columned Layout.

Optional Exercise

Exercise: More CSS Practice

HTML Forms

Required Reading

• W3 Schools (be sure to click through and read the examples at the bottom)

Related Readings (Optional):

• HTML Code Tutorial - Forms
• HTML Forms

Lab

Lab 13: Forms.

Quick Overview of Javascript & PHP

Required Reading

• Check out these JavaScript tutorials at Quirksmode
• Check out PHP.net - Skim the site, get a sense of what is there.

For the following sites, check them out to see what is possible with javascript:

• How to add a google map to a web page in 10 minutes
• Add Digg to your homepage
• Geotagging: Flickr and Google Maps
• Mappr

Examples of Javascript

• http://maps.google.com/maps
• http://www.walterzorn.com/dragdrop/dragdrop_e.htm
• http://script.aculo.us/
• http://dojotoolkit.org/demos
• http://jsmsxdemo.googlepages.com/jsmsx.html

Lab

Lab 14: Introduction to Javascript & PHP

Quick Overview of Javascript & PHP

Required Reading

• Check out these JavaScript tutorials at Quirksmode
• Check out PHP.net - Skim the site, get a sense of what is there.

For the following sites, check them out to see what is possible with javascript:

• How to add a google map to a web page in 10 minutes
• Add Digg to your homepage
• Geotagging: Flickr and Google Maps
• Mappr

Examples of Javascript

• http://maps.google.com/maps
• http://www.walterzorn.com/dragdrop/dragdrop_e.htm
• http://script.aculo.us/
• http://dojotoolkit.org/demos
• http://jsmsxdemo.googlepages.com/jsmsx.html

Lab

Lab 14: Introduction to Javascript & PHP

Javascript & PHP - Variables, Arrays & Basic Functions

Required Reading

• Check out these JavaScript tutorials at Quirksmode
• Check out PHP.net - Skim the site, get a sense of what is there.

Related Readings

• Javascript and XHTML
• Scripting vs. programming: is there a difference?

Lab

Lab 15: Variables, Arrays & Basic Functions

Javascript & PHP - Loops & Conditionals

Required Reading

• Javascript and HTML
• Scripting vs. programming: is there a difference?
• Check out these JavaScript tutorials at Quirksmode
• Check out PHP.net - Skim the site, get a sense of what is there.

Lab

Lab 16: Loops & Conditionals

Review of Concepts and How to do Web-Based Programming

Peter will be reviewing the programing concepts we learned last week. He will also show you how to use online web resources to help you learn how to program and what various types of programming languages do. Please don't hesitate to ask him questions so that he can give you a better sense of what might be useful.

Using Images and Visual Design

Using images well on websites can be tricky. Jeff will be covering how to use them effectively, and will touch on other issues surrounding visual design as well. More specifically, what he will be covering includes:

• A quick introduction to three professional web design/coding tools: <Oxygen/>, Adobe Fireworks, Adobe Dreamweaver
• An easy technique to come up with shape and color ideas for the construction of layouts
• Strategies for converting website concept graphics to code
• Some resources for coding (reset stylesheet, column templates, GNU icon, texture and scrap libraries, etc...)

Javascript & PHP - Functions

Required Reading

• Check out these JavaScript tutorials at Quirksmode
• Check out PHP.net - Skim the site, get a sense of what is there.

Lab

Lab 17: More Functions

Data Management & Hosting Your Own Site

Brief review of strategies for Data Management: organization, backup, etc. Also, brief overview of different options for personal web hosting.

Issues:

• Storage & Bandwidth - and the pricing model
• CGI & Scripting support (PHP, Perl, Java, etc.)
• DB support: MySQL, PosgreSQL, others?
• File access via the web vs. ssh/ftp access + web access
• Domain registration & management
• Email support
• Mailing list support, and more importantly, with what software
• Pricing model, generally: Setup Fees are often sketchy, pro-rated cancellation is also good, monthly fee vs. pay-for-use.
• Long-term reliability of the hosting
• Piecemeal services vs. all-in-one

Free Web Hosting (you get what you pay for)

• Tripod (Lycos)
• Yahoo! Geocities

Web Hosting Solutions:

• Nearly Free Speech.net
• Dreamhost
• Bluehost
• Go Daddy
• Laughing Squid
• A Small Orange
• Yahoo Small Business Web Hosting

Virtual Private Servers and Dedicated Servers

• Slicehost
• Dedicated Hosting Services
• Virtual Private Servers

Other hosting (-like) services

• Amazon EC2
• Google App Engine

Automatic Backups

• PC Magazine: The Best Online Backup Services (04.29.08)
• But also a question of business model - how long will these services last, and what do they do with your data when they fail?
• SOS Online Backup
• Mozy
• Elephant Drive
• Gmail Backup

Other Backup Solutions (hacks)

• Dropbox
• Opendrive

Lab

No Lab.

Functional Accessibility Design and Testing using Web Standards

Required Reading

• Section 508, Subpart B, §1194.22
• UIUC Web Accessibility Best Practices - Read all the Overview sections (skim the tables), skim the Requirements section
• How to design web accessible pages for the colorblind

If you have time, also take a look at the Functional Accessibility Evaluator

Related Readings (optional)

• The Accessibility Board Section 508
• Web Content Accessibility Guide
• Web Accessibility Initiative
• State of Illinois Web Accessibility Standards
• ITTATC links page to Disabilities Related Laws
• WebAIM.org. (2010). "Introduction to Web Accessibility."
• Butler, S. (2010). "An Idiot’s Guide to Accessible Website Design." Webdesignledger.com
=
• Smith, J. (2010). "The ADA and the Web: Concerns and Misconceptions." WebAIM Blog.
• WebAIM.org (2010). "Web Accessibility Gone Wild."
• Caldwell, B., Cooper, M., Reid, L.G., Vanderheiden, G. (2008). "Web Content Accessibility Guidelines (WCAG) 2.0" W3C.
• Information Services Access Board. (2010). "Draft Information and Communication Technology (ICT) Standards and Guidelines (Section 508)." Federal Register, Access-board.gov.
• Illinois Information Technology Accessiblity Act. (2002). "Implementation Guidelines for Web-based Information and Applications 1.0" Illinois Department of Human Services, dhs.state.il.us.

Accessibility Evaluators

• Cynthia - Section 508 Validitator
• Webxact
• The WAVE Accessibility Evaluation Tool
• Functional Accessibility Evaluator
• CITA firefox extension
  • Firefox site

Lab

Lab 20: Using Accessibility Validators.

Lab 20 will not be due.

Encoding, Unicode and HTML Entities

Required Reading

• Korpela, Jukka. (2001). A tutorial on character code issues Read up to the section titled "More about the character concept"
• Character references explained

Related Readings (Optional):

• UTF-8, UTF-16, UTF-32 & BOM
• Korpela, Jukka. A table of Character and entity references
• Korpela, Jukka. Test page for 8-bit encodings

Lab/Assignment

No Lab.

Final Project Presentations

Exact Scheduling to be determined