MAKING XSL-PCF PAGES FROM SCRATCH BRIAN LAIRD | OMNIUPDATE
Agenda OU Campus Overview Page Tagging Hands-On Building a Page Using XSL
OU CAMPUS OVERVIEW
OU Campus Overview Basic Setup: two separate servers (Decoupled) Staging (OU Campus) Production (Web Server) Publishes out ‘static’ website Production website operates independent of OU Campus STAGING SERVER PRODUCTION SERVER OU CAMPUS (CMS) LIVE WEBSITE .edu WEB VISITORS PUBLISH CMS USERS
Static Website? Pages can still utilize server-side scripts for “dynamic” content Folder/File structure Each folder-name represents a part of the URL Ending the URL on the folder will load the ‘default’ or ‘index’ page for that folder
Static Website Architecture Example Architecture (www.abc.edu) /admissions /transfer-students index.html Website URL: www.abc.edu/admissions/transfer-students/index.html or www.abc.edu/admissions/transfer-students/
Dynamic Content? Apache/IIS Includes <!--#include virtual="/footer.inc" --> Server-Side Code PHP C# (ASP.NET) ColdFusion Etc. Global Header Section Nav Page Content Global Footer
Unique Page Content Metadata Visible Regions Title Meta content Textual Content Images/Galleries/Media News/Events Listings Content Widgets Etc. <html> <head> <title>Page Title</title> <meta name="Description" content="Sample" /> </head> <body> <h1>Heading</h1> <p>Content</p> <img src="kitten.jpg" alt="Kitten" /> </body> </html>
PAGE TAGGING
Page Tagging Overview Defines editable elements on a page Specialized Comment Tags or XML Nodes Original comment format: <!-- com.omniupdate.div --> Newer comment format: <!-- ouc:div --> Standard node format: <ouc:div> Unique to OU Campus Tags are utilized in “Preview” and especially “Edit” page states
Properties Ex. <ouc:properties>…</ouc:properties> Defines editable elements outside traditional content areas Examples: Title (<title>Page Title</title>) Metadata Page Layout Options (PCF only) Form-like Data Entry (PCF only) Availability of properties can be restricted by group Extends the same page to be used for different uses
Region Dividers Ex. <ouc:div label="content" group="Admins" button-text=“Content">…</ouc:div> Must close at the end of the region Multiple editable regions can be associated with a page, but “label” attribute must be unique Must include the following attributes: Label Group ‘Button-text’ identifier or ‘Path’ for include files Use “Path” attribute to define the path to a local file in ‘staging’, to simulate a server-side include
Editors Source Code Editor Example: <ouc:div …><ouc:editor wysiwyg="no" /> Code … </ouc:div> Must self-close (if node) Must be placed at the start of an editable region Two Types of WYSIWYG Editors (choice is set by administrators): Classic JustEdit Important Attributes: wysiwyg = yes (default) | no (Source Editor) | asset (Asset Chooser) css-path = link to local CSS file to style editor contents css-menu = link to local text file to populate ‘styles dropdown’ Additional attributes used depending on editor type
Side Topic: Styles Dropdown Text file that is used for adding ‘classes’ to HTML objects in the WYSIWYG “block” setting will apply the class to the parent ‘block-level’ tag (ex. Paragraph, Divider (div), Image, etc.) Non-”block” (leaving blank) will default the class to being “in-line”, which means the WYSIWYG will wrap highlighted content in a SPAN with selected class Format: .class[TAB]Friendly Name[TAB]block(optional) Examples: .blue Blue Title block .highlight Text Highlight Example Output (‘Highlighted’ was selected): <h1 class="blue">Blue Title<span class="highlight">Highlighted</span></h1>
MultiEdit Regions Text Field Example: <ouc:div label="department" group="Everyone" button="hide"> <ouc:multiedit type="text" prompt="Department" alt="Type in the department name." />Mathematics</ouc:div> Allows for form-like content entry Content conforms to a specific structure Can’t be used with <ouc:editor> in the same <ouc:div> node
Additional Tags Direct Edit Button: <!-- ouc:ob --><-- /ouc:ob --> Full-page Source Editor Button: <!-- ouc:efp --><-- /ouc:efp --> DateTime Stamp: <!-- ouc:date --><-- /ouc:date -->
Hands-On TAGGING AN HTML PAGE
BUILDING A PAGE USING XSL
XML + XSL = HTML XML Page Content XSL Separates content from design Adjustable layouts and optional features Transforms simplistic content into more complex content Creates multiple output products for each page, including PDFs Works with most server-side scripting languages XSL Global Header Section Nav XML Page Content Global Footer
XSL Architecture XML Page Content XSL Global Header Global Footer XSL Architecture Section Nav XML Page Content XML Page Content PCF links directly to template-specific XSL file common.xsl builds basic page structure Use “Import Priority” to override common content with template- specific content No logic checks required for template type Allows for rapid construction of new “one-off” templates variables.xsl interior.xsl common.xsl functions.xsl landing.xsl
One Template to Rule Them All? Group ‘template layouts’ based on their use-cases Don’t overwhelm content editors with too many settings that don’t apply Page Parameters shows all fields MultiEdit shows all fields Shared regions can be built in common.xsl for re-use interior-landing.xsl - or - interior.xsl landing.xsl AND
CREATING AN XSL-PCF PAGE Hands-On CREATING AN XSL-PCF PAGE
THANK YOU! PLEASE SHARE YOUR FEEDBACK: WWW.SLIDO.COM #OUTC19