Creating Interfaces

1
Creating Interfaces

• Recap
• HTML/JavaScript xml example
• Flash XML example
• Project II assignment
• Homework plan project II.

2
Recap

• WML, XHTML-MP and VoiceXML each examples of XML
  languages
• Syntax similar but very different in how they
  function
• WML is mostly display with do/go tags for soft
  buttons. Logic, if needed, is in a wmls file
• XHTML-MP is HTML (cleaned up XHTML with different
  DTD file)
• VoiceXML contains logic calculation in multiple
  ways
• If tag for conditional testing assign tag for
  calculation
• Grammar construct to define possible inputs
• Can define and reference script

3
Recap uses of XML

• XML is used for structuring data so
• data can be used in various ways
• separate content from formatting
• XML is used for structuring data for
  communications between applications
• XML is a structure for several (new-er)
  programming languages/scripting languages
• WML, VoiceXML, XSL

4
XML is

• Used with XSL (defining the formatting)or
• By itself, to be handled directly

5
HTML/JavaScript example

• Reads in and parses xml file located on server
• Changes XML in memory
• Client-side does not save file on the client
  machine
• IE only

6
Get XML file

• lthtmlgtltheadgtlttitlegtXML read testlt/titlegt
• ltscriptgt
• var xml new ActiveXObject("Microsoft.XMLDOM")
• xml.async false
• xml.load("favorite.xml")

7

