Kurzer Einwurf: Hipstagraphy ist ein erster Testlauf für ein mögliches neues Grundlayout (ohne Tapete etc.) für Antville. Ich hoffe das geht in dem Tempo weiter und in ein paar Monaten gibt's dann einen Release.

Wie vielleicht einige schon mitbekommen haben, arbeite ich gerade an einem speziellen Entwicklungszweig "New Species". Wie der Name schon andeutet handelt es sich dabei um etwas wirklich Neues im Bereich Antville-Layout. Gleich vorweg: es ist sich ein experimenteller Entwicklungszweig, Google würde diese Initiative unter dem Label „Labs“ präsentieren. Experimente können zu einem finalen Release führen, aber auch ein guter und interessanter Versuch bleiben. Die Kernziele sind daher sehr optimistisch und zukunftsorientiert ausgewählt: Unterstützung von HTML5, CSS3 und bessere Ausnutzung der Möglichkeiten von JavaScript bzw. jQuery. Eine Verbesserung der Barrierefreiheit soll ebenfalls immer im Blickfeld stehen. Betroffen werden nicht nur die von Antville-Usern veränderbaren Bereiche sein, auch die Core-Skins, die nicht von Usern geändert werden können, sind eingeschlossen.

HTML5 wird einigen schon einmal als Buzzword über den Weg gelaufen sein. Dabei handelt es sich um eine sinnvolle Weiterentwicklung des alten HTML 4.0 Standards, welcher eigentlich noch immer aktuell ist. Schließlich hat kein Browserhersteller je XHTML in allen Facetten und Nuancen umgesetzt. HTML5 beschränkt sich allerdings nicht nur auf das Markup, sondern umfasst auch viele andere Gebiete. Beispielsweise fallen auch native Video- und Audiowiedergabe und die ganze Diskussion unter dieses Schlagwort, viele JavaScript-Neuerungen und CSS3 werden ebenfalls unter HTML5 zusammen gefasst – auch wenn‘s so nicht im W3C-Standard stehen wird.

Man braucht aber keine Angst haben, vieles bleibt wie bisher. Allerdings kommen einige neue HTML-Elemente in meine neue Layout-Variante. Ein gutes Beispiel ist

Wichtig für mich ist, dass es einfacher wird, ein Antville-Layout an seine eigenen Bedürfnisse anzupassen. Deswegen versuche ich derzeit alle Tabellen aus dem Standardlayout zu werfen und durch semantisch korrekte Elemente zu ersetzen. Aber wie gesagt, keiner braucht Angst vor den Neuerungen haben. Schließlich handelt es sich hier nur um ein Experiment, dass vielleicht später in den Antville-Source wandert und auch auf Antville.org umgesetzt werden könnte.

Außerdem werde ich versuchen, so gut wie möglich CSS3 in das New Species Layout zu integrieren und die neuen Möglichkeiten sinnvoll einfließen zu lassen. Dabei denke ich vorallem an Webfonts, wobei ich hier noch nicht sicher weiß, wie es sich mit den Lizenzen exakt verhält und welchen Weg man hier einschlagen kann. Wirklich freie Schriften gibt es ja wenige.

Da alles im Kontext meines Studentendaseins im Rahmen eines Praktikums umgesetzt wird, bitte ich um Verständnis, dass ich eine Fokussierung vornehmen musste. Nicht alles, was im Entwicklungszweig landet, wird auch so auf Antville laufen. Höchste Priorität hat daher für mich ein Abschluss des Praktikums in der gegeben Zeit, danach wird erst über die Integration und Zusammenführung der Entwicklungszweige mit allen Beteiligten gesprochen.

Das war‘s schon, salut! Und natürlich happy coding.

Firefox, Chrome, Safari, Opera: Prinzipiell sollte es überhaupt keine Probleme mit diesen Browsern geben. Chrome ist gemeinsam mit Safari auf einem sehr fortschrittlichen Niveau, selbst die etwas älteren Versionen sind meilenweit vorm Internet Explorer. Firefox ist für die Updatehäufigkeit seiner User bekannt, es sind kaum mehr Firefox 3.0 im Umlauf. Daher sind CSS-seitig alle notwendigen Formatierungen möglich. Für Opera gilt ähnliches.

Internet Explorer: Selbst Microsoft sieht den Internet Explorer 6 als tot an, der 7er wird ebenfalls bald auf der Abschussliste stehen. Daher wird das Layout nur mit dem Internet Explorer 8 und 9 getestet werden. Beide sollten genug fortgeschritten sein, um endlich einen modernen Entwicklungsprozess zu ermöglichen.

Generell ist das primäre Ziel von New Species auf die neuen Möglichkeiten einzugehen und diese aktiv einzusetzen. Wir wollen die neuen Entwicklungen zu einem späteren Zeitpunkt auch auf Antville.org einbauen und so der breiten Masse zur Verfügung stellen. Einen konkreten Zeitpunkt können wir euch aber nicht nennen, da wir uns auch gesondert mit den Punkten Integration und Kompatibilitätsmodus auseinander setzen müssen. Das ist allerdings kein Bestandteil vom Uni-Praktikum und dieses steht im Moment im Mittelpunkt vom Redesign.

