Design Studio Overview

Cisco Content Transformation Engine (CTE) Series Design Studio is a PC-based application that allows you to provide business applications to mobile users by specifying how applications should appear when delivered to a variety of microbrowser devices, including IP phones, Wireless Application Protocol (WAP) phones, and Personal Digital Assistants (PDAs). When you use Design Studio you do not change existing content; instead, you create transformation instructions that customize applications for delivery to microbrowser devices.

You can also use Design Studio to customize ScreenTop, a portal for users of phones and other supported devices. ScreenTop simplifies and streamlines user access to common destinations, just as a computer desktop does for PC users. For information on ScreenTop, refer to the Design Studio User Guide.

The CTE is an appliance-based transformation device. The CTE dynamically transforms applications according to the transformation instructions created in Design Studio and based on microbrowser requirements, such as screen size and markup language. A CTE is located in front of application servers, as shown in the sample configurations in Figure 1-1 and Figure 1-2.

These sections introduce the key concepts and processes that will help you to work efficiently with Design Studio:

Important Concepts in Design Studio

Before you begin working with Design Studio, it is helpful to understand a few concepts so that you organize your work and create transformation instructions (transformation rules) as efficiently as possible.

Design Studio has a comprehensive set of transformation rules.

To transform a web page containing images, links, tables, and forms for appropriate display on a device, you use transformation operations such as select, clip, move, insert, and modify. Design Studio supports complex transformations through the rules listed in Table 1-1.

Table 1-1 Summary of Transformation Rules

Rule	Common Uses
Select	Includes an element. The first Select rule that you apply to a page excludes all other elements. The subsequent Select rules that you create add to your initial selection. In general, the most efficient way to start working with a page is to select the main element you want to include (perhaps a form or table). To select additional elements, go to the View Original tab.
Clip	Excludes an element. After you select the main element(s) you want to include, you can then clip elements within the selected content. For example, you might clip a particular table column or some fields in a form.
Ignore	Overrides a Select or Clip rule. Suppose that a table you select includes a href links and the text that is displayed for the links. For a transformation, you can include just the text and not the link by ignoring the link. (If you clip the a href link, the accompanying text is also clipped.)
Modify	Changes one type of element to another type of element. For example, you might change an hr element (horizontal rule) to a br element (break). You can also replace an element with XHTML/XML code or text; you can add, change, or remove element attributes.
Insert	Adds an element, text, or blocks of HTML/XML code. Your transformed page can contain content that is not part of the original web page.
Move	Relocates an element. The Move rule is particularly useful for managing layout on very small screens. For example, if an input field and label will display on different pages on a device, you can move the label so that it is sent to the device before the input field.
Retain Element	Toggles the setting of the DDF key retainformat. Retains an img element smaller than 20 pixels in both width and height.
IMG ALT	Replaces an image with its alternate text. Images that are large or that do not display well on small screens are best replaced with text. You might also choose to replace an image to improve download time.
Paginate Anchor	Creates multiple links in the place of one href link and allows you to define multiple views of the destination page. Instead of sending one large page to a device when a user clicks a particular link, you can "divide" the destination page into several pages which the user accesses through additional links that you create.
Disable URL Rewrite	By default, the CTE prepends its IP address to links on transformed pages so that page requests are directed to the CTE. You can disable URL rewriting by applying a Disable URL Rewrite rule to a link.
Import XSL	Applies custom XSL to a particular element. By importing XSL, you can achieve transformations that are not possible through the other transformation rules. For example, you can import XSL that performs string manipulation on a URL string.
Force Card Break	Supplements automatic pagination by inserting a card break. Useful when related elements are split between two cards.
Dial Number	For WAP devices and XML-based IP phones only, allows a user to dial a displayed phone number by selecting it.
Group	For WAP devices and XML-based IP phones only, groups links and removes elements other than links (a href elements) that are inside of the grouped area.
Soft Key	For XML-based and some WML-based IP phones only, defines a soft key.
Input Type/Label	For XML-based IP phones only, defines the input type or label of a text element.
Refresh	For XML-based IP phones only, specifies that a particular screen is to be refreshed with the next screen after a specified number of seconds.

You can achieve powerful results with very few transformation rules.

A transformation rule can apply to just one element on one page for one device type. A transformation rule can also apply to many instances of an element across several pages for all device types.

Before you begin applying transformation rules, analyze the web pages you want to transform. Consider whether pages that are based on a common template can be transformed using the same set of rules. Plan how you can achieve a particular transformation with as few rules as possible. Using a small set of rules speeds your initial work and simplifies maintenance. Most pages require fewer than a dozen transformation rules.

You can apply a transformation rule to all pages in a project.

A project is a container for web pages that you want to transform. Be sure to group in a project the pages that can share transformation rules.

All of the transformation rules that reside on a CTE must be contained in one configuration file.

When you save your work in Design Studio, you save a configuration file. A configuration file is what you publish to the CTE. When you publish a configuration file, you can overwrite or merge with the already published file.

The CTE must be able to match a set of transformation rules to a particular web page.

When a CTE receives a request for a web page, it must match the page to a set of transformation rules, manipulate the page as needed for the requesting device, and then transform the page based on the rules you created in Design Studio.

The CTE recognizes a page based on another type of rule that you create in Design Studio, the identifier rule. You can identify a page by some or all of its URL, by some unique text on the page such as the text of the title element, or by a combination of the URL and some unique text. When you create an identifier rule, it is important to consider whether any other web page could match the rule.

Working in Design Studio

The "Design Studio Quick Tour" section guides you through a sample Design Studio project, from starting the Design Studio application to publishing your work to a CTE. For each set of web pages that you transform in Design Studio, you will perform the following steps:

Table of Contents