1 / 23

MAKING XSL-PCF PAGES FROM SCRATCH

Learn how to build XSL-PCF pages from scratch using OU Campus. This hands-on session will cover page tagging, basic setup, static website architecture, dynamic content, and more.

pboyle
Download Presentation

MAKING XSL-PCF PAGES FROM SCRATCH

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MAKING XSL-PCF PAGES FROM SCRATCH BRIAN LAIRD |OMNIUPDATE

  2. Agenda • OU Campus Overview • Page Tagging • Hands-On • Building a Page Using XSL • Hands-On

  3. OU CAMPUS OVERVIEW

  4. OU Campus Overview • Basic Setup: two separate servers (Decoupled) • Staging (OU Campus) • Production (Web Server) • Publishes out ‘static’ website • Production website operates independent of OU Campus .edu STAGING SERVER PRODUCTION SERVER CMS USERS LIVE WEBSITE PUBLISH OU CAMPUS (CMS) WEB VISITORS

  5. Static Website? • Pages can still utilize server-side scripts for “dynamic” content • Folder/File structure • Each folder-name represents a part of the URL • Ending the URL on the folder will load the ‘default’ or ‘index’ page for that folder

  6. Static Website Architecture • Example Architecture (www.abc.edu) • /admissions • /transfer-students • index.html • Website URL: • www.abc.edu/admissions/transfer-students/index.html • or • www.abc.edu/admissions/transfer-students/

  7. Dynamic Content? Global Header SectionNav Page Content • Apache/IIS Includes<!--#include virtual="/footer.inc" --> • Server-Side Code • PHP • C# (ASP.NET) • ColdFusion • Etc. Global Footer

  8. Unique Page Content <html> <head><title>Page Title</title><meta name="Description" content="Sample" /></head> <body><h1>Heading</h1><p>Content</p> <imgsrc="kitten.jpg" alt="Kitten" /></body> </html> • Metadata • Title • Meta content • Visible Regions • Textual Content • Images/Galleries/Media • News/Events Listings • Content Widgets • Etc.

  9. PAGE TAGGING

  10. Page Tagging Overview • Defines editable elements on a page • Specialized Comment Tags or XML Nodes • Original comment format: <!-- com.omniupdate.div --> • Newer comment format: <!-- ouc:div --> • Standard node format: <ouc:div> • Unique to OU Campus • Tags are utilized in “Preview” and especially “Edit” page states

  11. Properties • Ex. <ouc:properties>…</ouc:properties> • Defines editable elements outside traditional content areas • Examples: • Title (<title>Page Title</title>) • Metadata • Page Layout Options (PCF only) • Form-like Data Entry (PCF only) • Availability of properties can be restricted by group • Extends the same page to be used for different uses

  12. Region Dividers • Ex. <ouc:div label="content" group="Admins" button-text=“Content">…</ouc:div> • Must close at the end of the region • Multiple editable regions can be associated with a page, but “label” attribute must be unique • Must include the following attributes: • Label • Group • ‘Button-text’ identifier or ‘Path’ for include files • Use “Path” attribute to define the path to a local file in ‘staging’, to simulate a server-side include

  13. Editors • Source Code Editor Example:<ouc:div …><ouc:editorwysiwyg="no" />Code …</ouc:div> • Must self-close (if node) • Must be placed at the start of an editable region • Two Types of WYSIWYG Editors (choice is set by administrators): • Classic • JustEdit • Important Attributes: • wysiwyg = yes (default) | no (Source Editor) | asset (Asset Chooser) • css-path = link to local CSS file to style editor contents • css-menu = link to local text file to populate ‘styles dropdown’ • Additional attributes used depending on editor type

  14. Side Topic: Styles Dropdown • Text file that is used for adding ‘classes’ to HTML objects in the WYSIWYG • “block” setting will apply the class to the parent ‘block-level’ tag (ex. Paragraph, Divider (div), Image, etc.) • Non-”block” (leaving blank) will default the class to being “in-line”, which means the WYSIWYG will wrap highlighted content in a SPAN with selected class • Format:.class[TAB]Friendly Name[TAB]block(optional) • Examples:.blue Blue Title block.highlight Text Highlight • Example Output (‘Highlighted’ was selected):<h1 class="blue">Blue Title<span class="highlight">Highlighted</span></h1>

  15. MultiEdit Regions • Text Field Example:<ouc:div label="department" group="Everyone" button="hide"> <ouc:multiedit type="text" prompt="Department" alt="Type in the department name." />Mathematics</ouc:div> • Allows for form-like content entry • Content conforms to a specific structure • Can’t be used with <ouc:editor> in the same <ouc:div> node

  16. Additional Tags • Direct Edit Button: <!-- ouc:ob --><-- /ouc:ob --> • Full-page Source Editor Button:<!-- ouc:efp --><-- /ouc:efp --> • DateTime Stamp: <!-- ouc:date --><-- /ouc:date -->

  17. Hands-On • TAGGING AN HTML PAGE

  18. BUILDING A PAGE USING XSL

  19. XML + XSL = HTML XSL Global Header • Separates content from design • Adjustable layouts and optional features • Transforms simplistic content into more complex content • Creates multiple output products for each page, including PDFs • Works with most server-side scripting languages SectionNav XMLPage Content Global Footer

  20. SectionNav XMLPage Content XSL Architecture XSL Global Header • PCF links directly to template-specific XSL file • common.xsl builds basic page structure • Use “Import Priority” to override common content with template-specific content • No logic checks required for template type • Allows for rapid construction of new “one-off” templates XMLPage Content XMLPage Content XMLPage Content variables.xsl interior.xsl common.xsl functions.xsl landing.xsl Global Footer

  21. One Template to Rule Them All? • AND interior-landing.xsl • Group ‘template layouts’ based on their use-cases • Don’t overwhelm content editors with too many settings that don’t apply • Page Parameters shows all fields • MultiEdit shows all fields • Shared regions can be built in common.xsl for re-use - or - interior.xsl landing.xsl

  22. Hands-On • CREATING AN XSL-PCF PAGE

  23. THANK YOU! PLEASE SHARE YOUR FEEDBACK: WWW.SLIDO.COM#OUTC19

More Related