Kategorien
Allgemein

Eine One Page Website mit Bootstrap

Das Bootstrap Framework ist bereits Jahre alt aber immer wieder nützlich. Die perfekte Basis für eine One-Page Website. Bootstrap bietet ein Grundgerüst mit globalen CSS-Stilen, grundlegenden HTML-Elementen mit erweiterbaren Klassen und einem Grid-System. Es beinhaltet alles, was du brauchst um eine schöne, schnelle Website zu erstellen und ist vollständig Buzzword kompatibel (Mobile First, HTML5, Raster System, Media Queries, Responsiv, LESS, SASS, Mixins, CDN, Grunt, Bower, NPM, Composer). Der letzte Punkt ist natürlich nicht ganz ernst gemeint aber manchmal durchaus hilfreich ;). Diese Anpassungsfähigkeit und die sinnvolle Sammlung von Gestaltungselementen ist das Geheimnis der weiten Verbreitung von Bootstrap. Oft taucht das Framework als Bestandteil von Webanwendungen oder Content Management Systemen auf. Es ist allerdings auch möglich nur auf der Basis von Bootstrap zu arbeiten. Wie, das zeigt dieser Beitrag.

Kategorien
Frameworks Webdesign

Was sind Grunt und Bower und warum brauche ich das?

Als JavaScript Entwickler weisst du natürlich, was Grunt und Bower tun und warum sie so nützlich sind.

Für alle Anderen ist dieser Beitrag gedacht. Er dreht sich um die Automatisierung von Aufgaben und Abhängigkeiten.
Grunt ist für die Aufgaben zuständig, Bower für die Abhängigkeiten.

Grunt ist ein sogeannter JavaScript Task Runner, der wiederkehrende Aufgaben automatisiert. Solche Aufgaben sind beispielsweise minification, compilation, unit-testing, linting und noch ein paar mehr. Noch nie etwas von diesen Aufgaben gehört? Kein Problem, hier eine kurze Erläuterung der Begriffe.

  • Minification (Minifizierung)
    In JavaScript sind viele Leerzeichen, Kommentare und Zeichen, die nicht zur Ausführung des Code benötigt werden, enthalten, aber zum Browser des Besuchers übertragen werden müssen. Minifizierung bedeutet, diese Zeichen herauszufiltern. Aus

    var a = [];
    for (var i = 0; i < 20; i++) {
      a[i] = i;
    }

    wird das Kürzere

    for(var i=0,a=[];i<20;i++){a[i]=i}
  • Compilierung
    Hier geht es um das Übersetzen des Codes der Stylesheet Sprachen LESS und SASS in „einfache“ CSS Dateien oder auch von JavaScript Sprachen wie CoffeeScript in das „einfache“ JavaScript.
  • Unit-Testing (Modultests)
    Modultests testen einzelne Bestandteile einer Software und nicht die gesamte Software auf einmal. Wenn ein Teil den Test bestanden hat, ist die Chance erheblich höher, dass die gesamte Software die Tests besteht.
  • Linting (statische Code Analyse)
    Lint ist eine Software für die statische Code Analyse. Damit ist beispielsweise die Formatierung des Quellcodes gemeint, z.B. mit dem Node.js Paket HTML Lint.

Diese Aufgaben sind notwendig, oft zeitaufwendig und für Anfänger fehleranfällig. Bei zunehmender Industrialisierung in der Webentwicklung erlauben solche Tools unter anderem auch die Miniaturisierung von Aufgaben. Ein Entwickler ist dann für einen kleinen Teil der Anwendung zuständig. Dieser Teil wird getestet, standardisiert, formatiert und automatisiert übernommen.

Die oben beschriebenen Aufgaben können mit Grunt automatisiert werden. Wenn du in deiner LESS Datei etwas änderst, so verwandelt der JavaScript Task Runner Grunt im Hintergrund die LESS Datei automatisch in eine CSS Datei. Er sitzt quasi im Hintergrund und wartet darauf, dass sich etwas ändert. Wenn er eine Änderung bemerkt, bringt er alles auf den neuesten Stand. Das ist praktisch! Grunt selbst ist ein Paket der JavaScript Laufzeitumgebung Node.js. Damit Grunt weiß, was es tun soll, musst du deine Anweisungen in eine Konfigurationsdatei, das sogenannte Grunt File, stellen.

