COAP:COAP-3120/week2: Difference between revisions
Jump to navigation
Jump to search
m (→Homework 1) |
mNo edit summary |
||
| Line 16: | Line 16: | ||
* Use browser extensions for checking HTML and CSS validity, and analyzing pages | * Use browser extensions for checking HTML and CSS validity, and analyzing pages | ||
* Think about good style and good visual style | * Think about good style and good visual style | ||
=== Monday === | === Monday === | ||
| Line 45: | Line 46: | ||
TBA (dealing with text, part II) | TBA (dealing with text, part II) | ||
=== Homework 1 === | === Homework 1 === | ||
| Line 58: | Line 60: | ||
* Line spacings | * Line spacings | ||
* Appropriate font size for various text elements (in particular titles and paragraphs) | * Appropriate font size for various text elements (in particular titles and paragraphs) | ||
* At least one pseudo tag selector | |||
(2) A short report | (2) A short report | ||
* The report should shortly explain your design, e.g. what you aim to achieve and how you did it. | * The report should shortly explain your design, e.g. what you aim to achieve and how you did it. | ||
'''''Due''''' | |||
* Monday week 3 (before start of class) | * Monday week 3 (before start of class) | ||
'''''Submission | '''''Submission''''' | ||
* Upload both the HTML file and the CSS file to the world classroom (hw 1) | * Upload both the HTML file and the CSS file to the world classroom (hw 1) | ||
* Upload the report (in any format you like, HTML is recommended) | * Upload the report (in any format you like, HTML is recommended) | ||
* If you use other assets (e.g. pictures) you also must upload these. However, we suggest working with a text that doesn't include any .... | * If you use other assets (e.g. pictures) you also must upload these. However, we suggest working with a text that doesn't include any .... | ||
''''''Evaluation criteria | ''''''Evaluation criteria''''' | ||
* Requirements (presence of CSS elements) - 20% | * Requirements (presence of CSS elements) - 20% | ||
* Visual design / originality - 30% | * Visual design / originality - 30% | ||
| Line 77: | Line 80: | ||
* Presence and quality of the report - 10% | * Presence and quality of the report - 10% | ||
* On time - 10 % (minus 5% for 2 days late, 10% for more) | * On time - 10 % (minus 5% for 2 days late, 10% for more) | ||
=== Reading === | === Reading === | ||
| Line 91: | Line 95: | ||
* http://www.alistapart.com/articles/on-web-typography/ | * http://www.alistapart.com/articles/on-web-typography/ | ||
* http://www.w3schools.com/cssref/css_websafe_fonts.asp | * http://www.w3schools.com/cssref/css_websafe_fonts.asp | ||
* | * http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ | ||
[[Category:COAP 3120]] | [[Category:COAP 3120]] | ||
Revision as of 11:54, 30 October 2011
... under construction .....
COAP 3120 Week 1 program
'Main topic'
- Web typography and formatting of large texts
Main learning goals
- Be able to include CSS in an HTML document: external files, internal style sheets, @import, inline
- Understand CSS rules: Selectors and properties
- Be able to format longer text
- Be able to use HTML elements made for CSS (div and span)
- Use of text/HTML/CSS editors
- Use browser extensions for checking HTML and CSS validity, and analyzing pages
- Think about good style and good visual style
Monday
HTML principles
- The three dominant HTML families (HTML 4x, XHTML 1x, HTML5), a short introduction
- The (X)HTML div and span tags
- HTML 5 tags for text: section and article
Selectors
- tags, position of tages, pseudo-tags
CSS properties for formatting text
- Web typography (fonts)
- Units
- Line spacing and margins
Classroom activities
(1) Find a long text you want to work on. HTML must be clean and simple. Suggestions:
(2) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"
Wednesday
TBA (dealing with text, part II)
Homework 1
- Styling of a text document, details TBA
Requirements
(1) Your text should include at least the following features
- An external style sheet (make sure that there are no internal unintentional overrides)
- margins
- Line spacings
- Appropriate font size for various text elements (in particular titles and paragraphs)
- At least one pseudo tag selector
(2) A short report
- The report should shortly explain your design, e.g. what you aim to achieve and how you did it.
Due
- Monday week 3 (before start of class)
Submission
- Upload both the HTML file and the CSS file to the world classroom (hw 1)
- Upload the report (in any format you like, HTML is recommended)
- If you use other assets (e.g. pictures) you also must upload these. However, we suggest working with a text that doesn't include any ....
'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 % (minus 5% for 2 days late, 10% for more)
Reading
Textbook
- Chapter 2, The Bits that make up a Style Sheet
- Chapter 3, Selectors (only pp 39-49)
- Chapter 5, Applying Font Faces (only 73-82)
- Chapter 6, Manipulating the Display of Text (only: “Line height” section)
- Chapter 8, The Box Model (only: Margins section)
About web fonts and web typography (optional reading)