Skip to content

Eine responsive Web-App - Teil 2

Hat der erste Teil des Tutorials noch das Konzept unter die Lupe genommen, gilt es jetzt, aus diesem abstrakten Konstrukt etwas digital Greifbares herauszuarbeiten.

In einem ersten Schritt wird die semantische Struktur des Colorculators definiert, bevor in Schritt 2 die ersten kosmetischen Anpassungen erfolgen. Die nachfolgende Abbildung zeigt den Weg und Ziel des Tutorials…

Eine responsive Web-App – Teil 2: Vom Wireframe zum HTML5-Konzept

Der Worte sind nun genug gewechselt, los geht’s…

Das Layout

Das in Teil eins skizzierte Modell lässt sich grob in 4 Teile untergliedern:

  1. Layout-Container #container
  2. Header
  3. Output-Felder #output
  4. Input-Tasten #hexpad

Semantisch lässt sich die Struktur mit folgender HTML5 Struktur abbilden:

<section id="container">
   <header>
   ...
   </header>
   <ul id="output">
   ...
   </ul>
   <ul id="hexpad">
   ...
   </ul>
</section>

Mit dieser Struktur lässt sich der responsive Ansatz gut umsetzen. Der #container bildet die äußere Begrenzung, welche auch die Maße für die entsprechenden Ausrichtungen (landscape, portrait) vorgibt.

Sowohl Tastatur, als auch auch die Ausgabefelder entsprechen einer Baumstruktur, die als zusammenhängende Einheit dargestellt werden sollen. Solche Gefüge lassen sich mit ungeordneten Listen ul nachbilden.

Slogan, Claim und Verbindungsanzeige werden im header verpackt.

Nachdem der Rahmen spezifiziert ist, können weitere Details integriert werden, wie die einzelnen Tasten (0 nach F) und die eigentlichen Ausgabefelder. Das nachfolgende Markup entspricht dem späteren Gerüst:

<section id="container">
   <header>
      <h1>COLORCULATOR</h1>
   </header>
   <ul id="output">
      <li id="hex" class="outputfield">
         <span class="label">hex</span>
         <b>#</b>
         <span id="value"></span>
      </li>
      <li class="outputfield">
         <span class="label">rgb</span>
         <span id="rgb-value"></span>
      </li>
      <li class="outputfield">
         <span class="label">hsl</span>
         <span id="hsl-value"></span>
      </li>
      <li id="preview" class="outputfield">clear</li>
   </ul>
   <ul id="hexpad">
      <li class="number">0</li>
      <li class="number">1</li>
      <li class="number">2</li>
      <li class="number last">3</li>
      <li class="number">4</li>
      <li class="number">5</li>
      <li class="number">6</li>
      <li class="number last">7</li>
      <li class="number">8</li>
      <li class="number">9</li>
      <li>a</li>
      <li class="last">b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li class="last">f</li>
   </ul>

Die Struktur enthält schon Klassen und IDs für die späteren CSS-Zuweisungen.

CSS anflanschen

Die grobe Struktur steht, jetzt ist es an der Zeit das Layout in Form zu bringen. Noch bleiben die responsiven Features außen vor.

Reset

Um möglichst bei allen Browsern auf dem gleichen Level aufzusetzen, wird ein minimales Reset angewendet und für alle Elemente padding und margin auf 0 gesetzt.

* { margin: 0; padding: 0; }

Wer sich umfangreicher über Reset CSS Files informieren möchte, sollte mal bei Eric Mayer vorbeischauen.

Body

Der Body-Bereich spielt eine entscheidende Rolle, da hier das Fundament für die Schriftgröße gelegt wird, die im Weiteren die Basis für das responsive Design bilden wird. Wir setzen die font-size auf 100%, was in etwa einer Schriftgröße von 16px entspricht.

Weiterhin wird das CSS3 Flexible Box Model Feature verwendet, mittels dessen die vertikale Zentrierung des Colorculators vorgenommen wird. An dieser Stelle zeigt sich schon der zurzeit leider noch notwendige prefix-Horror (-moz, -webkit). JavaScript Libraries wie Prefix Free können dabei allerdings Abhilfe schaffen. In diesem Tutorial wird auf den Einsatz der Library verzichtet.

