CSS XML Ajax Week 4 LBSC 690 Information

CSS, XML, Ajax Week 4 LBSC 690 Information Technology

Today’s Goals • Finish our human-computer interaction discussion • Connect that knowledge to good Web site design • Use that knowledge to build good Web pages

Interaction • Forming an intention – Internal mental characterization of a goal • Selection of an action – Review possible actions, select most appropriate • Execution of the action – Carry out appropriate actions with the system • Evaluation of the outcome – Compare results with expectations

Where the Mental Model Fits Goals Intention Expectation Evaluation Mental Model Selection Interpretation Mental Activity Physical Activity Execution System Perception

Mental Models • How the user thinks the machine works – What actions can be taken? – What results are expected from an action? – How should system output be interpreted? • Mental models exist at many levels – Hardware, operating system, and network – Application programs – Information resources

Input Devices • Text – Keyboard, optical character recognition – Speech recognition, handwriting recognition • Direct manipulation – 2 -D: mouse, trackball, touch pad, touch panel – 3 -D: wand, data glove • Remote sensing – Camera, speaker ID, head tracker, eye tracker

Keyboard • Produces character codes – ASCII: American English – Latin-1: European languages – UNICODE: (nearly) Any language • Pictographic languages need “entry methods” • Keyboard shortcuts help with data entry – Different conventions for standard tasks abound • VT-100 standard” functions are common – Differing layouts can inhibit usability

Design Example: QWERTY Keyboard From http: //home. earthlink. net/~dcrehr/whyqwert. html

Dvorak Keyboard From http: //www. mwbrooks. com/dvorak/

Direct Manipulation • Match control actions with on-screen behavior – Use a cursor for visual feedback if needed • Rotary devices – Mouse, trackball • Linear devices – Touch pad, touch screen, i. Pod shuttle, joystick • Rate devices – Laptop eraserhead

Modeling Interaction Human Mental Models Task System Software Models Task Computer User Sight Sound Hands Voice Keyboard Mouse Display Speaker

Human Senses • Visual – Position/motion, color/contrast, symbols • Auditory – Position/motion, tones/volume, speech • Haptic – Mechanical, thermal, electrical, kinesthethic • Olfactory – Smell, taste • Vestibular

Commodity Output • Image display – Fixed view, projection • Acoustic display – Speakers, headphones

“Virtual Reality” Output • Immersive visual – Surround projection, Movable view • Force feedback – Pen, joystick, exoskeleton • Tactile – Vibrotactile, pneumatic, piezoelectric • Vestibular – Motion-based simulators • Locomotive – Stationary bicycle, treadmill • Thermal, Olfactory

What makes a Wii fun?

Interaction Styles • Language-based interfaces – Command line interfaces – Interactive voice response systems • Graphical User Interfaces (GUI) – Direct manipulation – Menus • Virtual Reality (VR) – Direct manipulation • Ubiquitous computing

Direct Manipulation • Select a metaphor – Desktop, CD player, map, … • Use icons to represent conceptual objects – Watch out for cultural differences • Manipulate those objects with feedback – Select (left/right/double click), move (drag/drop)

GUI Components • Windows (and panels) – Resize, drag, iconify, scroll, destroy • Selectors – Menu bars, pulldown lists • Buttons – Labeled buttons, radio buttons, checkboxes • Icons (images) – Select, open, drag, group

Metaphor: Fundamental for Thought • Theories as buildings: – The foundation of theory is shaky – Theory was toppled – Buttress your claims • Mind as a container – Suddenly came into my head – Back of my mind • Time as space: – The end of the semester is getting closer – The best part of the show is coming up – The week just whizzed by

Transfer Effects • People transfer expectations from similar objects – Positive: prior learning applies to new situation – Negative: prior learning conflicts with new situation

Positive and Negative Transfer “First we thought the PC was a calculator. Then we found out how to turn numbers into letters with ASCII — and we thought it was a typewriter. Then we discovered graphics, and we thought it was a television. With the World Wide Web, we've realized it's a brochure. ” ― Douglas Adams Caller: Tech: Caller: Hello, is this Tech Support? " Yes, it is. How may I help you? The cup holder on my PC is broken and I am within my warranty period. How do I go about getting that fixed? I'm sorry, but did you say a cup holder? Yes, it's attached to the front of my computer. Please excuse me if I seem a bit stumped, it’s because I am. Did you receive this as part of a promotional, at a trade show? How did you get this cup holder? Does it have any trademark on it? It came with my computer, I don't know anything about a promotional. It just has '4 X' on it. At this point the Tech Rep had to mute the call, because he couldn't stand it. The caller had been using the load drawer of the CD-ROM drive as a cup holder, and snapped it off the drive.

