Understanding Page Template Components Brandon Scheirman Instructional Designer, OmniUpdate
Where do PCFs come from??.pcf
.PCF
Agenda Implementation Process Terminology used in Template Development Hands-on Part 1: PCF page to TMPL Hands-on Part 2: Making a TCF, finishing TMPL, uploading an image thumbnail Q&A
Source Code Editor (Default theme too bright? Hard to read? Try Blackboard! )
Resources Folder Where the magic happens
The Implementation Process HTML Design Published Web Site Working Templates in OU Campus Setup XSL s GIF Image for Template Icons Create Initial PCF(s) TCF: New Page/Section Form Initial PCF to TMPL(s)
Creating New Templates Step 1 Set up Initial XSL(s) to control the look and feel of the Website Step 1.5 Import scripts, CSS, etc. into OU Campus to be used by XSLs Step 2 Turn HTML pages into an initial XML file called a PCF in OU Campus
Creating New Templates Step 3 Use the initial PCF as a model to build the templates for new pages and sections Step 4 Create a new page form, called a TCF, that users will fill out when adding files Step 5 - Upload a thumbnail icon for the TCF We ll do steps 3-5 today!
PCF Transformation Process.PCF.XSL CONTENT STRUCTURE (HTML, PHP, ASPX...)
Where do PCFs come from??.pcf
New Page and Section Files.TCF.TMPL.XSL.PCF.TMPL.XSL.PCF
It s Magic!.PCF (Not really. It s XML, XSL, and OU Campus. But close enough!)
Let s Talk Terminology Template Stylesheets XSLs Applies styling to the pages and controls layout Converts the PCF into a normal webpage file (HTML, PHP, etc.) Template Files Files in OU Campus for page/section templates 3 components: TCF Form for creating a new page/section TMPL Template used for page/file creation Image Matches Template Control File s name
XML Programming Language The base language for everything else we ll talk about today XML extensible Markup Language - PCF, TMPL, TCF and XSL files in OU Campus use XML Syntax - Adheres to strict structure if it s not written exactly right, things break - XML elements not pre-defined (unlike HTML)
XML Programming Language The base language for everything else we ll talk about today 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 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 clientside 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 Document Prolog <?xml version="1.0" encoding="utf-8"?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="web"?> <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd"> Root Node Parameters Content <document> <config> <parameter> </parameter> <meta /> </config> <content> <p> <img /> </p> <p> </p> </content> </document>
PCF
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 OU Campus-specific tagging for: Editable regions Custom CSS/instructions for WYSIWYG Editor MultiEdit tagging
PCF Details - Editable Regions Identified with an <ouc:div> tag Must close at the end of the region Multiple editable regions can exist on one page Mandatory attributes of <ouc:div>: Unique Label Group Button identifier (button, or button-class and buttontext)
PCF Details - Properties Identified with an <ouc:properties> tag 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
TMPL Details TMPL = Template File Very similar structure to a PCF A TMPL is a Generic PCF 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) AKA a New Page Wizard
TCF Details TCF = Template Control File Users enter data, that data is sent to the TMPL(s) Can contain 4 lists: Variable List Directory List (optional) Template List Navigation List One TCF can be used to make multiple pages at once link more than one TMPL to a TCF = multiple pages created
Let s Practice!
First, log into your sandbox Log in at workshop[#].outc16.com Replace [#] with the number on your badge Sign in as the administrator! Username: admin Password: look on your badge Navigate to the /workshop-understanding-page-templates/ directory
Welcome Back! Time for Practice pt. 2
Q&A
Thank You! Don t forget to take our survey outc16.com/surveys