Webdesign-Blog | Bertram Simon says

Shy: Schüchtern aber wirkungsvoll

2011-02-12T16:08:00.029+01:00

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

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

2010-06-20T20:37:00.002+02:00

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

2010-02-06T12:27:00.007+01:00

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

2010-01-31T17:55:00.023+01:00

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:

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

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

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

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:

<rect x="0" y="0" width="233" height="306" fill="#fff" />

<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" />

<rect x="0" y="0" width="13" height="306" fill="#bcad92" />

<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" />

<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

2010-01-17T16:26:00.018+01:00

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

2010-01-03T14:47:00.005+01:00

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:

Es werden automatisiert Daten ausgelesen und für unerwünschte Zwecke missbraucht. Das bekannteste Beispiel ist das Sammeln von Mail-Adressen von Spammern.
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.
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.
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.
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:
Schurken mit .htaccess blocken:
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

2009-12-25T16:11:00.004+01:00

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.

Schneller arbeiten durch Ersetzungen mit AutoHotKey

2009-12-18T14:48:00.012+01:00

Unter Windows gibt es ein großartiges Tool namens AutoHotKey Website kurz AHK genannt. AHK ist im Prinzip eine kleine OpenSource Programmsprache, mit welcher man mächtige Skripte zur Automatisierung von Ein- und Ausgaben schreiben kann.

Im ersten Teil möchte ich das Ersetzen von Texten vorstellen. Die Installation ist schnell vollzogen, einfach die aktuelle Version von AHK herunterladen und das Setup ausführen.

In Web-Projekte wiederholen sich immer wieder bestimmte Code-Fragmente. Typische Beispiele sind Blindtexte, Platzhalter für Menüs, Aufzählungen aber auch Programmcode wie For-Next-Schleifen, Switch-Abfragen usw.

Mit AHK kann man sehr einfach Vorlagen gestalten, welche später beim Tippen eines Kürzels eingefügt werden. Hier ein kleines Beispiel:

:o:#bt::
clipboard=Ich bin ein Blindtext!
Send ^v
return

Sobald wir ein #bt tippen, wird #bt durch Ich bin ein Blindtext! ersetzt.Schauen wir uns den Code näher an. Normalweise wird ein Replacment mit :: eingeleitet. Im Beispiel nutze ich zusätzlich die Option o. Damit wird das Endzeichen wiedergelöscht.

Was ist ein Endzeichen? Stellen wir uns vor, wir hätten zwei Textersetzungen: #bt und #btx Ohne ein End- oder Abschlusszeichen könnten wir nie #btx eintippen, weil vor der Eingabe des x die Ersetzung von #bt aktiv würde. Die Endzeichen sind neben dem Leerzeichen: -()[]{}:;'"/\,.?!`n `t. Man kann aber auch andere Endzeichen in AHK definieren.

Ich habe festgestellt, dass abschließende Endzeichen meinen Schreibfluss stören und ausbremsen. Nehmen wir an: #w steht für Wuppertal und ich wollte Wuppertaler Schwebebahn schreiben. Würde ich das Endzeichen nicht automatisch unterdrücken, würde ich Wuppertal er Schwebebahn schreiben. Also müsste ich manuell das Leerzeichen löschen. Mit :o: unterdrückt man die Endzeichen.

Zurück zum Beispiel: Mit :o:#bt:: definiere ich das Kürzel #bt welches ohne das Endzeichen ersetzt werden soll. In AHK gibt es unterschiedliche Send-Methoden, die alle einen großen Nachteil haben: Sie sind sehr sehr langsam. Daher nutze ich in meinem Beispiel die Zwischenablage. Mit clipboard=Ich bin ein Blindtext! fülle ich die Zwischenablage mit dem Blindtext, mit Send ^v füge ich die Zwischenablage im aktuellen Dokument ein und mit return sage ich AHK, dass unsere Textersetzung beendet ist.

Nachfolgend liste ich Beispiele für Blindtext-Ersetzungen im HTML-Bereich auf:

:o:#p1::
clipboard=<p>facilisis enim ultricies condimentum, erat facilisis. tempor porttitor, placerat et enim augue, eros amet, Mauris vitae, dui Vestibulum eu sed, wisi, Aliquam est ullamcorper mi, tincidunt ornare accumsan et malesuada sit egestas. senectus eget, luctus, wisi. ac erat Donec dui. turpis feugiat non pulvinar in faucibus, lacus vitae fermentum, erat. amet, sit condimentum habitant fames sit eleifend neque egestas Vestibulum dapibus, neque libero eros semper. eu quis, felis. commodo amet pharetra. tristique tempus amet est. Pellentesque tortor cursus sagittis Ut ante. Nam magna netus vulputate id sit ipsum eu quam, metus vitae, elit tincidunt Aenean eget leo. ac orci, rutrum mi et tortor turpis egestas Quisque Praesent quam sapien Aenean volutpat. Donec morbi ultricies </p>\n
Send ^v
return

:o:#p2::
clipboard=<p>semper. libero placerat egestas. ante. et Aenean tempor habitant ac amet, Pellentesque feugiat egestas tortor ultricies mi morbi quam, est. Mauris Vestibulum quam malesuada sit vitae leo. vitae, et tristique fames eu ultricies Donec eleifend sit netus turpis senectus eget, amet </p>
Send ^v
return

:o:#p3::
clipboard=<p>habitant et Pellentesque malesuada senectus morbi netus et turpis egestas. fames ac tristique </p>
Send ^v
return

:o:#u1::
clipboard=<ul>\n<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n<li>Aliquam tincidunt mauris eu risus.</li>\n<li>Vestibulum auctor dapibus neque.</li>\n</ul>\n
Send ^v
return

:o:#u2::
clipboard=<ul>\n<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>\n<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>\n<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>\n<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>\n</ul>\n
Send ^v
return

:o:#o1::
clipboard=<ol>\n<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n<li>Aliquam tincidunt mauris eu risus.</li>\n<li>Vestibulum auctor dapibus neque.</li>\n</ol>\n
Send ^v
return

:o:#o2::
clipboard=<ol>\n<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>\n<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>\n<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>\n<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>\n</ol>\n
Send ^v
return

:o:#u3::
clipboard=<ul id="menu">\n<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>\n<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>\n<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>\n<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>\n<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>\n</ul>\n
Send ^v
return

:o:#robots::
clipboard=User-agent: *\nDisallow: /typo3\nDisallow: /typo3_src\nDisallow: /t3lib\n
Send ^v
return

Für die Programmierer unter uns ein paar kleine PHP-Goodies, die das programmieren einfacher, schneller und fehlerfreier machen:

:o:_g::$_GET['']{Left 2}
:o:_p::$_POST['']{Left 2}
:o:_r::$_REQUEST['']{Left 2}
:o:_s::$_SESSION['']{Left 2}
:o:_pr::print_r();{Left 2}
:o:_if::if(isset()) {{}{Left 4}

Wie man an den wenigen Bespielen sehen kann, kann man als Webdesigner seine Arbeit mit Hilfe von Textersetzungen in allen Bereichen optimieren. Viel Erfolg!