Das neue Sonntagmorgen-Blog

Was ich für das Template an Nettigkeiten und technischen Besonderheiten genutzt habe, steht direkt im Sonntagmorgen-Blog: Neuer Shop – neues Blog-Layout.

Der goldene Schnitt beim Twitter-Redesign

Ein sehr schönes Beispiel für den Einsatz des Goldenen Schnitts – das leider nur auf der niedrigsten Breite funktioniert. Danach verbreitert sich die Seitenleiste und verändert somit das Verhältnis. Wer aber zumindest die Seitenverhältnisse des Goldenen Schnitts ungefähr beibehalten möchte, macht Folgendes:

1. FireFox benutzen.
2. Das Add-On „Stylish” installieren.
3. Einen neuen Stil für twitter.com erstellen.
4. Den folgenden Code einsetzen:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("twitter.com") {
.main-content {
width: 61%!important;
}
.dashboard {
width: 32%!important;
min-width: 0px!important; /*or set this to something smaller than the current 340px */
}
}
Fertisch

Erstmal kurz zu den Tipps bei Mashable:

• Updates sind natürlich sowohl für den Kern als auch die Plugins bitte schnellstmöglich aufzuspielen. Bei großen Versionssprüngen für die Kerninstallation würde ich ggf. ein paar Tage warten. Die passieren ja meist, da neue Features hinzugefügt werden, nicht um Sicherheitslücken zu stopfen.
• Passwörter: Das gilt ja nun einmal überall, nech?
• Secret Keys: Diesen Schritt sollte man bei der Installation unbedingt befolgen. In der wp-config.php wird das Vorgehen exakt beschrieben, hier auch noch mal schnell: Copy&Paste der angegebenen URL, Copy&Paste der erzeugten Keys zurück in die Datei. Fertig.
• .htaccess – damit wäre ich generell vorsichtig, wer sich damit nicht auskennt kann erstmal eine Menge schrotten. Außerdem kann eine IP-Beschränkung ärgerlich werden, wenn man sich mal an einem fremden Rechner bzw. in einem fremden LAN spontan ins Backend einloggen will.
• File Permissions – damit kommen wir schon zum ersten Plugin:

WP-Security-Scan

Das Plugin zeigt diverse Sicherheitsaspekte an – unter anderem die nötigen File Permissions für die einzelnen Ordner. Wenn diese nicht stimmen, so lassen sie sich per FTP schnell an die unter „required” angegebenen Berechtigungen anpassen. Fertig. Das Plugin befindet sich natürlich auch im Repository bei WordPress: WP-Security-Scan

Secure WordPress

Ein kleines, aber feines Plugin kommt in gewohnt bester Qualität von Frank Bültge. Er gibt zum Plugin im Prinzip alle wichtigen Details auf seinen Seiten wieder, also verweise ich mal auf ihn: WordPress Login Sicherheit mit Secure WordPress. Ich bin mir gerade nicht ganz sicher, aber wenn ich mich recht erinnere, dürft ihr den Link zum Really Simple Discovery nicht deaktivieren, falls ihr euer Blog mit dem iPhone über die WP-App bedienen wollt. Auch dieses Plugin findet sich im Repository: Secure WordPress.

Limit Login Attempts

Mit diesem Plugin legt man eine Beschränkung der Login-Versuche fest – Brute-Force-Attacken sind somit nicht mehr ohne Weiteres über das normale Loginformular möglich. Auf ins Repository Limit Login Attempts.

Mit diesen drei Plugins kann man die Sicherheit der WordPress-Installation zügig & recht einfach steigern. Viel Spaß dabei!

Habe ich ein dringend nötiges Plugin vergessen? Dann lasst es mich & die anderen Leser in den Kommentaren wissen! Dir hat der Beitrag gefallen? Dann lass es mich & deine Freunde wissen – das Herz hier unten gibt mir Bescheid, der Facebook-Button deinen Facebook-Freunden. Danke schon mal

That’s because in the real world, people using the Web don’t find a Web site that they like, then open up another browser to check that it looks they same.

