Inhalt

Vorheriges Thema

Das Einstellen einer App in den Apple iTunes Store

Nächstes Thema

Generelle Hinweise zum Anzeigen und Einbetten von Webinhalten

Hinweise zur Medien-und Dateiformaten

Innerhalb von Leafled können verschiedene Medien eingesetzt werden. In diesem Kapitel haben wir alle Hinweise zu den verwendeten Medien-und Dateiformaten sowie den zugrundeliegenden Darstellungstechniken zusammengefasst.

Generelle Hinweise zu Koordinatensystem und Maßeinheiten

Die für die Anzeige von Publikationen verwendeten PDF Dateien liegen oft in unterschiedlichsten Größen und Seitenverhältnissen vor. Durch den Einsatz des PDF Renderers und der Leafled Hybrid-Anzeigetechnologie, ist ein Einsatz der unterschiedlichsten Seitenformate durch die Zoom- und Einpassmöglichkeiten auf dem Gerät möglich.

Weiterhin müssen ja die höheren Bildschirmauflösung der Retina Modelle des iPhone und iPad unterstützt werden.

Diese Anforderungen machen es erforderlich, das für die Anzeige der PDF/Bildschirminhalte ein einheitliches Bezugs- und Koordinatensystem benutzt werden muß.

Leafled verwendet hier die “Point”-Maßeinheit. Diese bezieht sich auf die Bildschirmgrösse des “normalen” iPad (iPad 1, iPad 2) mit 1024 Pixel (auf 198mm - lange Bildschirmkante) und 768 Pixel (auf 148mm - kurze Bildschirmkante).

Als Bezugsgrösse bzw. Maßeinheit der PDF-Seite wird deren Grösse in ‘mm’ verwendet. Ein A4 Seite hat also an der langen Kante ein Maß von ‘297 mm’.

Damit Leafled später auch die Seitengrössen unterschiedlich großer Seiten ins Verhältnis setzen, bzw. auch für PopOver-Seiten eigene Größen (Bezugsgröße im Vergleich zur aufrufenden Seite) nachhalten kann, wird diese Original-Größe über einen mappingFactor für jede einzelne Seite festgehalten.

Nachstehend ein Ausschnitt aus der SPF-Datei einer PDF Seite im Format ‘A4’ . Beachten Sie hier besonders die Parameter mappingFactor: 3.44781124055968, sowie height: 1024.0 und width: 768.040698903657.

...
    "pages": [
        {
            "mappingFactor": 3.44781124055968,
            "label": "1",
            "height": 1024.0,
            "width": 724.040698903657,
            "objects": [
                {
                    "source": "pdf_pages.pdf#0",
                    "height": 1024.0,
                    "width": 724.040698903657,
                    "y": 0.0,
                    "x": 0.0,
                    "type": "image",
                    "id": "i_000"
                }
            ],
            "preview": false,
            "id": "p0001"
        }
    ],
...

Um auf die Orginalgröße der aktuellen PDF-Seite zurückzukommen, dividieren Sie einfach die längste “PDF-Kante”, hier height: ‘1024.0’ durch den mappingFactor: ‘3.44781124055968’ und heraus kommt die Länge der längsten Seitenkante der verwendeten A4-Seite in mm : ‘297.000017853’, also der A4-Standard-Höhe von ‘297mm’ (gerundet).

Die PDF Anzeige erfolgt immer in höchster möglicher Geräteauflösung. Dadurch ist immer eine gute und komfortable Anzeige der Inhalte auf den unterschiedlichen Bildschirmgrössen der verschiedenen Gerätetypen (iPhone/iPod, iPhone 5, iPad) gewährleistet.

Mit unserer Technologie müssen Sie sich jedoch nicht um diese Thematik bei der Anzeige der normalen Inhalte kümmern.

Nachstehendes Bild zeigt die normale Anzeige (automatisches Einpassen der längsten Dokumentenkante auf die lange Bildschirmkante im Hochformat) einer A4-Seite auf dem Gerät (hellgrün eingefärbt ist die Fläche der A4 Seite).

_images/general_page_a4_portrait_ipad.png

Dadurch das sich die Seitenverhältnisse des Bildschirmes (768:1024 = 3:4 = ‘0.75’ ) und die der A4 Seite (210:297 = ‘0.707070...’) etwas unterscheiden, bleibt hier rechts und links ein kleiner schwarzer Rand. Dieser kann natürlich durch andere Voreinstellungen der Seiteneinpassung/anzeige vermieden werden (siehe hierzu Publikation   Erscheinungsbild ).

PDF

Als Basis für Leafled Publikationen dienen PDF- und SPF-Dateien (Simple Publishing Format - Siehe SPF Dokumentation). Lediglich diese beiden Dateiformate werden von der Leafled Cloud als Publikationen zur Anreicherung mit weiteren Medienonjekten akzeptiert.

