Kategorien
Webdesign

Tipps & Tricks mit OpenStreetMap

Wenn „Google Maps“ Windows ist, dann könnte man „OpenStreetMap“ (OSM) als das Linux unter den Web-Kartendiensten ansehen. Tausende Freiwillige setzen Zeit und Geld ein, um freie Software zu erschaffen – in diesem Fall eine freie Weltkarte. Dabei ist OSM, wie Linux auch, in manchen Aspekten dem Platzhirschen unterlegen und in manchen besser.

Zum Thema „OpenStreetMap“ (OSM) behandle ich nun drei Themen:

  1. OSM via HTTPS
  2. Geocoding für OSM
  3. W3C-Geolocation

Als Spielwiese stelle ich ein paar Skripte bereit (mehr dazu am Ende des Artikels). Zum einen sind das JavaScripte, mit denen eine so genannte Slippy-Map im Browser dargestellt wird. Das ähnelt in Grundzügen einer von „Google Maps“ her bekannten interaktiven Karte, abzüglich Funktionen wie Satellitenkarten, Street View, Routenplanung und so weiter. Zum anderen stelle ich zwei Proxy-Server in Form von PHP-Skripten bereit, die Inhalte zwischenspeichern und sich um die Kommunikation mit OSM- und CloudMade-Servern kümmern.

OpenStreetMap über HTTPS

Wollten Sie schon einmal einen Kartendienst über HTTPS verwenden? Nutzer sehen in der Regel dann das:

unsichere elemente

Für gewöhnlich werden die Karten-Kacheln über HTTP geladen, daher erscheint diese Warnung. In der Praxis möchte man seine Besucher oder Nutzer nicht mit solchen Warnungen verunsichern oder auf die Nerven gehen. Einen Kartendienst über HTTP zu nutzen, geht also nicht so ohne weiteres.

Google bietet zwar für zahlungswillige Kunden auch Kacheln über HTTPS an – aber das dürfte für die meisten nicht in Frage kommen. Eine andere Alternative wäre, einen eigenen OSM-Server aufzusetzen. Aber auch das ist in den meisten Fällen überdimensioniert. Einfach nur Karten-Kacheln per HTTP übertragen, ohne Protokollbruch und ohne Warnung – das muss doch gehen?

So geht’s

Wir schalten zwischen Anzeige der Karte und dem OSM-Server ein Proxy-Skript. Alle Kachel-Anfragen des Skripts OpenStreetMap.js werden auf ein Proxy-Skript umgelenkt, nach folgendem Muster:

var url = [„tileproxy.php?layer=ID&path=path/${z}/${x}/${y}.png"];

Das Proxy-Skript tileproxy.php holt die Kacheln vom OSM-Server. Das dauert natürlich wesentlich länger, als OSM-Server direkt per JavaScript anzusprechen. Um dieses Problem anzugehen und die OSM-Server nicht übermäßig zu belasten, speichert das Skript die Kacheln auf dem Server.

Zusätzlich versieht der Proxy jede Kachel mit einer Prüfsumme, dem sogenannten Etag.

Der Browser fragt mit dem Etag, ob die Datei noch aktuell ist.
Der Browser fragt mit dem Etag, ob die Datei noch aktuell ist.

Das Etag wird vom Proxy-Skript als HTTP(S)-Header-Element gesendet. Der Browser merkt es sich.

Wenn der Browser später eine Kachel erneut anfordert, sendet er dieses Etag in seiner HTTP(S)-Anfrage mit und fragt den Proxy quasi „Ich habe hier eine Kachel mit diesem Etag – ist diese Kachel noch aktuell? Wenn nicht, schicke mir die Kachel!“ Das Proxy-Skript schaut im Server-Cache nach. Wenn es unter dem Etag eine aktuelle Kachel findet (ein sogenannter „Hit“), informiert es den Browser, dass die Kachel noch verwendet werden kann und sendet sie nicht noch einmal – das spart in der Summe viel Zeit und Datenvolumen. Findet das Skript die Kachel nicht oder aber eine „abgelaufene“ Kachel („Miss“), besorgt es sich die Kachel frisch von einem OSM-Server und übermittelt sie an den Browser.

Aus dem Browser-Cache sind Kacheln mit ca. 30ms sehr schnell geholt. Der Server liefert sie auch noch recht flott innerhalb ca. 81ms. Muss eine Kachel erst vom OSM-Server geholten werden, dauert es einige hundert Millisekunden.
Aus dem Browser-Cache sind Kacheln mit ca. 30ms sehr schnell geholt. Der Server liefert sie auch noch recht flott innerhalb ca. 81ms. Muss eine Kachel erst vom OSM-Server geholten werden, dauert es einige hundert Millisekunden.

Auf diese Weise gibt es zwei Cache-Ebenen, die aktiv genutzt werden: Den Cache im Browser und den Proxy-Cache auf dem Server. Erst, wenn eine Kachel in keinem der beiden Caches gespeichert ist, geht eine Anfrage zum OSM-Server raus.

Fazit: Prinzipiell funktioniert diese Methode auch mit proprietären Diensten wie Google Maps. Dort ist es zwar grundsätzlich erlaubt, Kacheln zwischenzuspeichern – aber nur mit Einschränkungen. In den Nutzungsbedingungen unter Punkt 10 „Licence Restrictions“ heißt es

10.3 (You must not) pre-fetch, cache, or store any Content, except that you may store limited amounts of Content for the purpose of improving the performance of your Maps API Implementation if you do so temporarily, securely, and in a manner that does not permit use of the Content outside of the Service;

Insbesondere der letzte (Halb-)Satz schränkt die Erlaubnis de facto auf einen geschlossenen Benutzerkreis ein, bei dem sich Nutzer erst anmelden müssen. Anderenfalls könnte man diese Bedingung kaum wirksam erfüllen.

Unser OSM-Proxy-Skript kann auch außerhalb von geschlossenen Benutzerkreisen und sowohl per HTTP als auch per HTTPS genutzt werden. Ohne den Protokoll-Bruch gibt es auch keine Browser-Warnung, dass „unsichere Elemente“ geladen werden. Trotz der einfachen Einrichtung können die Vorteile einer lokalen Kachel-Auslieferung genutzt werden, ohne allzu große Nachteile wie zum Beispiel durch das Aufsetzen eines eigenen OSM-Servers zu haben.

GeoCoding mit OSM

Was ist Georeferenzierung? Kurz gesagt: Georeferenzierung ist die Zuweisung von Koordinaten zu einer Adresse. Ein Beispiel: Der Ort Buxtehude hat die Koordinaten 53.477165 (Breite) und 9.703144 (Länge). Koordinaten benötigen wir, um auf der Karte einen gewünschten Ausschnitt zu zeigen.

OSM bietet, zumindest meiner Ansicht nach, derzeit (Juli 2009) keine wirklich praktisch nutzbare Georeferenzierung (engl. „Geocoding“) an. Eine einfache Suche nach „Jungfernstieg, Hamburg, Germany“ liefert beim NameFinder kein richtiges Ergebnis (Hinweis: jetzt — August 2009 — ist der Namefinder sogar offline): Die Suche führt dort nach Thüringen und nicht ins Zentrum von Hamburg.

Weil OSM derzeit kein Zuweisungsystem hat, das problemlos funktioniert und vor allem einfach ist, gehen wir den Umweg über die von CloudMade angebotene Geocoding-API. CloudMade arbeitet eng mit der OpenStreetMap-Gemeinschaft zusammen.

Wir schicken dem CloudMade-Server eine Adresse, dessen GeoCoding-Dienst parst sie, sucht die Koordinaten heraus und schickt sie uns. Mit diesen Koordinaten können wir auf der OSM-Karte den richtigen Ausschnitt anzeigen.

So geht’s

Wie schon bei tileproxy.php nutzen wir den Cache-Mechanismus PEAR::Cache_lite, um Resultate von fremden Servern zu speichern. Wir machen das in diesem Fall aber nicht nur aus Leistungsgründen, sondern weil wir CloudMade nicht übermäßig belasten wollen. Mit dem Cache können wir die Anzahl Abrufe klein halten. Und natürlich wollen wir wieder den HTTP/HTTPS-Protokollbruch und die Meldung „unsichere Elemente“ vermeiden.

Auch dieses Geocoder-Skript ist ein Proxy-Server und deswegen heißt es geocoderproxy.php. Ähnlich wie bei tileproxy.php sendet das Skript bei jeder Anfrage ein besonderes HTTP(S)-Header-Element namens X-OSMGEOCODERPROXY-CACHE. Findet es zu einer Anfrage ein gespeichertes Ergebnis, bekommt das Element den Wert „Hit“ (Treffer). Findet es kein Ergebnis, hat es den Wert „Miss“ (Fehlschlag) und holt von CloudMade das Ergebnis. Auf diese Weise kann man im Antwort-HTTP-Header sehen, zum Beispiel in Firebug, ob eine Datei aus dem Cache oder direkt vom Server des Anbieters kam.

Hier ist zu sehen, dass das geocoderproxy.php einen HIT meldet. Die Koordinaten dieser Adresse sind also noch im Proxy-Cache, so dass keine Anfrage an einen CloudMade-Server geschickt werden muss
Hier ist zu sehen, dass das geocoderproxy.php einen HIT meldet. Die Koordinaten dieser Adresse sind also noch im Proxy-Cache, so dass keine Anfrage an einen CloudMade-Server geschickt werden muss

Nun zentrieren wir die OSM-Karte auf die von CloudMade gelieferten Koordinaten. Dazu muss zunächst ein sogenanntes LonLat-Objekt erzeugt werden. Mit der Methode OpenLayers::setCenter() wird die Karte dann zentriert:

var lonLat = new OpenLayers.LonLat(
  d.ResultSet.Result.Longitude,
  d.ResultSet.Result.Latitude
).transform(map.displayProjection, map.projection);
map.setCenter (lonLat, 16);

Per JavaScript setzen wir an diese Koordinaten noch eine Markierung, die bei einem Linksklick die geparste Adresse in einer Sprechblase anzeigt:

var layer_text = d.ResultSet.Result.Address+' '
   +d.ResultSet.Result.City+' '
   +d.ResultSet.Result.State;
addMarker(layer_markers, lonLat, layer_text.replace(/^(\s+)(.*)(\s+)$/g, '$2'));

Nun sieht unsere OSM-Karte nicht mehr nur schön aus, sondern hat auch einen Nutzwert bekommen.

Fazit: Die Geocoding API von CloudMade ist flexibel. Allerdings ist sie nicht besonders schnell und liefert aufgrund der oft fehlenden Hausnummern im OSM-Datenbestand insbesondere bei langen Straßen keine genauen Koordinaten. Weiterhin gibt es Einschränkungen beim Parsen von Ortsangaben. Andere Dienste wie Google Maps/Yahoo Maps/Bing Maps haben mit Suchanfragen wie „21640 Horneburg“ keine Probleme. Lässt man Hausnummern und Postleitzahlen weg und begnügt man sich mit straßen-genauen Ergebnissen, liefert die GeoCoding-API von CloudMade meist brauchbare Ergebnisse.

Zum Vergleich ist auf der „Spielwiese“ noch eine GeoCoding-Suche mit Yahoo eingebaut. Beachten Sie bitte, dass die Nutzungsbedingungen von Yahoo es nicht erlauben, die Yahoo-GeoCoding-API mit anderen Diensten als Yahoo Maps zu nutzen.

W3C-Geolocation mit Firefox 3.5 und Google Chrome 2.0

Den ungefähren Standort eines Web-Surfers daheim oder am Arbeitsplatz herauszufinden ist nicht schwer. Es gibt kostenlose und kostenpflichtige Datenbanken, welche IP-Adressen bestimmten Orten zuweisen, beispielsweise GeoLite von Maxmind.

Mit einer solchen serverseitigen Geolocation kann man als Nutzer nicht verhindern, dass die eigene IP einem Ort zugeordnet werden kann. Ob das datenschutzrechtlich einwandfrei ist, ist zumindest eine Frage wert. Eine Entscheidung darüber überlasse ich an dieser Stelle Datenschützern und Juristen.

Datenschutzrechtlich – meiner Meinung nach – einwandfrei ist der Entwurf der Geolocation-API des W3C, mit dem man via JavaScript, also clientseitig, den ungefähren Standort eines Nutzers herausfinden kann. Der Nutzer kann sowohl in Firefox 3.5 als auch in Chrome 2.0 die W3C-Geolocation abschalten. Firefox 3.5 fragt sogar standardmäßig den Nutzer, ob er seinen Standort preisgeben will oder nicht. Er behält also die Kontrolle über seine Informationen.

Firefox 3.5 fragt artig, ob er „seinen“ Standort preisgeben darf.
Firefox 3.5 fragt artig, ob er „seinen“ Standort preisgeben darf.

Firefox ab Version 3.5 hat die API fest eingebaut. Chrome kann mit dessen eingebautem Gears die API nutzen. Nutzer anderer Browser (von einigen Handy-Browsern abgesehen, die ebenfalls Gears benötigen) schauen derzeit noch in die Röhre, so dass der Nutzen der API derzeit noch eingeschränkt ist. Ein nettes Gimmick ist die Funktion aber schon heute.

So geht’s

Ein W3C-Geolocation-Objekt wird in unserem Fall genau so benutzt wie die Gears-Geolocation-API. Der einzige Unterschied liegt in der Erzeugung des JavaScript-Geolocation-Objekts.

In Firefox 3.5 (und, ich nehme an, in zukünftig erscheinenden Browsern wird es auch so sein) wird das Objekt so erzeugt:

var gl = navigator.geolocation;

In Chrome läuft das so:

var gl = google.gears.factory.create('beta.geolocation');

Im weiteren Verlauf unseres JavaScripts ist die Verwendung in beiden Browsern gleich. Damit andere Browser nicht mit der Geolocation behelligt werden, habe ich eine kleine Browser-Abfrage eingebaut:

var ua = navigator.userAgent.toLowerCase().match(/(chrome|firefox)\/([0-9]+\.[0-9]+)/);
var gl = false;

if(navigator.geolocation || (ua && ua[1] && ua[2]))
{
	if(navigator.geolocation || (ua[1] == "firefox" && parseFloat(ua[2],10) >= 3.5))
	{
		var gl = navigator.geolocation;
	} else if (ua[1] == "chrome" && parseFloat(ua[2],10) >= 2.0)
	{
		var gl = google.gears.factory.create('beta.geolocation');
	}
}

Wenn im folgenden die Variable „gl“ noch den Wert „false“ hat, steht die W3C-Geolocation nicht zur Verfügung. Das lässt sich dann einfach abfragen mit

if(!gl) {
	alert('Geolocation steht nicht zur Verfügung');
     // Geolocation-Funktionen fuer 'alte' Browser abschalten
}

In meinem Beispiel wird bei einem Click-Event auf den Knopf #locateme die Methode getCurrentPosition() aufgerufen. Firefox 3.5 fragt daraufhin um Erlaubnis, die Information herauszugeben. Wie unter „Yahoo! GeoCoding API mit OSM“ beschrieben, wird dann ein LonLat-Objekt erzeugt, mit dem die Karte auf die ermittelten Koordinaten zentriert und eine Markierung gesetzt wird.

Fazit: Die W3C-Geolocation-API ist noch neu und wird außer von Firefox 3.5 und Google Chrome mit Gears noch von keinem anderen Desktop-Browser unterstützt. Das beschränkt den Nutzen derzeit noch auf Umgebungen mit festen Browser-Vorgaben, zum Beispiel Intranets.

Der Urheber des W3C-Geolocation-API-Entwurfs Google setzt die Technik bereits auf Google Maps ein. Ich nehme daher an, dass die API ein offizieller Standard werden wird und andere Browser-Hersteller nachziehen werden.

Einen hab ich noch

Gut, das hat nun nicht direkt etwas mit OpenStreetMap zu tun. :) Interessant ist’s aber dennoch: Die GeoCoding APIs der „drei großen“ Kartendienste sind nahezu perfekt. Könnte man meinen. Während sich Google Maps und Bing Maps tatsächlich keine auf Anhieb erkennbare Blöße geben, leistet sich Yahoo Maps bei der Georeferenzierung einen kleinen Schnitzer.

