COAP:COAP-3120/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 13: Line 13:
* Specific layout items: e.g. Menu buttons
* Specific layout items: e.g. Menu buttons


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


Playing with absolute and fixed positioning.
Playing with absolute and fixed positioning.


Handout:
* [[CSS positioning tutorial]]


== Wednesday ==
'''Classroom activities'''


A case study: Twitter's (fairly) simple yet powerful CSS layout kit
(1) Create a quick sketch of page on paper
* http://twitter.github.com/bootstrap/


== Reading ==
(2) Start implementing it
 
Example files:
* http://tecfa.unige.ch/guides/css/ex/artistic/landing-page-absolute-fixed-elements.html (simple)
* [http://tecfa.unige.ch/guides/css/ex/artistic/landing-page-absolute-fixed-bg-pictures.html landing-page-absolute-fixed-bg-pictures.html] (includes bg pictures)
 
=== Wednesday ===
 
* Project 6 continued
* Some more CSS: vertical alignment and pseudo-tags for links.
 
==== Homework 6 ====
 
'''''Project summary''''':
 
(1) Create an HTML landing page that is non "standard"
* Position various elements on the page using absolute positions
* Include a fixed (scrolling) element
(2) A short report describing and discussing your design
 
'''''Requirements''''':
 
* Create a single HTML page that could serve as landing page (e.g. a home page or a topic entry page)
* Include elements that are absolutly positioned with respect to a "main" container.
* Include at least one fixed element
* Be creative
 
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).
 
'''''Examples HTML+CSS:'''''
* http://tecfa.unige.ch/guides/css/ex/artistic/
 
'''''Due:'''''
* Wednesday week 7 '''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 ===


* Textbook, chapters 11 (Positioning) and 13 (Create a complete Layout)
* Textbook, chapters 11 (Positioning) and 13 (Create a complete Layout)

Latest revision as of 19:17, 28 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 6 program

Administration / grading

  • Mid-term feedback
  • The students who uploaded to homework 3 (web site/zip file version) should upload their report to hw3 (alt) sorry. Otherwise you should have provide a link to the report.

Main topics:

  • Positioning
  • Z-index
  • Layout
  • Specific layout items: e.g. Menu buttons

Monday

Playing with absolute and fixed positioning.

Handout:

Classroom activities

(1) Create a quick sketch of page on paper

(2) Start implementing it

Example files:

Wednesday

  • Project 6 continued
  • Some more CSS: vertical alignment and pseudo-tags for links.

Homework 6

Project summary:

(1) Create an HTML landing page that is non "standard"

  • Position various elements on the page using absolute positions
  • Include a fixed (scrolling) element

(2) A short report describing and discussing your design

Requirements:

  • Create a single HTML page that could serve as landing page (e.g. a home page or a topic entry page)
  • Include elements that are absolutly positioned with respect to a "main" container.
  • Include at least one fixed element
  • Be creative

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

Examples HTML+CSS:

Due:

  • Wednesday week 7 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

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