Visual Affordance • The perceived and actual fundamental properties of the object that determine how it could be used – Appearance indicates how the object should be used • • • Chair for sitting Table for placing things on Knobs for turning Slots for inserting things into Buttons for pushing • Complex things may need explaining but simple things should not – When simple things need instructions, design has failed

Visual Affordance Problems Sliders for sliding? Are these buttons? Dials for turning? What does this button do?

Mapping full mapping arbitrary back right front back front left right 24 possibilities, requires: -visible labels + memory paired back front back 2 possibilities per side = 4 total possibilities

Visible Constraints • Limitations of the actions possible perceived from object’s appearance – provides people with a range of usage possibilities Push or pull? Which side? Can only push, side to push clearly visible

Visible Constraints: Date Entry

Causality • The thing that happens right after an action is assumed by people to be caused by that action • Incorrect effect – Invoking unfamiliar function just as computer hangs – Causes “superstitious” behaviors • Invisible effect – Command with no apparent result often repeated • e. g. , mouse click to raise menu on unresponsive system

Causality: An Example Effects visible only after Exec button is pressed • Ok does nothing! • Awkward to find appropriate color level LView. Pro

Cultural Associations • Because a trashcan in Thailand may look like this: • A Thai user is likely to be confused by this image popular in Apple interfaces: • Sun found their email icon problematic for some American urban dwellers who are unfamiliar with rural mail boxes.

Stereotypes • People learn “idioms” that work in a certain way – Red means danger – Green means safe • Idioms vary in different cultures – Light switches • America: down is off • Britain: down is on – Faucets • America: counter-clockwise on • Britain: counter-clockwise off

WIMP Interfaces • Windows – Spatial context • Icons – Direct manipulation • Menus – Hierarchy • Pointing devices – Spatial interaction

Menus • Conserve screen space by hiding functions – Menu bar, pop-up • Hierarchically structured – Logical grouping – Conventional positioning • Tradeoff between breadth and depth – Too deep can become hard to find things – Too broad becomes direct manipulation

Dynamic Queries • Keyboard-initiated direct manipulation • Select menu items by typing part of a word – After each letter, update the menu – Once the word is displayed, user can click on it • Examples: Google queries, Windows help

Design Concept Summary • • • Visual affordance Visible constraints Mapping Causality Transfer effects Idioms Metaphors Cultural associations Individual differences

“Seamless Interfaces” • Informative feedback • Easy reversal • User in control – Anticipatable outcomes – Explainable results – Browsable content • Limited working memory load – Query context – Path suspension • Alternatives for novices and experts – Scaffolding

The Discipline of HCI From ACM SIGCHI Curricula for Human-Computer Interaction

Information Architecture • The structural design of an “information space” to facilitate access to content • Two components: – Static design – Interaction design

Static Design • Organizing principles – Logical: – Functional: – Demographic: e. g. , chronological, alphabetical by task by user • Metaphors – Organizational: – Physical: – Functional: – Visual: e. g. , e-government e. g. , online grocery store e. g. , cut, paste e. g. , octagon for stop

“Site Blueprint” Main Homepage Teaching Research Other Activities LBSC 690 Ph. D. Students IR Colloquium INFM 718 R Publications TREC Doctoral Seminar Projects

Grid Layouts Navigation Bar Content Related Links Navigation Bar Content

Grid Layout: NY Times

Grid Layout: NY Times Navigation Banner Ad Another Ad Content Popular Articles

Grid Layout: ebay

Grid Layout: ebay Navigation Banner Ad Navigation Related Search Results

Grid Layout: Amazon

Grid Layout: Amazon Navigation Related Search Results

Some Layout Guidelines • Contrast: make different things different – to bring out dominant elements – to create dynamism • Repetition: reuse design throughout the interface – to achieve consistency • Alignment: visually connect elements – to create flow • Proximity: make effective use of spacing – to group related and separate unrelated elements

Interaction Design • Chess analogy: a few simple rules that disguise an infinitely complex game • The three-part structure – Openings: many strategies, lots of books about this – End game: well-defined, well-understood – Middle game: nebulous, hard to describe • Information navigation has a similar structure! – Middle game is underserved From Hearst, Smalley, & Chandler (CHI 2006)

