Kategorien
Design HTML/CSS

Neue Tools: CSS-Preprozessor Roole und HTML-Umwandler Markdown.css

Ist es nicht immer wieder erstaunlich, mit welchen Tools die Entwicklercommunity aufwartet? Während sich darunter viele sehr nützliche, teils unverzichtbare finden, gehören auf der anderen Seite auch etliche dazu, deren Sinn sich nicht auf den ersten, vielfach ebenso wenig auf den zweiten Blick erschließt. Heute habe ich je ein Tool von beiden Enden des Spektrums für Sie.

roole

Roole: CSS-Preprozessor auf der Basis von JavaScript

Aus der Rubrik „Nützliche Tools“ macht der neue CSS-Preprozessor Roole auf sich aufmerksam. Roole steht in der Tradition von Sass und LESS, wirkt also auf den ersten Blick wie die Neuerfindung des Rades.

Roole ist jedoch insofern anders, als es auf reinem JavaScript fußt und auf diese Weise direkter als die genannten Alternativen implementiert werden kann. Wie LESS kann es per Node.js serverseitig lauffähig gemacht werden, auf der Client-Seite funktioniert es ohne weitere Zusätze, vorausgesetzt, JavaScript ist nicht deaktiviert. In letzterem Falle funktionierte allerdings der Laufzeitcompiler von LESS ebenfalls nicht. Sass erfordert zudem ohnehin mehr Aufwand, wenn man es zur Laufzeit kompilieren wollte.

Roole verbindet die Vorteile der Logik einer Programmiersprache mit der Erstellung von Stylesheets und erlaubt so einfache, wie komplexe Vorgänge zeit- und codesparend zu verwirklichen. Auf der Demoseite finden sich zahlreiche Beispiele.

Roole kümmert sich um das leidige Vendor-Prefixing selber, so dass kurze standard-konforme Anweisungen ausreichen, wie das folgende Beispiel zeigt:

Roole schreibt Vendor Prefixe selber

Unter Roole.org/test lässt sich prüfen, ob der verwendete Browser fähig ist, Roole zu interpretieren, was bei meinem unter Windows 8 Pro installierten Chrome-Browser vollumfänglich gegeben war. Roole steckt noch in den Kinderschuhen und steht in Version 0.1.2 unter der MIT-Lizenz auf Github zum Download bereit.

Auf der Website zum Produkt kann mit einem Live-Editor experimentiert werden, will man sich mit Roole näher auseinander setzen. Im Vergleich zu den älteren Wettbewerbern LESS und Sass steht Roole funktional noch etwas im Abseits. Einen CSS-Compiler nativ mit JavaScript zu erstellen, ist jedoch vom Ansatz her durchaus interessant. Roole sollte man im Auge behalten.

Markdown.css: HTML wie Markdown aussehen lassen

Auf der anderen Seite des Spektrums findet sich ganz aktuell eine Neuentwicklung, die auf den ersten Blick nützlicher erscheint als sie es auf den zweiten dann ist. Die Rede ist von Peter Coles Markdown.css, einem Stylesheet, das aus einem HTML-Dokument ein Markdown-formatiertes Dokument macht. Nein, halt, das wäre ja nützlich.

Markdown.css macht nicht Markdown aus HTML, sondern lässt HTML aussehen wie Markdown. Das verdeutliche ich am besten visuell. Diese Optik:

Vor Markdownify

Sieht nach Anwendung von Markdown.css so aus:

Nach Markdownify

Die Lesbarkeit ist erhöht. So weit so gut. Nützlich wäre nun, wenn man den entstandenen Markdown-Text auskopieren und zu Bearbeitungszwecken gebrauchen könnte. Genau das ist jedoch nicht möglich. Beim Auskopieren wird der gesamte Markdown-Anteil nicht mitgenommen.

markdown.css
Markdown.css: Ein Ausschnitt

So ist Markdown.css, das mit LESS realisiert wurde, nicht mehr als ein Experiment. Ich finde dabei besonders den Fortbildungsaspekt interessant. Durch die Auseinandersetzung mit Markdown.css und seiner LESS-Basis bin jedenfalls ich zu neuen Ansätzen inspiriert worden. Das ist ja nicht etwa nichts.

Markdown.css steht übrigens zusätzlich als Bookmarklet zur Verfügung, mit dessen Hilfe man beliebige Websites in Markdown-Optik versetzen kann.

Links zum Beitrag:

Kategorien
(Kostenlose) Services Essentials

