COAP:COAP-3120/week4: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(26 intermediate revisions by the same user not shown)
Line 3: Line 3:
== COAP 3120 Week 4 program ==
== COAP 3120 Week 4 program ==


(under construction ....)
Main topic: '''The CSS box model and layouting with float:left'''
 


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


Main topic: '''The CSS box model and layouting with float:left'''
; Homework 2 (continued ... if needed)
 
; Homework 2
* Q/R Homework 2
* Q/R Homework 2


; Boxes
; CSS Boxes
* Handouts: [[CSS box model tutorial]]
* Handouts: [[CSS box model tutorial]] and [[CSS float tutorial]]
* Also see the textbook ...


; Analyzing CSS
; Analyzing CSS
* [[Analyzing CSS tutorial]]
* Handout: [[Analyzing CSS tutorial]]
* Install both [https://addons.mozilla.org/en-US/firefox/addon/view-source-chart/?src=search View Source Chart] and [https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web Developer] Firefox extensions if not already done so.
 
; Classroom activity
* Identify a web page that you like in terms of its layout and visual design
* Look at the HTML and the CSS of this page using the using web developer tools (continued on Wed)


; Classroom activity
''' Layout using the '''float:left''' property:value combo'''
* Analyze the HTML and the CSS of a page you like using web developer tools


; Layout using the '''float:left''' property:value combo
* Example directory: http://tecfa.unige.ch/guides/css/ex/layout
* Example directory: http://tecfa.unige.ch/guides/css/ex/
* Most important principles:
* Most important principles:
** Fluid layouts are better in most cases.
** Fluid layouts are better in most cases.
** Don't add any margins or paddings to columns that will go into a multi-column layout. Use wrappers and only set ''width'' and ''min-width'' ! For example:
** Don't add any margins or paddings to columns that will go into a multi-column layout. Use wrappers (i.e. a div with divs inside) and set their ''width'' with percentage values. You may specify a ''min-width'' however.
** Total width must add up to 100%
:Example:
<source lang="CSS">
<source lang="CSS">
#right_col {
#right_col {
Line 31: Line 36:
     width:17%;
     width:17%;
     min-width:2cm;
     min-width:2cm;
}
</source>
</source>


; Mini-project (homework) 3
; Start with mini-project (homework) 3 - continued on Wed
* Grab http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html
* Grab http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html
* Look at http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html for inspiration.


=== Wednesday ===
=== Wednesday ===


* Hands-on homework 3 (see below)
* Hands-on homework 3 (see below). I.e. continue with work started on Monday, based on: http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html
* Continue with your work based on: http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html


=== Homework 2 ===
* Analyzing CSS continued (demo of web developer tools)
 
 
=== Homework 3 ===


'''''Project summary''''':
'''''Project summary''''':


(1) Create an HTML page plus CSS style.
(1) Create an HTML page with some multi-column layout using the CSS float property
* The page should include several chunks of information that should be visually shown as boxes
 
(2) A short report describing and discussing your design
(2) Produce a short report describing and discussing your design


'''''Requirements''''':
'''''Requirements''''':
Line 55: Line 65:


The CSS must include:
The CSS must include:
* Some positioning, at least a bar on top of the page, boxes that float to the right
* A layout using CSS boxes.
* Part of the page must include a multi-column layout.
* We strongly suggest starting from the [http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html provided template], since layouting with CSS is not trivial...


The short report:
The short report:
Line 64: Line 76:


'''''Example HTML+CSS:'''''
'''''Example HTML+CSS:'''''
* http://tecfa.unige.ch/guides/css/ex/???
* http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html


'''''Due:'''''  
'''''Due:'''''  
Line 80: Line 92:
* Presence and quality of the report - 10%
* Presence and quality of the report - 10%
* On time - 10 % (only 2 days late = 5%)
* On time - 10 % (only 2 days late = 5%)
=== Homework 4 ===
This homework is fairly optional since I will not test this topic in the exams. If you have some time to spare, do it. In total, you must submit at least five homework projects (out of seven).
'''''Project summary''''':
* Analyze two web sites
'''''Requirements''''':
Produce an analysis of two web sites
* Describe (roughly) the HTML structure
* Describe CSS techniques used for the layout (if present)
* Discuss the color palette
* Discuss overall quality of layout and visual design
* Include at least a screen capture of each web site.
* Add other elements if you like, e.g. usability
* Include links and references
'''''Due:'''''
* Monday week 6
'''''Submission''''':
* Upload your report


