COAP:COAP-2100/week4-2011: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 61: Line 61:


; Task
; Task
* Modify a [http://www.blogger.com/ blogger] template. To do so, you need a Google account (see week 1). To edit the template, select "Layout", then "Edit HTML".
* 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
* To edit the template, select "Layout", then "Edit HTML". You then have the option to change just the CSS part 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).


; Minimal requirements:
; Minimal requirements:
* Change the CSS properties of block and text elements
* Change the 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
* Shortly list the changes you made in a blog post of the blog for which you made the changes
; To get an A
* Either make really creative changes to the CSS part or create a template with a different layout


; Submission
; Submission
* Submit the URL of you blog to the World Classroom
* Submit the URL of your blog to the World Classroom. '''Do not forget to document shortly the changes you made with a blog post'''.


; Note
; Note

Revision as of 21:43, 15 September 2009

Week 4 COAP 2100

Topics Covered

  • HTML (continued)
    • The div and span tags
  • CSS (continued)
    • The class and ID selector (plus the HTML div and span tags)
    • values and properties
    • Discussion of some more properties
  • Colors schemes and palettes
    • RGB colors
    • HSV colors (shortly)
    • HSL colors
  • Templating (to be confirmed)

Teaching materials

Online tools and reference

Classroom activities

Monday
  • (Short) feeback homework 2
  • Other HTML editing tools and strategies (Kompozer, Tidy)
  • Colors (lecture)
  • Creating a color palette (visit of some online color scheme tools)
  • Drawing a sketch for a "multi-boxed" web page (e.g. a portal)
  • CSS 2 (part II)
  • Hands on CSS (you may work on homework 3). Use of the HTML div and span tags, CSS values and properties.
  • Homework 3 Q/A (in particular regarding the term project)
Wednesday
  • XML
    • Why and where
    • A short introduction: formalism, wellformedness, validity, namespaces
  • Templating for Blogger
  • Midterm Q/A (see week 5 program)

Homework

Choose one (!)

Due: Before Monday week 6 lesson (so you got 1 1/2 week for this)

A. Blogger templating
Task
  • 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
  • To edit the template, select "Layout", then "Edit HTML". You then have the option to change just the CSS part or the whole layout (tick the expand widget template box).
Resources for Blogger templating - you may find more and better ones.
Minimal requirements
  • Change the 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
To get an A
  • Either make really creative changes to the CSS part or create a template with a different layout
Submission
  • Submit the URL of your blog to the World Classroom. Do not forget to document shortly the changes you made with a blog post.
Note
  • I will not test templating in the exams
B. Write a short introduction or tutorial
Task
  • Write a (approximately) 2 page introduction on one of the following subjects:
Use of color palettes in web page design
Web page design principles
Usability and ergonomics of a web page
Usability testing (how to)
Accessibility of web pages
HTML 5 (new features)
CSS 3 (new features)
Requirements
You are allowed to specialize a subject. If you do so, explain in the beginning of the text. E.g. if you are interested in color palettes, you may explain and discuss the functionality of a palette generation tool.
You may liberally quote from web sources, but under the condition that you clearly identify your sources and particularly the directly quoted text and that you provide a reference (the URL)
The text must be written in HTML either in a file or as an entry in an online environment. It should be valid (minor mistakes are tolerated). Styling is not important, however the text should be well structured (title, author, date, subtitles).
Submission
  • Either submit the HTML file to the World Classroom
  • Or put in somewhere online and just submit the URL
Tip
Use a Wysywig editor to write the text, e.g. download Kompozer, or use a through the web editor in a web service like bloger, google sites or a wiki.
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week4-2011&oldid=23460"