Slide 1

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

Slide 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

Slide 3

The Implementation Process HTML DesignSetup XSLs Create Initial PCF(s) Initial PCF to TMPL(s) TCF: New Page/Section Form GIF Image for Template Icons Working Templates in OU Campus

Slide 4

Source Code Editor

Slide 5

Resources Folder

Slide 6

Template Terminology Template Stylesheets Template Files XSLsFiles in OU Campus for page/section templates 3 components: Image Matches Template Control Files name TCF Form for creating a new page/section TMPL Template used for page/file creation

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

Slide 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

Slide 9

XML Document

Slide 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

Slide 11

PCF

Slide 12

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

Slide 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

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

Slide 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

Slide 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

Slide 17

New Page and Section Files

Slide 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

Slide 19

Template Control File (TCF)

Slide 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

Slide 21

Q&A

Slide 22

On Your Own Study

Slide 23

Programming with XML Extensible Markup Language in OU Campus

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

Slide 25

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

Slide 26

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

Slide 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

Slide 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

Slide 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

Slide 30

XML Tree - PCF Document

Slide 31

Thank You! Dont forget to take our survey outc15.com/surveys