Möchten Sie eine PDF-Datei für die Veröffentlichung in Leafled vorbereiten achten Sie bitte darauf, dass keine abweichenden “Boxen” z.B. für Beschnitt oder die “finale” Seitengröße hinterlegt sind. Um die Volltextsuche nutzen zu können, sollten Sie darauf achten, den Text innerhalb der PDF korrekt zu exportieren, d.h. den Text als solchen und nicht als Bildelement. Je nach Anwendungsprogramm (Adobe Acrobat, OpenOffice, InDesign, ...) sollte dafür eine entsprechende Exportoption vorhanden sein.

Eine PDF-Datei für Leafled sollte im sRGB-Farbraum und mit 72dpi (Webauflösung) für die Bildelemente angelegt werden. So bleibt die Datei klein und kann schneller geladen werden. Für die hochauflösenden Retina-Bildschirme ist eine höhere Bildauflösung sinnvoll (150dpi), um auch in der gezoomten Anzeige genügend Bildqualität/Auflösung zu haben.

Wenn Sie eigene Schriften innerhalb der PDF-Datei verwenden möchten, achten Sie darauf das diese korrekt in die Datei eingebunden sind, da die Schrift sonst nicht von Leafled dargestellt werden kann und deshalb automatisch durch eine im System vorhandene Schrift ersetzt wird. Sollten Sie eine SPF-Datei (Die Leafled Cloud generiert automatisch eine SPF- aus jeder hochgeladenen PDF-Datei) manuell offline bearbeitet haben, achten Sie darauf die Formatierung beizubehalten, da sonst Fehler beim Reimport entstehen können.

Mehr Informationen zur Formatierung und zum Aufbau eines SPF-Containers finden Sie in der SPF Dokumentation. Siehe hierzu: Leafled SPF-Dateiformat Spezifikation

PDF Checkliste

Hier kurz zusammengefasst die wichtigsten Vorgaben für eine PDF Datei:

  • empfohlene PDF Version mindesten 1.6 (wg. Transparenz/Anzeigeproblematiken älterer Versionen)
  • Farbmodell RGB (am besten sRGB)
  • Bildauflösung 150dpi (Farbe/Graustufen) bzw. bis 300dpi für beste Retina Anzeige
  • Beschnittboxen gesetzt (Crop-Box/Trim-Box)
  • optimiert für Webansicht
  • inklusive Hyperlinks, Bookmarks (für automatisches TOC/Inhaltsverzeichnis und automatische Kapitelgenerierung)

Bilder (JPEG und PNG) und Icons

Unterstützte Bildformate:

  • PNG (.png)
  • JPEG (.jpg, .jpeg)

Um Ihre Bilder in diesen Bildformaten zu erstellen, bearbeiten oder konvertieren verwenden Sie geeignete Bildbearbeitungssoftware wie z.B. Adobe Photoshop, Gimp oder Paint Shop Pro.

Beachten Sie das Transparenzen nur mit dem PNG-Bildformat dargestellt werden können.

Grundsätzlich gebührt der Größe und Auflösung der jeweiligen Bilder, egal in welchem Format, immer eine besondere Aufmerksamkeit. Größere Bilddateien können zu langsamen Animationen und erhöhten Ladezeiten führen, wobei hier auch die aktuelle Auslastung des Servers und des Netzes immer eine Rolle spielt. Das iPad in der ersten und zweiten Generation stellt eine maximale Auflösung von 1024 x 768 Pixeln dar, deshalb ist es i.d.R. nicht nötig Bilder mit einer höheren Auflösung innerhalb von Leafled zu verwenden.

Verwenden Sie bei allen Anwendungen (Bild-Objekt, Galerie-Objekt, Shelf-Hintergrund, HTML-Objekte, Plugins, ...) also am besten gleich eine passende Auflösung um Zeit und Ressourcen zu sparen. Ein weiter Vorteil ergibt sich aus der kleinere Dateigröße des Bildes, was wiederum zu schnelleren Ladezeiten und flüssigeren Animationen innerhalb einer Bildgalerie führt.

Achten Sie außerdem darauf Ihr Bild mit dem RGB Farbraum anzulegen, da Bilder im CMYK Farbraum (Im Druck verwendet) unter Umständen falsch (invertiert/negativ) angezeigt werden können.

Shelf-Hintergrundbilder

Soll ein Bild als Shelf-Hintergrund dienen, so können Sie dieses in einer Auflösung von 1024x1204 oder 2048x2048 Pixeln einsetzen.

Besondere Spezifikationen der App-Grafiken (App Icon, Screenshots)

Bildateien zur Verwendung in dem App-Programmpaket bzw. zur Veröffentlichung eingesetzte Bilddateien (z.B. Screenshos für den App Store) unterliegen genauen vorgaben durch Apple. Die Details hierzu finden Sie unter Vorgaben für die zu verwendenden Medien/Bilddateien.

Besonderer Hinweis zu iPad 1 (Geräten mit wenig RAM)

