COAP:COAP-3120/week5

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 5 program and mid term

Main topic: Media and alternative style sheets

Monday

Homework 1 and 2 feedback

Main CSS topics

• Dealing with media: screen, print and handheld
• Alternative style sheets

Handout:

• CSS media and alternative style sheets tutorial

Wednesday - Mid term exam

The exam will take place on Wednesday week 5

• The exam is open book and open Internet
• Topics: Everything that was part of homework one, two and three (including underlying HTML)

HTML

• External, internal and inline CSS style
• Tags:
  • div and span
  • h1, h2, h3, h4
  • p, blockquote, pre
  • ol, ul, il
• HTML declarations on top
• HTML validation
• Character set declaration

CSS

• Selectors, in particular simple ones (tag names), siblings, children, class and id
• Every property that was part of homework one, two and three
• CSS values: length, colors, percentages and keywords used with these properties
• Understand some simple cascading principles: E.g. that usually "last found" will win, and "inline" before "embedded style" or loaded style sheet.

Recommended reading (textbook chapters)

• Chapters 1,2,3,5,6,7,8,9 (scan the text quickly and only read sections about topics that you need and don't understand)

Handouts of interest to the exam

• CSS text styling tutorial (several textbook chapters summarized with respect to week 2 topic)
• CSS color and background tutorial (week 3 topic, summarizes chapter 7 or textbook and adds extra CSS3 information)
• CSS box model tutorial (week 4)
• CSS float tutorial (week 4)

Homework 5

Project summary:

(1) Create an HTML page plus CSS style.

• Create CSS variants for screen, print, handheld and visually impaired people
• You can reuse homework 1, 2 and 3 contents as much as you like

(2) A short report describing and discussing your design

Requirements:

• Create styles for screen, print and handheld.
• Create an additional, alternative screen style sheet for visually impaired people. All you need to do is changing font-size for the "screen" styles.
• For the media variants, you either can use three or four external stylesheets, a single external style with @media instructions, or internal styles with @media instructions.

• You can either use @media instructions or several external style sheets
• However, you need at least an extra external style sheet.

The short report:

• It should shortly explain your design, e.g. what you aimed to achieve for all media !
• 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.
• You can use any format for the report (e.g. HTML, PDF or Word).

Example HTML+CSS:

• http://tecfa.unige.ch/guides/css/ex/media

Due:

• Wednesday week 6

Submission:

• Upload (a) the HTML file, (b) the CSS file(s) (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%)