Presentation. Separating Content and Presentation Cascading Style Sheets (CSS) XML and XSLT

Size: px

Start display at page:

Download "Presentation. Separating Content and Presentation Cascading Style Sheets (CSS) XML and XSLT"

Ernest Terry
6 years ago
Views:

1 Presentation Separating Content and Presentation Cascading Style Sheets (CSS) XML and XSLT

2 WordPress Projects Theme Generators WYSIWYG editor Look at tools to support generation of themes Design a new WYSIWYG editor PowerPress Use of PowerPoint as a tool for sketching & prototyping Generate theme from PowerPoint Available as BSc, MSc and Research Projects or HA positions

3 HTML and Presentation Mixes content, structure and presentation Criticised by graphic designers fixed set of tags limited graphic capabilities page focussed rather than site focussed in terms of "look and feel" HTML 4.0 released in 1997 better separation of content and presentation through introduction of Cascading Style Sheets (CSS) HTML 5.0 (Draft) New structural elements, e.g. section, article, header, footer, New elements for embedding media, e.g. audio and video

4 Cascading Style Sheets (CSS) Style Sheet defines a set of rules that specify to a browser how an HTML document should be rendered Each rule consists of selector style declaration - specifies to which HTML tag it applies - specifies style properties associated with tag Examples body { background-color: black } h1 { font-family: arial; font-size:20pt; color: blue } p { font-family: arial; font-size:12pt; color: white }

5 Cascading Style Sheets (CSS)... Can be included in HTML document <html> <head> <title>michael</title> <style type="text/css"> body {background: url('michael.jpg') no-repeat fixed center} p {margin-top:75pt; font-family:arial; font-size:36pt; color:red; text-align:center} </style> </head> <body> <p> M. Nebeling </p> </body> </html>

6 Cascading Style Sheets (CSS)... Or stored in separate file and referenced from several HTML documents to provide uniform look and feel <html> <head> <title>michael</title> <link rel=stylesheet href="michaelstyle.css" type="text/css" \> </head> <body> <p> M. Nebeling </p> </body> </html> See for tutorial on CSS

7 HTML5 and CSS3 These new standards try to enforce/encourage an even stronger separation of content and presentation Introduction of tags to describe document content such as sections, asides, details, headers, footers etc. Removal of certain tags such as <big>, <center>, <font> Encouragement to use tags such as <i>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite> with care: The details of how text will be rendered should be left to CSS3 and, if used, they should only be used to describe the type of content and not how it will be rendered. The tag <hr> now signifies a change of content as well as producing a horizontal rule. The tags to support frames are removed as they are considered to have a negative effect on usability

8 CSS3 Specification split into modules. Important modules Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

9 Example Note that browser support is currently limited and special prefixes may be required <style type="text/css">.newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } </style>

10 To Come. In next week s exercise session, we will show HTML5 and CSS3 in action. How well do existing web sites adapt to large screens? How can layouts of news sites best be adapted to large screens? To what extent do HTML5 and CSS3 support these layouts?

Multi-Channel Access Our aim is also to be

requires a stronger separation of content

information content of a document from how

11 Multi-Channel Access Our aim is also to be able to support different document structures and formats to support different devices Phones Voice Phones (Voice XML) Tablets Digitally Augmented Paper Desktop Browsers (HTML) This requires a stronger separation of content from presentation that separates the information content of a document from how it is presented in terms of structure, format and also style

From Content to Presentation decide what to publish decide how to publish decide on style <person> <forename> Michael </forename> <surname> Nebeling </surname> </person> <html> <p> M.

12 From Content to Presentation decide what to publish decide how to publish decide on style <person> <forename> Michael </forename> <surname> Nebeling </surname> </person> <html> <p> M.Nebeling </p> <html> content often stored in database content extracted from database neutral representation (XML) appropriate browser format (HTML) document structure design of presentation 'look and feel' of web site style sheets (CSS)

13 What is XML? Standardised text format for (semi-)structured information Data surrounded by text markup that describes the data Enables data to become self-describing <note> <to> John Smith</to> <from> Mary Jones </from> <content> Project SuperXML is to go ahead starting 1 July Contact Fred. </content> </note>

14 Example XML Document <?xml version="1.0"?> <?xml:stylesheet type="text/xsl" href="publn.xsl"?> <publications> <publication type="article"> <title>oms Java: A Persistent Object Management Framework</title> <author> <surname>kobler</surname> <forename>adrian</forename> </author> <author> <surname>norrie</surname> <forename>moira</forename> </author> <howpublished>l'objet. Vol.6 No.3</howpublished> <month>11</month> <year>2000</year> </publication> <publication type="inproceedings">... </publication> </publications>

