Creating New Page and Section Templates

Robert KiffeSenior Web Developer,

OmniUpdate, Inc.

Agenda

Part 1•Background: •OU Campus as a System•Too Many Templates!

•Page ‘Tagging’ for Editable Regions•Hands-On: ‘Tagging’ an HTML Page

•New Page Forms•Hands-On: Creating New HTML Pages

Agenda

Part 2•Background: The Move to XML/XSL•What is a Publish Control File?•Hands-On: Building a PCF

•Advanced New Page/Section Forms•Hands-On: Creating New PCF Pages•Hands-On: Creating New Sections

•Best Practices

BACKGROUNDOU Campus as a System + Too Many Templates!

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.

Too Many Templates!XSL Templates New Page

TemplatesForm 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 TemplatesHTML Layouts• One Column• Two Column• Landing• Homepage• Etc…

PAGE TAGGINGEditable 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 (now Parameters)

• 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="007">…</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’ 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 (Just Released!)

• 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

• 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 Faculty Directories, Profiles, and More with MultiEdit• by Robert Kiffe & Bradley Prasuhn• Thursday, 8-10 AM (Pacific 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 FORMSCreating New Pages in OU Campus

Template Structure

STAGING

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

BACKGROUNDThe 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•Required for LDP Galleries, LDP Forms, and PDF output•Can be used to create multiple output ‘products’ for each page

XMLeXtensible Markup Language• In OU Campus PCF and XSL = XML Syntax• Adheres to strict structure • Contains custom element

Main requirements• Entities and markup are to be defined properly• 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

or server-side code• 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)• Contains parameters for Page Properties and metadata• Contains tagging for:

• Editable regions• Custom CSS/instructions for WYSIWYG Editor• MultiEdit tagging

PCF Transformation ProcessPRODUCTION

STAGING (OU Campus)

WEB PAGE

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

PrologueXML 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/default.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 (Properties)

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

Advanced

New PageComponents

Template StructurePRODUCTION

STAGING

Template InheritanceSkin: In OMNI-INFShared across all accounts and 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•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/index.html

Q&A

Thank You!

Don’t forget to take our survey

outc15.com/surveys