Opening Moves

Middle Game

Navigation Patterns • Drive to content • Drive to advertisement • Move up a level • Move to next in sequence • Jump to related

Human-Computer with the Interaction A discipline concerned Implementation Design Evaluation of interactive computing systems for human use

Evaluation Approaches • Formative vs. summative • Extrinsic vs. intrinsic • Quantitative vs. qualitative – Deductive vs. inductive • User study vs. simulation

Evaluation Examples • Direct observation – Evaluator observes users interacting with system • in lab: user asked to complete pre-determined tasks • in field: user goes through normal duties – Validity depends on how contrived the situation is • Think-aloud – Users speak their thoughts while doing the task – May alter the way users do the task • Controlled user studies – Users interact with system variants – Correlate performance with system characteristics – Control for confounding variables

Evaluation Measures • Time to learn • Speed of performance • Error rate • Retention over time • Subjective satisfaction

Learning More • LBSC 733: Networks • LBSC 795: HCI Design and Evaluation • INFM 700: Information Architecture • LBSC 790: HCI Implementation

“Hello World” HTML This is the header <html> <head> <title>Hello World!</title> </head> <body> <p>Hello world! This is my first webpage!</p> </body> </html> This is the actual content of the HTML document

Rendering • Different devices have different capabilities – Desktop – PDA • Rendering maps logical tags to physical layout – Controls line wrap, size, font… • Place the title in the page border • Render <h 1> as 24 pt Times • Render <strong> as bold • Somewhat browser-dependent – Internet Explorer and Netscape make different choices

HTML Document Structure • “Tags” mark structure – <html>a document</html> – <ol>an ordered list</ol> – <i>something in italics</i> • Tag name in angle brackets <> – Not case sensitive • Open/Close pairs – Close tag is sometimes optional (if unambiguous)

Logical Structure Tags • Head – Title • Body – – – Headers: <h 1> <h 2> <h 3> <h 4> <h 5> Lists: <ol>, <ul> (can be nested) Paragraphs: <p> Definitions: <dt><dd> Tables: <table> <tr> <td> </tr> </table> Role: <cite>, <address>, <strong>, …

Physical Structure Tags • Font – Typeface: <font face=“Arial”></font> – Size: <font size=“+1”></font> – Color: <font color=“ 990000”></font> • http: //webmonkey. wired. com/webmonkey/reference /color_codes/Emphasis – Bold: <b></b> – Italics: <i></i>

(Hyper)Links index. html <html> <head> <title>Hello World!</title> </head> <body> <p>Hello world! This is my first webpage!</p> <p>Click <a href="test. html">here</a> for another page. </p> </body> </html> test. html <html> <head> <title>Another page</title> </head> <body> <p>This is another page. </p> </body> </html>

Hypertext “Anchors” • Internal anchors: somewhere on the same page – <a href=“#students”> Students</a> • Links to: <a name=“students”>Student Information</a> • External anchors: to another page – <a href=“http: //www. clis. umd. edu”>CLIS</a> – <a href=“http: //www. clis. umd. edu#students”>CLIS students</a> • URL may be complete, or relative to current page – <a href=“video/week 2. rm”>2</a> • File name part of URL is case sensitive (on Unix servers) – Protocol and domain name are not case sensitive

Images • <img src=“URL”> or <img src=“path/file”> – <img src=“http: //www. clis. umd. edu/IMAGES/head. gif”> – SRC: can be url or path/file – ALT: a text string – ALIGN: position of the image – WIDTH and HEIGHT: size of the image • Can use as anchor: – <a href=URL><img src=URL 2></a> • Example: – http: //www. umiacs. umd. edu/~daqingd/Image-Alignment. html

Tables <table> <tr> <td> eenie </td> <tr> <td> mo </td> <tr> <td> by </td> </table> </td><td> mennie miney </td> </tr> catch </td><td> a tiger</td> the </td><td> toe </tr> </td> </tr>

Table Example <table align=“center”> <caption align=“right”>The caption</caption> < tr align=“LEFT”> <th> Header 1 </th> <th> Header 2</th> </tr> <tr><td>first row, first item </td> <td>first row, second item</td></tr> < tr><td>second row, first item</td> <td>second row, second item</td></tr> </table> See also: http: //www. umiacs. umd. edu/~daqingd/Simple-Table. html

