Wie soll die Web-Steuerung vom COMICROOM-Reader aussehen?

Tom und ich erarbeiten uns die Navigation für seine programmierte Blackbox. Nämlich wie(?) und wo(?) sollen die Steuerungselemente in seinem webbasierten COMICROOM-Reader platziert werden? 

Tom bat mich am Mittwoch bei ihm vorbei zuschauen, da er zu Ostern weg sein wird. „Wir müssen vorher einige Details für die Bedienung unseres COMICROOMs klären? Ich meine die unserer COMICROOM-Reader-Software!“

 

So machte ich mich am Mittwochabend auf den Weg zu ihm. Unterwegs suchte ich noch einen Teeladen auf. Ich sollte einen ‚Lapsang Souchong‘ mitbringen. „Wir sollten unsere Trinkgewohnheiten ändern“, meinte Tom letztens noch am Telefon zu mir. „Deine Blogs vermitteln mir den Eindruck, dass unser Projekt immer von permanentem Alkoholkonsum begleitet wird. Deshalb lass uns mal zur Abwechslung einen besonderen Tee zu uns nehmen. Du Trinkst doch Tee, Andreas?“ Ich bejahte die Frage.

 

Und so stehe ich nun vor der Verkäuferin und lasse mir 250g von diesem ‚besonderen‘ Tee in ein Tütchen abfüllen. Ein ungewöhnlicher Geruch wehte dabei zu mir herüber, der mich an geräucherten Fisch oder Schinken (!?) erinnerte…

 

Dann war es nur noch ein kurzer Weg … und schon saß ich wieder einmal an Toms Tisch. Mein Notebook neben seinem aufgeklappt. Aber an seinem Notebook war noch zusätzlich der Bildschirm von HP angeschlossen. Dem HP LP2065 - Hochkant aufgestellt (Siehe Blog vom 12. Jan. 2014). Daneben war ein kleines Stövchen aufgestellt, auf dem eine schwarze gusseiserne Kanne stand. Zwei Teetassen –gefüllt mit einer dampfenden dunkelgelben Flüssigkeit- vervollständigten das Ensemble. Wieder dieser leichte Geruch nach geräuchertem… Moment. Da fehlte doch etwas…?

„Und da kommt er schon!“ Tom brachte einen Aschenbecher für mich und meine Pfeife aus dem Schrank zum Vorschein. Nun ist unser Arbeitsumfeld vollständig.

 

„Die grundsätzliche automatisierte Konvertierung von Comicseiten in eine webbasierte Struktur ist eigentlich fertig.“ Tom’s Aussage gefiel mir schon mal. Gespannt hörte ich ihm weiter zu. „Ich kann sie nun mit Funktionen für Interaktionen füllen… Aber die Navigation und auch einige Stilelemente, wie Farben und Formen sollten wir besprechen...“ Wird er mir auch heute was zeigen können?

 

Und als ob er meine Gedanken erraten hatte, meinte er: „Ich habe da schon mal was vorbereitet.“ Er machte einen Doppelklick auf ein Icon seines Desktops. Auf dem HP Bildschirm öffnete sich formatfüllend eine Webseite. Oben links stand groß ‚COMICROOM‘ in einer hellbraunen Farbe. Rechts oben waren drei runde Knöpfe. Dann darunter die Titelbilder von Comicalben.  Immer vier in einer Reihe. 16 Titelbilder insgesamt. Beginnend mit ‚Akira‘ und endet mit ‚Storm‘. Und immer wenn er mit der Maus über eins der Titelbilder fuhr, bildete sich ein hellbrauner Rahmen um das Bild. Der gesamte Bildschirm wies keinen Rand auf, keine Scrollbalken – kein Hinweis darauf, dass ein Webbrowser als Desktop für den COMICROOM-Reader genutzt wurde. Ich stopfte mir die Pfeife… Meine freudige Erregung unterdrückend.

