Embed Size (px)
Citation preview
1
Presentation
Separating Content and Presentation Cascading Style Sheets (CSS) XML and XSLT
08.03.2012 2
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
WordPress Projects – Theme Generators
08.03.2012 3
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
HTML and Presentation
08.03.2012 4
Style Sheet defines a set of rules that specify to a browser how an HTML document should be rendered
Each rule consists of
selector - specifies to which HTML tag it applies
style declaration - 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 }
Cascading Style Sheets (CSS)
2
08.03.2012 5
Can be included in HTML document
Cascading Style Sheets (CSS) ...
<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>08.03.2012 6
Or stored in separate file and referenced from several HTML documents to provide uniform look and feel
Cascading Style Sheets (CSS) ......
<html><head>
<title>Michael</title><link rel=StyleSheet href="michaelStyle.css" type="text/css" \>
</head><body>
<p>M. Nebeling
</p></body>
</html>
See www.w3schools.com/css for tutorial on CSS
08.03.2012 7
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.
HTML5 and CSS3
08.03.2012 8
Specification split into modules.
Important modules
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
CSS3
3
08.03.2012 9
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>
Example
08.03.2012 10
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?
To Come ….
08.03.2012 11
Our aim is also to be able to support different document structures and formats to support different devices
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
Multi-Channel Access
DesktopBrowsers(HTML)
DigitallyAugmentedPaper
Voice Phones(Voice XML)
Phones
Tablets
08.03.2012 12
From Content to Presentation
decide what to publish
<person><forename>
Michael</forename><surname>
Nebeling</surname>
</person>
decide how to publish
<html><p>
M.Nebeling</p>
<html>
decide onstyle
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)
4
08.03.2012 13
Standardised text format for (semi-)structured information
Data surrounded by text markup that describes the data
Enables data to become self-describing
What is XML?
<note><to> John Smith</to><from> Mary Jones </from><content>
Project SuperXML is to go ahead starting 1 July 2003. Contact Fred.
</content></note>
08.03.2012 14
<?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>
Example XML Document
08.03.2012 15
DOM for publicationsDocument
Elementpublications
Elementpublication
Attribute type
Elementtitle
Elementauthor
Textreport
TextOMS Tutorial
Elementaddress
Elementsurname
Elementforename
TextSigner
TextBeat
08.03.2012 16
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)
XML Transformations
5
08.03.2012 17
Applies an XSLT stylesheet to an XML document and produces a result document
XSLT Processor
DTD
DOMParser
XSLTProcessorXML Document HTML, WML, ...
Source Tree Result Tree
Stylesheet Tree
DTD/XML Schema
XSLT Stylesheet
08.03.2012 18
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
XSLT
08.03.2012 19
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)
XPath
08.03.2012 20
doc("publns.xml")/publications/publication
/publications/publication[@type='article']/title
[...] selection predicate on nodes
@ 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
XPath examples
6
08.03.2012 21
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 //
Evaluation of XPath Expressions
08.03.2012 22
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
Evaluation of XPath Expressions ...
08.03.2012 23
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!
Location Paths
08.03.2012 24
self context node itselfparent context node’s parent, if it existschild context node’s children, if they existancestor context node’s ancestors, if they existancestor-or-self context node’s ancestors and also itselfdescendant context node’s descendantsdescendant-or-self context node’s descendants and also itselffollowing nodes in XML document following context node, not
including descendantsfollowing-sibling sibling nodes following the context nodepreceding nodes in XML document preceding the context node, not
including ancestorspreceding-sibling sibling nodes preceding the context nodeattribute attribute nodes of the context nodenamespace namespace nodes of the context node
Axis Names
7
08.03.2012 25
What forms of expression can occur on right-hand side of / ? name test
selects element or attribute nodes based on name
e.g. /publication /@type
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
Forms of RHS Expressions
08.03.2012 26
* selects all element nodes
@ * selects all attribute nodes
node( ) selects all nodes regardless of their type
text( ) selects all text nodes
comment( ) selects all comment nodes
processing-instruction( ) selects all processing-instruction nodes
node name selects all nodes with a specified node name
Node Tests
08.03.2012 27
child:: this location path used by default if no axis is supplied and may therefore be omitted
attribute:: the attribute axis may be abbreviated as @
/descendant-or-self::node()/ abbreviated as //
self::node( ) context node abbreviated by .
parent::node( ) context node’s parent abbreviated by ..
Location Path Abbreviations
08.03.2012 28
pipe (|) performs the union of two node-sets
slash ( /) separates location steps
double-slash ( // ) abbreviation for /descendant-or-self::node()/
last( ) number of nodes in context node-set
position( ) position number of current node in context node-set
count(node-set) returns number of nodes in the node-set
id(string) returns element whose ID attributed matches string
local-name (node-set) (local) name of first node in node-set
namespace-uri(node-set) namespace URI of first node in node-set
name(node-set) qualified name for first node in node-set
sum(node-set) converts each node in set to string value, then each string to a number and sums the numbers.
Node-set Operators and Functions
8
08.03.2012 29
string(arg) converts any type of argument to a string (node-sets are converted to string value of first node in set)
starts-with(s1,s2 ) true if string s1 starts with string s2
contains(s1,s2) true if string s1 contains string s2
substring-before(s1,s2) substring of s1 before first occurrence of s2 in s1
substring-after(s1,s2) substring of s1 after first occurrence of s2 in s1
substring(s1,n1,n2) substring of s1 starting a position n1 and of length n
string-length(arg) length of string value of its argument
normalize-space(s1) removes extra whitespace from string s1
String Functions
08.03.2012 30
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"
XSLT
08.03.2012 31
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<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>
XSLT Stylesheet
08.03.2012 32
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
Basic XSLT Transformation Process
9
08.03.2012 33
XSLT templates
template to process root element: instruction is to apply templates to publication child nodes
template to process publication nodes: instruction is to apply templates to title child nodes
<xsl:template match="/"><xsl:apply‐templates select="//publication"/>
</xsl:template>
<xsl:template match="publication"><p>
<xsl:apply‐templates select="title"/></p>
</xsl:template>
<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
08.03.2012 34
08.03.2012 3535
select publication nodes with type attribute not 'misc'
Matching on Attribute Values
<xsl:template match="/"><xsl:apply-templates
select="//publication[@type!='misc']"/>
</xsl:template>
08.03.2012 36
10
08.03.2012 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
08.03.2012 38
08.03.2012 3939
Tidying up Authors
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
<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>
08.03.2012 40
11
08.03.2012 41
Sorting
<xsl:template match="/"><html>
<head><title>List of Publications</title></head><body>
<xsl:apply-templates select="//publication[@type!='misc']">
<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)
08.03.2012 42
08.03.2012 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
08.03.2012 44
12
08.03.2012 45
<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>
Formatting the Month
explicit call of named template to perform function of formatting the month expressed as an integer to a 3 letter string
08.03.2012 46
Next Lecture
Client-Side Technologies
![[MS-XSLT]: Microsoft XSLTransformations (XSLT) Standards ...interoperability.blob.core.windows.net/web/MS-XSLT/[MS-XSLT].pdf · 3.0 and 6.0 for XSL Transformations (XSLT), Version](https://img.pdfslide.us/doc/110x75/6031c27e6c06226c876b55a7/ms-xslt-microsoft-xsltransformations-xslt-standards-ms-xsltpdf-30.jpg)
