The Document Object Model

The Web B.D, A.D.

They aren’t web pages, they’re document objects

A web browser interprets structured information.

A server sends dynamically structured information.

A web page is a set of structured objects.

End-users interact with those objects.

They have agency; what end-users do matters.

To make all this work, you need a standard for communication.

The DOM is. . .The DOM is a platform (and language) neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. The Document Object Model provides:

· A standard set of objects for representing HTML and XML documents;

· A standard model of how these objects can be combined, and;

· A standard interface for accessing and manipulating them.

Vendors can support the DOM as an interface to their proprietary data structures and APIs, and content authors can write to the standard DOM interfaces rather than product-specific APIs, thus increasing interoperability on the Web.

Basic HTML objects

• HTML document declaration• HTML, HEAD, TITLE, BODY• DIV, LAYER• Basic tags (TABLE, P)• A legal, addressable Document

Object must have an ID attribute.

hint; view the Source

The basic programming language used to dynamically interact with document objects, is JavaScript*. Increasingly, you will see references to AJAX; Asynchronous JavaScript And XML.

The XML standard is a leadership example of adherence to the W3C DOM standard.

* Other scripting languages include: VBScript; ASP ActiveX

Scripting languages

All About AJAXAjax refers to a broad group of web technologies used to implement a web application that communicates with a server in the background, without interfering with the current state of the page.

Ajax refers specifically to the following technologies:· XHTML and CSS for presentation;

· The Document Object Model for dynamic display of and interaction with data;

· XML and XSLT for the interchange and manipulation of data, respectively;

· The XMLHttpRequest object for asynchronous communication; JavaScript to bring these technologies together.

—J.J. Garrett

AJAX continued (from the Wikipedia entry for AJAX)

“ . .Since the original description, there have been a number of developments in the technologies used in an Ajax application, and the definition of the term AjaxJavaScript is not the only client-side scripting language that can be used for implementing an Ajax application. Other languages such as VBScript are also capable of the required functionality.The XMLHttpRequest object is not necessary for asynchronous communication. XML is not required for data interchange and therefore XSLT is not required for the manipulation of data. JavaScript Object Notation (JSON) is often used as an alternative format for data interchange, although other formats such as preformatted HTML or plain text can also be used. “

What does it look like to me?Facebook: “What are you doing right now?”

NYTimes.com: News slider, personalized content

USAtoday.com: custom search, “recommends”

What are dynamic interactions?· User-instigated changes in page content

· Calculations and updates made in reaction to user input

· User clicks

· Partial or complete page views

· Others?

User-instigated changese.g. Status updates; comments in

blogs/threads

Tells you:

· Level of engagement / interest in site

· Level of engagement / interest in content

Calculations and updates in reaction to user input

e.g. auto-fill forms, tax & shipping calculators, color & style changes

Tells you:

· User’s current interests

· Buying priorities, preferences and tendencies

User clickse.g. hyperlinks, activations, “focus”events

Measures:

· Quality of writing / priming for hyperlinks

· Tendency to engage with content

Should be indexed by:

· Geography

· Page topic / index coefficient*

· Large-scale search trends

· Inter-site position

· Number of possible clicks in a given page

Partial or complete page viewse.g. all images loaded T/F

Measures:· Quality of content presentation· Site-use behavioral tendencies (mtime)

· . . . more than the bounce rate. . .

Other dynamic interactions?

Questions & Discussion

• Any other questions from the TheStreet.com example?