AUf mehreren Seiten habe ich diese Techniken genutzt. Wie die Umsetzung in der Praxis aussieht, möchte ich ein einem Beispiel verdeutlichen. Ich habe zu Beginn des Jahres die Webseite für den münsteraner Kaffeefreund Dominik Schweer umgesetzt. Dabei habe ich diverse Neuerungen genutzt, die ich kurz anschneiden möchte.

HTML5

HTML5 stellt neben dem wahnsinnig einfachen Doctype diverse neue Elemente vor – einen guten Überblick bietet Peter Kröners Artikel zum Thema. Mit entsprechenden CSS-Klassen & IDs lassen sich diese Elemente zumindest schon antizipieren, wie es auch A List Apart im Preview zu HTML5 als „common structures” für HTML4 vorstellt. Die Schwierigkeiten, die man sich beim direkten Einsatz dieser Elemente einhandelt, werden in Peters Artikel eindrucksvoll belegt, daher sollte man in diesem Bereich wohl zunächst auf die Klassen-/ID-Lösung zurückgreifen – was in vielen Jahren evtl. mal die Umstellung erleichtet

Was man aber bereits einsetzen kann sind WAI-ARIA-Landmarks, Gründe dazu finden sich bei Vorsprung durch Webstandards:

Mit Aria-Landmarks kann jede statische Website besser strukturiert werden. Aria-Landmarks werten das HTML auf und erhöhen dessen Informationswert. Mit Landmarks kann die Rolle eines Elements genauer beschrieben werden

Die erweiterten Angaben sind schnell eingebunden:

• Der Kopfbereich erhält „role=banner”
• Der Hauptinhalt erhält „role=main”
• Die Seitenleiste erhält „role=complementary”
• Die Navigation erhält „role=navigation”
• Blogeinträge / Texte erhalten „role=„article”
• Zusatz-/Metainfos zu Blogeinträgen erhalten „role=contentinfo”
• Das Suchformular erhält „role=search”

Das war’s auch schon. Kurz und schmerzlos wurde der Inhalt durch einfache Auszeichnungen zugänglicher gemacht.

Auch Formularelemente lassen sich in HTML5 gewinnbringend erweitern. Dort gibt es einen ganzen Satz neuer Typ-Bezeichnungen, die glücklicherweise bei „Unwissenheit” des Browsers auf den Standardtyp „text” zurückgesetzt werden. So lassen sich z.B. Kommentarformulare in Blogs durch minimale Änderungen semantisch leicht aufwerten:

<input type="url">, <input type="email">

Zumindest auf dem iPhone wird dann schon mal die Tastatur angepasst. Ansonsten sehen die Felder aus wie normale Text-Eingabefelder, dementsprechend gibt es Userseite keine Beeinträchtigung der Darstellung. Eine vollständige Dokumentation dazu gibt es bei „Dive Into HTML5″: A Form of Madness.

Wie gesagt verzichte ich zunächst auf den Einsatz der brandneuen Elemente, da dies zu unglaublichen Kompatibilitätsproblemen führt. Dem Einsatz der oben beschriebenen kleinen Änderungen steht jedoch nichts im Wege.

CSS3

Neben den HTML5-Techniken bieten einige Browser mittlerweile sehr gute Unterstützung für die neuen CSS3-Eigenschaften. Beim Einsatz sollte man natürlich stets darauf achten, dass die Funktionalität der Seite auch ohne Unterstützung der Features gesichert ist. Daher beschränke ich mich auf wenige grafische Details, ganz im Sinne des Progressive Enhancements.

Ein gutes Beispiel dafür ist der Einsatz von RGBa für die Festlegung von Farben. Bei 24ways.org gab es zu Beginn der Adventskalender-Reihe 2009 ein exzellentes Tutorial für die Arbeit mit RGBa. Die Möglichkeit, nur die Hintergrundfarbe, nicht aber den enthaltenen Text mit leichter Transparenz zu versehen, habe ich beim Kaffeefreund einige Male genutzt. Besonders beim Inhaltsbereich fällt das auf – in allen Browser, die RGBa unterstützen, scheint das Hintergrundbild dezent durch:

Durchscheinender Hintergrund

