Creating Interfaces

1
Creating Interfaces

• Pitfalls
• JavaScript XML
• Homework Make proposal for your project

2
Anthropomorphic fallacy

• Term used to attributing human thought, feelings,
  habits toanimals, inanimate beings
• NOT SURE HOW WIDESPREAD THIS IS/WAS when doing
  robotics back at IBM Research, we used the term
  to assuming that the best way to automate
  something was to work directly from the manual
  way
• Consider washing clothes at the stream

3
What is focus / unit of analysis

• Robotics / manufacturing example
• Replace manufacturing station
• Versus
• Redesigning the whole line

4
New interface design challenge

• Replicate manual way
• Replicate current/existing computer way with
  different hardware
• Do something totally different
• IPod
• Change / reconsider what the problem is
• Velcro for shoes

5
Abdominal report

• 1974!
• Doctor wants to analyze data gathered in
  emergency room and follow-up
• "Please don't make me ask for it in English. It
  is too complicated."

6
Discussion

• Examples?

7
JavaScript and XML

• Mini-voting system.
• NOTE permanent data must use either cookies
  (stored on client computer) or server-side
  programming
• Preview / Ad for other coursesSocial
  SoftwareCreating Databases for Web Applications

8
(No Transcript)
9
(No Transcript)
10

• lt?xml version"1.0" ?gt
• ltshowsgt
• ltshowgt
• ltshow_titlegtAce of Cakeslt/show_titlegt
• ltscoregt0lt/scoregt lt/showgt
• ltshowgt
• ltshow_titlegtThe Mentalistlt/show_titlegt
• ltscoregt0lt/scoregt lt/showgt
• ltshowgt
• ltshow_titlegtLaw and Orderlt/show_titlegt
• ltscoregt0lt/scoregt lt/showgt
• ltshowgt
• ltshow_titlegtPushing Daisieslt/show_titlegt
• ltscoregt0lt/scoregt lt/showgt
• ltshowgt
• ltshow_titlegtThe News Hourlt/show_titlegt
• ltscoregt0lt/scoregt lt/showgt
• lt/showsgt

11
Approach

• Use try and catch for browser differences
• Set up internal arrays (actually these are
  collections, but work the same)
• Set up radio buttons using standard html
• Place generated html in div using innerHTML

12

• lthtmlgtltheadgtlttitlegtXML read testlt/titlegtltscriptgt
• Variable declarations
• Definition of updatescores function keeps
  displays totals
• Definition of getxml function reads XML sets
  up a form
• lt/scriptgtlt/headgt
• ltbody onLoad"return getxml()"gt
• ltdiv id"place"gt
• lt/divgt
• ltbr/gt
• ltdiv id"results"gt
• lt/divgt
• lt/bodygt
• lt/htmlgt

13
Global variables

• var xmlDoc
• var nshows
• var shownames
• var showscores
• var i

14

• function getxml()
• try
• xmlDoc new ActiveXObject("Microsoft.XMLDOM")
  
• catch (e)
• try //Firefox, Mozilla, Opera, etc.
• xmlDocdocument.implementation.createDocument(
  "","",null)
• catch(e)
• alert(e.message)
• xmlDoc.async false
• xmlDoc.load("favorite.xml")

15

• shownames xmlDoc.getElementsByTagName("show_titl
  e")
• showscoresxmlDoc.getElementsByTagName("score")
• content "Which TV show do you like the best?
  ltbrgt"
• content "ltform name'f' onsubmit'return
  updatescores()'gt"
• nshows shownames.length
• for (i0iltnshowsi)
• var stitle shownamesi.childNodes0.nodeValue
  
• content "ltinput type'radio' name'shows'
  id'shows' value'"stitle"'gt"
• content stitle
• content "ltbrgtltinput type'submit'
  value'Vote'gtlt/formgt"
• document.getElementById("place").innerHTML
  content

16
Try it or something like it!

• Note you can place generated content in form
  ltinputgt elements
• Look at my JavaScript examples and elsewhere
• Note my examples all assume you/the programmer
  knows the XML. There are methods for extracting
  names of elements
• Posting opportunity

17
Homework

• Posting opportunity examples of interfaces that
  appropriately and successfully simulate other
  situations OR interfaces that do something
  different.
• Posting opportunity working with unknown XML.
• Decide on XML based (data driven) Web site using
  JavaScript and/or Flash
• Must have some audience interaction
• Can work in teams of 2
• More is expected from 2!
• Due 2/23