Page Template Creation and Customization Brian Laird, Implementation Manager OmniUpdate
Agenda • Background: – OU Campus as a System – What is a template? • Page ‘Tagging’ for Editable Regions • New Page Forms
Agenda • Background: The Move to XML/XSL • What is a Publish Control File? • Advanced New Page/Section Forms • Best Practices
Background OU Campus as a System What is a Template?
OU Campus as a System • Basic Setup: two separate servers (Decoupled) – Staging (OU Campus) – Production (Web Server) • OU Campus “Publishes” files to the web server using an (S)FTP connection. • Published files are ‘stand - alone’ and do not require OU Campus to render.
What is a Template? New Page Templates Design Templates XSL Templates HTML Layouts PCF + XSL Form Components: One Column Interior Page Image (GIF/PNG) • • • Two Column • One Column TCF – Form for creating a Landing Two Column new page/section • • Homepage Etc… TMPL – File template • • Etc… used for page creation •
Page Tagging Editable Regions in OU Campus
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
Region Dividers • 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
Editors • 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’ – wysiwyg- class = adds a CSS class inside ‘classic’ editor for styling purposes – 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
Side Topic: ‘Styles Dropdown’ • 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 • For more information, see: Building Directories and Templates with MultiEdit – by Bradley Prasuhn – Today, 3:00 - 4:30pm (Emerald Room)
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
New Page Forms Creating New Pages in OU Campus
Template Structure .TMPL .TCF .TMPL .TMPL
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
Terminology – 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”
Hands-On: Creating New HTML Pages
Background The Move to XML / XSL
Advantages of XML / XSL • Separates ‘Content’ from ‘Design’ • XSL logic (scripting) can replace most Server Side coding • Allows for adjustable layouts and optional features
Advantages of XML / XSL • Required for LDP Galleries, LDP Forms, and PDF output • Can be used to create multiple output ‘products’ for each page
XML e X tensible M arkup L anguage – In OU Campus PCF and XSL = XML Syntax – Adheres to strict structure – Contains custom elements
XML Main requirements – Requires a root element – All tags must properly close – Tags and attributes are case sensitive and must be properly quoted – Elements must be properly nested
XSL e X tensible S tylesheet L anguage – Transforms data into styled page – Must be formatted in XML structure – Will contain HTML structure, links to CSS, and client-side or server-side code
XSL – Utilizes XPath syntax; ‘directions’ to content in PCF, and utility functions (like ‘string - length’) – Are not published – changes are immediately available on staging • Back up files before editing!
What is a Publish Control File? Converting to XML/XSL
PCF
Terminology PCF = Publish Control File – An XML file, specialized for OU Campus – Arbitrary extension name for pages in Staging Server – Contains PCF stylesheet declaration(s) (XSL declaration)
Terminology – Contains parameters for Page Properties and metadata – Contains tagging for: • Editable regions • Custom CSS/instructions for WYSIWYG Editor • MultiEdit tagging
PCF Transformation Process .PCF XSL CONTENT STRUCTURE (HTML, PHP, ASP...)
Prolog XML declaration – What version – Encoding PCF-stylesheet declaration – What XSL is transforming data – What extension should be appended <?xml version="1.0" encoding="UTF-8"?> <?pcf-stylesheet path="/_resources/xsl/interior.xsl" extension="html" title="Web" ?>
Doctype Definition • Called DTD • Defines the root element • Provides the entities and markup <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
Additional Parameters • Example: <parameter name="heading" type="text" prompt="Page Heading">Admissions</parameter> • Must be placed inside “ ouc:properties ” tags • Form-based data entry, typically used for layout settings – Types: Text, Filechooser, Select, Radio, Checkboxes, DateTime Picker
Additional Parameters • Availability of properties can be restricted by group • Important Attributes: – “name” - must be unique – “prompt” - is the ‘label’ – “alt” - is the help-text description – “type” - (self- explanatory) defaults to ‘text’ – “group” - defines group access to see field in ‘properties’ (defaults to ‘None’)
Hands-On: Building a PCF Page
New Page & Section Forms Templates
Template Structure XSL New Page Components XSL .PCF .TCF .TMPL XSL .TMPL .XML .XML .INC .TMPL .INC
Template Inheritance Skin: In OMNI-INF Shared across all accounts and sites Account: In OMNI-INF Shared across all sites Site: In OMNI-INF or Directory in Pages view
Hands-On: Creating New PCF Pages, Creating New Sections
Best Practices and Reminders • Repurpose content when possible • Share templates across sites when possible • Use Template Groups to limit where certain files can be created, and to help reduce template ‘clutter’ • Follow clear naming conventions and use hyphens
Recommend
More recommend