Da auf allen Geräten nur begrenzt Hauptspeicher zur Verfügung kann hier auch die Ursache für mögliche Abstürze (Galerien, Shelfwechsel) sein. Auf einem iPad 1 hat Leafled während der Laufzeit 50-90MB zur Verfügung für das Programm und alle Daten zur Verfügung. Ein Bild mit 1024px Breite/Höhe nimmt aber schon 15-30MB beim Öffnen/Anzeigen an. Wenn z.B. eine Bildgalerie mit diesen Bildgrössen durchgeblättert wird, müssen zeitweise 2-3 dieser solcher Bilder für einem Moment im Hauptspeicher gehalten werden.

Das Betriebsystem (iOS) schaut sich so einen Speicherbedarf ein paar Sekunden lang an und entscheidet dann die App zu beenden, wenn nicht dauerhaft genügen Hauptspeicher frei bleibt. D.h. ein Absturz ist dann ein “kontrolliertes” Beenden der App durch das Betriebssystem.

Oft sind große Bilder in Bildergalerien die Ursache (einfach auf kleinere Auflösungen herunterrechnen, das dieses bei Halbtonbilder nicht so auffällig ist. Oft nehmen die Bildergalerien nur einen kleinen Teil Bildschirm ein, so das oft auch 640x480Pixel o.ä. Auflösungen ausreichen.

Bild/Image Checkliste

Hier kurz zusammengefasst die wichtigsten Vorgaben für eine Bild-Datei:

  • JPG Dateien um möglichst Speicher- und Platzsparend zu arbeiten
  • PNG Dateien für bessere Bildqualität und im mit Bildtransparenzen zu arbeiten (auf Kosten von mehr Speicherbedarf)
  • Farbmodell RGB/sRGB (CMYK führt zu fehlerhafter Anzeige auf dem Gerät)
  • Bildgrösse in Pixeln ungefähr so groß wie das platzierte Seitenobjekt (Bildgalerie, Bildobjekt oder im Plugin). Bildgrössen
  • Beschnittboxen gesetzt (Crop-Box/Trim-Box)

Audio

Unterstützte Formate:

  • MP3 (.mp3)
  • M4A und Apple Lossles Audio (.mp4)

In einer Publikation können Audiodateien im MP3- und MP4-Format (inkl. Apples Lossles Audio Codec) verwendet werden. Um Ihre Audiodateien in eines dieser Formate zu konvertieren können Sie ein entsprechendes Programm wie z.B. iTunes (Mac + Win), Free Audio Converter (Win), WinAmp (Mac + Win) oder dBpowerAmp (Win) verwenden. Achten Sie darauf das MP3-Dateien zwar klein sind aber ggf. je nach gewählter Bitrate (192 kbit/s ist ein optimaler Mittelwert) bei der Kodierung, einen Qualitätsverlust bedeuten können. MP4-Dateien bieten eine sehr gute Qualität (So gut wie gar kein Qualitätsverlust), jedoch sind dementsprechend auch die Dateien größer.

Video

Unterstützes Format:

  • H.264 Videocodec (.mp4, .mkv)

Innerhalb der Publikation können beliebige Videos im H.264 Videocodec (Kompression von Videos) verwendet werden. Ihre Videos können Sie mit diversen Programmen wie z.B. Nero Recode 2, MeGUI, Quick Time Pro oder iMedia Converter kodieren (H.264) und in ein passendes Format umwandeln (.MP4, .MKV). Beachten Sie das mit großen Videodateien auch die Ladezeiten erheblich ansteigen können.

Wenn Sie das Video nicht im Vollbild-Modus abspielen möchten sondern lediglich in dem gesetzten Objektrahmen muss der Rahmen mind. 256 Pixel breit und 200 Pixel hoch sein, da das Video bei kleineren Rahmen automatisch im Vollbildmodus abgespielt wird. Der Grund dafür ist, dass zu kleine Rahmen einen Absturz verursachen können.

Oft reichen auch geringes Videobildgrössen für eine qualitativ angemessene Darstellung auf dem Bildschirm aus. Diese sind erheblich kleiner und für den Leser komfortabler zu laden.

ZIP-Archive

Um mehrere Medien gleichzeitig hoch zu laden, können Sie diese einfach in ein ZIP-Archiv packen und komprimieren. Dieses Archiv wird nach dem hochladen innerhalb der Leafled Cloud extrahiert und der Inhalt in der entsprechenden Übersicht angezeigt. Sobald sich in diesem ZIP-Archiv eine Datei mit dem Namen “index.html” befindet, wird das ZIP-Archiv jedoch nicht entpackt sondern als HTML5-Container erkannt und kann so für HTML-Objekt verwendet werden.

Programme zum erstellen eines ZIP-Archivs sind z.B. WinZip (Win + Mac), 7zip (Win + Mac), der hauseigene Zipper vom OS X Betriebssystem oder Stuffit (Mac)

HTML-Objekte

Unterstützt wird:

  • HTML5
  • Javascript
  • CSS

Sie können die verschiedensten HTML5 und Javascript Inhalte in Ihre Publikation einbinden. Wie ein mit Leafled kompatibler HTML5-Container inkl. Javascript aufgebaut ist und eingebunden wird erfahren Sie hier.

Plugins

Die neuen Plugins mit komfortabler Konfigurationsmöglichkeit. Mehr unter Die Plugins