Nina Grässli Grid Tool - Dokumentation

1. Einführung

Dieses Tool ist im Rahmen der Bachelorarbeit für das Studium Multimedia Production (MMP) entstanden. Entwickelt wurde es von Nina Grässli.

2. Bestehende Tools - Evaluation der Technologien

Für die Inhaltliche und Technische Konzept des Artefakts wurden bestehende Grid-Generatoren untersucht. Folgende Kriterien wurden für die Suche festgelegt:

Das Tool soll direkt im Browser funktionieren und keine Software sein.
Das Tool soll gratis sein und ohne Anmeldung funktionieren
Das Raster kann visuell erstellt werden, das heisst, man sieht auf der Seite sofort das Ergebnis (Das zu erstellende Raster ist sichtbar, während man die Daten eingibt, sei es mit Buttons oder mit Drag and Drop). Dieses Kriterium nicht erfüllen würde beispielsweise eine Seite, in der man eine Spalten- und Zeilenanzahl eingibt und diese Zahlen bestätigen muss, und erst dann der Code berechnet wird.(Beispiel: https://www.gridcss.com)
Mit dem Tool müssen als Mindestanforderung sowohl Spalten als auch Reihen hinzugefügt werden können
Das erstellte Raster muss exportiert werden können

Folgende zu den Kriterien passenden Grid-Tools konnten gefunden werden:

2.1 Verwendete Technologien

Name	Framework	GUI HTML oder JS	Grid Technologie	Notizen
Layoutit	Vue.js	JS	CSS Grid Layout	-
Griddy	-	JS	CSS Grid Layout	Benutzt Polyfillers
Vue Grid Generator	Vue.js, Nuxt.js	HTML	CSS Grid Layout	-
CSS GR	-	HTML	CSS Grid Layout	Kommentierter JS Code
CSS Grid Layout Generator	React	JS im HTML	CSS Grid Layout	-
Codepen	Babel	JS	CSS Grid Layout	-
Stack Overflow	-	HTML und JS	CSS Grid Layout	-

Hier stellt sich die Frage, welche Technologie ich für mein Tool verwenden soll. Mit einem Framework wie Vue.js wäre das programmieren sicher leichter, jedoch müsste ich dann zusätzlich noch Vue.js lernen. Deshalb habe ich mich entschieden, mit reinem Javascript, und falls nötig, mit JQuery zu arbeiten.

Für den Grid selber verwendet jedes der obigen Tools das CSS Grid Layout. Es gibt jedoch Alternativen. Um sicherzugehen, habe ich an diesem Punkt einen Vergleich durchgeführt.

3. Test der Technologien

Folgende CSS-Technologien können für das Layouten im Web verwendet werden:
Flexbox Layout, Grid Layout, Shapes, Regions, Columns.

Nach erster Recherche
Shapes werden nicht verwendet, weil sie in eine ganz andere Richtung gehen als gesucht. Diese Technologie ist für spezielle Textflüsse gedacht, nicht für das Erstellen von Rastern.

Regions werden ebenfalls nicht verwendet, da diese Technologie nur auf IE, Edge und IE Mobile unterstützt wird. (Caniuse.com, abgerufen am 27.03.19)

Columns sind ebenfalls nicht geeignet, da ich sowohl mit Spalten als auch Zeilen arbeiten möchte, und auch über mehrere Zeilen oder Spalten reichende Elemente möglich machen will. Mit dieser Technologie lässt sich beides nicht verwirklichen.

3.1 Test der verbliebenen Technologien

Übrig bleiben CSS Grid und Flexbox. Flexbox hat gegenüber CSS Grid einen grossen Nachteil. Damit lassen sich keine zweidimensionalen Raster bauen.

Vergleich ein- und zweidimensionale Raster — Eindimensionale Raster im Vergleich zu zweidimensionalen Rastern

Das folgende Raster wurde mit Flexboxen und CSS Grid nachgebaut. Dabei wurde die Länge und die Kompliziertheit des Codes angesehen, um eine endgültige Entscheidung zu treffen.

Beispielraster für den Test — Dieses Raster wird sowohl mit Flexboxen als auch mit CSS Grid nachgebaut.

Test 1: CSS Flexbox Layout
Mit dem Flexbox Layout konnte das Raster erfolgreich nachgebaut werden.

  
        .flexbox { 
           display: flex;    
        }
        .flex-column {
        flex-direction: column;
        }

        .flexitem {
        border: 2px solid #FFAF05;
        }
        #column-1 {
        width: 25vw;
        }
        #column-3 {
        width: 33vw;
        }
        #column-2 {
            flex:1;
        }
        .row-1 {
        height: 50vh;
        }
        .row-2, .row-3 {
        height: 25vh;
        }


        <div class="flexbox">
            <div class="flex-column" id="column-1">
                <div class="flexitem row-1" id="flex-1">1</div>
                <div class="flexitem row-2" id="flex-4">4</div>
                <div class="flexitem row-3" id="flex-7">7</div>  
            </div>
            <div class="flex-column" id="column-2">
                <div class="flexitem row-1" id="flex-2">2</div>
                <div class="flexitem row-2" id="flex-5">5</div>
                <div class="flexitem row-3" id="flex-8">8</div>  
            </div>
            <div class="flex-column" id="column-3">
                <div class="flexitem row-1" id="flex-3">3</div>
                <div class="flexitem row-2" id="flex-6">6</div>
                <div class="flexitem row-3" id="flex-9">9</div>  
            </div>
        </div>

