DM Reader App User Guide v1.1.13

Digital Magazine Reader App
User Guide
Smart Publishing
Digital Magazine Reader App User Guide

document version 1.1.13
Legal Disclaimer
1998-2011 WoodWing Software bv. All Rights Reserved.
Digital Magazine Reader App User Guide

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

About WoodWing Software
Since 1997, WoodWing Software has been developing editorial solutions based on Adobe InDesign and InCopy. Using standard and proven technologies, open source components, and an open architecture, WoodWing has been creating the most progressive solutions available on the market for the production of print and online publications. WoodWing has an international roster of customers that includes many of the worlds top magazine companies, newspapers, book publishers and corporate clients. WoodWing Software is located in Zaandam, The Netherlands, and has regional sales companies for Europe, the USA, Asia-Pacific, and Latin America. Customers are served through select partners. Content Station is the publishing desktop from which a user carries out his tasks. It provides an intuitive and uniform user-interface during all stages of the publishing process. Content Station is available in a Pro Edition, Basic Edition, and a Free Edition.
Brand Station
Brand Station is WoodWings Web-to-Print solution for corporations, ad agencies and print-service providers. It helps to ensure correct use of corporate design guidelines, while taking the load off internal departments. Based on the principle of three user typesthe Brand Owner, the Brand Designer, and the Brand User, Brand Station provides a controlled environment for the creation of company-branded material. Designers create templates according to company guidelines. After approval by the Brand Owner, Brand Users can access these templates in Brand Station, customize them to a predefined extent, and create publication-ready files, all using just a Web browser.
Enterprise Content Publishing System
The Enterprise content publishing system forms the rocksolid foundation for all WoodWings publishing solutions. Enterprise is at the heart of the publishing process, allowing designers, editors, external journalists, IT and managers to easily collaborate and meet deadlines, while controlling document versions, access rights, storage, and more. Enterprise is completely integrated with solutions for planning, wire, DAM, archive, Web CMS, mobile publishing and numerous other systems. In fact, it has specifically been designed to easily integrate with any system around.
WoodWing Productivity Plug-ins
WoodWing provides plug-ins for Adobe InDesign and InCopy that make working with these applications easier, faster, and much more effective. For a full overview of these plug-ins, see the next page.
Smart Styles
Content Station
WoodWings solution ensures that all steps of the editorial process content planning, gathering material, editing and selecting, plus managing strategic publication of content to any output channel are executed from just one location: WoodWings Content Station application.
The award-winning Smart Styles automated styling tool delivers powerful formatting capabilities to Adobe InDesign users. This unique software combines object-, table- and smart text styles into powerful Smart Styles. Smart Styles are conveniently stored in libraries and can be applied with a simple drag and drop to set all of the styling attributes of the object or group of objects. Smart Styles removes repetitive and time-consuming tasks and ensures consistent formatting.
iii
Smart Layout
Smart Layout optimizes and speeds up the layout process by adding the Article concept to InDesign. An Article consists of several elements, such as the head, intro, body and also images. Smart Layout defines a relationship between these elements. Smart Layouts intelligent behavior and automatic processes strongly improve the efficiency of InDesign users working with multiple columns of text. This is of particular interest for newspapers and magazines with tight deadlines.
For more information about WoodWing products, visit www.woodwing.com.
Smart Catalog
Smart Catalog is a scalable and powerful solution to publish variable data right from inside Adobe InDesign. Smart Catalog links data from a plain text- or XML file, or a database to an InDesign document. After the corresponding links have been set up, Smart Catalog lets you manage the data in your InDesign document. Smart Catalog can be used to efficiently create any publication that links to external data. Examples include price lists, image catalogs, product overviews, travel brochures, exhibition books, etc. Updating the publication with the latest information then becomes as easy as one click of a button.
Digital Magazines Tools
WoodWings Digital Magazine Tools are an extension to the Enterprise Publishing System. These tools enable publishers to easily create beautifully-designed and compelling content for tablets like the iPad, and to distribute it through a branded Reader app that offers a unique enduser experience. What makes this solution quite special is that the creation process is, to a large extent, identical to the traditional process of creating content for print. Designers use their familiar tools, such as Adobe InDesign and Content Station, to add interactivity to their layouts.
iv
Contents
Contents
Chapter 01 | Introduction 1 1. Purpose and Target Readers 1 2. Product Versions 2 3. Working Environment 2 4. Using This User Guide 2 4.1 Sections 2 4.2 Icons 3 4.3 Navigating the PDF 3 5. Additional Documentation 4 6. Feedback 4 Chapter 02 | About the Reader App 5 1. Available Projects 6 2. Functionality 7 3. Ways of Customizing 7 4. Distribution 8 4.1 Getting the Content on the Device 8 4.2 Distribution and Payment Models 9 5. New Features and Changes 10 5.1 New Features 10 5.1.1 Android Reader App 10 5.1.2 iPad Reader App 13 5.1.3 Content Delivery Platform 13 5.2 Changes 14 Chapter 03 | The Concept 16 1. Page Orientation 16 2. Page Dimensions 17 3. Stories, Pages, Sections and Segments 18 Chapter 04 | Using the Reader App 23 1. Features by Platform 23 2. Basic Viewing 24 3. Requirements 26 4. Page Scaling 27 5. Accessing the Reader App 28 6. Accessing the Magazine 29 6.1 From Within the Reader App 29 6.2 From Within the Newsstand 30 7. Navigation Tools 32 7.1 Top Toolbar 34 7.1.1 TOC List 34 7.2 Navigation Bar 35
vi
7.2.1 The Back Button 36 7.2.2 The Forward Button 36 7.2.3 The Buy Button 36 7.2.4 The Library Button 37 7.2.5 The Cover Button 38 7.2.6 The TOC Button 38 7.2.7 The Contents Button 38 7.2.8 The Newsfeed Button 39 7.2.9 The Help Button 39 7.2.10 The Account Button 39 7.3 Action Bar 40 8. Navigating the Reader App 42 8.1 Hotzones 43 8.2 Navigation Zones 43 8.3 Gestures 44 8.4 Section Viewer 44 8.5 Story Viewer / Page Viewer 45 8.6 Page Scrubber 47 8.7 Forward/Back Buttons 47 8.8 TOC List 48 8.9 Bookmarks List 49 8.9.1 Bookmarking a Story 50 8.9.2 Accessing a Bookmark 50 8.9.3 Deleting a Bookmark 51 8.9.4 Managing Bookmarks 52 8.10 Dossier Links 53 8.11 Device Rotation 53 9. Dynamic Content 54 9.1 Video 54 9.1.1 Manual Playback 55 9.1.2 Fullscreen Playback 56 9.2 Audio 57 9.2.1 Using Embedded Controls 58 9.2.2 Using the Audio Control 58 9.3 Slide Shows 59 9.3.1 Viewing in Frame 60 9.3.2 Viewing in Fullscreen Mode 60 9.4 Hotspots 61 9.5 Web Elements 62 9.6 Scrollable Areas 63
Contents
9.7 Text View 63 10. Newsfeeds 65 11. Sharing Content 66 11.1 Sharing a Page 67 11.2 Sharing Part of a Page 68 11.3 Sharing a Hyperlink 69 11.4 Reader App Settings 70 12. Using the Store 71 12.1 Store With Subscription Functionality 73 12.1.1 The iTunes Subscription Service 73 12.1.2 A Non-iTunes Subscription Service 75 12.1.3 Signing In or Out 77 12.1.4 Subscribing 78 12.1.5 Upgrading a Subscription 78 12.2 Navigating the Store 79 12.3 Previewing an Issue 79 12.4 Downloading an Issue 80 12.4.1 Non-Progressive Downloads 82 12.4.2 Progressive Downloads 83 13. Using the Library 86 13.1 iPad Reader App Library 86 13.2 Android App Library 90 13.3 Navigating the Library 91 13.4 Using the Library Filter 91 13.5 Using the Segment Filter 93 13.6 Downloading Issues and Segments 94 13.7 Opening an Issue or Segment 94 13.8 Deleting an Issue or Segment 95 14. Custom Home Page 96 15. Version Information 96 16. Reader App Updates 97 17. Using the HTML5 Reader on a PC 97 Chapter 05 | Creating Content 99 1. Creating a Story 101 2. Creating a Dossier 102 3. Creating a Page 103 3.1 Page Sizes 104 3.2 Effective Workspace 107 3.3 Landscape Orientation 108 3.4 Portrait Orientation 109 3.5 Text View Mode 110 3.5.1 Using InDesign CS4 110 3.5.2 Using InDesign CS5 112 3.6 Sections and Page Numbering 112
vii
4. Working with DM Artboards 113 4.1 Creating a DM Artboard 115 4.2 Switching Between DM Artboards 116 4.3 Adjusting the DM Artboard 116 4.4 Assigning Content to a Device 117 4.5 Points to Note 118 4.6 Working Without Artboards 118 5. Designing a Page 119 5.1 Creating a Slide Show 123 5.2 Adding a Video 125 5.2.1 As a URL 125 5.2.2 As a File 127 5.2.3 Auto Play 129 5.2.4 Auto Fullscreen 129 5.3 Adding an Audio File 129 5.3.1 As a URL 130 5.3.2 As a File 131 5.3.3 Auto Play 133 5.4 Creating a Web Element 133 5.4.1 Transparent Web Elements 135 5.4.2 Link to Store and Library 135 5.4.3 Scale Content to Fit Screen 135 5.5 Creating a Dossier Link 136 5.5.1 On a Layout 136 5.5.2 In a Web Element 137 5.6 Basic Hotspots 138 5.6.1 Terms and Components 138 5.6.2 Layers 140 5.6.3 Size and Content 141 5.6.4 Creation 142 5.6.5 Creating a Selected Hotspot 149 5.6.6 Creating a Hotspot Close Button 151 5.6.7 Managing Hotspots using the Layers Panel 151 5.7 Hotspots on Hotspots 154 5.7.1 Terms and Components 154 5.7.2 Creation 156 5.7.3 Creating a Selected Hotspot 162 5.7.4 Creating a Hotspot Close Button 162 5.7.5 Managing Hotspots using the Layers Panel 163 5.8 Using the Hotspot Panel 163 5.9 Creating a Widget 165 5.10 Creating a Scrollable Area 166 5.11 Creating a Custom Object 169
Contents
5.12 Creating a Help Page 169 5.13 Creating Shared Content 170 6. Summary 171 Chapter 06 | Exporting Content 172 1. The Digital Magazine Application 172 1.1 The Search Pane 174 1.2 The Device Toolbar 174 1.3 The Story Pane 175 1.4 The Page Preview panes 176 2. Preparing Content for Export 176 2.1 Magazine Content 177 2.1.1 Adding a Story 177 2.1.2 Verifying the Storys Content 178 2.1.3 Removing a Story 179 2.2 Story Order 179 2.3 Dossier Properties 180 2.4 Image Properties 180 2.5 Content Sharing 181 2.6 Sharing ofip Properties 181 3. Exporting Content 182 3.1 Exporting and Page Scaling 184 4. Summary 184 Chapter 07 | Customizing the iPad Reader App 185 1. Required Tools 186 2. Loading a Project 186 3. What Can Be Customized? 187 3.1 Assets 187 3.2 Colors 189 3.3 Fonts 189 3.4 Text 191 3.4.1 Changing the Text 191 3.4.2 Changing the Text Color 194 3.4.3 Changing the Language 194 3.5 Settings 196 4. Previewing Customizations 196 5. General App Settings 197 5.1 Reader App Name 197 5.2 Reader App Assets 198 5.3 Intent Settings 198 5.3.1 Background Downloading 199 5.4 Background Download Setting 199 5.5 Version Numbering 200 5.5.1 Version Verification 201 5.5.2 Update Release 202
viii
6. Navigation 203 6.1 Story vs Page Navigation 203 6.2 Orientation Lock 204 6.3 Right-To-Left Support 205 6.4 Navigation Bar 205 6.4.1 Tap Area 206 6.4.2 Visibility 206 6.4.3 Items 207 6.4.4 Assets 209 6.4.5 Colors 210 6.5 Flipview 211 6.5.1 Assets 212 6.5.2 Colors 214 6.5.3 Fonts 214 6.5.4 Header 215 6.5.5 Thumbnail Size 216 6.5.6 Thumbnail Awareness 216 6.5.7 Margins 216 6.5.8 Story Title 217 6.5.9 Story Bullets 217 6.5.10 Story Description 218 6.5.11 Page Scrubber 219 6.6 Top Toolbar 220 6.6.1 Availability 220 6.6.2 Visibility 221 6.6.3 Tap Area 221 6.6.4 Items 222 6.6.5 Assets 223 6.6.6 Colors 224 6.7 Hotzones 224 6.8 Gestures 225 7. The Store 226 7.1 Communication With the Store 226 7.2 General Store Features 227 8. The Library 228 8.1 General Appearance 229 8.2 Text 233 8.3 Download Settings 233 8.4 Back To Issue Button 234 8.5 Library Filters 234 8.6 Subscription Sign-in 236 9. General App Features 236 9.1 APIs 237 9.1.1 Analytics API 237
Contents
9.1.2 Gestures API 238 9.1.3 Navigation API 238 9.2 Audio 239 9.2.1 Overlay Assets 240 9.2.2 Embedded Audio Controls 240 9.2.3 Audio Control Pop-Up 241 9.3 Bookmarks 244 9.3.1 Enabling the Functionality 244 9.3.2 Changing the Assets 245 9.3.3 Changing the Colors 246 9.3.4 Changing the Fonts 246 9.3.5 Localizing the Text 247 9.3.6 Changing the Dimensions 247 9.4 Content Sharing 248 9.4.1 Adding Custom Metadata 248 9.4.2 Configuring the DigiMagSettings.h File 249 9.4.3 Cleaning the Project Targets 249 9.4.4 Enabling the Functionality 250 9.4.5 Changing the Assets 250 9.4.6 Changing the Colors 251 9.4.7 Localizing the Text 252 9.5 Custom Home Page 253 9.5.1 Requirements 253 9.5.2 Header Files 254 9.5.3 Implementation 255 9.6 Custom Objects 257 9.6.1 Configuring Custom Objects 259 9.7 Downloading Methods 260 9.7.1 Non-Progressive Downloading 260 9.7.2 Progressive Downloading 261 9.8 Fullscreen Overlay 262 Step 1. Adding the Settings File 262 Step 2. Adding the Overlay Window Files 262 Step 3. Customization 262 Step 4. Adding the Navigation Bar Button 263 9.9 iOS 5 iCloud Support 263 9.10 Libraries 264 9.10.1 Caching 264 9.10.2 Library Filter 265 9.10.3 Library Segment Filter 266 9.11 Newsfeeds 267 9.12 Newsstand (iOS 5) 268 9.12.1 Configuration 269 9.13 No Internet Connection Indicators 272
ix
9.14 Push Notifications (Messages) 272 9.14.1 Configuration 273 9.14.2 Sending Messages 273 9.15 Slide Shows 274 9.16 Store Filter 275 9.17 Subscriptions 276 9.17.1 Configuring the Reader App Functionality 277 9.17.2 Modifying the Reader App Appearance 278 9.18 Text View 283 9.19 TOC List 284 9.19.1 Enabling the Functionality 285 9.19.2 Changing the Assets 285 9.19.3 Changing the Colors 286 9.19.4 Changing the story text 286 9.19.5 Changing the Width and Height 287 9.19.6 Localizing the Text 287 9.19.7 Changing the Fonts 288 9.20 Video 288 9.20.1 Overlay Assets 289 9.20.2 Hiding Embedded Video Controls 290 9.21 Remove Video After Play 291 9.22 Web Elements 292 Chapter 08 | Building the iPad Reader App 293 1. Preparation 293 1.1 A Reader App Without Store Functionality 294 1.2 A Reader App With Store Functionality 294 1.3 An App Without Newsstand Functionality 296 2. Building 296 Chapter 09 | Customizing the Android Reader App 297 1. Required Tools 298 2. OS Compatibility 298 3. Loading a Project 299 4. Universal Builds 300 5. What Can Be Customized? 300 5.1 Drawables 301 5.2 Text 301 5.2.1 Changing the Text 302 5.2.2 Changing the Language 304 5.3 Settings 305 6. Previewing Customizations 305 7. General App Settings 306 7.1 Reader App Name 306 7.2 Reader App Drawables 307
Contents
7.3 Web Pages 307 7.3.1 Custom Information 308 7.3.2 Metrics Information 308 7.4 Version Information 311 7.5 Intent Settings 311 8. Navigation 312 8.1 Story vs Page Navigation 312 8.2 Navigation Bar 313 8.2.1 Tap Area 314 8.2.2 Items 314 8.2.3 Drawables 315 8.2.4 Visibility Settings 317 8.3 Action Bar 317 8.3.1 Tap Area 318 8.3.2 Items 318 8.3.3 Drawables 320 8.3.4 Text 323 8.3.5 Visibility 323 8.4 Flipview 324 8.4.1 Header 325 8.4.2 Story Viewer / Page Viewer 326 8.4.3 Page Scrubber 329 8.4.4 Section Viewer 330 8.4.5 Close Button 331 8.4.6 Drop Shadow 332 8.5 Top Toolbar 333 8.5.1 Availability 333 8.5.2 Visibility 333 8.5.3 Tap Area 334 8.5.4 Items 334 8.5.5 Drawables 335 8.6 Hotzones 335 8.7 Orientation Lock 336 9. The Store 337 9.1 Communication With the Store 338 9.2 Reader App Components 339 10. The Library 342 10.1 Subscription Sign-In Window 342 10.2 Library 345 11. General App Features 349 11.1 Audio 349 11.1.1 Overlay Drawables 350 11.1.2 Audio Settings 350 11.1.3 Embedded Audio Controls 351
x
11.2 Custom Objects 351 11.3 Downloading Methods 352 11.3.1 Non-progressive Download Method 352 11.3.2 Progressive Download Method 353 11.4 In-App Billing 355 11.5 Newsfeeds 356 11.6 No Internet Connection Indicators 357 11.7 Scrolling Indicators 358 11.8 Slide Shows 359 11.9 Text View 359 11.10 Video 360 11.10.1 Overlay Drawables 361 11.10.2 Video Player Drawables 362 11.11 Hiding Embedded Video Controls 363 11.12 Web Elements 364 Chapter 10 | Building the Android Reader App 365 1. Universal Builds 365 2. Preparation 366 2.1 Eclipse 366 2.2 Reader App Without Store Functionality 367 2.3 Reader App With Store Functionality 367 3. Building 368 Chapter 11 | Customizing the HTML5 Reader App 369 1. Required Tools 370 2. Project Files 370 3. What Can Be Customized? 371 3.1 Images 372 3.2 Colors 372 3.3 Text 373 3.4 Settings 374 4. Previewing Customizations 374 5. General App Features 375 5.1 General Appearance 375 6. Navigation 378 6.1 Story vs Page Navigation 378 6.2 Navigation Bar 379 6.2.1 Items 379 6.2.2 Images 380 6.3 Flipview 381 6.3.1 Background 382 6.3.2 Header 382 6.3.3 Thumbnail Border 383 6.3.4 Story Title 383
Contents
6.3.5 Story Bullets 384 6.3.6 Story Description 384 6.3.7 Page Scrubber 385 6.4 Hotzones 385 6.5 Navigation Zones 386 6.6 Top Toolbar 387 6.6.1 Availability 387 6.6.2 Images 387 7. General App Features 388 7.1 Audio 388 7.2 Slide Shows 389 7.2.1 Navigation Zones 389 7.2.2 Overlay Images 389 7.3 TOC List 390 7.3.1 Enabling the Functionality 390 7.3.2 Changing the story text 391 7.4 Video 391 Chapter 12 | Building the HTML5 Reader App 392 1. Bundling the Content 392 Chapter 13 | Distributing Reader Apps Without Store 394 1. Submitting the Reader App 394 1.1 To the iTunes App Store 395 1.2 To an Android App Store 395 Chapter 14 | Distributing Reader Apps With Store 396 1. The Content Delivery Platform 397 2. Distribution Workflow 398 3. Distributing the Reader App 398 3.1 Updating the Reader App 399 4. Distributing Issues 400 4.1 Registering With iTunes Connect 400 4.2 Registering With the CDP 400 Appendix A | Layout Sizes 401 1. Formula 401 1.1 Device Settings 402 1.2 Page Sizes 402 Appendix B | Creating Text View Markup Articles 404 1. Text View Markup 404 2. Requirements 405 3. Creating the Article 405 3.1 Element Label Mapping 406 3.2 Styles Mapping 407
xi
4. About Overrides 407 5. Using Tables 408 6. Known Limitations 408 7. Including Images 409 Appendix C | Image Dimensions 410 1. iPad 410 2. Android 417 3. HTML Store 422 4. HTML5 Reader App 422 Appendix D | Working With Widgets 424 1. File Format 424 2. File Structure 425 3. Creating the manifest.xml File 425 4. Making the Widget Available 427 Appendix E | The DMSettings File 428 1. File Structure 428 2. Features by Platform 429 3. Overview 439 3.1 Share Toolbar Settings 439 3.2 Store Settings 440 3.3 Navigation Settings 441 3.3.1 Color Settings 444 3.3.2 Font Settings 446 3.4 Intents Settings 448 3.5 TOC Popup Settings 448 3.6 Bookmark Popup Settings 449 3.7 Hotzone Settings 449 3.8 Flipview Settings 450 3.9 Library Settings 451 3.10 Metrics 452 3.11 Content 453 3.12 Resolution 453 3.13 Tracking 454 3.14 Web Element Popup 454 3.15 Newsstand 455 Appendix F | Using the Content Delivery Platform 456 1. Logging In and Logging Out 456 2. System Structure 457 2.1 Accessing the Components 459 2.2 User Types 460 3. Setting Up the CDP Environment 463 3.1 Adding a Domain 463 3.2 Adding a Reader Application 464
Contents
3.3 Adding a User 465 3.4 Adding an Issue 465 3.4.1 Adding a Full Issue 466 3.4.2 Adding an Issue in Segments 468 3.4.3 Adding a Subscription 471 3.5 Adding a Development Device 472 4. Managing the CDP Environment 473 4.1 Configuring Reader Apps 473 4.1.1 Configuring the Metadata 475 4.2 Managing Issues 475 4.2.1 Adding an Issue 475 4.2.2 Deleting an Issue 476 4.2.3 Editing an Issue 476 4.2.4 Adding a Rendition 477 4.2.5 Convert to HTML5 478 4.3 Managing Segments 478 4.3.1 Adding to a New Issue 478 4.3.2 Adding to an Existing Issue 479 4.3.3 Deleting a Segment 480 4.3.4 Editing an Segment 480 4.3.5 Adding a Rendition 481 4.3.6 Sorting Segments 482 4.4 Managing Renditions 482 4.4.1 Adding a Rendition 483 4.4.2 Convert to HTML5 484 4.4.3 Deleting a Rendition 485 4.4.4 Editing an Rendition 485 4.5 Managing Subscriptions 486 4.5.1 Adding Subscription 486 4.5.2 Deleting a Subscription 486 4.5.3 Editing an Subscription 487 4.5.4 Sorting Subscriptions 487 4.6 Managing HTML5 Conversions 488 4.6.1 Converting to HTML5 Format 489 4.6.2 Removing Converted Content 490 4.7 Managing Development Devices 490 4.7.1 Adding a Development Device 490 4.7.2 Deleting a Development Device 491 4.7.3 Editing a Development Device 491 4.8 Sending a Push Notification (Message) 492 4.8.1 Sending a Message to Users 492 4.8.2 Sending a Newsstand Notification 494 4.9 Managing Users 495 4.9.1 Adding a User 495
xii
4.9.2 Editing a User Profile 495 5. Progressive Downloads 496 6. Magazine Encryption 497 Appendix G | Customizing the HTML Store 498 1. Required Tools 498 2. The Store 499 2.1 Opening Issues Directly From the Store 504 3. Project Files 505 3.1 Configuration Settings 506 3.2 Images 507 3.3 Colors 513 3.4 Fonts 515 3.5 Text 516 3.5.1 Changing the Text 516 3.5.2 Changing the Color 517 3.6 Language 518 3.7 iTunes Subscription Environment 519 3.7.1 Page Design 521 3.7.2 Text 521 3.7.3 Text Styling 522 3.7.4 Subscription Buttons 523 3.8 Non-iTunes Subscription Environment 525 3.8.1 A Sign In/Sign Out Button 525 3.8.2 The Subscription Offer Page 527 3.8.3 The Subscription Button Area 527 3.9 A Mixed Subscription Environment 528 Appendix H | Tips and Best Practices 530 1. Generating IDs and Keys 530 2. Submitting and Approval Cycles 531 Appendix I | Gestures API 532 Appendix J | Navigation API 534 1. Structure 534 2. Classes 536 Appendix K | Omniture Integration 542 1. Prerequisites 542 2. Viewing Data 543 3. Setting Up SiteCatalyst 546 3.1 Custom Traffic Variables 546 3.2 Custom Conversion Insight Variables 547 3.3 Custom Success Events 548 4. Reader App Configuration 548 5. Events 550 6. Variables 552 6.1 Tracks 552
Contents
6.2 Track Links 554 7. Variables Sent with all Tracks 559 Appendix L | Subscription Server Integration 560 1. Steps To Follow 560 1.1 Configuring the Subscription Environment 561 1.1.1 Web Pages 561 1.1.2 Subscription Server 562 1.2 Configuring the Content Delivery Platform 563 Appendix M | iTunes Subscription Server Integration564 1. Steps To Follow 564 Step 1. The Subscription Environment 565 Step 1.1. Web Pages 565 Step 1.0.1. The Subscription Offer Page 566 Step 1.0.2. The MyAccount Page 566 Step 1.2. iTunes Subscription Server 568 Step 1.2.1. Adding the Subscription Offers 569 Step 1.2.1. Generating a Shared Secret 570 Step 2. Configuring the CDP 570 Step 3. Configuring the Reader App 571 Appendix N | Reader App Features Comparison572 Appendix O | Licenses 578 1. android-plist-parser 579 2. Jackson Java JSON-processor 580
xiii
01 Introduction
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, building and distributing the app. The target audience for this user guide is the WoodWing Partner who uses the documentation to train the customer/end user in all facets of digital magazine publishing. 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.
Chapter 01 Introduction
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
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 As a dedicated Reader App for use within a
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.
devices
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.
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. immediately open the page.
Pages Panel. Click on a page thumbnail to 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.
5. Additional Documentation
This user guide frequently refers to the iTunes Connect Developer Guide. This can be downloaded from the following 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 information. The Knowledge Base is available at WoodWings 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 feedback relating to this user guide, please send an e-mail to documentation@woodwing.com.
02 About the Reader App

WoodWings Digital Magazine Reader App is a highly functional, highly customizable application for viewing digital magazines created with WoodWings Digital Magazine Tools. This chapter gives a brief overview of the versions available, its functionality, ways of customizing, the method of distribution, and the new features and changes of the latest release.
Chapter 02 About the Reader App
1. Available Projects
The Digital Magazine Reader App is available in the following types of projects:
Android projects
Basic and Standard. This project comes
Apple iPad projects
Basic and Standard. These come without
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. 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.
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. 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 downloaded issues and choose which one to read. Only one Reader App is required to read all issues of the magazine. Framework projects but with additional Subscription functionality, allowing users to subscribe to a publication.
Pro and Framework. This project includes
Pro and Framework: same as the Basic and
HTML5 projects
Basic. This project comes without the Store,
Subscription: same as the Pro and
Library and Subscription functionality and therefore needs to have the magazine content included; each magazine issue is distributed as a separate Reader App.
See also section 3. Ways of Customizing for information about customization and available licenses.
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 subscription functionality. The Apple Subscriptions project can be used to offer Apple Auto-renewable subscriptions only, or combined with non-Apple Subscription services.
2. Functionality
The Reader App contains a multitude of different features and functionality, aimed at providing the best reader experience. Some of the functionality includes:
Navigational tools such as a Navigation bar,
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
Table of Contents List, Forward and Back buttons, and a Page Scrubber to quickly browse through the magazine content. shows, Hotspots, Web Elements, Widgets, and Scrollable Areas.
Dynamic content such as video, audio, slide
App
A Store (Pro, Framework, Subscription, and
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,
Apple Subscription projects only) for viewing and downloading separate issues.1
Customizing the iPad Reader App.
A Library (Pro, Framework, Subscription, and
Apple Subscription projects only) for viewing available issues.1 Fra m ewo r k, Su bsc r iptio n, a nd A p p l e Subscription projects only) for viewing issues available as part of a subscription.1 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 the Android Reader App: chapter 9,
Customizing the Android Reader App. Customizing the HTML5 Reader App.
S u b s c r i p t i o n f u n c t i o n a l i t y ( P r o,
For the HTML5 Reader App: chapter 11,
Customizations and licenses
Customizations. Additional functionality can
The extent of customization which you are allowed to do is determined by the purchased license:
Basic/Pro: you are only allowed to change
the App icon and name.
Standard/Basic: you are allowed to build 1
For a detailed overview of all the features and how to use them, see chapter 4, Using the Reader App.
App using the Standard/Basic project.
Framework/Subscriptions/Apple
Subscrtiptions: you are allowed to fully customize the App, as per this user guide.
Not available on the HTML5 Reader App. 7
Differences in the number of possible customizations exist between the Reader Apps for the iPad and Android.
2
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 A Reader App in which the magazine content
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 download; the magazine content can be accessed straight away. For this method, each magazine issue is downloaded as a separate app.
Reader App including magazine content
app store
included1
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 downloaded 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.
Tablet
Figure 4.1a. When distributing a Reader App including the content, both are downloaded from an app store as a single download
The process of distributing the Reader App separate from the magazine content involves more steps: first, the Reader App is downloaded (typically for free and without content) from the app store. By using the Store functionality 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.
Note that the Android Market only allows apps to be uploaded with a maximum file size of 50MB.
1
Issues can also be offered for free, but the process of downloading these separately is the same.
2
4.2 Distribution and Payment Models

As far as distributing the magazine as a package is concerned, the following distribution models are available:
app store
Complete magazine. All magazine content
is made available in one download.
Reader App without content
For Reader Apps without Store functionality, this is the only way of offering content to the user.
In segments. (Reader Apps with Store funcTablet
Magazine content
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 payment models are available:
Content Delivery Platform
Free of charge. Magazines can be offered
fully free of charge.
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
Single purchase. Magazines can be offered
as a single purchase.
S u b s c r i p t i o n . ( R e a d e r A p p s w i t h
For more information about distributing a Reader App without Store functionality, 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.
Subscription functionality only). Magazines can be offered as part of a subscription service.
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 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). 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 the drawable-nodpi-v8 folder. SDK 2.2
Any Froyo-specific drawables are located in
10
The drawable-hdpi, drawable-mdpi and draw-
able-ldpi folders still exist but only contain the app icon.
For more information, see chapter 9, Customizing the Android Reader App section 8.1, Story vs Page Navigation.
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.
Hotzones overlaying interactive objects
Progressive download support
Support 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 progressive download feature, see chapter 9, Customizing the Android Reader App section 11.3.2, Progressive Download Method.
When interactive objects (such as Slide Shows, videos, etc.) are placed within the area of a Hotzone, their functionality cannot be accessed because of the overlaying Hotzone area. 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 indicators
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.
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. This functionality can be controlled through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 11.7, Scrolling Indicators.
Auto open magazine
An issue or Segment can now be opened automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). This functionality can be controlled through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 11.3, Downloading Methods.
Account button is context sensitive
The 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. when the Store is accessed.
Gestures
Honeycomb: this button is only displayed
A two-finger swipe can now be used for navigating to the first page of the next story (Page navigation only). This functionality can be controlled through a DMSetting.
11
History buttons as DMSetting
The History (Back/Forward) buttons can now be included or excluded from the toolbars through the ToolbarItems DMSetting. For more information, see:
Top Toolbar bar (Froyo): chapter 9,
Auto open Flipview on toolbar display
The Flipview can be made to appear automatically when the Navigation bar/Action bar is displayed. This functionality can be set through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 8.4, Flipview.
Customizing the Android Reader App section 8.5.4, Items. Customizing the Android Reader App section 8.3.2, Items.
Action bar (Honeycomb): chapter 9,
Maximum number of items displayed in Action bar
The maximum number of items to appear on the righthand side of the Action bar can now be controlled by a DMSetting (up to a maximum of 6). For more information, see chapter 9, Customizing the Android Reader App section 8.3.2, Items.
Story bullet display in Flipview
Including or excluding Story bullets in the Flipview can now also be controlled for the Honeycomb version of the Reader App. For more information, see chapter 9, Customizing the Android Reader App section 8.4.2, Story Viewer / Page Viewer.
Page number display in Flipview
The 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 controlled through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 8.4.2, Story Viewer / Page Viewer.
12
5.1.2 iPad Reader App iOS 5 Newssstand support

The iPad Reader App now supports Apples 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 autorenewable In-App Purchase subscription. Support for iOS 5s Newsstand functionality is included by default in the following projects:
Pro Framework Subscriptions Apple Subscriptions
5.1.3 Content Delivery Platform iOS 5 Newssstand support

The Content Delivery Platform can now be used for sending notifications to the Apple iOS 5 Newsstand, 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.
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 functionality from a project, see chapter 8, Building the iPad Reader App section 1.3, An App Without Newsstand Functionality.
13
5.2 Changes
The following changes have been implemented in the Android Reader App v1.3:
Drawables made obsolete
The following drawables have been made obsolete:

