Create a deck for your business in 5 minutes

If you own a small or medium business and want to create a deck to promote your products, we provide a simple web editor that allows you to put together a simple deck from predefined templates in minutes.

Go to http://editor.decksapp.com to try it out now!

Before we start

As we add more tutorials and expand our documentation, make sure to revisit our Decks Developer page for the latest information.

If you have questions about creating decks, send an email to support@decksapp.com and we will do our best to help you. We also provide many examples of decks you can view and download at http://github.com/cooliris/.

What are decks?

Decks are simply directories of files describing the layout for the cards using PageKit XML, asset files like images or movies, and finally an Info.plist file containing the deck properties.

For distribution, these directories are archived as zip files and hosted on regular web servers.

What is PageKit?

PageKit is a very efficient technology to render dynamic content on iPhone or iPad developed by Cooliris. It’s used in several Cooliris iOS products and is the foundation for the Decks application, enabling its beautiful and smooth rendering while minimizing the size of the downloaded decks.

In a nutshell, PageKit:

• enables beautiful rich layouts which dynamically adjust to portrait or landscape orientation,
• is fast & smooth (as you can see when changing the orientation of the iPad for instance),
• offers magazine-style layouts but at significantly smaller download sizes.

PageKit layouts are described using a simple XML format which allows live editing. Creating decks therefore implies writing XML. Rest assured, it’s not as difficult as it may sound, and anyone familiar with HTML / CSS should be able to get started very fast.

PageKit describes content as "pages" themselves made of "blocks". Each page is represented by a corresponding .page file which contains XML. Here’s an example of a page displaying the typical "Hello World" text:

<?xml version="1.0" encoding="UTF-8"?>
<page>
 <!-- Make the page background 50% gray -->
 <background-color>0.5 0.5 0.5</background-color>
 <!-- List of blocks in the page -->
 <blocks>

   <!-- Display a "string" block -->
   <block type="string">
     <state>
       <position>0px -80px</position>
       <size>300px 50px</size>
     </state>
     <font>
       <name>Helvetica Neue</name>
       <size>30px</size>
     </font>
     <foreground-color>1.0 1.0 1.0</foreground-color>
     <string>Hello World!</string>
   </block>

 </blocks>
</page>

PageKit blocks have basic state properties like position, size, opacity... which can be animated. PageKit supports many types of blocks like "string", "image", "movie" as well as "group" blocks to build more complex layouts.

You can find the full PageKit reference at http://github.com/cooliris/pagekit/blob/master/Reference.xml

Types of decks

There are 2 types of decks you can build for Decks: "static" and "template".

Static decks are the simplest type of decks you can create: each card is made of unique pair of front and back PageKit pages. The deck directory would contain these files:

• 01.front.page
• 01.back.page
• 02.front.page
• 02.back.page
• (etc...)
• Info.plist

Static decks are recommended if you want to create highly customized decks, that look more like brochures. You can find an example of a static deck here: http://github.com/cooliris/deck-demo-audi-rs5.

Template decks have their content defined in an XML data file and the cards are generated accordingly and automatically from front and back PageKit pages used as templates. The deck directory would contain these files:

• Front.page
• Back.page
• Data.xml
• Info.plist

Template decks are recommended if you want to create a deck from a large source of similar content, like a catalog. You can find an example of such a deck here: http://github.com/cooliris/deck-demo-famous-artists.

The Data.xml for template decks has a very straightforward format:

• the "root" element at the top contains one or more "card" children elements (each of them will correspond to a card in the deck)
• each "card" element contains one or more arbitrary children elements, whose contents are used to populate the front and back of the cards (how this happens is defined in the Info.plist file)

Here’s an example Data.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <card>
   <name>iPad</name>
   <image>iPad.jpg</image>
   <price>$200</price>
   <link>http://www.apple.com/ipad/</link>
 </card>
 <card>
   <name>iPhone</name>
   <image>iPhone.jpg</image>
   <price>$100</price>
   <link>http://www.apple.com/iphone/</link>
 </card>
 <!-- etc... -->
</root>

The Info.plist file

The deck directory must contain an Info.plist which describes the properties for the deck. Even if this file is XML as well and can be edited using a regular text editor, it’s recommended to use the Property List Editor application from the Apple Developer Tools.

