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

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

3. 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: https://www-01.ibm.com/software/ucd/designconcepts/whatisUI.html

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

5. Web Form Elements- HTML Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp Text fields Password fields Radio buttons Checkboxes Drop-down menu User input button (i.e. Submit) Stacee Millangue INF 385E November 13, 2008

6. Web Form – Form Area Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 A form area contains form elements Code:

7. Web Form – Text Field Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Code: First name: Last name: Display

8. Web Form – Password Field Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Code: First name: Last name: Display Note: Password displays as symbols but not encrypted

9. Web Form – Radio Button Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp 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

10. Web Form – Checkboxes Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Code: I have a bike: I have a car: I have an airplane: Display

11. Web Form – Drop Down Menu Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Code: Volvo Saab Fiat Audi Display

12. Web Form – Input Button Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Code: Display

13. Web Form Elements- Tags Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp 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

14. Web Form Elements- Tags Source: http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/html/html_forms.asp (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

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

16. 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

17. Example: E-mail Form Stacee Millangue INF 385E November 13, 2008 Display

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

19. 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

20. 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

21. 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: http://www.boxesandarrows.com/view/what_is_a_web_application_ Stacee Millangue INF 385E November 13, 2008

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

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

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

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

26. Questions? Stacee Millangue INF 385E November 13, 2008