headerbarshadow.png. The shadow as
Customer project
shown below the Library toolbar (Froyo version). Element in its non-available state.
The file DigiMag.java that used to exist in the project customerapp 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.
back_grey.png. The Back button of a Web library_top_bar.png. The image used for the
top bar (situated between the Action bar and the top Library shelf). shadow between the issue information pane and the issue preview pane (landscape orientation).
previewshadowlandscape.png. The
Renaming Reader App
In order to rename the Reader App, only the AndroidManifest.xml file needs to be modified (previously 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.
previewshadowportrait.png. The shadow
between the issue information pane and the issue preview pane (portrait orientation).
Strings made obsolete
Creation of app icon in high dpi
The following strings have been made obsolete:

Cover story. The cover story title. Successfully logged out. Message appear-
Apparently the launcher on the Android Honeycomb version (always) uses the hdpi version of the icon.png, even on mdpi devices. Customers should therefore always create 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.
ing after user has successfully logged out of the Subscription account.
Buttons moved in Action bar
In 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.
14
Strings made obsolete
The following strings have been made obsolete: <string name=logged_out>Successfully logged out.</string> <string name=action_feed>Newsfeed</string> <string name=action_custom>Custom</string>
15
03 The Concept
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 orientation: 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 orientation (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 interview in the form of a video on a single page in landscape mode).
16
Chapter 03 The Concept
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 dimensions of the screen of the device on which it is viewed. Using this method, a story containing 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. 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)
For the second method, the page can be
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)
17
3. Stories, Pages, Sections and Segments

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

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 orientation. (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 navigate 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.
20
Story A Layout A1
Story B Layout B1
Story C Layout C1 Layout C1
Page 1
Page 1
Page 2

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 vertically. This navigation method is referred to as Story Navigation. Three stories are shown containing layouts in portrait orientation. (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 navigate the content (either from page to page or scrolling within the page, depending on the setup). 21 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 A Layout A1
Story B Layout B1
Story C Layout C1
Page 2 Page 1 Horizontal navigation between pages
Page 1

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 orientation. (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 navigation 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).
22
04 Using the Reader App

A good understanding of the Reader App components 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.
23
Chapter 04 Using the Reader App
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.
iPad Reader App
When 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 Froyo
HTML5 Reader App
When viewing a magazine using the HTML5 Reader App in a Web browser, the full page is shown.
When 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.
Figure 2a. Viewing a magazine in a Web browser using the HTML5 Reader App
24
Android Reader App on Honeycomb
When 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.
B A
C
A
Status bar
Reader
Status bar
Reader
System bar
Figure 2.b. Basic components of the iPad Reader App
Figure 2.c. Basic components of the Android Reader App (top: Froyo version, bottom: Honeycomb version
25
3. Requirements
To get the best experience out of reading a magazine using the WoodWing Reader App, take note of the following requirements:
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.
iPad and Android version
Reader App version. Verify if the version
Google Chrome. Using Google Chrome
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.
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. 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.
Operating system compatibility. Before
General use. The HTML5 version of the
upgrading your tablet to a new operating system, verify whether the Reader App is supported by that operating system. An update of the Reader App might be required when upgrading to a new operating system. Android devices come in many different sizes. If the magazine publisher has designed the content 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 optimal when viewing the magazine on smaller or lager devices.
Device metrics. (Android Reader App only)
26
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. 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 (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 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
Fit screen. The page will be scaled to fit the
Fit screen disproportionately. The page
Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
1
27
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). and access the correct URL.
This method is for instance used by TV Guides where first a Web page is shown with current TV channel information, after which the magazine can be accessed to read articles related to the world of TV and movies.
Restoring the Reader App state
HTML5 Reader App: open a Web browser
As 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
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 functionality 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. those Reader Apps which have Store functionality 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.
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
The Store is accessed. This is the case for
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. application, states are not restored.
When the Reader App is closed by the shell
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.
28
6. Accessing the Magazine

The magazine issue can be accessed in one of the following ways:
From within the Reader App itself From within the Newsstand
6.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
Each is explained in the following sections.
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.
29
6.2 From Within the Newsstand

Apples 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 following benefits:
The Newsstand acts as a central location from
As a magazine As a newspaper A B
which a Reader App can be opened whithout having to locate it somewhere on the iPad first.
Magazine type issue
Newspaper type issue
New issues can be made to download auto-
matically in the background as soon as they become available. This way the download process does not have to be started manually. For more information about the Newsstand, see www.apple.com/ios/ios5/features.html#newsstand.
Figure 6.2a. The different ways in which issues can be displayed in the Newsstand
Notifications and download initiation
Whether or not an issue is made part of the Newsstand is determined by the publisher of the magazine.
When a new issue is available, the publisher sends a notification 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.
Displayed icons
Initially, 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 downloaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is displayed once more. Issues can be displayed in one of two different ways:
The icon is not changed when the download is started from the Reader App.
1
Figure 6.2b. When a new version of an issue is available, a New badge is displayed in the top righthand corner of the issue icon In case the Reader App is not yet running, it is
loaded in the background.
30
The download of the new issue is started (but
see download scenarios below).
When an issue contains Segments, all Segments will be downloaded.
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.
Download scenarios
When 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. issues can only be done when you are logged in to the account. Newsstand, turn off the following setting on the iPad: Store > Automatic Downloads.
Background downloading for subscription
To turn background downloading off for the
Depending on the state of the Reader App at the time the download request is received, 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 download may be queued.) started and the full issue is downloaded in the background. (If other downloads are already in progress, the download may be queued.)
The Reader App is in use. The download is
31
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 appearsshowing the first page of each story of the magazine1as 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 button, link or any part of the page, the navigation tools will disappear again. Each component is explained in more detail in the following sections.
The iPad Reader App can also be configured in such a way that all pages of all stories are displayed; the Story Viewer then acts as the Page Viewer. Note that the Android Reader App always shows all pages in the Story Viewer.
1
32
F A C
C D E
Top Toolbar
TOC List
Story Viewer / Page Viewer
Section viewer
Navigation bar
Action bar
Figure 7. The navigation tools of the Reader App (left: iPad Reader App, right: Android 3.0 Reader App)
33
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
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.
the next or previously viewed page. (See section 8. Navigating the Reader App.) section 7.1.1 TOC List.)
TOC List. For bringing up the TOC List. (See 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.) playing a logo.
Image icon. (Optional) Typically used for disShare 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.)
TOC List
Figure 7.1.1. Tapping the TOC button in the top toolbar brings up the TOC List G
A
A D F
For more information about using the TOC List, see section 8.8 TOC List.
Back button B Forward button C TOC List button Audio control button E Bookmarks List button Image icon G Share content button
Figure 7.1. The components of the top Toolbar
Tapping a button will activate the functionality of the button.

34
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
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, depending on the configuration.) instructions about how to use the Reader App.
Help. For accessing the page containing Account. (Store versions with subscription
navigating to a previously visited page.
Forward button. (iPad Reader App only)
functionality only) For accessing the account details for a subscription. accessing a Web page with custom information such as privacy information.
For navigating to the page that was last visited before tapping the Back button. Store.
Custom. (Android Reader App only) For
Buy. (Store versions only) For accessing the Library. (Store versions only) For accessing
the Library.
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 button, each of which is explained in the following sections.
Cover. For accessing the magazine cover. TOC. For accessing the page containing the
table of contents.
A
A G
B
B H
C Forward button Contents button

C I
Back button Help button
Buy button D Library button E Cover button F TOC button Newsfeed button J Account button K Custom
Figure 7.2. The Navigation bar buttons
35
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.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.
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.
Figure 7.2.3. The Store shows all available issues for a particular magazine title
For detailed information about using the Store, see section 12. Using the Store.
36
7.2.4 The Library Button

When tapping the Library button in the Navigation bar, the Library appears, showing all available issues of a magazine. 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.
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 section 13. Using the Library.
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)
37
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.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.
7.2.6 The TOC Button

When tapping the TOC button in the Navigation bar, the table of contents page of the magazine appears.
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.
38
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 subscription account to which the user is currently logged in can be managed. For detailed information about using the subscription features, see section 12.1 Store With Subscription Functionality.
39
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
page. (Or any other type of Web page, depending on the configuration.) custom information such as privacy information.
Custom. For accessing a Web page with
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
Store.
Library. (Store versions only) For accessing
the Library.
table of contents.
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.)
Contents. For accessing the Story / Page
Viewer and the Section Viewer.
page. (Or any other type of Web page, depending on the configuration.) instructions about how to use the Reader App.
F G H I J
Help. For accessing the page containing
K L
A B C D E F G
Buy button Library button Magazine button Newsfeed button Custom button Cover button Contents button
H I J K L
Back button Forward button Menu button TOC button as menu command Help button as menu command
Figure 7.3. The Action bar buttons
40
Account. (Store versions with subscription
functionality only) For accessing the account details for a subscription. custom information such as privacy information. to a previously visited page.
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
Custom. For accessing a Web page with Back button. (Always visible) For navigating
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.
41
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
Each tool or method is explained in the following sections. Navigating the magazine can also be done by various 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 information about how to use these custom tools, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)
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. gers will navigate the user to the next/previous page or story. particular section of the magazine.
Gestures: swiping by using one or two fin-
Section Viewer: for quickly navigating to a Story Viewer / Page Viewer: for quickly
viewing and selecting the available stories or pages.
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. window on top of the page. stories.
TOC List: a table of content displayed in a Bookmarks List: a list with bookmarked Dossier Links: links on a page which will take
you to a particular page of a story.
Device rotation: rotating the device brings
up a page in a different orientation.
42
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
8.2 Navigation Zones

(HTML5 Reader App only) 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 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.
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.2 The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)
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
43
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:
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.
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
Figure 8.4. The Section Viewer shows all sections of a magazine
next or previous story.
Using the Section Viewer
Page navigation: takes the reader to the
next or previous page.
The 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.
Two-finger swipe. Works only when the
Reader App has been configured for page navigation; it takes the reader to the next or previous story.
Vertical navigation
App has been configured for story navigation only: next or previous page.
Additional gestures for navigating the magazine can be implemented by the Reader App developer. For more information about how to use these custom gestures, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)
44
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,
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
showing only the first page of each story.
Differences exist in how these components are displayed in the different Reader App versions, as shown in the table on the following page.
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) 45
Table 8.5. Story Viewer / Page Viewer differences between Reader App versions Reader App version Component Page preview Story title Story bullet Story description Page number iPad, Android (Froyo), HTML5 All page previews are spaced apart equally. Displayed below the page preview. Displayed before each story title. Displayed below the story title. Displayed below the page preview (Froyo only) Android (Honeycomb) Space between stories is larger than space between pages of a story. Displayed above the page preview. Not used. Displayed below the story title. Displayed below the page preview.
D
A
Page preview
Story bullet
Story title
Story description
Page number
Figure 8.5b. Story Viewer / Page Viewer components. The top image depicts the iPad/Android (Froyo)/HTML5 version, the bottom image the Android (Honeycomb) version
Using the Story Viewer / Page Viewer
The functionality of the Story Viewer and Page Viewer is identical: swipe left or right to locate the required story or page and tap the thumbnail to display the page. Once tapped, the Action bar or Navigation bar and top Toolbar (when enabled) will automatically disappear.
46
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.
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) Action Bar),
As part of the Action bar (see section 7.3 A

A
Page scrubber A
A
Figure 8.6. The Page scrubber
B
B
Using the Page Scrubber
Back button
Forward button
The Page Scrubber is essentially a slider which can be moved left or right. By doing so, the thumbnails in the Story Viewer / Page Viewer are moved in the same direction, allowing the user to quickly browse the available pages in the magazine.
Figure 8.7. The Forward and Back buttons in the top Toolbar
These buttons are disabled when the user accesses the Store or Library, or when the user has not accessed any pages yet.
47
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.
Using the TOC List
The TOC List is used by swiping the list up or down to the required story and tapping the story to navigate to it. Once tapped, the TOC List, top Toolbar and Navigation bar will automatically disappear.
TOC List
Figure 8.8. Tapping the TOC button in the top toolbar brings up the TOC List
Each TOC List entry shows the following information:

A preview of the first page of the story Story title Description
48
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 The Story title The Story description D
has been downloaded through the Store)
How to use Bookmarks and the Bookmarks List is explained in the following sections.
A C
Bookmark List button B Edit button Bookmark button D Bookmark
Figure 8.9. Tapping the Bookmarks button brings up the Bookmarks List
49
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 Listeven when closing the issue containing the bookmarked storyup 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: Step 1. Tap the screen to access the top Toolbar. This can be done in any issue, not necessarily the issue containing the bookmarked story. Step 2. Tap the Bookmarks List button. The Bookmarks List appears. 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 bookmarked issue is opened.
50
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 Management controls
Step 1. Tap the screen to access the top Toolbar. Step 2. Tap the Bookmarks List button. The Bookmarks List appears. 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.
Using the swipe method
Step 1. Tap the screen to access the top Toolbar. Step 2. Tap the Bookmarks List button. The Bookmarks List appears. 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.
51
8.9.4 Managing Bookmarks

Managing created Bookmarks is done by performing the following steps: Step 1. Tap the screen to access the top Toolbar. Step 2. Tap the Bookmarks List button. The Bookmarks List appears. 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
A
Done button
Reordering control
Delete button
button.
Figure 8.9.4a. When tapping the Edit button, the Edit controls appear
To rearrange t he 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.4b. Rearranging the Bookmarks list can be done by dragging the Bookmark by its Reordering control.
52
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).
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.
Using a Dossier Link
To use a Dossier Link, tap the defined area to navigate to the related story or page within that story.
53
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
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
How to interact with each type of content is described in the following sections.
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 optionally 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.
54
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 minimizing 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 displayed. 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.
A
A Play/Pause button
B
B
C Scrubber
C
Full screen button
Figure 9.1.1. The video controls
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 button once more to resume playback.
Tap the Play/Pause button to pause the video. Use the scrubber to scroll through the video.
The Reader App can also be configured in such a way that videos automatically start playing as soon as the page is loaded.
1
55
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
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.
A B C
the Full Screen button in the toolbar pinching movement video
(iPad and Android Reader App) Using the (HTML5 Reader App) Double-click the
Videos can also be set to automatically play in fullscreen mode. 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 App
The toolbars containing the video controls appears (see figure 9.1.2 to the right).
After a short time, the toolbar will disappear.
A D F
To bring the toolbar back up, tap the video once. video.
Done button B Scrubber C Aspect ratio button Rewind button E Play/Pause button Fast forward button G Minimize button
Tap and hold the Rewind button to rewind the Tap the Pause/ Play button to pause the video
Figure 9.1.2. The iPad video controls in fullscreen mode
or resume playback.
HTML5 Reader App
Tap the minimize button to leave fullscreen
When hovering the mouse over the video, the toolbar containing the video controls appear.
Click the Pause/ Play button to pause the
mode and continue playing the video. and stop playing the video.
Tap the Done button to leave fullscreen mode Use the scrubber to scroll through the video. 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.
1
video or resume playback.
Use the scrubber to scroll through the video. Double-click the video to leave the fullscreen
mode.
56
9.2 Audio
Audio files can be recognized by their icon; tapping the icon will play the audio file.
(Android only) Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.
Figure 9.2. Audio files can be recognized by their icon
The Reader App can also be configured in such a way that the audio icon as well as the audio controls are hidden, 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.
57
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.
9.2.2 Using the Audio Control

This feature is not available on the Android version of the Reader App; any automatically played background 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
The icon changes into a pause button. audio.
Tap the audio icon again to stop playing the
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.)
For audio files for which the audio has been started automatically and for which the playback controls are hidden, using the Audio Control is the only way of controlling its playback.
1
58
9.3 Slide Shows

Slide Shows can be recognized by their icon in the lower left-hand corner of the frame.
B C D Figure 9.3. Slide Shows can be recognized by their icon
E
A C E
Audio control button B Audio control popup Audio title D Audio description Stop/Restart button F slider
A Slide Show can either be viewed within the frame itself or in fullscreen mode. Each method is explained in the following sections.
Figure 9.2.2. The Audio Control components
59
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
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
the next or previous image.
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 displayed image left or right to view the next or previous image.
60
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 window, 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 communicated 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 Hotspots
Using 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 disappears 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 popup window (below)
61
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
Using Web Elements
To 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. 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. 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.
(small) components of a Web page.
Content in a pop-up window. The content
As a pop-up window. Can be used for dis-
playing small components of a Web page or the full Web page. Web pages.
In a Web browser. Used for displaying full
Content in a Web browser. The content is
It is up to the designer how Web Elements are incorporated 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 magazine (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.
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.
62
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 functionality is incorporated in the page, and how it is communicated to the reader that a certain page item contains Scrollable Area functionality. For more information 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.)
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 readers 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.
Using a Scrollable Area
A Scrollable Area is used by doing the following:

Swipe the content left/right or up/down to
view any currently hidden content.
Figure 9.7. In Text View mode, the text of the article can be increased or decreased in order to suit the users 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
63
landscape orientation (effectively an image) by which the text obviously cannot be scaled.
Images
Images can be incorporated in one of the following ways:

As a header image, appearing at the top
Using Text View
To use Text View, do the following:

Use the vertical pinch gesture to increase or
of the page, before the article starts.
decrease the text (but see comments below about header images). While pinching, the current font size is displayed in percentages in the top right-hand corner of the page.
Designers can use a header image to display 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,
Navigate the page by swiping up or down.
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 present 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.
64
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 controls 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.
Close button
Figure 10. The Newsfeed page
65
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
The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar.
page or the thumbnail of the page as shown in the Story Viewer / Page Viewer. a page.
Part of a page. A manually defined part of 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.
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
66
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
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, proceed 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
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
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. hyperlink inserted. Enter further details such as the recipients e-mail address and tap Send.
E-mail. An e-mail is created with the
screenshot; any content obscured by a toolbar is included in the screenshot. tured; the background image (such as a placeholder image) is used instead. in full.
Video playback cannot be cap-
Long pages cannot be captured
67
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. Step 2. Tap the Share Content button in the top Toolbar. A screen appears asking what needs to be shared. Step 3. Choose Part of this page. The Area Selector appears.
A B
Drag the Move handle in the middle to
reposition the defined area.
Step 5. In the top Toolbar, tap Share. The Content Sharing window appears showing all defined sharing services. Step 6. (Optional) To return the Area Selector, tap Edit Selection. Step 7. Tap the required service. Step 8. Depending on the chosen service, proceed as follows:
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. 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. page inserted or attached. Enter further details such as the recipients e-mail address and tap Send.
Resize handle
Move handle
Figure 11.2. The Area Selector
Step 4. Use the handles to define the area which needs to be shared:
Drag any of the Resize handles on each
Note the followiing:

Toolbars are not included in the screen-
corner to adjust the size of the area.
shot; any content obscured by a toolbar is included in the screenshot.
68
Video playback cannot be captured; the
background image (such as a placeholder image) is used instead.
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 2. Tap the Share Content button in the top Toolbar. 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. The Content Sharing window appears showing all defined sharing services. Step 4. Tap the required service. Step 5. Depending on the chosen service, proceed as follows:
Long pages cannot be captured in full.
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.
appears. Enter the account details and tap Login. When logged in, a screen appears
69
in which text can be entered. Tap Post to send the message. (Optional) Remove the inserted or attached image of the page.
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
hyperlink inserted. Enter further details such as the recipients e-mail address and tap Send.
(Optional) Remove the inserted or attached image of the page.
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.
70
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):
Back to issue button. For returning to the
issue which is currently open. type.
Store filter. For filtering the Library by content 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.
Figure 12a. The store in multiple-issue view (left) and in single-issue view (right)
71
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 multipleissue 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
E F G H I
(see section 12.4 Downloading an Issue) or for downloading it for free. and description of the issue. of the cover story.
Issue name and description. The name Cover story description. Short description
Subscriptions
The 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 .
A Back to issue button B Store filter C Single-issue view button D Multiple-issue view button E Preview button F Buy/Free button G Issue name and description H Cover story description I Cover preview
Figure 12b. The Store components
72
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-
12.1.1 The iTunes Subscription Service

(iPad Reader App only) The iTunes Subscription functionality of the Store consists of the following components (see figure 12.1.1 on the next page):
Subscription advert. Advert from the pub-
lisher to advertise current subscription offers. subscribe to a magazine subscription.
tion service
Subscribe buttons. For accessing a page to Account button. For accessing a page with
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.
additional options based on the users 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 login which is currently active for the iTunes store on the iPad. Therefore, no Log In or Log Out buttons are required.
Subscribing
Subscribing 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 subscription expires, it is no longer possible to download issues that were available within the subscription period.
73
Subscription advert
Subscription buttons
Account button
Figure 12.1.1. The Store view with iTunes Subscription functionality
74
Copying subscriptions between iPads
When 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
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
will be copied.
The issues that are being copied will not be
or out of an existing subscription account.
removed or affected on the source iPad in any way or form.
Subscription advert. Advert from the pub-
lisher to advertise current subscription offers.
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.) copied.
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 noniTunes Subscription; Apple does not allow this.
Subscribe button. For accessing a page to
Any settings such as Bookmarks will not be
subscribe to a magazine subscription. ing a current subscription.
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.
Existing Customer. For upgrading/extendAccount button. For accessing a page with
additional options based on the users account.
How to use the subscription components is described in the following sections.
75
C D E
A D
Subscription account login/logout button B Subscription advert Upgrade subscription button E Account button
Subscription button
Figure 12.1.2. The Store view with non-iTunes Subscription functionality
76
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.
(Optional) Tap Privacy to access a page
with information about how the users data is gathered, used, and managed. access a page with information about the license agreement for the subscription.
(Optional) Tap License agreement to
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. 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.)
The user is forward to the Library, display-
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. password.
In the Password box, enter the (Optional) Select the Remember Me
check box to automatically have the user logged-in when the Reader App is launched.
77
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. Step 2. Follow the steps on the page. Once the subscription account is active, the user can sign in to the account to access the available issues for that subscription. (See section 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. Step 2. Follow the steps on the page.
78
12.2 Navigating the Store

Navigating the Store is done by doing one of the following:
When in multiple-issue view: navigating
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.
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.
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 tapping the Close button for that issue.
79
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
Following the Download Progress
During the download of the issue, the progress is displayed 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. 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 progressively downloaded in the background.
Progressive downloads: Initially, only the
Each is explained in more detail in the following sections. The progressive download method fully replaces the nonprogressive 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.
downloaded while a download is in progress. Any additional downloads are added to the Library; starting these downloads needs to be done manually. cannot be downloaded while a download is in progress.
Android Reader Apps: other issues
80
Automatically opening a magazine after downloading
(iPad Reader App only) The Reader App can be configured in such a way that an issue or Segment is opened automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads).
Users with a 3G connection can disable background downloading by means of the following setting on the Settings screen on the iPad:
3G Download Options/Continue After
Closing App
Background Downloading
Android Reader App The following behavior exists:

When the app is moved to the back-
When the Reader App is suspended while a download is in progress, the following occurs: iPad Reader App The download is continued. However, Apple applies the following restrictions:
The time is finite. When the app is closed,
ground: the download continues. stops.
When the app is killed: the download When app is relaunched: the down-
a maximum of 10 minutes is left in which the app is still allowed to execute code.
load can be resumed.
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.
81
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. Installing. Once the issue has been fully downloaded, it is unpacked and installed.
Downloading. When the download is in progress, the download percentage and status is displayed.
Installation stopped. When the installation has failed or has been interrupted. Tapping the Install button will restart the installation process.
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 button will resume from where it was left off. Download stopped. (iPad only) Shown when the download process failed or has been interrupted. Tapping the Download Resume button will resume from where it was left off.
82
12.4.2 Progressive Downloads

The behavior of the progressive download process is as follows:
Download is started: an initial package is
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.)
downloaded, consisting of the magazine.xml file, the cover and all thumbnails. magazine, stories will be downloaded in order of appearance (first story first, last story last).
When user does not interact with the
When the user accesses a story (in any
Download not started. The download has not yet started.
possible method, for instance by tapping a preview 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 cancelled, but each will finish first before the next is started. In the extremely rare situation 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
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. Dow nload s t a r ted, content available. When the download has started, the download button 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 button changes into a Resume button. Tapping the button will resume from where it was left off.
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.
83
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.)
84
Page view download progress
Downloaded story
Story download in progress
Story download not started yet
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.
85
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
13.1 iPad Reader App Library

The Library on the iPad Reader App consists of the following pages (see figures on the next pages):
Library Overview page. Shows all available
issues. This page is accessed by tapping one of the following buttons:
Store.
The Library button in the Navigation bar The Back To Overview button in the
(Reader Apps with subscription functionality
only) Issues that are available as part of the subscription, including those which have not been downloaded yet. 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).
Segments Overview page
Segments Overview page. Shows the issue
All Segments for an Issue which have
in the top section of the page and all its available Segments in the bottom section of the page. This page is accessed by tapping an issue containing Segments (recognizable by its icon).
Slight differences exist between the Libraries of the various Reader Apps, as explained in the following sections.
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.
86
The following components are available (see examples on the following pages):
Segments Overview page
Back to Overview button. For returning to
Library Overview page
the Library Overview page.
issue which is currently open. tent type.
issue which is currently open. Segment.
Library filter. For filtering the Library by conEdit/Done button. For quickly deleting an
Segment filter. For filtering the Library by Edit/Done button. For quickly deleting a
issue. Once tapped, it changes into the Done button for exiting the edit mode. 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 noniTunes subscription. and description of the issue.
Segment. Once tapped, it changes into the Done button for exiting the edit mode.
Sign In/Sign Out button. (Reader Apps with
Download Issue button. For downloading
the issueincluding all Segments when availablein one action. ing an individual Segment.
Segment Download button. For downloadName and description. The name and
Issue name and description. The name Cover thumbnail. A thumbnail of the cover. Download button. For downloading the
description of the issue or Segment.
issue. In case the issue contains Segments, all Segments will also be downloaded. description of the issue or Segment.
Name and description. The name and
87
A B C D E
Back to issue button Issue with Segments Downloaded issue without Segments Library filter Edit button
Figure 13.1b. The assets of the Library Overview page on the iPad
88
A B C D E F G H
Back to Overview button Back to Issue button Download Issue button Segment Filter Edit button Issue cover Downloaded Segment Not yet downloaded Segment
Figure 13.1c. The assets of the Library Segments Overview page on the iPad
89
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 D E
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. and description of the issue. of the cover or Segment.
Issue name and description. The name Cover or Segment thumbnail. A thumbnail Download button. For downloading the
issue or Segment. (Segments can only be downloaded individually.) description of the issue or Segment.
Name and description. The name and

A B C D E
Library filter Segment filter Sign In/Sign Out button Issue Segment (not yet downloaded) Downloaded issue Segment
Figure 13.2. The Library on the Android Reader App
90
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 language). 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.
A
Filter button
Filter list
Figure 13.4. The Library filter allows a user to filter the Library by content type (shown here on the Android Honeycomb)
The filter is used by performing the following steps: Step 1. 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.)
91
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 content 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.
92
13.5 Using the Segment Filter

A magazine can be made available as a single download 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. made from the Library Filter first, only those Segments that have been defined for the issue which is chosen appear in the list.
Android Reader App: When a choice is

A
Segment Filter button
Filter 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 content 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
93
13.6 Downloading Issues and Segments

Downloading issues and Segments from the Library is done as follows:
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-
iPad Reader App
Download 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.
load was started manually) Automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads).
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. of the following:
On the Segments Overview page, do one Tap the Issue Download button. The
issue including all its Segments will be downloaded. vidual Segment; only that Segment will be downloaded
Tap the Download button for an indi-
Android and HTML5 Reader App
Tap the Download button from either the
Library or the Preview screen. Segments can only be downloaded one-by-one.
94
13.8 Deleting an Issue or Segment

An issue or Segment is deleted from the Library by performing the following steps: Step 1. Use one of the following methods:
Tap and hold the issue or a Segment of
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.
the issue which needs to be deleted ton in the Status bar of the Library.
(iPad Reader App only) Tap the Edit but-
Cancelling the process
To cancel the process without deleting the issue, do the following:
The following will take place:

iPad: A Remove button (
iPad Reader App
) will appear in the top left-hand corner of the cover. Delete command.
Do one of the following:

Tap the Done button in the Status bar of the
Android: A context menu appears with a
Library
Navigate to a different area of the Reader App,
Step 2. Do one of the following:

iPad: Tap the Remove button Android: Tap the Delete command
such as an open issue or the Store
Android
Tap the Back button
The following will happen (where applicable):

Bookmarks: any created Bookmarks for
the issue will be removed.
For issues: when the issue does not
consist of Segments, it is removed from the Library.1 Segment of the issue is still available, all Segments continue to be displayed in the
For Segments: as long as at least one
If the issue or Segment is part of a subscription and the user is logged in to the subscription account, the downloaded issue is removed from the app but remains available for downloading in the Library.
1
95
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 publishers 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 external 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
96
16. Reader App Updates

New Reader App features are made available to publishers 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 minimum 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.
17. Using the HTML5 Reader on a PC

The HTML5 Reader App is specifically designed for viewing on a desktop PC/laptop using a suitable Web browser. Since these are devices without a touch screen, interaction 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 components 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.) or stories can be done by dragging the page up, down, left, or right by using the mouse. navigational tools is done as follows:
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. from where the new version can be downloaded free of charge. After downloading, both old and new magazine issues can be downloaded and read.
Mouse dragging. Navigating between pages
Tap OK. You are transferred to the App Store
Closing navigational tools. Closing the Story Viewer / Page Viewer: click the
Close button in the top right-hand corner top Toolbar
TOC List: click the TOC List icon in the Locking the Navigation bar/top Toolbar.
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.
97
A B
D E
F C
A E
Top Toolbar B Navigate to Previous Page/Story area C Navigation bar Navigate to Next Page/Story Area F Navigate to Next Page Area
Navigate to Previous Page Area
Figure 17. When hovering the mouse pointer over the Navigation Zones, controls appear
98
05 Creating Content
One of the main advantages of the WoodWings Digital Magazine Tools is the ability to create content 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 multimedia content and interactive components:
Audio panel. Used for assigning an audio file Dossier Link panel. Used for creating a link Hotspot panel. Used for creating a Hotspot Scrollable Area panel. Used for creating an
to a frame on a page.
to a story in the magazine. on a page.
area on the page of which the content exceeds the frames 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.
Chapter 05 Creating Content
The DM Artboard functionality allows you to assign content for use on different devices (using differently sized screens). In this chapter, you will learn how to use the tools for creating dynamic content and you will learn about the exact specifications required for creating a digital magazine. 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 components of a magazine:
Story Dossiers Pages Text View Slide shows Video Audio files Web Elements Dossier Links Hotspots Widgets Scrollable Areas Custom Objects Help page Shared Content
A note about ofip
The ofip format is an initiative of WoodWing Software aimed at developing a standardized data format for interactive publications, such as digital magazines, newspapers, 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 platforms, 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.
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-
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.
tation, the system expects the Dossier always to have one layout in landscape orientation 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 magazine Publication Channel). 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 orientation, but these may not be assigned to the digital magazine Publication Channel) 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. that video or the images that are part of the Slide Show also need to be stored in the Dossier.
For viewing the magazine in portrait orienta-
When the Text View is used for displaying a
If a layout contains a video or a Slide Show,
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
preview in the Reader, ellipses are shown for the part which cannot be displayed.
the Dossier application in Content Station
Create a Dossier based on files avail-
able in the system using Content Station or Smart Connection for InDesign
A B
Create a Dossier when checking in a
layout using Smart Connection for InDesign
For more information about these methods, 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):

C D E
A D
Preview B Description Story title E Intent
Section title
Preview: Used for indicating that a Dossier contains content for use in the issue preview functionality in a Store. This content is extracted from the ofip file by a delivery system, allowing the user to preview a complete dynamic story as opposed to a single-page static image.
Figure 2. The Dossier dialog box in Content Station showing the various Digital Magazine properties Section title. The section name as
displayed in the Section Viewer of the Navigation bar on the reader device. following areas:
Description. A description of what the
Story title. The story title as used in the Displayed in the following locations
story is about as displayed in the following locations of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark. Keep both the Description short; if it exceeds the width of the page
of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark. a Facebook post.
Used as the text for the shared link in
Used as the e-mail subject when shar-
ing a link by e-mail.
3. Creating a Page
When creating a page, the following considerations should be made:
Is a styled page in portrait orientation
Keep both the Story title short; if it exceeds the width of the page preview in the Reader, ellipses are shown for the part which cannot be displayed.
Intent. Choose the intent with which the
required? If so, do one of the following: cated layout
Dossier is to be used:
InDesign CS4 users: create a dediInDesign CS5 users: create a dedicated
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.) 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.)
1
layout or a styled article (to be displayed in Text View mode)
Should the user be able to scale the text when
Help. Links the Dossier contain-
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. 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.
Will the content be displayed in separate
InDesign CS5 users can apply formatting and styling (including the use of tables) to the article
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 content. 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 size
Of 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 boundaries of a layout.
10
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.
11
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.
12
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 regularly used units of measurement (based on 132 dpi/ppi). Table 3.2. Bar size in pixels converted to various units of measurement Size Picas 48 pixels 49 pixels 50 pixels 62 pixels 2p2.182 2p2.727 2p3.273 2p9.818 Value (based on 132 dpi/ppi) Points 26.182 pt 26.727 pt 27.273 pt 33.818 pt Inches 0.3636 in 0.3712 in 0.3788 in 0.4697 in Millimeters 9.236 mm 9.429 mm 9.621 mm 11.93 mm Centimeters 0.9236 cm 0.9429 cm 0.9621 cm 1.193 cm
13
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
Step 7. Add the layout to a Dossier by doing one of the following:

Automatically add the layout to a Dossier
display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in landscape orientation1.
by choosing an existing Dossier from the Dossier list in the Check In dialog box.
Choose New Dossier from the Dossier
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.
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.
1
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.) out has been created.
Add the layout to a Dossier after the lay-
14
3.4 Portrait Orientation

Creating a layout with one or more pages in portrait orientation is done under the following circumstances:
When the Reader App has been configured to
Step 2. 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
display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in portrait orientation 1. 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
by choosing an existing Dossier from the Dossier list in the Check In dialog box.
When using InDesign CS4 and the pages in
Choose New Dossier from the Dossier
list in the Check In dialog box to create a new Dossier. (Make sure that the required Dossier properties are correctly set as explained in section 2. Creating a Dossier.) out has been created.
To create a layout in portrait orientation, perform the following steps: Step 1. In the New Document dialog box, enter the following values:
Enter a width which exactly matches the
Add the layout to a Dossier after the lay-
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 various dimensions.
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
1
15
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 simply 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, different 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 companys setup) Once the article is created, check that no article components containing an image exist in the article by verifying the articles 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.
16
Step 3. For each article component, assign an appropriate Element label (such as body, caption, 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 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.
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.
17
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 application in Content Station. You can therefore safely ignore setting the page numbering for each layout.
18
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
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) through the Editions panel
The content needs to be assigned to a device
defined in the configserver.php file.
Each is explained in the following sections. For more information about DM Artboards, see section 3.1 Page Sizes.
It has a 60pt stroke applied to the outside
of the frame, with a stroke color of 32% black (C0 Y0 M0 K32). is placed above all other layers.
It is part of a DM Artboard layer, which itself 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. defined by the DM Artboard frame.
Boundary. The outer edges of the artboard, Non-inclusion area. The area which is not
included in the export, defined by the area outside the DM Artboard frame. (This is indicated by a 60pt gray stroke, but note that this area extends beyond the stroke.)
19
A B B
Artboard
Boundary
Non-inclusion area
Safe area
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-inclusion 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).
20
4.1 Creating a DM Artboard

To create a DM Artboard, perform the following steps: Step 1. Do one of the following:
Create a new layout and save it to the
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.
Issue that it needs to be part of. Make sure to assign all available DM Artboard Editions to the layout. that all available DM Artboard Editions are assigned to it (for instance by performing a Save Version action).
Open an existing layout and make sure
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. an Edition in the Editions panel. Each created artboard is assigned to its respective Edition. The content assigned to the Edition listed first in the Editions panel is made visible. panel.
Each defined device is represented by
A new top layer is created in the Layers
21
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
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 dimensions 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.
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.
Unlocking the DM Artboard
To 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 position
To 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. Step 2. Do one of the following:
Move the DM Artboard to its required
position.
Resize the DM Artboard while maintain-
ing its aspect ratio.
Shift.
The best way of doing this is by dragging a corner while holding down
22
When the aspect ratio does not correspond 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 nonmatching 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.
4.4 Assigning Content to a Device

The DM Artboard feature makes use of the Edition functionality for assigning content for inclusion in the export to a particular device. The DM Artboard itself is also part of the devices Edition, in order to mark the boundaries of that device. Using the Edition functionality offers the following advantages:
Single layout. Instead of creating separate
Changing the look of the DM Artboard
layouts in dedicated sizes, only one layout needs to be created. This speeds up the process of making (small) adjustments to (shared) content, since this content is readily available. 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.
To change the look of the DM Artboard, apply a different stroke or fill color.
Shared content. Content which is identical
Locking the DM Artboard
After completing modifying the DM Artboard, lock it by setting the lock for the DM Artboard layer in the Layers panel.
Assigning content to a DM Artboard Edition is no different to assigning content to any other Edition: assign content that can be included in the export to multiple artboards to those multiple Editions; 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.
23
4.5 Points to Note

When working with DM Artboards, note the following:
Since the DM Artboard is part of a non-print-
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 dont concern yourself with outputting to multiple devices. In such a scenario, simply create a layout based on the dimensions for that device1 and dont 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.
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. ible artboards are not included unless the export option Include Non-Printing Objects is selected.
When exporting a layout to PDF, any vis-
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.
For information about exact dimensions, see appendix B, Page Sizes.