Browser, welche die RGBa-Farbangaben nicht akzeptieren, bekommen stattdessen eine einfache RGB-Farbe ausgeliefert & müssen auf die Kaffeebohnen leider verzichten. Ist zwar schade, stört aber den Besucher wohl nicht weiter – wie soll er es auch wissen Zudem sieht der fortschrittlich browsende Nutzer im Googlemaps-Infokasten zu später Stunde nicht einfach nur eine graue Box mit Text, sondern leicht durchscheinend einen Kartenauschnitt aus GoogleMaps dahinter. Das sieht im CSS dann z.B. für den Hauptinhalt so aus:

#content{ background-color: rgb(241,232,226); background-color: rgba(241,232,226,0.8);}

Mit Schattierungen habe ich ganz behutsam gearbeitet. Über die Eigenschaft box-shadow mit entsprechenden Browser-Prefixes werten die Schattierungen die Seite auf & geben ihr einen leichten dreidimensionalen Touch. Nach Lektüre des Artikels „Crafting Subtle & Realistic User Interfaces” habe ich die Schatten übrigens massiv reduziert – den Grund gibt der Artikel:

Drop Shadows will ruin your design if you don’t do it right. Things should be right up against their surface which means using a 1-3px Drop Shadow size. And 0-3px distance. This isn’t WordArt.

Der Schatten am rechten Rand der Navigation ist eigentlich nicht korrekt

Problematisch bei dieser Eigenschaft ist, dass per CSS vergebene Schatten streng genommen perspektivisch nicht ganz korrekt sind. So müsste z.B. bei der Kaffeefreund-Seite der Schatten der Navigation zum Hintergrund hin länger sein als zur dazwischenliegenden Inhaltsebene.

Dennoch erscheint die Seite so ganz subtil etwas griffiger. Der Einsatz von Schattierungen sollte jedoch insgesamt wie bereits angedeutet gut durchdacht sein. Welche Probleme auftauchen können, verdeutlicht der Artikel „Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors”.

Eine letzte heißgeliebte Eigenschaft ist der border-radius. Runde Ecken sind waren ja der absolute Knaller, wenn es um jegliche Web2.0-Seiten geht. Natürlich nutzt die Seite auch diese Eigenschaft – und das sogar bei fast jeder Box, die sichtbar ist. Jedoch habe ich auf übertrieben abgerundete Boxen weitestgehend verzichtet, sondern nur geringe Radien angegeben. Den Grund dazu liefert der bereits oben zitierte Artikel zu Userinterfaces:

Real-world objects rarely have perfectly square corners. Use subtle rounded corners to make objects look real.

Daher ist jedes Element, das ursprünglich eckige Kanten hatte, zumindest mit einer minimalen Rundung versehen. Die Angabe dazu habe ich platzsparend ganz an das Ende der CSS-Datei geschoben & dort alle Elemente angegeben, die ich leicht gerundet haben wollte.

Wer die entsprechenden Techniken im Einsatz sehen möchte & mir aufgrund inkonsistenten Codings die Ohren langziehen mag, darf sich das Stylesheet gerne in Gänze zu Gemüte führen.

Wie  man sieht: Wenn die vorhandenen Techniken dezent eingesetzt werden, lassen sich mit einfachen Mitteln sinnvolle Verbesserungen erzielen. Die Seite wird in wenigen Minuten aufgewertet & bleibt dennoch funktional – sie übermittelt auch im IE6 den Inhalt problemlos.

Nachtrag: Etwas abstrakter, aber kompakt und treffend formuliert hat es Mathias Schäfer. „Progressive Enhancement: Die Zeit ist gekommen”

Generelles

Grundsätzlich sollte man natürlich einige Punkte beachten, die keine Code-Veränderungen oder anderes benötigen:

• Stets die aktuellste WordPress–Version nutzen
• Unnötige / ungenutzte Plugins deaktivieren oder besser noch löschen
• Valide, gut gecodete Themes nutzen

Darüber hinaus kann man aber noch weitere Maßnahmen ergreifen:

Datenbank-Abfragen minimieren

Etliche Datenbank-Abfragen in verschiedenen Themes werden (selbstverständlich) durch PHP variabel gehalten. So ist garantiert, dass der entsprechende Code mit dem jeweils richtigen Pfad ausgestattet wird. Häufig genutzte Template-Tags sind:

