tango media tango team - MarkStein · Kurzanleitung Digitale Magazine 3 Die richtigen...

1Kurzanleitung Digitale Magazine

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öhertango App-Generator 2.0 oder höher

© Copyright 2012 • Mark Stein Software Entwicklungs- und Vertriebs GmbH • D-64297 Darmstadt

Kurzanleitung

tangomedia

tango team


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 11Scrollen der Seiten 11Ein- und Ausblenden von Ebenen 12Abspielen von Multimediainhalten 13Bildergalerien 14Verlinkung von Webseiten im InAppBrowser 15Webseiten im InPageBrowser 16Im Rahmen verschiebbare Seiteninhalte 17Verknüpfen von Seiten 18Inhaltsverzeichnis aus Gliederungsebenen 19Navigationsleiste 20HTML 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

D
ie richtigen Voraussetzungen schaffen
Mobile Provisioning Pro-file erstellen Sie als Apple

Entwickler auf der Webseitehttps://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 (Layoutpro-gramm 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-Dis-

tribution. 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.


https://developer.apple.com/ios/manage/overview/index.action

1 inch

72 point

72 pixel

1/ 72 inch

1 point

1 pixel

72 dpi

1 point = 1 pixel

E
xkurs: Layouten für digitale Publikationen W enn 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 verschiede-nen Bildschirmen unterschiedlich groß. Das liegt an dem unterschiedlichen Punktabstand der Monitore. Die Maßeinheit Millimeter hilft also beim digi-talen 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-Bild-schirme verfügten über eine Auflösung von 72 dpi (dots per inch). 72 neben-einander liegende Bildpunkte bildeten eine Länge von genau 1 Zoll ab. Eine 72 pt-Schrift war ebenfalls genau 1 Zoll hoch. Apple-Drucker arbeiteten da-mals mit einer Auflösung von 144 dpi, also genau doppelt so groß. So konn-te 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, Koordina-ten und Zeilenabstände in Point statt in Millimeter eingegeben werden.


P
ixelgenau 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üs-sen 20 Pixel für die Statusleiste ab-gezogen werden.

Querformat:Beim Querformat ist ein Abzug von Pixeln nicht erforderlich. Somit er-gibt sich im Querformat eine Breite von 1024 pt und eine Höhe von 768 pt, also die gesamte Fläche des iPad-Displays.

VoreinstellungenStellen Sie im Dialog Voreinstellun-gen von tango Studio die Maßein-heiten horizontal und vertikal auf Point ein. So ist sichergestellt, dass neue Rahmen immer gleich mit der Einheit Point angezeigt werden.


W

5

Im LayoutGeben Sie für alle Maßeinheiten im Layout ganzzahlige Werte in der Einheit Point ein. Die

erte 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 00 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.


T
esten mit Adobe PhotoshopDie 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.


T
esten mit der Mac-VorschauIm 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 > Infor-mationen 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.


D
as 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 Querfor-mat.
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ücksich-tigt werden.


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 Lay-outdokument. Achten Sie darauf, dass Sie immer eine gleiche Anzahl Hoch-format- und Querformat-Seiten in Ihrem Layoutdokument haben.


I
nteraktive Elemente ins Layout einbauen Scrollen der SeitenDie 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 ge-scrollt werden.
Das vertikale Scrollen der Seiten kann entweder stufenlos fließend oder sei-tenweise erfolgen. Sie legen das Scroll-Verhalten im Kontextmenü der Seite mit der Option Seitenweise Scrollen fest.


A

A

A

A

a

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

pp angezeigt, sobald eine Seite aufgeschlagen wird. Der Inhalt aller ande-ren Ebenen kann durch eine Aktion des Benutzers über dieser Ebene einge-blendet werden. Diese Einblend-Ebenen sind somit ideal für zusätzliche Informationen.

Das Einblenden der Ebenen erfolgt, indem Sie einen Rahmen zur interakti-ven 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

ktion Ebenen ein- und ausblenden. Legen Sie nun fest, dass die Rahmen-Schaltfläche die Ebene 2 ausblenden soll.

uf diese Art und Weise können Sie mehrere Ebenen ein und ausblenden. Erstellen Sie für jede Schalt-Aktion eine eigene Rahmen-Schaltfläche.

