Presentation is loading. Please wait.

Presentation is loading. Please wait.

MAKING XSL-PCF PAGES FROM SCRATCH

Published byYandi Salim Modified over 5 years ago

Similar presentations

Presentation on theme: "MAKING XSL-PCF PAGES FROM SCRATCH"— 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

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 STAGING SERVER PRODUCTION SERVER OU CAMPUS (CMS) LIVE WEBSITE .edu WEB VISITORS PUBLISH CMS USERS

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 ( /admissions /transfer-students index.html Website URL: or

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

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

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:editor wysiwyg="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 XML Page Content XSL 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 XSL Global Header Section Nav XML Page Content Global Footer

20 XSL Architecture XML Page Content XSL
Global Header Global Footer XSL Architecture Section Nav XML Page Content XML Page Content 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 variables.xsl interior.xsl common.xsl functions.xsl landing.xsl

21 One Template to Rule Them All?
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 interior-landing.xsl - or - interior.xsl landing.xsl AND

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

23 THANK YOU! PLEASE SHARE YOUR FEEDBACK: #OUTC19

Download ppt "MAKING XSL-PCF PAGES FROM SCRATCH"

Similar presentations

Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.

Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / 2011-02-21 1Chris Greenhalgh

A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
XML: Managing Data Exchange Stylesheets. Lesson Contents CSS The basic XSL file XSL transforms Templates Sort Numbering Parameters and Variables Datatypes.

XML: Managing Data Exchange Stylesheets. Lesson Contents CSS The basic XSL file XSL transforms Templates Sort Numbering Parameters and Variables Datatypes.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Objective 107.02 Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.

Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Tutorial 6 Working with Web Forms

Tutorial 6 Working with Web Forms
Understanding Page Template Components Lila Bronson Training Manager, OmniUpdate, Inc.

Understanding Page Template Components Lila Bronson Training Manager, OmniUpdate, Inc.
Creating New Page and Section Templates Robert Kiffe Senior Web Developer, OmniUpdate, Inc.

Creating New Page and Section Templates Robert Kiffe Senior Web Developer, OmniUpdate, Inc.
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
Creating a Web Page HTML, FrontPage, Word, Composer.

Creating a Web Page HTML, FrontPage, Word, Composer.
Scottish Legal Aid Board Content Management using OpenCms Martin Spinks CTO Navyblue Tuesday, March 16, 2010.

Scottish Legal Aid Board Content Management using OpenCms Martin Spinks CTO Navyblue Tuesday, March 16, 2010.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
OU Campus Intermediate Training Workshop. Agenda Administrator Overview and Roles Administrator Controls Administrator Configuration Setting Up Access.

OU Campus Intermediate Training Workshop. Agenda Administrator Overview and Roles Administrator Controls Administrator Configuration Setting Up Access.
Configuring Social Media, Google Analytics, and Gadgets Lila Bronson Training Manager, OmniUpdate, Inc.

Configuring Social Media, Google Analytics, and Gadgets Lila Bronson Training Manager, OmniUpdate, Inc.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.

Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
09/28/20092009 Cascade Server User's Conference1 Smart Cascade Server Implementations & Strategies 2009 Cascade Server User’s Conference Justin Klingman,

09/28/ Cascade Server User's Conference1 Smart Cascade Server Implementations & Strategies 2009 Cascade Server User’s Conference Justin Klingman,
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.

Visual Web Design Dreamweaver Level 2. Hospitality Restrooms Food and Drink Turn cell phones off or set to vibrate Smoking Comfort Breaks Class Hours.

Similar presentations

Ads by Google