1
24
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 publication. 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
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
to a frame on a page.
Dossier Link panel. Used for creating a link
to a story in the magazine. on a page.
rules.
Hotspot panel. Used for creating a Hotspot Scrollable Area panel. Used for creating an
area on the page of which the content exceeds the frames width or height. To scroll through the content, the user can scroll either horizontally or vertically.
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.
Slide Show panel. Used for adding a Slide
Frame icons
Show to a page.
Video panel. Used for assigning a video to a
Any frame containing content created using the Digital Magazine Tools can be recognized by an icon at the top of the frame. These icons are only visible when the layout is displayed in Normal screen mode. Table 5c on the following pages shows the icons used for each type of Digital Magazine content.
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).
25
Table 5a. Limitations of dynamic objects on a page Created inside a: Slide Show Slide Show Video Audio File Dossier Link Web Element Hotspot Widget Scrollable Area Custom Object Audio File Dossier Link Web Element Scrollable Area Custom Object Number of placements on layout Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited
Video
Hotspot
Widget
To read this table, look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done.
26
Table 5b. Placement options between Hotspots and Scrollable Areas Hotspot on a Hotspot Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot
Hotspot Hotspot Hotspot on a Hotspot Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot
To read this table, 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 icons Icon Content Type Audio Video Dossier Link Hotspot Icon Content Type Slide Show Web Element Scrollable Area Widget
27
Reader App Hotzones
The 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 information, see the Customization chapters.) Its functionality will affect the way the designer has to position interactive contentsuch as Hotspotson 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 (template) to indicate the location of the Hotzones.
Figure 5. iPad Hotzones (shaded in red) can be tapped to navigate the magazine; they overrule any underlying functionality
Table 5c. Hotzone width or height Zone Picas Left/right Top/Bottom 44 pixels 80 pixels 2p0 3p7.636 Points 24 pt 43.636 pt Value (based on 132 dpi/ppi) Inches 0.3333 in 0.6061 in Millimeters 8.476 mm 15.394 mm Centimeters 0.8476 cm 1.5394 cm
28
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 dimensions 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 functionality; 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.) Dossier in which the layout containing the Slide Show is stored, else the functionality of the Slide Show panel will not be available. Slide Show is based may not be located on a Master page.
The images should be part of the same
The selected image frame on which the
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.
29
A default transition (swipe) is automatically added during export; setting a custom transition is not possible.
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. 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.
Remove an image by dragging it from
Step 6. Reorder the images in the top half of the panel by dragging them to the required position.
30
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
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. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page. This frame may not be an inline or anchored frame. Video can also be included in a Hotspot or Scrollable area. 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.) This check box cannot be selected under the following circumstances:
which is located on the Internet. (This reduces the total file size of the Reader App, but an internet 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 immediately 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.
31
The frame is already assigned to a video
as a file. Clear the Enable Video check box.
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.
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_video
HTML5: http://en.wikipedia.org/wiki/
32
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 following resources:
Apple iPad: http://www.apple.com/
Video can also be included in a Hotspot or Scrollable area. 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.
ipad/specs/
guide/appendix/media-formats.html 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 Magazine submenu of the Window menu. Step 4. Select the frame or group of frames on the layout that should contain the video. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page. This frame may not be an inline or anchored frame.
33
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
This check box cannot be selected under the following circumstances:
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.
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.
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 bottom 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 dragging 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.
34
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.3 Adding an Audio File

An audio file can be assigned to any frame on the layout 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:
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 subsequently tapping the play button, the video will be played fullscreen once more.
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 internet 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.
35
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 Magazine submenu of the Window menu. Step 3. Select the frame or group of frames on the layout that should contain the audio file. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page. Step 4. In the Audio panel, select the check box Enable Audio. (See figure 5.3.1 below.) This check box cannot be selected under the following circumstances:
Figure 5.3.1. Assigning an audio file to a frame is done by using the Audio panel
Step 6. In the Location section, enter the URL to the audio file in the URL box. For supported audio formats see the following resources:
ipad/specs/
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.
guide/appendix/media-formats.html HTML5_audio
Step 5. In the Source section, choose Internet.
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.
36
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 following resources:
ipad/specs/
guide/appendix/media-formats.html 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 Magazine submenu of the Window menu. Step 4. Select the frame or group of frames on the layout that should contain the audio file. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page.
37
This frame may not be an inline or anchored frame. Step 5. In the Audio panel, select the check box Enable Audio.
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.
Figure 5.3.2. Assigning an audio file to a frame is done by using the Audio panel

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

38
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. This frame may not be located on a Master page. This frame may not be an inline or anchored frame. A Web Element can also be included in a Hotspot or Scrollable area.
39
When the external content is to be displayed 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.
As a Pop-up (in the Reader App).
When the user taps the frame, the content 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.
Figure 5.4. The Web Element enabled and a URL entered in the Web Element panel
This check box can only be selected when the selected frame is not yet set to contain a Slide Show or video, 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.)
40
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.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
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.
41
5.5 Creating a Dossier Link

Dossier Links can be created in two ways:
On a layout In a Web Element
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 creating 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. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame or group of frames may not be located on a Master page. This frame may not be an inline or anchored frame. A Dossier Link can also be included in a Hotspot or Scrollable area.
Each is described in the following sections.
42
Step 4. In the Dossier Link panel, select the check box Enable Dossier Link. (See figure 5.4 below.) This check box can only be selected when the selected frame is not yet set to contain 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.
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 embedded 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>
Figure 5.5.1. The Dossier Link panel allows you to create a link to a Dossier
Step 3b. Replace [itemid] by the ID of the story to link to. Step 3c. Replace [index] by the page number 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>
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 enteredor a page number which does not existthe link is set to the first page of the story.
43
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 popup window or menu structure), and any other scenario in which additional information needs to be displayed.
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. played after the Hotspot is tapped.
Hotspot content: the content which is disHotspot Content layer: the layer assigned
to the Hotspot; it contains the content for that Hotspot (the content which appears after tapping the Hotspot). assigned to a Hotspot and therefore does not hold any Hotspot content.
Unassigned layer: a layer which is not
Base layer: a layer which itself is not assigned
to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the bottom-most layer (but displayed as the top-most layer in the Hotspot panel). 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.
Selected Hotspot: a page element on the
Figure 5.6. When tapping on one of the red Hotspots, a pop-up appears showing additional information about the tapped area
Hotspot Close button: a page element
A Hotspot can also be made to automatically display its content as soon as the page is loaded. 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.
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
44
Background layer; its Hotspot Content items are placed on the Scheveningen layer. In this scenario, the layers can be matched to the Hotspoton-Hotspot terms as follows:
Base layer: the Background layer. Hotspot Content layer: the Scheveningen
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 disappears 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
layer
(only if there is no Hotspot Close button)
Tapping the Hotspot Close button Tapping the Selected Hotspot (only if
there is no Hotspot Close button)
When the Hotspot Content disappears, the Hotspot itself appears again.
Figure 5.6.1. The Hotspot panel displays the hierarchy of the created Hotspot (see the text for a detailed explanation of this structure)
45
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
46
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).
47
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 different process. For more information, see section 5.7 Hotspots on Hotspots.) Take note of the following:
The created frames may not be located
Step 3. Make sure that the Hotspot panel is displayed. The Hotspot panel can be shown or hidden by choosing Hotspot from the Digital Magazine submenu of the Window menu. 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. This check box can only be selected when the selected frame is not yet set to contain 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
on a Master page. anchored frames.
The created frame(s) may not be inline or 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 underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones).
Automatically check box.
Only one Hotspot Content can be set to automatically appear for each
48
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.
49
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
Step 11. In the Hotspot panel, click Edit Layer. The following actions take place:
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)
cannot be assigned as a Hotspot Content layer, because they act as a Scrollable Area layer or a DM Artboard layer.
Step 12. Create the content which should be displayed when a user taps a Hotspot. Make sure to not accidentally select a different layer in the Layers panel, else you might see unexpected results when the Hotspot is tapped.
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.
50
Figure 5.6.4a. The starting point for creating a basic Hotspot: a layout which is going to display information about certain locations. It has one background layer on which the Hotspots (represented by the red layout items) are also placed. Shown to the right are the Hotspot panel and InDesigns Layers panel.
51
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.
52
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.
53
Chapter 05 Creating Content Chapter 05 Creating Content
Hotspot Hotspot
Hotspot Content Hotspot Content
A Starting point on the tablet: the page con Starting point on the tablet: the taining a single Hotspot is shown (here the red taining a single Hotspot is shown item on the page) item on the page)
B Hotspot is tapped, the Hotspot When the Hotspot is tapped, the Hotspot Content appears (here in When Content appears (here in the form of a popthe form of a pop-up window). up window).
Hotspot Content Hotspot Content

Hotspot Hotspot The Hotspot Content (here in the form of Content (here in the form of a pop-up window) is placed on a separate window) is placed on a separate layer.
The Hotspot is created on a base layer
139 54
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 original 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.
55
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.
56
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 functionality 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, 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. In case the Hotspot Close button functionality 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 InDesigns 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.
57
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.
58
Hotspot
Selected Hotspot
Hotspot Content
Hotspot Close button Starting point on the tablet: the page containing a single Hotspot is shown (here the red item on the page)
A B When the Hotspot is tapped, 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 bottom right-hand corner of the page
Selected Hotspot Hotspot Content
Hotspot
Hotspot Close button The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer. The Hotspot is created on a base layer
145 59
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. played after the Hotspot is tapped.
Hotspot content: the content which is disHotspot 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). assigned to a Hotspot and therefore does not hold any Hotspot content.
Unassigned layer: a layer which is not
Base layer: a layer which itself is not assigned
to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the top-most 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. which holds the content for the Hotspot placed on the Level-1 Hotspot Content layer.
Level-1 Hotspot Content layer: the layer
Level-2 Hotspot Content layer: the layer
Selected Hotspot: a page element on the
Hotspot Content layer which will appear in place of the Hotspot which is tapped. 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
60
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 Hotspoton-Hotspot terms as follows:
Base layer: the Background layer. Level-1 Hotspot Content layer: the
Scheveningen layer
Level-2 Hotspot Content layer: the
Scheveningen Beach and Scheveningen Harbour layers
Figure 5.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)
Restrictions
A 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.
61
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, create a new layout item which is to serve as the new Hotspot. Following the definitions of the Hotspot-onHotspot 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 having to top on the Hotspot to make the content appear), do the following:
In the Hotspot panel, select the Show
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 6b. In the Layer Name box, enter a descriptive name for the layer. Step 6c. Do one of the following:
Press Enter. Click OK.

A new layer is created in the Layers
panel.
Automatically check box.
The created layer is displayed in the
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.
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. Step 6e. Continue with Step 8 or 9.
62
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. The option is not available when:
Only one layer exists The layer acts as a Level-2 Hotspot
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 following actions take place:
The Hotspot Content layer corresponding
to the selected Hotspot is made active.
The content of all existing 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
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 different layer in the Layers panel active, this will result in the content ending up in the wrong location within the hierarchy and will give unexpected results when the Hotspot is tapped on the device. Step 11. Repeat steps 8 10 for any additionally created Hotspots.
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.
63
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.
64
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.
65
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.
66
Selected Hotspot
Hotspot Content
Hotspot on Hotspot Content
Hotspot on Hotspot
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 sidebar, an additional Hotspot has been placed.
A
B After tapping the Hotspot on a Hotspot, the Hotspot Content for that Hotspot appears.
The Hotspot on a Hotspot Content is placed on a separate layer, referred to as the Content Level-2 Hotspot layer. layer. The Hotspot on a Hotspot item is placed on the Level-1 Hotspot Content layer layer 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 Content layer. Hotspot layer.
67 153
Hotspot The Hotspot is created on a Base layer
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 Hotspoton-Hotspot, select the check box Close All. In case the Hotspot Close button functionality should be removed from the page item(s), select the item and choose None in the Hotspot panel.
68
5.7.5 Managing Hotspots using the Layers Panel

The functionality of the Hotspot panel is close related to that of InDesigns Layers panel. Using the Layers panel, Hotspots can be managed in the following ways:
Renaming layers. Layers created using the
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:
Hotspot panel can only be renamed by using the Layers panel.
Enable Hotspot
Used for assigning a layout item as a Hotspot.
Moving layout items between layers.
Create New Layer
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.
Used for creating a dedicated layer on which the Hotspot Content is placed.
Use Existing Layer
Used 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 list
The 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 All Expand All Edit Layer
Collapses all expanded items in the Layers list. Expands all collapsed items in the Layers list. Used for efficiently working on new content on a particular 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:
69
The Hotspot Content layer corresponding to
the selected Hotspot is made active.
Close All
The content of all existing Hotspot Content
layers apart from the current Hotspot Content layer is hidden.
(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.
When using this feature for a Hotspot on a
Editing layer names
Hotspot, the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed.
Compared 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.
Enable Selected Hotspot
Used for creating a layout item which acts as a replacement 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 properties. This will have the effect of the item changing its visual appearance, similar to selecting the tapped item.
Enable Close button
Used for creating a dedicated button to close the Hotspot with.
None
Used 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 Automatically
Select this checkbox when the Hotspot Content needs to be displayed as soon as the page on which the Hotspot is located is loaded. 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.
70
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 Magazine submenu of the Window menu. Step 3. Select or create a frame on the layout that should contain the Widget. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). The selected frame may not be located on a Master page. Step 4. In the Widget panel, select the check box Enable Widget.
Figure 5.7. After choosing an available Widget from the list in the Widget panel, the Widget can be configured through specific settings

Another frame is already set to act as a
Widget. Clear the Enable Widget check box for that frame. 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.
71
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 frames width or height. To scroll through the content, the user can scroll either horizontally or vertically.
Components
A scrollable area consists of the following components:

The Scrollable Area frame. The frame on The scrollable content. The content which Scrollable Area Content layer. The layer
the page which holds the scrollable content. the user can scroll through.
containing the layout items for the Scrollable Area content.
Layers
The 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 content
In 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.
72
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. This frame may not be an inline or anchored frame. It is possible to have multiple Scrollable Areas in a layout. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). 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. This check box cannot be selected under the following circumstances:
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. Clic k C r e a t e N ew L aye r (selected by default). Step 7b. In the Layer Name box, enter a descriptive name for the layer. 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.
73
Step 7e. Continue with Step 8 or 9.
Scrollable content on an existing layer
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 different layer in the Layers panel, else you might see unexpected results.
(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. The option is not available when:
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 following actions take place:
The Scrollable Area Content layer is The content of all existing Scrollable
made active
Area Content layers apart from the current Scrollable Area Content layer is hidden (this makes the process of working on the content of the current Scrollable Area Content layer more convenient)
74
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 subsequently 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 graphics 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 automatically appear.
75
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 magazines 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.
76
6. Summary
In this chapter you have learned all about creating content 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 prepare and export created content using Content Station.
77
06 Exporting Content
The process of preparing files for export and that of subsequently exporting the content of the magazine takes place in Content Station. Using the Dossier functionality together with the Digital Magazine application, the following tasks can be performed:
Defining which files should be included in the
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
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.
been assigned to the magazine issue, and in which order they appear story
It provides quick access to the Dossier of a It contains tools for exporting the magazine
For an overview of the main interface of the Digital Magazine app, 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. tion on the Home page and choose Open in New Window to open the application in a new window.
Right-click the Digital Magazine applica-
80
Chapter 06 Exporting Content
The Digital Magazine page consists of the following components:

Search pane. For choosing the Brand/Issue
Page preview panes. Shows all layouts and
their pages for the story selected in the Story pane. ing the magazine.
combination of which content should be displayed in the Story pane. which content should be displayed in the Story pane.
Export toolbar. Contains buttons for export-
Device toolbar. For choosing the device of
The usage of each pane is explained in more detail on the following pages.
Story pane. Shows all Stories that have been
assigned to the Brand/Issue combination as set in the Search pane.

D
A B
A F
Search pane B Device toolbar C Story pane Page preview pane (portrait pages)
Export toolbar
Page preview pane (landscape pages)
Figure 1. The components of the Digital Magazine application in Content Station 81
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 following actions take place:
The buttons of the Device Toolbar appear.
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, multiple 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 stories for each device in separate steps.
(See section 1.2 The Device Toolbar.)
All stories that have been assigned to the
chosen Brand/Issue combination appear in the Story pane.
82
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 additional information:
Preview. One of several types of previews
Order number. (Assigned automati-
cally) Indicates the position of the story in the magazine.
Title. The Dossier name. A
B C
A B C D
can appear:
A preview of the first page of the
first layout in the Dossier. The first layout in landscape orientation is used, when available. (in the form of a light gray page) is shown under the following conditions:
When the Dossier does not contain
Preview of a page Order number Dossier status icon Dossier name
A default preview. An empty preview
Figure 1.3. The components of a story in the Story pane
any layouts.
When no layouts have been assigned
to the correct Publication Channel.
The area of the Story pane can be adjusted by dragging the gripper area (the dividing bar between the Story pane and the Pages Preview panes) to the left or right. (For more information about resizing the interface, see the Content Station User Guide, chapter 3, The Interface.)
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 storys Dossier appears.
Status icon. The Dossier status icon.
A story appears in the Story pane as soon as it has been assigned to the required Publication Channel for the magazine.
1
83
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 landscape 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 relevant to check and (if needed) to modify:
Magazine content Story order Dossier properties Image properties Content sharing
Each item is covered in more detail in the following sections.
84
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 storys content Removing a story
2.1.1 Adding a Story

To add a story to a Digital Magazine, perform the following 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 Storys Content. Step 2. Click the Search button in the Digital Magazine application to refresh the page.
85
2.1.2 Verifying the Storys 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 magazine. Do this by performing the following steps: Step 1. Double-click each Story in the Story pane to open the storys Dossier and verify the following:
No more than two layouts should be
That a dedicated article is present and
assigned to the magazines Publication Channel .
Any layouts in portrait orientation
should not be assigned to the magazines Publication Channel. image should be assigned to the Publication Channel and have the Intent set to Header. at the bottom of the page should be assigned to the magazines Publication Channel. (With the exception of images that are part of a Slide Show; these are automatically displayed at the bottom of the page.)
An image that is used as a header
assigned to the Publication Channel of the magazine. These will typically be the layouts in landscape and portrait orientation. correct orientations are assigned (corresponding with the way the Reader App has been configured). make sure that their related content is part of the Dossier:
Any images that should be displayed
Make sure that the correct pages in their
When making use of specific functionality,
Slide shows: all related images Embedded videos: all related videos Embedded audio: all related audio files Widgets: all related Widget files Widgets: all related Widget files The following types of content also need
Step 2. In the Story pane, select each Story and check the Page Preview panes to see if pages in the expected orientation appear (depending on how the Reader App is configured: both landscape and portrait orientation, or landscape or portrait orientation only.)
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:
86
2.1.3 Removing a Story

To remove a story, perform the following steps: Step 1. De-assign the Brand/Issue combination 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 presented 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 following 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 keyboard (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
87
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 correctly set: To quickly access the Dossier of a story, doubleclick the story in the Story pane.

2.4 Image Properties Text View Mode properties

When 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
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 singlepage static image.
that it contains an image with the exact dimensions (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,
Intent. When the Dossier holds the layouts
ensure that the Intent property is set to Header.
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.)
Cover and preview properties
Story title: used for displaying the name of
the story in the Page viewer of the Readers Section Viewer. of the section to which the story belongs in the Section viewer of the Reader App.
During 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.
Section title: used for displaying the name
Description: used for displaying additional
information for the story in the Story / Page Viewer of the Reader App. 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.
88
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 properties 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.)
89
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 content 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 multiple 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.
90
The content assigned for export is verified to see if it matches the Digital Magazine settings as set on the Issue Maintenance page (see the Enterprise 7 Admin Guide). 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 content 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 magazine.xml file to include the following functionality:
Include Custom Objects. (iPad Reader
App only) For more information, see chapter 7, Customizing the iPad Reader App section 9.6 Custom Objects.
Hide embedded audio controls.
For more information, see chapter 7, Customizing the iPad Reader App 9.2.2 Embedded Audio Controls. for display in the Audio Control panel. (iPad Reader App only) For more information, see chapter 7, Customizing the iPad Reader App 9.2.3 Audio Control Pop-Up. more information, see chapter 7, customizing the Reader App section 9.19.2, Hiding Embedded Video Controls.
Hide a video after it has stopped
Add an audio title and description
playing. (iPad Reader App only) For more information, see chapter 7, Customizing the iPad Reader App section 9.19 Remove Video After Play.) 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.
Create HTML Dossier Links. (Android
Hide embedded video controls. For
Figure 3. When the export encounters incorrectly assigned content, an error is shown and steps to rectify the problem are provided
91
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
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.
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. 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 vertical 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.
Next steps
The exported files can now be included in the Reader application and made available on a delivery server so that it can be accessed from the tablet.
When using a DM Server plug-in of a ver-
92
07 Customizing the iPad Reader App

Customizing the iPad Reader App is important when you want to achieve any of the following:
Giving it a unique look and feel (reflecting
the content of the issues that will be viewed) users to use language
Enabling those features that you want your Localizing the Reader App into a particular
General App settings Navigation The Store The Library General App features
93
iPad
In this chapter you will learn all about customizing the iPad Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The following main customization areas are defined:
Chapter 07 Customizing the iPad Reader App
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
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:
DigiMagiPadv2.xbxxxBasicStandard.zip DigiMagiPadv2.xbxxxProFramework.zip DigiMagiPadv2.xbxxxSubscriptions.zip DigiMagiPadv2xbxxxAppleSubscriptions.zip
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
Step 2. Open the Xcode project, located in the [folder name]_Template folder.
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. to 1.9 require Xcode version 3.2.5; if this version is still required, have it installed in a separate folder.
_Template/Classes/
DigiMagKioskSettings.h file. (Reader App versions with Store functionality only) Settings related to connecting to the Store. For adding additional resources such as Subscription Offer pages, custom objects, etc. bundle file. Controls the Share Content functionality and contains version information. Localizable.strings file. For localizing the text as displayed in the Reader App. folder. For customizing images used for logos, backgrounds, icons, etc. DMSettings.plist file. For customizing the Reader App functionality, as well as colors and fonts.
Version 1.7 1.9 support: versions 1.7
_Template/Classes/Resources folder.
_Template/Classes/Resources/Settings.
Image editor. For editing images in .png or
.ai/.pdf format. Use your favorite editor for this task.
_Template/Classes/Resources/
_Template/Classes/Resources/images
_Template/Classes/Resources/
94
iPad
Customizing the Reader App is mostly done by making changes to the following areas of the project:
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-
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. Take note of the following:
Renaming assets is not allowed since the
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.
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.
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.
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 gestures
Gesture API for receiving and controlling Navigation API for navigating to various
components of the magazine
95
iPad
Settings. The functionality of the Reader App.
Table 3.1. Assets folder structure Folder Available assets closeButtonDefaultState.png noInternetConnectionBackground.png noInternetConnectionLabel.png images segments_shadow.png segments_stack_background.png transparentImageForFlipviewButton.png images/Bookmark Popup images/Audio Popup images/Share Popup images/TOC Popup images/Application images/Flipview images/Overlays images/Store Assets relating to the Bookmark List Assets for the Audio Control button in the top Toolbar and the Audio Control. Assets for the Content Sharing functionality. Assets relating to the TOC List General assets for the application itself. General assets for the Flipview area. Assets that overlay other objects. Assets relating to the Store. The TOC List appears when tapping the TOC button in the top toolbar. Including the app icon and splashscreens. The area that appears above the Navigation bar, showing the Story Viewer and Section Viewer. Including the Slide Show icon and Video icon. Only available in the Pro, Framework, Subscriptions and Apple Subscriptions Editions of the Reader App. Used for displaying the story as one continuous page in which the text can be made bigger or smaller. Additional information Image used as the default close button, used in various locations of the Reader App. Image shown when no internet connection is available on the iPad. The label shown when no internet connection is available on the iPad. The shadow between the top and bottom part of the Segments Overview page. The icon for an issue on the Library page, indicating that the issue contains Segments.
images/Textview images/Toolbar
Assets for the Text View mode. Assets that represent icons in the Navigation bar and top Toolbar.
96
iPad
Image used for the selected status of a thumbnail in the Flipview.
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
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
Navigation bar and top Toolbar.
Flipview colors. Colors used for the Flipview. Store colors. Colors used for the Store
Detailed information about the areas for which fonts can be modified for these features is provided in the remainder of this chapter. 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 present, remove it).
Bookmark colors. Colors used for the
Bookmarks functionality. to using Web Elements.
Web Elements colors. Color settings related 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 disappearing). Be sure to verify the result in the Reader App (for more information about previewing customizations, see section 4. Previewing Customizations).
97
iPad
(including Subscription functionality) and Library.
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 groups 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.
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.
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
98
iPad
Step 6d. Click Add.
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
3.4.1 Changing the Text

The text which appears in the Reader App originates from various sources, and can therefore be changed by different means (see figure below):
Settings. The name of the Reader App itself
appears
is controlled by a setting in the Xcode project. (For more information, see section 5.1 Reader App Name.) include icons only, but the following assets also include text:
Buttons of the Navigation bar, Store and Labels which indicate that no internet
Assets. Most assets in the Xcode project
connection is available
To change the text for these assets, modify the respective file. (For more information, see section 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, modify the content of the file as required.
99
iPad
Library
Localizable string
Dossier property
Asset with text
Server property
HTML page
External source
Figure 3.4.1. Text originates from various sources in the system
100
iPad
The error messages returned from the Content Delivery Platform have been extended. Error codes are used to better identify the area where the problem originates from. In the translations, the error codes are positioned 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
from their respective custom metadata properties. For more information about setting these values, see the Enterprise 7 Admin Guide, chapter 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.
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.
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
For more information, see section 3.4.3 Changing the Language and section 5.5 Version Numbering.
Dossier properties. Setting the properties
For more information, see appendix L, Subscription Server Support section 1.1.1. Web Pages.
External sources. Dialog boxes can hold
of a Dossier controls the following:
Section. Each section in the Section
Viewer is derived from the Section Title property. thumbnail in the Flipview is derived from the Story Title property.
specific information originating from an external 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-
Story title. The title for a story below a
Story description. The story descrip-
tion below the story title in the Flipview is derived from the Description property.
To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken
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.
101
iPad
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.
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 App
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. 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.
102
iPad
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 information
To 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.
Step 4. Modify the content of the Roots.strings file as required.
103
iPad
For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/ php/English_list.php.
3.5 Settings
Most of the customizations for the Reader App are performed 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 software 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.
104
iPad
5. General App Settings

The following general features can be modified for the Reader App:
Reader App name. The name of the Reader
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.
App as it appears on the iPad. throughout the Reader App.
Reader App assets. General assets used Intent set tings. Settings to conver t
Enterprise intent names to Reader App intent names. Reader App is suspended while a download is in progress, the download is continued.
Background downloading. When the
Background download setting. Allows
the user to enable/disable background downloading of a magazine when the Reader App is closed. about the Reader App.
Version information. Version information Upgrade information. Information about
upgrading the Reader App.
Each setting is explained in the following sections.
105
iPad
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
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
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. 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. is shown when the App is launched. springboard for the app.
Default-Portrait.png. The default splash
Default.png. The default splash screen that Icon.png. The icon that is shown on the iPad
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.
106
iPad
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
5.4 Background Download Setting

When the Reader App is closed while a magazine download is in progress, the download process is continued. 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 bundle can be replaced by any of the following bundle files:
Settings_3GDisabled.bundle. Use this
is a maximum of 10 minutes left in which the app is still allowed to execute code. execution. When resources (such as memory) are needed for a newly started app, our background downloading might be cut off early.
System resources must permit background
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. The message can be localized by modifying the following strings:
Your inactive magazine download is about to
Settings_SharingDisabled_3GDisabled.
bundle. Use this bundle if both Content Sharing and 3G Downloading are disabled. this Bundle if 3G Downloading is enabled and Content Sharing is disabled.
Settings_SharingDisabled.bundle. Use
To implement this functionality, perform the following steps: Step 1. Enable the following DMSetting:
Store/Enable 3G Downloading
be canceled.\nWould you like to continue downloading the magazine?
Continue
Step 2. (Optional, only when any of the nondefault bundles is to be used) Replace the default Settings.bundle file by doing the following: Step 2a. Remove the old Settings.bundle file from your project (also remove it from the file system).
107
iPad
For additional technical information see:
Bundle if Content Sharing is enabled and 3G Downloading is disabled.
Step 2b. In the provided template project folder, locate any of the above mentioned bundles. Step 2c. Copy this file to a different location (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 template project in Xcode. A dialog box will appear.
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
Select the check box Copy items
into destination groups folder (if needed). References for any added folders.
Click the option Create Folder
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.
108
iPad
Step 2f. Set the following settings:
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
Labels
The labels in the settings screen on the iPad are customizable 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 provided. 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.
the Reader App.
Framework version: the version number of
the WoodWing Framework.
Application version
To 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 version
The Framework version number is set by WoodWing and cannot be modified.
Step 3. Select the Root.plist file. Step 4. Expand Item 5 (Group - Version Information) and edit the available key values as required.
109
iPad
For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/ php/English_list.php.
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. 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 minimum 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 link to the App Store
When the user taps the OK button in the displayed message (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.
Setting the version numbers
The 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. Verification.
In the Reader App: see section 5.5.1 Version
Localizing the message
To 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";
110
iPad
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
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:
user swipes horizontally (from left to right or right to left) page), the user swipes vertically (up/down or down/up)
To navigate within a story (from page to
Each aspect is explained in the following sections. 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.
Page navigation. In this configuration, naviTo navigate from page to page, the user
swipes horizontally (from left to right or right to left) using one finger swipes horizontally (from left to right or right to left) using two fingers
To navigate from story to story, the user
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.
111
iPad
To enable Page navigation, set the following option in the DMSettings.plist file to Yes:
Navigation/Horizontal page navigation
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 landscape orientation a page with a corresponding orientation is shown; when rotating the device to portrait orientation a page in that orientation is shown. Designers can benefit from this feature by offering differently styled pages for each view. Furthermore, pages in portrait orientation can also be displayed in Text View (a mode in which text can be scaled by the user by increasing or decreasing the font size). 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
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
Possible values:
Landscape. For displaying only pages in
landscape orientation. orientation.
Portrait. For displaying only pages in portrait
When the setting is left empty or removed, the orientation lock is disabled and pages in both landscape and portrait orientation are shown.
112
iPad
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
6.4 Navigation Bar

The Navigation 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. Customizing the Navigation bar can be done by changing the following:
Tap area. The area which the user should tap
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-
in order to display the Navigation bar.
Visibility. Only show the Navigation bar
wardIcon.png
Items. The number of buttons and the order
in which they appear.
backSelectedIcon.png should be turned
into forwardSelectedIcon.png backIcon.png
Assets. The icons of the buttons. Colors. The color of the Navigation bar.
forwardIcon.png should be turned into forwardSelectedIcon.png should be
turned into backSelectedIcon.png
113
iPad
when the user taps the screen, or always have it visible.
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
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 display by setting the following option in the DMSettings.plist file to Yes:
Navigation/Bottom toolbar always on
file, make the following changes: toolbar to Yes
Set the option Tap bottom to show (Optional) In the Touch Areas section,
The Navigation bar now only appears when the user taps the defined area.
The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
1
114
iPad
define the height of the area in pixels by modifying the bottom area height value.
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.
6.4.3 Items
The Navigation bar can contain the following buttons:
Buy. (Pro, Framework, Subscriptions, and
The buttons are managed by means of the following option in the DMSettings.plist file:
All buttons except the Forward/Back
Apple Subscriptions Editions only) For navigating to the Store. Apple Subscriptions Editions only) For navigating to the Library.
buttons: Navigation/ToolbarItems.
Library. (Pro, Framework, Subscriptions, and
The value of each item is linked to specific functionality and should not be changed.
Forward/Back buttons: Navigation/History
Home. For navigating to the magazine cover. TOC. For navigating to the table of contents
buttons in bottom toolbar. Included in the Navigation bar by enabling the following setting: toolbar
Navigation/History buttons in bottom
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
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. user accesses the Store or Library.
These buttons are disabled when the The Navigation bar has room for dis-
Subscriptions Editions only) For bringing up an external page with subscription account details. the previous or next visited page.
Back/Forward buttons. For navigating to
An additional Fullscreen Overlay button can be added to the Navigation bar. For more information, see section 9.8 Fullscreen Overlay.
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 dont 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.)
115
iPad
When making use of this feature, take note of the following:
Changing the order
To 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.
116
iPad
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
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.) Flipview button in its selected state. (This button is normally named Contents.)
flipviewSelectedIcon.png. The icon for the
helpIcon.png. The icon for the Help button.
Help button in its selected state.
homeIcon.png. The icon for the Home but-
ton, linking to the cover of the magazine. Home button in its selected state. button.
homeSelectedIcon.png. The icon for the libraryIcon.png. The icon for the Library
button in the Navigation bar.
accountSelectedIcon.png. The icon for
the Account button in the Navigation bar in its selected state.
When tapping the Flipview button, the Story Viewer and Section viewer appear above the Navigation bar
1
A
A H
B
C
C Home icon
D
D TOC icon
E
E
F Flipview icon
F
G Feed icon
H
G
Store icon (selected) Account icon
Library icon
Help icon
Figure 6.4.4. The Navigation bar assets
117
iPad
helpSelectedIcon.png. The icon for the
librarySelectedIcon.png. The icon for the
Library button in its selected state.
6.4.5 Colors
The following Navigation bar colors can be customized:
Application toolbar. The color of the
storeIcon.png. The icon for the Store button. storeSelectedIcon.png. The icon for the
Store button in its selected state. ton in the Navigation bar.
Navigation bar.
tocIcon.png. The icon for the Contents buttocSelectedIcon.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.
118
iPad
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).
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
C D
Flipview Header
Page scrubber
Section Viewer
Figure 6.5. The Flipview appears when tapping the Contents button in the Navigation bar
119
iPad
6.5.1 Assets
The Flipview assets are stored in the root images folder and the images/Flipview folder. For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions. 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:
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. Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.
pageScrubberButton.png. The Page
pageScrubberTrackLeft.png. The image to
images folder
transparentImageForFlipviewButton.
png. Image used for the selected status of a thumbnail in the Flipview.
pageScrubberTrackRight.png. The image
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. story name. This asset needs to be 9 pixels wide and 9 pixels high. ton. This asset needs to be 21 pixels wide and 21 pixels high.
to the right 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.
flipviewBullet.png. Asset shown before the
flipviewCloseButton.png. The close but-
flipviewSectionBackground.png. The
background image for the Sections viewer. This asset needs to be 23 pixels high.
120
iPad
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.
F G
A F
Flipview background pageScrubberButton
B G
flipViewCloseButton C flipviewBullet D flipviewSectionBackground pageScrubberTrackRight H flipviewSelectedSectionButton
pageScrubberTrackLeft
Figure 6.5.1. The Flipview assets
121
iPad
6.5.2 Colors
The following Flipview colors can be customized:
Flipview background color. The color of
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
the Flipview background, shown behind the story previews. To get a transparent color, set an alpha value lower than zero. header and issue description shown at the top. text in the Section viewer.
Flipview text. The color of the Flipview Flipview section text color. The color of the Flipview section text color selected.
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
Flipview story name color. The color of the
Story title below the story preview.
Flipview story Description color. The color
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.
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.
122
iPad
The color of the text in the Section viewer in its selected state.
the story description in the Flipview.
6.5.4 Header
The Flipview Header contains the following components (see figure below):
Flipview title. For displaying the title of the
For an overview of the exact dimensions of this asset, see appendix C, Image Dimensions.
Showing or hiding the Flipview header content
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";
The Flipview Header components can be hidden by deselecting the following option in the DMSettings.plist file:
Flipview/Show flipview header
Changing the text color
The following Flipview Header colors can be customized:

Flipview text. The color of the Flipview
Issue description. For displaying issue
Fonts/Issue description font Close button. For closing the Flipview.
Changing the look of this button can be done by modifying the following asset:
A Flipview/flipViewCloseButton.png
Flipview title
Issue description
Close button
Figure 6.5.4. The Flipview Header can be used to display additional information about the magazine
123
iPad
information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server. The font can be customized by modifying the following setting in the DMSettings.plist file:
header and issue description shown at the top.
6.5.5 Thumbnail Size

The size of the thumbnails can be controlled via the following settings in the DMSettings.plist file:
Flipview/Thumbs/Minimum page thumb
6.5.7 Margins
The margins between each image and the margins between the images and the Flipview Header can be controlled by the following settings in the DMSettings.plist file:
Flipview/Margins/Pages top margin in Flipview Flipview/Margins/Flipview thumb margin
height height
Flipview/Thumbs/Maximum page thumb
To change the thumbnail size, 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 settings to make sure that the expected result is acquired.
To change the margins, enter the required size in pixels for each setting.
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 orientation 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.
124
iPad
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 properties can be done by using Content Station or Smart Connection for InDesign.
A
6.5.9 Story Bullets

A story bullet can be shown in front of each story title.
Story bullet
Figure 6.5.9. The story bullet in the Flipview
Story bullets are displayed by default and can be hidden by setting the following DMSettings to No:
Flipview/Show story bullet
A
Changing the appearance
Changing the appearance of the Story bullet can be done by modifying the following asset:
Flipview/flipviewBullet.png
B Story Title property Story title displayed in Reader
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) 125
iPad
6.5.10 Story Description

Below each story title a short description can be displayed 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 A
The text that is displayed is taken from the Description property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
B
A B
Description property Description displayed in Reader
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)
126
iPad
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.
Changing the appearance of the Page Scrubber can be done by modifying the following assets (found in the Flipview folder): For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
pageScrubberBackground.png. The
background image behind the Page Scrubber. This asset needs to be 1024 pixels wide and 37 pixels high. Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.
pageScrubberButton.png. The Page A

