I. Required Readings

Items prefaced by *** will not be required for the Final Exam. The jQuery links are all required for the second test..

• Progressive disclosure
  • *** Progressive disclosure - excellent overview, some refs
  • *** Progressive disclosure – short overview. Reading more than this short overview is optional – the parent of this page has good information on user interface design and some interface design patterns.
  • *** Jacob Nielsen on progressive disclosure
• ***qUnit example
• ***qUnit home page and tutorial
• Programming style
  • Programming style guidelines
  • Test Driven Design - Ready, Aim, Fire, Finish
  • Sample Java code with style comments
  • Refactoring – cover only Consolidate Conditional Expression, Extract Method, Introduce Explaining Variable, Replace Nested Conditional with Guard Clauses
  • USE DESCRIPTIVE NAMES - after the code works, go back over each name. Will someone other than you know exactly what this method does or what this variable is used for. Don't be lazy with very short names: i, j, l, r. Much better is outerIndex, innerIndex, left, right.
• Simplified overview of CSS cascade and conflict resolution
• Selector example from Test 1. Use this to experiment with selectors.
• jQuery example - Expandable Tables
  • Example web page - tables in long form
  • Input and Output HTML + jQuery code
• Sample jQuery scripts
• Sample solution for Test 1
• Basic jQuery methods
• JQ solution to working tabs
• Development of JQ code for tabs
• Example of event binding to JQ code
• Javascript Strings - these behave very much like Strings in Java (exceptions: == used not .equals)
  • Tutorial
  • Reference page
  • String methods to learn in addition to p. 145 in our textbook: match, replace, toLowerCase, toUpperCase
• *** Notes on software testing – skip sections on: Class Testing, Good unit tests, What test cases.
• *** Tabs as a user interface
• jQuery
  • jQuery tutorial from W3C
  • jQuery cheat sheet
  • jQuery reference
  • jQuery textbook from UNC library
  Notes on CSS
• *** Power of HTML 5 and CSS 3 - excellent and short explanation of using CSS 3 selectors
• Fixed vs. Fluid vs. Elastic layouts
• Future of CSS - industrial revolution analogy (Smashing mag)
• Only a Business Card
• *** Blueprint cheat sheet – note that this is for an older version of BP. I'm not sure what differences there are, if any. This is an essential reference. I keep a copy close by at all times.
• *** Blueprint tutorial
• Graphic Design– from Robin Williams "The Non-designer's Design Book"
• Example of Basic HTML tags
• Yale Web Style Guide
• *** (none of the readings listed below will be on the first test). Readings on our essential tools – you will use these starting in the third week of the semester.
  • Firebug web development tool
    • Debugging with Firebug
      • How to debug CSS
      • Firebug & Web Developer FF extension for CSS editing - how to turn off/off individual styles for elements
  • W3C HTML validation service
  • Web development toolbar
• *** Special characters in HTML
• *** Student responsibilities
• *** Prof Hedlund's Info Sheet

Preview of coming attractions. These readings will be used later this semester.

• CSS
  • Best practices
    • 30 best practices
    • 10 best practices to improve your code
• Typography
  • Basic Principles – 'I Love Typography'
  • 8 simple ways to improve typography in your designs (Smashing Magazine)
  • The Web is 95% Typography
• Supplementary Tools
• Color picker
• Color scheme designer
• Misc Design
  • 5 coding solutions
  • 10 design techniques
  • Fancybox - I havn't tried this but it looks interesting.

II. Supplementary Readings

These readings supplement topics we will cover in this course. They may provide useful explanations and examples. Use them as you see fit.

• History of HTML
• HTML Basic Tutorial, W3 Schools
• How to Use Firebug - book available online at UNC library
• CSS reference
• Javascript
  • Javascript Tutorial, W3 Schools - WARNING: This tutorial contains some examples that are considered "Bad JavaScript Style". In particular, although convenient for quick examples, you really shouldn't ever use document.write
  • Javascript Reference, W3C
  • Javascript Reference, Netscape
  • Javascript: The definitive guide, 5th ed. Available vis UNC library.

III. Further Study

These readings go above and beyond what will be covered in this course.

Online magazines covering many aspects of the web.

• Smashing Magazine
• A List Apart

Delving deeper into the technology of web pages.

• Smashing CSS by Eric A. Meyer. If you aspire to be an expert in CSS, this is the book for you.
• Introducing HTML5, 2nd ed. by Bruce Lawson & Remy Sharp, 2012. New Riders Pub.

IV. Foundations

No quick reads here. These are the primary references for each of their topics. They are detailed and full of information and concepts that will not fade as the technology of the web advances on.

• Usability
  • Don't make me think by Steve Krug, 200. New Riders Pub. An excellent and practical guide to web site design and usability.
  • Jacob Nielsen's web site is a key resource from the guru of usability.
• User interface design
  • "About Face 3.0" by Alan Cooper, Robert Reimann, & David Cronin, 2007, Wiley Pub.
  • Designing visual interfaces by Kevin Mullet & Darrell Sano. Excellent guidelines and advice for the creation and use of visual imagery. Not specifically for the web.
• Typography
  • The elements of typographic style, 2nd ed. by Robert Bringhurst, 1999, Hartley & Marks Pub. This is a classic work on typography. Not directly applicable to the web, but a thorough discussion of the fundamentals of typography. See also Elements of typographic style applied to the web by Richard Rutter.
  • Making digital type look good by Bob Gordon, 2001, Ilex Press. An excellent and detailed look at web typography.
• Envisioning information by Edward Tufte, 1990.