aster.io – die URL war schon vergeben, den Projektnamen hab ich aber beibehalten – entstand als Hochschulprojekt aus der Idee, zu zeigen, dass wir schon mit den heutigen Möglichkeiten der Technik quasi überall zusammen spielen können, solange wir unser Handy dabeihaben.

Das Konzept des Spiels ist an den Klassiker asteroids angelehnt – man steuert ein Raumschiff und schießt. Anstelle von Asteroiden schießt man aber auf andere im Spiel befindliche Spieler, und man kann sein eigenes Schiff zeichnen. Das Spiel läuft in Echtzeit ab und ist rundenbasiert, alle paar Minuten endet die Runde und der Spieler mit den meisten Abschüssen gewinnt.

Das Handy als Controller

Das Spiel lässt sich zum einen ganz klassisch am PC im Browser spielen. Mit den Pfeiltasten steuert man sein selbst gemaltes Schiff, mit der Leertaste schießt man.

Viel interessanter ist aber die zweite Variante: Das Spielen via Smartphone. Dabei nutzt man das Smartphone nur als Controller. Man lässt das Spiel in einem Browser laufen, erstellt jedoch kein Schiff, benutzt den Browser also nur als Visualisierung des Spielgeschehens.

Mit Smartphones haben wir ein mächtiges Gerät fast immer dabei. Das eigene Smartphone wird in aster.io als Controller benutzt. Ein neuer Mitspieler besucht einfach die Internetseite asterio.space auf seinem Handy, und schon kann es losgehen. Man scribbelt sich ein kleines Raumschiff zurecht (oder eine schießende Suppentasse, oder einen Weihnachtsbaum, oder oder oder…), wählt eine Farbe und kann loslegen. Die Steuerung ist extra einfach gehalten: Auf der linken Hälfte des Displays beschleunigt man, auf der rechten Hälfte gibt man einen Schuss ab. Das Drehen des Smartphones rotiert das Schiff im Spiel.

Technik

Die Hauptkomponenten des Spiels sind nodejs, socket.io und paperjs. Via node läuft der Server, der das Spiel hostet und den Clienten mit Informationen und Resourcen versorgt. Socket.io ermöglicht einen performanten Informationsaustausch zwischen Server und verbundenen Clienten in Echtzeit (Bewegungen, Schießen, Scoreboard etc.), und mit paperjs werden die dynamischen Schiffe und Schüsse im Browser erstellt und gerendert. Auf dem Handy sorgt die GyroNorm Bibliothek von Doruk Eker für einen universalen Zugriff auf das Gyrometer des Smartphones.

Der animierte Sternenhintergrund ist übrigens mit einem statischen Bild und ein wenig CSS Magie gemacht. :-)

Rückmeldungen

Das ganze wurde am Rundgang der Hochschule für Bildende Künste Saar am Publikum getestet, und das Interesse der Besucher war durchaus geweckt. Die ungewöhnliche Steuerung war am Anfang gewöhnungsbedürftig, löste jedoch vor allem bei kleinen Besuchern Begeisterung aus. Die niedrige Einstiegsschwelle hat hier ebenfalls geholfen: Einfach die URL eingeben, und schon kann es losgehen. Man ist über das Internet mit dem Bildschirm direkt vor einem verbunden, wenn man sein Handy dreht, dreht sich auch das Schiff auf dem Bildschirm, quasi latenzfrei.

Kleinere technische Probleme gab es bei älteren Geräten, wo die Erkennung des Gyrosensors (Drehen des Smarthones) nur mit Verzögerungen und Rucklern funktionierten. Auch kam es bei vielen Spielern (>8) zu Rucklern auf Seite des Servers. Hier müsste mit stärkerer Hardware oder besserer Lastverteilung nachbessert werden. Dem Testlauf und Spielspaß tat das jedoch keinen Abbruch.

Fazit

Für mich ist aster.io ein gelungenes Experiment, in dem ich mich mit paperjs und socket.io auseinandergesetzt habe, um ein Spiel zu bauen, das man nicht nur am PC, sondern auch übers Smartphone steuern kann.

