Kategorien
JavaScript & jQuery Programmierung

Summernote: Starker WYSIWYG-Editor für Bootstrap 3

Heute will ich Sie auf ein recht frisches JavaScript aufmerksam machen, mit dessen Hilfe Sie in unschlagbar simpler Art und Weise einen funktionsreichen WYSIWYG-Editor in Ihr Bootstrap-Projekt einbauen können. Das kleine Tool mit dem sympathischen Namen Summernote gibt es kostenlos. Es erfreut sich reger Entwicklungstätigkeit und wird wohl in den nächsten paar Wochen die Versionsnummer 1 erreichen. Aber schon zum jetzigen Zeitpunkt ist Summernote für den Produktiveinsatz bestens geeignet.

summernote-wysiwyg

Summernote: Bootstrap, jQuery und FontAwesome

Summernote setzt eine Version von Bootstrap ab 2.x voraus. Zudem erfordert es jQuery und FontAwesome. Da letztere beiden Komponenten ohnehin ebenfalls Bestandteil von Bootstrap sind, haben Sie mit einer vollständigen Bootstrap-Version bereits alle Voraussetzungen erfüllt. Stellen Sie überdies sicher, dass Sie den HTML5 Doctype verwenden.

Nachdem Sie Summernotes CSS und JS eingebunden haben, erstellen Sie ein DIV, dem Sie die ID summernote verpassen. Anhand der ID weiß das Script, worum es sich zu kümmern haben wird:

$(document).ready(function() {
  $('#summernote').summernote();
});

Summernote: So geht’s

Zusätzlich lässt sich der Funktionsaufruf mit Parametern anreichern, die etwa die Optik des Editors betreffen oder den Fokus direkt in das Feld setzen:

$('.summernote').summernote({
  height: 300,   //setzt die Höhe des Editorfeldes in Pixeln
  focus: true    //sorgt dafür, dass der Cursor sich nach dem Initialisieren im Editor befindet
});

Geben Sie keine Höhe an, vergrößert sich das Editorfeld dynamisch mit dem eingegebenen Content. Eine wesentliche Konfigurationsmöglichkeit betrifft die Funktionalität der Summernote-Toolbar. Hier können Sie genau festlegen, welche Features der Editor dem Anwender zur Verfügung stellen soll:

$(‚.summernote').summernote({
  toolbar: [
    //['style', ['style']], // no style button
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    //['insert', ['picture', 'link']], // no insert buttons
    //['table', ['table']], // no table button
    //['help', ['help']] //no help button
  ]
});

Eine Reihe von Callbacks erlaubt weitergehende Interaktionen. Zudem arbeitet Summernote über entsprechende Sprachdateien auch vielsprachig. Die jeweilige Sprache ist nach dem Einbinden über einen Parameter im Funktionsaufruf zu konfigurieren. Das ist alles sehr eingängig und verständlich. Umfangreiche Dokumentationen sind nicht erforderlich, um Summernote an den Start zu bekommen.

Sauber dokumentiert, schnell implementiert, auch Server-tauglich

Umso erfreulicher ist es, dass eine umfangreiche Dokumentation zu allen Einzelheiten des Editors dennoch bereit gestellt wird. Das ist ja gerade im Open Source-Bereich leider nicht selbstverständlich, senkt aber die Einstiegshürde nochmal gewaltig. Die Dokumentation enthält auch eine Menge Demos und Beispiele, die erklären, wie man Summernote serverseitig, etwa mit PHP oder Node.js implementiert.

Prinzipbedingt arbeitet Summernote auf der Basis von Inline-Styles, um etwaige Formatierungen umzusetzen:

summernote-codeview

Summernote integriert einen File-Uploader und baut Videos aus den gängigen Onlinediensten ein. Wie es sich für einen Bootstrap-Zusatz gehört, verhält sich das Tool voll responsiv. Nicht ganz uninteressant dürften die meisten auch das Gewicht finden. Mit lediglich 58kb für CSS und JS darf sich der Editor noch als Leichtgewicht bezeichnen.

