John Keston Classes

Week 4

Session 1: Now that we have a completed template for our world website, it is important to finalize our design choices before moving onto other pages. One of the things we need to do is move our CSS into and external file and then link it in the head tag.

<link rel="stylesheet" type="text/css" href="worldstyles.css" />

This makes it so that we can use the same CSS for all of our pages. Anytime we make a change to “worldstyle.css” every page in the site will take on the new rules. Also, be prepared for the 2nd milestone due next class.

World Project Milestone 2 Due Session 2, Week 4
1. Show two or more complete pages linked through universal navigation
2. Upload the pages to your server space and present them on the web
3. Make sure that all images and links are working properly
4. Apply the styles as a linked stylesheet

Session 2: Today we will review the competencies for the World project and demonstrate some of the tips and techniques to improve the look of your sites. This includes properly setting up your project environment locally and remotely, using background images to enhance your designs, and properly uploading your content to the remote server (via the student webspace on MyAICampus) on the internet.

An excellent set of usability criteria goes by the acronym SCANMIC. These guidelines can improve the design of your site in many ways. Here’s a brief overview of the criteria:

1. Screen Design (Space, choice of color, readability, image placement, etc.)
2. Content (Who, What, Where, When)
3. Accessibility (Fast Load Times, Browser Compatibility, Easy to Read)
4. Navigation (Title Bar, Headers, Highlighted Navigation Links. Good navigation is like a roadmap, know where you are where you’ve been and where to go next.)
5. Media Use (Graphics help keep users attention and can enhance usability, poor use slows down sites and distract users, Sound, Animation, and Video)
6. Interactivity (e-commerce, feedback, discussions, chat, user customization)
7. Consistency (Page size/page layout, navigation buttons/ images, menus, etc. text – font, font size and color).