body { 
   font: 100%/1.5 "Helvetica Neue" , Helvetica, Arial, Sans-Serif; 
   background: #333; 
   -webkit-user-select: none; 
   display: -moz-box; 
   -moz-box-orient: horizontal; 
   -moz-box-pack: center; 
   -moz-box-align: center; 
   display: -webkit-box; 
   -webkit-box-orient: horizontal; 
   -webkit-box-pack: center; 
   -webkit-box-align: center; 
   display: box; 
   box-orient: horizontal; 
   box-pack: center; 
   box-align: center; 
   -webkit-box-flex: 1; 
   -moz-box-flex: 1; 
   box-flex: 1;
   max-width: 200em; 
}

Tastatur

Die HEX-Tastatur bildet das Kernelement unseres Designs. Die Ausmaße des Keypads haben Einfluss auf die weiteren Elemente. Die Optik der Liste muss ein wenig angepasst werden in dem der list-style abgedreht wird. Die Tasten (li) erhalten einen 5px margin nach rechts und unten. Die initiale Größe einer Taste beträgt 50px – Höhe und Breite. Daraus ergibt sich eine Gesamtbreite der Tastatur von 220px, da jeweils die letzte Taste keinen margin auf der rechten Seite besitzt. Mittels float:left werden die Tasten innerhalb der Liste zu Reihen à 4 Tasten angeordnet, da durch die Breite des Container-Elements von 220px nach den besagten 4 Tasten umgebrochen wird.

Um ein paar CSS3 Features auszuprobieren, bekommen die Tasten noch abgerundete Ecken mit einem Radius von 5px. Einen :hover-Effekt gibt’s auch noch dazu…

#hexpad { 
   list-style: none; 
}
#hexpad li { 
   margin: 0 5px 5px 0; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
   border-radius: 5px; 
   text-transform: uppercase; 
   float: left; 
   text-align: center; 
   background: #444; 
   color: #fff; 
   -webkit-tap-highlight-color: #F39; 
   height: 50px; 
   width: 50px; 
   line-height: 50px;
} 
#hexpad li:hover { 
   background: #F39 !important; 
   color: #fff !important; 
   cursor: pointer; 
}
.last { 
   margin-right: 0px; 
}
.number { 
   background-color: #666; 
}

Container

Kommen wir jetzt zum Container-Element, das innerhalb der DOM eigentlich vor der Tastatur angesiedelt ist.
Nachdem die Außenmaße der Tastatur bekannt sind, wird, wie bereits beschrieben, die Breite des Containers mit der Breite der Tastatur gleichgesetzt. Die horizontale Zentrierung des Containers wird durch den auto-Wert der äußeren margins gewährleistet.

#container { 
   margin: 0 auto; 
   width: 220px; 
}

Output Felder

Die Ausgabefelder sind Listenelemente und benötigen dem entsprechend eine kleine Überarbeitung. Ebenso wie bei den Tastenfeldern wird der list-style auf none gesetzt. Da wir schon wissen, wie hoch eine Tastenreihe ist, können wir an dieser Stelle den Feldern die gleiche Höhe (50px) wie den Tasten zuweisen. Für die vertikale Zentrierung des Textes innerhalb des Feldes wird die line-height auf den selben Wert gesetzt.

#output { 
   list-style: none; 
}
.outputfield { 
   height: 50px; 
   line-height: 50px; 
   background: #fff; 
   text-align: right; 
}
.label { 
   float: left; 
   margin-left: 5px; 
   text-transform: uppercase; 
   color: #666; 
}

Eye Candy