Tom erklärte sogleich: „Das ist der Full-Screen-Modus vom Internetexplorer. Mit diesem kann man nur die Webinhalte anzeigen lassen. Alle Hinweise auf einen Webbrowser werden ausgeblendet. Einfach die Taste F11 drücken.“ Ein: ‚Ich weiß Tom‘ ersparte ich mir.

 

Ich drückte mit dem Pfeifenstopfer den Tabak leicht nach und entzündete das erste Streichholz…

 

Er lotste die Maus zu ‚Batman Sonderheft‘ –das vierte Titelbild in der ersten Reihe-  und als es den Rahmen erhielt, blendete sich ein kleiner Bubble ein, mit dem Verweis ‚Batman Sonderheft‘. Er klickte einmal. Der Bildschirm veränderte seinen Inhalt. Nun sah ich alle Titelbilder der einzelnen Batman Sonderhefte. Er scrollte ein wenig nach unten. Es war wohl die komplette Sammlung. Auch wieder vier in einer Reihe – insgesamt wieder 16 auf dem Display ordentlich in Reihe und Spalte platziert. Dann klickte er das Heft Nr. 1 an. Wieder in vierer Reihen die Einzelseiten aufgelistet.

 

Das brennende Streichholz über den Pfeifenkopf haltend, sog ich langsam und genussvoll an der Pfeife. Wendete dabei meinen Blick nicht vom Bildschirm ab…

 

„Bis hierhin ist es relativ einfach, Andreas. Aber jetzt wird es etwas schwieriger.“ Er nahm wieder die Maus in die Hand und führte sie zur ersten Seite: Dem Titelbild von ‚Batman Sonderheft 01‘.

 

Das Zündholz war abgebrannt und ich löschte es mit ein-zweimal wedeln. Schnipste es dann in den Aschenbecher. Die Pfeife war an. Der Rauch verteilte sich großzügig im Raum.

 

Ich sah auf dem separaten Monitor eine riesengroße Batman-Comicseite: 38cm hoch und 26cm breit! Wundervoll! Ein Riesen-Sonderformat!

 

Ich griff zur Tasse. Nahm einen Schluck vom ‚besonderen‘ Tee. Ups - der war überraschend gut. Roch nicht nur so, sondern schmeckte auch rauchig.

Tom bemerkte meinen verblüfften Gesichtsausdruck. „Auch Winston Churchill hat diesen Tee gerne zu sich genommen, während er seine Leidenschaft des Zigarren-rauchens frönte.“ Aha – dachte ich so bei mir. Es war wirklich ein passender Geschmack zu meinem Latakia-Tabak. Leckere Kombination. Da hatte er eine gute Wahl getroffen.

 

„So Andreas. Jetzt kommt der Teil, wo wir uns unterhalten müssen.“ Tom klickte in die untere rechte Ecke der Titelseite. Die nächste Seite erschien.

„Cool. Du verwendest ein ‚area shape‘?“ meinte ich, als ich zum wiederholten Male einen Schluck nahm und über den Tassenrand hinweg ihn anschaute.

„Soso. Du kennst Dich aus.“ Dabei nickte Tom mir zu. „Genau. Ich wollte keine Knöpfe haben, die Teile des Bildes verdecken. So nutze ich diese unsichtbaren Bereiche um darin die Funktionen zum Blättern einzubinden.“ Er führte die Maus in die linke untere Ecke der Seite 2 und klickte einmal. Wir waren wieder auf der Titelseite. „Und so blättert man zurück.“

„Das finde ich gut.“ Ich paffte an meiner Pfeife. „Wie kommt man wieder zurück zur Auflistung der Einzelseiten des Heftes?“

„Genau hier beginnt mein Problem.“ Er führte die Maus in die Mitte des Bildes. Ein Druck auf die Maus und von oben schob sich eine Menüleiste ein. „Das ist ja wie beim eBook-Reader Aldiko“, bemerkte ich. In der Menüleiste konnte ich den Titel samt Heftnummer ablesen. Zusätzlich waren drei runde Knöpfe mit merkwürdigen Zeichen abgebildet.

 