Ich finde das Potential hier sehr interessant, denn was hier im kleinen Rahmen (Monitor in einer Hochschule) gebaut wurde, kann ohne Probleme skaliert werden: So könnten Displays in der Stadt, an einer Wand, in einer U-Bahn-Station ein Spiel dieser Art laufen lassen, und Passanten oder wartende Passagiere können einfach mit ihrem Smartphone mitspielen. Meiner Meinung nach eine schöne Art, miteinander spielerisch in Kontakt zu kommen.

GitHub des Projektes: https://github.com/fmgrafikdesign/aster.io

Der Beitrag aster.io erschien zuerst auf Fabian Mohr - Grafik & Design.

Vorsicht, viel Text voraus! Dieser Artikel befasst sich mit der HBKapp, wie sie aufgebaut ist und was man damit alles anstellen kann (und was noch nicht). Downloaden könnt ihr die App für Android im Google Play Store bereits hier.

Ziel

Ziel des Projekts ist es, eine App zu erstellen, die das Leben an der HBK erleichtern soll. Sie fungiert als Enzyklopädie, Vorlesungsverzeichnis und ermöglicht das Speichern und Verwalten des Modulplans und favoritisierter Vorlesungen. Sie enthält außerdem alle aktuellen Termine des Semesters.

Ansprüche

Die HBKapp soll eine einfach zu bedienende, performante App sein. Sie soll für Android & Apple verfügbar sein, am besten mit einer gemeinsamen Codebasis, um Aufwand zu sparen. Die HBKapp darf das Smartphone / Tablet nicht verlangsamen oder die Lebensdauer einer Akkuladung merklich verkürzen.

Im Vordergrund steht die intuitive Nutzung der App durch den Nutzer. Eine einfache Navigation, in der alle Funktionalitäten der App von jeder Ansicht in höchstens zwei Schritten erreichbar sein sollen ist daher Pflicht. Ebenso die Verwendung von Best Practices wie Transitions, Navigation per “Back-Button” (wenn möglich / je nach Gerät) u.Ä..

Wichtig ist ebenfalls, dass Vorlesungen, Termine und Fragen stets aktuell sein sollen und ohne umständliche App-Updates aktualisiert werden können. Vorlesungen und Fragen sollen außerdem durchsuch- und sortierbar sein, in Echtzeit, d.h. ohne Wartezeit für den Nutzer. Offline-Verfügbarkeit ist ein weiterer wichtiges Feature, das die App erfüllen muss.

User Interface

Die Benutzeroberfläche der App besteht aus einer Titelleiste, einer Navigationsleiste und einem Fenster für Inhalte (Hauptfenster). Das Hauptfenster zeigt dabei die angeforderten Inhalte an, sie nimmt den meisten Platz ein.

Die Titelleiste zeigt den derzeitigen Standort innerhalb der App an und bietet kontextabhängig unterschiedliche Funktionen, wie z.B. “Zurück”, “Suchen” und “Favorit”.
Die Navigationsleiste besteht aus Tabs, mit denen man alle Kategorien der App erreichen kann (zurzeit: myHBK, FAQ, Infos zur App). Diese können noch um 1 bis 2 Tabs erweitert werden, ohne an Usability (= Nutzbarkeit, Einfachheit der Nutzung, angenehmes Nutzen) zu verlieren. So können auch im Nachhinein noch größere Features nahtlos in die App integriert werden, ohne die Navigation komplett erneuern zu müssen.

Funktionalität

Die App umfasst 4 Hauptfeatures, vollgepackt mit Funktionalität für den Nutzer. Diese 4 Features kann man unterteilen in Vorlesungen, Modulplan, Termine und FAQ.

Vorlesungen