Diese Lösung funktioniert, Änderungen vorzunehmen ist jedoch eher umständlich. Die Lösung benötigt viel Code und einiges and Denkarbeit.

Test 2: CSS Grid Layout
Auch mit CSS Grid konnte das Raster nachgebaut werden.

  
      .wrapper {
       display: grid; 
       grid-template-columns: 25% 10px auto 10px 33%;
       grid-template-rows: auto 10px 25% 10px 25%;
       height: 100vh;
       grid-areas:
    }

    .wrapper div {
        border: 2px solid #FFAF05;
    }
    .a {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .b {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
    .c {
        grid-column: 5 / 6;
        grid-row: 1 / 2;
    }
    .d {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .e {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
    .f {
        grid-column: 5 / 6;
        grid-row: 3 / 4;
    }
    .g {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    .h {
        grid-column: 3 / 4;
        grid-row: 5 / 6;
    }
    .i {
        grid-column: 5 / 6;
        grid-row: 5 / 6;
    }
    
    <div class="wrapper">
    <div class="box a">1</div>
    <div class="box b">2</div>
    <div class="box c">3</div>
    <div class="box d">4</div>
    <div class="box e">5</div>
    <div class="box f">6</div>
    <div class="box g">7</div>
    <div class="box h">8</div>
    <div class="box i">9</div>
    </div>

Der oben verwendete Code könnte noch deutlich verkürzt werden. Der Verständlichkeit halber ist jedoch alles ausgeschrieben. Der Code ist logisch aufgebaut, und Änderungen können sehr schnell vorgenommen werden.

Für mein Tool werde ich deshalb mit CSS Grid arbeiten.

4. Prioritätenliste und Wireframes

Da in einem Grid Tool diverse Funktionalitäten eingebaut werden könnten, musste ich mich irgendwie beschränken. Zudem ist Javascript eine Programmiersprache, mit der ich noch nicht so viele Erfahrungen gemacht habe. Deshalb ist es schwierig einzuschätzen, wie weit ich in einer begrenzten Zeitspanne kommen kann.

Deshalb habe ich mich dazu entschieden, eine Prioritätenliste aufzustellen. Hier wird definiert, was das Produkt alles beinalten soll. Dabei werden alle gewünschten Inhalte in die verschiedenen Prioritäten aufgeteilt. In der ersten Priorität stehen Dinge, die am Schluss funktionieren sollten. Die zweite Priorität beinhaltet Funktionialitäten, die eingebaut werden, falls noch Zeit bleibt. Die dritte Priorität wird bearbeitet, falls nach der Implementierung der zweiten Priorität immer noch Zeit übrig ist, oder optional auch erst nach der Abgabe.

Diese Prioritätenliste ist dynamisch. Falls während des Erbauens eine andere Priorität für einen Inhalt mehr Sinn macht, kann die Funktionalität auch in eine andere Priorität verschoben bzw. Prioritäten ausgetauscht werden.

Priorität 1:

Grid Columns und Grid Rows (hinzufügen, entfernen, Grösse ändern)
Grid Gap in Pixel einstellbar
Möglichkeit, Code herunterzuladen
Ausgabe muss Responsive sein (3 automatisch eingebaute Breakpoints)

So würde das Tool aussehen:

Grunddesign der Seite. Der Zahnradbutton öffnet wieder das erste Popup Fenster, mit dem anderen Button lässt sich der Code herunterladen.

Priorität 2:

Verschiedene Einheiten (fr, px, %)
Felder (Areas) auf Raster zeichnen, benennen, speichern

So würde das Tool aussehen:

Grunddesign der Seite mit verschiedenen Einheiten

Priorität 3:

Mehr Einstellungen: Align Content, Presets, Breakpoints auswählen können
Schon gespeicherte Elemente abändern können

So würde das Tool aussehen:

Verschiedene Areas zeichnen und nach dem Speichern bearbeiten

5. Browser Support

Ich habe das Tool im Google Chrome-Webbrowser entwickelt. Dort funktioniert es deshalb am besten.

Browser	Browsersupport	Zusätzliches
Google Chrome-Webbrowser	gegeben	-
Mozilla Firefox	gegeben	Design der Input Felder leicht anders
Safari	nicht gegeben	Eingabe der Areas funktioniert nicht
Microsoft Edge	gegeben	Zahlen in Input Felder müssen Manuell eingeschrieben werden
Internet Explorer	nicht gegeben	CSS Grid Layout wird nur teilweise unterstützt

6. Prioritäten Änderung - Endresultat

Nach der Präsentation des Kolloquiums wurde mir bewusst, dass das Einfügen von Areas wichtiger ist als die Ausgabe in Responsive. Dies, weil die Areas eigentlich das Hauptstück von CSS Grid sind. Denn nur damit lassen sich die speziellen zweidimensionalen Layouts bauen.
Zusätzlich würde die automatische responsive Ausgabe mit den Areas plötzlich sehr kompliziert werden, und ich war mir unsicher, ob ich die Ausgabe so anpassen könnte, dass die responsive Ausgabe auch mit den Areas funktioniert.
Deshalb habe ich mich zuerst auf die Areas konzentriert. Die Ausgabe in Responsive habe ich danach mit einem kurzen Tutorial gelöst, welches dem Nutzer erklärt, wie er seinen Code relativ einfach in einen responsiven Code umwandeln kann.

Ich habe das Tool dann kurz vor der Abgabe 2-3 Kommilitonen gezeigt, um einen Input über die Bedienbarkeit zu erhalten. Folgende Änderungen baute ich nach diesen Inputs noch ein:

Wenn man über ein Feld hovert, gibt es einen sichtbaren Effekt, sodass besser erkennbar ist, dass das Feld klickbar ist
In den Settings befindet sich ein Link zu einem kurzen Tutorial über das Tool
Wenn man eine Area mit einem Namen speichern will, der bereits vorhanden ist, gibt es nun eine Meldung
Wenn man eine Area ohne Namen speichern will, gibt es eine Meldung

Das Endprodukt beinhaltet nun folgende Funktionalitäten:

Spalten und Zeilen können über die Einstellungen hinzugefügt und entfernt werden
Die Grösse des Abstandes kann in den Einstellungen sowohl für Spalten als auch Zeilen angepasst werden
Auf der Hauptseite können spezifische Spalten und Zeilen gelöscht werden, oder neben einer spezifischen Spalte / unter einer spezifischen Zeile eine weitere Spalte / Zeile hinzugefügt werden
Ebenfalls können die Grössen der Zeilen und Spalten individuell angepasst werden
Mit einem Klick auf ein Feld kann eine Area hinzugefügt werden. Diese Area kann vergrössert, benannt, gespeichert und auch wieder gelöscht werden.
Der Namen der Area wird als ID gespeichert. Falls der Namen mit einer Zahl beginnt, wird für die ID "area_" davorgesetzt. Abstände werden durch einen Unterstrich ausgetauscht. Sonderzeichen, ausser Bindestrich und Unterstrich, sind nicht erlaubt. Bindestrich und Unterstrich sind nur als erstes Zeichen im Namen nicht erlaubt.
Man hat die Möglichkeit, den CSS und den HTML Code zu kopieren und auf der eigenen Webseite zu verwenden.
Die Ausgabe ist nicht responsive, jedoch ist ein kurzes Tutorial verlinkt, wie die Ausgabe responsive gemacht werden kann
Es ist ein kurzes Tutorial über die Verwendung von Grid It verlinkt.

7. Fazit

Mein Tool ist noch lange nicht perfekt. Es hat noch einige Makel, jedoch habe ich versucht, so viele wie möglich auszumerzen.
Für den normalen Nutzer, der nicht aktiv nach Fehlern sucht, funktioniert das Tool. Das ist die Hauptsache.

Ich bin stolz auf mein funktionierendes Endresultat. Nun hoffe ich einfach, dass das Tool auch irgendeine Verwendung findet und vielen Menschen hilft.
Das bringt mich zu den Zukunftsvisionen. Ich habe mir in den letzten Tagen überlegt, wie ich das Tool weiterbringen könnte. Was ich sicher machen werde, ist, etwas SEO zu betreiben, sodass es in der Google Suche auch möglichst gut gefunden wird.
Auch ist der JavaScript Code im Moment sehr umständlich, er könnte deutlich gekürzt werden. Jedoch wollte ich, dass der Code bei der Bewertung möglichst originalgetreu ist, sodass besser nachzuvollziehen ist, wieso ich was wie gemacht habe.
Eine weitere Variante wäre, ein WordPress Plugin daraus zu entwickeln, dass dem Nutzer eine grafische Arbeitsoberfläche à la Enfold Layout Builder bietet.
Da ich dafür jedoch noch vieles lernen müsste, wäre das sicher wieder eine grosse Herausforderung, vor allem, da ich bald Vollzeit arbeite und da schon den ganzen Tag am Computer sitzen werde. Ich kann nicht sagen, ob ich dann zu Hause auch noch Interesse daran haben werde.

Aber ich werde sehen, was ich damit noch anstelle. Für den Moment bin ich jedoch ganz zufrieden mit meinem nicht ganz perfektem Tool.