Ein wenig Eye-Candy kann bekanntlich nichts schaden und daher wird das HEX-Feld noch mit einer umgeklappten Ecke geschmückt. Wie man einen solchen Effekt erzielt, wird im WWW sehr häufig beschrieben. Ich habe mich von einer Variante von Nicolas Gallagher inspirieren lassen.
Es ist in erster Instanz notwendig, das HEX-Feld relativ zu positionieren, um das Pseudo-Element nachher absolut positionieren zu können. Die eigenliche Ecke ist ein Pseudo-Element – :before -, das in der rechten oberen Ecke des Feldes positioniert wird. Dieses Element hat weder Höhe noch Breite. Die Magie ist ein übermäßig dicker Rahmen. Die Dicke des Rahmens hat direkten Einfluss auf die Größe der gefalteten Ecke. Der rechte Rahmen bekommt die Farbe des Hintergrundes und ist somit unsichtbar, der untere Rahmen wird in ein leichtes Grau getaucht, was ihn besser vom weißen Hintergrund des HEX-Feldes abhebt. Ein dezenter Schatten und noch den gleichen border-radius wie dem HEX-Feld zuweisen, und fertig…

#hex { 
   position: relative; 
}
#hex:before { 
   content: ""; 
   position: absolute; 
   top: 0; 
   right: 0; 
   border-style: solid; 
   background: #eee; 
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 
   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 
   box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 
   display: block; 
   width: 0; 
   border-width: 8px; 
   border-color: #333 #333 transparent transparent; 
   -webkit-border-bottom-left-radius: 5px; 
   -moz-border-radius: 0 0 0 5px; 
   border-radius: 0 0 0 5px; 
}

Die Hauptüberschrift (h1) wird bei dieser Gelegenheit ebenfalls noch ein wenig angepasst und in das Design integriert.

h1 { 
   font-size: 10px; 
   line-height: 32px; 
   color: #e0e0e0; 
}

Zusammenfassung und Ausblick

Das war Teil 2 der Saga und ein, noch statischer, Colorculator [Demo] ist bereits zu erkennen.

Der nächste Teil befasst sich mit dem JavaScript, das wir für die Farbkonvertierungen und die eigentlichen Funktionen des Colorculators benötigen. Ein wenig jQuery Vorkenntnisse werden vorausgesetzt.

Die Quellen des Tutorials gibt’s auf github – so, use the fork ;)

Eine responsive Web-App - Teil 1

Wireframe Konzept des Colorculators

Um ehrlich zu sein, war es gar nicht so einfach ein überschaubares Thema für dieses Tutorial zu finden. Nach reiflicher Überlegung war der Colorculator geboren. Ein Tool zum einfachen Konvertieren von HEX-Farben in RGB- und HSL-Farben. Im Laufe dieser Reihe wird auf einige Features, Fallstricke und Ansätze des Web-App Developments eingegangen. Dabei geht es über das Konzept, zum Layout bis hin zur Programmierung.

Um diesem Tutorial einen echten Projekt-Charakter zu geben, wird in diesem ersten Teil auf das Konzept der Web-App eingegangen.

Die Quellen des Colorculators gibt’s auf github – so, use the fork ;)

Zunächst zur Funktionalität und zu den Anforderungen.

Die Funktion

Über ein Eingabefeld können HEX-Farben (3- und 6-stellig) eingegeben und on-the-fly in ihre RGB- und HSL-Entsprechungen konvertiert werden. Dabei soll die aktive Farbe dem Benutzer sichtbar gemacht werden.

Die Ansprüche

Die hier formulierten Requirements entsprechen nicht ganz den klassischen Business-Requirements, da an dieser Stelle bereits einiges an Vorwissen bezüglich der technischen Umsetzung in einem relativ hohen Detailgrad aufgeführt wird, aber es ist ja auch schließlich ein Tutorial…

Da Colorculator sowohl auf Desktops, Tablets wie auch Smartphones – namentlich dem iPhone – laufen soll, führt kein Weg an einem responsiven Ansatz vorbei.

Dabei soll das Tool über eine eigene HEX-Tastatur verfügen, die es dem Benutzer erleichtert die Farben einzugeben. Dieser Ansatz verhindert Fehleingaben. Dabei soll die Bedienbarkeit auf Smartphones (Touch-Events) und auch auf Desktops (Click-Events) gewährleistet sein.

  • Responsiv