Serie: Markdown-Editoren für das iPad – Elements und Writing Kit (2/3)

Im Rahmen unserer Reihe „iOS for Creative Professionals“ befassen wir uns mit verschiedenen Markdown-Editoren für das Tablet aus Cupertino. Während es in der Windows- und auch in der Android-Welt erstaunlich wenige Markdown-Editoren gibt, ist das Apple-Universum gut bestückt mit einer ganzen Reihe dieser Tools. Die Platzhirsche der Mac-Plattform stehen auch für das iPad zur Verfügung. Darüber hinaus gibt es einige iOS-exklusive, nicht minder interessante Vertreter. Ich habe sie mir näher angesehen. Im ersten Teil unserer Serie befassten wir uns mit Byword und dem iA Writer. Heute stelle ich Ihnen Elements und Writing Kit vor…

Elements: Optimierter Workflow für Markdown-Enthusiasten

Elements hat vermutlich kaum einer auf dem Radar. Während sich Byword und iA Writer schon wegen ihrer Vormachtstellung auf dem Mac OS eines hohen Bekanntheitsgrades erfreuen, ist Elements eher ein Außenseiter im Markdown-Reigen. Dabei ist die App ein ernsthafter Wettbewerber.

Anders als Byword und iA Writer startet Elements mit der Dateiauswahl und kann lediglich mit der Dropbox synchronisieren. Dabei wird ein konkreter Ordner vorgegeben. Neue können angelegt werden. Die Sortierung der Dateien in der Auswahlansicht ist anpassbar, ein Standardsuffix kann vorgegeben werden.

Im Editorfenster unterscheidet sich Elements durch ausgeprägte Möglichkeiten, selbiges zu konfigurieren, was Schriftart, -größe, Schrift, Textbreite, Theme, sowie die Möglichkeiten der Rechtschreibkorrektur betrifft. Hier schlägt Elements die beiden bekannteren Vertreter.

Tastaturerweiterungen gibt es keine. Elements verlässt sich voll auf den iOS-Standard, inklusive der schwachen Zeichennavigation in der Nähe des Tastaturfeldes. Diese Schwäche hatte ich schon bei Byword bemängelt.

Die über ein Sternsymbol oben rechts in der dauerhaft sichtbaren Top-Bar erreichbare Preview ist die einzige im Testfeld, die den Namen verdient. Aus der Preview heraus kann direkt das HTML in die Zwischenablage exportiert werden. Ein (für mich wenig sinnvoll erscheinender) Notizblock soll spontane Notizen und Ideen aufnehmen. Warum nicht…

Die übrige Funktionalität ist Standard. Export ist als HTML und PDF vorgesehen. RTF steht nicht zur Verfügung. Gedruckt werden kann wie in den übrigen Vertretern auch. Eine manuelle Speichermöglichkeit ist nur auf den ersten Blick nicht vorgesehen. Zieht man jedoch den Text über den unteren oder oberen Rand hinaus, erscheint die Synchronisationsanimation, die man aus dem iOS ansonsten bereits kennt.

Elements kommt aus dem Hause Second Gear und liegt mit 4,49 Euro (iTunes-Link) als Universal-App oberhalb der Preise der Wettbewerber Byword und iA Writer, aber auf Augenhöhe mit dem folgenden Writing Kit.

Blättern Sie weiter zum Test von Writing Kit >>

Kategorien
Boilerplates & andere Tools Essentials Freebies, Tools und Templates Programmierung

Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown

Sublime Text 2 hat sich im letzten Jahr zum Lieblingseditor vieler Webentwickler gemausert. Dieser Beitrag zeigt, dass Sublime nicht nur für Code, sondern auch zum Schreiben von Webtexten geeignet ist. Idealer Partner ist dabei das in 2004 von John Gruber entwickelte Markdown.

Sublime – Markdown: Zwischen Text und HTML

Markdown vereinfacht Autoren das Schreiben von Texten für das Web und steht zwischen reinem Text und HTML. Im Gegensatz zu reinem Text kann man mit Markdown Überschriften, Zitate, Links und so weiter auszeichnen. Das geht mit HTML natürlich auch, aber Markdown ist einfacher zu schreiben und vor allem besser lesbar. Hier ein paar Beispiele:

  • Überschriften beginnen mit einer Raute: # wird zu h1, ## zu h2 und so weiter.
  • Hervorhebungen sind von *Sternchen* umgeben
  • Zitate haben wie in Text-Mails ein > am Anfang der Zeile

