COAP:COAP-3120/week2: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 46: Line 46:
Resources:
Resources:
* Apprendix C of the textbook
* Apprendix C of the textbook
*  
* [http://reference.sitepoint.com/css/selectorref CSS Selectors] (Sitepoint)


'''Validation'''
'''Validation'''
Line 61: Line 61:
(2) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"
(2) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"


Tip: Use Codeburner (SitPoint), the Textbook appendices, or another good CSS reference.
Tip: Use Codeburner (SitePoint), the Textbook appendices, or another good CSS reference.


=== Wednesday ===
=== Wednesday ===
Line 70: Line 70:
=== Homework 1 ===
=== Homework 1 ===


* Styling of a text document, details TBA
Subject: Styling of a text document
 
Task:
* Please style a text-centered HTML file
* You can choose any HTML text (or other source) you like, '''under the condition that you made significant modifications to the original CSS'''.
However, we suggest using an XHTML e-book from an online repository such as Gutenberg (http://www.gutenberg.org/)


'''''Requirements'''''
'''''Requirements'''''


(1) Your text should include at least the following features
(1) Your min-project (homework) should include at least the following features:


* An external style sheet (make sure that there are no internal unintentional overrides)
* HTML An external style sheet (make sure that there are no internal unintentional overrides)
* margins
* Text indentations
* Line spacings
* Line spacings
* Appropriate font size for various text elements (in particular titles and paragraphs)
* Appropriate font sizes and styles for various text elements (in particular for titles and paragraphs)
* At least one pseudo tag selector (e.g. p:first-letter or :before)
* At least one pseudo tag selector (e.g. p:firstline p:first-letter or :before)
* At least a sibling selector (A + B)
* At least a sibling selector (A + B)
* A small universal/global margin


(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.
* 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.


'''''Due'''''
'''''Due'''''
Line 90: Line 98:


'''''Submission'''''
'''''Submission'''''
* Upload both the HTML file and the CSS file to the world classroom (hw 1)
* Upload the HTML file, the CSS file and the report 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 ....
* 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%

Revision as of 08:33, 31 October 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

... under construction .....

COAP 3120 Week 1 program

Main topic

  • Web typography and formatting large simple 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
  • Handout: HTML

Selectors

  1. Universal/global selector (using * or body selector)
  2. Using HTML tag names
  3. Using "position" of tages (children, siblings)
  4. Using pseudo-tags
  5. Basic cascading and inheritance principles (last rule found will win, children inherit from parents)

CSS properties for formatting text

  • Web typography (in particular font-family, using web-safe fonts, using fallbacks)
  • Units (pt, cm, %, em/x, font-size keywords)
  • Line spacing: line-height property
  • Negative and positive indentation: text-indent property
  • Text filling: text-align property
  • Underlining etc: text-decoration property
  • Margins (sometimes used as alternative for indentation)
  • Shortcuts

Resources:

Validation

Install (if not already done so)

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"

Tip: Use Codeburner (SitePoint), the Textbook appendices, or another good CSS reference.

Wednesday

TBA (dealing with text, part II)


Homework 1

Subject: Styling of a text document

Task:

  • Please style a text-centered HTML file
  • You can choose any HTML text (or other source) you like, under the condition that you made significant modifications to the original CSS.

However, we suggest using an XHTML e-book from an online repository such as Gutenberg (http://www.gutenberg.org/)

Requirements

(1) Your min-project (homework) should include at least the following features:

  • HTML An external style sheet (make sure that there are no internal unintentional overrides)
  • Text indentations
  • Line spacings
  • Appropriate font sizes and styles for various text elements (in particular for titles and paragraphs)
  • At least one pseudo tag selector (e.g. p:firstline p:first-letter or :before)
  • At least a sibling selector (A + B)
  • A small universal/global margin

(2) A 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.

Due

  • Monday week 3 (before start of class)

Submission

  • Upload the HTML file, the CSS file and the report to the world classroom (hw 1)
  • 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

Manual

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)

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3120/week2&oldid=35760"