chtung: Die Ebene 1 darf niemals ausgeblendet werden. Sie enthält die Grundelemente Ihrer Seite und muss immer eingeblendet bleiben.

Hinweise zu Rahmen-Schaltflächen

Wenn Sie einem Rahmen uf der Karte Interaktiv eine Aktion zuordnen, dann ent-

steht in Ihrer App eine Schaltfläche. Diese Schalt-flä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, schrei-

ben Sie einen kurzen Text oder gestalten Sie mit den

Werkzeugen von tango Studio eine Schaltfläche.


A

A

V

bspielen 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.

lle Multimediainhalte müssen in einem der Formate mp3, mp4 oder mov vorliegen. Videos müssen mit H.264 kodiert sein.

ideos 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 ak-tivieren.

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 Interak-tive Aktion Verknüpfung mit Stream aus. Geben Sie die URL ein und legen Sie den Inhaltstyp (mimetype) fest.


BildergalerieniPad Apps aus tango enthalten einen eigenen Player für Bildgalerien. Grup-pieren 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 Rah-mengruppe. Ü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 Dia-log Eigenschaften Bild können Sie auf der Karte Beschreibung eine Bildun-terschrift 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 Sei-te angezeigt wird und der Leser dann auf den Vollbildmodus um-schalten kann.

Sie können aber auch die Option Nur Vollbild einschalten. Dann wird die Galerie sofort nach dem Antip-pen im Vollbildmodus dargestellt. Die sogenannte InPageGallery ent-fällt dann.


A

Verlinkung von Webseiten im InAppBrowserIn tango eingefügte Hyperlinks auf eine URL werden in der iPad App zur in-teraktiven 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 Platz-haltertext und die URL an. Es entsteht eine Schaltfläche, die in der Größe dem Rechteck entspricht, dass den Platzhaltertext umgibt.

chtung: Aktivieren Sie in beiden Fällen die Option In neuem Fenster öff-nen. Ansonsten werden die Webseiten im InPageBrowser dargestellt.


Webseiten im InPageBrowserSie 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 un-ter 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.


A
Im Rahmen verschiebbare Seiteninhalte
uf 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 Rah-men 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.


A

Verknüpfen von SeitenSie können die Seiten Ihres Digitalen Magazins mit Sprungpunkten zu ande-ren 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 Eigen-schaften 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.

ußer einer bestimmten Seitenzahl können Sie auch Schaltflächen erstellen für: Nächste Seite, Vorhergehende Seite, Erste Seite, Letzte Seite. Die Anga-ben beziehen sich dabei immer auf die Orientierung des iPads im Hoch- oder Querformat.


T

Inhaltsverzeichnis aus GliederungsebenenDie mit tango erstellte App hat ein Inhaltsverzeichnis-Menü mit bis zu drei

extebenen:

• Ressort• Titel• Vorspann

Die Einträge im Inhaltsverzeichnis werden aus Absätzen mit Gliederungs-ebenen 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


NavigationsleisteDie Navigationsleiste wird automatisch aus den Miniaturen der Seiten er-stellt. 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 Res-sorts. Auch diese werden aus Absätzen der Gliederungsebene 1 bezogen.


WA

HTML direkt einbindenSie können beliebige interaktive Elemente in HTML programmieren und di-rekt in Ihre Seiten einbinden. So können Sie beispielweise 3D-Ansichten oder Panoramas realisieren.

ählen Sie im Dialog Eigenschaften Rahmen auf der Karte Interaktiv die ktion 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 Ver-knüpfungen zu den Dateien ein, die die HTML-Datei nachlädt. Achten Sie dabei darauf, dass alle Dateien im selben Ordner liegen.


A
ls Digitales Magazin exportieren A us Ihrem fertigen Layout können Sie nun eine App erzeugen, die das Digi-tale Magazin darstellt. Exportieren Sie zunächst Ihr Layout im Format Digi-tale 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 Einstel-lungen 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 erst-

maligen 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 ei-nen 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äh-rend des Startens der App ange-zeigt. 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.


A

Die Einträge für Impressum, Beschreibung, Ausgabe-ID und InAppPurcha-se-ID werden für die Kiosk-Funktionen benötigt.