bloginfo('name');
bloginfo('charset');
bloginfo('stylesheet_url');
bloginfo('rss2_url');

Den Großteil der Variablen findet man zumeist in der Datei header.php. Nun ist es ein Leichtes, diese Variablen nach der erfolgreichen Installation des jeweiligen Themes durch statischen HTML-Code zu ersetzen. Dazu lässt man sich den Quelltext (z.B.) der Startseite des Blogs anzeigen. Dort wurden die Variablen natürlich bereits in statischen HTML-Code umgeformt, so dass dieser einfach aus dem Quelltext kopiert & im Theme ersetzt werden können. Laut Joost de Valk können dadurch bis zu elf Datenbankanfragen entfernt werden – ziemlich viel, oder? Nein, wie Frank Bültge in den Kommentaren anmerkt – die Daten werden gecacht, somit kann man sich das Rumspielen im Theme sparen.

Übrigens: Die Anzahl der Datenbank-Abfragen kann man sich direkt von WordPress anzeigen lassen. Sinnvoll ist, diese Daten nur für Administratoren anzeigen zu lassen. Folgender Code – etwa im Fußbereich der Seite – macht das möglich:

<?php if (current_user_can('level_10')) {
	echo '<!-- '
	. get_num_queries()
	. ' Abfragen in '
	. timer_stop(0,3)
	. ' Sekunden -->';
} ?>

Flush early

Mit einem einfachen PHP-Befehl kann man bei der Generierung des Themes schon mal den Head-Bereich der Seite rausschicken, so dass sich der Browser schon mal um die dort verlinkten Dateien „kümmern” kann:

</head>
<?php flush(); ?>

Ob der Effekt in der header.php einen signifikanten Effekt hat oder besser in der index.php (o.Ä.) direkt hinter dem Aufruf der header.php platziert werden sollte, kann ich leider nicht beurteilen – happy testing Sinnvoll erscheint die Maßnahme aber generell schon.

Allgemeine Code-Optimierung

Die Yahoo Performance-Guidelines fassen einige Maßnahmen zur Performance-Optimierung zusammen:

• HTTP-Requests minimieren
• Stylesheets im Kopfbereich der Seite
• Javascript-Dateien im Fußbereich der Seite
• Alle Skripte & CSS-Dateien als externe Dateien einbinden
• Skripte & Dateien zusammenfassen

Die praktische FireBug–Erweiterung YSlow schaut sich die in den Guidelines angesprochenen Punkte an & bewertet die Seitenperformance. Zur Analyse in FireFox somit ein sehr gut geeignetes Tool, um potentielle Performance-Bremsen auszumachen & zu entfernen.

Oft passiert es zudem, dass Plugins zusätzlichen Code in den Kopf– oder Fußbereich der Seite einfügen. Das kann man über ein paar Zeilen Code in der functions.php unterbinden. Wie das funktioniert, erklärt Justin Tadlock. Für diese Maßnahme ist einiges an Handarbeit inklusive Code-Analyse der Plugins nötig – der Aufwand lohnt aber, wenn statt mehreren Stylesheets etwa nur ein einziges geladen werden muss.

Caching-Plugins

Einige der oben beschriebenen Aufgaben können auch Caching-Plugins übernehmen. Recht bekannt & beliebt ist hier das Plugin WP Super Cache, das aus den aufgerufenen Seiten regelmäßig statische HTML-Seiten erstellt, so dass sämtlicher Datenbank-Stress entschärft wird. Dieses Plugin wird z.B. von Spreeblick eingesetzt.

Seit kurzem teste ich hier W3 Total Cache, das über die Möglichkeiten von WP Super Cache noch ein ganzes Stück hinaus geht – die recht beeindruckende Liste der Nutzer hat mich neugierig gemacht. Über dieses Plugin lassen sich vielfältige Optimierungseinstellungen vornehmen, die stark von den oben angesprochenen Yahoo Performance-Guidelines beeinflusst sind. Dabei kann man etwa eine eigene Subdomain anlegen & als CDN nutzen. Nach einer intensiven Diskussion zur Frage ob das lohnt, stellte Chris Coyier fest:

