Grundlegend ist der Aufbau so, dass über ein Desktop-Backend eine Veranstaltung mit Kellnern, Produkten, Preisen und Bereichen erstellt werden kann. Mittels einer dazugehörigen App können Bestellungen über Services aufgenommen werden.

Für das Backend und die REST-Services wurde das PHP Framework Laravel in der Version 5 verwendet, bei der App handelt es sich um eine Windows Phone 8.1 App in C#. Der Prototyp wurde zum Maibaum aufstellen evaluiert. Hatte die App bereits einmal als JS/HTML angefangen und trotz den parsens zwischen C# und JSON fand ich, dass die C# Variante schneller zum gewünschten Resultat führte.

Zum Verständnis schildere ich folgend den kompletten durchgeführten Ablauf von der Erstellung eines Events bis zur tatsächlichen Bestellung. Da Kellner, Produkte und Stationen bei mehreren Events ident sein können, werden diese global angelegt, sodass diese mehreren Events zugewiesen werden können.

Person anlegen – Backend

Produkt erstellen und Kategorie zuweisen – Backend

Angelegte Stationen – Backend

Beim Event erstellen werden allgemeine Daten benötigt wie Titel und Datum, die Adresse, die Personen und Ihre zugewiesene Station (Kellner, Küche) und die Produkte mit dem Event abhängigen Preis.

Event erstellen – Backend

Bestellungen können ebenso über das Backend vorgenommen werden, da hier aber noch kein Mobiles Framework zum Einsatz kommt erschwert dies zurzeit noch die Eingabe.

Bestellung Starten – Backend

Bestellungen – Backend

Wurde ein Event erfolgreich erstellt, kann man sich als eingetragene Person und mit Event-ID in die dazugehörige App einloggen.

Login – App

Nach dem erfolgreichem Login wird man auf die Startseite navigiert, wo man entweder bei einer bereits getätigte Bestellung den Status ändern kann oder eine neue Bestellung aufnehmen.

Home – App

Bestellung Start – App

Bestellung Produkte – App

Bestellung Produkt Anzahl – App

Bestellung Abschluss – App

Verbesserungspotenzial gibt es bei der Bearbeitung einer Bestellung, hier ist geplant in der Produktliste die Anzahl und den Preis ebenso in die Übersicht zu schreiben.

Für den ersten großen Einsatz wird bereits an einer Tablet App entwickelt um die Bestellungen bspw. in der Küche digital anzuzeigen und als „Erledigt“ markieren zu können.

Fazit: Laravel ist ein sehr schönes PHP-Framework, es bietet jede Menge an Funktionalität und man findet auch genügend Hilfestellungen im Web (zurzeit noch vermehrt von der Version 4.1).

The post orderApp – Bestellsystem appeared first on Mobile USTP MKL.

Der Apple E-Mail Client “Mail” stellt hierfür mehr Templates zur Verfügung, diese werden jedoch in den meisten Fällen nur auf Apple Geräten richtig dargestellt.

Um dies etwas angenehmer zu gestalten habe ich ein Tool namens Litmus getestet, mit welchem das testen und tracken von E-Mails vereinfacht werden soll. Litmus kann 7 Tage kostenlos getestet werden, auch ohne Angabe einer Kreditkarte, hierzu reicht es wenn man einfach dem Team ein E-Mail schreibt.

Mit Litmus kann man in einem onlinebasierten Editor (Builder) E-Mail Templates coden, Ergebnisse werden einem zeitgleich nebenan im gewünschten Modus (Desktop, Mobile) angezeigt. Der Editor unterstützt Autovervollständigung und schlägt auch geeignete weitere Angaben wie Attribute etc. vor. Mittels vorher definierten Snippets können Codeelemente in mehreren Templates wieder verwendet werden.

Litmus Editor

Weitere nette Features beim coden sind das ein- bzw. ausblenden von Bildern, eine Grid-Ansicht und eine Versionierung mittels Timeline. Sowie stehen einem für den Start mehrere statische bzw. responsive Templates zur Verfügung.

