English 313 -- Summer 2003 -- Announcements

June 25th, 2003 Since this will pose a problem for several of you, I'm making a slight change to the website assessment assignment due next Monday.

If your conversion site does not provide sufficient material for the assignment, you may choose any professional website for your assessment. If you can find the name of the web designer, you should include that person in your audience.

And if you wish, you can even send him/her a copy.

June 24th, 2003 Given the amount of work you folks need to do in the next two weeks, I've decided to cancel the individual BCI Website Assessment. We can either reallocate the points to other assignments or simply drop them from the mix. I'm open to suggestions.

June 23rd, 2003 I will not be available after class today as I have an appointment with my allergist.

Simple Sniffer There will be times when you need to know what specific browser your visitor is using in order to display some portions of the page correctly. While you can check for every possible browser, OS, and version, most visitors will be using Internet Explorer, Netscape, or Mozilla versions 5 or higher, on a Windows machine.

Even so, commercial sites should still account for MacIntosh, Linux, and Opera users.

A simple sniffer which will return the browser type, version, and OS:

function simpleSniffer ()
{

uAgent = navigator.userAgent;

if (navigator.platform.indexOf("Win32") != -1)
{
  if (uAgent.indexOf("Netscape") != -1) browser = "WinNS";
  else if (uAgent.indexOf("Opera") != -1) browser = "WinOp";
  else if (navigator.appName.indexOf ("Explorer") != -1) browser = "WinIE";
  else  if (uAgent.indexOf("Mozilla") != -1) browser = "WinMo";
  else browser = "Unknown";
}
else if (navigator.platform.indexOf("Mac") != -1)
{
  if (uAgent.indexOf("Netscape") != -1)  browser = "MacNS";
  else if (uAgent.indexOf("Opera") != -1)  browser = "MacOp";
  else if (navigator.appName.indexOf ("Explorer") != -1)  browser = "MacIE";
  else  if (uAgent.indexOf("Mozilla") != -1) browser = "MacMo";
  else browser = "Unknown";
}
else //we assume Linux/UNIX
{
  if (uAgent.indexOf("Netscape") != -1)  browser = "LinNS";
  else if (uAgent.indexOf("Opera") != -1)  browser = "LinOp";
  else if (navigator.appName.indexOf ("Explorer") != -1)  browser = "LinIE";
  else  if (urAgent.indexOf("Mozilla") != -1) browser = "LinMo";
  else browser = "Unknown";
}
if ((uAgent.indexOf("5") != -1) || (uAgent.indexOf("6") != -1) || (uAgent.indexOf("7") != -1))
  version = "5plus";
else
  version = "4minus";

return(browser + " "  + version);
}

To use the sniffer, include code like this inside your body element:

bInfo = simpleSniffer();
if (bInfo.indexOf("5plus") != -1)
  //the browser (provisionally) can handle CSS
  //direct to CSS page, set CSS cookie, etc
else
 //the browser cannot handle CSS
 //redirect to nonCSS page, set noCSS cookie, etc
cBrowser = bInfo.split(" ");
switch (cBrowser[0])
{
case "Unknown" : //assume browser cannot handle CSS; break;
case "WinNS" : //call Windows Netscape routines; break;
case "WinOp" : //call Windows Opera routines; break;
case "WinIE" : //call Windows IE routines ; break;
case "WinMoz" : //call Windows Mozilla routines; break;
case "MacNS" : //call MacIntosh Netscape routines; break;
case "MacOp" : //call MacIntosh Opera routines; break;
case "MacIE" : //call MacIntosh IE routines ; break;
case "MacMoz" : //call MacIntosh Mozilla routines; break;
case "LinNS" : //call Linux/UNIX Netscape routines; break;
case "LinOp" : //call Linux/UNIX Opera routines; break;
case "LinIE" : //call Linux/UNIX IE routines ; break;
case "LinMoz" : //call Linus/UNIX Mozilla routines; break;
default : //assume browser cannot handle CSS;
}

