COAP:COAP-3120/week3: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 4: Line 4:


Main topic: CSS colors and background images
Main topic: CSS colors and background images


=== Monday ===
=== Monday ===
Line 10: 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 page: http://tecfa.unige.ch/guides/css/ex/css-page-background.html
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 enter the URLS with a short comment to the discussion blogs in the world classrom (menu to the left)
* 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 either a poem or a short manifesto. (to be discussed)
* 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 ===
=== Wednesday ===


* Hands-on homework 2
* Hands-on homework 2 (see below)


=== Homework 2 ===
=== Homework 2 ===


Create an HTML page
'''''Project summary''''':
* with a nice background using color and a background image
 
* insert background images within HTML elements (e.g. a "div")
(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


Details TBA on Wednesday
'''''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 ===
=== Reading and other resources ===


; Textbook
; Textbook
Line 39: 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
Line 45: Line 76:
* [http://en.wikipedia.org/wiki/X11_color_names X11 color names] (same as CSS3)
* [http://en.wikipedia.org/wiki/X11_color_names X11 color names] (same as CSS3)
* [http://en.wikipedia.org/wiki/List_of_colors List of colors] (huge !)
* [http://en.wikipedia.org/wiki/List_of_colors List of colors] (huge !)
; Validation
* HTML validator (alternatively, use the FF exension): http://validator.w3.org/
* CSS validator: http://jigsaw.w3.org/css-validator/


[[Category:COAP 3120]]
[[Category:COAP 3120]]

Latest revision as of 18:14, 9 November 2011

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

Example pages:

(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
Validation
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3120/week3&oldid=36138"