Das UI soll minimalistisch, intuitiv, selbsterklärend, leicht benutzbar sein und mit HTML5, CSS3 und JavaScript umgesetzt werden.

  • HTML5, CSS3 und JavaScript
  • minimalistisch (ohne Grafiken)
  • gutes UX

Die Web-App soll offline-fähig und auf einem mobilen Endgerät ohne Internetzugriff immer noch lauffähig sein und den Benutzer über den momentanen Verbindungszustand informieren. Weiterhin soll die App mit einem Custom-Icon auf dem Home-Bildschirm des Benutzers aufrufbar sein. Die App soll ein Bewusstsein bezüglich ihres momentanen Situation haben und erfassen ob sie bereits vom Benutzer zum Home-Screen hinzugefügt wurde oder immer noch im Browser-Modus läuft.

  • Offline Application Cache
  • Web Clip Icon
  • Visuelles Feedback über den Netzwerkstatus
  • “Web Clip”-Bewusstsein und visuelles Feedback

Die App soll performant und auch mit bekannten NUI-Gesten steuerbar sein.

  • CSS/JS Kompression
  • Touch-/Shake-Events
Zusammenfassung
  • Responsives Web Design
  • HTML5, CSS3 und JavaScript
  • minimalistisch unter Verzicht auf Grafiken (siehe Punkt 8 Performant)
  • gutes UX
  • Offline-fähig
  • Web Clip Icon
  • Netzwerkstatus und visuelles Feedback
  • Web Clip Bewusstsein und visuelles Feedback
  • Performant
  • NUI-Gesten

Funktionalität + Ansprüche = Funktionale Ansprüche

Das Layout soll, wie bereits aufgeführt, responsiv umgesetzt werden. Aber was wird eigentlich an UI-Elementen benötigt? Ohne dieses Wissen lassen sich die erhobenen Anforderungen gar nicht zu digitalem Papier bringen.

UI-Komponenten
  • HEX-Label
  • HEX-Eingabefeld
  • RGB-Label
  • RGB-Ausgabefeld
  • HSL-Label
  • HSL-Ausgabefeld
  • Tastatur zur HEX-Eingabe (0-9, A-F)
  • Clear/Reset – Button
  • App-Name und „Erfinder“
  • Netzwerkstatus Anzeige
  • Homescreen Popup
Zusammenfassung:
  • 1 Eingabefeld
  • 2 Ausgabefelder
  • 1 Tastatur mit 16 Tasten
  • 1 Button zum Zurücksetzen der Werte
  • 1 Anzeige der aktiven Farbe

Wireframe

Es bietet sich zum Beispiel der Einfachheit halber ein symmetrischer Ansatz an, da sich dieser nachher im Coding sehr leicht berücksichtigen lässt.

Die 16 Tasten lassen sich sehr gut in 4 Reihen zu 4 Tasten umsetzen, wobei die HEX-Werte von Dunkel nach hell (Zahlen zu Buchstaben) angeordnet sind. Die 4 Reihen bilden allerdings ein Ungleichgewicht zu den 3 Ein-/Ausgabefeldern. Sieht man die Anzeige der aktiven Farbe allerdings auch noch als Ausgabefeld, so hätten wir 4 Tastenreihen auch 4 Felder entgegengesetzt. Symmetrie wieder hergestellt, pfffff! Gibt man nun noch den Feldern die gleiche Breite wie einer Tastenreihe ist das fast schon die halbe Miete!

Jetzt wo ein Gedankenmodell des UI-Ansatzes vorliegt, fällt auf, dass der Clear-Button noch nicht im Core-UI verankert ist und auch die Labels noch keinen Platz gefunden haben. Die Tastatur ist voll und auch bei den Info-Feldern haben wir keinen Platz mehr für die übergebliebenen Controls. An dieser Stelle würde es sich anbieten, z.B. Controls zu überladen, sprich ihnen eine Mehrfachfunktion zu geben. Im Hinblick auf den Clear-Button ist der einfachste Ansatz hier das Farbfeld auch als Ausgabe/Action-Element zu verwenden. Die Labels lassen sich in ähnlicher Form in die Felder integrieren. Das spart Platz, ist übersichtlich und passt in das bestehende Modell. Der nachfolgende Wireframe verdeutlicht den gewählten UI-Ansatz. Die Wireframes wurden mit Balsamiq Mockups, einem wirklich schicken Tool, erstellt!

