Kurzanleitung Digitale Magazine - MarkStein Software

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
tangomedia
tango team
© Copyright 2012 • Mark Stein Software Entwicklungs- und Vertriebs GmbH • D-64297 Darmstadt
Kurzanleitung Digitale Magazine
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
Kurzanleitung Digitale Magazine
2

Die richtigen Voraussetzungen schaffen
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.
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.
• 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.
Kurzanleitung Digitale Magazine
3

1/ 72 inch
1 point
1 pixel
72 dpi
1 inch
72 point
72 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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
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.
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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.
Kurzanleitung Digitale Magazine
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
Kurzanleitung Digitale Magazine
28