Versuchen Sie mal, bei Yahoo Maps nach diesen Adressen zu suchen, und zwar nach dem dort vorgeschlagenen Muster „Adress, City, State“:

  • Reismühle, Hamburg, Germany
  • ABC-Straße, Hamburg, Germany

Yahoo Maps

Yahoo Maps findet nichts und bietet jeweils das Zentrum von Hamburg als Ersatz an. Mit etwas Tüfteln kann man jedoch herausfinden, dass Yahoo Maps Umlaute und Bindestriche gerne mit einem Kaufmanns-Und „&“ maskiert haben möchte:

  • Reism&hle, Hamburg, Germany
  • ABC&Straße, Hamburg, Germany

Erst, wenn man dem Suchmuster „Straße, Ort, Bundesland, Land“ folgt, funktioniert die Suche auch ohne diese seltsame Maskierung:

  • Reismühle, Hamburg, Hamburg, Germany
  • ABC-Straße, Hamburg, Hamburg, Germany

Deutlich besser ist die Benutzbarkeit, wenn man über den Menüpunkt „Language“ die Sprache manuell auf Deutsch umstellt — dann wird nämlich ein besseres Eingabemuster vorgeschlagen: „Straße/Hausnummer, Postleitzahl, Ort“. Warum nicht gleich so?

Natürlich hat man als normaler Nutzer oft weder die Zeit, die Kenntnisse noch die Geduld, diese ärgerliche Usability-Hürde zu nehmen und geht eben schnell rüber zu Google Maps oder Bing Maps.

Zu den Beispiel-Skripten

Wenn Sie selbst in das Thema eintauchen möchten, die Skripte stehen zum Download bereit. Beachten Sie bitte, dass Sie für das GeoCoding API-Schlüssel von YAHOO oder CloudMade benötigen. ™

Links

Kategorien
Webdesign

Webdesign-Trends im Jahr 2009

Von Vitaly Friedman, übersetzt von Rene Schmidt

Webdesigner sind experimentierfreudig. Wir beobachten, wie Menschen mit unseren Werken interagieren und wir probieren gerne neue Designs aus, die sich vielleicht durchsetzen und zu Klassikern werden. Über die letzten Monate haben wir zahlreiche Webdesigns analysiert, neue Trends ausgemacht und viele Design- Programmier-Lösungen bewertet. Wir präsentieren Ihnen nun Möglichkeiten, neue Trends umzusetzen und entsprechende Beispiele. In diesem Artikel zeigen wir Ihnen 10 Trends, die wir ausgemacht haben.

Typische Design-Elemente im Jahr 2009

Lassen Sie uns zunächst einen Blick auf die unserer Meinung nach wichtigsten Trends werfen.

  1. Prägedruck

    Web Webdesign-Trends für das Jahr 2009

  2. Rich User Interfaces

    Web Webdesign-Trends für das Jahr 2009

  3. Transparente PNGs

    Web Webdesign-Trends für das Jahr 2009

  4. Große Schriften

    Web Webdesign-Trends für das Jahr 2009

  5. Alternative Fonts (sIFR z.B.)

    Web Webdesign-Trends für das Jahr 2009

  6. Modale Dialoge

    Web Webdesign-Trends für das Jahr 2009

  7. Media blocks

    Web Webdesign-Trends für das Jahr 2009

  8. Magazin-Layout

    Web Webdesign-Trends für das Jahr 2009

  9. Karussel-Slideshows

    Web Webdesign-Trends für das Jahr 2009

  10. Einführungstexte

    Web Webdesign-Trends für das Jahr 2009

Schauen wir uns diese Trends näher an.

1. Prägedruck

Den Trend zu Texten mit Prägedruck-Schriften haben wir im Webdesign während unserer Untersuchung nicht erwartet. Diese Technik wurde bis vor kurzem kaum im WWW verwendet. Prägedruck gibt es in verschiedenen Stilen auf verschiedenen Websites zu verschiedenen Themen. Besonders häufig wird sie bei Produktpräsentationen verwendet.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

2. Rich User Interfaces

Glücklicherweise werden die Benutzerschnittstellen auf modernen Websites und Web-Anwendungen schöner und benutzbarer. Im letzten Jahr wurde die Benutzerfreundlichkeit erheblich verbessert. Die Benutzerschnittstellen sind schöner und benutzbarer geworden. Inzwischen ähneln sie immer mehr klassischen Desktop-Anwendungen. AJAX und Flash werden häufig eingesetzt, um Nutzern die Art von dynamischer Interaktion zu bieten, die sie von anspruchsvollen und professionellen Anwendungen erwarten.

Insbesondere Weißraum haben wir im letzten Jahr häufig gesehen, ebenso wie mehr Zwischenräume und generell mehr Platz für Designelemente. Wir haben auch beobachtet, dass viele moderne Benutzerschnittstellen visuell auf Nutzerinteraktionen reagieren. Beispielsweise ändert sich die Darstellung eines Buttons, wenn man auf ihn klickt. Der Button sieht dann “eingedrückt” aus. Zu sehen ist der Effekt beispielsweise auf Newspond.com und Quicksnapper.com). Weiterhin können immer mehr Dienste von den Nutzern personalisiert werden. Für uns ist das ein klares Zeichen, dass das Jahr 2009 das Jahr der adaptiven Benutzerschnittstellen ist.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Beide Beispiele sind der Beweis, dass Entwickler mehr Wert auf die Präsentation der Funktionen ihrer Web-Anwendungen legen und versuchen, sie interaktiver zu machen.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

3. Transparente PNGs

Transparente PNGs werden, obwohl der Internet Explorer 6 sie nicht unterstützt, inzwischen häufig eingesetzt. Offensichtlich versuchen Designer, Hintergrundbilder nahtloser zu kombinieren und einen Stil nachzuahmen, der bisher meist nur in Print-Magazinen verwendet wurde.

In den meisten Fällen heben sich halbtransparente Hintergründe vom Rest einer Seite ab und eignen sich daher gut, um ein wichtiges Designelement hervorzuheben, beispielsweise eine Überschrift oder eine Ankündigung. Manchmal werden transparente PNGs auch als Hintergrund für modale Dialoge verwendet.

Im letzten Jahr haben wir schon verschiedene Wege vorgestellt (engl.), wie Sie Transparenz im Webdesign einsetzen können. Viele Designer scheinen das tatsächlich gemacht zu haben. Meist wird Transparenz im Kopf- oder Fußbereich einer Seite verwendet, andere Designs gehen aber darüber hinaus.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

4. Große Schriften

In der Vergangenheit haben wir bereits einige sehr schöne Beispiele für den Einsatz von großen Schriften vorgestellt. Im Jahr 2009 bleiben sie weiterhin populär. Besonders Design-Agenturen, Portfolios, Produkt-Websites und Onlinedienste nutzen große Schriften, um ihre wichtigsten Aussagen hervorzuheben.

Die Größe der Schriften geht oft über 36 Pixel hinaus und in vielen Fällen werden teure Schriften eingesetzt, um Botschaften zu übermitteln. Auch die Aspekte der Typografie scheinen ins Zentrum der Aufmerksamkeit bei Webdesignern gerückt zu sein, beispielsweise Durchschuss, Zeilenhöhe und die Art des Fonts. Das Resultat ist, dass diese Websites besser aussehen, ein konsistenteres Design haben und Vertrauenswürdigkeit signalisieren.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

5. Alternative Fonts

Auch Fonts für die Gestaltung von Text stehen vermehrt im Zentrum der Aufmerksamkeit von Websdesignern. Obwohl die Klassiker wie Helvetica, Arial, Georgia und Verdana zweifellos dominieren, haben wir einen leichten Trend hin zu alternativen Fonts ausgemacht (umgesetzt mit sIFR beispielsweise).

Interessant ist, dass diese Fonts oft sehr gut in das Design der Websites integriert sind und den visuellen Eindruck der Website verbessern. Sie werden meist nie aus reinem Selbstzweck oder als “Upgrade” der bestehenden Typografie einer Website verwendet.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

6. Modale Dialoge und Lightboxes

Modale Dialoge (Dialogfenster) sind im Wesentlichen die zweite Generation der Popups. Sie sind eine benutzerfreundliche Alternative zu den klassischen Javascript-Dialogen und lenken aktiv die Aufmerksamkeit des Nutzers. Bevor sie über dem Inhalt der Website erscheinen, ist immer eine Aktion des Nutzers erforderlich, beispielsweise ein Login oder eine Registrierung. Die Fenster von modalen Dialogen sind oft geschickt gestaltet: sie haben meist halb transparente Hintergründe und einen Knopf zum Schließen.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

7. Media Blocks

Mit der zunehmenden Verbreitung von Breitband-Internet verbringen Nutzer mehr Zeit im Internet als noch vor einigen Jahren. Designer nutzen die neuen Möglichkeiten, um Inhalte attraktiver und einprägsamer zu präsentieren. Es ist daher kein Wunder, dass immer mehr Websites Videos und Screencasts dafür verwenden. Auf diese Weise ist es möglich, Informationen schnell und effizient zu vermitteln.

Nutzer können sich zurücklehnen und die Informationen so sehr einfach aufnehmen und schrittweise nachvollziehen, ohne nach Informationen suchen zu müssen, Texte zu lesen oder sich mit der Navigation zu beschäftigen. Die Filme sind normalerweise recht kurz und kommen sofort auf den Punkt. Sie sind meist sachlich gehalten, können aber auch unterhaltsam sein.

Sie sollten aber sicherstellen, dass Videos eine Alternative sind und nicht der einzige Inhalt Ihrer Website. Nicht jeder Nutzer hat eine Breitband-Verbindung und nicht jeder Nutzer möchte Videos sehen, beispielsweise weil gerade Musik im Hintergrund läuft. Außerdem hat nicht jeder Flash oder JavaScript installiert oder aktiviert.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

8. Magazin-Layout

Eine interessante Entwicklung beim Blog-Design ist die Übernahme verschiedener Layout-Techniken, die bisher nur bei traditionellen (Print-) Medien genutzt wurden. Die Anordnung der Beiträge, der Gebrauch von Typografie, Illustrationen und sogar die Textausrichtung ähneln traditionellen Print-Techniken. Grid-basierte Designs werden ebenfalls populärer, werden derzeit aber meist nur auf Portfolio- und Produkt-Websites sowie großen Blogs verwendet – fast nie sieht man sie auf Unternehmenswebsites oder Online-Shops.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

9. Karussell-Slideshows

Karussell-Slideshows sind Slideshows mit einer Karussell-Navigation, in der die Vorschaubilder vertikal oder horizontal bewegt werden, während man durch die Slideshow blättert. Um zu navigieren, muss der Nutzer in der Regel auf einen Pfeil klicken. Das Karussell bewegt sich dann in die gewünschte Richtung.

Anstatt sich auf der Suche nach Inhalten durch verschiedene Bereiche einer Website zu klicken, können Nutzer die Inhalte in der Karussell-Navigation ohne vertikales Scrollen schnell durchstöbern. Die Nutzer sparen Zeit und die Karussell-Navigation lenkt deren Aufmerksamkeit direkt auf die Inhalte. Diese Art der Navigation ist oft auf Websites zu Unterhaltungsthemen und großen Blogs zu finden. Aber auch Designer verwenden sie oft in ihren Portfolios, um ihre Referenzen interaktiv zu präsentieren.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

10. Einführungstexte

Der Bereich links oben auf einer Website ist der wichtigste Teil einer Seite, weil Nutzer dort zuerst hinsehen. Daher ergibt es Sinn, dort die wichtigste Botschaft einer Website zu platzieren, um sicherzustellen, dass sie schnell gelesen wird.

Dies ist auch das, was die meisten Designer tun, egal, ob es sich um eine Web-Anwendung, ein Corporate Design, einen Online-Dienst oder um ein Portfolio handelt – sie platzieren Slogans und kurze Einführungstexte im oberen Bereich einer Seite und verwenden dafür, ausdrucksstarke und lebendige Typografie, um einen guten ersten Eindruck zu hinterlassen. Einige Einführungstexte sind kurz, andere eher lang. In jedem Fall nehmen sie recht viel Platz ein – oft gehen sie über die ganze Breite des Layouts und sind 250 bis 400 Pixel hoch. Allerdings sind solche Einführungstexte eher selten auf Blogs oder in Online-Shops zu sehen. ™

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Kategorien
Webdesign