Frames • Divide browser pages into separate sections – Useful when you want to scroll separately • Each section can display an HTML page • Example 1: menu frame on the left side of a page <frameset cols=“ 10%, 90%" > <frame src=“template. html"> <frame src=“images. html"> </frameset> • Example 2: – http: //www. hq. nasa. gov/alsj/frame. html

Cascading Style Sheets (CSS) • Specify appearance, based on structure • Style rules “cascade” from broad to narrow: – Browser’s default behavior – External style sheet – Inline style

Some Ways of Using CSS • Inline style: – Causes only the tag to have desired properties <p style="font-family: arial; color: blue">…</p> • Internal stylesheet: – Causes all tags to have the desired properties … <head>… <style type="text/css"> p { font-family: arial; color: blue} </style> </head> <body> <p>…</p> …

Customizing Classes • Define a custom style for standard HTML tag … <head>… <style type="text/css"> p. style 1 { font-family: arial; color: blue} p. style 2 { font-family: serif; color: red} </style> </head> <body> <p class=“style 1">…</p> <p class=“style 2">…</p> …

External Style Sheets • Store formatting metadata in a separate file mystyle. css p. style 1 { font-family: arial; color: blue} p. style 2 { font-family: serif; color: red} … <head>… <link rel="stylesheet" href="mystyle. css" type="text/css" /> </head> <body> <p class=“style 1">…</p> <p class=“style 2">…</p> …

General Structure for CSS • Basic syntax: selector {property: value} HTML tag you want to modify… The property you want to change… • Example: The value you want the property to take p { text-align: center; color: black; font-family: arial } Causes – Font to be center-aligned – Font to be Arial and black

Designing Web Pages • Key design issues: – Content: What do you want to publish? – Style: How do you want to present it? – Syntax: How can you achieve that presentation? • Sources of information – Online tutorials (there are lots of these) – Technical materials (e. g. , the W 3 C HTML spec)

Some Style Guidelines • Design for generic browsers – And test on every version you wish to support • Provide appropriate “access points” – User needs and navigation strategies differ • Design useful navigational aids – A Web search may lead to the middle of a site • Include some indication of currency – Date of last update, “new” icons, etc. • Indicate who is responsible for the content – Helps readers assess authority

Some Accessibility Guidelines • Design for device independence • Maintain compatibility with earlier browsers – Provide alternative pages if necessary • Provide alternatives to aural and visual content – Alt tags for images, transcripts for audio • Make is easy for assistive devices to work – Use structural (rather than layout-oriented) markup – Give a title to each frame – Only use HTML tables for table data (not content layout) – Use markup to indicate language switching

• • • • Section 508 (Federal Web pages) A text equivalent for every non-text element shall be provided. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. Web pages shall be designed so that all information conveyed with color is also available without color. Documents shall be organized so they are readable without requiring an associated style sheet. Redundant text links shall be provided for each active region of a server-side image map. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. Row and column headers shall be identified for data tables. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. Frames shall be titled with text that facilitates frame identification and navigation. Pages shall be designed to avoid causing the screen to flicker with a frequency >2 Hz and <55 Hz. A text-only page, with equivalent information or functionality, shall be provided when compliance cannot be accomplished in any other way. The content shall be updated when the primary page changes When pages use scripting languages to display content or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the above. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required. A method shall be provided that permits users to skip repetitive navigation links. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

