COAP:COAP-3120: Difference between revisions
Jump to navigation
Jump to search
m (Created page with "<pageby nominor="false" comments="false"/> ... under construction ... <categorytree mode="all" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:...") |
mNo edit summary |
||
| (34 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
< | <categorytree hideprefix=always mode="all" depth=1 style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3120</categorytree> | ||
== Introduction == | == Introduction == | ||
| Line 12: | Line 8: | ||
The course-level outcomes as announced in the syllabus are: | The course-level outcomes as announced in the syllabus are: | ||
# | # Design a web page using Cascading Style | ||
# Code pages using inline and external styles | |||
# Evaluate web page styles | |||
# Edit and code external style sheet files | |||
# Create pages that display effective use of images, color, backgrounds | |||
# Explain the differences between inline, embedded, external style | |||
# Be able to explain when and where various styles should be used | |||
Practical learning outcomes: | Practical learning outcomes: | ||
* Be able to create web pages that are visually pleasing | |||
* Be able to adapt existing style-sheets (e.g. for a portal) | |||
* Understand some visual design principles | |||
Subjects/fields covered (somewhat) | |||
* CSS | * CSS | ||
* Some HTML 4, HTML 5, XHTML | |||
* Some web design principles | * Some web design principles | ||
* Web style | * Web style | ||
* Some [[User experience and user experience design]] principles | * Some [[User experience and user experience design]] principles | ||
== Weekly programs == | |||
* [[COAP:COAP-3120/week1|Week 1]] | |||
* [[COAP:COAP-3120/week2|Week 2]] | |||
* [[COAP:COAP-3120/week3|Week 3]] | |||
* [[COAP:COAP-3120/week4|Week 4]] | |||
* [[COAP:COAP-3120/week5|Week 5]] (and mid-term) | |||
* [[COAP:COAP-3120/week6|Week 6]] | |||
* [[COAP:COAP-3120/week7|Week 7]] | |||
* [[COAP:COAP-3120/week8|Week 8]] | |||
== Grading scale == | == Grading scale == | ||
| Line 35: | Line 51: | ||
D+ 1.1 Pass | D+ 1.1 Pass | ||
D 0.8 Pass 62.00 | D 0.8 Pass 62.00 | ||
== Software == | |||
'''(1) Komposer''' | |||
* Download: http://www.kompozer.net/download.php | |||
* Take the development version 0.8b3 (2010-02-28) | |||
'''(2) Notetab''' or another HTML/CSS aware programming editor | |||
* Download for Notetab: http://www.notetab.com/downloads.php | |||
* See [[Web authoring system]]s and [[text editor]]s for alternatives. | |||
'''(3) Various Firefox browser extensions''' | |||
* [https://addons.mozilla.org/en-US/firefox/addon/view-source-chart/?src=search View source chart] Shows the structure of a web page. | |||
* [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page. | |||
* There doesn't seem to be an integrated CSS validator. For convenience, you can install [https://addons.mozilla.org/en-US/firefox/addon/2289 CSS Validator] which will use the online W3C CSS Validator. Since it will forward an URL, your page must be published on a web site. | |||
* [http://chrispederick.com/work/web-developer/ Web Developer] and DOM Inspector. Tells you most everything about your HTML page. | |||
* [https://addons.mozilla.org/en-US/firefox/addon/271 ColorZilla] includes an Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. | |||
* [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] provides searchable reference information and code examples for HTML and CSS. It's a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools. | |||
== Important teaching materials == | == Important teaching materials == | ||
Contents addressed within these texts may come up in exam questions. You are not required to memorize any of these, but | Contents addressed within these texts may come up in exam questions. You are not required to memorize any of these, but be able to retrieve information. | ||
'''Mandatory reading''' | |||
* Selected sections from the "official textbook": Beginning CSS: Cascading Style Sheets for Web Design, York, Wiley Pub./Wrox, 3rd edition, ISBN: 978-0470891520 | |||
'''Recommended free on-line textbooks''' | '''Recommended free on-line textbooks''' | ||
* Patrick J. Lynch and Sarah Horton, [http://webstyleguide.com/index.html Web Style Guide]. | * Patrick J. Lynch and Sarah Horton, [http://webstyleguide.com/index.html Web Style Guide]. | ||
* Horton, Sarah (2005). [http://www.universalusability.com/access_by_design/index.html Access by Design] (online) at Universal Usability: A universal design approach to web usability. | * Horton, Sarah (2005). [http://www.universalusability.com/access_by_design/index.html Access by Design] (online) at Universal Usability: A universal design approach to web usability. | ||
'''On-line HTML and CSS manual''' | |||
* http://reference.sitepoint.com/ | |||
* [http://www.w3schools.com/cssref/default.asp CSS Reference] at w3Schools.com (includes CSS3) | |||
'''Handouts''' | |||
* [[CSS tutorial]] (a quick CSS summary) | |||
* [[CSS text styling tutorial]] (several textbook chapters summarized with respect to week 2 topic) | |||
* [[CSS color and background tutorial]] (week 3 topic, summarizes chapter 7 or textbook and adds extra CSS3 information) | |||
* [[CSS box model tutorial]] (week 4) | |||
* [[CSS float tutorial]] (week 4) | |||
* [[Analyzing CSS tutorial]] (week 4) | |||
* [[CSS media and alternative style sheets tutorial]] | |||
* [[CSS positioning tutorial]] (week 6) | |||
[[Category: COAP 3120]] | [[Category: COAP 3120]] | ||
[[Category:Courses and workshops]] | [[Category:Courses and workshops]] | ||
Latest revision as of 14:38, 14 November 2016
Introduction
- Disclaimer: This is not the official syllabus or course program. EdutechWiki is just used as support site.
- The course is organized in weekly programs (available through the menu to the right...)
The course-level outcomes as announced in the syllabus are:
- Design a web page using Cascading Style
- Code pages using inline and external styles
- Evaluate web page styles
- Edit and code external style sheet files
- Create pages that display effective use of images, color, backgrounds
- Explain the differences between inline, embedded, external style
- Be able to explain when and where various styles should be used
Practical learning outcomes:
- Be able to create web pages that are visually pleasing
- Be able to adapt existing style-sheets (e.g. for a portal)
- Understand some visual design principles
Subjects/fields covered (somewhat)
- CSS
- Some HTML 4, HTML 5, XHTML
- Some web design principles
- Web style
- Some User experience and user experience design principles
Weekly programs
Grading scale
A 3.8 Very good 92.00 A- 3.5 Almost very good 89.00 B+ 3.1 Pretty good 85.00 B 2.8 Good 82.00 B- 2.5 Reasonably good 79.00 C+ 2.1 Fair 75.00 C 1.8 Rather weak / minim. 72.00 C- 1.5 Minimalist / Weak 69.00 D+ 1.1 Pass D 0.8 Pass 62.00
Software
(1) Komposer
- Download: http://www.kompozer.net/download.php
- Take the development version 0.8b3 (2010-02-28)
(2) Notetab or another HTML/CSS aware programming editor
- Download for Notetab: http://www.notetab.com/downloads.php
- See Web authoring systems and text editors for alternatives.
(3) Various Firefox browser extensions
- View source chart Shows the structure of a web page.
- HTML VALIDATOR is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.
- There doesn't seem to be an integrated CSS validator. For convenience, you can install CSS Validator which will use the online W3C CSS Validator. Since it will forward an URL, your page must be published on a web site.
- Web Developer and DOM Inspector. Tells you most everything about your HTML page.
- ColorZilla includes an Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
- Codeburner for Firefox provides searchable reference information and code examples for HTML and CSS. It's a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools.
Important teaching materials
Contents addressed within these texts may come up in exam questions. You are not required to memorize any of these, but be able to retrieve information.
Mandatory reading
- Selected sections from the "official textbook": Beginning CSS: Cascading Style Sheets for Web Design, York, Wiley Pub./Wrox, 3rd edition, ISBN: 978-0470891520
Recommended free on-line textbooks
- Patrick J. Lynch and Sarah Horton, Web Style Guide.
- Horton, Sarah (2005). Access by Design (online) at Universal Usability: A universal design approach to web usability.
On-line HTML and CSS manual
- http://reference.sitepoint.com/
- CSS Reference at w3Schools.com (includes CSS3)
Handouts
- CSS tutorial (a quick CSS summary)
- CSS text styling tutorial (several textbook chapters summarized with respect to week 2 topic)
- CSS color and background tutorial (week 3 topic, summarizes chapter 7 or textbook and adds extra CSS3 information)
- CSS box model tutorial (week 4)
- CSS float tutorial (week 4)
- Analyzing CSS tutorial (week 4)
- CSS media and alternative style sheets tutorial
- CSS positioning tutorial (week 6)