Daumenkino mit jQuery

Ein Foto sanft in ein anderes überzublenden, ist ein schöner und dezenter Effekt. Mit ein paar HTML-, CSS- und Javascript-Grundlagen ist das schnell erledigt. Nur, wie es technisch funktioniert, ist auf Anhieb schwer vorzustellen, insbesondere für Designer mit wenig Programmiererfahrung. Dabei ist alles eigentlich ganz einfach. So soll es aussehen

Das sieht schon gut aus. Aber was läuft da genau ab? Ich habe eine zweite Seite gemacht, auf der das sicher etwas deutlicher wird. Zum besseren Verständnis habe ich die Bilder etwas versetzt angeordnet und ihnen jeweils eine besondere Rahmenfarbe gegeben. Das Bild mit dem roten Rahmen ist dasjenige, das gerade eingeblendet wird. Das Bild im gelben Rahmen ist das zuletzt sichtbare Bild, das Bild mit dem grünen Rahmen liegt ganz unten und spielt für den aktuell ablaufenden Vorgang keine Rolle.

So gehts

Wir haben drei Bilder, die wir nacheinander überblenden möchten. Sie befinden sich in einem DIV namens „bilderstapel“.

<div id="bilderstapel">
  <img id="bild2" src="http://example.com/42.jpg" alt="" class="obersteebene" />
  <img id="bild1" src="http://example.com/42-2.jpg" alt="" />
  <img id="bild3" src="http://example.com/42-3.jpg" alt="" />
</div>

Technisch funktioniert das so: Die Bilder werden per CSS zunächst übereinander gelegt. Es gibt drei verschiedene Ebenen, die per z-index definiert sind. Das Bild, zu dem übergeblendet werden soll, hat die CSS-Klasse „obersteebene“ (roter Rahmen). In ihr ist definiert, dass das Bild auf der obersten Ebene liegt (z-index: 3) und komplett transparent ist, die Deckkraft (CSS-Attribut „opacity“) ist also 0%. Ein darunter liegendes Bild hat die Deckkraft 100% (scheint durch) und ist für den Betrachter jetzt zu sehen (gelber Rahmen). Es hat den z-index 2. Das dritte Bild ist das Bild, das als letztes übergeblendet wird. Es hat den z-index 1 und einen grünen Rahmen.

Zunächst wird das Bild mit der CSS-Klasse „obersteebene“ ausgewählt und in der Variable $alt gespeichert. Direkt danach wird das Bild ausgewählt, zu dem übergeblendet werden soll – entweder das nächste benachbarte Bild, oder, falls keines mehr existiert, das erste Bild des DIVs „bilderstapel“. Dieses Bild ist in $neu zu finden. Das Bild $alt wird dann auf die mittlere Ebene gesetzt. Das Bild $neu, zu dem wir überblenden möchten, bekommt die Deckkraft 0% zugewiesen und wird auf die oberste Ebene geschickt. Es ist jetzt komplett transparent, das Bild darunter scheint durch. Jetzt beginnt die Überblendung mit der Methode animate() von jQuery. Die Deckkraft wird langsam von 0% auf 100% erhöht.

function daumenKino() {
  var $alt = $('#bilderstapel IMG.obersteebene');

  if($alt.next().length)
    var $neu = $alt.next();
  else
    var $neu = $('#bilderstapel IMG:first');

  $alt.addClass('mittlereebene');
  $alt.removeClass('obersteebene');
  $neu.css({opacity: 0.0});
  $neu.addClass('obersteebene');

  $neu.animate({opacity: 1.0}, 2000, function() {
    $alt.removeClass('mittlereebene');
  });
}

Danach ist die Überblendung abgeschlossen. Das oberste Bild hat nun 100% Deckkraft und überlagert alle anderen Bilder. Wenn nun das nächste Bild eingeblendet werden soll, kann der ganze Vorgang einfach ohne veränderte Parameter neu gestartet werden. Die Funktion daumenKino() wird über setInterval() periodisch angestoßen:

$(document).ready(function() {
   setInterval( "daumenKino()", 2000 );
});

Mehr über animate() finden Sie in der englischen Dokumentation von jQuery. Wenn Sie den Effekt selbst einsetzen möchten: In der Beispieldatei finden Sie alles, was Sie dazu benötigen. Viel Spaß und viel Erfolg! (tm)

Kategorien
Boilerplates & andere Tools Programmierung

Die große PHP-IDE-Übersicht: schneller programmieren mit Integrierter Entwicklungsumgebung

Von Alexander Makarov, übersetzt von Rene Schmidt

Jeder will produktiver werden, weniger Fehler machen und guten Code schreiben. Natürlich hängt in erster Linie alles von Ihnen ab. In den meisten Fällen können Sie mit einer integrierten Entwicklungsumgebung (Integrated Development Environment, IDE) diese Ziele leichter erreichen als ohne. Allerdings ist es nicht ganz einfach, die richtige IDE zu finden, weil es dabei viel zu beachten gibt. Und jeder Hersteller hält seine IDE für die beste.

In diesem Artikel schauen wir uns die beliebtesten PHP-IDEs näher an und vergleichen ihren Leistungsumfang. Am Ende werden wir ein Fazit ziehen und hoffentlich wissen, welche IDE Ihren Ansprüchen nahe kommt.

I am the best!

Lange Zeit habe ich nur aus Spaß in PHP programmiert. Mit Eclipse und IntelliJ IDEA habe ich Web-Anwendungen in Java entwickelt. Das sind großartige Java-IDEs. Natürlich wollte ich etwas Ähnliches für PHP haben. Die folgenden Eigenschaften halte ich für wichtig:

Eigenschaften von integrierten Entwicklungsumgebungen

1. Syntax-Hervorhebung

Gute Syntax-Hervorhebung verbessert die Lesbarkeit von Code immens. Wirklich! Schauen Sie sich das an:

Syntax-Hervorhebung

2. Code-Vervollständigung

Automatische Code-Vervollständigung soll dem Entwickler Tipparbeit abnehmen. Wenn sie auch eigene Klassen und phpDoc unterstützt, kann sie Ihnen sogar ersparen, die Projektdokumentation zu lesen.

Gute Code-Vervollständigung kann auch Tippfehler verhindern. Wenn Sie beispielsweise $cotroller-> eingeben, und es erscheinen keine Vorschläge, wird es sich wohl um einen Fehler handeln. Oh… Es das soll wohl $controller sein!

Schlechte Code-Vervollständigung kann Sie behindern, wenn zu viele Vorschläge gemacht werden oder Ihre Klassen nicht eingelesen wurden.

Code-Vervollständigung

Nett ist auch Dateinamen-Vervollständigung für HTML-Tags sowie für PHP-include() und -require()-Aufrufe.

3. Navigation

Eine der langweiligsten Aufgaben ist es, eine bestimmte Variablendeklaration oder eine Wertzuweisung zu finden. Gute IDEs können Ihnen dabei mit “Gehe zu Aktion” oder “Gehe zu Deklaration” helfen.

Eine weitere wichtige Funktion ist die Suche. Sie sollte auch bei großen Projekten schnell sein. Noch besser ist eine Suchfunktion, die wie im Firefox von Fundstelle zu Fundstelle springen kann.

Code navigation

4. Fehlermeldungen und Warnungen

Syntaxüberprüfung während der Eingabe kann verschiedene Arten von Tipp- und Programmierfehlern abfangen. Im folgenden Beispiel meldet die IDE, dass Sie einen Deklarationsoperator (=) statt eines Vergleichsoperators (==) verwendet haben:

Warning and errors

Je mehr die IDE aufspürt desto besser. Außer, die IDE macht dabei selbst Fehler.

5. Refactoring und Code-Generierung

Refactoring ist grundsätzlich das Verbessern von Code durch Umgestaltung. PHP-IDEs bieten im Vergleich zu C- oder Java-IDEs nur rudimentäre Funktionen. Aber selbst die sind schon sehr hilfreich.

Absolut grundlegende PHP-Refactoring-Funktionen:

  • “Verschieben”: Aktualisiert alle include() und require()-Aufrufe, wenn eine Datei woandershin verschoben wird.
  • “Umbenennen,”: Stellt sicher, dass ein Dateiname in allen betroffenen Dateien des Projekts geändert wird.
  • “Sicheres Löschen”: Prüft, ob eine Datei ohne Auswirkungen auf andere Projektteile gelöscht werden kann.

Refactoring

Zusätzlich zu grundlegenden Refactoring-Funktionen können manche IDEs Code für Klassenkonstruktoren, Getter-, Setter- und sogar Stub-Methoden für eine Elternklasse automatisch erzeugen.

Code generation

6. Debugging

Debugging ist nicht so entscheidend bei PHP, weil viele Entwickler sowieso einfach mit echos debuggen oder ein Tool wie FirePHP verwenden. Für komplexe Applikationen müsste man auf diese Weise aber schon viel Aufwand treiben, daher kann Debugging viele Stunden Zeit sparen.

Debugger

Wenn die IDE gut ist, stellt sie Haltepunkte für schrittweises Debuggen zur Verfügung, bei dem man sich jederzeit den Inhalt von Variablen und Eigenschaften von Objekten im Programmablauf anzeigen lassen kann.

7. Versionskontrolle

Versionskontrolle ist sowohl für einzelne Entwickler als auch für die Entwicklung in einer Gruppe sehr nützlich. Sie führt Buch darüber, wann und von wem eine Datei geändert wurde. Eine gute IDE kann die Unterschiede zwischen Revisionen visuell darstellen und erleichtert das Kopieren von Code von einer Version zur anderen, kann vorhergehende Zustände wieder herstellen und unterschiedliche Versionen einer Datei zusammenführen.

Visual diff

Eine integrierte Versionskontrolle ist bei den Alltagsaufgaben, beispielsweise Versionsvergleiche und Commits, wesentlich komfortabler als eine eigenständige Applikation.

8. Funktionen für die Client-Seite

PHP separat zu verwenden ist eher die Ausnahme. CSS und JavaScript sind eigentlich immer irgendwo in der PHP-Anwendung zu finden. Daher wäre es vorteilhaft und wünschenswert, wenn Code-Vervollständigung, Syntax-Hervorhebung und vielleicht sogar Refactoring auch für Technologien und Sprachen angewendet werden kann, die in Verbindung mit PHP genutzt werden.

HTML Code-Vervollständigung

Wie wählen Sie eine gute IDE aus?

Jede IDE bietet eine ganze Menge Funktionen. Einige sind sehr nützlich, andere nicht. Hier sind ein paar Faustregeln, eine gute IDE zu finden:

  • Probieren Sie die Kostenlosen zuerst. Vielleicht reicht deren Funktionsumfang für Sie aus.
  • Unterscheiden Sie zwischen Funktionen, die sie gerne hätten und jenen, die Sie unbedingt brauchen. Prüfen Sie dann, ob eine IDE Ihre Erwartung erfüllt.
  • Prüfen Sie, ob es Plugins gibt, welche die IDE um fehlende Funktionen ergänzen.
  • Wenn Sie eine IDE ausgewählt haben, spielen Sie erstmal eine Weile damit herum, bevor Sie ein großes Projekt damit realisieren. Vielleicht kommen Sie zu dem Schluss, dass Sie mit der IDE Ihre Gewohnheiten zu sehr umstellen müssen.

Vergleichstabelle

The great IDE filter

Zusammen mit Vladimir Statsenko, der bei der Aptana-Sektion geholfen hat, haben wir eine Vergleichsübersicht vorbereitet.

Was berücksichtigt wurde

Eclipse-basierte IDEs
PDT, Zend Studio 6, Aptana PHP und Aptana Studio Pro basieren auf Eclipse. Es gibt tausende Plugins für Eclipse, so dass Funktionen, die Eclipse nicht selbst bietet, höchstwahrscheinlich als Plugin verfügbar sind.

Eclipse-basierte PHP-IDEs waren die ersten OpenSource-IDEs mit echten IDE-Fähigkeiten, beispielsweise mächtige Code-Vervollständigung, Code-Navigation und Projekt-Unterstützung. Die meisten sind noch immer kostenlos verfügbar und sehr umfangreich.

NetBeans

NetBeans ist neu in der PHP-Szene und basiert nicht auf Eclipse. Das Programm hat einen ähnlichen Funktionsumfang wie die anderen IDEs und ist ebenfalls kostenlos. Die Entwicklung dieser IDE ist sehr offen und schnell. Das Entwickler-Blog zu verfolgen und neue Test-Versionen ist recht interessant, auch wenn es eine stabile Version 6.5 gibt.

Was nicht berücksichtigt wurde

Es gibt eine ganze Anzahl mächtiger Texteditoren wie PSPad, Notepad++, TextMate, vim und Emacs. Einige sind den IDEs recht ähnlich und können sogar besser geeignet sein, wenn einem IDEs zu überfrachtet sind und man mit den Funktionen eines Texteditors besser zurechtkommt. Es gibt zu viele gute IDEs, so dass aufgrund der Vielfalt hier nur die wichtigsten berücksichtigt werden können.

Die PHP-IDEs

Die folgenden PHP-IDEs sind in der Übersicht enthalten:

  • PDT 1
  • PDT 2.0
  • Zend Studio 6
  • NetBeans 6.5
  • NetBeans 7 (Entwicklerversion)
  • Aptana PHP
  • Aptana Studio Pro
  • Codelobster *
  • Nusphere PhpED 5.6 *

Comparison table

Die ganze Tabelle gibt es bei Google Docs (fixierte Version)

* Codelobster und Nusphere PhpED wurden nachgetragen.

Fazit

Nutzen Sie noch immer keine IDE? Sie verschwenden möglicherweise Zeit. Versuchen Sie es! Sie werden den Unterschied spüren.

Sowohl PDT-Eclipse als auch NetBeans sind gute IDEs. Wenn Sie viele Plugins benötigen, ist Eclipse die bessere Wahl. Wenn Ihnen Bearbeitungswerkzeuge und Code-Vervollständigung wichtiger sind, wählen Sie NetBeans. Die Benutzeroberfläche von NetBeans reagiert schneller als die von Eclipse.

