AJAX, JSON, Canvas und Co.

Nachdem ich die letzten zwei Wochen intensiv ohne nennenswerter Frischluft-Erfahrung an der Umsetzung meines Prototypen gearbeitet habe, wird es Zeit einen kurzen Lagebericht abzugeben.

Im Grunde steht nun ca. 80 Prozent der Funktionalität von SketchCoLab – der Rest soll dann bis Anfang nächster Woche erledigt sein.

Splashscreen SketchCoLab

Splashscreen SketchCoLab

Zum Überblick hier eine kleine Feature-Liste getrennt nach wichtigen Aspekten des Prototypen:

1. Allgemein

  • Login-Bereich
  • Logout-Funktion
  • Splashscreen

1. Bewerten von Zeichnungen (im speziellen Fall: Icons)

  • Projektwahl (aus welchem Projekt möchte der Nutzer Zeichnungen überarbeiten und bewerten)
  • Anzeigen der jeweiligen Zeichnungen eines Projektes
  • Wahl und Anzeige der Zeichnungen
  • Anzeige der bisherigen durchschnittlichen Gesamtbewertung als Sterne und des Bewertungstextes der gewählten Zeichnung
  • Anzeige der vorhandenen Kommentare zu einer Bewertung
  • Anzeige der vorhandenen überarbeiteten Versionen eines Bildes (Annotationen)
  • Formular für Abgabe einer Bewertung in Form von Sternchen + Bewertungstexts
  • Formular für Abgabe eines Kommentars zu einer Bewertung

2. Überarbeiten von Zeichnungen (kleines Malprogramm)

  • Annotation bzw. Bild laden
  • Annotation speichern
  • Freiform-Stift
  • Radierer
  • Rückgängig und Wiederholen von Arbeitsschritten
  • Arbeitsfläche löschen
  • Werkzeug-Optionen wie  Pinselgröße und Farbe
  • bisher leider noch nicht realisiert: Textbox

Das Problem mit der Textbox gestaltet sich schwierig, da Canvas (HTML5) zwar das Platzieren von Text auf der Leinwand ermöglicht, allerdings nicht das Bewegen von solchen Textelementen. Lösungsansätze sind rar und wenn dann, wenig brauchbar. Allerdings hat mir Vassilis den Tipp gegeben, dass Ganze über DIV-Layer die über dem Canvas platziert werden zu lösen. Deren Koordinaten bzw. die Style-Angaben werden dann in der Datenbank abgelegt werden, sobald das Canvas gespeichert wird. Ein Ansatz, den ich in Kürze mal näher verfolgen werden. Sofern der Aufwand vertretbar, wird es dann evtl. dann doch noch was mit den Textboxen.

Hier noch ein kleiner Screen vom Malprogramm – noch nichts gestyled, aber funktionsfähig:

SketchCoLab - Überarbeitungsfunktionen

SketchCoLab - Überarbeitungsfunktionen

3. Kommunikation und Awareness

  • kleiner AJAX-Chat zur Kommunikationförderung (optional – soll heißen, ich weiß noch nicht, ob dieser auch eingesetzt werden soll)
  • Anzeige wer welche Annotationen wann gemacht hat
  • Anzeige wer welche Kommentare wann gemacht hat
  • Anzeige wer eine Zeichnung bewertet hat und wann
  • Anzeige im Chat welcher User gerade was geschrieben hat

4. Weitere geplante Funktionen

Sofern es zeitlich noch hinhaut, möchte ich noch folgendes implementieren:

  • Möglichkeit auch Annotationen einer Zeichnung bewerten bzw. kommentieren zu können (wird wahrscheinlich eher nicht realisiert werden)
  • eigene Annotationen überarbeiten (das ist eigentlich bereits weitestgehend möglich und sollte höchstwahrscheinlich auch den Weg in die Anwendung finden)
  • ständige Aktualisierung der Inhalte innerhalb der Anwendung, damit Nutzer gleich sehen können, wenn es neue Annotationen, Bewertungen oder Kommentare gibt (die Funktionalität steht im Prinzip schon, führt jedoch dafür in anderen Bereichen zu Problemen bzw. bedarf weiterführender Lösungen)

Posted in | Tagged , , , , , , | Leave a response

Die Schrift der Wahl: Roboto