I think the general consensus is that YES, it is a good idea. If you can map the subdomain to a differnet server entirely, one running a stripped down web server with special settings and stuff (aggressive caching, cookie-less) OR you can map it to a bonafied CDN, that’s clearly better.

However, just the subdomain all by itself seems like it has benefits enough that it is worth doing.

Die weiteren Einstellungen sind sehr sehr umfangreich & meist auch sehr sinnvoll, weshalb ich das Plugin wärmstens empfehlen kann.

Nachtrag: Jens verweist in den Kommentaren auf DB-Cachebesser, weil für WP 2.8 geschrieben: DB Cache reloaded, das zumindest im Vergleich zu WP Super Cache scheinbar etliche Vorteile besitzt:

I think you’ve heard of WP-Cache or WP Super Cache, they are both top plugins for WordPress, which make your site faster and responsive. Forget about them — with DB Cache your site will work much faster and will use less disk space for cached files. Your visitors will always get actual information in sidebars and server CPU loads will be as low as posible.

Das werde ich mal testen & die von W3 Total Cache übernommenen Aufgaben weitgehend per Hand regeln – bei der Komprimierung der JavaScript-Dateien stellt sich das Plugin etwas sperrig an…

Fazit

Nachtrag (29.01.2010): Nach einigen Tests laufen hier (und auf diversen anderen „meiner” WP-Installationen) sowohl DB Cache reloaded als auch WP-SuperCache. Die beiden Plugins ergänzen sich dabei ganz gut – während DB Cache reloaded wenn nötig die einzelnen Datenbankabfragen speichert,  legt WP-SuperCache direkt die kompletten Seiten auf dem Server als HTML-Image ab. Das geht natürlich entsprechend schneller, wenn einige Standard-Datenbank-Abfragen (wie etwa in der Seitenleiste) bereits gespeichert wurden und bei der nächsten aufgerufenen Seite nicht mehr die Datenbank / den Server belasten. Gutes Zusammenspiel also, das bei mir noch keinerlei Probleme erzeugt hat.

Ich hoffe, dass ich einen halbwegs vollständigen & sinnvollen Überblick zur Optimierung von WordPress-Installationen geben konnte. Sollte ich etwas vergessen haben, in einem Punkt völlig daneben liegen oder alles super beschrieben haben, freue ich mich über jedwedes Feedback in den Kommentaren & Herzchen-Klicks

Und jetzt: Viel Spaß beim Optimieren!

• Icerocket Reactions Extended – Christoph Boecken (jeriko) hat mit diesem Plugin eine verbesserte Übersicht der eingehenden Links gebaut. Die Blogsuche erfolgt durch Icerocket, einen
  

  relativ unbekannten Anbieter, der aber technisch wie qualitativ wohl die besten Ergebnisse liefert

  wie er selbst argumentiert. Stimmt.

• Rivva Reactions – Frisch aus dem Hause Bültge kommt dieses Plugin, das neben Reaktionen auf das eigene Blog auch aktuelle Stories aus der Blogosphäre darstellt. Das alles wird generiert über unser aller Lieblings-News-Aggregator rivva. Frank beschreibt selbst die Vorzüge des Plugins treffend:
  

  Rivva lebt, verändert sich und ist mittlerweile nicht mehr nur eine kleine Site der Themenübersicht, sondern ist für mich Quelle der News beim Kaffee und ebenso Quelle der Sites und Tweets, die auf mein kleines Blog verlinken.

  Absolute Empfehlung, da es eine gute Ergänzung zur oben vorgestellten Blogsearch darstellt.

• Post Ideas – Dieses Plugin ähnelt dem Quick Press Widget, bietet aber umfassendere Möglichkeiten wie Priorisierung & vielfältige Sortierungsoptionen. Für den schnellen Entwurf bzw. deren Sammlung sehr sinnvoll.

Habt ihr noch weitere Ideen & Plugins, mit denen sich das Dashboard verbessern lässt? Dann ab damit in die Kommentare

Dir hat dieser Eintrag gefallen? Oben gibt’s ein Herzchen, das du gerne anklicken darfst

