Shy: Schüchtern aber wirkungsvoll

Es sind manchmal die Kleinigkeiten, die einem Webdesigner das Leben versüßen. Bei der Planung unserer neuen Firmenwebsite hatte ich mich entschieden, den neuen Internetauftritt via Media-Queries zusätzlich für Smartphones zu optimieren.

Gesagt - getan. Unser Designer hatte vor über einem Jahr bereits das Screendesign entworfen. Allerdings kamen wir aufgrund des hohen Auftragsvolumen nicht dazu, das Webdesign umzusetzen. Im nachhinein ein Glücksfall: Vor einem Jahr hätten wir nicht mit HTML5 und Media Queries gearbeitet, sondern über Auslesen des User-Agents unterschiedliche XHTML-Templates ausgegeben.

Das neue Design basiert auf einer angepassten Version des 1140px CSS Grid System. Das CSS-Framework funktioniert ähnlich wie blueprint oder 960, hat aber eine mobile Ausrichtung. Als Vertreter der Lean and Clean-Webfraktion habe ich das Framework leicht modfiziert und den Quellcode stark optimiert.

Als ich den Web-Prototypen fertiggestellt hatte, kam der inhaltliche Teil. Ich tauschte den Blindtext gegen den Originaltext aus. Alles sah auf dem ersten Blick gut aus und ich freute mich über das Ergebnis, ... bis mich unser Designer auf die unschönen Lücken des im Blocksatz gesetzten Anfangstexts aufmerksam machte. Was auf dem Desktoprechner noch akzeptabel aussah, mutierte auf Android und iPhone zur unleserlichen Sprachruine: Unser Text sah aus, als hätte man ihm die Zähne ausgeschlagen.

"Schade, dass man im Web keine Silbentrennung nutzen kann." dachte ich so bei mir und machte für einen Neandertal-HTMLer einen typischen Gedankenfehler. Mittlerweile unterstützen alle Browser das SHY-Symbol ­ (­ oder ­) .

<inerinnerungruf>
Soft Hyphen - abgekürzt shy - ist ein Zeichen, dass bildlich mit einem identischen oder vergleichbaren grafischen Symbol zum Hyphen (-) dargestellt wird. Das Zeichen wird nur sichtbar, wenn ein Zeilenumbruch innerhalb eines Wortes - z. B. durch das Ändern der Browsergröße - erzwungen wird. Ansonsten ist es unsichtbar.
</inerinnerungruf>

Nun stellte sich nur noch die Frage: "Wenn alle aktuellen Browser das Soft Hyphen verstehen, gilt dies auch für die Suchmaschinen?" Tatsächlich scheinen nach meinen Recherchen auf jeden Fall Google und Bing die schüchternen Trenntexte korrekt zu erkennen. Sehr wahrscheinlich gilt dies auch für eine Reihe weiterer Suchmaschinen.

Unsere neue Startseite ist nun online und wird in allen Browsergrößen korrekt dargestellt. Ich werde in nächster Zeit ein Auge auf die Suchmaschinen-Ergebnisse haben, ob ich uns nicht ungewollt ins SEO-Off geschossen habe.

Links zum Post

• 1140px CSS Grid System
• hyphenator (automatic javascript solution)
• Startseite der Agentur Simon

PS Leider missbrauchen viele Spammer das unschuldigen Zeichen zur Verschleierung ihrer prätentiösen Werbediarrhoe. Solltet ihr euch wundern, wieso trotz Badword-Liste Spam in Blogkommentaren auftreten, ist das ­ vielleicht der Grund dafür.

Blitzschnell grafische Platzhalter erstellen

Nachdem einige Zeit vergangen ist, möchte ich heute einen kurzen Artikel über ein Online-Tool von mir schreiben. Auf meiner Web-Spielwiese unter www.xoc.de veröffentliche ich kleine Tools, die ich selbst benötige.

Ein neu veröffentlichter Liebling von mir ist createimage. Damit kann man blitzschnell grafische Platzhalter im PNG-Format erstellen. So ein Platzhalter ist im Prinzip die grafische Variante eines Blindtextes.

