COAP:COAP-3120/week3

COAP 3120

COAP-3120

COAP-3120/week1

COAP-3120/week2

COAP-3120/week3

COAP-3120/week4

COAP-3120/week5

COAP-3120/week6

COAP-3120/week7

COAP-3120/week8

COAP 3120 Week 3 program

Main topic: CSS colors and background images

Monday

(1) Week 2 - continued

• We will finish working on homework 1 project as defined on Week 2

(2) Introduction to color models and CSS backgrounds

• Handout: CSS color and background tutorial

Example pages:

• http://tecfa.unige.ch/guides/css/ex/css-page-background.html (ugly, just-for-demo)
• http://tecfa.unige.ch/guides/css/ex/css-page-background-example.html (homework like)

(3) Preparation for Wednesday

• Find 2 good web page examples that use colors and pictures as background and get some inspiration from them.
• Think about some content that you would like to style on Wednesday. I suggest working with a poem, a list of principles or a short manifesto.

Wednesday

• Hands-on homework 2 (see below)

Homework 2

Project summary:

(1) Create an HTML page plus CSS style.

• The page should include a short text, e.g. a manifesto, a set of principles or a poem ...

(2) A short report describing and discussing your design

Requirements:

The CSS must include:

• A nice background using color and/or a background image
• At least one background image within an HTML element other than "body" or "html" (e.g. a "div" or a "p")

The short report:

• It should shortly explain your design, e.g. what you aimed to achieve
• It should include references/sources used (in particular to the original HTML file). Be careful to respect general Webster rules about plagiarism.
• It should shortly explain what you did in your CSS.
• The report can be turned in any format (e.g. HTML, PDF or Word).

Example HTML+CSS:

• http://tecfa.unige.ch/guides/css/ex/css-page-background-example.html

Due:

• Wednesday week 4

Submission:

• Upload (a) the HTML file, (b) the CSS file (if external), (c) all the picture files and (d) the report to the world classroom (hw 1). Creating a *.zip file of everything is the easiest solution.
• Make sure that the upload worked (e.g. don't forget to hit the submit button)

Evaluation criteria:

• Requirements (presence of CSS elements) - 20%
• Visual design / originality - 30%
• Usability - 10% (is the text readable ?)
• Technical quality (CSS structure and documentation, valid HTML and CSS) - 20%
• Presence and quality of the report - 10%
• On time - 10 % (only 2 days late = 5%)

Reading and other resources

Textbook

Read Chapter 7 (Background Colors and Images)

Handout

• CSS color and background tutorial
• http://tecfa.unige.ch/guides/css/ex/css-page-background.html

Color tables at Wikipedia

• Web colors (includes lists of colors, including a web-safe palette)
• X11 color names (same as CSS3)
• List of colors (huge !)

Validation

• HTML validator (alternatively, use the FF exension): http://validator.w3.org/
• CSS validator: http://jigsaw.w3.org/css-validator/