Ein wichtiger Bestandteil der Gestaltung ist die Typografie. Deshalb machte ich mich auf die Suche nach einer geeigneten Schrift für den Einsatz in meinem Prototyp.

Der Anspruch war eine Schrift zu finden, die sich vor allem für die Darstellung auf mobilen Geräten eignet. Da der Prototyp eine Web-Applikation sein soll und demnach auf die Möglichkeiten des Browsers angewiesen ist, schränkt dies die Auswahl zunächst einmal ein. Aber Gott sei Dank gibt es ja Webfonts und z. B. Google. Damit ist es möglich Schriften per CSS einzubinden, die der Nutzer nicht zwangsläufig auf seinem System installiert haben muss.

Nach ein wenig Recherche hab ich mich nun für die ROBOTO entschieden. Sie ist sozusagen der Nachfolger der DROID SANS, welche die Standardschrift des Android-Betriebssystems darstellt und sich für den Einsatz auf mobilen Geräten bewährt hat. Die ROBOTO ist “brandneu” und kommt in der neuen Version von Android (Ice Cream Sandwich) zum Einsatz. Sie wurde entsprechend für die Darstellung auf Mobilgeräten weiterentwickelt, ist platzsparend und wurde auch für höhere Auflösungen optimiert, die bei Smartphones und Tablet Computern immer mehr zum Standard werden. Auch an die Verbesserung der Lesbarkeit bei längeren Texten wurde gefeilt. Ebenfalls positiv: Die ROBOTO bietet zahlreiche Schriftschnitte zur Auswahl.

Hier die Schriftart in verschiedenen Schnitten (Auswahl):

Schriftart ROBOTO

Posted in , | Tagged , , , , | Leave a response

Prototyp-Konzept V 1.0

Nachdem ich im Blogeintrag Vorbereitung zum Prototyp-Konzept mir einige Gedanken über möglich Features und Funktionen von SketchCoLab gemacht hatte, wird es nun konkreter.

Zunächst habe ich die Funktionalität weiter verschlankt und versucht auf das Wesentliche zu reduzieren. Die Erfahrung zeigt, dass man zu Beginn der Überlegungen meist zu viele Features hineinpacken möchte – dabei sollte die Devise eher “Keep it simple” lauten. Ich bin mir aber fast sicher, dass derzeitige Stand auch noch zu viel an Funktionen beinhaltet, deren Umfang man einfach auch hinsichtlich der Umsetzung zeitlich nicht schaffen kann. Wir werden sehen…

Die nachfolgende Abbildung zeigt schon mal grob das Konzept der Anwendung, wobei das sicherlich noch nicht als endgültige Version zu sehen ist. Aber man sieht zumindest, wohin die Reise gehen soll.

Prototypkonzept SketchCoLab V. 1.0

Und hier noch ein Wireframe zur weiteren Veranschaulichung.

Prototypkonzept Version 1.0 - Wireframe

Die Funktionen von SketchCoLab gliedern sich in vier Bereiche, die ich kurz erklären möchte:

1. Überarbeiten

Ein zentraler Aspekt der Anwendung wird das Überarbeiten von Zeichnungen sein. Im Prinzip sind aber auch Bilder, Fotos oder Interfaces möglich. Die Überarbeitung soll dabei durch Möglichkeiten der Annotation erfolgen. Das bedeutet Nutzer können synchron bzw. asynchron eine Zeichnung annotieren und mit Hinweisen, Markierungen, Texten, Pfeilen oder auch neuen Zeichnungen versehen.

2. Bewerten

Weiterer wichtiger Punkt ist die Bewertung von Zeichnungen. Durch die Überarbeitung in Form von Annotation ist ja bereits eine Art der Bewertung möglich. So können Nutzer durch Worte oder Symbole (z. B. Smiley) ihre Meinung und Wertung ausdrücken. Ein weitere Bewertungsmöglichkeit stellen die “Tags” dar. Diese können jeweils für positive oder negative Aspekte der Zeichnung vergeben werden und erlauben somit eine “bewertende Verschlagwortung”. Weitere Formen der Bewertung sollen durch Kommentare bzw. Textboxen möglich sein.  Evtl. auch noch das bekannte “Rating” in Form z. B. von Sternchen – da bin ich mir aber noch nicht sicher.

Details oder Komplett

