Designing Templates

1
Designing Templates
2
Template Overview

• In a CMS, templates create publications
• A template saves you from the manual labor of
  continually laying content into a particular
  structure and form
• By using a template, you decide once how you want
  to lay out and format content, and then you let
  the computer do the tedious task of building
  publication pages or sections

3
What do templates do?

• Templates streamline the process of creating
  publications from the neutral content in a CMS
• Bridges between the world of the CMS and
  publications
• Mixes static and dynamic constituents
• Builds a publication page or section
• Templates are programs that automatically create
  part of a publication
• Draws the publication into a system of
  publications
• Templates share code and content to create
  multiple presentations of the same base of
  information and functionality
• Uses logic select content, process it, and
  format it for display
• Hosts other templates template nesting

4
Bridging Worlds

• A template bridges the gap between the content in
  the CMS and the publication format and structure.
  
• The template must bridge the distance between
  these two worlds and the worlds of any external
  systems that the publication must link to (such
  as transaction system)
• To work in the world of the repository, the
  template must do the following
• Query the CMS repository
• Use the content schema
• Use the access structures
• Store data (responding to user requests)
• Call the CMS services

5
Bridging Worlds (Cont.)

• To work in the world of the publication, the
  template must do the following
• Create the context of the publication font,
  imagery, branding
• Produce the formatting of the publication using
  HTML, SGML
• Produce the structures of the publication
  access structure
• Target the audiences of the publication
  personalization
• To tie the publication into the worlds of any
  external systems, templates must do the following
• Connect code for accessing the external system
• Query -- get data out of the external system
• Send data back send data back to the external
  system

6
Mixing the static and the dynamic

• Similar to a mail-merge document in MS WORD
• You create a standard form that all pages or
  sections follow.
• Then you remove all the particulars of the page
  or section and replace them with placeholders.
• Later, the CMS replaces the placeholders with the
  particulars to create a set of publications pages
  or sections.
• Example PLAN press release
• The overall context of the page
• Static text and media areas of the page
• Dynamic navigation areas
• Dynamic content areas

7
A mail-merge document in Microsoft Word
8
A sample Web page that shows static and dynamic
areas
9
Building Pages

• A template is a program that builds publication
  pages or sections.
• A template may be literally a program, or you may
  use it to trigger other

Function BuildPage(ID)  ?var Component
LoadComponent(ID)  ?title Component.GetElement(
"title")  ?body Component.GetElement("body") 
?Output "ltHTMLgtltHEADgt"  ?Output Output
Title  ?Output Output "lt/HEADgtltBODYgt 
?Output Output Body  ?Output Output
"lt/Bodygtlt/HTMLgt  ?FakeFile Output, ID
".htm"End Function
ltHTMLgt   ltHEADgt Insert Title lt/HEADgt 
 ltBODYgt Insert Body lt/BODYgtlt/HTMLgt
10
Building Pages Using XSLT
ltxsltemplate match"/"gt   ltHTMLgt    
 ltxslapply-templates /gt   lt/HTMLgtlt/xsltemplate
gtltxsltemplate match"Title"gt   ltTITLEgt    
 ltxslvalue-of select"."/gt   lt/TITLEgtlt/xsltemp
lategtltxsltemplate match"Body"gt   ltBODYgt    
 ltxslvalue-of select"."/gt   lt/BODYgtlt/xsltempl
ategt
11
Building Pages (Cont.)

• Comparing the above three templates
• They all accomplish the same result.
• The first example is much easier to read and use.
  
• The first example is hardest for the CMS.
• The first example is the least flexible.
• If you want it simple for the end users, you make
  it harder for the developers. If you make it easy
  to use, it's less flexible.

12
Building Pages (Cont.)
It's an HTML file It's XML It enables you to
create your own programs
Sacrifice some simplicity for the capability to
use complex commands and call in custom
programs. This method is close in principle to
how many of the better CMS products actually do
templating.
13
Creating A System of Publications

• Templates enable you to share content and code
  among a family of publications. To enable this
  sharing, you must do some ground work in the
  following areas
• Content overlap Decide how the content of each
  publication overlaps.
• Training documentation best practices to also
  appear as sidebars
• Newsletter appropriate case studies to appear
  in a shortened form
• Design overlap Decide how the design of each
  publication overlaps
• All publications carry the organization logo in
  the upper-left corner
• Create a palette of colors and imagery that all
  publications must use
• Process change decide how the staff and
  processes of the current publication teams need
  to change

14
Creating A System of Publications (Cont.)

• PLAN example
• A chronological listing of all press releases on
  its Web site
• A printed annual report carrying the title "PLAN
  Activities" that it targets at board members and
  major contributors