Wireframe Konzept des Colorculators

Wie sich zeigt, lässt sich über diesen Ansatz ein übersichtliches UI sowohl im Hoch- wie auch Querformat realisieren.

Das war Teil 1 – Das Konzept. Im zweiten Teil wird das Wireframe-Layout nach HTML5 portiert und der Grundstein für das responsive Webdesign gelegt.

Clean Code: Das Kind braucht einen Namen

code

Klarer Code – Clean Code – ist ein fast schon ein neuer Modebegriff in der IT und Entwicklerwelt. Leider kommt die neuste Mode nicht immer und überall gleich gut an, dabei sollte es gar keine Modeerscheinung sein beim Entwickeln von Software auf klare Formen und Strukturen Wert zu legen.

Als Softwareentwickler verbringt man mehr Zeit damit, existierenden Code zu lesen – seien es Anwedungsbeispiele, Referenz Implementierungen von ähnlichen Problemen, den Code des Teamkollegen oder eben der alte eigene Code von gestern – als neuen Code zu schreiben. Das Lesen dient den Zwecken, die Funktion des Codes zu verstehen, um Fehler zu finden und zuverbessern, die Funktionalität des Codes zu erweitern (manchmal auch nur zu bestätigen) oder um neue Kenntnisse zu erlernen. Dadurch ist es extrem von Vorteil, wenn der Code so angelegt wurde, dass man ohne große Anstrengungen versteht, was da – meist schwarz auf weiß – geschrieben steht.

Dies ist der erste – von hoffentlich vielen – Artikel auf uswusf, der sich mit dem Schreiben von klarem Code befasst.

Namensgebung und -findung

Benamung ist ein wichtiger Bestandteil in der Programmierung. Ständig benamt man neue Variablen, Klassen, Strukturen, Funktionen, Methoden, uswusf. Dabei ist zu beachten, dass sinnvolle und eindeutige Namen gewählt werden. Ein Methoden- oder Funktionsname sollte so gewählt werden, dass es klar wird – ohne den Code kennen zu müssen – was beim Aufruf der Prozedur passieren wird. So erreicht man, dass ein Teil des Codes verständlich ist und bleibt ohne das man zwischen verschiedenen Teilen hin und her springen muss.

Hier einmal einige Beispiele für schlecht gewählte Namen, und wie es besser gehen könnte:

public class Info
{
   private string str;
   private List list_;
 
   public Info(string str)
   {
      this.str = str;
      list_ = new List();
   }
 
   public string Name
   {
      get { return str; }
   }
 
   public void add(Info info)
   {
      if(info == null)
         throw new ArgumentNullException("info");
      list_.Add(info);
   }
 
   public int Depth()
   {
      int d = 0;
      foreach (Info info in list_)
      {
        d = Math.Max(d, info.Depth());
      }
      return 1 + d;
   }
}

Auf den ersten Blick fallen schon einige Dinge auf: unterschiedliche Groß- und Kleinschreibung, sinnfreie Bezeichner und nichtsagende Namen.

Los geht es mit der Klasse: Klassennamen wie Info oder Data sind nicht aussagekräftig. Wenn man die Klasse nicht selbst geschrieben hat, tappt man völlig im Dunkeln, da man nicht weiß, welche Information da nun hinterlegt werden soll. Da wir aber im Moment noch nichts über die Klasse wissen, warten wir erstmal noch ab, bevor wir sie umbenennen.

