COAP:COAP-3120/week2: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
<categorytree hideprefix=always mode="all" depth=1 style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3120</categorytree>
<categorytree hideprefix=always mode="all" depth=1 style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3120</categorytree>


... under construction .....
== COAP 3120 Week 2 program ==
 
== COAP 3120 Week 1 program ==


'''Main topic'''
'''Main topic'''
Line 23: Line 21:


* The three dominant HTML families (HTML 4x, XHTML 1x, HTML5), a short introduction
* 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]]
* Handout: [[HTML]]


Line 30: Line 26:
# Universal/global selector (using * or body selector)
# Universal/global selector (using * or body selector)
# Using HTML tag names
# Using HTML tag names
# Using "position" of tages (children, siblings)
# Using "position" of tags (children, siblings)
# Using pseudo-tags
# Using pseudo-tags
# Basic cascading and inheritance principles (last rule found will win, children inherit from parents)
# Basic cascading and inheritance principles (last rule found will win, children inherit from parents)
Line 37: Line 33:
* Web typography (in particular '''font-family''', using web-safe fonts, using fallbacks)
* Web typography (in particular '''font-family''', using web-safe fonts, using fallbacks)
* Units (pt, cm, %, em/x, font-size keywords)
* 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:
Resources:
* Apprendix C of the textbook
* Appendix C of the textbook
*  
* [http://reference.sitepoint.com/css/selectorref CSS Selectors] (Sitepoint)


'''Validation'''
'''Validation'''
Line 53: Line 43:
* [http://users.skynet.be/mgueury/mozilla/index.html HTML validator]
* [http://users.skynet.be/mgueury/mozilla/index.html HTML validator]
* For CSS, use http://jigsaw.w3.org/css-validator (you can install  
* For CSS, use http://jigsaw.w3.org/css-validator (you can install  
'''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:
* 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'''


(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) Start working on homework 1, i.e. create a layout that is both visually pleasing and "readable"
(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


Tip: Use Codeburner (SitPoint), the Textbook appendices, or another good CSS reference.
(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


=== Wednesday ===
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 !


TBA (dealing with text, part II)
=== Homework 1 ===


Subject: Styling of a text document


=== Homework 1 ===
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/)


* Styling of a text document, details TBA
'''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 text should include at least the following features
(1) Your mini-project (homework) should include at least the following features:


* 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)
* margins
* Text indentations
* Text margins
* 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)


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


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


'''''Submission'''''
'''''Submission'''''
* Upload both the HTML file and the CSS file 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)
* 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 ....
* '''Make sure that the upload worked''' (e.g. don't forget to hit the submit button)


''''''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 100: 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%)


=== Reading ===
=== 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'''
'''Manual'''
* Install [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] if not already done so and/or use  
* Install [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] if not already done so and/or use  
'''Handouts'''
* [[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.css (associated CSS file)


'''Textbook'''
'''Textbook'''
* Chapter 2, The Bits that make up a Style Sheet
* Chapter 2, The Bits that make up a Style Sheet
* Chapter 3, Selectors (only pp 39-49)
* Chapter 3, Selectors
* Chapter 5, Applying Font Faces (only 73-82)
* Chapter 5, Applying Font Faces (only 73-82)
* Chapter 6, Manipulating the Display of Text (only: “Line height” section)
* Chapter 6, Manipulating the Display of Text (only: “Line height” section)
Line 119: 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 10: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"