Die HBKapp bietet einem die Möglichkeit, sich alle Vorlesungen des aktuellen Semesters anzuschauen. Man kann sie außerdem nach Datum oder Name sortieren, so dass man am Beginn eines neuen Semesters immer sehen kann, welche Vorlesungen neu dazu gekommen sind – ein deutlicher Vorteil gegenüber der Online Version des Vorlesungsverzeichnisses der HBKsaar.
Desweiteren kann man Vorlesungen nach Belieben filtern, d.h. nach Professoren, Titel, Stichwörtern oder sogar Uhrzeit. Als zusätzliches Features bietet die App es auch an, Vorlesungen als Favoriten zu markieren, um sie für später zu speichern. Alle Vorlesungen sind auch ohne Internetverbindung verfügbar.

Modulplan

Das Modulplan Feature der HBKapp ermöglicht es jedem Studenten, den Überblick über seinen Studienverlauf zu behalten. Man kann den eigenen Studiengang & angestrebten Abschluss wählen und sieht dann, welche Module es für den Abschluss zu erfüllen gilt. Außerdem kann man seine Vorlesungen in die einzelnen Module eintragen, um zu schauen, welche Module man dieses Semester mit welcher Vorlesung verknüpft. Zusätzlich kann man auch einzelne Module abhaken, um zu wissen, welche man bereits abgeschlossen hat, und welche es noch zu machen gilt. So kann man sein Semester planen und weiß immer, wie das eigene Studium verläuft.

Termine

Das Termine-Feature hält genau das, was der Name vermuten lässt: Eine Übersicht über alle wichtigen Termine der HBK des aktuellen Semesters. Man kann sich das Semester aussuchen, um auch vergangene Termine einzusehen und hat so immer eine Übersicht, wann der nächste Schnellentwurf oder natürlich die Semesterferien stattfinden.

FAQ

Die Frequently Answered Questions der HBKapp beantworten frequentiert beantwortete Fragen, die Studenten der HBK oft stellen. Sie stellen damit eine Wissenssammlung, vor allem für neue Studenten, da. Fragen nach dem korrekten Ausfüllen und Abgeben von Scheinen, wo man etwas findet und was genau die Zwischenprüfung ist werden hier beantwortet.
Sollte eine Frage nicht beantwortet sein, bietet sich die Möglichkeit, sie zu stellen, so dass sie bald beantwortet werden kann und den FAQ hinzugefügt werden kann.

Einstellungen & Infos zur App

Hier finden sich Infos über die App und verschiedene Einstellungsmöglichkeiten für den Nutzer. Zu den Infos gehört beispielsweise die aktuelle App-Version sowie Informationen über den Entwickler.

Die Einstellungsmöglichkeiten sind aktuell sehr begrenzt, aber bereits für zukünftige Erweiterungen eingeplant (siehe Pläne).

Technik

Framework

Die App arbeitet mit dem Ionic Frontend-Framework, welches wiederum auf AngularJS basiert. Ionic ist ein Framework zur Erstellung von Apps auf der Basis von HTML5, CSS und Javscript.
Mit Packaging Tools wie Cordova können diese für verschiedene Plattformen kompiliert werden, so dass man beispielsweise für Android und iOS eine gemeinsame Codebasis verwenden kann.

Offline-Funktionalität & On-The-Fly-Updates

Ein wichtiges Feature der App ist die volle Offline-Funktionalität, also das Erhalten des Funktionumfangs auch ohne Internetverbindung. Dies wird durch LocalStorage realisiert, also das Speichern von Daten auf dem Smartphone (im Gegensatz zum exklusiven Speichern in der Cloud). Gleichzeitig werden die Daten jedesmal aktualisiert, wenn sie abgerufen werden und eine aktive Internetverbindung vorhanden ist.

Die Daten, mit der die App gefüttert wird, stammen aus verschiedenen Quellen. Die Vorlesungen werden direkt aus der Datenbank der HBKsaar entnommen, für die App aufbereitet und dann als JSON-Datei übertragen. Die FAQ werden aus einem Google Spreadsheet als JSON exportiert und in die App eingefügt, was ein leichtes Aktualisieren der Daten in Echtzeit erlaubt.

