Camosun College Computer Systems Technology COMP140 - Human-Computer Interaction

Class 1
Class 2
Class 3
Class 4
Class 5
Class 6
Class 7
Class 8
Class 9
Class 10
Class 11
Class 12
Class 13
Class 14
Class 15
Class 16
Class 17
Class 18
Class 19
Class 20
Class 21
Class 22
Class 23
Class 24
Class 25
Class 26
Class 27
Class 28
Class 29
Class 30
Class 31
Class 32
Class 33

Course Links

Change Font Size: A A A

Computer Science 140 - Lecture Schedule

Topics we explore during the scheduled lecture times. Some topics may be covered in a later lecture.

Some of these links are external to this site and may include international standards reference material.

Course Introduction - class 1
- Instructor introduction
- Course outline, goals, pre-requisites, work expectation
- If you haven't sent me an email yet (), please do so I reply back with your personal course marks code
- Internet notes PDF or PDF
Internet - class 2
- continuing with the Internet definitions
- please register your email address with http://hal.cs.camosun.bc.ca/mailman/listinfo/cst1 (that's a number 1 at the end) so that you are able to receive news updates on scholarships, awards, and the MSDN (free Microsoft software downloads)
HTML - class 3
- HTML notes PDF or PPT
Browsers - class 4
- handout: crossword review of Internet related terms and definitions - we will review in next class
- browser notes PDF or PPT
- HTML notes PDF or PPT
HTML - class 5
- continuing HTML discussion
- Quiz 1 handed out due Thursday Oct 11 at start of class
XHTML - class 6
- XHTML notes PDF or PPT
Supplementary information:
- HTML tags W3 ver4.0
- XHTML version 2 working draft
- Table examples
- HTML table examples link
- more complex HTML table example link
- styling tables
- img tag
- accessibility issue over the absence of alt attributes in all images of the 2000 Sydney Olympic games web site
- imagemaps
- client side image map link
- server side image map link (from Deid)
- Connect to Deepblue network share at Camosun on your laptop or personal desktop
- For Windows - can use WinSCP PDF, or WinSSH PDF
- For Mac OS - can use Cyberduck
- For Linux - can use sftp at the command prompt, or use gftp if it is installed, or use the Konqueror web browser and enter in the Locations: bar 'sftp://userid@asimov.cs.camosun.bc.ca'
CSS - class 7
- CSS notes PDF or PPT
Supplementary information:
- using CSS
- extensive online material about CSS
- Using WinSCP
CSS - class 8
- continuing with CSS
CSS - class 9
- continuing with CSS
Supplementary information:
- CSS3 Selectors test
- this CSS PDF sheet is ok except that (as students pointed out) it identifies px (pixel) units as an absolute measurement which conflicts with the official W3C standard stating that pixel units are relative; the CSS cheat sheet in HTML format by Leslie Franke avoids stating which units are relative and absolute
- example of CSS web navigation architecture
CSS - class 10
- continuing with CSS
Supplementary information:
- CSS examples
- tables html 1 and html 2
- overflow html
- rounded corners examples html 1 and html 2
- differences between IE versions and Firefox width part 1, width part 2, width part 3, Tooltip differences, HR problems with Firefox
- CSS validator
- Microsoft Internet Explorer CSS Compatibility in IE7 page
CSS - class 11
- continuing with CSS

HTML form - class 12

Mapping Deepblue drive using WinSCP
HTML form notes PDF (single page), PDF (four per page) or PPT

Supplementary information:

Comparing form elements without CSS and with CSS

HTML 4 element	no CSS	with CSS
textarea	sample	sample
select	sample	sample
input textbox	sample	sample
input password	sample	sample
input checkbox	sample	sample
input radio button	sample	sample

my basic sample HTML form
form labels should be placed above the entry control link
more resource info on forms - links

HTML forms - class 13
- continuing with HTML forms
HTML forms - class 14
- continuing with HTML forms
Image formats - class 15
- Image format notes PDF or PPT

JavaScript - class 16

JavaScript notes PDF or PPT

Supplementary information:

Mozilla's introduction to JavaScript
Netscape devedge JavaScript reference
Netscape's JavaScript tutorial for beginners
JavaScript introduction PDF, HTML
JavaScript form example
JavaScript objects
JavaScript page colour example

JavaScript form examples

example 1	source
example 2	source
example 3	source
example 4	source
example 5	source

another JavaScript form example
JavaScript form events example -
JavaScript event handlers list
JavaScript form event - multiple select example 2
JavaScript table showing all the extended colours and their names
cursor clock demo

Javascript - class 17
Javascript - class 18
Midterm review 1 - class 19
- Midterm material
- In class review of HTML/CSS/JavaScript , answers
Midterm review 2 - class 20
- Midterm review notes taken from slides (do not need to print these) PDF PPT
- In class review set of questions PDF and the answers (but scrambled) PDF • the solutions PDF
Midterm - class 21
- Midterm test.
Midterm results - class 22
- Review results of midterm test.
JavaScript - class 23
Flash - class 24
- Introduction to Flash pdf
- Flash sample I made using Escher background
- Flash sample I made with masks
- Flash motion tween tutorial I made
- Flash sample I made - a sailing ship with music
- Flash sample I made - UFO + shape tween blob
- amazing Flash demos from MIT regarding visual perception
- Flash quick tips
- Flash preloader info
- Flash clock demo
- Notes on ActionScript
Flash - class 25
Flash - class 26
HCI - class 27
- HCI notes in PPT, PDF colour PDF B&W
- what are frames? PPT PDF
XML/XSLT - class 28
- XML notes
- link to ten user interfaces in the future
DOM / jQuery - class 29
- Introduction to DOM PDF
- Introduction to jQuery online book
search engines - class 30
- ppt
- evolution of search
Topics - class 31
Topics - class 32
Review - class 33
- Review pdf

Comp 140 - Lecture Notes

Course Links

Computer Science 140 - Lecture Schedule