Advanced Website Information

1
Advanced Website Information

• CSS
• Forms
• JavaScript
• Search Engines

2
Agenda

• More CSS
• Usability
• Making Forms
• CGI
• Intro to JavaScript
• The Remaining Assignments
• The Midterm

3
More CSS

• SPAN tag
• Rather than using styles to change the appearance
  of content within a tag, you may want to change
  the appearance of only a portion of the tag's
  contents. You can do this with the ltSPANgt tag.
• .bigger font-size 120
• This winter will be ltspan class"bigger"gtcolder
  than everlt/spangt!

4
Usability Revisited

• The purpose of usability test is to find
  usability problems before your Web site is
  released. The problems identified should lead to
  a prioritized list of items to redesign on your
  site.
• What is a usability problem?
• A violation of usability principles
• A probable cause of user delay, confusion,
  annoyance, error, or failure
• Something users just don't like

5
Form Components

• Interface - the structure, including the fields
  and controls for the information you want to
  collect.
• The form interface is created by using the FORM
  tag and other tags that define fields, boxes,
  buttons.
• Use other HTML tags, including TABLE, to enhance
  the appearance of your form.
• Transmittal - how the data is processed after it
  leaves your site.
• Two basic ways to process the information
• Send it as an e-mail message to yourself
• Send the data to a CGI script on a web server

6
CGI Scripts

• A script that processes the information in a form
  is called a CGI script.
• CGI stands for (Common Gateway Interface). If you
  are using a CGI script, it pulls apart the
  information and formats it in a way that
  other applications, such as a database can
  understand.
• Your form will tell the server where your CGI
  script is located with the ACTION attribute.

7
CGI Scripts

• A CGI script can be written in many languages (C,
  Applescript, VisualBasic), but the most popular
  (currently) is Perl. Perl is a very strong parser
  and portable across many platforms (e.g. Windows,
  UNIX).
• A CGI script can be written in many languages (C,
  Applescript, VisualBasic), but the most popular
  (currently) is Perl. Perl is a very strong parser
  and portable across many platforms (e.g. Windows,
  UNIX).
• We will not be coding Perl in this class, but if
  you are interested in Perl, check out this Perl
  site.

8
Form Tags

• ltFORM METHODPOST ACTIONmailtoyouremailaddress"
  gt Controls and other HTML tags here lt/FORMgt
• The ACTION attribute gives the URL of the script
  or application that is to receive and process
  data from the form.
• Tells the system what kind of things to do to the
  gathered info
• The METHOD attribute specifies how the browser
  sends the form's data to the server for
  processing.
• The METHOD attribute has values of GET or POST.

9
Get VS. Post

• Post transfers data in two steps.
• It first contacts the server, then sends the
  data.
• You can send more data and take advantage of
  encryption when sending data.
• At this point, you will be emailing the info to
  yourselves. Depending on how this works out we
  may change the action later
• Get- transfers data in one step.
• It appends the data to the URL (specified in the
  ACTION attribute) separated by a ?.
• Provides better performance for small forms, but
  the amount of data you can send is limited.

10
Controls

• Text field
• ltINPUT TYPE"TEXT" NAME"City" SIZE"20"
  MAXLENGTH"20"gt
• Text area
• ltTEXTAREA NAME "Comment" ROWS"4" COLS "20"
  WRAPgtEnter text here...lt/TEXTAREAgt

11
Controls

• Radio button
• ltINPUT TYPE"RADIO" NAME"Radiogroup" VALUE
  "choice1"gtChoice 1ltINPUT TYPE"RADIO"
  NAME"Radiogroup" VALUE "choice2" CHECKEDgtChoice
  2
• Checkbox
• ltINPUT TYPE"CHECKBOX" NAME"Checkgroup" VALUE
  "item1" CHECKEDgtItem 1ltINPUT TYPE"CHECKBOX"
  NAME"Checkgroup" VALUE "item2"gtItem 2

12
Controls

• Drop-down menu
• ltSELECT NAME "Schools" SIZE"1"gtltOPTION
  VALUE"DePaul" SELECTEDgtDePaul ltOPTION
  VALUE"Northwestern"gtNorthwestern ltOPTION
  VALUE"Purdue"gtPurduelt/SELECTgt
• Submit button
• ltINPUT TYPE"SUBMIT" VALUE "Submit Form"gt
• Reset button
• ltINPUT TYPE"RESET" VALUE "Reset Form"gt

13
JavaScript

• Is not JAVA
• was created by Netscape
• Is an OOP (object oriented programming language)
• you build smaller objects to make up the entire
  actions or page.
• JavaScript cannot standalone. It is used in
  conjunction with other things.

14
JavaScript

• Goes inside the HTML document
• Form of the code is VERY IMPORTANT in JavaScript-
  it has a structured layout and you MUST adhere to
  it in order for you scripts to work.
• For instance you cannot break the lines of
  JavaScript the way you can with HTML- write in a
  margin free program

15
JavaScript

• JavaScript IS case sensitive.
• Your 1st line of JavaScript must always
  beltSCRIPT LANGUAGE"JavaScript"gt
• which is actually html letting the system know
  that JavaScript is going to occur.
• Your last line of JavaScript must always
  belt/SCRIPTgt

16
document.write("ltFONT COLORGreen'gtThis Is Green
Textlt/FONTgt")

• the DOCUMENT is announced.
• The DOCUMENT is an object
• WRITE indicates the DOCUMENT will be altered
  somehow- a period separates the 2
• WRITE is the method
• the parentheses contain how the document will be
  altered
• the info inside the parentheses known as
  instances
• the info has around it- this MUST be done
• the Green is in single quotes indicating a value-
  do not use again else the system will end the
  statement before you want it to

17
JavaScript

• Instance -of a command is contained in
  parentheses immediately following the command.
• The Instance contains information about what an
  object is to do or how a method is to be carried
  out.
• Method is a command that tells how an object is
  to be acted upon.
• Write is a method that acts upon the object
  document to post text to a page.

18
JavaScript

• An Object is something that exists such as the
  HTML Document, the browser window, or the date
  and time. An object can also be something that
  you create through a function.
• Document is an object name that refers
  specifically to the HTML document that contains
  the JavaScript.

19
Next Assignments

• Next Week
• Week 9
• Week 10
• Final Project

20
The Midterm

• Highest Grade was
• Lowest Grade was