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.

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.

SVG, Image und Co. iDraw MacOSX

IDraw 0001

Inkscape (OpenSource) ist, was die Erstellung und die Bearbeitung von SVG Grafiken angeht eines der besten Programme für Linux und Windows. Inkscape läuft auch auf dem Mac (10.7.x) wenn zuvor Quarz installiert wurde. Der Nachteil bei der Mac Version ist, das es bei großen Dateien zu abstürzen kommen kann, außerdem wird Inkscape dann extrem langsam.

Es gibt aber einige Programme für den Mac, die recht gut und teuer sind, iDraw (siehe Bild oben) ich gut und kostet (nur) 19,99 €, ein Preis mit dem man Leben kann. Der Vorteil des Programmes ist, das SVG Dateien Importieren und Exportieren kann, zudem kann eine SVG Datei auch als PDF und PNG etc. gespeichert werden. iDraw ist auch bei großen Dateien noch schnell und bringt eine eigene Symbol Bibliothek mit.

iDraw kann mit allen SVG Dateien umgehen, die man auf der Webseite “OpenCliparts” kostenlos herunter laden kann, die Bedienung des Programms ist etwas umständlich, dafür ist die Dokumentation um so besser. iDraw ist ein gutes und kostengünstiges Programm mit dem man SVG Dateien erstellen und bearbeiten kann.

Fonts … Schriftverwaltung MacOSX

Fontexplorer122

Wer viele Fonts zusätzlich verwendet, der braucht für den Mac auch ein geeignetes Programm für die Schriftverwaltung, diese gibt es schon ab € 30,-. Aktuelle Freeware oder OpenSource Programme sind fast nicht vorhanden. Ein Programm gibt es jedoch, das trotz seines alters noch recht gut funktioniert.

Der FontExplorer X (Freeware) benötigt mindestens MacOSX 10.3.9 (2008) und läuft auch noch unter Lion (10.7.x) sehr gut. Allerdings gibt es einiges, worauf man unbedingt achten sollte.

1) Niemals Nie Systemschriftarten löschen !
2) Niemals Nie Systemschriftarten deaktivieren 
3) Niemals Nie Schriftarten löschen, die man selber installiert hat und sich nicht 100%ig sicher ist

Bevor man mit dieser alten Version vom FontExplorer arbeitet, sollte man alle vorher MANUELL installieren Schriftarten löschen und die Verwaltung mit dem FontExplorer durchführen, das ist wesentlich einfacher und sicherer. Wer sich nicht sicher ist, welche Schriftart er selber installiert hat, sollte auf garkeine Fall irgendetwas löschen, das könnte unangenehme Nebeneffekte haben.

Zum Arbeiten mit Schriftarten erstellt man im Fenster (Quelle) einen Ordner, NEU Installierte Schriften sollten dann in die(n) Ordner kopiert werden. Der Vorteil ist, das man mit einem Klick alle Schriften in diesem Ordner aktivieren oder reaktivieren kann. Normalerweise macht man sich einen Ordner für “Standard-Schriften”, “Design-Schriften”, “Web-Schriften” und “Mobile-Schriften”, jetzt kann man je nach bedarf die Schriften-Ordner aktivieren und mit den Schriften Arbeiten.

Neuere Software bieten teilweise auch diese Funktion und unterstützen zusätzlich die häufigsten DTP Programme, was die Verwaltung erheblich vereinfacht und natürlich auch was kostet.

The world’s visual language, das Noun Projekt

Noun 00

Das Noun Projekt ist eines der besten Quellen, wenn es um sehr gute  und qualitativ Exzellente Symbole geht. Für die neue Ausgabe des OpenMag werde ich etliche Symbole brauchen, die mit Links und Aktionen versehen sind.  Die Symbole sind OpenSource und können frei verwendet werden.

Die Sammlung ist schon recht groß, man findet zu jedem Thema mindestens 1 Symbol, was man verwenden kann. Alle Symbole liegen im SVG Format vor und können (eigentlich) direkt in eine HTML Seite eingefügt werden. Das SVG Format ist für mich nicht sehr günstig, da ich die Symbole in Grafiken / Backgrounds verwenden will.

Also muss ein Programm her, mit dem ich die SVG Dateien in PNG umwandeln kann, die Transparenz muss dabei natürlich erhalten bleiben. Für den Mac gibt es ja da auch einige Programme, die meisten sind Teuer oder taugen nichts. Das Beste Programm um SVG Dateien zu bearbeiten und umzuwandeln ist und bleibt Inkscape. Wer Inkscape auf dem Mac verwenden will, der muss zuerst Xquarz installieren. Inkscape läuft ohne weiters unter Linux und Windows.

InkEx 01

