MediaQuerries .. der lange Weg zum richtigen Anzeigeformat ..

Media Querries spielen beim Open eMag eine wichtige Rolle, über diese Querries lässt sich das Layout (nicht nur) für Mobile Endgeräte steuern. Gerade bei Photos die richtige “mobile” Skalierung wichtig. Die Photos sollen ja in voller Größe und Bildschirm füllend angezeigt werden können.

Das Problem ist, dass die Vorlage für das Open eMag eine auf ein Format von 1024 x 768 (r2) optimiert ist, eben für Apples IOS Geräte. Zu Anfang war auch nie geplant gewesen , dass Open eMag für Android Geräte verfügbar zu machen. Das hat sich im Laufe der Zeit aber geändert, wenn das Open eMag schon als PDF und IOS App erscheinen soll, dann bitte auch für Android.

Für die Apple IOS Geräte benötigt man nur 3 Media Querries, damit hat man schon alles erschlagen, bei Android Geräten ist das nicht so einfach. Die Hersteller von Android Geräten verwenden sehr viele unterschiedliche Display Größe mit verschiedenen Pixel Dichten, was eine optimale Darstellung der Photos sehr schwierig macht. Jede Android Media Querry muss mit dem richtigen Skalierungsfaktor ausgestattet werden, damit alles passt.

Ich habe lange nach einem Programm gesucht, was mit die Tests der Querries erleichtert, bin aber nicht wirklich fündig geworden. Aus diesem Grund werde ich alles auf dem IOS und Android Emulartor testen müssen. Dafür habe die die Querries so angepasst, das zuerst einmal nur ein Text erscheint, der je nach Display Größe eine andere Farbe bekommt. Die Skalierung der Photos ist dann nur noch eine reine Fleiß Aufgabe.

Wenn erst einmal alles passt, dann kann ich diese Media Querries zusammen mit dem Baker und Friar Framework für viele verschiedene Open eMag Ausgabeformen verwenden. Zur Zeit basiert alles noch auf PDF und “Sigle-Site-Content”, das wird sich aber noch ändern. Geplant ist, dass es auch weiterhin Photos geben wird, diese enthalten aber keine Texte mehr, der Text getrennt vom Photo angezeigt. Die ganze Erstellung des Open eMag basiert dann rein auf HTML 5 und CSS3, es wird dann auch keine PDF Ausgabe mehr geben.

Scribus vs. Adobe Rome

Scribus 140 A

Für das Open eMag habe ich ein DTP Programm gesucht, was auf dem Mac, Linux und Windows läuft und mit dem man PDF Dateien erstellen kann. Das Programm sollte einfach zu bedienen sein und natürlich auch kostenlos oder OpenSource.

Die erste Ausgabe des Open eMag (2010) habe ich mit Scribus 1.3.7 (aktuell Version 1.4.0) gemacht, was für mich kein Problem war aber für Neueinsteiger nicht so einfach ist. Die zweite Ausgabe des Open eMag wurde dann schon mit Adobe Rome erstellt.

Adobe Rome ist kinderleicht zu bedienen ist aber recht langsam. Ab einer Größe von 30 Seiten+ wird Adobe Rome quälend langsam und ist eigentlich nicht mehr zu gebrauchen.

Die einige Lösung für das Problem ist, mehrere PDF Dateien zu erstellen, die maximal 10 – 15 Seiten haben und diese dann später zu einer PDF Datei zusammenzufügen. Die dritte Ausgabe (2012 A) des Open eMag wird noch mit Adobe Rome erstellt werden, alle weiteren Ausgaben des Open eMag werden wieder mit Scribus gemacht.

Für Scribus spricht zum einen, das es OpenSource ist und auch auf allen Betriebssystemen läuft und zum anderen ist die Qualität der erstellen PDF Dateien wesentlich besser und die Dateigröße ist kleiner (-4 MB bei 30 Seiten). Mit Scribus kann man wesentlich mehr machen als mit Adobe Rome, was die ganze Sache allerdings für den ungeübten Anwender erschwert.

Aber auch das Problem lässt sich durch eine entsprechende Dokumentation lösen.Die gesamte Technik, die für die Erstellung des Open eMag erforderlich ist, basiert dann 100% auf Open Source inkl. dem verwendeten Baker Framewordk für die iPad App. Alle Programme (bis auf Xcode von Apple) laufen dann auf alles Betriebssystemen.

