COAP:COAP-3120/week2: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(19 intermediate revisions by the same user not shown)
Line 46: Line 46:
'''Classroom activities'''
'''Classroom activities'''
* Become familiar with Kompozer and Notetab
* Become familiar with Kompozer and Notetab


=== Wednesday ===
=== Wednesday ===
Line 58: Line 59:
* Margins: '''margin-left''', '''margin-right''', etc.
* Margins: '''margin-left''', '''margin-right''', etc.
* Shortcuts
* Shortcuts
Example file used:
* http://tecfa.unige.ch/guides/css/ex/just-so-stories.html
* http://tecfa.unige.ch/guides/css/ex/just-so-stories.css
* Original: http://www.gutenberg.org/ebooks/2781


'''Classroom activities'''
'''Classroom activities'''
* Become familiar with Kompozer and Notetab


(1) Find a long text you want to work on. HTML must be clean and simple. Suggestions:
(1) Find a long and '''simple''' text you want to work on. Since HTML should be clean and simple, we suggest to download an HTML file from
*  http://www.gutenberg.org/
*  http://www.gutenberg.org/
* Save the file to a appropriate directory
(2) Get the following CSS file
* http://tecfa.unige.ch/guides/css/ex/just-so-stories.css
* Save it to the same directory as the HTML


(2) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"
(3) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"
* Create a link to the CSS file in the HTML, e.g. copy and adjust the following line:
<link rel="stylesheet" href="hw1-style.css" type="text/css">
* Open the CSS file in your favorite editor and start making modifications


Tip: Use Codeburner (SitePoint), the Textbook appendices, or another good CSS reference.
Tips:  
* Consider using the [[CSS text styling tutorial]] for guidance
* If you are more ambitious, use Codeburner (SitePoint), the Textbook appendices, or another good CSS reference.
* You may have to make minor modifications to the HTML file, e.g. add class attributes or ''div'' wrappers
* Validate both HTML and CSS !


