The Web Page as User Interface: Forms and Web Applications Stacee Millangue INF 385E November 13, 2008

Overview Interface Forms Web Applications Stacee Millangue INF 385E November 13, 2008

Interface Definition from IBM: User interface refers to the parts of a computer and its software that you (the computer user) see, hear, touch, or talk to. It is the set of all the things that allow you and your computer to communicate with each other. Stacee Millangue INF 385E November 13, 2008 Source:

Why web forms? Basis in anything that requires user input -Surveys & Questionnaires -Applications (i.e. job application)Applications -Online shopping -Search queries Source: Stacee Millangue INF 385E November 13, 2008

Web Form Elements- HTML Source: Text fields Password fields Radio buttons Checkboxes Drop-down menu User input button (i.e. Submit) Stacee Millangue INF 385E November 13, 2008

Web Form – Form Area Source: Stacee Millangue INF 385E November 13, 2008 A form area contains form elements Code:

Web Form – Text Field Source: Stacee Millangue INF 385E November 13, 2008 Code: First name: Last name: Display

Web Form – Password Field Source: Stacee Millangue INF 385E November 13, 2008 Code: First name: Last name: Display Note: Password displays as symbols but not encrypted

Web Form – Radio Button Source: Stacee Millangue INF 385E November 13, 2008 Code: Male: <input type="radio" checked="checked" name="Sex" value="male"> Female: <input type="radio" name="Sex" value="female"> Display

Web Form – Checkboxes Source: Stacee Millangue INF 385E November 13, 2008 Code: I have a bike: I have a car: I have an airplane: Display

Web Form – Drop Down Menu Source: Stacee Millangue INF 385E November 13, 2008 Code: Volvo Saab Fiat Audi Display

Web Form – Input Button Source: Stacee Millangue INF 385E November 13, 2008 Code: Display

Web Form Elements- Tags Source: Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Stacee Millangue INF 385E November 13, 2008

Web Form Elements- Tags Source: (con’t) Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Stacee Millangue INF 385E November 13, 2008

Designing a Form HTML WSIWYG such as DreamweaverDreamweaver Design software such as Photoshop Templates Stacee Millangue INF 385E November 13, 2008

Web Form Templates Wufoo (3 for free)Wufoo Web Form Factory (open source)Web Form Factory Form Assembly (free & paid plans)Form Assembly Stacee Millangue INF 385E November 13, 2008

Example: Form Stacee Millangue INF 385E November 13, 2008 Display

Example: Form (con’t) Stacee Millangue INF 385E November 13, 2008 Code: This form sends an to W3Schools. Name: <input type="text" name="name" value="yourname" size="20"> Mail: Comment:

How forms work Form is useless without a handler script –JavaScriptJavaScript –Perl CGI scriptPerl CGI script –PHPPHP Server will need to be set up to run scripts Database needed for stored information Stacee Millangue INF 385E November 13, 2008

Web Applications Application: Of or being a computer program designed for a specific task Therefore… web applications are designed for interactivity so users can accomplish various tasks Stacee Millangue INF 385E November 13, 2008

Web Applications (con’t) Difference from websites: –Particular for each user (by session) –User can control data Advantages –Portable — Can use from anywhere with internet –No software to download Source: Stacee Millangue INF 385E November 13, 2008

Example: Google CalendarGoogle Calendar Stacee Millangue INF 385E November 13, 2008

Example: BibmeBibme Stacee Millangue INF 385E November 13, 2008

Example: PicnikPicnik Stacee Millangue INF 385E November 13, 2008

Application/Interface Sources Yahoo User Interface Library Free web applications:Free web applications Stacee Millangue INF 385E November 13, 2008

Questions? Stacee Millangue INF 385E November 13, 2008