Академический Документы
Профессиональный Документы
Культура Документы
User Guide
Smart Publishing
Legal Disclaimer
1998-2011 WoodWing Software bv. All Rights Reserved.
Production Note
This manual was created electronically using Adobe InDesign, Adobe InCopy, Adobe Acrobat, WoodWing Smart Styles, WoodWing Smart Layout, WoodWing Smart Connection, WoodWing Content Station, and WoodWing Enterprise.
Brand Station
Brand Station is WoodWings Web-to-Print solution for corporations, ad agencies and print-service providers. It helps to ensure correct use of corporate design guidelines, while taking the load off internal departments. Based on the principle of three user typesthe Brand Owner, the Brand Designer, and the Brand User, Brand Station provides a controlled environment for the creation of company-branded material. Designers create templates according to company guidelines. After approval by the Brand Owner, Brand Users can access these templates in Brand Station, customize them to a predefined extent, and create publication-ready files, all using just a Web browser.
The Enterprise content publishing system forms the rocksolid foundation for all WoodWings publishing solutions. Enterprise is at the heart of the publishing process, allowing designers, editors, external journalists, IT and managers to easily collaborate and meet deadlines, while controlling document versions, access rights, storage, and more. Enterprise is completely integrated with solutions for planning, wire, DAM, archive, Web CMS, mobile publishing and numerous other systems. In fact, it has specifically been designed to easily integrate with any system around.
WoodWing provides plug-ins for Adobe InDesign and InCopy that make working with these applications easier, faster, and much more effective. For a full overview of these plug-ins, see the next page.
Smart Styles
Content Station
WoodWings solution ensures that all steps of the editorial process content planning, gathering material, editing and selecting, plus managing strategic publication of content to any output channel are executed from just one location: WoodWings Content Station application.
The award-winning Smart Styles automated styling tool delivers powerful formatting capabilities to Adobe InDesign users. This unique software combines object-, table- and smart text styles into powerful Smart Styles. Smart Styles are conveniently stored in libraries and can be applied with a simple drag and drop to set all of the styling attributes of the object or group of objects. Smart Styles removes repetitive and time-consuming tasks and ensures consistent formatting.
iii
Smart Layout
Smart Layout optimizes and speeds up the layout process by adding the Article concept to InDesign. An Article consists of several elements, such as the head, intro, body and also images. Smart Layout defines a relationship between these elements. Smart Layouts intelligent behavior and automatic processes strongly improve the efficiency of InDesign users working with multiple columns of text. This is of particular interest for newspapers and magazines with tight deadlines.
Smart Catalog
Smart Catalog is a scalable and powerful solution to publish variable data right from inside Adobe InDesign. Smart Catalog links data from a plain text- or XML file, or a database to an InDesign document. After the corresponding links have been set up, Smart Catalog lets you manage the data in your InDesign document. Smart Catalog can be used to efficiently create any publication that links to external data. Examples include price lists, image catalogs, product overviews, travel brochures, exhibition books, etc. Updating the publication with the latest information then becomes as easy as one click of a button.
WoodWings Digital Magazine Tools are an extension to the Enterprise Publishing System. These tools enable publishers to easily create beautifully-designed and compelling content for tablets like the iPad, and to distribute it through a branded Reader app that offers a unique enduser experience. What makes this solution quite special is that the creation process is, to a large extent, identical to the traditional process of creating content for print. Designers use their familiar tools, such as Adobe InDesign and Content Station, to add interactivity to their layouts.
iv
Contents
Contents
Chapter 01 | Introduction 1 1. Purpose and Target Readers 1 2. Product Versions 2 3. Working Environment 2 4. Using This User Guide 2 4.1 Sections 2 4.2 Icons 3 4.3 Navigating the PDF 3 5. Additional Documentation 4 6. Feedback 4 Chapter 02 | About the Reader App 5 1. Available Projects 6 2. Functionality 7 3. Ways of Customizing 7 4. Distribution 8 4.1 Getting the Content on the Device 8 4.2 Distribution and Payment Models 9 5. New Features and Changes 10 5.1 New Features 10 5.1.1 Android Reader App 10 5.1.2 iPad Reader App 13 5.1.3 Content Delivery Platform 13 5.2 Changes 14 Chapter 03 | The Concept 16 1. Page Orientation 16 2. Page Dimensions 17 3. Stories, Pages, Sections and Segments 18 Chapter 04 | Using the Reader App 23 1. Features by Platform 23 2. Basic Viewing 24 3. Requirements 26 4. Page Scaling 27 5. Accessing the Reader App 28 6. Accessing the Magazine 29 6.1 From Within the Reader App 29 6.2 From Within the Newsstand 30 7. Navigation Tools 32 7.1 Top Toolbar 34 7.1.1 TOC List 34 7.2 Navigation Bar 35
vi
7.2.1 The Back Button 36 7.2.2 The Forward Button 36 7.2.3 The Buy Button 36 7.2.4 The Library Button 37 7.2.5 The Cover Button 38 7.2.6 The TOC Button 38 7.2.7 The Contents Button 38 7.2.8 The Newsfeed Button 39 7.2.9 The Help Button 39 7.2.10 The Account Button 39 7.3 Action Bar 40 8. Navigating the Reader App 42 8.1 Hotzones 43 8.2 Navigation Zones 43 8.3 Gestures 44 8.4 Section Viewer 44 8.5 Story Viewer / Page Viewer 45 8.6 Page Scrubber 47 8.7 Forward/Back Buttons 47 8.8 TOC List 48 8.9 Bookmarks List 49 8.9.1 Bookmarking a Story 50 8.9.2 Accessing a Bookmark 50 8.9.3 Deleting a Bookmark 51 8.9.4 Managing Bookmarks 52 8.10 Dossier Links 53 8.11 Device Rotation 53 9. Dynamic Content 54 9.1 Video 54 9.1.1 Manual Playback 55 9.1.2 Fullscreen Playback 56 9.2 Audio 57 9.2.1 Using Embedded Controls 58 9.2.2 Using the Audio Control 58 9.3 Slide Shows 59 9.3.1 Viewing in Frame 60 9.3.2 Viewing in Fullscreen Mode 60 9.4 Hotspots 61 9.5 Web Elements 62 9.6 Scrollable Areas 63
Contents
9.7 Text View 63 10. Newsfeeds 65 11. Sharing Content 66 11.1 Sharing a Page 67 11.2 Sharing Part of a Page 68 11.3 Sharing a Hyperlink 69 11.4 Reader App Settings 70 12. Using the Store 71 12.1 Store With Subscription Functionality 73 12.1.1 The iTunes Subscription Service 73 12.1.2 A Non-iTunes Subscription Service 75 12.1.3 Signing In or Out 77 12.1.4 Subscribing 78 12.1.5 Upgrading a Subscription 78 12.2 Navigating the Store 79 12.3 Previewing an Issue 79 12.4 Downloading an Issue 80 12.4.1 Non-Progressive Downloads 82 12.4.2 Progressive Downloads 83 13. Using the Library 86 13.1 iPad Reader App Library 86 13.2 Android App Library 90 13.3 Navigating the Library 91 13.4 Using the Library Filter 91 13.5 Using the Segment Filter 93 13.6 Downloading Issues and Segments 94 13.7 Opening an Issue or Segment 94 13.8 Deleting an Issue or Segment 95 14. Custom Home Page 96 15. Version Information 96 16. Reader App Updates 97 17. Using the HTML5 Reader on a PC 97 Chapter 05 | Creating Content 99 1. Creating a Story 101 2. Creating a Dossier 102 3. Creating a Page 103 3.1 Page Sizes 104 3.2 Effective Workspace 107 3.3 Landscape Orientation 108 3.4 Portrait Orientation 109 3.5 Text View Mode 110 3.5.1 Using InDesign CS4 110 3.5.2 Using InDesign CS5 112 3.6 Sections and Page Numbering 112
vii
4. Working with DM Artboards 113 4.1 Creating a DM Artboard 115 4.2 Switching Between DM Artboards 116 4.3 Adjusting the DM Artboard 116 4.4 Assigning Content to a Device 117 4.5 Points to Note 118 4.6 Working Without Artboards 118 5. Designing a Page 119 5.1 Creating a Slide Show 123 5.2 Adding a Video 125 5.2.1 As a URL 125 5.2.2 As a File 127 5.2.3 Auto Play 129 5.2.4 Auto Fullscreen 129 5.3 Adding an Audio File 129 5.3.1 As a URL 130 5.3.2 As a File 131 5.3.3 Auto Play 133 5.4 Creating a Web Element 133 5.4.1 Transparent Web Elements 135 5.4.2 Link to Store and Library 135 5.4.3 Scale Content to Fit Screen 135 5.5 Creating a Dossier Link 136 5.5.1 On a Layout 136 5.5.2 In a Web Element 137 5.6 Basic Hotspots 138 5.6.1 Terms and Components 138 5.6.2 Layers 140 5.6.3 Size and Content 141 5.6.4 Creation 142 5.6.5 Creating a Selected Hotspot 149 5.6.6 Creating a Hotspot Close Button 151 5.6.7 Managing Hotspots using the Layers Panel 151 5.7 Hotspots on Hotspots 154 5.7.1 Terms and Components 154 5.7.2 Creation 156 5.7.3 Creating a Selected Hotspot 162 5.7.4 Creating a Hotspot Close Button 162 5.7.5 Managing Hotspots using the Layers Panel 163 5.8 Using the Hotspot Panel 163 5.9 Creating a Widget 165 5.10 Creating a Scrollable Area 166 5.11 Creating a Custom Object 169
Contents
5.12 Creating a Help Page 169 5.13 Creating Shared Content 170 6. Summary 171 Chapter 06 | Exporting Content 172 1. The Digital Magazine Application 172 1.1 The Search Pane 174 1.2 The Device Toolbar 174 1.3 The Story Pane 175 1.4 The Page Preview panes 176 2. Preparing Content for Export 176 2.1 Magazine Content 177 2.1.1 Adding a Story 177 2.1.2 Verifying the Storys Content 178 2.1.3 Removing a Story 179 2.2 Story Order 179 2.3 Dossier Properties 180 2.4 Image Properties 180 2.5 Content Sharing 181 2.6 Sharing ofip Properties 181 3. Exporting Content 182 3.1 Exporting and Page Scaling 184 4. Summary 184 Chapter 07 | Customizing the iPad Reader App 185 1. Required Tools 186 2. Loading a Project 186 3. What Can Be Customized? 187 3.1 Assets 187 3.2 Colors 189 3.3 Fonts 189 3.4 Text 191 3.4.1 Changing the Text 191 3.4.2 Changing the Text Color 194 3.4.3 Changing the Language 194 3.5 Settings 196 4. Previewing Customizations 196 5. General App Settings 197 5.1 Reader App Name 197 5.2 Reader App Assets 198 5.3 Intent Settings 198 5.3.1 Background Downloading 199 5.4 Background Download Setting 199 5.5 Version Numbering 200 5.5.1 Version Verification 201 5.5.2 Update Release 202
viii
6. Navigation 203 6.1 Story vs Page Navigation 203 6.2 Orientation Lock 204 6.3 Right-To-Left Support 205 6.4 Navigation Bar 205 6.4.1 Tap Area 206 6.4.2 Visibility 206 6.4.3 Items 207 6.4.4 Assets 209 6.4.5 Colors 210 6.5 Flipview 211 6.5.1 Assets 212 6.5.2 Colors 214 6.5.3 Fonts 214 6.5.4 Header 215 6.5.5 Thumbnail Size 216 6.5.6 Thumbnail Awareness 216 6.5.7 Margins 216 6.5.8 Story Title 217 6.5.9 Story Bullets 217 6.5.10 Story Description 218 6.5.11 Page Scrubber 219 6.6 Top Toolbar 220 6.6.1 Availability 220 6.6.2 Visibility 221 6.6.3 Tap Area 221 6.6.4 Items 222 6.6.5 Assets 223 6.6.6 Colors 224 6.7 Hotzones 224 6.8 Gestures 225 7. The Store 226 7.1 Communication With the Store 226 7.2 General Store Features 227 8. The Library 228 8.1 General Appearance 229 8.2 Text 233 8.3 Download Settings 233 8.4 Back To Issue Button 234 8.5 Library Filters 234 8.6 Subscription Sign-in 236 9. General App Features 236 9.1 APIs 237 9.1.1 Analytics API 237
Contents
9.1.2 Gestures API 238 9.1.3 Navigation API 238 9.2 Audio 239 9.2.1 Overlay Assets 240 9.2.2 Embedded Audio Controls 240 9.2.3 Audio Control Pop-Up 241 9.3 Bookmarks 244 9.3.1 Enabling the Functionality 244 9.3.2 Changing the Assets 245 9.3.3 Changing the Colors 246 9.3.4 Changing the Fonts 246 9.3.5 Localizing the Text 247 9.3.6 Changing the Dimensions 247 9.4 Content Sharing 248 9.4.1 Adding Custom Metadata 248 9.4.2 Configuring the DigiMagSettings.h File 249 9.4.3 Cleaning the Project Targets 249 9.4.4 Enabling the Functionality 250 9.4.5 Changing the Assets 250 9.4.6 Changing the Colors 251 9.4.7 Localizing the Text 252 9.5 Custom Home Page 253 9.5.1 Requirements 253 9.5.2 Header Files 254 9.5.3 Implementation 255 9.6 Custom Objects 257 9.6.1 Configuring Custom Objects 259 9.7 Downloading Methods 260 9.7.1 Non-Progressive Downloading 260 9.7.2 Progressive Downloading 261 9.8 Fullscreen Overlay 262 Step 1. Adding the Settings File 262 Step 2. Adding the Overlay Window Files 262 Step 3. Customization 262 Step 4. Adding the Navigation Bar Button 263 9.9 iOS 5 iCloud Support 263 9.10 Libraries 264 9.10.1 Caching 264 9.10.2 Library Filter 265 9.10.3 Library Segment Filter 266 9.11 Newsfeeds 267 9.12 Newsstand (iOS 5) 268 9.12.1 Configuration 269 9.13 No Internet Connection Indicators 272
ix
9.14 Push Notifications (Messages) 272 9.14.1 Configuration 273 9.14.2 Sending Messages 273 9.15 Slide Shows 274 9.16 Store Filter 275 9.17 Subscriptions 276 9.17.1 Configuring the Reader App Functionality 277 9.17.2 Modifying the Reader App Appearance 278 9.18 Text View 283 9.19 TOC List 284 9.19.1 Enabling the Functionality 285 9.19.2 Changing the Assets 285 9.19.3 Changing the Colors 286 9.19.4 Changing the story text 286 9.19.5 Changing the Width and Height 287 9.19.6 Localizing the Text 287 9.19.7 Changing the Fonts 288 9.20 Video 288 9.20.1 Overlay Assets 289 9.20.2 Hiding Embedded Video Controls 290 9.21 Remove Video After Play 291 9.22 Web Elements 292 Chapter 08 | Building the iPad Reader App 293 1. Preparation 293 1.1 A Reader App Without Store Functionality 294 1.2 A Reader App With Store Functionality 294 1.3 An App Without Newsstand Functionality 296 2. Building 296 Chapter 09 | Customizing the Android Reader App 297 1. Required Tools 298 2. OS Compatibility 298 3. Loading a Project 299 4. Universal Builds 300 5. What Can Be Customized? 300 5.1 Drawables 301 5.2 Text 301 5.2.1 Changing the Text 302 5.2.2 Changing the Language 304 5.3 Settings 305 6. Previewing Customizations 305 7. General App Settings 306 7.1 Reader App Name 306 7.2 Reader App Drawables 307
Contents
7.3 Web Pages 307 7.3.1 Custom Information 308 7.3.2 Metrics Information 308 7.4 Version Information 311 7.5 Intent Settings 311 8. Navigation 312 8.1 Story vs Page Navigation 312 8.2 Navigation Bar 313 8.2.1 Tap Area 314 8.2.2 Items 314 8.2.3 Drawables 315 8.2.4 Visibility Settings 317 8.3 Action Bar 317 8.3.1 Tap Area 318 8.3.2 Items 318 8.3.3 Drawables 320 8.3.4 Text 323 8.3.5 Visibility 323 8.4 Flipview 324 8.4.1 Header 325 8.4.2 Story Viewer / Page Viewer 326 8.4.3 Page Scrubber 329 8.4.4 Section Viewer 330 8.4.5 Close Button 331 8.4.6 Drop Shadow 332 8.5 Top Toolbar 333 8.5.1 Availability 333 8.5.2 Visibility 333 8.5.3 Tap Area 334 8.5.4 Items 334 8.5.5 Drawables 335 8.6 Hotzones 335 8.7 Orientation Lock 336 9. The Store 337 9.1 Communication With the Store 338 9.2 Reader App Components 339 10. The Library 342 10.1 Subscription Sign-In Window 342 10.2 Library 345 11. General App Features 349 11.1 Audio 349 11.1.1 Overlay Drawables 350 11.1.2 Audio Settings 350 11.1.3 Embedded Audio Controls 351
x
11.2 Custom Objects 351 11.3 Downloading Methods 352 11.3.1 Non-progressive Download Method 352 11.3.2 Progressive Download Method 353 11.4 In-App Billing 355 11.5 Newsfeeds 356 11.6 No Internet Connection Indicators 357 11.7 Scrolling Indicators 358 11.8 Slide Shows 359 11.9 Text View 359 11.10 Video 360 11.10.1 Overlay Drawables 361 11.10.2 Video Player Drawables 362 11.11 Hiding Embedded Video Controls 363 11.12 Web Elements 364 Chapter 10 | Building the Android Reader App 365 1. Universal Builds 365 2. Preparation 366 2.1 Eclipse 366 2.2 Reader App Without Store Functionality 367 2.3 Reader App With Store Functionality 367 3. Building 368 Chapter 11 | Customizing the HTML5 Reader App 369 1. Required Tools 370 2. Project Files 370 3. What Can Be Customized? 371 3.1 Images 372 3.2 Colors 372 3.3 Text 373 3.4 Settings 374 4. Previewing Customizations 374 5. General App Features 375 5.1 General Appearance 375 6. Navigation 378 6.1 Story vs Page Navigation 378 6.2 Navigation Bar 379 6.2.1 Items 379 6.2.2 Images 380 6.3 Flipview 381 6.3.1 Background 382 6.3.2 Header 382 6.3.3 Thumbnail Border 383 6.3.4 Story Title 383
Contents
6.3.5 Story Bullets 384 6.3.6 Story Description 384 6.3.7 Page Scrubber 385 6.4 Hotzones 385 6.5 Navigation Zones 386 6.6 Top Toolbar 387 6.6.1 Availability 387 6.6.2 Images 387 7. General App Features 388 7.1 Audio 388 7.2 Slide Shows 389 7.2.1 Navigation Zones 389 7.2.2 Overlay Images 389 7.3 TOC List 390 7.3.1 Enabling the Functionality 390 7.3.2 Changing the story text 391 7.4 Video 391 Chapter 12 | Building the HTML5 Reader App 392 1. Bundling the Content 392 Chapter 13 | Distributing Reader Apps Without Store 394 1. Submitting the Reader App 394 1.1 To the iTunes App Store 395 1.2 To an Android App Store 395 Chapter 14 | Distributing Reader Apps With Store 396 1. The Content Delivery Platform 397 2. Distribution Workflow 398 3. Distributing the Reader App 398 3.1 Updating the Reader App 399 4. Distributing Issues 400 4.1 Registering With iTunes Connect 400 4.2 Registering With the CDP 400 Appendix A | Layout Sizes 401 1. Formula 401 1.1 Device Settings 402 1.2 Page Sizes 402 Appendix B | Creating Text View Markup Articles 404 1. Text View Markup 404 2. Requirements 405 3. Creating the Article 405 3.1 Element Label Mapping 406 3.2 Styles Mapping 407
xi
4. About Overrides 407 5. Using Tables 408 6. Known Limitations 408 7. Including Images 409 Appendix C | Image Dimensions 410 1. iPad 410 2. Android 417 3. HTML Store 422 4. HTML5 Reader App 422 Appendix D | Working With Widgets 424 1. File Format 424 2. File Structure 425 3. Creating the manifest.xml File 425 4. Making the Widget Available 427 Appendix E | The DMSettings File 428 1. File Structure 428 2. Features by Platform 429 3. Overview 439 3.1 Share Toolbar Settings 439 3.2 Store Settings 440 3.3 Navigation Settings 441 3.3.1 Color Settings 444 3.3.2 Font Settings 446 3.4 Intents Settings 448 3.5 TOC Popup Settings 448 3.6 Bookmark Popup Settings 449 3.7 Hotzone Settings 449 3.8 Flipview Settings 450 3.9 Library Settings 451 3.10 Metrics 452 3.11 Content 453 3.12 Resolution 453 3.13 Tracking 454 3.14 Web Element Popup 454 3.15 Newsstand 455 Appendix F | Using the Content Delivery Platform 456 1. Logging In and Logging Out 456 2. System Structure 457 2.1 Accessing the Components 459 2.2 User Types 460 3. Setting Up the CDP Environment 463 3.1 Adding a Domain 463 3.2 Adding a Reader Application 464
Contents
3.3 Adding a User 465 3.4 Adding an Issue 465 3.4.1 Adding a Full Issue 466 3.4.2 Adding an Issue in Segments 468 3.4.3 Adding a Subscription 471 3.5 Adding a Development Device 472 4. Managing the CDP Environment 473 4.1 Configuring Reader Apps 473 4.1.1 Configuring the Metadata 475 4.2 Managing Issues 475 4.2.1 Adding an Issue 475 4.2.2 Deleting an Issue 476 4.2.3 Editing an Issue 476 4.2.4 Adding a Rendition 477 4.2.5 Convert to HTML5 478 4.3 Managing Segments 478 4.3.1 Adding to a New Issue 478 4.3.2 Adding to an Existing Issue 479 4.3.3 Deleting a Segment 480 4.3.4 Editing an Segment 480 4.3.5 Adding a Rendition 481 4.3.6 Sorting Segments 482 4.4 Managing Renditions 482 4.4.1 Adding a Rendition 483 4.4.2 Convert to HTML5 484 4.4.3 Deleting a Rendition 485 4.4.4 Editing an Rendition 485 4.5 Managing Subscriptions 486 4.5.1 Adding Subscription 486 4.5.2 Deleting a Subscription 486 4.5.3 Editing an Subscription 487 4.5.4 Sorting Subscriptions 487 4.6 Managing HTML5 Conversions 488 4.6.1 Converting to HTML5 Format 489 4.6.2 Removing Converted Content 490 4.7 Managing Development Devices 490 4.7.1 Adding a Development Device 490 4.7.2 Deleting a Development Device 491 4.7.3 Editing a Development Device 491 4.8 Sending a Push Notification (Message) 492 4.8.1 Sending a Message to Users 492 4.8.2 Sending a Newsstand Notification 494 4.9 Managing Users 495 4.9.1 Adding a User 495
xii
4.9.2 Editing a User Profile 495 5. Progressive Downloads 496 6. Magazine Encryption 497 Appendix G | Customizing the HTML Store 498 1. Required Tools 498 2. The Store 499 2.1 Opening Issues Directly From the Store 504 3. Project Files 505 3.1 Configuration Settings 506 3.2 Images 507 3.3 Colors 513 3.4 Fonts 515 3.5 Text 516 3.5.1 Changing the Text 516 3.5.2 Changing the Color 517 3.6 Language 518 3.7 iTunes Subscription Environment 519 3.7.1 Page Design 521 3.7.2 Text 521 3.7.3 Text Styling 522 3.7.4 Subscription Buttons 523 3.8 Non-iTunes Subscription Environment 525 3.8.1 A Sign In/Sign Out Button 525 3.8.2 The Subscription Offer Page 527 3.8.3 The Subscription Button Area 527 3.9 A Mixed Subscription Environment 528 Appendix H | Tips and Best Practices 530 1. Generating IDs and Keys 530 2. Submitting and Approval Cycles 531 Appendix I | Gestures API 532 Appendix J | Navigation API 534 1. Structure 534 2. Classes 536 Appendix K | Omniture Integration 542 1. Prerequisites 542 2. Viewing Data 543 3. Setting Up SiteCatalyst 546 3.1 Custom Traffic Variables 546 3.2 Custom Conversion Insight Variables 547 3.3 Custom Success Events 548 4. Reader App Configuration 548 5. Events 550 6. Variables 552 6.1 Tracks 552
Contents
6.2 Track Links 554 7. Variables Sent with all Tracks 559 Appendix L | Subscription Server Integration 560 1. Steps To Follow 560 1.1 Configuring the Subscription Environment 561 1.1.1 Web Pages 561 1.1.2 Subscription Server 562 1.2 Configuring the Content Delivery Platform 563 Appendix M | iTunes Subscription Server Integration564 1. Steps To Follow 564 Step 1. The Subscription Environment 565 Step 1.1. Web Pages 565 Step 1.0.1. The Subscription Offer Page 566 Step 1.0.2. The MyAccount Page 566 Step 1.2. iTunes Subscription Server 568 Step 1.2.1. Adding the Subscription Offers 569 Step 1.2.1. Generating a Shared Secret 570 Step 2. Configuring the CDP 570 Step 3. Configuring the Reader App 571 Appendix N | Reader App Features Comparison572 Appendix O | Licenses 578 1. android-plist-parser 579 2. Jackson Java JSON-processor 580
xiii
01 Introduction
The following sections explain the purpose of this manual, how to use it, and how to get additional support or provide feedback.
Chapter 01 Introduction
2. Product Versions
This user guide is based on the following product versions:
Enterprise Server version 7.0.13/7.4 Smart Connection 7.3/7.4 Content Station 7.3 Digital Magazine Tools plug-ins 7.3/7.4 iPad Reader App version 2.1 Android Reader App version 1.3 (Froyo) Android Reader App version 1.3 (Honeycomb) HTML5 Reader App version 1.0 Content Delivery Platform current version
4.1 Sections
The Reader App can be customized for and distributed to different platforms:
As a dedicated Reader App for the iPad As a dedicated Reader App for Android As a dedicated Reader App for use within a
3. Working Environment
It is assumed in this user guide that a fully working Enterprise environment is set up for working with Digital Magazines. For more information about installing and configuring such an environment, see the Enterprise 7 Admin Guide.
devices
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
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
displays automatically when opening it. The PDF you open contains all chapters and sections; click on a title to automatically display the page. immediately open the page.
Pages Panel. Click on a page thumbnail to Hyperlinks. Displayed in gray, italic font.
These are used to refer to other sections in the manual, Web sites or other external sources. When active, clicking it will forward you to another section within the manual or open a Web site.
Chapter 01 Introduction
5. Additional Documentation
This user guide frequently refers to the iTunes Connect Developer Guide. This can be downloaded from the following location: https://itunesconnect.apple.com/docs/ iTunesConnect_DeveloperGuide.pdf.
6. Feedback
Most of your questions about how to use, customize and distribute the Reader App should be answered in this user guide. For any additional queries, please visit our Knowledge Base first. It provides answers to Frequently Asked Questions as well as tips, hints and background information. The Knowledge Base is available at WoodWings Web site www.woodwing.com under the Support section. Should you have any questions or feedback about any of the Enterprise products, visit our Community Forum: http://community.woodwing.net/forum/index (user account required). For any comments, corrections, or other types of feedback relating to this user guide, please send an e-mail to documentation@woodwing.com.
1. Available Projects
The Digital Magazine Reader App is available in the following types of projects:
Android projects
without the Store, Library and Subscription functionality and therefore needs to have the magazine content included; each magazine issue is distributed as a separate Reader App. Store, Library and Subscription functionality; the magazine content is downloaded separately after an issue has been purchased (or obtained for free). The Library functionality allows the user to view all downloaded issues and choose which one to read. Only one Reader App is required to read all issues of the magazine.
the Store, Library and Subscription functionality and therefore needs to have the magazine content included; each magazine issue is distributed as a separate Reader App. Standard projects but with additional Store and Library functionality; the magazine content is downloaded separately after an issue has been purchased (or obtained for free). The Library functionality allows the user to view all downloaded issues and choose which one to read. Only one Reader App is required to read all issues of the magazine. Framework projects but with additional Subscription functionality, allowing users to subscribe to a publication.
HTML5 projects
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.
Framework projects but with additional Apple Subscription functionality, allowing users to subscribe to a publication via the iTunes subscription functionality. The Apple Subscriptions project can be used to offer Apple Auto-renewable subscriptions only, or combined with non-Apple Subscription services.
2. Functionality
The Reader App contains a multitude of different features and functionality, aimed at providing the best reader experience. Some of the functionality includes:
Navigational tools such as a Navigation bar,
3. Ways of Customizing
The Reader App can be customized2 to reflect the look and feel of your publication. Some of the customizations which can be made include:
The app icon and name Icons used for buttons The text as it appears in the app Colors of text and backgrounds Fonts used in specific places of the Reader
Table of Contents List, Forward and Back buttons, and a Page Scrubber to quickly browse through the magazine content. shows, Hotspots, Web Elements, Widgets, and Scrollable Areas.
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,
Apple Subscription projects only) for viewing and downloading separate issues.1
Apple Subscription projects only) for viewing available issues.1 Fra m ewo r k, Su bsc r iptio n, a nd A p p l e Subscription projects only) for viewing issues available as part of a subscription.1 be added on many levels, for instance by the use of API calls (iPad Reader App only), Reader app embedment in custom applications, and more.
Customizing the Android Reader App. Customizing the HTML5 Reader App.
S u b s c r i p t i o n f u n c t i o n a l i t y ( P r o,
The extent of customization which you are allowed to do is determined by the purchased license:
Basic/Pro: you are only allowed to change
For a detailed overview of all the features and how to use them, see chapter 4, Using the Reader App.
Framework/Subscriptions/Apple
Subscrtiptions: you are allowed to fully customize the App, as per this user guide.
Differences in the number of possible customizations exist between the Reader Apps for the iPad and Android.
2
4. Distribution
Publishing a digital magazine to a digital device is done by distributing the WoodWing Reader App with which the magazine can be viewed. As a publisher, you have the option to distribute a Reader App in two different ways:
A Reader App with the magazine content A Reader App in which the magazine content
included1
For the first method, the user will have to download a new Reader App for each published issue, each appearing as a separate app on the digital device. For the second method, the user can use the built-in Store functionality of the Reader App to first see which issues are available for that publication and view a preview of that issue. The actual magazine content can subsequently be downloaded onto the digital device as a separate step. This method requires only one Reader App to be downloaded on the digital device for each title; the user can use the built-in Library to view all available issues, download those that are of interest, and open it for reading.
Tablet
Figure 4.1a. When distributing a Reader App including the content, both are downloaded from an app store as a single download
The process of distributing the Reader App separate from the magazine content involves more steps: first, the Reader App is downloaded (typically for free and without content) from the app store. By using the Store functionality of the Reader App, the user chooses which issue to purchase2. Once the purchase process is complete, the magazine content is downloaded from a dedicated Content Delivery Platform. (See figure 4.1b on the next page.) All downloaded issues can then be viewed using the same Reader App.
Note that the Android Market only allows apps to be uploaded with a maximum file size of 50MB.
1
Issues can also be offered for free, but the process of downloading these separately is the same.
2
For Reader Apps without Store functionality, this is the only way of offering content to the user.
In segments. (Reader Apps with Store funcTablet
Magazine content
tionality only) The magazine is made available in different segments. The user decides which segment to download and in which order. Since the file size of each segment is smaller than the size of the complete magazine, downloading time is reduced. Filters in the Store and Library allow the user to filter on segment type.
When it comes to selling the magazine, the following payment models are available:
Content Delivery Platform
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
as a single purchase.
S u b s c r i p t i o n . ( R e a d e r A p p s w i t h
For more information about distributing a Reader App without Store functionality, see chapter 13, Distributing Reader Apps Without Store. For more information about distributing the Reader App with Store functionality, see chapter 14, Distributing Reader Apps With Store.
Universal Builds
The Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same app, the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1.2). SDK Platform 2.2 API 8 is no longer required; a Reader App build with SDK Platform Android 3.0 API 11 will also run on a Froyo device. As a result of this change, the frameworks now contain drawables for both Honeycomb and Froyo. The location of all drawables has also been changed. The changes are as follows:
The hdpi folder is no longer used for Froyo. The mdpi folder is no longer used for
Honeycomb.
located in the drawable-nodpi-v11 folder. SDK version 3.0 the drawable-nodpi-v8 folder. SDK 2.2
10
able-ldpi folders still exist but only contain the app icon.
For more information, see chapter 9, Customizing the Android Reader App section 8.1, Story vs Page Navigation.
For a complete overview of which images are used on a unique platform and which are used on both platforms, see appendix C, Image Dimensions section 2, Android.
Support for progressive download is now available. For information about using the progressive download feature, see chapter 4, Using the Reader App section 12.4.2, Progressive Downloads. For information about configuring/customizing the progressive download feature, see chapter 9, Customizing the Android Reader App section 11.3.2, Progressive Download Method.
When interactive objects (such as Slide Shows, videos, etc.) are placed within the area of a Hotzone, their functionality cannot be accessed because of the overlaying Hotzone area. These interactive objects can now be made accessible through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 8.6, Hotzones.
Scrolling indicators
Custom objects
Objects with custom, 3rd-party functionality can be included in the magazine. The functionality of the element is completely upon the developer; it can be an extra user interface element, a list connecting to a database, a 3D object, etc.
Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and right-hand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded. This functionality can be controlled through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 11.7, Scrolling Indicators.
An issue or Segment can now be opened automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). This functionality can be controlled through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 11.3, Downloading Methods.
The My Account button (in the Navigation bar and Action bar respectively), responds to the context of the Reader App:
Froyo: this button is displayed at all times, but
only enabled when the Store is accessed. when the Store is accessed.
Gestures
A two-finger swipe can now be used for navigating to the first page of the next story (Page navigation only). This functionality can be controlled through a DMSetting.
11
The History (Back/Forward) buttons can now be included or excluded from the toolbars through the ToolbarItems DMSetting. For more information, see:
Top Toolbar bar (Froyo): chapter 9,
The Flipview can be made to appear automatically when the Navigation bar/Action bar is displayed. This functionality can be set through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 8.4, Flipview.
Customizing the Android Reader App section 8.5.4, Items. Customizing the Android Reader App section 8.3.2, Items.
The maximum number of items to appear on the righthand side of the Action bar can now be controlled by a DMSetting (up to a maximum of 6). For more information, see chapter 9, Customizing the Android Reader App section 8.3.2, Items.
Including or excluding Story bullets in the Flipview can now also be controlled for the Honeycomb version of the Reader App. For more information, see chapter 9, Customizing the Android Reader App section 8.4.2, Story Viewer / Page Viewer.
The Froyo version of the Reader App now also displays page numbers in the Flipview. Including or excluding the page number in the Flipview (for both the Froyo and Honeycomb version of the Reader App) can now be controlled through a DMSetting. For more information, see chapter 9, Customizing the Android Reader App section 8.4.2, Story Viewer / Page Viewer.
12
When using any of these projects and when not making use of the Newsstand functionality, the Newsstand functionality needs to be removed from the project. For information about using the Newsstand feature, see chapter 4, Using the Reader App section 6.2 From Within the Newsstand. For information about configuring the Reader App for use with the Newsstand, see chapter 7, Customizing the iPad Reader App section 9.11 Newsstand (iOS5). For information about removing the Newsstand functionality from a project, see chapter 8, Building the iPad Reader App section 1.3, An App Without Newsstand Functionality.
13
5.2 Changes
The following changes have been implemented in the Android Reader App v1.3:
Customer project
shown below the Library toolbar (Froyo version). Element in its non-available state.
The file DigiMag.java that used to exist in the project customerapp under the package com.woodwing. app_name no longer exists. In previous versions, both the package name in the AndroidManifest.xml file as well as the package name of the DigiMag.java file had to be changed. The latter is no longer necessary/possible; only the package name in the AndroidManifest.xml file has to be changed.
back_grey.png. The Back button of a Web library_top_bar.png. The image used for the
top bar (situated between the Action bar and the top Library shelf). shadow between the issue information pane and the issue preview pane (landscape orientation).
previewshadowlandscape.png. The
In order to rename the Reader App, only the AndroidManifest.xml file needs to be modified (previously the com.woodwing.[app name] file also had to be modified). For more information, see chapter 9, Customizing the Android Reader App section 7.1, Reader App Name.
between the issue information pane and the issue preview pane (portrait orientation).
Apparently the launcher on the Android Honeycomb version (always) uses the hdpi version of the icon.png, even on mdpi devices. Customers should therefore always create an ldpi, mdpi and hdpi version of their application icon. For more information, see chapter 9, Customizing the Android Reader App section 7.2, Reader App Drawables.
ing after user has successfully logged out of the Subscription account.
In the Action bar in the Honeycomb version of the Reader App, the Newsfeed and Custom button have been moved to the left-hand side of the bar. For more information, see chapter 9, Customizing the Android Reader App section 8.3, Action bar.
14
The following strings have been made obsolete: <string name=logged_out>Successfully logged out.</string> <string name=action_feed>Newsfeed</string> <string name=action_custom>Custom</string>
15
03 The Concept
Before delving into the specifics of creating, using, and distributing the Digital Magazine Reader App and its content, it is important to be aware of the methods in which the content itself can be displayed. This chapter outlines the different types of pages that can be created, and how this affects the way the content is presented to the reader as well as the way it should be navigated.
1. Page Orientation
When reading a magazine on a digital device such as the Apple iPad or Samsung Galaxy Tab using a dedicated Reader App, page orientation can follow the device orientation: content is viewed in landscape orientation when the device is held horizontally, or in portrait orientation when the device is held vertically.
Figure 1. The same page can be viewed in landscape orientation (horizontal, left) or in portrait orientation (vertical, right)
For each orientation a different page is loaded, thereby offering the possibility of styling both pages differently and/or offering a different page count or content type for each (for instance offering a three-page interview in the form of an article in portrait mode, and the same interview in the form of a video on a single page in landscape mode).
16
2. Page Dimensions
When a designer creates a page, he or she can choose from one of two page dimensions: 1. The page exactly matches the dimensions of the screen of the device on which it is viewed. Using this method, a story containing multiple pages can be created. (See figure 2a to the right.) 2. The page width matches that of the device, but the page height is taller than the height of the device. Using this method, a single-page story can be created. (See figure 2b to the right.) As far as navigation goes, the following applies:
For the first method, the next or previous
page of a story can be displayed by sliding the page up or down (iPad) or left/right (iPad or Android) by using a quick finger swipe. The page will automatically position itself to fit the screen. scrolled continuously and stopped at any place (much as you would browse a Web page).
Figure 2a. Content set up as separate pages (left), appears and behaves as separate pages on the digital device (right)
Figure 2b. Content set up as one continuous page (left) allows the page to be scrolled up or down in the Reader App without it positioning itself to a fixed position (right)
17
follows:
Stories
A Story is just that: a story about a particular topic such as an interview with a prominent member of the public, a product review, a trip report, etc.
user swipes horizontally (from left to right or right to left) using one finger
Pages
A story can consist of just a single page or multiple pages1. The way that these stories and pages are displayed is determined by the way that the Reader App is configured. The following configurations are possible:
Story navigation. (Default configuration
Reader App only), the user swipes horizontally (from left to right or right to left) using two fingers
for the iPad Reader App, not available in the Android Reader App) In this configuration, stories are placed next to each other, whereas any pages within a story are placed above each other. pages of all stories are placed next to each other.
another, the user clicks on the navigation bars, drags the page with the mouse, or uses the keyboard
The above concept is displayed in the figures on the following pages. To see how each method is displayed in the Reader App itself, see chapter 4, Using the Reader App.
This has a direct effect on the way the user navigates the magazine:
Story navigation. (iPad Reader App only, not
user swipes horizontally (from left to right or right to left) vertically (up/down or down/up)
Unless the page is taller than the height of the device, in which case the story is always a single-page story.
1
18
Sections
Stories that share similar content can be grouped together by assigning them to the same section (such as fashion, finance, sports, etc.). The Section Viewer in the Reader App allows the user to quickly navigate to a particular section: when a user taps a section, the first page of the first story in that section is shown.
Segments
(iPad Reader App only) Segments are similar to Sections, but now the grouping is not done within the magazine, but the magazine itself is physically split into different parts, making it possible to download each segment individually. This allows the user to decide in which order to download each part of the magazine. Because only a small part of the magazine is downloaded instead of the full magazine in one go, the download size per download session is also reduced. Both the Store and the Library can be filtered to show content that belongs to a particular segment only.
19
Story A Layout A1
Story B Layout B1
Page 1
Page 2
Page 1
Page 3
20
Story A Layout A1
Story B Layout B1
Page 1
Page 1
Page 2
Story A Layout A1
Story B Layout B1
Story C Layout C1
Page 1
22
1. Features by Platform
Various versions of the Reader App exist (for iPad, Android devices and for HTML5 Web browsers). While they share most of the functionality, differences also exist. These differences could be because features are specific to a particular platform, or because the development of one Reader App is not yet as advanced of another. For a comparison of each Reader App feature and their availability for each Reader App version, see appendix N, Reader App Features Comparison.
23
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.
When viewing a magazine using the Reader App on an iPad, the iPad status bar is shown at the top of the screen with the Reader application below, displaying the full size of the page.
When viewing a magazine using the HTML5 Reader App in a Web browser, the full page is shown.
When viewing a magazine using the Android Reader App v1.x (Froyo), the Notification bar is shown at the top of the screen with the Reader application below, displaying the full size of the page.
Figure 2a. Viewing a magazine in a Web browser using the HTML5 Reader App
24
When viewing a magazine using the Android Reader App v1.x (Honeycomb), the System bar is shown at the bottom with the Reader application displayed above it.
B A
C
A
Status bar
Reader
Status bar
Reader
System bar
Figure 2.c. Basic components of the Android Reader App (top: Froyo version, bottom: Honeycomb version
25
3. Requirements
To get the best experience out of reading a magazine using the WoodWing Reader App, take note of the following requirements:
HTML5 version
sion 5 or higher or Google Chrome version 7 or higher should be used. Other Web browsers are currently not supported.
of the Reader App fully supports all features and functionality available in the magazine; you might need the latest version of the Reader App to make use of the latest features.
requires that the app is installed on a web server. This is because Google Chrome will not allow apps to be run from the file:// protocol due to security reasons. Reader App is meant for reading on large screen devices such a desktop PC, laptop or large digital devices such as the iPad. Even though small digital devices such as mobile phones, iPods, etc, can also access content by using a Web browser, the user experience will be less satisfactory.
upgrading your tablet to a new operating system, verify whether the Reader App is supported by that operating system. An update of the Reader App might be required when upgrading to a new operating system. Android devices come in many different sizes. If the magazine publisher has designed the content for use on a device with a specific size, a message can optionally be displayed to inform the user that user experience may be less optimal when viewing the magazine on smaller or lager devices.
26
4. Page Scaling
When a magazine is read on a device for which it has not been designed (in terms of dimensions), it is likely that the pages will not properly fit the screen. With a multitude of Android devices becoming available with a similar multitude of dimensions it is possible to find yourself in such a situation when using an Android device. Magazine publishers can determine how the page should be made to fit the screen for these circumstances (Android devices only):
Fit width. On a device which is smaller than
the page dimensions, the page is scaled down to fit the width of the screen. This might result in having to scroll vertically to see the rest of the page. screen. If the aspect ratio (width versus height) of the screen is different than the ratio for which the page was designed, this can result in letterboxing (resulting in black bars appearing along the right- and left-hand side of the screen)1 or pillarboxing (resulting in black bars appearing along the top and bottom of the screen)1 will be made to fit the dimensions of the screen exactly. This could result in the content of the page looking stretched or squashed.1
Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
1
27
Home screen of the tablet or from within the Newsstand (iOS 5 only). and access the correct URL.
This method is for instance used by TV Guides where first a Web page is shown with current TV channel information, after which the magazine can be accessed to read articles related to the world of TV and movies.
As mentioned above, the Reader App restores itself to the last viewed magazine page when the app is closed while the user was reading a magazine. The iPad Reader App also restores itself to the following states:
Store Library Library Segments Overview
Depending on the type of Reader App and/or the way it has been configured, one of the following will happen:
The magazine is accessed straight away.
Reader Apps which do not have Store functionality always function this way. To see this behavior on Reader Apps which do have Store functionality, an issue for that magazine needs to have been downloaded and opened first. When accessing the magazine for the first time, the magazine cover is shown; when accessing the magazine after having read the magazine, it will open to the last viewed page. those Reader Apps which have Store functionality and in which no magazine issue has been downloaded yet; or for those Reader Apps which have been configured in such a way that the Store is always opened when the app is launched.
When DMExternal is used (meaning that the Reader App is part of another application), the restoring state behaves slightly different (or perhaps not as initially expected):
When the user closes the shell application
and subsequently resumes the app from the background, the Reader App tries to restore the state of the screen as it would in a normal environment. application, states are not restored.
is optional functionality for those Reader Apps which have Store functionality. The Reader App is made part of another application, which acts as the shell for the Reader App. This shell displays information related to the magazine content; the Reader App can subsequently be accessed by tapping a dedicated button, after which the behavior is the same as described above.
28
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.
Apps with Store functionality. Switching to a different issue/Segment of the magazine can be done by tapping the issue/Segment in the Library.
For detailed information about how to use the Library, see section 13. Using the Library.
29
which a Reader App can be opened whithout having to locate it somewhere on the iPad first.
matically in the background as soon as they become available. This way the download process does not have to be started manually. For more information about the Newsstand, see www.apple.com/ios/ios5/features.html#newsstand.
Figure 6.2a. The different ways in which issues can be displayed in the Newsstand
Whether or not an issue is made part of the Newsstand is determined by the publisher of the magazine.
When a new issue is available, the publisher sends a notification to the Newsstand. Once received, the following actions take place:
A badge with the word New is placed in the
Displayed icons
Initially, the Newsstand displays the app icon of the Reader App. Once an issue is fully downloaded, the cover of that issue is displayed1. For issues containing Segments, the icon of the parent issue is displayed. When an issue is removed, the cover for the last downloaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is displayed once more. Issues can be displayed in one of two different ways:
The icon is not changed when the download is started from the Reader App.
1
Figure 6.2b. When a new version of an issue is available, a New badge is displayed in the top righthand corner of the issue icon In case the Reader App is not yet running, it is
30
The download process can be followed (and paused/resumed when necessary) from within the Library of the Reader App. As soon as an issue is accessed, the New badge disappears.
Download scenarios
When the Newsstand receives a notification that a new version of an issue is available, the download process is started automatically. Take note of the following:
Background downloading is performed only
through a Wi-Fi connection, not through a 3G connection. issues can only be done when you are logged in to the account. Newsstand, turn off the following setting on the iPad: Store > Automatic Downloads.
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.
mized. The download is started and the full issue is downloaded in the background. (If other downloads are already in progress, the download may be queued.) started and the full issue is downloaded in the background. (If other downloads are already in progress, the download may be queued.)
31
7. Navigation Tools
By tapping the Reader App once at specific places, the Navigation bar, top Toolbar, or the Action bar appears, allowing the user to navigate the magazine by using the various buttons and tools available. (See figure 7 on the next page.) For information about which areas of the screen can be used for bringing up the navigation tools, see section 8.1 Hotzones. When tapping the Contents button in the Navigation bar or Action bar, the Story Viewer appearsshowing the first page of each story of the magazine1as well as the Section Viewer, showing the different sections that have been defined for the magazine. The Android Reader App can be configured in such a way by the publisher that the Flipview (containing the Store Viewer / Page Viewer and the Section Viewer) appears automatically when the Navigation bar/Action bar is displayed. The pages shown in the Story Viewer / Page Viewer are thumbnail representations of the first page / all pages of that story. Below the first page of each story, the name of the story is shown and (optionally) a short description. When tapping the TOC (table of contents) button in the top Toolbar, the TOC List appears. This is presented as an overlay on top of the magazine. When tapping a button, link or any part of the page, the navigation tools will disappear again. Each component is explained in more detail in the following sections.
The iPad Reader App can also be configured in such a way that all pages of all stories are displayed; the Story Viewer then acts as the Page Viewer. Note that the Android Reader App always shows all pages in the Story Viewer.
1
32
F A C
C D E
Top Toolbar
TOC List
Section viewer
Navigation bar
Action bar
Figure 7. The navigation tools of the Reader App (left: iPad Reader App, right: Android 3.0 Reader App)
33
the next or previously viewed page. (See section 8. Navigating the Reader App.) section 7.1.1 TOC List.)
TOC List. For bringing up the TOC List. (See Audio Control button. For bringing up the
Audio Control with which the playback of audio files can be controlled. (See section 9.2 Audio.)
Image icon. (Optional) Typically used for disShare Content button. For bringing up the
Share Content list, used for sharing an external link with other people by e-mail or social media. (See section 11. Sharing Content.)
TOC List
Figure 7.1.1. Tapping the TOC button in the top toolbar brings up the TOC List G
A
A D F
For more information about using the TOC List, see section 8.8 TOC List.
Back button B Forward button C TOC List button Audio control button E Bookmarks List button Image icon G Share content button
Viewer and the Section Viewer. (Not available when the Store or Library is displayed.)
page. (Or any other type of Web page, depending on the configuration.) instructions about how to use the Reader App.
Help. For accessing the page containing Account. (Store versions with subscription
functionality only) For accessing the account details for a subscription. accessing a Web page with custom information such as privacy information.
For navigating to the page that was last visited before tapping the Back button. Store.
Buy. (Store versions only) For accessing the Library. (Store versions only) For accessing
the Library.
The number of buttons and the order in which they appear is determined by the way the Reader App is configured. Tapping an icon will activate the functionality of the button, each of which is explained in the following sections.
Cover. For accessing the magazine cover. TOC. For accessing the page containing the
table of contents.
A
A G
B
B H
Buy button D Library button E Cover button F TOC button Newsfeed button J Account button K Custom
35
Figure 7.2.3. The Store shows all available issues for a particular magazine title
For detailed information about using the Store, see section 12. Using the Store.
36
When tapping the Library button on the iPad Reader App, the Library Overview Page appears. This page only shows all available issues of a magazine; Segments are displayed on a separate page, accessed by tapping an issue containing Segments. For detailed information about using the Library, see section 13. Using the Library.
Figure 7.2.4. The Library shows all available issues for a magazine title (left). On the iPad Segments that are part of an issue are shown on a separate page (right)
37
Figure 7.2.7. When tapping the Contents button, the Section Viewer and the Story Viewer / Page viewer appears
For detailed information about using the Section Viewer and Story Viewer / Page Viewer, see section 8. Navigating the Reader App.
38
39
page. (Or any other type of Web page, depending on the configuration.) 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
Store.
the Library.
table of contents.
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.)
page. (Or any other type of Web page, depending on the configuration.) instructions about how to use the Reader App.
F G H I J
K L
A B C D E F G
Buy button Library button Magazine button Newsfeed button Custom button Cover button Contents button
H I J K L
Back button Forward button Menu button TOC button as menu command Help button as menu command
40
functionality only) For accessing the account details for a subscription. custom information such as privacy information. to a previously visited page.
Custom. For accessing a Web page with Back button. (Always visible) For navigating
gating to the page that was last visited before tapping the Back button.
6 or more actions defined) For accessing the Action bar menu. Any available buttons for which there is no room in the Action bar itself are displayed here.
The number of buttons and the order in which they appear is determined by the way the Reader App is configured.
41
Each tool or method is explained in the following sections. Navigating the magazine can also be done by various other tools which have been custom made by the Reader App developer, such as menus or wheels which appear after tapping the screen. For more information about how to use these custom tools, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)
be tapped to navigate to the next or previous page, or to bring up the Navigation bar.
only) areas which can be clicked to navigate to the next or previous page/story, or for navigating between images in a Slide Show. gers will navigate the user to the next/previous page or story. particular section of the magazine.
Section Viewer: for quickly navigating to a Story Viewer / Page Viewer: for quickly
ing to the next or previously visited page. window on top of the page. stories.
TOC List: a table of content displayed in a Bookmarks List: a list with bookmarked Dossier Links: links on a page which will take
42
8.1 Hotzones
Hotzones are areas which can be tapped to execute the following actions:
Bring up the Navigation bar Bring up the top Toolbar Bring up the Action bar Navigate to the next or previous page/story
Note that Hotzones only work on touchpad devices, not on a desktop PC/laptop (for these systems, Navigation zones are used, see section 8.2 Navigation Zones). Depending on the way the Reader App is configured and/ or on which platform is used, the following actions take place when tapping the screen:
Any part of the screen: the Action bar,
Navigation bar and/or the top Toolbar is displayed Left/right zone: the previous/next page/ story is displayed Top zone/Bottom zone: the Action bar, Navigation bar and/or the top Toolbar is displayed
Figure 8.2 The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)
Figure 8.1. The iPad Reader App can be configured to include Hotzones (shaded in red): specific areas which can be tapped to bring up the navigation tools or to navigate to the next/ previous page
43
8.3 Gestures
(Touchpad devices only) The touch screen functionality of digital devices allow users to navigate between pages and stories by using finger gestures. Depending on the configuration of the Reader App, one or two fingers can be used:
Horizontal navigation
App has been configured for story navigation as well as for page navigation:
Story navigation: takes the reader to the
The Section Viewer is used by tapping the name of a section. As a result, the Story Viewer / Page Viewer will jump to the first story / page of that section. In case many more sections exist than can fit the width of the screen, the bar can be swiped left or right.
Reader App has been configured for page navigation; it takes the reader to the next or previous story.
Vertical navigation
App has been configured for story navigation only: next or previous page.
Additional gestures for navigating the magazine can be implemented by the Reader App developer. For more information about how to use these custom gestures, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.)
44
Differences exist in how these components are displayed in the different Reader App versions, as shown in the table on the following page.
Figure 8.5a. The same magazine, configured for story navigation (top) showing only the first page of each story in the Story Viewer, and for page navigation (bottom), showing each page of each story in the Page Viewer (iPad Reader App version shown) 45
Table 8.5. Story Viewer / Page Viewer differences between Reader App versions Reader App version Component Page preview Story title Story bullet Story description Page number iPad, Android (Froyo), HTML5 All page previews are spaced apart equally. Displayed below the page preview. Displayed before each story title. Displayed below the story title. Displayed below the page preview (Froyo only) Android (Honeycomb) Space between stories is larger than space between pages of a story. Displayed above the page preview. Not used. Displayed below the story title. Displayed below the page preview.
D
A
Page preview
Story bullet
Story title
Story description
Page number
Figure 8.5b. Story Viewer / Page Viewer components. The top image depicts the iPad/Android (Froyo)/HTML5 version, the bottom image the Android (Honeycomb) version
The functionality of the Story Viewer and Page Viewer is identical: swipe left or right to locate the required story or page and tap the thumbnail to display the page. Once tapped, the Action bar or Navigation bar and top Toolbar (when enabled) will automatically disappear.
46
Toolbar) or the Navigation bar (see section 7.2 Navigation Bar) Action Bar),
Page scrubber A
A
B
B
Back button
Forward button
The Page Scrubber is essentially a slider which can be moved left or right. By doing so, the thumbnails in the Story Viewer / Page Viewer are moved in the same direction, allowing the user to quickly browse the available pages in the magazine.
Figure 8.7. The Forward and Back buttons in the top Toolbar
These buttons are disabled when the user accesses the Store or Library, or when the user has not accessed any pages yet.
47
The TOC List is used by swiping the list up or down to the required story and tapping the story to navigate to it. Once tapped, the TOC List, top Toolbar and Navigation bar will automatically disappear.
TOC List
Figure 8.8. Tapping the TOC button in the top toolbar brings up the TOC List
48
How to use Bookmarks and the Bookmarks List is explained in the following sections.
A C
Figure 8.9. Tapping the Bookmarks button brings up the Bookmarks List
49
50
Step 1. Tap the screen to access the top Toolbar. Step 2. Tap the Bookmarks List button. The Bookmarks List appears. Step 3. Tap the Edit button. The Edit controls appear. (See figure 7.9.4a on the next page.) Step 4. Tap the Delete button. The Bookmark is removed from the list. Step 5. When finished, tap Done.
Step 1. Tap the screen to access the top Toolbar. Step 2. Tap the Bookmarks List button. The Bookmarks List appears. Step 3. Swipe the Bookmark to the right. The Delete button appears. Step 4. Tap the Delete button. In case you do not want to delete the issue, swipe left to hide the Delete button. The Bookmark is removed from the list.
51
Done button
Reordering control
Delete button
button.
Figure 8.9.4a. When tapping the Edit button, the Edit controls appear
Bookmarks, drag the Bookmark by the Reordering control in the desired order. (See figure 7.9.4b to the right.)
Figure 8.9.4b. Rearranging the Bookmarks list can be done by dragging the Bookmark by its Reordering control.
52
To use a Dossier Link, tap the defined area to navigate to the related story or page within that story.
53
9. Dynamic Content
Pages can hold a multitude of different types of content and functionality with which the reader can interact. The following interactive content can be included:
Video Audio Slide shows Hotspots Web Elements Widgets Scrollable areas Web Links Text View
9.1 Video
Videos can be recognized by their icon in the center of the frame.
Figure 9.1. Videos can be recognized by their icon in the center of the frame
How to interact with each type of content is described in the following sections.
Depending on the way the video is configured, it can either start playing automatically each time the page is accessed, or playback needs to be started manually. When playback is started automatically, it can also optionally be sstarted in fullscreen mode. Each method is explained in the following sections. Videos can either be embedded in the magazine or streamed from an online location. For the latter method, internet access is required. Playback may be influenced by the available bandwidth.
54
video1.
Videos which are set to automatically play in fullscreen mode will only play in fullscreen mode; when tapping the play button while the video is minimized, the video will be played fullscreen once more. When minimizing the video, play will stop. The toolbar containing the video controls appears. (See figure 9.1.1 to the right.) The Reader App can also be configured in such a way that the video controls for a video are not displayed. Controlling the playback of the video is then done by taking the video into fullscreen mode by using the pinching gesture (see section 9.1.2 Fullscreen Playback).
After a short time, the toolbar will disappear.
A
A Play/Pause button
B
B
C Scrubber
C
To bring the toolbar back up, tap the video once (iPad/Android) or hover the mouse over the video (HTML5 on a desktop). Tap the button once more to resume playback.
Tap the Play/Pause button to pause the video. Use the scrubber to scroll through the video.
The Reader App can also be configured in such a way that videos automatically start playing as soon as the page is loaded.
1
55
When rotating the device while viewing a video in fullscreen mode, the video is kept being played in fullscreen mode.
A B C
(iPad and Android Reader App) Using the (HTML5 Reader App) Double-click the
Videos can also be set to automatically play in fullscreen mode. Such videos will only play in fullscreen mode; when minimizing the video, play will stop. When subsequently tapping the play button, the video will be played fullscreen once more.
The toolbars containing the video controls appears (see figure 9.1.2 to the right).
After a short time, the toolbar will disappear.
A D F
To bring the toolbar back up, tap the video once. video.
Done button B Scrubber C Aspect ratio button Rewind button E Play/Pause button Fast forward button G Minimize button
Tap and hold the Rewind button to rewind the Tap the Pause/ Play button to pause the video
or resume playback.
When hovering the mouse over the video, the toolbar containing the video controls appear.
Click the Pause/ Play button to pause the
mode and continue playing the video. and stop playing the video.
Tap the Done button to leave fullscreen mode Use the scrubber to scroll through the video. The Reader App can also be configured in such a way that video is automatically played in fullscreen as soon as the page is loaded.
1
Use the scrubber to scroll through the video. Double-click the video to leave the fullscreen
mode.
56
9.2 Audio
Audio files can be recognized by their icon; tapping the icon will play the audio file.
(Android only) Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.
The Reader App can also be configured in such a way that the audio icon as well as the audio controls are hidden, for instance for the use of background music. Controlling the playback can then be done by using the Audio Control. (See section 9.2.2 Using the Audio Control.) Depending on the way the audio file is configured, it can either start playing automatically each time the page is accessed, or playback needs to be started manually. Controlling the playback of an audio file can either be done by using the embedded audio controls or by using the Audio Control. Each method is explained in the following sections. Audio files can either be embedded in the magazine or streamed from an online location. For the latter method, internet access is required. Playback may be influenced by the available bandwidth. (iPad only) Audio files that are being played continue playing when navigating to another page or another story. They only stop playing when a video file or another audio file is started, when the playback of the audio file is stopped manually, or the when audio file has reached its end.
57
Audio title. Title of the song being played. Audio description. Short description of the
for embedded audio files only, not for files streamed over the Internet.)
For audio files for which the audio has been started automatically and for which the playback controls are hidden, using the Audio Control is the only way of controlling its playback.
1
58
E
A C E
Audio control button B Audio control popup Audio title D Audio description Stop/Restart button F slider
A Slide Show can either be viewed within the frame itself or in fullscreen mode. Each method is explained in the following sections.
59
When rotating the device while viewing a Slide Show in fullscreen mode, the Slide Show is kept being played in fullscreen mode. To navigate the images in the Slide Show, swipe the displayed image left or right to view the next or previous image.
60
9.4 Hotspots
The Hotspot functionality involves tapping a particular area on the screen (the Hotspot) with the result that other content (the Hotspot content) will appear in either the same location or in a different location. In its most basic usage, the Hotspot content will appear in a pop-up window, but a more advanced usage involves showing the content embedded in the page. It is up to the designer how the Hotspot functionality is incorporated in the page, and how it is communicated to the reader that a certain page item contains Hotspot functionality. The example below shows the usage of tapping a Hotspot on the page, after which the Hotspot content will appear in a pop-up window.
Using Hotspots
Hotspot.
the pop-up.
An alternative use of Hotspots is that the Hotspot disappears as soon as the Hotspot content appears. To then close the Hotspot content, do one of the following:
Tapping the same or another Hotspot
Tapping the Hotspot Close button Tapping the Selected Hotspot (only if
Figure 9.4. In its most basic usage, when tapping a Hotspot (above), the corresponding Hotspot content appears in a popup window (below)
61
required or not depends on the content used. The content is directly loaded when the page is displayed; if the content contains interactive components (such as buttons or form fields), the user can interact with them accordingly. is not loaded until the frame is tapped; if the content contains interactive components (such as buttons or form fields), the user can interact with them accordingly. not loaded until the frame is tapped. A message is displayed asking the user if the content should be displayed in a Web browser. When the user confirms this, the Web browser is opened to access the link. As a result of this action, the Reader App is closed.
playing small components of a Web page or the full Web page. Web pages.
It is up to the designer how Web Elements are incorporated in the page, and how it is communicated to the reader that a certain page item contains such an interactive component. For more information about how to use a Web Elements, see the Help page in the magazine (accessed by tapping the Help button, see section 7.2.9 The Help Button.) When content of a Web Element is taken from the Web, internet access is required. Display speed may be influenced by the available bandwidth.
Web Elements can also be used as empty frames that are placed over sections of text such as a hyperlink. For the end user the experience will be that of tapping the text itself.
62
Figure 9.7. In Text View mode, the text of the article can be increased or decreased in order to suit the users needs
Text View mode is only available when viewing a page in portrait orientation. Whether or not a page is displayed in Text View mode is a design decision; the designer can also decide to offer the page in the same way as a page in
63
landscape orientation (effectively an image) by which the text obviously cannot be scaled.
Images
decrease the text (but see comments below about header images). While pinching, the current font size is displayed in percentages in the top right-hand corner of the page.
Designers can use a header image to display a fullscreen-sized image possibly containing a headline. Obviously, text that is part of such images cannot be scaled.
As an image as part of the article,
separate section at the bottom of the page following the article. Tap an image to view it in fullscreen mode; if multiple images are present swipe horizontally to navigate them.
Text View pages can also be fully styled in the same way as a Web page, including the incorporation of images.
64
10. Newsfeeds
The Newsfeed functionality is primarily used by publishers to offer the user the latest news, sports results, etc., by means of a Web page. Accessing the Newsfeed is done by tapping the Newsfeed button in the Navigation bar or the Action bar. The Web page is displayed as an overlay on top of the magazine. Navigating the page is done by using the available controls on the page, as offered by the publisher. Closing the Newsfeed page can be done by doing one of the following:
Tapping the Close button in the top right-hand
corner
device
Since Newsfeed content is taken from the Web, internet access is required. Display speed may be influenced by the available bandwidth.
Close button
65
The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar.
page or the thumbnail of the page as shown in the Story Viewer / Page Viewer. a page.
Part of a page. A manually defined part of Hyperlink. A link to an external Web site, typi-
If pages and Hyperlinks are both available, they are automatically combined in the same message. The method of sharing each type of content is explained in the following sections.
Figure 11. Accessing the Content Sharing functionality is done by tapping the Share Content button in the top Toolbar
To leave the Content Sharing functionality at any stage, do one of the following:
Tap anywhere on the page Tap a button in top Toolbar (including the
66
thumbnail used is the thumbnail which is available in the Story Viewer / Page Viewer for the page. If no matching page or orientation is available, the first page of the story or the corresponding page in the opposite orientation is used.
The Content Sharing window appears showing all defined sharing services. Step 4. Tap the required service for sending out the page. Step 5. Depending on the chosen service, proceed as follows:
Twitter: When logging in for the first time
using the Reader App, the Twitter login screen appears. Enter the account details and tap Allow. When logged in, a screen appears in which text can be entered.
page. A screenshot is made of the full screen, capturing the current way that the page is displayed. Note the followiing:
Toolbars are not included in the
appears. Enter the account details and tap Login. When logged in, a screen appears in which text can be entered. Tap Post to send the message. hyperlink inserted. Enter further details such as the recipients e-mail address and tap Send.
screenshot; any content obscured by a toolbar is included in the screenshot. tured; the background image (such as a placeholder image) is used instead. in full.
67
Step 5. In the top Toolbar, tap Share. The Content Sharing window appears showing all defined sharing services. Step 6. (Optional) To return the Area Selector, tap Edit Selection. Step 7. Tap the required service. Step 8. Depending on the chosen service, proceed as follows:
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. appears. Enter the account details and tap Login. When logged in, a screen appears in which text can be entered. Tap Post to send the message. page inserted or attached. Enter further details such as the recipients e-mail address and tap Send.
Resize handle
Move handle
Step 4. Use the handles to define the area which needs to be shared:
Drag any of the Resize handles on each
68
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
69
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 recipients e-mail address and tap Send.
to log out of the relevant service the next time that the Reader App is launched. This allows the user to for instance log in using a different account.
70
Store filter. For filtering the Library by content Single-issue view button. For displaying
Figure 12a. The store in multiple-issue view (left) and in single-issue view (right)
71
HTML Store, the cover also acts as a button to switch between single-issue view and multipleissue view.)
screen with more detailed information about the magazine. (See section 12.3 Previewing an Issue.)
E F G H I
(see section 12.4 Downloading an Issue) or for downloading it for free. and description of the issue. of the cover story.
Issue name and description. The name Cover story description. Short description
Subscriptions
The Store can also contain subscription functionality for subscribing to or accessing a subscription. For details about using the Subscription functionality, see section 12.1 Store With Subscription Functionality .
A Back to issue button B Store filter C Single-issue view button D Multiple-issue view button E Preview button F Buy/Free button G Issue name and description H Cover story description I Cover preview
72
tion service
Subscribe buttons. For accessing a page to Account button. For accessing a page with
On the iPad Reader App, both subscription services can be used simultaneously. How to use each type of subscription is described in the following sections.
additional options based on the users account. (The default implementation is a page on which the user can restore his/her subscription. This option is mandatory by Apple and should always be part of this page.)
When using the iTunes subscription functionality, log-in and account information is based on the login which is currently active for the iTunes store on the iPad. Therefore, no Log In or Log Out buttons are required.
Subscribing
Subscribing to a subscription is done by performing the following steps: Step 1. Tap a Subscribe button. A page will appear with information about the subscription and how to subscribe. Step 2. Follow the steps on the page. When the subscription process is complete, access the Library to view the issues that are part of the new subscription. After purchasing a subscription, you are allowed to download the latest issue and all issues that are released while the subscription is valid. When the subscription expires, it is no longer possible to download issues that were available within the subscription period.
73
Subscription advert
Subscription buttons
Account button
74
When a user has multiple iPads, it is possible to copy issues that are part of a subscription from one iPad to another. Take note of the following:
Only issues that are part of the subscription
will be copied.
of the Reader App of the target iPad, ready to be downloaded. (Because the user has already paid for these issues, downloading them is free of charge.) copied.
When a non-iTunes Subscription Service is used in combination with the iTunes Subscription Service, note that the Store will not display the Offer pages that are part of the noniTunes Subscription; Apple does not allow this.
Subscribe button. For accessing a page to
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.
75
C D E
A D
Subscription account login/logout button B Subscription advert Upgrade subscription button E Account button
Subscription button
76
with information about how the users data is gathered, used, and managed. 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
or the Action bar is available for accessing an external page for managing the account details. ing the issues that are available to the user as part of their subscription (including those issues which have not been downloaded yet). The Library also shows any downloaded issues which are not part of the subscription. (For more information, see section 13. Using the Library.)
In the Password box, enter the (Optional) Select the Remember Me
check box to automatically have the user logged-in when the Reader App is launched.
77
12.1.4 Subscribing
Subscribing to a subscription is done by performing the following steps: Step 1. Tap the Subscribe button. A page will appear with information about the subscription and how to subscribe. Step 2. Follow the steps on the page. Once the subscription account is active, the user can sign in to the account to access the available issues for that subscription. (See section 12.1.3 Signing In or Out.)
78
Part of the screen shows a page from the magazine (it can optionally be swiped vertically if this page does not fit the screen). It is up to the publisher which page is shown, but typically this will be the page holding the table of contents. Closing the Preview screen can be can be done by tapping the Close button for that issue.
79
During the download of the issue, the progress is displayed in the form of a progress bar, labels and controls. This way, a user can see the progress of a download, pause it, and resume the download at a later stage. Two types of download processes exist:
Non-progressive downloads: the issue
needs to be fully downloaded before it can be read. most basic content is downloaded and made available (such as the cover and the cover story). The user can open the issue and start reading that content while all other content is progressively downloaded in the background.
Each is explained in more detail in the following sections. The progressive download method fully replaces the nonprogressive method. Only magazines that were released before the progressive download method was available will make use of the non-progressive method; over time these will become less and less. Different labels and controls are used for each download process, as shown in the following sections.
downloaded while a download is in progress. Any additional downloads are added to the Library; starting these downloads needs to be done manually. cannot be downloaded while a download is in progress.
80
(iPad Reader App only) The Reader App can be configured in such a way that an issue or Segment is opened automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads).
Users with a 3G connection can disable background downloading by means of the following setting on the Settings screen on the iPad:
3G Download Options/Continue After
Closing App
Background Downloading
When the Reader App is suspended while a download is in progress, the following occurs: iPad Reader App The download is continued. However, Apple applies the following restrictions:
The time is finite. When the app is closed,
When the app is killed: the download When app is relaunched: the down-
a maximum of 10 minutes is left in which the app is still allowed to execute code.
ground execution. When resources (such as memory) are needed for a newly started app, our background downloading might be cut off early.
For additional technical information see: http://developer.apple.com/library/ ios/#documentation/iphone/conceptual/ iphoneosprogrammingguide/BackgroundExecution/ BackgroundExecution.html Shortly before the time limit is reached, a message is displayed to the user, allowing the user to continue or cancel the download. When the user does not respond to the message, the download is cancelled; the download is resumed though at the point where it was left off the next time the download is continued.
81
Downloading. When the download is in progress, the download percentage and status is displayed.
Installation stopped. When the installation has failed or has been interrupted. Tapping the Install button will restart the installation process.
Download paused. When the download process is interrupted (for instance by closing the Reader App or by tapping the Pause button), an indication is given how much of the issue has been downloaded so far. Tapping the Download Resume button will resume from where it was left off. Download stopped. (iPad only) Shown when the download process failed or has been interrupted. Tapping the Download Resume button will resume from where it was left off.
82
During the download, the process can be stopped and resumed at a later stage. The following images show the labels, progress bar, and controls used for magazines that are downloaded by using the progressive download process. (Images shown are those of the iPad Reader App, Reader Apps on other platforms may look slightly different.)
downloaded, consisting of the magazine.xml file, the cover and all thumbnails. magazine, stories will be downloaded in order of appearance (first story first, last story last).
possible method, for instance by tapping a preview in the Story Navigator, tapping a Dossier Link on the cover, etc), the following rules apply:
The currently visible story maintains the
Immediately in this context means whenever the tablet has a download slot (thread) available. In the case of the iPad for instance, 3 threads are active at all times. None of the threads will be cancelled, but each will finish first before the next is started. In the extremely rare situation where all three threads are downloading a large video, immediately may take a while (until a thread is available).
The story next in line will have normal
Download started, content not yet available. When the download has started, the download button changes into a Pause button. Tapping the button will pause the download. The dimmed thumbnail indicates that no content is available yet for viewing. Dow nload s t a r ted, content available. When the download has started, the download button changes into a Pause button. Tapping the button will pause the download. When the thumbnail is not dimmed anymore, content is available for viewing. Download paused. When the download process failed or has been interrupted, the pause button changes into a Resume button. Tapping the button will resume from where it was left off.
priority.
visible story (by means of a Dossier Link), will also have normal priority.
83
When viewing the magazine while the download is still in progress, the download state is shown in the Story Viewer / Page Viewer and on the page itself (when attempting to view a page which is not available yet). (See figure 12.4.2 on the next page.)
84
Downloaded story
Figure 12.4.2. When viewing an issue which is not fully downloaded yet, the download progress of each story is indicated on the page and in the Page Viewer / Story Viewer. The stories which are available for viewing appear normally in the Story Viewer / Page Viewer.
85
Store.
The Library button in the Navigation bar The Back To Overview button in the
only) Issues that are available as part of the subscription, including those which have not been downloaded yet. been downloaded from the Store, including those which have not been downloaded yet. (Segments which have not been downloaded appear dimmed and will have a Download button).
in the top section of the page and all its available Segments in the bottom section of the page. This page is accessed by tapping an issue containing Segments (recognizable by its icon).
Slight differences exist between the Libraries of the various Reader Apps, as explained in the following sections.
Figure 13.1a. Issue with Segments can be recognized by their icon. In this example, the issue to the left contains Segments, the issue to the right does not contain Segments. Tapping the issue with Segments brings up the Segments Overview page.
86
The following components are available (see examples on the following pages):
Library filter. For filtering the Library by conEdit/Done button. For quickly deleting an
Segment filter. For filtering the Library by Edit/Done button. For quickly deleting a
issue. Once tapped, it changes into the Done button for exiting the edit mode. subscription functionality only) For signing in to or out of a non-iTunes subscription account. Only when logged in will the Library show the content that is available as part of the noniTunes subscription. and description of the issue.
Segment. Once tapped, it changes into the Done button for exiting the edit mode.
the issueincluding all Segments when availablein one action. ing an individual Segment.
Segment Download button. For downloadName and description. The name and
Issue name and description. The name Cover thumbnail. A thumbnail of the cover. Download button. For downloading the
issue. In case the issue contains Segments, all Segments will also be downloaded. description of the issue or Segment.
87
A B C D E
Back to issue button Issue with Segments Downloaded issue without Segments Library filter Edit button
Figure 13.1b. The assets of the Library Overview page on the iPad
88
A B C D E F G H
Back to Overview button Back to Issue button Download Issue button Segment Filter Edit button Issue cover Downloaded Segment Not yet downloaded Segment
Figure 13.1c. The assets of the Library Segments Overview page on the iPad
89
subscription functionality only) For signing in to or out of a subscription account. Only when logged in will the Library show the content that is available as part of the subscription. and description of the issue. of the cover or Segment.
Issue name and description. The name Cover or Segment thumbnail. A thumbnail Download button. For downloading the
issue or Segment. (Segments can only be downloaded individually.) description of the issue or Segment.
Library filter Segment filter Sign In/Sign Out button Issue Segment (not yet downloaded) Downloaded issue Segment
90
Filter button
Filter list
Figure 13.4. The Library filter allows a user to filter the Library by content type (shown here on the Android Honeycomb)
The filter is used by performing the following steps: Step 1. Tap the Filter button in the top Toolbar. A list appears showing all available choices. Choices by which the Library is currently filtered are indicated by a check mark; those by which the Library is not currently filtered do not have such a check mark. (Multiple selected choices are possible.)
91
Step 2. Tap the filter item(s) to have them included in or excluded from the filtering process. As soon as a choice is made, the Library content is updated based on the new filtering rules. Step 3. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list.
92
which have been defined for the issue appear in the list. made from the Library Filter first, only those Segments that have been defined for the issue which is chosen appear in the list.
Filter list
Step 2. Tap the filter item(s) to have them included in or excluded from the filtering process. As soon as a choice is made, the Library content is updated based on the new filtering rules. Step 3. Close the Filter list by tapping the Filter button or by tapping anywhere outside of the Filter list.
Figure 13.5. The Segment filter allows a user to filter the Library by defined Segments
93
Issue Download button. The issue including all its Segments will be downloaded.
load was started manually) Automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads).
download button for the issue. The full issue including all its Segments will be downloaded. of the following:
On the Segments Overview page, do one Tap the Issue Download button. The
issue including all its Segments will be downloaded. vidual Segment; only that Segment will be downloaded
94
Library; the Segment which is removed will appear dimmed and its Download button appears again. As soon as the last Segment of an issue is removed, all Segments are automatically removed.1 Step 3. (iPad only) To finish the process, tap Done in the Status bar of the Library.
the issue which needs to be deleted ton in the Status bar of the Library.
) will appear in the top left-hand corner of the cover. Delete command.
Library
Android
consist of Segments, it is removed from the Library.1 Segment of the issue is still available, all Segments continue to be displayed in the
If the issue or Segment is part of a subscription and the user is logged in to the subscription account, the downloaded issue is removed from the app but remains available for downloading in the Library.
1
95
96
pointer over a certain area makes specific components appear. This is the case for instance when hovering the mouse pointer over one of the Navigation Zones, which makes the Navigate to Next Page, Navigate to Previous Page, the Navigation bar, or the top Toolbar appear. (See figure below.) or stories can be done by dragging the page up, down, left, or right by using the mouse. navigational tools is done as follows:
Any issues which are compatible with the currently installed Reader App can still be downloaded and read; issues which require an updated Reader App cannot be downloaded. from where the new version can be downloaded free of charge. After downloading, both old and new magazine issues can be downloaded and read.
Closing navigational tools. Closing the Story Viewer / Page Viewer: click the
TOC List: click the TOC List icon in the Locking the Navigation bar/top Toolbar.
The Navigation bar and the top Toolbar can be locked by clicking on it once. When locked, these bars will be permanently visible. To unlock each bar, click it once again.
97
A B
D E
F C
A E
Top Toolbar B Navigate to Previous Page/Story area C Navigation bar Navigate to Next Page/Story Area F Navigate to Next Page Area
Figure 17. When hovering the mouse pointer over the Navigation Zones, controls appear
98
05 Creating Content
One of the main advantages of the WoodWings Digital Magazine Tools is the ability to create content using Adobe InDesign. In essence, the default InDesign tools will already allow you to create content for publishing as a digital magazine. However, to make this magazine much more dynamic, additional features are made available for adding multimedia content and interactive components:
Audio panel. Used for assigning an audio file Dossier Link panel. Used for creating a link Hotspot panel. Used for creating a Hotspot Scrollable Area panel. Used for creating an
to a frame on a page.
area on the page of which the content exceeds the frames width or height. To scroll through the content, the user can scroll either horizontally or vertically. Slide Show panel. Used for adding a Slide Show to a page. Video panel. Used for assigning a video to a frame on a page. Web Elements panel. Used for including external content from the Internet. Widgets panel. Used for including HTML5 widgets. All panels can be accessed via the Digital Magazines submenu of the Windows menu.
The DM Artboard functionality allows you to assign content for use on different devices (using differently sized screens). In this chapter, you will learn how to use the tools for creating dynamic content and you will learn about the exact specifications required for creating a digital magazine. To read more about the concept of creating a digital magazine and how the created content relates to the same content on a digital device, see chapter 3, The Concept. This chapter describes the creation of the following components of a magazine:
Story Dossiers Pages Text View Slide shows Video Audio files Web Elements Dossier Links Hotspots Widgets Scrollable Areas Custom Objects Help page Shared Content
The ofip format is an initiative of WoodWing Software aimed at developing a standardized data format for interactive publications, such as digital magazines, newspapers, books and brochures. (For more information, see http://www.ofip.info.) With the expectation that this format and its features are going to be implemented by Reader Apps, delivery platforms, Newsstands, etc. on an increasing level in the near future, WoodWing advices to get familiar with the ofip features and possibly start implementing them into your current workflow with immediate effect. For more information about the newly introduced ofip metadata properties, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration Step 7. Adding Custom Metadata.
1. Creating a Story
The creation of a digital magazine involves the creation of stories. For each story (this includes the cover, table of contents, and any full page adverts in the magazine), a Dossier needs to be created. For a successful export, the system will expect each of these Dossiers to be set up in a certain way (as we will see in the next sections of this chapter, as well as in chapter 6, Exporting Content.) The following is a summary of those rules:
For viewing the magazine in landscape orien-
In this user guide we follow a basic workflow for creating a story: Step 1. Creation of a Dossier. Step 2. Creation of one or more pages. Step 3. Design of the created pages. Each step is explained in the following sections. The quickest way of creating a story is by making use of Dossier templates which already contain the content required for that story. If your company makes use of such a workflow and Dossiers and layouts do not have to be created from scratch, you can start right away with designing the layout. Navigate to section 5. Designing a Page.
tation, the system expects the Dossier always to have one layout in landscape orientation assigned to the Publication Channel of the digital magazine. (The Dossier may contain additional layouts in landscape orientation, but these may not be assigned to the digital magazine Publication Channel). tion, the system either expects a styled layout or an article (used as the text for the Text View mode) to be present in the Dossier. Either needs to be assigned to the Publication Channel of the digital magazine. (The Dossier may contain additional articles or layouts in portrait orientation, but these may not be assigned to the digital magazine Publication Channel) page in portrait orientation, a header image can be used and images related to the story can be shown following the story at the bottom of the page. All of these images need to be part of the Dossier and the images that follow the story also need to be assigned to the Publication Channel of the digital magazine. that video or the images that are part of the Slide Show also need to be stored in the Dossier.
2. Creating a Dossier
To create a Dossier for a digital magazine story, perform the following steps: Step 1. Use any of the following methods:
Create a Dossier from scratch by using
preview in the Reader, ellipses are shown for the part which cannot be displayed.
able in the system using Content Station or Smart Connection for InDesign
A B
For more information about these methods, see the Smart Connection 7 User Guide for InDesign or the Content Station 7 User Guide. Step 2. In the Dossier properties window, set the following properties (either during the creation of the Dossier or after the Dossier has been created):
C D E
A D
Section title
Preview: Used for indicating that a Dossier contains content for use in the issue preview functionality in a Store. This content is extracted from the ofip file by a delivery system, allowing the user to preview a complete dynamic story as opposed to a single-page static image.
Figure 2. The Dossier dialog box in Content Station showing the various Digital Magazine properties Section title. The section name as
displayed in the Section Viewer of the Navigation bar on the reader device. following areas:
Story title. The story title as used in the Displayed in the following locations
story is about as displayed in the following locations of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark. Keep both the Description short; if it exceeds the width of the page
of the Reader App: below each story in the Story Viewer / Page Viewer, in each entry of the TOC List, in a Bookmark. a Facebook post.
3. Creating a Page
When creating a page, the following considerations should be made:
Is a styled page in portrait orientation
Keep both the Story title short; if it exceeds the width of the page preview in the Reader, ellipses are shown for the part which cannot be displayed.
Intent. Choose the intent with which the
Dossier is to be used:
ing the layout(s) with the table of contents to the TOC button in the Reader App. (When the user taps the button, he or she will be directly navigated to the table of contents.) ing the layout with an explanation about how to use the Reader App to the Help button in the Reader App. (When the user taps the button, he or she will be directly navigated to the Help page.)
1
viewing the page in portrait orientation? If so, the creation of a layout is not required; instead an article should be created.1 This article will be displayed in Text View mode. pages (typically used for regular stories), or will the layout consist of one continuous page (typically used for a table of contents)? This obviously affects the dimensions of the layout.
InDesign CS5 users can apply formatting and styling (including the use of tables) to the article
Your administrator may have set up Dossier templates for each part of the magazine (such as the cover, table of contents, stories, etc.). Using these Dossier templates will greatly speed up the process of creating content. If your workflow involves the use of layout templates and layouts are ready for you to be used, you can skip this section and jump straight to section 5. Designing a Page. Whichever method you will be using, preparation is half the work. Note that when changing the dimensions of the page at a later stage, repositioning the already present content can be time-consuming.
Of course, a layout needs to be given a certain size so that it can be easily worked on. In theory, a very small layout could be created, with a DM Artboard containing small-sized content. As long as the content fits properly within the boundaries of the artboard, it will export and look correctly. Because the artboard will also work when placed (partly) over the pasteboard, it is even possible to create a page of any size and place the content (partly) on the pasteboard. As far as the DM Artboard functionality is concerned, this will all work. Practically though, an InDesign user will prefer to view the layout in either actual size, or fit within the current window so it is best to work within the boundaries of a layout.
10
A good layout size to use is one based on the dimensions of the largest device that the content is going to be output to. The DM Artboard for that device will then match the size of the layout, while any additional artboards will be placed within the boundaries of the created layout. For an example of the use of an artboard, see figure 3.1 on the next page. For information about creating a layout in the exact size of a digital device, see appendix A, Layout Sizes.
11
Figure 3.1. In this example, a layout in InDesign is shown (in Normal viewing mode), created in a 3:4 aspect ratio, while a DM Artboard for a 16:9 device is displayed on top of it (the gray rectangle). The artboard is positioned in such a way that its width matches that of the layout. All the content visible within the boundaries of the artboard is included in the export. All content placed in the area enclosed by the gray rectangle is included in the export.
12
Navigation bar
Top Toolbar
Table 3.2 below shows the values converted to the regularly used units of measurement (based on 132 dpi/ppi). Table 3.2. Bar size in pixels converted to various units of measurement Size Picas 48 pixels 49 pixels 50 pixels 62 pixels 2p2.182 2p2.727 2p3.273 2p9.818 Value (based on 132 dpi/ppi) Points 26.182 pt 26.727 pt 27.273 pt 33.818 pt Inches 0.3636 in 0.3712 in 0.3788 in 0.4697 in Millimeters 9.236 mm 9.429 mm 9.621 mm 11.93 mm Centimeters 0.9236 cm 0.9429 cm 0.9621 cm 1.193 cm
13
display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in landscape orientation1.
by choosing an existing Dossier from the Dossier list in the Check In dialog box.
To create such a layout, perform the following steps: Step 1. From the File menu, choose New followed by Document to open the New Document dialog box. Step 2. Enter the number of required pages. Step 3. Enter a width which exactly matches the width of the screen. Step 4. Enter a height which at least matches the height of the device (higher values are allowed2). See appendix A, Layout Sizes for the various page dimensions. Step 5. Set the Columns, Margins, Bleed and Slug settings as required. Note that Bleed and Slug are not used as such, any content in those areas is not included in the export. Step 6. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine.
The Reader App can also be configured to display only pages in portrait orientation. 2 If the page is made higher than the height of the device, the layout may contain only one page.
1
list in the Check In dialog box to create a new Dossier. (Make sure that the required Dossier properties are correctly set as explained in section 2. Creating a Dossier.) out has been created.
14
Step 2. Check-in the layout and save it to the required Brand/Issue/Category combination of the magazine. Step 3. Add the layout to a Dossier by doing one of the following:
Automatically add the layout to a Dossier
display pages in landscape orientation as well as in portrait orientation, or when it has been configured to display only pages in portrait orientation 1. portrait orientation need to be designed in the same way as the pages in landscape orientation (as opposed to using the Text View mode, see section 3.5 Text View Mode)2
by choosing an existing Dossier from the Dossier list in the Check In dialog box.
list in the Check In dialog box to create a new Dossier. (Make sure that the required Dossier properties are correctly set as explained in section 2. Creating a Dossier.) out has been created.
To create a layout in portrait orientation, perform the following steps: Step 1. In the New Document dialog box, enter the following values:
Enter a width which exactly matches the
If the page is made higher than the height of the device, the layout may contain only one page. See appendix A, Layout Sizes for the various dimensions.
The Reader App can also be configured to display only pages in landscape orientation. 2 InDesign CS5 users can match the layout design by using the CSS styling features of the Text View mode
1
15
article.
Enterprise can be set up in such a way that any selected image frames are automatically made part of an article. However, articles intended to be used for Text View mode are not allowed to contain any images. Check with your administrator if this feature is enabled. (Optional, depending on your companys setup) Once the article is created, check that no article components containing an image exist in the article by verifying the articles content in the Smart Connection panel, the Elements panel or in Content Station. Should any image component exist, delete it from the article.
Place an already created article (created
16
Step 3. For each article component, assign an appropriate Element label (such as body, caption, byline, etc). Element labels are used by the system for assigning a font family to the text. Which font is assigned to which label is determined by means of a configuration file. Check with your administrator which Element Labels can be used. Step 4. Apply any font styles (such as bold, italic, etc.) to the text as required. Step 5. Save the article by performing a Save Version or a Check In action. Make sure that the article is added to the same Dossier as the story it belongs to.
(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.
(Optional) To display an image as a header at the top of the article, perform the following steps: Step 1. In InDesign or Content Station, access the Properties dialog box for the image that needs to be set as the header. This image needs to have the exact dimensions (width and height) in which it is going to be displayed on the digital device. Step 2. From the Intent list, choose Header. Step 3. Click OK to close the Properties dialog box. Make sure that only one image in the Dossier has the intent property set to Header.
17
18
artboard.
Content is only included in the export when the following conditions are met:
The content needs to be placed on the art-
board area (within the frame boundary) through the Editions panel
Each is explained in the following sections. For more information about DM Artboards, see section 3.1 Page Sizes.
of the frame, with a stroke color of 32% black (C0 Y0 M0 K32). is placed above all other layers.
It is part of a DM Artboard layer, which itself The DM Artboard layer is locked by default. The DM Artboard layer is a non-printable
The following DM Artboard components are recognized (see figure 4 on the next page):
Artboard. The area which is included in the
export, defined by the inner area of the DM Artboard frame. defined by the DM Artboard frame.
Boundary. The outer edges of the artboard, Non-inclusion area. The area which is not
included in the export, defined by the area outside the DM Artboard frame. (This is indicated by a 60pt gray stroke, but note that this area extends beyond the stroke.)
19
A B B
Artboard
Boundary
Non-inclusion area
Safe area
Figure 4. The use of DM Artboards. In the figure on the left, a layout is shown created in a 4:3 aspect ratio. A DM Artboard with also a 4:3 aspect ratio fits exactly around the page border. Since the whole of the page lies within the artboard boundaries, content placed anywhere on the page is included in the export. Content placed on the pasteboard is not included, as indicated by the gray non-inclusion area (although the non-inclusion area extends beyond the gray stroke).
The figure in the middle shows the same 4:3 layout, but now with a 16:9 DM Artboard placed over it. Content placed in the areas to the left and right of the layout or the pasteboard will not be included in the export. In the figure to the right, the two DM Artboards are shown simultaneously: the area shared by both artboards (marked in green) is the safe area, meaning that content placed in this area will be included in the export for both devices (as long as it is assigned to the Editions for both devices).
20
Step 3. (Optional, can be performed at any stage) For those pages for which no DM Artboards have been created, use the Create for Page or Create for Document commands to create artboards for those pages. Use the Create for Page command on a Master page to quickly apply a DM Artboard to all pages which have that Master page applied.
Issue that it needs to be part of. Make sure to assign all available DM Artboard Editions to the layout. that all available DM Artboard Editions are assigned to it (for instance by performing a Save Version action).
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
gular frames with a wide gray border) are created on the layout, one for each device as defined in Enterprise server. an Edition in the Editions panel. Each created artboard is assigned to its respective Edition. The content assigned to the Edition listed first in the Editions panel is made visible. panel.
21
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.
To perform any of these steps, unlock the DM Artboard layer by removing the lock in the Layers panel.
To adjust the size or the position of the DM Artboard, perform the following steps: Step 1. Select the DM Artboard by selecting it in the Layers panel or by selecting it on the page. Step 2. Do one of the following:
Move the DM Artboard to its required
position.
Shift.
The best way of doing this is by dragging a corner while holding down
22
When the aspect ratio does not correspond with the settings expected by Enterprise server, the export will fail. (The export will not fail when a long page is created; since the minimum page height is exceeded for these types of pages, a nonmatching aspect ratio is allowed.) As far as the system is concerned, an artboard can be of any size, as long as its aspect ratio is maintained. However, do not make the artboard too small; it might be impractical to create very small objects, use very small type, and having to zoom in extensively in order to see the content.
layouts in dedicated sizes, only one layout needs to be created. This speeds up the process of making (small) adjustments to (shared) content, since this content is readily available. in all artboards (as long as it is placed in the same location and falls within the boundaries of all artboards) can be assigned to all Editions. This content therefore only has to exist once in the layout. The more shared content is available, the more time is saved updating that content for output to different devices.
To change the look of the DM Artboard, apply a different stroke or fill color.
After completing modifying the DM Artboard, lock it by setting the lock for the DM Artboard layer in the Layers panel.
Assigning content to a DM Artboard Edition is no different to assigning content to any other Edition: assign content that can be included in the export to multiple artboards to those multiple Editions; assign content only to be included in the export to a particular device to that particular Edition only. For more information about using Editions, see the Smart Connection User Guide for InDesign.
23
any visible artboards are hidden, thereby potentially displaying an empty area of the layout instead. ible artboards are not included unless the export option Include Non-Printing Objects is selected.
dimensions of the layout are used as the base for the page size of the PDF, not the boundaries of the DM Artboard.
24
5. Designing a Page
Designing a page for use in a digital magazine is much the same as designing a layout for any other type of publication. The Digital Magazine Tools include additional panels with which it is possible to create the following dynamic content: All panels can be accessed via the Digital Magazines submenu of the Windows menu.
Audio panel. Used for assigning an audio file
Table 5a on the next page provides an overview of what can and cannot be done in terms of placing dynamic objects inside other dynamic objects, and the number of times such an object can be placed on a layout. Table 5b on the following pages shows an overview of the options for placing Hotspots in Scrollable Areas and vice versa. To read these tables, look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done. Only dynamic objects are listed, regular objects such as images follow the default InDesign placing
to a frame on a page.
rules.
Hotspot panel. Used for creating a Hotspot Scrollable Area panel. Used for creating an
area on the page of which the content exceeds the frames width or height. To scroll through the content, the user can scroll either horizontally or vertically.
Note that when including an object into another object is permitted, that this is only allowed down to one level deep. For example: adding a Scrollable Area to a Hotspot is allowed, but adding another Hotspot in that Scrollable Area is not. The following sections will explain how to use each of the new Digital Magazine panels.
Frame icons
Show to a page.
Any frame containing content created using the Digital Magazine Tools can be recognized by an icon at the top of the frame. These icons are only visible when the layout is displayed in Normal screen mode. Table 5c on the following pages shows the icons used for each type of Digital Magazine content.
frame on a page.
a Widget (an HTML5 component with distinct functionality, such as a 360-degree view of an object, a slide show, a zoomable image, etc).
25
Table 5a. Limitations of dynamic objects on a page Created inside a: Slide Show Slide Show Video Audio File Dossier Link Web Element Hotspot Widget Scrollable Area Custom Object Audio File Dossier Link Web Element Scrollable Area Custom Object Number of placements on layout Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited
Video
Hotspot
Widget
To read this table, look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done.
26
Table 5b. Placement options between Hotspots and Scrollable Areas Hotspot on a Hotspot Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot
Hotspot Hotspot Hotspot on a Hotspot Scrollable Area Hotspot on a Scrollable Area Scrollable Area on a Hotspot
To read this table, look up the object in the first column and compare it against the object in the center columns in which you want to include it to see if this can be done.
Table 5c. Digital Magazine frame icons Icon Content Type Audio Video Dossier Link Hotspot Icon Content Type Slide Show Web Element Scrollable Area Widget
27
The Reader App can optionally be set up to include Hotzones: areas to the left, right, top (Android Reader App only) and bottom of the screen which the user can tap in order to navigate the magazine. (For more information, see the Customization chapters.) Its functionality will affect the way the designer has to position interactive contentsuch as Hotspotson the layout since the Hotzone functionality overrules any underlying functionality. Any interactive content positioned in a Hotzone will not function when the user taps inside the Hotzone. Table 4c below shows the width or height of the Hotzone areas (based on 132 dpi/ppi). You might want to add guides to the layout (template) to indicate the location of the Hotzones.
Figure 5. iPad Hotzones (shaded in red) can be tapped to navigate the magazine; they overrule any underlying functionality
Table 5c. Hotzone width or height Zone Picas Left/right Top/Bottom 44 pixels 80 pixels 2p0 3p7.636 Points 24 pt 43.636 pt Value (based on 132 dpi/ppi) Inches 0.3333 in 0.6061 in Millimeters 8.476 mm 15.394 mm Centimeters 0.8476 cm 1.5394 cm
28
the right size for display in full screen mode. (For an overview of the dimensions used on the iPad, see appendix A, Layout Sizes.) Dossier in which the layout containing the Slide Show is stored, else the functionality of the Slide Show panel will not be available. Slide Show is based may not be located on a Master page.
Step 4. In the Slide Show panel, select the check box Enable Slide Show. (See figure 5.1 on the next page.) This check box cannot be selected under the following circumstances:
The selected frame is already set to con-
tain a video, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
The top half of the panel shows all images that will be part of the Slide Show (when creating a new Slide Show, only one image will be shown: the image that was selected on the layout); the bottom half of the panel shows all images that are available for adding to the Slide Show.
29
A default transition (swipe) is automatically added during export; setting a custom transition is not possible.
Figure 5.1. The top half of the Slide Show panel shows the images that are currently part of the Slide Show; the bottom half of the panel shows those images that can still be added
Step 5. Add images to or remove images from the Slide Show by doing the following:
Add an image by dragging it from the
bottom half of the panel to the top half of the panel. When the image is added, it will appear in the top half of the panel and will disappear from the bottom half of the panel. the top half of the panel to the bottom half of the panel. When the image is removed, it will appear in the bottom half of the panel and will disappear from the top half of the panel.
Step 6. Reorder the images in the top half of the panel by dragging them to the required position.
30
5.2.1 As a URL
Step 1. Open the layout in which the video should be added. Step 2. Make sure that the Video panel is displayed. The Video panel can be shown or hidden by choosing Video from the Digital Magazine submenu of the Window menu. Step 3. Select the frame or group of frames on the layout that should contain the video. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page. This frame may not be an inline or anchored frame. Video can also be included in a Hotspot or Scrollable area. Place an image in the frame to for instance act as a preview of the video; if the frame is left empty, the first frame of the video will be shown in the exported page. Step 4. In the Video panel, select the check box Enable Video. (See figure 5.2.1 below.) This check box cannot be selected under the following circumstances:
which is located on the Internet. (This reduces the total file size of the Reader App, but an internet connection is required to view the video on the digital device.) As a file. Use this method to embed the video in the Reader App. (The video will be immediately available to the user, but the total file size of the Reader App will increase.) A video can be played in the following ways:
Automatically. The video will be played as
soon as the page on which the file is located is accessed. Directly in fullscreen. The video is played directly in fullscreen mode as soon as the page on which the file is located is accessed. Each method is explained below.
31
The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played (assuming that internet access is available). For information about the Play Automatically option in the Video panel, see section 5.2.3 Auto Play. For information about the Directly in Fullscreen option in the Video panel, see section 5.2.4 Auto Fullscreen.
tain a Slide Show, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
Figure 5.2.1. To reference a video by a URL, enter the URL in the Video panel
Step 5. In the Source section, choose Internet. Step 6. In the Location section, enter the URL to the video file in the URL box. For supported video formats, see:
Apple iPad: http://www.apple.com/ipad/
specs/
Android: http://developer.android.com/
guide/appendix/media-formats.html HTML5_video
HTML5: http://en.wikipedia.org/wiki/
32
5.2.2 As a File
Step 1. Make sure that any video that is to be used is uploaded to Enterprise and is part of the same Dossier as the layout in which the video is to be embedded. For supported video formats see the following resources:
Apple iPad: http://www.apple.com/
Video can also be included in a Hotspot or Scrollable area. Place an image in the frame to for instance act as a preview of the video; if the frame is left empty, the first frame of the video will be shown. Step 5. In the Video panel, select the check box Enable Video.
ipad/specs/
Android: http://developer.android.com/
guide/appendix/media-formats.html HTML5_video
HTML5: http://en.wikipedia.org/wiki/
Step 2. Open the layout in which the video should be added. Step 3. Make sure that the Video panel is displayed. The Video panel can be shown or hidden by choosing Video from the Digital Magazine submenu of the Window menu. Step 4. Select the frame or group of frames on the layout that should contain the video. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page. This frame may not be an inline or anchored frame.
33
Figure 5.2.2. The top half of the Video panel shows the video that is currently linked to the selected frame; the bottom half of the panel shows the videos to choose from
tain a Slide Show, audio file, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
For information about the Play Automatically option in the Video panel, see section 5.2.3 Auto Play. For information about the Directly in Fullscreen option in the Video panel, see section 5.2.4 Auto Fullscreen.
Step 6. In the Source section, choose Dossier (selected by default). The top half of the panel shows the video which is currently set to be embedded (when no video is linked yet, this section will be empty); the bottom half of the panel shows all videos that are available to choose from. Double-click a video in the lower half or top half of the panel to preview it. Hover the mouse pointer over a video to display the file name in a tooltip. Step 7. Assign a video to the frame by doing the following: Step 7a. If a video is already displayed in the top half of the panel, remove it by dragging it to the bottom half of the panel. When the video is removed, it will appear in the bottom half of the panel and will disappear from the top half of the panel. Step 7b. Drag the video that should be assigned to the frame by dragging it from the bottom half of the panel to the top half of the panel. When the video is added, it will appear in the top half of the panel and will disappear from the bottom half of the panel. The process is now complete. When the frame is tapped by the user on the digital device, the embedded file is played.
34
which is located on the Internet. (This reduces the total file size of the Reader App, but an internet connection is required to play the audio file on the digital device.) As a file. Use this method to embed the audio file in the Reader App. (The audio file will be immediately available to the user, but the total file size of the Reader App will increase.) An audio can be played in the following ways:
Automatically. The audio will be played as
Each method is explained below. Audio can also be included in a Hotspot or Scrollable area.
35
5.3.1 As a URL
Step 1. Open the layout in which the audio file should be added. Step 2. Make sure that the Audio panel is displayed. The Audio panel can be shown or hidden by choosing Audio from the Digital Magazine submenu of the Window menu. Step 3. Select the frame or group of frames on the layout that should contain the audio file. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page. Step 4. In the Audio panel, select the check box Enable Audio. (See figure 5.3.1 below.) This check box cannot be selected under the following circumstances:
The selected frame is already set to con-
Figure 5.3.1. Assigning an audio file to a frame is done by using the Audio panel
Step 6. In the Location section, enter the URL to the audio file in the URL box. For supported audio formats see the following resources:
Apple iPad: http://www.apple.com/
ipad/specs/
tain a Slide Show, video, Web Element, or Widget, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
Android: http://developer.android.com/
guide/appendix/media-formats.html HTML5_audio
HTML5: http://en.wikipedia.org/wiki/
Step 7. (Optional) To have the audio played automatically as soon as the page on which the file is located is opened, select the check box Automatically in the Play section of the panel.
36
The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played (assuming that internet access is available).
5.3.2 As a File
Step 1. Make sure that any audio file that is to be used is uploaded to Enterprise and is part of the same Dossier as the layout in which the audio file is to be embedded. For supported audio formats see the following resources:
Apple iPad: http://www.apple.com/
ipad/specs/
Android: http://developer.android.com/
guide/appendix/media-formats.html HTML5_audio
HTML5: http://en.wikipedia.org/wiki/
Step 2. Open the layout in which the audio file should be added. Step 3. Make sure that the Audio panel is displayed. The Audio panel can be shown or hidden by choosing Audio from the Digital Magazine submenu of the Window menu. Step 4. Select the frame or group of frames on the layout that should contain the audio file. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame may not be located on a Master page.
37
This frame may not be an inline or anchored frame. Step 5. In the Audio panel, select the check box Enable Audio.
A list of audio files that are available in the Dossier appears. Step 7. Assign the audio file by doing one of the following:
Select its check box Double-click its name
The name of the currently selected file appears above the list. Step 8. (Optional) Use the playback controls in the Skim Over Audio section at the bottom of the panel to play the audio file. The process is now complete. When the frame is tapped by the user on the digital device, the assigned file is played. For information about the Play Automatically option in the Audio panel, see section 5.3.3 Auto Play.
Figure 5.3.2. Assigning an audio file to a frame is done by using the Audio panel
tain a Slide Show, video Web Element, or Widget, or is set to act as a Dossier Link, Scrollable Area, or Hotspot. Clear the Enable check box in the respective panel.
39
When the external content is to be displayed in the frame, make sure that the dimensions of the frame are sufficient to display the content of the external source properly. Step 4. In the Web Element panel, select the check box Enable Web Element.
When the user taps the frame, the content is displayed in a pop-up window in the Reader App.
App). When the user taps the frame, the content is displayed within the frame.
Figure 5.4. The Web Element enabled and a URL entered in the Web Element panel
This check box can only be selected when the selected frame is not yet set to contain a Slide Show or video, an audio file, or is set to act as a Dossier Link, Scrollable Area, or Hotspot. If this is the case, first clear the Enable check box in the respective panel. In the URL box, enter the URL of the source that provides the content. Step 5. In the URL box, enter the URL to which should be linked. Step 6. In the Show Web Element section, choose how the content should be displayed:
In a Web Browser. When the user taps
the frame, the content is displayed in the default Web browser on the digital device. (Note that as a result of this action, the Reader App is closed.)
40
screen
<a href=ww://gotoLibrary>Library Link</a> This functionality will only work when the page is displayed in either an embedded frame on the page or in a pop-up window, not when displayed in an external browser.
41
5.5.1 On a Layout
Any frame or group of frames on the layout can be set to act as a link to a story. Typically, this is used for creating links on the cover as well as for creating a table of contents, but the feature can also be used to create cross-references between pages within the same story or between pages of different stories. Since each story is represented by a Dossier, the link is created by linking to the Dossier of that story. To create a Dossier Link, perform the following steps: Step 1. Open the layout on which the Dossier Link should be added. Step 2. Make sure that the Dossier Link panel is displayed. The Dossier Link panel can be shown or hidden by choosing Dossier Link from the Digital Magazine submenu of the Window menu. Step 3. Select the frame or group of frames on the layout that should act as the link. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). This frame or group of frames may not be located on a Master page. This frame may not be an inline or anchored frame. A Dossier Link can also be included in a Hotspot or Scrollable area.
42
Step 4. In the Dossier Link panel, select the check box Enable Dossier Link. (See figure 5.4 below.) This check box can only be selected when the selected frame is not yet set to contain a Slide Show, video, audio file, Web Element, or Widget, or is set to act as a Scrollable Area or Hotspot. If this is the case, first clear the Enable check box in the respective panel. The Dossier list is enabled, showing all Dossiers assigned to the same Issue as the layout on which the link is created.
Figure 5.5.1. The Dossier Link panel allows you to create a link to a Dossier
Step 3b. Replace [itemid] by the ID of the story to link to. Step 3c. Replace [index] by the page number in the story to link to. This is not the page number assigned by InDesign, but the physical page number (for example: a story with 3 pages will have page numbers 1, 2, and 3.) Example: <a href="ww://storylink?itemid=317&pageindex=1"> HTML Dossier Link</a>
Step 5. From the Dossier list, choose the Dossier to which need to be linked. Step 6. (Optional) In the Page box, enter the page number to which need to be linked. If no page number is enteredor a page number which does not existthe link is set to the first page of the story.
43
user can tap, after which additional content is displayed on top of the page. played after the Hotspot is tapped.
Hotspot content: the content which is disHotspot Content layer: the layer assigned
to the Hotspot; it contains the content for that Hotspot (the content which appears after tapping the Hotspot). assigned to a Hotspot and therefore does not hold any Hotspot content.
to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the bottom-most layer (but displayed as the top-most layer in the Hotspot panel). Hotspot Content layer which will appear in place of the Hotspot which is tapped. It is used to mimic the behavior of selecting a Hotspot.
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 display its content as soon as the page is loaded. A Hotspot can also be part of another Hotspot (referred to as a Hotspot-on-a-Hotspot). For more information, see section 5.7 Hotspots on Hotspots.
on the Hotspot Content layer which acts as the button to close the content for one or all Hotspots with.
The different types of layers result in a certain hierarchy which is reflected in the Hotspot panel. In the figure below for example, a Hotspot panel is shown for a layout on which a Hotspot has been created on the
44
Background layer; its Hotspot Content items are placed on the Scheveningen layer. In this scenario, the layers can be matched to the Hotspoton-Hotspot terms as follows:
Base layer: the Background layer. Hotspot Content layer: the Scheveningen
The regular functionality of a Hotspot would be as follows: 1. The user taps on a Hotspot. 2. New content appears showing the additional information. 3. The user closes the additional content by tapping the same Hotspot or another Hotspot. A more advanced method is the following: 1. The user taps on a Hotspot. 2. New content appears showing the additional information. The Hotspot that is tapped disappears and the Selected Hotspot appears in its place (optionally designed differently and placed in a different location). 3. The additional content can be closed by doing one of the following:
Tapping the same or another Hotspot
layer
Tapping the Hotspot Close button Tapping the Selected Hotspot (only if
When the Hotspot Content disappears, the Hotspot itself appears again.
Figure 5.6.1. The Hotspot panel displays the hierarchy of the created Hotspot (see the text for a detailed explanation of this structure)
45
5.6.2 Layers
The Hotspot functionality makes use of layers. The Hotspot itself is created on any of the layers of the regular layout. Using the Hotspot panel, the components which appear after tapping the Hotspot (such as the Hotspot content, the Selected Hotspot, and Hotspot Close button) are created on a different layer (either a dedicated layer or an existing layer).
Initial view on the tablet: the layout and the Hotspot is shown (here the red item on the page)
The pop-up window is the Hotspot Content which appears after tapping the Hotspot. It is placed on a different layer.
46
The figures below show how the Hotspot is shown on the tablet and how the displayed items are setup in InDesign. (For more examples, see later in the chapter.)
47
5.6.4 Creation
To create a Hotspot, perform the following steps (see also the figures on the following pages): Step 1. Design the layout on which the Hotspot is to be placed. Step 2. Create an item on the layout which should act as the Hotspot. This can either be a frame or a group of frames and can be placed on any layer except a layer which acts as a DM Artboard layer. You can also create the item on a layer which acts as a Hotspot Content layer for an already existing Hotspot. This will however create a Hotspot on a Hotspot which is a different process. For more information, see section 5.7 Hotspots on Hotspots.) Take note of the following:
The created frames may not be located
Step 3. Make sure that the Hotspot panel is displayed. The Hotspot panel can be shown or hidden by choosing Hotspot from the Digital Magazine submenu of the Window menu. Step 4. (Optional) Make sure that the Layers panel is displayed. Since the Hotspot functionality makes use of layers, it is handy to keep track of the available layers and whether they are displayed and/or active at a given time. Step 5. Make sure that the item(s) created in step 2 are selected. Step 6. In the Hotspot panel, select the check box Enable Hotspot. This check box can only be selected when the selected frame is not yet set to contain a Slide Show, Web Element, Widget, video, audio file, or is set to act as a Scrollable Area or Dossier Link. If this is the case, first clear the Enable check box in the respective panel. Other limitations which prevent this check box from being unavailable are shown in table 5a and table 5b. Step 7. (Optional) To make the Hotspot Content appear automatically whenever the page is loaded (as opposed to the user having to top on the Hotspot to make the content appear), do the following:
In the Hotspot panel, select the Show
The created frame(s) may not be inline or Certain limitations apply to placing
Hotspots in other dynamic objects. For more information, see table 5a and table 5b.
Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones).
Only one Hotspot Content can be set to automatically appear for each
48
page. When setting this option for Hotspot A while it is already set for Hotspot B, the functionality is removed from Hotspot B and set to Hotspot A. Now that the Hotspot is defined, we need to specify the layer on which the Hotspot Content is going to be placed. This can be done in one of the following ways:
On a new layer (see step 8) On an existing layer (see step 9)
(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.
panel.
Hotspot panel and placed one level lower than the base layer (the layer on which the Hotspot itself is placed).
Step 8d. (Optional) Repeat Steps 5, 6, 8a 8c to create additional Hotspot Content layers. Step 8e. Continue with Step 9 or 10.
49
(Make sure that Steps 5 and 6 have been performed, else the panel options will not be available.) Step 9. To create the Hotspot content on an existing layer, perform the following steps: Step 9a. In the Hotspot panel, click Use Existing Layer. The option is not available when:
Only one layer exists. Multiple layers exist but each of these
Step 11. In the Hotspot panel, click Edit Layer. The following actions take place:
The Hotspot Content layer corre-
Content layers apart from the current Hotspot Content layer is hidden (this makes the process of working on the content of the current Hotspot Content layer more convenient)
cannot be assigned as a Hotspot Content layer, because they act as a Scrollable Area layer or a DM Artboard layer.
Step 12. Create the content which should be displayed when a user taps a Hotspot. Make sure to not accidentally select a different layer in the Layers panel, else you might see unexpected results when the Hotspot is tapped.
Step 9b. In the list of Existing Layers, select the checkbox for the layer to which the Hotspot Content needs to be added. You can also create the item on a layer which acts as a Hotspot Content layer for an already existing Hotspot. This will however create a Hotspot on a Hotspot which is a different process. For more information, see section 5.7 Hotspots on Hotspots.) Hotspot content can be assigned to one layer only, not to multiple layers. Step 9c. Continue with Step 10. With the Hotspot Content layer defined, we can now start creating content on it. Step 10. Select the Hotspot for which content should be created.
50
Figure 5.6.4a. The starting point for creating a basic Hotspot: a layout which is going to display information about certain locations. It has one background layer on which the Hotspots (represented by the red layout items) are also placed. Shown to the right are the Hotspot panel and InDesigns Layers panel.
51
Figure 5.6.4b. With a Hotspot selected on the Background layer (layout item 2), the Enable Hotspot option in the Hotspot panel has been selected. A new layer has subsequently been created by using the Create New Layer feature of the Hotspot panel, and after clicking OK the new layer has appeared in the Layers panel as well as in the Hotspot panel. Note the position of the new layer in the Hotspot panel: because it is seen as part of the layer on which the Hotspot itself is placed, the new layer is positioned one level below this layer.
52
Figure 5.6.4c. With the newly created layer (Scheveningen) made active in the Layers panel, the Hotspot content has now been created. In this basic use of a Hotspot, tapping Hotspot 2 will display additional information about the location in the form of a pop-up window. Tapping the Hotspot again will close the displayed Hotspot content.
53
Hotspot Hotspot
A Starting point on the tablet: the page con Starting point on the tablet: the taining a single Hotspot is shown (here the red taining a single Hotspot is shown item on the page) item on the page)
B Hotspot is tapped, the Hotspot When the Hotspot is tapped, the Hotspot Content appears (here in When Content appears (here in the form of a popthe form of a pop-up window). up window).
139 54
The creation process is as follows (see also the figures on the following pages): Step 1. Create the Hotspot and Hotspot Content as described in section 5.6.4 Creation. Step 2. Do the following: Step 2a. On the Hotspot Content layer, create the object that should act as the Selected Hotspot. (When this contains multiple frames, make sure to group them). Step 2b. With the frame or group of frames selected, select the Enable Selected Hotspot check box in the Hotspot panel. In case the Selected Hotspot functionality should be removed from the page item, select the item and choose None in the Hotspot panel.
55
Figure 5.6.5. In this example, the Hotspot content is displayed in a sidebar instead of a pop-up. To better indicate to which location on the map the sidebar information refers, a Selected Hotspot has been created (the blue layout item). This item now appears as soon as the original Hotspot is tapped. The item is given this functionality by selecting it on the layout and choosing the Enable Selected Hotspot option in the Hotspot panel. In this example, the size and position of the Selected Hotspot is identical to the underlying Hotspot apart from the color (but the use of this technique is only limited by your creativity). Tapping the red Hotspot will seem to make it change color, thereby mimicking a selected state. Tapping the Selected Hotspot will close the displayed Hotspot content as well as the Selected Hotspot.
56
When doing so, all restrictions for working with Hotspots on Hotspots apply. When an action is not allowed, a message will inform the user about this.
57
Figure 5.6.6. When using a Selected Hotspot, it can be beneficial to offer the user a separate close button to close all the Hotspot content with. In this example, a close button has been placed in the lower right-hand corner of the page. Its functionality is enabled by selecting the item on the layout and subsequently choosing the Enable Close Button option in the Hotspot panel. Note that when not using a Close button, the Hotspot content and the Selected Hotspot can be closed by tapping the Hotspot or Selected Hotspot; when the Close button is available, the Hotspot Content and the Selected Hotspot can only be closed by tapping the Close button.
58
Hotspot
Selected Hotspot
Hotspot Content
Hotspot Close button Starting point on the tablet: the page containing a single Hotspot is shown (here the red item on the page)
A B When the Hotspot is tapped, a Selected Hotspot (the blue layout item) appears over the original Hotspot and additional information is displayed in a sidebar. In addition, a close button is shown in the bottom right-hand corner of the page
Hotspot
Hotspot Close button The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer. The Hotspot is created on a base layer
145 59
user can tap, after which additional content is displayed on top of the page. played after the Hotspot is tapped.
Hotspot content: the content which is disHotspot Content layer: the layer assigned
to the Hotspot; it contains the content for that Hotspot. A Hotspot Content layer can act as either a Level-1 Hotspot Content layer or a Level-2 Hotspot Content layer (see below). assigned to a Hotspot and therefore does not hold any Hotspot content.
to a Hotspot but holds the frames which act as a Hotspot. In the hierarchy, the Base layer acts as the top-most layer. which holds the content for the Hotspot placed on the Base layer. It also acts as the layer on which other Hotspots are placed. which holds the content for the Hotspot placed on the Level-1 Hotspot Content layer.
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.
60
the button to close the content for one or all Hotspots with. The different types of layers result in a certain hierarchy which is reflected in the Hotspot panel. In the figure below for example, a Hotspot panel is shown for a layout on which three Hotspots have been created. A basic Hotspot has been created on the Background layer; its Hotspot Content items are placed on the Scheveningen layer. On this layer, two additional Hotspots have been created. Their content is placed on the layers Scheveningen Beach and Scheveningen Harbor respectively. In this scenario, the layers can be matched to the Hotspoton-Hotspot terms as follows:
Base layer: the Background layer. Level-1 Hotspot Content layer: the
Scheveningen layer
Figure 5.7.1. The Hotspot panel displays the hierarchy of the created Hotspots and Hotspots-on-Hotspots (see the text for a detailed explanation of this structure)
Restrictions
A Hotspot on a Hotspot can only be created one level deep; creating a Hotspot in a Hotspot which itself is already part of a Hotspot is not possible.
61
5.7.2 Creation
To create a Hotspot on a Hotspot, perform the following steps (see also the figures on the following pages): Step 1. Create a regular Hotspot as explained in section 5.6, Creating a Basic Hotspot. This Hotspot is placed on the Base layer; its content resides on the Hotspot Content layer. A new Hotspot-on-Hotspot item now needs to be created for the user to tap on. Step 2. On the Hotspot Content layer, create a new layout item which is to serve as the new Hotspot. Following the definitions of the Hotspot-onHotspot terms, the Hotspot Content Layer is now referred to as a Level-1 Hotspot Content Layer. Step 3. Select the newly created Hotspot. Step 4. In the Hotspot panel, select Enable Hotspot. Step 5. (Optional) To make the content for that Hotspot appear automatically whenever the page is loaded (as opposed to the user having to top on the Hotspot to make the content appear), do the following:
In the Hotspot panel, select the Show
Now that the Hotspot is defined, we need to specify the layer on which the Hotspot Content is going to be placed (the layer referred to as the Level-2 Hotspot Content layer). This can be done in one of the following ways:
By placing the content on a new layer (see
step 6)
(see step 7)
(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.
panel.
Only one Hotspot Content layer can be set to automatically appear for each page. When setting this option for Hotspot A while it is already set for Hotspot B, the functionality is removed from Hotspot B and set to Hotspot A.
Hotspot panel and placed one level below the Hotspot Parent layer.
Step 6d. (Optional) Repeat Steps 6, 6, 8a 8c to create additional Hotspot Content layers. Step 6e. Continue with Step 8 or 9.
62
(Make sure that the newly created Hotspot is selected, else the panel options will not be available.) Step 7. To create the Hotspot content on an existing layer, perform the following steps: Step 7a. In the Hotspot panel, click Use Existing Layer. The option is not available when:
Only one layer exists The layer acts as a Level-2 Hotspot
With the Hotspot Content layer defined, we can now start creating content on it. Step 8. Select the newly created Hotspot for which content should be created. Step 9. In the Hotspot panel, click Edit Layer. The following actions take place:
The Hotspot Content layer corresponding
Step 7b. In the list of Existing Layers, select the checkbox for the layer to which the Hotspot Content needs to be added. The following action takes place:
The selected layer is positioned one
Content layers apart from the current Hotspot Content layer is hidden while the content for the Level-1 Content layer that it is part of is kept visible (this makes the process of working on the content of the current Hotspot Content layer more convenient)
Step 10. Create the content which should be displayed when a user taps a Hotspot. Make sure to not accidentally make a different layer in the Layers panel active, this will result in the content ending up in the wrong location within the hierarchy and will give unexpected results when the Hotspot is tapped on the device. Step 11. Repeat steps 8 10 for any additionally created Hotspots.
Hotspot content can be assigned to one layer only, not to multiple layers. Step 7c. Continue with Step 8 or 9.
63
Figure 5.7.1a. The starting point for creating a Hotspot on a Hotspot: a layout contains a previously created Hotspot of which the content is placed on the Scheveningen layer. On this same layer, a new item is created (the blue button on top of the image in the sidebar), which is to act as the new Hotspot.
64
Figure 5.7.1b. With the new Hotspot selected on the Scheveningen layer (the blue button over the image in the sidebar), the Enable Hotspot option in the Hotspot panel has been selected. A new layer has been created (Scheveningen Beach) by using the Create New Layer feature of the Hotspot panel. After clicking OK, the new layer has appeared in the Layers panel as well as in the Hotspot panel. Note the position of the new layer in the Hotspot panel: because it is seen as part of the Scheveningen Level-1 Hotspot Content layer, it is placed one level below that layer.
65
Figure 5.7.1c. With the newly created layer (Scheveningen) made active in the Layers panel, the Hotspot content has now been created in the form of an extra sidebar overlaying the top part of the original sidebar. In this basic use of a Hotspot on a Hotspot, tapping Hotspot Beach will display the additional information in the top part of the sidebar. Tapping the Hotspot again will close the displayed Hotspot content.
66
Selected Hotspot
Hotspot Content
Hotspot on Hotspot
Starting point on the tablet: after tapping a Hotspot (not shown here), a Selected Hotspot has appeared together with the Hotspot Content in the form of a sidebar. On this sidebar, an additional Hotspot has been placed.
A
B After tapping the Hotspot on a Hotspot, the Hotspot Content for that Hotspot appears.
The Hotspot on a Hotspot Content is placed on a separate layer, referred to as the Content Level-2 Hotspot layer. layer. The Hotspot on a Hotspot item is placed on the Level-1 Hotspot Content layer layer The Selected Hotspot, Hotspot Content (here in the form of a sidebar) and the Hotspot Close button are placed on a separate layer, referred to as the Level-1 Content layer. Hotspot layer.
67 153
68
Enable Hotspot
When doing so, all restrictions for working with Hotspots on Hotspots apply. When an action is not allowed, a message will inform the user about this.
Used for creating a dedicated layer on which the Hotspot Content is placed.
Used for assigning an existing layer on which to place the Hotspot Content. Note that the option is not available when the following conditions are met:
Only one layers exists. The layer acts as a Level-2 Hotspot Content
Layers list
The layers list displays all layers available in the layout with the exception of the Digital Magazine Artboard layer. In addition, it also displays the hierarchy of the layers used in the creation of Hotspots and Hotspots-on-Hotspots.
Collapses all expanded items in the Layers list. Expands all collapsed items in the Layers list. Used for efficiently working on new content on a particular Hotspot Content layer. The first step is to select the Hotspot item on the layout for which content needs to be edited on its Hotspot Content layer. After clicking Edit All, the following actions take place:
69
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.
Hotspot, the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed.
Compared to the previous version of the Hotspot panel, editing layer names can only be done by using the Layers panel, not anymore by using the Hotspot panel.
Used for creating a layout item which acts as a replacement for the tapped Hotspot. One use example is to create an identical item (as far as size, shape and position is concerned) but only change some of its visual properties. This will have the effect of the item changing its visual appearance, similar to selecting the tapped item.
None
Used for de-assigning any assigned Selected Hotspot or Hotspot Close Button functionality from a frame. Any items on a Hotspot Content Layer which do not act as a Selected Hotspot or Hotspot Close button will also be assigned None.
Show Automatically
Select this checkbox when the Hotspot Content needs to be displayed as soon as the page on which the Hotspot is located is loaded. When enabling this feature for a Hotspot on a Hotspot, the content on the Level-1 Hotspot Content layer to which the Hotspot on a Hotspot belongs is also displayed.
70
Widget. Clear the Enable Widget check box for that frame. tain a video, audio file, Web Element, or Slide Show, or is set to act as a Dossier Link, Hotspot, or Scrollable Area. Clear the Enable check box in the respective panel.
The Widget list is enabled, showing all Widgets available in the same Dossier in which the layout is saved to.
71
If the required Widget is not found in the list, locate it in Enterprise and check whether the Widget has been assigned to the correct Dossier. Step 5. From the Widget list, choose the Widget which needs to be added. The bottom half of the panel shows the available settings for the chosen Widget with which the content and/or behavior of the Widget can be configured. Depending on how the Widget is set up (see appendix D, Working With Widgets), various settings may be available such as check boxes, lists, text boxes, etc. Step 6. (Optional) Configure the Widget as required.
Components
the page which holds the scrollable content. the user can scroll through.
Layers
The Scrollable Area functionality makes use of layers. The Scrollable Area frame itself is created on any of the layers of the regular layout. Using the Scrollable Area panel, the Scrollable Content can be added to either a dedicated layer or to an existing layer.
In essence, the Scrollable Area content can be set to any size, up to the width or height of the page that it is on. Since the Scrollable Area content is nothing more than an extra layer within the InDesign layout, it can contain any type of content, including a Slide Show, video, audio, a Web Element, Hotspot, Widget, or Dossier Link. However, it cannot contain another Scrollable Area; nor can the object added to the Scrollable Area itself contain another Scrollable Area (for example: you can add a Hotspot to a Scrollable Area, but it is not possible to add another Scrollable Area in that Hotspot). To create a Scrollable Area, perform the following steps: Step 1. Design the layout on which the Scrollable Area is to be placed.
72
Step 2. Create an item on the layout which should act as the Scrollable Area. This can either be a frame or a group of frames and can be placed on any layer except a layer that already acts as a Scrollable Area Content layer. This frame may not be an inline or anchored frame. It is possible to have multiple Scrollable Areas in a layout. When Hotzones are enabled in the Reader App, these will block any underlying functionality; be aware of these zones when placing your frame containing interactive content. (For more information about Hotzones, see Reader App Hotzones). Step 3. Make sure that the Scrollable Area panel is displayed. The Scrollable Area panel can be shown or hidden by choosing Scrollable Area from the Digital Magazine submenu of the Window menu. Step 4. (Optional) Make sure that the Layers panel is displayed. Since the Scrollable Area functionality makes use of layers, it is handy to keep track of the available layers and whether they are displayed and/or active at a given time. Step 5. Select the frame or group of frames on the layout that should act as the Scrollable Area. This frame or group of frames may not be located on a Master page.
Step 6. In the Scrollable Area panel, select the check box Enable Scrollable Area. This check box cannot be selected under the following circumstances:
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)
(Make sure that Steps 4 and 5 have been performed, else the panel options will not be available.) Step 7. To create the Scrollable Content on a new layer, perform the following steps: Step 7a. Clic k C r e a t e N ew L aye r (selected by default). Step 7b. In the Layer Name box, enter a descriptive name for the layer. Step 7c. Click OK. A new layer is created in the Layers panel. Step 7d. (Optional) Repeat Steps 4, 5, 6, 7a 7c to create additional Scrollable Area Content layers.
73
Step 10. Create the content through which the user should be able to scroll. No background is needed; the content will be displayed on top of the Scrollable Area frame. Make sure to not accidentally select a different layer in the Layers panel, else you might see unexpected results.
(Make sure that Steps 4 and 5 have been performed, else the panel options will not be available.) Step 8. To create the Scrollable Content on an existing layer, perform the following steps: Step 8a. Click Use Existing Layer. The option is not available when:
Only one layers exists Multiple layers exist but these act as a
DM Artboard.
Step 8b. In the list of Existing Layers, select the layer to which the Scrollable Content needs to be added. Step 8c. (Optional) In the list of Existing Layers, click the layer name to rename the layer. Step 8d. Continue with Step 9. Step 9. Click Edit Layer. The following actions take place:
The Scrollable Area Content layer is The content of all existing Scrollable
made active
Area Content layers apart from the current Scrollable Area Content layer is hidden (this makes the process of working on the content of the current Scrollable Area Content layer more convenient)
74
75
Step 1e. Click OK to close the dialog box and save the Hyperlink. Step 1f. Make sure that the check box for the magazines Publication Channel is selected for the Hyperlink in order to include the Hyperlink in the exported magazine. Step 2. (Optional, only for Facebook and e-mail) In the Dossier properties window for the story, enter a Story title. This is used as follows:
Facebook: as the clickable text in the
created post.
76
6. Summary
In this chapter you have learned all about creating content for a digital magazine using InDesign. You have seen how each component of a story is created, including the Dossier, the layouts in their various orientations and the actual content on the layout.
Next step
Exporting Content. It will teach you how to prepare and export created content using Content Station.
77
06 Exporting Content
The process of preparing files for export and that of subsequently exporting the content of the magazine takes place in Content Station. Using the Dossier functionality together with the Digital Magazine application, the following tasks can be performed:
Defining which files should be included in the
export Changing the order of the stories as they should appear in the magazine Exporting the content for use in a Reader App for a specific platform In this chapter you will learn how to prepare the created content for publishing as a digital magazine, and see how the content is exported.
been assigned to the magazine issue, and in which order they appear story
It provides quick access to the Dossier of a It contains tools for exporting the magazine
For an overview of the main interface of the Digital Magazine app, see figure 1 on the next page.) To access this application, do one of the following:
Double-click the Digital Magazine application
in the Application pane on the Home page to open it in a new tab. tion on the Home page and choose Open in New Window to open the application in a new window.
80
their pages for the story selected in the Story pane. ing the magazine.
combination of which content should be displayed in the Story pane. which content should be displayed in the Story pane.
The usage of each pane is explained in more detail on the following pages.
A B
A F
Search pane B Device toolbar C Story pane Page preview pane (portrait pages)
Export toolbar
82
B C
A B C D
can appear:
first layout in the Dossier. The first layout in landscape orientation is used, when available. (in the form of a light gray page) is shown under the following conditions:
When the Dossier does not contain
any layouts.
The area of the Story pane can be adjusted by dragging the gripper area (the dividing bar between the Story pane and the Pages Preview panes) to the left or right. (For more information about resizing the interface, see the Content Station User Guide, chapter 3, The Interface.)
The preview is actually a Dossier: when double-clicking it, the Dossier for that story opens; when right-clicking it, the access menu of the storys Dossier appears.
Status icon. The Dossier status icon.
A story appears in the Story pane as soon as it has been assigned to the required Publication Channel for the magazine.
1
83
84
85
should not be assigned to the magazines Publication Channel. image should be assigned to the Publication Channel and have the Intent set to Header. at the bottom of the page should be assigned to the magazines Publication Channel. (With the exception of images that are part of a Slide Show; these are automatically displayed at the bottom of the page.)
assigned to the Publication Channel of the magazine. These will typically be the layouts in landscape and portrait orientation. correct orientations are assigned (corresponding with the way the Reader App has been configured). make sure that their related content is part of the Dossier:
Slide shows: all related images Embedded videos: all related videos Embedded audio: all related audio files Widgets: all related Widget files Widgets: all related Widget files The following types of content also need
Step 2. In the Story pane, select each Story and check the Page Preview panes to see if pages in the expected orientation appear (depending on how the Reader App is configured: both landscape and portrait orientation, or landscape or portrait orientation only.)
86
87
Preview: Used for indicating that a Dossier contains content for use in the issue preview functionality in a Store. This content is extracted from the ofip file by a delivery system, allowing the user to preview a complete dynamic story as opposed to a singlepage static image.
that it contains an image with the exact dimensions (width and height) in which it is going to be displayed on the digital device. To quickly access the Dossier of a story, double-click the story in the Story pane.
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.)
the story in the Page viewer of the Readers Section Viewer. of the section to which the story belongs in the Section viewer of the Reader App.
During the upload process of a digital magazine, images can be automatically extracted by a Content Delivery Platform for use as the cover or preview image in a Store. This process replaces the need to upload these images separately. To achieve this, prepare the content as follows: Step 1. Add any images to act as the cover or preview to the Dossier. Step 2. Access the Dossier properties. Step 3. Set the intent property of the images to cover or preview respectively. Images assigned this way are only picked up from the first Dossier of the issue, as defined by the order in the Digital Magazine application.
information for the story in the Story / Page Viewer of the Reader App. Keep both the Story title and Description short; if it exceeds the width of the page preview in the Reader, ellipses are shown for the part which cannot be displayed.
88
89
3. Exporting Content
When the content of the magazine has been verified and found complete and correctly set (see section 2. Preparing Content for Export) it is ready to be exported. The exporting process will create the necessary content files for inclusion in a Reader App, or for upload to a delivery server. To export a digital magazine, perform the following steps: Step 1. Access the Digital Magazine page and use the Search pane to display the magazine in the Story pane which should be exported. The Export button becomes available. Step 2. Click the Export button. (Optional, only when the server is set up for multiple device support.) The Export Options dialog box appears, showing all devices to which can be exported to. Step 2a. (Optional) Select one or more devices to export to. Step 2b. (Optional) Click OK. The export commences and its progress can be followed by a progress bar next to the Export button. Step 3. (Optional) To stop the export at any time, click the Abort Export button. When the export is completed, the Export Report dialog box appears, showing the result of the export. (See figure 3 on the next page.) Step 4. If any issues have occurred, verify and correct them. Then, export the content once more.
90
The content assigned for export is verified to see if it matches the Digital Magazine settings as set on the Issue Maintenance page (see the Enterprise 7 Admin Guide). In case a mismatch has been found (for instance: the Issue is set up to include Text View, but no landscape in portrait orientation or an article has been assigned for export), an error or warning is shown together with steps to rectify the problem. (See figure 3 on the next page.) Step 5. (Optional) Initially, the content is exported to the server. To download the content to the local system, do one of the following:
To download an exported magazine to a
vidually, click the Download button for the respective device. WARNING: the content of this folder will be erased during the download process.
The download process can be followed by a progress bar. The folder to which the content is downloaded to is defined in WWSettings.xml. (For details about setting these paths, see the Admin Guide, chapter 40, Digital Magazine Configuration.) To cancel the download(s), click Cancel. Step 6. (Optional) Modify the exported magazine.xml file to include the following functionality:
Include Custom Objects. (iPad Reader
App only) For more information, see chapter 7, Customizing the iPad Reader App section 9.6 Custom Objects.
For more information, see chapter 7, Customizing the iPad Reader App 9.2.2 Embedded Audio Controls. for display in the Audio Control panel. (iPad Reader App only) For more information, see chapter 7, Customizing the iPad Reader App 9.2.3 Audio Control Pop-Up. more information, see chapter 7, customizing the Reader App section 9.19.2, Hiding Embedded Video Controls.
playing. (iPad Reader App only) For more information, see chapter 7, Customizing the iPad Reader App section 9.19 Remove Video After Play.) Reader App versions 1.0 and 1.1 only) For more information, see chapter 5, Creating Content section 5.5.2.In a Web Element.
Figure 3. When the export encounters incorrectly assigned content, an error is shown and steps to rectify the problem are provided
91
4. Summary
In this chapter, you have learned how to use the Digital Magazine application in Content Station for verifying the content of a digital magazine and how to export it.
7.0.11 or higher for exporting the content, the dimensions of the issue will be read from the magazine.xml file. The page fitting feature will work as specified. sion older than 7.0.11, the dimensions of the issue have to be determined by looking at the dimensions of the actual page files. Page fitting will only work if the first page exists in both vertical and horizontal orientation and both are not long pages. In all other cases, the pages will be made to fit the width of the device.
Next steps
The exported files can now be included in the Reader application and made available on a delivery server so that it can be accessed from the tablet.
92
the content of the issues that will be viewed) users to use language
Enabling those features that you want your Localizing the Reader App into a particular
General App settings Navigation The Store The Library General App features
93
iPad
In this chapter you will learn all about customizing the iPad Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The following main customization areas are defined:
1. Required Tools
In order to perform the steps as outlined in this chapter, the following tools are required:
Xcode and the iPad Simulator. (both come
2. Loading a Project
The Reader App is supplied as an Xcode project. To load the project, perform the following steps: Step 1. Unzip the provided DigiMag file:
DigiMagiPadv2.xbxxxBasicStandard.zip DigiMagiPadv2.xbxxxProFramework.zip DigiMagiPadv2.xbxxxSubscriptions.zip DigiMagiPadv2xbxxxAppleSubscriptions.zip
as part of the Xcode and iPhone SDK, available from the iOS Dev Center: http://developer.apple. com/devcenter/ios/index.action). It is assumed here that both are correctly installed and that you are proficient in using these applications. Xcode version 4.0 is required for working with the iPad Reader App v2.x project. Use of previous versions:
Version 1.6 support: SDK version 4.2
Step 2. Open the Xcode project, located in the [folder name]_Template folder.
is not compatible with the iPad Reader App version 1.6. If this compatibility is still required, install any higher version of Xcode in a folder separate from the one in which version 1.6 is installed. to 1.9 require Xcode version 3.2.5; if this version is still required, have it installed in a separate folder.
_Template/Classes/
DigiMagKioskSettings.h file. (Reader App versions with Store functionality only) Settings related to connecting to the Store. For adding additional resources such as Subscription Offer pages, custom objects, etc. bundle file. Controls the Share Content functionality and contains version information. Localizable.strings file. For localizing the text as displayed in the Reader App. folder. For customizing images used for logos, backgrounds, icons, etc. DMSettings.plist file. For customizing the Reader App functionality, as well as colors and fonts.
_Template/Classes/Resources folder.
_Template/Classes/Resources/Settings.
_Template/Classes/Resources/
_Template/Classes/Resources/images
_Template/Classes/Resources/
94
iPad
Customizing the Reader App is mostly done by making changes to the following areas of the project:
3.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
Colors. The color of text and backgrounds. Fonts. Specific fonts used in various places
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-
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.
tional functionality to the Reader App. Currently, the following APIs can be used:
Analytics API for gathering information
Gesture API for receiving and controlling Navigation API for navigating to various
95
iPad
Table 3.1. Assets folder structure Folder Available assets closeButtonDefaultState.png noInternetConnectionBackground.png noInternetConnectionLabel.png images segments_shadow.png segments_stack_background.png transparentImageForFlipviewButton.png images/Bookmark Popup images/Audio Popup images/Share Popup images/TOC Popup images/Application images/Flipview images/Overlays images/Store Assets relating to the Bookmark List Assets for the Audio Control button in the top Toolbar and the Audio Control. Assets for the Content Sharing functionality. Assets relating to the TOC List General assets for the application itself. General assets for the Flipview area. Assets that overlay other objects. Assets relating to the Store. The TOC List appears when tapping the TOC button in the top toolbar. Including the app icon and splashscreens. The area that appears above the Navigation bar, showing the Story Viewer and Section Viewer. Including the Slide Show icon and Video icon. Only available in the Pro, Framework, Subscriptions and Apple Subscriptions Editions of the Reader App. Used for displaying the story as one continuous page in which the text can be made bigger or smaller. Additional information Image used as the default close button, used in various locations of the Reader App. Image shown when no internet connection is available on the iPad. The label shown when no internet connection is available on the iPad. The shadow between the top and bottom part of the Segments Overview page. The icon for an issue on the Library page, indicating that the issue contains Segments.
images/Textview images/Toolbar
Assets for the Text View mode. Assets that represent icons in the Navigation bar and top Toolbar.
96
iPad
3.2 Colors
Colors for objects and text are controlled via the DMSettings.plist file, located in the Resources folder. The following groups are defined:
TOC colors. Colors used for the TOC List. Application toolbar colors. The color of the
3.3 Fonts
Custom fonts can be defined for the following areas of the Reader App:
TOC List Bookmarks List Story Viewer / Page Viewer Subscription Sign in dialog box
Flipview colors. Colors used for the Flipview. Store colors. Colors used for the Store
Detailed information about the areas for which fonts can be modified for these features is provided in the remainder of this chapter. Custom fonts can also be used for the Text View mode, but these are controlled via configuration files as part of Enterprise Server. For configuration steps, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration. To define custom fonts by means of the Xcode project, perform the following steps: Any defined custom fonts are distributed and included in the Reader App; make sure that you have a proper license for each used font. Step 1. Create a folder somewhere on your system named fonts (all lower case). Step 2. Copy the fonts that are to be used as custom fonts to this folder. All fonts used must be TrueType fonts. Step 3. Open the Reader App project in Xcode. Step 4. Verify that no fonts folder is present in the Resources folder. (If there is a folder present, remove it).
Web Elements colors. Color settings related Page Sharing colors. Color settings related
Changing the color is done by changing the RGB values for a specific option in the DMSettings.plist file. Detailed information about each option is provided per feature in the remainder of this chapter. Using custom color settings can sometimes give unexpected results (such as the gradient disappearing). Be sure to verify the result in the Reader App (for more information about previewing customizations, see section 4. Previewing Customizations).
97
iPad
Step 5. Drag the fonts folder created in Step 1 onto the Resources folder. Step 6. In the dialog box that appears, perform the following steps: Step 6a. Select the check box Copy items into destination groups folder Step 6b. Choose the option Create Folder References for any added folder Step 6c. In the Targets list, select the check boxes for all targets.
defined. To define this property, perform the following steps: Step 9a. Right-click the setting and choose Add Row from the context menu. Step 9b. Replace the name New Item with Custom. Step 9c. In the Type column, choose type Boolean.
The added folder should appear as a blue folder. If the folder appears as a yellow folder, remove it and repeat the process again. Step 7. Access the Fonts section of the DMSettings.plist file. Step 8. For any of the TOC or Flipview options described above, set the custom font by doing the following: Step 8a. Select the Custom check box. Step 8b. In the Name value, enter the name of the font. (The name as it appears in the file name without the extension. For example: Vera.ttf would be entered as Vera.) Step 8c. In the Size value, enter the size of the font. Step 9. (Optional) It could be that a certain settings does not have the Custom property
98
iPad
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
is controlled by a setting in the Xcode project. (For more information, see section 5.1 Reader App Name.) include icons only, but the following assets also include text:
Buttons of the Navigation bar, Store and Labels which indicate that no internet
connection is available
To change the text for these assets, modify the respective file. (For more information, see section 6.4.4 Assets.)
Resources/Localizable.strings file. This
To change the text for any of these items, modify the content of the file as required.
99
iPad
Library
Localizable string
Dossier property
Server property
HTML page
External source
100
iPad
The error messages returned from the Content Delivery Platform have been extended. Error codes are used to better identify the area where the problem originates from. In the translations, the error codes are positioned in the %@ section of the string. If needed, this section can be removed so that the error code does not appear in the message. However, we strongly recommend to keep this section in the string, so that better technical support can be provided to the end user.
Root.strings file. This file can be used to
from their respective custom metadata properties. For more information about setting these values, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration.)
Issue Maintenance page. The Issue
Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header.
change the labelling of the version information for the Reader App as displayed in the Settings app of the iPad. The file can be found in the following location of the Xcode project: Resources/Settings.bundle/ [language code].lproj/Root.strings.
To add or change this text, change the Issue Description property on the Issue Maintenance page in Enterprise Server.
HTML pages. Dedicated HTML pages such
For more information, see section 3.4.3 Changing the Language and section 5.5 Version Numbering.
Dossier properties. Setting the properties
For more information, see appendix L, Subscription Server Support section 1.1.1. Web Pages.
External sources. Dialog boxes can hold
Viewer is derived from the Section Title property. thumbnail in the Flipview is derived from the Story Title property.
specific information originating from an external source. Although their source is not part of the Reader App as such, because they are displayed within the context of the magazine, it can appear to the user as part of the magazine. For example:
When a user subscribes to an iTunes sub-
tion below the story title in the Flipview is derived from the Description property.
To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken
scription, a dialog box appears asking for confirmation. The text in this dialog box also contains custom text (typically the name of the magazine to which the user wants to subscribe). This text is derived from the Display Name field of the Edit Language section, accessed through the Manage Your in App Purchases page on iTunes Connect.
101
iPad
as the Subscription Offer page in the Store, present specific information. Changing the text of these pages is done by modifying the relevant source files.
The following instructions do not apply to localizing the HTML Store. For information about localizing the Store, see appendix G, Customizing the HTML Store 3.6 Language. To add a supported language to the Reader App, perform the following steps: Step 1. In the Xcode project file locate the Localizable.strings file in the Resources folder. Step 2. Select the file and from the View menu, choose Utilities, followed by File Inspector. The File Inspector appears in the right-hand side of the screen. Step 3. In the File Inspector, expand the Localization group. All currently added localizations are displayed (English only by default). Step 4. In the bottom bar of the Localization group, click the + button.
102
iPad
A list appears with all available languages which can be added. Step 5. Choose the required language from the list. Step 6. Repeat steps 4 and 5 until all required languages have been added. Step 7. Build the app and view and verify the results in the Reader App. More information about localization for the iPhone/ iPad SDK can be found here: http://developer.apple. com/library/ios/#documentation/MacOSX/Conceptual/ BPInternational/Articles/InternatAndLocaliz.html.
To add a supported language to the Reader App, perform the following steps: Step 1. In the Xcode project file locate the Resources/Settings.bundle/[language code]. lproj folder. Step 2. Duplicate this folder. Step 3. Change the language code in the folder name. These should be a two- or three-letter code and comply to the ISO 639-1 or ISO 639-2 conventions.
103
iPad
3.5 Settings
Most of the customizations for the Reader App are performed in the DMSettings.plist file, which allows changing Reader App functionality, font settings and colors. Which settings these are and for which features they are used is discussed in the remainder of this chapter. For a full overview of all settings in the DMSettings file, see appendix E, The DMSettings File. For some specific features, no user interface is available yet (such as hiding video controls). For these scenarios, the exported magazine.xml file can be modified.
4. Previewing Customizations
Previewing any made customizations can be done by loading the Reader App into the iPad Simulator. This is achieved by building the Xcode project, after which the project is automatically opened within the simulator. When using the simulator, take note of the following:
Not all behavior or functionality can be simu-
the iPad as best as possible, it is itself a software application in which certain functionality or behavior may not always fully function. We advise to include an iPad which is assigned as a development device in your workflow of testing the Reader App.
104
iPad
Reader App assets. General assets used Intent set tings. Settings to conver t
Enterprise intent names to Reader App intent names. Reader App is suspended while a download is in progress, the download is continued.
the user to enable/disable background downloading of a magazine when the Reader App is closed. about the Reader App.
105
iPad
splash screen that is shown when the App is launched in landscape mode. This image needs to be 1024 pixels wide and 748 pixels high. This overrules the Default.png splashscreen for the landscape orientation. screen that is shown when the App is launched in portrait mode. This image needs to be 768 pixels wide and 1004 pixels high. This overrules the Default.png splashscreen for the portrait orientation. is shown when the App is launched. springboard for the app.
Default.png. The default splash screen that Icon.png. The icon that is shown on the iPad
taining the table of contents to the TOC button in the Navigation bar.
106
iPad
is a maximum of 10 minutes left in which the app is still allowed to execute code. execution. When resources (such as memory) are needed for a newly started app, our background downloading might be cut off early.
http://developer.apple.com/library/ios/#documentation/ iphone/conceptual/iphoneosprogrammingguide/ BackgroundExecution/BackgroundExecution.html Shortly before the time limit is reached, a message is displayed to the user, allowing the user to continue or cancel the download. When the user does not respond to the message, the download is cancelled; the download is resumed though at the point where it was left off the next time the download is continued. The message can be localized by modifying the following strings:
Your inactive magazine download is about to
Settings_SharingDisabled_3GDisabled.
bundle. Use this bundle if both Content Sharing and 3G Downloading are disabled. this Bundle if 3G Downloading is enabled and Content Sharing is disabled.
Settings_SharingDisabled.bundle. Use
To implement this functionality, perform the following steps: Step 1. Enable the following DMSetting:
Store/Enable 3G Downloading
Continue
Step 2. (Optional, only when any of the nondefault bundles is to be used) Replace the default Settings.bundle file by doing the following: Step 2a. Remove the old Settings.bundle file from your project (also remove it from the file system).
107
iPad
Step 2b. In the provided template project folder, locate any of the above mentioned bundles. Step 2c. Copy this file to a different location (such as the Desktop). Step 2d. Rename the file to Settings. bundle. Step 2e. Drag the new Settings.bundle fie onto the Resources folder in the template project in Xcode. A dialog box will appear.
into destination groups folder (if needed). 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
108
iPad
Labels
The labels in the settings screen on the iPad are customizable by performing the following steps: Step 1. In your Xcode project, locate the Settings.bundle file in the Resources folder. Step 2. Expand the Settings.bundle file. For each language, a separate folder is provided. If a new language is required, duplicate an existing folder and modify the language code in the folder name by changing it to a two- or three-letter code which is compliant to the ISO 639-1 or ISO 639-2 conventions.
Application version
To set the application version, perform the following steps: Step 1. In the Reader App project, access the DigiMag_Template-Info.plist file. Step 2. Modify the Bundle Version value.
Framework version
Step 3. Select the Root.plist file. Step 4. Expand Item 5 (Group - Version Information) and edit the available key values as required.
109
iPad
When the user taps the OK button in the displayed message (see above), the App Store is accessed. The URL is set through the following DMSetting:
Update/App Store Link
URL example: http://itunes.apple.com/us/app/woodwing/ id375764844?mt=8&uo=4 Use the Apple Link Maker to create a direct link to the Reader App in the App store: http://itunes.apple.com/linkmaker.
appendix F, Using the Content Delivery Platform section 3.4.2, Adding an Issue in Segments and section 4.1, Configuring Reader Apps. Verification.
To change the displayed message, modify the following string in the Localizable.strings file of the project: /* This message is shown when the app is an older version than required to view the new issue */ "App update available description" = "This issue requires a newer version of this Reader App. Click OK to update it via the App Store";
110
iPad
6. Navigation
The flexibility of the Reader App allows you to offer the user various tools and methods for navigating the content:
Story navigation vs page navigation Orientation lock Right-to-left support Navigation bar Flipview Top Toolbar Hotzones Gestures
user swipes horizontally (from left to right or right to left) page), the user swipes vertically (up/down or down/up)
Each aspect is explained in the following sections. Other Reader App features such as the TOC List and Bookmarks can also be seen as navigation methods, but these are described in section 9. General App Features.
Page navigation. In this configuration, naviTo navigate from page to page, the user
swipes horizontally (from left to right or right to left) using one finger swipes horizontally (from left to right or right to left) using two fingers
For more information about Story Navigation and Page Navigation, see chapter 3, The Concept section 3, Stories, Pages, Sections and Segments. By default, the Reader App is set to Story navigation.
111
iPad
To enable Page navigation, set the following option in the DMSettings.plist file to Yes:
Navigation/Horizontal page navigation
To enable two-finger swipe (Page navigation only), set the following option in the DMSettings.plist file to Yes:
Navigation/Scroll sections with two finger
swipe
To ease navigation when the Reader App is set to Page navigation, you might want to enable the Page Scrubber so that the user can quickly browse the pages displayed in the Page Viewer. To enable the Page Scrubber, set the following option in the DMSettings.plist file to Yes:
Flipview/Page scrubber enabled
Possible values:
Landscape. For displaying only pages in
When the setting is left empty or removed, the orientation lock is disabled and pages in both landscape and portrait orientation are shown.
112
iPad
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
Assets. The icons of the buttons. Colors. The color of the Navigation bar.
113
iPad
6.4.2 Visibility
By default, the Navigation bar only appears when the user taps any part of the screen (see section 6.4.1 Tap Area). The Navigation bar can also be made to permanently display by setting the following option in the DMSettings.plist file to Yes:
Navigation/Bottom toolbar always on
Set the option Tap bottom to show (Optional) In the Touch Areas section,
The Navigation bar now only appears when the user taps the defined area.
The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
1
114
iPad
define the height of the area in pixels by modifying the bottom area height value.
Note that the Navigation bar obscures the bottom 50 pixels of the page content. When making use of this feature, inform your designers so that no content or functionality (such as Hotspots, links, Web Elements, etc) is placed in that area.
6.4.3 Items
The Navigation bar can contain the following buttons:
Buy. (Pro, Framework, Subscriptions, and
The buttons are managed by means of the following option in the DMSettings.plist file:
All buttons except the Forward/Back
Apple Subscriptions Editions only) For navigating to the Store. Apple Subscriptions Editions only) For navigating to the Library.
buttons: Navigation/ToolbarItems.
The value of each item is linked to specific functionality and should not be changed.
Forward/Back buttons: Navigation/History
Home. For navigating to the magazine cover. TOC. For navigating to the table of contents
buttons in bottom toolbar. Included in the Navigation bar by enabling the following setting: toolbar
page.
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
top Toolbar is also enabled, the Back/ Forward button will only be shown in the Navigation bar and not in the top Toolbar. user accesses the Store or Library.
These buttons are disabled when the The Navigation bar has room for dis-
Subscriptions Editions only) For bringing up an external page with subscription account details. the previous or next visited page.
An additional Fullscreen Overlay button can be added to the Navigation bar. For more information, see section 9.8 Fullscreen Overlay.
playing up to 9 buttons. By default, 8 buttons are already displayed; adding the Back and Forward buttons would result in 10 buttons to be displayed, which dont fit. Therefore, one button needs to be removed from the list by selecting it and deleting it. (Adding a button can be done by right-clicking an item, choosing Add Row from the context menu and entering the correct Value for that button.)
115
iPad
To rearrange the order in which the items appear in the Navigation bar, drag each key to its required position. The Back/Forward buttons are always positioned to the far left of the Navigation bar, except when the Reader App is configured for right-to-left support when they are positioned to the far right.
116
iPad
6.4.4 Assets
The assets that appear in the Navigation bar are stored in the images/Toolbar folder. For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions. The Navigation bar has a 1-pixel high dark row at the top. When creating or modifying a button, make sure that this button has a 1-pixel high transparent row at the top so that the underlying dark row of the Navigation bar stays visible. The Toolbar assets are available as PDF files which can be customized by using Illustrator. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. The following assets can be customized: An additional Fullscreen Overlay button can be added to the Navigation bar. For more information, see section 9.8 Fullscreen Overlay.
accountIcon.png. The icon for the Account
button.
button. (This button is normally named Contents.) Flipview button in its selected state. (This button is normally named Contents.)
ton, linking to the cover of the magazine. Home button in its selected state. button.
homeSelectedIcon.png. The icon for the libraryIcon.png. The icon for the Library
When tapping the Flipview button, the Story Viewer and Section viewer appear above the Navigation bar
1
A
A H
B
C
C Home icon
D
D TOC icon
E
E
F Flipview icon
F
G Feed icon
H
G
Library icon
Help icon
117
iPad
6.4.5 Colors
The following Navigation bar colors can be customized:
Application toolbar. The color of the
storeIcon.png. The icon for the Store button. storeSelectedIcon.png. The icon for the
Navigation bar.
tocIcon.png. The icon for the Contents buttocSelectedIcon.png. The icon for the
the center of the top Toolbar (typically a logo). Needs to be maximum 45 pixels high; the width is variable, but the other icons in the top Toolbar should be taken into account. This image is not provided by default; adding an image into the Toolbar folder and named topToolbarLogo.png automatically adds it to the top Toolbar.
118
iPad
6.5 Flipview
The Flipview appears when the user taps the Contents button in the Navigation bar. It shows the Flipview Header, the Story Viewer / Page Viewer, the Page Scrubber (optional), and the Section Viewer (see figure below).
The appearance of the Flipview can be modified by changing any of the following:
Assets Color Fonts Header Thumbnail size Thumbnail awareness Margins Story title Story bullets Story description Page scrubber
C D
Flipview Header
Page scrubber
Section Viewer
Figure 6.5. The Flipview appears when tapping the Contents button in the Navigation bar
119
iPad
6.5.1 Assets
The Flipview assets are stored in the root images folder and the images/Flipview folder. For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions. Various Flipview assets are available as PDF files which can be customized by using Illustrator. They are part of a package which can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/ products/Enterprise%207.0.x/Software. The following assets can be customized (see figure 6.5.1 on the next page:
flipviewSelectedSectionButton.png. This
asset shown when a Section is selected in the Section viewer. This asset needs to be 1 pixel wide and 23 pixels high.
pageScrubberBackground.png. The
background image behind the Page Scrubber. This asset needs to be 1024 pixels wide and 37 pixels high. Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.
images folder
transparentImageForFlipviewButton.
png. Image used for the selected status of a thumbnail in the Flipview.
images/Flipview folder
image of the Flipview. Dimensions: This asset needs to be 1024 pixels wide. The height depends on the size of the thumbnails that are being used. story name. This asset needs to be 9 pixels wide and 9 pixels high. ton. This asset needs to be 21 pixels wide and 21 pixels high.
to the right of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.
flipviewSectionBackground.png. The
background image for the Sections viewer. This asset needs to be 23 pixels high.
120
iPad
the left of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.
F G
A F
B G
pageScrubberTrackLeft
121
iPad
6.5.2 Colors
The following Flipview colors can be customized:
Flipview background color. The color of
6.5.3 Fonts
For an explanation about how to change the color of the fonts and how to assign custom fonts, see section 3.3 Fonts. The following Flipview fonts can be customized:
Flipview title font. Font settings for the Story
the Flipview background, shown behind the story previews. To get a transparent color, set an alpha value lower than zero. header and issue description shown at the top. text in the Section viewer.
Flipview text. The color of the Flipview Flipview section text color. The color of the Flipview section text color selected.
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.
the border for an empty thumbnail in the Page Viewer / Story Viewer.
When the progressive download functionality is used, download information is also displayed in the Flipview in the form of progress bars and text labels. For more information about customizing these components, see section 9.7.2 Progressive Downloading.
122
iPad
The color of the text in the Section viewer in its selected state.
6.5.4 Header
The Flipview Header contains the following components (see figure below):
Flipview title. For displaying the title of the
For an overview of the exact dimensions of this asset, see appendix C, Image Dimensions.
magazine. This can be modified by changing the following string in the Localizable.strings file: /* The flip view name that is displayed */ "Flip view" = "FLIP VIEW";
The Flipview Header components can be hidden by deselecting the following option in the DMSettings.plist file:
Flipview/Show flipview header
Changing the look of this button can be done by modifying the following asset:
A Flipview/flipViewCloseButton.png
Flipview title
Issue description
Close button
Figure 6.5.4. The Flipview Header can be used to display additional information about the magazine
123
iPad
information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server. The font can be customized by modifying the following setting in the DMSettings.plist file:
6.5.7 Margins
The margins between each image and the margins between the images and the Flipview Header can be controlled by the following settings in the DMSettings.plist file:
Flipview/Margins/Pages top margin in Flipview Flipview/Margins/Flipview thumb margin
height height
To change the thumbnail size, enter the required size in pixels for each setting. These settings are directly linked to the thumbheight setting as part of the DigitalMagazineDevice Server feature in the configserver.php file. (See the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration Step 1.2 Configuring configserver.php). Verify both settings to make sure that the expected result is acquired.
To change the margins, enter the required size in pixels for each setting.
aware
With this setting enabled, thumbnails in portrait orientation are shown when the device is rotated to portrait mode and thumbnails in landscape orientation are shown when the device is rotated to landscape mode.
124
iPad
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.
A
Changing the appearance of the Story bullet can be done by modifying the following asset:
Flipview/flipviewBullet.png
Figure 6.5.8. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom) 125
iPad
The text that is displayed is taken from the Description property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
B
A B
Figure 6.5.10. The Description property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
126
iPad
Changing the appearance of the Page Scrubber can be done by modifying the following assets (found in the Flipview folder): For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
pageScrubberBackground.png. The
background image behind the Page Scrubber. This asset needs to be 1024 pixels wide and 37 pixels high. Scrubber button. This asset needs to be 26 pixels wide and 26 pixels high.
pageScrubberTrackLeft.png. The image to Figure 6.5.11. The Page Scrubber can be used to quickly scroll through the pages of the magazine
The Page Scrubber can be enabled by setting the following DMSettings to Yes:
Flipview/Page scrubber enabled
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.
to the right of the Page Scrubber button. This asset needs to be 32 pixels wide and 9 pixels high. 10 Pixels of each side will remain the same, but the middle section will stretch.
127
iPad
Page scrubber
6.6.1 Availability
By default, the top Toolbar is disabled. It can be enabled by setting the following DMSetting to Yes:
Navigation/Enable top toolbar
Toolbar.
when the user taps the screen, or always have it visible. in order to display the top Toolbar. that appear in the top Toolbar.
Tap area. The area which the user should tap Items. The number of buttons and images Assets. The icons of the buttons and images. Colors. The color of the top Toolbar.
128
iPad
6.6.2 Visibility
By default, the top Toolbar only appears when the user taps any part of the screen (see section 6.6.3 Tap Area). The top Toolbar can also be made to permanently display by setting the following option in the DMSettings.plist file to Yes:
Navigation/Top toolbar always on
Note that the top Toolbar obscures the top 48 pixels of the page content. When making use of this feature, inform your designers so that no content or functionality (such as Hotspots, links, Web Elements, etc) is placed in that area.
Set the option Tap bottom to show (Optional) In the Touch Areas section,
The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
1
129
iPad
define the height of the area in pixels by modifying the bottom area height value.
6.6.4 Items
The top Toolbar can hold the following items:
Back/Forward buttons. For navigating to
disabled.
TOC List button. For displaying the TOC List. Audio Control button. For displaying the
Audio Control.
Image icon. Typically used for displaying a Share Content button. For displaying the
The logo in the center of the toolbar is added by adding an image named topToolbarLogo.png into the images/ Toolbar folder.
G
A
A D F
Back button B Forward button C TOC List button Audio control button E Bookmarks List button Image icon G Share content button
The inclusion of most buttons is controlled by enabling/ disabling specific settings in the DMSettings.plist file:
Back/Forward buttons: are included by
default, but can be included in the Navigation bar instead by setting the following setting to Yes: toolbar
130
iPad
6.6.5 Assets
The following assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
Toolbar/backIcon.png. The icon for the Toolbar/backSelectedIcon.png. The icon
Bookmark Popup/bookmarkTopBarIcon.
Bookmark Popup/bookmarkTopBarSe-
lectedIcon.png. The icon for the Bookmark List button in its selected state. the center of the top Toolbar (typically a logo). Needs to be maximum 45 pixels high; the width is variable, but the other icons in the top Toolbar should be taken into account. This image is not provided by default; adding an image named topToolb a r Lo g o.p n g i nto th e To o l b a r fo l d e r automatically adds it to the top Toolbar.
Back button image. Needs to be 50 pixels high. for the Back button image in its selected state. Needs to be 50 pixels high.
Toolbar/forwardSelectedIcon.png. The
icon for the Back button image in its selected state. Needs to be 50 pixels high.
When the Reader App is enabled for rightto-left support, the assets for the Back and Forward buttons need to be switched, else the direction of the arrow in the images is wrong. For more information, see section 6.3 Right-ToLeft Support.
Toolbar/tocTableIcon.png. The icon for the
Right-to-left support
Share Popup/shareTableSelectedIcon.
png. The icon for the Share Content button in its selected state.
Toolbar/tocTableSelectedIcon.png. The
icon for the TOC List button in its selected state. icon for the Audio Control button when no audio is available.
Audio Popup/audioTopBarSelected-
Icon.png. The icon for the Audio Control button in its selected state (when audio is being played).
131
iPad
6.6.6 Colors
The following top Toolbar colors can be customized:
Application toolbar. The color of the top
6.7 Hotzones
Hotzones are areas to the left, right, and bottom of the screen which can be tapped in order to navigate the magazine.
Toolbar.
Figure 6.7. Hotzones (shaded in red) are specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page
(or the next page when the Reader App is set to Right-to-left mode) bar.
Bottom area: for bringing up the Navigation Right area: for navigating to the next page (or
the previous page when the Reader App is set to Right-to-left mode)
132
iPad
Each area can be controlled by the following options in the DMSettings.plist file:
Hotzones/ Tap bottom to show toolbar.
6.8 Gestures
Navigating from one page or story to another can be done by using finger gestures. Depending on the configuration of the Reader App (see section 6.1 Story vs Page Navigation), one or two fingers can be used:
the Hotzones to the left and right of the screen. or width of the different Hotzones.
Horizontal navigation
App has been configured for story navigation as well as for page navigation:
Story navigation: takes the reader to the
Page navigation: takes the reader to the Two-finger swipe. Works only when the
Reader App has been configured for page navigation; it takes the reader to the next or previous story.
Vertical navigation
App has been configured for story navigation only: next or previous page.
133
iPad
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
DMSettings file
Note the inclusion of the OS reference in the file name. This allows for different settings and styling per OS (Android, iOS, etc.
Store/HTML Store fallback URL: The URL
Possible values:
Blank: if a packaged HTML Store as part
of the Reader App build is used it is not needed to define a fallback page. file. This file is loaded when the external Web Store is not accessible.
134
iPad
pointing to a local HTML file. This file is loaded when the HTML Store is not accessible.
DigiMagKioskSettings File
Configuration settings are controlled by the following settings in the Classes/DigiMagKioskSettings.h file:
DigiMagKioskLibrary_URL. The URL to
to always have the Store opened when the Reader App is launched. user to resume a download when it has been interrupted.1 if the Reader App should start the Store in Grid view or Single Issue view.
product name as defined on the Kiosk Server. secret key as defined on the Kiosk Server.
tion version. This can be used to exclude an issue on the Kiosk Server side. This version number needs to be higher or equal to the issue version defined in the Kiosk Server, else the issue cannot be downloaded. future version.
Store view, allowing the Reader App to filter issues as defined by the filter data on the Content Delivery Platform. downloading via a 3G network. Store Filter.
Name. (Used for custom development, do not change.) Responsible for buying and displaying all issues in the Store. This class takes care of connecting to iTunes and taking care of the payments.) Name. (Used for custom development, do not change.) Takes care of delivery of all content (issues and movies).
DigiMag_ContentServerManagerClass-
In order for this feature to work, the content server needs to support the optional HTTP Range header. (The WoodWing hosted solution supports this feature.) When unsure whether a content server supports resumable downloads, leave this feature disabled.
1
135
iPad
Localizable strings
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
The values shown in the Filter itself are defined on the Content Delivery Platform. For more information, see appendix F, Using the Content Delivery Platform.
136
iPad
bar in the store and library view. The 768 pixels in the middle are used when the device is in portrait mode. The whole image is visible when the device is in landscape mode.
Assets
Part of the Library assets are the same ones used for the Store, although some are specific to the Library itself. The following assets can be customized (for examples, see figures on the next pages). For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
segments_shadow.png. The shadow
Store/storeNoInternetErrorBackground.
png. Shown when no internet connection available. The background is repeated across the whole width. The label shown on top of the error background. It is aligned to the center. For the best results use a label with a transparent background.
Store/storeNoInternetErrorLabel.png.
between the top and bottom part of the Segments Overview page. icon for an issue on the Library page, indicating that the issue contains Segments. used for closing or deleting a component.
segments_stack_background.png. The
shadow as shown below the Library toolbar. below the issue covers.
137
iPad
A B C D
A E
storeHeader issueShadow
B F
segmentsstackbackground
Note that the bottom section of the Library in figure 8.2a is a color (Library background color), and not an image. For more information about Library colors, see section Colors.
138
iPad
segmentsshadow
Note that the top and bottom section of the Library Segments Overview page in figure 8.2b are colors and not an images. For more information about Library colors, see section Colors.
139
iPad
Colors
Fonts
background color. Background color for the top half of the Segments Overview page.
For an explanation about how to change the color of the fonts and how to assign custom fonts, see section 3.3 Fonts. The following Library fonts can be customized:
Library issue download progress font.
bottom background color. Background color for the bottom half of the Segments Overview page. color. The color of the issue name in the Library. bytes color. The color of the string that indicates the download progress in bytes. ber color. The color of the issue number in the Library. color. The color of the Library background.
The font of the download progress label in the Library. font of the download status label in the Library. Available issues: text. issue in the Library.
Library issue download status font. The Available issues text font. The font of the Library issue name font. The font of an Library downloaded bytes font. The font
of the downloaded bytes label in the Library. issue number in the Library.
load progress color. Color of the string that indicates the progress of the download. load status color. Color of the string that shows the status of the download.
140
iPad
8.2 Text
The customizable Library strings can be found in the Store section of the Localizable.strings file.
Downloading
When the non-progressive download method is used (not enabled by default, for more information see (section 9.7.2 Progressive Downloading), the following feature can be configured in the DMSettings.plist file:
Library/Show progress in megabytes.
Installing
As of version 1.8, the non-progressive download process will always display the installation progress. T he following DMSet ting has therefore been discontinued:
Library/Enable install progress
Opening
To have an issue or Segment open automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads), enable the following DMSetting:
Library/Auto open magazine
141
iPad
By default, the download progress is shown in percentages. To display it in megabytes, select this option.
Filter button
Filter list
Figure 8.3. The Library filter allows a user to filter the Library by defined keywords
142
iPad
To enable the filters in the Library, set the following DMSettings to Yes:
Library/Enable library filter Library/Enable library segment filter
The customizable Library Filter strings can be found in the Store section of the Localizable.strings file.
The values shown in the Filter itself are defined on the Content Delivery Platform. Note that the content of the Store filer (see section 9.16 Store Filter) is used as the source for the Library filter. For more information, see appendix F, Using the Content Delivery Platform. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:
Upload your magazine content as a Segment
using the WoodWing Content Delivery Platform and on the Segment Details screen, choose the keyword which should be assigned to the magazine.
For example: when a filter has been set up for distinguishing sports and finance publications, choose Sports from the available list when uploading publications relating to sports, and Finance when uploading publications relating to finance.
143
iPad
144
iPad
9.1 APIs
APIs can be used to add additional functionality to the Reader App. Currently it is possible to implement the following APIs:
Analytics API. For gathering information
about how a user uses the Reader App. gestures sent from the Reader App.
Gestures API. For receiving and controlling Navigation API. For creating their user
145
iPad
Gestures
The Gesture Manager singleton acts as the interface between the app and the external code and contains functions for managing gesture delegates. These delegates will be notified when an gesture has occurred in the app. Delegates must conform to the supplied protocol. Delegates can also indicate via the appropriate protocol methods whether they are able or willing to handle a particular gesture and if they want to block the propagation of the gesture to the navigation or object elements in the Reader App. It is also possible to add custom gestures to the Gesture Manager. Currently the Reader App only supports a single tap and a long tap. When another gesture is needed it is possible to add it via the Gesture Manager. Note however that the delegate, target and action of the supplied gesture will be reset by the Gesture Manager. All gestures are routed through the Gesture Manager, it is not possible to receive them directly. For an overview of the available classes, see appendix I, Gestures API.
Data
The Data Manager singleton holds a reference to the current issue (the issue that is currently loaded in the Reader app). The issue object is the main entry point for querying the data structure. It contains methods to fetch lists of sections, stories and pages. An issue contains one or more stories, each holding up to two sets of pages: one with pages in landscape orientation and one with pages in portrait orientation. Each layout always contains one page. However sometimes no portrait layout has been provided. In those situations, the first landscape page is returned when the portrait page is requested. The correct set of pages for the current layout should be queried. This orientation can be obtained from the Navigation Manager. The story and page objects also contain references back to their parent (issue and story respective). These can be used to navigate back in the data chain.
146
iPad
Navigation
The Navigation Manager singleton contains methods that enables you to navigate through the currently loaded magazine. It provides methods to navigate to pages, stories and sections. It also provides an interface to the back and forward functions of the Reader App. The Navigation Manager also provides access to the current state of the Reader App such as the current layout orientation and the current visible page. A delegate can be added to the Navigation Manager. This delegate must adhere to the Navigation Manager protocol. When added, this delegate will be notified when an issue loads, a page change is done, and when the layout orientation changes. For an overview of the available classes, see appendix J, Navigation API.
9.2 Audio
For the playback of audio, the following features can be customized:
Overlay assets Embedded audio controls Audio control pop-up
147
iPad
audioPlayEnabledIcon
The audio assets are stored in the Overlays/Audio folder. The following assets can be customized. For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
audioPlayDisabledIcon.png. The audio
icon when a streamed audio file is not available or when no internet connection is available. shown when the audio file is not being played. icon when the audio file is being played.
Step 3. In the audio id section, add the following property: <backgroundaudio>true</backgroundaudio> Possible values: true: controls will be hidden false: controls will be shown1 Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=95> <url>images/story_23/audio_95.mp3</url> <autoplay>false</autoplay> <backgroundaudio>true</backgroundaudio> </audio> </object>
The controls are also shown when the backgroundaudio property is not included
1
148
iPad
Audio title. Title of the song being played. Audio description. Short description of the
toolbar. Makes the Audio Control button available in the top toolbar. the top Toolbar.
for embedded audio files only, not for files streamed from the Web.)
A B C D
F
C F
Audio
149
iPad
The Audio Control functionality is controlled by means of the following settings in the DMSettings.plist file:
The Audio Control assets are stored in the Audio Popup folder. The following assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
audioControlBG.png. The background B
the button when no audio has been loaded. button in the top Toolbar.
C E
image to the right of the Control Slider button. image to the left of the Control Slider button. for the Control Slider button.
audioControlSliderBGLight.png. The audioControlSliderButton.png. The icon audioControlStop.png. The icon for the
Audio Control button in the top Toolbar when no audio is available. for the Audio Control button in the top Toolbar in its selected state (when audio is being played).
150
iPad
audioControlSliderBGDark.png. The
The customizable Audio Control strings can be found in the Audio Control section of the Localizable.strings file.
To add the Audio Title and Audio Description to the Audio Control, the exported magazine.xml file needs to be edited as follows: Step 1. Open the exported magazine.xml file in a plain-text editor. Step 2. Locate the created audio object by searching for <type>audio</type>. Step 3. In the audio id section, add the following properties: <title>Audio title</title> <description>Audio description</description> Example: <object> <id>95</id> <type>audio</type> <x>63</x> <y>573</y> <width>35</width> <height>31</height> <audio id=95> <url>images/story_23/audio_95.mp3</url> <autoplay>false</autoplay> <title>Audio title</title> <description>Audio description</description> </audio> </object>
151
iPad
9.3 Bookmarks
A Bookmarks List button can be made available in the top Toolbar for providing users access to the Bookmarks List. The Bookmarks List allows users to bookmark one or more stories in order to easily return to these stories at any stage. The Bookmark functionality consists of the following components:
A button in the top Toolbar with which the
Makes the Bookmarks button available in the top toolbar. the top Toolbar.
152
iPad
bookmarkTopBarSelectedIcon.png. The
bookmarkTopBarSelectedIcon
bookmarkAdd
153
iPad
icon for the Bookmark List button in the top Toolbar in its selected state.
Bookmark cell story title font. Font of the Bookmark cell story description font.
154
iPad
the height of the Bookmark List. the width of the Bookmark List.
155
iPad
page or the thumbnail of the page as shown in the Story Viewer / Page Viewer. a page.
Part of a page. A manually defined part of URL. A link to an external Web site, typically
The Content Sharing functionality is accessed by tapping the Share Content button in the top Toolbar. Enabling the use of this feature involves performing the following steps:
Adding a custom metadata property to
Enterprise server
Configuring the DigiMagSettings.h file Cleaning the project targets Enabling the functionality Changing the assets Changing the colors Localizing the text
156
iPad
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.
appSecret with the retrieved information from Facebook: NSString* facebookAppID NSString* facebookAPIKey NSString* facebookAppSecret
= @"secretkey";
157
iPad
handle of the Area Selector in its selected state. the Area Selector when not selected.
Enables/disables the Share Content button in the top toolbar. enabled, the Twitter service is available as an option in the Share Content list.
handle of the Area Selector in its selected state. Area Selector when not selected. Content button in the top toolbar.
sharing_mover.png. The Move handle of the shareTableIcon.png. The icon for the Share shareTableSelectedIcon.png. The icon for
enabled, the Facebook service is available as an option in the Share Content list. When enabled, the email service is available as an option in the Share Content list. disables the top Toolbar.
the Share Content button in the top toolbar in its selected state. service when it is available.
158
iPad
of the info page (the screen shown when the user needs to make a choice of sending a full page or part of a page). ground of the info page title area (the screen shown when the user needs to make a choice of sending a full page or part of a page).
A C
Figure 9.4.6a. The Content Sharing List assets A B C sharingcorner B sharingmover sharingcornerselected
A C
159
iPad
/* TwitPic sharing text format */ "TwitPic sharing text format" = "%1$@ (%2$@, %3$@)"; %1$@ = text entered by the user %2$@ = the Web address as provided by the story Hyperlink (automatically shortened) %3$@ = the shared image Each value can be used at any location in the string, used multiple times, or left out completely. /* Email sharing text format */ "Email sharing text format" = "%1$@ - %2$@"; %1$@ = the Web address as provided by the story Hyperlink %2$@ = Story title Each value can be used at any location in the string, used multiple times, or left out completely. /* Email sharing subject format */ "Email sharing subject format" = "%1$@"; %1$@ = Story title The value can be used at any location in the string, used multiple times, or left out completely. "The article has been posted." = "The article has been posted."; "Couldn`t post the article." = "The article could not be posted."; "Characters left" = "Characters left";
160
iPad
9.5.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
freed up. When the external component is active (and as a result, the magazine content is not shown), there is no need to keep any images and or other visual data in memory. started early, preferably in the application delegate. holder for the UIViews that are returned by the API.
161
iPad
(UIView *)openLibrary:(id)sender backSelector:(SEL)selector; Will return a UIView containing the Library. The parameters sender and selector are both used as a way to return to the original application. (UIView *)openReader:(id)sender backSelector:(SEL)selector; Will return a UIView containing the reader. The component will continue with the latest downloaded issue. (UIView *)openReader:(id) sender backSelector:(SEL)selector withIssue:(DMExternalIssue *) externalIssue; Not implemented at the time of writing.
mentation) The protocol for asynchronous calls. Implement this protocol for receiving feedback from the DMExternal object.
tation) The external representation of an issue object. 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 *)externalIssue showPreviewPopup:(BOOL)showPreview; Will return a UIView containing the Store in single-issue view mode. The externalIssue parameter is not used in this implementation. The parameters sender and selector are both used as a way to return to the original application. The showPreviewPopup makes it possible to show the preview of the latest issue.
162
iPad
9.5.3 Implementation
Below are a few implementation examples. We recommend to make the DMExternal and the UIView that results from the API calls ivars. This way they are more easily manageable. Includes // external components #import <DigiMagLibrary/DMExternal.h> #import <DigiMagSharedLibrary/DMSLOrientationManager.h> The DMSLOrientationManager, also a public header, is required to set the initial orientation state of the component. CGRect frame = CGRectMake(0, 0, 768, 1004); [DMSLOrientationManager orientationManager].currentDeviceOrientation = UIDeviceOrientationPortrait; if( UIInterfaceOrientationIsLandscape(self.interfaceOrientation) ) { frame = CGRectMake(0, 0, 1024, 748); [DMSLOrientationManager orientationManager].currentDeviceOrientation = UIDeviceOrientationLandscapeLeft; } It is most important to execute the code above first, before initializing the DMExternal object. // create the digital magazine view if( digitalMagazineExternal == nil ) digitalMagazineExternal = [[DMExternal alloc] init]; Next, create the DMExternal objec, and put it into the ivar. digitalMagazineExternalView = [digitalMagazineExternal openStore:self backSelector:@ selector(back) ]; // set the calculated frame [digitalMagazineExternalView setFrame:frame]; // add the subview to the view [self.view addSubview:digitalMagazineExternalView]; [self.view bringSubviewToFront:digitalMagazineExternalView];
163
iPad
Next, call the appropriate API call, and save the returning UIView into an ivar. After that, set the frame and add the subview to the view. All the code above should be called each time a view is requested. When the user is done, the back selector will be called. The implementation should look as follows: - (void)back { // clean up the view [digitalMagazineExternalView removeFromSuperview]; digitalMagazineExternalView = nil;
} Here, the ivars are cleaned up and released. This should be done each time the back selector is called (to avoid memory leaks).
Additional notes
Be sure to implement the following UIViewController delegate in the parent view, so that the appropriate auto rotation callbacks are supported. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return YES; }
164
iPad
Table 3c on the next page shows the members that are available from the DMCustomObjectBase. Step 6. Create a plist resource file named DMCustomObjects.plist. Step 7. In the created plist file, create an entry with the following settings:
Value: your newly created class name, Key: a string you can use to refer to your
class.
For example: <objects> <object> <type>custom</type> <x>10</x> <y>10</y> <width>200</width> <height>100</height> <customobject> <classtype>WWminimalObj</classtype> <parameters><![CDATA[TestButton]]> </parameters> </customobject> </object> </objects>
165
iPad
Step 8. In the magazine.xml file, create an entry for your custom object and set classtype to the key of the entry in the plist file.
Table 9.6a. DMCustomObjectProtocol methods Method (void)loadObject (void)viewLoaded (void)run (void)destroy Function Called immediately after initialization. Can be used to initialize the custom objects own members. The viewControllers view is not yet available here. Called after the viewControllers viewDidLoad method was invoked. Perform actions that depend on the controller view here. Called after all initialization and load events have occurred. Use this to do work in the custom object, such as starting timers. Called when the object is removed from the object stack of the page. This normally occurs when the user navigates to another page. Use this to do custom cleanup work. However also include the standard dealloc method to send the appropriate release calls.
Function When this method returns YES, the bottom Navigation bar will not pop up when the user taps the screen. Test if this object can handle the gesture. The standard implementation is: if( CGRectContainsPoint([self.view bounds], [gesture locationInView:self.view]) ){ return YES; }else{ return NO; } Here useful things with the gesture can be performed. When this method returns YES the gesture will not be propagated to underlying objects.
Table 9.6c. Available members from the DMCustomObjectBase Method parameters objectFrame Function String with the parameters from the XML file. Since this data can be anything it needs to be processed in the custom class. The frame of the object in the parent object view.
166
iPad
<objects> <object> <type>custom</type> <x>33</x> <y>78</y> <width>132</width> <height>153</height> <customobject> <classtype>WWminimalObj</classtype> <parameters> <![CDATA[TestButton]]> </parameters> </customobject> </object> </objects> The <classtype> element refers to the key of the mapping to the class in the DMCustomObjects.plist file. The <parameters> element holds parameters that can be optionally supplied. Step 5. Repeat this process for all objects which should act as a Custom Object.
167
iPad
loads. Forces the Reader App to make use of the non-progressive download feature. the step of unzipping the downloaded issue. Shows the progress in megabytes.
The customizable Downloading strings can be found in the Store section of the Localizable.strings file.
Changing colors
168
iPad
Downloading label in the Page Viewer / Story Viewer. load percentage label in the Page Viewer / Story Viewer. download percentage label on a page.
The following Progressive Download assets can be customized: For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions. Images/Store (dimensions: 75x40 pixels): libraryDownload.png. The Start Download button.
libraryDownloadPause.png. The Pause
The following fonts can be customized: For an explanation about how to change the color of the fonts and how to assign custom fonts, see section 3.3 Fonts.
Inpage downloading label font. The font of
Download button.
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.
downloading label in the Page Viewer / Story Viewer. the percentage label on a page.
Inpage percentage label font. The font of Percentage label font. The font of the per-
Button shown at the top of the page if the download failed. Tapping the button allows to re-download the issue. png. The downloadFailedReloadButton.png in its pressed state. The overlay bar on the page that shows the download progress.
169
downloadFailedReloadButtonPressed.
The customizable Progressive Download strings can be found in the Reader section of the Localizable.strings file.
progressiveDownloadOverlayBar.png.
iPad
The Overlay window files can be added to the Reader App project by doing the following:
Add the View Files folder from the sample
Step 3. Customization
Further customization can be added by controlling how the Overlay window will be shown, its presentation style, alignment, auto-resizing mask, and visibility of the top Toolbar or Navigation bar. Step 1. Access the fullscreenOverlayController.h file located in Classes/View files. Step 2. In the @interface section, add the code for customizing the above mentioned items.
170
iPad
Step 2. (Optional) Customize or localize the button assets found in the sample assets folder:
fullscreenOverlayIcon.png. The icon
for for the Fullscreen Overlay window button in the Navigation bar. The icon for for the Fullscreen Overlay window button in its selected state in the Navigation bar.
The text for these messages can be found in the Localizalbe.strings file in the Update section, and can be localized when needed: "Updating filesystem" = "Updating file system,\none moment please."; Note that "\none" is a line break "\n" and the word "one" combined. "Update error" = "Updating the file system failed"; "Update error description" = "Updating the file system failed. This could lead to improper behavior in the app. Try to solve the problems by restarting the app.";
fullscreenOverlaySelectedIcon.png.
Step 3. Add the assets found in the sample assets folder to the following location of the project:
Resources/images/Toolbar
171
iPad
The Toolbar assets are available as PDF files which can be customized by using Illustrator. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community.woodwing.net/products/ Enterprise%207.0.x/Software.
Note that when users are updating an older version of their Reader App to version 2.0.5 or higher, already downloaded magazines are transferred when first starting the new Reader App. Depending on the number of magazines which need to be transferred, this can take a few moment. During this process, a message is displayed to the user stating that the file system is being updated.
9.10 Libraries
The following Library functionality can be customized:
Caching Library Filters Segment Filters
9.10.1 Caching
Libraries that show issues which are part of a subscription are now cached and refreshed under certain conditions. Library caching is not used for Libraries showing content that is not part of a subscription. The Library is refreshed when one of the following occurs:
The Reader App is loaded The Store is accessed The Library cache time has expired. This can
172
iPad
be set in the following DMSettings.plist option (in seconds, default setting is 24 hours):
The content of the list is derived from the Content Delivery Platform and is identical to that of the Store filter. For information about setting up the filter and assigning an issue to a keyword, see section 9.16 Store Filter.
The customizable Library Filter strings can be found in the Store section of the Localizable.strings file.
A
Filter label
Filter option
Figure 9.10.2. The Library filter allows a user to filter the Library by defined keywords
For instance: when your publications exist in multiple languages, the use of the filter can be offered to only show those issues for a particular language.
The Library filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
Library/Enable library filter
173
iPad
The content of the list is derived from the Content Delivery Platform. To create the list, do the following:
Send an e-mail to services@woodwing.com
stating that you would like to make use of the Library Segment filter. In your e-mail, provide the following information:
The name of the Reader App in which the
The name which should be used for the The keywords which should appear in the
WoodWing will process the request for you and will inform you when this is completed. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:
Upload your magazine content as a segment
using the WoodWing Content Delivery Platform and on the Segment Details screen, choose the keyword which should be assigned to the magazine.
Filter label
Filter option
Figure 9.10.3. The Library Segment filter allows a user to filter the Library by defined keywords
For example: when a filter has been set up for distinguishing sports and finance publications, choose Sports from the available list when uploading publications relating to sports, and Finance when uploading publications relating to finance.
The Library Segment filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
The customizable Library Segment Filter strings can be found in the Store section of the Localizable.strings file.
174
iPad
9.11 Newsfeeds
When the user taps the Newsfeed button in the Navigation bar, the Newsfeed page appears as an overlay on top of the page. Its content is taken from the Internet.
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
Configuring the Reader App so that it starts by displaying the Newsfeed page each time the App is started can be done by setting the following DMSetting to Yes:
Navigation/Start with newsfeed
Displaying the Newsfeed page in fullscreen mode can be done by setting the following DMSetting to Yes:
Navigation/Enable fullscreen newsfeed
In this mode, the Close button is not used. In order to close this view, the displayed HTML page should include a built-in close button. This can be achieved by creating an URL pointing to close://. A simple example of a close button is: <a href=close://>Close</a>.
Close button
Figure 9.11. The Newsfeed page is displayed as an overlay on top of the magazine
The single customizable component of the Newsfeed feature is the Close button. Changing its appearance can be done by modifying its asset:
closeButtonDefaultState.png
In case no internet connection is available, a fallback HTML page can be used for the Newsfeed functionality. To enable this feature, include a folder named feedview in the template project and create a HTML page named fallback.html within the feedview folder. If images or style sheets (CSS) are used, these also have to be placed in the feedview folder. If done correctly, the page is automatically found by the app and used, otherwise it falls back to the default behavior by showing a no internet connection message.
175
iPad
Fullscreen mode
cover of that issue is displayed1. For issues containing Segments, the icon of the parent issue is displayed. When an issue is removed, the cover for the last downloaded issue is displayed. Once all issues for a Reader App have been removed, the Reader App icon is displayed once more. Issues can be displayed in one of two different ways:
As a magazine As a newspaper
This is controlled through a setting in the info.plist file of the Reader App project.
Having a Reader App in the Newsstand provides the following benefits for the user:
The Newsstand acts as a central location from
which a Reader App can be opened whithout having to locate it somewhere on the iPad first.
matically in the background as soon as they become available. This way the download process does not have to be started manually. For more information about the Newsstand, see www.apple.com/ios/ios5/features.html#newsstand.
Adding issues to the Newsstand is optional and controlled through a setting in the info.plist file of the Reader App project.
Displayed icons
Initially, the Newsstand displays the app icon of the Reader App. Once an issue is fully downloaded, the
The icon is not changed when the download is started from the Reader App.
1
176
iPad
When a new issue is available, the Newsstand can be notified by sending it a push notification. (This is done through the Content Delivery Platform. For more information, see appendix F, Using the Content Delivery Platform section 4.8.2 Sending a Newsstand Notification.) When the Newsstand receives such a notification, the following actions take place:
A badge with the word New is placed in the
9.12.1 Configuration
The following functionality can be configured:
Including the Reader App in the Newsstand Defining the type of icon to display Newsstand background download support
Each is explained in detail below. The following items are part of the iOS 5 user interface and cannot be configured or customized.
The look of the Newsstand The type of icons in which the issues are
In case the Reader App is not yet running, it is The download of the new issue is started. When the download is complete, the cover of
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.
is available
177
iPad
file of the Reader App project, set the following setting to Yes: Newsstand
When the magazine type icon is used, the version used in the Task Manager also displays staples, the position of which can also be defined.
A B
Staples
Figure 9.11.1. The different types of icons in which issues can be displayed in the Newsstand
file of the Reader App project, set the following settings of the UINewsstand option:
issue is fully downloaded yet, or when all issues have been deleted. Typically, this is the Reader App icon. (Default value: Icon.png). type of icon to use for the issue:
178
iPad
UINewsstandBindingTypeMagazine.
UINewsstandBindingTypeNewspaper.
When the Newsstand receives a notification that a new issue is available, it needs to be able to communicate with the Reader App in order to initiate the download process. For this to work, perform the following steps: Step 1. Access the Resources/DigiMag_ Template-Info.plist file of the Reader App project. Step 2. Locate the Required background modes option. Step 3. Make sure that the following item is included:
newsstand-content
with the magazine type icon, but only displayed in the Task Manager.) Defines the position of the staples: staples are positioned on the left-hand side of the icon. staples are positioned on the right-hand side of the icon.
UINewsstandBindingEdgeLeft. The
UINewsstandBindingEdgeRight. The
UINewsstandBindingEdgeBottom. The
The Newsstand background download process is only supported when the Reader App is configured for progressive downloading. (For more information, see section 9.7 Downloading Methods.)
179
iPad
For an overview of the exact dimensions of each asset, see appendix C, Image Dimensions.
noInternetConnectionBackground.png.
A B
noInternetConnectionBackground noInternetConnectionLabel
180
iPad
The indicator consists of a background image and an image containing the text. Both are located in the root images folder:
9.14.1 Configuration
Configuring the system for the Push Notification feature involves the following steps:
Updating the provisioning file and installing the Modifying the DigiMagKioskSettings.h file
required certificate
http://developer.apple.com/iphone/library/ documentation/NetworkingInternet/Conceptual/ RemoteNotificationsPG/ProvisioningDevelopment/ ProvisioningDevelopment.html#//apple_ref/doc/uid/ TP40008194-CH104-SW1 Make sure to not export the p12 file with a password; it can be uploaded by using the Content Delivery Platform (see section 9.14.2 Sending Messages).
DigiMag_usePushNotifications. Controls
whether the Push Notification feature is used. Possible values: YES and No. BOOL DigiMag_usePushNotifications = NO;
DigiMag_PushNotificationManager-
DigiMagKiosSettings.h file
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_PushNotificationKey: needs to
181
iPad
The provisioning profile needs to be enabled for Push Notification and the correct certificates need to be obtained for the server. For information about how to do this, see Apples Local and Push Notification Programming Guide:
The Push Notification feature is controlled via settings in the DigiMagKioskSettings.h file. The following settings are defined:
NSString *DigiMag_PushNotification_URL = @"https:// localhost/DigiMagKioskServer.main/public/json-rpc/"; Make sure to never start the Reader App by using Xcode while the option "DigiMagPushNotification URL" in the DigiMagKioskSettings.h file points to a production push notification server. If this happens, the push notifications arent send correctly in production.
DigiMag_PushNotificationKey
slideshowIcon
Sending messages
For information about sending a message, see appendix F, Using the Content Delivery Sever section 1.9, Sending a Message.
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
182
iPad
Library. As far as setup and content is concerned though, both are the same.
The Store filter can be enabled/disabled by means of the following setting in the DMSettings.plist file:
Store/Enable filter
The values shown in the Filter itself are defined on the Content Delivery Platform. For more information, see appendix F, Using the Content Delivery Platform. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:
Upload your magazine content using the
WoodWing Content Delivery Platform and on the Issue Details screen, choose the keyword which should be assigned to the magazine.
For example: when a filter has been set up for distinguishing English and German issues, choose German from the available list when uploading German issues, and English when uploading English issues.
A
Filter label
Filter option
The customizable Store Filter strings can be found in the Store section of the Localizable.strings file.
Figure 9.15. The Store filter allows a user to filter the Store by defined keywords
For instance: when your publications exist in multiple languages, the use of the filter can be offered to only show those issues for a particular language. This filter is identical to the Library filter. The only difference is that in the Store it filters the content of the Store and in the Library it filters the content of the
183
iPad
9.17 Subscriptions
The Subscriptions Edition and the Apple Subscriptions Edition of the Reader App can be used for offering magazines to users on a subscription basis. For a description of how the functionality works from a users perspective, see chapter 4, Using the Reader App section 9.1, Store With Subscription Functionality. The subscription functionality is built into the following areas of the Reader App:
The Store, where users can subscribe, sign
Setting up the Subscription functionality involves the following steps: Step 1. Configuring the Subscription environment. For more information, see appendix L, Subscription Server Integration section 1.1, Configuring the Subscription Environment. Step 2. Configuring the Content Delivery Platform. For more information, see appendix L, Subscription Server Integration section 1.2, Configuring the Content Delivery Platform. Step 3. Configuring the Reader App functionality. (See sections below.)
existing subscription account, and download any magazine issues that are part of their subscription. access their subscription account by means of the Account button.
184
iPad
time after which issues that are part of a subscription are refreshed in the Library. (Note that the cache is also emptied when the app is restarted or when the Store is accessed.) mode. For hiding the Offer pane when the device is rotated to portrait orientation. in Safari. For opening the subscription page in Safari when the user taps the Subscribe button in the Store.
server. Enables the use of both the iTunes Subscription Ser vice and a non-iTunes Subscription Service. The working of a mixed subscription environment is as follows:
A Sign In button is available in the Store
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).
ton. Enables the Subscribe button in the Subscription section of the Store.
iTunes Subscription server: only the issues that are part of the Apple iTunes Subscription are shown. iTunes Subscript ion ser ver: the issues for the Apple iTunes Subscription and the issues for the non-Apple iTunes Subscription are shown. pages that are of the non-Apple iTunes Subscription; Apple does not allow this.
scriber but ton. Enables the E xisting Subscriber button in the Subscription section of the Store.
to the same value on the Subscription server which stores the link to the Web page which users can use to reset their password. This key is used when a user wants to reset their password (by tapping I forgot my password in the Login dialog box). When the URL is not set on the Subscription server, the Subscribe button in the Store will be unavailable.
185
iPad
value on the Subscription server which stores the link to the Web page on which users can read the license agreement for the offered service.1 the Subscription server which stores the link to the Web page which users can use to view with information about how the users data is gathered, used, and managed.1 on the Subscription server which stores the link to the Web page which users can use to obtain customer service.1
Store
The Subscription components of the Store are part of the HTML Store. For information about customizing these components, see appendix G, Customizing the HTML Store.
Navigation bar
The Navigation bar holds the Account button for accessing the My Account page.
Navigation/ToolbarItems/Item 8 Account
The appearance of the button can be changed by modifying the following asset:
accountIcon.png. The icon for the Account
button.
A
A
accountSelectedIcon
186
iPad
Library
The Library holds the Sign In/Sign Out button and the Sign In window.
The labels can be modified by changing the following strings in the Store section of the Localizable.strings file:
Sign out button Sign in button
Background.png. The background of the subscription Sign In dialog box. logBackground.png. The background of the password login dialog box.
Store/Subscriptions/Password/passDia-
Sign In window
Store/Subscriptions/shadowBarVertical.
For the Sign In window, assets, colors, text, and fonts can be customized.
png. The shadow bar between the Store and the Subscription panes.
The following assets can be modified for the Sign In window (see figure on the following pages):
images/Toolbar/accountIcon.png.
Store/Subscriptions/stretchableSub-
scriptionStoreButton.png. The subscription buttons in the Store (below the Offer pane). Background.png. The background image of the Subscription pane in the Store.
Store/Subscriptions/Dialogs/
Store/Subscriptions/subscriptionForm-
checkbox.png. The Remember Me checkbox in its deselected state in the Subscription Sign In dialog box. checkboxChecked.png. The Remember Me checkbox in its selected state in the Subscription Sign In dialog box. seButton.png. The Close button for the Subscription Sign In dialog box. h e a d e r B a c kg r o u n d . p n g . T h e
Store/Subscriptions/Dialogs/
Store/Subscriptions/Dialogs/clo-
Store/Subscriptions/Dialogs/
187
iPad
Assets
Store/Subscriptions/stretchableSub-
scribeButton.png. Subscribe buttons used in locations other than in the Store (for instance in the login dialog box.)
Colors
Text
The customizable Sign In window strings can be found in the following section of the Localizable.strings file:
Sign-in dialog
The color of the disclaimer text in the Subscription Sign In dialog box. of the license text in the Subscription Sign In dialog box. of the privacy text in the Subscription Sign In dialog box.
color. The color of the Remember Me text in the Subscription Sign In dialog box. The color of the I forgot my password text in the Subscription Sign In dialog box.
The color of the Submit button label in the Subscription Sign In dialog box. color of the Email Address box text in the Subscription Sign In dialog box.
The color of the Password box text in the Subscription Sign In dialog box. color of the title in the Subscription Sign In dialog box.
188
iPad
Fonts
For an explanation about how to change the color of the fonts and how to assign custom fonts, see section 3.3 Fonts. The following Sign In window fonts can be customized:
Disclaimer text font. The font of the
Disclaimer text in the Subscription Sign In dialog box. text in the Subscription Sign In dialog box. in the Subscription Sign In dialog box.
License text font. The font of the License Privacy text font. The font of the Privacy text Remember checkbox font. The font of the
Remember Me text in the Subscription Sign In dialog box. my password text in the Subscription Sign In dialog box. button label in the Subscription Sign In dialog box. the Subscription Sign In dialog box.
Email field font. The font of the Email box in Password field font. The font of the
Password box in the Subscription Sign In dialog box. Subscription Sign In dialog box.
189
iPad
A B C
closeButton
headerBackground
loginDialogBackground
checkboxChecked
190
iPad
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.
textViewHeader
textViewImagesShadow
shadow that is shown between the Text View and the image bar. This assets needs to be 768 pixels wide and 20 pixels high.
191
iPad
TOC List
Figure 9.18. Tapping the TOC button in the top toolbar brings up the TOC List
192
iPad
Step 2. Enable the top Toolbar by setting the following DMSetting to Yes:
Navigation/Enable top toolbar
behind the thumbnails in the TOC List when viewed in landscape orientation.
tocThumbBackgroundVertical.png. The
image behind the thumbnails in the TOC List when viewed in portrait orientation.
tocThumbBackground
193
iPad
C D
A Story Description property B Story Description displayed in Reader C Story Title property D Story title displayed in Reader
Figure 9.18.4. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for displaying the story title and description in the TOC List (bottom)
Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
194
iPad
195
iPad
9.20 Video
For the video functionality, the following can be customized:
Overlay assets Hiding embedded video controls Remove the video once it has finished playing
story title.
196
iPad
videoDisabledIcon
on top of a video when the video is available but has not started yet. (See figure 9.19.1b to the right.)
A
videoEnabledIcon
197
iPad
on top of a video when it is not possible to play the video, for example when there is no internet connection available to play a streaming video. (See figure 9.19.1a to the right.)
Example: <object> <id>96</id> <type>movie</type> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <movie id=95> <url>images/story136/video_96.mp4</url> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <autoplay>false</autoplay> <autofullscreen>false</autofullscreen> <moviecontrols>false</moviecontrols> </movie> </object> If the <moviecontrols> setting is set to false (controls hidden) and the <autofullscreen> setting is set to true (video automatically played in fullscreen mode), the controls will be shown, else the user would not be able to leave fullscreen mode.
The controls are also shown when the moviecontrols property is not included
1
198
iPad
Possible values: true: the video will be removed1 false: the video will stay visible Example: <object> <id>0</id> <type>movie</type> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <movie id="0"> <url>test/movie.mp4</url> <x>500</x> <y>500</y> <width>100</width> <height>100</height> <autoplay>false</autoplay> <removeafterplay>true</removeafterplay> <autofullscreen>false</autofullscreen> </movie> </object>
The video also stays visible when the removeafterplay property is not included
1
199
iPad
Background
The background of Web Elements can be made transparent by performing the following steps:
For the HTML page which is to be embedded,
set the background property in the body tag to transparent. DMSettings.plist file:
Ena bl e the fo llow ing set ting in th e Colors/Enable transparent Web Elements
The labels of the Back and Close buttons in the Web Element pop-up window can be changed and/or localized by modifying the following strings: /* Back button label */ "Back" = "Back"; /* Close button label */ "Close" = "Close";
200
iPad
1. Preparation
A Reader App without Store functionality A Reader App with Store functionality A Reader App without Newsstand functionality
249
iPad
Preparation steps are required before being able to build the following types of Reader Apps:
destination groups folder (if needed). 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.)
defined on the Content Delivery Platform defined on the Content Delivery Platform
Step 2. Use these settings for building your Reader App. (See section 2. Building.)
250
iPad
Figure 1.1a. A dialog box appears when dragging a magazine folder to the Resources folder in Xcode
251
iPad
2. Building
To build the Reader App, perform the following steps: Step 1. (Optional) When building the Reader App with Store functionality, enter the details received from WoodWing (see section 1.2 A Reader App With Store Functionality) in the Xcode project as outlined in chapter 7, Customizing the iPad Reader App 7.1 Communication With the Store. Step 2. Use the Bundle Identifier to make the Reader App unique. Step 3. Implement your Distribution profile. For more information about these steps, see the iPhone Developer Program User Guide. Step 4. From the Overview list in the Toolbar, choose the Active SDK for the required output device:
Device. When the App is to be used on
When using any of these projects and when not making use of the Newsstand functionality, remove the functionality by performing the following steps: Step 1. O p e n t h e P r o F r a m e w o r k , Subscriptions, or Apple Subscriptions project respectively. Step 2. Open the Resources/DigiMag_ Template-Info.plist. Step 3. Remove the following keys:
Application present content in Newsstand Icon file (iOS 5) Required background modes
the iPad.
252
iPad
the content of the issues that will be viewed) users to use language
In this chapter you will learn all about customizing the Android Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The following main customization areas are defined:
General App settings Navigation The Store The Library General App features
Enabling those features that you want your Localizing the Reader App into a particular
1. Required Tools
In order to perform the steps as outlined in this chapter, the following tools are required:
Eclipse and (optionally) an emulator.
2. OS Compatibility
With the release of the Android Reader App v1.3, a single app is available which runs on both a Honeycomb and Froyo device. The customization steps as outlined in this chapter can be used for both Froyo and Honeycomb; where customization is significantly different, this is indicated accordingly.
(Both come as part of the Eclipse and Android SDK). It is assumed here that both are correctly installed and that you are proficient in using these applications.
A Reader App build with SDK 3.0 can also be run on a Froyo device.
Image editor. For editing images in .png or
3. Loading a Project
The Reader App is supplied as an Eclipse project. The naming scheme has changed; as of v1.2 the Android reader uses the new naming scheme:
DigiMagAndroidv1.xbXXXFramework.zip
Customizing the Reader App is mostly done by making changes to the following areas of the project:
src/[package folder]/DigiMagKiosk-
Settings.java. (Reader App versions with Store functionality only) Settings related to connecting to the Store. text as displayed in the Reader App.
For example:
DigiMagAndroidv1.3b505Basic
Standard.zip
To load the project, perform the following steps: Step 1. Unzip the provided DigiMag file:
DigiMagAndroidv1.xbxxxBasic
v1.x (Froyo) only) For customizing images related to the Subscription Sign In window. (used for both Froyo and Honeycomb). drawables.
res/drawable-nodpi. For generic drawables res-drawable-nodpi-v8. For Froyo-specific res-drawable-nodpi-v11. For Honeycomb-
Standard.zip
DigiMagAndroidv1.xbxxxPro
Framework.zip
specific drawables.
DigiMagAndroidv1.xbxxx
Subscriptions.zip
Step 2. Open the Eclipse project, located in the [folder name]_Template folder. Two projects are loaded: customerapp and wwdigimag. Customizations should only be made to the customerapp project.
4. Universal Builds
The Android Reader App v1.3 runs on both a Honeycomb and Froyo device. Although the same app, the UI between the two versions is different: on Honeycomb an Action Bar is used and on Froyo a Navigation bar and top toolbar are used (same as for v1.2). As a result of this change, the frameworks now contain drawables for both Honeycomb and Froyo. The location of all drawables has also been changed. The changes are as follows:
The hdpi folder is no longer used for Froyo. The mdpi folder is no longer used for
Customizing colors and fonts is not yet possible in the current version. Each is described in the following sections.
Honeycomb.
located in the drawable-nodpi-v11 folder. SDK version 3.0 the drawable-nodpi-v8 folder. SDK 2.2
Any Froyo-specific drawables are located in The drawable-hdpi, drawable-mdpi and draw-
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.1 Drawables
Drawables are user interface components such as buttons, icons and headers. Each of these drawables are images and can be easily replaced by your own images. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. Drawables are stored in the following project folders:
Android Reader App v1.x:
5.2 Text
Changing the appearance of the text can be done in the following ways:
By changing the actual text By changing the language in which the text
appears
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.
is controlled by a setting in the Eclipse project. (For more information, see section 7.1 Reader App Name.) project include icons only, but the following drawables also include text: or Library
Buttons of the Navigation bar, Action bar Labels which indicate that no internet
connection is available
To change the text for these drawables, modify their respective file. (For more information, see section 5.1 Drawables.)
res/values/strings.xml
res/values-v8/strings.xml res/values-v11/strings.xml This file can be used to change the following types of text:
App name Flipview header Action bar menu commands Table of contents title Download labels Button labels Store messages Warnings/error messages
To change the text for any of these items, modify the content of the file as required.
C A D
C
A
Localizable string
HTML page
Dossier property
Server property
10
Viewer is derived from the Section Title property. thumbnail in the Flipview is derived from the Story Title property.
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 properties. For more information about setting these values, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration.)
Issue Maintenance page. The Issue
Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header.
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.
11
5.3 Settings
Most of the customizations for the Reader App are performed in the DMSettings.plist file. This allows you to change the functionality of the Reader App. Which settings these are and for which features they are used is discussed in the remainder of this chapter. For a full overview of all settings in the DMSettings file, see appendix E, The DMSettings File. For some specific features, no user interface is available yet (such as hiding video controls). For these scenarios, the exported magazine.xml file can be modified. This will be explained in the remainder of this chapter where applicable.
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 cards
To run the Reader App on an SD card instead of in internal memory, perform the following steps: Step 1. In your Reader App project, access the AndroidManifest.xml file. Step 2. Modify the manifest statement by adding the following: android:installLocation=preferExternal Example: <manifest xmlns:android=http://schemas.android.com/ apk/res/android android:installLocation=preferExte rnal> For more information, see the Android documentation: http://developer.android.com/guide/appendix/installlocation.html.
12
App as it appears on the Android device. used throughout the Reader App.
Reader App drawables. General drawables Web pages. Web pages containing specific
information, such as privacy information or preferred device metrics. about the Reader App.
13
icon.png
that the current device on which the magazine is viewed may not provide the best user experience since the device does not match the size for which the magazine was designed.
High dpi. Reader App icon displayed on the Homescreen. Location: res/drawable-hdpi. For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
The launcher on the Android Honeycomb version (always) uses the hdpi version of the icon.png, even on mdpi devices. Customers should therefore always create an ldpi, mdpi and hdpi version of their application icon.
14
message
The URL will be build up as: file:///android asset/<name of webpage>.html Step 3. In the Eclips project, access the DMSettings file. Step 3a. Make sure that the following button is included:
Navigation/ToolbarItems/item9
Custom Button
Step 3b. (Optional, only for external an Web page) Enter the URL to the external Web page in:
Navigation/Custom Button URL
15
Page scaling
When the pages of a magazine have been designed in an aspect ratio (width versus height) which is different than the ratio of the device on which the magazine is displayed, the Reader App will scale the page to make it fit the screen in a certain way.1 The scaling method used can be controlled by means of the following DMSettings option:
Metrics/Fitting/Fit mode
For notes about the functionality of the page fitting feature in relation to using specific DM Server plugins, see chapter 6, Exporting Content 3.1, Exporting and Page Scaling.
Possible values:
Fit width. (Default setting) On a device which
is smaller than the page dimensions, the page is scaled down to fit the width of the screen. This might result in the user having to scroll vertically to see the rest of the page.
Pages are only scaled down, not up; pages which dimensions are less than those of the device are kept at their original size.
Fit screen. The page will be scaled down to
fit the screen. If the aspect ratio (width versus height) of the screen is smaller than the ratio for which the page was designed, this can result in letterboxing or pillarboxing (black bars appearing along the side, top, or bottom of the screen). Pages are only scaled down, not up; pages which dimensions are less than those of the device are kept at their original size.
will be made to fit the dimensions of the screen exactly. This could result in the content of the page looking stretched or squashed.
Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
1
16
Displaying a message
The Reader App can be set to verify the metrics of the device, and if the required size is not met to display a message to the user in the form of a Web page. A default Web page is provided as part of the Eclips project:
assets/devicewarning/warning.html
1024 px (Reader App v1.x (Froyo) 1280 px (Reader App v1.x (Honeycomb)
Metrics/Device height. The required
To enable this feature, perform the following steps: Step 1. (Optional) Create a Web page containing the information to be displayed by doing one of the following:
Use the default Web page Create a new page, possibly based on
600 px (Reader App v1.x (Froyo) 800 px (Reader App v1.x (Honeycomb)
Metrics/Device dpi. The dpi setting
which the device runs in (so not the physical dpi). Examples: Samsung Galaxy: 240 dpi Motorola Xoom: 160 dpi For values of other devices, please refer to the documentation of the manufacturer.
Step 2. (Optional) Make the page available by doing one of the following:
Replace the default Web page (make sure
Step 3. In the Eclipse project, access the DMSettings file and set the following:
Metrics/Check device metrics.
URL. URL to the Web page to be displayed. When left empty, the default Web page is used.
17
appendix F, Using the Content Delivery Platform section 4.1 Configuring Reader Apps.
settings/DigiMagKioskSettings.java/ DigiMagKioskSettings
To localize this message, edit the following string in the Error Strings section of the strings.xml file:
This issue requires a newer version of this
taining the table of contents to the TOC button in the Navigation bar.
18
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
user swipes horizontally (from left to right or right to left) page), the user swipes vertically (up/down or down/up)
swipes horizontally (from left to right or right to left) using one finger swipes horizontally (from left to right or right to left) using two fingers
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
19
To ease navigation when the Reader App is set to Page navigation, you might want to enable the Page Scrubber so that the user can quickly browse the pages displayed in the Page Viewer. To enable the Page Scrubber, set the following option in the DMSettings.plist file to Yes:
Flipview/Page scrubber enabled
Items. The number of buttons and the order Drawables. The icons of the buttons. Visibility settings. Settings controlling the
20
8.2.2 Items
The Navigation bar can contain the following buttons:
Magazine. For accessing the current maga-
Select the option Tap bottom to show Select the option Tap top to show
Home. For navigating to the magazine cover. TOC. For navigating to the table of contents
toolbar.
page.
define the height of the area in pixels by modifying the bottom and/or top area height value.
Help. For navigating to the Help page. FlipView. For bringing up the Flipview. Feed. For navigating to the newsfeed. Account. (Subscription Editions only) For
The Navigation bar now only appears when the user taps the defined area(s).
When included, this button is displayed at all times, but only enabled when the Store is accessed.
Custom button. For accessing a Web
The buttons are managed by means of the following option in the DMSettings.plist file:
Navigation/ToolbarItems The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
2
The value of each item is linked to specific functionality and should not be changed.
21
Removing/adding buttons
8.2.3 Drawables
The drawables that appear in the Navigation bar are stored in the res/drawable-nodpi and res/drawable-nodpiv8 folders. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. The Navigation bar has a 1-pixel high dark row at the top. When creating or modifying a button, make sure that this button has a 1-pixel high transparent row at the top so that the underlying dark row of the Navigation bar stays visible. The following drawables can be customized: For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
accounticon.png. The icon for the Account
choose Add Row from the context menu and entering the correct Value for that button. a suitable XML editor.
To rearrange the order in which the items appear in the Navigation bar do the following:
Mac OS: Drag each key to its required
position.
button.
bottombar.png. The background of the customicon.png. The icon for the Custom customselectedicon.png. The icon for the
22
button.
button. (This button is normally named Contents.) 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
storeicon.png. The icon for the Store button. storeselectedicon.png. The icon for the
ton, linking to the cover of the magazine. Home button in its selected state.
tocicon.png. The icon for the Contents tocselectedicon.png. The icon for the
A
A H
B
B I
H
E
J
F
K tocicon
G
bottombar flipviewicon
homeicon
helpicon
23
The following DMSetting controls whether the Navigation bar (as well as the top Toolbar, when enabled) will always be displayed, without the user being able to hide them:
Navigation/Always show toolbars
The left-hand side of the Action bar is used for displaying the following actions: Store, Library, Magazine, Newsfeed, and Custom button. The remaining buttons are displayed on the right-hand side of the Action bar.
Drawables. The icons of the buttons. Text. The text for the commands in the Action
bar menu.
24
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)
Select the option Tap top to show (Optional) In the Touch Areas section,
define the height of the area in pixels by modifying the top area height value.
ects only) Appears when either the Store or Library is accessed and when an issue is open. It is used for navigating back to the opened issue.
The Action bar now only appears when the user taps the defined area.
Feed. For navigating to the newsfeed. Custom button. For accessing a Web
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 displayed when the Store is accessed.
The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
3
25
displayed on the right-hand side of the Action bar, never in the menu.) For navigating to previously visited pages.
Removing/adding buttons
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 functionality and should not be changed. When one or both of the Back/Forward items are enabled then these are always displayed, regardless of the value set in the ' Maximum number of toolbar items' setting (see below). An additional button is the Menu button, which automatically appears when there are 6 or more actions defined. When there are less actions defined, the Menu button is not displayed. (This functionality is part of the operating system and cannot be controlled.)
Add Row from the context menu and enter the correct Value for that button. a suitable XML editor.
To rearrange the order in which the items appear in the Action bar open the DMSettings file and do the following:
Mac OS: Drag each key to its required
position.
The maximum number of items to appear on the right-hand side of the Action bar can be controlled by the following DMSetting:
Navigation/ Maximum number of toolbar items
A maximum number of 6 items can be set to appear on the right-hand side of the Action bar. When one or both of the Back/Forward items are enabled then these are always displayed, regardless of the value set in the ' Maximum number of toolbar items' setting (see below).
26
8.3.3 Drawables
The drawables that appear in the Action bar are stored in the res/drawable-nodpi folder. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. The current state of a button and the availability of the functionality behind the button is indicated in the following ways:
the availability of the function behind the button. The names of these drawables all contain the word icon. selected or pressed). The names of these drawables all start with actionbar.
Any buttons that dont fit in the Action bar can be accessed via the Action bar menu (also referred to as the Overflow). The following drawables can be customized (in alphabetical order, see figure on the next page): The icon for the Menu button is part of the operating system and cannot be customized. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
accountdisabledicon.png. The icon for the
The button is unselected: a narrow line is The button is selected: a thick line is shown The button is pressed: the whole back-
background.png. Background image for a pressed command in the Action bar menu. ground.png. Background image for a pressed button in the Action bar. Background image for a selected and pressed button in the Action bar. Background image for the selected action in the Action bar.
All buttons:
action_bar_action_pressed_back-
colored white.
is colored gray.
action_bar_tab_selected_pressed.png.
For this purpose, two images are always shown simultaneously for each button:
action_bar_tab_selected.png.
27
action_bar_tab_unselected_pressed.
png. Background image for an unselected and pressed button in the Action bar. Background image for unselected buttons in the Action bar. Back button in its disabled state.
popup_background.9.png. Background
for the Action bar menu, including the top green line.
action_bar_tab_unselected.png.
This drawable is also used for the Filter lists in the Library.
storeicon.png. The icon for the Store button. tocicon.png. The icon for the Contents
backdisabledicon.png. The icon for the backicon.png. The icon for the Back button. customicon.png. The icon for the Custom
button.
button. button.
feedicon.png. The icon for the Newsfeed flipviewicon.png. The icon for the Flipview
button. (This button is normally named Contents.) Forward button in its disabled state. button.
forwarddisabledicon.png. The icon for the forwardicon.png. The icon for the Forward helpicon.png. The icon for the Help button. homeicon.png. The icon for the Home but-
libraryicon.png. The icon for the Library magazineicon.png. The icon for the
28
M N
H I J K L M N
A B C D E F G
29
8.3.4 Text
When a button is not displayed in the Action bar, it can be accessed through the Action bar menu. Items in this menu appear as text only. The text for these commands can be localized by changing the strings beginning with action in the strings.xml file. For more information about changing text, see section 5.2 Text.
8.3.5 Visibility
When opening a magazine issue, the following DMSetting controls whether the Action bar will be automatically displayed:
Navigation/Show toolbar on opening issue
The following DMSetting controls whether the Action bar will always be displayed, without the user being able to hide it:
Navigation/Always show toolbars
30
8.4 Flipview
The Flipview appears when the user taps the Contents button in the Navigation bar or Action bar. The Flipview can also be made to appear automatically when the Navigation bar/Action bar is displayed. This functionality can be set through the following DMSetting:
Flipview/ Show flipview on show toolbar
C D A B C D
A
E Flipview Header
B
Page scrubber
Section Viewer
Close button
Figure 8.4. The Flipview components of the Froyo version (top) and Honeycomb version (bottom)
31
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 res/drawables-nodpi-v11
Honeycomb-specific:
This image is also used as the background for the Story Viewer / Page Viewer.
Flipview title. For displaying the title of the
For an overview of the exact dimensions of the drawables, see appendix C, Image Dimensions.
magazine. This can be modified by changing the following string in the strings.xml file:
flipviewerheadertitle
The Flipview Header components can be hidden by deselecting the following option in the DMSettings.plist file:
Flipview/Show flipview header
information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server.
the Flipview. Changing the look of this button can be done by modifying the following asset:
flipviewclosebutton.png A B
Flipview title
flipviewbackground
Issue description
32
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
This image is also used as the background for the Flipview Header.
To change the margins, enter the required size in pixels for each setting.
Thumbnail Size
The size of the thumbnails in the Story Viewer / Page Viewer can be controlled via the following settings in the DMSettings.plist file:
Flipview/Thumbs/Minimum page thumb
The margins between the thumbnails can be controlled by the following settings in the DMSettings.plist file:
Froyo version Flipview/Margins/Flipview thumb
height height
To change the thumbnail size, enter the required size in pixels for each setting.
thumb margin. Controls the margin between the pages. thumb margin. Controls the margin between articles (stories).
Flipview/Margins/Flipview article
Thumbnail Awareness
By default, the thumbnails in the Story Viewer / Page Viewer are shown in landscape orientation, even when the device is rotated to portrait orientation. Matching the orientation of the thumbnails to the orientation of the device can be done by enabling the following setting in the DMSettings.plist file of the code project:
Flipview/Thumbs/Make thumbs orientation
To change the margins, enter the required size in pixels for each setting.
aware
With this setting enabled, thumbnails in portrait orientation are shown when the device is rotated to portrait mode
33
Story Title
For the first page of each story, the Story Title is shown. The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. When text exceeds the width of the page thumbnail, the text is elipsized.
Story Bullets
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 A
Changing the appearance of the Story bullet can be done by modifying the following drawable:
flipviewbullet.png
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
Figure 8.4.2a. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
34
Story Description
For each story a short description can be displayed as a further indication of what the story is about. To enable this feature, select the following option in the DMSettings.plist file:
Flipview/Show story description A
The text that is displayed is taken from the Story Title property of a Dossier. Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign. When text exceeds the width of the page thumbnail, the text is elipsized.
B
A B
Figure 8.4.2c. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
35
Page number
This feature is controlled through the following option in the DMSettings.plist file:
Flipview/Show page number
A A
A
Page number
Page scrubber
Figure 8.4.3. The Page Scrubber can be used to quickly scroll through the pages of the magazine
The Page Scrubber can be enabled by the following option in the DMSettings.plist file:
Flipview/Page scrubber enabled
36
Changing the appearance of the Page Scrubber can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/ drawable-nodpi-v11 folders): For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
pagescrubberbackground.png. The back-
Section title
The text that is displayed in the Section Viewer is taken from the Section Title property of a Dossier. Accessing the Dossier properties can be done by using Content S t a ti o n o r S m a r t C o n n e c ti o n fo r I n D e s i g n.
to the left of the Page Scrubber button. 10 Pixels of each side will remain the same, but the middle section will stretch.
to the right of the Page Scrubber button. 10 Pixels of each side will remain the same, but the middle section will stretch.
B
A
Figure 8.4.4a. The Section Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the Section in the Section Viewer of the Reader App (bottom)
37
Changing the appearance of the Section Viewer can be done by modifying the following drawables (located in the res/drawable-nodpi, res/drawable-nodpi-v8 and res/ drawable-nodpi-v11 folders): For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
flipviewsectionbackground.png. The
Changing the appearance of the Close button can be done by modifying the following drawables:
flipview_close_background.png. The
For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
A
A
flipviewcloseicon
flipviewclosebackground
38
Changing the text of the button can be done by changing the following string in the strings.xml file:
flipviewerclosebuttontext
39
8.5.1 Availability
By default, the top Toolbar is disabled. It can be enabled by selecting the following option in the DMSettings.plist file:
Navigation/Enable top toolbar
Toolbar.
circumstances under which the Navigation bar is displayed or hidden. in order to display the top Toolbar. that appear in the top Toolbar. images.
Tap area. The area which the user should tap Items. The number of buttons and images Drawables. The icons of the buttons and
The following DMSetting controls whether the top Toolbar (as well as the Navigation bar) will always be displayed, without the user being able to hide it:
Navigation/Always show toolbars
40
8.5.4 Items
The top Toolbar holds the following items:
Back/Forward buttons. For navigating to
A
A
B
B
Select the option Tap bottom to show Select the option Tap top to show (Optional) In the Touch Areas section,
Back button
Forward button
define the height of the area in pixels by modifying the bottom or top area height value.
The area that is tapped should not hold any functionality itself such as a Slide Show, Hotspot, etc., else that functionality is invoked instead.
4
41
8.5.5 Drawables
The following drawables can be customized:
backicon.png. The icon for the Back button
8.6 Hotzones
Hotzones are areas to the left, right, and bottom of the screen which can be tapped in order to navigate the magazine.
image.
forwardicon.png. The icon for the Forward forwardselectedicon.png. The icon for the
Back button image in its selected state. Toolbar (also used in the Library).
These drawables are stored in the res/drawable-nodpi-v8 and res/drawable-nodpi-v11 folders. Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
Figure 8.6. Hotzones (shaded in red) are specific areas which can be tapped to bring up the navigation tools or to navigate to the next/previous page
(or the next page when the Reader App is set to Right-to-left mode) Navigation bar.
Bottom or top area: for bringing up the Right area: for navigating to the next page (or
the previous page when the Reader App is set to Right-to-left mode)
42
Each area can be controlled by the following options in the DMSettings.plist file:
Hotzones/Tap bottom to show toolbar.
the Hotzones to the left and right of the screen. or width of the different Hotzones.
When interactive objects (such as Slide Shows, videos, etc.) are placed within the area of a Hotzone, their functionality cannot be accessed because of the overlaying Hotzone area. In order to make sure that these interactive objects can still be accessed without being blocked by a Hotzone, the following DMSetting can be set:
Hotzones/ Keep underlying interactive ele-
ments active
Possible values:
Landscape. For displaying only pages in
When the setting is left empty or removed, the orientation lock is disabled and pages in both landscape and portrait orientation are shown.
43
When the Orientation Lock feature is enabled (see above), the objects displayed in full screen mode (such as videos, Slide Shows and Web view overlays) can still be allowed to rotate when the Tablet is rotated by enabling the following option in the DMSettings.plist file:
Navigation/Allow fullscreen object rotation
9. The Store
The Android Reader App makes use of the HTML Store. For more information, see appendix G, Customizing the HTML Store. On the Reader App side, customization is done in the following two areas:
Communication with the HTML Store Reader App components
when locked
Videos displayed in fullscreen mode can be forced to be displayed in landscape mode across the height of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly. This can be done by enabling the following option in the DMSettings.plist file:
Navigation/Force fullscreen video orientation
Figure 8.7. With the Force fullscreen video orientation option enabled, video is always displayed across the full height of the Tablet, even when the Tablet is held in portrait orientaton.
Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video.
44
DigiMagKioskSettings File
The DigiMagKioskSettings file handles the communication with the Content Delivery Platform. The file can be found in the following location of the project:
customerapp/src/com.woodwing.settings
DMSettings file
The DMSettings file handles the communication between the Reader App and the Store. The file can be found in the following location of the project:
customerapp/assets/DMSettings.plist
DigiMagKioskLibary_ProductID. The
product name as defined on the Kiosk Server. secret key as defined on the Kiosk Server.
DigiMagKioskLibary_SecretKey. The
URL: a URL to an externally hosted Store/HTML Store fallback URL. The URL
pointing to a local HTML file. This file is loaded when the HTML Store is not acccessible.
45
Buttons
Store Filter
The Store Filter can be controlled by the following option in the DMSettings file:
Store/Enable Filter. Enables or disables the
stretchablestorebutton_disabled.9.png.
Store Filter.
Used for the Log In button as the button in its non-available state.
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.
46
Strings
The following strings relating to the in app purchasing functionality can be modified: Table 9.2. In app purchasing strings Key store_androidmarket_item_ purchased store_androidmarket_item_ refunded Value \'%1s\' purchased. Description Displayed when an issue is purchased. %1s can be used to refer to the issue name. Displayed when an issue is refunded. %1s can be used to refer to the issue name.
\'%1s\' refunded.
store_androidmarket_item_ unavailable
Displayed when the Android Market cannot find the requested item in the application's product list. This can happen \'%1s\' appears to be unavailable in if the product ID is misspelled in your purthe Android Market. chase request or if an item is unpublished in the application's product list. %1s can be used to refer to the issue name. Purchase verification failed. You canceled the purchase of\'%1s\'. Purchase of \'%1s\' canceled by server. Displayed when purchase information was received but when the Content Delivery Server failed to verify it. Displayed when the user tapped Cancel on the purchase screen. %1s can be used to refer to the issue name. Displayed when the charge for the item failed on the Android Market server. %1s can be used to refer to the issue name.
Displayed when the purchase order was Your purchase of \'%1s\' has been successfully sent to the Android Market submitted to the Android Market. server. %1s can be used to refer to the issue name. The Android Market is currently unavailable. Displayed when the network connection is down and thus no connection to the Android Market server can be established. (Continued on next page)
47
Table 9.2. In-app purchasing strings (continued) Key Value Description Displayed when the billing API version used is not recognized by the market application and that the market application may have to be updated. Can also indicate that the user is ineligible for in app billing (for example when a user resides in a country that does not allow in app purchases). Displayed when the com.android.vending. BILLING permission is not declared in the manifest. Can also indicate that an application is not properly signed. %1s can be used to refer to the issue name. Displayed when a restore transactions request was successfully sent to the server.
store_androidmarket_unavailable
Restoring transactions.
An error occurred while restoring Displayed when an error occurred during transactions. a restore transactions request.
48
of the header.
used to indicate that the text field is active (cursor is placed in the field). light.9.png. Image used to indicate that the text field is not active (cursor is not placed in the field).
textfield_disabled_focused_holo_
For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
49
Text
The following strings can be customized for the Library Log In window:
Username. The label in the user name box. Password. The label in the password box. Remember me. The label for the Remember
Me check box.
Submit. The label for the Submit button. I forgot my password. The label for the I
Privacy. The label for the Privacy link. License Agreement. The label for the
50
A E
stretchablestorebutton.9
51
library_shelf_landscape.png. (Honeycomb
only) The image used for the Library shelfs when the device is held in landscape orientation. only) The image used for the Library shelfs when the device is held in portrait orientation. for the Filter lists.
library_shelf_portrait.png. (Honeycomb
which issues that are part of a subscription are refreshed in the Library. Out button in the Library.
Enable login button. Enables the Log In/Log Enable library filter. (Honeycomb only)
popup_background.9.png. Background
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.
Drawables
The following drawables can be customized for the Library (see example on the following pages):
librarydownload.png. The image used for
The image used for the Logout button. used for the download Pause button.
library_shelf_issue_drop_shadow.png.
(Honeycomb only) The image used for the dropshadow behind the issue preview.
52
Text
in the Segment Filter for choosing all Segments. Library Filter for choosing all issues.
which is activated by tap and hold on an issue. when deleting an issue from the Library. button.
Delete issue. Command in the context menu Sign In. (Froyo only) The label for the Sign In Sign Out. (Froyo only) The label for the Sign
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.
Out button.
53
A B B C
storeheader
stretchablestorebutton.9
topbar
54
A B C D
C B
B
A
librarytopbar
libraryshelflandscape.png
libraryshelfissuedropshadow
popupbackground.9
55
11.1 Audio
For the playback of audio, the following features can be customized:
Overlay drawables Audio settings Embedded audio controls
56
11.1.2 Audio Settings Audio keeps playing while swiping from page to page within the same article
audioplayenabledicon
Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing. This functionality is controlled by the following DMSetting:
Navigation/Continue audio within article
icon when a streamed audio file is not available or when no internet connection is available. shown when the audio file is being played. when the audio file is being played.
Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions. The audio overlay drawables are stored in the res/drawable-nodpi folder.
57
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
The controls are also shown when the backgroundaudio property is not included
5
Step 5. In the magazine.xml file, create an entry for your custom object and set classtype to the key of the entry in the plist file.
58
As soon as the download and installation process is complete, the issue or Segment can be made to open automatically. The following conditions exist:
The Library must be viewed at the time the
download is completed.
ground (for instance when the app is minimized or when another issue is being viewed), the issue will not automatically open.
Drawables
The following drawables can be customized for the progressive download method:
downloadbackground.9png. The back-
ground of the download progress bar in its disabled state. ress bar.
59
button.
Drawables
The following drawables can be customized for the progressive download method:
downloadbackground.9png. The back-
ground of the download progress bar in its disabled state. ress bar. button.
downloadleft.9.png. The download proglibrarydownload.png. The Start Download librarydownloadpause.png. The Pause
60
Settings
As soon as the issue or Segment is readable during the download process, it can be made to open automatically. The following conditions exist:
The Library must be viewed at the time the
download is completed.
ground (for instance when the app is minimized or when another issue is being viewed), the issue will not automatically open.
Strings
The 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>
61
62
11.5 Newsfeeds
When the user taps the Newsfeed button in the Navigation bar, the Newsfeed page appears as an overlay on top of the page (Froyo) or as an embedded page. Its content is taken from the Internet.
A
(Froyo only) The single customizable component of the Newsfeed feature is the Close button. Changing its appearance can be done by modifying its asset (located in the res/drawable-nodpi folder):
closebuttondefaultstate.png
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
Close button
Figure 11.5. On Froyo, the Newsfeed page is displayed as an overlay on top of the magazine
63
The No Internet Connection drawables are stored in the res/drawable-nodpi folder. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
The indicator consists of a background image and an image containing the text. The following drawables can be customized:
nointernetconnectionbackground.png.
A B
nointernetconnectionbackground nointernetconnectionlabel
64
To enable Scrolling Indicators for Scrollable Areas, enable the following DMSetting:
Colors/ Enable native scrolling indicators
A
A
Scrolling indicator
Figure 11.7. A scrolling indicator in the form of a faded edge indicates to the user that the content of the frame can be scrolled
65
A
A
textviewmodenotsupported.9.png
slideshowicon
The Slide Show drawable is stored in the res/drawablenodpi folder. The drawable to customize is:
slideshowicon.png. The overlay shown in
These 1-pixel black images are 9-patch images, consisting of a 3x3 image with 1 black pixel in the middle and 4 black pixels around it to indicate it can be stretched in all four directions. Change these dimensions as required.
Various drawables are available as PDF files which can be customized by using Illustrator and subsequently exported as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/ Enterprise%207.0.x/Software. For an overview of the exact dimensions of this drawable, see appendix C, Image Dimensions.
66
11.10 Video
For the video functionality, the following can be customized:
Overlay drawables Video Player drawables Hiding embedded video controls
67
the video, for example when there is no internet connection available to play a streaming video.
videoenabledicon.png. The overlay shown
on top of a video when the video is available but has not started yet.
videoDisabledIcon
videoDEnabledIcon
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
68
ground of the video scrubber to the right of the scrubber button (indicates the amount of video remaining).
of the video scrubber to the left of the scrubber button (indicates the amount of video which has played).
next.png. The icon used for forwarding the pause.png. The icon used for pausing the
video.
play.png. The icon used for playing the video. prev.png. The icon used for reversing the
video.
69
Example: <object> <id>96</id> <type>movie</type> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <movie id=95> <url>images/story136/video_96.mp4</url> <x>523</x> <y>339</y> <width>435</width> <height>291</height> <autoplay>false</autoplay> <autofullscreen>false</autofullscreen> <moviecontrols>false</moviecontrols> </movie> </object> If the <moviecontrols> setting is set to false (controls hidden) and the <autofullscreen> setting is set to true (video automatically played in fullscreen mode), the controls will be shown, else the user would not be able to leave fullscreen mode.
The controls are also shown when the moviecontrols property is not included
6
70
These drawables are stored in the res/drawable-nodpi folder. For an overview of the exact dimensions of each drawable, see appendix C, Image Dimensions.
available state.
backgrey
closebuttondefaultstate
71
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.
and Froyo are located in the drawable-nodpi folder. located in the drawable-nodpi-v11 folder. the drawable-nodpi-v8 folder.
Any Honeycomb-specific drawables are Any Froyo-specific drawables are located in The drawable-hdpi, drawable-mdpi and draw-
able-ldpi folders still exist but only contain the app icon.
253
Android
2. Preparation
Before being able to build a Reader App using Eclipse, the following preparation steps are required:
Preparing Eclipse Preparing a Reader App without Store
2.1 Eclipse
Before working with the provided Reader App projects in Eclipse, make sure to have a fully working workspace set up for developing Android apps in Eclipse. For instructions about installing the Android SDK and steps for setting up your environment, see http://developer.android.com/sdk/installing.html.
functionality functionality
254
Android
defined on the Content Delivery Platform defined on the Content Delivery Platform
Step 2. Import the Pro or Subscription project into your workspace. Step 3. Us e th e s et ti n g s p rov i d e d by WoodWing for building your Reader App. (See section 2. Building.)
255
Android
3. Building
In order to build the Reader App, perform the following steps: Step 1. (Optional) When building the Reader App with Store functionality, enter the details received from WoodWing (see section 2.3 Reader App With Store Functionality) in the Eclipse project as outlined in chapter 9, Customizing the Android Reader App section 9.1 Communication With the Store. Step 2. From the Run menu, choose Run. The Run As dialog box appears. Step 3. Choose Android Application from the list. Step 4. A binary .apk file will be generated in the following location:
<project folder>/bin
256
Android
the content of the issues that will be viewed) users to use language
In this chapter you will learn all about customizing the HTML5 Reader App. After a few introductory sections in which general customization is discussed, customizing each Reader App feature is discussed in detail. The following main customization areas are defined:
General App settings Navigation General App features
Enabling those features that you want your Localizing the Reader App into a particular
257
HTML5
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
2. Project Files
Customization of the HTML5 Reader App is achieved by editing various types of files. The following files can be edited:
CSS files. Used for changing the appearance
favorite editor for this task. favorite editor for this task.
Image editor. For editing images. Use your Config files editor. For editing configuration
files. Use your favorite editor for this task, such as an XML editor or plain-text editor.
of the Reader App in the form of background colors, text, etc. Different CSS files are available for different areas of the Reader App (listed in alphabetical order): Each file can be found in the reader/ themes/default/components folder and its sub folders.
activeelement.css. Used for controlling
audio.css. Used for controlling functionbase.css. Used for controlling the gen-
config.css. This file is reserved for future flipview.css. Used for controlling func-
functionality related to the Story and Page Navigators. trolling the scrollbars of Scrollable Areas.
258
HTML5
tionality related to the Page Scrubber in the Flipview. functionality related to Slide Shows. Navigation bar and top Toolbar. ality related to video.
slideshow.css. Used for controlling toolbar.css. Used for controlling the video.css. Used for controlling functionweblink.css. Used for controlling func-
Colors. The color of text and backgrounds. Text. The text of specific titles as they appear
of the Reader App in the form of buttons, icons, etc. All images are located in the reader/themes/ default/img folder. functionality of the Reader App: reader/config folder
For some features, making changes in only one area will be sufficient, whereas other features require changes in multiple places.
259
HTML5
3.1 Images
Images are user interface components such as buttons, icons and headers. Each of these images can be easily replaced by your own images. Take note of the following:
Renaming images is not allowed since the
3.2 Colors
Colors for objects and text are controlled via CSS files. Detailed information about the colors that can be changed or each feature is provided in the remainder of this chapter.
names are directly linked to the code in the Reader App All image names are written in camelCase format All images need to be in PNG file format, with the exception of the loader.gif file and some images of the Navigation Zones which are in jpeg format. Various images are available as PDF files which can be customized by using Illustrator and subsequently saved as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http://community. woodwing.net/products/Enterprise%207.0.x/Software. Exactly which images can be customized per feature is explained in the remainder of this chapter.
260
HTML5
3.3 Text
Limited resources are available for changing the text which appears in the Reader App. The text that can be changed originates from various sources, and can therefore be changed by different means:
Images. Most images include icons only, but
tion below the story title in the Flipview is derived from the Description property.
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
To change any of these properties, use Smart Connection for InDesign or Content Station. (Note that the values used in the list are taken from their respective custom metadata properties. For more information about setting these values, see the Enterprise 7 Admin Guide, chapter 40, Digital Magazine Configuration.)
Issue Maintenance page. The Issue
Description property of a created Issue can be displayed in the top right-hand corner of the Flipview header.
Viewer is derived from the Section Title property. thumbnail in the Flipview is derived from the Story Title property.
To add or change this text, change the Issue Description property on the Issue Maintenance page in Enterprise Server.
B
A
C
C
Server property
Dossier property
261
HTML5
3.4 Settings
Some of the customizations for the Reader App are performed in the DMSettings.plist file, which allows changing specific Reader App functionality. Which settings these are and for which features they are used is discussed in the remainder of this chapter. For a full overview of all settings in the DMSettings file, see appendix E, The DMSettings File. For some specific features, no user interface is available yet (such as hiding video controls). For these scenarios, the exported magazine.xml file can be modified.
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.
262
HTML5
reader/unsupportedbrowser.html
263
HTML5
When the magazine is loaded in an unsupported Web browser, a message is displayed to the user. This Web page can be customized to your needs. Location:
Custom scrollbars
Vertical scrollbar
png
Horizontal scrollbar
track-hor.png
264
HTML5
A
A
B
B
C border-color
C
D background-color
D
bg-body.png
loader.gif
Figure 5.2. Customizing the general appearance of the HTML5 Reader App
265
HTML5
6. Navigation
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
user navigates horizontally (from left to right or right to left) page), the user navigates vertically (up/ down or down/up)
Each aspect is explained in the following sections. Other Reader App features such as the TOC List and Searchable Text can also be seen as navigation methods, but these are described in section 7. General App Features.
navigates horizontally (from left to right or right to left) 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.
To enable Page navigation, select the following option in the DMSettings.plist file:
Navigation/Horizontal page navigation
266
HTML5
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.
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 functionality and should not be changed.
Removing/adding/reordering buttons
To remove or add a button, or change the order in which they appear, modify the content by using a suitable XML editor.
267
HTML5
6.2.2 Images
The images that appear in the Navigation bar are stored in the img/bottomToolbar folder. The Toolbar images are available as PDF files which can be customized by using Illustrator and subsequently saved as .png files. The package can be downloaded from the Enterprise 7 product page on the WoodWing Community site (log in required) http:// community.woodwing.net/products/Enterprise%207.0.x/ Software. The following images can be customized (listed in alphabetical order):
flipviewHoverIcon.png. The icon for the
Contents button when the mouse is hovered over it. button, linking to the page with the table of contents. Contents button in its selected state.
Flipview button when the mouse is hovered over it. (This button is normally named Contents.)
button. (This button is normally named Contents.) Flipview button in its selected state. (This button is normally named Contents.)
button when the mouse is hovered over it. ton, linking to the cover of the magazine.
A
A
homeHoverIcon
tocSelectedIcon
flipviewIcon
268
HTML5
6.3 Flipview
The Flipview appears when the user taps the Contents button in the Navigation bar. It shows the Flipview Header, the Story Viewer / Page Viewer, and the Page Scrubber.
The appearance of the Flipview can be modified by changing any of the following:
Background Header Thumbnail border Story title Story bullets Story description Page scrubber
Flipview Header
Page scrubber
Figure 6.3. The Flipviewer appears when tapping the Contents button in the Navigation bar
269
HTML5
6.3.1 Background
The following areas of the background can be customized:
6.3.2 Header
The Flipview Header contains the following editable components:
Flipview background
The background image of the Flipview. Image: flipviewBackground.png CSS reference: CSS file: flipview.css Class selector: .flipviewpanel
Issue description
For displaying issue information. This can be added by filling out the Description property on the Issue Maintenance page in Enterprise Server.
Close button
The close button to close the Flipviewer with. Image: flipview-horizontal-button-close.png CSS reference: CSS file: flipview.css Class selector: .flipview-closer
A B
flipviewBackground
270
HTML5
Issue description
flipview-horizontal-button-close
Thumbnail border A
Figure 6.3.3. A border is shown around a thumbnail to indicate which story currently is viewed
Figure 6.3.4. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom) 271
HTML5
flipview-horizontal-bullet-circle
The story bullet is controlled by the following image and CSS reference: Image: flipviewBullet.png CSS reference: CSS file: flipview.css Class selector: .flipview-bullet
B
A B
Figure 6.3.6. The Story Title property as entered in the Dossier property dialog box (top) is used for displaying the name of the story in the Story Viewer / Page Viewer of the Reader App (bottom)
272
HTML5
6.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.
Height of the bottom Hotzone. Default value: 80 (in pixels). Height of the left Hotzone. Default value: 44 (in pixels).
A
A
B
B
slider-bg
Note that Hotzones only work on touchscreen devices, not on a desktop PC/laptop (for these systems, Navigation zones are used, see section 6.5 Navigation Zones).
The Page Scrubber is controlled by the following image sand CSS references:
273
HTML5
The Navigation Zones are controlled by the following images and CSS references:
vertical.jpg
Figure 6.5. The Navigation Zones at the edges of the screen (here all shown simultaneously for a page)
274
HTML5
vertical.jpg
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
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
tocTableIcon.png. The icon for the TOC tocTableSelectedIcon.png. The icon for the
275
HTML5
7.1 Audio
For the playback of audio, overlay images can be customized. Overlay images are icons that appear over other objects to indicate their intention or state. For audio, icons are available to indicate that an audio file can be played or stopped.
A
A
audio-play-overlay
The audio overlay images are controlled by the following images and CSS references:
The audio icon shown when the audio file is not being played. Image: audio-play-overlay.png CSS reference: CSS file: audio.css Class selector: .audio-adornment-start
276
HTML5
The audio icon shown when the audio file is being played. Image: audio-stop-overlay.png CSS reference: CSS file: audio.css Class selector: .audio-adornment-stop
A
A
slideshowIcon
The Slide Show overlay is controlled by the following image and CSS reference: Image: slideshow-icon.png CSS reference: CSS file: slideshow.css Class selector: .slideshow-adornment
277
HTML5
TOC List
Figure 7.3. Tapping the TOC button in the top toolbar brings up the TOC List
278
HTML5
7.4 Video
For the video functionality, overlay images can be customized. Overlay images are icons that appear over other objects to indicate their intention or state. For videos, an icon is available to indicate that the image on the page is in fact a Video. This icon is positioned in the center of the image. The following image can be customized:
The Video overlay is controlled by the following image and CSS reference: Image: video-play-overlay.png CSS reference: CSS file: video.css Class selector: .video-adornment
C D A
Figure 7.3.2. The Description and Story Title properties as entered in the Dossier property dialog box (top) is used for displaying the story title and description in the TOC List (bottom)
Accessing the Dossier properties can be done by using Content Station or Smart Connection for InDesign.
279
HTML5
A Story Description property B Story Description displayed in Reader C Story Title property D Story title displayed in Reader
videoEnabledIcon
Step 3. Paste the content into the following location of the Reader App:
./content
This is the default location; custom locations can be defined by means of the following setting in the DMSettings file:
M ag a z i n e Co n f i g u r a t i o n U RL .
280
HTML5
Step 2. Open the html 5/content folder and copy its content.
281
HTML5
282
283
284
App
App, an overview of the available issues is received from the Content Delivery Platform. (Issues available via subscription are shown in the Library.) received from the Content Delivery Platform.
devices with which issues can be viewed that have not yet been published. Also, the payment process is bypassed, so no purchasing is required in the case of paid issues. This allows testing of content before it is made live to end users. It acts as a bridge between an external Subscription server and the Reader App.
Availability
The Content Delivery Platform is available as a service hosted by WoodWing. For more information, see http://www.woodwing.com/en/digital-magazine/ content-delivery-service.
app store
Figure 1. For versions of the Reader App containing a Store, the user downloads an empty Reader App from the App Store and accesses the Content Delivery Platform to see which issues are available. When downloading an issue, the magazine content is received from the Content Delivery Platform
285
2. Distribution Workflow
The workflow for distributing a Reader App with Store functionality can be split into two parts: 1. Distributing the Reader App1 2. Distributing the magazine content in the form of issues Each part is explained in the following sections.
For submitting Android Reader Apps, follow the guide lines as provided by the relevant store.
To submit the Pro, Framework, Subscription, or Apple Subscription Reader App to the iTunes App Store, perform the following steps: For a detailed, step-by-step guide of this whole process, download the iTunes Connect Developer Guide (see chapter 1, Intro section 3, Additional Documentation for a download link). Step 1. Log in to iTunes Connect: https:// itunesconnect.apple.com/. Step 2. Register the Reader App with the App Store by providing all the relevant details about the Reader App as well as screenshots for display in the App Store. Step 3. Upload the Reader App to iTunes by using Apples Application Uploader. After completing the upload process, the Reader App needs to be approved by Apple.
The Store is available as an HTML Store and does not necessarily have to be integrated in the Reader App, it can also be hosted separately.
1
Step 4. When one or more issues have been made available for download (see section 4.
286
Distributing Issues) release the Reader App to go live in the App store. This can be done automatically (as soon as the app is approved), or manually.
iTunes Connect Developer Guide (see chapter 1, Intro section 3, Additional Documentation for a download link). by the relevant store.
287
4. Distributing Issues
The workflow for distributing an issue is as follows: Step 1. (Paid issues only, only available for the iPad Reader App version) Register the issue with the iTunes Connect service as an In-App Purchase. Step 2. Register the issue with the Content Delivery Platform. Each step is explained in the following sections.
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.
288
A Layout Sizes
In chapter 5, Creating Content, the concept of using a DM Artboard is explained in which layouts do not have to be created in a specific size. However, it is practical to create the layout in the size of the largest device. Also, the DM Artboard concept supports creating content for a single device, without the use of an artboard (although it is recommended to configure artboards). This all means that at some stage you want to create a layout in the exact dimensions of a particular device. This appendix provides the information for achieving this.
1. Formula
To calculate the exact page size for a specific device, the following formula is used: [page width or page height in pixels]/[dpi value] in (Where in stands for inches1) For example, calculating the width of a page for a device which is 1024 pixels wide and uses a 132 dpi setting, the following calculation would be performed: 1024/132 in = 558.5 points The easiest way of calculating this is to enter the formula straight into the Page Size Width or Height boxes of the New Document dialog box in InDesign. When pressing the Tab key to tab out of the width or height box, InDesign will automatically calculate the entered fracture into the correct value, and present it in the measuring unit that InDesign is set to. Some widely used values are shown in section 1.1 Device Settings.
Instead of in, you can also type inch. Note that when using a non-English version of InDesign, you might have to enter the translated version of inch.
1
289
Apple iPad
Width: 1024 pixels Height: 768 pixels Dots per inch: 132 dpi
However, due to the height of the iPads toolbar of 20 pixels, the actual working area is as follows: Page in landscape orientation: Width: 1024 pixels Height: 748 pixels Page in portrait orientation: Width: 768 pixels Height: 1004 pixels
Samsung Galaxy
Width: 1024 pixels Height: 600 pixels Dots per inch: 169 dpi
However, due to the height of the Galaxys toolbar of 38 pixels, the actual working area is as follows: Page in landscape orientation: Width: 1024 pixels Height: 562 pixels Page in portrait orientation: Width: 600 pixels Height: 986 pixels
290
Table 3.1a. Page dimensions converted to various units of measurements for use on the iPad Size dpi 748 pixels 768 pixels 1004 pixels 1024 pixel 132 132 132 132 Picas 34p0 34p10.9 45p7.636 46p6.5 Points 408 pt 418.9 pt 547.6 pt 558.5 pt Inches 5.6667 in 5.8181 in 7.6061 in 7.7569 in Value Millimeters 143.933 mm 147.779 mm 193.194 mm 197.026 mm Centimeters 14.3933 cm 14.779 cm 19.3194 cm 19.7026 cm
Table 3.1b. Page dimensions converted to various units of measurements for use on the Samsung Galaxy Size dpi 562 pixels 600 pixels 986 pixel 1024 pixels 169 169 169 169 Picas 19p11.432 21p3.621 35p0.071 36p4.26 Points 239.4 pt 255.621 pt 420.071 pt 436.26 pt Inches 3.3254 in 3.5503 in 5.8343 in 6.0592in Value Millimeters 84.466 mm 90.178 mm 148.192 mm 153.903mm Centimeters 8.4466 cm 9.0178 cm 14.8192 cm 15.3903 cm
291
strike-through
This is done by using the XHTML 1.1 / CSS 2.1 format, thereby offering a vast amount of styling possibilities and features (such as applying background color, border styles, etc.). This can even be controlled down to Brand or Issue level.
This feature is expressed in a HTML element and can therefore be styled as such
1
292
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
article.
Enterprise can be set up in such a way that any selected image frames are automatically made part of an article. However, articles intended to be used for Text View mode are not allowed to contain any images. Check with your administrator if this feature is enabled. (Optional, depending on your companys setup) Once the article is created, check that no article components containing an image exist in the article by verifying the articles content in the Smart Connection panel, the Elements panel or in Content Station. Should any image component exist, delete it from the article.
Place an already created article (created
293
article component. The name of the Element label is then mapped to the CSS style. styles. The name of the paragraph or character style is then mapped to the CSS style.
flattened (meaning that the applied formatting is lost) and Web styles (CSS) are used instead. respected. (For limitations concerning using overrides, see section 4. About Overrides.)
This method helps in standardizing the method of using the Text View Markup feature while altering the look and feel of the publications it is applied to. Each method is further explained in the following sections.
Your system administrator will have set up the required Element labels and will have made sure that they are mapped to the corresponding CSS style. Check with the administrator which Element label should be applied in order to achieve a particular styling effect. When using this method, styling the article text is not actually necessary; the Element label to CSS mapping will take care of this. You could therefore have a very basic looking article which will display highly styled in the Digital Magazine Reader App. On the other hand, you can use this method to label styled articles in a fully designed layout in landscape orientation for creating a Text View version which will look completely different due to the mapping between Element labels and Web styles.
294
4. About Overrides
When applying a manual override to a particular style, such as applying a bold style to a paragraph style which turns the paragraph into italic text, take note of the following:
Font sizes must be defined in ems in the CSS
required InCopy
The method works by applying paragraph styles, character styles, or table styles to the text or table. The names of the applied styles are then mapped to the corresponding name in the style sheet. When using this method, take note of the following:
Manually applied overrides to styles are
respected. (For limitations concerning using overrides, see section 4. About Overrides.)
Unknown styles are flattened. The use of special characters in the style
name is supported.
Your system administrator will have set up the required paragraph/character/table styles and will have made sure that they are mapped to the corresponding CSS style. Check with the administrator which style should be applied in order to achieve a particular styling effect.
295
5. Using Tables
Another powerful advantage of the Text View Markup feature is the fact that it supports tables. When including a table in your article, take note of the following:
Table style definitions are not exported. Table style names are exported and can be
6. Known Limitations
The following are not supported by the Text View Markup feature:
Font family mapping Font mapping by using the DigitalMagazineInline images Shapes (including lines) Text indents Cross-references Text frame properties such as multiple Print-specific features such as tracking, kern-
Defs.xml file
Bodies, headers and footers are supported. Table features such as merged cells and bor-
columns
296
Images can also be included by referencing them in the CSS files. This can be used for instance to automatically include an icon anywhere in the text, or to create a background image/pattern. Check with your system administrator if images are added in this way.
(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
297
C Image Dimensions
This appendix provides an overview of the dimensions of the customizable Reader App images. Some images used on Android devices are NinePatch graphics; these are identifiable by their f i l e n a m e w h i c h e n d s w i th a 9 (s u c h a s downloadleft.9.png). Information about such files can be found here: http://developer.android.com/guide/ developing/tools/draw9patch.html.
1. iPad
The table on the following pages lists the image dimensions used for the iPad Reader App (in alphabetical order).
14
Table 1. iPad image dimensions (in pixels) Dimensions Image name accountIcon.png accountSelectedIcon.png audio_controller.png audioControlBG.png audioControlDisabled.png audioControlPlay.png audioControlSliderBGDark.png audioControlSliderBGLight.png audioControlSliderButton.png audioControlStop.png audioPlayDisabledIcon.png audioPlayEnabledIcon.png audioStopEnabledIcon.png audioTopBarIcon.png audioTopBarSelectedIcon.png back_grey.png back_white.png backIcon.png backSelectedIcon.png bookmarkAdd.png bookmarkTopBarIcon.png bookmarkTopBarSelectedIcon.png bottombar.png checkbox.png checkboxChecked.png 16 16 47 47 20 52 52 not used 16 16 (Continues on next page) 404 37 37 32 32 14 37 36 36 36 50 50 not used not used 50 50 20 47 47 width 138 138 not used 146 28 28 9 9 14 28 36 36 36 47 47 height 92 92
15
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name close_white.png closeButton.png closeButtonDefaultState.png customicon.png customselectedicon.png default_thumb.png Default-Landscape.png Default-Portrait.png Default.png downloadbackground.9.png downloadleft.9.png downloadFailedErrorLabel.png downloadFailedReloadButton.png downloadFailedReloadButtonPressed.png facebook.png feedIcon.png feedSelectedIcon.png flipviewBackground.png flipviewBullet.png flipviewCloseButton.png flipviewIcon.png flipviewSectionBackground.png flipviewSelectedIcon.png flipviewSelectedSectionButton.png forwardIcon.png 75 75 1024 9 21 75 768 75 1 47 303 44 44 not used 50 50 225 9 21 50 23 50 23 50 (Continues on next page) 1024 768 768 not used not used 30 31 31 748 1024 1024 34 30 not used not used width not used 35 30 height
16
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name forwardSelectedIcon.png galaxytoc.png gridViewBackground.png gridViewBackgroundFirstRow.png headerBackground.png headerBarShadow.png helpIcon.png helpSelectedIcon.png homeIcon.png homeSelectedIcon.png Icon.png issueShadow.png issueShadowLarge.png libraryDownload.png libraryDownloadPause.png libraryDownloadRefresh.png libraryEmptyShelf.png libraryFirstShelf.png libraryIcon.png librarySelectedIcon.png libraryShelf.png libraryUpdateIcon.png libraryUpdateSelectedIcon.png loginDialogBackground.png line.png 768 768 325 1 75 75 75 75 72 181 475 75 75 75 1024 1024 75 75 1024 75 75 325 not used (Continues on next page) width 47 not used 299 351 77 8 50 50 50 50 72 11 33 40 40 40 220 351 50 50 300 50 50 355 height 50
17
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name maximize.png minimize.png next.png noInternetConnectionBackground.png noInternetConnectionLabel.png pageScrubberBackground.png pageScrubberButton.png pageScrubberTrackLeft.png pageScrubberTrackLeft9.png pageScrubberTrackRight.png pageScrubberTrackRight9.png passDialogBackground.png pause.png play.png prev.png previewHeaderBackgroundLandscape.png previewHeaderBackgroundPortrait.png previewShadowLandscape.png previewShadowPortrait.png progressiveDownloadOverlayBar.png segmentedControlGridButton.png segmentedControlSingleIssueViewButton.png segments_shadow.png segments_stack_background.png shadowBarVertical.png 1 1 8 1 1024 13 13 768 189 8 325 not used not used not used 562 249 1 8 111 13 12 22 228 1 (Continues on next page) 32 not used 330 6 196 1024 26 32 not used 9 width not used not used not used 164 14 37 26 9 height
18
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name shareFacebook.png shareFacebookDisabled.png shareMail.png shareMailDisabled.png shareTableIcon.png shareTableSelectedIcon.png shareTwitter.png shareTwitterDisabled.png singleIssueViewBackground.png singleIssueViewBackgroundLandscape-old.png singleIssueViewBackgroundLandscape.png singleIssueViewBackgroundPortrait.png slideshowIcon.png storeclosebutton storeHeader.png storeIcon.png storeNoInternetErrorBackground.png storeNoInternetErrorLabel.png storeSelectedIcon.png stretchablePostButton.png stretchablerectbutton.9.png stretchableStoreButton.png stretchablestorebutton_disabled.9.png stretchablestorebutton.9.png stretchableSubscribeButton.png 20 13 not used not used 38 (Continues on next page) 1024 75 1 273 75 20 not used 26 width 54 54 54 54 55 55 54 54 768 768 1024 768 36 not used 42 50 58 20 50 36 height 54 54 54 54 50 50 54 54 614 704 661 917 36
19
Table 1. iPad image dimensions (in pixels) (Continued) Dimensions Image name stretchableSubscriptionStoreButton.png subscriptionFormBackground.png textViewHeader.png textViewImagesShadow.png tocIcon.png tocSelectedIcon.png tocTableIcon.png tocTableSelectedIcon.png tocThumbBackground.png tocThumbBackgroundVertical.png transparentImageForFlipviewButton.png topbar.png twitter.png UpdatableIssueIcon.png videoDisabledIcon.png videoEnabledIcon.png 23 36 36 width 20 1 768 768 75 75 47 47 78 57 150 not used not used 23 36 36 height 36 145 20 20 50 50 50 50 57 76 110
20
2. Android
The table below lists the image dimensions used for the Android Reader Apps (in alphabetical order). Table 2. Android image dimensions (in pixels) Android 1.3 (Froyo) Image name accountdisabledicon.png accounticon.png accountselectedicon.png action_bar_action_overflow_pressed_background.png action_bar_action_pressed_background.png action_bar_tab_selected_pressed.png action_bar_tab_selected.png action_bar_tab_unselected_pressed.png action_bar_tab_unselected.png audiocontrolsliderbutton.png audioplaydisabledicon.png audioplayenabledicon.png audiostopenabledicon.png back_white.png backdisabledicon.png backicon.png backselectedicon.png bottombar.png checkbox.png checkboxchecked.png closebutton.png closebuttondefaultstate.png 47 47 1 16 16 34 32 14 36 36 36 54 not used 50 50 50 16 16 35 32 16 16 34 32 75 75 not used not used not used not used not used not used 14 36 36 36 32 width not used 51 50 1 1 1 1 1 1 14 36 36 36 54 47 47 not used not used 16 16 35 32 height Android 1.3 (Honeycomb) width 75 75 not used 47 56 56 9 56 3 14 36 36 36 32 50 50 height 51 51
21
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name customicon.png customselectedicon.png downloadbackground.9.png downloadfailederrorlabel.png downloadfailedreloadbutton.png downloadleft_disabled.9.png downloadleft.9.png feedicon.png feedselectedicon.png flipviewbackground.png flipview_bottom_shadow flipviewbullet.png flipviewclosebutton.png flipview_close_background.png flipview_close_icon.png flipview_section_background_unselected flipviewicon.png flipviewsectionbackground.png flipviewselectedicon.png flipviewselectedsectionbutton.png forwarddisabledicon.png forwardicon.png forwardselectedicon.png gridviewbackground.png gridviewbackgroundfirstrow.png headerbackground.png 323 47 47 not used not used 77 323 1 75 1 75 1 not used 50 50 9 21 not used not used 39 50 23 50 23 1 55 47 not used not used not used 77 (Continues on next page)
22
Android 1.3 (Honeycomb) width 75 not used 15 1 24 15 15 75 not used 3 1 9 not used 228 20 1 75 1 not used 23 50 50 29 20 39 50 23 225 4 9 11 101 28 11 11 50 height 50
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name headerbarshadow.png helpicon.png helpselectedicon.png homeicon.png homeselectedicon.png icon.png (res/drawable-ldpi) icon.png (res/drawable-mdpi) icon.png (res/drawable-hdpi) librarydownload.png librarydownloadpause.png librarydownloadrefresh.png library_login_icon.png library_logout_icon.png library_shelf_issue_drop_shadow.png library_shelf_landscape.png library_shelf_portrait.png library_top_bar.png libraryicon.png libraryselectedicon.png logindialogbackground.png magazine_selected_icon.png magazine_icon.png maximize.png minimize.png next.png nointernetconnectionbackground.png 75 75 325 75 72 47 47 67 6 75 75 75 75 36 48 72 60 60 60 not used not used not used not used not used not used 50 50 355 50 50 47 47 47 164 72 47 47 67 6 325 not used 50 47 47 47 164 width not used 50 50 50 50 36 48 72 35 35 35 36 48 72 60 60 60 75 75 223 1280 800 1 75 not used 355 75 not used 36 48 72 35 35 35 51 51 239 364 364 42 50 75 not used 50 height Android 1.3 (Honeycomb) width not used 50 height
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name nointernetconnectionlabel.png pagescrubberbackground.png pagescrubberbutton.png pagescrubbertrackleft9.png pagescrubbertrackright9.png passdialogbackground.png pause.png play.png popup_background.9.png prev.png progressivedownloadoverlaybar.png slideshowicon.png storeheader.png storeicon.png storeselectedicon.png stretchablerectbutton.9.png stretchablestorebutton_disabled.9.png stretchablestorebutton.9.png textfield_activated_holo_light.9.png textfield_default_holo_light.9.png textfield_disabled_focused_holo_light.9.png textfield_disabled_holo_light.9.png textfield_focused_holo_light.9.png textfield_multiline_activated_holo_light.9.png textfield_multiline_default_holo_light.9.png 67 1 36 1024 75 75 12 17 17 not used not used not used not used not used not used not used 42 21 not used not used not used not used (Continues on next page) 67 67 not used 47 91 36 42 50 50 28 22 22 12 17 17 not used 18 18 75 not used 28 22 22 width 196 1 26 34 34 not used 47 47 67 67 70 67 1 36 not used 50 height 14 37 26 26 26 Android 1.3 (Honeycomb) width 196 1 26 34 34 not used 47 47 22 47 91 36 height 14 37 26 26 26
24
Table 2. Android image dimensions (in pixels) (Continued) Android 1.3 (Froyo) Image name textfield_multiline_disabled_focused_holo_light.9.png textfield_multiline_disabled_holo_light.9.png textfield_multiline_focused_holo_light.9.png textview_mode_not_supported.9.png tocicon.png tocselectedicon.png topbar.png videodisabledicon.png videoenabledicon.png 3 75 75 1 36 36 width not used not used not used 3 50 50 48 36 36 36 36 3 75 not used not used 36 36 height Android 1.3 (Honeycomb) width not used not used not used 3 50 height
25
3. HTML Store
The following table lists the image dimensions used for the HTML Store (in alphabetical order). Table 3. HTML Storeimage dimensions (in pixels) Image name bg-rail-vertical.png bg-rail.png button.png checkbox.png checkboxChecked.png checkmark.png closeButton.png gridview-icon-active-button.png gridview-icon-button.png gridview-item-shadow.png gridview-shelf.png GridViewIcon.png single-bg.jpg single-shelf.png SingleViewIcon.png Width 1600 48 101 16 16 16 36 53 53 164 2 13 1024 1024 13 Height 48 1600 28 16 16 16 36 28 28 9 290 13 470 62 12
26
Table 4. HTML5 Reader App image dimensions (in pixels) - continued Image name scrollbar-thumb-hor.png scrollbar-track.png scrollbar-track-hor.png slider-bg.png slider-button.png slideshow-icon.png tocTableHoverIcon.png tocTableIcon.png tocTableSelectedIcon.png tocHoverIcon.png tocIcon.png tocSelectedIcon.png video-play-overlay.png Width 91 9 571 1 24 36 55 55 55 111 111 111 36 Height 9 571 9 34 24 36 38 38 38 62 62 62 36
27
1. File Format
A Widget is stored in the Enterprise system as a .htmlwidget file. This is essentially a zipped file with a changed extension. By changing the extension to .zip, the file can be unpacked.
28
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. describing the fields which can be modified.
A manifest.xml file. A configuration file One or more Javascript files. CSS files. (Optional) Sources files. Depending on the type of
string)
All files are created in the regular manner of creating a HTML5 component, with the exception of the manifest.xml file. The creation of this file is described in section 3. Creating the manifest.xml File. Once the magazine has been exported, the magazine.zip file contains the following Widget files:
All files that were part of the Widget bundle
For a detailed description of the use of these fields, see the wwdmmanifestv1.xsd file (available from the Enterprise Development page on the Community Site http://community.woodwing.net/products/Enterprise%20 7.0.x/Development). To create a manifest.xml file, perform the following steps: Step 1. Create an XML file using your favorite XML editor. Step 2. Add the minimum content as shown in figure 3 on the next page. Note that <rootfile> holds the file which should be loaded by the Reader App. Step 3. In the <properties> section, add the required fields. Step 4. Save the file as a manifest.xml.
(see above but with the exception of the manifest.xml file). tain the results of the settings chosen in the Widget panel in InDesign. Both have the same content. by making use of the available options in the Widget panel in InDesign.
29
Descriptions can be added to property (in the form of <description> tags), in order to explain in more detail what the option should be used for. When a description exist, a Help icon appears in the Widget panel. When the user hovers the mouse over the icon, the description will appear as a tooltip.
<?xml version="1.0" encoding="UTF-8"?> <manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" usedSchemaVersion="1.0"> <widget widgetVersion="1.0"> <description src="http://some.url/providing/more/information">This is the main description of the Widget.</description> <rootfile>main.html</rootfile> <properties> </properties> </widget> </manifest>
Figure 3. The default content of the manifest.xml file
For an example of a manifest file, see the provided Widget samples on the Community site.
30
Widget will not appear in the Widget list of the Widget panel.
31
1. File Structure
The settings in the DMSettings file have been grouped together as follows:
For iPad/Android
Content toolbar.
Navigation. Settings for navigating the Colors. Controls the colors for various Reader
components.
Fonts. Settings for using fonts. Intents. Controls functionality for specific
buttons.
TOC Popup. Settings for the TOC List. Bookmark Popup. Set tings for the
Bookmarks List.
Library. Settings related to the Library. Metrics. (Android only) Settings related to the
2. Features by Platform
Various versions of the Reader App exist (for iPad, Android devices and now also for HTML5 Web browsers). While they share most of the functionality, differences also exist. These differences could be because features are specific to a particular platform only, or because the development of one Reader App is not yet as advanced of another. For a comparison of each DMSettings option and their availability for each Reader App version, see table 2 on the next page. In this table, the features for the Android Reader App are presented for each compatible Android operating system.
For HTML5
files.
Content. Settings for the location of source Hotzones. Hotzone settings. Navigation. Settings for navigating the
Reader App.
33
Table 2. DMSettings option - compared by Reader App Feature Enable partial page sharing Share page Share Toolbar Enable share toolbar Enable twitter Enable facebook Enable email sharing Force non-progressive downloads Resumable downloads Subscriptions Switch to library after login Library cache time Disable offer in portrait mode Open subscription page in Safari Store Enable subscribe button Enable existing subscriber button Reset password License agreement Privacy notice Customer service Default to gridview in store Enable filter iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
Table 2. Reader App features Reader App (Continued) Feature Enable 3G Downloading Store (Continued) HTML Store URL HTML Store fallback URL Enable external subscription server Always open in store Enable audio control in toolbar Enable bookmarks in toolbar Show toolbar on opening issue Always show toolbars Bottom toolbar always on ToolbarItems itemX Buy Navigation itemX Library itemX Magazine itemX Home item4 TOC itemX External Back itemX Help itemX FlipView itemX Feed itemX Account iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
35
Table 2. Reader App features Reader App (Continued) Feature ToolbarItems (Continued) itemX Custom Button itemXBack itemXForward Enable top toolbar Enable fullscreen newsfeed Start with newsfeed Allow fullscreen object rotation when locked Force fullscreen video orientation Horizontal page navigation Navigation (Continued) Right to left support Scroll sections with two-finger swipe History buttons in bottom toolbar Newsfeed URL Custom Button URL Orientation lock Continue audio within article Back to issue button Enable TOC List in toolbar Top toolbar always on Maximum number of toolbar items iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
Table 2. Reader App features Reader App (Continued) Feature Navigation (Cont.) Show FlipView on show Toolbar Page sharing table info text color Page sharing table info color Inpage downloading label color Downloading label color Percentage label color Inpage percentage label color Sign-in disclaimer text color Sign-in license text color Sign-in privacy text color Colors Sign-in remember checkbox text color Sign-in forgot button text color Sign-in submit button text color Sign-in email field text color Sign-in password field text color Sign-in dialog title text color Enable transparent Web Elements TOC selected row color Bookmark selected row color Application toolbar Flipview background color iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
Table 2. Reader App features Reader App (Continued) Feature Flipview text Flipview section text color Flipview section text color selected Flipview story name color Flipview story description color Flipview empty thumb border Store colors Library title color Library segment top background color Library segment bottom background color Colors (Continued) Library issue update available color Library segment overview issue name color Library segment overview issue number color Library segment overview cover story color Store toolbar Store subscription title button Store title button Library segment overview download button Store background color Available issues text color Available issues shadow color iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
Table 2. Reader App features Reader App (Continued) Feature Store colors Library issue name color Library issue number color Colors (Continued) Library background color Library download bar color Library issue download progress color Library issue download status color Enable native scrolling indicators Percentage label font Inpage percentage label font Downloading label font Inpage downloading label font Sign-in fonts Issue description font Fonts Flipview title font TOC cell story title font TOC cell story description font Bookmark cell issue title font Bookmark cell story title font Bookmark cell story description font iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
Table 2. Reader App features Reader App (Continued) Feature Flipview story name font Flipview story description font Store fonts Library title font Library issue download available font Library issue update progress font Fonts (Continued) Library issue download status font Available issues text font Library issue name font Library downloaded bytes font Library issue number font Library segement overview issue name font Library segment overview issue number font Library segment overview cover story font Intents Help TOC Popup height Popup width Popup height Popup width
40
iPad 2.1
HTML5 1.0
TOC Popup
Bookmark Popup
Table 2. Reader App features Reader App (Continued) Feature Tap bottom to show toolbar Tap top to show toolbar Tap sides to navigate Touch areas Hotzones bottom area height top area height left area width right area width Keep underlying interactive elements active Show story bullet Page scrubber enabled Show flipview header Show story description Show section labels Flipview Thumbs Minimum page thumb height Maximum page thumb height Make thumbs orientation aware Margins Flipview article thumb margin Flipview page thumb margin iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
Table 2. Reader App features Reader App (Continued) Feature Pages top margin in flipviewer Flipview (Continued) Flipview thumb margin Show page number Auto open magazine Show progress in megabytes Library Enable login button Enable library filter Enable library segment filter Fitting Fit mode Check device metrics Metrics Device metrics warning URL Device width Device height Device dpi Content Resolution Tracking Web Element Popup Newsstand Content Horizontal Vertical Tracking Scale content to fit screen Open issue on App open iPad 2.1 Android 1.3 Froyo Honeycomb HTML5 1.0
42
3. Overview
The following sections provide a description of each setting. Note that in order to make a feature work, a combination of different settings from different groups is sometimes required. For instance: when using the Content Sharing functionality, the top Toolbar also needs to be displayed. For an overview of which settings to use for a particular feature, see the customization chapters.
Share page
Enable twitter
Makes the Twitter service available as an option in the Share Content list.
Enable facebook
Makes the Facebook service available as an option in the Share Content list.
Makes the email service available as an option in the Share Content list.
43
(Non-iTunes subscriptions only) Enables the Subscribe button in the Subscription section of the Store.
Forces the Reader App to use the non-progressive download method, by which the issue has to be fully downloaded before the user can start reading. Default setting is off, so that the Reader App uses the progressive download method, by which the user can start reading while most of the issue is downloaded in the background.
(Non-iTunes subscriptions only) Enables the Existing Subscriber button in the Subscription section of the Store.
Reset password
(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server, which stores the link to the Web page where a user can change the password for the subscription account.
Resumable downloads
Controls whether the downloading of a magazine can be broken off and resumed at a later stage.
License agreement
Subscriptions
(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) Allows the user to switch straight to the Library after logging in.
(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to view with information about how the users data is gathered, used, and managed.
The time after which issues that are part of a subscription are refreshed in the Library.
Customer service
(Non-iTunes subscriptions only) Hides the offer pane in the Subscription section of the Store when the digital device is rotated to landscape orientation.
(Non-iTunes subscriptions only) Value linked to the same value on the Subscription server which stores the link to the Web page which users can use to access their subscription account details.
(Non-iTunes subscriptions only) Opens the page for subscribing to a subscription in the Safari Web browser.
Defines if the Reader App should start the Store in Grid view or Single Issue view.
Enable filter
Enables a filter in the Store view, allowing the Reader App to filter issues as defined by the filter data on the Content Delivery Platform.
44
Allows downloading via a 3G account. The URL pointing to index-android.html of the HTML Store. Possible values:
Blank: the packaged HTML store as part of
When enabled, the Store is automatically accessed as soon as the Reader App is launched.
The URL pointing to a local HTML file. This file is loaded when the HTML Store is not acccessible.
When enabled, the audio control button will appear in the top toolbar. Tapping it will display the audio control, with which the playback of audio files (started manually or automatically) can be controlled.
When enabled, the Bookmarks button will appear in the top toolbar. Tapping it will display the Bookmarks list, with which favorite stories can be bookmarked or quickly accessed.
When enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) is automatically displayed as soon as the magazine issue is opened.
When enabled, the Navigation bar and top Toolbar (Froyo) or the Action bar (Honeycomb) will always be displayed, without the user being able to hide them.
When enabled, the Navigation bar is always displayed and cannot be hidden by the user.
Toolbar Items
Controls the order and number of the buttons in the Navigation bar. Rearrange the order by dragging/placing each key to its required position. For the Android Reader App v1.x (Honeycomb) version, remember that reordering items lower in the
45
list can result in these items ending up in the Overflow menu. Default items are:
Buy. The Store button for accessing the Store. Library. The Library button for accessing the
Library. cover.
Home. The cover button for accessing the Magazine. When an issue is open but not
Enables the Newsfeed to be displayed full screen. Opens the newsfeed page when the App is launched.
currently being viewed (for instance when the Store is being viewed), this button allows the user to return to the issue. of contents page.
TOC. The TOC button for accessing the table External Back. Button for returning to
When enabled, all pages of all stories are presented next to each other. Navigation needs to be done by swiping horizontally. When not enabled, all pages of each story are presented one above the other. Navigation needs to be done vertically (from page to page) and horizontally (from story to story).
Help. The Help button for accessing the Help Flipview. The contents button for accessing
Enables the right-to-left support; scrolling through the magazine will be reversed.
the Story Viewer / Page Viewer and the Section Viewer. Newsfeed page.
Can only be used together with Horizontal Page Navigation enabled. When enabled, navigating from one story to another can be done by swiping using two fingers.
Feed. The Newsfeed button for accessing the Account. The account button for accessing
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.
with custom information such as privacy information. The URL to the page is defined by the Custom Button URL setting (see below).
Newsfeed URL
46
The URL for the Custom View (a Web page with custom information such as privacy information).
Magazine in package
For enabling/disabling the Back to Issue button in the Library. (The Back to Issue button in the Store is not influenced by this setting).
(Android Reader App only) Boolean property to indicate that the magazine is packaged into the app. The packaged magazine location is DigiMagTemplate\assets\ magazine. Create this folder either in Eclipse or directly on the file system.
Audio keeps playing while swiping from page to page within the same article
Orientation lock
Controls in which modes pages are shown: landscape and portrait mode (default setting), landscape mode only, or portrait mode only. When set to landscape or portrait mode only, the page is not rotated when the user rotates the device.
Audio keeps playing when the same audio file is placed on the horizontal and vertical page of the same story and the user changes the orientation. When the user subsequently navigates to a different page within that story (still within the same orientation), the audio also continues playing.
For enabling/disabling the TOC List in the top Toolbar. When enabled, the top Toolbar bar is always displayed and cannot be hidden by the user.
(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.
Videos displayed in fullscreen mode can be forced to be displayed in landscape mode across the height of the device. This means that the Tablet will have to be held in landscape orientation in order to view the video properly. Most likely use case: when the Reader App is locked to portrait orientation, videos played in fullscreen mode are shown (and locked) in landscape orientation, as this orientation better suits fullscreen video. In order for this feature to work, the Orientation lock feature (see above) also needs to be enabled. However, this is not necessary when an Android version of the Reader App is used.
(Android Reader App Honeycomb only) Defines the maximum number of items to appear on the righthand side of the Action bar. Maximum number to be set is 6.
Controls whether the Flipview should be shown each time the Navigation bar (Froyo) or Action bar (Honeycomb) is shown.
47
(Non-iTunes subscriptions only) Color of the I forgot my password title in the Sign-in dialog box.
(Non-iTunes subscriptions only) Color of the Submit button label in the Sign-in dialog box.
The background of the info page title area (the screen shown when the user needs to make a choice of sending a full page or a part of a page).
(Non-iTunes subscriptions only) Color of the Email Address title in the Sign-in dialog box.
Color of the Downloading label on a page. Color of the Downloading label in the Page Viewer / Story Viewer.
(Non-iTunes subscriptions only) Color of the Password title in the Sign-in dialog box.
(Non-iTunes subscriptions only) Color of the text in the Sign-in dialog box header.
Color of the download percentage label in the Page Viewer / Story Viewer.
Color of the download percentage label on a page. (Non-iTunes subscriptions only) Color of the disclaimer title in the Sign-in dialog box.
(Non-iTunes subscriptions only) Color of the License agreement title in the Sign-in dialog box.
Application toolbar
(Non-iTunes subscriptions only) Color of the Privacy title in the Sign-in dialog box.
The color of the Flip View background, shown behind the story previews. To get a transparent color, set an alpha value lower than zero.
(Non-iTunes subscriptions only) Color of the Remember Me title in the Sign-in dialog box.
Flipview text
The color of the Flip View header and issue description shown at the top.
48
The color of the Issue Download button on the Library Segment Overview page.
The color of the text in the Section viewer in its selected state.
The color of the story description below the story preview. Color of the border for an empty thumbnail in the Page Viewer / Story Viewer.
Store toolbar
The color of the Store title (in the top navigation bar).
The background color of the top area of the Library Segment Overview page.
The color of the Buy, Preview, Submit, Download and Pause button labels.
The background color of the bottom area of the Library Segment Overview page.
The background color of the Store (visible when no shelves are visible, in case you have no issues bought or when there is no internet connection available).
The color of the Available issues: header at the top of the issues grid.
The color of the issue number on the Library Segment Overview page.
The color of the shadow of the Available issues: header at the top of the issues grid.
The color of the cover story title on the Library Segment Overview page.
49
The color of the string that indicates the download progress in bytes.
3.3.2 Font Settings Inpage downloading label font Downloading label font
The font of the downloading label on a page. The font of the downloading label in the Page Viewer / Story Viewer.
The color of the issue number in the Library. The color of the Library background.
Native scrolling indicators for Scrollable Areas are a way to indicate to the user that the frame contains scrollable content. When enabled, the edges of the frame on those sides to which the content can be scrolled appear faded. For example: for Scrollable Areas in which the content can be scrolled horizontally, the left- and righthand sides of the frame become faded; for Scrollable Areas in which the content can be scrolled vertically, the top and bottom sides of the frame become faded.
The font of the percentage label on a page. The font of the percentage label in the Page Viewer / Story Viewer.
Sign In fonts
(Non-iTunes subscriptions only) Font setting for fonts of the subscription Sign In dialog box:
Disclaimer text font. The font of the
Disclaimer text in the Subscription Sign In dialog box. text in the Subscription Sign In dialog box. in the Subscription Sign In dialog box.
License text font. The font of the License Privacy text font. The font of the Privacy text Remember checkbox font. The font of the
Remember Me text in the Subscription Sign In dialog box. my password text in the Subscription Sign In dialog box. button label in the Subscription Sign In dialog box.
50
The font of the Store title (in the top navigation bar).
Password box in the Subscription Sign In dialog box. Subscription Sign In dialog box.
Library issue download progress font Library issue download status font Available issues text font Library issue name font
The font of the download progress label in the Library. The font of the download status label in the Library. The font of the Available issues: text. The font of an issue in the Library.
The font of the downloaded bytes label in the Library. The font of the issue number in the Library.
The font of the story description in the TOC list. The font of the story name/title in the Flipview.
The font for the issue name on the Library Segment Overview page.
Flipview story description font Bookmark cell issue title font Bookmark cell story title font
The font of the story description in the Flipview. The font of the issue title in a Bookmark. The font of the story title in a Bookmark.
The font for the issue number on the Library Segment Overview page.
The font for the cover story title on the Library Segment Overview page.
51
Defines the height of the TOC List. Defines the width of the TOC List.
tions to the Help button in the Navigation bar. in the Navigation bar.
52
Defines the height of the Bookmarks List. Defines the width of the Bookmarks List.
Activates the bottom Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.
Activates the top Hotzone. When tapped, the Navigation bar and optionally the top Toolbar will appear.
Activates the Hotzones to the left and right of the screen. When tapped, the user will be navigated to the next or previous story/page respectively (depending on the type of navigation which has been chosen).
Touch areas
(iPad/Android Reader App only) Defines the height of the top Hotzone. Hotzone.
left area width. Defines the width of the left right area width. Defines the width of the
right Hotzone.
When enabled, the functionality of interactive elements (such as Slide Shows, videos, etc) which are
53
obscured by a Hotzone can be accessed and is not blocked by the overlaying Hotzone.
Defines whether or not a bullet should be shown next to each issue name in the Flip Viewer.
Defines whether or not the Flip Viewer header should be shown (if not, the Title, Description and Close button of the Flip Viewer disappear).
Defines whether or not the description of a story is shown in the Page Viewer.
Defines whether or not the Section Viewer is shown in the Page Viewer.
Thumbs
mum height of a thumbnail in the Flip Viewer. mum height of a thumbnail in the Flip Viewer.
Maximum page thumb height. The maxiMake thumbs orientation aware. When
enabled, the orientation of the thumbnails is matched with the orientation in which the device is held (only landscape thumbnails are displayed when the device is held in landscape orientation; likewise, only portrait thumbnails are displayed when the device is held in portrait orientation
54
Margins
between the top of the issue thumbnails and the start of the Flip Viewer header. between the thumbnails in the Flip Viewer.
Flipview thumb margin. The margin Flipview page thumb margin. (Android
Opens an issue or Segment automatically as soon as the download and installation process is complete (non-progressive downloads) or as soon as the issue or Segment is readable (progressive downloads). The following conditions exist:
The Library must be viewed at the time the
Honeycomb only) Controls the margin between images (pages). Honeycomb only) Controls the margin between articles (stories).
download is completed.
ground (for instance when the app is minimized or when another issue is being viewed), the issue will not automatically open.
(Android Reader App only) Defines whether or not the page number should be displayed below the page preview.
(Non-progressive downloads only) Shows the download progress both in megabytes as in percentages.
Enables the Log In/Log Out button in the Library. Enables the Library filter in the Library.
55
3.10 Metrics
When a magazine is read on a device for which it hasnt been designed (in terms of dimensions), it is likely that it will not properly fit the screen. The Metrics settings provide a method for dealing with such scenarios:
The method of page scaling can be specified The user can be informed by displaying a
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.
message
URL to the Web page to be displayed. When left empty, the default Web page in the following location is used:
assets/devicewarning/warning.html
Fitting
The fitting option allows you to specify how pages should be made to match the screen. For notes about the functionality of the page fitting feature in relation to using specific DM Server plugins, see chapter 6, Exporting Content 3.1, Exporting and Page Scaling.
Fit mode. Possible values: Fit width. (Default setting) On a device
Device width
The required width of the device. Default values are: 1024 px (Reader App v1.x (Froyo) 1280 px (Reader App v1.x (Honeycomb)
Device height
The required height of the device. Default values are: 600 px (Reader App v1.x (Froyo) 800 px (Reader App v1.x (Honeycomb)
which is smaller than the page dimensions, the page is scaled down to fit the width of the screen. This might result in the user having to scroll vertically to see the rest of the page.
Device dpi
The dpi setting which the device runs in (so not the physical dpi). Examples: Samsung Galaxy: 240 dpi Motorola Xoom: 160 dpi
the screen. If the aspect ratio (width versus height) of the screen is different than the ratio for which the page was designed, this can result in letterboxing or pillarboxing (black bars appearing along the side, top, or bottom of the screen).1
Note that only pages which are made to fit the screen are affected; pages which are designed to be taller than the screen height are not made to fit the screen.
1
56
3.11 Content
The Content settings determine the location of the magazines source files.
3.12 Resolution
The Resolution settings control the size of the area in which the page is displayed.
Height
Determines the height of the area (in pixels). Default setting: 754.
Width
Location of the magazine content (the images and pages folders). Default setting:
./content/
Determines the width of the area (in pixels). Default setting: 1028. When the dimension of the page is larger than the area in which it is displayed, scroll bars will appear.
57
3.13 Tracking
The Tracking settings hold specific settings for services which track user interaction with the Reader App, such as Google Analytics.
When enabled, the displayed HTML page is scaled to fit the Web Element pop-up.
58
3.15 Newsstand
The Newsstand settings control the settings of iOS 5s Newsstand feature.
Ensures that the correct issue is opened in the Reader App when tapping an issue in the Newsstand.
59
https://us-east-cds.woodwing.net
Asia: https://apac-cds.woodwing.net
Step 2. Enter the received password and username. Step 3. Click Log In or press Enter. After logging in, the last visited tab is displayed.1
If the Cookie has not been set or if the Cookie is cleared, the Publication tab will be loaded
1
60
Logging out
2. System Structure
The Content Delivery Platform platform has the following main structure: At the highest level, a Domain is defined, usually represented by the publishing company name. Each Domain consists of:
Users. The users who need to work within the
CDP environment.
Devices) Used for testing a digital magazine without making the magazine public. are distributed (such as Reader Apps and Newsfeed Apps).
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.
designed for a specific resolution and screen depth. Renditions are defined as part of a Display (see below) and issue/Segment (see above). In more general terms: the issue or Segment as exported from Content Station is treated by the Content Delivery Platform as a Rendition.
61
devices, all sharing the same resolution and screen depth. A Display has one Rendition assigned. The Rendition which is assigned to the Display does not have to perfectly match that Display. For example, the page scaling feature of the Android Reader App allows a Rendition to be viewed on Displays which are smaller or larger than what the Rendition has been designed for. This method of working allows you to use the same Rendition for different devices (each with specific resolutions and/ or screen depths), instead of having to create separate Renditions for each.
ing to Subscription Servers such as the Apple iTunes Subscription Server. Store filter and the values used in the Filter list.
Figure 2. The Publication Overview pane shows the main components of the structure and allows to quickly access a component. Shown here are a Domain (WoodWing), a Reader App (Gulls Monthly), containing two issues (March and February). The March issue contains 2 Segments which are further divided in Displays. The February issue does not contain Segments.
Filter name and values. The name of the Segment Filters. The values used in the
Library Filter.
62
Manage
(Only available for System Maintainers) For accessing the following components:
Domains. For managing Domains. Displays. For managing Displays. Renditions. For managing Renditions.
Publication
Application, Issues, Segments, and Renditions. Issues are sorted by publication date in ascending order (oldest shown last).
My Account
Application
Reader Apps.
sages to published Reader Apps or to Apples Newsstand. iTunes Subscriptions and non-Apple iTunes Subscriptions.
General
opment devices.
service, access to this area is only available to WoodWing) For managing global development devices. accounts.
63
The table on the next page outlines the tasks which can be performed by each type of user. (System Maintainers and System Admins may have additional tasks other than those described here.) The information in this appendix is aimed at General Users, using an environment hosted by WoodWing. When a task needs to be performed which cannot be done by a General User, instructions are given for providing WoodWing with the relevant information so that they can perform the task for you.
to all components of the system (on all levels), but primarily manages Domains, Displays, and Renditions. (For a hosted service, the System Maintainer is WoodWing.)
components of the system (except the components of the Manage tab) but only as part of the Domain(s) which the System Admin has access to. (For a hosted service, the System Admin is WoodWing.) the Domain to which the user has been given access to.
64
Table 2.2. CDP access rights Tab Area Publication Overview Component Issue Publication Segment Rendition Task Add/delete/edit Add/delete/edit/sort Add/delete/edit (as part of issue or Segment) Add Edit Delete Application Application Maintenance Application Metadata Push Notifications Apple Subscriptions Device Maintenance General Global Device Maintenance User Maintenance Minimum version control Managing Library Filters Managing Displays Rendition Mapping View Add/edit/delete Add Certificate Key Write message Add/delete/edit Add/delete/edit Add/delete/edit Add/delete/edit System Maintainer System Admin General User
Table 2.2. CDP access rights (continued) Tab Manage Area Domains Displays Renditions Component Domains Displays Renditions Task Add/delete/edit Add/delete/edit Add/delete/edit Add My Account User Account User Edit Delete System Maintainer System Admin General User
66
Each task is outlined in the following sections. If your CDP environment is already set up, use the tasks as outlined in section 4. Managing the CDP Environment.
67
and acts as the default for all Renditions defined for that app. Rendition of a Reader App can be given its own minimum version number. When a minimum version number is defined for a Rendition, it will overrule the Reader App minimum version number; when no minimum version number is defined for a Rendition, the Reader App minimum version number is used. Minimum version numbers cannot be defined on Segment level; Segments will always be assigned the minimum version number of the Rendition that they are part of.
defined on the Content Delivery Platform defined on the Content Delivery Platform
A product ID for the Reader App, as The Application version of the Reader
App. (This version number will be applied to all issues which are subsequently uploaded to that Reader App.)
68
An initial password will be provided; make sure that the user changes this to a personal password by modifying its account details. (For more information, see section 4.9.2 Editing a User Profile.)
69
Subscription
sion only) The ID that was defined for the issues in app purchase in iTunes Connect. (See chapter 14, Distributing Reader Apps With Store section 4.1 Registering With iTunes Connect.) the ID for the issue that will be used for reporting.
Step 4c. Name. Name of the issue used in the Content Delivery Platform and on the development device. (Note that the Reference Name for the issues in app purchase as defined in iTunes Connect is shown in the Store.) Step 4d. Date and time. The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam.) To make the issue available immediately, leave the date & time as is. Step 4e. Subtitle. (Optional) The subtitle to be displayed in the Store. Step 4f. Description. (Optional) A short description of what the issue is about; this will be displayed in the Store. Step 4g. Filter. (Optional, only when defined for the Reader App) From the Filter list, choose a filter option. This ensures that when a user chooses this option from the Store
70
Step 2. In the Publication Overview pane, select the Reader App to which the issue needs to be added. Step 3. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Issue. On the main screen, the Add Issue screen appears. Step 4. Enter the details pertaining to the issue: Step 4a. Payment Type, choose the type of payment to use:
Paid Free
Filter, that the issue is included in the search results. Step 4h. Segments. Leave set to No. Step 5. Click Add. The Issue is added to the Publication Overview pane and in the main window, the Issue screen appears. Step 6. Click Add Rendition. The Add Rendition screen appears. Step 7. Enter the details pertaining to the Rendition: Step 7a. R e n d i t i o n . C h o o s e t h e Rendition which is representative for the issue. In other words: when the issue is primarily aimed at viewing it on an iPad, choose the iPad Rendition here. When choosing a Rendition from the list, the page is refreshed and the value in the Reader App Minimum Version box is updated (See Step 7b). Step 7b. Reader App Minimum Version. The default minimum version for the selected Rendition is automatically set when the page is loaded and each time a Rendition is chosen from the Rendition list. The value used is the value as defined on the Reader Application page (for more information, see Reader Apps and minimum versions).
In case a different minimum version number needs to be used, manually change the value. Step 7c. Upload File. Click Browse to locate the magazine upload file created in Step 1 and click Open. The upload will start. The progress is visualized by a progress bar. The content of the uploaded file is verified and the results are displayed in the Report box. If the validation fails, possible reasons are provided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable. Step 7d. Upload the images for the cover and preview (any page of the magazine that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. Uploading the images can be done while the issue content is being uploaded, you dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window. Step 8. Click Save. The Deploy window appears with a summary of the files that are to be uploaded. Step 9. Click Save & Finish to upload the files to the Content Delivery Network.
71
The Deploy screen now shows progress bars with which the upload process can be followed. As soon as all files are uploaded, the OK button becomes available. Step 10. Click OK to close the window. The Rendition screen appears. The process is hereby complete.
Phase 1. The first part of the process is the creation of the empty issue to which the Segments will be added. Step 2. In the Publication Overview pane, select the Reader App to which the issue needs to be added. Step 3. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Issue. On the main screen, the Add Issue screen appears. Step 4. Enter the details pertaining to the issue: Step 4a. Payment Type, choose the type of payment to use:
Paid Free Subscription 72
Step 4h. Segments. Select Yes. In the bottom half of the screen, the Renditions appear which have been defined in the system by WoodWing. Step 5. Add the previews for the Rendition to which the Segment should belong in the specified dimensions by using the respective Add/ Change buttons. Click on a preview to view it in full size in a new window. Step 6. Click Add. The Issue is added to the Publication Overview pane and in the main window, the Issue screen appears. Phase 2. The next step of the process is to add the Segments to the created issue, one by one. Step 7. In the Publication Overview pane, select the Issue to which the Segment needs to be added. Step 8. From the toolbar at the top of the Publication Overview pane, click Add, followed by Add Segment. The Add Issue screen appears (a Segment is essentially an Issue.) Step 9. Enter the details pertaining to the Segment: Step 9a. Product ID. Enter one of the following:
Paid issues: The ID that was defined
sion only) The ID that was defined for the issues in app purchase in iTunes Connect. (See chapter 14, Distributing Reader Apps With Store section 4.1 Registering With iTunes Connect.) the ID for the issue that will be used for reporting.
Step 4c. Name. Name of the issue used in the Content Delivery Platform and on the development device. (Note that the Reference Name for the issues in app purchase as defined in iTunes Connect is shown in the Store.) Step 4d. Date and time. The date and time that your issue should be available in the Store for download (Time zone is Europe/Amsterdam.) To make the issue available immediately, leave the date & time as is. Step 4e. Subtitle. (Optional) The subtitle to be displayed in the Store. Step 4f. Description. (Optional) A short description of what the issue is about; this will be displayed in the Store. Step 4g. Filter. (Optional, only when defined for the Reader App) From the Filter list, choose a filter option. This ensures that when a user chooses this option from the Library Filter, that the issue is included in the search results.
73
for the issues in app purchase in iTunes Connect. (See chapter 14, Distributing
Reader Apps With Store section 4.1 Registering With iTunes Connect.)
Free or Subscription-only issues:
Step 11. Enter the details pertaining to the Rendition: Step 11a. R e n d i t i o n . C h o o s e t h e Rendition on which the issue is to be viewed. Step 11b. R e a d e r A p p M i n i m u m Ve r s i o n . Cannot be change d for Segments. The minimum version number used is the number set for either the Reader App or the Rendition. (For more information, see Reader Apps and minimum versions.) Step 11c. Upload File. Click Browse to locate the Segment upload file created in Step 1 and click Open. The upload will start. The progress is visualized by the progress bar. The content of the uploaded file is verified and the results are displayed in the Report box. If the validation fails, possible reasons are provided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable. Step 11d. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. Uploading the images can be done while the Segment content is being uploaded, you dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window.
74
Step 9b. Name. Name of the issue used in the Content Delivery Platform and on the development devices. (Note that the Reference Name for the issues in app purchase as defined in iTunes Connect is shown in the Store.) Step 9c. Subtitle. (Optional) The subtitle to be displayed in the Store. Step 9d. Description. (Optional) A short description of what the Segment is about; this will be displayed in the Store. Step 9e. Filter. (Optional, when defined for the Reader App) From the Filter list, choose a filter option. This ensures that when a user chooses this option from the Segment Filter, that the Segment is included in the search results. Step 9f. Click Add. The Segment is added to the issue in the Publication Overview pane and in the main window, the Issue screen appears. To each Segment, content intended to be used for specific Renditions is to added. Step 10. On the Issue screen, click Add Rendition. The Add Rendition screen appears.
Step 11e. Click Save. The Deploy window appears with a summary of the files that are to be uploaded. Step 12. Click Save & Finish to upload the files to the Content Delivery Network. The Deploy screen now shows progress bars with which the upload process can be followed. As soon as all files are uploaded, the OK button becomes available. Step 13. Click OK to close the window. The Rendition screen appears for the created Segment. Step 14. (Optional) Repeat Steps 2 13 to add as many Segments to the issue as required. The process is hereby complete. All added Segments are now also listed on the Issue page. For more information, see section 4.2.3 Editing an Issue.
75
defined in iTunes Connect. This works the same as the product identifier for issues. appear on the buttons on the Offer page (for example: 90 days, 180 days, etc.)
Step 3g. Click Add. Step 3h. Repeat steps 3e 3g to add additional offers as required. Step 4. (Optional, for adding a non-iTunes Subscription only). Do the following: Step 4a. In the Subscription section, click Yes. Additional fields appear. Step 4b. Enter the Subscription Server URL. Step 4c. Choose the S ubscript ion failover behavior. Step 4d. Click Save.
76
Each task is described in the following sections. If you are using the CDP for the first time and your environment is not yet in place, use the tasks as outlined in section The Content Delivery Platform (CDP) is used for managing and distributing magazine content via the Store functionality of the Reader App.. The following tasks cannot be performed by a General User; if these need to be managed (changed, deleted, etc.) contact WoodWing by sending an e-mail to services@ woodwing.com, stating the request:
Managing Domains Managing Reader Applications Managing Renditions on a system level Managing Displays Adding/removing users
be received by the CDP from the Reader App) or Disabled (calls will not be received by the CDP from the Reader App). App configuration.
In the following example, nlkiosk.woodwing. net is used as the host. The full host URL should then be as follows:
https://nlkiosk.woodwing.net/reader/
json/
77
the app.
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.
Step 4. Change any of the following fields (as applicable to the type of Reader App used): Step 4a. Android Market: availability. When choosing Yes, enter the Android Market Public Key. Step 4a. B l a c k b e r r y A p p Wo r l d : availability. Step 4b. iTunes Store: availability. Step 4c. iTunes Subscriptions: availability. When choosing Yes, enter the iTunes Shared Secret. Step 4d. Subscriptions: availability. When choosing Yes, enter the Subscription Server URL and define the Subscription failover behavior. Step 4e. Store/Library Filter: availability. When choosing Yes, enter the Filter Name (name as displayed on the issue page) and the Filter values. Step 4f. Segment Filter: availability. When choosing Yes, enter the Filter values.
78
79
the issue.
its components
80
The content of the uploaded file is verified and the results are displayed in the Report box. If the validation fails, possible reasons are provided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable. Step 6. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. Uploading the images can be done while the issue content is being uploaded, you dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window. Step 7. Click Save. The Deploy window appears with a summary of the files that are to be uploaded. Step 8. Click Save & Finish to upload the files to the Content Delivery Network. The Deploy screen now shows progress bars with which the upload process can be followed. As soon as all files are uploaded, the OK button becomes available. Step 9. Click OK to close the window. The Rendition screen appears.
81
82
when the user chooses the option in the Library Filter as defined here, the Segment will be included in the search results). Step 4. Click Add. The Segment is added to the issue in the Publication Overview pane and in the main window, the Issue screen appears.
83
All fields can be modified, with the exception of the date and time fields (these are inherited from the parent issue). When either is done, the old files need to be purged:
Send an e-mail to services@woodwing.
com to request having the old files removed. Please include the product ID and names of the files which have changed. You will be informed by WoodWing when the old files are removed and the new files are available.
84
file has been offered, the Save button will stay unavailable. Step 6. Upload the images for the cover and preview (any page of the Segment that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. Uploading the images can be done while the Segment content is being uploaded, you dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window. Step 7. Click Save. The Deploy window appears with a summary of the files that are to be uploaded. Step 8. Click Save & Finish to upload the files to the Content Delivery Network. The Deploy screen now shows progress bars with which the upload process can be followed. As soon as all files are uploaded, the OK button becomes available. Step 9. Click OK to close the window. The Rendition screen appears.
85
Issues.
The Sort screen appears. Step 3. Sort the Segments by dragging them in the desired order. Step 4. Click Save.
86
each time a Rendition is chosen from the Rendition list. The value used is the value as defined on the Reader Application page (for more information, see Reader Apps and minimum versions). In case a different minimum version number needs to be used, manually change the value. Step 4c. Upload File. Click Browse to locate the magazine upload file and click Open. The upload will start. The progress is visualized by a progress bar. The content of the uploaded file is verified and the results are displayed in the Report box. If the validation fails, possible reasons are provided. Resolve these as needed. Until a valid file has been offered, the Save button will stay unavailable. Step 5. Upload the images for the cover and preview (any page of the magazine that you want to use as the main screenshot) in the indicated sizes and orientation by using the respective Add/Change buttons. Uploading the images can be done while the issue content is being uploaded, you dont have to wait for the upload to be completed. Click on a preview to view it in full size in a new window. Step 6. Click Save.
Rendition.
Step 3. Click Add Rendition. The Add Rendition screen appears. Step 4. Enter the details pertaining to the Rendition: Step 4a. R e n d i t i o n . C h o o s e t h e Rendition on which the issue is to be viewed. When choosing a Rendition from the list, the page is refreshed and the value in the Reader App Minimum Version box is updated (See Step 4b). Step 4b. Reader App Minimum Version. The default minimum version for the selected Rendition is automatically set when the page is loaded and
87
The Deploy window appears with a summary of the files that are to be uploaded. Step 7. Click Save & Finish to upload the files to the Content Delivery Network. The Deploy screen now shows progress bars with which the upload process can be followed. As soon as all files are uploaded, the OK button becomes available. Step 8. Click OK to close the window. The Rendition screen appears. The process is hereby complete.
88
previews.
com to request having the old files removed. Please include the product ID and names of the files which have changed. You will be informed by WoodWing when the old files are removed and the new files are available.
new window.
89
90
91
converted.
converted but the conversion proces was unsuccessful. (To resolve this problem, perform steps 1 to 6 from section 4.6.1 Converting to HTML5 Format.) Rendition has been converted to HTML5 but a newer version of the issue or Rendition is available. (Convert this newer version by performing the steps found in section 4.6.1 Converting to HTML5 Format..)
format
Renditions
92
The Reader App screen appears, showing one of the following indicators for the converted issues or Renditions:
Green t ick: the conversion was
successful
93
page without removing the converted issue. HTML content for that issue.
94
multiple domains) Select the Domain(s) which the Development Device should be part of.
95
messages, typically to inform them that new releases are available such as those of the Reader App. To notifiy the Newsstand (as part of iOS 5) that a new version of the issue is available. (For more information about the Newsstand feature, see chapter 7, Customizing the iPad Reader App 9.11, Newsstand (iOS 5).)
received by the device, the Reader App itself does not have to be opened. the user; messages can be delayed or failed to be delivered.
To send a message to Reader App users, do the following: Step 1. In the Push Notifications pane of the Application tab, select the Reader App to which a message needs to be sent. The Push Notifications page appears. Step 2. (Optional, only required when setting up the environment for the first time). Upload the required certificate by doing the following: Step 2a. Generate the Apple Push Notification (APN) Cer tificate as described in http://developer.apple. com/library/ios/#documentation/ NetworkingInternet/Conceptual/ RemoteNotificationsPG/ ProvisioningDevelopment/ ProvisioningDevelopment.html. Step 2b. Export the APN Certificate as described in the above link but make sure to use an empty password for the certificate.
96
Step 2c. In the Certificate section of the Push Notifications screen, click Add. Step 2d. Browse to the location where the exported certificate is stored. Step 2e. Click Open. Step 3. In the Send Notification section, make sure that the Send Notification to Newsstand option is set to No. The Message box appears. Step 4. Enter your message in the Message box The options for writing a message are only available when a certificate is successfully added and a registered device is found. A maximum of 150 characters is allowed. Step 5. (Optional) If the message is only to be sent to development devices, select the Only Development Devices check box. Step 6. Click Send to send the message. Details of the sent message are displayed in the Message Overview section of the screen, with the Sent column displaying the current status of the message: In progress Message sent Message could not be sent Step 7. To verify if the message has been sent completely, select the Reader App in the Push Notifications pane of the Application tab once more.
The more registered devices exist, the longer it takes to send out the message.
97
Step 3c. In the Certificate section of the Push Notifications screen, click Add. Step 3d. Browse to the location where the exported certificate is stored. Step 3e. Click Open. Step 4. In the Send Notification section, make sure that the Send Notification to Newsstand option is set to Yes. The Select Issue list appears, showing the last 10 active issues. Step 5. From the Select Issue list, choose the issue for which a notification needs to be send. The options are only available when a certificate is successfully added and a registered device is found. Step 6. (Optional) If the notification is only to be send to development devices, select the Only Development Devices check box. Step 7. Click Send to send the notification. Details of the sent notification are displayed in the Message Overview section of the screen, with the Sent column displaying the current status of the notification: In progress Message sent Message could not be sent Step 8. To verify if the notification has been sent completely, select the Reader App in the Push Notifications pane of the Application tab once more.
98
99
5. Progressive Downloads
By default, the CDP provides content progressively to the user. This means that the download is split into smaller parts: the most basic content is made available first (such as the cover and the cover story) and the user can open the magazine and start reading that content while all other content is progressively downloaded in the background. The behavior of the progressive download process is as follows:
Download is started: an initial package is
visible story (by means of a Dossier Link), will also have normal priority.
Configuration
No specific configuration is required to make use of the progressive download feature; all is taken care of by the Content Delivery Platform. Also, the magazine content can be uploaded as a .zip file as normal.
downloaded, consisting of the magazine.xml file, the cover and all thumbnails. magazine, stories will be downloaded in order of appearance (first story first, last story last).
possible method, for instance by tapping a preview in the Story Navigator, tapping a Dossier Link on the cover, etc), the following rules apply:
The currently visible story maintains the
Immediately in this context means whenever the tablet has a download slot (thread) available. In the case of the iPad for instance, 3 threads are active at all times. None of the threads will be cancelled, but each will finish first before the next is started. In the extremely rare situation where all three threads are downloading a large video, immediately may take a while (until a thread is available).
The story next in line will have normal
priority.
100
6. Magazine Encryption
In order to prevent magazines from being copied between unauthorized devices, a magazine can be encrypted. This process (which is optional) takes place during the upload of the magazine to the Content Delivery Platform. This process only applies to those Reader Apps which do not bundle the magazine content with the Reader App. During the encryption process, the magazine.xml file is encrypted and can only be read by a Reader App which has access to the encryption key. This key is sent to the Reader App when it sends a request for download information.
Determining whether or not a magazine is encrypted is specified on Rendition level. Magazine encryption is currently only supported by the iPad Reader App. Make sure therefore to only enable encryption for those Renditions which are solely aimed at reading on the iPad (keep in mind iPad Renditions which are also used on other platforms, such as on Android). Any non-iPad Reader Apps currently cannot read encrypted magazines. We therefore advise to make use of this feature for those issues which are published to the iPad only.
Making use of this new feature will require a Reader App update to be released (see chapter 7, Customizing the iPad Reader App, section 5.5.2, Update Release.)
Only magazines which are uploaded after the encryption functionality has been enabled for that Rendition are encrypted; already uploaded magazines are not encrypted, but can still be read by the updated Reader App.
101
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. favorite editor for this task.
Image editor. For editing images. Use your Config files editor. For editing configuration
files. Use your favorite editor for this task, such as an XML editor or plain-text editor.
To locate a specific component of the Store or to verify its properties, view the Store in a Web Browser and use browsers tools such as the Developer Tools. Customizable components are referenced in this appendix by the CSS files in which they appear and the class selectors in which they are used. This allows you to quickly reference the source files for making the required changes.
102
2. The Store
The Store is used for showing the user the available issues for a particular title, and to offer the user the possibility to download individual issues (either free of charge or as part of a subscription). The Store functionality is only available in the Pro, Framework, Subscription, and the Apple Subscriptions Editions of the Reader App. The Store consists of the following main components:
Top Toolbar. Contains buttons for performing
content, usually in the form of a representative page or the table of contents. 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
Filters. For filtering the content on speGrid View/Single Issue View. For
S i g n I n /S i g n O u t . (N o n-i Tu n e s
either multiple-issue view (also referred to as the grid view) or single-issue view. Store.
103
Top Toolbar
Upgrade bar
Figure 2a. The HTML Store in Grid view mode with the Subscriptions Offer page shown at the top
104
Issue preview
105
Store Filter
106
107
108
3. Project Files
Customization of the HTML Store is achieved by editing various types of files which are provided as part of the Reader App. The following types of files can be edited:
Configuration files. Used for configuring the
tionality related to the Gridview mode. appearance of the navigation tools. appearance of the issue preview.
navigation.css. Used for controlling the preview.css. Used for controlling the signin.css. Used for controlling the
Store functionality:
appearance of the subscription sign in dialog box. functionality related to the single view mode.
of the Store in the form of buttons, icons, etc. Images are stored in the following location:
Resources/htmlstore/storefront/themes
the appearance of the Subscription Offer pages. appearance of the View toolbar.
default: images for platforms other ios: images for the Store in the iPad CSS files. Used for changing the functional-
external content such as the "Forgot my password" page, the "Privacy" page, etc.
ity and/or appearance of the Store in the form of background colors, text, etc. Different CSS files are available for different areas of the Store (listed in alphabetical order): eral appearance and functionality of the Store. ality related to the Store filter.
Separate CSS files are available for each of the different Reader Apps which have Store functionality. They are stored in the following location:
All files except the subscription.css file:
Resources/htmlstore/storefront/themes components/subscription/css/
For all files except the subscription.css file, folders exist for each Reader App platform:
109
default: CSS files for platforms other ios: CSS files for the Store in the iPad
110
3.2 Images
Store images include all images used in the Store. Take note of the following:
When renaming images, make sure to also All images need to be in PNG file format
CSS file: toolbar.css Class selectors: .toolbar .button. filter .toolbar .button. sign CSS file: webcontainer.css Class selectors: .button.sign .button.back
ButtonActive.png. (Android only) Buttons
The following images can be customized (in alphabetical order. For examples, see the images on the following pages).
bg-rail-vertical.png. Reserved for future
used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.
use.
CSS references: CSS file: gridview.css Class selectors: .storefront-gridviewbutton CSS file: preview.css Class selector: .preview-button CSS file: signin.css Class selector: .submit-button CSS file: singleview.css Class selector: .storefront-singleview-button CSS file: toolbar.css Class selectors: .toolbar .button .toolbar .button. singleview .toolbar .button. gridview CSS file: webcontainer.css Class selectors: .button.sign .button.back
the left or right Hotzone. CSS reference: CSS file: navigation.css Class selectors: .navigator.x.previous .navigator.x.next used in the top Toolbar, grid view, single-issue view, and subscription sign-in window.
CSS references: CSS file: gridview.css Class selectors: .storefront-gridviewbutton CSS file: signin.css Class selector: .submit-button CSS file: singleview.css Class selectors: .storefront-singleview-button
111
gridview-icon-active-button.png. Grid
CSS references: CSS file: toolbar.css Class selectors: .toolbar .button. pressed .toolbar .button. singleview.active .toolbar .button. gridview.active
checkbox.png. The Remember Me check
view button in its selected state. CSS reference: CSS file: toolbar.css Class selector: .toolbar .button.gridview.active ton in its non-selected state. CSS reference: CSS file: toolbar.css Class selector: .to ol b a r gridview
.b utto n.
box in the subscription sign-in window in its deselected state. CSS reference: CSS file: signin.css Class selector: .signin .checkbox Me check box in the subscription sign-in window in its selected state. CSS reference: CSS file: signin.css Class selector: .signin .check box. checked indicating that a list option is selected. CSS reference: CSS file: filters.css Class selector: .checkbox-filter
below the small issue covers. CSS reference: CSS file: gridview.css Class selectors: .storefront-gridview li Gridview. CSS reference: CSS file: gridview.css Class selectors: .storefront-gridview button. CSS reference: CSS file: toolbar.css Class selector: .gridview-img
preview window or the subscription sign-in window. CSS references: CSS file: preview.css Class selectors: .preview .close-button CSS file: signin.css Class selector: .signin .close-button
gle-issue view. CSS reference: CSS file: singleview.css Class selectors: .storefront-singleview
112
Android Only) Single-view button in its selected state. CSS reference: CSS file: toolbar.css Class selector: .toolbar .button.singleview.active Only) Single-view button in its non-selected state. CSS reference: CSS file: toolbar.css Class selector: .to ol b a r .b utto n. singleview button. CSS reference: CSS file: toolbar.css Class selector: .singleview-img
singleview-icon-button.png. (Non-Android
background of the Single-view, including the dropshadow. CSS reference: CSS file: singleview.css Class selector: .storefront-singleview-shadow
113
D E
A E
gridview-icon-active-button.png
gridView-shelf.png
Figure 3.2a. The assets of the HTML Store with Grid view mode
114
button.png
closeButton.png
115
A A
checkmark.png
B C
closeButton.png button.png
checkboxChecked.png
116
3.3 Colors
Store colors include all colors used in the Store, except those that are part of the Subscription Offer page. For information about the colors for the Subscription Offer page, see section 3.8 Non-iTunes Subscription Environment. The following Store colors can be customized:
and Buy/Free button labels. CSS file: gridview.css Class selector: .storefront-gridviewbutton in the grid view. CSS file: gridview.css Class selector: .storefront-gridviewname
Toolbar button labels (the Filters and Sign In buttons). CSS file: toolbar.css Class selector: .toolbar .button
description (also called Cover Story:) in the grid view. CSS file: gridview.css Class selector: .storefront-gridviewstory
Upgrade bar, including the color of the labels. CSS file: base.css Selector: html Class selector: .button
117
Single-view colors
color of the issue info. CSS file: preview.css Class selector: .preview-info
and Buy/Free button labels. CSS file: singleview.css Class selector: .storefront-singleviewbutton in the single view. CSS file: singleview.css Class selector: .storefront-singleviewname
description (also called Cover Story:) in the single view. CSS file: singleview.css Class selector: .storefront-singleviewstory
118
The following colors relating to the subscription sign-in window can be customized:
Window header. The background color of
3.4 Fonts
Store fonts include all fonts used in the Store, except those that are part of the Subscription Offer page. For information about the fonts for the Subscription Offer page, see section 3.8 Non-iTunes Subscription Environment. The following Store fonts can be customized:
body.
the window header and the color of the text. CSS file: signin.css Class selector: .signin-top
got my password, Privacy, and License Agreement text. CSS file: signin.css Class selector: .link
CSS file: base.css Class selector: .body Subscription Sign In dialog box. CSS reference: signin.css
119
3.5 Text
The text in the Store includes all text except the text which is part of the Subscription Offer page. For information about changing the text for the Subscription Offer page, see section 3.8 NoniTunes Subscription Environment. Changing the appearance of the text can be done in the following ways:
By changing the actual text By changing the color of the text
Labels
Toolbar, the grid view, single-issue view, issue preview, and sign-in window
The strings for these labels are stored in the following file:
htmlstore/storefront/strings/en.json
Issue information
The issue name and issue description is derived from the Content Delivery Platform. For more information about changing this information, see appendix F, Using the Content Delivery Platform section 4.1 Configuring Reader Apps.
Store filter
Content Delivery Platform. To create the list, see appendix F, Using the Content Delivery Platform section 4.1 Configuring Reader Apps. Each issue in the store needs to have the correct keyword assigned in order to make the filtering work correctly. This can be achieved by doing the following:
120
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.
121
3.6 Language
Setting the language for the HTML Store is done separately from setting the language for the rest of the Reader App. For more information about setting the language for the iPad Reader App, see chapter 7, Customizing the iPad Reader App section 3.4.3 Changing the Language. For more information about setting the language for the Android Reader App, see chapter 09, Customizing the Android Reader App section 4.2.2 Changing the Language. To set the language for the Store, perform the following steps: Step 1. Create a new language file by doing the following: Step 1a. Duplicate the following file:
htmlstore/storefront/strings/en.json
ect, set the language to be used. For more information, see chapter 7, Customizing the iPad Reader App section 3.4.3 Changing the Language. guage on the device on which the Reader App is used.
Step 1b. Rename the file by using the appropriate language code. The language code should be a twoor three-letter code and comply to the ISO 639-1 or ISO 639-2 conventions. For a full list of language codes, see: http:// www.loc.gov/standards/iso639-2/php/ English_list.php. Step 1c. Open the file and modify the string values as desired. Step 1d. Save the file. Step 2. The Store will be notified by the Reader App which language file to use. Specify the language as follows:
122
Customizing the Subscription Offer page can be broken down into the following components:
Page design Text Text styling Subscription buttons
subscription
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.
dynamically generates the pages in the required orientation and size for the targeted Reader App.
The subscription.html file replaces the horizontalOffer.html and verticalOffer.html files used in previous versions of the Reader App.
123
Subscription buttons
124
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
subscription.css file
Some of the page components which can be controlled through this file include:
Background. The color gradient in the back-
subscription.html file
The styling of the text is controlled by assigning the relevant tags and css classes (as defined in the subscription. css file). Assign tags and classes as required.
125
Text alignment:
Subscribe title
Font: .offer.apple
to title
Text alignment:
Font: .offer.apple
.offer.apple div
Font: .offer.apple
Text alignment:
Font: .offer.apple
126
Each is explained below. When running the Reader App with an iTunes subscription on the Simulator as a developer device, all Subscription offer buttons will display a price of $99.99. This is because the real prices cannot be validated from iTunes when the app runs in the Simulator.
Subscription buttons
127
The total number of buttons is dynamically determined by the subscription.js file during the process of building the Reader App. No customization therefore needs to take place.
To customize the appearance of the buttons, modify the following class selector in the subscription.css file:
.offer.apple td
The button labels are taken from the Description information, as entered on the Subscription page in the Content Delivery Platform. (See appendix F, Using the Content Delivery Platform section 4.1 Configuring Reader Apps. To customize the appearance of the button labels, modify the following class selectors in the subscription.css file:
.offer.apple .price .offer.apple .description .offer.apple .offer.apple a
createHorizontalButtonBar. Controls
128
toolbar.css
129
130
Button area
Customizing the area is done through the following source file of the HTML Store:
base.css
orientation: width: 768 pixels, height: 205 pixels. scape orientation: width: 303 pixels, height: 469 pixels.
Button labels
The button labels can be changed/localized by modifying the source strings. For more information, see section 3.5.1 Changing the Text.
orientation: width: 318 pixels, height: 315 pixels. scape orientation: width: 600 pixels, height: 210 pixels.
orientation: width: 318 pixels, height: 500 pixels. scape orientation: width: 800 pixels, height: 210 pixels.
131
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.
For more information about this page, see section 3.7 iTunes Subscription Environment.
For more information about customizing this button, see section 3.8.1 A Sign In/Sign Out Button.
132
133
like com.woodwing.wwwt; the free issue will automatically get the AppProductID assigned as a prefix to its IssueID. (For example: com. woodwing.wwwt.zurich2010.)1 domain name such as com.woodwing. MyMagazine_issue1.
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).
134
135
I Gestures API
This appendix shows the classes which can be used for customizing the Gestures API for the iPad Reader App. The preferred way to capture gestures in a custom object is by the use of the UIGestureRecognizer gesture. Capturing gestures by means of overriding touches proves to be very troublesome, and should be avoided. For more information, see chapter 7, Customizing the iPad Reader App section 9.1.2, Gestures API.
136
iPad
Gestures API classes DMEGestureManager attributes sharedInstance methods addDelegate: removeDelegate: addGesture: forKey: removeGestureForKey: DMEGestureDelegate attributes N/A methods willHandleGesture: doHandleGesture: gestureWillCancelNavigation: gestureWillCancelObjects: BOOL void BOOL BOOL Must return whether the delegate will handle this gesture Is called to actually handle the gesture. Do not perform handling checks here; do these in willHandleGesture. If Yes is returned no navigation functions will be executed If Yes is returned no object functions will be executed void void void void Sets a new delegate conforming to DMEGestureDelegate Removes supplied delegate Adds a new gesture to the Reader App Removes a gesture from the Reader App DMEGestureManager* Pointer to the singleton instance
137
iPad
J Navigation API
This appendix shows the architecture overview of the Data and Navigation API and the classes which can be used for customizing API for use with the iPad Reader App. For more information, see chapter 7, Customizing the iPad Reader App section 9.1.3, Navigation API.
1. Structure
138
iPad
Figure 1 on the next page shows the structure of the Navigation API.
iPad
2. Classes
The available classes which can be used are listed below. DMEDataManager attributes sharedInstance currentIssue methods rootPath DMEIssue attributes issueDescription stories methods getSectionNames getStoriesInSection: getStoryWithId: getPageWithStoryId: pageIndex: issueOrientation: getAllPagesForOrientation: getAllFirstPagesForOrientation: NSArray* (NSString) NSArray* (DMEStory) DMEStory* DMEPage* NSArray* (DMEPage) NSArray* (DMEPage) Returns a list of section names Returns a list of stories for the given section Returns the story for a given story id Returns a page for the given story id, page index and layout orientation Returns a list of all pages for all stories for the given layout orientation. Returns a list of the first page of a story for all stories for a given layout orientation NSString* NSArray* (DMEStory) Description of this issue List of stories NSString* Returns the path to the local magazine directory DMEDataManager* DMEIssue* Pointer to the singleton instance The current issue
140
iPad
DMEStory attributes issue identifier section title storyDescription author thumb preview stylesheet intent horizontalPages verticalPages elements images hyperlinks methods getPageWithIndex: issueOrientation: DMEPage* Returns a page for a given index and orientation DMEIssue* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSArray* (DMEPage) NSArray* (DMEPage) NSArray* (NSDictionary) NSArray* (NSDictionary) NSArray* (NSDictionary) Pointer to the parent issue Identifier of the story Name of the section that this story belongs to Title of the story Description of the story Author of the story URL of the thumbnail URL of the preview Data of the applied stylesheet Intent of the story List of the pages that are layed out in landscape List of the pages that are layed out in portrait List of the story elements List of the story images List of the story hyperlinks
141
iPad
DMEPage attributes story layoutOrientation pageIndex identifier thumb preview objects methods N/A DMEStory* DMEPageLayoutOrientation int NSString* NSString* NSString* NSArray* (DMEObject) Pointer to the parent story The layout orientation of the page The index of the page The identifier of the page URL of the thumbnail URL of the preview List of objects on the page
142
iPad
DMEObject attributes page parentObject identifier type x y width height itemId link weblink openinternal url specialProperties objects DMEPage* DMEObject* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSString* NSDictionary* NSArray* (DMEObjects) Pointer to the parent page Pointer to the parent object (if applicable) identifier Object type (movie, audio, scroll area etc) X position Y position width height item ID link web link open internal URL Properties that are specific for this object type List of child objects (Hotspot, Scrollable area)
methods N/A
143
iPad
DMENavigationManagerProtocol attributes N/A methods currentPageChanged: layoutOrientationHasChanged IssueHasLoaded: void void void Called when the current page in the Reader App has changed. Supplies the new page as a DMEPage Called when the current layout orientation in the Reader App has changed. Typically when the ipad is rotated. Called when the data manager finished loading the current issue.
144
iPad
DMENavigationManager attributes sharedInstance currentLayoutOrientation currentPage methods navigateToSection: navigateToStory: navigateToPage: historyGoBack historyGoForward historyCanGoBack historyCanGoForward addDelegate: RemoveDelegate: void void void void void BOOL BOOL void void Navigates the Reader App to the first page of the first story of the given section name. Navigates the Reader App to the first page of the given story Navigates the Reader App to the given page Navigates the Reader App forward in the history stack Indicates if it is possible to navigate back in the history Indicates if it is possible to navigate forward in the history Adds a given delegate to the navigationmanager. It must confirm to DMENavigationManagerProtocol Removes a given delegate from the navigation manager DMENavigationManager* DMEPage* Pointer to the singleton instance The current page DMEPageLayoutOrientation Current reader layout orientation
145
iPad
K Omniture Integration
The Analytics feature of the iPad Reader App can be used for logging events such as browsing to new sections, buying an issue, launching/exiting the app, and more. These events can subsequently be analyzed used specific software packages. Analytics modules can be used as an interface to receive these events. The default analytics module which is implemented in the Reader App is powered by Omniture. To use other analytics frameworkssuch as Google Analytics or Flurrya custom analytics module needs to be developed. This appendix describes how the default Omniture module can be configured into the Reader App; how to configure other solutions is not covered. Events sent from the device are collected by Omniture/ Catalyst servers and presented for reporting in Adobe SiteCatalyst.
1. Prerequisites
Adobe SiteCatalyst.
tomizing Omniture; for any Omniture support, please contact an Omniture consultant.
146
iPad
Please take note of the following prerequisites for using this feature:
Adobe SiteCatalyst
An example of the page view reports in Adobe SiteCatalyst can be seen in figure 2b below. Note that a default report is shown; Site Catalysts workbench is highly customizable. Also note how the concatenated pageNames appear.
fixed with c
ar prefixed with v
For a full overview of the the events and variables that are sent out by the Reader App, see section 7. Variables Sent with all Tracks.
147
iPad
Figure 2a. Viewing traffic sent to Omniture in HTTPScoop, a HTTP protocol analyzer
148
iPad
149
iPad
3. Setting Up SiteCatalyst
Setting up SiteCatalyst can be done in the following ways:
Setting up custom traffic variables Setting up Custom Conversion Insight
Variables (eVars)
150
iPad
Table 3.1. Custom traffic variables in SiteCatalyst (continued) Property # 21 22 24 48 49 50 Name Traffic - Product Name is Subscriber Issue Custom Insight 48 Video Tracking Not For Use - Events State Disabled Enabled Enabled Disabled Disabled Disabled
use the D=C6 syntax), their names are copied to here. to traffic variables that are not sent from the Reader App.
Table 3.2. Custom Conversion Insight Variables (eVars) eVar # Name 3 4 5 6 11 12 13 24 27 28 30 31 32 Unique ID Merchandising Category App Name - Platform | Page Name App name Platform Version Store Type (Acquisition Channel) Install Date Store / Library Section Current Day of Week Date Time What Day
151
iPad
event10 subscriber login event12 subscriber download finish event13 non-subscriber download start event14 non-subscriber download finish
Step 5. In the list of Target Memberships, select the check box for DigiMag_Template. Step 6. Close the Library Info screen. Step 7. Expand the Resources folder. Step 8. Select DMAnalytics.plist. A list of keys and their values appear. Step 9. Le ave th e M o d u l e key s et to DMOmnitureAnalyticsModule. This is the required value when using Omniture Analytics. Step 10. Select the check box for the Enable opt-out key. This will display a message to the user informing them that when accessing the magazine, specific information is gathered. The user will have the option to cancel or continue.
152
iPad
Enabling this setting is mandatory; if not set, the Reader App wont pass the Apple approval process. Make sure to add the appropriate localization strings with your magazines specific legal disclaimer. Step 11. Expand the list of Parameters. A list of default parameters appears. Step 12. Fill out the parameters by using the guidelines as shown in table 4 below.
These settings can also be set in the Classes/DigiMagSettings.h file. This has been done because a plist file can be viewed in the app (Show Package Content will allow you to view the plist). The default settings of the DMAnalytics.plist refer to the settings of DigiMagSettings.h. Step 13. (Optional) In the Localizable.strings file, modify and/or localize the strings for the Opt-out dialog box.
Table 4. Parameter values for the DMAnalytics.plist file Key Account Tracking server Backlog expire time in days App name App platform Enabled Visitor cookie ID Visitor cookie ID expiry in days
1
Description Omniture account Omniture tracking server Expire time of the backlog events in number of days. Application name for Omniture Application platform for Omniture Omniture enabled (1) or disabled (0). Name of cookie to set with the (hashed version) of the unique device ID The expiration time of the visitor cookie id.
This value is specific to your account; consult your Omniture contact for the correct value.
153
iPad
5. Events
Table 5 shows the events that are tracked within the application. Table 5. Events tracked within the application Event hitDownloadIssueWithCategory hitVisitToStoreLandingPage hitVisitToLibrary hitVisitToCover hitVisitFreePreviewPageWithCategory hitVisitCurrentIssueTOC hitVisitToNewsFeed hitVisitToPage hitVisitToAd hitSlideForSlideShowOnPage hitVisitToURL appLaunch appExit mediaOpen mediaPlay Trigger Called when an issue is going to be downloaded, after having bought one. Called when user opens the Store. Called when user opens the Library Called when user accesses the magazine cover, but not when in Library. Called when user accesses an issue preview. Called when user accesses the Table Of Content of current issue, with optionally the current section. Called when user accesses the News Feed screen Called when user accesses a page Called when user accesses an ad page Called when user accesses a slide in a slide show. Note that upon accessing a page containing a slide show, this function is called immediately for the first slide. Called when user visits a URL. Called when the app launches. Called when the app terminates gracefully. Called whenever a media file is accessed. Called whenever a media file (video or audio) is started. length, name name,offset Continued on next page title, section, issue title, section, issue title, section, issue, slide url issue, purchaseid section Parameters issue, currencyCode, price, purchaseId
154
iPad
Table 5. Events tracked within the application (continued) Key mediaClose mediaStop hotSpotOpen Description Called when a media file (video or audio) is closed. Called when a media file (video or audio) is stopped. Called when a Hotspot opens Value name name, offset hotspotid
155
iPad
6. Variables
The sections below show the variables that are sent with every request, split into tracks and track links.
SubscriberLogin
Table 6.1b. Variables for SubscriberLogin Variable events prop22 pageName prop16 prop6 trackLink linkType linkName Value event10; subscriber; kiosk|signin; kiosk; <platform>kiosk|signin <platform>kiosk|signin o signin;
156
iPad
hotspot
appLaunch
Table 6.1c. Variables for appLaunch Variable events pageName prop16 prop6 trackLink: linkType: linkName: Value event3,event4,event5 (event3 = startup, event4 = if first time, event5 = upgrade) app other <prop11>|<pageName> app o app
hitDownloadIssueWithCategory Event
Table 4c. Variables for hitDownloadIssueWithCategory Variable events products purchaseID pageName prop16 prop6 track link linkType linkName Value purchase <purchase parameters> <purchase id> store store <prop11>|<pageName> o store store currencyCode <currency code of app store>
hitVisitToURL
Table 6.1d. Variables for hitVisitToURL Variable events tracklink linkType linkName pageName Value event1 <url> e <url> library | <pageName>
157
iPad
mediaClose
Table 6.2c. Variables for mediaClose Variable trackVars eVar20 prop9 prop14 eVar21 Value eVar20,eVar21,prop9,prop14; <mediaURL>; Media: <mediaURL>; <pageName>; D=c9;
Table 6.2b. Variables for mediaPlay Variable trackVars trackEvents eVar20 events prop9 prop14 eVar21 Value eVar20,eVar21,events,prop9,prop14; event6; <mediaURL>; event6; Media: <mediaURL>; <pageName>; D=c9;
Table 6.2d. Variables for mediaStop Variable trackVars trackEvents eVar20 events prop9 prop14 Value eVar20,eVar21,events,prop9,prop14; event7; <mediaURL>; event7; Media: <mediaURL>; <pageName>;
158
iPad
mediaPlay
mediaStop
hitVisitToExistingPrintSubscriber
Table 6.2e. Variables for hitVisitToExistingPrintSubscriber Variable pageName prop6 Value store|existing print subscriber store|existing print subscriber
hitSlideForSlideShowOnPage
Table 6.2g. Variables for hitSlideForSlideShowOnPage Variable events pageName prop16 prop20 prop6 prop8 Value event1 library|<issue>|<title>-<pageid>|slideshow-<slide> library <issue> <prop11>|<pageName> <section>
hitVisitToSubscribe
Table 6.2f. Variables for hitVisitToSubscribe Variable pageName prop6 Value store|subscribe store|subscribe
hitVisitToAd
Table 6.2h. Variables for hitVisitToAd Variable events pageName prop16 prop20 prop6 prop8 Value event1 ads|<issue>|<section>|<title>-<pageid> library <issue> <prop11>|<pageName> ads
159
iPad
hitVisitToPage
Table 6.2j. Variables for hitVisitToPage Variable events pageName prop16 prop6 prop20 prop8 Value event1 library|<issue>|<section>| <title>-<pageid> library <prop11>|<pageName> <issue> <section>
hitVisitToCurrentIssueTOC
Table 6.2l. Variables for hitVisitToCurrentIssueTOC Variable prop16 prop6 prop20 prop8 Value library library|<issue>|toc <issue> toc
hitVisitFreePreviewWithIssueInfo
hitVisitToNewsFeed
Table 6.2k. Variables for hitVisitToNewsFeed Variable pageName prop16 prop6 Value newsfeed other newsfeed
160
iPad
hitVisitToCover
Table 6.2n. Variables for hitVisitToCover Variable events pageName prop16 prop6 prop24 Value event1 store|<issue> | landing page store <prop11>|<pageName> <issue>
hitVisitToLibrary
Table 6.2p. Variables for hitVisitToLibrary Variable events pageName prop16 prop6 Value event1 library library <prop11>|<pageName>
hitVisitToLibraryCover
Table 6.2o. Variables for hitVisitToLibraryCover Variable events pageName prop16 prop6 prop20 Value event1 library|<issue> library <prop11>|<pageName> <issue>
Table 6.2q. Variables for hitVisitToStoreLandingPage Variable events products purchaseID pageName prop16 prop6 Value prodView,event1 <purchase parameters> <purchase id> store|<issue id>|preview store <prop11>|<pageName>
161
iPad
hitVisitToStoreLandingPage
downloadStarted
Table 6.2r. Variables for downloadStarted Variable events products pageName prop6 prop20 prop16 trackLink linkType linkName Value For subscribers: event11 Else: event13 <issue> Library | <issue> pageName <issue> library <issue> o downloading
downloadFinished
Table 6.2s. Variables for downloadFinished Variable events products pageName prop6 prop20 prop16 prop6 trackLink linkType linkName Value For subscribers: event12 Else: event14 <issue> Library | <issue> Library | <issue> <issue> library <issue> o @downloaded Library | <issue>
162
iPad
163
iPad
1. Steps To Follow
Step 1. C o nf i g u r i n g th e S u b s c r i p t i o n environment. Step 2. Configuring the Content Delivery Platform. Each step is explained in the following sections.
164
iPad
Setting up the Subscription functionality using an external subscription server involves the following steps:
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.
information about the license agreement for the subscription. This page is shown full screen in the Reader App.
mation about how the users data is gathered, used, and managed. This page is shown full screen in the Reader App.
users can use for obtaining customer service. This page is shown full screen in the Reader App. users can use for resetting their password. This page is shown full screen in the Reader App.
advertising subscription offers in the Reader App. This page is part of the HTML Store. For more information about customizing this page, see appendix G, Customizing the HTML Store section 2, The Store.
165
iPad
which users can use for upgrading their subscription. This page is shown full screen in the Reader App. Note that one page is used for both orientations.
Table 1.1.2. Subscription server components Keyname Vertical offer Reset password Horizontal offer Upgrade subscription URL Subscription URL License agreement Privacy notice Customer service Type String String String String String String String String Default value verticalOffer resetPassword horizontalOffer upgradeSubscription buySubscription license privacy myAccount Description URL to the offer page in portrait mode URL to the Reset Password page URL to the offer page in landscape mode URL to the Upgrade subscription page URL to the subscription page URL to the License Agreement page URL to the Privacy Notice page URL to the Account page
166
iPad
167
iPad
1. Steps To Follow
Step 1. C o nf i g u r i n g th e S u b s c r i p t i o n environment. Step 2. Configuring the Content Delivery Platform. Step 3. Configuring the Reader App. Each step is explained in the following sections.
168
iPad
Setting up the Subscription functionality using the iTunes subscription server involves the following steps:
functionality
169
iPad
170
iPad
An example myAccount page is provided in the project and can be found in the following location:
Resources/myAccount/
Text
The text which is displayed on the page is derived from the myAccount.html file. Adjust or localize the text as required.
The look & feel of the page can be changed by customizing the following components:
The text displayed on the page The images displayed on the page The design of the page
Images
Each is described on the following pages. Pages in the correct dimensions for each orientation (landscape and portrait) are automatically created during the building process of the Reader App.
the areas at the top and bottom of the page. CSS reference: CSS file: myaccount.css Class selectors: .header-container .footer-container transfer process between iPads. Reference: HTML file: myaccount.html Attribute: <div class="header-container" id=" header- container">
When creating a custom page from scratch, make sure that the page contains at least one button which links to ww://restoresubscriptions. This is to make sure that subscriptions can be copied to another iPad.
transfer process. Reference: HTML file: myaccount.html Attribute: <div class="container" id="container">
171
iPad
Design
The design of the page is controlled by the myaccount.css file. Some of the page components which can be controlled through this file include: Font family. Class selector: .body Page background. Class selector: .page-container Heading size. Class selectors: .h1 .h2 Text color. Class selector: .ul Text margins. Class selector: .li Transfer button. Class selector: .buttontransfer .buttontransfer p
172
iPad
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.
Product ID: A unique ID for the Type: Auto-Renewable. Family Name. Choose New to create
Subscriptions can only be based on one of these time-limited offers (meaning that issues cannot be offered as part of a specific subscription or duration). During the subscription period, the subscribed user will have access to the following issues (the date that will be used to check if an issue is included in a
173
iPad
174
iPad
Used for entering the path to the MyAccount page when stored on a local system.
All other options available in the Store/Subscriptions section are for use by non-iTunes Subscription services.
175
iPad
176
Table 1. Reader App features - compared by Reader App version Reader App Version Feature Navigation bar Action bar Navigation bar / Action bar buttons Buy button Library button Magazine button Cover button TOC button External back button Navigation Contents button Newsfeed button Help button Account button Custom button Always display Navigation bar Show toolbar on opening issue Section Viewer Hide Section Viewer Story Viewer / Page Viewer Pages grouped by story iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0
177
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Story Viewer / Page Viewer Page numbers Page scrubber Top Toolbar Image icon Always display top Toolbar Action bar Image icon Forward/Back buttons In Navigation bar Navigation (Continued) TOC List Option to disable Bookmarks Hotzones Horizontal page navigation Story navigation Two-finger swiping Right-to-left support Orientation lock Link to Store or Library in Web Element Access Store on app launch
178
iPad 2.1
HTML5 1.0
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Video Pinching movement for full screen view Done button Aspect ratio button Remove video after play Hide video controls Audio Audio Control Audio continues playing when navigating to another page Dynamic content Hidden audio controls Slide Shows Hotspots Tap-through Hotspot Web Elements Automatically scale content to fit screen Widgets Scrollable Areas Web Links Dossier Links On a layout iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Dossier Links (Continued) Dynamic content (Continued) In a Web Element Fullscreen overlay window Newsfeed Newsfeed Full screen Fallback Newsfeed page Text View Push Notifications Text View Push notifications (messages) Content Sharing Content Sharing Share Hyperlink Share page Share part of a page HTML Store Store Filters Subscriptions (non-iTunes) Store Subscriptions (iTunes) Mixed subscriptions support In-app purchase 3G downloading Library Library iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0
Table 1. Reader App features - compared by Reader App version (Continued) Reader App Version Feature Segments Library (Continued) Library filter Segment filter Library caching Non-progressive Downloading issues Progressive Auto open after/during download All Segments in one download Customization Internet Version info APIs Custom Home page No Internet indicators Version info Fit page when device dimensions do not match page dimensions Display message when device dimensions do not match page dimensions Analytics Magazine encryption Newsstand support iPad 2.1 Android 1.3 (Froyo) Android 1.3 (Honeycomb) HTML5 1.0
Page fitting
181
O Licenses
WoodWing Software incorporates certain open source software in specific components of the Digital Magazine solution. The license terms associated with this software require that we give copyright and license information; this appendix provides those details. The following open source software is used:
android-plist-parser. Used by the Android
Reader App for parsing the DMSettings.plist file. the Android Reader App for parsing the json file.
182
Appendix O Licenses
1. android-plist-parser
https://github.com/tenaciousRas/android-plist-parser
Base64.java (net.sf.migbase64)
Licensed under the BSD Open Source license. Copyright (c) 2004, Mikael Grev, MiG InfoCom AB. (base64 at miginfocom -dot- com) All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. Neither the name of the MiG InfoCom AB nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS AS IS AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, E XEMPL ARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
License
This work is licensed under Creative Commons and BSD licenses. See below.
Licensed under Creative Commons Attribution 3.0 Unported license. http://creativecommons.org/licenses/by/3.0/ You are free to copy, distribute and transmit the work, and to adapt the work. You must attribute android-plist-parser to Free Beachler (http://www.freebeachler.com) with link. The Android PList parser (android-plist-parser) is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
183
Appendix O Licenses
License
Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. License shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. Licensor shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. Legal Entity shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, control means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. You (or Your) shall mean an individual or Legal Entity exercising permissions granted by this License. Source form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
Object form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. Work shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). Derivative Works shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. Contribution shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, submitted means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as Not a Contribution.
184
Appendix O Licenses
Contributor shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a NOTICE text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the
185
Appendix O Licenses
terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an AS IS BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act
only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets [] replaced with your own identifying information. (Dont include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same printed page as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the License); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an AS IS BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
186
nection
hen
Products, features and specifications are subject to change without prior notice. The Adobe logo, InDesign and InCopy are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. 2011 WoodWing Software
og
WoodWing Europe Zaandam, The Netherlands Tel +31 75 61 43 400 info@woodwing.com WoodWing USA Detroit, Michigan USA Tel +1 313 962 0542 usa@woodwing.com
WoodWing Asia Pacific Selangor Darul Ehsan, Malaysia Tel +60 3 8320 1839 asiapacific@woodwing.com WoodWing Latin America Monterrey NL, Mexico Tel +52 1 81 88345 8927 latinam@woodwing.com
er
www.woodwing.com