Eine der wichtigsten Bestandteile von Antville sind die zahlreichen Formulare. Bisher bestehen sie aus Tabellen, die schwierig mit CSS zu beeinflussen sind. In Zukunft werden sie allerdings durch ein <div>-basiertes Layout ersetzt.

Grundsätzlich habe ich bisher 2 Formulartypen definiert. Zum einen gibt es Label-Input-Formulare. Sie bestehen zum Großteil aus Textlabels und simplen Texteingabefeldern. Am Ende findet sich noch ein Submit-Button zum Absenden. Jede Zeile wird in ein <div> mit der CSS-Klasse „row“ verpackt. Innerhalb der Zeile wird mit Hilfe von CSS das Label-Element linksbündig ausgerichtet mit einer fixen Breite. Über die Klassen „w140“, „w160“, „w200“, usw. werden die Breiten der Labels definiert. Dies kann bei besonders kurzen bzw. langen Labels notwendig sein. Interessant ist diese Formatierung für die unterschiedlichen Sprachversionen, da durch eine kleine Änderung im Standardlayout die Breiten an die Textlängen angepasst werden können. Hier ein Beispiel:

<form id="myDemoForm" method="post" action="myAction">
<div class="form">
   <div class="row">
      <label for="myFormField">
         <% gettext "Label for the input field" suffix=":" %>
      </label>
      <input type="text" name="myFormField" id="myFormField" />
   </div>
    
   <!-- some more rows with input fields... -->
    
   <div class="row">
      <button type="submit" id="submit" name="register" value="1">
         <% gettext Register %>
      </button>
   </div> 
</div>
</form>

/** CSS-Auszug **/ .form .row label:first-child { width: 160px; display: inline-block; }

.form .row .col { display: inline-block; }

.w100 { width: 100px; }

Der zweite Typ sind Listenansichten mit mehreren verbunden Aktionen. Ein Beispiel: Eine Liste aller Fotos inkl. der Aktionen „Bearbeiten“, „Umbenennen“ und „Löschen“ auf der rechten Seite. Hier gibt es ein <hr /> zum Trennen der einzelnen Listeneinträge, danach folgt ein <div class="details"> mit allen Informationen zum Eintrag und darauf folgt eine Liste mit den zur Verfügung stehenden Optionen. Damit sollte auch die Zugänglichkeit für Screenreader etc. deutlich verbessert werden.

<hr class="listSeparator" />
<div class="listNavigationItem">
   <div class="details">
      <h2><% membership.name %></h2>
      <p><em><% membership.role %></em></p>
      <p><% membership.user.url | link %></p>
   </div>

   <ul>       <li>Editieren</li>       <li>Bearbeiten</li>       <li>Löschen</li>    </ul> </div>

Da ich noch nicht alle Skins und Formulare überarbeitet habe, können sich noch weitere Typen heraus kristallisieren. Allerdings scheinen diese beiden Varianten die am häufigsten vorkommenden zu sein und damit ein Großteil der Formulare auf Antville abdecken.

Die letzten Monate hat sich eine neue Denkweise in die Webdesignwelt eingenistet. Vor der bunten Web 2.0 Bewegung galt häufig Graceful Degration als das Ziel allen Strebens. Dabei wurde jedes Feature so umgesetzt, dass es auch einen sinnvollen Fallback für ältere Browsergenerationen gab. Mit den häufigen Update und automatischen Aktualisierungen hat sich dieses Problem aber – ausgenommen Microsofts Internet Explorer – mehr oder weniger in Luft aufgelöst. Daher musste ein neuer Ansatz gefunden werden.

Progressive Enhancement versucht alle neuen Features von Browsern bestmöglich einzusetzen. Statt sich auf den kleinsten gemeinsamen Nenner zwischen den Browsern zu einigen, versucht man nun eine Basisversion direkt im Browser so weit wie möglich zu verbessern. Ein bekanntes Beispiel sind runde Ecken und Schattenwürfe. Statt mit Hintergrundgrafiken und anderen Tricks zu arbeiten, bietet man für ältere Browser ein einfaches CSS an, inkludiert aber gleichzeitig auch die neuen CSS3-Eigenschaften. Da das CSS3 von älteren Browsern ignoriert wird, erhalten sie nur die Basisversion. Neuere Browser wenden allerdings die Regeln korrekt an und erhalten so eine aufgehübschte Webseite.

.rounded-corners {
   border: 1px solid black;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
}

Was mit CSS-Mitteln funktioniert, kann auch auf die clientseitige JavaScript-Programmierung umgelegt werden. Browser, die bestimmte Features nicht unterstützen, bekommen diese einfach nicht mit alten Mitteln zur Verfügung gestellt und müssen mit der Basisvariante der Webseite auskommen.