Advanced Layout Design

Transcription

1 Advanced Layout Design Ron Donaldson Technical Account Manager

2 Agenda Layout Basics CJP Driven Logic Responsive s

3 What is a Layout? Layouts are responsible for managing and positioning content in all Document Templates, dictating the following criteria: Page Dimensions Page Orientation Header and Footer dimensions Page Sequencing Content positioning/placement

4 What is a Layout? Template Print Layout Layout Address content Address Sidebar Customer content Body Main content Footer info specific content Footer Regions Sections Regions

5 XSL-FO for Print Documents

6 XSL-FO Smart Communications uses XSL-FO to define the layout of the printed output A working knowledge of XSL-FO is required of anyone wishing to implement any advanced design Xalan FOP DDV Layout XML document XSLT stylesheet XSLT Engine XSL-FO document XSL-FO formatter PDF AFP PS PCL Print formats XML TXT Other HTML

7 Layout fo composition - fo:root XSL-FO layout consist of two major parts: The first part describes the general layout and defines which page template to use The second part assigns actual content to the pages Physical page layout + Page sequencing Content (with regions)

8 simple-page-master Defines the different Page Structures and specifies: Margins Height / width of the page Paper Size Orientation (Portrait / Landscape) Headers / Footers/ Side Bars Main Content Area Main FrontPage BackPage

9 page-sequence-master Defines the Page Sequencing the order of simple-page-masters that are available to the Layout, e.g. (one or more fo:page-sequence-masters) FrontPage Main BackPage

10 page-sequence The page-sequence decides which page-sequence-master will actually be used when the document is generated: Scenario 1: Single Page Document only Scenario 2: Multiple Page Document

11 page-sequence The page-sequence element contains the content to fill a sequence of pages. A page sequence consists of the: fo:flow fo:static-content elements

12 fo:simple-page-master Defines the different page structures Margins Paper Size Headers / Footers Sidebars Main content Area SPM1 SPM2 SPM3 fo:page-sequence-master Defines the potential structure of the document: PSM1 - SPM1 First Page SPM2 Rest of Pages SPM2 Last Page PSM2 - SPM3 one page only fo:page-sequence Define the actual structure(s) to use: PS1 - PSM1

13 Putting it together Layout Tree: fo:simple-page-master Region Map Layout Tree: fo:page-sequence Business Content Editor

14 CJP Driven Logic Watermarks / Tray Pulls

15 Steps to Use CJP Driven Logic 1. Define CJP in the Template 2. Identify Layout Elements to Switch 3. Implement XSL Logic in Layout

16 Define CJP in the Template The layout has no direct access to the Data Model. Data elements must be specifically passed to the layout.

17 Identify Layout Elements to Switch Conditional logic can be wrapped around most any element of the layout Entire simple-page-masters Particular regions of a simple-page-master Static regions

18 Implementing XSL Logic Logical when condition Image only applied to one of the body definitions

19 XHTML Web

20 XHTML Web Channels use XHTML to define the regions Web Layouts are much simpler than XSL-FO Layouts The Smart Communications Engine transforms the incoming XML data against the relative Styleset and XHTML into the final HTML output If you need to develop more detailed XHTML Layouts, the recommended route would be to use tools such as Dreamweaver

21 Responsive s 47% of opens happen on mobile devices 80% of people delete an if it doesn t look good on their mobile device

22 Responsive s What is possible with responsive design: Enlarging fonts font-size: 18px!important; Changing colors color: #dddddd; Changing layout padding: 15px!important; Scaling images Changing/hiding content display: none;

23 How to develop a layout for a Responsive

24 Responsive s Layout contains ids for certain sections within the layout which you would like to customize. The ID should be unique/not used in the SC styleset In the layout on the left the div has an id of header

25 Responsive s The css for the responsive is stored in the style section within the head of the layout.

26 Responsive screen and (max-width: 480px) { body { max-width: 300px; } #header { background: red; color: #ffffff; font-size: 16pt; } #footer { background: red; } Responsive uses a media query, also known { } margin-bottom: 3pt; font-style: normal; margin-top: 9pt; color: #00cc66; font-weight: bold;

27 Responsive screen and (max-width: 480px) { } This media type states If the is viewed on a screen size of 480px or less, use the following CSS.

28 Responsive s

29 Responsive s

30 Responsive screen and (max-width: 480px) { body { max-width: 300px; } #header { background: red; color: #ffffff; font-size: 16pt; } #footer { background: red; }.heading1 { } margin-bottom: 3pt; font-style: normal; margin-top: 9pt; color: #00cc66; font-weight: bold;

31 Responsive s Don t forget to test your responsive designs in a variety of: clients Mobile devices Devices Manufacturers Applications Screen size

32 Useful information Web links W3 school W3C FOP Litmus elearning/training Support Services Books XSL-FO By Dave Pawson Publisher O Reilly

33 Questions?

34 Thank You