Der schlanke Editor Summernote ist vor wenigen Tagen in der Version 0.5 verfügbar geworden und steht auf Github zum kostenlosen Download und zum ebenso kostenlosen Einsatz unter der sehr liberalen MIT-Lizenz, sowohl für private, wie auch kommerzielle Zwecke bereit. Summernote läuft mit allen modernen Browsern und dem IE ab Version 9. Support für die Version 8 des Redmond-Browsers ist angekündigt.

Summernote wird entwickelt von Alan Hong aus dem südkoreanischen Seoul. Seinem Twitter-Account zu folgen, wird den meisten Menschen eher weniger nutzen. Aber, das kann ja jeder für sich selbst entscheiden ;-)

Links zum Beitrag:

  • Summernote | Homepage
  • Summernote | Dokumentation
  • Summernote auf Github
Kategorien
Design HTML/CSS

CSS Matic – „What You See Is What You Get“ für die CSS-Entwicklung

Die Zeiten, in denen CSS rein mit der Hand geschrieben werden musste, sind schon seit einiger Zeit vorbei. In den letzten Jahren konnten sich immer mehr kleine Helferlein etablieren, die einzelne Aspekte des CSS-Design visuell unterstützen. Aus Spanien kommt eine neue Web-App, die vier Teilbereiche komfortabel abzudecken versteht. Die Entwickler des Dienstes CSS Matic sind alte Bekannte.

cssmatic-homepage

Freepik.com und Thumbr.it zeichnen für CSS Matic verantwortlich

Dr. Web-Leserinnen und -Leser kennen die Suchmaschine Freepik.com. Im Sommer 2012 stellten wir den Service vor. Wir konnten Freepik mit Einschränkungen empfehlen. Positiv erschien uns die hohe Zahl gefundener Ressourcen für die verschiedenste Bedarfslagen und Desktop-Softwares. Weniger erwärmen konnten wir uns für das Konzept der Drittverlinkung. So ist es bei Freepik stets erforderlich, die Lizenz der gefundenen Ressource noch einmal gründlich auf deren Quell-Website gegen zu checken. Freepik selber hostet (zumindest in der Regel) den entsprechenden Download nicht.

freepik-startseite

Seit einigen Wochen ist das Freepik-Team sehr aktiv mit der Erstellung eigenen Contents beschäftigt. Man darf gespannt sein, ob es da nicht bald etwa zu einem exklusiven Freebie für die Leser von Dr. Web und Noupe Magazine kommen könnte ;-)

Nach eigenen Aussagen wollte der Gründer von Freepik, der Spanier Alejandro Sánchez Blanes, der Design Community etwas zurück geben für die große Unterstützung, deren er und sein Team sich in den letzten Jahren erfreuen durften. CSS Matic ist dieses Geschenk an die Community.

Ursprünglich ersonnen, um Standardaufgaben des Freepik-Teams rationeller zu gestalten, kann die Tool-Sammlung CSS Matic seit kurzem von jedermann kostenlos verwendet werden. Und in der Tat ist CSS Matic in der Lage, so manches andere Tool locker zu ersetzen. Mir persönlich gefällt dabei am besten, dass man den Werkzeugen anmerkt, dass sie einen frischen Ansatz, schon von der UI her, verfolgen. CSS-Tools gibt es immerhin einige, darunter viele, die offenbar seit Jahren von ihren Entwicklern nicht mehr angeschaut wurden.

CSS Matic – Verläufe erstellen, Rahmen gestalten, Schlagschatten definieren, Texturen entwerfen

Zugegebenermaßen ist nicht jedes Helferlein aus dem Vierkant-Portfolio CSS Matics gleichermaßen nützlich oder gleichermaßen hochwertig umgesetzt. Die Reihenfolge der Präsentation auf der Website wird der Wertigkeit der Tools in etwa gerecht.

CSS Matic – Gradient Generator

cssmatic-gradient-generator