Installation und Nutzung

Damit Grunt laufen kann, benötigt es eine installierte Node.js Umgebung (Download für alle Plattformen). Eine Entwicklungsumgebung oder ein besonderer Editor ist nicht zwingend notwendig aber hilfreich. Eine verbreitete Umgebung ist das Produkt Webstorm der Firma JetBrains. Zum Ausprobieren gibt es eine kostenlose 30 Tage Testversion.

Bei Node.js Projekten gibt es normalerweise eine Datei package.json. In dieser Datei sind alle notwendigen Informationen über vorhandene Node.js Pakete hinterlegt. Hier ein Beispiel mit Abhängigkeiten zu Grunt Paketen und einer Mindestversion von Node.js:

...
"devDependencies": {
  ...
  "grunt": "^0.4.5",
  "grunt-contrib-sass": "^0.9.2",
  "grunt-contrib-watch": "^0.6.1",
  ...
},
"engines": {
 "node": ">=0.10.0"
}
...

Im Verzeichnis, das die package.json Datei enthält, werden mit dem Befehl npm-install die benötigten Pakete installiert. Wenn du ein Projekt vor dir hast, das dann noch ein Grunt file (Gruntfile.js) enthält, reicht normalerweise der Aufruf grunt in diesem Verzeichnis aus, um den Task Manager zu starten und im Hintergrund arbeiten zu lassen. Wenn du an den JavaScript oder SASS Dateien etwas änderst, sollte sich Grunt um die gewünschte Umwandlung der Dateien kümmern. Der Inhalt eines Grunt Files sieht beispielsweise so aus (u.a. Pfade für die Umwandlung von JavaScript und SASS).

