Entwicklung

Nach den ersten 5 Teilen dieser Reihe, die für Leser sicherlich nicht sehr komfortabel waren, hier nun die Dokumentation zum 3 Purpose Grid.

Dort gibt es jetzt endlich eine Download-Möglichkeit und natürlich jede Menge Kontext-Links auf die schon bekannte Demo.

Das responsive Dokumentationsportal wurde selbstverständlich auf Basis des 3 Purpose Grid (oder in Zukunft kurz P3-Grid) entwickelt und ist damit auch eine Demonstration des ersten Zwecks unseres Grid-Layout-Systems, nämlich die Entwicklung von responsiven Webportalen.

Als CMS für den Einsatz habe ich phpSQLiteCMS gewählt, ein schlankes aber durchaus respektables System, das ich sehr effizient mit meinem Grid-System einrichten konnte.

Es gehört zur Philosophie des 3 Purpose Grids (Demo), dass nur wenige rudimentäre GUI- und Design-Elemente zur Verfügung gestellte werden, damit der Desinger bzw. Entwickler Freiraum für eine individuelle Gestaltung behält. Dies ist bei vielen CSS-Frameworks, wie z.B. Bootstrap anders. Dort werden viele ausgefeilte GUI-Elemente wie Tabulatoren, Buttons, Sliders, etc. implementiert, deren Verwendung dann allerdings dazu führt, dass ein damit erstelltes Produkt am Ende erkennbar auf einem Bootstrap-Framework aufsetzt. Wer also ein individualisiertes Produkt realisieren möchte, der muss entweder auf diese Elemente verzichten, was zu einem Overhead in den Sourcen führt oder aber z.B. mittels aufwändiger SASS-Modifikationen einen eigenen GUI-Style generieren, was allerdings sehr spezifische Skills erfordert und nicht ganz einfach sein dürfte. Dies soll aber mit unserem Grid-System nicht passieren.

Trotzdem können wir auf die Unterstützung weniger GUI- und Design-Komponenten nicht verzichten. Wir beschränken uns auf CSS-Unterstützung für:

• Menus,
• Medien,
• Info-Boxen,
• Formulare,
• Tabellen und
• Karten.

Andere machen daraus 6 Artikel. Ich packe hier alles in einen. Schließlich will ich ja auch mal fertig werden mit dieser Reihe.

Damit hätten wir dann den ersten Zweck unseres 3 Purpose Grid erreicht, nämlich die Verwendung als ganz normales CSS-Framework für Portale. Wir werden noch einige weitere Teile benötigen, um alle unsere Ziele zu erreichen.

Das 3 Purpose Grid soll weniger durch viele Gui-Elemente glänzen, von denen man in der Praxis meist nur einen Bruchteil benötigt. Vielmehr soll es vor allem schlank und vielseitig sein und den  Entwickler-Workflow unterstützen.

Auf zwei GUI-Elemente kann man aber nicht verzichten, wenn man schnell ein funktionsfähiges System als Ausgangspunkt für ein größeres Projekt aufsetzen möchte, auf:

• Navigationsmenus und
• Paginierung.

Unser System (Demo) wird deshalb im Folgenden um diese Ressourcen erweitert.

Unser 3-Purpose-Grid soll Ausgangspunkt sein für eine Vielzahl kleinerer Projekte in diesem Weblog. Ziel ist es, sich dieses Grid (Demo) inklusive aller Ressourcen (Bash-, Grunt-Skripte, Cordova-Vorbereitung, vielleicht Testing, falls ich dazu komme, etc.) herunterzuladen, um dann sofort mit der Implementierung des eigentlichen Entwicklungsziels beginnen zu können. Es ist somit wichtiger Teil des hier praktizierten Workflows.

Deshalb stelle ich hier drei Header- und zwei Footersysteme vor, die man sich je nach Zielsetzung eines Projekts oder persönlichem Geschmack auswählen kann.

Unser 3 Purpose Grid hatten wir in Teil 1 dieser Reihe rein statisch entwickelt. Wir werden es in diesem Beitrag durch Hinzufügen einer einzigen CSS-Datei responsive machen.

Außerdem werden wir bei dieser Gelegenheit ein kleines Javascript hinzufügen, mit dem wir unser Responsive-Layout ganz gut testen können.

Das Ergebnis kann man in dieser Demo bewundern.

