Alle Beiträge von Karsten Meier

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.

Bilder vom UXCamp

Ich hatte eine Session zum Thema Smart-City beim User Experience BarCamp 2015 gestaltet. Die Entscheidung dazu war spontan, denn ich hatte erst 2 Tage vorher eine Teilnahmebestätigung bekommen. Habe aus der Not eine Tugend gemacht, den Meetingraum gegen die frische Luft getauscht und Flipchart und Post-ITs statt Beamer genutzt. Dazu gibt es einige schöne Fotos beim
UXCamp2015 Flickr Stream

Bilder von meinen Smrt-City-Vortrag beim UX-Camp 2015

WebApp-Icons für Chrome auf Android definieren

WebApps sind im Grunde einfach Webseiten, die man mit eigenen Icon auf seinen Smartphone installieren kann. Die Nutzer brauchen so nicht über einen Appstore zu gehen.Um eine solche WebApp zu entwickeln müssen wir dem HTML-Code einer Webseite zusätzliche Informationen mitgeben: die generelle Eigenschaft “WebApp-fähig” sowie mindestens ein Icon. Apple hat sich hier ein Link-Element mit Namen “apple-touch-icon” ausgedacht, zunächst in der krummen Größe von 57 Pixel. Dann kamen neue Geräte und Auflösungen, und Ruck-Zuck durfte man 4 verschiedene Icons allein für Apple definieren.Android hat WebApps bisher zwar auch unterstützt, aber eher halbherzig. Und Android möchte gerne andere Icon-Größen haben, die Vielfalt ist noch höher als bei Apple. Die Icon-Größen sind hier 48/72/96/144/192. Natürlich wollten die Android-Entwickler nicht die Tags nutzen, die das Wort “Apple” im Namen haben. All diese Bilder müssen im Kopfbereich der HTML-Datei verlinkt werden. Der Kopfbereich wird dadurch immer größer, ohne das irgend ein substanzieller Inhalt hinzukommt.

Die neue Lösung

Mit Chrome ab Version M39 hat sich Google jetzt der WebApp-Funktionalität noch einmal angenommen. Die Lösung ist eine zusätzliche Datei, die von der Originaldatei mit einem Link-Element referenziert wird:

<link rel="manifest" href="manifest.json">

Der Browser braucht die Informationen in der Datei nur anfordern, wenn der Nutzer die Webseite wirklich als WebApp auf den Startbildschirm installieren will. In der Datei können wird die verschiedenen Icons definieren, sowie einige nützliche Extra-Informationen:

  • name: Der Name, der auf dem Startbildschirm erscheinen soll. Der sollte möglichst kurz sein, also oft anders als der HTML-Title.
  • orientation: Man kann landscape oder portrait als Ausrichtung festlegen.
  • start_url: Das ist meistens einfach “index.html”
  •  display: “standalone” Dieses Attribut schaltet die Webapp Funktionalität in Chrome an.

Weitere Informationen gibt es in der Chrome-Entwicklerdokumentation: Add To Homescreen

Ergebnis

Die Auslagerung der Web-App-Definition macht den Head-Bereich von Webseiten wieder kleiner (oder zu mindestens wächst er nicht mehr mit jeder neuen Icon-Größe). Das gewählte Format ist offenbar wieder mal ein Alleingang einer amerikanischen Firma. Weder CSS, noch der ebenfalls “Manifest” genannte Appcache-Definition, noch die XML-Widget-Definition des W3C wurden verwendet. Leider fehlt bei Chrome immer noch eine definierte Möglichkeit, wie die WebApp erkennen kann, dass sie im Standalone-Modus läuft.  

 

Smart City – ein Begriff, viele Bedeutungen

Der Begriff Smart City wird in letzter Zeit inflationär gebraucht. Jede Stadt, die was auf sich hält, möchte gerne eine Smart City sein. Mit dem Begriff selbst können die meisten Bürger jedoch noch keine klare Vorstellung verbinden. Sicher gibt es Definitionen des Begriffs. Entscheidend gerade bei neuen Begriffen ist, wie sie verwendet werden.

Wo gibt es tatsächlich etwas neues, wo wird nur versucht, eigentlich einfache Apps oder andere Dienstleistungen zu verkaufen? Bei welchen Themen passiert tatsächlich etwas? Um mehr Klarheit zu schaffen habe ich Dokumente von verschiedenen Akteuren analysiert.

EU Ebene