Es kommt immer wieder vor, dass ich beim Prototyping schnell eine Grafik benötige. Also habe ich createimage entwickelt, welches ein paar Variablen wie z.B. Größe, Farbe und Text abfragt. Nach dem Absenden wird die Grafik erstellt - schnell und schmerzfrei.

Viel Vergnügen...

Mit Favelets die Arbeit in TYPO3 und CMSMS erleichtern

Manchmal kann man sich das Leben als Webdesigner vereinfachen, merkt es aber nicht. In meiner Internetagentur betreuen wir viele TYPO3-Auftritte. Natürlich bieten wir auch andere CMS wie z.B. CMSMS (CMS made simple) an.

Will man an einem Projekt arbeiten, ruft man die Seite. Dann kopiert man die URL, hängt eine /typo3/ an, um sich im Backend einzuloggen. Das sind jedes Mal fünf nervige Sekunden.

Warum so kompliziert, wenn es auch einfacher geht? Zum Beispiel mit einem Favelet. Favelets sind Javascript-Snippets, die man als Lesezeichen in seinem Browser ablegt.

Ich habe eine Favelet erstellt, welches beim Klicken eine neue Seite mit dem TYPO3-Login öffnet:

• TYPO3-Login

Einfach den Link auf die Lesezeichensymbolleiste ziehen, eine TYPO3-Seite besuchen und draufklicken. Sofort wird ein neues Fenster mit dem TYPO3 Backend geöffnet. Weil es so einfach ist, lege ich hier auch noch ein Favelet für CMSMS ab:

• CMSMS-Login

Ich wünsche viel Spaß und eine erhöhte Produktivität;-)

SVG - Vektorgrafik mit Geschwindigkeitsvorteil

In einem meiner letzten Projekte musste ich Grafiken für eine vertikale Navigation erstellen. Um die Ladezeiten zu reduzieren, entschied ich mich für die CSS-Matrix-Technik. Mit dieser Technik speichert man alle Hintergrundgrafiken in einer einzelnen großen Grafik und greift per CSS auf einen Ausschnitt zu. Soweit so gut.

Leider war die Navigation durch ein ungewöhnliches Design sehr komplex:

1. Es gibt verschiedene Ebenen mit unterschiedlichen Höhen und Hintergründen.


2. Wenn ein Menüelement ein Unternemenü anzeigt, ändert sich die Höhe und der Hintergrund des Menüelements.


3. Es gibt verschiedene Zustände für ein Menüelement: normal, mouseover und selected.


4. Es gibt unterschiedliche Farbkennzeichnungen für einen gleichen Menütyp.

Ganz schön kompliziert, obwohl das Design kinderleicht aussieht. Wer sich nichts darunter vorstellen kann, kann sich gerne die Website als Beispiel ansehen: www.phibu.de

Die dazugehörige background-Grafik sieht so aus:

Ein Designer legt eine solche Grafik mittels Hilfslinie in Photoshop an. Als Geek programmiert man dagegen ein kleines PHP-Script, das einem die Grafik erstellt. Ursprünglich wollte ich das Bild über Imagemagick erstellen. Doch ich entschied mich aufgrund des einfachen Handlings für die Nutzung von SVG.
SVG steht für Scalable Vector Graphics und nutzt die XML-Auszeichnung für die Beschreibung von zwei-dimensionalen Vektor-Grafiken. Jeder, der HTML versteht, kann SVG für die Erstellung von Grafiken nutzen. Es ist ganz einfach. Zu erst definiert man den Doctype:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Dann leitet man die Grafik ein:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="932" height="306">

Dann macht es Sinn, einen Titel und eine Beschreibung zu vergeben:

<title>phibu</title>
<desc>Hintergründe für Menüs erstellen</desc>

Nun kommt die eigentliche Beschreibung der geometrischen Figuren:

