CGS 2820 e-Learning Schedule
Week Date Assignments
0

Campus

1/15

e_learning

1/17

e-Learning Orientation-BTECH 217 11:00-1:45 p.m. 1/17

register current email with John Taylor or obtain free email account with no ads from John Taylor

pick up hard copy of WebCT Guide

determine optional meeting times to make streaming video lessons:
9:30-11:00 a.m. Wed
and/or
11-12:15 p.m. Tues
and/or
4:00-5:00 p.m. Tues
and/or 7:00-8:00 p.m. Wed


purchase Web Yoda WAW Package $100

Address: WebYoda, Inc.
1859 Winery Way
Tallahassee, FL 32311
Phone: 1-850-524-9632
Toll Free: 1-877-Web-Yoda
Fax: 1-850-656-1499
Email: comments@webyoda.com



fill-out data card and/or roll with email

pick-up CSS handout

Pickup CD from instructor : Snag It, HS 4.51, MS Agents
1

Campus

1/22

e_learning

1/24

no classes Monday 1/19 MLK Holiday

1. read Tutorial 1: Creating a Web Page
and
view and complete Web Yoda Beginning XHTML Lessons:
   a. Introduction
   b. Lesson 1: Basic HTML Tags
   c. Lesson 2: Font Tags
   d. Lesson 3: Lists

2. send first e-mail to:
jtaylor@hccfl.edu;
and
jtaylor80e@hccbrandon.net eLearning class;
or
jtaylor80r@hccbrandon.net Thursday 11:00 class;
and
jtaylorcgs2820@yahoo.com

subject 80e: first email (eLearning class)

subject 80r: first email (11:00 Thursday class)
content: describe your background, your major, why you are taking this course, if you have a web site, include the URL

3. test Tutorial Zero Quiz from your ISP at Home
http://www.hccfl.edu/faculty/john_taylor/cgs2820/80testmenu.html

4. log-on to WebCT account

Log on to new WebCT to complete exams:
Log On Web CT 4.+

