DM Reader App User Guide v1.1.13

Smart Publishing

User Guide

Digital Magazine Reader App

Digital MagazineReader App User Guide

document version 1.1.13

Legal Disclaimer

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

Digital Magazine Reader App User GuideNo part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, record-ing, 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 accor-dance 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 NoteThis 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.

iii

WoodWing Publishing Solutions

About WoodWing SoftwareSince 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 avail-able 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.

Enterprise Content Publishing SystemThe Enterprise content publishing system forms the rock-solid 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 plan-ning, 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.

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

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 publish-ing process. Content Station is available in a Pro Edition, Basic Edition, and a Free Edition.

Brand StationBrand 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 guide-lines, 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 tem-plates according to company guidelines. After approval by the Brand Owner, Brand Users can access these tem-plates in Brand Station, customize them to a predefined extent, and create publication-ready files, all using just a Web browser.

WoodWing Productivity Plug-insWoodWing 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 StylesThe 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.


iv


Smart LayoutSmart Layout optimizes and speeds up the layout pro-cess 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 relation-ship between these elements.

Smart Layout’s intelligent behavior and automatic pro-cesses strongly improve the efficiency of InDesign users working with multiple columns of text. This is of partic-ular interest for newspapers and magazines with tight deadlines.

Smart CatalogSmart Catalog is a scalable and powerful solution to pub-lish variable data right from inside Adobe InDesign. Smart Catalog links data from a plain text- or XML file, or a data-base 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 pub-lication 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 ToolsWoodWing’s Digital Magazine Tools are an extension to the Enterprise Publishing System. These tools enable publishers to easily create beautifully-designed and com-pelling 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.

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

http://www.woodwing.com/

vi

Contents

Contents

Chapter 01 | Introduction �� 11. Purpose and Target Readers �� 12. Product Versions �� 23. Working Environment �� 24. Using This User Guide �� 2

4.1 Sections �� 24.2 Icons �� 34.3 Navigating the PDF �� 3

5. Additional Documentation �� 46. Feedback �� 4Chapter 02 | About the Reader App �� 51. Available Projects �� 62. Functionality �� 73. Ways of Customizing �� 74. Distribution �� 8

4.1 Getting the Content on the Device �� 84.2 Distribution and Payment Models �� 9

5. New Features and Changes �� 105.1 New Features �� 10

5.1.1 Android Reader App �� 105.1.2 iPad Reader App �� 135.1.3 Content Delivery Platform �� 13

5.2 Changes �� 14Chapter 03 | The Concept �� 161. Page Orientation �� 162. Page Dimensions �� 173. Stories, Pages, Sections and Segments �� 18Chapter 04 | Using the Reader App ��231. Features by Platform��232. Basic Viewing �� 243. Requirements ��264. Page Scaling �� 275. Accessing the Reader App ��286. Accessing the Magazine ��29

6.1 From Within the Reader App��296.2 From Within the Newsstand ��30

7. Navigation Tools ��327.1 Top Toolbar ��34

7.1.1 TOC List ��347.2 Navigation Bar ��35

7.2.1 The Back Button ��367.2.2 The Forward Button ��367.2.3 The Buy Button ��367.2.4 The Library Button �� 377.2.5 The Cover Button ��387.2.6 The TOC Button ��387.2.7 The Contents Button ��387.2.8 The Newsfeed Button ��397.2.9 The Help Button ��397.2.10 The Account Button ��39

7.3 Action Bar ��408. Navigating the Reader App ��42

8.1 Hotzones ��438.2 Navigation Zones ��438.3 Gestures ��448.4 Section Viewer ��448.5 Story Viewer / Page Viewer ��458.6 Page Scrubber �� 478.7 Forward/Back Buttons �� 478.8 TOC List ��488.9 Bookmarks List ��49

8.9.1 Bookmarking a Story ��508.9.2 Accessing a Bookmark ��508.9.3 Deleting a Bookmark �� 518.9.4 Managing Bookmarks ��52

8.10 Dossier Links ��538.11 Device Rotation ��53

9. Dynamic Content ��549.1 Video ��54

9.1.1 Manual Playback ��559.1.2 Fullscreen Playback ��56

9.2 Audio ��579.2.1 Using Embedded Controls ��589.2.2 Using the Audio Control ��58

9.3 Slide Shows ��599.3.1 Viewing in Frame ��609.3.2 Viewing in Fullscreen Mode ��60

9.4 Hotspots �� 619.5 Web Elements ��629.6 Scrollable Areas ��63

vii

Contents

9.7 Text View ��6310. Newsfeeds ��6511. Sharing Content ��66

11.1 Sharing a Page ��6711.2 Sharing Part of a Page ��6811.3 Sharing a Hyperlink ��6911.4 Reader App Settings �� 70

12. Using the Store �� 7112.1 Store With Subscription Functionality ��73

12.1.1 The iTunes Subscription Service ��7312.1.2 A Non-iTunes Subscription Service �� 7512.1.3 Signing In or Out ��7712.1.4 Subscribing �� 7812.1.5 Upgrading a Subscription ��78

12.2 Navigating the Store ��7912.3 Previewing an Issue ��7912.4 Downloading an Issue ��80

12.4.1 Non-Progressive Downloads ��8212.4.2 Progressive Downloads ��83

13. Using the Library ��8613.1 iPad Reader App Library ��8613.2 Android App Library ��9013.3 Navigating the Library �� 9113.4 Using the Library Filter �� 9113.5 Using the Segment Filter ��9313.6 Downloading Issues and Segments ��9413.7 Opening an Issue or Segment ��9413.8 Deleting an Issue or Segment ��95

14. Custom Home Page ��9615. Version Information ��9616. Reader App Updates �� 9717. Using the HTML5 Reader on a PC �� 97Chapter 05 | Creating Content ��991. Creating a Story ��1012. Creating a Dossier ��1023. Creating a Page ��103

3.1 Page Sizes ��1043.2 Effective Workspace ��1073.3 Landscape Orientation ��1083.4 Portrait Orientation ��1093.5 Text View Mode �� 110

3.5.1 Using InDesign CS4 �� 1103.5.2 Using InDesign CS5 �� 112

3.6 Sections and Page Numbering �� 112

4. Working with DM Artboards �� 1134.1 Creating a DM Artboard �� 1154.2 Switching Between DM Artboards �� 1164.3 Adjusting the DM Artboard �� 1164.4 Assigning Content to a Device �� 1174.5 Points to Note �� 1184.6 Working Without Artboards �� 118

5. Designing a Page �� 1195.1 Creating a Slide Show ��1235.2 Adding a Video �� 125

5.2.1 As a URL �� 1255.2.2 As a File �� 1275.2.3 Auto Play ��1295.2.4 Auto Fullscreen ��129

5.3 Adding an Audio File ��1295.3.1 As a URL ��1305.3.2 As a File �� 1315.3.3 Auto Play ��133

5.4 Creating a Web Element ��1335.4.1 Transparent Web Elements ��1355.4.2 Link to Store and Library ��1355.4.3 Scale Content to Fit Screen ��135

5.5 Creating a Dossier Link ��1365.5.1 On a Layout ��1365.5.2 In a Web Element �� 137

5.6 Basic Hotspots ��1385.6.1 Terms and Components ��1385.6.2 Layers ��1405.6.3 Size and Content �� 1415.6.4 Creation �� 1425.6.5 Creating a Selected Hotspot ��1495.6.6 Creating a Hotspot Close Button �� 1515.6.7 Managing Hotspots using the Layers

Panel �� 1515.7 Hotspots on Hotspots ��154

5.7.1 Terms and Components ��1545.7.2 Creation ��1565.7.3 Creating a Selected Hotspot ��1625.7.4 Creating a Hotspot Close Button ��1625.7.5 Managing Hotspots using the Layers Panel 163

5.8 Using the Hotspot Panel ��1635.9 Creating a Widget ��1655.10 Creating a Scrollable Area ��1665.11 Creating a Custom Object ��169

viii

Contents

5.12 Creating a Help Page ��1695.13 Creating Shared Content �� 170

6. Summary �� 171Chapter 06 | Exporting Content ��1721. The Digital Magazine Application �� 172

1.1 The Search Pane �� 1741.2 The Device Toolbar �� 1741.3 The Story Pane �� 1751.4 The Page Preview panes �� 176

2. Preparing Content for Export �� 1762.1 Magazine Content �� 177

2.1.1 Adding a Story �� 1772.1.2 Verifying the Story’s Content �� 1782.1.3 Removing a Story �� 179

2.2 Story Order �� 1792.3 Dossier Properties ��1802.4 Image Properties ��1802.5 Content Sharing �� 1812.6 Sharing ofip Properties �� 181

3. Exporting Content ��1823.1 Exporting and Page Scaling ��184

4. Summary ��184Chapter 07 | Customizing the iPad Reader App �1851. Required Tools ��1862. Loading a Project ��1863. What Can Be Customized? ��187

3.1 Assets �� 1873.2 Colors ��1893.3 Fonts ��1893.4 Text �� 191

3.4.1 Changing the Text �� 1913.4.2 Changing the Text Color ��1943.4.3 Changing the Language ��194

3.5 Settings ��1964. Previewing Customizations ��1965. General App Settings �� 197

5.1 Reader App Name �� 1975.2 Reader App Assets ��1985.3 Intent Settings ��198

5.3.1 Background Downloading ��1995.4 Background Download Setting ��1995.5 Version Numbering ��200

5.5.1 Version Verification ��2015.5.2 Update Release ��202

6. Navigation ��2036.1 Story vs Page Navigation ��2036.2 Orientation Lock ��2046.3 Right-To-Left Support ��2056.4 Navigation Bar ��205

6.4.1 Tap Area ��2066.4.2 Visibility ��2066.4.3 Items ��2076.4.4 Assets ��2096.4.5 Colors �� 210

6.5 Flipview �� 2116.5.1 Assets �� 2126.5.2 Colors �� 2146.5.3 Fonts �� 2146.5.4 Header �� 2156.5.5 Thumbnail Size �� 2166.5.6 Thumbnail Awareness �� 2166.5.7 Margins �� 2166.5.8 Story Title �� 2176.5.9 Story Bullets �� 2176.5.10 Story Description �� 2186.5.11 Page Scrubber �� 219

6.6 Top Toolbar ��2206.6.1 Availability ��2206.6.2 Visibility ��2216.6.3 Tap Area ��2216.6.4 Items ��2226.6.5 Assets ��2236.6.6 Colors ��224

6.7 Hotzones ��2246.8 Gestures ��225

7. The Store ��2267.1 Communication With the Store ��2267.2 General Store Features ��227

8. The Library��2288.1 General Appearance ��2298.2 Text ��2338.3 Download Settings ��2338.4 Back To Issue Button ��2348.5 Library Filters ��2348.6 Subscription Sign-in ��236

9. General App Features ��2369.1 APIs ��237

9.1.1 Analytics API ��237

ix

Contents

9.1.2 Gestures API ��2389.1.3 Navigation API ��238

9.2 Audio ��2399.2.1 Overlay Assets ��2409.2.2 Embedded Audio Controls ��2409.2.3 Audio Control Pop-Up �� 241

9.3 Bookmarks ��2449.3.1 Enabling the Functionality ��2449.3.2 Changing the Assets ��2459.3.3 Changing the Colors ��2469.3.4 Changing the Fonts ��2469.3.5 Localizing the Text �� 2479.3.6 Changing the Dimensions �� 247

9.4 Content Sharing ��2489.4.1 Adding Custom Metadata ��2489.4.2 Configuring the DigiMagSettings.h File ��2499.4.3 Cleaning the Project Targets ��2499.4.4 Enabling the Functionality ��2509.4.5 Changing the Assets ��2509.4.6 Changing the Colors �� 2519.4.7 Localizing the Text ��252

9.5 Custom Home Page ��2539.5.1 Requirements ��2539.5.2 Header Files ��2549.5.3 Implementation ��255

9.6 Custom Objects ��2579.6.1 Configuring Custom Objects ��259

9.7 Downloading Methods ��2609.7.1 Non-Progressive Downloading ��2609.7.2 Progressive Downloading ��261

9.8 Fullscreen Overlay ��262Step 1. Adding the Settings File ��262Step 2. Adding the Overlay Window Files ��262Step 3. Customization ��262Step 4. Adding the Navigation Bar Button ��263

9.9 iOS 5 iCloud Support ��2639.10 Libraries ��264

9.10.1 Caching ��2649.10.2 Library Filter ��2659.10.3 Library Segment Filter ��266

9.11 Newsfeeds ��2679.12 Newsstand (iOS 5) ��268

9.12.1 Configuration ��2699.13 No Internet Connection Indicators ��272

9.14 Push Notifications (Messages) ��2729.14.1 Configuration ��2739.14.2 Sending Messages ��273

9.15 Slide Shows �� 2749.16 Store Filter ��2759.17 Subscriptions ��276

9.17.1 Configuring the Reader App Functionality �2779.17.2 Modifying the Reader App Appearance ��278

9.18 Text View ��2839.19 TOC List ��284

9.19.1 Enabling the Functionality ��2859.19.2 Changing the Assets ��2859.19.3 Changing the Colors ��2869.19.4 Changing the story text ��2869.19.5 Changing the Width and Height ��2879.19.6 Localizing the Text ��2879.19.7 Changing the Fonts ��288

9.20 Video ��2889.20.1 Overlay Assets ��2899.20.2 Hiding Embedded Video Controls ��290

9.21 Remove Video After Play ��2919.22 Web Elements ��292

Chapter 08 | Building the iPad Reader App ��2931. Preparation ��293

1.1 A Reader App Without Store Functionality ��2941.2 A Reader App With Store Functionality ��2941.3 An App Without Newsstand Functionality ��296

2. Building ��296Chapter 09 | Customizing the Android Reader

App ��2971. Required Tools ��2982. OS Compatibility ��2983. Loading a Project ��2994. Universal Builds �� 3005. What Can Be Customized? ��300

5.1 Drawables ��3015.2 Text ��301

5.2.1 Changing the Text��3025.2.2 Changing the Language ��304

5.3 Settings ��3056. Previewing Customizations ��3057. General App Settings ��306

7.1 Reader App Name ��3067.2 Reader App Drawables ��307

x

Contents

7.3 Web Pages ��3077.3.1 Custom Information ��3087.3.2 Metrics Information ��308

7.4 Version Information �� 3117.5 Intent Settings �� 311

8. Navigation �� 3128.1 Story vs Page Navigation �� 3128.2 Navigation Bar �� 313

8.2.1 Tap Area �� 3148.2.2 Items �� 3148.2.3 Drawables �� 3158.2.4 Visibility Settings �� 317

8.3 Action Bar �� 3178.3.1 Tap Area�� 3188.3.2 Items �� 3188.3.3 Drawables ��3208.3.4 Text ��3238.3.5 Visibility ��323

8.4 Flipview ��3248.4.1 Header ��3258.4.2 Story Viewer / Page Viewer ��3268.4.3 Page Scrubber ��3298.4.4 Section Viewer ��3308.4.5 Close Button ��3318.4.6 Drop Shadow ��332

8.5 Top Toolbar ��3338.5.1 Availability ��3338.5.2 Visibility ��3338.5.3 Tap Area ��3348.5.4 Items ��3348.5.5 Drawables ��335

8.6 Hotzones ��3358.7 Orientation Lock ��336

9. The Store ��3379.1 Communication With the Store ��3389.2 Reader App Components ��339

10. The Library ��34210.1 Subscription Sign-In Window ��34210.2 Library ��345

11. General App Features ��34911.1 Audio ��349

11.1.1 Overlay Drawables ��35011.1.2 Audio Settings ��35011.1.3 Embedded Audio Controls ��351

11.2 Custom Objects ��35111.3 Downloading Methods ��352

11.3.1 Non-progressive Download Method ��35211.3.2 Progressive Download Method ��353

11.4 In-App Billing ��35511.5 Newsfeeds ��35611.6 No Internet Connection Indicators ��35711.7 Scrolling Indicators ��35811.8 Slide Shows ��35911.9 Text View ��35911.10 Video ��360

11.10.1 Overlay Drawables ��36111.10.2 Video Player Drawables ��362

11.11 Hiding Embedded Video Controls ��36311.12 Web Elements ��364

Chapter 10 | Building the Android Reader App ��3651. Universal Builds ��3652. Preparation ��366

2.1 Eclipse ��3662.2 Reader App Without Store Functionality ��3672.3 Reader App With Store Functionality ��367

3. Building ��368Chapter 11 | Customizing the HTML5 Reader

App ��3691. Required Tools ��3702. Project Files ��3703. What Can Be Customized? ��371

3.1 Images ��3723.2 Colors ��3723.3 Text ��3733.4 Settings �� 374

4. Previewing Customizations �� 3745. General App Features ��375

5.1 General Appearance ��3756. Navigation ��378

6.1 Story vs Page Navigation ��3786.2 Navigation Bar ��379

6.2.1 Items ��3796.2.2 Images ��380

6.3 Flipview ��3816.3.1 Background ��3826.3.2 Header ��3826.3.3 Thumbnail Border ��3836.3.4 Story Title ��383

xi

Contents

6.3.5 Story Bullets ��3846.3.6 Story Description ��3846.3.7 Page Scrubber ��385

6.4 Hotzones ��3856.5 Navigation Zones ��3866.6 Top Toolbar ��387

6.6.1 Availability ��3876.6.2 Images ��387

7. General App Features ��3887.1 Audio ��3887.2 Slide Shows ��389

7.2.1 Navigation Zones ��3897.2.2 Overlay Images ��389

7.3 TOC List ��3907.3.1 Enabling the Functionality ��3907.3.2 Changing the story text ��391

7.4 Video ��391Chapter 12 | Building the HTML5 Reader App ��3921. Bundling the Content ��392Chapter 13 | Distributing Reader Apps Without

Store ��3941. Submitting the Reader App ��394

1.1 To the iTunes App Store ��3951.2 To an Android App Store ��395

Chapter 14 | Distributing Reader Apps With Store ��396

1. The Content Delivery Platform ��3972. Distribution Workflow ��3983. Distributing the Reader App ��398

3.1 Updating the Reader App ��3994. Distributing Issues ��400

4.1 Registering With iTunes Connect ��4004.2 Registering With the CDP ��400

Appendix A | Layout Sizes ��4011. Formula ��401

1.1 Device Settings ��4021.2 Page Sizes ��402

Appendix B | Creating Text View Markup Articles ��404

1. Text View Markup ��4042. Requirements ��4053. Creating the Article ��405

3.1 Element Label Mapping ��4063.2 Styles Mapping ��407

4. About Overrides ��4075. Using Tables ��4086. Known Limitations ��4087. Including Images ��409Appendix C | Image Dimensions ��4101. iPad �� 4102. Android �� 4173. HTML Store ��4224. HTML5 Reader App ��422Appendix D | Working With Widgets ��4241. File Format ��4242. File Structure ��4253. Creating the manifest.xml File ��4254. Making the Widget Available ��427Appendix E | The DMSettings File ��4281. File Structure ��4282. Features by Platform ��4293. Overview ��439

3.1 Share Toolbar Settings ��4393.2 Store Settings ��4403.3 Navigation Settings ��441

3.3.1 Color Settings ��4443.3.2 Font Settings��446

3.4 Intents Settings ��4483.5 TOC Popup Settings ��4483.6 Bookmark Popup Settings ��4493.7 Hotzone Settings ��4493.8 Flipview Settings ��4503.9 Library Settings ��4513.10 Metrics ��4523.11 Content ��4533.12 Resolution ��4533.13 Tracking ��4543.14 Web Element Popup ��4543.15 Newsstand ��455

Appendix F | Using the Content Delivery Platform ��456

1. Logging In and Logging Out ��4562. System Structure ��457

2.1 Accessing the Components ��4592.2 User Types ��460

3. Setting Up the CDP Environment ��4633.1 Adding a Domain ��4633.2 Adding a Reader Application ��464

xii

Contents

3.3 Adding a User ��4653.4 Adding an Issue ��465

3.4.1 Adding a Full Issue ��4663.4.2 Adding an Issue in Segments ��4683.4.3 Adding a Subscription �� 471

3.5 Adding a Development Device ��4724. Managing the CDP Environment ��473

4.1 Configuring Reader Apps ��4734.1.1 Configuring the Metadata �� 475

4.2 Managing Issues �� 4754.2.1 Adding an Issue �� 4754.2.2 Deleting an Issue �� 4764.2.3 Editing an Issue �� 4764.2.4 Adding a Rendition ��4774.2.5 Convert to HTML5 ��478

4.3 Managing Segments ��4784.3.1 Adding to a New Issue ��4784.3.2 Adding to an Existing Issue ��4794.3.3 Deleting a Segment ��4804.3.4 Editing an Segment ��4804.3.5 Adding a Rendition ��4814.3.6 Sorting Segments ��482

4.4 Managing Renditions ��4824.4.1 Adding a Rendition ��4834.4.2 Convert to HTML5 ��4844.4.3 Deleting a Rendition ��4854.4.4 Editing an Rendition ��485

4.5 Managing Subscriptions ��4864.5.1 Adding Subscription ��4864.5.2 Deleting a Subscription ��4864.5.3 Editing an Subscription ��4874.5.4 Sorting Subscriptions ��487

4.6 Managing HTML5 Conversions ��4884.6.1 Converting to HTML5 Format ��4894.6.2 Removing Converted Content ��490

4.7 Managing Development Devices ��4904.7.1 Adding a Development Device ��4904.7.2 Deleting a Development Device ��4914.7.3 Editing a Development Device ��491

4.8 Sending a Push Notification (Message) ��4924.8.1 Sending a Message to Users ��4924.8.2 Sending a Newsstand Notification ��494

4.9 Managing Users ��4954.9.1 Adding a User ��495

4.9.2 Editing a User Profile ��4955. Progressive Downloads ��4966. Magazine Encryption ��497Appendix G | Customizing the HTML Store ��4981. Required Tools ��4982. The Store ��499

2.1 Opening Issues Directly From the Store ��5043. Project Files ��505

3.1 Configuration Settings ��5063.2 Images ��5073.3 Colors �� 5133.4 Fonts �� 5153.5 Text �� 516

3.5.1 Changing the Text �� 5163.5.2 Changing the Color �� 517

3.6 Language �� 5183.7 iTunes Subscription Environment �� 519

3.7.1 Page Design ��5213.7.2 Text ��5213.7.3 Text Styling ��5223.7.4 Subscription Buttons ��523

3.8 Non-iTunes Subscription Environment ��5253.8.1 A Sign In/Sign Out Button ��5253.8.2 The Subscription Offer Page ��5273.8.3 The Subscription Button Area ��527

3.9 A Mixed Subscription Environment ��528Appendix H | Tips and Best Practices ��5301. Generating IDs and Keys ��5302. Submitting and Approval Cycles ��531Appendix I | Gestures API ��532Appendix J | Navigation API ��5341. Structure ��5342. Classes��536Appendix K | Omniture Integration ��5421. Prerequisites ��5422. Viewing Data ��5433. Setting Up SiteCatalyst ��546

3.1 Custom Traffic Variables ��5463.2 Custom Conversion Insight Variables ��5473.3 Custom Success Events ��548

4. Reader App Configuration ��5485. Events ��5506. Variables ��552

6.1 Tracks ��552

xiii

Contents

6.2 Track Links ��5547. Variables Sent with all Tracks��559Appendix L | Subscription Server Integration ��5601. Steps To Follow ��560

1.1 Configuring the Subscription Environment ��5611.1.1 Web Pages ��5611.1.2 Subscription Server ��562

1.2 Configuring the Content Delivery Platform ��563Appendix M | iTunes Subscription Server

Integration ��5641. Steps To Follow ��564Step 1. The Subscription Environment ��565

Step 1.1. Web Pages ��565Step 1.0.1. The Subscription Offer Page ��566Step 1.0.2. The MyAccount Page ��566

Step 1.2. iTunes Subscription Server ��568Step 1.2.1. Adding the Subscription Offers ��569Step 1.2.1. Generating a Shared Secret ��570

Step 2. Configuring the CDP ��570Step 3. Configuring the Reader App ��571Appendix N | Reader App Features

Comparison ��572Appendix O | Licenses ��5781. android-plist-parser ��5792. Jackson Java JSON-processor ��580

1

01

1

The following sections explain the purpose of this manual, how to use it, and how to get additional support or provide feedback.

1. Purpose and Target Readers

This user guide explains the process of using the Reader App, creating content for it, as well as customizing, build-ing and distributing the app.

The target audience for this user guide is the WoodWing Partner who uses the documentation to train the cus-tomer/end user in all facets of digital magazine publishing.

For that reason, the Digital Magazine Tools User Guide has been discontinued; its chapters Creating Content and Exporting Content can now be found in the Reader App User Guide which you are reading now.

Introduction

Chapter 01 Introduction

2

2. Product Versions

This user guide is based on the following product versions:

�Enterprise Server version 7.0.13/7.4 �Smart Connection 7.3/7.4 �Content Station 7.3 �Digital Magazine Tools plug-ins 7.3/7.4 �iPad Reader App version 2.1 �Android Reader App version 1.3 (Froyo) �Android Reader App version 1.3 (Honeycomb) �HTML5 Reader App version 1.0 �Content Delivery Platform current version

3. Working Environment

It is assumed in this user guide that a fully working Enterprise environment is set up for working with Digital Magazines. For more information about installing and configuring such an environment, see the Enterprise 7 Admin Guide.

4. Using This User Guide

Please read the following sections to familiarize yourself with some of the symbols and terminology used in the user guide, and some of the features that allow you to navigate the PDF if you are reading it on screen.

4.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

devices �As a dedicated Reader App for use within a

HTML5 Web browser

Because the method of customization and distribution is significantly different for each platform, the process is discussed in different sections of this user guide, each with dedicated chapters. A tab in the margin of the page will indicate the section that the chapter belongs to. If no tab is present, this means that the chapter applies to all types of platforms.


3

4.2 Icons

Various types of note icons are used in this manual. 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.3 Navigating the PDF

To get the most out of this user guide, view the PDF in Adobe Acrobat or Adobe Reader. Adobe Reader

can be downloaded for free from www.adobe.com.

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, the following interactive tools are available:

�Contents. Click on a chapter or section title to immediately open the page.

�Index. Click on a page number following an index entry to immediately open the page.

�Bookmarks Panel. The bookmarks panel displays automatically when opening it. The PDF you open contains all chapters and sections; click on a title to automatically display the page.

�Pages Panel. Click on a page thumbnail to immediately open the page.

�Hyperlinks. Displayed in gray, italic font. These are used to refer to other sections in the manual, Web sites or other external sources. When active, clicking it will forward you to another section within the manual or open a Web site.

http://www.adobe.com/


4

5. Additional Documentation

This user guide frequently refers to the iTunes Connect Developer Guide. This can be downloaded from the fol-lowing location: https://itunesconnect.apple.com/docs/iTunesConnect_DeveloperGuide.pdf.

6. Feedback

Most of your questions about how to use, customize and distribute the Reader App should be answered in this user guide.

For any additional queries, please visit our Knowledge Base first. It provides answers to Frequently Asked Questions as well as tips, hints and background infor-mation. The Knowledge Base is available at WoodWing’s Web site www.woodwing.com under the Support section.

Should you have any questions or feedback about any of the Enterprise products, visit our Community Forum: http://community.woodwing.net/forum/index (user account required).

For any comments, corrections, or other types of feed-back relating to this user guide, please send an e-mail to [email protected].

https://itunesconnect.apple.com/docs/iTunesConnect_DeveloperGuide.pdf

https://itunesconnect.apple.com/docs/iTunesConnect_DeveloperGuide.pdf

http://www.woodwing.com

http://community.woodwing.net/forum/index

mailto:documentation%40woodwing.com?subject=

5

02

5

WoodWing’s Digital Magazine Reader App is a highly functional, highly customizable applica-tion for viewing digital magazines created with WoodWing’s Digital Magazine Tools.

This chapter gives a brief overview of the versions avail-able, its functionality, ways of customizing, the method of distribution, and the new features and changes of the latest release.

About the Reader App

Chapter 02 About the Reader App

6

1. Available Projects

The Digital Magazine Reader App is available in the fol-lowing types of projects:

Apple iPad projects �Basic and Standard. These come without

the Store, Library and Subscription functional-ity and therefore needs to have the magazine content included; each magazine issue is dis-tributed as a separate Reader App.

�Pro and Framework: same as the Basic and Standard projects but with additional Store and Library functionality; the magazine content is downloaded separately after an issue has been purchased (or obtained for free). The Library functionality allows the user to view all down-loaded issues and choose which one to read. Only one Reader App is required to read all issues of the magazine.

�Subscription: same as the Pro and Framework projects but with additional Subscription functionality, allowing users to subscribe to a publication.

�Apple Subscriptions: same as the Pro and Framework projects but with additional Apple Subscription functionality, allowing users to subscribe to a publication via the iTunes sub-scription functionality.

The Apple Subscriptions project can be used to offer Apple Auto-renewable sub-

scriptions only, or combined with non-Apple Subscription services.

Android projects �Basic and Standard. This project comes

without the Store, Library and Subscription functionality and therefore needs to have the magazine content included; each magazine issue is distributed as a separate Reader App.

�Pro and Framework. This project includes Store, Library and Subscription functionality; the magazine content is downloaded separately after an issue has been purchased (or obtained for free). The Library functionality allows the user to view all downloaded issues and choose which one to read. Only one Reader App is required to read all issues of the magazine.

HTML5 projects �Basic. This project comes without the Store,

Library and Subscription functionality and therefore needs to have the magazine content included; each magazine issue is distributed as a separate Reader App.

See also section 3. Ways of Customizing for information about customization and available licenses.


7

2. Functionality

The Reader App contains a multitude of different features and functionality, aimed at providing the best reader expe-rience. Some of the functionality includes:

�Navigational tools such as a Navigation bar, Table of Contents List, Forward and Back but-tons, and a Page Scrubber to quickly browse through the magazine content.

�Dynamic content such as video, audio, slide shows, Hotspots, Web Elements, Widgets, and Scrollable Areas.

�A Store (Pro, Framework, Subscription, and Apple Subscription projects only) for viewing and downloading separate issues.1

�A Library (Pro, Framework, Subscription, and Apple Subscription projects only) for viewing available issues.1

�Subscr ipt ion funct iona l i t y (Pro, Framework, Subscr ipt ion, and Apple Subscription projects only) for viewing issues available as part of a subscription.1

�Customizations. Additional functionality can be added on many levels, for instance by the use of API calls (iPad Reader App only), Reader app embedment in custom applications, and more.

For a detailed overview of all the features and how to use them, see chapter 4, Using the Reader App.

1 Not available on the HTML5 Reader App.

3. Ways of Customizing

The Reader App can be customized2 to reflect the look and feel of your publication. 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

App

For a detailed overview of what can be customized and how this can be done, see the following chapters:

�For the iPad Reader App: chapter 7, Customizing the iPad Reader App.

�For the Android Reader App: chapter 9, Customizing the Android Reader App.

�For the HTML5 Reader App: chapter 11, Customizing the HTML5 Reader App.

Customizations and licensesThe 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.

�Standard/Basic: you are allowed to build 1 App using the Standard/Basic project.

�Framework/Subscriptions/Apple Subscrtiptions: you are allowed to fully cus-tomize the App, as per this user guide.

2 Differences in the number of possible customizations exist between the Reader Apps for the iPad and Android.


8

4. Distribution

Publishing a digital magazine to a digital device is done by distributing the WoodWing Reader App with which the magazine can be viewed.

As a publisher, you have the option to distribute a Reader App in two different ways:

�A Reader App with the magazine content included1

�A Reader App in which the magazine content is downloaded at a later stage

For the first method, the user will have to download a new Reader App for each published issue, each appearing as a separate app on the digital device.

For the second 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. The actual magazine content can subsequently be downloaded onto the digital device as a separate step. This method requires only one Reader App to be down-loaded on the digital device for each title; the user can use the built-in Library to view all available issues, download those that are of interest, and open it for reading.

1 Note that the Android Market only allows apps to be uploaded with a maximum file size of 50MB.

4.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 down-load; the magazine content can be accessed straight away. For this method, each magazine issue is down-loaded as a separate app.

Figure 4.1a. When distributing a Reader App including the content, both are downloaded from an app store as a single download

Tablet app store

Reader App including magazine content

The process of distributing the Reader App separate from the magazine content involves more steps: first, the Reader App is downloaded (typically for free and without content) from the app store. By using the Store function-ality of the Reader App, the user chooses which issue to purchase2. Once the purchase process is complete, the magazine content is downloaded from a dedicated Content Delivery Platform. (See figure 4.1b on the next page.) All downloaded issues can then be viewed using the same Reader App.

2 Issues can also be offered for free, but the process of down-loading these separately is the same.


9

Figure 4.1b. When distributing a Reader App without content, the empty Reader App is downloaded from an app store, while the content is retrieved separately from a Content Delivery Platform

Content Delivery Platform

Tablet

app store

Reader App without content

Magazine content

For more information about distributing a Reader App without Store functionality, see chapter 13,

Distributing Reader Apps Without Store.

For more information about distributing the Reader App with Store functionality, see chapter 14,

Distributing Reader Apps With Store.

4.2 Distribution and Payment Models

As far as distributing the magazine as a package is con-cerned, the following distribution models are available:

�Complete magazine. All magazine content is made available in one download.

For Reader Apps without Store functional-ity, this is the only way of offering content

to the user.

�In segments. (Reader Apps with Store func-tionality only) The magazine is made available in different segments. The user decides which segment to download and in which order. Since the file size of each segment is smaller than the size of the complete magazine, downloading time is reduced. Filters in the Store and Library allow the user to filter on segment type.

When it comes to selling the magazine, the following pay-ment models are available:

�Free of charge. Magazines can be offered fully free of charge.

�Single purchase. Magazines can be offered as a single purchase.

�Subscr ipt ion . (Reader Apps w i th Subscription functionality only). Magazines can be offered as part of a subscription service.


10

5. New Features and Changes

The following sections describe the new features and changes for the current release.

5.1 New Features

The following sections describe the new features which have been introduced per platform.

5.1.1 Android Reader App

The following new features have been implemented in the Android Reader App v1.3:

Universal BuildsThe Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same app, 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.2).

SDK Platform 2.2 API 8 is no longer required; a Reader App build with SDK Platform Android 3.0 API 11 will also run on a Froyo device.

As a result of this change, the frameworks now contain drawables for both Honeycomb and Froyo. The location of all drawables has also been changed. The changes are as follows:

�The hdpi folder is no longer used for Froyo.

�The mdpi folder is no longer used for Honeycomb.

�All drawables shared between Honeycomb and Froyo are located in the drawable-nodpi folder.

�Any Honeycomb-specific drawables are located in the drawable-nodpi-v11 folder. SDK version 3.0

�Any Froyo-specific drawables are located in the drawable-nodpi-v8 folder. SDK 2.2


11

�The drawable-hdpi, drawable-mdpi and draw-able-ldpi folders still exist but only contain the app icon.

For a complete overview of which images are used on a unique platform and which are used on both

platforms, see appendix C, Image Dimensions –section 2, Android.

Progressive download supportSupport for progressive download is now available.

For information about using the progressive download feature, see chapter 4, Using the Reader App – section 12.4.2, Progressive Downloads.

For information about configuring/customizing the pro-gressive download feature, see chapter 9, Customizing the Android Reader App – section 11.3.2, Progressive Download Method.

Custom objectsObjects with custom, 3rd-party functionality can be included in the magazine. The functionality of the ele-ment is completely upon the developer; it can be an extra user interface element, a list connecting to a database, a 3D object, etc.

Auto open magazineAn issue or Segment can now be opened automatically as soon as the download and installation process is com-plete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). This functionality can be controlled through a DMSetting.

For more information, see chapter 9, Customizing the Android Reader App – section 11.3, Downloading Methods.

GesturesA two-finger swipe can now be used for navigating to the first page of the next story (Page navigation only). This functionality can be controlled through a DMSetting.

For more information, see chapter 9, Customizing the Android Reader App – section 8.1, Story vs Page Navigation.

Hotzones overlaying interactive objectsWhen interactive objects (such as Slide Shows, videos, etc.) are placed within the area of a Hotzone, their func-tionality cannot be accessed because of the overlaying Hotzone area. These interactive objects can now be made accessible through a DMSetting.

For more information, see chapter 9, Customizing the Android Reader App – section 8.6, Hotzones.

Scrolling indicatorsNative scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and right-hand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded.

This functionality can be controlled through a DMSetting.

For more information, see chapter 9, Customizing the Android Reader App – section 11.7, Scrolling Indicators.

Account button is context sensitiveThe My Account button (in the Navigation bar and Action bar respectively), responds to the context of the Reader App:

�Froyo: this button is displayed at all times, but only enabled when the Store is accessed.

�Honeycomb: this button is only displayed when the Store is accessed.


12

History buttons as DMSettingThe History (Back/Forward) buttons can now be included or excluded from the toolbars through the ToolbarItems DMSetting.

For more information, see:

�Top Toolbar bar (Froyo): chapter 9, Customizing the Android Reader App – section 8.5.4, Items.

�Action bar (Honeycomb): chapter 9, Customizing the Android Reader App – section 8.3.2, Items.

Maximum number of items displayed in Action barThe maximum number of items to appear on the right-hand side of the Action bar can now be controlled by a DMSetting (up to a maximum of 6).

For more information, see chapter 9, Customizing the Android Reader App – section 8.3.2, Items.

Story bullet display in FlipviewIncluding or excluding Story bullets in the Flipview can now also be controlled for the Honeycomb version of the Reader App.

For more information, see chapter 9, Customizing the Android Reader App – section 8.4.2, Story Viewer / Page Viewer.

Page number display in FlipviewThe Froyo version of the Reader App now also displays page numbers in the Flipview. Including or excluding the page number in the Flipview (for both the Froyo and Honeycomb version of the Reader App) can now be con-trolled through a DMSetting.

For more information, see chapter 9, Customizing the Android Reader App – section 8.4.2, Story Viewer / Page Viewer.

Auto open Flipview on toolbar displayThe Flipview can be made to appear automatically when the Navigation bar/Action bar is displayed. This functional-ity can be set through a DMSetting.

For more information, see chapter 9, Customizing the Android Reader App – section 8.4, Flipview.


13

5.1.2 iPad Reader App

iOS 5 Newssstand supportThe 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.

Newsstand apps must offer at least one auto-renewable In-App Purchase subscription.

Support for iOS 5’s Newsstand functionality is included by default in the following projects:

�Pro Framework �Subscriptions �Apple Subscriptions

When using any of these projects and when not making use of the Newsstand functionality, the

Newsstand functionality needs to be removed from the project.

For information about using the Newsstand feature, see chapter 4, Using the Reader App – section 6.2 From Within the Newsstand.

For information about configuring the Reader App for use with the Newsstand, see chapter 7, Customizing the iPad Reader App – section 9.11 Newsstand (iOS5).

For information about removing the Newsstand func-tionality from a project, see chapter 8, Building the iPad Reader App – section 1.3, An App Without Newsstand Functionality.

5.1.3 Content Delivery Platform

iOS 5 Newssstand supportThe Content Delivery Platform can now be used for send-ing notifications to the Apple iOS 5 Newsstand, informing it that a new version of an issue is available.

For more information, see appendix F, Using the Content Delivery Platform – section 4.8.2 Sending a Newsstand Notification.


14

5.2 Changes

The following changes have been implemented in the Android Reader App v1.3:

Customer projectThe file DigiMag.java that used to exist in the project ‘customer�app’ under the package ‘com.woodwing.app_name’ no longer exists. In previous versions, both the package name in the AndroidManifest.xml file as well as the package name of the DigiMag.java file had to be changed. The latter is no longer necessary/possible; only the package name in the AndroidManifest.xml file has to be changed.

Renaming Reader AppIn order to rename the Reader App, only the AndroidManifest.xml file needs to be modified (previ-ously the com.woodwing.[app name] file also had to be modified).

For more information, see chapter 9, Customizing the Android Reader App – section 7.1, Reader App Name.

Creation of app icon in high dpiApparently the launcher on the Android Honeycomb ver-sion (always) uses the hdpi version of the icon.png, even on mdpi devices. Customers should therefore always cre-ate an ldpi, mdpi and hdpi version of their application icon.

For more information, see chapter 9, Customizing the Android Reader App – section 7.2, Reader App Drawables.

Buttons moved in Action barIn the Action bar in the Honeycomb version of the Reader App, the Newsfeed and Custom button have been moved to the left-hand side of the bar.

For more information, see chapter 9, Customizing the Android Reader App – section 8.3, Action bar.

Drawables made obsoleteThe following drawables have been made obsolete:

�headerbarshadow.png. The shadow as shown below the Library toolbar (Froyo version).

�back_grey.png. The Back button of a Web Element in its non-available state.

�library_top_bar.png. The image used for the top bar (situated between the Action bar and the top Library shelf).

�previewshadowlandscape.png. The shadow between the issue information pane and the issue preview pane (landscape orientation).

�previewshadowportrait.png. The shadow between the issue information pane and the issue preview pane (portrait orientation).

Strings made obsoleteThe following strings have been made obsolete:

�Cover story. The cover story title.

�Successfully logged out. Message appear-ing after user has successfully logged out of the Subscription account.


15

Strings made obsoleteThe 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>

16

03

16

Before delving into the specifics of creating, using, and distributing the Digital Magazine Reader App and its content, it is important to be aware of the methods in which the content itself can be displayed.

This chapter outlines the different types of pages that can be created, and how this affects the way the content is presented to the reader as well as the way it should be navigated.

1. Page Orientation

When reading a magazine on a digital device such as the Apple iPad or Samsung Galaxy Tab using a dedicated Reader App, page orientation can follow the device ori-entation: content is viewed in landscape orientation when the device is held horizontally, or in portrait orientation when the device is held vertically.

Figure 1. The same page can be viewed in landscape orienta-tion (horizontal, left) or in portrait orientation (vertical, right)

For each orientation a different page is loaded, 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, and the same inter-view in the form of a video on a single page in landscape mode).

The Concept

Chapter 03 The Concept

17

2. Page Dimensions

When a designer creates a page, he or she can choose from one of two page dimensions:

1. The page exactly matches the dimen-sions of the screen of the device on which it is viewed. Using this method, a story con-taining multiple pages can be created. (See figure 2a to the right.)

2. The page width matches that of the device, but the page height is taller than the height of the device. Using this method, a single-page story can be created. (See figure 2b to the right.)

As far as navigation goes, the following applies:

�For the first method, 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. The page will automatically position itself to fit the screen.

�For the second method, the page can be scrolled continuously and stopped at any place (much as you would browse a Web page).

Figure 2a. Content set up as separate pages (left), appears and behaves as separate pages on the digital device (right)

Figure 2b. 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)


18

3. Stories, Pages, Sections and Segments

The Digital Magazine Reader App works with the concept of stories, pages, sections, and segments.

StoriesA Story is just that: a story about a particular topic such as an interview with a prominent member of the public, a product review, a trip report, etc.

PagesA story can consist of just a single page or multiple pages1. The way that these stories and pages are dis-played is determined by the way that the Reader App is configured. The following configurations are possible:

�Story navigation. (Default configuration for the iPad Reader App, not available in the Android Reader App) In this configuration, sto-ries are placed next to each other, whereas any pages within a story are placed above each other.

�Page navigation. In this configuration, all pages of all stories are placed next to each other.

This has a direct effect on the way the user navigates the magazine:

�Story navigation. (iPad Reader App only, not available in the Android Reader App) Navigation is done as follows:

�To navigate from one story to another, the user swipes horizontally (from left to right or right to left)

�To navigate within a story, the user swipes vertically (up/down or down/up)

1 Unless the page is taller than the height of the device, in which case the story is always a single-page story.

�Page navigation. Navigation is done as follows:

For touchscreen devices (iPad, Android):

�To navigate from one page to another, the user swipes horizontally (from left to right or right to left) using one finger

�To navigate from story to story (iPad Reader App only), the user swipes hori-zontally (from left to right or right to left) using two fingers

For desktops (HTML5): �To navigate from one page or story to

another, the user clicks on the navigation bars, drags the page with the mouse, or uses the keyboard

The above concept is displayed in the figures on the fol-lowing pages. To see how each method is displayed in the Reader App itself, see chapter 4, Using the Reader App.


19

SectionsStories that share similar content can be grouped together by assigning them to the same section (such as fashion, finance, sports, etc.). The Section Viewer in the Reader App allows the user to quickly navigate to a particular section: when a user taps a section, the first page of the first story in that section is shown.

Figure 3a. The Section Viewer shows all sections of a magazine

Segments(iPad Reader App only) Segments are similar to Sections, but now the grouping is not done within the magazine, but the magazine itself is physically split into different parts, making it possible to download each segment individually. This allows the user to decide in which order to download each part of the magazine. Because only a small part of the magazine is downloaded instead of the full magazine in one go, the download size per download session is also reduced. Both the Store and the Library can be filtered to show content that belongs to a particular segment only.


20

Figure 3b. This figure shows the default navigation method, in which stories (represented by their Dossiers) are accessed by swiping horizontally and pages by swiping vertically. This navigation method is referred to as Story Navigation.

Three stories are shown containing layouts in landscape orien-tation. (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.)

The user would swipe horizontally to navigate between each story. Within the story, the user would swipe vertically to navi-gate the content (either from page to page or scrolling within the page, depending on the setup).

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.

Story B is made up of a layout containing two pages, each exactly matching the device dimensions. Vertical navigation is available to view each page.

Story C is made up of a layout containing a single page which has been made taller than the height of the device. (A typical use for such a page is the table of contents page, as shown here.) Vertical navigation is available by swiping the page.

Page 3

Story A

Layout A1

Page 1

Layout C1

Vertical navigation within the

story

Story CStory B

Layout B1 Layout C1


story

Page 1

Page 2

Horizontal navigation between stories


21


Figure 3c. Similar to the previous figure, this figure also shows the default navigation method, but now for pages in portrait orientation. Stories (represented by their Dossiers) are accessed by swiping horizontally and pages by swiping verti-cally. This navigation method is referred to as Story Navigation.

Three stories are shown containing layouts in portrait orienta-tion. (Note that these layouts would be located in the same Dossiers as their landscape counter parts as shown in figure 3b.)

The user would swipe horizontally to navigate between each story. Within the story, the user would swipe vertically to navi-gate the content (either from page to page or scrolling within the page, depending on the setup).

Story A is made up of a layout with a single page (here: the cover) matching the device dimensions exactly. No vertical navigation is available.

Story B is made up of a layout containing two pages, each exactly matching the device dimensions. Vertical navigation is available to view each page.

Story C is made up of a layout containing a single page which has been made taller than the height of the device. (A typical use for such a page is the table of contents page, as shown here.) Vertical navigation is available by swiping the page.

An alternative display method for Story C is the Text View (a viewing mode in which the article text is scalable, not shown here).

Story B

Page 1

Page 2

Layout B1


story

Story A

Layout A1

Page 1

Layout C1


story

Story C

Layout C1


22

Page 1

Layout C1


story

Story C


Story A

Layout A1

Figure 3e. Similar to the previous figure, this figure also shows the alternative navigation method, but now for pages in portrait orientation. All stories and pages are placed next to each other and are accessed by swiping horizontally (available in the iPad Reader App only). This navigation method is referred to as Page Navigation. Vertical navigation is only available when the page length exceeds the device height.

Three stories are shown containing layouts in landscape orien-tation. (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.)

Story A is made up of a layout with a single page (here: the cover) matching the device dimensions exactly. No vertical navigation is available.

Story B is made up of a layout containing two pages, each exactly matching the device dimensions. No vertical naviga-tion is available.

Story C is made up of a layout containing a single page which has been made higher than the height of the device. (A typical use for such a page is the table of contents page, as shown here.) Vertical navigation is available by swiping the page.

An alternative display method for Story C is the Text View (a viewing mode in which the article text is scalable, not shown here).

Horizontal navigation between pages

Story B

Page 1 Page 2

Layout B1

23

04

23

A good understanding of the Reader App com-ponents and how they work is essential for customizing the app.

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, a magazine viewed on an iPad is shown. The concept will be the same when

using an Android Reader App, unless otherwise stated.

The HTML5 Reader App is designed for viewing in a Web browser, 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). 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. For a summary of the differences, see section 17. Using the HTML5 Reader on a PC.

1. Features by Platform

Various versions of the Reader App exist (for iPad, Android devices and 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, or because the development of one Reader App is not yet as advanced of another.

For a comparison of each Reader App feature and their availability for each Reader App version, see appendix N, Reader App Features Comparison.

Using the Reader App

Chapter 04 Using the Reader App

24

2. Basic Viewing

When viewing a magazine in its most basic view, the full page is shown and any available controls are hidden. Depending on the device and application you are using to view the magazine, the page may be shown in full screen, or a status bar that is part of the device is shown.

HTML5 Reader AppWhen viewing a magazine using the HTML5 Reader App in a Web browser, the full page is shown.

Figure 2a. Viewing a magazine in a Web browser using the HTML5 Reader App

iPad Reader AppWhen viewing a magazine using the Reader App on an iPad, the iPad status bar is shown at the top of the screen with the Reader application below, displaying the full size of the page.

Android Reader App on FroyoWhen viewing a magazine using the Android Reader App v1.x (Froyo), the Notification bar is shown at the top of the screen with the Reader application below, displaying the full size of the page.


25

Android Reader App on HoneycombWhen viewing a magazine using the Android Reader App v1.x (Honeycomb), the System bar is shown at the bottom with the Reader application displayed above it.

Figure 2.b. Basic components of the iPad Reader App

A

B

A Status bar B Reader

Figure 2.c. Basic components of the Android Reader App (top: Froyo version, bottom: Honeycomb version

A Status bar B Reader C System bar

B

C

B

A


26

3. Requirements

To get the best experience out of reading a magazine using the WoodWing Reader App, take note of the fol-lowing requirements:

iPad and Android version �Reader App version. Verify if the version

of the Reader App fully supports all features and functionality available in the magazine; you might need the latest version of the Reader App to make use of the latest features.

�Operating system compatibility. Before upgrading your tablet to a new operating system, verify whether the Reader App is sup-ported by that operating system. An update of the Reader App might be required when upgrading to a new operating system.

�Device metrics. (Android Reader App only) Android devices come in many different sizes. If the magazine publisher has designed the con-tent for use on a device with a specific size, a message can optionally be displayed to inform the user that user experience may be less opti-mal when viewing the magazine on smaller or lager devices.

HTML5 version �Web browser compatibility. Safari ver-

sion 5 or higher or Google Chrome version 7 or higher should be used. Other Web browsers are currently not supported.

�Google Chrome. Using Google Chrome requires that the app is installed on a web server. This is because Google Chrome will not allow apps to be run from the file:// protocol due to security reasons.

�General use. The HTML5 version of the Reader App is meant for reading on large screen devices such a desktop PC, laptop or large digital devices such as the iPad. Even though small digital devices such as mobile phones, iPods, etc, can also access content by using a Web browser, the user experience will be less satisfactory.


27

4. Page Scaling

When a magazine is read on a device for which it has not been designed (in terms of dimensions), it is likely that the pages will not properly fit 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.

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, the page is scaled down to fit the width of the screen. This might result in having to scroll vertically to see the rest of the page.

�Fit screen. The page will be scaled to fit 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 “letter-boxing” (resulting in black bars appearing along the right- and left-hand side of the screen)1 or “pillarboxing” (resulting in black bars appearing along the top and bottom of the screen)1

�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.1

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.


28

5. Accessing the Reader App

To access the Reader App, 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).

�HTML5 Reader App: open a Web browser and access the correct URL.

Depending on the type of Reader App and/or the way it has been configured, one of the following will happen:

�The magazine is accessed straight away. Reader Apps which do not have Store func-tionality always function this way. To see this behavior on Reader Apps which do have Store functionality, an issue for that magazine needs to have been downloaded and opened first. When accessing the magazine for the first time, the magazine cover is shown; when accessing the magazine after having read the magazine, it will open to the last viewed page.

�The Store is accessed. This is the case for those Reader Apps which have Store function-ality and in which no magazine issue has been downloaded yet; or for those Reader Apps which have been configured in such a way that the Store is always opened when the app is launched.

�A different application is shown first. This is optional functionality for those Reader Apps which have Store functionality. The Reader App is made part of another application, which acts as the shell for the Reader App. This shell displays information related to the magazine content; the Reader App can subsequently be accessed by tapping a dedicated button, after which the behavior is the same as described above.

This method is for instance used by TV Guides where first a Web page is shown

with current TV channel information, after which the magazine can be accessed to read articles related to the world of TV and movies.

Restoring the Reader App stateAs mentioned above, the Reader App restores itself to the last viewed magazine page when the app is closed while the user was reading a magazine.

The iPad Reader App also restores itself to the following states:

�Store �Library �Library Segments Overview

When DMExternal is used (meaning that the Reader App is part of another application), the restoring state behaves slightly different (or perhaps not as initially expected):

�When the user closes the shell application and subsequently resumes the app from the background, the Reader App tries to restore the state of the screen as it would in a normal environment.

�When the Reader App is closed by the shell application, states are not restored.


29

6. Accessing the Magazine

The magazine issue can be accessed in one of the fol-lowing ways:

�From within the Reader App itself

�From within the Newsstand

Each is explained in the following sections.

6.1 From Within the Reader App

After accessing the Reader App, the magazine issues can be accessed in one of the following ways:

�Instantly. This is the case for those Reader Apps which do not have Store functionality; each magazine issue is a different Reader App. Switching to a different issue is done by closing the current Reader App and opening another one from the springboard/Home screen. (Or in the case of a HTML5 Reader App: accessing a different URL.)

For Reader Apps with Store functionality an issue is also accessed straight away, but only when at least one issue has been downloaded first.

For detailed information about how to use the Store, see section 12. Using the Store.

�From the Library. This is the case for Reader Apps with Store functionality. Switching to a different issue/Segment of the magazine can be done by tapping the issue/Segment in the Library.

For detailed information about how to use the Library, see section 13. Using the Library.


30

6.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.

When a Reader App is made part of the Newsstand, it is not also separately available on a springboard.

Having a Reader App in the Newsstand provides the fol-lowing benefits:

�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.

�New issues can be made to download auto-matically in the background as soon as they become available. This way the download pro-cess does not have to be started manually.

For more information about the Newsstand, see www.apple.com/ios/ios5/features.html#newsstand.

Whether or not an issue is made part of the Newsstand is determined by the publisher of the

magazine.

Displayed iconsInitially, the Newsstand displays the app icon of the Reader App. Once an issue is fully downloaded, the cover of that issue is displayed1. For issues containing Segments, the icon of the parent issue is displayed.

When an issue is removed, the cover for the last down-loaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is dis-played once more.

Issues can be displayed in one of two different ways:

1 The icon is not changed when the download is started from the Reader App.

�As a magazine �As a newspaper

Figure 6.2a. The different ways in which issues can be dis-played in the Newsstand

A Magazine type issue B Newspaper type issue

A B

Notifications and download initiationWhen a new issue is available, the publisher sends a noti-fication to the Newsstand. Once received, 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.2b. When a new version of an issue is avail-able, a ‘New’ badge is displayed in the top right-hand corner of the issue icon

�In case the Reader App is not yet running, it is loaded in the background.

www.apple.com/ios/ios5/features.html#newsstand


31

�The download of the new issue is started (but see download scenarios below).

When an issue contains Segments, all Segments will be downloaded.

Download scenariosWhen the Newsstand receives a notification that a new version of an issue is available, the download process is started automatically.

Take note of the following:

�Background downloading is performed only through a Wi-Fi connection, not through a 3G connection.

�Background downloading for subscription issues can only be done when you are logged in to the account.

�To turn background downloading off for the Newsstand, turn off the following setting on the iPad: Store > Automatic Downloads.

Depending on the state of the Reader App at the time the download request is received, 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.

�The Reader App is not in use but is mini-mized. The download is started and the full issue is downloaded in the background. (If other downloads are already in progress, the down-load may be queued.)

�The Reader App is in use. The download is started and the full issue is downloaded in the background. (If other downloads are already in progress, the download may be queued.)

The download process can be followed (and paused/resumed when necessary) from within the

Library of the Reader App.

As soon as an issue is accessed, the ‘New’ badge disappears.


32

7. Navigation Tools

By tapping the Reader App once at specific places, the Navigation bar, top Toolbar, or the Action bar appears, allowing the user to navigate the magazine by using the various buttons and tools available. (See figure 7 on the next page.)

For information about which areas of the screen can be used for bringing up the navigation tools, see

section 8.1 Hotzones.

When tapping the Contents button in the Navigation bar or Action bar, the Story Viewer appears—showing the first page of each story of the magazine1—as well as the Section Viewer, showing the different sections that have been defined for the magazine.

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.

The pages shown in the Story Viewer / Page Viewer are thumbnail representations of the first page / all pages of that story. Below the first page of each story, the name of the story is shown and (optionally) a short description.

When tapping the TOC (table of contents) button in the top Toolbar, the TOC List appears. This is presented as an overlay on top of the magazine. When tapping a but-ton, link or any part of the page, the navigation tools will disappear again.

Each component is explained in more detail in the fol-lowing sections.

1 The iPad Reader App can also be configured in such a way that all pages of all stories are displayed; the Story Viewer then acts as the Page Viewer. Note that the Android Reader App always shows all pages in the Story Viewer.


33

Figure 7. The navigation tools of the Reader App (left: iPad Reader App, right: Android 3.0 Reader App)

A Top Toolbar B TOC List C Story Viewer / Page Viewer D Section viewer E Navigation bar F Action bar

C

A

B

ED

F

C

D


34

7.1 Top Toolbar

On Android 3.0 devices, the top Toolbar is integrated into the Action bar. For more information, see section 7.3 Action Bar.

The top Toolbar can hold the following components:

�Forward/Back buttons. For navigating to the next or previously viewed page. (See sec-tion 8. Navigating the Reader App.)

�TOC List. For bringing up the TOC List. (See section 7.1.1 TOC List.)

�Audio Control button. For bringing up the Audio Control with which the playback of audio files can be controlled. (See section 9.2 Audio.)

�Bookmarks List button. For bringing up the Bookmarks List. (See section 8.9 Bookmarks List.)

�Image icon. (Optional) Typically used for dis-playing a logo.

�Share Content button. For bringing up the Share Content list, used for sharing an external link with other people by e-mail or social media. (See section 11. Sharing Content.)

Figure 7.1. The components of the top Toolbar

A B C D E F G

A Back button B Forward button C TOC List buttonD Audio control button E Bookmarks List button F Image icon G Share content button

Tapping a button will activate the functionality of the button.

7.1.1 TOC List

The TOC List appears when tapping the TOC button in the top Toolbar bar (see section 7.1 Top Toolbar). This list contains a quick-link to each story in the magazine.

Figure 7.1.1. Tapping the TOC button in the top toolbar brings up the TOC List

A

A TOC List

For more information about using the TOC List, see sec-tion 8.8 TOC List.


35

7.2 Navigation Bar

The Navigation bar holds various buttons for navigating the magazine. Some of them appear only when an App Reader with a built-in Store is used, while others are optional and/or have to be specifically enabled.

On Android 3.0 devices, the Navigation bar is integrated into the Action bar. For more information, see section 7.3 Action Bar.

�Back button. (iPad Reader App only) For navigating to a previously visited page.

�Forward button. (iPad Reader App only) For navigating to the page that was last visited before tapping the Back button.

�Buy. (Store versions only) For accessing the Store.

�Library. (Store versions only) For accessing the Library.

�Cover. For accessing the magazine cover.

�TOC. For accessing the page containing the table of contents.

A Back button B Forward button C Buy button D Library button E Cover button F TOC button G Help button H Contents button I Newsfeed button J Account button K Custom

CA B D E F G H I J K

Figure 7.2. The Navigation bar buttons

�Contents. For accessing the Story / Page Viewer and the Section Viewer. (Not available when the Store or Library is displayed.)

�Newsfeed. For accessing the Newsfeed page. (Or any other type of Web page, depend-ing on the configuration.)

�Help. For accessing the page containing instructions about how to use the Reader App.

�Account. (Store versions with subscription functionality only) For accessing the account details for a subscription.

�Custom. (Android Reader App only) For accessing a Web page with custom informa-tion such as privacy information.

The number of buttons and the order in which they appear is determined by the way the Reader App

is configured.

Tapping an icon will activate the functionality of the but-ton, each of which is explained in the following sections.


36

7.2.1 The Back Button

When tapping the Back button, the user is returned to a previously visited page. Its functionality is much the same as using the Back button in a Web browser.

7.2.2 The Forward Button

When tapping the Forward button, the user is taken to the page that was last visited before tapping the Back button. Its functionality is much the same as using the Forward button in a Web browser.

7.2.3 The Buy Button

When tapping the Buy button in the Navigation bar, the Store appears, showing all issues that are available for the magazine title.

Figure 7.2.3. The Store shows all available issues for a par-ticular magazine title

For detailed information about using the Store, see sec-tion 12. Using the Store.


37

7.2.4 The Library Button

When tapping the Library button in the Navigation bar, the Library appears, showing all available issues of a maga-zine. These could be issues which have already been downloaded, Segments of a purchased issue (Android only), or not yet downloaded issues available as part of a subscription.

Figure 7.2.4. The Library shows all available issues for a magazine title (left). On the iPad Segments that are part of an issue are shown on a separate page (right)

When tapping the Library button on the iPad Reader App, the Library Overview Page appears. This page only shows all available issues of a magazine; Segments are displayed on a separate page, accessed by tapping an issue containing Segments.

For detailed information about using the Library, see sec-tion 13. Using the Library.


38

7.2.5 The Cover Button

When tapping the Cover button in the Navigation bar, the cover of the currently viewed issue appears.

7.2.6 The TOC Button

When tapping the TOC button in the Navigation bar, the table of contents page of the magazine appears.

7.2.7 The Contents Button

When tapping the Contents button in the Navigation bar, the Section Viewer and the Story Viewer / Page Viewer appears, allowing the user to navigate the magazine in various ways.

The Contents button is not active/available when the Store or Library is displayed.

Figure 7.2.7. When tapping the Contents button, the Section Viewer and the Story Viewer / Page viewer appears

For detailed information about using the Section Viewer and Story Viewer / Page Viewer, see section 8. Navigating the Reader App.


39

7.2.8 The Newsfeed Button

When tapping the Newsfeed button in the Navigation bar, the Newsfeed page appears. Typically this will be the Web site of the magazine or publisher.

Depending on how the Reader App is configured, the Newsfeed page is either displayed as an overlay or in fullscreen mode. When displayed as an overlay, the page can be closed by tapping the Close icon in the top-right corner; when displayed in fullscreen, the page should itself have a close button built in.

7.2.9 The Help Button

When tapping the Help button in the Navigation bar, the page containing instructions about how to use the Reader App is displayed.

7.2.10 The Account Button

When tapping the Account button in the Navigation bar, an external page is accessed where details of the sub-scription account to which the user is currently logged in can be managed.

For detailed information about using the subscrip-tion features, see section 12.1 Store With Subscription Functionality.


40

7.3 Action Bar

In the Reader App for Android 3.0 devices, the Navigation bar (see section 7.2 Navigation Bar) and top Toolbar (see section 7.1 Top Toolbar) have been integrated into the Action bar.

The left-hand side of the bar shows the following buttons:

�Buy. (Store versions only) For accessing the Store.

�Library. (Store versions only) For accessing the Library.

�Magazine. (Store versions only) When an issue is open but not currently being viewed (for instance when the Store is being viewed), this button allows you to return to the opened issue. (When no issue is open, the button is not visible.)

A Buy button B Library button C Magazine button D Newsfeed buttonE Custom buttonF Cover button G Contents button

Figure 7.3. The Action bar buttons

BA C D E GF H I J

K

L

H Back button I Forward button J Menu buttonK TOC button as menu command L Help button as menu command


�Custom. For accessing a Web page with custom information such as privacy information.

The right-hand side of the bar can show the following buttons:

�Cover. For accessing the magazine cover.

�TOC. For accessing the page containing the table of contents.

�Contents. For accessing the Story / Page Viewer and the Section Viewer.


�Help. For accessing the page containing instructions about how to use the Reader App.


41

�Account. (Store versions with subscription functionality only) For accessing the account details for a subscription.

�Custom. For accessing a Web page with custom information such as privacy information.

�Back button. (Always visible) For navigating to a previously visited page.

�Forward button. (Always visible) For navi-gating to the page that was last visited before tapping the Back button.

�Menu button. (Only visible when there are 6 or more actions defined) For accessing the Action bar menu. Any available buttons for which there is no room in the Action bar itself are displayed here.

The number of buttons and the order in which they appear is determined by the way the Reader App

is configured.

For a description of the functionality of these buttons, see:

�TOC button: section 7.1 Top Toolbar

�All other buttons: section 7.2 Navigation Bar


42

8. 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 be tapped to navigate to the next or previous page, or to bring up the Navigation bar.

�Navigation zones: (desktop PCs/laptops only) areas which can be clicked to navigate to the next or previous page/story, or for navigating between images in a Slide Show.

�Gestures: swiping by using one or two fin-gers will navigate the user to the next/previous page or story.

�Section Viewer: for quickly navigating to a particular section of the magazine.

�Story Viewer / Page Viewer: for quickly viewing and selecting the available stories or pages.

�Page scrubber: a slider for quickly navigating the Story / Page Viewer.

�Forward/Back button: buttons for navigat-ing to the next or previously visited page.

�TOC List: a table of content displayed in a window on top of the page.

�Bookmarks List: a list with bookmarked stories.

�Dossier Links: links on a page which will take you to a particular page of a story.

�Device rotation: rotating the device brings up a page in a different orientation.

Each tool or method is explained in the following sections.

Navigating the magazine can also be done by vari-ous other tools which have been custom made by

the Reader App developer, such as menus or wheels which appear after tapping the screen. For more informa-tion about how to use these custom tools, see the Help page in the magazine (accessed by tapping the Help but-ton, see section 7.2.9 The Help Button.)


43

8.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

Note that Hotzones only work on touchpad devices, not on a desktop PC/laptop (for these systems,

Navigation zones are used, see section 8.2 Navigation Zones).

Depending on the way the Reader App is configured and/or on which platform is used, the following actions take place when tapping the screen:

�Any part of the screen: the Action bar, 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 bar and/or the top Toolbar is displayed

Figure 8.1. 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

8.2 Navigation Zones

(HTML5 Reader App only) On desktop PCs and laptops, Navigation Zones are used for moving to the next/previ-ous page/story or for navigating between images of a Slide Show; all by means of a mouse click. When hovering over such a zone, 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.

Figure 8.2 The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)


44

8.3 Gestures

(Touchpad devices only) The touch screen functionality of digital devices allow users to navigate between pages and stories by using finger gestures. Depending on the configuration of the Reader App, one or two fingers can be used:

Horizontal navigation �One-finger swipe. 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 next or previous page.

�Two-finger swipe. Works only when the Reader App has been configured for page navi-gation; it takes the reader to the next or previous story.

Vertical navigation �One-finger swipe. Works when the Reader

App has been configured for story navigation only:


Additional gestures for navigating the magazine can be implemented by the Reader App developer. For

more information about how to use these custom ges-tures, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)

8.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.Sections group together stories with similar content, such as those for Sports, Fashion, Finance, etc.

Figure 8.4. The Section Viewer shows all sections of a magazine

Using the Section ViewerThe Section Viewer is used by tapping the name of a section. As a result, the Story Viewer / Page Viewer will jump to the first story / page of that section.

In case many more sections exist than can fit the width of the screen, the bar can be swiped left or right.


45

8.5 Story Viewer / Page Viewer

The Story Viewer / Page Viewer appears when tapping the Contents button of the Navigation bar or Action bar.

The Contents button is not active/available when the Store or Library is displayed.

Which of the two types of viewer appears depends on the way the Reader App has been configured:

�Story navigation: The Story Viewer appears, showing only the first page of each story.

Figure 8.5a. The same magazine, 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)

�Page navigation: The Page Viewer appears, showing all pages of all stories.

The following components can be shown:

�Page preview �Story title �Story bullet �Story description �Page number

Differences exist in how these components are displayed in the different Reader App versions, as shown in the table on the following page.


46

Table 8.5. Story Viewer / Page Viewer differences between Reader App versionsReader App version

Component iPad, Android (Froyo), HTML5 Android (Honeycomb)

Page preview All page previews are spaced apart equally. Space between stories is larger than space between pages of a story.

Story title Displayed below the page preview. Displayed above the page preview.Story bullet Displayed before each story title. Not used.Story description Displayed below the story title. Displayed below the story title.Page number Displayed below the page preview (Froyo only) Displayed below the page preview.

Figure 8.5b. Story Viewer / Page Viewer components. The top image depicts the iPad/Android (Froyo)/HTML5 version, the bot-tom image the Android (Honeycomb) version

A

B CD

A C

DE

A Page preview B Story bullet C Story title D Story description E Page number

Using the Story Viewer / Page ViewerThe 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. Once tapped, the Action bar or Navigation bar and top Toolbar (when enabled) will automatically disappear.


47

8.6 Page Scrubber

When the Reader App is configured for page navigation (see section 8.5 Story Viewer / Page Viewer), the Page Viewer can hold a multitude of pages. To ease navigation, a Page Scrubber can be made available between the Section Viewer and the Page Viewer.

Figure 8.6. The Page scrubber

A Page scrubberA

Using the Page Scrubber The Page Scrubber is essentially a slider which can be moved left or right. By doing so, the thumbnails in the Story Viewer / Page Viewer are moved in the same direc-tion, allowing the user to quickly browse the available pages in the magazine.

8.7 Forward/Back Buttons

The Forward and Back buttons allow the user to quickly return to a previously visited page; their functionality is much the same as using the Forward/Back button in a Web browser.

These buttons are available in the following locations:

�In either the top Toolbar (see section 7.1 Top Toolbar) or the Navigation bar (see section 7.2 Navigation Bar)

�As part of the Action bar (see section 7.3 Action Bar),

Figure 8.7. The Forward and Back buttons in the top Toolbar

A B

A Back button B Forward button

These buttons are disabled when the user accesses the Store or Library, or when the user has not

accessed any pages yet.


48

8.8 TOC List

The TOC List appears when tapping the TOC button in the top Toolbar bar (see section 7.1 Top Toolbar). This list contains a quick-link to each story in the magazine.

Figure 8.8. Tapping the TOC button in the top toolbar brings up the TOC List

A

A TOC List

Each TOC List entry shows the following information:

�A preview of the first page of the story �Story title �Description

Using the TOC ListThe TOC List is used by swiping the list up or down to the required story and tapping the story to navigate to it. Once tapped, the TOC List, top Toolbar and Navigation bar will automatically disappear.


49

8.9 Bookmarks List

When tapping the Bookmarks List button in the top Toolbar, the Bookmarks List appears. This list can be used for bookmarking stories of interest, so that they can be quickly accessed at any time. 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

has been downloaded through the Store) �The Story title �The Story description

How to use Bookmarks and the Bookmarks List is explained in the following sections.

Figure 8.9. Tapping the Bookmarks button brings up the Bookmarks List

A Bookmark List button B Edit buttonC Bookmark button D Bookmark

C

D

A B


50

8.9.1 Bookmarking a Story

Bookmarking a story is done by performing the following steps:

Step 1. Navigate to the story which needs to be bookmarked.

Step 2. Tap the screen to access the top Toolbar.

Step 3. Tap the Bookmarks List button.

The Bookmarks List appears.

Step 4. Tap the Bookmark button.

The story is added to the Bookmarks list; for each Bookmark a preview, the issue name, story name and description is displayed.

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.

8.9.2 Accessing a Bookmark

Accessing a bookmarked story is done by performing the following steps:


This can be done in any issue, not neces-sar i l y the issue conta in ing the

bookmarked story.



Step 3. Scroll the list to navigate to the required Bookmark.

Step 4. Tap the Bookmark.

The bookmarked story is opened and the Bookmarks List is closed.

The Bookmarks List can contain Bookmarks belonging to stories that are

located in issues other than the one currently viewed. When tapping such a Bookmark, the currently viewed issue is closed and the book-marked issue is opened.


51

8.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 swipe methodStep 1. Tap the screen to access the top Toolbar.



Step 3. Swipe the Bookmark to the right.

The Delete button appears.

Step 4. Tap the Delete button.

In case you do not want to delete the issue, swipe left to hide the Delete

button.

The Bookmark is removed from the list.

Using the Management controlsStep 1. Tap the screen to access the top Toolbar.



Step 3. Tap the Edit button.

The Edit controls appear. (See figure 7.9.4a on the next page.)

Step 4. Tap the Delete button.

The Bookmark is removed from the list.

Step 5. When finished, tap Done.


52

8.9.4 Managing Bookmarks

Managing created Bookmarks is done by performing the following steps:




Step 3. Tap the Edit button.

The Edit controls appear. (See figure 7.9.4a to the right.)

Step 4. Perform one of the following steps:

�To delete a Bookmark, tap the Delete button.

�To rearrange the order of the Bookmarks, drag the Bookmark by the Reordering control in the desired order. (See figure 7.9.4b to the right.)

Step 5. When finished, tap Done.

Figure 8.9.4a. When tapping the Edit button, the Edit controls appear

A Done button B Reordering control C Delete button

C

A

B

Figure 8.9.4b. Rearranging the Bookmarks list can be done by dragging the Bookmark by its Reordering control.


53

8.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. It is typically used in those places where a link to a story is placed such as on the magazine cover, on the page holding the table of contents, etc. Note that the defined area can be any part of the page, including images and text.

A Dossier Link as such can not be recognized, 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).

Using a Dossier LinkTo use a Dossier Link, tap the defined area to navigate to the related story or page within that story.

8.11 Device Rotation

Although not a navigation method as such, 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, 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, switching to another orientation is then locked. This means that when rotating the device, the page view will not change; when rotating it in the same direction once more, the page view will rotate as well in order to prevent the page from being displayed upside down.


54

9. Dynamic Content

Pages can hold a multitude of different types of content and functionality with which the reader can interact.

The following interactive content can be included:

�Video �Audio �Slide shows �Hotspots �Web Elements �Widgets �Scrollable areas �Web Links �Text View

How to interact with each type of content is described in the following sections.

9.1 Video

Videos can be recognized by their icon in the center of the frame.

Figure 9.1. Videos can be recognized by their icon in the center of the frame

Depending on the way the video is configured, it can either start playing automatically each time the page is accessed, or playback needs to be started manually. When playback is started automatically, it can also option-ally be sstarted in fullscreen mode.

Each method is explained in the following sections.

Videos can either be embedded in the magazine or streamed from an online location. For the latter

method, internet access is required. Playback may be influenced by the available bandwidth.


55

9.1.1 Manual Playback

Playing a video manually can be done by doing the following:

�Tap anywhere on the video frame to start the video1.

Videos which are set to automatically play in fullscreen mode will only play in fullscreen mode;

when tapping the play button while the video is minimized, the video will be played fullscreen once more. When mini-mizing the video, play will stop.

The toolbar containing the video controls appears. (See figure 9.1.1 to the right.)

The Reader App can also be configured in such a way that the video controls for a video are not dis-

played. Controlling the playback of the video is then done by taking the video into fullscreen mode by using the pinching gesture (see section 9.1.2 Fullscreen Playback).

�After a short time, the toolbar will disappear. To bring the toolbar back up, tap the video once (iPad/Android) or hover the mouse over the video (HTML5 on a desktop).

�Tap the Play/Pause button to pause the video. Tap the button once more to resume playback.

�Use the scrubber to scroll through the video.

1 The Reader App can also be configured in such a way that videos automatically start playing as soon as the page is loaded.

Figure 9.1.1. The video controls

A B C

A Play/Pause button B Scrubber C Full screen button


56

9.1.2 Fullscreen Playback

Playing a video in full screen mode is done by doing one of the following1:

�(iPad and Android Reader App) Tapping the Full Screen button in the toolbar

�(iPad and Android Reader App) Using the pinching movement

�(HTML5 Reader App) Double-click the video

Videos can also be set to automatically play in fullscreen mode. Such videos will only play in

fullscreen mode; when minimizing the video, play will stop. When subsequently tapping the play button, the video will be played fullscreen once more.

iPad and Android Reader AppThe toolbars containing the video controls appears (see figure 9.1.2 to the right).

�After a short time, the toolbar will disappear. To bring the toolbar back up, tap the video once.

�Tap and hold the Rewind button to rewind the video.

�Tap the Pause/ Play button to pause the video or resume playback.

�Tap the minimize button to leave fullscreen mode and continue playing the video.

�Tap the Done button to leave fullscreen mode and stop playing the video.


1 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.

�Tap the aspect ratio button to change screen dimensions (4:3 or 16:9 aspect ratio).

When rotating the device while viewing a video in fullscreen mode, the video is kept being played in fullscreen mode.

Figure 9.1.2. The iPad video controls in fullscreen mode

A Done button B Scrubber C Aspect ratio buttonD Rewind button E Play/Pause button F Fast forward button G Minimize button

A

D E F G

B C

HTML5 Reader AppWhen hovering the mouse over the video, the toolbar containing the video controls appear.

�Click the Pause/ Play button to pause the video or resume playback.


�Double-click the video to leave the fullscreen mode.


57

9.2 Audio

Audio files can be recognized by their icon; tapping the icon will play the audio file.

Figure 9.2. Audio files can be recog-nized 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 hid-den, for instance for the use of “background music”. Controlling the playback can then be done by using the Audio Control. (See section 9.2.2 Using the Audio Control.)

Depending on the way the audio file is configured, it can either start playing automatically each time the page is accessed, or playback needs to be started manually.

Controlling the playback of an audio file can either be done by using the embedded audio controls or by using the Audio Control.

Each method is explained in the following sections.

Audio files can either be embedded in the magazine or streamed from an online location. For the latter

method, internet access is required. Playback may be influenced by the available bandwidth.

(iPad only) Audio files that are being played continue playing when navigating to another page or another

story. They only stop playing when a video file or another audio file is started, when the playback of the audio file is stopped manually, or the when audio file has reached its end.

(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 orienta-tion. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.


58

9.2.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. The icon changes into a pause button.

�Tap the audio icon again to stop playing the audio.

9.2.2 Using the Audio Control

This feature is not available on the Android version of the Reader App; any automatically played back-

ground audio is automatically stopped when navigating to another page.

Once the playback of an audio file has been started (either manually or automatically), controlling the playback can also be done by using the Audio Control1.

The Audio Control can be accessed by tapping the Audio Control button in the top Toolbar. It contains the following components:

�Audio Control pop-up header. The header of the Audio Control pop-up.

�Audio title. Title of the song being played.

�Audio description. Short description of the song being played.

�Stop/Play button. Button for stopping/restarting the playback.

�Slider. For scrolling through the file. (Works for embedded audio files only, not for files streamed over the Internet.)

1 For audio files for which the audio has been started automati-cally and for which the playback controls are hidden, using the Audio Control is the only way of controlling its playback.


59

Figure 9.2.2. The Audio Control components

A

C

B

D

E F

A Audio control button B Audio control popupC Audio title D Audio descriptionE Stop/Restart button F slider

9.3 Slide Shows

Slide Shows can be recognized by their icon in the lower left-hand corner of the frame.

Figure 9.3. Slide Shows can be recognized by their icon

A Slide Show can either be viewed within the frame itself or in fullscreen mode. Each method is explained in the following sections.


60

9.3.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 the next or previous image.

9.3.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 order to access fullscreen mode.

�Tap the currently displayed image once more in order to leave fullscreen mode.

When rotating the device while viewing a Slide Show in fullscreen mode, the Slide Show is kept being

played in fullscreen mode.

To navigate the images in the Slide Show, swipe the dis-played image left or right to view the next or previous image.


61

9.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. In its most basic usage, the Hotspot content will appear in a pop-up win-dow, but a more advanced usage involves showing the content embedded in the page.

It is up to the designer how the Hotspot functionality is incorporated in the page, and how it is commu-

nicated to the reader that a certain page item contains Hotspot functionality.

The example below shows the usage of tapping a Hotspot on the page, after which the Hotspot content will appear in a pop-up window.

Using HotspotsUsing the Hotspot feature can be done by doing the following:

�Tap the area defined on the page as the Hotspot.

The Hotspot content appears in a pop-up window.

�Tap anywhere on the pop-up window to close the pop-up.

An alternative use of Hotspots is that the Hotspot disap-pears as soon as the Hotspot content appears. To then close the Hotspot content, 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.4. In its most basic usage, when tapping a Hotspot (above), the corresponding Hotspot content appears in a pop-up window (below)


62

9.5 Web Elements

Web Elements are areas that hold or link to content in the form of Web pages. Typically, these pages are located on the Internet, but in some cases these pages can be bundled with the Reader App as well.

A Web Element can be used in three different ways:

�Embedded in the page. Normally used for (small) components of a Web page.

�As a pop-up window. Can be used for dis-playing small components of a Web page or the full Web page.

�In a Web browser. Used for displaying full Web pages.

It is up to the designer how Web Elements are incor-porated in the page, and how it is communicated

to the reader that a certain page item contains such an interactive component. For more information about how to use a Web Elements, see the Help page in the maga-zine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)

When content of a Web Element is taken from the Web, internet access is required. Display speed

may be influenced by the available bandwidth.

Using Web ElementsTo use a Web Element, do the following:

�Embedded content. Whether interaction is required or not depends on the content used. The content is directly loaded when the page is displayed; if the content contains interactive components (such as buttons or form fields), the user can interact with them accordingly.

�Content in a pop-up window. The content is not loaded until the frame is tapped; if the content contains interactive components (such as buttons or form fields), the user can interact with them accordingly.

�Content in a Web browser. The content is not loaded until the frame is tapped. A message is displayed asking the user if the content should be displayed in a Web browser. When the user confirms this, the Web browser is opened to access the link. As a result of this action, the Reader App is closed.

Web Elements can also be used as empty frames that are placed over sections of text such as a

hyperlink. For the end user the experience will be that of tapping the text itself.


63

9.6 Scrollable Areas

A Scrollable Area is a frame in which more content is available then can be displayed by the frame. To view the content which is not visible, the content can either be scrolled horizontally or vertically.

It is up to the designer how the Scrollable Area func-tionality is incorporated in the page, and how it is

communicated to the reader that a certain page item contains Scrollable Area functionality. For more informa-tion about how to use Scrollable Areas, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)

Using a Scrollable AreaA Scrollable Area is used by doing the following:

�Swipe the content left/right or up/down to view any currently hidden content.

9.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.

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), and will therefore also always displayed as one long, continuous page.

Figure 9.7. In Text View mode, 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.

Whether or not a page is displayed in Text View mode is a design decision; the designer can also

decide to offer the page in the same way as a page in


64

landscape orientation (effectively an image) by which the text obviously cannot be scaled.

Using Text ViewTo use Text View, do the following:

�Use the vertical pinch gesture to increase or decrease the text (but see comments below about header images). While pinching, the cur-rent font size is displayed in percentages in the top right-hand corner of the page.

�Navigate the page by swiping up or down.

ImagesImages can be incorporated in one of the following ways:

�As a header image, appearing at the top of the page, before the article starts.

Designers can use a header image to dis-play a fullscreen-sized image possibly

containing a headline. Obviously, text that is part of such images cannot be scaled.

�As an image as part of the article, appearing anywhere in the text itself.

�As additional images, appearing in a separate section at the bottom of the page following the article. Tap an image to view it in fullscreen mode; if multiple images are pres-ent swipe horizontally to navigate them.

Text View pages can also be fully styled in the same way as a Web page, including the incorporation of

images.


65

10. Newsfeeds

The Newsfeed functionality is primarily used by publishers to offer the user the latest news, sports results, etc., by means of a Web page.

Accessing the Newsfeed is done by tapping the Newsfeed button in the Navigation bar or the Action bar. The Web page is displayed as an overlay on top of the magazine. Navigating the page is done by using the available con-trols on the page, as offered by the publisher.

Closing the Newsfeed page can be done by doing one of the following:

�Tapping the Close button in the top right-hand corner

�(Android only) Using the Back button of the device

Since Newsfeed content is taken from the Web, internet access is required. Display speed may be

influenced by the available bandwidth. Figure 10. The Newsfeed page

A Close button

A


66

11. Sharing Content

The Content Sharing functionality can be used to share specific content with others by sharing the content via Twitter, Facebook, or e-mail.

The following content can be shared:

�Page. Either the currently visible part of the page or the thumbnail of the page as shown in the Story Viewer / Page Viewer.

�Part of a page. A manually defined part of a page.

�Hyperlink. A link to an external Web site, typi-cally holding information related to the story.

If pages and Hyperlinks are both available, they are automatically combined in the same message.

The method of sharing each type of content is explained in the following sections.

The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar.

Figure 11. 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, do one of the following:

�Tap anywhere on the page

�Tap a button in top Toolbar (including the Share Content button), Navigation bar, or Section bar

�Tap anywhere in the Flipview

�Rotate the device


67

11.1 Sharing a Page

The availability and functionality of sharing a page is set through a DMSetting. For more information,

see chapter 7, Customizing the iPad Reader App – section 9.4 Content Sharing. It is assumed here that page sharing is enabled.

To share a page, perform the following steps:

Step 1. Navigate to the page which needs to be shared.

Step 2. Tap the Share Content button in the top Toolbar.

A screen appears asking what needs to be shared.

Step 3. Choose This page.

Depending on the configuration of the Reader App, the following is shared:

�The currently visible part of the page. A screenshot is made of the full screen, capturing the current way that the page is displayed. Note the followiing:

�Toolbars are not included in the screenshot; any content obscured by a toolbar is included in the screenshot.

�Video playback cannot be cap-tured; the background image (such as a placeholder image) is used instead.

�Long pages cannot be captured in full.

�A thumbnail of the page. The thumbnail used is the thumbnail which is available in the Story Viewer / Page Viewer for the page. If no matching page or orientation is available, the first page of the story or the corresponding page in the opposite orientation is used.

The Content Sharing window appears showing all defined sharing services.

Step 4. Tap the required service for sending out the page.

Step 5. Depending on the chosen service, pro-ceed as follows:

�Twitter: When logging in for the first time using the Reader App, the Twitter login screen appears. Enter the account details and tap Allow. When logged in, a screen appears in which text can be entered.

�Facebook: The Facebook login screen appears. Enter the account details and tap Login. When logged in, a screen appears in which text can be entered. Tap Post to send the message.

�E-mail. An e-mail is created with the hyperlink inserted. Enter further details such as the recipient’s e-mail address and tap Send.


68

11.2 Sharing Part of a Page

The availablity of sharing a part of a page is set through a DMSetting. For more information, see

chapter 7, Customizing the iPad Reader App – section 9.4 Content Sharing. It is assumed here that partial page sharing is enabled.

To share a part of a page, perform the following steps:

Step 1. Navigate to the page of which a part needs to be shared.


A screen appears asking what needs to be shared.

Step 3. Choose Part of this page.

The Area Selector appears.

Figure 11.2. The Area Selector

A

B

A Resize handle B Move handle

Step 4. Use the handles to define the area which needs to be shared:

�Drag any of the Resize handles on each corner to adjust the size of the area.

�Drag the Move handle in the middle to reposition the defined area.

Step 5. In the top Toolbar, tap Share.


Step 6. (Optional) To return the Area Selector, tap Edit Selection.

Step 7. Tap the required service.


�Twitter: When logging in for the first time using the Reader App, the Twitter login screen appears. Enter the account details and tap Allow. When logged in, a screen appears in which text can be entered. When ready, tap Tweet. The message is sent to Twitter, while the image is sent to TwitPic.

�Facebook: The Facebook login screen appears. Enter the account details and tap Login. When logged in, a screen appears in which text can be entered. Tap Post to send the message.

�E-mail. An e-mail is created with the page inserted or attached. Enter fur-ther details such as the recipient’s e-mail address and tap Send.

Note the followiing:

�Toolbars are not included in the screen-shot; any content obscured by a toolbar is included in the screenshot.


69

�Video playback cannot be captured; the background image (such as a placeholder image) is used instead.

�Long pages cannot be captured in full.

11.3 Sharing a Hyperlink

To share a Hyperlink, perform the following steps:

It is assumed here that a Hyperlink exists for the selected story.

Step 1. Navigate to the page of which its Hyperlink needs to be shared.


Step 3. (Optional, only when Page Sharing has been enabled in the DMSettings. If so, a screen appears asking what needs to be shared.) Choose This page.


Step 4. Tap the required service.


�Twitter: When logging in for the first time using the Reader App, the Twitter login screen appears. Enter the account details and tap Allow. When logged in, a screen appears in which text can be entered.

In order to prevent that the URL takes up too many characters, a shortened

version of the URL is automatically inserted. Tap Post to send the message.

(Optional) Remove the inserted or attached image of the page.

�Facebook: The Facebook login screen appears. Enter the account details and tap Login. When logged in, a screen appears


70

in which text can be entered. Tap Post to send the message.


�E-mail. An e-mail is created with the hyperlink inserted. Enter further details such as the recipient’s e-mail address and tap Send.


11.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. These settings can be found in the Settings app of the digital device.

�Logout on next launch. Set to On in order to log out of the relevant service the next time that the Reader App is launched. This allows the user to for instance log in using a different account.


71

12. Using the Store

For those Reader Apps which have Store functionality, the Store can be used for previewing and purchasing issues.

The Store can be accessed by tapping the Store button in the Navigation bar or the Action bar.

By default, the Store shows multiple issues at a time, but it can also be set to show a single issue. (See figure below.)

For each issue, the following components are available (see figure 12b on the next page):

Figure 12a. The store in multiple-issue view (left) and in single-issue view (right)

�Back to issue button. For returning to the issue which is currently open.

�Store filter. For filtering the Library by content type.

�Single-issue view button. For displaying the Store one issue at a time.

�Multiple-issue view. For displaying the Store multiple issues at a time.


72

�Cover preview. A preview of the cover. (In the HTML Store, the cover also acts as a button to switch between single-issue view and multiple-issue view.)

�Preview issue button. For opening a new screen with more detailed information about the magazine. (See section 12.3 Previewing an Issue.)

�Buy/Free button. For buying the magazine (see section 12.4 Downloading an Issue) or for downloading it for free.

�Issue name and description. The name and description of the issue.

�Cover story description. Short description of the cover story.

SubscriptionsThe Store can also contain subscription functionality for subscribing to or accessing a subscription. For details about using the Subscription functionality, see section 12.1 Store With Subscription Functionality .

Figure 12b. The Store components

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 descriptionH Cover story description I Cover preview

A B C D

EFGH

I


73

12.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.

Two types of subscription services can be implemented:

�(iPad Reader App only) The iTunes subscrip-tion service

�Any other subscription server

On the iPad Reader App, both subscription services can be used simultaneously.

How to use each type of subscription is described in the following sections.

12.1.1 The iTunes Subscription Service

(iPad Reader App only) The iTunes Subscription function-ality of the Store consists of the following components (see figure 12.1.1 on the next page):

�Subscription advert. Advert from the pub-lisher to advertise current subscription offers.

�Subscribe buttons. For accessing a page to subscribe to a magazine subscription.

�Account button. For accessing a page with additional options based on the user’s account. (The default implementation is a page on which the user can restore his/her subscription. This option is mandatory by Apple and should always be part of this page.)

When using the iTunes subscription functionality, log-in and account information is based on the log-

in which is currently active for the iTunes store on the iPad. Therefore, no Log In or Log Out buttons are required.

SubscribingSubscribing to a subscription is done by performing the following steps:

Step 1. Tap a Subscribe button.

A page will appear with information about the subscription and how to subscribe.

Step 2. Follow the steps on the page.

When the subscription process is complete, access the Library to view the issues that are part of the new subscription.

After purchasing a subscription, you are allowed to download the latest issue and all issues that are

released while the subscription is valid. When the sub-scription expires, it is no longer possible to download issues that were available within the subscription period.


74

Figure 12.1.1. The Store view with iTunes Subscription functionality

A Subscription advert B Subscription buttons C Account button

A

B

C


75

Copying subscriptions between iPadsWhen a user has multiple iPads, it is possible to copy issues that are part of a subscription from one iPad to another. Take note of the following:

�Only issues that are part of the subscription will be copied.

�The issues that are being copied will not be removed or affected on the source iPad in any way or form.

�The copied issues will be placed in the Library of the Reader App of the target iPad, ready to be downloaded. (Because the user has already paid for these issues, downloading them is free of charge.)

�Any settings such as Bookmarks will not be copied.

Copying subscriptions between iPads can be done by performing the following steps:

Step 1. On the target iPad, tap the Account button in the Navigation bar.

The Account page appears.

Step 2. Tap Copy Subscriptions.

Step 3. Enter the iTunes user details.

The transfer process is started. Make sure not to close the Reader App during this process.

When completed, any transferred issues are ready to be downloaded.

Step 4. Tap the Download button for those issues which need to be downloaded.

12.1.2 A Non-iTunes Subscription Service

For subscription services which are not based on iTunes Subscriptions, the following components exist in the Store (see figure 12.1.2 on the next page):

�Sign In / Sign Out button. For logging into or out of an existing subscription account.

�Subscription advert. Advert from the pub-lisher to advertise current subscription offers.

When a non-iTunes Subscription Service is used in combination with the iTunes

Subscription Service, note that the Store will not display the Offer pages that are part of the non-iTunes Subscription; Apple does not allow this.

�Subscribe button. For accessing a page to subscribe to a magazine subscription.

�Existing Customer. For upgrading/extend-ing a current subscription.

�Account button. For accessing a page with additional options based on the user’s account.

How to use the subscription components is described in the following sections.


76

Figure 12.1.2. The Store view with non-iTunes Subscription functionality

A Subscription account login/logout button B Subscription advert C Subscription button D Upgrade subscription button E Account button

A

B

D

C

E


77

12.1.3 Signing In or Out

When the user is already subscribed to a magazine, he or she can sign in to the account by doing the following:

Step 1. Tap the Sign In button in the top Toolbar.

The Sign In dialog box appears.

Figure 12.1.3. The Subscription Sign In dialog box

Step 2. Use the dialog box as follows:

�In the User Name box, enter the user name for the account.

�In the Password box, enter the password.

�(Optional) Select the Remember Me check box to automatically have the user logged-in when the Reader App is launched.

�(Optional) Tap Privacy to access a page with information about how the user’s data is gathered, used, and managed.

�(Optional) Tap License agreement to access a page with information about the license agreement for the subscription.

Step 3. Tap Submit to log in.

Once logged in, the following functionality is available:

�The Sign In button changes into a Sign Out button for signing out of the account.

�The Account button in the Navigation bar or the Action bar is available for accessing an external page for managing the account details.

�The user is forward to the Library, display-ing the issues that are available to the user as part of their subscription (including those issues which have not been downloaded yet). The Library also shows any downloaded issues which are not part of the subscription. (For more information, see section 13. Using the Library.)


78

12.1.4 Subscribing

Subscribing to a subscription is done by performing the following steps:

Step 1. Tap the Subscribe button.

A page will appear with information about the subscription and how to subscribe.


Once the subscription account is active, the user can sign in to the account to access the available issues for that subscription. (See sec-tion 12.1.3 Signing In or Out.)

12.1.5 Upgrading a Subscription

Upgrading an existing subscription is done by performing the following steps:

Step 1. Tap the Existing Subscriber button.

A page will appear with information about how to upgrade the subscription.



79

12.2 Navigating the Store

Navigating the Store is done by doing one of the following:

�When in multiple-issue view: navigating between each set of issues can be done by swiping vertically.

�When in single-issue view: navigat-ing between issues can be done by swiping horizontally.

12.3 Previewing an Issue

Before deciding to download an issue, a preview of it can first be viewed. Previewing an issue can be done by tapping the Preview button for that issue.

Figure 12.3. 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). It is up to the publisher which page is shown, but typically this will be the page holding the table of contents.

Closing the Preview screen can be can be done by tap-ping the Close button for that issue.


80

12.4 Downloading an Issue

The Store can be used for downloading issues. Issues can either be free of charge or will have to be purchased.

An issue is downloaded from the Store by performing the following steps:

Step 1. Tap the Free or Buy button for the issue in either the Store itself or in the Preview screen (see section 12.3 Previewing an Issue).

Step 2. (iPad only) In the message which appears asking to confim that the issue should be downloaded or purchased, tap Download.

The iPad Reader App can be configured in such a way that downloading over a 3G

network is not possible. If this is the case, a message is displayed.

The App Store or Android Market is accessed and purchase information is displayed.

Step 3. Follow the steps for purchasing the issue.

When the purchase process is complete, the issue is added to the Library and the download is started automatically.

Take note of the following behavior when a download is in progress:

�iPad Reader App: other issues can be downloaded while a download is in prog-ress. Any additional downloads are added to the Library; starting these downloads needs to be done manually.

�Android Reader Apps: other issues cannot be downloaded while a download is in progress.

Following the Download ProgressDuring the download of the issue, the progress is dis-played in the form of a progress bar, labels and controls. This way, a user can see the progress of a download, pause it, and resume the download at a later stage.

Two types of download processes exist:

�Non-progressive downloads: the issue needs to be fully downloaded before it can be read.

�Progressive downloads: Initially, only the most basic content is downloaded and made available (such as the cover and the cover story). The user can open the issue and start reading that content while all other content is progres-sively downloaded in the background.

Each is explained in more detail in the following sections.

The progressive download method fully replaces the non-progressive method. Only magazines that were released before the progressive download method was available will make use of the non-progressive method; over time these will become less and less.

Different labels and controls are used for each download process, as shown in the following sections.


81

Automatically opening a magazine after down-loading(iPad Reader App only) The Reader App can be config-ured 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).

Background DownloadingWhen the Reader App is suspended while a download is in progress, the following occurs:

iPad Reader AppThe download is continued. However, Apple applies the following restrictions:

�The time is finite. When the app is closed, a maximum of 10 minutes is left in which the app is still allowed to execute code.

�System resources must permit back-ground execution. When resources (such as memory) are needed for a newly started app, our background downloading might be cut off early.

For additional technical information see:

http://developer.apple.com/library/ios/#documentation/iphone/conceptual/iphoneosprogrammingguide/BackgroundExecution/BackgroundExecution.html

Shortly before the time limit is reached, a message is displayed to the user, allowing the user to continue or cancel the download. When the user does not respond to the message, the download is cancelled; the download is resumed though at the point where it was left off the next time the download is continued.

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

Android Reader App The following behavior exists:

�When the app is moved to the back-ground: the download continues.

�When the app is killed: the download stops.

�When app is relaunched: the down-load can be resumed.






82

12.4.1 Non-Progressive Downloads

The following images show the labels, progress bar, and controls used for issues that are downloaded by using the non-progressive download process. (Images shown are those of the iPad Reader App, Reader Apps on other platforms may look slightly different.)

Using this method, an issue needs to be fully downloaded before it can be viewed. The download process can be stopped and resumed at a later stage.

Downloading. When the download is in progress, the download percent-age and status is displayed.

Download paused. When the download process is interrupted (for instance by closing the Reader App or by tapping the Pause button), an indication is given how much of the issue has been downloaded so far. Tapping the Download Resume but-ton will resume from where it was left off.

Download stopped. (iPad only) Shown when the download pro-cess failed or has been interrupted. Tapping the Download Resume but-ton will resume from where it was left off.

Installing. Once the issue has been fully downloaded, it is unpacked and installed.

Installation stopped. When the installation has failed or has been interrupted. Tapping the Install button will restart the installation process.


83

12.4.2 Progressive Downloads

The behavior of the progressive download process is as follows:

�Download is started: an initial package is downloaded, consisting of the magazine.xml file, the cover and all thumbnails.

�When user does not interact with the magazine, stories will be downloaded in order of appearance (first story first, last story last).

�When the user accesses a story (in any possible method, for instance by tapping a pre-view in the Story Navigator, tapping a Dossier Link on the cover, etc), the following rules apply:

�The currently visible story maintains the highest download priority and its content will be displayed immediately.

“Immediately” in this context means whenever the tablet has a download

slot (thread) available. In the case of the iPad for instance, 3 threads are active at all times. None of the threads will be can-celled, but each will finish first before the next is started. In the extremely rare situa-tion where all three threads are downloading a large video, ‘immediately’ may take a while (until a thread is available).

�The story next in line will have “normal” priority.

�Stories that are linked within the currently visible story (by means of a Dossier Link), will also have “normal” priority.

�All other stories will have “low” priority.

During the download, the process can be stopped and resumed at a later stage.

The following images show the labels, progress bar, and controls used for magazines that are downloaded by using the progressive download process. (Images shown are those of the iPad Reader App, Reader Apps on other platforms may look slightly different.)

Download not started. The down-load has not yet started.

Download started, content not yet available. When the download has started, the download button changes into a Pause button. Tapping the button will pause the download. The dimmed thumbnail indicates that no content is available yet for viewing.

Download star ted, content available. When the download has started, the download but-ton changes into a Pause button. Tapping the button will pause the download. When the thumbnail is not dimmed anymore, content is available for viewing.

Download paused. When the download process failed or has been interrupted, the pause but-ton changes into a Resume button. Tapping the button will resume from where it was left off.


84

When viewing the magazine while the download is still in progress, 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). (See figure 12.4.2 on the next page.)


85

Figure 12.4.2. When viewing an issue which is not fully downloaded yet, the download progress of each story is indicated on the page and in the Page Viewer / Story Viewer. The stories which are available for viewing appear normally in the Story Viewer / Page Viewer.

A

C DB

A Page view download progress B Downloaded story C Story download in progress D Story download not started yet


86

13. Using the Library

For those Reader Apps which have Library functionality, the Library can be used to browse through the available issues for that magazine.

The Library shows the following content:

�Issues which have been downloaded from the Store.

�(Reader Apps with subscription functionality only) Issues that are available as part of the sub-scription, including those which have not been downloaded yet.

�All Segments for an Issue which have been downloaded from the Store, including those which have not been downloaded yet. (Segments which have not been downloaded appear dimmed and will have a Download button).

Slight differences exist between the Libraries of the vari-ous Reader Apps, as explained in the following sections.

13.1 iPad Reader App Library

The Library on the iPad Reader App consists of the fol-lowing pages (see figures on the next pages):

�Library Overview page. Shows all available issues. This page is accessed by tapping one of the following buttons:

�The Library button in the Navigation bar

�The Back To Overview button in the Segments Overview page

�Segments Overview page. Shows the issue in the top section of the page and all its available Segments in the bottom section of the page. This page is accessed by tapping an issue con-taining Segments (recognizable by its icon).

Figure 13.1a. Issue with Segments can be recognized by their icon. In this example, the issue to the left contains Segments, the issue to the right does not contain Segments. Tapping the issue with Segments brings up the Segments Overview page.


87

The following components are available (see examples on the following pages):

Library Overview page �Back to issue button. For returning to the

issue which is currently open.

�Library filter. For filtering the Library by con-tent type.

�Edit/Done button. For quickly deleting an issue. Once tapped, it changes into the Done button for exiting the edit mode.

�Sign In/Sign Out button. (Reader Apps with subscription functionality only) For signing in to or out of a non-iTunes subscription account. Only when logged in will the Library show the content that is available as part of the non-iTunes subscription.


�Cover thumbnail. A thumbnail of the cover.

�Download button. For downloading the issue. In case the issue contains Segments, all Segments will also be downloaded.

�Name and description. The name and description of the issue or Segment.

Segments Overview page �Back to Overview button. For returning to

the Library Overview page.

�Back to issue button. For returning to the issue which is currently open.

�Segment filter. For filtering the Library by Segment.

�Edit/Done button. For quickly deleting a Segment. Once tapped, it changes into the Done button for exiting the edit mode.

�Download Issue button. For downloading the issue–including all Segments when avail-able–in one action.

�Segment Download button. For download-ing an individual Segment.



88

Figure 13.1b. The assets of the Library Overview page on the iPad

A Back to issue button B Issue with SegmentsC Downloaded issue without SegmentsD Library filter E Edit button

A

D E

B C


89

Figure 13.1c. The assets of the Library Segments Overview page on the iPad

A Back to Overview button B Back to Issue buttonC Download Issue button D Segment FilterE Edit buttonF Issue cover G Downloaded SegmentH Not yet downloaded Segment

A DCB E

F

G H


90

13.2 Android App Library

The Library of the Android Reader App shows all available issues and Segments. This page is accessed by tapping the Library button in the Navigation bar.

The following components are available:

�Library filter. (Honeycomb only) For filtering the Library by content type.

�Segment filter. (Honeycomb only) For filter-ing the Library by Segment.

�Sign In/Sign Out button. (Reader Apps with subscription functionality only) For signing in to or out of a subscription account. Only when logged in will the Library show the content that is available as part of the subscription.


�Cover or Segment thumbnail. A thumbnail of the cover or Segment.

�Download button. For downloading the issue or Segment. (Segments can only be downloaded individually.)


Figure 13.2. The Library on the Android Reader App

A Library filter B Segment filter C Sign In/Sign Out button D Issue Segment (not yet downloaded) E Downloaded issue Segment

CBA

D

F

E


91

13.3 Navigating the Library

The Library can display a variable number of issues at a time. Navigating between additional groups of issues can be done by swiping vertically.

13.4 Using the Library Filter

A magazine can be set to belong to a particular type of publication (such as news, sports, or defined by lan-guage). When implemented, the Library Filter can be used to filter the Library by those content types. For instance, if issues are available in a specific language, choose the language from the filter to only show content in that language.

Figure 13.4. The Library filter allows a user to filter the Library by content type (shown here on the Android Honeycomb)

B

A

A Filter button B Filter list

The filter is used by performing the following steps:

Step 1. Tap the Filter button in the top Toolbar.

A list appears showing all available choices. Choices by which the Library is currently filtered are indicated by a check mark; those by which the Library is not currently filtered do not have such a check mark. (Multiple selected choices are possible.)


92

Step 2. Tap the filter item(s) to have them included in or excluded from the filtering process.

As soon as a choice is made, the Library con-tent is updated based on the new filtering rules.

Step 3. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list.


93

13.5 Using the Segment Filter

A magazine can be made available as a single down-load or in Segments. The Segment Filter can be used to quickly find the Segment which you are after.

The filter is used by performing the following steps:

Step 1. Tap the Filter button in the top Toolbar.

A list appears showing all available choices. Choices by which the Library is currently filtered are indicated by a check mark; those by which the Library is not currently filtered do not have such a check mark.

The items which appear in the Segment Filter are determined as follows:

�iPad Reader App: only those Segments which have been defined for the issue appear in the list.

�Android Reader App: When a choice is made from the Library Filter first, only those Segments that have been defined for the issue which is chosen appear in the list.

Step 2. Tap the filter item(s) to have them included in or excluded from the filtering process.

As soon as a choice is made, the Library con-tent is updated based on the new filtering rules.

Step 3. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list.

Figure 13.5. The Segment filter allows a user to filter the Library by defined Segments

A Segment Filter button B Filter list

A

B


94

13.6 Downloading Issues and Segments

Downloading issues and Segments from the Library is done as follows:

iPad Reader AppDownload an issue by doing one of the following:

�On the Library Overview page, tap the download button for the issue.

�On the Segments Overview page, tap the Issue Download button. The issue including all its Segments will be downloaded.

Download a Segment by doing one of the following:

�On the Library Overview page, tap the download button for the issue. The full issue including all its Segments will be downloaded.

�On the Segments Overview page, do one of the following:

�Tap the Issue Download button. The issue including all its Segments will be downloaded.

�Tap the Download button for an indi-vidual Segment; only that Segment will be downloaded

Android and HTML5 Reader App �Tap the Download button from either the

Library or the Preview screen. Segments can only be downloaded one-by-one.

13.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.

�(iPad Reader App only, and only if the down-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 (pro-gressive downloads).


95

13.8 Deleting an Issue or Segment

An issue or Segment is deleted from the Library by per-forming the following steps:

Step 1. Use one of the following methods:

�Tap and hold the issue or a Segment of the issue which needs to be deleted

�(iPad Reader App only) Tap the Edit but-ton in the Status bar of the Library.

The following will take place:

�iPad: A Remove button ( ) will appear in the top left-hand corner of the cover.

�Android: A context menu appears with a Delete command.

Step 2. Do one of the following:

�iPad: Tap the Remove button

�Android: Tap the Delete command

The following will happen (where applicable):

�Bookmarks: any created Bookmarks for the issue will be removed.

�For issues: when the issue does not consist of Segments, it is removed from the Library.1

�For Segments: as long as at least one Segment of the issue is still available, all Segments continue to be displayed in the

1 If the issue or Segment is part of a subscription and the user is logged in to the subscription account, the downloaded issue is removed from the app but remains available for downloading in the Library.

Library; the Segment which is removed will appear dimmed and its Download button appears again. As soon as the last Segment of an issue is removed, all Segments are automatically removed.1

Step 3. (iPad only) To finish the process, tap Done in the Status bar of the Library.

Cancelling the processTo cancel the process without deleting the issue, do the following:

iPad Reader App Do one of the following:

�Tap the Done button in the Status bar of the Library

�Navigate to a different area of the Reader App, such as an open issue or the Store

Android �Tap the Back button


96

14. 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.

This means that when opening the Reader App, this shell is displayed first. This functionality can be used by pub-lishers to first present other content to the user (such as an online TV guide), before offering the user the possibility to access the latest issue of the magazine, the Store, or the Library.

Obviously, it is entirely up to the design of this exter-nal shell how the method of accessing the magazine is presented.

15. 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.

This information can be found in the following locations:

�iPad: in the Settings app of the digital device. (See figure below.)

�Android: (Framework version only) On the Manage Applications screen (accessed via Settings App > Applications).

Figure 15. The version information of a Reader App on an Applie iPad


97

16. Reader App Updates

New Reader App features are made available to publish-ers on a regular basis. When a new magazine issue is published which makes use of a new feature, updating the installed Reader App is required.

This process only applies to those Reader Apps which do not bundle the magazine content with the

Reader App.

When a user starts the download of an issue, the version number of the Reader App is verified against the mini-mum version that is required to read the issue. When the Reader App version is lower than the specified minimum version, a message is displayed informing the user that the Reader App requires updating; the download cannot be started before the Reader App is updated.

When receiving such a message, respond by doing one of the following:

�Tap Cancel. The Reader App is not updated. Any issues which are compatible with the currently installed Reader App can still be downloaded and read; issues which require an updated Reader App cannot be downloaded.

�Tap OK. You are transferred to the App Store from where the new version can be downloaded free of charge. After downloading, both old and new magazine issues can be downloaded and read.

17. Using the HTML5 Reader on a PC

The HTML5 Reader App is specifically designed for view-ing on a desktop PC/laptop using a suitable Web browser. Since these are devices without a touch screen, interac-tion is performed by using the mouse or keyboard.

The following behavior is different on a desktop PC/laptop compared to a touchpad device (see also figure below):

�Clicking vs tapping. Instead of tapping the screen to invoke specific functionality, click once with the mouse.

�Mouse hovering. Hovering the mouse pointer over a certain area makes specific com-ponents appear. This is the case for instance when hovering the mouse pointer over one of the Navigation Zones, which makes the Navigate to Next Page, Navigate to Previous Page, the Navigation bar, or the top Toolbar appear. (See figure below.)

�Mouse dragging. Navigating between pages or stories can be done by dragging the page up, down, left, or right by using the mouse.

�Closing navigational tools. Closing the navigational tools is done as follows:

�Story Viewer / Page Viewer: click the Close button in the top right-hand corner

�TOC List: click the TOC List icon in the top Toolbar

�Locking the Navigation bar/top Toolbar. The Navigation bar and the top Toolbar can be locked by clicking on it once. When locked, these bars will be permanently visible. To unlock each bar, click it once again.


98

Figure 17. When hovering the mouse pointer over the Navigation Zones, controls appear

A

B

C

E

D

F

A Top Toolbar B Navigate to Previous Page/Story area C Navigation bar D Navigate to Previous Page Area E Navigate to Next Page/Story Area F Navigate to Next Page Area

5

05

5

One of the main advantages of the WoodWing’s Digital Magazine Tools is the ability to create con-tent using Adobe InDesign.

In essence, the default InDesign tools will already allow you to create content for publishing as a digital magazine. However, to make this magazine much more dynamic, additional features are made available for adding multi-media content and interactive components:

�Audio panel. Used for assigning an audio file to a frame on a page.

�Dossier Link panel. Used for creating a link to a story in the magazine.

�Hotspot panel. Used for creating a Hotspot on a page.

�Scrollable Area panel. Used for creating an area on the page of which the content exceeds the frame’s width or height. To scroll through the content, the user can scroll either horizontally or vertically.

�Slide Show panel. Used for adding a Slide Show to a page.

�Video panel. Used for assigning a video to a frame on a page.

�Web Elements panel. Used for including external content from the Internet.

�Widgets panel. Used for including HTML5 widgets.

All panels can be accessed via the Digital Magazines submenu of the Windows menu.

Creating Content

Chapter 05 Creating Content

6

The DM Artboard functionality allows you to assign con-tent for use on different devices (using differently sized screens).

In this chapter, you will learn how to use the tools for cre-ating dynamic content and you will learn about the exact specifications required for creating a digital magazine.

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, see chapter 3, The Concept.

This chapter describes the creation of the following com-ponents 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 ofipThe ofip format is an initiative of WoodWing Software aimed at developing a standardized data format for interactive publications, such as digital magazines, news-papers, books and brochures. (For more information, see http://www.ofip.info.)

With the expectation that this format and its features are going to be implemented by Reader Apps, delivery plat-forms, Newsstands, etc. on an increasing level in the near future, WoodWing advices to get familiar with the ofip features and possibly start implementing them into your current workflow with immediate effect.

For more information about the newly introduced ofip metadata properties, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration – Step 7. Adding Custom Metadata.

http://www.ofip.info


7

1. Creating a Story

The creation of a digital magazine involves the creation of stories. For each story (this includes the cover, table of contents, and any full page adverts in the magazine), a Dossier needs to be created. For a successful export, 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, as well as in chapter 6, Exporting Content.)

The following is a summary of those rules:

�For viewing the magazine in landscape orien-tation, the system expects the Dossier always to have one layout in landscape orienta-tion assigned to the Publication Channel of the digital magazine. (The Dossier may contain additional layouts in landscape orientation, but these may not be assigned to the digital maga-zine Publication Channel).

�For viewing the magazine in portrait orienta-tion, 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. Either needs to be assigned to the Publication Channel of the digital magazine. (The Dossier may contain additional articles or layouts in portrait orien-tation, but these may not be assigned to the digital magazine Publication Channel)

�When the Text View is used for displaying a page in portrait orientation, a header image can be used and images related to the story can be shown following the story at the bottom of the page. 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.

�If a layout contains a video or a Slide Show, that video or the images that are part of the Slide Show also need to be stored in the Dossier.

In this user guide we follow a basic workflow for creating a story:

Step 1. Creation of a Dossier.

Step 2. Creation of one or more pages.

Step 3. Design of the created pages.

Each step is explained in the following sections.

The quickest way of creating a story is by making use of Dossier templates which already contain the

content required for that story. If your company makes use of such a workflow and Dossiers and layouts do not have to be created from scratch, you can start right away with designing the layout. Navigate to section 5. Designing a Page.


8

2. Creating a Dossier

To create a Dossier for a digital magazine story, perform the following steps:

Step 1. Use any of the following methods:

�Create a Dossier from scratch by using 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

�Create a Dossier when checking in a layout using Smart Connection for InDesign

For more information about these methods, see the Smart Connection 7 User Guide for InDesign or the Content Station 7 User Guide.

Step 2. In the Dossier properties window, set the following properties (either during the creation of the Dossier or after the Dossier has been created):

� 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, allowing the user to preview a complete dynamic story as opposed to a single-page static image.

�Description. A description of what the story is about as displayed in the following locations of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark.

Keep both the Description short; if it exceeds the width of the page

preview in the Reader, ellipses are shown for the part which cannot be displayed.

�Section title. The section name as displayed in the Section Viewer of the Navigation bar on the reader device.

�Story title. The story title as used in the following areas:

�Displayed in the following locations of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark.

�Used as the text for the shared link in a Facebook post.

A Preview B Description C Section title D Story title E Intent

AB

CDE

Figure 2. The Dossier dialog box in Content Station showing the various Digital Magazine properties


9

�Used as the e-mail subject when shar-ing a link by e-mail.

Keep both the Story title short; if it exceeds the width of the page pre-

view in the Reader, ellipses are shown for the part which cannot be displayed.

�Intent. Choose the intent with which the Dossier is to be used:

�TOC. Links the Dossier contain-ing the layout(s) with the table of contents to the TOC button in the Reader App. (When the user taps the button, he or she will be directly navigated to the table of contents.)

�Help. Links the Dossier contain-ing the layout with an explanation about how to use the Reader App to the Help button in the Reader App. (When the user taps the button, he or she will be directly navigated to the Help page.)

3. Creating a Page

When creating a page, the following considerations should be made:

�Is a styled page in portrait orientation required? If so, do one of the following:

�InDesign CS4 users: create a dedi-cated layout

�InDesign CS5 users: create a dedicated layout or a styled article (to be displayed in Text View mode)

�Should the user be able to scale the text when viewing the page in portrait orientation? If so, the creation of a layout is not required; instead an article should be created.1 This article will be displayed in Text View mode.

�Will the content be displayed in separate pages (typically used for regular stories), or will the layout consist of one continuous page (typically used for a table of contents)? This obviously affects the dimensions of the layout.

1 InDesign CS5 users can apply formatting and styling (including the use of tables) to the article


10

Your administrator may have set up Dossier templates for each part of the

magazine (such as the cover, table of contents, stories, etc.). Using these Dossier templates will greatly speed up the process of creating con-tent. If your workflow involves the use of layout templates and layouts are ready for you to be used, you can skip this section and jump straight to section 5. Designing a Page.

Whichever method you will be using, preparation is half the work. Note that

when changing the dimensions of the page at a later stage, repositioning the already present content can be time-consuming.

3.1 Page Sizes

With the introduction of the DM Artboard functionality, the dimensions of an exported page are not based on the dimensions of the layout on which the content is placed any more. Instead, the dimensions of a DM Artboard are used.

A DM Artboard is essentially a mask placed over the layout; all content within the boundaries of the mask is included in the export.

Multiple DM Artboards can be set up for a layout, but only one is visible at a time.

When a DM Artboard is created, 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.php file. The size or position of the DM Artboard can at any point be changed; as long as its aspect ratio is maintained, the export will succeed.

It is even possible for the user to move the artboard around, including placing it (partly) on the pasteboard.

Initial page sizeOf course, a layout needs to be given a certain size so that it can be easily worked on. In theory, a very small layout could be created, with a DM Artboard containing small-sized content. As long as the content fits properly within the boundaries of the artboard, it will export and look correctly.

Because the artboard will also work when placed (partly) over the pasteboard, it is even possible to create a page of any size and place the content (partly) on the pasteboard.

As far as the DM Artboard functionality is concerned, this will all work. Practically though, an InDesign user will prefer to view the layout in either actual size, or fit within the current window so it is best to work within the bound-aries of a layout.


11

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. 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.

For an example of the use of an artboard, see figure 3.1 on the next page.

For information about creating a layout in the exact size of a digital device, see appendix A, Layout Sizes.


12

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


13

3.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. 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. You might therefore want to refrain from adding interactive content such as Hotspots in these areas, 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.2 below shows the values converted to the regu-larly used units of measurement (based on 132 dpi/ppi).

Table 3.2. Bar size in pixels converted to various units of measurementSize Value (based on 132 dpi/ppi)

Picas Points Inches Millimeters Centimeters48 pixels 2p2.182 26.182 pt 0.3636 in 9.236 mm 0.9236 cm49 pixels 2p2.727 26.727 pt 0.3712 in 9.429 mm 0.9429 cm50 pixels 2p3.273 27.273 pt 0.3788 in 9.621 mm 0.9621 cm62 pixels 2p9.818 33.818 pt 0.4697 in 11.93 mm 1.193 cm


14

3.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 display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in landscape orientation1.

To create such a layout, perform the following steps:

Step 1. From the File menu, choose New followed by Document to open the New Document dialog box.

Step 2. Enter the number of required pages.

Step 3. Enter a width which exactly matches the width of the screen.

Step 4. Enter a height which at least matches the height of the device (higher values are allowed2).

See appendix A, Layout Sizes for the various page dimensions.

Step 5. Set the Columns, Margins, Bleed and Slug settings as required.

Note that Bleed and Slug are not used as such, any content in those areas is not

included in the export.

Step 6. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine.

1 The Reader App can also be configured to display only pages in portrait orientation.

2 If the page is made higher than the height of the device, the layout may contain only one page.

Step 7. Add the layout to a Dossier by doing one of the following:

�Automatically add the layout to a Dossier by choosing an existing Dossier from the Dossier list in the Check In dialog box.

�Choose New Dossier from the Dossier list in the Check In dialog box to create a new Dossier. (Make sure that the required Dossier properties are correctly set as explained in section 2. Creating a Dossier.)

�Add the layout to a Dossier after the lay-out has been created.


15

3.4 Portrait Orientation

Creating a layout with one or more pages in portrait orien-tation is done under the following circumstances:

�When the Reader App has been configured to display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in portrait ori-entation 1.

�When using InDesign CS4 and the pages in portrait orientation need to be designed in the same way as the pages in landscape orientation (as opposed to using the Text View mode, see section 3.5 Text View Mode)2

To create a layout in portrait orientation, perform the fol-lowing steps:

Step 1. In the New Document dialog box, enter the following values:

�Enter a width which exactly matches the width of the device.

�Enter a height which at least matches the height of the device (higher values are allowed).

If the page is made higher than the height of the device, the layout may

contain only one page.

See appendix A, Layout Sizes for the vari-ous dimensions.

1 The Reader App can also be configured to display only pages in landscape orientation.

2 InDesign CS5 users can match the layout design by using the CSS styling features of the Text View mode

Step 2. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine.

Step 3. Add the layout to a Dossier by doing one of the following:

�Automatically add the layout to a Dossier by choosing an existing Dossier from the Dossier list in the Check In dialog box.

�Choose New Dossier from the Dossier list in the Check In dialog box to create a new Dossier. (Make sure that the required Dossier properties are correctly set as explained in section 2. Creating a Dossier.)

�Add the layout to a Dossier after the lay-out has been created.


16

3.5 Text View Mode

When the Reader App has been configured to show pages in portrait orientation, you have the choice over how the story is presented on such pages: as a fully designed page or in Text View mode.

Text View mode is not available in the Android Reader App.

Creating a fully designed page is achieved by sim-ply creating a layout in portrait orientation and adding designed content, similar to creating a page in landscape 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. Images can be included as well.

Due to the different article formats used by InDesign CS4/InCopy CS4 and InDesign CS5/InCopy CS5, differ-ent workflow methods exist for each CS version. Each is described in the following sections.

3.5.1 Using InDesign CS4

To create an article for Text View Mode using InDesign CS4, perform the following steps:

Step 1. Create a layout and save it to the system.

This could be the layout used for the page in landscape orientation, or it can be a dummy layout, solely used for creating an article. (If the latter, make sure that it is not included in the export of the magazine.)

Step 2. 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. However, articles intended to be used for Text View mode are not allowed to contain any images. Check with your administrator if this feature is enabled.

(Optional, 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, the Elements panel or in Content Station. Should any image component exist, delete it from the article.

�Place an already created article (created using InDesign CS4 or InCopy CS4) on the layout.


17

Step 3. For each article component, assign an appropriate Element label (such as body, cap-tion, byline, etc).

Element labels are used by the system for assigning a font family to the text. Which

font is assigned to which label is determined by means of a configuration file. Check with your administrator which Element Labels can be used.

Step 4. Apply any font styles (such as bold, italic, etc.) to the text as required.

Step 5. Save the article by performing a Save Version or a Check In action.

Make sure that the article is added to the same Dossier as the story it belongs to.

Including a header image(Optional) To display an image as a header at the top of the article, perform the following steps:

Step 1. In InDesign or Content Station, access the Properties dialog box for the image that needs to be set as the header.

This image needs to have the exact dimensions (width and height) in which it

is going to be displayed on the digital device.

Step 2. From the Intent list, choose Header.

Step 3. Click OK to close the Properties dialog box.

Make sure that only one image in the Dossier has the intent property set to

Header.

Including other images(Optional) Additional images can be added to the story, which are displayed below the article, 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.


18

3.5.2 Using InDesign CS5

To create an article for Text View Mode using InDesign CS5, follow the steps as outlined in appendix B, Creating Text View Markup Articles.

3.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 appli-cation in Content Station. You can therefore safely ignore setting the page numbering for each layout.


19

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.

Using the DM Artboard functionality is optional, see section 4.6 Working Without Artboards for more

information.

A DM Artboard is essentially a frame with the following characteristics:

�Its dimensions are taken from the settings as defined in the configserver.php file.

�It has a 60pt stroke applied to the outside of the frame, with a stroke color of 32% black (C0 Y0 M0 K32).

�It is part of a DM Artboard layer, which itself is placed above all other layers.

�The DM Artboard layer is locked by default.

�The DM Artboard layer is a non-printable layer, meaning that it will not be part of the export.

The following DM Artboard components are recognized (see figure 4 on the next page):

�Artboard. The area which is included in the export, defined by the inner area of the DM Artboard frame.

�Boundary. The outer edges of the artboard, defined by the DM Artboard frame.

�Non-inclusion area. The area which is not included in the export, defined by the area out-side the DM Artboard frame. (This is indicated by a 60pt gray stroke, but note that this area extends beyond the stroke.)

�Safe area. The area identical for each used artboard.

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)

�The content needs to be assigned to a device through the Editions panel


For more information about DM Artboards, see section 3.1 Page Sizes.


20

Figure 4. The use of DM Artboards.

In the figure on the left, a layout is shown created in a 4:3 aspect ratio. A DM Artboard with also a 4:3 aspect ratio fits exactly around the page border. Since the whole of the page lies within the artboard boundaries, content placed anywhere on the page is included in the export. Content placed on the pasteboard is not included, as indicated by the gray non-inclu-sion area (although the non-inclusion area extends beyond the gray stroke).

The figure in the middle shows the same 4:3 layout, but now with a 16:9 DM Artboard placed over it. Content placed in the areas to the left and right of the layout or the pasteboard will not be included in the export.

In the figure to the right, the two DM Artboards are shown simultaneously: the area shared by both artboards (marked in green) is the “safe” area, 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).

A A D

B B

C C

A Artboard B Boundary C Non-inclusion area D Safe area


21

4.1 Creating a DM Artboard

To create a DM Artboard, perform the following steps:


�Create a new layout and save it to the Issue that it needs to be part of. Make sure to assign all available DM Artboard Editions to the layout.

�Open an existing layout and make sure that all available DM Artboard Editions are assigned to it (for instance by performing a Save Version action).

Step 2. From the Layout menu or the flyout menu of the Editions panel, choose DM Artboard followed by one of the following commands:

�Create for Page. For creating DM Artboards on the current page only.

�Create for Document. For creating DM Artboards for all pages of the document.

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, one for each device as defined in Enterprise server.

�Each defined device is represented by an Edition in the Editions panel. Each cre-ated artboard is assigned to its respective Edition. The content assigned to the Edition listed first in the Editions panel is made visible.

�A new top layer is created in the Layers panel.

Step 3. (Optional, can be performed at any stage) For those pages for which no DM Artboards have been created, use the Create for Page or Create for Document commands to create artboards for those pages.

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.


22

4.2 Switching Between DM Artboards

When a DM Artboard is created, it is automatically assigned to its corresponding Edition. Since the content of only one Edition can be displayed at a time, only one artboard can also be displayed at a time.

To display another DM Artboard, do the following:

�In the Editions panel, make another DM Artboard Edition visible by clicking its eye icon.

When doing this, the DM Artboard for that Edition as well as all content assigned to that Edition is made visible; content belonging to other Editions is hidden.

For more information about working with Editions, see the Smart Connection User Guide for InDesign.

4.3 Adjusting the DM Artboard

When a DM Artboard is created, a frame is placed on the page in as large a size possible to fit that page. Its dimen-sions are based on the aspect ratio as defined in the configserver.php file. The frame is aligned to the middle of the layout and has a gray stroke applied. You might want to adjust the size or position of the artboard to better place it around the items on the page, or modify the way the artboard looks or even rename it.

Unlocking the DM ArtboardTo perform any of these steps, unlock the DM Artboard layer by removing the lock in the Layers panel.

Renaming the DM Artboard To rename the DM Artboard, rename the layer in the Layers panel.

Adjusting the size and/or positionTo adjust the size or the position of the DM Artboard, perform the following steps:

Step 1. Select the DM Artboard by selecting it in the Layers panel or by selecting it on the page.


�Move the DM Artboard to its required position.

�Resize the DM Artboard while maintain-ing its aspect ratio.

The best way of doing this is by drag-ging a corner while holding down

Shift.


23

When the aspect ratio does not cor-respond with the settings expected

by Enterprise server, the export will fail. (The export will not fail when a long page is created; since the minimum page height is exceeded for these types of pages, a non-matching aspect ratio is allowed.)

As far as the system is concerned, an artboard can be of any size, as long

as its aspect ratio is maintained. However, do not make the artboard too small; it might be impractical to create very small objects, use very small type, and having to zoom in extensively in order to see the content.

Changing the look of the DM Artboard To change the look of the DM Artboard, apply a different stroke or fill color.

Locking the DM ArtboardAfter completing modifying the DM Artboard, lock it by setting the lock for the DM Artboard layer in the Layers panel.

4.4 Assigning Content to a Device

The DM Artboard feature makes use of the Edition func-tionality for assigning content for inclusion in the export to a particular device. The DM Artboard itself is also part of the device’s Edition, in order to mark the boundaries of that device.

Using the Edition functionality offers the following advantages:

�Single layout. Instead of creating separate layouts in dedicated sizes, only one layout needs to be created. This speeds up the pro-cess of making (small) adjustments to (shared) content, since this content is readily available.

�Shared content. Content which is identical 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. This content therefore only has to exist once in the layout. The more shared content is available, the more time is saved updating that content for output to different devices.

Assigning content to a DM Artboard Edition is no dif-ferent to assigning content to any other Edition: assign content that can be included in the export to multiple artboards to those multiple Editions; assign content only to be included in the export to a particular device to that particular Edition only.

For more information about using Editions, see the Smart Connection User Guide for InDesign.


24

4.5 Points to Note

When working with DM Artboards, note the following:

�Since the DM Artboard is part of a non-print-able layer, the following functionality is affected:

�When viewing a layout in Preview mode, any visible artboards are hidden, thereby potentially displaying an empty area of the layout instead.

�When exporting a layout to PDF, any vis-ible artboards are not included unless the export option Include Non-Printing Objects is selected.

�When exporting a layout to PDF, the dimensions of the layout are used as the base for the page size of the PDF, not the boundaries of the DM Artboard.

4.6 Working Without Artboards

It is perfectly possible to work without using any DM Artboards. You might for instance only want to create content for one particular device and don’t concern your-self with outputting to multiple devices.

In such a scenario, simply create a layout based on the dimensions for that device1 and don’t make use of the DM Artboard functionality.

When exporting the content, the system will expect the layout to be in the dimensions of the device, else the export will fail.

1 For information about exact dimensions, see appendix B, Page Sizes.


25

5. 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 publica-tion. 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.

�Audio panel. Used for assigning an audio file to a frame on a page.

�Dossier Link panel. Used for creating a link to a story in the magazine.

�Hotspot panel. Used for creating a Hotspot on a page.

�Scrollable Area panel. Used for creating an area on the page of which the content exceeds the frame’s width or height. To scroll through the content, the user can scroll either horizontally or vertically.

�Slide Show panel. Used for adding a Slide Show to a page.

�Video panel. Used for assigning a video to a frame on a page.

�Web Elements panel. Used for assigned external content from the Internet to a frame on a page.

�Widgets panel. Used for turning a frame into a Widget (an HTML5 component with distinct functionality, such as a 360-degree view of an object, a slide show, a zoomable image, etc).

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, and the number of times such an object can be placed on a layout.

Table 5b on the following pages shows an overview of the options for placing Hotspots in Scrollable Areas and vice versa.

To read these tables, 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.

Only dynamic objects are listed, regular objects such as images follow the default InDesign placing

rules.

Note that when including an object into another object is permitted, that this is only allowed down

to one level deep. For example: adding a Scrollable Area to a Hotspot is allowed, but adding another Hotspot in that Scrollable Area is not.

The following sections will explain how to use each of the new Digital Magazine panels.

Frame iconsAny frame containing content created using the Digital Magazine Tools can be recognized by an icon at the top of the frame.

These icons are only visible when the layout is dis-played in Normal screen mode.

Table 5c on the following pages shows the icons used for each type of Digital Magazine content.


26

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.

Table 5a. Limitations of dynamic objects on a page

Created inside a:

Slide Show Video

Audio File

Dossier Link

Web Element Hotspot Widget

Scrollable Area

Custom Object

Number of placements on layout

Slide Show Unlimited

Video Unlimited

Audio File Unlimited

Dossier Link Unlimited

Web Element Unlimited

Hotspot Unlimited

Widget Unlimited

Scrollable Area Unlimited

Custom Object Unlimited


27

Table 5b. Placement options between Hotspots and Scrollable Areas

HotspotHotspot on a Hotspot

Scrollable Area

Hotspot on a Scrollable

Area

Scrollable Area on a Hotspot

Hotspot Hotspot on a Hotspot

Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot

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.

Table 5c. Digital Magazine frame iconsIcon Content Type Icon Content Type

Audio Slide Show

Video Web Element

Dossier Link Scrollable Area

Hotspot Widget


28

Reader App HotzonesThe Reader App can optionally be set up to include Hotzones: areas to the left, right, top (Android Reader App only) and bottom of the screen which the user can tap in order to navigate the magazine. (For more informa-tion, 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. Any interactive content positioned in a Hotzone will not function when the user taps inside the Hotzone. Table 4c below shows the width or height of the Hotzone areas (based on 132 dpi/ppi).

You might want to add guides to the layout (tem-plate) to indicate the location of the Hotzones.

Table 5c. Hotzone width or height Zone Value (based on 132 dpi/ppi)

Picas Points Inches Millimeters CentimetersLeft/right 44 pixels 2p0 24 pt 0.3333 in 8.476 mm 0.8476 cm

Top/Bottom 80 pixels 3p7.636 43.636 pt 0.6061 in 15.394 mm 1.5394 cm

Figure 5. iPad Hotzones (shaded in red) can be tapped to navi-gate the magazine; they overrule any underlying functionality


29

5.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. To provide the panel with the images to be used in the Slide Show, each image should be part of the same Dossier in which the layout containing the Slide Show is stored. Furthermore, the images should also be assigned to the same Issue of the magazine.

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 dimen-sions of the digital device on which the Slide Show is viewed.

The Slide Show can only be viewed on the digital device, not in InDesign.

To create a Slide Show, perform the following steps:

Step 1. Open the layout on which the Slide Show should be added.

Step 2. Make sure that the Slide Show panel is displayed.

The Slide Show panel can be shown or hidden by choosing Slide Show from the

Digital Magazine submenu of the Window menu.

Step 3. Select the image on the layout that should contain the Slide Show.

When Hotzones are enabled in the Reader App, these will block any underlying func-

tionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones).

Take note of the following requirements:

�Make sure that the images are cropped to the right size for display in full screen mode. (For an overview of the dimensions used on the iPad, see appendix A, Layout Sizes.)

�The images should be part of the same Dossier in which the layout containing the Slide Show is stored, else the functionality of the Slide Show panel will not be available.

�The selected image frame on which the Slide Show is based may not be located on a Master page.

Step 4. In the Slide Show panel, select the check box Enable Slide Show. (See figure 5.1 on the next page.)

This check box cannot be selected under the following circumstances:

�The selected frame is already set to con-tain a video, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.

The top half of the panel shows all images that will be part of the Slide Show (when creating a new Slide Show, only one image will be shown: the image that was selected on the layout); the bottom half of the panel shows all images that are available for adding to the Slide Show.


30

Figure 5.1. The top half of the Slide Show panel shows the images that are currently part of the Slide Show; the bottom half of the panel shows those images that can still be added

Step 5. 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, it will appear in the top half of the panel and will disappear from the bottom half of the panel.

�Remove an image by dragging it from the top half of the panel to the bottom half of the panel. When the image is removed, it will appear in the bottom half of the panel and will disappear from the top half of the panel.

Step 6. Reorder the images in the top half of the panel by dragging them to the required position.

A default transition (swipe) is automatically added during export; setting a custom transition is not

possible.


31

5.2 Adding a Video

A video can be assigned to any frame on the layout by making use of the Video panel. When the page is viewed on the digital device, the user can view the video within the assigned frame.

It is not possible to link more than one frame to a video per layout.

A video can be added in the following ways:

�As a URL. Use this method to link to a file which is located on the Internet. (This reduces the total file size of the Reader App, but an inter-net connection is required to view the video on the digital device.)

�As a file. Use this method to embed the video in the Reader App. (The video will be immedi-ately available to the user, but the total file size of the Reader App will increase.)

A video can be played in the following ways:

�Automatically. The video will be played as soon as the page on which the file is located is accessed.

�Directly in fullscreen. The video is played directly in fullscreen mode as soon as the page on which the file is located is accessed.

Each method is explained below.

Video can also be included in a Hotspot or Scrollable area.

5.2.1 As a URL

Step 1. Open the layout in which the video should be added.

Step 2. 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.

Step 3. Select the frame or group of frames on the layout that should contain the video.



This frame may not be located on a Master page.

This frame may not be an inline or anchored frame.


Place an image in the frame to for instance act as a preview of the video; if the frame

is left empty, the first frame of the video will be shown in the exported page.

Step 4. In the Video panel, select the check box Enable Video. (See figure 5.2.1 below.)



32

�The frame is already assigned to a video as a file. Clear the Enable Video check box.

�The selected frame is already set to con-tain a Slide Show, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.

Figure 5.2.1. To reference a video by a URL, enter the URL in the Video panel

Step 5. In the Source section, choose Internet.

Step 6. In the Location section, enter the URL to the video file in the URL box.

For supported video formats, see:

�Apple iPad: http://www.apple.com/ipad/specs/

�Android: http://developer.android.com/guide/appendix/media-formats.html

�HTML5: http://en.wikipedia.org/wiki/HTML5_video

The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played (assuming that internet access is available).

For information about the Play Automatically option in the Video panel, see section 5.2.3 Auto Play.

For information about the Directly in Fullscreen option in the Video panel, see section 5.2.4 Auto

Fullscreen.

http://www.apple.com/ipad/specs/


http://developer.android.com/guide/appendix/media-formats.html


http://en.wikipedia.org/wiki/HTML5_video



33

5.2.2 As a File

Step 1. 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.

For supported video formats see the fol-lowing resources:



�HTML5: http://en.wikipedia.org/wiki/HTML5_video

Step 2. Open the layout in which the video should be added.

Step 3. Make sure that the Video panel is displayed.

The Video panel can be shown or hidden by choosing Video from the Digital


Step 4. Select the frame or group of frames on the layout that should contain the video.






Place an image in the frame to for instance act as a preview of the video; if the frame

is left empty, the first frame of the video will be shown.

Step 5. In the Video panel, select the check box Enable Video.

Figure 5.2.2. The top half of the Video panel shows the video that is currently linked to the selected frame; the bottom half of the panel shows the videos to choose from









34

�The selected frame is already set to con-tain a Slide Show, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.

Step 6. In the Source section, choose Dossier (selected by default).

The top half of the panel shows the video which is currently set to be embedded (when no video is linked yet, this section will be empty); the bot-tom half of the panel shows all videos that are available to choose from.

Double-click a video in the lower half or top half of the panel to preview it.

Hover the mouse pointer over a video to display the file name in a tooltip.

Step 7. Assign a video to the frame by doing the following:

Step 7a. If a video is already displayed in the top half of the panel, remove it by drag-ging it to the bottom half of the panel. When the video is removed, it will appear in the bottom half of the panel and will disappear from the top half of the panel.

Step 7b. 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. When the video is added, it will appear in the top half of the panel and will disappear from the bottom half of the panel.

The process is now complete. When the frame is tapped by the user on the digital device, the embedded file is played.

For information about the Play Automatically option in the Video panel, see section 5.2.3 Auto Play.

For information about the Directly in Fullscreen option in the Video panel, see section 5.2.4 Auto

Fullscreen.


35

5.2.3 Auto Play

To have the video played automatically as soon as the page on which the file is located is accessed, select the check box Automatically in the Play section of the Video panel.

5.2.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, select the check box Directly in Fullscreen in the Play section of the Video panel.

Videos which are set to automatically play in fullscreen mode will only play in fullscreen mode;

when minimizing the video, play will stop. When subse-quently tapping the play button, the video will be played fullscreen once more.

5.3 Adding an Audio File

An audio file can be assigned to any frame on the lay-out by making use of the Audio panel. When the page is viewed on the digital device, the user can play the audio file within the assigned frame.

An audio file can be added in the following ways:

�As a URL. Use this method to link to a file which is located on the Internet. (This reduces the total file size of the Reader App, but an inter-net connection is required to play the audio file on the digital device.)

�As a file. 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.)

An audio can be played in the following ways:

�Automatically. The audio will be played as soon as the page on which the file is located is accessed.

Each method is explained below.

Audio can also be included in a Hotspot or Scrollable area.


36

5.3.1 As a URL

Step 1. Open the layout in which the audio file should be added.

Step 2. Make sure that the Audio panel is displayed.

The Audio panel can be shown or hidden by choosing Audio from the Digital


Step 3. Select the frame or group of frames on the layout that should contain the audio file.




Step 4. In the Audio panel, select the check box Enable Audio. (See figure 5.3.1 below.)


�The selected frame is already set to con-tain a Slide Show, video, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.

Step 5. In the Source section, choose Internet.

Step 6. In the Location section, enter the URL to the audio file in the URL box.

For supported audio formats see the fol-lowing resources:



�HTML5: http://en.wikipedia.org/wiki/HTML5_audio

Step 7. (Optional) To have the audio played automatically as soon as the page on which the file is located is opened, select the check box Automatically in the Play section of the panel.

Figure 5.3.1. Assigning an audio file to a frame is done by using the Audio panel





http://en.wikipedia.org/wiki/HTML5_audio



37

The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played (assuming that internet access is available).

5.3.2 As a File

Step 1. 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.

For supported audio formats see the fol-lowing resources:



�HTML5: http://en.wikipedia.org/wiki/HTML5_audio

Step 2. Open the layout in which the audio file should be added.

Step 3. Make sure that the Audio panel is displayed.

The Audio panel can be shown or hidden by choosing Audio from the Digital


Step 4. Select the frame or group of frames on the layout that should contain the audio file.











38


Step 5. In the Audio panel, select the check box Enable Audio.

Figure 5.3.2. Assigning an audio file to a frame is done by using the Audio panel


�The selected frame is already set to con-tain a Slide Show, video Web Element, or Widget, or is set to act as a Dossier Link, Scrollable Area, or Hotspot. Clear the Enable check box in the respective panel.

Step 6. In the Source section, choose Dossier (selected by default).

A list of audio files that are available in the Dossier appears.

Step 7. 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.

Step 8. (Optional) Use the playback controls in the Skim Over Audio section at the bottom of the panel to play the audio file.

The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played.

For information about the Play Automatically option in the Audio panel, see section 5.3.3 Auto Play.


39

5.3.3 Auto Play

To have the audio played automatically as soon as the page on which the file is located is accessed, select the check box Automatically in the Play section of the Audio panel.

5.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. Through this panel, a reference to the external content (in the form of a URL) can be assigned to the frame.

A section of text can be turned into a hyperlink by placing a Web Element over it in the form of an

invisible frame; make sure to style the text in such a way that it is recognizable for the user as a hyperlink.

The Web Element panel is also used to define how the external content should be displayed: embedded in the frame, as a pop-up window, or in a Web browser.

The external content can only be viewed on the digital device, not in InDesign.

To create a Web Element, perform the following steps:

Step 1. Open the layout on which the Web Element should be added.

Step 2. Make sure that the Web Element panel is displayed.

The Web Element panel can be shown or hidden by choosing Web Element from

the Digital Magazine submenu of the Window menu.

Step 3. Select the frame on the layout that should contain the Web Element.



A Web Element can also be included in a Hotspot or Scrollable area.


40

When the external content is to be dis-played in the frame, make sure that the

dimensions of the frame are sufficient to display the content of the external source properly.

Step 4. In the Web Element panel, select the check box Enable Web Element.

This check box can only be selected when the selected frame is not yet set to contain

a Slide Show or video, an audio file, or is set to act as a Dossier Link, Scrollable Area, or Hotspot. If this is the case, first clear the Enable check box in the respective panel. In the URL box, enter the URL of the source that provides the content.

Step 5. In the URL box, enter the URL to which should be linked.

Step 6. In the Show Web Element section, choose how the content should be displayed:

�In a Web Browser. When the user taps the frame, the content is displayed in the default Web browser on the digital device. (Note that as a result of this action, the Reader App is closed.)

Figure 5.4. The Web Element enabled and a URL entered in the Web Element panel

�As a Pop-up (in the Reader App). When the user taps the frame, the con-tent is displayed in a pop-up window in the Reader App.

�Embedded in the Page (in the Reader App). When the user taps the frame, the content is displayed within the frame.


41

5.4.1 Transparent Web Elements

A Web Element can be made transparent by doing the following:

Step 1. In the HTML page which needs to be made transparent, set the body tag to transparent.

Step 2. Enable the following DMSetting for the Reader App:

�Colors/Enable transparent Web Elements

5.4.2 Link to Store and Library

The displayed HTML page can also include a link to the Store or the Library. To achieve this, 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.

5.4.3 Scale Content to Fit Screen

In some circumstances, the displayed HTML page may not fit the pop-up window properly. For instance, the page could be wider than the pop-up, resulting in not all content being shown.

To have the displayed HTML page scale to fit the pop-up window, enable the following DMSetting:

�Web Element Popup/Scale content to fit screen


42

5.5 Creating a Dossier Link

Dossier Links can be created in two ways:

�On a layout

�In a Web Element

Each is described in the following sections.

5.5.1 On a Layout

Any frame or group of frames on the layout can be set to act as a link to a story. Typically, this is used for cre-ating links on the cover as well as for creating a table of contents, but the feature can also be used to create cross-references between pages within the same story or between pages of different stories. Since each story is represented by a Dossier, the link is created by linking to the Dossier of that story.

To create a Dossier Link, perform the following steps:

Step 1. Open the layout on which the Dossier Link should be added.

Step 2. Make sure that the Dossier Link panel is displayed.

The Dossier Link panel can be shown or hidden by choosing Dossier Link from

the Digital Magazine submenu of the Window menu.

Step 3. Select the frame or group of frames on the layout that should act as the link.



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.


43

Step 4. In the Dossier Link panel, select the check box Enable Dossier Link. (See figure 5.4 below.)


a Slide Show, video, audio file, Web Element, or Widget, or is set to act as a Scrollable Area or Hotspot. If this is the case, first clear the Enable check box in the respective panel.

The Dossier list is enabled, showing all Dossiers assigned to the same Issue as the layout on which the link is created.

Figure 5.5.1. The Dossier Link panel allows you to create a link to a Dossier

Step 5. From the Dossier list, choose the Dossier to which need to be linked.

Step 6. (Optional) In the Page box, enter the page number to which need to be linked.

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.

5.5.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.0 and 1.1 only.

To create a HTML Dossier Link in a Web Element, perform the following steps:

Step 1. Create the Web Element as explained in section 5.4 Creating a Web Element.

Make sure to create a Web Element embedded in the page, else the link will

not work.

Step 2. Export the magazine as explained in chapter 6, Exporting Content.

Step 3. Modify the HTML page of the embed-ded content by doing the following:

Step 3a. Include the following scheme for each Dossier Link:

<a href="ww://storylink?itemid=[itemid]&pageindex=[index]">HTML Dossier Link</a>

Step 3b. Replace [itemid] by the ID of the story to link to.

Step 3c. Replace [index] by the page num-ber in the story to link to.

This is not the page number assigned by InDesign, but the “physical” page

number (for example: a story with 3 pages will have page numbers 1, 2, and 3.)

Example:<a href="ww://storylink?itemid=317&pageindex=1">HTML Dossier Link</a>


44

5.6 Basic Hotspots

A Hotspot is an area on the page on which the user can tap, after which additional content is displayed on top of the page. This functionality is typically used for presenting extra information about an item on the page, such as a product or other item (for instance in the form of a pop-up window or menu structure), and any other scenario in which additional information needs to be displayed.

Figure 5.6. When tapping on one of the red Hotspots, a pop-up appears showing additional information about the tapped area

A Hotspot can also be made to automatically dis-play its content as soon as the page is loaded.

A Hotspot can also be part of another Hotspot (referred to as a Hotspot-on-a-Hotspot). For more

information, see section 5.7 Hotspots on Hotspots.

5.6.1 Terms and Components

When working with basic Hotspots, the following terms and components are used:

�Hotspot: an area on the page on which the user can tap, after which additional content is displayed on top of the page.

�Hotspot content: the content which is dis-played after the Hotspot is tapped.

�Hotspot Content layer: the layer assigned to the Hotspot; it contains the content for that Hotspot (the content which appears after tap-ping the Hotspot).

�Unassigned layer: a layer which is not assigned to a Hotspot and therefore does not hold any Hotspot content.

�Base layer: a layer which itself is not assigned to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the bottom-most layer (but displayed as the top-most layer in the Hotspot panel).

�Selected Hotspot: a page element on the Hotspot Content layer which will appear in place of the Hotspot which is tapped. It is used to mimic the behavior of “selecting” a Hotspot.

�Hotspot Close button: a page element 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.

In the figure below for example, a Hotspot panel is shown for a layout on which a Hotspot has been created on the


45

‘Background’ layer; its Hotspot Content items are placed on the ‘Scheveningen’ layer.

In this scenario, the layers can be matched to the Hotspot-on-Hotspot terms as follows:

�Base layer: the ‘Background’ layer.

�Hotspot Content layer: the ‘Scheveningen’ layer

Figure 5.6.1. The Hotspot panel displays the hierarchy of the created Hotspot (see the text for a detailed explanation of this structure)

The regular functionality of a Hotspot would be as follows:

1. The user taps on a Hotspot.

2. New content appears showing the additional information.

3. The user closes the additional content by tapping the same Hotspot or another Hotspot.

A more advanced method is the following:

1. The user taps on a Hotspot.

2. New content appears showing the additional information. The Hotspot that is tapped disap-pears and the Selected Hotspot appears in its place (optionally designed differently and placed in a different location).

3. The additional content can be closed by doing 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)

When the Hotspot Content disappears, the Hotspot itself appears again.


46

5.6.2 Layers

The Hotspot functionality makes use of layers. The Hotspot itself is created on any of the layers of the regular layout. Using the Hotspot panel, the components which appear after tapping the Hotspot (such as the Hotspot content, the Selected Hotspot, and Hotspot Close button) are created on a different layer (either a dedicated layer or an existing layer).

Initial view on the tablet: the layout and the Hotspot is shown (here the red item on the page)

When the Hotspot is tapped, a pop-up appears, showing additional information

The pop-up window is the Hotspot Content which appears after tapping the Hotspot. It is placed on a different layer.

The Hotspot is created on a base layer


47

The figures below show how the Hotspot is shown on the tablet and how the displayed items are setup in InDesign. (For more examples, see later in the chapter.)

5.6.3 Size and Content

In essence, the Hotspot content can be set to any size, even as large as the page that it is on. 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, including a Slide Show, video, audio, a Web Element, Widget, Dossier Link, or Scrollable Area, or another Hotspot.

Although the Hotspot content can contain another Hotspot (see section 5.7 Hotspots on Hotspots), other added objects cannot contain another Hotspot. For example: it is possible that a Hotspot contains a Scrollable Area and that this Scrollable Area contains a Hotspot; this second Hotspot however cannot contain another Hotspot (or indeed other dynamic objects, see table 5a).


48

5.6.4 Creation

To create a Hotspot, perform the following steps (see also the figures on the following pages):

Step 1. Design the layout on which the Hotspot is to be placed.

Step 2. Create an item on the layout which should act as the Hotspot.

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.

You can also create the item on a layer which acts as a Hotspot Content layer for

an already existing Hotspot. This will however create a Hotspot on a Hotspot which is a differ-ent process. For more information, see section 5.7 Hotspots on Hotspots.)


�The created frames may not be located on a Master page.

�The created frame(s) may not be inline or anchored frames.

�Certain limitations apply to placing Hotspots in other dynamic objects. For more information, see table 5a and table 5b.

�When Hotzones are enabled in the Reader App, these will block any underly-ing functionality; be aware of these zones when placing your frame containing inter-active content. (For more information about Hotzones, see Reader App Hotzones).

Step 3. Make sure that the Hotspot panel is displayed.

The Hotspot panel can be shown or hid-den by choosing Hotspot from the Digital


Step 4. (Optional) Make sure that the Layers panel is displayed.

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.

Step 5. Make sure that the item(s) created in step 2 are selected.

Step 6. In the Hotspot panel, select the check box Enable Hotspot.


a Slide Show, Web Element, Widget, video, audio file, or is set to act as a Scrollable Area or Dossier Link. If this is the case, first clear the Enable check box in the respective panel.

Other limitations which prevent this check box from being unavailable are shown in table 5a and table 5b.

Step 7. (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), do the following:

�In the Hotspot panel, select the Show Automatically check box.

Only one Hotspot Content can be set to automatically appear for each


49

page. When setting this option for Hotspot A while it is already set for Hotspot B, the functionality is removed from Hotspot B and set to Hotspot A.

Now that the Hotspot is defined, we need to specify the layer on which the Hotspot Content is going to be placed. 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, else the panel options will not be available.)

Step 8. To create the Hotspot content on a new layer, perform the following steps:

Step 8a. In the Hotspot panel, click Create New Layer (selected by default).

Step 8b. In the Layer Name box, enter a descriptive name for the layer.

Step 8c. Do one of the following:

�Press Enter.

�Click OK.


�A new layer is created in the Layers panel.

�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).

Step 8d. (Optional) Repeat Steps 5, 6, 8a – 8c to create additional Hotspot Content layers.

Step 8e. Continue with Step 9 or 10.


50

Hotspot content on an existing layer(Make sure that Steps 5 and 6 have been performed, else the panel options will not be available.)

Step 9. To create the Hotspot content on an existing layer, perform the following steps:

Step 9a. In the Hotspot panel, click Use Existing Layer.

The option is not available when:

�Only one layer exists.

�Multiple layers exist but each of these cannot be assigned as a Hotspot Content layer, because they act as a Scrollable Area layer or a DM Artboard layer.

Step 9b. In the list of Existing Layers, select the checkbox for the layer to which the Hotspot Content needs to be added.

You can also create the item on a layer which acts as a Hotspot

Content layer for an already existing Hotspot. This will however create a Hotspot on a Hotspot which is a different process. For more information, see section 5.7 Hotspots on Hotspots.)

Hotspot content can be assigned to one layer only, not to multiple layers.

Step 9c. Continue with Step 10.

With the Hotspot Content layer defined, we can now start creating content on it.

Step 10. Select the Hotspot for which content should be created.

Step 11. In the Hotspot panel, click Edit Layer.


�The Hotspot Content layer corre-sponding to the selected Hotspot is made active.

�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)

Step 12. Create the content which should be displayed when a user taps a Hotspot.

Make sure to not accidentally select a dif-ferent layer in the Layers panel, else you

might see unexpected results when the Hotspot is tapped.


51

Figure 5.6.4a. The starting point for creating a basic Hotspot: a layout which is going to display information about certain loca-tions. 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.


52

Figure 5.6.4b. With a Hotspot selected on the Background layer (layout item “2”), the ‘Enable Hotspot’ option in the Hotspot panel has been selected. A new layer has subsequently been created by using the ‘Create New Layer’ feature of the Hotspot panel, and after clicking OK the new layer has appeared in the Layers panel as well as in the Hotspot panel.

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 new layer is positioned one level below this layer.


53

Figure 5.6.4c. With the newly created layer (‘Scheveningen’) made active in the Layers panel, the Hotspot content has now been created.

In this basic use of a Hotspot, tapping Hotspot ‘2’ will display additional information about the location in the form of a pop-up window. Tapping the Hotspot again will close the displayed Hotspot content.


54

A Starting point on the tablet: the page con-taining a single Hotspot is shown (here the red item on the page)

B When the Hotspot is tapped, the Hotspot Content appears (here in the form of a pop-up window).

The Hotspot Content (here in the form of a pop-up window) is placed on a separate layer.


Hotspot

Hotspot Hotspot Content

Hotspot Content


139

Starting point on the tablet: the page con-taining a single Hotspot is shown (here the red item on the page)

When the Hotspot is tapped, the Hotspot Content appears (here in the form of a pop-up window).

The Hotspot Content (here in the form of a pop-up window) is placed on a separate layer.


Hotspot

Hotspot Hotspot Content

Hotspot Content


55

5.6.5 Creating a Selected Hotspot

In the default Hotspot behavior, the Hotspot which is tapped is kept visible, meaning that both the Hotspot and the Hotspot Content are displayed. This behavior works fine for most scenarios.

Other scenarios though might require a visual indication that the Hotspot is “selected”. For instance: suppose four Hotspots in the form of a row of buttons are available on a page, each displaying their Hotspot Content in the same area above the row of buttons. Using the default behavior, the user is unable to tell for which Hotspot the content is currently shown when tapping each button.

The Selected Hotspot feature solves this. By placing a new frame in the same size, shape and position as the original Hotspot but with different visual properties (such as a different color), and assigning this as a Selected Hotspot, this new button will be shown instead of the orig-inal Hotspot. For the user, it now looks as if the Hotspot has been “selected”.

The creation process is as follows (see also the figures on the following pages):

Step 1. Create the Hotspot and Hotspot Content as described in section 5.6.4 Creation.

Step 2. Do the following:

Step 2a. On the Hotspot Content layer, create the object that should act as the Selected Hotspot. (When this contains multiple frames, make sure to group them).

Step 2b. With the frame or group of frames selected, select the Enable Selected Hotspot check box in the Hotspot panel.

In case the Selected Hotspot functionality should be removed from the page item,

select the item and choose None in the Hotspot panel.


56

Figure 5.6.5. In this example, the Hotspot content is displayed in a sidebar instead of a pop-up. To better indicate to which location on the map the sidebar information refers, a Selected Hotspot has been created (the blue layout item). This item now appears as soon as the original Hotspot is tapped. The item is given this functionality by selecting it on the layout and choosing the ‘Enable Selected Hotspot’ option in the Hotspot panel.

In this example, 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). Tapping the red Hotspot will seem to make it change color, thereby mimicking a ‘selected state’.

Tapping the Selected Hotspot will close the displayed Hotspot content as well as the Selected Hotspot.


57

5.6.6 Creating a Hotspot Close Button

When a Selected Hotspot has been created (see section 5.6.5 Creating a Selected Hotspot), the Hotspot Content can be hidden (and the Hotspot itself displayed again) by tapping the Selected Hotspot. Alternatively, a Hotspot Close button can be created to better indicate this func-tionality to the user.

The creation process is as follows (see also the figures on the following page):

Step 1. Create the Hotspot and Hotspot Content as described in section 5.6.4 Creation.

Step 2. (Optional) Create the Selected Hotspot as described in section 5.6.5 Creating a Selected Hotspot.

Step 3. On the Hotspot Content layer, cre-ate the object that should act as the Hotspot Close button. (When this contains multiple frames, make sure to group them).

Step 4. With the frame or group of frames selected, select the Enable Close Button check box in the Hotspot panel.

In case the Hotspot Close button func-tionality should be removed from the page

item(s), select the item and choose None in the Hotspot panel.

5.6.7 Managing Hotspots using the Layers Panel

The functionality of the Hotspot panel is close related to that of InDesign’s Layers panel. Using the Layers panel, Hotspots can be managed in the following ways:

�Renaming layers. Layers created using the Hotspot panel can only be renamed by using the Layers panel.

�Moving layout items between layers. When doing so, all restrictions for working with Hotspots on Hotspots apply. When an action is not allowed, a message will inform the user about this.


58

Figure 5.6.6. When using a Selected Hotspot, it can be beneficial to offer the user a separate close button to close all the Hotspot content with. In this example, a close button has been placed in the lower right-hand corner of the page. Its functionality is enabled by selecting the item on the layout and subsequently choosing the ‘Enable Close Button’ option in the Hotspot panel.

Note that when not using a Close button, the Hotspot content and the Selected Hotspot can be closed by tapping the Hotspot or Selected Hotspot; when the Close button is available, the Hotspot Content and the Selected Hotspot can only be closed by tapping the Close button.


59


B When the Hotspot is tapped, a Selected Hotspot (the blue layout item) appears over the original Hotspot and additional information is displayed in a sidebar. In addition, a close button is shown in the bot-tom right-hand corner of the page

The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer.


Selected Hotspot

Hotspot

Hotspot Selected Hotspot

Hotspot Content

Hotspot Content

Hotspot Close button



145


B When the Hotspot is tapped, a Selected Hotspot (the blue layout item) appears over the original Hotspot and additional information is displayed in a sidebar. In addition, a close button is shown in the bot-tom right-hand corner of the page

The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer.


Selected Hotspot

Hotspot

Hotspot Selected Hotspot

Hotspot Content

Hotspot Content




60

5.7 Hotspots on Hotspots

The Hotspot Content layer can itself also contain one or more Hotspots, allowing the user to access

additional information relating to what is shown in the original Hotspot. This is referred to as a Hotspot on a Hotspot.

Creating a Hotspot on a Hotspot is essentially the same as creating a basic Hotspot (see section 5.6 Basic Hotspots). The only difference is that all actions are completed in relation to an existing Hotspot of which the new Hotspot is part.

5.7.1 Terms and Components

When working with Hotspots on Hotspots, the following terms and components are used:

�Hotspot: an area on the page on which the user can tap, after which additional content is displayed on top of the page.

�Hotspot content: the content which is dis-played after the Hotspot is tapped.

�Hotspot Content layer: the layer assigned to the Hotspot; it contains the content for that Hotspot. A Hotspot Content layer can act as either a Level-1 Hotspot Content layer or a Level-2 Hotspot Content layer (see below).

�Unassigned layer: a layer which is not assigned to a Hotspot and therefore does not hold any Hotspot content.

�Base layer: a layer which itself is not assigned to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the top-most layer.

�Level-1 Hotspot Content layer: the layer which holds the content for the Hotspot placed on the Base layer. It also acts as the layer on which other Hotspots are placed.

�Level-2 Hotspot Content layer: the layer which holds the content for the Hotspot placed on the Level-1 Hotspot Content layer.

�Selected Hotspot: a page element on the Hotspot Content layer which will appear in place of the Hotspot which is tapped. It is used to mimic the behavior of “selecting” a Hotspot.

�Hotspot Close button: a page element on the Hotspot Content layer which acts as


61

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.

In the figure below for example, a Hotspot panel is shown for a layout on which three Hotspots have been created. A basic Hotspot has been created on the ‘Background’ layer; its Hotspot Content items are placed on the ‘Scheveningen’ layer. On this layer, two additional Hotspots have been created. Their content is placed on the layers ‘Scheveningen Beach’ and ‘Scheveningen Harbor’ respectively.

In this scenario, the layers can be matched to the Hotspot-on-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.7.1. The Hotspot panel displays the hierarchy of the created Hotspots and Hotspots-on-Hotspots (see the text for a detailed explanation of this structure)

RestrictionsA Hotspot on a Hotspot can only be created one level deep; creating a Hotspot in a Hotspot which itself is already part of a Hotspot is not possible.


62

5.7.2 Creation

To create a Hotspot on a Hotspot, perform the following steps (see also the figures on the following pages):

Step 1. Create a regular Hotspot as explained in section 5.6, Creating a Basic Hotspot.

This Hotspot is placed on the Base layer; its content resides on the Hotspot Content layer.

A new Hotspot-on-Hotspot item now needs to be created for the user to tap on.

Step 2. On the Hotspot Content layer, cre-ate a new layout item which is to serve as the new Hotspot.

Following the definitions of the Hotspot-on-Hotspot terms, the Hotspot Content Layer is now referred to as a Level-1 Hotspot Content Layer.

Step 3. Select the newly created Hotspot.

Step 4. In the Hotspot panel, select Enable Hotspot.

Step 5. (Optional) To make the content for that Hotspot appear automatically whenever the page is loaded (as opposed to the user hav-ing to top on the Hotspot to make the content appear), do the following:

�In the Hotspot panel, select the Show Automatically check box.

Only one Hotspot Content layer can be set to automatically appear for

each page. When setting this option for Hotspot A while it is already set for Hotspot B, the functionality is removed from Hotspot B and set to Hotspot A.

Now that the Hotspot is defined, 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). 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, else the panel options will not be available.)

Step 6. To create the Hotspot content on a new layer, perform the following steps:

Step 6a. In the Hotspot panel, click Create New Layer (selected by default).


Step 6c. Do one of the following:

�Press Enter.

�Click OK.


�A new layer is created in the Layers panel.

�The created layer is displayed in the Hotspot panel and placed one level below the Hotspot Parent layer.

Step 6d. (Optional) Repeat Steps 6, 6, 8a – 8c to create additional Hotspot Content layers.



63

Hotspot content on an existing layer(Make sure that the newly created Hotspot is selected, else the panel options will not be available.)

Step 7. To create the Hotspot content on an existing layer, perform the following steps:

Step 7a. In the Hotspot panel, click Use Existing Layer.


�Only one layer exists

�The layer acts as a Level-2 Hotspot Content layer for an already created Hotspot on a Hotspot.

Step 7b. In the list of Existing Layers, select the checkbox for the layer to which the Hotspot Content needs to be added.

The following action takes place:

�The selected layer is positioned one level below the Level-1 Hotspot Content layer.

Hotspot content can be assigned to one layer only, not to multiple

layers.

Step 7c. Continue with Step 8 or 9.

With the Hotspot Content layer defined, we can now start creating content on it.

Step 8. Select the newly created Hotspot for which content should be created.

Step 9. In the Hotspot panel, click Edit Layer.


�The Hotspot Content layer corresponding to the selected Hotspot is made active.

�The content of all existing Hotspot 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. Create the content which should be displayed when a user taps a Hotspot.

Make sure to not accidentally make a dif-ferent layer in the Layers panel active, this

will result in the content ending up in the wrong location within the hierarchy and will give unex-pected results when the Hotspot is tapped on the device.

Step 11. Repeat steps 8 – 10 for any addition-ally created Hotspots.


64

Figure 5.7.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, a new item is created (the blue button on top of the image in the sidebar), which is to act as the new Hotspot.


65

Figure 5.7.1b. 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. A new layer has been created (‘Scheveningen Beach’) by using the ‘Create New Layer’ feature of the Hotspot panel. After clicking OK, the new layer has appeared in the Layers panel as well as in the Hotspot panel.

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, it is placed one level below that layer.


66

Figure 5.7.1c. With the newly created layer (‘Scheveningen’) made active in the Layers panel, the Hotspot content has now been created in the form of an extra sidebar overlaying the top part of the original sidebar.

In this basic use of a Hotspot on a Hotspot, tapping Hotspot ‘Beach’ will display the additional information in the top part of the sidebar. Tapping the Hotspot again will close the displayed Hotspot content.


67

A Starting point on the tablet: after tapping a Hotspot (not shown here), a Selected Hotspot has appeared together with the Hotspot Content in the form of a sidebar. On this side-bar, an additional Hotspot has been placed.

B After tapping the Hotspot on a Hotspot, the Hotspot Content for that Hotspot appears.

The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer, referred to as the Level-1 Hotspot Content layer.

The Hotspot is created on a Base layer

Hotspot

Selected Hotspot

Hotspot on Hotspot Content

The Hotspot on a Hotspot Content is placed on a separate layer, referred to as the Level-2 Hotspot Content layer.

Hotspot on Hotspot

Hotspot Content

The Hotspot on a Hotspot item is placed on the Level-1 Hotspot Content layer


153

A Starting point on the tablet: after tapping a Hotspot (not shown here), a Selected Hotspot has appeared together with the Hotspot Content in the form of a sidebar. On this side-bar, an additional Hotspot has been placed.

B After tapping the Hotspot on a Hotspot, the Hotspot Content for that Hotspot appears.

The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer, referred to as the Level-1 Hotspot layer.

The Hotspot is created on a Base layer

Hotspot

Selected Hotspot

Hotspot on Hotspot Content

The Hotspot on a Hotspot Content is placed on a separate layer, referred to as the Level-2 Hotspot layer.

Hotspot on Hotspot

Hotspot Content

The Hotspot on a Hotspot item is placed on the Level-1 Hotspot layer


68

5.7.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. (For more information, see section 5.6.5 Creating a Selected Hotspot.) The only difference is the level on which to work.

The creation process is as follows:

Step 1. Create the Hotspot-on-Hotspot and Hotspot-on-Hotspot Content as described in section 5.7.2 Creation.

Step 2. Do the following:

Step 2a. On the Hotspot-on-Hotspot Content layer, create the object that should act as the Selected Hotspot. (When this contains multiple frames, make sure to group them).

Step 2b. With the frame or group of frames selected, select the Enable Selected Hotspot check box in the Hotspot panel.

In case the Selected Hotspot functionality should be removed from the page item,

select the item(s) and choose None in the Hotspot panel.

5.7.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. (For more information, section 5.6.6 Creating a Hotspot Close Button). The only difference is that an additional option becomes available through which all opened Hotspots can be closed.

The creation process is as follows:

Step 1. Create the Hotspot-on-Hotspot and Hotspot-on-Hotspot Content as described in section 5.7.2 Creation.

Step 2. (Optional) Create the Selected Hotspot as described in section 5.7.3 Creating a Selected Hotspot.

Step 3. On the Hotspot-on-Hotspot Content layer, create the object that should act as the Hotspot Close button. (When this contains multiple frames, make sure to group them).

Step 4. With the frame or group of frames selected, select the Enable Close Button check box in the Hotspot panel.

Step 5. (Optional) To have the button close the content for both the Hotspot and the Hotspot-on-Hotspot, select the check box Close All.

In case the Hotspot Close button func-tionality should be removed from the page

item(s), select the item and choose None in the Hotspot panel.


69

5.7.5 Managing Hotspots using the Layers Panel

The functionality of the Hotspot panel is close related to that of InDesign’s Layers panel. Using the Layers panel, Hotspots can be managed in the following ways:

�Renaming layers. Layers created using the Hotspot panel can only be renamed by using the Layers panel.

�Moving layout items between layers. When doing so, all restrictions for working with Hotspots on Hotspots apply. When an action is not allowed, a message will inform the user about this.

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. Below follows a summary of all its features:

Enable HotspotUsed for assigning a layout item as a Hotspot.

Create New LayerUsed for creating a dedicated layer on which the Hotspot Content is placed.

Use Existing LayerUsed for assigning an existing layer on which to place the Hotspot Content. Note that the option is not available when the following conditions are met:

�Only one layers exists.

�The layer acts as a Level-2 Hotspot Content layer for an already created Hotspot on a Hotspot.

Layers listThe layers list displays all layers available in the layout with the exception of the Digital Magazine Artboard layer. In addition, it also displays the hierarchy of the layers used in the creation of Hotspots and Hotspots-on-Hotspots.

Collapse AllCollapses all expanded items in the Layers list.

Expand AllExpands all collapsed items in the Layers list.

Edit LayerUsed for efficiently working on new content on a particu-lar Hotspot Content layer. 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, the following actions take place:


70

�The Hotspot Content layer corresponding to the selected Hotspot is made active.

�The content of all existing Hotspot Content layers apart from the current Hotspot Content layer is hidden.

�When using this feature for a Hotspot on a Hotspot, the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed.

Enable Selected Hotspot Used for creating a layout item which acts as a replace-ment for the tapped Hotspot. One use example is to create an identical item (as far as size, shape and position is concerned) but only change some of its visual proper-ties. This will have the effect of the item changing its visual appearance, similar to ‘selecting’ the tapped item.

Enable Close buttonUsed for creating a dedicated button to close the Hotspot with.

NoneUsed for de-assigning any assigned Selected Hotspot or Hotspot Close Button functionality from a frame. 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 AutomaticallySelect this checkbox when the Hotspot Content needs to be displayed as soon as the page on which the Hotspot is located is loaded.

When enabling this feature for a Hotspot on a Hotspot, the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed.

Close All(Only available for a Hotspot-on-Hotspot and only when the option Enable Close Button is enabled). When set, the button is used for closing the opened basic Hotspot as well as the Hotspot-on-Hotspot.

Editing layer namesCompared to the previous version of the Hotspot panel, editing layer names can only be done by using the Layers panel, not anymore by using the Hotspot panel.


71

5.9 Creating a Widget

A frame can be turned into a Widget by making use of the Widget panel. Through this panel, the content and/or behavior of the Widget can be configured by selecting from various available settings.

A Widget is a bundle of specific files. It is assumed in this section that Widgets are already available and

uploaded to Enterprise. For information about creating a Widget bundle, see appendix D, Working With Widgets.

To create a Widget, perform the following steps:

Step 1. Open the layout on which the Widget should be added.

Step 2. Make sure that the Widget panel is displayed.

The Widget panel can be shown or hidden by choosing Widget from the Digital


Step 3. Select or create a frame on the layout that should contain the Widget.



The selected frame may not be located on a Master page.

Step 4. In the Widget panel, select the check box Enable Widget.


�Another frame is already set to act as a Widget. Clear the Enable Widget check box for that frame.

�The selected frame is already set to con-tain a video, audio file, Web Element, or Slide Show, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.

The Widget list is enabled, showing all Widgets available in the same Dossier in which the layout is saved to.

Figure 5.7. After choosing an available Widget from the list in the Widget panel, the Widget can be configured through specific settings


72

If the required Widget is not found in the list, locate it in Enterprise and check

whether the Widget has been assigned to the correct Dossier.

Step 5. From the Widget list, choose the Widget which needs to be added.

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. Depending on how the Widget is set up (see appendix D, Working With Widgets), various settings may be available such as check boxes, lists, text boxes, etc.

Step 6. (Optional) Configure the Widget as required.

5.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. To scroll through the content, the user can scroll either horizontally or vertically.

ComponentsA scrollable area consists of the following components:

�The Scrollable Area frame. The frame on the page which holds the scrollable content.

�The scrollable content. The content which the user can scroll through.

�Scrollable Area Content layer. The layer containing the layout items for the Scrollable Area content.

LayersThe Scrollable Area functionality makes use of layers. The Scrollable Area frame itself is created on any of the layers of the regular layout. Using the Scrollable Area panel, the Scrollable Content can be added to either a dedicated layer or to an existing layer.

Size and contentIn essence, the Scrollable Area content can be set to any size, up to the width or height of the page that it is on. Since the Scrollable Area content is nothing more than an extra layer within the InDesign layout, it can contain any type of content, including a Slide Show, video, audio, a Web Element, Hotspot, Widget, or Dossier Link. However, it cannot contain another Scrollable Area; 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, but it is not possible to add another Scrollable Area in that Hotspot).

To create a Scrollable Area, perform the following steps:

Step 1. Design the layout on which the Scrollable Area is to be placed.


73

Step 2. Create an item on the layout which should act as the Scrollable Area.

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.


It is possible to have multiple Scrollable Areas in a layout.



Step 3. Make sure that the Scrollable Area panel is displayed.

The Scrollable Area panel can be shown or hidden by choosing Scrollable Area

from the Digital Magazine submenu of the Window menu.

Step 4. (Optional) Make sure that the Layers panel is displayed.

Since the Scrollable Area 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.

Step 5. Select the frame or group of frames on the layout that should act as the Scrollable Area.

This frame or group of frames may not be located on a Master page.

Step 6. In the Scrollable Area panel, select the check box Enable Scrollable Area.


�The selected frame is already set to con-tain a Slide Show, video, audio file, Web Element, or Widget, or is set to act as a Dossier Link or Hotspot. Clear the Enable check box in the respective panel.

Now that the Scrollable Area is defined, we need to specify where the Scrollable Content is going to be located. 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, else the panel options will not be available.)

Step 7. To create the Scrollable Content on a new layer, perform the following steps:

Step 7a. Cl ick Create New Layer (selected by default).


Step 7c. Click OK.

A new layer is created in the Layers panel.

Step 7d. (Optional) Repeat Steps 4, 5, 6, 7a – 7c to create additional Scrollable Area Content layers.


74


Scrollable content on an existing layer(Make sure that Steps 4 and 5 have been performed, else the panel options will not be available.)

Step 8. To create the Scrollable Content on an existing layer, perform the following steps:

Step 8a. Click Use Existing Layer.


�Only one layers exists

�Multiple layers exist but these act as a DM Artboard.

Step 8b. In the list of Existing Layers, select the layer to which the Scrollable Content needs to be added.

Step 8c. (Optional) In the list of Existing Layers, click the layer name to rename the layer.

Step 8d. Continue with Step 9.

Step 9. Click Edit Layer.


�The Scrollable Area Content layer is made active

�The content of all existing Scrollable 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)

Step 10. Create the content through which the user should be able to scroll.

No background is needed; the content will be displayed on top of the Scrollable Area

frame.

Make sure to not accidentally select a dif-ferent layer in the Layers panel, else you

might see unexpected results.


75

5.11 Creating a Custom Object

Custom Objects are not available for the Android Reader App.

The creation of a Custom Object starts by creating a Web Element; this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout.

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, and therefore requires manual steps to be performed after the magazine has been exported.

To create a Custom Object, perform the following steps:

Step 1. Follow the steps as outlined in section 5.4 Creating a Web Element.

Do not specify a URL in Step 5, the aim is to create a place holder in the exported

magazine which can be easily found and sub-sequently modified.

Step 2. Export the magazine and modify the exported package as outlined in chapter 7, Customizing the iPad Reader App – section 9.6 Custom Objects.

5.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, how to use Slide Shows, videos, Scrollable Areas, etc.).

This can for instance be done in the form of graph-ics in a single-page document.

In order for your reader to easily access this page, it can be linked to a Help button in the Navigation bar by doing the following:

Step 1. Create a Dossier containing a page in horizontal and vertical orientation as explained in the previous sections.

Step 2. Design the layout as required.

Step 3. In the Dossier properties in which the layouts are stored, set the Intent to Help.

With this property set, a Help button will be added to the Navigation bar of the Reader App, to which the created pages are linked; when the user taps the button, the Help page will auto-matically appear.


76

5.13 Creating Shared Content

The Shared Content feature is not available for the Android Reader App.

External content can be shared with others directly from within the Reader App in the form of a Hyperlink. This Hyperlink can be sent out by e-mail or by using social service networks such as Twitter and Facebook.

This Hyperlink is a regular URL and can point to any type of content on the Web, such as an online version of the story.

For each created story, one Hyperlink can be created for sharing with others. Creating a Hyperlink is part of the Content Station functionality and is done as follows:

Step 1. Create a Hyperlink by performing the following steps:

Step 1a. In the Dossier which needs to be set up for Content Sharing, choose New Hyperlink from the Create New button above the Publication Channels pane.

The Create Hyperlink dialog box appears.

Step 1b. In the URL box, enter the URL to the external source.

The Reader App will automatically insert a shortened version of the URL

for Twitter messages, there is no need to first run the URL through a URL shorten service yourself.

Step 1c. Click OK.

The Upload dialog box appears.

Step 1d. From the Intent list, choose Shared Article.

Step 1e. Click OK to close the dialog box and save the Hyperlink.

Step 1f. 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.

Step 2. (Optional, only for Facebook and e-mail) In the Dossier properties window for the story, enter a Story title. This is used as follows:

�Facebook: as the clickable text in the created post.

�E-mail: as the subject of the e-mail.


77

6. Summary

In this chapter you have learned all about creating con-tent for a digital magazine using InDesign. You have seen how each component of a story is created, including the Dossier, the layouts in their various orientations and the actual content on the layout.

Next step �Exporting content: continue to chapter 6,

Exporting Content. It will teach you how to pre-pare and export created content using Content Station.

80

06

80

The process of preparing files for export and that of subsequently exporting the content of the maga-zine takes place in Content Station.

Using the Dossier functionality together with the Digital Magazine application, the following tasks can be performed:

�Defining which files should be included in the 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 see how the content is exported.

1. The Digital Magazine Application

When managing a Digital Magazine in Content Station, the majority of the time is spent in the Digital Magazine app.

This application offers the following functionality:

�It shows an overview of the stories which have been assigned to the magazine issue, and in which order they appear

�It provides quick access to the Dossier of a story

�It contains tools for exporting the magazine

For an overview of the main interface of the Digital Magazine app, see figure 1 on the next page.)

To access this application, 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.

�Right-click the Digital Magazine applica-tion on the Home page and choose Open in New Window to open the application in a new window.

Exporting Content

Chapter 06 Exporting Content

81

The Digital Magazine page consists of the following components:

�Search pane. For choosing the Brand/Issue combination of which content should be dis-played in the Story pane.

�Device toolbar. For choosing the device of which content should be displayed in the Story pane.

�Story pane. Shows all Stories that have been assigned to the Brand/Issue combination as set in the Search pane.

�Page preview panes. Shows all layouts and their pages for the story selected in the Story pane.

�Export toolbar. Contains buttons for export-ing the magazine.

The usage of each pane is explained in more detail on the following pages.

Figure 1. The components of the Digital Magazine application in Content Station

C

AB

D

E

F

A Search pane B Device toolbar C Story pane D Export toolbar E Page preview pane (landscape pages) F Page preview pane (portrait pages)


82

1.1 The Search Pane

When first opening the Digital Magazine application, only the Search pane and Export toolbar are shown. The other areas are initially empty and are loaded as soon as a search has been performed using the components of the Search pane. To do this, perform the following steps:

Step 1. (Optional) From the Brands list, choose the Brand of which the magazine is part.

Step 2. (Optional) From the Issue list, choose the Issue of which the magazine is part.

Only the Issues with the Publication Channel of type Digital Magazine appear

in the list.

Step 3. Click Search.


�The buttons of the Device Toolbar appear. (See section 1.2 The Device Toolbar.)

�All stories that have been assigned to the chosen Brand/Issue combination appear in the Story pane.

1.2 The Device Toolbar

The Device toolbar contains buttons for one or more defined devices to output to.

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.php. For example, mul-tiple devices can be set up on the Server, but if only one Edition has been defined for the chosen Issue, only one button will appear.

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.)

Note that at all times, all stories assigned to the Issue are displayed in the Story pane. When a Story

has not been assigned to be part of the selected device, the preview will change to a default icon (see section 1.3 The Story Pane). 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 sto-ries for each device in separate steps.


83

1.3 The Story Pane

After locating the available stories of a digital magazine using the Search pane (see section 1.1 The Search Pane), and choosing the Device for which the content is intended in the Device toolbar (see section 1.2 The Device Toolbar), the Story pane is populated with the available stories for that magazine1.

Each story is represented by a preview and some addi-tional information:

�Preview. One of several types of previews can appear:

�A preview of the first page of the first layout in the Dossier. The first lay-out in landscape orientation is used, when available.

�A default preview. An empty preview (in the form of a light gray page) is shown under the following conditions:

�When the Dossier does not contain any layouts.

�When no layouts have been assigned to the correct Publication Channel.

�When the layout does not contain any page items for the selected device in the Device toolbar.

The preview is actually a Dossier: when double-clicking it, the Dossier for that

story opens; when right-clicking it, the access menu of the story’s Dossier appears.

�Status icon. The Dossier status icon.

1 A story appears in the Story pane as soon as it has been assigned to the required Publication Channel for the magazine.

�Order number. (Assigned automati-cally) Indicates the position of the story in the magazine.

�Title. The Dossier name.

Figure 1.3. The components of a story in the Story pane

C D

A

A Preview of a page B Order numberC Dossier status icon D Dossier name

B

The area of the Story pane can be adjusted by drag-ging the gripper area (the dividing bar between the

Story pane and the Pages Preview panes) to the left or right. (For more information about resizing the interface, see the Content Station User Guide, chapter 3, The Interface.)


84

1.4 The Page Preview panes

When selecting a story in the Story pane (see section 1.3 The Story Pane), the pages of the assigned layouts appear in the Page Preview panes. This will give you a quick indication of the content of a story.

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 land-scape orientation only (top pane), and one showing pages in portrait orientation only (the bottom pane). Above each pane, the layout name is displayed.

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. (For more information about resizing the interface, see the Content Station User Guide, chapter 3, The Interface.)

2. Preparing Content for Export

Before exporting an Issue as a Digital Magazine, it is wise to verify that all required settings are correctly set and all required components are available. Not only will this ensure an error free export, but it will also result in the Reader components working as expected.

From within Content Station, the following items are rel-evant 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.


85

2.1 Magazine Content

The stories that are displayed in the Story pane are those stories that will be exported when clicking the Export button.

Make sure that no stories are missing from the magazine and that no stories are displayed which should not be part of the magazine.

The following tasks can be performed to achieve this:

�Adding a story �Verifying the story’s content �Removing a story


2.1.1 Adding a Story

To add a story to a Digital Magazine, perform the follow-ing steps:

Step 1. Assign a Dossier to the Brand/Issue combination of the magazine.

This in itself is enough to add the story to the Digital Magazine. However, it will display in the Story pane with a default preview, and no pages will of course display in the Page Preview panes.

To assign the correct content, see section 2.1.2 Verifying the Story’s Content.

Step 2. Click the Search button in the Digital Magazine application to refresh the page.


86

2.1.2 Verifying the Story’s Content

For each story that is displayed in the Story pane, verify that the right components are present and (optionally) assigned to the Publication Channel of the correct maga-zine. Do this by performing the following steps:

Step 1. 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 assigned to the Publication Channel of the magazine. These will typically be the lay-outs in landscape and portrait orientation.

�Make sure that the correct pages in their correct orientations are assigned (corre-sponding with the way the Reader App has been configured).

�When making use of specific functionality, make sure that their related content is part of the Dossier:

�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 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, ensure of the following:

�That a dedicated article is present and assigned to the magazine’s Publication Channel .

�Any layouts in portrait orientation should not be assigned to the maga-zine’s Publication Channel.

�An image that is used as a header image should be assigned to the Publication Channel and have the Intent set to Header.

�Any images that should be displayed at the bottom of the page should be assigned to the magazine’s Publication Channel. (With the exception of images that are part of a Slide Show; these are automatically displayed at the bottom of the page.)

Step 2. 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 config-ured: both landscape and portrait orientation, or landscape or portrait orientation only.)


87

2.1.3 Removing a Story

To remove a story, perform the following steps:

Step 1. De-assign the Brand/Issue combina-tion of the magazine from the Dossier.

Step 2. Click the Search button in the Digital Magazine application to refresh the page.

2.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 pre-sented in the exported magazine.

The initial sorting order of the displayed stories is based on the creation date (newest first).

The stories can be rearranged by performing the follow-ing steps:

Step 1. Select one or more stories in the Story pane.

When a story is selected, selecting other or additional stories can also be done by

using the up/down or left/right keys on the key-board (also in combination with keeping the Shift key pressed). To deselect a selected story, click the story while keeping the Cmd/Ctrl key pressed.

Step 2. Drag-and-drop the selected stories to their required position within the magazine.

Figure 2.2. Stories can be repositioned within the magazine


88

2.3 Dossier Properties

The Digital Magazines functionality uses various Dossier properties for controlling specific features in the Reader App on the digital device. For each story in the magazine, verify that the following Dossier properties have been cor-rectly set:

To quickly access the Dossier of a story, double-click the story in the Story pane.

� 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, allowing the user to preview a complete dynamic story as opposed to a single-page static image.

�Intent. When the Dossier holds the layouts containing the table of contents, choose TOC from the Intent list so that the table of contents is linked to the TOC button in the Reader App. (When the user taps the button, he or she will be directly navigated to the table of contents.)

�Story title: used for displaying the name of the story in the Page viewer of the Reader’s Section Viewer.

�Section title: used for displaying the name of the section to which the story belongs in the Section viewer of the Reader App.

�Description: used for displaying additional information for the story in the Story / Page Viewer of the Reader App.

Keep both the Story title and Description short; if it exceeds the width of the page

preview in the Reader, ellipses are shown for the part which cannot be displayed.

2.4 Image Properties

Text View Mode propertiesWhen a story is displayed in Text View mode, an image can be set to act as the header image. This image will be displayed before the content of the article.

For each story that makes use of this feature, verify the following:

�Access the Dossier of the story and ensure that it contains an image with the exact dimen-sions (width and height) in which it is going to be displayed on the digital device.

To quickly access the Dossier of a story, double-click the story in the Story pane.

�In the Properties dialog box of the image, ensure that the Intent property is set to Header.

Cover and preview propertiesDuring the upload process of a digital magazine, images can be automatically extracted by a Content

Delivery Platform for use as the cover or preview image in a Store. This process replaces the need to upload these images separately. To achieve this, prepare the content as follows:

Step 1. Add any images to act as the cover or preview to the Dossier.

Step 2. Access the Dossier properties.

Step 3. Set the intent property of the images to cover or preview respectively.

Images assigned this way are only picked up from the first Dossier of the issue, as defined by the order

in the Digital Magazine application.


89

2.5 Content Sharing

In the Reader App, users can forward a Hyperlink by sharing this via e-mail, Facebook or Twitter. The URL of the Hyperlink can be to any type of content such as an online version of the magazine article, external sources with background information, online stores, etc.

For this functionality to work, a Hyperlink object needs to be included in the Dossier of the story and assigned to be included in the export.

To set this up correctly, perform the following steps:

Step 1. In the Dossier for the article which Content Sharing needs to enabled, choose New Hyperlink from the Create New button above the Publication Channels pane.

The Create Hyperlink dialog box appears.

Step 2. In the URL box, enter the URL to the external source.

Shortening the URL is not necessary; when the URL is going to be used in a

Twitter message, the system will automatically insert a shortened version.

Step 3. From the Intent list, choose shared article.

Step 4. Click OK to close the dialog box.

Step 5. 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.

2.6 Sharing ofip Properties

The Issue Maintenance page of a Digital Magazine Issue is used for setting various ofip properties. (For

more information, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration – Step 11. Configuring Issue Maintenance.)

In case any properties are not entered on that page, the missing properties can be extracted from an ofip file which does have these properties set. A typical example of this is to share ofip properties between files belonging to different Brands or Enterprise systems.

In the following scenario, an ofip file is created from Enterprise system A and used for populating ofip prop-erties in a file stored in Enterprise system B:

Step 1. Using Content Station, log in to Enterprise system A.

Step 2. Export a Digital Magazine issue ‘X’.

Step 3. Download the ofip file for this issue ‘X’.

Step 4. Log out of Enterprise system A and log in to Enterprise system B.

Step 5. 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.

Step 6. Export the Digital Magazine issue ‘Y’.

During this export, the ofip properties that are available in issue ‘X’ but not in issue ‘Y’ are added to issue ‘Y’. (No existing values are overwritten.)


90

3. Exporting Content

When the content of the magazine has been verified and found complete and correctly set (see section 2. Preparing Content for Export) it is ready to be exported.

The exporting process will create the necessary con-tent files for inclusion in a Reader App, or for upload to a delivery server. To export a digital magazine, perform the following steps:

Step 1. Access the Digital Magazine page and use the Search pane to display the magazine in the Story pane which should be exported.

The Export button becomes available.

Step 2. Click the Export button.

(Optional, only when the server is set up for mul-tiple device support.) The Export Options dialog box appears, showing all devices to which can be exported to.

Step 2a. (Optional) Select one or more devices to export to.

Step 2b. (Optional) Click OK.

The export commences and its progress can be followed by a progress bar next to the Export button.

Step 3. (Optional) To stop the export at any time, click the Abort Export button.

When the export is completed, the Export Report dialog box appears, showing the result of the export. (See figure 3 on the next page.)

Step 4. If any issues have occurred, verify and correct them. Then, export the content once more.

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). In case a mismatch has been found (for instance: the Issue is set up to include Text View, but no landscape in portrait orientation or an article has been assigned for export), an error or warning is shown together with steps to rectify the problem. (See figure 3 on the next page.)

Step 5. (Optional) Initially, the content is exported to the server. To download the con-tent to the local system, do one of the following:

�To download an exported magazine to a specific folder, click Browse.

�To download an exported magazine indi-vidually, click the Download button for the respective device.

WARNING: the content of this folder will be erased during the download

process.

The download process can be followed by a progress bar.

The folder to which the content is downloaded to is defined in WWSettings.xml. (For details about setting these paths, see the Admin Guide, chapter 40, Digital Magazine Configuration.)

To cancel the download(s), click Cancel.

Step 6. (Optional) Modify the exported maga-zine.xml file to include the following functionality:

� Include Custom Objects. (iPad Reader App only) For more information, see chap-ter 7, Customizing the iPad Reader App – section 9.6 Custom Objects.


91

�Hide embedded audio controls. For more information, see chapter 7, Customizing the iPad Reader App – 9.2.2 Embedded Audio Controls.

�Add an audio title and description for display in the Audio Control panel. (iPad Reader App only) For more informa-tion, see chapter 7, Customizing the iPad Reader App – 9.2.3 Audio Control Pop-Up.

�Hide embedded video controls. For more information, see chapter 7, customiz-ing the Reader App – section 9.19.2, Hiding Embedded Video Controls.

�Hide a video after it has stopped playing. (iPad Reader App only) For more information, see chapter 7, Customizing the iPad Reader App – section 9.19 Remove Video After Play.)

�Create HTML Dossier Links. (Android Reader App versions 1.0 and 1.1 only) For more information, see chapter 5, Creating Content – section 5.5.2.In a Web Element.

Figure 3. When the export encounters incorrectly assigned content, an error is shown and steps to rectify the problem are provided


92

3.1 Exporting and Page Scaling

When the “Fit mode” DMSetting option is used (see appendix E, The DMSettings.plist File – section 3.10 Metrics), take note of the following:

�When using DM Server plug-in version 7.0.11 or higher for exporting the content, the dimensions of the issue will be read from the magazine.xml file. The page fitting feature will work as specified.

�When using a DM Server plug-in of a ver-sion older than 7.0.11, the dimensions of the issue have to be determined by looking at the dimensions of the actual page files. Page fitting will only work if the first page exists in both verti-cal and horizontal orientation and both are not long pages. In all other cases, the pages will be made to fit the width of the device.

4. Summary

In this chapter, 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.

Next stepsThe 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.

93

07

93iP

ad

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)

�Enabling those features that you want your users to use

�Localizing the Reader App into a particular language

In this chapter you will learn all about customizing the iPad Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The following main customization areas are defined:

�General App settings

�Navigation

�The Store

�The Library

�General App features

Customizing the iPad Reader App

Chapter 07 Customizing the iPad Reader App

94iP

ad

1. Required Tools

In order to perform the steps as outlined in this chapter, the following tools are required:

�Xcode and the iPad Simulator. (both come as part of the Xcode and iPhone SDK, available from the iOS Dev Center: http://developer.apple.com/devcenter/ios/index.action). It is assumed here that both are correctly installed and that you are proficient in using these applications.

Xcode version 4.0 is required for working with the iPad Reader App v2.x project.

Use of previous versions:

�Version 1.6 support: SDK version 4.2 is not compatible with the iPad Reader App version 1.6. If this compatibility is still required, install any higher version of Xcode in a folder separate from the one in which version 1.6 is installed.

�Version 1.7 – 1.9 support: versions 1.7 to 1.9 require Xcode version 3.2.5; if this version is still required, have it installed in a separate folder.

�Image editor. For editing images in .png or .ai/.pdf format. Use your favorite editor for this task.

2. Loading a Project

The Reader App is supplied as an Xcode project. To load the project, perform the following steps:

Step 1. Unzip the provided DigiMag file:

�DigiMag�iPad�v2.x�bxxx�Basic�Standard.zip �DigiMag�iPad�v2.x�bxxx�Pro�Framework.zip �DigiMag�iPad�v2.x�bxxx�Subscriptions.zip �DigiMag�iPad�v2x�bxxx�AppleSubscriptions.zip

Step 2. Open the Xcode project, located in the [folder name]_Template folder.

Customizing the Reader App is mostly done by making changes to the following areas of the project:

�_Template/Classes/DigiMagKioskSettings.h file. (Reader App versions with Store functionality only) Settings related to connecting to the Store.

�_Template/Classes/Resources folder. For adding additional resources such as Subscription Offer pages, custom objects, etc.

�_Template/Classes/Resources/Settings.bundle file. Controls the Share Content func-tionality and contains version information.

�_Template/Classes/Resources/Localizable.strings file. For localizing the text as displayed in the Reader App.

�_Template/Classes/Resources/images folder. For customizing images used for logos, backgrounds, icons, etc.

�_Template/Classes/Resources/DMSettings.plist file. For customizing the Reader App functionality, as well as colors and fonts.

http://developer.apple.com/devcenter/ios/index.action

http://developer.apple.com/devcenter/ios/index.action


95iP

ad

3. 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. Interface components such as but-tons, icons, logos and headers.

�Colors. The color of text and backgrounds.

�Fonts. Specific fonts used in various places of the Reader App.

�Text. The text of specific titles as they appear in various places of the Reader App.

�Settings. The functionality of the Reader App.

Each is described in the sections on the following pages.

Additional functionality can be added to the Reader App by adding the following components:

�Custom Objects. Objects containing func-tionality of 3rd-party developers.

�APIs. Programming interfaces that add addi-tional functionality to the Reader App. Currently, the following APIs can be used:

�Analytics API for gathering information about how a user uses the Reader App

�Gesture API for receiving and controlling gestures

�Navigation API for navigating to various components of the magazine

3.1 Assets

Assets are user interface components such as buttons, icons and headers. Each of these assets are images and can be easily replaced by your own images.

All images are stored within the Xcode project in the Resources/images folder. Table 3.1 on the next page shows the types of assets available and the folder in which they are stored.

The Toolbar, Overlay, Store, and Text View 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.woodwing.net/products/Enterprise%207.0.x/Software.


�Renaming assets is not allowed since the 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, see appendix C, Image Dimensions.

http://community.woodwing.net/products/Enterprise%207.0.x/Software



96iP

ad

Table 3.1. Assets folder structureFolder Available assets Additional information

images

closeButtonDefaultState.png Image used as the default close button, used in various locations of the Reader App.

noInternetConnectionBackground.png Image shown when no internet connection is available on the iPad.

noInternetConnectionLabel.png The label shown when no internet connection is available on the iPad.

segments_shadow.png The shadow between the top and bottom part of the Segments Overview page.

segments_stack_background.png The icon for an issue on the Library page, indicating that the issue contains Segments.

transparentImageForFlipviewButton.png Image used for the selected status of a thumb-nail in the Flipview.

images/Bookmark Popup Assets relating to the Bookmark List

images/Audio Popup Assets for the Audio Control button in the top Toolbar and the Audio Control.

images/Share Popup Assets for the Content Sharing functionality.

images/TOC Popup Assets relating to the TOC List The TOC List appears when tapping the TOC button in the top toolbar.

images/Application General assets for the application itself. Including the app icon and splashscreens.

images/Flipview General assets for the Flipview area.The area that appears above the Navigation bar, showing the Story Viewer and Section Viewer.

images/Overlays Assets that overlay other objects. Including the Slide Show icon and Video icon.

images/Store Assets relating to the Store.Only available in the Pro, Framework, Subscriptions and Apple Subscriptions Editions of the Reader App.

images/Textview Assets for the Text View mode.Used for displaying the story as one continu-ous page in which the text can be made bigger or smaller.

images/Toolbar Assets that represent icons in the Navigation bar and top Toolbar.


97iP

ad

3.2 Colors

Colors for objects and text are controlled via the DMSettings.plist file, located in the Resources folder.

The following groups are defined:

�TOC colors. Colors used for the TOC List.

�Application toolbar colors. The color of the Navigation bar and top Toolbar.

�Flipview colors. Colors used for the Flipview.

�Store colors. Colors used for the Store (including Subscription functionality) and Library.

�Bookmark colors. Colors used for the Bookmarks functionality.

�Web Elements colors. Color settings related to using Web Elements.

�Page Sharing colors. Color settings related to the Content Sharing functionality.

Changing the color is done by changing the RGB values for a specific option in the DMSettings.plist file. Detailed information about each option is provided per feature in the remainder of this chapter.

Using custom color settings can sometimes give unexpected results (such as the gradient disap-

pearing). Be sure to verify the result in the Reader App (for more information about previewing customizations, see section 4. Previewing Customizations).

3.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

Detailed information about the areas for which fonts can be modified for these features is provided in the remainder of this chapter.

Custom fonts can also be used for the Text View mode, but these are controlled via configuration files

as part of Enterprise Server. For configuration steps, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration.

To define custom fonts by means of the Xcode project, perform the following steps:

Any defined custom fonts are distributed and included in the Reader App; make sure that you

have a proper license for each used font.

Step 1. Create a folder somewhere on your system named fonts (all lower case).

Step 2. Copy the fonts that are to be used as custom fonts to this folder.

All fonts used must be TrueType fonts.

Step 3. Open the Reader App project in Xcode.

Step 4. Verify that no fonts folder is present in the Resources folder. (If there is a folder pres-ent, remove it).


98iP

ad

Step 5. Drag the fonts folder created in Step 1 onto the Resources folder.

Step 6. In the dialog box that appears, perform the following steps:

Step 6a. Select the check box Copy items into destination group’s folder

Step 6b. Choose the option Create Folder References for any added folder

Step 6c. In the Targets list, select the check boxes for all targets.

Step 6d. Click Add.

The added folder should appear as a blue folder.

If the folder appears as a yellow folder, remove it and repeat the process again.

Step 7. Access the Fonts section of the DMSettings.plist file.

Step 8. For any of the TOC or Flipview options described above, set the custom font by doing the following:

Step 8a. Select the Custom check box.

Step 8b. In the Name value, enter the name of the font. (The name as it appears in the file name without the extension. For example: Vera.ttf would be entered as Vera.)

Step 8c. In the Size value, enter the size of the font.

Step 9. (Optional) It could be that a certain settings does not have the Custom property

defined. To define this property, perform the following steps:

Step 9a. Right-click the setting and choose Add Row from the context menu.

Step 9b. Replace the name New Item with Custom.

Step 9c. In the Type column, choose type Boolean.


99iP

ad

3.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 appears


3.4.1 Changing the Text

The text which appears in the Reader App originates from various sources, and can therefore be changed by differ-ent means (see figure below):

�Settings. The name of the Reader App itself is controlled by a setting in the Xcode project. (For more information, see section 5.1 Reader App Name.)

�Assets. Most assets in the Xcode project include icons only, but the following assets also include text:

�Buttons of the Navigation bar, Store and Library

�Labels which indicate that no internet connection is available

To change the text for these assets, modify the respective file. (For more information, see sec-tion 6.4.4 Assets.)

�Resources/Localizable.strings file. 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, mod-ify the content of the file as required.


100iP

ad

Figure 3.4.1. Text originates from various sources in the system

A Localizable string B Dossier property C Asset with text D Server property E HTML page F External source

A

B

B C

D

E

F


101iP

ad

The error messages returned from the Content Delivery Platform have been

extended. Error codes are used to better iden-tify the area where the problem originates from. In the translations, the error codes are posi-tioned in the %@ section of the string. If needed, this section can be removed so that the error code does not appear in the message. However, we strongly recommend to keep this section in the string, so that better technical support can be provided to the end user.

�Root.strings file. This file can be used to change the labelling of the version information for the Reader App as displayed in the Settings app of the iPad.

The file can be found in the following location of the Xcode project: Resources/Settings.bundle/[language code].lproj/Root.strings.

For more information, see section 3.4.3 Changing the Language and section 5.5 Version Numbering.

�Dossier properties. Setting the properties of a Dossier controls the following:

�Section. Each section in the Section Viewer is derived from the Section Title property.

�Story title. The title for a story below a thumbnail in the Flipview is derived from the Story Title property.

�Story description. The story descrip-tion below the story title in the Flipview is derived from the Description property.

To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken

from their respective custom metadata proper-ties. For more information about setting these values, see the Enterprise 7 Admin Guide, chap-ter 40, Digital Magazine Configuration.)

�Issue Maintenance page. The Issue Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header.

To add or change this text, change the Issue Description property on the Issue Maintenance page in Enterprise Server.

�HTML pages. Dedicated HTML pages such as the Subscription Offer page in the Store, present specific information. Changing the text of these pages is done by modifying the relevant source files.

For more information, see appendix L, Subscription Server Support – section 1.1.1. Web Pages.

�External sources. Dialog boxes can hold specific information originating from an exter-nal source. Although their source is not part of the Reader App as such, because they are displayed within the context of the magazine, it can appear to the user as part of the magazine. For example:

�When a user subscribes to an iTunes sub-scription, a dialog box appears asking for confirmation. The text in this dialog box also contains custom text (typically the name of the magazine to which the user wants to subscribe). This text is derived from the Display Name field of the Edit Language section, accessed through the Manage Your in App Purchases page on iTunes Connect.


102iP

ad

3.4.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.plist file. For more information, see section 3.2 Colors.

3.4.3 Changing the Language

The default language for the Reader App is English but it can be localized for other languages as well. 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, else it will display the text in English).

Localization is split over two levels: localization for the Reader App and localization for the Reader App

version information.

Each is explained below.

Localizing the Reader AppThe following instructions do not apply to localizing the HTML Store. For information about localizing

the Store, see appendix G, Customizing the HTML Store – 3.6 Language.

To add a supported language to the Reader App, perform the following steps:

Step 1. In the Xcode project file locate the Localizable.strings file in the Resources folder.

Step 2. Select the file and from the View menu, choose Utilities, followed by File Inspector.

The File Inspector appears in the right-hand side of the screen.

Step 3. In the File Inspector, expand the Localization group.

All currently added localizations are displayed (English only by default).

Step 4. In the bottom bar of the Localization group, click the + button.


103iP

ad

A list appears with all available languages which can be added.

Step 5. Choose the required language from the list.

Step 6. Repeat steps 4 and 5 until all required languages have been added.

Step 7. Build the app and view and verify the results in the Reader App.

More information about localization for the iPhone/iPad SDK can be found here: http://developer.apple.

com/library/ios/#documentation/MacOSX/Conceptual/BPInternational/Articles/InternatAndLocaliz.html.

Localizing the version informationTo add a supported language to the Reader App, perform the following steps:

Step 1. In the Xcode project file locate the Resources/Settings.bundle/[language code].lproj folder.

Step 2. Duplicate this folder.

Step 3. Change the language code in the folder name. These should be a two- or three-letter code and comply to the ISO 639-1 or ISO 639-2 conventions.

For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/

php/English_list.php.

Step 4. Modify the content of the Roots.strings file as required.

http://www.loc.gov/standards/iso639-2/php/English_list.php



104iP

ad

3.5 Settings

Most of the customizations for the Reader App are per-formed in the DMSettings.plist file, which allows changing Reader App functionality, font settings and colors. 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, see appendix E, The DMSettings File.

For some specific features, no user interface is available yet (such as hiding video controls). For these scenarios, the exported magazine.xml file can be modified.

4. Previewing Customizations

Previewing any made customizations can be done by loading the Reader App into the iPad Simulator. This is achieved by building the Xcode project, after which the project is automatically opened within the simulator.

When using the simulator, take note of the following:

�Not all behavior or functionality can be simu-lated. For instance, it is not possible to simulate slow internet connections.

�Although the simulator reflects the working of the iPad as best as possible, it is itself a soft-ware application in which certain functionality or behavior may not always fully function. We advise to include an iPad which is assigned as a development device in your workflow of testing the Reader App.


105iP

ad

5. General App Settings

The following general features can be modified for the Reader App:

�Reader App name. The name of the Reader App as it appears on the iPad.

�Reader App assets. General assets used throughout the Reader App.

�Intent settings. Settings to conver t Enterprise intent names to Reader App intent names.

�Background downloading. When the Reader App is suspended while a download is in progress, the download is continued.

�Background download setting. Allows the user to enable/disable background down-loading of a magazine when the Reader App is closed.

�Version information. Version information about the Reader App.

�Upgrade information. Information about upgrading the Reader App.

Each setting is explained in the following sections.

5.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. In the Targets section, select the DigiMag_Template project.

Step 2. In the main screen, select the Build Settings tab.

Step 3. Search for the Product Name property.

Step 4. Enter the required name.


106iP

ad

5.2 Reader App Assets

Reader App assets are assets with a general purpose such as splashscreens and the app icon. These assets are stored in the Application folder.

�Default-Landscape.png. The default splash screen that is shown when the App is launched in landscape mode. This image needs to be 1024 pixels wide and 748 pixels high. This overrules the Default.png splashscreen for the landscape orientation.

�Default-Portrait.png. The default splash screen that is shown when the App is launched in portrait mode. This image needs to be 768 pixels wide and 1004 pixels high. This overrules the Default.png splashscreen for the portrait orientation.

�Default.png. The default splash screen that is shown when the App is launched.

�Icon.png. The icon that is shown on the iPad springboard for the app.

5.3 Intent Settings

Intent settings are used to match certain functionality of the Reader App with specific content. For example, in order for the page containing the table of contents to appear when a user taps the TOC button in the Navigation bar, the Dossier in which the layout is stored should have its intent property set to TOC. A similar intent property (named Help) is used for linking the Help button to the Help page, containing instructions about how to use the Reader App.

Both intent properties are defined on Enterprise Server. However, if custom values are used, the corresponding values for the Reader App also need to be changed (else the functionality will break).

Changing the intent values can be done by means of the DMSettings.plist file:

�Intents/Help. Used for linking the page with Help instructions to the Help button in the Navigation bar.

�Intents/TOC. Used for linking the page con-taining the table of contents to the TOC button in the Navigation bar.


107iP

ad

5.3.1 Background Downloading

When the Reader App is suspended while a download is in progress, the download is now continued.

However, Apple applies the following restrictions:

�The time is finite. When the app is closed there is a maximum of 10 minutes left in which the app is still allowed to execute code.

�System resources must permit background execution. When resources (such as memory) are needed for a newly started app, our back-ground downloading might be cut off early.

For additional technical information see:


Shortly before the time limit is reached, a message is displayed to the user, allowing the user to continue or cancel the download. When the user does not respond to the message, the download is cancelled; 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 follow-ing strings:

�Your inactive magazine download is about to be canceled.\nWould you like to continue down-loading the magazine?

�Continue

5.4 Background Download Setting

When the Reader App is closed while a magazine download is in progress, the download process is con-tinued. The user can change this behavior through the Settings screen on the iPad by enabling/disabling the 3G Download option.

This functionality is performed through the Settings.bundle file of the Xcode project. The default file is aimed at using 3G Downloading together with Content Sharing. The bun-dle can be replaced by any of the following bundle files:

�Settings_3GDisabled.bundle. Use this Bundle if Content Sharing is enabled and 3G Downloading is disabled.

�Settings_SharingDisabled_3GDisabled.bundle. Use this bundle if both Content Sharing and 3G Downloading are disabled.

�Settings_SharingDisabled.bundle. Use this Bundle if 3G Downloading is enabled and Content Sharing is disabled.

To implement this functionality, perform the following steps:

Step 1. Enable the following DMSetting:

�Store/Enable 3G Downloading

Step 2. (Optional, only when any of the non-default bundles is to be used) Replace the default Settings.bundle file by doing the following:

Step 2a. Remove the old Settings.bun-dle file from your project (also remove it from the file system).





108iP

ad

Step 2b. In the provided template project folder, locate any of the above mentioned bundles.

Step 2c. Copy this file to a different loca-tion (such as the Desktop).

Step 2d. Rename the file to Settings.bundle.

Step 2e. Drag the new Settings.bundle fie onto the Resources folder in the tem-plate project in Xcode.

A dialog box will appear.

Step 2f. Set the following settings:

�Select the check box Copy items into destination group’s folder (if needed).

�Click the option Create Folder References for any added folders.

Step 2g. Click Add.

Step 2h. Localize any of the following strings in the Settings.bundle/en.lproj/Root.strings file:

�3G Download Options. The label shown in the iPad Settings application screen.

�Continue After Closing App. The title of the option in the iPad Settings application screen.

5.5 Version Numbering

Version numbering the Reader App allows the following processes to take place:

�Version verification. The user can verify the installed version on the iPad

�Update release. The publisher can release an update for the Reader App



109iP

ad

5.5.1 Version Verification

The following version numbers can be verified for the Reader App on the iPad (see chapter 4, Using the Reader App – section 15, Version Information):

�Application version: the version number of the Reader App.

�Framework version: the version number of the WoodWing Framework.

Application versionTo set the application version, perform the following steps:

Step 1. In the Reader App project, access the DigiMag_Template-Info.plist file.

Step 2. Modify the Bundle Version value.

Framework versionThe Framework version number is set by WoodWing and cannot be modified.

LabelsThe labels in the settings screen on the iPad are customiz-able by performing the following steps:

Step 1. In your Xcode project, locate the Settings.bundle file in the Resources folder.

Step 2. Expand the Settings.bundle file.

For each language, a separate folder is pro-vided. If a new language is required, duplicate an existing folder and modify the language code in the folder name by changing it to a two- or three-letter code which is compliant to the ISO 639-1 or ISO 639-2 conventions.

For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/

php/English_list.php.

Step 3. Select the Root.plist file.

Step 4. Expand Item 5 (Group - Version Information) and edit the available key values as required.




110iP

ad

5.5.2 Update Release

When a magazine issue is published containing features which require a new version of the Reader App to be installed, the publisher can prompt the user to update the installed Reader App.


Reader App.

When a user starts the download of an issue, the version number of the Reader App is verified against the mini-mum version that is required to read the issue. When the Reader App version is lower than the minimum version, a message is displayed to the user informing the user that the Reader App requires updating. When tapping OK, the user is directly taken to the App Store.

Setting the version numbersThe version numbers are set as follows:

�On the Content Delivery Platform: see appendix F, Using the Content Delivery Platform – section 3.4.2, Adding an Issue in Segments and section 4.1, Configuring Reader Apps.

�In the Reader App: see section 5.5.1 Version Verification.

Localizing the messageTo change the displayed message, modify the following string in the Localizable.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. Click OK to update it via the App Store";

Setting the link to the App StoreWhen the user taps the OK button in the displayed mes-sage (see above), the App Store is accessed. The URL is set through the following DMSetting:

�Update/App Store Link

URL example:

http://itunes.apple.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.apple.com/linkmaker.

http://itunes.apple.com/linkmaker


111iP

ad

6. 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

Each aspect is explained in the following sections.

Other Reader App features such as the TOC List and Bookmarks can also be seen as navigation

methods, but these are described in section 9. General App Features.

6.1 Story vs Page Navigation

The user can be offered one of two types of navigation:

�Story navigation. In this configuration, navi-gation is done as follows:


�To navigate within a story (from page to page), the user swipes vertically (up/down or down/up)

�Page navigation. In this configuration, navi-gation is done as follows:

�To navigate from page to page, the user swipes horizontally (from left to right or right to left) using one finger

�To navigate from story to story, the user swipes horizontally (from left to right or right to left) using two fingers

For more information about Story Navigation and Page Navigation, see chapter 3, The Concept –

section 3, Stories, Pages, Sections and Segments.

By default, the Reader App is set to Story navigation.


112iP

ad

To enable Page navigation, set the following option in the DMSettings.plist file to Yes:

�Navigation/Horizontal page navigation

To enable two-finger swipe (Page navigation only), set the following option in the DMSettings.plist file to Yes:

�Navigation/Scroll sections with two finger swipe

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.

To enable the Page Scrubber, set the following option in the DMSettings.plist file to Yes:

�Flipview/Page scrubber enabled

6.2 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 land-scape 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 differ-ently styled pages for each view. Furthermore, pages in portrait orientation can also be displayed in Text View (a mode in which text can be scaled by the user by increas-ing or decreasing the font size).

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

Possible values:

�Landscape. For displaying only pages in landscape orientation.

�Portrait. For displaying only pages in portrait orientation.

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


113iP

ad

6.3 Right-To-Left Support

The Reader App can be enabled for right-to-left support so that scrolling through the magazine is reversed.

To enable right-to-left support, set the following option in the DMSettings.plist file to Yes:

�Navigation/Right to left support

When using right-to-left support, 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.

�backIcon.png should be turned into for-wardIcon.png

�backSelectedIcon.png should be turned into forwardSelectedIcon.png

�forwardIcon.png should be turned into backIcon.png

�forwardSelectedIcon.png should be turned into backSelectedIcon.png

6.4 Navigation Bar

The Navigation bar is used as a starting point for navigat-ing the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, Store, etc.) as well as to external content for instance by using the Newsfeed button.

Customizing the Navigation bar can be done by changing the following:

�Tap area. The area which the user should tap in order to display the Navigation bar.

�Visibility. Only show the Navigation bar when the user taps the screen, or always have it visible.

�Items. The number of buttons and the order in which they appear.

�Assets. The icons of the buttons.

�Colors. The color of the Navigation bar.



114iP

ad

6.4.1 Tap Area

By default, the Navigation bar appears when the user taps any part of the screen.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.plist file, make the following changes:

�Set the option Tap bottom to show toolbar to Yes

�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom area height value.

The Navigation bar now only appears when the user taps the defined area.

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

6.4.2 Visibility

By default, the Navigation bar only appears when the user taps any part of the screen (see section 6.4.1 Tap Area).

The Navigation bar can also be made to permanently dis-play by setting the following option in the DMSettings.plist file to Yes:

�Navigation/Bottom toolbar always on

Note that the Navigation bar obscures the bottom 50 pixels of the page content. When making use of

this feature, inform your designers so that no content or functionality (such as Hotspots, links, Web Elements, etc) is placed in that area.


115iP

ad

6.4.3 Items

The Navigation bar can contain the following buttons:

�Buy. (Pro, Framework, Subscriptions, and Apple Subscriptions Editions only) For navigat-ing to the Store.

�Library. (Pro, Framework, Subscriptions, and Apple Subscriptions Editions only) For navigat-ing to the Library.

�Home. For navigating to the magazine cover.

�TOC. For navigating to the table of contents page.

�External Back. For navigating to the Custom Home page.

�Help. For navigating to the Help page.

�FlipView. For bringing up the Flipview.

�Feed. For navigating to the newsfeed.

�Account. (Subscriptions, and Apple Subscriptions Editions only) For bringing up an external page with subscription account details.

�Back/Forward buttons. For navigating to the previous or next visited page.

An additional Fullscreen Overlay button can be added to the Navigation bar. For

more information, see section 9.8 Fullscreen Overlay.

The buttons are managed by means of the following option in the DMSettings.plist file:

�All buttons except the Forward/Back buttons: Navigation/ToolbarItems.

The value of each item is linked to specific func-tionality and should not be changed.

�Forward/Back buttons: Navigation/History buttons in bottom toolbar. Included in the Navigation bar by enabling the following setting:

�Navigation/History buttons in bottom toolbar

When making use of this feature, take note of the following:

�When this option is selected and the top Toolbar is also enabled, the Back/Forward button will only be shown in the Navigation bar and not in the top Toolbar.

�These buttons are disabled when the user accesses the Store or Library.

�The Navigation bar has room for dis-playing up to 9 buttons. By default, 8 buttons are already displayed; adding the Back and Forward buttons would result in 10 buttons to be displayed, which don’t fit. Therefore, one button needs to be removed from the list by selecting it and deleting it. (Adding a button can be done by right-clicking an item, choosing Add Row from the context menu and entering the correct Value for that button.)


116iP

ad

Changing the orderTo rearrange the order in which the items appear in the Navigation bar, drag each key to its required position.

The Back/Forward buttons are always positioned to the far left of the Navigation bar, except when the

Reader App is configured for right-to-left support when they are positioned to the far right.


117iP

ad

6.4.4 Assets

The assets that appear in the Navigation bar are stored in the images/Toolbar folder.

For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.

The Navigation bar has a 1-pixel high dark row at the top. When creating or modifying a button, 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 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.woodwing.net/products/Enterprise%207.0.x/Software.

The following assets can be customized:

An additional Fullscreen Overlay button can be added to the Navigation bar. For more information,

see section 9.8 Fullscreen Overlay.

�accountIcon.png. The icon for the Account button in the Navigation bar.

�accountSelectedIcon.png. The icon for the Account button in the Navigation bar in its selected state.

A Store icon (selected) B Library icon C Home icon D TOC icon E Flipview icon F Feed icon G Help iconH Account icon

A B C D E F G H

Figure 6.4.4. The Navigation bar assets

�feedIcon.png. The icon for the News Feed button.

�feedSelectedIcon.png. The icon for the News Feed button in its selected state.

�flipviewIcon.png. The icon for the Flipview1 button. (This button is normally named Contents.)

�flipviewSelectedIcon.png. The icon for the Flipview button in its selected state. (This button is normally named Contents.)

�helpIcon.png. The icon for the Help button.

�helpSelectedIcon.png. The icon for the Help button in its selected state.

�homeIcon.png. The icon for the Home but-ton, linking to the cover of the magazine.

�homeSelectedIcon.png. The icon for the Home button in its selected state.

�libraryIcon.png. The icon for the Library button.

1 When tapping the Flipview button, the Story Viewer and Section viewer appear above the Navigation bar





118iP

ad

�librarySelectedIcon.png. The icon for the Library button in its selected state.

�storeIcon.png. The icon for the Store button.

�storeSelectedIcon.png. The icon for the Store button in its selected state.

�tocIcon.png. The icon for the Contents but-ton in the Navigation bar.

�tocSelectedIcon.png. The icon for the Contents button in the Navigation bar in its selected state.

�topToolbarLogo.png. Image positioned in the center of the top Toolbar (typically a logo). Needs to be maximum 45 pixels high; the width is variable, but the other icons in the top Toolbar should be taken into account.

This image is not provided by default; adding an image into the Toolbar folder

and named topToolbarLogo.png automatically adds it to the top Toolbar.

6.4.5 Colors

The following Navigation bar colors can be customized:

�Application toolbar. The color of the Navigation bar.


119iP

ad

6.5 Flipview

The Flipview appears when the user taps the Contents button in the Navigation bar. It shows the Flipview Header, the Story Viewer / Page Viewer, the Page Scrubber (optional), and the Section Viewer (see figure below).

Figure 6.5. The Flipview appears when tapping the Contents button in the Navigation bar

A Flipview Header B Story Viewer / Page Viewer C Page scrubber D Section Viewer

B

D

C

A

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



120iP

ad

6.5.1 Assets

The Flipview assets are stored in the root images folder and the images/Flipview folder.


Various Flipview assets are available as PDF files which can be customized by using Illustrator. 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.woodwing.net/products/Enterprise%207.0.x/Software.

The following assets can be customized (see figure 6.5.1 on the next page:

images folder �transparentImageForFlipviewButton.

png. Image used for the selected status of a thumbnail in the Flipview.

images/Flipview folder �flipviewBackground.png. The background

image of the Flipview. Dimensions: This asset needs to be 1024 pixels wide. The height depends on the size of the thumbnails that are being used.

�flipviewBullet.png. Asset shown before the story name. This asset needs to be 9 pixels wide and 9 pixels high.

�flipviewCloseButton.png. The close but-ton. This asset needs to be 21 pixels wide and 21 pixels high.

�flipviewSectionBackground.png. The background image for the Sections viewer. This asset needs to be 23 pixels high.

�flipviewSelectedSectionButton.png. This asset shown when a Section is selected in the Section viewer. This asset needs to be 1 pixel wide and 23 pixels high.

�pageScrubberBackground.png. The background image behind the Page Scrubber. This asset needs to be 1024 pixels wide and 37 pixels high.

�pageScrubberButton.png. The Page Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.

�pageScrubberTrackLeft.png. The image to the left of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.

�pageScrubberTrackRight.png. The image to the right of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pix-els high. 10 Pixels of each side will remain the same, but the middle section will stretch.




121iP

ad

Figure 6.5.1. The Flipview assets

C

BA

D E F G H

A Flipview background B flipViewCloseButton C flipviewBullet D flipviewSectionBackground E pageScrubberTrackLeft F pageScrubberButton G pageScrubberTrackRight H flipviewSelectedSectionButton


122iP

ad

6.5.2 Colors

The following Flipview colors can be customized:

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

�Flipview text. The color of the Flipview header and issue description shown at the top.

�Flipview section text color. The color of the text in the Section viewer.

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

�Flipview story name color. The color of the Story title below the story preview.

�Flipview story Description color. The color of the story description below the story preview.

�Flipview empty thumb border. Color of the border for an empty thumbnail in the Page Viewer / Story Viewer.

When the progressive download functionality is used, download information is also displayed in the Flipview in the form of progress bars and text labels. For more information about customizing these components, see section 9.7.2 Progressive Downloading.

6.5.3 Fonts

For an explanation about how to change the color of the fonts and how to assign custom fonts, see

section 3.3 Fonts.

The following Flipview fonts can be customized:

�Flipview title font. Font settings for the Story Viewer / Page Viewer title.

�Flipview story name font. The font of the story name/title in the Flipview.

�Flipview story description font. The font of the story description in the Flipview.

When the progressive download functionality is used, download information is also displayed in the Flipview in the form of progress bars and text labels. For more information about customizing these components, see section 9.7.2 Progressive Downloading.


123iP

ad

6.5.4 Header

The Flipview Header contains the following components (see figure below):

�Flipview title. For displaying the title of the magazine. This can be modified by changing the following string in the Localizable.strings file:

/* The flip view name that is displayed */"Flip view" = "FLIP VIEW";

�Issue description. For displaying issue information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server. The font can be cus-tomized by modifying the following setting in the DMSettings.plist file:

�Fonts/Issue description font

�Close button. For closing the Flipview. Changing the look of this button can be done by modifying the following asset:

�Flipview/flipViewCloseButton.png

Figure 6.5.4. The Flipview Header can be used to display additional information about the magazine

A Flipview title B Issue description C Close button

A B C

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

Showing or hiding the Flipview header contentThe Flipview Header components can be hidden by dese-lecting the following option in the DMSettings.plist file:

�Flipview/Show flipview header

Changing the text colorThe following Flipview Header colors can be customized:

�Flipview text. The color of the Flipview header and issue description shown at the top.


124iP

ad

6.5.5 Thumbnail Size

The size of the thumbnails can be controlled via the fol-lowing settings in the DMSettings.plist file:

�Flipview/Thumbs/Minimum page thumb height

�Flipview/Thumbs/Maximum page thumb height

To change the thumbnail size, enter the required size in pixels for each setting.

These settings are directly linked to the thumbheight setting as part of the DigitalMagazineDevice Server

feature in the configserver.php file. (See the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration – Step 1.2 Configuring configserver.php). Verify both set-tings to make sure that the expected result is acquired.

6.5.6 Thumbnail Awareness

By default, the thumbnails in the Story Viewer / Page Viewer are shown in landscape orientation, even when the device is rotated to portrait orientation.

Matching the orientation of the thumbnails to the orienta-tion of the device can be done by setting the following DMSetting to Yes:

�Flipview/Thumbs/Make thumbs orientation aware

With this setting enabled, 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.

6.5.7 Margins

The margins between each image and the margins between the images and the Flipview Header can be con-trolled by the following settings in the DMSettings.plist file:

�Flipview/Margins/Pages top margin in Flipview

�Flipview/Margins/Flipview thumb margin

To change the margins, enter the required size in pixels for each setting.


125iP

ad

6.5.8 Story Title

Below the first page of each story, the Story Title can be shown.

This is especially useful when the Reader App is configured for Page Navigation (see section 6.1

Story vs Page Navigation). The story title is displayed below the first page of each story and is therefore a clear indication of where each story starts.

The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier proper-ties can be done by using Content Station or Smart Connection for InDesign.

Figure 6.5.8. 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)

A Story Title property B Story title displayed in Reader

A

B

6.5.9 Story Bullets

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

Figure 6.5.9. The story bullet in the Flipview

A

A Story bullet

Story bullets are displayed by default and can be hidden by setting the following DMSettings to No:

�Flipview/Show story bullet


Changing the appearanceChanging the appearance of the Story bullet can be done by modifying the following asset:

�Flipview/flipviewBullet.png


126iP

ad

6.5.10 Story Description

Below each story title a short description can be dis-played as a further indication of what the story is about.

To enable this feature, set the following option in the DMSettings.plist file to Yes:

�Flipview/Show story description

The text that is displayed is taken from the Description property of a Dossier. Accessing the Dossier proper-ties can be done by using Content Station or Smart Connection for InDesign.

Figure 6.5.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)

A Description property B Description displayed in Reader

A

B


127iP

ad

6.5.11 Page Scrubber

When the Reader App is configured for Page Navigation (see section 6.1 Story vs Page Navigation), 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.

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

A Page scrubberA

The Page Scrubber can be enabled by setting the follow-ing DMSettings to Yes:


Changing the appearanceChanging the appearance of the Page Scrubber can be done by modifying the following assets (found in the Flipview folder):


�pageScrubberBackground.png. The background image behind the Page Scrubber. This asset needs to be 1024 pixels wide and 37 pixels high.

�pageScrubberButton.png. The Page Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.

�pageScrubberTrackLeft.png. The image to the left of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.

�pageScrubberTrackRight.png. The image to the right of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pix-els high. 10 Pixels of each side will remain the same, but the middle section will stretch.


128iP

ad

6.6 Top Toolbar

Customizing the top Toolbar can be done by changing the following:

�Availability. Enabling or disabling the top Toolbar.

�Visibility. Only show the top Toolbar bar when the user taps the screen, or always have it visible.

�Tap area. The area which the user should tap in order to display the top Toolbar.

�Items. The number of buttons and images that appear in the top Toolbar.

�Assets. The icons of the buttons and images.

�Colors. The color of the top Toolbar.


6.6.1 Availability

By default, the top Toolbar is disabled. It can be enabled by setting the following DMSetting to Yes:

�Navigation/Enable top toolbar


129iP

ad

6.6.2 Visibility

By default, the top Toolbar only appears when the user taps any part of the screen (see section 6.6.3 Tap Area).

The top Toolbar can also be made to permanently display by setting the following option in the DMSettings.plist file to Yes:

�Navigation/Top toolbar always on

Note that the top Toolbar obscures the top 48 pixels of the page content. When making use of this fea-

ture, inform your designers so that no content or functionality (such as Hotspots, links, Web Elements, etc) is placed in that area.

6.6.3 Tap Area

By default, the top Toolbar appears when the user taps any part of the screen.1

The tap area can be limited to the bottom part of the screen by doing the following:


�Set the option Tap bottom to show toolbar to Yes.

�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom area height value.



130iP

ad

6.6.4 Items

The top Toolbar can hold the following items:

�Back/Forward buttons. For navigating to previously visited pages

�TOC List button. For displaying the TOC List.

�Audio Control button. For displaying the Audio Control.

�Bookmarks List button. For displaying the Bookmarks List.

�Image icon. Typically used for displaying a logo.

�Share Content button. For displaying the Share Content list.

Figure 6.6.3. The components of the top Toolbar

A B C D E F G

A Back button B Forward button C TOC List buttonD Audio control button E Bookmarks List button F Image icon G Share content button

The inclusion of most buttons is controlled by enabling/disabling specific settings in the DMSettings.plist file:

�Back/Forward buttons: are included by default, but can be included in the Navigation bar instead by setting the following setting to Yes:

�Navigation/History buttons in bottom toolbar

�TOC List. Included by default, cannot be disabled.

�Audio Control button. Included by setting the following setting to Yes:

�Navigation/Enable audio control in toolbar

�Bookmarks List button. Included by setting the following setting to Yes:

�Navigation/Enable bookmarks in toolbar

�Share Content button. Included by setting the following setting to Yes:

�Share toolbar/Enable share toolbar

The logo in the center of the toolbar is added by adding an image named topToolbarLogo.png into the images/Toolbar folder.


131iP

ad

6.6.5 Assets

The following assets can be customized:


�Toolbar/backIcon.png. The icon for the Back button image. Needs to be 50 pixels high.

�Toolbar/backSelectedIcon.png. The icon for the Back button image in its selected state. Needs to be 50 pixels high.

�Toolbar/forwardIcon.png. The icon for the Forward button image. Needs to be 50 pixels high.

�Toolbar/forwardSelectedIcon.png. The icon for the Back button image in its selected state. Needs to be 50 pixels high.

Right-to-left supportWhen the Reader App is enabled for right-

to-left support, the assets for the Back and Forward buttons need to be switched, else the direction of the arrow in the images is wrong. For more information, see section 6.3 Right-To-Left Support.

�Toolbar/tocTableIcon.png. The icon for the TOC List button.

�Toolbar/tocTableSelectedIcon.png. The icon for the TOC List button in its selected state.

�Audio Popup/audioTopBarIcon.png. The icon for the Audio Control button when no audio is available.

�Audio Popup/audioTopBarSelected-Icon.png. The icon for the Audio Control button in its selected state (when audio is being played).

�Bookmark Popup/bookmarkTopBarIcon.png. The icon for the Bookmark List button.

�Bookmark Popup/bookmarkTopBarSe-lectedIcon.png. The icon for the Bookmark List button in its selected state.

�topToolbarLogo.png. Image positioned in the center of the top Toolbar (typically a logo). Needs to be maximum 45 pixels high; the width is variable, but the other icons in the top Toolbar should be taken into account.

This image is not provided by default; adding an image named topTool-

barLogo.png into the Toolbar fo lder automatically adds it to the top Toolbar.

�Share Popup/shareTableIcon.png. The icon for the Share Content button.

�Share Popup/shareTableSelectedIcon.png. The icon for the Share Content button in its selected state.


132iP

ad

6.6.6 Colors

The following top Toolbar colors can be customized:

�Application toolbar. The color of the top Toolbar.

6.7 Hotzones

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

Figure 6.7. 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)

�Bottom area: for bringing up the Navigation bar.

�Right area: for navigating to the next page (or the previous page when the Reader App is set to Right-to-left mode)


133iP

ad

Each area can be controlled by the following options in the DMSettings.plist file:

�Hotzones/Tap bottom to show toolbar. Activates the bottom Hotzone.

�Hotzones/Tap sides to navigate. Activates the Hotzones to the left and right of the screen.

�Hotzones/Touch areas. Defines the height or width of the different Hotzones.

6.8 Gestures

Navigating from one page or story to another can be done by using finger gestures. Depending on the configura-tion of the Reader App (see section 6.1 Story vs Page Navigation), one or two fingers can be used:

Horizontal navigation �One-finger swipe. 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.


�Two-finger swipe. Works only when the Reader App has been configured for page navi-gation; it takes the reader to the next or previous story.

Vertical navigation �One-finger swipe. Works when the Reader

App has been configured for story navigation only:



134iP

ad

7. The Store

The iPad 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

�General Store features


7.1 Communication With the Store

Communication with the Store is done by configuring the DMSettings file and the DigiMagKioskSettings file.

DMSettings fileThe following DMSettings can be configured:

�Store/HTML Store URL: The URL pointing to index-ios.html of the HTML Store.

Note the inclusion of the OS reference in the file name. This allows for different set-

tings and styling per OS (Android, iOS, etc.

�Store/HTML Store fallback URL: The URL pointing to a local HTML file. This file is loaded when the HTML Store is not accessible.

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.

�URL: The URL pointing to a local HTML file. This file is loaded when the external Web Store is not accessible.


135iP

ad

DigiMagKioskSettings FileConfiguration settings are controlled by the following set-tings in the Classes/DigiMagKioskSettings.h file:

�DigiMagKioskLibrary_URL. The URL to connect to the Kiosk Server.

This URL needs to end with: “/json-rpc/”.

�DigiMagKioskLibrary_ProductID. The product name as defined on the Kiosk Server.

�DigiMagKioskLibrary_SecretKey. The secret key as defined on the Kiosk Server.

�DigiMag_ApplicationVersion. The applica-tion version. This can be used to exclude an issue on the Kiosk Server side. This version number needs to be higher or equal to the issue version defined in the Kiosk Server, else the issue cannot be downloaded.

�DigiMag_MagazineCode. Reserved for a future version.

�DigiMag_ProductServerManagerClass-Name. (Used for custom development, do not change.) Responsible for buying and display-ing all issues in the Store. This class takes care of connecting to iTunes and taking care of the payments.)

�DigiMag_ContentServerManagerClass-Name. (Used for custom development, do not change.) Takes care of delivery of all content (issues and movies).

7.2 General Store Features

DMSettingsGeneral Store settings are controlled by the following set-tings in the DMSettings.plist file:

�Navigation/Always open in store. Allows to always have the Store opened when the Reader App is launched.

�Store/Resumable downloads. Enables the user to resume a download when it has been interrupted.1

�Store/Default to gridview in store. Defines if the Reader App should start the Store in Grid view or Single Issue view.

�Store/Enable filter. Enables a filter in the Store view, allowing the Reader App to fil-ter issues as defined by the filter data on the Content Delivery Platform.

�Store/Enable 3G Downloading. Enables downloading via a 3G network.

�Store/Enable Filter. Enables or disables the Store Filter.

1 In order for this feature to work, the content server needs to support the optional HTTP Range header. (The WoodWing hosted solution supports this feature.) When unsure whether a content server supports resumable downloads, leave this fea-ture disabled.


136iP

ad

Localizable stringsThe following string can be customized for the Store Filter:

�All Issues. The value in the Store Filter for choosing all issues.

The values shown in the Filter itself are defined on the Content Delivery Platform.

For more information, see appendix F, Using the Content Delivery Platform.

8. 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).

The Library functionality is only available in the Pro, Framework, Subscription, and Apple Subscription

projects of the Reader App.

Customizing the Library can be done by changing the following:

�General appearance

�Download settings

�Back to Issue button

�Library Filters

�Subscription sign-in functionality



137iP

ad

8.1 General Appearance

The general appearance of the Library can be customized by changing assets, colors, text, and fonts, as explained below.

AssetsPart of the Library assets are the same ones used for the Store, although some are specific to the Library itself.

The following assets can be customized (for examples, see figures on the next pages).


�segments_shadow.png. The shadow between the top and bottom part of the Segments Overview page.

�segments_stack_background.png. The icon for an issue on the Library page, indicating that the issue contains Segments.

�closeButtonDefaultState.png. The image used for closing or deleting a component.

�Store/headerBarShadow.png. The shadow as shown below the Library toolbar.

�Store/issueShadow.png. The shadow below the issue covers.

�Store/libraryEmptyShelf.png. Used when there are no further shelves to show. .

�Store/libraryFirstShelf.png. The first shelf in the Store Library view.

�Store/libraryShelf.png. The remaining of the shelves in the Store Library view.

�Store/storeHeader.png. Used as the top bar in the store and library view. The 768 pixels in the middle are used when the device is in portrait mode. The whole image is visible when the device is in landscape mode.

�Store/storeNoInternetErrorBackground.png. Shown when no internet connection avail-able. The background is repeated across the whole width.

�Store/storeNoInternetErrorLabel.png. The label shown on top of the error background. It is aligned to the center. For the best results use a label with a transparent background.


138iP

ad

Figure 8.2a. The assets of the Library Overview page

A storeHeader B headerBarShadow C closeButtonDefaultState D segments�stack�background E issueShadow F libraryFirstShelf G libraryShelf

F

F

F

G

E

A

B

D

C

Note that the bottom section of the Library in figure 8.2a is a color (Library background color), and not

an image. For more information about Library colors, see section Colors.


139iP

ad

Figure 8.2b. The asset of the Library Segments Overview page

A segments�shadow

A

Note that the top and bottom section of the Library Segments Overview page in figure 8.2b are colors

and not an images. For more information about Library colors, see section Colors.


140iP

ad

ColorsThe following Library colors can be customized:

�Colors/Store colors/Library segment top background color. Background color for the top half of the Segments Overview page.

�Colors/Store colors/ Library segment bottom background color. Background color for the bottom half of the Segments Overview page.

�Colors/Store colors/ Library issue name color. The color of the issue name in the Library.

�Colors/Store colors/ Library downloaded bytes color. The color of the string that indi-cates the download progress in bytes.

�Colors/Store colors/ Library issue num-ber color. The color of the issue number in the Library.

�Colors/Store colors/ Library background color. The color of the Library background.

�Colors/Store colors/ Library download bar color. Color of the progressive download bar.

�Colors/Store colors/ Library issue down-load progress color. Color of the string that indicates the progress of the download.

�Colors/Store colors/ Library issue down-load status color. Color of the string that shows the status of the download.

FontsFor an explanation about how to change the color of the fonts and how to assign custom fonts, see

section 3.3 Fonts.

The following Library fonts can be customized:

�Library issue download progress font. The font of the download progress label in the Library.

�Library issue download status font. The font of the download status label in the Library.

�Available issues text font. The font of the ‘Available issues:’ text.

�Library issue name font. The font of an issue in the Library.

�Library downloaded bytes font. The font of the downloaded bytes label in the Library.

�Library issue number font. The font of the issue number in the Library.


141iP

ad

8.2 Text

The customizable Library strings can be found in the Store section of the Localizable.strings file.

8.3 Download Settings

The process of downloading an issue or Segment can be divided into the following stages:

�Downloading �Installing �Opening

DownloadingWhen the non-progressive download method is used (not enabled by default, for more information see (section 9.7.2 Progressive Downloading), the following feature can be configured in the DMSettings.plist file:

�Library/Show progress in megabytes. By default, the download progress is shown in percentages. To display it in megabytes, select this option.

InstallingAs of version 1.8, the non-progressive download process will always display the installation progress.

The fo l lowing DMSetting has therefore been discontinued:

�Library/Enable install progress

OpeningTo 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), enable the following DMSetting:

�Library/Auto open magazine


142iP

ad

8.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.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, magazine type, etc.

Two types of filters exist:

�Library Filter. For filtering the Library on a high level, for instance by language.

�Library Segment filter. For filtering the Library on a more granular level, for instance on magazine type.

Figure 8.3. The Library filter allows a user to filter the Library by defined keywords

B

A

A Filter button B Filter list


143iP

ad

To enable the filters in the Library, set the following DMSettings to Yes:

�Library/Enable library filter

�Library/Enable library segment filter

The values shown in the Filter itself are defined on the Content Delivery Platform. Note that the content

of the Store filer (see section 9.16 Store Filter) is used as the source for the Library filter. For more information, see appendix F, Using the Content Delivery Platform.

Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. 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 the keyword which should be assigned to the magazine.

For example: when a filter has been set up for distinguishing sports and finance publications, choose Sports from the available list when uploading publications relating to sports, and Finance when uploading publications relating to finance.

Changing the textThe customizable Library Filter strings can be found in the Store section of the Localizable.strings file.


144iP

ad

8.6 Subscription Sign-in

How to modify the Subscription sign-in functionality in the Library is explained in section 9.17.2 Modifying the Reader App Appearance.

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.


145iP

ad

9.1 APIs

APIs can be used to add additional functionality to the Reader App. Currently it is possible to implement the fol-lowing APIs:

�Analytics API. For gathering information about how a user uses the Reader App.

�Gestures API. For receiving and controlling gestures sent from the Reader App.

�Navigation API. For creating their user interface components with data fetching and navigational functions.


9.1.1 Analytics API

The Analytics feature of the Digital Magazine Reader App can be used for logging events such as browsing to new sections, buying an issue, launching/exiting the app, and more.

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. To use other analytics frameworks—such as Google Analytics or Flurry—a custom analytics module needs to be developed.

For detailed instructions about how to integrate the default Omniture module into the Reader App, see appendix K, Omniture Integration.


146iP

ad

9.1.2 Gestures API

The External Gesture API contains functions to receive and control gestures sent from the Reader App. It also allows for adding custom gestures to the app that your classes can respond to.

GesturesThe Gesture Manager singleton acts as the interface between the app and the external code and contains functions for managing gesture delegates. These dele-gates will be notified when an gesture has occurred in the app. Delegates must conform to the supplied protocol.

Delegates can also indicate via the appropriate protocol methods whether they are able or willing to handle a par-ticular gesture and if they want to block the propagation of the gesture to the navigation or object elements in the Reader App.

It is also possible to add custom gestures to the Gesture Manager. Currently the Reader App only supports a single tap and a long tap. When another gesture is needed it is possible to add it via the Gesture Manager. Note however that the delegate, target and action of the supplied ges-ture will be reset by the Gesture Manager.

All gestures are routed through the Gesture Manager, it is not possible to receive them directly.

For an overview of the available classes, see appendix I, Gestures API.

9.1.3 Navigation API

The Navigation API gives access to the core Reader App navigation functions.

With this API it is possible to navigate to the various com-ponents of the magazine (sections, stories and pages). It also provides feedback on several key changes in the state of the Reader App. These include loading the issue, page changes, and orientation changes.

The data API provides access to the underlying data of the reader for use in an external user interface. The data is wrapped in an issue object that contains several con-venience methods to access the data structure.

For an overview of the API structure, see appendix J, Navigation API.

DataThe Data Manager singleton holds a reference to the cur-rent issue (the issue that is currently loaded in the Reader app).

The issue object is the main entry point for querying the data structure. It contains methods to fetch lists of sec-tions, stories and pages.

An issue contains one or more stories, each holding up to two sets of pages: one with pages in landscape ori-entation and one with pages in portrait orientation. Each layout always contains one page. However sometimes no portrait layout has been provided. In those situations, the first landscape page is returned when the portrait page is requested.

The correct set of pages for the current layout should be queried. This orientation can be obtained

from the Navigation Manager.

The story and page objects also contain references back to their parent (issue and story respective). These can be used to navigate back in the data chain.


147iP

ad

NavigationThe Navigation Manager singleton contains methods that enables you to navigate through the currently loaded magazine. It provides methods to navigate to pages, sto-ries and sections. It also provides an interface to the back and forward functions of the Reader App.

The Navigation Manager also provides access to the cur-rent state of the Reader App such as the current layout orientation and the current visible page.

A delegate can be added to the Navigation Manager. This delegate must adhere to the Navigation Manager proto-col. When added, this delegate will be notified when an issue loads, a page change is done, and when the layout orientation changes.

For an overview of the available classes, see appendix J, Navigation API.

9.2 Audio

For the playback of audio, the following features can be customized:

�Overlay assets

�Embedded audio controls

�Audio control pop-up



148iP

ad

9.2.1 Overlay Assets

Overlay assets are icons that appear over other objects to indicate their intention or state. For audio, icons are available to indicate that an audio file can be played or stopped.

A audioPlayEnabledIcon

Figure 9.2.1. The audio play enabled icon

A

The audio assets are stored in the Overlays/Audio folder.

The following assets can be customized.


�audioPlayDisabledIcon.png. The audio icon when a streamed audio file is not available or when no internet connection is available.

�audioPlayEnabledIcon.png. The audio icon shown when the audio file is not being played.

�audioStopEnabledIcon.png. The audio icon when the audio file is being played.

9.2.2 Embedded Audio Controls

By default, the controls for an embedded audio file are always displayed. If needed, the controls can be hidden for each individually placed audio file.

In order to give the user control over the playback of the audio file, enable the Audio Control pop-up

(see section 9.2.3 Audio Control Pop-Up).

To hide the controls for a placed audio file, edit the exported magazine.xml file as follows:

Step 1. Open the exported magazine.xml file in a plain-text editor.

Step 2. Locate the created audio object by searching for <type>audio</type>.

Step 3. In the audio id section, add the follow-ing 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.mp3</url><autoplay>false</autoplay><backgroundaudio>true</backgroundaudio>

</audio></object>

1 The controls are also shown when the backgroundaudio prop-erty is not included


149iP

ad

9.2.3 Audio Control Pop-Up

When the playback of an audio file has been started (either manually or automatically), the Audio Control fea-ture can be used to control the playback.

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 header of the Audio Control pop-up.

�Audio title. Title of the song being played.

�Audio description. Short description of the song being played.

�Stop/Play button. Button for stopping/restarting the playback.

�Slider. For scrolling through the file. (Works for embedded audio files only, not for files streamed from the Web.)

Figure 9.2.3a. The Audio Control pop-up components

C

B

A

D

E F

A Audio Control button B Header C Audio title D Audio description E Stop/Restart button F Slider

The implementation of this feature involves the following steps:

�Enabling the functionality

�Changing the assets

�Localizing the text

�Adding the audio title and description

Each step is explained in the following paragraphs.

Enabling the FunctionalityThe Audio Control functionality is controlled by means of the following settings in the DMSettings.plist file:

�Navigation/Enable audio control in toolbar. Makes the Audio Control button avail-able in the top toolbar.

�Navigation/Enable top toolbar. Enables the top Toolbar.


150iP

ad

Changing the AssetsThe Audio Control assets are stored in the Audio Popup folder. The following assets can be customized:


�audioControlBG.png. The background image for the Audio Control.

�audioControlDisabled.png. The icon for the button when no audio has been loaded.

�audioControlPlay.png. The Play icon for the button in the top Toolbar.

�audioControlSliderBGDark.png. The image to the right of the Control Slider button.

�audioControlSliderBGLight.png. The image to the left of the Control Slider button.

�audioControlSliderButton.png. The icon for the Control Slider button.

�audioControlStop.png. The icon for the Stop button in the Audio Control.

�audioTopBarIcon.png. The icon for the Audio Control button in the top Toolbar when no audio is available.

�audioTopBarSelectedIcon.png. The icon for the Audio Control button in the top Toolbar in its selected state (when audio is being played).

Figure 9.2.3b. The Audio Control assets

A

B

C FD E

A audioTopBarSelectedIcon B AudioControlBGC audioControlPlay D audioControlSliderBGLightE audioControlSliderButton F audioControlSliderBGDark


151iP

ad

Localizing the TextThe customizable Audio Control strings can be found in the Audio Control section of the Localizable.strings file.

Adding the Audio Title and DescriptionTo add the Audio Title and Audio Description to the Audio Control, the exported magazine.xml file needs to be edited as follows:



Step 3. In the audio id section, add the follow-ing 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.mp3</url><autoplay>false</autoplay><title>Audio title</title><description>Audio description</description>

</audio></object>


152iP

ad

9.3 Bookmarks

A Bookmarks List button can be made available in the top Toolbar for providing users access to the Bookmarks List. The Bookmarks List allows users to bookmark one or more stories in order to easily return to these stories at any stage.

The Bookmark functionality consists of the following components:

�A button in the top Toolbar with which the Bookmarks List can be displayed.

�A Bookmark List for bookmarking stories and for managing created Bookmarks.

Implementing of this feature involves the following steps:



�Changing the colors

�Changing the fonts


�Changing the dimensions


9.3.1 Enabling the Functionality

The Bookmark functionality is controlled by means of the following settings in the DMSettings.plist file:

�Navigation/Enable bookmarks in toolbar. Makes the Bookmarks button available in the top toolbar.



153iP

ad

9.3.2 Changing the Assets

The Bookmark assets are stored in the Bookmark Popup folder. The following assets can be customized:


�bookmarkAdd.png. The icon for the Add Bookmark button in the Bookmark List.

�bookmarkTopBarIcon.png. The icon for the Bookmark List button in the top Toolbar.

�bookmarkTopBarSelectedIcon.png. The icon for the Bookmark List button in the top Toolbar in its selected state.

Figure 9.2.3. The Bookmark assets

B

A

A bookmarkTopBarSelectedIcon B bookmarkAdd


154iP

ad

9.3.3 Changing the Colors

The following Bookmark colors can be customized:

�Bookmark selected row color. Color of the selected row in the Bookmark List.

9.3.4 Changing the Fonts


section 3.3 Fonts.

The following Bookmark fonts can be customized:

�Bookmark cell issue title font. Font of the issue title.

�Bookmark cell story title font. Font of the story title.

�Bookmark cell story description font. Font of the story description.


155iP

ad

9.3.5 Localizing the Text

The customizable Bookmark strings can be found in the Bookmarks section of the Localizable.strings file.

9.3.6 Changing the Dimensions

The dimensions of the Bookmarks List are controlled by the following DMSettings.plist options:

�Bookmark Popup/Popup height. Controls the height of the Bookmark List.

�Bookmark Popup/Popup width. Controls the width of the Bookmark List.


156iP

ad

9.4 Content Sharing

The Content Sharing functionality allows the user to share specific content with others by sharing the content via Twitter, Facebook, or e-mail.

The following content can be shared:

�Page. Either the currently visible part of the page or the thumbnail of the page as shown in the Story Viewer / Page Viewer.

�Part of a page. A manually defined part of a page.

�URL. A link to an external Web site, typically holding information related to the story.

The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar.

Enabling the use of this feature involves performing the following steps:

�Adding a custom metadata property to Enterprise server

�Configuring the DigiMagSettings.h file

�Cleaning the project targets






9.4.1 Adding Custom Metadata

(This step is optional and only has to be performed when URLs are to be shared.)

For each story (Dossier), one Hyperlink can be made available for sharing. This is done by creating a Hyperlink object and setting its intent property to Shared Article. (For more information about creating a Hyperlink object for sharing purposes, see chapter 5, Creating Content – section 5.11, Creating Shared Content.)

The intent property is a custom property in Enterprise. For instructions about adding this property to the sys-tem, see the Enterprise 7 Admin Guide, chapter 40 Digital Magazine Configuration – section 1.6 Adding Custom Metadata.


157iP

ad

9.4.2 Configuring the DigiMagSettings.h File

Access to the various services is achieved by the use of API keys. Check with the relevant service provider how to get hold of an API key for that service.

Access information to the various services is kept in the Classes/DigiMagSettings.h file of the project.

�bit.ly: Used for inserting a shortened version of the URL in Twitter messages. Change the login and key with the retrieved information from bit.ly:

NSString* bitlyLogin = @"login"; NSString* bitlyAPIKey = @"key";

Currently, only bit.ly is supported for this feature.

�Facebook: change the AppID, apiKey and appSecret with the retrieved information from Facebook:

NSString* facebookAppID = @"appID";NSString* facebookAPIKey = @"apiKey";NSString* facebookAppSecret = @"appSecret";

�Twitter: change the key and secret with the retrieved information from Twitter:

NSString* twitterOAuthConsumerKey = @"key";NSString* twitterOAuthConsumerSecret = @"secret";

�TwitPic: change the secretkey with the retrieved information from TwitPic:

NSString* twitPicAPIKey = @"secretkey";

�E-mail: no settings are provided; the default e-mail account on the iPad is used.

9.4.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.


158iP

ad


The Share Content functionality is controlled by means of the following settings in the DMSettings.plist file:

�Share toolbar/Enable partial page shar-ing. Enables/disables the functionality of sharing a part of a page.

�Share toolbar/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 avail-able for the Flipview.)

�Share toolbar/Enable share toolbar. Enables/disables the Share Content button in the top toolbar.

�Share toolbar/Enable twitter. When enabled, the Twitter service is available as an option in the Share Content list.

�Share toolbar/Enable facebook. When enabled, the Facebook service is available as an option in the Share Content list.

�Share toolbar/Enable email sharing. When enabled, the email service is available as an option in the Share Content list.

�Navigation/Enable top toolbar. Enables/disables the top Toolbar.


The Content Sharing assets are stored in the Share Popup folder. The following assets can be customized (see figures below):


�shareFacebook.png. The icon for the Facebook service when it is available.

�shareFacebookDisabled.png. The icon for the Facebook service when it is not available.

�shareMail.png. The icon for the e-mail ser-vice when it is available.

�shareMailDisabled.png. The icon for the e-mail service when it is not available.

�sharing_corner_selected.png. The corner handle of the Area Selector in its selected state.

�sharing_corner.png. The corner handle of the Area Selector when not selected.

�sharing_mover_selected.png. The Move handle of the Area Selector in its selected state.

�sharing_mover.png. The Move handle of the Area Selector when not selected.

�shareTableIcon.png. The icon for the Share Content button in the top toolbar.

�shareTableSelectedIcon.png. The icon for the Share Content button in the top toolbar in its selected state.

�shareTwitter.png. The icon for the Twitter service when it is available.


159iP

ad

�shareTwitterDisabled.png. The icon for the Twitter service when it is not available.

�stretchablePostButton.png. The icon for the Post button in the Twitter and Facebook window.

Figure 9.4.6a. The Content Sharing List assets

B

C

D

A

A shareTableSelectedIcon B shareTwitterC shareFacebook D shareMail

Figure 9.4.6b. The Screen Selector assets

A

B

C

A sharing�corner B sharing�moverC sharing�corner�selected


The following Content Sharing colors can be customized:

�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 part of a page).

�Page sharing table info color. The back-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).


160iP

ad


The customizable Content Sharing strings can be found in the Share table Social media translations section of the Localizable.strings file.

The following strings are available for the Content Sharing functionality:

/* Share table Social media translations */"Twitter" = "Twitter";"Facebook" = "Facebook";"E-mail" = "E-mail";"Sharing" = "Sharing";"Post" = "Post"; //post button title.

/* Title in page sharing selector */"What to publish" = "What would you like to share?";

/* Page option in page sharing selector */"This page" = "This page";

/* Edit clipping button */"Edit clipping" = "Edit Selection";

/* Partial page option in page sharing selector */"Part of this page" = "Part of this page";

/* Share button */"Share" = "Share";

/* Twitter sharing text format */ "Twitter sharing text format" = "%1$@ - %2$@ (%3$@, %4$@)";

%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, used multiple times, or left out completely.

/* TwitPic sharing text format */ "TwitPic sharing text format" = "%1$@ (%2$@, %3$@)";

%1$@ = text entered by the user%2$@ = the Web address as provided by the story

Hyperlink (automatically shortened)%3$@ = the shared image


/* Email sharing text format */ "Email sharing text format" = "%1$@ - %2$@";

%1$@ = the Web address as provided by the story Hyperlink

%2$@ = Story title


/* Email sharing subject format */ "Email sharing subject format" = "%1$@";

%1$@ = Story title

The value can be used at any location in the string, used multiple times, or left out completely.

"The article has been posted." = "The article has been posted.";"Couldn`t post the article." = "The article could not be posted.";"Characters left" = "Characters left";


161iP

ad

9.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 opening the magazine, this shell will display first. From it you can deeplink into the Reader App via API calls to open the Store, the Store with preview, the Library, and the latest issue.

The following sections describe the required steps for implementing this feature.

9.5.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).

�As much memory as possible needs to be freed up. When the external component is active (and as a result, the magazine content is not shown), there is no need to keep any images and or other visual data in memory.

�Device orientation notifications should be started early, preferably in the application delegate.

�A UIViewController should be used as a place-holder for the UIView’s that are returned by the API.


162iP

ad

9.5.2 Header Files

Implementing the external component can be done by using the following public header files:

�DMExternalDelegate.h. (For future imple-mentation) The protocol for asynchronous calls. Implement this protocol for receiving feedback from the DMExternal object.

�DMExternalIssue.h. (For future implemen-tation) The external representation of an issue object.

�DMExternal.h. This header file contains all the calls necessary to access the Digital Magazine component. It contains the following functions:

(DMExternalIssue *)lastDownloadedIssue;Not implemented at the time of writing.

(void)latestIssue; Not implemented at the time of writing.

(UIView *)openStore:(id)sender backSelector:(SEL)selector;Will return a UIView containing the Store in Grid view mode. The parameters ‘sender’ and ‘selector’ are both used as a way to return to the original application. The selector will be called upon the sender once the Reader App is done with the external component.

(UIView *)openStore:(id)sender backSelector:(SEL)selector withIssue:(DMExternalIssue *)externalIs-sue showPreviewPopup:(BOOL)showPreview;Will return a UIView containing the Store in single-issue view mode. The ‘externalIssue’ parameter is not used in this implementation. The parameters ‘sender’ and ‘selector’ are both used as a way to return to the original application. The ‘showPreviewPopup’ makes it possible to show the preview of the latest issue.

(UIView *)openLibrary:(id)sender backSelector:(SEL)selector;Will return a UIView containing the Library. The param-eters ‘sender’ and ‘selector’ are both used as a way to return to the original application.

(UIView *)openReader:(id)sender backSelector:(SEL)selector;Will return a UIView containing the reader. The component will continue with the latest downloaded issue.

(UIView *)openReader:(id)sender backSelector:(SEL)selec-tor withIssue:(DMExternalIssue *)externalIssue;Not implemented at the time of writing.


163iP

ad

9.5.3 Implementation

Below are a few implementation examples. We recom-mend to make the DMExternal and the UIView that results from the API calls ivars. This way they are more easily manageable.

Includes// external components#import <DigiMagLibrary/DMExternal.h>#import <DigiMagSharedLibrary/DMSLOrientationManager.h>

The DMSLOrientationManager, also a public header, is required to set the initial orientation state of the component.

CGRect frame = CGRectMake(0, 0, 768, 1004);[DMSLOrientationManager orientationManager].currentDeviceOrientation = UIDeviceOrientationPortrait;if( UIInterfaceOrientationIsLandscape(self.interfaceOrientation) ){ frame = CGRectMake(0, 0, 1024, 748); [DMSLOrientationManager orientationManager].currentDeviceOrientation = UIDeviceOrientationLandscapeLeft;}

It is most important to execute the code above first, before initializing the DMExternal object.

// create the digital magazine viewif( digitalMagazineExternal == nil )

digitalMagazineExternal = [[DMExternal alloc] init];

Next, create the DMExternal objec, and put it into the ivar.

digitalMagazineExternalView = [digitalMagazineExternal openStore:self backSelector:@selector(back)]; // set the calculated frame [digitalMagazineExternalView setFrame:frame]; // add the subview to the view [self.view addSubview:digitalMagazineExternalView]; [self.view bringSubviewToFront:digitalMagazineExternalView];


164iP

ad

Next, call the appropriate API call, and save the returning UIView into an ivar. After that, set the frame and add the subview to the view.

All the code above should be called each time a view is requested.

When the user is done, the ‘back’ selector will be called. The implementation should look as follows:

- (void)back{ // clean up the view [digitalMagazineExternalView removeFromSuperview]; digitalMagazineExternalView = nil; // clean up the controller [digitalMagazineExternal release], digitalMagazineExternal = nil;}

Here, the ivars are cleaned up and released. This should be done each time the back selector is called (to avoid memory leaks).

Additional notesBe sure to implement the following UIViewController del-egate in the parent view, so that the appropriate auto rotation callbacks are supported.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOri-entation { return YES;}


165iP

ad

9.6 Custom Objects

Objects with custom, 3rd-party functionality can be included in the magazine. The functionality of the ele-ment is completely upon the developer; it can be an extra user interface element, a list connecting to a database, a 3D object, etc.

The creation of a Custom Object on a layout starts by creating a Web Element; this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout.

Custom objects are added to the Digital Magazine project in XCode by doing the following

Step 1. Create a new class in the Reader App project.

Step 2. Include the following headers:

#import <DigiMagLiteLibrary/DMCustomObjectBase.h>

#import <DigiMagLiteLibrary/DMObjectTouchDelegate.h>

Step 3. Use the following class signature:

@interface YourCustomClass : DMCustomObjectBase <DMCustomObjectProtocol, DMObjectTouchDelegate>

Step 4. Implement the DMCustomObject-Protocol methods as listed in the table on the next page.

Step 5. (Optional) Implement the DMObject-TouchDelegate 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.

Step 6. Create a plist resource file named DMCustomObjects.plist.

Step 7. In the created plist file, create an entry with the following settings:

�Value: your newly created class name,

�Key: a string you can use to refer to your class.

Step 8. In the magazine.xml file, create an entry for your custom object and set classtype to the key of the entry in the plist file.

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>


166iP

ad

Table 9.6a. DMCustomObjectProtocol methodsMethod Function

(void)loadObjectCalled immediately after initialization. Can be used to initialize the custom objects own members. The viewControllers view is not yet available here.

(void)viewLoadedCalled after the viewControllers viewDidLoad method was invoked. Perform actions that depend on the controller view here.

(void)runCalled after all initialization and load events have occurred. Use this to do work in the custom object, such as starting timers.

(void)destroyCalled when the object is removed from the object stack of the page. This normally occurs when the user navigates to another page. Use this to do custom cleanup work. However also include the standard dealloc method to send the appropriate release calls.

Table 9.6b. DMObjectTouchDelegate methodsMethod Function(BOOL)gestureWillCancelNavigation: (UIGestureRecognizer *)gesture

When this method returns YES, the bottom Navigation bar will not pop up when the user taps the screen.

(BOOL)canHandleGesture: (UIGestureRecognizer *)gesture

Test if this object can handle the gesture. The standard imple-mentation is:if( CGRectContainsPoint([self.view bounds], [gesture locationInView:self.view]) ){ return YES; }else{ return NO;}

(void)handleGesture: (UIGestureRecognizer *)gesture

Here useful things with the gesture can be performed.

(BOOL)shouldHandleGestureExclusive: (UIGestureRecognizer *)gesture

When this method returns YES the gesture will not be propa-gated to underlying objects.

Table 9.6c. Available members from the DMCustomObjectBaseMethod Function

parametersString with the parameters from the XML file. Since this data can be anything it needs to be pro-cessed in the custom class.

objectFrame The frame of the object in the parent object view.


167iP

ad

9.6.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, and therefore requires manual steps to be performed after the magazine has been exported.

In case any Custom Objects are to be included in the magazine, perform the following steps:


Step 2. 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; the <link> property should therefore be empty.

<object><id></id><type>embedded</type><x>33</x><y>78</y><width>132</width><height>153</height><link></link>

</object>

Step 3. Change the <type> proper ty to custom:

<type>custom</type>

Step 4. 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 map-ping to the class in the DMCustomObjects.plist file. The <parameters> element holds parameters that can be optionally supplied.

Step 5. Repeat this process for all objects which should act as a Custom Object.


168iP

ad

9.7 Downloading Methods

Downloading of magazines can be offered in one of two ways:

�Non-progressive

�Progressive

Each is discussed in the following sections.

9.7.1 Non-Progressive Downloading

By default, the magazine is offered to the end user by means of the progressive download method (see section 9.7.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.

Configuring this feature can be done by means of the following DMSettings.plist options:

�Store/Force non-progressive down-loads. Forces the Reader App to make use of the non-progressive download feature.

�Library/Enable install progress. Shows the step of unzipping the downloaded issue.

�Library/Show progress in megabytes. Shows the progress in megabytes.

Localizing the textThe customizable Downloading strings can be found in the Store section of the Localizable.strings file.

Changing colorsThe following non-progressive download colors can be customized:

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

�Library issue download progress color. Color of the download progress bar in the Library.

�Library issue download status color. Color of the download status label in the Library.


169iP

ad

9.7.2 Progressive Downloading

The Progressive Download feature works out-of-the-box; the only configuration is related to the appearance of the various download bars and labels (see below).

If non-progressive downloads are required, see sec-tion 9.7.1 Non-Progressive Downloading.)

Changing the assetsThe following Progressive Download assets can be customized:


Images/Store (dimensions: 75x40 pixels): �libraryDownload.png. The Start Download

button.

�libraryDownloadPause.png. The Pause Download button.

�l ibraryDownloadRefresh.png. The Resume Download button.

Images/Overlays: �downloadFailedErrorLabel.png. The

image with the error message shown at the top of the page if the download failed. (Similar to the "No internet connection" message.)

�downloadFailedReloadButton.png. Button shown at the top of the page if the download failed. Tapping the button allows to re-download the issue.

�downloadFailedReloadButtonPressed.png. The downloadFailedReloadButton.png in its pressed state.

�progressiveDownloadOverlayBar.png. The overlay bar on the page that shows the download progress.

Changing the colorsThe following colors can be customized:

�Inpage downloading label color. Color of the Downloading label on a page.

�Downloading label color. Color of the Downloading label in the Page Viewer / Story Viewer.

�Percentage label color. Color of the down-load percentage label in the Page Viewer / Story Viewer.

�Inpage percentage label color. Color of the download percentage label on a page.

Changing the fontsThe following fonts can be customized:


section 3.3 Fonts.

�Inpage downloading label font. The font of the downloading label on a page.

�Downloading label font. The font of the downloading label in the Page Viewer / Story Viewer.

�Inpage percentage label font. The font of the percentage label on a page.

�Percentage label font. The font of the per-centage label in the Page Viewer / Story Viewer.

Changing the textThe customizable Progressive Download strings can be found in the Reader section of the Localizable.strings file.


170iP

ad

9.8 Fullscreen Overlay

A fullscreen Overlay window can be added to the Reader App in which content created with Objective-C can be displayed. The Overlay window is accessed through an additional button in the Navigation bar.

The process involves the following steps:

Step 1. Adding the settings file to the Reader App project and setting the required settings.

Step 2. Adding the Overlay window files to the Reader App project.

Step 3. Customizing the display properties for the Overlay window.

Step 4. Adding the Navigation bar button.


The implementation of a sample file is described; this file is available on the Community site: http://

community.woodwing.net/labs/samplecode.

When making use of your own project files, make sure that it includes a Close button.

Step 1. Adding the Settings File

A settings file controls basic properties of the Overlay window. To add the file to the project, perform the fol-lowing steps:

Step 1. Add the FullscreenOverlay.plist file from the sample code folder to the Resources folder of the project.

Step 2. (Optional) In the Value field, modify the classname value to match the name of the Controller.

Step 2. Adding the Overlay Window Files

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 3. Customization

Further customization can be added by controlling how the Overlay window will be shown, its presentation style, alignment, auto-resizing mask, and visibility of the top Toolbar or Navigation bar.

Step 1. Access the fullscreenOverlay-Controller.h file located in Classes/View files.

Step 2. In the @interface section, add the code for customizing the above mentioned items.

http://community.woodwing.net/labs/samplecode

http://community.woodwing.net/labs/samplecode


171iP

ad

Step 4. Adding the Navigation Bar Button

To add the button for accessing the Overlay window to the Navigation bar, perform the following steps:

Step 1. Add a new item named Fullscreen Overlay to the list of Toolbar items in the DMSettings file:

�Navigation/ToolbarItems

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.woodwing.net/products/Enterprise%207.0.x/Software.

Step 2. (Optional) Customize or localize the button assets found in the sample assets folder:

�fullscreenOverlayIcon.png. The icon for for the Fullscreen Overlay window but-ton in the Navigation bar.

�fullscreenOverlaySelectedIcon.png. The icon for for the Fullscreen Overlay window button in its selected state in the Navigation bar.

Step 3. Add the assets found in the sample assets folder to the following location of the project:

�Resources/images/Toolbar

9.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. To minimize the bandwidth used, Apple requires iOS5 apps to no longer store retrievable data (data that can be downloaded again) in the regular Documents folder, but in an alternative folder that is not being backed up.

The iPad Reader App 2.0.5 now stores magazines in the following location:

�Application�Home/Library/Caches/Issues

Note that when users are updating an older version of their Reader App to version 2.0.5 or higher, already down-loaded magazines are transferred when first starting the new Reader App. Depending on the number of maga-zines which need to be transferred, this can take a few moment. During this process, a message is displayed to the user stating that the file system is being updated.

The text for these messages can be found in the Localizalbe.strings file in the Update section, and can be localized when needed:

"Updating f i lesystem" = "Updating f i le system,\none moment please.";

Note that "\none" is a line break "\n" and the word "one" combined.

"Update error" = "Updating the file system failed";

"Update error description" = "Updating the file system failed. This could lead to improper behavior in the app. Try to solve the problems by restarting the app.";




172iP

ad

9.10 Libraries

The following Library functionality can be customized:

�Caching

�Library Filters

�Segment Filters


9.10.1 Caching

Libraries that show issues which are part of a subscription are now cached and refreshed under certain conditions.

Library caching is not used for Libraries showing content that is not part of a subscription.

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. This can be set in the following DMSettings.plist option (in seconds, default setting is 24 hours):

�Store/Subscriptions/Library cache time


173iP

ad

9.10.2 Library Filter

The Library functionality can be extended by including a Library filter. This filter can be used for filtering the issues that are displayed in the Library based on a predefined keyword.

Figure 9.10.2. The Library filter allows a user to filter the Library by defined keywords

A

B

A Filter label B Filter option

For instance: when your publications exist in multiple lan-guages, the use of the filter can be offered to only show those issues for a particular language.

Enabling the Library filterThe Library filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:

�Library/Enable library filter

Editing the list contentThe content of the list is derived from the Content Delivery Platform and is identical to that of the Store filter. For infor-mation about setting up the filter and assigning an issue to a keyword, see section 9.16 Store Filter.

Localizing the textThe customizable Library Filter strings can be found in the Store section of the Localizable.strings file.


174iP

ad

9.10.3 Library Segment Filter

Apart from filtering the content of the Library by using the Library filter (see section 9.10.2 Library Filter), additional filtering can be offered by means of the Library Segment filter. By using this filter, the content can be further drilled down based on predefined keywords.

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, Finance, Science, etc.

Figure 9.10.3. The Library Segment filter allows a user to filter the Library by defined keywords

A

B


Enabling the Library Segment filterThe Library Segment filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:

�Library/Enable library segment filter

Creating or editing the list contentThe content of the list is derived from the Content Delivery Platform. To create the list, do the following:

�Send an e-mail to [email protected] stating that you would like to make use of the Library Segment filter. In your e-mail, provide the following information:

�The name of the Reader App in which the filter is used

�The name which should be used for the Filter label

�The keywords which should appear in the Filter list

WoodWing will process the request for you and will inform you when this is completed.


�Upload your magazine content as a segment using the WoodWing Content Delivery Platform and on the Segment Details screen, choose the keyword which should be assigned to the magazine.

For example: when a filter has been set up for distinguishing sports and finance publications, choose Sports from the available list when uploading publications relating to sports, and Finance when uploading publications relating to finance.

Localizing the textThe customizable Library Segment Filter strings can be found in the Store section of the Localizable.strings file.


175iP

ad

9.11 Newsfeeds

When the user taps the Newsfeed button in the Navigation bar, the Newsfeed page appears as an overlay on top of the page. Its content is taken from the Internet.

Figure 9.11. The Newsfeed page is displayed as an overlay on top of the magazine

A

A Close button

Changing the appearanceThe single customizable component of the Newsfeed fea-ture is the Close button. Changing its appearance can be done by modifying its asset:

�closeButtonDefaultState.png


Newsfeed URL The URL of the Newsfeed is derived from the following option in the DMSettings.plist file:

�Navigation/Newsfeed URL

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

Fullscreen mode Displaying the Newsfeed page in fullscreen mode can be done by setting the following DMSetting to Yes:

�Navigation/Enable fullscreen newsfeed

In this mode, the Close button is not used. In order to close this view, the displayed HTML page should

include a built-in close button. This can be achieved by creating an URL pointing to “close://”. A simple example of a close button is: “<a href=‘close://’>Close</a>.”

Fallback Newsfeed PageIn case no internet connection is available, a fallback HTML page can be used for the Newsfeed functionality. To enable this feature, include a folder named “feedview” in the template project and create a HTML page named “fallback.html” within the feedview folder. If images or style sheets (CSS) are used, these also have to be placed in the feedview folder. If done correctly, the page is automatically found by the app and used, otherwise it falls back to the default behavior by showing a “no internet connection” message.


176iP

ad

9.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.

When a Reader App is made part of the Newsstand, it is not also separately available on a springboard.

Newsstand apps must offer at least one auto-renewable In-App Purchase subscription.



Having a Reader App in the Newsstand provides the fol-lowing 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.

�New issues can be made to download auto-matically in the background as soon as they become available. This way the download pro-cess does not have to be started manually.

For more information about the Newsstand, see www.apple.com/ios/ios5/features.html#newsstand.

Adding issues to the Newsstand is optional and controlled through a setting in the info.plist file of the

Reader App project.

Displayed iconsInitially, the Newsstand displays the app icon of the Reader App. Once an issue is fully downloaded, the

cover of that issue is displayed1. For issues containing Segments, the icon of the parent issue is displayed.

When an issue is removed, the cover for the last down-loaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is dis-played once more.

Issues can be displayed in one of two different ways:


This is controlled through a setting in the info.plist file of the Reader App project.

1 The icon is not changed when the download is started from the Reader App.

www.apple.com/ios/ios5/features.html#newsstand


177iP

ad

Notifications and download initiationWhen a new issue is available, the Newsstand can be notified by sending it a push notification. (This is done through the Content Delivery Platform. For more informa-tion, see appendix F, Using the Content Delivery Platform – section 4.8.2 Sending a Newsstand Notification.) When the Newsstand receives such a notification, the following actions take place:

�A badge with the word ‘New’ is placed in the top right-hand corner of the issue icon.

�In case the Reader App is not yet running, it is loaded in the background.

�The download of the new issue is started.

�When the download is complete, the cover of the new issue is displayed.

When an issue contains Segments, all Segments will be downloaded.

For more information about the downloading process, see chapter 4, Using the Reader App – section 6.2 From Within the Newsstand.

9.12.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

Each is explained in detail below.

The following items are part of the iOS 5 user inter-face and cannot be configured or customized.

�The look of the Newsstand

�The type of icons in which the issues are displayed

�The 'New' badge displayed when a new issue is available


178iP

ad

Including the Reader App in the NewsstandTo have the Reader App included in the Newsstand, do the following:

�In the Resources/DigiMag�Template-Info.plist file of the Reader App project, set the following setting to Yes:

�Appl icat ion presents content in Newsstand

Defining the type of icon to displayThe displayed issue can be presented in one of two types of icons:


When the magazine type icon is used, the version used in the Task Manager also displays staples, the

position of which can also be defined.

Figure 9.11.1. The different types of icons in which issues can be displayed in the Newsstand

C

A Magazine type icon B Newspaper type icon C Staples

A B

To define the type of icon to use, do the following:

�In the Resources/DigiMag�Template-Info.plist file of the Reader App project, set the following settings of the UINewsstand option:

�CFBundleIconFiles. Icon to display when no issue is fully downloaded yet, or when all issues have been deleted. Typically, this is the Reader App icon. (Default value: Icon.png).

�UINewsstandBindingType. Defines the type of icon to use for the issue:


179iP

ad

�UINewsstandBindingTypeMagazine. Displays the magazine type icon.

�UINewsstandBindingTypeNewspaper. Displays the newspaper type icon.

�UINewsstandBindingEdge. (Used together with the magazine type icon, but only displayed in the Task Manager.) Defines the position of the staples:

�UINewsstandBindingEdgeLeft. The staples are positioned on the left-hand side of the icon.

�UINewsstandBindingEdgeRight. The staples are positioned on the right-hand side of the icon.

�UINewsstandBindingEdgeBottom. The staples are positioned on the bottom of the icon.

Newsstand background download supportWhen the Newsstand receives a notification that a new issue is available, it needs to be able to communicate with the Reader App in order to initiate the download process.

For this to work, perform the following steps:

Step 1. Access the Resources/DigiMag_Template-Info.plist file of the Reader App project.

Step 2. Locate the Required background modes option.

Step 3. Make sure that the following item is included:

�newsstand-content

The Newsstand background download process is only supported when the Reader App is configured

for progressive downloading. (For more information, see section 9.7 Downloading Methods.)


180iP

ad

9.13 No Internet Connection Indicators

When no internet connection is available, an indication is given to the user by a bar in the top of the frame in which the content is to be shown. Locations in which this indica-tion can appear are for example:

�The Store �Frames with streaming video �Frames with streaming audio �Newsfeed windows �Widgets �Web Elements

The indicator consists of a background image and an image containing the text. Both are located in the root images folder:


�noInternetConnectionBackground.png. Background image of the bar.

�noInternetConnectionLabel.png. The text displayed in the bar.

A noInternetConnectionBackground B noInternetConnectionLabel

Figure 9.12. The No Internet Connection Assets

A B

9.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, new releases, etc. (Since this is done via the Store functionality of the Reader App, this feature is available in the Pro, Framework, Subscriptions, and Apple Subscriptions Editions only.)

The following sections describe how to configure the sys-tem and how to send out messages.


181iP

ad

9.14.1 Configuration

Configuring the system for the Push Notification feature involves the following steps:

�Updating the provisioning file and installing the required certificate

�Modifying the DigiMagKioskSettings.h file

Each step is explained in the paragraphs below.

Provisioning file & certificateThe provisioning profile needs to be enabled for Push Notification and the correct certificates need to be obtained for the server. For information about how to do this, see Apple’s Local and Push Notification Programming Guide:

http://developer.apple.com/iphone/library/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ProvisioningDevelopment/ProvisioningDevelopment.html#//apple_ref/doc/uid/TP40008194-CH104-SW1

Make sure to not export the p12 file with a pass-word; it can be uploaded by using the Content

Delivery Platform (see section 9.14.2 Sending Messages).

DigiMagKiosSettings.h fileIn your Xcode project, configure the DigiMagKiosk-Settings.h file as follows:

�DigiMag_usePushNotifications: needs to be set to YES.

�DigiMag_PushNotificationKey: needs to be empty.

9.14.2 Sending Messages

Users can be notified of new releases by sending out a message from the Content Delivery Platform. (Since this is done via the Store functionality of the Reader App, this feature is available in the Pro, Framework, Subscriptions, and Apple Subscriptions Editions only.)

Using the Push Notifications feature involves two steps:

�Configuration of the Reader App �Sending the messages

Each step is explained below.

Reader App configurationThe Push Notification feature is controlled via settings in the DigiMagKioskSettings.h file. The following settings are defined:

�DigiMag_usePushNotifications. Controls whether the Push Notification feature is used. Possible values: YES and No.

BOOL DigiMag_usePushNotifications = NO;

�DigiMag_PushNotificationManager-ClassName. The name of the (3rd-party) class which handles the push notification messages.

NSString *DigiMag_PushNotificationManagerClassName = @"DefaultPushNotificationManager";

Leave this set to the default setting unless a custom implementation is performed.

�DigiMag_PushNotification_URL. The URL of the Push Notification server.

Note the following:







182iP

ad

�For the generic version release, the value must be the same as the value for the DigiMagKioskLibrary�URL setting.

�This URL needs to end with "/json-rpc/".

NSString *DigiMag_PushNotification_URL = @"https://localhost/DigiMagKioskServer.main/public/json-rpc/";

Make sure to never start the Reader App by using Xcode while the option "DigiMag�PushNotification�

URL" in the DigiMagKioskSettings.h file points to a production push notification server. If this happens, the push notifications aren’t send correctly in production.

DigiMag_PushNotificationKeyReserved for future use; to be left empty.

NSString *DigiMag_PushNotificationKey = @"";

Sending messagesFor information about sending a message, see appendix F, Using the Content Delivery Sever – section 1.9, Sending a Message.

9.15 Slide Shows

For Slide Shows, overlay assets can be customized: icons that appear over other objects to indicate their intention or state. For Slide Shows, an icon is available to indicate that the image on the page is in fact a Slide Show. This icon is positioned in the lower left-hand corner of the image.

A slideshowIcon

A

Figure 9.14. The Slide Show icon

The icon can be changed by customizing the following asset:


�slideshowIcon.png. The overlay shown in the bottom left corner of a Slide Show.


183iP

ad

9.16 Store Filter

The Store functionality can be extended by including a Store filter. This filter can be used for filtering the issues that are displayed in the Store based on a predefined keyword.

Figure 9.15. The Store filter allows a user to filter the Store by defined keywords

A

B

A


For instance: when your publications exist in multiple lan-guages, the use of the filter can be offered to only show those issues for a particular language.

This filter is identical to the Library filter. 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

Library. As far as setup and content is concerned though, both are the same.

Enabling the Store filterThe Store filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:

�Store/Enable filter

Creating the list contentThe values shown in the Filter itself are defined on the Content Delivery Platform. For more information, see appendix F, Using the Content Delivery Platform.


�Upload your magazine content using the WoodWing Content Delivery Platform and on the Issue Details screen, choose the keyword which should be assigned to the magazine.

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, and English when uploading English issues.

Localizing the textThe customizable Store Filter strings can be found in the Store section of the Localizable.strings file.


184iP

ad

9.17 Subscriptions

The Subscriptions Edition and the Apple Subscriptions Edition of the Reader App can be used for offering maga-zines to users on a subscription basis.

For a description of how the functionality works from a user’s perspective, see chapter 4, Using the Reader App – section 9.1, Store With Subscription Functionality.

The subscription functionality is built into the following areas of the Reader App:

�The Store, where users can subscribe, sign in to an existing subscription account, and view an advertisement about subscription offers.

�The Library, where users can sign in to an existing subscription account, and download any magazine issues that are part of their subscription.

�The Navigation bar, where users can access their subscription account by means of the Account button.

Setting up the Subscription functionality involves the fol-lowing steps:

Step 1. Configuring the Subscription envi-ronment. For more information, see appendix L, Subscription Server Integration – section 1.1, Configuring the Subscription Environment.

Step 2. Configuring the Content Delivery Platform. For more information, see appendix L, Subscription Server Integration – section 1.2, Configuring the Content Delivery Platform.

Step 3. Configuring the Reader App func-tionality. (See sections below.)

Step 4. Modifying the Reader App appear-ance. (See sections below.)

Steps 3 – 4 are explained in the following sections.


185iP

ad

9.17.1 Configuring the Reader App Functionality

The options for the Subscription functionality are located in the Store section of the DMSettings.plist file of the Xcode project. The following options can be set:

�Store/Enable external subscription server. Enables the use of both the iTunes Subscription Service and a non-iTunes Subscription Service.

The working of a mixed subscription environ-ment is as follows:

�A Sign In button is available in the Store 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).

The Library will show the following content:

�All downloaded issues

�When not logged in to the non-Apple iTunes Subscription server: only the issues that are part of the Apple iTunes Subscription are shown.

�When logged in to the non-Apple iTunes Subscript ion server: the issues for the Apple iTunes Subscription and the issues for the non-Apple iTunes Subscription are shown.

�The Store will not display the Offer pages that are of the non-Apple iTunes Subscription; Apple does not allow this.

�Subscriptions/Library cache time. The time after which issues that are part of a sub-scription are refreshed in the Library. (Note that the cache is also emptied when the app is restarted or when the Store is accessed.)

�Subscriptions/Disable offer in portrait mode. For hiding the Offer pane when the device is rotated to portrait orientation.

�Subscriptions/Open subscription page in Safari. For opening the subscription page in Safari when the user taps the Subscribe button in the Store.

Note that by this action, the Reader App is closed.

�Subscriptions/Enable subscribe but-ton. Enables the Subscribe button in the Subscription section of the Store.

�Subscriptions/Enable existing sub-scriber button. Enables the Existing Subscriber button in the Subscription section of the Store.

�Subscriptions/Reset password. Linked to the same value on the Subscription server which stores the link to the Web page which users can use to reset their password. This key is used when a user wants to reset their pass-word (by tapping “I forgot my password” in the Login dialog box).

When the URL is not set on the Subscription server, the Subscribe button

in the Store will be unavailable.


186iP

ad

�License agreement. 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.1

�Privacy notice. 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 gath-ered, used, and managed.1

�Customer service. Linked to the same value on the Subscription server which stores the link to the Web page which users can use to obtain customer service.1

9.17.2 Modifying the Reader App Appearance

Changing the appearance of the subscription compo-nents can be done by modifying components in the Store, Navigation bar, and the Library.

StoreThe Subscription components of the Store are part of the HTML Store. For information about customizing these components, see appendix G, Customizing the HTML Store.

Navigation barThe Navigation bar holds the Account button for accessing the My Account page.

The button can be displayed/hidden by the following DMSetting:

�Navigation/ToolbarItems/Item 8 Account

The appearance of the button can be changed by modify-ing the following asset:

�accountIcon.png. The icon for the Account button.

�accountSelectedIcon.png. The icon for the Account button in its selected state.

Figure 9.16.2a. The Account button in its selected state

AA accountSelectedIcon


187iP

ad

LibraryThe Library holds the Sign In/Sign Out button and the Sign In window.

Sign In/Sign Out buttonThe labels can be modified by changing the following strings in the Store section of the Localizable.strings file:

�Sign out button �Sign in button

Sign In windowFor the Sign In window, assets, colors, text, and fonts can be customized.

AssetsThe following assets can be modified for the Sign In window (see figure on the fol-lowing pages):

�images/Toolbar/accountIcon.png. The icon for the Account button in the Navigation bar.

�Store/Subscriptions/Dialogs/checkbox.png. The Remember Me checkbox in its deselected state in the Subscription Sign In dialog box.

�Store/Subscriptions/Dialogs/c h eck boxC h ecke d .p ng . T he Remember Me checkbox in its selected state in the Subscription Sign In dialog box.

�Store/Subscriptions/Dialogs/clo-seButton.png. The Close button for the Subscription Sign In dialog box.

�Store/Subscriptions/Dialogs/headerBackground.png. The

background of the header of the Subscription Sign In dialog box.

�Store/Subscriptions/Login/loginDialog-Background.png. The background of the subscription Sign In dialog box.

�Store/Subscriptions/Password/passDia-logBackground.png. The background of the password login dialog box.

�Store/Subscriptions/shadowBarVertical.png. The shadow bar between the Store and the Subscription panes.

�Store/Subscriptions/stretchableSub-scribeButton.png. Subscribe buttons used in locations other than in the Store (for instance in the login dialog box.)

�Store/Subscriptions/stretchableSub-scriptionStoreButton.png. The subscription buttons in the Store (below the Offer pane).

�Store/Subscriptions/subscriptionForm-Background.png. The background image of the Subscription pane in the Store.


188iP

ad

ColorsThe following colors can be customized for the Sign In window:

�Sign-in disclaimer text color. The color of the disclaimer text in the Subscription Sign In dialog box.

�Sign-in license text color. The color of the license text in the Subscription Sign In dialog box.

�Sign-in privacy text color. The color of the privacy text in the Subscription Sign In dialog box.

�Sign-in remember checkbox text color. The color of the “Remember Me” text in the Subscription Sign In dialog box.

�Sign-in forgot button text color. The color of the “I forgot my password” text in the Subscription Sign In dialog box.

�Sign-in submit button text color. The color of the Submit button label in the Subscription Sign In dialog box.

�Sign-in email field text color. The color of the Email Address box text in the Subscription Sign In dialog box.

�Sign-in password field text color. The color of the Password box text in the Subscription Sign In dialog box.

�Sign-in dialog title text color. The color of the title in the Subscription Sign In dialog box.

TextThe customizable Sign In window strings can be found in the following section of the Localizable.strings file:

�Sign-in dialog


189iP

ad

FontsFor an explanation about how to change the color of the fonts and how to assign custom fonts, see

section 3.3 Fonts.

The following Sign In window fonts can be customized:

�Disclaimer text font. The font of the Disclaimer text in the Subscription Sign In dia-log box.

�License text font. The font of the License text in the Subscription Sign In dialog box.

�Privacy text font. The font of the Privacy text in the Subscription Sign In dialog box.

�Remember checkbox font. The font of the Remember Me text in the Subscription Sign In dialog box.

�Forgot button font. The font of the “I forgot my password” text in the Subscription Sign In dialog box.

�Submit button font. The font of the Submit button label in the Subscription Sign In dialog box.

�Email field font. The font of the Email box in the Subscription Sign In dialog box.

�Password field font. The font of the Password box in the Subscription Sign In dia-log box.

�Dialog title font. The font of the title of the Subscription Sign In dialog box.


190iP

ad

Figure 9.16.2b. The Subscription assets in the Sign In dialog box

A

B

C

D

A closeButton B headerBackground C loginDialogBackground D checkboxChecked


191iP

ad

9.18 Text View

The Text View assets are stored in the Text View folder. The following assets can be customized:


�textViewHeader.png. (Applies only to those articles which have not been created using the Text View Markup feature) The header that is shown at the top of the Text View. This asset needs to be 768 pixels wide but can have a custom height.

This asset is available as a PDF file which can be customized by using Illustrator. 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.woodwing.net/products/Enterprise%207.0.x/Software.

�textViewImagesShadow.png. This is the shadow that is shown between the Text View and the image bar. This assets needs to be 768 pixels wide and 20 pixels high.

Figure 9.17. The assets for the Text View

A

B

A textViewHeader B textViewImagesShadow




192iP

ad

9.19 TOC List

The TOC List is a pop-up window containing a table of contents.

For each story, the following is shown:

�Thumbnail of the first page of the story �The story title �The story description


A

A TOC List





�Changing the fonts


�Changing the dimensions



193iP

ad


To make the TOC List functionality available in the Reader App, perform the following steps:

Step 1. Enable the TOC List by setting the fol-lowing DMSetting to Yes:

�Navigation/TOC List in top toolbar

Step 2. Enable the top Toolbar by setting the following DMSetting to Yes:



The TOC List assets are stored in the TOC Pop-up folder. The following assets can be customized:


�tocThumbBackground.png. The image behind the thumbnails in the TOC List when viewed in landscape orientation.

�tocThumbBackgroundVertical.png. The image behind the thumbnails in the TOC List when viewed in portrait orientation.

Figure 9.18.2. TOC List assets

A

A tocThumbBackground


194iP

ad


The following TOC List colors can be customized:

�TOC selected row color. Color of the selected row in the TOC List.

9.19.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.

Figure 9.18.4. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for dis-playing the story title and description in the TOC List (bottom)

A Story Description property B Story Description dis-played in Reader C Story Title property D Story title displayed in Reader

B

A

CD

Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.


195iP

ad

9.19.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.plist file:

�TOC Popup/Popup height �TOC Popup/Popup width


The customizable TOC List strings can be found in the table of contents title for the vertical TOC section of the Localizable.strings file.


196iP

ad

9.19.7 Changing the Fonts


section 3.3 Fonts.

The following TOC List fonts can be customized:

�TOC cell story title font. The font of the story title.

�TOC cell story description font. The font of the story description.

9.20 Video

For the video functionality, the following can be customized:

�Overlay assets

�Hiding embedded video controls

�Remove the video once it has finished playing



197iP

ad

9.20.1 Overlay Assets

Overlay assets are icons that appear over other objects to indicate their intention or state. For videos, 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.

The video overlay assets are stored in the Overlays folder. The following assets can be customized:


�videoDisabledIcon.png. The overlay shown on top of a video when it is not possible to play the video, for example when there is no internet connection available to play a streaming video. (See figure 9.19.1a to the right.)

�videoEnabledIcon.png. The overlay shown on top of a video when the video is available but has not started yet. (See figure 9.19.1b to the right.)

A videoDisabledIcon

A

Figure 9.19.1a. The video disabled icon

A videoEnabledIcon

A

Figure 9.19.1b. The video enabled icon


198iP

ad

9.20.2 Hiding Embedded Video Controls

The controls for an embedded video can be hidden so that they don’t appear on the page. This can be con-trolled for each placed video individually. The user can control the playback of the video by taking the video into fullscreen mode.

To hide the controls for a placed video, the exported magazine.xml file needs to be edited as follows:


Step 2. Locate the created video object by searching for <type>movie</type>.

Step 3. In the movie id section, add the fol-lowing property:

<moviecontrols>false</moviecontrols>

Possible values: �true: controls will be shown1

�false: controls will be hidden

1 The controls are also shown when the moviecontrols property is not included

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.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 con-trols will be shown, else the user would not be able to leave fullscreen mode.


199iP

ad

9.21 Remove Video After Play

This feature allows to completely remove (hide) a video from a page when it has finished playing, thereby showing the content of the page behind the video frame.

This feature can be set for each individual movie.

To enable this feature, the exported magazine.xml file needs to be edited by performing the following steps:


Step 2. 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>


<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.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>

1 The video also stays visible when the removeafterplay property is not included


200iP

ad

9.22 Web Elements

For Web Elements, the following can be customized:

BackgroundThe background of Web Elements can be made transpar-ent by performing the following steps:

�For the HTML page which is to be embedded, set the background property in the body tag to transparent.

�Enable the fo l lowing set t ing in the DMSettings.plist file:

�Colors/Enable transparent Web Elements

Web Element pop-up windowThe 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";

/* Close button label */"Close" = "Close";

249

08

249iP

ad

This chapter discusses the process of building the iPad Reader App using Xcode.

See appendix H, Tips and Best Practices for further guide lines around these processes.

1. Preparation

Preparation steps are required before being able to build the following types of Reader Apps:

�A Reader App without Store functionality

�A Reader App with Store functionality

�A Reader App without Newsstand functionality


Building the iPad Reader App

Chapter 08 Building the iPad Reader App

250iP

ad

1.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), the magazine that was exported from Content Station needs to be merged with the project. To do this, proceed as follows:

If the content is retrieved separately from a Content Delivery Platform, the following steps can be

ignored.

Step 1. Drag the exported magazine into the Resources folder of the project in Xcode.

A dialog box will appear. (See figure 1.1a on the next page.)

Step 2. Set the following settings:

�Select the check box Copy items into destination group’s folder (if needed).

�Click the option Create Folder References for any added folders.

Step 3. Click Add.

The folder is added to the project as a blue folder icon. (See figure 1.1b on the next page.)

1.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. For this purpose, pertinent information needs to be included in the final build of the Reader App, and the Reader App needs to be registered on the Content Delivery Platform. To achieve this, perform the following steps:

Step 1. Send an e-mai l to [email protected] 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). When processed, 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, as defined on the Content Delivery Platform

�A product ID for the Reader App, as defined on the Content Delivery Platform

Step 2. Use these settings for building your Reader App. (See section 2. Building.)


251iP

ad

Figure 1.1a. A dialog box appears when dragging a magazine folder to the Resources folder in Xcode

Figure 1.1b. The added magazine appears as a blue folder icon


252iP

ad

1.3 An App Without Newsstand Functionality



When using any of these projects and when not making use of the Newsstand functionality, remove the functional-ity by performing the following steps:

Step 1. O p e n th e P r o Fr a m ewo r k , Subscriptions, or Apple Subscriptions project respectively.

Step 2. Open the Resources/DigiMag_Template-Info.plist.

Step 3. Remove the following keys:

�Application present content in Newsstand

�Icon file (iOS 5)

�Required background modes

Step 4. Save the file.

2. Building

To build the Reader App, perform the following steps:

Step 1. (Optional) When building the Reader App with Store functionality, enter the details received from WoodWing (see section 1.2 A Reader App With Store Functionality) in the Xcode project as outlined in chapter 7, Customizing the iPad Reader App – 7.1 Communication With the Store.

Step 2. Use the Bundle Identifier to make the Reader App unique.

Step 3. Implement your Distribution profile.

For more information about these steps, see the iPhone Developer Program User

Guide.

Step 4. From the Overview list in the Toolbar, choose the Active SDK for the required output device:

�Device. When the App is to be used on the iPad.

�Simulator. When the App is to be tested on the iPad Simulator.

Step 5. Click Build and Run.

4

09

4

Customizing the Android Reader App is important when you want to achieve any of the following:




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. The fol-lowing main customization areas are defined:


�Navigation

�The Store

�The Library


Customizing the Android Reader App

Chapter 09 Customizing the Android Reader App

5

1. Required Tools


�Eclipse and (optionally) an emulator. (Both come as part of the Eclipse and Android SDK). It is assumed here that both are correctly installed and that you are proficient in using these applications.

�SDK: SDK Platform Android 3.0, API 11.

A Reader App build with SDK 3.0 can also be run on a Froyo device.

�Image editor. For editing images in .png or .ai/.pdf format. Use your favorite editor for this task.

2. OS Compatibility

With the release of the Android Reader App v1.3, a single app is available which runs on both a

Honeycomb and Froyo device.

The customization steps as outlined in this chapter can be used for both Froyo and Honeycomb; where customiza-tion is significantly different, this is indicated accordingly.


6

3. Loading a Project

The Reader App is supplied as an Eclipse project.

The naming scheme has changed; as of v1.2 the Android reader uses the new naming scheme:

�DigiMag�Android�v1.x�bXXX�Framework.zip

For example:

�DigiMag�Android�v1.3�b505�Basic�Standard.zip

To load the project, perform the following steps:

Step 1. Unzip the provided DigiMag file:

�DigiMag�Android�v1.x�bxxx�Basic�Standard.zip

�DigiMag�Android�v1.x�bxxx�Pro�Framework.zip

�DigiMag�Android�v1.x�bxxx�Subscriptions.zip

Step 2. Open the Eclipse project, located in the [folder name]_Template folder.

Two projects are loaded: “customer�app” and “ww�digimag”. Customizations

should only be made to the “customer�app” project.

Customizing the Reader App is mostly done by making changes to the following areas of the project:

�src/[package folder]/DigiMagKiosk-Settings.java. (Reader App versions with Store functionality only) Settings related to connecting to the Store.

�res/values/strings.xml. For localizing the text as displayed in the Reader App.

�res/drawable folder. (Android Reader App v1.x (Froyo) only) For customizing images related to the Subscription Sign In window.

�res/drawable-nodpi. For generic drawables (used for both Froyo and Honeycomb).

�res-drawable-nodpi-v8. For Froyo-specific drawables.

�res-drawable-nodpi-v11. For Honeycomb-specific drawables.

�assets/DMsettings.plist file. For custom-izing the Reader App functionality.


7

4. Universal Builds

The Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same

app, 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.2).





�Any Honeycomb-specific drawables are located in the drawable-nodpi-v11 folder. SDK version 3.0

�Any Froyo-specific drawables are located in the drawable-nodpi-v8 folder. SDK 2.2


For a complete overview of which images are used on a unique platform and which are used on both

platforms, see appendix C, Image Dimensions – section 2, Android.



�Drawables. Interface components such as buttons, icons, logos and headers.



Customizing colors and fonts is not yet possible in the current version.



8

5.1 Drawables

Drawables are user interface components such as but-tons, icons and headers. Each of these drawables are images and can be easily replaced by your own images.

Various drawables are available as PDF files which can be customized by using Illustrator and subse-

quently 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.

Drawables are stored in the following project folders:

�Android Reader App v1.x: res/drawable-nodpires/drawable-nodpi-v8 res/drawable-nodpi-v11


�Renaming drawables is not allowed; 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;

these are identifiable by their file name which ends with a “9” (such as “downloadleft.9.png”). Information about such files can be found here: http://developer.android.com/guide/developing/tools/draw9patch.html.

The various drawables which can be customized for the different areas of the Reader App are described in the remainder of this chapter.

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

5.2 Text


�By changing the actual text

�By changing the language in which the text appears





http://developer.android.com/guide/developing/tools/draw9patch.html



9


The text which appears in the Reader App originates from various sources, and can therefore be changed by differ-ent means (see figure on the next page):

�Settings. The name of the Reader App itself is controlled by a setting in the Eclipse project. (For more information, see section 7.1 Reader App Name.)

�Drawables. Most drawables in the Eclipse project include icons only, but the following drawables also include text:

�Buttons of the Navigation bar, Action bar or Library

�Labels which indicate that no internet connection is available

To change the text for these drawables, modify their respective file. (For more information, see section 5.1 Drawables.)

�res/values/strings.xml res/values-v8/strings.xml res/values-v11/strings.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, mod-ify the content of the file as required.


10

Figure 5.2.1. Text originates from various sources in the system

A Localizable string B HTML page C Drawable with text D Dossier property E Server property

C

A

C

D

B

A


11





To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken from their respective custom metadata proper-ties. For more information about setting these values, see the Enterprise 7 Admin Guide, chap-ter 40, Digital Magazine Configuration.)



�HTML pages. Dedicated HTML pages such as the Subscription Offer page in the Store, present specific information. Changing the text of these pages is done by modifying the relevant source files.

For more information, see appendix L, Subscription Server Support – section 1.1.1. Web Pages.

5.2.2 Changing the Language

The default language for the Reader App is English but it can be localized for other languages as well. This is done by including a language code which the Android device will use to display the strings in the correspond-ing language (only when the device is configured for that language, else it will display the text in English).

To add a supported language to the Reader App, perform the following steps:

The following instructions do not apply to localizing the HTML Store. For information about localizing the Store, see appendix G, Customizing the HTML Store – 3.6 Language.

Step 1. In the Eclipse project file locate the val-ues folder in the res group.

Step 2. Create a duplicate of this folder and end the folder name with the two- or three-letter country code specific to the localization.

The two- or three-letter codes should comply to the ISO 639-1 or ISO 639-2

conventions. For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/php/English_list.php.

Step 3. Edit the strings.xml file as required.

The format of a string is as follows:

“<Key>” = “<Translation>”;

Step 4. Build the project.

Step 5. Configure the device on which the Reader App is to be shown to the required language.

Step 6. Run the Reader App on the device.




12

5.3 Settings

Most of the customizations for the Reader App are per-formed in the DMSettings.plist file. This allows you to change the functionality of the Reader App. Which set-tings these are and for which features they are used is discussed in the remainder of this chapter.


For some specific features, no user interface is available yet (such as hiding video controls). For these scenarios, the exported magazine.xml file can be modified. This will be explained in the remainder of this chapter where applicable.


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.

See the Eclipse/Android documentation for more details.

Installation on SD cardsTo run the Reader App on an SD card instead of in internal memory, perform the following steps:

Step 1. In your Reader App project, access the AndroidManifest.xml file.

Step 2. Modify the manifest statement by adding the following:

android:installLocation=”preferExternal”

Example:

<manifest xmlns:android=”http://schemas.android.com/apk/res/android” android:installLocation=”preferExternal”>

For more information, see the Android documentation: http://developer.android.com/guide/appendix/install-location.html.

http://developer.android.com/guide/appendix/install-location.html

http://developer.android.com/guide/appendix/install-location.html


13

7. General App Settings


�Reader App name. The name of the Reader App as it appears on the Android device.

�Reader App drawables. General drawables used throughout the Reader App.

�Web pages. Web pages containing specific information, such as privacy information or pre-ferred device metrics.

�Version information. Version information about the Reader App.

�Intent settings. Settings to conver t Enterprise intent names to Reader App intent names.

Each setting is explained in the following sections.

7.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. In the project, double-cl ick the AndroidManifest.xml file to open it in the package explorer.

Step 2. In the Manifest General Attributes, change the Package name to a unique name.

Step 3. Expand the res/values folder and dou-ble-click the strings.xml file.

Step 4. Change the value for app_name with the name of the magazine.

Step 5. (Optional) Perform steps 1–4 for each localization in your project.


14

7.2 Reader App Drawables

Reader App drawables are images with a general purpose such as the app icon.

icon.pngDifferent versions of this file exist:

�Low dpi. Reader App icon displayed in the Home Screen Editor. Location: res/drawable-ldpi.

�Medium dpi. Reader App icon displayed on the Homescreen. Location: res/drawable-mdpi.

� High dpi. Reader App icon displayed on the Homescreen.

Location: res/drawable-hdpi.

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

The launcher on the Android Honeycomb version (always) uses the hdpi version of the icon.png, even

on mdpi devices. Customers should therefore always cre-ate an ldpi, mdpi and hdpi version of their application icon.

7.3 Web Pages

Web pages can be used for displaying specific informa-tion to the user. The following types of information can be displayed:

�Custom information. For displaying custom information such as privacy information.

�Metrics information. For informing the user that the current device on which the magazine is viewed may not provide the best user experi-ence since the device does not match the size for which the magazine was designed.



15

7.3.1 Custom Information

Custom information such as privacy information can be displayed to the user in the form of a Custom Web page. This page is displayed when the Custom button in the Navigation bar or Action bar is tapped.

To make use of this feature, perform the following steps:

Step 1. Create a Web page containing the information to be displayed.

Step 2. (Optional) When the Web page needs to be included as part of the project, add it to the following folder:

�.../assets/

The URL will be build up as: file:///android�asset/<name of webpage>.html

Step 3. In the Eclips project, access the DMSettings file.

Step 3a. Make sure that the following but-ton is included:

�Navigation/ToolbarItems/item9 Custom Button

Step 3b. (Optional, only for external an Web page) Enter the URL to the external Web page in:

�Navigation/Custom Button URL

7.3.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.

To cater for such a scenario, 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.


16

Page scalingWhen 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, the Reader App will scale the page to make it fit the screen in a certain way.1

The scaling method used can be controlled by means of the following DMSettings option:

�Metrics/Fitting/Fit mode

Possible values:

�Fit width. (Default setting) On a device 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.

Pages are only scaled down, not up; pages which dimensions are less than

those of the device are kept at their original size.

�Fit screen. The page will be scaled down to fit the screen. If the aspect ratio (width versus height) of the screen is smaller 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).

Pages are only scaled down, not up; pages which dimensions are less than

those of the device are kept at their original size.

�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.


For notes about the functionality of the page fitting feature in relation to using specific DM Server plug-

ins, see chapter 6, Exporting Content – 3.1, Exporting and Page Scaling.


17

Displaying a messageThe Reader App can be set to verify the metrics of the device, and — if the required size is not met — to display a message to the user in the form of a Web page.

A default Web page is provided as part of the Eclips project:

�assets/devicewarning/warning.html

To enable this feature, perform the following steps:

Step 1. (Optional) Create a Web page contain-ing the information to be displayed by doing one of the following:

�Use the default Web page

�Create a new page, possibly based on the default page

Step 2. (Optional) Make the page available by doing one of the following:

�Replace the default Web page (make sure that the name is “warning.html”)

�Make the page available online

Step 3. In the Eclipse project, access the DMSettings file and set the following:

�Metrics/Check device metrics. Controls whether the metrics of the device are checked.

�Metrics/Device metrics warning URL. URL to the Web page to be dis-played. When left empty, the default Web page is used.

�Metrics/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)

�Metrics/Device height. The required height of the device. Default values are:


�Metrics/Device dpi. The dpi setting which the device runs in (so not the physi-cal dpi). Examples:

Samsung Galaxy: 240 dpi

Motorola Xoom: 160 dpi

For values of other devices, please refer to the documentation of the

manufacturer.


18

7.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, a message is displayed.

Setting the version numberThe minimum version is set in two locations:

�On the Content Delivery Platform: see appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.

�In the Reader App: edit the number in the DigiMag_ApplicationVersion section of the fol-lowing file:

�customer�app/src/com.woodwing.settings/DigiMagKioskSettings.java/ DigiMagKioskSettings

Localizing the messageTo localize this message, edit the following string in the Error Strings section of the strings.xml file:

�This issue requires a newer version of this Reader App. Please update.

7.5 Intent Settings

Intent settings are used to match certain functionality of the Reader App with specific content. For example, in order for the page containing the table of contents to appear when a user taps the TOC button in the Navigation bar, the Dossier in which the layout is stored should have its intent property set to TOC. A similar intent property (named Help) is used for linking the Help button to the Help page, containing instructions about how to use the Reader App.

Both intent properties are defined on Enterprise Server. However, if custom values are used, the corresponding values for the Reader App also need to be changed (else the functionality will break).

Changing the intent values can be done by means of the DMSettings.plist file:

�Intents/Help. Used for linking the page with Help instructions to the Help button in the Navigation bar.

�Intents/TOC. Used for linking the page con-taining the table of contents to the TOC button in the Navigation bar.


19

8. Navigation


�Story navigation vs page navigation �Navigation bar �Action bar �Flipview �Top Toolbar �Hotzones �Orientation lock






�To navigate within a story (from page to page), the user swipes vertically (up/down or down/up)


�To navigate from page to page, the user swipes horizontally (from left to right or right to left) using one finger

�To navigate from story to story, the user swipes horizontally (from left to right or right to left) using two fingers




To enable Page navigation, set the following option in the DMSettings.plist file to Yes:


To enable two-finger swipe (Page navigation only), set the following option in the DMSettings.plist

file to Yes:

�Navigation/Scroll sections with two finger swipe


20

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.

To enable the Page Scrubber, set the following option in the DMSettings.plist file to Yes:


8.2 Navigation Bar

The Navigation bar is used in the Android Reader App (Froyo) only. For the Android Reader App

(Honeycomb) an Action bar is used instead. For more information, see section 8.3 Action Bar.

The Navigation bar is used as a starting point for navigat-ing the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, Store, etc.) as well as to external content for instance by using the Newsfeed button.




�Drawables. The icons of the buttons.

�Visibility settings. Settings controlling the circumstances under which the Navigation bar is displayed or hidden.



21

8.2.1 Tap Area

By default, the Navigation bar appears when the user taps any part of the screen.2

The tap area can be limited to the bottom part or the top part of the screen by doing the following:


�Select the option Tap bottom to show toolbar.

�Select the option Tap top to show toolbar.

�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom and/or top area height value.

The Navigation bar now only appears when the user taps the defined area(s).


8.2.2 Items


�Magazine. For accessing the current maga-zine (if available).

�Buy. (Store/Library/Subscription projects only) For navigating to the Store.

�Library. (Store/Library/Subscription projects only) For navigating to the Library.






�Account. (Subscription Editions only) For bringing up an external page with subscription account details.

When included, this button is displayed at all times, but only enabled when the Store

is accessed.

�Custom button. For accessing a Web page with custom information such as privacy information.



The value of each item is linked to specific function-ality and should not be changed.


22

Removing/adding buttonsTo remove a button, do the following:

�Mac OS: Select the row and delete it.

�Windows: Modify the content by using a suitable XML editor.

To add a button, do the following:

�Mac OS: Right-clicking an item, choose Add Row from the context menu and entering the correct Value for that button.


Changing the orderTo rearrange the order in which the items appear in the Navigation bar do the following:

�Mac OS: Drag each key to its required position.

�Windows: Modify the order by using a suitable XML editor.

8.2.3 Drawables

The drawables that appear in the Navigation bar are stored in the res/drawable-nodpi and res/drawable-nodpi-v8 folders.



The Navigation bar has a 1-pixel high dark row at the top. When creating or modifying a button, 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 following drawables can be customized:


�accounticon.png. The icon for the Account button.

�accountselectedicon.png. The icon for the Account button in its selected state.

�bottombar.png. The background of the Navigation bar.

�customicon.png. The icon for the Custom button.

�customselectedicon.png. The icon for the Custom button in its selected state.

�feedicon.png. The icon for the Newsfeed button.





23

�feedselectedicon.png. The icon for the Newsfeed button in its selected state.

�flipviewicon.png. The icon for the Flipview button. (This button is normally named Contents.)

�flipviewselectedicon.png. The icon for the Flipview button in its selected state. (This button is normally named Contents.)

�helpicon.png. The icon for the Help button.

�helpselectedicon.png. The icon for the Help button in its selected state.

�homeicon.png. The icon for the Home but-ton, linking to the cover of the magazine.

�homeselectedicon.png. The icon for the Home button in its selected state.

A bottombar B magazine�icon C storeselectedicon D libraryicon E homeicon F tocicon G helpicon H flipviewicon I feedicon J accounticon K customicon

BA C D E F G IH J K

Figure 8.2.3. The Navigation bar drawables

�libraryicon.png. The icon for the Library button.

�libraryselectedicon.png. The icon for the Library button in its selected state.

�magazine_icon.png. The icon for accessing the current magazine.

�magazine_selected_icon.png. The icon for accessing the current magazine in its selected state.

�storeicon.png. The icon for the Store button.

�storeselectedicon.png. The icon for the Store button in its selected state.

�tocicon.png. The icon for the Contents button.

�tocselectedicon.png. The icon for the Contents button in its selected state.


24

8.2.4 Visibility Settings

Show toolbar on opening issueWhen opening a magazine issue, the following DMSetting controls whether the Navigation bar (as well as the top Toolbar, when enabled) will be automatically displayed:

�Navigation/Show toolbar on opening issue

Always show toolbarsThe following DMSetting controls whether the Navigation bar (as well as the top Toolbar, when enabled) will always be displayed, without the user being able to hide them:

�Navigation/Always show toolbars

8.3 Action Bar

The Action bar is used in the Android Reader App v1.x (Honeycomb) only. For the Android Reader App

v1.x (Froyo) a Navigation bar and top Toolbar are used instead. For more information, see section 8.2 Navigation Bar and section 8.5 Top Toolbar.

The Action bar is used as a starting point for navigating the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, Store, etc.) as well as to external content for instance by using the Newsfeed button.

Compared to the Android Reader App v1.x (Froyo), the Action bar can be seen as a combined Navigation bar and top Toolbar.

Customizing the Action bar can be done by changing the following:



The left-hand side of the Action bar is used for displaying the following “actions”:

Store, Library, Magazine, Newsfeed, and Custom button. The remaining buttons are dis-played on the right-hand side of the Action bar.

�Drawables. The icons of the buttons.

�Text. The text for the commands in the Action bar menu.




25

8.3.1 Tap Area

By default, the Action bar appears when the user taps any part of the screen.3

The tap area can be limited to the top part of the screen by doing the following:



�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the top area height value.

The Action bar now only appears when the user taps the defined area.


8.3.2 Items

The Action bar can hold the following buttons:

Items which always appear on the left side of the Action bar:

�Buy. (Store/Library/Subscription projects only) For accessing the Store.

�Library. (Store/Library/Subscription projects only) For accessing the Library.

�Magazine. (Store/Library/Subscription proj-ects only) Appears when either the Store or Library is accessed and when an issue is open. It is used for navigating back to the opened issue.


�Custom button. For accessing a Web page with custom information such as privacy information.

Items which always appear on the right side of the Action bar (possibly in the menu):





�Account. (Subscription Editions only) For bringing up an external page with subscription account details.

When included, this button is only dis-played when the Store is accessed.


26

�Back/Forward buttons. (These are always displayed on the right-hand side of the Action bar, never in the menu.) For navigating to previ-ously visited pages.




When one or both of the Back/Forward items are enabled then these are always displayed, regard-

less of the value set in the ' Maximum number of toolbar items' setting (see below).

An additional button is the Menu button, which automatically appears when there are 6 or more

actions defined. When there are less actions defined, the Menu button is not displayed. (This functionality is part of the operating system and cannot be controlled.)

Setting the maximum number of items dis-played

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

A maximum number of 6 items can be set to appear 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, regard-

less of the value set in the ' Maximum number of toolbar items' setting (see below).

Removing/adding buttonsTo remove a button, open the DMSettings file and do the following:

�Mac OS: Select the row and delete it.


To add a button, do the following:

�Mac OS: Right-click an item, choose Add Row from the context menu and enter the correct Value for that button.


Changing the orderTo 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 position.

�Windows: Modify the order by using a suitable XML editor.


27

8.3.3 Drawables

The drawables that appear in the Action bar are stored in the res/drawable-nodpi folder.



The current state of a button and the availability of the functionality behind the button is indicated in the follow-ing ways:

Action buttons on the left-hand side only: �The button is unselected: a narrow line is

shown at the bottom of the button.

�The button is selected: a thick line is shown at the bottom of the button.

�The button is pressed: the whole back-ground of the button is colored.

Buttons on the right-hand side only: �The button is unselected: no line at the

bottom of the button, nor a background color is shown.

All buttons: �The functionality is available: the icon is

colored white.

�The functionality is not available: the icon is colored gray.

For this purpose, two images are always shown simulta-neously for each button:

�Icon. Depicts the purpose of the button and the availability of the function behind the button. The names of these drawables all contain the word “icon”.

�Status. Depicts the button state (unselected, selected or pressed). The names of these draw-ables all start with “action�bar”.

Any buttons that don’t fit in the Action bar can be accessed via the Action bar menu (also referred to as the “Overflow”).

The following drawables can be customized (in alphabeti-cal order, see figure on the next page):

The icon for the Menu button is part of the operating system and cannot be customized.


�accountdisabledicon.png. The icon for the Account button in its disabled state.

�accounticon.png. The icon for the Account button.

�action_bar_action_overflow_pressed_background.png. Background image for a pressed command in the Action bar menu.

�action_bar_action_pressed_back-ground.png. Background image for a pressed button in the Action bar.

�action_bar_tab_selected_pressed.png. Background image for a selected and pressed button in the Action bar.

�action_bar_tab_selected.png. Background image for the selected action in the Action bar.





28

�action_bar_tab_unselected_pressed.png. Background image for an unselected and pressed button in the Action bar.

�action_bar_tab_unselected.png. Background image for unselected buttons in the Action bar.

�backdisabledicon.png. The icon for the Back button in its disabled state.

�backicon.png. The icon for the Back button.

�customicon.png. The icon for the Custom button.

�feedicon.png. The icon for the Newsfeed button.

�flipviewicon.png. The icon for the Flipview button. (This button is normally named Contents.)

�forwarddisabledicon.png. The icon for the Forward button in its disabled state.

�forwardicon.png. The icon for the Forward button.

�helpicon.png. The icon for the Help button.

�homeicon.png. The icon for the Home but-ton, linking to the cover of the magazine.

�libraryicon.png. The icon for the Library button.

�magazineicon.png. The icon for the Magazine button. (This button is normally named Issue.)

�popup_background.9.png. Background for the Action bar menu, including the top green line.

This drawable is also used for the Filter lists in the Library.

�storeicon.png. The icon for the Store button.

�tocicon.png. The icon for the Contents button.


29

A storeicon B libraryicon C magazineicon D feedicon E customicon F homeicon G flipviewicon

H backicon I forwarddisabledicon J action�bar�tab�unselected�pressed K action�bar�tab�unselected L action�bar�tab�selected M action�bar�action�overflow�pressed�backgroundN popup�background.9

Figure 8.3.3. The Action bar drawables

BA C GFD E H I

M

NKJ L


30

8.3.4 Text

When a button is not displayed in the Action bar, it can be accessed through the Action bar menu. Items in this menu appear as text only.

The text for these commands can be localized by chang-ing the strings beginning with “action�” in the strings.xml file.

For more information about changing text, see section 5.2 Text.

8.3.5 Visibility

When opening a magazine issue, the following DMSetting controls whether the Action bar will be automatically displayed:


Always show toolbarsThe following DMSetting controls whether the Action bar will always be displayed, without the user being able to hide it:



31

8.4 Flipview

The Flipview appears when the user taps the Contents button in the Navigation bar or Action bar.

The Flipview can also be made to appear automati-cally when the Navigation bar/Action bar is

displayed. This functionality can be set through the fol-lowing DMSetting:

�Flipview/ Show flipview on show toolbar

Figure 8.4. The Flipview components of the Froyo version (top) and Honeycomb version (bottom)

A Flipview Header B Story Viewer / Page Viewer C Page scrubber D Section Viewer E Close button

B

A

CD

B

A

C

DE

E

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.


32

8.4.1 Header

Changing its appearanceChanging the appearance of the Flipview Header can be done as follows:

�Background . Background image. Customizing it can be done by changing the following image:

�flipviewbackground.png

This image is also used as the back-ground for the Story Viewer / Page Viewer.

�Flipview title. For displaying the title of the magazine. This can be modified by changing the following string in the strings.xml file:

�flipviewer�header�title

�Issue description. For displaying issue information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server.

�Close button. (Froyo version only) For closing the Flipview. Changing the look of this button can be done by modifying the following asset:

�flipviewclosebutton.png

Figure 8.4.1. The Flipview Header components

A Flipview title B flipviewbackground C Issue description D fliipviewclosebutton (Froyo version only)

A B C D

Drawables that appear in the Flipview header are stored in the following locations:

�Generic (both Froyo and Honeycomb): res/drawable-nodpi

�Froyo-specific:res/drawables-nodpi-v8

�Honeycomb-specific:res/drawables-nodpi-v11

For an overview of the exact dimensions of the drawables, see appendix C, Image

Dimensions.

Showing or hiding the Flipview header contentThe Flipview Header components can be hidden by dese-lecting the following option in the DMSettings.plist file:

�Flipview/Show flipview header


33

8.4.2 Story Viewer / Page Viewer

Changing its appearanceChanging the appearance of the Story Viewer / Page Viewer can be done as follows:

�Background . Background image. Customizing it can be done by changing the following image:

�flipviewbackground.png

This image is also used as the back-ground for the Flipview Header.

Thumbnail SizeThe size of the thumbnails in the Story Viewer / Page Viewer can be controlled via the following settings in the DMSettings.plist file:

�Flipview/Thumbs/Minimum page thumb height

�Flipview/Thumbs/Maximum page thumb height

To change the thumbnail size, enter the required size in pixels for each setting.

Thumbnail AwarenessBy default, the thumbnails in the Story Viewer / Page Viewer are shown in landscape orientation, even when the device is rotated to portrait orientation.

Matching the orientation of the thumbnails to the orienta-tion of the device can be done by enabling the following setting in the DMSettings.plist file of the code project:

�Flipview/Thumbs/Make thumbs orientation aware

With this setting enabled, 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.

Top Margin(Froyo version only) The margin between the thumbnails and the Flipview Header can be controlled by the following setting in the DMSettings.plist file:

�Flipview/Margins/Pages top margin in Flipview


Margins between thumbnailsThe margins between the thumbnails can be controlled by the following settings in the DMSettings.plist file:

�Froyo version �Flipview/Margins/Flipview thumb

margin. Controls the margin between each thumbnail.

�Honeycomb version �Flipview/Margins/Flipview page

thumb margin. Controls the margin between the pages.

�Flipview/Margins/Flipview article thumb margin. Controls the margin between articles (stories).



34

Story BulletsA story bullet can be shown in front of each story title.

Figure 8.4.2b. The story bullet in the Flipview

A

A Story bullet

Story bullets are displayed by default and can be hidden by deselecting the following option in the DMSettings.plist file:

�Flipview/Show story bullet

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


Story TitleFor the first page of each story, the Story Title is shown.


When text exceeds the width of the page thumbnail, the text is elipsized.

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)


A

B


35

Story DescriptionFor 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


When text exceeds the width of the page thumbnail, the text is elipsized.

A

B

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)

A Story Description property B Story Description displayed in Reader


36

Page numberBelow each page preview, the page number can be displayed.

This feature is controlled through the following option in the DMSettings.plist file:

�Flipview/Show page number

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

A Page numberA

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.

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

A Page scrubberA

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



37

Changing the appearanceChanging 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):


�pagescrubberbackground.png. The back-ground image behind the Page Scrubber.

�pagescrubberbutton.png. The Page Scrubber button.

�pagescrubbertrackleft.9.png. The image to the left of the Page Scrubber button. 10 Pixels of each side will remain the same, but the mid-dle 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.

8.4.4 Section Viewer

Display/hideThe Section Viewer can be displayed or hidden through the following DMSetting:

�Flipview/Show section labels

Section titleThe 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 Stat ion or Smar t Connect ion for InDes ign.

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)


A

B


38

Changing the appearanceChanging 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):


�flipviewsectionbackground.png. The background of the Section bar.

�flipviewselectedsectionbutton.png. The image of a selected Section.

�flipview_section_background_unselected.png. The background image behind unselected Sections.

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

A flipviewsectionbackground.png B flipviewselectedsectionbutton.png C flipview�section�background�unselected.png

A B C

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.

Changing the appearanceChanging the appearance of the Close button can be done by modifying the following drawables:

�flipview_close_background.png. The 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-nodpi-v11 folder.


Figure 8.4.5. The Close button drawables

A B

A flipview�close�icon B flipview�close�background


39

Changing the textChanging 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.

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

A


40

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.




�Tap area. The area which the user should tap in order to display the top Toolbar.

�Items. The number of buttons and images that appear in the top Toolbar.

�Drawables. The icons of the buttons and images.


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:


8.5.2 Visibility

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


Always show toolbarsThe 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:



41

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:


�Select the option Tap bottom to show toolbar.


�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom or top area height value.


8.5.4 Items

The top Toolbar holds the following items:

�Back/Forward buttons. For navigating to previously visited pages

Figure 8.5.4. The components of the top Toolbar

A B

A Back button B Forward button

The inclusion of these items is controlled through the fol-lowing DMSetting:



42

8.5.5 Drawables


�backicon.png. The icon for the Back button image.

�backselectedicon.png. The icon for the Back button image in its selected state.

�forwardicon.png. The icon for the Forward button image.

�forwardselectedicon.png. The icon for the Back button image in its selected state.

�topbar.png. The background of the top Toolbar (also used in the Library).

These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.




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.

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)

�Bottom or top area: for bringing up the Navigation bar.

�Right area: for navigating to the next page (or the previous page when the Reader App is set to Right-to-left mode)





43

Each area can be controlled by the following options in the DMSettings.plist file:

�Hotzones/Tap bottom to show toolbar. Activates the bottom Hotzone.

�Hotzones/Tap top to show toolbar. Activates the top Hotzone.

�Hotzones/Tap sides to navigate. Activates the Hotzones to the left and right of the screen.

�Hotzones/Touch areas. Defines the height or width of the different Hotzones.

Hotzones overlaying interactive objectsWhen interactive objects (such as Slide Shows, vid-eos, 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

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 land-scape 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 differ-ently 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

Possible values:

�Landscape. For displaying only pages in landscape orientation.

�Portrait. For displaying only pages in portrait orientation.

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


44

Fullscreen object orientation lockWhen 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 when locked

Video orientation lockVideos 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

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.

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



45

9.1 Communication With the Store

Communication with the Store is done by configuring the DMSettings file and the DigiMagKioskSettings file.

DMSettings file The DMSettings file handles the communication between the Reader App and the Store. The file can be found in the following location of the project:

�customer�app/assets/DMSettings.plist

The following DMSettings can be configured:

�Store/HTML Store URL. The URL point-ing to index-android.html of the HTML Store. Possible values:

�Blank: the packaged HTML store as part of the Reader App build

�URL: a URL to an externally hosted HTML Store

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

DigiMagKioskSettings FileThe DigiMagKioskSettings file handles the communica-tion with the Content Delivery Platform. The file can be found in the following location of the project:

�customer�app/src/com.woodwing.settings

The following values need to be set:

�DigiMagKioskLibary_URL. The URL to connect to the Kiosk Server.

�DigiMagKioskLibary_ProductID. The product name as defined on the Kiosk Server.

�DigiMagKioskLibary_SecretKey. The secret key as defined on the Kiosk Server.


46

9.2 Reader App Components

For using the Store in the Reader App, the Store Filter, buttons, and strings can be customized.

Store FilterThe Store Filter can be controlled by the following option in the DMSettings file:

�Store/Enable Filter. Enables or disables the Store Filter.

The following string can be customized for the Store Filter:

�All Issues. The value in the Store Filter for choosing all issues.

The values shown in the Filter itself are defined on the Content Delivery Platform.

For more information, see appendix F, Using the Content Delivery Platform.

ButtonsThe following buttons can be customized:

�stretchablestorebutton.9.png. Used for the Log In button as the button in its available state.

�stretchablestorebutton_disabled.9.png. Used for the Log In button as the button in its non-available state.


47

StringsThe following strings relating to the in app purchasing functionality can be modified:

Table 9.2. In app purchasing stringsKey Value Description

store_androidmarket_item_purchased \'%1s\' purchased.

Displayed when an issue is purchased. “%1s” can be used to refer to the issue name.

store_androidmarket_item_refunded \'%1s\' refunded.

Displayed when an issue is refunded. “%1s” can be used to refer to the issue name.

store_androidmarket_item_unavailable

\'%1s\' appears to be unavailable in the Android Market.

Displayed when the Android Market cannot find the requested item in the application's product list. This can happen if the product ID is misspelled in your pur-chase request or if an item is unpublished in the application's product list. “%1s” can be used to refer to the issue name.

store_androidmarket_verifica-tion_failed Purchase verification failed.

Displayed when purchase information was received but when the Content Delivery Server failed to verify it.

store_androidmarket_pur-chase_canceled_by_user

You canceled the purchase of\'%1s\'.

Displayed when the user tapped Cancel on the purchase screen. “%1s” can be used to refer to the issue name.

store_androidmarket_pur-chase_canceled_by_server

Purchase of \'%1s\' canceled by server.

Displayed when the charge for the item failed on the Android Market server. “%1s” can be used to refer to the issue name.

store_androidmarket_pur-chase_submitted"

Your purchase of \'%1s\' has been submitted to the Android Market.

Displayed when the purchase order was successfully sent to the Android Market server. “%1s” can be used to refer to the issue name.

store_androidmarket_mar-ket_unavailable

The Android Market is currently unavailable.

Displayed when the network connection is down and thus no connection to the Android Market server can be established.

(Continued on next page)


48

Table 9.2. In-app purchasing strings (continued)Key Value Description

store_androidmarket_unavail-able

In-app Billing information is not available.

Displayed when the billing API version used is not recognized by the market application and that the market applica-tion may have to be updated. 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).

store_androidmarket_pur-chase_error

Error occurred during the pur-chase of \'%1s \'

Displayed when the com.android.vending.BILLING permission is not declared in the manifest. Can also indicate that an appli-cation is not properly signed. “%1s” can be used to refer to the issue name.

store_androidmarket_restor-ing_transactions Restoring transactions. Displayed when a restore transactions

request was successfully sent to the server.store_androidmarket_restor-ing_transactions_error

An error occurred while restoring transactions.

Displayed when an error occurred during a restore transactions request.


49

10. 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).

The Library functionality is only available in the Pro, Framework, and Subscription projects of the

Reader App.

Customizing the Library can be done by changing the following:

�Subscription sign-in window

�Library


10.1 Subscription Sign-In Window

DrawablesThe following drawables can be customized for the Subscription Sign-In window (see example on the fol-lowing pages):

�checkbox.png. The image used for the check box in its cleared state.

�checkboxchecked.png. The image used for the check box in its checked state.

�closebutton.png. The image used for the close button.

�headerbackground.png. The background of the header.

�logindialogbackground.png. The back-ground of the Subscription Sign In window.

�stretchablerectbutton.9.png. The I Forgot My Password button.

�textfield_activated_holo_light.9.png. Image. Image

�textfield_default_holo_light.9.png. Image used to indicate that the text field is active (cur-sor is placed in the field).

�textfield_disabled_focused_holo_light.9.png. Image used to indicate that the text field is not active (cursor is not placed in the field).



50

TextThe following strings can be customized for the Library Log In window:

�Username. The label in the user name box.

�Password. The label in the password box.

�Remember me. The label for the Remember Me check box.

�Submit. The label for the Submit button.

�I forgot my password. The label for the I Forgot My Password button.

�Privacy. The label for the Privacy link.

�License Agreement. The label for the License Agreement link.

�Please sign in to your Android Edition Account. The text used in the Sign In header.


51

Figure 10.1. The Subscription sign in window

A headerbackground B closebutton C checkbox D stretchablestorebutton.9 E stretchablerectbutton.9 F logindialogbackground

BA

C

D E

F


52

10.2 Library

SettingsThe following DMSettings can be changed for the Library:

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

�Enable login button. Enables the Log In/Log Out button in the Library.

�Enable library filter. (Honeycomb only) Enables the Library filter in the Library.

�Enable library segment filter. (Honeycomb only) Enables the Library Segment filter available in the Library.

DrawablesThe following drawables can be customized for the Library (see example on the following pages):

�librarydownload.png. The image used for the Download button.

�library_login_icon.png. (Honeycomb only) The image used for the Login button.

�library_logout_icon.png. (Honeycomb only) The image used for the Logout button.

�librarydownloadpause.png. The image used for the download Pause button.

�librarydownloadrefresh.png. The image used for the download Resume button.

�library_shelf_issue_drop_shadow.png. (Honeycomb only) The image used for the drop-shadow behind the issue preview.

�library_shelf_landscape.png. (Honeycomb only) The image used for the Library shelfs when the device is held in landscape orientation.

�library_shelf_portrait.png. (Honeycomb only) The image used for the Library shelfs when the device is held in portrait orientation.

�popup_background.9.png. Background for the Filter lists.

This drawable is also used for the Action bar menu.

These drawables are stored in the res/drawable-nodpi and res/drawable-nodpi-v11 folders.



53

TextThe following strings can be customized for the Library:

�Installing. The installing label.

�Issue options. Text for the context menu which is activated by “tap and hold” on an issue.

�Delete issue. Command in the context menu when deleting an issue from the Library.

�Sign In. (Froyo only) The label for the Sign In button.

�Sign Out. (Froyo only) The label for the Sign Out button.

The following strings can be customized for the Library Filter:

�All Segments. (Honeycomb only) The value in the Segment Filter for choosing all Segments.

�All issues. (Honeycomb only) The value in the Library Filter for choosing all issues.

The values shown in the Filter itself are defined on the Content Delivery Platform. For more information,

see appendix F, Using the Content Delivery Platform.


54

Figure 10.2a. The Library view (Froyo version)

A storeheader B stretchablestorebutton.9 C topbar

B

A

B

C


55

Figure 10.2b. The Library view (Honeycomb version)

A library�top�bar B library�shelf�landscape.png C library�shelf�issue�drop�shadow D popup�background.9

A

B

B

B

C

C

D


56



�Audio �Custom objects �Downloading methods �Hotzones �In-app Billing �Newsfeeds �“No internet connection” indicators �Scrolling indicators �Slide Shows �Text View �Video �Web Elements


11.1 Audio

For the playback of audio, the following features can be customized:

�Overlay drawables

�Audio settings

�Embedded audio controls



57

11.1.1 Overlay Drawables

Overlay drawables are icons that appear over other objects to indicate their intention or state. For audio, icons are available to indicate that an audio file can be played or stopped.

A audioplayenabledicon

Figure 11.1.1. The audio play enabled icon

A

The following drawables can be customized.

�audioplaydisabledicon.png. The audio icon when a streamed audio file is not available or when no internet connection is available.

�audioplayenabledicon.png. The audio icon shown when the audio file is being played.

�audiostopenabledicon.png. The audio icon when the audio file is being played.




The audio overlay drawables are stored in the res/draw-able-nodpi folder.

11.1.2 Audio Settings

Audio keeps playing while swiping from page to page within the same articleAudio 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 sub-sequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.

This functionality is controlled by the following DMSetting:

�Navigation/Continue audio within article





58

11.1.3 Embedded Audio Controls

By default, the controls for an embedded audio file are always displayed. If needed, the controls can be hidden for each individually placed audio file.

To hide the controls for a placed audio file, edit the exported magazine.xml file as follows:



Step 3. In the audio id section, add the follow-ing 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.mp3</url><autoplay>false</autoplay><backgroundaudio>true</backgroundaudio>

</audio></object>

5 The controls are also shown when the backgroundaudio prop-erty is not included

11.2 Custom Objects

Objects with custom, 3rd-party functionality can be included in the magazine. The functionality of the element is completely upon the developer; it can be an extra user interface element, a list connecting to a database, a 3D object, etc.

The creation of a Custom Object on a layout starts by creating a Web Element; this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout.

Custom objects are added to the Digital Magazine project in Eclipse by doing the following:

Step 1. Cre a te a new c l a s s i n the Reader App. This new class implements ExternalDMObjectInterface

Step 2. I m p l e m e n t t h e E x t e r n a l - DMObjectInterface.

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).

Step 3. Create a plist resource file named DMCustomObjects.plist.

Step 4. In the created plist file, create an entry with the following settings:

�Value: your newly created class name (this should be the full package name),

�Key: a string you can use to refer to your class.

Step 5. In the magazine.xml file, create an entry for your custom object and set classtype to the key of the entry in the plist file.




59

11.3 Downloading Methods

Downloading of magazines can be offered in one of two ways:

�Non-progressive

�Progressive

Each is described in detail below.

11.3.1 Non-progressive Download Method

For the non-progressive download method, the following can be configured:

�Settings

�Drawables


Auto open magazineAs soon as the download and installation process is complete, the issue or Segment can be made to

open automatically.

The following conditions exist:

�The Library must be viewed at the time the download is completed.

�When the download is performed in the back-ground (for instance when the app is minimized or when another issue is being viewed), the issue will not automatically open.

To have an issue automatically opened, set the following DMSetting:


DrawablesThe following drawables can be customized for the pro-gressive download method:

�downloadbackground.9png. The back-ground of the download progress bar.

�downloadleft_disabled.9png. The back-ground of the download progress bar in its disabled state.

�downloadleft.9.png. The download prog-ress bar.


60

�librarydownload.png. The Start Download button.

�librarydownloadpause.png. The Pause Download button.

�librarydownloadrefresh.png. The Resume Download button.


11.3.2 Progressive Download Method

For the progressive download method, the following can be modified:

�Drawables

�Settings

�Strings


DrawablesThe following drawables can be customized for the pro-gressive download method:

�downloadbackground.9png. The back-ground of the download progress bar.

�downloadleft_disabled.9png. The back-ground of the download progress bar in its disabled state.

�downloadleft.9.png. The download prog-ress bar.

�librarydownload.png. The Start Download button.

�librarydownloadpause.png. The Pause Download button.

�librarydownloadrefresh.png. The Resume Download button.



61

SettingsAs soon as the issue or Segment is readable during the download process, it can be made to open automatically.




To have an issue automatically opened, set the following DMSetting:


StringsThe following strings can be modified/localized for the progressive download method:

<string name="progressive_download_waiting">Waiting...</string><string name="progressive_download_downloading">Downloading...</string><string name="progressive_download_connection_lost">The connection to the store has been lost.\nPlease tap Reconnect to restore the connection.</string><string name="progressive_download_no_internet">No Internet connection</string><string name="error_progdl_corrupt_plist">The issue download is corrupt, unable to continue download.</string>


62

11.4 In-App Billing

The Google In-app Billing framework can be used for offering magazines as separate purchases instead of via a subscription.

This feature can only be used in Reader App proj-ects which have Store functionality, namely the Pro

and Subscriptions frameworks.

Making use of this feature involves performing the fol-lowing steps:

Step 1. Add the BASE64 encoded RSA key of the publishers merchant account to the Content Delivery Platform by doing the following:

Step 1a. Log in to https://market.android.com/publish/Home.

Step 1b. Click Edit Profile.

Step 1c. Copy the BASE64 encoded pub-lic key.

Step 1d. 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, Configuring Reader Apps.

Step 2. (Optional) Modify and/or localize the in-app billing related software strings in the Reader App as explained in section 9. The Store.

https://market.android.com/publish/Home

https://market.android.com/publish/Home


63

11.5 Newsfeeds

When the user taps the Newsfeed button in the Navigation bar, the Newsfeed page appears as an overlay on top of the page (Froyo) or as an embedded page. Its content is taken from the Internet.

Figure 11.5. On Froyo, the Newsfeed page is displayed as an overlay on top of the magazine

A Close button

A

Changing the appearance(Froyo only) The single customizable component of the Newsfeed feature is the Close button. Changing its appearance can be done by modifying its asset (located in the res/drawable-nodpi folder):

�closebuttondefaultstate.png


Newsfeed URL The URL of the Newsfeed is derived from the following option in the DMSettings.plist file:

�Navigation/Newsfeed URL


64

11.6 No Internet Connection Indicators

When no internet connection is available, an indication is given to the user by a bar in the top of the frame in which the content is to be shown. Locations in which this indica-tion can appear are for example:

�The Store �Frames with streaming video �Frames with streaming audio �Newsfeed windows �Widgets �Web Elements

The indicator consists of a background image and an image containing the text. The following drawables can be customized:

�nointernetconnectionbackground.png. Background image of the bar.

�nointernetconnectionlabel.png. The text displayed in the bar.

A nointernetconnectionbackground B nointernetconnectionlabel

Figure 11.6. The No Internet Connection Drawables

A B

The No Internet Connection drawables are stored in the res/drawable-nodpi folder.



65

11.7 Scrolling Indicators

Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains

scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and right-hand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded.

Figure 11.7. A scrolling indicator in the form of a faded edge indicates to the user that the content of the frame can be scrolled

A

A

A Scrolling indicator

To enable Scrolling Indicators for Scrollable Areas, enable the following DMSetting:

�Colors/ Enable native scrolling indicators


66

11.8 Slide Shows

For Slide Shows, overlay drawables can be customized: icons that appear over other objects to indicate their intention or state. For Slide Shows, an icon is available to indicate that the image on the page is in fact a Slide Show. This icon is positioned in the lower left-hand corner of the image.

A slideshowicon

A

Figure 11.5. The Slide Show icon

The Slide Show drawable is stored in the res/drawable-nodpi folder.

The drawable to customize is:

�slideshowicon.png. The overlay shown in the bottom left corner of a Slide Show.

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.


11.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. These magazines could contain Text View functionality, in which the page is shown as a HTML page, allowing the user to adjust the font size.

Because the Android Reader App does not support the Text View feature, an image is shown instead. This image can be customized as required.

The image can be found in the following location:

�res/drawable-nodpi/textview�mode�not�supported.9.png

These 1-pixel black images are 9-patch images, 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. Change these dimensions as required.





67

11.10 Video

For the video functionality, the following can be customized:

�Overlay drawables

�Video Player drawables

�Hiding embedded video controls



68

11.10.1 Overlay Drawables

Overlay drawables are icons that appear over other objects to indicate their intention or state. For videos, 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.

A

A videoDisabledIcon B videoDEnabledIcon

B

Figure 11.10.1. The video disabled and enabled icons

Overlay drawables are stored in the res/drawable-nodpi folder.



�videodisabledicon.png. The overlay shown on top of a video when it is not possible to play

the video, for example when there is no internet connection available to play a streaming video.

�videoenabledicon.png. The overlay shown on top of a video when the video is available but has not started yet.


69

11.10.2 Video Player Drawables

Video player drawables are icons that appear as the con-trols for controlling the video playback.

Video player drawables are stored in the These drawables are stored in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.



�audiocontrolsliderbutton.png. The button of the video scrubber.

�downloadbackground.9.png. The back-ground of the video scrubber to the right of the scrubber button (indicates the amount of video remaining).

�downloadbackleft.9.png. The background of the video scrubber to the left of the scrubber button (indicates the amount of video which has played).

�maximize.png. The icon used for viewing the video in fullscreen mode.

�minimize.png. The icon used for taking the video out of fullscreen mode.

�next.png. The icon used for forwarding the video.

�pause.png. The icon used for pausing the video.

�play.png. The icon used for playing the video.

�prev.png. The icon used for reversing the video.

Figure 11.10.2. The video control drawables

A B D FC E G

A prev B downloadbackleft.9 C pause D audio-controlsliderbutton E next F downloadbackground G maximize


70

11.11 Hiding Embedded Video Controls

The controls for an embedded video can be hidden so that they don’t appear on the page. This can be con-trolled for each placed video individually. The user can control the playback of the video by taking the video into fullscreen mode.

To hide the controls for a placed video, the exported magazine.xml file needs to be edited as follows:


Step 2. Locate the created video object by searching for <type>movie</type>.


<moviecontrols>false</moviecontrols>

Possible values: �true: controls will be shown6

�false: controls will be hidden

(continues on next page)

6 The controls are also shown when the moviecontrols property is not included

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.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 con-trols will be shown, else the user would not be able to leave fullscreen mode.


71

11.12 Web Elements

When a Web Element is displayed as a pop-up, the window in which the Element is displayed contains the following customizable drawables:

�back_white.png. The Back button in its available state.

�closebuttondefaultstate.png. The button to close the window with.

Figure 11.12. The Web Elements drawables

A B

A back�grey B closebuttondefaultstate

These drawables are stored in the res/drawable-nodpi folder.


253

10

253Andro

id

This chapter discusses the process of building the Android Reader App using Eclipse.

1. Universal Builds

The Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same

app, 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.2).





�Any Honeycomb-specific drawables are located in the drawable-nodpi-v11 folder.

�Any Froyo-specific drawables are located in the drawable-nodpi-v8 folder.


Building the Android Reader App

Chapter 10 Building the Android Reader App

254Andro

id

2. Preparation

Before being able to build a Reader App using Eclipse, the following preparation steps are required:

�Preparing Eclipse

�Preparing a Reader App without Store functionality

�Prepar ing a Reader App with Store functionality


2.1 Eclipse

Before working with the provided Reader App projects in Eclipse, make sure to have a fully working workspace set up for developing Android apps in Eclipse.

For instructions about installing the Android SDK and steps for setting up your environment, see http://devel-oper.android.com/sdk/installing.html.

http://developer.android.com/sdk/installing.htm

http://developer.android.com/sdk/installing.htm


255Andro

id

2.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), the magazine that was exported from Content Station needs to be merged with the project. To do this, proceed as follows:

Step 1. Import the Basic or Standard project into your workspace.

Step 2. Drag the exported magazine.xml file together with the images folder into the follow-ing folder in Eclipse:

�customer�app/assets/magazine

Step 3. Build the project. (See section 3. Building.)

2.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. For this purpose, pertinent information needs to be included in the final build of the Reader App, and the Reader App needs to be registered on the Content Delivery Platform. To achieve this, perform the following steps:

Step 1. Send an e-mai l to [email protected] 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). When processed, you will be sent the relevant settings required for inclusion in the build:




Step 2. Import the Pro or Subscription proj-ect into your workspace.

Step 3. Use the set t ings prov ided by WoodWing for building your Reader App. (See section 2. Building.)


256Andro

id

3. Building

In order to build the Reader App, perform the following steps:

Step 1. (Optional) When building the Reader App with Store functionality, enter the details received from WoodWing (see section 2.3 Reader App With Store Functionality) in the Eclipse project as outlined in chapter 9, Customizing the Android Reader App – section 9.1 Communication With the Store.

Step 2. From the Run menu, choose Run.

The Run As dialog box appears.

Step 3. Choose Android Application from the list.

Step 4. A binary .apk file will be generated in the following location:

�<project folder>/bin

257

11

257HTML5

Customizing the Reader App is important when you want to achieve any of the following:




In this chapter you will learn all about customizing the HTML5 Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The fol-lowing main customization areas are defined:


�Navigation


Customizing the HTML5 Reader App

Chapter 11 Customizing the HTML5 Reader App

258HTML5

1. Required Tools


�CSS editor. For editing CSS files. Use your favorite editor for this task.

�Image editor. For editing images. Use your favorite editor for this task.

�Config files editor. For editing configuration files. Use your favorite editor for this task, such as an XML editor or plain-text editor.

2. Project Files

Customization of the HTML5 Reader App is achieved by editing various types of files.

The following files can be edited:

�CSS files. Used for changing the appearance of the Reader App in the form of background colors, text, 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.

�activeelement.css. Used for controlling functionality related to Active Elements.

�audio.css. Used for controlling function-ality related to audio.

�base.css. Used for controlling the gen-eral appearance and functionality of the Reader App.

�config.css. This file is reserved for future use.

�flipview.css. Used for controlling func-tionality related to the Flipview.

�hotspot.css. Used for controlling func-tionality related to Hotspots.

�navigator.css. Used for controlling functionality related to the Story and Page Navigators.

�scrollarea-images.css. Used for con-trolling the scrollbars of Scrollable Area’s.


259HTML5

�slider.css. Used for controlling func-tionality related to the Page Scrubber in the Flipview.

�slideshow.css. Used for controlling functionality related to Slide Shows.

�toolbar.css. Used for controlling the Navigation bar and top Toolbar.

�video.css. Used for controlling function-ality related to video.

�weblink.css. Used for controlling func-tionality related to Web Links.

�Images. Used for changing the appearance of the Reader App in the form of buttons, icons, etc. All images are located in the reader/themes/default/img folder.

�Configuration files. Used for changing the functionality of the Reader App:

�DMSettings.plist. Located in the reader/config folder



�Images. Interface components such as but-tons, icons, logos and headers.

�Colors. The color of text and backgrounds.



For some features, making changes in only one area will be sufficient, whereas other features require changes in multiple places.


260HTML5

3.1 Images

Images are user interface components such as buttons, icons and headers. Each of these images can be easily replaced by your own images.


�Renaming images is not allowed since the 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, with the exception of the loader.gif file and some images of the Navigation Zones which are in jpeg format.

Various images are available as PDF files which can be customized by using Illustrator and subsequently

saved 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.

Exactly which images can be customized per feature is explained in the remainder of this chapter.

3.2 Colors

Colors for objects and text are controlled via CSS files. Detailed information about the colors that can be changed or each feature is provided in the remainder of this chapter.




261HTML5

3.3 Text

Limited resources are available for changing the text which appears in the Reader App. The text that can be changed originates from various sources, and can there-fore be changed by different means:

�Images. Most images include icons only, but the following images also include text:

�Buttons of the Navigation bar

To change the text for these images, modify the respective file. (For more information, see section 3.1 Images.)




Figure 3.3. Text originates from various sources in the system

A Server property B Dossier property C Image with text

B B C

A


To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken from their respective custom metadata proper-ties. For more information about setting these values, see the Enterprise 7 Admin Guide, chap-ter 40, Digital Magazine Configuration.)




262HTML5

3.4 Settings

Some of the customizations for the Reader App are per-formed in the DMSettings.plist file, which allows changing specific Reader App functionality. Which settings these are and for which features they are used is discussed in the remainder of this chapter.


For some specific features, no user interface is available yet (such as hiding video controls). For these scenarios, the exported magazine.xml file can be modified.


Previewing any made customizations can be done by previewing the Reader App in a supported Web browser.

Note that a Web Server is required for this purpose.


263HTML5



�General appearance. The general look of the Reader App.


5.1 General Appearance

The following general Reader App features relating to its appearance can be customized (see image on the fol-lowing page):

Reader App background CSS file: base.cssSelector: body

�Background image: bg-body.png �Background color �Background gradient: bg-body-gradient.png

Reader App page containerCSS file: base.cssSelector: bodyClass selector: .container

�background-color �border-color

Background loader imageCSS file: base.cssSelector: bodyClass selector: .loading

�Loader image: loader.gif

Unsupported Browser Web pageWhen the magazine is loaded in an unsupported Web browser, a message is displayed to the user. This Web page can be customized to your needs. Location:

�reader/unsupported�browser.html


264HTML5

Custom scrollbarsScrollbars appear in the following locations:

�Long pages (pages that are longer than the defined height of the page area)

�Scrollable areas

These are controlled by the following images and CSS references:

Vertical scrollbar �Images: scrollbar-thumb.png, scrollbar-track.

png �CSS references:

CSS files: base.css, scrollarea-images.cssClass selector: .scrollable

Horizontal scrollbar �Images: scrollbar-thumb-hor.png, scrollbar-

track-hor.png �CSS references:

CSS files: base.css, scrollarea-images.cssClass selector: .scrollable


265HTML5

Figure 5.2. Customizing the general appearance of the HTML5 Reader App

A bg-body.png B border-color C background-color D loader.gif

A B C D


266HTML5

6. Navigation


�Story navigation vs page navigation �Navigation bar �Flipview �Top Toolbar �Hotzones �Navigation Zones


Other Reader App features such as the TOC List and Searchable Text can also be seen as navigation

methods, but these are described in section 7. General App Features.




�To navigate from one story to another, the user navigates horizontally (from left to right or right to left)

�To navigate within a story (from page to page), the user navigates vertically (up/down or down/up)


�To navigate from page to page, the user navigates horizontally (from left to right or right to left)

�Navigating from story to story is not pos-sible by means of a finger swipe or by using the mouse/keyboard.




To enable Page navigation, select the following option in the DMSettings.plist file:



267HTML5

6.2 Navigation Bar

The Navigation bar is used as a starting point for navigat-ing the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, etc.) as well as to external content for instance by using the Newsfeed button.



�Images. The appearance and position of the buttons.


6.2.1 Items








Removing/adding/reordering buttonsTo remove or add a button, or change the order in which they appear, modify the content by using a suitable XML editor.


268HTML5

6.2.2 Images

The images that appear in the Navigation bar are stored in the img/bottomToolbar folder.

The Toolbar images are available as PDF files which can be customized by using Illustrator and subse-

quently saved 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.

The following images can be customized (listed in alpha-betical order):

�flipviewHoverIcon.png. The icon for the Flipview button when the mouse is hovered over it. (This button is normally named Contents.)

�flipviewIcon.png. The icon for the Flipview button. (This button is normally named Contents.)

�flipviewSelectedIcon.png. The icon for the Flipview button in its selected state. (This button is normally named Contents.)

�homeHoverIcon.png. The icon for the Home button when the mouse is hovered over it.

�homeIcon.png. The icon for the Home but-ton, linking to the cover of the magazine.

A homeHoverIcon B tocSelectedIcon C flipviewIcon

A B C

Figure 6.2.2. The Navigation bar images

�homeSelectedicon.png. The icon for the Home button in its selected state.

�tocHoverIcon.png. The icon for the Contents button when the mouse is hovered over it.

�tocIcon.png. The icon for the Contents button, linking to the page with the table of contents.

�tocSelectedIcon.png. The icon for the Contents button in its selected state.





269HTML5

6.3 Flipview

The Flipview appears when the user taps the Contents button in the Navigation bar. It shows the Flipview Header, the Story Viewer / Page Viewer, and the Page Scrubber.

Figure 6.3. The Flipviewer appears when tapping the Contents button in the Navigation bar

A Flipview Header B Story Viewer / Page Viewer C Page scrubber

B

C

A

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



270HTML5

6.3.1 Background

The following areas of the background can be customized:

Flipview backgroundThe background image of the Flipview.

�Image: flipviewBackground.png �CSS reference:

CSS file: flipview.cssClass selector: .flipviewpanel

Figure 6.3.1. The Flipview images

A flipviewBackground

A

6.3.2 Header

The Flipview Header contains the following editable components:

Issue description For displaying issue information. This can be added by fill-ing out the Description property on the Issue Maintenance page in Enterprise Server.

Close buttonThe close button to close the Flipviewer with.

�Image: flipview-horizontal-button-close.png �CSS reference:

CSS file: flipview.cssClass selector: .flipview-closer

Figure 6.3.2. The Flipview header components

A Issue description B flipview-horizontal-button-close

A B


271HTML5

6.3.3 Thumbnail Border

The currently displayed story is marked by a border around the corresponding thumbnail in the Story Viewer / Page Viewer. The border color can be controlled by the following setting:

CSS file: flipview.cssClass selector: .flipview-active-thumb

�border-color

Figure 6.3.3. A border is shown around a thumbnail to indicate which story currently is viewed

A Thumbnail border

A

6.3.4 Story Title

Below the first page of each story, the Story Title can be shown.

This is especially useful when the Reader App is configured for Page Navigation (see section 6.1

Story vs Page Navigation). The story title is displayed below the first page of each story and is therefore a clear indication of where each story starts.




A

B


272HTML5

6.3.5 Story Bullets

A story bullet is shown in front of each story title.

Figure 6.3.5. A story bullet is shown in front of each story title

A flipview-horizontal-bullet-circle

A

The story bullet is controlled by the following image and CSS reference:

�Image: flipviewBullet.png �CSS reference:

CSS file: flipview.cssClass selector: .flipview-bullet

6.3.6 Story Description

By default, a short description is displayed below each story title as a further indication of what the story is about. (Contrary to the iPad and Android Reader Apps, there is currently no DMSetting to show/hide this description.)



A Story Description property B Story Description displayed in Reader

A

B


273HTML5

6.3.7 Page Scrubber

The Page Scrubber is used for quickly scrolling through the pages of the Page Viewer / Story Viewer.

Figure 6.3.7. The Page Scrubber components

A slider-bg B slider-button

BA

The Page Scrubber is controlled by the following image sand CSS references:

Page Scrubber button �Image: slider-button.png �CSS reference:

CSS file: slider.cssClass selector: .slider-handle

Page Scrubber background �Image: slider-bg.png �CSS reference:

CSS file: slider.cssClass selector: .slider-panel

6.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.

The size of the sensitive area can be set by the Touch Areas setting of the DMSettings file.

Bottom area heightHeight of the bottom Hotzone. Default value: 80 (in pixels).

Left area heightHeight of the left Hotzone. Default value: 44 (in pixels).

Right area heightHeight of the right Hotzone. Default value: 44 (in pixels).

Note that Hotzones only work on touchscreen devices, not on a desktop PC/laptop (for these sys-

tems, Navigation zones are used, see section 6.5 Navigation Zones).


274HTML5

6.5 Navigation Zones

On desktop PCs and laptops, Navigation Zones are used for moving to the next/previous page/story or for navigating between images of a Slide Show; all by using the mouse. When hovering over such a zone, 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.

Figure 6.5. The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)

The Navigation Zones are controlled by the following images and CSS references:

Left Navigation Zone �Images: bg-rail.png, arrows-click.jpg �CSS references:

CSS file: navigator.cssClass selectors: .navigator-left,

.navigator-left-active

Right Navigation Zone �Images: bg-rail.png, arrows-click.jpg �CSS references:

CSS file: navigator.cssClass selectors: .navigator-right,

.navigator-right-active

Top Navigation Zone �Images: bg-rail-vertical.png, arrows-click-

vertical.jpg �CSS references:

CSS file: navigator.cssClass selectors: .navigator-top,

.navigator-top-active

Bottom Navigation Zone �Images: bg-rail-vertical.png, arrows-click-

vertical.jpg �CSS references:

CSS file: navigator.cssClass selectors: .navigator-bottom,

.navigator-bottom-active


275HTML5

6.6 Top Toolbar



�Images. The icons of the buttons and images.


6.6.1 Availability

By default, the top Toolbar is disabled. It can be enabled by the following setting in the DMSettings file:


Possible values:

�true. Enables the top Toolbar

�false. Disables the top Toolbar

6.6.2 Images

The following images can be customized:

�tocTableHoverIcon.png. The icon for the TOC button when the mouse is hovered over it.

�tocTableIcon.png. The icon for the TOC button.

�tocTableSelectedIcon.png. The icon for the TOC button in its selected state.


276HTML5



�Audio �Scrollable Areas �Slide shows �TOC List �Video


7.1 Audio

For the playback of audio, overlay images can be customized.

Overlay images are icons that appear over other objects to indicate their intention or state. For audio, icons are available to indicate that an audio file can be played or stopped.

A audio-play-overlay

Figure 7.1. The audio play enabled icon

A

The audio overlay images are controlled by the following images and CSS references:

Audio play overlayThe audio icon shown when the audio file is not being played.

�Image: audio-play-overlay.png �CSS reference:

CSS file: audio.cssClass selector: .audio-adornment-start

Audio stop overlayThe audio icon shown when the audio file is being played.

�Image: audio-stop-overlay.png �CSS reference:

CSS file: audio.cssClass selector: .audio-adornment-stop


277HTML5

7.2 Slide Shows

For Slide Shows, the following can be customized:

�Navigation zones

�Overlay images

Each is explained in the next sections.

7.2.1 Navigation Zones

(Desktop PCs/laptops only) Navigation Zones are used for navigating between images of a Slide Show by using the mouse.

For information about how to customize these, see sec-tion 6.5 Navigation Zones.

7.2.2 Overlay Images

Overlay images are icons that appear over other objects to indicate their intention or state. For Slide Shows, an icon is available to indicate that the image on the page is in fact a Slide Show. This icon is positioned in the lower left-hand corner of the image.

A slideshowIcon

A

Figure 7.2.2. The Slide Show icon

The Slide Show overlay is controlled by the following image and CSS reference:

�Image: slideshow-icon.png �CSS reference:

CSS file: slideshow.cssClass selector: .slideshow-adornment


278HTML5

7.3 TOC List

The TOC List is a pop-up window containing a table of contents.

For each story, the following is shown:

�Thumbnail of the first page of the story �The story title �The story description


A

A TOC List



�Changing the story text



The TOC List itself is always enabled, but in order for it to be accessible, the top Toolbar needs to be enabled. This can be done by means of the following setting in the DMSettings.plist file:



279HTML5

7.3.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.

Figure 7.3.2. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for dis-playing the story title and description in the TOC List (bottom)

A Story Description property B Story Description dis-played in Reader C Story Title property D Story title displayed in Reader

B

A

C

D

Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.

7.4 Video

For the video functionality, overlay images can be customized.

Overlay images are icons that appear over other objects to indicate their intention or state. For videos, 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.

The following image can be customized:

The Video overlay is controlled by the following image and CSS reference:

�Image: video-play-overlay.png �CSS reference:

CSS file: video.cssClass selector: .video-adornment

A videoEnabledIcon

A

Figure 7.4. The video play icon

280

12

280HTML5

Contrary to the other Reader Apps, the HTML5 Reader App does not have a building process as such.

Since the HTML5 Reader App can only be used for sin-gle-issue magazines, the only step which needs to be performed is bundling the exported magazine content into the Reader App project.

1. Bundling the Content

To bundle the magazine content, perform the following steps:

Step 1. Export the magazine using Content Station. (See chapter 6, Exporting Content.)

Note that the export results in the following two folders:

�html5. The content intended for use in HTML5 Reader Apps.

�magazine. The content intended for use in Reader Apps on iPad or Android devices.

Step 2. Open the html 5/content folder and copy its content.

Step 3. Paste the content into the following location of the Reader App:

�./content

This is the default location; custom loca-tions can be defined by means of the

following setting in the DMSettings file:

�Magazine Configurat ion URL. Location of the issue.json configuration file.

Building the HTML5 Reader App


281HTML5

�Magazine Content URL. Location of the magazine content (the images and pages folders).

282

13

282

Reader Apps which do not include Store function-ality are distributed with the magazine content included as part of the app.

Reader Apps without Store functionality include the Basic Edition and Standard Edition. Such Reader Apps are offered as a single download: for each magazine issue a new Reader App needs to be downloaded.

In this chapter, you will learn all about a Reader App with no store functionality.

1. Submitting the Reader App

The following sections describe the steps involved for submitting a Reader App to the iTunes App Store, and to an Android app store.

Distributing Reader Apps Without Store

Chapter 13 Distributing Reader Apps Without Store

283

1.1 To the iTunes App Store

To submit the Basic or Standard Reader App to the iTunes App Store, perform the following steps:

For a detailed, step-by-step guide of this whole pro-cess, download the iTunes Connect Developer

Guide (see chapter 1, Intro – section 3, Additional Documentation for a download link).

See appendix H, Tips and Best Practices for further guide lines around this process.

Step 1. Log in to iTunes Connect: https://itu-nesconnect.apple.com/.

Step 2. Register the Reader App with the App Store by providing all relevant details about the Reader App as well as screenshots for dis-play in the App Store.

Step 3. Upload the Reader App to iTunes by using Apple’s Application Uploader.

After completing the upload process, the Reader App needs to be approved by Apple.

Step 4. Release the Reader App to go live in the App store. This can be done automatically (as soon as the app is approved), or manually.

1.2 To an Android App Store

To submit the Basic or Standard Reader App to an Android app store, follow the guide lines as provided by that store.

https://itunesconnect.apple.com/


284

14

284

Reader Apps which include Store functionality are distributed separately from the magazine content.

Reader Apps with Store functionality include the Pro Edition, Standard Edition, Subscription Edition, and Apple Subscription Edition.

Users only download the Reader App once after which they can use the Store functionality to view the available issues. 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. This way, only one Reader App for each title needs to be downloaded onto the digital device. The Library functionality is used to view and open the available issues.

In order to facilitate this process, the WoodWing Content Delivery Platform is required.

In this chapter, you will learn all about the Content Delivery Platform, as well as how to build and distribute a Reader App with Store functionality.

Distributing Reader Apps With Store

Chapter 14 Distributing Reader Apps With Store

285

1. 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 device from the App Store.

�By using the Store functionality of the Reader App, an overview of the available issues is received from the Content Delivery Platform. (Issues available via subscription are shown in the Library.)

�When downloading, the magazine content is received from the Content Delivery Platform.

This process is displayed in figure 1 below.

app store

Figure 1. For versions of the Reader App containing a Store, 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

Content Delivery Platform Digital device

Reader App without contentOverview of available issues

Magazine content

The Content Delivery Platform takes care of the follow-ing tasks:

�It manages the information about the Reader App

�It manages the information about the issues available to the Reader App

�It provides the magazine content �It allows you to add development devices:

devices with which issues can be viewed that have not yet been published. Also, the pay-ment process is bypassed, so no purchasing is required in the case of paid issues. This allows testing of content before it is made live to end users.

�It acts as a bridge between an external Subscription server and the Reader App.

AvailabilityThe Content Delivery Platform is available as a ser-vice hosted by WoodWing. For more information, see http://www.woodwing.com/en/digital-magazine/content-delivery-service.

http://www.woodwing.com/en/digital-magazine/content-delivery-service

http://www.woodwing.com/en/digital-magazine/content-delivery-service


286

2. Distribution Workflow

The workflow for distributing a Reader App with Store functionality can be split into two parts:

1. Distributing the Reader App1

2. Distributing the magazine content in the form of issues

Each part is explained in the following sections.

1 The Store is available as an HTML Store and does not neces-sarily have to be integrated in the Reader App, it can also be hosted separately.

3. Distributing the Reader App

Distributing the Reader App with Store functionality involves submitting it to the relevant store.

See appendix B, Tips and Best Practices for further guide lines around these processes.

This process only applies to Reader Apps which are distributed for the first time. Updating an already

distributed Reader App involves a different process. For more details, see section 3.1 Updating the Reader App).

Submitting Android Reader AppsFor submitting Android Reader Apps, follow the guide lines as provided by the relevant store.

Submitting to iTunes ConnectTo submit the Pro, Framework, Subscription, or Apple Subscription Reader App to the iTunes App Store, per-form the following steps:

For a detailed, step-by-step guide of this whole pro-cess, download the iTunes Connect Developer

Guide (see chapter 1, Intro – section 3, Additional Documentation for a download link).

Step 1. Log in to iTunes Connect: https://itunesconnect.apple.com/.

Step 2. 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.

Step 3. Upload the Reader App to iTunes by using Apple’s Application Uploader.

After completing the upload process, the Reader App needs to be approved by Apple.

Step 4. When one or more issues have been made available for download (see section 4.




287

Distributing Issues) release the Reader App to go live in the App store. This can be done automatically (as soon as the app is approved), or manually.

3.1 Updating the Reader App

There may come a time when you want to distribute an updated version of the Reader App itself, for instance because you want to make use of different and/or new functionality.

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, Additional Documentation for a download link).

�Android: Follow the instructions as provided by the relevant store.


288

4. Distributing Issues

The workflow for distributing an issue is as follows:

Step 1. (Paid issues only, only available for the iPad Reader App version) Register the issue with the iTunes Connect service as an In-App Purchase.

Step 2. Register the issue with the Content Delivery Platform.


4.1 Registering With iTunes Connect

(iPad Reader App version only) This step only needs to be performed when the user will have to pur-

chase the issue. When the issue is offered free of charge, you can skip this step since no interaction is required between the Reader App and an app store.

To register an issue in iTunes Connect as an in-app pur-chase, follow the steps as outlined in the iTunes Connect Developer Guide. (see chapter 1, Intro – section 3, Additional Documentation for a download link).

4.2 Registering With the CDP

Issues can be registered in two ways on the Content Delivery Platform:

�As a full issue. An issue containing all content.

For more information, see appendix F, Using the Content Delivery Platform – section 3.4.1, Adding a Full Issue.

�An issue split into segments. (iPad Reader App version and Android Reader App v1.1 only) An issue in which content is added as separate segments.

For more information, see appendix F, Using the Content Delivery Platform – section 3.4.2, Adding an Issue in Segments.

289

A

289

In chapter 5, Creating Content, the concept of using a DM Artboard is explained in which layouts do not have to be created in a specific size.

However, it is practical to create the layout in the size of the largest device. Also, the DM Artboard concept sup-ports creating content for a single device, 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.

1. Formula

To calculate the exact page size for a specific device, the following formula is used:

[page width or page height in pixels]/[dpi value] in

(Where in stands for inches1)

For example, 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.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. When pressing the Tab key to tab out of the width or height box, InDesign will automatically calculate the entered fracture into the correct value, and present it in the measuring unit that InDesign is set to.

Some widely used values are shown in section 1.1 Device Settings.

1 Instead of “in”, you can also type “inch”. Note that when using a non-English version of InDesign, you might have to enter the translated version of “inch”.

Layout Sizes

Appendix A Layout Sizes

290

1.1 Device Settings

Below is a listing of the settings used for some popular devices:

Apple iPad �Width: 1024 pixels �Height: 768 pixels �Dots per inch: 132 dpi

However, due to the height of the iPad’s toolbar of 20 pixels, 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, 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

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.

Appendix A Layout Sizes

291

Table 3.1a. Page dimensions converted to various units of measurements for use on the iPadSize Value

dpi Picas Points Inches Millimeters Centimeters748 pixels 132 34p0 408 pt 5.6667 in 143.933 mm 14.3933 cm768 pixels 132 34p10.9 418.9 pt 5.8181 in 147.779 mm 14.779 cm1004 pixels 132 45p7.636 547.6 pt 7.6061 in 193.194 mm 19.3194 cm1024 pixel 132 46p6.5 558.5 pt 7.7569 in 197.026 mm 19.7026 cm

Table 3.1b. Page dimensions converted to various units of measurements for use on the Samsung GalaxySize Value

dpi Picas Points Inches Millimeters Centimeters562 pixels 169 19p11.432 239.4 pt 3.3254 in 84.466 mm 8.4466 cm600 pixels 169 21p3.621 255.621 pt 3.5503 in 90.178 mm 9.0178 cm

986 pixel 169 35p0.071 420.071 pt 5.8343 in 148.192 mm 14.8192 cm1024 pixels 169 36p4.26 436.26 pt 6.0592in 153.903mm 15.3903 cm

292

B

292

This appendix describes how to create fully marked-up articles for use in the Text View mode of the iPad Reader App.

Due to the different article formats used by InDesign CS4/InCopy CS4 and InDesign CS5/InCopy CS5, the described method can only be applied to articles cre-ated using InDesign CS5 and InCopy CS5. InDesign CS4 or InCopy CS4 users can make use of the method as described in chapter 5, Creating Content – section 3.5, Text View Mode.

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, including:

�Font styles such as bold, italic, underlining and strike-through

�Vertical text alignment (relative to the baseline) �Drop caps �Subscript, superscript and capitalization �Left-to-right or right-to-left support �Swatches (CMYK, Labs, and RGB) �Bullets and numbering1

�Tables1

�Hyperlinks (but no cross-links)1 �Footnotes (hyperlinked)1 �No-breaks (text selections only)1

This is done by using the XHTML 1.1 / CSS 2.1 format, thereby offering a vast amount of styling possibilities and features (such as applying background color, border styles, etc.). This can even be controlled down to Brand or Issue level.

1 This feature is expressed in a HTML element and can therefore be styled as such

Creating Text View Markup Articles

Appendix B Text View Markup Articles

293

2. Requirements

In order to make use of this feature, the following is required:

�Enterprise Server 7.0.8, configured for digital magazines

�InDesign CS5 or InCopy CS5 with Smart Connection 7.2 installed

�Content Station 7.2 �Digital Magazine Reader App version 1.5 or

higher

3. Creating the Article

To create an article for Text View Mode using InDesign CS5, perform the following steps:

Step 1. Create a layout and save it to the system.

This could be the layout used for the page in landscape orientation, or it can be a dummy layout, solely used for creating an article. (If the latter, make sure that it is not included in the export of the magazine.)

Step 2. 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. However, articles intended to be used for Text View mode are not allowed to contain any images. Check with your administrator if this feature is enabled.

(Optional, 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, the Elements panel or in Content Station. Should any image component exist, delete it from the article.

�Place an already created article (created using InDesign CS5 or InCopy CS5) on the layout.

Styling can be applied by making use of the following methods:


294

�By assigning an Element label to an article component. The name of the Element label is then mapped to the CSS style.

�By applying paragraph and character styles. The name of the paragraph or character style is then mapped to the CSS style.

�By using a combination of both methods.

Either method can be configured to be used on the fol-lowing levels:

�System wide �Per Brand �Per Issue

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.

Each method is further explained in the following sections.

3.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. The name of the Element label is then mapped to the corresponding name in the style sheet. This way, different styling can be set up for each applied Element label.

When using this method, take note of the following:

�Paragraph and character styles are ignored/flattened (meaning that the applied formatting is lost) and Web styles (CSS) are used instead.

�Manually applied overrides to styles are respected. (For limitations concerning using overrides, see section 4. About Overrides.)

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. Check with the administrator which Element label should be applied in order to achieve a particular styling effect.

When using this method, 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. On the other hand, 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.


295

3.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 required

�Applying specific styles unknown to InDesign/InCopy

The method works by applying paragraph styles, charac-ter styles, or table styles to the text or table. The names of the applied styles are then mapped to the corresponding name in the style sheet.

When using this method, take note of the following:

�Manually applied overrides to styles are respected. (For limitations concerning using overrides, see section 4. About Overrides.)

�Unknown styles are flattened.

�The use of special characters in the style name is supported.

Your system administrator will have set up the required paragraph/character/table styles and will

have made sure that they are mapped to the correspond-ing CSS style. Check with the administrator which style should be applied in order to achieve a particular styling effect.

4. About Overrides

When applying a manual override to a particular style, such as applying a bold style to a paragraph style which turns the paragraph into italic text, take note of the following:

�Font sizes must be defined in ems in the CSS style in order to support zooming on the digital device.

�Font colors cannot be overridden through CSS styles.


296

5. Using Tables

Another powerful advantage of the Text View Markup feature is the fact that it supports tables.

When including a table in your article, take note of the following:

�Table style definitions are not exported.

�Table style names are exported and can be mapped to CSS styles.

�Bodies, headers and footers are supported.

�Table features such as merged cells and bor-ders are not supported.

6. Known Limitations

The following are not supported by the Text View Markup feature:

�Font family mapping �Font mapping by using the DigitalMagazine-

Defs.xml file �Inline images �Shapes (including lines) �Text indents �Cross-references �Text frame properties such as multiple

columns �Print-specific features such as tracking, kern-

ing, scaling, baseline shift, etc.


297

7. Including Images

Including a header image(Optional) To display an image as a header at the top of the article, perform the following steps:

Step 1. In InDesign or Content Station, access the Properties dialog box for the image that needs to be set as the header.

This image needs to have the exact dimensions (width and height) in which it

is going to be displayed on the digital device.

Step 2. From the Intent list, choose Header.

Step 3. Click OK to close the Properties dialog box.

Make sure that only one image in the Dossier has the intent property set to

Header.

Including other images(Optional) Additional images can be added to the story, which are displayed below the article, by doing the following:

�Make sure that images to be used are added to the same Dossier as the story it belongs to.

Including an image via CSSImages can also be included by referencing them in the CSS files. This can be used for instance to automatically include an icon anywhere in the text, or to create a back-ground image/pattern.

Check with your system administrator if images are added in this way.

14

C

14

This appendix provides an overview of the dimen-sions of the customizable Reader App images.

Some images used on Android devices are NinePatch graphics; these are identifiable by their

f i le name which ends wi th a “9” (such as “downloadleft.9.png”). Information about such files can be found here: http://developer.android.com/guide/developing/tools/draw9patch.html.

1. iPad

The table on the following pages lists the image dimen-sions used for the iPad Reader App (in alphabetical order).

Image Dimensions



Appendix C Image Dimensions

15

Table 1. iPad image dimensions (in pixels)Dimensions

Image name width heightaccountIcon.png 138 92accountSelectedIcon.png 138 92audio_controller.png not usedaudioControlBG.png 404 146audioControlDisabled.png 37 28audioControlPlay.png 37 28audioControlSliderBGDark.png 32 9audioControlSliderBGLight.png 32 9audioControlSliderButton.png 14 14audioControlStop.png 37 28audioPlayDisabledIcon.png 36 36audioPlayEnabledIcon.png 36 36audioStopEnabledIcon.png 36 36audioTopBarIcon.png 50 47audioTopBarSelectedIcon.png 50 47back_grey.png not usedback_white.png not usedbackIcon.png 47 50backSelectedIcon.png 47 50bookmarkAdd.png 20 20bookmarkTopBarIcon.png 52 47bookmarkTopBarSelectedIcon.png 52 47bottombar.png not usedcheckbox.png 16 16

checkboxChecked.png 16 16

(Continues on next page)


16

Table 1. iPad image dimensions (in pixels) (Continued)Dimensions

Image name width height

close_white.png not usedcloseButton.png 34 35closeButtonDefaultState.png 30 30customicon.png not usedcustomselectedicon.png not useddefault_thumb.pngDefault-Landscape.png 1024 748Default-Portrait.png 768 1024Default.png 768 1024downloadbackground.9.png not useddownloadleft.9.png not useddownloadFailedErrorLabel.png 303 30downloadFailedReloadButton.png 44 31downloadFailedReloadButtonPressed.png 44 31facebook.png not usedfeedIcon.png 75 50feedSelectedIcon.png 75 50flipviewBackground.png 1024 225flipviewBullet.png 9 9flipviewCloseButton.png 21 21flipviewIcon.png 75 50flipviewSectionBackground.png 768 23flipviewSelectedIcon.png 75 50flipviewSelectedSectionButton.png 1 23forwardIcon.png 47 50



17



forwardSelectedIcon.png 47 50galaxytoc.png not usedgridViewBackground.png 768 299gridViewBackgroundFirstRow.png 768 351headerBackground.png 325 77headerBarShadow.png 1 8helpIcon.png 75 50helpSelectedIcon.png 75 50homeIcon.png 75 50homeSelectedIcon.png 75 50Icon.png 72 72issueShadow.png 181 11issueShadowLarge.png 475 33libraryDownload.png 75 40libraryDownloadPause.png 75 40libraryDownloadRefresh.png 75 40libraryEmptyShelf.png 1024 220libraryFirstShelf.png 1024 351libraryIcon.png 75 50librarySelectedIcon.png 75 50libraryShelf.png 1024 300libraryUpdateIcon.png 75 50libraryUpdateSelectedIcon.png 75 50loginDialogBackground.png 325 355line.png not used



18



maximize.png not usedminimize.png not usednext.png not usednoInternetConnectionBackground.png 6 164noInternetConnectionLabel.png 196 14pageScrubberBackground.png 1024 37pageScrubberButton.png 26 26pageScrubberTrackLeft.png 32 9pageScrubberTrackLeft9.png not usedpageScrubberTrackRight.png 32 9pageScrubberTrackRight9.png not usedpassDialogBackground.png 325 330pause.png not usedplay.png not usedprev.png not usedpreviewHeaderBackgroundLandscape.png 1 562previewHeaderBackgroundPortrait.png 1 249previewShadowLandscape.png 8 1previewShadowPortrait.png 1 8progressiveDownloadOverlayBar.png 1024 111segmentedControlGridButton.png 13 13segmentedControlSingleIssueViewButton.png 13 12segments_shadow.png 768 22segments_stack_background.png 189 228shadowBarVertical.png 8 1



19



shareFacebook.png 54 54shareFacebookDisabled.png 54 54shareMail.png 54 54shareMailDisabled.png 54 54shareTableIcon.png 55 50shareTableSelectedIcon.png 55 50shareTwitter.png 54 54shareTwitterDisabled.png 54 54singleIssueViewBackground.png 768 614singleIssueViewBackgroundLandscape-old.png 768 704singleIssueViewBackgroundLandscape.png 1024 661singleIssueViewBackgroundPortrait.png 768 917slideshowIcon.png 36 36storeclosebutton not usedstoreHeader.png 1024 42storeIcon.png 75 50storeNoInternetErrorBackground.png 1 58storeNoInternetErrorLabel.png 273 20storeSelectedIcon.png 75 50stretchablePostButton.png 20 36stretchablerectbutton.9.png not usedstretchableStoreButton.png 13 26stretchablestorebutton_disabled.9.png not usedstretchablestorebutton.9.png not usedstretchableSubscribeButton.png 20 38



20



stretchableSubscriptionStoreButton.png 20 36subscriptionFormBackground.png 1 145textViewHeader.png 768 20textViewImagesShadow.png 768 20tocIcon.png 75 50tocSelectedIcon.png 75 50tocTableIcon.png 47 50tocTableSelectedIcon.png 47 50tocThumbBackground.png 78 57tocThumbBackgroundVertical.png 57 76transparentImageForFlipviewButton.png 150 110topbar.png not usedtwitter.png not usedUpdatableIssueIcon.png 23 23videoDisabledIcon.png 36 36videoEnabledIcon.png 36 36


21

2. Android

The table below lists the image dimensions used for the Android Reader Apps (in alphabetical order).

Table 2. Android image dimensions (in pixels)Android 1.3 (Froyo) Android 1.3 (Honeycomb)

Image name width height width heightaccountdisabledicon.png not used 75 51accounticon.png 75 51 75 51accountselectedicon.png 75 50 not usedaction_bar_action_overflow_pressed_background.png not used 1 47action_bar_action_pressed_background.png not used 1 56action_bar_tab_selected_pressed.png not used 1 56action_bar_tab_selected.png not used 1 9action_bar_tab_unselected_pressed.png not used 1 56action_bar_tab_unselected.png not used 1 3audiocontrolsliderbutton.png 14 14 14 14audioplaydisabledicon.png 36 36 36 36audioplayenabledicon.png 36 36 36 36audiostopenabledicon.png 36 36 36 36back_white.png 54 32 54 32backdisabledicon.png not used 47 50backicon.png 47 50 47 50backselectedicon.png 47 50 not usedbottombar.png 1 50 not usedcheckbox.png 16 16 16 16

checkboxchecked.png 16 16 16 16closebutton.png 34 35 34 35closebuttondefaultstate.png 32 32 32 32



22

Table 2. Android image dimensions (in pixels) (Continued)Android 1.3 (Froyo) Android 1.3 (Honeycomb)

Image name width height width height

customicon.png 75 50 75 50customselectedicon.png 75 50 not useddownloadbackground.9.png 15 11 15 11downloadfailederrorlabel.png 1 101 1 101downloadfailedreloadbutton.png 24 28 24 28downloadleft_disabled.9.png 17 13 15 11downloadleft.9.png 15 11 15 11feedicon.png 75 50 75 50feedselectedicon.png 75 50 not usedflipviewbackground.png 3 225 3 225flipview_bottom_shadow not used 1 4flipviewbullet.png 9 9 9 9flipviewclosebutton.png 21 21 not usedflipview_close_background.png not used 228 29flipview_close_icon.png not used 20 20flipview_section_background_unselected 1 39 1 39flipviewicon.png 75 50 75 50flipviewsectionbackground.png 1 23 1 23flipviewselectedicon.png 75 50 not usedflipviewselectedsectionbutton.png 1 23 1 23forwarddisabledicon.png not used 55 50forwardicon.png 47 50 47 50forwardselectedicon.png 47 50 not usedgridviewbackground.png not used not usedgridviewbackgroundfirstrow.png not used not usedheaderbackground.png 323 77 323 77



23



headerbarshadow.png not used not usedhelpicon.png 75 50 75 50helpselectedicon.png 75 50 not usedhomeicon.png 75 50 75 50homeselectedicon.png 75 50 not usedicon.png (res/drawable-ldpi) 36 36 36 36icon.png (res/drawable-mdpi) 48 48 48 48icon.png (res/drawable-hdpi) 72 72 72 72librarydownload.png 60 35 60 35librarydownloadpause.png 60 35 60 35librarydownloadrefresh.png 60 35 60 35library_login_icon.png not used 75 51library_logout_icon.png not used 75 51library_shelf_issue_drop_shadow.png not used 223 239library_shelf_landscape.png not used 1280 364library_shelf_portrait.png not used 800 364library_top_bar.png not used 1 42libraryicon.png 75 50 75 50libraryselectedicon.png 75 50 not usedlogindialogbackground.png 325 355 325 355magazine_selected_icon.png 75 50 not usedmagazine_icon.png 72 50 72 50maximize.png 47 47 47 47minimize.png 47 47 47 47next.png 67 47 67 47nointernetconnectionbackground.png 6 164 6 164



24



nointernetconnectionlabel.png 196 14 196 14pagescrubberbackground.png 1 37 1 37pagescrubberbutton.png 26 26 26 26pagescrubbertrackleft9.png 34 26 34 26pagescrubbertrackright9.png 34 26 34 26passdialogbackground.png not used not usedpause.png 67 47 67 47play.png 67 47 67 47popup_background.9.png not used 70 22prev.png 67 47 67 47progressivedownloadoverlaybar.png 1 91 1 91slideshowicon.png 36 36 36 36storeheader.png 1024 42 not usedstoreicon.png 75 50 75 50storeselectedicon.png 75 50 not usedstretchablerectbutton.9.png 12 28 12 28stretchablestorebutton_disabled.9.png 17 22 17 22stretchablestorebutton.9.png 17 22 17 22textfield_activated_holo_light.9.png not used not usedtextfield_default_holo_light.9.png not used 42 18textfield_disabled_focused_holo_light.9.png not used 21 18textfield_disabled_holo_light.9.png not used not usedtextfield_focused_holo_light.9.png not used not usedtextfield_multiline_activated_holo_light.9.png not used not usedtextfield_multiline_default_holo_light.9.png not used not used



25



textfield_multiline_disabled_focused_holo_light.9.png not used not usedtextfield_multiline_disabled_holo_light.9.png not used not usedtextfield_multiline_focused_holo_light.9.png not used not usedtextview_mode_not_supported.9.png 3 3 3 3tocicon.png 75 50 75 50tocselectedicon.png 75 50 not usedtopbar.png 1 48 not usedvideodisabledicon.png 36 36 36 36videoenabledicon.png 36 36 36 36


26

3. HTML Store

The following table lists the image dimensions used for the HTML Store (in alphabetical order).

Table 3. HTML Storeimage dimensions (in pixels)Image name Width Heightbg-rail-vertical.png 1600 48bg-rail.png 48 1600button.png 101 28checkbox.png 16 16checkboxChecked.png 16 16checkmark.png 16 16closeButton.png 36 36gridview-icon-active-button.png 53 28gridview-icon-button.png 53 28gridview-item-shadow.png 164 9gridview-shelf.png 2 290GridViewIcon.png 13 13single-bg.jpg 1024 470single-shelf.png 1024 62SingleViewIcon.png 13 12

4. HTML5 Reader App

The following table lists the image dimensions used for the HTML5 Reader App (in alphabetical order).

Table 4. HTML5 Reader App image dimensions (in pixels)Image name Width Heightarrows-click-vertical.png 48 56arrows-click.jpg 56 48audio-play-overlay.png 36 36audio-stop-overlay.png 36 36bg-body-gradient.png 1 1800bg-body.png 10 10bg-img.png 4 4bg-rail-vertical.png 1600 48bg-rail.png 48 1600close-button.png 36 36flipviewBackground.png 1 208flipviewBullet.png 9 9flipview-horizontal-button-close.png 34 35flipview-horizontal-thumb-bg.png 165 250flipviewHoverIcon.png 111 63flipviewIcon.png 111 63flipviewSelectedIcon.png 111 63homeHoverIcon.png 101 62homeIcon.png 101 62homeSelectedIcon.png 101 62loader.gif 32 32loader-small.gif 16 16scrollbar-thumb.png 9 91

(Continues in next column)


27

Table 4. HTML5 Reader App image dimensions (in pixels) - continuedImage name Width Height

scrollbar-thumb-hor.png 91 9scrollbar-track.png 9 571scrollbar-track-hor.png 571 9slider-bg.png 1 34slider-button.png 24 24slideshow-icon.png 36 36tocTableHoverIcon.png 55 38tocTableIcon.png 55 38tocTableSelectedIcon.png 55 38tocHoverIcon.png 111 62tocIcon.png 111 62tocSelectedIcon.png 111 62video-play-overlay.png 36 36

28

D

28

A Widget is an HTML5 component with distinct functionality such as a 360-degree view of an object, a slide show, a zoomable image, etc. This functionality is provided through the use of HTML, Javascript, CSS, and possible related source files.

This appendix explains in detail how to prepare Widgets for use in InDesign.

1. File Format

A Widget is stored in the Enterprise system as a .htmlwidget file. This is essentially a zipped file with a changed extension. By changing the extension to .zip, the file can be unpacked.

Working With Widgets

Appendix D Working With Widgets

29

2. File Structure

A Widget contains the following files and folders:

�HTML file. The page in which the component is embedded. It is this page which is placed in the assigned frame on the layout.

�A manifest.xml file. A configuration file describing the fields which can be modified.

�One or more Javascript files.

�CSS files. (Optional)

�Sources files. Depending on the type of Widget, additional files such as images, videos, etc, are included.

All files are created in the regular manner of creat-ing a HTML5 component, with the exception of the manifest.xml file. The creation of this file is described in section 3. Creating the manifest.xml File.

Once the magazine has been exported, the magazine.zip file contains the following Widget files:

�All files that were part of the Widget bundle (see above but with the exception of the mani-fest.xml file).

�A config.xml and config.json file. These con-tain the results of the settings chosen in the Widget panel in InDesign. Both have the same content.

�All additional files (if any) that were linked to by making use of the available options in the Widget panel in InDesign.

3. Creating the manifest.xml File

The manifest.xml file is a configuration file contain a vari-able list of fields. These fields appear in the Widget panel in InDesign, thereby allowing the user to change the behavior and/or content of the Widget. (For more infor-mation, see chapter 5, Creating Content – section 5.7, Creating a Widget.)

The following types of fields can be used:

�Boolean �String (including multistring) �StringList (with the possibility for adding a

string) �Number �File (can be filtered by type and format) �FileList (can be filtered by type and format) �Color (RGB) �Group

For a detailed description of the use of these fields, see the ww�dm�manifest�v1.xsd file (available from the Enterprise Development page on the Community Site http://community.woodwing.net/products/Enterprise%207.0.x/Development).

To create a manifest.xml file, perform the following steps:

Step 1. Create an XML file using your favorite XML editor.

Step 2. Add the minimum content as shown in figure 3 on the next page.

Note that <rootfile> holds the file which should be loaded by the Reader App.

Step 3. In the <properties> section, add the required fields.

Step 4. Save the file as a manifest.xml.

http://community.woodwing.net/products/Enterprise%207.0.x/Development

http://community.woodwing.net/products/Enterprise%207.0.x/Development


30

Descriptions can be added to property (in the form of <description> tags), in order to

explain in more detail what the option should be used for. When a description exist, a Help icon appears in the Widget panel. When the user hovers the mouse over the icon, the description will appear as a tooltip.

<?xml version="1.0" encoding="UTF-8"?><manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" usedSchemaVersion="1.0"> <widget widgetVersion="1.0"> <description src="http://some.url/providing/more/information">This is the main description of the Widget.</description> <rootfile>main.html</rootfile> <properties> </properties> </widget></manifest>

Figure 3. The default content of the manifest.xml file

For an example of a manifest file, see the provided Widget samples on the Community site.


31

4. Making the Widget Available

To make the Widget available for InDesign users, perform the following steps:

Step 1. Collect all files that make up the Widget including the manifest.xml file into one folder.

Step 2. In the folder, select all files.

Step 3. Combine all selected files into a .zip file.

Note that all files of the folder are bundled into a .zip file, not the folder itself.

Step 4. Change the extension of the file to .htmlwidget.

Step 5. 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.

Step 6. (Optional, when known) Add the Widget to the required Dossiers.

Step 7. (Optional) In the Dossier, select the check box for the Publication Channel of the Digital Magazine in which they should be used.

Notes:

�Steps 6 and 7 can also be performed by the end user.

�If steps 6 and 7 are not performed, the Widget will not appear in the Widget list of the Widget panel.

32

E

32

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.

�Navigation. Settings for navigating the Reader App.

�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. Settings for the Bookmarks List.

�Hotzones. Hotzone settings.

�Flipview. Settings related to the Flipview.

The DMSettings File

Appendix E The DMSettings File

33

�Library. Settings related to the Library.

�Metrics. (Android only) Settings related to the 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 �Content. Settings for the location of source

files.

�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.

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.


34

Table 2. DMSettings option - compared by Reader App

iPad 2.1

Android 1.3 HTML5 1.0Feature Froyo Honeycomb

Share Toolbar

Enable partial page sharing Share page Enable share toolbar Enable twitter Enable facebook Enable email sharing

Store

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 Enable subscribe button Enable existing subscriber button Reset password License agreement Privacy notice Customer service

Default to gridview in store Enable filter



35

Table 2. Reader App features Reader App (Continued)

iPad 2.1


Store(Continued)

Enable 3G Downloading HTML Store URL HTML Store fallback URL Enable external subscription server

Navigation

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 itemX Library itemX Magazine itemX Home item4 TOC itemX External Back itemX Help itemX FlipView itemX Feed itemX Account



36


iPad 2.1


Navigation(Continued)

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 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



37


iPad 2.1


Navigation (Cont.) Show FlipView on show Toolbar

Colors

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 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



38


iPad 2.1


Colors(Continued)

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 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



39


iPad 2.1


Colors(Continued)

Store colors Library issue name color Library issue number color Library background color Library download bar color Library issue download progress color Library issue download status color

Enable native scrolling indicators

Fonts

Percentage label font Inpage percentage label font Downloading label font Inpage downloading label font Sign-in fonts

Issue description font

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 (Continues on next page)


40


iPad 2.1


Fonts(Continued)

Flipview story name font

Flipview story description font

Store fonts

Library title font

Library issue download available font

Library issue update progress font

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

TOC PopupPopup height

Popup width

Bookmark PopupPopup height Popup width



41


iPad 2.1


Hotzones

Tap bottom to show toolbar Tap top to show toolbar Tap sides to navigate Touch areas

bottom area height top area height left area width right area width

Keep underlying interactive elements active

Flipview

Show story bullet Page scrubber enabled Show flipview header Show story description Show section labels Thumbs

Minimum page thumb height Maximum page thumb height Make thumbs orientation aware

Margins Flipview article thumb margin Flipview page thumb margin



42


iPad 2.1


Flipview (Continued)

Pages top margin in flipviewer Flipview thumb margin

Show page number

Library

Auto open magazine Show progress in megabytes Enable login button Enable library filter Enable library segment filter

Metrics

Fitting Fit mode

Check device metrics Device metrics warning URL Device width Device height Device dpi

Content Content

ResolutionHorizontal Vertical

Tracking Tracking Web Element Popup Scale content to fit screen

Newsstand Open issue on App open


43

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 sharingEnables/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 twitterMakes the Twitter service available as an option in the Share Content list.

Enable facebookMakes 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.


44

3.2 Store Settings

The Store settings control the Store functionality.

These settings are available in the Pro, Framework, Subscriptions, and Apple Subscription Reader proj-

ects only.

Force non-progressive downloadsForces 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.

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

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

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

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

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.

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

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

Enable existing subscriber button(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.

License agreement(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(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.

Customer service(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 storeDefines if the Reader App should start the Store in Grid view or Single Issue view.

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


45

Enable 3G DownloadingAllows downloading via a 3G account.

HTML Store URLThe URL pointing to index-android.html of the HTML Store. Possible values:

�Blank: the packaged HTML store as part of the Reader App build is used

�URL: An external Web store to which the URL points is used

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

3.3 Navigation Settings

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

Always open in storeWhen enabled, the Store is automatically accessed as soon as the Reader App is launched.

Enable audio control in toolbarWhen 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 toolbarWhen 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 issueWhen 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 toolbarsWhen 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 onWhen enabled, the Navigation bar is always displayed and cannot be hidden by the user.

Toolbar ItemsControls 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) ver-sion, remember that reordering items lower in the


46

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 Library.

�Home. The cover button for accessing the cover.

�Magazine. When an issue is open but not currently being viewed (for instance when the Store is being viewed), this button allows the user to return to the issue.

�TOC. The TOC button for accessing the table of contents page.

�External Back. Button for returning to the application in which the Reader App is embedded.

�Help. The Help button for accessing the Help page.

�Flipview. The contents button for accessing the Story Viewer / Page Viewer and the Section Viewer.

�Feed. The Newsfeed button for accessing the Newsfeed page.

�Account. The account button for accessing the subscription account page.

�Custom. A button for accessing a Web page with custom information such as privacy infor-mation. The URL to the page is defined by the Custom Button URL setting (see below).

�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 toolbarEnables the Toolbar at the top of the Reader App.

Enable fullscreen newsfeed Enables the Newsfeed to be displayed full screen.

Start with newsfeed Opens the newsfeed page when the App is launched.

Horizontal page navigationWhen 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 Enables the right-to-left support; scrolling through the magazine will be reversed.

Scroll sections with two-finger swipeCan 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.

History buttons in bottom toolbar 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.

Newsfeed URL Contains the URL to use for the Newsfeed view.


47

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

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

Orientation lockControls 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.

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.

Force fullscreen video rotationVideos 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.

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

Audio keeps playing while swiping from page to page within the same articleAudio 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 sub-sequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.

Enable TOC List in toolbarFor enabling/disabling the TOC List in the top Toolbar.

Top toolbar always onWhen enabled, the top Toolbar bar is always displayed and cannot be hidden by the user.

Maximum number of toolbar items(Android Reader App Honeycomb only) Defines the maximum number of items to appear on the right-

hand 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.


48

3.3.1 Color Settings

Page sharing table info text colorThe 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).

Page sharing table info colorThe 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).

Inpage downloading label colorColor of the Downloading label on a page.

Downloading label colorColor of the Downloading label in the Page Viewer / Story Viewer.

Percentage label colorColor of the download percentage label in the Page Viewer / Story Viewer.

Inpage percentage label colorColor of the download percentage label on a page.

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

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

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

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

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(Non-iTunes subscriptions only) Color of the Submit but-ton label in the Sign-in dialog box.

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

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(Non-iTunes subscriptions only) Color of the text in the Sign-in dialog box header.

Enable transparent Web ElementsWhen enabled, the background of Web elements will be transparent.

TOC selected row colorThe color of the selected story in the TOC List.

Bookmark selected row colorThe color of the selected Bookmark in the Bookmarks List.

Application toolbarThe color of the Navigation bar and the top Toolbar.

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

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


49

Flipview section text colorThe color of the text in the Section viewer.

Flipview section text color selectedThe color of the text in the Section viewer in its selected state.

Flipview story name colorThe color of the Story title below the story preview.

Flipview story description colorThe color of the story description below the story preview.

Flipview empty thumb borderColor of the border for an empty thumbnail in the Page Viewer / Story Viewer.

Store colors:Store title colorThe color of the Store title (in the top navigation bar).

Library segment top background colorThe background color of the top area of the Library Segment Overview page.

Library segment bottom background colorThe background color of the bottom area of the Library Segment Overview page.

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

Library segment overview issue number colorThe color of the issue number on the Library Segment Overview page.

Library segment overview cover story colorThe color of the cover story title on the Library Segment Overview page.

Library segment overview download buttonThe color of the Issue Download button on the Library Segment Overview page.

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

Library issue download progress colorColor of the string that indicates the progress of the download.

Library issue download status colorColor of the string that shows the status of the download.

Store toolbarThe color of the store toolbar.

Store subscription title buttonThe color of the Subscribe and Existing Subscriber button labels.

Store title buttonThe color of the Buy, Preview, Submit, Download and Pause button labels.

Store background colorThe 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 colorThe color of the ‘Available issues:’ header at the top of the issues grid.

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

Library issue name colorThe color of the issue name in the Library.


50

Library downloaded bytes colorThe color of the string that indicates the download progress in bytes.

Library issue number colorThe color of the issue number in the Library.

Library background colorThe color of the Library background.

Enable native scrolling indicatorsNative scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains

scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and right-hand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded.

3.3.2 Font Settings

Inpage downloading label fontThe font of the downloading label on a page.

Downloading label fontThe font of the downloading label in the Page Viewer / Story Viewer.

Inpage percentage label fontThe font of the percentage label on a page.

Percentage label fontThe font of the percentage label in the Page Viewer / Story Viewer.

Sign In fonts(Non-iTunes subscriptions only) Font setting for fonts of the subscription Sign In dialog box:

�Disclaimer text font. The font of the Disclaimer text in the Subscription Sign In dia-log box.

�License text font. The font of the License text in the Subscription Sign In dialog box.

�Privacy text font. The font of the Privacy text in the Subscription Sign In dialog box.

�Remember checkbox font. The font of the Remember Me text in the Subscription Sign In dialog box.

�Forgot button font. The font of the “I forgot my password” text in the Subscription Sign In dialog box.

�Submit button font. The font of the Submit button label in the Subscription Sign In dialog box.


51

�Email field font. The font of the Email box in the Subscription Sign In dialog box.

�Password field font. The font of the Password box in the Subscription Sign In dia-log box.

�Dialog title font. The font of the title of the Subscription Sign In dialog box.

Issue description fontFont settings for the issue description in the Flipview header.

Flipview title fontFont settings for the Story Viewer / Page Viewer title.

TOC cell story title fontThe font of the story title in the TOC list.

TOC cell story description fontThe font of the story description in the TOC list.

Flipview story name fontThe font of the story name/title in the Flipview.

Flipview story description fontThe font of the story description in the Flipview.

Bookmark cell issue title fontThe font of the issue title in a Bookmark.

Bookmark cell story title fontThe font of the story title in a Bookmark.

Bookmark cell story description fontThe font of the story description in a Bookmark.

Store fonts:Store title fontThe font of the Store title (in the top navigation bar).

Library issue download progress fontThe font of the download progress label in the Library.

Library issue download status fontThe font of the download status label in the Library.

Available issues text fontThe font of the ‘Available issues:’ text.

Library issue name fontThe font of an issue in the Library.

Library downloaded bytes fontThe font of the downloaded bytes label in the Library.

Library issue number fontThe font of the issue number in the Library.

Library segment overview issue name fontThe font for the issue name on the Library Segment Overview page.

Library segment overview issue font colorThe font for the issue number on the Library Segment Overview page.

Library segment overview cover story fontThe font for the cover story title on the Library Segment Overview page.


52

3.4 Intents Settings

The Intents property acts as an array to convert Enterprise intent names to Reader App intent names.

When a custom value is used in Enterprise, the value of the corresponding Intents property also has

to be changed to match this custom value.

The following default intent names are used:

�Help. Used to link the page with Help instruc-tions to the Help button in the Navigation bar.

�TOC. Used to link a story to the TOC button in the Navigation bar.

3.5 TOC Popup Settings

The TOC Popup settings control the settings of the TOC List.

Popup heightDefines the height of the TOC List.

Popup widthDefines the width of the TOC List.


53

3.6 Bookmark Popup Settings

The Bookmark Popup settings control the settings of the Bookmarks List.

Popup heightDefines the height of the Bookmarks List.

Popup widthDefines the width of the Bookmarks List.

3.7 Hotzone Settings

The Hotzone settings control the settings of the Hotzones (areas to the left, right, or bottom of the screen which can be tapped in order to navigate the magazine).

For the HTML5 Reader App, these zones refer to the areas on touchscreen devices, not the clickable

areas on a desktop PC/laptop.

Tap bottom to show toolbarActivates the bottom Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.

Tap top to show toolbarActivates the top Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.

Tap sides to navigateActivates the Hotzones to the left and right of the screen. When tapped, the user will be navigated to the next or previous story/page respectively (depending on the type of navigation which has been chosen).

Touch areasDefines the height or width of the different Hotzones.

�bottom area height. Defines the height of the bottom Hotzone.

�top area height. (iPad/Android Reader App only) Defines the height of the top Hotzone.

�left area width. Defines the width of the left Hotzone.

�right area width. Defines the width of the right Hotzone.

Keep underlying interactive elements activeWhen enabled, the functionality of interactive ele-ments (such as Slide Shows, videos, etc) which are


54

obscured by a Hotzone can be accessed and is not blocked by the overlaying Hotzone.

3.8 Flipview Settings

The Flipview settings control the settings of the Flipview.

Show story bulletDefines whether or not a ‘bullet’ should be shown next to each issue name in the Flip Viewer.

Page scrubber enabledDefines whether or not the Page Scrubber should be enabled.

Show flipview headerDefines whether or not the Flip Viewer header should be shown (if not, the Title, Description and Close button of the Flip Viewer disappear).

Show story descriptionDefines whether or not the description of a story is shown in the Page Viewer.

Show section labelsDefines whether or not the Section Viewer is shown in the Page Viewer.

ThumbsThe definition of various thumbnail sizes.

�Minimum page thumb height. The mini-mum height of a thumbnail in the Flip Viewer.

�Maximum page thumb height. The maxi-mum height of a thumbnail in the Flip Viewer.

�Make thumbs orientation aware. When enabled, 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; likewise, only portrait thumbnails are displayed when the device is held in portrait orientation


55

MarginsDefines different margins for adjusting the layout of the Flipview.

�Pages top margin in flipviewer. The margin between the top of the issue thumbnails and the start of the Flip Viewer header.

�Flipview thumb margin. The margin between the thumbnails in the Flip Viewer.

�Flipview page thumb margin. (Android Honeycomb only) Controls the margin between images (pages).

�Flipview article thumb margin. (Android Honeycomb only) Controls the margin between articles (stories).

Show page number(Android Reader App only) Defines whether or not the page number should be displayed below the

page preview.

3.9 Library Settings

The Library settings control functionality of the Library.

Auto open magazineOpens an issue or Segment automatically as soon as the download and installation process is complete (non-pro-gressive downloads) or as soon as the issue or Segment is readable (progressive downloads).




Show progress in megabytes(Non-progressive downloads only) Shows the download progress both in megabytes as in percentages.

Enable login button Enables the Log In/Log Out button in the Library.

Enable library filterEnables the Library filter in the Library.

Enable library segment filterEnables the Library Segment filter available in the Library.


56

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 message

FittingThe 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 plug-

ins, see chapter 6, Exporting Content – 3.1, Exporting and Page Scaling.

�Fit mode. Possible values:

�Fit width. (Default setting) On a device 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.

�Fit screen. The page will be scaled to fit 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


�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 URLURL to the Web page to be displayed. When left empty, the default Web page in the following location is used:

�assets/devicewarning/warning.html

Feel free to modify this page to your needs.

Device widthThe required width of the device. Default values are:


Device heightThe required height of the device. Default values are:


Device dpiThe dpi setting which the device runs in (so not the physi-cal dpi). Examples:

Samsung Galaxy: 240 dpi

Motorola Xoom: 160 dpi


57

3.11 Content

The Content settings determine the location of the maga-zine’s source files.

Magazine Configuration URLLocation of the issue.json configuration file. Default setting:

�./content/

Magazine Content URLLocation of the magazine content (the images and pages folders). Default setting:

�./content/

3.12 Resolution

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

HeightDetermines the height of the area (in pixels). Default set-ting: 754.

WidthDetermines the width of the area (in pixels). Default set-ting: 1028.

When the dimension of the page is larger than the area in which it is displayed, scroll bars will appear.


58

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 screenWhen enabled, the displayed HTML page is scaled to fit the Web Element pop-up.


59

3.15 Newsstand

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

Open issue on App openEnsures that the correct issue is opened in the Reader App when tapping an issue in the Newsstand.

60

F

60

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 inTo 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

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

Using the Content Delivery Platform

https://cds.woodwing.net

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

https://apac-cds.woodwing.net

Appendix F Using the Content Delivery Platform

61

Logging outTo log out of the Content Delivery Platform, do the following:

�Click Logoff <user name> in the top right-hand corner of the screen.

2. System Structure

The Content Delivery Platform platform has the following main structure:

At the highest level, a Domain is defined, usually repre-sented by the publishing company name.

Each Domain consists of:

�Users. The users who need to work within the CDP environment.

�Devices (also referred to as Development Devices) Used for testing a digital magazine without making the magazine public.

�Apps. Representing the actual apps that are distributed (such as Reader Apps and Newsfeed Apps).

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.


62

�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 fea-ture 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 differ-ent 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.

�Filter name and values. The name of the Store filter and the values used in the Filter list.

�Segment Filters. The values used in the Library Filter.

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.


63

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:

PublicationFor 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).

ApplicationFor 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.

�Subscriptions. For managing Apple iTunes Subscriptions and non-Apple iTunes Subscriptions.

GeneralFor 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.

�User Maintenance. For managing user accounts.

Manage(Only available for System Maintainers) For accessing the following components:

�Domains. For managing Domains.

�Displays. For managing Displays.

�Renditions. For managing Renditions.

My AccountFor accessing the following components:

�User. For changing the user details of the cur-rently logged in user.


64

2.2 User Types

The system defines three types of users:

�System Maintainer. Can make changes 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 compo-nents 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.)

�General User. Can perform general tasks in the Domain to which the user has been given access to.

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 provid-ing WoodWing with the relevant information so that they can perform the task for you.


65

Table 2.2. CDP access rights

Tab Area Component TaskSystem

MaintainerSystem Admin

General User

Publication Publication Overview

Issue Add/delete/edit Segment Add/delete/edit/sort

Rendition Add/delete/edit (as part of issue or Segment)

Application

Application Maintenance

Application

Add Edit 1

Delete Minimum version control Managing Library Filters Managing Displays Rendition Mapping

MetadataView Add/edit/delete

Push Notifications Message

Add Certificate Key Write message

Apple Subscriptions Subscription Add/delete/edit

General

Device Maintenance Device Add/delete/edit

Global Device Maintenance Device Add/delete/edit

User Maintenance User Add/delete/edit


1 A limited number of properties only.


66

Table 2.2. CDP access rights (continued)

Tab Area Component TaskSystem

MaintainerSystem Admin

General User

Manage

Domains Domains Add/delete/edit Displays Displays Add/delete/edit Renditions Renditions Add/delete/edit

My Account User Account User

Add Edit Delete


67

3. Setting Up the CDP Environment

When using the CDP environment for the first time, the system has to be set up with the required components. 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

Each task is outlined in the following sections.

If your CDP environment is already set up, use the tasks as outlined in section 4. Managing the CDP

Environment.

3.1 Adding a Domain

Managing Domains is a task of the System Maintainer (in a hosted service, this is WoodWing). To have a Domain added, do the following:

�Send an e-mail to [email protected], stat-ing the request. Make sure to include a valid Purchase Order.

mailto:services%40woodwing.com?subject=


68

3.2 Adding a Reader Application

Managing Reader Apps is a task of the system admin-istrator (WoodWing). To have a Reader App added, do the following:

Step 1. Send an e-mail to [email protected] 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.

Step 2. Fill out the form and return it to WoodWing.

WoodWing will process the request for you and provide you with the relevant settings required for building a Reader App with Store functionality:




�The Application version of the Reader App. (This version number will be applied to all issues which are subsequently uploaded to that Reader App.)

Reader Apps and minimum versionsVersion numbering is defined on the following levels:

�Reader App level. This is the highest level and acts as the default for all Renditions defined for that app.

�Rendition level. When required, each Rendition of a Reader App can be given its own minimum version number.

When a minimum version number is defined for a Rendition, it will overrule the

Reader App minimum version number; when no minimum version number is defined for a Rendition, the Reader App minimum version number is used.

Minimum version numbers cannot be defined on Segment level; Segments will

always be assigned the minimum version num-ber of the Rendition that they are part of.




69

3.3 Adding a User

Managing Users is a task of the system administrator (WoodWing). To have a user added, do the following:

�Send an e-mail to [email protected], stating the request. Include the following information:

�Full name �E-mail address

An initial password will be provided; make sure that the user changes this to a personal password by modifying its account details. (For more information, see section 4.9.2 Editing a User Profile.)

3.4 Adding an Issue

Once the CDP environment has been set up for you, you are ready to add your magazine content.

Content can be delivered in two ways:

�As an issue containing the full content

�As an issue divided into Segments





70

3.4.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). For more information about adding a maga-zine in Segments, see section 3.4.2 Adding an Issue in Segments.)

To add an issue without segments to the Content Delivery Platform, perform the following steps:

Segments cannot be added at a later stage (applies to full issues only); when Segments are to be used,

make sure to include them when setting up a full issue as explained in the steps below.

Step 1. Prepare the magazine upload file by creating a ZIP file or ofip file containing the following:

�magazine.xml file �images folder �other folders where applicable

Step 2. In the Publication Overview pane, select the Reader App to which the issue needs to be added.

Step 3. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Issue.

On the main screen, the Add Issue screen appears.

Step 4. Enter the details pertaining to the issue:

Step 4a. Payment Type, choose the type of payment to use:

�Paid �Free

�Subscription

Step 4b. Product ID. 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. (See chapter 14, Distributing Reader Apps With Store – section 4.1 Registering With iTunes Connect.)

�Free or Subscription-only issues: the ID for the issue that will be used for reporting.

Step 4c. Name. 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.)

Step 4d. Date and time. The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam.)

To make the issue available immedi-ately, leave the date & time as is.

Step 4e. Subtitle. (Optional) The subtitle to be displayed in the Store.

Step 4f. Description. (Optional) A short description of what the issue is about; this will be displayed in the Store.

Step 4g. Filter. (Optional, only when defined for the Reader App) From the Filter list, choose a filter option.

This ensures that when a user chooses this option from the Store


71

Filter, that the issue is included in the search results.

Step 4h. Segments. Leave set to No.

Step 5. Click Add.

The Issue is added to the Publication Overview pane and in the main window, the Issue screen appears.

Step 6. Click Add Rendition.

The Add Rendition screen appears.

Step 7. Enter the details pertaining to the Rendition:

Step 7a. R e n d i t i o n . C h o o s e th e Rendition which is representative for the issue.

In other words: when the issue is pri-marily aimed at viewing it on an iPad,

choose the iPad Rendition here.

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 7b).

Step 7b. Reader App Minimum Version. The default minimum

version for the selected Rendition is auto-matically set when the page is loaded and each time a Rendition is chosen from the Rendition list. The value used is the value as defined on the Reader Application page (for more information, see Reader Apps and minimum versions).

In case a different minimum version num-ber needs to be used, manually change the value.

Step 7c. Upload File. Click Browse to locate the magazine upload file created in Step 1 and click Open.

The upload will start. The progress is visual-ized by a progress bar.

The content of the uploaded file is verified and the results are displayed in the Report box.

If the validation fails, possible reasons are provided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable.

Step 7d. 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.

Uploading the images can be done while the issue content is being uploaded, you

don’t have to wait for the upload to be completed.

Click on a preview to view it in full size in a new window.

Step 8. Click Save.

The Deploy window appears with a summary of the files that are to be uploaded.

Step 9. Click Save & Finish to upload the files to the Content Delivery Network.


72

The Deploy screen now shows progress bars with which the upload process can be followed. As soon as all files are uploaded, the OK button becomes available.

Step 10. Click OK to close the window.

The Rendition screen appears.

The process is hereby complete.

3.4.2 Adding an Issue in Segments

When a magazine is made up of Segments, the user can download the magazine in separate Segments (this in contrast to a complete issue, where the full magazine is always downloaded in full). For more information about adding a full magazine, see section 3.4.1 Adding a Full Issue.)

When adding an issue containing Segments, an empty issue is defined in the system first to which all required segments are added.

Step 1. Prepare the upload files by creating a ZIP file or ofip file for each Segment. Each file should containing the following:

�magazine.xml file �images folder �other folders where applicable

Phase 1. The first part of the process is the creation of the empty issue to which the Segments will be added.

Step 2. In the Publication Overview pane, select the Reader App to which the issue needs to be added.

Step 3. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Issue.

On the main screen, the Add Issue screen appears.

Step 4. Enter the details pertaining to the issue:

Step 4a. Payment Type, choose the type of payment to use:

�Paid �Free �Subscription


73

Step 4b. Product ID. 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. (See chapter 14, Distributing Reader Apps With Store – section 4.1 Registering With iTunes Connect.)


Step 4c. Name. 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.)

Step 4d. Date and time. The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam.)

To make the issue available immedi-ately, leave the date & time as is.

Step 4e. Subtitle. (Optional) The subtitle to be displayed in the Store.

Step 4f. Description. (Optional) A short description of what the issue is about; this will be displayed in the Store.

Step 4g. Filter. (Optional, only when defined for the Reader App) From the Filter list, choose a filter option.

This ensures that when a user chooses this option from the Library

Filter, that the issue is included in the search results.

Step 4h. Segments. Select Yes.

In the bottom half of the screen, the Renditions appear which have been defined in the system by WoodWing.

Step 5. Add the previews for the Rendition to which the Segment should belong in the speci-fied dimensions by using the respective Add/Change buttons.


Step 6. Click Add.

The Issue is added to the Publication Overview pane and in the main window, the Issue screen appears.

Phase 2. The next step of the process is to add the Segments to the created issue, one by one.

Step 7. In the Publication Overview pane, select the Issue to which the Segment needs to be added.

Step 8. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Segment.

The Add Issue screen appears (a Segment is essentially an Issue.)

Step 9. Enter the details pertaining to the Segment:

Step 9a. Product ID. Enter one of the following:

�Paid issues: The ID that was defined for the issue’s in app purchase in iTunes Connect. (See chapter 14, Distributing


74

Reader Apps With Store – section 4.1 Registering With iTunes Connect.)


Step 9b. Name. Name of the issue used in the Content Delivery Platform and on the development devices. (Note that the Reference Name for the issue’s in app purchase as defined in iTunes Connect is shown in the Store.)

Step 9c. Subtitle. (Optional) The subtitle to be displayed in the Store.

Step 9d. Description. (Optional) A short description of what the Segment is about; this will be displayed in the Store.

Step 9e. Filter. (Optional, when defined for the Reader App) From the Filter list, choose a filter option.

This ensures that when a user chooses this option from the

Segment Filter, that the Segment is included in the search results.

Step 9f. Click Add.

The Segment is added to the issue in the Publication Overview pane and in the main window, the Issue screen appears.

To each Segment, content intended to be used for specific Renditions is to added.

Step 10. On the Issue screen, click Add Rendition.



Step 11a. Rend i t ion . Choose the Rendition on which the issue is to be viewed.

Step 11b. Reader A pp Min imum Version. Cannot be changed for Segments. The minimum version num-ber used is the number set for either the Reader App or the Rendition. (For more information, see Reader Apps and mini-mum versions.)

Step 11c. Upload File. Click Browse to locate the Segment upload file created in Step 1 and click Open.

The upload will start. The progress is visual-ized by the progress bar.



Step 11d. 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.

Uploading the images can be done while the Segment content is being

uploaded, you don’t have to wait for the upload to be completed.



75

Step 11e. Click Save.





The Rendition screen appears for the created Segment.

Step 14. (Optional) Repeat Steps 2 – 13 to add as many Segments to the issue as required.


All added Segments are now also listed on the Issue page. For more information, see section 4.2.3

Editing an Issue.

3.4.3 Adding a Subscription

When making use of a Subscription Service, details of this service need to be entered into the Content Delivery Platform so that both systems can properly communicate with each other.

To add a Subscription Service, perform the following steps:

Step 1. In the Application Maintenance sec-tion of the Application pane, select the Reader App to which the subscription needs to be added.

Step 2. Click Edit.

Step 3. (Optional, for adding an iTunes Subscription only). Do the following:

Step 3a. In the iTunes Subscription sec-tion, click Yes.

An additional field appears.

Step 3b. Enter the iTunes Shared Secret.

Step 3c. Click Save.

Step 3d. In the Apple Subscriptions section of the Application pane, select the Reader App to which the iTunes subscrip-tion needs to be added.

Step 3e. From the toolbar at the top of the Application pane, click Add.

Additional fields appear.

Step 3f. Add the following information:


76

�Product ID: The product ID as defined in iTunes Connect. This works the same as the product identifier for issues.

�Description: the offer as it should appear on the buttons on the Offer page (for example: 90 days, 180 days, etc.)

Step 3g. Click Add.

Step 3h. Repeat steps 3e – 3g to add additional offers as required.

Step 4. (Optional, for adding a non-iTunes Subscription only). Do the following:

Step 4a. In the Subscription section, click Yes.

Additional fields appear.

Step 4b. Enter the Subscription Server URL.

Step 4c. Choose the Subscript ion failover behavior.

Step 4d. Click Save.

3.5 Adding a Development Device

Now that your Reader App and content is available in the system, you might want to test it before the content is made public. This can be done by assigning a tablet or other device to a Reader App in the system. (Such devices are referred to as Development Devices.) When accessing the Reader App on such a device, all issues that are part of that Reader App will be available for free (including those which are not yet public).

To assign a Development Device to a Reader App, per-form the following steps:

Step 1. In the General pane, choose the Domain to which the Device needs to be added.

Step 2. From the toolbar at the top of the General pane, click Add.

The Add Device screen appears.

Step 3. Add the following information:

�Device ID: The ID of the device.

�Device Comment: (Optional) Additional comments to clarify the use of the device

Step 4. Click Add.


77

4. Managing the CDP Environment

Once your environment is in place, 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

Each task is described in the following sections.

If you are using the CDP for the first time and your environment is not yet in place, 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..

The following tasks cannot be performed by a General User; if these need to be managed (changed, deleted, etc.) contact WoodWing by sending an e-mail to [email protected], stating the request:

�Managing Domains �Managing Reader Applications �Managing Renditions on a system level �Managing Displays �Adding/removing users

4.1 Configuring Reader Apps

To configure a Reader App, perform the following steps:

For viewing and/or configuring the metadata of the app, see section 4.1.1 Configuring the Metadata.

Step 1. In the Application Maintenance sec-tion of the Application pane, select the Reader App which needs to be configured.

The Reader App screen appears.

Step 2. Click Edit.

Step 3. Change any of the following properties:

If you do not have permission to change these properties yourself, send an e-mail

to [email protected], stating the request. (Make sure to include what the change should be.)

�Type: type of App: Reader or Newsfeed.

�Status: status of the app: Active (calls will be received by the CDP from the Reader App) or Disabled (calls will not be received by the CDP from the Reader App).

�Host: The host as used in the Reader App configuration.

In the following example, nlkiosk.woodwing.net is used as the host. The full host URL should then be as follows:

�https://nlkiosk.woodwing.net/reader/json/





78

�Product ID: the unique product ID for the app.

�Name: name of the app.

�Default Rendition: the default Rendition for the app.

�Reader App minimum version. For more information, see section 3.2 Adding a Reader Application.

Step 4. Change any of the following fields (as applicable to the type of Reader App used):

Step 4a. Android Market: availability. When choosing Yes, enter the Android Market Public Key.

Step 4a. B lackberr y App Wor ld : availability.

Step 4b. iTunes Store: availability.

Step 4c. iTunes Subscriptions: avail-ability. When choosing Yes, enter the iTunes Shared Secret.

Step 4d. Subscriptions: availability. When choosing Yes, enter the Subscription Server URL and define the Subscription failover behavior.

Step 4e. Store/Library Filter: availability. When choosing Yes, enter the Filter Name (name as displayed on the issue page) and the Filter values.

Step 4f. Segment Filter: availability. When choosing Yes, enter the Filter values.

Step 4g. Display Mapping: choose the Rendition to use when the Reader App is used on the specified device.

Step 4h. Rendition Encryption: select the Rendition(s) which content need to be encrypted.

For important information about using encryption, see section 6. Magazine

Encryption.

Only magazines which are uploaded after the encryption functionality has

been enabled for that Rendition are encrypted; already uploaded magazines are not encrypted.

Step 4i. Rendition Minimum Version. By default, the minimum version as set for the Reader App itself is used for each Rendition. If a Rendition requires a different minimum version number, enter one here. (For more information, see Reader Apps and minimum versions.)

Step 5. Click Save.


79

4.1.1 Configuring the Metadata

In order to view and/or edit the Reader App metadata, perform the following steps:

Step 1. In the Application Maintenance sec-tion of the Application pane, select the Reader App which needs to be configured.

The Reader App screen appears.

Step 2. Click Metadata.

The Metadata screen appears.

Step 3. To edit the metadata, click Edit.

Step 4. Modify the metadata as required.

Step 5. When ready, click Save.

4.2 Managing Issues

Issues can be managed in the following ways:

�Add

�Delete

�Edit

�Add Rendition

�Convert to HTML5


4.2.1 Adding an Issue

For information about adding an Issue, see section 3.4 Adding an Issue.


80

4.2.2 Deleting an Issue

To delete an issue, perform the following steps:

Step 1. In the Publication Overview pane, select the issue which needs to be deleted.

The issue screen appears.

Step 2. Click Delete Issue.

Step 3. A message appears asking to confirm the action.

Step 4. Respond to the message by doing one of the following:

�Click Cancel to continue without deleting the issue.

�Click Delete to delete the issue and all its components

4.2.3 Editing an Issue

To edit an issue, perform the following steps:

Step 1. In the Publication Overview pane, select the issue which needs to be edited.


Step 2. Click Edit.


When no content has been uploaded yetStep 3a. Change any of the available fields as required.

When content has been uploadedStep 3a. (Optional) Click on a preview to view it in full size in a new window.

Step 3b. Change the magazine content or any of the previews.

All fields can be modified, with the exception of the product ID and the

payment type.

When either is done, the old files need to be purged.

Step 3c. Send an e-mail to [email protected] to request having the old files removed. Please include the prod-uct ID and names of the files which have changed.

You will be informed by WoodWing when the old files are removed and the new files are available.




81

4.2.4 Adding a Rendition

To add a Rendition to an issue, perform the following steps:

Step 1. In the Publication Overview pane, select the issue to which the Rendition needs to be added.



Step 3. From the Rendition list, choose the required Rendition.

The list will only show those Renditions which have not been assigned to the

issue yet.

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.).

Step 4. R e a d e r A p p M i n i m u m Version. 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 value used is the value as defined on the Reader Application page (for more information, see Reader Apps and minimum versions).

In case a different minimum version number needs to be used, manually change the value.

Step 5. Upload File. Click Browse to locate the Segment upload file and click Open.

The upload will start. The progress is visualized by the progress bar.


If the validation fails, possible reasons are pro-vided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable.

Step 6. 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 7. Click Save.







82

4.2.5 Convert to HTML5

Non-HTML5 issues can be converted to HTML5 format for use on the HP TouchPad.

Issues which are converted to HTML5 in this way cannot be used for the HTML5 Reader App.

For more information about converting an issue into HTML5 format, see section 4.6 Managing HTML5 Conversions.

4.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


4.3.1 Adding to a New Issue

For information about adding a Segment to a new issue, see section 3.4.2, Adding an Issue in Segments - Phase 2.


83

4.3.2 Adding to an Existing Issue

To add a Segment to an existing issue, perform the fol-lowing steps:

Adding additional Segments to an Issue is only pos-sible for those issues which have been set up to

contain Segments during the creation steps of an issue.

Step 1. In the Publication Overview pane, select the issue to which the Segment needs to be added.


Step 2. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Segment.

The Add Issue screen appears (a Segment is essentially an Issue.)

Step 3. Enter the details pertaining to the Segment:

Step 3a. Product ID. (Optional) Change the default Segment suffix (child.1) to a more meaningful description.

Step 3b. Name. Name of the issue used in the Content Delivery Platform and on the development devices.

Step 3c. Subtitle. (Optional) The subtitle to be displayed in the Library.

Step 3d. Description. (Optional) A short description of what the Segment is about; this will be displayed in the Library.

Step 3e. Segment Filter. (Optional) From the Filter list, 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, the Segment will be included in the search results).

Step 4. Click Add.

The Segment is added to the issue in the Publication Overview pane and in the main window, the Issue screen appears.


84

4.3.3 Deleting a Segment

To delete a Segment, perform the following steps:

Step 1. In the Publication Overview pane, select the Segment which needs to be deleted.

The Segment screen appears.

Step 2. Click Delete Issue.

A message appears asking to confirm the action.


�Click Cancel to return to Segment screen without deleting the Segment.

�Click Delete to delete the Segment and all its components (Renditions).

4.3.4 Editing an Segment

To edit a Segment, do one of the following:

When no content has been uploaded yet �Change any of the available fields as

required.

When content has been uploaded �Change the magazine content or any of the

previews.

All fields can be modified, with the excep-tion of the date and time fields (these are

inherited from the parent issue).

When either is done, the old files need to be purged:

�Send an e-mail to [email protected] to request having the old f iles removed. Please include the product ID and names of the files which have changed.


�(Optional) Click on a preview to view it in full size in a new window.




85


To add a Rendition to a Segment, perform the following steps:

Adding a Rendition to a Segment is only possible when no Renditions have been added to the

Segment yet.

Step 1. In the Publication Overview pane, select the Segment to which the Rendition needs to be added.



Step 3. From the Rendition list, choose the required Rendition.

The list will only show those Renditions which have not been assigned to the

issue yet.

Step 4. Reader App Minimum Version. Cannot be changed for Segments. The mini-mum version number used is the number set for either the Reader App or the Rendition. (For more information, see Reader Apps and mini-mum versions.)

Step 5. Upload File. Click Browse to locate the Segment upload file created in Step 1 and click Open.

The upload will start. The progress is visualized by the progress bar.


If the validation fails, possible reasons are pro-vided. Resolve these as needed. Until a valid

file has been offered, the Save button will stay unavailable.

Step 6. 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.

Uploading the images can be done while the Segment content is being uploaded,

you don’t have to wait for the upload to be completed.


Step 7. Click Save.







86

4.3.6 Sorting Segments

To sort Segments, perform the following steps:

Step 1. In the Publication Overview pane, select the issue for which Segments need to be sorted.



�On the issue screen, click Sort Child Issues.

�From the toolbar at the top of the Publication Overview pane, click Sort.

The Sort screen appears.

Step 3. Sort the Segments by dragging them in the desired order.

Step 4. Click Save.

4.4 Managing Renditions

Managing Renditions should be seen here as using the Renditions which are available in the system.

The availability and properties of the Renditions is man-aged by the System Maintainer; this process is not described here.

Renditions can be managed in the following ways:

�Add to issue

�Delete from issue

�Edit assigned Rendition



87


To add a Rendition to an issue, perform the following steps:

Adding a Rendition to an issue is only possible when no Renditions have been added to the issue yet.

Step 1. In the Publication Overview pane, select the issue to which the Rendition needs to be added.



�On the issue screen, c l ick Add Rendition.

�From the toolbar at the top of the Publication Overview pane, click Add, fol-lowed by Rendition.




Step 4a. R e n d i t i o n . C ho os e th e Rendition on which the issue is to be viewed.

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 4b).

Step 4b. Reader App Minimum Version. The default minimum

version for the selected Rendition is auto-matically set when the page is loaded and

each time a Rendition is chosen from the Rendition list. The value used is the value as defined on the Reader Application page (for more information, see Reader Apps and minimum versions).

In case a different minimum version num-ber needs to be used, manually change the value.

Step 4c. Upload File. Click Browse to locate the magazine upload file and click Open.

The upload will start. The progress is visual-ized by a progress bar.



Step 5. 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 6. Click Save.


88







4.4.2 Convert to HTML5

Non-HTML5 Renditions can be converted to HTML5 for-mat for use on the HP TouchPad.

Renditions which are converted to HTML5 in this way cannot be used for the HTML5 Reader App.

For more information about converting a Rendition to HTML5 format, see section 4.6 Managing HTML5 Conversions.


89

4.4.3 Deleting a Rendition

To delete a Rendition, perform the following steps:

Step 1. In the Publication Overview pane, select the Rendition which needs to be deleted.


Step 2. Click Delete.



�Click Cancel to return to Rendition screen without deleting the Rendition.

�Click Delete to delete the Rendition.

4.4.4 Editing an Rendition

To edit a Rendition, do one of the following:

�Change the magazine content or any of the previews.

When either is done, the old files need to be purged:

�Send an e-mail to [email protected] to request having the old f iles removed. Please include the product ID and names of the files which have changed.


�Click on a preview to view it in full size in a new window.




90

4.5 Managing Subscriptions

Subscriptions can be managed in the following ways:

�Add

�Delete

�Edit

�Sort


4.5.1 Adding Subscription

For information about adding a Subscription, see section 3.4.3 Adding a Subscription.

4.5.2 Deleting a Subscription

To delete a Subscription, perform the following steps:

Step 1. In the Apple Subscriptions section of the Application pane, select the Subscription which needs to be deleted.

The Subscription screen appears.




�Click Cancel to return to Subscriptions screen without deleting the Subscriptions.

�Click Delete to delete the Subscriptions.


91

4.5.3 Editing an Subscription

To edit a Subscription, perform the following steps:

Step 1. In the Apple Subscriptions section of the Application pane, select the Subscription which needs to be edited.

The Subscription screen appears.

Step 2. Click Edit.

Step 3. Change any of the available fields as required.

Step 4. Click Save.

4.5.4 Sorting Subscriptions

To sort Subscriptions, perform the following steps:

Step 1. In the Apple Subscriptions section of the Application pane, select the Reader App for which Subscriptions needs to be sorted.

Step 2. From the toolbar at the top of the Publication Overview pane, click Sort.

The Sort screen appears.

Step 3. Sort the Subscriptions by dragging them in the desired order.

Step 4. Click Save.


92

4.6 Managing HTML5 Conversions

Non-HTML5 content can be converted to HTML5 format for use on the HP TouchPad. This process is managed from the Mass HTML5 Export screen, accessed by selecting the Reader App for which the conversions need to be managed from the Publication Overview pane of the Publication tab.

Content which is converted to HTML5 in this way cannot be used for the HTML5 Reader App.

The Mass HTML5 Export screen shows each issue shaded in dark gray, followed by each available Rendition for that issue in light gray.

Indicators in the HTML column display the current status:

�No indicator: the issue or Rendition is not converted.

�Green tick: the issue or Rendition has been converted to HTML5 and is up-to-date.

�Red cross: the issue or Rendition has been converted but the conversion proces was unsuccessful. (To resolve this problem, perform steps 1 to 6 from section 4.6.1 Converting to HTML5 Format.)

�Yellow exclamation mark: the issue or Rendition has been converted to HTML5 but a newer version of the issue or Rendition is avail-able. (Convert this newer version by performing the steps found in section 4.6.1 Converting to HTML5 Format..)

The following processes can be managed:

�Converting issues or Renditions to HTML5 format

�Removing converted HTML5 issues or Renditions



93

4.6.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. Upload the non-HTML5 content as described in section 3.4 Adding an Issue.

Step 2. In the Publication Overview pane, select the Reader App which contains the con-tent that needs to be converted.

The Mass HTML5 Export page appears, show-ing each issue shaded in dark gray, followed by each available Rendition for that issue in light gray.

Step 3. Select one or more issues and/or Renditions which need to be converted to HTML5.

When selecting an issue or Rendition con-taining Segments, all these Segments will

be converted as well.

Step 4. Click Convert.

A HTML5 Export window appears confirming the number of issues/Renditions which will be converted.

Step 5. Click Save & Finish.

The HTML5 Export window now shows prog-ress bars with which the conversion and upload process can be followed. As soon as all files are uploaded, the OK button becomes available.


The Reader App screen appears, 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, repeating steps 1 to 6 will normally resolve the problem.


94

4.6.2 Removing Converted Content

In case issues or Renditions are no longer required to be available in HTML5 format, they can be removed by performing the following steps:

Step 1. In the Publication Overview pane, select the issue containing the converted content.

The details page for that issue appears.

Step 2. Click Delete HTML Versions.

A message appears asking to confirmation the action.

Step 3. Respond to the message as follows:

�Click Cancel to return to the issue details page without removing the converted issue.

�Click Delete to delete the converted HTML content for that issue.


4.7 Managing Development Devices

Development Devices can be managed in the following ways:

�Add

�Delete

�Edit


4.7.1 Adding a Development Device

For information about adding a Development Device, see section 3.5 Adding a Development Device.


95

4.7.2 Deleting a Development Device

To delete a Development Device, perform the following steps:

Step 1. In the General pane, select the Development Device which needs to be deleted.

The Development Device screen appears.


Step 3. A message appears asking to confirm the action.


�Click Cancel to continue without deleting the Development Device.

�Click Delete to delete the Development Device and all its components

4.7.3 Editing a Development Device

To edit a Development Device, perform the following steps:

Step 1. From the Device Maintenance section of the General pane, select the Development Device which needs to be edited.

The Development Device screen appears.

Step 2. Click Edit.

Step 3. Do any of the following:

�Change the Device Comment.

�(Optional, only when a user is located in multiple domains) Select the Domain(s) which the Development Device should be part of.

Step 4. Click Save.


96

4.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 messages, typically to inform them that new releases are available such as those of the Reader App.

� To notifiy the Newsstand (as part of iOS 5) that a new version of the issue is

available. (For more information about the Newsstand feature, see chapter 7, Customizing the iPad Reader App – 9.11, Newsstand (iOS 5).)

Each is explained in the next sections.

4.8.1 Sending a Message to Users

In order for the user to receive such messages, he/she needs to have agreed upon receiving them (by confirming this when launching the Reader App for the first time).

Keep in mind the following:

�The message is shown as soon as it is received by the device, the Reader App itself does not have to be opened.

�It is not guaranteed that the message reaches the user; messages can be delayed or failed to be delivered.

To send a message to Reader App users, do the following:

Step 1. In the Push Notifications pane of the Application tab, select the Reader App to which a message needs to be sent.

The Push Notifications page appears.

Step 2. (Optional, only required when setting up the environment for the first time). Upload the required certificate by doing the following:

Step 2a. Generate the Apple Push Notification (APN) Certificate as described in http://developer.apple.com/library/ios/#documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ProvisioningDevelopment/ProvisioningDevelopment.html.

Step 2b. Export the APN Certificate as described in the above link but make sure to use an empty password for the certificate.

http://developer.apple.com/library/ios/#documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ProvisioningDevelopment/ProvisioningDevelopment.html







97

Step 2c. In the Certificate section of the Push Notifications screen, click Add.

Step 2d. Browse to the location where the exported certificate is stored.

Step 2e. Click Open.

Step 3. In the Send Notif ication section, make sure that the Send Notification to Newsstand option is set to No.

The Message box appears.

Step 4. 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.

Step 5. (Optional) If the message is only to be sent to development devices, select the Only Development Devices check box.

Step 6. Click Send to send the message.

Details of the sent message are displayed in the Message Overview section of the screen, with the Sent column displaying the current status of the message:

In progress

Message sent

Message could not be sent

Step 7. To verify if the message has been sent completely, select the Reader App in the Push Notifications pane of the Application tab once more.

The more registered devices exist, the longer it takes to send out the message.


98

4.8.2 Sending a Newsstand Notification

When the Reader App is made part of the Newsstand, a notification can be send to inform the

Newsstand that a new version of an issue is available. This will trigger an automatic download of that issue. (For more information, see chapter 7, Customizing the iPad Reader App – 9.11, Newsstand (iOS 5).)

To send out the notification, perform the following steps:

Apple specifies that only one notification can be send out every 24 hours.

Step 1. In the Push Notifications pane of the Application tab, select the Reader App for which a notification needs to be sent.

The Push Notifications page appears.

Step 2. In the Message Overview section of the screen, verify that no notification has been sent within the last 24 hours. If so, wait until this time period has passed before sending out a new notification.

Step 3. (Optional, only required when setting up the environment for the first time). Upload the required certificate by doing the following:

Step 3a. Generate the Apple Push Notification (APN) Certificate as described in http://developer.apple.com/library/ios/#documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ProvisioningDevelopment/ProvisioningDevelopment.html.

Step 3b. Export the APN Certificate as described in the above link but make sure to use an empty password for the certificate.

Step 3c. In the Certificate section of the Push Notifications screen, click Add.

Step 3d. Browse to the location where the exported certificate is stored.

Step 3e. Click Open.

Step 4. In the Send Notif ication section, make sure that the Send Notification to Newsstand option is set to Yes.

The Select Issue list appears, showing the last 10 active issues.

Step 5. From the Select Issue list, choose the issue for which a notification needs to be send.

The options are only available when a cer-tificate is successfully added and a

registered device is found.

Step 6. (Optional) If the notification is only to be send to development devices, select the Only Development Devices check box.

Step 7. Click Send to send the notification.

Details of the sent notification are displayed in the Message Overview section of the screen, with the Sent column displaying the current sta-tus of the notification:

In progress

Message sent

Message could not be sent

Step 8. To verify if the notification has been sent completely, select the Reader App in the Push Notifications pane of the Application tab once more.








99

The more registered devices exist, the longer i t takes to send out the

notification.

4.9 Managing Users

Users can be managed in the following ways:

�Add

�Edit


4.9.1 Adding a User

For information about adding a user, see section 3.3 Adding a User.

4.9.2 Editing a User Profile

To edit a user profile, do the following:

Step 1. In the top right-hand corner of the screen, click My Account.

The User Settings screen appears.

Step 2. Change any available fields as needed.

Step 3. Click Save.


100

5. Progressive Downloads

By default, the CDP provides content progressively to the user. 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.

The behavior of the progressive download process is as follows:

�Download is started: an initial package is downloaded, consisting of the magazine.xml file, the cover and all thumbnails.

�When user does not interact with the magazine, stories will be downloaded in order of appearance (first story first, last story last).

�When the user accesses a story (in any possible method, for instance by tapping a pre-view in the Story Navigator, tapping a Dossier Link on the cover, etc), the following rules apply:

�The currently visible story maintains the highest download priority and its content will be displayed immediately.

“Immediately” in this context means whenever the tablet has a download

slot (thread) available. In the case of the iPad for instance, 3 threads are active at all times. None of the threads will be can-celled, but each will finish first before the next is started. In the extremely rare situa-tion where all three threads are downloading a large video, ‘immediately’ may take a while (until a thread is available).

�The story next in line will have “normal” priority.

�Stories that are linked within the currently visible story (by means of a Dossier Link), will also have “normal” priority.

�All other stories will have “low” priority.

ConfigurationNo specific configuration is required to make use of the progressive download feature; all is taken care of by the Content Delivery Platform. Also, the magazine content can be uploaded as a .zip file as normal.


101

6. Magazine Encryption

In order to prevent magazines from being copied between unauthorized devices, a magazine can be encrypted. This process (which is optional) takes place during the upload of the magazine to the Content Delivery Platform.


Reader App.

During the encryption process, the magazine.xml file is encrypted and can only be read by a Reader App which has access to the encryption key. This key is sent to the Reader App when it sends a request for download information.

Encryption and RenditionsDetermining whether or not a magazine is encrypted is specified on Rendition level.

Magazine encryption is currently only supported by the iPad Reader App. 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, such as on Android). Any non-iPad Reader Apps currently can-not read encrypted magazines. We therefore advise to make use of this feature for those issues which are pub-lished to the iPad only.

Encryption and minimum Reader App versionMaking use of this new feature will require a Reader App update to be released (see chapter 7, Customizing the iPad Reader App, section 5.5.2, Update Release.)

Encryption and existing issuesOnly magazines which are uploaded after the encryp-tion functionality has been enabled for that Rendition are encrypted; already uploaded magazines are not encrypted, but can still be read by the updated Reader App.

102

G

102

Customizing the HTML Store is important when you want to achieve any of the following:



This appendix describes how to customize the HTML Store.

1. Required Tools

In order to perform the steps as outlined in this appendix, the following tools are required:

�CSS editor. For editing CSS files. Use your favorite editor for this task.

�Image editor. For editing images. Use your favorite editor for this task.

�Config files editor. For editing configuration files. Use your favorite editor for this task, such as an XML editor or plain-text editor.

Locating customizable componentsTo locate a specific component of the Store or to verify its properties, view the Store in a Web Browser and use browser’s tools such as the Developer Tools.

Customizable components are referenced in this appen-dix by the CSS files in which they appear and the class selectors in which they are used. This allows you to quickly reference the source files for making the required changes.

Customizing the HTML Store

Appendix G Customizing the HTML Store

103

2. The Store

The Store is used for showing the user the available issues for a particular title, and to offer the user the possibility to download individual issues (either free of charge or as part of a subscription).

The Store functionality is only available in the Pro, Framework, Subscr iption, and the Apple

Subscriptions Editions of the Reader App.

The Store consists of the following main components:

�Top Toolbar. Contains buttons for performing the following tasks:

�Back to Magazine. (iPad Reader App only) For returning to an opened issue.

�Filters. For filtering the content on spe-cific values.

�Grid View/Single Issue View. For changing the display method.

�Sign In/Sign Out . (Non-iTunes Subscription services only) For signing in or out of a non-iTunes Subscription service.

�Subscription offers page. A Web page for advertising subscription offers.

�Upgrade bar. Contains buttons for sub-scribing to a new subscription or upgrading an existing subscription.

�Store view. Shows the available issues in either multiple-issue view (also referred to as the grid view) or single-issue view.

�Store Filter. For filtering the content of the Store.

�Issue preview. Shows a preview of the issue content, usually in the form of a representative page or the table of contents.

�Subscription Sign In window. For signing in to an non-iTunes Subscription service.

See images on the next pages.

Since the layout of the Store is all done in HTML, 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.

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



104

Figure 2a. The HTML Store in Grid view mode with the Subscriptions Offer page shown at the top

A

C

D

B

A Top Toolbar B Subscription offer page C Upgrade bar D Store view in multiple-issue mode


105

Figure 2b. The HTML Store in issue preview mode

A

A Issue preview


106

Figure 2c. The Store Filter of the HTML Store

A Store Filter

A


107

Figure 2d. The subscription sign-in window

A

A Subscription sign-in window


108

2.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. Using this call, 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.

The HTML Store that is bundled with this release does not yet use this feature.

The URL used in the API is: URL ww://issues/open/[id].


109

3. Project Files

Customization of the HTML Store is achieved by editing various types of files which are provided as part of the Reader App.

The following types of files can be edited:

�Configuration files. Used for configuring the Store functionality:

�DMSettings.plist file. For configuring Store functionality in the Reader App.

�Images. Used for changing the appearance of the Store in the form of buttons, icons, etc. Images are stored in the following location:

�Resources/htmlstore/storefront/themes

Folders exist for each Reader App platform:

�android: images for the Store in the Android Reader App.

�default: images for platforms other than Android or iOS.

�ios: images for the Store in the iPad Reader App.

�CSS files. Used for changing the functional-ity and/or appearance of the Store in the form of background colors, text, etc. Different CSS files are available for different areas of the Store (listed in alphabetical order):

�base.css. Used for controlling the gen-eral appearance and functionality of the Store.

�filters.css. Used for controlling function-ality related to the Store filter.

�gridview.css. Used for controlling func-tionality related to the Gridview mode.

�navigation.css. Used for controlling the appearance of the navigation tools.

�preview.css. Used for controlling the appearance of the issue preview.

�signin.css. Used for controlling the appearance of the subscription sign in dia-log box.

�singleview.css. Used for controlling functionality related to the single view mode.

�subscription.css. Used for controlling the appearance of the Subscription Offer pages.

�toolbar.css. Used for controlling the appearance of the View toolbar.

�webcontainer.css. Used for displaying external content such as the "Forgot my password" page, the "Privacy" page, etc.

Separate CSS files are available for each of the different Reader Apps which have Store functionality. They are stored in the following location:

�All files except the subscription.css file: Resources/htmlstore/storefront/themes

�subscription.css file: /storefront/components/subscription/css/

For all files except the subscription.css file, fold-ers exist for each Reader App platform:


110

�android: CSS files for the Store in the Android Reader App.

�default: CSS files for platforms other than Android or iOS.

�ios: CSS files for the Store in the iPad Reader App.

The configuration of each type of file is explained in the following sections.

3.1 Configuration Settings

When the Store is integrated in the Reader App, the com-munication between the Store and the Content Delivery Platform is handled by the Reader App itself.

For more information about configuring the Store for the iPad Reader App, see chapter 7, Customizing the iPad Reader App – section 7. The Store.

For more information about configuring the Store for the Android Reader App, see chapter 9, Customizing the Android Reader App – section 7. The Store.


111

3.2 Images

Store images include all images used in the Store.


�When renaming images, make sure to also rename their references in the relevant CSS files

�All images need to be in PNG file format

The following images can be customized (in alphabeti-cal order. For examples, see the images on the following pages).

�bg-rail-vertical.png. Reserved for future use.

�bg-rail.png. Displayed when the user taps the left or right Hotzone.CSS reference:

CSS file: navigation.cssClass selectors: .navigator.x.previous

.navigator.x.next

�button.png. (Non-Android Only) Buttons used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.

CSS references:CSS file: gridview.cssClass selectors: .storefront-gridview-

button

CSS file: signin.cssClass selector: .submit-button

CSS file: singleview.cssClass selectors: .storefront-sing-

leview-button

CSS file: toolbar.cssClass selectors: .toolbar .button.

filter .toolbar .button.sign

CSS file: webcontainer.cssClass selectors: .button.sign

.button.back

�ButtonActive.png. (Android only) Buttons used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.

CSS references:CSS file: gridview.cssClass selectors: .storefront-gridview-

button

CSS file: preview.cssClass selector: .preview-button

CSS file: signin.cssClass selector: .submit-button

CSS file: singleview.cssClass selector: .storefront-sing-

leview-button

CSS file: toolbar.cssClass selectors: .toolbar .button

.toolbar .button.singleview .toolbar .button.gridview

CSS file: webcontainer.cssClass selectors: .button.sign

.button.back


112

�ButtonPressed.png. (Android only) Buttons used in the top Toolbar.

CSS references:CSS file: toolbar.cssClass selectors: .toolbar .button.

pressed .toolbar .button.singleview.active .toolbar .button.gridview.active

�checkbox.png. The Remember Me check box in the subscription sign-in window in its deselected state.CSS reference:

CSS file: signin.cssClass selector: .signin .checkbox

�checkboxChecked.png. The Remember Me check box in the subscription sign-in win-dow in its selected state.CSS reference:

CSS file: signin.cssClass selector: .signin .checkbox.

checked

�checkmark.png. Used in the Store Filter for indicating that a list option is selected.CSS reference:

CSS file: filters.cssClass selector: .checkbox-filter

�closeButton.png. Used for closing the issue preview window or the subscription sign-in window.

CSS references:CSS file: preview.cssClass selectors: .preview .close-button

CSS file: signin.cssClass selector: .signin .close-button

�gridview-icon-active-button.png. Grid view button in its selected state.CSS reference:

CSS file: toolbar.cssClass selector: .toolbar .button.grid-

view.active

�gridview-icon-button.png. Grid view but-ton in its non-selected state.CSS reference:

CSS file: toolbar.cssClass selector: .toolbar .button.

gridview

�gridview-item-shadow.png. The shadow below the small issue covers.CSS reference:

CSS file: gridview.cssClass selectors: .storefront-gridview

li

�gridView-shelf.png. The background of the Gridview.CSS reference:

CSS file: gridview.cssClass selectors: .storefront-gridview

�GridviewIcon.png. (Android only) Grid view button.CSS reference:

CSS file: toolbar.cssClass selector: .gridview-img

�single-bg.png. The background of the sin-gle-issue view.CSS reference:

CSS file: singleview.cssClass selectors: .storefront-singleview

�single-shelf.png. Shelf used in single-issue view.CSS reference:

CSS file: singleview.css


113

Class selectors: .page-move-container > div

�singleview-icon-active-button.png. (Non-Android Only) Single-view button in its selected state.CSS reference:

CSS file: toolbar.cssClass selector: .toolbar .button.sin-

gleview.active

�singleview-icon-button.png. (Non-Android Only) Single-view button in its non-selected state.CSS reference:

CSS file: toolbar.cssClass selector: .toolbar .button.

singleview

�SingleViewIcon. (Android Only) Single-view button.CSS reference:

CSS file: toolbar.cssClass selector: .singleview-img

�singleview-item-shadow.png. The background of the Single-view, including the dropshadow.CSS reference:

CSS file: singleview.cssClass selector: .storefront-sing-

leview-shadow


114

Figure 3.2a. The assets of the HTML Store with Grid view mode

A button.png B singleview-icon-button.png C gridview-icon-active-button.png D gridView-shelf.pngE gridview-item-shadow.png

D

A

E

A B C A


115

Figure 3.2b. The single-view mode assets of the HTML Store

A button.png B closeButton.png

A

A


116

Figure 3.2c. The Library Filter asset

A

A checkmark.png

Figure 3.2d. The Subscription sign-in window assets

A closeButton.png B checkboxChecked.png C button.png

BC

A


117

3.3 Colors

Store colors include all colors used in the Store, except those that are part of the Subscription Offer page.

For information about the colors for the Subscription Offer page, see section 3.8 Non-iTunes Subscription

Environment.

The following Store colors can be customized:

Top Toolbar colorsThe following colors relating to the top Toolbar can be customized:

�Top toolbar. The color of the top Toolbar.CSS file: base.cssSelector: htmlClass selector: .header

�Toolbar button labels. The color of the Toolbar button labels (the Filters and Sign In buttons).CSS file: toolbar.cssClass selector: .toolbar .button

Upgrade bar colorsThe following colors relating to the Upgrade bar can be customized:

�Buttons. The colors of the buttons in the Upgrade bar, including the color of the labels.CSS file: base.cssSelector: htmlClass selector: .button

Grid view colorsThe following colors relating to the grid view can be customized:

�Button labels. The color of the Preview Issue and Buy/Free button labels.CSS file: gridview.cssClass selector: .storefront-gridview-

button

�Issue name. The title color of the issue name in the grid view.CSS file: gridview.cssClass selector: .storefront-gridview-

name

�Issue description. The title color of the issue description (also called “Cover Story:”) in the grid view.CSS file: gridview.cssClass selector: .storefront-gridview-

story


118

Single-view colorsThe following colors relating to the single-view can be customized:

�Issue info background. The background color of the issue info.CSS file: preview.cssClass selector: .preview-info

�Button labels. The color of the Preview Issue and Buy/Free button labels.CSS file: singleview.cssClass selector: .storefront-singleview-

button

�Issue name. The title color of the issue name in the single view.CSS file: singleview.cssClass selector: .storefront-singleview-

name

�Issue description. The title color of the issue description (also called “Cover Story:”) in the single view.CSS file: singleview.cssClass selector: .storefront-singleview-

story

Issue preview colorsThe following colors relating to the issue preview can be customized:

�Info background. The background color of the Info pane.CSS file: preview.cssClass selector: .preview-info


119

Subscription sign-in colorsThe following colors relating to the subscription sign-in window can be customized:

�Window header. The background color of the window header and the color of the text.CSS file: signin.cssClass selector: .signin-top

�Links. The color of the links for the “I for-got my password”, “Privacy”, and “License Agreement” text.CSS file: signin.cssClass selector: .link

3.4 Fonts

Store fonts include all fonts used in the Store, except those that are part of the Subscription Offer page.

For information about the fonts for the Subscription Offer page, see section 3.8 Non-iTunes Subscription

Environment.

The following Store fonts can be customized:

�body. CSS file: base.cssClass selector: .body

�signin-top. The font of the header of the Subscription Sign In dialog box.CSS reference: signin.css


120

3.5 Text

The text in the Store includes all text except the text which is part of the Subscription Offer page.

For information about changing the text for the Subscription Offer page, see section 3.8 Non-

iTunes Subscription Environment.


�By changing the actual text �By changing the color of the text



The text which appears in the Store originates from vari-ous sources: labels, issue information, and the Store Filter. Each is described below.

Labels The text of the following labels can be changed:

�Button labels in the Subscription bar, top Toolbar, the grid view, single-issue view, issue preview, and sign-in window

�The “Cover Story” label

�The labels in the Sign-in window

The strings for these labels are stored in the following file:

�htmlstore/storefront/strings/en.json

Each string is made up of a key/value combination; modify the value as desired.

Issue informationThe issue name and issue description is derived from the Content Delivery Platform. For more information about changing this information, see appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.

Store filterThe text of the store filter comes in two parts:

�Filter options. These are derived from the Content Delivery Platform. To create the list, see appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.

Each issue in the store needs to have the cor-rect keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:


121

�Upload your magazine content using the WoodWing Content Delivery Platform and on the Issue Details screen, choose the keyword which should be assigned to the magazine.

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, and English when uploading English issues.

3.5.2 Changing the Color

How and where to change the color of the text is described in section 3.3 Colors.


122

3.6 Language

Setting the language for the HTML Store is done sepa-rately from setting the language for the rest of the Reader App.

For more information about setting the language for the iPad Reader App, see chapter 7, Customizing the iPad Reader App – section 3.4.3 Changing the Language.

For more information about setting the language for the Android Reader App, see chapter 09, Customizing the Android Reader App – section 4.2.2 Changing the Language.

To set the language for the Store, perform the following steps:

Step 1. Create a new language file by doing the following:

Step 1a. Duplicate the following file:

�htmlstore/storefront/strings/en.json

Step 1b. Rename the file by using the appropriate language code.

The language code should be a two- or three-letter code and comply to

the ISO 639-1 or ISO 639-2 conventions. For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/php/English_list.php.

Step 1c. Open the file and modify the string values as desired.

Step 1d. Save the file.

Step 2. The Store will be notified by the Reader App which language file to use. Specify the lan-guage as follows:

�iPad Reader App: In the Reader App proj-ect, set the language to be used. For more information, see chapter 7, Customizing the iPad Reader App – section 3.4.3 Changing the Language.

�Android Reader App: Set the required lan-guage on the device on which the Reader App is used.





123

3.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 but-tons. (See figure on the next page.)

Source files can be found in the following location:

�Resources/htmlstore/storefront/components/subscription

The following source files are available:

�css/subscription.css. The CSS file used for styling the Offer page.

�subscription.html. The content of the Subscription Offer page.

�subscription.js. A Javascript file which dynamically generates the pages in the required orientation and size for the targeted Reader App.

The subscription.html file replaces the horizontalOf-fer.html and verticalOffer.html files used in previous

versions of the Reader App.

Customizing the Subscription Offer page can be broken down into the following components:

�Page design

�Text

�Text styling

�Subscription buttons


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.html file, so that the text and buttons are displayed as expected.


124

Figure 3.7. The components of the iTunes Subscription environment

A Subscription Offer page B Subscription buttons

A

B


125

3.7.1 Page Design

The design of the page is controlled by the following two files:

�subscription.css file. Controls the styling of the page.

�subscription.html file. Holds the content of the page.

subscription.css fileSome of the page components which can be controlled through this file include:

�Background. The color gradient in the back-ground of the Offer page:

Class selector: .offer.apple

subscription.html fileThe styling of the text is controlled by assigning the rel-evant tags and css classes (as defined in the subscription.css file). Assign tags and classes as required.

3.7.2 Text

The content of the actual text on the page is controlled by the subscription.html file.

To change any of the titles on the page, change the text as required.

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


126

3.7.3 Text Styling

The text styling is controlled by the subscription.css file.

Below follows a list of the class selectors used for styling the various titles on the page.

“Subscribe” title �Color, font style, font size, margin, text

shadow: .offer.apple h1

�Text alignment, letter spacing: .offer.apple div

�Font: .offer.apple

“to” title �Color, font style, margin, letter spacing:

.offer.apple .small-italic

�Text alignment: .offer.apple div


“Digital Magazine” title �Color, margin, text shadow:

.offer.apple h2

�Text alignment, letter spacing: .offer.apple div


“Buy a subscription and start saving money today!” title

�Color, letter spacing, font size: .offer.apple .black-text



“Choose your subscription and pay via iTunes” title

�Color, letter spacing, font size: .offer.apple .subscript




127

3.7.4 Subscription Buttons

The subscriptions as defined on both iTunes and the Content Delivery Platform appear as buttons on the Offer page.

Figure 3.7.4. The iTunes Subscription buttons on the Offer page

A Subscription buttons

A

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

Each is explained below.

When running the Reader App with an iTunes sub-scription on the Simulator as a developer device, all

Subscription offer buttons will display a price of $99.99. This is because the real prices cannot be validated from iTunes when the app runs in the Simulator.


128

Total Number of ButtonsThe total number of buttons is dynamically determined by the subscription.js file during the process of building the Reader App. No customization therefore needs to take place.

The Layout of the ButtonsThe layout of the buttons is controlled by the following class selectors in the subscription.js file:

�createVerticalButtonBar. Controls the number of vertical rows.

�createHorizontalButtonBar. Controls the number of horizontal rows.

The Appearance of the ButtonsTo customize the appearance of the buttons, modify the following class selector in the subscription.css file:

�.offer.apple td

The Button LabelsThe button labels are taken from the Description informa-tion, as entered on the Subscription page in the Content Delivery Platform. (See appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.

To customize the appearance of the button labels, modify the following class selectors in the subscription.css file:

�.offer.apple .price �.offer.apple .description �.offer.apple �.offer.apple a


129

3.8 Non-iTunes Subscription Environment

An environment for a non-iTunes Subscription service consists of the following components (see figure on the next page.):

�A Sign In/Sign Out button

�A Subscription Offer page

�An area holding the Subscription buttons


3.8.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.

Customizing this button is done through the following source file of the HTML Store:

toolbar.cssClass selectors: .toolbar .button.sign

.toolbar .button

.button


130

Figure 2a. The components of a non-iTunes Subscription environment

A

C

B

A Sign In/Sign Out button B Subscription Offer page C Area holding Subscription buttons


131

3.8.2 The Subscription Offer Page

The Subscription Offer page is an external file, typically stored on the Subscription server.

Two versions of this page need to be made available:

�A horizontal Offer page. This page is shown when the device is held in portrait orientation.

�A vertical Offer page. This page is shown when the device is held in landscape orientation.

Use the following dimensions:

iPad Reader App �Offer page shown with device in portrait

orientation: width: 768 pixels, height: 205 pixels.

�Offer page shown with device in land-scape orientation: width: 303 pixels, height: 469 pixels.

Android Reader App (Froyo) �Offer page shown with device in portrait



Android Reader App (Honeycomb) �Offer page shown with device in portrait



3.8.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


Button areaCustomizing the area is done through the following source file of the HTML Store:

base.cssClass selectors: .upgrade

.horizontal .upgrade

.vertical .upgrade

Button labelsThe button labels can be changed/localized by modifying the source strings. For more information, see section 3.5.1 Changing the Text.


132

3.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


Note that in a mixed Subscription environment the Store will not display the Offer pages that are part

of the non-iTunes Subscription; Apple does not allow this.

iTunes Subscription Offer pageFor more information about this page, see section 3.7 iTunes Subscription Environment.

Log In/Log Out buttonFor more information about customizing this button, see section 3.8.1 A Sign In/Sign Out Button.


133

Figure 3.9. The components of a mixed Subscription environment

A Sign In/Sign Out button B Subscription Offer page

B

A

134

H

134

Distributing a digital magazine involves many different steps and processes. The more experi-ence users get with using a new technology and processes, the more tricks of the trade are being defined and discovered.

This appendix is aimed at sharing some of those experiences.

Other frequently asked questions can be found on the WoodWing Commun i t y s i te ( l og- in required): http://community.woodwing.net/forum/ipad-questions-and-answers.

1. Generating IDs and Keys

Tips for generating IDs and keys:

�AppProductID. Should be something like com.woodwing.wwwt; the free issue will automatically get the AppProductID assigned as a prefix to its IssueID. (For example: com.woodwing.wwwt.zurich2010.)1

�IssueID. It is recommended to use a reverse domain name such as com.woodwing.MyMagazine_issue1.

�SecretKey. To increase security, 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).

1 The Product ID is also used in monthly reports.

Tips and Best Practices

http://community.woodwing.net/forum/ipad-questions-and-answers

http://community.woodwing.net/forum/ipad-questions-and-answers

Appendix H Tips and Best Practices

135

2. Submitting and Approval Cycles

It can take up to 2 to 3 weeks for a Reader App or maga-zine issue to be approved by Apple.

One tactic is to register issues in advance with the iTunes Connect service, for instance for a complete year. They can subsequently be ‘cleared for sale’ when the contents of the issue become available. Clearing issues this way typically makes them available almost instantly.

See also this discussion: http://community.woodwing.net/forum/reasons-apple-can-reject-app-review.

http://community.woodwing.net/forum/reasons-apple-can-reject-app-review

http://community.woodwing.net/forum/reasons-apple-can-reject-app-review

iPad

136

I

136

This appendix shows the classes which can be used for customizing the Gestures API for the iPad Reader App.

The preferred way to capture gestures in a custom object is by the use of the UIGestureRecognizer

gesture. Capturing gestures by means of overriding touches proves to be very troublesome, and should be avoided.

For more information, see chapter 7, Customizing the iPad Reader App – section 9.1.2, Gestures API.

Gestures API

Appendix I Gestures API

iPad

137

Gestures API classesDMEGestureManagerattributessharedInstance DMEGestureManager* Pointer to the singleton instancemethodsaddDelegate: void Sets a new delegate conforming to DMEGestureDelegateremoveDelegate: void Removes supplied delegateaddGesture: forKey: void Adds a new gesture to the Reader App

removeGestureForKey: void Removes a gesture from the Reader App

DMEGestureDelegateattributesN/AmethodswillHandleGesture: BOOL Must return whether the delegate will handle this gesturedoHandleGesture: void Is called to actually handle the gesture. Do not perform han-

dling checks here; do these in willHandleGesture.gestureWillCancelNavigation: BOOL If Yes is returned no navigation functions will be executedgestureWillCancelObjects: BOOL If Yes is returned no object functions will be executed

138

J

138iP

ad

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.

For more information, see chapter 7, Customizing the iPad Reader App – section 9.1.3, Navigation API.

1. Structure

Figure 1 on the next page shows the structure of the Navigation API.

Navigation API

Appendix J Navigation API

139iP

ad

Figure 1. A structural overview of the Navigation API


140iP

ad

2. Classes

The available classes which can be used are listed below.

DMEDataManagerattributessharedInstance DMEDataManager* Pointer to the singleton instancecurrentIssue DMEIssue* The current issue

methodsrootPath NSString* Returns the path to the local magazine directory

DMEIssueattributesissueDescription NSString* Description of this issuestories NSArray* (DMEStory) List of storiesmethodsgetSectionNames NSArray* (NSString) Returns a list of section namesgetStoriesInSection: NSArray* (DMEStory) Returns a list of stories for the given sectiongetStoryWithId: DMEStory* Returns the story for a given story idgetPageWithStoryId: pageIndex: issueOrientation: DMEPage* Returns a page for the given story id, page index and

layout orientation

getAllPagesForOrientation: NSArray* (DMEPage) Returns a list of all pages for all stories for the given layout orientation.

getAllFirstPagesForOrientation: NSArray* (DMEPage) Returns a list of the first page of a story for all stories for a given layout orientation


141iP

ad

DMEStoryattributesissue DMEIssue* Pointer to the parent issueidentifier NSString* Identifier of the storysection NSString* Name of the section that this story belongs totitle NSString* Title of the storystoryDescription NSString* Description of the storyauthor NSString* Author of the storythumb NSString* URL of the thumbnailpreview NSString* URL of the previewstylesheet NSString* Data of the applied stylesheetintent NSString* Intent of the storyhorizontalPages NSArray* (DMEPage) List of the pages that are layed out in landscapeverticalPages NSArray* (DMEPage) List of the pages that are layed out in portraitelements NSArray* (NSDictionary) List of the story elementsimages NSArray* (NSDictionary) List of the story imageshyperlinks NSArray* (NSDictionary) List of the story hyperlinks

methodsgetPageWithIndex: issueOrientation: DMEPage* Returns a page for a given index and orientation


142iP

ad

DMEPageattributesstory DMEStory* Pointer to the parent storylayoutOrientation DMEPageLayoutOrientation The layout orientation of the pagepageIndex int The index of the pageidentifier NSString* The identifier of the pagethumb NSString* URL of the thumbnailpreview NSString* URL of the previewobjects NSArray* (DMEObject) List of objects on the page

methodsN/A


143iP

ad

DMEObjectattributespage DMEPage* Pointer to the parent pageparentObject DMEObject* Pointer to the parent object (if applicable)identifier NSString* identifiertype NSString* Object type (movie, audio, scroll area etc)x NSString* X positiony NSString* Y positionwidth NSString* widthheight NSString* heightitemId NSString* item IDlink NSString* linkweblink NSString* web linkopeninternal NSString* open internalurl NSString* URLspecialProperties NSDictionary* Properties that are specific for this object typeobjects NSArray*

(DMEObjects)List of child objects (Hotspot, Scrollable area)

methodsN/A


144iP

ad

DMENavigationManagerProtocolattributesN/A

methodscurrentPageChanged: void Called when the current page in the Reader App has changed. Supplies the

new page as a DMEPage layoutOrientationHasChanged void Called when the current layout orientation in the Reader App has

changed. Typically when the ipad is rotated.IssueHasLoaded: void Called when the data manager finished loading the current issue.


145iP

ad

DMENavigationManagerattributessharedInstance DMENavigationManager* Pointer to the singleton instancecurrentLayoutOrientation DMEPageLayoutOrientation Current reader layout orientationcurrentPage DMEPage* The current page

methods

navigateToSection: void Navigates the Reader App to the first page of the first story of the given section name.

navigateToStory: void Navigates the Reader App to the first page of the given storynavigateToPage: void Navigates the Reader App to the given pagehistoryGoBack void Navigates the Reader App back in the history stackhistoryGoForward void Navigates the Reader App forward in the history stackhistoryCanGoBack BOOL Indicates if it is possible to navigate back in the historyhistoryCanGoForward BOOL Indicates if it is possible to navigate forward in the history

addDelegate: void Adds a given delegate to the navigationmanager. It must confirm to DMENavigationManagerProtocol

RemoveDelegate: void Removes a given delegate from the navigation manager

146

K

146iP

ad

The Analytics feature of the iPad Reader App can be used for logging events such as browsing to new sections, buying an issue, launching/exiting the app, and more. These events can subsequently be analyzed used specific software packages.

Analytics modules can be used as an interface to receive these events. The default analytics module which is implemented in the Reader App is powered by Omniture. To use other analytics frameworks—such as Google Analytics or Flurry—a custom analytics module needs to be developed.

This appendix describes how the default Omniture module can be configured into the Reader App; how to configure other solutions is not covered.

Events sent from the device are collected by Omniture/Catalyst servers and presented for reporting in Adobe SiteCatalyst.

1. Prerequisites

Please take note of the following prerequisites for using this feature:

�The customer should have knowledge of Omniture and have an Omniture account.

An Omniture account can be obtained through https://developer.omniture.com/user/register.

�The customer should have knowledge of Adobe SiteCatalyst.

For more information about Adobe SiteCatalyst, see http://www.omniture.com/en/products/online_analytics/sitecatalyst.

�WoodWing does not provide support on cus-tomizing Omniture; for any Omniture support, please contact an Omniture consultant.

Omniture Integration

https://developer.omniture.com/user/register

http://www.omniture.com/en/products/online_analytics/sitecatalyst

http://www.omniture.com/en/products/online_analytics/sitecatalyst

Appendix K Omniture Integration

147iP

ad

2. Viewing Data

OmnitureAn example of how traffic sent to Omniture can be viewed is displayed in figure 2a below.

Notice the following:

�pageNames are concatenated

�Custom traffic variables (traffic props) are pre-fixed with “c”

�Custom Conversion Insight Variables (eVars) ar prefixed with “v”

�A dynamicVariablePrefix (D=) is used for 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, see section 7. Variables Sent with all Tracks.

Adobe SiteCatalystAn example of the page view reports in Adobe SiteCatalyst can be seen in figure 2b below.

Note that a default report is shown; Site Catalyst’s work-bench is highly customizable.

Also note how the concatenated pageNames appear.


148iP

ad

Figure 2a. Viewing traffic sent to Omniture in HTTPScoop, a HTTP protocol analyzer


149iP

ad

Figure 2b. The default page report view in SiteCatalyst


150iP

ad

3. Setting Up SiteCatalyst

Setting up SiteCatalyst can be done in the following ways:

�Setting up custom traffic variables

�Setting up Custom Conversion Insight Variables (eVars)

�Setting up custom success events


3.1 Custom Traffic Variables

To set up custom traffic variables in SiteCatalyst, use the below table.

Names are configurable, but the Property number should not be changed.

Table 3.1. Custom traffic variables in SiteCatalystProperty # Name State

1 Search Terms Disabled2 No of Search Results Disabled3 User Agent Enabled4 Carrier Disabled5 Location Enabled6 App Name Platform | Page

NameEnabled

7 Time of Day Enabled8 Section Enabled9 User Engagement Action Disabled10 Platform Enabled11 App Name Enabled12 App Distribution Channel Enabled13 View Type Enabled14 Virtual Page Name Disabled15 Traffic - Day Parting Disabled16 Site Channels (Site Sections) Enabled17 URL Enabled18 Screen Orientation Enabled19 Offline Enabled20 Issue Enabled

(Continued in next column)


151iP

ad

Table 3.1. Custom traffic variables in SiteCatalyst (continued)Property # Name State

21 Traffic - Product Name Disabled22 is Subscriber Enabled24 Issue Enabled48 Custom Insight 48 Disabled49 Video Tracking Disabled50 Not For Use - Events Disabled

3.2 Custom Conversion Insight Variables

To set up Custom Conversion Insight Variables (eVars) in SiteCatalyst, use the below table.


�Names are configurable, but the eVar number should not be changed.

�When variables refer to traffic variables (which use the D=C6 syntax), their names are copied to here.

�The values for variables with name “....”, refer to traffic variables that are not sent from the Reader App.

Table 3.2. Custom Conversion Insight Variables (eVars)eVar # Name

3 Unique ID4 Merchandising Category5 …6 App Name - Platform | Page Name11 App name Platform Version12 Store Type (Acquisition Channel)13 Install Date24 Store / Library27 …28 Section30 Current Day of Week31 Date Time32 What Day


152iP

ad

3.3 Custom Success Events

To set up Custom Success Events in SiteCatalyst, use the below table.

Table 3.3. Custom Success eventsEvent Name Typeevent1 Library Issue hit, page view Counterevent3 App Startup Counterevent4 First Time App Startup Counterevent5 App Upgrade Counterevent6 Media Play Counterevent7 Media Stop Counterevent10 subscriber login Counterevent11 subscriber download start Counterevent12 subscriber download finish Counterevent13 non-subscriber download start Counterevent14 non-subscriber download finish Counter

4. Reader App Configuration

To enable and configure the Analytics API in the Reader App, perform the following steps:

Step 1. Open the Digital Magazine project in XCode.

Step 2. Expand the Frameworks folder.

Step 3. Right-click the libOmnitureAnalytics.a Framework and choose Get Info from the con-text menu.

The Library Info screen appears.

Step 4. Choose the Targets tab.

Step 5. In the list of Target Memberships, select the check box for DigiMag_Template.

Step 6. Close the Library Info screen.

Step 7. Expand the Resources folder.

Step 8. Select DMAnalytics.plist.

A list of keys and their values appear.

Step 9. Leave the Module key set to DMOmnitureAnalyticsModule.

This is the required value when using Omniture Analytics.

Step 10. Select the check box for the Enable opt-out key.

This will display a message to the user inform-ing them that when accessing the magazine, specific information is gathered. The user will have the option to cancel or continue.


153iP

ad

Enabling this setting is mandatory; if not set, the Reader App won’t pass the Apple

approval process.

Make sure to add the appropriate localiza-tion strings with your magazine’s specific

legal disclaimer.

Step 11. Expand the list of Parameters.

A list of default parameters appears.

Step 12. Fill out the parameters by using the guidelines as shown in table 4 below.

Table 4. Parameter values for the DMAnalytics.plist fileKey Description ValueAccount Omniture account woodwing1

Tracking server Omniture tracking server <tracking server address>1

Backlog expire time in days Expire time of the backlog events in number of days. 7

App name Application name for Omniture woodwing1

App platform Application platform for Omniture ipadEnabled Omniture enabled (1) or disabled (0). 1

Visitor cookie ID Name of cookie to set with the (hashed version) of the unique device ID omni_vid

Visitor cookie ID expiry in days The expiration time of the visitor cookie id. 1825

1 This value is specific to your account; consult your Omniture contact for the correct value.

These settings can also be set in the Classes/DigiMagSettings.h 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). The default settings of the DMAnalytics.plist refer to the settings of DigiMagSettings.h.

Step 13. (Optional) In the Localizable.strings file, modify and/or localize the strings for the Opt-out dialog box.


154iP

ad

5. Events

Table 5 shows the events that are tracked within the application.

Table 5. Events tracked within the applicationEvent Trigger Parameters

hitDownloadIssueWithCategory Called when an issue is going to be down-loaded, after having bought one.

issue, currencyCode, price, purchaseId

hitVisitToStoreLandingPage Called when user opens the Store.

hitVisitToLibrary Called when user opens the Library

hitVisitToCover Called when user accesses the magazine cover, but not when in Library.

hitVisitFreePreviewPageWithCategory Called when user accesses an issue preview. issue, purchaseid

hitVisitCurrentIssueTOCCalled when user accesses the Table Of Content of current issue, with optionally the current section.

section

hitVisitToNewsFeed Called when user accesses the News Feed screen

hitVisitToPage Called when user accesses a page title, section, issuehitVisitToAd Called when user accesses an ad page title, section, issue

hitSlideForSlideShowOnPage

Called when user accesses a slide in a slide show. Note that upon accessing a page con-taining a slide show, this function is called immediately for the first slide.

title, section, issue, slide

hitVisitToURL Called when user visits a URL. urlappLaunch Called when the app launches.appExit Called when the app terminates gracefully.mediaOpen Called whenever a media file is accessed. length, name

mediaPlay Called whenever a media file (video or audio) is started. name,offset

Continued on next page


155iP

ad

Table 5. Events tracked within the application (continued)Key Description Value

mediaClose Called when a media file (video or audio) is closed. name

mediaStop Called when a media file (video or audio) is stopped. name, offset

hotSpotOpen Called when a Hotspot opens hotspotid


156iP

ad

6. Variables

The sections below show the variables that are sent with every request, split into tracks and track links.

6.1 Tracks

HotspotOpen

Table 6.1a. Variables for HotspotOpenVariable Valueprop14 prop6;

prop9 <hotSpotId>;

eVar21 “D=c9”;events “event9”;trackLink <pageName>linkType “o”linkName “hotspot”

SubscriberLogin

Table 6.1b. Variables for SubscriberLoginVariable Valueevents “event10”;

prop22 “subscriber”;

pageName “kiosk|signin”;prop16 “kiosk”;prop6 “<platform>kiosk|signin”trackLink “<platform>kiosk|signin”linkType “o”linkName “signin”;


157iP

ad

appLaunch

Table 6.1c. Variables for appLaunchVariable Value

events “event3,event4,event5” (event3 = startup, event4 = if first time, event5 = upgrade)

pageName “app”

prop16 “other”

prop6 “<prop11>|<pageName>”

trackLink: “app”

linkType: “o”

linkName: “app”

hitVisitToURL

Table 6.1d. Variables for hitVisitToURLVariable Valueevents “event1”tracklink “<url> “linkType “e”linkName “<url>”pageName “library | <pageName>”

hitDownloadIssueWithCategory Event

Table 4c. Variables for hitDownloadIssueWithCategoryVariable ValuecurrencyCode <currency code of app store>

events “purchase”

products <purchase parameters>purchaseID <purchase id>pageName “store”prop16 “store”prop6 “<prop11>|<pageName>”track link “store”linkType “o”linkName “store”


158iP

ad

6.2 Track Links

mediaOpen

Table 6.2a. Variables for mediaOpenVariable ValuetrackVars “eVar20,eVar21,prop9,prop14”;eVar20 <name>;prop9 “Media: “ <mediaURL>;prop14 <pageName>;eVar21 “D=c9”;

mediaPlay

Table 6.2b. Variables for mediaPlayVariable ValuetrackVars “eVar20,eVar21,events,prop9,prop14”;trackEvents “event6”;eVar20 <mediaURL>;events “event6”;prop9 “Media:” <mediaURL>;prop14 <pageName>;eVar21 “D=c9”;

mediaClose

Table 6.2c. Variables for mediaCloseVariable ValuetrackVars “eVar20,eVar21,prop9,prop14”;eVar20 <mediaURL>;prop9 Media: <mediaURL>;prop14 <pageName>;eVar21 “D=c9”;

mediaStop

Table 6.2d. Variables for mediaStopVariable ValuetrackVars “eVar20,eVar21,events,prop9,prop14”;trackEvents “event7”;eVar20 <mediaURL>;events “event7”;prop9 “Media”: <mediaURL>;prop14 <pageName>;


159iP

ad

hitVisitToExistingPrintSubscriber

Table 6.2e. Variables for hitVisitToExistingPrintSubscriberVariable ValuepageName “store|existing print subscriber”prop6 “store|existing print subscriber”

hitVisitToSubscribe

Table 6.2f. Variables for hitVisitToSubscribeVariable ValuepageName “store|subscribe”prop6 “store|subscribe”

hitSlideForSlideShowOnPage

Table 6.2g. Variables for hitSlideForSlideShowOnPageVariable Valueevents “event1”

pageName “library|<issue>|<title>-<page-id>|slideshow-<slide>”

prop16 “library”

prop20 “<issue>”


prop8 “<section>”

hitVisitToAd

Table 6.2h. Variables for hitVisitToAdVariable Valueevents “event1”

pageName “ads|<issue>|<section>|<title>-<page-id>”




prop8 “ads”


160iP

ad

hitVisitToPage

Table 6.2j. Variables for hitVisitToPageVariable Valueevents “event1”

pageName “library|<issue>|<section>| <title>-<pageid>”




prop8 “<section>”

hitVisitToNewsFeed

Table 6.2k. Variables for hitVisitToNewsFeedVariable ValuepageName “newsfeed”

prop16 “other”

prop6 “newsfeed”

hitVisitToCurrentIssueTOC

Table 6.2l. Variables for hitVisitToCurrentIssueTOCVariable Valueprop16 “library”prop6 “library|<issue>|toc”prop20 <issue>prop8 “toc”

hitVisitFreePreviewWithIssueInfo

Table 6.2m. Variables for hitVisitFreePreviewWithIssueInfoVariable ValuepageName “store|<issue>|preview”prop16 “store”prop6 “store|<issue>|preview”


161iP

ad

hitVisitToCover

Table 6.2n. Variables for hitVisitToCoverVariable Valueevents “event1”

pageName “store|<issue> | landing page”

prop16 “store”prop6 “<prop11>|<pageName>”prop24 “<issue>”

hitVisitToLibraryCover

Table 6.2o. Variables for hitVisitToLibraryCoverVariable Valueevents “event1”

pageName “library|<issue>”

prop16 “library”prop6 “<prop11>|<pageName>”prop20 “<issue>”

hitVisitToLibrary

Table 6.2p. Variables for hitVisitToLibraryVariable Valueevents “event1”

pageName “library”

prop16 “library”prop6 “<prop11>|<pageName>”

hitVisitToStoreLandingPage

Table 6.2q. Variables for hitVisitToStoreLandingPageVariable Valueevents “prodView,event1”

products <purchase parameters>

purchaseID <purchase id>pageName “store|<issue id>|preview”prop16 “store”prop6 “<prop11>|<pageName>”


162iP

ad

downloadStarted

Table 6.2r. Variables for downloadStartedVariable Value

events For subscribers: “event11”Else: “event13”

products “<issue>”

pageName “Library | <issue>”

prop6 “pageName”



trackLink “<issue>”

linkType “o”linkName “downloading”

downloadFinished

Table 6.2s. Variables for downloadFinishedVariable Value

events For subscribers: “event12”Else: “event14”

products “<issue>”

pageName “Library | <issue>”

prop6 “Library | <issue>”



prop6 “Library | <issue>”trackLink “<issue>”linkType “o” linkName @”downloaded”


163iP

ad

7. Variables Sent with all Tracks

Table 7. Variables sent with all tracksVariable Valuechannel “<app name> <platform>”

prop3 “D=User-Agent”

prop7 “<date>-<time>”prop10 “<platform>”prop11 “<app name> <platform>”prop12 “itunes”prop18 “<orientation>”prop19 “offline” or emptyprop22 “subscriber or non-subscriber”eVar3 “<unique id>”visitorID “<unique id>”eVar4 “D=c4”eVar5 “D=c5”eVar6 “D=c6”eVar11 “<app name> <platform> <version>”eVar12 “D=c12”eVar13 “<installed date>”eVar22 “D=c22”eVar23 “D=c20”eVar24 “D=c16”eVar27eVar28 “D=c8”eVar30 “<current day of week>”eVar32 “<what day>”

164

L

164iP

ad

This appendix contains information about inte-grating a subscription service using an external subscription server, and customizing the Reader App for use with a subscription service.

For information about integrating an Apple iTunes sub-scription service, see appendix M, iTunes Subscription Server Integration.

For information about subscribing using the Reader App, see chapter 4, Using the Reader App – section 9.1, Store With Subscription Functionality.

1. Steps To Follow

Setting up the Subscription functionality using an external subscription server involves the following steps:

Step 1. Conf igur ing the Subscript ion environment.

Step 2. Configuring the Content Delivery Platform.


Subscription Server Integration

Appendix L Subscription Server Integration

165iP

ad

1.1 Configuring the Subscription Environment

The subscription environment consists of the following components:

�Web pages with specific information or functionality

�The Subscription server

How to configure each is explained in the following sections.

1.1.1 Web Pages

In order to let the user interact with the subscription ser-vice, various Web pages need to be available.

The following Web pages need to be prepared:

�Subscription page. A Web page which users can use for subscribing to a subscription. This page is shown full screen in the Reader App. Note that one page is used for both orientations.

�Subscription Upgrade page. A Web page which users can use for upgrading their sub-scription. This page is shown full screen in the Reader App. Note that one page is used for both orientations.

�License agreement page. A Web page with information about the license agreement for the subscription. This page is shown full screen in the Reader App.

�Privacy notice page. A Web page with infor-mation about how the user’s data is gathered, used, and managed. This page is shown full screen in the Reader App.

�Customer service page. A Web page which users can use for obtaining customer service. This page is shown full screen in the Reader App.

�Reset password page. A Web page which users can use for resetting their password. This page is shown full screen in the Reader App.

�Subscription offers page. A Web page for advertising subscription offers in the Reader App. This page is part of the HTML Store. For more information about customizing this page, see appendix G, Customizing the HTML Store – section 2, The Store.


166iP

ad

1.1.2 Subscription Server

In order for the Reader App and the Subscription server to properly communicate with each other, various server components need to be linked to those of the Reader App. This is achieved by matching the key values on the server to those of the Reader App.

The server components and their values are shown in table 1.1.2 below.

When different values are used, the corresponding values in the Reader App settings also need to be

changed. (see appendix E, The DMSettings.plist file – sec-tion 3.2, Store Settings.)

Table 1.1.2. Subscription server componentsKeyname Type Default value DescriptionVertical offer String verticalOffer URL to the offer page in portrait modeReset password String resetPassword URL to the Reset Password pageHorizontal offer String horizontalOffer URL to the offer page in landscape modeUpgrade subscription URL String upgradeSubscription URL to the Upgrade subscription pageSubscription URL String buySubscription URL to the subscription pageLicense agreement String license URL to the License Agreement pagePrivacy notice String privacy URL to the Privacy Notice pageCustomer service String myAccount URL to the Account page


167iP

ad

1.2 Configuring the Content Delivery Platform

The Content Delivery Platform platform needs to be con-nected to the Subscription server. For instructions about how to achieve this, see appendix F, Using the Content Delivery Platform – section 3.4.3, Adding a Subscription.

168

M

168iP

ad

This appendix contains information about integrat-ing the Apple iTunes subscription server in the iPad Reader App and customizing the Reader App for use with a subscription service.

For information about integrating any other external sub-scription service, see appendix L, Subscription Server Integration.

For information about subscribing using the Reader App, see chapter 4, Using the Reader App – section 9.1, Store With Subscription Functionality.

1. Steps To Follow

Setting up the Subscription functionality using the iTunes subscription server involves the following steps:

Step 1. Conf igur ing the Subscript ion environment.

Step 2. Configuring the Content Delivery Platform.

Step 3. Configuring the Reader App.


iTunes Subscription Server Integration

Appendix M iTunes Subscription Server Integration

169iP

ad

Step 1. The Subscription Environment

The subscription environment consists of the following components:

�Web pages with specific information or functionality

�The iTunes Subscription server

How to configure each is explained in the following sections.

Step 1.1. Web Pages

When using the iTunes subscription server, the user logs in to the iTunes Connect service by using the iTunes account. All user interaction with this account (such as subscribing, viewing account details, etc.) is handled by Apple. Only two additional Web pages need to be made available, both used in the Reader App:

�The Subscription offer page. A Web page used for advertising subscription offers.

�The MyAccount Page. A Web page used for offering various kinds of account options.

Each Web page is described in the following sections.


170iP

ad

Step 1.0.1. The Subscription Offer Page

The Subcription offer page is part of the HTML Store. For information about customizing this page, see appen-dix G Customizing the HTML Store, section 3.7, iTunes Subscription Offer Page.

Step 1.0.2. The MyAccount Page

The myAccount page is used for offering various kinds of account options. Currently only one option is available: that of transferring issues between different iPads. (For more information about how to use this functionality, see chapter 4, Using the Reader App – section 12.1.1, The iTunes Subscription Service.)

Figure 1.0.2. The default myAccount page


171iP

ad

An example myAccount page is provided in the project and can be found in the following location:

�Resources/myAccount/

The look & feel of the page can be changed by custom-izing the following components:

�The text displayed on the page

�The images displayed on the page

�The design of the page

Each is described on the following pages.

Pages in the correct dimensions for each orientation (landscape and portrait) are automatically created dur-ing the building process of the Reader App.

Creating a custom pageWhen creating a custom page from scratch, make sure that the page contains at least one button which links to ww://restoresubscriptions. This is to make sure that subscriptions can be copied to another iPad.

TextThe text which is displayed on the page is derived from the myAccount.html file. Adjust or localize the text as required.

ImagesThe following images can be customized:

�BG1.png. The images for the background of the areas at the top and bottom of the page.CSS reference:

CSS file: myaccount.cssClass selectors: .header-container

.footer-container

�iPad.png. The graphic which visualizes the transfer process between iPads. Reference:

HTML file: myaccount.htmlAttribute: <div class= "header-container" id="

header- container">

�loader.gif.A loader displayed during the transfer process. Reference:

HTML file: myaccount.htmlAttribute: <div class="container" id="container">

www://restoresubscriptions


172iP

ad

DesignThe design of the page is control led by the myaccount.css file. Some of the page components which can be controlled through this file include:

Font family. Class selector: .body

Page background. Class selector: .page-con-tainer

Heading size. Class selectors: .h1 .h2

Text color. Class selector: .ul

Text margins. Class selector: .li

Transfer button. Class selector: .button-transfer .button-transfer p

Step 1.2. iTunes Subscription Server

Configuring the iTunes Subscription Server is done by performing the following steps:

�Adding the subscription offers

�Generating a secret key



173iP

ad

Step 1.2.1. Adding the Subscription Offers

Each subscription offer is added as an In App purchase by performing the following steps:

Step 1. Log in to iTunes Connect.

Step 2. For the Reader App for which a sub-scription needs to be created, create a new In App purchase.

The Create New In App Purchase screen appears.

Step 3. Enter the following information:

�Reference Name: The name that is shown in iTunes Connect to identify the subscription.

�Product ID: A unique ID for the subscription.

�Type: Auto-Renewable.

�Family Name. Choose New to create a new Family Name or choose an existing Family Name.

Only multiple subscriptions within one family are supported.

�Subscription Duration: choose from 7, 30, 60, 90, 180, or 365 days.

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). During the subscription period, the sub-scribed user will have access to the following issues (the date that will be used to check if an issue is included in a

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.

�Price Tier: Select the price tier that you want for the selected duration. The price tiers are the same as those for the issue.

Step 4. Repeat Steps 2 and 3 to add addi-tional subscription offers as needed.


174iP

ad

Step 1.2.1. Generating a Shared Secret

In order to validate the subscriptions on the CDS side with the iTunes server, a Shared Secret needs to be cre-ated and subsequently sent to WoodWing. Perform the following steps:

Step 1. Access the In App Purchases over-view page for the Reader App on iTunes Connect.

Step 2. Click Generate Shared Secret.

Step 3. Send the generated code to WoodWing by using the following e-mail address: [email protected]. Include the following information:

�Customer name

�Product ID of the Reader App, as defined on the Content Delivery Platform

�Generated secret key

Step 2. Configuring the CDP

The Reader App on the Content Delivery Platform also needs to be configured with the required subscriptions. To do this, follow the steps as outlined in appendix F, Using the Content Delivery Platform – section 4.1, Configuring Reader Apps.



175iP

ad

Step 3. Configuring the Reader App

The iTunes Subscription functionality in the Reader App consists of the following DMSetting:

�Store/Subscriptions/Customer service. Used for entering the path to the MyAccount page when stored on a local system.

All other options available in the Store/Subscriptions section are for use by non-iTunes Subscription

services.

176

N

176

Different versions of the Reader App exist, each with different features.

These differences could be caused by features that are specific to a particular platform only, or because the development of one Reader App is not yet as advanced as another.

Table 1 on the next page shows the list of Reader App features and their availability for each Reader App version.

Reader App Features Comparison

Appendix N Reader App Features Comparison

177

Table 1. Reader App features - compared by Reader App versionReader App Version

FeatureiPad 2.1

Android 1.3 (Froyo)

Android 1.3 (Honeycomb)

HTML5 1.0

Navigation

Navigation bar Action bar Navigation bar / Action bar buttons

Buy button Library button Magazine button Cover button TOC button External back button 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 (Continues on next page)


178

Table 1. Reader App features - compared by Reader App version (Continued)Reader App Version

FeatureiPad 2.1

Android 1.3(Froyo)


HTML5 1.0

Navigation (Continued)

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

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



179


FeatureiPad 2.1

Android 1.3(Froyo)


HTML5 1.0

Dynamic content

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

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 (Continues on next page)


180


FeatureiPad 2.1

Android 1.3(Froyo)


HTML5 1.0

Dynamic content(Continued)

Dossier Links (Continued)

In a Web Element Fullscreen overlay window

Newsfeed

Newsfeed Full screen Fallback Newsfeed page

Text View Text View Push Notifications Push notifications (messages)

Content Sharing

Content Sharing Share Hyperlink Share page Share part of a page

Store

HTML Store Store Filters Subscriptions (non-iTunes) Subscriptions (iTunes) Mixed subscriptions support In-app purchase 3G downloading

Library Library (Continues on next page)


181


FeatureiPad 2.1

Android 1.3(Froyo)


HTML5 1.0

Library (Continued)

Segments Library filter Segment filter Library caching

Downloading issues

Non-progressive Progressive Auto open after/during download All Segments in one download

CustomizationAPIs Custom Home page

Internet No Internet indicators Version info Version info

Page fitting

Fit page when device dimensions do not match page dimensions

Display message when device dimensions do not match page dimensions

Analytics Analytics Magazine encryption Magazine encryption iOS 5 Newsstand Newsstand support

182

O

182

WoodWing Software incorporates certain open source software in specific components of the Digital Magazine solution. The license terms associated with this software require that we give copyright and license information; this appendix provides those details.

The following open source software is used:

�android-plist-parser. Used by the Android Reader App for parsing the DMSettings.plist file.

�Jackson Java JSON-processor. Used by the Android Reader App for parsing the json file.

Licenses

Appendix O Licenses

183

1. android-plist-parser

https://github.com/tenaciousRas/android-plist-parser

LicenseThis work is licensed under Creative Commons and BSD licenses. See below.

Android PList Parser (com.longeitysoft.android)Licensed under Creative Commons Attribution 3.0 Unported license.

http://creativecommons.org/licenses/by/3.0/

You are free to copy, distribute and transmit the work, and to adapt the work. You must attribute android-plist-parser to Free Beachler (http://www.freebeachler.com) with link.

The Android PList parser (android-plist-parser) is dis-tributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Base64.java (net.sf.migbase64)Licensed under the BSD Open Source license.

Copyright (c) 2004, Mikael Grev, MiG InfoCom AB. (base64 at miginfocom -dot- com) All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 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.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

https://github.com/tenaciousRas/android-plist-parser

http://creativecommons.org/licenses/by/3.0/

http://www.freebeachler.com

Appendix O Licenses

184

2. Jackson Java JSON-processor

http://jackson.codehaus.org/

License

Apache License Version 2.0, January 2004

http://www.apache.org/licenses/

TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

1. Definitions.

“License” shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.

“Licensor” shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.

“Legal Entity” shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the pur-poses of this definition, “control” means (i) the power, direct or indirect, to cause the direction or manage-ment of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.

“You” (or “Your”) shall mean an individual or Legal Entity exercising permissions granted by this License.

“Source” form shall mean the preferred form for mak-ing modifications, including but not limited to software source code, documentation source, and configura-tion files.

“Object” form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.

“Work” shall mean the work of authorship, whether in Source or

Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).

“Derivative Works” shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications rep-resent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.

“Contribution” shall mean any work of authorship, including the original version of the Work and any mod-ifications or additions to that Work or Derivative Works thereof, 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. For the purposes of this defini-tion, “submitted” means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communi-cation on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the

Licensor for the purpose of discussing and improving the Work, but excluding communication that is con-spicuously marked or otherwise designated in writing by the copyright owner as “Not a Contribution.”

http://jackson.codehaus.org/

http://www.apache.org/licenses/

Appendix O Licenses

185

“Contributor” shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorpo-rated within the Work.

2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly dis-play, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.

3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, 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. 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 infringe-ment, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.

4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, 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; and

(b) You must cause any modified files to carry promi-nent notices stating that You changed the files; and

(c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and

(d) If the Work includes a “NOTICE” text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file dis-tributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display gener-ated by the Derivative Works, 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, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.

You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.

5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the

Appendix O Licenses

186

terms of any separate license agreement you may have executed with Licensor regarding such Contributions.

6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.

7. Disclaimer of Warranty. Unless required by applica-ble law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warran-ties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. 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.

8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for dam-ages, including any direct, indirect, special, incidental, 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, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.

9. Accepting Warranty or Additional Liability. While redis-tributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obli-gations and/or rights consistent with this License. However, in accepting such obligations, You may act

only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.

END OF TERMS AND CONDITIONS

APPENDIX: How to apply the Apache License to your work.

To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets “[]” replaced with your own identifying infor-mation. (Don’t include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. 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.

Copyright [yyyy] [name of copyright owner]

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compli-ance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writ-ing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing per-missions and limitations under the License.

http://www.apache.org/licenses/LICENSE-2.0

Hyphen

Catalog

Styles

Speller

Layout

Connection

www.woodwing.com

WoodWing USADetroit, Michigan USATel +1 313 962 [email protected]

WoodWing Latin AmericaMonterrey NL, MexicoTel +52 1 81 88345 [email protected]

WoodWing EuropeZaandam, The NetherlandsTel +31 75 61 43 [email protected]

WoodWing Asia PacificSelangor Darul Ehsan, MalaysiaTel +60 3 8320 [email protected]

Products, features and specifications are subject to change without prior notice. The Adobe logo, InDesign and InCopy are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners.

© 2011 WoodWing Software