COAP:COAP-2100/week4-2011
Jump to navigation
Jump to search
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
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, positioning (tutorial)
- 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
(TBA - Daniel K. Schneider 12:09, 31 January 2011 (CET))
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)
- 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. Wireframing
TBA
Basically, I am going to ask you to create two wireframes (you may use your term project for this).