COAP:COAP-2100/week4-2011

Week 4 COAP 2100

Topics Covered

• HTML and CSS wrap up
  • Using the div tag for page layout (positioning) with the CSS class and ID selector
  • Discussion of some more properties (if questions)
  • Web page analysis with browser tools.
• CSS validation
• Colors schemes and palettes
  • RGB colors
  • HSV colors (shortly)
  • HSL colors
• Wireframing
• Templating of web portals
• XML - a short conceptual overview (to be confirmed)

Teaching materials

CSS

• CSS tutorial
• Learn CSS Positioning in Ten Steps
• Computer colors tutorial

Templating

• Web templating (will not be tested in exams)

Wireframing

• Paper Prototyping by Shwan Medero, A List Apart, 2007.

To be confirmed (for Wednesday)

• XML and XML namespace (text, better for reading than the slides below)
• Slides: XML Intro (short), XML Intro (long), XML Namspaces
• Links pages: CSS, Color, Web design links

Software, Online tools and reference

Browser extensions

• Web developer (Firefox)
• Colorzilla (Firefox)

Online CSS validator

• http://jigsaw.w3.org/css-validator/ (validate !)

CSS Reference

• http://www.quirksmode.org/css/contents.html (CSS compatibility tables)
• http://reference.sitepoint.com/css (SitePoint CSS reference, also available through the FF Code burner extension

Online tools and services

• http://blogger.com/ (for the templating demo, needs a Google account, get it from https://www.google.com/accounts/ if needed)
• http://colorschemedesigner.com/ (Excellent color palette design and testing tool)
• Web wireframe (A list of wireframe tools). We shall demo Mockingbird and Mockflow, two simple online systems.

Sharing colors palettes

• http://kuler.adobe.com/ or http://www.colourlovers.com/ (sites that lets users publish color palettes)
• http://blogger.com/ (you need a Google account)

PC Software (installed on the classroom computers)

• http://www.freexmleditor.com/ (XML Exchanger). See XML editor for alternatives.
• http://www.inkscape.org/ (SVG Editor, freeware, easy to install)

Classroom activities

Monday

• (Short) feedback homework 2
• HTML and CSS wrap-up
• Web page analysis with Web developer (Firefox extension)
• Colors (lecture), use of Colorzilla (Firefox)
• Creating a color palette. Demo of ColorScheme Designer
• Wireframing: drawing a sketch for a "multi-boxed" web page (e.g. a portal). Demo of Mockingbird and Mockflow
• Templating (introduction, if time)

Wednesday

• XML
  • Why and where
  • A short introduction: formalism, wellformedness, validity, namespaces
  • Short XML Exchanger demo (XHTML and SVG maybe)
• Templating for Blogger
  • http://blogger.com/ (needs a Google account, get it from https://www.google.com/accounts/ if needed)
  • Web templating
• Midterm Q/A (see week 5 program)
• Short RSS demo (it time left)
• Short SVG demo (if time left)

Homework 4

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.

• Bloggerbuster (Amanda Fazani) has a long list of tutorials
• Can I edit the HTML of my blog's layout? (Official entry page to Blogger's Q/A about templating)
  • Page Element Tags
  • Fonts and Colors Tags
  • Widget Template Tags
  • Widget tags for layouts
• blogger template design (Don't know if this is still ok).

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 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
• Quote the references you used (and that includes blogger templates you may find on the web).

To get an A

• Either make really creative changes to the CSS part or create a template with a different layout. I do not require nor suggest that you build a template from scratch. You may reuse any existing solutions you like under the condition that you respect the licensing scheme and that you quote the source ...

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 2 page (500-800 words) 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 just 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 directly quoted text. Also you must provide all references (the URLs)
• 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, references).

Submission

• Either submit the HTML file to the World Classroom
• Or put in somewhere online and just submit the URL to the Worldclassroom

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.