INFO 498A   Construction and Presentation of Information in the Visual Arts

After the Web Visual Properties of Written Language

Robert Indiana: The Figure Five

Class discussion: What is the relationship between the print and visual elements in this painting?

• Information elites determined form and meaning of information (e.g., librarians)
• Information oligarchs vended access to information (e.g. Dialog Corporation)
• Use of fairly rigid record structures (e.g., MARC records)
• Databases grow "slowly", records are "permanent".
• Use of "one" source of meaning (e.g., the Library of Congress Subject Headings)
• Use of "one" classification of meaning (e.g., the Library of Congress Classification)
• Computers act as big indexes, helping us find paper resources (e.g., Library catalog at the University of Washington)

The Internet/World Wide Web Yet another information technology revolution!

• Anyone can publish a web page. The conflation of the author and publisher?
• Anyone can indicate the meaning of his or her web page. Meaning is freed from the control of elites. Your page is about what you say it is about.
• Information escapes personal control, escapes organizations, spans borders, etc.Multi-cultural, multi-language, multi-ethnic, etc.?
• Web content churn. Web pages tend to be ephemeral
• Web content is "full-text"
• Web content can be the product of scripts, database reads, streaming video/audio, cookies, caching, etc.

1998 and following... Second Generation Web

• Extensible Markup Language, XML:
  
  

  XML is a set of rules, guidelines, conventions, whatever you want to call them, for designing text formats for such data, in a way that produces files that are easy to generate and read (by a computer), that are unambiguous, and that avoid common pitfalls, such as lack of extensibility, lack of support for internationalization/localization, and platform-dependency.

  Documents that declare their meaning? Deja Vu: What is the relationship between syntax and semantics?



• XLink
  
  

  This specification defines the XML Linking Language (XLink), which allows elements to be inserted into XML documents in order to create and describe links between resources.

  Linkages among documents that declare their meaning?



• XML Query
  
  

  The mission of the XML Query working group is to provide flexible query facilities to extract data from real and virtual documents on the Web, therefore finally providing the needed interaction between the web world and the database world. Ultimately, collections of XML files will be accessed like databases.

  An structured query language to use on XML documents? The Web as a database?



• XML Schemas




XML Schemas express shared vocabularies and allow machines to carry out rules made by people. They provide a means for defining the structure, content and semantics of XML documents.

Common, shared document descriptions? Community implications? The Web is a community? Is there a policeman?

The Extensible Markup Language (XML)

XML files are simply text files and XML itself is only a text string. Since they are only structured text strings, this makes them ideal for communications between two components or two systems that were never designed to communicate with each other.

<?xml version="1.0"?>
<colors>
   <paint number="123">
         <name>Scarlet</name>
         <hue>opaque</hue>
         <price>12.99<price>
  </paint>
   <paint number="456">
         <name>Ultramarine</name>
         <hue>transparent</hue>
         <price>8.75</price>
  </paint>	 
</colors>

Frequently when two systems are being designed to communicate, which is increasingly the case in this Internet era, programmers face the sticky issue of how to manage COM objects, created on separate machines. Obviously, moving COM objects, classes and ActiveX controls around the Internet is not ideal. Moving the data and “state” (the values and content) is a much better approach in terms of maintenance and speed. With this in mind, how do you structure your data? Do you create your own custom format in which your distributed objects communicate, or do you use XML so that many other systems can in future participate? XML is the perfect medium in which to describe the state of these objects for communications to other systems or objects. In a disconnected medium such as the Internet, synchronous (where two systems are synchronized in their operations) communications over the web as it is not easy to achieve. Therefore there is a huge need for asynchronous messaging and even for indicating the “state” of that message.

Imagine this scenario: Two products from two different vendors have different custom data formats for their purchase orders - therefore they are unable to exchange their data. But if their developers use the XML approach to structuring purchase order data, the two systems may be able to exchange data – without overhauling their existing systems.

XML can contain links to other files. This is useful because they can provide a link to an XML file called a “schema” which holds a description of the correct XML structure.

The XSL file (eXtensible Stylesheet Language) holds the details on how to appropriately display a XML file. For example, if I send you an XML file with several hundred lines of numbers in it, the same XML data/message can be displayed as an email, a word document, as a table containing data or even as a graph or simply as text. All I have to do is provide the correct XSL file for each choice.

This is most useful because the XML file itself is only the data, and the “look and feel” is kept separately in the XSL file and only applied according to the context it is in and according to the data it is displaying.

• Internet Explorer 5.0 has a built-in XML interpreter. When IE processes an XML source , it creates a Document Object Model (DOM) of the source. Further reading about DOM at: Document Object Model.

Linking to an Extensible Stylesheet Language (XSL) styling source

