Date post: | 24-Apr-2015 |
Category: |
Documents |
Upload: | luciano-arnold |
View: | 450 times |
Download: | 0 times |
Smart Publishing
User Guide
Digital Magazine Reader App
Digital MagazineReader App User Guide
document version 1.1.13
Legal Disclaimer
© 1998-2011 WoodWing Software bv. All Rights Reserved.
Digital Magazine Reader App User GuideNo part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, record-ing, or otherwise, without the prior written permission of WoodWing Software.
The information in this book is furnished for informational use only and is subject to change without notice. The software described herein is furnished under a license agreement, and it may be used or copied only in accor-dance with the terms of the agreement.
Enterprise, Content Station, Brand Station, Smart Layout, Smart Styles, Smart Catalog, and Smart Connection are trademarks of WoodWing Software. Adobe, InDesign and InCopy are trademarks of Adobe Systems Incorporated. Apple, Mac, and Macintosh are trademarks of Apple Computer, Inc. registered in the U.S. and other countries. Microsoft, Windows, Windows XP and Windows Vista are trademarks of Microsoft Corporation registered in the U.S. and/or other countries. All other trademarks are the property of their respective owners.
Production NoteThis manual was created electronically using Adobe InDesign, Adobe InCopy, Adobe Acrobat, WoodWing Smart Styles, WoodWing Smart Layout, WoodWing Smart Connection, WoodWing Content Station, and WoodWing Enterprise.
iii
WoodWing Publishing Solutions
About WoodWing SoftwareSince 1997, WoodWing Software has been developing editorial solutions based on Adobe InDesign and InCopy. Using standard and proven technologies, open source components, and an open architecture, WoodWing has been creating the most progressive solutions avail-able on the market for the production of print and online publications.
WoodWing has an international roster of customers that includes many of the world’s top magazine companies, newspapers, book publishers and corporate clients.
WoodWing Software is located in Zaandam, The Netherlands, and has regional sales companies for Europe, the USA, Asia-Pacific, and Latin America. Customers are served through select partners.
Enterprise Content Publishing SystemThe Enterprise content publishing system forms the rock-solid foundation for all WoodWing’s publishing solutions. Enterprise is at the heart of the publishing process, allowing designers, editors, external journalists, IT and managers to easily collaborate and meet deadlines, while controlling document versions, access rights, storage, and more.
Enterprise is completely integrated with solutions for plan-ning, wire, DAM, archive, Web CMS, mobile publishing and numerous other systems. In fact, it has specifically been designed to easily integrate with any system around.
Content StationWoodWing’s solution ensures that all steps of the editorial process — content planning, gathering material, editing and selecting, plus managing strategic publication of con-tent to any output channel — are executed from just one location: WoodWing’s Content Station application.
Content Station is the ‘publishing desktop’ from which a user carries out his tasks. It provides an intuitive and uniform user-interface during all stages of the publish-ing process. Content Station is available in a Pro Edition, Basic Edition, and a Free Edition.
Brand StationBrand Station is WoodWing’s Web-to-Print solution for corporations, ad agencies and print-service providers. It helps to ensure correct use of corporate design guide-lines, while taking the load off internal departments.
Based on the principle of three user types—the Brand Owner, the Brand Designer, and the Brand User, Brand Station provides a controlled environment for the creation of company-branded material. Designers create tem-plates according to company guidelines. After approval by the Brand Owner, Brand Users can access these tem-plates in Brand Station, customize them to a predefined extent, and create publication-ready files, all using just a Web browser.
WoodWing Productivity Plug-insWoodWing provides plug-ins for Adobe InDesign and InCopy that make working with these applications easier, faster, and much more effective. For a full overview of these plug-ins, see the next page.
Smart StylesThe award-winning Smart Styles automated styling tool delivers powerful formatting capabilities to Adobe InDesign users. This unique software combines object-, table- and smart text styles into powerful Smart Styles.
Smart Styles are conveniently stored in libraries and can be applied with a simple drag and drop to set all of the styling attributes of the object or group of objects. Smart Styles removes repetitive and time-consuming tasks and ensures consistent formatting.
WoodWing Publishing Solutions
iv
WoodWing Publishing Solutions
Smart LayoutSmart Layout optimizes and speeds up the layout pro-cess by adding the Article concept to InDesign. An Article consists of several elements, such as the head, intro, body and also images. Smart Layout defines a relation-ship between these elements.
Smart Layout’s intelligent behavior and automatic pro-cesses strongly improve the efficiency of InDesign users working with multiple columns of text. This is of partic-ular interest for newspapers and magazines with tight deadlines.
Smart CatalogSmart Catalog is a scalable and powerful solution to pub-lish variable data right from inside Adobe InDesign. Smart Catalog links data from a plain text- or XML file, or a data-base to an InDesign document. After the corresponding links have been set up, Smart Catalog lets you manage the data in your InDesign document.
Smart Catalog can be used to efficiently create any pub-lication that links to external data. Examples include price lists, image catalogs, product overviews, travel brochures, exhibition books, etc.
Updating the publication with the latest information then becomes as easy as one click of a button.
Digital Magazines ToolsWoodWing’s Digital Magazine Tools are an extension to the Enterprise Publishing System. These tools enable publishers to easily create beautifully-designed and com-pelling content for tablets like the iPad, and to distribute it through a branded Reader app that offers a unique enduser experience.
What makes this solution quite special is that the creation process is, to a large extent, identical to the traditional process of creating content for print. Designers use their familiar tools, such as Adobe InDesign and Content Station, to add interactivity to their layouts.
For more information about WoodWing products, visit www.woodwing.com.
vi
Contents
Contents
Chapter 01 | Introduction ����������������������� 11. Purpose and Target Readers ������������������� 12. Product Versions ������������������������������ 23. Working Environment �������������������������� 24. Using This User Guide ������������������������� 2
4.1 Sections ����������������������������������� 24.2 Icons ������������������������������������� 34.3 Navigating the PDF ������������������������� 3
5. Additional Documentation ���������������������� 46. Feedback ������������������������������������ 4Chapter 02 | About the Reader App �������������� 51. Available Projects ����������������������������� 62. Functionality ��������������������������������� 73. Ways of Customizing �������������������������� 74. Distribution ����������������������������������� 8
4.1 Getting the Content on the Device ������������� 84.2 Distribution and Payment Models ������������� 9
5. New Features and Changes ������������������� 105.1 New Features ����������������������������� 10
5.1.1 Android Reader App ��������������������� 105.1.2 iPad Reader App ������������������������ 135.1.3 Content Delivery Platform ���������������� 13
5.2 Changes ��������������������������������� 14Chapter 03 | The Concept ���������������������� 161. Page Orientation ����������������������������� 162. Page Dimensions ���������������������������� 173. Stories, Pages, Sections and Segments ��������� 18Chapter 04 | Using the Reader App �������������231. Features by Platform��������������������������232. Basic Viewing ������������������������������� 243. Requirements �������������������������������264. Page Scaling �������������������������������� 275. Accessing the Reader App ��������������������286. Accessing the Magazine ����������������������29
6.1 From Within the Reader App�����������������296.2 From Within the Newsstand �����������������30
7. Navigation Tools �����������������������������327.1 Top Toolbar �������������������������������34
7.1.1 TOC List �������������������������������347.2 Navigation Bar ����������������������������35
7.2.1 The Back Button ������������������������367.2.2 The Forward Button ���������������������367.2.3 The Buy Button �������������������������367.2.4 The Library Button ���������������������� 377.2.5 The Cover Button �����������������������387.2.6 The TOC Button ������������������������387.2.7 The Contents Button ��������������������387.2.8 The Newsfeed Button �������������������397.2.9 The Help Button ������������������������397.2.10 The Account Button ��������������������39
7.3 Action Bar ��������������������������������408. Navigating the Reader App ��������������������42
8.1 Hotzones ���������������������������������438.2 Navigation Zones ��������������������������438.3 Gestures ���������������������������������448.4 Section Viewer ����������������������������448.5 Story Viewer / Page Viewer �����������������458.6 Page Scrubber ���������������������������� 478.7 Forward/Back Buttons ��������������������� 478.8 TOC List ���������������������������������488.9 Bookmarks List ���������������������������49
8.9.1 Bookmarking a Story ��������������������508.9.2 Accessing a Bookmark ������������������508.9.3 Deleting a Bookmark �������������������� 518.9.4 Managing Bookmarks �������������������52
8.10 Dossier Links ����������������������������538.11 Device Rotation ��������������������������53
9. Dynamic Content ����������������������������549.1 Video ������������������������������������54
9.1.1 Manual Playback ������������������������559.1.2 Fullscreen Playback ���������������������56
9.2 Audio ������������������������������������579.2.1 Using Embedded Controls ���������������589.2.2 Using the Audio Control �����������������58
9.3 Slide Shows ������������������������������599.3.1 Viewing in Frame ������������������������609.3.2 Viewing in Fullscreen Mode ��������������60
9.4 Hotspots ��������������������������������� 619.5 Web Elements ����������������������������629.6 Scrollable Areas ���������������������������63
vii
Contents
9.7 Text View ���������������������������������6310. Newsfeeds ���������������������������������6511. Sharing Content ����������������������������66
11.1 Sharing a Page ���������������������������6711.2 Sharing Part of a Page ���������������������6811.3 Sharing a Hyperlink �����������������������6911.4 Reader App Settings ���������������������� 70
12. Using the Store ����������������������������� 7112.1 Store With Subscription Functionality ��������73
12.1.1 The iTunes Subscription Service ����������7312.1.2 A Non-iTunes Subscription Service ������� 7512.1.3 Signing In or Out �����������������������7712.1.4 Subscribing ��������������������������� 7812.1.5 Upgrading a Subscription ���������������78
12.2 Navigating the Store ����������������������7912.3 Previewing an Issue �����������������������7912.4 Downloading an Issue ���������������������80
12.4.1 Non-Progressive Downloads ������������8212.4.2 Progressive Downloads �����������������83
13. Using the Library ����������������������������8613.1 iPad Reader App Library �������������������8613.2 Android App Library ����������������������9013.3 Navigating the Library ��������������������� 9113.4 Using the Library Filter ��������������������� 9113.5 Using the Segment Filter �������������������9313.6 Downloading Issues and Segments ���������9413.7 Opening an Issue or Segment ��������������9413.8 Deleting an Issue or Segment ��������������95
14. Custom Home Page �������������������������9615. Version Information �������������������������9616. Reader App Updates ����������������������� 9717. Using the HTML5 Reader on a PC ������������� 97Chapter 05 | Creating Content ������������������991. Creating a Story ����������������������������1012. Creating a Dossier ��������������������������1023. Creating a Page ����������������������������103
3.1 Page Sizes �������������������������������1043.2 Effective Workspace ����������������������1073.3 Landscape Orientation ��������������������1083.4 Portrait Orientation ������������������������1093.5 Text View Mode �������������������������� 110
3.5.1 Using InDesign CS4 �������������������� 1103.5.2 Using InDesign CS5 �������������������� 112
3.6 Sections and Page Numbering ������������� 112
4. Working with DM Artboards ������������������ 1134.1 Creating a DM Artboard ������������������� 1154.2 Switching Between DM Artboards ���������� 1164.3 Adjusting the DM Artboard ���������������� 1164.4 Assigning Content to a Device �������������� 1174.5 Points to Note ���������������������������� 1184.6 Working Without Artboards ���������������� 118
5. Designing a Page ��������������������������� 1195.1 Creating a Slide Show ���������������������1235.2 Adding a Video ��������������������������� 125
5.2.1 As a URL ����������������������������� 1255.2.2 As a File ������������������������������ 1275.2.3 Auto Play �����������������������������1295.2.4 Auto Fullscreen ������������������������129
5.3 Adding an Audio File ����������������������1295.3.1 As a URL �����������������������������1305.3.2 As a File ������������������������������ 1315.3.3 Auto Play �����������������������������133
5.4 Creating a Web Element �������������������1335.4.1 Transparent Web Elements ��������������1355.4.2 Link to Store and Library ����������������1355.4.3 Scale Content to Fit Screen �������������135
5.5 Creating a Dossier Link ��������������������1365.5.1 On a Layout ���������������������������1365.5.2 In a Web Element ���������������������� 137
5.6 Basic Hotspots ���������������������������1385.6.1 Terms and Components ����������������1385.6.2 Layers �������������������������������1405.6.3 Size and Content ���������������������� 1415.6.4 Creation ������������������������������ 1425.6.5 Creating a Selected Hotspot ������������1495.6.6 Creating a Hotspot Close Button ��������� 1515.6.7 Managing Hotspots using the Layers
Panel �������������������������������� 1515.7 Hotspots on Hotspots ���������������������154
5.7.1 Terms and Components �����������������1545.7.2 Creation ������������������������������1565.7.3 Creating a Selected Hotspot �������������1625.7.4 Creating a Hotspot Close Button ���������1625.7.5 Managing Hotspots using the Layers Panel 163
5.8 Using the Hotspot Panel �������������������1635.9 Creating a Widget ������������������������1655.10 Creating a Scrollable Area �����������������1665.11 Creating a Custom Object �����������������169
viii
Contents
5.12 Creating a Help Page ���������������������1695.13 Creating Shared Content ������������������ 170
6. Summary ���������������������������������� 171Chapter 06 | Exporting Content ���������������1721. The Digital Magazine Application �������������� 172
1.1 The Search Pane ������������������������� 1741.2 The Device Toolbar ����������������������� 1741.3 The Story Pane ��������������������������� 1751.4 The Page Preview panes ������������������� 176
2. Preparing Content for Export ����������������� 1762.1 Magazine Content ������������������������ 177
2.1.1 Adding a Story ������������������������� 1772.1.2 Verifying the Story’s Content ������������� 1782.1.3 Removing a Story ���������������������� 179
2.2 Story Order ������������������������������ 1792.3 Dossier Properties ������������������������1802.4 Image Properties �������������������������1802.5 Content Sharing �������������������������� 1812.6 Sharing ofip Properties �������������������� 181
3. Exporting Content ��������������������������1823.1 Exporting and Page Scaling ����������������184
4. Summary ����������������������������������184Chapter 07 | Customizing the iPad Reader App �1851. Required Tools �����������������������������1862. Loading a Project ���������������������������1863. What Can Be Customized? �������������������187
3.1 Assets ���������������������������������� 1873.2 Colors ����������������������������������1893.3 Fonts �����������������������������������1893.4 Text ������������������������������������ 191
3.4.1 Changing the Text ���������������������� 1913.4.2 Changing the Text Color ����������������1943.4.3 Changing the Language ����������������194
3.5 Settings ���������������������������������1964. Previewing Customizations �������������������1965. General App Settings ������������������������ 197
5.1 Reader App Name ������������������������ 1975.2 Reader App Assets �����������������������1985.3 Intent Settings ���������������������������198
5.3.1 Background Downloading ���������������1995.4 Background Download Setting �������������1995.5 Version Numbering �����������������������200
5.5.1 Version Verification ���������������������2015.5.2 Update Release �����������������������202
6. Navigation ���������������������������������2036.1 Story vs Page Navigation ������������������2036.2 Orientation Lock ��������������������������2046.3 Right-To-Left Support ���������������������2056.4 Navigation Bar ���������������������������205
6.4.1 Tap Area ������������������������������2066.4.2 Visibility ������������������������������2066.4.3 Items ��������������������������������2076.4.4 Assets �������������������������������2096.4.5 Colors ������������������������������� 210
6.5 Flipview ��������������������������������� 2116.5.1 Assets ������������������������������� 2126.5.2 Colors ������������������������������� 2146.5.3 Fonts �������������������������������� 2146.5.4 Header ������������������������������� 2156.5.5 Thumbnail Size ������������������������ 2166.5.6 Thumbnail Awareness ������������������ 2166.5.7 Margins ������������������������������ 2166.5.8 Story Title ���������������������������� 2176.5.9 Story Bullets �������������������������� 2176.5.10 Story Description ��������������������� 2186.5.11 Page Scrubber ����������������������� 219
6.6 Top Toolbar ������������������������������2206.6.1 Availability ����������������������������2206.6.2 Visibility ������������������������������2216.6.3 Tap Area �����������������������������2216.6.4 Items ��������������������������������2226.6.5 Assets �������������������������������2236.6.6 Colors �������������������������������224
6.7 Hotzones ��������������������������������2246.8 Gestures ��������������������������������225
7. The Store ����������������������������������2267.1 Communication With the Store ��������������2267.2 General Store Features ��������������������227
8. The Library���������������������������������2288.1 General Appearance ����������������������2298.2 Text ������������������������������������2338.3 Download Settings �����������������������2338.4 Back To Issue Button ���������������������2348.5 Library Filters ����������������������������2348.6 Subscription Sign-in ����������������������236
9. General App Features �����������������������2369.1 APIs ������������������������������������237
9.1.1 Analytics API ��������������������������237
ix
Contents
9.1.2 Gestures API ��������������������������2389.1.3 Navigation API �������������������������238
9.2 Audio �����������������������������������2399.2.1 Overlay Assets ������������������������2409.2.2 Embedded Audio Controls ��������������2409.2.3 Audio Control Pop-Up ������������������ 241
9.3 Bookmarks �����������������������������2449.3.1 Enabling the Functionality ���������������2449.3.2 Changing the Assets �������������������2459.3.3 Changing the Colors �������������������2469.3.4 Changing the Fonts ��������������������2469.3.5 Localizing the Text ��������������������� 2479.3.6 Changing the Dimensions ��������������� 247
9.4 Content Sharing ��������������������������2489.4.1 Adding Custom Metadata ���������������2489.4.2 Configuring the DigiMagSettings.h File ����2499.4.3 Cleaning the Project Targets �������������2499.4.4 Enabling the Functionality ���������������2509.4.5 Changing the Assets �������������������2509.4.6 Changing the Colors ������������������� 2519.4.7 Localizing the Text ���������������������252
9.5 Custom Home Page ����������������������2539.5.1 Requirements �������������������������2539.5.2 Header Files ��������������������������2549.5.3 Implementation ������������������������255
9.6 Custom Objects ��������������������������2579.6.1 Configuring Custom Objects �������������259
9.7 Downloading Methods ��������������������2609.7.1 Non-Progressive Downloading �����������2609.7.2 Progressive Downloading ���������������261
9.8 Fullscreen Overlay ������������������������262Step 1. Adding the Settings File ���������������262Step 2. Adding the Overlay Window Files �������262Step 3. Customization �����������������������262Step 4. Adding the Navigation Bar Button ������263
9.9 iOS 5 iCloud Support ���������������������2639.10 Libraries ��������������������������������264
9.10.1 Caching �����������������������������2649.10.2 Library Filter ��������������������������2659.10.3 Library Segment Filter �����������������266
9.11 Newsfeeds ������������������������������2679.12 Newsstand (iOS 5) �����������������������268
9.12.1 Configuration �������������������������2699.13 No Internet Connection Indicators ����������272
9.14 Push Notifications (Messages) �������������2729.14.1 Configuration �������������������������2739.14.2 Sending Messages ��������������������273
9.15 Slide Shows ���������������������������� 2749.16 Store Filter ������������������������������2759.17 Subscriptions ���������������������������276
9.17.1 Configuring the Reader App Functionality �2779.17.2 Modifying the Reader App Appearance ���278
9.18 Text View �������������������������������2839.19 TOC List �������������������������������284
9.19.1 Enabling the Functionality ��������������2859.19.2 Changing the Assets ������������������2859.19.3 Changing the Colors ������������������2869.19.4 Changing the story text ����������������2869.19.5 Changing the Width and Height ���������2879.19.6 Localizing the Text ��������������������2879.19.7 Changing the Fonts �������������������288
9.20 Video ����������������������������������2889.20.1 Overlay Assets �����������������������2899.20.2 Hiding Embedded Video Controls �������290
9.21 Remove Video After Play �����������������2919.22 Web Elements ��������������������������292
Chapter 08 | Building the iPad Reader App �����2931. Preparation ��������������������������������293
1.1 A Reader App Without Store Functionality ����2941.2 A Reader App With Store Functionality �������2941.3 An App Without Newsstand Functionality ����296
2. Building �����������������������������������296Chapter 09 | Customizing the Android Reader
App �����������������������������2971. Required Tools �����������������������������2982. OS Compatibility ����������������������������2983. Loading a Project ���������������������������2994. Universal Builds ������������������������� 3005. What Can Be Customized? �������������������300
5.1 Drawables �������������������������������3015.2 Text ������������������������������������301
5.2.1 Changing the Text����������������������3025.2.2 Changing the Language ����������������304
5.3 Settings ���������������������������������3056. Previewing Customizations �������������������3057. General App Settings ������������������������306
7.1 Reader App Name ������������������������3067.2 Reader App Drawables ��������������������307
x
Contents
7.3 Web Pages ������������������������������3077.3.1 Custom Information ��������������������3087.3.2 Metrics Information ���������������������308
7.4 Version Information ������������������������ 3117.5 Intent Settings ���������������������������� 311
8. Navigation ��������������������������������� 3128.1 Story vs Page Navigation ������������������ 3128.2 Navigation Bar ��������������������������� 313
8.2.1 Tap Area ������������������������������ 3148.2.2 Items �������������������������������� 3148.2.3 Drawables ���������������������������� 3158.2.4 Visibility Settings ����������������������� 317
8.3 Action Bar ������������������������������� 3178.3.1 Tap Area������������������������������ 3188.3.2 Items �������������������������������� 3188.3.3 Drawables ����������������������������3208.3.4 Text ���������������������������������3238.3.5 Visibility ������������������������������323
8.4 Flipview ���������������������������������3248.4.1 Header �������������������������������3258.4.2 Story Viewer / Page Viewer ��������������3268.4.3 Page Scrubber ������������������������3298.4.4 Section Viewer ������������������������3308.4.5 Close Button ��������������������������3318.4.6 Drop Shadow �������������������������332
8.5 Top Toolbar ������������������������������3338.5.1 Availability ����������������������������3338.5.2 Visibility ������������������������������3338.5.3 Tap Area �����������������������������3348.5.4 Items ��������������������������������3348.5.5 Drawables ����������������������������335
8.6 Hotzones ��������������������������������3358.7 Orientation Lock ��������������������������336
9. The Store ����������������������������������3379.1 Communication With the Store ��������������3389.2 Reader App Components ������������������339
10. The Library ��������������������������������34210.1 Subscription Sign-In Window ��������������34210.2 Library ���������������������������������345
11. General App Features �����������������������34911.1 Audio ����������������������������������349
11.1.1 Overlay Drawables ���������������������35011.1.2 Audio Settings ������������������������35011.1.3 Embedded Audio Controls �������������351
11.2 Custom Objects �������������������������35111.3 Downloading Methods ��������������������352
11.3.1 Non-progressive Download Method �����35211.3.2 Progressive Download Method ���������353
11.4 In-App Billing ����������������������������35511.5 Newsfeeds �����������������������������35611.6 No Internet Connection Indicators ����������35711.7 Scrolling Indicators �����������������������35811.8 Slide Shows ����������������������������35911.9 Text View �������������������������������35911.10 Video ���������������������������������360
11.10.1 Overlay Drawables �������������������36111.10.2 Video Player Drawables ���������������362
11.11 Hiding Embedded Video Controls ���������36311.12 Web Elements ��������������������������364
Chapter 10 | Building the Android Reader App ��3651. Universal Builds �����������������������������3652. Preparation ��������������������������������366
2.1 Eclipse ����������������������������������3662.2 Reader App Without Store Functionality ������3672.3 Reader App With Store Functionality ��������367
3. Building �����������������������������������368Chapter 11 | Customizing the HTML5 Reader
App �����������������������������3691. Required Tools �����������������������������3702. Project Files ��������������������������������3703. What Can Be Customized? �������������������371
3.1 Images ����������������������������������3723.2 Colors ����������������������������������3723.3 Text ������������������������������������3733.4 Settings ��������������������������������� 374
4. Previewing Customizations ������������������� 3745. General App Features �����������������������375
5.1 General Appearance ����������������������3756. Navigation ���������������������������������378
6.1 Story vs Page Navigation ������������������3786.2 Navigation Bar ���������������������������379
6.2.1 Items ���������������������������������3796.2.2 Images �������������������������������380
6.3 Flipview ���������������������������������3816.3.1 Background ���������������������������3826.3.2 Header �������������������������������3826.3.3 Thumbnail Border ���������������������3836.3.4 Story Title ����������������������������383
xi
Contents
6.3.5 Story Bullets ��������������������������3846.3.6 Story Description ����������������������3846.3.7 Page Scrubber ������������������������385
6.4 Hotzones ��������������������������������3856.5 Navigation Zones �������������������������3866.6 Top Toolbar ������������������������������387
6.6.1 Availability ����������������������������3876.6.2 Images �������������������������������387
7. General App Features ������������������������3887.1 Audio �����������������������������������3887.2 Slide Shows �����������������������������389
7.2.1 Navigation Zones ����������������������3897.2.2 Overlay Images ������������������������389
7.3 TOC List ��������������������������������3907.3.1 Enabling the Functionality ���������������3907.3.2 Changing the story text �����������������391
7.4 Video �����������������������������������391Chapter 12 | Building the HTML5 Reader App ���3921. Bundling the Content ������������������������392Chapter 13 | Distributing Reader Apps Without
Store ����������������������������3941. Submitting the Reader App �������������������394
1.1 To the iTunes App Store �������������������3951.2 To an Android App Store ������������������395
Chapter 14 | Distributing Reader Apps With Store ����������������������������396
1. The Content Delivery Platform ����������������3972. Distribution Workflow ������������������������3983. Distributing the Reader App ������������������398
3.1 Updating the Reader App ������������������3994. Distributing Issues ��������������������������400
4.1 Registering With iTunes Connect ������������4004.2 Registering With the CDP ������������������400
Appendix A | Layout Sizes ��������������������4011. Formula �����������������������������������401
1.1 Device Settings ���������������������������4021.2 Page Sizes ������������������������������402
Appendix B | Creating Text View Markup Articles �������������������������404
1. Text View Markup ���������������������������4042. Requirements ������������������������������4053. Creating the Article ��������������������������405
3.1 Element Label Mapping ��������������������4063.2 Styles Mapping ��������������������������407
4. About Overrides ����������������������������4075. Using Tables �������������������������������4086. Known Limitations ��������������������������4087. Including Images ����������������������������409Appendix C | Image Dimensions ���������������4101. iPad ��������������������������������������� 4102. Android ������������������������������������ 4173. HTML Store �������������������������������4224. HTML5 Reader App ������������������������422Appendix D | Working With Widgets �����������4241. File Format ���������������������������������4242. File Structure �������������������������������4253. Creating the manifest.xml File �����������������4254. Making the Widget Available ������������������427Appendix E | The DMSettings File �������������4281. File Structure �������������������������������4282. Features by Platform ������������������������4293. Overview ����������������������������������439
3.1 Share Toolbar Settings ��������������������4393.2 Store Settings ����������������������������4403.3 Navigation Settings �����������������������441
3.3.1 Color Settings �������������������������4443.3.2 Font Settings��������������������������446
3.4 Intents Settings ���������������������������4483.5 TOC Popup Settings ����������������������4483.6 Bookmark Popup Settings �����������������4493.7 Hotzone Settings �������������������������4493.8 Flipview Settings �������������������������4503.9 Library Settings ��������������������������4513.10 Metrics ���������������������������������4523.11 Content ��������������������������������4533.12 Resolution ������������������������������4533.13 Tracking ��������������������������������4543.14 Web Element Popup ���������������������4543.15 Newsstand �����������������������������455
Appendix F | Using the Content Delivery Platform ������������������������456
1. Logging In and Logging Out ������������������4562. System Structure ���������������������������457
2.1 Accessing the Components ����������������4592.2 User Types ������������������������������460
3. Setting Up the CDP Environment ��������������4633.1 Adding a Domain �������������������������4633.2 Adding a Reader Application ���������������464
xii
Contents
3.3 Adding a User ����������������������������4653.4 Adding an Issue ��������������������������465
3.4.1 Adding a Full Issue ���������������������4663.4.2 Adding an Issue in Segments ������������4683.4.3 Adding a Subscription ������������������ 471
3.5 Adding a Development Device ��������������4724. Managing the CDP Environment ��������������473
4.1 Configuring Reader Apps ������������������4734.1.1 Configuring the Metadata ���������������� 475
4.2 Managing Issues ������������������������� 4754.2.1 Adding an Issue ����������������������� 4754.2.2 Deleting an Issue ���������������������� 4764.2.3 Editing an Issue ����������������������� 4764.2.4 Adding a Rendition ���������������������4774.2.5 Convert to HTML5 ���������������������478
4.3 Managing Segments ����������������������4784.3.1 Adding to a New Issue ������������������4784.3.2 Adding to an Existing Issue ��������������4794.3.3 Deleting a Segment ��������������������4804.3.4 Editing an Segment ��������������������4804.3.5 Adding a Rendition ���������������������4814.3.6 Sorting Segments ���������������������482
4.4 Managing Renditions ����������������������4824.4.1 Adding a Rendition ���������������������4834.4.2 Convert to HTML5 ���������������������4844.4.3 Deleting a Rendition ��������������������4854.4.4 Editing an Rendition ��������������������485
4.5 Managing Subscriptions �������������������4864.5.1 Adding Subscription ��������������������4864.5.2 Deleting a Subscription �����������������4864.5.3 Editing an Subscription �����������������4874.5.4 Sorting Subscriptions ������������������487
4.6 Managing HTML5 Conversions �������������4884.6.1 Converting to HTML5 Format ������������4894.6.2 Removing Converted Content �����������490
4.7 Managing Development Devices ������������4904.7.1 Adding a Development Device �����������4904.7.2 Deleting a Development Device ����������4914.7.3 Editing a Development Device �����������491
4.8 Sending a Push Notification (Message) �������4924.8.1 Sending a Message to Users ������������4924.8.2 Sending a Newsstand Notification ��������494
4.9 Managing Users ��������������������������4954.9.1 Adding a User �������������������������495
4.9.2 Editing a User Profile �������������������4955. Progressive Downloads ����������������������4966. Magazine Encryption ������������������������497Appendix G | Customizing the HTML Store �����4981. Required Tools �����������������������������4982. The Store ����������������������������������499
2.1 Opening Issues Directly From the Store ������5043. Project Files ��������������������������������505
3.1 Configuration Settings ���������������������5063.2 Images ����������������������������������5073.3 Colors ���������������������������������� 5133.4 Fonts ����������������������������������� 5153.5 Text ������������������������������������ 516
3.5.1 Changing the Text ��������������������� 5163.5.2 Changing the Color �������������������� 517
3.6 Language ������������������������������� 5183.7 iTunes Subscription Environment ������������ 519
3.7.1 Page Design ���������������������������5213.7.2 Text ����������������������������������5213.7.3 Text Styling ���������������������������5223.7.4 Subscription Buttons �������������������523
3.8 Non-iTunes Subscription Environment �������5253.8.1 A Sign In/Sign Out Button ���������������5253.8.2 The Subscription Offer Page ������������5273.8.3 The Subscription Button Area �����������527
3.9 A Mixed Subscription Environment ����������528Appendix H | Tips and Best Practices ����������5301. Generating IDs and Keys ���������������������5302. Submitting and Approval Cycles ��������������531Appendix I | Gestures API ���������������������532Appendix J | Navigation API �������������������5341. Structure ����������������������������������5342. Classes������������������������������������536Appendix K | Omniture Integration �������������5421. Prerequisites �������������������������������5422. Viewing Data �������������������������������5433. Setting Up SiteCatalyst ����������������������546
3.1 Custom Traffic Variables �������������������5463.2 Custom Conversion Insight Variables ��������5473.3 Custom Success Events �������������������548
4. Reader App Configuration ��������������������5485. Events �������������������������������������5506. Variables ����������������������������������552
6.1 Tracks ����������������������������������552
xiii
Contents
6.2 Track Links ������������������������������5547. Variables Sent with all Tracks������������������559Appendix L | Subscription Server Integration ���5601. Steps To Follow �����������������������������560
1.1 Configuring the Subscription Environment ����5611.1.1 Web Pages ����������������������������5611.1.2 Subscription Server ��������������������562
1.2 Configuring the Content Delivery Platform ����563Appendix M | iTunes Subscription Server
Integration ����������������������5641. Steps To Follow �����������������������������564Step 1. The Subscription Environment ������������565
Step 1.1. Web Pages �������������������������565Step 1.0.1. The Subscription Offer Page ��������566Step 1.0.2. The MyAccount Page �������������566
Step 1.2. iTunes Subscription Server ������������568Step 1.2.1. Adding the Subscription Offers ������569Step 1.2.1. Generating a Shared Secret ��������570
Step 2. Configuring the CDP �������������������570Step 3. Configuring the Reader App �������������571Appendix N | Reader App Features
Comparison ���������������������572Appendix O | Licenses ������������������������5781. android-plist-parser �������������������������5792. Jackson Java JSON-processor ���������������580
1
01
1
The following sections explain the purpose of this manual, how to use it, and how to get additional support or provide feedback.
1. Purpose and Target Readers
This user guide explains the process of using the Reader App, creating content for it, as well as customizing, build-ing and distributing the app.
The target audience for this user guide is the WoodWing Partner who uses the documentation to train the cus-tomer/end user in all facets of digital magazine publishing.
For that reason, the Digital Magazine Tools User Guide has been discontinued; its chapters Creating Content and Exporting Content can now be found in the Reader App User Guide which you are reading now.
Introduction
Chapter 01 Introduction
2
2. Product Versions
This user guide is based on the following product versions:
�Enterprise Server version 7.0.13/7.4 �Smart Connection 7.3/7.4 �Content Station 7.3 �Digital Magazine Tools plug-ins 7.3/7.4 �iPad Reader App version 2.1 �Android Reader App version 1.3 (Froyo) �Android Reader App version 1.3 (Honeycomb) �HTML5 Reader App version 1.0 �Content Delivery Platform current version
3. Working Environment
It is assumed in this user guide that a fully working Enterprise environment is set up for working with Digital Magazines. For more information about installing and configuring such an environment, see the Enterprise 7 Admin Guide.
4. Using This User Guide
Please read the following sections to familiarize yourself with some of the symbols and terminology used in the user guide, and some of the features that allow you to navigate the PDF if you are reading it on screen.
4.1 Sections
The Reader App can be customized for and distributed to different platforms:
�As a dedicated Reader App for the iPad �As a dedicated Reader App for Android
devices �As a dedicated Reader App for use within a
HTML5 Web browser
Because the method of customization and distribution is significantly different for each platform, the process is discussed in different sections of this user guide, each with dedicated chapters. A tab in the margin of the page will indicate the section that the chapter belongs to. If no tab is present, this means that the chapter applies to all types of platforms.
Chapter 01 Introduction
3
4.2 Icons
Various types of note icons are used in this manual. Their purpose is as follows:
An important note on a feature or action
A tip to improve your workflow
A feature new to this version
4.3 Navigating the PDF
To get the most out of this user guide, view the PDF in Adobe Acrobat or Adobe Reader. Adobe Reader
can be downloaded for free from www.adobe.com.
To assist you with navigating the PDF version of this user guide and to aid you in quickly finding the section that you are after, the following interactive tools are available:
�Contents. Click on a chapter or section title to immediately open the page.
�Index. Click on a page number following an index entry to immediately open the page.
�Bookmarks Panel. The bookmarks panel displays automatically when opening it. The PDF you open contains all chapters and sections; click on a title to automatically display the page.
�Pages Panel. Click on a page thumbnail to immediately open the page.
�Hyperlinks. Displayed in gray, italic font. These are used to refer to other sections in the manual, Web sites or other external sources. When active, clicking it will forward you to another section within the manual or open a Web site.
Chapter 01 Introduction
4
5. Additional Documentation
This user guide frequently refers to the iTunes Connect Developer Guide. This can be downloaded from the fol-lowing location: https://itunesconnect.apple.com/docs/iTunesConnect_DeveloperGuide.pdf.
6. Feedback
Most of your questions about how to use, customize and distribute the Reader App should be answered in this user guide.
For any additional queries, please visit our Knowledge Base first. It provides answers to Frequently Asked Questions as well as tips, hints and background infor-mation. The Knowledge Base is available at WoodWing’s Web site www.woodwing.com under the Support section.
Should you have any questions or feedback about any of the Enterprise products, visit our Community Forum: http://community.woodwing.net/forum/index (user account required).
For any comments, corrections, or other types of feed-back relating to this user guide, please send an e-mail to [email protected].
5
02
5
WoodWing’s Digital Magazine Reader App is a highly functional, highly customizable applica-tion for viewing digital magazines created with WoodWing’s Digital Magazine Tools.
This chapter gives a brief overview of the versions avail-able, its functionality, ways of customizing, the method of distribution, and the new features and changes of the latest release.
About the Reader App
Chapter 02 About the Reader App
6
1. Available Projects
The Digital Magazine Reader App is available in the fol-lowing types of projects:
Apple iPad projects �Basic and Standard. These come without
the Store, Library and Subscription functional-ity and therefore needs to have the magazine content included; each magazine issue is dis-tributed as a separate Reader App.
�Pro and Framework: same as the Basic and Standard projects but with additional Store and Library functionality; the magazine content is downloaded separately after an issue has been purchased (or obtained for free). The Library functionality allows the user to view all down-loaded issues and choose which one to read. Only one Reader App is required to read all issues of the magazine.
�Subscription: same as the Pro and Framework projects but with additional Subscription functionality, allowing users to subscribe to a publication.
�Apple Subscriptions: same as the Pro and Framework projects but with additional Apple Subscription functionality, allowing users to subscribe to a publication via the iTunes sub-scription functionality.
The Apple Subscriptions project can be used to offer Apple Auto-renewable sub-
scriptions only, or combined with non-Apple Subscription services.
Android projects �Basic and Standard. This project comes
without the Store, Library and Subscription functionality and therefore needs to have the magazine content included; each magazine issue is distributed as a separate Reader App.
�Pro and Framework. This project includes Store, Library and Subscription functionality; the magazine content is downloaded separately after an issue has been purchased (or obtained for free). The Library functionality allows the user to view all downloaded issues and choose which one to read. Only one Reader App is required to read all issues of the magazine.
HTML5 projects �Basic. This project comes without the Store,
Library and Subscription functionality and therefore needs to have the magazine content included; each magazine issue is distributed as a separate Reader App.
See also section 3. Ways of Customizing for information about customization and available licenses.
Chapter 02 About the Reader App
7
2. Functionality
The Reader App contains a multitude of different features and functionality, aimed at providing the best reader expe-rience. Some of the functionality includes:
�Navigational tools such as a Navigation bar, Table of Contents List, Forward and Back but-tons, and a Page Scrubber to quickly browse through the magazine content.
�Dynamic content such as video, audio, slide shows, Hotspots, Web Elements, Widgets, and Scrollable Areas.
�A Store (Pro, Framework, Subscription, and Apple Subscription projects only) for viewing and downloading separate issues.1
�A Library (Pro, Framework, Subscription, and Apple Subscription projects only) for viewing available issues.1
�Subscr ipt ion funct iona l i t y (Pro, Framework, Subscr ipt ion, and Apple Subscription projects only) for viewing issues available as part of a subscription.1
�Customizations. Additional functionality can be added on many levels, for instance by the use of API calls (iPad Reader App only), Reader app embedment in custom applications, and more.
For a detailed overview of all the features and how to use them, see chapter 4, Using the Reader App.
1 Not available on the HTML5 Reader App.
3. Ways of Customizing
The Reader App can be customized2 to reflect the look and feel of your publication. Some of the customizations which can be made include:
�The app icon and name �Icons used for buttons �The text as it appears in the app �Colors of text and backgrounds �Fonts used in specific places of the Reader
App
For a detailed overview of what can be customized and how this can be done, see the following chapters:
�For the iPad Reader App: chapter 7, Customizing the iPad Reader App.
�For the Android Reader App: chapter 9, Customizing the Android Reader App.
�For the HTML5 Reader App: chapter 11, Customizing the HTML5 Reader App.
Customizations and licensesThe extent of customization which you are allowed to do is determined by the purchased license:
�Basic/Pro: you are only allowed to change the App icon and name.
�Standard/Basic: you are allowed to build 1 App using the Standard/Basic project.
�Framework/Subscriptions/Apple Subscrtiptions: you are allowed to fully cus-tomize the App, as per this user guide.
2 Differences in the number of possible customizations exist between the Reader Apps for the iPad and Android.
Chapter 02 About the Reader App
8
4. Distribution
Publishing a digital magazine to a digital device is done by distributing the WoodWing Reader App with which the magazine can be viewed.
As a publisher, you have the option to distribute a Reader App in two different ways:
�A Reader App with the magazine content included1
�A Reader App in which the magazine content is downloaded at a later stage
For the first method, the user will have to download a new Reader App for each published issue, each appearing as a separate app on the digital device.
For the second method, the user can use the built-in Store functionality of the Reader App to first see which issues are available for that publication and view a preview of that issue. The actual magazine content can subsequently be downloaded onto the digital device as a separate step. This method requires only one Reader App to be down-loaded on the digital device for each title; the user can use the built-in Library to view all available issues, download those that are of interest, and open it for reading.
1 Note that the Android Market only allows apps to be uploaded with a maximum file size of 50MB.
4.1 Getting the Content on the Device
For a Reader App which has the magazine content included, the process of getting the magazine onto the digital device is straightforward: the magazine and Reader App are downloaded from an app store as a single down-load; the magazine content can be accessed straight away. For this method, each magazine issue is down-loaded as a separate app.
Figure 4.1a. When distributing a Reader App including the content, both are downloaded from an app store as a single download
Tablet app store
Reader App including magazine content
The process of distributing the Reader App separate from the magazine content involves more steps: first, the Reader App is downloaded (typically for free and without content) from the app store. By using the Store function-ality of the Reader App, the user chooses which issue to purchase2. Once the purchase process is complete, the magazine content is downloaded from a dedicated Content Delivery Platform. (See figure 4.1b on the next page.) All downloaded issues can then be viewed using the same Reader App.
2 Issues can also be offered for free, but the process of down-loading these separately is the same.
Chapter 02 About the Reader App
9
Figure 4.1b. When distributing a Reader App without content, the empty Reader App is downloaded from an app store, while the content is retrieved separately from a Content Delivery Platform
Content Delivery Platform
Tablet
app store
Reader App without content
Magazine content
For more information about distributing a Reader App without Store functionality, see chapter 13,
Distributing Reader Apps Without Store.
For more information about distributing the Reader App with Store functionality, see chapter 14,
Distributing Reader Apps With Store.
4.2 Distribution and Payment Models
As far as distributing the magazine as a package is con-cerned, the following distribution models are available:
�Complete magazine. All magazine content is made available in one download.
For Reader Apps without Store functional-ity, this is the only way of offering content
to the user.
�In segments. (Reader Apps with Store func-tionality only) The magazine is made available in different segments. The user decides which segment to download and in which order. Since the file size of each segment is smaller than the size of the complete magazine, downloading time is reduced. Filters in the Store and Library allow the user to filter on segment type.
When it comes to selling the magazine, the following pay-ment models are available:
�Free of charge. Magazines can be offered fully free of charge.
�Single purchase. Magazines can be offered as a single purchase.
�Subscr ipt ion . (Reader Apps w i th Subscription functionality only). Magazines can be offered as part of a subscription service.
Chapter 02 About the Reader App
10
5. New Features and Changes
The following sections describe the new features and changes for the current release.
5.1 New Features
The following sections describe the new features which have been introduced per platform.
5.1.1 Android Reader App
The following new features have been implemented in the Android Reader App v1.3:
Universal BuildsThe Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same app, the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1.2).
SDK Platform 2.2 API 8 is no longer required; a Reader App build with SDK Platform Android 3.0 API 11 will also run on a Froyo device.
As a result of this change, the frameworks now contain drawables for both Honeycomb and Froyo. The location of all drawables has also been changed. The changes are as follows:
�The hdpi folder is no longer used for Froyo.
�The mdpi folder is no longer used for Honeycomb.
�All drawables shared between Honeycomb and Froyo are located in the drawable-nodpi folder.
�Any Honeycomb-specific drawables are located in the drawable-nodpi-v11 folder. SDK version 3.0
�Any Froyo-specific drawables are located in the drawable-nodpi-v8 folder. SDK 2.2
Chapter 02 About the Reader App
11
�The drawable-hdpi, drawable-mdpi and draw-able-ldpi folders still exist but only contain the app icon.
For a complete overview of which images are used on a unique platform and which are used on both
platforms, see appendix C, Image Dimensions –section 2, Android.
Progressive download supportSupport for progressive download is now available.
For information about using the progressive download feature, see chapter 4, Using the Reader App – section 12.4.2, Progressive Downloads.
For information about configuring/customizing the pro-gressive download feature, see chapter 9, Customizing the Android Reader App – section 11.3.2, Progressive Download Method.
Custom objectsObjects with custom, 3rd-party functionality can be included in the magazine. The functionality of the ele-ment is completely upon the developer; it can be an extra user interface element, a list connecting to a database, a 3D object, etc.
Auto open magazineAn issue or Segment can now be opened automatically as soon as the download and installation process is com-plete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). This functionality can be controlled through a DMSetting.
For more information, see chapter 9, Customizing the Android Reader App – section 11.3, Downloading Methods.
GesturesA two-finger swipe can now be used for navigating to the first page of the next story (Page navigation only). This functionality can be controlled through a DMSetting.
For more information, see chapter 9, Customizing the Android Reader App – section 8.1, Story vs Page Navigation.
Hotzones overlaying interactive objectsWhen interactive objects (such as Slide Shows, videos, etc.) are placed within the area of a Hotzone, their func-tionality cannot be accessed because of the overlaying Hotzone area. These interactive objects can now be made accessible through a DMSetting.
For more information, see chapter 9, Customizing the Android Reader App – section 8.6, Hotzones.
Scrolling indicatorsNative scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and right-hand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded.
This functionality can be controlled through a DMSetting.
For more information, see chapter 9, Customizing the Android Reader App – section 11.7, Scrolling Indicators.
Account button is context sensitiveThe My Account button (in the Navigation bar and Action bar respectively), responds to the context of the Reader App:
�Froyo: this button is displayed at all times, but only enabled when the Store is accessed.
�Honeycomb: this button is only displayed when the Store is accessed.
Chapter 02 About the Reader App
12
History buttons as DMSettingThe History (Back/Forward) buttons can now be included or excluded from the toolbars through the ToolbarItems DMSetting.
For more information, see:
�Top Toolbar bar (Froyo): chapter 9, Customizing the Android Reader App – section 8.5.4, Items.
�Action bar (Honeycomb): chapter 9, Customizing the Android Reader App – section 8.3.2, Items.
Maximum number of items displayed in Action barThe maximum number of items to appear on the right-hand side of the Action bar can now be controlled by a DMSetting (up to a maximum of 6).
For more information, see chapter 9, Customizing the Android Reader App – section 8.3.2, Items.
Story bullet display in FlipviewIncluding or excluding Story bullets in the Flipview can now also be controlled for the Honeycomb version of the Reader App.
For more information, see chapter 9, Customizing the Android Reader App – section 8.4.2, Story Viewer / Page Viewer.
Page number display in FlipviewThe Froyo version of the Reader App now also displays page numbers in the Flipview. Including or excluding the page number in the Flipview (for both the Froyo and Honeycomb version of the Reader App) can now be con-trolled through a DMSetting.
For more information, see chapter 9, Customizing the Android Reader App – section 8.4.2, Story Viewer / Page Viewer.
Auto open Flipview on toolbar displayThe Flipview can be made to appear automatically when the Navigation bar/Action bar is displayed. This functional-ity can be set through a DMSetting.
For more information, see chapter 9, Customizing the Android Reader App – section 8.4, Flipview.
Chapter 02 About the Reader App
13
5.1.2 iPad Reader App
iOS 5 Newssstand supportThe iPad Reader App now supports Apple’s iOS 5 Newsstand feature: a dedicated folder on the springboard of the iPad through which magazine and newspaper issues can be accessed.
Newsstand apps must offer at least one auto-renewable In-App Purchase subscription.
Support for iOS 5’s Newsstand functionality is included by default in the following projects:
�Pro Framework �Subscriptions �Apple Subscriptions
When using any of these projects and when not making use of the Newsstand functionality, the
Newsstand functionality needs to be removed from the project.
For information about using the Newsstand feature, see chapter 4, Using the Reader App – section 6.2 From Within the Newsstand.
For information about configuring the Reader App for use with the Newsstand, see chapter 7, Customizing the iPad Reader App – section 9.11 Newsstand (iOS5).
For information about removing the Newsstand func-tionality from a project, see chapter 8, Building the iPad Reader App – section 1.3, An App Without Newsstand Functionality.
5.1.3 Content Delivery Platform
iOS 5 Newssstand supportThe Content Delivery Platform can now be used for send-ing notifications to the Apple iOS 5 Newsstand, informing it that a new version of an issue is available.
For more information, see appendix F, Using the Content Delivery Platform – section 4.8.2 Sending a Newsstand Notification.
Chapter 02 About the Reader App
14
5.2 Changes
The following changes have been implemented in the Android Reader App v1.3:
Customer projectThe file DigiMag.java that used to exist in the project ‘customer�app’ under the package ‘com.woodwing.app_name’ no longer exists. In previous versions, both the package name in the AndroidManifest.xml file as well as the package name of the DigiMag.java file had to be changed. The latter is no longer necessary/possible; only the package name in the AndroidManifest.xml file has to be changed.
Renaming Reader AppIn order to rename the Reader App, only the AndroidManifest.xml file needs to be modified (previ-ously the com.woodwing.[app name] file also had to be modified).
For more information, see chapter 9, Customizing the Android Reader App – section 7.1, Reader App Name.
Creation of app icon in high dpiApparently the launcher on the Android Honeycomb ver-sion (always) uses the hdpi version of the icon.png, even on mdpi devices. Customers should therefore always cre-ate an ldpi, mdpi and hdpi version of their application icon.
For more information, see chapter 9, Customizing the Android Reader App – section 7.2, Reader App Drawables.
Buttons moved in Action barIn the Action bar in the Honeycomb version of the Reader App, the Newsfeed and Custom button have been moved to the left-hand side of the bar.
For more information, see chapter 9, Customizing the Android Reader App – section 8.3, Action bar.
Drawables made obsoleteThe following drawables have been made obsolete:
�headerbarshadow.png. The shadow as shown below the Library toolbar (Froyo version).
�back_grey.png. The Back button of a Web Element in its non-available state.
�library_top_bar.png. The image used for the top bar (situated between the Action bar and the top Library shelf).
�previewshadowlandscape.png. The shadow between the issue information pane and the issue preview pane (landscape orientation).
�previewshadowportrait.png. The shadow between the issue information pane and the issue preview pane (portrait orientation).
Strings made obsoleteThe following strings have been made obsolete:
�Cover story. The cover story title.
�Successfully logged out. Message appear-ing after user has successfully logged out of the Subscription account.
Chapter 02 About the Reader App
15
Strings made obsoleteThe following strings have been made obsolete:
<string name=”logged_out”>Successfully logged out.</string><string name=”action_feed”>Newsfeed</string><string name=”action_custom”>Custom</string>
16
03
16
Before delving into the specifics of creating, using, and distributing the Digital Magazine Reader App and its content, it is important to be aware of the methods in which the content itself can be displayed.
This chapter outlines the different types of pages that can be created, and how this affects the way the content is presented to the reader as well as the way it should be navigated.
1. Page Orientation
When reading a magazine on a digital device such as the Apple iPad or Samsung Galaxy Tab using a dedicated Reader App, page orientation can follow the device ori-entation: content is viewed in landscape orientation when the device is held horizontally, or in portrait orientation when the device is held vertically.
Figure 1. The same page can be viewed in landscape orienta-tion (horizontal, left) or in portrait orientation (vertical, right)
For each orientation a different page is loaded, thereby offering the possibility of styling both pages differently and/or offering a different page count or content type for each (for instance offering a three-page interview in the form of an article in portrait mode, and the same inter-view in the form of a video on a single page in landscape mode).
The Concept
Chapter 03 The Concept
17
2. Page Dimensions
When a designer creates a page, he or she can choose from one of two page dimensions:
1. The page exactly matches the dimen-sions of the screen of the device on which it is viewed. Using this method, a story con-taining multiple pages can be created. (See figure 2a to the right.)
2. The page width matches that of the device, but the page height is taller than the height of the device. Using this method, a single-page story can be created. (See figure 2b to the right.)
As far as navigation goes, the following applies:
�For the first method, the next or previous page of a story can be displayed by sliding the page up or down (iPad) or left/right (iPad or Android) by using a quick finger swipe. The page will automatically position itself to fit the screen.
�For the second method, the page can be scrolled continuously and stopped at any place (much as you would browse a Web page).
Figure 2a. Content set up as separate pages (left), appears and behaves as separate pages on the digital device (right)
Figure 2b. Content set up as one continuous page (left) allows the page to be scrolled up or down in the Reader App without it positioning itself to a fixed position (right)
Chapter 03 The Concept
18
3. Stories, Pages, Sections and Segments
The Digital Magazine Reader App works with the concept of stories, pages, sections, and segments.
StoriesA Story is just that: a story about a particular topic such as an interview with a prominent member of the public, a product review, a trip report, etc.
PagesA story can consist of just a single page or multiple pages1. The way that these stories and pages are dis-played is determined by the way that the Reader App is configured. The following configurations are possible:
�Story navigation. (Default configuration for the iPad Reader App, not available in the Android Reader App) In this configuration, sto-ries are placed next to each other, whereas any pages within a story are placed above each other.
�Page navigation. In this configuration, all pages of all stories are placed next to each other.
This has a direct effect on the way the user navigates the magazine:
�Story navigation. (iPad Reader App only, not available in the Android Reader App) Navigation is done as follows:
�To navigate from one story to another, the user swipes horizontally (from left to right or right to left)
�To navigate within a story, the user swipes vertically (up/down or down/up)
1 Unless the page is taller than the height of the device, in which case the story is always a single-page story.
�Page navigation. Navigation is done as follows:
For touchscreen devices (iPad, Android):
�To navigate from one page to another, the user swipes horizontally (from left to right or right to left) using one finger
�To navigate from story to story (iPad Reader App only), the user swipes hori-zontally (from left to right or right to left) using two fingers
For desktops (HTML5): �To navigate from one page or story to
another, the user clicks on the navigation bars, drags the page with the mouse, or uses the keyboard
The above concept is displayed in the figures on the fol-lowing pages. To see how each method is displayed in the Reader App itself, see chapter 4, Using the Reader App.
Chapter 03 The Concept
19
SectionsStories that share similar content can be grouped together by assigning them to the same section (such as fashion, finance, sports, etc.). The Section Viewer in the Reader App allows the user to quickly navigate to a particular section: when a user taps a section, the first page of the first story in that section is shown.
Figure 3a. The Section Viewer shows all sections of a magazine
Segments(iPad Reader App only) Segments are similar to Sections, but now the grouping is not done within the magazine, but the magazine itself is physically split into different parts, making it possible to download each segment individually. This allows the user to decide in which order to download each part of the magazine. Because only a small part of the magazine is downloaded instead of the full magazine in one go, the download size per download session is also reduced. Both the Store and the Library can be filtered to show content that belongs to a particular segment only.
Chapter 03 The Concept
20
Figure 3b. This figure shows the default navigation method, in which stories (represented by their Dossiers) are accessed by swiping horizontally and pages by swiping vertically. This navigation method is referred to as Story Navigation.
Three stories are shown containing layouts in landscape orien-tation. (Note that these layouts would be located in the same Dossiers as their portrait counter parts as shown in figure 3c on the next page.)
The user would swipe horizontally to navigate between each story. Within the story, the user would swipe vertically to navi-gate the content (either from page to page or scrolling within the page, depending on the setup).
Story A is made up of a layout with a single page (in this case the cover) matching the device dimensions exactly. No vertical navigation is available.
Story B is made up of a layout containing two pages, each exactly matching the device dimensions. Vertical navigation is available to view each page.
Story C is made up of a layout containing a single page which has been made taller than the height of the device. (A typical use for such a page is the table of contents page, as shown here.) Vertical navigation is available by swiping the page.
Page 3
Story A
Layout A1
Page 1
Layout C1
Vertical navigation within the
story
Story CStory B
Layout B1 Layout C1
Vertical navigation within the
story
Page 1
Page 2
Horizontal navigation between stories
Chapter 03 The Concept
21
Horizontal navigation between stories
Figure 3c. Similar to the previous figure, this figure also shows the default navigation method, but now for pages in portrait orientation. Stories (represented by their Dossiers) are accessed by swiping horizontally and pages by swiping verti-cally. This navigation method is referred to as Story Navigation.
Three stories are shown containing layouts in portrait orienta-tion. (Note that these layouts would be located in the same Dossiers as their landscape counter parts as shown in figure 3b.)
The user would swipe horizontally to navigate between each story. Within the story, the user would swipe vertically to navi-gate the content (either from page to page or scrolling within the page, depending on the setup).
Story A is made up of a layout with a single page (here: the cover) matching the device dimensions exactly. No vertical navigation is available.
Story B is made up of a layout containing two pages, each exactly matching the device dimensions. Vertical navigation is available to view each page.
Story C is made up of a layout containing a single page which has been made taller than the height of the device. (A typical use for such a page is the table of contents page, as shown here.) Vertical navigation is available by swiping the page.
An alternative display method for Story C is the Text View (a viewing mode in which the article text is scalable, not shown here).
Story B
Page 1
Page 2
Layout B1
Vertical navigation within the
story
Story A
Layout A1
Page 1
Layout C1
Vertical navigation within the
story
Story C
Layout C1
Chapter 03 The Concept
22
Page 1
Layout C1
Vertical navigation within the
story
Story C
Horizontal navigation between stories
Story A
Layout A1
Figure 3e. Similar to the previous figure, this figure also shows the alternative navigation method, but now for pages in portrait orientation. All stories and pages are placed next to each other and are accessed by swiping horizontally (available in the iPad Reader App only). This navigation method is referred to as Page Navigation. Vertical navigation is only available when the page length exceeds the device height.
Three stories are shown containing layouts in landscape orien-tation. (Note that these layouts would be located in the same Dossiers as their portrait counter parts as shown in figure 3c on the previous page.)
Story A is made up of a layout with a single page (here: the cover) matching the device dimensions exactly. No vertical navigation is available.
Story B is made up of a layout containing two pages, each exactly matching the device dimensions. No vertical naviga-tion is available.
Story C is made up of a layout containing a single page which has been made higher than the height of the device. (A typical use for such a page is the table of contents page, as shown here.) Vertical navigation is available by swiping the page.
An alternative display method for Story C is the Text View (a viewing mode in which the article text is scalable, not shown here).
Horizontal navigation between pages
Story B
Page 1 Page 2
Layout B1
23
04
23
A good understanding of the Reader App com-ponents and how they work is essential for customizing the app.
This chapter provides an in-depth overview of how the Reader App works and how it should be used by its users.
Throughout this chapter, a magazine viewed on an iPad is shown. The concept will be the same when
using an Android Reader App, unless otherwise stated.
The HTML5 Reader App is designed for viewing in a Web browser, primarily aimed at viewing on a
desktop PC or laptop (although it can also be viewed in a suitable Web browser on a touchpad device). Using the Reader App on a desktop PC/laptop is slightly different from using it on a touchpad device since the mouse or keyboard is used. For a summary of the differences, see section 17. Using the HTML5 Reader on a PC.
1. Features by Platform
Various versions of the Reader App exist (for iPad, Android devices and for HTML5 Web browsers). While they share most of the functionality, differences also exist. These differences could be because features are specific to a particular platform, or because the development of one Reader App is not yet as advanced of another.
For a comparison of each Reader App feature and their availability for each Reader App version, see appendix N, Reader App Features Comparison.
Using the Reader App
Chapter 04 Using the Reader App
24
2. Basic Viewing
When viewing a magazine in its most basic view, the full page is shown and any available controls are hidden. Depending on the device and application you are using to view the magazine, the page may be shown in full screen, or a status bar that is part of the device is shown.
HTML5 Reader AppWhen viewing a magazine using the HTML5 Reader App in a Web browser, the full page is shown.
Figure 2a. Viewing a magazine in a Web browser using the HTML5 Reader App
iPad Reader AppWhen viewing a magazine using the Reader App on an iPad, the iPad status bar is shown at the top of the screen with the Reader application below, displaying the full size of the page.
Android Reader App on FroyoWhen viewing a magazine using the Android Reader App v1.x (Froyo), the Notification bar is shown at the top of the screen with the Reader application below, displaying the full size of the page.
Chapter 04 Using the Reader App
25
Android Reader App on HoneycombWhen viewing a magazine using the Android Reader App v1.x (Honeycomb), the System bar is shown at the bottom with the Reader application displayed above it.
Figure 2.b. Basic components of the iPad Reader App
A
B
A Status bar B Reader
Figure 2.c. Basic components of the Android Reader App (top: Froyo version, bottom: Honeycomb version
A Status bar B Reader C System bar
B
C
B
A
Chapter 04 Using the Reader App
26
3. Requirements
To get the best experience out of reading a magazine using the WoodWing Reader App, take note of the fol-lowing requirements:
iPad and Android version �Reader App version. Verify if the version
of the Reader App fully supports all features and functionality available in the magazine; you might need the latest version of the Reader App to make use of the latest features.
�Operating system compatibility. Before upgrading your tablet to a new operating system, verify whether the Reader App is sup-ported by that operating system. An update of the Reader App might be required when upgrading to a new operating system.
�Device metrics. (Android Reader App only) Android devices come in many different sizes. If the magazine publisher has designed the con-tent for use on a device with a specific size, a message can optionally be displayed to inform the user that user experience may be less opti-mal when viewing the magazine on smaller or lager devices.
HTML5 version �Web browser compatibility. Safari ver-
sion 5 or higher or Google Chrome version 7 or higher should be used. Other Web browsers are currently not supported.
�Google Chrome. Using Google Chrome requires that the app is installed on a web server. This is because Google Chrome will not allow apps to be run from the file:// protocol due to security reasons.
�General use. The HTML5 version of the Reader App is meant for reading on large screen devices such a desktop PC, laptop or large digital devices such as the iPad. Even though small digital devices such as mobile phones, iPods, etc, can also access content by using a Web browser, the user experience will be less satisfactory.
Chapter 04 Using the Reader App
27
4. Page Scaling
When a magazine is read on a device for which it has not been designed (in terms of dimensions), it is likely that the pages will not properly fit the screen. With a multitude of Android devices becoming available — with a similar multitude of dimensions — it is possible to find yourself in such a situation when using an Android device.
Magazine publishers can determine how the page should be made to fit the screen for these circumstances (Android devices only):
�Fit width. On a device which is smaller than the page dimensions, the page is scaled down to fit the width of the screen. This might result in having to scroll vertically to see the rest of the page.
�Fit screen. The page will be scaled to fit the screen. If the aspect ratio (width versus height) of the screen is different than the ratio for which the page was designed, this can result in “letter-boxing” (resulting in black bars appearing along the right- and left-hand side of the screen)1 or “pillarboxing” (resulting in black bars appearing along the top and bottom of the screen)1
�Fit screen disproportionately. The page will be made to fit the dimensions of the screen exactly. This could result in the content of the page looking stretched or squashed.1
1 Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
Chapter 04 Using the Reader App
28
5. Accessing the Reader App
To access the Reader App, do one of the following:
�iPad Reader App: tap its icon on the Home screen of the tablet or from within the Newsstand (iOS 5 only).
�HTML5 Reader App: open a Web browser and access the correct URL.
Depending on the type of Reader App and/or the way it has been configured, one of the following will happen:
�The magazine is accessed straight away. Reader Apps which do not have Store func-tionality always function this way. To see this behavior on Reader Apps which do have Store functionality, an issue for that magazine needs to have been downloaded and opened first. When accessing the magazine for the first time, the magazine cover is shown; when accessing the magazine after having read the magazine, it will open to the last viewed page.
�The Store is accessed. This is the case for those Reader Apps which have Store function-ality and in which no magazine issue has been downloaded yet; or for those Reader Apps which have been configured in such a way that the Store is always opened when the app is launched.
�A different application is shown first. This is optional functionality for those Reader Apps which have Store functionality. The Reader App is made part of another application, which acts as the shell for the Reader App. This shell displays information related to the magazine content; the Reader App can subsequently be accessed by tapping a dedicated button, after which the behavior is the same as described above.
This method is for instance used by TV Guides where first a Web page is shown
with current TV channel information, after which the magazine can be accessed to read articles related to the world of TV and movies.
Restoring the Reader App stateAs mentioned above, the Reader App restores itself to the last viewed magazine page when the app is closed while the user was reading a magazine.
The iPad Reader App also restores itself to the following states:
�Store �Library �Library Segments Overview
When DMExternal is used (meaning that the Reader App is part of another application), the restoring state behaves slightly different (or perhaps not as initially expected):
�When the user closes the shell application and subsequently resumes the app from the background, the Reader App tries to restore the state of the screen as it would in a normal environment.
�When the Reader App is closed by the shell application, states are not restored.
Chapter 04 Using the Reader App
29
6. Accessing the Magazine
The magazine issue can be accessed in one of the fol-lowing ways:
�From within the Reader App itself
�From within the Newsstand
Each is explained in the following sections.
6.1 From Within the Reader App
After accessing the Reader App, the magazine issues can be accessed in one of the following ways:
�Instantly. This is the case for those Reader Apps which do not have Store functionality; each magazine issue is a different Reader App. Switching to a different issue is done by closing the current Reader App and opening another one from the springboard/Home screen. (Or in the case of a HTML5 Reader App: accessing a different URL.)
For Reader Apps with Store functionality an issue is also accessed straight away, but only when at least one issue has been downloaded first.
For detailed information about how to use the Store, see section 12. Using the Store.
�From the Library. This is the case for Reader Apps with Store functionality. Switching to a different issue/Segment of the magazine can be done by tapping the issue/Segment in the Library.
For detailed information about how to use the Library, see section 13. Using the Library.
Chapter 04 Using the Reader App
30
6.2 From Within the Newsstand
Apple’s iOS 5 introduces the Newsstand feature: a dedicated folder on the springboard of the iPad
through which magazine and newspaper issues can be accessed.
When a Reader App is made part of the Newsstand, it is not also separately available on a springboard.
Having a Reader App in the Newsstand provides the fol-lowing benefits:
�The Newsstand acts as a central location from which a Reader App can be opened whithout having to locate it somewhere on the iPad first.
�New issues can be made to download auto-matically in the background as soon as they become available. This way the download pro-cess does not have to be started manually.
For more information about the Newsstand, see www.apple.com/ios/ios5/features.html#newsstand.
Whether or not an issue is made part of the Newsstand is determined by the publisher of the
magazine.
Displayed iconsInitially, the Newsstand displays the app icon of the Reader App. Once an issue is fully downloaded, the cover of that issue is displayed1. For issues containing Segments, the icon of the parent issue is displayed.
When an issue is removed, the cover for the last down-loaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is dis-played once more.
Issues can be displayed in one of two different ways:
1 The icon is not changed when the download is started from the Reader App.
�As a magazine �As a newspaper
Figure 6.2a. The different ways in which issues can be dis-played in the Newsstand
A Magazine type issue B Newspaper type issue
A B
Notifications and download initiationWhen a new issue is available, the publisher sends a noti-fication to the Newsstand. Once received, the following actions take place:
�A badge with the word ‘New’ is placed in the top right-hand corner of the issue icon.
Figure 6.2b. When a new version of an issue is avail-able, a ‘New’ badge is displayed in the top right-hand corner of the issue icon
�In case the Reader App is not yet running, it is loaded in the background.
Chapter 04 Using the Reader App
31
�The download of the new issue is started (but see download scenarios below).
When an issue contains Segments, all Segments will be downloaded.
Download scenariosWhen the Newsstand receives a notification that a new version of an issue is available, the download process is started automatically.
Take note of the following:
�Background downloading is performed only through a Wi-Fi connection, not through a 3G connection.
�Background downloading for subscription issues can only be done when you are logged in to the account.
�To turn background downloading off for the Newsstand, turn off the following setting on the iPad: Store > Automatic Downloads.
Depending on the state of the Reader App at the time the download request is received, one of the following scenarios will take place:
�The Reader App is not in use and is not minimized. The Reader App is started in the background and the full issue is downloaded in the background.
�The Reader App is not in use but is mini-mized. The download is started and the full issue is downloaded in the background. (If other downloads are already in progress, the down-load may be queued.)
�The Reader App is in use. The download is started and the full issue is downloaded in the background. (If other downloads are already in progress, the download may be queued.)
The download process can be followed (and paused/resumed when necessary) from within the
Library of the Reader App.
As soon as an issue is accessed, the ‘New’ badge disappears.
Chapter 04 Using the Reader App
32
7. Navigation Tools
By tapping the Reader App once at specific places, the Navigation bar, top Toolbar, or the Action bar appears, allowing the user to navigate the magazine by using the various buttons and tools available. (See figure 7 on the next page.)
For information about which areas of the screen can be used for bringing up the navigation tools, see
section 8.1 Hotzones.
When tapping the Contents button in the Navigation bar or Action bar, the Story Viewer appears—showing the first page of each story of the magazine1—as well as the Section Viewer, showing the different sections that have been defined for the magazine.
The Android Reader App can be configured in such a way by the publisher that the Flipview (containing
the Store Viewer / Page Viewer and the Section Viewer) appears automatically when the Navigation bar/Action bar is displayed.
The pages shown in the Story Viewer / Page Viewer are thumbnail representations of the first page / all pages of that story. Below the first page of each story, the name of the story is shown and (optionally) a short description.
When tapping the TOC (table of contents) button in the top Toolbar, the TOC List appears. This is presented as an overlay on top of the magazine. When tapping a but-ton, link or any part of the page, the navigation tools will disappear again.
Each component is explained in more detail in the fol-lowing sections.
1 The iPad Reader App can also be configured in such a way that all pages of all stories are displayed; the Story Viewer then acts as the Page Viewer. Note that the Android Reader App always shows all pages in the Story Viewer.
Chapter 04 Using the Reader App
33
Figure 7. The navigation tools of the Reader App (left: iPad Reader App, right: Android 3.0 Reader App)
A Top Toolbar B TOC List C Story Viewer / Page Viewer D Section viewer E Navigation bar F Action bar
C
A
B
ED
F
C
D
Chapter 04 Using the Reader App
34
7.1 Top Toolbar
On Android 3.0 devices, the top Toolbar is integrated into the Action bar. For more information, see section 7.3 Action Bar.
The top Toolbar can hold the following components:
�Forward/Back buttons. For navigating to the next or previously viewed page. (See sec-tion 8. Navigating the Reader App.)
�TOC List. For bringing up the TOC List. (See section 7.1.1 TOC List.)
�Audio Control button. For bringing up the Audio Control with which the playback of audio files can be controlled. (See section 9.2 Audio.)
�Bookmarks List button. For bringing up the Bookmarks List. (See section 8.9 Bookmarks List.)
�Image icon. (Optional) Typically used for dis-playing a logo.
�Share Content button. For bringing up the Share Content list, used for sharing an external link with other people by e-mail or social media. (See section 11. Sharing Content.)
Figure 7.1. The components of the top Toolbar
A B C D E F G
A Back button B Forward button C TOC List buttonD Audio control button E Bookmarks List button F Image icon G Share content button
Tapping a button will activate the functionality of the button.
7.1.1 TOC List
The TOC List appears when tapping the TOC button in the top Toolbar bar (see section 7.1 Top Toolbar). This list contains a quick-link to each story in the magazine.
Figure 7.1.1. Tapping the TOC button in the top toolbar brings up the TOC List
A
A TOC List
For more information about using the TOC List, see sec-tion 8.8 TOC List.
Chapter 04 Using the Reader App
35
7.2 Navigation Bar
The Navigation bar holds various buttons for navigating the magazine. Some of them appear only when an App Reader with a built-in Store is used, while others are optional and/or have to be specifically enabled.
On Android 3.0 devices, the Navigation bar is integrated into the Action bar. For more information, see section 7.3 Action Bar.
�Back button. (iPad Reader App only) For navigating to a previously visited page.
�Forward button. (iPad Reader App only) For navigating to the page that was last visited before tapping the Back button.
�Buy. (Store versions only) For accessing the Store.
�Library. (Store versions only) For accessing the Library.
�Cover. For accessing the magazine cover.
�TOC. For accessing the page containing the table of contents.
A Back button B Forward button C Buy button D Library button E Cover button F TOC button G Help button H Contents button I Newsfeed button J Account button K Custom
CA B D E F G H I J K
Figure 7.2. The Navigation bar buttons
�Contents. For accessing the Story / Page Viewer and the Section Viewer. (Not available when the Store or Library is displayed.)
�Newsfeed. For accessing the Newsfeed page. (Or any other type of Web page, depend-ing on the configuration.)
�Help. For accessing the page containing instructions about how to use the Reader App.
�Account. (Store versions with subscription functionality only) For accessing the account details for a subscription.
�Custom. (Android Reader App only) For accessing a Web page with custom informa-tion such as privacy information.
The number of buttons and the order in which they appear is determined by the way the Reader App
is configured.
Tapping an icon will activate the functionality of the but-ton, each of which is explained in the following sections.
Chapter 04 Using the Reader App
36
7.2.1 The Back Button
When tapping the Back button, the user is returned to a previously visited page. Its functionality is much the same as using the Back button in a Web browser.
7.2.2 The Forward Button
When tapping the Forward button, the user is taken to the page that was last visited before tapping the Back button. Its functionality is much the same as using the Forward button in a Web browser.
7.2.3 The Buy Button
When tapping the Buy button in the Navigation bar, the Store appears, showing all issues that are available for the magazine title.
Figure 7.2.3. The Store shows all available issues for a par-ticular magazine title
For detailed information about using the Store, see sec-tion 12. Using the Store.
Chapter 04 Using the Reader App
37
7.2.4 The Library Button
When tapping the Library button in the Navigation bar, the Library appears, showing all available issues of a maga-zine. These could be issues which have already been downloaded, Segments of a purchased issue (Android only), or not yet downloaded issues available as part of a subscription.
Figure 7.2.4. The Library shows all available issues for a magazine title (left). On the iPad Segments that are part of an issue are shown on a separate page (right)
When tapping the Library button on the iPad Reader App, the Library Overview Page appears. This page only shows all available issues of a magazine; Segments are displayed on a separate page, accessed by tapping an issue containing Segments.
For detailed information about using the Library, see sec-tion 13. Using the Library.
Chapter 04 Using the Reader App
38
7.2.5 The Cover Button
When tapping the Cover button in the Navigation bar, the cover of the currently viewed issue appears.
7.2.6 The TOC Button
When tapping the TOC button in the Navigation bar, the table of contents page of the magazine appears.
7.2.7 The Contents Button
When tapping the Contents button in the Navigation bar, the Section Viewer and the Story Viewer / Page Viewer appears, allowing the user to navigate the magazine in various ways.
The Contents button is not active/available when the Store or Library is displayed.
Figure 7.2.7. When tapping the Contents button, the Section Viewer and the Story Viewer / Page viewer appears
For detailed information about using the Section Viewer and Story Viewer / Page Viewer, see section 8. Navigating the Reader App.
Chapter 04 Using the Reader App
39
7.2.8 The Newsfeed Button
When tapping the Newsfeed button in the Navigation bar, the Newsfeed page appears. Typically this will be the Web site of the magazine or publisher.
Depending on how the Reader App is configured, the Newsfeed page is either displayed as an overlay or in fullscreen mode. When displayed as an overlay, the page can be closed by tapping the Close icon in the top-right corner; when displayed in fullscreen, the page should itself have a close button built in.
7.2.9 The Help Button
When tapping the Help button in the Navigation bar, the page containing instructions about how to use the Reader App is displayed.
7.2.10 The Account Button
When tapping the Account button in the Navigation bar, an external page is accessed where details of the sub-scription account to which the user is currently logged in can be managed.
For detailed information about using the subscrip-tion features, see section 12.1 Store With Subscription Functionality.
Chapter 04 Using the Reader App
40
7.3 Action Bar
In the Reader App for Android 3.0 devices, the Navigation bar (see section 7.2 Navigation Bar) and top Toolbar (see section 7.1 Top Toolbar) have been integrated into the Action bar.
The left-hand side of the bar shows the following buttons:
�Buy. (Store versions only) For accessing the Store.
�Library. (Store versions only) For accessing the Library.
�Magazine. (Store versions only) When an issue is open but not currently being viewed (for instance when the Store is being viewed), this button allows you to return to the opened issue. (When no issue is open, the button is not visible.)
A Buy button B Library button C Magazine button D Newsfeed buttonE Custom buttonF Cover button G Contents button
Figure 7.3. The Action bar buttons
BA C D E GF H I J
K
L
H Back button I Forward button J Menu buttonK TOC button as menu command L Help button as menu command
�Newsfeed. For accessing the Newsfeed page. (Or any other type of Web page, depend-ing on the configuration.)
�Custom. For accessing a Web page with custom information such as privacy information.
The right-hand side of the bar can show the following buttons:
�Cover. For accessing the magazine cover.
�TOC. For accessing the page containing the table of contents.
�Contents. For accessing the Story / Page Viewer and the Section Viewer.
�Newsfeed. For accessing the Newsfeed page. (Or any other type of Web page, depend-ing on the configuration.)
�Help. For accessing the page containing instructions about how to use the Reader App.
Chapter 04 Using the Reader App
41
�Account. (Store versions with subscription functionality only) For accessing the account details for a subscription.
�Custom. For accessing a Web page with custom information such as privacy information.
�Back button. (Always visible) For navigating to a previously visited page.
�Forward button. (Always visible) For navi-gating to the page that was last visited before tapping the Back button.
�Menu button. (Only visible when there are 6 or more actions defined) For accessing the Action bar menu. Any available buttons for which there is no room in the Action bar itself are displayed here.
The number of buttons and the order in which they appear is determined by the way the Reader App
is configured.
For a description of the functionality of these buttons, see:
�TOC button: section 7.1 Top Toolbar
�All other buttons: section 7.2 Navigation Bar
Chapter 04 Using the Reader App
42
8. Navigating the Reader App
Navigating the Reader App can be done by making use of various tools and methods:
�Hotzones: (touchpads only) areas which can be tapped to navigate to the next or previous page, or to bring up the Navigation bar.
�Navigation zones: (desktop PCs/laptops only) areas which can be clicked to navigate to the next or previous page/story, or for navigating between images in a Slide Show.
�Gestures: swiping by using one or two fin-gers will navigate the user to the next/previous page or story.
�Section Viewer: for quickly navigating to a particular section of the magazine.
�Story Viewer / Page Viewer: for quickly viewing and selecting the available stories or pages.
�Page scrubber: a slider for quickly navigating the Story / Page Viewer.
�Forward/Back button: buttons for navigat-ing to the next or previously visited page.
�TOC List: a table of content displayed in a window on top of the page.
�Bookmarks List: a list with bookmarked stories.
�Dossier Links: links on a page which will take you to a particular page of a story.
�Device rotation: rotating the device brings up a page in a different orientation.
Each tool or method is explained in the following sections.
Navigating the magazine can also be done by vari-ous other tools which have been custom made by
the Reader App developer, such as menus or wheels which appear after tapping the screen. For more informa-tion about how to use these custom tools, see the Help page in the magazine (accessed by tapping the Help but-ton, see section 7.2.9 The Help Button.)
Chapter 04 Using the Reader App
43
8.1 Hotzones
Hotzones are areas which can be tapped to execute the following actions:
�Bring up the Navigation bar �Bring up the top Toolbar �Bring up the Action bar �Navigate to the next or previous page/story
Note that Hotzones only work on touchpad devices, not on a desktop PC/laptop (for these systems,
Navigation zones are used, see section 8.2 Navigation Zones).
Depending on the way the Reader App is configured and/or on which platform is used, the following actions take place when tapping the screen:
�Any part of the screen: the Action bar, Navigation bar and/or the top Toolbar is displayed
�Left/right zone: the previous/next page/story is displayed
�Top zone/Bottom zone: the Action bar, Navigation bar and/or the top Toolbar is displayed
Figure 8.1. The iPad Reader App can be configured to include Hotzones (shaded in red): specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page
8.2 Navigation Zones
(HTML5 Reader App only) On desktop PCs and laptops, Navigation Zones are used for moving to the next/previ-ous page/story or for navigating between images of a Slide Show; all by means of a mouse click. When hovering over such a zone, the area is made visible by a bar running along the side of the screen and an direction indicator in the center of that bar.
Figure 8.2 The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)
Chapter 04 Using the Reader App
44
8.3 Gestures
(Touchpad devices only) The touch screen functionality of digital devices allow users to navigate between pages and stories by using finger gestures. Depending on the configuration of the Reader App, one or two fingers can be used:
Horizontal navigation �One-finger swipe. Works when the Reader
App has been configured for story navigation as well as for page navigation:
�Story navigation: takes the reader to the next or previous story.
�Page navigation: takes the reader to the next or previous page.
�Two-finger swipe. Works only when the Reader App has been configured for page navi-gation; it takes the reader to the next or previous story.
Vertical navigation �One-finger swipe. Works when the Reader
App has been configured for story navigation only:
�Page navigation: takes the reader to the 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 ges-tures, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)
8.4 Section Viewer
The Section Viewer appears when tapping the Contents button of the Navigation bar or Action bar and shows all sections which have been defined for the magazine.Sections group together stories with similar content, such as those for Sports, Fashion, Finance, etc.
Figure 8.4. The Section Viewer shows all sections of a magazine
Using the Section ViewerThe Section Viewer is used by tapping the name of a section. As a result, the Story Viewer / Page Viewer will jump to the first story / page of that section.
In case many more sections exist than can fit the width of the screen, the bar can be swiped left or right.
Chapter 04 Using the Reader App
45
8.5 Story Viewer / Page Viewer
The Story Viewer / Page Viewer appears when tapping the Contents button of the Navigation bar or Action bar.
The Contents button is not active/available when the Store or Library is displayed.
Which of the two types of viewer appears depends on the way the Reader App has been configured:
�Story navigation: The Story Viewer appears, showing only the first page of each story.
Figure 8.5a. The same magazine, configured for story navigation (top) showing only the first page of each story in the Story Viewer, and for page navigation (bottom), showing each page of each story in the Page Viewer (iPad Reader App version shown)
�Page navigation: The Page Viewer appears, showing all pages of all stories.
The following components can be shown:
�Page preview �Story title �Story bullet �Story description �Page number
Differences exist in how these components are displayed in the different Reader App versions, as shown in the table on the following page.
Chapter 04 Using the Reader App
46
Table 8.5. Story Viewer / Page Viewer differences between Reader App versionsReader App version
Component iPad, Android (Froyo), HTML5 Android (Honeycomb)
Page preview All page previews are spaced apart equally. Space between stories is larger than space between pages of a story.
Story title Displayed below the page preview. Displayed above the page preview.Story bullet Displayed before each story title. Not used.Story description Displayed below the story title. Displayed below the story title.Page number Displayed below the page preview (Froyo only) Displayed below the page preview.
Figure 8.5b. Story Viewer / Page Viewer components. The top image depicts the iPad/Android (Froyo)/HTML5 version, the bot-tom image the Android (Honeycomb) version
A
B CD
A C
DE
A Page preview B Story bullet C Story title D Story description E Page number
Using the Story Viewer / Page ViewerThe functionality of the Story Viewer and Page Viewer is identical: swipe left or right to locate the required story or page and tap the thumbnail to display the page. Once tapped, the Action bar or Navigation bar and top Toolbar (when enabled) will automatically disappear.
Chapter 04 Using the Reader App
47
8.6 Page Scrubber
When the Reader App is configured for page navigation (see section 8.5 Story Viewer / Page Viewer), the Page Viewer can hold a multitude of pages. To ease navigation, a Page Scrubber can be made available between the Section Viewer and the Page Viewer.
Figure 8.6. The Page scrubber
A Page scrubberA
Using the Page Scrubber The Page Scrubber is essentially a slider which can be moved left or right. By doing so, the thumbnails in the Story Viewer / Page Viewer are moved in the same direc-tion, allowing the user to quickly browse the available pages in the magazine.
8.7 Forward/Back Buttons
The Forward and Back buttons allow the user to quickly return to a previously visited page; their functionality is much the same as using the Forward/Back button in a Web browser.
These buttons are available in the following locations:
�In either the top Toolbar (see section 7.1 Top Toolbar) or the Navigation bar (see section 7.2 Navigation Bar)
�As part of the Action bar (see section 7.3 Action Bar),
Figure 8.7. The Forward and Back buttons in the top Toolbar
A B
A Back button B Forward button
These buttons are disabled when the user accesses the Store or Library, or when the user has not
accessed any pages yet.
Chapter 04 Using the Reader App
48
8.8 TOC List
The TOC List appears when tapping the TOC button in the top Toolbar bar (see section 7.1 Top Toolbar). This list contains a quick-link to each story in the magazine.
Figure 8.8. Tapping the TOC button in the top toolbar brings up the TOC List
A
A TOC List
Each TOC List entry shows the following information:
�A preview of the first page of the story �Story title �Description
Using the TOC ListThe TOC List is used by swiping the list up or down to the required story and tapping the story to navigate to it. Once tapped, the TOC List, top Toolbar and Navigation bar will automatically disappear.
Chapter 04 Using the Reader App
49
8.9 Bookmarks List
When tapping the Bookmarks List button in the top Toolbar, the Bookmarks List appears. This list can be used for bookmarking stories of interest, so that they can be quickly accessed at any time. Any created Bookmarks can also be managed from this list.
Each Bookmark shows the following information:
�A preview of the first page of the story �The name of the issue (only when the issue
has been downloaded through the Store) �The Story title �The Story description
How to use Bookmarks and the Bookmarks List is explained in the following sections.
Figure 8.9. Tapping the Bookmarks button brings up the Bookmarks List
A Bookmark List button B Edit buttonC Bookmark button D Bookmark
C
D
A B
Chapter 04 Using the Reader App
50
8.9.1 Bookmarking a Story
Bookmarking a story is done by performing the following steps:
Step 1. Navigate to the story which needs to be bookmarked.
Step 2. Tap the screen to access the top Toolbar.
Step 3. Tap the Bookmarks List button.
The Bookmarks List appears.
Step 4. Tap the Bookmark button.
The story is added to the Bookmarks list; for each Bookmark a preview, the issue name, story name and description is displayed.
Bookmarks stay displayed in the Bookmarks List—even when closing the
issue containing the bookmarked story—up until the point when the issue itself is deleted.
8.9.2 Accessing a Bookmark
Accessing a bookmarked story is done by performing the following steps:
Step 1. Tap the screen to access the top Toolbar.
This can be done in any issue, not neces-sar i l y the issue conta in ing 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 book-marked issue is opened.
Chapter 04 Using the Reader App
51
8.9.3 Deleting a Bookmark
Deleting a bookmarked story is done by using one of the following methods:
�Using the swipe method �Using the Management controls
Using the swipe methodStep 1. Tap the screen to access the top Toolbar.
Step 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.
Using the Management controlsStep 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.
Chapter 04 Using the Reader App
52
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 button.
�To rearrange the order of the Bookmarks, drag the Bookmark by the Reordering control in the desired order. (See figure 7.9.4b to the right.)
Step 5. When finished, tap Done.
Figure 8.9.4a. When tapping the Edit button, the Edit controls appear
A Done button B Reordering control C Delete button
C
A
B
Figure 8.9.4b. Rearranging the Bookmarks list can be done by dragging the Bookmark by its Reordering control.
Chapter 04 Using the Reader App
53
8.10 Dossier Links
A Dossier Link is an area defined on the page or in a Web Element which acts as a link to another story. It is typically used in those places where a link to a story is placed such as on the magazine cover, on the page holding the table of contents, etc. Note that the defined area can be any part of the page, including images and text.
A Dossier Link as such can not be recognized, it is up to the designer of the page to make it clear to
the user that the area can be tapped in order to navigate to a story in the magazine (as is the case with headers on a cover).
Using a Dossier LinkTo use a Dossier Link, tap the defined area to navigate to the related story or page within that story.
8.11 Device Rotation
Although not a navigation method as such, rotating the digital device can be used by the designer to display the content of a page in a different way. For instance: when viewing a page in landscape orientation, an interview may be presented in the form of a video while rotating the digital device to portrait orientation might show the same interview in a regular article form (possibly even in Text View mode in which the text can be scaled to a suitable size).
The Reader App can also be configured in such a way that pages can be viewed in one orientation
only, switching to another orientation is then locked. This means that when rotating the device, the page view will not change; when rotating it in the same direction once more, the page view will rotate as well in order to prevent the page from being displayed upside down.
Chapter 04 Using the Reader App
54
9. Dynamic Content
Pages can hold a multitude of different types of content and functionality with which the reader can interact.
The following interactive content can be included:
�Video �Audio �Slide shows �Hotspots �Web Elements �Widgets �Scrollable areas �Web Links �Text View
How to interact with each type of content is described in the following sections.
9.1 Video
Videos can be recognized by their icon in the center of the frame.
Figure 9.1. Videos can be recognized by their icon in the center of the frame
Depending on the way the video is configured, it can either start playing automatically each time the page is accessed, or playback needs to be started manually. When playback is started automatically, it can also option-ally be sstarted in fullscreen mode.
Each method is explained in the following sections.
Videos can either be embedded in the magazine or streamed from an online location. For the latter
method, internet access is required. Playback may be influenced by the available bandwidth.
Chapter 04 Using the Reader App
55
9.1.1 Manual Playback
Playing a video manually can be done by doing the following:
�Tap anywhere on the video frame to start the video1.
Videos which are set to automatically play in fullscreen mode will only play in fullscreen mode;
when tapping the play button while the video is minimized, the video will be played fullscreen once more. When mini-mizing the video, play will stop.
The toolbar containing the video controls appears. (See figure 9.1.1 to the right.)
The Reader App can also be configured in such a way that the video controls for a video are not dis-
played. Controlling the playback of the video is then done by taking the video into fullscreen mode by using the pinching gesture (see section 9.1.2 Fullscreen Playback).
�After a short time, the toolbar will disappear. To bring the toolbar back up, tap the video once (iPad/Android) or hover the mouse over the video (HTML5 on a desktop).
�Tap the Play/Pause button to pause the video. Tap the button once more to resume playback.
�Use the scrubber to scroll through the video.
1 The Reader App can also be configured in such a way that videos automatically start playing as soon as the page is loaded.
Figure 9.1.1. The video controls
A B C
A Play/Pause button B Scrubber C Full screen button
Chapter 04 Using the Reader App
56
9.1.2 Fullscreen Playback
Playing a video in full screen mode is done by doing one of the following1:
�(iPad and Android Reader App) Tapping the Full Screen button in the toolbar
�(iPad and Android Reader App) Using the pinching movement
�(HTML5 Reader App) Double-click the video
Videos can also be set to automatically play in fullscreen mode. Such videos will only play in
fullscreen mode; when minimizing the video, play will stop. When subsequently tapping the play button, the video will be played fullscreen once more.
iPad and Android Reader AppThe toolbars containing the video controls appears (see figure 9.1.2 to the right).
�After a short time, the toolbar will disappear. To bring the toolbar back up, tap the video once.
�Tap and hold the Rewind button to rewind the video.
�Tap the Pause/ Play button to pause the video or resume playback.
�Tap the minimize button to leave fullscreen mode and continue playing the video.
�Tap the Done button to leave fullscreen mode and stop playing the video.
�Use the scrubber to scroll through the video.
1 The Reader App can also be configured in such a way that video is automatically played in fullscreen as soon as the page is loaded.
�Tap the aspect ratio button to change screen dimensions (4:3 or 16:9 aspect ratio).
When rotating the device while viewing a video in fullscreen mode, the video is kept being played in fullscreen mode.
Figure 9.1.2. The iPad video controls in fullscreen mode
A Done button B Scrubber C Aspect ratio buttonD Rewind button E Play/Pause button F Fast forward button G Minimize button
A
D E F G
B C
HTML5 Reader AppWhen hovering the mouse over the video, the toolbar containing the video controls appear.
�Click the Pause/ Play button to pause the video or resume playback.
�Use the scrubber to scroll through the video.
�Double-click the video to leave the fullscreen mode.
Chapter 04 Using the Reader App
57
9.2 Audio
Audio files can be recognized by their icon; tapping the icon will play the audio file.
Figure 9.2. Audio files can be recog-nized by their icon
The Reader App can also be configured in such a way that the audio icon as well as the audio controls are hid-den, for instance for the use of “background music”. Controlling the playback can then be done by using the Audio Control. (See section 9.2.2 Using the Audio Control.)
Depending on the way the audio file is configured, it can either start playing automatically each time the page is accessed, or playback needs to be started manually.
Controlling the playback of an audio file can either be done by using the embedded audio controls or by using the Audio Control.
Each method is explained in the following sections.
Audio files can either be embedded in the magazine or streamed from an online location. For the latter
method, internet access is required. Playback may be influenced by the available bandwidth.
(iPad only) Audio files that are being played continue playing when navigating to another page or another
story. They only stop playing when a video file or another audio file is started, when the playback of the audio file is stopped manually, or the when audio file has reached its end.
(Android only) Audio keeps playing when the same audio file is placed on the horizontal and vertical
page of the same story and the user changes the orienta-tion. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.
Chapter 04 Using the Reader App
58
9.2.1 Using Embedded Controls
Playing an audio file by using the embedded controls can be done by doing the following:
�Tap the audio icon to start playing the audio. The icon changes into a pause button.
�Tap the audio icon again to stop playing the audio.
9.2.2 Using the Audio Control
This feature is not available on the Android version of the Reader App; any automatically played back-
ground audio is automatically stopped when navigating to another page.
Once the playback of an audio file has been started (either manually or automatically), controlling the playback can also be done by using the Audio Control1.
The Audio Control can be accessed by tapping the Audio Control button in the top Toolbar. It contains the following components:
�Audio Control pop-up header. The header of the Audio Control pop-up.
�Audio title. Title of the song being played.
�Audio description. Short description of the song being played.
�Stop/Play button. Button for stopping/restarting the playback.
�Slider. For scrolling through the file. (Works for embedded audio files only, not for files streamed over the Internet.)
1 For audio files for which the audio has been started automati-cally and for which the playback controls are hidden, using the Audio Control is the only way of controlling its playback.
Chapter 04 Using the Reader App
59
Figure 9.2.2. The Audio Control components
A
C
B
D
E F
A Audio control button B Audio control popupC Audio title D Audio descriptionE Stop/Restart button F slider
9.3 Slide Shows
Slide Shows can be recognized by their icon in the lower left-hand corner of the frame.
Figure 9.3. Slide Shows can be recognized by their icon
A Slide Show can either be viewed within the frame itself or in fullscreen mode. Each method is explained in the following sections.
Chapter 04 Using the Reader App
60
9.3.1 Viewing in Frame
Viewing a Slide Show within its frame can be done by doing the following:
�Swipe the displayed image left or right to view the next or previous image.
9.3.2 Viewing in Fullscreen Mode
Viewing a Slide Show in fullscreen mode can be done by doing the following:
�Tap the currently displayed image once in order to access fullscreen mode.
�Tap the currently displayed image once more in order to leave fullscreen mode.
When rotating the device while viewing a Slide Show in fullscreen mode, the Slide Show is kept being
played in fullscreen mode.
To navigate the images in the Slide Show, swipe the dis-played image left or right to view the next or previous image.
Chapter 04 Using the Reader App
61
9.4 Hotspots
The Hotspot functionality involves tapping a particular area on the screen (the Hotspot) with the result that other content (the Hotspot content) will appear in either the same location or in a different location. In its most basic usage, the Hotspot content will appear in a pop-up win-dow, but a more advanced usage involves showing the content embedded in the page.
It is up to the designer how the Hotspot functionality is incorporated in the page, and how it is commu-
nicated to the reader that a certain page item contains Hotspot functionality.
The example below shows the usage of tapping a Hotspot on the page, after which the Hotspot content will appear in a pop-up window.
Using HotspotsUsing the Hotspot feature can be done by doing the following:
�Tap the area defined on the page as the Hotspot.
The Hotspot content appears in a pop-up window.
�Tap anywhere on the pop-up window to close the pop-up.
An alternative use of Hotspots is that the Hotspot disap-pears as soon as the Hotspot content appears. To then close the Hotspot content, do one of the following:
�Tapping the same or another Hotspot (only if there is no Hotspot Close button)
�Tapping the Hotspot Close button
�Tapping the Selected Hotspot (only if there is no Hotspot Close button)
Figure 9.4. In its most basic usage, when tapping a Hotspot (above), the corresponding Hotspot content appears in a pop-up window (below)
Chapter 04 Using the Reader App
62
9.5 Web Elements
Web Elements are areas that hold or link to content in the form of Web pages. Typically, these pages are located on the Internet, but in some cases these pages can be bundled with the Reader App as well.
A Web Element can be used in three different ways:
�Embedded in the page. Normally used for (small) components of a Web page.
�As a pop-up window. Can be used for dis-playing small components of a Web page or the full Web page.
�In a Web browser. Used for displaying full Web pages.
It is up to the designer how Web Elements are incor-porated in the page, and how it is communicated
to the reader that a certain page item contains such an interactive component. For more information about how to use a Web Elements, see the Help page in the maga-zine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)
When content of a Web Element is taken from the Web, internet access is required. Display speed
may be influenced by the available bandwidth.
Using Web ElementsTo use a Web Element, do the following:
�Embedded content. Whether interaction is required or not depends on the content used. The content is directly loaded when the page is displayed; if the content contains interactive components (such as buttons or form fields), the user can interact with them accordingly.
�Content in a pop-up window. The content is not loaded until the frame is tapped; if the content contains interactive components (such as buttons or form fields), the user can interact with them accordingly.
�Content in a Web browser. The content is not loaded until the frame is tapped. A message is displayed asking the user if the content should be displayed in a Web browser. When the user confirms this, the Web browser is opened to access the link. As a result of this action, the Reader App is closed.
Web Elements can also be used as empty frames that are placed over sections of text such as a
hyperlink. For the end user the experience will be that of tapping the text itself.
Chapter 04 Using the Reader App
63
9.6 Scrollable Areas
A Scrollable Area is a frame in which more content is available then can be displayed by the frame. To view the content which is not visible, the content can either be scrolled horizontally or vertically.
It is up to the designer how the Scrollable Area func-tionality is incorporated in the page, and how it is
communicated to the reader that a certain page item contains Scrollable Area functionality. For more informa-tion about how to use Scrollable Areas, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)
Using a Scrollable AreaA Scrollable Area is used by doing the following:
�Swipe the content left/right or up/down to view any currently hidden content.
9.7 Text View
The Text View mode is a special mode in which the font size of the article can be increased or decreased in order to suit the reader’s needs.
In Text View mode, the article is essentially shown as a Web page (instead of as an image as is the case for pages viewed in landscape orientation), and will therefore also always displayed as one long, continuous page.
Figure 9.7. In Text View mode, the text of the article can be increased or decreased in order to suit the user’s needs
Text View mode is only available when viewing a page in portrait orientation.
Whether or not a page is displayed in Text View mode is a design decision; the designer can also
decide to offer the page in the same way as a page in
Chapter 04 Using the Reader App
64
landscape orientation (effectively an image) by which the text obviously cannot be scaled.
Using Text ViewTo use Text View, do the following:
�Use the vertical pinch gesture to increase or decrease the text (but see comments below about header images). While pinching, the cur-rent font size is displayed in percentages in the top right-hand corner of the page.
�Navigate the page by swiping up or down.
ImagesImages can be incorporated in one of the following ways:
�As a header image, appearing at the top of the page, before the article starts.
Designers can use a header image to dis-play a fullscreen-sized image possibly
containing a headline. Obviously, text that is part of such images cannot be scaled.
�As an image as part of the article, appearing anywhere in the text itself.
�As additional images, appearing in a separate section at the bottom of the page following the article. Tap an image to view it in fullscreen mode; if multiple images are pres-ent swipe horizontally to navigate them.
Text View pages can also be fully styled in the same way as a Web page, including the incorporation of
images.
Chapter 04 Using the Reader App
65
10. Newsfeeds
The Newsfeed functionality is primarily used by publishers to offer the user the latest news, sports results, etc., by means of a Web page.
Accessing the Newsfeed is done by tapping the Newsfeed button in the Navigation bar or the Action bar. The Web page is displayed as an overlay on top of the magazine. Navigating the page is done by using the available con-trols on the page, as offered by the publisher.
Closing the Newsfeed page can be done by doing one of the following:
�Tapping the Close button in the top right-hand corner
�(Android only) Using the Back button of the device
Since Newsfeed content is taken from the Web, internet access is required. Display speed may be
influenced by the available bandwidth. Figure 10. The Newsfeed page
A Close button
A
Chapter 04 Using the Reader App
66
11. Sharing Content
The Content Sharing functionality can be used to share specific content with others by sharing the content via Twitter, Facebook, or e-mail.
The following content can be shared:
�Page. Either the currently visible part of the page or the thumbnail of the page as shown in the Story Viewer / Page Viewer.
�Part of a page. A manually defined part of a page.
�Hyperlink. A link to an external Web site, typi-cally holding information related to the story.
If pages and Hyperlinks are both available, they are automatically combined in the same message.
The method of sharing each type of content is explained in the following sections.
The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar.
Figure 11. Accessing the Content Sharing functionality is done by tapping the Share Content button in the top Toolbar
To leave the Content Sharing functionality at any stage, do one of the following:
�Tap anywhere on the page
�Tap a button in top Toolbar (including the Share Content button), Navigation bar, or Section bar
�Tap anywhere in the Flipview
�Rotate the device
Chapter 04 Using the Reader App
67
11.1 Sharing a Page
The availability and functionality of sharing a page is set through a DMSetting. For more information,
see chapter 7, Customizing the iPad Reader App – section 9.4 Content Sharing. It is assumed here that page sharing is enabled.
To share a page, perform the following steps:
Step 1. Navigate to the page which needs to be shared.
Step 2. Tap the Share Content button in the top Toolbar.
A screen appears asking what needs to be shared.
Step 3. Choose This page.
Depending on the configuration of the Reader App, the following is shared:
�The currently visible part of the page. A screenshot is made of the full screen, capturing the current way that the page is displayed. Note the followiing:
�Toolbars are not included in the screenshot; any content obscured by a toolbar is included in the screenshot.
�Video playback cannot be cap-tured; the background image (such as a placeholder image) is used instead.
�Long pages cannot be captured in full.
�A thumbnail of the page. The thumbnail used is the thumbnail which is available in the Story Viewer / Page Viewer for the page. If no matching page or orientation is available, the first page of the story or the corresponding page in the opposite orientation is used.
The Content Sharing window appears showing all defined sharing services.
Step 4. Tap the required service for sending out the page.
Step 5. Depending on the chosen service, pro-ceed as follows:
�Twitter: When logging in for the first time using the Reader App, the Twitter login screen appears. Enter the account details and tap Allow. When logged in, a screen appears in which text can be entered.
�Facebook: The Facebook login screen appears. Enter the account details and tap Login. When logged in, a screen appears in which text can be entered. Tap Post to send the message.
�E-mail. An e-mail is created with the hyperlink inserted. Enter further details such as the recipient’s e-mail address and tap Send.
Chapter 04 Using the Reader App
68
11.2 Sharing Part of a Page
The availablity of sharing a part of a page is set through a DMSetting. For more information, see
chapter 7, Customizing the iPad Reader App – section 9.4 Content Sharing. It is assumed here that partial page sharing is enabled.
To share a part of a page, perform the following steps:
Step 1. Navigate to the page of which a part needs to be shared.
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.
Figure 11.2. The Area Selector
A
B
A Resize handle B Move handle
Step 4. Use the handles to define the area which needs to be shared:
�Drag any of the Resize handles on each corner to adjust the size of the area.
�Drag the Move handle in the middle to reposition the defined area.
Step 5. In the top Toolbar, tap Share.
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, pro-ceed as follows:
�Twitter: When logging in for the first time using the Reader App, the Twitter login screen appears. Enter the account details and tap Allow. When logged in, a screen appears in which text can be entered. When ready, tap Tweet. The message is sent to Twitter, while the image is sent to TwitPic.
�Facebook: The Facebook login screen appears. Enter the account details and tap Login. When logged in, a screen appears in which text can be entered. Tap Post to send the message.
�E-mail. An e-mail is created with the page inserted or attached. Enter fur-ther details such as the recipient’s e-mail address and tap Send.
Note the followiing:
�Toolbars are not included in the screen-shot; any content obscured by a toolbar is included in the screenshot.
Chapter 04 Using the Reader App
69
�Video playback cannot be captured; the background image (such as a placeholder image) is used instead.
�Long pages cannot be captured in full.
11.3 Sharing a Hyperlink
To share a Hyperlink, perform the following steps:
It is assumed here that a Hyperlink exists for the selected story.
Step 1. Navigate to the page of which its Hyperlink needs to be shared.
Step 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, pro-ceed as follows:
�Twitter: When logging in for the first time using the Reader App, the Twitter login screen appears. Enter the account details and tap Allow. When logged in, a screen appears in which text can be entered.
In order to prevent that the URL takes up too many characters, a shortened
version of the URL is automatically inserted. Tap Post to send the message.
(Optional) Remove the inserted or attached image of the page.
�Facebook: The Facebook login screen appears. Enter the account details and tap Login. When logged in, a screen appears
Chapter 04 Using the Reader App
70
in which text can be entered. Tap Post to send the message.
(Optional) Remove the inserted or attached image of the page.
�E-mail. An e-mail is created with the hyperlink inserted. Enter further details such as the recipient’s e-mail address and tap Send.
(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 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.
Chapter 04 Using the Reader App
71
12. Using the Store
For those Reader Apps which have Store functionality, the Store can be used for previewing and purchasing issues.
The Store can be accessed by tapping the Store button in the Navigation bar or the Action bar.
By default, the Store shows multiple issues at a time, but it can also be set to show a single issue. (See figure below.)
For each issue, the following components are available (see figure 12b on the next page):
Figure 12a. The store in multiple-issue view (left) and in single-issue view (right)
�Back to issue button. For returning to the issue which is currently open.
�Store filter. For filtering the Library by content type.
�Single-issue view button. For displaying the Store one issue at a time.
�Multiple-issue view. For displaying the Store multiple issues at a time.
Chapter 04 Using the Reader App
72
�Cover preview. A preview of the cover. (In the HTML Store, the cover also acts as a button to switch between single-issue view and multiple-issue view.)
�Preview issue button. For opening a new screen with more detailed information about the magazine. (See section 12.3 Previewing an Issue.)
�Buy/Free button. For buying the magazine (see section 12.4 Downloading an Issue) or for downloading it for free.
�Issue name and description. The name and description of the issue.
�Cover story description. Short description of the cover story.
SubscriptionsThe Store can also contain subscription functionality for subscribing to or accessing a subscription. For details about using the Subscription functionality, see section 12.1 Store With Subscription Functionality .
Figure 12b. The Store components
A Back to issue button B Store filter C Single-issue view button D Multiple-issue view button E Preview button F Buy/Free button G Issue name and descriptionH Cover story description I Cover preview
A B C D
EFGH
I
Chapter 04 Using the Reader App
73
12.1 Store With Subscription Functionality
The Store can also contain functionality to let the user subscribe to a magazine subscription or sign in to an existing subscription account.
Two types of subscription services can be implemented:
�(iPad Reader App only) The iTunes subscrip-tion service
�Any other subscription server
On the iPad Reader App, both subscription services can be used simultaneously.
How to use each type of subscription is described in the following sections.
12.1.1 The iTunes Subscription Service
(iPad Reader App only) The iTunes Subscription function-ality of the Store consists of the following components (see figure 12.1.1 on the next page):
�Subscription advert. Advert from the pub-lisher to advertise current subscription offers.
�Subscribe buttons. For accessing a page to subscribe to a magazine subscription.
�Account button. For accessing a page with additional options based on the user’s account. (The default implementation is a page on which the user can restore his/her subscription. This option is mandatory by Apple and should always be part of this page.)
When using the iTunes subscription functionality, log-in and account information is based on the log-
in which is currently active for the iTunes store on the iPad. Therefore, no Log In or Log Out buttons are required.
SubscribingSubscribing to a subscription is done by performing the following steps:
Step 1. Tap a Subscribe button.
A page will appear with information about the subscription and how to subscribe.
Step 2. Follow the steps on the page.
When the subscription process is complete, access the Library to view the issues that are part of the new subscription.
After purchasing a subscription, you are allowed to download the latest issue and all issues that are
released while the subscription is valid. When the sub-scription expires, it is no longer possible to download issues that were available within the subscription period.
Chapter 04 Using the Reader App
74
Figure 12.1.1. The Store view with iTunes Subscription functionality
A Subscription advert B Subscription buttons C Account button
A
B
C
Chapter 04 Using the Reader App
75
Copying subscriptions between iPadsWhen a user has multiple iPads, it is possible to copy issues that are part of a subscription from one iPad to another. Take note of the following:
�Only issues that are part of the subscription will be copied.
�The issues that are being copied will not be removed or affected on the source iPad in any way or form.
�The copied issues will be placed in the Library of the Reader App of the target iPad, ready to be downloaded. (Because the user has already paid for these issues, downloading them is free of charge.)
�Any settings such as Bookmarks will not be copied.
Copying subscriptions between iPads can be done by performing the following steps:
Step 1. On the target iPad, tap the Account button in the Navigation bar.
The Account page appears.
Step 2. Tap Copy Subscriptions.
Step 3. Enter the iTunes user details.
The transfer process is started. Make sure not to close the Reader App during this process.
When completed, any transferred issues are ready to be downloaded.
Step 4. Tap the Download button for those issues which need to be downloaded.
12.1.2 A Non-iTunes Subscription Service
For subscription services which are not based on iTunes Subscriptions, the following components exist in the Store (see figure 12.1.2 on the next page):
�Sign In / Sign Out button. For logging into or out of an existing subscription account.
�Subscription advert. Advert from the pub-lisher to advertise current subscription offers.
When a non-iTunes Subscription Service is used in combination with the iTunes
Subscription Service, note that the Store will not display the Offer pages that are part of the non-iTunes Subscription; Apple does not allow this.
�Subscribe button. For accessing a page to subscribe to a magazine subscription.
�Existing Customer. For upgrading/extend-ing a current subscription.
�Account button. For accessing a page with additional options based on the user’s account.
How to use the subscription components is described in the following sections.
Chapter 04 Using the Reader App
76
Figure 12.1.2. The Store view with non-iTunes Subscription functionality
A Subscription account login/logout button B Subscription advert C Subscription button D Upgrade subscription button E Account button
A
B
D
C
E
Chapter 04 Using the Reader App
77
12.1.3 Signing In or Out
When the user is already subscribed to a magazine, he or she can sign in to the account by doing the following:
Step 1. Tap the Sign In button in the top Toolbar.
The Sign In dialog box appears.
Figure 12.1.3. The Subscription Sign In dialog box
Step 2. Use the dialog box as follows:
�In the User Name box, enter the user name for the account.
�In the Password box, enter the password.
�(Optional) Select the Remember Me check box to automatically have the user logged-in when the Reader App is launched.
�(Optional) Tap Privacy to access a page with information about how the user’s data is gathered, used, and managed.
�(Optional) Tap License agreement to access a page with information about the license agreement for the subscription.
Step 3. Tap Submit to log in.
Once logged in, the following functionality is available:
�The Sign In button changes into a Sign Out button for signing out of the account.
�The Account button in the Navigation bar or the Action bar is available for accessing an external page for managing the account details.
�The user is forward to the Library, display-ing the issues that are available to the user as part of their subscription (including those issues which have not been downloaded yet). The Library also shows any downloaded issues which are not part of the subscription. (For more information, see section 13. Using the Library.)
Chapter 04 Using the Reader App
78
12.1.4 Subscribing
Subscribing to a subscription is done by performing the following steps:
Step 1. Tap the Subscribe button.
A page will appear with information about the subscription and how to subscribe.
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 sec-tion 12.1.3 Signing In or Out.)
12.1.5 Upgrading a Subscription
Upgrading an existing subscription is done by performing the following steps:
Step 1. Tap the Existing Subscriber button.
A page will appear with information about how to upgrade the subscription.
Step 2. Follow the steps on the page.
Chapter 04 Using the Reader App
79
12.2 Navigating the Store
Navigating the Store is done by doing one of the following:
�When in multiple-issue view: navigating between each set of issues can be done by swiping vertically.
�When in single-issue view: navigat-ing between issues can be done by swiping horizontally.
12.3 Previewing an Issue
Before deciding to download an issue, a preview of it can first be viewed. Previewing an issue can be done by tapping the Preview button for that issue.
Figure 12.3. The preview screen for previewing an issue
Part of the screen shows a page from the magazine (it can optionally be swiped vertically if this page does not fit the screen). It is up to the publisher which page is shown, but typically this will be the page holding the table of contents.
Closing the Preview screen can be can be done by tap-ping the Close button for that issue.
Chapter 04 Using the Reader App
80
12.4 Downloading an Issue
The Store can be used for downloading issues. Issues can either be free of charge or will have to be purchased.
An issue is downloaded from the Store by performing the following steps:
Step 1. Tap the Free or Buy button for the issue in either the Store itself or in the Preview screen (see section 12.3 Previewing an Issue).
Step 2. (iPad only) In the message which appears asking to confim that the issue should be downloaded or purchased, tap Download.
The iPad Reader App can be configured in such a way that downloading over a 3G
network is not possible. If this is the case, a message is displayed.
The App Store or Android Market is accessed and purchase information is displayed.
Step 3. Follow the steps for purchasing the issue.
When the purchase process is complete, the issue is added to the Library and the download is started automatically.
Take note of the following behavior when a download is in progress:
�iPad Reader App: other issues can be downloaded while a download is in prog-ress. Any additional downloads are added to the Library; starting these downloads needs to be done manually.
�Android Reader Apps: other issues cannot be downloaded while a download is in progress.
Following the Download ProgressDuring the download of the issue, the progress is dis-played in the form of a progress bar, labels and controls. This way, a user can see the progress of a download, pause it, and resume the download at a later stage.
Two types of download processes exist:
�Non-progressive downloads: the issue needs to be fully downloaded before it can be read.
�Progressive downloads: Initially, only the most basic content is downloaded and made available (such as the cover and the cover story). The user can open the issue and start reading that content while all other content is progres-sively downloaded in the background.
Each is explained in more detail in the following sections.
The progressive download method fully replaces the non-progressive method. Only magazines that were released before the progressive download method was available will make use of the non-progressive method; over time these will become less and less.
Different labels and controls are used for each download process, as shown in the following sections.
Chapter 04 Using the Reader App
81
Automatically opening a magazine after down-loading(iPad Reader App only) The Reader App can be config-ured in such a way that an issue or Segment is opened automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads).
Background DownloadingWhen the Reader App is suspended while a download is in progress, the following occurs:
iPad Reader AppThe download is continued. However, Apple applies the following restrictions:
�The time is finite. When the app is closed, a maximum of 10 minutes is left in which the app is still allowed to execute code.
�System resources must permit back-ground execution. When resources (such as memory) are needed for a newly started app, our background downloading might be cut off early.
For additional technical information see:
http://developer.apple.com/library/ios/#documentation/iphone/conceptual/iphoneosprogrammingguide/BackgroundExecution/BackgroundExecution.html
Shortly before the time limit is reached, a message is displayed to the user, allowing the user to continue or cancel the download. When the user does not respond to the message, the download is cancelled; the download is resumed though at the point where it was left off the next time the download is continued.
Users with a 3G connection can disable background downloading by means of the following setting on the Settings screen on the iPad:
�3G Download Options/Continue After Closing App
Android Reader App The following behavior exists:
�When the app is moved to the back-ground: the download continues.
�When the app is killed: the download stops.
�When app is relaunched: the down-load can be resumed.
Chapter 04 Using the Reader App
82
12.4.1 Non-Progressive Downloads
The following images show the labels, progress bar, and controls used for issues that are downloaded by using the non-progressive download process. (Images shown are those of the iPad Reader App, Reader Apps on other platforms may look slightly different.)
Using this method, an issue needs to be fully downloaded before it can be viewed. The download process can be stopped and resumed at a later stage.
Downloading. When the download is in progress, the download percent-age and status is displayed.
Download paused. When the download process is interrupted (for instance by closing the Reader App or by tapping the Pause button), an indication is given how much of the issue has been downloaded so far. Tapping the Download Resume but-ton will resume from where it was left off.
Download stopped. (iPad only) Shown when the download pro-cess failed or has been interrupted. Tapping the Download Resume but-ton will resume from where it was left off.
Installing. Once the issue has been fully downloaded, it is unpacked and installed.
Installation stopped. When the installation has failed or has been interrupted. Tapping the Install button will restart the installation process.
Chapter 04 Using the Reader App
83
12.4.2 Progressive Downloads
The behavior of the progressive download process is as follows:
�Download is started: an initial package is downloaded, consisting of the magazine.xml file, the cover and all thumbnails.
�When user does not interact with the magazine, stories will be downloaded in order of appearance (first story first, last story last).
�When the user accesses a story (in any possible method, for instance by tapping a pre-view in the Story Navigator, tapping a Dossier Link on the cover, etc), the following rules apply:
�The currently visible story maintains the highest download priority and its content will be displayed immediately.
“Immediately” in this context means whenever the tablet has a download
slot (thread) available. In the case of the iPad for instance, 3 threads are active at all times. None of the threads will be can-celled, but each will finish first before the next is started. In the extremely rare situa-tion where all three threads are downloading a large video, ‘immediately’ may take a while (until a thread is available).
�The story next in line will have “normal” priority.
�Stories that are linked within the currently visible story (by means of a Dossier Link), will also have “normal” priority.
�All other stories will have “low” priority.
During the download, the process can be stopped and resumed at a later stage.
The following images show the labels, progress bar, and controls used for magazines that are downloaded by using the progressive download process. (Images shown are those of the iPad Reader App, Reader Apps on other platforms may look slightly different.)
Download not started. The down-load has not yet started.
Download started, content not yet available. When the download has started, the download button changes into a Pause button. Tapping the button will pause the download. The dimmed thumbnail indicates that no content is available yet for viewing.
Download star ted, content available. When the download has started, the download but-ton changes into a Pause button. Tapping the button will pause the download. When the thumbnail is not dimmed anymore, content is available for viewing.
Download paused. When the download process failed or has been interrupted, the pause but-ton changes into a Resume button. Tapping the button will resume from where it was left off.
Chapter 04 Using the Reader App
84
When viewing the magazine while the download is still in progress, the download state is shown in the Story Viewer / Page Viewer and on the page itself (when attempting to view a page which is not available yet). (See figure 12.4.2 on the next page.)
Chapter 04 Using the Reader App
85
Figure 12.4.2. When viewing an issue which is not fully downloaded yet, the download progress of each story is indicated on the page and in the Page Viewer / Story Viewer. The stories which are available for viewing appear normally in the Story Viewer / Page Viewer.
A
C DB
A Page view download progress B Downloaded story C Story download in progress D Story download not started yet
Chapter 04 Using the Reader App
86
13. Using the Library
For those Reader Apps which have Library functionality, the Library can be used to browse through the available issues for that magazine.
The Library shows the following content:
�Issues which have been downloaded from the Store.
�(Reader Apps with subscription functionality only) Issues that are available as part of the sub-scription, including those which have not been downloaded yet.
�All Segments for an Issue which have been downloaded from the Store, including those which have not been downloaded yet. (Segments which have not been downloaded appear dimmed and will have a Download button).
Slight differences exist between the Libraries of the vari-ous Reader Apps, as explained in the following sections.
13.1 iPad Reader App Library
The Library on the iPad Reader App consists of the fol-lowing pages (see figures on the next pages):
�Library Overview page. Shows all available issues. This page is accessed by tapping one of the following buttons:
�The Library button in the Navigation bar
�The Back To Overview button in the Segments Overview page
�Segments Overview page. Shows the issue in the top section of the page and all its available Segments in the bottom section of the page. This page is accessed by tapping an issue con-taining Segments (recognizable by its icon).
Figure 13.1a. Issue with Segments can be recognized by their icon. In this example, the issue to the left contains Segments, the issue to the right does not contain Segments. Tapping the issue with Segments brings up the Segments Overview page.
Chapter 04 Using the Reader App
87
The following components are available (see examples on the following pages):
Library Overview page �Back to issue button. For returning to the
issue which is currently open.
�Library filter. For filtering the Library by con-tent type.
�Edit/Done button. For quickly deleting an issue. Once tapped, it changes into the Done button for exiting the edit mode.
�Sign In/Sign Out button. (Reader Apps with subscription functionality only) For signing in to or out of a non-iTunes subscription account. Only when logged in will the Library show the content that is available as part of the non-iTunes subscription.
�Issue name and description. The name and description of the issue.
�Cover thumbnail. A thumbnail of the cover.
�Download button. For downloading the issue. In case the issue contains Segments, all Segments will also be downloaded.
�Name and description. The name and description of the issue or Segment.
Segments Overview page �Back to Overview button. For returning to
the Library Overview page.
�Back to issue button. For returning to the issue which is currently open.
�Segment filter. For filtering the Library by Segment.
�Edit/Done button. For quickly deleting a Segment. Once tapped, it changes into the Done button for exiting the edit mode.
�Download Issue button. For downloading the issue–including all Segments when avail-able–in one action.
�Segment Download button. For download-ing an individual Segment.
�Name and description. The name and description of the issue or Segment.
Chapter 04 Using the Reader App
88
Figure 13.1b. The assets of the Library Overview page on the iPad
A Back to issue button B Issue with SegmentsC Downloaded issue without SegmentsD Library filter E Edit button
A
D E
B C
Chapter 04 Using the Reader App
89
Figure 13.1c. The assets of the Library Segments Overview page on the iPad
A Back to Overview button B Back to Issue buttonC Download Issue button D Segment FilterE Edit buttonF Issue cover G Downloaded SegmentH Not yet downloaded Segment
A DCB E
F
G H
Chapter 04 Using the Reader App
90
13.2 Android App Library
The Library of the Android Reader App shows all available issues and Segments. This page is accessed by tapping the Library button in the Navigation bar.
The following components are available:
�Library filter. (Honeycomb only) For filtering the Library by content type.
�Segment filter. (Honeycomb only) For filter-ing the Library by Segment.
�Sign In/Sign Out button. (Reader Apps with subscription functionality only) For signing in to or out of a subscription account. Only when logged in will the Library show the content that is available as part of the subscription.
�Issue name and description. The name and description of the issue.
�Cover or Segment thumbnail. A thumbnail of the cover or Segment.
�Download button. For downloading the issue or Segment. (Segments can only be downloaded individually.)
�Name and description. The name and description of the issue or Segment.
Figure 13.2. The Library on the Android Reader App
A Library filter B Segment filter C Sign In/Sign Out button D Issue Segment (not yet downloaded) E Downloaded issue Segment
CBA
D
F
E
Chapter 04 Using the Reader App
91
13.3 Navigating the Library
The Library can display a variable number of issues at a time. Navigating between additional groups of issues can be done by swiping vertically.
13.4 Using the Library Filter
A magazine can be set to belong to a particular type of publication (such as news, sports, or defined by lan-guage). When implemented, the Library Filter can be used to filter the Library by those content types. For instance, if issues are available in a specific language, choose the language from the filter to only show content in that language.
Figure 13.4. The Library filter allows a user to filter the Library by content type (shown here on the Android Honeycomb)
B
A
A Filter button B Filter list
The filter is used by performing the following steps:
Step 1. Tap the Filter button in the top Toolbar.
A list appears showing all available choices. Choices by which the Library is currently filtered are indicated by a check mark; those by which the Library is not currently filtered do not have such a check mark. (Multiple selected choices are possible.)
Chapter 04 Using the Reader App
92
Step 2. Tap the filter item(s) to have them included in or excluded from the filtering process.
As soon as a choice is made, the Library con-tent is updated based on the new filtering rules.
Step 3. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list.
Chapter 04 Using the Reader App
93
13.5 Using the Segment Filter
A magazine can be made available as a single down-load or in Segments. The Segment Filter can be used to quickly find the Segment which you are after.
The filter is used by performing the following steps:
Step 1. Tap the Filter button in the top Toolbar.
A list appears showing all available choices. Choices by which the Library is currently filtered are indicated by a check mark; those by which the Library is not currently filtered do not have such a check mark.
The items which appear in the Segment Filter are determined as follows:
�iPad Reader App: only those Segments which have been defined for the issue appear in the list.
�Android Reader App: When a choice is made from the Library Filter first, only those Segments that have been defined for the issue which is chosen appear in the list.
Step 2. Tap the filter item(s) to have them included in or excluded from the filtering process.
As soon as a choice is made, the Library con-tent is updated based on the new filtering rules.
Step 3. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list.
Figure 13.5. The Segment filter allows a user to filter the Library by defined Segments
A Segment Filter button B Filter list
A
B
Chapter 04 Using the Reader App
94
13.6 Downloading Issues and Segments
Downloading issues and Segments from the Library is done as follows:
iPad Reader AppDownload an issue by doing one of the following:
�On the Library Overview page, tap the download button for the issue.
�On the Segments Overview page, tap the Issue Download button. The issue including all its Segments will be downloaded.
Download a Segment by doing one of the following:
�On the Library Overview page, tap the download button for the issue. The full issue including all its Segments will be downloaded.
�On the Segments Overview page, do one of the following:
�Tap the Issue Download button. The issue including all its Segments will be downloaded.
�Tap the Download button for an indi-vidual Segment; only that Segment will be downloaded
Android and HTML5 Reader App �Tap the Download button from either the
Library or the Preview screen. Segments can only be downloaded one-by-one.
13.7 Opening an Issue or Segment
An issue or Segment is opened from the Library by one of the following methods:
�By tapping its cover or Segment thumbnail.
�(iPad Reader App only, and only if the down-load was started manually) Automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (pro-gressive downloads).
Chapter 04 Using the Reader App
95
13.8 Deleting an Issue or Segment
An issue or Segment is deleted from the Library by per-forming the following steps:
Step 1. Use one of the following methods:
�Tap and hold the issue or a Segment of the issue which needs to be deleted
�(iPad Reader App only) Tap the Edit but-ton in the Status bar of the Library.
The following will take place:
�iPad: A Remove button ( ) will appear in the top left-hand corner of the cover.
�Android: A context menu appears with a Delete command.
Step 2. Do one of the following:
�iPad: Tap the Remove button
�Android: Tap the Delete command
The following will happen (where applicable):
�Bookmarks: any created Bookmarks for the issue will be removed.
�For issues: when the issue does not consist of Segments, it is removed from the Library.1
�For Segments: as long as at least one Segment of the issue is still available, all Segments continue to be displayed in the
1 If the issue or Segment is part of a subscription and the user is logged in to the subscription account, the downloaded issue is removed from the app but remains available for downloading in the Library.
Library; the Segment which is removed will appear dimmed and its Download button appears again. As soon as the last Segment of an issue is removed, all Segments are automatically removed.1
Step 3. (iPad only) To finish the process, tap Done in the Status bar of the Library.
Cancelling the processTo cancel the process without deleting the issue, do the following:
iPad Reader App Do one of the following:
�Tap the Done button in the Status bar of the Library
�Navigate to a different area of the Reader App, such as an open issue or the Store
Android �Tap the Back button
Chapter 04 Using the Reader App
96
14. Custom Home Page
One possible way of customizing the Reader App is to embed it into another application which acts as a shell through which the Reader App is accessed.
This means that when opening the Reader App, this shell is displayed first. This functionality can be used by pub-lishers to first present other content to the user (such as an online TV guide), before offering the user the possibility to access the latest issue of the magazine, the Store, or the Library.
Obviously, it is entirely up to the design of this exter-nal shell how the method of accessing the magazine is presented.
15. Version Information
The user can verify which version of the Reader App is installed. Two version numbers are provided:
�Application version: the version number of the Reader App.
�Framework version: the version number of the project with which the Reader App was build.
This information can be found in the following locations:
�iPad: in the Settings app of the digital device. (See figure below.)
�Android: (Framework version only) On the Manage Applications screen (accessed via Settings App > Applications).
Figure 15. The version information of a Reader App on an Applie iPad
Chapter 04 Using the Reader App
97
16. Reader App Updates
New Reader App features are made available to publish-ers on a regular basis. When a new magazine issue is published which makes use of a new feature, updating the installed Reader App is required.
This process only applies to those Reader Apps which do not bundle the magazine content with the
Reader App.
When a user starts the download of an issue, the version number of the Reader App is verified against the mini-mum version that is required to read the issue. When the Reader App version is lower than the specified minimum version, a message is displayed informing the user that the Reader App requires updating; the download cannot be started before the Reader App is updated.
When receiving such a message, respond by doing one of the following:
�Tap Cancel. The Reader App is not updated. Any issues which are compatible with the currently installed Reader App can still be downloaded and read; issues which require an updated Reader App cannot be downloaded.
�Tap OK. You are transferred to the App Store from where the new version can be downloaded free of charge. After downloading, both old and new magazine issues can be downloaded and read.
17. Using the HTML5 Reader on a PC
The HTML5 Reader App is specifically designed for view-ing on a desktop PC/laptop using a suitable Web browser. Since these are devices without a touch screen, interac-tion is performed by using the mouse or keyboard.
The following behavior is different on a desktop PC/laptop compared to a touchpad device (see also figure below):
�Clicking vs tapping. Instead of tapping the screen to invoke specific functionality, click once with the mouse.
�Mouse hovering. Hovering the mouse pointer over a certain area makes specific com-ponents appear. This is the case for instance when hovering the mouse pointer over one of the Navigation Zones, which makes the Navigate to Next Page, Navigate to Previous Page, the Navigation bar, or the top Toolbar appear. (See figure below.)
�Mouse dragging. Navigating between pages or stories can be done by dragging the page up, down, left, or right by using the mouse.
�Closing navigational tools. Closing the navigational tools is done as follows:
�Story Viewer / Page Viewer: click the Close button in the top right-hand corner
�TOC List: click the TOC List icon in the top Toolbar
�Locking the Navigation bar/top Toolbar. The Navigation bar and the top Toolbar can be locked by clicking on it once. When locked, these bars will be permanently visible. To unlock each bar, click it once again.
Chapter 04 Using the Reader App
98
Figure 17. When hovering the mouse pointer over the Navigation Zones, controls appear
A
B
C
E
D
F
A Top Toolbar B Navigate to Previous Page/Story area C Navigation bar D Navigate to Previous Page Area E Navigate to Next Page/Story Area F Navigate to Next Page Area
5
05
5
One of the main advantages of the WoodWing’s Digital Magazine Tools is the ability to create con-tent using Adobe InDesign.
In essence, the default InDesign tools will already allow you to create content for publishing as a digital magazine. However, to make this magazine much more dynamic, additional features are made available for adding multi-media content and interactive components:
�Audio panel. Used for assigning an audio file to a frame on a page.
�Dossier Link panel. Used for creating a link to a story in the magazine.
�Hotspot panel. Used for creating a Hotspot on a page.
�Scrollable Area panel. Used for creating an area on the page of which the content exceeds the frame’s width or height. To scroll through the content, the user can scroll either horizontally or vertically.
�Slide Show panel. Used for adding a Slide Show to a page.
�Video panel. Used for assigning a video to a frame on a page.
�Web Elements panel. Used for including external content from the Internet.
�Widgets panel. Used for including HTML5 widgets.
All panels can be accessed via the Digital Magazines submenu of the Windows menu.
Creating Content
Chapter 05 Creating Content
6
The DM Artboard functionality allows you to assign con-tent for use on different devices (using differently sized screens).
In this chapter, you will learn how to use the tools for cre-ating dynamic content and you will learn about the exact specifications required for creating a digital magazine.
To read more about the concept of creating a digital magazine and how the created content relates to
the same content on a digital device, see chapter 3, The Concept.
This chapter describes the creation of the following com-ponents of a magazine:
�Story �Dossiers �Pages �Text View �Slide shows �Video �Audio files �Web Elements
�Dossier Links �Hotspots �Widgets �Scrollable Areas �Custom Objects �Help page �Shared Content
A note about ofipThe ofip format is an initiative of WoodWing Software aimed at developing a standardized data format for interactive publications, such as digital magazines, news-papers, books and brochures. (For more information, see http://www.ofip.info.)
With the expectation that this format and its features are going to be implemented by Reader Apps, delivery plat-forms, Newsstands, etc. on an increasing level in the near future, WoodWing advices to get familiar with the ofip features and possibly start implementing them into your current workflow with immediate effect.
For more information about the newly introduced ofip metadata properties, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration – Step 7. Adding Custom Metadata.
Chapter 05 Creating Content
7
1. Creating a Story
The creation of a digital magazine involves the creation of stories. For each story (this includes the cover, table of contents, and any full page adverts in the magazine), a Dossier needs to be created. For a successful export, the system will expect each of these Dossiers to be set up in a certain way (as we will see in the next sections of this chapter, as well as in chapter 6, Exporting Content.)
The following is a summary of those rules:
�For viewing the magazine in landscape orien-tation, the system expects the Dossier always to have one layout in landscape orienta-tion assigned to the Publication Channel of the digital magazine. (The Dossier may contain additional layouts in landscape orientation, but these may not be assigned to the digital maga-zine Publication Channel).
�For viewing the magazine in portrait orienta-tion, the system either expects a styled layout or an article (used as the text for the Text View mode) to be present in the Dossier. Either needs to be assigned to the Publication Channel of the digital magazine. (The Dossier may contain additional articles or layouts in portrait orien-tation, but these may not be assigned to the digital magazine Publication Channel)
�When the Text View is used for displaying a page in portrait orientation, a header image can be used and images related to the story can be shown following the story at the bottom of the page. All of these images need to be part of the Dossier and the images that follow the story also need to be assigned to the Publication Channel of the digital magazine.
�If a layout contains a video or a Slide Show, that video or the images that are part of the Slide Show also need to be stored in the Dossier.
In this user guide we follow a basic workflow for creating a story:
Step 1. Creation of a Dossier.
Step 2. Creation of one or more pages.
Step 3. Design of the created pages.
Each step is explained in the following sections.
The quickest way of creating a story is by making use of Dossier templates which already contain the
content required for that story. If your company makes use of such a workflow and Dossiers and layouts do not have to be created from scratch, you can start right away with designing the layout. Navigate to section 5. Designing a Page.
Chapter 05 Creating Content
8
2. Creating a Dossier
To create a Dossier for a digital magazine story, perform the following steps:
Step 1. Use any of the following methods:
�Create a Dossier from scratch by using the Dossier application in Content Station
�Create a Dossier based on files avail-able in the system using Content Station or Smart Connection for InDesign
�Create a Dossier when checking in a layout using Smart Connection for InDesign
For more information about these methods, see the Smart Connection 7 User Guide for InDesign or the Content Station 7 User Guide.
Step 2. In the Dossier properties window, set the following properties (either during the creation of the Dossier or after the Dossier has been created):
� Preview: Used for indicating that a Dossier contains content for use in
the issue preview functionality in a Store.
This content is extracted from the ofip file by a delivery system, allowing the user to preview a complete dynamic story as opposed to a single-page static image.
�Description. A description of what the story is about as displayed in the following locations of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark.
Keep both the Description short; if it exceeds the width of the page
preview in the Reader, ellipses are shown for the part which cannot be displayed.
�Section title. The section name as displayed in the Section Viewer of the Navigation bar on the reader device.
�Story title. The story title as used in the following areas:
�Displayed in the following locations of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark.
�Used as the text for the shared link in a Facebook post.
A Preview B Description C Section title D Story title E Intent
AB
CDE
Figure 2. The Dossier dialog box in Content Station showing the various Digital Magazine properties
Chapter 05 Creating Content
9
�Used as the e-mail subject when shar-ing a link by e-mail.
Keep both the Story title short; if it exceeds the width of the page pre-
view in the Reader, ellipses are shown for the part which cannot be displayed.
�Intent. Choose the intent with which the Dossier is to be used:
�TOC. Links the Dossier contain-ing the layout(s) with the table of contents to the TOC button in the Reader App. (When the user taps the button, he or she will be directly navigated to the table of contents.)
�Help. Links the Dossier contain-ing the layout with an explanation about how to use the Reader App to the Help button in the Reader App. (When the user taps the button, he or she will be directly navigated to the Help page.)
3. Creating a Page
When creating a page, the following considerations should be made:
�Is a styled page in portrait orientation required? If so, do one of the following:
�InDesign CS4 users: create a dedi-cated layout
�InDesign CS5 users: create a dedicated layout or a styled article (to be displayed in Text View mode)
�Should the user be able to scale the text when viewing the page in portrait orientation? If so, the creation of a layout is not required; instead an article should be created.1 This article will be displayed in Text View mode.
�Will the content be displayed in separate pages (typically used for regular stories), or will the layout consist of one continuous page (typically used for a table of contents)? This obviously affects the dimensions of the layout.
1 InDesign CS5 users can apply formatting and styling (including the use of tables) to the article
Chapter 05 Creating Content
10
Your administrator may have set up Dossier templates for each part of the
magazine (such as the cover, table of contents, stories, etc.). Using these Dossier templates will greatly speed up the process of creating con-tent. If your workflow involves the use of layout templates and layouts are ready for you to be used, you can skip this section and jump straight to section 5. Designing a Page.
Whichever method you will be using, preparation is half the work. Note that
when changing the dimensions of the page at a later stage, repositioning the already present content can be time-consuming.
3.1 Page Sizes
With the introduction of the DM Artboard functionality, the dimensions of an exported page are not based on the dimensions of the layout on which the content is placed any more. Instead, the dimensions of a DM Artboard are used.
A DM Artboard is essentially a mask placed over the layout; all content within the boundaries of the mask is included in the export.
Multiple DM Artboards can be set up for a layout, but only one is visible at a time.
When a DM Artboard is created, a frame is placed on the page in as large a size possible to fit that page. Its dimensions are based on the aspect ratio as defined in the configserver.php file. The size or position of the DM Artboard can at any point be changed; as long as its aspect ratio is maintained, the export will succeed.
It is even possible for the user to move the artboard around, including placing it (partly) on the pasteboard.
Initial page sizeOf course, a layout needs to be given a certain size so that it can be easily worked on. In theory, a very small layout could be created, with a DM Artboard containing small-sized content. As long as the content fits properly within the boundaries of the artboard, it will export and look correctly.
Because the artboard will also work when placed (partly) over the pasteboard, it is even possible to create a page of any size and place the content (partly) on the pasteboard.
As far as the DM Artboard functionality is concerned, this will all work. Practically though, an InDesign user will prefer to view the layout in either actual size, or fit within the current window so it is best to work within the bound-aries of a layout.
Chapter 05 Creating Content
11
A good layout size to use is one based on the dimensions of the largest device that the content is going to be output to. The DM Artboard for that device will then match the size of the layout, while any additional artboards will be placed within the boundaries of the created layout.
For an example of the use of an artboard, see figure 3.1 on the next page.
For information about creating a layout in the exact size of a digital device, see appendix A, Layout Sizes.
Chapter 05 Creating Content
12
Figure 3.1. In this example, a layout in InDesign is shown (in Normal viewing mode), created in a 3:4 aspect ratio, while a DM Artboard for a 16:9 device is displayed on top of it (the gray rectangle). The artboard is positioned in such a way that its width matches that of the layout. All the content visible within the boundaries of the artboard is included in the export.All content placed in the area enclosed by the gray rectangle is included in the export.
Chapter 05 Creating Content
13
3.2 Effective Workspace
The effective workspace of a page is further influenced by the configuration of the Navigation bar and top Toolbar in the Reader App. Both bars can be made to stay visible (depending on the type of Reader App used) and will thereby obscure a certain part of the page. You might therefore want to refrain from adding interactive content such as Hotspots in these areas, just in case these are obscured resulting in the reader not being able to access them.
The sizes of these bars are as follows:
Navigation bar �iPad/Android Reader App: 50 pixels
�HTML5 Reader App: 62 pixels
Top Toolbar �iPad Reader App: 48 pixels
�HTML5 Reader App: 49 pixels
Table 3.2 below shows the values converted to the regu-larly used units of measurement (based on 132 dpi/ppi).
Table 3.2. Bar size in pixels converted to various units of measurementSize Value (based on 132 dpi/ppi)
Picas Points Inches Millimeters Centimeters48 pixels 2p2.182 26.182 pt 0.3636 in 9.236 mm 0.9236 cm49 pixels 2p2.727 26.727 pt 0.3712 in 9.429 mm 0.9429 cm50 pixels 2p3.273 27.273 pt 0.3788 in 9.621 mm 0.9621 cm62 pixels 2p9.818 33.818 pt 0.4697 in 11.93 mm 1.193 cm
Chapter 05 Creating Content
14
3.3 Landscape Orientation
Creating a layout with one or more pages in landscape orientation is done under the following circumstances:
�When the Reader App has been configured to display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in landscape orientation1.
To create such a layout, perform the following steps:
Step 1. From the File menu, choose New followed by Document to open the New Document dialog box.
Step 2. Enter the number of required pages.
Step 3. Enter a width which exactly matches the width of the screen.
Step 4. Enter a height which at least matches the height of the device (higher values are allowed2).
See appendix A, Layout Sizes for the various page dimensions.
Step 5. Set the Columns, Margins, Bleed and Slug settings as required.
Note that Bleed and Slug are not used as such, any content in those areas is not
included in the export.
Step 6. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine.
1 The Reader App can also be configured to display only pages in portrait orientation.
2 If the page is made higher than the height of the device, the layout may contain only one page.
Step 7. Add the layout to a Dossier by doing one of the following:
�Automatically add the layout to a Dossier by choosing an existing Dossier from the Dossier list in the Check In dialog box.
�Choose New Dossier from the Dossier list in the Check In dialog box to create a new Dossier. (Make sure that the required Dossier properties are correctly set as explained in section 2. Creating a Dossier.)
�Add the layout to a Dossier after the lay-out has been created.
Chapter 05 Creating Content
15
3.4 Portrait Orientation
Creating a layout with one or more pages in portrait orien-tation is done under the following circumstances:
�When the Reader App has been configured to display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in portrait ori-entation 1.
�When using InDesign CS4 and the pages in portrait orientation need to be designed in the same way as the pages in landscape orientation (as opposed to using the Text View mode, see section 3.5 Text View Mode)2
To create a layout in portrait orientation, perform the fol-lowing steps:
Step 1. In the New Document dialog box, enter the following values:
�Enter a width which exactly matches the width of the device.
�Enter a height which at least matches the height of the device (higher values are allowed).
If the page is made higher than the height of the device, the layout may
contain only one page.
See appendix A, Layout Sizes for the vari-ous dimensions.
1 The Reader App can also be configured to display only pages in landscape orientation.
2 InDesign CS5 users can match the layout design by using the CSS styling features of the Text View mode
Step 2. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine.
Step 3. Add the layout to a Dossier by doing one of the following:
�Automatically add the layout to a Dossier by choosing an existing Dossier from the Dossier list in the Check In dialog box.
�Choose New Dossier from the Dossier list in the Check In dialog box to create a new Dossier. (Make sure that the required Dossier properties are correctly set as explained in section 2. Creating a Dossier.)
�Add the layout to a Dossier after the lay-out has been created.
Chapter 05 Creating Content
16
3.5 Text View Mode
When the Reader App has been configured to show pages in portrait orientation, you have the choice over how the story is presented on such pages: as a fully designed page or in Text View mode.
Text View mode is not available in the Android Reader App.
Creating a fully designed page is achieved by sim-ply creating a layout in portrait orientation and adding designed content, similar to creating a page in landscape orientation.
Creating a Text View version of the page is done by creating an article on which the content of the Text View is based. Images can be included as well.
Due to the different article formats used by InDesign CS4/InCopy CS4 and InDesign CS5/InCopy CS5, differ-ent workflow methods exist for each CS version. Each is described in the following sections.
3.5.1 Using InDesign CS4
To create an article for Text View Mode using InDesign CS4, perform the following steps:
Step 1. Create a layout and save it to the system.
This could be the layout used for the page in landscape orientation, or it can be a dummy layout, solely used for creating an article. (If the latter, make sure that it is not included in the export of the magazine.)
Step 2. Create the article by doing one of the following:
�Convert one or more text frames into an article.
Enterprise can be set up in such a way that any selected image frames
are automatically made part of an article. However, articles intended to be used for Text View mode are not allowed to contain any images. Check with your administrator if this feature is enabled.
(Optional, depending on your company’s setup) Once the article is created, check that no article components containing an image exist in the article by verifying the article’s content in the Smart Connection panel, the Elements panel or in Content Station. Should any image component exist, delete it from the article.
�Place an already created article (created using InDesign CS4 or InCopy CS4) on the layout.
Chapter 05 Creating Content
17
Step 3. For each article component, assign an appropriate Element label (such as body, cap-tion, byline, etc).
Element labels are used by the system for assigning a font family to the text. Which
font is assigned to which label is determined by means of a configuration file. Check with your administrator which Element Labels can be used.
Step 4. Apply any font styles (such as bold, italic, etc.) to the text as required.
Step 5. Save the article by performing a Save Version or a Check In action.
Make sure that the article is added to the same Dossier as the story it belongs to.
Including a header image(Optional) To display an image as a header at the top of the article, perform the following steps:
Step 1. In InDesign or Content Station, access the Properties dialog box for the image that needs to be set as the header.
This image needs to have the exact dimensions (width and height) in which it
is going to be displayed on the digital device.
Step 2. From the Intent list, choose Header.
Step 3. Click OK to close the Properties dialog box.
Make sure that only one image in the Dossier has the intent property set to
Header.
Including other images(Optional) Additional images can be added to the story, which are displayed below the article, by doing the following:
�Make sure that images to be used are target-ted to the Issue of the Digital Magazine and are added to the same Dossier as the story they belong to.
Chapter 05 Creating Content
18
3.5.2 Using InDesign CS5
To create an article for Text View Mode using InDesign CS5, follow the steps as outlined in appendix B, Creating Text View Markup Articles.
3.6 Sections and Page Numbering
Page numbering and sections have no influence on the order in which stories are displayed on the digital device. This ordering is determined by the Digital Magazine appli-cation in Content Station. You can therefore safely ignore setting the page numbering for each layout.
Chapter 05 Creating Content
19
4. Working with DM Artboards
The DM Artboard functionality allows you to specify which layout items to include in the export to a particular device.
Using the DM Artboard functionality is optional, see section 4.6 Working Without Artboards for more
information.
A DM Artboard is essentially a frame with the following characteristics:
�Its dimensions are taken from the settings as defined in the configserver.php file.
�It has a 60pt stroke applied to the outside of the frame, with a stroke color of 32% black (C0 Y0 M0 K32).
�It is part of a DM Artboard layer, which itself is placed above all other layers.
�The DM Artboard layer is locked by default.
�The DM Artboard layer is a non-printable layer, meaning that it will not be part of the export.
The following DM Artboard components are recognized (see figure 4 on the next page):
�Artboard. The area which is included in the export, defined by the inner area of the DM Artboard frame.
�Boundary. The outer edges of the artboard, defined by the DM Artboard frame.
�Non-inclusion area. The area which is not included in the export, defined by the area out-side the DM Artboard frame. (This is indicated by a 60pt gray stroke, but note that this area extends beyond the stroke.)
�Safe area. The area identical for each used artboard.
Content is only included in the export when the following conditions are met:
�The content needs to be placed on the art-board area (within the frame boundary)
�The content needs to be assigned to a device through the Editions panel
Each is explained in the following sections.
For more information about DM Artboards, see section 3.1 Page Sizes.
Chapter 05 Creating Content
20
Figure 4. The use of DM Artboards.
In the figure on the left, a layout is shown created in a 4:3 aspect ratio. A DM Artboard with also a 4:3 aspect ratio fits exactly around the page border. Since the whole of the page lies within the artboard boundaries, content placed anywhere on the page is included in the export. Content placed on the pasteboard is not included, as indicated by the gray non-inclu-sion area (although the non-inclusion area extends beyond the gray stroke).
The figure in the middle shows the same 4:3 layout, but now with a 16:9 DM Artboard placed over it. Content placed in the areas to the left and right of the layout or the pasteboard will not be included in the export.
In the figure to the right, the two DM Artboards are shown simultaneously: the area shared by both artboards (marked in green) is the “safe” area, meaning that content placed in this area will be included in the export for both devices (as long as it is assigned to the Editions for both devices).
A A D
B B
C C
A Artboard B Boundary C Non-inclusion area D Safe area
Chapter 05 Creating Content
21
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 Issue that it needs to be part of. Make sure to assign all available DM Artboard Editions to the layout.
�Open an existing layout and make sure that all available DM Artboard Editions are assigned to it (for instance by performing a Save Version action).
Step 2. From the Layout menu or the flyout menu of the Editions panel, choose DM Artboard followed by one of the following commands:
�Create for Page. For creating DM Artboards on the current page only.
�Create for Document. For creating DM Artboards for all pages of the document.
The following actions take place:
�DM Artboards (in the form of a rectan-gular frames with a wide gray border) are created on the layout, one for each device as defined in Enterprise server.
�Each defined device is represented by an Edition in the Editions panel. Each cre-ated artboard is assigned to its respective Edition. The content assigned to the Edition listed first in the Editions panel is made visible.
�A new top layer is created in the Layers panel.
Step 3. (Optional, can be performed at any stage) For those pages for which no DM Artboards have been created, use the Create for Page or Create for Document commands to create artboards for those pages.
Use the Create for Page command on a Master page to quickly apply a DM
Artboard to all pages which have that Master page applied.
Chapter 05 Creating Content
22
4.2 Switching Between DM Artboards
When a DM Artboard is created, it is automatically assigned to its corresponding Edition. Since the content of only one Edition can be displayed at a time, only one artboard can also be displayed at a time.
To display another DM Artboard, do the following:
�In the Editions panel, make another DM Artboard Edition visible by clicking its eye icon.
When doing this, the DM Artboard for that Edition as well as all content assigned to that Edition is made visible; content belonging to other Editions is hidden.
For more information about working with Editions, see the Smart Connection User Guide for InDesign.
4.3 Adjusting the DM Artboard
When a DM Artboard is created, a frame is placed on the page in as large a size possible to fit that page. Its dimen-sions are based on the aspect ratio as defined in the configserver.php file. The frame is aligned to the middle of the layout and has a gray stroke applied. You might want to adjust the size or position of the artboard to better place it around the items on the page, or modify the way the artboard looks or even rename it.
Unlocking the DM ArtboardTo perform any of these steps, unlock the DM Artboard layer by removing the lock in the Layers panel.
Renaming the DM Artboard To rename the DM Artboard, rename the layer in the Layers panel.
Adjusting the size and/or positionTo adjust the size or the position of the DM Artboard, perform the following steps:
Step 1. Select the DM Artboard by selecting it in the Layers panel or by selecting it on the page.
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.
The best way of doing this is by drag-ging a corner while holding down
Shift.
Chapter 05 Creating Content
23
When the aspect ratio does not cor-respond with the settings expected
by Enterprise server, the export will fail. (The export will not fail when a long page is created; since the minimum page height is exceeded for these types of pages, a non-matching aspect ratio is allowed.)
As far as the system is concerned, an artboard can be of any size, as long
as its aspect ratio is maintained. However, do not make the artboard too small; it might be impractical to create very small objects, use very small type, and having to zoom in extensively in order to see the content.
Changing the look of the DM Artboard To change the look of the DM Artboard, apply a different stroke or fill color.
Locking the DM ArtboardAfter completing modifying the DM Artboard, lock it by setting the lock for the DM Artboard layer in the Layers panel.
4.4 Assigning Content to a Device
The DM Artboard feature makes use of the Edition func-tionality for assigning content for inclusion in the export to a particular device. The DM Artboard itself is also part of the device’s Edition, in order to mark the boundaries of that device.
Using the Edition functionality offers the following advantages:
�Single layout. Instead of creating separate layouts in dedicated sizes, only one layout needs to be created. This speeds up the pro-cess of making (small) adjustments to (shared) content, since this content is readily available.
�Shared content. Content which is identical in all artboards (as long as it is placed in the same location and falls within the boundaries of all artboards) can be assigned to all Editions. This content therefore only has to exist once in the layout. The more shared content is available, the more time is saved updating that content for output to different devices.
Assigning content to a DM Artboard Edition is no dif-ferent to assigning content to any other Edition: assign content that can be included in the export to multiple artboards to those multiple Editions; assign content only to be included in the export to a particular device to that particular Edition only.
For more information about using Editions, see the Smart Connection User Guide for InDesign.
Chapter 05 Creating Content
24
4.5 Points to Note
When working with DM Artboards, note the following:
�Since the DM Artboard is part of a non-print-able layer, the following functionality is affected:
�When viewing a layout in Preview mode, any visible artboards are hidden, thereby potentially displaying an empty area of the layout instead.
�When exporting a layout to PDF, any vis-ible artboards are not included unless the export option Include Non-Printing Objects is selected.
�When exporting a layout to PDF, the dimensions of the layout are used as the base for the page size of the PDF, not the boundaries of the DM Artboard.
4.6 Working Without Artboards
It is perfectly possible to work without using any DM Artboards. You might for instance only want to create content for one particular device and don’t concern your-self with outputting to multiple devices.
In such a scenario, simply create a layout based on the dimensions for that device1 and don’t make use of the DM Artboard functionality.
When exporting the content, the system will expect the layout to be in the dimensions of the device, else the export will fail.
1 For information about exact dimensions, see appendix B, Page Sizes.
Chapter 05 Creating Content
25
5. Designing a Page
Designing a page for use in a digital magazine is much the same as designing a layout for any other type of publica-tion. The Digital Magazine Tools include additional panels with which it is possible to create the following dynamic content:
All panels can be accessed via the Digital Magazines submenu of the Windows menu.
�Audio panel. Used for assigning an audio file to a frame on a page.
�Dossier Link panel. Used for creating a link to a story in the magazine.
�Hotspot panel. Used for creating a Hotspot on a page.
�Scrollable Area panel. Used for creating an area on the page of which the content exceeds the frame’s width or height. To scroll through the content, the user can scroll either horizontally or vertically.
�Slide Show panel. Used for adding a Slide Show to a page.
�Video panel. Used for assigning a video to a frame on a page.
�Web Elements panel. Used for assigned external content from the Internet to a frame on a page.
�Widgets panel. Used for turning a frame into a Widget (an HTML5 component with distinct functionality, such as a 360-degree view of an object, a slide show, a zoomable image, etc).
Table 5a on the next page provides an overview of what can and cannot be done in terms of placing dynamic objects inside other dynamic objects, and the number of times such an object can be placed on a layout.
Table 5b on the following pages shows an overview of the options for placing Hotspots in Scrollable Areas and vice versa.
To read these tables, look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done.
Only dynamic objects are listed, regular objects such as images follow the default InDesign placing
rules.
Note that when including an object into another object is permitted, that this is only allowed down
to one level deep. For example: adding a Scrollable Area to a Hotspot is allowed, but adding another Hotspot in that Scrollable Area is not.
The following sections will explain how to use each of the new Digital Magazine panels.
Frame iconsAny frame containing content created using the Digital Magazine Tools can be recognized by an icon at the top of the frame.
These icons are only visible when the layout is dis-played in Normal screen mode.
Table 5c on the following pages shows the icons used for each type of Digital Magazine content.
Chapter 05 Creating Content
26
To read this table, look up the object in the first column and compare it against the object in the
center columns in which you want to include it to see if this can be done.
Table 5a. Limitations of dynamic objects on a page
Created inside a:
Slide Show Video
Audio File
Dossier Link
Web Element Hotspot Widget
Scrollable Area
Custom Object
Number of placements on layout
Slide Show Unlimited
Video Unlimited
Audio File Unlimited
Dossier Link Unlimited
Web Element Unlimited
Hotspot Unlimited
Widget Unlimited
Scrollable Area Unlimited
Custom Object Unlimited
Chapter 05 Creating Content
27
Table 5b. Placement options between Hotspots and Scrollable Areas
HotspotHotspot on a Hotspot
Scrollable Area
Hotspot on a Scrollable
Area
Scrollable Area on a Hotspot
Hotspot Hotspot on a Hotspot
Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot
To read this table, look up the object in the first column and compare it against the object in the
center columns in which you want to include it to see if this can be done.
Table 5c. Digital Magazine frame iconsIcon Content Type Icon Content Type
Audio Slide Show
Video Web Element
Dossier Link Scrollable Area
Hotspot Widget
Chapter 05 Creating Content
28
Reader App HotzonesThe Reader App can optionally be set up to include Hotzones: areas to the left, right, top (Android Reader App only) and bottom of the screen which the user can tap in order to navigate the magazine. (For more informa-tion, see the Customization chapters.)
Its functionality will affect the way the designer has to position interactive content—such as Hotspots—on the layout since the Hotzone functionality overrules any underlying functionality. Any interactive content positioned in a Hotzone will not function when the user taps inside the Hotzone. Table 4c below shows the width or height of the Hotzone areas (based on 132 dpi/ppi).
You might want to add guides to the layout (tem-plate) to indicate the location of the Hotzones.
Table 5c. Hotzone width or height Zone Value (based on 132 dpi/ppi)
Picas Points Inches Millimeters CentimetersLeft/right 44 pixels 2p0 24 pt 0.3333 in 8.476 mm 0.8476 cm
Top/Bottom 80 pixels 3p7.636 43.636 pt 0.6061 in 15.394 mm 1.5394 cm
Figure 5. iPad Hotzones (shaded in red) can be tapped to navi-gate the magazine; they overrule any underlying functionality
Chapter 05 Creating Content
29
5.1 Creating a Slide Show
Any database image that is placed on the layout can be turned into a Slide Show by making use of the Slide Show panel. To provide the panel with the images to be used in the Slide Show, each image should be part of the same Dossier in which the layout containing the Slide Show is stored. Furthermore, the images should also be assigned to the same Issue of the magazine.
Also note that the Slide Show can be viewed in full screen mode on the digital device and that the dimensions of each image should therefore at least match the dimen-sions of the digital device on which the Slide Show is viewed.
The Slide Show can only be viewed on the digital device, not in InDesign.
To create a Slide Show, perform the following steps:
Step 1. Open the layout on which the Slide Show should be added.
Step 2. Make sure that the Slide Show panel is displayed.
The Slide Show panel can be shown or hidden by choosing Slide Show from the
Digital Magazine submenu of the Window menu.
Step 3. Select the image on the layout that should contain the Slide Show.
When Hotzones are enabled in the Reader App, these will block any underlying func-
tionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones).
Take note of the following requirements:
�Make sure that the images are cropped to the right size for display in full screen mode. (For an overview of the dimensions used on the iPad, see appendix A, Layout Sizes.)
�The images should be part of the same Dossier in which the layout containing the Slide Show is stored, else the functionality of the Slide Show panel will not be available.
�The selected image frame on which the Slide Show is based may not be located on a Master page.
Step 4. In the Slide Show panel, select the check box Enable Slide Show. (See figure 5.1 on the next page.)
This check box cannot be selected under the following circumstances:
�The selected frame is already set to con-tain a video, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
The top half of the panel shows all images that will be part of the Slide Show (when creating a new Slide Show, only one image will be shown: the image that was selected on the layout); the bottom half of the panel shows all images that are available for adding to the Slide Show.
Chapter 05 Creating Content
30
Figure 5.1. The top half of the Slide Show panel shows the images that are currently part of the Slide Show; the bottom half of the panel shows those images that can still be added
Step 5. Add images to or remove images from the Slide Show by doing the following:
�Add an image by dragging it from the bottom half of the panel to the top half of the panel. When the image is added, it will appear in the top half of the panel and will disappear from the bottom half of the panel.
�Remove an image by dragging it from the top half of the panel to the bottom half of the panel. When the image is removed, it will appear in the bottom half of the panel and will disappear from the top half of the panel.
Step 6. Reorder the images in the top half of the panel by dragging them to the required position.
A default transition (swipe) is automatically added during export; setting a custom transition is not
possible.
Chapter 05 Creating Content
31
5.2 Adding a Video
A video can be assigned to any frame on the layout by making use of the Video panel. When the page is viewed on the digital device, the user can view the video within the assigned frame.
It is not possible to link more than one frame to a video per layout.
A video can be added in the following ways:
�As a URL. Use this method to link to a file which is located on the Internet. (This reduces the total file size of the Reader App, but an inter-net connection is required to view the video on the digital device.)
�As a file. Use this method to embed the video in the Reader App. (The video will be immedi-ately available to the user, but the total file size of the Reader App will increase.)
A video can be played in the following ways:
�Automatically. The video will be played as soon as the page on which the file is located is accessed.
�Directly in fullscreen. The video is played directly in fullscreen mode as soon as the page on which the file is located is accessed.
Each method is explained below.
Video can also be included in a Hotspot or Scrollable area.
5.2.1 As a URL
Step 1. Open the layout in which the video should be added.
Step 2. Make sure that the Video panel is displayed.
The Video panel can be shown or hidden by choosing Video from the Digital
Magazine submenu of the Window menu.
Step 3. Select the frame or group of frames on the layout that should contain the video.
When Hotzones are enabled in the Reader App, these will block any underlying func-
tionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones).
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:
Chapter 05 Creating Content
32
�The frame is already assigned to a video as a file. Clear the Enable Video check box.
�The selected frame is already set to con-tain a Slide Show, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
Figure 5.2.1. To reference a video by a URL, enter the URL in the Video panel
Step 5. In the Source section, choose Internet.
Step 6. In the Location section, enter the URL to the video file in the URL box.
For supported video formats, see:
�Apple iPad: http://www.apple.com/ipad/specs/
�Android: http://developer.android.com/guide/appendix/media-formats.html
�HTML5: http://en.wikipedia.org/wiki/HTML5_video
The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played (assuming that internet access is available).
For information about the Play Automatically option in the Video panel, see section 5.2.3 Auto Play.
For information about the Directly in Fullscreen option in the Video panel, see section 5.2.4 Auto
Fullscreen.
Chapter 05 Creating Content
33
5.2.2 As a File
Step 1. Make sure that any video that is to be used is uploaded to Enterprise and is part of the same Dossier as the layout in which the video is to be embedded.
For supported video formats see the fol-lowing resources:
�Apple iPad: http://www.apple.com/ipad/specs/
�Android: http://developer.android.com/guide/appendix/media-formats.html
�HTML5: http://en.wikipedia.org/wiki/HTML5_video
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 func-
tionality; 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.
Step 5. In the Video panel, select the check box Enable Video.
Figure 5.2.2. The top half of the Video panel shows the video that is currently linked to the selected frame; the bottom half of the panel shows the videos to choose from
This check box cannot be selected under the following circumstances:
Chapter 05 Creating Content
34
�The selected frame is already set to con-tain a Slide Show, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
Step 6. In the Source section, choose Dossier (selected by default).
The top half of the panel shows the video which is currently set to be embedded (when no video is linked yet, this section will be empty); the bot-tom half of the panel shows all videos that are available to choose from.
Double-click a video in the lower half or top half of the panel to preview it.
Hover the mouse pointer over a video to display the file name in a tooltip.
Step 7. Assign a video to the frame by doing the following:
Step 7a. If a video is already displayed in the top half of the panel, remove it by drag-ging it to the bottom half of the panel. When the video is removed, it will appear in the bottom half of the panel and will disappear from the top half of the panel.
Step 7b. Drag the video that should be assigned to the frame by dragging it from the bottom half of the panel to the top half of the panel. When the video is added, it will appear in the top half of the panel and will disappear from the bottom half of the panel.
The process is now complete. When the frame is tapped by the user on the digital device, the embedded file is played.
For information about the Play Automatically option in the Video panel, see section 5.2.3 Auto Play.
For information about the Directly in Fullscreen option in the Video panel, see section 5.2.4 Auto
Fullscreen.
Chapter 05 Creating Content
35
5.2.3 Auto Play
To have the video played automatically as soon as the page on which the file is located is accessed, select the check box Automatically in the Play section of the Video panel.
5.2.4 Auto Fullscreen
To have the video played directly in Fullscreen mode as soon as the page on which the file is located is accessed, select the check box Directly in Fullscreen in the Play section of the Video panel.
Videos which are set to automatically play in fullscreen mode will only play in fullscreen mode;
when minimizing the video, play will stop. When subse-quently tapping the play button, the video will be played fullscreen once more.
5.3 Adding an Audio File
An audio file can be assigned to any frame on the lay-out by making use of the Audio panel. When the page is viewed on the digital device, the user can play the audio file within the assigned frame.
An audio file can be added in the following ways:
�As a URL. Use this method to link to a file which is located on the Internet. (This reduces the total file size of the Reader App, but an inter-net connection is required to play the audio file on the digital device.)
�As a file. Use this method to embed the audio file in the Reader App. (The audio file will be immediately available to the user, but the total file size of the Reader App will increase.)
An audio can be played in the following ways:
�Automatically. The audio will be played as soon as the page on which the file is located is accessed.
Each method is explained below.
Audio can also be included in a Hotspot or Scrollable area.
Chapter 05 Creating Content
36
5.3.1 As a URL
Step 1. Open the layout in which the audio file should be added.
Step 2. Make sure that the Audio panel is displayed.
The Audio panel can be shown or hidden by choosing Audio from the Digital
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 func-
tionality; 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:
�The selected frame is already set to con-tain a Slide Show, video, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
Step 5. In the Source section, choose Internet.
Step 6. In the Location section, enter the URL to the audio file in the URL box.
For supported audio formats see the fol-lowing resources:
�Apple iPad: http://www.apple.com/ipad/specs/
�Android: http://developer.android.com/guide/appendix/media-formats.html
�HTML5: http://en.wikipedia.org/wiki/HTML5_audio
Step 7. (Optional) To have the audio played automatically as soon as the page on which the file is located is opened, select the check box Automatically in the Play section of the panel.
Figure 5.3.1. Assigning an audio file to a frame is done by using the Audio panel
Chapter 05 Creating Content
37
The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played (assuming that internet access is available).
5.3.2 As a File
Step 1. Make sure that any audio file that is to be used is uploaded to Enterprise and is part of the same Dossier as the layout in which the audio file is to be embedded.
For supported audio formats see the fol-lowing resources:
�Apple iPad: http://www.apple.com/ipad/specs/
�Android: http://developer.android.com/guide/appendix/media-formats.html
�HTML5: http://en.wikipedia.org/wiki/HTML5_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 func-
tionality; 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.
Chapter 05 Creating Content
38
This frame may not be an inline or anchored frame.
Step 5. In the Audio panel, select the check box Enable Audio.
Figure 5.3.2. Assigning an audio file to a frame is done by using the Audio panel
This check box cannot be selected under the following circumstances:
�The selected frame is already set to con-tain a Slide Show, video Web Element, or Widget, or is set to act as a Dossier Link, Scrollable Area, or Hotspot. Clear the Enable check box in the respective panel.
Step 6. In the Source section, choose Dossier (selected by default).
A list of audio files that are available in the Dossier appears.
Step 7. Assign the audio file by doing one of the following:
�Select its check box �Double-click its name
The name of the currently selected file appears above the list.
Step 8. (Optional) Use the playback controls in the Skim Over Audio section at the bottom of the panel to play the audio file.
The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played.
For information about the Play Automatically option in the Audio panel, see section 5.3.3 Auto Play.
Chapter 05 Creating Content
39
5.3.3 Auto Play
To have the audio played automatically as soon as the page on which the file is located is accessed, select the check box Automatically in the Play section of the Audio panel.
5.4 Creating a Web Element
Any frame on the layout can be turned into a Web Element by making use of the Web Element panel. Through this panel, a reference to the external content (in the form of a URL) can be assigned to the frame.
A section of text can be turned into a hyperlink by placing a Web Element over it in the form of an
invisible frame; make sure to style the text in such a way that it is recognizable for the user as a hyperlink.
The Web Element panel is also used to define how the external content should be displayed: embedded in the frame, as a pop-up window, or in a Web browser.
The external content can only be viewed on the digital device, not in InDesign.
To create a Web Element, perform the following steps:
Step 1. Open the layout on which the Web Element should be added.
Step 2. Make sure that the Web Element panel is displayed.
The Web Element panel can be shown or hidden by choosing Web Element from
the Digital Magazine submenu of the Window menu.
Step 3. Select the frame on the layout that should contain the Web Element.
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.
Chapter 05 Creating Content
40
When the external content is to be dis-played in the frame, make sure that the
dimensions of the frame are sufficient to display the content of the external source properly.
Step 4. In the Web Element panel, select the check box Enable Web Element.
This check box can only be selected when the selected frame is not yet set to contain
a Slide Show or video, an audio file, or is set to act as a Dossier Link, Scrollable Area, or Hotspot. If this is the case, first clear the Enable check box in the respective panel. In the URL box, enter the URL of the source that provides the content.
Step 5. In the URL box, enter the URL to which should be linked.
Step 6. In the Show Web Element section, choose how the content should be displayed:
�In a Web Browser. When the user taps the frame, the content is displayed in the default Web browser on the digital device. (Note that as a result of this action, the Reader App is closed.)
Figure 5.4. The Web Element enabled and a URL entered in the Web Element panel
�As a Pop-up (in the Reader App). When the user taps the frame, the con-tent is displayed in a pop-up window in the Reader App.
�Embedded in the Page (in the Reader App). When the user taps the frame, the content is displayed within the frame.
Chapter 05 Creating Content
41
5.4.1 Transparent Web Elements
A Web Element can be made transparent by doing the following:
Step 1. In the HTML page which needs to be made transparent, set the body tag to transparent.
Step 2. Enable the following DMSetting for the Reader App:
�Colors/Enable transparent Web Elements
5.4.2 Link to Store and Library
The displayed HTML page can also include a link to the Store or the Library. To achieve this, include the following references in the HTML page:
�Link to the Store:
<a href=”ww://gotoStore”>Store Link</a>
�Link to the Library:
<a href=”ww://gotoLibrary”>Library Link</a>
This functionality will only work when the page is displayed in either an embedded frame on the page
or in a pop-up window, not when displayed in an external browser.
5.4.3 Scale Content to Fit Screen
In some circumstances, the displayed HTML page may not fit the pop-up window properly. For instance, the page could be wider than the pop-up, resulting in not all content being shown.
To have the displayed HTML page scale to fit the pop-up window, enable the following DMSetting:
�Web Element Popup/Scale content to fit screen
Chapter 05 Creating Content
42
5.5 Creating a Dossier Link
Dossier Links can be created in two ways:
�On a layout
�In a Web Element
Each is described in the following sections.
5.5.1 On a Layout
Any frame or group of frames on the layout can be set to act as a link to a story. Typically, this is used for cre-ating links on the cover as well as for creating a table of contents, but the feature can also be used to create cross-references between pages within the same story or between pages of different stories. Since each story is represented by a Dossier, the link is created by linking to the Dossier of that story.
To create a Dossier Link, perform the following steps:
Step 1. Open the layout on which the Dossier Link should be added.
Step 2. Make sure that the Dossier Link panel is displayed.
The Dossier Link panel can be shown or hidden by choosing Dossier Link from
the Digital Magazine submenu of the Window menu.
Step 3. Select the frame or group of frames on the layout that should act as the link.
When Hotzones are enabled in the Reader App, these will block any underlying func-
tionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones).
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.
Chapter 05 Creating Content
43
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.
Figure 5.5.1. The Dossier Link panel allows you to create a link to a Dossier
Step 5. From the Dossier list, choose the Dossier to which need to be linked.
Step 6. (Optional) In the Page box, enter the page number to which need to be linked.
If no page number is entered —or a page number which does not exist—the link is
set to the first page of the story.
5.5.2 In a Web Element
Dossier Links in a Web Element (also referred to as HTML Dossier Links) work on the iPad Reader App v1.8 and the Android Reader App versions 1.0 and 1.1 only.
To create a HTML Dossier Link in a Web Element, perform the following steps:
Step 1. Create the Web Element as explained in section 5.4 Creating a Web Element.
Make sure to create a Web Element embedded in the page, else the link will
not work.
Step 2. Export the magazine as explained in chapter 6, Exporting Content.
Step 3. Modify the HTML page of the embed-ded content by doing the following:
Step 3a. Include the following scheme for each Dossier Link:
<a href="ww://storylink?itemid=[itemid]&pageindex=[index]">HTML Dossier Link</a>
Step 3b. Replace [itemid] by the ID of the story to link to.
Step 3c. Replace [index] by the page num-ber in the story to link to.
This is not the page number assigned by InDesign, but the “physical” page
number (for example: a story with 3 pages will have page numbers 1, 2, and 3.)
Example:<a href="ww://storylink?itemid=317&pageindex=1">HTML Dossier Link</a>
Chapter 05 Creating Content
44
5.6 Basic Hotspots
A Hotspot is an area on the page on which the user can tap, after which additional content is displayed on top of the page. This functionality is typically used for presenting extra information about an item on the page, such as a product or other item (for instance in the form of a pop-up window or menu structure), and any other scenario in which additional information needs to be displayed.
Figure 5.6. When tapping on one of the red Hotspots, a pop-up appears showing additional information about the tapped area
A Hotspot can also be made to automatically dis-play its content as soon as the page is loaded.
A Hotspot can also be part of another Hotspot (referred to as a Hotspot-on-a-Hotspot). For more
information, see section 5.7 Hotspots on Hotspots.
5.6.1 Terms and Components
When working with basic Hotspots, the following terms and components are used:
�Hotspot: an area on the page on which the user can tap, after which additional content is displayed on top of the page.
�Hotspot content: the content which is dis-played after the Hotspot is tapped.
�Hotspot Content layer: the layer assigned to the Hotspot; it contains the content for that Hotspot (the content which appears after tap-ping the Hotspot).
�Unassigned layer: a layer which is not assigned to a Hotspot and therefore does not hold any Hotspot content.
�Base layer: a layer which itself is not assigned to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the bottom-most layer (but displayed as the top-most layer in the Hotspot panel).
�Selected Hotspot: a page element on the Hotspot Content layer which will appear in place of the Hotspot which is tapped. It is used to mimic the behavior of “selecting” a Hotspot.
�Hotspot Close button: a page element on the Hotspot Content layer which acts as the button to close the content for one or all Hotspots with.
The different types of layers result in a certain hierarchy which is reflected in the Hotspot panel.
In the figure below for example, a Hotspot panel is shown for a layout on which a Hotspot has been created on the
Chapter 05 Creating Content
45
‘Background’ layer; its Hotspot Content items are placed on the ‘Scheveningen’ layer.
In this scenario, the layers can be matched to the Hotspot-on-Hotspot terms as follows:
�Base layer: the ‘Background’ layer.
�Hotspot Content layer: the ‘Scheveningen’ layer
Figure 5.6.1. The Hotspot panel displays the hierarchy of the created Hotspot (see the text for a detailed explanation of this structure)
The regular functionality of a Hotspot would be as follows:
1. The user taps on a Hotspot.
2. New content appears showing the additional information.
3. The user closes the additional content by tapping the same Hotspot or another Hotspot.
A more advanced method is the following:
1. The user taps on a Hotspot.
2. New content appears showing the additional information. The Hotspot that is tapped disap-pears and the Selected Hotspot appears in its place (optionally designed differently and placed in a different location).
3. The additional content can be closed by doing one of the following:
�Tapping the same or another Hotspot (only if there is no Hotspot Close button)
�Tapping the Hotspot Close button
�Tapping the Selected Hotspot (only if there is no Hotspot Close button)
When the Hotspot Content disappears, the Hotspot itself appears again.
Chapter 05 Creating Content
46
5.6.2 Layers
The Hotspot functionality makes use of layers. The Hotspot itself is created on any of the layers of the regular layout. Using the Hotspot panel, the components which appear after tapping the Hotspot (such as the Hotspot content, the Selected Hotspot, and Hotspot Close button) are created on a different layer (either a dedicated layer or an existing layer).
Initial view on the tablet: the layout and the Hotspot is shown (here the red item on the page)
When the Hotspot is tapped, a pop-up appears, showing additional information
The pop-up window is the Hotspot Content which appears after tapping the Hotspot. It is placed on a different layer.
The Hotspot is created on a base layer
Chapter 05 Creating Content
47
The figures below show how the Hotspot is shown on the tablet and how the displayed items are setup in InDesign. (For more examples, see later in the chapter.)
5.6.3 Size and Content
In essence, the Hotspot content can be set to any size, even as large as the page that it is on. Since the Hotspot content is nothing more than one or more separate page items within the InDesign layout, it can contain any type of content, including a Slide Show, video, audio, a Web Element, Widget, Dossier Link, or Scrollable Area, or another Hotspot.
Although the Hotspot content can contain another Hotspot (see section 5.7 Hotspots on Hotspots), other added objects cannot contain another Hotspot. For example: it is possible that a Hotspot contains a Scrollable Area and that this Scrollable Area contains a Hotspot; this second Hotspot however cannot contain another Hotspot (or indeed other dynamic objects, see table 5a).
Chapter 05 Creating Content
48
5.6.4 Creation
To create a Hotspot, perform the following steps (see also the figures on the following pages):
Step 1. Design the layout on which the Hotspot is to be placed.
Step 2. Create an item on the layout which should act as the Hotspot.
This can either be a frame or a group of frames and can be placed on any layer
except a layer which acts as a DM Artboard layer.
You can also create the item on a layer which acts as a Hotspot Content layer for
an already existing Hotspot. This will however create a Hotspot on a Hotspot which is a differ-ent process. For more information, see section 5.7 Hotspots on Hotspots.)
Take note of the following:
�The created frames may not be located on a Master page.
�The created frame(s) may not be inline or anchored frames.
�Certain limitations apply to placing Hotspots in other dynamic objects. For more information, see table 5a and table 5b.
�When Hotzones are enabled in the Reader App, these will block any underly-ing functionality; be aware of these zones when placing your frame containing inter-active content. (For more information about Hotzones, see Reader App Hotzones).
Step 3. Make sure that the Hotspot panel is displayed.
The Hotspot panel can be shown or hid-den by choosing Hotspot from the Digital
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 Automatically check box.
Only one Hotspot Content can be set to automatically appear for each
Chapter 05 Creating Content
49
page. When setting this option for Hotspot A while it is already set for Hotspot B, the functionality is removed from Hotspot B and set to Hotspot A.
Now that the Hotspot is defined, we need to specify the layer on which the Hotspot Content is going to be placed. This can be done in one of the following ways:
�On a new layer (see step 8)
�On an existing layer (see step 9)
Hotspot content on a new layer(Make sure that Steps 5 and 6 have been performed, else the panel options will not be available.)
Step 8. To create the Hotspot content on a new layer, perform the following steps:
Step 8a. In the Hotspot panel, click Create New Layer (selected by default).
Step 8b. In the Layer Name box, enter a descriptive name for the layer.
Step 8c. Do one of the following:
�Press Enter.
�Click OK.
The following actions take place:
�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.
Chapter 05 Creating Content
50
Hotspot content on an existing layer(Make sure that Steps 5 and 6 have been performed, else the panel options will not be available.)
Step 9. To create the Hotspot content on an existing layer, perform the following steps:
Step 9a. In the Hotspot panel, click Use Existing Layer.
The option is not available when:
�Only one layer exists.
�Multiple layers exist but each of these cannot be assigned as a Hotspot Content layer, because they act as a Scrollable Area layer or a DM Artboard layer.
Step 9b. In the list of Existing Layers, select the checkbox for the layer to which the Hotspot Content needs to be added.
You can also create the item on a layer which acts as a Hotspot
Content layer for an already existing Hotspot. This will however create a Hotspot on a Hotspot which is a different process. For more information, see section 5.7 Hotspots on Hotspots.)
Hotspot content can be assigned to one layer only, not to multiple layers.
Step 9c. Continue with Step 10.
With the Hotspot Content layer defined, we can now start creating content on it.
Step 10. Select the Hotspot for which content should be created.
Step 11. In the Hotspot panel, click Edit Layer.
The 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)
Step 12. Create the content which should be displayed when a user taps a Hotspot.
Make sure to not accidentally select a dif-ferent layer in the Layers panel, else you
might see unexpected results when the Hotspot is tapped.
Chapter 05 Creating Content
51
Figure 5.6.4a. The starting point for creating a basic Hotspot: a layout which is going to display information about certain loca-tions. It has one background layer on which the Hotspots (represented by the red layout items) are also placed.Shown to the right are the Hotspot panel and InDesign’s Layers panel.
Chapter 05 Creating Content
52
Figure 5.6.4b. With a Hotspot selected on the Background layer (layout item “2”), the ‘Enable Hotspot’ option in the Hotspot panel has been selected. A new layer has subsequently been created by using the ‘Create New Layer’ feature of the Hotspot panel, and after clicking OK the new layer has appeared in the Layers panel as well as in the Hotspot panel.
Note the position of the new layer in the Hotspot panel: because it is seen as part of the layer on which the Hotspot itself is placed, the new layer is positioned one level below this layer.
Chapter 05 Creating Content
53
Figure 5.6.4c. With the newly created layer (‘Scheveningen’) made active in the Layers panel, the Hotspot content has now been created.
In this basic use of a Hotspot, tapping Hotspot ‘2’ will display additional information about the location in the form of a pop-up window. Tapping the Hotspot again will close the displayed Hotspot content.
Chapter 05 Creating Content
54
A Starting point on the tablet: the page con-taining a single Hotspot is shown (here the red item on the page)
B When the Hotspot is tapped, the Hotspot Content appears (here in the form of a pop-up window).
The Hotspot Content (here in the form of a pop-up window) is placed on a separate layer.
The Hotspot is created on a base layer
Hotspot
Hotspot Hotspot Content
Hotspot Content
Chapter 05 Creating Content
139
Starting point on the tablet: the page con-taining a single Hotspot is shown (here the red item on the page)
When the Hotspot is tapped, the Hotspot Content appears (here in the form of a pop-up window).
The Hotspot Content (here in the form of a pop-up window) is placed on a separate layer.
The Hotspot is created on a base layer
Hotspot
Hotspot Hotspot Content
Hotspot Content
Chapter 05 Creating Content
55
5.6.5 Creating a Selected Hotspot
In the default Hotspot behavior, the Hotspot which is tapped is kept visible, meaning that both the Hotspot and the Hotspot Content are displayed. This behavior works fine for most scenarios.
Other scenarios though might require a visual indication that the Hotspot is “selected”. For instance: suppose four Hotspots in the form of a row of buttons are available on a page, each displaying their Hotspot Content in the same area above the row of buttons. Using the default behavior, the user is unable to tell for which Hotspot the content is currently shown when tapping each button.
The Selected Hotspot feature solves this. By placing a new frame in the same size, shape and position as the original Hotspot but with different visual properties (such as a different color), and assigning this as a Selected Hotspot, this new button will be shown instead of the orig-inal Hotspot. For the user, it now looks as if the Hotspot has been “selected”.
The creation process is as follows (see also the figures on the following pages):
Step 1. Create the Hotspot and Hotspot Content as described in section 5.6.4 Creation.
Step 2. Do the following:
Step 2a. On the Hotspot Content layer, create the object that should act as the Selected Hotspot. (When this contains multiple frames, make sure to group them).
Step 2b. With the frame or group of frames selected, select the Enable Selected Hotspot check box in the Hotspot panel.
In case the Selected Hotspot functionality should be removed from the page item,
select the item and choose None in the Hotspot panel.
Chapter 05 Creating Content
56
Figure 5.6.5. In this example, the Hotspot content is displayed in a sidebar instead of a pop-up. To better indicate to which location on the map the sidebar information refers, a Selected Hotspot has been created (the blue layout item). This item now appears as soon as the original Hotspot is tapped. The item is given this functionality by selecting it on the layout and choosing the ‘Enable Selected Hotspot’ option in the Hotspot panel.
In this example, the size and position of the Selected Hotspot is identical to the underlying Hotspot apart from the color (but the use of this technique is only limited by your creativity). Tapping the red Hotspot will seem to make it change color, thereby mimicking a ‘selected state’.
Tapping the Selected Hotspot will close the displayed Hotspot content as well as the Selected Hotspot.
Chapter 05 Creating Content
57
5.6.6 Creating a Hotspot Close Button
When a Selected Hotspot has been created (see section 5.6.5 Creating a Selected Hotspot), the Hotspot Content can be hidden (and the Hotspot itself displayed again) by tapping the Selected Hotspot. Alternatively, a Hotspot Close button can be created to better indicate this func-tionality to the user.
The creation process is as follows (see also the figures on the following page):
Step 1. Create the Hotspot and Hotspot Content as described in section 5.6.4 Creation.
Step 2. (Optional) Create the Selected Hotspot as described in section 5.6.5 Creating a Selected Hotspot.
Step 3. On the Hotspot Content layer, cre-ate the object that should act as the Hotspot Close button. (When this contains multiple frames, make sure to group them).
Step 4. With the frame or group of frames selected, select the Enable Close Button check box in the Hotspot panel.
In case the Hotspot Close button func-tionality should be removed from the page
item(s), select the item and choose None in the Hotspot panel.
5.6.7 Managing Hotspots using the Layers Panel
The functionality of the Hotspot panel is close related to that of InDesign’s Layers panel. Using the Layers panel, Hotspots can be managed in the following ways:
�Renaming layers. Layers created using the Hotspot panel can only be renamed by using the Layers panel.
�Moving layout items between layers. When doing so, all restrictions for working with Hotspots on Hotspots apply. When an action is not allowed, a message will inform the user about this.
Chapter 05 Creating Content
58
Figure 5.6.6. When using a Selected Hotspot, it can be beneficial to offer the user a separate close button to close all the Hotspot content with. In this example, a close button has been placed in the lower right-hand corner of the page. Its functionality is enabled by selecting the item on the layout and subsequently choosing the ‘Enable Close Button’ option in the Hotspot panel.
Note that when not using a Close button, the Hotspot content and the Selected Hotspot can be closed by tapping the Hotspot or Selected Hotspot; when the Close button is available, the Hotspot Content and the Selected Hotspot can only be closed by tapping the Close button.
Chapter 05 Creating Content
59
A Starting point on the tablet: the page con-taining a single Hotspot is shown (here the red item on the page)
B When the Hotspot is tapped, a Selected Hotspot (the blue layout item) appears over the original Hotspot and additional information is displayed in a sidebar. In addition, a close button is shown in the bot-tom right-hand corner of the page
The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer.
The Hotspot is created on a base layer
Selected Hotspot
Hotspot
Hotspot Selected Hotspot
Hotspot Content
Hotspot Content
Hotspot Close button
Hotspot Close button
Chapter 05 Creating Content
145
A Starting point on the tablet: the page con-taining a single Hotspot is shown (here the red item on the page)
B When the Hotspot is tapped, a Selected Hotspot (the blue layout item) appears over the original Hotspot and additional information is displayed in a sidebar. In addition, a close button is shown in the bot-tom right-hand corner of the page
The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer.
The Hotspot is created on a base layer
Selected Hotspot
Hotspot
Hotspot Selected Hotspot
Hotspot Content
Hotspot Content
Hotspot Close button
Hotspot Close button
Chapter 05 Creating Content
60
5.7 Hotspots on Hotspots
The Hotspot Content layer can itself also contain one or more Hotspots, allowing the user to access
additional information relating to what is shown in the original Hotspot. This is referred to as a Hotspot on a Hotspot.
Creating a Hotspot on a Hotspot is essentially the same as creating a basic Hotspot (see section 5.6 Basic Hotspots). The only difference is that all actions are completed in relation to an existing Hotspot of which the new Hotspot is part.
5.7.1 Terms and Components
When working with Hotspots on Hotspots, the following terms and components are used:
�Hotspot: an area on the page on which the user can tap, after which additional content is displayed on top of the page.
�Hotspot content: the content which is dis-played after the Hotspot is tapped.
�Hotspot Content layer: the layer assigned to the Hotspot; it contains the content for that Hotspot. A Hotspot Content layer can act as either a Level-1 Hotspot Content layer or a Level-2 Hotspot Content layer (see below).
�Unassigned layer: a layer which is not assigned to a Hotspot and therefore does not hold any Hotspot content.
�Base layer: a layer which itself is not assigned to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the top-most layer.
�Level-1 Hotspot Content layer: the layer which holds the content for the Hotspot placed on the Base layer. It also acts as the layer on which other Hotspots are placed.
�Level-2 Hotspot Content layer: the layer which holds the content for the Hotspot placed on the Level-1 Hotspot Content layer.
�Selected Hotspot: a page element on the Hotspot Content layer which will appear in place of the Hotspot which is tapped. It is used to mimic the behavior of “selecting” a Hotspot.
�Hotspot Close button: a page element on the Hotspot Content layer which acts as
Chapter 05 Creating Content
61
the button to close the content for one or all Hotspots with.
The different types of layers result in a certain hierarchy which is reflected in the Hotspot panel.
In the figure below for example, a Hotspot panel is shown for a layout on which three Hotspots have been created. A basic Hotspot has been created on the ‘Background’ layer; its Hotspot Content items are placed on the ‘Scheveningen’ layer. On this layer, two additional Hotspots have been created. Their content is placed on the layers ‘Scheveningen Beach’ and ‘Scheveningen Harbor’ respectively.
In this scenario, the layers can be matched to the Hotspot-on-Hotspot terms as follows:
�Base layer: the ‘Background’ layer.
�Level-1 Hotspot Content layer: the ‘Scheveningen’ layer
�Level-2 Hotspot Content layer: the ‘Scheveningen Beach’ and ‘Scheveningen Harbour’ layers
Figure 5.7.1. The Hotspot panel displays the hierarchy of the created Hotspots and Hotspots-on-Hotspots (see the text for a detailed explanation of this structure)
RestrictionsA Hotspot on a Hotspot can only be created one level deep; creating a Hotspot in a Hotspot which itself is already part of a Hotspot is not possible.
Chapter 05 Creating Content
62
5.7.2 Creation
To create a Hotspot on a Hotspot, perform the following steps (see also the figures on the following pages):
Step 1. Create a regular Hotspot as explained in section 5.6, Creating a Basic Hotspot.
This Hotspot is placed on the Base layer; its content resides on the Hotspot Content layer.
A new Hotspot-on-Hotspot item now needs to be created for the user to tap on.
Step 2. On the Hotspot Content layer, cre-ate a new layout item which is to serve as the new Hotspot.
Following the definitions of the Hotspot-on-Hotspot terms, the Hotspot Content Layer is now referred to as a Level-1 Hotspot Content Layer.
Step 3. Select the newly created Hotspot.
Step 4. In the Hotspot panel, select Enable Hotspot.
Step 5. (Optional) To make the content for that Hotspot appear automatically whenever the page is loaded (as opposed to the user hav-ing to top on the Hotspot to make the content appear), do the following:
�In the Hotspot panel, select the Show Automatically check box.
Only one Hotspot Content layer can be set to automatically appear for
each page. When setting this option for Hotspot A while it is already set for Hotspot B, the functionality is removed from Hotspot B and set to Hotspot A.
Now that the Hotspot is defined, we need to specify the layer on which the Hotspot Content is going to be placed (the layer referred to as the Level-2 Hotspot Content layer). This can be done in one of the following ways:
�By placing the content on a new layer (see step 6)
�By placing the content on an existing layer (see step 7)
Hotspot content on a new layer(Make sure that the newly created Hotspot is selected, else the panel options will not be available.)
Step 6. To create the Hotspot content on a new layer, perform the following steps:
Step 6a. In the Hotspot panel, click Create New Layer (selected by default).
Step 6b. In the Layer Name box, enter a descriptive name for the layer.
Step 6c. Do one of the following:
�Press Enter.
�Click OK.
The following actions take place:
�A new layer is created in the Layers panel.
�The created layer is displayed in the Hotspot panel and placed one level below the Hotspot Parent layer.
Step 6d. (Optional) Repeat Steps 6, 6, 8a – 8c to create additional Hotspot Content layers.
Step 6e. Continue with Step 8 or 9.
Chapter 05 Creating Content
63
Hotspot content on an existing layer(Make sure that the newly created Hotspot is selected, else the panel options will not be available.)
Step 7. To create the Hotspot content on an existing layer, perform the following steps:
Step 7a. In the Hotspot panel, click Use Existing Layer.
The option is not available when:
�Only one layer exists
�The layer acts as a Level-2 Hotspot Content layer for an already created Hotspot on a Hotspot.
Step 7b. In the list of Existing Layers, select the checkbox for the layer to which the Hotspot Content needs to be added.
The following action takes place:
�The selected layer is positioned one level below the Level-1 Hotspot Content layer.
Hotspot content can be assigned to one layer only, not to multiple
layers.
Step 7c. Continue with Step 8 or 9.
With the Hotspot Content layer defined, we can now start creating content on it.
Step 8. Select the newly created Hotspot for which content should be created.
Step 9. In the Hotspot panel, click Edit Layer.
The following actions take place:
�The Hotspot Content layer corresponding to the selected Hotspot is made active.
�The content of all existing Hotspot Content layers apart from the current Hotspot Content layer is hidden while the content for the Level-1 Content layer that it is part of is kept visible (this makes the process of working on the content of the current Hotspot Content layer more convenient)
Step 10. Create the content which should be displayed when a user taps a Hotspot.
Make sure to not accidentally make a dif-ferent layer in the Layers panel active, this
will result in the content ending up in the wrong location within the hierarchy and will give unex-pected results when the Hotspot is tapped on the device.
Step 11. Repeat steps 8 – 10 for any addition-ally created Hotspots.
Chapter 05 Creating Content
64
Figure 5.7.1a. The starting point for creating a Hotspot on a Hotspot: a layout contains a previously created Hotspot of which the content is placed on the ‘Scheveningen’ layer. On this same layer, a new item is created (the blue button on top of the image in the sidebar), which is to act as the new Hotspot.
Chapter 05 Creating Content
65
Figure 5.7.1b. With the new Hotspot selected on the ‘Scheveningen’ layer (the blue button over the image in the sidebar), the ‘Enable Hotspot’ option in the Hotspot panel has been selected. A new layer has been created (‘Scheveningen Beach’) by using the ‘Create New Layer’ feature of the Hotspot panel. After clicking OK, the new layer has appeared in the Layers panel as well as in the Hotspot panel.
Note the position of the new layer in the Hotspot panel: because it is seen as part of the ‘Scheveningen’ Level-1 Hotspot Content layer, it is placed one level below that layer.
Chapter 05 Creating Content
66
Figure 5.7.1c. With the newly created layer (‘Scheveningen’) made active in the Layers panel, the Hotspot content has now been created in the form of an extra sidebar overlaying the top part of the original sidebar.
In this basic use of a Hotspot on a Hotspot, tapping Hotspot ‘Beach’ will display the additional information in the top part of the sidebar. Tapping the Hotspot again will close the displayed Hotspot content.
Chapter 05 Creating Content
67
A Starting point on the tablet: after tapping a Hotspot (not shown here), a Selected Hotspot has appeared together with the Hotspot Content in the form of a sidebar. On this side-bar, an additional Hotspot has been placed.
B After tapping the Hotspot on a Hotspot, the Hotspot Content for that Hotspot appears.
The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer, referred to as the Level-1 Hotspot Content layer.
The Hotspot is created on a Base layer
Hotspot
Selected Hotspot
Hotspot on Hotspot Content
The Hotspot on a Hotspot Content is placed on a separate layer, referred to as the Level-2 Hotspot Content layer.
Hotspot on Hotspot
Hotspot Content
The Hotspot on a Hotspot item is placed on the Level-1 Hotspot Content layer
Chapter 05 Creating Content
153
A Starting point on the tablet: after tapping a Hotspot (not shown here), a Selected Hotspot has appeared together with the Hotspot Content in the form of a sidebar. On this side-bar, an additional Hotspot has been placed.
B After tapping the Hotspot on a Hotspot, the Hotspot Content for that Hotspot appears.
The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer, referred to as the Level-1 Hotspot layer.
The Hotspot is created on a Base layer
Hotspot
Selected Hotspot
Hotspot on Hotspot Content
The Hotspot on a Hotspot Content is placed on a separate layer, referred to as the Level-2 Hotspot layer.
Hotspot on Hotspot
Hotspot Content
The Hotspot on a Hotspot item is placed on the Level-1 Hotspot layer
Chapter 05 Creating Content
68
5.7.3 Creating a Selected Hotspot
The process of creating a Selected Hotspot for the Hotspot on a Hotspot is identical to that of creating one for a basic Hotspot. (For more information, see section 5.6.5 Creating a Selected Hotspot.) The only difference is the level on which to work.
The creation process is as follows:
Step 1. Create the Hotspot-on-Hotspot and Hotspot-on-Hotspot Content as described in section 5.7.2 Creation.
Step 2. Do the following:
Step 2a. On the Hotspot-on-Hotspot Content layer, create the object that should act as the Selected Hotspot. (When this contains multiple frames, make sure to group them).
Step 2b. With the frame or group of frames selected, select the Enable Selected Hotspot check box in the Hotspot panel.
In case the Selected Hotspot functionality should be removed from the page item,
select the item(s) and choose None in the Hotspot panel.
5.7.4 Creating a Hotspot Close Button
The process of creating a Hotspot Close button for the Hotspot on a Hotspot is identical to that of creating one for a basic Hotspot. (For more information, section 5.6.6 Creating a Hotspot Close Button). The only difference is that an additional option becomes available through which all opened Hotspots can be closed.
The creation process is as follows:
Step 1. Create the Hotspot-on-Hotspot and Hotspot-on-Hotspot Content as described in section 5.7.2 Creation.
Step 2. (Optional) Create the Selected Hotspot as described in section 5.7.3 Creating a Selected Hotspot.
Step 3. On the Hotspot-on-Hotspot Content layer, create the object that should act as the Hotspot Close button. (When this contains multiple frames, make sure to group them).
Step 4. With the frame or group of frames selected, select the Enable Close Button check box in the Hotspot panel.
Step 5. (Optional) To have the button close the content for both the Hotspot and the Hotspot-on-Hotspot, select the check box Close All.
In case the Hotspot Close button func-tionality should be removed from the page
item(s), select the item and choose None in the Hotspot panel.
Chapter 05 Creating Content
69
5.7.5 Managing Hotspots using the Layers Panel
The functionality of the Hotspot panel is close related to that of InDesign’s Layers panel. Using the Layers panel, Hotspots can be managed in the following ways:
�Renaming layers. Layers created using the Hotspot panel can only be renamed by using the Layers panel.
�Moving layout items between layers. When doing so, all restrictions for working with Hotspots on Hotspots apply. When an action is not allowed, a message will inform the user about this.
5.8 Using the Hotspot Panel
Most of the functionality of the Hotspot panel is described in the steps for creating a Hotspot or Hotspot-on-Hotspot. Below follows a summary of all its features:
Enable HotspotUsed for assigning a layout item as a Hotspot.
Create New LayerUsed for creating a dedicated layer on which the Hotspot Content is placed.
Use Existing LayerUsed for assigning an existing layer on which to place the Hotspot Content. Note that the option is not available when the following conditions are met:
�Only one layers exists.
�The layer acts as a Level-2 Hotspot Content layer for an already created Hotspot on a Hotspot.
Layers listThe layers list displays all layers available in the layout with the exception of the Digital Magazine Artboard layer. In addition, it also displays the hierarchy of the layers used in the creation of Hotspots and Hotspots-on-Hotspots.
Collapse AllCollapses all expanded items in the Layers list.
Expand AllExpands all collapsed items in the Layers list.
Edit LayerUsed for efficiently working on new content on a particu-lar Hotspot Content layer. The first step is to select the Hotspot item on the layout for which content needs to be edited on its Hotspot Content layer. After clicking Edit All, the following actions take place:
Chapter 05 Creating Content
70
�The Hotspot Content layer corresponding to the selected Hotspot is made active.
�The content of all existing Hotspot Content layers apart from the current Hotspot Content layer is hidden.
�When using this feature for a Hotspot on a Hotspot, the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed.
Enable Selected Hotspot Used for creating a layout item which acts as a replace-ment for the tapped Hotspot. One use example is to create an identical item (as far as size, shape and position is concerned) but only change some of its visual proper-ties. This will have the effect of the item changing its visual appearance, similar to ‘selecting’ the tapped item.
Enable Close buttonUsed for creating a dedicated button to close the Hotspot with.
NoneUsed for de-assigning any assigned Selected Hotspot or Hotspot Close Button functionality from a frame. Any items on a Hotspot Content Layer which do not act as a Selected Hotspot or Hotspot Close button will also be assigned ‘None’.
Show AutomaticallySelect this checkbox when the Hotspot Content needs to be displayed as soon as the page on which the Hotspot is located is loaded.
When enabling this feature for a Hotspot on a Hotspot, the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed.
Close All(Only available for a Hotspot-on-Hotspot and only when the option Enable Close Button is enabled). When set, the button is used for closing the opened basic Hotspot as well as the Hotspot-on-Hotspot.
Editing layer namesCompared to the previous version of the Hotspot panel, editing layer names can only be done by using the Layers panel, not anymore by using the Hotspot panel.
Chapter 05 Creating Content
71
5.9 Creating a Widget
A frame can be turned into a Widget by making use of the Widget panel. Through this panel, the content and/or behavior of the Widget can be configured by selecting from various available settings.
A Widget is a bundle of specific files. It is assumed in this section that Widgets are already available and
uploaded to Enterprise. For information about creating a Widget bundle, see appendix D, Working With Widgets.
To create a Widget, perform the following steps:
Step 1. Open the layout on which the Widget should be added.
Step 2. Make sure that the Widget panel is displayed.
The Widget panel can be shown or hidden by choosing Widget from the Digital
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 func-
tionality; 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.
This check box cannot be selected under the following circumstances:
�Another frame is already set to act as a Widget. Clear the Enable Widget check box for that frame.
�The selected frame is already set to con-tain a video, audio file, Web Element, or Slide Show, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
The Widget list is enabled, showing all Widgets available in the same Dossier in which the layout is saved to.
Figure 5.7. After choosing an available Widget from the list in the Widget panel, the Widget can be configured through specific settings
Chapter 05 Creating Content
72
If the required Widget is not found in the list, locate it in Enterprise and check
whether the Widget has been assigned to the correct Dossier.
Step 5. From the Widget list, choose the Widget which needs to be added.
The bottom half of the panel shows the available settings for the chosen Widget with which the content and/or behavior of the Widget can be configured. Depending on how the Widget is set up (see appendix D, Working With Widgets), various settings may be available such as check boxes, lists, text boxes, etc.
Step 6. (Optional) Configure the Widget as required.
5.10 Creating a Scrollable Area
A scrollable area is an area on the page of which the content exceeds the frame’s width or height. To scroll through the content, the user can scroll either horizontally or vertically.
ComponentsA scrollable area consists of the following components:
�The Scrollable Area frame. The frame on the page which holds the scrollable content.
�The scrollable content. The content which the user can scroll through.
�Scrollable Area Content layer. The layer containing the layout items for the Scrollable Area content.
LayersThe Scrollable Area functionality makes use of layers. The Scrollable Area frame itself is created on any of the layers of the regular layout. Using the Scrollable Area panel, the Scrollable Content can be added to either a dedicated layer or to an existing layer.
Size and contentIn essence, the Scrollable Area content can be set to any size, up to the width or height of the page that it is on. Since the Scrollable Area content is nothing more than an extra layer within the InDesign layout, it can contain any type of content, including a Slide Show, video, audio, a Web Element, Hotspot, Widget, or Dossier Link. However, it cannot contain another Scrollable Area; nor can the object added to the Scrollable Area itself contain another Scrollable Area (for example: you can add a Hotspot to a Scrollable Area, but it is not possible to add another Scrollable Area in that Hotspot).
To create a Scrollable Area, perform the following steps:
Step 1. Design the layout on which the Scrollable Area is to be placed.
Chapter 05 Creating Content
73
Step 2. Create an item on the layout which should act as the Scrollable Area.
This can either be a frame or a group of frames and can be placed on any layer
except a layer that already acts as a Scrollable Area Content layer.
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 func-
tionality; 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:
�The selected frame is already set to con-tain a Slide Show, video, audio file, Web Element, or Widget, or is set to act as a Dossier Link or Hotspot. Clear the Enable check box in the respective panel.
Now that the Scrollable Area is defined, we need to specify where the Scrollable Content is going to be located. Scrollable Content can be placed as follows:
�On a new layer (see step 7)
�On an existing layer (see step 8)
Scrollable content on a new layer(Make sure that Steps 4 and 5 have been performed, else the panel options will not be available.)
Step 7. To create the Scrollable Content on a new layer, perform the following steps:
Step 7a. Cl ick Create New Layer (selected by default).
Step 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.
Chapter 05 Creating Content
74
Step 7e. Continue with Step 8 or 9.
Scrollable content on an existing layer(Make sure that Steps 4 and 5 have been performed, else the panel options will not be available.)
Step 8. To create the Scrollable Content on an existing layer, perform the following steps:
Step 8a. Click Use Existing Layer.
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 made active
�The content of all existing Scrollable Area Content layers apart from the current Scrollable Area Content layer is hidden (this makes the process of working on the content of the current Scrollable Area Content layer more convenient)
Step 10. Create the content through which the user should be able to scroll.
No background is needed; the content will be displayed on top of the Scrollable Area
frame.
Make sure to not accidentally select a dif-ferent layer in the Layers panel, else you
might see unexpected results.
Chapter 05 Creating Content
75
5.11 Creating a Custom Object
Custom Objects are not available for the Android Reader App.
The creation of a Custom Object starts by creating a Web Element; this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout.
The current version of the Digital Magazine Tools does not yet have a fully developed user interface
for implementing a Custom Object in a magazine, and therefore requires manual steps to be performed after the magazine has been exported.
To create a Custom Object, perform the following steps:
Step 1. Follow the steps as outlined in section 5.4 Creating a Web Element.
Do not specify a URL in Step 5, the aim is to create a place holder in the exported
magazine which can be easily found and sub-sequently modified.
Step 2. Export the magazine and modify the exported package as outlined in chapter 7, Customizing the iPad Reader App – section 9.6 Custom Objects.
5.12 Creating a Help Page
It is advisable to provide your users of the Reader App with a guide describing how to use the App and its dynamic content (such as how to navigate the magazine, how to use Slide Shows, videos, Scrollable Areas, etc.).
This can for instance be done in the form of graph-ics in a single-page document.
In order for your reader to easily access this page, it can be linked to a Help button in the Navigation bar by doing the following:
Step 1. Create a Dossier containing a page in horizontal and vertical orientation as explained in the previous sections.
Step 2. Design the layout as required.
Step 3. In the Dossier properties in which the layouts are stored, set the Intent to Help.
With this property set, a Help button will be added to the Navigation bar of the Reader App, to which the created pages are linked; when the user taps the button, the Help page will auto-matically appear.
Chapter 05 Creating Content
76
5.13 Creating Shared Content
The Shared Content feature is not available for the Android Reader App.
External content can be shared with others directly from within the Reader App in the form of a Hyperlink. This Hyperlink can be sent out by e-mail or by using social service networks such as Twitter and Facebook.
This Hyperlink is a regular URL and can point to any type of content on the Web, such as an online version of the story.
For each created story, one Hyperlink can be created for sharing with others. Creating a Hyperlink is part of the Content Station functionality and is done as follows:
Step 1. Create a Hyperlink by performing the following steps:
Step 1a. In the Dossier which needs to be set up for Content Sharing, choose New Hyperlink from the Create New button above the Publication Channels pane.
The Create Hyperlink dialog box appears.
Step 1b. In the URL box, enter the URL to the external source.
The Reader App will automatically insert a shortened version of the URL
for Twitter messages, there is no need to first run the URL through a URL shorten service yourself.
Step 1c. Click OK.
The Upload dialog box appears.
Step 1d. From the Intent list, choose Shared Article.
Step 1e. Click OK to close the dialog box and save the Hyperlink.
Step 1f. Make sure that the check box for the magazine’s Publication Channel is selected for the Hyperlink in order to include the Hyperlink in the exported magazine.
Step 2. (Optional, only for Facebook and e-mail) In the Dossier properties window for the story, enter a Story title. This is used as follows:
�Facebook: as the clickable text in the created post.
�E-mail: as the subject of the e-mail.
Chapter 05 Creating Content
77
6. Summary
In this chapter you have learned all about creating con-tent for a digital magazine using InDesign. You have seen how each component of a story is created, including the Dossier, the layouts in their various orientations and the actual content on the layout.
Next step �Exporting content: continue to chapter 6,
Exporting Content. It will teach you how to pre-pare and export created content using Content Station.
80
06
80
The process of preparing files for export and that of subsequently exporting the content of the maga-zine takes place in Content Station.
Using the Dossier functionality together with the Digital Magazine application, the following tasks can be performed:
�Defining which files should be included in the export
�Changing the order of the stories as they should appear in the magazine
�Exporting the content for use in a Reader App for a specific platform
In this chapter you will learn how to prepare the created content for publishing as a digital magazine, and see how the content is exported.
1. The Digital Magazine Application
When managing a Digital Magazine in Content Station, the majority of the time is spent in the Digital Magazine app.
This application offers the following functionality:
�It shows an overview of the stories which have been assigned to the magazine issue, and in which order they appear
�It provides quick access to the Dossier of a story
�It contains tools for exporting the magazine
For an overview of the main interface of the Digital Magazine app, see figure 1 on the next page.)
To access this application, do one of the following:
�Double-click the Digital Magazine application in the Application pane on the Home page to open it in a new tab.
�Right-click the Digital Magazine applica-tion on the Home page and choose Open in New Window to open the application in a new window.
Exporting Content
Chapter 06 Exporting Content
81
The Digital Magazine page consists of the following components:
�Search pane. For choosing the Brand/Issue combination of which content should be dis-played in the Story pane.
�Device toolbar. For choosing the device of which content should be displayed in the Story pane.
�Story pane. Shows all Stories that have been assigned to the Brand/Issue combination as set in the Search pane.
�Page preview panes. Shows all layouts and their pages for the story selected in the Story pane.
�Export toolbar. Contains buttons for export-ing the magazine.
The usage of each pane is explained in more detail on the following pages.
Figure 1. The components of the Digital Magazine application in Content Station
C
AB
D
E
F
A Search pane B Device toolbar C Story pane D Export toolbar E Page preview pane (landscape pages) F Page preview pane (portrait pages)
Chapter 06 Exporting Content
82
1.1 The Search Pane
When first opening the Digital Magazine application, only the Search pane and Export toolbar are shown. The other areas are initially empty and are loaded as soon as a search has been performed using the components of the Search pane. To do this, perform the following steps:
Step 1. (Optional) From the Brands list, choose the Brand of which the magazine is part.
Step 2. (Optional) From the Issue list, choose the Issue of which the magazine is part.
Only the Issues with the Publication Channel of type Digital Magazine appear
in the list.
Step 3. Click Search.
The following actions take place:
�The buttons of the Device Toolbar appear. (See section 1.2 The Device Toolbar.)
�All stories that have been assigned to the chosen Brand/Issue combination appear in the Story pane.
1.2 The Device Toolbar
The Device toolbar contains buttons for one or more defined devices to output to.
A button is available for each defined Edition (set up for the chosen Issue in the Search pane) which matches the device setup in configserver.php. For example, mul-tiple devices can be set up on the Server, but if only one Edition has been defined for the chosen Issue, only one button will appear.
Clicking a button will display the corresponding content in the Story pane for that device (based on the content assigned to the corresponding DM Artboards in InDesign.)
Note that at all times, all stories assigned to the Issue are displayed in the Story pane. When a Story
has not been assigned to be part of the selected device, the preview will change to a default icon (see section 1.3 The Story Pane). This is done to make sure that reordering the stories can be performed as a single step affecting all available devices and prevents having to reorder the sto-ries for each device in separate steps.
Chapter 06 Exporting Content
83
1.3 The Story Pane
After locating the available stories of a digital magazine using the Search pane (see section 1.1 The Search Pane), and choosing the Device for which the content is intended in the Device toolbar (see section 1.2 The Device Toolbar), the Story pane is populated with the available stories for that magazine1.
Each story is represented by a preview and some addi-tional information:
�Preview. One of several types of previews can appear:
�A preview of the first page of the first layout in the Dossier. The first lay-out in landscape orientation is used, when available.
�A default preview. An empty preview (in the form of a light gray page) is shown under the following conditions:
�When the Dossier does not contain any layouts.
�When no layouts have been assigned to the correct Publication Channel.
�When the layout does not contain any page items for the selected device in the Device toolbar.
The preview is actually a Dossier: when double-clicking it, the Dossier for that
story opens; when right-clicking it, the access menu of the story’s Dossier appears.
�Status icon. The Dossier status icon.
1 A story appears in the Story pane as soon as it has been assigned to the required Publication Channel for the magazine.
�Order number. (Assigned automati-cally) Indicates the position of the story in the magazine.
�Title. The Dossier name.
Figure 1.3. The components of a story in the Story pane
C D
A
A Preview of a page B Order numberC Dossier status icon D Dossier name
B
The area of the Story pane can be adjusted by drag-ging the gripper area (the dividing bar between the
Story pane and the Pages Preview panes) to the left or right. (For more information about resizing the interface, see the Content Station User Guide, chapter 3, The Interface.)
Chapter 06 Exporting Content
84
1.4 The Page Preview panes
When selecting a story in the Story pane (see section 1.3 The Story Pane), the pages of the assigned layouts appear in the Page Preview panes. This will give you a quick indication of the content of a story.
Only the pages appear for those layouts which have been set for publication to the currently displayed
Issue.
Two separate panes exist: one showing pages in land-scape orientation only (top pane), and one showing pages in portrait orientation only (the bottom pane). Above each pane, the layout name is displayed.
The area of the Page Preview panes can be adjusted by dragging the gripper area (the dividing bar
between the Story pane and the Pages Preview panes) to the left or right. (For more information about resizing the interface, see the Content Station User Guide, chapter 3, The Interface.)
2. Preparing Content for Export
Before exporting an Issue as a Digital Magazine, it is wise to verify that all required settings are correctly set and all required components are available. Not only will this ensure an error free export, but it will also result in the Reader components working as expected.
From within Content Station, the following items are rel-evant to check and (if needed) to modify:
�Magazine content �Story order �Dossier properties �Image properties �Content sharing
Each item is covered in more detail in the following sections.
Chapter 06 Exporting Content
85
2.1 Magazine Content
The stories that are displayed in the Story pane are those stories that will be exported when clicking the Export button.
Make sure that no stories are missing from the magazine and that no stories are displayed which should not be part of the magazine.
The following tasks can be performed to achieve this:
�Adding a story �Verifying the story’s content �Removing a story
Each is explained in the following sections.
2.1.1 Adding a Story
To add a story to a Digital Magazine, perform the follow-ing steps:
Step 1. Assign a Dossier to the Brand/Issue combination of the magazine.
This in itself is enough to add the story to the Digital Magazine. However, it will display in the Story pane with a default preview, and no pages will of course display in the Page Preview panes.
To assign the correct content, see section 2.1.2 Verifying the Story’s Content.
Step 2. Click the Search button in the Digital Magazine application to refresh the page.
Chapter 06 Exporting Content
86
2.1.2 Verifying the Story’s Content
For each story that is displayed in the Story pane, verify that the right components are present and (optionally) assigned to the Publication Channel of the correct maga-zine. Do this by performing the following steps:
Step 1. Double-click each Story in the Story pane to open the story’s Dossier and verify the following:
�No more than two layouts should be assigned to the Publication Channel of the magazine. These will typically be the lay-outs in landscape and portrait orientation.
�Make sure that the correct pages in their correct orientations are assigned (corre-sponding with the way the Reader App has been configured).
�When making use of specific functionality, make sure that their related content is part of the Dossier:
�Slide shows: all related images �Embedded videos: all related videos �Embedded audio: all related audio files �Widgets: all related Widget files �Widgets: all related Widget files
�The following types of content also need to be assigned to the Publication Channel:
�Embedded video �Embedded audio �Hyperlinks �Widgets
�When the story is planned to be displayed in Text View mode, ensure of the following:
�That a dedicated article is present and assigned to the magazine’s Publication Channel .
�Any layouts in portrait orientation should not be assigned to the maga-zine’s Publication Channel.
�An image that is used as a header image should be assigned to the Publication Channel and have the Intent set to Header.
�Any images that should be displayed at the bottom of the page should be assigned to the magazine’s Publication Channel. (With the exception of images that are part of a Slide Show; these are automatically displayed at the bottom of the page.)
Step 2. In the Story pane, select each Story and check the Page Preview panes to see if pages in the expected orientation appear (depending on how the Reader App is config-ured: both landscape and portrait orientation, or landscape or portrait orientation only.)
Chapter 06 Exporting Content
87
2.1.3 Removing a Story
To remove a story, perform the following steps:
Step 1. De-assign the Brand/Issue combina-tion of the magazine from the Dossier.
Step 2. Click the Search button in the Digital Magazine application to refresh the page.
2.2 Story Order
The order in which the stories are displayed in the Story pane is also the order in which they are going to be pre-sented in the exported magazine.
The initial sorting order of the displayed stories is based on the creation date (newest first).
The stories can be rearranged by performing the follow-ing steps:
Step 1. Select one or more stories in the Story pane.
When a story is selected, selecting other or additional stories can also be done by
using the up/down or left/right keys on the key-board (also in combination with keeping the Shift key pressed). To deselect a selected story, click the story while keeping the Cmd/Ctrl key pressed.
Step 2. Drag-and-drop the selected stories to their required position within the magazine.
Figure 2.2. Stories can be repositioned within the magazine
Chapter 06 Exporting Content
88
2.3 Dossier Properties
The Digital Magazines functionality uses various Dossier properties for controlling specific features in the Reader App on the digital device. For each story in the magazine, verify that the following Dossier properties have been cor-rectly set:
To quickly access the Dossier of a story, double-click the story in the Story pane.
� Preview: Used for indicating that a Dossier contains content for use in the
issue preview functionality in a Store.
This content is extracted from the ofip file by a delivery system, allowing the user to preview a complete dynamic story as opposed to a single-page static image.
�Intent. When the Dossier holds the layouts containing the table of contents, choose TOC from the Intent list so that the table of contents is linked to the TOC button in the Reader App. (When the user taps the button, he or she will be directly navigated to the table of contents.)
�Story title: used for displaying the name of the story in the Page viewer of the Reader’s Section Viewer.
�Section title: used for displaying the name of the section to which the story belongs in the Section viewer of the Reader App.
�Description: used for displaying additional information for the story in the Story / Page Viewer of the Reader App.
Keep both the Story title and Description short; if it exceeds the width of the page
preview in the Reader, ellipses are shown for the part which cannot be displayed.
2.4 Image Properties
Text View Mode propertiesWhen a story is displayed in Text View mode, an image can be set to act as the header image. This image will be displayed before the content of the article.
For each story that makes use of this feature, verify the following:
�Access the Dossier of the story and ensure that it contains an image with the exact dimen-sions (width and height) in which it is going to be displayed on the digital device.
To quickly access the Dossier of a story, double-click the story in the Story pane.
�In the Properties dialog box of the image, ensure that the Intent property is set to Header.
Cover and preview propertiesDuring the upload process of a digital magazine, images can be automatically extracted by a Content
Delivery Platform for use as the cover or preview image in a Store. This process replaces the need to upload these images separately. To achieve this, prepare the content as follows:
Step 1. Add any images to act as the cover or preview to the Dossier.
Step 2. Access the Dossier properties.
Step 3. Set the intent property of the images to cover or preview respectively.
Images assigned this way are only picked up from the first Dossier of the issue, as defined by the order
in the Digital Magazine application.
Chapter 06 Exporting Content
89
2.5 Content Sharing
In the Reader App, users can forward a Hyperlink by sharing this via e-mail, Facebook or Twitter. The URL of the Hyperlink can be to any type of content such as an online version of the magazine article, external sources with background information, online stores, etc.
For this functionality to work, a Hyperlink object needs to be included in the Dossier of the story and assigned to be included in the export.
To set this up correctly, perform the following steps:
Step 1. In the Dossier for the article which Content Sharing needs to enabled, choose New Hyperlink from the Create New button above the Publication Channels pane.
The Create Hyperlink dialog box appears.
Step 2. In the URL box, enter the URL to the external source.
Shortening the URL is not necessary; when the URL is going to be used in a
Twitter message, the system will automatically insert a shortened version.
Step 3. From the Intent list, choose shared article.
Step 4. Click OK to close the dialog box.
Step 5. Make sure that the check box in the correct Publication Channel is selected for this Hyperlink so that it is included in the magazine export.
2.6 Sharing ofip Properties
The Issue Maintenance page of a Digital Magazine Issue is used for setting various ofip properties. (For
more information, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration – Step 11. Configuring Issue Maintenance.)
In case any properties are not entered on that page, the missing properties can be extracted from an ofip file which does have these properties set. A typical example of this is to share ofip properties between files belonging to different Brands or Enterprise systems.
In the following scenario, an ofip file is created from Enterprise system A and used for populating ofip prop-erties in a file stored in Enterprise system B:
Step 1. Using Content Station, log in to Enterprise system A.
Step 2. Export a Digital Magazine issue ‘X’.
Step 3. Download the ofip file for this issue ‘X’.
Step 4. Log out of Enterprise system A and log in to Enterprise system B.
Step 5. Upload the ofip file for issue ‘X’ into a Dossier to which the issue which needs to receive the ofip properties (issue ‘Y’) also belongs.
Step 6. Export the Digital Magazine issue ‘Y’.
During this export, the ofip properties that are available in issue ‘X’ but not in issue ‘Y’ are added to issue ‘Y’. (No existing values are overwritten.)
Chapter 06 Exporting Content
90
3. Exporting Content
When the content of the magazine has been verified and found complete and correctly set (see section 2. Preparing Content for Export) it is ready to be exported.
The exporting process will create the necessary con-tent files for inclusion in a Reader App, or for upload to a delivery server. To export a digital magazine, perform the following steps:
Step 1. Access the Digital Magazine page and use the Search pane to display the magazine in the Story pane which should be exported.
The Export button becomes available.
Step 2. Click the Export button.
(Optional, only when the server is set up for mul-tiple device support.) The Export Options dialog box appears, showing all devices to which can be exported to.
Step 2a. (Optional) Select one or more devices to export to.
Step 2b. (Optional) Click OK.
The export commences and its progress can be followed by a progress bar next to the Export button.
Step 3. (Optional) To stop the export at any time, click the Abort Export button.
When the export is completed, the Export Report dialog box appears, showing the result of the export. (See figure 3 on the next page.)
Step 4. If any issues have occurred, verify and correct them. Then, export the content once more.
The content assigned for export is verified to see if it matches the Digital Magazine settings as set on the Issue Maintenance page (see the Enterprise 7 Admin Guide). In case a mismatch has been found (for instance: the Issue is set up to include Text View, but no landscape in portrait orientation or an article has been assigned for export), an error or warning is shown together with steps to rectify the problem. (See figure 3 on the next page.)
Step 5. (Optional) Initially, the content is exported to the server. To download the con-tent to the local system, do one of the following:
�To download an exported magazine to a specific folder, click Browse.
�To download an exported magazine indi-vidually, click the Download button for the respective device.
WARNING: the content of this folder will be erased during the download
process.
The download process can be followed by a progress bar.
The folder to which the content is downloaded to is defined in WWSettings.xml. (For details about setting these paths, see the Admin Guide, chapter 40, Digital Magazine Configuration.)
To cancel the download(s), click Cancel.
Step 6. (Optional) Modify the exported maga-zine.xml file to include the following functionality:
� Include Custom Objects. (iPad Reader App only) For more information, see chap-ter 7, Customizing the iPad Reader App – section 9.6 Custom Objects.
Chapter 06 Exporting Content
91
�Hide embedded audio controls. For more information, see chapter 7, Customizing the iPad Reader App – 9.2.2 Embedded Audio Controls.
�Add an audio title and description for display in the Audio Control panel. (iPad Reader App only) For more informa-tion, see chapter 7, Customizing the iPad Reader App – 9.2.3 Audio Control Pop-Up.
�Hide embedded video controls. For more information, see chapter 7, customiz-ing the Reader App – section 9.19.2, Hiding Embedded Video Controls.
�Hide a video after it has stopped playing. (iPad Reader App only) For more information, see chapter 7, Customizing the iPad Reader App – section 9.19 Remove Video After Play.)
�Create HTML Dossier Links. (Android Reader App versions 1.0 and 1.1 only) For more information, see chapter 5, Creating Content – section 5.5.2.In a Web Element.
Figure 3. When the export encounters incorrectly assigned content, an error is shown and steps to rectify the problem are provided
Chapter 06 Exporting Content
92
3.1 Exporting and Page Scaling
When the “Fit mode” DMSetting option is used (see appendix E, The DMSettings.plist File – section 3.10 Metrics), take note of the following:
�When using DM Server plug-in version 7.0.11 or higher for exporting the content, the dimensions of the issue will be read from the magazine.xml file. The page fitting feature will work as specified.
�When using a DM Server plug-in of a ver-sion older than 7.0.11, the dimensions of the issue have to be determined by looking at the dimensions of the actual page files. Page fitting will only work if the first page exists in both verti-cal and horizontal orientation and both are not long pages. In all other cases, the pages will be made to fit the width of the device.
4. Summary
In this chapter, you have learned how to use the Digital Magazine application in Content Station for verifying the content of a digital magazine and how to export it.
Next stepsThe exported files can now be included in the Reader application and made available on a delivery server so that it can be accessed from the tablet.
93
07
93iP
ad
Customizing the iPad Reader App is important when you want to achieve any of the following:
�Giving it a unique look and feel (reflecting the content of the issues that will be viewed)
�Enabling those features that you want your users to use
�Localizing the Reader App into a particular language
In this chapter you will learn all about customizing the iPad Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The following main customization areas are defined:
�General App settings
�Navigation
�The Store
�The Library
�General App features
Customizing the iPad Reader App
Chapter 07 Customizing the iPad Reader App
94iP
ad
1. Required Tools
In order to perform the steps as outlined in this chapter, the following tools are required:
�Xcode and the iPad Simulator. (both come as part of the Xcode and iPhone SDK, available from the iOS Dev Center: http://developer.apple.com/devcenter/ios/index.action). It is assumed here that both are correctly installed and that you are proficient in using these applications.
Xcode version 4.0 is required for working with the iPad Reader App v2.x project.
Use of previous versions:
�Version 1.6 support: SDK version 4.2 is not compatible with the iPad Reader App version 1.6. If this compatibility is still required, install any higher version of Xcode in a folder separate from the one in which version 1.6 is installed.
�Version 1.7 – 1.9 support: versions 1.7 to 1.9 require Xcode version 3.2.5; if this version is still required, have it installed in a separate folder.
�Image editor. For editing images in .png or .ai/.pdf format. Use your favorite editor for this task.
2. Loading a Project
The Reader App is supplied as an Xcode project. To load the project, perform the following steps:
Step 1. Unzip the provided DigiMag file:
�DigiMag�iPad�v2.x�bxxx�Basic�Standard.zip �DigiMag�iPad�v2.x�bxxx�Pro�Framework.zip �DigiMag�iPad�v2.x�bxxx�Subscriptions.zip �DigiMag�iPad�v2x�bxxx�AppleSubscriptions.zip
Step 2. Open the Xcode project, located in the [folder name]_Template folder.
Customizing the Reader App is mostly done by making changes to the following areas of the project:
�_Template/Classes/DigiMagKioskSettings.h file. (Reader App versions with Store functionality only) Settings related to connecting to the Store.
�_Template/Classes/Resources folder. For adding additional resources such as Subscription Offer pages, custom objects, etc.
�_Template/Classes/Resources/Settings.bundle file. Controls the Share Content func-tionality and contains version information.
�_Template/Classes/Resources/Localizable.strings file. For localizing the text as displayed in the Reader App.
�_Template/Classes/Resources/images folder. For customizing images used for logos, backgrounds, icons, etc.
�_Template/Classes/Resources/DMSettings.plist file. For customizing the Reader App functionality, as well as colors and fonts.
Chapter 07 Customizing the iPad Reader App
95iP
ad
3. What Can Be Customized?
Changing the look & feel or the functionality of the Reader App is achieved by modifying any of the following areas:
�Assets. Interface components such as but-tons, icons, logos and headers.
�Colors. The color of text and backgrounds.
�Fonts. Specific fonts used in various places of the Reader App.
�Text. The text of specific titles as they appear in various places of the Reader App.
�Settings. The functionality of the Reader App.
Each is described in the sections on the following pages.
Additional functionality can be added to the Reader App by adding the following components:
�Custom Objects. Objects containing func-tionality of 3rd-party developers.
�APIs. Programming interfaces that add addi-tional functionality to the Reader App. Currently, the following APIs can be used:
�Analytics API for gathering information about how a user uses the Reader App
�Gesture API for receiving and controlling gestures
�Navigation API for navigating to various components of the magazine
3.1 Assets
Assets are user interface components such as buttons, icons and headers. Each of these assets are images and can be easily replaced by your own images.
All images are stored within the Xcode project in the Resources/images folder. Table 3.1 on the next page shows the types of assets available and the folder in which they are stored.
The Toolbar, Overlay, Store, and Text View assets are available as PDF files which can be customized
by using Illustrator. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
Take note of the following:
�Renaming assets is not allowed since the names are directly linked to the code in the Reader App
�All assets need to be in PNG file format
For an overview of the exact asset dimensions, see appendix C, Image Dimensions.
Chapter 07 Customizing the iPad Reader App
96iP
ad
Table 3.1. Assets folder structureFolder Available assets Additional information
images
closeButtonDefaultState.png Image used as the default close button, used in various locations of the Reader App.
noInternetConnectionBackground.png Image shown when no internet connection is available on the iPad.
noInternetConnectionLabel.png The label shown when no internet connection is available on the iPad.
segments_shadow.png The shadow between the top and bottom part of the Segments Overview page.
segments_stack_background.png The icon for an issue on the Library page, indicating that the issue contains Segments.
transparentImageForFlipviewButton.png Image used for the selected status of a thumb-nail in the Flipview.
images/Bookmark Popup Assets relating to the Bookmark List
images/Audio Popup Assets for the Audio Control button in the top Toolbar and the Audio Control.
images/Share Popup Assets for the Content Sharing functionality.
images/TOC Popup Assets relating to the TOC List The TOC List appears when tapping the TOC button in the top toolbar.
images/Application General assets for the application itself. Including the app icon and splashscreens.
images/Flipview General assets for the Flipview area.The area that appears above the Navigation bar, showing the Story Viewer and Section Viewer.
images/Overlays Assets that overlay other objects. Including the Slide Show icon and Video icon.
images/Store Assets relating to the Store.Only available in the Pro, Framework, Subscriptions and Apple Subscriptions Editions of the Reader App.
images/Textview Assets for the Text View mode.Used for displaying the story as one continu-ous page in which the text can be made bigger or smaller.
images/Toolbar Assets that represent icons in the Navigation bar and top Toolbar.
Chapter 07 Customizing the iPad Reader App
97iP
ad
3.2 Colors
Colors for objects and text are controlled via the DMSettings.plist file, located in the Resources folder.
The following groups are defined:
�TOC colors. Colors used for the TOC List.
�Application toolbar colors. The color of the Navigation bar and top Toolbar.
�Flipview colors. Colors used for the Flipview.
�Store colors. Colors used for the Store (including Subscription functionality) and Library.
�Bookmark colors. Colors used for the Bookmarks functionality.
�Web Elements colors. Color settings related to using Web Elements.
�Page Sharing colors. Color settings related to the Content Sharing functionality.
Changing the color is done by changing the RGB values for a specific option in the DMSettings.plist file. Detailed information about each option is provided per feature in the remainder of this chapter.
Using custom color settings can sometimes give unexpected results (such as the gradient disap-
pearing). Be sure to verify the result in the Reader App (for more information about previewing customizations, see section 4. Previewing Customizations).
3.3 Fonts
Custom fonts can be defined for the following areas of the Reader App:
�TOC List �Bookmarks List �Story Viewer / Page Viewer �Subscription Sign in dialog box
Detailed information about the areas for which fonts can be modified for these features is provided in the remainder of this chapter.
Custom fonts can also be used for the Text View mode, but these are controlled via configuration files
as part of Enterprise Server. For configuration steps, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration.
To define custom fonts by means of the Xcode project, perform the following steps:
Any defined custom fonts are distributed and included in the Reader App; make sure that you
have a proper license for each used font.
Step 1. Create a folder somewhere on your system named fonts (all lower case).
Step 2. Copy the fonts that are to be used as custom fonts to this folder.
All fonts used must be TrueType fonts.
Step 3. Open the Reader App project in Xcode.
Step 4. Verify that no fonts folder is present in the Resources folder. (If there is a folder pres-ent, remove it).
Chapter 07 Customizing the iPad Reader App
98iP
ad
Step 5. Drag the fonts folder created in Step 1 onto the Resources folder.
Step 6. In the dialog box that appears, perform the following steps:
Step 6a. Select the check box Copy items into destination group’s folder
Step 6b. Choose the option Create Folder References for any added folder
Step 6c. In the Targets list, select the check boxes for all targets.
Step 6d. Click Add.
The added folder should appear as a blue folder.
If the folder appears as a yellow folder, remove it and repeat the process again.
Step 7. Access the Fonts section of the DMSettings.plist file.
Step 8. For any of the TOC or Flipview options described above, set the custom font by doing the following:
Step 8a. Select the Custom check box.
Step 8b. In the Name value, enter the name of the font. (The name as it appears in the file name without the extension. For example: Vera.ttf would be entered as Vera.)
Step 8c. In the Size value, enter the size of the font.
Step 9. (Optional) It could be that a certain settings does not have the Custom property
defined. To define this property, perform the following steps:
Step 9a. Right-click the setting and choose Add Row from the context menu.
Step 9b. Replace the name New Item with Custom.
Step 9c. In the Type column, choose type Boolean.
Chapter 07 Customizing the iPad Reader App
99iP
ad
3.4 Text
Changing the appearance of the text can be done in the following ways:
�By changing the actual text
�By changing the color of the text
�By changing the language in which the text appears
Each is explained in the following sections.
3.4.1 Changing the Text
The text which appears in the Reader App originates from various sources, and can therefore be changed by differ-ent means (see figure below):
�Settings. The name of the Reader App itself is controlled by a setting in the Xcode project. (For more information, see section 5.1 Reader App Name.)
�Assets. Most assets in the Xcode project include icons only, but the following assets also include text:
�Buttons of the Navigation bar, Store and Library
�Labels which indicate that no internet connection is available
To change the text for these assets, modify the respective file. (For more information, see sec-tion 6.4.4 Assets.)
�Resources/Localizable.strings file. This file can be used to change the following types of text:
�Flipview header �Content Sharing functionality �Audio Control title bar �Forward/Back labels �Table of contents title �Download labels �Bookmarks List �Filter titles �Store messages �Warnings/error messages �User notifications
To change the text for any of these items, mod-ify the content of the file as required.
Chapter 07 Customizing the iPad Reader App
100iP
ad
Figure 3.4.1. Text originates from various sources in the system
A Localizable string B Dossier property C Asset with text D Server property E HTML page F External source
A
B
B C
D
E
F
Chapter 07 Customizing the iPad Reader App
101iP
ad
The error messages returned from the Content Delivery Platform have been
extended. Error codes are used to better iden-tify the area where the problem originates from. In the translations, the error codes are posi-tioned in the %@ section of the string. If needed, this section can be removed so that the error code does not appear in the message. However, we strongly recommend to keep this section in the string, so that better technical support can be provided to the end user.
�Root.strings file. This file can be used to change the labelling of the version information for the Reader App as displayed in the Settings app of the iPad.
The file can be found in the following location of the Xcode project: Resources/Settings.bundle/[language code].lproj/Root.strings.
For more information, see section 3.4.3 Changing the Language and section 5.5 Version Numbering.
�Dossier properties. Setting the properties of a Dossier controls the following:
�Section. Each section in the Section Viewer is derived from the Section Title property.
�Story title. The title for a story below a thumbnail in the Flipview is derived from the Story Title property.
�Story description. The story descrip-tion below the story title in the Flipview is derived from the Description property.
To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken
from their respective custom metadata proper-ties. For more information about setting these values, see the Enterprise 7 Admin Guide, chap-ter 40, Digital Magazine Configuration.)
�Issue Maintenance page. The Issue Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header.
To add or change this text, change the Issue Description property on the Issue Maintenance page in Enterprise Server.
�HTML pages. Dedicated HTML pages such as the Subscription Offer page in the Store, present specific information. Changing the text of these pages is done by modifying the relevant source files.
For more information, see appendix L, Subscription Server Support – section 1.1.1. Web Pages.
�External sources. Dialog boxes can hold specific information originating from an exter-nal source. Although their source is not part of the Reader App as such, because they are displayed within the context of the magazine, it can appear to the user as part of the magazine. For example:
�When a user subscribes to an iTunes sub-scription, a dialog box appears asking for confirmation. The text in this dialog box also contains custom text (typically the name of the magazine to which the user wants to subscribe). This text is derived from the Display Name field of the Edit Language section, accessed through the Manage Your in App Purchases page on iTunes Connect.
Chapter 07 Customizing the iPad Reader App
102iP
ad
3.4.2 Changing the Text Color
Defining the color of the text is done by changing the RGB values of the relevant options in the DMSettings.plist file. For more information, see section 3.2 Colors.
3.4.3 Changing the Language
The default language for the Reader App is English but it can be localized for other languages as well. This is done by including a language code which the iPad will use to display the strings in the corresponding language (only when the iPad is configured for that language, else it will display the text in English).
Localization is split over two levels: localization for the Reader App and localization for the Reader App
version information.
Each is explained below.
Localizing the Reader AppThe following instructions do not apply to localizing the HTML Store. For information about localizing
the Store, see appendix G, Customizing the HTML Store – 3.6 Language.
To add a supported language to the Reader App, perform the following steps:
Step 1. In the Xcode project file locate the Localizable.strings file in the Resources folder.
Step 2. Select the file and from the View menu, choose Utilities, followed by File Inspector.
The File Inspector appears in the right-hand side of the screen.
Step 3. In the File Inspector, expand the Localization group.
All currently added localizations are displayed (English only by default).
Step 4. In the bottom bar of the Localization group, click the + button.
Chapter 07 Customizing the iPad Reader App
103iP
ad
A list appears with all available languages which can be added.
Step 5. Choose the required language from the list.
Step 6. Repeat steps 4 and 5 until all required languages have been added.
Step 7. Build the app and view and verify the results in the Reader App.
More information about localization for the iPhone/iPad SDK can be found here: http://developer.apple.
com/library/ios/#documentation/MacOSX/Conceptual/BPInternational/Articles/InternatAndLocaliz.html.
Localizing the version informationTo add a supported language to the Reader App, perform the following steps:
Step 1. In the Xcode project file locate the Resources/Settings.bundle/[language code].lproj folder.
Step 2. Duplicate this folder.
Step 3. Change the language code in the folder name. These should be a two- or three-letter code and comply to the ISO 639-1 or ISO 639-2 conventions.
For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/
php/English_list.php.
Step 4. Modify the content of the Roots.strings file as required.
Chapter 07 Customizing the iPad Reader App
104iP
ad
3.5 Settings
Most of the customizations for the Reader App are per-formed in the DMSettings.plist file, which allows changing Reader App functionality, font settings and colors. Which settings these are and for which features they are used is discussed in the remainder of this chapter.
For a full overview of all settings in the DMSettings file, see appendix E, The DMSettings File.
For some specific features, no user interface is available yet (such as hiding video controls). For these scenarios, the exported magazine.xml file can be modified.
4. Previewing Customizations
Previewing any made customizations can be done by loading the Reader App into the iPad Simulator. This is achieved by building the Xcode project, after which the project is automatically opened within the simulator.
When using the simulator, take note of the following:
�Not all behavior or functionality can be simu-lated. For instance, it is not possible to simulate slow internet connections.
�Although the simulator reflects the working of the iPad as best as possible, it is itself a soft-ware application in which certain functionality or behavior may not always fully function. We advise to include an iPad which is assigned as a development device in your workflow of testing the Reader App.
Chapter 07 Customizing the iPad Reader App
105iP
ad
5. General App Settings
The following general features can be modified for the Reader App:
�Reader App name. The name of the Reader App as it appears on the iPad.
�Reader App assets. General assets used throughout the Reader App.
�Intent settings. Settings to conver t Enterprise intent names to Reader App intent names.
�Background downloading. When the Reader App is suspended while a download is in progress, the download is continued.
�Background download setting. Allows the user to enable/disable background down-loading of a magazine when the Reader App is closed.
�Version information. Version information about the Reader App.
�Upgrade information. Information about upgrading the Reader App.
Each setting is explained in the following sections.
5.1 Reader App Name
The name of the app (as it appears on the iPad) can be changed by modifying the Xcode project as follows:
Step 1. In the Targets section, select the DigiMag_Template project.
Step 2. In the main screen, select the Build Settings tab.
Step 3. Search for the Product Name property.
Step 4. Enter the required name.
Chapter 07 Customizing the iPad Reader App
106iP
ad
5.2 Reader App Assets
Reader App assets are assets with a general purpose such as splashscreens and the app icon. These assets are stored in the Application folder.
�Default-Landscape.png. The default splash screen that is shown when the App is launched in landscape mode. This image needs to be 1024 pixels wide and 748 pixels high. This overrules the Default.png splashscreen for the landscape orientation.
�Default-Portrait.png. The default splash screen that is shown when the App is launched in portrait mode. This image needs to be 768 pixels wide and 1004 pixels high. This overrules the Default.png splashscreen for the portrait orientation.
�Default.png. The default splash screen that is shown when the App is launched.
�Icon.png. The icon that is shown on the iPad springboard for the app.
5.3 Intent Settings
Intent settings are used to match certain functionality of the Reader App with specific content. For example, in order for the page containing the table of contents to appear when a user taps the TOC button in the Navigation bar, the Dossier in which the layout is stored should have its intent property set to TOC. A similar intent property (named Help) is used for linking the Help button to the Help page, containing instructions about how to use the Reader App.
Both intent properties are defined on Enterprise Server. However, if custom values are used, the corresponding values for the Reader App also need to be changed (else the functionality will break).
Changing the intent values can be done by means of the DMSettings.plist file:
�Intents/Help. Used for linking the page with Help instructions to the Help button in the Navigation bar.
�Intents/TOC. Used for linking the page con-taining the table of contents to the TOC button in the Navigation bar.
Chapter 07 Customizing the iPad Reader App
107iP
ad
5.3.1 Background Downloading
When the Reader App is suspended while a download is in progress, the download is now continued.
However, Apple applies the following restrictions:
�The time is finite. When the app is closed there is a maximum of 10 minutes left in which the app is still allowed to execute code.
�System resources must permit background execution. When resources (such as memory) are needed for a newly started app, our back-ground downloading might be cut off early.
For additional technical information see:
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 follow-ing strings:
�Your inactive magazine download is about to be canceled.\nWould you like to continue down-loading the magazine?
�Continue
5.4 Background Download Setting
When the Reader App is closed while a magazine download is in progress, the download process is con-tinued. The user can change this behavior through the Settings screen on the iPad by enabling/disabling the 3G Download option.
This functionality is performed through the Settings.bundle file of the Xcode project. The default file is aimed at using 3G Downloading together with Content Sharing. The bun-dle can be replaced by any of the following bundle files:
�Settings_3GDisabled.bundle. Use this Bundle if Content Sharing is enabled and 3G Downloading is disabled.
�Settings_SharingDisabled_3GDisabled.bundle. Use this bundle if both Content Sharing and 3G Downloading are disabled.
�Settings_SharingDisabled.bundle. Use this Bundle if 3G Downloading is enabled and Content Sharing is disabled.
To implement this functionality, perform the following steps:
Step 1. Enable the following DMSetting:
�Store/Enable 3G Downloading
Step 2. (Optional, only when any of the non-default bundles is to be used) Replace the default Settings.bundle file by doing the following:
Step 2a. Remove the old Settings.bun-dle file from your project (also remove it from the file system).
Chapter 07 Customizing the iPad Reader App
108iP
ad
Step 2b. In the provided template project folder, locate any of the above mentioned bundles.
Step 2c. Copy this file to a different loca-tion (such as the Desktop).
Step 2d. Rename the file to Settings.bundle.
Step 2e. Drag the new Settings.bundle fie onto the Resources folder in the tem-plate project in Xcode.
A dialog box will appear.
Step 2f. Set the following settings:
�Select the check box Copy items into destination group’s folder (if needed).
�Click the option Create Folder References for any added folders.
Step 2g. Click Add.
Step 2h. Localize any of the following strings in the Settings.bundle/en.lproj/Root.strings file:
�3G Download Options. The label shown in the iPad Settings application screen.
�Continue After Closing App. The title of the option in the iPad Settings application screen.
5.5 Version Numbering
Version numbering the Reader App allows the following processes to take place:
�Version verification. The user can verify the installed version on the iPad
�Update release. The publisher can release an update for the Reader App
Each is explained in the following sections.
Chapter 07 Customizing the iPad Reader App
109iP
ad
5.5.1 Version Verification
The following version numbers can be verified for the Reader App on the iPad (see chapter 4, Using the Reader App – section 15, Version Information):
�Application version: the version number of the Reader App.
�Framework version: the version number of the WoodWing Framework.
Application versionTo set the application version, perform the following steps:
Step 1. In the Reader App project, access the DigiMag_Template-Info.plist file.
Step 2. Modify the Bundle Version value.
Framework versionThe Framework version number is set by WoodWing and cannot be modified.
LabelsThe labels in the settings screen on the iPad are customiz-able by performing the following steps:
Step 1. In your Xcode project, locate the Settings.bundle file in the Resources folder.
Step 2. Expand the Settings.bundle file.
For each language, a separate folder is pro-vided. If a new language is required, duplicate an existing folder and modify the language code in the folder name by changing it to a two- or three-letter code which is compliant to the ISO 639-1 or ISO 639-2 conventions.
For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/
php/English_list.php.
Step 3. Select the Root.plist file.
Step 4. Expand Item 5 (Group - Version Information) and edit the available key values as required.
Chapter 07 Customizing the iPad Reader App
110iP
ad
5.5.2 Update Release
When a magazine issue is published containing features which require a new version of the Reader App to be installed, the publisher can prompt the user to update the installed Reader App.
This process only applies to those Reader Apps which do not bundle the magazine content with the
Reader App.
When a user starts the download of an issue, the version number of the Reader App is verified against the mini-mum version that is required to read the issue. When the Reader App version is lower than the minimum version, a message is displayed to the user informing the user that the Reader App requires updating. When tapping OK, the user is directly taken to the App Store.
Setting the version numbersThe version numbers are set as follows:
�On the Content Delivery Platform: see appendix F, Using the Content Delivery Platform – section 3.4.2, Adding an Issue in Segments and section 4.1, Configuring Reader Apps.
�In the Reader App: see section 5.5.1 Version Verification.
Localizing the messageTo change the displayed message, modify the following string in the Localizable.strings file of the project:
/* This message is shown when the app is an older version than required to view the new issue */"App update available description" = "This issue requires a newer version of this Reader App. Click OK to update it via the App Store";
Setting the link to the App StoreWhen the user taps the OK button in the displayed mes-sage (see above), the App Store is accessed. The URL is set through the following DMSetting:
�Update/App Store Link
URL example:
http://itunes.apple.com/us/app/woodwing/id375764844?mt=8&uo=4
Use the Apple Link Maker to create a direct link to the Reader App in the App
store: http://itunes.apple.com/linkmaker.
Chapter 07 Customizing the iPad Reader App
111iP
ad
6. Navigation
The flexibility of the Reader App allows you to offer the user various tools and methods for navigating the content:
�Story navigation vs page navigation �Orientation lock �Right-to-left support �Navigation bar �Flipview �Top Toolbar �Hotzones �Gestures
Each aspect is explained in the following sections.
Other Reader App features such as the TOC List and Bookmarks can also be seen as navigation
methods, but these are described in section 9. General App Features.
6.1 Story vs Page Navigation
The user can be offered one of two types of navigation:
�Story navigation. In this configuration, navi-gation is done as follows:
�To navigate from one story to another, the user swipes horizontally (from left to right or right to left)
�To navigate within a story (from page to page), the user swipes vertically (up/down or down/up)
�Page navigation. In this configuration, navi-gation is done as follows:
�To navigate from page to page, the user swipes horizontally (from left to right or right to left) using one finger
�To navigate from story to story, the user swipes horizontally (from left to right or right to left) using two fingers
For more information about Story Navigation and Page Navigation, see chapter 3, The Concept –
section 3, Stories, Pages, Sections and Segments.
By default, the Reader App is set to Story navigation.
Chapter 07 Customizing the iPad Reader App
112iP
ad
To enable Page navigation, set the following option in the DMSettings.plist file to Yes:
�Navigation/Horizontal page navigation
To enable two-finger swipe (Page navigation only), set the following option in the DMSettings.plist file to Yes:
�Navigation/Scroll sections with two finger swipe
To ease navigation when the Reader App is set to Page navigation, you might want to enable the Page
Scrubber so that the user can quickly browse the pages displayed in the Page Viewer.
To enable the Page Scrubber, set the following option in the DMSettings.plist file to Yes:
�Flipview/Page scrubber enabled
6.2 Orientation Lock
The default behavior of the Reader App is such that when the device is rotated, a page of a different orientation is shown. For example: when holding the device in land-scape orientation a page with a corresponding orientation is shown; when rotating the device to portrait orientation a page in that orientation is shown.
Designers can benefit from this feature by offering differ-ently styled pages for each view. Furthermore, pages in portrait orientation can also be displayed in Text View (a mode in which text can be scaled by the user by increas-ing or decreasing the font size).
If only pages of a certain orientation need to be shown (only pages in landscape orientation or only pages in portrait orientation), you can make use of the Orientation Lock feature. When enabled, rotating the device will not change the orientation of the page; the page will stay fixed in place instead.
To enable Orientation Lock, set the following option in the DMSettings.plist file:
�Navigation/Orientation lock
Possible values:
�Landscape. For displaying only pages in landscape orientation.
�Portrait. For displaying only pages in portrait orientation.
When the setting is left empty or removed, the orientation lock is disabled and pages in both landscape and portrait orientation are shown.
Chapter 07 Customizing the iPad Reader App
113iP
ad
6.3 Right-To-Left Support
The Reader App can be enabled for right-to-left support so that scrolling through the magazine is reversed.
To enable right-to-left support, set the following option in the DMSettings.plist file to Yes:
�Navigation/Right to left support
When using right-to-left support, the assets for the Back and Forward buttons in the top Toolbar need
to be switched (else the direction of the arrow in the images is wrong):
The images for both buttons are located in the /images/Toolbar folder.
�backIcon.png should be turned into for-wardIcon.png
�backSelectedIcon.png should be turned into forwardSelectedIcon.png
�forwardIcon.png should be turned into backIcon.png
�forwardSelectedIcon.png should be turned into backSelectedIcon.png
6.4 Navigation Bar
The Navigation bar is used as a starting point for navigat-ing the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, Store, etc.) as well as to external content for instance by using the Newsfeed button.
Customizing the Navigation bar can be done by changing the following:
�Tap area. The area which the user should tap in order to display the Navigation bar.
�Visibility. Only show the Navigation bar when the user taps the screen, or always have it visible.
�Items. The number of buttons and the order in which they appear.
�Assets. The icons of the buttons.
�Colors. The color of the Navigation bar.
Each is explained in the following sections.
Chapter 07 Customizing the iPad Reader App
114iP
ad
6.4.1 Tap Area
By default, the Navigation bar appears when the user taps any part of the screen.1
The tap area can be limited to the bottom part of the screen by doing the following:
�In the Hotzones section of the DMSettings.plist file, make the following changes:
�Set the option Tap bottom to show toolbar to Yes
�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom area height value.
The Navigation bar now only appears when the user taps the defined area.
1 The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
6.4.2 Visibility
By default, the Navigation bar only appears when the user taps any part of the screen (see section 6.4.1 Tap Area).
The Navigation bar can also be made to permanently dis-play by setting the following option in the DMSettings.plist file to Yes:
�Navigation/Bottom toolbar always on
Note that the Navigation bar obscures the bottom 50 pixels of the page content. When making use of
this feature, inform your designers so that no content or functionality (such as Hotspots, links, Web Elements, etc) is placed in that area.
Chapter 07 Customizing the iPad Reader App
115iP
ad
6.4.3 Items
The Navigation bar can contain the following buttons:
�Buy. (Pro, Framework, Subscriptions, and Apple Subscriptions Editions only) For navigat-ing to the Store.
�Library. (Pro, Framework, Subscriptions, and Apple Subscriptions Editions only) For navigat-ing to the Library.
�Home. For navigating to the magazine cover.
�TOC. For navigating to the table of contents page.
�External Back. For navigating to the Custom Home page.
�Help. For navigating to the Help page.
�FlipView. For bringing up the Flipview.
�Feed. For navigating to the newsfeed.
�Account. (Subscriptions, and Apple Subscriptions Editions only) For bringing up an external page with subscription account details.
�Back/Forward buttons. For navigating to the previous or next visited page.
An additional Fullscreen Overlay button can be added to the Navigation bar. For
more information, see section 9.8 Fullscreen Overlay.
The buttons are managed by means of the following option in the DMSettings.plist file:
�All buttons except the Forward/Back buttons: Navigation/ToolbarItems.
The value of each item is linked to specific func-tionality and should not be changed.
�Forward/Back buttons: Navigation/History buttons in bottom toolbar. Included in the Navigation bar by enabling the following setting:
�Navigation/History buttons in bottom toolbar
When making use of this feature, take note of the following:
�When this option is selected and the top Toolbar is also enabled, the Back/Forward button will only be shown in the Navigation bar and not in the top Toolbar.
�These buttons are disabled when the user accesses the Store or Library.
�The Navigation bar has room for dis-playing up to 9 buttons. By default, 8 buttons are already displayed; adding the Back and Forward buttons would result in 10 buttons to be displayed, which don’t fit. Therefore, one button needs to be removed from the list by selecting it and deleting it. (Adding a button can be done by right-clicking an item, choosing Add Row from the context menu and entering the correct Value for that button.)
Chapter 07 Customizing the iPad Reader App
116iP
ad
Changing the orderTo rearrange the order in which the items appear in the Navigation bar, drag each key to its required position.
The Back/Forward buttons are always positioned to the far left of the Navigation bar, except when the
Reader App is configured for right-to-left support when they are positioned to the far right.
Chapter 07 Customizing the iPad Reader App
117iP
ad
6.4.4 Assets
The assets that appear in the Navigation bar are stored in the images/Toolbar folder.
For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
The Navigation bar has a 1-pixel high dark row at the top. When creating or modifying a button, make
sure that this button has a 1-pixel high transparent row at the top so that the underlying dark row of the Navigation bar stays visible.
The Toolbar assets are available as PDF files which can be customized by using Illustrator. The package
can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
The following assets can be customized:
An additional Fullscreen Overlay button can be added to the Navigation bar. For more information,
see section 9.8 Fullscreen Overlay.
�accountIcon.png. The icon for the Account button in the Navigation bar.
�accountSelectedIcon.png. The icon for the Account button in the Navigation bar in its selected state.
A Store icon (selected) B Library icon C Home icon D TOC icon E Flipview icon F Feed icon G Help iconH Account icon
A B C D E F G H
Figure 6.4.4. The Navigation bar assets
�feedIcon.png. The icon for the News Feed button.
�feedSelectedIcon.png. The icon for the News Feed button in its selected state.
�flipviewIcon.png. The icon for the Flipview1 button. (This button is normally named Contents.)
�flipviewSelectedIcon.png. The icon for the Flipview button in its selected state. (This button is normally named Contents.)
�helpIcon.png. The icon for the Help button.
�helpSelectedIcon.png. The icon for the Help button in its selected state.
�homeIcon.png. The icon for the Home but-ton, linking to the cover of the magazine.
�homeSelectedIcon.png. The icon for the Home button in its selected state.
�libraryIcon.png. The icon for the Library button.
1 When tapping the Flipview button, the Story Viewer and Section viewer appear above the Navigation bar
Chapter 07 Customizing the iPad Reader App
118iP
ad
�librarySelectedIcon.png. The icon for the Library button in its selected state.
�storeIcon.png. The icon for the Store button.
�storeSelectedIcon.png. The icon for the Store button in its selected state.
�tocIcon.png. The icon for the Contents but-ton in the Navigation bar.
�tocSelectedIcon.png. The icon for the Contents button in the Navigation bar in its selected state.
�topToolbarLogo.png. Image positioned in the center of the top Toolbar (typically a logo). Needs to be maximum 45 pixels high; the width is variable, but the other icons in the top Toolbar should be taken into account.
This image is not provided by default; adding an image into the Toolbar folder
and named topToolbarLogo.png automatically adds it to the top Toolbar.
6.4.5 Colors
The following Navigation bar colors can be customized:
�Application toolbar. The color of the Navigation bar.
Chapter 07 Customizing the iPad Reader App
119iP
ad
6.5 Flipview
The Flipview appears when the user taps the Contents button in the Navigation bar. It shows the Flipview Header, the Story Viewer / Page Viewer, the Page Scrubber (optional), and the Section Viewer (see figure below).
Figure 6.5. The Flipview appears when tapping the Contents button in the Navigation bar
A Flipview Header B Story Viewer / Page Viewer C Page scrubber D Section Viewer
B
D
C
A
The appearance of the Flipview can be modified by changing any of the following:
�Assets �Color �Fonts �Header �Thumbnail size �Thumbnail awareness �Margins �Story title �Story bullets �Story description �Page scrubber
Each is explained in the following sections.
Chapter 07 Customizing the iPad Reader App
120iP
ad
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:
images folder �transparentImageForFlipviewButton.
png. Image used for the selected status of a thumbnail in the Flipview.
images/Flipview folder �flipviewBackground.png. The background
image of the Flipview. Dimensions: This asset needs to be 1024 pixels wide. The height depends on the size of the thumbnails that are being used.
�flipviewBullet.png. Asset shown before the story name. This asset needs to be 9 pixels wide and 9 pixels high.
�flipviewCloseButton.png. The close but-ton. This asset needs to be 21 pixels wide and 21 pixels high.
�flipviewSectionBackground.png. The background image for the Sections viewer. This asset needs to be 23 pixels high.
�flipviewSelectedSectionButton.png. This asset shown when a Section is selected in the Section viewer. This asset needs to be 1 pixel wide and 23 pixels high.
�pageScrubberBackground.png. The background image behind the Page Scrubber. This asset needs to be 1024 pixels wide and 37 pixels high.
�pageScrubberButton.png. The Page Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.
�pageScrubberTrackLeft.png. The image to the left of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.
�pageScrubberTrackRight.png. The image to the right of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pix-els high. 10 Pixels of each side will remain the same, but the middle section will stretch.
Chapter 07 Customizing the iPad Reader App
121iP
ad
Figure 6.5.1. The Flipview assets
C
BA
D E F G H
A Flipview background B flipViewCloseButton C flipviewBullet D flipviewSectionBackground E pageScrubberTrackLeft F pageScrubberButton G pageScrubberTrackRight H flipviewSelectedSectionButton
Chapter 07 Customizing the iPad Reader App
122iP
ad
6.5.2 Colors
The following Flipview colors can be customized:
�Flipview background color. The color of the Flipview background, shown behind the story previews. To get a transparent color, set an alpha value lower than zero.
�Flipview text. The color of the Flipview header and issue description shown at the top.
�Flipview section text color. The color of the text in the Section viewer.
�Flipview section text color selected. The color of the text in the Section viewer in its selected state.
�Flipview story name color. The color of the Story title below the story preview.
�Flipview story Description color. The color of the story description below the story preview.
�Flipview empty thumb border. Color of the border for an empty thumbnail in the Page Viewer / Story Viewer.
When the progressive download functionality is used, download information is also displayed in the Flipview in the form of progress bars and text labels. For more information about customizing these components, see section 9.7.2 Progressive Downloading.
6.5.3 Fonts
For an explanation about how to change the color of the fonts and how to assign custom fonts, see
section 3.3 Fonts.
The following Flipview fonts can be customized:
�Flipview title font. Font settings for the Story Viewer / Page Viewer title.
�Flipview story name font. The font of the story name/title in the Flipview.
�Flipview story description font. The font of the story description in the Flipview.
When the progressive download functionality is used, download information is also displayed in the Flipview in the form of progress bars and text labels. For more information about customizing these components, see section 9.7.2 Progressive Downloading.
Chapter 07 Customizing the iPad Reader App
123iP
ad
6.5.4 Header
The Flipview Header contains the following components (see figure below):
�Flipview title. For displaying the title of the magazine. This can be modified by changing the following string in the Localizable.strings file:
/* The flip view name that is displayed */"Flip view" = "FLIP VIEW";
�Issue description. For displaying issue information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server. The font can be cus-tomized by modifying the following setting in the DMSettings.plist file:
�Fonts/Issue description font
�Close button. For closing the Flipview. Changing the look of this button can be done by modifying the following asset:
�Flipview/flipViewCloseButton.png
Figure 6.5.4. The Flipview Header can be used to display additional information about the magazine
A Flipview title B Issue description C Close button
A B C
For an overview of the exact dimensions of this asset, see appendix C, Image Dimensions.
Showing or hiding the Flipview header contentThe Flipview Header components can be hidden by dese-lecting the following option in the DMSettings.plist file:
�Flipview/Show flipview header
Changing the text colorThe following Flipview Header colors can be customized:
�Flipview text. The color of the Flipview header and issue description shown at the top.
Chapter 07 Customizing the iPad Reader App
124iP
ad
6.5.5 Thumbnail Size
The size of the thumbnails can be controlled via the fol-lowing settings in the DMSettings.plist file:
�Flipview/Thumbs/Minimum page thumb height
�Flipview/Thumbs/Maximum page thumb height
To change the thumbnail size, enter the required size in pixels for each setting.
These settings are directly linked to the thumbheight setting as part of the DigitalMagazineDevice Server
feature in the configserver.php file. (See the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration – Step 1.2 Configuring configserver.php). Verify both set-tings to make sure that the expected result is acquired.
6.5.6 Thumbnail Awareness
By default, the thumbnails in the Story Viewer / Page Viewer are shown in landscape orientation, even when the device is rotated to portrait orientation.
Matching the orientation of the thumbnails to the orienta-tion of the device can be done by setting the following DMSetting to Yes:
�Flipview/Thumbs/Make thumbs orientation aware
With this setting enabled, thumbnails in portrait orientation are shown when the device is rotated to portrait mode and thumbnails in landscape orientation are shown when the device is rotated to landscape mode.
6.5.7 Margins
The margins between each image and the margins between the images and the Flipview Header can be con-trolled by the following settings in the DMSettings.plist file:
�Flipview/Margins/Pages top margin in Flipview
�Flipview/Margins/Flipview thumb margin
To change the margins, enter the required size in pixels for each setting.
Chapter 07 Customizing the iPad Reader App
125iP
ad
6.5.8 Story Title
Below the first page of each story, the Story Title can be shown.
This is especially useful when the Reader App is configured for Page Navigation (see section 6.1
Story vs Page Navigation). The story title is displayed below the first page of each story and is therefore a clear indication of where each story starts.
The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier proper-ties can be done by using Content Station or Smart Connection for InDesign.
Figure 6.5.8. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
A Story Title property B Story title displayed in Reader
A
B
6.5.9 Story Bullets
A story bullet can be shown in front of each story title.
Figure 6.5.9. The story bullet in the Flipview
A
A Story bullet
Story bullets are displayed by default and can be hidden by setting the following DMSettings to No:
�Flipview/Show story bullet
For an overview of the exact dimensions of this asset, see appendix C, Image Dimensions.
Changing the appearanceChanging the appearance of the Story bullet can be done by modifying the following asset:
�Flipview/flipviewBullet.png
Chapter 07 Customizing the iPad Reader App
126iP
ad
6.5.10 Story Description
Below each story title a short description can be dis-played as a further indication of what the story is about.
To enable this feature, set the following option in the DMSettings.plist file to Yes:
�Flipview/Show story description
The text that is displayed is taken from the Description property of a Dossier. Accessing the Dossier proper-ties can be done by using Content Station or Smart Connection for InDesign.
Figure 6.5.10. The Description property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
A Description property B Description displayed in Reader
A
B
Chapter 07 Customizing the iPad Reader App
127iP
ad
6.5.11 Page Scrubber
When the Reader App is configured for Page Navigation (see section 6.1 Story vs Page Navigation), it is advisable to offer the user the use of the Page Scrubber: a slider with which the user can quickly scroll through the pages of the Page Viewer.
Figure 6.5.11. The Page Scrubber can be used to quickly scroll through the pages of the magazine
A Page scrubberA
The Page Scrubber can be enabled by setting the follow-ing DMSettings to Yes:
�Flipview/Page scrubber enabled
Changing the appearanceChanging 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.
�pageScrubberButton.png. The Page Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.
�pageScrubberTrackLeft.png. The image to the left of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.
�pageScrubberTrackRight.png. The image to the right of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pix-els high. 10 Pixels of each side will remain the same, but the middle section will stretch.
Chapter 07 Customizing the iPad Reader App
128iP
ad
6.6 Top Toolbar
Customizing the top Toolbar can be done by changing the following:
�Availability. Enabling or disabling the top Toolbar.
�Visibility. Only show the top Toolbar bar when the user taps the screen, or always have it visible.
�Tap area. The area which the user should tap in order to display the top Toolbar.
�Items. The number of buttons and images that appear in the top Toolbar.
�Assets. The icons of the buttons and images.
�Colors. The color of the top Toolbar.
Each is explained in the following sections.
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
Chapter 07 Customizing the iPad Reader App
129iP
ad
6.6.2 Visibility
By default, the top Toolbar only appears when the user taps any part of the screen (see section 6.6.3 Tap Area).
The top Toolbar can also be made to permanently display by setting the following option in the DMSettings.plist file to Yes:
�Navigation/Top toolbar always on
Note that the top Toolbar obscures the top 48 pixels of the page content. When making use of this fea-
ture, inform your designers so that no content or functionality (such as Hotspots, links, Web Elements, etc) is placed in that area.
6.6.3 Tap Area
By default, the top Toolbar appears when the user taps any part of the screen.1
The tap area can be limited to the bottom part of the screen by doing the following:
�In the Hotzones section of the DMSettings.plist file, make the following changes:
�Set the option Tap bottom to show toolbar to Yes.
�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom area height value.
1 The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
Chapter 07 Customizing the iPad Reader App
130iP
ad
6.6.4 Items
The top Toolbar can hold the following items:
�Back/Forward buttons. For navigating to previously visited pages
�TOC List button. For displaying the TOC List.
�Audio Control button. For displaying the Audio Control.
�Bookmarks List button. For displaying the Bookmarks List.
�Image icon. Typically used for displaying a logo.
�Share Content button. For displaying the Share Content list.
Figure 6.6.3. The components of the top Toolbar
A B C D E F G
A Back button B Forward button C TOC List buttonD Audio control button E Bookmarks List button F Image icon G Share content button
The inclusion of most buttons is controlled by enabling/disabling specific settings in the DMSettings.plist file:
�Back/Forward buttons: are included by default, but can be included in the Navigation bar instead by setting the following setting to Yes:
�Navigation/History buttons in bottom toolbar
�TOC List. Included by default, cannot be disabled.
�Audio Control button. Included by setting the following setting to Yes:
�Navigation/Enable audio control in toolbar
�Bookmarks List button. Included by setting the following setting to Yes:
�Navigation/Enable bookmarks in toolbar
�Share Content button. Included by setting the following setting to Yes:
�Share toolbar/Enable share toolbar
The logo in the center of the toolbar is added by adding an image named topToolbarLogo.png into the images/Toolbar folder.
Chapter 07 Customizing the iPad Reader App
131iP
ad
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 Back button image. Needs to be 50 pixels high.
�Toolbar/backSelectedIcon.png. The icon for the Back button image in its selected state. Needs to be 50 pixels high.
�Toolbar/forwardIcon.png. The icon for the Forward button image. Needs to be 50 pixels high.
�Toolbar/forwardSelectedIcon.png. The icon for the Back button image in its selected state. Needs to be 50 pixels high.
Right-to-left supportWhen the Reader App is enabled for right-
to-left support, the assets for the Back and Forward buttons need to be switched, else the direction of the arrow in the images is wrong. For more information, see section 6.3 Right-To-Left Support.
�Toolbar/tocTableIcon.png. The icon for the TOC List button.
�Toolbar/tocTableSelectedIcon.png. The icon for the TOC List button in its selected state.
�Audio Popup/audioTopBarIcon.png. The icon for the Audio Control button when no audio is available.
�Audio Popup/audioTopBarSelected-Icon.png. The icon for the Audio Control button in its selected state (when audio is being played).
�Bookmark Popup/bookmarkTopBarIcon.png. The icon for the Bookmark List button.
�Bookmark Popup/bookmarkTopBarSe-lectedIcon.png. The icon for the Bookmark List button in its selected state.
�topToolbarLogo.png. Image positioned in the center of the top Toolbar (typically a logo). Needs to be maximum 45 pixels high; the width is variable, but the other icons in the top Toolbar should be taken into account.
This image is not provided by default; adding an image named topTool-
barLogo.png into the Toolbar fo lder automatically adds it to the top Toolbar.
�Share Popup/shareTableIcon.png. The icon for the Share Content button.
�Share Popup/shareTableSelectedIcon.png. The icon for the Share Content button in its selected state.
Chapter 07 Customizing the iPad Reader App
132iP
ad
6.6.6 Colors
The following top Toolbar colors can be customized:
�Application toolbar. The color of the top Toolbar.
6.7 Hotzones
Hotzones are areas to the left, right, and bottom of the screen which can be tapped in order to navigate the magazine.
Figure 6.7. Hotzones (shaded in red) are specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page
The following areas are defined:
�Left area: for navigating to the previous page (or the next page when the Reader App is set to Right-to-left mode)
�Bottom area: for bringing up the Navigation bar.
�Right area: for navigating to the next page (or the previous page when the Reader App is set to Right-to-left mode)
Chapter 07 Customizing the iPad Reader App
133iP
ad
Each area can be controlled by the following options in the DMSettings.plist file:
�Hotzones/Tap bottom to show toolbar. Activates the bottom Hotzone.
�Hotzones/Tap sides to navigate. Activates the Hotzones to the left and right of the screen.
�Hotzones/Touch areas. Defines the height or width of the different Hotzones.
6.8 Gestures
Navigating from one page or story to another can be done by using finger gestures. Depending on the configura-tion of the Reader App (see section 6.1 Story vs Page Navigation), one or two fingers can be used:
Horizontal navigation �One-finger swipe. Works when the Reader
App has been configured for story navigation as well as for page navigation:
�Story navigation: takes the reader to the next or previous story.
�Page navigation: takes the reader to the next or previous page.
�Two-finger swipe. Works only when the Reader App has been configured for page navi-gation; it takes the reader to the next or previous story.
Vertical navigation �One-finger swipe. Works when the Reader
App has been configured for story navigation only:
�Page navigation: takes the reader to the next or previous page.
Chapter 07 Customizing the iPad Reader App
134iP
ad
7. The Store
The iPad Reader App makes use of the HTML Store. For more information, see appendix G, Customizing the HTML Store.
On the Reader App side, customization is done in the following two areas:
�Communication with the HTML Store
�General Store features
Each is explained in the following sections.
7.1 Communication With the Store
Communication with the Store is done by configuring the DMSettings file and the DigiMagKioskSettings file.
DMSettings fileThe following DMSettings can be configured:
�Store/HTML Store URL: The URL pointing to index-ios.html of the HTML Store.
Note the inclusion of the OS reference in the file name. This allows for different set-
tings and styling per OS (Android, iOS, etc.
�Store/HTML Store fallback URL: The URL pointing to a local HTML file. This file is loaded when the HTML Store is not accessible.
Possible values:
�Blank: if a packaged HTML Store as part of the Reader App build is used it is not needed to define a fallback page.
�URL: The URL pointing to a local HTML file. This file is loaded when the external Web Store is not accessible.
Chapter 07 Customizing the iPad Reader App
135iP
ad
DigiMagKioskSettings FileConfiguration settings are controlled by the following set-tings in the Classes/DigiMagKioskSettings.h file:
�DigiMagKioskLibrary_URL. The URL to connect to the Kiosk Server.
This URL needs to end with: “/json-rpc/”.
�DigiMagKioskLibrary_ProductID. The product name as defined on the Kiosk Server.
�DigiMagKioskLibrary_SecretKey. The secret key as defined on the Kiosk Server.
�DigiMag_ApplicationVersion. The applica-tion version. This can be used to exclude an issue on the Kiosk Server side. This version number needs to be higher or equal to the issue version defined in the Kiosk Server, else the issue cannot be downloaded.
�DigiMag_MagazineCode. Reserved for a future version.
�DigiMag_ProductServerManagerClass-Name. (Used for custom development, do not change.) Responsible for buying and display-ing all issues in the Store. This class takes care of connecting to iTunes and taking care of the payments.)
�DigiMag_ContentServerManagerClass-Name. (Used for custom development, do not change.) Takes care of delivery of all content (issues and movies).
7.2 General Store Features
DMSettingsGeneral Store settings are controlled by the following set-tings in the DMSettings.plist file:
�Navigation/Always open in store. Allows to always have the Store opened when the Reader App is launched.
�Store/Resumable downloads. Enables the user to resume a download when it has been interrupted.1
�Store/Default to gridview in store. Defines if the Reader App should start the Store in Grid view or Single Issue view.
�Store/Enable filter. Enables a filter in the Store view, allowing the Reader App to fil-ter issues as defined by the filter data on the Content Delivery Platform.
�Store/Enable 3G Downloading. Enables downloading via a 3G network.
�Store/Enable Filter. Enables or disables the Store Filter.
1 In order for this feature to work, the content server needs to support the optional HTTP Range header. (The WoodWing hosted solution supports this feature.) When unsure whether a content server supports resumable downloads, leave this fea-ture disabled.
Chapter 07 Customizing the iPad Reader App
136iP
ad
Localizable stringsThe following string can be customized for the Store Filter:
�All Issues. The value in the Store Filter for choosing all issues.
The values shown in the Filter itself are defined on the Content Delivery Platform.
For more information, see appendix F, Using the Content Delivery Platform.
8. The Library
The Library is used for showing the user their available issues (those that have been downloaded and/or those that are part of a subscription).
The Library functionality is only available in the Pro, Framework, Subscription, and Apple Subscription
projects of the Reader App.
Customizing the Library can be done by changing the following:
�General appearance
�Download settings
�Back to Issue button
�Library Filters
�Subscription sign-in functionality
Each is described in the following sections.
Chapter 07 Customizing the iPad Reader App
137iP
ad
8.1 General Appearance
The general appearance of the Library can be customized by changing assets, colors, text, and fonts, as explained below.
AssetsPart of the Library assets are the same ones used for the Store, although some are specific to the Library itself.
The following assets can be customized (for examples, see figures on the next pages).
For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
�segments_shadow.png. The shadow between the top and bottom part of the Segments Overview page.
�segments_stack_background.png. The icon for an issue on the Library page, indicating that the issue contains Segments.
�closeButtonDefaultState.png. The image used for closing or deleting a component.
�Store/headerBarShadow.png. The shadow as shown below the Library toolbar.
�Store/issueShadow.png. The shadow below the issue covers.
�Store/libraryEmptyShelf.png. Used when there are no further shelves to show. .
�Store/libraryFirstShelf.png. The first shelf in the Store Library view.
�Store/libraryShelf.png. The remaining of the shelves in the Store Library view.
�Store/storeHeader.png. Used as the top bar in the store and library view. The 768 pixels in the middle are used when the device is in portrait mode. The whole image is visible when the device is in landscape mode.
�Store/storeNoInternetErrorBackground.png. Shown when no internet connection avail-able. The background is repeated across the whole width.
�Store/storeNoInternetErrorLabel.png. The label shown on top of the error background. It is aligned to the center. For the best results use a label with a transparent background.
Chapter 07 Customizing the iPad Reader App
138iP
ad
Figure 8.2a. The assets of the Library Overview page
A storeHeader B headerBarShadow C closeButtonDefaultState D segments�stack�background E issueShadow F libraryFirstShelf G libraryShelf
F
F
F
G
E
A
B
D
C
Note that the bottom section of the Library in figure 8.2a is a color (Library background color), and not
an image. For more information about Library colors, see section Colors.
Chapter 07 Customizing the iPad Reader App
139iP
ad
Figure 8.2b. The asset of the Library Segments Overview page
A segments�shadow
A
Note that the top and bottom section of the Library Segments Overview page in figure 8.2b are colors
and not an images. For more information about Library colors, see section Colors.
Chapter 07 Customizing the iPad Reader App
140iP
ad
ColorsThe following Library colors can be customized:
�Colors/Store colors/Library segment top background color. Background color for the top half of the Segments Overview page.
�Colors/Store colors/ Library segment bottom background color. Background color for the bottom half of the Segments Overview page.
�Colors/Store colors/ Library issue name color. The color of the issue name in the Library.
�Colors/Store colors/ Library downloaded bytes color. The color of the string that indi-cates the download progress in bytes.
�Colors/Store colors/ Library issue num-ber color. The color of the issue number in the Library.
�Colors/Store colors/ Library background color. The color of the Library background.
�Colors/Store colors/ Library download bar color. Color of the progressive download bar.
�Colors/Store colors/ Library issue down-load progress color. Color of the string that indicates the progress of the download.
�Colors/Store colors/ Library issue down-load status color. Color of the string that shows the status of the download.
FontsFor an explanation about how to change the color of the fonts and how to assign custom fonts, see
section 3.3 Fonts.
The following Library fonts can be customized:
�Library issue download progress font. The font of the download progress label in the Library.
�Library issue download status font. The font of the download status label in the Library.
�Available issues text font. The font of the ‘Available issues:’ text.
�Library issue name font. The font of an issue in the Library.
�Library downloaded bytes font. The font of the downloaded bytes label in the Library.
�Library issue number font. The font of the issue number in the Library.
Chapter 07 Customizing the iPad Reader App
141iP
ad
8.2 Text
The customizable Library strings can be found in the Store section of the Localizable.strings file.
8.3 Download Settings
The process of downloading an issue or Segment can be divided into the following stages:
�Downloading �Installing �Opening
DownloadingWhen the non-progressive download method is used (not enabled by default, for more information see (section 9.7.2 Progressive Downloading), the following feature can be configured in the DMSettings.plist file:
�Library/Show progress in megabytes. By default, the download progress is shown in percentages. To display it in megabytes, select this option.
InstallingAs of version 1.8, the non-progressive download process will always display the installation progress.
The fo l lowing DMSetting has therefore been discontinued:
�Library/Enable install progress
OpeningTo have an issue or Segment open automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads), enable the following DMSetting:
�Library/Auto open magazine
Chapter 07 Customizing the iPad Reader App
142iP
ad
8.4 Back To Issue Button
The Back To Issue button in the Library can be enabled/disabled by means of the following DMSetting:
�Navigation/Back to issue button
8.5 Library Filters
Filters can be added to the Library to allow the user to for instance filter the Library content to only display issues of a particular language, magazine type, etc.
Two types of filters exist:
�Library Filter. For filtering the Library on a high level, for instance by language.
�Library Segment filter. For filtering the Library on a more granular level, for instance on magazine type.
Figure 8.3. The Library filter allows a user to filter the Library by defined keywords
B
A
A Filter button B Filter list
Chapter 07 Customizing the iPad Reader App
143iP
ad
To enable the filters in the Library, set the following DMSettings to Yes:
�Library/Enable library filter
�Library/Enable library segment filter
The values shown in the Filter itself are defined on the Content Delivery Platform. Note that the content
of the Store filer (see section 9.16 Store Filter) is used as the source for the Library filter. For more information, see appendix F, Using the Content Delivery Platform.
Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:
�Upload your magazine content as a Segment using the WoodWing Content Delivery Platform and on the Segment Details screen, choose the keyword which should be assigned to the magazine.
For example: when a filter has been set up for distinguishing sports and finance publications, choose Sports from the available list when uploading publications relating to sports, and Finance when uploading publications relating to finance.
Changing the textThe customizable Library Filter strings can be found in the Store section of the Localizable.strings file.
Chapter 07 Customizing the iPad Reader App
144iP
ad
8.6 Subscription Sign-in
How to modify the Subscription sign-in functionality in the Library is explained in section 9.17.2 Modifying the Reader App Appearance.
9. General App Features
The Reader App functionality can be further enhanced by customizing the following features:
�APIs �Audio �Bookmarks �Content Sharing �Custom Home page �Custom Objects �Downloading methods �Fullscreen Overlay �iOS 5 iCloud support �Libraries �Newsfeeds �Newsstand (iOS 5) �Push notifications (messages) �Slide shows �Store filter �Subscriptions �Text View �TOC List �Video �Web Elements
Each feature is explained in the following sections.
Chapter 07 Customizing the iPad Reader App
145iP
ad
9.1 APIs
APIs can be used to add additional functionality to the Reader App. Currently it is possible to implement the fol-lowing APIs:
�Analytics API. For gathering information about how a user uses the Reader App.
�Gestures API. For receiving and controlling gestures sent from the Reader App.
�Navigation API. For creating their user interface components with data fetching and navigational functions.
Each is described in the following sections.
9.1.1 Analytics API
The Analytics feature of the Digital Magazine Reader App can be used for logging events such as browsing to new sections, buying an issue, launching/exiting the app, and more.
Analytics modules can be used as an interface to receive these events. Omniture is the default analytics module that has been implemented in the Reader App. To use other analytics frameworks—such as Google Analytics or Flurry—a custom analytics module needs to be developed.
For detailed instructions about how to integrate the default Omniture module into the Reader App, see appendix K, Omniture Integration.
Chapter 07 Customizing the iPad Reader App
146iP
ad
9.1.2 Gestures API
The External Gesture API contains functions to receive and control gestures sent from the Reader App. It also allows for adding custom gestures to the app that your classes can respond to.
GesturesThe Gesture Manager singleton acts as the interface between the app and the external code and contains functions for managing gesture delegates. These dele-gates will be notified when an gesture has occurred in the app. Delegates must conform to the supplied protocol.
Delegates can also indicate via the appropriate protocol methods whether they are able or willing to handle a par-ticular gesture and if they want to block the propagation of the gesture to the navigation or object elements in the Reader App.
It is also possible to add custom gestures to the Gesture Manager. Currently the Reader App only supports a single tap and a long tap. When another gesture is needed it is possible to add it via the Gesture Manager. Note however that the delegate, target and action of the supplied ges-ture will be reset by the Gesture Manager.
All gestures are routed through the Gesture Manager, it is not possible to receive them directly.
For an overview of the available classes, see appendix I, Gestures API.
9.1.3 Navigation API
The Navigation API gives access to the core Reader App navigation functions.
With this API it is possible to navigate to the various com-ponents of the magazine (sections, stories and pages). It also provides feedback on several key changes in the state of the Reader App. These include loading the issue, page changes, and orientation changes.
The data API provides access to the underlying data of the reader for use in an external user interface. The data is wrapped in an issue object that contains several con-venience methods to access the data structure.
For an overview of the API structure, see appendix J, Navigation API.
DataThe Data Manager singleton holds a reference to the cur-rent issue (the issue that is currently loaded in the Reader app).
The issue object is the main entry point for querying the data structure. It contains methods to fetch lists of sec-tions, stories and pages.
An issue contains one or more stories, each holding up to two sets of pages: one with pages in landscape ori-entation and one with pages in portrait orientation. Each layout always contains one page. However sometimes no portrait layout has been provided. In those situations, the first landscape page is returned when the portrait page is requested.
The correct set of pages for the current layout should be queried. This orientation can be obtained
from the Navigation Manager.
The story and page objects also contain references back to their parent (issue and story respective). These can be used to navigate back in the data chain.
Chapter 07 Customizing the iPad Reader App
147iP
ad
NavigationThe Navigation Manager singleton contains methods that enables you to navigate through the currently loaded magazine. It provides methods to navigate to pages, sto-ries and sections. It also provides an interface to the back and forward functions of the Reader App.
The Navigation Manager also provides access to the cur-rent state of the Reader App such as the current layout orientation and the current visible page.
A delegate can be added to the Navigation Manager. This delegate must adhere to the Navigation Manager proto-col. When added, this delegate will be notified when an issue loads, a page change is done, and when the layout orientation changes.
For an overview of the available classes, see appendix J, Navigation API.
9.2 Audio
For the playback of audio, the following features can be customized:
�Overlay assets
�Embedded audio controls
�Audio control pop-up
Each is described in the following sections.
Chapter 07 Customizing the iPad Reader App
148iP
ad
9.2.1 Overlay Assets
Overlay assets are icons that appear over other objects to indicate their intention or state. For audio, icons are available to indicate that an audio file can be played or stopped.
A audioPlayEnabledIcon
Figure 9.2.1. The audio play enabled icon
A
The audio assets are stored in the Overlays/Audio folder.
The following assets can be customized.
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.
�audioPlayEnabledIcon.png. The audio icon shown when the audio file is not being played.
�audioStopEnabledIcon.png. The audio icon when the audio file is being played.
9.2.2 Embedded Audio Controls
By default, the controls for an embedded audio file are always displayed. If needed, the controls can be hidden for each individually placed audio file.
In order to give the user control over the playback of the audio file, enable the Audio Control pop-up
(see section 9.2.3 Audio Control Pop-Up).
To hide the controls for a placed audio file, edit the exported magazine.xml file as follows:
Step 1. Open the exported magazine.xml file in a plain-text editor.
Step 2. Locate the created audio object by searching for <type>audio</type>.
Step 3. In the audio id section, add the follow-ing property:
<backgroundaudio>true</backgroundaudio>
Possible values: �true: controls will be hidden �false: controls will be shown1
Example:<object>
<id>95</id><type>audio</type><x>63</x><y>573</y><width>35</width><height>31</height><audio id=”95”>
<url>images/story_23/audio_95.mp3</url><autoplay>false</autoplay><backgroundaudio>true</backgroundaudio>
</audio></object>
1 The controls are also shown when the backgroundaudio prop-erty is not included
Chapter 07 Customizing the iPad Reader App
149iP
ad
9.2.3 Audio Control Pop-Up
When the playback of an audio file has been started (either manually or automatically), the Audio Control fea-ture can be used to control the playback.
The Audio Control feature consists of an Audio Control button in the top Toolbar and the Audio Control pop-up which itself contains the following components:
�Control pop-up header. The header of the Audio Control pop-up.
�Audio title. Title of the song being played.
�Audio description. Short description of the song being played.
�Stop/Play button. Button for stopping/restarting the playback.
�Slider. For scrolling through the file. (Works for embedded audio files only, not for files streamed from the Web.)
Figure 9.2.3a. The Audio Control pop-up components
C
B
A
D
E F
A Audio Control button B Header C Audio title D Audio description E Stop/Restart button F Slider
The implementation of this feature involves the following steps:
�Enabling the functionality
�Changing the assets
�Localizing the text
�Adding the audio title and description
Each step is explained in the following paragraphs.
Enabling the FunctionalityThe Audio Control functionality is controlled by means of the following settings in the DMSettings.plist file:
�Navigation/Enable audio control in toolbar. Makes the Audio Control button avail-able in the top toolbar.
�Navigation/Enable top toolbar. Enables the top Toolbar.
Chapter 07 Customizing the iPad Reader App
150iP
ad
Changing the AssetsThe 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 image for the Audio Control.
�audioControlDisabled.png. The icon for the button when no audio has been loaded.
�audioControlPlay.png. The Play icon for the button in the top Toolbar.
�audioControlSliderBGDark.png. The image to the right of the Control Slider button.
�audioControlSliderBGLight.png. The image to the left of the Control Slider button.
�audioControlSliderButton.png. The icon for the Control Slider button.
�audioControlStop.png. The icon for the Stop button in the Audio Control.
�audioTopBarIcon.png. The icon for the Audio Control button in the top Toolbar when no audio is available.
�audioTopBarSelectedIcon.png. The icon for the Audio Control button in the top Toolbar in its selected state (when audio is being played).
Figure 9.2.3b. The Audio Control assets
A
B
C FD E
A audioTopBarSelectedIcon B AudioControlBGC audioControlPlay D audioControlSliderBGLightE audioControlSliderButton F audioControlSliderBGDark
Chapter 07 Customizing the iPad Reader App
151iP
ad
Localizing the TextThe customizable Audio Control strings can be found in the Audio Control section of the Localizable.strings file.
Adding the Audio Title and DescriptionTo add the Audio Title and Audio Description to the Audio Control, the exported magazine.xml file needs to be edited as follows:
Step 1. Open the exported magazine.xml file in a plain-text editor.
Step 2. Locate the created audio object by searching for <type>audio</type>.
Step 3. In the audio id section, add the follow-ing 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>
Chapter 07 Customizing the iPad Reader App
152iP
ad
9.3 Bookmarks
A Bookmarks List button can be made available in the top Toolbar for providing users access to the Bookmarks List. The Bookmarks List allows users to bookmark one or more stories in order to easily return to these stories at any stage.
The Bookmark functionality consists of the following components:
�A button in the top Toolbar with which the Bookmarks List can be displayed.
�A Bookmark List for bookmarking stories and for managing created Bookmarks.
Implementing of this feature involves the following steps:
�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.
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.
�Navigation/Enable top toolbar. Enables the top Toolbar.
Chapter 07 Customizing the iPad Reader App
153iP
ad
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 Bookmark button in the Bookmark List.
�bookmarkTopBarIcon.png. The icon for the Bookmark List button in the top Toolbar.
�bookmarkTopBarSelectedIcon.png. The icon for the Bookmark List button in the top Toolbar in its selected state.
Figure 9.2.3. The Bookmark assets
B
A
A bookmarkTopBarSelectedIcon B bookmarkAdd
Chapter 07 Customizing the iPad Reader App
154iP
ad
9.3.3 Changing the Colors
The following Bookmark colors can be customized:
�Bookmark selected row color. Color of the selected row in the Bookmark List.
9.3.4 Changing the Fonts
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 issue title.
�Bookmark cell story title font. Font of the story title.
�Bookmark cell story description font. Font of the story description.
Chapter 07 Customizing the iPad Reader App
155iP
ad
9.3.5 Localizing the Text
The customizable Bookmark strings can be found in the Bookmarks section of the Localizable.strings file.
9.3.6 Changing the Dimensions
The dimensions of the Bookmarks List are controlled by the following DMSettings.plist options:
�Bookmark Popup/Popup height. Controls the height of the Bookmark List.
�Bookmark Popup/Popup width. Controls the width of the Bookmark List.
Chapter 07 Customizing the iPad Reader App
156iP
ad
9.4 Content Sharing
The Content Sharing functionality allows the user to share specific content with others by sharing the content via Twitter, Facebook, or e-mail.
The following content can be shared:
�Page. Either the currently visible part of the page or the thumbnail of the page as shown in the Story Viewer / Page Viewer.
�Part of a page. A manually defined part of a page.
�URL. A link to an external Web site, typically holding information related to the story.
The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar.
Enabling the use of this feature involves performing the following steps:
�Adding a custom metadata property to Enterprise server
�Configuring the DigiMagSettings.h file
�Cleaning the project targets
�Enabling the functionality
�Changing the assets
�Changing the colors
�Localizing the text
Each step is explained in the following sections.
9.4.1 Adding Custom Metadata
(This step is optional and only has to be performed when URLs are to be shared.)
For each story (Dossier), one Hyperlink can be made available for sharing. This is done by creating a Hyperlink object and setting its intent property to Shared Article. (For more information about creating a Hyperlink object for sharing purposes, see chapter 5, Creating Content – section 5.11, Creating Shared Content.)
The intent property is a custom property in Enterprise. For instructions about adding this property to the sys-tem, see the Enterprise 7 Admin Guide, chapter 40 Digital Magazine Configuration – section 1.6 Adding Custom Metadata.
Chapter 07 Customizing the iPad Reader App
157iP
ad
9.4.2 Configuring the DigiMagSettings.h File
Access to the various services is achieved by the use of API keys. Check with the relevant service provider how to get hold of an API key for that service.
Access information to the various services is kept in the Classes/DigiMagSettings.h file of the project.
�bit.ly: Used for inserting a shortened version of the URL in Twitter messages. Change the login and key with the retrieved information from bit.ly:
NSString* bitlyLogin = @"login"; NSString* bitlyAPIKey = @"key";
Currently, only bit.ly is supported for this feature.
�Facebook: change the AppID, apiKey and appSecret with the retrieved information from Facebook:
NSString* facebookAppID = @"appID";NSString* facebookAPIKey = @"apiKey";NSString* facebookAppSecret = @"appSecret";
�Twitter: change the key and secret with the retrieved information from Twitter:
NSString* twitterOAuthConsumerKey = @"key";NSString* twitterOAuthConsumerSecret = @"secret";
�TwitPic: change the secretkey with the retrieved information from TwitPic:
NSString* twitPicAPIKey = @"secretkey";
�E-mail: no settings are provided; the default e-mail account on the iPad is used.
9.4.3 Cleaning the Project Targets
Clean the project targets of the Xcode project by choosing the Clean All Targets command from the Build menu and follow the instructions.
Chapter 07 Customizing the iPad Reader App
158iP
ad
9.4.4 Enabling the Functionality
The Share Content functionality is controlled by means of the following settings in the DMSettings.plist file:
�Share toolbar/Enable partial page shar-ing. Enables/disables the functionality of sharing a part of a page.
�Share toolbar/Share page. Controls the functionality of sharing the full page. Possible values:
�none. Disables the functionality.
�full. A screenshot is made of the full screen, showing the page in its current view.
�thumb. A thumbnail of the page is shared. (These are the thumbnails as avail-able for the Flipview.)
�Share toolbar/Enable share toolbar. Enables/disables the Share Content button in the top toolbar.
�Share toolbar/Enable twitter. When enabled, the Twitter service is available as an option in the Share Content list.
�Share toolbar/Enable facebook. When enabled, the Facebook service is available as an option in the Share Content list.
�Share toolbar/Enable email sharing. When enabled, the email service is available as an option in the Share Content list.
�Navigation/Enable top toolbar. Enables/disables the top Toolbar.
9.4.5 Changing the Assets
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 Facebook service when it is available.
�shareFacebookDisabled.png. The icon for the Facebook service when it is not available.
�shareMail.png. The icon for the e-mail ser-vice when it is available.
�shareMailDisabled.png. The icon for the e-mail service when it is not available.
�sharing_corner_selected.png. The corner handle of the Area Selector in its selected state.
�sharing_corner.png. The corner handle of the Area Selector when not selected.
�sharing_mover_selected.png. The Move handle of the Area Selector in its selected state.
�sharing_mover.png. The Move handle of the Area Selector when not selected.
�shareTableIcon.png. The icon for the Share Content button in the top toolbar.
�shareTableSelectedIcon.png. The icon for the Share Content button in the top toolbar in its selected state.
�shareTwitter.png. The icon for the Twitter service when it is available.
Chapter 07 Customizing the iPad Reader App
159iP
ad
�shareTwitterDisabled.png. The icon for the Twitter service when it is not available.
�stretchablePostButton.png. The icon for the Post button in the Twitter and Facebook window.
Figure 9.4.6a. The Content Sharing List assets
B
C
D
A
A shareTableSelectedIcon B shareTwitterC shareFacebook D shareMail
Figure 9.4.6b. The Screen Selector assets
A
B
C
A sharing�corner B sharing�moverC sharing�corner�selected
9.4.6 Changing the Colors
The following Content Sharing colors can be customized:
�Page sharing table info text color. The title of the info page (the screen shown when the user needs to make a choice of sending a full page or part of a page).
�Page sharing table info color. The back-ground of the info page title area (the screen shown when the user needs to make a choice of sending a full page or part of a page).
Chapter 07 Customizing the iPad Reader App
160iP
ad
9.4.7 Localizing the Text
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";
Chapter 07 Customizing the iPad Reader App
161iP
ad
9.5 Custom Home Page
The Reader App can be embedded in another application (referred to as an external component) which acts as a shell. When opening the magazine, this shell will display first. From it you can deeplink into the Reader App via API calls to open the Store, the Store with preview, the Library, and the latest issue.
The following sections describe the required steps for implementing this feature.
9.5.1 Requirements
There are several requirements that need to be met before (and during) the integration of the external component can be implemented:
�The external component always needs to run full screen (with status bar).
�As much memory as possible needs to be freed up. When the external component is active (and as a result, the magazine content is not shown), there is no need to keep any images and or other visual data in memory.
�Device orientation notifications should be started early, preferably in the application delegate.
�A UIViewController should be used as a place-holder for the UIView’s that are returned by the API.
Chapter 07 Customizing the iPad Reader App
162iP
ad
9.5.2 Header Files
Implementing the external component can be done by using the following public header files:
�DMExternalDelegate.h. (For future imple-mentation) The protocol for asynchronous calls. Implement this protocol for receiving feedback from the DMExternal object.
�DMExternalIssue.h. (For future implemen-tation) The external representation of an issue object.
�DMExternal.h. This header file contains all the calls necessary to access the Digital Magazine component. It contains the following functions:
(DMExternalIssue *)lastDownloadedIssue;Not implemented at the time of writing.
(void)latestIssue; Not implemented at the time of writing.
(UIView *)openStore:(id)sender backSelector:(SEL)selector;Will return a UIView containing the Store in Grid view mode. The parameters ‘sender’ and ‘selector’ are both used as a way to return to the original application. The selector will be called upon the sender once the Reader App is done with the external component.
(UIView *)openStore:(id)sender backSelector:(SEL)selector withIssue:(DMExternalIssue *)externalIs-sue showPreviewPopup:(BOOL)showPreview;Will return a UIView containing the Store in single-issue view mode. The ‘externalIssue’ parameter is not used in this implementation. The parameters ‘sender’ and ‘selector’ are both used as a way to return to the original application. The ‘showPreviewPopup’ makes it possible to show the preview of the latest issue.
(UIView *)openLibrary:(id)sender backSelector:(SEL)selector;Will return a UIView containing the Library. The param-eters ‘sender’ and ‘selector’ are both used as a way to return to the original application.
(UIView *)openReader:(id)sender backSelector:(SEL)selector;Will return a UIView containing the reader. The component will continue with the latest downloaded issue.
(UIView *)openReader:(id)sender backSelector:(SEL)selec-tor withIssue:(DMExternalIssue *)externalIssue;Not implemented at the time of writing.
Chapter 07 Customizing the iPad Reader App
163iP
ad
9.5.3 Implementation
Below are a few implementation examples. We recom-mend to make the DMExternal and the UIView that results from the API calls ivars. This way they are more easily manageable.
Includes// external components#import <DigiMagLibrary/DMExternal.h>#import <DigiMagSharedLibrary/DMSLOrientationManager.h>
The DMSLOrientationManager, also a public header, is required to set the initial orientation state of the component.
CGRect frame = CGRectMake(0, 0, 768, 1004);[DMSLOrientationManager orientationManager].currentDeviceOrientation = UIDeviceOrientationPortrait;if( UIInterfaceOrientationIsLandscape(self.interfaceOrientation) ){ frame = CGRectMake(0, 0, 1024, 748); [DMSLOrientationManager orientationManager].currentDeviceOrientation = UIDeviceOrientationLandscapeLeft;}
It is most important to execute the code above first, before initializing the DMExternal object.
// create the digital magazine viewif( digitalMagazineExternal == nil )
digitalMagazineExternal = [[DMExternal alloc] init];
Next, create the DMExternal objec, and put it into the ivar.
digitalMagazineExternalView = [digitalMagazineExternal openStore:self backSelector:@selector(back)]; // set the calculated frame [digitalMagazineExternalView setFrame:frame]; // add the subview to the view [self.view addSubview:digitalMagazineExternalView]; [self.view bringSubviewToFront:digitalMagazineExternalView];
Chapter 07 Customizing the iPad Reader App
164iP
ad
Next, call the appropriate API call, and save the returning UIView into an ivar. After that, set the frame and add the subview to the view.
All the code above should be called each time a view is requested.
When the user is done, the ‘back’ selector will be called. The implementation should look as follows:
- (void)back{ // clean up the view [digitalMagazineExternalView removeFromSuperview]; digitalMagazineExternalView = nil; // clean up the controller [digitalMagazineExternal release], digitalMagazineExternal = nil;}
Here, the ivars are cleaned up and released. This should be done each time the back selector is called (to avoid memory leaks).
Additional notesBe sure to implement the following UIViewController del-egate in the parent view, so that the appropriate auto rotation callbacks are supported.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOri-entation { return YES;}
Chapter 07 Customizing the iPad Reader App
165iP
ad
9.6 Custom Objects
Objects with custom, 3rd-party functionality can be included in the magazine. The functionality of the ele-ment is completely upon the developer; it can be an extra user interface element, a list connecting to a database, a 3D object, etc.
The creation of a Custom Object on a layout starts by creating a Web Element; this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout.
Custom objects are added to the Digital Magazine project in XCode by doing the following
Step 1. Create a new class in the Reader App project.
Step 2. Include the following headers:
#import <DigiMagLiteLibrary/DMCustomObjectBase.h>
#import <DigiMagLiteLibrary/DMObjectTouchDelegate.h>
Step 3. Use the following class signature:
@interface YourCustomClass : DMCustomObjectBase <DMCustomObjectProtocol, DMObjectTouchDelegate>
Step 4. Implement the DMCustomObject-Protocol methods as listed in the table on the next page.
Step 5. (Optional) Implement the DMObject-TouchDelegate methods as listed in table 3b on the next page:
Table 3c on the next page shows the members that are available from the
DMCustomObjectBase.
Step 6. Create a plist resource file named DMCustomObjects.plist.
Step 7. In the created plist file, create an entry with the following settings:
�Value: your newly created class name,
�Key: a string you can use to refer to your class.
Step 8. In the magazine.xml file, create an entry for your custom object and set classtype to the key of the entry in the plist file.
For example:
<objects><object>
<type>custom</type><x>10</x><y>10</y><width>200</width><height>100</height><customobject>
<classtype>WWminimalObj</classtype><parameters><![CDATA[TestButton]]></parameters>
</customobject></object>
</objects>
Chapter 07 Customizing the iPad Reader App
166iP
ad
Table 9.6a. DMCustomObjectProtocol methodsMethod Function
(void)loadObjectCalled immediately after initialization. Can be used to initialize the custom objects own members. The viewControllers view is not yet available here.
(void)viewLoadedCalled after the viewControllers viewDidLoad method was invoked. Perform actions that depend on the controller view here.
(void)runCalled after all initialization and load events have occurred. Use this to do work in the custom object, such as starting timers.
(void)destroyCalled when the object is removed from the object stack of the page. This normally occurs when the user navigates to another page. Use this to do custom cleanup work. However also include the standard dealloc method to send the appropriate release calls.
Table 9.6b. DMObjectTouchDelegate methodsMethod Function(BOOL)gestureWillCancelNavigation: (UIGestureRecognizer *)gesture
When this method returns YES, the bottom Navigation bar will not pop up when the user taps the screen.
(BOOL)canHandleGesture: (UIGestureRecognizer *)gesture
Test if this object can handle the gesture. The standard imple-mentation is:if( CGRectContainsPoint([self.view bounds], [gesture locationInView:self.view]) ){ return YES; }else{ return NO;}
(void)handleGesture: (UIGestureRecognizer *)gesture
Here useful things with the gesture can be performed.
(BOOL)shouldHandleGestureExclusive: (UIGestureRecognizer *)gesture
When this method returns YES the gesture will not be propa-gated to underlying objects.
Table 9.6c. Available members from the DMCustomObjectBaseMethod Function
parametersString with the parameters from the XML file. Since this data can be anything it needs to be pro-cessed in the custom class.
objectFrame The frame of the object in the parent object view.
Chapter 07 Customizing the iPad Reader App
167iP
ad
9.6.1 Configuring Custom Objects
The current version of the Digital Magazine Tools does not yet have a fully developed user interface
for implementing a Custom Object in a magazine, and therefore requires manual steps to be performed after the magazine has been exported.
In case any Custom Objects are to be included in the magazine, perform the following steps:
Step 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 <type> proper ty to custom:
<type>custom</type>
Step 4. Add a <customobject> element as a child object of the custom property:
<objects><object>
<type>custom</type><x>33</x><y>78</y><width>132</width><height>153</height>
<customobject><classtype>WWminimalObj</classtype><parameters>
<![CDATA[TestButton]]></parameters>
</customobject></object>
</objects>
The <classtype> element refers to the key of the map-ping to the class in the DMCustomObjects.plist file. The <parameters> element holds parameters that can be optionally supplied.
Step 5. Repeat this process for all objects which should act as a Custom Object.
Chapter 07 Customizing the iPad Reader App
168iP
ad
9.7 Downloading Methods
Downloading of magazines can be offered in one of two ways:
�Non-progressive
�Progressive
Each is discussed in the following sections.
9.7.1 Non-Progressive Downloading
By default, the magazine is offered to the end user by means of the progressive download method (see section 9.7.2 Progressive Downloading) which allows the user to start reading part of the magazine while the remainder of the magazine is continued to be downloaded in the background.
Configuring this feature can be done by means of the following DMSettings.plist options:
�Store/Force non-progressive down-loads. Forces the Reader App to make use of the non-progressive download feature.
�Library/Enable install progress. Shows the step of unzipping the downloaded issue.
�Library/Show progress in megabytes. Shows the progress in megabytes.
Localizing the textThe customizable Downloading strings can be found in the Store section of the Localizable.strings file.
Changing colorsThe following non-progressive download colors can be customized:
�Library download bar color. Color of the download bar for an issue in the Library.
�Library issue download progress color. Color of the download progress bar in the Library.
�Library issue download status color. Color of the download status label in the Library.
Chapter 07 Customizing the iPad Reader App
169iP
ad
9.7.2 Progressive Downloading
The Progressive Download feature works out-of-the-box; the only configuration is related to the appearance of the various download bars and labels (see below).
If non-progressive downloads are required, see sec-tion 9.7.1 Non-Progressive Downloading.)
Changing the assetsThe following Progressive Download assets can be customized:
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 Download button.
�l ibraryDownloadRefresh.png. The Resume Download button.
Images/Overlays: �downloadFailedErrorLabel.png. The
image with the error message shown at the top of the page if the download failed. (Similar to the "No internet connection" message.)
�downloadFailedReloadButton.png. Button shown at the top of the page if the download failed. Tapping the button allows to re-download the issue.
�downloadFailedReloadButtonPressed.png. The downloadFailedReloadButton.png in its pressed state.
�progressiveDownloadOverlayBar.png. The overlay bar on the page that shows the download progress.
Changing the colorsThe following colors can be customized:
�Inpage downloading label color. Color of the Downloading label on a page.
�Downloading label color. Color of the Downloading label in the Page Viewer / Story Viewer.
�Percentage label color. Color of the down-load percentage label in the Page Viewer / Story Viewer.
�Inpage percentage label color. Color of the download percentage label on a page.
Changing the fontsThe following fonts can be customized:
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 the downloading label on a page.
�Downloading label font. The font of the downloading label in the Page Viewer / Story Viewer.
�Inpage percentage label font. The font of the percentage label on a page.
�Percentage label font. The font of the per-centage label in the Page Viewer / Story Viewer.
Changing the textThe customizable Progressive Download strings can be found in the Reader section of the Localizable.strings file.
Chapter 07 Customizing the iPad Reader App
170iP
ad
9.8 Fullscreen Overlay
A fullscreen Overlay window can be added to the Reader App in which content created with Objective-C can be displayed. The Overlay window is accessed through an additional button in the Navigation bar.
The process involves the following steps:
Step 1. Adding the settings file to the Reader App project and setting the required settings.
Step 2. Adding the Overlay window files to the Reader App project.
Step 3. Customizing the display properties for the Overlay window.
Step 4. Adding the Navigation bar button.
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 fol-lowing steps:
Step 1. Add the FullscreenOverlay.plist file from the sample code folder to the Resources folder of the project.
Step 2. (Optional) In the Value field, modify the classname value to match the name of the Controller.
Step 2. Adding the Overlay Window Files
The Overlay window files can be added to the Reader App project by doing the following:
�Add the View Files folder from the sample code folder to the Classes folder of the project.
Step 3. Customization
Further customization can be added by controlling how the Overlay window will be shown, its presentation style, alignment, auto-resizing mask, and visibility of the top Toolbar or Navigation bar.
Step 1. Access the fullscreenOverlay-Controller.h file located in Classes/View files.
Step 2. In the @interface section, add the code for customizing the above mentioned items.
Chapter 07 Customizing the iPad Reader App
171iP
ad
Step 4. Adding the Navigation Bar Button
To add the button for accessing the Overlay window to the Navigation bar, perform the following steps:
Step 1. Add a new item named Fullscreen Overlay to the list of Toolbar items in the DMSettings file:
�Navigation/ToolbarItems
The Toolbar assets are available as PDF files which can be customized by using
Illustrator. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
Step 2. (Optional) Customize or localize the button assets found in the sample assets folder:
�fullscreenOverlayIcon.png. The icon for for the Fullscreen Overlay window but-ton in the Navigation bar.
�fullscreenOverlaySelectedIcon.png. The icon for for the Fullscreen Overlay window button in its selected state in the Navigation bar.
Step 3. Add the assets found in the sample assets folder to the following location of the project:
�Resources/images/Toolbar
9.9 iOS 5 iCloud Support
iOS5 provides the option to back up important assets from an iPad to the Apple iCloud over a Wi Fi connection. To minimize the bandwidth used, Apple requires iOS5 apps to no longer store retrievable data (data that can be downloaded again) in the regular Documents folder, but in an alternative folder that is not being backed up.
The iPad Reader App 2.0.5 now stores magazines in the following location:
�Application�Home/Library/Caches/Issues
Note that when users are updating an older version of their Reader App to version 2.0.5 or higher, already down-loaded magazines are transferred when first starting the new Reader App. Depending on the number of maga-zines which need to be transferred, this can take a few moment. During this process, a message is displayed to the user stating that the file system is being updated.
The text for these messages can be found in the Localizalbe.strings file in the Update section, and can be localized when needed:
"Updating f i lesystem" = "Updating f i le system,\none moment please.";
Note that "\none" is a line break "\n" and the word "one" combined.
"Update error" = "Updating the file system failed";
"Update error description" = "Updating the file system failed. This could lead to improper behavior in the app. Try to solve the problems by restarting the app.";
Chapter 07 Customizing the iPad Reader App
172iP
ad
9.10 Libraries
The following Library functionality can be customized:
�Caching
�Library Filters
�Segment Filters
Each is explained in the following sections.
9.10.1 Caching
Libraries that show issues which are part of a subscription are now cached and refreshed under certain conditions.
Library caching is not used for Libraries showing content that is not part of a subscription.
The Library is refreshed when one of the following occurs:
�The Reader App is loaded
�The Store is accessed
�The Library cache time has expired. This can be set in the following DMSettings.plist option (in seconds, default setting is 24 hours):
�Store/Subscriptions/Library cache time
Chapter 07 Customizing the iPad Reader App
173iP
ad
9.10.2 Library Filter
The Library functionality can be extended by including a Library filter. This filter can be used for filtering the issues that are displayed in the Library based on a predefined keyword.
Figure 9.10.2. The Library filter allows a user to filter the Library by defined keywords
A
B
A Filter label B Filter option
For instance: when your publications exist in multiple lan-guages, the use of the filter can be offered to only show those issues for a particular language.
Enabling the Library filterThe Library filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
�Library/Enable library filter
Editing the list contentThe content of the list is derived from the Content Delivery Platform and is identical to that of the Store filter. For infor-mation about setting up the filter and assigning an issue to a keyword, see section 9.16 Store Filter.
Localizing the textThe customizable Library Filter strings can be found in the Store section of the Localizable.strings file.
Chapter 07 Customizing the iPad Reader App
174iP
ad
9.10.3 Library Segment Filter
Apart from filtering the content of the Library by using the Library filter (see section 9.10.2 Library Filter), additional filtering can be offered by means of the Library Segment filter. By using this filter, the content can be further drilled down based on predefined keywords.
For example: the Library filter can be offered to filter by language and the Library Segment filter to filter by content type such as Sports, Finance, Science, etc.
Figure 9.10.3. The Library Segment filter allows a user to filter the Library by defined keywords
A
B
A Filter label B Filter option
Enabling the Library Segment filterThe Library Segment filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
�Library/Enable library segment filter
Creating or editing the list contentThe content of the list is derived from the Content Delivery Platform. To create the list, do the following:
�Send an e-mail to [email protected] stating that you would like to make use of the Library Segment filter. In your e-mail, provide the following information:
�The name of the Reader App in which the filter is used
�The name which should be used for the Filter label
�The keywords which should appear in the Filter list
WoodWing will process the request for you and will inform you when this is completed.
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.
Localizing the textThe customizable Library Segment Filter strings can be found in the Store section of the Localizable.strings file.
Chapter 07 Customizing the iPad Reader App
175iP
ad
9.11 Newsfeeds
When the user taps the Newsfeed button in the Navigation bar, the Newsfeed page appears as an overlay on top of the page. Its content is taken from the Internet.
Figure 9.11. The Newsfeed page is displayed as an overlay on top of the magazine
A
A Close button
Changing the appearanceThe single customizable component of the Newsfeed fea-ture is the Close button. Changing its appearance can be done by modifying its asset:
�closeButtonDefaultState.png
For an overview of the exact dimensions of this asset, see appendix C, Image Dimensions.
Newsfeed URL The URL of the Newsfeed is derived from the following option in the DMSettings.plist file:
�Navigation/Newsfeed URL
Start with Newsfeed Configuring the Reader App so that it starts by displaying the Newsfeed page each time the App is started can be done by setting the following DMSetting to Yes:
�Navigation/Start with newsfeed
Fullscreen mode Displaying the Newsfeed page in fullscreen mode can be done by setting the following DMSetting to Yes:
�Navigation/Enable fullscreen newsfeed
In this mode, the Close button is not used. In order to close this view, the displayed HTML page should
include a built-in close button. This can be achieved by creating an URL pointing to “close://”. A simple example of a close button is: “<a href=‘close://’>Close</a>.”
Fallback Newsfeed PageIn case no internet connection is available, a fallback HTML page can be used for the Newsfeed functionality. To enable this feature, include a folder named “feedview” in the template project and create a HTML page named “fallback.html” within the feedview folder. If images or style sheets (CSS) are used, these also have to be placed in the feedview folder. If done correctly, the page is automatically found by the app and used, otherwise it falls back to the default behavior by showing a “no internet connection” message.
Chapter 07 Customizing the iPad Reader App
176iP
ad
9.12 Newsstand (iOS 5)
Reader Apps can be made part of iOS 5's Newsstand: a dedicated folder on the springboard
of the iPad through which magazine and newspaper issues can be accessed.
When a Reader App is made part of the Newsstand, it is not also separately available on a springboard.
Newsstand apps must offer at least one auto-renewable In-App Purchase subscription.
Support for iOS 5’s Newsstand functionality is included by default in the following projects:
�Pro Framework �Subscriptions �Apple Subscriptions
Having a Reader App in the Newsstand provides the fol-lowing benefits for the user:
�The Newsstand acts as a central location from which a Reader App can be opened whithout having to locate it somewhere on the iPad first.
�New issues can be made to download auto-matically in the background as soon as they become available. This way the download pro-cess does not have to be started manually.
For more information about the Newsstand, see www.apple.com/ios/ios5/features.html#newsstand.
Adding issues to the Newsstand is optional and controlled through a setting in the info.plist file of the
Reader App project.
Displayed iconsInitially, the Newsstand displays the app icon of the Reader App. Once an issue is fully downloaded, the
cover of that issue is displayed1. For issues containing Segments, the icon of the parent issue is displayed.
When an issue is removed, the cover for the last down-loaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is dis-played once more.
Issues can be displayed in one of two different ways:
�As a magazine �As a newspaper
This is controlled through a setting in the info.plist file of the Reader App project.
1 The icon is not changed when the download is started from the Reader App.
Chapter 07 Customizing the iPad Reader App
177iP
ad
Notifications and download initiationWhen a new issue is available, the Newsstand can be notified by sending it a push notification. (This is done through the Content Delivery Platform. For more informa-tion, see appendix F, Using the Content Delivery Platform – section 4.8.2 Sending a Newsstand Notification.) When the Newsstand receives such a notification, the following actions take place:
�A badge with the word ‘New’ is placed in the top right-hand corner of the issue icon.
�In case the Reader App is not yet running, it is loaded in the background.
�The download of the new issue is started.
�When the download is complete, the cover of the new issue is displayed.
When an issue contains Segments, all Segments will be downloaded.
For more information about the downloading process, see chapter 4, Using the Reader App – section 6.2 From Within the Newsstand.
9.12.1 Configuration
The following functionality can be configured:
�Including the Reader App in the Newsstand
�Defining the type of icon to display
�Newsstand background download support
Each is explained in detail below.
The following items are part of the iOS 5 user inter-face and cannot be configured or customized.
�The look of the Newsstand
�The type of icons in which the issues are displayed
�The 'New' badge displayed when a new issue is available
Chapter 07 Customizing the iPad Reader App
178iP
ad
Including the Reader App in the NewsstandTo have the Reader App included in the Newsstand, do the following:
�In the Resources/DigiMag�Template-Info.plist file of the Reader App project, set the following setting to Yes:
�Appl icat ion presents content in Newsstand
Defining the type of icon to displayThe displayed issue can be presented in one of two types of icons:
�As a magazine �As a newspaper
When the magazine type icon is used, the version used in the Task Manager also displays staples, the
position of which can also be defined.
Figure 9.11.1. The different types of icons in which issues can be displayed in the Newsstand
C
A Magazine type icon B Newspaper type icon C Staples
A B
To define the type of icon to use, do the following:
�In the Resources/DigiMag�Template-Info.plist file of the Reader App project, set the following settings of the UINewsstand option:
�CFBundleIconFiles. Icon to display when no issue is fully downloaded yet, or when all issues have been deleted. Typically, this is the Reader App icon. (Default value: Icon.png).
�UINewsstandBindingType. Defines the type of icon to use for the issue:
Chapter 07 Customizing the iPad Reader App
179iP
ad
�UINewsstandBindingTypeMagazine. Displays the magazine type icon.
�UINewsstandBindingTypeNewspaper. Displays the newspaper type icon.
�UINewsstandBindingEdge. (Used together with the magazine type icon, but only displayed in the Task Manager.) Defines the position of the staples:
�UINewsstandBindingEdgeLeft. The staples are positioned on the left-hand side of the icon.
�UINewsstandBindingEdgeRight. The staples are positioned on the right-hand side of the icon.
�UINewsstandBindingEdgeBottom. The staples are positioned on the bottom of the icon.
Newsstand background download supportWhen the Newsstand receives a notification that a new issue is available, it needs to be able to communicate with the Reader App in order to initiate the download process.
For this to work, perform the following steps:
Step 1. Access the Resources/DigiMag_Template-Info.plist file of the Reader App project.
Step 2. Locate the Required background modes option.
Step 3. Make sure that the following item is included:
�newsstand-content
The Newsstand background download process is only supported when the Reader App is configured
for progressive downloading. (For more information, see section 9.7 Downloading Methods.)
Chapter 07 Customizing the iPad Reader App
180iP
ad
9.13 No Internet Connection Indicators
When no internet connection is available, an indication is given to the user by a bar in the top of the frame in which the content is to be shown. Locations in which this indica-tion can appear are for example:
�The Store �Frames with streaming video �Frames with streaming audio �Newsfeed windows �Widgets �Web Elements
The indicator consists of a background image and an image containing the text. Both are located in the root images folder:
For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
�noInternetConnectionBackground.png. Background image of the bar.
�noInternetConnectionLabel.png. The text displayed in the bar.
A noInternetConnectionBackground B noInternetConnectionLabel
Figure 9.12. The No Internet Connection Assets
A B
9.14 Push Notifications (Messages)
Messages can be sent to all users who have installed the Reader App for a particular publication in order to notify them of updates, new releases, etc. (Since this is done via the Store functionality of the Reader App, this feature is available in the Pro, Framework, Subscriptions, and Apple Subscriptions Editions only.)
The following sections describe how to configure the sys-tem and how to send out messages.
Chapter 07 Customizing the iPad Reader App
181iP
ad
9.14.1 Configuration
Configuring the system for the Push Notification feature involves the following steps:
�Updating the provisioning file and installing the required certificate
�Modifying the DigiMagKioskSettings.h file
Each step is explained in the paragraphs below.
Provisioning file & certificateThe provisioning profile needs to be enabled for Push Notification and the correct certificates need to be obtained for the server. For information about how to do this, see Apple’s Local and Push Notification Programming Guide:
http://developer.apple.com/iphone/library/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ProvisioningDevelopment/ProvisioningDevelopment.html#//apple_ref/doc/uid/TP40008194-CH104-SW1
Make sure to not export the p12 file with a pass-word; it can be uploaded by using the Content
Delivery Platform (see section 9.14.2 Sending Messages).
DigiMagKiosSettings.h fileIn your Xcode project, configure the DigiMagKiosk-Settings.h file as follows:
�DigiMag_usePushNotifications: needs to be set to YES.
�DigiMag_PushNotificationKey: needs to be empty.
9.14.2 Sending Messages
Users can be notified of new releases by sending out a message from the Content Delivery Platform. (Since this is done via the Store functionality of the Reader App, this feature is available in the Pro, Framework, Subscriptions, and Apple Subscriptions Editions only.)
Using the Push Notifications feature involves two steps:
�Configuration of the Reader App �Sending the messages
Each step is explained below.
Reader App configurationThe Push Notification feature is controlled via settings in the DigiMagKioskSettings.h file. The following settings are defined:
�DigiMag_usePushNotifications. Controls whether the Push Notification feature is used. Possible values: YES and No.
BOOL DigiMag_usePushNotifications = NO;
�DigiMag_PushNotificationManager-ClassName. The name of the (3rd-party) class which handles the push notification messages.
NSString *DigiMag_PushNotificationManagerClassName = @"DefaultPushNotificationManager";
Leave this set to the default setting unless a custom implementation is performed.
�DigiMag_PushNotification_URL. The URL of the Push Notification server.
Note the following:
Chapter 07 Customizing the iPad Reader App
182iP
ad
�For the generic version release, the value must be the same as the value for the DigiMagKioskLibrary�URL setting.
�This URL needs to end with "/json-rpc/".
NSString *DigiMag_PushNotification_URL = @"https://localhost/DigiMagKioskServer.main/public/json-rpc/";
Make sure to never start the Reader App by using Xcode while the option "DigiMag�PushNotification�
URL" in the DigiMagKioskSettings.h file points to a production push notification server. If this happens, the push notifications aren’t send correctly in production.
DigiMag_PushNotificationKeyReserved for future use; to be left empty.
NSString *DigiMag_PushNotificationKey = @"";
Sending messagesFor information about sending a message, see appendix F, Using the Content Delivery Sever – section 1.9, Sending a Message.
9.15 Slide Shows
For Slide Shows, overlay assets can be customized: icons that appear over other objects to indicate their intention or state. For Slide Shows, an icon is available to indicate that the image on the page is in fact a Slide Show. This icon is positioned in the lower left-hand corner of the image.
A slideshowIcon
A
Figure 9.14. The Slide Show icon
The icon can be changed by customizing the following asset:
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.
Chapter 07 Customizing the iPad Reader App
183iP
ad
9.16 Store Filter
The Store functionality can be extended by including a Store filter. This filter can be used for filtering the issues that are displayed in the Store based on a predefined keyword.
Figure 9.15. The Store filter allows a user to filter the Store by defined keywords
A
B
A
A Filter label B Filter option
For instance: when your publications exist in multiple lan-guages, the use of the filter can be offered to only show those issues for a particular language.
This filter is identical to the Library filter. The only difference is that in the Store it filters the content of
the Store and in the Library it filters the content of the
Library. As far as setup and content is concerned though, both are the same.
Enabling the Store filterThe Store filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
�Store/Enable filter
Creating the list contentThe values shown in the Filter itself are defined on the Content Delivery Platform. For more information, see appendix F, Using the Content Delivery Platform.
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.
Localizing the textThe customizable Store Filter strings can be found in the Store section of the Localizable.strings file.
Chapter 07 Customizing the iPad Reader App
184iP
ad
9.17 Subscriptions
The Subscriptions Edition and the Apple Subscriptions Edition of the Reader App can be used for offering maga-zines to users on a subscription basis.
For a description of how the functionality works from a user’s perspective, see chapter 4, Using the Reader App – section 9.1, Store With Subscription Functionality.
The subscription functionality is built into the following areas of the Reader App:
�The Store, where users can subscribe, sign in to an existing subscription account, and view an advertisement about subscription offers.
�The Library, where users can sign in to an existing subscription account, and download any magazine issues that are part of their subscription.
�The Navigation bar, where users can access their subscription account by means of the Account button.
Setting up the Subscription functionality involves the fol-lowing steps:
Step 1. Configuring the Subscription envi-ronment. For more information, see appendix L, Subscription Server Integration – section 1.1, Configuring the Subscription Environment.
Step 2. Configuring the Content Delivery Platform. For more information, see appendix L, Subscription Server Integration – section 1.2, Configuring the Content Delivery Platform.
Step 3. Configuring the Reader App func-tionality. (See sections below.)
Step 4. Modifying the Reader App appear-ance. (See sections below.)
Steps 3 – 4 are explained in the following sections.
Chapter 07 Customizing the iPad Reader App
185iP
ad
9.17.1 Configuring the Reader App Functionality
The options for the Subscription functionality are located in the Store section of the DMSettings.plist file of the Xcode project. The following options can be set:
�Store/Enable external subscription server. Enables the use of both the iTunes Subscription Service and a non-iTunes Subscription Service.
The working of a mixed subscription environ-ment is as follows:
�A Sign In button is available in the Store and Library for logging in to the non-Apple iTunes Subscription server (logging in to the Apple iTunes Subscription server is done automatically and does not require a log in button).
The Library will show the following content:
�All downloaded issues
�When not logged in to the non-Apple iTunes Subscription server: only the issues that are part of the Apple iTunes Subscription are shown.
�When logged in to the non-Apple iTunes Subscript ion server: the issues for the Apple iTunes Subscription and the issues for the non-Apple iTunes Subscription are shown.
�The Store will not display the Offer pages that are of the non-Apple iTunes Subscription; Apple does not allow this.
�Subscriptions/Library cache time. The time after which issues that are part of a sub-scription are refreshed in the Library. (Note that the cache is also emptied when the app is restarted or when the Store is accessed.)
�Subscriptions/Disable offer in portrait mode. For hiding the Offer pane when the device is rotated to portrait orientation.
�Subscriptions/Open subscription page in Safari. For opening the subscription page in Safari when the user taps the Subscribe button in the Store.
Note that by this action, the Reader App is closed.
�Subscriptions/Enable subscribe but-ton. Enables the Subscribe button in the Subscription section of the Store.
�Subscriptions/Enable existing sub-scriber button. Enables the Existing Subscriber button in the Subscription section of the Store.
�Subscriptions/Reset password. Linked to the same value on the Subscription server which stores the link to the Web page which users can use to reset their password. This key is used when a user wants to reset their pass-word (by tapping “I forgot my password” in the Login dialog box).
When the URL is not set on the Subscription server, the Subscribe button
in the Store will be unavailable.
Chapter 07 Customizing the iPad Reader App
186iP
ad
�License agreement. Linked to the same value on the Subscription server which stores the link to the Web page on which users can read the license agreement for the offered service.1
�Privacy notice. Linked to the same value on the Subscription server which stores the link to the Web page which users can use to view with information about how the user’s data is gath-ered, used, and managed.1
�Customer service. Linked to the same value on the Subscription server which stores the link to the Web page which users can use to obtain customer service.1
9.17.2 Modifying the Reader App Appearance
Changing the appearance of the subscription compo-nents can be done by modifying components in the Store, Navigation bar, and the Library.
StoreThe Subscription components of the Store are part of the HTML Store. For information about customizing these components, see appendix G, Customizing the HTML Store.
Navigation barThe Navigation bar holds the Account button for accessing the My Account page.
The button can be displayed/hidden by the following DMSetting:
�Navigation/ToolbarItems/Item 8 Account
The appearance of the button can be changed by modify-ing the following asset:
�accountIcon.png. The icon for the Account button.
�accountSelectedIcon.png. The icon for the Account button in its selected state.
Figure 9.16.2a. The Account button in its selected state
AA accountSelectedIcon
Chapter 07 Customizing the iPad Reader App
187iP
ad
LibraryThe Library holds the Sign In/Sign Out button and the Sign In window.
Sign In/Sign Out buttonThe labels can be modified by changing the following strings in the Store section of the Localizable.strings file:
�Sign out button �Sign in button
Sign In windowFor the Sign In window, assets, colors, text, and fonts can be customized.
AssetsThe following assets can be modified for the Sign In window (see figure on the fol-lowing pages):
�images/Toolbar/accountIcon.png. The icon for the Account button in the Navigation bar.
�Store/Subscriptions/Dialogs/checkbox.png. The Remember Me checkbox in its deselected state in the Subscription Sign In dialog box.
�Store/Subscriptions/Dialogs/c h eck boxC h ecke d .p ng . T he Remember Me checkbox in its selected state in the Subscription Sign In dialog box.
�Store/Subscriptions/Dialogs/clo-seButton.png. The Close button for the Subscription Sign In dialog box.
�Store/Subscriptions/Dialogs/headerBackground.png. The
background of the header of the Subscription Sign In dialog box.
�Store/Subscriptions/Login/loginDialog-Background.png. The background of the subscription Sign In dialog box.
�Store/Subscriptions/Password/passDia-logBackground.png. The background of the password login dialog box.
�Store/Subscriptions/shadowBarVertical.png. The shadow bar between the Store and the Subscription panes.
�Store/Subscriptions/stretchableSub-scribeButton.png. Subscribe buttons used in locations other than in the Store (for instance in the login dialog box.)
�Store/Subscriptions/stretchableSub-scriptionStoreButton.png. The subscription buttons in the Store (below the Offer pane).
�Store/Subscriptions/subscriptionForm-Background.png. The background image of the Subscription pane in the Store.
Chapter 07 Customizing the iPad Reader App
188iP
ad
ColorsThe following colors can be customized for the Sign In window:
�Sign-in disclaimer text color. The color of the disclaimer text in the Subscription Sign In dialog box.
�Sign-in license text color. The color of the license text in the Subscription Sign In dialog box.
�Sign-in privacy text color. The color of the privacy text in the Subscription Sign In dialog box.
�Sign-in remember checkbox text color. The color of the “Remember Me” text in the Subscription Sign In dialog box.
�Sign-in forgot button text color. The color of the “I forgot my password” text in the Subscription Sign In dialog box.
�Sign-in submit button text color. The color of the Submit button label in the Subscription Sign In dialog box.
�Sign-in email field text color. The color of the Email Address box text in the Subscription Sign In dialog box.
�Sign-in password field text color. The color of the Password box text in the Subscription Sign In dialog box.
�Sign-in dialog title text color. The color of the title in the Subscription Sign In dialog box.
TextThe customizable Sign In window strings can be found in the following section of the Localizable.strings file:
�Sign-in dialog
Chapter 07 Customizing the iPad Reader App
189iP
ad
FontsFor an explanation about how to change the color of the fonts and how to assign custom fonts, see
section 3.3 Fonts.
The following Sign In window fonts can be customized:
�Disclaimer text font. The font of the Disclaimer text in the Subscription Sign In dia-log box.
�License text font. The font of the License text in the Subscription Sign In dialog box.
�Privacy text font. The font of the Privacy text in the Subscription Sign In dialog box.
�Remember checkbox font. The font of the Remember Me text in the Subscription Sign In dialog box.
�Forgot button font. The font of the “I forgot my password” text in the Subscription Sign In dialog box.
�Submit button font. The font of the Submit button label in the Subscription Sign In dialog box.
�Email field font. The font of the Email box in the Subscription Sign In dialog box.
�Password field font. The font of the Password box in the Subscription Sign In dia-log box.
�Dialog title font. The font of the title of the Subscription Sign In dialog box.
Chapter 07 Customizing the iPad Reader App
190iP
ad
Figure 9.16.2b. The Subscription assets in the Sign In dialog box
A
B
C
D
A closeButton B headerBackground C loginDialogBackground D checkboxChecked
Chapter 07 Customizing the iPad Reader App
191iP
ad
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 articles which have not been created using the Text View Markup feature) The header that is shown at the top of the Text View. This asset needs to be 768 pixels wide but can have a custom height.
This asset is available as a PDF file which can be customized by using Illustrator. It
is part of a package which can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
�textViewImagesShadow.png. This is the shadow that is shown between the Text View and the image bar. This assets needs to be 768 pixels wide and 20 pixels high.
Figure 9.17. The assets for the Text View
A
B
A textViewHeader B textViewImagesShadow
Chapter 07 Customizing the iPad Reader App
192iP
ad
9.19 TOC List
The TOC List is a pop-up window containing a table of contents.
For each story, the following is shown:
�Thumbnail of the first page of the story �The story title �The story description
Figure 9.18. Tapping the TOC button in the top toolbar brings up the TOC List
A
A TOC List
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.
Chapter 07 Customizing the iPad Reader App
193iP
ad
9.19.1 Enabling the Functionality
To make the TOC List functionality available in the Reader App, perform the following steps:
Step 1. Enable the TOC List by setting the fol-lowing DMSetting to Yes:
�Navigation/TOC List in top toolbar
Step 2. Enable the top Toolbar by setting the following DMSetting to Yes:
�Navigation/Enable top toolbar
9.19.2 Changing the Assets
The TOC List assets are stored in the TOC Pop-up folder. The following assets can be customized:
For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
�tocThumbBackground.png. The image behind the thumbnails in the TOC List when viewed in landscape orientation.
�tocThumbBackgroundVertical.png. The image behind the thumbnails in the TOC List when viewed in portrait orientation.
Figure 9.18.2. TOC List assets
A
A tocThumbBackground
Chapter 07 Customizing the iPad Reader App
194iP
ad
9.19.3 Changing the Colors
The following TOC List colors can be customized:
�TOC selected row color. Color of the selected row in the TOC List.
9.19.4 Changing the story text
The story title and story description are taken from the respective Dossier properties of the Dossier that has been created for the story.
Figure 9.18.4. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for dis-playing the story title and description in the TOC List (bottom)
A Story Description property B Story Description dis-played in Reader C Story Title property D Story title displayed in Reader
B
A
CD
Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
Chapter 07 Customizing the iPad Reader App
195iP
ad
9.19.5 Changing the Width and Height
Controlling the height and the width of the TOC List can be done by the following options in the DMSettings.plist file:
�TOC Popup/Popup height �TOC Popup/Popup width
9.19.6 Localizing the Text
The customizable TOC List strings can be found in the table of contents title for the vertical TOC section of the Localizable.strings file.
Chapter 07 Customizing the iPad Reader App
196iP
ad
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 story title.
�TOC cell story description font. The font of the story description.
9.20 Video
For the video functionality, the following can be customized:
�Overlay assets
�Hiding embedded video controls
�Remove the video once it has finished playing
Each is explained in the following sections.
Chapter 07 Customizing the iPad Reader App
197iP
ad
9.20.1 Overlay Assets
Overlay assets are icons that appear over other objects to indicate their intention or state. For videos, an icon is available to indicate that the image on the page is in fact a Video. This icon is positioned in the center of the image.
The video overlay assets are stored in the Overlays folder. The following assets can be customized:
For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
�videoDisabledIcon.png. The overlay shown on top of a video when it is not possible to play the video, for example when there is no internet connection available to play a streaming video. (See figure 9.19.1a to the right.)
�videoEnabledIcon.png. The overlay shown on top of a video when the video is available but has not started yet. (See figure 9.19.1b to the right.)
A videoDisabledIcon
A
Figure 9.19.1a. The video disabled icon
A videoEnabledIcon
A
Figure 9.19.1b. The video enabled icon
Chapter 07 Customizing the iPad Reader App
198iP
ad
9.20.2 Hiding Embedded Video Controls
The controls for an embedded video can be hidden so that they don’t appear on the page. This can be con-trolled for each placed video individually. The user can control the playback of the video by taking the video into fullscreen mode.
To hide the controls for a placed video, the exported magazine.xml file needs to be edited as follows:
Step 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 fol-lowing property:
<moviecontrols>false</moviecontrols>
Possible values: �true: controls will be shown1
�false: controls will be hidden
1 The controls are also shown when the moviecontrols property is not included
Example:
<object><id>96</id><type>movie</type><x>523</x><y>339</y><width>435</width><height>291</height><movie id=”95”>
<url>images/story136/video_96.mp4</url><x>523</x><y>339</y><width>435</width><height>291</height><autoplay>false</autoplay><autofullscreen>false</autofullscreen><moviecontrols>false</moviecontrols>
</movie></object>
If the <moviecontrols> setting is set to false (controls hidden) and the <autofullscreen> setting is set to true
(video automatically played in fullscreen mode), the con-trols will be shown, else the user would not be able to leave fullscreen mode.
Chapter 07 Customizing the iPad Reader App
199iP
ad
9.21 Remove Video After Play
This feature allows to completely remove (hide) a video from a page when it has finished playing, thereby showing the content of the page behind the video frame.
This feature can be set for each individual movie.
To enable this feature, the exported magazine.xml file needs to be edited by performing the following steps:
Step 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 fol-lowing 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>
1 The video also stays visible when the removeafterplay property is not included
Chapter 07 Customizing the iPad Reader App
200iP
ad
9.22 Web Elements
For Web Elements, the following can be customized:
BackgroundThe background of Web Elements can be made transpar-ent by performing the following steps:
�For the HTML page which is to be embedded, set the background property in the body tag to transparent.
�Enable the fo l lowing set t ing in the DMSettings.plist file:
�Colors/Enable transparent Web Elements
Web Element pop-up windowThe labels of the Back and Close buttons in the Web Element pop-up window can be changed and/or localized by modifying the following strings:
/* Back button label */"Back" = "Back";
/* Close button label */"Close" = "Close";
249
08
249iP
ad
This chapter discusses the process of building the iPad Reader App using Xcode.
See appendix H, Tips and Best Practices for further guide lines around these processes.
1. Preparation
Preparation steps are required before being able to build the following types of Reader Apps:
�A Reader App without Store functionality
�A Reader App with Store functionality
�A Reader App without Newsstand functionality
Each is explained in the following sections.
Building the iPad Reader App
Chapter 08 Building the iPad Reader App
250iP
ad
1.1 A Reader App Without Store Functionality
When the magazine content needs to be part of the Reader App (as is the case for non-Store versions), the magazine that was exported from Content Station needs to be merged with the project. To do this, proceed as follows:
If the content is retrieved separately from a Content Delivery Platform, the following steps can be
ignored.
Step 1. Drag the exported magazine into the Resources folder of the project in Xcode.
A dialog box will appear. (See figure 1.1a on the next page.)
Step 2. Set the following settings:
�Select the check box Copy items into destination group’s folder (if needed).
�Click the option Create Folder References for any added folders.
Step 3. Click Add.
The folder is added to the project as a blue folder icon. (See figure 1.1b on the next page.)
1.2 A Reader App With Store Functionality
A Reader App with Store functionality needs to be able to communicate with the Content Delivery Platform on which the content resides. For this purpose, pertinent information needs to be included in the final build of the Reader App, and the Reader App needs to be registered on the Content Delivery Platform. To achieve this, perform the following steps:
Step 1. Send an e-mai l to [email protected] stating that you would like to distribute a Reader App by making use of the Content Delivery Platform.
You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform (WoodWing will do this for you). When processed, you will be sent the relevant settings required for inclusion in the build:
�The Content Delivery Platform URL
�A secret key for the Reader App, as defined on the Content Delivery Platform
�A product ID for the Reader App, as defined on the Content Delivery Platform
Step 2. Use these settings for building your Reader App. (See section 2. Building.)
Chapter 08 Building the iPad Reader App
251iP
ad
Figure 1.1a. A dialog box appears when dragging a magazine folder to the Resources folder in Xcode
Figure 1.1b. The added magazine appears as a blue folder icon
Chapter 08 Building the iPad Reader App
252iP
ad
1.3 An App Without Newsstand Functionality
Support for iOS 5’s Newsstand functionality is included by default in the following projects:
�Pro Framework �Subscriptions �Apple Subscriptions
When using any of these projects and when not making use of the Newsstand functionality, remove the functional-ity by performing the following steps:
Step 1. O p e n th e P r o Fr a m ewo r k , Subscriptions, or Apple Subscriptions project respectively.
Step 2. Open the Resources/DigiMag_Template-Info.plist.
Step 3. Remove the following keys:
�Application present content in Newsstand
�Icon file (iOS 5)
�Required background modes
Step 4. Save the file.
2. Building
To build the Reader App, perform the following steps:
Step 1. (Optional) When building the Reader App with Store functionality, enter the details received from WoodWing (see section 1.2 A Reader App With Store Functionality) in the Xcode project as outlined in chapter 7, Customizing the iPad Reader App – 7.1 Communication With the Store.
Step 2. Use the Bundle Identifier to make the Reader App unique.
Step 3. Implement your Distribution profile.
For more information about these steps, see the iPhone Developer Program User
Guide.
Step 4. From the Overview list in the Toolbar, choose the Active SDK for the required output device:
�Device. When the App is to be used on the iPad.
�Simulator. When the App is to be tested on the iPad Simulator.
Step 5. Click Build and Run.
4
09
4
Customizing the Android Reader App is important when you want to achieve any of the following:
�Giving it a unique look and feel (reflecting the content of the issues that will be viewed)
�Enabling those features that you want your users to use
�Localizing the Reader App into a particular language
In this chapter you will learn all about customizing the Android Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The fol-lowing main customization areas are defined:
�General App settings
�Navigation
�The Store
�The Library
�General App features
Customizing the Android Reader App
Chapter 09 Customizing the Android Reader App
5
1. Required Tools
In order to perform the steps as outlined in this chapter, the following tools are required:
�Eclipse and (optionally) an emulator. (Both come as part of the Eclipse and Android SDK). It is assumed here that both are correctly installed and that you are proficient in using these applications.
�SDK: SDK Platform Android 3.0, API 11.
A Reader App build with SDK 3.0 can also be run on a Froyo device.
�Image editor. For editing images in .png or .ai/.pdf format. Use your favorite editor for this task.
2. OS Compatibility
With the release of the Android Reader App v1.3, a single app is available which runs on both a
Honeycomb and Froyo device.
The customization steps as outlined in this chapter can be used for both Froyo and Honeycomb; where customiza-tion is significantly different, this is indicated accordingly.
Chapter 09 Customizing the Android Reader App
6
3. Loading a Project
The Reader App is supplied as an Eclipse project.
The naming scheme has changed; as of v1.2 the Android reader uses the new naming scheme:
�DigiMag�Android�v1.x�bXXX�Framework.zip
For example:
�DigiMag�Android�v1.3�b505�Basic�Standard.zip
To load the project, perform the following steps:
Step 1. Unzip the provided DigiMag file:
�DigiMag�Android�v1.x�bxxx�Basic�Standard.zip
�DigiMag�Android�v1.x�bxxx�Pro�Framework.zip
�DigiMag�Android�v1.x�bxxx�Subscriptions.zip
Step 2. Open the Eclipse project, located in the [folder name]_Template folder.
Two projects are loaded: “customer�app” and “ww�digimag”. Customizations
should only be made to the “customer�app” project.
Customizing the Reader App is mostly done by making changes to the following areas of the project:
�src/[package folder]/DigiMagKiosk-Settings.java. (Reader App versions with Store functionality only) Settings related to connecting to the Store.
�res/values/strings.xml. For localizing the text as displayed in the Reader App.
�res/drawable folder. (Android Reader App v1.x (Froyo) only) For customizing images related to the Subscription Sign In window.
�res/drawable-nodpi. For generic drawables (used for both Froyo and Honeycomb).
�res-drawable-nodpi-v8. For Froyo-specific drawables.
�res-drawable-nodpi-v11. For Honeycomb-specific drawables.
�assets/DMsettings.plist file. For custom-izing the Reader App functionality.
Chapter 09 Customizing the Android Reader App
7
4. Universal Builds
The Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same
app, the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1.2).
As a result of this change, the frameworks now contain drawables for both Honeycomb and Froyo. The location of all drawables has also been changed. The changes are as follows:
�The hdpi folder is no longer used for Froyo.
�The mdpi folder is no longer used for Honeycomb.
�All drawables shared between Honeycomb and Froyo are located in the drawable-nodpi folder.
�Any Honeycomb-specific drawables are located in the drawable-nodpi-v11 folder. SDK version 3.0
�Any Froyo-specific drawables are located in the drawable-nodpi-v8 folder. SDK 2.2
�The drawable-hdpi, drawable-mdpi and draw-able-ldpi folders still exist but only contain the app icon.
For a complete overview of which images are used on a unique platform and which are used on both
platforms, see appendix C, Image Dimensions – section 2, Android.
5. What Can Be Customized?
Changing the look & feel or the functionality of the Reader App is achieved by modifying any of the following areas:
�Drawables. Interface components such as buttons, icons, logos and headers.
�Text. The text of specific titles as they appear in various places of the Reader App.
�Settings. The functionality of the Reader App.
Customizing colors and fonts is not yet possible in the current version.
Each is described in the following sections.
Chapter 09 Customizing the Android Reader App
8
5.1 Drawables
Drawables are user interface components such as but-tons, icons and headers. Each of these drawables are images and can be easily replaced by your own images.
Various drawables are available as PDF files which can be customized by using Illustrator and subse-
quently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
Drawables are stored in the following project folders:
�Android Reader App v1.x: res/drawable-nodpires/drawable-nodpi-v8 res/drawable-nodpi-v11
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.
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
Each is explained in the following sections.
Chapter 09 Customizing the Android Reader App
9
5.2.1 Changing the Text
The text which appears in the Reader App originates from various sources, and can therefore be changed by differ-ent means (see figure on the next page):
�Settings. The name of the Reader App itself is controlled by a setting in the Eclipse project. (For more information, see section 7.1 Reader App Name.)
�Drawables. Most drawables in the Eclipse project include icons only, but the following drawables also include text:
�Buttons of the Navigation bar, Action bar or Library
�Labels which indicate that no internet connection is available
To change the text for these drawables, modify their respective file. (For more information, see section 5.1 Drawables.)
�res/values/strings.xml res/values-v8/strings.xml res/values-v11/strings.xml This file can be used to change the following types of text:
�App name �Flipview header �Action bar menu commands �Table of contents title �Download labels �Button labels �Store messages �Warnings/error messages
To change the text for any of these items, mod-ify the content of the file as required.
Chapter 09 Customizing the Android Reader App
10
Figure 5.2.1. Text originates from various sources in the system
A Localizable string B HTML page C Drawable with text D Dossier property E Server property
C
A
C
D
B
A
Chapter 09 Customizing the Android Reader App
11
�Dossier properties. Setting the properties of a Dossier controls the following:
�Section. Each section in the Section Viewer is derived from the Section Title property.
�Story title. The title for a story below a thumbnail in the Flipview is derived from the Story Title property.
�Story description. The story descrip-tion below the story title in the Flipview is derived from the Description property.
To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken from their respective custom metadata proper-ties. For more information about setting these values, see the Enterprise 7 Admin Guide, chap-ter 40, Digital Magazine Configuration.)
�Issue Maintenance page. The Issue Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header.
To add or change this text, change the Issue Description property on the Issue Maintenance page in Enterprise Server.
�HTML pages. Dedicated HTML pages such as the Subscription Offer page in the Store, present specific information. Changing the text of these pages is done by modifying the relevant source files.
For more information, see appendix L, Subscription Server Support – section 1.1.1. Web Pages.
5.2.2 Changing the Language
The default language for the Reader App is English but it can be localized for other languages as well. This is done by including a language code which the Android device will use to display the strings in the correspond-ing language (only when the device is configured for that language, else it will display the text in English).
To add a supported language to the Reader App, perform the following steps:
The following instructions do not apply to localizing the HTML Store. For information about localizing the Store, see appendix G, Customizing the HTML Store – 3.6 Language.
Step 1. In the Eclipse project file locate the val-ues folder in the res group.
Step 2. Create a duplicate of this folder and end the folder name with the two- or three-letter country code specific to the localization.
The two- or three-letter codes should comply to the ISO 639-1 or ISO 639-2
conventions. For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/php/English_list.php.
Step 3. Edit the strings.xml file as required.
The format of a string is as follows:
“<Key>” = “<Translation>”;
Step 4. Build the project.
Step 5. Configure the device on which the Reader App is to be shown to the required language.
Step 6. Run the Reader App on the device.
Chapter 09 Customizing the Android Reader App
12
5.3 Settings
Most of the customizations for the Reader App are per-formed in the DMSettings.plist file. This allows you to change the functionality of the Reader App. Which set-tings these are and for which features they are used is discussed in the remainder of this chapter.
For 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.
6. Previewing Customizations
Previewing any made customizations can be done by loading the Reader App onto an Android device from within Eclipse or by viewing it in an emulator.
See the Eclipse/Android documentation for more details.
Installation on SD cardsTo run the Reader App on an SD card instead of in internal memory, perform the following steps:
Step 1. In your Reader App project, access the AndroidManifest.xml file.
Step 2. Modify the manifest statement by adding the following:
android:installLocation=”preferExternal”
Example:
<manifest xmlns:android=”http://schemas.android.com/apk/res/android” android:installLocation=”preferExternal”>
For more information, see the Android documentation: http://developer.android.com/guide/appendix/install-location.html.
Chapter 09 Customizing the Android Reader App
13
7. General App Settings
The following general features can be modified for the Reader App:
�Reader App name. The name of the Reader App as it appears on the Android device.
�Reader App drawables. General drawables used throughout the Reader App.
�Web pages. Web pages containing specific information, such as privacy information or pre-ferred device metrics.
�Version information. Version information about the Reader App.
�Intent settings. Settings to conver t Enterprise intent names to Reader App intent names.
Each setting is explained in the following sections.
7.1 Reader App Name
The name of the app (as it appears on the device) can be changed by modifying the Eclipse project as follows:
Step 1. In the project, double-cl ick the AndroidManifest.xml file to open it in the package explorer.
Step 2. In the Manifest General Attributes, change the Package name to a unique name.
Step 3. Expand the res/values folder and dou-ble-click the strings.xml file.
Step 4. Change the value for app_name with the name of the magazine.
Step 5. (Optional) Perform steps 1–4 for each localization in your project.
Chapter 09 Customizing the Android Reader App
14
7.2 Reader App Drawables
Reader App drawables are images with a general purpose such as the app icon.
icon.pngDifferent versions of this file exist:
�Low dpi. Reader App icon displayed in the Home Screen Editor. Location: res/drawable-ldpi.
�Medium dpi. Reader App icon displayed on the Homescreen. Location: res/drawable-mdpi.
� High dpi. Reader App icon displayed on the Homescreen.
Location: res/drawable-hdpi.
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
The launcher on the Android Honeycomb version (always) uses the hdpi version of the icon.png, even
on mdpi devices. Customers should therefore always cre-ate an ldpi, mdpi and hdpi version of their application icon.
7.3 Web Pages
Web pages can be used for displaying specific informa-tion to the user. The following types of information can be displayed:
�Custom information. For displaying custom information such as privacy information.
�Metrics information. For informing the user that the current device on which the magazine is viewed may not provide the best user experi-ence since the device does not match the size for which the magazine was designed.
Each is explained in the following sections.
Chapter 09 Customizing the Android Reader App
15
7.3.1 Custom Information
Custom information such as privacy information can be displayed to the user in the form of a Custom Web page. This page is displayed when the Custom button in the Navigation bar or Action bar is tapped.
To make use of this feature, perform the following steps:
Step 1. Create a Web page containing the information to be displayed.
Step 2. (Optional) When the Web page needs to be included as part of the project, add it to the following folder:
�.../assets/
The URL will be build up as: file:///android�asset/<name of webpage>.html
Step 3. In the Eclips project, access the DMSettings file.
Step 3a. Make sure that the following but-ton is included:
�Navigation/ToolbarItems/item9 Custom Button
Step 3b. (Optional, only for external an Web page) Enter the URL to the external Web page in:
�Navigation/Custom Button URL
7.3.2 Metrics Information
When a magazine is read on a device for which it hasn’t been designed (in terms of dimensions), it is likely that it will not properly fit the screen.
To cater for such a scenario, the Reader App does two things:
�It scales the page to make it fit the screen
�(Optional) It informs the user by displaying a message
Each is described below.
Chapter 09 Customizing the Android Reader App
16
Page scalingWhen the pages of a magazine have been designed in an aspect ratio (width versus height) which is different than the ratio of the device on which the magazine is displayed, the Reader App will scale the page to make it fit the screen in a certain way.1
The scaling method used can be controlled by means of the following DMSettings option:
�Metrics/Fitting/Fit mode
Possible values:
�Fit width. (Default setting) On a device which is smaller than the page dimensions, the page is scaled down to fit the width of the screen. This might result in the user having to scroll vertically to see the rest of the page.
Pages are only scaled down, not up; pages which dimensions are less than
those of the device are kept at their original size.
�Fit screen. The page will be scaled down to fit the screen. If the aspect ratio (width versus height) of the screen is smaller than the ratio for which the page was designed, this can result in “letterboxing” or “pillarboxing” (black bars appearing along the side, top, or bottom of the screen).
Pages are only scaled down, not up; pages which dimensions are less than
those of the device are kept at their original size.
�Fit screen disproportionately. The page will be made to fit the dimensions of the screen exactly. This could result in the content of the page looking stretched or squashed.
1 Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
For notes about the functionality of the page fitting feature in relation to using specific DM Server plug-
ins, see chapter 6, Exporting Content – 3.1, Exporting and Page Scaling.
Chapter 09 Customizing the Android Reader App
17
Displaying a messageThe Reader App can be set to verify the metrics of the device, and — if the required size is not met — to display a message to the user in the form of a Web page.
A default Web page is provided as part of the Eclips project:
�assets/devicewarning/warning.html
To enable this feature, perform the following steps:
Step 1. (Optional) Create a Web page contain-ing the information to be displayed by doing one of the following:
�Use the default Web page
�Create a new page, possibly based on the default page
Step 2. (Optional) Make the page available by doing one of the following:
�Replace the default Web page (make sure that the name is “warning.html”)
�Make the page available online
Step 3. In the Eclipse project, access the DMSettings file and set the following:
�Metrics/Check device metrics. Controls whether the metrics of the device are checked.
�Metrics/Device metrics warning URL. URL to the Web page to be dis-played. When left empty, the default Web page is used.
�Metrics/Device width. The required width of the device. Default values are:
1024 px (Reader App v1.x (Froyo)1280 px (Reader App v1.x (Honeycomb)
�Metrics/Device height. The required height of the device. Default values are:
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 physi-cal dpi). Examples:
Samsung Galaxy: 240 dpi
Motorola Xoom: 160 dpi
For values of other devices, please refer to the documentation of the
manufacturer.
Chapter 09 Customizing the Android Reader App
18
7.4 Version Information
When the user attempts to read an issue in a Reader App which does not match the minimum required Reader App version, a message is displayed.
Setting the version numberThe minimum version is set in two locations:
�On the Content Delivery Platform: see appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.
�In the Reader App: edit the number in the DigiMag_ApplicationVersion section of the fol-lowing file:
�customer�app/src/com.woodwing.settings/DigiMagKioskSettings.java/ DigiMagKioskSettings
Localizing the messageTo localize this message, edit the following string in the Error Strings section of the strings.xml file:
�This issue requires a newer version of this Reader App. Please update.
7.5 Intent Settings
Intent settings are used to match certain functionality of the Reader App with specific content. For example, in order for the page containing the table of contents to appear when a user taps the TOC button in the Navigation bar, the Dossier in which the layout is stored should have its intent property set to TOC. A similar intent property (named Help) is used for linking the Help button to the Help page, containing instructions about how to use the Reader App.
Both intent properties are defined on Enterprise Server. However, if custom values are used, the corresponding values for the Reader App also need to be changed (else the functionality will break).
Changing the intent values can be done by means of the DMSettings.plist file:
�Intents/Help. Used for linking the page with Help instructions to the Help button in the Navigation bar.
�Intents/TOC. Used for linking the page con-taining the table of contents to the TOC button in the Navigation bar.
Chapter 09 Customizing the Android Reader App
19
8. Navigation
The flexibility of the Reader App allows you to offer the user various tools and methods for navigating the content:
�Story navigation vs page navigation �Navigation bar �Action bar �Flipview �Top Toolbar �Hotzones �Orientation lock
Each aspect is explained in the following sections.
8.1 Story vs Page Navigation
The user can be offered one of two types of navigation:
�Story navigation. In this configuration, navi-gation is done as follows:
�To navigate from one story to another, the user swipes horizontally (from left to right or right to left)
�To navigate within a story (from page to page), the user swipes vertically (up/down or down/up)
�Page navigation. In this configuration, navi-gation is done as follows:
�To navigate from page to page, the user swipes horizontally (from left to right or right to left) using one finger
�To navigate from story to story, the user swipes horizontally (from left to right or right to left) using two fingers
For more information about Story Navigation and Page Navigation, see chapter 3, The Concept –
section 3, Stories, Pages, Sections and Segments.
By default, the Reader App is set to Story navigation.
To enable Page navigation, set the following option in the DMSettings.plist file to Yes:
�Navigation/Horizontal page navigation
To enable two-finger swipe (Page navigation only), set the following option in the DMSettings.plist
file to Yes:
�Navigation/Scroll sections with two finger swipe
Chapter 09 Customizing the Android Reader App
20
To ease navigation when the Reader App is set to Page navigation, you might want to enable the Page
Scrubber so that the user can quickly browse the pages displayed in the Page Viewer.
To enable the Page Scrubber, set the following option in the DMSettings.plist file to Yes:
�Flipview/Page scrubber enabled
8.2 Navigation Bar
The Navigation bar is used in the Android Reader App (Froyo) only. For the Android Reader App
(Honeycomb) an Action bar is used instead. For more information, see section 8.3 Action Bar.
The Navigation bar is used as a starting point for navigat-ing the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, Store, etc.) as well as to external content for instance by using the Newsfeed button.
Customizing the Navigation bar can be done by changing the following:
�Tap area. The area which the user should tap in order to display the Navigation bar.
�Items. The number of buttons and the order in which they appear.
�Drawables. The icons of the buttons.
�Visibility settings. Settings controlling the circumstances under which the Navigation bar is displayed or hidden.
Each is explained in the following sections.
Chapter 09 Customizing the Android Reader App
21
8.2.1 Tap Area
By default, the Navigation bar appears when the user taps any part of the screen.2
The tap area can be limited to the bottom part or the top part of the screen by doing the following:
�In the Hotzones section of the DMSettings.plist file, make the following changes:
�Select the option Tap bottom to show toolbar.
�Select the option Tap top to show toolbar.
�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom and/or top area height value.
The Navigation bar now only appears when the user taps the defined area(s).
2 The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
8.2.2 Items
The Navigation bar can contain the following buttons:
�Magazine. For accessing the current maga-zine (if available).
�Buy. (Store/Library/Subscription projects only) For navigating to the Store.
�Library. (Store/Library/Subscription projects only) For navigating to the Library.
�Home. For navigating to the magazine cover.
�TOC. For navigating to the table of contents page.
�Help. For navigating to the Help page.
�FlipView. For bringing up the Flipview.
�Feed. For navigating to the newsfeed.
�Account. (Subscription Editions only) For bringing up an external page with subscription account details.
When included, this button is displayed at all times, but only enabled when the Store
is accessed.
�Custom button. For accessing a Web page with custom information such as privacy information.
The buttons are managed by means of the following option in the DMSettings.plist file:
�Navigation/ToolbarItems
The value of each item is linked to specific function-ality and should not be changed.
Chapter 09 Customizing the Android Reader App
22
Removing/adding buttonsTo remove a button, do the following:
�Mac OS: Select the row and delete it.
�Windows: Modify the content by using a suitable XML editor.
To add a button, do the following:
�Mac OS: Right-clicking an item, choose Add Row from the context menu and entering the correct Value for that button.
�Windows: Modify the content by using a suitable XML editor.
Changing the orderTo rearrange the order in which the items appear in the Navigation bar do the following:
�Mac OS: Drag each key to its required position.
�Windows: Modify the order by using a suitable XML editor.
8.2.3 Drawables
The drawables that appear in the Navigation bar are stored in the res/drawable-nodpi and res/drawable-nodpi-v8 folders.
Various drawables are available as PDF files which can be customized by using Illustrator and subse-
quently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
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 button.
�accountselectedicon.png. The icon for the Account button in its selected state.
�bottombar.png. The background of the Navigation bar.
�customicon.png. The icon for the Custom button.
�customselectedicon.png. The icon for the Custom button in its selected state.
�feedicon.png. The icon for the Newsfeed button.
Chapter 09 Customizing the Android Reader App
23
�feedselectedicon.png. The icon for the Newsfeed button in its selected state.
�flipviewicon.png. The icon for the Flipview button. (This button is normally named Contents.)
�flipviewselectedicon.png. The icon for the Flipview button in its selected state. (This button is normally named Contents.)
�helpicon.png. The icon for the Help button.
�helpselectedicon.png. The icon for the Help button in its selected state.
�homeicon.png. The icon for the Home but-ton, linking to the cover of the magazine.
�homeselectedicon.png. The icon for the Home button in its selected state.
A bottombar B magazine�icon C storeselectedicon D libraryicon E homeicon F tocicon G helpicon H flipviewicon I feedicon J accounticon K customicon
BA C D E F G IH J K
Figure 8.2.3. The Navigation bar drawables
�libraryicon.png. The icon for the Library button.
�libraryselectedicon.png. The icon for the Library button in its selected state.
�magazine_icon.png. The icon for accessing the current magazine.
�magazine_selected_icon.png. The icon for accessing the current magazine in its selected state.
�storeicon.png. The icon for the Store button.
�storeselectedicon.png. The icon for the Store button in its selected state.
�tocicon.png. The icon for the Contents button.
�tocselectedicon.png. The icon for the Contents button in its selected state.
Chapter 09 Customizing the Android Reader App
24
8.2.4 Visibility Settings
Show toolbar on opening issueWhen opening a magazine issue, the following DMSetting controls whether the Navigation bar (as well as the top Toolbar, when enabled) will be automatically displayed:
�Navigation/Show toolbar on opening issue
Always show toolbarsThe following DMSetting controls whether the Navigation bar (as well as the top Toolbar, when enabled) will always be displayed, without the user being able to hide them:
�Navigation/Always show toolbars
8.3 Action Bar
The Action bar is used in the Android Reader App v1.x (Honeycomb) only. For the Android Reader App
v1.x (Froyo) a Navigation bar and top Toolbar are used instead. For more information, see section 8.2 Navigation Bar and section 8.5 Top Toolbar.
The Action bar is used as a starting point for navigating the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, Store, etc.) as well as to external content for instance by using the Newsfeed button.
Compared to the Android Reader App v1.x (Froyo), the Action bar can be seen as a combined Navigation bar and top Toolbar.
Customizing the Action bar can be done by changing the following:
�Tap area. The area which the user should tap in order to display the Navigation bar.
�Items. The number of buttons and the order 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 dis-played on the right-hand side of the Action bar.
�Drawables. The icons of the buttons.
�Text. The text for the commands in the Action bar menu.
�Visibility settings. Settings controlling the circumstances under which the Navigation bar is displayed or hidden.
Each is explained in the following sections.
Chapter 09 Customizing the Android Reader App
25
8.3.1 Tap Area
By default, the Action bar appears when the user taps any part of the screen.3
The tap area can be limited to the top part of the screen by doing the following:
�In the Hotzones section of the DMSettings.plist file, make the following changes:
�Select the option Tap top to show toolbar.
�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the top area height value.
The Action bar now only appears when the user taps the defined area.
3 The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
8.3.2 Items
The Action bar can hold the following buttons:
Items which always appear on the left side of the Action bar:
�Buy. (Store/Library/Subscription projects only) For accessing the Store.
�Library. (Store/Library/Subscription projects only) For accessing the Library.
�Magazine. (Store/Library/Subscription proj-ects only) Appears when either the Store or Library is accessed and when an issue is open. It is used for navigating back to the opened issue.
�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):
�Home. For navigating to the magazine cover.
�TOC. For navigating to the table of contents 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 dis-played when the Store is accessed.
Chapter 09 Customizing the Android Reader App
26
�Back/Forward buttons. (These are always displayed on the right-hand side of the Action bar, never in the menu.) For navigating to previ-ously visited pages.
The buttons are managed by means of the following option in the DMSettings.plist file:
�Navigation/ToolbarItems
The value of each item is linked to specific function-ality and should not be changed.
When one or both of the Back/Forward items are enabled then these are always displayed, regard-
less of the value set in the ' Maximum number of toolbar items' setting (see below).
An additional button is the Menu button, which automatically appears when there are 6 or more
actions defined. When there are less actions defined, the Menu button is not displayed. (This functionality is part of the operating system and cannot be controlled.)
Setting the maximum number of items dis-played
The maximum number of items to appear on the right-hand side of the Action bar can be controlled
by the following DMSetting:
�Navigation/ Maximum number of toolbar items
A maximum number of 6 items can be set to appear on the right-hand side of the Action bar.
When one or both of the Back/Forward items are enabled then these are always displayed, regard-
less of the value set in the ' Maximum number of toolbar items' setting (see below).
Removing/adding buttonsTo remove a button, open the DMSettings file and do the following:
�Mac OS: Select the row and delete it.
�Windows: Modify the content by using a suitable XML editor.
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.
�Windows: Modify the content by using a suitable XML editor.
Changing the orderTo rearrange the order in which the items appear in the Action bar open the DMSettings file and do the following:
�Mac OS: Drag each key to its required position.
�Windows: Modify the order by using a suitable XML editor.
Chapter 09 Customizing the Android Reader App
27
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 subse-
quently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
The current state of a button and the availability of the functionality behind the button is indicated in the follow-ing ways:
Action buttons on the left-hand side only: �The button is unselected: a narrow line is
shown at the bottom of the button.
�The button is selected: a thick line is shown at the bottom of the button.
�The button is pressed: the whole back-ground of the button is colored.
Buttons on the right-hand side only: �The button is unselected: no line at the
bottom of the button, nor a background color is shown.
All buttons: �The functionality is available: the icon is
colored white.
�The functionality is not available: the icon is colored gray.
For this purpose, two images are always shown simulta-neously for each button:
�Icon. Depicts the purpose of the button and the availability of the function behind the button. The names of these drawables all contain the word “icon”.
�Status. Depicts the button state (unselected, selected or pressed). The names of these draw-ables all start with “action�bar”.
Any buttons that don’t fit in the Action bar can be accessed via the Action bar menu (also referred to as the “Overflow”).
The following drawables can be customized (in alphabeti-cal order, see figure on the next page):
The icon for the Menu button is part of the operating system and cannot be customized.
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
�accountdisabledicon.png. The icon for the Account button in its disabled state.
�accounticon.png. The icon for the Account button.
�action_bar_action_overflow_pressed_background.png. Background image for a pressed command in the Action bar menu.
�action_bar_action_pressed_back-ground.png. Background image for a pressed button in the Action bar.
�action_bar_tab_selected_pressed.png. Background image for a selected and pressed button in the Action bar.
�action_bar_tab_selected.png. Background image for the selected action in the Action bar.
Chapter 09 Customizing the Android Reader App
28
�action_bar_tab_unselected_pressed.png. Background image for an unselected and pressed button in the Action bar.
�action_bar_tab_unselected.png. Background image for unselected buttons in the Action bar.
�backdisabledicon.png. The icon for the Back button in its disabled state.
�backicon.png. The icon for the Back button.
�customicon.png. The icon for the Custom button.
�feedicon.png. The icon for the Newsfeed button.
�flipviewicon.png. The icon for the Flipview button. (This button is normally named Contents.)
�forwarddisabledicon.png. The icon for the Forward button in its disabled state.
�forwardicon.png. The icon for the Forward button.
�helpicon.png. The icon for the Help button.
�homeicon.png. The icon for the Home but-ton, linking to the cover of the magazine.
�libraryicon.png. The icon for the Library button.
�magazineicon.png. The icon for the Magazine button. (This button is normally named Issue.)
�popup_background.9.png. Background for the Action bar menu, including the top green line.
This drawable is also used for the Filter lists in the Library.
�storeicon.png. The icon for the Store button.
�tocicon.png. The icon for the Contents button.
Chapter 09 Customizing the Android Reader App
29
A storeicon B libraryicon C magazineicon D feedicon E customicon F homeicon G flipviewicon
H backicon I forwarddisabledicon J action�bar�tab�unselected�pressed K action�bar�tab�unselected L action�bar�tab�selected M action�bar�action�overflow�pressed�backgroundN popup�background.9
Figure 8.3.3. The Action bar drawables
BA C GFD E H I
M
NKJ L
Chapter 09 Customizing the Android Reader App
30
8.3.4 Text
When a button is not displayed in the Action bar, it can be accessed through the Action bar menu. Items in this menu appear as text only.
The text for these commands can be localized by chang-ing the strings beginning with “action�” in the strings.xml file.
For more information about changing text, see section 5.2 Text.
8.3.5 Visibility
When opening a magazine issue, the following DMSetting controls whether the Action bar will be automatically displayed:
�Navigation/Show toolbar on opening issue
Always show toolbarsThe following DMSetting controls whether the Action bar will always be displayed, without the user being able to hide it:
�Navigation/Always show toolbars
Chapter 09 Customizing the Android Reader App
31
8.4 Flipview
The Flipview appears when the user taps the Contents button in the Navigation bar or Action bar.
The Flipview can also be made to appear automati-cally when the Navigation bar/Action bar is
displayed. This functionality can be set through the fol-lowing DMSetting:
�Flipview/ Show flipview on show toolbar
Figure 8.4. The Flipview components of the Froyo version (top) and Honeycomb version (bottom)
A Flipview Header B Story Viewer / Page Viewer C Page scrubber D Section Viewer E Close button
B
A
CD
B
A
C
DE
E
The Flipview consists of the following components (see image below):
�Header �Story Viewer / Page Viewer �Page Scrubber �Section Viewer �Close button �Drop shadow
How to customize each component is explained in the following sections.
Chapter 09 Customizing the Android Reader App
32
8.4.1 Header
Changing its appearanceChanging the appearance of the Flipview Header can be done as follows:
�Background . Background image. Customizing it can be done by changing the following image:
�flipviewbackground.png
This image is also used as the back-ground for the Story Viewer / Page Viewer.
�Flipview title. For displaying the title of the magazine. This can be modified by changing the following string in the strings.xml file:
�flipviewer�header�title
�Issue description. For displaying issue information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server.
�Close button. (Froyo version only) For closing the Flipview. Changing the look of this button can be done by modifying the following asset:
�flipviewclosebutton.png
Figure 8.4.1. The Flipview Header components
A Flipview title B flipviewbackground C Issue description D fliipviewclosebutton (Froyo version only)
A B C D
Drawables that appear in the Flipview header are stored in the following locations:
�Generic (both Froyo and Honeycomb): res/drawable-nodpi
�Froyo-specific:res/drawables-nodpi-v8
�Honeycomb-specific:res/drawables-nodpi-v11
For an overview of the exact dimensions of the drawables, see appendix C, Image
Dimensions.
Showing or hiding the Flipview header contentThe Flipview Header components can be hidden by dese-lecting the following option in the DMSettings.plist file:
�Flipview/Show flipview header
Chapter 09 Customizing the Android Reader App
33
8.4.2 Story Viewer / Page Viewer
Changing its appearanceChanging the appearance of the Story Viewer / Page Viewer can be done as follows:
�Background . Background image. Customizing it can be done by changing the following image:
�flipviewbackground.png
This image is also used as the back-ground for the Flipview Header.
Thumbnail SizeThe size of the thumbnails in the Story Viewer / Page Viewer can be controlled via the following settings in the DMSettings.plist file:
�Flipview/Thumbs/Minimum page thumb height
�Flipview/Thumbs/Maximum page thumb height
To change the thumbnail size, enter the required size in pixels for each setting.
Thumbnail AwarenessBy default, the thumbnails in the Story Viewer / Page Viewer are shown in landscape orientation, even when the device is rotated to portrait orientation.
Matching the orientation of the thumbnails to the orienta-tion of the device can be done by enabling the following setting in the DMSettings.plist file of the code project:
�Flipview/Thumbs/Make thumbs orientation aware
With this setting enabled, thumbnails in portrait orientation are shown when the device is rotated to portrait mode
and thumbnails in landscape orientation are shown when the device is rotated to landscape mode.
Top Margin(Froyo version only) The margin between the thumbnails and the Flipview Header can be controlled by the following setting in the DMSettings.plist file:
�Flipview/Margins/Pages top margin in Flipview
To change the margins, enter the required size in pixels for each setting.
Margins between thumbnailsThe margins between the thumbnails can be controlled by the following settings in the DMSettings.plist file:
�Froyo version �Flipview/Margins/Flipview thumb
margin. Controls the margin between each thumbnail.
�Honeycomb version �Flipview/Margins/Flipview page
thumb margin. Controls the margin between the pages.
�Flipview/Margins/Flipview article thumb margin. Controls the margin between articles (stories).
To change the margins, enter the required size in pixels for each setting.
Chapter 09 Customizing the Android Reader App
34
Story BulletsA story bullet can be shown in front of each story title.
Figure 8.4.2b. The story bullet in the Flipview
A
A Story bullet
Story bullets are displayed by default and can be hidden by deselecting the following option in the DMSettings.plist file:
�Flipview/Show story bullet
Changing the appearance of the Story bullet can be done by modifying the following drawable:
�flipviewbullet.png
This drawable is stored in the following location:
res/drawable-nodpi
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
Story TitleFor 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 proper-ties 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.
Figure 8.4.2a. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
A Story Title property B Story title displayed in Reader
A
B
Chapter 09 Customizing the Android Reader App
35
Story DescriptionFor each story a short description can be displayed as a further indication of what the story is about.
To enable this feature, select the following option in the DMSettings.plist file:
�Flipview/Show story description
The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier proper-ties can be done by using Content Station or Smart Connection for InDesign.
When text exceeds the width of the page thumbnail, the text is elipsized.
A
B
Figure 8.4.2c. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
A Story Description property B Story Description displayed in Reader
Chapter 09 Customizing the Android Reader App
36
Page numberBelow each page preview, the page number can be displayed.
This feature is controlled through the following option in the DMSettings.plist file:
�Flipview/Show page number
Figure 8.4.2d. A page number is displayed below each page preview
A Page numberA
8.4.3 Page Scrubber
When the Reader App is configured for Page Navigation (see chapter 3, The Concept – section 3, Stories, Pages, Sections and Segments), it is advisable to offer the user the use of the Page Scrubber: a slider with which the user can quickly scroll through the pages of the Page Viewer.
Figure 8.4.3. The Page Scrubber can be used to quickly scroll through the pages of the magazine
A Page scrubberA
The Page Scrubber can be enabled by the following option in the DMSettings.plist file:
�Flipview/Page scrubber enabled
Chapter 09 Customizing the Android Reader App
37
Changing the appearanceChanging the appearance of the Page Scrubber can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders):
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
�pagescrubberbackground.png. The back-ground image behind the Page Scrubber.
�pagescrubberbutton.png. The Page Scrubber button.
�pagescrubbertrackleft.9.png. The image to the left of the Page Scrubber button. 10 Pixels of each side will remain the same, but the mid-dle section will stretch.
�pagescrubbertrackright.9.png. The image to the right of the Page Scrubber button. 10 Pixels of each side will remain the same, but the middle section will stretch.
8.4.4 Section Viewer
Display/hideThe Section Viewer can be displayed or hidden through the following DMSetting:
�Flipview/Show section labels
Section titleThe text that is displayed in the Section Viewer is taken from the Section Title property of a Dossier. Accessing the Dossier properties can be done by using Content Stat ion or Smar t Connect ion for InDes ign.
Figure 8.4.4a. The Section Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the Section in the Section Viewer of the Reader App (bottom)
A Story Title property B Story title displayed in Reader
A
B
Chapter 09 Customizing the Android Reader App
38
Changing the appearanceChanging the appearance of the Section Viewer can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders):
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
�flipviewsectionbackground.png. The background of the Section bar.
�flipviewselectedsectionbutton.png. The image of a selected Section.
�flipview_section_background_unselected.png. The background image behind unselected Sections.
Figure 8.4.4b. The Flipview Header components (Honeycomb version)
A flipviewsectionbackground.png B flipviewselectedsectionbutton.png C flipview�section�background�unselected.png
A B C
8.4.5 Close Button
For the Honeycomb version of the Reader App, the Flipview Close button is located as a separate button below the Flipview, in the bottom right-hand corner. This button consists of drawables and localizable text.
The Flipview Close button on the Froyo version of the Reader App is part of the Flipview header. For
more information, see section 8.4.1 Header.
Changing the appearanceChanging the appearance of the Close button can be done by modifying the following drawables:
�flipview_close_background.png. The background image of the button.
�flipview_close_icon.png. The icon of the Close button (the caret character “̂ ”).
These drawables are stored in the res/drawable-nodpi-v11 folder.
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
Figure 8.4.5. The Close button drawables
A B
A flipview�close�icon B flipview�close�background
Chapter 09 Customizing the Android Reader App
39
Changing the textChanging the text of the button can be done by changing the following string in the strings.xml file:
�flipviewer�close�button�text
8.4.6 Drop Shadow
A dropshadow is located at the bottom of the Flipview. Changing the appearance can be done by modifying the following drawable:
�flipview�bottom�shadow.png
This drawable is stored in the res/drawable-nodpi-v11 folder.
Figure 8.4.6. A shadow is located at the bottom of the Flipview
A
Chapter 09 Customizing the Android Reader App
40
8.5 Top Toolbar
The top Toolbar is used in the Android Reader App v1.x (Froyo) only. For the Android Reader App v1.x
(Honeycomb), the top Toolbar is integrated in the Action bar. For more information, see section 8.3 Action Bar.
Customizing the top Toolbar can be done by changing the following:
�Availability. Enabling or disabling the top Toolbar.
�Visibility settings. Settings controlling the circumstances under which the Navigation bar is displayed or hidden.
�Tap area. The area which the user should tap in order to display the top Toolbar.
�Items. The number of buttons and images that appear in the top Toolbar.
�Drawables. The icons of the buttons and images.
Each is explained in the following sections.
8.5.1 Availability
By default, the top Toolbar is disabled. It can be enabled by selecting the following option in the DMSettings.plist file:
�Navigation/Enable top toolbar
8.5.2 Visibility
Show toolbar on opening issueWhen opening a magazine issue, the following DMSetting controls whether the top Toolbar (as well as the Navigation bar) will be automatically displayed:
�Navigation/Show toolbar on opening issue
Always show toolbarsThe following DMSetting controls whether the top Toolbar (as well as the Navigation bar) will always be displayed, without the user being able to hide it:
�Navigation/Always show toolbars
Chapter 09 Customizing the Android Reader App
41
8.5.3 Tap Area
By default, the top Toolbar appears when the user taps any part of the screen.4
The tap area can be limited to the bottom part and/or top part of the screen by doing the following:
�In the Hotzones section of the DMSettings.plist file, make the following changes:
�Select the option Tap bottom to show toolbar.
�Select the option Tap top to show toolbar.
�(Optional) In the Touch Areas section, define the height of the area in pixels by modifying the bottom or top area height value.
4 The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
8.5.4 Items
The top Toolbar holds the following items:
�Back/Forward buttons. For navigating to previously visited pages
Figure 8.5.4. The components of the top Toolbar
A B
A Back button B Forward button
The inclusion of these items is controlled through the fol-lowing DMSetting:
�Navigation/ToolbarItems
Chapter 09 Customizing the Android Reader App
42
8.5.5 Drawables
The following drawables can be customized:
�backicon.png. The icon for the Back button image.
�backselectedicon.png. The icon for the Back button image in its selected state.
�forwardicon.png. The icon for the Forward button image.
�forwardselectedicon.png. The icon for the Back button image in its selected state.
�topbar.png. The background of the top Toolbar (also used in the Library).
These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.
Various drawables are available as PDF files which can be customized by using Illustrator and subse-
quently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
8.6 Hotzones
Hotzones are areas to the left, right, and bottom of the screen which can be tapped in order to navigate the magazine.
Figure 8.6. Hotzones (shaded in red) are specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page
The following areas are defined:
�Left area: for navigating to the previous page (or the next page when the Reader App is set to Right-to-left mode)
�Bottom or top area: for bringing up the Navigation bar.
�Right area: for navigating to the next page (or the previous page when the Reader App is set to Right-to-left mode)
Chapter 09 Customizing the Android Reader App
43
Each area can be controlled by the following options in the DMSettings.plist file:
�Hotzones/Tap bottom to show toolbar. Activates the bottom Hotzone.
�Hotzones/Tap top to show toolbar. Activates the top Hotzone.
�Hotzones/Tap sides to navigate. Activates the Hotzones to the left and right of the screen.
�Hotzones/Touch areas. Defines the height or width of the different Hotzones.
Hotzones overlaying interactive objectsWhen interactive objects (such as Slide Shows, vid-eos, etc.) are placed within the area of a Hotzone,
their functionality cannot be accessed because of the overlaying Hotzone area. In order to make sure that these interactive objects can still be accessed without being blocked by a Hotzone, the following DMSetting can be set:
�Hotzones/ Keep underlying interactive ele-ments active
8.7 Orientation Lock
The default behavior of the Reader App is such that when the device is rotated, a page of a different orientation is shown. For example: when holding the device in land-scape orientation a page with a corresponding orientation is shown; when rotating the device to portrait orientation a page in that orientation is shown.
Designers can benefit from this feature by offering differ-ently styled pages for each view.
If only pages of a certain orientation need to be shown (only pages in landscape orientation or only pages in portrait orientation), you can make use of the Orientation Lock feature. When enabled, rotating the device will not change the orientation of the page; the page will stay fixed in place instead.
To enable Orientation Lock, set the following option in the DMSettings.plist file:
�Navigation/Orientation lock
Possible values:
�Landscape. For displaying only pages in landscape orientation.
�Portrait. For displaying only pages in portrait orientation.
When the setting is left empty or removed, the orientation lock is disabled and pages in both landscape and portrait orientation are shown.
Chapter 09 Customizing the Android Reader App
44
Fullscreen object orientation lockWhen the Orientation Lock feature is enabled (see above), the objects displayed in full screen mode (such as videos, Slide Shows and Web view overlays) can still be allowed to rotate when the Tablet is rotated by enabling the following option in the DMSettings.plist file:
�Navigation/Allow fullscreen object rotation when locked
Video orientation lockVideos displayed in fullscreen mode can be forced to be displayed in landscape mode across the “height” of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly.
This can be done by enabling the following option in the DMSettings.plist file:
�Navigation/Force fullscreen video orientation
Figure 8.7. With the “Force fullscreen video orientation” option enabled, video is always displayed across the full height of the Tablet, even when the Tablet is held in portrait orientaton.
Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video.
9. The Store
The Android Reader App makes use of the HTML Store. For more information, see appendix G, Customizing the HTML Store.
On the Reader App side, customization is done in the following two areas:
�Communication with the HTML Store
�Reader App components
Each is explained in the following sections.
Chapter 09 Customizing the Android Reader App
45
9.1 Communication With the Store
Communication with the Store is done by configuring the DMSettings file and the DigiMagKioskSettings file.
DMSettings file The DMSettings file handles the communication between the Reader App and the Store. The file can be found in the following location of the project:
�customer�app/assets/DMSettings.plist
The following DMSettings can be configured:
�Store/HTML Store URL. The URL point-ing to index-android.html of the HTML Store. Possible values:
�Blank: the packaged HTML store as part of the Reader App build
�URL: a URL to an externally hosted HTML Store
�Store/HTML Store fallback URL. The URL pointing to a local HTML file. This file is loaded when the HTML Store is not acccessible.
DigiMagKioskSettings FileThe DigiMagKioskSettings file handles the communica-tion with the Content Delivery Platform. The file can be found in the following location of the project:
�customer�app/src/com.woodwing.settings
The following values need to be set:
�DigiMagKioskLibary_URL. The URL to connect to the Kiosk Server.
�DigiMagKioskLibary_ProductID. The product name as defined on the Kiosk Server.
�DigiMagKioskLibary_SecretKey. The secret key as defined on the Kiosk Server.
Chapter 09 Customizing the Android Reader App
46
9.2 Reader App Components
For using the Store in the Reader App, the Store Filter, buttons, and strings can be customized.
Store FilterThe Store Filter can be controlled by the following option in the DMSettings file:
�Store/Enable Filter. Enables or disables the Store Filter.
The following string can be customized for the Store Filter:
�All Issues. The value in the Store Filter for choosing all issues.
The values shown in the Filter itself are defined on the Content Delivery Platform.
For more information, see appendix F, Using the Content Delivery Platform.
ButtonsThe following buttons can be customized:
�stretchablestorebutton.9.png. Used for the Log In button as the button in its available state.
�stretchablestorebutton_disabled.9.png. Used for the Log In button as the button in its non-available state.
Chapter 09 Customizing the Android Reader App
47
StringsThe following strings relating to the in app purchasing functionality can be modified:
Table 9.2. In app purchasing stringsKey Value Description
store_androidmarket_item_purchased \'%1s\' purchased.
Displayed when an issue is purchased. “%1s” can be used to refer to the issue name.
store_androidmarket_item_refunded \'%1s\' refunded.
Displayed when an issue is refunded. “%1s” can be used to refer to the issue name.
store_androidmarket_item_unavailable
\'%1s\' appears to be unavailable in the Android Market.
Displayed when the Android Market cannot find the requested item in the application's product list. This can happen if the product ID is misspelled in your pur-chase request or if an item is unpublished in the application's product list. “%1s” can be used to refer to the issue name.
store_androidmarket_verifica-tion_failed Purchase verification failed.
Displayed when purchase information was received but when the Content Delivery Server failed to verify it.
store_androidmarket_pur-chase_canceled_by_user
You canceled the purchase of\'%1s\'.
Displayed when the user tapped Cancel on the purchase screen. “%1s” can be used to refer to the issue name.
store_androidmarket_pur-chase_canceled_by_server
Purchase of \'%1s\' canceled by server.
Displayed when the charge for the item failed on the Android Market server. “%1s” can be used to refer to the issue name.
store_androidmarket_pur-chase_submitted"
Your purchase of \'%1s\' has been submitted to the Android Market.
Displayed when the purchase order was successfully sent to the Android Market server. “%1s” can be used to refer to the issue name.
store_androidmarket_mar-ket_unavailable
The Android Market is currently unavailable.
Displayed when the network connection is down and thus no connection to the Android Market server can be established.
(Continued on next page)
Chapter 09 Customizing the Android Reader App
48
Table 9.2. In-app purchasing strings (continued)Key Value Description
store_androidmarket_unavail-able
In-app Billing information is not available.
Displayed when the billing API version used is not recognized by the market application and that the market applica-tion may have to be updated. Can also indicate that the user is ineligible for in app billing (for example when a user resides in a country that does not allow in app purchases).
store_androidmarket_pur-chase_error
Error occurred during the pur-chase of \'%1s \'
Displayed when the com.android.vending.BILLING permission is not declared in the manifest. Can also indicate that an appli-cation is not properly signed. “%1s” can be used to refer to the issue name.
store_androidmarket_restor-ing_transactions Restoring transactions. Displayed when a restore transactions
request was successfully sent to the server.store_androidmarket_restor-ing_transactions_error
An error occurred while restoring transactions.
Displayed when an error occurred during a restore transactions request.
Chapter 09 Customizing the Android Reader App
49
10. The Library
The Library is used for showing the user their available issues (those that have been downloaded and/or those that are part of a subscription).
The Library functionality is only available in the Pro, Framework, and Subscription projects of the
Reader App.
Customizing the Library can be done by changing the following:
�Subscription sign-in window
�Library
Each is explained in the following sections.
10.1 Subscription Sign-In Window
DrawablesThe following drawables can be customized for the Subscription Sign-In window (see example on the fol-lowing pages):
�checkbox.png. The image used for the check box in its cleared state.
�checkboxchecked.png. The image used for the check box in its checked state.
�closebutton.png. The image used for the close button.
�headerbackground.png. The background of the header.
�logindialogbackground.png. The back-ground of the Subscription Sign In window.
�stretchablerectbutton.9.png. The I Forgot My Password button.
�textfield_activated_holo_light.9.png. Image. Image
�textfield_default_holo_light.9.png. Image used to indicate that the text field is active (cur-sor is placed in the field).
�textfield_disabled_focused_holo_light.9.png. Image used to indicate that the text field is not active (cursor is not placed in the field).
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
Chapter 09 Customizing the Android Reader App
50
TextThe following strings can be customized for the Library Log In window:
�Username. The label in the user name box.
�Password. The label in the password box.
�Remember me. The label for the Remember Me check box.
�Submit. The label for the Submit button.
�I forgot my password. The label for the I Forgot My Password button.
�Privacy. The label for the Privacy link.
�License Agreement. The label for the License Agreement link.
�Please sign in to your Android Edition Account. The text used in the Sign In header.
Chapter 09 Customizing the Android Reader App
51
Figure 10.1. The Subscription sign in window
A headerbackground B closebutton C checkbox D stretchablestorebutton.9 E stretchablerectbutton.9 F logindialogbackground
BA
C
D E
F
Chapter 09 Customizing the Android Reader App
52
10.2 Library
SettingsThe following DMSettings can be changed for the Library:
�Store/Library cache time. The time after which issues that are part of a subscription are refreshed in the Library.
�Enable login button. Enables the Log In/Log Out button in the Library.
�Enable library filter. (Honeycomb only) Enables the Library filter in the Library.
�Enable library segment filter. (Honeycomb only) Enables the Library Segment filter available in the Library.
DrawablesThe following drawables can be customized for the Library (see example on the following pages):
�librarydownload.png. The image used for the Download button.
�library_login_icon.png. (Honeycomb only) The image used for the Login button.
�library_logout_icon.png. (Honeycomb only) The image used for the Logout button.
�librarydownloadpause.png. The image used for the download Pause button.
�librarydownloadrefresh.png. The image used for the download Resume button.
�library_shelf_issue_drop_shadow.png. (Honeycomb only) The image used for the drop-shadow behind the issue preview.
�library_shelf_landscape.png. (Honeycomb only) The image used for the Library shelfs when the device is held in landscape orientation.
�library_shelf_portrait.png. (Honeycomb only) The image used for the Library shelfs when the device is held in portrait orientation.
�popup_background.9.png. Background for the Filter lists.
This drawable is also used for the Action bar menu.
These drawables are stored in the res/drawable-nodpi and res/drawable-nodpi-v11 folders.
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
Chapter 09 Customizing the Android Reader App
53
TextThe following strings can be customized for the Library:
�Installing. The installing label.
�Issue options. Text for the context menu which is activated by “tap and hold” on an issue.
�Delete issue. Command in the context menu when deleting an issue from the Library.
�Sign In. (Froyo only) The label for the Sign In button.
�Sign Out. (Froyo only) The label for the Sign Out button.
The following strings can be customized for the Library Filter:
�All Segments. (Honeycomb only) The value in the Segment Filter for choosing all Segments.
�All issues. (Honeycomb only) The value in the Library Filter for choosing all issues.
The values shown in the Filter itself are defined on the Content Delivery Platform. For more information,
see appendix F, Using the Content Delivery Platform.
Chapter 09 Customizing the Android Reader App
54
Figure 10.2a. The Library view (Froyo version)
A storeheader B stretchablestorebutton.9 C topbar
B
A
B
C
Chapter 09 Customizing the Android Reader App
55
Figure 10.2b. The Library view (Honeycomb version)
A library�top�bar B library�shelf�landscape.png C library�shelf�issue�drop�shadow D popup�background.9
A
B
B
B
C
C
D
Chapter 09 Customizing the Android Reader App
56
11. General App Features
The Reader App functionality can be further enhanced by customizing the following features:
�Audio �Custom objects �Downloading methods �Hotzones �In-app Billing �Newsfeeds �“No internet connection” indicators �Scrolling indicators �Slide Shows �Text View �Video �Web Elements
Each feature is explained in the following sections.
11.1 Audio
For the playback of audio, the following features can be customized:
�Overlay drawables
�Audio settings
�Embedded audio controls
Each is described in the following sections.
Chapter 09 Customizing the Android Reader App
57
11.1.1 Overlay Drawables
Overlay drawables are icons that appear over other objects to indicate their intention or state. For audio, icons are available to indicate that an audio file can be played or stopped.
A audioplayenabledicon
Figure 11.1.1. The audio play enabled icon
A
The following drawables can be customized.
�audioplaydisabledicon.png. The audio icon when a streamed audio file is not available or when no internet connection is available.
�audioplayenabledicon.png. The audio icon shown when the audio file is being played.
�audiostopenabledicon.png. The audio icon when the audio file is being played.
Various drawables are available as PDF files which can be customized by using Illustrator and subse-
quently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
The audio overlay drawables are stored in the res/draw-able-nodpi folder.
11.1.2 Audio Settings
Audio keeps playing while swiping from page to page within the same articleAudio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user sub-sequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.
This functionality is controlled by the following DMSetting:
�Navigation/Continue audio within article
Chapter 09 Customizing the Android Reader App
58
11.1.3 Embedded Audio Controls
By default, the controls for an embedded audio file are always displayed. If needed, the controls can be hidden for each individually placed audio file.
To hide the controls for a placed audio file, edit the exported magazine.xml file as follows:
Step 1. Open the exported magazine.xml file in a plain-text editor.
Step 2. Locate the created audio object by searching for <type>audio</type>.
Step 3. In the audio id section, add the follow-ing property:
<backgroundaudio>true</backgroundaudio>
Possible values: �true: controls will be hidden �false: controls will be shown5
Example:<object>
<id>95</id><type>audio</type><x>63</x><y>573</y><width>35</width><height>31</height><audio id=”95”>
<url>images/story_23/audio_95.mp3</url><autoplay>false</autoplay><backgroundaudio>true</backgroundaudio>
</audio></object>
5 The controls are also shown when the backgroundaudio prop-erty is not included
11.2 Custom Objects
Objects with custom, 3rd-party functionality can be included in the magazine. The functionality of the ele- ment is completely upon the developer; it can be an extra user interface element, a list connecting to a database, a 3D object, etc.
The creation of a Custom Object on a layout starts by creating a Web Element; this defines the size of the frame in which the Custom Object is to be displayed and its position on the layout.
Custom objects are added to the Digital Magazine project in Eclipse by doing the following:
Step 1. Cre a te a new c l a s s i n the Reader App. This new class implements ExternalDMObjectInterface
Step 2. I m p l e m e n t t h e E x t e r n a l - DMObjectInterface.
See the Android Reader App Custom Objects java doc for a description of the
interface (downloadable from the Digital Magazine section of the Enterprise 7 Product page on the Community site).
Step 3. Create a plist resource file named DMCustomObjects.plist.
Step 4. In the created plist file, create an entry with the following settings:
�Value: your newly created class name (this should be the full package name),
�Key: a string you can use to refer to your class.
Step 5. In the magazine.xml file, create an entry for your custom object and set classtype to the key of the entry in the plist file.
Chapter 09 Customizing the Android Reader App
59
11.3 Downloading Methods
Downloading of magazines can be offered in one of two ways:
�Non-progressive
�Progressive
Each is described in detail below.
11.3.1 Non-progressive Download Method
For the non-progressive download method, the following can be configured:
�Settings
�Drawables
Each is described in detail below.
Auto open magazineAs soon as the download and installation process is complete, the issue or Segment can be made to
open automatically.
The following conditions exist:
�The Library must be viewed at the time the download is completed.
�When the download is performed in the back-ground (for instance when the app is minimized or when another issue is being viewed), the issue will not automatically open.
To have an issue automatically opened, set the following DMSetting:
�Library/Auto open magazine
DrawablesThe following drawables can be customized for the pro-gressive download method:
�downloadbackground.9png. The back-ground of the download progress bar.
�downloadleft_disabled.9png. The back-ground of the download progress bar in its disabled state.
�downloadleft.9.png. The download prog-ress bar.
Chapter 09 Customizing the Android Reader App
60
�librarydownload.png. The Start Download button.
�librarydownloadpause.png. The Pause Download button.
�librarydownloadrefresh.png. The Resume Download button.
These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.
11.3.2 Progressive Download Method
For the progressive download method, the following can be modified:
�Drawables
�Settings
�Strings
Each is described in detail below.
DrawablesThe following drawables can be customized for the pro-gressive download method:
�downloadbackground.9png. The back-ground of the download progress bar.
�downloadleft_disabled.9png. The back-ground of the download progress bar in its disabled state.
�downloadleft.9.png. The download prog-ress bar.
�librarydownload.png. The Start Download button.
�librarydownloadpause.png. The Pause Download button.
�librarydownloadrefresh.png. The Resume Download button.
These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.
Chapter 09 Customizing the Android Reader App
61
SettingsAs soon as the issue or Segment is readable during the download process, it 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:
�Library/Auto open magazine
StringsThe following strings can be modified/localized for the progressive download method:
<!-- Progressive Download --><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>
Chapter 09 Customizing the Android Reader App
62
11.4 In-App Billing
The Google In-app Billing framework can be used for offering magazines as separate purchases instead of via a subscription.
This feature can only be used in Reader App proj-ects which have Store functionality, namely the Pro
and Subscriptions frameworks.
Making use of this feature involves performing the fol-lowing steps:
Step 1. Add the BASE64 encoded RSA key of the publishers merchant account to the Content Delivery Platform by doing the following:
Step 1a. Log in to https://market.android.com/publish/Home.
Step 1b. Click Edit Profile.
Step 1c. Copy the BASE64 encoded pub-lic key.
Step 1d. Add this key to the Android Reader App on the Content Delivery Platform by following the steps as described in appendix F, Using the Content Delivery Platform – section 4.1, Configuring Reader Apps.
Step 2. (Optional) Modify and/or localize the in-app billing related software strings in the Reader App as explained in section 9. The Store.
Chapter 09 Customizing the Android Reader App
63
11.5 Newsfeeds
When the user taps the Newsfeed button in the Navigation bar, the Newsfeed page appears as an overlay on top of the page (Froyo) or as an embedded page. Its content is taken from the Internet.
Figure 11.5. On Froyo, the Newsfeed page is displayed as an overlay on top of the magazine
A Close button
A
Changing the appearance(Froyo only) The single customizable component of the Newsfeed feature is the Close button. Changing its appearance can be done by modifying its asset (located in the res/drawable-nodpi folder):
�closebuttondefaultstate.png
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
Newsfeed URL The URL of the Newsfeed is derived from the following option in the DMSettings.plist file:
�Navigation/Newsfeed URL
Chapter 09 Customizing the Android Reader App
64
11.6 No Internet Connection Indicators
When no internet connection is available, an indication is given to the user by a bar in the top of the frame in which the content is to be shown. Locations in which this indica-tion can appear are for example:
�The Store �Frames with streaming video �Frames with streaming audio �Newsfeed windows �Widgets �Web Elements
The indicator consists of a background image and an image containing the text. The following drawables can be customized:
�nointernetconnectionbackground.png. Background image of the bar.
�nointernetconnectionlabel.png. The text displayed in the bar.
A nointernetconnectionbackground B nointernetconnectionlabel
Figure 11.6. The No Internet Connection Drawables
A B
The No Internet Connection drawables are stored in the res/drawable-nodpi folder.
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
Chapter 09 Customizing the Android Reader App
65
11.7 Scrolling Indicators
Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains
scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and right-hand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded.
Figure 11.7. A scrolling indicator in the form of a faded edge indicates to the user that the content of the frame can be scrolled
A
A
A Scrolling indicator
To enable Scrolling Indicators for Scrollable Areas, enable the following DMSetting:
�Colors/ Enable native scrolling indicators
Chapter 09 Customizing the Android Reader App
66
11.8 Slide Shows
For Slide Shows, overlay drawables can be customized: icons that appear over other objects to indicate their intention or state. For Slide Shows, an icon is available to indicate that the image on the page is in fact a Slide Show. This icon is positioned in the lower left-hand corner of the image.
A slideshowicon
A
Figure 11.5. The Slide Show icon
The Slide Show drawable is stored in the res/drawable-nodpi folder.
The drawable to customize is:
�slideshowicon.png. The overlay shown in the bottom left corner of a Slide Show.
Various drawables are available as PDF files which can be customized by using
Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
11.9 Text View
The page scaling functionality of the Android Reader App makes it possible to also read magazines which have been primarily designed for the iPad. These magazines could contain Text View functionality, in which the page is shown as a HTML page, allowing the user to adjust the font size.
Because the Android Reader App does not support the Text View feature, an image is shown instead. This image can be customized as required.
The image can be found in the following location:
�res/drawable-nodpi/textview�mode�not�supported.9.png
These 1-pixel black images are 9-patch images, consisting of a 3x3 image with 1 black pixel in the
middle and 4 black pixels around it to indicate it can be stretched in all four directions. Change these dimensions as required.
Chapter 09 Customizing the Android Reader App
67
11.10 Video
For the video functionality, the following can be customized:
�Overlay drawables
�Video Player drawables
�Hiding embedded video controls
Each is explained in the following sections.
Chapter 09 Customizing the Android Reader App
68
11.10.1 Overlay Drawables
Overlay drawables are icons that appear over other objects to indicate their intention or state. For videos, an icon is available to indicate that the image on the page is in fact a Video. This icon is positioned in the center of the image.
A
A videoDisabledIcon B videoDEnabledIcon
B
Figure 11.10.1. The video disabled and enabled icons
Overlay drawables are stored in the res/drawable-nodpi folder.
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
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.
Chapter 09 Customizing the Android Reader App
69
11.10.2 Video Player Drawables
Video player drawables are icons that appear as the con-trols for controlling the video playback.
Video player drawables are stored in the These drawables are stored in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders.
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 of the video scrubber.
�downloadbackground.9.png. The back-ground of the video scrubber to the right of the scrubber button (indicates the amount of video remaining).
�downloadbackleft.9.png. The background of the video scrubber to the left of the scrubber button (indicates the amount of video which has played).
�maximize.png. The icon used for viewing the video in fullscreen mode.
�minimize.png. The icon used for taking the video out of fullscreen mode.
�next.png. The icon used for forwarding the video.
�pause.png. The icon used for pausing the video.
�play.png. The icon used for playing the video.
�prev.png. The icon used for reversing the video.
Figure 11.10.2. The video control drawables
A B D FC E G
A prev B downloadbackleft.9 C pause D audio-controlsliderbutton E next F downloadbackground G maximize
Chapter 09 Customizing the Android Reader App
70
11.11 Hiding Embedded Video Controls
The controls for an embedded video can be hidden so that they don’t appear on the page. This can be con-trolled for each placed video individually. The user can control the playback of the video by taking the video into fullscreen mode.
To hide the controls for a placed video, the exported magazine.xml file needs to be edited as follows:
Step 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 fol-lowing property:
<moviecontrols>false</moviecontrols>
Possible values: �true: controls will be shown6
�false: controls will be hidden
(continues on next page)
6 The controls are also shown when the moviecontrols property is not included
Example:
<object><id>96</id><type>movie</type><x>523</x><y>339</y><width>435</width><height>291</height><movie id=”95”>
<url>images/story136/video_96.mp4</url><x>523</x><y>339</y><width>435</width><height>291</height><autoplay>false</autoplay><autofullscreen>false</autofullscreen><moviecontrols>false</moviecontrols>
</movie></object>
If the <moviecontrols> setting is set to false (controls hidden) and the <autofullscreen> setting is set to true
(video automatically played in fullscreen mode), the con-trols will be shown, else the user would not be able to leave fullscreen mode.
Chapter 09 Customizing the Android Reader App
71
11.12 Web Elements
When a Web Element is displayed as a pop-up, the window in which the Element is displayed contains the following customizable drawables:
�back_white.png. The Back button in its available state.
�closebuttondefaultstate.png. The button to close the window with.
Figure 11.12. The Web Elements drawables
A B
A back�grey B closebuttondefaultstate
These drawables are stored in the res/drawable-nodpi folder.
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
253
10
253Andro
id
This chapter discusses the process of building the Android Reader App using Eclipse.
1. Universal Builds
The Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same
app, the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1.2).
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.
�Any Froyo-specific drawables are located in the drawable-nodpi-v8 folder.
�The drawable-hdpi, drawable-mdpi and draw-able-ldpi folders still exist but only contain the app icon.
Building the Android Reader App
Chapter 10 Building the Android Reader App
254Andro
id
2. Preparation
Before being able to build a Reader App using Eclipse, the following preparation steps are required:
�Preparing Eclipse
�Preparing a Reader App without Store functionality
�Prepar ing a Reader App with Store functionality
Each is explained in the following sections.
2.1 Eclipse
Before working with the provided Reader App projects in Eclipse, make sure to have a fully working workspace set up for developing Android apps in Eclipse.
For instructions about installing the Android SDK and steps for setting up your environment, see http://devel-oper.android.com/sdk/installing.html.
Chapter 10 Building the Android Reader App
255Andro
id
2.2 Reader App Without Store Functionality
When the magazine content needs to be part of the Reader App (as is the case for non-Store versions), the magazine that was exported from Content Station needs to be merged with the project. To do this, proceed as follows:
Step 1. Import the Basic or Standard project into your workspace.
Step 2. Drag the exported magazine.xml file together with the images folder into the follow-ing folder in Eclipse:
�customer�app/assets/magazine
Step 3. Build the project. (See section 3. Building.)
2.3 Reader App With Store Functionality
A Reader App with Store functionality needs to be able to communicate with the Content Delivery Platform on which the content resides. For this purpose, pertinent information needs to be included in the final build of the Reader App, and the Reader App needs to be registered on the Content Delivery Platform. To achieve this, perform the following steps:
Step 1. Send an e-mai l to [email protected] stating that you would like to distribute a Reader App by making use of the Content Delivery Platform.
You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform (WoodWing will do this for you). When processed, you will be sent the relevant settings required for inclusion in the build:
�The Content Delivery Platform URL
�A secret key for the Reader App, as defined on the Content Delivery Platform
�A product ID for the Reader App, as defined on the Content Delivery Platform
Step 2. Import the Pro or Subscription proj-ect into your workspace.
Step 3. Use the set t ings prov ided by WoodWing for building your Reader App. (See section 2. Building.)
Chapter 10 Building the Android Reader App
256Andro
id
3. Building
In order to build the Reader App, perform the following steps:
Step 1. (Optional) When building the Reader App with Store functionality, enter the details received from WoodWing (see section 2.3 Reader App With Store Functionality) in the Eclipse project as outlined in chapter 9, Customizing the Android Reader App – section 9.1 Communication With the Store.
Step 2. From the Run menu, choose Run.
The Run As dialog box appears.
Step 3. Choose Android Application from the list.
Step 4. A binary .apk file will be generated in the following location:
�<project folder>/bin
257
11
257HTML5
Customizing the Reader App is important when you want to achieve any of the following:
�Giving it a unique look and feel (reflecting the content of the issues that will be viewed)
�Enabling those features that you want your users to use
�Localizing the Reader App into a particular language
In this chapter you will learn all about customizing the HTML5 Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The fol-lowing main customization areas are defined:
�General App settings
�Navigation
�General App features
Customizing the HTML5 Reader App
Chapter 11 Customizing the HTML5 Reader App
258HTML5
1. Required Tools
In order to perform the steps as outlined in this chapter, the following tools are required:
�CSS editor. For editing CSS files. Use your favorite editor for this task.
�Image editor. For editing images. Use your favorite editor for this task.
�Config files editor. For editing configuration files. Use your favorite editor for this task, such as an XML editor or plain-text editor.
2. Project Files
Customization of the HTML5 Reader App is achieved by editing various types of files.
The following files can be edited:
�CSS files. Used for changing the appearance of the Reader App in the form of background colors, text, etc. Different CSS files are available for different areas of the Reader App (listed in alphabetical order):
Each file can be found in the reader/themes/default/components folder and its
sub folders.
�activeelement.css. Used for controlling functionality related to Active Elements.
�audio.css. Used for controlling function-ality related to audio.
�base.css. Used for controlling the gen-eral appearance and functionality of the Reader App.
�config.css. This file is reserved for future use.
�flipview.css. Used for controlling func-tionality related to the Flipview.
�hotspot.css. Used for controlling func-tionality related to Hotspots.
�navigator.css. Used for controlling functionality related to the Story and Page Navigators.
�scrollarea-images.css. Used for con-trolling the scrollbars of Scrollable Area’s.
Chapter 11 Customizing the HTML5 Reader App
259HTML5
�slider.css. Used for controlling func-tionality related to the Page Scrubber in the Flipview.
�slideshow.css. Used for controlling functionality related to Slide Shows.
�toolbar.css. Used for controlling the Navigation bar and top Toolbar.
�video.css. Used for controlling function-ality related to video.
�weblink.css. Used for controlling func-tionality related to Web Links.
�Images. Used for changing the appearance of the Reader App in the form of buttons, icons, etc. All images are located in the reader/themes/default/img folder.
�Configuration files. Used for changing the functionality of the Reader App:
�DMSettings.plist. Located in the reader/config folder
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:
�Images. Interface components such as but-tons, icons, logos and headers.
�Colors. The color of text and backgrounds.
�Text. The text of specific titles as they appear in various places of the Reader App.
�Settings. The functionality of the Reader App.
For some features, making changes in only one area will be sufficient, whereas other features require changes in multiple places.
Chapter 11 Customizing the HTML5 Reader App
260HTML5
3.1 Images
Images are user interface components such as buttons, icons and headers. Each of these images can be easily replaced by your own images.
Take note of the following:
�Renaming images is not allowed since the names are directly linked to the code in the Reader App
�All image names are written in camelCase format
�All images need to be in PNG file format, with the exception of the loader.gif file and some images of the Navigation Zones which are in jpeg format.
Various images are available as PDF files which can be customized by using Illustrator and subsequently
saved as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
Exactly which images can be customized per feature is explained in the remainder of this chapter.
3.2 Colors
Colors for objects and text are controlled via CSS files. Detailed information about the colors that can be changed or each feature is provided in the remainder of this chapter.
Chapter 11 Customizing the HTML5 Reader App
261HTML5
3.3 Text
Limited resources are available for changing the text which appears in the Reader App. The text that can be changed originates from various sources, and can there-fore be changed by different means:
�Images. Most images include icons only, but the following images also include text:
�Buttons of the Navigation bar
To change the text for these images, modify the respective file. (For more information, see section 3.1 Images.)
�Dossier properties. Setting the properties of a Dossier controls the following:
�Section. Each section in the Section Viewer is derived from the Section Title property.
�Story title. The title for a story below a thumbnail in the Flipview is derived from the Story Title property.
Figure 3.3. Text originates from various sources in the system
A Server property B Dossier property C Image with text
B B C
A
�Story description. The story descrip-tion below the story title in the Flipview is derived from the Description property.
To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken from their respective custom metadata proper-ties. For more information about setting these values, see the Enterprise 7 Admin Guide, chap-ter 40, Digital Magazine Configuration.)
�Issue Maintenance page. The Issue Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header.
To add or change this text, change the Issue Description property on the Issue Maintenance page in Enterprise Server.
Chapter 11 Customizing the HTML5 Reader App
262HTML5
3.4 Settings
Some of the customizations for the Reader App are per-formed in the DMSettings.plist file, which allows changing specific Reader App functionality. Which settings these are and for which features they are used is discussed in the remainder of this chapter.
For 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 previewing the Reader App in a supported Web browser.
Note that a Web Server is required for this purpose.
Chapter 11 Customizing the HTML5 Reader App
263HTML5
5. General App Features
The following general features can be modified for the Reader App:
�General appearance. The general look of the Reader App.
Each is explained in the following sections.
5.1 General Appearance
The following general Reader App features relating to its appearance can be customized (see image on the fol-lowing page):
Reader App background CSS file: base.cssSelector: body
�Background image: bg-body.png �Background color �Background gradient: bg-body-gradient.png
Reader App page containerCSS file: base.cssSelector: bodyClass selector: .container
�background-color �border-color
Background loader imageCSS file: base.cssSelector: bodyClass selector: .loading
�Loader image: loader.gif
Unsupported Browser Web pageWhen the magazine is loaded in an unsupported Web browser, a message is displayed to the user. This Web page can be customized to your needs. Location:
�reader/unsupported�browser.html
Chapter 11 Customizing the HTML5 Reader App
264HTML5
Custom scrollbarsScrollbars appear in the following locations:
�Long pages (pages that are longer than the defined height of the page area)
�Scrollable areas
These are controlled by the following images and CSS references:
Vertical scrollbar �Images: scrollbar-thumb.png, scrollbar-track.
png �CSS references:
CSS files: base.css, scrollarea-images.cssClass selector: .scrollable
Horizontal scrollbar �Images: scrollbar-thumb-hor.png, scrollbar-
track-hor.png �CSS references:
CSS files: base.css, scrollarea-images.cssClass selector: .scrollable
Chapter 11 Customizing the HTML5 Reader App
265HTML5
Figure 5.2. Customizing the general appearance of the HTML5 Reader App
A bg-body.png B border-color C background-color D loader.gif
A B C D
Chapter 11 Customizing the HTML5 Reader App
266HTML5
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 �Navigation bar �Flipview �Top Toolbar �Hotzones �Navigation Zones
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.
6.1 Story vs Page Navigation
The user can be offered one of two types of navigation:
�Story navigation. In this configuration, navi-gation is done as follows:
�To navigate from one story to another, the user navigates horizontally (from left to right or right to left)
�To navigate within a story (from page to page), the user navigates vertically (up/down or down/up)
�Page navigation. In this configuration, navi-gation is done as follows:
�To navigate from page to page, the user navigates horizontally (from left to right or right to left)
�Navigating from story to story is not pos-sible by means of a finger swipe or by using the mouse/keyboard.
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, select the following option in the DMSettings.plist file:
�Navigation/Horizontal page navigation
Chapter 11 Customizing the HTML5 Reader App
267HTML5
6.2 Navigation Bar
The Navigation bar is used as a starting point for navigat-ing the magazine. From it, the user can quickly navigate to specific areas both within the Reader App itself (the cover, table of contents, etc.) as well as to external content for instance by using the Newsfeed button.
Customizing the Navigation bar can be done by changing the following:
�Items. The number of buttons and the order in which they appear.
�Images. The appearance and position of the buttons.
Each is explained in the following sections.
6.2.1 Items
The Navigation bar can contain the following buttons:
�Home. For navigating to the magazine cover.
�TOC. For navigating to the table of contents page.
�FlipView. For bringing up the Flipview.
The buttons are managed by means of the following option in the DMSettings.plist file:
�Navigation/ToolbarItems
The value of each item is linked to specific function-ality and should not be changed.
Removing/adding/reordering buttonsTo remove or add a button, or change the order in which they appear, modify the content by using a suitable XML editor.
Chapter 11 Customizing the HTML5 Reader App
268HTML5
6.2.2 Images
The images that appear in the Navigation bar are stored in the img/bottomToolbar folder.
The Toolbar images are available as PDF files which can be customized by using Illustrator and subse-
quently saved as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/Enterprise%207.0.x/Software.
The following images can be customized (listed in alpha-betical order):
�flipviewHoverIcon.png. The icon for the Flipview button when the mouse is hovered over it. (This button is normally named Contents.)
�flipviewIcon.png. The icon for the Flipview button. (This button is normally named Contents.)
�flipviewSelectedIcon.png. The icon for the Flipview button in its selected state. (This button is normally named Contents.)
�homeHoverIcon.png. The icon for the Home button when the mouse is hovered over it.
�homeIcon.png. The icon for the Home but-ton, linking to the cover of the magazine.
A homeHoverIcon B tocSelectedIcon C flipviewIcon
A B C
Figure 6.2.2. The Navigation bar images
�homeSelectedicon.png. The icon for the Home button in its selected state.
�tocHoverIcon.png. The icon for the Contents button when the mouse is hovered over it.
�tocIcon.png. The icon for the Contents button, linking to the page with the table of contents.
�tocSelectedIcon.png. The icon for the Contents button in its selected state.
Chapter 11 Customizing the HTML5 Reader App
269HTML5
6.3 Flipview
The Flipview appears when the user taps the Contents button in the Navigation bar. It shows the Flipview Header, the Story Viewer / Page Viewer, and the Page Scrubber.
Figure 6.3. The Flipviewer appears when tapping the Contents button in the Navigation bar
A Flipview Header B Story Viewer / Page Viewer C Page scrubber
B
C
A
The appearance of the Flipview can be modified by changing any of the following:
�Background �Header �Thumbnail border �Story title �Story bullets �Story description �Page scrubber
Each is explained in the following sections.
Chapter 11 Customizing the HTML5 Reader App
270HTML5
6.3.1 Background
The following areas of the background can be customized:
Flipview backgroundThe background image of the Flipview.
�Image: flipviewBackground.png �CSS reference:
CSS file: flipview.cssClass selector: .flipviewpanel
Figure 6.3.1. The Flipview images
A flipviewBackground
A
6.3.2 Header
The Flipview Header contains the following editable components:
Issue description For displaying issue information. This can be added by fill-ing out the Description property on the Issue Maintenance page in Enterprise Server.
Close buttonThe close button to close the Flipviewer with.
�Image: flipview-horizontal-button-close.png �CSS reference:
CSS file: flipview.cssClass selector: .flipview-closer
Figure 6.3.2. The Flipview header components
A Issue description B flipview-horizontal-button-close
A B
Chapter 11 Customizing the HTML5 Reader App
271HTML5
6.3.3 Thumbnail Border
The currently displayed story is marked by a border around the corresponding thumbnail in the Story Viewer / Page Viewer. The border color can be controlled by the following setting:
CSS file: flipview.cssClass selector: .flipview-active-thumb
�border-color
Figure 6.3.3. A border is shown around a thumbnail to indicate which story currently is viewed
A Thumbnail border
A
6.3.4 Story Title
Below the first page of each story, the Story Title can be shown.
This is especially useful when the Reader App is configured for Page Navigation (see section 6.1
Story vs Page Navigation). The story title is displayed below the first page of each story and is therefore a clear indication of where each story starts.
The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier proper-ties can be done by using Content Station or Smart Connection for InDesign.
Figure 6.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)
A Story Title property B Story title displayed in Reader
A
B
Chapter 11 Customizing the HTML5 Reader App
272HTML5
6.3.5 Story Bullets
A story bullet is shown in front of each story title.
Figure 6.3.5. A story bullet is shown in front of each story title
A flipview-horizontal-bullet-circle
A
The story bullet is controlled by the following image and CSS reference:
�Image: flipviewBullet.png �CSS reference:
CSS file: flipview.cssClass selector: .flipview-bullet
6.3.6 Story Description
By default, a short description is displayed below each story title as a further indication of what the story is about. (Contrary to the iPad and Android Reader Apps, there is currently no DMSetting to show/hide this description.)
The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier proper-ties can be done by using Content Station or Smart Connection for InDesign.
Figure 6.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)
A Story Description property B Story Description displayed in Reader
A
B
Chapter 11 Customizing the HTML5 Reader App
273HTML5
6.3.7 Page Scrubber
The Page Scrubber is used for quickly scrolling through the pages of the Page Viewer / Story Viewer.
Figure 6.3.7. The Page Scrubber components
A slider-bg B slider-button
BA
The Page Scrubber is controlled by the following image sand CSS references:
Page Scrubber button �Image: slider-button.png �CSS reference:
CSS file: slider.cssClass selector: .slider-handle
Page Scrubber background �Image: slider-bg.png �CSS reference:
CSS file: slider.cssClass selector: .slider-panel
6.4 Hotzones
Hotzones are areas to the sides or bottom of the Reader App screen which the user can tap to make the Navigation bar or top Toolbar appear.
The size of the sensitive area can be set by the Touch Areas setting of the DMSettings file.
Bottom area heightHeight of the bottom Hotzone. Default value: 80 (in pixels).
Left area heightHeight of the left Hotzone. Default value: 44 (in pixels).
Right area heightHeight of the right Hotzone. Default value: 44 (in pixels).
Note that Hotzones only work on touchscreen devices, not on a desktop PC/laptop (for these sys-
tems, Navigation zones are used, see section 6.5 Navigation Zones).
Chapter 11 Customizing the HTML5 Reader App
274HTML5
6.5 Navigation Zones
On desktop PCs and laptops, Navigation Zones are used for moving to the next/previous page/story or for navigating between images of a Slide Show; all by using the mouse. When hovering over such a zone, the area is made visible by a bar running along the side of the screen and an direction indicator in the center of that bar.
Figure 6.5. The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)
The Navigation Zones are controlled by the following images and CSS references:
Left Navigation Zone �Images: bg-rail.png, arrows-click.jpg �CSS references:
CSS file: navigator.cssClass selectors: .navigator-left,
.navigator-left-active
Right Navigation Zone �Images: bg-rail.png, arrows-click.jpg �CSS references:
CSS file: navigator.cssClass selectors: .navigator-right,
.navigator-right-active
Top Navigation Zone �Images: bg-rail-vertical.png, arrows-click-
vertical.jpg �CSS references:
CSS file: navigator.cssClass selectors: .navigator-top,
.navigator-top-active
Bottom Navigation Zone �Images: bg-rail-vertical.png, arrows-click-
vertical.jpg �CSS references:
CSS file: navigator.cssClass selectors: .navigator-bottom,
.navigator-bottom-active
Chapter 11 Customizing the HTML5 Reader App
275HTML5
6.6 Top Toolbar
Customizing the top Toolbar can be done by changing the following:
�Availability. Enabling or disabling the top Toolbar.
�Images. The icons of the buttons and images.
Each is explained in the following sections.
6.6.1 Availability
By default, the top Toolbar is disabled. It can be enabled by the following setting in the DMSettings file:
�Navigation/Enable top toolbar
Possible values:
�true. Enables the top Toolbar
�false. Disables the top Toolbar
6.6.2 Images
The following images can be customized:
�tocTableHoverIcon.png. The icon for the TOC button when the mouse is hovered over it.
�tocTableIcon.png. The icon for the TOC button.
�tocTableSelectedIcon.png. The icon for the TOC button in its selected state.
Chapter 11 Customizing the HTML5 Reader App
276HTML5
7. General App Features
The Reader App functionality can be further enhanced by customizing the following features:
�Audio �Scrollable Areas �Slide shows �TOC List �Video
Each feature is explained in the following sections.
7.1 Audio
For the playback of audio, overlay images can be customized.
Overlay images are icons that appear over other objects to indicate their intention or state. For audio, icons are available to indicate that an audio file can be played or stopped.
A audio-play-overlay
Figure 7.1. The audio play enabled icon
A
The audio overlay images are controlled by the following images and CSS references:
Audio play overlayThe audio icon shown when the audio file is not being played.
�Image: audio-play-overlay.png �CSS reference:
CSS file: audio.cssClass selector: .audio-adornment-start
Audio stop overlayThe audio icon shown when the audio file is being played.
�Image: audio-stop-overlay.png �CSS reference:
CSS file: audio.cssClass selector: .audio-adornment-stop
Chapter 11 Customizing the HTML5 Reader App
277HTML5
7.2 Slide Shows
For Slide Shows, the following can be customized:
�Navigation zones
�Overlay images
Each is explained in the next sections.
7.2.1 Navigation Zones
(Desktop PCs/laptops only) Navigation Zones are used for navigating between images of a Slide Show by using the mouse.
For information about how to customize these, see sec-tion 6.5 Navigation Zones.
7.2.2 Overlay Images
Overlay images are icons that appear over other objects to indicate their intention or state. For Slide Shows, an icon is available to indicate that the image on the page is in fact a Slide Show. This icon is positioned in the lower left-hand corner of the image.
A slideshowIcon
A
Figure 7.2.2. The Slide Show icon
The Slide Show overlay is controlled by the following image and CSS reference:
�Image: slideshow-icon.png �CSS reference:
CSS file: slideshow.cssClass selector: .slideshow-adornment
Chapter 11 Customizing the HTML5 Reader App
278HTML5
7.3 TOC List
The TOC List is a pop-up window containing a table of contents.
For each story, the following is shown:
�Thumbnail of the first page of the story �The story title �The story description
Figure 7.3. Tapping the TOC button in the top toolbar brings up the TOC List
A
A TOC List
Implementing of this feature involves the following steps:
�Enabling the functionality
�Changing the story text
Each is explained in the following sections.
7.3.1 Enabling the Functionality
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:
�Navigation/Enable top toolbar. Enables the top Toolbar.
Chapter 11 Customizing the HTML5 Reader App
279HTML5
7.3.2 Changing the story text
The story title and story description are taken from the respective Dossier properties of the Dossier that has been created for the story.
Figure 7.3.2. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for dis-playing the story title and description in the TOC List (bottom)
A Story Description property B Story Description dis-played in Reader C Story Title property D Story title displayed in Reader
B
A
C
D
Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
7.4 Video
For the video functionality, overlay images can be customized.
Overlay images are icons that appear over other objects to indicate their intention or state. For videos, an icon is available to indicate that the image on the page is in fact a Video. This icon is positioned in the center of the image.
The following image can be customized:
The Video overlay is controlled by the following image and CSS reference:
�Image: video-play-overlay.png �CSS reference:
CSS file: video.cssClass selector: .video-adornment
A videoEnabledIcon
A
Figure 7.4. The video play icon
280
12
280HTML5
Contrary to the other Reader Apps, the HTML5 Reader App does not have a building process as such.
Since the HTML5 Reader App can only be used for sin-gle-issue magazines, the only step which needs to be performed is bundling the exported magazine content into the Reader App project.
1. Bundling the Content
To bundle the magazine content, perform the following steps:
Step 1. Export the magazine using Content Station. (See chapter 6, Exporting Content.)
Note that the export results in the following two folders:
�html5. The content intended for use in HTML5 Reader Apps.
�magazine. The content intended for use in Reader Apps on iPad or Android devices.
Step 2. Open the html 5/content folder and copy its content.
Step 3. Paste the content into the following location of the Reader App:
�./content
This is the default location; custom loca-tions can be defined by means of the
following setting in the DMSettings file:
�Magazine Configurat ion URL. Location of the issue.json configuration file.
Building the HTML5 Reader App
Chapter 12 Building the Android Reader App
281HTML5
�Magazine Content URL. Location of the magazine content (the images and pages folders).
282
13
282
Reader Apps which do not include Store function-ality are distributed with the magazine content included as part of the app.
Reader Apps without Store functionality include the Basic Edition and Standard Edition. Such Reader Apps are offered as a single download: for each magazine issue a new Reader App needs to be downloaded.
In this chapter, you will learn all about a Reader App with no store functionality.
1. Submitting the Reader App
The following sections describe the steps involved for submitting a Reader App to the iTunes App Store, and to an Android app store.
Distributing Reader Apps Without Store
Chapter 13 Distributing Reader Apps Without Store
283
1.1 To the iTunes App Store
To submit the Basic or Standard Reader App to the iTunes App Store, perform the following steps:
For a detailed, step-by-step guide of this whole pro-cess, download the iTunes Connect Developer
Guide (see chapter 1, Intro – section 3, Additional Documentation for a download link).
See appendix H, Tips and Best Practices for further guide lines around this process.
Step 1. Log in to iTunes Connect: https://itu-nesconnect.apple.com/.
Step 2. Register the Reader App with the App Store by providing all relevant details about the Reader App as well as screenshots for dis-play in the App Store.
Step 3. Upload the Reader App to iTunes by using Apple’s Application Uploader.
After completing the upload process, the Reader App needs to be approved by Apple.
Step 4. Release the Reader App to go live in the App store. This can be done automatically (as soon as the app is approved), or manually.
1.2 To an Android App Store
To submit the Basic or Standard Reader App to an Android app store, follow the guide lines as provided by that store.
284
14
284
Reader Apps which include Store functionality are distributed separately from the magazine content.
Reader Apps with Store functionality include the Pro Edition, Standard Edition, Subscription Edition, and Apple Subscription Edition.
Users only download the Reader App once after which they can use the Store functionality to view the available issues. The magazine content is offered for free or as a paid issue (possibly via a subscription service) and is downloaded into the same Reader App. This way, only one Reader App for each title needs to be downloaded onto the digital device. The Library functionality is used to view and open the available issues.
In order to facilitate this process, the WoodWing Content Delivery Platform is required.
In this chapter, you will learn all about the Content Delivery Platform, as well as how to build and distribute a Reader App with Store functionality.
Distributing Reader Apps With Store
Chapter 14 Distributing Reader Apps With Store
285
1. The Content Delivery Platform
A typical workflow for getting content to a Reader App by using the Content Delivery Platform would be as follows:
�The Reader App is downloaded onto the device from the App Store.
�By using the Store functionality of the Reader App, an overview of the available issues is received from the Content Delivery Platform. (Issues available via subscription are shown in the Library.)
�When downloading, the magazine content is received from the Content Delivery Platform.
This process is displayed in figure 1 below.
app store
Figure 1. For versions of the Reader App containing a Store, the user downloads an empty Reader App from the App Store and accesses the Content Delivery Platform to see which issues are available. When downloading an issue, the magazine content is received from the Content Delivery Platform
Content Delivery Platform Digital device
Reader App without contentOverview of available issues
Magazine content
The Content Delivery Platform takes care of the follow-ing tasks:
�It manages the information about the Reader App
�It manages the information about the issues available to the Reader App
�It provides the magazine content �It allows you to add development devices:
devices with which issues can be viewed that have not yet been published. Also, the pay-ment process is bypassed, so no purchasing is required in the case of paid issues. This allows testing of content before it is made live to end users.
�It acts as a bridge between an external Subscription server and the Reader App.
AvailabilityThe Content Delivery Platform is available as a ser-vice hosted by WoodWing. For more information, see http://www.woodwing.com/en/digital-magazine/content-delivery-service.
Chapter 14 Distributing Reader Apps With Store
286
2. Distribution Workflow
The workflow for distributing a Reader App with Store functionality can be split into two parts:
1. Distributing the Reader App1
2. Distributing the magazine content in the form of issues
Each part is explained in the following sections.
1 The Store is available as an HTML Store and does not neces-sarily have to be integrated in the Reader App, it can also be hosted separately.
3. Distributing the Reader App
Distributing the Reader App with Store functionality involves submitting it to the relevant store.
See appendix B, Tips and Best Practices for further guide lines around these processes.
This process only applies to Reader Apps which are distributed for the first time. Updating an already
distributed Reader App involves a different process. For more details, see section 3.1 Updating the Reader App).
Submitting Android Reader AppsFor submitting Android Reader Apps, follow the guide lines as provided by the relevant store.
Submitting to iTunes ConnectTo submit the Pro, Framework, Subscription, or Apple Subscription Reader App to the iTunes App Store, per-form the following steps:
For a detailed, step-by-step guide of this whole pro-cess, download the iTunes Connect Developer
Guide (see chapter 1, Intro – section 3, Additional Documentation for a download link).
Step 1. Log in to iTunes Connect: https://itunesconnect.apple.com/.
Step 2. Register the Reader App with the App Store by providing all the relevant details about the Reader App as well as screenshots for display in the App Store.
Step 3. Upload the Reader App to iTunes by using Apple’s Application Uploader.
After completing the upload process, the Reader App needs to be approved by Apple.
Step 4. When one or more issues have been made available for download (see section 4.
Chapter 14 Distributing Reader Apps With Store
287
Distributing Issues) release the Reader App to go live in the App store. This can be done automatically (as soon as the app is approved), or manually.
3.1 Updating the Reader App
There may come a time when you want to distribute an updated version of the Reader App itself, for instance because you want to make use of different and/or new functionality.
Updating the Reader App can be done by doing one of the following:
�iPad: Follow the instructions as outlined in the iTunes Connect Developer Guide (see chapter 1, Intro – section 3, Additional Documentation for a download link).
�Android: Follow the instructions as provided by the relevant store.
Chapter 14 Distributing Reader Apps With Store
288
4. Distributing Issues
The workflow for distributing an issue is as follows:
Step 1. (Paid issues only, only available for the iPad Reader App version) Register the issue with the iTunes Connect service as an In-App Purchase.
Step 2. Register the issue with the Content Delivery Platform.
Each step is explained in the following sections.
4.1 Registering With iTunes Connect
(iPad Reader App version only) This step only needs to be performed when the user will have to pur-
chase the issue. When the issue is offered free of charge, you can skip this step since no interaction is required between the Reader App and an app store.
To register an issue in iTunes Connect as an in-app pur-chase, follow the steps as outlined in the iTunes Connect Developer Guide. (see chapter 1, Intro – section 3, Additional Documentation for a download link).
4.2 Registering With the CDP
Issues can be registered in two ways on the Content Delivery Platform:
�As a full issue. An issue containing all content.
For more information, see appendix F, Using the Content Delivery Platform – section 3.4.1, Adding a Full Issue.
�An issue split into segments. (iPad Reader App version and Android Reader App v1.1 only) An issue in which content is added as separate segments.
For more information, see appendix F, Using the Content Delivery Platform – section 3.4.2, Adding an Issue in Segments.
289
A
289
In chapter 5, Creating Content, the concept of using a DM Artboard is explained in which layouts do not have to be created in a specific size.
However, it is practical to create the layout in the size of the largest device. Also, the DM Artboard concept sup-ports creating content for a single device, without the use of an artboard (although it is recommended to configure artboards).
This all means that at some stage you want to create a layout in the exact dimensions of a particular device. This appendix provides the information for achieving this.
1. Formula
To calculate the exact page size for a specific device, the following formula is used:
[page width or page height in pixels]/[dpi value] in
(Where in stands for inches1)
For example, calculating the width of a page for a device which is 1024 pixels wide and uses a 132 dpi setting, the following calculation would be performed:
1024/132 in = 558.5 points
The easiest way of calculating this is to enter the formula straight into the Page Size Width or Height boxes of the New Document dialog box in InDesign. When pressing the Tab key to tab out of the width or height box, InDesign will automatically calculate the entered fracture into the correct value, and present it in the measuring unit that InDesign is set to.
Some widely used values are shown in section 1.1 Device Settings.
1 Instead of “in”, you can also type “inch”. Note that when using a non-English version of InDesign, you might have to enter the translated version of “inch”.
Layout Sizes
Appendix A Layout Sizes
290
1.1 Device Settings
Below is a listing of the settings used for some popular devices:
Apple iPad �Width: 1024 pixels �Height: 768 pixels �Dots per inch: 132 dpi
However, due to the height of the iPad’s toolbar of 20 pixels, the actual working area is as follows:
Page in landscape orientation: �Width: 1024 pixels �Height: 748 pixels
Page in portrait orientation: �Width: 768 pixels �Height: 1004 pixels
Samsung Galaxy �Width: 1024 pixels �Height: 600 pixels �Dots per inch: 169 dpi
However, due to the height of the Galaxy’s toolbar of 38 pixels, the actual working area is as follows:
Page in landscape orientation: �Width: 1024 pixels �Height: 562 pixels
Page in portrait orientation: �Width: 600 pixels �Height: 986 pixels
1.2 Page Sizes
The tables on the following page show popular page dimensions converted to various units of measurements based on different dpi settings.
Appendix A Layout Sizes
291
Table 3.1a. Page dimensions converted to various units of measurements for use on the iPadSize Value
dpi Picas Points Inches Millimeters Centimeters748 pixels 132 34p0 408 pt 5.6667 in 143.933 mm 14.3933 cm768 pixels 132 34p10.9 418.9 pt 5.8181 in 147.779 mm 14.779 cm1004 pixels 132 45p7.636 547.6 pt 7.6061 in 193.194 mm 19.3194 cm1024 pixel 132 46p6.5 558.5 pt 7.7569 in 197.026 mm 19.7026 cm
Table 3.1b. Page dimensions converted to various units of measurements for use on the Samsung GalaxySize Value
dpi Picas Points Inches Millimeters Centimeters562 pixels 169 19p11.432 239.4 pt 3.3254 in 84.466 mm 8.4466 cm600 pixels 169 21p3.621 255.621 pt 3.5503 in 90.178 mm 9.0178 cm
986 pixel 169 35p0.071 420.071 pt 5.8343 in 148.192 mm 14.8192 cm1024 pixels 169 36p4.26 436.26 pt 6.0592in 153.903mm 15.3903 cm
292
B
292
This appendix describes how to create fully marked-up articles for use in the Text View mode of the iPad Reader App.
Due to the different article formats used by InDesign CS4/InCopy CS4 and InDesign CS5/InCopy CS5, the described method can only be applied to articles cre-ated using InDesign CS5 and InCopy CS5. InDesign CS4 or InCopy CS4 users can make use of the method as described in chapter 5, Creating Content – section 3.5, Text View Mode.
1. Text View Markup
The Text View Markup feature allows you to create articles which will display in fully marked up text in the Text View mode of the Digital Magazine Reader, including:
�Font styles such as bold, italic, underlining and strike-through
�Vertical text alignment (relative to the baseline) �Drop caps �Subscript, superscript and capitalization �Left-to-right or right-to-left support �Swatches (CMYK, Labs, and RGB) �Bullets and numbering1
�Tables1
�Hyperlinks (but no cross-links)1 �Footnotes (hyperlinked)1 �No-breaks (text selections only)1
This is done by using the XHTML 1.1 / CSS 2.1 format, thereby offering a vast amount of styling possibilities and features (such as applying background color, border styles, etc.). This can even be controlled down to Brand or Issue level.
1 This feature is expressed in a HTML element and can therefore be styled as such
Creating Text View Markup Articles
Appendix B Text View Markup Articles
293
2. Requirements
In order to make use of this feature, the following is required:
�Enterprise Server 7.0.8, configured for digital magazines
�InDesign CS5 or InCopy CS5 with Smart Connection 7.2 installed
�Content Station 7.2 �Digital Magazine Reader App version 1.5 or
higher
3. Creating the Article
To create an article for Text View Mode using InDesign CS5, perform the following steps:
Step 1. Create a layout and save it to the system.
This could be the layout used for the page in landscape orientation, or it can be a dummy layout, solely used for creating an article. (If the latter, make sure that it is not included in the export of the magazine.)
Step 2. Create the article by doing one of the following:
�Convert one or more text frames into an article.
Enterprise can be set up in such a way that any selected image frames
are automatically made part of an article. However, articles intended to be used for Text View mode are not allowed to contain any images. Check with your administrator if this feature is enabled.
(Optional, depending on your company’s setup) Once the article is created, check that no article components containing an image exist in the article by verifying the article’s content in the Smart Connection panel, the Elements panel or in Content Station. Should any image component exist, delete it from the article.
�Place an already created article (created using InDesign CS5 or InCopy CS5) on the layout.
Styling can be applied by making use of the following methods:
Appendix B Text View Markup Articles
294
�By assigning an Element label to an article component. The name of the Element label is then mapped to the CSS style.
�By applying paragraph and character styles. The name of the paragraph or character style is then mapped to the CSS style.
�By using a combination of both methods.
Either method can be configured to be used on the fol-lowing levels:
�System wide �Per Brand �Per Issue
This method helps in standardizing the method of using the Text View Markup feature while altering
the look and feel of the publications it is applied to.
Each method is further explained in the following sections.
3.1 Element Label Mapping
The Element Label Mapping method is a typical method for applying simple text mark-up and works by applying an Element label to each article component. The name of the Element label is then mapped to the corresponding name in the style sheet. This way, different styling can be set up for each applied Element label.
When using this method, take note of the following:
�Paragraph and character styles are ignored/flattened (meaning that the applied formatting is lost) and Web styles (CSS) are used instead.
�Manually applied overrides to styles are respected. (For limitations concerning using overrides, see section 4. About Overrides.)
Your system administrator will have set up the required Element labels and will have made sure
that they are mapped to the corresponding CSS style. Check with the administrator which Element label should be applied in order to achieve a particular styling effect.
When using this method, styling the article text is not actually necessary; the Element label to CSS
mapping will take care of this. You could therefore have a very basic looking article which will display highly styled in the Digital Magazine Reader App. On the other hand, you can use this method to label styled articles in a fully designed layout in landscape orientation for creating a Text View version which will look completely different due to the mapping between Element labels and Web styles.
Appendix B Text View Markup Articles
295
3.2 Styles Mapping
The Styles Mapping method is typically used for:
�Advanced and/or detailed text mark-up
�Situations in which strong house styling is required
�Applying specific styles unknown to InDesign/InCopy
The method works by applying paragraph styles, charac-ter styles, or table styles to the text or table. The names of the applied styles are then mapped to the corresponding name in the style sheet.
When using this method, take note of the following:
�Manually applied overrides to styles are respected. (For limitations concerning using overrides, see section 4. About Overrides.)
�Unknown styles are flattened.
�The use of special characters in the style name is supported.
Your system administrator will have set up the required paragraph/character/table styles and will
have made sure that they are mapped to the correspond-ing CSS style. Check with the administrator which style should be applied in order to achieve a particular styling effect.
4. About Overrides
When applying a manual override to a particular style, such as applying a bold style to a paragraph style which turns the paragraph into italic text, take note of the following:
�Font sizes must be defined in ems in the CSS style in order to support zooming on the digital device.
�Font colors cannot be overridden through CSS styles.
Appendix B Text View Markup Articles
296
5. Using Tables
Another powerful advantage of the Text View Markup feature is the fact that it supports tables.
When including a table in your article, take note of the following:
�Table style definitions are not exported.
�Table style names are exported and can be mapped to CSS styles.
�Bodies, headers and footers are supported.
�Table features such as merged cells and bor-ders are not supported.
6. Known Limitations
The following are not supported by the Text View Markup feature:
�Font family mapping �Font mapping by using the DigitalMagazine-
Defs.xml file �Inline images �Shapes (including lines) �Text indents �Cross-references �Text frame properties such as multiple
columns �Print-specific features such as tracking, kern-
ing, scaling, baseline shift, etc.
Appendix B Text View Markup Articles
297
7. Including Images
Including a header image(Optional) To display an image as a header at the top of the article, perform the following steps:
Step 1. In InDesign or Content Station, access the Properties dialog box for the image that needs to be set as the header.
This image needs to have the exact dimensions (width and height) in which it
is going to be displayed on the digital device.
Step 2. From the Intent list, choose Header.
Step 3. Click OK to close the Properties dialog box.
Make sure that only one image in the Dossier has the intent property set to
Header.
Including other images(Optional) Additional images can be added to the story, which are displayed below the article, by doing the following:
�Make sure that images to be used are added to the same Dossier as the story it belongs to.
Including an image via CSSImages can also be included by referencing them in the CSS files. This can be used for instance to automatically include an icon anywhere in the text, or to create a back-ground image/pattern.
Check with your system administrator if images are added in this way.
14
C
14
This appendix provides an overview of the dimen-sions of the customizable Reader App images.
Some images used on Android devices are NinePatch graphics; these are identifiable by their
f i le name which ends wi th a “9” (such as “downloadleft.9.png”). Information about such files can be found here: http://developer.android.com/guide/developing/tools/draw9patch.html.
1. iPad
The table on the following pages lists the image dimen-sions used for the iPad Reader App (in alphabetical order).
Image Dimensions
Appendix C Image Dimensions
15
Table 1. iPad image dimensions (in pixels)Dimensions
Image name width heightaccountIcon.png 138 92accountSelectedIcon.png 138 92audio_controller.png not usedaudioControlBG.png 404 146audioControlDisabled.png 37 28audioControlPlay.png 37 28audioControlSliderBGDark.png 32 9audioControlSliderBGLight.png 32 9audioControlSliderButton.png 14 14audioControlStop.png 37 28audioPlayDisabledIcon.png 36 36audioPlayEnabledIcon.png 36 36audioStopEnabledIcon.png 36 36audioTopBarIcon.png 50 47audioTopBarSelectedIcon.png 50 47back_grey.png not usedback_white.png not usedbackIcon.png 47 50backSelectedIcon.png 47 50bookmarkAdd.png 20 20bookmarkTopBarIcon.png 52 47bookmarkTopBarSelectedIcon.png 52 47bottombar.png not usedcheckbox.png 16 16
checkboxChecked.png 16 16
(Continues on next page)
Appendix C Image Dimensions
16
Table 1. iPad image dimensions (in pixels) (Continued)Dimensions
Image name width height
close_white.png not usedcloseButton.png 34 35closeButtonDefaultState.png 30 30customicon.png not usedcustomselectedicon.png not useddefault_thumb.pngDefault-Landscape.png 1024 748Default-Portrait.png 768 1024Default.png 768 1024downloadbackground.9.png not useddownloadleft.9.png not useddownloadFailedErrorLabel.png 303 30downloadFailedReloadButton.png 44 31downloadFailedReloadButtonPressed.png 44 31facebook.png not usedfeedIcon.png 75 50feedSelectedIcon.png 75 50flipviewBackground.png 1024 225flipviewBullet.png 9 9flipviewCloseButton.png 21 21flipviewIcon.png 75 50flipviewSectionBackground.png 768 23flipviewSelectedIcon.png 75 50flipviewSelectedSectionButton.png 1 23forwardIcon.png 47 50
(Continues on next page)
Appendix C Image Dimensions
17
Table 1. iPad image dimensions (in pixels) (Continued)Dimensions
Image name width height
forwardSelectedIcon.png 47 50galaxytoc.png not usedgridViewBackground.png 768 299gridViewBackgroundFirstRow.png 768 351headerBackground.png 325 77headerBarShadow.png 1 8helpIcon.png 75 50helpSelectedIcon.png 75 50homeIcon.png 75 50homeSelectedIcon.png 75 50Icon.png 72 72issueShadow.png 181 11issueShadowLarge.png 475 33libraryDownload.png 75 40libraryDownloadPause.png 75 40libraryDownloadRefresh.png 75 40libraryEmptyShelf.png 1024 220libraryFirstShelf.png 1024 351libraryIcon.png 75 50librarySelectedIcon.png 75 50libraryShelf.png 1024 300libraryUpdateIcon.png 75 50libraryUpdateSelectedIcon.png 75 50loginDialogBackground.png 325 355line.png not used
(Continues on next page)
Appendix C Image Dimensions
18
Table 1. iPad image dimensions (in pixels) (Continued)Dimensions
Image name width height
maximize.png not usedminimize.png not usednext.png not usednoInternetConnectionBackground.png 6 164noInternetConnectionLabel.png 196 14pageScrubberBackground.png 1024 37pageScrubberButton.png 26 26pageScrubberTrackLeft.png 32 9pageScrubberTrackLeft9.png not usedpageScrubberTrackRight.png 32 9pageScrubberTrackRight9.png not usedpassDialogBackground.png 325 330pause.png not usedplay.png not usedprev.png not usedpreviewHeaderBackgroundLandscape.png 1 562previewHeaderBackgroundPortrait.png 1 249previewShadowLandscape.png 8 1previewShadowPortrait.png 1 8progressiveDownloadOverlayBar.png 1024 111segmentedControlGridButton.png 13 13segmentedControlSingleIssueViewButton.png 13 12segments_shadow.png 768 22segments_stack_background.png 189 228shadowBarVertical.png 8 1
(Continues on next page)
Appendix C Image Dimensions
19
Table 1. iPad image dimensions (in pixels) (Continued)Dimensions
Image name width height
shareFacebook.png 54 54shareFacebookDisabled.png 54 54shareMail.png 54 54shareMailDisabled.png 54 54shareTableIcon.png 55 50shareTableSelectedIcon.png 55 50shareTwitter.png 54 54shareTwitterDisabled.png 54 54singleIssueViewBackground.png 768 614singleIssueViewBackgroundLandscape-old.png 768 704singleIssueViewBackgroundLandscape.png 1024 661singleIssueViewBackgroundPortrait.png 768 917slideshowIcon.png 36 36storeclosebutton not usedstoreHeader.png 1024 42storeIcon.png 75 50storeNoInternetErrorBackground.png 1 58storeNoInternetErrorLabel.png 273 20storeSelectedIcon.png 75 50stretchablePostButton.png 20 36stretchablerectbutton.9.png not usedstretchableStoreButton.png 13 26stretchablestorebutton_disabled.9.png not usedstretchablestorebutton.9.png not usedstretchableSubscribeButton.png 20 38
(Continues on next page)
Appendix C Image Dimensions
20
Table 1. iPad image dimensions (in pixels) (Continued)Dimensions
Image name width height
stretchableSubscriptionStoreButton.png 20 36subscriptionFormBackground.png 1 145textViewHeader.png 768 20textViewImagesShadow.png 768 20tocIcon.png 75 50tocSelectedIcon.png 75 50tocTableIcon.png 47 50tocTableSelectedIcon.png 47 50tocThumbBackground.png 78 57tocThumbBackgroundVertical.png 57 76transparentImageForFlipviewButton.png 150 110topbar.png not usedtwitter.png not usedUpdatableIssueIcon.png 23 23videoDisabledIcon.png 36 36videoEnabledIcon.png 36 36
Appendix C Image Dimensions
21
2. Android
The table below lists the image dimensions used for the Android Reader Apps (in alphabetical order).
Table 2. Android image dimensions (in pixels)Android 1.3 (Froyo) Android 1.3 (Honeycomb)
Image name width height width heightaccountdisabledicon.png not used 75 51accounticon.png 75 51 75 51accountselectedicon.png 75 50 not usedaction_bar_action_overflow_pressed_background.png not used 1 47action_bar_action_pressed_background.png not used 1 56action_bar_tab_selected_pressed.png not used 1 56action_bar_tab_selected.png not used 1 9action_bar_tab_unselected_pressed.png not used 1 56action_bar_tab_unselected.png not used 1 3audiocontrolsliderbutton.png 14 14 14 14audioplaydisabledicon.png 36 36 36 36audioplayenabledicon.png 36 36 36 36audiostopenabledicon.png 36 36 36 36back_white.png 54 32 54 32backdisabledicon.png not used 47 50backicon.png 47 50 47 50backselectedicon.png 47 50 not usedbottombar.png 1 50 not usedcheckbox.png 16 16 16 16
checkboxchecked.png 16 16 16 16closebutton.png 34 35 34 35closebuttondefaultstate.png 32 32 32 32
(Continues on next page)
Appendix C Image Dimensions
22
Table 2. Android image dimensions (in pixels) (Continued)Android 1.3 (Froyo) Android 1.3 (Honeycomb)
Image name width height width height
customicon.png 75 50 75 50customselectedicon.png 75 50 not useddownloadbackground.9.png 15 11 15 11downloadfailederrorlabel.png 1 101 1 101downloadfailedreloadbutton.png 24 28 24 28downloadleft_disabled.9.png 17 13 15 11downloadleft.9.png 15 11 15 11feedicon.png 75 50 75 50feedselectedicon.png 75 50 not usedflipviewbackground.png 3 225 3 225flipview_bottom_shadow not used 1 4flipviewbullet.png 9 9 9 9flipviewclosebutton.png 21 21 not usedflipview_close_background.png not used 228 29flipview_close_icon.png not used 20 20flipview_section_background_unselected 1 39 1 39flipviewicon.png 75 50 75 50flipviewsectionbackground.png 1 23 1 23flipviewselectedicon.png 75 50 not usedflipviewselectedsectionbutton.png 1 23 1 23forwarddisabledicon.png not used 55 50forwardicon.png 47 50 47 50forwardselectedicon.png 47 50 not usedgridviewbackground.png not used not usedgridviewbackgroundfirstrow.png not used not usedheaderbackground.png 323 77 323 77
(Continues on next page)
Appendix C Image Dimensions
23
Table 2. Android image dimensions (in pixels) (Continued)Android 1.3 (Froyo) Android 1.3 (Honeycomb)
Image name width height width height
headerbarshadow.png not used not usedhelpicon.png 75 50 75 50helpselectedicon.png 75 50 not usedhomeicon.png 75 50 75 50homeselectedicon.png 75 50 not usedicon.png (res/drawable-ldpi) 36 36 36 36icon.png (res/drawable-mdpi) 48 48 48 48icon.png (res/drawable-hdpi) 72 72 72 72librarydownload.png 60 35 60 35librarydownloadpause.png 60 35 60 35librarydownloadrefresh.png 60 35 60 35library_login_icon.png not used 75 51library_logout_icon.png not used 75 51library_shelf_issue_drop_shadow.png not used 223 239library_shelf_landscape.png not used 1280 364library_shelf_portrait.png not used 800 364library_top_bar.png not used 1 42libraryicon.png 75 50 75 50libraryselectedicon.png 75 50 not usedlogindialogbackground.png 325 355 325 355magazine_selected_icon.png 75 50 not usedmagazine_icon.png 72 50 72 50maximize.png 47 47 47 47minimize.png 47 47 47 47next.png 67 47 67 47nointernetconnectionbackground.png 6 164 6 164
(Continues on next page)
Appendix C Image Dimensions
24
Table 2. Android image dimensions (in pixels) (Continued)Android 1.3 (Froyo) Android 1.3 (Honeycomb)
Image name width height width height
nointernetconnectionlabel.png 196 14 196 14pagescrubberbackground.png 1 37 1 37pagescrubberbutton.png 26 26 26 26pagescrubbertrackleft9.png 34 26 34 26pagescrubbertrackright9.png 34 26 34 26passdialogbackground.png not used not usedpause.png 67 47 67 47play.png 67 47 67 47popup_background.9.png not used 70 22prev.png 67 47 67 47progressivedownloadoverlaybar.png 1 91 1 91slideshowicon.png 36 36 36 36storeheader.png 1024 42 not usedstoreicon.png 75 50 75 50storeselectedicon.png 75 50 not usedstretchablerectbutton.9.png 12 28 12 28stretchablestorebutton_disabled.9.png 17 22 17 22stretchablestorebutton.9.png 17 22 17 22textfield_activated_holo_light.9.png not used not usedtextfield_default_holo_light.9.png not used 42 18textfield_disabled_focused_holo_light.9.png not used 21 18textfield_disabled_holo_light.9.png not used not usedtextfield_focused_holo_light.9.png not used not usedtextfield_multiline_activated_holo_light.9.png not used not usedtextfield_multiline_default_holo_light.9.png not used not used
(Continues on next page)
Appendix C Image Dimensions
25
Table 2. Android image dimensions (in pixels) (Continued)Android 1.3 (Froyo) Android 1.3 (Honeycomb)
Image name width height width height
textfield_multiline_disabled_focused_holo_light.9.png not used not usedtextfield_multiline_disabled_holo_light.9.png not used not usedtextfield_multiline_focused_holo_light.9.png not used not usedtextview_mode_not_supported.9.png 3 3 3 3tocicon.png 75 50 75 50tocselectedicon.png 75 50 not usedtopbar.png 1 48 not usedvideodisabledicon.png 36 36 36 36videoenabledicon.png 36 36 36 36
Appendix C Image Dimensions
26
3. HTML Store
The following table lists the image dimensions used for the HTML Store (in alphabetical order).
Table 3. HTML Storeimage dimensions (in pixels)Image name Width Heightbg-rail-vertical.png 1600 48bg-rail.png 48 1600button.png 101 28checkbox.png 16 16checkboxChecked.png 16 16checkmark.png 16 16closeButton.png 36 36gridview-icon-active-button.png 53 28gridview-icon-button.png 53 28gridview-item-shadow.png 164 9gridview-shelf.png 2 290GridViewIcon.png 13 13single-bg.jpg 1024 470single-shelf.png 1024 62SingleViewIcon.png 13 12
4. HTML5 Reader App
The following table lists the image dimensions used for the HTML5 Reader App (in alphabetical order).
Table 4. HTML5 Reader App image dimensions (in pixels)Image name Width Heightarrows-click-vertical.png 48 56arrows-click.jpg 56 48audio-play-overlay.png 36 36audio-stop-overlay.png 36 36bg-body-gradient.png 1 1800bg-body.png 10 10bg-img.png 4 4bg-rail-vertical.png 1600 48bg-rail.png 48 1600close-button.png 36 36flipviewBackground.png 1 208flipviewBullet.png 9 9flipview-horizontal-button-close.png 34 35flipview-horizontal-thumb-bg.png 165 250flipviewHoverIcon.png 111 63flipviewIcon.png 111 63flipviewSelectedIcon.png 111 63homeHoverIcon.png 101 62homeIcon.png 101 62homeSelectedIcon.png 101 62loader.gif 32 32loader-small.gif 16 16scrollbar-thumb.png 9 91
(Continues in next column)
Appendix C Image Dimensions
27
Table 4. HTML5 Reader App image dimensions (in pixels) - continuedImage name Width Height
scrollbar-thumb-hor.png 91 9scrollbar-track.png 9 571scrollbar-track-hor.png 571 9slider-bg.png 1 34slider-button.png 24 24slideshow-icon.png 36 36tocTableHoverIcon.png 55 38tocTableIcon.png 55 38tocTableSelectedIcon.png 55 38tocHoverIcon.png 111 62tocIcon.png 111 62tocSelectedIcon.png 111 62video-play-overlay.png 36 36
28
D
28
A Widget is an HTML5 component with distinct functionality such as a 360-degree view of an object, a slide show, a zoomable image, etc. This functionality is provided through the use of HTML, Javascript, CSS, and possible related source files.
This appendix explains in detail how to prepare Widgets for use in InDesign.
1. File Format
A Widget is stored in the Enterprise system as a .htmlwidget file. This is essentially a zipped file with a changed extension. By changing the extension to .zip, the file can be unpacked.
Working With Widgets
Appendix D Working With Widgets
29
2. File Structure
A Widget contains the following files and folders:
�HTML file. The page in which the component is embedded. It is this page which is placed in the assigned frame on the layout.
�A manifest.xml file. A configuration file describing the fields which can be modified.
�One or more Javascript files.
�CSS files. (Optional)
�Sources files. Depending on the type of Widget, additional files such as images, videos, etc, are included.
All files are created in the regular manner of creat-ing a HTML5 component, with the exception of the manifest.xml file. The creation of this file is described in section 3. Creating the manifest.xml File.
Once the magazine has been exported, the magazine.zip file contains the following Widget files:
�All files that were part of the Widget bundle (see above but with the exception of the mani-fest.xml file).
�A config.xml and config.json file. These con-tain the results of the settings chosen in the Widget panel in InDesign. Both have the same content.
�All additional files (if any) that were linked to by making use of the available options in the Widget panel in InDesign.
3. Creating the manifest.xml File
The manifest.xml file is a configuration file contain a vari-able list of fields. These fields appear in the Widget panel in InDesign, thereby allowing the user to change the behavior and/or content of the Widget. (For more infor-mation, see chapter 5, Creating Content – section 5.7, Creating a Widget.)
The following types of fields can be used:
�Boolean �String (including multistring) �StringList (with the possibility for adding a
string) �Number �File (can be filtered by type and format) �FileList (can be filtered by type and format) �Color (RGB) �Group
For a detailed description of the use of these fields, see the ww�dm�manifest�v1.xsd file (available from the Enterprise Development page on the Community Site http://community.woodwing.net/products/Enterprise%207.0.x/Development).
To create a manifest.xml file, perform the following steps:
Step 1. Create an XML file using your favorite XML editor.
Step 2. Add the minimum content as shown in figure 3 on the next page.
Note that <rootfile> holds the file which should be loaded by the Reader App.
Step 3. In the <properties> section, add the required fields.
Step 4. Save the file as a manifest.xml.
Appendix D Working With Widgets
30
Descriptions can be added to property (in the form of <description> tags), in order to
explain in more detail what the option should be used for. When a description exist, a Help icon appears in the Widget panel. When the user hovers the mouse over the icon, the description will appear as a tooltip.
<?xml version="1.0" encoding="UTF-8"?><manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" usedSchemaVersion="1.0"> <widget widgetVersion="1.0"> <description src="http://some.url/providing/more/information">This is the main description of the Widget.</description> <rootfile>main.html</rootfile> <properties> </properties> </widget></manifest>
Figure 3. The default content of the manifest.xml file
For an example of a manifest file, see the provided Widget samples on the Community site.
Appendix D Working With Widgets
31
4. Making the Widget Available
To make the Widget available for InDesign users, perform the following steps:
Step 1. Collect all files that make up the Widget including the manifest.xml file into one folder.
Step 2. In the folder, select all files.
Step 3. Combine all selected files into a .zip file.
Note that all files of the folder are bundled into a .zip file, not the folder itself.
Step 4. Change the extension of the file to .htmlwidget.
Step 5. Upload the Widget into Enterprise or inform the end users where the file can be accessed so that they can upload it themselves using Content Station.
Step 6. (Optional, when known) Add the Widget to the required Dossiers.
Step 7. (Optional) In the Dossier, select the check box for the Publication Channel of the Digital Magazine in which they should be used.
Notes:
�Steps 6 and 7 can also be performed by the end user.
�If steps 6 and 7 are not performed, the Widget will not appear in the Widget list of the Widget panel.
32
E
32
This appendix provides a complete overview of all the settings as they are available in the DMSettings file.
The DMSettings files are essentially XML files and can be shared between the different Reader Apps
aimed for use on different platforms (iPad, Android, etc). The advantage of sharing the same source file is that similar functionality can be ensured, but keep in mind of course that not all features are supported on each platform.
1. File Structure
The settings in the DMSettings file have been grouped together as follows:
For iPad/Android �Share toolbar. Settings for the Sharing
Content toolbar.
�Store. General store settings, including set-tings related to subscriptions.
�Navigation. Settings for navigating the Reader App.
�Colors. Controls the colors for various Reader components.
�Fonts. Settings for using fonts.
�Intents. Controls functionality for specific buttons.
�TOC Popup. Settings for the TOC List.
�Bookmark Popup. Settings for the Bookmarks List.
�Hotzones. Hotzone settings.
�Flipview. Settings related to the Flipview.
The DMSettings File
Appendix E The DMSettings File
33
�Library. Settings related to the Library.
�Metrics. (Android only) Settings related to the metrics of the targeted device.
�Web Element Popup. Settings related to controlling the Web Element pop-up.
� Newsstand. Settings related to the Newsstand feature of iOS 5.
For HTML5 �Content. Settings for the location of source
files.
�Hotzones. Hotzone settings.
�Navigation. Settings for navigating the Reader App.
�Resolution. Controls the size of the area in which the page is displayed.
�Tracking. Settings for analytics services.
Each group is described in the following sections.
2. Features by Platform
Various versions of the Reader App exist (for iPad, Android devices and now also for HTML5 Web browsers). While they share most of the functionality, differences also exist. These differences could be because features are specific to a particular platform only, or because the development of one Reader App is not yet as advanced of another.
For a comparison of each DMSettings option and their availability for each Reader App version, see table 2 on the next page.
In this table, the features for the Android Reader App are presented for each compatible Android
operating system.
Appendix E The DMSettings File
34
Table 2. DMSettings option - compared by Reader App
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Share Toolbar
Enable partial page sharing Share page Enable share toolbar Enable twitter Enable facebook Enable email sharing
Store
Force non-progressive downloads Resumable downloads Subscriptions
Switch to library after login Library cache time Disable offer in portrait mode Open subscription page in Safari Enable subscribe button Enable existing subscriber button Reset password License agreement Privacy notice Customer service
Default to gridview in store Enable filter
(Continues on next page)
Appendix E The DMSettings File
35
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Store(Continued)
Enable 3G Downloading HTML Store URL HTML Store fallback URL Enable external subscription server
Navigation
Always open in store Enable audio control in toolbar Enable bookmarks in toolbar Show toolbar on opening issue Always show toolbars Bottom toolbar always on ToolbarItems
itemX Buy itemX Library itemX Magazine itemX Home item4 TOC itemX External Back itemX Help itemX FlipView itemX Feed itemX Account
(Continues on next page)
Appendix E The DMSettings File
36
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Navigation(Continued)
ToolbarItems (Continued) itemX Custom Button itemXBack itemXForward
Enable top toolbar Enable fullscreen newsfeed Start with newsfeed Allow fullscreen object rotation when locked Force fullscreen video orientation Horizontal page navigation Right to left support Scroll sections with two-finger swipe History buttons in bottom toolbar Newsfeed URL Custom Button URL Orientation lock Continue audio within article Back to issue button Enable TOC List in toolbar Top toolbar always on Maximum number of toolbar items
(Continues on next page)
Appendix E The DMSettings File
37
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Navigation (Cont.) Show FlipView on show Toolbar
Colors
Page sharing table info text color Page sharing table info color Inpage downloading label color Downloading label color Percentage label color Inpage percentage label color Sign-in disclaimer text color Sign-in license text color Sign-in privacy text color Sign-in remember checkbox text color Sign-in forgot button text color Sign-in submit button text color Sign-in email field text color Sign-in password field text color Sign-in dialog title text color Enable transparent Web Elements TOC selected row color Bookmark selected row color Application toolbar Flipview background color
(Continues on next page)
Appendix E The DMSettings File
38
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Colors(Continued)
Flipview text Flipview section text color Flipview section text color selected Flipview story name color Flipview story description color Flipview empty thumb border Store colors
Library title color Library segment top background color Library segment bottom background color Library issue update available color Library segment overview issue name color Library segment overview issue number color Library segment overview cover story color Store toolbar Store subscription title button Store title button Library segment overview download button Store background color Available issues text color Available issues shadow color
(Continues on next page)
Appendix E The DMSettings File
39
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Colors(Continued)
Store colors Library issue name color Library issue number color Library background color Library download bar color Library issue download progress color Library issue download status color
Enable native scrolling indicators
Fonts
Percentage label font Inpage percentage label font Downloading label font Inpage downloading label font Sign-in fonts
Issue description font
Flipview title font
TOC cell story title font
TOC cell story description font
Bookmark cell issue title font
Bookmark cell story title font
Bookmark cell story description font (Continues on next page)
Appendix E The DMSettings File
40
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Fonts(Continued)
Flipview story name font
Flipview story description font
Store fonts
Library title font
Library issue download available font
Library issue update progress font
Library issue download status font
Available issues text font
Library issue name font
Library downloaded bytes font
Library issue number font
Library segement overview issue name font
Library segment overview issue number font
Library segment overview cover story font
Intents Help
TOC
TOC PopupPopup height
Popup width
Bookmark PopupPopup height Popup width
(Continues on next page)
Appendix E The DMSettings File
41
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Hotzones
Tap bottom to show toolbar Tap top to show toolbar Tap sides to navigate Touch areas
bottom area height top area height left area width right area width
Keep underlying interactive elements active
Flipview
Show story bullet Page scrubber enabled Show flipview header Show story description Show section labels Thumbs
Minimum page thumb height Maximum page thumb height Make thumbs orientation aware
Margins Flipview article thumb margin Flipview page thumb margin
(Continues on next page)
Appendix E The DMSettings File
42
Table 2. Reader App features Reader App (Continued)
iPad 2.1
Android 1.3 HTML5 1.0Feature Froyo Honeycomb
Flipview (Continued)
Pages top margin in flipviewer Flipview thumb margin
Show page number
Library
Auto open magazine Show progress in megabytes Enable login button Enable library filter Enable library segment filter
Metrics
Fitting Fit mode
Check device metrics Device metrics warning URL Device width Device height Device dpi
Content Content
ResolutionHorizontal Vertical
Tracking Tracking Web Element Popup Scale content to fit screen
Newsstand Open issue on App open
Appendix E The DMSettings File
43
3. Overview
The following sections provide a description of each setting. Note that in order to make a feature work, a combination of different settings from different groups is sometimes required. For instance: when using the Content Sharing functionality, the top Toolbar also needs to be displayed.
For an overview of which settings to use for a particular feature, see the customization chapters.
3.1 Share Toolbar Settings
The Share Toolbar settings control the Content Sharing functionality.
Enable partial page sharingEnables/disables the functionality of sharing a part of a page.
Share page Controls the functionality of sharing the full page. Possible values:
�none. Disables the functionality.
�full. A screenshot is made of the full screen, showing the page in its current view.
�thumb. A thumbnail of the page is shared. (These are the thumbnails as available for the Flipview.)
Enable share toolbar Makes the Share Content button available in the top toolbar.
Enable twitterMakes the Twitter service available as an option in the Share Content list.
Enable facebookMakes the Facebook service available as an option in the Share Content list.
Enable email sharing Makes the email service available as an option in the Share Content list.
Appendix E The DMSettings File
44
3.2 Store Settings
The Store settings control the Store functionality.
These settings are available in the Pro, Framework, Subscriptions, and Apple Subscription Reader proj-
ects only.
Force non-progressive downloadsForces the Reader App to use the non-progressive download method, by which the issue has to be fully downloaded before the user can start reading. Default setting is off, so that the Reader App uses the progressive download method, by which the user can start reading while most of the issue is downloaded in the background.
Resumable downloadsControls whether the downloading of a magazine can be broken off and resumed at a later stage.
Subscriptions(Subscription Edition only) Settings related to the Subscription functionality:
Switch to library after login(Non-iTunes subscriptions only) Allows the user to switch straight to the Library after logging in.
Library cache timeThe time after which issues that are part of a subscription are refreshed in the Library.
Disable offer in portrait mode(Non-iTunes subscriptions only) Hides the offer pane in the Subscription section of the Store when the digital device is rotated to landscape orientation.
Open subscription page in Safari(Non-iTunes subscriptions only) Opens the page for subscribing to a subscription in the Safari Web browser.
Enable subscribe button(Non-iTunes subscriptions only) Enables the Subscribe button in the Subscription section of the Store.
Enable existing subscriber button(Non-iTunes subscriptions only) Enables the Existing Subscriber button in the Subscription section of the Store.
Reset password(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server, which stores the link to the Web page where a user can change the password for the subscription account.
License agreement(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page on which users can read the license agreement for the offered service.
Privacy notice(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to view with information about how the user’s data is gathered, used, and managed.
Customer service(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to access their subscription account details.
Default to gridview in storeDefines if the Reader App should start the Store in Grid view or Single Issue view.
Enable filterEnables a filter in the Store view, allowing the Reader App to filter issues as defined by the filter data on the Content Delivery Platform.
Appendix E The DMSettings File
45
Enable 3G DownloadingAllows downloading via a 3G account.
HTML Store URLThe URL pointing to index-android.html of the HTML Store. Possible values:
�Blank: the packaged HTML store as part of the Reader App build is used
�URL: An external Web store to which the URL points is used
HTML Store fallback URLThe URL pointing to a local HTML file. This file is loaded when the HTML Store is not acccessible.
3.3 Navigation Settings
The Navigation settings control the functionality related to navigating the magazine in the Reader App.
Always open in storeWhen enabled, the Store is automatically accessed as soon as the Reader App is launched.
Enable audio control in toolbarWhen enabled, the audio control button will appear in the top toolbar. Tapping it will display the audio control, with which the playback of audio files (started manually or automatically) can be controlled.
Enable bookmarks in toolbarWhen enabled, the Bookmarks button will appear in the top toolbar. Tapping it will display the Bookmarks list, with which favorite stories can be bookmarked or quickly accessed.
Show toolbar on opening issueWhen enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) is automatically displayed as soon as the magazine issue is opened.
Always show toolbarsWhen enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) will always be displayed, without the user being able to hide them.
Bottom toolbar always onWhen enabled, the Navigation bar is always displayed and cannot be hidden by the user.
Toolbar ItemsControls the order and number of the buttons in the Navigation bar. Rearrange the order by dragging/placing each key to its required position.
For the Android Reader App v1.x (Honeycomb) ver-sion, remember that reordering items lower in the
Appendix E The DMSettings File
46
list can result in these items ending up in the Overflow menu.
Default items are:
�Buy. The Store button for accessing the Store.
�Library. The Library button for accessing the Library.
�Home. The cover button for accessing the cover.
�Magazine. When an issue is open but not currently being viewed (for instance when the Store is being viewed), this button allows the user to return to the issue.
�TOC. The TOC button for accessing the table of contents page.
�External Back. Button for returning to the application in which the Reader App is embedded.
�Help. The Help button for accessing the Help page.
�Flipview. The contents button for accessing the Story Viewer / Page Viewer and the Section Viewer.
�Feed. The Newsfeed button for accessing the Newsfeed page.
�Account. The account button for accessing the subscription account page.
�Custom. A button for accessing a Web page with custom information such as privacy infor-mation. The URL to the page is defined by the Custom Button URL setting (see below).
�Back. (Android Honeycomb only) Places the Back button in the Action bar.
�Forward. (Android Honeycomb only) Places the Forward button in the Action bar.
Enable top toolbarEnables the Toolbar at the top of the Reader App.
Enable fullscreen newsfeed Enables the Newsfeed to be displayed full screen.
Start with newsfeed Opens the newsfeed page when the App is launched.
Horizontal page navigationWhen enabled, all pages of all stories are presented next to each other. Navigation needs to be done by swiping horizontally. When not enabled, all pages of each story are presented one above the other. Navigation needs to be done vertically (from page to page) and horizontally (from story to story).
Right to left support Enables the right-to-left support; scrolling through the magazine will be reversed.
Scroll sections with two-finger swipeCan only be used together with Horizontal Page Navigation enabled. When enabled, navigating from one story to another can be done by swiping using two fingers.
History buttons in bottom toolbar Places the Back/Forward button in the Navigation bar. When the top Toolbar is enabled at the same time, the Back/Forward buttons are still displayed in the Navigation bar.
Newsfeed URL Contains the URL to use for the Newsfeed view.
Appendix E The DMSettings File
47
Custom Button URL The URL for the Custom View (a Web page with custom information such as privacy information).
Magazine in package(Android Reader App only) Boolean property to indicate that the magazine is packaged into the app. The pack-aged magazine location is DigiMag�Template\assets\magazine. Create this folder either in Eclipse or directly on the file system.
Orientation lockControls in which modes pages are shown: landscape and portrait mode (default setting), landscape mode only, or portrait mode only. When set to landscape or portrait mode only, the page is not rotated when the user rotates the device.
Allow fullscreen object rotation when locked(Android Reader App only) When the Orientation Lock feature is enabled (see above), the “Allow fullscreen object rotation when locked” feature allows objects displayed in full screen mode (such as videos, Slide Shows and Web view overlays) to still rotate when the Tablet is rotated.
Force fullscreen video rotationVideos displayed in fullscreen mode can be forced to be displayed in landscape mode across the “height” of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly.
Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video.
In order for this feature to work, the Orientation lock feature (see above) also needs to be enabled.
However, this is not necessary when an Android version of the Reader App is used.
Back to issue buttonFor enabling/disabling the “Back to Issue” button in the Library. (The “Back to Issue” button in the Store is not influenced by this setting).
Audio keeps playing while swiping from page to page within the same articleAudio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user sub-sequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.
Enable TOC List in toolbarFor enabling/disabling the TOC List in the top Toolbar.
Top toolbar always onWhen enabled, the top Toolbar bar is always displayed and cannot be hidden by the user.
Maximum number of toolbar items(Android Reader App Honeycomb only) Defines the maximum number of items to appear on the right-
hand side of the Action bar. Maximum number to be set is 6.
Show FlipView on show Toolbar.Controls whether the Flipview should be shown each time the Navigation bar (Froyo) or Action bar
(Honeycomb) is shown.
Appendix E The DMSettings File
48
3.3.1 Color Settings
Page sharing table info text colorThe title of the info page (the screen shown when the user needs to make a choice of sending a full page or a part of a page).
Page sharing table info colorThe background of the info page title area (the screen shown when the user needs to make a choice of sending a full page or a part of a page).
Inpage downloading label colorColor of the Downloading label on a page.
Downloading label colorColor of the Downloading label in the Page Viewer / Story Viewer.
Percentage label colorColor of the download percentage label in the Page Viewer / Story Viewer.
Inpage percentage label colorColor of the download percentage label on a page.
Sign-in disclaimer text color(Non-iTunes subscriptions only) Color of the disclaimer title in the Sign-in dialog box.
Sign-in license text color(Non-iTunes subscriptions only) Color of the “License agreement” title in the Sign-in dialog box.
Sign-in privacy text color(Non-iTunes subscriptions only) Color of the “Privacy” title in the Sign-in dialog box.
Sign-in remember checkbox text color(Non-iTunes subscriptions only) Color of the “Remember Me” title in the Sign-in dialog box.
Sign-in forgot button text color(Non-iTunes subscriptions only) Color of the “I forgot my password” title in the Sign-in dialog box.
Sign-in submit button text color(Non-iTunes subscriptions only) Color of the Submit but-ton label in the Sign-in dialog box.
Sign-in email field text color(Non-iTunes subscriptions only) Color of the “Email Address” title in the Sign-in dialog box.
Sign-in password field text color(Non-iTunes subscriptions only) Color of the “Password” title in the Sign-in dialog box.
Sign-in dialog title text color(Non-iTunes subscriptions only) Color of the text in the Sign-in dialog box header.
Enable transparent Web ElementsWhen enabled, the background of Web elements will be transparent.
TOC selected row colorThe color of the selected story in the TOC List.
Bookmark selected row colorThe color of the selected Bookmark in the Bookmarks List.
Application toolbarThe color of the Navigation bar and the top Toolbar.
Flipview background colorThe color of the Flip View background, shown behind the story previews. To get a transparent color, set an alpha value lower than zero.
Flipview textThe color of the Flip View header and issue description shown at the top.
Appendix E The DMSettings File
49
Flipview section text colorThe color of the text in the Section viewer.
Flipview section text color selectedThe color of the text in the Section viewer in its selected state.
Flipview story name colorThe color of the Story title below the story preview.
Flipview story description colorThe color of the story description below the story preview.
Flipview empty thumb borderColor of the border for an empty thumbnail in the Page Viewer / Story Viewer.
Store colors:Store title colorThe color of the Store title (in the top navigation bar).
Library segment top background colorThe background color of the top area of the Library Segment Overview page.
Library segment bottom background colorThe background color of the bottom area of the Library Segment Overview page.
Library segment overview issue name colorThe color of the issue name on the Library Segment Overview page.
Library segment overview issue number colorThe color of the issue number on the Library Segment Overview page.
Library segment overview cover story colorThe color of the cover story title on the Library Segment Overview page.
Library segment overview download buttonThe color of the Issue Download button on the Library Segment Overview page.
Library download bar colorColor of the download bar for an issue in the Library.
Library issue download progress colorColor of the string that indicates the progress of the download.
Library issue download status colorColor of the string that shows the status of the download.
Store toolbarThe color of the store toolbar.
Store subscription title buttonThe color of the Subscribe and Existing Subscriber button labels.
Store title buttonThe color of the Buy, Preview, Submit, Download and Pause button labels.
Store background colorThe background color of the Store (visible when no shelves are visible, in case you have no issues bought or when there is no internet connection available).
Available issues text colorThe color of the ‘Available issues:’ header at the top of the issues grid.
Available issues shadow colorThe color of the shadow of the ‘Available issues:’ header at the top of the issues grid.
Library issue name colorThe color of the issue name in the Library.
Appendix E The DMSettings File
50
Library downloaded bytes colorThe color of the string that indicates the download progress in bytes.
Library issue number colorThe color of the issue number in the Library.
Library background colorThe color of the Library background.
Enable native scrolling indicatorsNative scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains
scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and right-hand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded.
3.3.2 Font Settings
Inpage downloading label fontThe font of the downloading label on a page.
Downloading label fontThe font of the downloading label in the Page Viewer / Story Viewer.
Inpage percentage label fontThe font of the percentage label on a page.
Percentage label fontThe font of the percentage label in the Page Viewer / Story Viewer.
Sign In fonts(Non-iTunes subscriptions only) Font setting for fonts of the subscription Sign In dialog box:
�Disclaimer text font. The font of the Disclaimer text in the Subscription Sign In dia-log box.
�License text font. The font of the License text in the Subscription Sign In dialog box.
�Privacy text font. The font of the Privacy text in the Subscription Sign In dialog box.
�Remember checkbox font. The font of the Remember Me text in the Subscription Sign In dialog box.
�Forgot button font. The font of the “I forgot my password” text in the Subscription Sign In dialog box.
�Submit button font. The font of the Submit button label in the Subscription Sign In dialog box.
Appendix E The DMSettings File
51
�Email field font. The font of the Email box in the Subscription Sign In dialog box.
�Password field font. The font of the Password box in the Subscription Sign In dia-log box.
�Dialog title font. The font of the title of the Subscription Sign In dialog box.
Issue description fontFont settings for the issue description in the Flipview header.
Flipview title fontFont settings for the Story Viewer / Page Viewer title.
TOC cell story title fontThe font of the story title in the TOC list.
TOC cell story description fontThe font of the story description in the TOC list.
Flipview story name fontThe font of the story name/title in the Flipview.
Flipview story description fontThe font of the story description in the Flipview.
Bookmark cell issue title fontThe font of the issue title in a Bookmark.
Bookmark cell story title fontThe font of the story title in a Bookmark.
Bookmark cell story description fontThe font of the story description in a Bookmark.
Store fonts:Store title fontThe font of the Store title (in the top navigation bar).
Library issue download progress fontThe font of the download progress label in the Library.
Library issue download status fontThe font of the download status label in the Library.
Available issues text fontThe font of the ‘Available issues:’ text.
Library issue name fontThe font of an issue in the Library.
Library downloaded bytes fontThe font of the downloaded bytes label in the Library.
Library issue number fontThe font of the issue number in the Library.
Library segment overview issue name fontThe font for the issue name on the Library Segment Overview page.
Library segment overview issue font colorThe font for the issue number on the Library Segment Overview page.
Library segment overview cover story fontThe font for the cover story title on the Library Segment Overview page.
Appendix E The DMSettings File
52
3.4 Intents Settings
The Intents property acts as an array to convert Enterprise intent names to Reader App intent names.
When a custom value is used in Enterprise, the value of the corresponding Intents property also has
to be changed to match this custom value.
The following default intent names are used:
�Help. Used to link the page with Help instruc-tions to the Help button in the Navigation bar.
�TOC. Used to link a story to the TOC button in the Navigation bar.
3.5 TOC Popup Settings
The TOC Popup settings control the settings of the TOC List.
Popup heightDefines the height of the TOC List.
Popup widthDefines the width of the TOC List.
Appendix E The DMSettings File
53
3.6 Bookmark Popup Settings
The Bookmark Popup settings control the settings of the Bookmarks List.
Popup heightDefines the height of the Bookmarks List.
Popup widthDefines the width of the Bookmarks List.
3.7 Hotzone Settings
The Hotzone settings control the settings of the Hotzones (areas to the left, right, or bottom of the screen which can be tapped in order to navigate the magazine).
For the HTML5 Reader App, these zones refer to the areas on touchscreen devices, not the clickable
areas on a desktop PC/laptop.
Tap bottom to show toolbarActivates the bottom Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.
Tap top to show toolbarActivates the top Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.
Tap sides to navigateActivates the Hotzones to the left and right of the screen. When tapped, the user will be navigated to the next or previous story/page respectively (depending on the type of navigation which has been chosen).
Touch areasDefines the height or width of the different Hotzones.
�bottom area height. Defines the height of the bottom Hotzone.
�top area height. (iPad/Android Reader App only) Defines the height of the top Hotzone.
�left area width. Defines the width of the left Hotzone.
�right area width. Defines the width of the right Hotzone.
Keep underlying interactive elements activeWhen enabled, the functionality of interactive ele-ments (such as Slide Shows, videos, etc) which are
Appendix E The DMSettings File
54
obscured by a Hotzone can be accessed and is not blocked by the overlaying Hotzone.
3.8 Flipview Settings
The Flipview settings control the settings of the Flipview.
Show story bulletDefines whether or not a ‘bullet’ should be shown next to each issue name in the Flip Viewer.
Page scrubber enabledDefines whether or not the Page Scrubber should be enabled.
Show flipview headerDefines whether or not the Flip Viewer header should be shown (if not, the Title, Description and Close button of the Flip Viewer disappear).
Show story descriptionDefines whether or not the description of a story is shown in the Page Viewer.
Show section labelsDefines whether or not the Section Viewer is shown in the Page Viewer.
ThumbsThe definition of various thumbnail sizes.
�Minimum page thumb height. The mini-mum height of a thumbnail in the Flip Viewer.
�Maximum page thumb height. The maxi-mum height of a thumbnail in the Flip Viewer.
�Make thumbs orientation aware. When enabled, the orientation of the thumbnails is matched with the orientation in which the device is held (only landscape thumbnails are displayed when the device is held in landscape orientation; likewise, only portrait thumbnails are displayed when the device is held in portrait orientation
Appendix E The DMSettings File
55
MarginsDefines different margins for adjusting the layout of the Flipview.
�Pages top margin in flipviewer. The margin between the top of the issue thumbnails and the start of the Flip Viewer header.
�Flipview thumb margin. The margin between the thumbnails in the Flip Viewer.
�Flipview page thumb margin. (Android Honeycomb only) Controls the margin between images (pages).
�Flipview article thumb margin. (Android Honeycomb only) Controls the margin between articles (stories).
Show page number(Android Reader App only) Defines whether or not the page number should be displayed below the
page preview.
3.9 Library Settings
The Library settings control functionality of the Library.
Auto open magazineOpens an issue or Segment automatically as soon as the download and installation process is complete (non-pro-gressive downloads) or as soon as the issue or Segment is readable (progressive downloads).
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.
Show progress in megabytes(Non-progressive downloads only) Shows the download progress both in megabytes as in percentages.
Enable login button Enables the Log In/Log Out button in the Library.
Enable library filterEnables the Library filter in the Library.
Enable library segment filterEnables the Library Segment filter available in the Library.
Appendix E The DMSettings File
56
3.10 Metrics
When a magazine is read on a device for which it hasn’t been designed (in terms of dimensions), it is likely that it will not properly fit the screen.
The Metrics settings provide a method for dealing with such scenarios:
�The method of page scaling can be specified
�The user can be informed by displaying a message
FittingThe fitting option allows you to specify how pages should be made to match the screen.
For notes about the functionality of the page fitting feature in relation to using specific DM Server plug-
ins, see chapter 6, Exporting Content – 3.1, Exporting and Page Scaling.
�Fit mode. Possible values:
�Fit width. (Default setting) On a device which is smaller than the page dimensions, the page is scaled down to fit the width of the screen. This might result in the user having to scroll vertically to see the rest of the page.
�Fit screen. The page will be scaled to fit the screen. If the aspect ratio (width versus height) of the screen is different than the ratio for which the page was designed, this can result in “letterboxing” or “pillarboxing” (black bars appearing along the side, top, or bottom of the screen).1
1 Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
�Fit screen disproportionately. The page will be made to fit the dimensions of the screen exactly. This could result in the content of the page looking stretched or squashed.
Check device metrics Controls whether the metrics of the device are checked.
Device metrics warning URLURL to the Web page to be displayed. When left empty, the default Web page in the following location is used:
�assets/devicewarning/warning.html
Feel free to modify this page to your needs.
Device widthThe required width of the device. Default values are:
1024 px (Reader App v1.x (Froyo)1280 px (Reader App v1.x (Honeycomb)
Device heightThe required height of the device. Default values are:
600 px (Reader App v1.x (Froyo)800 px (Reader App v1.x (Honeycomb)
Device dpiThe dpi setting which the device runs in (so not the physi-cal dpi). Examples:
Samsung Galaxy: 240 dpi
Motorola Xoom: 160 dpi
Appendix E The DMSettings File
57
3.11 Content
The Content settings determine the location of the maga-zine’s source files.
Magazine Configuration URLLocation of the issue.json configuration file. Default setting:
�./content/
Magazine Content URLLocation of the magazine content (the images and pages folders). Default setting:
�./content/
3.12 Resolution
The Resolution settings control the size of the area in which the page is displayed.
HeightDetermines the height of the area (in pixels). Default set-ting: 754.
WidthDetermines the width of the area (in pixels). Default set-ting: 1028.
When the dimension of the page is larger than the area in which it is displayed, scroll bars will appear.
Appendix E The DMSettings File
58
3.13 Tracking
The Tracking settings hold specific settings for services which track user interaction with the Reader App, such as Google Analytics.
3.14 Web Element Popup
The Web Element Popup settings control the settings of the Web Element pop-up.
Scale content to fit screenWhen enabled, the displayed HTML page is scaled to fit the Web Element pop-up.
Appendix E The DMSettings File
59
3.15 Newsstand
The Newsstand settings control the settings of iOS 5’s Newsstand feature.
Open issue on App openEnsures that the correct issue is opened in the Reader App when tapping an issue in the Newsstand.
60
F
60
The Content Delivery Platform (CDP) is used for managing and distributing magazine content via the Store functionality of the Reader App.
This appendix explains how to use the Content Delivery Platform.
The steps described in this appendix apply to using the interface as found in the hosted solution; when
using the licensed version, the screens may look and work differently.
1. Logging In and Logging Out
Logging inTo log in to the Content Delivery Platform, do the following:
Step 1. Enter the link for your area in your Web browser:
�Europe: https://cds.woodwing.net
�United States: https://us-east-cds.woodwing.net
�Asia: https://apac-cds.woodwing.net
Step 2. Enter the received password and username.
Step 3. Click Log In or press Enter.
After logging in, the last visited tab is displayed.1
1 If the Cookie has not been set or if the Cookie is cleared, the Publication tab will be loaded
Using the Content Delivery Platform
Appendix F Using the Content Delivery Platform
61
Logging outTo log out of the Content Delivery Platform, do the following:
�Click Logoff <user name> in the top right-hand corner of the screen.
2. System Structure
The Content Delivery Platform platform has the following main structure:
At the highest level, a Domain is defined, usually repre-sented by the publishing company name.
Each Domain consists of:
�Users. The users who need to work within the CDP environment.
�Devices (also referred to as Development Devices) Used for testing a digital magazine without making the magazine public.
�Apps. Representing the actual apps that are distributed (such as Reader Apps and Newsfeed Apps).
For each Reader App, the following can be defined:
�Issue. The actual magazine content as a full magazine (compare with Segments below).
�Segment. The actual magazine content provided in separate sections (compare with issue above), usually grouped by category. Examples: Business, Sports, Fashion, etc. Each Segment is downloaded and read separately; all Segments together make up the full magazine issue.
�Rendition: a variation of a magazine, designed for a specific resolution and screen depth. Renditions are defined as part of a Display (see below) and issue/Segment (see above).
In more general terms: the issue or Segment as exported from Content Station is treated by the Content Delivery Platform as a Rendition.
Appendix F Using the Content Delivery Platform
62
�Display. A representation of one or more devices, all sharing the same resolution and screen depth. A Display has one Rendition assigned.
The Rendition which is assigned to the Display does not have to perfectly match
that Display. For example, the page scaling fea-ture of the Android Reader App allows a Rendition to be viewed on Displays which are smaller or larger than what the Rendition has been designed for. This method of working allows you to use the same Rendition for differ-ent devices (each with specific resolutions and/or screen depths), instead of having to create separate Renditions for each.
�Apple Subscription offers. Used as labels in the Subscription buttons in the Store.
�Push notifications. Messages to be sent to a Reader App or to Apple’s Newsstand.
�Subscription Servers. Information relat-ing to Subscription Servers such as the Apple iTunes Subscription Server.
�Filter name and values. The name of the Store filter and the values used in the Filter list.
�Segment Filters. The values used in the Library Filter.
Figure 2. The Publication Overview pane shows the main components of the structure and allows to quickly access a component. Shown here are a Domain (WoodWing), a Reader App (Gulls Monthly), containing two issues (March and February). The March issue contains 2 Segments which are further divided in Displays. The February issue does not contain Segments.
Appendix F Using the Content Delivery Platform
63
2.1 Accessing the Components
The components of the CDP structure can be accessed through different areas of the Content Delivery Platform. Each area is represented by a tab at the top of the screen:
PublicationFor accessing the following components:
�Publication Overview, showing the Domain, Application, Issues, Segments, and Renditions.
Issues are sorted by publication date in ascending order (oldest shown last).
ApplicationFor accessing the following components:
�Application Maintenance. For managing Reader Apps.
�Push Notifications. For sending mes-sages to published Reader Apps or to Apple’s Newsstand.
�Subscriptions. For managing Apple iTunes Subscriptions and non-Apple iTunes Subscriptions.
GeneralFor accessing the following components:
�Device Maintenance. For managing devel-opment devices.
�Global Device Maintenance. (For a hosted service, access to this area is only available to WoodWing) For managing global development devices.
�User Maintenance. For managing user accounts.
Manage(Only available for System Maintainers) For accessing the following components:
�Domains. For managing Domains.
�Displays. For managing Displays.
�Renditions. For managing Renditions.
My AccountFor accessing the following components:
�User. For changing the user details of the cur-rently logged in user.
Appendix F Using the Content Delivery Platform
64
2.2 User Types
The system defines three types of users:
�System Maintainer. Can make changes to all components of the system (on all levels), but primarily manages Domains, Displays, and Renditions. (For a hosted service, the System Maintainer is WoodWing.)
�System Admin. Can make changes to all components of the system (except the compo-nents of the Manage tab) but only as part of the Domain(s) which the System Admin has access to. (For a hosted service, the System Admin is WoodWing.)
�General User. Can perform general tasks in the Domain to which the user has been given access to.
The table on the next page outlines the tasks which can be performed by each type of user. (System Maintainers and System Admins may have additional tasks other than those described here.)
The information in this appendix is aimed at General Users, using an environment hosted by WoodWing.
When a task needs to be performed which cannot be done by a General User, instructions are given for provid-ing WoodWing with the relevant information so that they can perform the task for you.
Appendix F Using the Content Delivery Platform
65
Table 2.2. CDP access rights
Tab Area Component TaskSystem
MaintainerSystem Admin
General User
Publication Publication Overview
Issue Add/delete/edit Segment Add/delete/edit/sort
Rendition Add/delete/edit (as part of issue or Segment)
Application
Application Maintenance
Application
Add Edit 1
Delete Minimum version control Managing Library Filters Managing Displays Rendition Mapping
MetadataView Add/edit/delete
Push Notifications Message
Add Certificate Key Write message
Apple Subscriptions Subscription Add/delete/edit
General
Device Maintenance Device Add/delete/edit
Global Device Maintenance Device Add/delete/edit
User Maintenance User Add/delete/edit
(Continues on next page)
1 A limited number of properties only.
Appendix F Using the Content Delivery Platform
66
Table 2.2. CDP access rights (continued)
Tab Area Component TaskSystem
MaintainerSystem Admin
General User
Manage
Domains Domains Add/delete/edit Displays Displays Add/delete/edit Renditions Renditions Add/delete/edit
My Account User Account User
Add Edit Delete
Appendix F Using the Content Delivery Platform
67
3. Setting Up the CDP Environment
When using the CDP environment for the first time, the system has to be set up with the required components. This is done by performing the following tasks:
�Adding a Domain �Adding an Reader Application �Adding a user �Adding an issue �Adding a subscription �Adding a Development Device
Each task is outlined in the following sections.
If your CDP environment is already set up, use the tasks as outlined in section 4. Managing the CDP
Environment.
3.1 Adding a Domain
Managing Domains is a task of the System Maintainer (in a hosted service, this is WoodWing). To have a Domain added, do the following:
�Send an e-mail to [email protected], stat-ing the request. Make sure to include a valid Purchase Order.
Appendix F Using the Content Delivery Platform
68
3.2 Adding a Reader Application
Managing Reader Apps is a task of the system admin-istrator (WoodWing). To have a Reader App added, do the following:
Step 1. Send an e-mail to [email protected] stating that you would like to distribute a Reader App by making use of the Content Delivery Platform.
You will be sent a questionnaire to fill out so that the Reader App can be registered on the Content Delivery Platform.
Step 2. Fill out the form and return it to WoodWing.
WoodWing will process the request for you and provide you with the relevant settings required for building a Reader App with Store functionality:
�The Content Delivery Platform URL
�A secret key for the Reader App, as defined on the Content Delivery Platform
�A product ID for the Reader App, as defined on the Content Delivery Platform
�The Application version of the Reader App. (This version number will be applied to all issues which are subsequently uploaded to that Reader App.)
Reader Apps and minimum versionsVersion numbering is defined on the following levels:
�Reader App level. This is the highest level and acts as the default for all Renditions defined for that app.
�Rendition level. When required, each Rendition of a Reader App can be given its own minimum version number.
When a minimum version number is defined for a Rendition, it will overrule the
Reader App minimum version number; when no minimum version number is defined for a Rendition, the Reader App minimum version number is used.
Minimum version numbers cannot be defined on Segment level; Segments will
always be assigned the minimum version num-ber of the Rendition that they are part of.
Appendix F Using the Content Delivery Platform
69
3.3 Adding a User
Managing Users is a task of the system administrator (WoodWing). To have a user added, do the following:
�Send an e-mail to [email protected], stating the request. Include the following information:
�Full name �E-mail address
An initial password will be provided; make sure that the user changes this to a personal password by modifying its account details. (For more information, see section 4.9.2 Editing a User Profile.)
3.4 Adding an Issue
Once the CDP environment has been set up for you, you are ready to add your magazine content.
Content can be delivered in two ways:
�As an issue containing the full content
�As an issue divided into Segments
Each is described in the following sections.
Appendix F Using the Content Delivery Platform
70
3.4.1 Adding a Full Issue
A full magazine issue is one without Segments: the full magazine content is offered as a single download (this in contrast to an issue which is made up of Segments which allows the user to download the magazine in separate segments). For more information about adding a maga-zine in Segments, see section 3.4.2 Adding an Issue in Segments.)
To add an issue without segments to the Content Delivery Platform, perform the following steps:
Segments cannot be added at a later stage (applies to full issues only); when Segments are to be used,
make sure to include them when setting up a full issue as explained in the steps below.
Step 1. Prepare the magazine upload file by creating a ZIP file or ofip file containing the following:
�magazine.xml file �images folder �other folders where applicable
Step 2. In the Publication Overview pane, select the Reader App to which the issue needs to be added.
Step 3. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Issue.
On the main screen, the Add Issue screen appears.
Step 4. Enter the details pertaining to the issue:
Step 4a. Payment Type, choose the type of payment to use:
�Paid �Free
�Subscription
Step 4b. Product ID. Enter one of the following:
�Paid issues: (iPad Reader App ver-sion only) The ID that was defined for the issue’s in app purchase in iTunes Connect. (See chapter 14, Distributing Reader Apps With Store – section 4.1 Registering With iTunes Connect.)
�Free or Subscription-only issues: the ID for the issue that will be used for reporting.
Step 4c. Name. Name of the issue used in the Content Delivery Platform and on the development device. (Note that the Reference Name for the issue’s in app purchase as defined in iTunes Connect is shown in the Store.)
Step 4d. Date and time. The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam.)
To make the issue available immedi-ately, leave the date & time as is.
Step 4e. Subtitle. (Optional) The subtitle to be displayed in the Store.
Step 4f. Description. (Optional) A short description of what the issue is about; this will be displayed in the Store.
Step 4g. Filter. (Optional, only when defined for the Reader App) From the Filter list, choose a filter option.
This ensures that when a user chooses this option from the Store
Appendix F Using the Content Delivery Platform
71
Filter, that the issue is included in the search results.
Step 4h. Segments. Leave set to No.
Step 5. Click Add.
The Issue is added to the Publication Overview pane and in the main window, the Issue screen appears.
Step 6. Click Add Rendition.
The Add Rendition screen appears.
Step 7. Enter the details pertaining to the Rendition:
Step 7a. R e n d i t i o n . C h o o s e th e Rendition which is representative for the issue.
In other words: when the issue is pri-marily aimed at viewing it on an iPad,
choose the iPad Rendition here.
When choosing a Rendition from the list, the page is refreshed and the
value in the Reader App Minimum Version box is updated (See Step 7b).
Step 7b. Reader App Minimum Version. The default minimum
version for the selected Rendition is auto-matically set when the page is loaded and each time a Rendition is chosen from the Rendition list. The value used is the value as defined on the Reader Application page (for more information, see Reader Apps and minimum versions).
In case a different minimum version num-ber needs to be used, manually change the value.
Step 7c. Upload File. Click Browse to locate the magazine upload file created in Step 1 and click Open.
The upload will start. The progress is visual-ized by a progress bar.
The content of the uploaded file is verified and the results are displayed in the Report box.
If the validation fails, possible reasons are provided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable.
Step 7d. Upload the images for the cover and preview (any page of the magazine that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons.
Uploading the images can be done while the issue content is being uploaded, you
don’t have to wait for the upload to be completed.
Click on a preview to view it in full size in a new window.
Step 8. Click Save.
The Deploy window appears with a summary of the files that are to be uploaded.
Step 9. Click Save & Finish to upload the files to the Content Delivery Network.
Appendix F Using the Content Delivery Platform
72
The Deploy screen now shows progress bars with which the upload process can be followed. As soon as all files are uploaded, the OK button becomes available.
Step 10. Click OK to close the window.
The Rendition screen appears.
The process is hereby complete.
3.4.2 Adding an Issue in Segments
When a magazine is made up of Segments, the user can download the magazine in separate Segments (this in contrast to a complete issue, where the full magazine is always downloaded in full). For more information about adding a full magazine, see section 3.4.1 Adding a Full Issue.)
When adding an issue containing Segments, an empty issue is defined in the system first to which all required segments are added.
Step 1. Prepare the upload files by creating a ZIP file or ofip file for each Segment. Each file should containing the following:
�magazine.xml file �images folder �other folders where applicable
Phase 1. The first part of the process is the creation of the empty issue to which the Segments will be added.
Step 2. In the Publication Overview pane, select the Reader App to which the issue needs to be added.
Step 3. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Issue.
On the main screen, the Add Issue screen appears.
Step 4. Enter the details pertaining to the issue:
Step 4a. Payment Type, choose the type of payment to use:
�Paid �Free �Subscription
Appendix F Using the Content Delivery Platform
73
Step 4b. Product ID. Enter one of the following:
�Paid issues: (iPad Reader App ver-sion only) The ID that was defined for the issue’s in app purchase in iTunes Connect. (See chapter 14, Distributing Reader Apps With Store – section 4.1 Registering With iTunes Connect.)
�Free or Subscription-only issues: the ID for the issue that will be used for reporting.
Step 4c. Name. Name of the issue used in the Content Delivery Platform and on the development device. (Note that the Reference Name for the issue’s in app purchase as defined in iTunes Connect is shown in the Store.)
Step 4d. Date and time. The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam.)
To make the issue available immedi-ately, leave the date & time as is.
Step 4e. Subtitle. (Optional) The subtitle to be displayed in the Store.
Step 4f. Description. (Optional) A short description of what the issue is about; this will be displayed in the Store.
Step 4g. Filter. (Optional, only when defined for the Reader App) From the Filter list, choose a filter option.
This ensures that when a user chooses this option from the Library
Filter, that the issue is included in the search results.
Step 4h. Segments. Select Yes.
In the bottom half of the screen, the Renditions appear which have been defined in the system by WoodWing.
Step 5. Add the previews for the Rendition to which the Segment should belong in the speci-fied dimensions by using the respective Add/Change buttons.
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 for the issue’s in app purchase in iTunes Connect. (See chapter 14, Distributing
Appendix F Using the Content Delivery Platform
74
Reader Apps With Store – section 4.1 Registering With iTunes Connect.)
�Free or Subscription-only issues: the ID for the issue that will be used for reporting.
Step 9b. Name. Name of the issue used in the Content Delivery Platform and on the development devices. (Note that the Reference Name for the issue’s in app purchase as defined in iTunes Connect is shown in the Store.)
Step 9c. Subtitle. (Optional) The subtitle to be displayed in the Store.
Step 9d. Description. (Optional) A short description of what the Segment is about; this will be displayed in the Store.
Step 9e. Filter. (Optional, when defined for the Reader App) From the Filter list, choose a filter option.
This ensures that when a user chooses this option from the
Segment Filter, that the Segment is included in the search results.
Step 9f. Click Add.
The Segment is added to the issue in the Publication Overview pane and in the main window, the Issue screen appears.
To each Segment, content intended to be used for specific Renditions is to added.
Step 10. On the Issue screen, click Add Rendition.
The Add Rendition screen appears.
Step 11. Enter the details pertaining to the Rendition:
Step 11a. Rend i t ion . Choose the Rendition on which the issue is to be viewed.
Step 11b. Reader A pp Min imum Version. Cannot be changed for Segments. The minimum version num-ber used is the number set for either the Reader App or the Rendition. (For more information, see Reader Apps and mini-mum versions.)
Step 11c. Upload File. Click Browse to locate the Segment upload file created in Step 1 and click Open.
The upload will start. The progress is visual-ized by the progress bar.
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 don’t have to wait for the upload to be completed.
Click on a preview to view it in full size in a new window.
Appendix F Using the Content Delivery Platform
75
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 sec-tion of the Application pane, select the Reader App to which the subscription needs to be added.
Step 2. Click Edit.
Step 3. (Optional, for adding an iTunes Subscription only). Do the following:
Step 3a. In the iTunes Subscription sec-tion, click Yes.
An additional field appears.
Step 3b. Enter the iTunes Shared Secret.
Step 3c. Click Save.
Step 3d. In the Apple Subscriptions section of the Application pane, select the Reader App to which the iTunes subscrip-tion needs to be added.
Step 3e. From the toolbar at the top of the Application pane, click Add.
Additional fields appear.
Step 3f. Add the following information:
Appendix F Using the Content Delivery Platform
76
�Product ID: The product ID as defined in iTunes Connect. This works the same as the product identifier for issues.
�Description: the offer as it should appear on the buttons on the Offer page (for example: 90 days, 180 days, etc.)
Step 3g. Click Add.
Step 3h. Repeat steps 3e – 3g to add additional offers as required.
Step 4. (Optional, for adding a non-iTunes Subscription only). Do the following:
Step 4a. In the Subscription section, click Yes.
Additional fields appear.
Step 4b. Enter the Subscription Server URL.
Step 4c. Choose the Subscript ion failover behavior.
Step 4d. Click Save.
3.5 Adding a Development Device
Now that your Reader App and content is available in the system, you might want to test it before the content is made public. This can be done by assigning a tablet or other device to a Reader App in the system. (Such devices are referred to as Development Devices.) When accessing the Reader App on such a device, all issues that are part of that Reader App will be available for free (including those which are not yet public).
To assign a Development Device to a Reader App, per-form the following steps:
Step 1. In the General pane, choose the Domain to which the Device needs to be added.
Step 2. From the toolbar at the top of the General pane, click Add.
The Add Device screen appears.
Step 3. Add the following information:
�Device ID: The ID of the device.
�Device Comment: (Optional) Additional comments to clarify the use of the device
Step 4. Click Add.
Appendix F Using the Content Delivery Platform
77
4. Managing the CDP Environment
Once your environment is in place, you can manage it by performing the following tasks:
�Configuring Reader Apps �Managing issues �Managing Segments �Managing Renditions �Managing Subscriptions �Managing HTML5 conversions �Managing Development Devices �Sending Push notifications (messages) �Managing users
Each task is described in the following sections.
If you are using the CDP for the first time and your environment is not yet in place, use the tasks as
outlined in section The Content Delivery Platform (CDP) is used for managing and distributing magazine content via the Store functionality of the Reader App..
The following tasks cannot be performed by a General User; if these need to be managed (changed, deleted, etc.) contact WoodWing by sending an e-mail to [email protected], stating the request:
�Managing Domains �Managing Reader Applications �Managing Renditions on a system level �Managing Displays �Adding/removing users
4.1 Configuring Reader Apps
To configure a Reader App, perform the following steps:
For viewing and/or configuring the metadata of the app, see section 4.1.1 Configuring the Metadata.
Step 1. In the Application Maintenance sec-tion of the Application pane, select the Reader App which needs to be configured.
The Reader App screen appears.
Step 2. Click Edit.
Step 3. Change any of the following properties:
If you do not have permission to change these properties yourself, send an e-mail
to [email protected], stating the request. (Make sure to include what the change should be.)
�Type: type of App: Reader or Newsfeed.
�Status: status of the app: Active (calls will be received by the CDP from the Reader App) or Disabled (calls will not be received by the CDP from the Reader App).
�Host: The host as used in the Reader App configuration.
In the following example, nlkiosk.woodwing.net is used as the host. The full host URL should then be as follows:
�https://nlkiosk.woodwing.net/reader/json/
Appendix F Using the Content Delivery Platform
78
�Product ID: the unique product ID for the app.
�Name: name of the app.
�Default Rendition: the default Rendition for the app.
�Reader App minimum version. For more information, see section 3.2 Adding a Reader Application.
Step 4. Change any of the following fields (as applicable to the type of Reader App used):
Step 4a. Android Market: availability. When choosing Yes, enter the Android Market Public Key.
Step 4a. B lackberr y App Wor ld : availability.
Step 4b. iTunes Store: availability.
Step 4c. iTunes Subscriptions: avail-ability. When choosing Yes, enter the iTunes Shared Secret.
Step 4d. Subscriptions: availability. When choosing Yes, enter the Subscription Server URL and define the Subscription failover behavior.
Step 4e. Store/Library Filter: availability. When choosing Yes, enter the Filter Name (name as displayed on the issue page) and the Filter values.
Step 4f. Segment Filter: availability. When choosing Yes, enter the Filter values.
Step 4g. Display Mapping: choose the Rendition to use when the Reader App is used on the specified device.
Step 4h. Rendition Encryption: select the Rendition(s) which content need to be encrypted.
For important information about using encryption, see section 6. Magazine
Encryption.
Only magazines which are uploaded after the encryption functionality has
been enabled for that Rendition are encrypted; already uploaded magazines are not encrypted.
Step 4i. Rendition Minimum Version. By default, the minimum version as set for the Reader App itself is used for each Rendition. If a Rendition requires a different minimum version number, enter one here. (For more information, see Reader Apps and minimum versions.)
Step 5. Click Save.
Appendix F Using the Content Delivery Platform
79
4.1.1 Configuring the Metadata
In order to view and/or edit the Reader App metadata, perform the following steps:
Step 1. In the Application Maintenance sec-tion of the Application pane, select the Reader App which needs to be configured.
The Reader App screen appears.
Step 2. Click Metadata.
The Metadata screen appears.
Step 3. To edit the metadata, click Edit.
Step 4. Modify the metadata as required.
Step 5. When ready, click Save.
4.2 Managing Issues
Issues can be managed in the following ways:
�Add
�Delete
�Edit
�Add Rendition
�Convert to HTML5
Each is explained in the following sections.
4.2.1 Adding an Issue
For information about adding an Issue, see section 3.4 Adding an Issue.
Appendix F Using the Content Delivery Platform
80
4.2.2 Deleting an Issue
To delete an issue, perform the following steps:
Step 1. In the Publication Overview pane, select the issue which needs to be deleted.
The issue screen appears.
Step 2. Click Delete Issue.
Step 3. A message appears asking to confirm the action.
Step 4. Respond to the message by doing one of the following:
�Click Cancel to continue without deleting the issue.
�Click Delete to delete the issue and all its components
4.2.3 Editing an Issue
To edit an issue, perform the following steps:
Step 1. In the Publication Overview pane, select the issue which needs to be edited.
The issue screen appears.
Step 2. Click Edit.
Step 3. Do one of the following:
When no content has been uploaded yetStep 3a. Change any of the available fields as required.
When content has been uploadedStep 3a. (Optional) Click on a preview to view it in full size in a new window.
Step 3b. Change the magazine content or any of the previews.
All fields can be modified, with the exception of the product ID and the
payment type.
When either is done, the old files need to be purged.
Step 3c. Send an e-mail to [email protected] to request having the old files removed. Please include the prod-uct ID and names of the files which have changed.
You will be informed by WoodWing when the old files are removed and the new files are available.
Appendix F Using the Content Delivery Platform
81
4.2.4 Adding a Rendition
To add a Rendition to an issue, perform the following steps:
Step 1. In the Publication Overview pane, select the issue to which the Rendition needs to be added.
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 pro-vided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable.
Step 6. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons.
Uploading the images can be done while the issue content is being uploaded, you
don’t have to wait for the upload to be completed.
Click on a preview to view it in full size in a new window.
Step 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.
Appendix F Using the Content Delivery Platform
82
4.2.5 Convert to HTML5
Non-HTML5 issues can be converted to HTML5 format for use on the HP TouchPad.
Issues which are converted to HTML5 in this way cannot be used for the HTML5 Reader App.
For more information about converting an issue into HTML5 format, see section 4.6 Managing HTML5 Conversions.
4.3 Managing Segments
Segments can be managed in the following ways:
�Add to a new issue
�Add to an existing issue
�Delete
�Edit
�Add Rendition
�Sort
Each is explained in the following sections.
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.
Appendix F Using the Content Delivery Platform
83
4.3.2 Adding to an Existing Issue
To add a Segment to an existing issue, perform the fol-lowing steps:
Adding additional Segments to an Issue is only pos-sible for those issues which have been set up to
contain Segments during the creation steps of an issue.
Step 1. In the Publication Overview pane, select the issue to which the Segment needs to be added.
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.
Appendix F Using the Content Delivery Platform
84
4.3.3 Deleting a Segment
To delete a Segment, perform the following steps:
Step 1. In the Publication Overview pane, select the Segment which needs to be deleted.
The Segment screen appears.
Step 2. Click Delete Issue.
A message appears asking to confirm the action.
Step 3. Respond to the message by doing one of the following:
�Click Cancel to return to Segment screen without deleting the Segment.
�Click Delete to delete the Segment and all its components (Renditions).
4.3.4 Editing an Segment
To edit a Segment, do one of the following:
When no content has been uploaded yet �Change any of the available fields as
required.
When content has been uploaded �Change the magazine content or any of the
previews.
All fields can be modified, with the excep-tion of the date and time fields (these are
inherited from the parent issue).
When either is done, the old files need to be purged:
�Send an e-mail to [email protected] to request having the old f iles removed. Please include the product ID and names of the files which have changed.
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.
Appendix F Using the Content Delivery Platform
85
4.3.5 Adding a Rendition
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 mini-mum version number used is the number set for either the Reader App or the Rendition. (For more information, see Reader Apps and mini-mum versions.)
Step 5. Upload File. Click Browse to locate the Segment upload file created in Step 1 and click Open.
The upload will start. The progress is visualized by the progress bar.
The content of the uploaded file is verified and the results are displayed in the Report box.
If the validation fails, possible reasons are pro-vided. Resolve these as needed. Until a valid
file has been offered, the Save button will stay unavailable.
Step 6. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons.
Uploading the images can be done while the Segment content is being uploaded,
you don’t have to wait for the upload to be completed.
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.
Appendix F Using the Content Delivery Platform
86
4.3.6 Sorting Segments
To sort Segments, perform the following steps:
Step 1. In the Publication Overview pane, select the issue for which Segments need to be sorted.
The issue screen appears.
Step 2. Do one of the following:
�On the issue screen, click Sort Child Issues.
�From the toolbar at the top of the Publication Overview pane, click Sort.
The Sort screen appears.
Step 3. Sort the Segments by dragging them in the desired order.
Step 4. Click Save.
4.4 Managing Renditions
Managing Renditions should be seen here as using the Renditions which are available in the system.
The availability and properties of the Renditions is man-aged by the System Maintainer; this process is not described here.
Renditions can be managed in the following ways:
�Add to issue
�Delete from issue
�Edit assigned Rendition
Each is explained in the following sections.
Appendix F Using the Content Delivery Platform
87
4.4.1 Adding a Rendition
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:
�On the issue screen, c l ick Add Rendition.
�From the toolbar at the top of the Publication Overview pane, click Add, fol-lowed by Rendition.
Step 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 ho os e th e Rendition on which the issue is to be viewed.
When choosing a Rendition from the list, the page is refreshed and the
value in the Reader App Minimum Version box is updated (See Step 4b).
Step 4b. Reader App Minimum Version. The default minimum
version for the selected Rendition is auto-matically set when the page is loaded and
each time a Rendition is chosen from the Rendition list. The value used is the value as defined on the Reader Application page (for more information, see Reader Apps and minimum versions).
In case a different minimum version num-ber needs to be used, manually change the value.
Step 4c. Upload File. Click Browse to locate the magazine upload file and click Open.
The upload will start. The progress is visual-ized by a progress bar.
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
don’t have to wait for the upload to be completed.
Click on a preview to view it in full size in a new window.
Step 6. Click Save.
Appendix F Using the Content Delivery Platform
88
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 for-mat for use on the HP TouchPad.
Renditions which are converted to HTML5 in this way cannot be used for the HTML5 Reader App.
For more information about converting a Rendition to HTML5 format, see section 4.6 Managing HTML5 Conversions.
Appendix F Using the Content Delivery Platform
89
4.4.3 Deleting a Rendition
To delete a Rendition, perform the following steps:
Step 1. In the Publication Overview pane, select the Rendition which needs to be deleted.
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 screen without deleting the Rendition.
�Click Delete to delete the Rendition.
4.4.4 Editing an Rendition
To edit a Rendition, do one of the following:
�Change the magazine content or any of the previews.
When either is done, the old files need to be purged:
�Send an e-mail to [email protected] to request having the old f iles removed. Please include the product ID and names of the files which have changed.
You will be informed by WoodWing when the old files are removed and the new files are available.
�Click on a preview to view it in full size in a new window.
Appendix F Using the Content Delivery Platform
90
4.5 Managing Subscriptions
Subscriptions can be managed in the following ways:
�Add
�Delete
�Edit
�Sort
Each is explained in the following sections.
4.5.1 Adding Subscription
For information about adding a Subscription, see section 3.4.3 Adding a Subscription.
4.5.2 Deleting a Subscription
To delete a Subscription, perform the following steps:
Step 1. In the Apple Subscriptions section of the Application pane, select the Subscription which needs to be deleted.
The Subscription screen appears.
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 screen without deleting the Subscriptions.
�Click Delete to delete the Subscriptions.
Appendix F Using the Content Delivery Platform
91
4.5.3 Editing an Subscription
To edit a Subscription, perform the following steps:
Step 1. In the Apple Subscriptions section of the Application pane, select the Subscription which needs to be edited.
The Subscription screen appears.
Step 2. Click Edit.
Step 3. Change any of the available fields as required.
Step 4. Click Save.
4.5.4 Sorting Subscriptions
To sort Subscriptions, perform the following steps:
Step 1. In the Apple Subscriptions section of the Application pane, select the Reader App for which Subscriptions needs to be sorted.
Step 2. From the toolbar at the top of the Publication Overview pane, click Sort.
The Sort screen appears.
Step 3. Sort the Subscriptions by dragging them in the desired order.
Step 4. Click Save.
Appendix F Using the Content Delivery Platform
92
4.6 Managing HTML5 Conversions
Non-HTML5 content can be converted to HTML5 format for use on the HP TouchPad. This process is managed from the Mass HTML5 Export screen, accessed by selecting the Reader App for which the conversions need to be managed from the Publication Overview pane of the Publication tab.
Content which is converted to HTML5 in this way cannot be used for the HTML5 Reader App.
The Mass HTML5 Export screen shows each issue shaded in dark gray, followed by each available Rendition for that issue in light gray.
Indicators in the HTML column display the current status:
�No indicator: the issue or Rendition is not converted.
�Green tick: the issue or Rendition has been converted to HTML5 and is up-to-date.
�Red cross: the issue or Rendition has been converted but the conversion proces was unsuccessful. (To resolve this problem, perform steps 1 to 6 from section 4.6.1 Converting to HTML5 Format.)
�Yellow exclamation mark: the issue or Rendition has been converted to HTML5 but a newer version of the issue or Rendition is avail-able. (Convert this newer version by performing the steps found in section 4.6.1 Converting to HTML5 Format..)
The following processes can be managed:
�Converting issues or Renditions to HTML5 format
�Removing converted HTML5 issues or Renditions
Each is explained in the following sections.
Appendix F Using the Content Delivery Platform
93
4.6.1 Converting to HTML5 Format
Content on the CDP in non-HTML5 format can at any time be converted to HTML5 format by performing the following steps:
Step 1. Upload the non-HTML5 content as described in section 3.4 Adding an Issue.
Step 2. In the Publication Overview pane, select the Reader App which contains the con-tent that needs to be converted.
The Mass HTML5 Export page appears, show-ing each issue shaded in dark gray, followed by each available Rendition for that issue in light gray.
Step 3. Select one or more issues and/or Renditions which need to be converted to HTML5.
When selecting an issue or Rendition con-taining Segments, all these Segments will
be converted as well.
Step 4. Click Convert.
A HTML5 Export window appears confirming the number of issues/Renditions which will be converted.
Step 5. Click Save & Finish.
The HTML5 Export window now shows prog-ress bars with which the conversion and upload process can be followed. As soon as all files are uploaded, the OK button becomes available.
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.
Appendix F Using the Content Delivery Platform
94
4.6.2 Removing Converted Content
In case issues or Renditions are no longer required to be available in HTML5 format, they can be removed by performing the following steps:
Step 1. In the Publication Overview pane, select the issue containing the converted content.
The details page for that issue appears.
Step 2. Click Delete HTML Versions.
A message appears asking to confirmation the action.
Step 3. Respond to the message as follows:
�Click Cancel to return to the issue details page without removing the converted issue.
�Click Delete to delete the converted HTML content for that issue.
The process is hereby complete.
4.7 Managing Development Devices
Development Devices can be managed in the following ways:
�Add
�Delete
�Edit
Each is explained in the following sections.
4.7.1 Adding a Development Device
For information about adding a Development Device, see section 3.5 Adding a Development Device.
Appendix F Using the Content Delivery Platform
95
4.7.2 Deleting a Development Device
To delete a Development Device, perform the following steps:
Step 1. In the General pane, select the Development Device which needs to be deleted.
The Development Device screen appears.
Step 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 the Development Device.
�Click Delete to delete the Development Device and all its components
4.7.3 Editing a Development Device
To edit a Development Device, perform the following steps:
Step 1. From the Device Maintenance section of the General pane, select the Development Device which needs to be edited.
The Development Device screen appears.
Step 2. Click Edit.
Step 3. Do any of the following:
�Change the Device Comment.
�(Optional, only when a user is located in multiple domains) Select the Domain(s) which the Development Device should be part of.
Step 4. Click Save.
Appendix F Using the Content Delivery Platform
96
4.8 Sending a Push Notification (Message)
(iPad Reader Apps only) The message functionality can be used to perform one of the following actions:
�To send users of a Reader App short messages, typically to inform them that new releases are available such as those of the Reader App.
� To notifiy the Newsstand (as part of iOS 5) that a new version of the issue is
available. (For more information about the Newsstand feature, see chapter 7, Customizing the iPad Reader App – 9.11, Newsstand (iOS 5).)
Each is explained in the next sections.
4.8.1 Sending a Message to Users
In order for the user to receive such messages, he/she needs to have agreed upon receiving them (by confirming this when launching the Reader App for the first time).
Keep in mind the following:
�The message is shown as soon as it is received by the device, the Reader App itself does not have to be opened.
�It is not guaranteed that the message reaches the user; messages can be delayed or failed to be delivered.
To send a message to Reader App users, do the following:
Step 1. In the Push Notifications pane of the Application tab, select the Reader App to which a message needs to be sent.
The Push Notifications page appears.
Step 2. (Optional, only required when setting up the environment for the first time). Upload the required certificate by doing the following:
Step 2a. Generate the Apple Push Notification (APN) Certificate as described in http://developer.apple.com/library/ios/#documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ProvisioningDevelopment/ProvisioningDevelopment.html.
Step 2b. Export the APN Certificate as described in the above link but make sure to use an empty password for the certificate.
Appendix F Using the Content Delivery Platform
97
Step 2c. In the Certificate section of the Push Notifications screen, click Add.
Step 2d. Browse to the location where the exported certificate is stored.
Step 2e. Click Open.
Step 3. In the Send Notif ication section, make sure that the Send Notification to Newsstand option is set to No.
The Message box appears.
Step 4. Enter your message in the Message box
The options for writing a message are only available when a certificate is successfully
added and a registered device is found.
A maximum of 150 characters is allowed.
Step 5. (Optional) If the message is only to be sent to development devices, select the Only Development Devices check box.
Step 6. Click Send to send the message.
Details of the sent message are displayed in the Message Overview section of the screen, with the Sent column displaying the current status of the message:
In progress
Message sent
Message could not be sent
Step 7. To verify if the message has been sent completely, select the Reader App in the Push Notifications pane of the Application tab once more.
The more registered devices exist, the longer it takes to send out the message.
Appendix F Using the Content Delivery Platform
98
4.8.2 Sending a Newsstand Notification
When the Reader App is made part of the Newsstand, a notification can be send to inform the
Newsstand that a new version of an issue is available. This will trigger an automatic download of that issue. (For more information, see chapter 7, Customizing the iPad Reader App – 9.11, Newsstand (iOS 5).)
To send out the notification, perform the following steps:
Apple specifies that only one notification can be send out every 24 hours.
Step 1. In the Push Notifications pane of the Application tab, select the Reader App for which a notification needs to be sent.
The Push Notifications page appears.
Step 2. In the Message Overview section of the screen, verify that no notification has been sent within the last 24 hours. If so, wait until this time period has passed before sending out a new notification.
Step 3. (Optional, only required when setting up the environment for the first time). Upload the required certificate by doing the following:
Step 3a. Generate the Apple Push Notification (APN) Certificate as described in http://developer.apple.com/library/ios/#documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/ProvisioningDevelopment/ProvisioningDevelopment.html.
Step 3b. Export the APN Certificate as described in the above link but make sure to use an empty password for the certificate.
Step 3c. In the Certificate section of the Push Notifications screen, click Add.
Step 3d. Browse to the location where the exported certificate is stored.
Step 3e. Click Open.
Step 4. In the Send Notif ication section, make sure that the Send Notification to Newsstand option is set to Yes.
The Select Issue list appears, showing the last 10 active issues.
Step 5. From the Select Issue list, choose the issue for which a notification needs to be send.
The options are only available when a cer-tificate is successfully added and a
registered device is found.
Step 6. (Optional) If the notification is only to be send to development devices, select the Only Development Devices check box.
Step 7. Click Send to send the notification.
Details of the sent notification are displayed in the Message Overview section of the screen, with the Sent column displaying the current sta-tus of the notification:
In progress
Message sent
Message could not be sent
Step 8. To verify if the notification has been sent completely, select the Reader App in the Push Notifications pane of the Application tab once more.
Appendix F Using the Content Delivery Platform
99
The more registered devices exist, the longer i t takes to send out the
notification.
4.9 Managing Users
Users can be managed in the following ways:
�Add
�Edit
Each is explained in the following sections.
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.
Appendix F Using the Content Delivery Platform
100
5. Progressive Downloads
By default, the CDP provides content progressively to the user. This means that the download is split into smaller parts: the most basic content is made available first (such as the cover and the cover story) and the user can open the magazine and start reading that content while all other content is progressively downloaded in the background.
The behavior of the progressive download process is as follows:
�Download is started: an initial package is downloaded, consisting of the magazine.xml file, the cover and all thumbnails.
�When user does not interact with the magazine, stories will be downloaded in order of appearance (first story first, last story last).
�When the user accesses a story (in any possible method, for instance by tapping a pre-view in the Story Navigator, tapping a Dossier Link on the cover, etc), the following rules apply:
�The currently visible story maintains the highest download priority and its content will be displayed immediately.
“Immediately” in this context means whenever the tablet has a download
slot (thread) available. In the case of the iPad for instance, 3 threads are active at all times. None of the threads will be can-celled, but each will finish first before the next is started. In the extremely rare situa-tion where all three threads are downloading a large video, ‘immediately’ may take a while (until a thread is available).
�The story next in line will have “normal” priority.
�Stories that are linked within the currently visible story (by means of a Dossier Link), will also have “normal” priority.
�All other stories will have “low” priority.
ConfigurationNo specific configuration is required to make use of the progressive download feature; all is taken care of by the Content Delivery Platform. Also, the magazine content can be uploaded as a .zip file as normal.
Appendix F Using the Content Delivery Platform
101
6. Magazine Encryption
In order to prevent magazines from being copied between unauthorized devices, a magazine can be encrypted. This process (which is optional) takes place during the upload of the magazine to the Content Delivery Platform.
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 RenditionsDetermining whether or not a magazine is encrypted is specified on Rendition level.
Magazine encryption is currently only supported by the iPad Reader App. Make sure therefore to only
enable encryption for those Renditions which are solely aimed at reading on the iPad (keep in mind iPad Renditions which are also used on other platforms, such as on Android). Any non-iPad Reader Apps currently can-not read encrypted magazines. We therefore advise to make use of this feature for those issues which are pub-lished to the iPad only.
Encryption and minimum Reader App versionMaking use of this new feature will require a Reader App update to be released (see chapter 7, Customizing the iPad Reader App, section 5.5.2, Update Release.)
Encryption and existing issuesOnly magazines which are uploaded after the encryp-tion functionality has been enabled for that Rendition are encrypted; already uploaded magazines are not encrypted, but can still be read by the updated Reader App.
102
G
102
Customizing the HTML Store is important when you want to achieve any of the following:
�Giving it a unique look and feel (reflecting the content of the issues that will be viewed)
�Enabling those features that you want your users to use
This appendix describes how to customize the HTML Store.
1. Required Tools
In order to perform the steps as outlined in this appendix, the following tools are required:
�CSS editor. For editing CSS files. Use your favorite editor for this task.
�Image editor. For editing images. Use your favorite editor for this task.
�Config files editor. For editing configuration files. Use your favorite editor for this task, such as an XML editor or plain-text editor.
Locating customizable componentsTo locate a specific component of the Store or to verify its properties, view the Store in a Web Browser and use browser’s tools such as the Developer Tools.
Customizable components are referenced in this appen-dix by the CSS files in which they appear and the class selectors in which they are used. This allows you to quickly reference the source files for making the required changes.
Customizing the HTML Store
Appendix G Customizing the HTML Store
103
2. The Store
The Store is used for showing the user the available issues for a particular title, and to offer the user the possibility to download individual issues (either free of charge or as part of a subscription).
The Store functionality is only available in the Pro, Framework, Subscr iption, and the Apple
Subscriptions Editions of the Reader App.
The Store consists of the following main components:
�Top Toolbar. Contains buttons for performing the following tasks:
�Back to Magazine. (iPad Reader App only) For returning to an opened issue.
�Filters. For filtering the content on spe-cific values.
�Grid View/Single Issue View. For changing the display method.
�Sign In/Sign Out . (Non-iTunes Subscription services only) For signing in or out of a non-iTunes Subscription service.
�Subscription offers page. A Web page for advertising subscription offers.
�Upgrade bar. Contains buttons for sub-scribing to a new subscription or upgrading an existing subscription.
�Store view. Shows the available issues in either multiple-issue view (also referred to as the grid view) or single-issue view.
�Store Filter. For filtering the content of the Store.
�Issue preview. Shows a preview of the issue content, usually in the form of a representative page or the table of contents.
�Subscription Sign In window. For signing in to an non-iTunes Subscription service.
See images on the next pages.
Since the layout of the Store is all done in HTML, you are free to use these components and change/rearrange them in such a way that they reflect the look and feel of your publication.
Customizing the Store can be done by changing the following:
�Configuration settings
�Images
�Colors
�Fonts
�Text
�Language
�iTunes Subscription environment
�Non-iTunes Subscription environment
�Mixed Subscription environment
Each is described in the following sections.
Appendix G Customizing the HTML Store
104
Figure 2a. The HTML Store in Grid view mode with the Subscriptions Offer page shown at the top
A
C
D
B
A Top Toolbar B Subscription offer page C Upgrade bar D Store view in multiple-issue mode
Appendix G Customizing the HTML Store
105
Figure 2b. The HTML Store in issue preview mode
A
A Issue preview
Appendix G Customizing the HTML Store
106
Figure 2c. The Store Filter of the HTML Store
A Store Filter
A
Appendix G Customizing the HTML Store
107
Figure 2d. The subscription sign-in window
A
A Subscription sign-in window
Appendix G Customizing the HTML Store
108
2.1 Opening Issues Directly From the Store
The HTML Store API has been expanded with a call to open already downloaded issues directly from
within the Store. Using this call, the Store can be changed to add for instance an "Open" button to issues that are already downloaded or you can let a tap on the cover open a magazine.
The HTML Store that is bundled with this release does not yet use this feature.
The URL used in the API is: URL ww://issues/open/[id].
Appendix G Customizing the HTML Store
109
3. Project Files
Customization of the HTML Store is achieved by editing various types of files which are provided as part of the Reader App.
The following types of files can be edited:
�Configuration files. Used for configuring the Store functionality:
�DMSettings.plist file. For configuring Store functionality in the Reader App.
�Images. Used for changing the appearance of the Store in the form of buttons, icons, etc. Images are stored in the following location:
�Resources/htmlstore/storefront/themes
Folders exist for each Reader App platform:
�android: images for the Store in the Android Reader App.
�default: images for platforms other than Android or iOS.
�ios: images for the Store in the iPad Reader App.
�CSS files. Used for changing the functional-ity and/or appearance of the Store in the form of background colors, text, etc. Different CSS files are available for different areas of the Store (listed in alphabetical order):
�base.css. Used for controlling the gen-eral appearance and functionality of the Store.
�filters.css. Used for controlling function-ality related to the Store filter.
�gridview.css. Used for controlling func-tionality related to the Gridview mode.
�navigation.css. Used for controlling the appearance of the navigation tools.
�preview.css. Used for controlling the appearance of the issue preview.
�signin.css. Used for controlling the appearance of the subscription sign in dia-log box.
�singleview.css. Used for controlling functionality related to the single view mode.
�subscription.css. Used for controlling the appearance of the Subscription Offer pages.
�toolbar.css. Used for controlling the appearance of the View toolbar.
�webcontainer.css. Used for displaying external content such as the "Forgot my password" page, the "Privacy" page, etc.
Separate CSS files are available for each of the different Reader Apps which have Store functionality. They are stored in the following location:
�All files except the subscription.css file: Resources/htmlstore/storefront/themes
�subscription.css file: /storefront/components/subscription/css/
For all files except the subscription.css file, fold-ers exist for each Reader App platform:
Appendix G Customizing the HTML Store
110
�android: CSS files for the Store in the Android Reader App.
�default: CSS files for platforms other than Android or iOS.
�ios: CSS files for the Store in the iPad Reader App.
The configuration of each type of file is explained in the following sections.
3.1 Configuration Settings
When the Store is integrated in the Reader App, the com-munication between the Store and the Content Delivery Platform is handled by the Reader App itself.
For more information about configuring the Store for the iPad Reader App, see chapter 7, Customizing the iPad Reader App – section 7. The Store.
For more information about configuring the Store for the Android Reader App, see chapter 9, Customizing the Android Reader App – section 7. The Store.
Appendix G Customizing the HTML Store
111
3.2 Images
Store images include all images used in the Store.
Take note of the following:
�When renaming images, make sure to also rename their references in the relevant CSS files
�All images need to be in PNG file format
The following images can be customized (in alphabeti-cal order. For examples, see the images on the following pages).
�bg-rail-vertical.png. Reserved for future use.
�bg-rail.png. Displayed when the user taps the left or right Hotzone.CSS reference:
CSS file: navigation.cssClass selectors: .navigator.x.previous
.navigator.x.next
�button.png. (Non-Android Only) Buttons used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.
CSS references:CSS file: gridview.cssClass selectors: .storefront-gridview-
button
CSS file: signin.cssClass selector: .submit-button
CSS file: singleview.cssClass selectors: .storefront-sing-
leview-button
CSS file: toolbar.cssClass selectors: .toolbar .button.
filter .toolbar .button.sign
CSS file: webcontainer.cssClass selectors: .button.sign
.button.back
�ButtonActive.png. (Android only) Buttons used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.
CSS references:CSS file: gridview.cssClass selectors: .storefront-gridview-
button
CSS file: preview.cssClass selector: .preview-button
CSS file: signin.cssClass selector: .submit-button
CSS file: singleview.cssClass selector: .storefront-sing-
leview-button
CSS file: toolbar.cssClass selectors: .toolbar .button
.toolbar .button.singleview .toolbar .button.gridview
CSS file: webcontainer.cssClass selectors: .button.sign
.button.back
Appendix G Customizing the HTML Store
112
�ButtonPressed.png. (Android only) Buttons used in the top Toolbar.
CSS references:CSS file: toolbar.cssClass selectors: .toolbar .button.
pressed .toolbar .button.singleview.active .toolbar .button.gridview.active
�checkbox.png. The Remember Me check box in the subscription sign-in window in its deselected state.CSS reference:
CSS file: signin.cssClass selector: .signin .checkbox
�checkboxChecked.png. The Remember Me check box in the subscription sign-in win-dow in its selected state.CSS reference:
CSS file: signin.cssClass selector: .signin .checkbox.
checked
�checkmark.png. Used in the Store Filter for indicating that a list option is selected.CSS reference:
CSS file: filters.cssClass selector: .checkbox-filter
�closeButton.png. Used for closing the issue preview window or the subscription sign-in window.
CSS references:CSS file: preview.cssClass selectors: .preview .close-button
CSS file: signin.cssClass selector: .signin .close-button
�gridview-icon-active-button.png. Grid view button in its selected state.CSS reference:
CSS file: toolbar.cssClass selector: .toolbar .button.grid-
view.active
�gridview-icon-button.png. Grid view but-ton in its non-selected state.CSS reference:
CSS file: toolbar.cssClass selector: .toolbar .button.
gridview
�gridview-item-shadow.png. The shadow below the small issue covers.CSS reference:
CSS file: gridview.cssClass selectors: .storefront-gridview
li
�gridView-shelf.png. The background of the Gridview.CSS reference:
CSS file: gridview.cssClass selectors: .storefront-gridview
�GridviewIcon.png. (Android only) Grid view button.CSS reference:
CSS file: toolbar.cssClass selector: .gridview-img
�single-bg.png. The background of the sin-gle-issue view.CSS reference:
CSS file: singleview.cssClass selectors: .storefront-singleview
�single-shelf.png. Shelf used in single-issue view.CSS reference:
CSS file: singleview.css
Appendix G Customizing the HTML Store
113
Class selectors: .page-move-container > div
�singleview-icon-active-button.png. (Non-Android Only) Single-view button in its selected state.CSS reference:
CSS file: toolbar.cssClass selector: .toolbar .button.sin-
gleview.active
�singleview-icon-button.png. (Non-Android Only) Single-view button in its non-selected state.CSS reference:
CSS file: toolbar.cssClass selector: .toolbar .button.
singleview
�SingleViewIcon. (Android Only) Single-view button.CSS reference:
CSS file: toolbar.cssClass selector: .singleview-img
�singleview-item-shadow.png. The background of the Single-view, including the dropshadow.CSS reference:
CSS file: singleview.cssClass selector: .storefront-sing-
leview-shadow
Appendix G Customizing the HTML Store
114
Figure 3.2a. The assets of the HTML Store with Grid view mode
A button.png B singleview-icon-button.png C gridview-icon-active-button.png D gridView-shelf.pngE gridview-item-shadow.png
D
A
E
A B C A
Appendix G Customizing the HTML Store
115
Figure 3.2b. The single-view mode assets of the HTML Store
A button.png B closeButton.png
A
A
Appendix G Customizing the HTML Store
116
Figure 3.2c. The Library Filter asset
A
A checkmark.png
Figure 3.2d. The Subscription sign-in window assets
A closeButton.png B checkboxChecked.png C button.png
BC
A
Appendix G Customizing the HTML Store
117
3.3 Colors
Store colors include all colors used in the Store, except those that are part of the Subscription Offer page.
For information about the colors for the Subscription Offer page, see section 3.8 Non-iTunes Subscription
Environment.
The following Store colors can be customized:
Top Toolbar colorsThe following colors relating to the top Toolbar can be customized:
�Top toolbar. The color of the top Toolbar.CSS file: base.cssSelector: htmlClass selector: .header
�Toolbar button labels. The color of the Toolbar button labels (the Filters and Sign In buttons).CSS file: toolbar.cssClass selector: .toolbar .button
Upgrade bar colorsThe following colors relating to the Upgrade bar can be customized:
�Buttons. The colors of the buttons in the Upgrade bar, including the color of the labels.CSS file: base.cssSelector: htmlClass selector: .button
Grid view colorsThe following colors relating to the grid view can be customized:
�Button labels. The color of the Preview Issue and Buy/Free button labels.CSS file: gridview.cssClass selector: .storefront-gridview-
button
�Issue name. The title color of the issue name in the grid view.CSS file: gridview.cssClass selector: .storefront-gridview-
name
�Issue description. The title color of the issue description (also called “Cover Story:”) in the grid view.CSS file: gridview.cssClass selector: .storefront-gridview-
story
Appendix G Customizing the HTML Store
118
Single-view colorsThe following colors relating to the single-view can be customized:
�Issue info background. The background color of the issue info.CSS file: preview.cssClass selector: .preview-info
�Button labels. The color of the Preview Issue and Buy/Free button labels.CSS file: singleview.cssClass selector: .storefront-singleview-
button
�Issue name. The title color of the issue name in the single view.CSS file: singleview.cssClass selector: .storefront-singleview-
name
�Issue description. The title color of the issue description (also called “Cover Story:”) in the single view.CSS file: singleview.cssClass selector: .storefront-singleview-
story
Issue preview colorsThe following colors relating to the issue preview can be customized:
�Info background. The background color of the Info pane.CSS file: preview.cssClass selector: .preview-info
Appendix G Customizing the HTML Store
119
Subscription sign-in colorsThe following colors relating to the subscription sign-in window can be customized:
�Window header. The background color of the window header and the color of the text.CSS file: signin.cssClass selector: .signin-top
�Links. The color of the links for the “I for-got my password”, “Privacy”, and “License Agreement” text.CSS file: signin.cssClass selector: .link
3.4 Fonts
Store fonts include all fonts used in the Store, except those that are part of the Subscription Offer page.
For information about the fonts for the Subscription Offer page, see section 3.8 Non-iTunes Subscription
Environment.
The following Store fonts can be customized:
�body. CSS file: base.cssClass selector: .body
�signin-top. The font of the header of the Subscription Sign In dialog box.CSS reference: signin.css
Appendix G Customizing the HTML Store
120
3.5 Text
The text in the Store includes all text except the text which is part of the Subscription Offer page.
For information about changing the text for the Subscription Offer page, see section 3.8 Non-
iTunes Subscription Environment.
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
Each is explained in the following sections.
3.5.1 Changing the Text
The text which appears in the Store originates from vari-ous sources: labels, issue information, and the Store Filter. Each is described below.
Labels The text of the following labels can be changed:
�Button labels in the Subscription bar, top Toolbar, the grid view, single-issue view, issue preview, and sign-in window
�The “Cover Story” label
�The labels in the Sign-in window
The strings for these labels are stored in the following file:
�htmlstore/storefront/strings/en.json
Each string is made up of a key/value combination; modify the value as desired.
Issue informationThe issue name and issue description is derived from the Content Delivery Platform. For more information about changing this information, see appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.
Store filterThe text of the store filter comes in two parts:
�Filter options. These are derived from the Content Delivery Platform. To create the list, see appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.
Each issue in the store needs to have the cor-rect keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:
Appendix G Customizing the HTML Store
121
�Upload your magazine content using the WoodWing Content Delivery Platform and on the Issue Details screen, choose the keyword which should be assigned to the magazine.
For example: when a filter has been set up for distinguishing English and German issues, choose German from the available list when uploading German issues, and English when uploading English issues.
3.5.2 Changing the Color
How and where to change the color of the text is described in section 3.3 Colors.
Appendix G Customizing the HTML Store
122
3.6 Language
Setting the language for the HTML Store is done sepa-rately from setting the language for the rest of the Reader App.
For more information about setting the language for the iPad Reader App, see chapter 7, Customizing the iPad Reader App – section 3.4.3 Changing the Language.
For more information about setting the language for the Android Reader App, see chapter 09, Customizing the Android Reader App – section 4.2.2 Changing the Language.
To set the language for the Store, perform the following steps:
Step 1. Create a new language file by doing the following:
Step 1a. Duplicate the following file:
�htmlstore/storefront/strings/en.json
Step 1b. Rename the file by using the appropriate language code.
The language code should be a two- or three-letter code and comply to
the ISO 639-1 or ISO 639-2 conventions. For a full list of language codes, see: http://www.loc.gov/standards/iso639-2/php/English_list.php.
Step 1c. Open the file and modify the string values as desired.
Step 1d. Save the file.
Step 2. The Store will be notified by the Reader App which language file to use. Specify the lan-guage as follows:
�iPad Reader App: In the Reader App proj-ect, set the language to be used. For more information, see chapter 7, Customizing the iPad Reader App – section 3.4.3 Changing the Language.
�Android Reader App: Set the required lan-guage on the device on which the Reader App is used.
Appendix G Customizing the HTML Store
123
3.7 iTunes Subscription Environment
The environment for an iTunes Subscription service consists of a single HTML page containing the general content (text and images) as well as the Subscription but-tons. (See figure on the next page.)
Source files can be found in the following location:
�Resources/htmlstore/storefront/components/subscription
The following source files are available:
�css/subscription.css. The CSS file used for styling the Offer page.
�subscription.html. The content of the Subscription Offer page.
�subscription.js. A Javascript file which dynamically generates the pages in the required orientation and size for the targeted Reader App.
The subscription.html file replaces the horizontalOf-fer.html and verticalOffer.html files used in previous
versions of the Reader App.
Customizing the Subscription Offer page can be broken down into the following components:
�Page design
�Text
�Text styling
�Subscription buttons
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.
Appendix G Customizing the HTML Store
124
Figure 3.7. The components of the iTunes Subscription environment
A Subscription Offer page B Subscription buttons
A
B
Appendix G Customizing the HTML Store
125
3.7.1 Page Design
The design of the page is controlled by the following two files:
�subscription.css file. Controls the styling of the page.
�subscription.html file. Holds the content of the page.
subscription.css fileSome of the page components which can be controlled through this file include:
�Background. The color gradient in the back-ground of the Offer page:
Class selector: .offer.apple
subscription.html fileThe styling of the text is controlled by assigning the rel-evant tags and css classes (as defined in the subscription.css file). Assign tags and classes as required.
3.7.2 Text
The content of the actual text on the page is controlled by the subscription.html file.
To change any of the titles on the page, change the text as required.
The following default titles are provided:
Subscribe
to
Digital Magazine
Buy a subscription and start saving money today!
Choose your subscription and pay via iTunes
Appendix G Customizing the HTML Store
126
3.7.3 Text Styling
The text styling is controlled by the subscription.css file.
Below follows a list of the class selectors used for styling the various titles on the page.
“Subscribe” title �Color, font style, font size, margin, text
shadow: .offer.apple h1
�Text alignment, letter spacing: .offer.apple div
�Font: .offer.apple
“to” title �Color, font style, margin, letter spacing:
.offer.apple .small-italic
�Text alignment: .offer.apple div
�Font: .offer.apple
“Digital Magazine” title �Color, margin, text shadow:
.offer.apple h2
�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
�Text alignment: .offer.apple div
�Font: .offer.apple
“Choose your subscription and pay via iTunes” title
�Color, letter spacing, font size: .offer.apple .subscript
�Text alignment: .offer.apple div
�Font: .offer.apple
Appendix G Customizing the HTML Store
127
3.7.4 Subscription Buttons
The subscriptions as defined on both iTunes and the Content Delivery Platform appear as buttons on the Offer page.
Figure 3.7.4. The iTunes Subscription buttons on the Offer page
A Subscription buttons
A
The following properties for these buttons can be customized:
�The total number of buttons �The layout of the buttons �The appearance of the buttons �The button labels �The button label fonts
Each is explained below.
When running the Reader App with an iTunes sub-scription on the Simulator as a developer device, all
Subscription offer buttons will display a price of $99.99. This is because the real prices cannot be validated from iTunes when the app runs in the Simulator.
Appendix G Customizing the HTML Store
128
Total Number of ButtonsThe total number of buttons is dynamically determined by the subscription.js file during the process of building the Reader App. No customization therefore needs to take place.
The Layout of the ButtonsThe layout of the buttons is controlled by the following class selectors in the subscription.js file:
�createVerticalButtonBar. Controls the number of vertical rows.
�createHorizontalButtonBar. Controls the number of horizontal rows.
The Appearance of the ButtonsTo customize the appearance of the buttons, modify the following class selector in the subscription.css file:
�.offer.apple td
The Button LabelsThe button labels are taken from the Description informa-tion, as entered on the Subscription page in the Content Delivery Platform. (See appendix F, Using the Content Delivery Platform – section 4.1 Configuring Reader Apps.
To customize the appearance of the button labels, modify the following class selectors in the subscription.css file:
�.offer.apple .price �.offer.apple .description �.offer.apple �.offer.apple a
Appendix G Customizing the HTML Store
129
3.8 Non-iTunes Subscription Environment
An environment for a non-iTunes Subscription service consists of the following components (see figure on the next page.):
�A Sign In/Sign Out button
�A Subscription Offer page
�An area holding the Subscription buttons
Each is explained in the following sections.
3.8.1 A Sign In/Sign Out Button
The Sign In/Sign Out button allows the user to log in or out of the external subscription environment.
Customizing this button is done through the following source file of the HTML Store:
toolbar.cssClass selectors: .toolbar .button.sign
.toolbar .button
.button
Appendix G Customizing the HTML Store
130
Figure 2a. The components of a non-iTunes Subscription environment
A
C
B
A Sign In/Sign Out button B Subscription Offer page C Area holding Subscription buttons
Appendix G Customizing the HTML Store
131
3.8.2 The Subscription Offer Page
The Subscription Offer page is an external file, typically stored on the Subscription server.
Two versions of this page need to be made available:
�A horizontal Offer page. This page is shown when the device is held in portrait orientation.
�A vertical Offer page. This page is shown when the device is held in landscape orientation.
Use the following dimensions:
iPad Reader App �Offer page shown with device in portrait
orientation: width: 768 pixels, height: 205 pixels.
�Offer page shown with device in land-scape orientation: width: 303 pixels, height: 469 pixels.
Android Reader App (Froyo) �Offer page shown with device in portrait
orientation: width: 318 pixels, height: 315 pixels.
�Offer page shown with device in land-scape orientation: width: 600 pixels, height: 210 pixels.
Android Reader App (Honeycomb) �Offer page shown with device in portrait
orientation: width: 318 pixels, height: 500 pixels.
�Offer page shown with device in land-scape orientation: width: 800 pixels, height: 210 pixels.
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
Each is described below.
Button areaCustomizing the area is done through the following source file of the HTML Store:
base.cssClass selectors: .upgrade
.horizontal .upgrade
.vertical .upgrade
Button labelsThe button labels can be changed/localized by modifying the source strings. For more information, see section 3.5.1 Changing the Text.
Appendix G Customizing the HTML Store
132
3.9 A Mixed Subscription Environment
An environment in which both an iTunes and a non-iTunes Subscription service is used consists of the following components (see figure on the next page):
�An iTunes Subscription Offer page
�A Log In/Log Out button
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 pageFor more information about this page, see section 3.7 iTunes Subscription Environment.
Log In/Log Out buttonFor more information about customizing this button, see section 3.8.1 A Sign In/Sign Out Button.
Appendix G Customizing the HTML Store
133
Figure 3.9. The components of a mixed Subscription environment
A Sign In/Sign Out button B Subscription Offer page
B
A
134
H
134
Distributing a digital magazine involves many different steps and processes. The more experi-ence users get with using a new technology and processes, the more tricks of the trade are being defined and discovered.
This appendix is aimed at sharing some of those experiences.
Other frequently asked questions can be found on the WoodWing Commun i t y s i te ( l og- in required): http://community.woodwing.net/forum/ipad-questions-and-answers.
1. Generating IDs and Keys
Tips for generating IDs and keys:
�AppProductID. Should be something like com.woodwing.wwwt; the free issue will automatically get the AppProductID assigned as a prefix to its IssueID. (For example: com.woodwing.wwwt.zurich2010.)1
�IssueID. It is recommended to use a reverse domain name such as com.woodwing.MyMagazine_issue1.
�SecretKey. To increase security, use a non-trivial key that is hard to guess (for instance by using a combination of numbers and letters or even better by encrypt it with an MD5 hash generator).
1 The Product ID is also used in monthly reports.
Tips and Best Practices
Appendix H Tips and Best Practices
135
2. Submitting and Approval Cycles
It can take up to 2 to 3 weeks for a Reader App or maga-zine issue to be approved by Apple.
One tactic is to register issues in advance with the iTunes Connect service, for instance for a complete year. They can subsequently be ‘cleared for sale’ when the contents of the issue become available. Clearing issues this way typically makes them available almost instantly.
See also this discussion: http://community.woodwing.net/forum/reasons-apple-can-reject-app-review.
iPad
136
I
136
This appendix shows the classes which can be used for customizing the Gestures API for the iPad Reader App.
The preferred way to capture gestures in a custom object is by the use of the UIGestureRecognizer
gesture. Capturing gestures by means of overriding touches proves to be very troublesome, and should be avoided.
For more information, see chapter 7, Customizing the iPad Reader App – section 9.1.2, Gestures API.
Gestures API
Appendix I Gestures API
iPad
137
Gestures API classesDMEGestureManagerattributessharedInstance DMEGestureManager* Pointer to the singleton instancemethodsaddDelegate: void Sets a new delegate conforming to DMEGestureDelegateremoveDelegate: void Removes supplied delegateaddGesture: forKey: void Adds a new gesture to the Reader App
removeGestureForKey: void Removes a gesture from the Reader App
DMEGestureDelegateattributesN/AmethodswillHandleGesture: BOOL Must return whether the delegate will handle this gesturedoHandleGesture: void Is called to actually handle the gesture. Do not perform han-
dling checks here; do these in willHandleGesture.gestureWillCancelNavigation: BOOL If Yes is returned no navigation functions will be executedgestureWillCancelObjects: BOOL If Yes is returned no object functions will be executed
138
J
138iP
ad
This appendix shows the architecture overview of the Data and Navigation API and the classes which can be used for customizing API for use with the iPad Reader App.
For more information, see chapter 7, Customizing the iPad Reader App – section 9.1.3, Navigation API.
1. Structure
Figure 1 on the next page shows the structure of the Navigation API.
Navigation API
Appendix J Navigation API
139iP
ad
Figure 1. A structural overview of the Navigation API
Appendix J Navigation API
140iP
ad
2. Classes
The available classes which can be used are listed below.
DMEDataManagerattributessharedInstance DMEDataManager* Pointer to the singleton instancecurrentIssue DMEIssue* The current issue
methodsrootPath NSString* Returns the path to the local magazine directory
DMEIssueattributesissueDescription NSString* Description of this issuestories NSArray* (DMEStory) List of storiesmethodsgetSectionNames NSArray* (NSString) Returns a list of section namesgetStoriesInSection: NSArray* (DMEStory) Returns a list of stories for the given sectiongetStoryWithId: DMEStory* Returns the story for a given story idgetPageWithStoryId: pageIndex: issueOrientation: DMEPage* Returns a page for the given story id, page index and
layout orientation
getAllPagesForOrientation: NSArray* (DMEPage) Returns a list of all pages for all stories for the given layout orientation.
getAllFirstPagesForOrientation: NSArray* (DMEPage) Returns a list of the first page of a story for all stories for a given layout orientation
Appendix J Navigation API
141iP
ad
DMEStoryattributesissue DMEIssue* Pointer to the parent issueidentifier NSString* Identifier of the storysection NSString* Name of the section that this story belongs totitle NSString* Title of the storystoryDescription NSString* Description of the storyauthor NSString* Author of the storythumb NSString* URL of the thumbnailpreview NSString* URL of the previewstylesheet NSString* Data of the applied stylesheetintent NSString* Intent of the storyhorizontalPages NSArray* (DMEPage) List of the pages that are layed out in landscapeverticalPages NSArray* (DMEPage) List of the pages that are layed out in portraitelements NSArray* (NSDictionary) List of the story elementsimages NSArray* (NSDictionary) List of the story imageshyperlinks NSArray* (NSDictionary) List of the story hyperlinks
methodsgetPageWithIndex: issueOrientation: DMEPage* Returns a page for a given index and orientation
Appendix J Navigation API
142iP
ad
DMEPageattributesstory DMEStory* Pointer to the parent storylayoutOrientation DMEPageLayoutOrientation The layout orientation of the pagepageIndex int The index of the pageidentifier NSString* The identifier of the pagethumb NSString* URL of the thumbnailpreview NSString* URL of the previewobjects NSArray* (DMEObject) List of objects on the page
methodsN/A
Appendix J Navigation API
143iP
ad
DMEObjectattributespage DMEPage* Pointer to the parent pageparentObject DMEObject* Pointer to the parent object (if applicable)identifier NSString* identifiertype NSString* Object type (movie, audio, scroll area etc)x NSString* X positiony NSString* Y positionwidth NSString* widthheight NSString* heightitemId NSString* item IDlink NSString* linkweblink NSString* web linkopeninternal NSString* open internalurl NSString* URLspecialProperties NSDictionary* Properties that are specific for this object typeobjects NSArray*
(DMEObjects)List of child objects (Hotspot, Scrollable area)
methodsN/A
Appendix J Navigation API
144iP
ad
DMENavigationManagerProtocolattributesN/A
methodscurrentPageChanged: void Called when the current page in the Reader App has changed. Supplies the
new page as a DMEPage layoutOrientationHasChanged void Called when the current layout orientation in the Reader App has
changed. Typically when the ipad is rotated.IssueHasLoaded: void Called when the data manager finished loading the current issue.
Appendix J Navigation API
145iP
ad
DMENavigationManagerattributessharedInstance DMENavigationManager* Pointer to the singleton instancecurrentLayoutOrientation DMEPageLayoutOrientation Current reader layout orientationcurrentPage DMEPage* The current page
methods
navigateToSection: void Navigates the Reader App to the first page of the first story of the given section name.
navigateToStory: void Navigates the Reader App to the first page of the given storynavigateToPage: void Navigates the Reader App to the given pagehistoryGoBack void Navigates the Reader App back in the history stackhistoryGoForward void Navigates the Reader App forward in the history stackhistoryCanGoBack BOOL Indicates if it is possible to navigate back in the historyhistoryCanGoForward BOOL Indicates if it is possible to navigate forward in the history
addDelegate: void Adds a given delegate to the navigationmanager. It must confirm to DMENavigationManagerProtocol
RemoveDelegate: void Removes a given delegate from the navigation manager
146
K
146iP
ad
The Analytics feature of the iPad Reader App can be used for logging events such as browsing to new sections, buying an issue, launching/exiting the app, and more. These events can subsequently be analyzed used specific software packages.
Analytics modules can be used as an interface to receive these events. The default analytics module which is implemented in the Reader App is powered by Omniture. To use other analytics frameworks—such as Google Analytics or Flurry—a custom analytics module needs to be developed.
This appendix describes how the default Omniture module can be configured into the Reader App; how to configure other solutions is not covered.
Events sent from the device are collected by Omniture/Catalyst servers and presented for reporting in Adobe SiteCatalyst.
1. Prerequisites
Please take note of the following prerequisites for using this feature:
�The customer should have knowledge of Omniture and have an Omniture account.
An Omniture account can be obtained through https://developer.omniture.com/user/register.
�The customer should have knowledge of Adobe SiteCatalyst.
For more information about Adobe SiteCatalyst, see http://www.omniture.com/en/products/online_analytics/sitecatalyst.
�WoodWing does not provide support on cus-tomizing Omniture; for any Omniture support, please contact an Omniture consultant.
Omniture Integration
Appendix K Omniture Integration
147iP
ad
2. Viewing Data
OmnitureAn example of how traffic sent to Omniture can be viewed is displayed in figure 2a below.
Notice the following:
�pageNames are concatenated
�Custom traffic variables (traffic props) are pre-fixed with “c”
�Custom Conversion Insight Variables (eVars) ar prefixed with “v”
�A dynamicVariablePrefix (D=) is used for variables that are calculated dynamically (by Omniture server)
�The use of custom event “event1”
For a full overview of the the events and variables that are sent out by the Reader App, see section 7. Variables Sent with all Tracks.
Adobe SiteCatalystAn example of the page view reports in Adobe SiteCatalyst can be seen in figure 2b below.
Note that a default report is shown; Site Catalyst’s work-bench is highly customizable.
Also note how the concatenated pageNames appear.
Appendix K Omniture Integration
148iP
ad
Figure 2a. Viewing traffic sent to Omniture in HTTPScoop, a HTTP protocol analyzer
Appendix K Omniture Integration
149iP
ad
Figure 2b. The default page report view in SiteCatalyst
Appendix K Omniture Integration
150iP
ad
3. Setting Up SiteCatalyst
Setting up SiteCatalyst can be done in the following ways:
�Setting up custom traffic variables
�Setting up Custom Conversion Insight Variables (eVars)
�Setting up custom success events
Each is described in the following sections.
3.1 Custom Traffic Variables
To set up custom traffic variables in SiteCatalyst, use the below table.
Names are configurable, but the Property number should not be changed.
Table 3.1. Custom traffic variables in SiteCatalystProperty # Name State
1 Search Terms Disabled2 No of Search Results Disabled3 User Agent Enabled4 Carrier Disabled5 Location Enabled6 App Name Platform | Page
NameEnabled
7 Time of Day Enabled8 Section Enabled9 User Engagement Action Disabled10 Platform Enabled11 App Name Enabled12 App Distribution Channel Enabled13 View Type Enabled14 Virtual Page Name Disabled15 Traffic - Day Parting Disabled16 Site Channels (Site Sections) Enabled17 URL Enabled18 Screen Orientation Enabled19 Offline Enabled20 Issue Enabled
(Continued in next column)
Appendix K Omniture Integration
151iP
ad
Table 3.1. Custom traffic variables in SiteCatalyst (continued)Property # Name State
21 Traffic - Product Name Disabled22 is Subscriber Enabled24 Issue Enabled48 Custom Insight 48 Disabled49 Video Tracking Disabled50 Not For Use - Events Disabled
3.2 Custom Conversion Insight Variables
To set up Custom Conversion Insight Variables (eVars) in SiteCatalyst, use the below table.
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.
�The values for variables with name “....”, refer to traffic variables that are not sent from the Reader App.
Table 3.2. Custom Conversion Insight Variables (eVars)eVar # Name
3 Unique ID4 Merchandising Category5 …6 App Name - Platform | Page Name11 App name Platform Version12 Store Type (Acquisition Channel)13 Install Date24 Store / Library27 …28 Section30 Current Day of Week31 Date Time32 What Day
Appendix K Omniture Integration
152iP
ad
3.3 Custom Success Events
To set up Custom Success Events in SiteCatalyst, use the below table.
Table 3.3. Custom Success eventsEvent Name Typeevent1 Library Issue hit, page view Counterevent3 App Startup Counterevent4 First Time App Startup Counterevent5 App Upgrade Counterevent6 Media Play Counterevent7 Media Stop Counterevent10 subscriber login Counterevent11 subscriber download start Counterevent12 subscriber download finish Counterevent13 non-subscriber download start Counterevent14 non-subscriber download finish Counter
4. Reader App Configuration
To enable and configure the Analytics API in the Reader App, perform the following steps:
Step 1. Open the Digital Magazine project in XCode.
Step 2. Expand the Frameworks folder.
Step 3. Right-click the libOmnitureAnalytics.a Framework and choose Get Info from the con-text menu.
The Library Info screen appears.
Step 4. Choose the Targets tab.
Step 5. In the list of Target Memberships, select the check box for DigiMag_Template.
Step 6. Close the Library Info screen.
Step 7. Expand the Resources folder.
Step 8. Select DMAnalytics.plist.
A list of keys and their values appear.
Step 9. Leave the Module key set to DMOmnitureAnalyticsModule.
This is the required value when using Omniture Analytics.
Step 10. Select the check box for the Enable opt-out key.
This will display a message to the user inform-ing them that when accessing the magazine, specific information is gathered. The user will have the option to cancel or continue.
Appendix K Omniture Integration
153iP
ad
Enabling this setting is mandatory; if not set, the Reader App won’t pass the Apple
approval process.
Make sure to add the appropriate localiza-tion strings with your magazine’s specific
legal disclaimer.
Step 11. Expand the list of Parameters.
A list of default parameters appears.
Step 12. Fill out the parameters by using the guidelines as shown in table 4 below.
Table 4. Parameter values for the DMAnalytics.plist fileKey Description ValueAccount Omniture account woodwing1
Tracking server Omniture tracking server <tracking server address>1
Backlog expire time in days Expire time of the backlog events in number of days. 7
App name Application name for Omniture woodwing1
App platform Application platform for Omniture ipadEnabled Omniture enabled (1) or disabled (0). 1
Visitor cookie ID Name of cookie to set with the (hashed version) of the unique device ID omni_vid
Visitor cookie ID expiry in days The expiration time of the visitor cookie id. 1825
1 This value is specific to your account; consult your Omniture contact for the correct value.
These settings can also be set in the Classes/DigiMagSettings.h file. This has
been done because a plist file can be viewed in the app (‘Show Package Content’ will allow you to view the plist). The default settings of the DMAnalytics.plist refer to the settings of DigiMagSettings.h.
Step 13. (Optional) In the Localizable.strings file, modify and/or localize the strings for the Opt-out dialog box.
Appendix K Omniture Integration
154iP
ad
5. Events
Table 5 shows the events that are tracked within the application.
Table 5. Events tracked within the applicationEvent Trigger Parameters
hitDownloadIssueWithCategory Called when an issue is going to be down-loaded, after having bought one.
issue, currencyCode, price, purchaseId
hitVisitToStoreLandingPage Called when user opens the Store.
hitVisitToLibrary Called when user opens the Library
hitVisitToCover Called when user accesses the magazine cover, but not when in Library.
hitVisitFreePreviewPageWithCategory Called when user accesses an issue preview. issue, purchaseid
hitVisitCurrentIssueTOCCalled when user accesses the Table Of Content of current issue, with optionally the current section.
section
hitVisitToNewsFeed Called when user accesses the News Feed screen
hitVisitToPage Called when user accesses a page title, section, issuehitVisitToAd Called when user accesses an ad page title, section, issue
hitSlideForSlideShowOnPage
Called when user accesses a slide in a slide show. Note that upon accessing a page con-taining a slide show, this function is called immediately for the first slide.
title, section, issue, slide
hitVisitToURL Called when user visits a URL. urlappLaunch Called when the app launches.appExit Called when the app terminates gracefully.mediaOpen Called whenever a media file is accessed. length, name
mediaPlay Called whenever a media file (video or audio) is started. name,offset
Continued on next page
Appendix K Omniture Integration
155iP
ad
Table 5. Events tracked within the application (continued)Key Description Value
mediaClose Called when a media file (video or audio) is closed. name
mediaStop Called when a media file (video or audio) is stopped. name, offset
hotSpotOpen Called when a Hotspot opens hotspotid
Appendix K Omniture Integration
156iP
ad
6. Variables
The sections below show the variables that are sent with every request, split into tracks and track links.
6.1 Tracks
HotspotOpen
Table 6.1a. Variables for HotspotOpenVariable Valueprop14 prop6;
prop9 <hotSpotId>;
eVar21 “D=c9”;events “event9”;trackLink <pageName>linkType “o”linkName “hotspot”
SubscriberLogin
Table 6.1b. Variables for SubscriberLoginVariable Valueevents “event10”;
prop22 “subscriber”;
pageName “kiosk|signin”;prop16 “kiosk”;prop6 “<platform>kiosk|signin”trackLink “<platform>kiosk|signin”linkType “o”linkName “signin”;
Appendix K Omniture Integration
157iP
ad
appLaunch
Table 6.1c. Variables for appLaunchVariable Value
events “event3,event4,event5” (event3 = startup, event4 = if first time, event5 = upgrade)
pageName “app”
prop16 “other”
prop6 “<prop11>|<pageName>”
trackLink: “app”
linkType: “o”
linkName: “app”
hitVisitToURL
Table 6.1d. Variables for hitVisitToURLVariable Valueevents “event1”tracklink “<url> “linkType “e”linkName “<url>”pageName “library | <pageName>”
hitDownloadIssueWithCategory Event
Table 4c. Variables for hitDownloadIssueWithCategoryVariable ValuecurrencyCode <currency code of app store>
events “purchase”
products <purchase parameters>purchaseID <purchase id>pageName “store”prop16 “store”prop6 “<prop11>|<pageName>”track link “store”linkType “o”linkName “store”
Appendix K Omniture Integration
158iP
ad
6.2 Track Links
mediaOpen
Table 6.2a. Variables for mediaOpenVariable ValuetrackVars “eVar20,eVar21,prop9,prop14”;eVar20 <name>;prop9 “Media: “ <mediaURL>;prop14 <pageName>;eVar21 “D=c9”;
mediaPlay
Table 6.2b. Variables for mediaPlayVariable ValuetrackVars “eVar20,eVar21,events,prop9,prop14”;trackEvents “event6”;eVar20 <mediaURL>;events “event6”;prop9 “Media:” <mediaURL>;prop14 <pageName>;eVar21 “D=c9”;
mediaClose
Table 6.2c. Variables for mediaCloseVariable ValuetrackVars “eVar20,eVar21,prop9,prop14”;eVar20 <mediaURL>;prop9 Media: <mediaURL>;prop14 <pageName>;eVar21 “D=c9”;
mediaStop
Table 6.2d. Variables for mediaStopVariable ValuetrackVars “eVar20,eVar21,events,prop9,prop14”;trackEvents “event7”;eVar20 <mediaURL>;events “event7”;prop9 “Media”: <mediaURL>;prop14 <pageName>;
Appendix K Omniture Integration
159iP
ad
hitVisitToExistingPrintSubscriber
Table 6.2e. Variables for hitVisitToExistingPrintSubscriberVariable ValuepageName “store|existing print subscriber”prop6 “store|existing print subscriber”
hitVisitToSubscribe
Table 6.2f. Variables for hitVisitToSubscribeVariable ValuepageName “store|subscribe”prop6 “store|subscribe”
hitSlideForSlideShowOnPage
Table 6.2g. Variables for hitSlideForSlideShowOnPageVariable Valueevents “event1”
pageName “library|<issue>|<title>-<page-id>|slideshow-<slide>”
prop16 “library”
prop20 “<issue>”
prop6 “<prop11>|<pageName>”
prop8 “<section>”
hitVisitToAd
Table 6.2h. Variables for hitVisitToAdVariable Valueevents “event1”
pageName “ads|<issue>|<section>|<title>-<page-id>”
prop16 “library”
prop20 “<issue>”
prop6 “<prop11>|<pageName>”
prop8 “ads”
Appendix K Omniture Integration
160iP
ad
hitVisitToPage
Table 6.2j. Variables for hitVisitToPageVariable Valueevents “event1”
pageName “library|<issue>|<section>| <title>-<pageid>”
prop16 “library”
prop6 “<prop11>|<pageName>”
prop20 “<issue>”
prop8 “<section>”
hitVisitToNewsFeed
Table 6.2k. Variables for hitVisitToNewsFeedVariable ValuepageName “newsfeed”
prop16 “other”
prop6 “newsfeed”
hitVisitToCurrentIssueTOC
Table 6.2l. Variables for hitVisitToCurrentIssueTOCVariable Valueprop16 “library”prop6 “library|<issue>|toc”prop20 <issue>prop8 “toc”
hitVisitFreePreviewWithIssueInfo
Table 6.2m. Variables for hitVisitFreePreviewWithIssueInfoVariable ValuepageName “store|<issue>|preview”prop16 “store”prop6 “store|<issue>|preview”
Appendix K Omniture Integration
161iP
ad
hitVisitToCover
Table 6.2n. Variables for hitVisitToCoverVariable Valueevents “event1”
pageName “store|<issue> | landing page”
prop16 “store”prop6 “<prop11>|<pageName>”prop24 “<issue>”
hitVisitToLibraryCover
Table 6.2o. Variables for hitVisitToLibraryCoverVariable Valueevents “event1”
pageName “library|<issue>”
prop16 “library”prop6 “<prop11>|<pageName>”prop20 “<issue>”
hitVisitToLibrary
Table 6.2p. Variables for hitVisitToLibraryVariable Valueevents “event1”
pageName “library”
prop16 “library”prop6 “<prop11>|<pageName>”
hitVisitToStoreLandingPage
Table 6.2q. Variables for hitVisitToStoreLandingPageVariable Valueevents “prodView,event1”
products <purchase parameters>
purchaseID <purchase id>pageName “store|<issue id>|preview”prop16 “store”prop6 “<prop11>|<pageName>”
Appendix K Omniture Integration
162iP
ad
downloadStarted
Table 6.2r. Variables for downloadStartedVariable Value
events For subscribers: “event11”Else: “event13”
products “<issue>”
pageName “Library | <issue>”
prop6 “pageName”
prop20 “<issue>”
prop16 “library”
trackLink “<issue>”
linkType “o”linkName “downloading”
downloadFinished
Table 6.2s. Variables for downloadFinishedVariable Value
events For subscribers: “event12”Else: “event14”
products “<issue>”
pageName “Library | <issue>”
prop6 “Library | <issue>”
prop20 “<issue>”
prop16 “library”
prop6 “Library | <issue>”trackLink “<issue>”linkType “o” linkName @”downloaded”
Appendix K Omniture Integration
163iP
ad
7. Variables Sent with all Tracks
Table 7. Variables sent with all tracksVariable Valuechannel “<app name> <platform>”
prop3 “D=User-Agent”
prop7 “<date>-<time>”prop10 “<platform>”prop11 “<app name> <platform>”prop12 “itunes”prop18 “<orientation>”prop19 “offline” or emptyprop22 “subscriber or non-subscriber”eVar3 “<unique id>”visitorID “<unique id>”eVar4 “D=c4”eVar5 “D=c5”eVar6 “D=c6”eVar11 “<app name> <platform> <version>”eVar12 “D=c12”eVar13 “<installed date>”eVar22 “D=c22”eVar23 “D=c20”eVar24 “D=c16”eVar27eVar28 “D=c8”eVar30 “<current day of week>”eVar32 “<what day>”
164
L
164iP
ad
This appendix contains information about inte-grating a subscription service using an external subscription server, and customizing the Reader App for use with a subscription service.
For information about integrating an Apple iTunes sub-scription service, see appendix M, iTunes Subscription Server Integration.
For information about subscribing using the Reader App, see chapter 4, Using the Reader App – section 9.1, Store With Subscription Functionality.
1. Steps To Follow
Setting up the Subscription functionality using an external subscription server involves the following steps:
Step 1. Conf igur ing the Subscript ion environment.
Step 2. Configuring the Content Delivery Platform.
Each step is explained in the following sections.
Subscription Server Integration
Appendix L Subscription Server Integration
165iP
ad
1.1 Configuring the Subscription Environment
The subscription environment consists of the following components:
�Web pages with specific information or functionality
�The Subscription server
How to configure each is explained in the following sections.
1.1.1 Web Pages
In order to let the user interact with the subscription ser-vice, various Web pages need to be available.
The following Web pages need to be prepared:
�Subscription page. A Web page which users can use for subscribing to a subscription. This page is shown full screen in the Reader App. Note that one page is used for both orientations.
�Subscription Upgrade page. A Web page which users can use for upgrading their sub-scription. This page is shown full screen in the Reader App. Note that one page is used for both orientations.
�License agreement page. A Web page with information about the license agreement for the subscription. This page is shown full screen in the Reader App.
�Privacy notice page. A Web page with infor-mation about how the user’s data is gathered, used, and managed. This page is shown full screen in the Reader App.
�Customer service page. A Web page which users can use for obtaining customer service. This page is shown full screen in the Reader App.
�Reset password page. A Web page which users can use for resetting their password. This page is shown full screen in the Reader App.
�Subscription offers page. A Web page for advertising subscription offers in the Reader App. This page is part of the HTML Store. For more information about customizing this page, see appendix G, Customizing the HTML Store – section 2, The Store.
Appendix L Subscription Server Integration
166iP
ad
1.1.2 Subscription Server
In order for the Reader App and the Subscription server to properly communicate with each other, various server components need to be linked to those of the Reader App. This is achieved by matching the key values on the server to those of the Reader App.
The server components and their values are shown in table 1.1.2 below.
When different values are used, the corresponding values in the Reader App settings also need to be
changed. (see appendix E, The DMSettings.plist file – sec-tion 3.2, Store Settings.)
Table 1.1.2. Subscription server componentsKeyname Type Default value DescriptionVertical offer String verticalOffer URL to the offer page in portrait modeReset password String resetPassword URL to the Reset Password pageHorizontal offer String horizontalOffer URL to the offer page in landscape modeUpgrade subscription URL String upgradeSubscription URL to the Upgrade subscription pageSubscription URL String buySubscription URL to the subscription pageLicense agreement String license URL to the License Agreement pagePrivacy notice String privacy URL to the Privacy Notice pageCustomer service String myAccount URL to the Account page
Appendix L Subscription Server Integration
167iP
ad
1.2 Configuring the Content Delivery Platform
The Content Delivery Platform platform needs to be con-nected to the Subscription server. For instructions about how to achieve this, see appendix F, Using the Content Delivery Platform – section 3.4.3, Adding a Subscription.
168
M
168iP
ad
This appendix contains information about integrat-ing the Apple iTunes subscription server in the iPad Reader App and customizing the Reader App for use with a subscription service.
For information about integrating any other external sub-scription service, see appendix L, Subscription Server Integration.
For information about subscribing using the Reader App, see chapter 4, Using the Reader App – section 9.1, Store With Subscription Functionality.
1. Steps To Follow
Setting up the Subscription functionality using the iTunes subscription server involves the following steps:
Step 1. Conf igur ing the Subscript ion environment.
Step 2. Configuring the Content Delivery Platform.
Step 3. Configuring the Reader App.
Each step is explained in the following sections.
iTunes Subscription Server Integration
Appendix M iTunes Subscription Server Integration
169iP
ad
Step 1. The Subscription Environment
The subscription environment consists of the following components:
�Web pages with specific information or functionality
�The iTunes Subscription server
How to configure each is explained in the following sections.
Step 1.1. Web Pages
When using the iTunes subscription server, the user logs in to the iTunes Connect service by using the iTunes account. All user interaction with this account (such as subscribing, viewing account details, etc.) is handled by Apple. Only two additional Web pages need to be made available, both used in the Reader App:
�The Subscription offer page. A Web page used for advertising subscription offers.
�The MyAccount Page. A Web page used for offering various kinds of account options.
Each Web page is described in the following sections.
Appendix M iTunes Subscription Server Integration
170iP
ad
Step 1.0.1. The Subscription Offer Page
The Subcription offer page is part of the HTML Store. For information about customizing this page, see appen-dix G Customizing the HTML Store, section 3.7, iTunes Subscription Offer Page.
Step 1.0.2. The MyAccount Page
The myAccount page is used for offering various kinds of account options. Currently only one option is available: that of transferring issues between different iPads. (For more information about how to use this functionality, see chapter 4, Using the Reader App – section 12.1.1, The iTunes Subscription Service.)
Figure 1.0.2. The default myAccount page
Appendix M iTunes Subscription Server Integration
171iP
ad
An example myAccount page is provided in the project and can be found in the following location:
�Resources/myAccount/
The look & feel of the page can be changed by custom-izing the following components:
�The text displayed on the page
�The images displayed on the page
�The design of the page
Each is described on the following pages.
Pages in the correct dimensions for each orientation (landscape and portrait) are automatically created dur-ing the building process of the Reader App.
Creating a custom pageWhen creating a custom page from scratch, make sure that the page contains at least one button which links to ww://restoresubscriptions. This is to make sure that subscriptions can be copied to another iPad.
TextThe text which is displayed on the page is derived from the myAccount.html file. Adjust or localize the text as required.
ImagesThe following images can be customized:
�BG1.png. The images for the background of the areas at the top and bottom of the page.CSS reference:
CSS file: myaccount.cssClass selectors: .header-container
.footer-container
�iPad.png. The graphic which visualizes the transfer process between iPads. Reference:
HTML file: myaccount.htmlAttribute: <div class= "header-container" id="
header- container">
�loader.gif.A loader displayed during the transfer process. Reference:
HTML file: myaccount.htmlAttribute: <div class="container" id="container">
Appendix M iTunes Subscription Server Integration
172iP
ad
DesignThe design of the page is control led by the myaccount.css file. Some of the page components which can be controlled through this file include:
Font family. Class selector: .body
Page background. Class selector: .page-con-tainer
Heading size. Class selectors: .h1 .h2
Text color. Class selector: .ul
Text margins. Class selector: .li
Transfer button. Class selector: .button-transfer .button-transfer p
Step 1.2. iTunes Subscription Server
Configuring the iTunes Subscription Server is done by performing the following steps:
�Adding the subscription offers
�Generating a secret key
Each is explained in the following sections.
Appendix M iTunes Subscription Server Integration
173iP
ad
Step 1.2.1. Adding the Subscription Offers
Each subscription offer is added as an In App purchase by performing the following steps:
Step 1. Log in to iTunes Connect.
Step 2. For the Reader App for which a sub-scription needs to be created, create a new In App purchase.
The Create New In App Purchase screen appears.
Step 3. Enter the following information:
�Reference Name: The name that is shown in iTunes Connect to identify the subscription.
�Product ID: A unique ID for the subscription.
�Type: Auto-Renewable.
�Family Name. Choose New to create a new Family Name or choose an existing Family Name.
Only multiple subscriptions within one family are supported.
�Subscription Duration: choose from 7, 30, 60, 90, 180, or 365 days.
Subscriptions can only be based on one of these time-limited offers
(meaning that issues cannot be offered as part of a specific subscription or duration). During the subscription period, the sub-scribed user will have access to the following issues (the date that will be used to check if an issue is included in a
subscription or not is the publication date as defined on the CDP):
�All published paid issues
�All subscription-only issues
�The last issue published before the user subscribed
�Cleared for Sale: select this option.
�Price Tier: Select the price tier that you want for the selected duration. The price tiers are the same as those for the issue.
Step 4. Repeat Steps 2 and 3 to add addi-tional subscription offers as needed.
Appendix M iTunes Subscription Server Integration
174iP
ad
Step 1.2.1. Generating a Shared Secret
In order to validate the subscriptions on the CDS side with the iTunes server, a Shared Secret needs to be cre-ated and subsequently sent to WoodWing. Perform the following steps:
Step 1. Access the In App Purchases over-view page for the Reader App on iTunes Connect.
Step 2. Click Generate Shared Secret.
Step 3. Send the generated code to WoodWing by using the following e-mail address: [email protected]. Include the following information:
�Customer name
�Product ID of the Reader App, as defined on the Content Delivery Platform
�Generated secret key
Step 2. Configuring the CDP
The Reader App on the Content Delivery Platform also needs to be configured with the required subscriptions. To do this, follow the steps as outlined in appendix F, Using the Content Delivery Platform – section 4.1, Configuring Reader Apps.
Appendix M iTunes Subscription Server Integration
175iP
ad
Step 3. Configuring the Reader App
The iTunes Subscription functionality in the Reader App consists of the following DMSetting:
�Store/Subscriptions/Customer service. Used for entering the path to the MyAccount page when stored on a local system.
All other options available in the Store/Subscriptions section are for use by non-iTunes Subscription
services.
176
N
176
Different versions of the Reader App exist, each with different features.
These differences could be caused by features that are specific to a particular platform only, or because the development of one Reader App is not yet as advanced as another.
Table 1 on the next page shows the list of Reader App features and their availability for each Reader App version.
Reader App Features Comparison
Appendix N Reader App Features Comparison
177
Table 1. Reader App features - compared by Reader App versionReader App Version
FeatureiPad 2.1
Android 1.3 (Froyo)
Android 1.3 (Honeycomb)
HTML5 1.0
Navigation
Navigation bar Action bar Navigation bar / Action bar buttons
Buy button Library button Magazine button Cover button TOC button External back button Contents button Newsfeed button Help button Account button Custom button
Always display Navigation bar Show toolbar on opening issue Section Viewer
Hide Section Viewer Story Viewer / Page Viewer
Pages grouped by story (Continues on next page)
Appendix N Reader App Features Comparison
178
Table 1. Reader App features - compared by Reader App version (Continued)Reader App Version
FeatureiPad 2.1
Android 1.3(Froyo)
Android 1.3 (Honeycomb)
HTML5 1.0
Navigation (Continued)
Story Viewer / Page Viewer Page numbers Page scrubber
Top Toolbar Image icon Always display top Toolbar
Action bar Image icon
Forward/Back buttons In Navigation bar
TOC List Option to disable
Bookmarks Hotzones Horizontal page navigation Story navigation Two-finger swiping Right-to-left support Orientation lock Link to Store or Library in Web Element Access Store on app launch
(Continues on next page)
Appendix N Reader App Features Comparison
179
Table 1. Reader App features - compared by Reader App version (Continued)Reader App Version
FeatureiPad 2.1
Android 1.3(Froyo)
Android 1.3 (Honeycomb)
HTML5 1.0
Dynamic content
Video Pinching movement for full screen view Done button Aspect ratio button Remove video after play Hide video controls
Audio
Audio Control Audio continues playing when navigating to another page
Hidden audio controls Slide Shows Hotspots
Tap-through Hotspot Web Elements
Automatically scale content to fit screen Widgets Scrollable Areas Web Links Dossier Links
On a layout (Continues on next page)
Appendix N Reader App Features Comparison
180
Table 1. Reader App features - compared by Reader App version (Continued)Reader App Version
FeatureiPad 2.1
Android 1.3(Froyo)
Android 1.3 (Honeycomb)
HTML5 1.0
Dynamic content(Continued)
Dossier Links (Continued)
In a Web Element Fullscreen overlay window
Newsfeed
Newsfeed Full screen Fallback Newsfeed page
Text View Text View Push Notifications Push notifications (messages)
Content Sharing
Content Sharing Share Hyperlink Share page Share part of a page
Store
HTML Store Store Filters Subscriptions (non-iTunes) Subscriptions (iTunes) Mixed subscriptions support In-app purchase 3G downloading
Library Library (Continues on next page)
Appendix N Reader App Features Comparison
181
Table 1. Reader App features - compared by Reader App version (Continued)Reader App Version
FeatureiPad 2.1
Android 1.3(Froyo)
Android 1.3 (Honeycomb)
HTML5 1.0
Library (Continued)
Segments Library filter Segment filter Library caching
Downloading issues
Non-progressive Progressive Auto open after/during download All Segments in one download
CustomizationAPIs Custom Home page
Internet No Internet indicators Version info Version info
Page fitting
Fit page when device dimensions do not match page dimensions
Display message when device dimensions do not match page dimensions
Analytics Analytics Magazine encryption Magazine encryption iOS 5 Newsstand Newsstand support
182
O
182
WoodWing Software incorporates certain open source software in specific components of the Digital Magazine solution. The license terms associated with this software require that we give copyright and license information; this appendix provides those details.
The following open source software is used:
�android-plist-parser. Used by the Android Reader App for parsing the DMSettings.plist file.
�Jackson Java JSON-processor. Used by the Android Reader App for parsing the json file.
Licenses
Appendix O Licenses
183
1. android-plist-parser
https://github.com/tenaciousRas/android-plist-parser
LicenseThis work is licensed under Creative Commons and BSD licenses. See below.
Android PList Parser (com.longeitysoft.android)Licensed under Creative Commons Attribution 3.0 Unported license.
http://creativecommons.org/licenses/by/3.0/
You are free to copy, distribute and transmit the work, and to adapt the work. You must attribute android-plist-parser to Free Beachler (http://www.freebeachler.com) with link.
The Android PList parser (android-plist-parser) is dis-tributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Base64.java (net.sf.migbase64)Licensed under the BSD Open Source license.
Copyright (c) 2004, Mikael Grev, MiG InfoCom AB. (base64 at miginfocom -dot- com) All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. Neither the name of the MiG InfoCom AB nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Appendix O Licenses
184
2. Jackson Java JSON-processor
http://jackson.codehaus.org/
License
Apache License Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
“License” shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
“Licensor” shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
“Legal Entity” shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the pur-poses of this definition, “control” means (i) the power, direct or indirect, to cause the direction or manage-ment of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
“You” (or “Your”) shall mean an individual or Legal Entity exercising permissions granted by this License.
“Source” form shall mean the preferred form for mak-ing modifications, including but not limited to software source code, documentation source, and configura-tion files.
“Object” form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
“Work” shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
“Derivative Works” shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications rep-resent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
“Contribution” shall mean any work of authorship, including the original version of the Work and any mod-ifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this defini-tion, “submitted” means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communi-cation on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but excluding communication that is con-spicuously marked or otherwise designated in writing by the copyright owner as “Not a Contribution.”
Appendix O Licenses
185
“Contributor” shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorpo-rated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly dis-play, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringe-ment, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
(a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
(b) You must cause any modified files to carry promi-nent notices stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
(d) If the Work includes a “NOTICE” text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file dis-tributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display gener-ated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the
Appendix O Licenses
186
terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applica-ble law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warran-ties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for dam-ages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redis-tributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obli-gations and/or rights consistent with this License. However, in accepting such obligations, You may act
only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets “[]” replaced with your own identifying infor-mation. (Don’t include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same “printed page” as the copyright notice for easier identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compli-ance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writ-ing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing per-missions and limitations under the License.
Hyphen
Catalog
Styles
Speller
Layout
Connection
www.woodwing.com
WoodWing USADetroit, Michigan USATel +1 313 962 [email protected]
WoodWing Latin AmericaMonterrey NL, MexicoTel +52 1 81 88345 [email protected]
WoodWing EuropeZaandam, The NetherlandsTel +31 75 61 43 [email protected]
WoodWing Asia PacificSelangor Darul Ehsan, MalaysiaTel +60 3 8320 [email protected]
Products, features and specifications are subject to change without prior notice. The Adobe logo, InDesign and InCopy are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners.
© 2011 WoodWing Software