Markdown-Erfinder John Gruber hat eine Syntax-Übersicht veröffentlicht und es gibt auch eine deutsche Übersetzung. Zum Üben der Markdown-Syntax ist übrigens das Online-Tool Dingus echt gut: Markdown schreiben, per Klick in HTML konvertieren und direkt darunter das Ergebnis anschauen.

In Schreibwerkzeugen wie dem iA Writer findet Markdown inzwischen ebenso Verwendung wie im Web. Online-Communities wie Google+, Github, Reddit oder Stack Overflow benutzen zur Formatierung der Beiträge Abwandlungen von Markdown.

Und auch für Sublime Text gibt es ein paar sehr nützliche Markdown-Plugins, die den Editor zu einem richtig guten Prosa-Schreibwerkzeug werden lassen.

MarkdownEditing: Markdown in Sublime Text 2

Man kann in Sublime natürlich wie in jedem anderem Text-Editor auch völlig ohne zusätzliche Werkzeuge ganz normales Markdown schreiben, aber bequemer wird die Sache mit ein paar nützlichen Plugins, allen voran MarkdownEditing.

Am einfachsten ist die Installation über den Package Manager von Sublime. Falls das nicht funktioniert, einfach das ZIP-Paket von Github downloaden, entpacken und in den Ordner /packages/ kopieren. Wo genau der auf Ihrer Festplatte liegt, finden Sie über Preferences - Browse Packages... heraus.

Nach der Installation ist das Plugin automatisch für alle Dateien mit der Endung .md zuständig und sobald Sie eine Markdown-Datei öffnen, sieht Sublime völlig anders aus als vorher:

  • der Hintergrund wird hell und der Cursor hellblau (iA Writer lässt grüßen)
  • Markdown-Auszeichnungen werden zum Teil formatiert
  • es gibt ein Highlighting für die Markdown-Syntax
  • der Text steht in der Mitte des Editorfensters
  • Zeilen werden bei 70 Zeichen automatisch umgebrochen.
Das Sublime-Plugin MarkdownEditing
Das Sublime-Plugin MarkdownEditing mit den Standardeinstellungen

Die genauen Einstellungen des Plugins finden Sie unter Preferences - Package Settings - MarkdownEditing. Besonders im Distraction Free Mode aus dem Menü View lässt es sich so gut arbeiten.

Aber MarkdownEditing sieht nicht nur gut aus, sondern macht das Arbeiten mit Markdown-Dateien mit Syntax-Highlighting sehr viel bequemer und öffnende Klammern werden automatisch geschlossen. Unter OS X wird auch die Erstellung von Links zum Kinderspiel: URL in die Zwischenablage kopieren, Gewünschten Linktext markieren, URL per CMD-ALT-V aus der Zwischenablage einfügen.

Fertig ist der Markdown-Link. Eine Liste der aktuellen Features von MarkdownEditing finden Sie auf der Projektseite bei Github.

Markdown als HTML in der Zwischenablage und im Browser

Die perfekte Ergänzung zu MarkdownEditing sind die beiden folgenden Plugins:

  • Markdown to Clipboard fügt dem Kontextmenü im Editorfenster den Befehl Copy Markdown as HTML hinzu. Dieses HTML kann man dann in den WordPress-Editor oder in einem anderen Sublime-Fenster einfügen und bei Bedarf verfeinern. Das Plugin kann auch über den Package Manager installiert werden, auch wenn das in dem verlinkten Blogbeitrag nicht erwähnt wird.
  • OmniMarkupPreviewer schickt die geöffnete Markdown-Datei als HTML an den Browser. Im Kontextmenü wird dazu der Befehl Preview Current File in Browser hinzugefügt. Das Tastenkürzel ist auf dem MAC CMD+Alt+O (wie Oh, keine Null). Unter Windows mit CTRL statt CMD.

OmnimarkupPreview - Markdown als HTML-Vorschau im Browser
HTML-Vorschau im Browser – OmnimarkupPreview in Aktion

Weitere nützliche Plugins zum Schreiben von Texten in Sublime sind zum Beispiel SmartMarkdown, mit dem man Textpassagen einfach aus- und wieder einblenden kann, oder WordCount, das genau das tut was der Name andeutet.

Fazit: Sublime Text wird durch ein paar Markdown-Plugins zu einem richtig komfortablen Schreibwerkzeug für Webworker. Und das ist insbesondere auf der Windows-Plattform keine Selbstverständlichkeit.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Webdesign

