Comp 161 - Wheaton College

Comp 161 - Web Design (Fall 2024)

          Syllabus, Textbooks, and Useful Links
          
                Syllabus.
             
                     Canvas Site.
             
		     Tutor: 
		     Sayed Ibrahimi

	     	Web Style Guide (3rd Edition) - online version of course textbook. NOTE: There is a newer 
	     	4th edition, but that one concentrates more on enterprise process (that is, how
                     to design a site in a large corporate structure) rather than
                     focusing on page design. Thus, we will use the 3rd edition,
                     even though some of the examples may be a bit dated; the
                     design principles are still valid.
             
		     Course textbook HTML & CSS: Design and Build Websites by Duckett - free e-book available from Wheaton library.
	     
                Code Samples from the
                above textbook HTML & CSS: Design and Build Websites.
	     
		     W3Schools.com - my recommended site for
		     HTML, CSS, and JavaScript reference as well as tutorials for all of the above.
	     
	             Decimal to Binary Converter and vice-versa; also includes Hexadecimal.
             
                     HTML5 Validator
             
                     CSS Validator
             
          Projects/Homework
          
			  Project 2

          Student Pages
		                 
					Aaronson

					Adams

					Alfano

					Alves, Ethan

					Alves, Sydney

					Andrade

					Boudreau-Faria

					Brown

					Clark

					Collina

					Cushing

					Foster

                                        Grullon

                                        Hillier

                                        Ko

                                        Lindsey

                                        Marciano

                                        Mennel

                                        Mullen

                                        Neves

                                        Nicholson

                                        Pond

                                        Quinn

                                        Rhodes

                                        Roy

                                        Savino

                                        Smith

					Student

                                        Towle

                                        Verrochi

Software

We will use several software packages to create web pages and content, and for uploading files to the department (CS) server. These are all free and platform independent (meaning they'll work on MacOS and Windows). The software includes:

Firefox browser. Although not strictly required, you may wish to download this browser so that your experience is consistent with what we do in class. We will be using many developer tools that are not the same across all browsers.
Phoenix Web IDE - online IDE to create web content. We will use this temporarily; see next item below. This works best on Chrome, Edge, or Opera.
Phoenix IDE - an integrated development environment (IDE) which we will use for developing our web pages. Use the link to install the IDE on any platform (MacOS, Windows, or Linux) for free.
FileZilla - a free FTP client. FTP refers to file transfer protocol, and is a method for transferring your files from your computer to the CS server. Be sure to download the FileZilla Client.
VPN instructions for FortiClient - if you are accessing the cs server from off-campus, for security purposes, you first have to set up a virtual private network (VPN) with your computer. Follow the installation guidelines for your type of computer/operating system. Start the VPN (FortiClient) before running FileZilla, and everything should then work normally.
GIMP - the Gnu Image Manipulation Program is a free version of a Photoshop-like paint program. Download using the link above.

Useful Web Pages and Sample Programs

Web Page Design

The Repetition Principle of Graphic Design
Effective design principles: Alignment
Web Design Tips: Contrast
The Proxority Principle in Web Design - both proximity and priority.
Lazy Eyes: How We Read Online - article in Slate.

Color

Some Color Theory.
ColorPicker - applet to show colors and their numerical equivalents (in hexadecimal).
4096 Color Wheel - choose safe (and unsafe) web colors from 4096 choices.

The Grid System

The 960 Grid System Made Easy
Using the 960 Grid System as a Design Framework - using the 960 system with CSS. NEED TWO - between framework and webdesign

Fonts

HTML and CSS Examples

HTML

mikePage.html - page we worked on Wednesday, 9/18. Some elements have been fixed so it passes the HTML Validator. To see the actual HTML code, in Firefox click on the hamburger menu in the upper right corner, choose "More tools", then "Page Source."
Links Are for Kids! - (links.html) sample page showing links-n-things.
Dads In Charge - (dadsAndKids.html) early in-class page.
video.html - example showing how to display a video.

CSS

introCSS.html - first CSS example.
containersPlain.html - starting point for in-class examples.
containers1.html - completed in-class example.
containers2.html - more boxes in CSS.
fonts.html - using fonts.
fontAttr.html - some font attributes.
alignmentStart.html - starting point for text and box alignment.
alignment.html - completed alignment.
dadsAndKidsCSSStart.html - starting point for Dads In Charge page (see above) using CSS (no tables!).
dadsAndKidsCSS.html - completed page of above using only CSS.
ecamm - e-commerce site for a company started by two Wheaton grads (Ken & Glen Aspeslagh, Class of 2000 ). See "About Us" link at the bottom of the page.
My version of the "About Us" page on the ecamm site.
listsTablesStart.html - starting point for styling lists and tables. And here's an arrow.
listsTables.html - completed styling for lists and tables.
animatedMenu.html - basic animated menu.
navigation.html - a navigation bar.

More CSS Examples and JavaScript

More CSS

layoutStart.html - starting point for basic layout.
layout.html - completed basic layout.
layoutFixed.html - new HTML5 layout elements in a fixed-width format.
layoutFluid.html - new HTML5 layout elements in a liquid (fluid) format.
layout2Start.html - starting point for positioning (relative, absolute, and fixed).
Two swell images:
animationPlain.html - starting point for moose animation.
Let's play soccer!

Web Page Design Examples

Day One Examples.

Zinc Bistro & Bar
Firefly Gastropub
Cafe Triskele
And this one:
Alta Restaurant and Wine Bar

Jason's List

The Salty Pig - another typical restaurant site.
Oracle's Site - where's Java?
Java - Oh, there it is.
NY Times T Magazine
Boston Globe
boston.com
npr.org

Claudia Fieo's List

TuexDuex
aWWWards
Always Creative
Mystic Aquarium - why would I want to login? Howzabout that white space..?
Square Circle - maybe not what you think.
National Geographic
MoMA

Mike's List

(in no particular order)

alice.org - elements large enough??
Art=Work - more complex responsive design.
craigslist
Dr Pepper - nectar of the gods.
MA RMV - oh, oh. A government website. Let's renew our vehicle registration using a search...
Turkey Ministry of Health - oh, oh. Another government website.
Dell's diagnostic tool - let's identify my product!
lillypereira - a designer.
Furlined - a production company. Note how long it takes to load.
qz - Quartz Magazine.
The CIA
The other CIA
The other other CIA
Poptropica
Warhol Foundation
Louvre, Paris.
MFA, Boston.
MET, New York.
ecamm - e-commerce site for a company started by two Wheaton grads (Ken & Glen Aspeslagh, Class of 2000 ).
Boston Red Sox.
Or how about the NY Yankees?
Amazon.com
ebay.com