Die privaten Member-Variablen str und list_ sind in ihrer Schreibweise weder konsistent noch aussagekräftig. Auch empfiehlt es sich, Member-Variablen besonders zu markieren, damit sie sich von “normalen” Variablen abheben, und es zu weniger Namenskonflikten kommt (dazu gleich mehr). Verschiedene Quellen nutzen entweder den vorran- bzw. nachgestellten Unterstrich. Ich persönlich bevorzuge ein vorangestelltes m_ (um sie selber von statatischen Klassen-Variablen, die ich mit einem vorangestellten s_ kennzeichne, zu unterscheiden). Für welches Konzept man sich im Endeffekt entscheidet, bleibt einem selber überlassen, aber man sollte seine Entscheidung konsistent im kompletten Quellcode durchziehen und sich bei größeren Projekten im Team einigen.

Schaut man sich den Rest des Codes an, stellt man fest, dass str eigentlich den Namen des Objektes und list_ Kinder Objekte des gleichen Types speichert. Die add Methode fügt so ein Kind hinzu, gibt den Vorgang aber nicht über den Namen nach außen Preis. Außerdem passt die Kleinschreibung nicht zur restlichen Schreibweise. Wir ändern also wie folgt:

public class Info
{
   private string m_name;
   private List m_children;
 
   public Info(string name)
   {
      m_name = name;
      m_children = new List();
   }
 
   public string Name
   {
      get { return m_name; }
   }
 
   public void AddChild(Info child)
   {
      if(child == null)
         throw new ArgumentNullException("child");
      m_children.Add(child);
   }
 
   public int Depth()
   {
      int d = 0;
      foreach (Info child in m_children)
      {
        d = Math.Max(d, child.Depth());
      }
      return 1 + d;
   }
}

Durch das präfixen der Member-Variablen umgehen wir auch den Namenskonflikt im Konstruktor der Klasse und können nun das für Variablen untypische this wegfallen lassen. Schön.
So langsam wird nun auch klar, dass die Klasse Info eher soetwas wie ein Knoten einer Baumstruktur darstellen könnte. Deshalb benennen wir sie auch im weiteren nach TreeNode um.
Nun nehmen wir uns noch die Depth vor. Der Funktionscode bestätigt, dass Depth die Tiefe des Knotens berechnet. Diese Berechnung sollte sich auch im Namen widerspiegeln, ComputeDepth ist daher besser gewählt. Die Variable d ist nur ein Platzhalter. Natürlich, der Code der Depth bzw. ComputeDepth Funktion ist überschaubar, dennoch sollten immer aussagekräftige Namen gewählt werden. d steht in diesem Fall für die Tiefe der Kinder, sollte das auch klar und deutlich widergeben. Fassen wir also die Änderungen im folgenden Codesegment zusammen.

public class TreeNode
{
   private string m_name;
   private List m_children;
 
   public TreeNode(string name)
   {
      m_name = name;
      m_children = new List();
   }
 
   public string Name
   {
      get { return m_name; }
   }
 
   public void AddChild(TreeNode child)
   {
      if(child == null)
         throw new ArgumentNullException("child");
      m_children.Add(child);
   }
 
   public int ComputeDepth()
   {
      int depthOfChildren = 0;
      foreach (TreeNode child in m_children)
      {
        depthOfChildren = Math.Max(depthOfChildren, child.ComputeDepth());
      }
      return 1 + depthOfChildren;
   }
}

Respektiere die Sprache

Im Allgemeinen gilt: Klassen, Strukturen, Enums und Variablen stehen oft für Dinge (Person, Rectangle, Width) und sollten deswegen auch so bezeichnet werden, also class Person, struct Rectangle bzw. int depth. Dabei kann man auch zusammengesetzte Ausdrücke verwenden, wie z.B. class TeamMember, enum ProgrammingStyle oder int depthOfChildren.
Es ist wichtig die Programmiersprache der Wahl respektiert. So ist es in C++ oder Java Gang und Gäbe, dass man Funktions- bzw. Methodennamen klein schreibt: computeTotalWidth, createUserFactory. In C# würden diese als ComputeTotalWidth und CreateUserFactory und in Perl etwa als compute_total_width bzw. create_user_factory deklariert werden. So unterschiedlich wie der Jargon der Sprache auch sein mag, gmeinsam gilt für alle: Funktionen und Methoden bezeichnen einen Vorgang und sollten immer mit einem Verb beginnen (compute, create, get, …) und beschreiben, was sie tun. (computeDepth, createFactory, getResult, …).
Auch sind nahzu alle Programmiersprachen – zumindest die Relevanten – so konzipiert, dass ihnen die englische Sprache zu Grunde liegt, die Befehle der Programmierprache also Begriffe aus dem englischen Wortschatz sind. Eigener Code darf diesen Grundsatz nicht brechen. Ein Funktionsname KindHinzufügen ist also in keinem Fall akzeptabel, hat in professionalem Code nicht zu suchen und sollte aller höchstens (wenn überhaupt) im Unterricht in der Unterstufe in Schulen akzeptiert werden. Außerdem bricht in diesem Falle die deutsche Sprache die Regel, dass Prodcedurennamen mit einem Verb beginnen sollten.