...
module.exports = function (grunt) {
 // show elapsed time at the end
 require('time-grunt')(grunt);
 // load all grunt tasks
 require('load-grunt-tasks')(grunt);

// configurable paths
 var directoriesConfig = {
  src: {
    js: 'js',
   sass: 'sass',
   sassFile: 'sass/styles.scss',
  images: 'images',
  spriteFile: '../../sass/base/_sprite.scss'
 },
 dist: {
  js: 'dist/js',
  css: 'dist/css',
  cssFile: 'dist/css/styles.css',
  images: 'dist/css'
 }
};

Außer diesen Umwandlungen können im Grunt File beispielsweise auch Pakete wie browsersync gestartet werden. Browsersync aktualisiert „live“ alle Browser, die sich gerade deine Seite lokal ansehen. Das ist nützlich, weil du dann direkt auf dem PC, dem Telefon und dem Tablet sehen kannst, wie sich deine Änderungen am Code im entsprechenden Browser auswirken. Es bietet auch weitere Features, wie das Debugging innerhalb des Browsers auf dem entsprechenden Device.

Bower

Bower ist ein Paketmanager. Im Unterschied zu Grunt geht es bei Bower nicht um die Automatisierung der Abarbeitung von Aufgaben, sondern um die automatisierte Verwaltung von JavaScript Bibliotheken. Bower ist ebenfalls ein Node.js Modul und benötigt wie Grunt eine Konfigurationsdatei, in diesem Fall ein „Bower File“ (bower.json), in dem alle Anweisungen stehen. Hier ein Beispiel für die Definition von Abhängigkeiten in einer bower.json Datei. Jede Zeile ist eine JavaScript Bibliothek (Polymer, React, react-photoswipe, magnific-popup)

"dependencies": {
  "polymer": "~1.3.1",
  "react": "^0.14.7",
  "react-photoswipe": "^0.5.1",
  "magnific-popup": "~1.1.0"
 }

Anwendung

Bei einer Website bestehen im Frontend Bereich meistens Abhängigkeiten zu bestimmten JavaScript Bibliotheken und Frameworks wie Bootstrap. Bower sorgt dafür, dass diese Bibliotheken in der produktiven Website nicht „vergessen“ werden. Die Aufgaben, wie die Kompilierung von LESS/SASS nach CSS übernimmt Grunt.
Durch diese Automatisierung ist sichergestellt, dass nichts vergessen und der Code planmäßig optimiert wird. Bei der Entwicklung von Themes für Content Management Systeme wird heute gern von den Möglichkeiten der Automatisierung Gebrauch gemacht. Wenn du solche Themes an deine Bedürfnisse anpassen willst, kannst du vorhandene Grunt und Bower Files nutzen.

Fazit

Automatisierung ist bei der industriellen Produktion von Software wichtig, weil sie wiederkehrende Aufgaben beschleunigt und dabei hilft Flüchtigkeitsfehler zu vermeiden. Wenn die Code Basis gut organisiert ist und die Entwicklungstools einheitlich sind, helfen Grunt und Bower bei langweiligen, wiederkehrenden Aufgaben und du hast Zeit dich um das Wesentliche zu kümmern.
Neue Features können in kürzerer Zeit realisiert werden.

Links


tl;dr: Automatisierung beschleunigt und ordnet die Entwicklung von Websites.

Kategorien
Content Management Systeme Editoren Site Builder Webdesign Webserver Wunschthema

Debugging mit PHPStorm und MAMP

In der letzten Woche ging es um die Erstellung einer Galerie mit der PhotoSwipe Library in WordPress. Das Ergebnis war gut, aber wie so oft fehlte noch eine Kleinigkeit. Unter dem Einzelbild sollte außer der Beschreibung des Bildes noch ein Link zum Artikel sein, in dem das Bild verwendet wird. Als Entwickler muss man nun suchen, wo man diesen Link am Besten einfügt und wie man an die gewünschten Daten kommt. Glücklicherweise merkt sich WordPress in welchem Beitrag ein Bild verwendet wird, so dass es grundsätzlich relativ einfach möglich sein müsste, einen korrekten Link einzufügen.

Wer öfter programmiert, hat einen Lieblingseditor oder eine Lieblingsentwicklungsumgebung (IDE). Im PHP Umfeld ist vermutlich das Produkt PHPStorm „die IDE“. PHPStorm ist ein proprietäres Produkt aber auch im Open Source Umfeld sehr beliebt. Du kannst dir eine kostenlose 30 Tage Version von der Website des Herstellers laden.

Die Aufgabe mit dem Link ist eine gute Gelegenheit um das Debbuging mit PHPStorm zu zeigen. Unter Debugging versteht man den Vorgang, Fehler in Computersystemen zu diagnostizieren und zu finden. Der Name geht tatsächlich auf Käfer und Motten (bugs) zurück, die in frühen Computern zu Kurzschlüssen an den Elektronenröhren führten. Webentwickler nutzen für die lokale Entwicklung oft eine Zusammenstellung freier Software für Webserver, Datenbank und Programmiersprache. Im macOS Umfeld ist das oft MAMP, im Windows Umfeld XAMP, bei Linux sind alle benötigten Programme bereits enthalten. Eine Website wird meistens lokal erstellt und in einem Git Repo gelagert (siehe auch Entwicklungsworkflow für Deine Website(s)). Die Änderungen am Code werden dann auf unterschiedliche Weise (git pull, FTP, Browser-Upload, etc.) auf den produktiven Server übertragen.

Die Fehlersuche und überhaupt das Verständnis von Programmcode ist bei modernen Content Management Systemen nicht mehr ganz einfach. WordPress ist glücklicherweise immer noch relativ leicht zu verstehen, die Innereien der Variablen und Arrays sind aber oft unübersichtlich.

Eine wichtige Funktion eines Debuggers ist das Setzen von Haltepunkten an bestimmten Code Zeilen. Die Programmausführung wird an so einem Haltepunkt unterbrochen und man kann sich dann in der IDE die Werte aller im Speicher vorhandenen Variablen ansehen. Ein für meinen Zweck sehr hilfreiches Feature.

Was wir hier machen nennt sich Remote Debugging. PHPStorm wird so konfiguriert, dass es weiß, welcher Server auf welchem Port verwendet wird und wartet dann auf einen speziellen Parameter beim Aufruf der lokalen Website. MAMP/XAMPP muss ebenfalls vorbereitet werden und den Parameter an PHPStorm weitergeben. Ich beschreibe die Vorgehensweise bei MAMP, da ich mit macOS arbeite.

MAMP vorbereiten

Dein PHP Interpreter benötigt die entsprechenden Informationen in seiner Konfigurationsdatei php.ini. Damit du die richtige Datei änderst, musst du in den Preferences herausfinden, welche PHP Version dein MAMP benutzt. In meinem Fall ist das PHP 7.0.12.

MAMP - PHP-Version
MAMP – PHP-Version

Nun musst du die passende php.ini Datei finden und ein paar Änderungen vornehmen. Die Datei liegt bei mir in /Applications/MAMP/bin/php/php7.0.12/conf.

php.ini
php.ini

Ganz am Ende der Datei müssen folgende Zeilen eingefügt werden, bzw. auskommentiert werden.

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.0.12/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.idekey=PHPSTORM

Danach muss der Webserver neu gestartet werden.

PHPStorm vorbereiten

Ich lege mir für jede Website einen Unterordner in meinem /dev Ordner an, also in diesem Fall /dev/wordpress. In PHPStorm ist jede Website dann ein Projekt.

PHPStorm
PHPStorm

Das Remote Debugging muss in den PHPStorm Preferences konfiguriert werden (einfach nach dem Wort debug suchen). Die Standardwerte kannst du übernehmen, wichtig ist der Debug port 9000. Es muss der gleiche Port wie in der php.ini von MAMP sein.

Debug - Einstellungen
Debug – Einstellungen

In PHPStorm kann nun der Debugger eingeschaltet werden. Oben im Menu ist ein kleiner Telefonhörer, der im oberen Bereich rot ist (ausgeschaltet). Nach einem Mausklick ist er oben und unten grün, „hört“ also mit.

Debugger einschalten
Debugger einschalten

Jetzt fehlt noch die Verbindung zum MAMP. Rufe im Menü den Punkt Run -> Edit Configurations auf.

Remote Einstellungen
Remote Einstellungen

Unter dem Eintrag PHP Remote Debug musst du einen neuen Server einrichten (Name MAMP) und als IDE key den gleichen Schlüssel wie in der php.ini eintragen (PHPSTORM).

PHP Remote Debug
PHP Remote Debug

Debugging

Jetzt kann es losgehen. PHPStorm wartet auf das vereinbarte „Zauberwort“ (PHPSTORM) und MAMP auf einen Seitenaufruf. Bevor der kommt, musst du allerdings einen Haltepunkt festlegen. In meinem Beispiel nutze ich das PhotoSwipe Masonry Plugin (siehe Beitrag WordPress Galerie mit PhotoSwipe und Masonry Effekt) und möchte dort etwas in Erfahrung bringen. Ich öffne die Datei photoswipe-masonry.php und klicke die Zeilen 474 und 480 an. An dieser Stelle wird der Titel erzeugt, der unter der Einzelansicht eines Fotos angezeigt wird. Mein Ziel ist herauszufinden, ob die ID des mit dem Foto verknüpften Artikels als Variablenwert zur Verfügung steht.

Haltepunkte setzen
Haltepunkte setzen

Ich rufe die Website mit folgendem Parameter auf:
http://127.0.0.1/?XDEBUG_SESSION_START=PHPSTORM
und navigiere dann auf der Website an die Stelle mit dem Foto, wo der zusätzliche Link erscheinen soll.

PHPStorm hält tatsächlich automatisch an der von mir markierten Codezeile an und ich kann im Debug Fenster die Variablenwerte durchgehen. Der Aufbau der Website stoppt ebenfalls an diesem Punkt.
(Ein Klick auf den kleinen grünen Play Button im Debugger Fenster lässt das Programm zum nächsten Haltepunkt laufen).

Debugging Session
Debugging Session

WordPress behandelt ein Bild im Medienbereich intern als Post. Mein Bild hat die ID 23. Im Attachment Array sehe ich einen Eintrag mit dem Namen post_parent und der richtigen ID des Beitrags in dem das Bild benutzt wird (26). Hurra! Jetzt kann ich eine WordPress Funktion suchen, die mir den Titel des Beitrags liefert. Den Link zum Artikel kann ich mit der ID zusammenbauen (Vielleicht Stoff für einen neuen Beitrag 😉 ).

Fazit

Auch wenn es Anfangs etwas mühselig und zeitaufwendig ist und sicher nicht beim ersten Mal klappt, halte durch! Der Debugger spart dir viel Zeit und macht manche Dinge erst möglich, so dass du ihn nicht mehr missen möchtest.

Links:


tl;dr: Debugging ist nützlich, gar nicht schwer und funktioniert auch mit MAMP und XAMPP.

Kategorien
Content Management Systeme Site Builder Webdesign Wunschthema

WordPress Galerie mit PhotoSwipe und Masonry Effekt

Heute gibt es wieder ein Wunschthema. Es geht es um die Darstellung von Fotos in WordPress.

Im Zeitalter von Facebook, Pinterest, Instagram und ähnlichen Services sind die Ansprüche an die Darstellung von Fotos gestiegen. Besucher erwarten auch auf selbst gehosteten Websites eine schicke Darstellung. Auf allen denkbaren Geräten sollte eine Galerie einfach per Touch, Swipe, Pinch und Klick bedienbar sein und schnell laden.

Vermutlich hast du das Problem auch schon mal gehabt. Du wolltest Fotos auf deiner Website in einer Art Slideshow oder einem Grid darstellen. Nachdem die Galerie lief, hast du schnell festgestellt, dass es eben doch nicht auf allen Geräten gleich gut bedienbar war, ganz zu schweigen von der Ladezeit. Wenn dann noch individuelle Wünsche des Kunden kommen oder es einfach viele Fotos sind, verzweifelt man schnell.

PhotoSwipe

Die JavaScript Library PhotoSwipe ist eine echte Hilfe in solchen Fällen.

PhotoSwipe
PhotoSwipe

Sie zeichnet sich durch die folgenden drei Eigenschaften aus:

  • Modular: PhotoSwipe besteht aus zahlreichen Modulen, die es ermöglichen, nur die Teile der Bibliothek zu nutzen, die du wirklich brauchst. Das hält den JavaScript Code klein.
  • Responsiv: Photoswipe lädt das zur Bildschirmgröße passende Foto.
  • Touch Unterstützung: PhotoSwipe unterstützt die meisten Touch Gesten wie beispielsweise das „größer ziehen mit zwei Fingern“ und das Schließen der Einzelansicht durch „nach oben wischen“.

Photoswipe hat nur einen Haken. Es ist ein Stück Code, das nicht so einfach out of the Box funktioniert und Kenntnis von JavaScript erfordert.

Glücklicherweise gibt es eine gute Dokumentation und so etwas wie offizielle Plugins für RubyEmber.jsEagerKokenOrchardYellow CMSKirby und Drupal.

Es gibt kein offizielles WordPress Plugin aber es gibt mehrere WordPress Plugins, die die Bibliothek nutzen um die im WordPress Core bereits vorhandene Galeriefunktion zu erweitern.

WordPress Galerien erstellen

Bevor ich die PhotoSwipe Bibliothek hinzufüge, beschreibe ich zunächst den Weg, wie du in WordPress Galerien erstellst. Eine WordPress Galerie besteht aus existierenden Fotos, die du innerhalb eines Beitrags hinzufügen kannst. Klicke einfach auf den Dateien hinzufügen Button und wähle die entsprechenden Bilder aus.

WordPress - Galerie zusammenstellen
WordPress – Galerie zusammenstellen

Hinweis: Falls noch keine Fotos vorhanden sind, kannst du in diesem Schritt auch welche hochladen. Wechsle einfach in das Tab Dateien hochladen und wähle danach die Bilder aus.

Nach einem Klick auf den Galerie erstellen Button kannst du weitere Eigenschaften der Galerie wählen. Du kannst die Größe der Vorschaubilder auswählen, was bei einem Klick auf das Bild passieren soll, die Art der Sortierung, die Anzahl der Spalten und den Typ des Layouts.

Galerie Einstellungen
Galerie Einstellungen

Nach dem Speichern erscheinen die Bilder innerhalb der visuellen Ansicht im Editor. Du kann die Einstellungen weiterhin bearbeiten.

Galerie in der visuellen Ansicht des Editors
Galerie in der visuellen Ansicht des Editors

Wenn du in den Text Modus wechselst, siehst du, was hinter der Galerie steckt. Sie ist ein WordPress ShortCode, dem Parameter und Id’s der Bilder übergeben wurden.

Galerie - ShortCode
Galerie – ShortCode

Damit ist deine WordPress Galerie fertig und sieht auch o.k. aus (Ich probiere das hier beim Schreiben des Artikels im NOVATREND Blog aus, deshalb steht im Titel Privat).

WordPress-Galerie
WordPress-Galerie

Hier ein Beispiel einer Darstellung mit der WordPress Slideshow Option (noch ohne PhotoSwipe).

WordPress - DiaShow
WordPress – DiaShow

Beide Darstellungsarten funktionieren sehr gut, sehen aber doch recht „hausbacken“ aus.

Plugin PhotoSwipe Masonry Gallery

An dieser Stelle kommt das PhotoSwipe Masonry Gallery Plugin ins Spiel. Es arbeitet auf der Basis von WordPress Galerien und verändert deren Darstellung.

PhotoSwipe Masonry Gallery
PhotoSwipe Masonry Gallery

In den Einstellungen des Plugins kann die Größe der Thumbnails und die Maximalgröße des Einzelbildes eingestellt werden. Außerdem lässt sich ein weißer Hintergrund konfigurieren und der Masonry Effekt deaktivierten.

PhotoSwipe Einstellungen
PhotoSwipe Einstellungen

Das Ergebnis sieht sehr beeindruckend aus (Beispiel). Die Thumbnails ordnen sich je nach verfügbarem Platz an. In der Einzelansicht auf Touch Geräten kannst du dich durch die Bilder „wischen“ und diese auch auf Pinterest, Twitter und Facebook teilen. Jede Einzelansicht hat einen eindeutigen URL.

WordPress Galerie mit PhotoSwipe Masonry Plugin
WordPress Galerie mit PhotoSwipe Masonry Plugin

Durch die Nutzung der WordPress Galerien hat das Plugin einen angenehmen Nebeneffekt. Du musst keine Galerien separat erstellen und WordPress wird das eigene Galerie Feature sicherlich weiter pflegen.

Achtung: Die Anzahl der Bilder und die Größe der Thumbnails müssen beachtet werden, sonst kommt es zu langen Ladezeiten und dem Gegenteil dessen, was ich letzte Woche noch bemängelt habe. Das zur Neuberechnung der Thumbnails in den PhotoSwipe Einstellungen vorgeschlagene AJAX Thumbnail Rebuild Plugin funktioniert gut und sollte bei einer Änderung der Thumbnailgröße genutzt werden.

Links:


tl;dr: Mit PhotoSwipe lassen sich Fotos ansprechend darstellen

Kategorien
Allgemein Infrastruktur Performance Services Webdesign

Mehr Zeit und mehr Geld in 2017

Unter Komplexitätsmanagement versteht man den Umgang mit wirtschaftlicher, organisatorischer und technischer Komplexität. Stell‘ dir beispielsweise einen Lieferdienst vor, der die Arbeitszeiten seiner Angestellten mit den verfügbaren Autos und den erfolgten Bestellungen planen muss.
Bei zwei Angestellten, einem Auto und 10 Bestellungen ist das etwas anderes als bei 800 Angestellten, 376 Autos und 7,562 Bestellungen.