[Diest ist der 1.000 Artikel, den ich in diesem Blog geschrieben habe ….]

 

 

Das Open eMag ist auf Schiene …

Wie geplant ist jetzt die PDF Vorlage (Adobe Rome) für das Open eMag 2012 fertig. Es hat sich zwar nicht viel geändert, lässt aber mehr Spielraum für die eigene Kreativität zu. Einzig das Format und die Hintergrundfarbe sind vorgegeben, der Rest kann selber definiert und nach belieben gefüllt werden.

Pünktlich zur Startphase des Open eMag ist auch die entsprechende FAQ für freiwillige (vor) Mitarbeiter fertig geworden. Das besondere an dieser Ausgabe ist die Tatsache, das das Magazin als PDF und iPhone / iPad App zur Verfügung stehen wird.

Die iPhone / iPad App ist wiederum etwas besonderes, geplant ist das Magazin als “Rolling Publikation”. Das bedeutet, das die erste Ausgabe (im Jahr) etwas kleiner ausfallen wird und das im Laufe des Jahres Updates den Umfang dieser Ausgabe erweitern werden. Wir wollen ein Magazin erstellen mit maximaler Flexibilität, die nicht an bestimmte “Termine” gebunden ist.

Jeder, der gerne Mitarbeiten möchte, kann sich jetzt anmelden. Für unentschlossene bleibt immer noch die Möglichkeit irgendwann im Jahr einzusteigen und seine Werke zu präsentieren. Also nicht schüchtern sein, einfach anmelden, die Infos kommen dann per Email.

Eins noch zum Schluss, für die Erstellung von 10 Seiten benötigt man ca. 30 Minuten, vorausgesetzt, das man schon weiß welche Photos man präsentieren möchte. Der Aufwand ist also gering, keine Angst …. ANMELDEN.

CSS Webdesign .. geht LESS’ig am besten

Less 01

Mir dem Less-Framework kann man wirklich lässig arbeiten und es erleichtert einem WebDesigner die Arbeit ungemein. Für das OpenMagazin benötige ich 16 verschiedene CSS Dateien, die alle entsprechend geändert und angepasst werden müssen. Es ist ziemlich nervig, wenn man in den CSS Dateien Farben verwendet und diese dann überall ändern oder anpassen muss.

Das kann man auf die herkömmliche Art und Weise tun, in dem man jede “color / #xxxxx” Einzel ändert oder einfach für die Farben oder Verwendung der Farben eine Variable definiert. Somit kann man schnell Änderungen vornehmen und man vergisst auch nicht so schnell etwas.

Genau für solche Fälle ist Less entwickelt worden. Die Less Dateien sind eigentlich normale CSS Dateien, die mir Variablen und Funktionen erweitert werden. Das Javascript “less.js” ist sozusagen ein Compiler, der aus den Less Dateien wieder CSS Dateien erstellt.

Für Mac User gibt es eine tolle Freeware “Less.app“, die bei Änderungen einer Less Datei automatisch eine CSS Datei erstellt. Zusätzlich wird der Code noch geprüft, was unglaublich hilfreich ist.

Less 02

Die Less.app ist wirklich sehr schön und funktionell gemacht, es gibt etliche Einstellungen, die einem die Arbeit erleichtern. Vom selben Entwickler gibt es auch noch das Programm “CodeKit (Beta)”:

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that’s just the first paragraph.

Die Verfügbare Version von CodeKit ist Beta 8, der Entwickler arbeitet zur Zeit an der Beta 9, die bald erscheinen wird. Ein tolles Programm mit echtem Mehrwert.

Mono Develop … bastelkrams …

Mono DEV 2x

Ich bin zwar kein großer Freund von Mono aber es gibt manchmal Gründe für die Verwendung von Mono. Mono ist (so etwas wie) c# für Mac OSX, Linux und Windows und das ist auch der Grund, warum ich mich in diesem Fall für Mono entschieden habe, Java wollte ich nicht verwenden.