• Showing all the values (without formatting) in the DOM. The xml source. The stylesheet.
• Using templates to show infosets of the DOM. The xml source. The stylesheet.
• Building a simple HTML page using templates. The xml source. The stylesheet.
• Incorporating scripting. The source. The stylesheet.
• Generating tables. The source. the stylesheet.

• Selecting XML elements
  
  The DOM used in the following examples describes Bantam chickens.
  
  
  • Find the root element: /Bantams. This dumps the DOM since it targets the root element. The stylesheet.
  • Find all the catalog elements: //catalogNumber. This is a recusive descent that searches for the specified element at any depth. The stylesheet.
  • Find the catalog number element of the Light Brahma: //BrahmaBantams/LightBrahma/catalogNumber. The stylesheet.
  • Find the cost of Bantams: /Bantams//cost. This will find the cost element, one or more levels deep in Bantams (arbitrary descendants). The stylesheet.
  • Find the catalog number of the Silkies, regardless of intervening level of color: //Silkies/*/catalogNumber. The * is a wildcard that selects all elements regardless of the element name. The stylesheet.
  • Find all the cost elements of the Brahma Bantams where the units attribute is "Pesos". The @ is the targets an attribute. //BrahmaBantams/*/cost[@units = 'Pesos']. The stylesheet.
  
  
  
• Indexing into a collection
  
  The DOM in the following examples lists pen pals.
  
  
  • Target the first element (the count begins with zero): //Person[0] and the first name of the first person: //Person[0]/FirstName. The stylesheet.
  • Target the second Person element that has a First Name: //Person[FirstName][1], and the third Person element that has a Last Name. The stylesheet.
  • Target the first listed snack food for each person: //Person/SnackFood[0]. The stylesheet.
  • For the complete set of snack foods listed within various people, target the first and fourth: //(Person/SnackFood)[0] ones listed. The stylesheet.
  • Target the first snack food of the first person: //Person[0]/SnackFood[0]. The stylesheet.
  • Target the last person in the list: //Person[end()]. The stylesheet.
  • Target the last snack food listed for each person: //Person/SnackFood[end()]. The stylesheet.
  • For all the snack foods listed for all pen pals, target the last one: //(Person/SnackFood)[end()]. The stylesheet.
  
  
  
• Using Filters
  
  The DOM in the following examples lists detective stories for young adult readers.
  
  
  • Target all the books where the detective is "Nancy Drew": //Book[Detective="Nancy Drew"]. The stylesheet.
  • Target book number 58 in the Hardy Boys series: //HardyBoys//Number[.='58']. The stylesheet. Note that the dot operator, ., indicates the current context (i.e., the current target in the DOM).
    
    The $any$ keyword means that a condition will hold true if any item in a set meets that condition. The $all$ keyword means that a condition will hold true only if all elements in a set meet the condition.
    
    
  • Find books where one of the detectives is "Joe Hardy": //Book[$any$ Detective="Joe Hardy"]. The stylesheet.
  • Find books where each one the detectives is "Nancy Drew": //Book[$all$ Detective="Nancy Drew"]. The stylesheet.
  • Find books with Number 57 and that features the Detective Joe Hardy: //Book[Number='57'] | //Book[Detective='Joe Hardy']. The stylesheet. Some notes about the Union operator, "|".
  • Find all the Young Adult books that are either Nancy Drew or Hardy Boys books: //YoungAdult[NancyDrew | HardyBoys]. The stylesheet.
  
  
  
• Using comparisons
  
  The DOM in these examples describes Bicycle Lights.
  
  
  • Find the light system called "Avenger": Item[Name $eq$ 'Avenger'] and check if its price is less than $70.00: Item[Price $le$ 70.00]. The stylesheet. Note the use of the if conditional in the stylesheet.
  • Find the single light systems with run times less than 4 hours: Item[System $ieq$ "SINGLE"] $and$ Item[RunTime $ne$ 4.00]. The stylesheet. Note the use of the "ignore case equality" operator, $ieq$.
  
  
  
• Using operators
  
  
  • The xsl:for-each element applies a template repeatedly to a set of nodes. The xsl:if element allows conditional template fragments. This example concerns an xml source of purebred dogs. The stylesheet.
  • The xsl:when element provides multiple conditional testing in conjunction with the xsl:choose and xsl:otherwise elements. This example concerns an xml source of Silkie Bantams. The stylesheet.
  
  
  XML and HTML
  • Targeting multiple stylesheets at the same xml source.
  • Using a VBScript boolean function for the <expr()> function. Note the use of the ancestor() to change the context. The xml source. The stylesheet.
  • Embedding <mailto> and <URL> addresses. The xml source. The stylesheet.
  • Presenting sorted results.

• Using JavaScript buttons to show content on the same page using <div> tags. The HTML page. There is a red style and a blue style.
• Using an HTML select widget, evaluating the choice and then opening a new page with an XML source. The HTML page. Note that the XML sources target their own stylesheets.