COAP:COAP-3120/week5
Jump to navigation
Jump to search
COAP 3120 Week 5 program and mid term
Main topic: Media and alternative style sheets
Monday
Homework 1 and 2 feedback
- Globally speaking: good work
- http://tecfa.unige.ch/guides/te/coap3120/hw2011/ (Access restricted, ask for the login and password)
Problems seen and possible improvements:
(1) HTML and CSS validity Make sure that your HTML and CSS is valid. Most students do ok, some really need to improve.
- HTML declaration will determine how the browser will render the contents. In particular, you have to avoid quirks mode
- Bad structure will confuse CSS
- Bad CSS (e.g. wrong values) will inhibit certain rules to work as you expect.
- in XHTML, all tags must be closed (or self-closed, e.g. <code> <br/> </code>
(2) Test the page with various screen width
- A good page must display well in any resolutions
(3) Reports
- Add more information about your design intents (few do that well)
- Add contextual information (name, date)
- Add references
- Add questions and problems (if you like, this way I may be able to help you improving maybe)
(4) Open issues
- Some problems are due to the fact that you will have to learn more about layouting, positioning, etc. Therefore, no problem :)
Dealing with media and alternative styles sheets
- Screen, print and handheld media. What's different ?
- Alternative style sheets for visually impaired people
Handout:
Classroom activity:
- Start working on homework 5. You can start from the following template (or just copy the HTML "link" code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Change this title</title>
<link rel="styleheet" title="Base style" type="text/css" href="main-style.css" />
<link rel="stylesheet" title="Normal screen style" type="text/css"
media="screen" href="screen-style.css"/>
<link rel="alternate stylesheet" title="Alternative style" type="text/css"
media="screen" href="big-style.css"/>
<link rel="stylesheet" title="Print style" type="text/css"
media="print" href="print-style.css"/>
<link rel="stylesheet" title="Mobile devices" type="text/css"
media="handheld" href="handheld-style.css"/>
</head>
<body>
</body>
</html>
Source files:
- http://tecfa.unige.ch/guides/css/ex/media/css-media-alternate-template.html (template above)
- http://tecfa.unige.ch/guides/css/ex/media/css-media-and-alternative-styles.html (full example)
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
- Floats (i.e. you should be able to create a floating box within a text box, not part of hw 3)
- 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)
- CSS tutorial (short CSS summary)
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 three styles for screen, print and handheld.
- Create an additional, forth style 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 style sheets, a single external style with @media instructions, or internal styles with @media instructions.
- However, you need at least an extra external style sheet for the alternative style sheets.
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. Be careful to respect general Webster rules about plagiarism.
- It should shortly explain what you did in your CSS.
- It should point out problems you encountered.
- You can use any format for the report (e.g. HTML, PDF or Word).
Example HTML+CSS:
Due:
- Wednesday week 6 before class
Submission:
- Upload (a) the HTML file, (b) the CSS file(s), (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
Handout:
Textbook:
- Chapters 15 and 18