Gathering Requirements What do users want?. Information Gathering Techniques Surveys Interviews Focus Groups.

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

Tutorial 6 Creating a Web Form
Technologies for web publishing Ing. Václav Freylich Lecture 4.
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
Multimedia and the World Wide Web HCI 201 Lecture Notes #5B.
XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.
Tutorial 6 Working with Web Forms
XP Tutorial 6: Creating Web Page Forms. XP An Example of a Form.
Dogs See in Black and White But most don't surf the Web Color, Graphics, Animated GIFs, and Image Maps.
USER INTERACTIONS: FORMS
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Creating Web Page Forms
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
ECA 228 Internet/Intranet Design I Forms. ECA 228 Internet/Intranet Design I Forms forms are a way for a user to communicate with you – text fields –
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Forms and Form Controls Chapter What is a Form?
Web111a_chapt06.ppt HTML: Section 6 Forms HTML tags: define data input and/or output Define the Input and/or Output on the web page Do not process the.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Internet / Intranet CIS-536 Class 7. 2 HTML Forms A Method to Allow Users to Pass Information to a CGI Script Forms Allow Information to Be Entered Via:
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Forms Sangeetha Parthasarathy 02/05/2001. Introduction to Forms A form makes it possible to transform your web pages from text to graphics to interactive.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 6.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
HTML Forms. Today’s Lecture We will try to understand the utility of forms on Web pages We will find out about the various components that are used in.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
Website Development with PHP and MySQL Saving Data.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
1 HTML Forms
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
Dreamweaver MX. 2 Overview of Templates n Forms enable you to collect data from ______. n A form contains ________ such as text fields, radio buttons,
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
1 HTML Forms
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
XP 1 Tutorial 6 Creating Web Page Forms. XP 2 Tutorial Objectives  Describe how Web forms can interact with a server-based program  Review the various.
HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Form Processing Week Four. Form Processing Concepts The principal tool used to process Web forms stored on UNIX servers is a CGI (Common Gateway Interface)
HTML Forms.
Basic Webpage Design HTML Forms. Objectives Learn how to use HTML to create a form. Explain the concept of forms Know the difference of GET and POST Discuss.
HTML Forms. A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text.
Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating.
1 HTML Forms
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
1 HTML forms (cont.)
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Tutorial 6 Creating a Web Form
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Tutorial 6 Working with Web Forms
ITE 115 Creating Web Page Forms
CNIT 131 HTML5 - Forms.
Lesson 6: Web Forms.
Presentation transcript:

Gathering Requirements What do users want?

Information Gathering Techniques Surveys Interviews Focus Groups

Surveys Paper surveys Electronic surveys –in-text –attachments Web-based –processing data Phone Surveys

Interviews Personal –Come prepared –Tape recorder –Open versus Closed questions Phone –Cold call –Selected users

Focus Groups Room setting –small versus large groups –moderator –synergy Electronic –Group decision support systems Cost prohibitive –Platform Issues

What to Use? Ask some questions –Do users have addresses? –Can you meet with them personally? –Snail mail addresses only? –Does a Website exist? More than likely use a combination of two or more techniques.

Think About What techniques might you use? Team will be asked to provide information gathering techniques, plans and tools in reports. –Initial: tools, techniques, any preliminary results –Final: tools, techniques, results Link to how the Website meets the needs

Creating Web Page Forms Paperwork with a New Twist

What are Forms? On the Website –input data –guestbooks Behind the scenes –files –databases

Behind the Scenes Active Server Pages Common Gateway Interface Script –CGI –receives data from the Web page and then processes the data to create information Server-side

Other CGI Uses Hit-Counters Server-side maps Message and Web Boards lists Cookies

CGI Made With... AppleScript C/C++ Perl TCL (Tool Command Language) Visual Basic Java Depends on the System

Where to get them... Ask your ISP what CGIs are available In UNIX system, in cgi-bin directory We will use GForm –on homepages.wmich.edu – FormMail (v 1.9) at Matt's Script Archive is good as well

End-User Side Online Forms –input boxes for text and numbers –radio buttons (option buttons) to select a single option –check boxes to specify an item as present or absent –text areas for expanded input

Form Element Each element is a field in the form and will have a value Need the first though Form Elements and HTML layout tags

Can use most HTML tags in the FORM to specify layouts and presentation of material

Input Boxes –button –checkbox –hidden –image –password –radio –reset –submit –text –textarea

Input Box Size and Length Some input boxes (like text) allow you to set their size (in characters) Can also limit the amount of text entered – (in characters)

Value Property Can set a default with " " – United States

Selection Lists Used to allow a user to view a list and select one or a multiple number of items How many pizzas versus choosing the toppings on a pizza Similar to list tags and

Selecting One Item 1 2 3

Multiple Items mushrooms olives green peppers anchovies The VALUE and the SELECTED are optional and can be used with both types of lists

Selection List Appearance –show more or less of the list –by default shows one item in a drop-down box

RADIO party lunch Why Pizza

CHECKBOXES Set a default

TEXTAREA <textarea rows="value" cols="value" name="text"> default text * Close out the TEXTAREA tag

TEXTAREA Example Enter Comments COLS or ROWS optional -- can choose default

WRAP Property <textarea rows="value" cols="value" name="text" wrap="option">default text OFF = all text in a single line scrolling off the page VIRTUAL = text wraps automatically in Web window. Still sent to CGI in a single line PHYSICAL=text wraps automatically in Web window. Line wrap info sent to CGI as well

FORM Buttons Need to have a means for users to perform actions

PROPERTIES How the form is handled. –ACTION –METHOD –ENCTYPE

Properties (cont.) Location of CGI script Get versus Post –Get attaches information to the end of the URL specified in the ACTION area (e.g. server-side maps) –Post is the preferred method -- use it with Gform –Post sends the form information as a separate data stream/file

ENCTYPE Various options like multiple form data, etc. Default value is text -- what GForm uses

MAILTO Can also have the form data sent to an e- mail address instead of a file or a database

Most Important Go through the Chapter 6 tutorial Go through the GForm instructions and tutorial (link on Resource Site) Try linking your Gform and making it work –Take my example and modify it on your site Ask Questions