Kategorie-Archiv: Programmierung

Back to the 60ties: Flussdiagramme

In den Zeiten von Lochkarten hat man den Algorithmus eines Programms meist mit einem Flussdiagrammen visualisiert. Erst danach hat man darauf aufbauend das eigentliche Programm „codiert“. Die Darstellungsmethodik wurde sogar in einer DIN-Norm 66001 spezifiziert und hat dann Eingang in viele Berufsausbildungen genommen. Auch heute noch sind Flussdiagramme in vielen Fachbüchern zu finden.

Einfaches Flussdiagramm aus einen Lehrbuch für Handwerker

Beispiel eines Flussdiagramms aus einem Buch für Handwerker.

Ironischerweise sind diese Diagramme in der Informatik seid dem Aufkommen des strukturierten Programmierens praktisch bedeutungslos.

Dennoch: In der Kommunikation mit fachlichen Anwendern oder Entscheidern können wir meist auf ein Grundverständnis von Flussdiagrammen aufbauen. Fachliche Projektbeteiligte kommen oft von selbst darauf, Abläufe mit Flussdiagrammen zu visualisieren.

Leider haben dann Nicht-Informatiker dann doch oft Probleme, ihre Gedanken in eine solche abstrakte Darstellung zu überführen.

Seltsamt verschachteltes Flussdiagramm

Mit welchem Programmkonstrukt kann man diese Ablauflogik ausdrücken? Es geht nur mit einem GO-TO. Aus modernen Programmiersprachen ist das GO-TO verschwunden: Es führt nämlich zu schwer zu verstehenden Ablaufstrukturen. Man kann die Abläufe praktisch immer deutlich eleganter ausdrücken.

Meine Erfahrung sagt mir, das auch hier der Anwender etwas anderes im Sinn hatte. Manche Anwender sollte man mit der Diagrammerstellung also lieber nicht alleine lassen.

Aber auch erfahrene Entwickler verlieren sich oft im Dickicht der Komplexität von Diagrammen.

Schauen wir uns ein Beispiel eines ehemaligen Kollegen an:

Ein Ablaufdiagramm das etwas unübersichtlich geraten ist.

Es wirkt sehr komplex. Wie kann man mehr Übersichtlichkeit herstellen?

Tipp 1: Die Hauptrichtung sollte immer von links nach rechts, oben nach unten sein. Nur die Nebenpfade sollten davon abweichen.

Tipp 2: Gerade die Fehlerbehandlung eines Prozesses neigt dazu, den Hauptpfad zu verschleiern. Hier sollte man gnadenlos abstrahieren und die Details der Fehlerbehandlung, wenn überhaupt, in einem gesonderten Diagramm erfassen. Es hilft meist niemanden, alle mögliche Pfade durch ein System wie in einem Labyrinth in einziges Diagramm zu pressen zu wollen.

Tipp 3: Hier werden Entscheidungsrauten benutzt, um Flüsse wieder zusammenzuführen. Das ist im Grunde falsch. Es wäre hier auch gar nicht nötig. In Prozessablaufdiagrammen kann man meiner Erfahrung nach oft auf die Darstellung von expliziten Entscheidungen verzichten. Das Diagramm wird übersichtlicher.
Die Stärke von Diagrammen sind die Darstellung von Beziehungen oder auch Abläufen. Details, unter genau welchen Bedingungen welche Entscheidung getroffen wird, lassen sich in Text meist besser ausdrücken.

Ein so vereinfachtes Diagramm kann man dann leichter verstehen:

Vereinfachtes Ablaufdiagramm

Umgestaltetes Ablaufdiagramm.

Rotierende Reklametafel mit CSS-Animationen

Billboard with changing picturesIm Jahre 1998 habe ich “Meiers Billboard” vorgestellt: Eine virtuelle Anzeigentafel, die Bilder durch Rollen austauscht. Damals war es als Java-Applet realisiert. Im Jahr 2009 habe ich dann diese Anwendung mit JavaScript und jQuery nachgebaut (Zum Artikel). Inzwischen kann man mit CSS3 auch einfache Animationen in Stildefinitionen definieren. Damit können wir eine rotierende Reklametafel ganz ohne JavaScript bauen. Wie das geht, zeige ich im Folgenden.

Grundgerüst

Das Grundgerüst setzen wir wie bei der Lösung mit JavaScript auf:Funktionsweise: Eine Liste von Bildern wird unter einem Fenster hindurchgeschoben.Es gibt einen Rahmen und eine Liste von Bildern. Wir manipulieren die “top”-Koordinate der Liste, um die Bewegung zu erzeugen. Die Clipping-Eigenschaft bewirkt, dass wir nur das Innere des Rahmens sehen.

Animation

Die Definition einer CSS3-Animation besteht aus zwei Teilen.Der erste Teil ist die Definition der „Keyframes“, also der Schlüsselszenen. Im einfachsten Fall ist das eine Anfangsszene und eine Endszene. Soll sich ein Bild 200 Punkte nach oben bewegen, so definieren wir das folgendermaßen:

@keyframes slideup {    
  from {    top: 0px;  }    
  to {    top: -200px;  }
}

Als nächstes müssen wir ein Element bestimmen, auf welches die eben definierte Animation angewendet wird. Zusätzlich können wir Parameter für diese Animation bestimmen: Wann startet die Animation und wie oft sie wiederholt wird. Das Feld „animation-name“ muss dabei der Name des @keyframes-Elementes sein.

#billboard ul li{   
  animation-delay: 1s;   
  animation-duration: 3s;   
  animation-iteration-count: infinite;   
  animation-name: slideup;   
... }

Das funktioniert soweit schon ganz gut.

Demo

Mehrere Bilder

Wir wollen mehrere Bilder nacheinander zeigen. Nun ist css keine imperative Programmiersprache, wir können nicht wie mit Javascript die Animationen gesteuert zusammensetzen.Statt dessen können wir umgekehrt vorgehen, und eine große Animation kleine Zwischenschritte unterteilen. Die Zeitpunkte der Zwischenschritten werden in Prozent der Gesamtanimation angegeben:

@keyframes slideup {   
  from { top: 0px; }   
  16% { top: -200px; }   
  33% { top: -200px; }   
  50% { top: -400px; }   
  67% { top: -400px; }   
  84% { top: -600px; }   
  to { top: -600px; }
}

Damit ist die Reklametafel auch schon fast einsatzbereit: Die Animationsdauer von müssen wir gegenüber unser ursprünglichen Lösung noch erhöhen, weil ja die Dauer eines Durchganges aller Bilder anzugeben ist.Um einen sauberen Übergang zwischen letzten und ersten Bild zu erzielen, verwenden wir wieder den Trick, das erste Bild an das letzte Bild nochmal anzuhängen.

Demo

Den Sourcecode finden Sie auch in meinen Repository auf Github.