In der Einleitung zu dieser Reihe habe ich Grundsätzliches zum 3-Purpose-Theme geschrieben. Vor allem die Ziele des Systems standen dort im Vordergrund.

Hier, im ersten Teil der Projekt-Reihe zum 3-Purpose-Grid, wird das Layout entwickelt. Es wird dabei keine bestimmte Breite vorgegeben wie etwa bei dem bekannten 960er-Grid, sondern es lassen sich viele verschiedene Breiten und Anzahlen von Spalten miteinander kombinieren. Entscheidend ist, inwieweit die Breite durch die Anzahl der gewünschten Spalten teilbar ist.

Ich habe mir überlegt, dass ich für die Projekte in diesem Blog ein einfaches, für alle Themen im Blog geeignetes Theme entwickle, so dass man zu Beginn eines neuen Projekts einfach diese Ressource herunterlädt und schon kann man sich auf die wesentlichen Punkte beim Nachvollziehen eines neuen Beitrags beschränken.

Das Theme, dass ich hier vorstelle, soll genau drei Zwecke erfüllen. Es soll geeignet sein für

• statische und responsive Portale (später auch als Drupal- oder Typo3-Themes),
• als Basis-Layout für hybride Apps als Alternative zu jQuery-Mobile und ähnlichen Frameworks und
• als GUI-Konsole für lokale NodeJS-Projekte.

Ich nenne es deshalb das 3-Purpose-Grid (Demo).

Das gesamte Projekt ist jetzt etwas aufwändiger geworden, zumal die notwendigen Überlegungen recht grundlegend waren. Den Aufbau beschreibe ich deshalb in mehreren Beiträgen. In diesem Beitrag erfolgt zunächst ein Überblick.

In diesem Beitrag wird die Architektur der hybriden App aus dem letzten Beitrag durch den Einsatz des Frameworks RequireJS verbessert. Da wir das Projekt schon auf dem Module-Pattern aufgebaut hatten, sind nur noch wenige Modifikationen notwendig, um dynamisches Laden der Module zu ermöglichen.

Dieses dynamische Laden kann zu erheblichen Performance-Verbesserungen führen. Außerdem lassen sich Abhängigkeiten zwischen den Modulen mit dem Framework require.js leichter verwalten. Auch wird durch den Einsatz von r.js (Ein NodeJS-Modul) eine Optimierung des Source-Codes möglich gemacht (Minification). Dieser Punkt ist aber nicht mehr Gegenstand dieses Artikels.

Wir hatten uns in diesem Artikel eine super-simple App mit einer Zeile Source-Code gebaut, die allerdings nur in wenigen Einsatzfällen professionellen Ansprüchen genügt, vielleicht als ePaper-Reader oder als App für ein einfaches News-Medium - zum Beispiel ein Blog - wobei allerdings Responsive Design vorausgesetzt wurde.

Die Lade-Anzeige der Seite wurde mit einfachen CSS-Bord-Mitteln realisiert, was durchaus schon die Usability beträchtlich erhöhen kann. Aber wahrscheinlich will man sehr schnell etwas mehr Komfort und einige spannende Features implementieren.

Ein Spinner für die Lade-Anzeige sieht schon sehr viel professioneller aus und wie wäre es mit einem Kompass für das Impressum, so dass man mobil auf der Anfahrtskarte auch die Richtung erkennen kann, in die man laufen muss? Ich selbst hätte schon häufiger dafür Bedarf gehabt, vor allem, wenn ein Kunde mitten in der Stadt wohnt und das Navi im Parkhaus zurückgelassen werden musste.

Oder man will seinen Nutzern die Möglichkeit geben, ein Photo hochzuladen? Ein solches Feature ist vielleicht der erste Schritt zu einem erfolgreichen Geschäftsmodell.

Das Modul-Muster für Javascript sollte jeder aus dem effeff kennen. Es ist eines der vielseitigsten Methoden, den eigenen Source-Code in Projekten zu strukturieren. Dieses Pattern spielt eine wichtige Rolle in vielen leistungsfähgien Javascript-Frameworks und Konzepten wie NodeJS, RequireJS, CommonJS, AMD und ECMAScript.

Der oben verlinkte Artikel erklärt das Grundprinzip recht gut. Deshalb soll im Folgenden auch nicht mehr viel Theorie vermittelt werden, sondern dieses Modul-Pattern so beschrieben werden, wie wir es in weiteren Artikeln benötigen.