<!-- Hintergrundfarbe -->
<rect x="0" y="0" width="233" height="306" fill="#fff" />
<!-- Dicke Balken -->
<rect x="0" y="0" width="233" height="34" fill="#fff" />
<rect x="0" y="34" width="233" height="34" fill="#ede8da" />
<rect x="0" y="68" width="233" height="34" fill="#bcad92" />
<rect x="0" y="102" width="233" height="26" fill="#fff" />
<rect x="0" y="128" width="233" height="26" fill="#ede8da" />
<rect x="0" y="154" width="233" height="26" fill="#bcad92" />
<rect x="0" y="180" width="233" height="16" fill="#ede8da" />
<rect x="0" y="196" width="233" height="16" fill="#ede8da" />
<rect x="0" y="212" width="233" height="16" fill="#bcad92" />
<rect x="0" y="228" width="233" height="26" fill="#ede8da" />
<rect x="0" y="254" width="233" height="26" fill="#ede8da" />
<rect x="0" y="280" width="233" height="16" fill="#bcad92" />
<rect x="0" y="296" width="233" height="16" fill="#ede8da" />
<!-- 13px Left -->
<rect x="0" y="0" width="13" height="306" fill="#bcad92" />
<!-- Trenner -->
<rect x="0" y="0" width="233" height="1" fill="#bcad92" />
<rect x="0" y="32" width="233" height="2" fill="#fff" />
<rect x="0" y="34" width="233" height="1" fill="#bcad92" />
<rect x="0" y="66" width="233" height="2" fill="#fff" />
<rect x="0" y="100" width="233" height="2" fill="#fff" />
<rect x="0" y="102" width="233" height="1" fill="#bcad92" />
<rect x="0" y="128" width="233" height="1" fill="#bcad92" />
<rect x="0" y="252" width="233" height="2" fill="#fff" />
<rect x="0" y="278" width="233" height="2" fill="#fff" />
<rect x="0" y="304" width="233" height="2" fill="#fff" />
<!-- Pfeile -->
<polygon points="13,199, 18,203,13,207" style="fill:#bcad92;" />
<polygon points="13,257, 18,261,13,265" style="fill:#bcad92;" />

Und zum Schluss sollte man das schließende Tag nicht vergessen:

</svg>

Um ehrlich zu sein, habe ich nur die erste Spalte erstellt und dann in PHP mit sprintf() und einer array-Schleife die gesamte Grafik erstellt. Das ging recht schnell und zeigt auch den Vorteil dieser Technik.

Am liebsten hätte ich die SVG-Grafik direkt im CSS benutzt. Leider kann der IE bis heute kein SVG interpretieren (es seie denn, man installiert ein Adobe-Plugin). Daher habe ich die Grafik als PNG gespeichert. Firefox, Chrome, Safari und Opera haben zum Glück keine Probleme mit SVG.

Die schnellste Möglichkeit, eine SVG-Grafik in ein anderes Grafik-Format zu konvertieren: In Opera (dem besten Browser der Welt) kann man mit der rechten Maus-Taste eine SVG-Grafik in die Zwischenablage kopieren und dann in einem beliebigen Grafikprogramm einfügen und im gewünschten Format speichern. Ich habe keine Möglichkeit gefunden, die SVG-Grafik schneller zu konvertieren:-P

Ich empfehle allen Interessierten folgende Links:

• SVG Tutorial [de]


• SelfSVG [de]


• Daten verdrahten [de]


• Dr. O. Hoffmann [de]


• Mozilla SVG [en]


• Wikipedia - SVG[de]


• Scale-a-Vector [de/en]

Einige weitergehende Möglichkeiten mit SVG:

• Blobular


• Raphaël—JavaScript Library


• Bluff - Beautiful graphs in JavaScript


• svg-edit - a complete vector graphics editor in the browser


• SVG_and_PHP

Für die Zukunft sollte man SVG und das data URI Schema im Auge behalten. Mit der data-URL-Technik kann man Daten wie z.B. eine SVG-Grafik direkt im HTML-Code verankern. Leider sammelt der Internet Explorer auch hier wieder Minuspunkte. Erst der IE8 unterstützt data-URI und dann auch nur bis 32kB:-P