Die EU hat unter dem Begriff “digitale Agenda” eine Stakeholder-Plattform ins Leben gerufen: eu-smartcities.eu

Smart City Infografik

Eine von der EU veröffentlichte Infografik zeigt Problemstellungen, Akteure und Aufgabenfelder der Smart-City-Innovation-Partnerschaft.

Auf dieser Plattform gab es zunächst drei thematische Arbeitsgruppen:

  • Energieeffizienz und Gebäude
  • Energieverteilungs-Netzwerke
  • Mobilität und Transport

Weiterhin gab es noch Querschnitt-Themengruppen, die sich mit IT oder Finanzierung beschäftigen. Das war es dann aber schon mit den Themen. Inzwischen gibt es über diese doch sehr funktionalen Themenfelder hinaus bei den sogenannten “Action Clustern” auch ein Thema “Citizen Focus”.

Berlin

In Berlin hat der Senat eine Arbeitsgruppe Smart City Berlin (SCB) gegründet. In einem Eckpunktepapier definiert diese AG den Begriff Smart City mit “Städte und Regionen, die sich die Aufgabe gesetzt haben, Zukunftsprobleme der Stadt zu identifizieren und dann zu lösen“. Das Identifizieren der Probleme ist also ein gesonderter Schritt. Verschiedene Städte haben verschiedene Ziele.

Die selbst gegebene Aufgabe soll durch Zusammenwirken verschiedener Akteure angegangen werden (Politik, Verwaltung, Gesellschaft, Wissenschaft, Wirtschaft)

Die Smart City AG reklamiert einen ganzheitlichen Ansatz, der die Schaffung einer höheren Lebensqualität sowie Stärkung der Innovationskraft (also Meta-Innovation) zum Ziel hat.

Als etwas konkretere Themenfelder nennt das Eckpunktepapier wieder Umwelt, Energie und Mobilität, zusätzlich Gesundheit, Sicherheit und demografischer Wandel.

Hamburg

Containerschiff und Containerbrücken zum entladen der Container

Containerverladung im Hafen. Schon seit einigen Jahren gibt es zum Transport der Container autonome Vehikel. Zukünftig soll der Zubringerverkehr noch weiter vernetzt werden.

Smart City wird in Hamburg offenbar von der Behörde “Wirtschaft, Verkehr und Innovation” besetzt. Auf der Hamburg-Webseite wird Smart City definiert als „kluge und vernetzte Stadt“.

Ziele sind

  • Lebensqualität verbessern,
  • effiziente Mobilität,
  • Umwelt (Ressourcen schonen, weniger Umweltschädlichkeit)
  • Nutzen von “innovativer Infrastruktur”

Als Arbeitsfelder kann ich erkennen:

  • der Hafen (Smart Port). Hier werden wohl Sensornetzwerke eingesetzt werden.
  • Straßenbeleuchtung und Ampeln
  • Erfassung und Steuern von Verkehrsströmen
  • Bürgerkiosk (Eine Art Container mit Videoverbindung in andere Behörden)

Obwohl Lebensqualität bei den Zielen an erster Stelle genannt wurde, scheint das Thema in Hamburg vor allem von der Wirtschaft (genauer: einzelnen Wirtschaftsakteuren) getrieben. Besonders wird die Partnerschaft mit dem amerikanischen Netzwerkausrüster Cisco hervorgehoben.

Erstaunlicherweise nicht Thema ist alles, was für die internationale Bauausstellung (IBA) von 2006-2013 passiert ist. Immerhin sah sich die IBA auch als Stadtlabor: „Mitten in Hamburg suchte die IBA Antworten auf die dringendsten Fragen der modernen Stadt, um Projekte für die Zukunft der Metropolen zu zeigen.

Paris / San Francisco

Centre Pompidou in Paris

Centre Pompidou: ein mutiges Architekturkonzept. Der Platz davor dient trotzdem oder gerade deswegen als Treffpunkt.

Hier habe ich eine schöne Zusammenfassung von Marie-Perrine Durot von der „PRIME transatlantic innovation platform” gefunden. (Interview veröffentlicht in „Atelier“, Herausgeber: BNP-PARIBAS).

Frau Durot entwirft folgendes Programm unter dem Begriff Smart City:

  1.  Zunächst mal geht es darum, Sektoren, die bisher nichts miteinander zu tun hatten, in einen Dialog zu treten und gemeinsam zu arbeiten.
  2. die Art wie Entscheidungsträger, Experten und Bürger für Projekte in der Stadt interagieren, sollen Ihren Worten nach “de-compartmentalize“ werden (aus Behördenzwängen befreien).
  3. Städte solle voneinander lernen. Die geografische Isolation soll aufgebrochen werden.