„Was mache ich mit diesen Buttons?“ fragte ich ihn. Ich hatte diese Leiste auch bei allen anderen Klicks schon gesehen. Doch als er die einzelne Seite zum Lesen aufrief, verschwand diese. Nun hatte er sie wieder vorgeholt. „Ganz links ist der ‚Zurück‘ Button. Mit dem in der Mitte komme ich wieder zurück in die Heftsammlung. Und mit dem linken kann ich wieder die gesamte Comicsammlung anzeigen lassen.“

„Nicht schlecht!“ meinte ich zu ihm. „Mit deiner Blackbox werden diese Optionen automatisch kreiert?“ „Ja.“

 

Mir gefiel, was ich sah. Aber ich fand die Menüleiste nicht wirklich toll. Das Design der Buttons war –wie schon erwähnt- rund. In jedem dieser Knöpfe waren irgendwelche kleinen Bilderchen, die ich nicht so recht identifizieren konnte. Mein erstes spontanes Gefühl war Ablehnung. Zum einen sind die Knöpfe nicht wirklich gelungen. Zum anderen fand ich die sich einblendende Menüleiste umständlich. Das geht doch bestimmt einfacher. Ganz nach dem Prinzip: Weniger ist mehr!

 

„Du solltest sparsamer mit den Knöpfen arbeiten“, Meinte ich zu ihm. Ich schenkte aus der Kanne unsere beiden Tassen nach. Was hältst Du davon, wenn wir die Menüleiste wegließen und stattdessen mehr Bereiche definieren, in denen die Funktionen hinterlegt sind? Ich finde das eleganter.“

„Wie meinst Du das?“ fragte mich Tom.

„Naja, wir wollen doch die Bedienung so einfach wie möglich machen. Und wir haben ja nicht wirklich viele Funktionen für unseren eComic-Reader definiert. Man könnte doch durch einen Klick in die Mitte der Seite gleich zu den Einzelseiten wechseln?“

„Und wie wollen wir dann von der Seite zur Sammlung springen?“

„Gar nicht!“ sagte ich. „Wir nutzen dann den Umweg über die Buttons auf der Heftseitenübersicht um zum Gesamtarchiv zu kommen.“ Ich malte ihm das auf einem Stückchen Papier, was mir vorschwebte.

 

Tom griff zu seiner Tasse und warf einen Blick auf meine Skizze. Dabei dachte er über das Gesagte nach. „Das Setzen von Lesezeichen muss doch auch noch eingebracht werden. Und auch der ‚Zurück‘-Button. Wo sollen die dann sein?“

Das ist in der Tat ein Problem. Wohin damit?

Während ich an meiner Pfeife sog und kleine Kringel ausstieß, neigte er sich auf einmal nach vorne, nahm sich mein Stück Papier und kritzelte darauf seinen Einfall.

 

„Was ist damit“ sprach er nach einigen Minuten kreativen Denkens und einige Bleistiftstriche später. „Ich könnte oben ebenfalls einen Bereich definieren, der für ‚Zurück‘ reserviert ist. „Mmh… was ist dann mit den Lesezeichen?“ fragte ich. Und jetzt kam die angesprochene Kreativität von Tom. Denn er meinte: „So wie ich vorwärts und rückwärts blättern in den unteren Bereich der Seite definiert habe, könnte ich das auch für die Lesezeichen im oberen Teil realisieren…“

Ich gab noch mal zu Bedenken, dass der Platz dort schon mit ‚Zurück‘ belegt sei.

 

„Das ist richtig, Andreas“ Ein verschmitztes Lächeln machte sich in seinem Gesicht breit. „Aber wie fändest du das, wenn ich das mit einem Doppelklick programmieren würde?“

„Das ist wirklich gut.“ Ich resümierte das Gesagte:“‚Zurück‘ im oberen Bereich einmal klicken. Rechte obere Ecke doppelklicken führt zum ‚Lesezeichen setzen‘. Linke obere Ecke doppelklicken löscht es wieder.“

„Genau Andreas.“ Aber Lesezeichen habe ich noch nicht implementiert. Soweit bin noch nicht. Aber ja… genau so habe ich es mir gedacht.“

