Presentation Transcript

1. Get Your Template On

   Creating New Page Templates
2. Agenda Page Templating and Its Components Process Understanding XML Structure Terminology Creating a PCF Creating a TMPL Creating a TCF Best Practices
3. Terminology Clarification of Templates & Template Stylesheets Files used as structure for page design Two main file types Page templates (PCFs, TCFs and TMPLs) XSLs 3 components for new page templates Image – Matches Template Control File’s name TCF – Form for creating a new page/section TMPL – Template used for page/file creation
4. Template Structure PRODUCTION STAGING
5. Getting Started Parse original HTML Set up XSL Place content nodes in PCF Configure with Page Properties and metadata Convert final PCF to TMPL Configure TCF Upload image Create new pages and sections!
6. Makes Sense?
7. XML XML PCF and XSL = XML files eXtensibleMarkup Language Adheres to strict structure but can contain custom elements 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
8. Tag Defined based on needs Defines the structure of an XML document Can self-close or have a closing tag May contain attributes <p>This is awesome!</p> <img />
9. Attributes Describe tags Differentiate between the same tags Values must be properly quoted Must use proper cases class="quote" src="/images/student.jpg"
10. Element All of it put together! May contain child elements <p class="quote">This is awesome!</p> <imgsrc="/images/student.jpg" /> <p class="quote"><imgsrc="/images/student.jpg" /> This is awesome!</p>
11. Prolog XML declaration What version Encoding PCF-stylesheet declaration What XSL is transforming data What extension should be appended <?xml version="1.0"encoding="UTF-8"?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web" ?>
12. Doctype Definition Called DTD Defines the root element Provides the entities and markup <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
13. XML Tree
14. XML Tree <document> <config> <parameter> </parameter> <meta /> </config> <content> <p> <img /> </p> <p> </p> </content> </document>
15. XML Document <?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"> <document> <config> <parameter> </parameter> <meta /> </config> <content> <p> <img /> </p> <p> </p> </content> </document>
16. Any Questions?
17. Template Structure PRODUCTION STAGING
18. Terminology PCF = Publish Control File Result of completion of new page/section form (TCF) Extension for pages on Staging Server Contains PCFstylesheet declaration(s) (XSL declaration) Contains parameters for Page Properties and metadata Contains tagging for: Editable regions Custom CSS/instructions for WYSIWYG Editor MultiEdittagging
19. Editable Regions Identified with an ouc:div 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)
20. Editor vs. MultiEdit Both contained within an ouc:div Both are self-closing Editor defines WYSIWYG Editor components and style May contain: CSS styling (csspath) CSS classes for the Styles drop-down (cssmenu) Toolbar for region Additional special identifiers (e.g., width, asset-only region) MultiEdit defines the type and configuration for each element of a MultiEdit form
21. 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
22. PCF
23. Terminology 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 Will contain XPaths; path to content in PCF Are not published – changes are immediately available on staging Back up files before editing!
24. Let’s Look!
25. Template Structure STAGING
26. 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
27. Template Control File (TCF)
28. Terminology TMPL = Template Used to create PCF file May create additional files Contains echo variable statements from TCF For PCF files: Contains PCFstylesheet declaration(s) Contains parameters for Page Properties and metadata Contains tagging for: Editable regions Custom CSS/instructions for WYSIWYG Editor MultiEdit tagging
29. Let’s Look!
30. Template Inheritance
31. Template Inheritance Templates are inherited down All templates will show in Setup > Templates Files closer to the content override templates above with same name All necessary files must be in same folder Edit files in OMNI-INF with FTP
32. Understanding Auto-Publish Publishes file on creation No need to publish includes separately Requires publishing rights to avoid error May create temporarily broken links If no publishing rights, may not create all necessary section files
33. Best Practices and Reminders Repurpose content when possible Share templates across sites when possible 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 Keep it short and simple
34. Q&A
35. Don’t forget to complete your survey! http://outc14.com/surveys
36. Thank you!