=== Homework 1 ===
=== Homework 1 ===
Line 77: Line 94:
* You can choose any HTML text (or other source) you like, '''under the condition that you make significant modifications to the original CSS'''.
* You can choose any HTML text (or other source) you like, '''under the condition that you make 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/)
However, we suggest using an XHTML e-book from an online repository such as Gutenberg (http://www.gutenberg.org/)
* Suggestion: Start from the CSS file shown in class (http://tecfa.unige.ch/guides/css/ex/just-so-stories.css)
 
'''Suggestions:'''
* Start from the CSS file shown in class (http://tecfa.unige.ch/guides/css/ex/just-so-stories.css)
* Validate both HTML and CSS
* Double-check the requirements below before you turn in your homework.


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


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


* HTML file with an external style sheet (make sure that there are no internal unintentional overrides)
* HTML file with an external or internal style sheet (make sure that there are no internal unintentional CSS overrides)
* Text indentations and margins
* Text indentations
* Text margins
* Line spacings
* Line spacings
* Appropriate font sizes and styles for various text elements (in particular for 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:firstline 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  
Line 95: Line 116:
* It should include references/sources used (in particular to the original HTML file). Be careful to respect general Webster rules about plagiarism.
* 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.
* It should shortly explain what you did in your CSS.
* The report can be turned in any format (e.g. HTML, PDF or Word).


'''''Due'''''
'''''Due'''''
* '''Wednesday''' week 3 (before start of class)
* '''Wednesday''' week 3 ('''before''' start of class)


'''''Submission'''''
'''''Submission'''''
* Upload the HTML file, the CSS file and the report to the world classroom (hw 1)
* Upload (a) the HTML file, (b) the CSS file (if external) and (c) 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 ....
* 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 ....
* '''Make sure that the upload worked''' (e.g. don't forget to hit the submit button)


'''''Evaluation criteria'''''
'''''Evaluation criteria'''''
Line 109: Line 132:
* Technical quality (CSS structure and documentation, valid HTML and CSS) - 20%
* Technical quality (CSS structure and documentation, valid HTML and CSS) - 20%
* 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 % (only 2 days late = 5%)


=== Alternative homework for CSS experts ===
=== Alternative homework for CSS experts ===


* To be negotiated ...
'''Homework for T.B''' (to be discussed)
* Create a '''commented list of resources''' about CSS compatibility.
* In particular:
** Try to find resources that deal with either "implementation status" (implemented/partial/not yet) and/or "buggyness" (implementation errors).
** Focus on recent and last generation browsers (e.g. IE8 / IE9 and rather skip older versions)
** Also try to find resources that offer "work-around solutions".
* Edit [[CSS compatibility]]
 
Note: Don't yet start writing about CSS compatibility. First stage (homework 1) is finding resources.
 


=== Reading ===
=== Reading, other resources and online services ===


'''Manual'''
'''Manual'''
Line 122: Line 154:
'''Handouts'''
'''Handouts'''
* [[CSS text styling tutorial]] ('''This is minimal suggested reading for getting the homework done''')
* [[CSS text styling tutorial]] ('''This is minimal suggested reading for getting the homework done''')
* [[Font readability]] (optional)
* http://tecfa.unige.ch/guides/css/ex/just-so-stories.html (example HTML file)
* http://tecfa.unige.ch/guides/css/ex/just-so-stories.html (example HTML file)
* http://tecfa.unige.ch/guides/css/ex/just-so-stories.css (associated CSS file)
* http://tecfa.unige.ch/guides/css/ex/just-so-stories.css (associated CSS file)
Line 137: Line 170:
* 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/
* http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
'''Validation'''
* HTML validator (alternatively, use the FF exension): http://validator.w3.org/
* CSS validator: http://jigsaw.w3.org/css-validator/
'''Tools'''
* See the [[COAP:COAP-3120|course home page]] for editing tools and browser extensions


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

Latest revision as of 09:14, 7 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 2 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
  • Handout: HTML

Selectors

  1. Universal/global selector (using * or body selector)
  2. Using HTML tag names
  3. Using "position" of tags (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)

Resources:

Validation

Install (if not already done so)

Classroom activities

  • Become familiar with Kompozer and Notetab


Wednesday

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 of the first line: text-indent property
  • Text filling: text-align property
  • Underlining etc: text-decoration property
  • Margins: margin-left, margin-right, etc.
  • Shortcuts

Example file used:

Classroom activities

(1) Find a long and simple text you want to work on. Since HTML should be clean and simple, we suggest to download an HTML file from

(2) Get the following CSS file

(3) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"

  • Create a link to the CSS file in the HTML, e.g. copy and adjust the following line:
<link rel="stylesheet" href="hw1-style.css" type="text/css">
  • Open the CSS file in your favorite editor and start making modifications

Tips:

  • Consider using the CSS text styling tutorial for guidance
  • If you are more ambitious, use Codeburner (SitePoint), the Textbook appendices, or another good CSS reference.
  • You may have to make minor modifications to the HTML file, e.g. add class attributes or div wrappers
  • Validate both HTML and CSS !

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 make 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/)

Suggestions:

Requirements

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

  • HTML file with an external or internal style sheet (make sure that there are no internal unintentional CSS overrides)
  • Text indentations
  • Text margins
  • 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)

(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.
  • The report can be turned in any format (e.g. HTML, PDF or Word).

Due

  • Wednesday week 3 (before start of class)

Submission

  • Upload (a) the HTML file, (b) the CSS file (if external) and (c) 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 ....
  • 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%)

Alternative homework for CSS experts

Homework for T.B (to be discussed)

  • Create a commented list of resources about CSS compatibility.
  • In particular:
    • Try to find resources that deal with either "implementation status" (implemented/partial/not yet) and/or "buggyness" (implementation errors).
    • Focus on recent and last generation browsers (e.g. IE8 / IE9 and rather skip older versions)
    • Also try to find resources that offer "work-around solutions".
  • Edit CSS compatibility

Note: Don't yet start writing about CSS compatibility. First stage (homework 1) is finding resources.


Reading, other resources and online services

Manual

Handouts

Textbook

  • Chapter 2, The Bits that make up a Style Sheet
  • Chapter 3, Selectors
  • 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)

Validation

Tools

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