SketchCoLab soll dabei den Anwendern ermöglichen, wahlweise auf bestimmte Details innerhalb einer Zeichnung oder auch für die gesamte Zeichnung eine Überarbeitung oder Bewertung vorzunehmen. Für Details können Marker gesetzt werden z. B. in Form von Stecknadeln, damit bestimmte Aktionen der Nutzer Bezug zu dem entsprechen bearbeiteten Detail haben.

3. Kollaboration und Kooperation

Die gemeinsame Zusammenarbeit im Team soll durch mehrere Komponenten innerhalb der Anwendung unterstützt werden:

Datenbasis

Die Teams sollen innerhalb von SketchCoLab Zugang zu bestimmten Projekten haben, die wiederum verschiedene Zeichnungen enthalten. Wobei die Nutzer- bzw. Teamverwaltung weniger im Blickpunkt der Anwendung steht, wie auch die Projektverwaltung. Im Prinzip wird es als Datenbasis eine Reihe von Zeichnungen geben, die bewertet und überarbeitet werden können. Ob die Implementierung eines Logins, der die Mitglieder eines Teams identifiziert und somit nur für entsprechende Projekte (und Zeichnungen) freischaltet, Sinn macht bzw. zeitlich noch umgesetzt werden kann, bleibt abzuwarten.

Kommunikation

Die Kommunikation unter den Anwendern soll vor allem durch das Chatwerkzeug, aber auch durch Kommentare ermöglicht werden. Audio- oder Videokonferenz wären zwar denkbar, könnten jedoch meiner Meinung nach unübersichtlich werden, wenn eine größere Anzahl von Nutzern beteiligt ist. Ein Chat dagegen ist relativ einfach umzusetzen und ermöglicht zumindest ansatzweise eine schnelle und direkte Kommunikation. Eine Face-to-Face Konversation ist damit natürlich ersetzbar, aber immerhin.

Sharing

Das asynchrone “Teilen” der überarbeiteten bzw. bewerteten Bilder z. B. in dem ein Export des aktuellen Stands der Bilder stattfindet, wird weniger im Vordergrund stehen, so der bisherige Stand meiner Überlegungen. Vielmehr soll alles auf dem Server gespeichert werden und dann immer abrufbar sein. Wobei eine Exportmöglichkeit sicherlich nicht schlecht wäre, allerdings müsste man dann sehen, WAS alles exportiert werden kann. Da die Bilder neben den Annotationen ja auch dazugehörige Kommentare und weitere Informationen haben können, würde der Export etwas umfangreicher sein müssen.

Arbeitsbereich

Im Konzept ist es so angedacht, dass man primär einen gemeinsamen Arbeitsbereich hat, damit man sieht, was sich derzeit tut und welche Aktionen von wem getätigt werden. Allerdings bin ich der Meinung, dass dem Nutzer eine Wahl gegeben werden muss, ob er nicht doch zeitweise in einem eigenen Arbeitsbereich tätig sein möchte, damit sich der Anwender bei Bedarf ganz auf seine Interaktionen konzentrieren kann.

Awareness

Für den Bereich der Awareness sind vornehmlich Funktionen für die User-Awareness, also welcher User ist gerade online (dargestellt durch Farben und Namen) sowie für die Workspace-Awareness geplant – Von WEM stammen WELCHE Aktivitäten, WER hat WAS modifiziert, etc.

Versionsmanagement

Als zusätzliche Features bzw. als Bonus hatte ich mir gedacht, so eine Art Timeline zu integrieren, mit der man sozusagen die Historie einer Überarbeitung bzw. Bewertung einer Zeichnung noch einmal nachvollziehen kann. Weiterer Gedanke war die Möglichkeit, verschiedene Versionen einer überarbeiteten und bewerteten Zeichnung speichern und miteinander vergleichen zu können.

 4. Workflow

Einige für den Arbeitsablauf wichtige Funktionen habe ich mir ebenfalls überlegt. Das betrifft solche Aktionen wie z. B. Zoomen und Verschieben (der Arbeitsfläche oder einzelner Elemente). Evtl. kommen im Laufe des Konzeptions- und Umsetzungsprozess weitere wichtige Features dazu.

Posted in , | Tagged , , , | Leave a response

Vorbereitung zum Prototyp-Konzept

