COAP:COAP-3120/week4: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(18 intermediate revisions by the same user not shown)
Line 12: Line 12:


; CSS 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.
* 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
; Classroom activity  
* Identify a web page that you like in terms of its layout and visual design
* Identify a web page that you like in terms of its layout and visual design  
* Look at the HTML and the CSS of the using web developer tools
* 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'''
''' Layout using the '''float:left''' property:value combo'''


* Example directory: http://tecfa.unige.ch/guides/css/ex/
* Example directory: http://tecfa.unige.ch/guides/css/ex/layout
* 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'' using percentage value. You may specify a ''min-width'' however.  
** 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%
** Total width must add up to 100%
:Example:
:Example:
Line 35: Line 36:
     width:17%;
     width:17%;
     min-width:2cm;
     min-width:2cm;
}
</source>
</source>


; Start with 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
 
* Analyzing CSS continued (demo of web developer tools)




Line 51: Line 55:
'''''Project summary''''':
'''''Project summary''''':


(1) Create an HTML page that uses CSS box for some multi-column layout.
(1) Create an HTML page with some multi-column layout using the CSS float property
(2) A short report describing and discussing your design
 
(2) Produce a short report describing and discussing your design


'''''Requirements''''':
'''''Requirements''''':
Line 60: Line 65:


The CSS must include:
The CSS must include:
* A layout using CSS boxes. Part of the page must include a multi-column layout.
* 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...
* 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...


Line 86: 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 ===
=== Homework 4 ===
Line 93: Line 100:
'''''Project summary''''':
'''''Project summary''''':


* Analyze a web site
* Analyze two web sites


'''''Requirements''''':
'''''Requirements''''':
Line 107: Line 114:


'''''Due:'''''  
'''''Due:'''''  
* Wednesday week 5
* Monday week 6


'''''Submission''''':
'''''Submission''''':
* Upload your report
* Upload your report


=== Reading and other resources ===
=== Reading and other resources ===
Line 116: 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) - This chapter is not brilliant with respect to creating typical layouts.
: Chapter 9 (Floating and Vertical Alignment) - This chapter is not brilliant with respect to creating layouts with floats.
: Chapter 11 (Positioning) - Optional.
: 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]]
* [[Analyzing CSS tutorial]]
* [[Analyzing CSS tutorial]]
* [[CSS positioning tutorial]] (to be completed some day ...)
* [[CSS float tutorial]]  
* (removed positioning tutorial, i.e. week 5 topic)
* http://tecfa.unige.ch/guides/css/ex/layout
* http://tecfa.unige.ch/guides/css/ex/layout


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"