Hat man sein Template fertig gestellt, kann man dieses testen. Hierzu werden bisher 38 verschiedene Clients angeboten. Ein Testdurchlauf mit allen Clients nimmt etwa 30min in Anspruch. Als Ergebnis bekommt man Grafiken der einzelnen Clients sowie clientspezifische Code Analyse. Eine einfache Checklist ist auch ohne Registrierung unter http://emailchecklist.org zu finden.

Litmus Code Analyse

Litmus Client Previews

Um die größten Fehler zu vermeiden ist der Guide von Campaign Monitor (https://www.campaignmonitor.com/css/) lesenswert. Für erste Versuche ist dieser jedenfalls ausreichend und wird kostenlos angeboten.

Zusätzlich kann ein Tracking-Code eingefügt werden, wodurch die Möglichkeit besteht wie bei vielen anderen E-Mail Providern (bspw. Cleverreach) die Klickrate und die Öffnungen zu messen. Litmus ist kein solcher E-Mail Provider sondern wie es sich selbst beschriebt: die perfekte Ergänzung zu E-Mail Providern wie MailChimp oder Campaign Monitor.

Nach einigen Test möchte ich noch erwähnen, dass die diversen Previews mit den realen Darstellungen der Clients bisher übereinstimmten.

Als Resultat kann ich Litmus jedenfalls empfehlen, besonders wenn man öfters verschiedene Newsletter generieren muss, da viel Zeit gespart werden kann.  Volle Funktionalität erhält man jedoch erst ab 120€ monatlich.

Hilfreiches Tool für Microsoft Outlook 2007: Outlook HTML and CSS Validator

The post Litmus – Test and track your emails appeared first on Mobile USTP MKL.

Für den ersten Einsatzzweck gibt es einige Themes, und Konfigurationen sind auch erstmal keine notwendig. Einstellungen wie Delays, einen Check beim Laden der Anwendung, etc. sind konfigurierbar. Auch XHR ist möglich.

Natürlich bieten moderne Browser nativ das Feature an, den Verbindungsstatus zu erkennen und können so bei Veränderungen ein Event starten und den User auf die Konnektivität seines Gerätes aufmerksam machen, hierzu müsste die Anwendung jedoch nativ entwickelt werden um das Feature zu nutzen.

Eine weitere Möglichkeit bietet das Attribut navigator.onLine im zukünftigen W3C-Standard (http://www.w3.org/TR/2011/WD-html5-20110525/offline.html#browser-state).

Offline.js eine sehr nützliche Library, welche aufgrund ihrer Größe von gerade mal 3KB Traffic bei bestimmt vielen Projekten Sinn macht.

Nun ein kleines Beispiel, welches je nachdem ob die Verbindung “up” or “down” ist, die Farbe des body-Tags ändert.

var status;
var output;
var changePlay;

Offline.options = {
    checkOnLoad: true,
    initialDelay: 3,
    requests: true
}

var run = function(){
    if (Offline.state === 'up') {
        Offline.check();
        status = 'on';
    } else if(Offline.state === 'down') {
        status = 'off';
    }
    changePlay();
}

$(document).ready(function(){
    changePlay = function() {
        if (status == 'on') {
            $('#site').css('background-color', '#FFF');
        } else {
            $('#site').css('background-color', '#000');
        }
    }
});
setInterval(run, 5000);

Links

• Homepage: http://github.hubspot.com/offline/docs/welcome
• Dokumentation: http://github.hubspot.com/offline

The post Offline.js appeared first on Mobile USTP MKL.

„We’re not designing pages, we’re designing systems of components.“ – Stephen Hay

Das Handwerk des Web Design ist einem ständigen Wandel unterlegen und es zeigt sich, dass ein Bedarf an umsichtigen Design Systemen, anstatt einfacher Sammlungen von Webseiten besteht.

In der Vergangenheit wurde schon einiges am Design Prozess geändert und viele Artikel über die Entwicklung von Design Systemen geschrieben. Der Fokus hierbei liegt auf der Entwicklung einer Grundlage für Farben, Typographie, Grids und Texturen. Das Problem daran ist, dass diese Komponenten subjektiv sind.

Auf der Suche nach Inspiration ist Brad Frost auf die Chemie gestoßen. Die kleinsten Elemente, die Grundlage für alles Leben sind, sind Atome. Diese Atome bilden zusammen Moleküle, die wiederum komplexe Organismen erschaffen. Das ist die Grundlage für Atomic Design.

Atomic Design bedeutet das methodische entwickeln eines Design Systems in 5 Leveln:

Atome
In der Chemie sind Atome die kleinsten Bestandteile. Sie können nicht verkleinert werden, ohne ihre Bedeutung zu verlieren. Übertragen auf Interfaces sind Atome Basis-Elemente wie Labels, Inputs, Buttons. Dazu gehören aber auch abstrakte Elemente wie Farben, Fonts und Animationen. Atome sind meist abstrakt und alleine nicht sinnvoll einsetzbar.

Moleküle
Aus chemischer Sicht sind Moleküle Verbände aus einzelnen Atomen welche durch den Zusammenschluss auch neue Eigenschaften haben. In Bezug auf Interfaces sind Moleküle einzelne Elemente, die gemeinsam eine Gruppe bilden und auch als solche funktionieren. Beispielweise bilden ein Label, ein Eingabefeld und ein Button eine Suche. Aus Atomen Moleküle zu formen ermutigt zu einer “do one thing and do it well”-Mentalität. Interface Patterns werden ein Mal perfekt entwickelt und können dann immer wieder verwendet werden.

Organismen
Organismen sind eine Gruppe von Molekülen und unter Umständen auch Atomen und bilden einen eindeutigen Bereich eines Interfaces. Organismen können sowohl aus gleichen als auch unterschiedlichen Molekülen bestehen. Ein Beispiel für einen Organismus aus unterschiedlichen Molekülen ist ein Header, welcher aus einem Logo, einer Navigation und einer Suche besteht. Eine Liste von Produkten angeordnet in einem Grid ist aber ebenfalls ein gutes Beispiel für einen Organismus. Dadurch entstehen eigenständige, portable und wiederverwendbare Komponenten.

Templates
Templates bestehen hauptsächlich aus Organismen und bilden so ganze Seiten. In diesem Level sieht man, wie die Organismen in Layouts angeordnet werden. Sie liefern den Kontext für die sonst so abstrakten Atome und Moleküle. In diesem Level kann auch der Kunde eingebunden werden. Üblicherweise wird hier auch mit dem Erstellen von HTML Wireframes begonnen.

Seiten
Seiten sind Instanzen von Templates. Platzhalter für Bilder, Texte, oder Ähnlichem werden durch echte Inhalte ersetzt. Seiten haben den höchsten Genauigkeitslevel. In diesem Schritt wird vor allem die Effektivität des Design Systems getestet, da alles im Kontext betrachtet werden kann. Passt etwas nicht, können Moleküle und Organismen angepasst werden.

Auf der beyondtellerand 2013 hat Brad Frost auch das Pattern Lab vorgestellt, welches dafür entwickelt wurde solche Design Systeme zu entwickeln.

Als Basis für die weitere Entwicklung der Patterns für Mobile-o-Poly wurde anhand der Screendesigns und der ersten Version des Spiels alle Komponenten in die drei Level Atome, Moleküle und Organismen eingeteilt.

Auf diesem Screen sind folgende Atome sichtbar:

• Icon
• Heading 1
• Paragraph
• Label
• Input Field
• Button

Daraus ergeben sich folgende Moleküle:

• Drop-Down Navigation
• Form

Dies wiederum ergibt einen speziellen Organismus:

• Title Bar

Alles zusammen bildet ein Template:

• Standard Template

The post Atomic Design für Mobile-o-Poly appeared first on Mobile USTP MKL.

Mobile-o-Poly soll komplett auf MVC umgestellt werden. Wireframing in drei Phasen zu unterteilen ist für solche Projekte besonders gut geeignet:

• Architektur
• Funktionalität
• Usability und Design

Architektur

Frontend: Ablauf
Backend: Models, Controller, API

Für die ersten Überlegungen reicht oft dieser Schritt. Arbeitet man mit Kunden, müssen diese oft sehr schnell das Budget für das anstehende Projekt erarbeiten. Als Entwickler möchte man größere Projekte in verschiedene Phasen unterteilen, im Team aufteilen und Zeitpläne erstellen. Im ersten Schritt werden alle Screens aufgezeichnet und mit Linien miteinander verbunden, um zu sehen wie der User sich durch das Projekt bewegt. Dies hilft zu sehen wie groß eine Applikation wird und vor allem auch dabei abzuschätzen, wie groß der Aufwand ist. In diesem Schritt können für die Programmierlogik auch Überlegungen zu Models, Controllern und APIs angestellt werden.

Funktionalität

Frontend: Screens, Layout, UI Elemente
Backend: Routen, Controller, Layout

In der zweiten Phase werden die Screens bereits detaillierter aufgezeichnet. Hier kann auch gleich der Weg des Users noch ein Mal überdacht werden. Gibt es unnötige Elemente oder Funktionen, die weggelassen werden können? Ab diesem Schritt können die Entwickler mit ihrer Arbeit beginnen. Es werden bereits Routen, Controller und Basis Layouts definiert.

Usability und Design

Frontend: Detaillierte Screens, Labels, UI Elemente
Backend: Layouts, Views

Jeder liebt „pixel-perfect“ Wireframes aber diese brauchen sehr viel Zeit. Und gerade am Anfang kann man die oft nicht aufbringen. Doch in den beiden vorigen Phasen wurden bereits die wichtigsten Dinge definiert und die Entwickler haben mit der Arbeit begonnen. Somit kann man sich in diesem Schritt auf das “Look and Feel” der Applikation konzentrieren. Außerdem kann man hier auch über bereits definierte Controller, Daten-Modelle und Layouts iterieren.

Fazit

Wichtig ist es nicht zu vergessen, dass jeder einzelne Schritt auch Iterationen beinhaltet. Dinge, die in einem vorigen Schritt definiert wurden sollten immer wieder hinterfragt werden. Am Ende dieses Wireframing-Prozesses erhält man einen klaren Plan, der durch das gesamte Projekt führt, klare Richtlinien für die Entwickler so wie Richtlinien für die Designer. Jedes Teammitglied hat so auch besser die Chance zu verstehen in welche Richtung die Applikation geht, wie sie funktionieren wird und wie die einzelnen Komponenten miteinander interagieren.

The post Wireframing in 3 Phasen appeared first on Mobile USTP MKL.

Daher haben wir uns am 13. November im Zuge eines Open Space Tages zusammengesetzt, um die weitere Vorgehensweise zu besprechen. Am grundlegenden Spielprinzip soll nichts verändert werden. Allerdings haben wir einige wenige Features gestrichen und auf die nächste Entwicklungsphase verschoben. Die gröbsten Änderungen betreffen die Technologien, die wir verwenden werden.

Backend

Als Servertechnologie soll in Zukunft mit C#, der bekannten Programmiersprache aus dem Hause Microsoft, gearbeitet werden. Im Zuge dessen ist die Umstellung von einem Linux-Server auf einen Windows-Server notwendig. Um Aufwände, die die Datenbankschicht betreffen zu verringern, wird nach dem Code First Prinzip des Entity Framework von Microsoft gearbeitet.

Entity Framework ist ein objekt-relationaler Mapper der es .NET Entwicklern ermöglicht, relationale Daten mit domain-spezifischen Objekten zu verwenden. Dadurch müssen Entwickler weniger Code produzieren, um auf Daten zugreifen zu können.

Ein weiterer wichtiger Punkt liegt bei der Simulation von Abläufen. Hierfür soll in Zukunft ebenfalls eine Lösung gefunden werden.

Frontend

Das bestehende CSS wird komplett neu als modulares CSS unter Verwendung der CSS Erweiterung SASS aufgebaut. Die CSS Architektur soll den Richtlinien von BEM, SMACSS und OOCS erfolgen. Ziel ist die Erstellung eines Mobile First und responsive Framework, das wichtige Module enthält, die auch für zukünftige Projekte verwendet werden können.

Weiters werden für das Frontend Angular JS, Leaflet sowie Bing, Offline JS und Underscore eingesetzt.

Durch diese Umstellungen sollen vor allem die Performance und Genauigkeit des Spiels stark verbessert werden.

Ausblick

Im nächsten Jahr stehen auch tiefgreifendere Veränderungen auf dem Programm. Geplant ist eine Indoor-Variante, bei der es möglich ist, in großen Gebäuden Räume zu erwerben.

The post Mobile-o-Poly Refactoring appeared first on Mobile USTP MKL.