• Wikipedia - Data URL [de]


• Data-URL Generator von Lars Kleinschmidt [de]

Komprimierung von statischen Dateien mit PHP

In dem heutige Artikel schreibe ich über die Möglichkeit, die Komprimierung von statischen Dateien durch PHP zu realisieren. Ob diese Lösung sinnvoll ist, muss jeder selbst entscheiden.

Fangen wir zu erst mit der technischen Umsetzung an. Wenn wir PHP-Anweisungen in CSS-, Javascript- oder HTML-Dateien ausführen wollen, können wir dies sehr einfach über .htaccess-Anweisungen tun:

AddHandler application/x-httpd-php .css
AddHandler application/x-httpd-php .js
AddHandler application/x-httpd-php .htm .html
php_flag zlib.output_compression on
php_value zlib.output_compression_level 9
auto_prepend_file = "pre.php"
short_open_tag = 0

Die AddHandler-Anweisungen bewirken, dass alle Dateien mit der Endung .css, .js, .htm oder .html durch den PHP-Interpreter gejagt werden. Mit der vierten Zeile schalten wir die Komprimierung für die Ausgabe ein und mit der fünften Zeile wird die Ausgabe maximal komprimiert. In der sechsten Zeile wird die Ausgabe durch die pre.php gejagt. Diese Angabe nutzen wir, um den richtigen Header zu setzen. Die siebte Zeile verhindert, dass z.B. XML-Angaben (<?xml) fälschlicherweise als PHP-Angabe interpretiert werden.

Die Datei pre.php könnte wie folgt aussehen:

<php
$path = pathinfo($_SERVER['SCRIPT_NAME']);

if ($path['extension'] == 'css') {
header('Content-type: text/css');
}

if ($path['extension'] == 'js') {
header('Content-type: application/x-javascript');
}

if ($path['extension'] == 'htm' || $path['extension'] == 'html') {
header('Content-type: text/html');
}
?>

Mit diesen wenigen Handgriffen werden nun alle CSS-, Javascript- oder HTML-Dateien komprimiert ausgegeben. Eine ideale Lösung, wenn der Hoster die Anweisungen mod_gzip_on oder mod_deflate in der .htaccess nicht erlaubt.

Ich möchte zum Schluss noch einige Hinweise geben:

• Komprimierung macht wenig Sinn, wenn die Dateien klein sind. Man sollte daher z.B. mehrere CSS-Dateien (oder Javascript) zu einer Datei verschmelzen.
• Man sollte das Ergebnis immer sinnvoll cachen, um den Server nicht mit überflüssiger Komprimierung zu belasten.
• Der IE6 kann komprimierte Dateien nicht im Cache halten.
• Man kann dynamisches CSS (z.B. Hintergrundbild nach Uhrzeit oder Herkunft setzen) sehr leicht mit PHP realisieren. Das führt allerdings bei stark frequentierten Sites zu hoher Systemlast, weil diese Ergebnisse nicht gecacht werden sollten.
• Man sollte die Komprimierung aus Sicherheitsgründen auf bestimmte Verzeichnisse (z.B. /css/ oder /js/) beschränken.

Wie man seine Website vor Schurken schützt

Als Neuling freut man sich, wenn die Websitestatistik sehr viele Besucher am Tag ausspuckt. Ein Profi wittert dagegen sofort Ärger. In der Tat sind die meisten Einträge auf einer Website oft keine erwünschten, menschlichen Besucher, sondern automatisierte Datensammler und Hackerprogramme von Schurken.

Solche Schädlinge verursachen in vielfältiger Weise einen Schaden für den Betreiber einer Website:

