Purple Quick Start Guide 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 Guide 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 Guide August 2015 3
Purple Publishing Suite Übersicht Dieser Quick Start Guide 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 Guide August 2015 4
Teil 1 Einrichten Ihres Accounts Purple Quick Start Guide August 2015 5
Teil 1 Einrichten Ihres Accounts Sie lernen in diesem Abschnitt: Wie Sie Layouts aus InDesign oder Photoshop importieren. Wie Sie eine Vorschauversionen Ihrer App erstellen. Jetzt Tutorial ansehen Purple Quick Start Guide 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 Guide 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 herunterzuladen. Purple Quick Start Guide 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 Guide 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 Guide 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 Guide August 2015 11
Teil 2 Arbeiten mit dem Purple Composer 12
Teil 2 Import aus Adobe InDesign oder Adobe Photoshop für ipad Sie lernen in diesem Abschnitt: Wie Sie Layouts aus Adobe InDesign oder Adobe Photoshop importieren. Wie Sie die importierten Inhalte mit Animationen, Videos oder Bildern anreichern. Wie Sie eine Vorschauversionen Ihrer App erstellen. Purple Quick Start Guide August 2015 13
Arbeiten mit dem Purple Composer Schritt 1 - Installation der Extensions Mit den Purple Adobe-Extensions können Sie Inhalte aus Adobe InDesign und Adobe Photoshop einfach in den Composer importieren. Die Adobe-Extensions für Adobe Photoshop und Adobe InDesign sind kompatibel mit: Creative Suite 5.5 Creative Suite 6 Importiertes PSD inklusive aller Ebenen Purple Quick Start Guide August 2015 Hinweis: Die Versionen CC 2014 und CC 2015 der Creative Cloud werden wir in Kürze ebenfalls unterstützen. Mehr zu diesem Thema erfahren Sie hier:http://www.purplepublish.com/de/ knowledgebase/installation-des-adobe-plugin-fuerphotoshop-und-indesign/ 14
Arbeiten mit dem Purple Composer Schritt 1 - Installation der Extensions ff. Laden Sie die PlugIns hier herunter: Extensions herunterladen Installieren Sie die PlugIns mit Hilfe des Adobe Extension Managers durch Doppelklick auf die.zxp-datei. Installationsdialog im Adobe Extension Manager Klicken Sie auf Accept. Nach erfolgreicher Installation taucht die Extension "Purple" unter den Rubriken "InDesign CC" und "Photoshop CC" auf. Hinweis: Ggf. sind Administrationsrechte für die Installation der Plugins notwendig. Die installierte Purple Extension Purple Quick Start Guide August 2015 15
Arbeiten mit dem Purple Composer Schritt 2 - Import eines Adobe InDesign -Dokuments 1. Öffnen Sie die InDesign-Datei City Stories aus dem Beispiel-Ordner. 2. Öffnen Sie die Purple-Extension durch Klick auf Fenster -> Erweiterungen -> Purple. 3. Klicken Sie auf Export Pages, danach auf Open in Purple. Das importierte Dokument wird im Purple Composer geöffnet und kann dort weiterbearbeitet werden. Hinweis: Dokumentation zu den Konfigurationsmöglichkeiten beim Export finden Sie in unserer Knowledgebase unter: http://purplepublish.com/knowledgebase Export eines InDesign-Dokuments mittels der Purple Extension Purple Quick Start Guide August 2015 16
Arbeiten mit dem Purple Composer Schritt 3 - Import eines Adobe Photoshop -Dokuments 1. Öffnen Sie die Photoshop-Datei Purple_Tutorial_Schmetterling.psd aus dem Beispiel-Ordner. 2. Öffnen Sie die Purple-Extension durch Klick auf Fenster -> Erweiterungen -> Purple 3. Klicken Sie auf Export, danach auf Open in Purple. Das importierte Dokument wird im Purple Composer geöffnet und kann dort weiterbearbeitet werden. Export eines Photoshop-Dokuments mittels der Purple Extension Purple Quick Start Guide August 2015 17
Arbeiten mit dem Purple Composer Schritt 4 - Hinzufügen einer Animation Ziehen Sie das Bild "button-new.png" aus dem in diesem Quickstart mitgelieferten Beispiel- Ordner auf die Bühne des Purple Composers. Jetzt Tutorial ansehen Purple Quick Start Guide August 2015 18
Arbeiten mit dem Purple Composer Schritt 4 - Hinzufügen einer Animation Erstellen Sie durch Doppelklick auf der Zeitleiste oder durch Klick auf den Keyframe-Button bei Sekunde 0 ein Keyframe Purple Quick Start Guide August 2015 19
Arbeiten mit dem Purple Composer Schritt 4 - Hinzufügen einer Animation Setzen Sie die Deckkraft (Alpha) des Elements in den Layouteinstellungen auf 0. Die Grafik ist nun nicht mehr sichtbar. Purple Quick Start Guide August 2015 20
Arbeiten mit dem Purple Composer Schritt 4 - Hinzufügen einer Animation Erstellen Sie ein zweites Keyframe bei Sekunde 1 und setzen die Deckkraft auf 1. Purple Quick Start Guide August 2015 21
Arbeiten mit dem Purple Composer Schritt 4 - Hinzufügen einer Animation Klicken Sie auf Play. Der "Neu-Button" blendet sich langsam ein. Purple Quick Start Guide August 2015 22
Arbeiten mit dem Purple Composer Schritt 5 - Hinzufügen von Szenen Szenen erstellen Eine Seite im Purple Composer beinhaltet beliebig viele Szenen, die hintereinander ablaufen. Eine Szene kann direkt an eine andere Szene anknüpfen oder durch einen vordefinierten Übergang in die nächste Szene überblendet werden. Szenenübersicht Jede Szene hat ihre eigene Zeitleiste und kann beliebig viele Elemente enthalten. Mittels Aktionen wie Tap, Klick oder Swipe können Sie zwischen Szenen hin- und herspringen. 1. Klicken Sie den + Button rechts überhalb der Zeitleiste um eine neue Szene hinzuzufügen. Hinzufügen und Entfernen von Szenen 2. Legen Sie ein Textfeld in der neuen Szene an und ändern Sie den Text in "Dies ist Szene 2. Im nächsten Schritt erstellen Sie eine Aktion, die zu der neu angelegten Szene springt. Purple Quick Start Guide August 2015 23
Arbeiten mit dem Purple Composer Schritt 6 - Events und Actions Szenenwechsel per Tap Fast allen Elementen lassen sich Aktionen (Actions) zuweisen, die bei Ereignissen (Events) ausgeführt werden. Beispielsweise können Sie durch Tap auf ein Element so zu einer anderen Szene springen. Um beim Tap auf den "Neu-Button" zur Szene 2 zu springen, gehen Sie wie folgt vor: Wählen Sie den "Neu-Button" aus Klicken Sie im Inspector (rechte Seitenleiste) auf die Widget-Eigenschaften (Hand- Symbol). Klicken Sie auf Events und wählen Sie "On Tap or Click" aus. Hinzufügen von Ereignissen (Events) und Aktionen (Actions) im Inspector Wählen Sie Jump to Scene und wählen Sie "Szene 2" aus. Purple Quick Start Guide August 2015 24
Arbeiten mit dem Purple Composer Schritt 7 - Text und Typographie Text bearbeiten Im Inhaltsverzeichnis der Beispiel-Datei befindet sich ein freier Bereich. Legen Sie dort ein neues Textfeld an. Erstellen Sie zunächst einen Textrahmen durch Klick auf das Textrahmen -Werkzeug. Durch Doppelklick auf den Textrahmen wechseln Sie in den Bearbeitungsmodus. Fügen Sie Text ein und probieren Sie die verschiedenen Textoptionen aus. Im Inspector (rechten Seitenleiste) stehen Ihnen verschiedene Bearbeitungsmöglichkeiten zur Verfügung: Ausrichtung, Schriftart und farbe, Zeilenabstand, Vorder- und Hintergrundfarbe sowie Optionen zum Scrolling von Textrahmen und zur Silbentrennung. Text Inspector Jetzt Tutorial ansehen Purple Quick Start Guide August 2015 25
Arbeiten mit dem Purple Composer Schritt 8 - Export Der Publish-Button in der oberen Fensterleiste Als Vorbereitung für die Bereitstellung in der App klicken Sie zunächst auf den Button Publish in der oberen Fensterleiste, im nachfolgenden Dialog dann auf Publish. Nach dem Publizieren öffnen Sie den Ausgabe- Ordner durch Klick auf Open Output. 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 benötigen Sie nicht. 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 Guide August 2015 26
Teil 3 Apps erstellen und Inhalte publizieren 27
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 Guide August 2015 28
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 ein eindeutiger Bezeichner 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 Guide August 2015 29
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 sich die Einstellung Magazine. Wählen Sie für Ihre Test-App die Einstellung Magazine. Konfiguration der Darstellung in der App Purple Quick Start Guide August 2015 30
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 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 Guide August 2015 31
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 Guide August 2015 32
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 Guide August 2015 33
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 Guide August 2015 34
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 Guide August 2015 35
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 Guide August 2015 36
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 Guide August 2015 37
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öffentichen auf on stellen. Ihre Ausgabe steht nun bereit! Purple Quick Start Guide August 2015 38
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 Guide August 2015 39
Apps erstellen und Inhalte publizieren Fertig! Purple Quick Start Guide August 2015 40
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 Guide August 2015 41
Purple Quick Start August 2015 purplepublish.com42