Der Verlaufs-Generator ist mit Abstand das ausgefeilteste Tool der Sammlung. Verläufe lassen sich auf der Basis etlicher Presets oder komplett from scratch entwickeln. Dabei sind auch Verläufe über mehrere Farben möglich und werden visuell über Ankerpunkte zurecht geschoben. Der Farbraum ist wählbar, Sättigungswerte und weiteres sind anpassbar. Der fertige Verlauf kann als CSS oder sogar als Sass exportiert werden. Mitexportiert werden können auf Anforderung auch die Code-Kommentare, die etwa das Prefixing erläutern. Nützlich für Entwickler, die CSS nicht atmen.

CSS Matic – Border Radius

cssmatic-border-radius

Weit weniger aufwändig, dabei aber nicht minder nützlich, ist das Tool „Border Radius“. Dieses erlaubt die Erstellung von CSS-Rahmen, die für jede Ecke unterschiedlich, aber auch simpel rundherum einheitlich visuell definiert werden können. Der entstehende CSS-Code ändert sich bei Manipulationen live mit und kann über die Zwischenablage in das eigene Projekt übernommen werden.

CSS Matic – Noise Texture

cssmatic-noise-texture

Unter dem Punkt „Noise Texture“ schiebt man sich eine Textur auf einem farbigen oder transparenten Hintergrund zusammen, die dann als PNG mit dem entsprechenden CSS exportiert werden kann. Die Farbe des Hintergrunds, die Farbe des Rauschens, sowie Transparenzen und Dichte des Rauscheffekts kann ebenso definiert werden, wie die Pixelwerte des zu erzeugenden PNG.

CSS Matic – Box Shadow

cssmatic-box-shadow

Natürlich darf auch der Klassiker unter den CSS-Tools nicht fehlen, der Schlagschatten-Generator. Jeder Entwickler kennt mittlerweile bald ein halbes Dutzend davon. Die gute Nachricht: Der Schlagschatten-Generator von CSS Matic braucht sich nicht zu verstecken. Alle wichtigen Parameter stehen zur Konfiguration bereit. Der CSS-Code kann über die Zwischenablage auskopiert werden und berücksichtigt, wie alle anderen Tools des Kastens das auch tun, etwa erforderliches Browser-Prefixing.

Alles in allem sollte CSS Matic in der Bookmark-Liste engagierter Web Developer einen festen Platz erhalten. Man spart sich ein paar weitere Dienste. Zudem entwickelt Freepik in letzter Zeit einen Drive, der soviel Elan repräsentiert, dass es mich nicht wundern würde, wenn CSS Matic funktional noch lange nicht am Ende der Fahnenstange angekommen wäre. Insofern lohnt es sicher, den Service im Auge zu behalten.

Links zum Beitrag

  • The Ultimate CSS Tools For Developers | CSS Matic
  • Freepik: Suchmaschine für kostenlose Design-Ressourcen | Dr. Web Magazin

Kategorien
(Kostenlose) Services Essentials Inspiration Showcases

Favicons online erstellen mit diesen fünf praktischen Editoren

Favicons gehören seit geraumer Zeit, fast war ich versucht, „seit Menschengedenken“ zu schreiben, zur Grundausstattung einer Website. Für viele Bildbearbeitungsprogramme existieren Plugins, mit denen die Minimalsymbole erstellt werden können. Es gibt mittlerweile jedoch auch einige Online-Favicon-Editoren mit unterschiedlichen Schwerpunkten. Diese unterscheiden sich in Details recht deutlich voneinander.

X-Icon-Editor

faviconeditor_xiconeditor
X-Icon-Editor

Der X-Icon-Editor kommt mit vergleichsweise vielen Zeichenfunktionen daher. Während die meisten Editoren ausschließlich einzelne Pixel in unterschiedlicher Farbe zeichnen können, bietet der X-Icon-Editor Pinsel mit einstellbarer Kontur und Härte, sowie die Möglichkeit, Rechtecke und Ovale zu zeichnen.

Darüber hinaus gibt es eine Importfunktion für gängige Grafikformate (unter anderem JPEG, PNG und ICO). Das Favicon kann in vier Größen (16, 24, 32 und 64 Pixel Kantenlänge) exportiert werden.

Logaster