Wenn Sie hauptsächlich HTML und CSS bearbeiten, probieren Sie Notepad++, vim, TextMate oder Emacs. Sie alle haben sehr gute HTML-Bearbeitungsfunktion und beherrschen auch einfache Code-Vervollständigung. Außerdem sind sie kleiner und schneller als ausgewachsene IDEs.

Wenn Sie viel mit Javascript machen, probieren Sie Aptana aus. Eine Alternative dazu ist das Plug-In Spket für Eclipse, welches ähnliche Funktionen anbietet. Bedenken Sie, dass IDEs nicht Ihr Denken verändern, sondern den Entwicklungsprozess beschleunigen sollen.

Kommerzielle Software vs. OpenSource

Es klingt seltsam, aber kommerzielle PHP-IDEs wie Zend Studio und Aptana Studio Pro haben keine wesentlichen Vorteile gegenüber OpenSource-IDEs wie PDT2.0 und NetBeans, die beide ebenfalls sehr gut sind. Aptana Studio Pro bietet für 99 Dollar einen guten IE-JavaScript-Debugger, SFTP, FTPS und einige andere weniger nützliche Eigenschaften.

Wie NetBeans bietet Zend Studio etwas umfangreichere Code-Vervollständigung und bessere Fehlermeldungen als PDT. Es bietet einen gut anpassbaren Code-Formatierer, Refactoring-Fähigkeiten (die NetBeans ebenfalls bietet) und Wizards für das Zend Framework. Der Preis beginnt bei 399 Dollar.

Quellen

  • PDT Project
    Offizielle Website von Eclipse PHP Development Tools (PDT).
  • Zend Studio
    Offizielle Website von Zend Studio.
  • NetBeans
    Offizielle Website von NetBeans.
  • NetBeans für PHP-Weblog
    Hier können Sie mehr über Neuerungen bevorstehender NetBeans-Versionen erfahren und über sie diskutieren.
  • Aptana
    Offizielle Website von Aptana.

Über den Autor

Alexander Makarov ist professioneller Web-Entwickler aus Russland. Er betreibt außerdem RMCreative, ein russisches Blog für Web-Entwickler, Designer und jeden, der sich für den Bau von Websites interessiert. Übersetzung von Rene Schmidt

Kategorien
Webdesign

Die harte Wahrheit über Firmen-Websites

Von Paul Boag, übersetzt von Rene Schmidt

Wir alle machen Fehler auf unseren Unternehmens-Websites. Allerdings machen große Unternehmen andere Fehler als kleine. Dieser Artikel soll die häufigsten Fehler veranschaulichen, die große Unternehmen bei ihren Websites produzieren.

Die meisten Kunden meiner Kunden sind große Unternehmen: Universitäten, wohltätige Organisationen, öffentliche Unternehmen und große Firmen. In den letzten sieben Jahren bin ich in diesen Organisationen immer wieder auf falsche Vorstellungen gestoßen. In diesem Artikel möchte ich einige dieser falschen Vorstellungen abbauen und Sie ermuntern, der harten Wahrheit ins Auge zu blicken.

Das Problem: Sie lesen diesen Artikel und sind sich deswegen der Probleme wahrscheinlich schon bewusst. Vielleicht ist der Beitrag für Sie eine Hilfe, andere in Ihrem Unternehmen ebenfalls auf die Probleme aufmerksam zu machen. In jedem Fall folgt nun die Harte Wahrheit über Firmen-Websites.

1. Sie benötigen eine eigene Web-Abteilung

In vielen Unternehmen wird die Website entweder von der Marketing oder der IT-Abteilung betreut. Das führt unweigerlich zu einem Revierkampf. Das Opfer der internen Streitigkeiten ist die Website.

In Wirklichkeit sind beide Seiten nicht geeignet, eine Web-Strategie umzusetzen. Die IT-Abteilung mag sich mit der Technik auskennen, kann aber keine benutzerfreundliche Bedienung umsetzen oder eine Online-Marke etablieren.

Screenshot of Zeldman's website
Zeldman rät Unternehmen zu einer eigenen Web-Abteilung.

Andererseits ist das Marketing kaum besser. Jeffrey Zeldman schreibt in seinem Artikel Let there be Web divisions (engl.):

Das Web ist eine Konversation. Marketing ist dagegen ein Monolog. Und dann gibt es noch semantisches Markup, CSS, unauffällige Skripte, Card-Sorting-Testläufe, Barrierefreiheit-Tests und all die anderen Sachen, die nicht zum Marketing gehören.

Stattdessen sollte die Website von einem einzigen qualifizierten Team betrieben werden. Wieder ist es Zeldman, der schreibt:

Steckt diese Leute in eine Abteilung, die Ihre Website nicht bloß als einen Bastard Ihrer Unternehmensbroschüren oder als eine natürliche Schwellung des Gruppenkalenders ansieht.

2. Eine Unternehmenswebsite zu betreiben ist ein Vollzeit-Job

Die Website ist oft nicht nur ein Zankapfel zwischen Marketing und IT-Abteilung, sondern wird in der Regel aufgrund von zu wenig Personal vernachlässigt. Statt eines eigenen Web-Teams wird von den Mitarbeitern erwartet, die Website neben ihrer eigentlichen Tätigkeit zu pflegen. Selbst wenn es ein Web-Team gibt, wird es oft nicht richtig gemacht. Die meiste Zeit ist das Team mit dem Alltagsgeschäft beschäftigt und nicht mit einer langfristigen Strategie.

Die Situation wird durch die Tatsache verschlimmert, dass Nachwuchskräfte mit der“Pflege” der Website beauftragt sind. Sie haben weder die Erfahrung noch die Autorität, die Website voranzubringen. Es ist an der Zeit, dass Unternehmen ernsthaft in ihre Websites investieren und erfahrene Vollzeit-Website-Manager engagieren, um Web-Strategien voranzubringen.

3. Regelmäßig ein neues Design genügt nicht

Durch den Personalmangel werden Firmen-Websites oft für lange Zeit vernachlässigt. Sie veralten langsam mit ihrem Inhalt, ihrem Design und ihrer Technik.

Schließlich wird die Website so peinlich, dass das Management eingreift und eine Lösung verlangt. Dies führt unweigerlich zu einem kostenintensiven vollständigen Neudesign. Wie ich im Handbuch für Website-Betreiber (engl.) schon erwähnt habe, ist dies kein guter Ansatz, Geld wird so verschwendet. Die alte Website wird ersetzt und das Geld ist auch weg. Eine finanziell hohe Belastung, die alle paar Jahre auftritt.

Screenshot of Cameron Molls Article
Cameron Moll rät (engl.) Webdesignern, ihre Websites lieber neu auszurichten als neu zu gestalten..

Ein besser Weg ist es, kontinuierlich in Ihre Website zu investieren und ihr zu erlauben, sich zu entwickeln. So ist das Geld nicht nur besser investiert, sondern auch besser für die Nutzer, wie Cameron Moll in seinem Artikel schreibt: Gute Designer gestalten neu, Spitzen-Designer richten neu aus.

4. Sie können es mit Ihrer Website nicht allen recht machen

Eine meiner ersten Fragen an einen Kunden ist bei mir: “Was ist ihre Zielgruppe?”. Oft bin ich über die Länge der Antwort schockiert. Meistens bekomme ich eine lange und detaillerte Liste der verschiedenen Zielgruppen. Natürlich ist dann meine nächste Frage, “Welche von den Zielgruppen ist die wichtigste?”. Die Antworten sind normalerweise deprimierend – alle sind gleich wichtig.

Die harte Wahrheit ist, dass wenn Sie eine Website für alle bauen, sie niemanden ansprechen wird. Es ist wichtig, sich absolut auf eine Zielgruppe zu konzentrieren und Design sowie Inhalte an sie anzupassen. Bedeutet das, man sollte alle anderen möglichen Zielgruppen ignorieren? Natürlich nicht. Ihre Website sollte von allen benutzbar sein und niemanden abschrecken oder ausschließen. Trotzdem muss eine Website hauptsächlich für eine klar umrissende Zielgruppe gemacht sein.

5. Mit Social Networking verschwenden Sie Geld

Im Prinzip finde ich es gut, dass Website-Manager erkannt haben, dass eine Web-Strategie mehr beinhaltet, als nur eine Website zu betreiben. Sie fangen an, Werkzeuge wie Twitter, Facebook und Youtube zu nutzen, um ihre Reichweite zu erhöhen und neue Nutzer für sich zu interessieren. Allerdings nutzen sie diese Werkzeuge oft ineffektiv. Unternehmensinformationen zu twittern oder Verkaufspräsentationen auf Youtube zu veröffentlichen geht am Kern des Social Networkings vorbei.

Screenshot von Microsofts Website Channel 9
Microsoft erlaubt seinen Mitarbeitern, über Channel 9 mit Nutzern zu kommunizieren. Das Unternehmen hat sein Image in der Entwicklergemeinde dadurch erheblich verbessert.

Über Social Networking beschäftigen sich Menschen mit anderen Menschen. Individuen wollen keine Beziehung zu Marken oder Unternehmen aufbauen. Sie wollen mit anderen Individuen kommunizieren. Zu viele Unternehmen investieren Millionen in Facebook-Applikationen und virale Videos, obwohl sie besser mit den Menschen offen und transparent kommunizieren sollten.

Ermuntern Sie Ihre Mitarbeiter, selbst über Twitter oder ein eigenes Blog zu kommunizieren, anstatt ein Unternehmens-Twitter-Konto oder gar ein Unternehmens-Blog zu eröffnen. Geben Sie ihnen Verhaltensrichtlinien und die nötigen Werkzeuge, die sie benötigen, damit sie über Ihre Produkte und Dienstleistungen kommunizieren können. Das demonstriert nicht nur Ihr Engagement in der Web-Gemeinde, sondern zeigt Ihr Unternehmen auch von einer menschlichen Seite.

6. Auf Ihrer Website geht es nicht nur um Sie

Während einige Website-Manager mit ihrer Website alle ansprechen möchten, wollen andere hauptsächlich sich selbst und ihre Kollegen ansprechen. Eine überraschend große Anzahl von Unternehmen ignoriert Website-Nutzer völlig und baut ihre Website nach der organisatorischen Struktur ihres Unternehmens auf. Typischerweise ist das an einer Website erkennbar, dessen Design an den persönlichen Vorstellungen des Geschäftsführers orientiert und mit Fachchinesisch vollgeschrieben ist.

Eine Website sollte nicht Mitarbeiter befriedigen, sondern die Bedürfnisse und Erwartungen der Nutzer erfüllen. Viele Designs werden abgelehnt, weil der Chef “kein Grün mag”. Zugleich gibt es zu viele Websites mit Abkürzungen und Fachbegriffen, die nur innerhalb des Unternehmens verwendet werden.

7. Sie bekommen keinen Mehrwert von Ihrer Web-Abteilung

Egal, ob Ihr Unternehmen eine Web-Abteilung besitzt oder eine externe Agentur beauftragt hat: Viele Unternehmen nutzen nicht das volle Potenzial ihrer Web-Designer. Web-Designer können sehr viel mehr als nur Pixel zu schubsen. Sie wissen viel über das Web und wie Nutzer im Web interagieren. Sie haben Design-Techniken, Grid-Systeme, Farbenlehre und noch viel mehr gelernt und wissen, wie man es macht.

Web-Designer stellen oft frustriert fest, dass sie nur als Pixel-Schubser angesehen werden. Das ist ungenutztes Potenzial
Web-Designer stellen oft frustriert fest, dass sie nur als Pixel-Schubser angesehen werden. Das ist ungenutztes Potenzial

Es ist daher verheerend, Micromanagemnt zu betreiben und von ihnen zu verlangen, “das Logo größer” zu machen oder es “3 Pixel weiter nach links zu setzen.” Dadurch reduziert man Web-Designer auf Software-Bediener und vergeudet das Potenzial, das sie bieten.

Wenn Sie das Maximum aus Ihrer Web-Abteilung herausholen möchten, präsentieren Sie ihnen Probleme und keine Lösungen. Beispiel: Sie möchten mit Ihrer Website junge Mädchen ansprechen. Der Designer schlägt die Unternehmensfarbe Blau vor. Entgegnen Sie, dass die Zielgruppe möglicherweise nicht positiv auf die Farbe reagieren wird. Geben Sie nicht Pink vor. Auf diese Weise hat der Designer die Möglichkeit, sogar eine noch bessere Lösung zu finden. Sie erlauben ihr oder ihm, das vorgestellte Problem selbst zu lösen.

8. Demokratisches Designen führt zu Stillstand

Das Symbol schlechthin für den Ansatz eines großen Unternehmens, eine Website zu betreiben, ist das Komitee. Ein Komitee wird oft gegründet, um dem Anspruch eines Unternehmens, nämlich dass jeder etwas zu sagen hat, Rechnung zu tragen. Komitees sind nicht grundsätzlich schlecht – das zu glauben wäre naiv – und dass ein großes Unternehmen eine große Firmen-Website ohne Beratung aufziehen kann ist völlig abwegig. Wenn es ums Design geht, sind Komitees allerdings der Todesstoß für das Projekt.

Demokratisches Designen führt zum Designen im Vorbeigehen
Demokratisches Designen führt zum Designen im Vorbeigehen.

Design ist subjektiv. Unsere Wahrnehmung von Design kann von Kultur, Geschlecht, Alter, Kindheitserfahrungen und sogar vom Körperzustand (beispielsweise Farbenblindheit) beeinflusst sein. Was die eine Person für großartiges Design hält, kann eine andere Person nicht ausstehen. Darum ist es wichtig, Designentscheidungen von Benutzer-Tests und nicht von persönlichen Vorlieben abhängig zu machen. Leider wird dieser Ansatz selten verfolgt, wenn ein Komitee über das Design entscheidet.

Stattdessen führt das Komitee zu einem Design der Kompromisse. Die Mitglieder des Komitees haben unterschiedliche Meinungen zum Design und suchen daher Gemeinsamkeiten. Eine Person hasst blaue Farbschemata, die andere liebt sie dagegen. Das Ergebnis ist, dass der Designer ein “anderes Blau ausprobieren soll”, in der Hoffnung, sich bei der Entscheidung in der Mitte zu treffen. Leider führt das zu einem langweiligen Design, das weder ansprechend ist noch gut aussieht.

