Customizing Editable Regions and Building Templates Robert Kiffe, Senior Customer Support Engineer Brian Laird, Web Developer Manager I
Agenda OU Campus Overview Page Tagging Building a Page Using XSL OU Campus Templates
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
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. Section Nav Page Content Global Header 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 --> New comment format: <!-- ouc:div --> New 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 Separates ‘Content’ from ‘Design’ Adjustable layouts and optional features ‘Transform’ simplistic content into more complex Create multiple output ‘products’ for each page, including PDF Works with most Server-Side Scripting Languages XSL Global Header Section Nav XML Page Content Global Footer
XSL Architecture 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 interior.xsl common.xsl variables.xsl functions.xsl Import Priority 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 Properties shows all fields MultiEdit shows all fields Shared regions can be built in common.xsl for re-use interior.xsl Or landing.xsl
Creating New Pages in OU Campus OU Campus Templates Creating New Pages in OU Campus
Template Components Template Image Template Control File Template File Visual display for the user Template Control File Template File
Template Control File (TCF)
Terminology TCF = Template Control File Can contain 4 lists: Variable List – Data Entry Directory List – Folder Creation Template List – File Creation Navigation List – Navigation Updates May use multiple TMPLs to create multiple files Multiple TCFs can reference a single TMPL May be used to pass Access Settings Can create RSS items Can only be edited in “Source Editor”
Terminology TMPL = Template File Used to create any file type Can use ‘echo’ variable statements to collect data entered in TCF Ex. <!--%echo var="title" --> Fill out with as much or little starting data (or content) as desired. Can only be edited in Source Editor
Creating New Pages in OU Campus Hands-On: Creating New Pages in OU Campus
Thank you. Robert Kiffe rkiffe@omniupdate.com Brian Laird blaird@omniupdate.com outc18.com/surveys