e_learning
5/17 thru 5/22
e-Learning Orientation-BTECH 217 11:00-1:45 p.m. 5/22
register current
email with John Taylor or obtain free email account
with no ads from John Taylor-add the email to excel student
contact list before you leave class.
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 excel spreadsheet
roll with current email(s) and web site
pick-up CSS handout
Pickup CD from instructor :
Snag It, HS 4.51, MS Agents
e_learning
5/23 thru 5/25
1. read Tutorial 1: Creating a Web Page
and
view, complete, and post Web Yoda Beginning XHTML Lessons:
Introduction Lesson #1: Basic HTML TagsCreate the web pages from Web Yoda's courseware as outlined below, or view the sample page output if you do not use Web Yoda:
Problem #1 Text Allignment Problem #2 Horizonal Rules Problem #3 Preformatted Text Bonus #1 Pyramid of Horizonal Rules Bonus #2 Saturday's To Do List Lesson #2: Font Tags Problem #4 Font Sizing Problem #5 Subscript/Superscript/Special Characters Problem #6 Bold Font Colors Bonus #3 Font Colors and Sizing Bonus #4 Colored Smilley Lesson #3 List Tags Problem #7 Unordered Lists Problem #8 Ordered Lists Problem #9 Definition Lists Problem #10 Nested Lists Bonus #5 List of Font Variations Bonus #6 HTML Tag Definitions
2. send first e-mail to:
jtaylor@hccfl.edu;
and
jtaylor80e@hccbrandon.net eLearning class;
and
jtaylorcgs2820@yahoo.com
subject 80e: first email
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
Your password is your six digit birthday. For example if you were born on July 7, 1977, your password would be 070777
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. Check the spelling on the class roll for your name and email address:
eLearning Class: http://www.hccfl.edu/faculty/john_taylor/cgs2820/summer04/80atdSum04e.htm
If your email is incorrect
or left blank, then you are not receiving the class group emails from the
instructor. Notify the instructor via email to all three addresses.
Remember to start your email with 80e: in the subject line, then your subject
description like 80e: Missing
Email or 80e: wrong
email or 80e: Misspelled
name or 80e: change first name
to nickname
, etc
download free 30 day trial of HomeSite 5.5:
e_learning
5/26 thru 5/29
1. complete a resume or biography page with image using NotePad or HomeSite as described in class hand coding the HTML tags for the text and list for your About Me web site:
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
or
Your instructor's current resume at : currentvita.htm was created with Microsoft's Word. It is impossible for you to read the code created by Microsoft during this WYSIWYG program. You can recreate this resume for your instructor using NotePad or HomeSite using the techniques learned in Tutorial #1. Please note that the email links are was not properly aligned when the .doc file was converted to the .htm file for the Internet.
(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) 2. Read Tutorial 2: Adding Hyperlinks to a Web Page3. complete/post Web Yoda Beginning XHTML Lessons:
Lesson #4 Linking Tags Problem #11 Linking to Local Files Problem #12 Linking to URLs Problem #13 Linking using mailto: Problem #14 Linking within a File
4. 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/include the URL of your resume page
5. Obtain web space from John Taylor/private ISP if not complete first class period
6. download and install ws_ftple.exe
ftp://ftp.webyoda.com/pub/
post your resume with image
7. install HomeSite 4.51 or
download free 30 day trial of HomeSite 5.5:
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
8. complete Tutorial 1 Quiz
9. complete WebCT Exam: Tutorial #1
e_learning
5/30 thru 6/1
1. read Tutorial 3: Designing a Web Page
2. complete Web Yoda Beginning XHTML Lessons:
Lesson #5 HTML Graphics Problem #15 Body Tag Colors Problem #16 Background Texture Problem #17 Display Images Problem #18 Graphic Links Problem #19 Graphic Bullets Bonus #7 Nine ball Deluxe Bonus #8 Crazy "8"
3. Use HomeSite to:
create:
a. Photo Album Thumbnail Page and Photo Pages of each thumbnail (make the thumbnail a clickable link to the page with full size picture along with text about the photo. Each thumbnail should be the same size on the photo album page.
b. Favorites Page (list of linksin three to five catagories)
c. Interest's (Hobbies) Page (text description, maybe images, and another list of links
4. complete HTML Taylor Tutorial 2 Quiz
5. complete WebCT Exam: Tutorial #2
e_learning
6/2 thru 6/5
2. Review Section 3.3 of tutorial 3: Image maps
3. complete Web Yoda Advanced XHTML Lesson:
Lesson #3 Graphic Tags Problem #11 Transparacy and Animation Problem #12 Internet Mail Logon Problem #13 Snake Anatomy Bonus #7 Security Login
4. Turbo HAL's image has a white background. Use Paint Shop Pro to change the white background to transparent. In this course, we use Paint Shop Pro (on your cd) to set the transparent color for a graphic. To do this using PSP, we will open an existing GIF file, choose the "Set Palette Transparency" option, and then use the eyedropper tool to select the color to display as transparent. Click "View Results" below to simulate this process. Once you have selected the transparent color, the graphic must be saved in the GIF format (which supports transparent colors).
complete an image Map with at least three hot spots and use the three differnt types of hot spots: rectangle, circle, and polygonImage 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 images, 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.
5. review pages 3.23-3.24 animated gifsand Web Yoda's Advance XHTML Lession 3-Animated Graphics
use Paint Shop Pro: Animation Shop 3 to
complete an animated GIF for you About Me Web Site
In BTECH 203 as well as BTECH 217, Paint Shop Pro 7 is installed on the machines. PSP7 is develop 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.
6. use PhotoShop or Paint Shop Pro to create or find on the web a graphic design for your About Me web site and post on your Home Page (upper left hand courner)
e_learning
6/6 thru 6/8
complete Web Yoda Advanced XHTML Lesson:
Advanced XHTML Assignments Lesson #1: Table Tags Problem #1 Table of Felix Problem #2 Multiplication table Problem #3 Office Hours Problem #4 Life in a Bug Jar Problem #5 Student Report Card Bonus #1 The American Flag Bonus #2 Checkers Anyone? Bonus #3 June calendarAlternate assignments are to complete the following in place of the above Web Yoda Table 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
e_learning
6/9 thru 6/12
continue to complete Table Assignments
The American Flag web Yoda
Assignment must be completed if you are doing the alterante assignments
from Web Yoda::
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
read Tutorial 5 Using Frames in a web Page
complete Web Yoda
Advanced XHTML Lesson:
Lesson #4 Frame Tags Problem #14 Bonus Selector
Create at least one additional frame page in your web site. Samples:
- Use Frames for Navigation:
Web Yoda Homework - Uses Frames for navigation:
Web Yoda Bonus Homework - Uses Frames to pass data from One Web Page to another:
Temperature Conversition Interactive - Also Uses frames to pass data from one web page to another:
Magic Character Game - Use frames to change top half of page with Interaction on lower
half:
Keyboard Bit Simulator - Uses Invisble frame to preload 96 images:
http://www.hccfl.edu/faculty/john_taylor/letters/binarylet.html
complete Tutorial 4 Quiz
complete WebCT Exam: Tutorial
#4
e_learning
6/13 thru 6/15
read Tutorial 6 Creating Web Page Forms
complete Web Yoda Advanced XHTML Lesson:
ADV XHTML Lesson #2: Form Tags Problem #6 Favorites Survey Problem Problem #7 $9.99 Shirt Company Problem Problem #8 ACME Insurance Company Bonus Bonus #4 Course Evaluation Form Problem Problem #9 Cars R Us Problem Problem #10 Trivia Question Form Bonus Bonus #5 Dream Finder Network Bonus Bonus #6 POP Quiz or (volunteer to do an online test for the instructor)
complete Tutorial 5 Quiz
complete WebCT Exam: Tutorial #5
e_learning
6/16 thru 6/19
read Tutorial 7: Working with Cascading Style Sheets
complete Web Yoda CSS Lessons:
Cascading Style Sheets Lesson#1 Basic CSS Problem #1: Basic CSS Syntax Lesson #2 Background Colors and Images Problem #2 Rainbow Background Problem #3 Miniture Chess I Bonus #1: Verticle Rainbow Background Lesson #3 Texts and Fonts Problem #4: vascading Style Sheets Sale Problem #5 Hurricane Andrew Lesson #4 Paddings, Border and Margins Problem #6: Online Discount Coupon Problem #7: Christmas Specials Bonus #2: Red Dashed Sale
completeTutorial 6 Quiz
complete WebCT Exam: Tutorial 6
e_learning
6/20 thru 6/22
continue
Tutorial 7: Cascading Style Sheets Lessons
Read Handout from first class: CSS Templates Chapter
complete Web Yoda Cascading Style Sheets Lessons:
Lesson #5 Lists and Forms Problem #8: Ultimate Purple Picture Gallery Problem #9: Quisp Cereals Kids Club Lesson #6: Float Position and Layers Problem #10 Albet Einstein Biography1 Problem #11 Miniture Chess II Problem #12 Pink Flowers Logo Lesson #7 Classes, ID, and Style Sheets Problem #12: Embedded Class Styles Problem #13: Embedded ID Styles Lesson #8 CSS Special Effects Problem #14 Albert Einstein Biography II Problem #15 Clearance Sale Problem #16 Bonus Menu Bars
e_learning
6/23 thru 6/26
read Tutorial 10 Creating a Multimedia web Page
MicroSoft Agents (not in Text or Web
Yoda)
MSAgent Directions for Student CD:
http://www.hcc.cc.fl.us/faculty/john_taylor/msagents/msagent1.html
Download
Mash (30 day free trial):
http://www.bellcraft.com/mash/
Use
Mash to create a MASH script (.msh extention)with at least one agent
character dialog(saving .msh will allow you to edit the script later, if
needed). If you use Microsoft's Merlin, then the
character is already installed in Windows ME, 2000, and XP. If you also
use Peedy, Genie, or Robbie from Microsoft, then MASH's
javascript generated will create popup a window to automatically download
the character into the ../msagent/chars directory if the user does
not have those characters installed. If you use another character, you
should create an ftp directory link so that the user can download andf
install the character. Go to the script output tab of MASH and save your
script as a HTML/JavaScript to the clipboard. Paste the script in the head
of the document below the title and meta tags. You should complete at
least one agent application on your web site.
Also reference the URL or streamming video web page (URL will be sent via group email) on how to modify the script so that the agent will be triggered by clicking a button instead of automatically running everytime you enter the page. It would be wise to make you agent page as separate file iuf you do not make a button to trigger. After a few times the agent will annboy the user.
Pickup handout from LaFran Redding in BACA
207 on using ToolBook Assistant/Instructor to create a streaming video web
page. (Do Not attempt until instructor sends you an email, this task may
be deleted for Summer 2004)
complete HTML Tutorial 7 Quiz
complete WebCT Exam: HTML
Tutorial 7
e_learning
6/27 thru 6/29
continue Tutorial 7: Working with Cascading
Style Sheets
finish CSS Web Yoda Lessons
complete Tutorial 10 Quiz
complete WebCT Exam: Tutorial 10
submit group email with link to any additional web pages created that are not linked on Home Page
complete online Final Exam and/or Web Yoda Certification Exam 11pm 6/29
6.5
6/30
Al's Finger Licking Good Bar-B-Que
Allen Reynolds Owner/Operator
(813) 956-0675
located next to Super WalMart Hwy 60 Behinf Goodwill
(Those that have designed Al a Home Page will be treated by Al to lunch and may be contracted by Al to develop his web presence)