Your WebCT ID will be the first initial of your first name and the first initial of your last name, combined with your seven digit Student ID number (NOT Your SS#) for example:
John Taylor's user name would be jt1234567

Important Note: Your initials are case sensitive and must be in lower case.

Your password is your six digit birthday. For example if you were born on July 7, 1977, your password would be 070777

Log on to Old WebCT 3.+: Log On 3.+

5. Ad-Aware 6.181

download, install and run: Ad-Aware
http://www.lavasoft.de/support/download/

Spybot Search and Destroy v1.2

There are many programs available for you to protect your computer from intuders. Spybot Search and Destroy is a favorite with many of the techie students at HCC. Once you see what Ad-Aware cleans from your machine, this program could clean things the first missed.

Download Spybot and Destroy from PCWorld Magazine

ZoneAlarm v3.7.202

Another program that you may want to consider to protect your computer from unwanted intrusion is Zone Alarm.

Free Zone Alarm Download from PCWorld Magazine

6. complete resume page with image using NotePad or HomeSite as described in class hand coding the HTML tags for the text and list
a. if you don't have a photo, complete the page without the photo. It can be inserted later.
b. you should not put internal links to jump down the page in the document unless it is greater than a two screen scroll

(Note: Old text book has resume directions in Chapter 1 to create a resume of Mary Taylor [no relation], but if you have a resume in Word or other word processing doucumet, copy the resume text to clip board and paste into HomeSite. Then add the tags to position and format the text)

7. Check the spelling on the class roll for your name and email address:
eLearning Class: http://www.hccfl.edu/faculty/john_taylor/cgs2820/spring04/80atdS04ew.htm
11:00 Thursday Class: http://www.hccfl.edu/faculty/john_taylor/cgs2820/spring04/80atdS04r.htm
If your email is incorrect or left blank, then you are not receiving the class group emails from the instructor. Notify the insytructor via email. Remember to start your email with 80e: or 80r in the subject line, then your subject description like 80e: Missing Email or 80r: wrong email or 80e: Misspelled name or 80e: change first name to nickname, etc

2

Campus

1/29

e_learning

1/31

Read Tutorial 2: Adding Hyperlinks to a Web Page
          and/or
complete Web Yoda Beginning XHTML Lessons:
   a. Lesson 4: Linking Tags

set up Group email in address book
send 1st group email to class: "80e: 1st Group Email"
describe to the class your background and major
send the URL of your resume page

Obtain web space from John Taylor/private ISP
download and install ws_ftple.exe
ftp://ftp.webyoda.com/pub/
post your resume with image

install HomeSite 4.51 or
download free 30 day trial of HomeSite 5.0:
http://www.macromedia.com/cfusion/tdrc/index.cfm

Use HomeSite to:
create Home Page with Links to:
Resume, Photo Album (Thumbnails), Favorites, Interests,

In addition to the Web Yoda Tutorial on HomeSite, I created a rather crude web page to intro Homesite to you at:
http://www.hcc.cc.fl.us/faculty/john_taylor/homesite/homesiteb.html

complete Tutorial 1 Quiz
complete WebCT Exam: Tutorial #1

3

Campus

2/5

e_learning

2/7

read Tutorial 3: Designing a Web Page
          and/or
complete Web Yoda Beginning XHTML Lessons:
   a. Lesson 5: HTML Graphics
   b. Final Note: XHTML Validation


Use HomeSite to:
create Home Page to:
Create Photo Album Thumbnail Page and Photo Pages
Create Favorites Page
Create Interest's Page

complete HTML Taylor Tutorial 2 Quiz
complete WebCT Exam: Tutorial #2

4

Campus

2/12

e_learning

2/14

 post Photo Album, Favorites, Interests Pages

Review Section 3.3 of tutorial 3: Image maps
          and/or
complete Web Yoda Advanced XHTML Lesson:
   a. Lesson 3: Graphics

complete an image Map with at least three hot spots and use the three differnt types of hot spots: rectangle, circle, and polygon

Image Maps are explained in the Web Yoda Advanced XHTML Lesson 3 Courseware. I also created an additional power point on tutorial 3 at:
http://www.hcc.cc.fl.us/faculty/john_taylor/cgs2820/elearning/80Les3_files/frame.htm

My online Example of a complex image map:
http://www.hccfl.edu/faculty/john_taylor/binarynum/bitswitch.html
If you click on a switch, the binary number will switch from 0 to 1, the light bulb will come on and the decimal number equivalent for the 8 bit binary number will be shown in the box to the right. You will notice that if you click on source, the page is done in frames so that the images may be preloaded to give a seamless effect that you are click the switch to tuwn it on. Therefore to see the code for the bit map, you have to access:
http://www.hccfl.edu/faculty/john_taylor/binarynum/0.html
There are 256 html files and 256 different nimages, each with eight rectangular hot spots. 0.html through 255.html

As a second example that works on the same principle, I did 96 html files each with a image on the page. This page has about 50 hot spots per file. Again i used frames (Chapter 5) to play this document so that all 96 images would preload:
http://www.hccfl.edu/faculty/john_taylor/letters/binarylet.html
However, if you want to view the image map code on one of the 96 files, here is the file for the space bar:
http://www.hccfl.edu/faculty/john_taylor/letters/space.html
Looking at the code, each file is named after the character on the keyboard, and each image has the same corresponding character.gif file name. The secret to making it look seamless is not only preloading the images. but also making the images exactly the same size and each key in exactly the same location.

There is an unfinished image map on the home page for COP 2822. If click on the Object heirarchy image down on the righthand portion of the page, the red, magenta, or aqua colored boxes you will junp to a page that explains that object. However, if you click on a yellow box, it will do nothing. I did not finish the project. You could finish this for me, making the yellow boxes, hot sports to explain that object:
http://www.hcc.cc.fl.us/faculty/john_taylor/cop2822.html
A JavaScript student Winnie Que did an excellent job writing the code for the completed DOM (Document Object Model) at:
http://www.hcc.cc.fl.us/faculty/john_taylor/objects/qiu/ObjectHierarchy1.html
It is a little more complicated than the code for the previous two examples, but you could get the URL for the yellow boxes by clicking on each to complete my project on the home page. Also an irrerular polygon could be setup on the image that would link you to her page

My suggestion for you is to take a photo of a group of people, and make an image map on the photo, which would link you to another page about the person in the photo. Put this in your photo album page.

My online JavaScript example of clicking a keyboard that was done first before I created the pure image map above is at:
http://www.hccfl.edu/faculty/john_taylor/keyboard/index.html
has a JavaScript bug. It works great for lowerccase, but if you click the shift key, then press a letter (uppercase) it gives an inaccurate switch setting, but if you click the letter a second time it gives you the correct setting. This was done above without JavaScript and simply do this is HTML with a complex image map. But this would require 96 separate web pages for it to give the samne effect. It took me about 10 hours to finish that site the hard simple HTML Image map way, but it works great with no errors.

I will have to think a while to comeup with another complex html image map example for some one to do. Maybe Turbo Hall will be a challenge. I really need a turbo hal animated gif. If want a super porject that needs to be on several key web pages, call me about a project described below.

review pages 3.23-3.24 animated gifs
and Web Yoda's Advance XHTML Lession 3-Animated Graphics

use Paint Shop Pro: Animation Shop 3 to
complete an animated GIF

In BTECH 203 as well as BTECH 217, Paint Shop Pro 7 is installed on the machines. PSP7 is developped by Jasc Software. There is a free 30 day download to sample Paint Shop Pro 7 which also comes bundled with Animation Shop 3 which we use to create an animated gif. First you need to have several images you wish to bundle together as animated gif. For it to be consistant you need to resize all the images so they are exactly the same width and height. Then use the wizzard in Animation Shop 3 and follow the instructions step by step.

The Computing Cycle (21 cells)     How did I get the pause at the end?

use PhotoSop or Paint Shop Pro or find on the web a graphic design for your web site
5

Campus

2/19

e_learning

2/21

 read Tutorial 4: Designing a Web Page with Tables
           and/or
complete Web Yoda Advanced XHTML Lesson:
   a. Lesson 1: Table Tags

Your assignments are to complete the following or the Web Yoda Tables assignments:
_____ (50) Tutorial 4: Invisible Table to Position Text and Image on Page
        Sample all Course Homepages: CGS 1100 Home Page
_____ (50) Tutorial 4: Using Table Header tags
        Sample: Click Problem#2
        Sample2: Magic Number Game 127 (Uses header tag to center numbers in cells)
_____ (50) Tutorial 4: Using colors in Table (Felix Cat or check board)
        Sample: Click Problem#1
        Sample2: Click Bonus Problem #2
_____(100) Tutorial 4: American Flag (Colors, Col Span, and Row Span, hspace)
        Sample: Click Bonus Problem #1
_____ (50) Tutorial 4: Time Chart, Store Schedule, Office Hours Table
        (with data), Calendar
        Sample: Click Problem#3
        Sample2: Click on Bonus Problem #3
        Sample3: John Taylor's Office Hours

_____ (50) Tutorial 4: Nested table-Picture Frame
        Sample1: Each Table Cell has a nested table: Polyatomic Ions
        Sample2: Sample Home Page for CGS 1100 has a nested table:
        CGS 1100 Home Page
        Sample3: Also CGS 2820 Home Page has nested tables:
        CGS 2820 Home Page

complete Tutorial 3 Quiz
complete WebCT Exam: Tutorial #3
6

Campus

2/26

e_learning

2/28

 Table Assignments
The American Flag:
Right click on star image to save for the homework.
_____(100) Tutorial 4: American Flag (Colors, Col Span, and Row Span, hspace)
    Sample: Click Bonus Problem #1 or
     Spring04 Class Demo Flag
7

Campus

3/4

e_learning

3/6

 complete Tutorial 4 Quiz
complete WebCT Exam: Tutorial #4

read Tutorial 5 Using Frames in a web Page
          and
complete Web Yoda Advanced XHTML Lesson:
   a. Lesson 4: Frame Tags

Create at least one frame page in your web site. Samples:
8

Campus

3/11

e_learning

3/13

 Spring Break College Closed 3/8-3/13
9

Campus

3/18

e_learning

3/20

 read Tutorial 6 Creating Web Page Forms
          and/or
complete Web Yoda Advanced XHTML Lesson:
   a. Lesson 2: Form Tags


more details on Forms Projects will be inserted here

complete Tutorial 5 Quiz
complete WebCT Exam: Tutorial #5
10

Campus

3/25

e_learning

3/27

 Forms Project

more details on Forms Projects will be inserted here
11

Campus

4/1

e_learning

4/3

 read  Tutorial 7: Working with Cascading Style Sheets
          and/or
complete Web Yoda Cascading Style Sheets Lessons:
   a. Lesson 1: Basic CSS
   b. Lesson 2: Background Colors and Images
   c. Lesson 3: Text and Fonts
   d. Lesson 4: Padding, Borders, and Margins
   e. Lesson 5: Lists and Forms



CSS Projects

more details on CSS Projects will be inserted here

complete Tutorial 6 Quiz
complete WebCT Exam: Tutorial 6
12

Campus

4/8

e_learning

4/10

 no classes at HCC 11/11 Veterns Day

continue Tutorial 7: Cascading Style Sheets

continue  Tutorial 7: Working with Cascading Style Sheets
          and
complete Web Yoda Cascading Style Sheets Lessons:
   a. Lesson 6: Float, Position, and Layers
   b. Lesson 7: Classes, IDs, and Style Sheets
   c. Lesson 8: CSS Special Effects
   d. Lesson 9: CSS Best Practices



CSS Projects

more details on CSS Projects will be inserted here
13

Campus

4/15

e_learning

1/17

complete HTML Tutorial 7 Quiz
complete WebCT Exam: HTML Tutorial 7

Happy Tax Day 4/15/04 (Make Uncle Sam Happy--send him your money)

MicroSoft Agents

MSAgent Directions for Student CD:

http://www.hcc.cc.fl.us/faculty/john_taylor/msagents/msagent1.html

Download Mash:
http://www.bellcraft.com/mash/

Use Mash to create a MASH script and place in at least one of your web pages

14

Campus

4/22

e_learning

4/24
read Tutorial 10 Creating a Multimedia web Page

Pickup handout on using ToolBook Assistant to create a streaming video web page

more details on multimedia projects will be inserted here
15

Campus

4/29

e_learning

5/1

 complete Tutorial 10 Quiz
complete WebCT Exam: Tutorial 10 submit group email with link to web site
16

Campus

5/6

e_learning

5/8 (no class)

 complete online Final Exam and/or Take Web Yoda Certification Exam