Transcript HCI 201 Week 10

HCI 201 Week 10
Course Wrap Up
Agenda
Presentations
 Web Technology Tools
 Form Processor
 CGI
 Final project

Web Technology Tools

This course required that you hand
code everything:

To learn proper format



What tags need to be there
What tags are “optional”
To learn coding technique


How to comment your code
How to make your code readable and
understandable
Web Technology Tools

This course required that you hand code
everything:

To understand what you are creating




How to make an image map
How to make nested tables
How CSS differs from html
To understand the underlying technology



How to use FTP
How to use Telnet
How each is different and why you need them both
Web Technology Tools
Now that you have a basic
understanding, you can use tools to
assist with your coding.
 Web Tech tools include

HTML editors
 WYSIWYG editors

HTML Editors

Homesite- (formerly Allaire, now Macromedia) is
one of the most widely used commercial HTML
editors.

Similar to using notepad but it has built in features to
make coding easier like





Tag validation-checks for errors with tags in html,and several
other languages to boot.
Built in FTP
CSS editor
Code snippet-allows you to reuse and save common code
Code generator- using wizards you can rely on Homesite to
create the code for numerous things.
WYSIWYG Editors

What you see is what you get: point and
click editors.
Microsoft FrontPage
 Macromedia DreamWeaver
 Adobe GoLive or PageMill

Image Editing
Use image editing software to create gifs, jpegs,
etc, for your sites. Many programs offer tools to
assist with web specific things like roll-overs,
image maps, and transparency.
 Fireworks
 Photoshop/Image ready
Form Processor



This is one of the 2 options for the form handling
you need to implement for your final project.
Of the 2 this is the easier one.
I have an example set up using Response-omatic


It took me 5 minutes to set up.
It will generate a form for you- modify your form so
that it incorporates the necessary info (action/method,
hidden fields etc). You still need to create your own
form…
CGI







First read this and do the sample CGI they recommend
to get used to cgi.
Find an existing CGI at a script source like Matt’s.
Download it to your computer- it will come zipped
Unzip it and read the “read me” file.
Customize per the instructions on the read me file.
Upload to your Hawk Account to the cgi-bin folder you
create inside your public_html file.
Test and tweak as needed.
Final Project







You need to hand code everything.
You need to have either cgi or a form processor
handle your form data.
Everything font and color related needs to be
formatted using an external CSS page.
There are CSS resources at WebMonkey,
W3Schools, and HTMLGoodies for starters.
Hard copy of papers due by 5:45 11/26.
Website URL emailed to me by 9:00 11/26.
No late work accepted.