Das Aktualisieren der Informationen (z.B. Vorlesungen, Termine und FAQ) geschieht dabei während der Laufzeit der App, so dass der Nutzer sofort sieht, wenn beispielsweise neue Vorlesungen dazu kommen, da diese dann ganz oben neu erscheinen. Diese Aktualisierung “On The Fly” spart ein Update der App über den Play/App Store und befreit den Nutzer damit von lästigen Updatemeldungen für einzelne Elemente.

Rückmeldungen

Ausgestellt wurde die App am Rundgang 2016 der HBK Saar. Auf einem Android Tablet konnten sich Interessierte mit der App und ihren Funktionen auseinandersetzen. Die Rückmeldungen waren dabei je nach Zielgruppe gelangweilt bis sehr positiv – was aber auch zu erwarten war: Reguläre Besucher des Rundgangs konnten der App nicht viel abgewinnen, da sie auf Studenten als Zielgruppe ausgerichtet ist. Studenten der HBK hingegen, besonders, aber nicht nur, Erstsemester dagegen, waren begeistert von den Möglichkeiten, die die App bietet.
Als besonders beeindruckend empfanden die meisten die Möglichkeit, alle Vorlesungen in Echtzeit sortieren und durchsuchen zu können, da dies bis jetzt (Stand: Januar 2016) auf der Homepage der HBK (www.hbksaar.de) nicht möglich ist.

Ebenfalls sehr praktisch fanden die Studenten den persönlichen Modulplan, der eine bessere Organisation und einen besseren Überblick über das Studium ermöglicht.

Pläne

Die App ist ausgereift genug für ein Release im Apple App Store und auf Google Play, aber es gibt dennoch noch einige Features, die die Funktionalität und User Experience noch verbessern könnten. Einige dieser Ideen seien an dieser Stelle aufgeführt.

Individuelle Farbauswahl

Eine individuelle Farbauswahl ist etwas, das bereits am Rundgang öfter als Frage bzw. Wunsch geäußert wurde, und technisch auch ohne größere Probleme umzusetzen ist. Im Moment gleicht die App mit ihrem Rot der Farbgebung der HBKsaar Website (www.hbksaar.de, Stand: Januar 2016), aber die individuelle farbliche Gestaltung der App zu erlauben ist eine durchaus logische Konsequenz für eine Hochschulapp, deren Nutzer so divers und individuell sind wie die Hochschule selbst.

Interaktive Map