Der Favicon-Service von Logaster
Bei Logaster gibst du deinen Firmennamen und deine Branche an, und das Tool generiert automatisch dazu passende Layouts, aus denen du deinen Favoriten auswählen kannst.
Für ein schönes Favicon in der Browseradressleiste deiner Seitenbesucher brauchst du keine Photoshopkenntnisse. Logaster generiert dir ein fertiges Favicon in den Formaten .ico und .png. Das dauert keine zwei Minuten.

favicon.cc

faviconeditor_faviconcc
favicon.cc

Der Favicon-Editor favicon.cc bietet weit weniger Funktionen zum Zeichnen als der X-Icon-Editor. Es können ausschließlich Pixel in unterschiedlicher Farbe und Transparenz gezeichnet werden. Allerdings gibt es auch hier die Möglichkeit, Grafiken zu importieren und anschließend zu bearbeiten.

Das Schöne an favicon.cc ist die Live-Vorschau. Das bearbeitete Icon wird in einem Browser-Ausschnitt so dargestellt, wie es im Internet Explorer aussehen würde. Man bekommt also unmittelbar einen Eindruck davon, wie das Icon im Umfeld der Browser-UI wirkt.

Antifavicon

faviconeditor_antifavicon
Antifavicon

16 mal 16 Pixel bieten wenig Platz für Text. Der Favicon-Generator Antifavicon nutzt die 265 Pixel Fläche dennoch, um zwei Zeilen Text in einer Pixelschrift unterzubringen. Hintergrund- und Textfarbe sind für beide Zeilen einstellbar.

Zudem wird die Schriftgröße der Textmenge angepasst – zumindest in einem gewissen Umfang. Denn die Grenzen des Machbaren sind schnell erreicht.

Faviconist

faviconeditor_faviconist
Faviconist

Der Faviconist geht einen ähnlichen Weg wie Antifavicon. Auch hier wird die Iconfläche mit Text befüllt. Statt einer Pixelschrift stehen jedoch mehrere Schriftarten zur Auswahl. Bei mehr als zwei Buchstaben ist zwar nicht die Grenze des Machbaren, jedoch die des Lesbaren erreicht. Für Monogramme und Abkürzungen reicht es allemal.

Außerdem lassen sich sehr einfach Verläufe als Hintergrund, wie auch als Textfüllung erstellen. Die Icons werden in 16, 32 und 256 Pixel Kantenlänge erstellt und in einer Live-Vorschau angezeigt.

Genfavicon

faviconeditor_genfavicon
Genfavicon

Der letzte hier vorgestellte Online-Editor, Genfavicon, ist mehr Generator als Editor. Denn viele Bearbeitungsfunktionen bietet er nicht. Er ermöglicht die Konvertierung hochgeladener Grafiken ins ICO-Format. Dazu wird bei der hochgeladenen Grafik ein quadratischer Ausschnitt gewählt. Größe und Position des Ausschnittes sind frei definierbar. Dann tritt Genfavicon in Aktion. Anschließend steht der gewählte Ausschnitt als Favicon zum Download bereit. Nachteilig ist dabei, dass das Favicon nur in einer Größe exportiert werden kann, anstatt mehrere Größen in einem Favicon unterzubringen.

Fazit: Alle vorgestellten Editoren haben aufgrund ihres unterschiedlichen Funktionsumfanges ihre Stärken und Schwächen und bieten sich für verschiedene Herangehensweisen beim Erstellen und Bearbeiten von Favicons an. Mehr als eines im Werkzeugkoffer zu führen, ergibt dabei durchaus Sinn.

(dpe)

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

Sublime Text 2: Editor nach dem Baukastenprinzip erlaubt flexibles Arbeiten

In den letzten Jahren konnte sich der kommerzielle Editor Sublime Text 2 einer immer größer werdenden Nutzergemeinschaft erfreuen. Und das durchaus zu Recht. Denn gerade für den Freelancer, der oft alleine arbeiten muss, ist der Editor sehr nützlich und bietet einige komfortable Vorteile. Für weniger entscheidungsfreudige Zeitgenossen könnte besonders interessant sein, dass sich Sublime Text 2, obwohl grundsätzlich kostenpflichtig, extrem lange kostenlos testen lässt.