15 DOM for publications Document Element publications Element publication Attribute type Text report Element title Element author Element address Text OMS Tutorial Element surname Element forename Text Signer Text Beat

16 XML Transformations Programmers want to be able to transform data from one format to another processing of XML documents ( XML -> XML ) post-processing of documents e.g. XML to HTML, XML to PDF, XML to... Most popular transformation tool is XSLT (extensible stylesheet language transformation language)

17 XSLT Processor Applies an XSLT stylesheet to an XML document and produces a result document Source Tree Result Tree XML Document DOM XSLT Parser Processor HTML, WML,... DTD/ DTD XML Schema Stylesheet Tree XSLT Stylesheet

18 XSLT XSLT is a language for transforming the structure of an XML document The transformation is based on a set of template rules defining what output should be generated for a particular input pattern XSLT is a declarative language (describing the required transformation rather than providing a sequence of procedural instructions) Matching process is based on XPath

19 XPath XPath is an expression language used to identify parts of XML documents find 1st publication element find the 2nd child element of the 3rd publication element find the type attribute of the 1st publication element with a child author element with surname element with contents Kobler Abstract means of addressing document parts based on path notation Used in XSLT and also XML Query Languages (XQuery)

20 XPath examples doc("publns.xml")/publications/publication [...] selection predicate on is shorthand to refer to attributes //author // shorthand to refer to all descendants /publications/publication/author[1] If a predicate contains a single numeric value, it is treated like a subscript

21 Evaluation of XPath Expressions XPath expressions are evaluated in terms of data model rather than XML text Steps in an XPath expression are evaluated from left to right First step identifies a sequence of nodes using one of: an input function e.g. doc( publns.xml ) a variable bound to a sequence of nodes, e.g. an intermediate result a function that returns of sequence of nodes e.g. id( name ) some implementations also allow a path expression to start with / or //

22 Evaluation of XPath Expressions... Consider a single step in the path expression of form lhs-expression / rhs-expression e.g publication/author For each / in a path expression, the expression on the left-hand side is evaluated and the resulting nodes returned in document order e.g set of publication nodes The expression on the right-hand side of the / is then evaluated once for each left-hand node, merging the results to produce a sequence of nodes in document order for every publication, the author nodes are added to the result set During the evaluation of the right-hand expression, the left-hand expression is known as the context node

23 Location Paths A location path is composed of a sequence of location steps A location step has the general form axis ::node-test [predicate] where the selector [predicate] is optional Example /child::publication/child::author[. = Brown ]/parent::node()/attribute::type Fortunately, there are abbreviations possible to make it simpler!

24 Axis Names self parent child ancestor ancestor-or-self descendant context node itself context node s parent, if it exists context node s children, if they exist context node s ancestors, if they exist context node s ancestors and also itself context node s descendants descendant-or-self context node s descendants and also itself following following-sibling preceding preceding-sibling attribute namespace nodes in XML document following context node, not including descendants sibling nodes following the context node nodes in XML document preceding the context node, not including ancestors sibling nodes preceding the context node attribute nodes of the context node namespace nodes of the context node

25 Forms of RHS Expressions What forms of expression can occur on right-hand side of /? name test selects element or attribute nodes based on name e.g. /publication kind test used to select nodes based on type e.g. /comment( ) /text( ) /processing-instruction( ) explicit axis together with name or kind test specific structural relationship to context node e.g. /child::author /attribute::type /following-sibling::year primary expression literal, function call, variable name, parenthetical expression

26 Node Tests * selects all element * node( ) text( ) comment( ) processing-instruction( ) node name selects all attribute nodes selects all nodes regardless of their type selects all text nodes selects all comment nodes selects all processing-instruction nodes selects all nodes with a specified node name

27 Location Path Abbreviations child:: attribute:: this location path used by default if no axis is supplied and may therefore be omitted the attribute axis may be abbreviated /descendant-or-self::node()/ abbreviated as // self::node( ) context node abbreviated by. parent::node( ) context node s parent abbreviated by