Serie: Markdown-Editoren für das iPad – Byword und iA Writer (1/3)

Im Rahmen unserer Reihe „iOS for Creative Professionals“ befassen wir uns ab heute mit verschiedenen Markdown-Editoren für das Tablet aus Cupertino. Während es in der Windows- und auch in der Android-Welt erstaunlich wenige Markdown-Editoren gibt, ist das Apple-Universum gut bestückt mit einer ganzen Reihe dieser Tools. Die Platzhirsche der Mac-Plattform stehen auch für das iPad zur Verfügung. Darüber hinaus gibt es einige iOS-exklusive, nicht minder interessante Vertreter. Ich habe sie mir näher angesehen.

Markdown – warum sollte man sich dafür entscheiden?

Markdown ist eine einfache Auszeichnungssprache, die als Rohmaterial für verschiedene Zielformate dienen kann. Jeder, der etwa für Online-Magazine schreibt, aber auch Print bedienen will oder muss, wird sich eher früher als später nach einem Format umsehen, dass ihn nicht von vornherein determiniert. Versuchen Sie mal, aus einem HTML-Dokument ein RTF, DOC oder anderes Format zu erzeugen. Das geht zwar, ist aber kein Vergnügen. Mit Markdown ist all das und noch viel mehr kein Problem, liegt quasi in den Genen dieser Auszeichnungssprache.

Auch Lektoren ziehen Markdown voll formatiertem HTML vor, da es sehr viel lesbarer ist. Entwickler setzen meist ebenfalls auf Markdown, auf Github ist es die Standardauszeichnungsprache. Für WordPress gibt es entsprechende Plugins zur automatischen Konvertierung von Markdown nach HTML zur Laufzeit. Der Shooting Star der Entwickler-Editoren, Sublime Text 2, etwa, kann zum wahren Markdown-Wunder ausgebaut werden. Kollege Peter Müller arbeitet gerade an einem Beitrag, in dem er erläutern wird, wie man das im Einzelnen macht.

Markdown wurde entwickelt von John Gruber und Aaron Swartz. Aaron hat sich leider dieser Tage zum Selbstmord entschlossen. Er wurde nur 26 Jahre alt.

Markdown auf dem iPad – sinnvoll und komfortabel nutzbar

Auf dem iPad ist Markdown ebenfalls das Format der Wahl, speziell wenn man mit der On-Screen-Tastatur schreibt, wie ich das gerade tue. Wir werden uns einig sein, dass es insbesondere, aber nicht nur auf dem Touchscreen einfacher ist, ein # vor eine Überschrift erster Ordnung zu setzen, anstatt vor die Überschrift <h1> und danach </h1> setzen zu müssen. Erst im Rahmen des Exports zu HTML verwandelt der Markdown-Editor die Raute in die korrekte HTML-Formatierung.

Die Apps für das iPad, die ich im folgenden vorstellen werde, können neben der Grundfunktionalität des HTML-Exports, für die Markdown ursprünglich entwickelt wurde, weitere Formate erzeugen. Die Unterschiede liegen im Detail. So könnte man das Fazit vorweg nehmen und konstatieren, es käme angesichts der Ähnlichkeiten im Funktionsumfang nicht darauf an, für welche App man sich letztlich entscheidet. Dem ist allerdings nicht so. Denn die Details wirken sich doch auf den Workflow aus. Und wenn man eines durch den Einsatz von Markdown erreichen will, dann ist es ein optimaler Workflow. Insofern sind die Details entscheidend.

Im Testfeld finden sich Byword, iA Writer, Writing Kit, WriteUp, Daedalus Touch und Elements. Bis hierhin entstand der Beitrag mit Byword, weil Byword auf dem Mac mein Editor der Wahl ist. Die folgenden Einzeltest verfasste ich mit der jeweiligen App.


Sublime Text 2 mit Markdown-Plugins

Die Schlussbearbeitung erfolgte übrigens mit Sublime Text 2, ausgestattet mit den Plugins aus Peter Müllers morgen erscheinendem Beitrag „Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown“.

Im heutigen Teil 1 unserer dreiteiligen Serie befasse ich mich mit Byword und dem iA Writer. Der zweite Teil wird Elements und Writing Kit vorstellen, bevor der dritte Teil mit WriteUp und Daedalus Touch den Abschluss bildet.

Blättern Sie weiter zum Test von Byword >>