creating new page and section templates robert kiffe senior web developer, omniupdate, inc
TRANSCRIPT
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