Gut. Das mit den Lesezeichen machen wir später. Dachte ich so bei mir. Da ist ihm noch keine Idee gekommen. Konzentrieren wir uns also erstmal auf die anderen Dinge, wie dem Design.

 

Er hatte in den Hintergrund ein Bild von einer dunkelbraunen Holzwand gelegt. „Tom, ich würde das einfacher machen. Stärker abstrahieren…“

„Ok. Ich wollte eigentlich unbedingt ein Holzregal haben. Doch das sah nicht aus.“

„Finde ich auch. Haben ja schon die anderen. Lass uns unseren eigenen Stil entwickeln…“

Tom gab mir Recht. So einigten wir uns auf einen reinen braunen Farbton. Aber die Rahmen fand ich nun deplatziert. Mmmh… abstrahieren…wie? Dann fragte ich ihn: „Sag mal Tom… Könntest du statt eines Rahmens nur einfach einen dickeren Strich unter dem aktiven Bild setzen?“

Tom verstand sofort. „Du meinst einen Strich, der ein verallgemeinertes Regalbrett darstellen soll?“ Bevor ich Ihm antworten konnte, stimmte er mit mir überein: „Gute Idee. Das lässt sich machen. Wenn also mit der Maus über ein Bild fährt, dann wird darunter eine dicke Linie eingeblendet.“

 

Mittlerweile hatten wir unsere vierte Tasse ausgetrunken. Meine Pfeife war noch immer nicht zu Ende geraucht. Mein Rauch vereinnahmte zunehmend das ganze Zimmer.

 

Ich wollte mehr sehen. Ich wollte selber mal herum surfen… Also nahm ich ihm seine Maus aus der Hand und steuerte damit durch die Sammlungen. Währenddessen ging Tom in die Küche, um eine neue Kanne Tee aufzusetzen. Ich spielte derweil weiter mit dem COMICROOM-Reader. Die Navigation war wirklich simpel und intuitiv. Ich war begeistert. Die großen einzelnen Comicseiten unserer gescannten Comics wirkten überragend schön auf dem Bildschirm. Wie ich es auch schon m Film mit COMICRACK gezeigt hatte (Siehe Blog vom 12. Jan. 2014). Jeder Mausklick in die untere Ecke brachte mich in dem Comic vorwärts. Tom hatte keine Animation für das Blättern programmiert, sondern es wurde ganz kurz schwarz und schon war die nächste Seite da. So sollte es sein: Kein Firlefanz. Eher puristisch! Der Lese Spaß war uns gewiss.

 

„Und wie funktioniert das ganze nun? Kann ich das auch einfach nutzen?“ fragte ich ihn, als er mit dem frisch aufgebrühten Tee das Zimmer wieder betrat.

„Na soweit sind wir noch nicht“, bremste Tom meinen Enthusiasmus. Er goss uns die Tassen voll. „Ich zeig Dir das mal an den Batman-Heften. Wie Du siehst fehlen da noch einige…“ Stimmt! Hatte ich nicht gleich bemerkt. Tom erklärte: „Wenn ich also Hefte zu einer bestehenden Sammlung hinzufügen möchte, so schiebe ich diese Verzeichnisstruktur…“ Er wechselte zum  Explorer. Griff sich mit der Maus mehrere Verzeichnisbäume (das waren die letzten drei Hefte der Sammlung – Batman Sonderheft 42, Batman Sonderheft 43 und Batman Sonderheft 44) und schob sie in ein Verzeichnis, in denen schon die anderen 41 Hefte in der bekannten Ablagestruktur (siehe Blog vom 18. Jan. 2014) lagen… „… in diese hier. Dann mache ich einen Doppelklick auf dieses Batchfile, und schon…“ Jetzt hörte ich nicht mehr hin. Ein Fenster ging auf. In ihm sah ich wie alle Hefte konvertiert wurden. Die ersten 41 gingen ganz schnell. Die letzten drei dauerten etwas länger. Nach wenigen Minuten war alles vorbei. Tom dirigierte die Maus zur Batman-Sammlung und schon sah ich, dass diese um die drei fehlenden Hefte ergänzt wurden. Sie lagen nun dort im Browser vor, wie alle anderen auch. Und zwar genau da, wo sie auch hingehörten: Ans Ende der Sammlung. Und die Steuerung funktionierte bei jedem einzelnen neu hinzugefügten Comic wie erwartet.

 