Eine interaktive Map der Hochschule ist ein ambitioniertes Feature, welches leider nicht ohne größere Mühen (gut) umgesetzt werden kann. Der Nutzen des Features ist allerdings genauso hoch: FAQ verlinken, Gebäudepläne, eine durchsuchbare Map mit Innenräumen und Stockwerken, Personal und mehr könnten mit einer gut aufgebauten und bedienbaren Map abgedeckt werden.
Der Einbau einer interaktiven Map war ursprünglich auch vorgesehen und sollte mit Google Indoors Beta (https://www.google.com/maps/about/partners/indoormaps/) realisiert werden, jedoch meldete sich dort keiner auf Anfragen, so dass das Feature leider in den Hintergrund rückte.

FAQ erweitern

Die FAQ-Sektion der App ist bei Weitem noch nicht vollständig. Sie umfasst bereits Antworten zu zahlreichen Fragen, die eine Umfrage unter Studierenden an der HBK ergeben hat, jedoch gibt es zweifelsohne noch mehr Fragen, die sich (nicht nur) Studienanfänger öfter stellen. Dank der Technik hinter den FAQ ist es möglich, diese ohne viel Aufwand zu erweitern, so dass neue Fragen und Antworten jederzeit hinzugefügt werden können – Ziel ist ein möglichst umfassendes Nachschlagewerk zu nahezu allen Aspekten an der HBK.

Notifications

Ein wünschenswertes Feature für die App wären Local-/Pushnotifications, also Benachrichtigungen, bei bestimmten Ereignissen, z.B. anstehenden Schnellentwürfen, neuen Vorlesungen oder Ähnlichem. Dies scheiterte bis jetzt vor allem an den platformspezifischen Plugins, die geräteabhängige Features wie Kamera oder eben auch Notifications steuern. Eine funktionierende Lösung zu finden ist sehr wünschenswert, da Notifications über anstehende Termine die Organisation des Studiums natürlich noch einmal erleichtern.

Resultat & eigene Einschätzung

Ich denke, die HBKapp ist eine kleine aber feine App, die Studenten der HBK Saar in ihrem Studienalltag unterstützen kann. Die verhältnismäßig kleine Anzahl an Features wird durch deren Nutzen wettgemacht – es war nie das Ziel, eine überladene App zu machen, die am Ende keiner verwendet. Stattdessen sollte eine schnelle, übersichtliche App erschaffen werden, die ganz gezielt die gravierendsten “Probleme” im Studium eines Studenten der HBK lösen sollte (ein langsames Vorlesungsverzeichnis, keine Anlaufstelle für den eigenen Modulplan außer jedes Mal das Sekretariat und eine steile Lernkurve über Studienverlauf und Hochschulalltag).

Die überwältigend positive Resonanz der Studenten, die die App getestet haben bestärkt mich in dem Glauben, dass die App für Studierende der Hochschule eine große Hilfe sein kann und wird, und dass es die Arbeit mehr als Wert war. Auch Lehrbeauftragte und Professoren der Hochschule waren begeistert von den Möglichkeiten der App, insbesondere dem schnelleren Vorlesungsverzeichnis. Einige sprachen sich für einen Artikel auf der Homepage der HBK Saar aus, um die App noch bekannter zu machen. Auch das hat mich sehr gefreut und mir den Eindruck vermittelt, dass ich mit meinem Projekt HBKapp eine gute Idee ordentlich umgesetzt habe.

Ich freue mich wirklich und ehrlich über jeden, dem die App helfen kann, sei es durch einen persönlichen Modulplan, eine beantwortete Frage, nicht verpassten Termin oder schneller gefundene Vorlesung. Für mich war und ist das Projekt ein voller Erfolg.

Zum Abschluss einige Stimmen zur App:

“Warum hab ich diese App nicht früher schon gehabt?”
– Alexander Kopainski, Kommunikationsdesign

“Für einen unstrukturierten Studenten an einer unstrukturierten Hochschule das Allerbeste!”
– Ein anonymer unstrukturierter Student, Media Art & Design

Verweise

Ionic Framwork: http://ionicframework.com/
AngularJS: https://angularjs.org/
Apache Cordova: https://cordova.apache.org/

Der Beitrag Die HBKapp erschien zuerst auf Fabian Mohr - Grafik & Design.

Unser Kurs war natürlich erst einmal komplett platt. Weltfrieden? 90 Minuten lang? Durch eine Künstlerproduktion? Oder durch die Werbestrategie für eine Künstlerproduktion? Das kann ja heiter werden.

Erster Schritt: Ideen sammeln.

Als ersten Schritt sollte jeder der Kursteilnehmer sich 50 Ideen überlegen, wie man Weltfrieden erreichen kann. Die Aufgabenstellung stieß auf eine Mischung zwischen Ungläubigkeit und Trotz, ist Weltfrieden doch nun nicht das erste, was einem bei einer Werbestrategie in den Sinn kommt. 50 Ideen zu einem Schokoriegel wären vermutlich schwer genug, aber 50 Wege zum Weltfrieden? Half alles nichts. Nachdem uns unser Professor versicherte, dass es sich nur um Ideen handeln sollte und keine ausgearbeiteten Konzepte, und dass diese Ideen auch noch völlig kindisch und abgedreht sein durften, ließen wir unserer Kreativität freien Lauf.

Schokolade für den Weltfrieden – Sicherlich nicht die schlechteste Idee.

Ideen variierten dabei stark in Aufwand, Ausführbarkeit und sogar Plausibilität. Von Weltfrieden durch Alienbedrohung bis hin zu Weltfrieden durch mehr Toleranz war alles vertreten, welches dieser beiden Extreme wahrscheinlicher ist, sei an dieser Stelle offen gelassen. Nach dem Sammeln von 50 Ideen wurde ausgesiebt, die besten, stärksten und aussagekräftigsten Ideen wurden gesammelt und behalten, der Rest wurde ins Archiv verlagert, um sich zu gegebenem Zeitpunkt darüber lustig zu machen, was man doch für merkwürdige Einfälle zum Thema Weltfrieden hatte.

Jede Idee, die mit Hypnose zu tun hat ist eine gute Idee in meinem Buch.

Die übrigen Ideen wurden weiterverfolgt, wir machten uns Gedanken über Konzept, Gestaltung, Möglichkeiten zur Ausführungen und Ähnliches. Es wurde weiter ausgesiebt, so dass man weniger Ideen hatte, auf die man sich aber stärker konzentrieren konnte. Am Ende gab es bei mir von 50 anfänglichen Ideen noch eine, die ich weiter verfolgen wollte.

Idee Nr. 7: Der Knopf

Ein Knopf der Weltfrieden schafft! Die simpelsten Ideen sind doch immer noch die besten.

So simpel, so stark. Jeder sucht ihn, keiner hat ihn bisher gefunden. Der Knopf, der Weltfrieden schafft. Vielleicht liegt er irgendwo bei jemandem auf dem Dachboden? An dieser Grundidee knüpfte ich an und entwickelte ein Werbekonzept, das die gewünschten (aber nicht verpflichtenden) Kriterien der Redner erfüllen sollte. Wenn es über die Veranstaltung hinaus laufen könnte wäre das ganz nett, und nicht viel kosten sollte es, man ist ja Künstlergruppe, die haben, wie jedermann weiß, ja eh kein Geld. Über soziale Netzwerke verbreiten wäre super, so dass die Sache zu einem Selbstläufer wird. Zusammengefasst: Geplante Viralität zum kleinen Preis, das, was heute jeder will. Wie passt der Knopf da rein?

Ich will Frieden!

Wer ebenfalls Frieden will: Hier gehts zur Website

Eine simple Website, die jeder bedienen kann. Ein großer Knopf mit klarer Aufschrift. Ich will Frieden steht darauf geschrieben. Und eine Zahl, die anzeigt, wie oft sich Menschen bereits Frieden gewünscht haben, wie oft Menschen bereits auf den Knopf gedrückt haben. Leicht mitzumachen, leicht zu teilen und eine klare Botschaft. Die Website vereint alle Wünsche, die die Redner an ihre neue Werbestrategie gestellt haben. Außerdem können die Redner auf Knopfdruck einstellen, ob auf der Seite ein Link zu ihrer neuen Produktion ist, so dass sich interessierte Menschen mehr Infos über das Projekt beschaffen können und es somit an Bekanntheit gewinnt.

Sticker zur ersten Verbreitung (Link entspricht nicht tatsächlicher URL)

Die erste Verbreitung erfolgt durch durchsichtige Aufkleber mit der Aufschrift „Möchten Sie Weltfrieden?“ und dem Link zur Website (entspricht nicht der aktuellen, tatsächlichen URL), zusammen mit dem Knopf. Die leichte Bedienung der Website lädt zum Mitmachen ein, bei der Präsentation der Strategie in unserem Kurs waren viele am Handy damit beschäftigt, ihren Wunsch nach Frieden zum Ausdruck zu bringen. Zum Zeitpunkt dieses Artikels sind es über 7000 Wünsche für den Frieden, und die Zahl steigt weiter an. Die Redner können sich entscheiden, ob sie die Zahl an etwas koppeln möchten, oder ob sie Leuten, die sich besonders oft den Frieden wünschen anbieten, für den Frieden zu spenden oder sonstige gute Taten, die sie vollbringen können, anbieten möchten. Ich für den Moment freue mich über das gelungene Konzept und bin froh, dass ich mir nicht überlegen musste, wie ich die Waffenlobby hypnotisieren muss.

Link zur Produktion der Redner: http://www.die-redner.com/index.php?id=339

Link zu „Der Knopf“: http://peace.sni.pw:3001/

Der Beitrag Ein Knopf für den Weltfrieden erschien zuerst auf Fabian Mohr - Grafik & Design.