A
pageScrubberTrackLeft.png. The image to Figure 6.5.11. The Page Scrubber can be used to quickly scroll through the pages of the magazine
The Page Scrubber can be enabled by setting the following DMSettings to Yes:
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 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.
127
iPad
Page scrubber
6.6 Top Toolbar

Customizing the top Toolbar can be done by changing the following:
Availability. Enabling or disabling the top
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
Toolbar.
Visibility. Only show the top Toolbar bar
when the user taps the screen, or always have it visible. in order to display the top Toolbar. that appear in the top Toolbar.
Tap area. The area which the user should tap Items. The number of buttons and images Assets. The icons of the buttons and images. Colors. The color of the top Toolbar.
128
iPad
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
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:
file, make the following changes: toolbar to Yes.
Note that the top Toolbar obscures the top 48 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.
Set the option Tap bottom to show (Optional) In the Touch Areas section,
1
129
iPad
define the height of the area in pixels by modifying the bottom area height value.
6.6.4 Items
The top Toolbar can hold the following items:
TOC List. Included by default, cannot be
disabled.
Audio Control button. Included by setting
previously visited pages
the following setting to Yes:
TOC List button. For displaying the TOC List. Audio Control button. For displaying the
Navigation/Enable audio control in toolbar Bookmarks List button. Included by setting
Audio Control.
Bookmarks List button. For displaying the
Navigation/Enable bookmarks in toolbar Share Content button. Included by setting
Bookmarks List. logo.
Image icon. Typically used for displaying a Share Content button. For displaying the
Share Content list.
The logo in the center of the toolbar is added by adding an image named topToolbarLogo.png into the images/ Toolbar folder.
G
A
A D F
Back button B Forward button C TOC List button Audio control button E Bookmarks List button Image icon G Share content button
Figure 6.6.3. The components of the top Toolbar
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: toolbar
Navigation/History buttons in bottom
130
iPad
Share toolbar/Enable share toolbar
6.6.5 Assets
The following assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
Toolbar/backIcon.png. The icon for the Toolbar/backSelectedIcon.png. The icon
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. 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 topToolb a r Lo g o.p n g i nto th e To o l b a r fo l d e r automatically adds it to the top Toolbar.
Back button image. Needs to be 50 pixels high. for the Back button image in its selected state. Needs to be 50 pixels high.
topToolbarLogo.png. Image positioned in
Toolbar/forwardIcon.png. The icon for the
Toolbar/forwardSelectedIcon.png. The
icon for the Back button image in its selected state. Needs to be 50 pixels high.
Share Popup/shareTableIcon.png. The
icon for the Share Content button.
When the Reader App is enabled for rightto-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-ToLeft Support.
Toolbar/tocTableIcon.png. The icon for the
Right-to-left support
Share Popup/shareTableSelectedIcon.
png. The icon for the Share Content button in its selected state.
TOC List button.
Toolbar/tocTableSelectedIcon.png. The
icon for the TOC List button in its selected state. icon for the Audio Control button when no audio is available.
Audio Popup/audioTopBarIcon.png. The
Audio Popup/audioTopBarSelected-
Icon.png. The icon for the Audio Control button in its selected state (when audio is being played).
131
iPad
Forward button image. Needs to be 50 pixels high.
6.6.6 Colors
The following top Toolbar colors can be customized:
Application toolbar. The color of the top
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.
Toolbar.
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) bar.
Bottom area: for bringing up the Navigation Right area: for navigating to the next page (or
the previous page when the Reader App is set to Right-to-left mode)
132
iPad
Each area can be controlled by the following options in the DMSettings.plist file:
Hotzones/ Tap bottom to show toolbar.
6.8 Gestures
Navigating from one page or story to another can be done by using finger gestures. Depending on the configuration of the Reader App (see section 6.1 Story vs Page Navigation), one or two fingers can be used:
Activates the bottom Hotzone.
Hotzones/Tap sides to navigate. Activates
the Hotzones to the left and right of the screen. or width of the different Hotzones.
Horizontal navigation
Hotzones/ Touch areas. Defines the height
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 Two-finger swipe. Works only when the
Reader App has been configured for page navigation; it takes the reader to the next or previous story.
Vertical navigation
App has been configured for story navigation only: next or previous page.
133
iPad
next or previous page.
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 file
The 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 settings and styling per OS (Android, iOS, etc.
Store/HTML Store fallback URL: The URL
Possible values:
Blank: if a packaged HTML Store as part
of the Reader App build is used it is not needed to define a fallback page. file. This file is loaded when the external Web Store is not accessible.
URL: The URL pointing to a local HTML
134
iPad
pointing to a local HTML file. This file is loaded when the HTML Store is not accessible.
DigiMagKioskSettings File
Configuration settings are controlled by the following settings in the Classes/DigiMagKioskSettings.h file:
DigiMagKioskLibrary_URL. The URL to
7.2 General Store Features DMSettings

General Store settings are controlled by the following settings in the DMSettings.plist file:
Navigation/Always open in store. Allows
connect to the Kiosk Server.
This URL needs to end with: /json-rpc/.

DigiMagKioskLibrary_ProductID. The
to always have the Store opened when the Reader App is launched. user to resume a download when it has been interrupted.1 if the Reader App should start the Store in Grid view or Single Issue view.
product name as defined on the Kiosk Server. secret key as defined on the Kiosk Server.
Store/Resumable downloads. Enables the
DigiMagKioskLibrary_SecretKey. The DigiMag_ApplicationVersion. The applica-
Store/Default to gridview in store. Defines
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. future version.
Store/Enable filter. Enables a filter in the
DigiMag_MagazineCode. Reserved for a DigiMag_ProductServerManagerClass-
Store view, allowing the Reader App to filter issues as defined by the filter data on the Content Delivery Platform. downloading via a 3G network. Store Filter.
Store/Enable 3G Downloading. Enables Store/Enable Filter. Enables or disables the
Name. (Used for custom development, do not change.) Responsible for buying and displaying all issues in the Store. This class takes care of connecting to iTunes and taking care of the payments.) Name. (Used for custom development, do not change.) Takes care of delivery of all content (issues and movies).
DigiMag_ContentServerManagerClass-
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 feature disabled.
1
135
iPad
Localizable strings
The following string can be customized for the Store Filter:

All Issues. The value in the Store Filter for
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
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.
136
iPad
8.1 General Appearance

The general appearance of the Library can be customized by changing assets, colors, text, and fonts, as explained below.
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.
Assets
Part 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). For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
segments_shadow.png. The shadow
Store/storeNoInternetErrorBackground.
png. Shown when no internet connection available. The background is repeated across the whole width. 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.
Store/storeNoInternetErrorLabel.png.
between the top and bottom part of the Segments Overview page. icon for an issue on the Library page, indicating that the issue contains Segments. used for closing or deleting a component.
segments_stack_background.png. The
closeButtonDefaultState.png. The image S tor e/ h ead e rBa r S hadow.p ng. The
shadow as shown below the Library toolbar. below the issue covers.
Store/issueShadow.png. The shadow Store/libraryEmptyShelf.png. Used when
there are no further shelves to show. . in the Store Library view.
Store/libraryFirstShelf.png. The first shelf Store/libraryShelf.png. The remaining of
the shelves in the Store Library view.
137
iPad
A B C D
A E
storeHeader issueShadow
B F
headerBarShadow C closeButtonDefaultState libraryFirstShelf G libraryShelf
segmentsstackbackground
Figure 8.2a. The assets of the Library Overview page
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.
138
iPad
segmentsshadow
Figure 8.2b. The asset of the Library Segments Overview page
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.
139
iPad
Colors
The following Library colors can be customized:

Colors/Store colors/Library segment top
Fonts
background color. Background color for the top half of the Segments Overview page.
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 Library fonts can be customized:
Library issue download progress font.
Colors/Store colors/ Library segment
bottom background color. Background color for the bottom half of the Segments Overview page. color. The color of the issue name in the Library. bytes color. The color of the string that indicates the download progress in bytes. ber color. The color of the issue number in the Library. color. The color of the Library background.
The font of the download progress label in the Library. font of the download status label in the Library. Available issues: text. issue in the Library.
Colors/Store colors/ Library issue name
Library issue download status font. The Available issues text font. The font of the Library issue name font. The font of an Library downloaded bytes font. The font
Colors/Store colors/ Library downloaded
Colors/Store colors/ Library issue num-
of the downloaded bytes label in the Library. issue number in the Library.
Colors/Store colors/ Library background Colors/Store colors/ Library download
Library issue number font. The font of the
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. load status color. Color of the string that shows the status of the download.
Colors/Store colors/ Library issue down-
140
iPad
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
Downloading
When 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.
Installing
As of version 1.8, the non-progressive download process will always display the installation progress. T he following DMSet ting has therefore been discontinued:
Library/Enable install progress
Opening
To have an issue or Segment open automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads), enable the following DMSetting:
Library/Auto open magazine
141
iPad
By default, the download progress is shown in percentages. To display it in megabytes, select this option.
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.

A
Filter button
Filter list
Figure 8.3. The Library filter allows a user to filter the Library by defined keywords
142
iPad
To enable the filters in the Library, set the following DMSettings to Yes:
Library/Enable library filter Library/Enable library segment filter
Changing the text
The customizable Library Filter strings can be found in the Store section of the Localizable.strings file.
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.
143
iPad
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.
144
iPad
9.1 APIs
APIs can be used to add additional functionality to the Reader App. Currently it is possible to implement the following APIs:
Analytics API. For gathering information
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 frameworkssuch as Google Analytics or Flurrya 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.
about how a user uses the Reader App. gestures sent from the Reader App.
Gestures API. For receiving and controlling Navigation API. For creating their user
interface components with data fetching and navigational functions.
145
iPad
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.
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 components 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 convenience methods to access the data structure.
Gestures
The Gesture Manager singleton acts as the interface between the app and the external code and contains functions for managing gesture delegates. These delegates 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 particular 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 gesture 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.
Data
The Data Manager singleton holds a reference to the current 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 sections, stories and pages. An issue contains one or more stories, each holding up to two sets of pages: one with pages in landscape orientation 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.
146
iPad
For an overview of the API structure, see appendix J, Navigation API.
Navigation
The Navigation Manager singleton contains methods that enables you to navigate through the currently loaded magazine. It provides methods to navigate to pages, stories 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 current 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 protocol. 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
147
iPad
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
A
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.
audioPlayEnabledIcon
Figure 9.2.1. The audio play enabled icon
The audio assets are stored in the Overlays/Audio folder. The following assets can be customized. For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
audioPlayDisabledIcon.png. The audio
icon when a streamed audio file is not available or when no internet connection is available. shown when the audio file is not being played. icon when the audio file is being played.
Step 3. In the audio id section, add the following property: <backgroundaudio>true</backgroundaudio> Possible values: true: controls will be hidden false: controls will be shown1 Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=95> <url>images/story_23/audio_95.mp3</url> <autoplay>false</autoplay> <backgroundaudio>true</backgroundaudio> </audio> </object>
The controls are also shown when the backgroundaudio property is not included
1
audioPlayEnabledIcon.png. The audio icon audioStopEnabledIcon.png. The audio
148
iPad
Step 2. Locate the created audio object by searching for <type>audio</type>.
9.2.3 Audio Control Pop-Up

When the playback of an audio file has been started (either manually or automatically), the Audio Control feature 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
The implementation of this feature involves the following steps:

Enabling the functionality Changing the assets Localizing the text Adding the audio title and description
Audio Control pop-up.
Each step is explained in the following paragraphs.
Audio title. Title of the song being played. Audio description. Short description of the
Enabling the Functionality
Stop/Play button. Button for stopping/
Navigation/Enable audio control in
restarting the playback.
toolbar. Makes the Audio Control button available in the top toolbar. the top Toolbar.
Slider. For scrolling through the file. (Works
for embedded audio files only, not for files streamed from the Web.)
Navigation/Enable top toolbar. Enables
A B C D
F
C F
A Audio Control button B Header description E Stop/Restart button
Audio title Slider
Audio
Figure 9.2.3a. The Audio Control pop-up components
149
iPad
song being played.
The Audio Control functionality is controlled by means of the following settings in the DMSettings.plist file:
Changing the Assets
The Audio Control assets are stored in the Audio Popup folder. The following assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
audioControlBG.png. The background B
image for the Audio Control.
audioControlDisabled.png. The icon for
the button when no audio has been loaded. button in the top Toolbar.
audioControlPlay.png. The Play icon for the

A
C E
image to the right of the Control Slider button. image to the left of the Control Slider button. for the Control Slider button.
audioControlSliderBGLight.png. The audioControlSliderButton.png. The icon audioControlStop.png. The icon for the
Figure 9.2.3b. The Audio Control assets
Stop button in the Audio Control.
audioTopBarIcon.png. The icon for the
Audio Control button in the top Toolbar when no audio is available. for the Audio Control button in the top Toolbar in its selected state (when audio is being played).
audioTopBarSelectedIcon.png. The icon
150
iPad
audioControlSliderBGDark.png. The
audioTopBarSelectedIcon B AudioControlBG audioControlPlay D audioControlSliderBGLight audioControlSliderButton F audioControlSliderBGDark
Localizing the Text
The customizable Audio Control strings can be found in the Audio Control section of the Localizable.strings file.
Adding the Audio Title and Description
To add the Audio Title and Audio Description to the Audio Control, the exported magazine.xml file needs to be edited 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 following properties: <title>Audio title</title> <description>Audio description</description> Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=95> <url>images/story_23/audio_95.mp3</url> <autoplay>false</autoplay> <title>Audio title</title> <description>Audio description</description> </audio> </object>
151
iPad
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
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. the top Toolbar.
Bookmarks List can be displayed.
A Bookmark List for bookmarking stories and
for managing created Bookmarks.
Implementing of this feature involves the following steps:

Enabling the functionality Changing the assets Changing the colors Changing the fonts Localizing the text Changing the dimensions
Each step is explained in the following sections.
152
iPad
9.3.2 Changing the Assets

The Bookmark assets are stored in the Bookmark Popup folder. The following assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
bookmarkAdd.png. The icon for the Add B
Bookmark button in the Bookmark List.
bookmarkTopBarIcon.png. The icon for the
Bookmark List button in the top Toolbar.
bookmarkTopBarSelectedIcon.png. The
bookmarkTopBarSelectedIcon
bookmarkAdd
Figure 9.2.3. The Bookmark assets
153
iPad
icon for the Bookmark List button in the top Toolbar in its selected state.
9.3.3 Changing the Colors

The following Bookmark colors can be customized:
Bookmark selected row color. Color of the
9.3.4 Changing the 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 Bookmark fonts can be customized:
Bookmark cell issue title font. Font of the
selected row in the Bookmark List.
issue title. story title.
Bookmark cell story title font. Font of the Bookmark cell story description font.
Font of the story description.
154
iPad
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. the width of the Bookmark List.
Bookmark Popup/Popup width. Controls
155
iPad
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
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 system, see the Enterprise 7 Admin Guide, chapter 40 Digital Magazine Configuration section 1.6 Adding Custom Metadata.
page or the thumbnail of the page as shown in the Story Viewer / Page Viewer. a page.
Part of a page. A manually defined part of URL. A link to an external Web site, typically
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 Enabling the functionality Changing the assets Changing the colors Localizing the text
156
iPad
holding information related to the story.
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
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.
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 NSString* facebookAPIKey NSString* facebookAppSecret
= @"appID"; = @"apiKey"; = @"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.
157
iPad

The Share Content functionality is controlled by means of the following settings in the DMSettings.plist file:
Share toolbar/Enable partial page shar-

The Content Sharing assets are stored in the Share Popup folder. The following assets can be customized (see figures below): For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
shareFacebook.png. The icon for the
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.
Facebook service when it is available.
shareFacebookDisabled.png. The icon for
the Facebook service when it is not available. vice when it is available.
full. A screenshot is made of the full
thumb. A thumbnail of the page is
shareMailDisabled.png. The icon for the
shared. (These are the thumbnails as available for the Flipview.)
e-mail service when it is not available.
sharing_corner_selected.png. The corner
Share toolbar/Enable share toolbar.
handle of the Area Selector in its selected state. the Area Selector when not selected.
Enables/disables the Share Content button in the top toolbar. enabled, the Twitter service is available as an option in the Share Content list.
sharing_corner.png. The corner handle of sharing_mover_selected.png. The Move
Share toolbar/Enable twitter. When
handle of the Area Selector in its selected state. Area Selector when not selected. Content button in the top toolbar.
Share toolbar/Enable facebook. When
sharing_mover.png. The Move handle of the shareTableIcon.png. The icon for the Share shareTableSelectedIcon.png. The icon for
enabled, the Facebook service is available as an option in the Share Content list. When enabled, the email service is available as an option in the Share Content list. disables the top Toolbar.
Share toolbar/Enable email sharing.
Navigation/Enable top toolbar. Enables/
the Share Content button in the top toolbar in its selected state. service when it is available.
shareTwitter.png. The icon for the Twitter
158
iPad
screen, showing the page in its current view.
shareMail.png. The icon for the e-mail ser-
shareTwitterDisabled.png. The icon for the
Twitter service when it is not available.

The following Content Sharing colors can be customized:
Page sharing table info text color. The title
stretchablePostButton.png. The icon for
the Post button in the Twitter and Facebook window.