9. Ein CMS ist keine Wunderwaffe

Viele Kunden von mir haben erstaunlich unrealistische Erwartungen an ein CMS (Content Management System). Diejenigen ohne ein CMS glauben, es würde alle Probleme lösen, die sie mit der Verwaltung der Inhalte ihrer Website haben. Diejenigen, die eines haben, glauben allerdings, dass es das nicht getan hat

Es ist unzweifelhaft, dass ein CMS eine Menge Vorteile hat, beispielsweise:

  • Es gibt weniger technische Hürden, Inhalte einer Website zu ergänzen.
  • Mitarbeiter können Inhalte der Website hinzufügen oder ändern.
  • Inhalte können schneller aktualisiert werden.
  • Es erlaubt mehr Kontrolle.

Allerdings sind die meisten CMS weniger flexibel als ihre Nutzer es gerne hätten. Sie passen sich nicht an veränderte Anforderungen der Website an. Website-Manager beschweren sich häufig, das CMS wäre schwierig zu bedienen. Allerdings liegt das meistens an fehlendem Wissen oder mangelnder Praxis.

Schlussendlich vereinfacht ein CMS inhaltliche Aktualisierungen. Aber das ist natürlich kein Garant dafür, dass das wirklich jemand macht und es verbessert auch nicht die Qualität der Inhalte. Auf vielen CMS-basierten Websites ist veraltetes oder schlecht geschriebenes Textmaterial zu finden. Der Grund dafür ist, dass es keine internen Prozesse gibt, welche die Redakteure bei ihrer Arbeit unterstützen.

Wenn Sie ein CMS als Lösung für inhaltliche Probleme Ihrer Website ansehen, werden Sie enttäuscht werden.

10. Sie haben zuviel Text

Ein Teil des Problems, Inhalte auf Firmen-Websites zu verwalten, liegt in der viel zu großen Textmenge. Die meisten dieser Websites sind über Jahre “gewachsen” und immer mehr Text kam hinzu. Zu keinem Zeitpunkt hat sich jemand die Mühe gemacht, nachzusehen, ob Texte gekürzt oder entfernt werden können.

Viele Website-Manager füllen Ihre Website mit Textmaterial, das niemand lesen wird. Folgende Gründe dafür gibt es:

  • Die Angst, etwas zu vergessen: Website-Manager stellen Textwüsten online und hoffen, dass die Nutzer die gewünschten Informationen finden. Leider erschweren die Textwüsten genau das.
  • Die Angst, dass Nutzer nichts verstehen: Sie unterschätzen entweder ihre Kunden oder ihre Website und verlieren sich auf ihren Websites in ausschweifenden Erklärungen, die niemand lesen wird.
  • Verzweifelte Überzeugungsversuche: Manche Unternehmen sind so verzweifelt in ihren Verkaufs- oder Kommunikationsbemühungen, dass sie das Textmaterial mit so viel Werbung vollschreiben, dass kaum noch wertvolle Informationen übrig bleiben.

Im Buch “Don’t Make Me Think’ schlägt der Autor Steve Krug vor, die Hälfte der Wörter auf einer Seite zu streichen. Von dem, was übrig bleibt, sollte wieder die Hälfte entfernt werden. Was dann übrig bleibt, ist der interessante Teil der Texte, der durch die Kürzung hervorgehoben wird.

Schlussfolgerungen

Große Unternehmen machen vieles richtig beim Betrieb ihrer Websites. Sie müssen sich aber auch besonderen Herausforderungen stellen. Hier die falschen Entscheidungen zu treffen, kann sehr schmerzhaft sein. Diese Probleme zu lösen bedeutet, zu akzeptieren, dass Fehler gemacht wurden, interne Reibereien zu überwinden und die Abläufe, mit denen eine Marke gestaltet wird, zu verändern. Wenn Sie das tun, wird Ihre Web-Strategie langfristig effektiver und Sie werden spürbare Wettbewerbsvorteile haben.

Über den Autor

Paul Boag ist der Gründer der britischen Webdesign-Agentur Headscape und ist Autor des Handbuchs für Website-Betreiber (engl.) und Moderator des preisgekrönten Webdesign-Podcasts Boagworld.com. Übersetzt von Rene Schmidt. (md)

Kategorien
WordPress

Twittern mit WordPress und Dr. Web

Dr. Web macht ja nicht unbedingt jeden Trend mit. Aber Twitter ist interessant – der Dienst ist sehr beliebt, obwohl Bloggen mit maximal 140 Zeichen auch ohne ihn funktioniert. Microblogging ist aber „In“ und sich damit zu beschäftigen, wird sicherlich lehrreich auf die eine oder andere Art sein.

Wir wollen WordPress automatisch Ereignisse „twittern“ zu lassen. Die Ereignisse sind Artikel bearbeiten, veröffentlichen, Kommentare und Trackbacks veröffentlichen. Das heißt, persönliche Eitelkeiten müssen weiterhin manuell getwittert werden. Die Updates sehen dann beispielsweise so aus: „Artikel ‚Titel‘ veröffentlicht“. Weiterhin soll ein Link zum Blog in das Twitter-Update angefügt werden. Vielleicht stößt ja doch mal jemand auf den Feed und findet etwas Interessantes. Dann soll er (oder sie) auch gerne das Blog besuchen.

Twitter Icon

Beim automatischen Twittern gibt es aber ein Problem: Die WordPress-Links, die wir in die Twitter-Updates einfügen wollen, sind mal länger und mal kürzer. Eigentlich ist das kein Problem, selbst wenn Update-Text plus Link länger als 140 Zeichen sind macht Twitter automatisch aus dem langen Link per TinyURL einen kurzen Link. Das Problem ist nun, dass wenn Update-Text plus TinyURL-Link immer noch länger als 140 Zeichen sind, Twitter das Update doch nicht akzeptiert – zu lang. Die Lösung ist, den Link zu verkleinern, bevor das Update an Twitter geschickt wird. So kann man noch prüfen, ob das Update zu lang ist und gegebenenfalls kürzen. Auch wenn dann der Link abgeschnitten sein kann – auf diese Weise wird das Update auf jeden Fall in den eigenen Twitter-Feed aufgenommen.


Das drweb-tvid-Plugin verwendet dazu den eigenen Dienst URL-Kurz. Das Besondere an URL-Kurz ist, dass Leute, die auf einen URL-Kurz-Link klicken, immer sehen können, wohin der Link führt. Bei einem Link wie http://tinyurl.com/XYZ123 hat der Nutzer keine Chance zu erkennen, ob er auf einen Porno-, Phishing- oder Malware-Host oder zum gewünschten Ziel gelangt. URL-Kurz-Links beinhalten den Hostnamen des Ziels oder zeigen vor der Weiterleitung eine kurze Meldung an. Eine Garantie gegen Missbrauch ist das natürlich auch nicht, aber immerhin.

Eine weitere Besonderheit ist, dass das Plugin die Updates nicht stumpf auf 140 Zeichen beschränkt. Stattdessen wird der Update-Text aus mehreren Teilen zusammengebaut, beispielsweise „Titel des Beitrags“ und „Link zum Artikel“. Ist der Update-Text zu lang, wird nicht der ganze Update-Text gekürzt (und dabei Informationen am Ende des Texts abgeschnitten), sondern der jeweils längste Teil wird gekürzt, bis alles in 140 Zeichen hineinpasst. Bei einem Update-Text wie

Beitrag „Sehr langer Titel, der die Grenze von 140 Zeichen sprengen wird“ kommentiert, http://url

wäre das Ergebnis beispielsweise

Beitrag „Sehr langer Titel, der die Grenze von…“ kommentiert, http://url

Nun zur Installation. Voraussetzung für das Plugin ist PHP5, ein installiertes und funktionierendes WordPress 2.6, 2.7, 2.8 und Admin-Zugang zu dem Blog. Los gehts:

  1. Bei Twitter registrieren, Zugangsdaten notieren.
  2. drweb-tvid herunterladen (kostenlos, GPL-OpenSource) und dann das Verzeichnis /htdocs/wp-content/plugins/dwb-tvid im Verzeichnis /wp-content/plugins/dwb-tvid entpacken.
  3. In WordPress als Admin einloggen und unter „Plugins“ das Plugin aktivieren.
  4. Unter Einstellungen -> drweb-tvid die Twitter-Zugangsdaten eintragen und die Änderungen übernehmen.

Die Standardeinstellung ist, dass Artikel- und Seiten-Veröffentlichungen sowie genehmigte Kommentare und Trackbacks automatisch getwittert werden. Nicht freigegebene Kommentare werden nie getwittert. Werden sie nachträglich genehmigt, wird das getwittert. Das Verhalten ist natürlich einstellbar. Die restlichen Einstellmöglichkeiten sind selbsterklärend. In der Standardeinstellung werden natürlich keine persönliche Informationen in die Twitter-Updates geschrieben.

Die Version ist derzeit 0.6.8, hat also noch Entwicklungspotenzial. Verbesserungsvorschläge und Fehlerberichte bitte als Kommentar hinterlassen. Vielen Dank!

Ach übrigens, auch Dr. Web twittert. Follow us

Kategorien
Design HTML/CSS

Sieben Prinzipien für sauberes und optimales CSS

Von Tony White, Übersetzung von René Schmidt; mit Genehmigung von Smashing Magazine

Einige von Ihnen erinnern sich vielleicht noch an die Zeit, in der 30KB die empfohlene Maximalgröße für eine Website war. Dieser Wert galt für eine ganze Seite, also inklusive HTML, CSS, JavaScript, Flash und Bilder. In meinen aktuellen Projekten lasse ich die 30KB-Grenze schnell hinter mir, sobald es auch nur ein klein wenig komplizierter wird. Es ist inzwischen nicht ungewöhnlich, dass durch CSS-Layouts und Javascript-Ergänzungen die CSS-Dateien alleine schon die 30KB-Schwelle überschreiten, insbesondere bei großen Websites.

Es gibt aber einige Prinzipien, CSS zu optimieren und schlank zu halten. Optimieren bedeutet nicht nur, die Dateien klein zu halten, sie müssen auch ordentlich aufgebaut und auf das Nötigste reduziert sein. Je mehr Sie über optimales CSS wissen, desto kleiner werden Ihre CSS-Dateien sein. Vielleicht kennen Sie schon die eine oder andere hier vorgestellte Technik oder möchten die Gelegenheit zur einer Auffrischung nutzen. Diese Techniken werden Ihnen helfen, optimalen CSS-Code zu schreiben und Sie zu einem vielseitigeren Web-Designer machen.

1. Schreiben Sie Kurzschrift

Wenn Sie CSS noch nicht in Kurzschrift schreiben, sind sie ein wenig spät dran. Zum Glück ist es nie zu spät, etwas zu lernen. CSS-Eigenschaften in Steno zu schreiben ist die einfachste Möglichkeit, CSS-Code klein zu halten und Entwicklungszeit zu sparen. Jetzt ist eine gute Gelegenheit, diese Technik zu lernen oder aufzufrischen.

Margin, border, padding, background, font, list-style und sogar outline sind Eigenschaften, die Kurzschrift erlauben (und es gibt noch mehr!).

CSS in Kurzschrift zu schreiben, bedeutet, mehrere ergänzende Eigenschaften zu einer Eigenschaft zusammenzuziehen. Anstatt zu schreiben

p  {
        margin-top: 10px;
	margin-right: 20px;
	margin-bottom:  30px;
	margin-left: 40px; }

können Sie in Kurzschrift dieses schreiben:

p { margin: 10px 20px 30px 40px; }

Eine unterschiedliche Anzahl Eigenschaftswerte wird unterschiedlich interpretiert, entsprechend der folgenden Darstellung:

Illustration of how shorthand declarations are interpreted depending on how many values are specified for a property
Die Illustration zeigt, dass Kurzschrift-Deklarationen in Abhängigkeit zur Anzahl der Werte einer Eigenschaft unterschiedlich interpretiert werden. Die Reihenfolge gilt auch für padding, border-width und einigen anderen Eigenschaften.

Font ist eine weitere nützliche Kurzschrift-Eigenschaft, die viel Tipparbeit und Platz sparen hilft.

Illustration of font shorthand examples
Einige Beispiele für Font-Kurzschrift. Achtung: Wenn Eigenschaften ausgelassen werden, führt das dazu, dass sie ihre ursprünglichen Werte annehmen.

Dies waren nur zwei Beispiele für CSS-Kurzschrift. Allerdings soll dies keine vollständige Auflistung sein. Auch wenn Ihnen CSS-Kurzschrift schon bekannt ist, sollten Sie sich die nun folgenden nützlichen Regeln anschauen, mit denen Sie Ihr CSS kurz und bündig halten können. Aufgrund des hohen Einsparpotenzials kann CSS-Kurzschrift einen wesentlichen Effekt auf CSS-Dateigrößen haben.

Auf den Websites CSS-Shorthand Guide (engl.) (dustindiaz.com) und Efficient CSS with shorthand properties (engl.) (456bereastreet.com) gibt es mehr Informationen zu CSS-Kurzschrift-Eigenschaften.

2. Hex hex, weg mit den Hacks

Jon Hick's blog hicksdesign.co.uk/journal makes use of conditional comments
Jon Hicks Blog hicksdesign.co.uk/journal verwendet bedingte Kommentare (engl. „conditonal comments“).

Hacks für veraltete Browser sind in Ordnung. Hacks für moderne Browser sind es nicht. Keiner von denen. Nie.

Keep CSS Simple (engl.) – Peter-Paul Koch (digitial-web.com)

Diese Worte aus Peter-Paul Kochs fast fünf Jahre altem Artikel können einen verlegen machen. So erging es mir jedenfalls und wer hat nicht schon einmal Hacks für Internet Explorer 6 oder sogar Internet Explorer 7 verwendet? So gerne wir den IE6 unter der Erde sehen wollen – der Browser ist noch lange nicht tot.

