COAP:COAP-3120/week3: Difference between revisions
Jump to navigation
Jump to search
m (→Reading) |
m (→Monday) |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 11: | Line 11: | ||
* We will finish working on homework 1 project as defined on [[COAP:COAP-3120/week2|Week 2]] | * We will finish working on homework 1 project as defined on [[COAP:COAP-3120/week2|Week 2]] | ||
'''Introduction to color models and CSS backgrounds''' | '''(2) Introduction to color models and CSS backgrounds''' | ||
* Handout: [[CSS color tutorial]] | * 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) | |||
'''Preparation for Wednesday''' | '''(3) Preparation for Wednesday''' | ||
* Find 2 good web page examples that use colors and pictures as background and | * 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 | * 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: | '''''Due:''''' | ||
* Wednesday week 4 | * 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 === | === Reading and other resources === | ||
| Line 43: | Line 69: | ||
; Handout | ; Handout | ||
* [[CSS color tutorial]] | * [[CSS color and background tutorial]] | ||
* http://tecfa.unige.ch/guides/css/ex/css-page-background.html | |||
; Color tables at Wikipedia | ; Color tables at Wikipedia | ||
Latest revision as of 18:14, 9 November 2011
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:
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
- 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/