• A set of printable press releases that it can fax
  to news agencies.
• Short e-mail messages that it targets at members
  to keep them up to date on major events at PLAN.
• PLAN can do a lot of copying and pasting to make
  this material all happen, or it can use a CMS to
  automate the production and update all these
  publications from the same base of press-release
  content.
• By using a set of templates, it can decide what
  the overlap of press release content is.
• Knowing that a single person may see more than
  one of it publications, PLAN can create a
  consistent design across them.
• Knowing that different groups now create all
  these publications, it can plan how to coalesce
  the various efforts and staff into a single
  effort.

15
Using A Template Processor

• A template is a text file.
• The file itself isn't capable of actually
  building a page. Rather, it's a set of
  instructions on how to build a page
• The thing that interprets the instructions and
  carries them out is known as the template
  processor.
• XSLT software, ASP, JSP, ColdFusion
• Tasks of a template processor
• Loads templates
• Skips static text and media
• Processes commands
• Calls external programs
• Returns errors
• Returns a resulting node

16
Understanding Template Logic

• Templates use logic to specify the operations
  that they need to perform to build a page or
  section.
• In any particular templating system, logic is a
  programming language that you use to specify
  commands and processes.
• Template logic examples
• Insert ____
• Insert Title
• For Each _____ Next _____
• For Each Article ltH1gtInsert Titlelt/H1gtNext
  Article
• If ____ End If
• If you have OtherNews components ltH2gtOther
  Newslt/H2gtEnd If,
• Run ____
• Run Credit Card Transaction

17
Using Templates within Templates

• Two main reasons for using page templates
• To modularize the production of a publication
  node
• To standardize the presentation of a particular
  type of node
• Any area that follows a specific pattern and is
  worth naming you can think of as a template, as
  the following list describes
• Page templates name a certain type of publication
  page and say what static and dynamic areas it
  contains.
• Navigation templates name a certain type of
  navigation area and say what static and dynamic
  areas it contains.
• Component templates name a certain type of
  content area and say what static and dynamic
  areas it contains.
• Using XSLT, include files to do template nesting

18
A page that uses a subtemplate and a
sub-subtemplate
19
Web Templating
20
Overview

• Suppose that PLAN wants to put press releases in
  the following three places on their Web site
• A short abstract of the hottest press releases
  appears on the PLAN home page
• A list of all press releases appears on the
  press-release page
• Each press release appears in full on its own
  page

21
An example of how press release appear on the
PLAN home page
22
An example of how press release appear on the
press-release main page
23
An example of how press releases appear on a
press-release detail page
24
A close-up of the navigation area on the
press-release detail page




25
The Web Content Area

• People generally look at content areas as a
  single unit.
• In fact, this one consists of a set of elements
  and static content that all come together in a
  very particular way to create the effect of a
  single unit.

26
Press Release Elements
27
Template for Web Content Area






28
Other Templating

• Print templating
• Fax templating
• Email templating

29
Analyzing Templates

• Think about the publications you will create.
  Decide how the content and design of each
  publication overlaps the others
• Think about your staff and processes, and how
  theyll have to change to make templating
  possible.
• Editorial people need to have greater integration
  with the content collection process
• Production people need to work on producing
  templates rather than final publications
• Decide how to go about your template analysis
  competitive template analysis

30
Analyzing Templates (Cont.)

• Decide what content types your templates should
  represent. These types are the core set of pages
  you want to publish.
• After you decide on your content types, decide
  how navigation between them should work.
• Analyze the content and navigation you decide
  upon to determine what is local and global,
  static and dynamic in your publication.
• Make a wire frame drawing for each page that you
  want to produce, showing the dynamic and static
  content and the global and local navigation

31
Analyzing Templates (Cont.)

• Summarize content areas across all your page
  types to determine what content will be shared by
  which pages.
• Summarize navigation across all your page types
  to determine what navigation will be shared by
  which pages.
• Summarize the components your pages need across
  all page types to determine which components are
  to be shared and by which pages

32
Analyzing Templates (Cont.)

• Decide how you will approach localization as a
  personalization or more comprehensively. For each
  of the templates that you intend to create, do a
  localization analysis including
• Localities for which you must localize
• Graphic and design items to be localized
• Content and navigation components to be localized
• Do a task analysis to determine the impact of
  your template design on other parts of the CMS,
  and then determine what tasks are required to
  maintain your templates over time

33
Analyzing Templates (Cont.)

• Integrate your template analysis with the other
  design aspects for your CMS. Consider the impact
  of the template design on other requirements,
  audiences, processes, authors, and publications
• When youve completed your template analysis,
  youll have a detailed set of drawings and
  templates to hand off to your template developer