chten Sie beim Export als Digitales Magazin darauf, dass die Ausgabeein-stellungen stimmen:

• Auflösung: 72 dpi• Skalierung: 100 %• Der Wert, an dem tango erkennt, ob eine Seite für Hoch- oder Quer-

format gedacht ist, liegt bei ca. 300 mm.

iPad mit Retina DisplayDas neue iPad hat eine Auf-

lö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.


M
it dem App-Generator eine App bauen
A

W

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.

nschließ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 Distri-bution oder eine App für den Apple Store generiert.

ä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 Ih-rem Gerät zu Testzwecken zu installieren.


T
ipps und Tricks rund um Digitale Magazine • Halten Sie sich genau an die Vorgaben für die Seitenbreite, die in die-
ser Anleitung gemacht wurden. Enthält Ihr ZIP-Paket Seiten, die schmaler oder breiter als das iPad sind, dann wird das Digitale Maga-zin 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 zu-sammengehörige Varianten immer im Blick.

• Ordnen Sie Seiten für scrollbare Rahmeninhalte rechts und links ne-ben 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-For-mat 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 über-lappen.

• Verstecken Sie nichts ! Alle wichtigen Informationen müssen auf den ersten Blick erkennbar sein. Interaktive Elemente bleiben den zusätzli-chen, weiterführenden Informationen vorbehalten.

• Kennzeichnen Sie interaktive Elemente wie scrollbare Seiten, Bildga-lerien, eingeblendete Ebenen, Weblinks oder Videos mit Symbolen. Sie führen den Leser durch das Magazin.


• Ein interaktives Element pro Seite genügt. Interaktive Magazine sind ein neues Medium – verwirren Sie Ihre Leser nicht mit zu vielen Gim-micks.

• Achten Sie beim Arbeiten mit Ebenen auf die Einstellungen im Ecken-menü der Ebenenpalette. Ebenen beim Einfügen erhalten sollte einge-schaltet sein. Wenn nicht, werden Elemente aus der Zwischenablage auf der aktiven Ebene eingefügt.

• Legen Sie größten Wert auf das Inhaltsverzeichnis und die Navigati-onsleiste. Beide sind der Zugang zu Ihrem Digitalen Magazin und ver-dienen höchste Sorgfalt. Sind in Ihrem Layout keine Absätze mit Glie-derungsebenen vorhanden, dann wird das ZIP-Paket vom tango App-Generator nicht importiert !

• Der InPage-Browser eignet sich hervorragend, um Ihr digitales Maga-zin mit einem RSS-Feed auszustatten. Versorgen Sie Ihre Leser so mit den aktuellsten Nachrichten.

• Sie sind bei Twittter, Facebook oder betreiben einen Blog? Dann ver-linken Sie einfach Ihre sozialen Netzwerke direkt im Hauptmenü Ihrer App.


• Nutzen Sie die Sonderfunktionen von tango. In tango Studio wird zum Beispiel unter Extras > Gliederungsebenen eine Vorschau der Gliede-rungsebenen der geöffneten Seiten angezeigt. Diese Vorschau zeigt Ih-nen 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 Hauptme-nü 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.



Die App als digitaler ZeitungskioskMit dem tango App Generator können Sie Apps erstellen, die jeweils eine einzige Publikation enthalten. Für Bücher, Geschäftsberichte und Firmen-broschüren ist dies völlig ausreichend. Wenn Sie aber jede Woche oder jeden Monat eine Ausgabe Ihrer Zeitschrift veröffentlichen wollen, dann benöti-gen Sie in Ihrer App einen Kiosk.

Die Kiosk-App ist eine Erweiterung und wird von uns exakt an Ihre Bedürf-nisse angepasst. In-App-Käufe, Abonnement-Verwaltung, Anbindung an den Apple Newsstand – wir übernehmen das für Sie. Fragen Sie uns.

Mark Stein SoftwareEntwicklungs- und Vertriebs GmbHMarienburgstraße 2764297 DarmstadtTel. +49 (6151) 396870www.markstein.com

http://www.markstein.com

tango media tango team - MarkStein · Kurzanleitung Digitale Magazine 3 Die richtigen...

Documents

Transcript of tango media tango team - MarkStein · Kurzanleitung Digitale Magazine 3 Die richtigen...