Um nun ein transparentes Symbol zu bekommen, öffnet man in Inkscape die SVG Datei und markiert die Elemente, die man später braucht., dann Klickt auf Export als Bitmap und wählt im Exportbereich “Auswahl” aus. Nach dem Export hat man genau das Symbol (unten rechts), was man braucht. Der Weg ist etwas umständlich, bietet einem aber zugleich die Möglichkeit, das Symbol für die eigenen Zwecke anzupassen.

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.

 

BlueGriffon der HTML5 Editor für alle Systeme

BlueGR 01

BlueGriffon ist ein recht netter (Freeware) HTML5 Editor für Mac, Linux und Windows. Der Editor selbst ist kostenlos, kann aber durch kostenpflichtige AddOns erweitert werden. Wenn man es genau nimmt, kostet der HTML Editor mit AddOns dann doch 35,- €. Mann kommt auch ohne die zusätzlichen AddOns aus !

BlueGriffon is a new WYSIWYG content editor for the World Wide Web. Powered by Gecko, the rendering engine of Firefox 4, it’s a modern and robust solution to edit Web pages in

BlueGriffon is an intuitive application that provides Web authors (beginners or more advanced) with a simple User Interface allowing to create attractive Web sites without requiring extensive technical knowledge about Web Standards. Because Gecko lives inside BlueGriffon, the document you edit will look exactly the same in Firefox 4. Advanced users can always use the Source View to hard-code their page.

BlueGriffon is tri-licensed under the Mozilla Public License 1.1, the GNU General Public License Version 2 and the GNU Lesser General Public License Version 2.1.

Praktisch an dem Editor ist, das man direkt in der Preview Ansicht Texte / Bilder etc. bearbeiten kann, der Editor merkt sich wo der Cursor steht und zeigt genau die Stelle wieder an, wenn in den Quelltest gewechselt wird und umgekehrt. Das Arbeite mit dem Editor macht richtig Spaß und der Quelltext ist sehr gut lesbar.

BlueGR 02

BlueGriffon ist einer der besten kostenlosen HTML Editoren, die ich kenne, er ist erweiterbar und kann auf die jeweiligen Bedürfnisse angepasst werden. Ich habe hier die Neue Version 1.4 verwendet, die eigentlich noch Beta ist. Trotzdem ist diese Version stabiler als die Version 1.3.1. Neben einigen Bugfixes gibt es in der 1.4er Version etliche Neuerungen:

  • hidden preference bluegriffon.defaults.forceLF to force saving documents into Unix mode (carriage returns are one LF). To enable that, open the Preferences, select the Advanced panel and open the configuration editor. Right-click in the main area and select New > Boolean. Enter the name of the new preference and set it to true. To revert to the original platform-dependant behaviour, reset the property or turn it to false. UI for this will be added for v1.5.
  • switching to MAR files for updates
  • Tip of the Day (the tips themselves are not ready yet)
  • use standard descriptors for ltr and rtl; b=287
  • automatic detection of changes in external files linked into documents edited by BlueGriffon; b=325
  • wrong mimetypes switching to source view
  • get rid of duplicate anchors in Link Insertion dialog
  • force reload stylesheets if they were edited
  • no check if ID already given in CSS Properties panel; b=194
  • Invalid class or ID in the CSS Properties panel freezes the app; b=167
  • Table properties dialog controls can show NaN; b=336
  • CSS Colors were always added as rgb() Values; b=97
  • Don’t remove empty divs switching back from source to wysiwyg view; b=261
  • CodeMirror now used for all source views instead of Ace
  • Script Editor was always displayed in en-US
  • Insert > Stylesheets moved to Panels > Stylesheets.
  • Panels > Stylesheets now offers to edit embedded and local stylesheets through CodeMirror
  • folding and XML parsing error visibility added to Source View
  • folding and JS syntax error added to Script Editor (uses Reflect)
  • folding added to Stylesheets Editor
  • new table cells should not get vertical-align:top; b=314
  • class and aria role does not apply correctly to multiple td/th selection; b=329
  • don’t use the width attribute on tables in html5; b=313
  • Format menu partially horked; b=312
  • cannot select/copy/paste select elements; b=331
  • Removing last class leaves an empty class attribute; b=320
  • impossible to create an attributeless hr element; b=322
  • a lot of minor fixes

Programmers Editor SourceKit für den Chrome Browser

chredit_022

Es gibt Erweiterungen für den Chrome Browser, die wirklich sehr praktisch sind, die Erweiterung SourceKit gehört auch dazu. SourceKist ist ein “Programmers Editor” im Stiel von Textmate (Theme kann über die Option eingestellt werden) . SourceKit arbeitet mit Dropbox zusammen, somit hat man immer seine wichtigen Dateien zur Hand und kann diese schnell ändern.

Vor der Installation muss man allerdings die Sprache von Dropbox auf “Englisch” ändern (rechtsklick auf das Dropbox Symbol und dann Einstellungen). Nach der Sprachumstellung funktioniert auch die Programmfreigabe in Dropbox für SourceKit. Der Editor selber kann nicht viel, dafür funktioniert er aber sehr gut.