tango media tango team Kurzanleitung Magazin-Apps für das ipad gestalten Alles, was Sie wissen sollten...... über das Gestalten von Digitalen Magazinen mit tango Studio, interaktive Elemente und das Generieren von Apps mit dem tango App-Generator. Versionen: tango Studio 4.8.1 oder höher tango App-Generator 2.0 oder höher Copyright 2012 Mark Stein Software Entwicklungs- und Vertriebs GmbH D-64297 Darmstadt 1
Inhalt Die richtigen Voraussetzungen schaffen 3 Exkurs: Layouten für digitale Publikationen 4 Pixelgenau Layouten mit tango Studio 5 Das Basislayout für das ipad erstellen 9 Interaktive Elemente ins Layout einbauen 11 Scrollen der Seiten 11 Ein- und Ausblenden von Ebenen 12 Abspielen von Multimediainhalten 13 Bildergalerien 14 Verlinkung von Webseiten im InAppBrowser 15 Webseiten im InPageBrowser 16 Im Rahmen verschiebbare Seiteninhalte 17 Verknüpfen von Seiten 18 Inhaltsverzeichnis aus Gliederungsebenen 19 Navigationsleiste 20 HTML direkt einbinden 21 Als Digitales Magazin exportieren 22 Mit dem App-Generator eine App bauen 24 Tipps und Tricks rund um Digitale Magazine 25 Die App als digitaler Zeitungskiosk 28 2
Die richtigen Voraussetzungen schaffen tango Layout Die in dieser Anleitung beschriebenen Funktionen zum Gestalten Digitaler Magazine sind Bestandteil von tango Studio (Layoutprogramm von tango media und tango team) ab Version 4.8.1. tango Studio kann sowohl unter Mac OS X 10.6 und 10.7 als auch unter Win dows XP/Vista/7 ausgeführt werden. Xcode und ios SDK Für den tango App Generator benötigen Sie das Betriebssystem Mac OS X Snow Leopard mindestens in der Version 10.6.6 oder Mac OS X Lion ab Version 10.7.4. Mobile Provisioning Profile erstellen Sie als Apple Entwickler auf der Webseite https://developer.apple.com/ ios/manage/overview/ index.action. Hier finden Sie auch ausführliche Anleitungen zum Thema Schlüsselzertifikate. Zusätzlich muss eine Entwicklungsumgebung für das Betriebssystem ios installiert sein. Sie benötigen mindestens Xcode 4.2 mit dem ios SDK für Version 5.0. Bitte beachten Sie, dass Apple für Xcode je nach Betriebssystem unterschiedliche Installer anbietet. Um selbst Apps zu generieren benötigen Sie ein Schlüsselzertifikat für die ios Distribution von Apple. Dieses muss auf Ihrem Mac in der Schlüsselbundverwaltung installiert sein. Mobile Provisioning Profile Erstellen Sie sich ein Mobile Provisioning Profile für die Adhoc-Distribution. Kopieren Sie dieses in den Ordner tango Commonfiles/ios. Erstellen Sie weiterhin ein Mobile Provisioning Profile für die App Store Distribution. Kopieren Sie auch dieses in den Ordner tango Commonfiles/ios. tango App Generator Während der tango App Generator aus Ihren Daten eine App erstellt, wird online der Lizenzschlüssel geprüft. Sie benötigen also auf jeden Fall eine aktive Internetverbindung auf Ihrem Mac. 3
72 dpi 1 inch 1/ 72 inch 72 point 1 point 72 pixel 1 pixel 1 point = 1 pixel Exkurs: Layouten für digitale Publikationen Wenn Sie digitale Publikationen gestalten, dann erstellen Sie Dokumente für den Bildschirm. Im Gegensatz zum Druck, bei dem ein Dokument in 100 % immer gleich groß erscheint, erscheint eine Bilddatei auf verschiedenen Bildschirmen unterschiedlich groß. Das liegt an dem unterschiedlichen Punktabstand der Monitore. Die Maßeinheit Millimeter hilft also beim digitalen Layouten nicht weiter. Ziel muss sein, im Layout möglichst genau die Pixel des Bildschirms zu treffen. Dafür können wir uns eine Regel aus der Frühzeit des Desktop Publishing zunutze machen. Die ersten Apple-Macintosh-Systeme waren so konzipiert, dass die Auflösung von Bildschirmen und Druckern gut zueinander passte. Apple-Bildschirme verfügten über eine Auflösung von 72 dpi (dots per inch). 72 nebeneinander liegende Bildpunkte bildeten eine Länge von genau 1 Zoll ab. Eine 72 pt-schrift war ebenfalls genau 1 Zoll hoch. Apple-Drucker arbeiteten damals mit einer Auflösung von 144 dpi, also genau doppelt so groß. So konnte die Druck-Ausgabe vom Mac durch die Verdoppelung gut an die Auflösung der Drucker angepasst werden. Das war 1984. In den folgenden Jahren entstanden die ersten DTP-Programme, Postscript und PDF. Die Auflösung der Monitore ist seither erheblich besser geworden geblieben ist aber die Grundlage 72 dpi in der Software und auch im Apple-Betriebssystem. Die Anwender von DTP-Programmen können sich diese Grundlage nun ganz einfach zunutze machen: Wenn Sie ein Dokument erstellen, dass 1024 Point breit und 768 Point hoch ist, davon ein PDF schreiben und dieses PDF bei 72 dpi in eine Bilddatei wandeln, so erhalten Sie ein Bild in der Größe von 1024 mal 768 Pixeln. Denn: Bei 72 dpi ist ein 1 Point genauso groß wie 1 Pixel. Ein pixelgenaues Layout entsteht also, wenn alle Höhen, Breiten, Koordinaten und Zeilenabstände in Point statt in Millimeter eingegeben werden. 4
Pixelgenau Layouten mit tango Studio Seitengröße Hochformat: Geben Sie die Seitengröße in Point ein. Eine Seite für das ipad ist im Hochformat 768 pt breit und 1004 pt hoch. Im Hochformat müssen 20 Pixel für die Statusleiste abgezogen werden. Querformat: Beim Querformat ist ein Abzug von Pixeln nicht erforderlich. Somit ergibt sich im Querformat eine Breite von 1024 pt und eine Höhe von 768 pt, also die gesamte Fläche des ipad-displays. Voreinstellungen Stellen Sie im Dialog Voreinstellungen von tango Studio die Maßeinheiten horizontal und vertikal auf Point ein. So ist sichergestellt, dass neue Rahmen immer gleich mit der Einheit Point angezeigt werden. 5
Im Layout Geben Sie für alle Maßeinheiten im Layout ganzzahlige Werte in der Einheit Point ein. Die Werte dürfen keine Kommastellen haben, damit sie ganzen Pixeln entsprechen. In unserem Beispiel haben wir einen Rahmen aufgezogen, der sich an der Position X = 100 pt und Y = 100 pt befindet. Die Rahmenbreite beträgt exakt 500 pt, die Rahmenhöhe ebenso. Der Rahmen hat eine Kontur von 1 pt, was 1 px entspricht. Achtung: Konturen, die nur 1 pt dünn sind, müssen immer entweder außen oder innen liegen. Eine mittige Position würde zu halben Pixeln führen, die Kontur würde somit verschwommen dargestellt. 6
Testen mit Adobe Photoshop Die Genauigkeit Ihres Layouts können Sie mit Photoshop überprüfen. Exportieren Sie zunächst Ihre Seite mit tango in ein PDF. Öffnen Sie dieses PDF mit Photoshop. Wichtig: Stellen Sie eine Auflösung von 72 dpi ein. Photoshop zeigt im Import-Dialog eine Größe des Endformat- Rahmens an, die genau der Seitengröße in tango entspricht: 768 1004 Pixel. Zoomen Sie weit in das geöffnete PDF hinein. Bei großen Maßstäben wird jeder einzelne Pixel sichtbar. Die 1-pt-Kontur aus unserem Beispiel ergibt eine Kontur von exakt 1 Pixel. 7
Testen mit der Mac-Vorschau Im Betriebssystem Mac OS X ist eine Vorschau für PDF-Dokumente integriert. Öffnen Sie das mit tango Studio erstellte PDF mit dem Programm Vorschau. Wählen Sie Werkzeuge > Informationen einblenden. Das Informationen-Fenster zeigt eine Größe des PDF von 768 1004 Point an, was der gleichen Anzahl von Pixeln entspricht. Exportieren Sie das PDF als PNG. Stellen Sie dabei eine Auflösung von 72 dpi ein. Betrachten Sie das Resultat wiederum bei hohem Zoom in Photoshop. 8
Das Basislayout für das ipad erstellen Die Seiten Ihrer digitalen Publikation gestalten Sie wie gewohnt mit den Layout-Werkzeugen von tango Studio. Für ein ipad-magazin benötigen Sie von jeder Seite zwei Varianten: Eine im Hochformat, eine im Querformat. Gestalten Sie Ihre Seiten in der ipad-originalgröße. Das Display des ipad hat eine Auflösung von 1024 768 Pixeln. Im Hochformat gehen davon noch 20 Pixel für die Statusleiste weg. Daraus ergibt sich für die Größe der Seiten in tango Studio: Hochformat: 1004 768 Pixel = 1004 768 pt Querformat: 768 1024 Pixel = 768 1024 pt Das Menü und die Navigationsleiste der App werden über dem Layout transparent eingeblendet. Sie müssen bei der Seitengröße nicht berücksichtigt werden. 9
In der Seitenpalette von tango Studio können Sie Hoch- und Querformate beliebig anordnen, beispielsweise immer die zusammen ge hörenden Seiten nebeneinander. tango erkennt automatisch anhand der Seitenbreite, ob es sich um eine Hochformat- oder Querformat- Seite handelt: Seiten mit einer Seitenbreite von 1024 pt werden auf dem ipad als Querformat-Seiten angezeigt. Seiten mit einer Seitenbreite von 768 pt werden auf dem ipad als Hochformat-Seiten angezeigt. Erstellen Sie alle Seiten Ihrer digitalen Publikation in einem einzigen Layoutdokument. Achten Sie darauf, dass Sie immer eine gleiche Anzahl Hochformat- und Querformat-Seiten in Ihrem Layoutdokument haben. 10
Interaktive Elemente ins Layout einbauen Scrollen der Seiten Die meisten Seiten werden Sie in der Standardgröße anlegen. Sie haben aber auch die Möglichkeit, den Artikellesefluss auf einer beliebigen Seitenhöhe zu gestalten. Die Seite kann auf dem ipad dann von oben nach unten gescrollt werden. Das vertikale Scrollen der Seiten kann entweder stufenlos fließend oder seitenweise erfolgen. Sie legen das Scroll-Verhalten im Kontextmenü der Seite mit der Option Seitenweise Scrollen fest. 11
Hinweise zu Rahmen-Schaltflächen Wenn Sie einem Rahmen auf der Karte Interaktiv eine Aktion zuordnen, dann entsteht in Ihrer App eine Schaltfläche. Diese Schaltfläche wird unsichtbar über Ihr Layout gelegt. Beim Antippen sehen Sie eine transparente graue Fläche in der Größe des Rahmens. Ansonsten sind Sie in der Gestaltung der Schaltfläche völlig frei: Weisen Sie dem Rahmen ein Bild zu, schreiben Sie einen kurzen Text oder gestalten Sie mit den Werkzeugen von tango Studio eine Schaltfläche. Ein- und Ausblenden von Ebenen Ordnen Sie alle festen Elemente auf der untersten Ebene an. tango Studio legt dafür automatisch die Ebene 1 an. Der Inhalt der Ebene 1 wird in der App angezeigt, sobald eine Seite aufgeschlagen wird. Der Inhalt aller anderen Ebenen kann durch eine Aktion des Benutzers über dieser Ebene eingeblendet werden. Diese Einblend-Ebenen sind somit ideal für zusätzliche Informationen. Das Einblenden der Ebenen erfolgt, indem Sie einen Rahmen zur interaktiven Schaltfläche machen. Im Dialog Eigenschaften Rahmen können Sie das Ein- und Ausblenden der Ebenen bestimmen. Wählen Sie dazu auf der Karte Interaktiv die Aktion Ebenen ein- und ausblenden. Legen Sie fest, welche Ebene die Rahmen-Schaltfläche einblenden soll. Sorgen Sie auch dafür, dass die Ebene wieder ausgeblendet werden kann. Erstellen Sie dazu eine Rahmen-Schaltfläche auf der Ebene 2. Im Dialog Eigenschaften Rahmen auf der Karte Interaktiv wählen Sie wiederum die Aktion Ebenen ein- und ausblenden. Legen Sie nun fest, dass die Rahmen- Schaltfläche die Ebene 2 ausblenden soll. Auf diese Art und Weise können Sie mehrere Ebenen ein und ausblenden. Erstellen Sie für jede Schalt-Aktion eine eigene Rahmen-Schaltfläche. Achtung: Die Ebene 1 darf niemals ausgeblendet werden. Sie enthält die Grundelemente Ihrer Seite und muss immer eingeblendet bleiben. 12
Abspielen von Multimediainhalten Ziehen Sie Audio- oder Videodateien einfach auf einen Rahmen in tango Studio. In den Eigenschaften des Rahmens wird die Aktion Multimedia abspielen aktiviert. In der ipad App entsteht eine Schaltfläche in der Größe des Rahmens, mit der der Audio- oder Videoplayer gestartet wird. Das Vorschaubild des Videos, das in tango Studio auf der Seite angezeigt werden kann, wird nicht in die App übertragen. Weisen Sie deshalb dem Rahmen auch noch ein Bild zu, welches als Platzhalter in der App angezeigt werden soll. Natürlich können Sie in diesen Rahmen auch noch Text einfügen. Alle Multimediainhalte müssen in einem der Formate mp3, mp4 oder mov vorliegen. Videos müssen mit H.264 kodiert sein. Videos werden zunächst in einem sogenannten InPagePlayer dargestellt. Dieser hat die Größe des Rahmens, dem die Videodatei zugewiesen wurde. Durch Antippen einer Schaltfläche können Sie dann den Vollbildmodus aktivieren. Ihre Video-Dateien müssen nicht zwingend in die App eingebunden werden. Sie können auch mit einer URL auf eine Datei verweisen, die abgespielt werden soll. Wählen Sie dazu im Dialog Eigenschaften Rahmen die Interaktive Aktion Verknüpfung mit Stream aus. Geben Sie die URL ein und legen Sie den Inhaltstyp (mimetype) fest. 13
Bildergalerien ipad Apps aus tango enthalten einen eigenen Player für Bildgalerien. Gruppieren Sie dazu eine Anzahl Bildrahmen in tango Studio. Aktivieren Sie im Dialog Eigenschaften Gruppe die Option Galerie Digitale Magazine. In der ipad App ergibt sich daraus eine Schaltfläche in der Größe der Rahmengruppe. Über diese Schaltfläche wird die Bildergalerie gestartet. Die Bildergalerie läuft in einem eigenem Fenster in der Größe der Gruppierung ab. Durch Antippen einer Schaltfläche schalten Sie in den Vollbild-Modus mit Zoom und Diashow ab. In der Bildergalerie werden alle Bilder der Gruppierung angezeigt. Im Dialog Eigenschaften Bild können Sie auf der Karte Beschreibung eine Bildunterschrift einfügen. Diese wird in der Bildergalerie im Info bereich unter dem Bild angezeigt. Die Standardeinstellung ist so, dass die Bildgalerie zunächst auf der Seite angezeigt wird und der Leser dann auf den Vollbildmodus umschalten kann. Sie können aber auch die Option Nur Vollbild einschalten. Dann wird die Galerie sofort nach dem Antippen im Vollbildmodus dargestellt. Die sogenannte InPageGallery entfällt dann. 14
Verlinkung von Webseiten im InAppBrowser In tango eingefügte Hyperlinks auf eine URL werden in der ipad App zur interaktiven Schaltfläche. Diese ruft den in die App eingebauten Webbrowser auf. Sie haben in tango Studio zwei Möglichkeiten, einen Weblink einzufügen: Wählen Sie im Dialog Eigenschaften Rahmen auf der Karte Interaktiv die Aktion Verknüpfung mit Webseite und geben Sie die URL an. In der App entsteht eine Schaltfläche in der Größe des Rahmens. Wählen Sie im Textmodus die Funktion Einfügen > Hyperlink. Im Dialog Hyperlink geben Sie auf der Karte Verknüpfte URL einen Platzhaltertext und die URL an. Es entsteht eine Schaltfläche, die in der Größe dem Rechteck entspricht, dass den Platzhaltertext umgibt. Achtung: Aktivieren Sie in beiden Fällen die Option In neuem Fenster öffnen. Ansonsten werden die Webseiten im InPageBrowser dargestellt. 15
Webseiten im InPageBrowser Sie können die Aktion Verknüpfung mit Webseite auch so konfigurieren, dass die Webseite zuerst auf der Seite in einem sogenannten InPageBrowser dargestellt wird. Aktivieren Sie dazu im Dialog Eigenschaften Rahmen unter Ihrer URL die Option In neuem Fenster öffnen. Der InPageBrowser hat die Größe und Position des Rahmens, der mit der Webseite verknüpft wurde. 16
Im Rahmen verschiebbare Seiteninhalte Auf den Seiten Ihres Digitalen Magazins können Sie scrollbare Rahmen - inhalte platzieren. Erstellen Sie dafür zunächst eine separate Seite. Diese dient als Quelle für die scrollbaren Rahmeninhalte. Die Quell-Seite muss die Breite oder Höhe des Rahmens haben, der die scrollbaren Inhalte aufnehmen soll. Diese Seite verknüpfen Sie mit dem Ziel-Rahmen: Erstellen Sie auf der ipad-seite einen Rahmen in der passenden Größe. Wählen Sie im Dialog Eigenschaften Rahmen die Aktion Seite in Rahmen platzieren. Tragen Sie die Seitenzahl der Quell-Seite ein. Legen Sie fest, in welche Richtung gescrollt werden soll. Bestimmen Sie das Scroll-Verhalten: Seitenweise oder stufenlos. Zusätzlich können Sie bestimmen, ob die Rahmeninhalte zoombar sein sollen. 17
Verknüpfen von Seiten Sie können die Seiten Ihres Digitalen Magazins mit Sprungpunkten zu anderen Seiten versehen. Diese sogenannte Gehe-zu-Funktion ist insbesondere bei Titelseiten nützlich. Gehen Sie so vor: Ziehen Sie einen Rahmen auf. Dieser Rahmen bildet die Schaltfläche, die das Springen zu einer anderen Seite auslöst. Wählen Sie im Dialog Eigenschaften Rahmen die Interaktive Aktion Verknüpfung mit Seite. Tragen Sie die Seitenzahl der tango-seite ein. Beim Export des Digitalen Magazins wird diese Seitenzahl automatisch für das Hoch- und Querformat angepasst. Außer einer bestimmten Seitenzahl können Sie auch Schaltflächen erstellen für: Nächste Seite, Vorhergehende Seite, Erste Seite, Letzte Seite. Die Angaben beziehen sich dabei immer auf die Orientierung des ipads im Hoch- oder Querformat. 18
Inhaltsverzeichnis aus Gliederungsebenen Die mit tango erstellte App hat ein Inhaltsverzeichnis-Menü mit bis zu drei Textebenen: Ressort Titel Vorspann Die Einträge im Inhaltsverzeichnis werden aus Absätzen mit Gliederungsebenen bezogen. Hoch- und Querformat werden dabei getrennt betrachtet. Idealerweise nehmen Sie in tango folgende Zuordnung vor: Absatzformat für das Ressort: Gliederungsebene 1 Absatzformat für den Titel: Gliederungsebene 2 Absatzformat für den Vorspann: Gliederungsebene 3 19
Navigationsleiste Die Navigationsleiste wird automatisch aus den Miniaturen der Seiten erstellt. Hoch- und Querformat werden getrennt betrachtet. Bei Scroll-Seiten wird nur der obere Teil der Seite angezeigt, so dass in der Navigationsleiste alle Seite gleich groß sind. Die Navigationsleiste beinhaltet eine Beschriftung mit den Namen der Ressorts. Auch diese werden aus Absätzen der Gliederungsebene 1 bezogen. 20
HTML direkt einbinden Sie können beliebige interaktive Elemente in HTML programmieren und direkt in Ihre Seiten einbinden. So können Sie beispielweise 3D-Ansichten oder Panoramas realisieren. Wählen Sie im Dialog Eigenschaften Rahmen auf der Karte Interaktiv die Aktion Offline HTML aus. Fügen Sie unter HTML-Datei eine Verknüpfung zu Ihrer HTML-Datei ein. Oftmals lädt die HTML-Datei noch weitere Inhalte nach, zum Beispiel Bilder. Auch Javascript und Cascading Stylesheets (CSS) sind nicht immer Bestandteil der HTML-Datei. Fügen Sie deshalb unter Zusatzdateien Verknüpfungen zu den Dateien ein, die die HTML-Datei nachlädt. Achten Sie dabei darauf, dass alle Dateien im selben Ordner liegen. 21
Als Digitales Magazin exportieren Aus Ihrem fertigen Layout können Sie nun eine App erzeugen, die das Digitale Magazin darstellt. Exportieren Sie zunächst Ihr Layout im Format Digitale Magazine. Wählen Sie dazu in der geöffneten Strecke im Hauptmenü Datei > Exportieren und stellen Sie das Exportformat Digitale Magazine ein. Nehmen Sie im Dialog Eigenschaften Digitales Magazin folgende Einstellungen vor: Lizenzdaten: Tragen Sie den Namen Ihres Schlüsselzertifikats für die ios-app- Erstellung ein. Geben Sie den Lizenzschlüssel für den tango App Generator ein. Tragen Sie den Dateinamen des Mobile Provisioning Profiles ein, welches für Adhoc Builds benutzt werden soll. Tragen Sie den Dateinamen des Mobile Provisioning Profiles ein, welches für Appstore Builds benutzt werden soll. App-Daten: Die App Version ist beim erstmaligen Build 1.0. Wenn Sie Updates machen, erhöhen Sie die Versionsnummer. Der App-Menüname ist die Kurzfassung des App-Namens. Ihre App besitzt in der Menüleiste eine Schaltfläche für einen URL-Aufruf. Geben Sie die Webadresse für das URL- Menü ein. Das Symbol (Icon) für Ihre App ist ein 72 72 Pixel großes PNG im Farbmodell RGB. Der Splashscreen wird während des Startens der App angezeigt. Verwenden Sie ein PNG der Größe 1024 768 Pixel im Farbmodell RGB. Der Ausgabename wird in der Kopfzeile der App angezeigt. Gliederungsebenen für Ressort, Titel und Unterzeile, aus denen das Inhaltsverzeichnis gebildet werden soll. Legen Sie die Farbe für die Hervorhebung der Ressorts fest. 22
ipad mit Retina Display Das neue ipad hat eine Auflösung von 2048 1536 Pixeln. Das sind in Höhe und Breite exakt doppelt so viele Pixel wie bisher (1024 768 Pixel). Somit entspricht 1 Pixel auf alten ipads jetzt 4 Pixeln auf dem neuen ipad. Die Einträge für Impressum, Beschreibung, Ausgabe-ID und InAppPurchase-ID werden für die Kiosk-Funktionen benötigt. Achten Sie beim Export als Digitales Magazin darauf, dass die Ausgabeeinstellungen stimmen: Auflösung: 72 dpi Skalierung: 100 % Der Wert, an dem tango erkennt, ob eine Seite für Hoch- oder Querformat gedacht ist, liegt bei ca. 300 mm. Im Layout bleibt es bei der Größe von 1024 768 pt. Im tango AppGenerator wird die Seite zweimal für das ipad aufbereitet: Mit einfacher Skalierung wie bisher und mit doppelter Skalierung für das ipad mit Retina Display. 23
Mit dem App-Generator eine App bauen Das aus tango Studio exportierte ZIP können Sie nun in den tango App- Generator einlesen. Klicken Sie dazu auf die Schaltfläche Importieren. Nach erfolgreichem Daten-Import sollten Sie zuerst eine Vorschau der App im ios Simulator erstellen. Klicken Sie dazu auf die Schaltfläche Vorschau. Der ios Simulator wird automatisch mit Ihrer App gestartet. Prüfen Sie alle interaktiven Funktionen und das Inhaltsverzeichnis auf Richtigkeit. Anschließend kann die eigentliche App gebaut werden. Klicken Sie dazu auf die Schaltfläche App erstellen. Je nachdem, ob Sie ein Adhoc-Profil oder ein Appstore-Profil eingebettet haben, wird eine App für die Adhoc Distribution oder eine App für den Apple Store generiert. Während der tango App-Generator aus Ihren Daten eine App baut, wird online der Lizenzschlüssel geprüft. Sie benötigen also auf jeden Fall eine aktive Internetverbindung. Nutzen Sie das iphone Konfigurationsprogramm, um die Adhoc App auf Ihrem Gerät zu Testzwecken zu installieren. 24
Tipps und Tricks rund um Digitale Magazine Halten Sie sich genau an die Vorgaben für die Seitenbreite, die in dieser Anleitung gemacht wurden. Enthält Ihr ZIP-Paket Seiten, die schmaler oder breiter als das ipad sind, dann wird das Digitale Magazin vom tango App-Generator nicht importiert! Es hat sich als übersichtlich herausgestellt, die Seiten im Hoch- und Querformat im Layout nebeneinander anzuordnen. So behalten Sie zusammengehörige Varianten immer im Blick. Ordnen Sie Seiten für scrollbare Rahmeninhalte rechts und links neben den eigentlichen Seiten an. tango sorgt beim Export automatisch dafür, dass diese Seiten aus der normalen Seitenfolge für Hoch- und Querformat entfernt werden. Vermeiden Sie unnötig große Dateien. Bilder im JPG- oder PNG-Format sollten eine Kantenlänge von 1024 Pixeln nicht überschreiten. Stellen Sie eine Auflösung von 72 dpi in Ihren Bildern ein. So sehen Sie bei einer Skalierung von 100 % sofort, ob ein Bild zu groß oder zu klein ist. Verwenden Sie den Farbmodus RGB. Damit sparen Sie noch einmal Daten und die Darstellung auf dem ipad wirkt brillanter als mit CMYK-Farben. Interaktive Rahmen-Schaltflächen dürfen nicht in den Anschnitt hinein ragen. Sie müssen vollständig auf der Seite platziert sein. Interaktive Rahmen-Schaltflächen dürfen sich nicht gegenseitig überlappen. Verstecken Sie nichts! Alle wichtigen Informationen müssen auf den ersten Blick erkennbar sein. Interaktive Elemente bleiben den zusätzlichen, weiterführenden Informationen vorbehalten. Kennzeichnen Sie interaktive Elemente wie scrollbare Seiten, Bildgalerien, eingeblendete Ebenen, Weblinks oder Videos mit Symbolen. Sie führen den Leser durch das Magazin. 25
Ein interaktives Element pro Seite genügt. Interaktive Magazine sind ein neues Medium verwirren Sie Ihre Leser nicht mit zu vielen Gimmicks. Achten Sie beim Arbeiten mit Ebenen auf die Einstellungen im Eckenmenü der Ebenenpalette. Ebenen beim Einfügen erhalten sollte eingeschaltet sein. Wenn nicht, werden Elemente aus der Zwischenablage auf der aktiven Ebene eingefügt. Legen Sie größten Wert auf das Inhaltsverzeichnis und die Navigationsleiste. Beide sind der Zugang zu Ihrem Digitalen Magazin und verdienen höchste Sorgfalt. Sind in Ihrem Layout keine Absätze mit Gliederungsebenen vorhanden, dann wird das ZIP-Paket vom tango App-Generator nicht importiert! Der InPage-Browser eignet sich hervorragend, um Ihr digitales Magazin mit einem RSS-Feed auszustatten. Versorgen Sie Ihre Leser so mit den aktuellsten Nachrichten. Sie sind bei Twittter, Facebook oder betreiben einen Blog? Dann verlinken Sie einfach Ihre sozialen Netzwerke direkt im Hauptmenü Ihrer App. 26
Nutzen Sie die Sonderfunktionen von tango. In tango Studio wird zum Beispiel unter Extras > Gliederungsebenen eine Vorschau der Gliederungsebenen der geöffneten Seiten angezeigt. Diese Vorschau zeigt Ihnen auch gleich, wie die Gliederungsebenen hierarchisch sortiert sind. In tango Studio können kopierte Rahmen auf drei verschiedene Arten eingefügt werden: An ihrer Originalposition (Einfügen im Hauptmenü und im Kontextmenü der Seite), in der Mitte des Bildschirms (Einfügen im sichtbaren Bereich im Hauptmenü) oder an der aktuellen Position des Mauszeigers (Einfügen an Mausposition im Kontext - menü der Seite) platziert werden. 27
Die App als digitaler Zeitungskiosk Mit dem tango App Generator können Sie Apps erstellen, die jeweils eine einzige Publikation enthalten. Für Bücher, Geschäftsberichte und Firmenbroschüren ist dies völlig ausreichend. Wenn Sie aber jede Woche oder jeden Monat eine Ausgabe Ihrer Zeitschrift veröffentlichen wollen, dann benötigen Sie in Ihrer App einen Kiosk. Die Kiosk-App ist eine Erweiterung und wird von uns exakt an Ihre Bedürfnisse angepasst. In-App-Käufe, Abonnement-Verwaltung, Anbindung an den Apple Newsstand wir übernehmen das für Sie. Fragen Sie uns. Mark Stein Software Entwicklungs- und Vertriebs GmbH Marienburgstraße 27 64297 Darmstadt Tel. +49 (6151) 396870 www.markstein.com 28