COAP:COAP-3120/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 3: Line 3:
== COAP 3210 week 7 ==
== COAP 3210 week 7 ==


Topic: Using CSS toolkits and templating
Topics: Using CSS toolkits, CSS menus and templating


=== Monday ===
=== Monday ===
Line 13: Line 13:


'''Classroom activity'''
'''Classroom activity'''
* Create a layout with a twitter stylesheet
* Create a layout with a twitter stylesheet


Line 31: Line 30:
; Templating
; Templating
* [[Web templating]]
* [[Web templating]]
* See optional homework for [[COAP-2100/week4]]
* http://blogger.com/ (for the templating demo, needs a Google account, get it from https://www.google.com/accounts/ if needed)
 
 
'''Classroom activities'''
* Short blogger demo
* Continue work on project 7 (layout with a twitter stylesheet)
* Start project 8 (really optional)


=== Homework 7 ===
=== Homework 7 ===
Line 71: Line 76:
* 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 8 ===
This homework is '''very optional'''. None of it will be tested in the exam.
'''''Project summary''''':
* Modify a [http://www.blogger.com/ blogger] template. To do so, you need a Google account (see week 1) '''and''' then dig 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.
* [http://www.bloggerbuster.com/ Bloggerbuster] (Amanda Fazani) has a long list of tutorials
* [http://www.google.com/support/blogger/bin/answer.py?answer=46870 Can I edit the HTML of my blog's layout?] (Official entry page to Blogger's Q/A about templating)
** [http://help.blogger.com/bin/answer.py?answer=46888 Page Element Tags]
** [http://help.blogger.com/bin/answer.py?answer=46871 Fonts and Colors Tags]
** [http://help.blogger.com/bin/answer.py?answer=46995 Widget Template Tags]
** [http://www.google.com/support/blogger/bin/answer.py?answer=46995 Widget tags for layouts]
* [http://www.ourblogtemplates.com/2007/06/tutorials-on-blogger-template-design.html blogger template design] (Don't know if this is still ok).
; Tips
* Go first through some documentation at Google or elsewhere
* The use the [http://chrispederick.com/work/web-developer/ web developer extension] of Firefox to analyse a Design. 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
* 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%)
; Submission
* Submit the URL of your blog to the World Classroom. Make sure that the instructor can access the blog ! Test this !
* The report should be a posting in your blog.


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

Revision as of 20:35, 6 December 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 3210 week 7

Topics: Using CSS toolkits, CSS menus and templating

Monday

Topic: Complex layouts

Classroom activity

  • Create a layout with a twitter stylesheet

Wednesday

(details TBA)

Topics:

  • CSS menus using positioning, hover and display properties
  • Templating with Blogger
CSS menus
Templating


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

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 dig 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.
Tips
  • Go first through some documentation at Google or elsewhere
  • The use the web developer extension of Firefox to analyse a Design. 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
  • 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%)
Submission
  • Submit the URL of your blog to the World Classroom. Make sure that the instructor can access the blog ! Test this !
  • The report should be a posting in your blog.
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3120/week7&oldid=36722"