Bedingte Kommentare sind eine weit verbreitete Praxis, um Anpassungen für IE6 und IE7 bereitzustellen. Sogar Microsofts IE-Entwicklerteam empfiehlt sie. Mit bedingten Kommentaren für IE-spezifisches CSS ist es möglich, saubere und deshalb kleinere CSS-Dateien für standardkonforme Browser schreiben. Nur die Browser, die ein spezielles CSS-Hexengebräu benötigen (also die IEs), müssen die zusätzlichen CSS-Dateien herunterladen.

So verwenden Sie bedingte Kommentare, um CSS-Anweisungen nur für den IE6 bereitzustellen:

Für den IE7 tauschen Sie die “6″ gegen eine “7″.

Wenn es möglich ist, ohne Hacks das gewünschte Ziel zu erreichen, sollte man diesen Weg wählen. Je weniger Hacks Sie verwenden, desto einfacher und kleiner der Code.

3. Nutzen Sie Whitespace sparsam

Leerzeichen, Tabs oder Zeilenumbrüche vor oder nach einem Text (= engl. “Whitespace″) sind wichtig, um CSS-Code lesbar zu halten. Einzelne Whitespace-Zeichen erhöhen in der Summe die Ladezeit einer Seite. Jedes Leerzeichen, jeder Tab und jeder Zeilenumbruch, den Sie sparen können, ist ein Zeichen weniger.

Dies ist aber ein Punkt, bei dem ich nicht empfehlen würde zu knausern, nur um die Dateigröße zu verkleinern. Es ist wichtig, dass Sie (und hoffentlich auch andere) die Datei später noch lesen können. Wenn es dazu Whitespace braucht, ist es eben so. Außerdem wäre es sehr schwer für Sie, die anderen Regeln umzusetzen, wenn Ihr CSS unübersichtlich ist. Machen Sie sich bewusst, dass Whitespace wie Luft ist – nicht zu sehen, aber trotzdem mit Gewicht.

Das folgende Bild zeigt zwei extreme Formatierstile. Der erste mit viel, der zweite mit sehr wenig Whitespace. Ich bevorzuge die einzeilige Version ohne Tabs, weil ich so die Selektoren besser lesen kann und meinen breiten Bildschirm besser ausnutze. Aber das gilt nur für mich. Sie bevorzugen vielleicht eingerückte Selektoren und einzeilige Deklarationen.

Einer mit viel Whitespace im Vergleich zu einem mit sehr wenig Whitespace
Darstellung von zwei extremen CSS-Formatierungen: Einer mit viel Whitespace im Vergleich zu einem mit sehr wenig Whitespace

Whitespace effizient einzusetzen ist eine feine Sache und empfohlene Praxis für einfach zu wartenden CSS-Code. Beachten Sie aber, dass mit eingespartem Whitespace auch die Dateien kleiner sind. Sie könnten aber auch Whitespace in Ihrer Arbeitskopie belassen und in der live eingesetzten Version Whitespace entfernen lassen. So bleibt das CSS dort klein, wo es darauf ankommt.

4. Verkleinern Sie Frameworks und Resets

Nathan Smith's 960 Grid System uses a reset
Nathan Smiths 960 Grid System-CSS-Framework verwendet eine Reset-Regel.

Wenn Sie sich dazu entschlossen haben, ein fertiges oder selbstgeschriebenes CSS-Framework zu verwenden, sollten Sie sich die Zeit nehmen, die Dokumentation und jede einzelne Zeile der CSS-Datei zu untersuchen. Das Framework könnte Regeln enthalten, die Sie für Ihr Projekt nicht gebrauchen können. Diese können Sie entfernen. Weiterhin finden Sie vielleicht heraus, dass das Framework einiges eleganter macht, als Sie selbst es gemacht hätten. Das zu wissen, kann dabei helfen, nicht das Gleiche selbst nochmal in die CSS-Datei zu schreiben.

Dasselbe gilt für CSS-Resets. Das Grid-CSS von YUI enthält ein CSS-Reset und Eric Meyers Reset ist ebenfalls sehr beliebt. Resets helfen dabei, browserspezifische CSS-Eigenheiten zu neutralisieren. Wenn Sie schon etwas über die Website wissen, die Sie gerade bauen, könnten Sie vielleicht auf einige Deklarationen verzichten. <pre> und <code> werden in Muttis Kochrezepte-Blog wohl kaum Verwendung finden. Ein Design-Portfolio wird wahrscheinlich weder <sub> noch <dfn> oder <var> und so weiter verwenden. Also entfernen Sie das, was Sie nicht brauchen. Das ist nicht nur in Ordnung, sondern sogar von Eric Meyer empfohlen.

Wie ich schon auf der CSS-Reset-Seite geschrieben habe, diese Reset-Regeln sind nicht in Stein gemeißelt. Sie sind ein Anfang.

Crafting Ourselves (engl.) – Eric Meyer (meyerweb.com)

Ein Framework und/oder CSS-Resets zu verwenden, kann Ihnen dabei helfen, Ihre Dateien schlank zu halten. Beides sollten Sie aber nicht so verwenden, wie sie sind. Die Framework- und Reset-Dateien zu stutzen kann die Lesbarkeit und Wartbarkeit Ihrer CSS-Dateien noch weiter erhöhen.

5. Machen Sie Ihr CSS zukunftssicher

Doug Bowman's stopdesign.com CSS reveals specially crafted selectors used for layout
Doug Bowmans stopdesign.com-CSS enthält spezielle Selektoren für das Layout.

Ein anderer Weg, CSS zu optimieren, ist die Trennung der layout-spezifischen Deklarationen vom Rest. Ich habe auch schon davon gehört, dass einige, Typografie und Farben von Layout-Deklarationen trennen. Mit dieser Praxis konnte ich mich nie anfreunden. Ich mag es nicht so gerne, Selektoren zu wiederholen, nur um verschiedene Deklarationstypen mit ihnen zu assoziieren.

Allerdings kann ich mich dafür erwärmen, Layout-Regeln von anderen Regeln zu trennen, indem man das Layout in eine separate Datei auslagert oder wenigstens einen Teil der CSS-Datei nur für das Layout reserviert. Dies wird in “Transcending CSS″ von Andy Clarke empfohlen. In diesem Buch erinnert uns Clarke auch an das Folgende:

Reine CSS-Layouts waren schon immer ein Kompromiss. Die aktuellen CSS-Spezifikationen waren nie dazu gedacht, grafisch aufwändige und komplexe Benutzerschnittstellen zu erstellen, die das moderne Web heute erfordert. Die aktuellen Methoden — Floats und Positionierung — waren nie als Layoutwerkzeuge gedacht.

Transcending CSSAndy Clarke.

Ein Weg, diese Sätze zu interpretieren, ist, Floats und Positionierung mit CSS als, nun ja, Layout-Hacks anzusehen. Auch wenn wir keine echte Alternative zu diesen Hacks haben, wird es in Zukunft hoffentlich einen Standard dafür geben, den die Browser unterstützen. Wenn das eintrifft, sollte es ein Leichtes sein, die Box-Model-Hacks gegen solche CSS-Regeln auszutauschen, die für das Layout gedacht sind. Es wird allerdings noch eine Weile dauern, bis es soweit ist. Aber dann werden richtige Layout-Eigenschaften zu leichteren Websites führen und wir müssen keine Löcher mehr in unvollständigen CSS-Spezifikationen umschiffen.

6. Dokumentieren Sie Ihre Arbeit

David Shea's markup guide at mezzoblue.com
Der Markup-Guide (engl.) von David Shea zeigt, wie HTML-Tags richtig eingesetzt und wie sie auf seiner Website mezzoblue.com (engl.) angezeigt werden. Auch Websites ohne dynamisches HTML können diese simple und effektive Dokumentation als Grundlage verwenden.

In einem Team ist es sehr wichtig, dass sich Designer regelmäßig über Einführung und Einsatz von Design-Regeln austauschen, damit sie ein konsistentes Design über die gesamte Website hinweg erreichen. Wenn beispielsweise ein Designer HTML für ein Tab-Interface einer Website entwerfen will, kann das Lesen der Dokumentation verhindern, dass diese Arbeit doppelt gemacht wird und HTML sowie CSS dadurch aufgebläht werden.

Dokumentation, HTML- und CSS-Dokumentation eingeschlossen, sind nicht nur im Team, sondern auch für Einzelkämpfer wichtig. Eigene Projekte können nach einem Jahr Arbeit an anderen Projekten wie das Werk eines anderen aussehen. Ihr zukünftiges Ich könnte vielleicht Hinweise darauf nett finden, wie das CSS-Grid funktioniert oder welche Seiten bereits einen zweiten Form-Button haben. Es wird Ihnen oder anderen ersparen, unnötige oder überflüssige Dinge in die CSS-Dateien zu schreiben.

Dokumentation hat den positiven Nebeneffekt, dass man dort nähere Erklärungen unterbringen kann, die anderenfalls direkt in die CSS-Dateien geschrieben werden müssten. CSS-Kommentare sind nützlich, um große CSS-Dateien zu unterteilen. Lange Kommentare würden die Dateigrößen anschwellen lassen und sind wahrscheinlich sowieso in der Dokumentation besser aufgehoben. Trotzdem sind ausführliche Erklärungen direkt in der CSS-Datei auf jeden Fall besser als gar keine Dokumentation. Sie in eine separate Dokumentation zu schreiben, ist ein sehr guter Weg, CSS-Dateien klein zu halten.

7. Komprimieren Sie

Es gibt einige sehr schöne Anwendungen, die CSS für Sie optimieren und komprimieren. Sie ermöglichen Designern, eine für Menschen lesbare Arbeitskopie zu verwenden und gleichzeitig eine Browser-freundliche Version produktiv einzusetzen, die nur einen Bruchteil so groß ist wie die Arbeitskopie. Programme wie CSSTidy und YUI Compressor können unnötigen Whitespace entfernen, redundante CSS-Deklarationen aufspüren und entfernen und ausführliche Deklarationen in CSS-Kurzschrift dort umwandeln, wo Sie es vielleicht vergessen haben.

Beliebte Text-Editoren wie BBEdit, TextMate und TopStyle können ebenfalls helfen, CSS-Dateien nach Ihrem Geschmack zu formatieren. Es gibt sogar die Möglichkeit, mit PHP fertig gezippte Versionen von CSS-Dateien zu erzeugen. Noch mehr CSS-Kompressoren und -Optimierer finden Sie im Artikel List of CSS Tools (engl.) im Smashing Magazine.

Wichtig zu erwähnen ist noch, dass diese Programme gut, aber nicht immer perfekt funktionieren. CSS-Hacks können Probleme machen — ein weiterer Grund, diese Hacks in spezielle Dateien auszulagern.

Ein anderes Programm zur Optimierung von CSS-Dateien möchte ich erwähnen. Es ruft alle Seiten einer Website auf und protokolliert, welche CSS-Regeln und Deklarationen nicht genutzt werden und zeigt sie als Liste an. Unglücklicherweise gibt es dieses Programm noch nicht. Für ein solches Programm würde ich aber gerne Geld bezahlen.

Mehr als einmal habe ich davor zurückgeschreckt, CSS-Deklarationen zu löschen, weil nirgendwo dokumentiert war, dass sie Überbleibsel aus der Entwicklung sind. Wenn ein Programm diese Regeln auflisten könnte, wäre das hilfreich, CSS-Dateien zu warten und zu verkleinen.

Fazit

Sauberer und optimierter Code führen nicht nur zu kleineren CSS-Dateien, sondern auch zu besserer Wartbarkeit und Lesbarkeit der Dateien. Die hier vorgestellten Prinzipien gelten nicht nur für CSS, sondern können auch auf HTML, Javascript und andere Programmiersprachen angewendet werden. CSS-Dateien stehen zwar nicht im Vordergrund wie die Darstellung einer Website beim Benutzer. Trotzdem können Benutzer durch schnellere Ladezeiten und auch Entwickler durch saubereren Code gleichermaßen von CSS-Optimierung profitieren. Wenden Sie diese Prinzipien auf Ihre aktuellen und zukünftigen Projekte an, Sie werden es sicher nicht bereuen.

Über den Autor

Tony White betreibt die Einmann-Show Ask the CSS Guy (engl.), ein Feierabend-Blog über CSS, Javascript und Webdesign. Er lebt in Memphis, Tennessee, USA. ™

Kategorien
Webdesign

Dr. Web Magazin-Relaunch – Aus dem Maschinenraum

Wo stand das Dr. Web Magazin – technisch gesehen – bis gestern? Die Dr. Web zugrunde liegende Technik hat sich im Laufe der Zeit entwickelt, ein „gewachsenes“ System. Es funktionierte zwar, war aber nicht gut weiterzuentwickeln und skalierte nicht gut. Ein CMS gab es nicht. Das verlangsamte oder behinderte zahlreiche Arbeitsprozesse. Beispielsweise gab es am Ende jeweils eine Handvoll verschiedener Templates für Header, Footer und so weiter.

Artikelrelationen wurden von Hand gemacht. Änderten sich Web-Adressen, musste man die Relationen von Hand korrigieren. Unix- und Linux-Kenner können sowas mal eben mit sed oder awk erledigen, aber diese Kenntnisse hat nicht jeder. Und umständlicher als „automatisch“ ist das immernoch. Ich könnte jetzt noch einige Zeit weiter davon berichten, wie es vorher war. Aber es ist wohl schon jetzt deutlich: „Es musste etwas getan werden“. Das war die Hauptmotivation für den Relaunch.

Auf der Bühne

Wie bereits erwähnt wurde, ist WordPress das neue Herz von Dr. Web. Die Software ist schon seit Jahren hier im Einsatz und deren Stärken und Schwächen sind hinreichend bekannt. Diese positiven und – auch wenn es paradox klingen mag – negativen Erfahrungen mit WordPress haben sich bei der Evaluation der Software jedenfalls als ein viel stärkeres Argument erwiesen als beispielsweise die toll klingenden Eigenschaften und Vorzüge ansonsten unbekannter Systeme („unbekannt“ im Sinne von „ohne praktische Erfahrung im Alltag“). Im simulierten „Alltags-Test“ hat nur WordPress überzeugt – obwohl es kein klassisches CMS ist. Manchmal bleibt man eben doch bei dem, was man kennt. Das war, jedenfalls für mich, eine unerwartete, aber interessante Erfahrung.