Nach dem weitestgehenden Abschluss des Theorie-Teils befinde ich mich seit dieser Woche in der Konzeptionsphase als Vorbereitung für die Umsetzung meines Prototypen.

Schon während meiner Recherche zu den theoretischen Hintergründen bin ich hier und da auf inspirierende und interessanten Ideen und Projekte gestoßen. Erweitert habe ich diese Inspirationen mit einem kleinen Benchmarking in Bezug auf mögliche Überarbeitungs- und Bewertungsansätze. Herausgekommen sind nun eine ganze Reihe möglicher Features und Funktionen, die ich als Vorstufe zum eigentlichen Prototyp-Konzept in einer Mind-Map zusammengefasst habe.

Mind-Map - mögliche Features von SketchCoLab

Momentan befassen sich meine Überlegungen nun mit der Reduzierung der Funktionalität auf das Wesentliche und der Erarbeitung eines konkreten Gesamtkonzepts für meinen Prototypen. Soll heißen:

  • welche Funktionen beinhaltet der Prototyp allgemein bzw. in Bezug auf die Überarbeitung und die Bewertung von Zeichnungen
  • welche Möglichkeiten der Kollaboration und Kooperation werden implementiert
  • wie sehen mögliche Anwendungsabläufe aus
  • ist ein spielbasierter Ansatz sinnvoll bzw. realisierbar

In Kürze sollten diese Fragen geklärt sein und das Prototyp-Konzept stehen.

Posted in , | Tagged , , , , | 1 Response

Theorie Part #3: Tablet PCs, Tablet Computer und Multitouchtechnologie

Der interaktive Prototyp SketchCoLab soll eine Applikation zur Verwendung auf mobilen Geräten werden. Ausgehend von dieser Prämisse stellen die seit kurzer Zeit immer populärer werdenden “Tablets” wie beispielsweise das iPad eine interessante Möglichkeit dar. Ein wichtiger Grund sich also mit dieser neuartigen Geräteklasse näher zu beschäftigen.

Gleich zu Beginn meiner Recherche zeigte sich, das Tablet PCs, Tablet Computer oder andere Begriffe wie Pads, etc. nicht zwangsläufig das Gleiche sind. Daher galt es zunächst die Unterschiede herauszuarbeiten und sich darüber bewusst zu werden, was eigentlich Merkmale von Tablet PCs und Tablet Computern sind. Nachfolgende Abbildung verdeutlicht dies.

Merkmale von TabletPCs und TabletComputern

Als nächsten Schritt betrachtete ich die Interaktionsmöglichkeiten von Tablet Computern näher und habe mir einen kleinen Überblick über die zugrunde liegende (Multi)Touchtechnologie verschafft. Interessant dabei, sowohl die Geschichte der Tablet PCs und Tablet Computer, als auch der Touchscreens ist keineswegs eine kurze bzw. sehr neue Geschichte. Als Beispiel zeigt die nachfolgende Abbildung in kompakter Form die Geschichte der Tablet PCs und Tablet Computer und lässt erkennen, dass der erste Prototyp bereits vor über 40 Jahren entstanden ist.

Historie TabletPCs und TabletComputer

Posted in | Tagged , , , , , | Leave a response

Theorie Part #2: E-Kollaboration und E-Kooperation / CSCW

Ausgehend von meinen erworbenen Erkenntnissen zum Thema Kollaboration und Kooperation, erweiterte ich die Betrachtung auf die Begriffe E-Kollaboration und E-Kooperation.

Zentrale Punkte dabei, welche Unterschiede gibt es und vor allem welche Konsequenzen hat die Übertragung der Kollaboration und Kooperation in den virtuellen bzw. digitalen Raum. Folgende Abbildung zeigt dabei die Chancen, aber auch Probleme die E-Kollaboration und E-Kooperation vor allem bezüglich des wichtigen Kommunikationsaspekts auszeichnet (Auszug aus Kapitel E-Kollaboration und E-Kooperation).

Chancen und Probleme von E-Kollaboration bzw. E-Kooperation

Die Betrachtung des Themas E-Kollaboration und E-Kooperation ist dabei gleichzusetzen mit dem Begriff CSCW (= Computersupported Collaborative Work bzw. Computersupported Cooperative Work). Der in meiner Arbeit enstehende interaktive Prototyp kann dabei als CSCW-System oder auch Groupware klassifiziert werden. Ein System also, dass die virtuelle Zusammenarbeit in kollaborativer bzw. kooperativer Form unterstützt.

