Dialogue. Dimension. XML & XSL catch
Download
Report
Transcript Dialogue. Dimension. XML & XSL catch
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
• 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:
not go
function validate(f){ } will
here if
• in body:
validate
returns false
<form action="handler"
onSubmit="return validate(this)
">
form fields </form>
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
removes need
for form name
<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>
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
etc.
Computer: response:
display/action (including
side effect)
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 openended 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.