View
51
Download
0
Category
Preview:
DESCRIPTION
Creating Interfaces. Introductions & overview Administration Courseinfo/Blackboard orientation HW: Complete survey. Make posting report on on-line resources. Introductions. Jeanine Meyer, Full Professor, Math/Computer Science & New Media. Ph.D. in Computer Science - PowerPoint PPT Presentation
Citation preview
Creating Interfaces
Introductions & overview
Administration
Courseinfo/Blackboard orientation
HW: Complete survey. Make posting report on on-line resources.
Introductions• Jeanine Meyer,
– Full Professor, Math/Computer Science & New Media.
– Ph.D. in Computer Science
– Previous experience: IBM Research (robotics & manufacturing systems), IBM EduQuest (corporate grants). Pace University. Consulting/k-12 Faculty development
– books: Multimedia in the Classroom, Programming Games using Visual Basic, Creating Database Web Applications with PHP and ASP
• You
Courseinfo/Blackboard
• Instructional support tool• IT IS A REQUIREMENT that you check
this regularly.– I will assume that you have read what I have
posted. This will include schedule, class notes, grade allocation, etc.
– You will be required to make postings to specific Discussion Forums. Hopefully, you will make additional postings.
My site and Backup Site
http://newmedia.purchase.edu/~Jeanine
http://members.verizon.net/~vze2s839
• Class schedule
• Lecture notes (in PowerPoint format)
Course subject• Concepts, tools, practice in creating applications for
[practical] purpose– 'HCI': exchange of information, perhaps with side effects
– Success or quality of interaction can be determined.• Did client/customer/user see right information?
• Was the intended transaction processed (correctly)?
• Was effort or time acceptable?
Focus in course is the 'front end', the interface with the client/user/visitor/etc. Back-end/back office processing is the subject of other courses, including Creating Data Bases for Web Applications.
Course content• Concepts
– analysis of screen use, dimension of data– usability testing– attention to audience needs
• Accessibility issues
• Platforms – regular Web
• normal (full capability), text only, for visually impaired– telephone – wireless phone & PDA
• Technologies– XML, used with XSLT (and Flash): role in all platforms– VoiceXML– WML, XHTML-MP
Course structureEach day may include lecture and computer workPostings, homework, midterm & final quiz plus
user observation reporttwo projects (can be team). See schedule.– data driven Web site (XML to HTML/JavaScript/CSS)– One of
• Web site, may use Flash, server-side programming, etc.– Possible option to build on 1st project with significant new
function
• VoiceXML• WML or XHTML-MP• bilingual application• other non-Web
Project idea
• Design a format for elections – adapt to small and large numbers– flexibility on information shown with each
candidate– fairness in terms of order, while still helping
voters find their candidates.– (feedback)
Questions?
• Now to overview on content
Goal
• Raise level of analysis of interfaces (not exclusively web sites viewed on desktop computers)– concepts and terms– experts: Jakob Nielsen, Edward Tufte, others– practice: looking & reporting, observing use,
buildingContent-driven interfaces: use XML to hold content.
There are other possibilities.
Edward Tufte
• Background: revealed problems with ineffective presentation for the Challenger
• News (last year): found problems with the reporting in the Columbia disaster!– called it typical bad PowerPoint presentation– double filtering
Page concepts• Screen real estate
– content– navigation– decoration– white space
• chartjunk, data ink• data dimension• answers to question: Compared to …?• above the fold versus below the fold• flow• scanning versus reading• chunking information
Example of fake dimension, much chart ink, poor use of image…
Exercise: write about this data!
0
10
20
30
40
50
60
70
80
90
1st Qtr 2nd Qtr 3rd Qtr 4th Qtr
EastWestNorth
Application concepts
• metaphor
• user-centered, user expectations
• shallow versus deep organization
• bread crumb trails
• data dimension (as relevant to overall design)
• functions of audio, video, animation
User testing
• First task: decide on [better] name for your users
• Determine function(s), metrics• Formative evaluation: what does it take to
get to information/perform task successfully• Observe performance
– can include asking for opinion(s)
• Correct/improve
eXtensible Markup Language
• used for content– Document Type Definition DTD
• basis of eXtensible stylesheet language transform: XSLT transform written in the form of XML tags
• basis of VoiceXML: language for telephone (speech recognition) applications
• basis of WML and XHTML-MP: wireless markup language and XHTML-Mobile Profile: for Web enabled phones.
XHTML
proper HTML• nesting of tags
– NOT <i><b>bold, italic stuff </i> </b>
• all system tags lower case– NOT <H1>
• all attribute values quoted• empty tags with closing
<img src="bird.gif" />
<results><match feature="no"> <date>04-Jun-2002 </date> <team score="2">Korea </team> <team score="0">Poland </team></match>
<match feature="yes"> <date>05-Jun-2002</date> <headline>USA Wins</headline> <story>The USA team upsets Portugal in its first game in Round 1 of the World Cup. The score was 3 to 2. Portugal was considered a superior team. This means that the USA will not finish last as it did in the previous outing.</story> <team score="3">USA </team> <team score="2">Portugal </team> <picture>soccer2.jpg</picture></match> …</results>
<?xml version="1.0" encoding="UTF-8" ?><xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/><xsl:template match="/results"> <html> <head><title>Results of World Cup </title><LINK REL="stylesheet" TYPE="text/css" HREF="results.css"/>
</head> <body> <xsl:apply-templates select="/results/match"> <xsl:sort select="@feature" order="descending"/> </xsl:apply-templates> </body> </html></xsl:template>
<xsl:template match="match[@feature='yes']"> <h2><xsl:value-of select="headline"/><br/> </h2> <table> <td> <xsl:value-of select="story"/> </td> <td><img src="{picture}" /> </td> </table> <p>Scores follow....</p></xsl:template><xsl:template match="match"> <h3> <xsl:value-of select="team[1]"/> versus <xsl:value-of select="team[2]"/> </h3> <p>Played on <xsl:value-of select="date"/> </p> <p>Result: <xsl:value-of select="team[1] "/> <xsl:value-of select="team[1]/@score " /> <xsl:text>, </xsl:text> <xsl:value-of select="team[2] "/> <xsl:value-of select="team[2]/@score " /> </p></xsl:template> </xsl:transform>
VoiceXML
• XML language. Set of tags, including form, field, grammar. A special language for grammars.
• A company named Tellme offers a testing service for developers.– You can (will) register as Tellme developer.– Terms of (free) service has changed since last course,
but this is still valuable.
• Uploaded example on my account asks name. You can reply Daniel, Aviva or Esther. The system replies with a question.
<?xml version="2.0"?><vxml version="2.0"> <form> <field name="childid"> <prompt> <audio src="whosthis.wav">Hello. Who is calling?</audio> </prompt><grammar type="application/x-gsl" mode="voice"><![CDATA[[[dan daniel (daniel meyer) (dan meyer)] {<childid "daniel">}[aviva (aviva meyer)] {<childid "aviva">}[esther (esther minkin) ] {<childid "esther">}] ]]></grammar>
<catch event="noinput nomatch"> <audio src="sorry.wav">Sorry. I didn't get that.</audio> <exit/> </catch> <filled> <if cond="'daniel'==childid"> <goto next="#danfollowup"/> <elseif cond="'aviva'==childid"/> <goto next="#avivafollowup"/> <elseif cond="'esther'==childid"/> <goto next="#estherfollowup"/> <else/> <reprompt/> </if> </filled> </field></form>
<form id="avivafollowup"> <var name="rest" expr="1000"/> <field name="bcount" type="number"> <prompt> <audio src="howmanycranes.wav">Hello, Aviva. How many cranes have you made? </audio> </prompt><grammar type="application/x-gsl" mode="voice" ><![CDATA[ NATURAL_NUMBER_THRU_9999]]></grammar> <catch event="noinput nomatch"> <audio src="sorry.wav">Sorry. I didn't get that.</audio> <exit/> </catch>
<filled> <assign name="rest" expr="1000-bcount"/> <audio> <value expr="rest" /> </audio> <audio src="togo.wav"> to go. </audio> <if cond="rest<200" > <audio src="homestretch.wav">You're in the home stretch </audio> <elseif cond="rest<500" /> <audio src="morethanhalf.wav">More than half way </audio> <elseif cond="rest<800" /> <audio src="goodstart.wav">Off to a good start </audio> <else/> <audio> Get a move on </audio> </if> <audio src="goodbye.wav">Good bye. </audio> </filled> </field> </form>
Wireless phones
• Old[er] standard WML– cards
• New XHTML-MP
• Both are XML languages• Both supported by desktop simulators:
– Nokia (also has editors, with validation)– OpenWave
Wireless Markup Language
• a standard for web sites viewed on small devices
• XML language with special tags, for example card
• WMLScript and wbmp graphics
WML fragment
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd"> <wml> <card id="start" title="Find office" newcontext="true"> <p> Select, type in name, click on ok, click on options, select find <input name="key" type="text"/> <do type="accept" label="Find"> <go href="find.wmls#lookup('$(key)')"/> </do> </p> </card>
More of WML example
<card id="result" title="Found!"> <p align="center"> <big><b>$(key) is in $(location).</b></big> </p> <do type="accept" label="Repeat?"> <go href="#start" /> </do> <do type="home" label="Map" > <go href="#map" /> </do> </card>
part of find.wmlsextern function lookup(key) { var place; var found; var dups; var fn; fn = ""; dups = false; place=""; found=false;if (String.find("Jeanine Meyer",key)>=0) { fn="Jeanine Meyer"; found = true; place = "NS"; }
more of find.wmls
if (dups) { WMLBrowser.setVar("fullnames",fn); WMLBrowser.setVar("location",place); WMLBrowser.go("lookup.wml#dup");}else if (found) { WMLBrowser.setVar("location",place); WMLBrowser.go("lookup.wml#result");}else { WMLBrowser.go("lookup.wml#nf");}}
OpenWave Toolkit
XHTML-MP
subset of XHTML tags and CSS features
Start of example
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD
XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-
mobile10.dtd">
<head> <title>Origami</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head>
<body><img src="bird.gif" alt="" width="60"/><br/><b><i>Origami models</i></b><br clear="all">
….
</body></html>
<table> <tr class="blue"><td>1 <a accesskey="1"
href="wiggler.xhtml">Wiggler</a></td> </tr>
<tr> <td>2 <a accesskey="2" class="bluetext" href="wbomb.xhtml">Water bomb</a></td> </tr>
<tr class="blue"><td>3 <a accesskey="3" href="frogface.xhtml">Frog
face</a></td> </tr> <tr> <td>4 <a accesskey="4" class="bluetext"
href="mbox.xhtml">Magazine cover box</a></td> </tr>
<tr class="blue"><td><p mode="nowrap">5 <a accesskey="5"
href="cup.xhtml"> Drinking cup</a></p></td> </tr> </table>
style.css
BODY { color:#006699; font-family: Arial, sans-serif; background-color:#FFFFFF}
TD { font-family: Arial, sans-serif}
.bluetext { color:#006699; }
.blue { color:#000000; background-color:#99CCFF;}
Attention to variety
• telephone• small devices• making something accessible via a screen
reader• (different languages/locales: attention to
character sets, flow, dates, money formats)is good training & exercise for the 'normal'
case.
Sources• Patrick Lynch & Sarah Horton:
Web Style Guide, 2nd Editionhttp://info.med.yale.edu/caim/manual/
• Edward R. Tufte: The Visual Display of Quantitative Information; Envisioning Information; Visual Explanations www.edwardtufte.com
• Jakob Nielsen: Designing Web UsabilityHomesite Usability www.useit.com
Sources
• Elizabeth Castro: XML for the World Wide Web• Jeni Tennison: Beginning XSLT• Michael Kay: XSLT Programmers Reference• Robert B. Mellor: XML Learning by example• William B. Sanders & Mark Winstanley: Server-
Side FLASH• Robert Eckstein with Michel Casabianca, XML
Pocket Reference
Assignments
• Complete survey.• Go on-line and find sources, including tutorials for
XML, XSL, DTD, XPath.– Report by making CourseInfo posting in the indicated
Discussion Forum. Give more than just the site URL: describe what is there! Make the site URL a working link (use a tag, mark posting as HTML).
– Your report must be unique; do not report on a site that has already been mentioned.
Recommended