Sublime Text 2
Sublime Text 2

Sublime Text 2 lässt sich generell in jede Entwicklungsumgebung integrieren und für die populärsten Programmier-, Skript- und Auszeichungssprachen verwenden. Dass kommt unter anderem daher, dass Bundles aus TextMate 2 eingebunden werden können. Darüber hinaus hat Sublime Text 2 eine Menge eigene Extensions zu bieten, die das Resultat der Arbeit einer großen Entwickler-Community sind. Der Grund hierfür könnte neben der steigenden Popularität auch die einfache Beschreibungssprache für Erweiterungen sein.

Zu beachten ist aber, dass Sublime Text 2 keine spezielle IDE ist, mit der man sofort loslegen kann, um sich direkt in einer wundervollen Arbeitsumgebung befindet. Hier ist noch echte Handarbeit angesagt, Erweiterungen müssen installiert werden. Damit das etwas leichter von der Hand geht, sollte der Package-Manager (Sublime Package Control) genutzt werden. Installieren kann man diesen mittels der integrierten Konsole, die über "View -> Show Console" geöffnet wird. In die Konsole muss anschließend nur noch ein Befehl hineinkopiert werden, den ihr auf der Seite wbond.net findet. Danach sollte der Editor neu gestartet werden. Der Paket-Manager kann dann anschließend über "Tools -> Command Palette" geöffnet werden. Im auftauchenden Dialog braucht man nur noch nach "Install Package" zu suchen und schon hat man eine riesige Liste mit möglichen Erweiterungen, die aus dem Paket-Manager installiert werden können. Empfehlungen zu einzelnen Erweiterungen gebe ich am Ende des Artikels. Das ist natürlich sehr subjektiv, denn jeder Entwickler arbeitet in einer anderen Umgebung und sollte sich seine Tools dementsprechend anpassen.

Ein Editor mit ungewohnten Features

Selbst ohne Erweiterungen hat Sublime Text 2 schon einige nette Features zu bieten. Wer gerne einen der Urväter der Editoren nutzt, könnte zum Beispiel den „Vintage Mode“ aktivieren. Diese Option bietet die Möglichkeit, Sublime Text 2 wie den guten alten VIM zu nutzen. Wer diesen bisher noch nicht verwendet hat, sollte sich von der etwas schwierigen Eingewöhnungsphase nicht abschrecken lassen. Es lohnt sich auf jeden Fall, denn man kann dafür in Zukunft während der Entwicklung die Maus beiseite legen. Wer den „Vintage Mode“ nicht nutzen möchte, kann zumindest viele Shortcuts bzw. Key Bindings von Sublime Text 2 nutzen. Diese lassen sich sogar in den vielen Konfigurationsdateien relativ komfortabel und unkompliziert auf die eigenen Bedürfnisse anpassen.

Ein weiteres, sinnvolles Feature sind „Split Windows“. Ein Feature, dass man ebenfalls vom VIM kennt, aber ansonsten selten eine so einfach Umsetzung in anderen Editoren gefunden hat. Damit ist es möglich, 4 Dateien in einem Editor zu öffnen, ohne dabei die Übersicht zu verlieren. Über "View -> Layout" kann ausgewählt werden, welche Anzeige man bevorzugt. Mittels "control + Nummer des Fensters" (also 1, 2, 3 oder 4 bei 4 Fenstern) kann man ohne Maus zwischen den Fenstern wechseln.

Es gibt allerdings auch Befehle, die für regelrechte „AHA-Effekte“ sorgen. Ein Beispiel: Befindet sich der Cursor in einem Wort und man drückt den Befehl "cmd + d" (auf Plattformen ohne Apfel ist es "control + d") werden nicht nur das Wort, sondern auch alle Stellen mit dem selben Wort im Dokument markiert. Das ist etwa dann großartig, wenn man die Bezeichnung einer Variablen ändern möchte. Mit dem Befehl "ctrl+shift+(up oder down)" wählt man mehrere Zeilen zum Markieren aus. Zeilen zu bewegen, kann schon manchmal ganz schön nervig sein. Sublime Text 2 hat hierfür eine Lösung. Mittels "ctrl+cmd+(up oder down)" kann eine markierte Zeile nach unten oder oben verschoben werden.