Interessant war der Import der mehreren tausend statischen HTML-Seiten. Leider hatte sich niemand freiwillig gemeldet, um von Hand 3000 HTML-Dateien auszuschneiden und ins CMS zu kopieren. Ich habe also ein Importskript geschrieben. Anhand des Indexes der internen Suchmaschine konnte sich der Importer über die ganze Website hangeln. Dabei musste das Skript alle HTML-Dateien nochmal einlesen, weil im Index kein HTML gespeichert ist. Mittels HTML-Tidy und XPath hat sich der Importer das interessante HTML gegriffen, es verarbeitet und über die XML-RPC-Schnittstelle ans WordPress geschickt. Die Artikel sollten korrekt getaggt und den bereits vorhandenen Autoren zugeordnet werden. Der Importer musste auch die Bilder der Artikel importieren.

Was ich hier ein wenigen Sätzen beschrieben habe, war ein schier endloser Zyklus aus Entwickeln, Testen, Debuggen, Entwickeln… Immer wieder sind wir auf Dateien gestoßen, bei denen etwas anders war als bei Hunderten davor. Das ist aber normal. Innerhalb von zehn Jahren ändert sich ab und zu etwas. Jedes Mal musste ein neuer Importlauf gemacht werden, weil wir nicht die ersten hundert Artikel anders als die letzten hundert importieren wollten.

Trickreich war auch die Umleitung der alten Adressen auf die neuen. Für den Relaunch benötigten wir über 3700 Weiterleitungen. Die Vorgaben waren, dass diese Weiterleitungen einfach zu administrieren sein sollten (insbesondere ohne Webserver-Neustart) und nur wenig „Overhead“ erlaubt war. 3700 Weiterleitungen ins Htaccess zu schreiben, wäre sicher nicht ohne erhebliche Leistungseinbußen möglich gewesen, zumal diese Datei bei jedem HTTP-Request, also bei HTML, Bildern, CSS und so weiter abgearbeitet wird. Statt der 3700 Weiterleitungen haben wir nur eine ins Htaccess geschrieben, welche Anfragen zu ausgewählten Verzeichnissen an ein Umleitungsskript schickt. Dieses Skript wertet die komplette Anfrage aus und sucht dann aus den 3700 Zielen das richtige heraus.

Hinter den Kulissen

Unsichtbar oder transparent für die Besucher arbeiten im Hintergrund von WordPress einige selbstentwickelte PlugIns. Sie kümmern sich um die Verbindung zur Kundenverwaltung, zeigen automatisch Illustrationen für Artikel oder passen WordPress besser an vorhandene Arbeitsabläufe an.

Eine große Arbeitserleichterung ist, dass überall auf der Website WordPress-Templates verwendet werden können. Dabei ist es egal, welche Software das HTML erzeugt. Neben WordPress gibt es noch die nicht von WordPress kontrollierten Teile „Mein Abo“/Kundenverwaltung, die Kontaktformulare, die Suchmaschine (Scope). Möglich wird das durch die kleine Programmbibliothek „WPCOMPAT“, welche einen kleinen Teil WordPress-Funktionen nachbildet und sogar unveränderte WordPress-PlugIns verwenden kann.

Das waren ein paar interessante technische Fakten zum Relaunch. Von Gesamtumfang habe ich circa 50% erwähnt, gemacht wurde noch viel mehr – insbesondere die Infrastruktur für den Betrieb der Website wurde erneuert. Die Liste mit den noch zu erledigenden Aufgaben ist derzeit auch wieder gut gefüllt – da kommt also sicher noch mehr. ™

Kategorien
Webdesign

In eigener Sache: Sicherheit im Dr. Web Magazin

48 Stunden lang gab es beim Zugang für die PLUS-Inhalte eine Sicherheitslücke, die es ermöglichte, sich ohne Zugangsdaten einzuloggen und Kundendaten einzusehen. Der Entdecker der Sicherheitslücke hat bisher keine Details zu der Lücke öffentlich gemacht.

Das Dr. Web-Team war frühzeitig informiert und hat die Lücke innerhalb weniger Minuten behoben. Ein Vergleich mit Sicherheitskopien der Daten hat ergeben, dass keine es ungewöhnlichen Datenänderungen gegeben hat. Wer sich beunruhigt fühlt, kann jetzt (und auch jederzeit sonst) sein Passwort auf der Seite Meine persönlichen Daten ändern. Tipps für sichere Passwörter gibt es im Artikel zur Kennwortsicherheit.

Welche Konsequenzen ziehen wir aus dieser Erfahrung?

Wir möchten die Sicherheit des Dr. Web Magazins allgemein weiter erhöhen.

1. Eine SSL-Verschlüsselung gibt es jetzt schon teilweise. Geplant ist, die Verschlüsselung auf die ganze Website auszudehnen, so dass beispielsweise PLUS-Logins über öffentliche bzw. unverschlüsselte WLAN-Verbindungen nicht abgehört werden können.

2. In Zukunft sollen alle Formulare, bei denen ein Passwort neu eingegeben wird, die Passwortstärke anzeigen. Mit der Anzeige können Nutzer das Sicherheitsniveau des Passworts besser einschätzen. Die beste Sicherheit nützt bekanntlich nichts, wenn die Passwörter schwach sind.

3. Alle Systeme und Änderungen an ihnen werden intensiveren Sicherheitsüberprüfungen unterzogen, bevor sie online gehen.

Mit diesen Maßnahmen wollen wir das Sicherheitsniveau auf DrWeb.de weiter erhöhen und Kundendaten besser sichern. Sicherheit ist allerdings kein Produkt, das irgendwann einmal fertig ist. Vielmehr handelt es sich um einen Prozess, den man immer in Betrieb halten muss. Das haben wir getan und wir werden es in Zukunft intensiver tun. Deshalb werden wir weiterhin offen mit Sicherheitslücken umgehen.

Wir hoffen auf Ihr Verständnis. Fragen?

Kategorien
Webdesign

Nur zum Spaß: Nachrichten stauchen auf dem Smartphone

von René Schmidt

Manche Dinge im Leben von Software- und Web-Entwicklern dienen nur dem Spaß. Aktueller Anlass: ein neues Smartphone. Wieviele Schlagzeilen bekommt man in lesbarer Schrift ohne Scrollzwang auf den kleinen Bildschirm? Ganz einfach: Man kürzt sie einfach, und zwar so, dass fast keine Informationen verloren gehen.

Smartphones gibt es schon seit einigen Jahren. Zu den bekanntesten gehören wohl das Nokia N82/N95, Apples iPhone und die Blackberry-Smartphones. Mittlerweile kommen viele Geräte mit WLAN und 3G, was diese Geräteklasse endlich auch im Alltag internettauglich macht und zum Herumspielen einlädt.

Screenshot
Smartphone: Platz ist Mangelware

So nutzen Sie das SmartPhone-RSS-Aggregator-Script
Laden Sie das Archiv herunter und entpacken Sie es. Schieben Sie das neue Verzeichnis auf Ihren Webserver innerhalb des wwwroots, also so, dass Sie es im Browser aufrufen können. Das Script ist fertig konfiguriert und eingerichtet. Sie können das Script an Ihre Bedürfnisse anpassen. Konfigurationsvariablen finden Sie ganz obem im Script. Die wichtigsten Einstellmöglichkeiten:

  • Wörter kürzen: Platz ist auf SmartPhone-Bildschirmen Mangelware und daher wertvoll. Standardmäßig werden Wörter, die länger als sechs Zeichen lang sind, gekürzt. Die Vokale werden entfernt, außer am Anfang und am Ende. Doppelvokale bleiben ebenfalls erhalten, damit das Wort noch lesbar bleibt. „Gbrtstg“ ist recht einfach als „Geburtstag“ zu erkennen. Das Ergebnis: 10-20% mehr Platz für Nachrichten. Wer das nicht mag, kann es auch abstellen.
  • Wörter umbrechen: Lässt man den Browser Wörter auch mittendrin umbrechen, wird der spärlich vorhandene Platz besser ausgenutzt. Hinweis: Wenn Sie die Seite im Firefox anzeigen, hat diese Einstellung keinen Effekt, Firefox beherrscht diese Einstellung nicht.
  • Feed URL: Geben Sie hier den Feed-URL an. Das Script verwendet SimplePie als Feed-Engine. Der DrWeb-RSS-Feed ist als Standard eingestellt.
  • Besuchte Schlagzeilen ausblenden: Besuchte Schlagzeilen können Sie ausblenden oder auch nicht ausblenden. Im letzten Fall werden die Schlagzeilen dann durchgestrichen.
  • Neu-Laden-Intervall: Sie können in Sekunden angeben, wann die aktuell aufgerufene Seite neu geladen werden soll.
  • Dauer für Ein- und Ausblenden: Die Schlagzeilen können ein- und ausgeblendet werden. Die Dauer dafür wird in Sekunden angegeben. Grund für diese Funktion: Wenn der Bildschirm des Handys am Arbeitsplatz im Augenwinkel zu sehen ist, würde das ständige Aktualisieren der Schlagzeilen von der Arbeit ablenken, zumal manche Geräte den Bildschirminhalt dafür kurz komplett löschen. Blendet man die Schlagzeilen vor dem Aktualisieren langsam aus und danach wieder ein kann, kommt dieser Effekt nicht so sehr zum Tragen. Die besten Resultate gibt es bei circa 10-15 Sekunden Aus- und Einblenddauer.

Noch ein paar Tipps zum Schluss:

  • Feeds mixen: Mixen Sie mehrere Feeds zu einem, beispielsweise mit www.feedcombine.co.uk.
  • Zeichenkodierung: Achten Sie beim Herumspielen mit dem Script darauf, dass Sie es immer im UTF-8-Format speichern. Konvertieren Sie gegebenenfalls vorher, beispielsweise mit Notepad++.

Links zum Artikel:

  • Smartphone-RSS-Aggregator-Script v0.1

Haben Sie noch mehr Ideen, besseren Code? Schicken Sie Ideen und Script-Links an die Redaktion!

Erstveröffentlichung 31.07.2008

Kategorien
Webdesign

Ihr Kennwort ist unsicher

Die kürzlich aufgedeckten Abhörskandale bei der Telekom, Lufthansa & Co. zeigen es: Alle verfügbaren Spionagemöglichkeiten werden auch genutzt – und das nicht nur von Unternehmen. Auch für den Privatmann ist Datenschutz ein eigentlich wichtiges Thema. Doch viele kümmern sich aus Unwissenheit nicht um den Schutz ihrer Daten und verwenden einfach zu knackende Passwörter. Dabei sind sichere Kennwörter kein Problem.

Solche Aussagen hört man oft::

  • „Ich habe nichts zu verbergen“ oder
  • „Wer interessiert sich schon für meine Daten?“

Die Aussage, man habe „nichts zu verbergen“, ist die klassische „Kopf-in-den-Sand“-Vermeidungsstrategie. Jeder hat etwas zu verbergen, nämlich seine Privatsphäre. Wer möchte schon seine Steuererklärungen, Befunde des Urologen/Gynäkologen frei zugänglich im Internet wiederfinden. Nicht selten schnüffeln sogar große Zeitungen wie die BILD einfach per Google oder in sozialen Netzwerken auf der Suche nach irgendwie verwertbaren Skandalhappen. Außerdem kann es ja gerade Sinn und Zweck der Spionage sein, herauszufinden, ob die Daten einer Person interessant sind oder nicht. Man kann davon ausgehen, dass mehr oder weniger alles und jeder ausgespäht und überwacht wird, auch wenn die Daten sich hinterher doch als uninteressant herausstellen könnten.

Wichtig ist daher, so wenig Informationen wie möglich und so viel wie nötig öffentlich zugänglich zu machen. Der Rest sollte mit einem Kennwort geschützt werden. Doch viele wählen simple Kennwörter wie „Haus“ oder „Blume“ – ein fataler Fehler.

Kennwörter aus Wörterbüchern
Alle Sicherheitsmaßnahmen sind nutzlos, wenn ein Kennwort unbedacht gewählt wird. Verwendet ein Nutzer ein Kennwort aus einem deutschen, englischen, französischen (usw.) Wörterbuch, könnte man die Passwortabfrage eigentlich auch weglassen. Wie schnell solche Kennwörter geknackt sind, zeigt ein kurzes Beispiel mit einer kennwortgeschützten ZIP-Datei, die mit dem Desktop-Programm „Ultimate ZIP Cracker“ bearbeitet wird. Das Programm ist im Internet für ein paar US-Dollar ohne Probleme zu erwerben. Es bietet zahlreiche Methoden an, mit denen das Kennwort ermittelt werden kann. Zwei davon sind „Brute Force attack“ und „Dictionary search“. Die erste Methode probiert einfach alle möglichen Zahlen- und Buchstabenkombinationen aus, die zweite probiert Wörter aus Wortlisten aus.

Eigentlich wollte der Autor hier eine Tabelle einfügen. Sie sollte zeigen, wieviele Sekunden das Programm für die Ermittlung mit den beiden Methoden benötigt. Das Programm war aber so schnell fertig, dass keine Zeit blieb, den Messvorgang zu starten. Praktisch sofort nach dem Klick auf „Start“ war das Kennwort „blume“ schon ermittelt – egal ob „Brute Force attack“ oder „Dictionary search“ eingestellt war.

Screenshot
Die Freeware PicoZip-Recovery ist nicht ganz so schnell, aber ebenso wirkungsvoll wie Ultimate Zip Cracker

Zu kurze Kennwörter
Aber auch Kennwörter, die nicht in Wörterbüchern stehen, sind mit dem Programm schnell ermittelt. Ein Kennwort wie „a3.3_“ ist auf einem durchschnittlich schnellen Rechner innerhalb weniger Sekunden oder Minuten ermittelt. Auf dem Rechner des Autors (Windows XP in einer VirtualBox-Maschine auf einem AMD Turion64 X2, 1,9 GHz, 2 GB RAM mit Linux) schaffte das Programm während eines Brute-Force-Angriffs über 13 Millionen Kombinationen pro Sekunde.

