and Customization Brian Laird, Implementation Manager OmniUpdate - - PowerPoint PPT Presentation

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?

XSL Templates New Page Templates

Form Components:  Image (GIF/PNG)  TCF – Form for creating a new page/section  TMPL – File template used for page creation PCF + XSL

• Interior Page
• One Column
• Two Column
• Etc…

Design Templates

HTML Layouts

• One Column
• Two Column
• Landing
• Homepage
• Etc…

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

.TCF .TMPL .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

eXtensible Markup Language

– 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

eXtensible Stylesheet Language

– Transforms data into styled page – Must be formatted in XML structure – Will contain HTML structure, links to CSS, and client-side

• r 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

(HTML, PHP, ASP...) CONTENT STRUCTURE

.PCF XSL

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

New Page Components

.TCF

.TMPL .PCF .XML

XSL

.XML .TMPL .TMPL .INC .INC

XSL XSL

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

Best Practices and Reminders

• Create contextual TCF image icons
• Utilize the Styles drop-down
• Plan out access settings and binary management
• Encourage and use the WYSIWYG Editor – It

“repairs” HTML errors

• Always close tags/nodes
• For more in-depth information:

http://support.omniupdate.com/oucampus10/site- development/templating-framework

Q & A

Thank You!

Don’t forget to take our survey

• utc16.com/surveys