Digital Publishing with QuarkXPress 2017
CONTENTS Contents Introduction..................................................................................5 Quark digital publishing options..................................................6 Defining your goals and limitations..............................................8 Characterizing your content..............................................................................8 Assessing your customers' needs....................................................................
CONTENTS Reordering components in a reflow article.............................................................56 Reflow style sheet mapping....................................................................................56 Creating a TOC for ePub or Kindle.................................................................57 Working with eBook metadata.......................................................................57 Working with output styles.......................................................
CONTENTS Exporting as an iOS app...........................................................105 Legal notices.............................................................................
INTRODUCTION Introduction Digital publishing is a huge publishing opportunity. In fact, maybe a little too huge. There are so many options - and so many uncertainties — that decision-making can be a bit daunting. To make things even more complex, the answer to most of the questions you're likely to ask is probably, "It depends." The purpose of this Guide is to help you to make good decisions about digital publishing, so that your efforts will meet with success.
QUARK DIGITAL PUBLISHING OPTIONS Quark digital publishing options The purpose of this topic is to present the digital publishing options available through Quark® for quick reference. QuarkXPress allows you to configure and export items for digital publishing in ePub, Kindle, native Apps (for Android and iOS) and HTML5 Publication output formats. The ePub file is compatible with all prominent ePub Readers and Google Chrome. The Kindle file is compatible with Kindle devices.
QUARK DIGITAL PUBLISHING OPTIONS Media Type App Studio App and issues Kindle eBook shows, HTML, interactivity, and more ePub HTML5 Publications iOS Single App interactivity, and more Distribution Apple App Store, Android app stores Amazon Kindle store Third-party Self hosted server Apple App Store Available QuarkXPress 9.5 for and later QuarkXPress? QuarkXPress 9.3 and later QuarkXPress 9.0 and later QuarkXPress 2016 and later QuarkXPress 2017 Available for QPS? QPS 9.
DEFINING YOUR GOALS AND LIMITATIONS Defining your goals and limitations When you think about digital publishing, it's easy to assume that your first questions should be: • Which devices do I want to publish to? • What format do I want to publish in? • Which tools do I want to use? However, this may not be the best place to start.
DEFINING YOUR GOALS AND LIMITATIONS If your content is primarily textual, and you don't have any need for fancy layout, you might want to consider using a format such as reflow ePub or Kindle eBook. This format provides only a reflow view, and is compatible with a wide variety of readers. If it is critical that your content be presented in a way that is uniquely yours, you can create a custom app which is the most labor intensive. Or you can use App Studio which is much easier.
DEFINING YOUR GOALS AND LIMITATIONS Assessing your customers' needs It's probably safe to assume that you want your customers to have a positive experience with your content. To make sure this happens, consider questions such as the following: • Do your customers want to be able to change the point size of the text? If so, consider a format that includes a reflow view.
DEFINING YOUR GOALS AND LIMITATIONS • Do you want to publish content for sale on an infrequent or irregular basis? For example, are you a publisher who wants to make book titles available to your customers? If this is the case, you may want to consider using the Kindle or ePub format. If you have no need of layout view, you might consider a large existing distribution network such as Amazon or Apple iBooks, or one of many smaller distribution networks.
DEFINING YOUR GOALS AND LIMITATIONS case, you should track your usage information once you have launched, analyze it, and make any necessary adjustments to your hosting plan. (If you create an app that includes content served over the Web, you should also consider the hosting plan used for that content.) Billing is another important aspect to consider.
HARDWARE, OPERATING SYSTEMS, AND FORMATS Hardware, operating systems, and formats When you're thinking about publishing to handheld devices, it's good to know as much as possible about the hardware, operating systems, and formats currently available for such devices. Hardware It's important to know which types of hardware you want to make your content available on because different devices have different advantages and disadvantages.
HARDWARE, OPERATING SYSTEMS, AND FORMATS • Orientation switching: Most devices support orientation switching, so regardless of the target platform, you'll probably have to think about doing two different layouts. Operating systems A sad fact of designing for digital devices is this: different operating systems require different apps.
HARDWARE, OPERATING SYSTEMS, AND FORMATS to take advantage of the existing infrastructure of an institution such as the Apple App Store and the Android Play Store. Writing your own app also leaves you leeway to create pretty much anything you want, provided you're willing to put in the effort. • Controlled, proprietary formats that can run on multiple devices and operating systems, such as the Amazon Kindle format.
GENERAL DESIGN APPROACH General design approach Before you start designing anything, you should know as much as possible about the answers to the questions asked earlier in this document. The features and limitations of the format(s), operating system(s), and device(s) you're targeting may severely limit your choices when it comes to design. If you feel like you already have a good understanding of what you want to create, here are some suggestions on how to approach creating it.
GENERAL DESIGN APPROACH A page stack • Build and test your templates. If you're templating multiple publications, make sure you think about orientation during the templating phase and do plenty of testing before you start using those templates in production. Test your fonts, colors, styling, and UI on all of the devices you plan to publish to.
MISTAKES TO AVOID Mistakes to avoid Digital publishing is an extremely flexible medium. This flexibility means it's possible to do amazing things, but it also means there are pitfalls that you may not be aware of. For example, just because you can use multimedia elements such as movies, slideshows, and audio in a digital publication, that doesn't mean you should do so on every page.
MISTAKES TO AVOID Lastly, always make sure you test your digital publications on inexperienced users before releasing them. This is a great way to reveal design flaws that otherwise might not be obvious. For example, it's easy to design a page that includes full-screen multimedia elements that can prevent the user from being able to turn the page.
PROJECTS AND LAYOUTS Projects and Layouts Each QuarkXPress project contains one or more layouts. Every layout is stored within a project, and every project contains at least one layout. Each layout can contain as many as 2,000 pages, and can be as large as 224" x 224" in size (or 112" x 224" for a two-page spread). A project can contain an unlimited number of layouts. A QuarkXPress project can contain two types of layouts: Print and Digital.
PROJECTS AND LAYOUTS New Project dialog box for a Digital layout 2 Choose Digital from the Layout Type drop-down menu. 3 Choose a device from the Devices drop-down menu. Devices drop-down menu The Width and Height fields are automatically populated depending on the device chosen. To define and use a custom device see "Custom device." 4 Set the orientation for the default layout.
PROJECTS AND LAYOUTS 5 The Margin Guides controls let you set default margins for the layout. 6 The Page Count allows you to specify the number of pages you want to initially create. 7 The Column Guides controls let you create a multi-column page by default. 8 Specify the Default Story Direction for the layout. 9 The Facing Pages check box lets you create spreads.
PROJECTS AND LAYOUTS 5 Click OK. Any custom devices you create will appear in the Devices drop-down menu in the New Project and New Layout dialogs, only when you are creating a digital layout. Custom devices can also be created using the New Layout dialog. (Layout > New). Working with layouts It's easy to navigate between layouts, add layouts, duplicate layouts, and delete layouts. By default, tabs display at the top of the project window for each of the layouts in a project.
PROJECTS AND LAYOUTS • File > Export As > Kindle Layers apply to the layout that is active when you create and edit them. When you perform a project-level action (Edit > Undo), the action is added to the Undo History in all layouts. When you check spelling (Utilities menu), QuarkXPress checks only the active layout. The Find/Change feature (Edit menu) can search only the active layout.
PROJECTS AND LAYOUTS 10 Preview HTML5 Publication: Click this icon to generate a preview of the layout as an HTML5 Publication. This allows you preview your current layout in a browser, before actually exporting or uploading to the portal. When holding the Shift-Key you can build multi-variant HTML5 Publications (responsive HTML5 Publications). 11 iOS App Build Status: Click this icon to view the status of the exported iOS Apps.
PROJECTS AND LAYOUTS 4 Use the dialog to configure the rules for scaling the items on the layout. The Adaptive Scaling dialog allows you to configure rules for the page properties, locked items, text, pictures, boxes, lines, tables, and any interactivity items that may exist on the layout. 5 Click OK.
PROJECTS AND LAYOUTS HTML5 palette Picture boxes, text boxes, anchored boxes, and no-content boxes support different kinds of interactivity. Options that are not available for the selected item are disabled. At the bottom of the palette, there is a list of all of the interactive objects in the active layout, including each enrichment type, object's name, and page number. You can navigate to any object listed here by double-clicking it.
PROJECTS AND LAYOUTS • : Video • : Web View The HTML5 palette includes a number of file selection controls. If you are logged into Quark Publishing Platform, you can choose whether to select a file from the file system or from Quark Publishing Platform. If you choose Platform from such a button, the Asset Picker dialog box lets you choose a Platform asset.
PROJECTS AND LAYOUTS 360° image controls 3 Optionally, enter a name for the 360° image in the Name field. This name displays in the Interactive Objects area in the bottom of the palette. 4 If you want the 360° image to be initially invisible, check Initially Hidden. 5 To allow the 360° image to initially rotate automatically, check Auto Play. • Revolutions: Lets you specify how many times the 360° image should automatically rotate.
PROJECTS AND LAYOUTS separate frame to the image. You can create a new layout or choose pages from an existing layout. 8 To edit a single frame, choose a frame and click the Edit button . Adding animation A user can apply animation effects to objects in their documents. To add an animation to a Digital layout: 1 Select the object you want to apply the animation to. You can apply animations to picture boxes, text boxes, None Boxes and Lines. You can not apply animation to group boxes.
PROJECTS AND LAYOUTS 6 To allow the viewer to interact with the animation, check Allow Interaction. 7 If you want the animation to be initially invisible, check Hidden at Start. 8 If you want the animation to become invisible after playing, check Hidden at End. 9 Duration: Lets you specify how much time it takes for the animation to occur. 10 Delay: Lets you specify how long of a delay there should be before the animation begins to play.
PROJECTS AND LAYOUTS Audio options 3 Optionally, enter a name for the audio controller in the Name field. This name displays in the Interactive Objects area in the bottom of the palette. 4 If you want the audio object to be initially invisible, check Initially Hidden. 5 To make the audio play automatically when the page it is on displays, check Auto Play. Auto Play for audio and video is not supported on mobile devices (iOS & Android). 6 To make the audio play repeatedly, check Loop.
PROJECTS AND LAYOUTS 10 To finish configuring the audio object, click a different object or a blank part of the layout. Adding a button To add a button to a Digital layout: 1 Select the rectangular picture box you want to make into a button. 2 In the HTML5 palette, click Button. Actions added to a button 3 Optionally, enter an internal name for the picture in the Name field. This name displays in the Interactive Objects area in the bottom of the palette.
PROJECTS AND LAYOUTS Adding a zoomable picture A zoomable picture initially displays in a box, but takes over the entire screen when double-tapped. You can use this feature to add an animated pan-and-zoom effect to an image, or allow it to be zoomed and panned directly in its box. Digital layouts support interactive pictures in PNG, JPEG, GIF, TIFF, and EPS formats. To add an interactive picture to a Digital layout: 1 Select the picture box that contains the picture you want to make zoomable.
PROJECTS AND LAYOUTS • Duration: Lets you control how long the pan/zoom lasts. At the end of this duration, the picture stops and stays in its final position. • Start and Stop: These buttons allow you to set the beginning and ending crop. Click Start and scale/position the picture for the initial position, then click Stop and scale/position the image for the final position. 9 To finish configuring the zoomable picture, click a different object or a blank part of the layout.
PROJECTS AND LAYOUTS Scroll zone controls 4 Optionally, enter a name for the scroll zone in the Name field. This name displays in the Interactive Objects area in the bottom of the palette. 5 Choose whether you want to create a layout or link to an exising layout. • If you want to create a new layout to serve as the scrollable layout, click Create Layout and enter a name for the layout in the Name field. You can decide whether you want to create a horizontal or vertical scrollbox.
PROJECTS AND LAYOUTS Scroll zone layout controls in HTML5 palette 7 Specify the default position of the scroll bar: • Choose Top or Bottom if scrolling vertically. • Choose Left or Right if scrolling horizontally. 8 To provide scrollbars as a visual cue that the area is scrollable, check Show ScrollBar. 9 To automatically display arrows that indicate the direction in which the scroll zone can be scrolled, check Automatic Arrows.
PROJECTS AND LAYOUTS Slideshow options 3 Optionally, enter a name for the slideshow in the Name field. This name displays in the Interactive Objects area in the bottom of the palette. 4 If you want the slidehow to be initially invisible, check Initially Hidden. 5 To allow the user to switch a slide to full-screen mode and back by double-tapping it, check Allow Fullscreen. 6 To display slides uncropped when the slideshow is in fullscreeen mode, check Show Uncropped in Fullscreen.
PROJECTS AND LAYOUTS • To have the slideshow play indefinately, check Loop. If this box is not checked, the slideshow will stop playing at the last slide. • Slide Duration: Lets you control how long each slide is on the screen. 12 To make the slide pan and/or zoom at the beginning of its display, check Animate Pan and Zoom. • Duration: Lets you control how long the pan/zoom lasts. At the end of this duration, the slide stops and stays in its final position until the next slide is displayed.
PROJECTS AND LAYOUTS 15 To execute an action when the user taps a slide, select it and click . The Tap Actions for Slide dialog box displays. Tap Actions for Slide dialog box To add an action, click , then choose the action from the Action drop-down menu and configure it the way you want it. (For more information, see "Working with interactivity actions." 16 To set the cropping for a slide, select the slide's icon in the list, then scale and reposition the preview of the slide in the picture box.
PROJECTS AND LAYOUTS • Disable Animate Pan and Zoom • Set the Transition to Flip Slideshow options 2 Add two slides to the slideshow using a QuarkXPress layout. Click at the bottom of the slide list and choose Add Slides from QuarkXPress Layout. 3 Design the new slideshow, page 1 of the new layout is your front page, page 2 is the back page. 4 Go back to your main layout and add a picture box. 5 Make the picture box a Button using the HTML5 palette.
PROJECTS AND LAYOUTS You can start and stop the playback of video files with actions. For more information, see "Working with interactivity actions." To add a video to a Digital layout: 1 Select the picture box you want to contain the video. 2 In the HTML5 palette, click Video. Video options 3 Optionally, enter a name for the picture in the Name field. This name displays in the Interactive Objects area in the bottom of the palette. 4 If you want the video to be initially invisible, check Initially Hidden.
PROJECTS AND LAYOUTS Inline videos are in fullscreen mode by default on iOS phones. Using the resize button tap or pinch gesture on the playing video will snap the video to play in the embedded location on the page. 7 To make the video play repeatedly, check Loop. 8 To hide the default video controls, check Hide Controller. Note that if you want the user to be able to control the movie, you will need to provide a way of controlling the video with actions. 9 To hide the play button, check Hide Play Button.
PROJECTS AND LAYOUTS Web view options 3 Optionally, enter a name for the Web view in the Name field. This name displays in the Interactive Objects area in the bottom of the palette. 4 If you want the Web view to be initially invisible, check Initially Hidden. 5 To allow the user to interact with the content, check Allow User Interaction. 6 To specify the location of the content, click an option in the Source area. • To use a local file, click File (Embed).
PROJECTS AND LAYOUTS Working with interactivity actions Actions let you add interactivity to items in a Digital layout that you will be exporting. The actions available include: • No Action: The default action. Does nothing. • Go to URL: Navigates to a URL when the user touches the selected item. For Button interactivity, you can also add a geolocation value for Go to URL action • Go to Page: Jumps to a different page. For more information, see "Creating a Go to Page action.
PROJECTS AND LAYOUTS Creating a Go to Page action A Go to Page action lets the user jump to a different page. To create a Go to Page action: 1 In QuarkXPress, Choose Go to Page from the Action drop-down menu. 2 Enter the Project Name in the Article ID field. (optional) 3 Enter the absolute page number of the target page in the Page field. (For example, to go to the second page in the target article, enter 2.) Creating a Play Sound File action A Play Sound File action lets you play a sound file. Only .
PROJECTS AND LAYOUTS 2 To make the sound play over and over again, check Loop. 3 To make the sound stop when the user navigates to a different page, check Stop Audio When Page Turns. 4 To specify the location of the sound file, click File (Embed), then click the button and select the sound file. Creating a Show Pop-Up action A Show Pop-Up action lets you display a pop-up view containing either the contents of a QuarkXPress layout in the same project file or the contents of an external file.
PROJECTS AND LAYOUTS 2 Do one of the following things: • To display the contents of a different QuarkXPress layout, click QuarkXPress Layout, then choose the target layout from the drop-down menu or choose Create New Layout and create a new layout. Enter a page number in the Page field to indicate which page to display in the pop-up. Click the Edit button to display the layout.
PROJECTS AND LAYOUTS Using font fallback When Font Fallback is on, if the application encounters a character that is not available in the current font, it searches through the active fonts on your system to find a font that does include that character. For example, if Helvetica is applied at the text insertion point and you import or paste text containing a Kanji character, the application might apply the Hiragino font to that character.
PROJECTS AND LAYOUTS Auto Rubi can be applied through the following keyboard shortcuts: • (Mac OS X) CMD+OPT+Shift+R • (Windows) CTRL+ALT+Shift+ R Applying emphasis marks To apply an emphasis mark to a character, select the character, go to the Character/Character Attributes tab of the Measurements palette, click the Text Styles icon and select the Emphasis Mark drop down to display the emphasis mark options, and then click one of the options.
PROJECTS AND LAYOUTS 4 Enter characters in the Enter characters that cannot begin a line field, the Enter characters that cannot end a line field, and the Enter non-separable characters field. 5 Click OK. 6 Click Save. To apply a non-breaking character set to a paragraph, choose one from the Non-Breaking Char Set drop-down menu in the Edit Hyphenation & Justification dialog box (Edit > H&Js > Edit). Text in Digital layouts By default, text boxes in a Digital layout are set to export as HTML text.
PROJECTS AND LAYOUTS Groups in Digital layouts If you have multiple overlapping picture boxes and graphic text boxes, you may be able to streamline your export by grouping the boxes and then checking Convert to Graphic on Export (Item > Modify) for the group. If you do not group such boxes, they all export as separate HTML elements. If you group them, however, they export as a single graphic object.
PROJECTS AND LAYOUTS full-screen format with an adaptive layout and resizeable text This view is designed to let end users view content without being constrained or distracted by the layout. If you want to take advantage of this feature, you must create at least one reflow article in QuarkXPress. If you find it useful for organization, you can create one article for each chapter or section, but this is not necessary. The Reflow Tagging palette allows you to tag the content for Reflow ePub.
PROJECTS AND LAYOUTS Step 4: Export the layout as an eBook and view it in the eReader. Creating reflow articles There are two ways to create reflow articles: • From a selection. This approach lets you select the specific boxes you want included in the reflow article. This approach is best if the layout has a lot of content that's should not be visible in the Reflow output. • From pages. This approach copies everything on the pages you indicate into the reflow article.
PROJECTS AND LAYOUTS Creating a reflow article from pages If you want to convert one or more pages' worth of content into an article or articles at the same time, use the following procedure. 1 Choose Layout > Add Pages to Reflow. The Add Pages to Reflow dialog box displays. Add Pages to Reflow dialog box 2 Use the Pages area to specify whether you want to add all of the pages in the layout or only a specific range.
PROJECTS AND LAYOUTS • Display the Reflow Tagging palette (Window menu), select the target reflow article, and then select one or more picture or text boxes and click Add Component in the Reflow Tagging palette. If you want to add a full-page image to an ePub layout that is to be viewed in iBooks, its dimensions should be 1024 x 768 (or 2048 x 1536 for retina). Reordering components in a reflow article Each text box, story, or picture that you add to a reflow article is added as a component.
PROJECTS AND LAYOUTS Reflow Style Sheet Mapping palette Select Show Used Style Sheet Only to list only the style sheets used in the current project. Click Reset All to reset back to the defaults. 3 For each paragraph and character style sheet you would like to override when exporting, select the style sheet on the left and choose the new style sheet to map to from the drop down menu on the right. These style sheets will be applied to the reflow ePub output only.
PROJECTS AND LAYOUTS 1 Display the layout in layout view. 2 Choose Layout > eBook Metadata. The eBook Metadata dialog box displays. eBook Metadata dialog box 3 Use the fields in this dialog box to enter information about your eBook. In the Keywords field, use a comma to separate keywords. 4 Use the language popup to specify the language of your eBook. This can be used by readers to search for the correct book.
WORKING WITH OUTPUT STYLES Working with output styles Output styles let you capture settings for output in print, PDF, ePub, App Studio, Kindle, HTML5 Publications and EPS formats. You can use output styles when using the File > Print, File > Export as > PDF, File > Export as > iOS App, File > Export as > HTML5 Publication, File > Export as > EPS, File > Export as > ePub, and File > Export as > Kindle commands.
WORKING WITH OUTPUT STYLES 5 Click OK. 6 Click Save. App Studio output styles To specify the settings for App Studio output styles: The Output Styles dialog. 1 To edit an App Studio output style, choose the output style and click Edit. To add a new output style, select App Studio from the New drop-down menu. The Edit App Studio Output Style dialog displays.
WORKING WITH OUTPUT STYLES Edit App Studio Output Style dialog 2 Enter a name for your style in the App Studio Output Style field. • The Pictures pane lets you set default resolution for images exported for App. Choose the maximum resolution and/or dimensions for converted/down sampled images (only applies to images used in HTML5 interactivity). • The Fonts pane lets you enable/disable packaging referenced fonts in the App. If disabled, the fonts will NOT be collected and the output may not be WYSIWYG.
WORKING WITH OUTPUT STYLES The Output Styles dialog. 1 To edit an HTML Publication output style, choose the output style and click Edit. To add a new output style, select HTML Publication from the New drop-down menu. The Edit HTML5 Publication Style dialog displays. Edit HTML5 Publication Style dialog 2 Enter a name for your style in the HTML5 Publication Style field. • The Pictures pane lets you set default resolution for images exported for App.
WORKING WITH OUTPUT STYLES • The Fonts pane lets you enable/disable packaging referenced fonts in the App. If disabled, the fonts will NOT be collected and the output may not be WYSIWYG. If enabled, users will get an alert about font licensing . • The General pane lets you enable/disable converting QuarkXPress Layout Sections to Page Stacks. Enable/disable "Continuous Page Stacks" to create a single continuous page of all pages in a section.
HTML5 PUBLICATIONS HTML5 Publications Exporting as HTML5 Publication To export a layout as HTML5 Publication: 1 Choose File > Export as > HTML5 Publication. The Export as HTML5 Publication dialog box displays. Export as HTML5 Publication dialog box 2 Navigate to the folder you want to save the HTML5 Publication to. 3 Select the layout(s) you want to use to create the multi-device HTML5 publication.
HTML5 PUBLICATIONS 4 Choose a predefined output style from the HTML5 Publication Style drop-down menu or click Options to define the export settings for the selected layout(s). If you click Options, the HTML5 Publication Export Options dialog box displays. HTML5 Publication Export Options dialog box Output styles can be managed by selecting Edit > Output Styles. See "A Guide to QuarkXPress". 5 Configure the output style using the following panes in the HTML5 Publication Export Options dialog.
HTML5 PUBLICATIONS • The Reader Controls pane lets you specify the appearance and behaviours of the layout in a web reader. • The Analytics pane lets you enable/disable Google analyics and define a Google maps API key for geolocation. • The Social Sharing pane lets you define the settings for social medium platforms. When you're finished configuring options, click OK. To capture the current settings without creating an HTML5 Publication file, click Capture Settings 6 Click Export.
HTML5 PUBLICATIONS "descriptionLines" : 2, "tocBanner" : true }, "analytics": { "GoogleAnalytics": { "trackingID": "", "enhancedLinkAttribution": false "anonymizeIp": false } }, "extensions": { "desktop": [ ], "mobile": [ ], "all": [ "webreader/ext/googlemaps.js" ], "auth": { "googlemaps": { "key": "" } } }, "publication": { "title": "AppStudio Web App", "summary": "Pub description/summary goes here", "urlRoot": "./", "configFilename": "application-config.webreader.
HTML5 PUBLICATIONS }, "options": { "facebookShare" "twitterShare" "emailShare" "linkedinShare" } : : : : true, true, true, true }, "pageNavigation": { "showArrowsForMobile": false, "showArrowsForDesktop": true }, "pageFitView": { "defaultMode": "autofit", "maxScaleForAutoFit": 4 }, "SpreadView": { "showLandscapeFacing": { "mobile": false }, } General app configuration Use the app section to configure some general application attributes: • to enable progressive downloading of pages (you can choose to ha
HTML5 PUBLICATIONS "enableExternal": true, "mobileOnly": false, "banner" : { "enabled" : false, "source" : "user-content/banner.zip", "height" : 250 } "extensions": { "desktop": [ ], "mobile": [ ], "all": [ "webreader/ext/googlemaps.js" ], "auth": { "googlemaps": { "key": "" } } "publication": { "title": "AppStudio Web App", "summary": "Pub description/summary goes here", "urlRoot": "./", "configFilename": "application-config.webreader.
HTML5 PUBLICATIONS • Use the pageFitButton to show/hide the button that can toggle between the page fitting options (ie Fit Page to Window (autofit mode) and Fit Width). • Use the spreadToggleButton to show/hide the toggle button which can help switch between Single Page display or Facing Pages display for a publication with facing pages. If the publication has only single pages, then this button is not available by default (irrespective of the setting).
HTML5 PUBLICATIONS For Facebook sharing, you are required to generate your own Facebook AppID and update it in the AppID property. For more information see "developers.facebook.com/docs/apps/register".
HTML5 PUBLICATIONS pages using the arrows in addition to navigation using the scrubber bar, filmstrip, toc or interactivity. "pageNavigation": { "showArrowsForMobile": false, "showArrowsForDesktop": true }, View configuration Use the pageFitView and the spreadView sections to configure the view for your app. pageFitView • Use the defaultMode parameter to set the default fitting mode of the publication page in your webapp. Pages can be scaled up or down appropriately to fit the device size / browser size.
HTML5 PUBLICATIONS Web app capabilities Autofit and Autoscale HTML5 Publication Regardless of the layout size, users will be able to view the output on any device without truncation. The layout will be auto fit according to device size or desktop browser size, and scaled proportionally to completely fit to the device screen size. For example, content created for iPad can also be viewed on smaller devices like iPhones and vice versa. Users can additionally switch to Fit to Window width and enable scrolling.
HTML5 PUBLICATIONS 2 Open the folder properties and unlock security. 3 Give Read & Write permissions to required users and Read only permissions to everyone, and Apply to enclosed items. View the digital output 1 Open browser and navigate to http://localhost/Digital. 2 You will be redirected to the first page in the issue.
EXPORTING FOR EPUB Exporting for ePub To export a layout in ePub format: 1 Choose File > Export as > ePub. The Export as ePub dialog box displays. Export as ePub dialog box 2 Enter a name for the exported eBook. QuarkXPress will append the correct file extension. 3 Choose an output style from the ePub Style drop-down menu or click Options. If you click Options, the ePub Export Options dialog box displays.
EXPORTING FOR EPUB ePub Export Options dialog box • The Pictures pane lets you specify the resolution, format, and quality of pictures in the ePub file. To override any custom attributes applied to individual picture components, check Override Box Settings. • The Text pane lets you specify how to export Drop Cap in Reflow eBooks: as Native Text or Ignore. • The Table of Contents pane lets you set options for the table of contents in the ePub file.
EXPORTING FOR EPUB 4 Choose Reflow or Fixed from the eBook Type section. 5 Click Save.
EXPORTING FOR KINDLE Exporting for Kindle To export a layout in Kindle format: 1 Download KindleGen from the Amazon Web site and install it into its default location. As of this writing, you can download KindleGen from http://amzn.to/HHMgj8, but this could change. 2 Choose File > Export as > Kindle. The Export for Kindle dialog box displays.
EXPORTING FOR KINDLE 3 Enter a name for the exported eBook. QuarkXPress will append the correct file extension. 4 Choose a predefined output style from the Kindle Style drop-down menu or click Options. If you click Options, the Kindle Export Options dialog box displays. Kindle Export Options dialog box Output styles can be managed by selecting Edit > Output Styles. See "A Guide to QuarkXPress". • The Pictures pane lets you specify the resolution, format, and quality of pictures in the Kindle eBook.
EXPORTING FOR KINDLE When you're finished configuring options, click OK. To capture the current settings without creating a Kindle file, click Capture Settings Output styles can be managed by selecting Edit > Output Styles. See "A Guide to QuarkXPress". 5 Choose Reflow or Fixed from the eBook Type section. 6 Click Save. If you do not have KindleGen installed, or if it is installed in a non-default location, a dialog box will display asking you to download or locate it.
THE APP STUDIO FEATURE The App Studio feature Understanding App Studio The App Studio feature lets you create a customized app for the iPad®, iPhone®, or Android device; distribute that app through the Apple® App Store or an Android app store; and then create and publish content that your customers can purchase and download from within the app. There are two parts to any App Studio solution: • An App Studio app is an app that you build with the App Studio Publishing Portal.
THE APP STUDIO FEATURE You can use QuarkXPress to create App Studio issues. Your customers will use your App Studio app to view your App Studio issues. You and your customers can also view and test App Studio issues in a free Previewer iPad app that is available from the Apple App Store. You can view App Studio issues in your own custom app or in a Previewer app.
THE APP STUDIO FEATURE Your customers can buy your issues from within your custom app. When they do, the issues download to their device from a Web server. Understanding the App Studio format The App Studio format lets you create issues using HTML5 and JavaScript. Because HTML5 is a platform-independent format, you can read App Studio issues in any Web browser that has a compatible HTML5 renderer. You can use three types of apps you can use to view App Studio issues: • App Studio Issue Previewer.
THE APP STUDIO FEATURE • Publication: Represents a set of related issues. For example, a publication might represent a particular magazine title. • Issue: Represents a discrete unit of content to be downloaded as a whole. For example, an issue might represent a single issue of a magazine title. • Article: Issues are divided into one or more articles, each of which is created from a single QuarkXPress project. Articles also allow issue creators to break issues down into multiple QuarkXPress projects.
THE APP STUDIO FEATURE These two layouts are bound to one another in terms of page count; if you add or delete a page in one of the layouts, that page is added to or deleted from both of the layouts. This make it easy for you to keep content synchronized between the two orientations. For example, assume that you're working on a 30-page issue, and you discover that you need to add a new page after page 12.
THE APP STUDIO FEATURE 8 Click Create. The issue is created on the server. You can now upload artices to this issue from within QuarkXPress. (For more information, see "Uploading an App Studio article.") Uploading an App Studio article Export works differently for App Studio issues than it does for other formats. Rather than creating a single local exported issue file on your hard disk, you upload the exported articles that make up an issue to the App Studio Publishing Portal.
THE APP STUDIO FEATURE 3 If you do not yet have a free App Studio Publishing Portal account, click Sign Up and create one. 4 Enter your user name and password, and then click Log In. The App Studio Publishing palette changes to the upload interface. App Studio Publishing palette - upload version 5 Choose your organization from the Organization drop-down menu. 6 Choose your publication from the Publication drop-down menu. 7 Choose the target issue from the Issue drop-down menu.
THE APP STUDIO FEATURE App Studio Publishing palette - upload version 10 Select the layout(s) you want to use to create the AppStudio App. 11 Choose an output style from the App Studio Output Style drop-down menu or click Options. If you click Options, the App Studio Export Options dialog box displays.
THE APP STUDIO FEATURE • The Pictures pane lets you specify the resolution of pictures in the AppStudio App file. • The Fonts pane lets you enable/disable packaging referenced fonts in the AppStudio App file. If disabled, the fonts will NOT be collected and the output may not be WYSIWYG. If enabled, users will get an alert about font licensing . • The General pane lets you enable/disable converting QuarkXPress Layout Sections to Page Stacks.
THE APP STUDIO FEATURE Publishing an App Studio issue To make an App Studio issue available in your customers' apps, click Publish for that issue in the App Studio Publishing Portal. This issue automatically becomes available, across all platforms where it is published (iOS, Android, WebReader etc.). Before you publish an App Studio issue, you can edit the metadata of the issue.
THE APP STUDIO FEATURE Getting your iPad's device ID To test your app on your iPad, you must specify its device ID (that is, its UDID).To get your iPad's UDID: 1 Plug your iPad into your computer. 2 Launch iTunes 7.7 or later. 3 Select the iPad in iTunes. 4 Click the Serial Number label. The label changes to Identifier (UDID). 5 Press Command+C to copy the device ID to the clipboard. 6 Paste the device ID into a text file.
THE APP STUDIO FEATURE Creating your iOS Distribution Certificate You must have an iOS Distribution Certificate to submit an app to the App Store. To create this Certificate: 1 Go to http://developer.apple.com/account/ and log in. 2 Click Certificates, Identifiers & Profiles . 3 Under the Certificates section in the left sidebar, click Production. 4 Click the icon. The Add iOS Certificate dialog displays. 5 In the Select Type tab, select App Store and Ad Hoc from the Production section. 6 Click Continue.
THE APP STUDIO FEATURE 3 Enter a name for your iPad (for example, "Jane's iPad") in the Name field, then paste the iPad's UDID in the UDID field. See "Getting your iPad's device ID". To register multiple devices at one time, select Register Multiple Devices and click Choose File to upload a file containing the devices you wish to register. (maximum of 100 devices per file.) 4 Click Continue. 5 Click Submit. Creating an app ID Every app must have a unique ID.
THE APP STUDIO FEATURE 3 Enter the name of your app in the App ID Description field. Note that this is NOT the name that will display for the app in the App Store. 4 Leave the App ID Prefix drop-down menu set to Generate New. 5 In the App ID Suffix section, use the Bundle ID field to enter a unique identifier for your app, using the form com.[your organization's name].[name of your app]. For example, if the app is being created for 123 Productions, the bundle identifier might be com.123productions.
THE APP STUDIO FEATURE Do not check Enable Services > iCloud, Enable Services > Data Protection, or Enable Services > Game Center. For enabling push notifications, see Setting up for push notifications. 7 Click Continue. 8 You will be asked to confirm the information for your app. Click Register. Setting up for push notifications You can use push notifications to notify your customers when a new issue of your publication becomes available.
THE APP STUDIO FEATURE 4 Click the Configure button for Development Push SSL Certificate. The Apple Push Notification Service SSL Certificate Assistant screen displays. 5 Follow the instructions on the screen. The instructions will direct you to create a certificate signing request, upload it in the Apple Push Notification Service SSL Certificate Assistant screen, and download an Apple Push Notification Service SSL certificate. This file should have a name like "aps_development_identity.cer.
THE APP STUDIO FEATURE 6 In the Generate tab, specify a name in the Profile Name field. This will be used to identify the profile in the portal. 7 Click Continue. 8 In the Download tab, click Download to download the Development Provisioning Profile to your desktop. . Creating an App Store Provisioning Profile You must have an App Store Distribution Provisioning Profile to build an app for submission to the App Store.
THE APP STUDIO FEATURE 4 Select the Platforms you wish to enable your app for. 5 In the Name field, enter the name of your app as you want it to display in the App Store. 6 Choose a language from the Primary Language drop-down menu. 7 Choose the ID of your app from the Bundle ID drop-down menu or click Developer Portal to create a new Bundle ID. See "Creating an app ID." Once the new Bundle ID has been created, it will appear on the drop-down menu.
THE APP STUDIO FEATURE 2 Click Manage Your Applications. The Manage Your Apps page displays. 3 Click your app. The app's page displays. 4 Click Features and from the left sidebar select In-App Purchases. The In-App Purchases page displays. 5 Click Create New. The Select Type screen displays. 6 To specify what type of in-app purchase you're creating, click one of the following buttons. • Consumable: Do not use this option. • Non-Consumable: Click this option to create an in-app purchase for a single issue.
THE APP STUDIO FEATURE 11 If you are creating an subscription in-app purchase, you must specify one or more available durations for the subscription. Click Add Duration and follow the instructions on the screen. The Create New In-App Purchase page displays. • In the Product ID field, enter your bundle identifier, followed by the issue duration. For example: com.123productions.123magazine.6months. • Check Cleared for Sale.
THE APP STUDIO FEATURE Creating a keystore Create a Google keystore for Mac Read the documentation here: http://docs.appstudio.net/display/AppStudio/2.+Create+a+Google+Keystore. For further information on this, please read the Android documentation here: http://developer.android.
THE APP STUDIO FEATURE click on this link: http://www.oracle.com/technetwork/java/javase/downloads/ and install the JDK. To create a Google keystore for Windows: 1 Open the command prompt and navigate to Program Files/Java/jdk1.7.0_03/bin 2 Type in the following Keytool command to generate a private key: keytool -genkey -v -keystore Your_personal_file_title.keystore -alias Your_personal_alias -keyalg RSA -keysize 2048 -validity 10000, editing the following: Your_personal_file title and Your_personal_alias.
THE APP STUDIO FEATURE 1 On the App Studio Publishing Portal (http://my.appstudio.net), go to the publication for which you want to create an app. 2 Locate the entry for the application you want to build and click View for that application. 3 Click App Manager. 4 Click Build for the platform you want to build for. A form displays. 5 Fill out the form and provide the various resources it requests. If you have questions about a part of the form, click the corresponding question mark in the form.
THE APP STUDIO FEATURE If you are charging for issues, you must associate your in-app purchases with the app. To do this, click Edit in the In-App Purchases area, then check all of the in-app purchases you want associated with the app and click Save. 5 When you're sure everything is final, click Save. 6 Click Ready to Upload Binary. If you skip this step, you will not be able to upload your app in step 9. 7 Download the Application Loader or Xcode app from the link provided in Build.
EXPORTING AS AN IOS APP Exporting as an iOS app QuarkXPress allows users to select one or more digital layouts and export them directly to an iOS App. QuarkXPress iOS Apps are a special type of App Studio App and use the App Studio Output Styles. The following prerequisites must be complete before you export as an iOS App: 1 Must have an Apple developer account to build the iOS Apps. 2 Create an Apple ID and Bundle ID using iTunes Connect for the iOS App you want to build.
EXPORTING AS AN IOS APP Export as iOS App dialog box 2 Navigate to the folder where you want to save the iOS App to. 3 Select the layout(s) you want to use to create the iOS App. 4 Choose a predefined output style from the Output Style drop-down menu or click Options. If you click Options, the iOS App Export Options dialog box displays.
EXPORTING AS AN IOS APP iOS App Export Options dialog box Output styles can be managed by selecting Edit > Output Styles. See "A Guide to QuarkXPress". • The Pictures pane lets you set default resolution for images exported for the App. Choose maximum resolution and/or dimensions for converted/down sampled images (only applies to images used in HTML5 interactivity). • The Fonts pane lets you enable/disable packaging referenced fonts in the App.
EXPORTING AS AN IOS APP • The App Details pane lets you specify the general App settings required for App submission. • Short App Name: (Mandatory) Enter the name for the App on the homescreen (beneath the icon). • Long App Name: (Optional) Enter the Apps full name here for display throughout the App. (for example in the Scrubber view). • Help Page URL: (Optional) Enter the URL to the page which will be shown when the user clicks the help icon located on the navigation bars within the App.
EXPORTING AS AN IOS APP • The iTunes Connect pane lets you specify the App ID and the Bundle ID along with the version of the App that will be created. • App Version: Enter the App version. Typically the first version you submit to Apple will be 1.0.0, and then incremented every time you create a new version. • Apple ID: Enter the Apple ID. (This was created in "Creating an app description in iTunes Connect.") • Bundle ID: Enter the Bundle ID. (This is the App ID you created in "Creating an app ID.
EXPORTING AS AN IOS APP • Distribution Certificate: Click Choose File and select an iOS Disribution Certificate. This is the iOS Distribution Certificate you created in "Creating your iOS Distribution Certificate", but this created a .cer file when what we need is a .p12 file, so before you can choose this file you must first export the .cer file as a .p12 file. In the folder where the file resides, select the certificate file and its private key, right-click and choose Export 2 items, and save as a .
EXPORTING AS AN IOS APP • Development Certificate Password: Enter the password that you set when you exported the Development Certificate. If you did not set a password when you exported the file, leave this blank. • Development Provisioning Profile:Click Choose File and select a Development Provisioning Profile. (This is the Development Provisioning Profile you created in "Creating a Development Provisioning Profile.
EXPORTING AS AN IOS APP • iPhone 6/7 Splash Screen: Click Choose File and select the image you want displayed in the spash screen in a Landscape orientation. • iPhone 6 Plus/7 Plus Splash Screen: Click Choose File and select the image you want displayed in the spash screen in a Portrait orientation. 6 When you're finished configuring options, click Build.
LEGAL NOTICES Legal notices ©2017 Quark Software Inc. and its licensors. All rights reserved. Protected by the following United States Patents: 5,541,991; 5,907,704; 6,005,560; 6,052,514; 6,081,262; 6,633,666 B2; 6,947,959 B1; 6,940,518 B2; 7,116,843; 7,463,793; and other patents pending. Quark, the Quark logo, QuarkXPress, and QuarkCopyDesk are trademarks or registered trademarks of Quark Software Inc. and its affiliates in the U.S. and/or other countries.
INDEX Index A actions 45 app IDs 93 App Studio 60 App Studio apps 81 App Studio assets 52 App Studio format 83 Go to Page action 45, 46 Go to Previous Page action 45 Go to Slide action 45 Go to URL action 45 grouped characters 49 H App Studio issues 81 Hide Object action 45 Apple App Store 103 Hide Pop-Up action 45 Apple iOS Developer accounts 90 horizontal orientation 84 apps 84 HTML content 43 articles 83 HTML5 83 audio 31 HTML5 palette 26 HTML5 Publication 61 B buttons 33 C certificates
INDEX O Open action 45 organizations 83 orientations 84 output 59 Reset Page action 45 rubi 49 rubi text 49 S output style 60, 61 scroll zones 35 output styles 59 shared content 84 overlapping items 52 Show Object action 45 Show Pop-Up action 45, 47 P Pause Object (Toggle) action 45 Pause Sound Files (Toggle) action 45 PDF content 43 slideshows 37, 40 split screen 24 T pictures, 360 28 Take Snapshot action 45 pictures, adding 28, 30, 34 text reflow 52 pictures, animation 30 text, rasterizi
