You are on page 1of 596

Digital Magazine Reader App

User Guide

Smart Publishing

Digital Magazine Reader App User Guide
document version 1.1.13

Legal Disclaimer
© 1998-2011 WoodWing Software bv. All Rights Reserved.

Digital Magazine Reader App User Guide
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of WoodWing Software. The information in this book is furnished for informational use only and is subject to change without notice. The software described herein is furnished under a license agreement, and it may be used or copied only in accordance with the terms of the agreement. Enterprise, Content Station, Brand Station, Smart Layout, Smart Styles, Smart Catalog, and Smart Connection are trademarks of WoodWing Software. Adobe, InDesign and InCopy are trademarks of Adobe Systems Incorporated. Apple, Mac, and Macintosh are trademarks of Apple Computer, Inc. registered in the U.S. and other countries. Microsoft, Windows, Windows XP and Windows Vista are trademarks of Microsoft Corporation registered in the U.S. and/or other countries. All other trademarks are the property of their respective owners.

Production Note
This manual was created electronically using Adobe InDesign, Adobe InCopy, Adobe Acrobat, WoodWing Smart Styles, WoodWing Smart Layout, WoodWing Smart Connection, WoodWing Content Station, and WoodWing Enterprise.

WoodWing Publishing Solutions

WoodWing Publishing Solutions
About WoodWing Software
Since 1997, WoodWing Software has been developing editorial solutions based on Adobe InDesign and InCopy. Using standard and proven technologies, open source components, and an open architecture, WoodWing has been creating the most progressive solutions available on the market for the production of print and online publications. WoodWing has an international roster of customers that includes many of the world’s top magazine companies, newspapers, book publishers and corporate clients. WoodWing Software is located in Zaandam, The Netherlands, and has regional sales companies for Europe, the USA, Asia-Pacific, and Latin America. Customers are served through select partners. Content Station is the ‘publishing desktop’ from which a user carries out his tasks. It provides an intuitive and uniform user-interface during all stages of the publishing process. Content Station is available in a Pro Edition, Basic Edition, and a Free Edition.

Brand Station

Brand Station is WoodWing’s Web-to-Print solution for corporations, ad agencies and print-service providers. It helps to ensure correct use of corporate design guidelines, while taking the load off internal departments. Based on the principle of three user types—the Brand Owner, the Brand Designer, and the Brand User, Brand Station provides a controlled environment for the creation of company-branded material. Designers create templates according to company guidelines. After approval by the Brand Owner, Brand Users can access these templates in Brand Station, customize them to a predefined extent, and create publication-ready files, all using just a Web browser.

Enterprise Content Publishing System

The Enterprise content publishing system forms the rocksolid foundation for all WoodWing’s publishing solutions. Enterprise is at the heart of the publishing process, allowing designers, editors, external journalists, IT and managers to easily collaborate and meet deadlines, while controlling document versions, access rights, storage, and more. Enterprise is completely integrated with solutions for planning, wire, DAM, archive, Web CMS, mobile publishing and numerous other systems. In fact, it has specifically been designed to easily integrate with any system around.

WoodWing Productivity Plug-ins

WoodWing provides plug-ins for Adobe InDesign and InCopy that make working with these applications easier, faster, and much more effective. For a full overview of these plug-ins, see the next page.

Smart Styles

Content Station

WoodWing’s solution ensures that all steps of the editorial process — content planning, gathering material, editing and selecting, plus managing strategic publication of content to any output channel — are executed from just one location: WoodWing’s Content Station application.

The award-winning Smart Styles automated styling tool delivers powerful formatting capabilities to Adobe InDesign users. This unique software combines object-, table- and smart text styles into powerful Smart Styles. Smart Styles are conveniently stored in libraries and can be applied with a simple drag and drop to set all of the styling attributes of the object or group of objects. Smart Styles removes repetitive and time-consuming tasks and ensures consistent formatting.

iii

WoodWing Publishing Solutions

Smart Layout

Smart Layout optimizes and speeds up the layout process by adding the Article concept to InDesign. An Article consists of several elements, such as the head, intro, body and also images. Smart Layout defines a relationship between these elements. Smart Layout’s intelligent behavior and automatic processes strongly improve the efficiency of InDesign users working with multiple columns of text. This is of particular interest for newspapers and magazines with tight deadlines.

For more information about WoodWing products, visit www.woodwing.com.

Smart Catalog

Smart Catalog is a scalable and powerful solution to publish variable data right from inside Adobe InDesign. Smart Catalog links data from a plain text- or XML file, or a database to an InDesign document. After the corresponding links have been set up, Smart Catalog lets you manage the data in your InDesign document. Smart Catalog can be used to efficiently create any publication that links to external data. Examples include price lists, image catalogs, product overviews, travel brochures, exhibition books, etc. Updating the publication with the latest information then becomes as easy as one click of a button.

Digital Magazines Tools

WoodWing’s Digital Magazine Tools are an extension to the Enterprise Publishing System. These tools enable publishers to easily create beautifully-designed and compelling content for tablets like the iPad, and to distribute it through a branded Reader app that offers a unique enduser experience. What makes this solution quite special is that the creation process is, to a large extent, identical to the traditional process of creating content for print. Designers use their familiar tools, such as Adobe InDesign and Content Station, to add interactivity to their layouts.

iv

Contents

Contents
Chapter 01 | Introduction ����������������������� 1 1. Purpose and Target Readers ������������������� 1 2. Product Versions������������������������������ 2 3. Working Environment �������������������������� 2 4. Using This User Guide ������������������������� 2 4.1 Sections ����������������������������������� 2 4.2 Icons ������������������������������������� 3 4.3 Navigating the PDF ������������������������� 3 5. Additional Documentation ���������������������� 4 6. Feedback ������������������������������������ 4 Chapter 02 | About the Reader App �������������� 5 1. Available Projects ����������������������������� 6 2. Functionality ��������������������������������� 7 3. Ways of Customizing �������������������������� 7 4. Distribution����������������������������������� 8 4.1 Getting the Content on the Device ������������� 8 4.2 Distribution and Payment Models ������������� 9 5. New Features and Changes ������������������� 10 5.1 New Features ����������������������������� 10 5.1.1 Android Reader App ��������������������� 10 5.1.2 iPad Reader App������������������������ 13 5.1.3 Content Delivery Platform ���������������� 13 5.2 Changes ��������������������������������� 14 Chapter 03 | The Concept ���������������������� 16 1. Page Orientation ����������������������������� 16 2. Page Dimensions ���������������������������� 17 3. Stories, Pages, Sections and Segments ��������� 18 Chapter 04 | Using the Reader App ������������� 23 1. Features by Platform�������������������������� 23 2. Basic Viewing ������������������������������� 24 3. Requirements ������������������������������� 26 4. Page Scaling �������������������������������� 27 5. Accessing the Reader App �������������������� 28 6. Accessing the Magazine ���������������������� 29 6.1 From Within the Reader App����������������� 29 6.2 From Within the Newsstand ����������������� 30 7. Navigation Tools ����������������������������� 32 7.1 Top Toolbar ������������������������������� 34 7.1.1 TOC List ������������������������������� 34 7.2 Navigation Bar ���������������������������� 35
vi

7.2.1 The Back Button ������������������������ 36 7.2.2 The Forward Button ��������������������� 36 7.2.3 The Buy Button ������������������������� 36 7.2.4 The Library Button ���������������������� 37 7.2.5 The Cover Button ����������������������� 38 7.2.6 The TOC Button ������������������������ 38 7.2.7 The Contents Button �������������������� 38 7.2.8 The Newsfeed Button ������������������� 39 7.2.9 The Help Button ������������������������ 39 7.2.10 The Account Button �������������������� 39 7.3 Action Bar �������������������������������� 40 8. Navigating the Reader App �������������������� 42 8.1 Hotzones ��������������������������������� 43 8.2 Navigation Zones �������������������������� 43 8.3 Gestures ��������������������������������� 44 8.4 Section Viewer ���������������������������� 44 8.5 Story Viewer / Page Viewer ����������������� 45 8.6 Page Scrubber ���������������������������� 47 8.7 Forward/Back Buttons ��������������������� 47 8.8 TOC List ��������������������������������� 48 8.9 Bookmarks List ��������������������������� 49 8.9.1 Bookmarking a Story �������������������� 50 8.9.2 Accessing a Bookmark ������������������ 50 8.9.3 Deleting a Bookmark �������������������� 51 8.9.4 Managing Bookmarks ������������������� 52 8.10 Dossier Links ���������������������������� 53 8.11 Device Rotation �������������������������� 53 9. Dynamic Content ���������������������������� 54 9.1 Video ������������������������������������ 54 9.1.1 Manual Playback ������������������������ 55 9.1.2 Fullscreen Playback ��������������������� 56 9.2 Audio ������������������������������������ 57 9.2.1 Using Embedded Controls ��������������� 58 9.2.2 Using the Audio Control ����������������� 58 9.3 Slide Shows ������������������������������ 59 9.3.1 Viewing in Frame������������������������ 60 9.3.2 Viewing in Fullscreen Mode �������������� 60 9.4 Hotspots ��������������������������������� 61 9.5 Web Elements ���������������������������� 62 9.6 Scrollable Areas ��������������������������� 63

Contents

9.7 Text View ��������������������������������� 63 10. Newsfeeds ��������������������������������� 65 11. Sharing Content ���������������������������� 66 11.1 Sharing a Page ��������������������������� 67 11.2 Sharing Part of a Page ��������������������� 68 11.3 Sharing a Hyperlink ����������������������� 69 11.4 Reader App Settings ���������������������� 70 12. Using the Store ����������������������������� 71 12.1 Store With Subscription Functionality �������� 73 12.1.1 The iTunes Subscription Service ���������� 73 12.1.2 A Non-iTunes Subscription Service ������� 75 12.1.3 Signing In or Out ����������������������� 77 12.1.4 Subscribing ��������������������������� 78 12.1.5 Upgrading a Subscription ��������������� 78 12.2 Navigating the Store ���������������������� 79 12.3 Previewing an Issue ����������������������� 79 12.4 Downloading an Issue ��������������������� 80 12.4.1 Non-Progressive Downloads ������������ 82 12.4.2 Progressive Downloads ����������������� 83 13. Using the Library ���������������������������� 86 13.1 iPad Reader App Library ������������������� 86 13.2 Android App Library ���������������������� 90 13.3 Navigating the Library ��������������������� 91 13.4 Using the Library Filter ��������������������� 91 13.5 Using the Segment Filter ������������������� 93 13.6 Downloading Issues and Segments ��������� 94 13.7 Opening an Issue or Segment �������������� 94 13.8 Deleting an Issue or Segment �������������� 95 14. Custom Home Page ������������������������� 96 15. Version Information ������������������������� 96 16. Reader App Updates ����������������������� 97 17. Using the HTML5 Reader on a PC ������������� 97 Chapter 05 | Creating Content ������������������ 99 1. Creating a Story ���������������������������� 101 2. Creating a Dossier �������������������������� 102 3. Creating a Page ���������������������������� 103 3.1 Page Sizes������������������������������� 104 3.2 Effective Workspace ���������������������� 107 3.3 Landscape Orientation �������������������� 108 3.4 Portrait Orientation������������������������ 109 3.5 Text View Mode �������������������������� 110 3.5.1 Using InDesign CS4 �������������������� 110 3.5.2 Using InDesign CS5 �������������������� 112 3.6 Sections and Page Numbering ������������� 112
vii

4. Working with DM Artboards ������������������ 113 4.1 Creating a DM Artboard ������������������� 115 4.2 Switching Between DM Artboards ���������� 116 4.3 Adjusting the DM Artboard ���������������� 116 4.4 Assigning Content to a Device �������������� 117 4.5 Points to Note ���������������������������� 118 4.6 Working Without Artboards ���������������� 118 5. Designing a Page ��������������������������� 119 5.1 Creating a Slide Show ��������������������� 123 5.2 Adding a Video ��������������������������� 125 5.2.1 As a URL ����������������������������� 125 5.2.2 As a File ������������������������������ 127 5.2.3 Auto Play ����������������������������� 129 5.2.4 Auto Fullscreen ������������������������ 129 5.3 Adding an Audio File ���������������������� 129 5.3.1 As a URL ����������������������������� 130 5.3.2 As a File ������������������������������ 131 5.3.3 Auto Play ����������������������������� 133 5.4 Creating a Web Element ������������������� 133 5.4.1 Transparent Web Elements �������������� 135 5.4.2 Link to Store and Library ���������������� 135 5.4.3 Scale Content to Fit Screen ������������� 135 5.5 Creating a Dossier Link �������������������� 136 5.5.1 On a Layout ��������������������������� 136 5.5.2 In a Web Element ���������������������� 137 5.6 Basic Hotspots ��������������������������� 138 5.6.1 Terms and Components ���������������� 138 5.6.2 Layers ������������������������������� 140 5.6.3 Size and Content ���������������������� 141 5.6.4 Creation ������������������������������ 142 5.6.5 Creating a Selected Hotspot ������������ 149 5.6.6 Creating a Hotspot Close Button ��������� 151 5.6.7 Managing Hotspots using the Layers Panel �������������������������������� 151 5.7 Hotspots on Hotspots ��������������������� 154 5.7.1 Terms and Components����������������� 154 5.7.2 Creation ������������������������������ 156 5.7.3 Creating a Selected Hotspot ������������� 162 5.7.4 Creating a Hotspot Close Button ��������� 162 5.7.5 Managing Hotspots using the Layers Panel 163 5.8 Using the Hotspot Panel ������������������� 163 5.9 Creating a Widget ������������������������ 165 5.10 Creating a Scrollable Area ����������������� 166 5.11 Creating a Custom Object ����������������� 169

Contents

5.12 Creating a Help Page ��������������������� 169 5.13 Creating Shared Content������������������ 170 6. Summary ���������������������������������� 171 Chapter 06 | Exporting Content ��������������� 172 1. The Digital Magazine Application �������������� 172 1.1 The Search Pane ������������������������� 174 1.2 The Device Toolbar ����������������������� 174 1.3 The Story Pane ��������������������������� 175 1.4 The Page Preview panes ������������������� 176 2. Preparing Content for Export ����������������� 176 2.1 Magazine Content ������������������������ 177 2.1.1 Adding a Story ������������������������� 177 2.1.2 Verifying the Story’s Content ������������� 178 2.1.3 Removing a Story ���������������������� 179 2.2 Story Order ������������������������������ 179 2.3 Dossier Properties ������������������������ 180 2.4 Image Properties ������������������������� 180 2.5 Content Sharing �������������������������� 181 2.6 Sharing ofip Properties �������������������� 181 3. Exporting Content �������������������������� 182 3.1 Exporting and Page Scaling ���������������� 184 4. Summary ���������������������������������� 184 Chapter 07 | Customizing the iPad Reader App � 185 1. Required Tools ����������������������������� 186 2. Loading a Project ��������������������������� 186 3. What Can Be Customized? ������������������� 187 3.1 Assets ���������������������������������� 187 3.2 Colors ���������������������������������� 189 3.3 Fonts ����������������������������������� 189 3.4 Text ������������������������������������ 191 3.4.1 Changing the Text���������������������� 191 3.4.2 Changing the Text Color ���������������� 194 3.4.3 Changing the Language ���������������� 194 3.5 Settings ��������������������������������� 196 4. Previewing Customizations ������������������� 196 5. General App Settings ������������������������ 197 5.1 Reader App Name ������������������������ 197 5.2 Reader App Assets ����������������������� 198 5.3 Intent Settings ��������������������������� 198 5.3.1 Background Downloading ��������������� 199 5.4 Background Download Setting ������������� 199 5.5 Version Numbering ����������������������� 200 5.5.1 Version Verification ��������������������� 201 5.5.2 Update Release ����������������������� 202
viii

6. Navigation ��������������������������������� 203 6.1 Story vs Page Navigation ������������������ 203 6.2 Orientation Lock �������������������������� 204 6.3 Right-To-Left Support ��������������������� 205 6.4 Navigation Bar ��������������������������� 205 6.4.1 Tap Area������������������������������ 206 6.4.2 Visibility ������������������������������ 206 6.4.3 Items �������������������������������� 207 6.4.4 Assets ������������������������������� 209 6.4.5 Colors ������������������������������� 210 6.5 Flipview ��������������������������������� 211 6.5.1 Assets ������������������������������� 212 6.5.2 Colors ������������������������������� 214 6.5.3 Fonts �������������������������������� 214 6.5.4 Header ������������������������������� 215 6.5.5 Thumbnail Size ������������������������ 216 6.5.6 Thumbnail Awareness ������������������ 216 6.5.7 Margins ������������������������������ 216 6.5.8 Story Title ���������������������������� 217 6.5.9 Story Bullets �������������������������� 217 6.5.10 Story Description ��������������������� 218 6.5.11 Page Scrubber ����������������������� 219 6.6 Top Toolbar ������������������������������ 220 6.6.1 Availability ���������������������������� 220 6.6.2 Visibility ������������������������������ 221 6.6.3 Tap Area ����������������������������� 221 6.6.4 Items �������������������������������� 222 6.6.5 Assets ������������������������������� 223 6.6.6 Colors ������������������������������� 224 6.7 Hotzones �������������������������������� 224 6.8 Gestures �������������������������������� 225 7. The Store ���������������������������������� 226 7.1 Communication With the Store �������������� 226 7.2 General Store Features �������������������� 227 8. The Library��������������������������������� 228 8.1 General Appearance ���������������������� 229 8.2 Text ������������������������������������ 233 8.3 Download Settings ����������������������� 233 8.4 Back To Issue Button ��������������������� 234 8.5 Library Filters ���������������������������� 234 8.6 Subscription Sign-in ���������������������� 236 9. General App Features ����������������������� 236 9.1 APIs ������������������������������������ 237 9.1.1 Analytics API �������������������������� 237

Contents

9.1.2 Gestures API �������������������������� 238 9.1.3 Navigation API ������������������������� 238 9.2 Audio ����������������������������������� 239 9.2.1 Overlay Assets ������������������������ 240 9.2.2 Embedded Audio Controls �������������� 240 9.2.3 Audio Control Pop-Up ������������������ 241 9.3 Bookmarks ����������������������������� 244 9.3.1 Enabling the Functionality ��������������� 244 9.3.2 Changing the Assets ������������������� 245 9.3.3 Changing the Colors ������������������� 246 9.3.4 Changing the Fonts �������������������� 246 9.3.5 Localizing the Text ��������������������� 247 9.3.6 Changing the Dimensions ��������������� 247 9.4 Content Sharing �������������������������� 248 9.4.1 Adding Custom Metadata ��������������� 248 9.4.2 Configuring the DigiMagSettings.h File ���� 249 9.4.3 Cleaning the Project Targets ������������� 249 9.4.4 Enabling the Functionality ��������������� 250 9.4.5 Changing the Assets ������������������� 250 9.4.6 Changing the Colors ������������������� 251 9.4.7 Localizing the Text ��������������������� 252 9.5 Custom Home Page ���������������������� 253 9.5.1 Requirements ������������������������� 253 9.5.2 Header Files �������������������������� 254 9.5.3 Implementation ������������������������ 255 9.6 Custom Objects �������������������������� 257 9.6.1 Configuring Custom Objects ������������� 259 9.7 Downloading Methods �������������������� 260 9.7.1 Non-Progressive Downloading ����������� 260 9.7.2 Progressive Downloading ��������������� 261 9.8 Fullscreen Overlay ������������������������ 262 Step 1. Adding the Settings File ��������������� 262 Step 2. Adding the Overlay Window Files ������� 262 Step 3. Customization ����������������������� 262 Step 4. Adding the Navigation Bar Button ������ 263 9.9 iOS 5 iCloud Support ��������������������� 263 9.10 Libraries �������������������������������� 264 9.10.1 Caching ����������������������������� 264 9.10.2 Library Filter �������������������������� 265 9.10.3 Library Segment Filter ����������������� 266 9.11 Newsfeeds������������������������������ 267 9.12 Newsstand (iOS 5) ����������������������� 268 9.12.1 Configuration ������������������������� 269 9.13 No Internet Connection Indicators ���������� 272
ix

9.14 Push Notifications (Messages) ������������� 272 9.14.1 Configuration ������������������������� 273 9.14.2 Sending Messages �������������������� 273 9.15 Slide Shows ���������������������������� 274 9.16 Store Filter ������������������������������ 275 9.17 Subscriptions ��������������������������� 276 9.17.1 Configuring the Reader App Functionality � 277 9.17.2 Modifying the Reader App Appearance��� 278 9.18 Text View ������������������������������� 283 9.19 TOC List ������������������������������� 284 9.19.1 Enabling the Functionality �������������� 285 9.19.2 Changing the Assets ������������������ 285 9.19.3 Changing the Colors ������������������ 286 9.19.4 Changing the story text ���������������� 286 9.19.5 Changing the Width and Height ��������� 287 9.19.6 Localizing the Text �������������������� 287 9.19.7 Changing the Fonts ������������������� 288 9.20 Video ���������������������������������� 288 9.20.1 Overlay Assets ����������������������� 289 9.20.2 Hiding Embedded Video Controls ������� 290 9.21 Remove Video After Play ����������������� 291 9.22 Web Elements �������������������������� 292 Chapter 08 | Building the iPad Reader App �����293 1. Preparation �������������������������������� 293 1.1 A Reader App Without Store Functionality ���� 294 1.2 A Reader App With Store Functionality ������� 294 1.3 An App Without Newsstand Functionality ���� 296 2. Building ����������������������������������� 296 Chapter 09 | Customizing the Android Reader App ����������������������������� 297 1. Required Tools ����������������������������� 298 2. OS Compatibility ���������������������������� 298 3. Loading a Project ��������������������������� 299 4. Universal Builds ������������������������� 300 5. What Can Be Customized? �������������������300 5.1 Drawables ������������������������������� 301 5.2 Text ������������������������������������ 301 5.2.1 Changing the Text���������������������� 302 5.2.2 Changing the Language ���������������� 304 5.3 Settings ��������������������������������� 305 6. Previewing Customizations ������������������� 305 7. General App Settings ������������������������306 7.1 Reader App Name ������������������������306 7.2 Reader App Drawables �������������������� 307

Contents

7.3 Web Pages ������������������������������ 307 7.3.1 Custom Information �������������������� 308 7.3.2 Metrics Information��������������������� 308 7.4 Version Information������������������������ 311 7.5 Intent Settings ���������������������������� 311 8. Navigation ��������������������������������� 312 8.1 Story vs Page Navigation ������������������ 312 8.2 Navigation Bar ��������������������������� 313 8.2.1 Tap Area������������������������������ 314 8.2.2 Items �������������������������������� 314 8.2.3 Drawables ���������������������������� 315 8.2.4 Visibility Settings ����������������������� 317 8.3 Action Bar ������������������������������� 317 8.3.1 Tap Area������������������������������ 318 8.3.2 Items �������������������������������� 318 8.3.3 Drawables ���������������������������� 320 8.3.4 Text ��������������������������������� 323 8.3.5 Visibility ������������������������������ 323 8.4 Flipview ��������������������������������� 324 8.4.1 Header ������������������������������� 325 8.4.2 Story Viewer / Page Viewer�������������� 326 8.4.3 Page Scrubber ������������������������ 329 8.4.4 Section Viewer ������������������������ 330 8.4.5 Close Button �������������������������� 331 8.4.6 Drop Shadow ������������������������� 332 8.5 Top Toolbar ������������������������������ 333 8.5.1 Availability ���������������������������� 333 8.5.2 Visibility ������������������������������ 333 8.5.3 Tap Area ����������������������������� 334 8.5.4 Items �������������������������������� 334 8.5.5 Drawables ���������������������������� 335 8.6 Hotzones �������������������������������� 335 8.7 Orientation Lock �������������������������� 336 9. The Store ���������������������������������� 337 9.1 Communication With the Store�������������� 338 9.2 Reader App Components ������������������ 339 10. The Library�������������������������������� 342 10.1 Subscription Sign-In Window �������������� 342 10.2 Library ��������������������������������� 345 11. General App Features����������������������� 349 11.1 Audio ���������������������������������� 349 11.1.1 Overlay Drawables��������������������� 350 11.1.2 Audio Settings ������������������������ 350 11.1.3 Embedded Audio Controls ������������� 351
x

11.2 Custom Objects ������������������������� 351 11.3 Downloading Methods�������������������� 352 11.3.1 Non-progressive Download Method ����� 352 11.3.2 Progressive Download Method ��������� 353 11.4 In-App Billing ���������������������������� 355 11.5 Newsfeeds ����������������������������� 356 11.6 No Internet Connection Indicators ���������� 357 11.7 Scrolling Indicators ����������������������� 358 11.8 Slide Shows ���������������������������� 359 11.9 Text View ������������������������������� 359 11.10 Video ��������������������������������� 360 11.10.1 Overlay Drawables ������������������� 361 11.10.2 Video Player Drawables ��������������� 362 11.11 Hiding Embedded Video Controls ��������� 363 11.12 Web Elements �������������������������� 364 Chapter 10 | Building the Android Reader App ��365 1. Universal Builds �����������������������������365 2. Preparation ��������������������������������366 2.1 Eclipse ����������������������������������366 2.2 Reader App Without Store Functionality ������ 367 2.3 Reader App With Store Functionality �������� 367 3. Building ����������������������������������� 368 Chapter 11 | Customizing the HTML5 Reader App �����������������������������369 1. Required Tools ����������������������������� 370 2. Project Files �������������������������������� 370 3. What Can Be Customized? ������������������� 371 3.1 Images ���������������������������������� 372 3.2 Colors ���������������������������������� 372 3.3 Text ������������������������������������ 373 3.4 Settings ��������������������������������� 374 4. Previewing Customizations ������������������� 374 5. General App Features ����������������������� 375 5.1 General Appearance ���������������������� 375 6. Navigation ��������������������������������� 378 6.1 Story vs Page Navigation ������������������ 378 6.2 Navigation Bar ��������������������������� 379 6.2.1 Items��������������������������������� 379 6.2.2 Images ������������������������������� 380 6.3 Flipview ��������������������������������� 381 6.3.1 Background��������������������������� 382 6.3.2 Header ������������������������������� 382 6.3.3 Thumbnail Border ��������������������� 383 6.3.4 Story Title ���������������������������� 383

Contents

6.3.5 Story Bullets �������������������������� 384 6.3.6 Story Description ���������������������� 384 6.3.7 Page Scrubber ������������������������ 385 6.4 Hotzones �������������������������������� 385 6.5 Navigation Zones ������������������������� 386 6.6 Top Toolbar ������������������������������ 387 6.6.1 Availability ���������������������������� 387 6.6.2 Images ������������������������������� 387 7. General App Features������������������������ 388 7.1 Audio ����������������������������������� 388 7.2 Slide Shows ����������������������������� 389 7.2.1 Navigation Zones ���������������������� 389 7.2.2 Overlay Images ������������������������ 389 7.3 TOC List �������������������������������� 390 7.3.1 Enabling the Functionality ���������������390 7.3.2 Changing the story text ����������������� 391 7.4 Video ����������������������������������� 391 Chapter 12 | Building the HTML5 Reader App ��� 392 1. Bundling the Content ������������������������ 392 Chapter 13 | Distributing Reader Apps Without Store ����������������������������394 1. Submitting the Reader App ������������������� 394 1.1 To the iTunes App Store ������������������� 395 1.2 To an Android App Store ������������������ 395 Chapter 14 | Distributing Reader Apps With Store ����������������������������396 1. The Content Delivery Platform ���������������� 397 2. Distribution Workflow ������������������������ 398 3. Distributing the Reader App ������������������ 398 3.1 Updating the Reader App ������������������ 399 4. Distributing Issues ��������������������������400 4.1 Registering With iTunes Connect ������������400 4.2 Registering With the CDP ������������������400 Appendix A | Layout Sizes �������������������� 401 1. Formula ����������������������������������� 401 1.1 Device Settings ��������������������������� 402 1.2 Page Sizes ������������������������������ 402 Appendix B | Creating Text View Markup Articles �������������������������404 1. Text View Markup ��������������������������� 404 2. Requirements ������������������������������ 405 3. Creating the Article �������������������������� 405 3.1 Element Label Mapping�������������������� 406 3.2 Styles Mapping �������������������������� 407
xi

4. About Overrides ���������������������������� 407 5. Using Tables ������������������������������� 408 6. Known Limitations �������������������������� 408 7. Including Images ���������������������������� 409 Appendix C | Image Dimensions ��������������� 410 1. iPad ��������������������������������������� 410 2. Android������������������������������������ 417 3. HTML Store �������������������������������422 4. HTML5 Reader App ������������������������422 Appendix D | Working With Widgets ����������� 424 1. File Format ��������������������������������� 424 2. File Structure ������������������������������� 425 3. Creating the manifest.xml File ����������������� 425 4. Making the Widget Available ������������������ 427 Appendix E | The DMSettings File ������������� 428 1. File Structure ������������������������������� 428 2. Features by Platform ������������������������ 429 3. Overview ���������������������������������� 439 3.1 Share Toolbar Settings �������������������� 439 3.2 Store Settings ���������������������������� 440 3.3 Navigation Settings ����������������������� 441 3.3.1 Color Settings ������������������������� 444 3.3.2 Font Settings�������������������������� 446 3.4 Intents Settings��������������������������� 448 3.5 TOC Popup Settings ���������������������� 448 3.6 Bookmark Popup Settings ����������������� 449 3.7 Hotzone Settings ������������������������� 449 3.8 Flipview Settings ������������������������� 450 3.9 Library Settings �������������������������� 451 3.10 Metrics ��������������������������������� 452 3.11 Content �������������������������������� 453 3.12 Resolution ������������������������������ 453 3.13 Tracking �������������������������������� 454 3.14 Web Element Popup ��������������������� 454 3.15 Newsstand ����������������������������� 455 Appendix F | Using the Content Delivery Platform ������������������������ 456 1. Logging In and Logging Out ������������������ 456 2. System Structure ��������������������������� 457 2.1 Accessing the Components ���������������� 459 2.2 User Types ������������������������������ 460 3. Setting Up the CDP Environment �������������� 463 3.1 Adding a Domain ������������������������� 463 3.2 Adding a Reader Application ��������������� 464

1 Configuration Settings ��������������������� 506 3.2 Adding an Issue in Segments ������������ 468 3.5 Managing Subscriptions ������������������� 486 4.8.8.5 Text ������������������������������������ 516 3.3 Deleting a Segment �������������������� 480 4.4.4.4.1 Opening Issues Directly From the Store ������ 504 3.1 Adding a User ������������������������� 495 xii 4. Submitting and Approval Cycles �������������� 531 Appendix I | Gestures API ��������������������� 532 Appendix J | Navigation API �������������������534 1.2 Deleting an Issue ���������������������� 476 4.9.9.4 Adding a Rendition ��������������������� 477 4.5.5.3 Adding a User ���������������������������� 465 3. Progressive Downloads ���������������������� 496 6.9 A Mixed Subscription Environment ���������� 528 Appendix H | Tips and Best Practices ����������530 1.6.2 Removing Converted Content ����������� 490 4.1 Custom Traffic Variables ������������������� 546 3.2 Editing a User Profile ������������������� 495 5.5.3 Adding a Subscription ������������������ 471 3.6 Language ������������������������������� 518 3.2 Managing Issues ������������������������� 475 4.1 Configuring Reader Apps ������������������ 473 4.1. Events������������������������������������� 550 6.3 Editing an Issue ����������������������� 476 4.7 iTunes Subscription Environment ������������ 519 3.3 Colors ���������������������������������� 513 3. Required Tools ����������������������������� 498 2.7.6.1 Adding a Full Issue ��������������������� 466 3.2 Adding to an Existing Issue �������������� 479 4.2 Text ���������������������������������� 521 3.4. Structure ���������������������������������� 534 2.3. Prerequisites ������������������������������� 542 2.4 Fonts ����������������������������������� 515 3.2 Custom Conversion Insight Variables �������� 547 3.8 Sending a Push Notification (Message) ������� 492 4.1 Adding Subscription �������������������� 486 4.4 Sorting Subscriptions ������������������ 487 4.1 Page Design��������������������������� 521 3.5.1 A Sign In/Sign Out Button ��������������� 525 3.1 Adding a Development Device ����������� 490 4.1 Adding to a New Issue ������������������ 478 4.4 Managing Renditions ���������������������� 482 4.4 Adding an Issue �������������������������� 465 3.2 The Subscription Offer Page ������������ 527 3. Reader App Configuration �������������������� 548 5.8.5 Convert to HTML5 ��������������������� 478 4.5.8. Setting Up SiteCatalyst ���������������������� 546 3.2 Convert to HTML5 ��������������������� 484 4.2 Changing the Color �������������������� 517 3.8.2.4.4.7.7 Managing Development Devices ������������ 490 4. Viewing Data ������������������������������� 543 3.1 Configuring the Metadata���������������� 475 4.7.3.6 Managing HTML5 Conversions ������������� 488 4.4 Editing an Segment �������������������� 480 4. Project Files �������������������������������� 505 3.3 Editing an Subscription ����������������� 487 4.3.3 Editing a Development Device ����������� 491 4.3 Managing Segments ���������������������� 478 4. The Store ���������������������������������� 499 2.8 Non-iTunes Subscription Environment ������� 525 3.3.4 Editing an Rendition �������������������� 485 4.2 Sending a Newsstand Notification �������� 494 4.1 Sending a Message to Users ������������ 492 4.1 Converting to HTML5 Format ������������ 489 4.7.4 Subscription Buttons ������������������� 523 3.3 Text Styling ��������������������������� 522 3.5 Adding a Rendition��������������������� 481 4.4.3.7.1 Tracks ���������������������������������� 552 .2.3 Custom Success Events ������������������� 548 4.9 Managing Users �������������������������� 495 4.2 Deleting a Development Device ���������� 491 4.2.3 The Subscription Button Area ����������� 527 3.1 Changing the Text ��������������������� 516 3.2 Deleting a Subscription ����������������� 486 4.2 Images���������������������������������� 507 3.3. Generating IDs and Keys ��������������������� 530 2. Managing the CDP Environment �������������� 473 4. Variables ���������������������������������� 552 6.1 Adding an Issue ����������������������� 475 4.5.3 Deleting a Rendition �������������������� 485 4.7.2.1 Adding a Rendition ��������������������� 483 4.2.Contents 3. Classes������������������������������������ 536 Appendix K | Omniture Integration ������������� 542 1. Magazine Encryption ������������������������ 497 Appendix G | Customizing the HTML Store �����498 1.5 Adding a Development Device �������������� 472 4.6 Sorting Segments ��������������������� 482 4.7.

Variables Sent with all Tracks������������������ 559 Appendix L | Subscription Server Integration ���560 1.2 Configuring the Content Delivery Platform ���� 563 Appendix M | iTunes Subscription Server Integration����������������������564 1.1.2. Jackson Java JSON-processor ���������������580 xiii .1.1. Generating a Shared Secret �������� 570 Step 2.1.2.0. The Subscription Environment ������������ 565 Step 1. The MyAccount Page ������������� 566 Step 1.2 Track Links ������������������������������ 554 7.2 Subscription Server �������������������� 562 1.1.1 Web Pages ���������������������������� 561 1.1. Web Pages ������������������������� 565 Step 1.1 Configuring the Subscription Environment ���� 561 1. iTunes Subscription Server ������������ 568 Step 1. android-plist-parser ������������������������� 579 2. Configuring the Reader App ������������� 571 Appendix N | Reader App Features Comparison���������������������572 Appendix O | Licenses ������������������������578 1. Steps To Follow ����������������������������� 564 Step 1. Adding the Subscription Offers ������ 569 Step 1.2.2. The Subscription Offer Page �������� 566 Step 1. Steps To Follow ����������������������������� 560 1.0. Configuring the CDP ������������������� 570 Step 3.Contents 6.

its chapters Creating Content and Exporting Content can now be found in the Reader App User Guide which you are reading now. The target audience for this user guide is the WoodWing Partner who uses the documentation to train the customer/end user in all facets of digital magazine publishing. 1. Purpose and Target Readers This user guide explains the process of using the Reader App. as well as customizing. and how to get additional support or provide feedback. how to use it. the Digital Magazine Tools User Guide has been discontinued. building and distributing the app. 1 . For that reason. creating content for it.01 Introduction The following sections explain the purpose of this manual.

For more information about installing and configuring such an environment.3/7. A tab in the margin of the page will indicate the section that the chapter belongs to.0. 2 .4 iPad Reader App version 2. the process is discussed in different sections of this user guide.0 Content Delivery Platform current version 4.1 Android Reader App version 1.13/7.3 (Froyo) Android Reader App version 1. this means that the chapter applies to all types of platforms.Chapter 01 Introduction 2. Working Environment It is assumed in this user guide that a fully working Enterprise environment is set up for working with Digital Magazines.3/7. 4.4 Content Station 7. If no tab is present.3 (Honeycomb) HTML5 Reader App version 1. see the Enterprise 7 Admin Guide.1 Sections The Reader App can be customized for and distributed to different platforms: As a dedicated Reader App for the iPad As a dedicated Reader App for Android As a dedicated Reader App for use within a 3. and some of the features that allow you to navigate the PDF if you are reading it on screen.3 Digital Magazine Tools plug-ins 7. Product Versions This user guide is based on the following product versions: Enterprise Server version 7. Using This User Guide Please read the following sections to familiarize yourself with some of the symbols and terminology used in the user guide.4 Smart Connection 7. devices HTML5 Web browser Because the method of customization and distribution is significantly different for each platform. each with dedicated chapters.

adobe.2 Icons Various types of note icons are used in this manual. immediately open the page. The PDF you open contains all chapters and sections. The bookmarks panel displays automatically when opening it. Bookmarks Panel. Adobe Reader can be downloaded for free from www. Their purpose is as follows: An important note on a feature or action A tip to improve your workflow A feature new to this version 4. These are used to refer to other sections in the manual. view the PDF in Adobe Acrobat or Adobe Reader. Click on a chapter or section title to immediately open the page. 3 . Displayed in gray. When active.Chapter 01 Introduction 4. Click on a page thumbnail to Hyperlinks. italic font. Pages Panel. clicking it will forward you to another section within the manual or open a Web site. click on a title to automatically display the page. Click on a page number following an index entry to immediately open the page. Index. the following interactive tools are available: Contents. Web sites or other external sources. To assist you with navigating the PDF version of this user guide and to aid you in quickly finding the section that you are after.3 Navigating the PDF To get the most out of this user guide.com.

Feedback Most of your questions about how to use.apple.net/forum/index (user account required).woodwing. visit our Community Forum: http://community. please send an e-mail to documentation@woodwing.Chapter 01 Introduction 5.pdf. Should you have any questions or feedback about any of the Enterprise products. Additional Documentation This user guide frequently refers to the iTunes Connect Developer Guide. For any comments. corrections. 6. hints and background information.com under the Support section. customize and distribute the Reader App should be answered in this user guide. It provides answers to Frequently Asked Questions as well as tips. please visit our Knowledge Base first.woodwing. or other types of feedback relating to this user guide.com/docs/ iTunesConnect_DeveloperGuide.com. 4 . For any additional queries. The Knowledge Base is available at WoodWing’s Web site www. This can be downloaded from the following location: https://itunesconnect.

its functionality. This chapter gives a brief overview of the versions available. 5 . and the new features and changes of the latest release. the method of distribution.02 About the Reader App WoodWing’s Digital Magazine Reader App is a highly functional. highly customizable application for viewing digital magazines created with WoodWing’s Digital Magazine Tools. ways of customizing.

the magazine content is downloaded separately after an issue has been purchased (or obtained for free). Only one Reader App is required to read all issues of the magazine. each magazine issue is distributed as a separate Reader App. See also section 3. Apple Subscriptions: same as the Pro and Framework projects but with additional Apple Subscription functionality. each magazine issue is distributed as a separate Reader App. Only one Reader App is required to read all issues of the magazine. The Library functionality allows the user to view all downloaded issues and choose which one to read. Standard projects but with additional Store and Library functionality. Library and Subscription functionality and therefore needs to have the magazine content included. This project comes without the Store. Subscription: same as the Pro and Library and Subscription functionality and therefore needs to have the magazine content included. Framework projects but with additional Subscription functionality. This project includes Pro and Framework: same as the Basic and HTML5 projects Basic.Chapter 02 About the Reader App 1. Library and Subscription functionality and therefore needs to have the magazine content included. The Library functionality allows the user to view all downloaded issues and choose which one to read. The Apple Subscriptions project can be used to offer Apple Auto-renewable subscriptions only. 6 . the magazine content is downloaded separately after an issue has been purchased (or obtained for free). or combined with non-Apple Subscription services. Available Projects The Digital Magazine Reader App is available in the following types of projects: Android projects Basic and Standard. This project comes Apple iPad projects Basic and Standard. allowing users to subscribe to a publication via the iTunes subscription functionality. Pro and Framework. These come without without the Store. the Store. Ways of Customizing for information about customization and available licenses. each magazine issue is distributed as a separate Reader App. allowing users to subscribe to a publication. Library and Subscription functionality. Store.

and a Page Scrubber to quickly browse through the magazine content. S u b s c r i p t i o n f u n c t i o n a l i t y ( P r o. shows. 3. Apple Subscription projects only) for viewing and downloading separate issues. Ways of Customizing The Reader App can be customized2 to reflect the look and feel of your publication. audio. Customizing the Android Reader App. Su bsc r iptio n.1 be added on many levels. as per this user guide. and For a detailed overview of what can be customized and how this can be done. Subscription. Framework. App using the Standard/Basic project. A Library (Pro. 1 Not available on the HTML5 Reader App. Some of the functionality includes: Navigational tools such as a Navigation bar. Customizations and licenses Customizations. Widgets. for instance by the use of API calls (iPad Reader App only). Standard/Basic: you are allowed to build 1 For a detailed overview of all the features and how to use them. see chapter 4.1 Customizing the iPad Reader App. Web Elements. and Scrollable Areas. Additional functionality can The extent of customization which you are allowed to do is determined by the purchased license: Basic/Pro: you are only allowed to change the App icon and name. and Apple Subscription projects only) for viewing available issues.Chapter 02 About the Reader App 2. 7 Differences in the number of possible customizations exist between the Reader Apps for the iPad and Android. Some of the customizations which can be made include: The app icon and name Icons used for buttons The text as it appears in the app Colors of text and backgrounds Fonts used in specific places of the Reader Table of Contents List. Customizing the HTML5 Reader App. Reader app embedment in custom applications. For the HTML5 Reader App: chapter 11. 2 . slide App A Store (Pro. see the following chapters: For the iPad Reader App: chapter 7. a nd A p p l e Subscription projects only) for viewing issues available as part of a subscription. Framework/Subscriptions/Apple Subscrtiptions: you are allowed to fully customize the App. aimed at providing the best reader experience. Dynamic content such as video.1 Fra m ewo r k. Using the Reader App. Hotspots. and more. Subscription. Forward and Back buttons. Framework. For the Android Reader App: chapter 9. Functionality The Reader App contains a multitude of different features and functionality.

When distributing a Reader App including the content. the user chooses which issue to purchase2. the Reader App is downloaded (typically for free and without content) from the app store. the magazine content can be accessed straight away. the user will have to download a new Reader App for each published issue. Distribution Publishing a digital magazine to a digital device is done by distributing the WoodWing Reader App with which the magazine can be viewed.1a. Reader App including magazine content app store included1 is downloaded at a later stage For the first method. the user can use the built-in Store functionality of the Reader App to first see which issues are available for that publication and view a preview of that issue. both are downloaded from an app store as a single download The process of distributing the Reader App separate from the magazine content involves more steps: first. you have the option to distribute a Reader App in two different ways: A Reader App with the magazine content A Reader App in which the magazine content 4. For the second method. As a publisher.1 Getting the Content on the Device For a Reader App which has the magazine content included. the process of getting the magazine onto the digital device is straightforward: the magazine and Reader App are downloaded from an app store as a single download. each magazine issue is downloaded as a separate app. This method requires only one Reader App to be downloaded on the digital device for each title. Note that the Android Market only allows apps to be uploaded with a maximum file size of 50MB. the user can use the built-in Library to view all available issues. the magazine content is downloaded from a dedicated Content Delivery Platform. 1 Issues can also be offered for free.) All downloaded issues can then be viewed using the same Reader App. but the process of downloading these separately is the same. Once the purchase process is complete. download those that are of interest. The actual magazine content can subsequently be downloaded onto the digital device as a separate step. and open it for reading.1b on the next page. Tablet Figure 4. (See figure 4. For this method.Chapter 02 About the Reader App 4. 2 8 . each appearing as a separate app on the digital device. By using the Store functionality of the Reader App.

Chapter 02 About the Reader App 4. Distributing Reader Apps Without Store. this is the only way of offering content to the user. see chapter 13. the following distribution models are available: app store Complete magazine. see chapter 14. S u b s c r i p t i o n .1b. while the content is retrieved separately from a Content Delivery Platform Single purchase. Figure 4. 9 . When distributing a Reader App without content. Reader App without content For Reader Apps without Store functionality. The user decides which segment to download and in which order. In segments. For more information about distributing the Reader App with Store functionality. All magazine content is made available in one download. the following payment models are available: Content Delivery Platform Free of charge. downloading time is reduced. ( R e a d e r A p p s w i t h For more information about distributing a Reader App without Store functionality. Subscription functionality only). When it comes to selling the magazine.2 Distribution and Payment Models As far as distributing the magazine as a package is concerned. Magazines can be offered as a single purchase. the empty Reader App is downloaded from an app store. Distributing Reader Apps With Store. Magazines can be offered as part of a subscription service. Filters in the Store and Library allow the user to filter on segment type. (Reader Apps with Store funcTablet Magazine content tionality only) The magazine is made available in different segments. Magazines can be offered fully free of charge. Since the file size of each segment is smaller than the size of the complete magazine.

The location of all drawables has also been changed.1 New Features The following sections describe the new features which have been introduced per platform. The changes are as follows: The hdpi folder is no longer used for Froyo.2).1 Android Reader App The following new features have been implemented in the Android Reader App v1. 5. a Reader App build with SDK Platform Android 3. SDK version 3. All drawables shared between Honeycomb and Froyo are located in the drawable-nodpi folder. New Features and Changes The following sections describe the new features and changes for the current release. the frameworks now contain drawables for both Honeycomb and Froyo. SDK Platform 2.0 API 11 will also run on a Froyo device.1. 5.3: Universal Builds The Android Reader App v1.2 API 8 is no longer required.3 runs on both a Honeycomb and Froyo device. Any Honeycomb-specific drawables are located in the drawable-nodpi-v11 folder.2 Any Froyo-specific drawables are located in 10 . The mdpi folder is no longer used for Honeycomb. As a result of this change. SDK 2. the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1.Chapter 02 About the Reader App 5. Although the same app.0 the drawable-nodpi-v8 folder.

Account button is context sensitive The My Account button (in the Navigation bar and Action bar respectively). see chapter 9.3. Story vs Page Navigation. These interactive objects can now be made accessible through a DMSetting. a list connecting to a database. a 3D object. For information about configuring/customizing the progressive download feature. For more information. Customizing the Android Reader App – section 8. The functionality of the element is completely upon the developer.7. it can be an extra user interface element. For more information. Customizing the Android Reader App – section 11. Auto open magazine An issue or Segment can now be opened automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads).Chapter 02 About the Reader App The drawable-hdpi. Customizing the Android Reader App – section 11. Android. 11 . etc. Scrolling Indicators.2. the top and bottom sides of the frame become faded. etc. For information about using the progressive download feature.4. For example: for Scrollable Areas in which the content can be scrolled horizontally. When interactive objects (such as Slide Shows. For more information. see chapter 9. When enabled. the edges of the frame on those sides to which the content can be scrolled appear faded. the left.1. 3rd-party functionality can be included in the magazine. videos. but only enabled when the Store is accessed.2. their functionality cannot be accessed because of the overlaying Hotzone area. see appendix C. see chapter 9.6. Downloading Methods. For more information. drawable-mdpi and draw- able-ldpi folders still exist but only contain the app icon. Gestures Honeycomb: this button is only displayed A two-finger swipe can now be used for navigating to the first page of the next story (Page navigation only). when the Store is accessed.and right-hand sides of the frame become faded. for Scrollable Areas in which the content can be scrolled vertically. Customizing the Android Reader App – section 8. Hotzones overlaying interactive objects Progressive download support Support for progressive download is now available.) are placed within the area of a Hotzone. Hotzones. see chapter 4. see chapter 9. responds to the context of the Reader App: Froyo: this button is displayed at all times. Using the Reader App – section 12. Scrolling indicators Custom objects Objects with custom. Progressive Downloads. For a complete overview of which images are used on a unique platform and which are used on both platforms. This functionality can be controlled through a DMSetting. see chapter 9.3. This functionality can be controlled through a DMSetting. Customizing the Android Reader App – section 11. This functionality can be controlled through a DMSetting. Image Dimensions –section 2. Progressive Download Method. Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content.

Story bullet display in Flipview Including or excluding Story bullets in the Flipview can now also be controlled for the Honeycomb version of the Reader App. Including or excluding the page number in the Flipview (for both the Froyo and Honeycomb version of the Reader App) can now be controlled through a DMSetting. Customizing the Android Reader App – section 8. This functionality can be set through a DMSetting.4.4. Customizing the Android Reader App – section 8. Action bar (Honeycomb): chapter 9.2. For more information.Chapter 02 About the Reader App History buttons as DMSetting The History (Back/Forward) buttons can now be included or excluded from the toolbars through the ToolbarItems DMSetting. For more information. Customizing the Android Reader App – section 8. Story Viewer / Page Viewer. Items. Flipview. Customizing the Android Reader App – section 8.2. For more information.2. Page number display in Flipview The Froyo version of the Reader App now also displays page numbers in the Flipview. see chapter 9. Customizing the Android Reader App – section 8. Story Viewer / Page Viewer. see chapter 9. Items. see: Top Toolbar bar (Froyo): chapter 9. Items.4. see chapter 9.5. Maximum number of items displayed in Action bar The maximum number of items to appear on the righthand side of the Action bar can now be controlled by a DMSetting (up to a maximum of 6). For more information. For more information.3.4.3. 12 .2. Auto open Flipview on toolbar display The Flipview can be made to appear automatically when the Navigation bar/Action bar is displayed. see chapter 9. Customizing the Android Reader App – section 8.

Building the iPad Reader App – section 1. Using the Reader App – section 6. see appendix F. see chapter 4.1. Customizing the iPad Reader App – section 9. For information about using the Newsstand feature. An App Without Newsstand Functionality. When using any of these projects and when not making use of the Newsstand functionality. For information about removing the Newsstand functionality from a project.8.3 Content Delivery Platform iOS 5 Newssstand support The Content Delivery Platform can now be used for sending notifications to the Apple iOS 5 Newsstand. Using the Content Delivery Platform – section 4.11 Newsstand (iOS5).2 From Within the Newsstand.2 Sending a Newsstand Notification.Chapter 02 About the Reader App 5. For information about configuring the Reader App for use with the Newsstand. For more information. the Newsstand functionality needs to be removed from the project. Newsstand apps must offer at least one autorenewable In-App Purchase subscription. Support for iOS 5’s Newsstand functionality is included by default in the following projects: Pro Framework Subscriptions Apple Subscriptions 5.2 iPad Reader App iOS 5 Newssstand support The iPad Reader App now supports Apple’s iOS 5 Newsstand feature: a dedicated folder on the springboard of the iPad through which magazine and newspaper issues can be accessed.1. 13 .3. see chapter 7. informing it that a new version of an issue is available. see chapter 8.

app_name’ no longer exists. The image used for the top bar (situated between the Action bar and the top Library shelf). back_grey. Message appear- Apparently the launcher on the Android Honeycomb version (always) uses the hdpi version of the icon. mdpi and hdpi version of their application icon. In previous versions. The Back button of a Web library_top_bar. For more information. both the package name in the AndroidManifest. Customizing the Android Reader App – section 7.png. previewshadowportrait. The shadow as Customer project shown below the Library toolbar (Froyo version). shadow between the issue information pane and the issue preview pane (landscape orientation). see chapter 9. only the AndroidManifest. Customizing the Android Reader App – section 8. The Renaming Reader App In order to rename the Reader App. The cover story title. The shadow between the issue information pane and the issue preview pane (portrait orientation). see chapter 9. Action bar.xml file has to be changed.woodwing.png. see chapter 9. previewshadowlandscape. the Newsfeed and Custom button have been moved to the left-hand side of the bar.java file had to be changed.woodwing.1.png. even on mdpi devices.3: Drawables made obsolete The following drawables have been made obsolete: headerbarshadow. Element in its non-available state. Successfully logged out.png. Customers should therefore always create an ldpi.2. Strings made obsolete Creation of app icon in high dpi The following strings have been made obsolete: Cover story. The latter is no longer necessary/possible.png.Chapter 02 About the Reader App 5.xml file needs to be modified (previously the com.3. ing after user has successfully logged out of the Subscription account.xml file as well as the package name of the DigiMag. 14 . For more information. The file DigiMag. Buttons moved in Action bar In the Action bar in the Honeycomb version of the Reader App. Customizing the Android Reader App – section 7. only the package name in the AndroidManifest.java that used to exist in the project ‘customer�app’ under the package ‘com. For more information.2 Changes The following changes have been implemented in the Android Reader App v1. Reader App Name.[app name] file also had to be modified). Reader App Drawables.png.

Chapter 02 About the Reader App Strings made obsolete The following strings have been made obsolete: <string name=”logged_out”>Successfully logged out.</string> <string name=”action_feed”>Newsfeed</string> <string name=”action_custom”>Custom</string> 15 .

Page Orientation When reading a magazine on a digital device such as the Apple iPad or Samsung Galaxy Tab using a dedicated Reader App. left) or in portrait orientation (vertical. and how this affects the way the content is presented to the reader as well as the way it should be navigated. and the same interview in the form of a video on a single page in landscape mode). it is important to be aware of the methods in which the content itself can be displayed.03 The Concept Before delving into the specifics of creating. right) For each orientation a different page is loaded. using. or in portrait orientation when the device is held vertically. This chapter outlines the different types of pages that can be created. The same page can be viewed in landscape orientation (horizontal. thereby offering the possibility of styling both pages differently and/or offering a different page count or content type for each (for instance offering a three-page interview in the form of an article in portrait mode. page orientation can follow the device orientation: content is viewed in landscape orientation when the device is held horizontally. Figure 1. and distributing the Digital Magazine Reader App and its content. 16 . 1.

Chapter 03 The Concept 2. Content set up as separate pages (left). The page exactly matches the dimensions of the screen of the device on which it is viewed. the following applies: For the first method. (See figure 2a to the right. Figure 2a. Content set up as one continuous page (left) allows the page to be scrolled up or down in the Reader App without it positioning itself to a fixed position (right) 17 . but the page height is taller than the height of the device. the next or previous page of a story can be displayed by sliding the page up or down (iPad) or left/right (iPad or Android) by using a quick finger swipe. a single-page story can be created. appears and behaves as separate pages on the digital device (right) For the second method.) As far as navigation goes.) 2. the page can be Figure 2b. he or she can choose from one of two page dimensions: 1. Using this method. Using this method. Page Dimensions When a designer creates a page. The page width matches that of the device. scrolled continuously and stopped at any place (much as you would browse a Web page). The page will automatically position itself to fit the screen. (See figure 2b to the right. a story containing multiple pages can be created.

see chapter 4. Navigation is done as follows: Stories A Story is just that: a story about a particular topic such as an interview with a prominent member of the public. a trip report. the user swipes horizontally (from left to right or right to left) using two fingers To navigate from one page or story to For desktops (HTML5): for the iPad Reader App. in which case the story is always a single-page story. To navigate from one page to another. Page navigation. or uses the keyboard Page navigation. whereas any pages within a story are placed above each other. In this configuration. The way that these stories and pages are displayed is determined by the way that the Reader App is configured. To see how each method is displayed in the Reader App itself.Chapter 03 The Concept 3. the user clicks on the navigation bars. Stories. and segments. (Default configuration Reader App only). pages. not available in the Android Reader App) In this configuration. drags the page with the mouse. a product review. another. the user swipes Unless the page is taller than the height of the device. Sections and Segments The Digital Magazine Reader App works with the concept of stories. not available in the Android Reader App) Navigation is done as follows: To navigate from one story to another. Using the Reader App. Pages. This has a direct effect on the way the user navigates the magazine: Story navigation. (iPad Reader App only. pages of all stories are placed next to each other. Android): user swipes horizontally (from left to right or right to left) using one finger Pages To navigate from story to story (iPad A story can consist of just a single page or multiple pages1. the For touchscreen devices (iPad. The following configurations are possible: Story navigation. 1 18 . stories are placed next to each other. sections. etc. the user swipes horizontally (from left to right or right to left) vertically (up/down or down/up) To navigate within a story. all The above concept is displayed in the figures on the following pages.

etc. The Section Viewer shows all sections of a magazine Segments (iPad Reader App only) Segments are similar to Sections. 19 . Because only a small part of the magazine is downloaded instead of the full magazine in one go. finance.Chapter 03 The Concept Sections Stories that share similar content can be grouped together by assigning them to the same section (such as fashion. making it possible to download each segment individually. Figure 3a. but the magazine itself is physically split into different parts. sports. but now the grouping is not done within the magazine. Both the Store and the Library can be filtered to show content that belongs to a particular segment only. This allows the user to decide in which order to download each part of the magazine. the first page of the first story in that section is shown. the download size per download session is also reduced.). The Section Viewer in the Reader App allows the user to quickly navigate to a particular section: when a user taps a section.

depending on the setup). Vertical navigation is available to view each page.) Vertical navigation is available by swiping the page. each exactly matching the device dimensions. This navigation method is referred to as Story Navigation. Story B is made up of a layout containing two pages.) The user would swipe horizontally to navigate between each story. the user would swipe vertically to navigate the content (either from page to page or scrolling within the page. Within the story. 20 . Story C is made up of a layout containing a single page which has been made taller than the height of the device. (Note that these layouts would be located in the same Dossiers as their portrait counter parts as shown in figure 3c on the next page. Story A is made up of a layout with a single page (in this case the cover) matching the device dimensions exactly. No vertical navigation is available. This figure shows the default navigation method. Three stories are shown containing layouts in landscape orientation. in which stories (represented by their Dossiers) are accessed by swiping horizontally and pages by swiping vertically. (A typical use for such a page is the table of contents page. as shown here.Chapter 03 The Concept Story A Layout A1 Story B Layout B1 Story C Layout C1 Layout C1 Vertical navigation within the story Page 1 Vertical navigation within the story Page 2 Page 1 Page 3 Horizontal navigation between stories Figure 3b.

this figure also shows the default navigation method. depending on the setup). Stories (represented by their Dossiers) are accessed by swiping horizontally and pages by swiping vertically. not shown here). (A typical use for such a page is the table of contents page. the user would swipe vertically to navigate the content (either from page to page or scrolling within the page.) The user would swipe horizontally to navigate between each story. Vertical navigation is available to view each page. This navigation method is referred to as Story Navigation. Story C is made up of a layout containing a single page which has been made taller than the height of the device. . No vertical navigation is available. as shown here. (Note that these layouts would be located in the same Dossiers as their landscape counter parts as shown in figure 3b. 21 Story A is made up of a layout with a single page (here: the cover) matching the device dimensions exactly.) Vertical navigation is available by swiping the page. but now for pages in portrait orientation. An alternative display method for Story C is the Text View (a viewing mode in which the article text is scalable.Chapter 03 The Concept Story A Layout A1 Story B Layout B1 Story C Layout C1 Layout C1 Vertical navigation within the story Page 1 Vertical navigation within the story Page 1 Page 2 Horizontal navigation between stories Figure 3c. Three stories are shown containing layouts in portrait orientation. Similar to the previous figure. Story B is made up of a layout containing two pages. Within the story. each exactly matching the device dimensions.

Vertical navigation is only available when the page length exceeds the device height. 22 . as shown here. not shown here). this figure also shows the alternative navigation method. Similar to the previous figure. An alternative display method for Story C is the Text View (a viewing mode in which the article text is scalable. (A typical use for such a page is the table of contents page.) Story A is made up of a layout with a single page (here: the cover) matching the device dimensions exactly. Story C is made up of a layout containing a single page which has been made higher than the height of the device. each exactly matching the device dimensions. Three stories are shown containing layouts in landscape orientation. This navigation method is referred to as Page Navigation.Chapter 03 The Concept Story A Layout A1 Story B Layout B1 Story C Layout C1 Page 2 Page 1 Horizontal navigation between pages Vertical navigation within the story Page 1 Horizontal navigation between stories Figure 3e. (Note that these layouts would be located in the same Dossiers as their portrait counter parts as shown in figure 3c on the previous page. No vertical navigation is available.) Vertical navigation is available by swiping the page. All stories and pages are placed next to each other and are accessed by swiping horizontally (available in the iPad Reader App only). Story B is made up of a layout containing two pages. No vertical navigation is available. but now for pages in portrait orientation.

Reader App Features Comparison. 1. The HTML5 Reader App is designed for viewing in a Web browser. or because the development of one Reader App is not yet as advanced of another. This chapter provides an in-depth overview of how the Reader App works and how it should be used by its users. Throughout this chapter. unless otherwise stated. a magazine viewed on an iPad is shown. The concept will be the same when using an Android Reader App. Using the HTML5 Reader on a PC. Using the Reader App on a desktop PC/laptop is slightly different from using it on a touchpad device since the mouse or keyboard is used. These differences could be because features are specific to a particular platform. see section 17. 23 .04 Using the Reader App A good understanding of the Reader App components and how they work is essential for customizing the app. For a summary of the differences. While they share most of the functionality. primarily aimed at viewing on a desktop PC or laptop (although it can also be viewed in a suitable Web browser on a touchpad device). see appendix N. differences also exist. Features by Platform Various versions of the Reader App exist (for iPad. Android devices and for HTML5 Web browsers). For a comparison of each Reader App feature and their availability for each Reader App version.

displaying the full size of the page. Depending on the device and application you are using to view the magazine. Viewing a magazine in a Web browser using the HTML5 Reader App 24 . or a status bar that is part of the device is shown.x (Froyo). Basic Viewing When viewing a magazine in its most basic view. Figure 2a. the full page is shown. iPad Reader App When viewing a magazine using the Reader App on an iPad. Android Reader App on Froyo HTML5 Reader App When viewing a magazine using the HTML5 Reader App in a Web browser. When viewing a magazine using the Android Reader App v1. displaying the full size of the page. the iPad status bar is shown at the top of the screen with the Reader application below.Chapter 04 Using the Reader App 2. the page may be shown in full screen. the Notification bar is shown at the top of the screen with the Reader application below. the full page is shown and any available controls are hidden.

b. bottom: Honeycomb version 25 .x (Honeycomb). Basic components of the Android Reader App (top: Froyo version.Chapter 04 Using the Reader App Android Reader App on Honeycomb When viewing a magazine using the Android Reader App v1.c. the System bar is shown at the bottom with the Reader application displayed above it. Basic components of the iPad Reader App Figure 2. A B A B B C A Status bar B Reader A Status bar B Reader C System bar Figure 2.

Verify if the version Google Chrome. the user experience will be less satisfactory. a message can optionally be displayed to inform the user that user experience may be less optimal when viewing the magazine on smaller or lager devices. An update of the Reader App might be required when upgrading to a new operating system. This is because Google Chrome will not allow apps to be run from the file:// protocol due to security reasons. Using Google Chrome of the Reader App fully supports all features and functionality available in the magazine. Before General use. can also access content by using a Web browser. iPad and Android version Reader App version. Safari ver- sion 5 or higher or Google Chrome version 7 or higher should be used. take note of the following requirements: HTML5 version Web browser compatibility. Even though small digital devices such as mobile phones. Requirements To get the best experience out of reading a magazine using the WoodWing Reader App. Reader App is meant for reading on large screen devices such a desktop PC. Other Web browsers are currently not supported.Chapter 04 Using the Reader App 3. requires that the app is installed on a web server. Device metrics. you might need the latest version of the Reader App to make use of the latest features. verify whether the Reader App is supported by that operating system. The HTML5 version of the upgrading your tablet to a new operating system. Operating system compatibility. iPods. If the magazine publisher has designed the content for use on a device with a specific size. etc. Android devices come in many different sizes. laptop or large digital devices such as the iPad. (Android Reader App only) 26 .

and left-hand side of the screen)1 or “pillarboxing” (resulting in black bars appearing along the top and bottom of the screen)1 will be made to fit the dimensions of the screen exactly. it is likely that the pages will not properly fit the screen. Magazine publishers can determine how the page should be made to fit the screen for these circumstances (Android devices only): Fit width. On a device which is smaller than the page dimensions.1 Fit screen. The page Note that only pages which are made to fit the screen are affected. This could result in the content of the page looking stretched or squashed. this can result in “letterboxing” (resulting in black bars appearing along the right. If the aspect ratio (width versus height) of the screen is different than the ratio for which the page was designed. 1 27 . screen. The page will be scaled to fit the Fit screen disproportionately.Chapter 04 Using the Reader App 4. This might result in having to scroll vertically to see the rest of the page. pages which are designed to be taller than the screen height are not made to fit the screen. the page is scaled down to fit the width of the screen. With a multitude of Android devices becoming available — with a similar multitude of dimensions — it is possible to find yourself in such a situation when using an Android device. Page Scaling When a magazine is read on a device for which it has not been designed (in terms of dimensions).

the magazine cover is shown. the Reader App restores itself to the last viewed magazine page when the app is closed while the user was reading a magazine. the restoring state behaves slightly different (or perhaps not as initially expected): When the user closes the shell application The Store is accessed. when accessing the magazine after having read the magazine. Restoring the Reader App state HTML5 Reader App: open a Web browser As mentioned above. after which the behavior is the same as described above. one of the following will happen: The magazine is accessed straight away. When accessing the magazine for the first time. the Reader App can subsequently be accessed by tapping a dedicated button. This is optional functionality for those Reader Apps which have Store functionality. This shell displays information related to the magazine content. those Reader Apps which have Store functionality and in which no magazine issue has been downloaded yet. and access the correct URL. This method is for instance used by TV Guides where first a Web page is shown with current TV channel information. Reader Apps which do not have Store functionality always function this way. which acts as the shell for the Reader App. The Reader App is made part of another application. an issue for that magazine needs to have been downloaded and opened first. do one of the following: iPad Reader App: tap its icon on the Home screen of the tablet or from within the Newsstand (iOS 5 only). the Reader App tries to restore the state of the screen as it would in a normal environment. it will open to the last viewed page. application. or for those Reader Apps which have been configured in such a way that the Store is always opened when the app is launched.Chapter 04 Using the Reader App 5. When the Reader App is closed by the shell A different application is shown first. To see this behavior on Reader Apps which do have Store functionality. The iPad Reader App also restores itself to the following states: Store Library Library Segments Overview Depending on the type of Reader App and/or the way it has been configured. after which the magazine can be accessed to read articles related to the world of TV and movies. 28 . Accessing the Reader App To access the Reader App. This is the case for and subsequently resumes the app from the background. states are not restored. When DMExternal is used (meaning that the Reader App is part of another application).

This is the case for Reader Apps with Store functionality. Apps which do not have Store functionality. (Or in the case of a HTML5 Reader App: accessing a different URL. Using the Library.) For Reader Apps with Store functionality an issue is also accessed straight away. the magazine issues can be accessed in one of the following ways: Instantly. Using the Store. This is the case for those Reader Each is explained in the following sections. 29 . each magazine issue is a different Reader App. see section 13.Chapter 04 Using the Reader App 6. Accessing the Magazine The magazine issue can be accessed in one of the following ways: From within the Reader App itself From within the Newsstand 6. but only when at least one issue has been downloaded first. see section 12. Switching to a different issue is done by closing the current Reader App and opening another one from the springboard/Home screen. For detailed information about how to use the Store. Switching to a different issue/Segment of the magazine can be done by tapping the issue/Segment in the Library. From the Library.1 From Within the Reader App After accessing the Reader App. For detailed information about how to use the Library.

When a Reader App is made part of the Newsstand. When a new version of an issue is available. When an issue is removed. Once received. it is loaded in the background. When a new issue is available. it is not also separately available on a springboard.2b. 1 Figure 6. A Magazine type issue B Newspaper type issue New issues can be made to download auto- matically in the background as soon as they become available. The different ways in which issues can be displayed in the Newsstand Notifications and download initiation Whether or not an issue is made part of the Newsstand is determined by the publisher of the magazine. the publisher sends a notification to the Newsstand. This way the download process does not have to be started manually. a ‘New’ badge is displayed in the top righthand corner of the issue icon In case the Reader App is not yet running. Once all issues for a Reader App have been removed. the Reader App icon is displayed once more. the cover for the last downloaded issue is displayed.com/ios/ios5/features.2a. Displayed icons Initially. the cover of that issue is displayed1. Issues can be displayed in one of two different ways: The icon is not changed when the download is started from the Reader App.Chapter 04 Using the Reader App 6. 30 .html#newsstand.apple. the following actions take place: A badge with the word ‘New’ is placed in the top right-hand corner of the issue icon. Figure 6. see www. For more information about the Newsstand. Once an issue is fully downloaded. Having a Reader App in the Newsstand provides the following benefits: The Newsstand acts as a central location from As a magazine As a newspaper A B which a Reader App can be opened whithout having to locate it somewhere on the iPad first. For issues containing Segments. the Newsstand displays the app icon of the Reader App.2 From Within the Newsstand Apple’s iOS 5 introduces the Newsstand feature: a dedicated folder on the springboard of the iPad through which magazine and newspaper issues can be accessed. the icon of the parent issue is displayed.

the download may be queued. The download is started and the full issue is downloaded in the background. The download process can be followed (and paused/resumed when necessary) from within the Library of the Reader App. all Segments will be downloaded. Take note of the following: Background downloading is performed only through a Wi-Fi connection. (If other downloads are already in progress. turn off the following setting on the iPad: Store > Automatic Downloads. issues can only be done when you are logged in to the account. one of the following scenarios will take place: The Reader App is not in use and is not minimized. The Reader App is started in the background and the full issue is downloaded in the background. As soon as an issue is accessed. Background downloading for subscription To turn background downloading off for the Depending on the state of the Reader App at the time the download request is received. Newsstand. When an issue contains Segments. the ‘New’ badge disappears. The download is 31 . The Reader App is not in use but is mini- mized.) started and the full issue is downloaded in the background. the download may be queued.Chapter 04 Using the Reader App The download of the new issue is started (but see download scenarios below). Download scenarios When the Newsstand receives a notification that a new version of an issue is available.) The Reader App is in use. not through a 3G connection. (If other downloads are already in progress. the download process is started automatically.

1 Hotzones. showing the different sections that have been defined for the magazine. the Story Viewer then acts as the Page Viewer. (See figure 7 on the next page. top Toolbar. allowing the user to navigate the magazine by using the various buttons and tools available.Chapter 04 Using the Reader App 7. the name of the story is shown and (optionally) a short description. The Android Reader App can be configured in such a way by the publisher that the Flipview (containing the Store Viewer / Page Viewer and the Section Viewer) appears automatically when the Navigation bar/Action bar is displayed. link or any part of the page. Each component is explained in more detail in the following sections. The iPad Reader App can also be configured in such a way that all pages of all stories are displayed. The pages shown in the Story Viewer / Page Viewer are thumbnail representations of the first page / all pages of that story. Navigation Tools By tapping the Reader App once at specific places. see section 8. the navigation tools will disappear again. This is presented as an overlay on top of the magazine. or the Action bar appears. When tapping the TOC (table of contents) button in the top Toolbar. the Navigation bar. 1 32 . the Story Viewer appears—showing the first page of each story of the magazine1—as well as the Section Viewer. Note that the Android Reader App always shows all pages in the Story Viewer. When tapping the Contents button in the Navigation bar or Action bar. When tapping a button. Below the first page of each story. the TOC List appears.) For information about which areas of the screen can be used for bringing up the navigation tools.

Chapter 04 Using the Reader App F A C B D C D E A Top Toolbar B TOC List C Story Viewer / Page Viewer D Section viewer E Navigation bar F Action bar Figure 7. right: Android 3. The navigation tools of the Reader App (left: iPad Reader App.0 Reader App) 33 .

) A TOC List Figure 7. Tapping the TOC button in the top toolbar brings up the TOC List G A A D F B C D E F For more information about using the TOC List. the next or previously viewed page.1. (Optional) Typically used for disShare Content button. For navigating to 7. For bringing up the Share Content list.1. (See section 9. This list contains a quick-link to each story in the magazine. For more information. Sharing Content.8 TOC List. Back button B Forward button C TOC List button Audio control button E Bookmarks List button Image icon G Share content button Figure 7.) Bookmarks List button. see section 8. For bringing up the TOC List. used for sharing an external link with other people by e-mail or social media. For bringing up the A Audio Control with which the playback of audio files can be controlled. 34 . (See section 8. Image icon.) playing a logo.0 devices.) section 7. (See Audio Control button.1.9 Bookmarks List.) TOC List.1 Top Toolbar).1 TOC List The TOC List appears when tapping the TOC button in the top Toolbar bar (see section 7.1 TOC List. (See section 11.1. Navigating the Reader App.2 Audio. the top Toolbar is integrated into the Action bar. The top Toolbar can hold the following components: Forward/Back buttons.1.Chapter 04 Using the Reader App 7.1 Top Toolbar On Android 3. The components of the top Toolbar Tapping a button will activate the functionality of the button. For bringing up the Bookmarks List. (See section 8.3 Action Bar. see section 7.

Tapping an icon will activate the functionality of the button. The number of buttons and the order in which they appear is determined by the way the Reader App is configured. depending on the configuration. For accessing the page containing Account. accessing a Web page with custom information such as privacy information. A A G B B H C Forward button Contents button C I D E F G H I J K Back button Help button Buy button D Library button E Cover button F TOC button Newsfeed button J Account button K Custom Figure 7.3 Action Bar. Store. TOC.) Newsfeed. Help.0 devices. (iPad Reader App only) functionality only) For accessing the account details for a subscription. Some of them appear only when an App Reader with a built-in Store is used. (Or any other type of Web page. (Store versions only) For accessing the Library. For navigating to the page that was last visited before tapping the Back button.2. Forward button. The Navigation bar buttons 35 .2 Navigation Bar The Navigation bar holds various buttons for navigating the magazine. (Not available when the Store or Library is displayed. see section 7. Back button. On Android 3. each of which is explained in the following sections. For accessing the page containing the table of contents. For accessing the magazine cover. For accessing the Newsfeed page. Custom. (Android Reader App only) For Buy. (Store versions only) For accessing the Library. (iPad Reader App only) For Contents.) instructions about how to use the Reader App. For more information. while others are optional and/or have to be specifically enabled. Cover.Chapter 04 Using the Reader App 7. (Store versions with subscription navigating to a previously visited page. the Navigation bar is integrated into the Action bar. For accessing the Story / Page Viewer and the Section Viewer.

the user is taken to the page that was last visited before tapping the Back button. the user is returned to a previously visited page.2 The Forward Button When tapping the Forward button. Figure 7. showing all issues that are available for the magazine title. Using the Store. Its functionality is much the same as using the Forward button in a Web browser. 7. the Store appears. see section 12.1 The Back Button When tapping the Back button. The Store shows all available issues for a particular magazine title For detailed information about using the Store.2.3. 36 . Its functionality is much the same as using the Back button in a Web browser.2.2. 7.2.3 The Buy Button When tapping the Buy button in the Navigation bar.Chapter 04 Using the Reader App 7.

2.2. The Library shows all available issues for a magazine title (left). Figure 7. These could be issues which have already been downloaded. This page only shows all available issues of a magazine. accessed by tapping an issue containing Segments. When tapping the Library button on the iPad Reader App. On the iPad Segments that are part of an issue are shown on a separate page (right) 37 . the Library appears. Segments of a purchased issue (Android only). see section 13. showing all available issues of a magazine. the Library Overview Page appears.4 The Library Button When tapping the Library button in the Navigation bar. Segments are displayed on a separate page. For detailed information about using the Library.Chapter 04 Using the Reader App 7. Using the Library.4. or not yet downloaded issues available as part of a subscription.

the Section Viewer and the Story Viewer / Page viewer appears For detailed information about using the Section Viewer and Story Viewer / Page Viewer. The Contents button is not active/available when the Store or Library is displayed. allowing the user to navigate the magazine in various ways. 7. Figure 7.7. When tapping the Contents button. see section 8. 7.2.Chapter 04 Using the Reader App 7.2.6 The TOC Button When tapping the TOC button in the Navigation bar.5 The Cover Button When tapping the Cover button in the Navigation bar. the Section Viewer and the Story Viewer / Page Viewer appears.2. the cover of the currently viewed issue appears. Navigating the Reader App.7 The Contents Button When tapping the Contents button in the Navigation bar. the table of contents page of the magazine appears. 38 .2.

When displayed as an overlay. 39 .Chapter 04 Using the Reader App 7.8 The Newsfeed Button When tapping the Newsfeed button in the Navigation bar. For detailed information about using the subscription features. 7.2. Depending on how the Reader App is configured. the Newsfeed page is either displayed as an overlay or in fullscreen mode.2.10 The Account Button When tapping the Account button in the Navigation bar. an external page is accessed where details of the subscription account to which the user is currently logged in can be managed. 7.9 The Help Button When tapping the Help button in the Navigation bar. the page can be closed by tapping the Close icon in the top-right corner. Typically this will be the Web site of the magazine or publisher. the Newsfeed page appears. the page containing instructions about how to use the Reader App is displayed.1 Store With Subscription Functionality. see section 12.2. when displayed in fullscreen. the page should itself have a close button built in.

The left-hand side of the bar shows the following buttons: Buy. For accessing a Web page with The right-hand side of the bar can show the following buttons: Cover.) Contents.1 Top Toolbar) have been integrated into the Action bar. the Navigation bar (see section 7.3. Newsfeed. (Store versions only) For accessing the Library. table of contents. For accessing the Newsfeed page. For accessing the page containing the Store. Magazine.2 Navigation Bar) and top Toolbar (see section 7. (Or any other type of Web page.Chapter 04 Using the Reader App 7.) custom information such as privacy information. (Store versions only) When an issue is open but not currently being viewed (for instance when the Store is being viewed). (When no issue is open. For accessing the page containing A B C D E K L A B C D E F G Buy button Library button Magazine button Newsfeed button Custom button Cover button Contents button H I J K L Back button Forward button Menu button TOC button as menu command Help button as menu command Figure 7. The Action bar buttons 40 . this button allows you to return to the opened issue. For accessing the magazine cover. Custom.) instructions about how to use the Reader App. the button is not visible. TOC. depending on the configuration. F G H I J Help. For accessing the Story / Page Viewer and the Section Viewer. Library. (Store versions only) For accessing the Newsfeed. For accessing the Newsfeed page. depending on the configuration.0 devices.3 Action Bar In the Reader App for Android 3. (Or any other type of Web page.

41 . For accessing a Web page with Back button. For a description of the functionality of these buttons. to a previously visited page. (Only visible when there are 6 or more actions defined) For accessing the Action bar menu. (Store versions with subscription functionality only) For accessing the account details for a subscription.1 Top Toolbar All other buttons: section 7. see: TOC button: section 7. Any available buttons for which there is no room in the Action bar itself are displayed here. (Always visible) For navigating Forward button. (Always visible) For navi- gating to the page that was last visited before tapping the Back button.Chapter 04 Using the Reader App Account.2 Navigation Bar Custom. custom information such as privacy information. Menu button. The number of buttons and the order in which they appear is determined by the way the Reader App is configured.

or to bring up the Navigation bar. Page scrubber: a slider for quickly navigating the Story / Page Viewer. Gestures: swiping by using one or two fin- Section Viewer: for quickly navigating to a Story Viewer / Page Viewer: for quickly viewing and selecting the available stories or pages. see the Help page in the magazine (accessed by tapping the Help button. Forward/Back button: buttons for navigat- ing to the next or previously visited page.Chapter 04 Using the Reader App 8. particular section of the magazine. TOC List: a table of content displayed in a Bookmarks List: a list with bookmarked Dossier Links: links on a page which will take you to a particular page of a story. For more information about how to use these custom tools. such as menus or wheels which appear after tapping the screen.) be tapped to navigate to the next or previous page. or for navigating between images in a Slide Show. stories. Navigating the magazine can also be done by various other tools which have been custom made by the Reader App developer. see section 7.2. Navigation zones: (desktop PCs/laptops only) areas which can be clicked to navigate to the next or previous page/story. gers will navigate the user to the next/previous page or story.9 The Help Button. Device rotation: rotating the device brings up a page in a different orientation. 42 . Navigating the Reader App Navigating the Reader App can be done by making use of various tools and methods: Hotzones: (touchpads only) areas which can Each tool or method is explained in the following sections. window on top of the page.

see section 8. Navigation bar and/or the top Toolbar is displayed Left/right zone: the previous/next page/ story is displayed Top zone/Bottom zone: the Action bar. Navigation zones are used.2 Navigation Zones). Depending on the way the Reader App is configured and/ or on which platform is used. all by means of a mouse click.2 Navigation Zones (HTML5 Reader App only) On desktop PCs and laptops. the following actions take place when tapping the screen: Any part of the screen: the Action bar. Navigation Zones are used for moving to the next/previous page/story or for navigating between images of a Slide Show.1. When hovering over such a zone. Navigation bar and/or the top Toolbar is displayed Figure 8.Chapter 04 Using the Reader App 8. Note that Hotzones only work on touchpad devices.2 The Navigation Zones at the edges of the screen (here all shown simultaneously for a page) Figure 8. The iPad Reader App can be configured to include Hotzones (shaded in red): specific areas which can be tapped to bring up the navigation tools or to navigate to the next/ previous page 43 .1 Hotzones Hotzones are areas which can be tapped to execute the following actions: Bring up the Navigation bar Bring up the top Toolbar Bring up the Action bar Navigate to the next or previous page/story 8. the area is made visible by a bar running along the side of the screen and an direction indicator in the center of that bar. not on a desktop PC/laptop (for these systems.

3 Gestures (Touchpad devices only) The touch screen functionality of digital devices allow users to navigate between pages and stories by using finger gestures. The Section Viewer is used by tapping the name of a section. Depending on the configuration of the Reader App. Vertical navigation One-finger swipe. the Story Viewer / Page Viewer will jump to the first story / page of that section. it takes the reader to the next or previous story.) 44 .4. Sections group together stories with similar content.Chapter 04 Using the Reader App 8. Finance. As a result.2. For more information about how to use these custom gestures. the bar can be swiped left or right. Using the Section Viewer Page navigation: takes the reader to the next or previous page. etc. see section 7. see the Help page in the magazine (accessed by tapping the Help button. Works when the Reader App has been configured for story navigation as well as for page navigation: Story navigation: takes the reader to the Figure 8. The Section Viewer shows all sections of a magazine next or previous story. Page navigation: takes the reader to the Additional gestures for navigating the magazine can be implemented by the Reader App developer. one or two fingers can be used: 8. Fashion. such as those for Sports. Horizontal navigation One-finger swipe. Works when the Reader App has been configured for story navigation only: next or previous page.9 The Help Button.4 Section Viewer The Section Viewer appears when tapping the Contents button of the Navigation bar or Action bar and shows all sections which have been defined for the magazine. Two-finger swipe. Works only when the Reader App has been configured for page navigation. In case many more sections exist than can fit the width of the screen.

Figure 8. The same magazine. as shown in the table on the following page. Page navigation: The Page Viewer appears. The following components can be shown: Page preview Story title Story bullet Story description Page number showing only the first page of each story. Differences exist in how these components are displayed in the different Reader App versions.5 Story Viewer / Page Viewer The Story Viewer / Page Viewer appears when tapping the Contents button of the Navigation bar or Action bar. Which of the two types of viewer appears depends on the way the Reader App has been configured: Story navigation: The Story Viewer appears.5a. showing all pages of all stories.Chapter 04 Using the Reader App 8. configured for story navigation (top) showing only the first page of each story in the Story Viewer. and for page navigation (bottom). showing each page of each story in the Page Viewer (iPad Reader App version shown) 45 . The Contents button is not active/available when the Store or Library is displayed.

Displayed below the page preview.5. Story Viewer / Page Viewer components. Not used. 46 . Displayed before each story title.Chapter 04 Using the Reader App Table 8. Android (Froyo).5b. HTML5 All page previews are spaced apart equally. Story Viewer / Page Viewer differences between Reader App versions Reader App version Component Page preview Story title Story bullet Story description Page number iPad. Displayed below the story title. A B C D A C D A E Page preview B Story bullet C Story title D Story description E Page number Figure 8. the bottom image the Android (Honeycomb) version Using the Story Viewer / Page Viewer The functionality of the Story Viewer and Page Viewer is identical: swipe left or right to locate the required story or page and tap the thumbnail to display the page. Displayed below the story title. Displayed below the page preview. Once tapped. the Action bar or Navigation bar and top Toolbar (when enabled) will automatically disappear. The top image depicts the iPad/Android (Froyo)/HTML5 version. Displayed below the page preview (Froyo only) Android (Honeycomb) Space between stories is larger than space between pages of a story. Displayed above the page preview.

To ease navigation.7.7 Forward/Back Buttons The Forward and Back buttons allow the user to quickly return to a previously visited page.3 A A Page scrubber A A Figure 8.Chapter 04 Using the Reader App 8. the thumbnails in the Story Viewer / Page Viewer are moved in the same direction. or when the user has not accessed any pages yet. By doing so. As part of the Action bar (see section 7. 47 . The Forward and Back buttons in the top Toolbar These buttons are disabled when the user accesses the Store or Library.2 Navigation Bar) Action Bar). their functionality is much the same as using the Forward/Back button in a Web browser. the Page Viewer can hold a multitude of pages. allowing the user to quickly browse the available pages in the magazine.6.6 Page Scrubber When the Reader App is configured for page navigation (see section 8. These buttons are available in the following locations: In either the top Toolbar (see section 7. The Page scrubber B B Using the Page Scrubber Back button Forward button The Page Scrubber is essentially a slider which can be moved left or right.5 Story Viewer / Page Viewer). a Page Scrubber can be made available between the Section Viewer and the Page Viewer. 8. Figure 8.1 Top Toolbar) or the Navigation bar (see section 7.

Tapping the TOC button in the top toolbar brings up the TOC List Each TOC List entry shows the following information: A preview of the first page of the story Story title Description 48 . A A TOC List Figure 8.1 Top Toolbar). Once tapped. top Toolbar and Navigation bar will automatically disappear.Chapter 04 Using the Reader App 8. This list contains a quick-link to each story in the magazine.8 TOC List The TOC List appears when tapping the TOC button in the top Toolbar bar (see section 7. the TOC List. Using the TOC List The TOC List is used by swiping the list up or down to the required story and tapping the story to navigate to it.8.

9. A C Bookmark List button B Edit button Bookmark button D Bookmark Figure 8. This list can be used for bookmarking stories of interest. Tapping the Bookmarks button brings up the Bookmarks List 49 .Chapter 04 Using the Reader App 8. the Bookmarks List appears. Any created Bookmarks can also be managed from this list. Each Bookmark shows the following information: A preview of the first page of the story The name of the issue (only when the issue The Story title The Story description D A B C has been downloaded through the Store) How to use Bookmarks and the Bookmarks List is explained in the following sections.9 Bookmarks List When tapping the Bookmarks List button in the top Toolbar. so that they can be quickly accessed at any time.

The bookmarked story is opened and the Bookmarks List is closed. This can be done in any issue. Step 2. Step 2. Bookmarks stay displayed in the Bookmarks List—even when closing the issue containing the bookmarked story—up until the point when the issue itself is deleted.9. Scroll the list to navigate to the required Bookmark. Tap the Bookmark. The Bookmarks List appears. Step 4. When tapping such a Bookmark. Tap the Bookmarks List button. Tap the screen to access the top Toolbar. The story is added to the Bookmarks list. Tap the screen to access the top Toolbar.9.1 Bookmarking a Story Bookmarking a story is done by performing the following steps: Step 1. Step 3. 50 . 8. Step 4. Tap the Bookmarks List button. not necessarily the issue containing the bookmarked story.Chapter 04 Using the Reader App 8. for each Bookmark a preview. Navigate to the story which needs to be bookmarked. The Bookmarks List appears. the issue name. the currently viewed issue is closed and the bookmarked issue is opened. Step 3.2 Accessing a Bookmark Accessing a bookmarked story is done by performing the following steps: Step 1. story name and description is displayed. The Bookmarks List can contain Bookmarks belonging to stories that are located in issues other than the one currently viewed. Tap the Bookmark button.

9. (See figure 7. The Bookmark is removed from the list. Step 3. The Bookmarks List appears. Step 3. Step 2. tap Done. Step 2. Step 4. Tap the Edit button. The Bookmark is removed from the list.4a on the next page. Using the swipe method Step 1. swipe left to hide the Delete button. In case you do not want to delete the issue. Tap the Bookmarks List button. 51 .9.3 Deleting a Bookmark Deleting a bookmarked story is done by using one of the following methods: Using the swipe method Using the Management controls Using the Management controls Step 1. Tap the Bookmarks List button. The Delete button appears. The Bookmarks List appears. Step 5. The Edit controls appear. Tap the screen to access the top Toolbar.Chapter 04 Using the Reader App 8. When finished. Tap the Delete button.) Step 4. Tap the screen to access the top Toolbar. Swipe the Bookmark to the right. Tap the Delete button.

Rearranging the Bookmarks list can be done by dragging the Bookmark by its Reordering control. The Edit controls appear.9. (See figure 7.) Step 5.4a to the right. drag the Bookmark by the Reordering control in the desired order.4a. 52 .) Step 4. tap Done. Step 3.Chapter 04 Using the Reader App 8. Figure 8.4b to the right.9. Tap the Edit button. When finished.9. When tapping the Edit button. Perform one of the following steps: To delete a Bookmark.4 Managing Bookmarks Managing created Bookmarks is done by performing the following steps: Step 1.4b. (See figure 7. Figure 8. Step 2. Tap the Bookmarks List button. the Edit controls appear To rearrange t he order of the Bookmarks. tap the Delete A A C B Done button B Reordering control C Delete button button.9. The Bookmarks List appears.9. Tap the screen to access the top Toolbar.

the page view will not change. it is up to the designer of the page to make it clear to the user that the area can be tapped in order to navigate to a story in the magazine (as is the case with headers on a cover). etc. when rotating it in the same direction once more. including images and text.Chapter 04 Using the Reader App 8. A Dossier Link as such can not be recognized. an interview may be presented in the form of a video while rotating the digital device to portrait orientation might show the same interview in a regular article form (possibly even in Text View mode in which the text can be scaled to a suitable size). The Reader App can also be configured in such a way that pages can be viewed in one orientation only. 8. tap the defined area to navigate to the related story or page within that story.11 Device Rotation Although not a navigation method as such. This means that when rotating the device. rotating the digital device can be used by the designer to display the content of a page in a different way. For instance: when viewing a page in landscape orientation. It is typically used in those places where a link to a story is placed such as on the magazine cover. Using a Dossier Link To use a Dossier Link. the page view will rotate as well in order to prevent the page from being displayed upside down. Note that the defined area can be any part of the page. switching to another orientation is then locked. on the page holding the table of contents.10 Dossier Links A Dossier Link is an area defined on the page or in a Web Element which acts as a link to another story. 53 .

Playback may be influenced by the available bandwidth. When playback is started automatically. Dynamic Content Pages can hold a multitude of different types of content and functionality with which the reader can interact.1. For the latter method. it can either start playing automatically each time the page is accessed. Figure 9. Depending on the way the video is configured.Chapter 04 Using the Reader App 9.1 Video Videos can be recognized by their icon in the center of the frame. The following interactive content can be included: Video Audio Slide shows Hotspots Web Elements Widgets Scrollable areas Web Links Text View 9. Each method is explained in the following sections. Videos can either be embedded in the magazine or streamed from an online location. internet access is required. it can also optionally be sstarted in fullscreen mode. Videos can be recognized by their icon in the center of the frame How to interact with each type of content is described in the following sections. 54 . or playback needs to be started manually.

Controlling the playback of the video is then done by taking the video into fullscreen mode by using the pinching gesture (see section 9. the video will be played fullscreen once more.2 Fullscreen Playback). Videos which are set to automatically play in fullscreen mode will only play in fullscreen mode.1 to the right. When minimizing the video. Tap the button once more to resume playback. The toolbar containing the video controls appears. play will stop. The video controls To bring the toolbar back up. Tap the Play/Pause button to pause the video.1. (See figure 9. when tapping the play button while the video is minimized. Use the scrubber to scroll through the video.1. After a short time.1.1.) The Reader App can also be configured in such a way that the video controls for a video are not displayed. tap the video once (iPad/Android) or hover the mouse over the video (HTML5 on a desktop). The Reader App can also be configured in such a way that videos automatically start playing as soon as the page is loaded. the toolbar will disappear.Chapter 04 Using the Reader App 9. A A Play/Pause button B B C Scrubber C Full screen button Figure 9.1. 1 55 .1 Manual Playback Playing a video manually can be done by doing the following: Tap anywhere on the video frame to start the video1.

Such videos will only play in fullscreen mode. The iPad video controls in fullscreen mode or resume playback. 1 video or resume playback.2 to the right). Click the Pause/ Play button to pause the mode and continue playing the video. Tap the Done button to leave fullscreen mode Use the scrubber to scroll through the video.2. A D F D E F G To bring the toolbar back up. Done button B Scrubber C Aspect ratio button Rewind button E Play/Pause button Fast forward button G Minimize button Tap and hold the Rewind button to rewind the Tap the Pause/ Play button to pause the video Figure 9. The Reader App can also be configured in such a way that video is automatically played in fullscreen as soon as the page is loaded. 56 . Double-click the video to leave the fullscreen mode.Chapter 04 Using the Reader App 9. the toolbar containing the video controls appear. the video is kept being played in fullscreen mode. play will stop. HTML5 Reader App Tap the minimize button to leave fullscreen When hovering the mouse over the video. video.2 Fullscreen Playback Playing a video in full screen mode is done by doing one of the following1: (iPad and Android Reader App) Tapping Tap the aspect ratio button to change screen dimensions (4:3 or 16:9 aspect ratio). and stop playing the video. Use the scrubber to scroll through the video. A B C the Full Screen button in the toolbar pinching movement video (iPad and Android Reader App) Using the (HTML5 Reader App) Double-click the Videos can also be set to automatically play in fullscreen mode. When subsequently tapping the play button. the video will be played fullscreen once more. When rotating the device while viewing a video in fullscreen mode. After a short time. tap the video once.1. when minimizing the video.1.1. iPad and Android Reader App The toolbars containing the video controls appears (see figure 9. the toolbar will disappear.

when the playback of the audio file is stopped manually. 57 . Playback may be influenced by the available bandwidth. or playback needs to be started manually. Figure 9. Audio files can be recognized by their icon The Reader App can also be configured in such a way that the audio icon as well as the audio controls are hidden. it can either start playing automatically each time the page is accessed. For the latter method.2 Using the Audio Control. When the user subsequently navigates to a different page within that story (still within the same orientation).2 Audio Audio files can be recognized by their icon. (See section 9.Chapter 04 Using the Reader App 9. tapping the icon will play the audio file.2.2. Controlling the playback can then be done by using the Audio Control. for instance for the use of “background music”. Each method is explained in the following sections. the audio also continues playing. (Android only) Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation.) Depending on the way the audio file is configured. internet access is required. They only stop playing when a video file or another audio file is started. (iPad only) Audio files that are being played continue playing when navigating to another page or another story. Controlling the playback of an audio file can either be done by using the embedded audio controls or by using the Audio Control. or the when audio file has reached its end. Audio files can either be embedded in the magazine or streamed from an online location.

Tap the audio icon again to stop playing the of the Audio Control pop-up. 1 58 .2 Using the Audio Control This feature is not available on the Android version of the Reader App. audio. any automatically played background audio is automatically stopped when navigating to another page.2. Stop/Play button. Audio description. Audio title. Slider.) For audio files for which the audio has been started automatically and for which the playback controls are hidden.1 Using Embedded Controls Playing an audio file by using the embedded controls can be done by doing the following: Tap the audio icon to start playing the audio. Short description of the song being played. Button for stopping/ restarting the playback. 9. It contains the following components: Audio Control pop-up header. Title of the song being played. For scrolling through the file.Chapter 04 Using the Reader App 9. (Works for embedded audio files only. The Audio Control can be accessed by tapping the Audio Control button in the top Toolbar. The header The icon changes into a pause button. using the Audio Control is the only way of controlling its playback. not for files streamed over the Internet. Once the playback of an audio file has been started (either manually or automatically).2. controlling the playback can also be done by using the Audio Control1.

Slide Shows can be recognized by their icon E A C E F Audio control button B Audio control popup Audio title D Audio description Stop/Restart button F slider A Slide Show can either be viewed within the frame itself or in fullscreen mode. B C D Figure 9. The Audio Control components 59 .2.3.2. Figure 9.Chapter 04 Using the Reader App A 9.3 Slide Shows Slide Shows can be recognized by their icon in the lower left-hand corner of the frame. Each method is explained in the following sections.

3. 60 . Tap the currently displayed image once more in order to leave fullscreen mode.3. To navigate the images in the Slide Show. swipe the displayed image left or right to view the next or previous image.Chapter 04 Using the Reader App 9.2 Viewing in Fullscreen Mode Viewing a Slide Show in fullscreen mode can be done by doing the following: Tap the currently displayed image once in the next or previous image. order to access fullscreen mode. the Slide Show is kept being played in fullscreen mode. When rotating the device while viewing a Slide Show in fullscreen mode.1 Viewing in Frame Viewing a Slide Show within its frame can be done by doing the following: Swipe the displayed image left or right to view 9.

It is up to the designer how the Hotspot functionality is incorporated in the page. the Hotspot content will appear in a pop-up window. the corresponding Hotspot content appears in a popup window (below) 61 . Using Hotspots Using the Hotspot feature can be done by doing the following: Tap the area defined on the page as the Hotspot.4 Hotspots The Hotspot functionality involves tapping a particular area on the screen (the Hotspot) with the result that other content (the Hotspot content) will appear in either the same location or in a different location. The example below shows the usage of tapping a Hotspot on the page. Tap anywhere on the pop-up window to close the pop-up. In its most basic usage. and how it is communicated to the reader that a certain page item contains Hotspot functionality.Chapter 04 Using the Reader App 9. In its most basic usage.4. when tapping a Hotspot (above). An alternative use of Hotspots is that the Hotspot disappears as soon as the Hotspot content appears. do one of the following: Tapping the same or another Hotspot (only if there is no Hotspot Close button) Tapping the Hotspot Close button Tapping the Selected Hotspot (only if there is no Hotspot Close button) Figure 9. The Hotspot content appears in a pop-up window. To then close the Hotspot content. but a more advanced usage involves showing the content embedded in the page. after which the Hotspot content will appear in a pop-up window.

A Web Element can be used in three different ways: Embedded in the page. do the following: Embedded content.9 The Help Button. Display speed may be influenced by the available bandwidth. The content is It is up to the designer how Web Elements are incorporated in the page. Typically. these pages are located on the Internet.Chapter 04 Using the Reader App 9. internet access is required. Whether interaction is required or not depends on the content used. 62 . is not loaded until the frame is tapped. not loaded until the frame is tapped.5 Web Elements Web Elements are areas that hold or link to content in the form of Web pages. Web pages. see the Help page in the magazine (accessed by tapping the Help button. Normally used for Using Web Elements To use a Web Element. if the content contains interactive components (such as buttons or form fields). The content is directly loaded when the page is displayed. see section 7. and how it is communicated to the reader that a certain page item contains such an interactive component. Content in a pop-up window. the Reader App is closed. but in some cases these pages can be bundled with the Reader App as well. For more information about how to use a Web Elements. Web Elements can also be used as empty frames that are placed over sections of text such as a hyperlink. the user can interact with them accordingly. (small) components of a Web page.2. For the end user the experience will be that of tapping the text itself. In a Web browser. Can be used for dis- playing small components of a Web page or the full Web page. As a result of this action. Used for displaying full Content in a Web browser. The content As a pop-up window. the user can interact with them accordingly.) When content of a Web Element is taken from the Web. A message is displayed asking the user if the content should be displayed in a Web browser. the Web browser is opened to access the link. if the content contains interactive components (such as buttons or form fields). When the user confirms this.

Chapter 04 Using the Reader App 9. Using a Scrollable Area A Scrollable Area is used by doing the following: Swipe the content left/right or up/down to view any currently hidden content. and will therefore also always displayed as one long. Figure 9. In Text View mode. It is up to the designer how the Scrollable Area functionality is incorporated in the page. the content can either be scrolled horizontally or vertically.9 The Help Button. Whether or not a page is displayed in Text View mode is a design decision. and how it is communicated to the reader that a certain page item contains Scrollable Area functionality. see section 7.) 9. For more information about how to use Scrollable Areas.2. To view the content which is not visible.7. continuous page.6 Scrollable Areas A Scrollable Area is a frame in which more content is available then can be displayed by the frame. the designer can also decide to offer the page in the same way as a page in 63 . In Text View mode. the article is essentially shown as a Web page (instead of as an image as is the case for pages viewed in landscape orientation). the text of the article can be increased or decreased in order to suit the user’s needs Text View mode is only available when viewing a page in portrait orientation.7 Text View The Text View mode is a special mode in which the font size of the article can be increased or decreased in order to suit the reader’s needs. see the Help page in the magazine (accessed by tapping the Help button.

text that is part of such images cannot be scaled. Tap an image to view it in fullscreen mode. Navigate the page by swiping up or down. As additional images. Designers can use a header image to display a fullscreen-sized image possibly containing a headline. including the incorporation of images. do the following: Use the vertical pinch gesture to increase or of the page. the current font size is displayed in percentages in the top right-hand corner of the page. While pinching. Obviously. if multiple images are present swipe horizontally to navigate them. appearing at the top Using Text View To use Text View.Chapter 04 Using the Reader App landscape orientation (effectively an image) by which the text obviously cannot be scaled. Text View pages can also be fully styled in the same way as a Web page. As an image as part of the article. before the article starts. appearing in a separate section at the bottom of the page following the article. 64 . appearing anywhere in the text itself. decrease the text (but see comments below about header images). Images Images can be incorporated in one of the following ways: As a header image.

Navigating the page is done by using the available controls on the page.. The Newsfeed page 65 . The Web page is displayed as an overlay on top of the magazine. Closing the Newsfeed page can be done by doing one of the following: Tapping the Close button in the top right-hand A corner (Android only) Using the Back button of the device Since Newsfeed content is taken from the Web. etc. internet access is required. Newsfeeds The Newsfeed functionality is primarily used by publishers to offer the user the latest news. as offered by the publisher. Display speed may be influenced by the available bandwidth. by means of a Web page. A Close button Figure 10. sports results.Chapter 04 Using the Reader App 10. Accessing the Newsfeed is done by tapping the Newsfeed button in the Navigation bar or the Action bar.

page or the thumbnail of the page as shown in the Story Viewer / Page Viewer. Facebook. A manually defined part of Hyperlink. Part of a page. or Section bar Tap anywhere in the Flipview Rotate the device 66 . If pages and Hyperlinks are both available. A link to an external Web site. do one of the following: Tap anywhere on the page Tap a button in top Toolbar (including the Share Content button). The method of sharing each type of content is explained in the following sections. or e-mail. typi- cally holding information related to the story. The following content can be shared: Page. Either the currently visible part of the The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar. they are automatically combined in the same message. Accessing the Content Sharing functionality is done by tapping the Share Content button in the top Toolbar To leave the Content Sharing functionality at any stage.Chapter 04 Using the Reader App 11. a page. Sharing Content The Content Sharing functionality can be used to share specific content with others by sharing the content via Twitter. Navigation bar. Figure 11.

capturing the current way that the page is displayed. The Content Sharing window appears showing all defined sharing services. a screen appears in which text can be entered.1 Sharing a Page The availability and functionality of sharing a page is set through a DMSetting. Facebook: The Facebook login screen page. Depending on the chosen service. When logged in. A screenshot is made of the full screen. Enter the account details and tap Allow. Enter further details such as the recipient’s e-mail address and tap Send. the Twitter login screen appears. Customizing the iPad Reader App – section 9. To share a page. proceed as follows: Twitter: When logging in for the first time using the Reader App. the background image (such as a placeholder image) is used instead. An e-mail is created with the screenshot. Tap the Share Content button in the top Toolbar. Step 2. perform the following steps: Step 1. any content obscured by a toolbar is included in the screenshot. It is assumed here that page sharing is enabled. Tap the required service for sending out the page. Step 4. The thumbnail used is the thumbnail which is available in the Story Viewer / Page Viewer for the page. Depending on the configuration of the Reader App. a screen appears in which text can be entered. hyperlink inserted.Chapter 04 Using the Reader App 11. Enter the account details and tap Login. For more information. Tap Post to send the message. Step 5. If no matching page or orientation is available. When logged in. Step 3. tured. Video playback cannot be cap- Long pages cannot be captured 67 . the following is shared: The currently visible part of the A thumbnail of the page. A screen appears asking what needs to be shared. in full. the first page of the story or the corresponding page in the opposite orientation is used. Note the followiing: Toolbars are not included in the appears.4 Content Sharing. Navigate to the page which needs to be shared. E-mail. see chapter 7. Choose This page.

the Twitter login screen appears. Step 6. Step 5. proceed as follows: Twitter: When logging in for the first time using the Reader App. a screen appears in which text can be entered.2 Sharing Part of a Page The availablity of sharing a part of a page is set through a DMSetting. It is assumed here that partial page sharing is enabled.Chapter 04 Using the Reader App 11. Customizing the iPad Reader App – section 9. Enter the account details and tap Login. Enter the account details and tap Allow. Step 2. A screen appears asking what needs to be shared. a screen appears in which text can be entered. The message is sent to Twitter. Tap the required service. see chapter 7. while the image is sent to TwitPic.2. appears. For more information. Depending on the chosen service. In the top Toolbar. The Area Selector appears. (Optional) To return the Area Selector. 68 . perform the following steps: Step 1. The Content Sharing window appears showing all defined sharing services. The Area Selector Step 4. Step 8. A B Drag the Move handle in the middle to reposition the defined area. tap Share. tap Edit Selection. tap Tweet. An e-mail is created with the Figure 11. Navigate to the page of which a part needs to be shared. Facebook: The Facebook login screen A Resize handle B Move handle E-mail. Tap the Share Content button in the top Toolbar. To share a part of a page. When logged in. When logged in.4 Content Sharing. any content obscured by a toolbar is included in the screenshot. Enter further details such as the recipient’s e-mail address and tap Send. Step 3. shot. Tap Post to send the message. Choose Part of this page. Step 7. page inserted or attached. Use the handles to define the area which needs to be shared: Drag any of the Resize handles on each Note the followiing: Toolbars are not included in the screen- corner to adjust the size of the area. When ready.

the Twitter login screen appears. Enter the account details and tap Login. Step 5. When logged in. Step 2. a screen appears asking what needs to be shared. Navigate to the page of which its Hyperlink needs to be shared. the background image (such as a placeholder image) is used instead. perform the following steps: It is assumed here that a Hyperlink exists for the selected story. a screen appears 69 . If so. Tap Post to send the message. using the Reader App. Step 3.Chapter 04 Using the Reader App Video playback cannot be captured. When logged in. In order to prevent that the URL takes up too many characters. proceed as follows: Twitter: When logging in for the first time Long pages cannot be captured in full. 11. The Content Sharing window appears showing all defined sharing services. Enter the account details and tap Allow.3 Sharing a Hyperlink To share a Hyperlink. Tap the Share Content button in the top Toolbar. Depending on the chosen service. Step 4.) Choose This page. (Optional. Facebook: The Facebook login screen appears. Step 1. only when Page Sharing has been enabled in the DMSettings. a shortened version of the URL is automatically inserted. a screen appears in which text can be entered. (Optional) Remove the inserted or attached image of the page. Tap the required service.

(Optional) Remove the inserted or attached image of the page.4 Reader App Settings The Reader App settings on the digital device allow the user to control certain functionality related to using the Content Sharing feature. (Optional) Remove the inserted or attached image of the page. These settings can be found in the Settings app of the digital device. An e-mail is created with the 11. to log out of the relevant service the next time that the Reader App is launched. Logout on next launch. Set to On in order hyperlink inserted. Tap Post to send the message. E-mail. Enter further details such as the recipient’s e-mail address and tap Send.Chapter 04 Using the Reader App in which text can be entered. This allows the user to for instance log in using a different account. 70 .

The Store can be accessed by tapping the Store button in the Navigation bar or the Action bar.Chapter 04 Using the Reader App 12. the Store shows multiple issues at a time. For filtering the Library by content Single-issue view button. the following components are available (see figure 12b on the next page): Back to issue button.) For each issue. Multiple-issue view. Figure 12a. type. For returning to the issue which is currently open. For displaying the Store one issue at a time. the Store can be used for previewing and purchasing issues. By default. For displaying the Store multiple issues at a time. The store in multiple-issue view (left) and in single-issue view (right) 71 . Using the Store For those Reader Apps which have Store functionality. Store filter. (See figure below. but it can also be set to show a single issue.

see section 12. A preview of the cover. Short description Subscriptions The Store can also contain subscription functionality for subscribing to or accessing a subscription.1 Store With Subscription Functionality . For buying the magazine E F G H I (see section 12. (See section 12.) A B C D Preview issue button. A Back to issue button B Store filter C Single-issue view button D Multiple-issue view button E Preview button F Buy/Free button G Issue name and description H Cover story description I Cover preview Figure 12b.3 Previewing an Issue. of the cover story. The name Cover story description.) Buy/Free button.Chapter 04 Using the Reader App Cover preview. For details about using the Subscription functionality. and description of the issue. (In the HTML Store. For opening a new screen with more detailed information about the magazine. Issue name and description. the cover also acts as a button to switch between single-issue view and multipleissue view. The Store components 72 .4 Downloading an Issue) or for downloading it for free.

Step 2. A page will appear with information about the subscription and how to subscribe.) When using the iTunes subscription functionality. For accessing a page to Account button. Two types of subscription services can be implemented: (iPad Reader App only) The iTunes subscrip- 12. For accessing a page with Any other subscription server On the iPad Reader App.Chapter 04 Using the Reader App 12.1 The iTunes Subscription Service (iPad Reader App only) The iTunes Subscription functionality of the Store consists of the following components (see figure 12.1. no Log In or Log Out buttons are required. Tap a Subscribe button. subscribe to a magazine subscription. This option is mandatory by Apple and should always be part of this page. When the subscription expires. 73 .1 Store With Subscription Functionality The Store can also contain functionality to let the user subscribe to a magazine subscription or sign in to an existing subscription account.1. Advert from the pub- lisher to advertise current subscription offers. After purchasing a subscription. both subscription services can be used simultaneously. When the subscription process is complete. access the Library to view the issues that are part of the new subscription. it is no longer possible to download issues that were available within the subscription period. you are allowed to download the latest issue and all issues that are released while the subscription is valid. (The default implementation is a page on which the user can restore his/her subscription. log-in and account information is based on the login which is currently active for the iTunes store on the iPad. Follow the steps on the page.1 on the next page): Subscription advert. Therefore. tion service Subscribe buttons. additional options based on the user’s account. Subscribing Subscribing to a subscription is done by performing the following steps: Step 1. How to use each type of subscription is described in the following sections.

1. The Store view with iTunes Subscription functionality 74 .1.Chapter 04 Using the Reader App A B C A Subscription advert B Subscription buttons C Account button Figure 12.

any transferred issues are ready to be downloaded. Step 4.) copied. The copied issues will be placed in the Library of the Reader App of the target iPad. For accessing a page with additional options based on the user’s account. Step 2. downloading them is free of charge. When a non-iTunes Subscription Service is used in combination with the iTunes Subscription Service. Tap Copy Subscriptions. For accessing a page to Any settings such as Bookmarks will not be subscribe to a magazine subscription. Subscription advert.Chapter 04 Using the Reader App Copying subscriptions between iPads When a user has multiple iPads. tap the Account button in the Navigation bar. Step 3. For upgrading/extendAccount button. The issues that are being copied will not be or out of an existing subscription account.2 A Non-iTunes Subscription Service For subscription services which are not based on iTunes Subscriptions.1. On the target iPad. (Because the user has already paid for these issues. it is possible to copy issues that are part of a subscription from one iPad to another. How to use the subscription components is described in the following sections. the following components exist in the Store (see figure 12.2 on the next page): Sign In / Sign Out button. When completed. For logging into will be copied. The transfer process is started. Make sure not to close the Reader App during this process. Copying subscriptions between iPads can be done by performing the following steps: Step 1. Advert from the pub- lisher to advertise current subscription offers.1. removed or affected on the source iPad in any way or form. Take note of the following: Only issues that are part of the subscription 12. Subscribe button. Enter the iTunes user details. ready to be downloaded. Existing Customer. The Account page appears. Apple does not allow this. Tap the Download button for those issues which need to be downloaded. note that the Store will not display the Offer pages that are part of the noniTunes Subscription. 75 . ing a current subscription.

The Store view with non-iTunes Subscription functionality 76 .1.2.Chapter 04 Using the Reader App A B C D E A D Subscription account login/logout button B Subscription advert Upgrade subscription button E Account button C Subscription button Figure 12.

display- Figure 12. (For more information.3 Signing In or Out When the user is already subscribed to a magazine. used. Tap the Sign In button in the top Toolbar. access a page with information about the license agreement for the subscription. Use the dialog box as follows: In the User Name box. enter the (Optional) Select the Remember Me check box to automatically have the user logged-in when the Reader App is launched. password. The Account button in the Navigation bar or the Action bar is available for accessing an external page for managing the account details. (Optional) Tap Privacy to access a page with information about how the user’s data is gathered.Chapter 04 Using the Reader App 12. The Library also shows any downloaded issues which are not part of the subscription. The Sign In dialog box appears.1. (Optional) Tap License agreement to Step 3. 77 .) The user is forward to the Library.1.3. enter the user name for the account. and managed. see section 13. Tap Submit to log in. the following functionality is available: The Sign In button changes into a Sign Out button for signing out of the account. ing the issues that are available to the user as part of their subscription (including those issues which have not been downloaded yet). The Subscription Sign In dialog box Step 2. Using the Library. In the Password box. he or she can sign in to the account by doing the following: Step 1. Once logged in.

Tap the Subscribe button.4 Subscribing Subscribing to a subscription is done by performing the following steps: Step 1.5 Upgrading a Subscription Upgrading an existing subscription is done by performing the following steps: Step 1. A page will appear with information about how to upgrade the subscription. Follow the steps on the page.3 Signing In or Out.1.1.Chapter 04 Using the Reader App 12. Step 2. A page will appear with information about the subscription and how to subscribe. Tap the Existing Subscriber button. (See section 12.) 12.1. Step 2. 78 . Once the subscription account is active. Follow the steps on the page. the user can sign in to the account to access the available issues for that subscription.

a preview of it can first be viewed. Closing the Preview screen can be can be done by tapping the Close button for that issue.3.3 Previewing an Issue Before deciding to download an issue. When in single-issue view: navigat- ing between issues can be done by swiping horizontally.Chapter 04 Using the Reader App 12. The preview screen for previewing an issue Part of the screen shows a page from the magazine (it can optionally be swiped vertically if this page does not fit the screen). between each set of issues can be done by swiping vertically. Previewing an issue can be done by tapping the Preview button for that issue. Figure 12. 79 . It is up to the publisher which page is shown. but typically this will be the page holding the table of contents.2 Navigating the Store Navigating the Store is done by doing one of the following: When in multiple-issue view: navigating 12.

and resume the download at a later stage. pause it. Different labels and controls are used for each download process. Android Reader Apps: other issues 80 . downloaded while a download is in progress. Issues can either be free of charge or will have to be purchased.3 Previewing an Issue). The user can open the issue and start reading that content while all other content is progressively downloaded in the background. (iPad only) In the message which appears asking to confim that the issue should be downloaded or purchased. the issue is added to the Library and the download is started automatically. Step 3. only the Each is explained in more detail in the following sections. starting these downloads needs to be done manually. The iPad Reader App can be configured in such a way that downloading over a 3G network is not possible. most basic content is downloaded and made available (such as the cover and the cover story). The App Store or Android Market is accessed and purchase information is displayed. If this is the case. Follow the steps for purchasing the issue. over time these will become less and less. the progress is displayed in the form of a progress bar. An issue is downloaded from the Store by performing the following steps: Step 1. labels and controls. Two types of download processes exist: Non-progressive downloads: the issue needs to be fully downloaded before it can be read. cannot be downloaded while a download is in progress. Any additional downloads are added to the Library. as shown in the following sections. Tap the Free or Buy button for the issue in either the Store itself or in the Preview screen (see section 12. This way.Chapter 04 Using the Reader App 12. The progressive download method fully replaces the nonprogressive method.4 Downloading an Issue The Store can be used for downloading issues. When the purchase process is complete. tap Download. Only magazines that were released before the progressive download method was available will make use of the non-progressive method. Take note of the following behavior when a download is in progress: iPad Reader App: other issues can be Following the Download Progress During the download of the issue. Step 2. a message is displayed. Progressive downloads: Initially. a user can see the progress of a download.

Apple applies the following restrictions: The time is finite. For additional technical information see: http://developer. When the app is killed: the download When app is relaunched: the down- a maximum of 10 minutes is left in which the app is still allowed to execute code.com/library/ ios/#documentation/iphone/conceptual/ iphoneosprogrammingguide/BackgroundExecution/ BackgroundExecution. 81 . stops. allowing the user to continue or cancel the download. When the user does not respond to the message. When the app is closed. However. the download is resumed though at the point where it was left off the next time the download is continued. System resources must permit back- ground execution.html Shortly before the time limit is reached. load can be resumed.Chapter 04 Using the Reader App Automatically opening a magazine after downloading (iPad Reader App only) The Reader App can be configured in such a way that an issue or Segment is opened automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). Users with a 3G connection can disable background downloading by means of the following setting on the Settings screen on the iPad: 3G Download Options/Continue After Closing App Background Downloading Android Reader App The following behavior exists: When the app is moved to the back- When the Reader App is suspended while a download is in progress. a message is displayed to the user. ground: the download continues. When resources (such as memory) are needed for a newly started app. our background downloading might be cut off early.apple. the following occurs: iPad Reader App The download is continued. the download is cancelled.

Chapter 04 Using the Reader App 12. and controls used for issues that are downloaded by using the non-progressive download process. Installation stopped. the download percentage and status is displayed. (iPad only) Shown when the download process failed or has been interrupted. 82 . The download process can be stopped and resumed at a later stage.4. Reader Apps on other platforms may look slightly different. (Images shown are those of the iPad Reader App. Tapping the Download Resume button will resume from where it was left off. Download stopped. When the download is in progress. Tapping the Install button will restart the installation process.1 Non-Progressive Downloads The following images show the labels. Download paused. Once the issue has been fully downloaded. Downloading. Installing. it is unpacked and installed. When the installation has failed or has been interrupted. progress bar. Tapping the Download Resume button will resume from where it was left off. an issue needs to be fully downloaded before it can be viewed.) Using this method. an indication is given how much of the issue has been downloaded so far. When the download process is interrupted (for instance by closing the Reader App or by tapping the Pause button).

possible method. the process can be stopped and resumed at a later stage. When the download has started.xml file. and controls used for magazines that are downloaded by using the progressive download process. will also have “normal” priority. Download paused. but each will finish first before the next is started. ‘immediately’ may take a while (until a thread is available). stories will be downloaded in order of appearance (first story first. Reader Apps on other platforms may look slightly different. Stories that are linked within the currently visible story (by means of a Dossier Link). The dimmed thumbnail indicates that no content is available yet for viewing. The story next in line will have “normal” Download started. consisting of the magazine. tapping a Dossier Link on the cover. last story last).2 Progressive Downloads The behavior of the progressive download process is as follows: Download is started: an initial package is During the download. Tapping the button will pause the download. Tapping the button will pause the download. 83 . When the download process failed or has been interrupted. the pause button changes into a Resume button. for instance by tapping a preview in the Story Navigator. content is available for viewing. “Immediately” in this context means whenever the tablet has a download slot (thread) available.) downloaded. 3 threads are active at all times. the download button changes into a Pause button.4. content available. When user does not interact with the When the user accesses a story (in any Download not started. The download has not yet started. All other stories will have “low” priority. magazine. Tapping the button will resume from where it was left off. When the thumbnail is not dimmed anymore. In the case of the iPad for instance. priority. etc). When the download has started. content not yet available. In the extremely rare situation where all three threads are downloading a large video.Chapter 04 Using the Reader App 12. None of the threads will be cancelled. the following rules apply: The currently visible story maintains the highest download priority and its content will be displayed immediately. The following images show the labels. the cover and all thumbnails. progress bar. Dow nload s t a r ted. the download button changes into a Pause button. (Images shown are those of the iPad Reader App.

(See figure 12.) 84 .4.Chapter 04 Using the Reader App When viewing the magazine while the download is still in progress.2 on the next page. the download state is shown in the Story Viewer / Page Viewer and on the page itself (when attempting to view a page which is not available yet).

the download progress of each story is indicated on the page and in the Page Viewer / Story Viewer.Chapter 04 Using the Reader App A B C D A Page view download progress B Downloaded story C Story download in progress D Story download not started yet Figure 12. The stories which are available for viewing appear normally in the Story Viewer / Page Viewer. 85 .4. When viewing an issue which is not fully downloaded yet.2.

as explained in the following sections. Issue with Segments can be recognized by their icon. The Library shows the following content: Issues which have been downloaded from the 13. In this example. the issue to the right does not contain Segments. (Segments which have not been downloaded appear dimmed and will have a Download button). Figure 13. Tapping the issue with Segments brings up the Segments Overview page. Shows the issue All Segments for an Issue which have in the top section of the page and all its available Segments in the bottom section of the page.Chapter 04 Using the Reader App 13. This page is accessed by tapping one of the following buttons: Store.1a. This page is accessed by tapping an issue containing Segments (recognizable by its icon). Segments Overview page Segments Overview page. been downloaded from the Store.1 iPad Reader App Library The Library on the iPad Reader App consists of the following pages (see figures on the next pages): Library Overview page. Shows all available issues. the Library can be used to browse through the available issues for that magazine. including those which have not been downloaded yet. The Library button in the Navigation bar The Back To Overview button in the (Reader Apps with subscription functionality only) Issues that are available as part of the subscription. the issue to the left contains Segments. including those which have not been downloaded yet. 86 . Slight differences exist between the Libraries of the various Reader Apps. Using the Library For those Reader Apps which have Library functionality.

For filtering the Library by conEdit/Done button. subscription functionality only) For signing in to or out of a non-iTunes subscription account. Back to issue button. Library filter. Segment. For downloading the description of the issue or Segment. Only when logged in will the Library show the content that is available as part of the noniTunes subscription. it changes into the Done button for exiting the edit mode. and description of the issue. Sign In/Sign Out button. For quickly deleting a issue. tent type. (Reader Apps with Download Issue button. Name and description. Segment Download button. Back to issue button. For returning to the issue which is currently open. In case the issue contains Segments. Download button. it changes into the Done button for exiting the edit mode. For quickly deleting an Segment filter. For downloading the issue–including all Segments when available–in one action. For returning to the issue which is currently open. issue. description of the issue or Segment. A thumbnail of the cover. For returning to Library Overview page the Library Overview page.Chapter 04 Using the Reader App The following components are available (see examples on the following pages): Segments Overview page Back to Overview button. all Segments will also be downloaded. The name and Issue name and description. Once tapped. Once tapped. The name and 87 . For downloadName and description. For filtering the Library by Edit/Done button. ing an individual Segment. The name Cover thumbnail. Segment.

Chapter 04 Using the Reader App D E A B C A B C D E Back to issue button Issue with Segments Downloaded issue without Segments Library filter Edit button Figure 13.1b. The assets of the Library Overview page on the iPad 88 .

Chapter 04 Using the Reader App A B C D E F G H A B C D E F G H Back to Overview button Back to Issue button Download Issue button Segment Filter Edit button Issue cover Downloaded Segment Not yet downloaded Segment Figure 13. The assets of the Library Segments Overview page on the iPad 89 .1c.

The name and A B C D E Library filter Segment filter Sign In/Sign Out button Issue Segment (not yet downloaded) Downloaded issue Segment Figure 13. A thumbnail Download button. The Library on the Android Reader App 90 . The following components are available: Library filter. and description of the issue. (Honeycomb only) For filtering D E A B C the Library by content type.Chapter 04 Using the Reader App 13. (Segments can only be downloaded individually.) description of the issue or Segment. of the cover or Segment. The name Cover or Segment thumbnail. This page is accessed by tapping the Library button in the Navigation bar. Name and description.2 Android App Library The Library of the Android Reader App shows all available issues and Segments. Only when logged in will the Library show the content that is available as part of the subscription. For downloading the issue or Segment.2. (Reader Apps with subscription functionality only) For signing in to or out of a subscription account. Segment filter. F Issue name and description. (Honeycomb only) For filter- ing the Library by Segment. Sign In/Sign Out button.

13. Choices by which the Library is currently filtered are indicated by a check mark. A list appears showing all available choices. Tap the Filter button in the top Toolbar. those by which the Library is not currently filtered do not have such a check mark.Chapter 04 Using the Reader App 13.) 91 . (Multiple selected choices are possible. Navigating between additional groups of issues can be done by swiping vertically. if issues are available in a specific language. The Library filter allows a user to filter the Library by content type (shown here on the Android Honeycomb) The filter is used by performing the following steps: Step 1.3 Navigating the Library The Library can display a variable number of issues at a time. When implemented. or defined by language).4. sports. A B A Filter button B Filter list Figure 13. choose the language from the filter to only show content in that language.4 Using the Library Filter A magazine can be set to belong to a particular type of publication (such as news. For instance. the Library Filter can be used to filter the Library by those content types.

Tap the filter item(s) to have them included in or excluded from the filtering process. 92 . Step 3. As soon as a choice is made. the Library content is updated based on the new filtering rules.Chapter 04 Using the Reader App Step 2. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list.

Choices by which the Library is currently filtered are indicated by a check mark. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list. those by which the Library is not currently filtered do not have such a check mark.5 Using the Segment Filter A magazine can be made available as a single download or in Segments. The Segment filter allows a user to filter the Library by defined Segments 93 . Android Reader App: When a choice is A Segment Filter button B Filter list Step 2. The filter is used by performing the following steps: Step 1. the Library content is updated based on the new filtering rules. The items which appear in the Segment Filter are determined as follows: iPad Reader App: only those Segments A B which have been defined for the issue appear in the list. A list appears showing all available choices.5.Chapter 04 Using the Reader App 13. made from the Library Filter first. Tap the filter item(s) to have them included in or excluded from the filtering process. Tap the Filter button in the top Toolbar. As soon as a choice is made. Figure 13. Step 3. only those Segments that have been defined for the issue which is chosen appear in the list. The Segment Filter can be used to quickly find the Segment which you are after.

vidual Segment. Segments can only be downloaded one-by-one. tap the download button for the issue. The issue including all its Segments will be downloaded. only that Segment will be downloaded Tap the Download button for an indi- Android and HTML5 Reader App Tap the Download button from either the Library or the Preview screen. tap the Issue Download button. Download a Segment by doing one of the following: On the Library Overview page. do one Tap the Issue Download button. tap the download button for the issue. load was started manually) Automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads).Chapter 04 Using the Reader App 13. The full issue including all its Segments will be downloaded. 94 . (iPad Reader App only. The issue including all its Segments will be downloaded. On the Segments Overview page.7 Opening an Issue or Segment An issue or Segment is opened from the Library by one of the following methods: By tapping its cover or Segment thumbnail. and only if the down- iPad Reader App Download an issue by doing one of the following: On the Library Overview page.6 Downloading Issues and Segments Downloading issues and Segments from the Library is done as follows: 13. of the following: On the Segments Overview page.

the downloaded issue is removed from the app but remains available for downloading in the Library. (iPad only) To finish the process. all Segments are automatically removed. As soon as the last Segment of an issue is removed. Use one of the following methods: Tap and hold the issue or a Segment of Library. do the following: The following will take place: iPad: A Remove button ( iPad Reader App ) will appear in the top left-hand corner of the cover.1 Segment of the issue is still available. tap Done in the Status bar of the Library. Do one of the following: Tap the Done button in the Status bar of the Android: A context menu appears with a Library Navigate to a different area of the Reader App. the Segment which is removed will appear dimmed and its Download button appears again. all Segments continue to be displayed in the For Segments: as long as at least one If the issue or Segment is part of a subscription and the user is logged in to the subscription account. 1 95 . (iPad Reader App only) Tap the Edit but- Cancelling the process To cancel the process without deleting the issue.Chapter 04 Using the Reader App 13. Do one of the following: iPad: Tap the Remove button Android: Tap the Delete command such as an open issue or the Store Android Tap the Back button The following will happen (where applicable): Bookmarks: any created Bookmarks for the issue will be removed. it is removed from the Library.8 Deleting an Issue or Segment An issue or Segment is deleted from the Library by performing the following steps: Step 1. For issues: when the issue does not consist of Segments. Delete command.1 Step 3. Step 2. the issue which needs to be deleted ton in the Status bar of the Library.

) Android: (Framework version only) On the Manage Applications screen (accessed via Settings App > Applications). before offering the user the possibility to access the latest issue of the magazine. this shell is displayed first. or the Library. Custom Home Page One possible way of customizing the Reader App is to embed it into another application which acts as a shell through which the Reader App is accessed. (See figure below. Obviously. Version Information The user can verify which version of the Reader App is installed. Two version numbers are provided: Application version: the version number of the Reader App. Framework version: the version number of the project with which the Reader App was build. it is entirely up to the design of this external shell how the method of accessing the magazine is presented. This information can be found in the following locations: iPad: in the Settings app of the digital device. 15. Figure 15. This means that when opening the Reader App. the Store.Chapter 04 Using the Reader App 14. This functionality can be used by publishers to first present other content to the user (such as an online TV guide). The version information of a Reader App on an Applie iPad 96 .

a message is displayed informing the user that the Reader App requires updating. Using the HTML5 Reader on a PC The HTML5 Reader App is specifically designed for viewing on a desktop PC/laptop using a suitable Web browser. navigational tools is done as follows: Any issues which are compatible with the currently installed Reader App can still be downloaded and read. respond by doing one of the following: Tap Cancel. these bars will be permanently visible. Mouse dragging. 97 . Mouse hovering. the version number of the Reader App is verified against the minimum version that is required to read the issue. To unlock each bar. You are transferred to the App Store Closing navigational tools. or the top Toolbar appear. click it once again. Hovering the mouse pointer over a certain area makes specific components appear. or right by using the mouse. The Navigation bar and the top Toolbar can be locked by clicking on it once. which makes the Navigate to Next Page. interaction is performed by using the mouse or keyboard. down. Instead of tapping the screen to invoke specific functionality. 17. The following behavior is different on a desktop PC/laptop compared to a touchpad device (see also figure below): Clicking vs tapping. When locked. issues which require an updated Reader App cannot be downloaded. Since these are devices without a touch screen. Reader App Updates New Reader App features are made available to publishers on a regular basis. When the Reader App version is lower than the specified minimum version. both old and new magazine issues can be downloaded and read. When a user starts the download of an issue. updating the installed Reader App is required. Navigate to Previous Page. Closing the Story Viewer / Page Viewer: click the Close button in the top right-hand corner top Toolbar TOC List: click the TOC List icon in the Locking the Navigation bar/top Toolbar. click once with the mouse. from where the new version can be downloaded free of charge. When a new magazine issue is published which makes use of a new feature. (See figure below. When receiving such a message. the download cannot be started before the Reader App is updated. Navigating between pages Tap OK.) or stories can be done by dragging the page up.Chapter 04 Using the Reader App 16. This process only applies to those Reader Apps which do not bundle the magazine content with the Reader App. the Navigation bar. left. The Reader App is not updated. This is the case for instance when hovering the mouse pointer over one of the Navigation Zones. After downloading.

When hovering the mouse pointer over the Navigation Zones. controls appear 98 .Chapter 04 Using the Reader App A B D E F C A E Top Toolbar B Navigate to Previous Page/Story area C Navigation bar Navigate to Next Page/Story Area F Navigate to Next Page Area D Navigate to Previous Page Area Figure 17.

to make this magazine much more dynamic. Used for creating an to a frame on a page. To scroll through the content. Used for adding a Slide Show to a page. All panels can be accessed via the Digital Magazines submenu of the Windows menu. Used for creating a Hotspot Scrollable Area panel. Widgets panel. Used for assigning an audio file Dossier Link panel. on a page. to a story in the magazine. Video panel. Used for assigning a video to a frame on a page. Used for including external content from the Internet. additional features are made available for adding multimedia content and interactive components: Audio panel. the default InDesign tools will already allow you to create content for publishing as a digital magazine. area on the page of which the content exceeds the frame’s width or height. the user can scroll either horizontally or vertically. Slide Show panel. Web Elements panel. Used for creating a link Hotspot panel. 5 . However. In essence.05 Creating Content One of the main advantages of the WoodWing’s Digital Magazine Tools is the ability to create content using Adobe InDesign. Used for including HTML5 widgets.

Chapter 05 Creating Content The DM Artboard functionality allows you to assign content for use on different devices (using differently sized screens). Adding Custom Metadata. The Concept. see http://www. chapter 40.ofip. such as digital magazines. In this chapter. see the Enterprise 7 Admin Guide.info. Digital Magazine Configuration – Step 7. books and brochures. This chapter describes the creation of the following components of a magazine: Story Dossiers Pages Text View Slide shows Video Audio files Web Elements Dossier Links Hotspots Widgets Scrollable Areas Custom Objects Help page Shared Content A note about ofip The ofip format is an initiative of WoodWing Software aimed at developing a standardized data format for interactive publications. WoodWing advices to get familiar with the ofip features and possibly start implementing them into your current workflow with immediate effect. delivery platforms.) With the expectation that this format and its features are going to be implemented by Reader Apps. (For more information. To read more about the concept of creating a digital magazine and how the created content relates to the same content on a digital device. For more information about the newly introduced ofip metadata properties. Newsstands. you will learn how to use the tools for creating dynamic content and you will learn about the exact specifications required for creating a digital magazine. newspapers. 6 . on an increasing level in the near future. etc. see chapter 3.

a header image can be used and images related to the story can be shown following the story at the bottom of the page. but these may not be assigned to the digital magazine Publication Channel). Step 3. 7 . the system will expect each of these Dossiers to be set up in a certain way (as we will see in the next sections of this chapter. tion. For each story (this includes the cover. Creating a Story The creation of a digital magazine involves the creation of stories. Navigate to section 5. Exporting Content. Creation of a Dossier. and any full page adverts in the magazine). you can start right away with designing the layout. table of contents. Design of the created pages. as well as in chapter 6. The quickest way of creating a story is by making use of Dossier templates which already contain the content required for that story. Creation of one or more pages. Each step is explained in the following sections. the system either expects a styled layout or an article (used as the text for the Text View mode) to be present in the Dossier. (The Dossier may contain additional articles or layouts in portrait orientation. that video or the images that are part of the Slide Show also need to be stored in the Dossier. a Dossier needs to be created. For a successful export. the system expects the Dossier always to have one layout in landscape orientation assigned to the Publication Channel of the digital magazine. but these may not be assigned to the digital magazine Publication Channel) page in portrait orientation. For viewing the magazine in portrait orienta- When the Text View is used for displaying a If a layout contains a video or a Slide Show. Either needs to be assigned to the Publication Channel of the digital magazine. Designing a Page. Step 2. If your company makes use of such a workflow and Dossiers and layouts do not have to be created from scratch. (The Dossier may contain additional layouts in landscape orientation. All of these images need to be part of the Dossier and the images that follow the story also need to be assigned to the Publication Channel of the digital magazine.) The following is a summary of those rules: For viewing the magazine in landscape orien- In this user guide we follow a basic workflow for creating a story: Step 1.Chapter 05 Creating Content 1. tation.

The story title as used in the Displayed in the following locations story is about as displayed in the following locations of the Reader App: below each story in the Story Viewer / Page Viewer. Step 2. in a Bookmark. Used as the text for the shared link in 8 . A description of what the Story title. Figure 2. see the Smart Connection 7 User Guide for InDesign or the Content Station 7 User Guide.Chapter 05 Creating Content 2. In the Dossier properties window. perform the following steps: Step 1. if it exceeds the width of the page of the Reader App: below each story in the Story Viewer / Page Viewer. Keep both the Description short. the Dossier application in Content Station Create a Dossier based on files avail- able in the system using Content Station or Smart Connection for InDesign A B Create a Dossier when checking in a layout using Smart Connection for InDesign For more information about these methods. in a Bookmark. The section name as displayed in the Section Viewer of the Navigation bar on the reader device. ellipses are shown for the part which cannot be displayed. set the following properties (either during the creation of the Dossier or after the Dossier has been created):  C D E A D Preview B Description Story title E Intent C Section title Preview: Used for indicating that a Dossier contains content for use in the issue preview functionality in a Store. This content is extracted from the ofip file by a delivery system. in each entry of the TOC List. in each entry of the TOC List. Use any of the following methods: Create a Dossier from scratch by using preview in the Reader. allowing the user to preview a complete dynamic story as opposed to a single-page static image. The Dossier dialog box in Content Station showing the various Digital Magazine properties Section title. a Facebook post. Creating a Dossier To create a Dossier for a digital magazine story. following areas: Description.

Links the Dossier contain- viewing the page in portrait orientation? If so. instead an article should be created. he or she will be directly navigated to the Help page. the creation of a layout is not required. ellipses are shown for the part which cannot be displayed. 3. (When the user taps the button.) 1 layout or a styled article (to be displayed in Text View mode) Should the user be able to scale the text when Help. Intent.) ing the layout with an explanation about how to use the Reader App to the Help button in the Reader App. Will the content be displayed in separate InDesign CS5 users can apply formatting and styling (including the use of tables) to the article 9 . or will the layout consist of one continuous page (typically used for a table of contents)? This obviously affects the dimensions of the layout. (When the user taps the button. do one of the following: cated layout Dossier is to be used: InDesign CS4 users: create a dediInDesign CS5 users: create a dedicated TOC. if it exceeds the width of the page preview in the Reader. Choose the intent with which the required? If so.1 This article will be displayed in Text View mode.Chapter 05 Creating Content Used as the e-mail subject when shar- ing a link by e-mail. Creating a Page When creating a page. he or she will be directly navigated to the table of contents. the following considerations should be made: Is a styled page in portrait orientation Keep both the Story title short. Links the Dossier contain- ing the layout(s) with the table of contents to the TOC button in the Reader App. pages (typically used for regular stories).

this will all work. the dimensions of an exported page are not based on the dimensions of the layout on which the content is placed any more. As long as the content fits properly within the boundaries of the artboard. 10 . table of contents. Using these Dossier templates will greatly speed up the process of creating content. including placing it (partly) on the pasteboard. Because the artboard will also work when placed (partly) over the pasteboard. the export will succeed. 3. If your workflow involves the use of layout templates and layouts are ready for you to be used. Whichever method you will be using. Practically though. the dimensions of a DM Artboard are used. etc. Multiple DM Artboards can be set up for a layout. Initial page size Of course. It is even possible for the user to move the artboard around. a very small layout could be created. all content within the boundaries of the mask is included in the export. As far as the DM Artboard functionality is concerned. with a DM Artboard containing small-sized content. but only one is visible at a time. an InDesign user will prefer to view the layout in either actual size. Its dimensions are based on the aspect ratio as defined in the configserver. it is even possible to create a page of any size and place the content (partly) on the pasteboard. repositioning the already present content can be time-consuming. a frame is placed on the page in as large a size possible to fit that page. Note that when changing the dimensions of the page at a later stage. In theory.php file. or fit within the current window so it is best to work within the boundaries of a layout. preparation is half the work. Instead. A DM Artboard is essentially a mask placed over the layout. as long as its aspect ratio is maintained. a layout needs to be given a certain size so that it can be easily worked on. you can skip this section and jump straight to section 5. it will export and look correctly.1 Page Sizes With the introduction of the DM Artboard functionality. The size or position of the DM Artboard can at any point be changed. Designing a Page.Chapter 05 Creating Content Your administrator may have set up Dossier templates for each part of the magazine (such as the cover.). When a DM Artboard is created. stories.

The DM Artboard for that device will then match the size of the layout. while any additional artboards will be placed within the boundaries of the created layout. see figure 3. For information about creating a layout in the exact size of a digital device. see appendix A. Layout Sizes. For an example of the use of an artboard. 11 .Chapter 05 Creating Content A good layout size to use is one based on the dimensions of the largest device that the content is going to be output to.1 on the next page.

All content placed in the area enclosed by the gray rectangle is included in the export. The artboard is positioned in such a way that its width matches that of the layout. while a DM Artboard for a 16:9 device is displayed on top of it (the gray rectangle). created in a 3:4 aspect ratio. All the content visible within the boundaries of the artboard is included in the export.1. 12 .Chapter 05 Creating Content Figure 3. In this example. a layout in InDesign is shown (in Normal viewing mode).

Bar size in pixels converted to various units of measurement Size Picas 48 pixels 49 pixels 50 pixels 62 pixels 2p2.273 pt 33.727 pt 27.9236 cm 0. Both bars can be made to stay visible (depending on the type of Reader App used) and will thereby obscure a certain part of the page.727 2p3.2 below shows the values converted to the regularly used units of measurement (based on 132 dpi/ppi).273 2p9.9429 cm 0.3788 in 0.193 cm 13 .3636 in 0.182 pt 26.3712 in 0.429 mm 9.818 pt Inches 0.621 mm 11.4697 in Millimeters 9.182 2p2.93 mm Centimeters 0. Table 3.818 Value (based on 132 dpi/ppi) Points 26.2. just in case these are obscured resulting in the reader not being able to access them. The sizes of these bars are as follows: Navigation bar iPad/Android Reader App: 50 pixels HTML5 Reader App: 62 pixels Top Toolbar iPad Reader App: 48 pixels HTML5 Reader App: 49 pixels Table 3.9621 cm 1.236 mm 9. You might therefore want to refrain from adding interactive content such as Hotspots in these areas.2 Effective Workspace The effective workspace of a page is further influenced by the configuration of the Navigation bar and top Toolbar in the Reader App.Chapter 05 Creating Content 3.

Set the Columns. Step 4. Choose New Dossier from the Dossier To create such a layout. Step 2.3 Landscape Orientation Creating a layout with one or more pages in landscape orientation is done under the following circumstances: When the Reader App has been configured to Step 7. Step 5. 2 If the page is made higher than the height of the device. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine. 1 list in the Check In dialog box to create a new Dossier. Bleed and Slug settings as required. or when it has been configured to display only pages in landscape orientation1. Creating a Dossier.Chapter 05 Creating Content 3. See appendix A. From the File menu. (Make sure that the required Dossier properties are correctly set as explained in section 2. Enter a width which exactly matches the width of the screen. Enter the number of required pages. Add the layout to a Dossier after the lay- 14 . Enter a height which at least matches the height of the device (higher values are allowed2). by choosing an existing Dossier from the Dossier list in the Check In dialog box. the layout may contain only one page.) out has been created. The Reader App can also be configured to display only pages in portrait orientation. perform the following steps: Step 1. Add the layout to a Dossier by doing one of the following: Automatically add the layout to a Dossier display pages in landscape orientation as well as in portrait orientation. Margins. Step 6. any content in those areas is not included in the export. Layout Sizes for the various page dimensions. choose New followed by Document to open the New Document dialog box. Step 3. Note that Bleed and Slug are not used as such.

See appendix A.4 Portrait Orientation Creating a layout with one or more pages in portrait orientation is done under the following circumstances: When the Reader App has been configured to Step 2. Enter a height which at least matches the height of the device (higher values are allowed).) out has been created. perform the following steps: Step 1. Layout Sizes for the various dimensions. In the New Document dialog box. Step 3. To create a layout in portrait orientation. (Make sure that the required Dossier properties are correctly set as explained in section 2. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine. portrait orientation need to be designed in the same way as the pages in landscape orientation (as opposed to using the Text View mode. or when it has been configured to display only pages in portrait orientation 1. Creating a Dossier.5 Text View Mode)2 by choosing an existing Dossier from the Dossier list in the Check In dialog box. If the page is made higher than the height of the device. The Reader App can also be configured to display only pages in landscape orientation.Chapter 05 Creating Content 3. the layout may contain only one page. enter the following values: Enter a width which exactly matches the Add the layout to a Dossier after the lay- width of the device. When using InDesign CS4 and the pages in Choose New Dossier from the Dossier list in the Check In dialog box to create a new Dossier. see section 3. Add the layout to a Dossier by doing one of the following: Automatically add the layout to a Dossier display pages in landscape orientation as well as in portrait orientation. 2 InDesign CS5 users can match the layout design by using the CSS styling features of the Text View mode 1 15 .

solely used for creating an article. make sure that it is not included in the export of the magazine.5. similar to creating a page in landscape orientation. Create the article by doing one of the following: Convert one or more text frames into an article. Enterprise can be set up in such a way that any selected image frames are automatically made part of an article. articles intended to be used for Text View mode are not allowed to contain any images.) Step 2. Each is described in the following sections. Text View mode is not available in the Android Reader App. or it can be a dummy layout.Chapter 05 Creating Content 3. 16 . Place an already created article (created using InDesign CS4 or InCopy CS4) on the layout. delete it from the article. the Elements panel or in Content Station. (If the latter. This could be the layout used for the page in landscape orientation. (Optional. However.5 Text View Mode When the Reader App has been configured to show pages in portrait orientation. Creating a Text View version of the page is done by creating an article on which the content of the Text View is based. 3.1 Using InDesign CS4 To create an article for Text View Mode using InDesign CS4. you have the choice over how the story is presented on such pages: as a fully designed page or in Text View mode. Should any image component exist. Creating a fully designed page is achieved by simply creating a layout in portrait orientation and adding designed content. Images can be included as well. perform the following steps: Step 1. Check with your administrator if this feature is enabled. Create a layout and save it to the system. Due to the different article formats used by InDesign CS4/InCopy CS4 and InDesign CS5/InCopy CS5. different workflow methods exist for each CS version. depending on your company’s setup) Once the article is created. check that no article components containing an image exist in the article by verifying the article’s content in the Smart Connection panel.

Click OK to close the Properties dialog box. Including other images (Optional) Additional images can be added to the story. This image needs to have the exact dimensions (width and height) in which it is going to be displayed on the digital device. Step 4. byline. italic. access the Properties dialog box for the image that needs to be set as the header. From the Intent list. Including a header image (Optional) To display an image as a header at the top of the article. Check with your administrator which Element Labels can be used. Apply any font styles (such as bold. assign an appropriate Element label (such as body. Element labels are used by the system for assigning a font family to the text. 17 . For each article component. Save the article by performing a Save Version or a Check In action. Make sure that only one image in the Dossier has the intent property set to Header. Step 2. Step 5. In InDesign or Content Station.Chapter 05 Creating Content Step 3. etc). caption. by doing the following: Make sure that images to be used are target- ted to the Issue of the Digital Magazine and are added to the same Dossier as the story they belong to. Make sure that the article is added to the same Dossier as the story it belongs to. perform the following steps: Step 1. Step 3. Which font is assigned to which label is determined by means of a configuration file.) to the text as required. choose Header. etc. which are displayed below the article.

Chapter 05 Creating Content 3. Creating Text View Markup Articles.6 Sections and Page Numbering Page numbering and sections have no influence on the order in which stories are displayed on the digital device. This ordering is determined by the Digital Magazine application in Content Station.5. 18 . 3. follow the steps as outlined in appendix B. You can therefore safely ignore setting the page numbering for each layout.2 Using InDesign CS5 To create an article for Text View Mode using InDesign CS5.

is placed above all other layers. defined by the inner area of the DM Artboard frame. It is part of a DM Artboard layer. The DM Artboard layer is a non-printable layer. meaning that it will not be part of the export. see section 3. which itself The DM Artboard layer is locked by default. The outer edges of the artboard.) 19 . The area which is not included in the export. defined by the DM Artboard frame.php file. defined by the area outside the DM Artboard frame. Content is only included in the export when the following conditions are met: The content needs to be placed on the art- board area (within the frame boundary) through the Editions panel The content needs to be assigned to a device defined in the configserver. Non-inclusion area. but note that this area extends beyond the stroke.1 Page Sizes.Chapter 05 Creating Content 4. Working with DM Artboards The DM Artboard functionality allows you to specify which layout items to include in the export to a particular device. The following DM Artboard components are recognized (see figure 4 on the next page): Artboard. see section 4. A DM Artboard is essentially a frame with the following characteristics: Its dimensions are taken from the settings as Safe area. The area which is included in the export. (This is indicated by a 60pt gray stroke. It has a 60pt stroke applied to the outside of the frame. Each is explained in the following sections. with a stroke color of 32% black (C0 Y0 M0 K32). Using the DM Artboard functionality is optional. The area identical for each used artboard. For more information about DM Artboards. Boundary.6 Working Without Artboards for more information.

A DM Artboard with also a 4:3 aspect ratio fits exactly around the page border. In the figure on the left. The figure in the middle shows the same 4:3 layout. Since the whole of the page lies within the artboard boundaries. Content placed on the pasteboard is not included. Content placed in the areas to the left and right of the layout or the pasteboard will not be included in the export. 20 . The use of DM Artboards. the two DM Artboards are shown simultaneously: the area shared by both artboards (marked in green) is the “safe” area. In the figure to the right.Chapter 05 Creating Content A B B A D C C A Artboard B Boundary C Non-inclusion area D Safe area Figure 4. as indicated by the gray non-inclusion area (although the non-inclusion area extends beyond the gray stroke). a layout is shown created in a 4:3 aspect ratio. but now with a 16:9 DM Artboard placed over it. meaning that content placed in this area will be included in the export for both devices (as long as it is assigned to the Editions for both devices). content placed anywhere on the page is included in the export.

Each created artboard is assigned to its respective Edition. From the Layout menu or the flyout menu of the Editions panel. Each defined device is represented by A new top layer is created in the Layers 21 . Create for Document. an Edition in the Editions panel.1 Creating a DM Artboard To create a DM Artboard. Use the Create for Page command on a Master page to quickly apply a DM Artboard to all pages which have that Master page applied. The following actions take place: DM Artboards (in the form of a rectan- gular frames with a wide gray border) are created on the layout.Chapter 05 Creating Content 4. one for each device as defined in Enterprise server. use the Create for Page or Create for Document commands to create artboards for those pages. For creating DM Artboards on the current page only. can be performed at any stage) For those pages for which no DM Artboards have been created. choose DM Artboard followed by one of the following commands: Create for Page. Make sure to assign all available DM Artboard Editions to the layout. panel. perform the following steps: Step 1. that all available DM Artboard Editions are assigned to it (for instance by performing a Save Version action). Issue that it needs to be part of. Open an existing layout and make sure Step 2. (Optional. Do one of the following: Create a new layout and save it to the Step 3. The content assigned to the Edition listed first in the Editions panel is made visible. For creating DM Artboards for all pages of the document.

Shift. Since the content of only one Edition can be displayed at a time.php file.3 Adjusting the DM Artboard When a DM Artboard is created. perform the following steps: Step 1. Resize the DM Artboard while maintain- ing its aspect ratio. or modify the way the artboard looks or even rename it. Select the DM Artboard by selecting it in the Layers panel or by selecting it on the page. Adjusting the size and/or position To adjust the size or the position of the DM Artboard. Renaming the DM Artboard To rename the DM Artboard. do the following: In the Editions panel. a frame is placed on the page in as large a size possible to fit that page. Its dimensions are based on the aspect ratio as defined in the configserver. rename the layer in the Layers panel. content belonging to other Editions is hidden. Do one of the following: Move the DM Artboard to its required position.2 Switching Between DM Artboards When a DM Artboard is created. the DM Artboard for that Edition as well as all content assigned to that Edition is made visible. When doing this. The best way of doing this is by dragging a corner while holding down 22 . For more information about working with Editions. Artboard Edition visible by clicking its eye icon. The frame is aligned to the middle of the layout and has a gray stroke applied. Step 2. unlock the DM Artboard layer by removing the lock in the Layers panel.Chapter 05 Creating Content 4. only one artboard can also be displayed at a time. make another DM 4. To display another DM Artboard. Unlocking the DM Artboard To perform any of these steps. it is automatically assigned to its corresponding Edition. You might want to adjust the size or position of the artboard to better place it around the items on the page. see the Smart Connection User Guide for InDesign.

lock it by setting the lock for the DM Artboard layer in the Layers panel. Shared content.Chapter 05 Creating Content When the aspect ratio does not correspond with the settings expected by Enterprise server. the more time is saved updating that content for output to different devices. only one layout needs to be created. since the minimum page height is exceeded for these types of pages. since this content is readily available. as long as its aspect ratio is maintained. the export will fail. Assigning content to a DM Artboard Edition is no different to assigning content to any other Edition: assign content that can be included in the export to multiple artboards to those multiple Editions. use very small type. 23 . However. a nonmatching aspect ratio is allowed. Using the Edition functionality offers the following advantages: Single layout. 4.) As far as the system is concerned. see the Smart Connection User Guide for InDesign. apply a different stroke or fill color. Content which is identical Locking the DM Artboard After completing modifying the DM Artboard. it might be impractical to create very small objects. Instead of creating separate Changing the look of the DM Artboard layouts in dedicated sizes. This speeds up the process of making (small) adjustments to (shared) content. and having to zoom in extensively in order to see the content. in all artboards (as long as it is placed in the same location and falls within the boundaries of all artboards) can be assigned to all Editions. in order to mark the boundaries of that device. do not make the artboard too small. an artboard can be of any size. The DM Artboard itself is also part of the device’s Edition. For more information about using Editions. To change the look of the DM Artboard. The more shared content is available. (The export will not fail when a long page is created.4 Assigning Content to a Device The DM Artboard feature makes use of the Edition functionality for assigning content for inclusion in the export to a particular device. assign content only to be included in the export to a particular device to that particular Edition only. This content therefore only has to exist once in the layout.

When exporting the content. In such a scenario.5 Points to Note When working with DM Artboards.Chapter 05 Creating Content 4. ible artboards are not included unless the export option Include Non-Printing Objects is selected. For information about exact dimensions. When exporting a layout to PDF. 1 24 . any vis- When exporting a layout to PDF. the following functionality is affected: When viewing a layout in Preview mode. thereby potentially displaying an empty area of the layout instead. see appendix B.6 Working Without Artboards It is perfectly possible to work without using any DM Artboards. not the boundaries of the DM Artboard. Page Sizes. the system will expect the layout to be in the dimensions of the device. able layer. You might for instance only want to create content for one particular device and don’t concern yourself with outputting to multiple devices. the dimensions of the layout are used as the base for the page size of the PDF. simply create a layout based on the dimensions for that device1 and don’t make use of the DM Artboard functionality. else the export will fail. any visible artboards are hidden. note the following: Since the DM Artboard is part of a non-print- 4.

Chapter 05 Creating Content 5. Hotspot panel. Only dynamic objects are listed. regular objects such as images follow the default InDesign placing to a frame on a page. Video panel. a slide show. To read these tables. Widgets panel. such as a 360-degree view of an object. the user can scroll either horizontally or vertically. Slide Show panel. For example: adding a Scrollable Area to a Hotspot is allowed. Designing a Page Designing a page for use in a digital magazine is much the same as designing a layout for any other type of publication. rules. Used for creating an area on the page of which the content exceeds the frame’s width or height. Used for assigning an audio file Table 5a on the next page provides an overview of what can and cannot be done in terms of placing dynamic objects inside other dynamic objects. look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done. Audio panel. on a page. but adding another Hotspot in that Scrollable Area is not. Used for turning a frame into a Widget (an HTML5 component with distinct functionality. and the number of times such an object can be placed on a layout. etc). The following sections will explain how to use each of the new Digital Magazine panels. Dossier Link panel. 25 . Used for assigned external content from the Internet to a frame on a page. Note that when including an object into another object is permitted. Table 5c on the following pages shows the icons used for each type of Digital Magazine content. Table 5b on the following pages shows an overview of the options for placing Hotspots in Scrollable Areas and vice versa. Used for adding a Slide Frame icons Show to a page. a zoomable image. Used for creating a link to a story in the magazine. These icons are only visible when the layout is displayed in Normal screen mode. frame on a page. that this is only allowed down to one level deep. Used for assigning a video to a Any frame containing content created using the Digital Magazine Tools can be recognized by an icon at the top of the frame. To scroll through the content. Used for creating a Hotspot Scrollable Area panel. The Digital Magazine Tools include additional panels with which it is possible to create the following dynamic content: All panels can be accessed via the Digital Magazines submenu of the Windows menu. Web Elements panel.

Limitations of dynamic objects on a page Created inside a: Slide Show Slide Show Video Audio File Dossier Link Web Element Hotspot Widget Scrollable Area Custom Object Audio File Dossier Link Web Element Scrollable Area Custom Object Number of placements on layout Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Video Hotspot Widget                                                                                  To read this table. look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done. 26 .Chapter 05 Creating Content Table 5a.

Digital Magazine frame icons Icon Content Type Audio Video Dossier Link Hotspot Icon Content Type Slide Show Web Element Scrollable Area Widget 27 . Placement options between Hotspots and Scrollable Areas Hotspot on a Hotspot Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot Hotspot Hotspot Hotspot on a Hotspot Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot                          To read this table. Table 5c.Chapter 05 Creating Content Table 5b. look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done.

6061 in Millimeters 8.636 Points 24 pt 43. (For more information. Figure 5. right. they overrule any underlying functionality Table 5c. You might want to add guides to the layout (template) to indicate the location of the Hotzones.394 mm Centimeters 0. top (Android Reader App only) and bottom of the screen which the user can tap in order to navigate the magazine. Table 4c below shows the width or height of the Hotzone areas (based on 132 dpi/ppi).Chapter 05 Creating Content Reader App Hotzones The Reader App can optionally be set up to include Hotzones: areas to the left. Hotzone width or height Zone Picas Left/right Top/Bottom 44 pixels 80 pixels 2p0 3p7. see the Customization chapters.) Its functionality will affect the way the designer has to position interactive content—such as Hotspots—on the layout since the Hotzone functionality overrules any underlying functionality.5394 cm 28 .636 pt Value (based on 132 dpi/ppi) Inches 0. Any interactive content positioned in a Hotzone will not function when the user taps inside the Hotzone.476 mm 15.8476 cm 1. iPad Hotzones (shaded in red) can be tapped to navigate the magazine.3333 in 0.

The Slide Show can only be viewed on the digital device. Slide Show is based may not be located on a Master page. Step 2. audio file. Also note that the Slide Show can be viewed in full screen mode on the digital device and that the dimensions of each image should therefore at least match the dimensions of the digital device on which the Slide Show is viewed. else the functionality of the Slide Show panel will not be available. Layout Sizes.) This check box cannot be selected under the following circumstances: The selected frame is already set to con- tain a video. To provide the panel with the images to be used in the Slide Show. not in InDesign. (For more information about Hotzones. Furthermore. Step 3. the bottom half of the panel shows all images that are available for adding to the Slide Show.1 Creating a Slide Show Any database image that is placed on the layout can be turned into a Slide Show by making use of the Slide Show panel. or Widget. The Slide Show panel can be shown or hidden by choosing Slide Show from the Digital Magazine submenu of the Window menu. To create a Slide Show. The images should be part of the same The selected image frame on which the Step 4. be aware of these zones when placing your frame containing interactive content. select the check box Enable Slide Show. or is set to act as a Dossier Link. In the Slide Show panel.1 on the next page. see Reader App Hotzones). the images should also be assigned to the same Issue of the magazine.) Dossier in which the layout containing the Slide Show is stored. (See figure 5.Chapter 05 Creating Content 5. or Scrollable Area. (For an overview of the dimensions used on the iPad. these will block any underlying functionality. Take note of the following requirements: Make sure that the images are cropped to the right size for display in full screen mode. only one image will be shown: the image that was selected on the layout). Make sure that the Slide Show panel is displayed. When Hotzones are enabled in the Reader App. Open the layout on which the Slide Show should be added. Clear the Enable check box in the respective panel. see appendix A. The top half of the panel shows all images that will be part of the Slide Show (when creating a new Slide Show. each image should be part of the same Dossier in which the layout containing the Slide Show is stored. Hotspot. Web Element. Select the image on the layout that should contain the Slide Show. 29 . perform the following steps: Step 1.

the top half of the panel to the bottom half of the panel. 30 . setting a custom transition is not possible. the bottom half of the panel shows those images that can still be added Step 5. Reorder the images in the top half of the panel by dragging them to the required position. it will appear in the top half of the panel and will disappear from the bottom half of the panel. it will appear in the bottom half of the panel and will disappear from the top half of the panel. The top half of the Slide Show panel shows the images that are currently part of the Slide Show. Figure 5.Chapter 05 Creating Content A default transition (swipe) is automatically added during export.1. Remove an image by dragging it from Step 6. Add images to or remove images from the Slide Show by doing the following: Add an image by dragging it from the bottom half of the panel to the top half of the panel. When the image is added. When the image is removed.

Chapter 05 Creating Content 5. but the total file size of the Reader App will increase.2. Open the layout in which the video should be added.1 As a URL Step 1. 31 .2.) A video can be played in the following ways: Automatically. select the check box Enable Video. Use this method to embed the video in the Reader App. the user can view the video within the assigned frame. Video can also be included in a Hotspot or Scrollable area. This frame may not be an inline or anchored frame. (The video will be immediately available to the user. Use this method to link to a file 5.2 Adding a Video A video can be assigned to any frame on the layout by making use of the Video panel. Step 2. Make sure that the Video panel is displayed. Step 4. Directly in fullscreen. Place an image in the frame to for instance act as a preview of the video. It is not possible to link more than one frame to a video per layout. When the page is viewed on the digital device. This frame may not be located on a Master page.) This check box cannot be selected under the following circumstances: which is located on the Internet. (See figure 5. if the frame is left empty. Video can also be included in a Hotspot or Scrollable area. In the Video panel. A video can be added in the following ways: As a URL. (This reduces the total file size of the Reader App. but an internet connection is required to view the video on the digital device. (For more information about Hotzones. the first frame of the video will be shown in the exported page. see Reader App Hotzones). The video is played directly in fullscreen mode as soon as the page on which the file is located is accessed. these will block any underlying functionality.) As a file. The video will be played as soon as the page on which the file is located is accessed. Select the frame or group of frames on the layout that should contain the video.1 below. Each method is explained below. The Video panel can be shown or hidden by choosing Video from the Digital Magazine submenu of the Window menu. Step 3. be aware of these zones when placing your frame containing interactive content. When Hotzones are enabled in the Reader App.

For supported video formats. enter the URL to the video file in the URL box. In the Location section.html HTML5_video HTML5: http://en. or Scrollable Area. see section 5. Step 6. see section 5.2. The process is now complete.org/wiki/ 32 .wikipedia. enter the URL in the Video panel Step 5. Figure 5. audio file. For information about the Play Automatically option in the Video panel.apple. In the Source section.com/ipad/ specs/ Android: http://developer. To reference a video by a URL.android. Clear the Enable check box in the respective panel. Clear the Enable Video check box. or is set to act as a Dossier Link. or Widget.4 Auto Fullscreen. Hotspot. choose Internet.1.2.Chapter 05 Creating Content The frame is already assigned to a video as a file.3 Auto Play. the assigned file is played (assuming that internet access is available). For information about the Directly in Fullscreen option in the Video panel. When the frame is tapped by the user on the digital device.2. Web Element.com/ guide/appendix/media-formats. The selected frame is already set to con- tain a Slide Show. see: Apple iPad: http://www.

Step 4. Select the frame or group of frames on the layout that should contain the video.com/ Video can also be included in a Hotspot or Scrollable area. the bottom half of the panel shows the videos to choose from This check box cannot be selected under the following circumstances: . Place an image in the frame to for instance act as a preview of the video.2.wikipedia. Make sure that the Video panel is displayed. The Video panel can be shown or hidden by choosing Video from the Digital Magazine submenu of the Window menu.2. be aware of these zones when placing your frame containing interactive content. select the check box Enable Video.Chapter 05 Creating Content 5. ipad/specs/ Android: http://developer.2 As a File Step 1. (For more information about Hotzones. the first frame of the video will be shown. 33 Figure 5.apple. Step 5. This frame may not be located on a Master page. When Hotzones are enabled in the Reader App.2. Make sure that any video that is to be used is uploaded to Enterprise and is part of the same Dossier as the layout in which the video is to be embedded. see Reader App Hotzones). In the Video panel. This frame may not be an inline or anchored frame. Step 3. The top half of the Video panel shows the video that is currently linked to the selected frame. if the frame is left empty.org/wiki/ Step 2. Open the layout in which the video should be added. For supported video formats see the following resources: Apple iPad: http://www.html HTML5_video HTML5: http://en.android.com/ guide/appendix/media-formats. these will block any underlying functionality.

Drag the video that should be assigned to the frame by dragging it from the bottom half of the panel to the top half of the panel. or Scrollable Area. see section 5. remove it by dragging it to the bottom half of the panel.Chapter 05 Creating Content The selected frame is already set to con- tain a Slide Show.2. For information about the Directly in Fullscreen option in the Video panel. 34 . see section 5.4 Auto Fullscreen. Step 6. Step 7. Double-click a video in the lower half or top half of the panel to preview it. For information about the Play Automatically option in the Video panel. When the video is added. it will appear in the bottom half of the panel and will disappear from the top half of the panel. Assign a video to the frame by doing the following: Step 7a. the bottom half of the panel shows all videos that are available to choose from. or is set to act as a Dossier Link. Hotspot. Step 7b. When the video is removed. If a video is already displayed in the top half of the panel.2. this section will be empty). audio file. In the Source section. or Widget. When the frame is tapped by the user on the digital device. Hover the mouse pointer over a video to display the file name in a tooltip. the embedded file is played. The process is now complete. Web Element. it will appear in the top half of the panel and will disappear from the bottom half of the panel. choose Dossier (selected by default).3 Auto Play. The top half of the panel shows the video which is currently set to be embedded (when no video is linked yet. Clear the Enable check box in the respective panel.

but an internet connection is required to play the audio file on the digital device. Each method is explained below. play will stop. When subsequently tapping the play button.) As a file. The audio will be played as soon as the page on which the file is located is accessed. when minimizing the video.3 Auto Play To have the video played automatically as soon as the page on which the file is located is accessed.2. 35 . When the page is viewed on the digital device. An audio file can be added in the following ways: 5.2. the user can play the audio file within the assigned frame. the video will be played fullscreen once more. select the check box Directly in Fullscreen in the Play section of the Video panel. Use this method to embed the audio file in the Reader App. (The audio file will be immediately available to the user. but the total file size of the Reader App will increase. Videos which are set to automatically play in fullscreen mode will only play in fullscreen mode.Chapter 05 Creating Content 5. Use this method to link to a file which is located on the Internet.) An audio can be played in the following ways: Automatically. Audio can also be included in a Hotspot or Scrollable area.3 Adding an Audio File An audio file can be assigned to any frame on the layout by making use of the Audio panel. select the check box Automatically in the Play section of the Video panel. As a URL. 5. (This reduces the total file size of the Reader App.4 Auto Fullscreen To have the video played directly in Fullscreen mode as soon as the page on which the file is located is accessed.

The Audio panel can be shown or hidden by choosing Audio from the Digital Magazine submenu of the Window menu.3. When Hotzones are enabled in the Reader App. or Scrollable Area. select the check box Enable Audio. 36 . choose Internet. video. This frame may not be located on a Master page.wikipedia. For supported audio formats see the following resources: Apple iPad: http://www.Chapter 05 Creating Content 5. Assigning an audio file to a frame is done by using the Audio panel Step 6. enter the URL to the audio file in the URL box. see Reader App Hotzones).1 below. Step 7. (See figure 5. Open the layout in which the audio file should be added.) This check box cannot be selected under the following circumstances: The selected frame is already set to con- Figure 5. these will block any underlying functionality. (For more information about Hotzones. or Widget. be aware of these zones when placing your frame containing interactive content.com/ ipad/specs/ tain a Slide Show.com/ guide/appendix/media-formats. Make sure that the Audio panel is displayed.1.apple.android.3. Android: http://developer. or is set to act as a Dossier Link.1 As a URL Step 1. (Optional) To have the audio played automatically as soon as the page on which the file is located is opened.3.org/wiki/ Step 5. In the Location section. In the Audio panel. Clear the Enable check box in the respective panel. Step 4. Hotspot. Step 3. Step 2. Web Element. select the check box Automatically in the Play section of the panel. Select the frame or group of frames on the layout that should contain the audio file. In the Source section.html HTML5_audio HTML5: http://en.

org/wiki/ Step 2. (For more information about Hotzones. When Hotzones are enabled in the Reader App.wikipedia. Make sure that any audio file that is to be used is uploaded to Enterprise and is part of the same Dossier as the layout in which the audio file is to be embedded.android.html HTML5_audio HTML5: http://en.3. see Reader App Hotzones). Step 4. For supported audio formats see the following resources: Apple iPad: http://www. The Audio panel can be shown or hidden by choosing Audio from the Digital Magazine submenu of the Window menu. This frame may not be located on a Master page. 37 . When the frame is tapped by the user on the digital device. Make sure that the Audio panel is displayed. the assigned file is played (assuming that internet access is available). these will block any underlying functionality.2 As a File Step 1. be aware of these zones when placing your frame containing interactive content. 5. Open the layout in which the audio file should be added.com/ ipad/specs/ Android: http://developer.apple. Step 3.com/ guide/appendix/media-formats.Chapter 05 Creating Content The process is now complete. Select the frame or group of frames on the layout that should contain the audio file.

The process is now complete. Assigning an audio file to a frame is done by using the Audio panel This check box cannot be selected under the following circumstances: The selected frame is already set to con- tain a Slide Show. see section 5. In the Source section.3 Auto Play. A list of audio files that are available in the Dossier appears. Step 8. Step 6. select the check box Enable Audio. 38 .Chapter 05 Creating Content This frame may not be an inline or anchored frame. Clear the Enable check box in the respective panel.3.3. Assign the audio file by doing one of the following: Select its check box Double-click its name The name of the currently selected file appears above the list. the assigned file is played. In the Audio panel. choose Dossier (selected by default). video Web Element. For information about the Play Automatically option in the Audio panel. (Optional) Use the playback controls in the Skim Over Audio section at the bottom of the panel to play the audio file. or Widget. Step 7. Step 5. Figure 5. or is set to act as a Dossier Link. When the frame is tapped by the user on the digital device.2. or Hotspot. Scrollable Area.

To create a Web Element. Make sure that the Web Element panel is displayed. The Web Element panel is also used to define how the external content should be displayed: embedded in the frame. perform the following steps: Step 1. A section of text can be turned into a hyperlink by placing a Web Element over it in the form of an invisible frame. a reference to the external content (in the form of a URL) can be assigned to the frame.4 Creating a Web Element Any frame on the layout can be turned into a Web Element by making use of the Web Element panel. Step 2. select the check box Automatically in the Play section of the Audio panel. Open the layout on which the Web Element should be added.3.Chapter 05 Creating Content 5. or in a Web browser. 5. Select the frame on the layout that should contain the Web Element. as a pop-up window. Step 3. 39 . This frame may not be an inline or anchored frame. Through this panel. not in InDesign. The Web Element panel can be shown or hidden by choosing Web Element from the Digital Magazine submenu of the Window menu. The external content can only be viewed on the digital device. This frame may not be located on a Master page. A Web Element can also be included in a Hotspot or Scrollable area. make sure to style the text in such a way that it is recognizable for the user as a hyperlink.3 Auto Play To have the audio played automatically as soon as the page on which the file is located is accessed.

Figure 5. When the user taps the frame. the Reader App is closed. make sure that the dimensions of the frame are sufficient to display the content of the external source properly. first clear the Enable check box in the respective panel. In the Web Element panel. the content is displayed in the default Web browser on the digital device. the content is displayed within the frame. The Web Element enabled and a URL entered in the Web Element panel This check box can only be selected when the selected frame is not yet set to contain a Slide Show or video.Chapter 05 Creating Content When the external content is to be displayed in the frame. In the URL box. the content is displayed in a pop-up window in the Reader App. Step 6.) 40 . or is set to act as a Dossier Link. Step 4. choose how the content should be displayed: In a Web Browser. select the check box Enable Web Element. an audio file. When the user taps the frame. or Hotspot. Embedded in the Page (in the Reader App). When the user taps the frame. In the Show Web Element section. If this is the case.4. enter the URL of the source that provides the content. As a Pop-up (in the Reader App). (Note that as a result of this action. In the URL box. Step 5. enter the URL to which should be linked. Scrollable Area.

Enable the following DMSetting for the Reader App: Colors/Enable transparent Web Elements 5. set the body tag to transparent. include the following references in the HTML page: Link to the Store: <a href=”ww://gotoStore”>Store Link</a> Link to the Library: <a href=”ww://gotoLibrary”>Library Link</a> This functionality will only work when the page is displayed in either an embedded frame on the page or in a pop-up window. not when displayed in an external browser.1 Transparent Web Elements A Web Element can be made transparent by doing the following: Step 1. To achieve this.2 Link to Store and Library The displayed HTML page can also include a link to the Store or the Library.3 Scale Content to Fit Screen In some circumstances. Step 2.4.4.Chapter 05 Creating Content 5. enable the following DMSetting: Web Element Popup/Scale content to fit screen 5. 41 . the page could be wider than the pop-up. the displayed HTML page may not fit the pop-up window properly. resulting in not all content being shown. In the HTML page which needs to be made transparent. For instance. To have the displayed HTML page scale to fit the pop-up window.4.

see Reader App Hotzones). Step 2.5 Creating a Dossier Link Dossier Links can be created in two ways: On a layout In a Web Element 5. the link is created by linking to the Dossier of that story.1 On a Layout Any frame or group of frames on the layout can be set to act as a link to a story. Select the frame or group of frames on the layout that should act as the link. When Hotzones are enabled in the Reader App. 42 . Since each story is represented by a Dossier.Chapter 05 Creating Content 5. Make sure that the Dossier Link panel is displayed. This frame or group of frames may not be located on a Master page. A Dossier Link can also be included in a Hotspot or Scrollable area. (For more information about Hotzones. but the feature can also be used to create cross-references between pages within the same story or between pages of different stories. Step 3. To create a Dossier Link. this is used for creating links on the cover as well as for creating a table of contents. Typically. be aware of these zones when placing your frame containing interactive content. perform the following steps: Step 1. Open the layout on which the Dossier Link should be added. Each is described in the following sections. This frame may not be an inline or anchored frame. these will block any underlying functionality. The Dossier Link panel can be shown or hidden by choosing Dossier Link from the Digital Magazine submenu of the Window menu.5.

5.1 only. perform the following steps: Step 1. This is not the page number assigned by InDesign. Modify the HTML page of the embedded content by doing the following: Step 3a.4 Creating a Web Element.Chapter 05 Creating Content Step 4. Step 6.) Example: <a href="ww://storylink?itemid=317&pageindex=1"> HTML Dossier Link</a> Step 5. Replace [index] by the page number in the story to link to.5. Step 3c. select the check box Enable Dossier Link.4 below.) This check box can only be selected when the selected frame is not yet set to contain a Slide Show. Create the Web Element as explained in section 5. audio file. (Optional) In the Page box. In the Dossier Link panel. Web Element.2 In a Web Element Dossier Links in a Web Element (also referred to as HTML Dossier Links) work on the iPad Reader App v1.8 and the Android Reader App versions 1. If no page number is entered—or a page number which does not exist—the link is set to the first page of the story. Include the following scheme for each Dossier Link: <a href="ww://storylink?itemid=[itemid]&pageindex= [index]">HTML Dossier Link</a> Figure 5. video. Make sure to create a Web Element embedded in the page. and 3. showing all Dossiers assigned to the same Issue as the layout on which the link is created.0 and 1. If this is the case. The Dossier list is enabled. Replace [itemid] by the ID of the story to link to. or Widget. or is set to act as a Scrollable Area or Hotspot.1. (See figure 5. enter the page number to which need to be linked. Export the magazine as explained in chapter 6. To create a HTML Dossier Link in a Web Element. Step 2. first clear the Enable check box in the respective panel. From the Dossier list. else the link will not work. 5. Exporting Content. choose the Dossier to which need to be linked. Step 3. 43 . The Dossier Link panel allows you to create a link to a Dossier Step 3b. but the “physical” page number (for example: a story with 3 pages will have page numbers 1. 2.

In the hierarchy. It is used to mimic the behavior of “selecting” a Hotspot. a pop-up appears showing additional information about the tapped area Hotspot Close button: a page element A Hotspot can also be made to automatically display its content as soon as the page is loaded.6.6.6 Basic Hotspots A Hotspot is an area on the page on which the user can tap. 5. after which additional content is displayed on top of the page. In the figure below for example. When tapping on one of the red Hotspots. it contains the content for that Hotspot (the content which appears after tapping the Hotspot). see section 5.7 Hotspots on Hotspots. on the Hotspot Content layer which acts as the button to close the content for one or all Hotspots with. The different types of layers result in a certain hierarchy which is reflected in the Hotspot panel. assigned to a Hotspot and therefore does not hold any Hotspot content. Unassigned layer: a layer which is not Base layer: a layer which itself is not assigned to a Hotspot but holds the frames which act as a Hotspot. such as a product or other item (for instance in the form of a popup window or menu structure). This functionality is typically used for presenting extra information about an item on the page. Hotspot Content layer which will appear in place of the Hotspot which is tapped. Hotspot content: the content which is disHotspot Content layer: the layer assigned to the Hotspot. a Hotspot panel is shown for a layout on which a Hotspot has been created on the 44 . the following terms and components are used: Hotspot: an area on the page on which the user can tap. Selected Hotspot: a page element on the Figure 5. For more information. played after the Hotspot is tapped.1 Terms and Components When working with basic Hotspots.Chapter 05 Creating Content 5. and any other scenario in which additional information needs to be displayed. A Hotspot can also be part of another Hotspot (referred to as a Hotspot-on-a-Hotspot). the Base layer acts as the bottom-most layer (but displayed as the top-most layer in the Hotspot panel). after which additional content is displayed on top of the page.

The user taps on a Hotspot. In this scenario. Hotspot Content layer: the ‘Scheveningen’ The regular functionality of a Hotspot would be as follows: 1. New content appears showing the additional information. its Hotspot Content items are placed on the ‘Scheveningen’ layer. 2. 2. The user closes the additional content by tapping the same Hotspot or another Hotspot. 3. New content appears showing the additional information. The Hotspot panel displays the hierarchy of the created Hotspot (see the text for a detailed explanation of this structure) 45 .6. Figure 5. The user taps on a Hotspot.Chapter 05 Creating Content ‘Background’ layer. the layers can be matched to the Hotspoton-Hotspot terms as follows: Base layer: the ‘Background’ layer. the Hotspot itself appears again.1. 3. The Hotspot that is tapped disappears and the Selected Hotspot appears in its place (optionally designed differently and placed in a different location). A more advanced method is the following: 1. The additional content can be closed by doing one of the following: Tapping the same or another Hotspot layer (only if there is no Hotspot Close button) Tapping the Hotspot Close button Tapping the Selected Hotspot (only if there is no Hotspot Close button) When the Hotspot Content disappears.

6. showing additional information  The pop-up window is the Hotspot Content which appears after tapping the Hotspot.  Initial view on the tablet: the layout and the Hotspot is shown (here the red item on the page)  When the Hotspot is tapped. It is placed on a different layer.2 Layers The Hotspot functionality makes use of layers. and Hotspot Close button) are created on a different layer (either a dedicated layer or an existing layer). Using the Hotspot panel.Chapter 05 Creating Content 5. the components which appear after tapping the Hotspot (such as the Hotspot content. The Hotspot is created on a base layer 46 . a pop-up appears. the Selected Hotspot. The Hotspot itself is created on any of the layers of the regular layout.

audio. or another Hotspot.7 Hotspots on Hotspots). see table 5a). 47 . other added objects cannot contain another Hotspot. Widget. even as large as the page that it is on. a Web Element. or Scrollable Area.Chapter 05 Creating Content The figures below show how the Hotspot is shown on the tablet and how the displayed items are setup in InDesign.3 Size and Content In essence.) 5. this second Hotspot however cannot contain another Hotspot (or indeed other dynamic objects. video. Since the Hotspot content is nothing more than one or more separate page items within the InDesign layout. it can contain any type of content. (For more examples. Dossier Link.6. see later in the chapter. including a Slide Show. For example: it is possible that a Hotspot contains a Scrollable Area and that this Scrollable Area contains a Hotspot. Although the Hotspot content can contain another Hotspot (see section 5. the Hotspot content can be set to any size.

(For more information about Hotzones.4 Creation To create a Hotspot. If this is the case. Only one Hotspot Content can be set to automatically appear for each 48 . Step 4. For more information.6.Chapter 05 Creating Content 5. Step 5. see section 5. see table 5a and table 5b. Create an item on the layout which should act as the Hotspot. select the Show on a Master page. Step 2. Other limitations which prevent this check box from being unavailable are shown in table 5a and table 5b. anchored frames. see Reader App Hotzones). This can either be a frame or a group of frames and can be placed on any layer except a layer which acts as a DM Artboard layer. This will however create a Hotspot on a Hotspot which is a different process. (Optional) Make sure that the Layers panel is displayed. Make sure that the Hotspot panel is displayed. or is set to act as a Scrollable Area or Dossier Link. select the check box Enable Hotspot. You can also create the item on a layer which acts as a Hotspot Content layer for an already existing Hotspot. When Hotzones are enabled in the Reader App. Step 6. Design the layout on which the Hotspot is to be placed. video. Since the Hotspot functionality makes use of layers. it is handy to keep track of the available layers and whether they are displayed and/or active at a given time. This check box can only be selected when the selected frame is not yet set to contain a Slide Show. these will block any underlying functionality. Make sure that the item(s) created in step 2 are selected. Widget. be aware of these zones when placing your frame containing interactive content. For more information. Automatically check box. The created frame(s) may not be inline or Certain limitations apply to placing Hotspots in other dynamic objects. (Optional) To make the Hotspot Content appear automatically whenever the page is loaded (as opposed to the user having to top on the Hotspot to make the content appear). Web Element. In the Hotspot panel.7 Hotspots on Hotspots.) Take note of the following: The created frames may not be located Step 3. Step 7. perform the following steps (see also the figures on the following pages): Step 1. audio file. do the following: In the Hotspot panel. The Hotspot panel can be shown or hidden by choosing Hotspot from the Digital Magazine submenu of the Window menu. first clear the Enable check box in the respective panel.

Do one of the following: Press Enter. else the panel options will not be available. 6. In the Hotspot panel. enter a descriptive name for the layer. the functionality is removed from Hotspot B and set to Hotspot A. 49 . In the Layer Name box. To create the Hotspot content on a new layer.Chapter 05 Creating Content page. Step 8c. The following actions take place: A new layer is created in the Layers panel. 8a – 8c to create additional Hotspot Content layers. The created layer is displayed in the Hotspot panel and placed one level lower than the base layer (the layer on which the Hotspot itself is placed). Continue with Step 9 or 10. click Create New Layer (selected by default). perform the following steps: Step 8a. Step 8b. Click OK.) Step 8. This can be done in one of the following ways: On a new layer (see step 8) On an existing layer (see step 9) Hotspot content on a new layer (Make sure that Steps 5 and 6 have been performed. (Optional) Repeat Steps 5. When setting this option for Hotspot A while it is already set for Hotspot B. we need to specify the layer on which the Hotspot Content is going to be placed. Step 8d. Step 8e. Now that the Hotspot is defined.

The content of all existing Hotspot Content layers apart from the current Hotspot Content layer is hidden (this makes the process of working on the content of the current Hotspot Content layer more convenient) cannot be assigned as a Hotspot Content layer. In the list of Existing Layers. see section 5. Step 9b. Step 12. perform the following steps: Step 9a. For more information. click Edit Layer. Continue with Step 10. click Use Existing Layer. Make sure to not accidentally select a different layer in the Layers panel. else the panel options will not be available. Select the Hotspot for which content should be created.7 Hotspots on Hotspots. The option is not available when: Only one layer exists. In the Hotspot panel. Multiple layers exist but each of these Step 11. because they act as a Scrollable Area layer or a DM Artboard layer. To create the Hotspot content on an existing layer.) Step 9. not to multiple layers. This will however create a Hotspot on a Hotspot which is a different process.Chapter 05 Creating Content Hotspot content on an existing layer (Make sure that Steps 5 and 6 have been performed. select the checkbox for the layer to which the Hotspot Content needs to be added. Step 9c. else you might see unexpected results when the Hotspot is tapped. You can also create the item on a layer which acts as a Hotspot Content layer for an already existing Hotspot.) Hotspot content can be assigned to one layer only. With the Hotspot Content layer defined. Create the content which should be displayed when a user taps a Hotspot. Step 10. In the Hotspot panel. 50 . The following actions take place: The Hotspot Content layer corre- sponding to the selected Hotspot is made active. we can now start creating content on it.

Chapter 05 Creating Content Figure 5. 51 .4a.6. The starting point for creating a basic Hotspot: a layout which is going to display information about certain locations. It has one background layer on which the Hotspots (represented by the red layout items) are also placed. Shown to the right are the Hotspot panel and InDesign’s Layers panel.

6.4b. 52 . Note the position of the new layer in the Hotspot panel: because it is seen as part of the layer on which the Hotspot itself is placed. the ‘Enable Hotspot’ option in the Hotspot panel has been selected. and after clicking OK the new layer has appeared in the Layers panel as well as in the Hotspot panel. the new layer is positioned one level below this layer. With a Hotspot selected on the Background layer (layout item “2”).Chapter 05 Creating Content Figure 5. A new layer has subsequently been created by using the ‘Create New Layer’ feature of the Hotspot panel.

the Hotspot content has now been created. Tapping the Hotspot again will close the displayed Hotspot content.6. With the newly created layer (‘Scheveningen’) made active in the Layers panel.Chapter 05 Creating Content Figure 5. 53 . In this basic use of a Hotspot.4c. tapping Hotspot ‘2’ will display additional information about the location in the form of a pop-up window.

the Hotspot  When the Hotspot is tapped.Chapter 05 Creating Content Chapter 05 Creating Content Hotspot Hotspot Hotspot Content Hotspot Content A Starting point on the tablet: the page con Starting point on the tablet: the taining a single Hotspot is shown (here the red taining a single Hotspot is shown item on the page) item on the page) B Hotspot is tapped. up window). Hotspot Content Hotspot Content Hotspot Hotspot  The Hotspot Content (here in the form of Content (here in the form of a pop-up window) is placed on a separate window) is placed on a separate layer. The Hotspot is created on a base layer 139 54 . the Hotspot Content appears (here in When Content appears (here in the form of a popthe form of a pop-up window).

it now looks as if the Hotspot has been “selected”. and assigning this as a Selected Hotspot. On the Hotspot Content layer. By placing a new frame in the same size. For instance: suppose four Hotspots in the form of a row of buttons are available on a page. make sure to group them). For the user. each displaying their Hotspot Content in the same area above the row of buttons. The Selected Hotspot feature solves this. the user is unable to tell for which Hotspot the content is currently shown when tapping each button. the Hotspot which is tapped is kept visible.6.6. Step 2b. This behavior works fine for most scenarios. Create the Hotspot and Hotspot Content as described in section 5. Do the following: Step 2a.Chapter 05 Creating Content 5. meaning that both the Hotspot and the Hotspot Content are displayed. select the Enable Selected Hotspot check box in the Hotspot panel. this new button will be shown instead of the original Hotspot. With the frame or group of frames selected. shape and position as the original Hotspot but with different visual properties (such as a different color).5 Creating a Selected Hotspot In the default Hotspot behavior. In case the Selected Hotspot functionality should be removed from the page item. Step 2. 55 . Using the default behavior. The creation process is as follows (see also the figures on the following pages): Step 1. Other scenarios though might require a visual indication that the Hotspot is “selected”. select the item and choose None in the Hotspot panel. (When this contains multiple frames.4 Creation. create the object that should act as the Selected Hotspot.

In this example. 56 . thereby mimicking a ‘selected state’. Tapping the Selected Hotspot will close the displayed Hotspot content as well as the Selected Hotspot. Tapping the red Hotspot will seem to make it change color. To better indicate to which location on the map the sidebar information refers.5. The item is given this functionality by selecting it on the layout and choosing the ‘Enable Selected Hotspot’ option in the Hotspot panel. a Selected Hotspot has been created (the blue layout item). the Hotspot content is displayed in a sidebar instead of a pop-up. This item now appears as soon as the original Hotspot is tapped. the size and position of the Selected Hotspot is identical to the underlying Hotspot apart from the color (but the use of this technique is only limited by your creativity). In this example.Chapter 05 Creating Content Figure 5.6.

5 Creating a Selected Hotspot). On the Hotspot Content layer. create the object that should act as the Hotspot Close button. Step 2. all restrictions for working with Hotspots on Hotspots apply. When doing so. (Optional) Create the Selected Hotspot as described in section 5. (When this contains multiple frames. select the Enable Close Button check box in the Hotspot panel. Using the Layers panel.6.6 Creating a Hotspot Close Button When a Selected Hotspot has been created (see section 5. When an action is not allowed. Layers created using the Hotspot panel can only be renamed by using the Layers panel.6. In case the Hotspot Close button functionality should be removed from the page item(s). With the frame or group of frames selected. the Hotspot Content can be hidden (and the Hotspot itself displayed again) by tapping the Selected Hotspot. The creation process is as follows (see also the figures on the following page): Step 1.6. a Hotspot Close button can be created to better indicate this functionality to the user.6. select the item and choose None in the Hotspot panel.5 Creating a Selected Hotspot.6.Chapter 05 Creating Content 5. Create the Hotspot and Hotspot Content as described in section 5. make sure to group them). Step 3. a message will inform the user about this. Step 4. 5. Hotspots can be managed in the following ways: Renaming layers. Alternatively.4 Creation.7 Managing Hotspots using the Layers Panel The functionality of the Hotspot panel is close related to that of InDesign’s Layers panel. 57 . Moving layout items between layers.

a close button has been placed in the lower right-hand corner of the page. it can be beneficial to offer the user a separate close button to close all the Hotspot content with. the Hotspot content and the Selected Hotspot can be closed by tapping the Hotspot or Selected Hotspot. When using a Selected Hotspot. Note that when not using a Close button.6. Its functionality is enabled by selecting the item on the layout and subsequently choosing the ‘Enable Close Button’ option in the Hotspot panel.6. when the Close button is available. 58 . the Hotspot Content and the Selected Hotspot can only be closed by tapping the Close button.Chapter 05 Creating Content Figure 5. In this example.

a Selected Hotspot (the blue layout item) appears over the original Hotspot and additional information is displayed in a sidebar. Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer. In addition. a close button is shown in the bottom right-hand corner of the page Selected Hotspot Hotspot Content Hotspot Hotspot Close button  The Selected Hotspot.  The Hotspot is created on a base layer 145 59 .Chapter 05 Creating Content Hotspot Selected Hotspot Hotspot Content Hotspot Close button Starting point on the tablet: the page containing a single Hotspot is shown (here the red item on the page) A B When the Hotspot is tapped.

which holds the content for the Hotspot placed on the Level-1 Hotspot Content layer. after which additional content is displayed on top of the page. it contains the content for that Hotspot. Hotspot Close button: a page element on the Hotspot Content layer which acts as 60 .7. In the hierarchy.1 Terms and Components When working with Hotspots on Hotspots. It is used to mimic the behavior of “selecting” a Hotspot. Creating a Hotspot on a Hotspot is essentially the same as creating a basic Hotspot (see section 5. Hotspot content: the content which is disHotspot Content layer: the layer assigned to the Hotspot.6 Basic Hotspots). assigned to a Hotspot and therefore does not hold any Hotspot content. allowing the user to access additional information relating to what is shown in the original Hotspot. the following terms and components are used: Hotspot: an area on the page on which the user can tap. Level-1 Hotspot Content layer: the layer Level-2 Hotspot Content layer: the layer Selected Hotspot: a page element on the Hotspot Content layer which will appear in place of the Hotspot which is tapped. 5. The only difference is that all actions are completed in relation to an existing Hotspot of which the new Hotspot is part. A Hotspot Content layer can act as either a Level-1 Hotspot Content layer or a Level-2 Hotspot Content layer (see below). which holds the content for the Hotspot placed on the Base layer. the Base layer acts as the top-most layer.7 Hotspots on Hotspots The Hotspot Content layer can itself also contain one or more Hotspots. played after the Hotspot is tapped.Chapter 05 Creating Content 5. It also acts as the layer on which other Hotspots are placed. Unassigned layer: a layer which is not Base layer: a layer which itself is not assigned to a Hotspot but holds the frames which act as a Hotspot. This is referred to as a Hotspot on a Hotspot.

In the figure below for example. In this scenario. its Hotspot Content items are placed on the ‘Scheveningen’ layer.1. creating a Hotspot in a Hotspot which itself is already part of a Hotspot is not possible.Chapter 05 Creating Content the button to close the content for one or all Hotspots with. Their content is placed on the layers ‘Scheveningen Beach’ and ‘Scheveningen Harbor’ respectively. The different types of layers result in a certain hierarchy which is reflected in the Hotspot panel. A basic Hotspot has been created on the ‘Background’ layer.7. two additional Hotspots have been created. The Hotspot panel displays the hierarchy of the created Hotspots and Hotspots-on-Hotspots (see the text for a detailed explanation of this structure) Restrictions A Hotspot on a Hotspot can only be created one level deep. the layers can be matched to the Hotspoton-Hotspot terms as follows: Base layer: the ‘Background’ layer. Level-1 Hotspot Content layer: the ‘Scheveningen’ layer Level-2 Hotspot Content layer: the ‘Scheveningen Beach’ and ‘Scheveningen Harbour’ layers Figure 5. a Hotspot panel is shown for a layout on which three Hotspots have been created. 61 . On this layer.

Step 5. Step 6e. 6. (Optional) Repeat Steps 6. 62 . enter a descriptive name for the layer. Step 6b. Create a regular Hotspot as explained in section 5. perform the following steps (see also the figures on the following pages): Step 1.7. do the following: In the Hotspot panel. the functionality is removed from Hotspot B and set to Hotspot A.Chapter 05 Creating Content 5. Hotspot panel and placed one level below the Hotspot Parent layer. the Hotspot Content Layer is now referred to as a Level-1 Hotspot Content Layer. its content resides on the Hotspot Content layer. select the Show Now that the Hotspot is defined. Click OK. Step 3. Do one of the following: Press Enter. else the panel options will not be available. In the Hotspot panel. create a new layout item which is to serve as the new Hotspot. Following the definitions of the Hotspot-onHotspot terms. Select the newly created Hotspot.6. Creating a Basic Hotspot.2 Creation To create a Hotspot on a Hotspot. This Hotspot is placed on the Base layer. Continue with Step 8 or 9.) Step 6. In the Layer Name box. In the Hotspot panel. The created layer is displayed in the Only one Hotspot Content layer can be set to automatically appear for each page. perform the following steps: Step 6a. (Optional) To make the content for that Hotspot appear automatically whenever the page is loaded (as opposed to the user having to top on the Hotspot to make the content appear). This can be done in one of the following ways: By placing the content on a new layer (see step 6) By placing the content on an existing layer (see step 7) Hotspot content on a new layer (Make sure that the newly created Hotspot is selected. A new Hotspot-on-Hotspot item now needs to be created for the user to tap on. On the Hotspot Content layer. select Enable Hotspot. To create the Hotspot content on a new layer. Automatically check box. 8a – 8c to create additional Hotspot Content layers. The following actions take place: A new layer is created in the Layers panel. Step 6d. When setting this option for Hotspot A while it is already set for Hotspot B. we need to specify the layer on which the Hotspot Content is going to be placed (the layer referred to as the Level-2 Hotspot Content layer). Step 2. click Create New Layer (selected by default). Step 6c. Step 4.

Step 7c. else the panel options will not be available. Step 8. click Edit Layer. Step 11. The option is not available when: Only one layer exists The layer acts as a Level-2 Hotspot With the Hotspot Content layer defined.Chapter 05 Creating Content Hotspot content on an existing layer (Make sure that the newly created Hotspot is selected. The content of all existing Hotspot Content layer for an already created Hotspot on a Hotspot. click Use Existing Layer. Repeat steps 8 – 10 for any additionally created Hotspots. Create the content which should be displayed when a user taps a Hotspot. In the list of Existing Layers. The following action takes place: The selected layer is positioned one Content layers apart from the current Hotspot Content layer is hidden while the content for the Level-1 Content layer that it is part of is kept visible (this makes the process of working on the content of the current Hotspot Content layer more convenient) Step 10. level below the Level-1 Hotspot Content layer. Select the newly created Hotspot for which content should be created. To create the Hotspot content on an existing layer. Continue with Step 8 or 9. this will result in the content ending up in the wrong location within the hierarchy and will give unexpected results when the Hotspot is tapped on the device. Hotspot content can be assigned to one layer only. 63 . The following actions take place: The Hotspot Content layer corresponding to the selected Hotspot is made active. Step 7b. Step 9. In the Hotspot panel.) Step 7. select the checkbox for the layer to which the Hotspot Content needs to be added. Make sure to not accidentally make a different layer in the Layers panel active. not to multiple layers. we can now start creating content on it. In the Hotspot panel. perform the following steps: Step 7a.

Chapter 05 Creating Content Figure 5.7. a new item is created (the blue button on top of the image in the sidebar).1a. The starting point for creating a Hotspot on a Hotspot: a layout contains a previously created Hotspot of which the content is placed on the ‘Scheveningen’ layer. On this same layer. 64 . which is to act as the new Hotspot.

A new layer has been created (‘Scheveningen Beach’) by using the ‘Create New Layer’ feature of the Hotspot panel. After clicking OK.1b.Chapter 05 Creating Content Figure 5. the new layer has appeared in the Layers panel as well as in the Hotspot panel. With the new Hotspot selected on the ‘Scheveningen’ layer (the blue button over the image in the sidebar). the ‘Enable Hotspot’ option in the Hotspot panel has been selected. 65 .7. it is placed one level below that layer. Note the position of the new layer in the Hotspot panel: because it is seen as part of the ‘Scheveningen’ Level-1 Hotspot Content layer.

66 . tapping Hotspot ‘Beach’ will display the additional information in the top part of the sidebar.1c. In this basic use of a Hotspot on a Hotspot. Tapping the Hotspot again will close the displayed Hotspot content. the Hotspot content has now been created in the form of an extra sidebar overlaying the top part of the original sidebar. With the newly created layer (‘Scheveningen’) made active in the Layers panel.7.Chapter 05 Creating Content Figure 5.

Chapter 05 Creating Content Selected Hotspot Hotspot Content Hotspot on Hotspot Content Hotspot on Hotspot Starting point on the tablet: after tapping a Hotspot (not shown here). On this sidebar. referred to as the Level-1 Content layer. A B After tapping the Hotspot on a Hotspot. an additional Hotspot has been placed. the Hotspot Content for that Hotspot appears. Hotspot layer. referred to as the Content Level-2 Hotspot layer.  The Hotspot on a Hotspot item is placed on the Level-1 Hotspot Content layer layer  The Selected Hotspot. 67 153 Hotspot  The Hotspot is created on a Base layer . layer. a Selected Hotspot has appeared together with the Hotspot Content in the form of a sidebar. Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer.  The Hotspot on a Hotspot Content is placed on a separate layer.

select the Enable Selected Hotspot check box in the Hotspot panel.6. (When this contains multiple frames.7.3 Creating a Selected Hotspot. section 5. With the frame or group of frames selected. select the check box Close All.) The only difference is the level on which to work.7. In case the Hotspot Close button functionality should be removed from the page item(s). Step 4. Step 3.4 Creating a Hotspot Close Button The process of creating a Hotspot Close button for the Hotspot on a Hotspot is identical to that of creating one for a basic Hotspot. On the Hotspot-on-Hotspot Content layer. On the Hotspot-on-Hotspot Content layer. Step 2. 5. make sure to group them). see section 5. Create the Hotspot-on-Hotspot and Hotspot-on-Hotspot Content as described in section 5. (Optional) To have the button close the content for both the Hotspot and the Hotspoton-Hotspot.7. create the object that should act as the Hotspot Close button. In case the Selected Hotspot functionality should be removed from the page item.7. The creation process is as follows: Step 1.2 Creation. With the frame or group of frames selected. Step 5.6 Creating a Hotspot Close Button). The creation process is as follows: Step 1. make sure to group them). select the Enable Close Button check box in the Hotspot panel. (Optional) Create the Selected Hotspot as described in section 5.3 Creating a Selected Hotspot The process of creating a Selected Hotspot for the Hotspot on a Hotspot is identical to that of creating one for a basic Hotspot. (When this contains multiple frames. 68 . (For more information. Step 2. Step 2b. Do the following: Step 2a. Create the Hotspot-on-Hotspot and Hotspot-on-Hotspot Content as described in section 5. (For more information.6. select the item(s) and choose None in the Hotspot panel. create the object that should act as the Selected Hotspot.Chapter 05 Creating Content 5. select the item and choose None in the Hotspot panel.7.2 Creation.5 Creating a Selected Hotspot. The only difference is that an additional option becomes available through which all opened Hotspots can be closed.

it also displays the hierarchy of the layers used in the creation of Hotspots and Hotspots-on-Hotspots.5 Managing Hotspots using the Layers Panel The functionality of the Hotspot panel is close related to that of InDesign’s Layers panel. Enable Hotspot Used for assigning a layout item as a Hotspot. Used for efficiently working on new content on a particular Hotspot Content layer. Used for creating a dedicated layer on which the Hotspot Content is placed. Below follows a summary of all its features: Hotspot panel can only be renamed by using the Layers panel. a message will inform the user about this. Create New Layer When doing so. In addition. Layers list The layers list displays all layers available in the layout with the exception of the Digital Magazine Artboard layer.Chapter 05 Creating Content 5.8 Using the Hotspot Panel Most of the functionality of the Hotspot panel is described in the steps for creating a Hotspot or Hotspot-on-Hotspot. Hotspots can be managed in the following ways: Renaming layers. Moving layout items between layers. all restrictions for working with Hotspots on Hotspots apply. Expands all collapsed items in the Layers list. When an action is not allowed. the following actions take place: 69 . The layer acts as a Level-2 Hotspot Content layer for an already created Hotspot on a Hotspot. Collapse All Expand All Edit Layer Collapses all expanded items in the Layers list. Layers created using the 5. Note that the option is not available when the following conditions are met: Only one layers exists. Using the Layers panel. The first step is to select the Hotspot item on the layout for which content needs to be edited on its Hotspot Content layer. After clicking Edit All.7. Use Existing Layer Used for assigning an existing layer on which to place the Hotspot Content.

the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed. 70 . the button is used for closing the opened basic Hotspot as well as the Hotspot-on-Hotspot.Chapter 05 Creating Content The Hotspot Content layer corresponding to the selected Hotspot is made active. the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed. Enable Close button Used for creating a dedicated button to close the Hotspot with. Close All The content of all existing Hotspot Content layers apart from the current Hotspot Content layer is hidden. This will have the effect of the item changing its visual appearance. not anymore by using the Hotspot panel. When using this feature for a Hotspot on a Editing layer names Hotspot. shape and position is concerned) but only change some of its visual properties. (Only available for a Hotspot-on-Hotspot and only when the option Enable Close Button is enabled). When set. similar to ‘selecting’ the tapped item. None Used for de-assigning any assigned Selected Hotspot or Hotspot Close Button functionality from a frame. When enabling this feature for a Hotspot on a Hotspot. Enable Selected Hotspot Used for creating a layout item which acts as a replacement for the tapped Hotspot. editing layer names can only be done by using the Layers panel. Compared to the previous version of the Hotspot panel. Any items on a Hotspot Content Layer which do not act as a Selected Hotspot or Hotspot Close button will also be assigned ‘None’. Show Automatically Select this checkbox when the Hotspot Content needs to be displayed as soon as the page on which the Hotspot is located is loaded. One use example is to create an identical item (as far as size.

Step 3. A Widget is a bundle of specific files. (For more information about Hotzones. these will block any underlying functionality. 71 . Step 2. Through this panel. After choosing an available Widget from the list in the Widget panel. When Hotzones are enabled in the Reader App. To create a Widget. Hotspot.7. audio file. Clear the Enable check box in the respective panel. showing all Widgets available in the same Dossier in which the layout is saved to. Figure 5. Clear the Enable Widget check box for that frame. Select or create a frame on the layout that should contain the Widget.Chapter 05 Creating Content 5. For information about creating a Widget bundle. select the check box Enable Widget. In the Widget panel. Open the layout on which the Widget should be added. see appendix D. the content and/ or behavior of the Widget can be configured by selecting from various available settings. or Slide Show. Make sure that the Widget panel is displayed. It is assumed in this section that Widgets are already available and uploaded to Enterprise. or Scrollable Area. Step 4. see Reader App Hotzones). The selected frame is already set to con- The Widget list is enabled. perform the following steps: Step 1. tain a video. Working With Widgets. be aware of these zones when placing your frame containing interactive content. the Widget can be configured through specific settings This check box cannot be selected under the following circumstances: Another frame is already set to act as a Widget.9 Creating a Widget A frame can be turned into a Widget by making use of the Widget panel. or is set to act as a Dossier Link. Web Element. The Widget panel can be shown or hidden by choosing Widget from the Digital Magazine submenu of the Window menu. The selected frame may not be located on a Master page.

or Dossier Link. Widget. Hotspot. a Web Element. To scroll through the content. choose the Widget which needs to be added. The layer the page which holds the scrollable content. the user can scroll either horizontally or vertically. 72 . nor can the object added to the Scrollable Area itself contain another Scrollable Area (for example: you can add a Hotspot to a Scrollable Area. up to the width or height of the page that it is on. To create a Scrollable Area. perform the following steps: Step 1. containing the layout items for the Scrollable Area content. including a Slide Show. Design the layout on which the Scrollable Area is to be placed. audio. video. Step 5. various settings may be available such as check boxes. 5. the user can scroll through. Layers The Scrollable Area functionality makes use of layers. Depending on how the Widget is set up (see appendix D. Working With Widgets). Size and content In essence. Using the Scrollable Area panel. Step 6. etc. The Scrollable Area frame itself is created on any of the layers of the regular layout. but it is not possible to add another Scrollable Area in that Hotspot). the Scrollable Area content can be set to any size.Chapter 05 Creating Content If the required Widget is not found in the list. The frame on The scrollable content. The content which Scrollable Area Content layer. it cannot contain another Scrollable Area. Components A scrollable area consists of the following components: The Scrollable Area frame. it can contain any type of content. From the Widget list.10 Creating a Scrollable Area A scrollable area is an area on the page of which the content exceeds the frame’s width or height. However. The bottom half of the panel shows the available settings for the chosen Widget with which the content and/or behavior of the Widget can be configured. (Optional) Configure the Widget as required. text boxes. the Scrollable Content can be added to either a dedicated layer or to an existing layer. Since the Scrollable Area content is nothing more than an extra layer within the InDesign layout. lists. locate it in Enterprise and check whether the Widget has been assigned to the correct Dossier.

audio file. In the Layer Name box. or is set to act as a Dossier Link or Hotspot. Create an item on the layout which should act as the Scrollable Area. select the check box Enable Scrollable Area. Scrollable Content can be placed as follows: On a new layer (see step 7) On an existing layer (see step 8) Scrollable content on a new layer (Make sure that Steps 4 and 5 have been performed. 6. Select the frame or group of frames on the layout that should act as the Scrollable Area. see Reader App Hotzones). or Widget. we need to specify where the Scrollable Content is going to be located. Step 7c. It is possible to have multiple Scrollable Areas in a layout. This frame or group of frames may not be located on a Master page. 5. Make sure that the Scrollable Area panel is displayed. Web Element. Step 4. This check box cannot be selected under the following circumstances: The selected frame is already set to con- tain a Slide Show. Click OK. Step 7d. To create the Scrollable Content on a new layer. it is handy to keep track of the available layers and whether they are displayed and/or active at a given time. Step 7b. Step 6.) Step 7. enter a descriptive name for the layer. (Optional) Make sure that the Layers panel is displayed. be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones. Since the Scrollable Area functionality makes use of layers. When Hotzones are enabled in the Reader App. This frame may not be an inline or anchored frame. Clear the Enable check box in the respective panel. 73 . (Optional) Repeat Steps 4. else the panel options will not be available. A new layer is created in the Layers panel. these will block any underlying functionality. The Scrollable Area panel can be shown or hidden by choosing Scrollable Area from the Digital Magazine submenu of the Window menu. Step 3. Now that the Scrollable Area is defined. video. This can either be a frame or a group of frames and can be placed on any layer except a layer that already acts as a Scrollable Area Content layer. Clic k C r e a t e N ew L aye r (selected by default). 7a – 7c to create additional Scrollable Area Content layers.Chapter 05 Creating Content Step 2. perform the following steps: Step 7a. Step 5. In the Scrollable Area panel.

In the list of Existing Layers. Step 8d. No background is needed. Scrollable content on an existing layer Step 10. click the layer name to rename the layer. Make sure to not accidentally select a different layer in the Layers panel. The following actions take place: The Scrollable Area Content layer is The content of all existing Scrollable made active Area Content layers apart from the current Scrollable Area Content layer is hidden (this makes the process of working on the content of the current Scrollable Area Content layer more convenient) 74 . (Make sure that Steps 4 and 5 have been performed. perform the following steps: Step 8a. else you might see unexpected results. Continue with Step 8 or 9. (Optional) In the list of Existing Layers. Click Use Existing Layer. Continue with Step 9. The option is not available when: Only one layers exists Multiple layers exist but these act as a DM Artboard. Create the content through which the user should be able to scroll. else the panel options will not be available.Chapter 05 Creating Content Step 7e. Step 8c. select the layer to which the Scrollable Content needs to be added. Step 8b. the content will be displayed on top of the Scrollable Area frame.) Step 8. Click Edit Layer. To create the Scrollable Content on an existing layer. Step 9.

set the Intent to Help. Design the layout as required. 5. perform the following steps: Step 1. the Help page will automatically appear. when the user taps the button.).6 Custom Objects. The current version of the Digital Magazine Tools does not yet have a fully developed user interface for implementing a Custom Object in a magazine. Do not specify a URL in Step 5. this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout. Customizing the iPad Reader App – section 9.11 Creating a Custom Object Custom Objects are not available for the Android Reader App. etc. it can be linked to a Help button in the Navigation bar by doing the following: Step 1. a Help button will be added to the Navigation bar of the Reader App. In order for your reader to easily access this page.Chapter 05 Creating Content 5. Step 2. to which the created pages are linked. The creation of a Custom Object starts by creating a Web Element. how to use Slide Shows. Create a Dossier containing a page in horizontal and vertical orientation as explained in the previous sections.12 Creating a Help Page It is advisable to provide your users of the Reader App with a guide describing how to use the App and its dynamic content (such as how to navigate the magazine. In the Dossier properties in which the layouts are stored. Step 3. the aim is to create a place holder in the exported magazine which can be easily found and subsequently modified. Export the magazine and modify the exported package as outlined in chapter 7. 75 . Scrollable Areas. This can for instance be done in the form of graphics in a single-page document. With this property set. Step 2. To create a Custom Object. and therefore requires manual steps to be performed after the magazine has been exported. videos.4 Creating a Web Element. Follow the steps as outlined in section 5.

Step 1f. In the Dossier which needs to be set up for Content Sharing. choose Shared Article. From the Intent list. one Hyperlink can be created for sharing with others.13 Creating Shared Content The Shared Content feature is not available for the Android Reader App. (Optional. Step 2. only for Facebook and e-mail) In the Dossier properties window for the story. Create a Hyperlink by performing the following steps: Step 1a. E-mail: as the subject of the e-mail.Chapter 05 Creating Content 5. Step 1e. The Create Hyperlink dialog box appears. Creating a Hyperlink is part of the Content Station functionality and is done as follows: Step 1. This Hyperlink is a regular URL and can point to any type of content on the Web. Step 1d. Make sure that the check box for the magazine’s Publication Channel is selected for the Hyperlink in order to include the Hyperlink in the exported magazine. there is no need to first run the URL through a URL shorten service yourself. Click OK to close the dialog box and save the Hyperlink. Step 1b. 76 . such as an online version of the story. For each created story. External content can be shared with others directly from within the Reader App in the form of a Hyperlink. Click OK. In the URL box. enter the URL to the external source. This Hyperlink can be sent out by e-mail or by using social service networks such as Twitter and Facebook. The Reader App will automatically insert a shortened version of the URL for Twitter messages. choose New Hyperlink from the Create New button above the Publication Channels pane. enter a Story title. The Upload dialog box appears. This is used as follows: Facebook: as the clickable text in the created post. Step 1c.

Exporting Content. Summary In this chapter you have learned all about creating content for a digital magazine using InDesign. including the Dossier. You have seen how each component of a story is created. 77 .Chapter 05 Creating Content 6. Next step Exporting content: continue to chapter 6. the layouts in their various orientations and the actual content on the layout. It will teach you how to prepare and export created content using Content Station.

the majority of the time is spent in the Digital Magazine app. do one of the following: Double-click the Digital Magazine application in the Application pane on the Home page to open it in a new tab.) To access this application. The Digital Magazine Application When managing a Digital Magazine in Content Station. This application offers the following functionality: It shows an overview of the stories which have export Changing the order of the stories as they should appear in the magazine Exporting the content for use in a Reader App for a specific platform In this chapter you will learn how to prepare the created content for publishing as a digital magazine. and in which order they appear story It provides quick access to the Dossier of a It contains tools for exporting the magazine For an overview of the main interface of the Digital Magazine app. the following tasks can be performed: Defining which files should be included in the 1. Using the Dossier functionality together with the Digital Magazine application.06 Exporting Content The process of preparing files for export and that of subsequently exporting the content of the magazine takes place in Content Station. and see how the content is exported. been assigned to the magazine issue. Right-click the Digital Magazine applica- 80 . tion on the Home page and choose Open in New Window to open the application in a new window. see figure 1 on the next page.

Export toolbar. which content should be displayed in the Story pane. Shows all layouts and their pages for the story selected in the Story pane. Shows all Stories that have been assigned to the Brand/Issue combination as set in the Search pane. The components of the Digital Magazine application in Content Station 81 . combination of which content should be displayed in the Story pane. For choosing the device of The usage of each pane is explained in more detail on the following pages. Contains buttons for export- Device toolbar. Story pane. ing the magazine. For choosing the Brand/Issue Page preview panes. D A B C E F A F Search pane B Device toolbar C Story pane Page preview pane (portrait pages) D Export toolbar E Page preview pane (landscape pages) Figure 1.Chapter 06 Exporting Content The Digital Magazine page consists of the following components: Search pane.

Step 3. When a Story has not been assigned to be part of the selected device. (See section 1.) Note that at all times. but if only one Edition has been defined for the chosen Issue. A button is available for each defined Edition (set up for the chosen Issue in the Search pane) which matches the device setup in configserver.2 The Device Toolbar. Click Search.3 The Story Pane). only one button will appear. To do this.) All stories that have been assigned to the chosen Brand/Issue combination appear in the Story pane. Step 2. 1. (Optional) From the Brands list. For example. The other areas are initially empty and are loaded as soon as a search has been performed using the components of the Search pane. 82 .1 The Search Pane When first opening the Digital Magazine application.php. only the Search pane and Export toolbar are shown. Clicking a button will display the corresponding content in the Story pane for that device (based on the content assigned to the corresponding DM Artboards in InDesign. multiple devices can be set up on the Server. choose the Brand of which the magazine is part. all stories assigned to the Issue are displayed in the Story pane. the preview will change to a default icon (see section 1. The following actions take place: The buttons of the Device Toolbar appear.Chapter 06 Exporting Content 1. perform the following steps: Step 1. (Optional) From the Issue list. choose the Issue of which the magazine is part. This is done to make sure that reordering the stories can be performed as a single step affecting all available devices and prevents having to reorder the stories for each device in separate steps. Only the Issues with the Publication Channel of type Digital Magazine appear in the list.2 The Device Toolbar The Device toolbar contains buttons for one or more defined devices to output to.

1 The Search Pane). the Dossier for that story opens. Each story is represented by a preview and some additional information: Preview.) When the layout does not contain any page items for the selected device in the Device toolbar. the Story pane is populated with the available stories for that magazine1. when available.3. Status icon. One of several types of previews Order number.3 The Story Pane After locating the available stories of a digital magazine using the Search pane (see section 1. When no layouts have been assigned to the correct Publication Channel. The preview is actually a Dossier: when double-clicking it.2 The Device Toolbar). The components of a story in the Story pane any layouts. The Interface. (Assigned automati- cally) Indicates the position of the story in the magazine. The first layout in landscape orientation is used. (For more information about resizing the interface.Chapter 06 Exporting Content 1. The Dossier name. (in the form of a light gray page) is shown under the following conditions: When the Dossier does not contain Preview of a page Order number Dossier status icon Dossier name A default preview. The area of the Story pane can be adjusted by dragging the gripper area (the dividing bar between the Story pane and the Pages Preview panes) to the left or right. the access menu of the story’s Dossier appears. see the Content Station User Guide. An empty preview Figure 1. and choosing the Device for which the content is intended in the Device toolbar (see section 1. Title. A story appears in the Story pane as soon as it has been assigned to the required Publication Channel for the magazine. The Dossier status icon. A B C A B C D can appear: D A preview of the first page of the first layout in the Dossier. 1 83 . chapter 3. when right-clicking it.

Only the pages appear for those layouts which have been set for publication to the currently displayed Issue. Two separate panes exist: one showing pages in landscape orientation only (top pane). 84 . Not only will this ensure an error free export. chapter 3. see the Content Station User Guide.) 2. (For more information about resizing the interface.4 The Page Preview panes When selecting a story in the Story pane (see section 1. Above each pane. but it will also result in the Reader components working as expected. This will give you a quick indication of the content of a story. the layout name is displayed. and one showing pages in portrait orientation only (the bottom pane). Preparing Content for Export Before exporting an Issue as a Digital Magazine. the following items are relevant to check and (if needed) to modify: Magazine content Story order Dossier properties Image properties Content sharing Each item is covered in more detail in the following sections. The Interface. The area of the Page Preview panes can be adjusted by dragging the gripper area (the dividing bar between the Story pane and the Pages Preview panes) to the left or right.3 The Story Pane). it is wise to verify that all required settings are correctly set and all required components are available. From within Content Station. the pages of the assigned layouts appear in the Page Preview panes.Chapter 06 Exporting Content 1.

see section 2.2 Verifying the Story’s Content. Make sure that no stories are missing from the magazine and that no stories are displayed which should not be part of the magazine.1 Magazine Content The stories that are displayed in the Story pane are those stories that will be exported when clicking the Export button. it will display in the Story pane with a default preview. perform the following steps: Step 1. and no pages will of course display in the Page Preview panes. 85 . The following tasks can be performed to achieve this: Adding a story Verifying the story’s content Removing a story 2.1.Chapter 06 Exporting Content 2. This in itself is enough to add the story to the Digital Magazine.1.1 Adding a Story To add a story to a Digital Magazine. However. Each is explained in the following sections. Click the Search button in the Digital Magazine application to refresh the page. Assign a Dossier to the Brand/Issue combination of the magazine. Step 2. To assign the correct content.

1. In the Story pane. select each Story and check the Page Preview panes to see if pages in the expected orientation appear (depending on how the Reader App is configured: both landscape and portrait orientation. image should be assigned to the Publication Channel and have the Intent set to Header. at the bottom of the page should be assigned to the magazine’s Publication Channel. Do this by performing the following steps: Step 1.) to be assigned to the Publication Channel: Embedded video Embedded audio Hyperlinks Widgets When the story is planned to be displayed in Text View mode. (With the exception of images that are part of a Slide Show.) An image that is used as a header assigned to the Publication Channel of the magazine.Chapter 06 Exporting Content 2. Double-click each Story in the Story pane to open the story’s Dossier and verify the following: No more than two layouts should be That a dedicated article is present and assigned to the magazine’s Publication Channel .2 Verifying the Story’s Content For each story that is displayed in the Story pane. make sure that their related content is part of the Dossier: Any images that should be displayed Make sure that the correct pages in their When making use of specific functionality. Any layouts in portrait orientation should not be assigned to the magazine’s Publication Channel. or landscape or portrait orientation only. These will typically be the layouts in landscape and portrait orientation. verify that the right components are present and (optionally) assigned to the Publication Channel of the correct magazine. ensure of the following: 86 . Slide shows: all related images Embedded videos: all related videos Embedded audio: all related audio files Widgets: all related Widget files Widgets: all related Widget files The following types of content also need Step 2. these are automatically displayed at the bottom of the page. correct orientations are assigned (corresponding with the way the Reader App has been configured).

Step 2. De-assign the Brand/Issue combination of the magazine from the Dossier. perform the following steps: Step 1. Click the Search button in the Digital Magazine application to refresh the page. The initial sorting order of the displayed stories is based on the creation date (newest first).1. Drag-and-drop the selected stories to their required position within the magazine.2.Chapter 06 Exporting Content 2. selecting other or additional stories can also be done by using the up/down or left/right keys on the keyboard (also in combination with keeping the Shift key pressed).2 Story Order The order in which the stories are displayed in the Story pane is also the order in which they are going to be presented in the exported magazine. Figure 2. When a story is selected. Stories can be repositioned within the magazine 87 . 2. Select one or more stories in the Story pane. Step 2. To deselect a selected story. click the story while keeping the Cmd/Ctrl key pressed.3 Removing a Story To remove a story. The stories can be rearranged by performing the following steps: Step 1.

Intent.3 Dossier Properties The Digital Magazines functionality uses various Dossier properties for controlling specific features in the Reader App on the digital device. To quickly access the Dossier of a story. double-click the story in the Story pane. Step 2. Section title: used for displaying the name Description: used for displaying additional information for the story in the Story / Page Viewer of the Reader App.Chapter 06 Exporting Content 2. Set the intent property of the images to cover or preview respectively. Step 3. that it contains an image with the exact dimensions (width and height) in which it is going to be displayed on the digital device. Add any images to act as the cover or preview to the Dossier. Images assigned this way are only picked up from the first Dossier of the issue. containing the table of contents. if it exceeds the width of the page preview in the Reader. verify that the following Dossier properties have been correctly set: To quickly access the Dossier of a story. images can be automatically extracted by a Content Delivery Platform for use as the cover or preview image in a Store. of the section to which the story belongs in the Section viewer of the Reader App.  2. doubleclick the story in the Story pane. (When the user taps the button. ellipses are shown for the part which cannot be displayed.) Cover and preview properties Story title: used for displaying the name of the story in the Page viewer of the Reader’s Section Viewer. For each story in the magazine. During the upload process of a digital magazine. allowing the user to preview a complete dynamic story as opposed to a singlepage static image. For each story that makes use of this feature. In the Properties dialog box of the image. This process replaces the need to upload these images separately. 88 . When the Dossier holds the layouts ensure that the Intent property is set to Header. verify the following: Access the Dossier of the story and ensure Preview: Used for indicating that a Dossier contains content for use in the issue preview functionality in a Store. This image will be displayed before the content of the article. Keep both the Story title and Description short. as defined by the order in the Digital Magazine application. choose TOC from the Intent list so that the table of contents is linked to the TOC button in the Reader App. This content is extracted from the ofip file by a delivery system. Access the Dossier properties. prepare the content as follows: Step 1. To achieve this. he or she will be directly navigated to the table of contents. an image can be set to act as the header image.4 Image Properties Text View Mode properties When a story is displayed in Text View mode.

During this export. a Hyperlink object needs to be included in the Dossier of the story and assigned to be included in the export. A typical example of this is to share ofip properties between files belonging to different Brands or Enterprise systems. Upload the ofip file for issue ‘X’ into a Dossier to which the issue which needs to receive the ofip properties (issue ‘Y’) also belongs. Export the Digital Magazine issue ‘Y’. The Create Hyperlink dialog box appears. Step 2. Click OK to close the dialog box. 2. From the Intent list. To set this up correctly. Step 2. Step 5. Using Content Station. Digital Magazine Configuration – Step 11. log in to Enterprise system A. In the Dossier for the article which Content Sharing needs to enabled. choose shared article. (No existing values are overwritten. For this functionality to work.5 Content Sharing In the Reader App. chapter 40.) In case any properties are not entered on that page. users can forward a Hyperlink by sharing this via e-mail. Export a Digital Magazine issue ‘X’. (For more information. Step 4. Step 3. external sources with background information. In the URL box. Make sure that the check box in the correct Publication Channel is selected for this Hyperlink so that it is included in the magazine export. the ofip properties that are available in issue ‘X’ but not in issue ‘Y’ are added to issue ‘Y’. Step 3. when the URL is going to be used in a Twitter message. perform the following steps: Step 1. Log out of Enterprise system A and log in to Enterprise system B. online stores.) 89 . Step 5. Configuring Issue Maintenance. The URL of the Hyperlink can be to any type of content such as an online version of the magazine article. Download the ofip file for this issue ‘X’. the missing properties can be extracted from an ofip file which does have these properties set. an ofip file is created from Enterprise system A and used for populating ofip properties in a file stored in Enterprise system B: Step 1. In the following scenario. etc.6 Sharing ofip Properties The Issue Maintenance page of a Digital Magazine Issue is used for setting various ofip properties. see the Enterprise 7 Admin Guide. Step 6.Chapter 06 Exporting Content 2. Facebook or Twitter. enter the URL to the external source. the system will automatically insert a shortened version. Step 4. Shortening the URL is not necessary. choose New Hyperlink from the Create New button above the Publication Channels pane.

chapter 40. If any issues have occurred. the content is exported to the server. WARNING: the content of this folder will be erased during the download process.xml file to include the following functionality:  Include Custom Objects. When the export is completed. click Cancel. (Optional. To export a digital magazine.) The Export Options dialog box appears. Then. . The folder to which the content is downloaded to is defined in WWSettings. (See figure 3 on the next page.) Step 4. or for upload to a delivery server. do one of the following: To download an exported magazine to a specific folder. (Optional) Click OK.6 Custom Objects. (Optional) To stop the export at any time. showing the result of the export. 90 The content assigned for export is verified to see if it matches the Digital Magazine settings as set on the Issue Maintenance page (see the Enterprise 7 Admin Guide).xml. click Browse. (Optional) Initially. see chapter 7. In case a mismatch has been found (for instance: the Issue is set up to include Text View. (See figure 3 on the next page. click the Abort Export button. Click the Export button. (For details about setting these paths. see the Admin Guide. only when the server is set up for multiple device support. Step 6. (Optional) Select one or more devices to export to. click the Download button for the respective device. The export commences and its progress can be followed by a progress bar next to the Export button. The Export button becomes available. Exporting Content When the content of the magazine has been verified and found complete and correctly set (see section 2. an error or warning is shown together with steps to rectify the problem. verify and correct them. Access the Digital Magazine page and use the Search pane to display the magazine in the Story pane which should be exported. but no landscape in portrait orientation or an article has been assigned for export). The download process can be followed by a progress bar. (iPad Reader App only) For more information.Chapter 06 Exporting Content 3. The exporting process will create the necessary content files for inclusion in a Reader App. To download the content to the local system. Step 2. (Optional) Modify the exported magazine. Digital Magazine Configuration. Step 2a. perform the following steps: Step 1. the Export Report dialog box appears. Preparing Content for Export) it is ready to be exported. showing all devices to which can be exported to.) To cancel the download(s). Customizing the iPad Reader App – section 9. Step 3. export the content once more. To download an exported magazine indi- vidually.) Step 5. Step 2b.

1 only) For more information. more information.3 Audio Control Pop-Up. (iPad Reader App only) For more information. see chapter 7.0 and 1. see chapter 7. customizing the Reader App – section 9.19 Remove Video After Play. Customizing the iPad Reader App – 9.2. For more information. (iPad Reader App only) For more information.2. for display in the Audio Control panel. see chapter 7.Chapter 06 Exporting Content Hide embedded audio controls.In a Web Element. When the export encounters incorrectly assigned content. Create HTML Dossier Links. (Android Hide embedded video controls. For Figure 3. Customizing the iPad Reader App – section 9.19.2. see chapter 5. see chapter 7.2. an error is shown and steps to rectify the problem are provided 91 . Creating Content – section 5. Hide a video after it has stopped Add an audio title and description playing. Customizing the iPad Reader App – 9. Hiding Embedded Video Controls.2 Embedded Audio Controls.) Reader App versions 1.5.

7. the dimensions of the issue will be read from the magazine. the pages will be made to fit the width of the device. Summary In this chapter. the dimensions of the issue have to be determined by looking at the dimensions of the actual page files. you have learned how to use the Digital Magazine application in Content Station for verifying the content of a digital magazine and how to export it.1 Exporting and Page Scaling When the “Fit mode” DMSetting option is used (see appendix E.0. take note of the following: When using DM Server plug-in version 4. In all other cases. The DMSettings.plist File – section 3. Next steps The exported files can now be included in the Reader application and made available on a delivery server so that it can be accessed from the tablet.0.10 Metrics).11. sion older than 7.11 or higher for exporting the content. The page fitting feature will work as specified. When using a DM Server plug-in of a ver- 92 . Page fitting will only work if the first page exists in both vertical and horizontal orientation and both are not long pages.Chapter 06 Exporting Content 3.xml file.

07 Customizing the iPad Reader App Customizing the iPad Reader App is important when you want to achieve any of the following: Giving it a unique look and feel (reflecting the content of the issues that will be viewed) users to use language Enabling those features that you want your Localizing the Reader App into a particular General App settings Navigation The Store The Library General App features 93 iPad In this chapter you will learn all about customizing the iPad Reader App. After a few introductory sections in which general customization is discussed. The following main customization areas are defined: . customizing each Reader App feature is discussed in detail.

etc. For editing images in .strings file.apple. _Template/Classes/ DigiMagKioskSettings.zip DigiMag�iPad�v2x�bxxx�AppleSubscriptions.2.0 is required for working with the iPad Reader App v2.pdf format. com/devcenter/ios/index. the following tools are required: Xcode and the iPad Simulator. perform the following steps: Step 1. _Template/Classes/Resources/ _Template/Classes/Resources/images _Template/Classes/Resources/ 94 iPad Customizing the Reader App is mostly done by making changes to the following areas of the project: .9 support: versions 1.x�bxxx�Subscriptions.x�bxxx�Basic�Standard. Use your favorite editor for this task. Required Tools In order to perform the steps as outlined in this chapter. bundle file. Image editor. (Reader App versions with Store functionality only) Settings related to connecting to the Store. Controls the Share Content functionality and contains version information.2 Step 2. (both come 2.6 support: SDK version 4. For customizing images used for logos. Xcode version 4. For adding additional resources such as Subscription Offer pages. DMSettings.Chapter 07 Customizing the iPad Reader App 1. Version 1. install any higher version of Xcode in a folder separate from the one in which version 1. as well as colors and fonts. located in the [folder name]_Template folder.plist file.9 require Xcode version 3. For localizing the text as displayed in the Reader App.action). is not compatible with the iPad Reader App version 1. For customizing the Reader App functionality. If this compatibility is still required. It is assumed here that both are correctly installed and that you are proficient in using these applications. _Template/Classes/Resources/Settings. to 1. etc. if this version is still required. available from the iOS Dev Center: http://developer.6. Loading a Project The Reader App is supplied as an Xcode project.zip DigiMag�iPad�v2.6 is installed.5.ai/.x�bxxx�Pro�Framework. Use of previous versions: Version 1.x project. icons. Unzip the provided DigiMag file: DigiMag�iPad�v2.zip as part of the Xcode and iPhone SDK. have it installed in a separate folder.png or . Open the Xcode project.7 _Template/Classes/Resources folder.zip DigiMag�iPad�v2. Localizable. backgrounds.h file. To load the project. custom objects. folder.7 – 1.

Programming interfaces that add addi- tional functionality to the Reader App.net/products/Enterprise%207. Each is described in the sections on the following pages. Specific fonts used in various places of the Reader App. icons. All images are stored within the Xcode project in the Resources/images folder. Image Dimensions. Each of these assets are images and can be easily replaced by your own images. Additional functionality can be added to the Reader App by adding the following components: Custom Objects.0. names are directly linked to the code in the Reader App All assets need to be in PNG file format For an overview of the exact asset dimensions.Chapter 07 Customizing the iPad Reader App 3. Text. and Text View assets are available as PDF files which can be customized by using Illustrator. Fonts. the following APIs can be used: Analytics API for gathering information about how a user uses the Reader App gestures Gesture API for receiving and controlling Navigation API for navigating to various components of the magazine 95 iPad Settings. logos and headers. Currently. The functionality of the Reader App. icons and headers. Colors.x/Software. The text of specific titles as they appear in various places of the Reader App. Interface components such as but- 3. Overlay.1 on the next page shows the types of assets available and the folder in which they are stored. The Toolbar.1 Assets Assets are user interface components such as buttons. Store. Table 3. woodwing. . What Can Be Customized? Changing the look & feel or the functionality of the Reader App is achieved by modifying any of the following areas: Assets. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community. Take note of the following: Renaming assets is not allowed since the tons. Objects containing func- tionality of 3rd-party developers. see appendix C. APIs. The color of text and backgrounds.

used in various locations of the Reader App. Including the Slide Show icon and Video icon. Only available in the Pro. . Assets folder structure Folder Available assets closeButtonDefaultState.png noInternetConnectionLabel. Assets that represent icons in the Navigation bar and top Toolbar. The label shown when no internet connection is available on the iPad. showing the Story Viewer and Section Viewer.png segments_stack_background. Image shown when no internet connection is available on the iPad. Assets relating to the TOC List General assets for the application itself. Assets that overlay other objects. Assets for the Content Sharing functionality. The area that appears above the Navigation bar. Including the app icon and splashscreens.png images/Bookmark Popup images/Audio Popup images/Share Popup images/TOC Popup images/Application images/Flipview images/Overlays images/Store Assets relating to the Bookmark List Assets for the Audio Control button in the top Toolbar and the Audio Control. Subscriptions and Apple Subscriptions Editions of the Reader App. indicating that the issue contains Segments. The icon for an issue on the Library page. Framework.png images segments_shadow. Used for displaying the story as one continuous page in which the text can be made bigger or smaller. 96 iPad Image used for the selected status of a thumbnail in the Flipview.1. images/Textview images/Toolbar Assets for the Text View mode. General assets for the Flipview area.png noInternetConnectionBackground. The TOC List appears when tapping the TOC button in the top toolbar. Additional information Image used as the default close button. The shadow between the top and bottom part of the Segments Overview page. Assets relating to the Store.Chapter 07 Customizing the iPad Reader App Table 3.png transparentImageForFlipviewButton.

plist file. Create a folder somewhere on your system named fonts (all lower case). Verify that no fonts folder is present in the Resources folder. see section 4.plist file. (If there is a folder present. Flipview colors. Custom fonts can also be used for the Text View mode. make sure that you have a proper license for each used font. see the Enterprise 7 Admin Guide. remove it). Store colors. but these are controlled via configuration files as part of Enterprise Server. Color settings related Page Sharing colors. Bookmark colors. chapter 40. All fonts used must be TrueType fonts. Be sure to verify the result in the Reader App (for more information about previewing customizations. located in the Resources folder. Application toolbar colors. Step 2.2 Colors Colors for objects and text are controlled via the DMSettings.3 Fonts Custom fonts can be defined for the following areas of the Reader App: TOC List Bookmarks List Story Viewer / Page Viewer Subscription Sign in dialog box Navigation bar and top Toolbar. Digital Magazine Configuration. to using Web Elements. The following groups are defined: TOC colors. Step 1. The color of the 3. . Previewing Customizations). To define custom fonts by means of the Xcode project. For configuration steps. Changing the color is done by changing the RGB values for a specific option in the DMSettings. Web Elements colors. Colors used for the Store Detailed information about the areas for which fonts can be modified for these features is provided in the remainder of this chapter.Chapter 07 Customizing the iPad Reader App 3. Step 3. 97 iPad (including Subscription functionality) and Library. Color settings related to the Content Sharing functionality. Step 4. Using custom color settings can sometimes give unexpected results (such as the gradient disappearing). Colors used for the TOC List. Copy the fonts that are to be used as custom fonts to this folder. perform the following steps: Any defined custom fonts are distributed and included in the Reader App. Detailed information about each option is provided per feature in the remainder of this chapter. Open the Reader App project in Xcode. Colors used for the Bookmarks functionality. Colors used for the Flipview.

choose type Boolean. Select the check box Copy items into destination group’s folder Step 6b. perform the following steps: Step 9a. Click Add. set the custom font by doing the following: Step 8a. For any of the TOC or Flipview options described above. select the check boxes for all targets. In the Name value. Drag the fonts folder created in Step 1 onto the Resources folder. Step 6. Replace the name New Item with Custom. Right-click the setting and choose Add Row from the context menu. Step 8b. Access the Fonts section of the DMSettings. Step 9. remove it and repeat the process again. For example: Vera. enter the name of the font.ttf would be entered as Vera. In the Size value. Step 8. Step 9c. (Optional) It could be that a certain settings does not have the Custom property 98 iPad Step 6d. In the Type column. To define this property. Select the Custom check box. If the folder appears as a yellow folder. (The name as it appears in the file name without the extension.Chapter 07 Customizing the iPad Reader App Step 5. In the Targets list. . Step 7. perform the following steps: Step 6a. The added folder should appear as a blue folder. Choose the option Create Folder References for any added folder Step 6c.) Step 8c.plist file. defined. enter the size of the font. Step 9b. In the dialog box that appears.

4.strings file.1 Reader App Name. see section 5.Chapter 07 Customizing the iPad Reader App 3. Store and Labels which indicate that no internet Each is explained in the following sections. 99 iPad Library . but the following assets also include text: Buttons of the Navigation bar.1 Changing the Text The text which appears in the Reader App originates from various sources. Assets.4 Assets.4 Text Changing the appearance of the text can be done in the following ways: By changing the actual text By changing the color of the text By changing the language in which the text 3. (For more information. Most assets in the Xcode project connection is available To change the text for these assets. This file can be used to change the following types of text: Flipview header Content Sharing functionality Audio Control title bar Forward/Back labels Table of contents title Download labels Bookmarks List Filter titles Store messages Warnings/error messages User notifications To change the text for any of these items. The name of the Reader App itself appears is controlled by a setting in the Xcode project.) include icons only.) Resources/Localizable. modify the content of the file as required. (For more information.4. see section 6. modify the respective file. and can therefore be changed by different means (see figure below): Settings.

Text originates from various sources in the system 100 iPad .4.1.Chapter 07 Customizing the iPad Reader App A D B B C E F A Localizable string B Dossier property C Asset with text D Server property E HTML page F External source Figure 3.

Digital Magazine Configuration. Dialog boxes can hold of a Dossier controls the following: Section. specific information originating from an external source. HTML pages. see section 3. (Note that the values used in the list are taken scription.) Issue Maintenance page. chapter 40.5 Version Numbering. For example: When a user subscribes to an iTunes sub- Story title.1.bundle/ [language code]. Web Pages. see appendix L. Dossier properties. we strongly recommend to keep this section in the string. change the labelling of the version information for the Reader App as displayed in the Settings app of the iPad. accessed through the Manage Your in App Purchases page on iTunes Connect.strings. .1. it can appear to the user as part of the magazine. see the Enterprise 7 Admin Guide. use Smart Connection for InDesign or Content Station. 101 iPad as the Subscription Offer page in the Store. Error codes are used to better identify the area where the problem originates from. To change any of these properties. thumbnail in the Flipview is derived from the Story Title property. External sources. Setting the properties For more information. The file can be found in the following location of the Xcode project: Resources/Settings. present specific information. To add or change this text.lproj/Root. The title for a story below a Story description. The story descrip- tion below the story title in the Flipview is derived from the Description property. Root. Subscription Server Support – section 1. Each section in the Section Viewer is derived from the Section Title property.3 Changing the Language and section 5.Chapter 07 Customizing the iPad Reader App The error messages returned from the Content Delivery Platform have been extended. so that better technical support can be provided to the end user. If needed.strings file. change the Issue Description property on the Issue Maintenance page in Enterprise Server. Although their source is not part of the Reader App as such. the error codes are positioned in the %@ section of the string. The Issue Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header. this section can be removed so that the error code does not appear in the message. However. Dedicated HTML pages such For more information. For more information about setting these values.4. Changing the text of these pages is done by modifying the relevant source files. because they are displayed within the context of the magazine. This text is derived from the Display Name field of the Edit Language section. The text in this dialog box also contains custom text (typically the name of the magazine to which the user wants to subscribe). a dialog box appears asking for confirmation. This file can be used to from their respective custom metadata properties. In the translations.

This is done by including a language code which the iPad will use to display the strings in the corresponding language (only when the iPad is configured for that language. The File Inspector appears in the right-hand side of the screen. followed by File Inspector. Localization is split over two levels: localization for the Reader App and localization for the Reader App version information. Step 2. see section 3.4. In the File Inspector. 3.3 Changing the Language The default language for the Reader App is English but it can be localized for other languages as well. In the bottom bar of the Localization group.4. 102 iPad .strings file in the Resources folder. Customizing the HTML Store – 3.2 Colors. Step 3. Step 4. All currently added localizations are displayed (English only by default). see appendix G. perform the following steps: Step 1.6 Language. Localizing the Reader App The following instructions do not apply to localizing the HTML Store. expand the Localization group. For information about localizing the Store. choose Utilities. For more information.Chapter 07 Customizing the iPad Reader App 3. In the Xcode project file locate the Localizable. else it will display the text in English). Each is explained below. To add a supported language to the Reader App. Select the file and from the View menu. click the + button.plist file.2 Changing the Text Color Defining the color of the text is done by changing the RGB values of the relevant options in the DMSettings.

More information about localization for the iPhone/ iPad SDK can be found here: http://developer. see: http://www. These should be a two.bundle/[language code].gov/standards/iso639-2/ php/English_list. Step 5.loc. Duplicate this folder. Step 4. Choose the required language from the list. Step 6. com/library/ios/#documentation/MacOSX/Conceptual/ BPInternational/Articles/InternatAndLocaliz.Chapter 07 Customizing the iPad Reader App A list appears with all available languages which can be added.strings file as required. Step 3.php. lproj folder. Modify the content of the Roots.or three-letter code and comply to the ISO 639-1 or ISO 639-2 conventions. Localizing the version information To add a supported language to the Reader App. . Step 2. 103 iPad For a full list of language codes. Build the app and view and verify the results in the Reader App.html. Repeat steps 4 and 5 until all required languages have been added. perform the following steps: Step 1. Change the language code in the folder name.apple. Step 7. In the Xcode project file locate the Resources/Settings.

When using the simulator.5 Settings Most of the customizations for the Reader App are performed in the DMSettings. Previewing Customizations Previewing any made customizations can be done by loading the Reader App into the iPad Simulator. Although the simulator reflects the working of the iPad as best as possible. font settings and colors. Which settings these are and for which features they are used is discussed in the remainder of this chapter. the exported magazine.plist file. For some specific features. This is achieved by building the Xcode project.xml file can be modified. no user interface is available yet (such as hiding video controls). take note of the following: Not all behavior or functionality can be simu- lated.Chapter 07 Customizing the iPad Reader App 3. it is itself a software application in which certain functionality or behavior may not always fully function. For a full overview of all settings in the DMSettings file. For instance. after which the project is automatically opened within the simulator. 4. which allows changing Reader App functionality. it is not possible to simulate slow internet connections. 104 iPad . We advise to include an iPad which is assigned as a development device in your workflow of testing the Reader App. see appendix E. The DMSettings File. For these scenarios.

Settings to conver t Enterprise intent names to Reader App intent names. about the Reader App. throughout the Reader App. select the Build Settings tab. App as it appears on the iPad. Information about upgrading the Reader App. Enter the required name.Chapter 07 Customizing the iPad Reader App 5. General App Settings The following general features can be modified for the Reader App: Reader App name. Reader App is suspended while a download is in progress. When the Background download setting. Reader App assets. In the main screen. Search for the Product Name property. the download is continued. Step 4. Each setting is explained in the following sections. 105 iPad . Step 3. Allows the user to enable/disable background downloading of a magazine when the Reader App is closed. Version information Upgrade information. The name of the Reader 5. Background downloading. Step 2. select the DigiMag_Template project.1 Reader App Name The name of the app (as it appears on the iPad) can be changed by modifying the Xcode project as follows: Step 1. General assets used Intent set tings. Version information. In the Targets section.

These assets are stored in the Application folder. This overrules the Default. Default-Landscape. screen that is shown when the App is launched in portrait mode. Default-Portrait.Chapter 07 Customizing the iPad Reader App 5. springboard for the app. if custom values are used. The default splash screen that Icon. Used for linking the page con- taining the table of contents to the TOC button in the Navigation bar. This overrules the Default. containing instructions about how to use the Reader App.png. is shown when the App is launched.png.3 Intent Settings Intent settings are used to match certain functionality of the Reader App with specific content. Both intent properties are defined on Enterprise Server. The default splash Default. in order for the page containing the table of contents to appear when a user taps the TOC button in the Navigation bar. For example.plist file: Intents/Help.png. the corresponding values for the Reader App also need to be changed (else the functionality will break).png splashscreen for the landscape orientation. the Dossier in which the layout is stored should have its intent property set to TOC.2 Reader App Assets Reader App assets are assets with a general purpose such as splashscreens and the app icon.png splashscreen for the portrait orientation.png. The icon that is shown on the iPad with Help instructions to the Help button in the Navigation bar. Changing the intent values can be done by means of the DMSettings. This image needs to be 768 pixels wide and 1004 pixels high. However. The default 5. A similar intent property (named Help) is used for linking the Help button to the Help page. This image needs to be 1024 pixels wide and 748 pixels high. Intents/TOC. 106 iPad . Used for linking the page splash screen that is shown when the App is launched in landscape mode.

4 Background Download Setting When the Reader App is closed while a magazine download is in progress. the download is resumed though at the point where it was left off the next time the download is continued. The message can be localized by modifying the following strings: Your inactive magazine download is about to Settings_SharingDisabled_3GDisabled.Chapter 07 Customizing the iPad Reader App 5. The user can change this behavior through the Settings screen on the iPad by enabling/disabling the 3G Download option.1 Background Downloading When the Reader App is suspended while a download is in progress. This functionality is performed through the Settings. execution. 107 iPad For additional technical information see: Bundle if Content Sharing is enabled and 3G Downloading is disabled. (Optional. only when any of the nondefault bundles is to be used) Replace the default Settings. allowing the user to continue or cancel the download. Settings_SharingDisabled. When the app is closed there 5. When the user does not respond to the message. . perform the following steps: Step 1. However. The bundle can be replaced by any of the following bundle files: Settings_3GDisabled. Use To implement this functionality. the download process is continued. System resources must permit background http://developer. Remove the old Settings.com/library/ios/#documentation/ iphone/conceptual/iphoneosprogrammingguide/ BackgroundExecution/BackgroundExecution. a message is displayed to the user.bundle file by doing the following: Step 2a. Use this bundle if both Content Sharing and 3G Downloading are disabled.3. the download is cancelled.bundle file from your project (also remove it from the file system).bundle file of the Xcode project. The default file is aimed at using 3G Downloading together with Content Sharing.\nWould you like to continue downloading the magazine? Continue Step 2.bundle.bundle. When resources (such as memory) are needed for a newly started app. our background downloading might be cut off early. Apple applies the following restrictions: The time is finite. Use this is a maximum of 10 minutes left in which the app is still allowed to execute code. the download is now continued.apple. Enable the following DMSetting: Store/Enable 3G Downloading be canceled. this Bundle if 3G Downloading is enabled and Content Sharing is disabled. bundle.html Shortly before the time limit is reached.

The title of the option in the iPad Settings application screen. Step 2c. Step 2h. Rename the file to Settings.strings file: 3G Download Options. Drag the new Settings. Localize any of the following strings in the Settings. Select the check box Copy items into destination group’s folder (if needed). The user can verify the installed version on the iPad Update release. In the provided template project folder. Step 2d. Set the following settings: .lproj/ Root. bundle.bundle/en. locate any of the above mentioned bundles. 5. A dialog box will appear. Step 2e.Chapter 07 Customizing the iPad Reader App Step 2b.bundle fie onto the Resources folder in the template project in Xcode. Copy this file to a different location (such as the Desktop). The publisher can release an update for the Reader App Each is explained in the following sections. 108 iPad Step 2f. Click Add. Continue After Closing App. Click the option Create Folder Step 2g. The label shown in the iPad Settings application screen. References for any added folders.5 Version Numbering Version numbering the Reader App allows the following processes to take place: Version verification.

5.gov/standards/iso639-2/ php/English_list. Application version To set the application version. the Reader App. . Step 3. perform the following steps: Step 1. Using the Reader App – section 15. In the Reader App project. Framework version: the version number of the WoodWing Framework.bundle file. For each language. Step 2. Version Information): Application version: the version number of Labels The labels in the settings screen on the iPad are customizable by performing the following steps: Step 1. a separate folder is provided. Select the Root.plist file. Expand Item 5 (Group .Version Information) and edit the available key values as required.Chapter 07 Customizing the iPad Reader App 5. see: http://www. duplicate an existing folder and modify the language code in the folder name by changing it to a two. 109 iPad For a full list of language codes. Expand the Settings. locate the Settings. In your Xcode project. Modify the Bundle Version value. Framework version The Framework version number is set by WoodWing and cannot be modified. access the DigiMag_Template-Info. Step 2.1 Version Verification The following version numbers can be verified for the Reader App on the iPad (see chapter 4.bundle file in the Resources folder. If a new language is required.php.plist file.loc. Step 4.or three-letter code which is compliant to the ISO 639-1 or ISO 639-2 conventions.

1 Version Localizing the message To change the displayed message. When the Reader App version is lower than the minimum version. the user is directly taken to the App Store.2. 110 iPad . When a user starts the download of an issue.apple. modify the following string in the Localizable. the publisher can prompt the user to update the installed Reader App.com/linkmaker.Chapter 07 Customizing the iPad Reader App 5. Click OK to update it via the App Store". This process only applies to those Reader Apps which do not bundle the magazine content with the Reader App. Setting the link to the App Store When the user taps the OK button in the displayed message (see above).2 Update Release When a magazine issue is published containing features which require a new version of the Reader App to be installed. Configuring Reader Apps.1.5. the version number of the Reader App is verified against the minimum version that is required to read the issue. Using the Content Delivery Platform – section 3. Adding an Issue in Segments and section 4.5. In the Reader App: see section 5. a message is displayed to the user informing the user that the Reader App requires updating.strings file of the project: /* This message is shown when the app is an older version than required to view the new issue */ "App update available description" = "This issue requires a newer version of this Reader App.4. the App Store is accessed.com/us/app/woodwing/ id375764844?mt=8&uo=4 Use the Apple Link Maker to create a direct link to the Reader App in the App store: http://itunes. Setting the version numbers The version numbers are set as follows: On the Content Delivery Platform: see appendix F. Verification. The URL is set through the following DMSetting: Update/App Store Link URL example: http://itunes. When tapping OK.apple.

1 Story vs Page Navigation The user can be offered one of two types of navigation: Story navigation. Navigation The flexibility of the Reader App allows you to offer the user various tools and methods for navigating the content: Story navigation vs page navigation Orientation lock Right-to-left support Navigation bar Flipview Top Toolbar Hotzones Gestures 6. In this configuration. the user For more information about Story Navigation and Page Navigation. the user swipes vertically (up/down or down/up) To navigate within a story (from page to Each aspect is explained in the following sections. Stories.Chapter 07 Customizing the iPad Reader App 6. In this configuration. see chapter 3. The Concept – section 3. Page navigation. the user swipes horizontally (from left to right or right to left) using one finger swipes horizontally (from left to right or right to left) using two fingers To navigate from story to story. navi- gation is done as follows: To navigate from one story to another. but these are described in section 9. naviTo navigate from page to page. the Reader App is set to Story navigation. By default. Other Reader App features such as the TOC List and Bookmarks can also be seen as navigation methods. 111 iPad gation is done as follows: . Pages. General App Features. the user swipes horizontally (from left to right or right to left) page). Sections and Segments.

To enable Orientation Lock. you might want to enable the Page Scrubber so that the user can quickly browse the pages displayed in the Page Viewer. orientation. 112 iPad . If only pages of a certain orientation need to be shown (only pages in landscape orientation or only pages in portrait orientation).2 Orientation Lock The default behavior of the Reader App is such that when the device is rotated. set the following option in the DMSettings. pages in portrait orientation can also be displayed in Text View (a mode in which text can be scaled by the user by increasing or decreasing the font size).plist file to Yes: Navigation/Scroll sections with two finger swipe To ease navigation when the Reader App is set to Page navigation. set the following option in the DMSettings. Portrait. To enable the Page Scrubber. a page of a different orientation is shown. the orientation lock is disabled and pages in both landscape and portrait orientation are shown.plist file: Navigation/Orientation lock To enable two-finger swipe (Page navigation only). Designers can benefit from this feature by offering differently styled pages for each view. you can make use of the Orientation Lock feature.plist file to Yes: Navigation/Horizontal page navigation 6. when rotating the device to portrait orientation a page in that orientation is shown. the page will stay fixed in place instead. When enabled. set the following option in the DMSettings. rotating the device will not change the orientation of the page.Chapter 07 Customizing the iPad Reader App To enable Page navigation. Furthermore.plist file to Yes: Flipview/Page scrubber enabled Possible values: Landscape. For displaying only pages in portrait When the setting is left empty or removed. For displaying only pages in landscape orientation. set the following option in the DMSettings. For example: when holding the device in landscape orientation a page with a corresponding orientation is shown.

3 Right-To-Left Support The Reader App can be enabled for right-to-left support so that scrolling through the magazine is reversed.png Items. To enable right-to-left support. From it.png should be Each is explained in the following sections. table of contents.png should be turned into forwardSelectedIcon.Chapter 07 Customizing the iPad Reader App 6.png 113 iPad when the user taps the screen. the assets for the Back and Forward buttons in the top Toolbar need to be switched (else the direction of the arrow in the images is wrong): The images for both buttons are located in the /images/Toolbar folder. Colors.4 Navigation Bar The Navigation bar is used as a starting point for navigating the magazine. Visibility. set the following option in the DMSettings.png Assets. The area which the user should tap When using right-to-left support. the user can quickly navigate to specific areas both within the Reader App itself (the cover.png backIcon. The icons of the buttons. Store. turned into backSelectedIcon. The number of buttons and the order in which they appear. The color of the Navigation bar. Customizing the Navigation bar can be done by changing the following: Tap area. backIcon. .png should be turned into forwardSelectedIcon. forwardIcon. or always have it visible.plist file to Yes: Navigation/Right to left support 6. Only show the Navigation bar wardIcon.png should be turned into for- in order to display the Navigation bar. etc. backSelectedIcon.) as well as to external content for instance by using the Newsfeed button.

. etc) is placed in that area. else that functionality is invoked instead. the Navigation bar appears when the user taps any part of the screen. make the following changes: toolbar to Yes Set the option Tap bottom to show (Optional) In the Touch Areas section.1 Tap Area By default.1 The tap area can be limited to the bottom part of the screen by doing the following: In the Hotzones section of the DMSettings..4.plist 6. Hotspot. The Navigation bar now only appears when the user taps the defined area. Note that the Navigation bar obscures the bottom 50 pixels of the page content. etc.Chapter 07 Customizing the iPad Reader App 6. 1 114 iPad define the height of the area in pixels by modifying the bottom area height value.1 Tap Area). links. The Navigation bar can also be made to permanently display by setting the following option in the DMSettings. Web Elements.2 Visibility By default.plist file to Yes: Navigation/Bottom toolbar always on file. the Navigation bar only appears when the user taps any part of the screen (see section 6. inform your designers so that no content or functionality (such as Hotspots. The area that is tapped should not hold any functionality itself such as a Slide Show.4. When making use of this feature.4.

plist file: All buttons except the Forward/Back Apple Subscriptions Editions only) For navigating to the Store. adding the Back and Forward buttons would result in 10 buttons to be displayed. playing up to 9 buttons.4. and Apple When this option is selected and the top Toolbar is also enabled. For navigating to the magazine cover. For navigating to the table of contents buttons in bottom toolbar. For bringing up the Flipview. take note of the following: . buttons: Navigation/ToolbarItems.Chapter 07 Customizing the iPad Reader App 6. For navigating to the Custom Home page. (Pro. Help. (Pro. Apple Subscriptions Editions only) For navigating to the Library. and The buttons are managed by means of the following option in the DMSettings. the Back/ Forward button will only be shown in the Navigation bar and not in the top Toolbar. TOC. 8 buttons are already displayed. Account . choosing Add Row from the context menu and entering the correct Value for that button. For navigating to the newsfeed. For navigating to the Help page. (Adding a button can be done by right-clicking an item. Included in the Navigation bar by enabling the following setting: toolbar Navigation/History buttons in bottom page.) 115 iPad When making use of this feature. see section 9.8 Fullscreen Overlay.3 Items The Navigation bar can contain the following buttons: Buy. which don’t fit. Library. FlipView. user accesses the Store or Library. External Back. Therefore. Back/Forward buttons. Forward/Back buttons: Navigation/History Home. and The value of each item is linked to specific functionality and should not be changed. Framework. (Subscriptions. These buttons are disabled when the The Navigation bar has room for dis- Subscriptions Editions only) For bringing up an external page with subscription account details. For navigating to An additional Fullscreen Overlay button can be added to the Navigation bar. By default. Feed. For more information. Subscriptions. Subscriptions. Framework. the previous or next visited page. one button needs to be removed from the list by selecting it and deleting it.

drag each key to its required position.Chapter 07 Customizing the iPad Reader App Changing the order To rearrange the order in which the items appear in the Navigation bar. except when the Reader App is configured for right-to-left support when they are positioned to the far right. 116 iPad . The Back/Forward buttons are always positioned to the far left of the Navigation bar.

png.png.Chapter 07 Customizing the iPad Reader App 6.png. see section 9.net/products/Enterprise%207. The Navigation bar assets 117 iPad helpSelectedIcon.png. When creating or modifying a button. For an overview of the exact dimensions of each asset. The following assets can be customized: An additional Fullscreen Overlay button can be added to the Navigation bar.png. accountSelectedIcon. feedSelectedIcon.woodwing. (This button is normally named Contents.png. The icon for the News Feed button in its selected state.) flipviewSelectedIcon. The icon for the .) Flipview button in its selected state. linking to the cover of the magazine.png.png. The icon for the Flipview1 button. Home button in its selected state. Image Dimensions. Help button in its selected state. The icon for the News Feed button. button. The icon for the Library button in the Navigation bar. accountIcon.0. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.4. The Toolbar assets are available as PDF files which can be customized by using Illustrator.4.png. The icon for the Account button in the Navigation bar in its selected state. the Story Viewer and Section viewer appear above the Navigation bar 1 A A H B C C Home icon D D TOC icon E E F Flipview icon F G Feed icon H G Store icon (selected) Account icon B Library icon Help icon Figure 6. The icon for the Account feedIcon.x/ Software. homeSelectedIcon. homeIcon.4. When tapping the Flipview button. For more information. (This button is normally named Contents. flipviewIcon.png.8 Fullscreen Overlay.4 Assets The assets that appear in the Navigation bar are stored in the images/Toolbar folder. make sure that this button has a 1-pixel high transparent row at the top so that the underlying dark row of the Navigation bar stays visible. The icon for the Help button.png. The Navigation bar has a 1-pixel high dark row at the top. The icon for the libraryIcon. The icon for the helpIcon. see appendix C. The icon for the Home but- ton.

topToolbarLogo.png.png. Image positioned in the center of the top Toolbar (typically a logo).4.png. tocIcon.png automatically adds it to the top Toolbar. The icon for the Store button. 118 iPad .Chapter 07 Customizing the iPad Reader App librarySelectedIcon.png. The icon for the Contents button in the Navigation bar in its selected state. Navigation bar. Needs to be maximum 45 pixels high.png. ton in the Navigation bar. The icon for the Contents buttocSelectedIcon. but the other icons in the top Toolbar should be taken into account. 6.png. The icon for the Store button in its selected state. adding an image into the Toolbar folder and named topToolbarLogo.5 Colors The following Navigation bar colors can be customized: Application toolbar. This image is not provided by default. The color of the storeIcon. The icon for the Library button in its selected state. storeSelectedIcon. the width is variable.

5 Flipview The Flipview appears when the user taps the Contents button in the Navigation bar.Chapter 07 Customizing the iPad Reader App 6. the Page Scrubber (optional). and the Section Viewer (see figure below). A B C D A Flipview Header B Story Viewer / Page Viewer C Page scrubber D Section Viewer Figure 6.5. the Story Viewer / Page Viewer. The appearance of the Flipview can be modified by changing any of the following: Assets Color Fonts Header Thumbnail size Thumbnail awareness Margins Story title Story bullets Story description Page scrubber Each is explained in the following sections. It shows the Flipview Header. The Flipview appears when tapping the Contents button in the Navigation bar 119 iPad .

5. This asset needs to be 32 pixels wide and 9 pixels high. The following assets can be customized (see figure 6. This asset needs to be 1024 pixels wide and 37 pixels high. but the middle section will stretch. This asset needs to be 23 pixels high.0. The image to images folder transparentImageForFlipviewButton. The height depends on the size of the thumbnails that are being used. Scrubber button. ton.png.png. Image Dimensions. 120 iPad the left of the Page Scrubber button. This asset needs to be 21 pixels wide and 21 pixels high.1 Assets The Flipview assets are stored in the root images folder and the images/Flipview folder. story name. The image images/Flipview folder flipviewBackground.x/Software. see appendix C.png.png. Asset shown before the flipviewCloseButton.Chapter 07 Customizing the iPad Reader App 6.png. The Page pageScrubberTrackLeft. This asset needs to be 26 pixels wide and 26 pixels high.woodwing. Image used for the selected status of a thumbnail in the Flipview. Dimensions: This asset needs to be 1024 pixels wide. pageScrubberTrackRight. The close but- flipviewSectionBackground. flipviewBullet. For an overview of the exact dimensions of each asset.1 on the next page: flipviewSelectedSectionButton. Various Flipview assets are available as PDF files which can be customized by using Illustrator. png. This asset needs to be 9 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same.png. but the middle section will stretch. They are part of a package which can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community. This asset needs to be 1 pixel wide and 23 pixels high.png. The background image behind the Page Scrubber.png. to the right of the Page Scrubber button.5. pageScrubberBackground. The background image for the Sections viewer. . 10 Pixels of each side will remain the same. pageScrubberButton. The background image of the Flipview. This asset needs to be 32 pixels wide and 9 pixels high.png. This asset shown when a Section is selected in the Section viewer.net/ products/Enterprise%207.

5. The Flipview assets 121 iPad .1.Chapter 07 Customizing the iPad Reader App A B C D E F G H A F Flipview background pageScrubberButton B G flipViewCloseButton C flipviewBullet D flipviewSectionBackground pageScrubberTrackRight H flipviewSelectedSectionButton E pageScrubberTrackLeft Figure 6.

3 Fonts.2 Colors The following Flipview colors can be customized: Flipview background color. Flipview story name font. The color of the Flipview section text color selected.7.5. The color of the Flipview Flipview section text color.3 Fonts For an explanation about how to change the color of the fonts and how to assign custom fonts. of the story description below the story preview. header and issue description shown at the top. The following Flipview fonts can be customized: Flipview title font.Chapter 07 Customizing the iPad Reader App 6. shown behind the story previews. Flipview empty thumb border. text in the Section viewer. The font of Flipview story name color. download information is also displayed in the Flipview in the form of progress bars and text labels. The font of the story name/title in the Flipview. 122 iPad The color of the text in the Section viewer in its selected state. Color of the border for an empty thumbnail in the Page Viewer / Story Viewer. see section 9. see section 3. Flipview story Description color. The color of the Story title below the story preview. set an alpha value lower than zero. the story description in the Flipview. download information is also displayed in the Flipview in the form of progress bars and text labels. Viewer / Page Viewer title.7. To get a transparent color. When the progressive download functionality is used. . see section 9. The color of 6. For more information about customizing these components. For more information about customizing these components. Flipview text. The color When the progressive download functionality is used. Font settings for the Story the Flipview background.2 Progressive Downloading.2 Progressive Downloading. Flipview story description font.5.

The color of the Flipview Issue description. The Flipview Header can be used to display additional information about the magazine 123 iPad information. see appendix C. Image Dimensions. For displaying the title of the For an overview of the exact dimensions of this asset.5. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server. For closing the Flipview.4 Header The Flipview Header contains the following components (see figure below): Flipview title.plist file: Flipview/Show flipview header Changing the text color The following Flipview Header colors can be customized: Flipview text. The Flipview Header components can be hidden by deselecting the following option in the DMSettings.png B C A Flipview title B Issue description C Close button Figure 6. Changing the look of this button can be done by modifying the following asset: A Flipview/flipViewCloseButton. The font can be customized by modifying the following setting in the DMSettings.5.Chapter 07 Customizing the iPad Reader App 6.4.plist file: header and issue description shown at the top. For displaying issue Fonts/Issue description font Close button. Showing or hiding the Flipview header content magazine.strings file: /* The flip view name that is displayed */ "Flip view" = "FLIP VIEW". This can be modified by changing the following string in the Localizable. .

Verify both settings to make sure that the expected result is acquired. Digital Magazine Configuration – Step 1.5. To change the margins.php). (See the Enterprise 7 Admin Guide.plist file: Flipview/Margins/Pages top margin in Flipview Flipview/Margins/Flipview thumb margin height height Flipview/Thumbs/Maximum page thumb To change the thumbnail size.php file.5.6 Thumbnail Awareness By default.5. enter the required size in pixels for each setting. enter the required size in pixels for each setting. chapter 40. Matching the orientation of the thumbnails to the orientation of the device can be done by setting the following DMSetting to Yes: Flipview/Thumbs/Make thumbs orientation aware With this setting enabled.Chapter 07 Customizing the iPad Reader App 6. the thumbnails in the Story Viewer / Page Viewer are shown in landscape orientation.plist file: Flipview/Thumbs/Minimum page thumb 6. 6. These settings are directly linked to the thumbheight setting as part of the DigitalMagazineDevice Server feature in the configserver. 124 iPad .7 Margins The margins between each image and the margins between the images and the Flipview Header can be controlled by the following settings in the DMSettings. even when the device is rotated to portrait orientation.5 Thumbnail Size The size of the thumbnails can be controlled via the following settings in the DMSettings.2 Configuring configserver. thumbnails in portrait orientation are shown when the device is rotated to portrait mode and thumbnails in landscape orientation are shown when the device is rotated to landscape mode.

The story title is displayed below the first page of each story and is therefore a clear indication of where each story starts. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom) 125 iPad . A Story bullet Figure 6.Chapter 07 Customizing the iPad Reader App 6.9 Story Bullets A story bullet can be shown in front of each story title. This is especially useful when the Reader App is configured for Page Navigation (see section 6.5.8 Story Title Below the first page of each story.8.5. A Changing the appearance Changing the appearance of the Story bullet can be done by modifying the following asset: Flipview/flipviewBullet.1 Story vs Page Navigation).png B Story Title property Story title displayed in Reader A B Figure 6. see appendix C.9. The text that is displayed is taken from the Story Title property of a Dossier.5. A 6. Image Dimensions.5. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. the Story Title can be shown. The story bullet in the Flipview Story bullets are displayed by default and can be hidden by setting the following DMSettings to No: Flipview/Show story bullet For an overview of the exact dimensions of this asset.

10. The Description property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom) 126 iPad .Chapter 07 Customizing the iPad Reader App 6. set the following option in the DMSettings.5. To enable this feature. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.10 Story Description Below each story title a short description can be displayed as a further indication of what the story is about.plist file to Yes: Flipview/Show story description A The text that is displayed is taken from the Description property of a Dossier. B A B Description property Description displayed in Reader Figure 6.5.

This asset needs to be 26 pixels wide and 26 pixels high. This asset needs to be 1024 pixels wide and 37 pixels high. This asset needs to be 32 pixels wide and 9 pixels high.png.png.11 Page Scrubber When the Reader App is configured for Page Navigation (see section 6. pageScrubberButton. The image to the right of the Page Scrubber button. pageScrubberTrackRight. The background image behind the Page Scrubber.5.5. see appendix C. Scrubber button. pageScrubberBackground. The image to Figure 6. This asset needs to be 32 pixels wide and 9 pixels high. The Page A A pageScrubberTrackLeft.1 Story vs Page Navigation).png. 10 Pixels of each side will remain the same. Image Dimensions. Changing the appearance Changing the appearance of the Page Scrubber can be done by modifying the following assets (found in the Flipview folder): For an overview of the exact dimensions of each asset. The Page Scrubber can be used to quickly scroll through the pages of the magazine The Page Scrubber can be enabled by setting the following DMSettings to Yes: Flipview/Page scrubber enabled the left of the Page Scrubber button. 10 Pixels of each side will remain the same. but the middle section will stretch. it is advisable to offer the user the use of the Page Scrubber: a slider with which the user can quickly scroll through the pages of the Page Viewer. 127 iPad Page scrubber .11.png.Chapter 07 Customizing the iPad Reader App 6. but the middle section will stretch.

6. Visibility. that appear in the top Toolbar. Only show the top Toolbar bar when the user taps the screen. The color of the top Toolbar. Enabling or disabling the top 6.6 Top Toolbar Customizing the top Toolbar can be done by changing the following: Availability.1 Availability By default. Colors. 128 iPad . The area which the user should tap Items. The icons of the buttons and images. in order to display the top Toolbar. or always have it visible.Chapter 07 Customizing the iPad Reader App 6. the top Toolbar is disabled. Tap area. Each is explained in the following sections. The number of buttons and images Assets. It can be enabled by setting the following DMSetting to Yes: Navigation/Enable top toolbar Toolbar.

.6.1 The tap area can be limited to the bottom part of the screen by doing the following: In the Hotzones section of the DMSettings. etc. etc) is placed in that area. Web Elements. else that functionality is invoked instead. 1 129 iPad define the height of the area in pixels by modifying the bottom area height value.. When making use of this feature. Set the option Tap bottom to show (Optional) In the Touch Areas section. inform your designers so that no content or functionality (such as Hotspots. the top Toolbar appears when the user taps any part of the screen.3 Tap Area By default.6.plist file to Yes: Navigation/Top toolbar always on 6.Chapter 07 Customizing the iPad Reader App 6.3 Tap Area). The area that is tapped should not hold any functionality itself such as a Slide Show. Hotspot. links. Note that the top Toolbar obscures the top 48 pixels of the page content.6. make the following changes: toolbar to Yes.plist file. the top Toolbar only appears when the user taps any part of the screen (see section 6. The top Toolbar can also be made to permanently display by setting the following option in the DMSettings.2 Visibility By default.

but can be included in the Navigation bar instead by setting the following setting to Yes: toolbar Navigation/History buttons in bottom 130 iPad Share toolbar/Enable share toolbar . the following setting to Yes: Bookmarks List button. Typically used for displaying a Share Content button. For displaying the Navigation/Enable bookmarks in toolbar Share Content button.6. For displaying the TOC List.4 Items The top Toolbar can hold the following items: Back/Forward buttons. Image icon.plist file: Back/Forward buttons: are included by default. G A A D F B C D E F Back button B Forward button C TOC List button Audio control button E Bookmarks List button Image icon G Share content button Figure 6. Audio Control button. Included by default. Included by setting Audio Control. The components of the top Toolbar The inclusion of most buttons is controlled by enabling/ disabling specific settings in the DMSettings. For displaying the Navigation/Enable audio control in toolbar Bookmarks List button. logo. For displaying the the following setting to Yes: Share Content list.6. Included by setting Bookmarks List.3. Included by setting previously visited pages the following setting to Yes: TOC List button.Chapter 07 Customizing the iPad Reader App 6.png into the images/ Toolbar folder. Audio Control button. cannot be disabled. The logo in the center of the toolbar is added by adding an image named topToolbarLogo. For navigating to TOC List.

Needs to be 50 pixels high. icon for the Audio Control button when no audio is available. see section 6.6. Share Popup/shareTableIcon. Needs to be 50 pixels high. Toolbar/backIcon. topToolbarLogo. TOC List button. The icon for the Back button image in its selected state.png.5 Assets The following assets can be customized: For an overview of the exact dimensions of each asset. Needs to be maximum 45 pixels high.3 Right-ToLeft Support.png. Bookmark Popup/bookmarkTopBarSe- lectedIcon.Chapter 07 Customizing the iPad Reader App 6. The icon for the TOC List button in its selected state. When the Reader App is enabled for rightto-left support. see appendix C. For more information. else the direction of the arrow in the images is wrong.png.png. the width is variable. Toolbar/tocTableSelectedIcon. the assets for the Back and Forward buttons need to be switched. The icon for the Share Content button in its selected state. Image Dimensions. . The icon for the Toolbar/backSelectedIcon.png. Back button image. Needs to be 50 pixels high.p n g i nto th e To o l b a r fo l d e r automatically adds it to the top Toolbar. The icon for the Share Content button. The icon for the Bookmark List button. Image positioned in Toolbar/forwardIcon.png. png. The icon for the Toolbar/forwardSelectedIcon.png. 131 iPad Forward button image. The Audio Popup/audioTopBarSelected- Icon. The icon for the Audio Control button in its selected state (when audio is being played). for the Back button image in its selected state. png. Needs to be 50 pixels high.png.png. The icon Bookmark Popup/bookmarkTopBarIcon.png. adding an image named topToolb a r Lo g o. The icon for the Bookmark List button in its selected state. but the other icons in the top Toolbar should be taken into account. Toolbar/tocTableIcon.png. This image is not provided by default. Audio Popup/audioTopBarIcon. the center of the top Toolbar (typically a logo). The icon for the Right-to-left support Share Popup/shareTableSelectedIcon.

Bottom area: for bringing up the Navigation Right area: for navigating to the next page (or the previous page when the Reader App is set to Right-to-left mode) 132 iPad . Hotzones (shaded in red) are specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page The following areas are defined: Left area: for navigating to the previous page (or the next page when the Reader App is set to Right-to-left mode) bar. Figure 6. and bottom of the screen which can be tapped in order to navigate the magazine. right. Toolbar. The color of the top 6.6.7 Hotzones Hotzones are areas to the left.Chapter 07 Customizing the iPad Reader App 6.6 Colors The following top Toolbar colors can be customized: Application toolbar.7.

1 Story vs Page Navigation). Horizontal navigation Hotzones/ Touch areas. Vertical navigation One-finger swipe. one or two fingers can be used: Activates the bottom Hotzone. Hotzones/Tap sides to navigate. . Page navigation: takes the reader to the Two-finger swipe. it takes the reader to the next or previous story. Depending on the configuration of the Reader App (see section 6.Chapter 07 Customizing the iPad Reader App Each area can be controlled by the following options in the DMSettings. Defines the height One-finger swipe. or width of the different Hotzones. Works when the Reader App has been configured for story navigation only: next or previous page.plist file: Hotzones/ Tap bottom to show toolbar.8 Gestures Navigating from one page or story to another can be done by using finger gestures. Activates the Hotzones to the left and right of the screen. 6. Works when the Reader App has been configured for story navigation as well as for page navigation: Story navigation: takes the reader to the next or previous story. Page navigation: takes the reader to the 133 iPad next or previous page. Works only when the Reader App has been configured for page navigation.

This allows for different settings and styling per OS (Android.Chapter 07 Customizing the iPad Reader App 7. DMSettings file The following DMSettings can be configured: Store/HTML Store URL: The URL pointing to index-ios. Store/HTML Store fallback URL: The URL Possible values: Blank: if a packaged HTML Store as part of the Reader App build is used it is not needed to define a fallback page. For more information. Each is explained in the following sections. file. Customizing the HTML Store. iOS. This file is loaded when the external Web Store is not accessible. The Store The iPad Reader App makes use of the HTML Store. This file is loaded when the HTML Store is not accessible. Note the inclusion of the OS reference in the file name.1 Communication With the Store Communication with the Store is done by configuring the DMSettings file and the DigiMagKioskSettings file. customization is done in the following two areas: Communication with the HTML Store General Store features 7. On the Reader App side.html of the HTML Store. . URL: The URL pointing to a local HTML 134 iPad pointing to a local HTML file. see appendix G. etc.

Store/Resumable downloads. the content server needs to support the optional HTTP Range header. secret key as defined on the Kiosk Server.h file: DigiMagKioskLibrary_URL. Enables or disables the Name. The applica- Store/Default to gridview in store.) Takes care of delivery of all content (issues and movies). This URL needs to end with: “/json-rpc/”. allowing the Reader App to filter issues as defined by the filter data on the Content Delivery Platform. This version number needs to be higher or equal to the issue version defined in the Kiosk Server. This can be used to exclude an issue on the Kiosk Server side. (The WoodWing hosted solution supports this feature. future version. downloading via a 3G network. do not change.Chapter 07 Customizing the iPad Reader App DigiMagKioskSettings File Configuration settings are controlled by the following settings in the Classes/DigiMagKioskSettings. do not change. Enables the DigiMagKioskLibrary_SecretKey. (Used for custom development.1 if the Reader App should start the Store in Grid view or Single Issue view.2 General Store Features DMSettings General Store settings are controlled by the following settings in the DMSettings. product name as defined on the Kiosk Server. 1 135 iPad . The to always have the Store opened when the Reader App is launched. leave this feature disabled. Defines tion version. Store/Enable filter. Enables Store/Enable Filter. else the issue cannot be downloaded. Reserved for a DigiMag_ProductServerManagerClass- Store view. Store/Enable 3G Downloading. DigiMagKioskLibrary_ProductID. DigiMag_ContentServerManagerClass- In order for this feature to work.) Responsible for buying and displaying all issues in the Store.) When unsure whether a content server supports resumable downloads. Store Filter. The URL to 7. The DigiMag_ApplicationVersion. Enables a filter in the DigiMag_MagazineCode. (Used for custom development. user to resume a download when it has been interrupted.) Name. Allows connect to the Kiosk Server.plist file: Navigation/Always open in store. This class takes care of connecting to iTunes and taking care of the payments.

Subscription. The Library The Library is used for showing the user their available issues (those that have been downloaded and/or those that are part of a subscription). Customizing the Library can be done by changing the following: General appearance Download settings Back to Issue button Library Filters Subscription sign-in functionality choosing all issues. and Apple Subscription projects of the Reader App. Framework. 136 iPad . The values shown in the Filter itself are defined on the Content Delivery Platform. For more information. Each is described in the following sections. Using the Content Delivery Platform.Chapter 07 Customizing the iPad Reader App Localizable strings The following string can be customized for the Store Filter: All Issues. see appendix F. The value in the Store Filter for 8. The Library functionality is only available in the Pro.

Store/issueShadow. in the Store Library view. The shadow Store/libraryEmptyShelf.png.png. png. below the issue covers. Image Dimensions. The shadow Store/storeNoInternetErrorBackground. icon for an issue on the Library page.png.png. colors. used for closing or deleting a component. For the best results use a label with a transparent background.p ng. Assets Part of the Library assets are the same ones used for the Store. 137 iPad . see figures on the next pages).png. The closeButtonDefaultState. The remaining of the shelves in the Store Library view. . indicating that the issue contains Segments. although some are specific to the Library itself. as explained below.png. text. The image S tor e/ h ead e rBa r S hadow. The background is repeated across the whole width.png. It is aligned to the center. The whole image is visible when the device is in landscape mode. The 768 pixels in the middle are used when the device is in portrait mode. segments_stack_background.1 General Appearance The general appearance of the Library can be customized by changing assets. see appendix C. Shown when no internet connection available. Store/storeHeader. Store/storeNoInternetErrorLabel. The first shelf Store/libraryShelf.png. For an overview of the exact dimensions of each asset. The shadow as shown below the Library toolbar.Chapter 07 Customizing the iPad Reader App 8.png. Used as the top bar in the store and library view. Store/libraryFirstShelf. segments_shadow. and fonts. Used when there are no further shelves to show. between the top and bottom part of the Segments Overview page. The following assets can be customized (for examples. The label shown on top of the error background.

The assets of the Library Overview page Note that the bottom section of the Library in figure 8.Chapter 07 Customizing the iPad Reader App A B C D F F G A E storeHeader issueShadow B F headerBarShadow C closeButtonDefaultState libraryFirstShelf G libraryShelf D segments�stack�background Figure 8. see section Colors.2a is a color (Library background color). For more information about Library colors. 138 iPad E F .2a. and not an image.

2b.2b are colors and not an images. For more information about Library colors. see section Colors. The asset of the Library Segments Overview page Note that the top and bottom section of the Library Segments Overview page in figure 8.Chapter 07 Customizing the iPad Reader App A A segments�shadow Figure 8. 139 iPad .

Background color for the bottom half of the Segments Overview page. The color of the Library background.Chapter 07 Customizing the iPad Reader App Colors The following Library colors can be customized: Colors/Store colors/Library segment top Fonts background color. The font of the Library issue name font. Colors/Store colors/ Library issue name Library issue download status font. Colors/Store colors/ Library issue down- load progress color. The following Library fonts can be customized: Library issue download progress font.3 Fonts. issue in the Library. bytes color. The font of the bar color. For an explanation about how to change the color of the fonts and how to assign custom fonts. load status color. The color of the issue name in the Library. Colors/Store colors/ Library segment bottom background color. Colors/Store colors/ Library background Colors/Store colors/ Library download Library issue number font. Color of the progressive download bar. color. color. Color of the string that indicates the progress of the download. see section 3. issue number in the Library. The Available issues text font. The font of an Library downloaded bytes font. font of the download status label in the Library. The font of the download progress label in the Library. The font Colors/Store colors/ Library downloaded Colors/Store colors/ Library issue num- of the downloaded bytes label in the Library. ber color. Colors/Store colors/ Library issue down- 140 iPad . Background color for the top half of the Segments Overview page. The color of the string that indicates the download progress in bytes. ‘Available issues:’ text. The color of the issue number in the Library. Color of the string that shows the status of the download.

2 Text The customizable Library strings can be found in the Store section of the Localizable. enable the following DMSetting: Library/Auto open magazine 141 iPad By default. the download progress is shown in percentages.Chapter 07 Customizing the iPad Reader App 8.plist file: Library/Show progress in megabytes. .7. for more information see (section 9.3 Download Settings The process of downloading an issue or Segment can be divided into the following stages: Downloading Installing Opening Downloading When the non-progressive download method is used (not enabled by default. the non-progressive download process will always display the installation progress. To display it in megabytes. T he following DMSet ting has therefore been discontinued: Library/Enable install progress Opening To have an issue or Segment open automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). the following feature can be configured in the DMSettings.8.2 Progressive Downloading). select this option. Installing As of version 1. 8.strings file.

A B A Filter button B Filter list Figure 8. Two types of filters exist: Library Filter. for instance on magazine type.Chapter 07 Customizing the iPad Reader App 8. For filtering the Library on a high level. For filtering the Library on a more granular level. The Library filter allows a user to filter the Library by defined keywords 142 iPad . for instance by language. magazine type.5 Library Filters Filters can be added to the Library to allow the user to for instance filter the Library content to only display issues of a particular language.4 Back To Issue Button The Back To Issue button in the Library can be enabled/ disabled by means of the following DMSetting: Navigation/Back to issue button 8. etc. Library Segment filter.3.

set the following DMSettings to Yes: Library/Enable library filter Library/Enable library segment filter Changing the text The customizable Library Filter strings can be found in the Store section of the Localizable. For more information. choose Sports from the available list when uploading publications relating to sports. Using the Content Delivery Platform. choose the keyword which should be assigned to the magazine. 143 iPad .strings file. Note that the content of the Store filer (see section 9. For example: when a filter has been set up for distinguishing sports and finance publications.16 Store Filter) is used as the source for the Library filter. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. and Finance when uploading publications relating to finance. see appendix F. The values shown in the Filter itself are defined on the Content Delivery Platform. This can be achieved by doing the following: Upload your magazine content as a Segment using the WoodWing Content Delivery Platform and on the Segment Details screen.Chapter 07 Customizing the iPad Reader App To enable the filters in the Library.

2 Modifying the Reader App Appearance.6 Subscription Sign-in How to modify the Subscription sign-in functionality in the Library is explained in section 9.17. 144 iPad .Chapter 07 Customizing the iPad Reader App 8. 9. General App Features The Reader App functionality can be further enhanced by customizing the following features: APIs Audio Bookmarks Content Sharing Custom Home page Custom Objects Downloading methods Fullscreen Overlay iOS 5 iCloud support Libraries Newsfeeds Newsstand (iOS 5) Push notifications (messages) Slide shows Store filter Subscriptions Text View TOC List Video Web Elements Each feature is explained in the following sections.

Gestures API. For gathering information 9. For detailed instructions about how to integrate the default Omniture module into the Reader App. see appendix K. To use other analytics frameworks—such as Google Analytics or Flurry—a custom analytics module needs to be developed. For receiving and controlling Navigation API. buying an issue. Omniture Integration. Currently it is possible to implement the following APIs: Analytics API.1. gestures sent from the Reader App. and more. launching/exiting the app. For creating their user interface components with data fetching and navigational functions.Chapter 07 Customizing the iPad Reader App 9. Analytics modules can be used as an interface to receive these events. Omniture is the default analytics module that has been implemented in the Reader App. about how a user uses the Reader App.1 Analytics API The Analytics feature of the Digital Magazine Reader App can be used for logging events such as browsing to new sections. 145 iPad Each is described in the following sections. .1 APIs APIs can be used to add additional functionality to the Reader App.

146 iPad For an overview of the API structure. Each layout always contains one page. These can be used to navigate back in the data chain. An issue contains one or more stories. Note however that the delegate. target and action of the supplied gesture will be reset by the Gesture Manager. each holding up to two sets of pages: one with pages in landscape orientation and one with pages in portrait orientation. stories and pages. see appendix J. The issue object is the main entry point for querying the data structure. stories and pages).1. and orientation changes. These include loading the issue. Navigation API. With this API it is possible to navigate to the various components of the magazine (sections. In those situations. The data API provides access to the underlying data of the reader for use in an external user interface. the first landscape page is returned when the portrait page is requested. When another gesture is needed it is possible to add it via the Gesture Manager. Delegates can also indicate via the appropriate protocol methods whether they are able or willing to handle a particular gesture and if they want to block the propagation of the gesture to the navigation or object elements in the Reader App. These delegates will be notified when an gesture has occurred in the app. Currently the Reader App only supports a single tap and a long tap. . It is also possible to add custom gestures to the Gesture Manager. page changes. see appendix I. It also allows for adding custom gestures to the app that your classes can respond to. 9. The story and page objects also contain references back to their parent (issue and story respective). Data The Data Manager singleton holds a reference to the current issue (the issue that is currently loaded in the Reader app). Gestures API.1. All gestures are routed through the Gesture Manager. Delegates must conform to the supplied protocol. It also provides feedback on several key changes in the state of the Reader App. For an overview of the available classes. it is not possible to receive them directly. It contains methods to fetch lists of sections.Chapter 07 Customizing the iPad Reader App 9.3 Navigation API The Navigation API gives access to the core Reader App navigation functions. The correct set of pages for the current layout should be queried. However sometimes no portrait layout has been provided.2 Gestures API The External Gesture API contains functions to receive and control gestures sent from the Reader App. Gestures The Gesture Manager singleton acts as the interface between the app and the external code and contains functions for managing gesture delegates. The data is wrapped in an issue object that contains several convenience methods to access the data structure. This orientation can be obtained from the Navigation Manager.

Chapter 07 Customizing the iPad Reader App Navigation The Navigation Manager singleton contains methods that enables you to navigate through the currently loaded magazine. a page change is done. 9. this delegate will be notified when an issue loads. A delegate can be added to the Navigation Manager. It provides methods to navigate to pages. and when the layout orientation changes. Navigation API. The Navigation Manager also provides access to the current state of the Reader App such as the current layout orientation and the current visible page. see appendix J.2 Audio For the playback of audio. 147 iPad . the following features can be customized: Overlay assets Embedded audio controls Audio control pop-up Each is described in the following sections. When added. stories and sections. This delegate must adhere to the Navigation Manager protocol. For an overview of the available classes. It also provides an interface to the back and forward functions of the Reader App.

icons are available to indicate that an audio file can be played or stopped. The audio icon audioStopEnabledIcon.xml file in a plain-text editor. audioPlayDisabledIcon.2. If needed. For audio. audioPlayEnabledIcon Figure 9. edit the exported magazine. For an overview of the exact dimensions of each asset. see appendix C.mp3</url> <autoplay>false</autoplay> <backgroundaudio>true</backgroundaudio> </audio> </object> The controls are also shown when the backgroundaudio property is not included 1 audioPlayEnabledIcon. The audio icon when a streamed audio file is not available or when no internet connection is available.2. . the controls for an embedded audio file are always displayed. The audio play enabled icon The audio assets are stored in the Overlays/Audio folder.png. enable the Audio Control pop-up (see section 9. add the following property: <backgroundaudio>true</backgroundaudio> Possible values: true: controls will be hidden false: controls will be shown1 Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=”95”> <url>images/story_23/audio_95. the controls can be hidden for each individually placed audio file.3 Audio Control Pop-Up). To hide the controls for a placed audio file.1 Overlay Assets Overlay assets are icons that appear over other objects to indicate their intention or state.Chapter 07 Customizing the iPad Reader App 9. Image Dimensions.1. Locate the created audio object by searching for <type>audio</type>.xml file as follows: Step 1.2. Step 3. shown when the audio file is not being played. The audio 148 iPad Step 2.png.2. In the audio id section.png. In order to give the user control over the playback of the audio file. icon when the audio file is being played. The following assets can be customized. Open the exported magazine.2 Embedded Audio Controls By default. A A 9.

Chapter 07 Customizing the iPad Reader App 9. the top Toolbar. The Audio Control feature consists of an Audio Control button in the top Toolbar and the Audio Control pop-up which itself contains the following components: Control pop-up header. The Audio Control functionality is controlled by means of the following settings in the DMSettings.3 Audio Control Pop-Up When the playback of an audio file has been started (either manually or automatically). not for files streamed from the Web. toolbar.2.2. Audio title.) Navigation/Enable top toolbar. The header of the The implementation of this feature involves the following steps: Enabling the functionality Changing the assets Localizing the text Adding the audio title and description Audio Control pop-up. The Audio Control pop-up components 149 iPad song being played.plist file: . Short description of the Enabling the Functionality Stop/Play button. Audio description. Makes the Audio Control button available in the top toolbar.3a. Each step is explained in the following paragraphs. Slider. Title of the song being played. For scrolling through the file. Enables A B C D E F C F A Audio Control button B Header description E Stop/Restart button Audio title Slider D Audio Figure 9. Button for stopping/ Navigation/Enable audio control in restarting the playback. the Audio Control feature can be used to control the playback. (Works for embedded audio files only.

3b. audioControlSliderBGLight. audioTopBarIcon. The Play icon for the A C D E F C E image to the right of the Control Slider button.png. The icon for the button when no audio has been loaded.png.png. audioControlDisabled. The following assets can be customized: For an overview of the exact dimensions of each asset. audioControlBG. The icon for the Audio Control button in the top Toolbar when no audio is available. The Audio Control assets Stop button in the Audio Control.Chapter 07 Customizing the iPad Reader App Changing the Assets A The Audio Control assets are stored in the Audio Popup folder. The background B image for the Audio Control. The icon 150 iPad audioControlSliderBGDark. audioControlPlay. image to the left of the Control Slider button. The audioControlSliderButton.png. Image Dimensions. see appendix C.png. The audioTopBarSelectedIcon B AudioControlBG audioControlPlay D audioControlSliderBGLight audioControlSliderButton F audioControlSliderBGDark .png. button in the top Toolbar. The icon for the Figure 9. for the Control Slider button. for the Audio Control button in the top Toolbar in its selected state (when audio is being played).png. audioTopBarSelectedIcon.png.png. The icon audioControlStop.2.

xml file needs to be edited as follows: Step 1.Chapter 07 Customizing the iPad Reader App Localizing the Text The customizable Audio Control strings can be found in the Audio Control section of the Localizable.mp3</url> <autoplay>false</autoplay> <title>Audio title</title> <description>Audio description</description> </audio> </object> 151 iPad . Locate the created audio object by searching for <type>audio</type>. Step 2. Open the exported magazine. the exported magazine. add the following properties: <title>Audio title</title> <description>Audio description</description> Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=”95”> <url>images/story_23/audio_95. Step 3. Adding the Audio Title and Description To add the Audio Title and Audio Description to the Audio Control.xml file in a plain-text editor.strings file. In the audio id section.

3 Bookmarks A Bookmarks List button can be made available in the top Toolbar for providing users access to the Bookmarks List.1 Enabling the Functionality The Bookmark functionality is controlled by means of the following settings in the DMSettings. The Bookmarks List allows users to bookmark one or more stories in order to easily return to these stories at any stage. A Bookmark List for bookmarking stories and for managing created Bookmarks. The Bookmark functionality consists of the following components: A button in the top Toolbar with which the 9. the top Toolbar.3. Enables Bookmarks List can be displayed. 152 iPad . Makes the Bookmarks button available in the top toolbar. Implementing of this feature involves the following steps: Enabling the functionality Changing the assets Changing the colors Changing the fonts Localizing the text Changing the dimensions Each step is explained in the following sections. Navigation/Enable top toolbar.Chapter 07 Customizing the iPad Reader App 9.plist file: Navigation/Enable bookmarks in toolbar.

2 Changing the Assets The Bookmark assets are stored in the Bookmark Popup folder. The following assets can be customized: For an overview of the exact dimensions of each asset. Image Dimensions. bookmarkTopBarIcon.png. see appendix C.2.3.Chapter 07 Customizing the iPad Reader App 9.png. The icon for the Bookmark List button in the top Toolbar.3. . bookmarkAdd. The A bookmarkTopBarSelectedIcon B bookmarkAdd Figure 9. bookmarkTopBarSelectedIcon. The icon for the Add B A Bookmark button in the Bookmark List.png. The Bookmark assets 153 iPad icon for the Bookmark List button in the top Toolbar in its selected state.

4 Changing the Fonts For an explanation about how to change the color of the fonts and how to assign custom fonts.3 Changing the Colors The following Bookmark colors can be customized: Bookmark selected row color. The following Bookmark fonts can be customized: Bookmark cell issue title font. story title.3. 154 iPad . Bookmark cell story title font.Chapter 07 Customizing the iPad Reader App 9. Font of the selected row in the Bookmark List. issue title. see section 3.3. Color of the 9. Font of the story description. Font of the Bookmark cell story description font.3 Fonts.

Bookmark Popup/Popup width.3.strings file. the width of the Bookmark List.6 Changing the Dimensions The dimensions of the Bookmarks List are controlled by the following DMSettings. Controls 155 iPad . 9. Controls the height of the Bookmark List.5 Localizing the Text The customizable Bookmark strings can be found in the Bookmarks section of the Localizable.Chapter 07 Customizing the iPad Reader App 9.plist options: Bookmark Popup/Popup height.3.

This is done by creating a Hyperlink object and setting its intent property to Shared Article. Enabling the use of this feature involves performing the following steps: Adding a custom metadata property to Enterprise server Configuring the DigiMagSettings.6 Adding Custom Metadata. one Hyperlink can be made available for sharing. (For more information about creating a Hyperlink object for sharing purposes.) For each story (Dossier). see the Enterprise 7 Admin Guide. Creating Content – section 5. chapter 40 Digital Magazine Configuration – section 1. 156 iPad holding information related to the story.1 Adding Custom Metadata (This step is optional and only has to be performed when URLs are to be shared. A manually defined part of URL.Chapter 07 Customizing the iPad Reader App 9. Part of a page.4.h file Cleaning the project targets Enabling the functionality Changing the assets Changing the colors Localizing the text Each step is explained in the following sections. page or the thumbnail of the page as shown in the Story Viewer / Page Viewer. Either the currently visible part of the 9. typically The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar.4 Content Sharing The Content Sharing functionality allows the user to share specific content with others by sharing the content via Twitter.) The intent property is a custom property in Enterprise. Creating Shared Content. a page. or e-mail. see chapter 5.11. The following content can be shared: Page. For instructions about adding this property to the system. . A link to an external Web site. Facebook.

= @"apiKey". Facebook: change the AppID. apiKey and appSecret with the retrieved information from Facebook: NSString* facebookAppID NSString* facebookAPIKey NSString* facebookAppSecret = @"appID". Change the login and key with the retrieved information from bit.4. NSString* bitlyAPIKey = @"key".3 Cleaning the Project Targets Clean the project targets of the Xcode project by choosing the Clean All Targets command from the Build menu and follow the instructions. 157 iPad . Access information to the various services is kept in the Classes/DigiMagSettings.h File Access to the various services is achieved by the use of API keys. of the URL in Twitter messages.Chapter 07 Customizing the iPad Reader App 9. bit. the default e-mail account on the iPad is used. E-mail: no settings are provided. = @"appSecret". NSString* twitterOAuthConsumerSecret = @"secret".4.ly: NSString* bitlyLogin = @"login". only bit. Check with the relevant service provider how to get hold of an API key for that service.2 Configuring the DigiMagSettings. TwitPic: change the secretkey with the retrieved information from TwitPic: NSString* twitPicAPIKey = @"secretkey".h file of the project.ly: Used for inserting a shortened version 9. Twitter: change the key and secret with the retrieved information from Twitter: NSString* twitterOAuthConsumerKey = @"key".ly is supported for this feature. Currently.

handle of the Area Selector in its selected state.png. see appendix C. The corner handle of sharing_mover_selected. Image Dimensions. Controls the functionality of sharing the full page.4. (These are the thumbnails as available for the Flipview.png. The icon for the e-mail ser- . A screenshot is made of the full thumb. The Move handle of the shareTableIcon. Navigation/Enable top toolbar.png. shareMail.png. Content button in the top toolbar. the Facebook service is available as an option in the Share Content list. Enables/disables the Share Content button in the top toolbar. The icon for the ing. Share toolbar/Enable facebook.png. The icon for the Twitter 158 iPad screen.png. The icon for enabled. The icon for the Facebook service when it is not available. The icon for the Share shareTableSelectedIcon. the email service is available as an option in the Share Content list. sharing_corner_selected. sharing_corner.png.png. Share toolbar/Enable email sharing. Possible values: none. shareFacebookDisabled. When enabled.4. Facebook service when it is available. enabled. vice when it is available. When sharing_mover. Share toolbar/Share page. full. The icon for the shared. Enables/disables the functionality of sharing a part of a page. The Move Share toolbar/Enable twitter. Disables the functionality. The following assets can be customized (see figures below): For an overview of the exact dimensions of each asset. service when it is available. Enables/ the Share Content button in the top toolbar in its selected state. showing the page in its current view.png. Area Selector when not selected. A thumbnail of the page is shareMailDisabled. shareFacebook. the Area Selector when not selected. the Twitter service is available as an option in the Share Content list.png.plist file: Share toolbar/Enable partial page shar- 9.4 Enabling the Functionality The Share Content functionality is controlled by means of the following settings in the DMSettings.5 Changing the Assets The Content Sharing assets are stored in the Share Popup folder.png.Chapter 07 Customizing the iPad Reader App 9. When handle of the Area Selector in its selected state.) e-mail service when it is not available. The corner Share toolbar/Enable share toolbar. shareTwitter. disables the top Toolbar.

Page sharing table info color. The title stretchablePostButton. The icon for the Post button in the Twitter and Facebook window. A of the info page (the screen shown when the user needs to make a choice of sending a full page or part of a page). ground of the info page title area (the screen shown when the user needs to make a choice of sending a full page or part of a page).4. The Content Sharing List assets A B C sharing�corner B sharing�mover sharing�corner�selected A C Figure 9. 9.png.6a.Chapter 07 Customizing the iPad Reader App shareTwitterDisabled.4.6 Changing the Colors The following Content Sharing colors can be customized: Page sharing table info text color. The backB C D A C shareTableSelectedIcon B shareTwitter shareFacebook D shareMail Figure 9.4. The Screen Selector assets 159 iPad .png.6b. The icon for the Twitter service when it is not available.

The following strings are available for the Content Sharing functionality: /* Share table Social media translations */ "Twitter" = "Twitter". "E-mail" = "E-mail".". "Sharing" = "Sharing"." = "The article has been posted. used multiple times. %1$@ = text entered by the user %2$@ = the Web address as provided by the story Hyperlink (automatically shortened) %3$@ = the shared image %4$@ = Story title Each value can be used at any location in the string. /* Email sharing subject format */ "Email sharing subject format" = "%1$@". 160 iPad . %1$@ = the Web address as provided by the story Hyperlink %2$@ = Story title Each value can be used at any location in the string.4. /* TwitPic sharing text format */ "TwitPic sharing text format" = "%1$@ (%2$@.". /* Share button */ "Share" = "Share". or left out completely. used multiple times. /* Partial page option in page sharing selector */ "Part of this page" = "Part of this page". or left out completely. /* Page option in page sharing selector */ "This page" = "This page". "Characters left" = "Characters left". /* Title in page sharing selector */ "What to publish" = "What would you like to share?". %4$@)". used multiple times. "Facebook" = "Facebook". "The article has been posted. or left out completely. /* Email sharing text format */ "Email sharing text format" = "%1$@ . "Post" = "Post".7 Localizing the Text The customizable Content Sharing strings can be found in the Share table Social media translations section of the Localizable. /* Twitter sharing text format */ "Twitter sharing text format" = "%1$@ .%2$@ (%3$@. %3$@)". "Couldn`t post the article. //post button title. /* Edit clipping button */ "Edit clipping" = "Edit Selection".Chapter 07 Customizing the iPad Reader App 9.%2$@". or left out completely. %1$@ = Story title The value can be used at any location in the string.strings file. %1$@ = text entered by the user %2$@ = the Web address as provided by the story Hyperlink (automatically shortened) %3$@ = the shared image Each value can be used at any location in the string." = "The article could not be posted. used multiple times.

the Store with preview.1 Requirements There are several requirements that need to be met before (and during) the integration of the external component can be implemented: The external component always needs to run full screen (with status bar). preferably in the application delegate. As much memory as possible needs to be freed up. holder for the UIView’s that are returned by the API. Device orientation notifications should be A UIViewController should be used as a place- 161 iPad . The following sections describe the required steps for implementing this feature. the magazine content is not shown). started early.5 Custom Home Page The Reader App can be embedded in another application (referred to as an external component) which acts as a shell. When the external component is active (and as a result. the Library.Chapter 07 Customizing the iPad Reader App 9. there is no need to keep any images and or other visual data in memory. From it you can deeplink into the Reader App via API calls to open the Store. When opening the magazine. 9. this shell will display first.5. and the latest issue.

The selector will be called upon the sender once the Reader App is done with the external component. (For future implemen- tation) The external representation of an issue object. The parameters ‘sender’ and ‘selector’ are both used as a way to return to the original application. The ‘externalIssue’ parameter is not used in this implementation.h. (UIView *)openReader:(id)sender backSelector:(SEL)selector. The component will continue with the latest downloaded issue. mentation) The protocol for asynchronous calls.h.2 Header Files Implementing the external component can be done by using the following public header files: DMExternalDelegate. The parameters ‘sender’ and ‘selector’ are both used as a way to return to the original application. Will return a UIView containing the Store in single-issue view mode.Chapter 07 Customizing the iPad Reader App 9. all the calls necessary to access the Digital Magazine component. (For future imple- (UIView *)openLibrary:(id)sender backSelector:(SEL)selector. Not implemented at the time of writing. 162 iPad . Will return a UIView containing the reader.h. (void)latestIssue. Will return a UIView containing the Store in Grid view mode. Will return a UIView containing the Library. This header file contains (DMExternalIssue *)lastDownloadedIssue. DMExternalIssue.5. The ‘showPreviewPopup’ makes it possible to show the preview of the latest issue. Not implemented at the time of writing. Not implemented at the time of writing. (UIView *)openStore:(id)sender backSelector:(SEL)selector. It contains the following functions: DMExternal. (UIView *)openStore:(id)sender backSelector:(SEL)selector withIssue:(DMExternalIssue *)externalIssue showPreviewPopup:(BOOL)showPreview. (UIView *)openReader:(id) sender backSelector:(SEL)selector withIssue:(DMExternalIssue *) externalIssue. Implement this protocol for receiving feedback from the DMExternal object. The parameters ‘sender’ and ‘selector’ are both used as a way to return to the original application.

currentDeviceOrientation = UIDeviceOrientationPortrait.currentDeviceOrientation = UIDeviceOrientationLandscapeLeft. // add the subview to the view [self. also a public header. Includes // external components #import <DigiMagLibrary/DMExternal. 768. 1004). // create the digital magazine view if( digitalMagazineExternal == nil ) digitalMagazineExternal = [[DMExternal alloc] init].view bringSubviewToFront:digitalMagazineExternalView].Chapter 07 Customizing the iPad Reader App 9.3 Implementation Below are a few implementation examples. 1024. if( UIInterfaceOrientationIsLandscape(self. 163 iPad . [DMSLOrientationManager orientationManager]. digitalMagazineExternalView = [digitalMagazineExternal openStore:self backSelector:@ selector(back) ]. is required to set the initial orientation state of the component. [DMSLOrientationManager orientationManager].h> The DMSLOrientationManager. [self.interfaceOrientation) ) { frame = CGRectMake(0.h> #import <DigiMagSharedLibrary/DMSLOrientationManager. } It is most important to execute the code above first. This way they are more easily manageable.5. 748). Next. We recommend to make the DMExternal and the UIView that results from the API calls ivars. before initializing the DMExternal object. CGRect frame = CGRectMake(0.view addSubview:digitalMagazineExternalView]. create the DMExternal objec. // set the calculated frame [digitalMagazineExternalView setFrame:frame]. 0. 0. and put it into the ivar.

and save the returning UIView into an ivar. } 164 iPad // clean up the controller [digitalMagazineExternal release]. The implementation should look as follows: .(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return YES. the ‘back’ selector will be called. } Here. digitalMagazineExternal = nil.(void)back { // clean up the view [digitalMagazineExternalView removeFromSuperview]. Additional notes Be sure to implement the following UIViewController delegate in the parent view. All the code above should be called each time a view is requested. This should be done each time the back selector is called (to avoid memory leaks).Chapter 07 Customizing the iPad Reader App Next. set the frame and add the subview to the view. so that the appropriate auto rotation callbacks are supported. the ivars are cleaned up and released. call the appropriate API call. After that. . When the user is done. digitalMagazineExternalView = nil. .

(Optional) Implement the DMObjectTouchDelegate methods as listed in table 3b on the next page: Table 3c on the next page shows the members that are available from the DMCustomObjectBase.6 Custom Objects Objects with custom. The functionality of the element is completely upon the developer. it can be an extra user interface element.xml file. a 3D object. Include the following headers: #import <DigiMagLiteLibrary/ DMCustomObjectBase. this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout. 3rd-party functionality can be included in the magazine.h> Step 3. Custom objects are added to the Digital Magazine project in XCode by doing the following Step 1. create an entry with the following settings: Value: your newly created class name.Chapter 07 Customizing the iPad Reader App 9. Step 7. Implement the DMCustomObjectProtocol methods as listed in the table on the next page. Use the following class signature: @interface YourCustomClass : DMCustomObjectBase <DMCustomObjectProtocol. Step 5. Create a plist resource file named DMCustomObjects. DMObjectTouchDelegate> Step 4.h> #import <DigiMagLiteLibrary/ DMObjectTouchDelegate. In the magazine. The creation of a Custom Object on a layout starts by creating a Web Element. In the created plist file. . etc. create an entry for your custom object and set classtype to the key of the entry in the plist file. Step 2.plist. Create a new class in the Reader App project. Key: a string you can use to refer to your class. a list connecting to a database. Step 6. For example: <objects> <object> <type>custom</type> <x>10</x> <y>10</y> <width>200</width> <height>100</height> <customobject> <classtype>WWminimalObj</classtype> <parameters><![CDATA[TestButton]]> </parameters> </customobject> </object> </objects> 165 iPad Step 8.

(BOOL)canHandleGesture: (UIGestureRecognizer *)gesture (void)handleGesture: (UIGestureRecognizer *)gesture (BOOL)shouldHandleGestureExclusive: (UIGestureRecognizer *)gesture Table 9. [gesture locationInView:self. The viewControllers view is not yet available here. Test if this object can handle the gesture. Available members from the DMCustomObjectBase Method parameters objectFrame Function String with the parameters from the XML file.6b. Since this data can be anything it needs to be processed in the custom class.Chapter 07 Customizing the iPad Reader App Table 9. Use this to do work in the custom object. such as starting timers. Can be used to initialize the custom objects own members. However also include the standard dealloc method to send the appropriate release calls. Called after all initialization and load events have occurred.view bounds]. Perform actions that depend on the controller view here. Called when the object is removed from the object stack of the page.6c.6a. Called after the viewControllers viewDidLoad method was invoked. This normally occurs when the user navigates to another page. the bottom Navigation bar will not pop up when the user taps the screen. DMObjectTouchDelegate methods . Use this to do custom cleanup work. The standard implementation is: if( CGRectContainsPoint([self. Method (BOOL)gestureWillCancelNavigation: (UIGestureRecognizer *)gesture Function When this method returns YES. DMCustomObjectProtocol methods Method (void)loadObject (void)viewLoaded (void)run (void)destroy Function Called immediately after initialization. } Here useful things with the gesture can be performed.view]) ){ return YES. 166 iPad Table 9. When this method returns YES the gesture will not be propagated to underlying objects. }else{ return NO. The frame of the object in the parent object view.

Change the <t y pe> proper ty to custom: <type>custom</type> Step 4. <object> <id></id> <type>embedded</type> <x>33</x> <y>78</y> <width>132</width> <height>153</height> <link></link> </object> Step 3. The <parameters> element holds parameters that can be optionally supplied.plist file.6. In case any Custom Objects are to be included in the magazine.Chapter 07 Customizing the iPad Reader App 9. Step 2. Step 5. perform the following steps: Step 1. Add a <customobject> element as a child object of the custom property: <objects> <object> <type>custom</type> <x>33</x> <y>78</y> <width>132</width> <height>153</height> <customobject> <classtype>WWminimalObj</classtype> <parameters> <![CDATA[TestButton]]> </parameters> </customobject> </object> </objects> The <classtype> element refers to the key of the mapping to the class in the DMCustomObjects. the <link> property should therefore be empty. and therefore requires manual steps to be performed after the magazine has been exported. Open the exported magazine. 167 iPad . Locate the embedded object which has been created: The instructions in this User Guide for the layout designer were to not specify a URL for the Web Element.1 Configuring Custom Objects The current version of the Digital Magazine Tools does not yet have a fully developed user interface for implementing a Custom Object in a magazine. Repeat this process for all objects which should act as a Custom Object.xml file in a plain-text editor.

Library issue download progress color. Color of the download progress bar in the Library. Shows . 168 iPad Library/Enable install progress. loads.2 Progressive Downloading) which allows the user to start reading part of the magazine while the remainder of the magazine is continued to be downloaded in the background.7 Downloading Methods Downloading of magazines can be offered in one of two ways: Non-progressive Progressive 9. Changing colors The following non-progressive download colors can be customized: Library download bar color. the magazine is offered to the end user by means of the progressive download method (see section 9.strings file. Forces the Reader App to make use of the non-progressive download feature. Library/Show progress in megabytes.1 Non-Progressive Downloading By default.plist options: Store/Force non-progressive down- Each is discussed in the following sections. the step of unzipping the downloaded issue.Chapter 07 Customizing the iPad Reader App 9. Configuring this feature can be done by means of the following DMSettings. Localizing the text The customizable Downloading strings can be found in the Store section of the Localizable. Library issue download status color. Color of the download bar for an issue in the Library. Color of the download status label in the Library.7.7. Shows the progress in megabytes.

png. Downloading label font. T he Resume Download button. the downloading label on a page. (Similar to the "No internet connection" message. The font of Download button. Inpage percentage label font.png.3 Fonts. The font of Percentage label font.7.Chapter 07 Customizing the iPad Reader App 9.7. png. The overlay bar on the page that shows the download progress.) Changing the colors The following colors can be customized: Inpage downloading label color. p ng.1 Non-Progressive Downloading.png. The font of the downloading label in the Page Viewer / Story Viewer. load percentage label in the Page Viewer / Story Viewer. Color of the Changing the assets Downloading label in the Page Viewer / Story Viewer.png. libraryDownloadPause. 169 centage label in the Page Viewer / Story Viewer.png in its pressed state. Tapping the button allows to re-download the issue. downloadFailedReloadButtonPressed. the percentage label on a page. Images/Store (dimensions: 75x40 pixels): libraryDownload. Downloading label color. Color of the Downloading label on a page. The font of the per- Button shown at the top of the page if the download failed. The downloadFailedReloadButton.) downloadFailedReloadButton. The following Progressive Download assets can be customized: For an overview of the exact dimensions of each asset. see section 3. The Start Download button. The Pause Percentage label color. Color of the Changing the fonts The following fonts can be customized: For an explanation about how to change the color of the fonts and how to assign custom fonts. Changing the text The customizable Progressive Download strings can be found in the Reader section of the Localizable. see section 9. Color of the down- Inpage percentage label color.strings file. If non-progressive downloads are required. the only configuration is related to the appearance of the various download bars and labels (see below). download percentage label on a page.2 Progressive Downloading The Progressive Download feature works out-of-the-box. iPad . l i b r a r y Dow n loa d Ref r es h . see appendix C.png. progressiveDownloadOverlayBar. Images/Overlays: downloadFailedErrorLabel. The image with the error message shown at the top of the page if the download failed. Inpage downloading label font. Image Dimensions.

Adding the Navigation bar button. Access the fullscreenOverlayController. Add the FullscreenOverlay. perform the following steps: Step 1. Adding the Overlay Window Files . The process involves the following steps: Step 1. this file is available on the Community site: http:// community. and visibility of the top Toolbar or Navigation bar. its presentation style. Step 3. alignment. 170 iPad Step 2. make sure that it includes a Close button. Step 1. Customization Further customization can be added by controlling how the Overlay window will be shown. Customizing the display properties for the Overlay window.8 Fullscreen Overlay A fullscreen Overlay window can be added to the Reader App in which content created with Objective-C can be displayed.Chapter 07 Customizing the iPad Reader App 9. Adding the settings file to the Reader App project and setting the required settings. Step 4. add the code for customizing the above mentioned items.plist file from the sample code folder to the Resources folder of the project. Step 2. Adding the Settings File A settings file controls basic properties of the Overlay window. The Overlay window files can be added to the Reader App project by doing the following: Add the View Files folder from the sample code folder to the Classes folder of the project. Step 2.net/labs/samplecode.h file located in Classes/View files. modify the classname value to match the name of the Controller. The Overlay window is accessed through an additional button in the Navigation bar. In the @interface section. Step 1.woodwing. Each step is explained in the following sections. When making use of your own project files. auto-resizing mask. To add the file to the project. Step 3. The implementation of a sample file is described. Step 2. Adding the Overlay window files to the Reader App project. (Optional) In the Value field.

0. To minimize the bandwidth used.". Adding the Navigation Bar Button To add the button for accessing the Overlay window to the Navigation bar.woodwing. The text for these messages can be found in the Localizalbe. The iPad Reader App 2. but in an alternative folder that is not being backed up.0.Chapter 07 Customizing the iPad Reader App Step 4.x/Software.png. During this process. Step 3. The icon for for the Fullscreen Overlay window button in the Navigation bar. Depending on the number of magazines which need to be transferred. Add a new item named Fullscreen Overlay to the list of Toolbar items in the DMSettings file: Navigation/ToolbarItems 9. and can be localized when needed: "Updating filesystem" = "Updating file system.5 or higher. Note that when users are updating an older version of their Reader App to version 2. (Optional) Customize or localize the button assets found in the sample assets folder: fullscreenOverlayIcon.strings file in the Update section.".png.net/products/ Enterprise%207. Apple requires iOS5 apps to no longer store retrievable data (data that can be downloaded again) in the regular Documents folder. The icon for for the Fullscreen Overlay window button in its selected state in the Navigation bar.9 iOS 5 iCloud Support iOS5 provides the option to back up important assets from an iPad to the Apple iCloud over a Wi Fi connection.0. "Update error description" = "Updating the file system failed. Try to solve the problems by restarting the app. a message is displayed to the user stating that the file system is being updated. fullscreenOverlaySelectedIcon.\none moment please. . "Update error" = "Updating the file system failed".5 now stores magazines in the following location: Application�Home/Library/Caches/Issues Step 2. Note that "\none" is a line break "\n" and the word "one" combined. already downloaded magazines are transferred when first starting the new Reader App. this can take a few moment. Add the assets found in the sample assets folder to the following location of the project: Resources/images/Toolbar 171 iPad The Toolbar assets are available as PDF files which can be customized by using Illustrator. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community. perform the following steps: Step 1. This could lead to improper behavior in the app.

Library caching is not used for Libraries showing content that is not part of a subscription. default setting is 24 hours): . The Library is refreshed when one of the following occurs: The Reader App is loaded The Store is accessed The Library cache time has expired. Store/Subscriptions/Library cache time 172 iPad be set in the following DMSettings.1 Caching Libraries that show issues which are part of a subscription are now cached and refreshed under certain conditions.10 Libraries The following Library functionality can be customized: Caching Library Filters Segment Filters 9. This can Each is explained in the following sections.plist option (in seconds.Chapter 07 Customizing the iPad Reader App 9.10.

the use of the filter can be offered to only show those issues for a particular language. This filter can be used for filtering the issues that are displayed in the Library based on a predefined keyword. Enabling the Library filter The Library filter can be enabled/disabled by means of the following setting in the DMSettings.2. Editing the list content The content of the list is derived from the Content Delivery Platform and is identical to that of the Store filter.10.Chapter 07 Customizing the iPad Reader App 9.16 Store Filter.strings file. Localizing the text The customizable Library Filter strings can be found in the Store section of the Localizable. For information about setting up the filter and assigning an issue to a keyword.2 Library Filter The Library functionality can be extended by including a Library filter.plist file: Library/Enable library filter 173 iPad . A B A Filter label B Filter option Figure 9. The Library filter allows a user to filter the Library by defined keywords For instance: when your publications exist in multiple languages.10. see section 9.

To create the list.10. additional filtering can be offered by means of the Library Segment filter.10. the content can be further drilled down based on predefined keywords. provide the following information: The name of the Reader App in which the filter is used Filter label Filter list A The name which should be used for the The keywords which should appear in the B WoodWing will process the request for you and will inform you when this is completed.plist file: Localizing the text The customizable Library Segment Filter strings can be found in the Store section of the Localizable. Finance. By using this filter.3 Library Segment Filter Apart from filtering the content of the Library by using the Library filter (see section 9. 174 iPad . do the following: Send an e-mail to services@woodwing. and Finance when uploading publications relating to finance. Science.3. choose the keyword which should be assigned to the magazine. In your e-mail. A Filter label B Filter option Figure 9.com stating that you would like to make use of the Library Segment filter. For example: the Library filter can be offered to filter by language and the Library Segment filter to filter by content type such as Sports. This can be achieved by doing the following: Upload your magazine content as a segment using the WoodWing Content Delivery Platform and on the Segment Details screen. choose Sports from the available list when uploading publications relating to sports. The Library Segment filter can be enabled/disabled by means of the following setting in the DMSettings. etc.2 Library Filter). The Library Segment filter allows a user to filter the Library by defined keywords Enabling the Library Segment filter For example: when a filter has been set up for distinguishing sports and finance publications.Chapter 07 Customizing the iPad Reader App 9.10.strings file. Library/Enable library segment filter Creating or editing the list content The content of the list is derived from the Content Delivery Platform. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly.

the page is automatically found by the app and used. For an overview of the exact dimensions of this asset. see appendix C. The Newsfeed page is displayed as an overlay on top of the magazine Changing the appearance The single customizable component of the Newsfeed feature is the Close button. otherwise it falls back to the default behavior by showing a “no internet connection” message. Its content is taken from the Internet.html” within the feedview folder.” Fallback Newsfeed Page A Close button Figure 9. the Close button is not used. the displayed HTML page should include a built-in close button. 175 iPad Fullscreen mode . a fallback HTML page can be used for the Newsfeed functionality. If done correctly. Image Dimensions.11. these also have to be placed in the feedview folder. A simple example of a close button is: “<a href=‘close://’>Close</a>. In order to close this view. include a folder named “feedview” in the template project and create a HTML page named “fallback.plist file: Navigation/Newsfeed URL A Start with Newsfeed Configuring the Reader App so that it starts by displaying the Newsfeed page each time the App is started can be done by setting the following DMSetting to Yes: Navigation/Start with newsfeed Displaying the Newsfeed page in fullscreen mode can be done by setting the following DMSetting to Yes: Navigation/Enable fullscreen newsfeed In this mode. This can be achieved by creating an URL pointing to “close://”. Newsfeed URL The URL of the Newsfeed is derived from the following option in the DMSettings.Chapter 07 Customizing the iPad Reader App 9. Changing its appearance can be done by modifying its asset: closeButtonDefaultState.11 Newsfeeds When the user taps the Newsfeed button in the Navigation bar. If images or style sheets (CSS) are used. the Newsfeed page appears as an overlay on top of the page.png In case no internet connection is available. To enable this feature.

This way the download process does not have to be started manually. it is not also separately available on a springboard. Once all issues for a Reader App have been removed. New issues can be made to download auto- matically in the background as soon as they become available. Adding issues to the Newsstand is optional and controlled through a setting in the info. When an issue is removed. Once an issue is fully downloaded.html#newsstand. Issues can be displayed in one of two different ways: As a magazine As a newspaper This is controlled through a setting in the info. see www. the icon of the parent issue is displayed.Chapter 07 Customizing the iPad Reader App 9. the The icon is not changed when the download is started from the Reader App.plist file of the Reader App project. the Newsstand displays the app icon of the Reader App. Support for iOS 5’s Newsstand functionality is included by default in the following projects: Pro Framework Subscriptions Apple Subscriptions cover of that issue is displayed1. Displayed icons Initially.12 Newsstand (iOS 5) Reader Apps can be made part of iOS 5's Newsstand: a dedicated folder on the springboard of the iPad through which magazine and newspaper issues can be accessed. For issues containing Segments.apple. Having a Reader App in the Newsstand provides the following benefits for the user: The Newsstand acts as a central location from which a Reader App can be opened whithout having to locate it somewhere on the iPad first. Newsstand apps must offer at least one autorenewable In-App Purchase subscription. 1 176 iPad . the cover for the last downloaded issue is displayed.plist file of the Reader App project. the Reader App icon is displayed once more.com/ios/ios5/features. When a Reader App is made part of the Newsstand. For more information about the Newsstand.

the cover of the new issue is displayed. the following actions take place: A badge with the word ‘New’ is placed in the 9. Using the Content Delivery Platform – section 4. The 'New' badge displayed when a new issue is available 177 iPad . Each is explained in detail below. all Segments will be downloaded. the Newsstand can be notified by sending it a push notification. see appendix F. loaded in the background.8.) When the Newsstand receives such a notification. The look of the Newsstand The type of icons in which the issues are In case the Reader App is not yet running. see chapter 4. (This is done through the Content Delivery Platform. it is The download of the new issue is started.1 Configuration The following functionality can be configured: Including the Reader App in the Newsstand Defining the type of icon to display Newsstand background download support top right-hand corner of the issue icon. For more information about the downloading process.12.2 From Within the Newsstand.Chapter 07 Customizing the iPad Reader App Notifications and download initiation When a new issue is available. Using the Reader App – section 6.2 Sending a Newsstand Notification. For more information. displayed When an issue contains Segments. The following items are part of the iOS 5 user interface and cannot be configured or customized. When the download is complete.

the version used in the Task Manager also displays staples. Defines the 178 iPad C . A B A Magazine type icon B Newspaper type icon C Staples Figure 9. this is the Reader App icon. Icon to display when no issue is fully downloaded yet.11.1.plist Defining the type of icon to display The displayed issue can be presented in one of two types of icons: As a magazine As a newspaper file of the Reader App project.Chapter 07 Customizing the iPad Reader App Including the Reader App in the Newsstand To have the Reader App included in the Newsstand. The different types of icons in which issues can be displayed in the Newsstand To define the type of icon to use. set the following settings of the UINewsstand option: CFBundleIconFiles. do the following: In the Resources/DigiMag�Template-Info. type of icon to use for the issue: UINewsstandBindingType. (Default value: Icon.plist file of the Reader App project. do the following: In the Resources/DigiMag�Template-Info. set the following setting to Yes: Newsstand A p p l i c ati o n p re s e nts c o nte nt i n When the magazine type icon is used. or when all issues have been deleted.png). the position of which can also be defined. Typically.

staples are positioned on the right-hand side of the icon.7 Downloading Methods. Locate the Required background modes option. The Newsstand background download process is only supported when the Reader App is configured for progressive downloading. UINewsstandBindingEdgeLeft.) 179 iPad . For this to work.) Defines the position of the staples: staples are positioned on the left-hand side of the icon. perform the following steps: Step 1. Displays the newspaper type icon. The UINewsstandBindingEdgeBottom. Newsstand background download support UINewsstandBindingTypeNewspaper.plist file of the Reader App project. Access the Resources/DigiMag_ Template-Info. (For more information.Chapter 07 Customizing the iPad Reader App UINewsstandBindingTypeMagazine. Step 3. Step 2. (Used together with the magazine type icon. The UINewsstandBindingEdgeRight. When the Newsstand receives a notification that a new issue is available. Displays the magazine type icon. see section 9. Make sure that the following item is included: newsstand-content UINewsstandBindingEdge. The staples are positioned on the bottom of the icon. it needs to be able to communicate with the Reader App in order to initiate the download process. but only displayed in the Task Manager.

Both are located in the root images folder: . The No Internet Connection Assets 180 iPad The indicator consists of a background image and an image containing the text. For an overview of the exact dimensions of each asset. noInternetConnectionBackground.Chapter 07 Customizing the iPad Reader App 9. Locations in which this indication can appear are for example: The Store Frames with streaming video Frames with streaming audio Newsfeed windows Widgets Web Elements 9. Image Dimensions. Framework. this feature is available in the Pro. an indication is given to the user by a bar in the top of the frame in which the content is to be shown. etc. A B noInternetConnectionLabel.12.png. Subscriptions. (Since this is done via the Store functionality of the Reader App.png. new releases.14 Push Notifications (Messages) Messages can be sent to all users who have installed the Reader App for a particular publication in order to notify them of updates. and Apple Subscriptions Editions only. see appendix C. displayed in the bar.) The following sections describe how to configure the system and how to send out messages. The text A B noInternetConnectionBackground noInternetConnectionLabel Figure 9.13 No Internet Connection Indicators When no internet connection is available. Background image of the bar.

Provisioning file & certificate http://developer.14.1 Configuration Configuring the system for the Push Notification feature involves the following steps: Updating the provisioning file and installing the Modifying the DigiMagKioskSettings. Leave this set to the default setting unless a custom implementation is performed. The URL of the Push Notification server.com/iphone/library/ documentation/NetworkingInternet/Conceptual/ RemoteNotificationsPG/ProvisioningDevelopment/ ProvisioningDevelopment. see Apple’s Local and Push Notification Programming Guide: Each step is explained below. DigiMag_PushNotificationManager- DigiMagKiosSettings. Possible values: YES and No. For information about how to do this. Note the following: 181 iPad The provisioning profile needs to be enabled for Push Notification and the correct certificates need to be obtained for the server.h file In your Xcode project. configure the DigiMagKioskSettings. DigiMag_usePushNotifications.) Using the Push Notifications feature involves two steps: Configuration of the Reader App Sending the messages required certificate Each step is explained in the paragraphs below. Subscriptions. The name of the (3rd-party) class which handles the push notification messages. it can be uploaded by using the Content Delivery Platform (see section 9.h file. this feature is available in the Pro. NSString *DigiMag_PushNotificationManagerClassName = @"DefaultPushNotificationManager".2 Sending Messages). BOOL DigiMag_usePushNotifications = NO. Controls whether the Push Notification feature is used. be set to YES. (Since this is done via the Store functionality of the Reader App. and Apple Subscriptions Editions only.2 Sending Messages Users can be notified of new releases by sending out a message from the Content Delivery Platform.Chapter 07 Customizing the iPad Reader App 9.14.h file 9. DigiMag_PushNotificationKey: needs to DigiMag_PushNotification_URL.apple. Reader App configuration The Push Notification feature is controlled via settings in the DigiMagKioskSettings. be empty.14. Framework. The following settings are defined: .h file as follows: DigiMag_usePushNotifications: needs to ClassName.html#//apple_ref/doc/uid/ TP40008194-CH104-SW1 Make sure to not export the p12 file with a password.

DigiMag_PushNotificationKey NSString *DigiMag_PushNotificationKey = @"". see appendix F. Using the Content Delivery Sever – section 1. If this happens.14. overlay assets can be customized: icons that appear over other objects to indicate their intention or state.Chapter 07 Customizing the iPad Reader App For the generic version release. 182 iPad Reserved for future use. the value must be the same as the value for the DigiMagKioskLibrary�URL setting. Make sure to never start the Reader App by using Xcode while the option "DigiMag�PushNotification� URL" in the DigiMagKioskSettings.15 Slide Shows For Slide Shows. This URL needs to end with "/json-rpc/". an icon is available to indicate that the image on the page is in fact a Slide Show. 9. Figure 9. NSString *DigiMag_PushNotification_URL = @"https:// localhost/DigiMagKioskServer. The overlay shown in the bottom left corner of a Slide Show. A slideshowIcon Sending messages For information about sending a message. Sending a Message. This icon is positioned in the lower left-hand corner of the image. see appendix C. A . to be left empty.9. the push notifications aren’t send correctly in production.h file points to a production push notification server. The Slide Show icon The icon can be changed by customizing the following asset: For an overview of the exact dimensions of this asset.png. Image Dimensions. slideshowIcon. For Slide Shows.main/public/json-rpc/".

Using the Content Delivery Platform. and English when uploading English issues. both are the same. choose the keyword which should be assigned to the magazine. This filter is identical to the Library filter. A Library.Chapter 07 Customizing the iPad Reader App 9.16 Store Filter The Store functionality can be extended by including a Store filter.plist file: Store/Enable filter Creating the list content A The values shown in the Filter itself are defined on the Content Delivery Platform. This filter can be used for filtering the issues that are displayed in the Store based on a predefined keyword. see appendix F. The Store filter allows a user to filter the Store by defined keywords For instance: when your publications exist in multiple languages. For example: when a filter has been set up for distinguishing English and German issues. As far as setup and content is concerned though. the use of the filter can be offered to only show those issues for a particular language. Figure 9. Enabling the Store filter The Store filter can be enabled/disabled by means of the following setting in the DMSettings. The only difference is that in the Store it filters the content of the Store and in the Library it filters the content of the 183 iPad .strings file.15. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. For more information. A Filter label B Filter option Localizing the text The customizable Store Filter strings can be found in the Store section of the Localizable. This can be achieved by doing the following: Upload your magazine content using the B WoodWing Content Delivery Platform and on the Issue Details screen. choose German from the available list when uploading German issues.

Chapter 07 Customizing the iPad Reader App 9. where users can sign in to an existing subscription account.1. Modifying the Reader App appearance. Configuring the Reader App functionality. Subscription Server Integration – section 1. Step 3. The Library. and download any magazine issues that are part of their subscription. see appendix L. and view an advertisement about subscription offers. The subscription functionality is built into the following areas of the Reader App: The Store. Configuring the Content Delivery Platform. For more information. For a description of how the functionality works from a user’s perspective. For more information.2. The Navigation bar. see chapter 4. (See sections below. Using the Reader App – section 9. Configuring the Content Delivery Platform. (See sections below. sign Setting up the Subscription functionality involves the following steps: Step 1.17 Subscriptions The Subscriptions Edition and the Apple Subscriptions Edition of the Reader App can be used for offering magazines to users on a subscription basis. Subscription Server Integration – section 1. where users can 184 iPad Step 4. see appendix L.1. where users can subscribe. Step 2.) in to an existing subscription account. Configuring the Subscription Environment. Configuring the Subscription environment. Store With Subscription Functionality. Steps 3 – 4 are explained in the following sections. access their subscription account by means of the Account button.) .

The following options can be set: Store/Enable external subscription Subscriptions/Library cache time. Enables the Subscribe button in the Subscription section of the Store. The Store will not display the Offer 185 iPad Note that by this action. (Note that the cache is also emptied when the app is restarted or when the Store is accessed. Subscriptions/Reset password.plist file of the Xcode project. When the URL is not set on the Subscription server. Enables the use of both the iTunes Subscription Ser vice and a non-iTunes Subscription Service. iTunes Subscript ion ser ver: the issues for the Apple iTunes Subscription and the issues for the non-Apple iTunes Subscription are shown. Enables the E xisting Subscriber button in the Subscription section of the Store.1 Configuring the Reader App Functionality The options for the Subscription functionality are located in the Store section of the DMSettings. The working of a mixed subscription environment is as follows: A Sign In button is available in the Store Subscriptions/Disable offer in portrait Subscriptions/Open subscription page and Library for logging in to the non-Apple iTunes Subscription server (logging in to the Apple iTunes Subscription server is done automatically and does not require a log in button). Subscriptions/Enable existing sub- iTunes Subscription server: only the issues that are part of the Apple iTunes Subscription are shown. the Subscribe button in the Store will be unavailable. Subscriptions/Enable subscribe but- The Library will show the following content: All downloaded issues When not logged in to the non-Apple ton. the Reader App is closed. pages that are of the non-Apple iTunes Subscription.17. Apple does not allow this. server. For opening the subscription page in Safari when the user taps the Subscribe button in the Store. in Safari. Linked When logged in to the non-Apple to the same value on the Subscription server which stores the link to the Web page which users can use to reset their password. scriber but ton.) mode. For hiding the Offer pane when the device is rotated to portrait orientation. . The time after which issues that are part of a subscription are refreshed in the Library. This key is used when a user wants to reset their password (by tapping “I forgot my password” in the Login dialog box).Chapter 07 Customizing the iPad Reader App 9.

Navigation/ToolbarItems/Item 8 Account The appearance of the button can be changed by modifying the following asset: accountIcon. see appendix G.1 the Subscription server which stores the link to the Web page which users can use to view with information about how the user’s data is gathered. Customer service. Linked to the same value on Store The Subscription components of the Store are part of the HTML Store. The icon for the Account button in its selected state.1 9.2a. and the Library. Customizing the HTML Store.2 Modifying the Reader App Appearance Changing the appearance of the subscription components can be done by modifying components in the Store. The Account button in its selected state 186 iPad The button can be displayed/hidden by the following DMSetting: . For information about customizing these components. used.16. The icon for the Account button.Chapter 07 Customizing the iPad Reader App License agreement. Navigation bar.png. Linked to the same value on the Subscription server which stores the link to the Web page on which users can read the license agreement for the offered service. Linked to the same value Navigation bar The Navigation bar holds the Account button for accessing the My Account page.1 on the Subscription server which stores the link to the Web page which users can use to obtain customer service.png. accountSelectedIcon. A A accountSelectedIcon Figure 9.17. and managed. Privacy notice.

png.png. seButton. png. The Remember Me checkbox in its selected state in the Subscription Sign In dialog box. For the Sign In window. The Remember Me checkbox in its deselected state in the Subscription Sign In dialog box.png. Store/Subscriptions/Password/passDia- Sign In window Store/Subscriptions/shadowBarVertical. The background image of the Subscription pane in the Store.png. Subscribe buttons used in locations other than in the Store (for instance in the login dialog box. background of the header of the Subscription Sign In dialog box. The Close button for the Subscription Sign In dialog box. logBackground. The background of the password login dialog box.strings file: Sign out button Sign in button Background. p n g . Store/Subscriptions/stretchableSub- The icon for the Account button in the Navigation bar.png. colors. Store/Subscriptions/Dialogs/ Store/Subscriptions/subscriptionForm- checkbox. assets. scriptionStoreButton.png. text. T h e Store/Subscriptions/Dialogs/ Store/Subscriptions/Dialogs/clo- Store/Subscriptions/Dialogs/ 187 iPad Assets Store/Subscriptions/stretchableSub- scribeButton. The shadow bar between the Store and the Subscription panes.Chapter 07 Customizing the iPad Reader App Library The Library holds the Sign In/Sign Out button and the Sign In window.png. Background.png. checkboxChecked.) . The following assets can be modified for the Sign In window (see figure on the following pages): images/Toolbar/accountIcon. and fonts can be customized. h e a d e r B a c kg r o u n d . Store/Subscriptions/Login/loginDialog- Sign In/Sign Out button The labels can be modified by changing the following strings in the Store section of the Localizable. The background of the subscription Sign In dialog box. The subscription buttons in the Store (below the Offer pane).png.

color of the Email Address box text in the Subscription Sign In dialog box. of the privacy text in the Subscription Sign In dialog box. Sign-in email field text color. Sign-in license text color. The color of the “I forgot my password” text in the Subscription Sign In dialog box.strings file: Sign-in dialog The color of the disclaimer text in the Subscription Sign In dialog box.Chapter 07 Customizing the iPad Reader App Colors The following colors can be customized for the Sign In window: Sign-in disclaimer text color. The 188 iPad Sign-in remember checkbox text . Sign-in submit button text color. Text The customizable Sign In window strings can be found in the following section of the Localizable. The color Sign-in privacy text color. color of the title in the Subscription Sign In dialog box. The color of the Password box text in the Subscription Sign In dialog box. Sign-in dialog title text color. The Sign-in password field text color. The color of the “Remember Me” text in the Subscription Sign In dialog box. The color color. Sign-in forgot button text color. of the license text in the Subscription Sign In dialog box. The color of the Submit button label in the Subscription Sign In dialog box.

Chapter 07 Customizing the iPad Reader App Fonts For an explanation about how to change the color of the fonts and how to assign custom fonts. The font of the title of the 189 iPad . The font of the License Privacy text font. The font of the Privacy text Remember checkbox font. Subscription Sign In dialog box. The font of the “I forgot Submit button font. text in the Subscription Sign In dialog box. Dialog title font. The font of the Remember Me text in the Subscription Sign In dialog box. The font of the Password box in the Subscription Sign In dialog box. the Subscription Sign In dialog box. in the Subscription Sign In dialog box. The following Sign In window fonts can be customized: Disclaimer text font. Forgot button font. see section 3.3 Fonts. License text font. The font of the Submit Email field font. The font of the Disclaimer text in the Subscription Sign In dialog box. The font of the Email box in Password field font. button label in the Subscription Sign In dialog box. my password” text in the Subscription Sign In dialog box.

The Subscription assets in the Sign In dialog box 190 iPad .Chapter 07 Customizing the iPad Reader App A B C D A closeButton B headerBackground C loginDialogBackground D checkboxChecked Figure 9.16.2b.

woodwing. It is part of a package which can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community. Image Dimensions. This is the A textViewHeader B textViewImagesShadow shadow that is shown between the Text View and the image bar. This asset needs to be 768 pixels wide but can have a custom height. textViewHeader.18 Text View The Text View assets are stored in the Text View folder. textViewImagesShadow.17.x/Software.Chapter 07 Customizing the iPad Reader App 9. (Applies only to those A articles which have not been created using the Text View Markup feature) The header that is shown at the top of the Text View.png. The following assets can be customized: For an overview of the exact dimensions of each asset. The assets for the Text View 191 iPad B . This asset is available as a PDF file which can be customized by using Illustrator.0. This assets needs to be 768 pixels wide and 20 pixels high.net/products/ Enterprise%207. see appendix C.png. Figure 9.

18.Chapter 07 Customizing the iPad Reader App 9. Tapping the TOC button in the top toolbar brings up the TOC List 192 iPad . the following is shown: Thumbnail of the first page of the story The story title The story description Implementing of this feature involves the following steps: Enabling the functionality Changing the assets Changing the colors Changing the fonts Localizing the text Changing the dimensions Each step is explained in the following sections. For each story. A A TOC List Figure 9.19 TOC List The TOC List is a pop-up window containing a table of contents.

2 Changing the Assets The TOC List assets are stored in the TOC Pop-up folder. The following assets can be customized: For an overview of the exact dimensions of each asset. A A tocThumbBackground Figure 9. The image Step 2. tocThumbBackgroundVertical.19.18.2. Image Dimensions.png. The image behind the thumbnails in the TOC List when viewed in portrait orientation. tocThumbBackground. Enable the top Toolbar by setting the following DMSetting to Yes: Navigation/Enable top toolbar behind the thumbnails in the TOC List when viewed in landscape orientation.Chapter 07 Customizing the iPad Reader App 9. see appendix C.png. Enable the TOC List by setting the following DMSetting to Yes: Navigation/TOC List in top toolbar 9. perform the following steps: Step 1. TOC List assets 193 iPad .19.1 Enabling the Functionality To make the TOC List functionality available in the Reader App.

A C D A Story Description property B Story Description displayed in Reader C Story Title property D Story title displayed in Reader Figure 9.4 Changing the story text The story title and story description are taken from the respective Dossier properties of the Dossier that has been created for the story.4.19.Chapter 07 Customizing the iPad Reader App 9.18. Color of the 9.3 Changing the Colors The following TOC List colors can be customized: TOC selected row color.19. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for displaying the story title and description in the TOC List (bottom) Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. 194 iPad B . selected row in the TOC List.

strings file.Chapter 07 Customizing the iPad Reader App 9.5 Changing the Width and Height Controlling the height and the width of the TOC List can be done by the following options in the DMSettings.19. 195 iPad .plist file: TOC Popup/Popup height TOC Popup/Popup width 9.6 Localizing the Text The customizable TOC List strings can be found in the table of contents title for the vertical TOC section of the Localizable.19.

Chapter 07 Customizing the iPad Reader App 9.20 Video For the video functionality. The font of the 9.7 Changing the Fonts For an explanation about how to change the color of the fonts and how to assign custom fonts. the following can be customized: Overlay assets Hiding embedded video controls Remove the video once it has finished playing story title. The font of the story description. TOC cell story description font. see section 3.19. 196 iPad . The following TOC List fonts can be customized: TOC cell story title font.3 Fonts. Each is explained in the following sections.

20.19. The following assets can be customized: For an overview of the exact dimensions of each asset. The overlay shown A A videoDisabledIcon Figure 9.1a. for example when there is no internet connection available to play a streaming video. (See figure 9. The video disabled icon videoEnabledIcon. see appendix C.) A videoEnabledIcon Figure 9.1b to the right.1a to the right.png.19. For videos. Image Dimensions.19.1 Overlay Assets Overlay assets are icons that appear over other objects to indicate their intention or state.png.19. The video overlay assets are stored in the Overlays folder. an icon is available to indicate that the image on the page is in fact a Video. This icon is positioned in the center of the image.Chapter 07 Customizing the iPad Reader App 9. The video enabled icon 197 iPad on top of a video when it is not possible to play the video. videoDisabledIcon. The overlay shown A on top of a video when the video is available but has not started yet.) . (See figure 9.1b.

xml file needs to be edited as follows: Step 1. In the movie id section. else the user would not be able to leave fullscreen mode.Chapter 07 Customizing the iPad Reader App 9. Step 3. Step 2. Locate the created video object by searching for <type>movie</type>.xml file in a plain-text editor. add the following property: <moviecontrols>false</moviecontrols> Possible values: true: controls will be shown1 false: controls will be hidden Example: <object> <id>96</id> <type>movie</type> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <movie id=”95”> <url>images/story136/video_96. Open the exported magazine.2 Hiding Embedded Video Controls The controls for an embedded video can be hidden so that they don’t appear on the page. The user can control the playback of the video by taking the video into fullscreen mode.20. the controls will be shown. This can be controlled for each placed video individually. To hide the controls for a placed video.mp4</url> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <autoplay>false</autoplay> <autofullscreen>false</autofullscreen> <moviecontrols>false</moviecontrols> </movie> </object> If the <moviecontrols> setting is set to false (controls hidden) and the <autofullscreen> setting is set to true (video automatically played in fullscreen mode). the exported magazine. The controls are also shown when the moviecontrols property is not included 1 198 iPad .

thereby showing the content of the page behind the video frame. Open the exported magazine.Chapter 07 Customizing the iPad Reader App 9.xml file needs to be edited by performing the following steps: Step 1. This feature can be set for each individual movie. Step 2.mp4</url> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <autoplay>false</autoplay> <removeafterplay>true</removeafterplay> <autofullscreen>false</autofullscreen> </movie> </object> The video also stays visible when the removeafterplay property is not included 1 199 iPad . To enable this feature.21 Remove Video After Play This feature allows to completely remove (hide) a video from a page when it has finished playing. add the following property: <removeafterplay>true</removeafterplay> Possible values: true: the video will be removed1 false: the video will stay visible Example: <object> <id>0</id> <type>movie</type> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <movie id="0"> <url>test/movie.xml file in a plain-text editor. the exported magazine. Locate the movie which needs to be edited by locating its object reference of type movie: <object> <id>0</id> <type>movie</type> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <movie id="0"> <url>test/movie.mp4</url> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <autoplay>false</autoplay> <autofullscreen>false</autofullscreen> </movie> </object> Step 3. In the movie id section.

plist file: Ena bl e the fo llow ing set ting in th e Colors/Enable transparent Web Elements Web Element pop-up window The labels of the Back and Close buttons in the Web Element pop-up window can be changed and/or localized by modifying the following strings: /* Back button label */ "Back" = "Back". the following can be customized: Background The background of Web Elements can be made transparent by performing the following steps: For the HTML page which is to be embedded. set the background property in the body tag to transparent. /* Close button label */ "Close" = "Close". DMSettings. 200 iPad .Chapter 07 Customizing the iPad Reader App 9.22 Web Elements For Web Elements.

08 Building the iPad Reader App This chapter discusses the process of building the iPad Reader App using Xcode. Tips and Best Practices for further guide lines around these processes. 1. See appendix H. Preparation A Reader App without Store functionality A Reader App with Store functionality A Reader App without Newsstand functionality Each is explained in the following sections. 249 iPad Preparation steps are required before being able to build the following types of Reader Apps: .

For this purpose. When processed. Se nd a n e -mail to s e r v i c e s@ woodwing. and the Reader App needs to be registered on the Content Delivery Platform. (See section 2. pertinent information needs to be included in the final build of the Reader App.) defined on the Content Delivery Platform defined on the Content Delivery Platform A product ID for the Reader App.1 A Reader App Without Store Functionality When the magazine content needs to be part of the Reader App (as is the case for non-Store versions). Building. The folder is added to the project as a blue folder icon. as Step 2. as destination group’s folder (if needed). (See figure 1. Step 1. Click Add.com stating that you would like to distribute a Reader App by making use of the Content Delivery Platform. A dialog box will appear.1b on the next page. Set the following settings: Select the check box Copy items into 1. (See figure 1. To do this. Use these settings for building your Reader App. You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform (WoodWing will do this for you).1a on the next page. References for any added folders. the magazine that was exported from Content Station needs to be merged with the project.) 250 iPad . Drag the exported magazine into the Resources folder of the project in Xcode.Chapter 08 Building the iPad Reader App 1. you will be sent the relevant settings required for inclusion in the build: The Content Delivery Platform URL A secret key for the Reader App. Click the option Cr ea te Fol d e r Step 3.2 A Reader App With Store Functionality A Reader App with Store functionality needs to be able to communicate with the Content Delivery Platform on which the content resides. proceed as follows: If the content is retrieved separately from a Content Delivery Platform. To achieve this. the following steps can be ignored.) Step 2. perform the following steps: Step 1.

A dialog box appears when dragging a magazine folder to the Resources folder in Xcode Figure 1. The added magazine appears as a blue folder icon 251 iPad .1a.Chapter 08 Building the iPad Reader App Figure 1.1b.

When the App is to be tested on the iPad Simulator.2 A Reader App With Store Functionality) in the Xcode project as outlined in chapter 7. Step 5. O p e n t h e P r o F r a m e w o r k . Step 3. 252 iPad . Step 3.3 An App Without Newsstand Functionality Support for iOS 5’s Newsstand functionality is included by default in the following projects: Pro Framework Subscriptions Apple Subscriptions 2. Building To build the Reader App. Step 4. Remove the following keys: Application present content in Newsstand Icon file (iOS 5) Required background modes the iPad. Use the Bundle Identifier to make the Reader App unique. Click Build and Run. Open the Resources/DigiMag_ Template-Info. Subscriptions. Step 2. remove the functionality by performing the following steps: Step 1. perform the following steps: Step 1. Save the file. Step 2.Chapter 08 Building the iPad Reader App 1. When the App is to be used on When using any of these projects and when not making use of the Newsstand functionality. choose the Active SDK for the required output device: Device. Customizing the iPad Reader App – 7. Implement your Distribution profile. or Apple Subscriptions project respectively.1 Communication With the Store. see the iPhone Developer Program User Guide. For more information about these steps. Simulator. From the Overview list in the Toolbar. enter the details received from WoodWing (see section 1.plist. (Optional) When building the Reader App with Store functionality. Step 4.

The following main customization areas are defined: General App settings Navigation The Store The Library General App features Enabling those features that you want your Localizing the Reader App into a particular 4 .09 Customizing the Android Reader App Customizing the Android Reader App is important when you want to achieve any of the following: Giving it a unique look and feel (reflecting the content of the issues that will be viewed) users to use language In this chapter you will learn all about customizing the Android Reader App. After a few introductory sections in which general customization is discussed. customizing each Reader App feature is discussed in detail.

Required Tools In order to perform the steps as outlined in this chapter. Use your favorite editor for this task.0.png or . SDK: SDK Platform Android 3. 2. a single app is available which runs on both a Honeycomb and Froyo device. It is assumed here that both are correctly installed and that you are proficient in using these applications. this is indicated accordingly. 5 . OS Compatibility With the release of the Android Reader App v1. A Reader App build with SDK 3.0 can also be run on a Froyo device.ai/.pdf format. the following tools are required: Eclipse and (optionally) an emulator. The customization steps as outlined in this chapter can be used for both Froyo and Honeycomb. (Both come as part of the Eclipse and Android SDK). API 11. For editing images in .3.Chapter 09 Customizing the Android Reader App 1. Image editor. where customization is significantly different.

Open the Eclipse project. located in the [folder name]_Template folder. (Reader App versions with Store functionality only) Settings related to connecting to the Store. For example: DigiMag�Android�v1. DigiMag�Android�v1. res/drawable-nodpi.x�bxxx� Subscriptions. Loading a Project The Reader App is supplied as an Eclipse project. (Android Reader App Standard.zip assets/DMsettings.zip To load the project. as of v1. For Honeycomb- Standard.plist file. Step 2. For Froyo-specific res-drawable-nodpi-v11.x�bXXX�Framework. 6 . drawables.zip DigiMag�Android�v1.java.xml. Customizations should only be made to the “customer�app” project. For localizing the res/drawable folder. The naming scheme has changed.zip specific drawables. (used for both Froyo and Honeycomb). Two projects are loaded: “customer�app” and “ww�digimag”.x (Froyo) only) For customizing images related to the Subscription Sign In window. For custom- izing the Reader App functionality.x�bxxx�Pro� Framework.2 the Android reader uses the new naming scheme: DigiMag�Android�v1.Chapter 09 Customizing the Android Reader App 3. For generic drawables res-drawable-nodpi-v8.zip Customizing the Reader App is mostly done by making changes to the following areas of the project: src/[package folder]/DigiMagKiosk- Settings. Unzip the provided DigiMag file: DigiMag�Android�v1. perform the following steps: Step 1.3�b505�Basic� res/values/strings.x�bxxx�Basic� v1. text as displayed in the Reader App.

Any Honeycomb-specific drawables are located in the drawable-nodpi-v11 folder. As a result of this change. All drawables shared between Honeycomb and Froyo are located in the drawable-nodpi folder. Each is described in the following sections. What Can Be Customized? Changing the look & feel or the functionality of the Reader App is achieved by modifying any of the following areas: Drawables.0 the drawable-nodpi-v8 folder. see appendix C. Honeycomb. SDK version 3. Android. For a complete overview of which images are used on a unique platform and which are used on both platforms. icons. The functionality of the Reader App. Text.3 runs on both a Honeycomb and Froyo device. logos and headers.Chapter 09 Customizing the Android Reader App 4. Universal Builds The Android Reader App v1.2 Any Froyo-specific drawables are located in The drawable-hdpi. The text of specific titles as they appear in various places of the Reader App.2). The changes are as follows: The hdpi folder is no longer used for Froyo. Customizing colors and fonts is not yet possible in the current version. the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1. SDK 2. The location of all drawables has also been changed. Image Dimensions – section 2. Although the same app. 7 . Settings. the frameworks now contain drawables for both Honeycomb and Froyo. drawable-mdpi and draw- able-ldpi folders still exist but only contain the app icon. The mdpi folder is no longer used for 5. Interface components such as buttons.

The various drawables which can be customized for the different areas of the Reader App are described in the remainder of this chapter.com/guide/developing/ tools/draw9patch.2 Text Changing the appearance of the text can be done in the following ways: By changing the actual text By changing the language in which the text appears Each is explained in the following sections.woodwing.android.0. Each of these drawables are images and can be easily replaced by your own images. res/drawable-nodpi res/drawable-nodpi-v8 res/drawable-nodpi-v11 Take note of the following: Renaming drawables is not allowed.x: 5. the names are directly linked to the code in the Reader App All image names are in lower case All drawables need to be in PNG file format Some drawables are NinePatch graphics.x/ Software. 8 .html.png files.Chapter 09 Customizing the Android Reader App 5. Image Dimensions. For an overview of the exact dimensions of each drawable.9. these are identifiable by their file name which ends with a “9” (such as “downloadleft.net/products/Enterprise%207. Drawables are stored in the following project folders: Android Reader App v1. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as . The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community. icons and headers. Information about such files can be found here: http://developer.1 Drawables Drawables are user interface components such as buttons.png”). see appendix C.

Chapter 09 Customizing the Android Reader App 5. Most drawables in the Eclipse Buttons of the Navigation bar. modify the content of the file as required.1 Drawables. see section 5. (For more information. modify their respective file. The name of the Reader App itself is controlled by a setting in the Eclipse project. 9 .1 Changing the Text The text which appears in the Reader App originates from various sources. see section 7.) res/values/strings.xml res/values-v8/strings.2. but the following drawables also include text: or Library Drawables. Action bar Labels which indicate that no internet connection is available To change the text for these drawables.xml This file can be used to change the following types of text: App name Flipview header Action bar menu commands Table of contents title Download labels Button labels Store messages Warnings/error messages To change the text for any of these items. and can therefore be changed by different means (see figure on the next page): Settings.) project include icons only.xml res/values-v11/strings. (For more information.1 Reader App Name.

2.1.Chapter 09 Customizing the Android Reader App A B C A D C A Localizable string B HTML page C Drawable with text D Dossier property E Server property Figure 5. Text originates from various sources in the system 10 .

HTML pages. Digital Magazine Configuration. For a full list of language codes. Subscription Server Support – section 1. The two. Edit the strings.2. use Smart Connection for InDesign or Content Station.or three-letter codes should comply to the ISO 639-1 or ISO 639-2 conventions.2 Changing the Language The default language for the Reader App is English but it can be localized for other languages as well. see appendix L.1. Web Pages.1. Changing the text of these pages is done by modifying the relevant source files.gov/standards/iso639-2/ php/English_list. Section. chapter 40. Configure the device on which the Reader App is to be shown to the required language.loc. To change any of these properties. present specific information. change the Issue Description property on the Issue Maintenance page in Enterprise Server. Customizing the HTML Store – 3.php. Setting the properties of a Dossier controls the following: 5. Build the project.xml file as required. perform the following steps: The following instructions do not apply to localizing the HTML Store. For more information about setting these values. Step 6. This is done by including a language code which the Android device will use to display the strings in the corresponding language (only when the device is configured for that language.or three-letter country code specific to the localization. For information about localizing the Store. The Issue Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header. Step 3. To add a supported language to the Reader App. For more information.6 Language. Step 2. The format of a string is as follows: “<Key>” = “<Translation>”. The title for a story below a Story description. see appendix G. Story title. Dedicated HTML pages such as the Subscription Offer page in the Store. Create a duplicate of this folder and end the folder name with the two. (Note that the values used in the list are taken from their respective custom metadata properties. In the Eclipse project file locate the values folder in the res group.) Issue Maintenance page. else it will display the text in English). see: http://www.Chapter 09 Customizing the Android Reader App Dossier properties. 11 . Step 1. The story descrip- tion below the story title in the Flipview is derived from the Description property. To add or change this text. see the Enterprise 7 Admin Guide. Each section in the Section Viewer is derived from the Section Title property. Step 4. Step 5. thumbnail in the Flipview is derived from the Story Title property. Run the Reader App on the device.

Previewing Customizations Previewing any made customizations can be done by loading the Reader App onto an Android device from within Eclipse or by viewing it in an emulator.3 Settings Most of the customizations for the Reader App are performed in the DMSettings.android. Installation on SD cards To run the Reader App on an SD card instead of in internal memory. access the AndroidManifest.xml file.android. Step 2. see appendix E.com/guide/appendix/installlocation.com/ apk/res/android” android:installLocation=”preferExte rnal”> For more information.plist file. See the Eclipse/Android documentation for more details. 12 .html. The DMSettings File. the exported magazine. In your Reader App project. This allows you to change the functionality of the Reader App. see the Android documentation: http://developer. Which settings these are and for which features they are used is discussed in the remainder of this chapter. For a full overview of all settings in the DMSettings file. no user interface is available yet (such as hiding video controls). For some specific features.Chapter 09 Customizing the Android Reader App 5. Modify the manifest statement by adding the following: android:installLocation=”preferExternal” Example: <manifest xmlns:android=”http://schemas. perform the following steps: Step 1. This will be explained in the remainder of this chapter where applicable. For these scenarios.xml file can be modified. 6.

xml file to open it in the package explorer. such as privacy information or preferred device metrics. used throughout the Reader App. Change the value for app_name with the name of the magazine. In the project. Step 5. change the Package name to a unique name. (Optional) Perform steps 1–4 for each localization in your project. Version information Intent set tings. Step 3.1 Reader App Name The name of the app (as it appears on the device) can be changed by modifying the Eclipse project as follows: Step 1. General App Settings The following general features can be modified for the Reader App: Reader App name.Chapter 09 Customizing the Android Reader App 7. Reader App drawables. double-click the AndroidManifest. General drawables Web pages. Expand the res/values folder and double-click the strings. Web pages containing specific information. App as it appears on the Android device. The name of the Reader 7. Each setting is explained in the following sections. 13 . about the Reader App. Step 2. In the Manifest General Attributes. Settings to conver t Enterprise intent names to Reader App intent names.xml file. Version information. Step 4.

Reader App icon displayed on the Homescreen.2 Reader App Drawables Reader App drawables are images with a general purpose such as the app icon. Each is explained in the following sections. even on mdpi devices.3 Web Pages Web pages can be used for displaying specific information to the user. Customers should therefore always create an ldpi. For displaying custom icon. For informing the user Medium dpi. that the current device on which the magazine is viewed may not provide the best user experience since the device does not match the size for which the magazine was designed. Location: res/drawable-mdpi. For an overview of the exact dimensions of this drawable. Location: res/drawable-ldpi. mdpi and hdpi version of their application icon. Reader App icon displayed on the Homescreen.Chapter 09 Customizing the Android Reader App 7.png. Location: res/drawable-hdpi. 7. Reader App icon displayed in the information such as privacy information. The following types of information can be displayed: Custom information. 14 .png Different versions of this file exist: Low dpi.  High dpi. see appendix C. Image Dimensions. The launcher on the Android Honeycomb version (always) uses the hdpi version of the icon. Home Screen Editor. Metrics information.

3.. This page is displayed when the Custom button in the Navigation bar or Action bar is tapped. (Optional) When the Web page needs to be included as part of the project. perform the following steps: Step 1.3. Create a Web page containing the information to be displayed. (Optional. Step 3a. To cater for such a scenario. In the Eclips project.Chapter 09 Customizing the Android Reader App 7.html Step 3. add it to the following folder: . the Reader App does two things: It scales the page to make it fit the screen (Optional) It informs the user by displaying a message Each is described below. access the DMSettings file.2 Metrics Information When a magazine is read on a device for which it hasn’t been designed (in terms of dimensions). it is likely that it will not properly fit the screen.1 Custom Information Custom information such as privacy information can be displayed to the user in the form of a Custom Web page. Make sure that the following button is included: Navigation/ToolbarItems/item9 Custom Button Step 3b./assets/ 7.. To make use of this feature. The URL will be build up as: file:///android� asset/<name of webpage>. only for external an Web page) Enter the URL to the external Web page in: Navigation/Custom Button URL 15 . Step 2.

the Reader App will scale the page to make it fit the screen in a certain way. this can result in “letterboxing” or “pillarboxing” (black bars appearing along the side. Note that only pages which are made to fit the screen are affected. pages which dimensions are less than those of the device are kept at their original size.1. the page is scaled down to fit the width of the screen. Pages are only scaled down. top. 1 16 . The page will be scaled down to fit the screen. see chapter 6. This could result in the content of the page looking stretched or squashed. not up. This might result in the user having to scroll vertically to see the rest of the page. If the aspect ratio (width versus height) of the screen is smaller than the ratio for which the page was designed. (Default setting) On a device which is smaller than the page dimensions.Chapter 09 Customizing the Android Reader App Page scaling When the pages of a magazine have been designed in an aspect ratio (width versus height) which is different than the ratio of the device on which the magazine is displayed. Exporting Content – 3. Pages are only scaled down. or bottom of the screen).1 The scaling method used can be controlled by means of the following DMSettings option: Metrics/Fitting/Fit mode For notes about the functionality of the page fitting feature in relation to using specific DM Server plugins. not up. The page will be made to fit the dimensions of the screen exactly. pages which dimensions are less than those of the device are kept at their original size. Exporting and Page Scaling. pages which are designed to be taller than the screen height are not made to fit the screen. Possible values: Fit width. Fit screen disproportionately. Fit screen.

perform the following steps: Step 1. 17 . A default Web page is provided as part of the Eclips project: assets/devicewarning/warning.x (Froyo) 1280 px (Reader App v1.x (Honeycomb) Metrics/Device dpi.x (Froyo) 800 px (Reader App v1. The dpi setting which the device runs in (so not the physical dpi). the default Web page is used.html”) Make the page available online Step 3. The required width of the device.html Metrics/Device width. (Optional) Make the page available by doing one of the following: Replace the default Web page (make sure that the name is “warning. In the Eclipse project. access the DMSettings file and set the following: Metrics/Check device metrics. the default page Step 2. please refer to the documentation of the manufacturer. The required height of the device. Examples: Samsung Galaxy: 240 dpi Motorola Xoom: 160 dpi For values of other devices. Default values are: To enable this feature. Metrics/Device metrics warning URL. Controls whether the metrics of the device are checked. (Optional) Create a Web page containing the information to be displayed by doing one of the following: Use the default Web page Create a new page. URL to the Web page to be displayed. When left empty. Default values are: 1024 px (Reader App v1. and — if the required size is not met — to display a message to the user in the form of a Web page.x (Honeycomb) Metrics/Device height.Chapter 09 Customizing the Android Reader App Displaying a message The Reader App can be set to verify the metrics of the device. possibly based on 600 px (Reader App v1.

Chapter 09 Customizing the Android Reader App 7. if custom values are used.5 Intent Settings Intent settings are used to match certain functionality of the Reader App with specific content. edit the following string in the Error Strings section of the strings. Both intent properties are defined on Enterprise Server. Used for linking the page Setting the version number The minimum version is set in two locations: On the Content Delivery Platform: see appendix F. in order for the page containing the table of contents to appear when a user taps the TOC button in the Navigation bar. A similar intent property (named Help) is used for linking the Help button to the Help page. Changing the intent values can be done by means of the DMSettings. a message is displayed. the corresponding values for the Reader App also need to be changed (else the functionality will break). For example. Intents/TOC. However. settings/DigiMagKioskSettings.plist file: Intents/Help. taining the table of contents to the TOC button in the Navigation bar.woodwing. the Dossier in which the layout is stored should have its intent property set to TOC. Please update. In the Reader App: edit the number in the DigiMag_ApplicationVersion section of the following file: customer�app/src/com.xml file: This issue requires a newer version of this with Help instructions to the Help button in the Navigation bar.4 Version Information When the user attempts to read an issue in a Reader App which does not match the minimum required Reader App version.1 Configuring Reader Apps. 7. Using the Content Delivery Platform – section 4. Used for linking the page con- Reader App.java/ DigiMagKioskSettings Localizing the message To localize this message. containing instructions about how to use the Reader App. 18 .

1 Story vs Page Navigation The user can be offered one of two types of navigation: Story navigation. Page navigation. Navigation The flexibility of the Reader App allows you to offer the user various tools and methods for navigating the content: Story navigation vs page navigation Navigation bar Action bar Flipview Top Toolbar Hotzones Orientation lock 8. To enable Page navigation. set the following option in the DMSettings. navi- gation is done as follows: To navigate from one story to another. see chapter 3. In this configuration.plist file to Yes: Navigation/Scroll sections with two finger swipe 19 . set the following option in the DMSettings. Stories. navi- gation is done as follows: To navigate from page to page. The Concept – section 3. the Reader App is set to Story navigation. the user swipes horizontally (from left to right or right to left) using one finger swipes horizontally (from left to right or right to left) using two fingers To navigate from story to story. the user swipes horizontally (from left to right or right to left) page). Pages. the user swipes vertically (up/down or down/up) To navigate within a story (from page to Each aspect is explained in the following sections. the user For more information about Story Navigation and Page Navigation. Sections and Segments.Chapter 09 Customizing the Android Reader App 8. In this configuration. By default.plist file to Yes: Navigation/Horizontal page navigation To enable two-finger swipe (Page navigation only).

Chapter 09 Customizing the Android Reader App To ease navigation when the Reader App is set to Page navigation. you might want to enable the Page Scrubber so that the user can quickly browse the pages displayed in the Page Viewer. Customizing the Navigation bar can be done by changing the following: Tap area.) as well as to external content for instance by using the Newsfeed button. Each is explained in the following sections. Settings controlling the circumstances under which the Navigation bar is displayed or hidden.plist file to Yes: Flipview/Page scrubber enabled 8. Store. the user can quickly navigate to specific areas both within the Reader App itself (the cover. table of contents. Items. The icons of the buttons. From it.2 Navigation Bar The Navigation bar is used in the Android Reader App (Froyo) only. For more information. in which they appear. The Navigation bar is used as a starting point for navigating the magazine. etc.3 Action Bar. see section 8. set the following option in the DMSettings. To enable the Page Scrubber. For the Android Reader App (Honeycomb) an Action bar is used instead. 20 . The number of buttons and the order Drawables. Visibility settings. The area which the user should tap in order to display the Navigation bar.

(Store/Library/Subscription projects only) file. Account. For navigating to the Help page. For navigating to the magazine cover. define the height of the area in pixels by modifying the bottom and/or top area height value. but only enabled when the Store is accessed.2. 21 . FlipView. The buttons are managed by means of the following option in the DMSettings.1 Tap Area By default. page. TOC. Custom button. (Optional) In the Touch Areas section. For accessing a Web page with custom information such as privacy information. Buy.Chapter 09 Customizing the Android Reader App 8. For navigating to the Store.plist file: Navigation/ToolbarItems The area that is tapped should not hold any functionality itself such as a Slide Show. make the following changes: toolbar. For navigating to the newsfeed. When included. For bringing up the Flipview. this button is displayed at all times. Home. For navigating to the table of contents toolbar. Select the option Tap bottom to show Select the option Tap top to show Library. the Navigation bar appears when the user taps any part of the screen. Help.2.plist 8. bringing up an external page with subscription account details. For accessing the current maga- zine (if available).2 Items The Navigation bar can contain the following buttons: Magazine. 2 The value of each item is linked to specific functionality and should not be changed. Feed..2 The tap area can be limited to the bottom part or the top part of the screen by doing the following: In the Hotzones section of the DMSettings. Hotspot. (Subscription Editions only) For The Navigation bar now only appears when the user taps the defined area(s). else that functionality is invoked instead. etc. (Store/Library/Subscription projects only) For navigating to the Library.

bottombar.net/products/Enterprise%207. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.2. Image Dimensions. Windows: Modify the order by using a suitable XML editor. button. The icon for the Custom customselectedicon. The background of the customicon. button. a suitable XML editor. The following drawables can be customized: For an overview of the exact dimensions of each drawable. see appendix C.3 Drawables The drawables that appear in the Navigation bar are stored in the res/drawable-nodpi and res/drawable-nodpiv8 folders. The icon for the Account button in its selected state. The icon for the Account a suitable XML editor.x/ Software. accountselectedicon. The icon for the Custom button in its selected state.png.png. choose Add Row from the context menu and entering the correct Value for that button. When creating or modifying a button. feedicon.png. button.png.png. Windows: Modify the content by using 8. make sure that this button has a 1-pixel high transparent row at the top so that the underlying dark row of the Navigation bar stays visible.png files. Windows: Modify the content by using Changing the order To rearrange the order in which the items appear in the Navigation bar do the following: Mac OS: Drag each key to its required position.png. The Navigation bar has a 1-pixel high dark row at the top. do the following: Mac OS: Right-clicking an item.Chapter 09 Customizing the Android Reader App Removing/adding buttons To remove a button. To add a button.woodwing.0. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as . The icon for the Newsfeed 22 . do the following: Mac OS: Select the row and delete it. Navigation bar. accounticon.

png. The icon for the Library button. libraryicon. The icon for the magazine_icon. helpselectedicon. (This button is normally named Contents. button.png. The icon for the accessing the current magazine in its selected state.3.png. The icon for the Library button in its selected state.png. The icon for the tocicon. The Navigation bar drawables 23 .png. Store button in its selected state. The icon for the Contents button in its selected state.) libraryselectedicon. storeicon.png.png. linking to the cover of the magazine.png. The icon for the Contents tocselectedicon. A A H B B I C D E F G H E I J F K tocicon G bottombar flipviewicon magazine�icon C storeselectedicon D libraryicon feedicon J accounticon K customicon homeicon helpicon Figure 8.png.png. The icon for the Newsfeed button in its selected state. The icon for the Help button.png.png.Chapter 09 Customizing the Android Reader App feedselectedicon. The icon for helpicon.2. The icon for the Home but- ton. flipviewselectedicon. flipviewicon. (This button is normally named Contents.png. Help button in its selected state.png. The icon for accessing magazine_selected_icon.png.) Flipview button in its selected state. Home button in its selected state. homeselectedicon. the current magazine. storeselectedicon. The icon for the homeicon. The icon for the Flipview button. The icon for the Store button.

table of contents.) as well as to external content for instance by using the Newsfeed button. Items. the Action bar can be seen as a combined Navigation bar and top Toolbar. Library. The icons of the buttons. without the user being able to hide them: Navigation/Always show toolbars in order to display the Navigation bar.x (Honeycomb) only. Settings controlling the circumstances under which the Navigation bar is displayed or hidden.3 Action Bar The Action bar is used in the Android Reader App v1. in which they appear.x (Froyo) a Navigation bar and top Toolbar are used instead. Store. Newsfeed. when enabled) will always be displayed. Visibility settings. 24 . Magazine.Chapter 09 Customizing the Android Reader App 8. etc. For more information. For the Android Reader App v1. when enabled) will be automatically displayed: Navigation/Show toolbar on opening issue 8. The area which the user should tap Always show toolbars The following DMSetting controls whether the Navigation bar (as well as the top Toolbar. Customizing the Action bar can be done by changing the following: Tap area.2 Navigation Bar and section 8. the following DMSetting controls whether the Navigation bar (as well as the top Toolbar. Compared to the Android Reader App v1. The number of buttons and the order The left-hand side of the Action bar is used for displaying the following “actions”: Store. The remaining buttons are displayed on the right-hand side of the Action bar. The Action bar is used as a starting point for navigating the magazine. and Custom button.5 Top Toolbar. see section 8. Each is explained in the following sections. From it. Text.x (Froyo).2. Drawables.4 Visibility Settings Show toolbar on opening issue When opening a magazine issue. The text for the commands in the Action bar menu. the user can quickly navigate to specific areas both within the Reader App itself (the cover.

Account.3. When included. make the following changes: toolbar. FlipView. this button is only displayed when the Store is accessed. Items which always appear on the right side of the Action bar (possibly in the menu): Home.1 Tap Area By default. else that functionality is invoked instead. For navigating to the newsfeed. Library. For bringing up the Flipview. file. For navigating to the magazine cover. TOC. It is used for navigating back to the opened issue. ects only) Appears when either the Store or Library is accessed and when an issue is open. (Store/Library/Subscription projects Select the option Tap top to show (Optional) In the Touch Areas section. Magazine. etc. Help. Feed.Chapter 09 Customizing the Android Reader App 8. (Subscription Editions only) For bringing up an external page with subscription account details. Hotspot.. Custom button.plist 8. (Store/Library/Subscription projects only) For accessing the Store. The area that is tapped should not hold any functionality itself such as a Slide Show.2 Items The Action bar can hold the following buttons: Items which always appear on the left side of the Action bar: Buy. 3 25 . For accessing a Web page with custom information such as privacy information. only) For accessing the Library. For navigating to the Help page. The Action bar now only appears when the user taps the defined area. the Action bar appears when the user taps any part of the screen.3. For navigating to the table of contents page.3 The tap area can be limited to the top part of the screen by doing the following: In the Hotzones section of the DMSettings. (Store/Library/Subscription proj- define the height of the area in pixels by modifying the top area height value.

) For navigating to previously visited pages. 26 . Windows: Modify the content by using The buttons are managed by means of the following option in the DMSettings. Removing/adding buttons To remove a button. A maximum number of 6 items can be set to appear on the right-hand side of the Action bar. regardless of the value set in the ' Maximum number of toolbar items' setting (see below). (This functionality is part of the operating system and cannot be controlled. the Menu button is not displayed.) To add a button. (These are always displayed on the right-hand side of the Action bar. When one or both of the Back/Forward items are enabled then these are always displayed. which automatically appears when there are 6 or more actions defined. The maximum number of items to appear on the right-hand side of the Action bar can be controlled by the following DMSetting: Navigation/ Maximum number of toolbar items Windows: Modify the order by using a suitable XML editor. The value of each item is linked to specific functionality and should not be changed. open the DMSettings file and do the following: Mac OS: Select the row and delete it. choose Add Row from the context menu and enter the correct Value for that button. never in the menu. Windows: Modify the content by using Changing the order To rearrange the order in which the items appear in the Action bar open the DMSettings file and do the following: Mac OS: Drag each key to its required Setting the maximum number of items displayed position. When there are less actions defined. do the following: Mac OS: Right-click an item. regardless of the value set in the ' Maximum number of toolbar items' setting (see below). a suitable XML editor.plist file: Navigation/ToolbarItems a suitable XML editor. When one or both of the Back/Forward items are enabled then these are always displayed.Chapter 09 Customizing the Android Reader App Back/Forward buttons. An additional button is the Menu button.

png.png.3 Drawables The drawables that appear in the Action bar are stored in the res/drawable-nodpi folder. 27 .png files.3. The functionality is not available: the icon is colored gray.net/products/Enterprise%207. The following drawables can be customized (in alphabetical order. nor a background color is shown. The current state of a button and the availability of the functionality behind the button is indicated in the following ways: Icon. For an overview of the exact dimensions of each drawable. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community. The icon for the Action buttons on the left-hand side only: shown at the bottom of the button. The names of these drawables all start with “action�bar”.png. Status. The icon for the Account action_bar_action_overflow_pressed_ Buttons on the right-hand side only: The button is unselected: no line at the bottom of the button. at the bottom of the button. The button is unselected: a narrow line is The button is selected: a thick line is shown The button is pressed: the whole back- Account button in its disabled state. Background image for a selected and pressed button in the Action bar. background. Any buttons that don’t fit in the Action bar can be accessed via the Action bar menu (also referred to as the “Overflow”). Background image for a pressed button in the Action bar.woodwing. button. two images are always shown simultaneously for each button: action_bar_tab_selected. see figure on the next page): The icon for the Menu button is part of the operating system and cannot be customized. selected or pressed). For this purpose.x/ Software. see appendix C. The names of these drawables all contain the word “icon”.png. action_bar_tab_selected_pressed. ground. accounticon.png. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as . Background image for a pressed command in the Action bar menu. Depicts the purpose of the button and the availability of the function behind the button. ground of the button is colored. Background image for the selected action in the Action bar.png.Chapter 09 Customizing the Android Reader App 8. Image Dimensions.0. All buttons: The functionality is available: the icon is action_bar_action_pressed_back- colored white. accountdisabledicon. Depicts the button state (unselected.

The icon for the Newsfeed flipviewicon. The icon for the Store button. homeicon.png.png.png.png.png. The icon for the Forward helpicon. action_bar_tab_unselected. The icon for the Library magazineicon.png.png. The icon for the Contents backdisabledicon. This drawable is also used for the Filter lists in the Library.) Forward button in its disabled state.9. Background for the Action bar menu. The icon for the Help button. forwarddisabledicon. feedicon. button. The icon for the forwardicon. The icon for the Home but- ton. button. The icon for the Custom button.png.Chapter 09 Customizing the Android Reader App action_bar_tab_unselected_pressed.png. including the top green line. customicon. png. The icon for the backicon. linking to the cover of the magazine.png. Background image for an unselected and pressed button in the Action bar. The icon for the Flipview button.png. (This button is normally named Issue. Back button in its disabled state. button.) 28 . button. popup_background. libraryicon. Background image for unselected buttons in the Action bar.png. (This button is normally named Contents. The icon for the Magazine button. The icon for the Back button.png.png. storeicon. tocicon.png.

Chapter 09 Customizing the Android Reader App A B C D E F G H I J K L M N H I J K L M N A B C D E F G storeicon libraryicon magazineicon feedicon customicon homeicon flipviewicon backicon forwarddisabledicon action�bar�tab�unselected�pressed action�bar�tab�unselected action�bar�tab�selected action�bar�action�overflow�pressed�background popup�background.3.3. The Action bar drawables 29 .9 Figure 8.

the following DMSetting controls whether the Action bar will be automatically displayed: Navigation/Show toolbar on opening issue Always show toolbars The following DMSetting controls whether the Action bar will always be displayed. without the user being able to hide it: Navigation/Always show toolbars 30 . Items in this menu appear as text only.5 Visibility When opening a magazine issue.2 Text.xml file.4 Text When a button is not displayed in the Action bar. see section 5. 8. For more information about changing text. it can be accessed through the Action bar menu.Chapter 09 Customizing the Android Reader App 8. The text for these commands can be localized by changing the strings beginning with “action�” in the strings.3.3.

The Flipview can also be made to appear automatically when the Navigation bar/Action bar is displayed. A E B C D A B C D A E Flipview Header B Story Viewer / Page Viewer C Page scrubber D Section Viewer E Close button Figure 8. The Flipview components of the Froyo version (top) and Honeycomb version (bottom) 31 . This functionality can be set through the following DMSetting: Flipview/ Show flipview on show toolbar The Flipview consists of the following components (see image below): Header Story Viewer / Page Viewer Page Scrubber Section Viewer Close button Drop shadow How to customize each component is explained in the following sections.4.Chapter 09 Customizing the Android Reader App 8.4 Flipview The Flipview appears when the user taps the Contents button in the Navigation bar or Action bar.

plist file: Flipview/Show flipview header Issue description.4.xml file: flipviewer�header�title Showing or hiding the Flipview header content The Flipview Header components can be hidden by deselecting the following option in the DMSettings.png A B C D A Flipview title B flipviewbackground C Issue description D fliipviewclosebutton (Froyo version only) Figure 8. For displaying issue information. For displaying the title of the For an overview of the exact dimensions of the drawables.png Froyo-specific: res/drawables-nodpi-v8 res/drawables-nodpi-v11 Honeycomb-specific: This image is also used as the background for the Story Viewer / Page Viewer. The Flipview Header components 32 . Changing the look of this button can be done by modifying the following asset: flipviewclosebutton.1. Image Dimensions. Drawables that appear in the Flipview header are stored in the following locations: Generic (both Froyo and Honeycomb): res/drawable-nodpi Background image.4. magazine. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server. Flipview title.1 Header Changing its appearance Changing the appearance of the Flipview Header can be done as follows: B a c k g r o u n d . (Froyo version only) For closing the Flipview. Customizing it can be done by changing the following image: flipviewbackground.Chapter 09 Customizing the Android Reader App 8. Close button. This can be modified by changing the following string in the strings. see appendix C.

plist file: Froyo version Flipview/Margins/Flipview thumb height height margin.plist file: Flipview/Thumbs/Minimum page thumb The margins between the thumbnails can be controlled by the following settings in the DMSettings. Controls the margin between each thumbnail. Customizing it can be done by changing the following image: flipviewbackground. enter the required size in pixels for each setting. Margins between thumbnails Thumbnail Size The size of the thumbnails in the Story Viewer / Page Viewer can be controlled via the following settings in the DMSettings. the thumbnails in the Story Viewer / Page Viewer are shown in landscape orientation. thumb margin.png (Froyo version only) The margin between the thumbnails and the Flipview Header can be controlled by the following setting in the DMSettings.2 Story Viewer / Page Viewer Changing its appearance Changing the appearance of the Story Viewer / Page Viewer can be done as follows: B a c k g r o u n d .plist file: Flipview/Margins/Pages top margin in Flipview This image is also used as the background for the Flipview Header. To change the margins. Flipview/Margins/Flipview article Thumbnail Awareness By default.4. and thumbnails in landscape orientation are shown when the device is rotated to landscape mode. aware With this setting enabled. enter the required size in pixels for each setting. thumbnails in portrait orientation are shown when the device is rotated to portrait mode 33 . Flipview/Thumbs/Maximum page thumb Honeycomb version Flipview/Margins/Flipview page To change the thumbnail size. Controls the margin between the pages. Matching the orientation of the thumbnails to the orientation of the device can be done by enabling the following setting in the DMSettings. thumb margin. even when the device is rotated to portrait orientation.plist file of the code project: Flipview/Thumbs/Make thumbs orientation To change the margins. Controls the margin between articles (stories). Top Margin Background image. enter the required size in pixels for each setting.Chapter 09 Customizing the Android Reader App 8.

Chapter 09 Customizing the Android Reader App

Story Title

For the first page of each story, the Story Title is shown. The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. When text exceeds the width of the page thumbnail, the text is elipsized.

Story Bullets

A story bullet can be shown in front of each story title.

A

A

Story bullet

Figure 8.4.2b. The story bullet in the Flipview

Story bullets are displayed by default and can be hidden by deselecting the following option in the DMSettings.plist file: 
Flipview/Show story bullet A

Changing the appearance of the Story bullet can be done by modifying the following drawable: 
flipviewbullet.png

This drawable is stored in the following location: res/drawable-nodpi
B

For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.

A

Story Title property

B

Story title displayed in Reader

Figure 8.4.2a. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)

34

Chapter 09 Customizing the Android Reader App

Story Description

For each story a short description can be displayed as a further indication of what the story is about. To enable this feature, select the following option in the DMSettings.plist file: 
Flipview/Show story description A

The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. When text exceeds the width of the page thumbnail, the text is elipsized.

B
A B

Story Description property Story Description displayed in Reader

Figure 8.4.2c. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)

35

Chapter 09 Customizing the Android Reader App

Page number

Below each page preview, the page number can be displayed.

8.4.3 Page Scrubber
When the Reader App is configured for Page Navigation (see chapter 3, The Concept – section 3, Stories, Pages, Sections and Segments), it is advisable to offer the user the use of the Page Scrubber: a slider with which the user can quickly scroll through the pages of the Page Viewer.

This feature is controlled through the following option in the DMSettings.plist file: 
Flipview/Show page number

A A
A

Page number

A

Page scrubber

Figure 8.4.2d. A page number is displayed below each page preview

Figure 8.4.3. The Page Scrubber can be used to quickly scroll through the pages of the magazine

The Page Scrubber can be enabled by the following option in the DMSettings.plist file: 
Flipview/Page scrubber enabled

36

Chapter 09 Customizing the Android Reader App

Changing the appearance

Changing the appearance of the Page Scrubber can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/ drawable-nodpi-v11 folders): For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions. 
pagescrubberbackground.png. The back-

8.4.4 Section Viewer Display/hide
The Section Viewer can be displayed or hidden through the following DMSetting: 
Flipview/Show section labels

Section title

ground image behind the Page Scrubber. Scrubber button. 

pagescrubberbutton.png. The Page pagescrubbertrackleft.9.png. The image

The text that is displayed in the Section Viewer is taken from the Section Title property of a Dossier. Accessing the Dossier properties can be done by using Content S t a ti o n o r S m a r t C o n n e c ti o n fo r I n D e s i g n.

to the left of the Page Scrubber button. 10 Pixels of each side will remain the same, but the middle section will stretch. 

pagescrubbertrackright.9.png. The image

to the right of the Page Scrubber button. 10 Pixels of each side will remain the same, but the middle section will stretch.

A

B
A

Story Title property

B

Story title displayed in Reader

Figure 8.4.4a. The Section Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the Section in the Section Viewer of the Reader App (bottom)

37

Chapter 09 Customizing the Android Reader App

Changing the appearance

Changing the appearance of the Section Viewer can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/ drawable-nodpi-v11 folders): For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions. 
flipviewsectionbackground.png. The

8.4.5 Close Button
For the Honeycomb version of the Reader App, the Flipview Close button is located as a separate button below the Flipview, in the bottom right-hand corner. This button consists of drawables and localizable text. The Flipview Close button on the Froyo version of the Reader App is part of the Flipview header. For more information, see section 8.4.1 Header.

background of the Section bar. image of a selected Section. 

flipviewselectedsectionbutton.png. The flipview_section_background_

Changing the appearance

Changing the appearance of the Close button can be done by modifying the following drawables: 
flipview_close_background.png. The

unselected.png. The background image behind unselected Sections.
A B C

background image of the button. 

flipview_close_icon.png. The icon of the

Close button (the caret character “^”).

These drawables are stored in the res/drawable-nodpiv11 folder.
A B C

flipviewsectionbackground.png flipviewselectedsectionbutton.png flipview�section�background�unselected.png

For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.

Figure 8.4.4b. The Flipview Header components (Honeycomb version)

A
A

B

flipview�close�icon

B

flipview�close�background

Figure 8.4.5. The Close button drawables

38

Chapter 09 Customizing the Android Reader App

Changing the text

Changing the text of the button can be done by changing the following string in the strings.xml file: 
flipviewer�close�button�text

8.4.6 Drop Shadow
A dropshadow is located at the bottom of the Flipview. Changing the appearance can be done by modifying the following drawable: 
flipview�bottom�shadow.png

This drawable is stored in the res/drawable-nodpi-v11 folder.

A Figure 8.4.6. A shadow is located at the bottom of the Flipview

39

Chapter 09 Customizing the Android Reader App

8.5 Top Toolbar
The top Toolbar is used in the Android Reader App v1.x (Froyo) only. For the Android Reader App v1.x (Honeycomb), the top Toolbar is integrated in the Action bar. For more information, see section 8.3 Action Bar. Customizing the top Toolbar can be done by changing the following: 
Availability. Enabling or disabling the top

8.5.1 Availability
By default, the top Toolbar is disabled. It can be enabled by selecting the following option in the DMSettings.plist file: 
Navigation/Enable top toolbar

Toolbar. 

Visibility settings. Settings controlling the

8.5.2 Visibility Show toolbar on opening issue
When opening a magazine issue, the following DMSetting controls whether the top Toolbar (as well as the Navigation bar) will be automatically displayed: 
Navigation/Show toolbar on opening issue

circumstances under which the Navigation bar is displayed or hidden. in order to display the top Toolbar. that appear in the top Toolbar. images. 

Tap area. The area which the user should tap Items. The number of buttons and images Drawables. The icons of the buttons and

Always show toolbars

The following DMSetting controls whether the top Toolbar (as well as the Navigation bar) will always be displayed, without the user being able to hide it: 
Navigation/Always show toolbars

Each is explained in the following sections.

40

Chapter 09 Customizing the Android Reader App

8.5.3 Tap Area
By default, the top Toolbar appears when the user taps any part of the screen.4 The tap area can be limited to the bottom part and/or top part of the screen by doing the following: 
In the Hotzones section of the DMSettings.plist

8.5.4 Items
The top Toolbar holds the following items: 
Back/Forward buttons. For navigating to

previously visited pages

file, make the following changes: toolbar. toolbar.

A
A

B
B 

Select the option Tap bottom to show Select the option Tap top to show (Optional) In the Touch Areas section,

Back button

Forward button

Figure 8.5.4. The components of the top Toolbar

define the height of the area in pixels by modifying the bottom or top area height value.

The inclusion of these items is controlled through the following DMSetting: 
Navigation/ToolbarItems

The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
4

41

Chapter 09 Customizing the Android Reader App

8.5.5 Drawables
The following drawables can be customized: 
backicon.png. The icon for the Back button

8.6 Hotzones
Hotzones are areas to the left, right, and bottom of the screen which can be tapped in order to navigate the magazine.

image. 

backselectedicon.png. The icon for the

Back button image in its selected state. button image. 

forwardicon.png. The icon for the Forward forwardselectedicon.png. The icon for the

Back button image in its selected state. Toolbar (also used in the Library). 

topbar.png. The background of the top

These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.

Figure 8.6. Hotzones (shaded in red) are specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page

The following areas are defined: 
Left area: for navigating to the previous page

(or the next page when the Reader App is set to Right-to-left mode) Navigation bar. 

Bottom or top area: for bringing up the Right area: for navigating to the next page (or

the previous page when the Reader App is set to Right-to-left mode)

42

Chapter 09 Customizing the Android Reader App

Each area can be controlled by the following options in the DMSettings.plist file: 
Hotzones/Tap bottom to show toolbar.

8.7 Orientation Lock
The default behavior of the Reader App is such that when the device is rotated, a page of a different orientation is shown. For example: when holding the device in landscape orientation a page with a corresponding orientation is shown; when rotating the device to portrait orientation a page in that orientation is shown. Designers can benefit from this feature by offering differently styled pages for each view. If only pages of a certain orientation need to be shown (only pages in landscape orientation or only pages in portrait orientation), you can make use of the Orientation Lock feature. When enabled, rotating the device will not change the orientation of the page; the page will stay fixed in place instead. To enable Orientation Lock, set the following option in the DMSettings.plist file: 
Navigation/Orientation lock

Activates the bottom Hotzone. Activates the top Hotzone. 

Hotzones/Tap top to show toolbar. Hotzones/ Tap sides to navigate. Activates

the Hotzones to the left and right of the screen. or width of the different Hotzones. 

Hotzones/Touch areas. Defines the height

Hotzones overlaying interactive objects

When interactive objects (such as Slide Shows, videos, etc.) are placed within the area of a Hotzone, their functionality cannot be accessed because of the overlaying Hotzone area. In order to make sure that these interactive objects can still be accessed without being blocked by a Hotzone, the following DMSetting can be set: 
Hotzones/ Keep underlying interactive ele-

ments active

Possible values: 
Landscape. For displaying only pages in

landscape orientation. orientation. 

Portrait. For displaying only pages in portrait

When the setting is left empty or removed, the orientation lock is disabled and pages in both landscape and portrait orientation are shown.

43

Chapter 09 Customizing the Android Reader App

Fullscreen object orientation lock

When the Orientation Lock feature is enabled (see above), the objects displayed in full screen mode (such as videos, Slide Shows and Web view overlays) can still be allowed to rotate when the Tablet is rotated by enabling the following option in the DMSettings.plist file: 
Navigation/Allow fullscreen object rotation

9. The Store
The Android Reader App makes use of the HTML Store. For more information, see appendix G, Customizing the HTML Store. On the Reader App side, customization is done in the following two areas: 
Communication with the HTML Store Reader App components

when locked

Video orientation lock

Videos displayed in fullscreen mode can be forced to be displayed in landscape mode across the “height” of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly. This can be done by enabling the following option in the DMSettings.plist file: 
Navigation/Force fullscreen video orientation

Each is explained in the following sections.

Figure 8.7. With the “Force fullscreen video orientation” option enabled, video is always displayed across the full height of the Tablet, even when the Tablet is held in portrait orientaton.

Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video.

44

The file can be found in the following location of the project: customer�app/src/com. secret key as defined on the Kiosk Server. The URL point- DigiMagKioskLibary_ProductID.woodwing.1 Communication With the Store Communication with the Store is done by configuring the DMSettings file and the DigiMagKioskSettings file. The ing to index-android.Chapter 09 Customizing the Android Reader App 9. The URL to connect to the Kiosk Server. DigiMagKioskLibary_SecretKey.settings DMSettings file The DMSettings file handles the communication between the Reader App and the Store. DigiMagKioskSettings File The DigiMagKioskSettings file handles the communication with the Content Delivery Platform. 45 . Possible values: Blank: the packaged HTML store as part product name as defined on the Kiosk Server.plist The following values need to be set: DigiMagKioskLibary_URL. The following DMSettings can be configured: Store/HTML Store URL. The URL pointing to a local HTML file. The of the Reader App build HTML Store URL: a URL to an externally hosted Store/HTML Store fallback URL. The file can be found in the following location of the project: customer�app/assets/DMSettings.html of the HTML Store. This file is loaded when the HTML Store is not acccessible.

buttons. For more information. Used for the Log In button as the button in its non-available state. Enables or disables the the Log In button as the button in its available state.Chapter 09 Customizing the Android Reader App 9.png.2 Reader App Components For using the Store in the Reader App. The value in the Store Filter for choosing all issues. and strings can be customized. the Store Filter. Used for Store Filter The Store Filter can be controlled by the following option in the DMSettings file: Store/Enable Filter. 46 . The following string can be customized for the Store Filter: All Issues. stretchablestorebutton_disabled. Buttons The following buttons can be customized: stretchablestorebutton. The values shown in the Filter itself are defined on the Content Delivery Platform. Store Filter.9. Using the Content Delivery Platform.png.9. see appendix F.

Displayed when an issue is refunded. Displayed when purchase information was received but when the Content Delivery Server failed to verify it. “%1s” can be used to refer to the issue name. \'%1s\' refunded. Displayed when the user tapped Cancel on the purchase screen. (Continued on next page) 47 . chase request or if an item is unpublished in the application's product list. Purchase of \'%1s\' canceled by server. In app purchasing strings Key store_androidmarket_item_ purchased store_androidmarket_item_ refunded Value \'%1s\' purchased. Displayed when the charge for the item failed on the Android Market server. Description Displayed when an issue is purchased. “%1s” can be used to refer to the issue name. store_androidmarket_item_ unavailable Displayed when the Android Market cannot find the requested item in the application's product list. store_androidmarket_verification_failed store_androidmarket_purchase_canceled_by_user store_androidmarket_purchase_canceled_by_server store_androidmarket_purchase_submitted" store_androidmarket_market_unavailable Displayed when the purchase order was Your purchase of \'%1s\' has been successfully sent to the Android Market submitted to the Android Market. Purchase verification failed. server. You canceled the purchase of\'%1s\'. “%1s” can be used to refer to the issue name. “%1s” can be used to refer to the issue name. This can happen \'%1s\' appears to be unavailable in if the product ID is misspelled in your purthe Android Market. Displayed when the network connection is down and thus no connection to the Android Market server can be established.Chapter 09 Customizing the Android Reader App Strings The following strings relating to the in app purchasing functionality can be modified: Table 9. “%1s” can be used to refer to the issue name.2. The Android Market is currently unavailable. “%1s” can be used to refer to the issue name.

48 . In-app purchasing strings (continued) Key Value Description Displayed when the billing API version used is not recognized by the market application and that the market application may have to be updated. store_androidmarket_unavailable In-app Billing information is not available.Chapter 09 Customizing the Android Reader App Table 9. store_androidmarket_purchase_error store_androidmarket_restoring_transactions store_androidmarket_restoring_transactions_error Error occurred during the purchase of \'%1s \' Restoring transactions. Displayed when a restore transactions request was successfully sent to the server. An error occurred while restoring Displayed when an error occurred during transactions. Displayed when the com. Can also indicate that the user is ineligible for in app billing (for example when a user resides in a country that does not allow in app purchases). Can also indicate that an application is not properly signed.vending. a restore transactions request.android. BILLING permission is not declared in the manifest. “%1s” can be used to refer to the issue name.2.

of the header.9. The Library The Library is used for showing the user their available issues (those that have been downloaded and/or those that are part of a subscription).png. close button.1 Subscription Sign-In Window Drawables The following drawables can be customized for the Subscription Sign-In window (see example on the following pages): checkbox. 49 . Image. logindialogbackground. Image used to indicate that the text field is active (cursor is placed in the field).png.png. closebutton.png. and Subscription projects of the Reader App. The image used for the check box in its checked state.png.9. light. The image used for the check box in its cleared state. see appendix C. The back- ground of the Subscription Sign In window. textfield_disabled_focused_holo_ For an overview of the exact dimensions of each drawable.png. Customizing the Library can be done by changing the following: Subscription sign-in window Library 10. Image Dimensions. The image used for the headerbackground. Framework.png.Chapter 09 Customizing the Android Reader App 10.png.9. checkboxchecked.9. Image used to indicate that the text field is not active (cursor is not placed in the field). Image stretchablerectbutton. My Password button. The background Each is explained in the following sections.png. The Library functionality is only available in the Pro. The I Forgot textfield_activated_holo_light. textfield_default_holo_light.

The label for the Privacy link. Password. The label in the user name box.Chapter 09 Customizing the Android Reader App Text The following strings can be customized for the Library Log In window: Username. Please sign in to your Android Edition Account. I forgot my password. The label for the Remember Me check box. The text used in the Sign In header. The label for the I Forgot My Password button. Submit. 50 . The label for the Submit button. License Agreement. The label for the License Agreement link. Remember me. Privacy. The label in the password box.

9 Figure 10.1. The Subscription sign in window 51 .9 F logindialogbackground D stretchablestorebutton.Chapter 09 Customizing the Android Reader App A B C D E F A E headerbackground B closebutton C checkbox stretchablerectbutton.

png. The image used for the Download button.png. Enable library segment filter.png.png. Out button in the Library. The image librarydownloadrefresh.2 Library Settings The following DMSettings can be changed for the Library: Store/Library cache time.png. The time after library_shelf_landscape. library_logout_icon. (Honeycomb only) The image used for the Library shelfs when the device is held in landscape orientation. This drawable is also used for the Action bar menu. used for the download Pause button. Drawables The following drawables can be customized for the Library (see example on the following pages): librarydownload. These drawables are stored in the res/drawable-nodpi and res/drawable-nodpi-v11 folders. for the Filter lists.png. 52 . (Honeycomb only) The image used for the dropshadow behind the issue preview. (Honeycomb only) The image used for the Logout button. librarydownloadpause.Chapter 09 Customizing the Android Reader App 10. only) The image used for the Library shelfs when the device is held in portrait orientation. see appendix C. Enables the Log In/Log Enable library filter. (Honeycomb only) The image used for the Login button. Image Dimensions.png. (Honeycomb only) Enables the Library Segment filter available in the Library. (Honeycomb which issues that are part of a subscription are refreshed in the Library. (Honeycomb only) popup_background.png.png. Background Enables the Library filter in the Library.9. library_login_icon. Enable login button. library_shelf_portrait. For an overview of the exact dimensions of each drawable. The image used for the download Resume button. library_shelf_issue_drop_shadow.

see appendix F. button. For more information. Text for the context menu The following strings can be customized for the Library Filter: All Segments.Chapter 09 Customizing the Android Reader App Text The following strings can be customized for the Library: Installing. Out button. Using the Content Delivery Platform. The installing label. Library Filter for choosing all issues. when deleting an issue from the Library. which is activated by “tap and hold” on an issue. (Honeycomb only) The value in the Segment Filter for choosing all Segments. (Honeycomb only) The value in the Delete issue. 53 . Issue options. All issues. (Froyo only) The label for the Sign The values shown in the Filter itself are defined on the Content Delivery Platform. Command in the context menu Sign In. (Froyo only) The label for the Sign In Sign Out.

9 C topbar Figure 10.Chapter 09 Customizing the Android Reader App A B B C A storeheader B stretchablestorebutton.2a. The Library view (Froyo version) 54 .

Chapter 09 Customizing the Android Reader App A B C D C B B A library�top�bar B library�shelf�landscape.2b.png C library�shelf�issue�drop�shadow D popup�background.9 Figure 10. The Library view (Honeycomb version) 55 .

1 Audio For the playback of audio. General App Features The Reader App functionality can be further enhanced by customizing the following features: Audio Custom objects Downloading methods Hotzones In-app Billing Newsfeeds “No internet connection” indicators Scrolling indicators Slide Shows Text View Video Web Elements 11. Each feature is explained in the following sections. 56 .Chapter 09 Customizing the Android Reader App 11. the following features can be customized: Overlay drawables Audio settings Embedded audio controls Each is described in the following sections.

audioplayenabledicon.2 Audio Settings Audio keeps playing while swiping from page to page within the same article audioplayenabledicon Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation.png. 57 . see appendix C.1. The audio play enabled icon The following drawables can be customized. Image Dimensions. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.png. shown when the audio file is being played.1. icons are available to indicate that an audio file can be played or stopped.x/ Software.1. For an overview of the exact dimensions of each drawable.woodwing. when the audio file is being played.0.png files. the audio also continues playing. audioplaydisabledicon. For audio. This functionality is controlled by the following DMSetting: Navigation/Continue audio within article Figure 11. The audio icon Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .Chapter 09 Customizing the Android Reader App 11. The audio icon when a streamed audio file is not available or when no internet connection is available. The audio icon audiostopenabledicon. The audio overlay drawables are stored in the res/drawable-nodpi folder. A A 11.png.net/products/Enterprise%207. When the user subsequently navigates to a different page within that story (still within the same orientation).1 Overlay Drawables Overlay drawables are icons that appear over other objects to indicate their intention or state.1.

Step 4. add the following property: <backgroundaudio>true</backgroundaudio> Possible values: true: controls will be hidden false: controls will be shown5 Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=”95”> <url>images/story_23/audio_95.2 Custom Objects Objects with custom. class. The creation of a Custom Object on a layout starts by creating a Web Element. In the audio id section. Key: a string you can use to refer to your The controls are also shown when the backgroundaudio property is not included 5 Step 5. a list connecting to a database. This new class implements ExternalDMObjectInterface Step 2. Locate the created audio object by searching for <type>audio</type>. I m p l e m e n t DMObjectInterface.xml file as follows: Step 1. Create a plist resource file named DMCustomObjects. The functionality of the element is completely upon the developer. C r e a t e a n e w c l a s s i n t h e Reader App. the controls for an embedded audio file are always displayed. Step 2. a 3D object. Custom objects are added to the Digital Magazine project in Eclipse by doing the following: Step 1. it can be an extra user interface element.mp3</url> <autoplay>false</autoplay> <backgroundaudio>true</backgroundaudio> </audio> </object> 11. Step 3. 3rd-party functionality can be included in the magazine.Chapter 09 Customizing the Android Reader App 11. Step 3. create an entry for your custom object and set classtype to the key of the entry in the plist file.3 Embedded Audio Controls By default. To hide the controls for a placed audio file. create an entry with the following settings: Value: your newly created class name (this should be the full package name).xml file in a plain-text editor. Open the exported magazine.1. the External- See the Android Reader App Custom Objects java doc for a description of the interface (downloadable from the Digital Magazine section of the Enterprise 7 Product page on the Community site).xml file. In the magazine. the controls can be hidden for each individually placed audio file. In the created plist file.plist. etc. edit the exported magazine. 58 . If needed. this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout.

To have an issue automatically opened.3. Each is described in detail below. downloadleft_disabled. The download prog- 59 .3 Downloading Methods Downloading of magazines can be offered in one of two ways: Non-progressive Progressive 11.Chapter 09 Customizing the Android Reader App 11.png. The back- ground of the download progress bar. The back- ground of the download progress bar in its disabled state. set the following DMSetting: Library/Auto open magazine Drawables The following drawables can be customized for the progressive download method: downloadbackground.9png.9. the following can be configured: Settings Drawables Each is described in detail below. Auto open magazine As soon as the download and installation process is complete.9png. the issue or Segment can be made to open automatically. When the download is performed in the back- ground (for instance when the app is minimized or when another issue is being viewed). ress bar.1 Non-progressive Download Method For the non-progressive download method. downloadleft. The following conditions exist: The Library must be viewed at the time the download is completed. the issue will not automatically open.

button. The Start Download librarydownloadpause.2 Progressive Download Method For the progressive download method.png. The Resume These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders. 11.png. The back- ground of the download progress bar in its disabled state. Each is described in detail below.png. The download proglibrarydownload.png. ress bar.9.9png. downloadleft_disabled. librarydownloadrefresh.9png. librarydownloadrefresh.Chapter 09 Customizing the Android Reader App librarydownload. The back- ground of the download progress bar. downloadleft. The Start Download button. Drawables The following drawables can be customized for the progressive download method: downloadbackground.png. 60 . The Resume These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.png. The Pause Download button. Download button. the following can be modified: Drawables Settings Strings librarydownloadpause.png. The Pause Download button. Download button.3.

</string> <string name="progressive_download_no_internet">No Internet connection</string> <string name="error_progdl_corrupt_plist">The issue download is corrupt.</string> <string name="progressive_download_connection_lost">The connection to the store has been lost.. To have an issue automatically opened.. the issue will not automatically open.Chapter 09 Customizing the Android Reader App Settings As soon as the issue or Segment is readable during the download process. it can be made to open automatically. set the following DMSetting: Library/Auto open magazine Strings The following strings can be modified/localized for the progressive download method: <!-.</string> <string name="progressive_download_downloading">Downloading. The following conditions exist: The Library must be viewed at the time the download is completed. unable to continue download. When the download is performed in the back- ground (for instance when the app is minimized or when another issue is being viewed).Progressive Download --> <string name="progressive_download_waiting">Waiting.</string> 61 ...\nPlease tap Reconnect to restore the connection.

Step 1c. Step 1b.android. This feature can only be used in Reader App projects which have Store functionality. Add the BASE64 encoded RSA key of the publishers merchant account to the Content Delivery Platform by doing the following: Step 1a. Copy the BASE64 encoded public key. com/publish/Home. Log in to https://market. Configuring Reader Apps. (Optional) Modify and/or localize the inapp billing related software strings in the Reader App as explained in section 9. Step 1d. Click Edit Profile. The Store.4 In-App Billing The Google In-app Billing framework can be used for offering magazines as separate purchases instead of via a subscription.Chapter 09 Customizing the Android Reader App 11. Step 2. Making use of this feature involves performing the following steps: Step 1. namely the Pro and Subscriptions frameworks. Add this key to the Android Reader App on the Content Delivery Platform by following the steps as described in appendix F. Using the Content Delivery Platform – section 4.1. 62 .

Its content is taken from the Internet. A Changing the appearance (Froyo only) The single customizable component of the Newsfeed feature is the Close button.5. Image Dimensions. Changing its appearance can be done by modifying its asset (located in the res/drawable-nodpi folder): closebuttondefaultstate. see appendix C. the Newsfeed page is displayed as an overlay on top of the magazine 63 .png For an overview of the exact dimensions of this drawable.plist file: Navigation/Newsfeed URL A Close button Figure 11. On Froyo.5 Newsfeeds When the user taps the Newsfeed button in the Navigation bar.Chapter 09 Customizing the Android Reader App 11. Newsfeed URL The URL of the Newsfeed is derived from the following option in the DMSettings. the Newsfeed page appears as an overlay on top of the page (Froyo) or as an embedded page.

an indication is given to the user by a bar in the top of the frame in which the content is to be shown.6 No Internet Connection Indicators When no internet connection is available. Background image of the bar. see appendix C. The indicator consists of a background image and an image containing the text.png.png. The No Internet Connection Drawables 64 .6.Chapter 09 Customizing the Android Reader App 11. For an overview of the exact dimensions of each drawable. A B nointernetconnectionlabel. Locations in which this indication can appear are for example: The Store Frames with streaming video Frames with streaming audio Newsfeed windows Widgets Web Elements The No Internet Connection drawables are stored in the res/drawable-nodpi folder. displayed in the bar. The text A B nointernetconnectionbackground nointernetconnectionlabel Figure 11. The following drawables can be customized: nointernetconnectionbackground. Image Dimensions.

A To enable Scrolling Indicators for Scrollable Areas. For example: for Scrollable Areas in which the content can be scrolled horizontally. the top and bottom sides of the frame become faded. the edges of the frame on those sides to which the content can be scrolled appear faded. the left.and righthand sides of the frame become faded.7. enable the following DMSetting: Colors/ Enable native scrolling indicators A A Scrolling indicator Figure 11.Chapter 09 Customizing the Android Reader App 11. When enabled. A scrolling indicator in the form of a faded edge indicates to the user that the content of the frame can be scrolled 65 . for Scrollable Areas in which the content can be scrolled vertically.7 Scrolling Indicators Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content.

the bottom left corner of a Slide Show. Change these dimensions as required.woodwing. This icon is positioned in the lower left-hand corner of the image. For an overview of the exact dimensions of this drawable. an image is shown instead. The overlay shown in These 1-pixel black images are 9-patch images. These magazines could contain Text View functionality. consisting of a 3x3 image with 1 black pixel in the middle and 4 black pixels around it to indicate it can be stretched in all four directions.8 Slide Shows For Slide Shows. This image can be customized as required.5.9. 11. in which the page is shown as a HTML page.Chapter 09 Customizing the Android Reader App 11. 66 .png files. an icon is available to indicate that the image on the page is in fact a Slide Show. overlay drawables can be customized: icons that appear over other objects to indicate their intention or state. The drawable to customize is: slideshowicon.9 Text View The page scaling functionality of the Android Reader App makes it possible to also read magazines which have been primarily designed for the iPad.x/Software. see appendix C. The Slide Show icon The Slide Show drawable is stored in the res/drawablenodpi folder. Because the Android Reader App does not support the Text View feature.0. The image can be found in the following location: res/drawable-nodpi/ A A textview�mode�not�supported.png slideshowicon Figure 11. Image Dimensions.net/products/ Enterprise%207.png. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community. For Slide Shows. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as . allowing the user to adjust the font size.

the following can be customized: Overlay drawables Video Player drawables Hiding embedded video controls Each is explained in the following sections.10 Video For the video functionality. 67 .Chapter 09 Customizing the Android Reader App 11.

an icon is available to indicate that the image on the page is in fact a Video. A B A videoDisabledIcon B videoDEnabledIcon Figure 11. the video.10.Chapter 09 Customizing the Android Reader App 11.10.1. see appendix C. The video disabled and enabled icons Overlay drawables are stored in the res/drawable-nodpi folder. This icon is positioned in the center of the image.png. The overlay shown on top of a video when the video is available but has not started yet. The overlay shown on top of a video when it is not possible to play 68 . videoenabledicon. For an overview of the exact dimensions of each drawable. Image Dimensions.png. For videos. for example when there is no internet connection available to play a streaming video.1 Overlay Drawables Overlay drawables are icons that appear over other objects to indicate their intention or state. The following drawables can be customized: videodisabledicon.

9.png. The back- ground of the video scrubber to the right of the scrubber button (indicates the amount of video remaining). Video player drawables are stored in the These drawables are stored in the res/drawable-nodpi.2 Video Player Drawables Video player drawables are icons that appear as the controls for controlling the video playback.png. The button A B C D E F G of the video scrubber. The icon used for viewing the video in fullscreen mode.10. The icon used for forwarding the pause. 69 .png. next.png.png. see appendix C. downloadbackground. play.2. For an overview of the exact dimensions of each drawable. A prev B downloadbackleft. The icon used for playing the video.Chapter 09 Customizing the Android Reader App 11. Image Dimensions. The icon used for reversing the video.png.png. res/drawable-nodpiv8 and res/drawable-nodpi-v11 folders. The video control drawables downloadbackleft. prev.9 C pause D audiocontrolsliderbutton E next F downloadbackground G maximize Figure 11.9. The following drawables can be customized: audiocontrolsliderbutton. maximize.png.10. video. minimize. The icon used for pausing the video. The background of the video scrubber to the left of the scrubber button (indicates the amount of video which has played).png. The icon used for taking the video out of fullscreen mode.

mp4</url> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <autoplay>false</autoplay> <autofullscreen>false</autofullscreen> <moviecontrols>false</moviecontrols> </movie> </object> If the <moviecontrols> setting is set to false (controls hidden) and the <autofullscreen> setting is set to true (video automatically played in fullscreen mode). Locate the created video object by searching for <type>movie</type>. the exported magazine. Step 3. Step 2.Chapter 09 Customizing the Android Reader App 11. This can be controlled for each placed video individually. else the user would not be able to leave fullscreen mode.11 Hiding Embedded Video Controls The controls for an embedded video can be hidden so that they don’t appear on the page. add the following property: <moviecontrols>false</moviecontrols> Possible values: true: controls will be shown6 false: controls will be hidden (continues on next page) Example: <object> <id>96</id> <type>movie</type> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <movie id=”95”> <url>images/story136/video_96. Open the exported magazine.xml file needs to be edited as follows: Step 1. To hide the controls for a placed video. the controls will be shown. In the movie id section.xml file in a plain-text editor. The user can control the playback of the video by taking the video into fullscreen mode. The controls are also shown when the moviecontrols property is not included 6 70 .

The Back button in its These drawables are stored in the res/drawable-nodpi folder.12 Web Elements When a Web Element is displayed as a pop-up. closebuttondefaultstate.12. available state. For an overview of the exact dimensions of each drawable. The button to close the window with.png.png. see appendix C. The Web Elements drawables 71 . A B A back�grey B closebuttondefaultstate Figure 11.Chapter 09 Customizing the Android Reader App 11. Image Dimensions. the window in which the Element is displayed contains the following customizable drawables: back_white.

the drawable-nodpi-v8 folder. the frameworks now contain drawables for both Honeycomb and Froyo. The location of all drawables has also been changed.10 Building the Android Reader App This chapter discusses the process of building the Android Reader App using Eclipse. The changes are as follows: The hdpi folder is no longer used for Froyo. drawable-mdpi and draw- able-ldpi folders still exist but only contain the app icon. 1. Universal Builds The Android Reader App v1. Although the same app. As a result of this change. Any Honeycomb-specific drawables are Any Froyo-specific drawables are located in The drawable-hdpi. located in the drawable-nodpi-v11 folder. All drawables shared between Honeycomb and Froyo are located in the drawable-nodpi folder.3 runs on both a Honeycomb and Froyo device.2). the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1. 253 Android . The mdpi folder is no longer used for Honeycomb.

make sure to have a fully working workspace set up for developing Android apps in Eclipse.com/sdk/installing.android. For instructions about installing the Android SDK and steps for setting up your environment. the following preparation steps are required: Preparing Eclipse Preparing a Reader App without Store 2. Preparation Before being able to build a Reader App using Eclipse. see http://developer.html.1 Eclipse Before working with the provided Reader App projects in Eclipse.Chapter 10 Building the Android Reader App 2. functionality functionality Preparing a Reader App with Store Each is explained in the following sections. 254 Android .

Se nd a n e -mail to s e r v i c e s@ woodwing.Chapter 10 Building the Android Reader App 2. and the Reader App needs to be registered on the Content Delivery Platform. Step 3. Import the Basic or Standard project into your workspace.) A secret key for the Reader App.3 Reader App With Store Functionality A Reader App with Store functionality needs to be able to communicate with the Content Delivery Platform on which the content resides. Build the project. as Step 2. For this purpose.xml file together with the images folder into the following folder in Eclipse: customer�app/assets/magazine 2. To achieve this. (See section 2. (See section 3. you will be sent the relevant settings required for inclusion in the build: Step 3. perform the following steps: Step 1. Import the Pro or Subscription project into your workspace. Us e th e s et ti n g s p rov i d e d by WoodWing for building your Reader App.) 255 Android The Content Delivery Platform URL . Step 2. as defined on the Content Delivery Platform defined on the Content Delivery Platform A product ID for the Reader App. Building.com stating that you would like to distribute a Reader App by making use of the Content Delivery Platform. You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform (WoodWing will do this for you). the magazine that was exported from Content Station needs to be merged with the project. pertinent information needs to be included in the final build of the Reader App. To do this. proceed as follows: Step 1. Building. Drag the exported magazine. When processed.2 Reader App Without Store Functionality When the magazine content needs to be part of the Reader App (as is the case for non-Store versions).

Building In order to build the Reader App. From the Run menu. (Optional) When building the Reader App with Store functionality.apk file will be generated in the following location: <project folder>/bin 256 Android . Customizing the Android Reader App – section 9. The Run As dialog box appears. perform the following steps: Step 1.1 Communication With the Store. Step 2. Choose Android Application from the list. Step 3. A binary . choose Run. Step 4. enter the details received from WoodWing (see section 2.3 Reader App With Store Functionality) in the Eclipse project as outlined in chapter 9.Chapter 10 Building the Android Reader App 3.

The following main customization areas are defined: General App settings Navigation General App features Enabling those features that you want your Localizing the Reader App into a particular 257 HTML5 .11 Customizing the HTML5 Reader App Customizing the Reader App is important when you want to achieve any of the following: Giving it a unique look and feel (reflecting the content of the issues that will be viewed) users to use language In this chapter you will learn all about customizing the HTML5 Reader App. customizing each Reader App feature is discussed in detail. After a few introductory sections in which general customization is discussed.

Use your favorite editor for this task. Used for controlling funcnavigator. Used for controlling the gen- eral appearance and functionality of the Reader App. use. Used for con- 258 HTML5 . audio. Used for controlling func- tionality related to the Flipview. the following tools are required: CSS editor.css. Use your 2. For editing CSS files. Used for controlling functionality related to the Story and Page Navigators. hotspot. text. tionality related to Hotspots. Use your Config files editor. etc. Different CSS files are available for different areas of the Reader App (listed in alphabetical order): Each file can be found in the reader/ themes/default/components folder and its sub folders. config.css.css.css.css. trolling the scrollbars of Scrollable Area’s.css. Used for controlling functionality related to Active Elements. Image editor. ality related to audio. favorite editor for this task. Used for changing the appearance favorite editor for this task. For editing images. activeelement.css.css. For editing configuration files.Chapter 11 Customizing the HTML5 Reader App 1. Required Tools In order to perform the steps as outlined in this chapter. This file is reserved for future flipview. scrollarea-images. Used for controlling functionbase. such as an XML editor or plain-text editor. The following files can be edited: CSS files. Project Files Customization of the HTML5 Reader App is achieved by editing various types of files. of the Reader App in the form of background colors.

icons.css. 3. Used for controlling toolbar. Located in the 259 HTML5 . etc. All images are located in the reader/themes/ default/img folder. logos and headers. Used for controlling func- tionality related to the Page Scrubber in the Flipview. Used for changing the appearance of the Reader App in the form of buttons. whereas other features require changes in multiple places. The functionality of the Reader App. Text. Interface components such as but- slideshow.css. Settings. Images. The color of text and backgrounds. Navigation bar and top Toolbar. functionality related to Slide Shows. Used for controlling functionweblink. ality related to video. icons.css. The text of specific titles as they appear in various places of the Reader App.css. What Can Be Customized? Changing the look & feel or the functionality of the Reader App is achieved by modifying any of the following areas: Images. functionality of the Reader App: reader/config folder For some features. Configuration files. Used for controlling func- tons.css. Used for controlling the video. tionality related to Web Links. making changes in only one area will be sufficient. Used for changing the DMSettings.Chapter 11 Customizing the HTML5 Reader App slider. Colors.plist.

260 HTML5 . Various images are available as PDF files which can be customized by using Illustrator and subsequently saved as . Each of these images can be easily replaced by your own images. Detailed information about the colors that can be changed or each feature is provided in the remainder of this chapter. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.1 Images Images are user interface components such as buttons.x/Software.Chapter 11 Customizing the HTML5 Reader App 3.net/products/Enterprise%207.0.png files. icons and headers. with the exception of the loader. woodwing.gif file and some images of the Navigation Zones which are in jpeg format. Exactly which images can be customized per feature is explained in the remainder of this chapter. Take note of the following: Renaming images is not allowed since the 3. names are directly linked to the code in the Reader App All image names are written in camelCase format All images need to be in PNG file format.2 Colors Colors for objects and text are controlled via CSS files.

Setting the properties To change any of these properties.1 Images. but Story description. use Smart Connection for InDesign or Content Station. thumbnail in the Flipview is derived from the Story Title property. Text originates from various sources in the system 261 HTML5 . modify the respective file. The title for a story below a A B A B C C Server property B Dossier property Image with text Figure 3. Section. Most images include icons only. the following images also include text: Buttons of the Navigation bar To change the text for these images. (Note that the values used in the list are taken from their respective custom metadata properties. The text that can be changed originates from various sources.) Dossier properties. change the Issue Description property on the Issue Maintenance page in Enterprise Server. and can therefore be changed by different means: Images.3. see section 3.Chapter 11 Customizing the HTML5 Reader App 3. Digital Magazine Configuration. The story descrip- tion below the story title in the Flipview is derived from the Description property. see the Enterprise 7 Admin Guide. (For more information.) Issue Maintenance page. The Issue of a Dossier controls the following: Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header. chapter 40. Each section in the Section Viewer is derived from the Section Title property. Story title. To add or change this text. For more information about setting these values.3 Text Limited resources are available for changing the text which appears in the Reader App.

the exported magazine.plist file.4 Settings Some of the customizations for the Reader App are performed in the DMSettings. The DMSettings File. which allows changing specific Reader App functionality. Previewing Customizations Previewing any made customizations can be done by previewing the Reader App in a supported Web browser. 262 HTML5 .xml file can be modified. no user interface is available yet (such as hiding video controls). see appendix E. 4. For a full overview of all settings in the DMSettings file.Chapter 11 Customizing the HTML5 Reader App 3. For some specific features. For these scenarios. Which settings these are and for which features they are used is discussed in the remainder of this chapter. Note that a Web Server is required for this purpose.

css Selector: body Class selector: .css Selector: body Class selector: . The general look of 5.container background-color border-color Background loader image CSS file: base.css Selector: body Each is explained in the following sections. Background image: bg-body. a message is displayed to the user. General App Features The following general features can be modified for the Reader App: General appearance. Reader App background CSS file: base.html 263 HTML5 When the magazine is loaded in an unsupported Web browser. Location: .gif Unsupported Browser Web page reader/unsupported�browser.png Reader App page container CSS file: base.Chapter 11 Customizing the HTML5 Reader App 5. This Web page can be customized to your needs.loading Loader image: loader.png Background color Background gradient: bg-body-gradient.1 General Appearance The following general Reader App features relating to its appearance can be customized (see image on the following page): the Reader App.

CSS references: CSS files: base. scrollbarCSS references: track-hor. scrollarea-images. scrollarea-images.css.png CSS files: base.css.css Class selector: .png. scrollbar-track.scrollable Horizontal scrollbar Images: scrollbar-thumb-hor.css Class selector: .Chapter 11 Customizing the HTML5 Reader App Custom scrollbars Scrollbars appear in the following locations: Long pages (pages that are longer than the Scrollable areas defined height of the page area) These are controlled by the following images and CSS references: Vertical scrollbar png Images: scrollbar-thumb.scrollable 264 HTML5 .png.

Chapter 11 Customizing the HTML5 Reader App A A B B C border-color C D background-color D bg-body. Customizing the general appearance of the HTML5 Reader App 265 HTML5 .png loader.gif Figure 5.2.

the user navigates vertically (up/ down or down/up) Each aspect is explained in the following sections. select the following option in the DMSettings. . The Concept – section 3. Sections and Segments. navi- gation is done as follows: To navigate from one story to another. To enable Page navigation. but these are described in section 7.plist file: Navigation/Horizontal page navigation 266 HTML5 By default. Pages. the Reader App is set to Story navigation. In this configuration. Stories.Chapter 11 Customizing the HTML5 Reader App 6. the user navigates horizontally (from left to right or right to left) sible by means of a finger swipe or by using the mouse/keyboard.1 Story vs Page Navigation The user can be offered one of two types of navigation: Story navigation. Navigating from story to story is not pos- For more information about Story Navigation and Page Navigation. In this configuration. General App Features. Navigation The flexibility of the Reader App allows you to offer the user various tools and methods for navigating the content: Story navigation vs page navigation Navigation bar Flipview Top Toolbar Hotzones Navigation Zones 6. the user navigates horizontally (from left to right or right to left) page). navi- gation is done as follows: To navigate from page to page. To navigate within a story (from page to Page navigation. see chapter 3. Other Reader App features such as the TOC List and Searchable Text can also be seen as navigation methods.

TOC. Removing/adding/reordering buttons To remove or add a button.2 Navigation Bar The Navigation bar is used as a starting point for navigating the magazine. the user can quickly navigate to specific areas both within the Reader App itself (the cover.Chapter 11 Customizing the HTML5 Reader App 6. table of contents. The buttons are managed by means of the following option in the DMSettings. modify the content by using a suitable XML editor.2. For navigating to the magazine cover. FlipView. The number of buttons and the order 6. etc. From it. For navigating to the table of contents page. or change the order in which they appear.) as well as to external content for instance by using the Newsfeed button. The value of each item is linked to specific functionality and should not be changed.1 Items The Navigation bar can contain the following buttons: Home.plist file: Navigation/ToolbarItems Images. The appearance and position of the Each is explained in the following sections. Customizing the Navigation bar can be done by changing the following: Items. 267 HTML5 . in which they appear. For bringing up the Flipview. buttons.

(This button is normally named Contents. The icon for the Home button in its selected state.) flipviewSelectedIcon. Contents button in its selected state.png.png.png files. (This button is normally named Contents.) flipviewIcon. The icon for the homeSelectedicon.2. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.2.2. The Navigation bar images 268 HTML5 . The following images can be customized (listed in alphabetical order): flipviewHoverIcon. The icon for the Contents tocSelectedIcon. homeIcon.png. The Toolbar images are available as PDF files which can be customized by using Illustrator and subsequently saved as .) Flipview button in its selected state.png.png. The icon for the Contents button when the mouse is hovered over it. The icon for the Home but- A A B C homeHoverIcon B tocSelectedIcon C flipviewIcon Figure 6. The icon for the Flipview button when the mouse is hovered over it.x/ Software. (This button is normally named Contents. linking to the page with the table of contents.png. linking to the cover of the magazine. ton.png. tocIcon.png.Chapter 11 Customizing the HTML5 Reader App 6. button. tocHoverIcon.net/products/Enterprise%207.2 Images The images that appear in the Navigation bar are stored in the img/bottomToolbar folder. The icon for the homeHoverIcon.woodwing. The icon for the Flipview button. The icon for the Home button when the mouse is hovered over it.png.0.

3 Flipview The Flipview appears when the user taps the Contents button in the Navigation bar. The appearance of the Flipview can be modified by changing any of the following: Background Header Thumbnail border Story title Story bullets Story description Page scrubber Each is explained in the following sections. and the Page Scrubber.3. A B C A Flipview Header B Story Viewer / Page Viewer C Page scrubber Figure 6. the Story Viewer / Page Viewer. It shows the Flipview Header.Chapter 11 Customizing the HTML5 Reader App 6. The Flipviewer appears when tapping the Contents button in the Navigation bar 269 HTML5 .

Chapter 11 Customizing the HTML5 Reader App 6. The Flipview images A B Figure 6.3. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server.png CSS reference: CSS file: flipview.3.css Class selector: .2.flipview-closer A B A flipviewBackground Figure 6. Close button A The close button to close the Flipviewer with.flipviewpanel Issue description For displaying issue information.css Class selector: .1. Image: flipview-horizontal-button-close.3. The Flipview header components 270 HTML5 Issue description flipview-horizontal-button-close .2 Header The Flipview Header contains the following editable components: Flipview background The background image of the Flipview.3. Image: flipviewBackground.png CSS reference: CSS file: flipview.1 Background The following areas of the background can be customized: 6.

The story title is displayed below the first page of each story and is therefore a clear indication of where each story starts.Chapter 11 Customizing the HTML5 Reader App 6.3.flipview-active-thumb border-color 6. The border color can be controlled by the following setting: CSS file: flipview. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.css Class selector: .3. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom) 271 HTML5 .3.1 Story vs Page Navigation). This is especially useful when the Reader App is configured for Page Navigation (see section 6. A border is shown around a thumbnail to indicate which story currently is viewed B A Story Title property B Story title displayed in Reader Figure 6.3 Thumbnail Border The currently displayed story is marked by a border around the corresponding thumbnail in the Story Viewer / Page Viewer.4.4 Story Title Below the first page of each story. The text that is displayed is taken from the Story Title property of a Dossier. A A Thumbnail border A Figure 6.3. the Story Title can be shown.3.

5.3. 6.3.png CSS reference: CSS file: flipview. A A flipview-horizontal-bullet-circle Figure 6.) The text that is displayed is taken from the Story Title property of a Dossier.flipview-bullet B A B Story Description property Story Description displayed in Reader Figure 6. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom) 272 HTML5 .6.3. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. there is currently no DMSetting to show/hide this description.3. a short description is displayed below each story title as a further indication of what the story is about.css Class selector: . (Contrary to the iPad and Android Reader Apps.5 Story Bullets A story bullet is shown in front of each story title.6 Story Description By default. A story bullet is shown in front of each story title A The story bullet is controlled by the following image and CSS reference: Image: flipviewBullet.Chapter 11 Customizing the HTML5 Reader App 6.

3.5 Navigation Zones). Default value: 44 (in pixels).css Class selector: .png CSS reference: Page Scrubber background Image: slider-bg.css Class selector: . Navigation zones are used.png CSS reference: CSS file: slider.slider-handle .4 Hotzones Hotzones are areas to the sides or bottom of the Reader App screen which the user can tap to make the Navigation bar or top Toolbar appear.slider-panel 273 HTML5 CSS file: slider. see section 6. The Page Scrubber is controlled by the following image sand CSS references: Page Scrubber button Image: slider-button. Default value: 44 (in pixels). not on a desktop PC/laptop (for these systems. The Page Scrubber components Note that Hotzones only work on touchscreen devices. slider-button slider-bg Figure 6. Bottom area height Left area height Height of the bottom Hotzone. The size of the sensitive area can be set by the Touch Areas setting of the DMSettings file. Default value: 80 (in pixels).3. Height of the left Hotzone.Chapter 11 Customizing the HTML5 Reader App 6.7. 6. A A B B Right area height Height of the right Hotzone.7 Page Scrubber The Page Scrubber is used for quickly scrolling through the pages of the Page Viewer / Story Viewer.

.png.5 Navigation Zones On desktop PCs and laptops.5. .css Class selectors: .navigator-left. all by using the mouse. The Navigation Zones at the edges of the screen (here all shown simultaneously for a page) CSS file: navigator.navigator-right. arrows-click- CSS file: navigator.navigator-bottom.css Class selectors: .png. the area is made visible by a bar running along the side of the screen and an direction indicator in the center of that bar.jpg Figure 6. arrows-click- vertical.navigator-leftactive Right Navigation Zone Images: bg-rail. arrows-click. The Navigation Zones are controlled by the following images and CSS references: Left Navigation Zone Images: bg-rail.navigator-top. Navigation Zones are used for moving to the next/previous page/story or for navigating between images of a Slide Show.css Class selectors: .jpg CSS references: CSS file: navigator.png.jpg .png. .css Class selectors: . arrows-click. .jpg CSS references: CSS file: navigator.Chapter 11 Customizing the HTML5 Reader App 6.navigator-topactive Bottom Navigation Zone CSS references: Images: bg-rail-vertical. When hovering over such a zone.navigator-bottomactive 274 HTML5 vertical.navigator-rightactive Top Navigation Zone CSS references: Images: bg-rail-vertical.

It can be enabled by the following setting in the DMSettings file: Navigation/Enable top toolbar Toolbar. Disables the top Toolbar Each is explained in the following sections.6 Top Toolbar Customizing the top Toolbar can be done by changing the following: Availability. button. Images.6.png.Chapter 11 Customizing the HTML5 Reader App 6. Possible values: true.1 Availability By default. 6. Enabling or disabling the top 6. The icon for the TOC tocTableSelectedIcon. tocTableIcon. Enables the top Toolbar false. The icon for the TOC button when the mouse is hovered over it. The icons of the buttons and images.png.6. the top Toolbar is disabled.2 Images The following images can be customized: tocTableHoverIcon. 275 HTML5 .png. The icon for the TOC button in its selected state.

css Class selector: .1. General App Features The Reader App functionality can be further enhanced by customizing the following features: Audio Scrollable Areas Slide shows TOC List Video 7. The audio play enabled icon The audio overlay images are controlled by the following images and CSS references: Audio play overlay The audio icon shown when the audio file is not being played.1 Audio For the playback of audio. icons are available to indicate that an audio file can be played or stopped. Image: audio-play-overlay. Image: audio-stop-overlay.audio-adornment-stop . Overlay images are icons that appear over other objects to indicate their intention or state. overlay images can be customized.png CSS reference: CSS file: audio.css Class selector: .audio-adornment-start Audio stop overlay 276 HTML5 The audio icon shown when the audio file is being played. For audio. A A Each feature is explained in the following sections.Chapter 11 Customizing the HTML5 Reader App 7.png CSS reference: CSS file: audio. audio-play-overlay Figure 7.

For Slide Shows. A A slideshowIcon Figure 7. The Slide Show icon The Slide Show overlay is controlled by the following image and CSS reference: Image: slideshow-icon.2. an icon is available to indicate that the image on the page is in fact a Slide Show.slideshow-adornment 277 HTML5 .css Class selector: .2 Slide Shows For Slide Shows. see section 6.1 Navigation Zones (Desktop PCs/laptops only) Navigation Zones are used for navigating between images of a Slide Show by using the mouse.png CSS reference: CSS file: slideshow.2.2. For information about how to customize these. 7.Chapter 11 Customizing the HTML5 Reader App 7. the following can be customized: Navigation zones Overlay images 7. This icon is positioned in the lower left-hand corner of the image.2 Overlay Images Overlay images are icons that appear over other objects to indicate their intention or state.5 Navigation Zones. Each is explained in the next sections.2.

3 TOC List The TOC List is a pop-up window containing a table of contents.3.plist file: Navigation/Enable top toolbar. but in order for it to be accessible. This can be done by means of the following setting in the DMSettings. Enables the top Toolbar.3. For each story. 278 HTML5 . the following is shown: Thumbnail of the first page of the story The story title The story description 7.Chapter 11 Customizing the HTML5 Reader App 7. Tapping the TOC button in the top toolbar brings up the TOC List Implementing of this feature involves the following steps: Enabling the functionality Changing the story text Each is explained in the following sections.1 Enabling the Functionality The TOC List itself is always enabled. A A TOC List Figure 7. the top Toolbar needs to be enabled.

4.3.png CSS reference: CSS file: video. overlay images can be customized.2. The following image can be customized: A B The Video overlay is controlled by the following image and CSS reference: Image: video-play-overlay. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for displaying the story title and description in the TOC List (bottom) Figure 7. 7. This icon is positioned in the center of the image.video-adornment C D A Figure 7.Chapter 11 Customizing the HTML5 Reader App 7.css Class selector: . For videos. an icon is available to indicate that the image on the page is in fact a Video. The video play icon Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.2 Changing the story text The story title and story description are taken from the respective Dossier properties of the Dossier that has been created for the story. 279 HTML5 A Story Description property B Story Description displayed in Reader C Story Title property D Story title displayed in Reader A videoEnabledIcon .3. Overlay images are icons that appear over other objects to indicate their intention or state.4 Video For the video functionality.

) Note that the export results in the following two folders: html5.json configuration file. Bundling the Content To bundle the magazine content. 1. perform the following steps: Step 1. the HTML5 Reader App does not have a building process as such. Location of the issue. (See chapter 6./content This is the default location.12 Building the HTML5 Reader App Contrary to the other Reader Apps. Since the HTML5 Reader App can only be used for single-issue magazines. Open the html 5/content folder and copy its content. The content intended for use in HTML5 Reader Apps. Step 3. magazine. Exporting Content. . Export the magazine using Content Station. 280 HTML5 Step 2. custom locations can be defined by means of the following setting in the DMSettings file: M ag a z i n e Co n f i g u r a t i o n U RL . Paste the content into the following location of the Reader App: . The content intended for use in Reader Apps on iPad or Android devices. the only step which needs to be performed is bundling the exported magazine content into the Reader App project.

281 HTML5 .Chapter 12 Building the Android Reader App Magazine Content URL. Location of the magazine content (the images and pages folders).

Reader Apps without Store functionality include the Basic Edition and Standard Edition. 282 . Submitting the Reader App The following sections describe the steps involved for submitting a Reader App to the iTunes App Store.13 Distributing Reader Apps Without Store Reader Apps which do not include Store functionality are distributed with the magazine content included as part of the app. and to an Android app store. 1. you will learn all about a Reader App with no store functionality. Such Reader Apps are offered as a single download: for each magazine issue a new Reader App needs to be downloaded. In this chapter.

download the iTunes Connect Developer Guide (see chapter 1. Intro – section 3. 283 . the Reader App needs to be approved by Apple. After completing the upload process. 1.apple. Tips and Best Practices for further guide lines around this process. follow the guide lines as provided by that store. perform the following steps: For a detailed. Register the Reader App with the App Store by providing all relevant details about the Reader App as well as screenshots for display in the App Store.1 To the iTunes App Store To submit the Basic or Standard Reader App to the iTunes App Store. Step 2.com/. or manually. This can be done automatically (as soon as the app is approved). Upload the Reader App to iTunes by using Apple’s Application Uploader. Step 3. Step 1. step-by-step guide of this whole process. Release the Reader App to go live in the App store.2 To an Android App Store To submit the Basic or Standard Reader App to an Android app store. Log in to iTunes Connect: https://itunesconnect.Chapter 13 Distributing Reader Apps Without Store 1. See appendix H. Additional Documentation for a download link). Step 4.

and Apple Subscription Edition. 284 . Standard Edition. you will learn all about the Content Delivery Platform. as well as how to build and distribute a Reader App with Store functionality. the WoodWing Content Delivery Platform is required. In this chapter. The Library functionality is used to view and open the available issues. In order to facilitate this process.14 Distributing Reader Apps With Store Reader Apps which include Store functionality are distributed separately from the magazine content. The magazine content is offered for free or as a paid issue (possibly via a subscription service) and is downloaded into the same Reader App. Subscription Edition. Users only download the Reader App once after which they can use the Store functionality to view the available issues. This way. only one Reader App for each title needs to be downloaded onto the digital device. Reader Apps with Store functionality include the Pro Edition.

woodwing. an overview of the available issues is received from the Content Delivery Platform. the payment process is bypassed. (Issues available via subscription are shown in the Library. the user downloads an empty Reader App from the App Store and accesses the Content Delivery Platform to see which issues are available. When downloading an issue. the magazine content is received from the Content Delivery Platform 285 . For more information. devices with which issues can be viewed that have not yet been published.com/en/digital-magazine/ content-delivery-service. Availability The Content Delivery Platform is available as a service hosted by WoodWing. see http://www. Also.) received from the Content Delivery Platform. For versions of the Reader App containing a Store. It acts as a bridge between an external Subscription server and the Reader App. This allows testing of content before it is made live to end users. Overview of available issues Magazine content Content Delivery Platform Digital device Reader App without content app store Figure 1. When downloading. The Content Delivery Platform A typical workflow for getting content to a Reader App by using the Content Delivery Platform would be as follows: The Reader App is downloaded onto the The Content Delivery Platform takes care of the following tasks: It manages the information about the Reader It manages the information about the issues It provides the magazine content It allows you to add development devices: App device from the App Store. the magazine content is This process is displayed in figure 1 below. so no purchasing is required in the case of paid issues. available to the Reader App By using the Store functionality of the Reader App.Chapter 14 Distributing Reader Apps With Store 1.

Chapter 14 Distributing Reader Apps With Store 2.com/. 3. Framework. Log in to iTunes Connect: https:// itunesconnect. Updating an already distributed Reader App involves a different process. Subscription. 286 . Additional Documentation for a download link). After completing the upload process.1 Updating the Reader App). Tips and Best Practices for further guide lines around these processes. Step 1. Register the Reader App with the App Store by providing all the relevant details about the Reader App as well as screenshots for display in the App Store. Submitting to iTunes Connect To submit the Pro. For more details. The Store is available as an HTML Store and does not necessarily have to be integrated in the Reader App. Step 3. 1 Step 4. Distributing the magazine content in the form of issues Each part is explained in the following sections. it can also be hosted separately. Distribution Workflow The workflow for distributing a Reader App with Store functionality can be split into two parts: 1. Submitting Android Reader Apps For submitting Android Reader Apps. download the iTunes Connect Developer Guide (see chapter 1. Upload the Reader App to iTunes by using Apple’s Application Uploader. Distributing the Reader App Distributing the Reader App with Store functionality involves submitting it to the relevant store. See appendix B. step-by-step guide of this whole process. Distributing the Reader App1 2.apple. This process only applies to Reader Apps which are distributed for the first time. Intro – section 3. see section 3. perform the following steps: For a detailed. When one or more issues have been made available for download (see section 4. the Reader App needs to be approved by Apple. Step 2. or Apple Subscription Reader App to the iTunes App Store. follow the guide lines as provided by the relevant store.

for instance because you want to make use of different and/or new functionality.1 Updating the Reader App There may come a time when you want to distribute an updated version of the Reader App itself. This can be done automatically (as soon as the app is approved). or manually. by the relevant store. Android: Follow the instructions as provided 287 .Chapter 14 Distributing Reader Apps With Store Distributing Issues) release the Reader App to go live in the App store. 3. Additional Documentation for a download link). Updating the Reader App can be done by doing one of the following: iPad: Follow the instructions as outlined in the iTunes Connect Developer Guide (see chapter 1. Intro – section 3.

Step 2. Using the Content Delivery Platform – section 3. An issue split into segments. For more information. 288 . App version and Android Reader App v1.2 Registering With the CDP Issues can be registered in two ways on the Content Delivery Platform: As a full issue. see appendix F.1 only) An issue in which content is added as separate segments. Adding an Issue in Segments. Each step is explained in the following sections. An issue containing all content.2. only available for the iPad Reader App version) Register the issue with the iTunes Connect service as an In-App Purchase. Register the issue with the Content Delivery Platform. Distributing Issues The workflow for distributing an issue is as follows: Step 1.Chapter 14 Distributing Reader Apps With Store 4.1 Registering With iTunes Connect (iPad Reader App version only) This step only needs to be performed when the user will have to purchase the issue.4. Intro – section 3.1. follow the steps as outlined in the iTunes Connect Developer Guide. Using the Content Delivery Platform – section 3. see appendix F. (iPad Reader 4. 4. (Paid issues only. For more information. you can skip this step since no interaction is required between the Reader App and an app store.4. To register an issue in iTunes Connect as an in-app purchase. When the issue is offered free of charge. (see chapter 1. Additional Documentation for a download link). Adding a Full Issue.

A Layout Sizes In chapter 5. the concept of using a DM Artboard is explained in which layouts do not have to be created in a specific size. Formula To calculate the exact page size for a specific device. InDesign will automatically calculate the entered fracture into the correct value. it is practical to create the layout in the size of the largest device. the DM Artboard concept supports creating content for a single device.5 points The easiest way of calculating this is to enter the formula straight into the Page Size Width or Height boxes of the New Document dialog box in InDesign. 1 289 . Also.1 Device Settings. you might have to enter the translated version of “inch”. you can also type “inch”. Some widely used values are shown in section 1. calculating the width of a page for a device which is 1024 pixels wide and uses a 132 dpi setting. the following calculation would be performed: 1024/132 in = 558. Instead of “in”. When pressing the Tab key to tab out of the width or height box. the following formula is used: [page width or page height in pixels]/[dpi value] in (Where in stands for inches1) For example. and present it in the measuring unit that InDesign is set to. Creating Content. Note that when using a non-English version of InDesign. However. 1. without the use of an artboard (although it is recommended to configure artboards). This all means that at some stage you want to create a layout in the exact dimensions of a particular device. This appendix provides the information for achieving this.

the actual working area is as follows: Page in landscape orientation: Width: 1024 pixels Height: 748 pixels Page in portrait orientation: Width: 768 pixels Height: 1004 pixels Samsung Galaxy Width: 1024 pixels Height: 600 pixels Dots per inch: 169 dpi However.1 Device Settings Below is a listing of the settings used for some popular devices: 1.2 Page Sizes The tables on the following page show popular page dimensions converted to various units of measurements based on different dpi settings. due to the height of the iPad’s toolbar of 20 pixels. Apple iPad Width: 1024 pixels Height: 768 pixels Dots per inch: 132 dpi However. due to the height of the Galaxy’s toolbar of 38 pixels. the actual working area is as follows: Page in landscape orientation: Width: 1024 pixels Height: 562 pixels Page in portrait orientation: Width: 600 pixels Height: 986 pixels 290 .Appendix A Layout Sizes 1.

0178 cm 14.194 mm 197.4 pt 255.5503 in 5.621 35p0.178 mm 148.4466 cm 9.8192 cm 15.1a. Page dimensions converted to various units of measurements for use on the Samsung Galaxy Size dpi 562 pixels 600 pixels 986 pixel 1024 pixels 169 169 169 169 Picas 19p11.192 mm 153.3254 in 3.26 Points 239.5 pt Inches 5.636 46p6.8343 in 6.071 36p4.26 pt Inches 3.6061 in 7.071 pt 436.1b.3933 cm 14.779 cm 19.0592in Value Millimeters 84.026 mm Centimeters 14.8181 in 7.903mm Centimeters 8.466 mm 90.933 mm 147.9 pt 547.621 pt 420.779 mm 193.Appendix A Layout Sizes Table 3. Page dimensions converted to various units of measurements for use on the iPad Size dpi 748 pixels 768 pixels 1004 pixels 1024 pixel 132 132 132 132 Picas 34p0 34p10.432 21p3.6 pt 558.6667 in 5.7569 in Value Millimeters 143.3903 cm 291 .9 45p7.5 Points 408 pt 418.3194 cm 19.7026 cm Table 3.

1 format. Text View Mode. the described method can only be applied to articles created using InDesign CS5 and InCopy CS5. underlining and Vertical text alignment (relative to the baseline) Drop caps Subscript. InDesign CS4 or InCopy CS4 users can make use of the method as described in chapter 5.B Creating Text View Markup Articles This appendix describes how to create fully marked-up articles for use in the Text View mode of the iPad Reader App. 1. thereby offering a vast amount of styling possibilities and features (such as applying background color. Due to the different article formats used by InDesign CS4/InCopy CS4 and InDesign CS5/InCopy CS5. superscript and capitalization Left-to-right or right-to-left support Swatches (CMYK. border styles. etc. This feature is expressed in a HTML element and can therefore be styled as such 1 292 . and RGB) Bullets and numbering1 Tables1 Hyperlinks (but no cross-links)1 Footnotes (hyperlinked)1 No-breaks (text selections only)1 strike-through This is done by using the XHTML 1. Text View Markup The Text View Markup feature allows you to create articles which will display in fully marked up text in the Text View mode of the Digital Magazine Reader.1 / CSS 2. Labs.5. This can even be controlled down to Brand or Issue level. including: Font styles such as bold. italic. Creating Content – section 3.).

0.5 or higher article.Appendix B Text View Markup Articles 2. delete it from the article. Check with your administrator if this feature is enabled. (If the latter.8. the Elements panel or in Content Station. configured for digital 3.) Step 2.2 installed Content Station 7. depending on your company’s setup) Once the article is created. Should any image component exist. Create a layout and save it to the system. articles intended to be used for Text View mode are not allowed to contain any images. Styling can be applied by making use of the following methods: 293 .2 Digital Magazine Reader App version 1. Enterprise can be set up in such a way that any selected image frames are automatically made part of an article. check that no article components containing an image exist in the article by verifying the article’s content in the Smart Connection panel. perform the following steps: Step 1. or it can be a dummy layout. This could be the layout used for the page in landscape orientation. However. Creating the Article To create an article for Text View Mode using InDesign CS5. Requirements In order to make use of this feature. the following is required: Enterprise Server 7. Place an already created article (created using InDesign CS5 or InCopy CS5) on the layout. (Optional. Create the article by doing one of the following: Convert one or more text frames into an magazines InDesign CS5 or InCopy CS5 with Smart Connection 7. solely used for creating an article. make sure that it is not included in the export of the magazine.

different styling can be set up for each applied Element label. respected.1 Element Label Mapping The Element Label Mapping method is a typical method for applying simple text mark-up and works by applying an Element label to each article component. 294 .) Manually applied overrides to styles are This method helps in standardizing the method of using the Text View Markup feature while altering the look and feel of the publications it is applied to. When using this method. On the other hand. Each method is further explained in the following sections. styling the article text is not actually necessary. the Element label to CSS mapping will take care of this. You could therefore have a very basic looking article which will display highly styled in the Digital Magazine Reader App. When using this method. About Overrides. This way. Your system administrator will have set up the required Element labels and will have made sure that they are mapped to the corresponding CSS style. Either method can be configured to be used on the following levels: System wide Per Brand Per Issue flattened (meaning that the applied formatting is lost) and Web styles (CSS) are used instead. The name of the Element label is then mapped to the corresponding name in the style sheet. you can use this method to label styled articles in a fully designed layout in landscape orientation for creating a Text View version which will look completely different due to the mapping between Element labels and Web styles. The name of the Element label is then mapped to the CSS style. 3. styles. take note of the following: Paragraph and character styles are ignored/ By applying paragraph and character By using a combination of both methods. (For limitations concerning using overrides. Check with the administrator which Element label should be applied in order to achieve a particular styling effect. The name of the paragraph or character style is then mapped to the CSS style.Appendix B Text View Markup Articles By assigning an Element label to an article component. see section 4.

see section 4.) Unknown styles are flattened.Appendix B Text View Markup Articles 3. The use of special characters in the style name is supported. The names of the applied styles are then mapped to the corresponding name in the style sheet. CSS styles. take note of the following: Font sizes must be defined in ems in the CSS required InCopy Applying specific styles unknown to InDesign/ style in order to support zooming on the digital device. The method works by applying paragraph styles. take note of the following: Manually applied overrides to styles are Font colors cannot be overridden through respected. Your system administrator will have set up the required paragraph/character/table styles and will have made sure that they are mapped to the corresponding CSS style. such as applying a bold style to a paragraph style which turns the paragraph into italic text. About Overrides. 295 . When using this method.2 Styles Mapping The Styles Mapping method is typically used for: Advanced and/or detailed text mark-up Situations in which strong house styling is 4. (For limitations concerning using overrides. character styles. About Overrides When applying a manual override to a particular style. Check with the administrator which style should be applied in order to achieve a particular styling effect. or table styles to the text or table.

Appendix B Text View Markup Articles 5. Bodies. When including a table in your article. Known Limitations The following are not supported by the Text View Markup feature: Font family mapping Font mapping by using the DigitalMagazineInline images Shapes (including lines) Text indents Cross-references Text frame properties such as multiple Print-specific features such as tracking. scaling. 296 .xml file mapped to CSS styles. Table features such as merged cells and bor- columns ders are not supported. baseline shift. Using Tables Another powerful advantage of the Text View Markup feature is the fact that it supports tables. etc. Table style names are exported and can be 6. headers and footers are supported. take note of the following: Table style definitions are not exported. kern- Defs. ing.

Make sure that only one image in the Dossier has the intent property set to Header. This image needs to have the exact dimensions (width and height) in which it is going to be displayed on the digital device. In InDesign or Content Station. or to create a background image/pattern. by doing the following: Make sure that images to be used are added to the same Dossier as the story it belongs to. Check with your system administrator if images are added in this way. 297 . Click OK to close the Properties dialog box.Appendix B Text View Markup Articles 7. which are displayed below the article. This can be used for instance to automatically include an icon anywhere in the text. Step 2. perform the following steps: Step 1. Including Images Including a header image (Optional) To display an image as a header at the top of the article. access the Properties dialog box for the image that needs to be set as the header. Step 3. Including other images (Optional) Additional images can be added to the story. Including an image via CSS Images can also be included by referencing them in the CSS files. From the Intent list. choose Header.

html.png”). 14 . iPad The table on the following pages lists the image dimensions used for the iPad Reader App (in alphabetical order).C Image Dimensions This appendix provides an overview of the dimensions of the customizable Reader App images. 1. these are identifiable by their f i l e n a m e w h i c h e n d s w i th a “ 9 ” (s u c h a s “downloadleft.android. Some images used on Android devices are NinePatch graphics.com/guide/ developing/tools/draw9patch. Information about such files can be found here: http://developer.9.

iPad image dimensions (in pixels) Dimensions Image name accountIcon.png audioTopBarIcon.png audioControlSliderBGLight.png backSelectedIcon.png audioStopEnabledIcon.png audioPlayEnabledIcon.png checkbox.png bottombar.png back_white.png backIcon.png audioControlSliderBGDark.Appendix C Image Dimensions Table 1.png bookmarkTopBarSelectedIcon.png 16 16 47 47 20 52 52 not used 16 16 (Continues on next page) 404 37 37 32 32 14 37 36 36 36 50 50 not used not used 50 50 20 47 47 width 138 138 not used 146 28 28 9 9 14 28 36 36 36 47 47 height 92 92 15 .png audioPlayDisabledIcon.png audioControlStop.png accountSelectedIcon.png bookmarkTopBarIcon.png audioControlSliderButton.png audioControlDisabled.png checkboxChecked.png bookmarkAdd.png audioTopBarSelectedIcon.png back_grey.png audioControlBG.png audioControlPlay.png audio_controller.

png flipviewSelectedIcon.png flipviewSelectedSectionButton.png feedIcon.png downloadbackground.png flipviewBackground.png flipviewSectionBackground.png downloadleft.png customselectedicon.png facebook.png default_thumb.png 75 75 1024 9 21 75 768 75 1 47 303 44 44 not used 50 50 225 9 21 50 23 50 23 50 (Continues on next page) 1024 768 768 not used not used 30 31 31 748 1024 1024 34 30 not used not used width not used 35 30 height 16 .png closeButtonDefaultState.9.Appendix C Image Dimensions Table 1.png downloadFailedReloadButtonPressed.png downloadFailedErrorLabel.png customicon.png closeButton.png flipviewIcon.png forwardIcon.png flipviewCloseButton.png Default-Landscape.png Default-Portrait.png feedSelectedIcon.png Default.9. iPad image dimensions (in pixels) (Continued) Dimensions Image name close_white.png flipviewBullet.png downloadFailedReloadButton.

png issueShadow.png libraryUpdateIcon.png line.png 768 768 325 1 75 75 75 75 72 181 475 75 75 75 1024 1024 75 75 1024 75 75 325 not used (Continues on next page) width 47 not used 299 351 77 8 50 50 50 50 72 11 33 40 40 40 220 351 50 50 300 50 50 355 height 50 17 .png libraryShelf.png homeIcon.Appendix C Image Dimensions Table 1.png librarySelectedIcon.png loginDialogBackground.png Icon.png libraryDownloadPause.png gridViewBackground.png headerBackground.png galaxytoc.png libraryIcon.png headerBarShadow.png libraryDownloadRefresh.png libraryUpdateSelectedIcon.png helpSelectedIcon. iPad image dimensions (in pixels) (Continued) Dimensions Image name forwardSelectedIcon.png issueShadowLarge.png helpIcon.png libraryEmptyShelf.png gridViewBackgroundFirstRow.png homeSelectedIcon.png libraryDownload.png libraryFirstShelf.

png previewHeaderBackgroundPortrait.png previewShadowPortrait.png pageScrubberButton.png noInternetConnectionLabel.png next.png pause.png pageScrubberTrackLeft.png 1 1 8 1 1024 13 13 768 189 8 325 not used not used not used 562 249 1 8 111 13 12 22 228 1 (Continues on next page) 32 not used 330 6 196 1024 26 32 not used 9 width not used not used not used 164 14 37 26 9 height 18 .png segmentedControlGridButton.png pageScrubberTrackRight. iPad image dimensions (in pixels) (Continued) Dimensions Image name maximize.png passDialogBackground.png pageScrubberBackground.png prev.png shadowBarVertical.png segments_shadow.png play.png pageScrubberTrackLeft9.png progressiveDownloadOverlayBar.png pageScrubberTrackRight9.png minimize.png noInternetConnectionBackground.Appendix C Image Dimensions Table 1.png segmentedControlSingleIssueViewButton.png segments_stack_background.png previewHeaderBackgroundLandscape.png previewShadowLandscape.

png storeNoInternetErrorLabel.png storeIcon.png 20 13 not used not used 38 (Continues on next page) 1024 75 1 273 75 20 not used 26 width 54 54 54 54 55 55 54 54 768 768 1024 768 36 not used 42 50 58 20 50 36 height 54 54 54 54 50 50 54 54 614 704 661 917 36 19 .png singleIssueViewBackgroundLandscape.png storeSelectedIcon.9.png stretchableStoreButton.9.png storeclosebutton storeHeader.png shareTableSelectedIcon.png shareTwitterDisabled.png stretchablerectbutton.png singleIssueViewBackground.png shareFacebookDisabled.png storeNoInternetErrorBackground.png stretchableSubscribeButton.png shareMail.9.png slideshowIcon.png shareTwitter.png shareMailDisabled.png stretchablestorebutton_disabled.png singleIssueViewBackgroundLandscape-old.png stretchablestorebutton.png shareTableIcon.Appendix C Image Dimensions Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name shareFacebook.png singleIssueViewBackgroundPortrait.png stretchablePostButton.

png tocIcon.png videoDisabledIcon. iPad image dimensions (in pixels) (Continued) Dimensions Image name stretchableSubscriptionStoreButton.png transparentImageForFlipviewButton.png videoEnabledIcon.Appendix C Image Dimensions Table 1.png tocTableSelectedIcon.png textViewImagesShadow.png tocSelectedIcon.png twitter.png 23 36 36 width 20 1 768 768 75 75 47 47 78 57 150 not used not used 23 36 36 height 36 145 20 20 50 50 50 50 57 76 110 20 .png subscriptionFormBackground.png tocThumbBackground.png textViewHeader.png tocThumbBackgroundVertical.png topbar.png tocTableIcon.png UpdatableIssueIcon.

png backicon.3 (Froyo) Image name accountdisabledicon.png action_bar_tab_selected.png closebutton.png action_bar_action_overflow_pressed_background.png audiostopenabledicon.png back_white.png audioplayenabledicon.png audioplaydisabledicon.png backdisabledicon.png bottombar.png checkbox.png action_bar_tab_selected_pressed. Android image dimensions (in pixels) Android 1.png action_bar_tab_unselected.png audiocontrolsliderbutton.png accountselectedicon.png closebuttondefaultstate.png 47 47 1 16 16 34 32 14 36 36 36 54 not used 50 50 50 16 16 35 32 16 16 34 32 75 75 not used not used not used not used not used not used 14 36 36 36 32 width not used 51 50 1 1 1 1 1 1 14 36 36 36 54 47 47 not used not used 16 16 35 32 height Android 1.png action_bar_tab_unselected_pressed.Appendix C Image Dimensions 2.png action_bar_action_pressed_background. Table 2.png accounticon. Android The table below lists the image dimensions used for the Android Reader Apps (in alphabetical order).png checkboxchecked.3 (Honeycomb) width 75 75 not used 47 56 56 9 56 3 14 36 36 36 32 50 50 height 51 51 (Continues on next page) 21 .png backselectedicon.

Appendix C Image Dimensions Table 2.png flipviewsectionbackground.png feedicon.png downloadfailederrorlabel.png flipviewbackground.3 (Honeycomb) width 75 not used 15 1 24 15 15 75 not used 3 1 9 not used 228 20 1 75 1 not used 23 50 50 29 20 39 50 23 225 4 9 11 101 28 11 11 50 height 50 width 75 75 15 1 24 17 15 75 75 3 not used height 50 50 11 101 28 13 11 50 50 225 9 21 .png flipview_section_background_unselected flipviewicon.png forwardselectedicon.png flipviewselectedsectionbutton.3 (Froyo) Image name customicon.png feedselectedicon.png flipview_bottom_shadow flipviewbullet.png 323 47 47 not used not used 77 323 1 75 1 75 1 not used 50 50 9 21 not used not used 39 50 23 50 23 1 55 47 not used not used not used 77 (Continues on next page) 22 Android 1.png downloadfailedreloadbutton.png flipviewclosebutton.png flipviewselectedicon.png gridviewbackgroundfirstrow.png forwarddisabledicon.png flipview_close_icon. Android image dimensions (in pixels) (Continued) Android 1.png gridviewbackground.png forwardicon.9.png headerbackground.png downloadleft_disabled.png downloadbackground.png flipview_close_background.9.9.png customselectedicon.png downloadleft.

png homeicon.png (res/drawable-hdpi) librarydownload.png (res/drawable-mdpi) icon.png library_logout_icon.png library_shelf_issue_drop_shadow.png library_login_icon.Appendix C Image Dimensions Table 2.png nointernetconnectionbackground.3 (Froyo) Image name headerbarshadow.png library_top_bar.png homeselectedicon.png maximize.png magazine_selected_icon.png librarydownloadpause.png minimize.png magazine_icon. Android image dimensions (in pixels) (Continued) Android 1.png library_shelf_portrait.png next.png helpselectedicon.png (res/drawable-ldpi) icon.3 (Honeycomb) width not used 50 height (Continues on next page) 23 .png librarydownloadrefresh.png libraryselectedicon.png library_shelf_landscape.png 75 75 325 75 72 47 47 67 6 75 75 75 75 36 48 72 60 60 60 not used not used not used not used not used not used 50 50 355 50 50 47 47 47 164 72 47 47 67 6 325 not used 50 47 47 47 164 width not used 50 50 50 50 36 48 72 35 35 35 36 48 72 60 60 60 75 75 223 1280 800 1 75 not used 355 75 not used 36 48 72 35 35 35 51 51 239 364 364 42 50 75 not used 50 height Android 1.png logindialogbackground.png libraryicon.png icon.png helpicon.

png stretchablestorebutton.png play.3 (Froyo) Image name nointernetconnectionlabel.png stretchablestorebutton_disabled.png textfield_multiline_activated_holo_light.png textfield_default_holo_light.png textfield_disabled_holo_light.png textfield_activated_holo_light.png passdialogbackground.9.9.png textfield_focused_holo_light.png stretchablerectbutton.9.9.9.png storeselectedicon.Appendix C Image Dimensions Table 2.png pagescrubbertrackright9.png pause.9.3 (Honeycomb) width 196 1 26 34 34 not used 47 47 22 47 91 36 height 14 37 26 26 26 24 .png storeheader. Android image dimensions (in pixels) (Continued) Android 1.png prev.png storeicon.9.png slideshowicon.9.png pagescrubberbackground.png pagescrubbertrackleft9.png textfield_disabled_focused_holo_light.9.png pagescrubberbutton.png popup_background.png textfield_multiline_default_holo_light.9.9.png 67 1 36 1024 75 75 12 17 17 not used not used not used not used not used not used not used 42 21 not used not used not used not used (Continues on next page) 67 67 not used 47 91 36 42 50 50 28 22 22 12 17 17 not used 18 18 75 not used 28 22 22 width 196 1 26 34 34 not used 47 47 67 67 70 67 1 36 not used 50 height 14 37 26 26 26 Android 1.png progressivedownloadoverlaybar.

png textfield_multiline_disabled_holo_light.9.png textfield_multiline_focused_holo_light.png topbar.png videoenabledicon.png videodisabledicon.3 (Froyo) Image name textfield_multiline_disabled_focused_holo_light.png textview_mode_not_supported.3 (Honeycomb) width not used not used not used 3 50 height 25 .png tocselectedicon.9.9.png 3 75 75 1 36 36 width not used not used not used 3 50 50 48 36 36 36 36 3 75 not used not used 36 36 height Android 1.9.png tocicon.Appendix C Image Dimensions Table 2. Android image dimensions (in pixels) (Continued) Android 1.

Appendix C Image Dimensions 3.png bg-body-gradient.png SingleViewIcon.gif scrollbar-thumb.png bg-img.png Width 1600 48 101 16 16 16 36 53 53 164 2 13 1024 1024 13 Height 48 1600 28 16 16 16 36 28 28 9 290 13 470 62 12 4.jpg single-shelf.png flipviewBullet.png gridview-icon-button.png bg-rail.png homeSelectedIcon.png bg-body. HTML Store The following table lists the image dimensions used for the HTML Store (in alphabetical order).png gridview-item-shadow. Table 3.png homeIcon.png bg-rail. Table 4.png flipviewHoverIcon.png close-button.png flipviewSelectedIcon.png loader.png Width 48 56 36 36 1 10 4 1600 48 36 1 9 34 165 111 111 111 101 101 101 32 16 9 Height 56 48 36 36 1800 10 4 48 1600 36 208 9 35 250 63 63 63 62 62 62 32 16 91 (Continues in next column) 26 .png checkbox.png closeButton.png gridview-icon-active-button.png flipview-horizontal-thumb-bg.png checkmark. HTML5 Reader App image dimensions (in pixels) Image name arrows-click-vertical.png button.png bg-rail-vertical.jpg audio-play-overlay.png flipviewIcon.png homeHoverIcon.png single-bg.png arrows-click.gif loader-small.png flipviewBackground. HTML Storeimage dimensions (in pixels) Image name bg-rail-vertical.png flipview-horizontal-button-close.png audio-stop-overlay.png GridViewIcon. HTML5 Reader App The following table lists the image dimensions used for the HTML5 Reader App (in alphabetical order).png gridview-shelf.png checkboxChecked.

png tocIcon.png video-play-overlay.png tocTableHoverIcon. HTML5 Reader App image dimensions (in pixels) .Appendix C Image Dimensions Table 4.png tocSelectedIcon.png slider-bg.png slider-button.png tocTableSelectedIcon.png tocHoverIcon.png scrollbar-track.continued Image name scrollbar-thumb-hor.png Width 91 9 571 1 24 36 55 55 55 111 111 111 36 Height 9 571 9 34 24 36 38 38 38 62 62 62 36 27 .png scrollbar-track-hor.png slideshow-icon.png tocTableIcon.

CSS. a zoomable image. etc. and possible related source files.htmlwidget file. a slide show. By changing the extension to . 1. This is essentially a zipped file with a changed extension. File Format A Widget is stored in the Enterprise system as a . 28 . This functionality is provided through the use of HTML. Javascript.zip. This appendix explains in detail how to prepare Widgets for use in InDesign.D Working With Widgets A Widget is an HTML5 component with distinct functionality such as a 360-degree view of an object. the file can be unpacked.

Both have the same content. videos. A configuration file One or more Javascript files. the magazine. Note that <rootfile> holds the file which should be loaded by the Reader App.0. see the ww�dm�manifest�v1.x/Development). with the exception of the manifest. All files are created in the regular manner of creating a HTML5 component. These fields appear in the Widget panel in InDesign. Step 2. To create a manifest. File Structure A Widget contains the following files and folders: HTML file.xml File.xml File The manifest. additional files such as images. tain the results of the settings chosen in the Widget panel in InDesign.7.woodwing. Creating a Widget.net/products/Enterprise%20 7.xml file.json file. Step 3. Creating Content – section 5. Depending on the type of string) Widget. thereby allowing the user to change the behavior and/or content of the Widget. Add the minimum content as shown in figure 3 on the next page.xml and config.xml file).Appendix D Working With Widgets 2. etc.xsd file (available from the Enterprise Development page on the Community Site http://community. Save the file as a manifest. see chapter 5. (see above but with the exception of the manifest. CSS files. Once the magazine has been exported.xml. A manifest.xml file.xml file is a configuration file contain a variable list of fields. (For more information.zip file contains the following Widget files: All files that were part of the Widget bundle For a detailed description of the use of these fields. In the <properties> section. are included.xml file. describing the fields which can be modified. These con- All additional files (if any) that were linked to 29 .) The following types of fields can be used: Boolean String (including multistring) StringList (with the possibility for adding a Number File (can be filtered by type and format) FileList (can be filtered by type and format) Color (RGB) Group is embedded. add the required fields. It is this page which is placed in the assigned frame on the layout. A config. The page in which the component 3. by making use of the available options in the Widget panel in InDesign. Create an XML file using your favorite XML editor. Creating the manifest. Step 4. (Optional) Sources files. The creation of this file is described in section 3. perform the following steps: Step 1. Creating the manifest.

org/2001/XMLSchema-instance" usedSchemaVersion="1.Appendix D Working With Widgets Descriptions can be added to property (in the form of <description> tags). When a description exist. the description will appear as a tooltip. in order to explain in more detail what the option should be used for.html</rootfile> <properties> </properties> </widget> </manifest> Figure 3. a Help icon appears in the Widget panel. see the provided Widget samples on the Community site.0"> <widget widgetVersion="1.0" encoding="UTF-8"?> <manifest xmlns:xsi="http://www.xml file For an example of a manifest file.0"> <description src="http://some.</description> <rootfile>main. 30 .w3. <?xml version="1. When the user hovers the mouse over the icon.url/providing/more/information">This is the main description of the Widget. The default content of the manifest.

Step 5. select the check box for the Publication Channel of the Digital Magazine in which they should be used. Step 6. (Optional. Step 2. Upload the Widget into Enterprise or inform the end users where the file can be accessed so that they can upload it themselves using Content Station.zip file. the Widget will not appear in the Widget list of the Widget panel. Note that all files of the folder are bundled into a .htmlwidget. Change the extension of the file to . Combine all selected files into a .Appendix D Working With Widgets 4. In the folder.xml file into one folder. select all files. Step 3. (Optional) In the Dossier. not the folder itself. 31 . Making the Widget Available To make the Widget available for InDesign users. Step 4. If steps 6 and 7 are not performed. Notes: Steps 6 and 7 can also be performed by the end user. perform the following steps: Step 1.zip file. Collect all files that make up the Widget including the manifest. when known) Add the Widget to the required Dossiers. Step 7.

E The DMSettings File
This appendix provides a complete overview of all the settings as they are available in the DMSettings file. The DMSettings files are essentially XML files and can be shared between the different Reader Apps aimed for use on different platforms (iPad, Android, etc). The advantage of sharing the same source file is that similar functionality can be ensured, but keep in mind of course that not all features are supported on each platform.

1. File Structure
The settings in the DMSettings file have been grouped together as follows:

For iPad/Android 

Share toolbar. Settings for the Sharing

Content toolbar. 

Store. General store settings, including set-

tings related to subscriptions. Reader App. 

Navigation. Settings for navigating the Colors. Controls the colors for various Reader

components. 

Fonts. Settings for using fonts. Intents. Controls functionality for specific

buttons. 

TOC Popup. Settings for the TOC List. Bookmark Popup. Set tings for the

Bookmarks List. 

Hotzones. Hotzone settings. Flipview. Settings related to the Flipview. 32

Appendix E The DMSettings File 

Library. Settings related to the Library. Metrics. (Android only) Settings related to the

2. Features by Platform
Various versions of the Reader App exist (for iPad, Android devices and now also for HTML5 Web browsers). While they share most of the functionality, differences also exist. These differences could be because features are specific to a particular platform only, or because the development of one Reader App is not yet as advanced of another. For a comparison of each DMSettings option and their availability for each Reader App version, see table 2 on the next page. In this table, the features for the Android Reader App are presented for each compatible Android operating system.

metrics of the targeted device. 

Web Element Popup. Settings related to

controlling the Web Element pop-up. 

Newsstand. Settings related to the Newsstand feature of iOS 5.

For HTML5
files. 

Content. Settings for the location of source Hotzones. Hotzone settings. Navigation. Settings for navigating the

Reader App. 

Resolution. Controls the size of the area in

which the page is displayed. 

Tracking. Settings for analytics services.

Each group is described in the following sections.

33

Appendix E The DMSettings File

Table 2. DMSettings option - compared by Reader App Feature Enable partial page sharing Share page Share Toolbar Enable share toolbar Enable twitter Enable facebook Enable email sharing Force non-progressive downloads Resumable downloads Subscriptions Switch to library after login Library cache time Disable offer in portrait mode Open subscription page in Safari Store Enable subscribe button Enable existing subscriber button Reset password License agreement Privacy notice Customer service Default to gridview in store Enable filter iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                    

                    

                    

                    

(Continues on next page)
34

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature Enable 3G Downloading Store (Continued) HTML Store URL HTML Store fallback URL Enable external subscription server Always open in store Enable audio control in toolbar Enable bookmarks in toolbar Show toolbar on opening issue Always show toolbars Bottom toolbar always on ToolbarItems itemX Buy Navigation itemX Library itemX Magazine itemX Home item4 TOC itemX External Back itemX Help itemX FlipView itemX Feed itemX Account iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                    
35

                    

                    

                    

(Continues on next page)

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature ToolbarItems (Continued) itemX Custom Button itemXBack itemXForward Enable top toolbar Enable fullscreen newsfeed Start with newsfeed Allow fullscreen object rotation when locked Force fullscreen video orientation Horizontal page navigation Navigation (Continued) Right to left support Scroll sections with two-finger swipe History buttons in bottom toolbar Newsfeed URL Custom Button URL Orientation lock Continue audio within article Back to issue button Enable TOC List in toolbar Top toolbar always on Maximum number of toolbar items iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                    

                    

                    

                    

(Continues on next page)
36

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature Navigation (Cont.) Show FlipView on show Toolbar Page sharing table info text color Page sharing table info color Inpage downloading label color Downloading label color Percentage label color Inpage percentage label color Sign-in disclaimer text color Sign-in license text color Sign-in privacy text color Colors Sign-in remember checkbox text color Sign-in forgot button text color Sign-in submit button text color Sign-in email field text color Sign-in password field text color Sign-in dialog title text color Enable transparent Web Elements TOC selected row color Bookmark selected row color Application toolbar Flipview background color iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                    

                    

                    

                    

(Continues on next page)
37

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature Flipview text Flipview section text color Flipview section text color selected Flipview story name color Flipview story description color Flipview empty thumb border Store colors Library title color Library segment top background color Library segment bottom background color Colors (Continued) Library issue update available color Library segment overview issue name color Library segment overview issue number color Library segment overview cover story color Store toolbar Store subscription title button Store title button Library segment overview download button Store background color Available issues text color Available issues shadow color iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                    

                    

                    

                    

(Continues on next page)
38

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature Store colors Library issue name color Library issue number color Colors (Continued) Library background color Library download bar color Library issue download progress color Library issue download status color Enable native scrolling indicators Percentage label font Inpage percentage label font Downloading label font Inpage downloading label font Sign-in fonts Issue description font Fonts Flipview title font TOC cell story title font TOC cell story description font Bookmark cell issue title font Bookmark cell story title font Bookmark cell story description font iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                   

                   

                   

                   

(Continues on next page)
39

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature Flipview story name font Flipview story description font Store fonts Library title font Library issue download available font Library issue update progress font Fonts (Continued) Library issue download status font Available issues text font Library issue name font Library downloaded bytes font Library issue number font Library segement overview issue name font Library segment overview issue number font Library segment overview cover story font Intents Help TOC Popup height Popup width Popup height Popup width
40

iPad 2.1

Android 1.3 Froyo Honeycomb

HTML5 1.0

                   

                   

                   

                   

TOC Popup

Bookmark Popup

(Continues on next page)

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature Tap bottom to show toolbar Tap top to show toolbar Tap sides to navigate Touch areas Hotzones bottom area height top area height left area width right area width Keep underlying interactive elements active Show story bullet Page scrubber enabled Show flipview header Show story description Show section labels Flipview Thumbs Minimum page thumb height Maximum page thumb height Make thumbs orientation aware Margins Flipview article thumb margin Flipview page thumb margin iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                    

                    

                    

                    

(Continues on next page)
41

Appendix E The DMSettings File

Table 2. Reader App features Reader App (Continued) Feature Pages top margin in flipviewer Flipview (Continued) Flipview thumb margin Show page number Auto open magazine Show progress in megabytes Library Enable login button Enable library filter Enable library segment filter Fitting Fit mode Check device metrics Metrics Device metrics warning URL Device width Device height Device dpi Content Resolution Tracking Web Element Popup Newsstand Content Horizontal Vertical Tracking Scale content to fit screen Open issue on App open iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

                    
42

                    

                    

                    

Appendix E The DMSettings File

3. Overview
The following sections provide a description of each setting. Note that in order to make a feature work, a combination of different settings from different groups is sometimes required. For instance: when using the Content Sharing functionality, the top Toolbar also needs to be displayed. For an overview of which settings to use for a particular feature, see the customization chapters.

3.1 Share Toolbar Settings
The Share Toolbar settings control the Content Sharing functionality.

Enable partial page sharing

Enables/disables the functionality of sharing a part of a page.

Share page

Controls the functionality of sharing the full page. Possible values: 
none. Disables the functionality. full. A screenshot is made of the full screen,

showing the page in its current view. 

thumb. A thumbnail of the page is shared.

(These are the thumbnails as available for the Flipview.)

Enable share toolbar

Makes the Share Content button available in the top toolbar.

Enable twitter

Makes the Twitter service available as an option in the Share Content list.

Enable facebook

Makes the Facebook service available as an option in the Share Content list.

Enable email sharing

Makes the email service available as an option in the Share Content list.

43

Appendix E The DMSettings File

3.2 Store Settings
The Store settings control the Store functionality. These settings are available in the Pro, Framework, Subscriptions, and Apple Subscription Reader projects only.

Enable subscribe button

(Non-iTunes subscriptions only) Enables the Subscribe button in the Subscription section of the Store.

Enable existing subscriber button

Force non-progressive downloads

Forces the Reader App to use the non-progressive download method, by which the issue has to be fully downloaded before the user can start reading. Default setting is off, so that the Reader App uses the progressive download method, by which the user can start reading while most of the issue is downloaded in the background.

(Non-iTunes subscriptions only) Enables the Existing Subscriber button in the Subscription section of the Store.

Reset password

(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server, which stores the link to the Web page where a user can change the password for the subscription account.

Resumable downloads

Controls whether the downloading of a magazine can be broken off and resumed at a later stage.

License agreement

Subscriptions

(Subscription Edition only) Settings related to the Subscription functionality:

(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page on which users can read the license agreement for the offered service.

Privacy notice

Switch to library after login

(Non-iTunes subscriptions only) Allows the user to switch straight to the Library after logging in.

Library cache time

(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to view with information about how the user’s data is gathered, used, and managed.

The time after which issues that are part of a subscription are refreshed in the Library.

Customer service

Disable offer in portrait mode

(Non-iTunes subscriptions only) Hides the offer pane in the Subscription section of the Store when the digital device is rotated to landscape orientation.

(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to access their subscription account details.

Default to gridview in store

Open subscription page in Safari

(Non-iTunes subscriptions only) Opens the page for subscribing to a subscription in the Safari Web browser.

Defines if the Reader App should start the Store in Grid view or Single Issue view.

Enable filter

Enables a filter in the Store view, allowing the Reader App to filter issues as defined by the filter data on the Content Delivery Platform.

44

Appendix E The DMSettings File

Enable 3G Downloading HTML Store URL

Allows downloading via a 3G account. The URL pointing to index-android.html of the HTML Store. Possible values: 
Blank: the packaged HTML store as part of

3.3 Navigation Settings
The Navigation settings control the functionality related to navigating the magazine in the Reader App.

Always open in store

the Reader App build is used points is used

When enabled, the Store is automatically accessed as soon as the Reader App is launched. 

URL: An external Web store to which the URL

Enable audio control in toolbar

HTML Store fallback URL

The URL pointing to a local HTML file. This file is loaded when the HTML Store is not acccessible.

When enabled, the audio control button will appear in the top toolbar. Tapping it will display the audio control, with which the playback of audio files (started manually or automatically) can be controlled.

Enable bookmarks in toolbar

When enabled, the Bookmarks button will appear in the top toolbar. Tapping it will display the Bookmarks list, with which favorite stories can be bookmarked or quickly accessed.

Show toolbar on opening issue

When enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) is automatically displayed as soon as the magazine issue is opened.

Always show toolbars

When enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) will always be displayed, without the user being able to hide them.

Bottom toolbar always on

When enabled, the Navigation bar is always displayed and cannot be hidden by the user.

Toolbar Items

Controls the order and number of the buttons in the Navigation bar. Rearrange the order by dragging/placing each key to its required position. For the Android Reader App v1.x (Honeycomb) version, remember that reordering items lower in the

45

Appendix E The DMSettings File

list can result in these items ending up in the Overflow menu. Default items are: 
Buy. The Store button for accessing the Store. Library. The Library button for accessing the 

Back. (Android Honeycomb only) Places the

Back button in the Action bar. 

Forward. (Android Honeycomb only) Places

the Forward button in the Action bar.

Enable top toolbar

Library. cover.

Enables the Toolbar at the top of the Reader App. 

Home. The cover button for accessing the Magazine. When an issue is open but not

Enable fullscreen newsfeed Start with newsfeed

Enables the Newsfeed to be displayed full screen. Opens the newsfeed page when the App is launched.

currently being viewed (for instance when the Store is being viewed), this button allows the user to return to the issue. of contents page.

Horizontal page navigation 

TOC. The TOC button for accessing the table External Back. Button for returning to

the application in which the Reader App is embedded. page.

When enabled, all pages of all stories are presented next to each other. Navigation needs to be done by swiping horizontally. When not enabled, all pages of each story are presented one above the other. Navigation needs to be done vertically (from page to page) and horizontally (from story to story).

Right to left support 

Help. The Help button for accessing the Help Flipview. The contents button for accessing

Enables the right-to-left support; scrolling through the magazine will be reversed.

Scroll sections with two-finger swipe

the Story Viewer / Page Viewer and the Section Viewer. Newsfeed page.

Can only be used together with Horizontal Page Navigation enabled. When enabled, navigating from one story to another can be done by swiping using two fingers. 

Feed. The Newsfeed button for accessing the Account. The account button for accessing

History buttons in bottom toolbar

the subscription account page.

Places the Back/Forward button in the Navigation bar. When the top Toolbar is enabled at the same time, the Back/Forward buttons are still displayed in the Navigation bar. 

Custom. A button for accessing a Web page

with custom information such as privacy information. The URL to the page is defined by the Custom Button URL setting (see below).

Newsfeed URL

Contains the URL to use for the Newsfeed view.

46

Appendix E The DMSettings File

Custom Button URL

The URL for the Custom View (a Web page with custom information such as privacy information).

Back to issue button

Magazine in package

For enabling/disabling the “Back to Issue” button in the Library. (The “Back to Issue” button in the Store is not influenced by this setting).

(Android Reader App only) Boolean property to indicate that the magazine is packaged into the app. The packaged magazine location is DigiMag�Template\assets\ magazine. Create this folder either in Eclipse or directly on the file system.

Audio keeps playing while swiping from page to page within the same article

Orientation lock

Controls in which modes pages are shown: landscape and portrait mode (default setting), landscape mode only, or portrait mode only. When set to landscape or portrait mode only, the page is not rotated when the user rotates the device.

Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.

Enable TOC List in toolbar Top toolbar always on

For enabling/disabling the TOC List in the top Toolbar. When enabled, the top Toolbar bar is always displayed and cannot be hidden by the user.

Allow fullscreen object rotation when locked

(Android Reader App only) When the Orientation Lock feature is enabled (see above), the “Allow fullscreen object rotation when locked” feature allows objects displayed in full screen mode (such as videos, Slide Shows and Web view overlays) to still rotate when the Tablet is rotated.

Maximum number of toolbar items

Force fullscreen video rotation

Videos displayed in fullscreen mode can be forced to be displayed in landscape mode across the “height” of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly. Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video. In order for this feature to work, the Orientation lock feature (see above) also needs to be enabled. However, this is not necessary when an Android version of the Reader App is used.

(Android Reader App Honeycomb only) Defines the maximum number of items to appear on the righthand side of the Action bar. Maximum number to be set is 6.

Show FlipView on show Toolbar.

Controls whether the Flipview should be shown each time the Navigation bar (Froyo) or Action bar (Honeycomb) is shown.

47

Appendix E The DMSettings File

3.3.1 Color Settings Page sharing table info text color
The title of the info page (the screen shown when the user needs to make a choice of sending a full page or a part of a page).

Sign-in forgot button text color

(Non-iTunes subscriptions only) Color of the “I forgot my password” title in the Sign-in dialog box.

Sign-in submit button text color

Page sharing table info color

(Non-iTunes subscriptions only) Color of the Submit button label in the Sign-in dialog box.

The background of the info page title area (the screen shown when the user needs to make a choice of sending a full page or a part of a page).

Sign-in email field text color

(Non-iTunes subscriptions only) Color of the “Email Address” title in the Sign-in dialog box.

Inpage downloading label color Downloading label color

Color of the Downloading label on a page. Color of the Downloading label in the Page Viewer / Story Viewer.

Sign-in password field text color

(Non-iTunes subscriptions only) Color of the “Password” title in the Sign-in dialog box.

Sign-in dialog title text color

Percentage label color

(Non-iTunes subscriptions only) Color of the text in the Sign-in dialog box header.

Color of the download percentage label in the Page Viewer / Story Viewer.

Enable transparent Web Elements

Inpage percentage label color Sign-in disclaimer text color

When enabled, the background of Web elements will be transparent.

Color of the download percentage label on a page. (Non-iTunes subscriptions only) Color of the disclaimer title in the Sign-in dialog box.

TOC selected row color

The color of the selected story in the TOC List.

Bookmark selected row color

Sign-in license text color

The color of the selected Bookmark in the Bookmarks List.

(Non-iTunes subscriptions only) Color of the “License agreement” title in the Sign-in dialog box.

Application toolbar

The color of the Navigation bar and the top Toolbar.

Sign-in privacy text color

(Non-iTunes subscriptions only) Color of the “Privacy” title in the Sign-in dialog box.

Flipview background color

Sign-in remember checkbox text color

The color of the Flip View background, shown behind the story previews. To get a transparent color, set an alpha value lower than zero.

(Non-iTunes subscriptions only) Color of the “Remember Me” title in the Sign-in dialog box.

Flipview text

The color of the Flip View header and issue description shown at the top.

48

Appendix E The DMSettings File

Flipview section text color

The color of the text in the Section viewer.

Library segment overview download button

Flipview section text color selected

The color of the Issue Download button on the Library Segment Overview page.

The color of the text in the Section viewer in its selected state.

Library download bar color

Color of the download bar for an issue in the Library.

Flipview story name color

The color of the Story title below the story preview.

Library issue download progress color

Flipview story description color Flipview empty thumb border

Color of the string that indicates the progress of the download.

The color of the story description below the story preview. Color of the border for an empty thumbnail in the Page Viewer / Story Viewer.

Library issue download status color

Color of the string that shows the status of the download.

Store toolbar

Store colors: Store title color

The color of the store toolbar.

The color of the Store title (in the top navigation bar).

Store subscription title button

Library segment top background color

The color of the Subscribe and Existing Subscriber button labels.

The background color of the top area of the Library Segment Overview page.

Store title button

Library segment bottom background color

The color of the Buy, Preview, Submit, Download and Pause button labels.

The background color of the bottom area of the Library Segment Overview page.

Store background color

Library segment overview issue name color
The color of the issue name on the Library Segment Overview page.

The background color of the Store (visible when no shelves are visible, in case you have no issues bought or when there is no internet connection available).

Available issues text color

Library segment overview issue number color

The color of the ‘Available issues:’ header at the top of the issues grid.

The color of the issue number on the Library Segment Overview page.

Available issues shadow color

Library segment overview cover story color

The color of the shadow of the ‘Available issues:’ header at the top of the issues grid.

The color of the cover story title on the Library Segment Overview page.

Library issue name color

The color of the issue name in the Library.

49

When enabled. License text font.Appendix E The DMSettings File Library downloaded bytes color The color of the string that indicates the download progress in bytes.3. Library issue number color Library background color The color of the issue number in the Library. The font of the “I forgot Submit button font. Sign In fonts (Non-iTunes subscriptions only) Font setting for fonts of the subscription Sign In dialog box: Disclaimer text font. the edges of the frame on those sides to which the content can be scrolled appear faded. my password” text in the Subscription Sign In dialog box. The font of the Submit 50 . The font of the downloading label in the Page Viewer / Story Viewer. The color of the Library background. The font of the Remember Me text in the Subscription Sign In dialog box. text in the Subscription Sign In dialog box. in the Subscription Sign In dialog box. The font of the Privacy text Remember checkbox font. The font of the percentage label in the Page Viewer / Story Viewer. Forgot button font. The font of the License Privacy text font. Enable native scrolling indicators Inpage percentage label font Percentage label font Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content. The font of the percentage label on a page. 3. the top and bottom sides of the frame become faded. the left. for Scrollable Areas in which the content can be scrolled vertically. For example: for Scrollable Areas in which the content can be scrolled horizontally.and righthand sides of the frame become faded.2 Font Settings Inpage downloading label font Downloading label font The font of the downloading label on a page. The font of the Disclaimer text in the Subscription Sign In dialog box. button label in the Subscription Sign In dialog box.

Password box in the Subscription Sign In dialog box. Flipview story description font Bookmark cell issue title font Bookmark cell story title font The font of the story description in the Flipview. TOC cell story title font Library downloaded bytes font Library issue number font The font of the story title in the TOC list. The font of the Email box in the Subscription Sign In dialog box. Subscription Sign In dialog box. TOC cell story description font Flipview story name font The font of the story description in the TOC list. The font of the ‘Available issues:’ text. The font of an issue in the Library. Library issue download progress font Library issue download status font Available issues text font Library issue name font The font of the download progress label in the Library.Appendix E The DMSettings File Email field font. The font of the issue title in a Bookmark. Bookmark cell story description font The font of the story description in a Bookmark. The font of the story name/title in the Flipview. 51 . Flipview title font Font settings for the Story Viewer / Page Viewer title. The font of the title of the Issue description font Font settings for the issue description in the Flipview header. The font of the downloaded bytes label in the Library. Library segment overview cover story font The font for the cover story title on the Library Segment Overview page. Library segment overview issue font color The font for the issue number on the Library Segment Overview page. The font of the issue number in the Library. The font of the The font of the Store title (in the top navigation bar). Store fonts: Store title font Password field font. The font of the download status label in the Library. Dialog title font. Library segment overview issue name font The font for the issue name on the Library Segment Overview page. The font of the story title in a Bookmark.

the value of the corresponding Intents property also has to be changed to match this custom value. Used to link the page with Help instruc- 3. tions to the Help button in the Navigation bar. The following default intent names are used: Help. in the Navigation bar.Appendix E The DMSettings File 3.5 TOC Popup Settings The TOC Popup settings control the settings of the TOC List. Popup height Popup width Defines the height of the TOC List. When a custom value is used in Enterprise. Defines the width of the TOC List. TOC. Used to link a story to the TOC button 52 .4 Intents Settings The Intents property acts as an array to convert Enterprise intent names to Reader App intent names.

Appendix E The DMSettings File 3. Touch areas Defines the height or width of the different Hotzones. or bottom of the screen which can be tapped in order to navigate the magazine). right. When tapped. the functionality of interactive elements (such as Slide Shows. top area height. bottom area height.6 Bookmark Popup Settings The Bookmark Popup settings control the settings of the Bookmarks List. Keep underlying interactive elements active When enabled. Defines the width of the Bookmarks List. the Navigation bar and optionally the top Toolbar will appear. left area width. not the clickable areas on a desktop PC/laptop. videos. etc) which are 53 . Tap bottom to show toolbar Activates the bottom Hotzone. For the HTML5 Reader App. the user will be navigated to the next or previous story/page respectively (depending on the type of navigation which has been chosen). Defines the height of the bottom Hotzone. Popup height Popup width Defines the height of the Bookmarks List. Hotzone. Tap top to show toolbar Activates the top Hotzone. When tapped. Defines the width of the right Hotzone. (iPad/Android Reader App only) Defines the height of the top Hotzone. these zones refer to the areas on touchscreen devices. the Navigation bar and optionally the top Toolbar will appear. When tapped. Tap sides to navigate Activates the Hotzones to the left and right of the screen. 3.7 Hotzone Settings The Hotzone settings control the settings of the Hotzones (areas to the left. Defines the width of the left right area width.

Page scrubber enabled Defines whether or not the Page Scrubber should be enabled. Show flipview header Defines whether or not the Flip Viewer header should be shown (if not. The mini- mum height of a thumbnail in the Flip Viewer. Show section labels Defines whether or not the Section Viewer is shown in the Page Viewer. the Title. likewise. When enabled. mum height of a thumbnail in the Flip Viewer.8 Flipview Settings The Flipview settings control the settings of the Flipview. the orientation of the thumbnails is matched with the orientation in which the device is held (only landscape thumbnails are displayed when the device is held in landscape orientation. Show story description Defines whether or not the description of a story is shown in the Page Viewer. only portrait thumbnails are displayed when the device is held in portrait orientation 54 . Thumbs The definition of various thumbnail sizes. Minimum page thumb height. Maximum page thumb height. Description and Close button of the Flip Viewer disappear).Appendix E The DMSettings File obscured by a Hotzone can be accessed and is not blocked by the overlaying Hotzone. Show story bullet Defines whether or not a ‘bullet’ should be shown next to each issue name in the Flip Viewer. The maxiMake thumbs orientation aware. 3.

(Android Reader App only) Defines whether or not the page number should be displayed below the page preview. The following conditions exist: The Library must be viewed at the time the Honeycomb only) Controls the margin between images (pages). Pages top margin in flipviewer. Enables the Library filter in the Library. (Android When the download is performed in the back- Show page number ground (for instance when the app is minimized or when another issue is being viewed). Auto open magazine Flipview thumb margin. The margin Flipview page thumb margin. (Android Opens an issue or Segment automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). between the thumbnails in the Flip Viewer.9 Library Settings The Library settings control functionality of the Library. Honeycomb only) Controls the margin between articles (stories). 55 . Enable login button Enable library filter Enables the Log In/Log Out button in the Library. The margin 3. Enable library segment filter Enables the Library Segment filter available in the Library.Appendix E The DMSettings File Margins Defines different margins for adjusting the layout of the Flipview. the issue will not automatically open. download is completed. Show progress in megabytes (Non-progressive downloads only) Shows the download progress both in megabytes as in percentages. Flipview article thumb margin. between the top of the issue thumbnails and the start of the Flip Viewer header.

Appendix E The DMSettings File

3.10 Metrics
When a magazine is read on a device for which it hasn’t been designed (in terms of dimensions), it is likely that it will not properly fit the screen. The Metrics settings provide a method for dealing with such scenarios: 
The method of page scaling can be specified The user can be informed by displaying a 

Fit screen disproportionately. The

page will be made to fit the dimensions of the screen exactly. This could result in the content of the page looking stretched or squashed.

Check device metrics

Controls whether the metrics of the device are checked.

Device metrics warning URL

message

URL to the Web page to be displayed. When left empty, the default Web page in the following location is used: 
assets/devicewarning/warning.html

Fitting

The fitting option allows you to specify how pages should be made to match the screen. For notes about the functionality of the page fitting feature in relation to using specific DM Server plugins, see chapter 6, Exporting Content – 3.1, Exporting and Page Scaling. 
Fit mode. Possible values: Fit width. (Default setting) On a device

Feel free to modify this page to your needs.

Device width

The required width of the device. Default values are: 1024 px (Reader App v1.x (Froyo) 1280 px (Reader App v1.x (Honeycomb)

Device height

The required height of the device. Default values are: 600 px (Reader App v1.x (Froyo) 800 px (Reader App v1.x (Honeycomb)

which is smaller than the page dimensions, the page is scaled down to fit the width of the screen. This might result in the user having to scroll vertically to see the rest of the page.

Device dpi 

Fit screen. The page will be scaled to fit

The dpi setting which the device runs in (so not the physical dpi). Examples: Samsung Galaxy: 240 dpi Motorola Xoom: 160 dpi

the screen. If the aspect ratio (width versus height) of the screen is different than the ratio for which the page was designed, this can result in “letterboxing” or “pillarboxing” (black bars appearing along the side, top, or bottom of the screen).1

Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
1

56

Appendix E The DMSettings File

3.11 Content
The Content settings determine the location of the magazine’s source files.

3.12 Resolution
The Resolution settings control the size of the area in which the page is displayed.

Magazine Configuration URL

Location of the issue.json configuration file. Default setting: 
./content/

Height

Determines the height of the area (in pixels). Default setting: 754.

Width

Magazine Content URL

Location of the magazine content (the images and pages folders). Default setting: 
./content/

Determines the width of the area (in pixels). Default setting: 1028. When the dimension of the page is larger than the area in which it is displayed, scroll bars will appear.

57

Appendix E The DMSettings File

3.13 Tracking
The Tracking settings hold specific settings for services which track user interaction with the Reader App, such as Google Analytics.

3.14 Web Element Popup
The Web Element Popup settings control the settings of the Web Element pop-up.

Scale content to fit screen

When enabled, the displayed HTML page is scaled to fit the Web Element pop-up.

58

Appendix E The DMSettings File

3.15 Newsstand
The Newsstand settings control the settings of iOS 5’s Newsstand feature.

Open issue on App open

Ensures that the correct issue is opened in the Reader App when tapping an issue in the Newsstand.

59

F Using the Content Delivery Platform
The Content Delivery Platform (CDP) is used for managing and distributing magazine content via the Store functionality of the Reader App. This appendix explains how to use the Content Delivery Platform. The steps described in this appendix apply to using the interface as found in the hosted solution; when using the licensed version, the screens may look and work differently.

1. Logging In and Logging Out Logging in
To log in to the Content Delivery Platform, do the following: Step 1. Enter the link for your area in your Web browser: 
Europe: https://cds.woodwing.net United States:

https://us-east-cds.woodwing.net 

Asia: https://apac-cds.woodwing.net

Step 2. Enter the received password and username. Step 3. Click Log In or press Enter. After logging in, the last visited tab is displayed.1

If the Cookie has not been set or if the Cookie is cleared, the Publication tab will be loaded
1

60

Appendix F Using the Content Delivery Platform

Logging out

To log out of the Content Delivery Platform, do the following: 
Click Logoff <user name> in the top right-

2. System Structure
The Content Delivery Platform platform has the following main structure: At the highest level, a Domain is defined, usually represented by the publishing company name. Each Domain consists of: 
Users. The users who need to work within the

hand corner of the screen.

CDP environment. 

Devices (also referred to as Development

Devices) Used for testing a digital magazine without making the magazine public. are distributed (such as Reader Apps and Newsfeed Apps). 

Apps. Representing the actual apps that

For each Reader App, the following can be defined: 
Issue. The actual magazine content as a full

magazine (compare with Segments below). 

Segment. The actual magazine content

provided in separate sections (compare with issue above), usually grouped by category. Examples: Business, Sports, Fashion, etc. Each Segment is downloaded and read separately; all Segments together make up the full magazine issue. 

Rendition: a variation of a magazine,

designed for a specific resolution and screen depth. Renditions are defined as part of a Display (see below) and issue/Segment (see above). In more general terms: the issue or Segment as exported from Content Station is treated by the Content Delivery Platform as a Rendition.

61

Appendix F Using the Content Delivery Platform 

Display. A representation of one or more

devices, all sharing the same resolution and screen depth. A Display has one Rendition assigned. The Rendition which is assigned to the Display does not have to perfectly match that Display. For example, the page scaling feature of the Android Reader App allows a Rendition to be viewed on Displays which are smaller or larger than what the Rendition has been designed for. This method of working allows you to use the same Rendition for different devices (each with specific resolutions and/ or screen depths), instead of having to create separate Renditions for each. 

Apple Subscription offers. Used as labels

in the Subscription buttons in the Store. 

Push notifications. Messages to be sent to

a Reader App or to Apple’s Newsstand. 

Subscription Servers. Information relat-

ing to Subscription Servers such as the Apple iTunes Subscription Server. Store filter and the values used in the Filter list.

Figure 2. The Publication Overview pane shows the main components of the structure and allows to quickly access a component. Shown here are a Domain (WoodWing), a Reader App (Gulls Monthly), containing two issues (March and February). The March issue contains 2 Segments which are further divided in Displays. The February issue does not contain Segments. 

Filter name and values. The name of the Segment Filters. The values used in the

Library Filter.

62

Appendix F Using the Content Delivery Platform

2.1 Accessing the Components
The components of the CDP structure can be accessed through different areas of the Content Delivery Platform. Each area is represented by a tab at the top of the screen:

Manage

(Only available for System Maintainers) For accessing the following components: 
Domains. For managing Domains. Displays. For managing Displays. Renditions. For managing Renditions.

Publication

For accessing the following components: 
Publication Overview, showing the Domain,

Application, Issues, Segments, and Renditions. Issues are sorted by publication date in ascending order (oldest shown last).

My Account

For accessing the following components: 
User. For changing the user details of the cur-

Application

rently logged in user.

For accessing the following components: 
Application Maintenance. For managing

Reader Apps. 

Push Notifications. For sending mes-

sages to published Reader Apps or to Apple’s Newsstand. iTunes Subscriptions and non-Apple iTunes Subscriptions. 

Subscriptions. For managing Apple

General

For accessing the following components: 
Device Maintenance. For managing devel-

opment devices. 

Global Device Maintenance. (For a hosted

service, access to this area is only available to WoodWing) For managing global development devices. accounts. 

User Maintenance. For managing user

63

Appendix F Using the Content Delivery Platform

2.2 User Types
The system defines three types of users: 
System Maintainer. Can make changes

The table on the next page outlines the tasks which can be performed by each type of user. (System Maintainers and System Admins may have additional tasks other than those described here.) The information in this appendix is aimed at General Users, using an environment hosted by WoodWing. When a task needs to be performed which cannot be done by a General User, instructions are given for providing WoodWing with the relevant information so that they can perform the task for you.

to all components of the system (on all levels), but primarily manages Domains, Displays, and Renditions. (For a hosted service, the System Maintainer is WoodWing.) 

System Admin. Can make changes to all

components of the system (except the components of the Manage tab) but only as part of the Domain(s) which the System Admin has access to. (For a hosted service, the System Admin is WoodWing.) the Domain to which the user has been given access to. 

General User. Can perform general tasks in

64

Appendix F Using the Content Delivery Platform

Table 2.2. CDP access rights Tab Area Publication Overview Component Issue Publication Segment Rendition Task Add/delete/edit Add/delete/edit/sort Add/delete/edit (as part of issue or Segment) Add Edit Delete Application Application Maintenance Application Metadata Push Notifications Apple Subscriptions Device Maintenance General Global Device Maintenance User Maintenance Minimum version control Managing Library Filters Managing Displays Rendition Mapping View Add/edit/delete Add Certificate Key Write message Add/delete/edit Add/delete/edit Add/delete/edit Add/delete/edit System Maintainer System Admin General User

                 

                 

    1             

Message Subscription Device Device User

(Continues on next page)
1

A limited number of properties only. 65

Appendix F Using the Content Delivery Platform

Table 2.2. CDP access rights (continued) Tab Manage Area Domains Displays Renditions Component Domains Displays Renditions Task Add/delete/edit Add/delete/edit Add/delete/edit Add My Account User Account User Edit Delete System Maintainer System Admin General User

     

     

     

66

Make sure to include a valid Purchase Order. Each task is outlined in the following sections. the system has to be set up with the required components. Managing the CDP Environment. Setting Up the CDP Environment When using the CDP environment for the first time. do the following: Send an e-mail to sales@woodwing. use the tasks as outlined in section 4.Appendix F Using the Content Delivery Platform 3.1 Adding a Domain Managing Domains is a task of the System Maintainer (in a hosted service.com. This is done by performing the following tasks: Adding a Domain Adding an Reader Application Adding a user Adding an issue Adding a subscription Adding a Development Device 3. 67 . stat- ing the request. If your CDP environment is already set up. this is WoodWing). To have a Domain added.

When required.2 Adding a Reader Application Managing Reader Apps is a task of the system administrator (WoodWing). each defined on the Content Delivery Platform defined on the Content Delivery Platform A product ID for the Reader App. Rendition of a Reader App can be given its own minimum version number. Fill out the form and return it to WoodWing. it will overrule the Reader App minimum version number. To have a Reader App added. Segments will always be assigned the minimum version number of the Rendition that they are part of. You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform. com stating that you would like to distribute a Reader App by making use of the Content Delivery Platform. (This version number will be applied to all issues which are subsequently uploaded to that Reader App. When a minimum version number is defined for a Rendition. Step 2.Appendix F Using the Content Delivery Platform 3. Minimum version numbers cannot be defined on Segment level. as The Application version of the Reader App. the Reader App minimum version number is used. as Reader Apps and minimum versions Version numbering is defined on the following levels: Reader App level. when no minimum version number is defined for a Rendition. do the following: Step 1.) 68 . Send an e-mail to services@woodwing. This is the highest level and acts as the default for all Renditions defined for that app. WoodWing will process the request for you and provide you with the relevant settings required for building a Reader App with Store functionality: The Content Delivery Platform URL A secret key for the Reader App. Rendition level.

see section 4.) Each is described in the following sections. 3.2 Editing a User Profile.9.Appendix F Using the Content Delivery Platform 3. 69 .4 Adding an Issue Once the CDP environment has been set up for you. Content can be delivered in two ways: As an issue containing the full content As an issue divided into Segments com. (For more information. you are ready to add your magazine content. do the following: Send an e-mail to services@woodwing. make sure that the user changes this to a personal password by modifying its account details. stating the request. Include the following information: Full name E-mail address An initial password will be provided. To have a user added.3 Adding a User Managing Users is a task of the system administrator (WoodWing).

1 Adding a Full Issue A full magazine issue is one without Segments: the full magazine content is offered as a single download (this in contrast to an issue which is made up of Segments which allows the user to download the magazine in separate segments). Step 4g. Filter.2 Adding an Issue in Segments.) To make the issue available immediately. (See chapter 14. followed by Add Issue. (Optional) A short description of what the issue is about. Enter the details pertaining to the issue: Step 4a.) To add an issue without segments to the Content Delivery Platform. From the toolbar at the top of the Publication Overview pane. Name. Distributing Reader Apps With Store – section 4. see section 3. perform the following steps: Segments cannot be added at a later stage (applies to full issues only).1 Registering With iTunes Connect. choose a filter option. click Add. This ensures that when a user chooses this option from the Store 70 Step 2. Step 4. Free or Subscription-only issues: Step 4c. this will be displayed in the Store. (Optional. In the Publication Overview pane. when Segments are to be used. Step 4f. select the Reader App to which the issue needs to be added. Payment Type.4. Description.) Step 4d. For more information about adding a magazine in Segments. leave the date & time as is.) the ID for the issue that will be used for reporting. make sure to include them when setting up a full issue as explained in the steps below. only when defined for the Reader App) From the Filter list.4. Subtitle. On the main screen. Enter one of the following: Paid issues: (iPad Reader App ver- sion only) The ID that was defined for the issue’s in app purchase in iTunes Connect. Date and time. The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam. Product ID. Step 1. Name of the issue used in the Content Delivery Platform and on the development device. (Note that the Reference Name for the issue’s in app purchase as defined in iTunes Connect is shown in the Store.xml file images folder other folders where applicable Subscription Step 4b. (Optional) The subtitle to be displayed in the Store. Step 3. choose the type of payment to use: Paid Free .Appendix F Using the Content Delivery Platform 3. Step 4e. Prepare the magazine upload file by creating a ZIP file or ofip file containing the following: magazine. the Add Issue screen appears.

Step 7b. In case a different minimum version number needs to be used. choose the iPad Rendition here. the Save button will stay unavailable. Click Add. Until a valid file has been offered. Resolve these as needed. Click Save & Finish to upload the files to the Content Delivery Network. see Reader Apps and minimum versions). Step 6. When choosing a Rendition from the list. Leave set to No. The content of the uploaded file is verified and the results are displayed in the Report box. Click on a preview to view it in full size in a new window. Upload the images for the cover and preview (any page of the magazine that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. Step 7c. The value used is the value as defined on the Reader Application page (for more information. Step 4h. 71 . If the validation fails. C h o o s e t h e Rendition which is representative for the issue. The upload will start. Click Browse to locate the magazine upload file created in Step 1 and click Open. that the issue is included in the search results. manually change the value. The Issue is added to the Publication Overview pane and in the main window. Step 7. Uploading the images can be done while the issue content is being uploaded. The default minimum version for the selected Rendition is automatically set when the page is loaded and each time a Rendition is chosen from the Rendition list. Click Add Rendition. The progress is visualized by a progress bar. Step 8. possible reasons are provided. Upload File. Segments. Step 9. Enter the details pertaining to the Rendition: Step 7a. Step 5. Click Save. In other words: when the issue is primarily aimed at viewing it on an iPad. you don’t have to wait for the upload to be completed. The Deploy window appears with a summary of the files that are to be uploaded. the page is refreshed and the value in the Reader App Minimum Version box is updated (See Step 7b). R e n d i t i o n . the Issue screen appears. The Add Rendition screen appears. Step 7d.Appendix F Using the Content Delivery Platform Filter. Reader App Minimum Version.

4. Payment Type. Step 4. In the Publication Overview pane. the Add Issue screen appears. Step 3. On the main screen. Prepare the upload files by creating a ZIP file or ofip file for each Segment. Step 10. see section 3. From the toolbar at the top of the Publication Overview pane.xml file images folder other folders where applicable Phase 1.4. Step 2. Enter the details pertaining to the issue: Step 4a. Each file should containing the following: magazine.) When adding an issue containing Segments. For more information about adding a full magazine. select the Reader App to which the issue needs to be added. As soon as all files are uploaded. The process is hereby complete. 3.2 Adding an Issue in Segments When a magazine is made up of Segments. The Rendition screen appears. the user can download the magazine in separate Segments (this in contrast to a complete issue.1 Adding a Full Issue. followed by Add Issue. click Add. an empty issue is defined in the system first to which all required segments are added. where the full magazine is always downloaded in full). choose the type of payment to use: Paid Free Subscription 72 . Click OK to close the window. Step 1.Appendix F Using the Content Delivery Platform The Deploy screen now shows progress bars with which the upload process can be followed. The first part of the process is the creation of the empty issue to which the Segments will be added. the OK button becomes available.

Name of the issue used in the Content Delivery Platform and on the development device. Enter one of the following: Paid issues: (iPad Reader App ver- Step 4h. (Optional. Distributing Reader Apps With Store – section 4. Enter one of the following: Paid issues: The ID that was defined sion only) The ID that was defined for the issue’s in app purchase in iTunes Connect. Segments. choose a filter option. Free or Subscription-only issues: Step 4c. This ensures that when a user chooses this option from the Library Filter. Filter. 73 for the issue’s in app purchase in iTunes Connect.) To make the issue available immediately.) Step 4d. leave the date & time as is. Click Add. Step 5. the Renditions appear which have been defined in the system by WoodWing.Appendix F Using the Content Delivery Platform Step 4b. Click on a preview to view it in full size in a new window. Phase 2. the Issue screen appears. Step 4e. The next step of the process is to add the Segments to the created issue. Step 4g. that the issue is included in the search results. Select Yes. followed by Add Segment. Distributing . The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam. Subtitle. (See chapter 14. Enter the details pertaining to the Segment: Step 9a. Step 6. Add the previews for the Rendition to which the Segment should belong in the specified dimensions by using the respective Add/ Change buttons. (Optional) The subtitle to be displayed in the Store. In the Publication Overview pane. The Issue is added to the Publication Overview pane and in the main window.) the ID for the issue that will be used for reporting. In the bottom half of the screen. (Note that the Reference Name for the issue’s in app purchase as defined in iTunes Connect is shown in the Store. select the Issue to which the Segment needs to be added.) Step 9. one by one. Description. Name. this will be displayed in the Store. click Add. (See chapter 14. Step 7.1 Registering With iTunes Connect. Step 8. The Add Issue screen appears (a Segment is essentially an Issue. Step 4f. Date and time. Product ID. Product ID. (Optional) A short description of what the issue is about. only when defined for the Reader App) From the Filter list. From the toolbar at the top of the Publication Overview pane.

choose a filter option. Click Browse to locate the Segment upload file created in Step 1 and click Open. the Save button will stay unavailable. click Add Rendition. Filter. Step 10. If the validation fails. . Name. The content of the uploaded file is verified and the results are displayed in the Report box. Upload File. (For more information. The progress is visualized by the progress bar. The Segment is added to the issue in the Publication Overview pane and in the main window. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. Step 11d. (Note that the Reference Name for the issue’s in app purchase as defined in iTunes Connect is shown in the Store. when defined for the Reader App) From the Filter list. Cannot be change d for Segments. 74 the ID for the issue that will be used for reporting. C h o o s e t h e Rendition on which the issue is to be viewed.1 Registering With iTunes Connect.) Step 11c. that the Segment is included in the search results. Until a valid file has been offered. Step 11b. The Add Rendition screen appears. (Optional) A short description of what the Segment is about. Step 9e. Uploading the images can be done while the Segment content is being uploaded. possible reasons are provided. Enter the details pertaining to the Rendition: Step 11a. Step 9f.) Free or Subscription-only issues: Step 11. Description. R e n d i t i o n . This ensures that when a user chooses this option from the Segment Filter.Appendix F Using the Content Delivery Platform Reader Apps With Store – section 4. Click Add. you don’t have to wait for the upload to be completed. The upload will start. this will be displayed in the Store. (Optional) The subtitle to be displayed in the Store. To each Segment. (Optional.) Step 9c. Resolve these as needed. The minimum version number used is the number set for either the Reader App or the Rendition. R e a d e r A p p M i n i m u m Ve r s i o n . On the Issue screen. Click on a preview to view it in full size in a new window. the Issue screen appears. Step 9d. content intended to be used for specific Renditions is to added. Step 9b. Name of the issue used in the Content Delivery Platform and on the development devices. see Reader Apps and minimum versions. Subtitle.

Step 3f. 3. Click OK to close the window. Step 14. (Optional) Repeat Steps 2 – 13 to add as many Segments to the issue as required. Step 12. Enter the iTu n es S h a r e d Secret. From the toolbar at the top of the Application pane. Click Save. All added Segments are now also listed on the Issue page. The Deploy window appears with a summary of the files that are to be uploaded. Do the following: Step 3a. Step 3d. Additional fields appear. Click Save & Finish to upload the files to the Content Delivery Network. Step 2.3 Editing an Issue. In the Apple Subscriptions section of the Application pane. Step 3b. Step 3e. details of this service need to be entered into the Content Delivery Platform so that both systems can properly communicate with each other. select the Reader App to which the iTunes subscription needs to be added. In the Application Maintenance section of the Application pane.Appendix F Using the Content Delivery Platform Step 11e. (Optional. Add the following information: 75 . Click Save. Step 3. As soon as all files are uploaded. To add a Subscription Service. see section 4. An additional field appears. For more information. In the iTunes Subscription section.4. the OK button becomes available.3 Adding a Subscription When making use of a Subscription Service. for adding an iTunes Subscription only).2. click Add. click Yes. The process is hereby complete. Step 3c. The Deploy screen now shows progress bars with which the upload process can be followed. Click Edit. Step 13. select the Reader App to which the subscription needs to be added. perform the following steps: Step 1. The Rendition screen appears for the created Segment.

click Add.Appendix F Using the Content Delivery Platform Product ID: The product ID as defined in iTunes Connect. 180 days. Enter the Subscription Server URL. etc.5 Adding a Development Device Now that your Reader App and content is available in the system. Choose the S ubscript ion failover behavior. The Add Device screen appears. To assign a Development Device to a Reader App. 76 . Click Save. From the toolbar at the top of the General pane. perform the following steps: Step 1. Additional fields appear. Add the following information: Device ID: The ID of the device. Click Add. In the General pane. all issues that are part of that Reader App will be available for free (including those which are not yet public). This can be done by assigning a tablet or other device to a Reader App in the system. Do the following: Step 4a. choose the Domain to which the Device needs to be added. In the Subscription section. you might want to test it before the content is made public. This works the same as the product identifier for issues. Step 2.) When accessing the Reader App on such a device. for adding a non-iTunes Subscription only). Step 4b. Step 4d. (Such devices are referred to as Development Devices. comments to clarify the use of the device Step 4. Step 4. Step 4c. Repeat steps 3e – 3g to add additional offers as required. Click Add. appear on the buttons on the Offer page (for example: 90 days. Step 3h. click Yes.) 3. (Optional. Device Comment: (Optional) Additional Description: the offer as it should Step 3g. Step 3.

stating the request. nlkiosk.1 Configuring the Metadata. you can manage it by performing the following tasks: Configuring Reader Apps Managing issues Managing Segments Managing Renditions Managing Subscriptions Managing HTML5 conversions Managing Development Devices Sending Push notifications (messages) Managing users 4. App configuration. Change any of the following properties: If you do not have permission to change these properties yourself. Host: The host as used in the Reader In the following example. (Make sure to include what the change should be. see section 4.net/reader/ json/ 77 . The full host URL should then be as follows: https://nlkiosk.Appendix F Using the Content Delivery Platform 4. perform the following steps: For viewing and/or configuring the metadata of the app. If you are using the CDP for the first time and your environment is not yet in place. Step 1. stating the request: Managing Domains Managing Reader Applications Managing Renditions on a system level Managing Displays Adding/removing users be received by the CDP from the Reader App) or Disabled (calls will not be received by the CDP from the Reader App). etc.com.1 Configuring Reader Apps To configure a Reader App. Step 3. Click Edit.woodwing.com. The Reader App screen appears. Step 2. The following tasks cannot be performed by a General User. deleted..) Type: type of App: Reader or Newsfeed. select the Reader App which needs to be configured.1. send an e-mail to services@woodwing. if these need to be managed (changed. net is used as the host. In the Application Maintenance section of the Application pane. Managing the CDP Environment Once your environment is in place.woodwing. use the tasks as outlined in section The Content Delivery Platform (CDP) is used for managing and distributing magazine content via the Store functionality of the Reader App. Status: status of the app: Active (calls will Each task is described in the following sections.) contact WoodWing by sending an e-mail to services@ woodwing.

By default. enter the iTunes Shared Secret. Segment Filter: availability. For more information. Only magazines which are uploaded after the encryption functionality has been enabled for that Rendition are encrypted. see Reader Apps and minimum versions. enter the Filter Name (name as displayed on the issue page) and the Filter values. Android Market: availability. Click Save. (For more information. enter the Filter values. Step 4h. Name: name of the app. Subscriptions: availability. When choosing Yes. Step 4b. iTunes Subscriptions: availability. Step 4e. Store/Library Filter: availability. Magazine Encryption. the minimum version as set for the Reader App itself is used for each Rendition. Step 4a. B l a c k b e r r y A p p Wo r l d : availability. Rendition Minimum Version. for the app. enter one here. enter the Android Market Public Key. Step 4. Default Rendition: the default Rendition Step 4g. If a Rendition requires a different minimum version number. Step 4f.Appendix F Using the Content Delivery Platform Product ID: the unique product ID for the app. Change any of the following fields (as applicable to the type of Reader App used): Step 4a. For important information about using encryption. 78 . Step 4c. Step 4d. enter the Subscription Server URL and define the Subscription failover behavior. When choosing Yes. see section 6. Rendition Encryption: select the Rendition(s) which content need to be encrypted. already uploaded magazines are not encrypted.) Step 5. Reader App minimum version. iTunes Store: availability. see section 3. Step 4i. When choosing Yes.2 Adding a Reader Application. Display Mapping: choose the Rendition to use when the Reader App is used on the specified device. When choosing Yes. When choosing Yes.

4. click Save.2 Managing Issues Issues can be managed in the following ways: Add Delete Edit Add Rendition Convert to HTML5 Each is explained in the following sections. Step 2.2. To edit the metadata. The Metadata screen appears.Appendix F Using the Content Delivery Platform 4. perform the following steps: Step 1. Step 5. The Reader App screen appears. Click Metadata. In the Application Maintenance section of the Application pane.4 Adding an Issue. 4. select the Reader App which needs to be configured.1. click Edit. Step 3. Modify the metadata as required.1 Adding an Issue For information about adding an Issue. 79 . Step 4. see section 3.1 Configuring the Metadata In order to view and/or edit the Reader App metadata. When ready.

In the Publication Overview pane.Appendix F Using the Content Delivery Platform 4. the issue. select the issue which needs to be deleted.3 Editing an Issue To edit an issue. Step 2. Click Delete Issue.2. the old files need to be purged.2 Deleting an Issue To delete an issue. Send an e-mail to services@ woodwing. The issue screen appears. Change the magazine content or any of the previews. In the Publication Overview pane. Step 2. Please include the product ID and names of the files which have changed. select the issue which needs to be edited.2. When either is done. Step 3b. When content has been uploaded Step 3a. Respond to the message by doing one of the following: Click Cancel to continue without deleting 4. The issue screen appears.com to request having the old files removed. Click Edit. Step 3. Step 4. A message appears asking to confirm the action. perform the following steps: Step 1. You will be informed by WoodWing when the old files are removed and the new files are available. Change any of the available fields as required. All fields can be modified. (Optional) Click on a preview to view it in full size in a new window. perform the following steps: Step 1. Do one of the following: When no content has been uploaded yet Step 3a. with the exception of the product ID and the payment type. Step 3c. Click Delete to delete the issue and all its components 80 . Step 3.

Step 5. choose the required Rendition. perform the following steps: Step 1. The default minimum version for the selected Rendition is automatically set when the page is loaded and each time a Rendition is chosen from the Rendition list. the Save button will stay unavailable. possible reasons are provided. The upload will start. The Rendition screen appears. When choosing a Rendition from the list. the page is refreshed and the value in the Reader App Minimum Version box is updated (See Step 4. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. From the Rendition list. The content of the uploaded file is verified and the results are displayed in the Report box. The progress is visualized by the progress bar. Step 2. Click OK to close the window. the OK button becomes available. Resolve these as needed.Appendix F Using the Content Delivery Platform 4. select the issue to which the Rendition needs to be added. As soon as all files are uploaded. In case a different minimum version number needs to be used.2.4 Adding a Rendition To add a Rendition to an issue. The Deploy screen now shows progress bars with which the upload process can be followed. Upload File. R e a d e r A p p M i n i m u m Version. Until a valid file has been offered. Click Browse to locate the Segment upload file and click Open. Step 3. Step 9. The Deploy window appears with a summary of the files that are to be uploaded. Uploading the images can be done while the issue content is being uploaded. The issue screen appears. Step 6. Step 8. In the Publication Overview pane. The value used is the value as defined on the Reader Application page (for more information. If the validation fails. Click Save & Finish to upload the files to the Content Delivery Network.). Click on a preview to view it in full size in a new window. manually change the value. see Reader Apps and minimum versions). 81 . Click Add Rendition. Step 7. The list will only show those Renditions which have not been assigned to the issue yet. Step 4. you don’t have to wait for the upload to be completed. Click Save.

4. 4. 82 .5 Convert to HTML5 Non-HTML5 issues can be converted to HTML5 format for use on the HP TouchPad.Appendix F Using the Content Delivery Platform 4. Adding an Issue in Segments .4.6 Managing HTML5 Conversions. For more information about converting an issue into HTML5 format.3 Managing Segments Segments can be managed in the following ways: Add to a new issue Add to an existing issue Delete Edit Add Rendition Sort Each is explained in the following sections. see section 3.2.3.Phase 2.1 Adding to a New Issue For information about adding a Segment to a new issue. see section 4. Issues which are converted to HTML5 in this way cannot be used for the HTML5 Reader App.2.

Step 1. From the toolbar at the top of the Publication Overview pane. Step 3b.Appendix F Using the Content Delivery Platform 4. (Optional) The subtitle to be displayed in the Library. Description. choose the value to which the Segment should belong (in other words: when the user chooses the option in the Library Filter as defined here. Step 3c. Step 3e.1) to a more meaningful description. followed by Add Segment. click Add. perform the following steps: Adding additional Segments to an Issue is only possible for those issues which have been set up to contain Segments during the creation steps of an issue. this will be displayed in the Library. (Optional) From the Filter list. Product ID. the Segment will be included in the search results). Step 3d. Subtitle. The issue screen appears. Name. 83 . select the issue to which the Segment needs to be added. (Optional) Change the default Segment suffix (child. In the Publication Overview pane. Step 4. The Segment is added to the issue in the Publication Overview pane and in the main window. Segment Filter. Click Add. Step 2.) Step 3. (Optional) A short description of what the Segment is about.3.2 Adding to an Existing Issue To add a Segment to an existing issue. Name of the issue used in the Content Delivery Platform and on the development devices. the Issue screen appears. Enter the details pertaining to the Segment: Step 3a. The Add Issue screen appears (a Segment is essentially an Issue.

3. Change the magazine content or any of the All fields can be modified. Respond to the message by doing one of the following: Click Cancel to return to Segment screen 4. You will be informed by WoodWing when the old files are removed and the new files are available. without deleting the Segment.Appendix F Using the Content Delivery Platform 4.4 Editing an Segment To edit a Segment. Please include the product ID and names of the files which have changed. When either is done. Click Delete to delete the Segment and all its components (Renditions). 84 . A message appears asking to confirm the action. the old files need to be purged: Send an e-mail to services@woodwing. The Segment screen appears. with the exception of the date and time fields (these are inherited from the parent issue). do one of the following: When no content has been uploaded yet required. Change any of the available fields as When content has been uploaded previews.3 Deleting a Segment To delete a Segment. In the Publication Overview pane. (Optional) Click on a preview to view it in full size in a new window. Step 3. Step 2. perform the following steps: Step 1.3. Click Delete Issue. select the Segment which needs to be deleted. com to request having the old files removed.

From the Rendition list.Appendix F Using the Content Delivery Platform 4. choose the required Rendition. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. The upload will start. Step 8. Click Save & Finish to upload the files to the Content Delivery Network. the Save button will stay unavailable. The content of the uploaded file is verified and the results are displayed in the Report box.3. Step 3. Click Browse to locate the Segment upload file created in Step 1 and click Open. 85 . Step 9.5 Adding a Rendition To add a Rendition to a Segment. you don’t have to wait for the upload to be completed. As soon as all files are uploaded. The Deploy screen now shows progress bars with which the upload process can be followed. see Reader Apps and minimum versions. Click Save. Step 2. Step 4. (For more information. The issue screen appears. Step 6. The list will only show those Renditions which have not been assigned to the issue yet. select the Segment to which the Rendition needs to be added. Upload File. Step 1. The minimum version number used is the number set for either the Reader App or the Rendition. The progress is visualized by the progress bar. The Deploy window appears with a summary of the files that are to be uploaded. Click on a preview to view it in full size in a new window. the OK button becomes available. Click Add Rendition. possible reasons are provided. The Rendition screen appears. Reader App Minimum Version. Uploading the images can be done while the Segment content is being uploaded. If the validation fails. In the Publication Overview pane.) Step 5. perform the following steps: Adding a Rendition to a Segment is only possible when no Renditions have been added to the Segment yet. Cannot be changed for Segments. Click OK to close the window. Step 7. Until a valid file has been offered. Resolve these as needed.

4 Managing Renditions Managing Renditions should be seen here as using the Renditions which are available in the system. click Sort Child 4. From the toolbar at the top of the Publication Overview pane. Sort the Segments by dragging them in the desired order. Renditions can be managed in the following ways: Add to issue Delete from issue Edit assigned Rendition Issues.6 Sorting Segments To sort Segments. Step 4. 86 . Step 3. The issue screen appears. Step 2. this process is not described here. The Sort screen appears. Each is explained in the following sections. select the issue for which Segments need to be sorted. Click Save. In the Publication Overview pane.Appendix F Using the Content Delivery Platform 4. Do one of the following: On the issue screen. The availability and properties of the Renditions is managed by the System Maintainer.3. perform the following steps: Step 1. click Sort.

the Save button will stay unavailable. the page is refreshed and the value in the Reader App Minimum Version box is updated (See Step 4b). In case a different minimum version number needs to be used. Rendition. Step 5.1 Adding a Rendition To add a Rendition to an issue. Step 1. The upload will start. Uploading the images can be done while the issue content is being uploaded. Step 4. The value used is the value as defined on the Reader Application page (for more information. Step 4b. When choosing a Rendition from the list. R e n d i t i o n . In the Publication Overview pane. Step 2. you don’t have to wait for the upload to be completed. Step 4c. Upload File. Reader App Minimum Version. Upload the images for the cover and preview (any page of the magazine that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. select the issue to which the Rendition needs to be added. Until a valid file has been offered.4. The default minimum version for the selected Rendition is automatically set when the page is loaded and 87 . Click Browse to locate the magazine upload file and click Open. followed by Rendition. Step 6. click Add. Do one of the following: O n the issue screen. Resolve these as needed. From the toolbar at the top of the Publication Overview pane. Enter the details pertaining to the Rendition: Step 4a. click Ad d each time a Rendition is chosen from the Rendition list. If the validation fails. The Add Rendition screen appears. possible reasons are provided. Click Add Rendition. see Reader Apps and minimum versions). The progress is visualized by a progress bar. Click on a preview to view it in full size in a new window. The content of the uploaded file is verified and the results are displayed in the Report box. Step 3.Appendix F Using the Content Delivery Platform 4. perform the following steps: Adding a Rendition to an issue is only possible when no Renditions have been added to the issue yet. manually change the value. The issue screen appears. C h o o s e t h e Rendition on which the issue is to be viewed. Click Save.

Click Save & Finish to upload the files to the Content Delivery Network. The Rendition screen appears. For more information about converting a Rendition to HTML5 format. The Deploy screen now shows progress bars with which the upload process can be followed. 88 . Step 7. As soon as all files are uploaded.Appendix F Using the Content Delivery Platform The Deploy window appears with a summary of the files that are to be uploaded. the OK button becomes available. Click OK to close the window.4.2 Convert to HTML5 Non-HTML5 Renditions can be converted to HTML5 format for use on the HP TouchPad. The process is hereby complete. see section 4. 4.6 Managing HTML5 Conversions. Renditions which are converted to HTML5 in this way cannot be used for the HTML5 Reader App. Step 8.

Respond to the message by doing one of the following: Click Cancel to return to Rendition 4. Click Delete to delete the Rendition. In the Publication Overview pane. When either is done. Please include the product ID and names of the files which have changed. screen without deleting the Rendition. select the Rendition which needs to be deleted.Appendix F Using the Content Delivery Platform 4. the old files need to be purged: Send an e-mail to services@woodwing. The Rendition screen appears.4 Editing an Rendition To edit a Rendition. Click on a preview to view it in full size in a new window.4. Step 3. Step 2. 89 .4. You will be informed by WoodWing when the old files are removed and the new files are available.3 Deleting a Rendition To delete a Rendition. A message appears asking to confirm the action. Click Delete. perform the following steps: Step 1. do one of the following: Change the magazine content or any of the previews. com to request having the old files removed.

Click Delete to delete the Subscriptions. perform the following steps: Step 1. 90 . 4. Step 3. see section 3.4.Appendix F Using the Content Delivery Platform 4.2 Deleting a Subscription To delete a Subscription. In the Apple Subscriptions section of the Application pane. The Subscription screen appears. A message appears asking to confirm the action.3 Adding a Subscription. Step 2.1 Adding Subscription For information about adding a Subscription.5. select the Subscription which needs to be deleted. Respond to the message by doing one of the following: Click Cancel to return to Subscriptions Each is explained in the following sections.5 Managing Subscriptions Subscriptions can be managed in the following ways: Add Delete Edit Sort 4. Click Delete.5. screen without deleting the Subscriptions.

3 Editing an Subscription To edit a Subscription. select the Reader App for which Subscriptions needs to be sorted. perform the following steps: Step 1.5.4 Sorting Subscriptions To sort Subscriptions.Appendix F Using the Content Delivery Platform 4. Step 2. 91 . select the Subscription which needs to be edited. In the Apple Subscriptions section of the Application pane. The Sort screen appears. Step 3. Sort the Subscriptions by dragging them in the desired order. Click Edit. From the toolbar at the top of the Publication Overview pane.5. Step 4. Click Save. In the Apple Subscriptions section of the Application pane. Step 3. Change any of the available fields as required. Step 2. 4. Click Save. Step 4. The Subscription screen appears. click Sort. perform the following steps: Step 1.

Indicators in the HTML column display the current status: No indicator: the issue or Rendition is not Each is explained in the following sections. Content which is converted to HTML5 in this way cannot be used for the HTML5 Reader App.6. Red cross: the issue or Rendition has been converted but the conversion proces was unsuccessful.1 Converting to HTML5 Format. (To resolve this problem.) Yellow exclamation mark: the issue or The following processes can be managed: Converting issues or Renditions to HTML5 format Removing converted HTML5 issues or Renditions 92 . The Mass HTML5 Export screen shows each issue shaded in dark gray. accessed by selecting the Reader App for which the conversions need to be managed from the Publication Overview pane of the Publication tab. perform steps 1 to 6 from section 4.1 Converting to HTML5 Format. This process is managed from the Mass HTML5 Export screen.6.6 Managing HTML5 Conversions Non-HTML5 content can be converted to HTML5 format for use on the HP TouchPad. Green tick: the issue or Rendition has been converted to HTML5 and is up-to-date. followed by each available Rendition for that issue in light gray.Appendix F Using the Content Delivery Platform 4. converted. (Convert this newer version by performing the steps found in section 4.) Rendition has been converted to HTML5 but a newer version of the issue or Rendition is available..

Click Convert. The HTML5 Export window now shows progress bars with which the conversion and upload process can be followed. Upload the non-HTML5 content as described in section 3. As soon as all files are uploaded. all these Segments will be converted as well. Click OK to close the window. select the Reader App which contains the content that needs to be converted. The Reader App screen appears. In the Publication Overview pane. Select one or more issues and/or Renditions which need to be converted to HTML5. showing each issue shaded in dark gray. showing one of the following indicators for the converted issues or Renditions: Green t ick: the conversion was successful Red cross: the conversion was unsuc- cessful. A HTML5 Export window appears confirming the number of issues/Renditions which will be converted.1 Converting to HTML5 Format Content on the CDP in non-HTML5 format can at any time be converted to HTML5 format by performing the following steps: Step 1. Step 4. Click Save & Finish.4 Adding an Issue.6.Appendix F Using the Content Delivery Platform 4. followed by each available Rendition for that issue in light gray. 93 . The Mass HTML5 Export page appears. Step 6. Step 5. the OK button becomes available. When selecting an issue or Rendition containing Segments. Step 2. Step 3. repeating steps 1 to 6 will normally resolve the problem.

7 Managing Development Devices Development Devices can be managed in the following ways: Add Delete Edit Each is explained in the following sections. select the issue containing the converted content. Respond to the message as follows: Click Cancel to return to the issue details 4. Click Delete HTML Versions. The details page for that issue appears. they can be removed by performing the following steps: Step 1.6. see section 3. page without removing the converted issue.Appendix F Using the Content Delivery Platform 4.7. Step 2.5 Adding a Development Device. Click Delete to delete the converted The process is hereby complete. HTML content for that issue. A message appears asking to confirmation the action. Step 3. In the Publication Overview pane.1 Adding a Development Device For information about adding a Development Device.2 Removing Converted Content In case issues or Renditions are no longer required to be available in HTML5 format. 94 . 4.

Click Edit. Click Delete. The Development Device screen appears. The Development Device screen appears. 95 . perform the following steps: Step 1. A message appears asking to confirm the action. Step 3. Step 2. only when a user is located in the Development Device. (Optional. Device and all its components Step 4. select the Development Device which needs to be edited.2 Deleting a Development Device To delete a Development Device. Step 2.7. Click Save. perform the following steps: Step 1.Appendix F Using the Content Delivery Platform 4.3 Editing a Development Device To edit a Development Device. Step 3. From the Device Maintenance section of the General pane.7. Respond to the message by doing one of the following: Click Cancel to continue without deleting 4. select the Development Device which needs to be deleted. Do any of the following: Change the Device Comment. Step 4. Click Delete to delete the Development multiple domains) Select the Domain(s) which the Development Device should be part of. In the General pane.

only required when setting up the environment for the first time).)  received by the device. select the Reader App to which a message needs to be sent. (For more information about the Newsstand feature. do the following: Step 1. Newsstand (iOS 5). In the Push Notifications pane of the Application tab. (Optional. Export the APN Certificate as described in the above link but make sure to use an empty password for the certificate.11. Generate the Apple Push Notification (APN) Cer tificate as described in http://developer. Step 2b. the Reader App itself does not have to be opened. the user. he/she needs to have agreed upon receiving them (by confirming this when launching the Reader App for the first time). To send a message to Reader App users.8 Sending a Push Notification (Message) (iPad Reader Apps only) The message functionality can be used to perform one of the following actions: To send users of a Reader App short 4.html.1 Sending a Message to Users In order for the user to receive such messages. messages can be delayed or failed to be delivered. Customizing the iPad Reader App – 9. typically to inform them that new releases are available such as those of the Reader App. 96 . It is not guaranteed that the message reaches Each is explained in the next sections. To notifiy the Newsstand (as part of iOS 5) that a new version of the issue is available.apple. Upload the required certificate by doing the following: Step 2a. The Push Notifications page appears.8. Keep in mind the following: The message is shown as soon as it is messages.Appendix F Using the Content Delivery Platform 4. Step 2. com/library/ios/#documentation/ NetworkingInternet/Conceptual/ RemoteNotificationsPG/ ProvisioningDevelopment/ ProvisioningDevelopment. see chapter 7.

In the Certificate section of the Push Notifications screen. 97 . To verify if the message has been sent completely. make sure that the Send Notification to Newsstand option is set to No. Click Open. (Optional) If the message is only to be sent to development devices. Step 6. the longer it takes to send out the message. Step 5. Browse to the location where the exported certificate is stored. Step 2e. select the Reader App in the Push Notifications pane of the Application tab once more. The Message box appears. click Add. The more registered devices exist. with the Sent column displaying the current status of the message: In progress Message sent Message could not be sent Step 7. Enter your message in the Message box The options for writing a message are only available when a certificate is successfully added and a registered device is found. A maximum of 150 characters is allowed. select the Only Development Devices check box. Step 3. In the Send Notification section. Step 4. Step 2d. Click Send to send the message. Details of the sent message are displayed in the Message Overview section of the screen.Appendix F Using the Content Delivery Platform Step 2c.

In the Send Notification section. Generate the Apple Push Notification (APN) Cer tificate as described in http://developer. Step 4. Customizing the iPad Reader App – 9. Details of the sent notification are displayed in the Message Overview section of the screen.html. The Select Issue list appears. only required when setting up the environment for the first time). The Push Notifications page appears. Step 3c. Upload the required certificate by doing the following: Step 3a. verify that no notification has been sent within the last 24 hours. com/library/ios/#documentation/ NetworkingInternet/Conceptual/ RemoteNotificationsPG/ ProvisioningDevelopment/ ProvisioningDevelopment. In the Message Overview section of the screen. Step 5. Export the APN Certificate as described in the above link but make sure to use an empty password for the certificate.) To send out the notification. Click Open. see chapter 7. To verify if the notification has been sent completely. If so. Step 1. Step 2. wait until this time period has passed before sending out a new notification. choose the issue for which a notification needs to be send. Step 6.apple. select the Only Development Devices check box. Step 3d.8. This will trigger an automatic download of that issue. 98 . Click Send to send the notification. Newsstand (iOS 5). (Optional) If the notification is only to be send to development devices. From the Select Issue list. (Optional. Step 7. In the Certificate section of the Push Notifications screen. showing the last 10 active issues. In the Push Notifications pane of the Application tab. Step 3b. select the Reader App for which a notification needs to be sent. Browse to the location where the exported certificate is stored.2 Sending a Newsstand Notification When the Reader App is made part of the Newsstand. click Add. select the Reader App in the Push Notifications pane of the Application tab once more.11. The options are only available when a certificate is successfully added and a registered device is found.Appendix F Using the Content Delivery Platform 4. a notification can be send to inform the Newsstand that a new version of an issue is available. Step 3. with the Sent column displaying the current status of the notification: In progress Message sent Message could not be sent Step 8. perform the following steps: Apple specifies that only one notification can be send out every 24 hours. (For more information. make sure that the Send Notification to Newsstand option is set to Yes. Step 3e.

Click Save. see section 3. 99 .9 Managing Users Users can be managed in the following ways: Add Edit Each is explained in the following sections.2 Editing a User Profile To edit a user profile. 4.3 Adding a User. In the top right-hand corner of the screen. do the following: Step 1. The User Settings screen appears. click My Account. 4.9. 4. Step 2. Step 3.Appendix F Using the Content Delivery Platform The more registered devices exist. Change any available fields as needed. the longe r it ta ke s to se nd ou t the notification.9.1 Adding a User For information about adding a user.

“Immediately” in this context means whenever the tablet has a download slot (thread) available. the following rules apply: The currently visible story maintains the highest download priority and its content will be displayed immediately. stories will be downloaded in order of appearance (first story first. all is taken care of by the Content Delivery Platform. consisting of the magazine. downloaded. but each will finish first before the next is started. None of the threads will be cancelled. will also have “normal” priority.zip file as normal. for instance by tapping a preview in the Story Navigator. In the extremely rare situation where all three threads are downloading a large video. the CDP provides content progressively to the user. 100 .xml file. the magazine content can be uploaded as a . Also. ‘immediately’ may take a while (until a thread is available). The story next in line will have “normal” priority. Configuration No specific configuration is required to make use of the progressive download feature. magazine. etc). last story last). the cover and all thumbnails. In the case of the iPad for instance. The behavior of the progressive download process is as follows: Download is started: an initial package is Stories that are linked within the currently visible story (by means of a Dossier Link). This means that the download is split into smaller parts: the most basic content is made available first (such as the cover and the cover story) and the user can open the magazine and start reading that content while all other content is progressively downloaded in the background. tapping a Dossier Link on the cover. 3 threads are active at all times. When user does not interact with the When the user accesses a story (in any possible method.Appendix F Using the Content Delivery Platform 5. Progressive Downloads By default. All other stories will have “low” priority.

already uploaded magazines are not encrypted. This process only applies to those Reader Apps which do not bundle the magazine content with the Reader App.Appendix F Using the Content Delivery Platform 6. Update Release.) Encryption and existing issues Only magazines which are uploaded after the encryption functionality has been enabled for that Rendition are encrypted. We therefore advise to make use of this feature for those issues which are published to the iPad only. Customizing the iPad Reader App. Any non-iPad Reader Apps currently cannot read encrypted magazines.2. This process (which is optional) takes place during the upload of the magazine to the Content Delivery Platform. Encryption and minimum Reader App version Making use of this new feature will require a Reader App update to be released (see chapter 7. This key is sent to the Reader App when it sends a request for download information. Encryption and Renditions Determining whether or not a magazine is encrypted is specified on Rendition level. the magazine. such as on Android). section 5. Magazine Encryption In order to prevent magazines from being copied between unauthorized devices. but can still be read by the updated Reader App.5. Make sure therefore to only enable encryption for those Renditions which are solely aimed at reading on the iPad (keep in mind iPad Renditions which are also used on other platforms. a magazine can be encrypted. 101 .xml file is encrypted and can only be read by a Reader App which has access to the encryption key. Magazine encryption is currently only supported by the iPad Reader App. During the encryption process.

This allows you to quickly reference the source files for making the required changes. Image editor. 102 . Use your Config files editor. Use your the content of the issues that will be viewed) users to use Enabling those features that you want your favorite editor for this task. Locating customizable components To locate a specific component of the Store or to verify its properties. This appendix describes how to customize the HTML Store. For editing images. For editing configuration files. such as an XML editor or plain-text editor. Customizable components are referenced in this appendix by the CSS files in which they appear and the class selectors in which they are used. Use your favorite editor for this task. For editing CSS files. the following tools are required: CSS editor. view the Store in a Web Browser and use browser’s tools such as the Developer Tools. favorite editor for this task. Required Tools In order to perform the steps as outlined in this appendix.G Customizing the HTML Store Customizing the HTML Store is important when you want to achieve any of the following: Giving it a unique look and feel (reflecting 1.

Store view. (N o n-i Tu n e s Subscription services only) For signing in or out of a non-iTunes Subscription service. Subscription. The Store The Store is used for showing the user the available issues for a particular title. For filtering the content of the 103 . (iPad Reader App only) For returning to an opened issue. cific values. Shows the available issues in Each is described in the following sections. you are free to use these components and change/rearrange them in such a way that they reflect the look and feel of your publication. For filtering the content on speGrid View/Single Issue View. Store Filter. Filters. Framework. Shows a preview of the issue content. Upgrade bar. Contains buttons for performing Issue preview. For changing the display method. usually in the form of a representative page or the table of contents. either multiple-issue view (also referred to as the grid view) or single-issue view.Appendix G Customizing the HTML Store 2. and the Apple Subscriptions Editions of the Reader App. Contains buttons for sub- scribing to a new subscription or upgrading an existing subscription. The Store functionality is only available in the Pro. A Web page for advertising subscription offers. Subscription offers page. to an non-iTunes Subscription service. Since the layout of the Store is all done in HTML. Store. Customizing the Store can be done by changing the following: Configuration settings Images Colors Fonts Text Language iTunes Subscription environment Non-iTunes Subscription environment Mixed Subscription environment the following tasks: Back to Magazine. and to offer the user the possibility to download individual issues (either free of charge or as part of a subscription). Subscription Sign In window. The Store consists of the following main components: Top Toolbar. For signing in See images on the next pages. S i g n I n /S i g n O u t .

Appendix G Customizing the HTML Store A B C D A Top Toolbar B Subscription offer page C Upgrade bar D Store view in multiple-issue mode Figure 2a. The HTML Store in Grid view mode with the Subscriptions Offer page shown at the top 104 .

The HTML Store in issue preview mode 105 .Appendix G Customizing the HTML Store A A Issue preview Figure 2b.

Appendix G Customizing the HTML Store A A Store Filter Figure 2c. The Store Filter of the HTML Store 106 .

Appendix G Customizing the HTML Store A A Subscription sign-in window Figure 2d. The subscription sign-in window 107 .

The HTML Store that is bundled with this release does not yet use this feature. the Store can be changed to add for instance an "Open" button to issues that are already downloaded or you can let a tap on the cover open a magazine. Using this call. The URL used in the API is: URL ww://issues/open/[id].1 Opening Issues Directly From the Store The HTML Store API has been expanded with a call to open already downloaded issues directly from within the Store.Appendix G Customizing the HTML Store 2. 108 .

css file: /storefront/ filters. appearance of the subscription sign in dialog box.css. Used for controlling the webcontainer. Used for controlling the signin. The following types of files can be edited: Configuration files. Used for controlling func- tionality related to the Gridview mode. appearance of the View toolbar. folders exist for each Reader App platform: 109 .css. Used for controlling function- For all files except the subscription. Separate CSS files are available for each of the different Reader Apps which have Store functionality. the "Privacy" page. Used for controlling the Store functionality: DMSettings.Appendix G Customizing the HTML Store 3.css. Used for controlling Folders exist for each Reader App platform: android: images for the Store in the the appearance of the Subscription Offer pages. default: images for platforms other ios: images for the Store in the iPad CSS files. text. Used for controlling the preview. Images are stored in the following location: Resources/htmlstore/storefront/themes subscription.css. appearance of the navigation tools. For configuring Store functionality in the Reader App. Used for changing the appearance singleview. Images.css. ity and/or appearance of the Store in the form of background colors. Reader App. navigation. Different CSS files are available for different areas of the Store (listed in alphabetical order): eral appearance and functionality of the Store.css.css file: Resources/htmlstore/storefront/themes components/subscription/css/ base. toolbar.css. icons. Used for changing the functional- external content such as the "Forgot my password" page. than Android or iOS.css. Project Files Customization of the HTML Store is achieved by editing various types of files which are provided as part of the Reader App. They are stored in the following location: All files except the subscription. Used for controlling of the Store in the form of buttons. Used for displaying Android Reader App.css. appearance of the issue preview.plist file. etc.css file. etc. etc. Used for controlling the gen- subscription. Used for configuring the gridview.css. ality related to the Store filter. functionality related to the single view mode.

110 . see chapter 7. see chapter 9. For more information about configuring the Store for the iPad Reader App. For more information about configuring the Store for the Android Reader App. Customizing the iPad Reader App – section 7.1 Configuration Settings When the Store is integrated in the Reader App. Customizing the Android Reader App – section 7. The Store. the communication between the Store and the Content Delivery Platform is handled by the Reader App itself. The Store. than Android or iOS. Reader App. 3.Appendix G Customizing the HTML Store android: CSS files for the Store in the Android Reader App. default: CSS files for platforms other ios: CSS files for the Store in the iPad The configuration of each type of file is explained in the following sections.

png.previous . CSS reference: CSS file: navigation. make sure to also All images need to be in PNG file format CSS file: toolbar.storefront-gridviewbutton CSS file: preview.toolbar .button.storefront-singleview-button 111 . button. single-issue view.button.css Class selectors: .css Class selectors: .submit-button CSS file: singleview. filter . and subscription sign-in window.button.css Class selectors: . bg-rail.css Class selector: .button.storefront-singleview-button CSS file: toolbar.toolbar .css Class selectors: .back ButtonActive.button. see the images on the following pages).css Class selector: . grid view.button.preview-button CSS file: signin.toolbar .button.png.Appendix G Customizing the HTML Store 3.css Class selectors: .toolbar .css Class selectors: . (Non-Android Only) Buttons CSS references: CSS file: gridview.button .back the left or right Hotzone. (Android only) Buttons rename their references in the relevant CSS files The following images can be customized (in alphabetical order.sign .css Class selectors: . bg-rail-vertical.submit-button CSS file: singleview.toolbar . grid view. and subscription sign-in window.button. sign CSS file: webcontainer.png.sign . Take note of the following: When renaming images. singleview .next used in the top Toolbar.x.navigator. For examples. Reserved for future used in the top Toolbar.2 Images Store images include all images used in the Store. single-issue view.css Class selector: .png. Displayed when the user taps CSS references: CSS file: gridview.css Class selectors: .css Class selector: .x. use.navigator.storefront-gridviewbutton CSS file: signin. gridview CSS file: webcontainer.

close-button single-bg.css Class selector: .css Class selectors: . Shelf used in single-issue view.png. CSS reference: CSS file: singleview.button.checkbox Me check box in the subscription sign-in window in its selected state. CSS reference: CSS file: filters. CSS reference: CSS file: toolbar.png.button.png. The Remember below the small issue covers.css Class selectors: . The background of the sin- gle-issue view.signin .toolbar .active checkbox.png.preview .png. The background of the checkmark.css 112 . pressed .png.active . CSS reference: CSS file: gridview.gridview-img gridView-shelf. (Android only) Buttons used in the top Toolbar. singleview.checkbox-filter gridview-item-shadow.b utto n.css Class selector: .close-button CSS file: signin. CSS references: CSS file: preview. CSS reference: CSS file: signin.css Class selector: .gridview.Appendix G Customizing the HTML Store ButtonPressed. The Remember Me check view button in its selected state.toolbar . CSS reference: CSS file: toolbar. Used in the Store Filter for GridviewIcon. CSS reference: CSS file: singleview.png. Used for closing the issue preview window or the subscription sign-in window.storefront-gridview button.storefront-gridview li Gridview.button.signin . Grid view but- .signin .active ton in its non-selected state.css Class selectors: .css Class selector: .png.to ol b a r gridview gridview-icon-button.storefront-singleview single-shelf.check box.png. Grid CSS references: CSS file: toolbar. CSS reference: CSS file: toolbar. The shadow checkboxChecked. gridview-icon-active-button. CSS reference: CSS file: signin.css Class selector: .css Class selector: . box in the subscription sign-in window in its deselected state. checked indicating that a list option is selected.css Class selectors: .toolbar .css Class selector: .toolbar . CSS reference: CSS file: gridview.png.png.button. (Android only) Grid view closeButton.css Class selectors: .png. gridview.

active Only) Single-view button in its non-selected state. CSS reference: CSS file: singleview.toolbar .css Class selector: . (Non- Android Only) Single-view button in its selected state.css Class selector: .to ol b a r . p ng.png. CSS reference: CSS file: toolbar.i te m -s h a d ow.storefront-singleview-shadow 113 .singleview. CSS reference: CSS file: toolbar.page-move-container > div singleview-icon-active-button.png. (Android Only) Single-view s i n g l ev i ew.Appendix G Customizing the HTML Store Class selectors: .b utto n.css Class selector: .singleview-img singleview-icon-button. CSS reference: CSS file: toolbar.button.css Class selector: . singleview button. T he background of the Single-view. (Non-Android SingleViewIcon. including the dropshadow.

png C gridview-icon-active-button.png D gridView-shelf.2a.png gridview-item-shadow.Appendix G Customizing the HTML Store A B C A A D E A E button.png Figure 3. The assets of the HTML Store with Grid view mode 114 .png B singleview-icon-button.

2b.Appendix G Customizing the HTML Store A A A button.png B closeButton.png Figure 3. The single-view mode assets of the HTML Store 115 .

png Figure 3.png B checkboxChecked. The Subscription sign-in window assets 116 .2d.Appendix G Customizing the HTML Store A A A checkmark.2c. The Library Filter asset A C closeButton.png B C Figure 3.png button.

For information about the colors for the Subscription Offer page. CSS file: gridview. see section 3.header Issue description. CSS file: gridview. The following Store colors can be customized: Grid view colors The following colors relating to the grid view can be customized: Button labels.storefront-gridviewbutton in the grid view.css Class selector: . The colors of the buttons in the Upgrade bar. CSS file: gridview.css Selector: html Class selector: .3 Colors Store colors include all colors used in the Store.css Class selector: .css Selector: html Class selector: .8 Non-iTunes Subscription Environment.toolbar . The title color of the issue Toolbar button labels. The color of the Toolbar button labels (the Filters and Sign In buttons). CSS file: base. including the color of the labels.storefront-gridviewname Top Toolbar colors Issue name. CSS file: toolbar.css Class selector: .button 117 . The title color of the issue name The following colors relating to the top Toolbar can be customized: Top toolbar.button description (also called “Cover Story:”) in the grid view. except those that are part of the Subscription Offer page.Appendix G Customizing the HTML Store 3.css Class selector: . The color of the Preview Issue and Buy/Free button labels.storefront-gridviewstory Upgrade bar colors The following colors relating to the Upgrade bar can be customized: Buttons. CSS file: base. The color of the top Toolbar.

css Class selector: . The title color of the issue name Issue description.preview-info the Info pane. CSS file: singleview. The background color of color of the issue info. CSS file: preview.storefront-singleviewbutton in the single view. CSS file: singleview. The title color of the issue description (also called “Cover Story:”) in the single view.css Class selector: .css Class selector: . The background Issue preview colors The following colors relating to the issue preview can be customized: Info background.Appendix G Customizing the HTML Store Single-view colors The following colors relating to the single-view can be customized: Issue info background.css Class selector: . CSS file: preview.preview-info Button labels.storefront-singleviewname Issue name.css Class selector: .storefront-singleviewstory 118 . The color of the Preview Issue and Buy/Free button labels. CSS file: singleview.

css Class selector: . the window header and the color of the text.signin-top Links.css Class selector: . and “License Agreement” text. except those that are part of the Subscription Offer page. The following Store fonts can be customized: body. CSS file: signin. The font of the header of the 119 .body Subscription Sign In dialog box.css Class selector: .4 Fonts Store fonts include all fonts used in the Store. The color of the links for the “I for- got my password”. CSS reference: signin.Appendix G Customizing the HTML Store Subscription sign-in colors The following colors relating to the subscription sign-in window can be customized: Window header.css signin-top. The background color of 3. CSS file: signin. “Privacy”.link CSS file: base.8 Non-iTunes Subscription Environment. see section 3. For information about the fonts for the Subscription Offer page.

5 Text The text in the Store includes all text except the text which is part of the Subscription Offer page. The strings for these labels are stored in the following file: htmlstore/storefront/strings/en.8 NoniTunes Subscription Environment. To create the list. Each is described below. issue preview. single-issue view. and sign-in window The “Cover Story” label The labels in the Sign-in window Each is explained in the following sections.1 Configuring Reader Apps. issue information. For information about changing the text for the Subscription Offer page. Using the Content Delivery Platform – section 4. This can be achieved by doing the following: 120 . modify the value as desired. and the Store Filter.Appendix G Customizing the HTML Store 3. Store filter The text of the store filter comes in two parts: Filter options. Changing the appearance of the text can be done in the following ways: By changing the actual text By changing the color of the text 3. see section 3. Issue information The issue name and issue description is derived from the Content Delivery Platform. see appendix F. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. top Toolbar. For more information about changing this information. Using the Content Delivery Platform – section 4. the grid view. see appendix F. Labels The text of the following labels can be changed: Button labels in the Subscription bar.1 Configuring Reader Apps.1 Changing the Text The text which appears in the Store originates from various sources: labels. These are derived from the Content Delivery Platform.5.json Each string is made up of a key/value combination.

3. For example: when a filter has been set up for distinguishing English and German issues. choose German from the available list when uploading German issues.Appendix G Customizing the HTML Store Upload your magazine content using the WoodWing Content Delivery Platform and on the Issue Details screen. and English when uploading English issues. 121 .5. choose the keyword which should be assigned to the magazine.3 Colors.2 Changing the Color How and where to change the color of the text is described in section 3.

The language code should be a twoor three-letter code and comply to the ISO 639-1 or ISO 639-2 conventions. Rename the file by using the appropriate language code.4. Create a new language file by doing the following: Step 1a. For more information.3 Changing the Language.2. see chapter 09. Step 1c.2 Changing the Language. Specify the language as follows: 122 .php.loc. Android Reader App: Set the required lan- Step 1b. Customizing the iPad Reader App – section 3.4. Customizing the Android Reader App – section 4. see: http:// www. set the language to be used. Open the file and modify the string values as desired. Save the file. perform the following steps: Step 1.json iPad Reader App: In the Reader App proj- ect.3 Changing the Language. Duplicate the following file: htmlstore/storefront/strings/en. see chapter 7. Customizing the iPad Reader App – section 3.6 Language Setting the language for the HTML Store is done separately from setting the language for the rest of the Reader App. see chapter 7. guage on the device on which the Reader App is used.gov/standards/iso639-2/php/ English_list. For a full list of language codes. For more information about setting the language for the iPad Reader App. The Store will be notified by the Reader App which language file to use. Step 2. Step 1d.Appendix G Customizing the HTML Store 3. For more information about setting the language for the Android Reader App. To set the language for the Store.

html file. The subscription.7 iTunes Subscription Environment The environment for an iTunes Subscription service consists of a single HTML page containing the general content (text and images) as well as the Subscription buttons. subscription. You are free to create the design and textual content for the Offer page. Take note though of the classes used in the default subscription. The CSS file used for Each is explained in the following sections. subscription. styling the Offer page. (See figure on the next page.html.html files used in previous versions of the Reader App. so that the text and buttons are displayed as expected.Appendix G Customizing the HTML Store 3.html and verticalOffer.js. A Javascript file which dynamically generates the pages in the required orientation and size for the targeted Reader App.) Source files can be found in the following location: Resources/htmlstore/storefront/components/ Customizing the Subscription Offer page can be broken down into the following components: Page design Text Text styling Subscription buttons subscription The following source files are available: css/subscription.html file replaces the horizontalOffer. The content of the Subscription Offer page.css. 123 .

Appendix G Customizing the HTML Store A B A Subscription Offer page B Subscription buttons Figure 3.7. The components of the iTunes Subscription environment 124 .

the page. css file). Assign tags and classes as required.html file The styling of the text is controlled by assigning the relevant tags and css classes (as defined in the subscription.Appendix G Customizing the HTML Store 3. Controls the styling of 3.offer.7. To change any of the titles on the page.css file. The following default titles are provided: Subscribe to Digital Magazine Buy a subscription and start saving money today! Choose your subscription and pay via iTunes the page. subscription.html file. Holds the content of subscription.2 Text The content of the actual text on the page is controlled by the subscription. 125 . The color gradient in the back- ground of the Offer page: Class selector: .7.css file Some of the page components which can be controlled through this file include: Background. change the text as required.apple subscription.html file.1 Page Design The design of the page is controlled by the following two files: subscription.

apple Text alignment.offer.apple 126 .apple div Font: .css file.apple “Digital Magazine” title .apple div Text alignment: “Subscribe” title Color.apple div Font: .apple .offer.7.offer.offer. letter spacing. margin. letter spacing: . margin.apple “to” title Color.offer.apple div Text alignment: Font: . “Choose your subscription and pay via iTunes” title Color. font size: . text shadow: Text alignment.offer.3 Text Styling The text styling is controlled by the subscription.subscript . font size.apple .small-italic .black-text .offer.apple “Buy a subscription and start saving money today!” title Color.offer.offer. margin. font style.offer.offer. letter spacing: . letter spacing.offer.apple . letter spacing: Font: .apple h2 Color.apple h1 . Below follows a list of the class selectors used for styling the various titles on the page.offer.offer. text shadow: .apple div Text alignment: Font: .Appendix G Customizing the HTML Store 3.offer. font size: . font style.

7. all Subscription offer buttons will display a price of $99.4. This is because the real prices cannot be validated from iTunes when the app runs in the Simulator. The iTunes Subscription buttons on the Offer page The following properties for these buttons can be customized: The total number of buttons The layout of the buttons The appearance of the buttons The button labels The button label fonts 127 . Each is explained below.99.7. When running the Reader App with an iTunes subscription on the Simulator as a developer device.4 Subscription Buttons The subscriptions as defined on both iTunes and the Content Delivery Platform appear as buttons on the Offer page.Appendix G Customizing the HTML Store 3. A A Subscription buttons Figure 3.

apple . 128 .js file: createVerticalButtonBar. Using the Content Delivery Platform – section 4. (See appendix F. Controls the The button labels are taken from the Description information.apple td The Button Labels The Layout of the Buttons The layout of the buttons is controlled by the following class selectors in the subscription. createHorizontalButtonBar. To customize the appearance of the button labels. The Appearance of the Buttons To customize the appearance of the buttons.1 Configuring Reader Apps. Controls the number of horizontal rows.css file: .apple .description .js file during the process of building the Reader App. modify the following class selectors in the subscription.apple a number of vertical rows.apple . No customization therefore needs to take place.offer.css file: .Appendix G Customizing the HTML Store Total Number of Buttons The total number of buttons is dynamically determined by the subscription.offer. as entered on the Subscription page in the Content Delivery Platform.offer.offer.price . modify the following class selector in the subscription.offer.

): A Sign In/Sign Out button A Subscription Offer page An area holding the Subscription buttons 3.Appendix G Customizing the HTML Store 3.8. Class selectors: .1 A Sign In/Sign Out Button The Sign In/Sign Out button allows the user to log in or out of the external subscription environment.button .css Each is explained in the following sections.button 129 .8 Non-iTunes Subscription Environment An environment for a non-iTunes Subscription service consists of the following components (see figure on the next page.sign .button.toolbar . Customizing this button is done through the following source file of the HTML Store: toolbar.toolbar .

The components of a non-iTunes Subscription environment 130 .Appendix G Customizing the HTML Store A B C A Sign In/Sign Out button B Subscription Offer page C Area holding Subscription buttons Figure 2a.

css orientation: width: 768 pixels.8. scape orientation: width: 600 pixels. height: 315 pixels. height: 469 pixels. Offer page shown with device in land- 131 . scape orientation: width: 800 pixels. height: 210 pixels.upgrade .3 The Subscription Button Area The area which holds the subscription buttons can be customized by changing the following: The area itself The labels of the buttons when the device is held in portrait orientation. height: 500 pixels. Offer page shown with device in portrait orientation: width: 318 pixels. A vertical Offer page. Class selectors: . Two versions of this page need to be made available: A horizontal Offer page.upgrade .Appendix G Customizing the HTML Store 3. This page is shown Each is described below. For more information.horizontal .upgrade Offer page shown with device in land- Button labels Android Reader App (Froyo) The button labels can be changed/localized by modifying the source strings.8. Button area Use the following dimensions: Customizing the area is done through the following source file of the HTML Store: iPad Reader App Offer page shown with device in portrait base. scape orientation: width: 303 pixels. This page is shown 3.1 Changing the Text.5. see section 3. height: 205 pixels. Offer page shown with device in land- Android Reader App (Honeycomb) Offer page shown with device in portrait orientation: width: 318 pixels.vertical .2 The Subscription Offer Page The Subscription Offer page is an external file. height: 210 pixels. typically stored on the Subscription server. when the device is held in landscape orientation.

see section 3. Apple does not allow this. iTunes Subscription Offer page For more information about this page.1 A Sign In/Sign Out Button. see section 3.7 iTunes Subscription Environment. Log In/Log Out button For more information about customizing this button. 132 .9 A Mixed Subscription Environment An environment in which both an iTunes and a non-iTunes Subscription service is used consists of the following components (see figure on the next page): An iTunes Subscription Offer page A Log In/Log Out button Each is described below.8. Note that in a mixed Subscription environment the Store will not display the Offer pages that are part of the non-iTunes Subscription.Appendix G Customizing the HTML Store 3.

9.Appendix G Customizing the HTML Store A B A Sign In/Sign Out button B Subscription Offer page Figure 3. The components of a mixed Subscription environment 133 .

woodwing. 134 .i n required): http://community.zurich2010.woodwing. MyMagazine_issue1. Generating IDs and Keys Tips for generating IDs and keys: AppProductID. IssueID.wwwt. This appendix is aimed at sharing some of those experiences. use a non- trivial key that is hard to guess (for instance by using a combination of numbers and letters or even better by encrypt it with an MD5 hash generator). Should be something like com. (For example: com. To increase security. the more tricks of the trade are being defined and discovered.net/forum/ ipad-questions-and-answers. Other frequently asked questions can be found o n t h e Wo o d W i n g C o m m u n i t y s i te ( l o g . The more experience users get with using a new technology and processes.)1 domain name such as com. It is recommended to use a reverse SecretKey. the free issue will automatically get the AppProductID assigned as a prefix to its IssueID. 1 The Product ID is also used in monthly reports. 1.woodwing.H Tips and Best Practices Distributing a digital magazine involves many different steps and processes. woodwing.wwwt.

Appendix H Tips and Best Practices 2. 135 .woodwing. Submitting and Approval Cycles It can take up to 2 to 3 weeks for a Reader App or magazine issue to be approved by Apple. Clearing issues this way typically makes them available almost instantly. They can subsequently be ‘cleared for sale’ when the contents of the issue become available. See also this discussion: http://community. for instance for a complete year. One tactic is to register issues in advance with the iTunes Connect service.net/ forum/reasons-apple-can-reject-app-review.

2. For more information. Gestures API. The preferred way to capture gestures in a custom object is by the use of the UIGestureRecognizer gesture. see chapter 7.I Gestures API This appendix shows the classes which can be used for customizing the Gestures API for the iPad Reader App.1. Customizing the iPad Reader App – section 9. and should be avoided. Capturing gestures by means of overriding touches proves to be very troublesome. 136 iPad .

If Yes is returned no navigation functions will be executed If Yes is returned no object functions will be executed void void void void Sets a new delegate conforming to DMEGestureDelegate Removes supplied delegate Adds a new gesture to the Reader App Removes a gesture from the Reader App DMEGestureManager* Pointer to the singleton instance 137 iPad . do these in willHandleGesture. Do not perform handling checks here.Appendix I Gestures API Gestures API classes DMEGestureManager attributes sharedInstance methods addDelegate: removeDelegate: addGesture: forKey: removeGestureForKey: DMEGestureDelegate attributes N/A methods willHandleGesture: doHandleGesture: gestureWillCancelNavigation: gestureWillCancelObjects: BOOL void BOOL BOOL Must return whether the delegate will handle this gesture Is called to actually handle the gesture.

see chapter 7. . Structure 138 iPad Figure 1 on the next page shows the structure of the Navigation API. Navigation API.1. Customizing the iPad Reader App – section 9.J Navigation API This appendix shows the architecture overview of the Data and Navigation API and the classes which can be used for customizing API for use with the iPad Reader App.3. 1. For more information.

A structural overview of the Navigation API 139 iPad .Appendix J Navigation API Figure 1.

Returns a list of the first page of a story for all stories for a given layout orientation NSString* NSArray* (DMEStory) Description of this issue List of stories NSString* Returns the path to the local magazine directory DMEDataManager* DMEIssue* Pointer to the singleton instance The current issue 140 iPad . Classes The available classes which can be used are listed below.Appendix J Navigation API 2. DMEDataManager attributes sharedInstance currentIssue methods rootPath DMEIssue attributes issueDescription stories methods getSectionNames getStoriesInSection: getStoryWithId: getPageWithStoryId: pageIndex: issueOrientation: getAllPagesForOrientation: getAllFirstPagesForOrientation: NSArray* (NSString) NSArray* (DMEStory) DMEStory* DMEPage* NSArray* (DMEPage) NSArray* (DMEPage) Returns a list of section names Returns a list of stories for the given section Returns the story for a given story id Returns a page for the given story id. page index and layout orientation Returns a list of all pages for all stories for the given layout orientation.

Appendix J Navigation API DMEStory attributes issue identifier section title storyDescription author thumb preview stylesheet intent horizontalPages verticalPages elements images hyperlinks methods getPageWithIndex: issueOrientation: DMEPage* Returns a page for a given index and orientation DMEIssue* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSArray* (DMEPage) NSArray* (DMEPage) NSArray* (NSDictionary) NSArray* (NSDictionary) NSArray* (NSDictionary) Pointer to the parent issue Identifier of the story Name of the section that this story belongs to Title of the story Description of the story Author of the story URL of the thumbnail URL of the preview Data of the applied stylesheet Intent of the story List of the pages that are layed out in landscape List of the pages that are layed out in portrait List of the story elements List of the story images List of the story hyperlinks 141 iPad .

Appendix J Navigation API DMEPage attributes story layoutOrientation pageIndex identifier thumb preview objects methods N/A DMEStory* DMEPageLayoutOrientation int NSString* NSString* NSString* NSArray* (DMEObject) Pointer to the parent story The layout orientation of the page The index of the page The identifier of the page URL of the thumbnail URL of the preview List of objects on the page 142 iPad .

scroll area etc) X position Y position width height item ID link web link open internal URL Properties that are specific for this object type List of child objects (Hotspot. Scrollable area) methods N/A 143 iPad . audio.Appendix J Navigation API DMEObject attributes page parentObject identifier type x y width height itemId link weblink openinternal url specialProperties objects DMEPage* DMEObject* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSDictionary* NSArray* (DMEObjects) Pointer to the parent page Pointer to the parent object (if applicable) identifier Object type (movie.

Appendix J Navigation API DMENavigationManagerProtocol attributes N/A methods currentPageChanged: layoutOrientationHasChanged IssueHasLoaded: void void void Called when the current page in the Reader App has changed. Typically when the ipad is rotated. Supplies the new page as a DMEPage Called when the current layout orientation in the Reader App has changed. Called when the data manager finished loading the current issue. 144 iPad .

It must confirm to DMENavigationManagerProtocol Removes a given delegate from the navigation manager DMENavigationManager* DMEPage* Pointer to the singleton instance The current page DMEPageLayoutOrientation Current reader layout orientation 145 iPad Navigates the Reader App back in the history stack .Appendix J Navigation API DMENavigationManager attributes sharedInstance currentLayoutOrientation currentPage methods navigateToSection: navigateToStory: navigateToPage: historyGoBack historyGoForward historyCanGoBack historyCanGoForward addDelegate: RemoveDelegate: void void void void void BOOL BOOL void void Navigates the Reader App to the first page of the first story of the given section name. Navigates the Reader App to the first page of the given story Navigates the Reader App to the given page Navigates the Reader App forward in the history stack Indicates if it is possible to navigate back in the history Indicates if it is possible to navigate forward in the history Adds a given delegate to the navigationmanager.

how to configure other solutions is not covered. 1.omniture. WoodWing does not provide support on cus- tomizing Omniture. Prerequisites The customer should have knowledge of Omniture and have an Omniture account. launching/exiting the app. To use other analytics frameworks—such as Google Analytics or Flurry—a custom analytics module needs to be developed. for any Omniture support. and more.K Omniture Integration The Analytics feature of the iPad Reader App can be used for logging events such as browsing to new sections. please contact an Omniture consultant. These events can subsequently be analyzed used specific software packages.omniture. see http://www. buying an issue. The customer should have knowledge of Adobe SiteCatalyst.com/en/products/ online_analytics/sitecatalyst. For more information about Adobe SiteCatalyst. An Omniture account can be obtained through https://developer. Events sent from the device are collected by Omniture/ Catalyst servers and presented for reporting in Adobe SiteCatalyst. The default analytics module which is implemented in the Reader App is powered by Omniture. Analytics modules can be used as an interface to receive these events. 146 iPad Please take note of the following prerequisites for using this feature: .com/user/register. This appendix describes how the default Omniture module can be configured into the Reader App.

see section 7. Also note how the concatenated pageNames appear.Appendix K Omniture Integration 2. fixed with “c” Custom Conversion Insight Variables (eVars) ar prefixed with “v” variables that are calculated dynamically (by Omniture server) The use of custom event “event1” For a full overview of the the events and variables that are sent out by the Reader App. Site Catalyst’s workbench is highly customizable. Notice the following: pageNames are concatenated Custom traffic variables (traffic props) are pre- Adobe SiteCatalyst An example of the page view reports in Adobe SiteCatalyst can be seen in figure 2b below. Note that a default report is shown. Variables Sent with all Tracks. Viewing Data Omniture An example of how traffic sent to Omniture can be viewed is displayed in figure 2a below. 147 iPad A dynamicVariablePrefix (D=) is used for .

a HTTP protocol analyzer 148 iPad .Appendix K Omniture Integration Figure 2a. Viewing traffic sent to Omniture in HTTPScoop.

The default page report view in SiteCatalyst 149 iPad .Appendix K Omniture Integration Figure 2b.

1 Custom Traffic Variables To set up custom traffic variables in SiteCatalyst. Names are configurable.Appendix K Omniture Integration 3. 150 iPad .Day Parting Site Channels (Site Sections) URL Screen Orientation Offline Issue State Disabled Disabled Enabled Enabled Enabled Enabled Enabled Disabled Enabled Enabled Enabled Enabled Disabled Disabled Enabled Enabled Enabled Enabled Enabled (Continued in next column) Disabled Variables (eVars) Setting up custom success events Each is described in the following sections. Custom traffic variables in SiteCatalyst Property # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Name Search Terms No of Search Results User Agent Carrier Location App Name Platform | Page Name Time of Day Section User Engagement Action Platform App Name App Distribution Channel View Type Virtual Page Name Traffic . but the Property number should not be changed. Setting Up SiteCatalyst Setting up SiteCatalyst can be done in the following ways: Setting up custom traffic variables Setting up Custom Conversion Insight 3.1. use the below table. Table 3.

.Platform | Page Name App name Platform Version Store Type (Acquisition Channel) Install Date Store / Library … Section Current Day of Week Date Time What Day 151 iPad . Take note of the following: Names are configurable. but the eVar number should not be changed.Events State Disabled Enabled Enabled Disabled Disabled Disabled 3. Custom Conversion Insight Variables (eVars) eVar # Name 3 4 5 6 11 12 13 24 27 28 30 31 32 Unique ID Merchandising Category … App Name . use the below table. Custom traffic variables in SiteCatalyst (continued) Property # 21 22 24 48 49 50 Name Traffic .2.2 Custom Conversion Insight Variables To set up Custom Conversion Insight Variables (eVars) in SiteCatalyst. refer Table 3.Product Name is Subscriber Issue Custom Insight 48 Video Tracking Not For Use .Appendix K Omniture Integration Table 3.1.”. When variables refer to traffic variables (which use the D=C6 syntax). to traffic variables that are not sent from the Reader App.. their names are copied to here.. The values for variables with name “.

specific information is gathered. Expand the Resources folder. Step 6. use the below table.3 Custom Success Events To set up Custom Success Events in SiteCatalyst. . Step 7. Step 9. Step 3. page view App Startup First Time App Startup App Upgrade Media Play Media Stop subscriber download start Type Counter Counter Counter Counter Counter Counter Counter Counter Counter Counter Counter 4. Close the Library Info screen. Select DMAnalytics. perform the following steps: Step 1.3. Select the check box for the Enable opt-out key. Custom Success events Event event1 event3 event4 event5 event6 event7 event11 Name Library Issue hit. Step 2. Choose the Targets tab. The user will have the option to cancel or continue. Reader App Configuration To enable and configure the Analytics API in the Reader App. A list of keys and their values appear. Open the Digital Magazine project in XCode.a Framework and choose Get Info from the context menu. Expand the Frameworks folder. event10 subscriber login event12 subscriber download finish event13 non-subscriber download start event14 non-subscriber download finish Step 5. Right-click the libOmnitureAnalytics. Le ave th e M o d u l e key s et to DMOmnitureAnalyticsModule. Step 10. 152 iPad Step 4. This will display a message to the user informing them that when accessing the magazine.plist. Table 3.Appendix K Omniture Integration 3. Step 8. The Library Info screen appears. select the check box for DigiMag_Template. This is the required value when using Omniture Analytics. In the list of Target Memberships.

Make sure to add the appropriate localization strings with your magazine’s specific legal disclaimer.plist refer to the settings of DigiMagSettings. if not set. Step 11. Fill out the parameters by using the guidelines as shown in table 4 below. These settings can also be set in the Classes/DigiMagSettings. Application name for Omniture Application platform for Omniture Omniture enabled (1) or disabled (0). Table 4.strings file. This has been done because a plist file can be viewed in the app (‘Show Package Content’ will allow you to view the plist).h. A list of default parameters appears.h file. Value woodwing1 <tracking server address>1 7 woodwing1 ipad 1 omni_vid 1825 This value is specific to your account.Appendix K Omniture Integration Enabling this setting is mandatory. Step 12.plist file Key Account Tracking server Backlog expire time in days App name App platform Enabled Visitor cookie ID Visitor cookie ID expiry in days 1 Description Omniture account Omniture tracking server Expire time of the backlog events in number of days. Parameter values for the DMAnalytics. (Optional) In the Localizable. consult your Omniture contact for the correct value. The default settings of the DMAnalytics. 153 iPad . Name of cookie to set with the (hashed version) of the unique device ID The expiration time of the visitor cookie id. the Reader App won’t pass the Apple approval process. Expand the list of Parameters. Step 13. modify and/or localize the strings for the Opt-out dialog box.

Events Table 5 shows the events that are tracked within the application. Called whenever a media file is accessed. name name. slide url issue. Called when the app terminates gracefully. Called whenever a media file (video or audio) is started. Called when user accesses an issue preview. Called when user opens the Library Called when user accesses the magazine cover. but not when in Library. this function is called immediately for the first slide. issue title. issue title. Called when user accesses the Table Of Content of current issue. Table 5. Called when user visits a URL.offset Continued on next page title. Called when the app launches. with optionally the current section. currencyCode. issue. purchaseid section Parameters issue. Note that upon accessing a page containing a slide show. Called when user accesses the News Feed screen Called when user accesses a page Called when user accesses an ad page Called when user accesses a slide in a slide show. Events tracked within the application Event hitDownloadIssueWithCategory hitVisitToStoreLandingPage hitVisitToLibrary hitVisitToCover hitVisitFreePreviewPageWithCategory hitVisitCurrentIssueTOC hitVisitToNewsFeed hitVisitToPage hitVisitToAd hitSlideForSlideShowOnPage hitVisitToURL appLaunch appExit mediaOpen mediaPlay Trigger Called when an issue is going to be downloaded. section. Called when user opens the Store. purchaseId 154 iPad . after having bought one.Appendix K Omniture Integration 5. length. section. price. section.

offset hotspotid 155 iPad . Called when a Hotspot opens Value name name.Appendix K Omniture Integration Table 5. Events tracked within the application (continued) Key mediaClose mediaStop hotSpotOpen Description Called when a media file (video or audio) is closed. Called when a media file (video or audio) is stopped.

“subscriber”. Variables for SubscriberLogin Variable events prop22 pageName prop16 prop6 trackLink linkType linkName Value “event10”. Variables for HotspotOpen Variable prop14 prop9 eVar21 events trackLink linkType linkName Value prop6.1b.1a. “<platform>kiosk|signin” “<platform>kiosk|signin” “o” “signin”. split into tracks and track links. <pageName> “o” SubscriberLogin Table 6. “D=c9”. “event9”. “kiosk”. 6. Variables The sections below show the variables that are sent with every request. <hotSpotId>. “kiosk|signin”. 156 iPad “hotspot” .Appendix K Omniture Integration 6.1 Tracks HotspotOpen Table 6.

event4. event4 = if first time. Variables for appLaunch Variable events pageName prop16 prop6 trackLink: linkType: linkName: Value “event3. event5 = upgrade) “app” “other” “<prop11>|<pageName>” “app” “o” “app” hitDownloadIssueWithCategory Event Table 4c.1c.Appendix K Omniture Integration appLaunch Table 6.1d.event5” (event3 = startup. Variables for hitVisitToURL Variable events tracklink linkType linkName pageName Value “event1” “<url> “ “e” “<url>” “library | <pageName>” 157 iPad . Variables for hitDownloadIssueWithCategory Variable events products purchaseID pageName prop16 prop6 track link linkType linkName Value “purchase” <purchase parameters> <purchase id> “store” “store” “<prop11>|<pageName>” “o” “store” “store” currencyCode <currency code of app store> hitVisitToURL Table 6.

2a. <pageName>. <mediaURL>. “event7”.prop9.eVar21. Variables for mediaClose Variable trackVars eVar20 prop9 prop14 eVar21 Value “eVar20. “event6”. “Media”: <mediaURL>.Appendix K Omniture Integration 6.prop14”. <pageName>. <pageName>.prop9. “D=c9”.prop14”.2c. <mediaURL>. Variables for mediaOpen Variable trackVars eVar20 prop9 prop14 eVar21 Value “eVar20.eVar21.2 Track Links mediaOpen Table 6. mediaClose Table 6. <pageName>. “Media:” <mediaURL>. “event6”.prop9.2b. “event7”. Variables for mediaPlay Variable trackVars trackEvents eVar20 events prop9 prop14 eVar21 Value “eVar20.events.prop14”.2d. “Media: “ <mediaURL>.eVar21. Variables for mediaStop Variable trackVars trackEvents eVar20 events prop9 prop14 Value “eVar20. “D=c9”. <name>. <mediaURL>.eVar21.prop14”.events. 158 iPad mediaPlay mediaStop . Media: <mediaURL>.prop9. “D=c9”. Table 6. Table 6.

Appendix K Omniture Integration hitVisitToExistingPrintSubscriber Table 6. Variables for hitVisitToExistingPrintSubscriber Variable pageName prop6 Value “store|existing print subscriber” “store|existing print subscriber” hitSlideForSlideShowOnPage Table 6. Variables for hitVisitToSubscribe Variable pageName prop6 Value “store|subscribe” “store|subscribe” hitVisitToAd Table 6. Variables for hitSlideForSlideShowOnPage Variable events pageName prop16 prop20 prop6 prop8 Value “event1” “library|<issue>|<title>-<pageid>|slideshow-<slide>” “library” “<issue>” “<prop11>|<pageName>” “<section>” hitVisitToSubscribe Table 6.2h. Variables for hitVisitToAd Variable events pageName prop16 prop20 prop6 prop8 Value “event1” “ads|<issue>|<section>|<title>-<pageid>” “library” “<issue>” “<prop11>|<pageName>” “ads” 159 iPad .2e.2f.2g.

Variables for hitVisitToCurrentIssueTOC Variable prop16 prop6 prop20 prop8 Value “library” “library|<issue>|toc” <issue> “toc” hitVisitFreePreviewWithIssueInfo hitVisitToNewsFeed Table 6.2j. Variables for hitVisitToNewsFeed Variable pageName prop16 prop6 Value “newsfeed” “other” “newsfeed” Variable pageName prop16 prop6 Value “store|<issue>|preview” “store” “store|<issue>|preview” 160 iPad Table 6. Variables for hitVisitFreePreviewWithIssueInfo .Appendix K Omniture Integration hitVisitToPage Table 6.2l. Variables for hitVisitToPage Variable events pageName prop16 prop6 prop20 prop8 Value “event1” “library|<issue>|<section>| <title>-<pageid>” “library” “<prop11>|<pageName>” “<issue>” “<section>” hitVisitToCurrentIssueTOC Table 6.2m.2k.

2p.Appendix K Omniture Integration hitVisitToCover Table 6.2o.2n. Variables for hitVisitToLibrary Variable events pageName prop16 prop6 Value “event1” “library” “library” “<prop11>|<pageName>” hitVisitToLibraryCover Table 6. Variables for hitVisitToCover Variable events pageName prop16 prop6 prop24 Value “event1” “store|<issue> | landing page” “store” “<prop11>|<pageName>” “<issue>” hitVisitToLibrary Table 6. Variables for hitVisitToLibraryCover Variable events pageName prop16 prop6 prop20 Value “event1” “library|<issue>” “library” “<prop11>|<pageName>” “<issue>” Table 6.2q.event1” <purchase parameters> <purchase id> “store|<issue id>|preview” “store” “<prop11>|<pageName>” 161 iPad hitVisitToStoreLandingPage . Variables for hitVisitToStoreLandingPage Variable events products purchaseID pageName prop16 prop6 Value “prodView.

Variables for downloadFinished Variable events products pageName prop6 prop20 prop16 prop6 trackLink linkType linkName Value For subscribers: “event12” Else: “event14” “<issue>” “Library | <issue>” “Library | <issue>” “<issue>” “library” “<issue>” “o” @”downloaded” “Library | <issue>” 162 iPad .2s. Variables for downloadStarted Variable events products pageName prop6 prop20 prop16 trackLink linkType linkName Value For subscribers: “event11” Else: “event13” “<issue>” “Library | <issue>” “pageName” “<issue>” “library” “<issue>” “o” “downloading” downloadFinished Table 6.2r.Appendix K Omniture Integration downloadStarted Table 6.

Variables sent with all tracks Variable channel prop3 prop7 prop10 prop11 prop12 prop18 prop19 prop22 eVar3 visitorID eVar4 eVar5 eVar6 eVar11 eVar12 eVar13 eVar22 eVar23 eVar24 eVar27 eVar28 eVar30 eVar32 “D=c8” “<current day of week>” “<what day>” Value “<app name> <platform>” “D=User-Agent” “<date>-<time>” “<platform>” “<app name> <platform>” “itunes” “<orientation>” “subscriber or non-subscriber” “<unique id>” “<unique id>” “D=c4” “D=c5” “D=c6” “<app name> <platform> <version>” “D=c12” “<installed date>” “D=c22” “D=c20” “D=c16” “offline” or empty 163 iPad . Variables Sent with all Tracks Table 7.Appendix K Omniture Integration 7.

L Subscription Server Integration This appendix contains information about integrating a subscription service using an external subscription server. 164 iPad Setting up the Subscription functionality using an external subscription server involves the following steps: . Store With Subscription Functionality. Configuring the Content Delivery Platform. For information about subscribing using the Reader App. Step 2. Each step is explained in the following sections. Using the Reader App – section 9. and customizing the Reader App for use with a subscription service. see chapter 4. see appendix M.1. Steps To Follow Step 1. C o nf i g u r i n g th e S u b s c r i p t i o n environment. 1. For information about integrating an Apple iTunes subscription service. iTunes Subscription Server Integration.

Note that one page is used for both orientations. A Web page for advertising subscription offers in the Reader App. This page is shown full screen in the Reader App. This page is shown full screen in the Reader App. various Web pages need to be available. This page is shown full screen in the Reader App.1 Web Pages In order to let the user interact with the subscription service. This page is part of the HTML Store. 165 iPad which users can use for upgrading their subscription. A Web page License agreement page. The following Web pages need to be prepared: Subscription page. This page is shown full screen in the Reader App. This page is shown full screen in the Reader App. A Web page with infor- mation about how the user’s data is gathered. Customizing the HTML Store – section 2. used.1 Configuring the Subscription Environment The subscription environment consists of the following components: Web pages with specific information or 1. Privacy notice page. A Web page with information about the license agreement for the subscription.1. Note that one page is used for both orientations. users can use for subscribing to a subscription.Appendix L Subscription Server Integration 1. Customer service page. A Web page which Subscription offers page. Subscription Upgrade page. and managed. The Store. users can use for resetting their password. A Web page which functionality The Subscription server How to configure each is explained in the following sections. . A Web page which users can use for obtaining customer service. see appendix G. Reset password page. For more information about customizing this page. This page is shown full screen in the Reader App.

The DMSettings.2.2. the corresponding values in the Reader App settings also need to be changed.2 below.1.1.Appendix L Subscription Server Integration 1. The server components and their values are shown in table 1.1. Store Settings. (see appendix E. This is achieved by matching the key values on the server to those of the Reader App.plist file – section 3. When different values are used.2 Subscription Server In order for the Reader App and the Subscription server to properly communicate with each other.) Table 1. various server components need to be linked to those of the Reader App. Subscription server components Keyname Vertical offer Reset password Horizontal offer Upgrade subscription URL Subscription URL License agreement Privacy notice Customer service Type String String String String String String String String Default value verticalOffer resetPassword horizontalOffer upgradeSubscription buySubscription license privacy myAccount Description URL to the offer page in portrait mode URL to the Reset Password page URL to the offer page in landscape mode URL to the Upgrade subscription page URL to the subscription page URL to the License Agreement page URL to the Privacy Notice page URL to the Account page 166 iPad .

2 Configuring the Content Delivery Platform The Content Delivery Platform platform needs to be connected to the Subscription server. see appendix F.4.3. For instructions about how to achieve this.Appendix L Subscription Server Integration 1. Using the Content Delivery Platform – section 3. Adding a Subscription. 167 iPad .

Step 3. Configuring the Content Delivery Platform. see appendix L. see chapter 4. Subscription Server Integration. Each step is explained in the following sections. Step 2. Store With Subscription Functionality.1. For information about integrating any other external subscription service. For information about subscribing using the Reader App. 1. Using the Reader App – section 9.M iTunes Subscription Server Integration This appendix contains information about integrating the Apple iTunes subscription server in the iPad Reader App and customizing the Reader App for use with a subscription service. 168 iPad Setting up the Subscription functionality using the iTunes subscription server involves the following steps: . Configuring the Reader App. C o nf i g u r i n g th e S u b s c r i p t i o n environment. Steps To Follow Step 1.

used for advertising subscription offers.1. both used in the Reader App: The Subscription offer page. the user logs in to the iTunes Connect service by using the iTunes account.) is handled by Apple. Only two additional Web pages need to be made available.Appendix M iTunes Subscription Server Integration Step 1. Each Web page is described in the following sections. The Subscription Environment The subscription environment consists of the following components: Web pages with specific information or The iTunes Subscription server Step 1. All user interaction with this account (such as subscribing. Web Pages When using the iTunes subscription server. 169 iPad . etc. viewing account details. A Web page used for offering various kinds of account options. The MyAccount Page. A Web page functionality How to configure each is explained in the following sections.

The iTunes Subscription Service.1. The Subscription Offer Page The Subcription offer page is part of the HTML Store. (For more information about how to use this functionality.) Figure 1.0.1. Step 1. see chapter 4.Appendix M iTunes Subscription Server Integration Step 1. Currently only one option is available: that of transferring issues between different iPads.1. see appendix G Customizing the HTML Store.0. section 3.0.7. The MyAccount Page The myAccount page is used for offering various kinds of account options. For information about customizing this page.2.2. The default myAccount page 170 iPad . iTunes Subscription Offer Page. Using the Reader App – section 12.

CSS reference: CSS file: myaccount.header-container .png. The look & feel of the page can be changed by customizing the following components: The text displayed on the page The images displayed on the page The design of the page Images The following images can be customized: BG1. Reference: HTML file: myaccount. the areas at the top and bottom of the page. loader. make sure that the page contains at least one button which links to ww://restoresubscriptions.html file. Pages in the correct dimensions for each orientation (landscape and portrait) are automatically created during the building process of the Reader App.html Attribute: <div class="header-container" id=" header.Appendix M iTunes Subscription Server Integration An example myAccount page is provided in the project and can be found in the following location: Resources/myAccount/ Text The text which is displayed on the page is derived from the myAccount. Adjust or localize the text as required.css Class selectors: .html Attribute: <div class="container" id="container"> 171 iPad . The graphic which visualizes the Creating a custom page When creating a custom page from scratch.footer-container transfer process between iPads. Reference: HTML file: myaccount. The images for the background of Each is described on the following pages.gif. This is to make sure that subscriptions can be copied to another iPad.container"> iPad.png.A loader displayed during the transfer process.

h2 Text color. Class selector: .page-container Heading size.buttontransfer .h1 . Class selector: . Class selector: .body Page background.2. iTunes Subscription Server Configuring the iTunes Subscription Server is done by performing the following steps: Adding the subscription offers Generating a secret key Each is explained in the following sections. Some of the page components which can be controlled through this file include: Font family.li Transfer button. Class selector: . Class selector: . 172 iPad . Class selectors: .css file.ul Text margins.buttontransfer p Step 1.Appendix M iTunes Subscription Server Integration Design The design of the page is controlled by the myaccount.

Step 3. Choose New to create a new Family Name or choose an existing Family Name. Adding the Subscription Offers Each subscription offer is added as an In App purchase by performing the following steps: Step 1. 180. For the Reader App for which a subscription needs to be created. Repeat Steps 2 and 3 to add additional subscription offers as needed. 60. shown in iTunes Connect to identify the subscription. Subscription Duration: choose from 7. . the subscribed user will have access to the following issues (the date that will be used to check if an issue is included in a 173 iPad Step 4. The Create New In App Purchase screen appears. Family Name. Price Tier: Select the price tier that you want for the selected duration. Subscriptions can only be based on one of these time-limited offers (meaning that issues cannot be offered as part of a specific subscription or duration). Step 2. 30.1.Appendix M iTunes Subscription Server Integration Step 1. subscription. or 365 days. During the subscription period. Product ID: A unique ID for the Type: Auto-Renewable. create a new In App purchase. Enter the following information: Reference Name: The name that is subscription or not is the publication date as defined on the CDP): All published paid issues All subscription-only issues The last issue published before the user subscribed Cleared for Sale: select this option. 90.2. The price tiers are the same as those for the issue. Only multiple subscriptions within one family are supported. Log in to iTunes Connect.

a Shared Secret needs to be created and subsequently sent to WoodWing.2. follow the steps as outlined in appendix F. Step 2. Generating a Shared Secret In order to validate the subscriptions on the CDS side with the iTunes server. as defined Step 2. S e n d t h e g e n e r a te d c o d e to WoodWing by using the following e-mail address: services@woodwing. Configuring Reader Apps. Step 3. Perform the following steps: Step 1.com. on the Content Delivery Platform Generated secret key 174 iPad . Configuring the CDP The Reader App on the Content Delivery Platform also needs to be configured with the required subscriptions. Access the In App Purchases overview page for the Reader App on iTunes Connect.1. To do this.Appendix M iTunes Subscription Server Integration Step 1. Using the Content Delivery Platform – section 4. Include the following information: Customer name Product ID of the Reader App.1. Click Generate Shared Secret.

All other options available in the Store/Subscriptions section are for use by non-iTunes Subscription services. Used for entering the path to the MyAccount page when stored on a local system.Appendix M iTunes Subscription Server Integration Step 3. 175 iPad . Configuring the Reader App The iTunes Subscription functionality in the Reader App consists of the following DMSetting: Store/Subscriptions/Customer service.

These differences could be caused by features that are specific to a particular platform only. Table 1 on the next page shows the list of Reader App features and their availability for each Reader App version.N Reader App Features Comparison Different versions of the Reader App exist. each with different features. or because the development of one Reader App is not yet as advanced as another. 176 .

3 (Honeycomb) HTML5 1.compared by Reader App version Reader App Version Feature Navigation bar Action bar Navigation bar / Action bar buttons Buy button Library button Magazine button Cover button TOC button External back button Navigation Contents button Newsfeed button Help button Account button Custom button Always display Navigation bar Show toolbar on opening issue Section Viewer Hide Section Viewer Story Viewer / Page Viewer Pages grouped by story iPad 2.Appendix N Reader App Features Comparison Table 1.3 (Froyo) Android 1.0                                                                                 (Continues on next page) 177 . Reader App features .1 Android 1.

3 (Froyo) Android 1.compared by Reader App version (Continued) Reader App Version Feature Story Viewer / Page Viewer Page numbers Page scrubber Top Toolbar Image icon Always display top Toolbar Action bar Image icon Forward/Back buttons In Navigation bar Navigation (Continued) TOC List Option to disable Bookmarks Hotzones Horizontal page navigation Story navigation Two-finger swiping Right-to-left support Orientation lock Link to Store or Library in Web Element Access Store on app launch 178 iPad 2.Appendix N Reader App Features Comparison Table 1.3 (Honeycomb) HTML5 1.1 Android 1.0                                                                                     (Continues on next page) . Reader App features .

compared by Reader App version (Continued) Reader App Version Feature Video Pinching movement for full screen view Done button Aspect ratio button Remove video after play Hide video controls Audio Audio Control Audio continues playing when navigating to another page Dynamic content Hidden audio controls Slide Shows Hotspots Tap-through Hotspot Web Elements Automatically scale content to fit screen Widgets Scrollable Areas Web Links Dossier Links On a layout iPad 2.3 (Froyo) Android 1.1 Android 1.0                                                                                 (Continues on next page) 179 .Appendix N Reader App Features Comparison Table 1. Reader App features .3 (Honeycomb) HTML5 1.

1 Android 1.3 (Honeycomb) HTML5 1. Reader App features .Appendix N Reader App Features Comparison Table 1.0                                                                                 (Continues on next page) 180 .3 (Froyo) Android 1.compared by Reader App version (Continued) Reader App Version Feature Dossier Links (Continued) Dynamic content (Continued) In a Web Element Fullscreen overlay window Newsfeed Newsfeed Full screen Fallback Newsfeed page Text View Push Notifications Text View Push notifications (messages) Content Sharing Content Sharing Share Hyperlink Share page Share part of a page HTML Store Store Filters Subscriptions (non-iTunes) Store Subscriptions (iTunes) Mixed subscriptions support In-app purchase 3G downloading Library Library iPad 2.

3 (Froyo) Android 1.compared by Reader App version (Continued) Reader App Version Feature Segments Library (Continued) Library filter Segment filter Library caching Non-progressive Downloading issues Progressive Auto open after/during download All Segments in one download Customization Internet Version info APIs Custom Home page No Internet indicators Version info Fit page when device dimensions do not match page dimensions Display message when device dimensions do not match page dimensions Analytics Magazine encryption Newsstand support iPad 2.3 (Honeycomb) HTML5 1.0                                                                     Page fitting Analytics Magazine encryption iOS 5 Newsstand 181 .Appendix N Reader App Features Comparison Table 1. Reader App features .1 Android 1.

The following open source software is used: android-plist-parser. Used by 182 . The license terms associated with this software require that we give copyright and license information. Jackson Java JSON-processor. the Android Reader App for parsing the json file.O Licenses WoodWing Software incorporates certain open source software in specific components of the Digital Magazine solution. this appendix provides those details. Used by the Android Reader App for parsing the DMSettings.plist file.

BUT NOT LIMITED TO.com) All rights reserved. android-plist-parser https://github.0/ You are free to copy. See below. E XEMPL ARY.sf. The Android PList parser (android-plist-parser) is distributed in the hope that it will be useful. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT. EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. with or without modification. (base64 at miginfocom -dot.java (net. Redistributions in binary form must reproduce the above copyright notice. License This work is licensed under Creative Commons and BSD licenses. SPECIAL. OR CONSEQUENTIAL DAMAGES (INCLUDING. this list of conditions and the following disclaimer.longeitysoft. INCLUDING. but WITHOUT ANY WARRANTY. are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice. STRICT LIABILITY.com) with link. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES. LOSS OF USE. PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES.com/tenaciousRas/android-plist-parser Base64. Android PList Parser (com. Mikael Grev. WHETHER IN CONTRACT. BUT NOT LIMITED TO. INCIDENTAL. OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY.0 Unported license. INDIRECT.org/licenses/by/3.freebeachler. You must attribute android-plist-parser to Free Beachler (http://www. http://creativecommons. and to adapt the work. 183 . DATA. android) Licensed under Creative Commons Attribution 3. Copyright (c) 2004. OR PROFITS. distribute and transmit the work.migbase64) Licensed under the BSD Open Source license. MiG InfoCom AB. without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. Neither the name of the MiG InfoCom AB nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. Redistribution and use in source and binary forms. OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE.Appendix O Licenses 1.

“control” means (i) the power. generated documentation.codehaus. an original work of authorship. the Work and Derivative Works thereof. or (ii) ownership of fifty percent (50%) or more of the outstanding shares. and configuration files. documentation source. and conversions to other media types. direct or indirect. For the purposes of this License. as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).apache. including but not limited to compiled object code. annotations. “License” shall mean the terms and conditions for use. including but not limited to software source code.Appendix O Licenses 2. whether in Source or Object form. and issue tracking systems that are managed by. or are under common control with that entity. “Object” form shall mean any form resulting from mechanical transformation or translation of a Source form. made available under the License. that is based on (or derived from) the Work and for which the editorial revisions. “Derivative Works” shall mean any work. that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. “Contribution” shall mean any work of authorship. “submitted” means any form of electronic. “Work” shall mean the work of authorship.org/licenses/ TERMS AND CONDITIONS FOR USE. or (iii) beneficial ownership of such entity. verbal. REPRODUCTION.org/ License Apache License Version 2. or merely link (or bind by name) to the interfaces of. reproduction. or on behalf of. elaborations. Definitions. source code control systems. to cause the direction or management of such entity. Jackson Java JSON-processor http://jackson. but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as “Not a Contribution. and distribution as defined by Sections 1 through 9 of this document. whether in Source or Object form. Derivative Works shall not include works that remain separable from. including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof. or written communication sent to the Licensor or its representatives. “You” (or “Your”) shall mean an individual or Legal Entity exercising permissions granted by this License.0. including but not limited to communication on electronic mailing lists. as a whole. are controlled by. “Source” form shall mean the preferred form for making modifications. “Legal Entity” shall mean the union of the acting entity and all other entities that control. AND DISTRIBUTION 1. “Licensor” shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. January 2004 http://www. the Licensor for the purpose of discussing and improving the Work. For the purposes of this definition. or other modifications represent. For the purposes of this definition.” 184 . whether by contract or otherwise.

irrevocable copyright license to reproduce. import. reproduction. reproduction. each Contributor hereby grants to You a perpetual. and (b) You must cause any modified files to carry prominent notices stating that You changed the files. where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. Notwithstanding the above. no-charge. royalty-free. publicly display. without any additional terms or conditions. Subject to the terms and conditions of this License. Grant of Patent License. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium.Appendix O Licenses “Contributor” shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 5. publicly perform. then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file. 4. no-charge. offer to sell. Grant of Copyright License. within the Source form or documentation. royalty-free. Unless You explicitly state otherwise. and distribute the Work and such Derivative Works in Source or Object form. or for any such Derivative Works as a whole. sublicense. each Contributor hereby grants to You a perpetual. sell. or. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement. excluding those notices that do not pertain to any part of the Derivative Works. if provided along with the Derivative Works. in the Source form of any Derivative Works that You distribute. provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License. with or without modifications. have made. non-exclusive. if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute. provided Your use. non-exclusive. and attribution notices from the Source form of the Work. patent. then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. prepare Derivative Works of. alongside or as an addendum to the NOTICE text from the Work. any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License. Subject to the terms and conditions of this License. all copyright. and otherwise transfer the Work. excluding those notices that do not pertain to any part of the Derivative Works. and (c) You must retain. nothing herein shall supersede or modify the 185 . worldwide. 3. use. irrevocable (except as stated in this section) patent license to make. in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works. and (d) If the Work includes a “NOTICE” text file as part of its distribution. Submission of Contributions. and distribution of the Work otherwise complies with the conditions stated in this License. and in Source or Object form. worldwide. trademark. 2. provided that such additional attribution notices cannot be construed as modifying the License. or distribution of Your modifications. within a display generated by the Derivative Works.

6. or otherwise. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND. special. attach the following boilerplate notice. indemnity. Accepting Warranty or Additional Liability. shall any Contributor be liable to You for damages. This License does not grant permission to use the trade names. While redistributing the Work or Derivative Works thereof. without limitation. We also recommend that a file or class name and description of purpose be included on the same “printed page” as the copyright notice for easier identification within third-party archives.0 (the “License”). acceptance of support. Unless required by applicable law or agreed to in writing. work stoppage.org/licenses/LICENSE-2. However. or claims asserted against. NON-INFRINGEMENT. contract. (Don’t include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. computer failure or malfunction. 8. not on behalf of any other Contributor. In no event and under no legal theory. warranty. 7. To apply the Apache License to your work. indirect. and charge a fee for. or product names of the Licensor. you may not use this file except in compliance with the License. in accepting such obligations. or other liability obligations and/or rights consistent with this License. Licensor provides the Work (and each Contributor provides its Contributions) on an “AS IS” BASIS. either express or implied. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.apache. and only if You agree to indemnify. except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.0 Unless required by applicable law or agreed to in writing. incidental. 186 . You may choose to offer. See the License for the specific language governing permissions and limitations under the License. MERCHANTABILITY. unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing. defend. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License. Trademarks.Appendix O Licenses terms of any separate license agreement you may have executed with Licensor regarding such Contributions. You may obtain a copy of the License at http://www. You may act only on Your own behalf and on Your sole responsibility. either express or implied. including. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. even if such Contributor has been advised of the possibility of such damages. or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill. Disclaimer of Warranty. service marks. Limitation of Liability. with the fields enclosed by brackets “[]” replaced with your own identifying information. 9. Version 2. or any and all other commercial damages or losses). software distributed under the License is distributed on an “AS IS” BASIS. including any direct. or FITNESS FOR A PARTICULAR PURPOSE. trademarks. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. whether in tort (including negligence). such Contributor by reason of your accepting any such warranty or additional liability. any warranties or conditions of TITLE. and hold each Contributor harmless for any liability incurred by.

© 2011 WoodWing Software og s WoodWing Europe Zaandam. All other trademarks are the property of their respective owners. The Adobe logo.com er www. Michigan USA Tel +1 313 962 0542 usa@woodwing. features and specifications are subject to change without prior notice.com .com WoodWing USA Detroit. The Netherlands Tel +31 75 61 43 400 info@woodwing. Malaysia Tel +60 3 8320 1839 asiapacific@woodwing.woodwing.com WoodWing Latin America Monterrey NL.com WoodWing Asia Pacific Selangor Darul Ehsan. InDesign and InCopy are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mexico Tel +52 1 81 88345 8927 latinam@woodwing.nection hen Products.