Sniffer Test Page

June 20th, 2003 Continue working on the layout problems. For an interesting variation, choose a site you like which uses tables for layout and convert it to div-p-span layout. Thanks to Igor suggesting this idea.

Note 1: If you save the file as "Web Page, Complete" with Internet Explorer, you'll have all the images used on the site.

Note 2: To avoid potential copyright issues, keep the files on the local hard drive.

June 19th, 2003 Rather than continue trying to struggle through server side programming (which is really just an extra for this class), we're heading back to plain XHTML and CSS. We'll have two options:

1. I'll open the floor to any specific XHTML and CSS questions you'd like to explore.

2. You can practice working with XHTML and CSS to achieve the specific page layouts shown in the following screen shots:

Save each of layout as a separate file – we'll take a look at them again tomorrow in the Windows lab.

If you have time, you can play around with additional CSS properties (such as color, font size, etc) or page layouts.

June 18th, 2003 Description : Sample Page : End Description

Description: A teddy bear bonking himself in the face with a bat : End Description

Let's try this a second time.

I think I've got all the bugs worked out.

Your task today is to build a check register which looks like the sample page shown.

Use the style sheet provided:

body { 
  background-color : #669;
  border : none;
  color : #fff;
  margin : 0px;
  padding : 0px;
  }
div {
  background-color : #ccf;
  color : #003;
  height : 300px;
  margin : 5px;
  overflow : auto;
  }
form {
  background-color : transparent;
  color : #003;
  margin : 5px;
  }
h1 {
  background-color : #eef;
  color : #003;
  padding : .2em;
  }
input.checkbox {
  margin-right : 122px;
  }
label {
  display : block;
  margin : 5px;
  text-align : right;
  width : 300px;
  }
p {
  clear : right;
  height : 26px;
  margin : 0px 0px 2px 0px;
  padding : 0px;
  }
.darkgray {
  background-color : #ccc;
  color : #000;
  }
.lightgray {
  background-color : #eee;
  color : #000;
  }
span {
  background-color : transparent;
  border : 1px solid #000;
  color : #000;
  float : right;
  }
span.date {
  padding : 2px;
  text-align : left;
  width : 100px;
  }
span.payee {
  overflow : hidden;
  padding : 2px;
  text-align : left;
  width : 300px;
  }
span.amount {
  padding : 2px;
  text-align : right;
  width : 100px;
  }
span.type {
  padding : 2px;
  text-align : center;
  width : 100px;
  }
span.balance {
  padding : 2px;
  text-align : right;
  width : 100px;
  }

Use the following as your body contents:

<script type="text/javascript">
<!--
writePage();
//-->
</script>

