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. Homesite 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-o- maticexampleResponse-o- matic 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.read this Find an existing CGI at a script source like Matt’s.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.WebMonkey W3SchoolsHTMLGoodies Hard copy of papers due by 5:45 11/26. Website URL ed to me by 9:00 11/26. No late work accepted.