1. Es werden automatisiert Daten ausgelesen und für unerwünschte Zwecke missbraucht. Das bekannteste Beispiel ist das Sammeln von Mail-Adressen von Spammern.
2. Die komplette Website wird kopiert und für betrügerische Absichten missbraucht. Besonders betroffen sind Shopbesitzer. Schurken kopieren einen Shop und nehmen das Geld für Bestellungen an, ohne die Ware zu liefern. Die geprellten Kunden wenden sich erbost an den nichts ahnenden Shopbetreiber und leiten rechtliche Schritte ein.
3. Es wird auf der Website gezielt nach Schwachstellen gesucht. Diese sogenannten Exploits werden in vielfältiger Weise von den Schurken genutzt. Auf kommerziellen Sites (Shops, Banken, Telekom usw.) werden z. B. Adress- und Bankdaten ausgespäht und später missbraucht. Oft werden gekaperte Websites in Zombies verwandelt und führen im Auftrag der Schurken Schadaktionen aus. Eine Armee von Zombiehostings kann durch permanente Abfragen einen Webserver stilllegen. Diese Angriffe nennt man DDOS - Denial of Service.
4. Es werden Inhalte wie Texte, Bilder und Dokumente kopiert. Der Schurke integriert die Inhalte auf seiner eigenen Website. Der Websitebetreiber verliert Kunden und hat Einbußen im Pageranking.
5. Man kann seine Webstatistiken nicht mehr zur Analyse und Marketingplanung verwenden, weil die Daten fehlerhaft sind.

Was kann man tun, um sich vor diesen Problemen zu schützen? Es gibt einfache Regeln zur Bekämpfung von Schurken, die ich als Checkliste mit Verlinkung zu hilfreichen Sites präsentieren möchte:

• Halte deine Anwendung (CMS, Shop, Blog oder andere Anwendungen zuzüglich der Plugins und Erweiterungen) auf den aktuellen Stand.
• Programmiere deine Programmierung sicher:
  
  • PDF: PHP Security
  • Site: Google Hacks
  • Site: Sensible Informationen (z.B. E-Mails, Adressen, Bankdaten) via Javascript verschlüsseln
    
• Schurken mit .htaccess blocken:
  
  • Site: Blocking Bad Bots and Scrapers with .htaccess
  • Site: The Perishable Press 4G Blacklist
  • Site: IP Address Range Lookup
  • Site: IP Address Range - Proxy Ranges
• Halte die Augen offen und reagiere schnell:
  
  • .htaccess: Angriffe sehen und blockieren
    

Bei meinen Untersuchungen habe ich festgestellt, dass sich sehr viele Spider an einer simplen Umleitung die Zähne ausbeissen. Meine berufliche Website leitet z.B. von der Startseite permanent auf eine Unterseite weiter:

www.domain.de/
301 -> www.domain.de/de/

Da ich auf der Website mit relativen Links arbeite, versuchen die schlecht programmierten Spider im root-Verzeichnis anstatt im de-Verzeichnis alle Seiten zu öffnen. Intelligente Spider wie z. B. die von Google, Bing oder !Yahoo indizieren dagegen alle Inhalte korrekt:-)

Wer alle Tipps beherzigt, wird weniger - aber dafür gewollten Traffic auf seiner Website haben. Das bedeutet deutlich mehr Sicherheit vor Schurken und mehr Planungssicherheit beim Internetmarketing.

PS Beim Blocken via .htaccess sollte man Vorsicht walten lassen, um nicht aus Versehen erwünschte Besucher zu blockieren.

SimpleBlock, das unterbewertete Firefox-Plugin

Allen anderen Browsern zum Trotz kann ich einfach nicht ohne Firefox leben. Am liebsten würde ich mit Opera arbeiten, aber leider kommt TYPO3 nicht mit dem norwegischen Wunderbrowser klar. Obwohl ich Firefox toll finde, stört mich im Vergleich zu anderen Browsern der gefrässige Speicherverbrauch. Bei der Arbeit komme ich teilweise auf 250 MB Speicherbelegung. Da können Chrome, Opera und Safari in Sachen Speicherauslastung und Geschwindigkeit deutlich punkten.

