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 Design
with XML
Front-end and Backend
Documents and Databases
Presentation and Organization
Web Browsers and Web Services
Information Design
Information Architect
1.

Organizing and presenting information
for a user-directed purpose.
Structural Engineer
2.

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 Schemes
Example
Scheme
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
Audiences
Create 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 actionoriented 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 componentbased models.
Documents and Databases
Documents
Databases
unstructured
structured
Tools
authoring
applications
development
Access
browsing
retrieval
Generation
static
dynamic
Portability
Yes
No
Information
“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::nancy@webreview.com
Example: Tabular Data
First
Hm
Phone
Wk Phone
Email
Title
Nancy
555-1234
555-4321
Nancy@webreview.com
Vice President
Example: Hierarchical Data
<ENTRY>
<NAME><FIRST>Nancy</FIRST></NAME>
<PHONE><HOME>555-1234</HOME>
<WORK>555-4321</WORK></PHONE>
<EMAIL>nancy@webreview.com</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>nancy@webreview.com</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


XLink


New Linking Types
Namespaces


Extensible Style Language
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 Summary
See 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_op
enal.html</link>
<description>OpenAL, the Open Audio Library, is a parallel
effort to OpenGL, the Open Graphics Library. It is crossplatform, 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>dale@xml.com (Dale Dougherty)</dc:publisher>
<dc:publisher>peter@xml.com (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?