COAP:COAP-3120/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(8 intermediate revisions by the same user not shown)
Line 5: Line 5:
Main topic: '''Media and alternative style sheets'''
Main topic: '''Media and alternative style sheets'''


== Monday ==
=== Monday ===


'''Homework 1 and 2 feedback'''
==== Homework 1 and 2 feedback ====


'''Main CSS topics'''
* Globally speaking: good work
* Dealing with media: screen, print and handheld
* http://tecfa.unige.ch/guides/te/coap3120/hw2011/ (Access restricted, ask for the login and password)
* Alternative style sheets
 
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. <nowiki><code> <br/> </code></nowiki>
 
(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:
Handout:
* [[CSS media and alternative style sheets tutorial]]
* [[CSS media and alternative style sheets tutorial]]


== Wednesday - Mid term exam ==
Classroom activity:
* Start working on homework 5. You can start from the following template (or just copy the HTML "link" code)
<source lang="XML">
<!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>
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 will take place on Wednesday week 5
Line 38: Line 97:
* Selectors, in particular simple ones (tag names), siblings, children, class and id
* Selectors, in particular simple ones (tag names), siblings, children, class and id
* Every '''property''' that was part of homework one, two and three
* 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
* 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.
* Understand some simple cascading principles: E.g. that usually "last found" will win, and "inline" before "embedded style" or loaded style sheet.
Line 44: Line 104:
* 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)
* 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'''
'''Handouts of interest to the exam'''
* [[CSS text styling tutorial]] (several textbook chapters summarized with respect to week 2 topic)
* [[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 color and background tutorial]] (week 3 topic, summarizes chapter 7 or textbook and adds extra CSS3 information)
* [[CSS box model tutorial]] (week 4)
* [[CSS box model tutorial]] (week 4)
* [[CSS float 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:'''''
* http://tecfa.unige.ch/guides/css/ex/media
'''''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:
* [[CSS media and alternative style sheets tutorial]]
Textbook:
* Chapters 15 and 18


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

Latest revision as of 22:54, 22 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 5 program and mid term

Main topic: Media and alternative style sheets

Monday

Homework 1 and 2 feedback

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:

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

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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3120/week5&oldid=36431"