Auf der Suche nach einer Möglichkeit, den Speicherhunger von Firefox wenigstens etwas zu reduzieren, bin ich über SimpleBlock gestolpert. Mir ist bei Speichercheck aufgefallen, dass fast alle Lösungen zum Blockieren von Online-Werbung und Trackern echte Speicherdiebe sind. Dabei ist es egal, ob man mit Plugins wie z. B. Adblock Plus oder externen Lösungen wie z. B. Privoxy arbeitet.

SimpleBlock ist ein sehr kleines Plugin. Es blockiert Webseiten und verzichtet dabei auf jeglichen Schickschnack. Nach der Installation öffnet man den zu nutzenden Profilordner und legt eine Textdatei namens SimpleBlock.ini an. Damit ist der einfache Teil der Arbeit abgeschlossen.

Die Anpassung des Plugins ist ebenfalls einfach, allerdings etwas zeitaufwendiger. SimpleBlock liest zeilenweise alle Anweisungen in der SimpleBlock.ini ein und überprüft alle Links einer Seite auf Übereinstimmung. Bei einem Treffer wird der Link einfach nicht geladen. Die Anweisungen können aus Fragmenten einer URL bestehen. Man kann aber auch mit Regular Expressions arbeiten.

Ein gutes Beispiel für das Blockieren von Links sind die ungeliebten Google AdSense Werbungen. Diese werden auf Websites über den Link http://pagead1.googlesyndication.com/pagead/show_ads.js oder http://pagead2.googlesyndication.com/pagead/show_ads.js eingebunden.

Man kann diese Anzeigen auf unterschiedliche Weise blockieren:

//pagead
.googlesyndication.com/
/pagead/
show_ads.js

Jede dieser Anweisungen würde in der AdSense-Url gefunden und blockiert. Man kann mit wenig Aufwand sehr viel Werbung wie folgt ausfiltern:

//ad.
//ads.
//adserv
/ad/
/ads/
adclient
adfarm
adinterax
adserv
adtags
adtech

Sehr viel Werbungen haben diese Fragmente im Pfad. Wer sich nun fragt, warum ich nicht einfach ad und ads in einer Zeile gesetzt habe. Der Grund ist simple: Viele Websites nutzen Daten-Verzeichnisse namens upload oder uploads. SimpleBlock würde alle Dateien wie z.B. Bilder, Videos, Animationen und Downloads aus diesen Verzeichnissen blockieren.

Aber nicht nur Werbung kann man mit SimpleBlock löschen. Auch sogenannte Tracker - also Scripte, die ungefragt Informationen über den Nutzer und sein Verhalten weitergeben - kann man blockieren und sorgt damit für die eigene Sicherheit. Ein Bespiel für die Filterung von Trackern sieht so aus:

.google-analytics.com
.hitslink.com
.ivwbox.de
.sitemeter.com
.statcounter.com

Ebenso leicht kann man nervige MouseOver-Werbungen wie z.B. die von IntelliTXT und Kontera blockieren:

intellitxt.com
kontera.com
vibrantmedia.com

Wer bei der Blockierung mehr differenzieren möchte, kann Regular Expressions benutzen. Mit einem führenden R: wird eine RegEx eingeleitet. Eine Expression kann sehr nützlich sein, wenn die Werbung auf dem gleichen Server gehostet wird. Das nachfolgende Beispiel blockiert alle Flash-Dateien, die in einem Verzeichnis namens banner gehostet werden:

R: /banner/.+.swf

Fazit

Wer Webseiten schneller laden möchte, die Weitergaben von persönlichen Daten unterbinden möchte oder einfach kein Interesse an nerviger Werbung hat, benötigt einen guten Filtermechanismus. Ein Problem bei vielen Lösungen ist der wachsende Speicherhunger. Mit SimpleBlock habe ich ich für mich eine Lösung gefunden, die den Speicherverbrauch niedrig hält und trotzdem sehr flexibel ist.

Wer wenig Zeit zur Umsetzung eigener Regeln hat und fertige Regeln sucht: Man kann mit wenig Aufwand die Listen von AdBlock Plus oder Fanboy urlfilter.ini umarbeiten.