FHG Online

Online-Schulplaner für das Franz-Haniel-Gymnasium

Bereits in der 9. Klasse wollte ich beim Erlernen verschiedener Skriptsprachen und Web Development Frameworks nicht nur bei den simplen Beispielprojekten bleiben, sondern meine neuen Fähigkeiten an echten Projekten erproben. Deshalb arbeitete ich nebenbei immer wieder an diesem Übungs-Projekt, das mir und anderen den Alltag vereinfachen sollte.

Projekt Details

Leistungen Konzeption, UI/UX & Logo Design, Web Development
Tools Adobe Illustrator, Adobe Photoshop, Adobe XD, Adobe InDesign, Angular
Jahr 2017 – 2020
Code GitHub/dennis-adamczyk/fhg-online
Vorschau beta.fhg-online.de

Idee

Die Idee

Das Problem

Die erste Idee zu dem Projekt entstand in der neunten Klasse 2017 als ich mir die Grundlagen der Webentwicklung (HTML, CSS, PHP, MySQL) beigebracht habe und ich ein Website mit einem konkreten Zweck programmieren wollte. Ich habe mit also überlegt, welche Proble ich selbst oder meine Mitmenschen haben, das sich einfach lösen lässt.

Nachdem ich auf mein Handy blickte und wieder duzende Nachrichten von meiner Klassengruppe erhalten habe, die allesamt nur davon handelten, welche Hausaufgaben aufgegeben wurden, traf mich die Idee wie ein Blitzschlag. „Es muss doch einen einfacheren Weg geben, sich über die aktuellen Hausaufgaben auszutauschen, als immer so viele Nachrichten kreuz und quer lesen und senden zu müssen“, dachte ich.

Die Lösung

Für mich stand der Gegenstand meines neuen Projekts also sofort fest. Ich möchte ein gemeinsames Hausaufgabenheft zu Verfügung stellen, auf dem jeder sofort alle Aufgaben ablesen kann und nur ein einziger Beauftragter diese direkt nach jeder Unterrichtsstunde eintragen muss. So wie bei dem analogen Schulplaner ergänzte ich auch schnell eine Termin- und Stundenplan-Funktion, die nach demselben Prinzip funktionieren.

Nach einigen Wochen der Programmierung war die Progressive Web App FHG9A dann fertiggestellt. Ich präsentierte sie meiner Klasse und erhielt viel Zuspruch. Die Website ließ sich einfach herunterladen und leicht bedienen. Nach der 9. Klasse startete allerdings die Oberstufe, für die das System leider nicht ausgelegt war. Das bedeutete bereits nach knapp einem Jahr das Ende der Website.

Weiterführung

Die Weiterführung

Bewährte Konzepte neu erfinden

Ein halbes Jahr später haben Schüler aus den jüngeren Schulstufen von der ehemaligen Schulplaner-App erfahren und mich des öfteren dazu aufgefordert, die App auch für sie verfügbar zu machen. Weil ich in der Zwischenzeit allerdings viel Neues gelernt habe, entschied ich mich dazu die App von Grund auf mit dem Framework „Angular“, das ich zu der Zeit erlernt habe, unter dem Namen „FHG Online“ neu zu entwickeln.

Dienste und Tools, die die neue FHG Online App verwendet

Konzept

Das Konzept

Ein halbes Jahr später haben Schüler aus den jüngeren Schulstufen von der ehemaligen Schulplaner-App erfahren und mich des öfteren dazu aufgefordert, die App auch für sie verfügbar zu machen. Weil ich in der Zwischenzeit allerdings viel Neues gelernt habe, entschied ich mich dazu die App von Grund auf mit dem Framework „Angular“, das ich zu der Zeit erlernt habe, unter dem Namen „FHG Online“ neu zu entwickeln.

Hausaufgaben

Schüler oder Lehrer trägt eine Hausaufgabe für ein Fach ein