HTML Editors • Goal is to create Web pages, not learn HTML! • Several are available – Macromedia Dreamweaver available commercially – Microsoft Word (Page->Edit with Word in IE 7 – Many more options available on www. tucows. com • Tend to use physical layout tags extensively – Detailed control can make hand-editing difficult • You may still need to edit the HTML file – Some editors use browser-specific features – Some HTML features may be unavailable – File names may be butchered when you upload

HTML Validators • Syntax checking: cross-browser compatibility – http: //validator. w 3. org – Try it on http: //www. umd. edu • Style checking: Section 508 compliance – http: //www. cynthiasays. com/ – Try it on http: //www. umd. edu

What’s Wrong with the Web? • HTML – Confounds structure and appearance (XML) • HTTP – Can’t recognize related transactions (Cookies) • URL – Links breaks when you move a file (PURL)

What’s a Document? • Content • Structure • Appearance • Behavior

History of Structured Documents • Early standards were “typesetting languages” – NROFF, Te. X, La. Te. X, SGML • HTML was developed for the Web – Too specialized for other uses • Specialized standards met other needs – Change tracking in Word, annotating manuscripts, … • XML seeks to unify these threads – One standard format for printing, viewing, processing

e. Xtensible Markup Language (XML) • SGML was too complex • HTML was too simple • Goals for XML – Easily adapted to specific tasks • Rendering Web pages • Encoding metadata • “Semantic Web” – – Easily created Easily processed Easily read Concise

Some XML Applications • Text Encoding Initiative – For adding annotation to historical manuscripts – http: //www. tei-c. org/ • Encoded Archival Description – To enhance automated processing of finding aids – http: //www. loc. gov/ead/ • Metadata Encoding and Transmission Standard – Bundles descriptive and administrative metadata – http: //www. loc. gov/standards/mets/

Really Simple Syndication (RSS) <? xml version="1. 0"? > <rss version="2. 0"> <channel> <title>Lift Off News</title> <link>http: //liftoff. msfc. nasa. gov/</link> <description>Liftoff to Space Exploration. </description> <language>en-us</language> <pub. Date>Tue, 10 Jun 2003 04: 00 GMT</pub. Date> <last. Build. Date>Tue, 10 Jun 2003 09: 41: 01 GMT</last. Build. Date> <docs>http: //blogs. law. harvard. edu/tech/rss</docs> <generator>Weblog Editor 2. 0</generator> <managing. Editor>editor@example. com</managing. Editor> <web. Master>webmaster@example. com</web. Master> <ttl>5</ttl> <item> <title>Star City</title> <link>http: //liftoff. msfc. nasa. gov/news/2003/news-starcity. asp</link> <description>How do Americans get ready to work with Russians aboard the International Space Station? They take a crash course in culture, language and protocol at Russia's Star City. </description> <pub. Date>Tue, 03 Jun 2003 09: 39: 21 GMT</pub. Date> <guid>http: //liftoff. msfc. nasa. gov/2003/06/03. html#item 573</guid> </item> </channel> </rss> See example at http: //www. nytimes. com/services/xml/rss/

Atom Feeds <? xml version="1. 0" encoding="utf-8"? > <feed xmlns="http: //www. w 3. org/2005/Atom"> <title>Example Feed</title> <subtitle>A subtitle. </subtitle> <link href="http: //example. org/feed/" rel="self"/> <link href="http: //example. org/"/> <updated>2003 -12 -13 T 18: 30: 02 Z</updated> <author> <name>John Doe</name> <email>johndoe@example. com</email> </author> <id>urn: uuid: 60 a 76 c 80 -d 399 -11 d 9 -b 91 C-0003939 e 0 af 6</id> <entry> <title>Atom-Powered Robots Run Amok</title> <link href="http: //example. org/2003/12/13/atom 03"/> <id>urn: uuid: 1225 c 695 -cfb 8 -4 ebb-aaaa-80 da 344 efa 6 a</id> <updated>2003 -12 -13 T 18: 30: 02 Z</updated> <summary>Some text. </summary> </entry> </feed>

XML: A Family of Standards • Definition: DTD – Known types of entities with “labels” – Defines part-whole and is-a relationships • Markup: XML – “Tags” regions of text with labels • Markup: XLink – Defines “hypertext” (and other) link relationships • Presentation: XSL – Specifies how each type of entity should be “rendered”

XHTML Example • View “The Song of the Wandering Aengus” – http: //www. umiacs. umd. edu/~oard/teaching/690/spring 08/notes/3/xml. htm • Built from three files – yeats 01. xml – poem 01. dtd – poem 01. xsl

XML Example <? xml version="1. 0"? > <!DOCTYPE POEM SYSTEM "poem 01. dtd"> <? xml-stylesheet type="text/xsl" href="poem 01. xsl"? > <POEM> <TITLE>The Song of Wandering Aengus</TITLE> <AUTHOR> <FIRSTNAME>W. B. </FIRSTNAME> <LASTNAME>Yeats</LASTNAME> </AUTHOR> <STANZA> <LINE>I went on to the hazel wood, </LINE> <LINEIN>Because a fire was in my head, </LINEIN> <LINE>And cut and peeled a hazel wand, </LINE> </STANZA> </POEM>

Document Type Definition (DTD) <!ELEMENT poem ( (title, author, stanza)* )> <!ELEMENT title (#PCDATA) > <!ELEMENT author (firstname, lastname) > <!ELEMENT firstname (#PCDATA) > <!ELEMENT lastname (#PCDATA) > <!ELEMENT stanza (line+ | linein+) > <!ELEMENT line (#PCDATA) > <!ELEMENT linein (#PCDATA) > #PCDATA a, b a|b a* a+ span of text a followed by b either a or b 0 or more a’s 1 or more a’s

Specifying Appearance: XSL <xsl: template match="POEM"> <xsl: template match="TITLE"> <HTML> <H 1> <BODY BGCOLOR="#FFFFCC"> <FONT COLOR="Green"> <xsl: apply-templates/> <xsl: value-of/> </BODY> </FONT> </HTML> </H 1> </xsl: template>

XLink Example …… <poem xmlns: xlink="http: //www. w 3. org/1999/xlink"> <author xlink: href="yeats. RDFS 3. xml“ xlink: type="simple">W. B. Yeats</author> <poems> <poem 1 xlink: href="http: //www. kirjasto. sci. fi/wbyeats. htm" xlink: type="simple">The Rose</poem 1> <poem 2 xlink: href="http: //www. kirjasto. sci. fi/wbyeats. htm" xlink: type="simple">The Tower</poem 2> </poems> </poem> ……….

XHTML: Writing HTML as XML <? xml version="1. 0" encoding="iso-8859 -1"? > <html xmlns="http: //www. w 3. org/TR/xhtml 1" > <head> <title> Title of text XHTML Document </title> </head> <body> <div class="my. Div"> <h 1> Heading of Page </h 1> <p> here is a paragraph of text. I will include inside this paragraph a bunch of wonky text so that it looks fancy. </p> <p>Here is another paragraph with <em>inline emphasized</em> text, and <b> absolutely no</b> sense of humor. </p> <p>And another paragraph, this one with an <img src="image. gif" alt="waste of time" /> image, and a line break. </p> </div> </body></html>

Some Basic Rules for XML • XML is case sensitive • XML declaration is the first statement – <? xml version="1. 0"? > • An XML document is a “tree” – Must contain one root element – Other elements must be properly nested • All start tags must have end tags • Attribute values must have quotation marks – <item id=“ 33905”> • Certain characters are “reserved” – For example: < is used to represent <

Multiple XML Namespaces <? xml version="1. 0"? > <rdf: RDF xmlns: rdf="http: //www. w 3. org/1999/02/22 -rdf-syntax-ns#" xmlns: rss="http: //purl. org/rss/1. 0/" xmlns: dc="http: //purl. org/dc/elements/1. 1/"> <rss: channel rdf: about="http: //www. xml. com/xml/news. rss"> <rss: title>XML. com</rss: title> <rss: link>http: //xml. com/pub</rss: link> <dc: description> XML. com features a rich mix of information and services for the XML community. </dc: description> <dc: subject>XML, RDF, metadata, information syndication services</dc: subject> <dc: identifier>http: //www. xml. com</dc: identifier> <dc: publisher>O'Reilly & Associates, Inc. </dc: publisher> <dc: rights>Copyright 2000, O'Reilly & Associates, Inc. </dc: rights> </rss: channel> </rdf: RDF> Example from http: //www. xml. com/pub/a/2000/10/25/dublincore/

Some Ajax Applications • Google Maps – http: //maps. google. com • Google Suggest – http: //www. google. com/webhp? complete=1&hl=en • Sajax Tables – http: //labs. revision 10. com/? p=5 • Sajax – http: //www. modernmethod. com/sajax/

• Relational normalization • Structured programming • Software patterns • Object-oriented design • Functional decomposition Business Interaction Design rules Interface Design Client Hardware Web Browser Client-side Programming Interchange Language Server-side Programming (PC) (IE, Firefox) (Java. Script) (HTML, XML) (PHP) Database (My. SQL) Server Hardware (PC, Unix)

Even More Uses of XML … • • CML – Chemical Markup Language Cell. ML – biological models BSML – bioinformatic sequences MAGE-ML – Micro. Array Gene Expression XSTAR – for archaeological research MARCXML – MARC in XML AML – astronomy markup language Sports. ML – for sharing sports data

Summary • Learning to build simple Web pages is easy – Which is good news for the homework! • All documents are structured documents – But some expose the structure better than others • XML is a flexible markup language – Complete separation of structure and appearance

Before You Go On a sheet of paper, answer the following (ungraded) question (no names, please): What was the muddiest point in today’s class?