28 Node-set Operators and Functions pipe ( ) slash ( /) double-slash ( // ) last( ) position( ) count(node-set) id(string) local-name (node-set) namespace-uri(node-set) name(node-set) sum(node-set) performs the union of two node-sets separates location steps abbreviation for /descendant-or-self::node()/ number of nodes in context node-set position number of current node in context node-set returns number of nodes in the node-set returns element whose ID attributed matches string (local) name of first node in node-set namespace URI of first node in node-set qualified name for first node in node-set converts each node in set to string value, then each string to a number and sums the numbers

29 String Functions string(arg) starts-with(s1,s2 ) contains(s1,s2) substring-before(s1,s2) substring-after(s1,s2) substring(s1,n1,n2) string-length(arg) normalize-space(s1) converts any type of argument to a string (node-sets are converted to string value of first node in set) true if string s1 starts with string s2 true if string s1 contains string s2 substring of s1 before first occurrence of s2 in s1 substring of s1 after first occurrence of s2 in s1 substring of s1 starting a position n1 and of length n length of string value of its argument removes extra whitespace from string s

30 XSLT Specifies set of templates to specify how parts of documents should be transformed Declarative rather than procedural transformation process searches for templates that match current context templates not "executed in order" as presented in XSLT file If more than one template matches, there are rules to control which should be applied generally the template with the more specific XPath expression as a selection condition is selected over those with more general expressions e.g. select one that specifies "the first forename of the author with surname Smith" over one that specifies "all forenames"

31 XSLT Stylesheet <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body> <h2></h2> <xsl:apply-templates select="//publication"/> </body> </html> </xsl:template> <xsl:template match="publication/title"/> <b><xsl:value-of select="."/></b> <xsl:template> <xsl:template match="publication"> <p> <xsl:apply-templates select="title"/> </p> </xsl:template> </xsl:stylesheet>

32 Basic XSLT Transformation Process Find a template rule that matches root node of source tree Instantiates contents of this template rule executes instructions in template body copies data nodes to result tree Apply template instructions for each child of current node, find matching template rule and instantiate it

33 XSLT templates <xsl:template match="/"> <xsl:apply-templates select="//publication"/> </xsl:template> template to process root element: instruction is to apply templates to publication child nodes <xsl:template match="publication"> <p> <xsl:apply-templates select="title"/> </p> </xsl:template> template to process publication nodes: instruction is to apply templates to title child nodes <xsl:template match="publication/title"/> <b><xsl:value-of select="."/></b> <xsl:template> template to process publication/title nodes: instruction is to output value of node content

35 Matching on Attribute Values <xsl:template match="/"> <xsl:apply-templates </xsl:template> select publication nodes with type attribute not 'misc'

37 Adding more Information <xsl:template match="publication"> <p> <xsl:apply-templates select="author" /> <xsl:apply-templates select="title" />, <xsl:apply-templates select="month" /> <xsl:text> </xsl:text> <xsl:apply-templates select="year" />. <xsl:apply-templates select="url" /> </p> </xsl:template> add templates for author, month, year and url

39 Tidying up Authors <xsl:template match="publication/author"> <xsl:value-of select="substring(forename,1,1)" /> <xsl:text>. </xsl:text> <xsl:value-of select="surname" /> <xsl:choose> <xsl:when test="count(following-sibling::author)> 1"> <xsl:text>, </xsl:text> </xsl:when> <xsl:when test="count(following-sibling::author)= 1"> <xsl:text> and </xsl:text> </xsl:when> <xsl:otherwise> <xsl:text>: </xsl:text> </xsl:otherwise> </xsl:choose> </xsl:template> output first letter of forename followed by '.' output surname followed by a ',' if more than 1 sibling author to follow, an 'and' if exactly one sibling author follows and a ': ' if it is last author node of that publication

41 Sorting <xsl:template match="/"> <html> <head><title>list of Publications</title></head> <body> <xsl:apply-templates <xsl:sort select="year" order="descending"/> <xsl:sort select="month"/> </xsl:apply-templates> </body> </html> </xsl:template> now show generation of HTML head and body statements in root template add sort statements to order result tree according to year and month of publication nodes (descending year and ascending month)

43 Generating URL Link <xsl:template match="publication/url"> <a> <xsl:attribute name="href"> <xsl:value-of select="." /> </xsl:attribute> link </a> </xsl:template> url template changed to generate an HTML anchor tag First generate an anchor element (<a>) and then specify an attribute value for the element based on the url content

45 Formatting the Month <xsl:template name="format-month"> <xsl:param name="month-no" /> <xsl:variable name="months select="'janfebmaraprmayjunjulaugsepoctnovdec'" /> <xsl:value-of select="substring($months,($month-no - 1)*3+1,3)" /> </xsl:template> <xsl:template match="publication/month"> <xsl:call-template name="format-month"> <xsl:with-param name="month-no" select="." /> </xsl:call-template> </xsl:template> explicit call of named template to perform function of formatting the month expressed as an integer to a 3 letter string

47 Next Lecture Client-Side Technologies

XSLT: How Do We Use It?

XSLT: How Do We Use It? Nancy Hallberg Nikki Massaro Kauffman 1 XSLT: Agenda Introduction & Terminology XSLT Walkthrough Client-Side XSLT/XHTML Server-Side XSLT/XHTML More Creative Server-Side XSLT 2 XSLT: