COAP:COAP-3120/week7: Difference between revisions
Jump to navigation
Jump to search
m (using an external editor) |
m (→Homework 8) |
||
| Line 95: | Line 95: | ||
** [http://help.blogger.com/bin/answer.py?answer=46995 Widget Template 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.google.com/support/blogger/bin/answer.py?answer=46995 Widget tags for layouts] | ||
* | * ... There exist many more web sites about Blogger. | ||
; Tips | ; Tips | ||
* Go first through some documentation at Google or elsewhere | * Go first through some documentation at Google or elsewhere | ||
* | * Use either the [https://addons.mozilla.org/en-US/firefox/addon/view-source-chart/ View Source Chart] or the [http://chrispederick.com/work/web-developer/ 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: | ; Minimal requirements: | ||
| Line 116: | Line 116: | ||
; Submission | ; Submission | ||
* Submit the URL of your blog to the World Classroom. Make sure that the instructor can access the blog ! Test this ! | * 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. | * The report should be made as a posting in your blog. | ||
[[Category:COAP 3120]] | [[Category:COAP 3120]] | ||
Revision as of 20:45, 6 December 2011
COAP 3210 week 7
Topics: Using CSS toolkits, CSS menus and templating
Monday
Topic: Complex layouts
- A case study: Twitter's (fairly) simple yet powerful CSS layout kit
- http://twitter.github.com/bootstrap/
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
- simple-css-menu.html (vertical menu example)
- simple-css-menu2.html (horizonal menu example)
- Some links explaining the principles can be found in CSS positioning tutorial
- Templating
- Web templating
- 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
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.
- 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)
- ... There exist many more web sites about Blogger.
- 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
- 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 made as a posting in your blog.