Teil 2

Der zweite Teil dieser Analyse behandelt die Nutzung des Begriffs Smart City in der IT-Szene.

Invertierte Lautstärkeregler

Wenn ich an meinen elektronischen Geräten die Lautstärke verstellen möchte, drücke ich gelegentlich erst mal auf die Laut-Taste statt auf die Leise-Taste. Wieso habe ich da Probleme? Schauen wir uns die Zuordnung der Lautstärketasten zum Lautstärkeregler beim Android-Tablet Nexus 7 an:

Lautstärketasten eines Tablets

Zuordnung der Lautstärketasten im Querformat beim Nexus 7

Wenn ich die linke Taste drücke, wird der Ton lauter und der Schieberegler bewegt sich nach rechts. Um den Schieberegler nach links zu bewegen, muss ich rechts drücken. What you see is the opposite of what you get.

Wieso belegt man die Tasten so?

Google ist wegen seiner vorbildlichen Usability groß geworden. Das Nexus 7 nutzt Android 4.4 mit dem API-Level 19, man hat also schon einige Iterationen hinter sich. Auch die Hardware ist bereits die zweite Überarbeitung. Es ist wohl keine “Kinderkrankheit” mehr.

Bei einem klassischen Dreh-Lautstärkeregler wird die Lautstärke durch eine Rechtsdrehung erhöht. Auf der rechten Seite ist die Drehung dabei nach unten. Ersetze ich den Drehregler durch zwei Lautstärketasten und platziere ich sie für Rechtshändler auf der rechten Seite, so wäre eine Lautstärkeerhöhung nach unten logisch.

Drehregler: rechts herum wird es lauter

Beim klassischen Mischpult hingegen sind die Schieberegler vertikal, die Lautstärke erhöht man durch Hochschieben: “Pump up the Volumne”. Diese Metapher wurde übernommen. (Schieberegler sind auch einfacher zu programmieren als Drehregler)

Kippe ich jedoch mein Gerät um 90 Grad, nimmt das Unglück seinen Lauf: Die obere Lautstärketaste ist jetzt links. Die grafische Darstellung des Lautstärkereglers wird neu gezeichnet und hat dann ihr lautes Ende jedoch rechts. Ernst Jandl hätte seine Freude gehabt.

volumne sliders

Meine favorisierte Lösung für dieses Dilemma wäre wieder echte Lautstärkeregler einzubauen.

Risiko, Sicherheit und menschliche Entscheidungsfindungen.

Warum ist der Mensch oft das schwächste Glied beim Absichern von IT? Der Forscher Ryan West hat einen Artikel veröffentlicht, in dem Muster in der menschlichen Entscheidungsfindung untersucht werden. Diese Muster führen oft dazu, das Menschen sich entweder unbewusst oder sogar gegen besseres Wissen für unsichere Lösungen entscheiden. Seine Erkenntnisse habe ich zu einem Vortrag verdichtet, den ich am 12.2.2014 bei der Hamburger Ruby Usergroup gehalten habe.

Der Originalartikel ist unter dem Titel „The Psychology of Security“ in den Communications of the ACM erschienen.Zunächst werden fünf psychologische Beobachtungen der menschlichen Entscheidungsfindung vorgestellt:

  1. Nutzer glauben persönlich kein Risiko zu tragen.
  2. Nutzer sind nicht dumm, sondern oft nur unmotiviert
  3. Sicherheit ist nur abstrakt. Konkretes haftet besser im Gehirn.
  4. Lernen funktioniert gut mit Rückkopplung.
  5. Risikobewusstsein ist asymmetrisch. Wenn Menschen etwas weggenommen wird, nehmen Sie oft ein höheres Risiko in Kauf, um es wieder zu bekommen.

Folgende Prinzipien können helfen, um Menschen zum sicheren Umgang mit IT-Systemen zu bewegen:

  1.  Unmittelbare Rückmeldungen und sicheres Verhalten belohnen.
  2.  Bewusstsein für Risiko erhöhen.
  3.  Riskantes Verhalten ächten
  4.  Kosten für sicheres Verhalten reduzieren.
  5.  Sozial Komponente nutzen.

 

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.