Your page should prompt the visitor for a name and starting balance when it first loads. The Submit button calls addLine which creates a new line and appends it to the register. If the balance falls below zero, the balance should be in red (you'll need to make your own style for this).

Javascript commands you'll use include:

lineCount = 0;
yourName = "";
dateArray = new Array();
payeeArray = new Array();
amountArray = new Array();
typeArray = new Array();
balance = 0;

if (navigator.appName.indexOf ("Explorer") != -1) isWinIE = true;
else isWinIE = false;

function newBalanceString()
{
  balanceString = "<p class=\'darkgray\'><span class=\'holder'><\/span><span class=\'balance'\>" + balance + "<\/span><\/p>";
  return(balanceString);
}

function writePage()
{
  divName = "contentDiv";
  if (yourName == "") yourName = prompt("Please enter your name.","");
  balance = prompt("Please enter the starting balance.",0);
  balanceString = "<p class=\'darkgray\'><span class=\'balance'\>" + balance + "<\/span><\/p>";
  document.write("<h1>" + yourName + "\'s Checkbook</h1>");
  document.title = yourName + "\'s Checkbook";
  document.write("<div id=\'contentDiv\'>");
  document.write(balanceString);
  document.write("<\/div>");
  document.write("<form id=\'dataForm\' action=\'\'><fieldset>");
  document.write("<label>Date: <input type=\'text\' id=\'dateInfo\' \/><\/label>");
  document.write("<label>Payee/Payer: <input type=\'text\' id=\'payeeInfo\' \/><\/label>");
  document.write("<label>Amount: <input type=\'text\' id=\'amountInfo\' \/><\/label>");
  document.write("<label>Check if Credit: <input class=\'checkbox\' type=\'checkbox\' id=\'typeInfo\' \/><\/label>");
  document.write("<input type=\'button\' onclick=\'lineCount++; addLine();\' value='\Submit\' \/>");
  document.write("<input type=\'button\' onclick=\'document.getElementById(divName).innerHTML = newBalanceString(); lineCount = 0;\' value='\Clear Checkbook\' \/><\/fieldset><\/form>");

}
function addLine()
{
  //Step 1: Assign the values of the input elements to variables -- retrieve value for the first three, checked for the last
  //Step 2: Calculate the new balance -- for credit, use this equation: balance = parseInt(balance) + parseInt(cValue);
  //Step 3: Build a string called newString by adding in the various elements needed for the line
  //        Note that the string begins with a p element that has an alternating class name -- use lineCount to set the value
  //        Build the string in reverse order -- the span for balance first, the span for transaction type second, etc.
  //        Use the following two commands as the last lines in your function
  document.getElementById("contentDiv").innerHTML = document.getElementById("contentDiv").innerHTML + newString;

  if (isWinIE) document.getElementById(idPayee).style.height = "24px";

}

If you finish your checkbook early, you should try adding in a line-edit function using the arrays already in place. You'll need to assign the variables you created in the addLine function to the related arrays and add a button to each line which calls a new function which allows you to change the values for a line and then rebuilds the check register with a for loop.

When you're finished, you may want to view my solution: Checkbook Exercise

June 9th, 2003 Today we'll be exploring the use of color. A couple facts:

There are 16,777,216 possible colors.
There are 4,096 generally useful colors.
There are 216 so–called web safe colors.

We'll also use Catman's Color Brightness, Contrast, and Harmony Tool and Catman's CSS and XHTML Utility during class. Hold down the shift key to open each in a separate window.

Color Distinctions
#9999cd #9999ce #9999cf #a999cf

June 6th, 2003 To begin today's class, open Catman's CSS and XHTML Utility with both Internet Explorer and Mozilla. Make sure you can see a portion of both utility windows in both browsers to facilitate switching back and forth.

We'll be working with these CSS properties today:


font-family [specific family sans-serif serif monospace cursive fantasy]

font-size [xx-small x-small small medium large x-large xx-large smaller larger]

font-style [italic oblique normal]

font-variant [small-caps normal]

font-weight [bold lighter bolder normal 100 200 300 400 500 600 700 800 900]

letter-spacing

line-height

text-align [left right center string justify]

text-decoration [underline overline line-through blink none]

text-indent

text-transform [capitalize uppercase lowercase none]

word-spacing

We'll also look at this page listing a large number of font-families Hold down the shift key when opening this page.

June 5th, 2003 To begin today's class, open Catman's CSS and XHTML Utility with both Internet Explorer and Mozilla. Make sure you can see a portion of both utility windows in both browsers to facilitate switching back and forth.

Next paste these lines in the CSS box:


* {

  border : 1px solid #000;

  margin : 0em;

  padding : 0em;

  }

body {

  border : none;

  margin : 0em;

  padding : 0em;

  }

.container {

  height : auto;

  width : auto;

  }

span {

  background-color : #ccc;

  }

Next paste these lines in the XHTML box:


<div class="container">

<span>This is my sample span box 1.</span>

<span>This is my sample span box 2.</span>

<span>This is my sample span box 3.</span>

<span>This is my sample span box 4.</span>

<span>This is my sample span box 5.</span>

<div>This is my sample div box 1.</div>

<div>This is my sample div box 2.</div>

</div>

Online Copies of Assignments Make sure that your online versions of your assignments are accessible to your classmates. You should include links to the assignments on your homepage (or perhaps from a page set aside for English 313 linked from your homepage).

I've put together a mockup of what a minimal links page might look like: Sample Homepage for English 313.

June 4th, 2003 I've thrown together a perl script that allows you to play around with CSS and XHTML without needing to save files:
Style and XHTML Utility

We'll play around with this during class today.

Description : A happy, hopping bunny : End Description

Description : A happy, hopping bunny : End Description

My thanks to Dustin for giving me the inspiration.

June 3rd, 2003 If you want, you can retake the XHTML Quiz as often as you wish.

May 29th, 2003 Although it's not quite done, I've made the XHTML guide available: Catman's XHTML 1.1 Elements Reference Guide

May 29th, 2003 Use the ISU FTP Utility to connect to your website. Use the mouse to drag your myxhtml.html file to the desktop.

You can doubleclick on the file to open it in the browser. To edit the file, doubleclick on the MacIntosh hard drive, open the Applications folder, and open SimpleText.

If you have trouble with the FTP utility with Internet Explorer, try Mozilla.

For class: During class, you'll need to copy and paste this line:

ondblclick="this.composite.value=this.namefield1.value + ' ' + this.namefield2.value + ' ' + this.namefield3.value;"

New XHTML Guide I'm putting together a briefer XHTML element guide. The guide lists only XHTML 1.1 elements — if you don't see it listed, it's not legal. The guide should be online later today.

May 28th, 2003 Today between 9:30 and 12:00, if I'm not in my office, I'll be in one of the Ross Mac labs trying to solve the menu problem with the course website.

Remember that we meet for conferences every week. This week, we're reviewing your WEs to make sure you've got the right idea.

May 27th, 2003 Today during class we'll be using the Minimal XHTML File.

During the week, we will refer now and again to the XHTML Abstract Modules section of Modularization of XHTML at the W3C.

May 23rd, 2003 I've put together a sample price-generation file for your use in the BCInc group project. When we're ready to start the project later next week, you may find this file helpful.

Note that I've included only minimal design and funcationality, and that this represents only one option of how you can use javascript to implement the product display pages.

Getting a Jump on XHTML For those interested in getting started with XHTML, I've started working on a reference guide which describes the available tags. Please be aware that this guide is currently extremely incomplete — however, it can get you started in the right direction.

May 22nd, 2003 I have assigned you to groups as follows.

Group 1: Ryan, Nick, and Dustin
Email List: 313g1

Group 2: Jenna, Helen, and Sakura
Email List: 313g2

Group 3: Igor, Joe, and Stewart
Email List: 313g3

We will not begin work on the group project until next week, but I'll give you time toward the end of class today to meet and get to know each other.

Chatbear: As you may have noticed, the sticky threads did not work. Perhaps when Mr. Smith launches V2 later this month, I'll be able to correct that.

May 20th, 2003 Conferences begin today.

I have changed the wording on late weekly exercises to reflect current policy.

For Class: Two lines you'll need to copy and paste:

ln -s /afs/iastate.edu/class/12003.engl.313/WWW/ engl313

add -q public www compression

I will explain when and where to use these during class today.

We will also look briefly at the BCInc Bee and Orchid Combination Listing page and its related javascript file.

May 19th, 2003 English 313 begins meeting today. On Monday, Wednesday, and Friday each week, we will meet in Ross 115. On Tuesday and Thursday each week, we will meet in Ross 137.

Note that class meetings run from 12:10 until 1:10 each day. Schedule your other activities accordingly. If you need more information, please review page 21 of the official policy.

April 28th, 2003 This class does not begin meeting until May 19th.

English 313Announcements

English 313
Announcements