Kids, Cats and Concepts: Toward a Grand Unified Theory of ...
In Pursuit of the Grand Unified Template
-
Upload
hannonhill -
Category
Software
-
view
77 -
download
0
description
Transcript of In Pursuit of the Grand Unified Template
![Page 1: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/1.jpg)
In Pursuit of the Grand Unified Templateor
Page Level Formats
Jason AllerUC Davis School of Law#csuc14, @JasonAller
![Page 2: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/2.jpg)
Who am I?
• Cascade Server Admin and Developer• This is my seventh Users Conference• I make things like:– The Cascade Entity Relationship Diagram– grunt-cascade-deploy on github– soap-cascade on github
![Page 3: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/3.jpg)
A thanks to the folks at Tarleton
As the manager of www.tarleton.edu, Web Services reserves the right to edit any Tarleton webpage at any time in order to make corrections and improvements to items such as misspellings, poor content structure, accessibility issues, copyright issues, security issues, and outdated information. Web Services may not contact the content owner in advance but will make an effort to communicate the changes and issues soon after they are made.
![Page 4: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/4.jpg)
Overview
I’m going to be using XSLT for my examples, though I did buy “Velocity: The Basics” by James Johnson• Changing Links• Conditional Restructuring - Bootstrap• Exposing additional data at the page level
![Page 5: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/5.jpg)
Conditional Restructuring
• Bootstrap – but can be used with many other CSS frameworks
• One design with multiple layouts• From a single template• Let the system do all the work automatically• Because automating the CMS is more effective
than training content contributors
![Page 6: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/6.jpg)
The page as XML source
![Page 7: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/7.jpg)
XSLT Default Templates
• Traverse Elements<xsl:template match="*|/">
<xsl:apply-templates/></xsl:template>
• Process content and attributes<xsl:template match="text()|@*">
<xsl:value-of select="."/></xsl:template>
• Remove comments and processing instructions<xsl:template match="processing-instruction()|comment()"/>
![Page 8: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/8.jpg)
Changing Links
• Find with XPath– <a…– <a href="http…– <a href="mailto:…
• Process the element (copy, modify, remove)• Unless removing, send that element’s content
to be processed – recurse
![Page 9: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/9.jpg)
Changing Links
• Add Google Tracking to outgoing links• Append a non-breaking space and an icon
after the link for links to PDF and PowerPoint files
![Page 10: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/10.jpg)
Link code<xsl:template match="node()[name() = 'a']"> <!-- begin copying the source node --> <xsl:copy> <!-- If we might want to track this with Google: --> <xsl:if test="starts-with(@href,'http')"> <xsl:choose> <!-- Check if there is already an onClick event and add ours --> <xsl:when test="@onClick"> <xsl:attribute name="onClick"> <xsl:value-of select="concat(@onClick,' ')"/> <xsl:call-template name="pageTracker"/> </xsl:attribute> </xsl:when> <!-- of if there wasn't an onClick event add one --> <xsl:otherwise> <xsl:attribute name="onClick"> <xsl:call-template name="pageTracker"/> </xsl:attribute> </xsl:otherwise> </xsl:choose> </xsl:if>
![Page 11: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/11.jpg)
Link code cont. <!-- process non-onClick attributes and child nodes --> <xsl:apply-templates select="@*[name() != 'onClick']|node()"/> <!-- figure out if we need to add docIcons --> <xsl:choose> <xsl:when test="child::node()[name() = 'img']"> <!-- Do nothing, because link is wrapped around graphic --> </xsl:when> <xsl:when test="substring(@href,string-length(@href)-3,4) = '.pdf'"> <xsl:text> </xsl:text> <span class="sprite pdf-n"></span> </xsl:when> <xsl:when test="substring(@href,string-length(@href)-3,4) = '.ppt' or substring(@href,string-length(@href)-4,5) = '.pptx'"> <xsl:text> </xsl:text> <span class="sprite ppt-n"></span> </xsl:when> <xsl:otherwise/> </xsl:choose> </xsl:copy></xsl:template>
![Page 12: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/12.jpg)
pageTracker<xsl:template name="pageTracker"> <xsl:text>javascript:pageTracker.</xsl:text> <xsl:text>_trackPageview('</xsl:text> <xsl:value-of select="$pagePath"/> <xsl:text>/outgoing/</xsl:text> <xsl:value-of select="translate(., $singleQuote, '')"/> <xsl:text>/</xsl:text> <xsl:value-of select="substring-after (@href,'http://')"/> <xsl:text>');</xsl:text></xsl:template>/current/portal/outgoing/Intranet/intranet.law.ucdavis.edu/index.aspx
![Page 13: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/13.jpg)
Conditional Restructuring
• Determine rules– Decide the logic once, then apply it
• Output alternative wrapper elements• Process content – recurse• It’s turtles all the way down
![Page 14: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/14.jpg)
![Page 15: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/15.jpg)
navmidbar(2)
2 8 2
navmidbar(3)
2 7 3
navmid
2 10
midbar(2)
10 2
midbar(3)
9 3
mid
12
home
4 5 3
Phone
![Page 16: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/16.jpg)
home
4 5 3
![Page 17: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/17.jpg)
navmidbar(3)
2 7 3
![Page 18: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/18.jpg)
navmid
2 10
![Page 19: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/19.jpg)
mid
12
![Page 20: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/20.jpg)
midbar(2)
10 2
![Page 21: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/21.jpg)
Bootstrap
Bootstrap is based on 12 columns and wants<div class="col-sm-3">or<div class="col-sm-2">We want to have a single template to maintain that can allow three columns with the following options:• Left – either 2 or 0• Main – either 7, 8, 9, 10, or 12 – fills space• Right – either 0, 2, or 3
![Page 22: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/22.jpg)
One Template<div id="zeroth">
<div class="row"><div id="first">
<system-region name="SUBNAV"/><system-region name="QUICKLINKS"/>
</div><div id="second">
<system-region name="CONTENT-TITLE"/><system-region name="DEFAULT-PRE"/><system-region name="DEFAULT"/><system-region name="DEFAULT-POST"/>
</div><div id="third">
<system-region name="SIDEBAR-TOP"/><system-region name=“SIDEBAR"/>
<system-region name="SIDEBAR-BOTTOM"/></div>
</div></div>
![Page 23: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/23.jpg)
Pseudocode Tour
• Check for content in each area• Pick a layout based on this• For each area apply the rules of that layout– zeroth– first– second– third
![Page 24: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/24.jpg)
Checking for <div> Content
<xsl:variable name="con1"select="count(
//node()[name()='div'][@id='first']
/*[not(name() = 'img' andsubstring(@src,1,10) = '/css/icons')])"/>
![Page 25: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/25.jpg)
Layout Assignment Logic
<xsl:variable name="layout"> <xsl:choose> <xsl:when test="$pagePath = '/index'"> <xsl:text>home</xsl:text> </xsl:when> <xsl:when test="$con1 = 0 and not($con2 = 0) and $con3 = 0"> <xsl:text>mid</xsl:text> </xsl:when>
home
4 5 3
mid
12
![Page 26: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/26.jpg)
Layout cont.<xsl:when test="not($con1 = 0) and not($con2 = 0) and $con3 = 0"> <xsl:text>navmid</xsl:text></xsl:when><xsl:when test="not($con1 = 0) and not($con2 = 0) and not($con3 = 0)"> <xsl:text>navmidbar</xsl:text></xsl:when><xsl:when test="$con1 = 0 and not($con2 = 0) and not($con3 = 0)"> <xsl:text>midbar</xsl:text></xsl:when>
navmidbar(2)
2 8 2
navmid
2 10
midbar(2)
10 2
![Page 27: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/27.jpg)
Layout cont.
<xsl:otherwise> <xsl:text>default</xsl:text> </xsl:otherwise> </xsl:choose></xsl:variable>
![Page 28: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/28.jpg)
zeroth<xsl:template match="node()[name()='div'][@id='zeroth']"> <xsl:choose> <xsl:when test="$layout = 'home'"> <div class="container" id="content"> <xsl:apply-templates select="node()"/> </div> </xsl:when> <xsl:otherwise> <div class="container"> <xsl:apply-templates select="node()"/> </div> </xsl:otherwise> </xsl:choose></xsl:template>
![Page 29: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/29.jpg)
first
<xsl:template match="node() [name()='div'][@id='first']"> <xsl:choose> <xsl:when test="$layout = 'home'"> <div class="col-md-3 col-md-push-9"> <xsl:apply-templates /> </div> </xsl:when>
home
4 5 3
![Page 30: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/30.jpg)
first cont.<xsl:when test="$layout = 'navmid'
or $layout = 'navmidbar'"><div class="col-sm-2">
<xsl:if test="./div[@id = 'subNav'] or ./div[@id = 'relatedLinks'] or ./div[@class = 'left-column-full-width']">
<xsl:attribute name="class"><xsl:text>col-sm-2
left-column</xsl:text></xsl:attribute>
</xsl:if><xsl:apply-templates />
</div></xsl:when>
navmidbar(2)
2 8 2
![Page 31: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/31.jpg)
first cont.
<xsl:otherwise/> </xsl:choose></xsl:template>
midbar(2)
10 2
midbar(3)
9 3
mid
12
![Page 32: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/32.jpg)
second<xsl:template match="node()
[name()='div'][@id='second']"> <xsl:choose> <xsl:when test="$layout = 'home'"> <div class="col-md-4 col-md-pull-3"> <xsl:apply-templates select="node()"/> </div> </xsl:when> <xsl:when test="$layout = 'mid'"> <div class="col-sm-12" id="content"> <xsl:apply-templates select="node()"/> </div> </xsl:when>
mid
12
home
4 5 3
![Page 33: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/33.jpg)
second cont. <xsl:when test="$layout = 'navmid'"> <div class="col-sm-10" id="content"> <xsl:apply-templates select="node()"/> </div> </xsl:when> <xsl:when test="$layout = 'midbar'"> <div id="content"> <xsl:attribute name="class"> <xsl:choose> <xsl:when test="$sidebar = '3'"> <xsl:text>col-sm-9</xsl:text> </xsl:when> <xsl:otherwise> <xsl:text>col-sm-10</xsl:text> </xsl:otherwise> </xsl:choose> </xsl:attribute> <xsl:apply-templates select="node()"/> </div> </xsl:when>
navmid
2 10
midbar(2)
10 2
midbar(3)
9 3
![Page 34: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/34.jpg)
second cont. <xsl:otherwise> <div id="content"> <xsl:attribute name="class"> <xsl:choose> <xsl:when test="$sidebar = '3'"> <xsl:text>col-sm-7</xsl:text> </xsl:when> <xsl:otherwise> <xsl:text>col-sm-8</xsl:text> </xsl:otherwise> </xsl:choose> </xsl:attribute> <xsl:apply-templates /> </div> </xsl:otherwise> </xsl:choose></xsl:template>
navmidbar(2)
2 8 2
navmidbar(3)
2 7 3
![Page 35: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/35.jpg)
third
<xsl:template match="node()[name()='div'][@id='third']">
<xsl:choose> <xsl:when test="$layout = 'home'"> <div class="col-md-5 col-md-pull-3"> <xsl:apply-templates /> </div> </xsl:when>
home
4 5 3
![Page 36: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/36.jpg)
third cont.<xsl:when test="$layout = 'navmidbar' or $layout = 'midbar'"> <div id="right-column"> <xsl:attribute name="class"> <xsl:choose> <xsl:when test="$sidebar = '3'"> <xsl:text>col-sm-3</xsl:text> </xsl:when> <xsl:otherwise> <xsl:text>col-sm-2</xsl:text> </xsl:otherwise> </xsl:choose> </xsl:attribute> <xsl:apply-templates /> </div></xsl:when>
midbar(2)
10 2
midbar(3)
9 3
![Page 37: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/37.jpg)
third cont.
<xsl:otherwise/> </xsl:choose></xsl:template>
![Page 38: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/38.jpg)
Exposing metadata at the page level
• Expose at template level• Extract values to variables• Add rule to remove – swallow it with the
format
![Page 39: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/39.jpg)
Insert
• <system-region name="CASCADE-METADATA"/>
• Index block self-metadata• <xsl:template match="/">
<xsl:copy-of select="/"/></xsl:template>
![Page 40: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/40.jpg)
Extract
Pull the page path out:• <xsl:variable name="pagePath" select="//calling-page/system-page/path"/>
Pull page metadata:• <xsl:variable name="sidebar" select="//calling-page/system-page/dynamic-metadata[name = 'sidebar']/value"/>
Swallow the data to prevent publishing it:• <xsl:template match="node()[name() = 'system-index-block']"/>
![Page 41: In Pursuit of the Grand Unified Template](https://reader033.fdocuments.us/reader033/viewer/2022061223/54c2eda84a79594a428b4586/html5/thumbnails/41.jpg)
Future plans
• RFC3966 tel: URI• Not <blockquote> from <p> with “”– I’ll write my own replacement for TinyMCE before
I do that! With Cascade 8 I won’t have to!• Use [system-view:internal] and [system-
view:external] to highlight violations of the style guide
• Take a vacation