chapters/Background_DOM.tex

   1
   2 The Document Object Model (DOM) represents a document as a tree like data structure with the document as a root node. The elements of the document are represented as children of either this root node or of a parent element. In addition, elements may have attributes which contain information about that particular element.
   3
   4 The DOM is described within several W3C standards including XML, HTML and SVG. XML is a general language which is intended for representing any tree-like structure using the DOM, whilst languages such as HTML\cite{citationneeded} and SVG\cite{citationneeded} are specifically intended for representing visual information. SVG is defined as a type of XML, whilst HTML is tecnically distinct from XML. Both HTML and XML are supposedly be based upon a language called SGML which is not actually defined \rephrase{except in the foulest chapters of the necromonicom}. Then there is XHTML which is HTML but also XML. \rephrase{Cut the crap about what is and is not valid XML? We only care about the DOM we're not fucking web designers here}.
   5
   6 The HyperText Markup Language (HTML) was, as its name implies, originally intended mostly for text. When combined with Cascading Style Sheets (CSS) control over the positioning and style of the text can be acheived. Images stored in some other format can be rendered within a HTML document, but HTML does not include ways to specify graphics primitives or their coordinates.
   7
   8 The Scalable Vector Graphics (SVG) standard was designed to represent a vector image. In the SVG standard, each graphics primitive is an element in the DOM, whilst attributes of the element give information about how the primitive is to be drawn, such as path coordinates, line thickness, mitre styles and fill colours. Figure \ref{SVG} shows an example of an image defined using the SVG format. The first two lines are only required for a stand alone image; the HTML standard allows for rendering an SVG within a web page using the \verb/<svg>/ tag. \rephrase{Read the standards a bit more carefully here...}
   9
  10
  11 \begin{figure}[H]
  12 \begin{minipage}[t]{0.3\textwidth}
  13         \begin{figure}[H]
  14         \centering
  15         \includegraphics[width=1\textwidth]{figures/shape.pdf}
  16         \end{figure}
  17 \end{minipage}
  18 \begin{minipage}[t]{0.5\textwidth}
  19 \begin{minted}{xml}
  20 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  21 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  22         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  23
  24 <svg id="svg_example" xmlns="http://www.w3.org/2000/svg"
  25         version="1.1" width="104" height="186">
  26 <path id="straightline" d = "m 0, 0 104, 186"
  27         style="stroke:#000000;"/>
  28 <rect id="rect1"
  29         x = "30" y = "20" width = "30" height = "150"
  30         style = "fill:#0000ff; fill-opacity:0.5;
  31                 stroke:#000000;"/>
  32 <path id="path"
  33         d = "m 57,185 c 0,0 57,-13 32,-43 -25,-30 -53,2 -25,
  34                 -30 28,-32 52,17 28,-32 -24,-50 -16,44 -35,12
  35                 -19,-32 13,-64 13,-64 0,0 40,-50 -0,-14 -40,36
  36                 -94,68 -59,109 35,41 45,62 45,62 z"
  37         style = "fill:#ff0000; fill-opacity:0.75;
  38                 stroke:#000000;"/>
  39 <rect id="rect2"
  40         x = "12" y = "130" width = "60" height = "20"
  41         style = "fill:#00ff00; fill-opacity:0.5;
  42                 stroke:#000000;"/>
  43 </svg>
  44 \end{minted}
  45 \end{minipage}
  46         \caption{A vector image demonstrating some ideas from Section\ref{Rasterising Vector Images} and it's representation in SVG}\label{SVG}
  47 \end{figure}
  48
  49
  50 \subsubsection{Modifying the DOM --- Javascript}
  51
  52 Javascript is now ubiquitous in web based documents, and is essentially used to make the DOM interactive. This can be done by altering the attributes of elements, or adding and removing elements from the DOM, in response to some event such as user input or communication with a HTTP server. \rephrase{For some really shitty examples of this, see \url{http://szmoore.net/ipdf/sam/figures/rabbit.html} and \url{http://szmoore.net/ipdf/sam/figures/shape.html}}.
  53
  54 In the HTML5 standard, it is also possible to draw directly to a region of the document defined by the \verb/<canvas>/ tag; as Hayes points out, this is similar to the use of PostScript in specifying the appearance of a document using low level drawing operators which are read by an interpreter. \rephrase{Say some stuff about WebGL or get as far away from this topic as possible while we still can?}
  55