Week 2
July 10, 2008 – 2:39 pmSession 1: By the end of lab today your calendars are due. Make sure that your link on the drop off drive is there and working properly. If we have time we may look at a few of your calendar projects during the lab. These are not required presentations.
Stylesheets (technically Cascading Stylesheets), or CSS allow web developers much more control over the look of their web pages than with HTML alone. They make it possible to define styles globally for a site, eliminating the need for repetitive font tags, color tags, alignment attributes and so on. This creates better organization by separating form from structure. Sytlesheets are a critical tool for any web developer and make creating sites infinitely faster and easier, once you’ve learned how to use them.There are four ways to include styles in your HTML documents.
1. Local or Inline is right inside a tag and overrides other definitions. Example: <h1 style="color: orange; font-size: 18pt; font-family: Verdana, sans-serif">This is an INLINE style</h1>
This is an INLINE style
2. Global or Embedded. A better solution is to include the style definitions in a style tag otherwise known as by using the global (embedded) technique. Like this example:
<html>
<head>
<title>Style Demo Page 1</title>
<style type="text/css">
<!--
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
-->
</style>
</head>
<body>
<h1>TEST</h1>
<p>Hello World</p>
<table>
<tr><td>I'm in a TD tag with no font tag</td></tr>
</table>
<b>bold. <u>underline</u> within bold (no style)</b><br />
<i>italics</i>
</body>
</html>
3. Linked stylesheets are even better because they allow you to define the styles for an entire website once, then when you modify the stylesheet the changes take effect over the entire site, or wherever the stylesheet is linked. Here’s how you link a stylesheet:
<html> <head> <title>Untitled Document</title> <link rel="stylesheet" href="/im2420/my_styles.css" type="text/css"> </head> <body> <h1>TEST</h1> </body> </html>
and here’s what the stylesheet document (my_styles.css) looks like:
/* CSS Document */
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
4. Imported stylesheet go within a style tag, thus allowing you to include other global styles which will override what’s imported. In the following example the h1 definition will override the h1 definition found in my_styles.css:
<STYLE TYPE="text/css">
<!--
@import url(my_styles.css);
h1 { color: #FF00FF; font-family: impact }
textarea { text-transform: uppercase }
-->
</STYLE>
Click any of the following links to view the examples we looked at in class:
style_demo0.html
style_demo1.html
style_demo2.html
style_demo3.html
Reading assignment: Stylesheets are extremely powerful and critical to creating useable, consistent and accessible sites. Please take the time to read the following tutorial and checkout other resources so you can take advantage of these techniques in your projects (note: using stylesheets is a requirement in all subsequent projects).
Web Monkey Stylesheet Tutorial
Web Monkey Stylesheet Reference
Brainjar CSS Positioning Tutorial
Selectutorial – CSS selectors
Session 2: A good set of guidelines to follow for web development are the SCANMIC Usability Criteria. Read the the reading assignment linked below to gain a full understanding of the SCANMIC principals. Here’s a quick outline of each 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).
Assignment: As a first project utilizing CSS let’s create single page with the layout, images and type all formatted with CSS. Write the content for your web page as a critique of a website that you consider a bad design. Create a one or two page web based evaluation of the website outlining how your example site does not adequately apply the usability points above. The site you evaluate must be accessible over the internet and shouldn’t be too high profile or contain inappropriate materials. Make sure you include links to the pages that you’re evaluating in your web document also include images to illustrate your points. Links to your evaluations will be due on the drop off drive by Session 1, Week 4.
SCANMIC Evaluation Project Requirements
1. Select a poorly designed “under the radar” website to evaluate.
2. Write a paragraph or two of content for each of the seven SCANMIC points.
3. Create anchors with navigation to each point from the top of the page.
4. Use a linked or imported custom CSS document to format the type and images.
5. Link your evaluation on the drop off drive by Session 1, Week 4.
Student Example:
http://www.angelsoftheweek.com/school/scanmic/
Reading Assignment (PDF):
Identifying Web Usability Criteria
Download: IM2420 Problem Set 2
1. All IM2420 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.
2 Responses to “Week 2”
If you are looking for explanations of web safe fonts, or lists of what fonts are web safe, here are a few articles that shed light on the topic.
http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
http://www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/
http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css
By admin on Sep 10, 2009
Love the class, sad there is no more breakfast sandwiches this quarter. Me heart breakfast sandwich.
By David Hinson on Jan 21, 2010