human-computer dialogue, information & continue with xml/xslt
DESCRIPTION
Human-computer dialogue, information & continue with XML/XSLT. Client side: form verification Dialogue, Measuring information and dimension of data Image map exercise Reprise, catch-up on XSLT exercises HW: report on sites. Form verification/validation . - PowerPoint PPT PresentationTRANSCRIPT
Human-computer dialogue, information & continue with
XML/XSLTClient side: form verification
Dialogue, Measuring information and dimension of data
Image map exerciseReprise, catch-up on XSLT exercises
HW: report on sites
Form verification/validation • Critical component of interface (assuming design
isn't perfect…) is catching errors• 'Offensive'
– example: pulldown menus for each of month, day, year for dates.
• 'Defensive'– Use scripting language (JavaScript) to check each field
for • presence (if required), type and anything else, such as range• consistency between fields. For example, should one field be
greater than another.
Warning
• Access for Form fields uses the Document Object Model (DOM) – DOM changing – browsers differ!
• In example, use name and id for form input elements.
outline
• in script section in HTML head section, definition of function:
function validate(f){ }• in body: <form action="handler" onSubmit="return validate(this) ">
form fields </form>
will not go here if validate returns false
function
<html><head><title>Form test</title><script type="text/javascript" language="JavaScript">
function validate(f) {if (parseInt(f.qty.value) != f.qty.value) {
if turning it into a number isn't the same as the original, then it wasn't a number…
alert('Please enter number for the quantity');
f.qty.focus();f.qty.select();return false;}
}</script></head>
form
<form action="handler" onSubmit="return validate(this) ">
Quantity <input type="text" name="qty" id="qty" value="1">
<input type="submit" value="order"><input type="reset" value="reset"></form>
removes need for form name
Try it!
• create an html file called handler.html to see results of the query string.
• This would typically be a server-side script.
Regular expressions
(Information only. You aren't responsible for knowing this!)
• Regular expressions are a system of patterns to perform validation
var re_mail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+$/;if (!re_mail.test(email.value)) {
XML/XSLT
• Questions?
XSL:reuse element content
• Task: Make list of contacts with e-mails both visible and clickable.
<?xml version="1.0" ?><?xml-stylesheet href="contactsclick.xsl"
type="text/xsl"?><mylist> <contact>
<name>Marty Lewinter</name> <email>[email protected]</email> </contact> … </mylist>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html"/> <xsl:template match="/mylist"> <html> <head> <title>My contact list </title> </head> <body> <h1>Here is my contact list </h1> <br/><table border="2"><tr><td>Name </td> <td> E-mail </td> </tr> <xsl:apply-templates/></table></body></html></xsl:template>
<xsl:template match="contact"><tr><td> <xsl:value-of select="name"/></td> <td><xsl:element name="a"> <xsl:attribute name="href">mailto: <xsl:value-of select="email"/> </xsl:attribute> <xsl:value-of select="email"/> </xsl:element> </td> </tr> </xsl:template></xsl:stylesheet>
XSLT control
Recall<xsl:for-each select=expression>• alternative to use of apply-templates &
defining templates• can be used with <xsl:sort
select=expression …>– can set order="descending" default is ascending– data-type="number" default is "string"
XSL if<xsl:if test=expression > …</xsl:if>• No else clause<xsl:template match="match"> … whatever is needed for each match<xsl:if test="position()=last()"><img src="closinglogo.gif" />
</xsl:if></xsl:template>
Note single = sign.
XSL case
<xsl:choose><xsl:when test=expression1> … </xsl:when><xsl:when test=expression2>
… </xsl:when><xsl:otherwise> … </xsl:otherwise>
</xsl:choose>
Human computer interface
Human: action/information
Computer: response: display/action (including side effect)
Human:action/information
Computer: response: display/action (including side effect)
etc.
Human-computer interface
no single diagramming technique– Trees of options– storyboard– Later: VoiceXML specifies dialogue, including
grammar– Challenge: come up with one!
HCI
• Usually dialogue is one-sided: information from person is much less than information from computer/machine– be suspicious if that isn't true.
• Information: technical term. Information is knowledge that is represented in a format to be exchanged. Comes within a context. The unit for measuring information is the bit.– Think of 20 questions or binary search: each yes/no
answer can potentially refine the search space.
Data interchange
• Data/information goes from human to computer to – determine next display– cause (off-line) action (for example, making a
purchase) and/or– update a data base
• Data/information may or may not be checked for validity
Display
• Form components, for example, pull-down lists
• Selection based on graphical representation of subject matter (one implementation being HTML image maps)– geographical/physical map– diagram– ?
User-centered design
• How hard (how many clicks?) does the client need to work to get to what he/she wants?
• Are there any rewards along the way?
• The client/customer is always right, but … you/your system should provide guidance.
Complex data entry• Accuracy more important than speed
– provide checking (all you can) and– provide chance to confirm
• Absolute checks name—must be present– age—must be ???– credit card number—can possibly check immediately?– date—use distinct fields to avoid problems– other examples?
• Consistency checks– involves two or more input fields and/or input fields versus stored data
• Example: date/time of outgoing flight must be prior to return flight.
On-line Store• Shallow (unstructured) organization: all products shown,
many to a page, 'page' from page to page• Deep: require customer to keep making choices until
finally get to the choice• Multiple ways: opening page shows featured products
plus – clear categories– alternative to use print catalog
• Options with many products on a page also provide option to click for close-up.
Balance giving customer 'what they want' and other options.
deep vs. shallow
o o o o o …..o o o
o o o o o o o o
Added complexity
• pages may be dynamically created from– user input and/or– database contents
• Other terms used are– parameterized– customized– (For Web) mass customization
Case: scrabble game
• Old system: old monitor adequate to display scrabble board– Flash intro– single player versus 'maven'– option for free guesses (default)
• New system: requires high resolution monitor– longer Flash intro– Need to specify: number of human players, may or may
not have computer maven– two sets of official rules: neither allows free guesses.
What does it take (time & effort) to get to goal…
• Old scrabble– 5 second wait for intro– play single player
versus maven
• New scrabble– 10 second wait for
intro– set up single human– set up single computer
maven
Data dimension
• dimension can refer to physical aspect of object: 2D, 3D, time + space = 4 D
• Less formally, dimension can also refer to any group of characteristics that are related (occur over some dimension)
• For this informal idea of dimension, values can take on discrete values, even just small finite number of distinct values or vary continuously.– in statistics, refer to scales as
• ordered, interval, ratio
Dimension, cont.• different dimensions may or may not be
independent• Examples
– clothing product line: age & gender, size, style, price, etc. The girl products only come in girl sizes. The boy and girl products may be in a different price range
– music: styles, tempos, mood, age, type/size of performing group (unaccompanied solo voice vs singer with guitar vs band vs orchestra, etc.), length, etc.
Relevance?
• Analyzing the 'dimensions' of something gives guidance to how to design– display (computer to human)– method of specification (human to computer)
• form elements: what should be drop down list boxes, sliders, radio buttons, check boxes, or open-ended textboxes
– Data from textbox can still be subject to verification tests.
Organization…
• .. may be the critical 'value-add' of your interface– glass engine– stores (e.g., Amazon.com) provides generated
lists of 'people who bought this also bought that'.
Probability versus frequency
• Statistical data is considered very difficult to understand.
• One suggestion is to present data as frequencies and not probability.
• Here are two examples….– Comments?
Image maps• as done with HTML map tags<map name="westchester"><area shape="poly" coords=" " href=" ">… </map>See Find Daniel game in my HTML/JavaScript examples.
– Note: default option did not work. See notes.• Suitable for (geography) maps, diagrams, photos IF
regions are meaningful to client AND regions are sufficiently distinct for all members of audience to distinguish.
Homework
• Visit sites with interactions and report with posting– Describe the interaction, the underlying data,
the devices used to specify choices.– Describe good and bad features.– Be prepared to talk in class.
• REQUIRED: one original site and one follow up comment on someone else's.
Questions• Who is the user/audience?
– Is there a better name than 'user'?• What is the task for the user? What is the function of
the site?• What is the nature of the underlying data?
– dimensions– 'universal' (for all users) or customized, and, if so,
when/how is it customized• my banking data is my own (constructed based on my logon)• What I order from a store is generated from my inputs that session.
– Some sites 'remember' my past orders and may present 'ideas' to me based on data generated from all users.