Understanding Page Template Components Lila Bronson Training Manager, OmniUpdate, Inc.

Agenda Implementation Process Terminology used in Template Development Hands-on Part 1: HTML Page to PCF Hands-on Part 2: Creating New Page Template Files: TMPL, TCF, GIF Icon Q&A On Your Own Study: Programming with XML

The Implementation Process HTML DesignSetup XSL’s Create Initial PCF(s) Initial PCF to TMPL(s) TCF: New Page/Section Form GIF Image for Template Icons Working Templates in OU Campus

Source Code Editor

Resources Folder

Template Terminology Template Stylesheets Template Files XSLsFiles in OU Campus for page/section templates 3 components: Image – Matches Template Control File’s name TCF – Form for creating a new page/section TMPL – Template used for page/file creation

XSL Programming Language XSL eXtensible Stylesheet Language Transforms XML data into styled page Must be formatted in XML structure Will contain HTML structure, links to CSS, and client-side or server-side code Will contain XPaths; path to content in PCF Are not published – changes are immediately available on staging Back up files before editing!

XML Programming Language 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

XML Document

Creating New Templates Step 1 – Set up Initial XSL(s) to control the “Look and Feel” of the Website Step 2 – Turn HTML Pages into an Initial XML file called a “PCF” in OU Campus

PCF

PCF Transformation Process (HTML, PHP, ASP...) CONTENTSTRUCTURE

PCF = Publish Control File Result of completion of new page/section form (TCF) Extension for pages on 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

Editable Regions Identified with an tag Must close at the end of the region Multiple editable regions can be associated with a page Must include: Label Group Button identifier (button, or button-class and button-text)

Properties Defines editable elements outside traditional content Examples: Title Metadata Page layout Hide or display editable regions Availability of properties can be restricted by group Utilized by the XSL to transform a page into different layouts Extends the same page to be used for different uses

Creating New Templates Step 4 – Use the initial PCF as a model to build the templates for new pages and sections Step 5 – Create a new page form, called a TCF, that users will fill out when adding files Step 6 - Upload a thumbnail icon for the TCF

New Page and Section Files

Terminology TMPL = Template Used to create PCF file May create additional files Contains echo variable statements from TCF For PCF files: Contains PCF stylesheet declaration(s) Contains parameters for Page Properties and metadata Contains tagging for: – Editable regions – Custom CSS/instructions for WYSIWYG Editor – MultiEdit tagging

Template Control File (TCF)

Terminology TCF = Template Control File Can contain 4 lists: Variable List Directory List Template List Navigation List May use multiple TMPLs May be used to pass RSS variables May utilize auto navigation

Q&A

On Your Own Study

Programming with XML Extensible Markup Language in OU Campus

Tag Defined based on needs Used in both HTML and XML programming languages Defines the structure of an XML document Can self-close or have a closing tag May contain attributes This is awesome!

Attributes Describe tags Differentiate between the same tags Values must be properly quoted Must use proper cases class="quote" src="/images/student.jpg"

Element All of it put together! May contain child elements This is awesome! This is awesome!

Prolog XML declaration What version Encoding PCF-stylesheet declaration (Used only in OU Campus software) What XSL is transforming data What extension should be appended

Doctype Definition Called DTD Defines the root element Provides the entities and markup DTD can call an external URL or include markups internal to the tag

XML Namespaces Namespaces are prefixes used to identify tags and elements The namespace is defined by the xmlns attribute in the start tag of an element The namespace declaration has the following syntax: xmlns:prefix="URI” URI stands for Uniform Resource Identifier and it helps locate the namespaces being used EXAMPLE :ouc is the namespace used in the PCF for the tag

XML Tree - PCF Document

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