Copyright © 2009 by SDL Tridion. SDL Tridion®, SDL Tridion R5™, BluePrinting™, SiteEdit™ and WebForms™ are trademarks of SDL Tridion Holding B.V. or its affiliates. All other company or product names used herein may be trademarks of its respective owners.

Modular TemplatingRunning demo

2

Process Flow

The demo will follow these steps:

1. The Web master changes a template for the Web site

2. The designer changes the design of the template

3. The developer creates new functionality

4. The Web master adds the new functionality to the template

5. He previews the page until he is happy with the result

6. The Designer modifies the design for a local brand

Three different roles collaborate to deliver the end result! Web master Designer Developer

The running demo will only take 4 minutes

3

The Web master want to change a template so opens it with Template Builder.

The Web master want to change a template so opens it with Template Builder.

4

He runs the template to see how it will look on the Web site.

He runs the template to see how it will look on the Web site.

He finds it consists of three different modules.

He finds it consists of three different modules.

5

Template Builder prompts him to select the page he wants to test this template with.

Template Builder prompts him to select the page he wants to test this template with.

6

The modular template is executed on the server. Template Builder shows its progress…

The modular template is executed on the server. Template Builder shows its progress…

7

And allows the Web master to view the result.

And allows the Web master to view the result.

He chooses to view the result in a bigger screen.

He chooses to view the result in a bigger screen.

8

Since he is not very satisfied with the visual design, he will ask the Designer to change the design module.

Since he is not very satisfied with the visual design, he will ask the Designer to change the design module.

9

The Designer can open and check out the template directly from R5.

The Designer can open and check out the template directly from R5.

The Designer uses Dreamweaver to change the design module. She can use all standard Dreamweaver functionality, and needs no specific knowledge of SDL Tridion R5 templates.

The Designer uses Dreamweaver to change the design module. She can use all standard Dreamweaver functionality, and needs no specific knowledge of SDL Tridion R5 templates.

10

She makes the desired changes…She makes the desired changes…

11

…and saves these back to R5. She notifies the Web master who can now review the changes.

…and saves these back to R5. She notifies the Web master who can now review the changes.

12

… and views the result in a bigger screen in order to see the changes

… and views the result in a bigger screen in order to see the changes

The Web master runs the template again within Template Builder…

The Web master runs the template again within Template Builder…

13

In the mean time, the team’s Developer is creating new functionality using Visual Studio.NET. In this case, he builds a bread crumb trail.

In the mean time, the team’s Developer is creating new functionality using Visual Studio.NET. In this case, he builds a bread crumb trail.

The Developer can use any .NET language to write the functionality. In this case, he uses C#, and he can easily write code using IntelliSense.

The Developer can use any .NET language to write the functionality. In this case, he uses C#, and he can easily write code using IntelliSense.

14

Using remote debugging, the Developer can execute the code on the server while doing his debugging work within Visual Studio. While he debugs the code, other users can continue to work on the server.

Using remote debugging, the Developer can execute the code on the server while doing his debugging work within Visual Studio. While he debugs the code, other users can continue to work on the server.To start the debugging process, he runs

the template from Template Builder, and uses breakpoints to bring him to the right part of his code inside Visual Studio.

To start the debugging process, he runs the template from Template Builder, and uses breakpoints to bring him to the right part of his code inside Visual Studio.

15

After building his .NET assembly, the assembly and its associated classes are automatically saved in R5 so they can be used.

After building his .NET assembly, the assembly and its associated classes are automatically saved in R5 so they can be used.

16

The new functionality now appears in Template Builder, and can be dragged onto the template

The new functionality now appears in Template Builder, and can be dragged onto the template

17

The Web master runs the template again but sees that the bread crumb has not been added to the page yet…

The Web master runs the template again but sees that the bread crumb has not been added to the page yet…

18

However, he sees that the BreadCrumb assembly itself gives a correct result. He therefore asks the Designer to add the BreadCrumb to the design module.

However, he sees that the BreadCrumb assembly itself gives a correct result. He therefore asks the Designer to add the BreadCrumb to the design module.

19

The Designer uses Dreamweaver to add a simple tag to the design, and saves it.

The Designer uses Dreamweaver to add a simple tag to the design, and saves it.

20

The Web master runs the template again…

The Web master runs the template again…

He is now happy with the design and starts using he template for the Web site!

He is now happy with the design and starts using he template for the Web site!

…and sees the bread crumb is now displayed correctly.

…and sees the bread crumb is now displayed correctly.

21

As a next step, he needs to modify the design for Switzerland, that uses a separate brand.

As a next step, he needs to modify the design for Switzerland, that uses a separate brand.

22

To achieve this, he only needs to localize the design module of the modular template. After doing this, he asks the Designer to apply the local brand.

To achieve this, he only needs to localize the design module of the modular template. After doing this, he asks the Designer to apply the local brand.

23

The Designer opens the localized design module, and changes it to match the local brand.

The Designer opens the localized design module, and changes it to match the local brand.

24

The changes include a new logo and a different color scheme.

The changes include a new logo and a different color scheme.

25

She uses Template Builder to run the template and evaluate the result.

She uses Template Builder to run the template and evaluate the result.

26

All functionality in the modular template works correctly. If the Developer decides to change for example the bread crumb functionality, the Swiss template will automatically pick up those changes, since only the design module was changed.

All functionality in the modular template works correctly. If the Developer decides to change for example the bread crumb functionality, the Swiss template will automatically pick up those changes, since only the design module was changed.

27

Modular Templating Benefits

Modular design: separate visual design, content and code Different roles can work on different modiules

Reusable building blocks BreadCrumb assembly can be used in many templates

Choose, combine and extend technologies Modules can be written in Dreamweaver, XSLT, VBScript, JavaScript or

any .NET language Organizations can leverage the skills they have available

BluePrinting & brand management Modules can be localized to allow for variation in brands

Support for industry-standard tools Dreamweaver, Visual Studio

Shorter time to market Drag and drop template development!