Ein weiterer wichtiger Gedanke der bei der Entwicklung von CSCW-Systemen eine Rolle spielt, ist der Punkt der “Awareness”. Damit ist das “Bewusstsein” über andere beteiligten Personen und deren Handlungen in einer Zusammenarbeit gemeint. Wie ich im Zuge der Aufarbeitung des Theorieteils für mich herausfiltern konnte, ist die “Awareness” – von denen es verschiedene Formen gibt – ein zentraler Bestandteil, den es bei der Konzeption und Umsetzung des Prototyps zu beachten gilt.

Posted in | Tagged , , , , , , , , , | Leave a response

Theorie Part #1: Kollaboration und Kooperation

In den letzten Wochen habe ich mich primär dem theoretischen Teil meiner Arbeit gewidmet und diesen nun soweit abgeschlossen.

Wichtige Aspekte waren dabei neben den Grundlagen zur Multitouch-Technologie und Tablet Computern, vor allem das Verständnis für die Themen Kollaboration und Kooperation. Ein weiterer Punkt war die Betrachtung von relevanten und möglichen Ansätzen zur Überarbeitung und Bewertung von Zeichnungen für den interaktiven Prototyp.

Was ist eigentlich Kollaboration und Kooperation?
Ich konnte einige wichtige Erkenntnisse erarbeiten, was Kollaboration und Kooperation angeht (Ausschnitt des Kapitels Theoretische Grundlagen – Kollaboration und Kooperation). Oft werden diese beiden Begriffe ja gleichgesetzt – dass es jedoch Unterschiede gibt hat sich bei meinen Recherchearbeiten schnell gezeigt. Obwohl es diese Unterschiede gibt, verschwimmen in der Praxis oft die Grenzen bezüglich Kollaboration und Kooperation. Dies wurde mir klar, als ich mir bewusst machen wollte, welche kollbaborativen und kooperativen Features innerhalb meines Prototyps denn denkbar wären.

Dazu hat ich im Zuge meines theoretischen Teils eine Abbildung erstellt, die zumindest die allgemeine Abgrenzung zwischen Kollaboration und Kooperation verdeutlichen soll. Dabei zeigt sich, dass sich Kollaboration und Kooperation vor allem hinsichtlich des Grads der Zusammenarbeit, sowie der Aufgabenteilung unterscheiden.

Unterschied zwischen Kollaboration und Kooperation

Posted in | Tagged , , | Leave a response

And the winner is…

Wie in einem früheren Blogeintrag Die liebe Technik – HTML5 vs. Flash schon erwähnt, stellt sich bei der Umsetzung des Prototypen die Frage mit welcher Technologie das geschehen kann und soll. Zur näheren Auswahl stehen HTML5 mit jQuery Mobile und ggf. PHP / MySQL, sowie Flash (als AIR-Anwendung).

Nach einer ausgiebigen Recherche zu den Vor- und Nachteilen der jeweiligen Technologien war ich leider immer noch nicht weiter was die Entscheidung bezüglich einer Umsetzungsmethode angeht. Im Prinzip ist das zum jetzigen Zeitpunkt auch noch nicht brisant, aber irgendwann muss man sich entscheiden und das habe ich auch nun.

