Web page as User Interfaces: Forms & Web applications
advertisement
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. Source: https://www-01.ibm.com/software/ucd/designconcepts/whatisUI.html Stacee Millangue INF 385E November 13, 2008 Why web forms? Basis in anything that requires user input - Surveys & Questionnaires - Applications (i.e. job application) - Online shopping - Search queries Source: http://www.webaim.org/techniques/forms/ Stacee Millangue INF 385E November 13, 2008 Web Form Elements- HTML •Text fields •Password fields •Radio buttons •Checkboxes •Drop-down menu •User input button (i.e. Submit) Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form – Form Area A form area contains form elements Code: Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form – Text Field Code: Display <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form – Password Field Code: Display <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> Note: Password displays as symbols but not encrypted Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form – Radio Button Display Code: <html> <body> <form action=""> Male: <input type="radio" checked="checked" name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form – Checkboxes Display Code: <html> <body> <form action=""> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form – Drop Down Menu Display Code: <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form – Input Button Display Code: <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form Elements- Tags •<form> Defines a form for user input •<input> Defines an input field •<textarea> Defines a text-area (a multi-line text input control) •<label> Defines a label to a control •<fieldset> Defines a fieldset Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Web Form Elements- Tags (con’t) •<legend> Defines a caption for a fieldset •<select> Defines a selectable list (a drop-down box) •<optgroup> Defines an option group •<option> Defines an option in the drop-down box •<button> Defines a push button Source: http://www.w3schools.com/html/html_forms.asp Stacee Millangue INF 385E November 13, 2008 Designing a Form • • • • HTML WSIWYG such as Dreamweaver Design software such as Photoshop Templates Stacee Millangue INF 385E November 13, 2008 Web Form Templates • Wufoo (3 for free) • Web Form Factory (open source) • Form Assembly (free & paid plans) Stacee Millangue INF 385E November 13, 2008 Example: E-mail Form Display Stacee Millangue INF 385E November 13, 2008 Example: E-mail Form (con’t) Code: <html> <body> <form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain"> <h3>This form sends an e-mail to W3Schools.</h3> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail“ value="yourmail" size="20"> <br> Comment:<br> <input type="text" name="comment“ value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> Stacee Millangue INF 385E November 13, 2008 How forms work • Form is useless without a handler script – JavaScript – Perl CGI script – PHP • 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: http://www.boxesandarrows.com/view/what_is_a_web_application_ Stacee Millangue INF 385E November 13, 2008 Example: Google Calendar Stacee Millangue INF 385E November 13, 2008 Example: Bibme Stacee Millangue INF 385E November 13, 2008 Example: Picnik Stacee Millangue INF 385E November 13, 2008 Application/Interface Sources • Yahoo User Interface Library • Free web applications: Stacee Millangue INF 385E November 13, 2008 Questions? Stacee Millangue INF 385E November 13, 2008