The Info.plist must have a dictionary at its root with the following keys, which are all required:

• "title" (string): the title of the deck (keep it as short as possible so it can fit in the interface without being truncated)
• "tintColor" (string): the tint color of the deck (specified as RGB values in [0,1] range e.g. "1.0 0.5 0.0")
• "hideBorders" (boolean): don’t show a vertical border between the cards (default is False)
• "linkTitle" (string): the label to display on the action button on the back cards (keep it as short as possible)
• "linkURL" (string): a valid URL to open when the user taps on the action on the back cards

In case of a template deck, these extra keys can be present at the root of the Info.plist:

• "frontImageBindings" (dictionary):
  • keys (strings): the id of a "string" or "image" PageKit block in the Front.page file
  • values (strings): the name of the "<card>" child element in the Data.xml file whose content to set on the referenced PageKit block
• "backImageBindings" (dictionary):
  • keys (strings): the id of a "string" or "image" PageKit block in the Back.page file
  • values (strings): the name of the "<card>" child element in the Data.xml file whose content to set on the referenced PageKit block
• "labelBinding" (string): the name of the "<card>" child element in the Data.xml file whose content to use as the label for action button on the back card
• "linkBinding" (string): the name of the "<card>" child element in the Data.xml file whose content to use as a valid URL to open when the user taps on the action on the back card

Developing and testing decks

To ease deck development and testing, the Decks application has a creation mode you can enable from the Settings application (an active WiFi connection is required on your iPad):

Note that after enabling this mode, you will have to relaunch the application.

Then, on your computer, launch a WebDAV client (you can use the "Connect To Server" feature of the Finder but a dedicated WebDAV client like Transmit is recommended) and connect to your iPad using the IP address and port that appear on your iPad screen.

At this point, you can edit and preview a deck all in real-time!

Let’s try loading an example deck:

1. Download the Welcome deck using this link: http://github.com/cooliris/deck-demo-welcome/zipball/master.
2. In the Finder, go inside the "cooliris-deck-demo-welcome-..." folder that should be in your Downloads folder.
3. Upload the entire content of this folder to your iPad using WebDAV.

At this point, your iPad screen should look like this:

To experience real-time editing, simply select and edit the "01.front.page" file:

Then search for "Welcome to", replace it by "Check out" and save.

Automagically, Decks will reload the deck and display the updated version! Your iPad screen should now look like this:

That’s it! At this point, you are able to edit and modify this deck as you wish.

When you are done editing the deck, remember to download it back from the iPad onto a folder on your computer or you may lose your modifications.

Distributing decks

By using Decks by Cooliris, you must first read and agree to our Terms and Conditions. If you are a commercial enterprise and you wish to make use of contents you created for Decks by Cooliris on more than twenty-five (25) devices, you must first contact Cooliris at business@cooliris.com for a separate license.

Once you are done editing your deck, you can prepare it for distribution. This simply means creating a zip archive from it and uploading it to a web server.

To create the zip archive, you must use the deck-builder tool (Mac OS X only) available from http://github.com/cooliris/deck-builder:

1. Download the tool using this link: http://github.com/cooliris/deck-builder/zipball/master.
2. In the Finder, go inside the "cooliris-deck-builder-..." folder that should be in your Downloads folder.
3. Follow the latest instructions at http://github.com/cooliris/deck-builder/raw/master/README
4. If everything worked fine, you will now have a zip archive on your Desktop that represents your deck ready to be distributed
5. Upload the zip archive to a web server and get the public URL for the file e.g. http://example.com/my-deck.zip
6. Enter this public URL in the text field below and generate the deck URL e.g. deck://?url=http%3A%2F%2Fexample.com%2Fmy-deck.zip

URL:

This deck URL is all you need to send your brand new deck to iPad users: simply send it by email or put it on a web page.

Updating decks

If you want to create a new version of a deck you have already distributed, all you need to do is create a new zip archive from the updated contents and replace the old zip archive on the web server. The Decks application will automatically detect that there’s a new version of the deck and install it.

This auto-update feature requires Decks 1.0.2 or later and a web server that generates proper "Last-Modified" HTTP headers.