Erweiterungen in hoher Quantität und Qualität

Wie versprochen, will ich noch ein paar nützliche Erweiterungen für Sublime Text 2 nennen. Standard in vielen Editoren ist mittlerweile „ZenCoding„. Verkürzt gesagt geht es hierbei darum, für kompliziertes HTML-Markup nur noch eine Zeile zu schreiben, um die Syntax kümmert sich der Editor dann selbst. Die Erweiterung „Tag“ bietet ebenfalls einige Erleichterungen in Bezug auf die Entwicklung von HTML-Code. Bei Tag geht es, wie der Name bereits verrät, vor allem um HTML-Tags und das vereinfachte Bearbeiten von Inhalten in diesen oder auch das automatische Schließen geöffneter Tags. Das kann sehr hilfreich sein, da Sublime Text 2 hier von Haus aus kaum Unterstützung bietet.

Als Webdesigner kennt man auch das momentan noch vorhandene Prefix-Problem mit neuen Attributen aus der CSS3-Spezifikation. Doch dank der Erweiterung „Prefixr“ benötigt man in Zukunft nur noch die Version für einen Browser oder die Standard-Spezifikation und Prefixr kümmert sich darum, die restlichen Abhängigkeiten einzufügen.

Das Erscheinungsbild von Sublime Text 2 lässt sich ebenfalls mit Hilfe von Paketen verändern. Empfehlenswert ist hierbei vor allem das „Soda„-Theme. Mittels „SideBarEnhancements“ erweitert man die Toolbar von Sublime Text 2 um einige nette Features. Darüber hinaus gibt es Erweiterungen für viele speziellere Anforderungen. Mit Hilfe von „Shell-Turtlestein“ führt man aus Sublime Text 2 heraus Shell-Befehle aus. In Zusammenarbeit mit der Chrome-Extension wird der obligatorische Reload einer Seite im Browserfenster zukünftig automatisch von der Erweiterung „LiveReload“ erledigt.

Abschließend seien hier noch die Erweiterungen „SublimeCodeIntel„, welches für die nötige Intelligenz zum Autocomplete bei der Code-Eingabe sorgt und „SublimeHttpRequester„, das den Nutzer aus Sublime Text 2 heraus GET- und Post-Requests senden lässt.

Weitere Einstiegshilfen zu Sublime Text 2

Es dürfte deutlich geworden sein, dass Sublime Text 2 ein großer Baukasten ist, aus dem man sich seine gewünschte Umgebung zusammen basteln kann und auch muss. Zu diesem Thema gibt es viele Einstiegshilfen. Zum Beispiel eine große Screencast-Serie auf Englisch von Jeffrey Way. Darüber hinaus steht eine große „inoffizielle“ Dokumentation, die aber von den Entwicklern empfohlen wird, bereit.

Ein abschließendes Fazit zu Sublime Text 2

Nachdem ich Sublime Text 2 in den letzten Wochen immer wieder getestet habe, bin ich davon überzeugt, dass die Nutzergemeinde noch weiter wachsen wird. Für mich persönlich fehlen aber einige Dinge. Einstweilen will ich das Sublime Text 2 nicht anlasten. Wahrscheinlich liegt es eher daran, dass ich die dazu passenden Erweiterungen noch nicht gefunden habe, obwohl sie bestimmt bereits existieren.

Sublime Text 2 steht in Versionen für Mac OS X, Windows 32 und 64bit, sowie Linux, ebenfalls in 32 und 64bit zum Download bereit. Hat man sich nach einer frei zu definierenden Testphase vom Nutzen des Programms überzeugen können, wird eine Lizenz fällig. Diese schlägt mit 59 USD zu Buche, bezieht sich dabei aber auf einen User. Wenn Sie also ein MacBook, einen Windows-PC und einen Linux-Desktop haben, können Sie dennoch mit 59 USD alle drei Maschinen bestücken.

Dieser Text entstand schlussendlich unter Nutzung der Markdown-Unterstützung von Sublime Text 2.

(dpe)