• var objroot xml.documentElement
• var shownames objroot.getElementsByTagName("show
  /show_title")
• var showscoresobjroot.getElementsByTagName("show/
  score")
• document.write("Which TV show do you like the
  best? ltbrgt")
• document.write("ltform name'f' onsubmit'return
  update()'gt")
• var n shownames.length
• var i
• for (i0iltni)
• var stitle shownamesi.text
• document.write("ltinput type'radio'
  name'shows' id'shows' value'"stitle"'gt")
  
• document.write(stitle)

8

• document.write("ltbrgtltinput type'submit'
  value'Vote'gtlt/formgt")
• function update()
• for (i0iltni)
• if (document.f.showsi.checked)
• showscoresi.text1 parseInt(showscores
  i.text) xml.documentElement.getElementsB
  yTagName("show/score").item(i).textshowscoresi.
  text
• objroot xml.documentElement
• showscoresobjroot.getElementsByTagName("show/
  score")
• var scores "Totals "
• for (i0iltni)
• scores scores shownamesi.text"
  "showscoresi.text" "
• alert(scores)
• return false
• // ends update function

9
// body is filled in by script

• lt/scriptgtlt/headgt
• ltbodygt
• Thank you!
• lt/bodygt
• lt/htmlgt

10
Comment

• You may or may not be the one who
  creates/defines/designs the XML tags.
• If and when you do
• what is a child of what is dependent on the data
• choice of child versus attribute may be a matter
  of taste (assuming only one child)
• May set up DTD or XML Schema to document
  definition and use validating parser to confirm
  correctness.

11
Maintainability

• Usability for the developers/system owners
• need to establish system to handle change
• change from/in
• content
• including growth (scale up)
• expansion of functions (new features)
• corrections (bug fixes)
• new workers (documentation)
• new technology
• supports new features (new capability)
• improves function (improved productivity)

12
Projects

• Now (in school)
• "one of a kind"
• limited audience
• individual or very small team
• Later (career)
• multiple projects projects have extended
  lifetimes
• larger audience
• complex team for production

13
Flash XML example

• See last example on schools. Copy down and
  examine .fla files, last one is
• newmedia.purchase.edu/Jeanine/interfaces/xmlandli
  sttest8.html
• Read in XML file and use to set up an array. The
  names of schools are used to populate a listbox
• Clicking on a name causes display of information
  on individual school

14
(No Transcript)
15
standard start

• schoolXMLnew XML()
• schoolXML.onLoadtransXML
• display1"loading data"
• schoolXML.load("schools.xml")
• keyTag new XML()
• schoolList new Array()

16

• function transXML()
• if (this.loaded)
• display1 "XML data is loaded."
• keyTagthis.lastChild
• schoolList keyTag.childNodes
• schooldata new Array()
• display ""
• for (sch 0 schltschoolList.length sch 1)
  
• schooldata schoolListsch.childNodes
• for (i0 iltschooldata.length i)
• if (schooldatai.nodeName"name")
• lista.additem(schooldatai.firstchild.nodeValu
  e,sch)
• // end i loop // end school
  loop
• // end transXML function

17
change handler for listbox

• function showschool(component)
• display""
• pick component.getSelecteditem().label
• pickv component.getSelecteditem().data
• schooldata schoolListpickv.childnodes
• for (i0 iltschooldata.length i)

18

• if (schooldatai.nodeName"name")
• display display newline
  schooldatai.firstchild.nodeValue
• if (schooldatai.nodeName"url")
• urlis "http//"schooldatai.firstchild.no
  deValue
• display displaynewline "lta
  href'"urlis"'gt ltFONT COLOR'0000FF'gtltUgt"
• urlis"lt/Ugtlt/FONTgtlt/agt"

19

• if (schooldatai.nodeName"type")
• display displaynewlineschooldatai.first
  child.nodeValue
• if (schooldatai.nodeName"family_member")
  
• display displaynewlineschooldatai.first
  child.nodeValue
• if (schooldatai.attributes.role"teacher"
  )
• display display " is/was a teacher at
  the school"
• // end i loop

20
Usability

• Not something just tacked on
• Includes, but not limited to, use of alt tags and
  avoiding images that take too much time to
  download and clutter the information
• Focus on user (name user). User-centered design
• Focus on content structure of content

21
From recent Jakob Nielsen interview

• Feature design
• Information architecture (structure design)
• Interaction design
• Appearance design (visual design)
• Content design (writing and sometimes multimedia)
• Usability is learnability, efficiency,
  memorability, error avoidance, and subjective
  satisfaction

22
Error avoidance

• My term offensive error handling. Design
  interface to limit possibility of errors
  occurring
• Defensive do the check afterwards.
• Generally need to do both.

23
Testing

• Involve real users early
• Pay attention
• may need to interpret responses
• Use automatic tools for usability,
  accessibility
• Composing alt, desc, summary tags helps you focus
  on what is needed
• Offensive and defensive validation

24
(old) IBM product

• Major effort to deliver 'multimedia'
• Columbus Encounter and Exploration
• Letters from a Birmingham Jail
• Black Elk Speaks
• Ulysses (Tennyson)
• User responses too slow
• Me (others) fancy titles, poor organization, no
  use of old technologies of abstracts, keywords,
  meant that users/students often clicked/invoked
  video clips they really did not want.
• Yes, this took time, but it wasn't that 'the
  system' was under-powered.

25
Technology

• technology push versus demand pull
• what are appropriate uses of technology?
• May be unexpected
• Exercise write down new use of
• cell phone (i.e., ubiquitous, potential for
  sound, image and text
• regular phone (sound only)

26
To learn more

• VoiceXML
• Tellme studio has tutorials, examples
• Also, use google for other tutorials.
• Note different types of grammars.
• WML and XHTML-MP
• Nokia Mobile Internet Toolkit and OpenWave each
  have samples
• Use google for on-line tutorials

27
Learning to learn

• Technologies do change!
• You need to practice finding things out.
  Previous classes/previous students have been much
  more willing to do this.
• keep doing postings. Comment on sources.
  Investigate controversies, etc.

28
Project II

• Web site with interactions
• XML (content) based. Can use XSLT and/or
  JavaScript.
• Substantially enhance project II or do second
  project (with interaction)
• May have server-side programming. May use Flash.
• bilingual web site (XML, character codes)
• SSB with interactions meaningful, credible
  application. Should include a script file (at
  least one function) and images. You can try this
  from your phone (if enabled) directly!
• VoiceXML with interactions meaningful, credible
  application dialog tree should have branching
  and depth. Some error handling (phased prompts)
• OR use same XML to define both a Web site and
  one or both of the others!

29
Project II deliverables

• Post proposal
• comment on other proposals
• Formal presentation of proposal
• Charts (PowerPoint or HTML)
• Define purpose, audience, content
• Diagram of interactions (may not be complete)
• 5-10 minutes
• Presentation of complete work
• demonstrate
• charts (PowerPoint or HTML)
• 10-15 minutes

30
BE PROFESSIONAL

• Why?
• It will count for your grade
• It is good experience
• People do judge a book by its cover and
  presentation is more than superficial.
• May produce something you can re-use

31
Schedule

• Make posting on project for my approval (due
  before Monday)
• One week from today (Monday of Thanksgiving
  week)
• Present project plan (function, dialogue map,
  audience, measurements)
• Week after holiday, time in class to work (some
  lecturing)
• Following week presentations

32
(Final) presentations

• Include feedback from at least one user other
  than yourself or member of this class.
• Define beforehand protocol for testing.
• Include how you would enhance and scale up
  project
• some of scaling up should be implicit in XML
  definition, if it is XML based.
• can 'fake' server-side programming, for example,
  use array in place of database.

33
Possible topics

• Museum Kiosk add more options for questions
  from visitor, posting comments
• Classroom/lesson add hints, scores, other.
• School Web site for Major/Program/Certificate
  Requirements add more options for questions,
  such as completion of program
• Directions/instruction (origami, camera, sound
  equipment, cooking, etc.) must be data-based
  (XML and/or server-side database), mixed media
  (consider recording short audio wav files)
• VoiceXML request information on topic (bus
  schedule?) game, cooking instructions, driving
  instructions
• SSB request information on topic, including
  expanded version of find example game

34
What do I mean by

• Meaningful, credible application that is
  reasonable to do in this way (that is,
  phone/small screen or Voice phone)
• Measurements how will you judge whether or not
  you have done a good job

35
Class time / Homework

• Catch up on VoiceXML exercise
• Plan project