COAP:COAP-3120/week7

The educational technology and digital learning wiki
Jump to navigation Jump to search
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 3210 week 7

Topics: Using CSS toolkits, CSS menus and templating

Monday

Topic: Complex layouts

Classroom activity

  • Create a layout with a "Twitter bootstrap" stylesheet


Wednesday

Topics:

  • CSS menus using positioning, hover and display properties (
  • Templating with Blogger
  • Project work
CSS menus
Templating
What you missed (before I decided to use Twitter bootstrap)

Classroom activities

  • Short blogger demo
  • Continue work on project 7 (layout with a twitter stylesheet)
  • Start project 8 (really optional)

Homework 7

Project summary:

(1) Create a sort of "standard" HTML landing page using the Twitter toolkit.

(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)
  • Make use of the Twitter classes as much as you can
  • You are allowed to have broken links.

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 8 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%)


Homework 8

This homework is very optional. None of it will be tested in the exam.

Project summary:

  • Modify a blogger template. To do so, you need a Google account (see week 1) and then you will have to dig a bit into the documentation.
  • Create a blog (if not already done so)
  • Find a good template to start with. You also may search on the web. Many sites offer blogger templates for free (see below)
  • To edit the template, select Design, then select Edit HTML. You then have the option to change just the CSS part (scroll down) or the whole layout (tick the expand widget template box).
Resources for Blogger templating - you may find more and better ones.
  • See below (Reading and links)
Tips
  • Go first through some documentation at Google or elsewhere
  • Use either the View Source Chart or the web developer extension of Firefox to analyse a Design. For the latter, select CSS->View Style Information or hit CTRL-SHIFT-Y. Move your mouse until you see the "big rectangles". Click and you will see the ID or class attribute value in the web developer pane.
Minimal requirements
  • Change CSS properties of block and text elements
  • In the report, state your design goals and then shortly list the changes you made in a blog post of the blog for which you made the changes.
  • Quote the references you used (and that includes blogger templates you may find on the web).

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

Due:

  • Friday week 8
Submission
  • Submit the URL of your Blog to the World Classroom. Make sure that the instructor can access the blog ! Test this by logging out !
  • The report should be made as a posting in your Blog.


Reading and links

General
Twitter
Blogger
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3120/week7&oldid=36740"