Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating Interfaces Recap Flash XML example Project II assignment Homework: plan project II.

Similar presentations

Presentation on theme: "Creating Interfaces Recap Flash XML example Project II assignment Homework: plan project II."— Presentation transcript:

1 Creating Interfaces Recap 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 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.

5 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)

6 Projects Now (in school) "one of a kind" limited audience individual or very small team Later (career) multiple projects & projects have extended lifetimes large[r] audience complex team for production

7 Flash XML example See last example on schools. Copy down and examine.fla files, last one is 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


9 standard start schoolXML=new XML(); schoolXML.onLoad=transXML; display1="loading data"; schoolXML.load("schools.xml"); keyTag = new XML(); schoolList = new Array();

10 function transXML() { if (this.loaded) { display1 = "XML data is loaded."; } keyTag=this.lastChild; schoolList= keyTag.childNodes; schooldata = new Array(); display = ""; for (sch = 0; sch<=schoolList.length; sch +=1) { schooldata = schoolList[sch].childNodes; for (i=0; i<=schooldata.length; i++) { if (schooldata[i].nodeName=="name") { lista.additem(schooldata[i].firstchild.nodeValue,sch); } } // end i loop } // end school loop } // end transXML function

11 change handler for listbox function showschool(component) { display=""; pick = component.getSelecteditem().label; pickv = component.getSelecteditem().data; schooldata = schoolList[pickv].childnodes; for (i=0; i<=schooldata.length; i++) {

12 if (schooldata[i].nodeName=="name") { display = display + newline+ schooldata[i].firstchild.nodeValue; } if (schooldata[i].nodeName=="url") { urlis = "http://"+schooldata[i].firstchild.nodeValue; display = display+newline + " "+ urlis+" "; }

13 if (schooldata[i].nodeName=="type") { display = display+newline+schooldata[i].firstchild.nodeValue; } if (schooldata[i].nodeName=="family_member") { display = display+newline+schooldata[i].firstchild.nodeValue; if (schooldata[i].attributes.role=="teacher") { display = display + " is/was a teacher at the school" } } // end i loop }

14 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

15 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

16 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.

17 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

18 (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.

19 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)

20 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

21 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.

22 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!

23 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

24 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

25 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

26 (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.

27 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

28 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

29 Class time / Homework Catch up on VoiceXML exercise Plan project

Download ppt "Creating Interfaces Recap Flash XML example Project II assignment Homework: plan project II."

Similar presentations

Ads by Google