Understanding Page Template Components. Brandon Scheirman Instructional Designer, OmniUpdate

Size: px

Start display at page:

Download "Understanding Page Template Components. Brandon Scheirman Instructional Designer, OmniUpdate"

Tabitha Fox
6 years ago
Views:

1 Understanding Page Template Components Brandon Scheirman Instructional Designer, OmniUpdate

2 Where do PCFs come from??.pcf

3 .PCF

4 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

5 Source Code Editor (Default theme too bright? Hard to read? Try Blackboard! )

6 Resources Folder Where the magic happens

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

8 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

9 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!

10 PCF Transformation Process.PCF.XSL CONTENT STRUCTURE (HTML, PHP, ASPX...)

11 Where do PCFs come from??.pcf

12 New Page and Section Files.TCF.TMPL.XSL.PCF.TMPL.XSL.PCF

13 It s Magic!.PCF (Not really. It s XML, XSL, and OU Campus. But close enough!)

14 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

15 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)

16 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

17 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.

18 XML Document Prolog <?xml version="1.0" encoding="utf-8"?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="web"?> <!DOCTYPE document SYSTEM " Root Node Parameters Content <document> <config> <parameter> </parameter> <meta /> </config> <content> <p> <img /> </p> <p> </p> </content> </document>

19 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

20 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

21 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)

editable regions Availability of properties can be restricted by group Utilized by the

22 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

23 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

24 Template Control File (TCF) AKA a New Page Wizard

25 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

26 Let s Practice!

27 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

28 Welcome Back! Time for Practice pt. 2

29 Q&A

30 Thank You! Don t forget to take our survey outc16.com/surveys

Creating New Templates

Creating New Templates OmniUpdate User Training Conference 2015 Activity Guide OmniUpdate, Inc. 1320 Flynn Road, Suite 100 Camarillo, CA 93012 OmniUpdate, Inc. 1320 Flynn Road, Suite 100 Camarillo, CA 93012 800.362605 80489428