Die 3.te Ausgabe des OpenMagazin ist in Arbeit und diese Ausgabe soll nicht nur als PDF sondern auch in Apples Newsstand verfügbar sein. Das würde bedeuten, das man 2 verschiedene Ausgaben erstellen Mus, was sehr Zeitaufwändig wäre, also habe ich mich auf die Suche nach einer besseren Lösung gemacht .. und gefunden. Das OpenMagazine wird wieder mit der Freeware Adobe Rome erstellt und als PDF gespeichert.

Für die Newsstand App (wird auf dem Baker Framework basieren) kann ich die PDF Datei aber nicht gebrauchen. Aus diesem Grund werden die einzelnen Seiten mit einem Tool dann zu JPG Dateien umgewandelt und jetzt kommt Mono ins Spiel. Diese JPG Dateien müssten jetzt wiederum in Verzeichnisse gepackt , Html und CSS Dateien erstellt werden und die book.json Datei müsste angepasst werden. Dieser Vorgang ist recht aufwendig und genau für diesen Zweck habe ich ein Mono Programm geschrieben. Mit diesem Programm kann jede PDF Datei (bzw. die JPG’s) in ein Magazin umgewandelt werden.

Der Vorgang dauert bei ca. 100 Seiten so 8 – 12 Sekunden und alles ist fertig. Sollte Jemand Interesse an dieser Technik haben, einfach einen Kommentar hinterlassen und ich suche noch interessierte Mitarbeiter für die Ausgabe 2012.

Open Typography … das OpenSource Projekt

OpenT 001

OpenT 002

Das OpenSource Projekt OpenTypography ist für alle interessant, die sich mit Webdesign und Publishing für Mobile Endgeräte beschäftigen. Es ist nicht einfach eine Schriftart zu finden, die auch noch auf einem iPhone oder iPad ein gutes Schriftbild ermöglicht. Viele Schriften eignen sich eher für den Druck oder den normalen Bildschirm. Das OpenSource Projekt will genau das ändern, einige ausgewählte Schriftarten gibt es schon. Ich hatte ja schon einige Quellen für gute Schriftarten vorgestellt, eine weitere Quelle für Schriftarten ist  Googles Web Fonts (OpenSource).

Leider lassen sich diese und andere Schriftarten nicht in Apples iBooks Autor verwenden, anscheinend hat Apple die möglichen Schriftarten im Programm festgelegt.

Mit Laker / Baker zum eigenen Newstand Magazin

OpenMag 001

So langsam nimmt das OpenMag Ausgabe 2012 für das iPad / iPhone Formen an, die erste Hürde Xcode wäre geschafft, das richtige Icon wird im Newsstand angezeigt. Der Rest ist eigentlich nur noch Fleißarbeit. Das Magazin wird mit Hilfe des Laker /Baker Frameworks erstellt, als HTML Editor kommt BlueGriffon zum Einsatz.   Die Framework-Änderungen, die ich brauche sind minimal, es wird später für diejenigen, die an dem Magazin Mitarbeiten (oder es noch wollen !) eine genaue Arbeits-Beschreibung geben. Voraussetzung für die Mitarbeit sind lediglich Basis HTML Kenntnisse, obwohl alles  auch im WYSIWYG Editor gemacht werden kann.

Wer Interesse an einer Mitarbeit hat, der kann sich wie üblich (Kommentar mit gültiger Emailadresse) bei mir melden.

 

Magazine Publishing mit Laker und Baker für iOS ..

Laker Baker

Ich hatte eigentlich immer schon das Zielen gehabt, das “OpenMagazin” nicht nur als einfache PDF zum Ansehen / Download bereit zu stellen sondern auch als eigenständige IOS App für das iPad / iPhone. Seit Apples Newsstand und dem Laker / Baker Framework (OpenSource) ist  das nun in greifbare Nähe gerückt. Das Laker / Baker Framework bringt all das mit, was man sich von einem Verhalten eines Magazins erwartet, Bilder, Audio, Video, Sliedeshows sind kein Problem.

Das ganze Framework basiert auf HTML5, CSS und JavaScript, die mitgelieferte Xcode Template verbindet dann diese Html5 Seiten mit den notwendigen Techniken für eine Newsstand Publikation, die auch von Apple akzeptiert wird. Eventuell stellt Apple Ende Januar ein eigenes einfacheres Framework vor, jedenfalls lässt die Ankündigung so etwas vermuten.

Die nächste Ausgabe soll, wenn alles gut geht, jedenfalls als PDF und iOS App verfügbar sein.