Creating New Page and Section Templates Robert Kiffe Senior 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

BACKGROUND OU 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 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: New ‘comment’ format: New ‘node’ format: Unique to OU Campus Tags are utilized in “Preview” and especially “Edit” page states

Properties (now Parameters) Ex. … Defines editable elements outside traditional content areas Examples: Title ( Page 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. … 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: Code … 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:.blueBlueTitleblock.highlightText Highlight Example Output (‘Highlighted’ was selected): Blue Title, Highlighted

MultiEdit Regions Text Field Example: Mathematics 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: Full-page Source Editor Button: DateTime Stamp:

Hands-On: Tagging an HTML Page

NEW PAGE FORMS Creating New Pages in OU Campus

Template Structure

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. 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 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 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 Process (HTML, PHP, ASP...) CONTENTSTRUCTURE

Prologue XML declaration What version Encoding PCF-stylesheet declaration What XSL is transforming data What extension should be appended

Doctype Definition Called DTD Defines the root element Provides the entities and markup

Additional Parameters (Properties) Example: Admissions 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 Page Components Template Structure

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

Q&A

Thank You! Don’t forget to take our survey outc15.com/surveys