Anbei ein paar Gedanken und Ideen zur WBA1 Challenge. Diese kleine Seite erhebt keinen Anspruch auf Vollständigkeit und die Herangehensweise, die Ideen und die vorgeschlagenen Tools und Frameworks sind mitunter sehr subjektiv. Wir hoffen es hilft trotzdem. Außerdem haben uns einige gefragt, wie sie sich vorbereiten können. Auch dazu gibt es ein paar Tipps und Vorschläge.

Viel Spaß, Ihr WBA Team

directions_run Worum geht es?

Bei der Challenge geht es darum, im Team eine Aufgabe oder ein Problem mit Hilfe einer web-basierten Anwendung zu lösen. Dazu braucht man, wer hätte es gedacht, Skills bei der Entwicklung web-basierter Anwendungen. Aber man braucht noch ein wenig mehr, z.B. eine gute Idee, gute Organisation, ein gutes Gefühl für Inhalt, gestalterische Grundkompetenz und Motivation.

people Organisation im Team?

Sie werden im Team arbeiten. Hier ist es ganz vorteilhaft, wenn Sie und Ihr Team ein gewisses Maß an Organisationsstruktur etablieren. Dies hat im konkreten Kontext vor allem Auswirkungen auf drei Bereiche:

  • Arbeitsorganisation

    Wer macht was? Für die Challenge lohnt es sich, wenn sich die einzelnen Teammitglieder etwas spezialisieren. Vielleicht sind ein oder zwei Mitglieder besser in Javascript und andere wiederum besser in CSS und wieder andere haben ein gutes Auge für Gestaltung oder sind gute Rechercheure. Dies sollten Sie frühzeitig evaluieren und regeln.

  • Codestruktur & -management

    Wer ist für welche Bereiche, Dateien & Komponenten zuständig. Wenn Sie schnell und mit möglichst wenigen Mergekonflikten durch den Tag kommen wollen, ist es ratsam sich hier ein Konzept zurecht zu legen und es entsprechend umzusetzen. Teilen Sie den Code nach technischen (CSS, JS, HTML, etc.) oder inhaltlichen (Landigpage, Doku, etc.) Bereichen auf oder zerlegen Sie Ihr Projekt in Komponenten, die dann mit Zuständigkeiten versehen werden.

bubble_chart Wie könnte man sich dem Problem nähern?

Was ist das Problem?

Heiteres Drauflos-coden ist selten ein guter Anfang. Auch wenn bei der Challenge wenig Zeit zur Verfügung steht, lohnt es sich am Anfang der Challenge, oder in Vorbereitung auf die Challenge eine genauere Betrachung des Problems. Was ist eigentlich das Problem und welche Möglichkeiten gäbe es dies zu lösen?

Es empfiehlt sich verschiedene Lösungsstrategien zu entwickeln und gegeneinander abzuwägen. Bei der Erarbeitung von Lösungsansätzen können Kreativtätstechniken enorm helfen. Die bekannstete ist vermutlich das Brainstorming. Aber auch andere Techniken, der Morphologische Kasten, die 6-3-5 Technik oder das Meinungs-Blitzlicht können enorm helfen, die Ideenphase zu verkürzen und zu besseren oder interessanteren Lösungsstrategien beitragen.

Wie wählen wir die beste Variante?

Grundsätzlich gilt: Sie sollten Varianten haben und Sie sollten Kritierien haben, mit deren Hilfe Sie die beste oder passenste Variante auswählen. Im Kontext der Challenge könnte es eine Reihe von sinnvollen Kriterien geben. Hier ein paar Beispiele:

  • die Variante löst das beschriebene Problem gut
  • die Variante lässt sich gut erkären
  • die Variante lässt sich gut im gegebenen Zeitrahmen und Kontext umsetzen
  • die Variante lässt sich gut im Team arbeitsteilig umsetzen
  • bei der Umsetzung der Variante lassen sich gut die Kenntnisse von HTML, CSS und Javascript einsetzen

Time Boxing

Wenn die Zeit knapp ist, könnte Time Boxing eine hilfreiche Technik sein. Hierbei werden für bestimmte (Teil-)aufgaben sinnvolle Zeitvorgaben gegeben, die absolut strikt eingehalten werden. Sinnvoll heißt: der Task bekommt ein Zeitfenster, das der Relevanz des Tasks im Kontext der Gesamtaufgabe entspricht. Damit wird sichergestellt, dass alle für den Prozess notwendigen Aufgaben erledigt werden können, also keine Aufgaben am Ende des Prozesses "herunter fallen".

Zielbild aufbauen

Eine kleine Skizze, Wireframe, eine Übersicht, all das hilft dem Team ein gemeinsames Bild zu geben und die Arbeit besser aufzuteilen. Nutzen Sie dererlei Techniken um im Team ein gemeinsames Bild zu haben.

Fubizz Wireframes
Time Bank Wireframe - iteration von Mark Congiusta

web Nutzung von Frameworks, Icons und anderen Ressourcen.

Im Rahmen der Challenge ist im Grunde so gut wie alles erlaubt, was Ihnen hilft das Projekt so gut und professionel wie möglich zu realisieren. Nutzen Sie Frameworks, Iconsets und Tools. Aber Sie müssen auf Ihrer Dokumentations Seite darauf hinweisen, welche Tools und Codesnippets Sie verwendet haben. Hier eine kleine Übersicht über mögliche Helferleins.

Twitter Bootstrap

Eines der meinst genutzten CSS Frameworks.

BULMA

Ein kleines, schönes CSS Framework.

Materialize

Ein responsives Front-End-Framework basierend auf Material Design

Foundation

Sehr mächtiges und umfangreiches Front-End Framework.

Material Icons

Iconset aus der Google Material Design Linie.

Font Awesome

Sehr umfangreiches Iconset mit über 600 Icons.

Open Iconic

Open Source Iconset mit über 200 Icons.

Vue.js

Sehr schönes JavaScript-Webframework zum Erstellen von Single-Page-Webanwendungen.

jQuery

Sehr beliebtes Javascript Framework, das gerade nicht mehr so en vouge ist.

React

JavaScript Bibliothek, die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten zur Verfügung stellt.

mode_edit Konzeptsite & Dokumentation

Wie immer im akademischen Kontext, sollten Sie Ihre Arbeit undIhr Vorgehen dokumentieren. Im Rahmen der WBA1 Challenge geht es nicht darum in alle Arbeitsschritte, Abwägungen und Entscheidungsprzesse in aller Ausführlichkeit zu beschreiben und zu erklären, aber folgende Punkte sollten festhalten:

Für die Konzeptsite

Hier geht es darum, Ihre Idee oder Ihr Feature möglichst prägnant, interessant und anschaulich zu erklären. Dabei sollten z.B. die folgenden Fragen beantwortet werden:

Ziehen Sie für die Konzeptsite alle Register: gute Grafiken, gute Texte, Filme, interaktive Elememte, etc.

Für die Dokumentation

Hier beschreiben Sie bitte kurz Ihr Vorgehen, die Aufteilung im Team, die größte Herausforderung und idealerweise den Grad Ihrer Zielerreichung, bzw. was noch verbessert werden könnte. Dokumentieren Sie bitte auch, was Sie an externen Tools, Bibliotheken und Codesnippets Sie verwendet haben. Wenn Sie noch Code in Branches haben, der nicht mehr in die finale Version integriert werden könnten, dann lassen uns das wissen. Beschreiben Sie kurz, welche Funktion der entsprechende Code übernehmen sollte und was zu seiner Implementierung noch fehlt.

Die Dokumentation darf knapp formuliert und in Stichworten sein.