10/16 Admin issues Evan Williams of Blogger will join us next week. Early demo October 30 th – first three projects. November 6 th – next three projects.

10/16 Admin issues Evan Williams of Blogger will join

us next week. Early demo

October 30th – first three projects. November 6th – next three projects.

Tasks Describe several tasks that a user

can perform on your site. Think procedurally

How many steps does it take to get the job done?

How long does it take? Think functionally

What is the user trying to accomplish?

Information Designwith XML

Front-end and BackendDocuments and Databases

Presentation and OrganizationWeb Browsers and Web

Services

Information Design

1. Information Architect Organizing and presenting

information for a user-directed purpose.

2. Structural Engineer Describing the structure of

information for processing by a program or human.

The Information Architect Information Architecture for

the World Wide Web by Rosenfeld & Morville (O'Reilly) The job of an Information Architect is

to establish a user-centered design process.

Job of Information Architect (p.11)

Clarify mission and vision for site Determine site's content and

functionality Define site's organization,

navigation, labeling and searching system.

Figure out how site will develop/change over time.

Design Disciplines Graphic Design Information or Library Science Journalism Usability Engineering Marketing Computer Science

Corporate Design Internal

Fulfill Corporate Mission Solve Organizational Problem

External Serve customer need Create or expand market opportunity

The organizational site vs the well-organized site Edward Tufte remarked that most sites

reflect the organization's structure rather than the information needs of the user.

Most corporate sites have to serve multiple missions, multiple departments. Is there a central site serving all? Does each department have a site? Does each product have a site.

Organization SchemesScheme Example

Chronological

What's New, Press Releases, Archives.

Geographical

Maps; Spatial Layouts, including tours.

Alphabetical Reference lists; Dictionary browsing.

Topical Subject-specific site

Task-oriented

Get a stock quote; buy; sell; research

AudiencesCreate paths for different audiences; customers; distributors;

Metaphor Desktop; library; showroom;

Traversal of Structure

Balancing Act Linear structures are fairly rigid but useful. Hierarchical organizations are usually

flattened on the Web. Complete hierarchy is difficult for user to grasp;

rather like memorizing table of contents. broad and shallow rather than deep search can compensate

Associative structure (hypertext) provides for point-to-point leaps, where user maintains his or her own context. Trouble with associative structures is that user often doesn't know where he or she is about to go.

Navigation Navigation systems

• express how information is organized on the site

• identify key functions (help, search)• direct different audiences to different

parts of site• Help provide context for user's

browsing (e.g. location).

Linking Strategy Complementary or contrary to

navigational structure? Menus; Drop-down boxes.

Internal vs. External links Embedded links in paras Textual vs. graphical links Automated Linking

Minimalist Linking Links represent decision points for

users; don't overuse them. Embedded links do not often stand

out as clear choices. Isolate them. Graphical links can be too subtle.

Use cues. Links need descriptive task- or

action-oriented labels.

First vs. Repeat Use How does first-time user

experience site? Is the site’s mission obvious? Is it available from all levels?

Do repeat users “learn” to use the site? Are there shortcuts? Can they return to a previous state?

Change What changes on the site?

How often is new information produced?

Do different parts of the site change at different rates?

Does the user know what’s new and does it drive the site?

How is updated information indicated? What elements are permanent?

Making things familiar Are there things that users are

already familiar with, handles that they can grab on to? Familiarity with Print models With an identity or brand With the structure of information

The Structural Engineer Describing how information is

organized separately from presentation

Identifying the source and destination of information

XML as “Self-describing information” Interchange and interoperability

Information-centric Applications Highlights XML promotes an information-centric, as

opposed to browser-centric, view of the Web.

XML is part of a next generation Web that is more functional, and not driven exclusively by the browser.

XML will be implemented first on the backend where information is managed and can be accessed by information-savvy programs. 

Structured Documents XML is based on the idea that

documents can be represented as structured information, gaining many of the benefits of databases.

An interesting corollary idea is that databases can be represented as documents to provide interchange and portability.

Similar to object-oriented or component-based models.

Documents and Databases  Documents Databases

Information unstructured structured

Tools authoringapplications

development

Access browsing retrieval

Generation static dynamic

Portability Yes No

“Stretching the Concept of the Document” Tim Bray, Web Techniques (12/98)

“both the nature of computing and the nature of XML will force document weenies (sometimes) to think like database geeks, and engineers (sometimes) to think like editors.”

XML is standardizing syntax. XML represents structured information

as documents that are both human readable and easily processed by programs.

An XML document consists of elements and attributes inside a single root element.

Might also reference a DTD that describes a “grammar” for a tagset.

Example: Plainly Structured Data

Nancy::555-1234::555-4321::Vice President::[email protected]

Example: Tabular Data

First Hm Phone

Wk Phone Email Title

Nancy 555-1234

555-4321 [email protected]

Vice President

Example: Hierarchical Data

<ENTRY> <NAME><FIRST>Nancy</FIRST></NAME> <PHONE><HOME>555-1234</HOME><WORK>555-4321</WORK></PHONE><EMAIL>[email protected]</EMAIL> <JOB><TITLE>Vice President</TITLE></JOB>

</ENTRY>

XML Declaration

<?xml version="1.0"?> <ENTRY> <NAME><FIRST>Nancy</FIRST></NAME> <PHONE><HOME>555-1234</HOME><WORK>555-4321</WORK></PHONE><EMAIL>[email protected]</EMAIL> <JOB><TITLE>Vice President</TITLE></JOB>

</ENTRY>

DTD Example <!ELEMENT entry (name, phone, email?, title)> <!ELEMENT phone (home, work)> <!ELEMENT name (first, last?)>

XML Provides Ways to Validate Information The ENTRY is well-formed, in that it

respects the syntax of XML. You could validate an XML document

against a DTD, which is a formal definition of the structure of this tagset.  

A validation process could determine that the entry is missing a LAST name, which might be a required element.

Syntax, Not Semantics Semantics is a potential pitfall.

XML does not tell an application what the tags and the enclosed content mean or represent. 

DTDs and Schemas are one approach to organizing semantics but for the most part this falls to the application.  

XML Tools A common syntax benefits programmers,

who can use a general-purpose tools for processing all XML documents.

XML Parser Tree or Stream Processing Models

Manipulate the document structure (DOM) Perform actions when element is found in input

stream Getting Started With XML Programming by

Norm Walsh

XML serves as the foundation for a family of standards XSL

Extensible Style Language XLink

New Linking Types Namespaces

Necessary to establish context of tagset, especially when exchanging XML fragments

Schema A DTD replacement that supports data types.

XML and HTML XML is a separate track from HTML XML does not replace HTML. XML relieves pressure on HTML to

change. HTML is simple markup and you can't

extend HTML much further without sacrificing  its simplicity.

XML applications may convert documents to HTML for delivery to all browsers.

"When will XML be implemented in the browser?" In the short term, XML is not dependent

on the browser for acceptance. Standards are beginning to drive the Web. Widespread support for XML is a sign

that the World Wide Web Consortium (W3C) is getting traction in laying out a open, standards-based path for the Web. 

XHTML

Article by Peter Wiggin Main Differences

Tags are case sensitive. Attribute values must be quoted. Empty tags like <br> are specified as

<br />. Elements may not overlap.

Data Interchange XML is intended for interchange

between systems. Once you automate a site so that it is

generated from a database, then you might lose the benefit of having a search engine index the pages on your site.   This is an interchange problem.

An XML-based metadata standard would allow you to interchange information with search engines.

XML and Distributed Computing  Business relationships are largely based

on information interchange.  Imagine if you had to send your product

database to another company? How do you tell them how the database is structured?

Instead you might express this information in XML and make it available on your site for real-time access.

XML-based Web Services Schulman: The Web is the API

URLs are command-line interfaces into computing power available on distributed computers.

Example of quote.yahoo.com Unix pipeline

Automating Access to Information Think "Beyond the Browser" Think of programs as consumers of

HTML today. Programs talk to programs on other machines. Servers talk to servers. 

Soon, the conversation will be encoded in XML and these programs will be smarter about the information they retrieve and process.

Sample User Application Shipping Report A “client” program hit three different sites

(UPS, FedEX, and DHL). Access your account to retrieve shipping

information: Option a: grab this information from HTML

interface Option b: grab an XML document with the same

information. Integrate the results into a single report

available to others in your company.

Web Services An application can make use of

services available anywhere on the Internet Microsoft’s .NET strategy

Web Services Frameworks XML-RPC – Remote Procedure

Call SOAP – Simple Object Access

Protocol UDDI – Universal Description and

Discovery Interface

RSS

RSS – Rich Site SummarySee my.userland.com

An RSS Example “OpenAL Explained” on Oreilly.

linux.com The information is gathered in CS

It is published as an article And as an RSS feed.

<?xml version="1.0" ?>  

<rss version="0.91">

. . .<item> 

<title>OpenAL Explained by Dave Phillips</title>  

<link>http://www.oreillynet.com/pub/a/linux/2000/10/13/oa_openal.html</link>  

<description>OpenAL, the Open Audio Library, is a parallel effort to OpenGL, the Open Graphics Library. It is cross-platform, open source solution for programming 2D and 3D audio. Creative Labs and Loki Games are spearheading the effort. Dave Phillips, who maintains the Linux Music &amp; Sound Applications Web site gives us an overview of the program.</description>  

</item>

<?xml version="1.0"?>

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://purl.org/rss/1.0/">

<channel rdf:about="http://www.oreillynet.com"> <title>Articles from The O'Reilly Network</title> <link>http://meerkat.oreillynet.com</link> <description> The O'Reilly Network is a comprehensive Open Source information and resources center. The site includes a fresh, continually updated feature section, news and forums providing an active meeting place for advanced and beginnning Open Source developers and administrators. </description> <dc:rights>Copyright 2000, O'Reilly and Associates</dc:rights> <dc:publisher>[email protected] (Dale Dougherty)</dc:publisher> <dc:publisher>[email protected] (Peter Wiggin)</dc:publisher> <dc:language>en-us</dc:language> </channel>

<item rdf:about="http://www.oreillynet.com/pub /a/linux/2000/10/13/oa_openal.html"> <title>OpenAL Explained</title> <link>http://www.oreillynet.com/pub /a/linux/2000/10/13/oa_openal.html </link> <dc:description> OpenAL is the Open Audio Library, a cross-platform, open source solution for programming 2D and 3D audio. </dc:description> <dc:creator>Dave Phillips</dc:creator> <dc:subject>Linux</dc:subject> <dc:subject>APIs, Game Development, Gaming, Multimedia</dc:subject> <dc:type>Article</dc:type> <dc:language>en-us</dc:language> <dc:date>2000-10-13</dc:date> <dc:format>text/html</dc:format> <dc:rights>Copyright 2000, O'Reilly and Associates</dc:rights> <dc:publisher>The O'Reilly Network</dc:publisher> <dc:publisher>O'Reilly and Associates</dc:publisher> </item>

...

</rdf:RDF>

Building Information Interfaces User Application layer Web application layer

New roles for developers and designers

Figure out what kinds of information needs to be exchanged with partners across different sites.

Information Model What information do you manage and how

is it structured? Documents Events Users

What do you keep in a database? For how long?

Where is the information (source) found and where will distribute it?

What formats are used to represent the information?