„Nicht schlecht.“ Mehr fiel mir nicht dazu ein. „Aber ein paar Dinge müssen wir noch ansprechen, Tom. Zum Beispiel müssen wir uns Gedanken über eine sinnvolle Angabe der Menge von Comics einer Sammlung machen? Also wie kann man an der Eingangsseite erkennen, wie groß eine Sammlung ist? Jetzt sehe ich ja nur ein Titelbild?“ Ich schaute noch mal genauer hin. „Aha. Immer das erste Heft stellt den Einsprungpunkt zur Sammlung dar.“

„Genau. Da hatte ich schon einige Experimente am Laufen gehabt.“ Wieso klang Tom so deprimiert? „Ich hatte mit grafischen Elementen herumprobiert. Zum Beispiel hatte ich es wie dicke Bücher ausschauen lassen, doch das sieht gräßlich aus. Wenn Du da eine Sammlung von mehreren hundert Heften hast und gleich daneben ein Einzelheft…“ Er beendete seinen Satz nicht. Musste ich ihm jetzt ein Taschentuch reichen? Nein er fing sich wieder. „Dann hatte ich die nackte Zahl in die Bubbles mit eingebunden… gefiel mir ebenso nicht…“

„Ok.Ok.Ok. Hab verstanden. Dich hat hier deine Muse verlassen.“ Das waren ja tolle tröstende Worte, dachte ich so bei mir.

 

Der Abend setze sich noch bis weit in die Nacht fort. Wir entwarfen neue Ideen. Inspirierten uns gegenseitig. Nach insgesamt 4 Kannen Tee und einer weiteren Pfeife beendeten wir unser Treffen.

 

Aber was ich heute gesehen hatte, war wirklich großartig. Das war vielversprechend. Und es hatte mir gezeigt, dass wir in der Lage sein sollten, an diesem unseren Projekt motiviert weiter zu arbeiten. Es auch erfolgreich abschließen zu können. Erfolgreich insofern, als das wir am Ende unser COMICROOM-Archiv haben werden.  

 

Zuhause angekommen, bemerkte ich, dass ich keinerlei Unterlagen mitgenommen hatte. Weder die Bleistiftskizzen noch den COMICROOM-Reader…

 

Da muss ich wohl bei Tom noch mal vorbeischauen… Aber wollte er nicht über Ostern wegfahren?

Ein 'Roir' aus dem Jahre 1993
Ein 'Roir' aus dem Jahre 1993
Was bisher geschah...
Was bisher geschah...

Youtube-Videos

00 Opening COMICROOM
00 Opening COMICROOM
01 Monitor & Schwenkarm
01 Monitor & Schwenkarm
02 Ordnung muss sein
02 Ordnung muss sein
03 Armlehne & Knetmasse
03 Armlehne & Knetmasse
04 Der COMICROOMReader
04 Der COMICROOMReader
05 Upgrade
05 Upgrade
06 Machbarkeitsstudie
06 Machbarkeitsstudie
07 Unboxing ZBOX
07 Unboxing ZBOX
08 Der PFEILER
08 Der PFEILER
09 Die PLATTFORM
09 Die PLATTFORM
10 Die Hochzeit
10 Die Hochzeit
11 Bookmark Manager
11 Bookmark Manager
12 Starting COMICROOM
12 Starting COMICROOM
13 Das eRegal
13 Das eRegal
14 Duell der Armlehneablagen
14 Duell der Armlehneablagen
15 Nähen & Schneiden
15 Nähen & Schneiden
16 Dachboden-Begehung
16 Dachboden-Begehung
17 Erster Eindruck
17 Erster Eindruck