Ein kurzer Vergleich: Angenommen, ein zwei Zeichen langes Kennwort besteht aus den Ziffern 0 bis 9 (also zehn verschiedenen). Es gibt bei diesem Kennwort maximal 102 (=100) verschiedene Kombinationen, 00 bis 99. Verwendet man ein fünf Zeichen langes Kennwort bestehend aus den 26 Kleinbuchstaben gibt es 265 verschiedene Kombinationen, also rund 11,8 Millionen. Das klingt nach viel. Im Vergleich zu den mindestens 13 Millionen Kombinationen, die Ultimate ZIP Cracker pro Sekunde schafft, ist das aber so gut wie nichts.

Die gezeigten Beispiele und Erkenntnisse mit dem ZIP-Cracker lassen sich im Wesentlichen auf das Internet übertragen, auch wenn es dort etwas schwieriger ist, die Kombinationen schnell durchzuprobieren. Das Prinzip bleibt gleich.

Was tun? Kurz gesagt:

  • Verwenden Sie lange Kennwörter mit mindestens acht Zeichen, die jeweils mindestens zwei Klein- und Großbuchstaben, Ziffern und Sonderzeichen enthalten. Je größer der Zeichenraum und je länger das Kennwort, desto größer die Anzahl verschiedener Zeichenkombinationen und desto schwieriger ist es, das Kennwort zu ermitteln. Der DrWeb-Kennwort-Generator hilft dabei, solche Kennwörter zu erzeugen.
  • Verwenden Sie keine Begriffe, die leicht zu erraten sind. Namen vorwärts oder rückwärts geschrieben oder Kalenderdaten sind keine gute Idee.
  • Speichern Sie die Kennwörter mit einem Passwortmanager, wie ihn jeder moderne Webbrowser bietet. Das Gute: So können Sie auch sehr lange und somit sicherere Kennwörter verwenden.
  • Notieren Sie sich das Kennwort und bewahren Sie es an einem sicheren Ort auf. Das birgt natürlich auch wieder Risiken. Allerdings ist es unwahrscheinlich, dass man sich an ein Kennwort wie „ubPFCwvgC19An!)7“ erinnert, sollte das Kennwort aus irgendeinem Grund nicht mehr im Browser gespeichert sein.
  • Geben Sie niemandem Ihr Kennwort, Stichwort Social Engineering.
  • Verwenden Sie nicht überall ein Standard-Kennwort, sondern variieren Sie es von Fall zu Fall.
  • Wechseln Sie Ihr Kennwort regelmäßig.

Mit diesen einfachen Regeln sind Ihre Daten relativ sicher. ™

Links zum Thema:

Erstveröffentlichung 23.06.2008

Kategorien
Webdesign

Bildbearbeitung mit Javascript

„Bildbearbeitung mit Javascript“ – das klingt zunächst seltsam. Javascript wird im Webbrowser ausgeführt. Dort Bildbearbeitung zu betreiben, erscheint zunächst fragwürdig. Mit PhotoType geht das, wenn auch mit Hilfe eines kleinen PHP-Scripts, welches die Berechnungen auf dem Server erledigt.

Das auf Prototype basierende Script kann Bilder skalieren, kippen, spiegeln und rotieren sowie Schatten, Bilder und Texte einfügen (lassen). Beispiel:

l_oImage = new Photo().load("image.jpg").resize({width:200}).rotate(3).dropShadow();
l_oImage.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oImage.fetch());

Phototype

Auf Deutsch: Lade das Bild „image.jpg“, skaliere es proportional auf 200 Pixel Breite, rotiere es um drei Grad gegen den Uhrzeiger und gib dem Bild einen Schlagschatten. Füge dann die Bildunterschrift „Get ajaxorized!“ in der Schrift „1942.ttf“ hinzu und mache das Bild zu einem Kindobjekt des Body-Tags, damit es im Browser angezeigt wird. Das ist unbestritten einfach und kann durchaus eine Erleichterung beim Entwickeln von Web-Applikationen sein.

Insbesondere für Content Management-Systeme sind diese Funktionen interessant, weil man so gleich mehrere Produktionsschritte für bebilderte Artikel vereinfachen oder gar automatisieren kann. Allerdings: Das alles geht zur Not auch ohne Javascript, so dass PhotoType erstmal eine nette Spielerei bleibt, dessen Einsatz allenfalls in Spezialfällen sinnvoll ist.

Entwickler sollten sich jedoch nicht ohne Skepsis auf PhotoType stürzen. Das Skript verarbeitet ungeprüft GET-Variablen, was es, je nach Vorbedingung, anfällig für Injection-Angriffe machen kann. Außerdem sollte das PHP-Script einen Cache-Mechanismus bekommen. Erzeugt man bei jedem Seitenaufruf das Bild aufs neue, würde die Serverlast stark ansteigen.

Fazit: Auf PhotoType hat die Welt zwar nicht gewartet. Die Software findet aber bestimmt ihre Nische und wird dort ihre Vorteile ausspielen.

Kategorien
Webdesign

Dreidimensionale Welten mit Blender

Blender ist ein ursprünglich proprietäres 3D-Modellierungsprogramm. Es wurde nach der Insolvenz des Herstellers von der neu gegründeten Blender Foundation für 100.000 EUR gekauft und unter die freie General Public License gestellt. Seit mittlerweile über vier Jahren ist das Programm lizenzkostenfrei erhältlich und wird stetig weiterentwickelt.

Der große Funktionsumfang hat sechs Mitgliedern der Blender Foundation ermöglicht, innerhalb eines Jahres den komplett computeranimierten Kurzfilm „Elephants Dream“ fast ausschließlich mit freier OpenSource-Software herzustellen. Während der Produktion wurde entschieden, im Film berechnete Haare zu zeigen. Dazu musste Blender erst mit entsprechenden Funktionen ausgestattet werden – das Ergebnis ist ein visuell beeindruckender 11-Minuten-Film, der viel Spielraum für seine Interpretation bietet. „Elephants Dream“ ist mit allen verwendeten Dateien wie Texturen, Geräusche und Modelle kostenlos als Download und für 35 EUR DVD erhältlich und ist ein schönes Beispiel für die Leistungsfähigkeit freier OpenSource-Software.

Der große Leistungsumfang von Blender hat allerdings auch einen Nachteil: Erfolgserlebnisse gibt es erst nach einer großzügig bemessenen Einarbeitungszeit, was aber wohl für die meisten 3D-Modellierungsprogramme gilt. Blender läuft auf Mac OS X, Linux, Windows und sieben weiteren Betriebssystemen. „Elephants Dream“-Film und -Produktionsdateien.

Kategorien
Webdesign

Bacula – Kommt immer nachts, wenn es dunkel ist

Bacula ist eine Programmsammlung für Netzwerk-Backups. Mit der Software ist es möglich, in einem heterogenen Netz Daten zentral zu sichern. Dem entsprechend ist die Software auf Systemadministratoren ausgerichtet und sehr flexibel. Anwender mit geringeren Backup-Ansprüchen gelangen allerdings mit einer einfacher gestrickten Software schneller ans Ziel.

Die Flexibilität der Software wird allein schon an der Liste mit den unterstützten Backup-Medien deutlich. Bacula unterstützt Blockgeräte wie Festplatten und USB-Sticks, DVDs, Streamer und Autochanger. Es ist sogar möglich, für Autochanger automatisch Beschriftungen mit Strichcodes zu erzeugen und drucken zu lassen, um dem Systemadministrator das Leben etwas zu erleichtern. Bacula ist freie OpenSource-Software und läuft auf Linux, Unix, Solaris sowie Windows.

Kategorien
Webdesign

Sturmlauf gegen Websites – Fuzzing mit GreaseMonkey

uzzing ist eine relativ simple Software-Testmethode, mit der versteckte Programmfehler aufgedeckt werden können. Web-Entwickler können mit dem Firefox-Plugin GreaseMonkey diese Methode einsetzen, um die Sicherheit ihrer Programme zu erhöhen.

Wie für alle GreaseMonkey-Artikel gilt auch hier: Etwas mehr als grundlegende Javascript-Kenntnisse sind nützlich, um das volle Potenzial von GreaseMonkey zu entfalten. Ansonsten gilt: „Don’t try this at home.“ GreaseMonkey kann in falschen oder unerfahrenen Händen durchaus gefährlich sein.

Das GreaseMonkey-Plugin finden Sie auf addons.mozilla.org. Wie Sie GreaseMonkey-Skripte installieren, lesen Sie im Dr. Web-Artikel Greasemonkey-Skripte selbstgemacht – so gehts.

Voraussetzung
Web-Anwendungen oder Websites, die Benutzereingaben über ein Formular oder eine AJAX-Schnittstelle entgegen nehmen, sind nichts Ungewöhnliches. Dabei besteht immer die Gefahr von Cross-Site-Scripting– oder Code-Injection-Angriffen. Bei solchen Angriffen werden den verarbeitenden Skripten Benutzereingaben untergejubelt, die hinterher zu unerwünschten Effekten führen können. Beispielsweise werden SQL-Kommandos direkt an die Datenbank geschickt oder fremde Inhalte in die Anwendung geschleust. Normalerweise präpariert ein Skript vor der weiteren Verarbeitung die Benutzereingaben so, dass sie keinen Schaden anrichten können. Eine andere mögliche Gegenmaßnahme wäre, „unangebrachte“ Benutzereingaben einfach abzulehnen.

Das Problem dabei ist, dass Entwickler selten wirklich alle möglichen Eingaben erfassen können. Zu unterschiedlich sind die Anforderungen, um alles 100%ig vorherzusehen. Bei Registrierungsformularen sind viele verschiedene Eingabeformate zugelassen. E-Mail-Adressen, Telefonnummern und Postadressen haben jeweils ihre eigenen Anforderungen. Was für E-Mails zulässig ist, muss für Postadressen noch lange nicht erlaubt sein und so weiter. Jeder Entwickler gibt sein Bestes und dennoch kommt es oft genug im Produktionsbetrieb zu Problemen, weil Nutzer etwas eingegeben haben, was das System hätte besser bereinigen oder gleich ablehnen sollen. Im besten Fall geht alles gut. Schlimmer wird es, wenn die Datenbank Inkonsistenzen aufweist oder Kriminellen auf diese Weise Sicherheitslücken präsentiert werden. Oft genug gerät auch nur die Web-Anwendung aus dem Tritt und zeigt eine Fehlermeldung an.

Was tun? Fuzzing!
Die Frage ist nun, wie Web-Entwickler feststellen können, ob eine Software mit Eingaben jeglicher Art zurechtkommt. Eine einfache Methode ist das Fuzzing, bei dem Software mit Zufallseingaben solange bombardiert wird, bis sie mit einer Systemfehlermeldung oder einem Absturz kapituliert oder sich dem Test als gewachsen erweist und den Fehler gekonnt abfängt, beispielsweise mit einer stillen Bereinigung der Eingabe oder der Meldung, dass die Eingabe abgelehnt wurde. Um eine große Bandbreite an Eingaben abzudecken, werden idealerweise nicht nur Buchstaben, Satzzeichen oder Ziffern verwendet, sondern auch Sonderzeichen und solche, die auf keiner Tastatur zu finden sind.

Fuzzing
Fuzzing in Aktion. Ob das Formular-Skript mit dem Datenmüll zurechtkommt?

Grundlage für das Dr. Web-Fuzzing-Script für GreaseMonkey ist Random Filler von Adam Knutson, welches Formulare nach dem Zufallsprinzip ausfüllt. Es wurde für DrWeb um die Fähigkeit erweitert, auf Tastendruck Zufallszeichenketten zu erzeugen und in Input- sowie Textarea-Felder einzutragen. Hier ein Ausschnitt mit den wichtigsten Änderungen:

Fuzzing
Die Länge der Zufallsstrings können sie jeweils mit den Variablen „len“ angeben.

Wenn Sie das Skript installiert haben, aktualisieren Sie die aktuelle Seite und drücken dann STRG+SHIFT+F gleichzeitig. Alle Select-, Checkbox-, Radio-, Text- und Textarea-Felder der aktuellen Seite werden dann zufällig ausgewählt oder mit Zufallszeichenketten gefüllt. Die Zeichenketten werden aus den ASCII-Zeichen 32 bis 255 zusammengestellt.

Probieren Sie alle eigenen Formulare und Skripte mit dem Fuzzing-Skript aus. Spielen Sie auch mit den beiden „len“-Variablen (siehe Screenshot). Mit diesen Variablen geben Sie an, wie lang die zu erzeugenden Zeichenketten sein sollen. Selbst, wenn in einem nur zum Beispiel 32 Zeichen erlaubt sind, sollte ein Skript mit Eingaben von 1000 oder mehr Zeichen zurechtkommen. Viel Erfolg beim Absichern!

Links zum Thema:

  • GreaseMonkey-Plugin für Firefox
  • DrWeb-Fuzzing-Skript für GreaseMonkey
  • Cross-Site-Scripting erklärt
  • SQL-Injection
  • Greasemonkey und Firefox – Features en masse
  • Greasemonkey-Skripte selbstgemacht – so gehts
  • Random-Filler-Skript

Kategorien
Webdesign

Diagramme mit JPGraph und PHP

Diese OpenSource-Perle fühlt sich auf Webservern zuhause. JPGraph ist eine PHP-Programmbibliothek, mit der auf einfache und flexible Weise Diagramme erzeugt werden können. Die Bibliothek beherrscht die üblichen Diagramme wie Linien- und Balkendiagramme, spezielle wie Gantt- und Polardiagramme und einige andere mehr. Zahlreiche Funktionen zur Gestaltung der Diagramme machen aus öden Zahlenwüsten ansehnliche Schaubilder, sofern der Programmierer über etwas gestalterisches Verständnis verfügt.

JPGraph steht für nicht-kommerzielle Einsätze unter der QPL-1.0-Lizenz und ist somit freie OpenSource-Software. Kommerzielle Nutzer müssen für 85 Euro pro Installation auf einem physischen Server bezahlen oder für 650 Euro eine so genannte Bulk-Lizenz erwerben, welche die unbeschränkte Installation erlaubt. Das gekaufte JPGraph Professional beherrscht zusätzlich weitere Diagrammarten sowie lineare und zweidimensionale Strichcodes. Die Software benötigt PHP ab Version 5.1. Eine Version für PHP4 ist ebenfalls verfügbar.