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

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

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

4. Source Code Editor

5. Resources Folder

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

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

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

9. XML Document

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

11. PCF

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

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

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

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

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

17. New Page and Section Files

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

19. Template Control File (TCF)

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

21. Q&A

22. On Your Own Study

23. Programming with XML Extensible Markup Language in OU Campus

24. 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!

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

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

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

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

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

30. XML Tree - PCF Document

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