Andere Schüler lesen diese Hausaufgabe

Nach Bearbeitung wird Hausaufgabe als erledigt markiert

Es handelt sich um Spam

Hausaufgabe wird von Schülern gemeldet

Admin bestätigt die Meldung und sanktioniert den Spammer

Hausaufgabe ist falsch

Korrekturvorschlag einreichen, der anderen angezeigt wird

Jeder Schüler bestätigt die richtige Version

Stundenplan

Schüler tragen den Stundenplan ein

Mehrheit der Schüler müssen Änderungen bestätigen

Lehrer oder Admin trägt seine Stunden ein

Neuer Stundenplan wird für alle angezeigt

Entwicklungsstadien

01

Closed Alpha

Ab dem 17. April 2019 befand sich die App in der ersten Neuprogrammierungsphase, die nur für das Entwicklerteam zugänglich war.

02

Closed Beta

Seit dem 19. September 2019 wird die App in einer sechsten Klasse getestet, sodass wir Fehler und Vorschläge gemeldet bekommen. Die Kalender-Funktion ist zu diesem Zeitpunkt noch nicht vorhanden.

03

Open Beta

Die offene Beta-Version soll 2020 mit insgesamt 10 Klassen der fünften und sechsten Stufe erfolgen.

Zielgruppe

Die Zielgruppe

Primäre Zielgruppe

Die Schüler des Franz-Haniel-Gymnasiums sollen die App ohne Eingriffe von anderen (z. B. Lehrern) eigenständig nutzen können und so auch die Klassen-/Stufengemeinschaft stärken. Umfragen und Meldesysteme sorgen dennoch für Sicherheit bei dem angezeigten Daten.

Sekundäre Zielgruppe

In dem System spielen die Lehrer des Franz-Haniel-Gymnasiums eine sekundäre Rolle, weil sie nicht verpflichtet sein sollen die App zu nutzen. Trotzdem geben wir ihnen die Möglichkeit, mit der App ihren Unterricht zu planen und ihre Schüler über die App ggf. zu sanktionieren – besonders Klassenlehrer.

Design

Das Design

User Interface

Nutzung des Material Designs

  • Schnelle Verständlichkeit
  • Gute User Experience
  • Für junge Zielgruppe geeignet

Divider

List

Badge

App Bar

Icon Button

Card

Checkbox

Floating Action Button

Responsive Design

  • Schüler nutzen Smartphone WebApp
  • Lehrer nutzen Website auf Tablets oder PC

Farben

Primärfarbe

Indigo50

#E8EAF6

100

#C5CAE9

200

#9FA8DA

Beim dunklen Modus

300

#7986CB

400

#5C6BC0

500

#3F51B5

Beim hellen Modus

600

#3949AB

700

#303F9F

800

#283593

900

#1A237E

Material Design Palette

Red 500

Pink 500

Purple 500

Deep Purple 500

Indigo 500

Blue 500

Light Blue 500

Cyan 500

Teal 500

Green 500

Light Green 500

Lime 500

Yellow 500

Amber 500

Orange 500

Deep Orange 500

Brown 500

Gray 500

Blue Gray 500

Black

Nutzung aller Farben als Repräsentierung der einzelnen Schulfächer

Typografie

Auch bei der Typografie greifen wir auf das Material Design zurück. Roboto ist die simple, von Google entwickelte Standard Schriftart. Sie ist in Apps und Websites gut leserlich und deshalb bestens geeignet. Für Webezwecke nutzen wir eher Montserrat, da sie sehr breit und offen ist. Das macht sie für fremde ansprechender und leserlicher.

Roboto

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ää Öö Üü ß , . ! ? / 0 1 2 3 4 5 6 7 8 9

Montserrat

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ää Öö Üü ß , . ! ? / 0 1 2 3 4 5 6 7 8 9

Website besuchen

Ergebnis

Das Ergebnis

FHG9A 2017 – 2018

FHG Online seit 2019