=== Reading and other resources ===
=== Reading and other resources ===
Line 85: Line 124:
; Textbook
; Textbook
: Chapter 8 (The Box Model: Controlling Margins, Borders, Padding, Width, and Height
: Chapter 8 (The Box Model: Controlling Margins, Borders, Padding, Width, and Height
: Chapter 9 (Floating and Vertical Alignment)
: Chapter 9 (Floating and Vertical Alignment) - This chapter is not brilliant with respect to creating layouts with floats.
: Chapter 11 (Positioning) - Optional (week 5 stuff)
 
: Instead of reading chapters 9 and 11 you also can consult a (better) book chapter about CSS layout that I uploaded to the world classroom.


; Handout
; Handout
* [[CSS box model tutorial]]
* [[CSS box model tutorial]]
* http://tecfa.unige.ch/guides/css/ex/????
* [[Analyzing CSS tutorial]]
* [[CSS float tutorial]]
* (removed positioning tutorial, i.e. week 5 topic)
* http://tecfa.unige.ch/guides/css/ex/layout


; Validation
; Validation

Latest revision as of 14:43, 16 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 4 program

Main topic: The CSS box model and layouting with float:left


Monday

Homework 2 (continued ... if needed)
  • Q/R Homework 2
CSS Boxes
Analyzing CSS
Classroom activity
  • Identify a web page that you like in terms of its layout and visual design
  • Look at the HTML and the CSS of this page using the using web developer tools (continued on Wed)

Layout using the float:left property:value combo

  • Example directory: http://tecfa.unige.ch/guides/css/ex/layout
  • Most important principles:
    • Fluid layouts are better in most cases.
    • Don't add any margins or paddings to columns that will go into a multi-column layout. Use wrappers (i.e. a div with divs inside) and set their width with percentage values. You may specify a min-width however.
    • Total width must add up to 100%
Example:
#right_col {
    float: left;
    width:17%;
    min-width:2cm;
}
Start with mini-project (homework) 3 - continued on Wed


Wednesday

  • Analyzing CSS continued (demo of web developer tools)


Homework 3

Project summary:

(1) Create an HTML page with some multi-column layout using the CSS float property

(2) Produce a short report describing and discussing your design

Requirements:

The HTML must include:

  • Some nested div boxes (or equivalent)

The CSS must include:

  • A layout using CSS boxes.
  • Part of the page must include a multi-column layout.
  • We strongly suggest starting from the provided template, since layouting with CSS is not trivial...

The 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).

Example HTML+CSS:

Due:

  • Wednesday week 5

Submission:

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


Homework 4

This homework is fairly optional since I will not test this topic in the exams. If you have some time to spare, do it. In total, you must submit at least five homework projects (out of seven).

Project summary:

  • Analyze two web sites

Requirements:

Produce an analysis of two web sites

  • Describe (roughly) the HTML structure
  • Describe CSS techniques used for the layout (if present)
  • Discuss the color palette
  • Discuss overall quality of layout and visual design
  • Include at least a screen capture of each web site.
  • Add other elements if you like, e.g. usability
  • Include links and references

Due:

  • Monday week 6

Submission:

  • Upload your report


Reading and other resources

Textbook
Chapter 8 (The Box Model: Controlling Margins, Borders, Padding, Width, and Height
Chapter 9 (Floating and Vertical Alignment) - This chapter is not brilliant with respect to creating layouts with floats.
Chapter 11 (Positioning) - Optional (week 5 stuff)
Instead of reading chapters 9 and 11 you also can consult a (better) book chapter about CSS layout that I uploaded to the world classroom.
Handout
Validation
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3120/week4&oldid=36321"