Informal Overview Comp 416

Topics

Web page design and implementation

Foundations

• External –Typographic design: alignment, proximity, contrast, repitition
• Internal – Separation of: content, structure, presentation, behavior

Technologies – HTML5, CSS3

Topics not covered

• Graphical design
• Use of media – audio, video, etc.
• Web site design in the large
  • Information architecture
  • Site organization
  • Searching strategies

Web page behavior

Foundations

• Events & event driven programming
• Principles of human computer interaction
• Client-server interaction
• Testing

Technologies – Javascript, jQuery, qUnit

Web Techniques

What are some important web page behaviors that a web programmer should be able to implement?

• Rollovers on links and buttons
• Fade in / out
• Expandable / collapsible content
• Tabs and accordian
• Displays
  • Tooltips
  • Netflix - AJAX
• Misc: sliders, forms, drop down menus
• Local storage
• Not covered: media (video, audio), canvas

Dimensions of Web Site Design

• I. Content – text, images, video, etc.
• II. Structure
  • In the large
    • Information architecture
    • Searching strageties
  • In the small
    • Page organization – headings, sections, paragraphs
    • Relationship between pages
      • Many short pages or a few long ones?
      • How are the pages linked together?
• III. Presentation
  • Foundations
    • Graphical design
    • Typographic design
    • Use of media
• IV. Behavior
  • Foundation – Computer-human interaction

Tools & Technologies for Comp 416

• HTML5 & CSS3 (Blueprint)
• Javascript & jQuery (qUnit)
• JSON
• AJAX & CGI
• PHP – may be covered at end of semester
• Databases – probably will not be covered

What makes web programming different?

• Document creation and presentation
• Asynchronous & event driven
• Semi-structured data – JSON, XML
• Loose coupling between components
• Client-server division of labor

The Next Four Weeks

During the first month of the semester, we will cover the following topics:

• HTML5
• CSS3 – emphasis on selectors
• Basics of page design
• Technical typography fundamentals

The primary readings will be:

• Textbook – chapters 1, 2, and 3
• Yale Style Guide – chapters 6–9

There will also be short readings on the web that supplement this material.

The remainder of the semester will be spent on Javascript, jQuery, and web page behavior.