Purple Quick Start: Magazine Create Apps People Love 1
Willkommen bei Purple Was Sie zum Bauen einer App benötigen Apps zu bauen ist mit Purple spielend leicht - alles was Sie dazu benötigen ist: Ein Mac mit OSX 10.9 (Mavericks) oder höher. Ein ipad oder iphone, wenn Sie Publikationen für ios erstellen möchten. Ein Tablet oder Phone mit Android, wenn Sie Publikationen für Android erstellen möchten. Wenn Sie keinen Mac haben melden Sie sich zu unserem Beta-Programm für den Web-Composer an: http://www.purplepublish.com/de/ webcomposerbeta/ Purple Quick Start Magazine August 2015 2
Wählen Sie den Workflow, der zu Ihnen passt Wege zu Ihrer App Purple ermöglicht Ihnen, Apps auf verschiedene Arten zu bauen: InDesign / Photoshop Enhanced PDFs From Scratch Sie haben bereits Inhalte in Adobe InDesign oder Adobe Photoshop, die Sie in Ihrer App interaktiv aufbereiten wollen. Sie haben bereits ein PDF und möchten dies einfach in einer App publizieren und ggf. mit Animationen, Bildern und Videos anreichern. Sie haben Texte, Bilder und Videos und wollen daraus zum Beispiel ein digitales Magazin mit Multimediainhalten machen. Purple Quick Start Magazine August 2015 3
Purple Publishing Suite Übersicht Dieser Quick Start gliedert sich in 3 Teile: Teil 1 Teil 2 Teil 3 Einrichten Ihres Accounts Arbeiten mit dem Purple Composer Apps erstellen und Inhalte publizieren Purple Quick Start Magazine August 2015 4
Teil 1 Einrichten Ihres Accounts Purple Quick Start Magazine August 2015 5
Teil 1 Einrichten Ihres Accounts Sie lernen in diesem Abschnitt: Wie Sie PDFs mit Animationen, Videos oder Bildern anreichern. Wie Sie bestehende Links und Titel aus dem PDF übernehmen. Wie Sie eine Vorschauversionen Ihrer App erstellen. Purple Quick Start Magazine August 2015 6
Einrichten Ihres Accounts Sign up Melden Sie sich auf http://www.purplemanager.com an. Falls Sie noch keinen Account besitzen, können Sie sich kostenlos registrieren. Purple Quick Start Magazine August 2015 7
Einrichten Ihres Accounts Download Purple Composer Der Purple Composer ist eine Authoring-Umgebung für die Erstellung von digitalen Publikationen. Mit ihm erstellen Sie die Inhalte für Ihre erste App. Klicken Sie auf "Herunterladen", um den Purple Composer herunter zu laden. Purple Quick Start Magazine August 2015 8
Einrichten Ihres Accounts Installation Das Composer- Icon nach dem Download Drag des Icons auf den "Programme"-Ordner Nach erfolgtem Download finden Sie den Purple Composer im "Downloads"-Ordner. Ziehen Sie das Composer-Icon aus dem Downloads-Ordner in den "Programme"-Ordner und starten Sie den Purple Composer. Purple Quick Start Magazine August 2015 9
Einrichten Ihres Accounts Purple Composer Der Anmeldedialog im Purple Composer beim ersten Start Melden Sie sich im Purple Composer beim ersten Start mit den gleichen Benutzerdaten wie im Purple Manager an. Sie müssen sich nur einmal anmelden, Ihre Daten werden sicher gespeichert. Wir gehen in diesem Abschnitt nur kurz auf die wichtigsten Funktionen des Purple Composers ein. Mehr erfahren Sie im Handbuch. Purple Quick Start Magazine August 2015 10
Einrichten Ihres Accounts Aufbau der Benutzeroberfläche 1. Export- und Vorschaufunktionen 1 2 2. Die Werkzeugleiste mit den Werkzeugen: Selektieren, Text, Rechteck, Bild, Video, WebView und TouchArea. 5 3. Die Seitenliste. Sie bietet eine Übersicht aller Seiten in Ihrem Dokument. 6 3 4 4. Der Inspector. Element-Eigenschafen wie Position, Größe, Farbe usw. stellen Sie hier ein. 5. Die Bühne. Auf der Bühne platzieren Sie Elemente. 6. Die Ebenenliste. Alle Elemente werden dort in einer Liste angezeigt. Elemente die oben Sind überdecken Elemente, die weiter unten liegen. Jetzt Tutorial ansehen Purple Quick Start Magazine August 2015 11
Teil 2 Arbeiten mit dem Purple Composer 12
Teil 2 Arbeiten mit dem Purple Composer Sie lernen in diesem Abschnitt: Wie Sie PDF- Dateien importieren. Wie Sie PDFs mit Animationen, Videos oder Bildern anreichern. Wie Sie bestehende Links und Titel aus dem PDF übernehmen. Wie Sie eine Vorschauversionen Ihrer App erstellen. Hinweis: Für diesen Abschnitt benötigen Sie das Beispiel-PDF. Dieses finden Sie in dem mitgelieferten Beispiel-Ordner. Purple Quick Start Magazine August 2015 13
Arbeiten mit dem Purple Composer Schritt 1 - PDF Import 1. Öffnen Sie den Purple Composer und wählen Sie Datei -> Neu 2. Im New Project-Wizard wählen Sie Enhanced PDF. Hinweis: Über den Button Optionen können Sie einstellen, on Doppelseiten oder Einzelseiten erzeugt werden sollen. Ist die Option Erste Seite ist Titelseite aktiv, wird für die erste Seite des Dokuments eine Einzelseite angelegt. Weitere Informationen zu den Import-Optionen finden Sie hier. Für dieses Beispiel belassen Sie es einfach bei den Standardeinstellungen. 3. Wählen Sie das Beispiel-PDF über Select PDF to import... aus und importieren Sie es dann durch einen Klick auf Neues Dokument anlegen. Das PDF wird nun - je nach Einstellung - in einzelne Seiten oder Doppelseiten zerlegt, die Sie im Purple Composer einzeln bearbeiten können. Purple Quick Start Magazine August 2015 14
Arbeiten mit dem Purple Composer Schritt 2 - Eine Animation hinzufügen Erstellen Sie durch Doppelklick auf der Zeitleiste oder durch Klick auf den Keyframe-Button bei Sekunde 0 ein Keyframe Purple Quick Start Magazine August 2015 15
Arbeiten mit dem Purple Composer Schritt 2 - Eine Animation hinzufügen Setzen Sie die Deckkraft (Alpha) des Elements in den Layouteinstellungen auf 0. Die Grafik ist nun nicht mehr sichtbar. Purple Quick Start Magazine August 2015 16
Arbeiten mit dem Purple Composer Schritt 2 - Eine Animation hinzufügen Erstellen Sie ein zweites Keyframe bei Sekunde 1 und setzen die Deckkraft auf 1. Purple Quick Start Magazine August 2015 17
Arbeiten mit dem Purple Composer Schritt 2 - Eine Animation hinzufügen Klicken Sie auf Play. Der "Neu-Button" blendet sich langsam ein. Purple Quick Start Magazine August 2015 18
Arbeiten mit dem Purple Composer Schritt 3 - Ein Video hinzufügen Ziehen Sie das Video aus dem Beispiel-Ordner auf die Bühne und platzieren Sie es in dem Projekt : template_citystories_tablet_ls /Seite 3 ( article) Speichern Sie Ihr Projekt unter dem Namen "EnhancedPDF". Purple Quick Start Magazine August 2015 19
Arbeiten mit dem Purple Composer Schritt 4 - Export Der Publish-Button in der oberen Fensterleiste Als Vorbereitung für die Bereitstellung in der App klicken Sie zunächst auf das Publish Icon in der oberen Fensterleiste, im nachfolgenden Dialog dann auf den Publish Button. Nach dem Publizieren öffnen Sie den Ausgabe- Ordner durch Klick auf das Open Output Icon. Publish-Dialog Für den Purple Manager benötigen Sie das Purple-Archiv (*.pkar) sowie alle Audio- und Videodateien (z.b. *.m4v). Die anderen Dateien werden nicht benötigt. Hinweis: Der Upload der Dateien in den Purple Manager erfolgt momentan noch manuell per Drag&Drop aus dem Export-Ordner in den Browser. Künftig wird dies direkt automatisiert aus dem Purple Composer möglich sein. Exportierte Dateien für den Upload in den Purple Manager Purple Quick Start Magazine August 2015 20
Teil 3 Apps erstellen und Inhalte publizieren 21
Step 3 Apps erstellen und Inhalte publizieren Sie lernen in diesem Abschnitt: Wie Sie eine neue App anlegen. Wie Sie das Styling Ihrer App anpassen. Wie Sie die App bauen. Wie Sie Publikationen und Ausgaben anlegen. Wie Sie Ihre App installieren. Jetzt Tutorial ansehen Purple Quick Start Magazine August 2015 22
Apps erstellen und Inhalte publizieren Konfiguration Ihrer App - Titel und Typ Öffnen Sie den Purple Manager im Webbrowser: http://www.purplemanager.com Klicken Sie in der oberen Menüleiste auf Apps, dann auf den Button Neu und geben sie einen Namen für Ihre App ein. Hinweis: Der Paketname ist eine eindeutige Bezeichnung für Ihre App, der wie eine umgekehrte Domain aufgebaut ist. Tragen Sie dort com.example. [Titel Ihrer App]* ein. Anlegen einer neuen App im Purple Manager Für Typ der App wählen Sie Kiosk app aus. Wählen Sie aus, für welche Plattformen (ios, Android, Kindle) die App gebaut werden soll. Wählen Sie als Ausrichtung das Hochformat für diese Beispiel-App. *Verwenden Sie ausschließlich Buchstaben (ohne Umlaute, Sonderzeichen, Leerzeichen und Zahlen). Purple Quick Start Magazine August 2015 23
Apps erstellen und Inhalte publizieren Konfiguration Ihrer App - Darstellung Es gibt verschiedene Möglichkeiten, Inhalte in der App darzustellen, da sich die Inhalte stark unterscheiden können. Die gewählte Content-Fit-Strategie hat Auswirkungen auf die Anzeige. Für PDFs ist in der Regel eine ganzheitliche Seitendarstellung (PDF) mit Doppelseiten sinnvoll, bei langen Artikeln empfiehlt die Einstellung Magazine. Wählen Sie für Ihre Test-App die Einstellung Magazine. Konfiguration der Darstellung in der App Purple Quick Start Magazine August 2015 24
Apps erstellen und Inhalte publizieren Konfiguration Ihrer App - Styling Im Bereich App/Kiosk Design können Sie den Kiosk Ihrer App an das von Ihnen gewünschte Design anpassen. Legen Sie zunächst unter App Design ein Icon fest. Sie können dazu das Icon aus dem Beispiel-Ordner nehmen oder ein eigenes Icon hochladen. Das Icon wird automatisch für alle benötigten Auflösungen skaliert, wahlweise können Sie auch verschiedene Icons für die unterschiedlichen Größen anlegen. Hinweis: Viele Schriften unterliegen Lizenzbedingungen, die eine Nutzung in Apps betreffen. Stellen Sie sicher, dass Sie die notwendigen Lizenzen für die App-Nutzung besitzen oder verwenden Sie freie Schriften. Eine Übersicht der vorinstallierten Schriften sowie Tipps, wie Sie weitere lizenzfreie Schriften nutzen finden Sie in der Purple- Knowledgebase: http://www.purplepublish.com/de/ knowledgebase/einbinden-von-schriften/ Damit eine korrekte Darstellung aller Texte in der App erfolgt, laden Sie unter benutzerdefinierte Schriftarten eine ZIP-Datei mit allen Schriften hoch, die Sie in Ihrem Projekt verwendet haben*. Für das Beispiel-Projekt müssen Sie jedoch keine weiteren Schriften hochladen, da standardmässig bereits ein Satz an lizenzfreien Schriften in Purple-Apps enthalten ist. *Die Schriften müssen im *.ttf Format vorliegen und dürfen sich nicht in Unterordnern befinden. Purple Quick Start Magazine August 2015 25
Apps erstellen und Inhalte publizieren Konfiguration Ihrer App - Styling ff. Für jede von Ihnen gewählte Plattform, für die die App gebaut werden soll können Sie nun das Styling der App festlegen. Legen Sie als erstes den Begrüßungsbildschirm (Splashscreen) für die verschiedenen Gerätetypen fest, der bei jedem Start der App erscheint. Wie beim App-Icon werden auch hier die unterschiedlichen Auflösungen automatisch vom Purple Manager erstellt und können nachträglich bei Bedarf einzeln ausgetauscht werden. Styling des Kiosks im Purple Manager Purple Quick Start Magazine August 2015 26
Apps erstellen und Inhalte publizieren Konfiguration Ihrer App - Styling ff. Unter Kiosk Design können Sie das Aussehen des Kiosks ihrer App individualisieren. In den Basiseinstellungen wählen Sie aus, ob Reiter (Tabs) für Publikationen und Ausgaben angezeigt werden. Sie können hier ebenfalls festlegen ob und mit welchen Parametern eine Suche in den Ausgaben möglich sein soll. Für die Beispiel-App benötigen wir weder Tabs noch Suche. In den erweiterten Einstellungen können Sie die Farbwerte einstellen, die im Kiosk für Texte, Buttons, Hintergründe usw. genutzt werden sollen. Klicken Sie auf die Hilfe-Icons, um ein Beispiel für die jeweiligen Farbeinstellungen zu sehen. Styling Hilfe bei Klick auf Lupen- Symbol Hinweis: Die Farbwerte können Sie entweder als hexadezimalen Wert (wie bei CSS, z.b. #ffffff) eintragen oder den Farbwähler nutzen. Im %-Feld legen Sie die Deckkraft der Farbe fest. Purple Quick Start Magazine August 2015 27
Apps erstellen und Inhalte publizieren Konfiguration Ihrer App - Styling ff. Sie können grundsätzlich alle Einstellungen global für alle Plattformen festlegen (allgemeine Einstellungen) und diese pro Plattform überschreiben. Sind in den plattformspezifischen Einstellungen Felder leer, so wird der Wert aus den globalen Einstellungen übernommen. Haben Sie für den Kiosk Hintergrund also beispielsweise den Wert #666666 (Grau) gewählt, wird dieser automatisch für den Kiosk-Hintergrund der anderen Betriebssysteme übernommen. Der Wert kann pro Plattform überschrieben werden. Der Kiosk kann ein Bild für die Kopfzeile (Header) enthalten, die je nach Plattform (ios, Android) unterschiedlich ist. Styling des Kiosks im Purple Manager Tauschen Sie die Kopfgrafik durch die Grafik im Beispiel-Ordner für die von Ihnen gewählte Plattformen aus. Nachdem Sie die Farbeinstellungen vorgenommen haben, klicken Sie auf Speichern. Purple Quick Start Magazine August 2015 28
Apps erstellen und Inhalte publizieren Bauen der App Sobald Sie das Styling abgeschlossen haben gelangen Sie wieder auf die Übersichtsseite Ihrer Test-App. Klicken Sie nun unter Build Apps auf den Button Build und wählen Sie für die Preview Version die Plattformen aus, für die die App erstellt werden soll. Ein Klick auf den Button Build erstellt im Anschluss Ihre Test-App. Dialog zum Bauen von Apps Sie gelangen erneut auf die App- Übersichtsseite und können nun Publikationen anlegen, die in Ihrer App erscheinen sollen. Hinweis: Das Bauen der App dauert je nach Plattform (Android, ios) zwischen 1 und 5min Purple Quick Start Magazine August 2015 29
Apps erstellen und Inhalte publizieren Anlegen einer Publikation Klicken Sie auf Inhalte zuweisen und legen Sie mit Hilfe des + -Buttons eine neue Publikation an. Legen Sie ein Bild für die Publikation fest (citystories-publication.png im Beispiel- Ordner) und geben Sie als Titel "City Stories" ein. Weitere Einstellungen müssen Sie vorerst nicht vornehmen. Hinweis: Achten Sie bei der Wahl der Sprache darauf das der Wert Any ausgewählt ist, wenn Sie die Inhalte der Publikation auf jedem Gerät darstellen wollen. Eine Eingrenzung auf z.b. English führt dazu, dass die Inhalte nur auf Geräten dargestellt werden die englisch als Systemsprache eingestellt haben. Purple Quick Start Magazine August 2015 30
Apps erstellen und Inhalte publizieren Ausgabe anlegen Nach dem Abspeichern Ihrer Publikation gelangen Sie auf die Übersichtsseite Ihrer Publikation. Klicken Sie zum Anlegen einer neuen Ausgabe auf den Button Neu im Bereich Ausgaben. Legen Sie ein Bild für die Ausgabe fest (citystories-issue.png im Beispiel-Ordner) und geben Sie als Titel "City Stories Ausgabe 1" ein. Als Beschreibung geben Sie eine Zusammenfassung des Inhaltes an, beispielsweise:"die erste Ausgabe von City Stories dreht sich rund um den Big Apple - New York. Das Veröffentlichungsdatum ist für die Beispiel- App hier nicht relevant. Hinweis: In einer Preview-App werden alle Ausgaben dargestellt, auch wenn das VÖ-Datum in der Zukunft liegt. Haben Sie die Ausgabe abgespeichert erscheint diese nun in der Liste der Ausgaben für die Publikation. Purple Quick Start Magazine August 2015 31
Apps erstellen und Inhalte publizieren Inhalte hinzufügen Als letzten Schritt müssen Sie nun die vom Composer erstellten Dateien der Ausgabe zuordnen. Legen Sie eine neue Version der Ausgabe an (Button Neu). Es erscheint ein Eintrag in der Liste darunter. Scrollen Sie zum Abschnitt Bundles, klicken Sie dort auf Inhaltspaket hochladen und wählen Sie die *.pkar Datei aus dem Purple Composer Output-Ordner aus. Hinweis: In diesem Schritt legen Sie fest, auf welchen Betriebssystemen oder Gerätetypen der Inhalt dargestellt wird. Ist die Checkbox für Phones z.b. nicht angewählt wird Ihr Inhalt nur auf Tablets sichtbar sein. Haben Sie Videos oder Audiodateien verwendet, laden Sie diese im Bereich Assets hoch (*.mp4, *.m4v, *.mp3). Fehlen Dateien erhalten Sie vom Purple Manager eine Rückmeldung. Als letzten Schritt aktivieren Sie die Ausgabe, indem sie den Toggle-Button In Vorschau-App veröffentlichen auf on stellen. Ihre Ausgabe steht nun bereit! Purple Quick Start Magazine August 2015 32
Apps erstellen und Inhalte publizieren Installation der App Um Ihre neue App zu installieren, öffnen Sie den Browser auf ihrem Gerät und melden Sie sich an. Öffnen Sie den Purple Manager auf dem Device per QR Code! http://www.purplemanager.com Tappen Sie unter Build Apps auf das das violette Icon das ihrem Betriebssystem entspricht. Es erscheint ein PopUp, in dem Ihre App Versionen aufgeführt sind. Ein Tap auf die Version installiert die App dann auf dem dem Gerät. ios Geräte installieren Apps automatisch, bei Android Geräten laden Sie eine APK Datei auf Ihr Gerät herunter, die Sie dann im Anschluss installieren. Gebaute App-Versionen zum Herunterladen Purple Quick Start Magazine August 2015 33
Apps erstellen und Inhalte publizieren Fertig! Purple Quick Start Magazine August 2015 34
Weitere Fragen? Kontaktieren Sie uns! Kolja Kosim helpdesk@sprylab.com +49 (0) 30 23 62 58 95 0 sprylab technologies GmbH Keithstr. 2-410787 Berlin Erfahren Sie, welche Apps und Projekte wir für unsere Kunden umgesetzt haben und lassen Sie sich inspirieren! Axel Springer BAUER Media Group Hubert Burda Media WEKA Media Publishing Purple Quick Start Magazine August 2015 35
Purple Quick Start August 2015 purplepublish.com36