Design Studio Overview

Cisco Content Transformation Engine (CTE) 1400 Design Studio is a PC-based application that allows you to provide corporate and Internet content to mobile users by specifying how the existing content should appear when delivered to wireless devices and the Cisco IP phone. When you use Design Studio you do not change existing content; instead, you create transformation instructions that select content and format it for delivery to wireless devices.

The CTE is an appliance-based content-transformation device. The CTE dynamically transforms content according to the transformation instructions created in Design Studio and based on device-specific requirements, such as screen size and markup language. A CTE sits in front of content servers, as shown in the sample configuration in Figure 1-1.

The following sections introduce key concepts and processes that will help you 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 wireless 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 you create add to your initial selection. It is generally most efficient to begin your work by selecting the main element you want to include (perhaps a form or table).
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 wireless device, you can move the label so that it is sent to the device before the input field.
Retain Element	Retains a table as a table element instead of converting the table to a list; retains an img element smaller than 20 pixels in both width and height; retains the contents of a noscript element.
Frames	For a page that uses frames, this rule provides the option of using the noframes content or redirecting the page to one of its frames.
Dial Number	Allows a wireless user to dial a displayed phone number by clicking it.
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 wireless 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.
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.

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.

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.

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, or by a combination of URL and 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