And the winner is... HTML5 (Bildquelle: http://lloydhumphreys.com/blog/?p=1098)

Meiner Meinung nach eignen sich für den später entstehenden Prototypen beide Möglichkeiten. Flash kann sicherlich noch ein wenig mehr, aber ich bin der Überzeugung, dass man mit HTML5 (Canvas) ebenfalls die notwendigen Funktionen der geplanten Anwendung umsetzen kann.

Da die Einstiegshürde bei HTML5 niedriger ist und mit jQuery Mobile ein Framework zur Verfügung steht, mit dem man schnell und einfach Interaktionen auf touchbasierten mobilen Geräten abbilden kann, ist die Wahl auf HTML5 gefallen. Darüberhinaus ist das Gestalten über CSS ebenfalls ein vorteilhafter Aspekt, den ich mit in meine Entscheidung habe fließen lassen.

Posted in | Tagged , , | 2 Responses

Ein erstes Anwendungskonzept

Um mich parallel zum theoretischen Teil auch meinem interaktiven Prototypen langsam zu nähern, entwickelte ich für den ersten groben Überblick ein Konzept zum Aufbau der geplanten Anwendung.

Das geht zwar noch nicht besonders in die Tiefe, erlaubt aber einen ersten Eindruck darüber, welche Bestandteile innerhalb der Anwendung vorhanden und wie diese miteinander verbunden sind. Darüber hinaus hat es für mich persönlich nochmal ein wenig Klarheit gebracht, wohin die Reise nun eigentlich hingehen soll. So wurde mir nochmals bewusst, welche Kernelemente in der Konzeptionsphase besonders viel Aufmerksamkeit benötigen.

Ein erstes grobes Anwendungskonzept für den Überblick

Da wäre zum einen der Punkt Überarbeiten von Zeichnungen und zum anderen der Punkt Bewerten von Zeichnungen. Für beide Bereiche habe ich mir schon erste grobe Gedanken darüber gemacht, welche Funktionalitäten sinnvoll wären bzw. sein könnten.

Überarbeiten
Das Überarbeiten soll mittels Annotationen stattfinden, was im Prinzip nichts anderes bedeutet, dass man zu bereits bestehenden Zeichnungen, Anmerkungen (Text und Scribbles) hinzufügen kann, ähnlich wie man das ja bereits bei der Dokumentenbearbeitung kennt. Das ganze soll dann über möglichst intuitiv nutzbare Interaktionselemente, wie z.B. Pinsel, etc. ermöglicht werden.  Im Prinzip ein sehr, sehr abgespecktes Malprogramm.

Inwieweit man diesen Überarbeitungs- oder Annotationstools neue Aspekte abgewinnen kann wird sich zeigen. Aber zumindest auf den Ebenen des Interaktions- und Interfacedesign gilt es möglichst anwenderfreundliche und intuitive Ansätze zu finden.

Bewerten
Das Bewerten ist da schon ein wenig schwieriger. Da bin ich mit meinen Überlegungen noch nicht ganz am Ende. Möglich sind spielerische Ansätze, um Zeichnungen möglichst optimal zu evaluieren bzw. zu bewerten. Das Ganze soll dann natürlich mehr als ein “schnödes” Rating mit den allseits beliebten Sternchen werden. Wobei diese Art der Bewertung nicht zwangsläufig außen vor gelassen werden muss.

Ebenfalls geplant ist eine Bewertung mittels Tags und auch das Annotieren scheint mir als Bewertungsform sinnvoll zu sein.

Über allen schwebt die Kollaboration und Kooperation
Nun sind die ersten Ideen bezüglich, was das Überarbeiten und Bewerten von Zeichnungen angeht, nichts wirklich neues, aber zumindest bewährte Methoden. Was die ganze Anwendung dann schon ein wenig spannender macht, ist der Aspekt der Kollaboration und Kooperation während des Prozesses der Bewertung und Überarbeitung.

Dabei gilt es zum Einen herauszuarbeiten, wann kollaboratives und wann kooperatives Arbeiten sinnvoll ist und wie das innerhalb der Anwendung möglichst optimal realisiert werden kann. Ebenfalls ein wichtiger Aspekt ist die Frage, wann beispielsweise eine zeitgleiche (synchrone) Kollaboration angestrebt werden sollte und wann eine zeitversetzte (asynchrone).

Der Aspekt der Iteration
Optimalerweise soll dann in dem späteren Prototypen das kollaborative und kooperative Überarbeiten und Bewerten von Zeichnungen auch ein iterativer Prozess werden, um somit zu möglichst guten Ergebnissen zu kommen. Ideal wäre dann wahrscheinlich auch, dass die Möglichkeit besteht, aus den gewonnenen Erkenntnissen die Zeichnung mittels der Anwendung neu zu erstellen und somit den iterativen Prozess noch weiter zu fördern.

Da die Überarbeitung der Bilder ja bereits mit zwar nur rudimentären Tools möglich ist (mehr braucht es auch nicht), können diese dann auch für das Erstellen einer neuen Zeichnung genutzt werden. Ob das aber dann wieder ein wenig zu viel bezüglich des Workloads ist, muss man prüfen.

Posted in | Tagged , , , , , | Leave a response

Next