A
of the info page (the screen shown when the user needs to make a choice of sending a full page or part of a page). ground of the info page title area (the screen shown when the user needs to make a choice of sending a full page or part of a page).
Page sharing table info color. The backB C D
A C
shareTableSelectedIcon B shareTwitter shareFacebook D shareMail
Figure 9.4.6a. The Content Sharing List assets A B C sharingcorner B sharingmover sharingcornerselected
A C
Figure 9.4.6b. The Screen Selector assets
159
iPad

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 Each value can be used at any location in the string, used multiple times, or left out completely. /* Email sharing text format */ "Email sharing text format" = "%1$@ - %2$@"; %1$@ = the Web address as provided by the story Hyperlink %2$@ = Story title Each value can be used at any location in the string, used multiple times, or left out completely. /* 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";
160
iPad
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. started early, preferably in the application delegate. holder for the UIViews that are returned by the API.
Device orientation notifications should be
A UIViewController should be used as a place-
161
iPad
9.5.2 Header Files

Implementing the external component can be done by using the following public header files:
DMExternalDelegate.h. (For future imple-
(UIView *)openLibrary:(id)sender backSelector:(SEL)selector; Will return a UIView containing the Library. The parameters 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)selector withIssue:(DMExternalIssue *) externalIssue; Not implemented at the time of writing.
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. all the calls necessary to access the Digital Magazine component. It contains the following functions:
DMExternal.h. This header file contains
(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 *)externalIssue 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.
162
iPad
9.5.3 Implementation
Below are a few implementation examples. We recommend 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 view if( 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];
163
iPad
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;
} Here, the ivars are cleaned up and released. This should be done each time the back selector is called (to avoid memory leaks).
Additional notes
Be sure to implement the following UIViewController delegate in the parent view, so that the appropriate auto rotation callbacks are supported. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return YES; }
164
iPad
// clean up the controller [digitalMagazineExternal release], digitalMagazineExternal = nil;
9.6 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 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 DMCustomObjectProtocol methods as listed in the table on the next page. Step 5. (Optional) Implement the DMObjectTouchDelegate methods as listed in table 3b on the next page:
Table 3c on the next page shows the members that are available from the DMCustomObjectBase. 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.
For example: <objects> <object> <type>custom</type> <x>10</x> <y>10</y> <width>200</width> <height>100</height> <customobject> <classtype>WWminimalObj</classtype> <parameters><![CDATA[TestButton]]> </parameters> </customobject> </object> </objects>
165
iPad
Step 8. 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.
Table 9.6a. DMCustomObjectProtocol methods Method (void)loadObject (void)viewLoaded (void)run (void)destroy Function Called immediately after initialization. Can be used to initialize the custom objects own members. The viewControllers view is not yet available here. Called after the viewControllers viewDidLoad method was invoked. Perform actions that depend on the controller view here. Called after all initialization and load events have occurred. Use this to do work in the custom object, such as starting timers. Called 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.
Method (BOOL)gestureWillCancelNavigation: (UIGestureRecognizer *)gesture
Function When this method returns YES, the bottom Navigation bar will not pop up when the user taps the screen. Test if this object can handle the gesture. The standard implementation is: if( CGRectContainsPoint([self.view bounds], [gesture locationInView:self.view]) ){ return YES; }else{ return NO; } Here useful things with the gesture can be performed. When this method returns YES the gesture will not be propagated to underlying objects.
(BOOL)canHandleGesture: (UIGestureRecognizer *)gesture
(void)handleGesture: (UIGestureRecognizer *)gesture (BOOL)shouldHandleGestureExclusive: (UIGestureRecognizer *)gesture
Table 9.6c. Available members from the DMCustomObjectBase Method parameters objectFrame Function String with the parameters from the XML file. Since this data can be anything it needs to be processed in the custom class. The frame of the object in the parent object view.
166
iPad
Table 9.6b. DMObjectTouchDelegate methods
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 1. Open the exported magazine.xml file in a plain-text editor. 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 <t y pe> 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 mapping 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.
167
iPad
9.7 Downloading Methods

Downloading of magazines can be offered in one of two ways:
Non-progressive Progressive
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-
Each is discussed in the following sections.
loads. Forces the Reader App to make use of the non-progressive download feature. the step of unzipping the downloaded issue. Shows the progress in megabytes.
Library/Show progress in megabytes.
Localizing the text
The customizable Downloading strings can be found in the Store section of the Localizable.strings file.
Changing colors
The 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.
168
iPad
Library/Enable install progress. Shows
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 section 9.7.1 Non-Progressive Downloading.)
Changing the colors
The following colors can be customized:

Inpage downloading label color. Color of
the Downloading label on a page.
Downloading label color. Color of the
Changing the assets
Downloading label in the Page Viewer / Story Viewer. load percentage label in the Page Viewer / Story Viewer. download percentage label on a page.
The following Progressive Download assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions. Images/Store (dimensions: 75x40 pixels): libraryDownload.png. The Start Download button.
libraryDownloadPause.png. The Pause
Percentage label color. Color of the down-
Inpage percentage label color. Color of the
Changing the fonts
The following fonts can be customized: For an explanation about how to change the color of the fonts and how to assign custom fonts, see section 3.3 Fonts.
Inpage downloading label font. The font of
Download button.
l i b r a r y Dow n loa d Ref r es h . p ng. T he
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.
the downloading label on a page.
Downloading label font. The font of the
downloading label in the Page Viewer / Story Viewer. the percentage label on a page.
Inpage percentage label font. The font of Percentage label font. The font of the per-
Button shown at the top of the page if the download failed. Tapping the button allows to re-download the issue. png. The downloadFailedReloadButton.png in its pressed state. The overlay bar on the page that shows the download progress.
169
centage label in the Page Viewer / Story Viewer.
downloadFailedReloadButtonPressed.
Changing the text
The customizable Progressive Download strings can be found in the Reader section of the Localizable.strings file.
progressiveDownloadOverlayBar.png.
iPad
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. Each step is explained in the following sections. 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 following 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.
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 fullscreenOverlayController.h file located in Classes/View files. Step 2. In the @interface section, add the code for customizing the above mentioned items.
170
iPad
Step 2. Adding the Overlay Window Files
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
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:
ApplicationHome/Library/Caches/Issues
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 button in the Navigation bar. The icon for for the Fullscreen Overlay window button in its selected state in the Navigation bar.
The text for these messages can be found in the Localizalbe.strings file in the Update section, and can be localized when needed: "Updating filesystem" = "Updating file 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.";
fullscreenOverlaySelectedIcon.png.
Step 3. Add the assets found in the sample assets folder to the following location of the project:
Resources/images/Toolbar
171
iPad
The Toolbar assets are available as PDF files which can be customized by using Illustrator. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/ Enterprise%207.0.x/Software.
Note that when users are updating an older version of their Reader App to version 2.0.5 or higher, already downloaded magazines are transferred when first starting the new Reader App. Depending on the number of magazines 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.
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
Store/Subscriptions/Library cache time
172
iPad
be set in the following DMSettings.plist option (in seconds, default setting is 24 hours):
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.
Editing the list content
The content of the list is derived from the Content Delivery Platform and is identical to that of the Store filter. For information about setting up the filter and assigning an issue to a keyword, see section 9.16 Store Filter.
Localizing the text
The customizable Library Filter strings can be found in the Store section of the Localizable.strings file.
A
Filter label
Filter option
Figure 9.10.2. The Library filter allows a user to filter the Library by defined keywords
For instance: when your publications exist in multiple languages, the use of the filter can be offered to only show those issues for a particular language.
Enabling the Library filter
The Library filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
Library/Enable library filter
173
iPad
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.
Library/Enable library segment filter
Creating or editing the list content
The content of the list is derived from the Content Delivery Platform. To create the list, do the following:
Send an e-mail to services@woodwing.com
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 Filter label Filter list
The name which should be used for the The keywords which should appear in the
WoodWing will process the request for you and will inform you when this is completed. 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.
Filter label
Filter option
Figure 9.10.3. The Library Segment filter allows a user to filter the Library by defined keywords
Enabling the Library Segment filter
For example: when a filter has been set up for distinguishing sports and finance publications, choose Sports from the available list when uploading publications relating to sports, and Finance when uploading publications relating to finance.
The Library Segment filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
Localizing the text
The customizable Library Segment Filter strings can be found in the Store section of the Localizable.strings file.
174
iPad
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.
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
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 Page

A
Close button
Figure 9.11. The Newsfeed page is displayed as an overlay on top of the magazine
The single customizable component of the Newsfeed feature is the Close button. Changing its appearance can be done by modifying its asset:
closeButtonDefaultState.png
In 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.
175
iPad
Fullscreen mode
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 autorenewable In-App Purchase subscription. Support for iOS 5s Newsstand functionality is included by default in the following projects:
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 downloaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is displayed once more. Issues can be displayed in one of two different ways:
As a magazine As a newspaper
This is controlled through a setting in the info.plist file of the Reader App project.
Having a Reader App in the Newsstand provides the following benefits for the user:
The Newsstand acts as a central location from
which a Reader App can be opened whithout having to locate it somewhere on the iPad first.
New issues can be made to download auto-
matically in the background as soon as they become available. This way the download process 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 icons
Initially, the Newsstand displays the app icon of the Reader App. Once an issue is fully downloaded, the
The icon is not changed when the download is started from the Reader App.
1
176
iPad
Notifications and download initiation
When 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 information, 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
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
top right-hand corner of the issue icon. loaded in the background.
Each is explained in detail below. The following items are part of the iOS 5 user interface and cannot be configured or customized.
The look of the Newsstand The type of icons in which the issues are
In case the Reader App is not yet running, it is The download of the new issue is started. When the download is complete, the cover of
the new issue is displayed.
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.
The 'New' badge displayed when a new issue
is available
177
iPad
Including the Reader App in the Newsstand
To have the Reader App included in the Newsstand, do the following:

In the Resources/DigiMagTemplate-Info.plist
Defining the type of icon to display
The displayed issue can be presented in one of two types of icons:

As a magazine As a newspaper
file of the Reader App project, set the following setting to Yes: Newsstand
A p p l i c ati o n p re s e nts c o nte nt i n
When the magazine type icon is used, the version used in the Task Manager also displays staples, the position of which can also be defined.
A B
Magazine type icon
Newspaper type icon
Staples
Figure 9.11.1. The different types of icons in which issues can be displayed in the Newsstand
To define the type of icon to use, do the following:

In the Resources/DigiMagTemplate-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). type of icon to use for the issue:
UINewsstandBindingType. Defines the
178
iPad
UINewsstandBindingTypeMagazine.
Displays the magazine type icon.
Newsstand background download support
UINewsstandBindingTypeNewspaper.
Displays the newspaper type icon.
When 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
UINewsstandBindingEdge. (Used together
with the magazine type icon, but only displayed in the Task Manager.) Defines the position of the staples: staples are positioned on the left-hand side of the icon. staples are positioned on the right-hand side of the icon.
UINewsstandBindingEdgeLeft. The
UINewsstandBindingEdgeRight. The
UINewsstandBindingEdgeBottom. The
staples are positioned on the bottom of the icon.
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.)
179
iPad
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 indication can appear are for example:
The Store Frames with streaming video Frames with streaming audio Newsfeed windows Widgets Web Elements
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 system and how to send out messages.
For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
noInternetConnectionBackground.png.
Background image of the bar. displayed in the bar.

A B
noInternetConnectionLabel.png. The text
A B
noInternetConnectionBackground noInternetConnectionLabel
Figure 9.12. The No Internet Connection Assets
180
iPad
The indicator consists of a background image and an image containing the text. Both are located in the root images folder:
9.14.1 Configuration
Configuring the system for the Push Notification feature involves the following steps:
Updating the provisioning file and installing the Modifying the DigiMagKioskSettings.h file
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
required certificate
Each step is explained in the paragraphs below.
Provisioning file & certificate
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 password; it can be uploaded by using the Content Delivery Platform (see section 9.14.2 Sending Messages).
DigiMag_usePushNotifications. Controls
whether the Push Notification feature is used. Possible values: YES and No. BOOL DigiMag_usePushNotifications = NO;
DigiMag_PushNotificationManager-
DigiMagKiosSettings.h file
In your Xcode project, configure the DigiMagKioskSettings.h file as follows:

DigiMag_usePushNotifications: needs to
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.
be set to YES. be empty.
DigiMag_PushNotificationKey: needs to
DigiMag_PushNotification_URL. The URL
of the Push Notification server. Note the following:
181
iPad
The provisioning profile needs to be enabled for Push Notification and the correct certificates need to be obtained for the server. For information about how to do this, see Apples Local and Push Notification Programming Guide:
Each step is explained below.
Reader App configuration
The Push Notification feature is controlled via settings in the DigiMagKioskSettings.h file. The following settings are defined:
For the generic version release, the value
must be the same as the value for the DigiMagKioskLibraryURL setting.
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.
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 "DigiMagPushNotification URL" in the DigiMagKioskSettings.h file points to a production push notification server. If this happens, the push notifications arent send correctly in production.
DigiMag_PushNotificationKey
NSString *DigiMag_PushNotificationKey = @"";
slideshowIcon
Sending messages
For information about sending a message, see appendix F, Using the Content Delivery Sever section 1.9, Sending a Message.
Figure 9.14. The Slide Show icon
The icon can be changed by customizing the following asset: For an overview of the exact dimensions of this asset, see appendix C, Image Dimensions.
slideshowIcon.png. The overlay shown in
the bottom left corner of a Slide Show.
182
iPad
Reserved for future use; to be left empty.
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.
A
Library. As far as setup and content is concerned though, both are the same.
Enabling the Store filter
The Store filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
Store/Enable filter
Creating the list content

A
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. 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 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.
A
Filter label
Filter option
Localizing the text
The customizable Store Filter strings can be found in the Store section of the Localizable.strings file.
Figure 9.15. The Store filter allows a user to filter the Store by defined keywords
For instance: when your publications exist in multiple languages, 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
183
iPad
9.17 Subscriptions
The Subscriptions Edition and the Apple Subscriptions Edition of the Reader App can be used for offering magazines to users on a subscription basis. For a description of how the functionality works from a users 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
Setting up the Subscription functionality involves the following steps: Step 1. Configuring the Subscription environment. 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 functionality. (See sections below.)
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. access their subscription account by means of the Account button.
Steps 3 4 are explained in the following sections.
The Navigation bar, where users can
184
iPad
Step 4. Modifying the Reader App appearance. (See sections below.)
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
Subscriptions/Library cache time. The
time after which issues that are part of a subscription are refreshed in the Library. (Note that the cache is also emptied when the app is restarted or when the Store is accessed.) mode. For hiding the Offer pane when the device is rotated to portrait orientation. in Safari. For opening the subscription page in Safari when the user taps the Subscribe button in the Store.
server. Enables the use of both the iTunes Subscription Ser vice and a non-iTunes Subscription Service. The working of a mixed subscription environment is as follows:
A Sign In button is available in the Store
Subscriptions/Disable offer in portrait
Subscriptions/Open subscription page
and Library for logging in to the non-Apple iTunes Subscription server (logging in to the Apple iTunes Subscription server is done automatically and does not require a log in button).
Subscriptions/Enable subscribe but-
The Library will show the following content:

All downloaded issues When not logged in to the non-Apple
ton. Enables the Subscribe button in the Subscription section of the Store.
Subscriptions/Enable existing sub-
iTunes Subscription server: only the issues that are part of the Apple iTunes Subscription are shown. iTunes Subscript ion ser ver: the issues for the Apple iTunes Subscription and the issues for the non-Apple iTunes Subscription are shown. pages that are of the non-Apple iTunes Subscription; Apple does not allow this.
scriber but ton. Enables the E xisting Subscriber button in the Subscription section of the Store.
Subscriptions/Reset password. Linked
When logged in to the non-Apple
to the same value on the Subscription server which stores the link to the Web page which users can use to reset their password. This key is used when a user wants to reset their password (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.
The Store will not display the Offer
185
iPad
Note that by this action, the Reader App is closed.
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 the Subscription server which stores the link to the Web page which users can use to view with information about how the users data is gathered, used, and managed.1 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 components can be done by modifying components in the Store, Navigation bar, and the Library.
Privacy notice. Linked to the same value on
Store
The Subscription components of the Store are part of the HTML Store. For information about customizing these components, see appendix G, Customizing the HTML Store.
Customer service. Linked to the same value
Navigation bar
The Navigation bar holds the Account button for accessing the My Account page.
Navigation/ToolbarItems/Item 8 Account
The appearance of the button can be changed by modifying the following asset:
accountIcon.png. The icon for the Account
button.
accountSelectedIcon.png. The icon for the
Account button in its selected state.
A
A
accountSelectedIcon
Figure 9.16.2a. The Account button in its selected state
186
iPad
The button can be displayed/hidden by the following DMSetting:
Library
The Library holds the Sign In/Sign Out button and the Sign In window.
background of the header of the Subscription Sign In dialog box.

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

Sign-in disclaimer text color.
Text
The customizable Sign In window strings can be found in the following section of the Localizable.strings file:
Sign-in dialog
The color of the disclaimer text in the Subscription Sign In dialog box. of the license text in the Subscription Sign In dialog box. of the privacy text in the Subscription Sign In dialog box.
Sign-in license text color. The color
Sign-in privacy text color. The color
color. The color of the Remember Me text in the Subscription Sign In dialog box. The color of the I forgot my password text in the Subscription Sign In dialog box.
Sign-in forgot button text color.
Sign-in submit button text color.
The color of the Submit button label in the Subscription Sign In dialog box. color of the Email Address box text in the Subscription Sign In dialog box.
Sign-in email field text color. The
Sign-in password field text color.
The color of the Password box text in the Subscription Sign In dialog box. color of the title in the Subscription Sign In dialog box.
Sign-in dialog title text color. The
188
iPad
Sign-in remember checkbox text
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 Sign In window fonts can be customized:
Disclaimer text font. The font of the
Disclaimer text in the Subscription Sign In dialog box. text in the Subscription Sign In dialog box. in the Subscription Sign In dialog box.
License text font. The font of the License Privacy text font. The font of the Privacy text Remember checkbox font. The font of the
Remember Me text in the Subscription Sign In dialog box. my password text in the Subscription Sign In dialog box. button label in the Subscription Sign In dialog box. the Subscription Sign In dialog box.
Forgot button font. The font of the I forgot
Submit button font. The font of the Submit
Email field font. The font of the Email box in Password field font. The font of the
Password box in the Subscription Sign In dialog box. Subscription Sign In dialog box.
Dialog title font. The font of the title of the
189
iPad
A B C
closeButton
headerBackground
loginDialogBackground
checkboxChecked
Figure 9.16.2b. The Subscription assets in the Sign In dialog box
190
iPad
9.18 Text View

The Text View assets are stored in the Text View folder. The following assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
textViewHeader.png. (Applies only to those A
articles which have not been created using the Text View Markup feature) The header that is shown at the top of the Text View. 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
textViewHeader
textViewImagesShadow
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
191
iPad
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

Enabling the functionality Changing the assets Changing the colors Changing the fonts Localizing the text Changing the dimensions
TOC List
192
iPad

To make the TOC List functionality available in the Reader App, perform the following steps: Step 1. Enable the TOC List by setting the following DMSetting to Yes:
Navigation/TOC List in top toolbar

The TOC List assets are stored in the TOC Pop-up folder. The following assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
tocThumbBackground.png. The image
Step 2. Enable the top Toolbar by setting the following DMSetting to Yes:
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.
tocThumbBackground
Figure 9.18.2. TOC List assets
193
iPad

The following TOC List colors can be customized:
TOC selected row color. Color of the
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.
selected row in the TOC List.
C D
A Story Description property B Story Description displayed in Reader C Story Title property D Story title displayed in Reader
Figure 9.18.4. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for displaying the story title and description in the TOC List (bottom)
Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
194
iPad
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.
195
iPad
9.19.7 Changing the 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 TOC List fonts can be customized:
TOC cell story title font. The font of the
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
story title.
TOC cell story description font. The font
of the story description.
196
iPad
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: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
videoDisabledIcon.png. The overlay shown
A
videoDisabledIcon
Figure 9.19.1a. The video disabled icon
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
videoEnabledIcon
Figure 9.19.1b. The video enabled icon
197
iPad
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.)
9.20.2 Hiding Embedded Video Controls

The controls for an embedded video can be hidden so that they dont appear on the page. This can be controlled 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 1. Open the exported magazine.xml file in a plain-text editor. Step 2. Locate the created video object by searching for <type>movie</type>. Step 3. In the movie id section, add the following property: <moviecontrols>false</moviecontrols> Possible values: true: controls will be shown1 false: controls will be hidden
Example: <object> <id>96</id> <type>movie</type> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <movie id=95> <url>images/story136/video_96.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 controls will be shown, else the user would not be able to leave fullscreen mode.
The controls are also shown when the moviecontrols property is not included
1
198
iPad
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 1. Open the exported magazine.xml file in a plain-text editor. 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> Step 3. In the movie id section, add the following property: <removeafterplay>true</removeafterplay>
Possible values: true: the video will be removed1 false: the video will stay visible Example: <object> <id>0</id> <type>movie</type> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <movie id="0"> <url>test/movie.mp4</url> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <autoplay>false</autoplay> <removeafterplay>true</removeafterplay> <autofullscreen>false</autofullscreen> </movie> </object>
The video also stays visible when the removeafterplay property is not included
1
199
iPad
9.22 Web Elements

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

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
A Reader App without Store functionality A Reader App with Store functionality A Reader App without Newsstand functionality
249
iPad
Preparation steps are required before being able to build the following types of Reader Apps:
Chapter 08 Building the iPad Reader App
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
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. Se nd a n e -mail to s e r v i c e s@ woodwing.com stating that you would like to distribute a Reader App by making use of the Content Delivery Platform. You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform (WoodWing will do this for you). 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
destination groups folder (if needed). References for any added folders.
Click the option Cr ea te Fol d e r
Step 3. Click Add. The folder is added to the project as a blue folder icon. (See figure 1.1b on the next page.)
defined on the Content Delivery Platform defined on the Content Delivery Platform
A product ID for the Reader App, as
Step 2. Use these settings for building your Reader App. (See section 2. Building.)
250
iPad
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
251
iPad
1.3 An App Without Newsstand Functionality

Support for iOS 5s Newsstand functionality is included by default in the following projects:
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
When using any of these projects and when not making use of the Newsstand functionality, remove the functionality by performing the following steps: Step 1. O p e n t h e P r o F r a m e w o 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
the iPad.
Step 4. Save the file.
Simulator. When the App is to be tested
on the iPad Simulator.
Step 5. Click Build and Run.
252
iPad
09 Customizing the Android Reader App

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 following main customization areas are defined:
General App settings Navigation The Store The Library General App features
Chapter 09 Customizing the Android Reader App
1. Required Tools
Eclipse and (optionally) an emulator.
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 customization is significantly different, this is indicated accordingly.
(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.
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:
DigiMagAndroidv1.xbXXXFramework.zip
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. text as displayed in the Reader App.
For example:
DigiMagAndroidv1.3b505Basic
res/values/strings.xml. For localizing the res/drawable folder. (Android Reader App
Standard.zip
To load the project, perform the following steps: Step 1. Unzip the provided DigiMag file:
DigiMagAndroidv1.xbxxxBasic
v1.x (Froyo) only) For customizing images related to the Subscription Sign In window. (used for both Froyo and Honeycomb). drawables.
res/drawable-nodpi. For generic drawables res-drawable-nodpi-v8. For Froyo-specific res-drawable-nodpi-v11. For Honeycomb-
Standard.zip
DigiMagAndroidv1.xbxxxPro
Framework.zip
specific drawables.
DigiMagAndroidv1.xbxxx
Subscriptions.zip
assets/DMsettings.plist file. For custom-
izing the Reader App functionality.
Step 2. Open the Eclipse project, located in the [folder name]_Template folder. Two projects are loaded: customerapp and wwdigimag. Customizations should only be made to the customerapp project.
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). 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:

Drawables. Interface components such as
buttons, icons, logos and headers.
Text. The text of specific titles as they appear
Customizing colors and fonts is not yet possible in the current version. Each is described in the following sections.
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 the drawable-nodpi-v8 folder. SDK 2.2
Any Froyo-specific drawables are located in The drawable-hdpi, drawable-mdpi and draw-
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.
5.1 Drawables
Drawables are user interface components such as buttons, 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 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. Drawables are stored in the following project folders:
Android Reader App v1.x:
5.2 Text
Changing the appearance of the text can be done in the following ways:
By changing the actual text By changing the language in which the text
appears
res/drawable-nodpi res/drawable-nodpi-v8 res/drawable-nodpi-v11
Take note of the following:

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.

The text which appears in the Reader App originates from various sources, and can therefore be changed by different 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.) project include icons only, but the following drawables also include text: or Library
Drawables. Most drawables in the Eclipse
Buttons of the Navigation bar, Action bar 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, modify the content of the file as required.
C A D
C
A
Localizable string
HTML page
Drawable with text
Dossier property
Server property
Figure 5.2.1. Text originates from various sources in the system
10
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 corresponding 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 values 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.
Story title. The title for a story below 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 properties. For more information about setting these values, see the Enterprise 7 Admin Guide, chapter 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.
11
5.3 Settings
Most of the customizations for the Reader App are performed in the DMSettings.plist file. This allows you to change the functionality of the Reader App. 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. 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 cards
To 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=preferExte rnal> For more information, see the Android documentation: http://developer.android.com/guide/appendix/installlocation.html.
12
7. General App Settings

Reader App name. The name of the Reader
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-click 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 double-click the strings.xml file. Step 4. Change the value for app_name with the name of the magazine. Step 5. (Optional) Perform steps 14 for each localization in your project.
App as it appears on the Android device. used throughout the Reader App.
Reader App drawables. General drawables Web pages. Web pages containing specific
information, such as privacy information or preferred device metrics. about the Reader App.
Version information. Version information Intent set tings. Settings to conver t
Enterprise intent names to Reader App intent names.
Each setting is explained in the following sections.
13
7.2 Reader App Drawables

Reader App drawables are images with a general purpose such as the app icon.
7.3 Web Pages

Web pages can be used for displaying specific information to the user. The following types of information can be displayed:
Custom information. For displaying custom
icon.png
Different versions of this file exist:

Low dpi. Reader App icon displayed in the
information such as privacy information.
Home Screen Editor. Location: res/drawable-ldpi.
Metrics information. For informing the user
Medium dpi. Reader App icon displayed on
the Homescreen. Location: res/drawable-mdpi.
that the current device on which the magazine is viewed may not provide the best user experience since the device does not match the size for which the magazine was designed.
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 create an ldpi, mdpi and hdpi version of their application icon.
14
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/
7.3.2 Metrics Information

When a magazine is read on a device for which it hasnt 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.
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 button 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
15
Page scaling
When the pages of a magazine have been designed in an aspect ratio (width versus height) which is different than the ratio of the device on which the magazine is displayed, 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
For notes about the functionality of the page fitting feature in relation to using specific DM Server plugins, see chapter 6, Exporting Content 3.1, Exporting and Page Scaling.
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.
1
16
Displaying a message
The 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
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:
To enable this feature, perform the following steps: Step 1. (Optional) Create a Web page containing the information to be displayed by doing one of the following:
Use the default Web page Create a new page, possibly based on
600 px (Reader App v1.x (Froyo) 800 px (Reader App v1.x (Honeycomb)
Metrics/Device dpi. The dpi setting
which the device runs in (so not the physical dpi). Examples: Samsung Galaxy: 240 dpi Motorola Xoom: 160 dpi For values of other devices, please refer to the documentation of the manufacturer.
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 displayed. When left empty, the default Web page is used.
17
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.
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
Setting the version number
The 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 following file:

customerapp/src/com.woodwing.
settings/DigiMagKioskSettings.java/ DigiMagKioskSettings
Localizing the message
To 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
with Help instructions to the Help button in the Navigation bar.
Intents/TOC. Used for linking the page con-
Reader App. Please update.
taining the table of contents to the TOC button in the Navigation bar.
18
8. Navigation
Story navigation vs page navigation Navigation bar Action bar Flipview Top Toolbar Hotzones Orientation lock

user swipes horizontally (from left to right or right to left) page), the user swipes vertically (up/down or down/up)
Each aspect is explained in the following sections.
Page navigation. In this configuration, navi-
To navigate from page to page, the user
swipes horizontally (from left to right or right to left) using one finger swipes horizontally (from left to right or right to left) using two fingers
To navigate from story to story, the user
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. 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
19
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 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. Customizing the Navigation bar can be done by changing the following:
in order to display the Navigation bar. in which they appear.
Items. The number of buttons and the order Drawables. The icons of the buttons. Visibility settings. Settings controlling the
circumstances under which the Navigation bar is displayed or hidden.
20
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:
8.2.2 Items
Magazine. For accessing the current maga-
zine (if available).
Buy. (Store/Library/Subscription projects only)
file, make the following changes: toolbar.
For navigating to the Store.
Select the option Tap bottom to show Select the option Tap top to show
Library. (Store/Library/Subscription projects
only) For navigating to the Library.
toolbar.
(Optional) In the Touch Areas section,
page.
define the height of the area in pixels by modifying the bottom and/or top area height value.
Help. For navigating to the Help page. FlipView. For bringing up the Flipview. Feed. For navigating to the newsfeed. Account. (Subscription Editions only) For
The Navigation bar now only appears when the user taps the defined area(s).
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.
Navigation/ToolbarItems The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
2
21
Removing/adding buttons
To remove a button, do the following:

Mac OS: Select the row and delete it. Windows: Modify the content by using
8.2.3 Drawables
The drawables that appear in the Navigation bar are stored in the res/drawable-nodpi and res/drawable-nodpiv8 folders. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. 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: For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
accounticon.png. The icon for the Account
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. a suitable XML editor.
Windows: Modify the content by using
Changing the order
To rearrange the order in which the items appear in the Navigation bar do the following:
Mac OS: Drag each key to its required
position.
Windows: Modify the order by using a
suitable XML editor.
button.
accountselectedicon.png. The icon for the
Account button in its selected state. Navigation bar. button.
bottombar.png. The background of the customicon.png. The icon for the Custom customselectedicon.png. The icon for the
Custom button in its selected state. button.
feedicon.png. The icon for the Newsfeed
22
feedselectedicon.png. The icon for the
Newsfeed button in its selected state.
libraryicon.png. The icon for the Library
button.
flipviewicon.png. The icon for the Flipview
libraryselectedicon.png. The icon for the
Library button in its selected state. the current magazine.
flipviewselectedicon.png. The icon for the
magazine_icon.png. The icon for accessing magazine_selected_icon.png. The icon for
helpicon.png. The icon for the Help button. helpselectedicon.png. The icon for the
accessing the current magazine in its selected state.
Help button in its selected state.
storeicon.png. The icon for the Store button. storeselectedicon.png. The icon for the
homeicon.png. The icon for the Home but-
ton, linking to the cover of the magazine. Home button in its selected state.
Store button in its selected state. button.
homeselectedicon.png. The icon for the
tocicon.png. The icon for the Contents tocselectedicon.png. The icon for the
Contents button in its selected state.
A
A H
B
B I
H
E
J
F
K tocicon
G
bottombar flipviewicon
magazineicon C storeselectedicon D libraryicon feedicon J accounticon K customicon
homeicon
helpicon
Figure 8.2.3. The Navigation bar drawables
23
8.2.4 Visibility Settings Show toolbar on opening issue

When 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
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:
Always show toolbars
The 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
in order to display the Navigation bar. in which they appear.
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 displayed 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.
Visibility settings. Settings controlling the
circumstances under which the Navigation bar is displayed or hidden.
24
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:
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.
file, make the following changes: toolbar.
Library. (Store/Library/Subscription projects
Select the option Tap top to show (Optional) In the Touch Areas section,
only) For accessing the Library.
Magazine. (Store/Library/Subscription proj-
define the height of the area in pixels by modifying the top area height value.
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.
The Action bar now only appears when the user taps the defined area.
Feed. For navigating to the newsfeed. 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):
page.
Help. For navigating to the Help page. FlipView. For bringing up the Flipview. Account. (Subscription Editions only) For
bringing up an external page with subscription account details. When included, this button is only displayed when the Store is accessed.
3
25
Back/Forward buttons. (These are always
displayed on the right-hand side of the Action bar, never in the menu.) For navigating to previously visited pages.
Removing/adding buttons
To remove a button, open the DMSettings file and do the following:

Mac OS: Select the row and delete it. Windows: Modify the content by using
a suitable XML editor.
The value of each item is linked to specific functionality and should not be changed. When one or both of the Back/Forward items are enabled then these are always displayed, regardless 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.)
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. a suitable XML editor.
Windows: Modify the content by using
Changing the order
To rearrange the order in which the items appear in the Action bar open the DMSettings file and do the following:
Mac OS: Drag each key to its required
Setting the maximum number of items displayed
position.
The maximum number of items to appear on the right-hand side of the Action bar can be controlled by the following DMSetting:
Navigation/ Maximum number of toolbar items
Windows: Modify the order by using a
suitable XML editor.
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, regardless of the value set in the ' Maximum number of toolbar items' setting (see below).
26
8.3.3 Drawables
The drawables that appear in the Action bar are stored in the res/drawable-nodpi folder. 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. The current state of a button and the availability of the functionality behind the button is indicated in the following ways:
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. selected or pressed). The names of these drawables all start with actionbar.
Status. Depicts the button state (unselected,
Any buttons that dont 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 alphabetical order, see figure on the next page): The icon for the Menu button is part of the operating system and cannot be customized. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
accountdisabledicon.png. The icon for the
Action buttons on the left-hand side only:

shown at the bottom of the button. at the bottom of the button.
The button is unselected: a narrow line is The button is selected: a thick line is shown The button is pressed: the whole back-
Account button in its disabled state. button.
ground of the button is colored.
accounticon.png. The icon for the Account action_bar_action_overflow_pressed_
Buttons on the right-hand side only:
The button is unselected: no line at the
bottom of the button, nor a background color is shown.
background.png. Background image for a pressed command in the Action bar menu. ground.png. Background image for a pressed button in the Action bar. Background image for a selected and pressed button in the Action bar. Background image for the selected action in the Action bar.
All buttons:
The functionality is available: the icon is
action_bar_action_pressed_back-
colored white.
The functionality is not available: the icon
is colored gray.
action_bar_tab_selected_pressed.png.
For this purpose, two images are always shown simultaneously for each button:
action_bar_tab_selected.png.
27
action_bar_tab_unselected_pressed.
png. Background image for an unselected and pressed button in the Action bar. Background image for unselected buttons in the Action bar. Back button in its disabled state.
popup_background.9.png. Background
for the Action bar menu, including the top green line.
action_bar_tab_unselected.png.
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
backdisabledicon.png. The icon for the backicon.png. The icon for the Back button. customicon.png. The icon for the Custom
button.
button. button.
feedicon.png. The icon for the Newsfeed flipviewicon.png. The icon for the Flipview
button. (This button is normally named Contents.) Forward button in its disabled state. button.
forwarddisabledicon.png. The icon for the forwardicon.png. The icon for the Forward helpicon.png. The icon for the Help button. homeicon.png. The icon for the Home but-
ton, linking to the cover of the magazine. button.
libraryicon.png. The icon for the Library magazineicon.png. The icon for the
Magazine button. (This button is normally named Issue.)
28
M N
H I J K L M N
A B C D E F G
storeicon libraryicon magazineicon feedicon customicon homeicon flipviewicon
backicon forwarddisabledicon actionbartabunselectedpressed actionbartabunselected actionbartabselected actionbaractionoverflowpressedbackground popupbackground.9
Figure 8.3.3. The Action bar drawables
29
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 changing 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:
The following DMSetting controls whether the Action bar will always be displayed, without the user being able to hide it:
30
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 automatically when the Navigation bar/Action bar is displayed. This functionality can be set through the following DMSetting:
Flipview/ Show flipview on show toolbar
The Flipview consists of the following components (see image below):

Header Story Viewer / Page Viewer Page Scrubber Section Viewer Close button Drop shadow
How to customize each component is explained in the following sections.
C D A B C D
A
E Flipview Header
B
Page scrubber
Section Viewer
Close button
Figure 8.4. The Flipview components of the Froyo version (top) and Honeycomb version (bottom)
31
8.4.1 Header Changing its appearance

Changing the appearance of the Flipview Header can be done as follows:
B a c k g r o u n d .
Drawables that appear in the Flipview header are stored in the following locations:
Generic (both Froyo and Honeycomb):
res/drawable-nodpi
Background image. Customizing it can be done by changing the following image:

flipviewbackground.png
Froyo-specific:
res/drawables-nodpi-v8 res/drawables-nodpi-v11
Honeycomb-specific:
This image is also used as the background for the Story Viewer / Page Viewer.
Flipview title. For displaying the title of the
For an overview of the exact dimensions of the drawables, see appendix C, Image Dimensions.
magazine. This can be modified by changing the following string in the strings.xml file:
flipviewerheadertitle
Showing or hiding the Flipview header content
The Flipview Header components can be hidden by deselecting the following option in the DMSettings.plist file:
Flipview/Show flipview header
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 A B
Flipview title
flipviewbackground
Issue description
fliipviewclosebutton (Froyo version only)
Figure 8.4.1. The Flipview Header components
32
8.4.2 Story Viewer / Page Viewer Changing its appearance

Changing the appearance of the Story Viewer / Page Viewer can be done as follows:
B a c k g r o u n d .
and thumbnails in landscape orientation are shown when the device is rotated to landscape mode.
Top Margin
Background image. Customizing it can be done by changing the following image:

flipviewbackground.png
(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
This image is also used as the background for the Flipview Header.
Margins between thumbnails
Thumbnail Size
The size of the thumbnails in the Story Viewer / Page Viewer can be controlled via the following settings in the DMSettings.plist file:
Flipview/Thumbs/Minimum page thumb
The margins between the thumbnails can be controlled by the following settings in the DMSettings.plist file:
Froyo version Flipview/Margins/Flipview thumb
height height
margin. Controls the margin between each thumbnail.
Flipview/Thumbs/Maximum page thumb
Honeycomb version Flipview/Margins/Flipview page
To change the thumbnail size, enter the required size in pixels for each setting.
thumb margin. Controls the margin between the pages. thumb margin. Controls the margin between articles (stories).
Flipview/Margins/Flipview article
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 orientation 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
33
Story Title
For the first page of each story, the Story Title is shown. The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. When text exceeds the width of the page thumbnail, the text is elipsized.
Story Bullets
A story bullet can be shown in front of each story title.
Story bullet
Figure 8.4.2b. The story bullet in the Flipview
Story bullets are displayed by default and can be hidden by deselecting the following option in the DMSettings.plist file:
Flipview/Show story bullet A
Changing the appearance of the Story bullet can be done by modifying the following drawable:
flipviewbullet.png
This drawable is stored in the following location: res/drawable-nodpi

B
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
Story Title property
Story title displayed in Reader
Figure 8.4.2a. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
34
Story Description
For each story a short description can be displayed as a further indication of what the story is about. To enable this feature, select the following option in the DMSettings.plist file:
Flipview/Show story description A
The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. When text exceeds the width of the page thumbnail, the text is elipsized.
B
A B
Story Description property Story Description displayed in Reader
Figure 8.4.2c. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
35
Page number
Below each page preview, the page number can be displayed.
8.4.3 Page Scrubber

When the Reader App is configured for Page Navigation (see chapter 3, The Concept section 3, Stories, Pages, Sections and Segments), it is advisable to offer the user the use of the Page Scrubber: a slider with which the user can quickly scroll through the pages of the Page Viewer.
This feature is controlled through the following option in the DMSettings.plist file:
Flipview/Show page number
A A
A
Page number
Page scrubber
Figure 8.4.2d. A page number is displayed below each page preview
Figure 8.4.3. The Page Scrubber can be used to quickly scroll through the pages of the magazine
The Page Scrubber can be enabled by the following option in the DMSettings.plist file:
36
Changing the appearance of the Page Scrubber can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/ drawable-nodpi-v11 folders): For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
pagescrubberbackground.png. The back-
8.4.4 Section Viewer Display/hide

The Section Viewer can be displayed or hidden through the following DMSetting:
Flipview/Show section labels
Section title
ground image behind the Page Scrubber. Scrubber button.
pagescrubberbutton.png. The Page pagescrubbertrackleft.9.png. The image
The text that is displayed in the Section Viewer is taken from the Section Title property of a Dossier. Accessing the Dossier properties can be done by using Content S t a ti o n o r S m a r t C o n n e c ti o n fo r I n D e s i g n.
to the left of the Page Scrubber button. 10 Pixels of each side will remain the same, but the middle section will stretch.
pagescrubbertrackright.9.png. The image
to the right of the Page Scrubber button. 10 Pixels of each side will remain the same, but the middle section will stretch.
B
A
Figure 8.4.4a. The Section Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the Section in the Section Viewer of the Reader App (bottom)
37
Changing the appearance of the Section Viewer can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/ drawable-nodpi-v11 folders): For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
flipviewsectionbackground.png. The
8.4.5 Close Button

For the Honeycomb version of the Reader App, the Flipview Close button is located as a separate button below the Flipview, in the bottom right-hand corner. This button consists of drawables and localizable text. The Flipview Close button on the Froyo version of the Reader App is part of the Flipview header. For more information, see section 8.4.1 Header.
background of the Section bar. image of a selected Section.
flipviewselectedsectionbutton.png. The flipview_section_background_
Changing the appearance of the Close button can be done by modifying the following drawables:
flipview_close_background.png. The
unselected.png. The background image behind unselected Sections.

A B C
background image of the button.
flipview_close_icon.png. The icon of the
Close button (the caret character ^).
These drawables are stored in the res/drawable-nodpiv11 folder.

A B C
flipviewsectionbackground.png flipviewselectedsectionbutton.png flipviewsectionbackgroundunselected.png
Figure 8.4.4b. The Flipview Header components (Honeycomb version)
A
A
flipviewcloseicon
flipviewclosebackground
Figure 8.4.5. The Close button drawables
38
Changing the text
Changing the text of the button can be done by changing the following string in the strings.xml file:
flipviewerclosebuttontext
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:
flipviewbottomshadow.png
This drawable is stored in the res/drawable-nodpi-v11 folder.
A Figure 8.4.6. A shadow is located at the bottom of the Flipview
39
8.5 Top Toolbar

The top Toolbar is used in the Android Reader App v1.x (Froyo) only. For the Android Reader App v1.x (Honeycomb), the top Toolbar is integrated in the Action bar. For more information, see section 8.3 Action Bar. Customizing the top Toolbar can be done by changing the following:
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:
Toolbar.
Visibility settings. Settings controlling the
8.5.2 Visibility Show toolbar on opening issue

When opening a magazine issue, the following DMSetting controls whether the top Toolbar (as well as the Navigation bar) will be automatically displayed:
circumstances under which the Navigation bar is displayed or hidden. in order to display the top Toolbar. that appear in the top Toolbar. images.
Tap area. The area which the user should tap Items. The number of buttons and images Drawables. The icons of the buttons and
The following DMSetting controls whether the top Toolbar (as well as the Navigation bar) will always be displayed, without the user being able to hide it:
40
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:
8.5.4 Items
The top Toolbar holds the following items:
previously visited pages
file, make the following changes: toolbar. toolbar.
A
A
B
B
Select the option Tap bottom to show Select the option Tap top to show (Optional) In the Touch Areas section,
Back button
Forward button
Figure 8.5.4. The components of the top Toolbar
define the height of the area in pixels by modifying the bottom or top area height value.
The inclusion of these items is controlled through the following DMSetting:

4
41
8.5.5 Drawables
The following drawables can be customized:
backicon.png. The icon for the Back button
8.6 Hotzones
Hotzones are areas to the left, right, and bottom of the screen which can be tapped in order to navigate the magazine.
image.
backselectedicon.png. The icon for the
Back button image in its selected state. button image.
forwardicon.png. The icon for the Forward forwardselectedicon.png. The icon for the
Back button image in its selected state. Toolbar (also used in the Library).
topbar.png. The background of the top
These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
Figure 8.6. Hotzones (shaded in red) are specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page
The following areas are defined:

Left area: for navigating to the previous page
(or the next page when the Reader App is set to Right-to-left mode) Navigation bar.
Bottom or top area: for bringing up the Right area: for navigating to the next page (or
the previous page when the Reader App is set to Right-to-left mode)
42
Each area can be controlled by the following options in the DMSettings.plist file:
Hotzones/Tap bottom to show toolbar.
8.7 Orientation Lock

The default behavior of the Reader App is such that when the device is rotated, a page of a different orientation is shown. For example: when holding the device in landscape orientation a page with a corresponding orientation is shown; when rotating the device to portrait orientation a page in that orientation is shown. Designers can benefit from this feature by offering differently styled pages for each view. If only pages of a certain orientation need to be shown (only pages in landscape orientation or only pages in portrait orientation), you can make use of the Orientation Lock feature. When enabled, rotating the device will not change the orientation of the page; the page will stay fixed in place instead. To enable Orientation Lock, set the following option in the DMSettings.plist file:
Navigation/Orientation lock
Activates the bottom Hotzone. Activates the top Hotzone.
Hotzones/Tap top to show toolbar. Hotzones/ Tap sides to navigate. Activates
the Hotzones to the left and right of the screen. or width of the different Hotzones.
Hotzones/Touch areas. Defines the height
Hotzones overlaying interactive objects
When interactive objects (such as Slide Shows, videos, etc.) are placed within the area of a Hotzone, their functionality cannot be accessed because of the overlaying Hotzone area. In order to make sure that these interactive objects can still be accessed without being blocked by a Hotzone, the following DMSetting can be set:
Hotzones/ Keep underlying interactive ele-
ments active
Possible values:
Landscape. For displaying only pages in
landscape orientation. orientation.
Portrait. For displaying only pages in portrait
When the setting is left empty or removed, the orientation lock is disabled and pages in both landscape and portrait orientation are shown.
43
Fullscreen object orientation lock
When the Orientation Lock feature is enabled (see above), the objects displayed in full screen mode (such as videos, Slide Shows and Web view overlays) can still be allowed to rotate when the Tablet is rotated by enabling the following option in the DMSettings.plist file:
Navigation/Allow fullscreen object rotation
9. The Store
The Android Reader App makes use of the HTML Store. For more information, see appendix G, Customizing the HTML Store. On the Reader App side, customization is done in the following two areas:
Communication with the HTML Store Reader App components
when locked
Video orientation lock
Videos displayed in fullscreen mode can be forced to be displayed in landscape mode across the height of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly. This can be done by enabling the following option in the DMSettings.plist file:
Navigation/Force fullscreen video orientation
Figure 8.7. With the Force fullscreen video orientation option enabled, video is always displayed across the full height of the Tablet, even when the Tablet is held in portrait orientaton.
Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video.
44
9.1 Communication With the Store

Communication with the Store is done by configuring the DMSettings file and the DigiMagKioskSettings file.
DigiMagKioskSettings File
The DigiMagKioskSettings file handles the communication with the Content Delivery Platform. The file can be found in the following location of the project:
customerapp/src/com.woodwing.settings
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:
customerapp/assets/DMSettings.plist
The following values need to be set:

DigiMagKioskLibary_URL. The URL to
connect to the Kiosk Server.
The following DMSettings can be configured:

Store/HTML Store URL. The URL point-
DigiMagKioskLibary_ProductID. The
ing to index-android.html of the HTML Store. Possible values:

Blank: the packaged HTML store as part
product name as defined on the Kiosk Server. secret key as defined on the Kiosk Server.
DigiMagKioskLibary_SecretKey. The
of the Reader App build HTML Store
URL: a URL to an externally hosted Store/HTML Store fallback URL. The URL
pointing to a local HTML file. This file is loaded when the HTML Store is not acccessible.
45
9.2 Reader App Components

For using the Store in the Reader App, the Store Filter, buttons, and strings can be customized.
Buttons
The following buttons can be customized:

stretchablestorebutton.9.png. Used for
Store Filter
The Store Filter can be controlled by the following option in the DMSettings file:
Store/Enable Filter. Enables or disables the
the Log In button as the button in its available state.
stretchablestorebutton_disabled.9.png.
Store Filter.
Used for the Log In button as the button in its non-available state.
The following string can be customized for the Store Filter:

All Issues. The value in the Store Filter for
choosing all issues.
46
Strings
The following strings relating to the in app purchasing functionality can be modified: Table 9.2. In app purchasing strings Key store_androidmarket_item_ purchased store_androidmarket_item_ refunded Value \'%1s\' purchased. Description Displayed when an issue is purchased. %1s can be used to refer to the issue name. Displayed when an issue is refunded. %1s can be used to refer to the issue name.
\'%1s\' refunded.
store_androidmarket_item_ unavailable
Displayed when the Android Market cannot find the requested item in the application's product list. This can happen \'%1s\' appears to be unavailable in if the product ID is misspelled in your purthe Android Market. chase request or if an item is unpublished in the application's product list. %1s can be used to refer to the issue name. Purchase verification failed. You canceled the purchase of\'%1s\'. Purchase of \'%1s\' canceled by server. Displayed when purchase information was received but when the Content Delivery Server failed to verify it. Displayed when the user tapped Cancel on the purchase screen. %1s can be used to refer to the issue name. 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_verification_failed store_androidmarket_purchase_canceled_by_user store_androidmarket_purchase_canceled_by_server store_androidmarket_purchase_submitted" store_androidmarket_market_unavailable
Displayed when the purchase order was Your purchase of \'%1s\' has been successfully sent to the Android Market submitted to the Android Market. server. %1s can be used to refer to the issue name. 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)
47
Table 9.2. In-app purchasing strings (continued) Key Value Description Displayed when the billing API version used is not recognized by the market application and that the market application may have to be updated. 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). Displayed when the com.android.vending. BILLING permission is not declared in the manifest. Can also indicate that an application is not properly signed. %1s can be used to refer to the issue name. Displayed when a restore transactions request was successfully sent to the server.
store_androidmarket_unavailable
In-app Billing information is not available.
store_androidmarket_purchase_error store_androidmarket_restoring_transactions store_androidmarket_restoring_transactions_error
Error occurred during the purchase of \'%1s \'
Restoring transactions.
An error occurred while restoring Displayed when an error occurred during transactions. a restore transactions request.
48
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 Drawables

The following drawables can be customized for the Subscription Sign-In window (see example on the following 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. close button.
closebutton.png. The image used for the headerbackground.png. The background
of the header.
logindialogbackground.png. The back-
ground of the Subscription Sign In window. My Password button. Image. Image
stretchablerectbutton.9.png. The I Forgot textfield_activated_holo_light.9.png. textfield_default_holo_light.9.png. Image
used to indicate that the text field is active (cursor is placed in the field). light.9.png. Image used to indicate that the text field is not active (cursor is not placed in the field).
textfield_disabled_focused_holo_
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
49
Text
The 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.
50
A E
headerbackground B closebutton C checkbox stretchablerectbutton.9 F logindialogbackground
stretchablestorebutton.9
Figure 10.1. The Subscription sign in window
51
10.2 Library Settings

The following DMSettings can be changed for the Library:
Store/Library cache time. The time after
library_shelf_landscape.png. (Honeycomb
only) The image used for the Library shelfs when the device is held in landscape orientation. only) The image used for the Library shelfs when the device is held in portrait orientation. for the Filter lists.
library_shelf_portrait.png. (Honeycomb
which issues that are part of a subscription are refreshed in the Library. Out button in the Library.
Enable login button. Enables the Log In/Log Enable library filter. (Honeycomb only)
popup_background.9.png. Background
Enables the Library filter in the Library.
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. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
Enable library segment filter. (Honeycomb
only) Enables the Library Segment filter available in the Library.
Drawables
The 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. used for the download Pause button.
librarydownloadpause.png. The image librarydownloadrefresh.png. The image
used for the download Resume button.
library_shelf_issue_drop_shadow.png.
(Honeycomb only) The image used for the dropshadow behind the issue preview.
52
Text
The following strings can be customized for the Library:

Installing. The installing label. Issue options. Text for the context menu
The following strings can be customized for the Library Filter:

All Segments. (Honeycomb only) The value
in the Segment Filter for choosing all Segments. Library Filter for choosing all issues.
which is activated by tap and hold on an issue. when deleting an issue from the Library. button.
All issues. (Honeycomb only) The value in the
Delete issue. Command in the context menu Sign In. (Froyo only) The label for the Sign In Sign Out. (Froyo only) The label for the Sign
Out button.
53
A B B C
storeheader
stretchablestorebutton.9
topbar
Figure 10.2a. The Library view (Froyo version)
54
A B C D
C B
B
A
librarytopbar
libraryshelflandscape.png
libraryshelfissuedropshadow
popupbackground.9
Figure 10.2b. The Library view (Honeycomb version)
55

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
56
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
A
11.1.2 Audio Settings Audio keeps playing while swiping from page to page within the same article
audioplayenabledicon
Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user subsequently 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
Figure 11.1.1. The audio play enabled icon
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. shown when the audio file is being played. when the audio file is being played.
audioplayenabledicon.png. The audio icon audiostopenabledicon.png. The audio icon
Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions. The audio overlay drawables are stored in the res/drawable-nodpi folder.
57
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 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 following property: <backgroundaudio>true</backgroundaudio> Possible values: true: controls will be hidden false: controls will be shown5 Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=95> <url>images/story_23/audio_95.mp3</url> <autoplay>false</autoplay> <backgroundaudio>true</backgroundaudio> </audio> </object>
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. C r e a t e a n e w c l a s s i n t h e Reader App. This new class implements ExternalDMObjectInterface Step 2. I m p l e m e n t DMObjectInterface. the External-
See the Android Reader App Custom Objects java doc for a description of the interface (downloadable from the Digital Magazine section of the Enterprise 7 Product page on the Community site). 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), class.
Key: a string you can use to refer to your
The controls are also shown when the backgroundaudio property is not included
5
Step 5. 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.
58
11.3 Downloading Methods

Downloading of magazines can be offered in one of two ways:
Non-progressive Progressive
11.3.1 Non-progressive Download Method

For the non-progressive download method, the following can be configured:
Settings Drawables
Each is described in detail below.
Auto open magazine
As soon as the download and installation process is complete, 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:

Drawables
The following drawables can be customized for the progressive 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. ress bar.
downloadleft.9.png. The download prog-
59
librarydownload.png. The Start Download
button.
11.3.2 Progressive Download Method

For the progressive download method, the following can be modified:
Drawables Settings Strings
librarydownloadpause.png. The Pause
Download button. Download button.
librarydownloadrefresh.png. The Resume
These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.
Drawables
The following drawables can be customized for the progressive 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. ress bar. button.
downloadleft.9.png. The download proglibrarydownload.png. The Start Download librarydownloadpause.png. The Pause
Download button. Download button.
librarydownloadrefresh.png. The Resume
These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.
60
Settings
As soon as the issue or Segment is readable during the download process, it can be made to open automatically. The following conditions exist:
To have an issue automatically opened, set the following DMSetting:

Strings
The 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>
61
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 projects which have Store functionality, namely the Pro and Subscriptions frameworks. Making use of this feature involves performing the following 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 public 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 inapp billing related software strings in the Reader App as explained in section 9. The Store.
62
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.
A
(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
Close button
Figure 11.5. On Froyo, the Newsfeed page is displayed as an overlay on top of the magazine
63
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 indication can appear are for example:
The Store Frames with streaming video Frames with streaming audio Newsfeed windows Widgets Web Elements
The No Internet Connection drawables are stored in the res/drawable-nodpi folder. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
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. displayed in the bar.

A B
nointernetconnectionlabel.png. The text
A B
nointernetconnectionbackground nointernetconnectionlabel
Figure 11.6. The No Internet Connection Drawables
64
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 righthand 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.
A
To enable Scrolling Indicators for Scrollable Areas, enable the following DMSetting:
Colors/ Enable native scrolling indicators
A
A
Scrolling indicator
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
65
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.
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/
A
A
textviewmodenotsupported.9.png
slideshowicon
Figure 11.5. The Slide Show icon
The Slide Show drawable is stored in the res/drawablenodpi folder. The drawable to customize is:
slideshowicon.png. The overlay shown in
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.
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. For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
66
11.10 Video
For the video functionality, the following can be customized:
Overlay drawables Video Player drawables Hiding embedded video controls
67
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.
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.
videoDisabledIcon
videoDEnabledIcon
Figure 11.10.1. The video disabled and enabled icons
Overlay drawables are stored in the res/drawable-nodpi folder. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions. The following drawables can be customized:
videodisabledicon.png. The overlay shown
on top of a video when it is not possible to play
68
11.10.2 Video Player Drawables

Video player drawables are icons that appear as the controls for controlling the video playback. Video player drawables are stored in the These drawables are stored in the res/drawable-nodpi, res/drawable-nodpiv8 and res/drawable-nodpi-v11 folders. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions. The following drawables can be customized:
audiocontrolsliderbutton.png. The button A B C D E F G
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).
A prev B downloadbackleft.9 C pause D audiocontrolsliderbutton E next F downloadbackground G maximize
Figure 11.10.2. The video control drawables
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. video.
next.png. The icon used for forwarding the 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.
69
11.11 Hiding Embedded Video Controls

The controls for an embedded video can be hidden so that they dont appear on the page. This can be controlled 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 1. Open the exported magazine.xml file in a plain-text editor. Step 2. Locate the created video object by searching for <type>movie</type>. Step 3. In the movie id section, add the following property: <moviecontrols>false</moviecontrols> Possible values: true: controls will be shown6 false: controls will be hidden (continues on next page)
Example: <object> <id>96</id> <type>movie</type> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <movie id=95> <url>images/story136/video_96.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 controls will be shown, else the user would not be able to leave fullscreen mode.
The controls are also shown when the moviecontrols property is not included
6
70
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
These drawables are stored in the res/drawable-nodpi folder. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
available state.
closebuttondefaultstate.png. The button
to close the window with.
backgrey
closebuttondefaultstate
Figure 11.12. The Web Elements drawables
71
10 Building the Android Reader App

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). 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:
Honeycomb.
and Froyo are located in the drawable-nodpi folder. located in the drawable-nodpi-v11 folder. the drawable-nodpi-v8 folder.
Any Honeycomb-specific drawables are Any Froyo-specific drawables are located in The drawable-hdpi, drawable-mdpi and draw-
253
Android
Chapter 10 Building the Android Reader App
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
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://developer.android.com/sdk/installing.html.
functionality functionality
Preparing a Reader App with Store
254
Android
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 following folder in Eclipse:
customerapp/assets/magazine
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. Se nd a n e -mail to s e r v i c e s@ woodwing.com stating that you would like to distribute a Reader App by making use of the Content Delivery Platform. You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform (WoodWing will do this for you). When processed, you will be sent the relevant settings required for inclusion in the build:
Step 3. Build the project. (See section 3. Building.)
A secret key for the Reader App, as
A product ID for the Reader App, as
Step 2. Import the Pro or Subscription project into your workspace. Step 3. Us e th e s et ti n g s p rov i d e d by WoodWing for building your Reader App. (See section 2. Building.)
255
Android
The Content Delivery Platform URL
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
256
Android
11 Customizing the HTML5 Reader App

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 following main customization areas are defined:
General App settings Navigation General App features
257
HTML5
Chapter 11 Customizing the HTML5 Reader App
1. Required Tools
CSS editor. For editing CSS files. Use your
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
favorite editor for this task. favorite editor for this task.
Image editor. For editing images. Use your Config files editor. For editing configuration
files. Use your favorite editor for this task, such as an XML editor or plain-text editor.
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. ality related to audio.
audio.css. Used for controlling functionbase.css. Used for controlling the gen-
eral appearance and functionality of the Reader App. use.
config.css. This file is reserved for future flipview.css. Used for controlling func-
tionality related to the Flipview. tionality related to Hotspots.
hotspot.css. Used for controlling funcnavigator.css. Used for controlling
functionality related to the Story and Page Navigators. trolling the scrollbars of Scrollable Areas.
scrollarea-images.css. Used for con-
258
HTML5
slider.css. Used for controlling func-
tionality related to the Page Scrubber in the Flipview. functionality related to Slide Shows. Navigation bar and top Toolbar. ality related to video.

Images. Interface components such as but-
slideshow.css. Used for controlling toolbar.css. Used for controlling the video.css. Used for controlling functionweblink.css. Used for controlling func-
tons, icons, logos and headers.
Colors. The color of text and backgrounds. Text. The text of specific titles as they appear
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. functionality of the Reader App: reader/config folder
For some features, making changes in only one area will be sufficient, whereas other features require changes in multiple places.
Configuration files. Used for changing the DMSettings.plist. Located in the
259
HTML5
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. Take note of the following:
Renaming images is not allowed since the
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.
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.
260
HTML5
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 therefore 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.)
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 properties. For more information about setting these values, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration.)
Story title. The title for a story below a A
B
A
C
C
Server property
Dossier property
Image with text
Figure 3.3. Text originates from various sources in the system
261
HTML5
3.4 Settings
Some of the customizations for the Reader App are performed 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 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.
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.
262
HTML5

General appearance. The general look of
5.1 General Appearance

The following general Reader App features relating to its appearance can be customized (see image on the following page):
the Reader App.
Reader App background

CSS file: base.css Selector: body
Background image: bg-body.png Background color Background gradient: bg-body-gradient.png
Reader App page container

CSS file: base.css Selector: body Class selector: .container
background-color border-color
Background loader image

CSS file: base.css Selector: body Class selector: .loading
Loader image: loader.gif
Unsupported Browser Web page
reader/unsupportedbrowser.html
263
HTML5
When 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:
Custom scrollbars
Scrollbars appear in the following locations:

Long pages (pages that are longer than the Scrollable areas
defined height of the page area)
These are controlled by the following images and CSS references:
Vertical scrollbar
png
Images: scrollbar-thumb.png, scrollbar-track. CSS references:
CSS files: base.css, scrollarea-images.css Class selector: .scrollable
Horizontal scrollbar
Images: scrollbar-thumb-hor.png, scrollbarCSS references:
track-hor.png
CSS files: base.css, scrollarea-images.css Class selector: .scrollable
264
HTML5
A
A
B
B
C border-color
C
D background-color
D
bg-body.png
loader.gif
Figure 5.2. Customizing the general appearance of the HTML5 Reader App
265
HTML5
6. Navigation
Story navigation vs page navigation Navigation bar Flipview Top Toolbar Hotzones Navigation Zones

user navigates horizontally (from left to right or right to left) page), the user navigates vertically (up/ down or down/up)
Each aspect is explained in the following sections. 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.
Page navigation. In this configuration, navi-
To navigate from page to page, the user
navigates horizontally (from left to right or right to left) sible by means of a finger swipe or by using the mouse/keyboard.
Navigating from story to story is not pos-
For more information about Story Navigation and Page Navigation, see chapter 3, The Concept section 3, Stories, Pages, Sections and Segments.
To enable Page navigation, select the following option in the DMSettings.plist file:
266
HTML5
By default, the Reader App is set to Story navigation.
6.2 Navigation Bar

The Navigation 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, 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:
6.2.1 Items
page.
FlipView. For bringing up the Flipview.
in which they appear. buttons.
Images. The appearance and position of the
Removing/adding/reordering buttons
To remove or add a button, or change the order in which they appear, modify the content by using a suitable XML editor.
267
HTML5
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 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. The following images can be customized (listed in alphabetical order):
flipviewHoverIcon.png. The icon for the
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. button, linking to the page with the table of contents. Contents button in its selected state.
tocIcon.png. The icon for the Contents
tocSelectedIcon.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
flipviewSelectedIcon.png. The icon for the
homeHoverIcon.png. The icon for the Home
button when the mouse is hovered over it. ton, linking to the cover of the magazine.
homeIcon.png. The icon for the Home but-
A
A
homeHoverIcon
tocSelectedIcon
flipviewIcon
Figure 6.2.2. The Navigation bar images
268
HTML5
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.
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
Flipview Header
Page scrubber
Figure 6.3. The Flipviewer appears when tapping the Contents button in the Navigation bar
269
HTML5
6.3.1 Background
The following areas of the background can be customized:
6.3.2 Header
The Flipview Header contains the following editable components:
Flipview background
The background image of the Flipview. Image: flipviewBackground.png CSS reference: CSS file: flipview.css Class selector: .flipviewpanel
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
The close button to close the Flipviewer with. Image: flipview-horizontal-button-close.png CSS reference: CSS file: flipview.css Class selector: .flipview-closer
A B
flipviewBackground
Figure 6.3.1. The Flipview images
Figure 6.3.2. The Flipview header components
270
HTML5
Issue description
flipview-horizontal-button-close
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.css Class selector: .flipview-active-thumb
border-color
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. The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
Thumbnail border A
Figure 6.3.3. A border is shown around a thumbnail to indicate which story currently is viewed
Figure 6.3.4. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom) 271
HTML5
6.3.5 Story Bullets

A story bullet is shown in front of each story title.
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.) The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
flipview-horizontal-bullet-circle
Figure 6.3.5. A story bullet is shown in front of each story title A
The story bullet is controlled by the following image and CSS reference: Image: flipviewBullet.png CSS reference: CSS file: flipview.css Class selector: .flipview-bullet
B
A B
Story Description property Story Description displayed in Reader
Figure 6.3.6. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
272
HTML5
6.3.7 Page Scrubber

The Page Scrubber is used for quickly scrolling through the pages of the Page Viewer / Story Viewer.
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 height Left area height
Height of the bottom Hotzone. Default value: 80 (in pixels). Height of the left Hotzone. Default value: 44 (in pixels).
A
A
B
B
Right area height
Height of the right Hotzone. Default value: 44 (in pixels).

slider-button
slider-bg
Figure 6.3.7. The Page Scrubber components
Note that Hotzones only work on touchscreen devices, not on a desktop PC/laptop (for these systems, Navigation zones are used, see section 6.5 Navigation Zones).
The Page Scrubber is controlled by the following image sand CSS references:
Page Scrubber button
Image: slider-button.png CSS reference:
Page Scrubber background

Image: slider-bg.png CSS reference:
CSS file: slider.css Class selector: .slider-panel
273
HTML5
CSS file: slider.css Class selector: .slider-handle
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.
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.css Class selectors: .navigator-left, .navigator-leftactive
Right Navigation Zone
Images: bg-rail.png, arrows-click.jpg CSS references:
CSS file: navigator.css Class selectors: .navigator-right, .navigator-rightactive
Top Navigation Zone

CSS references:
Images: bg-rail-vertical.png, arrows-click-
vertical.jpg
Figure 6.5. The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)
CSS file: navigator.css Class selectors: .navigator-top, .navigator-topactive
Bottom Navigation Zone

CSS references:
Images: bg-rail-vertical.png, arrows-click-
CSS file: navigator.css Class selectors: .navigator-bottom, .navigator-bottomactive
274
HTML5
vertical.jpg
6.6 Top Toolbar

Customizing the top Toolbar can be done by changing the following:
6.6.1 Availability
By default, the top Toolbar is disabled. It can be enabled by the following setting in the DMSettings file:
Toolbar.
Images. The icons of the buttons and images.
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. button.
tocTableIcon.png. The icon for the TOC tocTableSelectedIcon.png. The icon for the
TOC button in its selected state.
275
HTML5

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
A
audio-play-overlay
Figure 7.1. The audio play enabled icon
The audio overlay images are controlled by the following images and CSS references:
Audio play overlay
The audio icon shown when the audio file is not being played. Image: audio-play-overlay.png CSS reference: CSS file: audio.css Class selector: .audio-adornment-start
Audio stop overlay
276
HTML5
The audio icon shown when the audio file is being played. Image: audio-stop-overlay.png CSS reference: CSS file: audio.css Class selector: .audio-adornment-stop
7.2 Slide Shows

For Slide Shows, the following can be customized:
Navigation zones Overlay images
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.
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 section 6.5 Navigation Zones.
A
A
slideshowIcon
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.css Class selector: .slideshow-adornment
277
HTML5
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

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:
the top Toolbar.
TOC List

Enabling the functionality Changing the story text
278
HTML5
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.
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.css Class selector: .video-adornment
C D A
Figure 7.3.2. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for displaying the story title and description in the TOC List (bottom)
Figure 7.4. The video play icon
Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
279
HTML5
A Story Description property B Story Description displayed in Reader C Story Title property D Story title displayed in Reader
videoEnabledIcon
12 Building the HTML5 Reader App

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 single-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 3. Paste the content into the following location of the Reader App:
./content
This is the default location; custom locations can be defined by means of the following setting in the DMSettings file:
M ag a z i n e Co n f i g u r a t i o n U RL .
Location of the issue.json configuration file.
280
HTML5
Step 2. Open the html 5/content folder and copy its content.
Magazine Content URL. Location of
the magazine content (the images and pages folders).
281
HTML5
13 Distributing Reader Apps Without Store

Reader Apps which do not include Store functionality are distributed with the magazine content included as part of the app. 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.
282
Chapter 13 Distributing Reader Apps Without Store
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 process, 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://itunesconnect.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 display in the App Store. Step 3. Upload the Reader App to iTunes by using Apples 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.
283
14 Distributing Reader Apps With Store

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.
284
Chapter 14 Distributing Reader Apps With Store
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
The Content Delivery Platform takes care of the following tasks:

It manages the information about the Reader It manages the information about the issues It provides the magazine content It allows you to add development devices:
App
device from the App Store.
available to the Reader App
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.) received from the Content Delivery Platform.
When downloading, the magazine content is
This process is displayed in figure 1 below.
devices with which issues can be viewed that have not yet been published. Also, the payment 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.
Availability
The Content Delivery Platform is available as a service hosted by WoodWing. For more information, see http://www.woodwing.com/en/digital-magazine/ content-delivery-service.
Overview of available issues Magazine content

Content Delivery Platform Digital device
Reader App without content
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
285
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.
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 Apps
For submitting Android Reader Apps, follow the guide lines as provided by the relevant store.
Submitting to iTunes Connect
To submit the Pro, Framework, Subscription, or Apple Subscription Reader App to the iTunes App Store, perform the following steps: For a detailed, step-by-step guide of this whole process, 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 Apples Application Uploader. After completing the upload process, the Reader App needs to be approved by Apple.
The Store is available as an HTML Store and does not necessarily have to be integrated in the Reader App, it can also be hosted separately.
1
Step 4. When one or more issues have been made available for download (see section 4.
286
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). by the relevant store.
Android: Follow the instructions as provided
287
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. Each step is explained in the following sections.
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
4.1 Registering With iTunes Connect

(iPad Reader App version only) This step only needs to be performed when the user will have to purchase the issue. 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 purchase, follow the steps as outlined in the iTunes Connect Developer Guide. (see chapter 1, Intro section 3, Additional Documentation for a download link).
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.
288
A Layout Sizes
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 supports 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.
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.
1
289
Appendix A Layout Sizes
1.1 Device Settings

Below is a listing of the settings used for some popular devices:
1.2 Page Sizes

The tables on the following page show popular page dimensions converted to various units of measurements based on different dpi settings.
Apple iPad
Width: 1024 pixels Height: 768 pixels Dots per inch: 132 dpi
However, due to the height of the iPads 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 Galaxys toolbar of 38 pixels, the actual working area is as follows: Page in landscape orientation: Width: 1024 pixels Height: 562 pixels Page in portrait orientation: Width: 600 pixels Height: 986 pixels
290
Appendix A Layout Sizes
Table 3.1a. Page dimensions converted to various units of measurements for use on the iPad Size dpi 748 pixels 768 pixels 1004 pixels 1024 pixel 132 132 132 132 Picas 34p0 34p10.9 45p7.636 46p6.5 Points 408 pt 418.9 pt 547.6 pt 558.5 pt Inches 5.6667 in 5.8181 in 7.6061 in 7.7569 in Value Millimeters 143.933 mm 147.779 mm 193.194 mm 197.026 mm Centimeters 14.3933 cm 14.779 cm 19.3194 cm 19.7026 cm
Table 3.1b. Page dimensions converted to various units of measurements for use on the Samsung Galaxy Size dpi 562 pixels 600 pixels 986 pixel 1024 pixels 169 169 169 169 Picas 19p11.432 21p3.621 35p0.071 36p4.26 Points 239.4 pt 255.621 pt 420.071 pt 436.26 pt Inches 3.3254 in 3.5503 in 5.8343 in 6.0592in Value Millimeters 84.466 mm 90.178 mm 148.192 mm 153.903mm Centimeters 8.4466 cm 9.0178 cm 14.8192 cm 15.3903 cm
291
B Creating Text View Markup Articles

This appendix describes how to create fully marked-up articles for use in the Text View mode of the iPad Reader App. 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 created 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 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
strike-through
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.
This feature is expressed in a HTML element and can therefore be styled as such
1
292
Appendix B Text View Markup Articles
2. Requirements
In order to make use of this feature, the following is required:
Enterprise Server 7.0.8, configured for digital
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
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
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 companys setup) Once the article is created, check that no article components containing an image exist in the article by verifying the articles 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:
293
By assigning an Element label to an
article component. The name of the Element label is then mapped to the CSS style. styles. The name of the paragraph or character style is then mapped to the CSS style.
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/
By applying paragraph and character
By using a combination of both methods.
Either method can be configured to be used on the following levels:

System wide Per Brand Per Issue
flattened (meaning that the applied formatting is lost) and Web styles (CSS) are used instead. respected. (For limitations concerning using overrides, see section 4. About Overrides.)
Manually applied overrides to styles are
This method helps in standardizing the method of using the Text View Markup feature while altering the look and feel of the publications it is applied to. Each method is further explained in the following sections.
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.
294
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
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
required InCopy
Applying specific styles unknown to InDesign/
style in order to support zooming on the digital device. CSS styles.
The method works by applying paragraph styles, character 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
Font colors cannot be overridden through
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 corresponding CSS style. Check with the administrator which style should be applied in order to achieve a particular styling effect.
295
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
6. Known Limitations
The following are not supported by the Text View Markup feature:
Font family mapping Font mapping by using the DigitalMagazineInline images Shapes (including lines) Text indents Cross-references Text frame properties such as multiple Print-specific features such as tracking, kern-
Defs.xml file
mapped to CSS styles.
Bodies, headers and footers are supported. Table features such as merged cells and bor-
columns
ders are not supported.
ing, scaling, baseline shift, etc.
296
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 an image via CSS
Images 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 background image/pattern. Check with your system administrator if images are added in this way.
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.
297
C Image Dimensions
This appendix provides an overview of the dimensions of the customizable Reader App images. Some images used on Android devices are NinePatch graphics; these are identifiable by their f i l e n a m e w h i c h e n d s w i th a 9 (s u c h a s downloadleft.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 dimensions used for the iPad Reader App (in alphabetical order).
14
Appendix C Image Dimensions
Table 1. iPad image dimensions (in pixels) Dimensions Image name accountIcon.png accountSelectedIcon.png audio_controller.png audioControlBG.png audioControlDisabled.png audioControlPlay.png audioControlSliderBGDark.png audioControlSliderBGLight.png audioControlSliderButton.png audioControlStop.png audioPlayDisabledIcon.png audioPlayEnabledIcon.png audioStopEnabledIcon.png audioTopBarIcon.png audioTopBarSelectedIcon.png back_grey.png back_white.png backIcon.png backSelectedIcon.png bookmarkAdd.png bookmarkTopBarIcon.png bookmarkTopBarSelectedIcon.png bottombar.png checkbox.png checkboxChecked.png 16 16 47 47 20 52 52 not used 16 16 (Continues on next page) 404 37 37 32 32 14 37 36 36 36 50 50 not used not used 50 50 20 47 47 width 138 138 not used 146 28 28 9 9 14 28 36 36 36 47 47 height 92 92
15
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name close_white.png closeButton.png closeButtonDefaultState.png customicon.png customselectedicon.png default_thumb.png Default-Landscape.png Default-Portrait.png Default.png downloadbackground.9.png downloadleft.9.png downloadFailedErrorLabel.png downloadFailedReloadButton.png downloadFailedReloadButtonPressed.png facebook.png feedIcon.png feedSelectedIcon.png flipviewBackground.png flipviewBullet.png flipviewCloseButton.png flipviewIcon.png flipviewSectionBackground.png flipviewSelectedIcon.png flipviewSelectedSectionButton.png forwardIcon.png 75 75 1024 9 21 75 768 75 1 47 303 44 44 not used 50 50 225 9 21 50 23 50 23 50 (Continues on next page) 1024 768 768 not used not used 30 31 31 748 1024 1024 34 30 not used not used width not used 35 30 height
16
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name forwardSelectedIcon.png galaxytoc.png gridViewBackground.png gridViewBackgroundFirstRow.png headerBackground.png headerBarShadow.png helpIcon.png helpSelectedIcon.png homeIcon.png homeSelectedIcon.png Icon.png issueShadow.png issueShadowLarge.png libraryDownload.png libraryDownloadPause.png libraryDownloadRefresh.png libraryEmptyShelf.png libraryFirstShelf.png libraryIcon.png librarySelectedIcon.png libraryShelf.png libraryUpdateIcon.png libraryUpdateSelectedIcon.png loginDialogBackground.png line.png 768 768 325 1 75 75 75 75 72 181 475 75 75 75 1024 1024 75 75 1024 75 75 325 not used (Continues on next page) width 47 not used 299 351 77 8 50 50 50 50 72 11 33 40 40 40 220 351 50 50 300 50 50 355 height 50
17
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name maximize.png minimize.png next.png noInternetConnectionBackground.png noInternetConnectionLabel.png pageScrubberBackground.png pageScrubberButton.png pageScrubberTrackLeft.png pageScrubberTrackLeft9.png pageScrubberTrackRight.png pageScrubberTrackRight9.png passDialogBackground.png pause.png play.png prev.png previewHeaderBackgroundLandscape.png previewHeaderBackgroundPortrait.png previewShadowLandscape.png previewShadowPortrait.png progressiveDownloadOverlayBar.png segmentedControlGridButton.png segmentedControlSingleIssueViewButton.png segments_shadow.png segments_stack_background.png shadowBarVertical.png 1 1 8 1 1024 13 13 768 189 8 325 not used not used not used 562 249 1 8 111 13 12 22 228 1 (Continues on next page) 32 not used 330 6 196 1024 26 32 not used 9 width not used not used not used 164 14 37 26 9 height
18
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name shareFacebook.png shareFacebookDisabled.png shareMail.png shareMailDisabled.png shareTableIcon.png shareTableSelectedIcon.png shareTwitter.png shareTwitterDisabled.png singleIssueViewBackground.png singleIssueViewBackgroundLandscape-old.png singleIssueViewBackgroundLandscape.png singleIssueViewBackgroundPortrait.png slideshowIcon.png storeclosebutton storeHeader.png storeIcon.png storeNoInternetErrorBackground.png storeNoInternetErrorLabel.png storeSelectedIcon.png stretchablePostButton.png stretchablerectbutton.9.png stretchableStoreButton.png stretchablestorebutton_disabled.9.png stretchablestorebutton.9.png stretchableSubscribeButton.png 20 13 not used not used 38 (Continues on next page) 1024 75 1 273 75 20 not used 26 width 54 54 54 54 55 55 54 54 768 768 1024 768 36 not used 42 50 58 20 50 36 height 54 54 54 54 50 50 54 54 614 704 661 917 36
19
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name stretchableSubscriptionStoreButton.png subscriptionFormBackground.png textViewHeader.png textViewImagesShadow.png tocIcon.png tocSelectedIcon.png tocTableIcon.png tocTableSelectedIcon.png tocThumbBackground.png tocThumbBackgroundVertical.png transparentImageForFlipviewButton.png topbar.png twitter.png UpdatableIssueIcon.png videoDisabledIcon.png videoEnabledIcon.png 23 36 36 width 20 1 768 768 75 75 47 47 78 57 150 not used not used 23 36 36 height 36 145 20 20 50 50 50 50 57 76 110
20
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) Image name accountdisabledicon.png accounticon.png accountselectedicon.png action_bar_action_overflow_pressed_background.png action_bar_action_pressed_background.png action_bar_tab_selected_pressed.png action_bar_tab_selected.png action_bar_tab_unselected_pressed.png action_bar_tab_unselected.png audiocontrolsliderbutton.png audioplaydisabledicon.png audioplayenabledicon.png audiostopenabledicon.png back_white.png backdisabledicon.png backicon.png backselectedicon.png bottombar.png checkbox.png checkboxchecked.png closebutton.png closebuttondefaultstate.png 47 47 1 16 16 34 32 14 36 36 36 54 not used 50 50 50 16 16 35 32 16 16 34 32 75 75 not used not used not used not used not used not used 14 36 36 36 32 width not used 51 50 1 1 1 1 1 1 14 36 36 36 54 47 47 not used not used 16 16 35 32 height Android 1.3 (Honeycomb) width 75 75 not used 47 56 56 9 56 3 14 36 36 36 32 50 50 height 51 51
(Continues on next page)
21
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name customicon.png customselectedicon.png downloadbackground.9.png downloadfailederrorlabel.png downloadfailedreloadbutton.png downloadleft_disabled.9.png downloadleft.9.png feedicon.png feedselectedicon.png flipviewbackground.png flipview_bottom_shadow flipviewbullet.png flipviewclosebutton.png flipview_close_background.png flipview_close_icon.png flipview_section_background_unselected flipviewicon.png flipviewsectionbackground.png flipviewselectedicon.png flipviewselectedsectionbutton.png forwarddisabledicon.png forwardicon.png forwardselectedicon.png gridviewbackground.png gridviewbackgroundfirstrow.png headerbackground.png 323 47 47 not used not used 77 323 1 75 1 75 1 not used 50 50 9 21 not used not used 39 50 23 50 23 1 55 47 not used not used not used 77 (Continues on next page)
22
Android 1.3 (Honeycomb) width 75 not used 15 1 24 15 15 75 not used 3 1 9 not used 228 20 1 75 1 not used 23 50 50 29 20 39 50 23 225 4 9 11 101 28 11 11 50 height 50
width 75 75 15 1 24 17 15 75 75 3 not used
height 50 50 11 101 28 13 11 50 50 225 9 21
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name headerbarshadow.png helpicon.png helpselectedicon.png homeicon.png homeselectedicon.png icon.png (res/drawable-ldpi) icon.png (res/drawable-mdpi) icon.png (res/drawable-hdpi) librarydownload.png librarydownloadpause.png librarydownloadrefresh.png library_login_icon.png library_logout_icon.png library_shelf_issue_drop_shadow.png library_shelf_landscape.png library_shelf_portrait.png library_top_bar.png libraryicon.png libraryselectedicon.png logindialogbackground.png magazine_selected_icon.png magazine_icon.png maximize.png minimize.png next.png nointernetconnectionbackground.png 75 75 325 75 72 47 47 67 6 75 75 75 75 36 48 72 60 60 60 not used not used not used not used not used not used 50 50 355 50 50 47 47 47 164 72 47 47 67 6 325 not used 50 47 47 47 164 width not used 50 50 50 50 36 48 72 35 35 35 36 48 72 60 60 60 75 75 223 1280 800 1 75 not used 355 75 not used 36 48 72 35 35 35 51 51 239 364 364 42 50 75 not used 50 height Android 1.3 (Honeycomb) width not used 50 height

23
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name nointernetconnectionlabel.png pagescrubberbackground.png pagescrubberbutton.png pagescrubbertrackleft9.png pagescrubbertrackright9.png passdialogbackground.png pause.png play.png popup_background.9.png prev.png progressivedownloadoverlaybar.png slideshowicon.png storeheader.png storeicon.png storeselectedicon.png stretchablerectbutton.9.png stretchablestorebutton_disabled.9.png stretchablestorebutton.9.png textfield_activated_holo_light.9.png textfield_default_holo_light.9.png textfield_disabled_focused_holo_light.9.png textfield_disabled_holo_light.9.png textfield_focused_holo_light.9.png textfield_multiline_activated_holo_light.9.png textfield_multiline_default_holo_light.9.png 67 1 36 1024 75 75 12 17 17 not used not used not used not used not used not used not used 42 21 not used not used not used not used (Continues on next page) 67 67 not used 47 91 36 42 50 50 28 22 22 12 17 17 not used 18 18 75 not used 28 22 22 width 196 1 26 34 34 not used 47 47 67 67 70 67 1 36 not used 50 height 14 37 26 26 26 Android 1.3 (Honeycomb) width 196 1 26 34 34 not used 47 47 22 47 91 36 height 14 37 26 26 26
24
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name textfield_multiline_disabled_focused_holo_light.9.png textfield_multiline_disabled_holo_light.9.png textfield_multiline_focused_holo_light.9.png textview_mode_not_supported.9.png tocicon.png tocselectedicon.png topbar.png videodisabledicon.png videoenabledicon.png 3 75 75 1 36 36 width not used not used not used 3 50 50 48 36 36 36 36 3 75 not used not used 36 36 height Android 1.3 (Honeycomb) width not used not used not used 3 50 height
25
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 bg-rail-vertical.png bg-rail.png button.png checkbox.png checkboxChecked.png checkmark.png closeButton.png gridview-icon-active-button.png gridview-icon-button.png gridview-item-shadow.png gridview-shelf.png GridViewIcon.png single-bg.jpg single-shelf.png SingleViewIcon.png Width 1600 48 101 16 16 16 36 53 53 164 2 13 1024 1024 13 Height 48 1600 28 16 16 16 36 28 28 9 290 13 470 62 12
4. 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 arrows-click-vertical.png arrows-click.jpg audio-play-overlay.png audio-stop-overlay.png bg-body-gradient.png bg-body.png bg-img.png bg-rail-vertical.png bg-rail.png close-button.png flipviewBackground.png flipviewBullet.png flipview-horizontal-button-close.png flipview-horizontal-thumb-bg.png flipviewHoverIcon.png flipviewIcon.png flipviewSelectedIcon.png homeHoverIcon.png homeIcon.png homeSelectedIcon.png loader.gif loader-small.gif scrollbar-thumb.png Width 48 56 36 36 1 10 4 1600 48 36 1 9 34 165 111 111 111 101 101 101 32 16 9 Height 56 48 36 36 1800 10 4 48 1600 36 208 9 35 250 63 63 63 62 62 62 32 16 91
(Continues in next column)
26
Table 4. HTML5 Reader App image dimensions (in pixels) - continued Image name scrollbar-thumb-hor.png scrollbar-track.png scrollbar-track-hor.png slider-bg.png slider-button.png slideshow-icon.png tocTableHoverIcon.png tocTableIcon.png tocTableSelectedIcon.png tocHoverIcon.png tocIcon.png tocSelectedIcon.png video-play-overlay.png Width 91 9 571 1 24 36 55 55 55 111 111 111 36 Height 9 571 9 34 24 36 38 38 38 62 62 62 36
27
D Working With Widgets

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.
28
Appendix D Working With Widgets
2. File Structure
A Widget contains the following files and folders:
HTML file. The page in which the component
3. Creating the manifest.xml File

The manifest.xml file is a configuration file contain a variable 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 information, 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 Number File (can be filtered by type and format) FileList (can be filtered by type and format) Color (RGB) Group
is embedded. It is this page which is placed in the assigned frame on the layout. describing the fields which can be modified.
A manifest.xml file. A configuration file One or more Javascript files. CSS files. (Optional) Sources files. Depending on the type of
string)
Widget, additional files such as images, videos, etc, are included.
All files are created in the regular manner of creating 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
For a detailed description of the use of these fields, see the wwdmmanifestv1.xsd file (available from the Enterprise Development page on the Community Site http://community.woodwing.net/products/Enterprise%20 7.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.
(see above but with the exception of the manifest.xml file). tain the results of the settings chosen in the Widget panel in InDesign. Both have the same content. by making use of the available options in the Widget panel in InDesign.
A config.xml and config.json file. These con-
All additional files (if any) that were linked to
29
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.
30
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.
31
E The DMSettings File

This appendix provides a complete overview of all the settings as they are available in the DMSettings file. The DMSettings files are essentially XML files and can be shared between the different Reader Apps aimed for use on different platforms (iPad, Android, etc). The advantage of sharing the same source file is that similar functionality can be ensured, but keep in mind of course that not all features are supported on each platform.
1. File Structure
The settings in the DMSettings file have been grouped together as follows:
For iPad/Android
Share toolbar. Settings for the Sharing
Content toolbar.
Store. General store settings, including set-
tings related to subscriptions. Reader App.
Navigation. Settings for navigating the Colors. Controls the colors for various Reader
components.
Fonts. Settings for using fonts. Intents. Controls functionality for specific
buttons.
TOC Popup. Settings for the TOC List. Bookmark Popup. Set tings for the
Bookmarks List.
Hotzones. Hotzone settings. Flipview. Settings related to the Flipview. 32
Appendix E The DMSettings File
Library. Settings related to the Library. Metrics. (Android only) Settings related to the
2. Features by Platform
Various versions of the Reader App exist (for iPad, Android devices and now also for HTML5 Web browsers). While they share most of the functionality, differences also exist. These differences could be because features are specific to a particular platform only, or because the development of one Reader App is not yet as advanced of another. For a comparison of each DMSettings option and their availability for each Reader App version, see table 2 on the next page. In this table, the features for the Android Reader App are presented for each compatible Android operating system.
metrics of the targeted device.
Web Element Popup. Settings related to
controlling the Web Element pop-up.
Newsstand. Settings related to the Newsstand feature of iOS 5.
For HTML5
files.
Content. Settings for the location of source Hotzones. Hotzone settings. Navigation. Settings for navigating the
Reader App.
Resolution. Controls the size of the area in
which the page is displayed.
Tracking. Settings for analytics services.
Each group is described in the following sections.
33
Table 2. DMSettings option - compared by Reader App Feature Enable partial page sharing Share page Share Toolbar Enable share toolbar Enable twitter Enable facebook Enable email sharing Force non-progressive downloads Resumable downloads Subscriptions Switch to library after login Library cache time Disable offer in portrait mode Open subscription page in Safari Store Enable subscribe button Enable existing subscriber button Reset password License agreement Privacy notice Customer service Default to gridview in store Enable filter iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

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

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

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

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

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

39
Table 2. Reader App features Reader App (Continued) Feature Flipview story name font Flipview story description font Store fonts Library title font Library issue download available font Library issue update progress font Fonts (Continued) Library issue download status font Available issues text font Library issue name font Library downloaded bytes font Library issue number font Library segement overview issue name font Library segment overview issue number font Library segment overview cover story font Intents Help TOC Popup height Popup width Popup height Popup width
40
iPad 2.1
Android 1.3 Froyo Honeycomb
HTML5 1.0
TOC Popup
Bookmark Popup
Table 2. Reader App features Reader App (Continued) Feature Tap bottom to show toolbar Tap top to show toolbar Tap sides to navigate Touch areas Hotzones bottom area height top area height left area width right area width Keep underlying interactive elements active Show story bullet Page scrubber enabled Show flipview header Show story description Show section labels Flipview Thumbs Minimum page thumb height Maximum page thumb height Make thumbs orientation aware Margins Flipview article thumb margin Flipview page thumb margin iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0

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

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

The Share Toolbar settings control the Content Sharing functionality.
Enable partial page sharing
Enables/disables the functionality of sharing a part of a page.
Share page
Controls the functionality of sharing the full page. Possible values:

none. Disables the functionality. full. A screenshot is made of the full screen,
showing the page in its current view.
thumb. A thumbnail of the page is shared.
(These are the thumbnails as available for the Flipview.)
Enable share toolbar
Makes the Share Content button available in the top toolbar.
Enable twitter
Makes the Twitter service available as an option in the Share Content list.
Enable facebook
Makes the Facebook service available as an option in the Share Content list.
Enable email sharing
Makes the email service available as an option in the Share Content list.
43
3.2 Store Settings

The Store settings control the Store functionality. These settings are available in the Pro, Framework, Subscriptions, and Apple Subscription Reader projects only.
Enable subscribe button
(Non-iTunes subscriptions only) Enables the Subscribe button in the Subscription section of the Store.
Enable existing subscriber button
Force non-progressive downloads
Forces the Reader App to use the non-progressive download method, by which the issue has to be fully downloaded before the user can start reading. Default setting is off, so that the Reader App uses the progressive download method, by which the user can start reading while most of the issue is downloaded in the background.
(Non-iTunes subscriptions only) Enables the Existing Subscriber button in the Subscription section of the Store.
Reset password
(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server, which stores the link to the Web page where a user can change the password for the subscription account.
Resumable downloads
Controls whether the downloading of a magazine can be broken off and resumed at a later stage.
License agreement
Subscriptions
(Subscription Edition only) Settings related to the Subscription functionality:
(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page on which users can read the license agreement for the offered service.
Privacy notice
Switch to library after login
(Non-iTunes subscriptions only) Allows the user to switch straight to the Library after logging in.
Library cache time
(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to view with information about how the users data is gathered, used, and managed.
The time after which issues that are part of a subscription are refreshed in the Library.
Customer service
Disable offer in portrait mode
(Non-iTunes subscriptions only) Hides the offer pane in the Subscription section of the Store when the digital device is rotated to landscape orientation.
(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to access their subscription account details.
Default to gridview in store
Open subscription page in Safari
(Non-iTunes subscriptions only) Opens the page for subscribing to a subscription in the Safari Web browser.
Defines if the Reader App should start the Store in Grid view or Single Issue view.
Enable filter
Enables a filter in the Store view, allowing the Reader App to filter issues as defined by the filter data on the Content Delivery Platform.
44
Enable 3G Downloading HTML Store URL
Allows downloading via a 3G account. The URL pointing to index-android.html of the HTML Store. Possible values:
Blank: the packaged HTML store as part of
3.3 Navigation Settings

The Navigation settings control the functionality related to navigating the magazine in the Reader App.
Always open in store
the Reader App build is used points is used
When enabled, the Store is automatically accessed as soon as the Reader App is launched.
URL: An external Web store to which the URL
Enable audio control in toolbar
HTML Store fallback URL
The URL pointing to a local HTML file. This file is loaded when the HTML Store is not acccessible.
When enabled, the audio control button will appear in the top toolbar. Tapping it will display the audio control, with which the playback of audio files (started manually or automatically) can be controlled.
Enable bookmarks in toolbar
When enabled, the Bookmarks button will appear in the top toolbar. Tapping it will display the Bookmarks list, with which favorite stories can be bookmarked or quickly accessed.
Show toolbar on opening issue
When enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) is automatically displayed as soon as the magazine issue is opened.
When enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) will always be displayed, without the user being able to hide them.
Bottom toolbar always on
When enabled, the Navigation bar is always displayed and cannot be hidden by the user.
Toolbar Items
Controls the order and number of the buttons in the Navigation bar. Rearrange the order by dragging/placing each key to its required position. For the Android Reader App v1.x (Honeycomb) version, remember that reordering items lower in the
45
list can result in these items ending up in the Overflow menu. Default items are:
Buy. The Store button for accessing the Store. Library. The Library button for accessing the
Back. (Android Honeycomb only) Places the
Back button in the Action bar.
Forward. (Android Honeycomb only) Places
the Forward button in the Action bar.
Enable top toolbar
Library. cover.
Enables the Toolbar at the top of the Reader App.
Home. The cover button for accessing the Magazine. When an issue is open but not
Enable fullscreen newsfeed Start with newsfeed
Enables the Newsfeed to be displayed full screen. Opens the newsfeed page when the App is launched.
currently being viewed (for instance when the Store is being viewed), this button allows the user to return to the issue. of contents page.
Horizontal page navigation
TOC. The TOC button for accessing the table External Back. Button for returning to
the application in which the Reader App is embedded. page.
When enabled, all pages of all stories are presented next to each other. Navigation needs to be done by swiping horizontally. When not enabled, all pages of each story are presented one above the other. Navigation needs to be done vertically (from page to page) and horizontally (from story to story).
Right to left support
Help. The Help button for accessing the Help Flipview. The contents button for accessing
Enables the right-to-left support; scrolling through the magazine will be reversed.
Scroll sections with two-finger swipe
the Story Viewer / Page Viewer and the Section Viewer. Newsfeed page.
Can only be used together with Horizontal Page Navigation enabled. When enabled, navigating from one story to another can be done by swiping using two fingers.
Feed. The Newsfeed button for accessing the Account. The account button for accessing
History buttons in bottom toolbar
the subscription account page.
Places the Back/Forward button in the Navigation bar. When the top Toolbar is enabled at the same time, the Back/Forward buttons are still displayed in the Navigation bar.
Custom. A button for accessing a Web page
with custom information such as privacy information. The URL to the page is defined by the Custom Button URL setting (see below).
Newsfeed URL
Contains the URL to use for the Newsfeed view.
46
Custom Button URL
The URL for the Custom View (a Web page with custom information such as privacy information).
Back to issue button
Magazine in package
For enabling/disabling the Back to Issue button in the Library. (The Back to Issue button in the Store is not influenced by this setting).
(Android Reader App only) Boolean property to indicate that the magazine is packaged into the app. The packaged magazine location is DigiMagTemplate\assets\ magazine. Create this folder either in Eclipse or directly on the file system.
Audio keeps playing while swiping from page to page within the same article
Orientation lock
Controls in which modes pages are shown: landscape and portrait mode (default setting), landscape mode only, or portrait mode only. When set to landscape or portrait mode only, the page is not rotated when the user rotates the device.
Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.
Enable TOC List in toolbar Top toolbar always on
For enabling/disabling the TOC List in the top Toolbar. When enabled, the top Toolbar bar is always displayed and cannot be hidden by the user.
Allow fullscreen object rotation when locked
(Android Reader App only) When the Orientation Lock feature is enabled (see above), the Allow fullscreen object rotation when locked feature allows objects displayed in full screen mode (such as videos, Slide Shows and Web view overlays) to still rotate when the Tablet is rotated.
Maximum number of toolbar items
Force fullscreen video rotation
Videos displayed in fullscreen mode can be forced to be displayed in landscape mode across the height of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly. Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video. In order for this feature to work, the Orientation lock feature (see above) also needs to be enabled. However, this is not necessary when an Android version of the Reader App is used.
(Android Reader App Honeycomb only) Defines the maximum number of items to appear on the righthand side of the Action bar. Maximum number to be set is 6.
Show FlipView on show Toolbar.
Controls whether the Flipview should be shown each time the Navigation bar (Froyo) or Action bar (Honeycomb) is shown.
47
3.3.1 Color Settings Page sharing table info text color

The title of the info page (the screen shown when the user needs to make a choice of sending a full page or a part of a page).
Sign-in forgot button text color
(Non-iTunes subscriptions only) Color of the I forgot my password title in the Sign-in dialog box.
Sign-in submit button text color
Page sharing table info color
(Non-iTunes subscriptions only) Color of the Submit button label in the Sign-in dialog box.
The background of the info page title area (the screen shown when the user needs to make a choice of sending a full page or a part of a page).
Sign-in email field text color
(Non-iTunes subscriptions only) Color of the Email Address title in the Sign-in dialog box.
Inpage downloading label color Downloading label color
Color of the Downloading label on a page. Color of the Downloading label in the Page Viewer / Story Viewer.
Sign-in password field text color
(Non-iTunes subscriptions only) Color of the Password title in the Sign-in dialog box.
Sign-in dialog title text color
Percentage label color
(Non-iTunes subscriptions only) Color of the text in the Sign-in dialog box header.
Color of the download percentage label in the Page Viewer / Story Viewer.
Enable transparent Web Elements
Inpage percentage label color Sign-in disclaimer text color
When enabled, the background of Web elements will be transparent.
Color of the download percentage label on a page. (Non-iTunes subscriptions only) Color of the disclaimer title in the Sign-in dialog box.
TOC selected row color
The color of the selected story in the TOC List.
Bookmark selected row color
Sign-in license text color
The color of the selected Bookmark in the Bookmarks List.
(Non-iTunes subscriptions only) Color of the License agreement title in the Sign-in dialog box.
Application toolbar
The color of the Navigation bar and the top Toolbar.
Sign-in privacy text color
(Non-iTunes subscriptions only) Color of the Privacy title in the Sign-in dialog box.
Flipview background color
Sign-in remember checkbox text color
The color of the Flip View background, shown behind the story previews. To get a transparent color, set an alpha value lower than zero.
(Non-iTunes subscriptions only) Color of the Remember Me title in the Sign-in dialog box.
Flipview text
The color of the Flip View header and issue description shown at the top.
48
Flipview section text color
The color of the text in the Section viewer.
Library segment overview download button
Flipview section text color selected
The color of the Issue Download button on the Library Segment Overview page.
The color of the text in the Section viewer in its selected state.
Library download bar color
Color of the download bar for an issue in the Library.
Flipview story name color
The color of the Story title below the story preview.
Library issue download progress color
Flipview story description color Flipview empty thumb border
Color of the string that indicates the progress of the download.
The color of the story description below the story preview. Color of the border for an empty thumbnail in the Page Viewer / Story Viewer.
Library issue download status color
Color of the string that shows the status of the download.
Store toolbar
Store colors: Store title color
The color of the store toolbar.
The color of the Store title (in the top navigation bar).
Store subscription title button
Library segment top background color
The color of the Subscribe and Existing Subscriber button labels.
The background color of the top area of the Library Segment Overview page.
Store title button
Library segment bottom background color
The color of the Buy, Preview, Submit, Download and Pause button labels.
The background color of the bottom area of the Library Segment Overview page.
Store background color
Library segment overview issue name color

The color of the issue name on the Library Segment Overview page.
The background color of the Store (visible when no shelves are visible, in case you have no issues bought or when there is no internet connection available).
Available issues text color
Library segment overview issue number color
The color of the Available issues: header at the top of the issues grid.
The color of the issue number on the Library Segment Overview page.
Available issues shadow color
Library segment overview cover story color
The color of the shadow of the Available issues: header at the top of the issues grid.
The color of the cover story title on the Library Segment Overview page.
Library issue name color
The color of the issue name in the Library.
49
Library downloaded bytes color
The color of the string that indicates the download progress in bytes.
3.3.2 Font Settings Inpage downloading label font Downloading label font
The font of the downloading label on a page. The font of the downloading label in the Page Viewer / Story Viewer.
Library issue number color Library background color
The color of the issue number in the Library. The color of the Library background.
Enable native scrolling indicators
Inpage percentage label font Percentage label font
Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content. 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 righthand 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.
The font of the percentage label on a page. The 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 dialog box. text in the Subscription Sign In dialog box. in the Subscription Sign In dialog box.
License text font. The font of the License Privacy text font. The font of the Privacy text Remember checkbox font. The font of the
Remember Me text in the Subscription Sign In dialog box. my password text in the Subscription Sign In dialog box. button label in the Subscription Sign In dialog box.
Forgot button font. The font of the I forgot
Submit button font. The font of the Submit
50
Email field font. The font of the Email box in
the Subscription Sign In dialog box.
Store fonts: Store title font
Password field font. The font of the
The font of the Store title (in the top navigation bar).
Password box in the Subscription Sign In dialog box. Subscription Sign In dialog box.
Library issue download progress font Library issue download status font Available issues text font Library issue name font
The font of the download progress label in the Library. The font of the download status label in the Library. The font of the Available issues: text. The font of an issue in the Library.
Dialog title font. The font of the title of the
Issue description font
Font settings for the issue description in the Flipview header.
Flipview title font
Font settings for the Story Viewer / Page Viewer title.
TOC cell story title font
Library downloaded bytes font Library issue number font
The font of the story title in the TOC list.
The font of the downloaded bytes label in the Library. The font of the issue number in the Library.
TOC cell story description font Flipview story name font
The font of the story description in the TOC list. The font of the story name/title in the Flipview.
Library segment overview issue name font
The font for the issue name on the Library Segment Overview page.
Flipview story description font Bookmark cell issue title font Bookmark cell story title font
The font of the story description in the Flipview. The font of the issue title in a Bookmark. The font of the story title in a Bookmark.
Library segment overview issue font color
The font for the issue number on the Library Segment Overview page.
Library segment overview cover story font
The font for the cover story title on the Library Segment Overview page.
Bookmark cell story description font
The font of the story description in a Bookmark.
51
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-
3.5 TOC Popup Settings

The TOC Popup settings control the settings of the TOC List.
Popup height Popup width
Defines the height of the TOC List. Defines the width of the TOC List.
tions to the Help button in the Navigation bar. in the Navigation bar.
TOC. Used to link a story to the TOC button
52
3.6 Bookmark Popup Settings

The Bookmark Popup settings control the settings 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.
Popup height Popup width
Defines the height of the Bookmarks List. Defines the width of the Bookmarks List.
Tap bottom to show toolbar
Activates the bottom Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.
Tap top to show toolbar
Activates the top Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.
Tap sides to navigate
Activates 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 areas
Defines 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. Hotzone.
left area width. Defines the width of the left right area width. Defines the width of the
right Hotzone.
Keep underlying interactive elements active
When enabled, the functionality of interactive elements (such as Slide Shows, videos, etc) which are
53
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 bullet
Defines whether or not a bullet should be shown next to each issue name in the Flip Viewer.
Page scrubber enabled
Defines whether or not the Page Scrubber should be enabled.
Show flipview header
Defines whether or not the Flip Viewer header should be shown (if not, the Title, Description and Close button of the Flip Viewer disappear).
Show story description
Defines whether or not the description of a story is shown in the Page Viewer.
Show section labels
Defines whether or not the Section Viewer is shown in the Page Viewer.
Thumbs
The definition of various thumbnail sizes.

Minimum page thumb height. The mini-
mum height of a thumbnail in the Flip Viewer. mum height of a thumbnail in the Flip Viewer.
Maximum page thumb height. The maxiMake 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
54
Margins
Defines different margins for adjusting the layout of the Flipview.

Pages top margin in flipviewer. The margin
3.9 Library Settings

The Library settings control functionality of the Library.
between the top of the issue thumbnails and the start of the Flip Viewer header. between the thumbnails in the Flip Viewer.
Auto open magazine
Flipview thumb margin. The margin Flipview page thumb margin. (Android
Opens an issue or Segment automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). The following conditions exist:
Honeycomb only) Controls the margin between images (pages). Honeycomb only) Controls the margin between articles (stories).
Flipview article thumb margin. (Android
Show page number
(Android Reader App only) Defines whether or not the page number should be displayed below the page preview.
Show progress in megabytes
(Non-progressive downloads only) Shows the download progress both in megabytes as in percentages.
Enable login button Enable library filter
Enables the Log In/Log Out button in the Library. Enables the Library filter in the Library.
Enable library segment filter
Enables the Library Segment filter available in the Library.
55
3.10 Metrics
When a magazine is read on a device for which it hasnt been designed (in terms of dimensions), it is likely that it will not properly fit the screen. The Metrics settings provide a method for dealing with such scenarios:
The method of page scaling can be specified The user can be informed by displaying a
Fit screen disproportionately. The
page will be made to fit the dimensions of the screen exactly. This could result in the content of the page looking stretched or squashed.
Check device metrics
Controls whether the metrics of the device are checked.
Device metrics warning URL
message
URL to the Web page to be displayed. When left empty, the default Web page in the following location is used:
assets/devicewarning/warning.html
Fitting
The fitting option allows you to specify how pages should be made to match the screen. For notes about the functionality of the page fitting feature in relation to using specific DM Server plugins, see chapter 6, Exporting Content 3.1, Exporting and Page Scaling.
Fit mode. Possible values: Fit width. (Default setting) On a device
Feel free to modify this page to your needs.
Device width
The required width of the device. Default values are: 1024 px (Reader App v1.x (Froyo) 1280 px (Reader App v1.x (Honeycomb)
Device height
The required height of the device. Default values are: 600 px (Reader App v1.x (Froyo) 800 px (Reader App v1.x (Honeycomb)
which is smaller than the page dimensions, the page is scaled down to fit the width of the screen. This might result in the user having to scroll vertically to see the rest of the page.
Device dpi
Fit screen. The page will be scaled to fit
The dpi setting which the device runs in (so not the physical dpi). Examples: Samsung Galaxy: 240 dpi Motorola Xoom: 160 dpi
the screen. If the aspect ratio (width versus height) of the screen is different than the ratio for which the page was designed, this can result in letterboxing or pillarboxing (black bars appearing along the side, top, or bottom of the screen).1
1
56
3.11 Content
The Content settings determine the location of the magazines source files.
3.12 Resolution
The Resolution settings control the size of the area in which the page is displayed.
Magazine Configuration URL
Location of the issue.json configuration file. Default setting:

./content/
Height
Determines the height of the area (in pixels). Default setting: 754.
Width
Magazine Content URL
Location of the magazine content (the images and pages folders). Default setting:
./content/
Determines the width of the area (in pixels). Default setting: 1028. When the dimension of the page is larger than the area in which it is displayed, scroll bars will appear.
57
3.13 Tracking
The Tracking settings hold specific settings for services which track user interaction with the Reader App, such as Google Analytics.
3.14 Web Element Popup

The Web Element Popup settings control the settings of the Web Element pop-up.
Scale content to fit screen
When enabled, the displayed HTML page is scaled to fit the Web Element pop-up.
58
3.15 Newsstand
The Newsstand settings control the settings of iOS 5s Newsstand feature.
Open issue on App open
Ensures that the correct issue is opened in the Reader App when tapping an issue in the Newsstand.
59
F Using the Content Delivery Platform

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

To log in to the Content Delivery Platform, do the following: Step 1. Enter the link for your area in your Web browser:
Europe: https://cds.woodwing.net United States:
https://us-east-cds.woodwing.net
Asia: https://apac-cds.woodwing.net
Step 2. Enter the received password and username. Step 3. Click Log In or press Enter. After logging in, the last visited tab is displayed.1
If the Cookie has not been set or if the Cookie is cleared, the Publication tab will be loaded
1
60
Appendix F Using the Content Delivery Platform
Logging out
To log out of the Content Delivery Platform, do the following:

Click Logoff <user name> in the top right-
2. System Structure
The Content Delivery Platform platform has the following main structure: At the highest level, a Domain is defined, usually represented by the publishing company name. Each Domain consists of:
Users. The users who need to work within the
hand corner of the screen.
CDP environment.
Devices (also referred to as Development
Devices) Used for testing a digital magazine without making the magazine public. are distributed (such as Reader Apps and Newsfeed Apps).
Apps. Representing the actual apps that
For each Reader App, the following can be defined:

Issue. The actual magazine content as a full
magazine (compare with Segments below).
Segment. The actual magazine content
provided in separate sections (compare with issue above), usually grouped by category. Examples: Business, Sports, Fashion, etc. Each Segment is downloaded and read separately; all Segments together make up the full magazine issue.
Rendition: a variation of a magazine,
designed for a specific resolution and screen depth. Renditions are defined as part of a Display (see below) and issue/Segment (see above). In more general terms: the issue or Segment as exported from Content Station is treated by the Content Delivery Platform as a Rendition.
61
Display. A representation of one or more
devices, all sharing the same resolution and screen depth. A Display has one Rendition assigned. The Rendition which is assigned to the Display does not have to perfectly match that Display. For example, the page scaling feature of the Android Reader App allows a Rendition to be viewed on Displays which are smaller or larger than what the Rendition has been designed for. This method of working allows you to use the same Rendition for different devices (each with specific resolutions and/ or screen depths), instead of having to create separate Renditions for each.
Apple Subscription offers. Used as labels
in the Subscription buttons in the Store.
Push notifications. Messages to be sent to
a Reader App or to Apples Newsstand.
Subscription Servers. Information relat-
ing to Subscription Servers such as the Apple iTunes Subscription Server. Store filter and the values used in the Filter list.
Figure 2. The Publication Overview pane shows the main components of the structure and allows to quickly access a component. Shown here are a Domain (WoodWing), a Reader App (Gulls Monthly), containing two issues (March and February). The March issue contains 2 Segments which are further divided in Displays. The February issue does not contain Segments.
Filter name and values. The name of the Segment Filters. The values used in the
Library Filter.
62
2.1 Accessing the Components

The components of the CDP structure can be accessed through different areas of the Content Delivery Platform. Each area is represented by a tab at the top of the screen:
Manage
(Only available for System Maintainers) For accessing the following components:
Domains. For managing Domains. Displays. For managing Displays. Renditions. For managing Renditions.
Publication
For accessing the following components:

Publication Overview, showing the Domain,
Application, Issues, Segments, and Renditions. Issues are sorted by publication date in ascending order (oldest shown last).
My Account

User. For changing the user details of the cur-
Application
rently logged in user.

Application Maintenance. For managing
Reader Apps.
Push Notifications. For sending mes-
sages to published Reader Apps or to Apples Newsstand. iTunes Subscriptions and non-Apple iTunes Subscriptions.
Subscriptions. For managing Apple
General

Device Maintenance. For managing devel-
opment devices.
Global Device Maintenance. (For a hosted
service, access to this area is only available to WoodWing) For managing global development devices. accounts.
User Maintenance. For managing user
63
2.2 User Types

The system defines three types of users:
System Maintainer. Can make changes
The table on the next page outlines the tasks which can be performed by each type of user. (System Maintainers and System Admins may have additional tasks other than those described here.) The information in this appendix is aimed at General Users, using an environment hosted by WoodWing. When a task needs to be performed which cannot be done by a General User, instructions are given for providing WoodWing with the relevant information so that they can perform the task for you.
to all components of the system (on all levels), but primarily manages Domains, Displays, and Renditions. (For a hosted service, the System Maintainer is WoodWing.)
System Admin. Can make changes to all
components of the system (except the components of the Manage tab) but only as part of the Domain(s) which the System Admin has access to. (For a hosted service, the System Admin is WoodWing.) the Domain to which the user has been given access to.
General User. Can perform general tasks in
64
Table 2.2. CDP access rights Tab Area Publication Overview Component Issue Publication Segment Rendition Task Add/delete/edit Add/delete/edit/sort Add/delete/edit (as part of issue or Segment) Add Edit Delete Application Application Maintenance Application Metadata Push Notifications Apple Subscriptions Device Maintenance General Global Device Maintenance User Maintenance Minimum version control Managing Library Filters Managing Displays Rendition Mapping View Add/edit/delete Add Certificate Key Write message Add/delete/edit Add/delete/edit Add/delete/edit Add/delete/edit System Maintainer System Admin General User
Message Subscription Device Device User

1
A limited number of properties only. 65
Table 2.2. CDP access rights (continued) Tab Manage Area Domains Displays Renditions Component Domains Displays Renditions Task Add/delete/edit Add/delete/edit Add/delete/edit Add My Account User Account User Edit Delete System Maintainer System Admin General User
66
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
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 sales@woodwing.com, stat-
ing the request. Make sure to include a valid Purchase Order.
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.
67
3.2 Adding a Reader Application

Managing Reader Apps is a task of the system administrator (WoodWing). To have a Reader App added, do the following: Step 1. Send an e-mail to services@woodwing. com stating that you would like to distribute a Reader App by making use of the Content Delivery Platform. You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform. 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 Content Delivery Platform URL A secret key for the Reader App, as
Reader Apps and minimum versions
Version 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 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 number of the Rendition that they are part of.
Rendition level. When required, each
A product ID for the Reader App, as The Application version of the Reader
App. (This version number will be applied to all issues which are subsequently uploaded to that Reader App.)
68
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 services@woodwing.
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
com, 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.)
69
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 magazine 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
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 issues in app purchase in iTunes Connect. (See chapter 14, Distributing Reader Apps With Store section 4.1 Registering With iTunes Connect.) the ID for the issue that will be used for reporting.
Free or Subscription-only issues:
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 issues 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 immediately, 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
70
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
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 t h e Rendition which is representative for the issue. In other words: when the issue is primarily 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 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 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 visualized 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 dont 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.
71
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 72
Step 4b. Product ID. Enter one of the following:

Paid issues: (iPad Reader App ver-
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 specified dimensions by using the respective Add/ Change buttons. Click on a preview to view it in full size in a new window. 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
sion only) The ID that was defined for the issues in app purchase in iTunes Connect. (See chapter 14, Distributing Reader Apps With Store section 4.1 Registering With iTunes Connect.) 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 issues 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 immediately, 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.
73
for the issues in app purchase in iTunes Connect. (See chapter 14, Distributing
Reader Apps With Store section 4.1 Registering With iTunes Connect.)
Step 11. Enter the details pertaining to the Rendition: Step 11a. R e n d i t i o n . C h o o s e t h e Rendition on which the issue is to be viewed. Step 11b. R e a d e r A p p M i n i m u m Ve r s i o n . Cannot be change d for Segments. The minimum version number used is the number set for either the Reader App or the Rendition. (For more information, see Reader Apps and minimum 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 visualized by the 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 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 dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window.
74
the ID for the issue that will be used for reporting.
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 issues 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. The Add Rendition screen appears.
Step 11e. Click Save. The Deploy window appears with a summary of the files that are to be uploaded. Step 12. Click Save & Finish to upload the files to the Content Delivery Network. 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 13. Click OK to close the window. 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. The process is hereby complete. 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 section 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 section, click Yes. An additional field appears. Step 3b. Enter the iTu n es S h a r e d Secret. Step 3c. Click Save. Step 3d. In the Apple Subscriptions section of the Application pane, select the Reader App to which the iTunes subscription 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:
75
Product ID: The product ID as
defined in iTunes Connect. This works the same as the product identifier for issues. appear on the buttons on the Offer page (for example: 90 days, 180 days, etc.)
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, perform 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
Description: the offer as it should
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 S ubscript ion failover behavior. Step 4d. Click Save.
comments to clarify the use of the device
Step 4. Click Add.
76
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
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 section 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 services@woodwing.com, 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
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 services@ woodwing.com, stating the request:
Managing Domains Managing Reader Applications Managing Renditions on a system level Managing Displays Adding/removing users
be received by the CDP from the Reader App) or Disabled (calls will not be received by the CDP from the Reader App). App configuration.
Host: The host as used in the Reader
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/
77
Product ID: the unique product ID for
the app.
Name: name of the app. Default Rendition: the default Rendition
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.
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 l a c k b e r r y A p p Wo r l d : availability. Step 4b. iTunes Store: availability. Step 4c. iTunes Subscriptions: availability. 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.
78
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 section 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.
79
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
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. The issue screen appears. Step 2. Click Edit. Step 3. Do one of the following: When no content has been uploaded yet Step 3a. Change any of the available fields as required. When content has been uploaded Step 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 services@ woodwing.com to request having the old files removed. Please include the product 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.
the issue.
Click Delete to delete the issue and all
its components
80
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. The issue screen appears. Step 2. Click Add Rendition. 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.
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 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 issue content is being uploaded, you dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window. Step 7. Click Save. The Deploy window appears with a summary of the files that are to be uploaded. Step 8. Click Save & Finish to upload the files to the Content Delivery Network. 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 9. Click OK to close the window. The Rendition screen appears.
81
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.
82
4.3.2 Adding to an Existing Issue

To add a Segment to an existing issue, perform the following steps: Adding additional Segments to an Issue is only possible for those issues which have been set up to contain Segments during the creation steps of an issue. Step 1. In the Publication Overview pane, select the issue to which the Segment needs to be added. The issue screen appears. 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.
83
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. Step 3. Respond to the message by doing one of the following:
Click Cancel to return to Segment screen
4.3.4 Editing an Segment

To edit a Segment, do one of the following:
When no content has been uploaded yet

required.
Change any of the available fields as
When content has been uploaded

previews.
Change the magazine content or any of the
All fields can be modified, with the exception of the date and time fields (these are inherited from the parent issue). When either is done, the old files need to be purged:
without deleting the Segment.
Click Delete to delete the Segment and
all its components (Renditions).
com to request having the old files removed. Please include the product 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.
(Optional) Click on a preview to view it in full
size in a new window.
84

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. The issue screen appears. Step 2. Click Add Rendition. 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 minimum version number used is the number set for either the Reader App or the Rendition. (For more information, see Reader Apps and minimum 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. 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 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 dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window. Step 7. Click Save. The Deploy window appears with a summary of the files that are to be uploaded. Step 8. Click Save & Finish to upload the files to the Content Delivery Network. 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 9. Click OK to close the window. The Rendition screen appears.
85
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. The issue screen appears. Step 2. Do one of the following:
On the issue screen, click Sort Child
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 managed 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
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.
86

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. The issue screen appears. Step 2. Do one of the following:
O n the issue screen, click Ad d
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 4c. Upload File. Click Browse to locate the magazine upload file and click Open. The upload will start. The progress is visualized 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 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. Uploading the images can be done while the issue content is being uploaded, you dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window. Step 6. Click Save.
Rendition.
From the toolbar at the top of the
Publication Overview pane, click Add, followed by Rendition.
Step 3. Click Add Rendition. The Add Rendition screen appears. Step 4. Enter the details pertaining to the Rendition: Step 4a. R e n d i t i o n . C h o o s e t h 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 automatically set when the page is loaded and
87
The Deploy window appears with a summary of the files that are to be uploaded. Step 7. Click Save & Finish to upload the files to the Content Delivery Network. 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 8. Click OK to close the window. The Rendition screen appears. The process is hereby complete.
4.4.2 Convert to HTML5

Non-HTML5 Renditions can be converted to HTML5 format 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.
88
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. The Rendition screen appears. Step 2. Click Delete. A message appears asking to confirm the action. Step 3. Respond to the message by doing one of the following:
Click Cancel to return to 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:

com to request having the old files removed. Please include the product 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.
screen without deleting the Rendition.
Click Delete to delete the Rendition.
Click on a preview to view it in full size in a
new window.
89
4.5 Managing Subscriptions

Subscriptions can be managed in the following ways:
Add Delete Edit Sort
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. Step 2. Click Delete. A message appears asking to confirm the action. Step 3. Respond to the message by doing one of the following:
Click Cancel to return to Subscriptions
4.5.1 Adding Subscription

For information about adding a Subscription, see section 3.4.3 Adding a Subscription.
screen without deleting the Subscriptions.
Click Delete to delete the Subscriptions.
90
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.
91
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.) Rendition has been converted to HTML5 but a newer version of the issue or Rendition is available. (Convert this newer version by performing the steps found in section 4.6.1 Converting to HTML5 Format..)
Yellow exclamation mark: the issue or
The following processes can be managed:

Converting issues or Renditions to HTML5
format
Removing converted HTML5 issues or
Renditions
92
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 content that needs to be converted. The Mass HTML5 Export page appears, showing 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 containing 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 progress bars with which the conversion and upload process can be followed. As soon as all files are uploaded, the OK button becomes available. Step 6. Click OK to close the window.
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.
93
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
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.
page without removing the converted issue. HTML content for that issue.
Click Delete to delete the converted
The process is hereby complete.
94
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 2. Click Delete. 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
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
the Development Device.
Click Delete to delete the Development
multiple domains) Select the Domain(s) which the Development Device should be part of.
Device and all its components
Step 4. Click Save.
95
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
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
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).)
received by the device, the Reader App itself does not have to be opened. the user; messages can be delayed or failed to be delivered.
It is not guaranteed that the message reaches
Each is explained in the next sections.
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) Cer tificate 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.
96
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 Notification 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.
97
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) Cer tificate 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 Notification 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 certificate 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 status 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.
98
The more registered devices exist, the longe r it ta ke s to se nd ou t 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.
99
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
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.
Configuration
No 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.
downloaded, consisting of the magazine.xml file, the cover and all thumbnails. magazine, stories will be downloaded in order of appearance (first story first, last story last).
When user does not interact with the
When the user accesses a story (in any
possible method, for instance by tapping a preview 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 cancelled, but each will finish first before the next is started. In the extremely rare situation 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.
100
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. This process only applies to those Reader Apps which do not bundle the magazine content with the 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 Renditions
Determining 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 cannot read encrypted magazines. We therefore advise to make use of this feature for those issues which are published to the iPad only.
Encryption and minimum Reader App version
Making 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 issues
Only magazines which are uploaded after the encryption 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.
101
G Customizing the HTML Store

Customizing the HTML Store is important when you want to achieve any of the following:
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
the content of the issues that will be viewed) users to use
Enabling those features that you want your
favorite editor for this task. favorite editor for this task.
This appendix describes how to customize the HTML Store.
Image editor. For editing images. Use your 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 components
To locate a specific component of the Store or to verify its properties, view the Store in a Web Browser and use browsers tools such as the Developer Tools. Customizable components are referenced in this appendix 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.
102
Appendix G Customizing the HTML Store
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, Subscription, and the Apple Subscriptions Editions of the Reader App. The Store consists of the following main components:
Top Toolbar. Contains buttons for performing
Issue preview. Shows a preview of the issue
content, usually in the form of a representative page or the table of contents. to an non-iTunes Subscription service.
Subscription Sign In window. For signing in
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
the following tasks:
Back to Magazine. (iPad Reader App
only) For returning to an opened issue. cific values.
Filters. For filtering the content on speGrid View/Single Issue View. For
changing the display method.
S i g n I n /S i g n O u t . (N o n-i Tu n e s
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.
Store Filter. For filtering the content of the
103
Top Toolbar
Subscription offer page
Upgrade bar
Store view in multiple-issue mode
Figure 2a. The HTML Store in Grid view mode with the Subscriptions Offer page shown at the top
104
Issue preview
Figure 2b. The HTML Store in issue preview mode
105
Store Filter
Figure 2c. The Store Filter of the HTML Store
106
Subscription sign-in window
Figure 2d. The subscription sign-in window
107
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].
108
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
gridview.css. Used for controlling func-
tionality related to the Gridview mode. appearance of the navigation tools. appearance of the issue preview.
navigation.css. Used for controlling the preview.css. Used for controlling the signin.css. Used for controlling the
Store functionality:
DMSettings.plist file. For configuring
Store functionality in the Reader App.
appearance of the subscription sign in dialog box. functionality related to the single view mode.
Images. Used for changing the appearance
singleview.css. Used for controlling
of the Store in the form of buttons, icons, etc. Images are stored in the following location:
Resources/htmlstore/storefront/themes
subscription.css. Used for controlling
Folders exist for each Reader App platform:

android: images for the Store in the
the appearance of the Subscription Offer pages. appearance of the View toolbar.
toolbar.css. Used for controlling the webcontainer.css. Used for displaying
Android Reader App. than Android or iOS. Reader App.
default: images for platforms other ios: images for the Store in the iPad CSS files. Used for changing the functional-
external content such as the "Forgot my password" page, the "Privacy" page, etc.
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): eral appearance and functionality of the Store. ality related to the Store filter.
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 components/subscription/css/
base.css. Used for controlling the gen-
subscription.css file: /storefront/
filters.css. Used for controlling function-
For all files except the subscription.css file, folders exist for each Reader App platform:
109
android: CSS files for the Store in the
Android Reader App. than Android or iOS. Reader App.
3.1 Configuration Settings

When the Store is integrated in the Reader App, the communication 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.
default: CSS files for platforms other ios: CSS files for the Store in the iPad
The configuration of each type of file is explained in the following sections.
110
3.2 Images
Store images include all images used in the Store. Take note of the following:
When renaming images, make sure to also All images need to be in PNG file format
CSS file: toolbar.css Class selectors: .toolbar .button. filter .toolbar .button. sign CSS file: webcontainer.css Class selectors: .button.sign .button.back
ButtonActive.png. (Android only) Buttons
rename their references in the relevant CSS files
The following images can be customized (in alphabetical order. For examples, see the images on the following pages).
bg-rail-vertical.png. Reserved for future
used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.
use.
bg-rail.png. Displayed when the user taps
CSS references: CSS file: gridview.css Class selectors: .storefront-gridviewbutton CSS file: preview.css Class selector: .preview-button CSS file: signin.css Class selector: .submit-button CSS file: singleview.css Class selector: .storefront-singleview-button CSS file: toolbar.css Class selectors: .toolbar .button .toolbar .button. singleview .toolbar .button. gridview CSS file: webcontainer.css Class selectors: .button.sign .button.back
the left or right Hotzone. CSS reference: CSS file: navigation.css Class selectors: .navigator.x.previous .navigator.x.next used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.
button.png. (Non-Android Only) Buttons
CSS references: CSS file: gridview.css Class selectors: .storefront-gridviewbutton CSS file: signin.css Class selector: .submit-button CSS file: singleview.css Class selectors: .storefront-singleview-button
111
ButtonPressed.png. (Android only) Buttons
used in the top Toolbar.
gridview-icon-active-button.png. Grid
CSS references: CSS file: toolbar.css Class selectors: .toolbar .button. pressed .toolbar .button. singleview.active .toolbar .button. gridview.active
checkbox.png. The Remember Me check
view button in its selected state. CSS reference: CSS file: toolbar.css Class selector: .toolbar .button.gridview.active ton in its non-selected state. CSS reference: CSS file: toolbar.css Class selector: .to ol b a r gridview
gridview-icon-button.png. Grid view but-
.b utto n.
box in the subscription sign-in window in its deselected state. CSS reference: CSS file: signin.css Class selector: .signin .checkbox Me check box in the subscription sign-in window in its selected state. CSS reference: CSS file: signin.css Class selector: .signin .check box. checked indicating that a list option is selected. CSS reference: CSS file: filters.css Class selector: .checkbox-filter
gridview-item-shadow.png. The shadow
checkboxChecked.png. The Remember
below the small issue covers. CSS reference: CSS file: gridview.css Class selectors: .storefront-gridview li Gridview. CSS reference: CSS file: gridview.css Class selectors: .storefront-gridview button. CSS reference: CSS file: toolbar.css Class selector: .gridview-img
gridView-shelf.png. The background of the
checkmark.png. Used in the Store Filter for
GridviewIcon.png. (Android only) Grid view
closeButton.png. Used for closing the issue
preview window or the subscription sign-in window. CSS references: CSS file: preview.css Class selectors: .preview .close-button CSS file: signin.css Class selector: .signin .close-button
single-bg.png. The background of the sin-
gle-issue view. CSS reference: CSS file: singleview.css Class selectors: .storefront-singleview
single-shelf.png. Shelf used in single-issue
view. CSS reference: CSS file: singleview.css
112
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.css Class selector: .toolbar .button.singleview.active Only) Single-view button in its non-selected state. CSS reference: CSS file: toolbar.css Class selector: .to ol b a r .b utto n. singleview button. CSS reference: CSS file: toolbar.css Class selector: .singleview-img
singleview-icon-button.png. (Non-Android
SingleViewIcon. (Android Only) Single-view
s i n g l ev i ew- i te m -s h a d ow. p ng. T he
background of the Single-view, including the dropshadow. CSS reference: CSS file: singleview.css Class selector: .storefront-singleview-shadow
113
D E
A E
button.png B singleview-icon-button.png gridview-item-shadow.png
gridview-icon-active-button.png
gridView-shelf.png
Figure 3.2a. The assets of the HTML Store with Grid view mode
114
button.png
closeButton.png
Figure 3.2b. The single-view mode assets of the HTML Store
115
A A
checkmark.png
B C
Figure 3.2c. The Library Filter asset

A C
closeButton.png button.png
checkboxChecked.png
Figure 3.2d. The Subscription sign-in window assets
116
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:
Grid view colors
The 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.css Class selector: .storefront-gridviewbutton in the grid view. CSS file: gridview.css Class selector: .storefront-gridviewname
Top Toolbar colors
Issue name. The title color of the issue name
The following colors relating to the top Toolbar can be customized:

Top toolbar. The color of the top Toolbar.
CSS file: base.css Selector: html Class selector: .header
Issue description. The title color of the issue
Toolbar button labels. The color of the
Toolbar button labels (the Filters and Sign In buttons). CSS file: toolbar.css Class selector: .toolbar .button
description (also called Cover Story:) in the grid view. CSS file: gridview.css Class selector: .storefront-gridviewstory
Upgrade bar colors
The 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.css Selector: html Class selector: .button
117
Single-view colors
The following colors relating to the single-view can be customized:

Issue info background. The background
Issue preview colors
The following colors relating to the issue preview can be customized:

Info background. The background color of
color of the issue info. CSS file: preview.css Class selector: .preview-info
the Info pane. CSS file: preview.css Class selector: .preview-info
Button labels. The color of the Preview Issue
and Buy/Free button labels. CSS file: singleview.css Class selector: .storefront-singleviewbutton in the single view. CSS file: singleview.css Class selector: .storefront-singleviewname
Issue name. The title color of the issue name
Issue description. The title color of the issue
description (also called Cover Story:) in the single view. CSS file: singleview.css Class selector: .storefront-singleviewstory
118
Subscription sign-in colors
The following colors relating to the subscription sign-in window can be customized:
Window header. The background color of
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.
the window header and the color of the text. CSS file: signin.css Class selector: .signin-top
Links. The color of the links for the I for-
got my password, Privacy, and License Agreement text. CSS file: signin.css Class selector: .link
CSS file: base.css Class selector: .body Subscription Sign In dialog box. CSS reference: signin.css
signin-top. The font of the header of the
119
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 NoniTunes Subscription Environment. 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

The text which appears in the Store originates from various 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 information
The 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 filter
The 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 correct keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:
120
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.
121
3.6 Language
Setting the language for the HTML Store is done separately 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
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. guage on the device on which the Reader App is used.
Android Reader App: Set the required lan-
Step 1b. Rename the file by using the appropriate language code. The language code should be a twoor 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 language as follows:
122
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 buttons. (See figure on the next page.) Source files can be found in the following location:
Resources/htmlstore/storefront/components/
Customizing the Subscription Offer page can be broken down into the following components:
Page design Text Text styling Subscription buttons
subscription
The following source files are available:

css/subscription.css. The CSS file used for
Each is explained in the following sections. 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.
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 horizontalOffer.html and verticalOffer.html files used in previous versions of the Reader App.
123
Subscription Offer page
Figure 3.7. The components of the iTunes Subscription environment
124
3.7.1 Page Design

The design of the page is controlled by the following two files:
subscription.css file. Controls the styling of
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
the page. the page.
subscription.html file. Holds the content of
subscription.css file
Some 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 file
The styling of the text is controlled by assigning the relevant tags and css classes (as defined in the subscription. css file). Assign tags and classes as required.
125
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.
Choose your subscription and pay via iTunes title

Color, letter spacing, font size:
.offer.apple .subscript .offer.apple div
Text alignment:
Subscribe title
Color, font style, font size, margin, text
shadow: .offer.apple h1 .offer.apple div
Font: .offer.apple
Text alignment, letter spacing: Font: .offer.apple
to title
Color, font style, margin, letter spacing:
.offer.apple .small-italic .offer.apple div
Text alignment:
Font: .offer.apple
Digital Magazine title

.offer.apple h2
Color, margin, text shadow: Text alignment, letter spacing:
.offer.apple div
Font: .offer.apple
Buy a subscription and start saving money today! title

Color, letter spacing, font size:
.offer.apple .black-text .offer.apple div
Text alignment:
Font: .offer.apple
126
3.7.4 Subscription Buttons

The subscriptions as defined on both iTunes and the Content Delivery Platform appear as buttons on the Offer page.
Each is explained below. When running the Reader App with an iTunes subscription 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.
Figure 3.7.4. The iTunes Subscription buttons on the Offer page
The following properties for these buttons can be customized:

The total number of buttons The layout of the buttons The appearance of the buttons The button labels The button label fonts
127
Total Number of Buttons
The 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 Appearance of the Buttons
To customize the appearance of the buttons, modify the following class selector in the subscription.css file:
.offer.apple td
The Button Labels The Layout of the Buttons

The layout of the buttons is controlled by the following class selectors in the subscription.js file:
createVerticalButtonBar. Controls the
The button labels are taken from the Description information, 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
number of vertical rows.
createHorizontalButtonBar. Controls
the number of horizontal rows.
128
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.css
Class selectors: .toolbar .button.sign .toolbar .button .button
129
Area holding Subscription buttons
Figure 2a. The components of a non-iTunes Subscription environment
130
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
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
when the device is held in portrait orientation.
A vertical Offer page. This page is shown
Each is described below.
when the device is held in landscape orientation.
Button area
Use the following dimensions:
Customizing the area is done through the following source file of the HTML Store:
iPad Reader App
Offer page shown with device in portrait
base.css
orientation: width: 768 pixels, height: 205 pixels. scape orientation: width: 303 pixels, height: 469 pixels.
Class selectors: .upgrade .horizontal .upgrade .vertical .upgrade
Offer page shown with device in land-
Button labels
Android Reader App (Froyo)
The button labels can be changed/localized by modifying the source strings. For more information, see section 3.5.1 Changing the Text.
Android Reader App (Honeycomb)
131
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
Each is described below. 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 page
For more information about this page, see section 3.7 iTunes Subscription Environment.
Log In/Log Out button
For more information about customizing this button, see section 3.8.1 A Sign In/Sign Out Button.
132
Figure 3.9. The components of a mixed Subscription environment
133
H Tips and Best Practices

Distributing a digital magazine involves many different steps and processes. The more experience 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 o n t h e Wo o d W i n g C o m m u n i t y s i te ( l o g - i n 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 domain name such as com.woodwing. MyMagazine_issue1.
IssueID. It is recommended to use a reverse
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).
The Product ID is also used in monthly reports.
134
Appendix H Tips and Best Practices
2. Submitting and Approval Cycles

It can take up to 2 to 3 weeks for a Reader App or magazine issue to be approved by Apple. 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.
135
I Gestures API
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.
136
iPad
Appendix I Gestures API
Gestures API classes DMEGestureManager attributes sharedInstance methods addDelegate: removeDelegate: addGesture: forKey: removeGestureForKey: DMEGestureDelegate attributes N/A methods willHandleGesture: doHandleGesture: gestureWillCancelNavigation: gestureWillCancelObjects: BOOL void BOOL BOOL Must return whether the delegate will handle this gesture Is called to actually handle the gesture. Do not perform handling checks here; do these in willHandleGesture. If Yes is returned no navigation functions will be executed If Yes is returned no object functions will be executed void void void void Sets a new delegate conforming to DMEGestureDelegate Removes supplied delegate Adds a new gesture to the Reader App Removes a gesture from the Reader App DMEGestureManager* Pointer to the singleton instance
137
iPad
J Navigation API
This appendix shows the architecture overview of the Data and Navigation API and the classes which can be used for customizing API for use with the iPad Reader App. For more information, see chapter 7, Customizing the iPad Reader App section 9.1.3, Navigation API.
1. Structure
138
iPad
Figure 1 on the next page shows the structure of the Navigation API.
Appendix J Navigation API
Figure 1. A structural overview of the Navigation API 139
iPad
2. Classes
The available classes which can be used are listed below. DMEDataManager attributes sharedInstance currentIssue methods rootPath DMEIssue attributes issueDescription stories methods getSectionNames getStoriesInSection: getStoryWithId: getPageWithStoryId: pageIndex: issueOrientation: getAllPagesForOrientation: getAllFirstPagesForOrientation: NSArray* (NSString) NSArray* (DMEStory) DMEStory* DMEPage* NSArray* (DMEPage) NSArray* (DMEPage) Returns a list of section names Returns a list of stories for the given section Returns the story for a given story id Returns a page for the given story id, page index and layout orientation Returns a list of all pages for all stories for the given layout orientation. Returns a list of the first page of a story for all stories for a given layout orientation NSString* NSArray* (DMEStory) Description of this issue List of stories NSString* Returns the path to the local magazine directory DMEDataManager* DMEIssue* Pointer to the singleton instance The current issue
140
iPad
DMEStory attributes issue identifier section title storyDescription author thumb preview stylesheet intent horizontalPages verticalPages elements images hyperlinks methods getPageWithIndex: issueOrientation: DMEPage* Returns a page for a given index and orientation DMEIssue* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSArray* (DMEPage) NSArray* (DMEPage) NSArray* (NSDictionary) NSArray* (NSDictionary) NSArray* (NSDictionary) Pointer to the parent issue Identifier of the story Name of the section that this story belongs to Title of the story Description of the story Author of the story URL of the thumbnail URL of the preview Data of the applied stylesheet Intent of the story List of the pages that are layed out in landscape List of the pages that are layed out in portrait List of the story elements List of the story images List of the story hyperlinks
141
iPad
DMEPage attributes story layoutOrientation pageIndex identifier thumb preview objects methods N/A DMEStory* DMEPageLayoutOrientation int NSString* NSString* NSString* NSArray* (DMEObject) Pointer to the parent story The layout orientation of the page The index of the page The identifier of the page URL of the thumbnail URL of the preview List of objects on the page
142
iPad
DMEObject attributes page parentObject identifier type x y width height itemId link weblink openinternal url specialProperties objects DMEPage* DMEObject* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSDictionary* NSArray* (DMEObjects) Pointer to the parent page Pointer to the parent object (if applicable) identifier Object type (movie, audio, scroll area etc) X position Y position width height item ID link web link open internal URL Properties that are specific for this object type List of child objects (Hotspot, Scrollable area)
methods N/A
143
iPad
DMENavigationManagerProtocol attributes N/A methods currentPageChanged: layoutOrientationHasChanged IssueHasLoaded: void void void Called when the current page in the Reader App has changed. Supplies the new page as a DMEPage Called when the current layout orientation in the Reader App has changed. Typically when the ipad is rotated. Called when the data manager finished loading the current issue.
144
iPad
DMENavigationManager attributes sharedInstance currentLayoutOrientation currentPage methods navigateToSection: navigateToStory: navigateToPage: historyGoBack historyGoForward historyCanGoBack historyCanGoForward addDelegate: RemoveDelegate: void void void void void BOOL BOOL void void Navigates the Reader App to the first page of the first story of the given section name. Navigates the Reader App to the first page of the given story Navigates the Reader App to the given page Navigates the Reader App forward in the history stack Indicates if it is possible to navigate back in the history Indicates if it is possible to navigate forward in the history Adds a given delegate to the navigationmanager. It must confirm to DMENavigationManagerProtocol Removes a given delegate from the navigation manager DMENavigationManager* DMEPage* Pointer to the singleton instance The current page DMEPageLayoutOrientation Current reader layout orientation
145
iPad
Navigates the Reader App back in the history stack
K Omniture Integration
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 frameworkssuch as Google Analytics or Flurrya 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
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.
146
iPad
Please take note of the following prerequisites for using this feature:
Appendix K Omniture Integration
2. Viewing Data Omniture

An 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-
Adobe SiteCatalyst
An example of the page view reports in Adobe SiteCatalyst can be seen in figure 2b below. Note that a default report is shown; Site Catalysts workbench is highly customizable. Also note how the concatenated pageNames appear.
fixed with c
Custom Conversion Insight Variables (eVars)
ar prefixed with v
variables that are calculated dynamically (by Omniture server)
The use of custom event event1
For a full overview of the the events and variables that are sent out by the Reader App, see section 7. Variables Sent with all Tracks.
147
iPad
A dynamicVariablePrefix (D=) is used for
Figure 2a. Viewing traffic sent to Omniture in HTTPScoop, a HTTP protocol analyzer
148
iPad
Figure 2b. The default page report view in SiteCatalyst
149
iPad
3. Setting Up SiteCatalyst
Setting up SiteCatalyst can be done in the following ways:
Setting up custom traffic variables Setting up Custom Conversion Insight
3.1 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 SiteCatalyst Property # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Name Search Terms No of Search Results User Agent Carrier Location App Name Platform | Page Name Time of Day Section User Engagement Action Platform App Name App Distribution Channel View Type Virtual Page Name Traffic - Day Parting Site Channels (Site Sections) URL Screen Orientation Offline Issue State Disabled Disabled Enabled Enabled Enabled Enabled Enabled Disabled Enabled Enabled Enabled Enabled Disabled Disabled Enabled Enabled Enabled Enabled Enabled (Continued in next column) Disabled
Variables (eVars)
Setting up custom success events
150
iPad
Table 3.1. Custom traffic variables in SiteCatalyst (continued) Property # 21 22 24 48 49 50 Name Traffic - Product Name is Subscriber Issue Custom Insight 48 Video Tracking Not For Use - Events State Disabled Enabled Enabled Disabled Disabled Disabled
3.2 Custom Conversion Insight Variables

To set up Custom Conversion Insight Variables (eVars) in SiteCatalyst, use the below table. Take note of the following:
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. to traffic variables that are not sent from the Reader App.
The values for variables with name ...., refer
Table 3.2. Custom Conversion Insight Variables (eVars) eVar # Name 3 4 5 6 11 12 13 24 27 28 30 31 32 Unique ID Merchandising Category App Name - Platform | Page Name App name Platform Version Store Type (Acquisition Channel) Install Date Store / Library Section Current Day of Week Date Time What Day
151
iPad
3.3 Custom Success Events

To set up Custom Success Events in SiteCatalyst, use the below table. Table 3.3. Custom Success events Event event1 event3 event4 event5 event6 event7 event11 Name Library Issue hit, page view App Startup First Time App Startup App Upgrade Media Play Media Stop subscriber download start Type Counter Counter Counter Counter Counter Counter Counter Counter Counter Counter Counter
4. 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 context menu. The Library Info screen appears.
event10 subscriber login event12 subscriber download finish event13 non-subscriber download start event14 non-subscriber download finish
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. Le ave th e M o d u l e key s et 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 informing them that when accessing the magazine, specific information is gathered. The user will have the option to cancel or continue.
152
iPad
Step 4. Choose the Targets tab.
Enabling this setting is mandatory; if not set, the Reader App wont pass the Apple approval process. Make sure to add the appropriate localization strings with your magazines 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.
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.
Table 4. Parameter values for the DMAnalytics.plist file Key Account Tracking server Backlog expire time in days App name App platform Enabled Visitor cookie ID Visitor cookie ID expiry in days
1
Description Omniture account Omniture tracking server Expire time of the backlog events in number of days. Application name for Omniture Application platform for Omniture Omniture enabled (1) or disabled (0). Name of cookie to set with the (hashed version) of the unique device ID The expiration time of the visitor cookie id.
Value woodwing1 <tracking server address>1 7 woodwing1 ipad 1 omni_vid 1825
This value is specific to your account; consult your Omniture contact for the correct value.
153
iPad
5. Events
Table 5 shows the events that are tracked within the application. Table 5. Events tracked within the application Event hitDownloadIssueWithCategory hitVisitToStoreLandingPage hitVisitToLibrary hitVisitToCover hitVisitFreePreviewPageWithCategory hitVisitCurrentIssueTOC hitVisitToNewsFeed hitVisitToPage hitVisitToAd hitSlideForSlideShowOnPage hitVisitToURL appLaunch appExit mediaOpen mediaPlay Trigger Called when an issue is going to be downloaded, after having bought one. Called when user opens the Store. Called when user opens the Library Called when user accesses the magazine cover, but not when in Library. Called when user accesses an issue preview. Called when user accesses the Table Of Content of current issue, with optionally the current section. Called when user accesses the News Feed screen Called when user accesses a page Called when user accesses an ad page Called when user accesses a slide in a slide show. Note that upon accessing a page containing a slide show, this function is called immediately for the first slide. Called when user visits a URL. Called when the app launches. Called when the app terminates gracefully. Called whenever a media file is accessed. Called whenever a media file (video or audio) is started. length, name name,offset Continued on next page title, section, issue title, section, issue title, section, issue, slide url issue, purchaseid section Parameters issue, currencyCode, price, purchaseId
154
iPad
Table 5. Events tracked within the application (continued) Key mediaClose mediaStop hotSpotOpen Description Called when a media file (video or audio) is closed. Called when a media file (video or audio) is stopped. Called when a Hotspot opens Value name name, offset hotspotid
155
iPad
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 HotspotOpen Variable prop14 prop9 eVar21 events trackLink linkType linkName Value prop6; <hotSpotId>; D=c9; event9; <pageName> o
SubscriberLogin
Table 6.1b. Variables for SubscriberLogin Variable events prop22 pageName prop16 prop6 trackLink linkType linkName Value event10; subscriber; kiosk|signin; kiosk; <platform>kiosk|signin <platform>kiosk|signin o signin;
156
iPad
hotspot
appLaunch
Table 6.1c. Variables for appLaunch Variable events pageName prop16 prop6 trackLink: linkType: linkName: Value event3,event4,event5 (event3 = startup, event4 = if first time, event5 = upgrade) app other <prop11>|<pageName> app o app
hitDownloadIssueWithCategory Event
Table 4c. Variables for hitDownloadIssueWithCategory Variable events products purchaseID pageName prop16 prop6 track link linkType linkName Value purchase <purchase parameters> <purchase id> store store <prop11>|<pageName> o store store currencyCode <currency code of app store>
hitVisitToURL
Table 6.1d. Variables for hitVisitToURL Variable events tracklink linkType linkName pageName Value event1 <url> e <url> library | <pageName>
157
iPad
6.2 Track Links mediaOpen

Table 6.2a. Variables for mediaOpen Variable trackVars eVar20 prop9 prop14 eVar21 Value eVar20,eVar21,prop9,prop14; <name>; Media: <mediaURL>; <pageName>; D=c9;
mediaClose
Table 6.2c. Variables for mediaClose Variable trackVars eVar20 prop9 prop14 eVar21 Value eVar20,eVar21,prop9,prop14; <mediaURL>; Media: <mediaURL>; <pageName>; D=c9;
Table 6.2b. Variables for mediaPlay Variable trackVars trackEvents eVar20 events prop9 prop14 eVar21 Value eVar20,eVar21,events,prop9,prop14; event6; <mediaURL>; event6; Media: <mediaURL>; <pageName>; D=c9;
Table 6.2d. Variables for mediaStop Variable trackVars trackEvents eVar20 events prop9 prop14 Value eVar20,eVar21,events,prop9,prop14; event7; <mediaURL>; event7; Media: <mediaURL>; <pageName>;
158
iPad
mediaPlay
mediaStop
hitVisitToExistingPrintSubscriber
Table 6.2e. Variables for hitVisitToExistingPrintSubscriber Variable pageName prop6 Value store|existing print subscriber store|existing print subscriber
hitSlideForSlideShowOnPage
Table 6.2g. Variables for hitSlideForSlideShowOnPage Variable events pageName prop16 prop20 prop6 prop8 Value event1 library|<issue>|<title>-<pageid>|slideshow-<slide> library <issue> <prop11>|<pageName> <section>
hitVisitToSubscribe
Table 6.2f. Variables for hitVisitToSubscribe Variable pageName prop6 Value store|subscribe store|subscribe
hitVisitToAd
Table 6.2h. Variables for hitVisitToAd Variable events pageName prop16 prop20 prop6 prop8 Value event1 ads|<issue>|<section>|<title>-<pageid> library <issue> <prop11>|<pageName> ads
159
iPad
hitVisitToPage
Table 6.2j. Variables for hitVisitToPage Variable events pageName prop16 prop6 prop20 prop8 Value event1 library|<issue>|<section>| <title>-<pageid> library <prop11>|<pageName> <issue> <section>
hitVisitToCurrentIssueTOC
Table 6.2l. Variables for hitVisitToCurrentIssueTOC Variable prop16 prop6 prop20 prop8 Value library library|<issue>|toc <issue> toc
hitVisitFreePreviewWithIssueInfo
hitVisitToNewsFeed
Table 6.2k. Variables for hitVisitToNewsFeed Variable pageName prop16 prop6 Value newsfeed other newsfeed
Variable pageName prop16 prop6
Value store|<issue>|preview store store|<issue>|preview
160
iPad
Table 6.2m. Variables for hitVisitFreePreviewWithIssueInfo
hitVisitToCover
Table 6.2n. Variables for hitVisitToCover Variable events pageName prop16 prop6 prop24 Value event1 store|<issue> | landing page store <prop11>|<pageName> <issue>
hitVisitToLibrary
Table 6.2p. Variables for hitVisitToLibrary Variable events pageName prop16 prop6 Value event1 library library <prop11>|<pageName>
hitVisitToLibraryCover
Table 6.2o. Variables for hitVisitToLibraryCover Variable events pageName prop16 prop6 prop20 Value event1 library|<issue> library <prop11>|<pageName> <issue>
Table 6.2q. Variables for hitVisitToStoreLandingPage Variable events products purchaseID pageName prop16 prop6 Value prodView,event1 <purchase parameters> <purchase id> store|<issue id>|preview store <prop11>|<pageName>
161
iPad
hitVisitToStoreLandingPage
downloadStarted
Table 6.2r. Variables for downloadStarted Variable events products pageName prop6 prop20 prop16 trackLink linkType linkName Value For subscribers: event11 Else: event13 <issue> Library | <issue> pageName <issue> library <issue> o downloading
downloadFinished
Table 6.2s. Variables for downloadFinished Variable events products pageName prop6 prop20 prop16 prop6 trackLink linkType linkName Value For subscribers: event12 Else: event14 <issue> Library | <issue> Library | <issue> <issue> library <issue> o @downloaded Library | <issue>
162
iPad
7. Variables Sent with all Tracks

Table 7. Variables sent with all tracks Variable channel prop3 prop7 prop10 prop11 prop12 prop18 prop19 prop22 eVar3 visitorID eVar4 eVar5 eVar6 eVar11 eVar12 eVar13 eVar22 eVar23 eVar24 eVar27 eVar28 eVar30 eVar32 D=c8 <current day of week> <what day> Value <app name> <platform> D=User-Agent <date>-<time> <platform> <app name> <platform> itunes <orientation> subscriber or non-subscriber <unique id> <unique id> D=c4 D=c5 D=c6 <app name> <platform> <version> D=c12 <installed date> D=c22 D=c20 D=c16 offline or empty
163
iPad
L Subscription Server Integration

This appendix contains information about integrating 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 subscription 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
Step 1. C o nf i g u r i n g th e S u b s c r i p t i o n environment. Step 2. Configuring the Content Delivery Platform. Each step is explained in the following sections.
164
iPad
Setting up the Subscription functionality using an external subscription server involves the following steps:
Appendix L Subscription Server Integration
1.1 Configuring the Subscription Environment

The subscription environment consists of the following components:
Web pages with specific information or
1.1.1 Web Pages

In order to let the user interact with the subscription service, various Web pages need to be available. The following Web pages need to be prepared:
Subscription page. A Web page which
functionality The Subscription server
How to configure each is explained in the following sections.
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
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 users 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. users can use for resetting their password. This page is shown full screen in the Reader App.
Reset password page. A Web page which
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.
165
iPad
which users can use for upgrading their subscription. This page is shown full screen in the Reader App. Note that one page is used for both orientations.
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 section 3.2, Store Settings.)
Table 1.1.2. Subscription server components Keyname Vertical offer Reset password Horizontal offer Upgrade subscription URL Subscription URL License agreement Privacy notice Customer service Type String String String String String String String String Default value verticalOffer resetPassword horizontalOffer upgradeSubscription buySubscription license privacy myAccount Description URL to the offer page in portrait mode URL to the Reset Password page URL to the offer page in landscape mode URL to the Upgrade subscription page URL to the subscription page URL to the License Agreement page URL to the Privacy Notice page URL to the Account page
166
iPad
1.2 Configuring the Content Delivery Platform

The Content Delivery Platform platform needs to be connected 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.
167
iPad
M iTunes Subscription Server Integration

This appendix contains information about integrating the Apple iTunes subscription server in the iPad Reader App and customizing the Reader App for use with a subscription service. For information about integrating any other external subscription 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
Step 1. C o nf i g u r i n g th e S u b s c r i p t i o n environment. Step 2. Configuring the Content Delivery Platform. Step 3. Configuring the Reader App. Each step is explained in the following sections.
168
iPad
Setting up the Subscription functionality using the iTunes subscription server involves the following steps:
Appendix M iTunes Subscription Server Integration
Step 1. The Subscription Environment

The subscription environment consists of the following components:
Web pages with specific information or The iTunes Subscription server
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
functionality
How to configure each is explained in the following sections.
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.
169
iPad
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 appendix 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
170
iPad
An example myAccount page is provided in the project and can be found in the following location:
Resources/myAccount/
Text
The text which is displayed on the page is derived from the myAccount.html file. Adjust or localize the text as required.
The look & feel of the page can be changed by customizing the following components:
The text displayed on the page The images displayed on the page The design of the page
Images
The following images can be customized:

BG1.png. The images for the background of
Each is described on the following pages. Pages in the correct dimensions for each orientation (landscape and portrait) are automatically created during the building process of the Reader App.
the areas at the top and bottom of the page. CSS reference: CSS file: myaccount.css Class selectors: .header-container .footer-container transfer process between iPads. Reference: HTML file: myaccount.html Attribute: <div class="header-container" id=" header- container">
iPad.png. The graphic which visualizes the
Creating a custom page
When 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.
loader.gif.A loader displayed during the
transfer process. Reference: HTML file: myaccount.html Attribute: <div class="container" id="container">
171
iPad
Design
The design of the page is controlled 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-container Heading size. Class selectors: .h1 .h2 Text color. Class selector: .ul Text margins. Class selector: .li Transfer button. Class selector: .buttontransfer .buttontransfer 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
172
iPad
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 subscription 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
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.
shown in iTunes Connect to identify the subscription. subscription.
Product ID: A unique ID for the 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 subscribed user will have access to the following issues (the date that will be used to check if an issue is included in a
173
iPad
Step 4. Repeat Steps 2 and 3 to add additional subscription offers as needed.
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 created and subsequently sent to WoodWing. Perform the following steps: Step 1. Access the In App Purchases overview page for the Reader App on iTunes Connect. Step 2. Click Generate Shared Secret. Step 3. S e n d t h e g e n e r a te d c o d e to WoodWing by using the following e-mail address: services@woodwing.com. Include the following information:
Customer name Product ID of the Reader App, as defined
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.
on the Content Delivery Platform
Generated secret key
174
iPad
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.
175
iPad
N Reader App Features Comparison

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.
176
Appendix N Reader App Features Comparison
Table 1. Reader App features - compared by Reader App version Reader App Version Feature Navigation bar Action bar Navigation bar / Action bar buttons Buy button Library button Magazine button Cover button TOC button External back button Navigation Contents button Newsfeed button Help button Account button Custom button Always display Navigation bar Show toolbar on opening issue Section Viewer Hide Section Viewer Story Viewer / Page Viewer Pages grouped by story iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0
177
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Story Viewer / Page Viewer Page numbers Page scrubber Top Toolbar Image icon Always display top Toolbar Action bar Image icon Forward/Back buttons In Navigation bar Navigation (Continued) TOC List Option to disable Bookmarks Hotzones Horizontal page navigation Story navigation Two-finger swiping Right-to-left support Orientation lock Link to Store or Library in Web Element Access Store on app launch
178
iPad 2.1
Android 1.3 (Froyo)
Android 1.3 (Honeycomb)
HTML5 1.0
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Video Pinching movement for full screen view Done button Aspect ratio button Remove video after play Hide video controls Audio Audio Control Audio continues playing when navigating to another page Dynamic content Hidden audio controls Slide Shows Hotspots Tap-through Hotspot Web Elements Automatically scale content to fit screen Widgets Scrollable Areas Web Links Dossier Links On a layout iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0

179
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Dossier Links (Continued) Dynamic content (Continued) In a Web Element Fullscreen overlay window Newsfeed Newsfeed Full screen Fallback Newsfeed page Text View Push Notifications Text View Push notifications (messages) Content Sharing Content Sharing Share Hyperlink Share page Share part of a page HTML Store Store Filters Subscriptions (non-iTunes) Store Subscriptions (iTunes) Mixed subscriptions support In-app purchase 3G downloading Library Library iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0

180
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Segments Library (Continued) Library filter Segment filter Library caching Non-progressive Downloading issues Progressive Auto open after/during download All Segments in one download Customization Internet Version info APIs Custom Home page No Internet indicators Version info Fit page when device dimensions do not match page dimensions Display message when device dimensions do not match page dimensions Analytics Magazine encryption Newsstand support iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0
Page fitting
Analytics Magazine encryption iOS 5 Newsstand
181
O Licenses
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. the Android Reader App for parsing the json file.
Jackson Java JSON-processor. Used by
182
Appendix O Licenses
1. android-plist-parser
https://github.com/tenaciousRas/android-plist-parser
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, E XEMPL ARY, 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.
License
This 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 distributed 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.
183
Appendix O Licenses
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 purposes of this definition, control means (i) the power, direct or indirect, to cause the direction or management 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 making modifications, including but not limited to software source code, documentation source, and configuration 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 represent, 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 modifications 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 definition, submitted means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication 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 conspicuously marked or otherwise designated in writing by the copyright owner as Not a Contribution.
184
Appendix O Licenses
Contributor shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 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 display, 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 infringement, 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 prominent 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 distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated 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
185
Appendix O Licenses
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 applicable 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 warranties 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 damages, 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 redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations 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 information. (Dont 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 compliance 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 writing, 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 permissions and limitations under the License.
186
nection
hen
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
og
WoodWing Europe Zaandam, The Netherlands Tel +31 75 61 43 400 info@woodwing.com WoodWing USA Detroit, Michigan USA Tel +1 313 962 0542 usa@woodwing.com
WoodWing Asia Pacific Selangor Darul Ehsan, Malaysia Tel +60 3 8320 1839 asiapacific@woodwing.com WoodWing Latin America Monterrey NL, Mexico Tel +52 1 81 88345 8927 latinam@woodwing.com
er
www.woodwing.com

DM Reader App User Guide v1.1.13

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

DM Reader App User Guide v1.1.13

Caricato da

Copyright:

Formati disponibili

Digital Magazine Reader App

Digital Magazine Reader App User Guide

Digital Magazine Reader App User Guide

WoodWing Publishing Solutions

WoodWing Publishing Solutions

Enterprise Content Publishing System

WoodWing Productivity Plug-ins

WoodWing Publishing Solutions

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

Digital Magazines Tools

1. Purpose and Target Readers

4. Using This User Guide

HTML5 Web browser

4.3 Navigating the PDF

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

02 About the Reader App

Chapter 02 About the Reader App

Basic and Standard. This project comes

Apple iPad projects

Basic and Standard. These come without

Pro and Framework. This project includes

Pro and Framework: same as the Basic and

Basic. This project comes without the Store,

Subscription: same as the Pro and

Apple Subscriptions: same as the Pro and

Chapter 02 About the Reader App

Dynamic content such as video, audio, slide

A Store (Pro, Framework, Subscription, and

Customizing the iPad Reader App.

A Library (Pro, Framework, Subscription, and

For the Android Reader App: chapter 9,

For the HTML5 Reader App: chapter 11,

Customizations and licenses

Customizations. Additional functionality can

the App icon and name.

Standard/Basic: you are allowed to build 1

App using the Standard/Basic project.

Not available on the HTML5 Reader App. 7

Chapter 02 About the Reader App

4.1 Getting the Content on the Device

is downloaded at a later stage

Chapter 02 About the Reader App

4.2 Distribution and Payment Models

Complete magazine. All magazine content

is made available in one download.

Reader App without content

Free of charge. Magazines can be offered

fully free of charge.

Single purchase. Magazines can be offered

Subscription functionality only). Magazines can be offered as part of a subscription service.

Chapter 02 About the Reader App

5. New Features and Changes

5.1 New Features

5.1.1 Android Reader App

All drawables shared between Honeycomb

and Froyo are located in the drawable-nodpi folder.

Any Honeycomb-specific drawables are

Any Froyo-specific drawables are located in

Chapter 02 About the Reader App

The drawable-hdpi, drawable-mdpi and draw-

Index. Click on a page number following an

Bookmarks Panel. The bookmarks panel

Basic and Standard. This project comes

Basic and Standard. These come without

Pro and Framework. This project includes

Pro and Framework: same as the Basic and

Basic. This project comes without the Store,

Subscription: same as the Pro and

Apple Subscriptions: same as the Pro and

Dynamic content such as video, audio, slide

A Store (Pro, Framework, Subscription, and

A Library (Pro, Framework, Subscription, and

For the Android Reader App: chapter 9,

For the HTML5 Reader App: chapter 11,

Customizations. Additional functionality can

Standard/Basic: you are allowed to build 1

Complete magazine. All magazine content

Free of charge. Magazines can be offered

Single purchase. Magazines can be offered

All drawables shared between Honeycomb

Any Honeycomb-specific drawables are

Any Froyo-specific drawables are located in

The drawable-hdpi, drawable-mdpi and draw-

Honeycomb: this button is only displayed

Action bar (Honeycomb): chapter 9,

previewshadowportrait.png. The shadow

For the second method, the page can be

Page navigation. Navigation is done as

To navigate from one page to another, the

To navigate from story to story (iPad

To navigate from one page or story to

Page navigation. In this configuration, all

To navigate within a story, the user swipes

Web browser compatibility. Safari ver-

Reader App version. Verify if the version

Google Chrome. Using Google Chrome

Operating system compatibility. Before

General use. The HTML5 version of the