I want to add a hover effect to some images. These images aren’t background images, they are images of different people. Anyway, I’d like to use the idea of css sprites. Here, I want to “translate” this technique for using regular images instead of background-images. The reason to do this is simple: I don’t need one picture for layout reasons, I need many pictures to behave in the same way — changing color & border in a certain way. By the way, the images will be links, too

So let’s get started:

The HTML code:

<div>
<a href="#">
<img title="”Mr. X" src="”the_image.jpg" alt="”Mr. X" />
</a>
</div>

There are three main elements included:

• A div with the class “member”
• The link
• The image itself

As you can see, the link contains the image, the div contains these two. The image already contains the states I need: On the left side a b/w-picture with a green border, on the right side the colored one with a yellow square added.

Pretty boring without CSS if you ask me. Let’s move on to the CSS-part:

Attention: The different px values are matching the pixel size of the image, as commented in the CSS file. You have to fit these to your needs.

div.member {
width: 210px; /* 50% of image width */
height: 200px; /* image height */
overflow: hidden;
}
div.member a {
text-decoration: none;
display: block;
width: 420px; /* 100% image width */
}
div.member a img {
border: 0;
}
div.member a:hover {
margin-left: -210px; /* as above, 50% of image width. Watch out: negative value! */
}

At first, the surrounding div gets a fixed width, which is exactly 50% of the images width. The height matches the image height.

Setting “overflow: hidden;” causes only the left side of the image to appear.

Now, the link-element is styled. “text-decoration: none;” prevents the underline (as you might know…). Far more important is the next step: The link element turns into a block-element with “display: block;”. Now you can add a fixed width to this element. As you see, the width is exactly the image width.

To prevent little pixel errors, the img element gets rid of the border with “border: 0;”.

Finally, the real “action” is done with editing the a:hover state.

Simply add a negative left margin to the picture. This margin again matches 50% of the images width. In this way, the image gets pushed to the left, revealing the colored right side.

Result:

• minimal usage of CSS & extra markup
• nice hover effect
• should work in most browsers (please comment if you find errors!)

Any comment on this technique is appreciated. If you like this tutorial, let me know!

(There might be tutorials about this technique in other places. I couldn’t find any in a quick google search This should at least work with FireFox and Safari on a Mac, that’s what I was able to test. IE seems to work too, according to some friends testing it.)

<div class="memberarea">

<a href="#">

<img title="Mr. X" src=”das_bild.jpg” alt=”Mr. X" />

</a>

</div>

Wie man sieht, ist das Bild im Link enthalten, der Link in einem umgebenden div. Das eingebundene Bild enthält bereits die beiden gewünschten Zustände . Ohne CSS sähe das Ergebnis noch recht trostlos aus.

Kommen wir also zum CSS-Teil:

div.memberarea {
width: 210px;
height: 200px;
overflow: hidden;
}
div.memberarea a {
text-decoration: none;
display: block;
width: 420px;
}
div.memberarea a img {
border: 0;
}
div.memberarea a:hover {
margin-left: -210px;
}

Zuerst wird dem umgebenden div eine feste Weite (die Hälfte der Bild-Breite) sowie eine feste Höhe zugewiesen (die Höhe des Bildes). Die Angabe overflow: hidden bewirkt, dass nur die linke Bild-Hälfte angezeigt wird.

Nun wird das Link-Element bearbeitet: Das Unterstreichen des Links wird unterbunden und ganz wichtig: Der Link wird zum Block-Element gemacht. Diesem Block-Element kann ich dann eine entsprechende (nämlich die Bild-) Breite geben.

Dem Bild-Element wird der Rahmen genommen, sieht nun mal schöner aus & verhindert kleine Pixel-Fehler, die durch einen Rahmen entstehen könnten.

Die eigentliche Hover-Action findet im letzten Teil statt: Durch die negative Verschiebung des Links (der sich als Block-Element verschieben lässt) erscheint nun im div der rechte Teil des Bildes. Fertig.

(Vielleicht gibt es ein ähnliches Tutorial schon irgendwo, ich konnte allerdings auf die Schnelle keins finden. Browser-Kompatibilität wurde ebenso nicht getestet, mit FireFox sowie Safari & Mac OS X funktionierts. Windows-Browser kann ich leider gerade nicht testen Was macht der IE? )