Konzepte sind wichtig und sollten eingehalten werden

Hat man sich dann auch mal für ein Namenskonzept entschieden, sollte man dies auch immer Anwenden. Schlechter Code verwendet z.B. an verschiedenen Stellen andere Bezeichnungen für die selbe Funktionalität – zum Löschen von etwas, findet man dann clear, delete, destroy, remove oder Ähnliches.

Abkürzungen bleiben erlaubt, wenn sie sinnvoll gewählt sind

Ein Relikt aus alten Zeiten ist auch, den Typ der Variable mit dem Namen zu verheiraten. Vorallem in älteren Win32 Anwedungen fand und findet man immer noch Ausdrücke wie LPSTR lpstrName, int iLength oder PBYTE pbData. Man nahm fälchlicherweise an, dass solche Präfixe zum besseren Verständnis des Codes und dessen Ablauf beitragen. Heute wissen wir, dass solcher Code Smell redundant ist, das Verstehen des Codes nicht verbessert, sondern oft sogar erschwert.
Es sei auch abzuraten, Namen zu viel und zu stark abzukürzen. Das Bekannte i als Zählervariable in for-Schleifen wird sich wohl nie abschaffen lassen, aber man sollte sich immer überlegen, ob man vielleicht doch einen geschickteren Namen findet.

for(int i = 0; i < rows.Length; ++i)
{
  for(int j = 0; j < columns.Length; ++j)
  {
     // ...
  }
}

Eindeutiger wird es so:

for(int rowIndex = 0; rowIndex < rows.Length; ++rowIndex)
{
  for(int colIndex = 0; colIndex < columns.Length; ++colIndex)
  {
     // ...
  }
}

(Ich hab hier absichtlich colIndex anstatt columnIndex gewählt um zu zeigen, dass Abkürzungen kein absolutes no-go sind, sondern durchaus mit Bedacht eingesetzt werden dürfen. Anmerkung: Das foreach anstatt for in diesem Fall die bessere Lösung ist, ist bekannt, für dieses Beispiel aber nicht relevant.)

Fazit

Beim Programmieren neigt man oft dazu, ein Stück Code schnell und kurz “runterzuschreiben”. Dabei ist im ersten Moment die Benamung für einen selber nicht so wichtig, da man sich direkt mit dem Code auseinandersetzt und ja selber weiß, was man gerade genau meint. Wir tendieren gerne dazu – vorallem Variablen – schlampig und uneindeutig zu bezeichnen – dass das nicht nur uns, h3sondern auch unseren Nachfolgern, anderen Teammitgliedern und oft auch dem Erfolg des Projektes zum Verhängnis werden kann, weil man zuviel Zeit und Geld beim Lesen und Verstehen des Codes verschwendet. Man sollte sich also selbst einen gefallen tun, und von Anfang an Klassen, Variablen, Funktion, … so benennen, dass ohne große Recherche klar erkannnt werden kann, was hinter der Bezeichnung verborgen steht.
So restriktiv diese Regeln auf den ersten Blick auch sein mögen, erlauben sie dennoch genug Spielraum für den eigenen Stil, den sich jeder Entwickler meiner Meinung nach erhalten sollte. Es wäre doch auch langweilig, wenn wir alle mit den gleichen Klamotten rumlaufen würden.