seo-geek - Webseiten gezielt optimieren

CSS und Javascript richtig ausliefern

daniel — Thu, 02 Sep 2010 07:58:35 +0000

Neben der reinen Suchmaschinenoptimierung gibt es jetzt auch die Abkürzung SPO, oder auch Shop Performance Optimization genannt. Was aber versteckt sich dahinter und wie kann man das grundlegend angehen?

Was versteckt sich hinter SPO?

Wie man bereits weiß wird nach und nach auch die Site-Performance eine Rolle in den SERPS (Search Engine Result Pages) spielen. Dazu zählt beispielsweise der Faktor Zeit eine große Rolle bis die Seite fertig geladen bzw. gerendert ist. Jetzt muss man vorher natürlich etwas die theoretische Seite betrachten um die genauen Sachverhalte für das Wieso nachvollziehen zu können.

Jeder Aufruf einer Datei - sei es ein Bild, ein Filmchen, eine CSS-Datei (Cascading Style Seet) oder eine JavaScript-Datei (wie beispielsweise jquery) wird der Server angewiesen alle Dateien zur Verfügung zu stellen. Der Browser dagegen nimmt diese Dateien an. Soweit so gut, das Problem ist nur dass Browser an kleinere Restriktionen gebunden sind.

Viele Browser können lediglich zwei Dateien einer gleichen Quelle parallel downloaden.
Werden mehr als zwei Dateien von einer Quelle angefordert werden diese in eine Warteschleife gestellt
Jeder Aufruf bedeutet einen HTML-Request. Je mehr es sind, desto länger wird es dauern alle Verbindungen geöffnet und verarbeitet wurden

Hier stellt man unweigerlich fest, dass man selbst bei aktuellen Browsern schnell ein Flaschenhals da sein kann.

Wie sieht der Plan aus? Wie gehen wir vor?

Unser heutiges Ziel soll es sein die Anfragen zu minimieren. Im speziellen geht es mir um die Reduzierung der JavaScript und CSS-Dateien. Dabei möchte ich heute hier auf eine etwas händischere Methode eingehen. Sicherlicht gibt es auch On-The-Fly Methoden in den gängigsten CMS, aber ich möchte ja auch die Grundlagen vermitteln. Denn wer sich selber eine Seite in HTML aufbaut, kann dann immer noch auf diese Resourcen zurückgreifen. Wir realisieren das ganze in der Skriptsprache ruby. Ruby wird uns hier ganz einfach helfen ans Ziel zu kommen. Mit Ruby werden wir die Dateien kombinieren (hier sparen wir wichtige Aufrufe) und komprimieren (spart uns wichtige Bandbreite). Wer Interesse hat, den Originalbeitrag "How to automate optimization and deployment of static content" findet man bei smashingmagazin.com.

Vorbereitungen

Wer mit einem Apple arbeitet kann sich jetzt ganz entspannt zurücklehnen, denn auf Mac-Rechnern ist Ruby bereits vorinstalliert. Anders bei Windows. Hier muss man das ganze erst einmal nachinstallieren. Hierzu lädt man sich schlicht von der Herstellerseite das passende Paket für Windows herunter und installiert dies. Ist die Installation von Ruby fertig kann man die Konsole ganz einfach mit Ruby-Unterstützung starten.

Damit haben wir aber ersteinmal nur die halbe Miete. Wir brauchen natürlich auch die nötigen Addons für Ruby.
Eines davon ist Juicer, welches von Christian Johansen entwickelt wurde. Mit diesem Tool werden unsere Javasckripte und CSS kombiniert und komprimiert.
Um Juicer zu installieren benötigen wir folgende Zeile in unserer Kommandozeile


    	Windows: gem install juicer
    	Mac OS X: sudo gem install juicer

Nicht wirklich viel Unterschied, nur lediglich 4 Buchstaben. Damit Juicer auch richtig arbeitet benötigen wir hier noch zwei Komponenten. YUI-Kompressor und JSlint. Wesentlich schwieriger gestaltet sich das auch nicht. Hier brauchen wir zwei Zeilen:


    	juicer install yui_compressor
    	juicer install jslint

Hat man beide Zeilen eingegeben steht einem das Optimieren seiner Dateien nichts mehr im Wege

Fangen wir an

Nehmen wir der Einfachkeit halber an, wir bauen uns ein kleines HTML-Template auf das später einmal eine kleine statische HTML-Seite werden soll. Grundlegend ändert sich nichts an der Art wie wir Dateien optimieren und komprimieren. Es unterscheidet sich dann lediglich nur wo die Dateien liegen und wie diese eingebunden werden.
Unsere Seite soll folgende Elemente beinhalten:

960er Grid-System von 960.gs
Eine eigene Stylesheet Datei
Diverse Javascript - Dateien (Framework, seperate Dateien - egal was)

Damit Ihr Euch vorstellen könnt wie die HEAD-Anweisung aussieht hier einen Auszug aus genanntem Bereich:


		
		Juicer-Demo ohne Optimierung

Allein mit diesen Zeilen haben wir bereits 7 (!!) HTTP-Requests. Was haben wir oben gelernt? Ein Browser kann immer zwei Dateien parallel downloaden, der Rest ist in der Warteschlange. Das bedeutet dass wir mind. 3x2 und 1x1 Datei laden. Das sich das ganze auch auf die Ladezeit ausübt sieht man an folgendem Screenshot.

Dieser wurde mit Safari aufgenommen und zeigt deutlich das Ladeverhalten. Je nachdem ob die Dateien gecached sind ändern sich natürlich die Zeiten. Aber wie man hier sieht hat man mit den vorangehenden HTML-Block 706 ms benötigt (ok, der vServer ist nicht der schnellste, aber es zählt ja das Prinzip ). Jetzt stellt man sich das ganze mal bei vielen Skripts, vielen CSS und noch mehr Bildern vor. Da ist man sehr schnell am Flaschenhals.

Steuerungsdateien vorbereiten

Da wir nun dem Ruby-Plugin Juicer mitteilen müssen welche Dateien kombiniert werden sollen, müssen wir vorher Steuerungsdateien anlegen. In diesen Dateien teilen wir juicer mit welche Dateien optimiert und kombiniert werden sollen.
Fangen wir zunächst mit den CSS-Dateien an. Wichtig ist hier, dass man sich an die Reihenfolge hält da sonst die Ausgabe anders wird wie gewohnt bzw. wie erwartet.
Legen wir uns im css-Ordner eine Datei namens combined.css an und füllen diese mit folgendem Inhalt:


	@import url("reset.css");
	@import url("960.css");
	@import url("text.css");
	@import url("style.css");

Nicht allzu schwierig oder? Wir importieren lediglich alle anfallenden css-Dateien. Dasselbe Prinzip greift auch bei den js-Dateien, jedoch mit etwas anderem Inhalt:


	/**
	* @depends jquery-1.2.6.js
	* @depends jquery.pagination.js
	* @depends jquery.pageigen.js
	*/

Auch hier gilt, first things first. Was zu erst geladen werden muss, muss auch zu erst als depend markiert sein.

Jetzt kommt der Moment auf den wir alle gewartet haben. Lassen wir den Zauber beginnen. Betrachten wir uns vorher noch einmal die Dateigrößen:

Stylesheets - 4 Dateien - 24 kb
Javascripts - 3 Dateien - 108 kb

Beim jquery habe ich bewusst eine unkomprimierte Datei gewählt um den Effekt zu demonstrieren.

Wechseln wir zunächst in den css-Ordner. Dazu bemühen wir unsere Konsole bzw. unsere Kommandozeile. Hier geben wir folgenden Code an:


	juicer merge --force combined.css

Das Ergebnis hier ist eine combined.min.css. Die Größen verrate ich gleich. Wiederholen wir den Vorgang für die javascripts.


	juicer merge -i --force combined.js

Fällt das -i auf? Das bedeutet lediglich das jslint (Modul von juicer) auch bei Fehlern im Skript die Arbeit trotzdem fortführt.
Jetzt wären wir soweit fertig, sehen wir uns die neuen Dateien an:

Stylesheets - 1 Datei - 12 kb
Javascripts - 1 Datei - 61 kb

Das macht in der Summe 59 kb weniger, eine Einsparung von knapp 44,7%. Wenn man nun ca. 50 Besucher am Tag hat kommt das bereits auf eine Traffic-Reduzierung von 2,88 MB.
Toll oder? Jetzt ändern wir unseren Code folgendermaßen ab:


	
		Juicer-Demo mit Optimierung

Sieht man sich jetzt die Grafik von Safari an, merkt man ganz schnell das unsere Aktion Früchte getragen hat. Wir bewegen uns jetzt bei 512 ms, also fast 200 ms schneller als ohne die Optimierung - und das bei kleinen Dateien. Man stelle sich das jetzt bei einer kompletten Stylesheet - Sammlung vor.

Demo der beiden Varianten

Wer sich das gerne live anschaut, kann beide Links einmal klicken um das Ergebnis selber zu betrachten:

Abschließendes und künftiges

Sicherlich gibt es auch viele Tools wie ScriptCompressor (WordPress) oder Fooman Speedster (Magento) die das alles bereits on-the-fly und automatisch machen. Wenn diese gecached werden natürlich umso besser. Aber Fakt ist hier, dass der Serverprozessor beansprucht wird. Man sollte aber auch die theoretischen Grundlagen wissen, wie solche Tools arbeiten. Im nächsten Post zu diesem Thema werden wir das ganze etwas automatisieren, auch mit Hilfe von ruby. Wir gehen dazu über das wir das für ein einzelnes Projekt nur noch eine Zeile ausführen müssen, die uns die Dateien optimiert, komprimiert und anschließend in gzip umwandelt.

Ich hoffe der Post war einigermaßen verständlich. Wie optimiert Ihr Eure Dateien? Ihr seid gerne eingeladen Euch in den Kommentaren auszulassen.

... mehr erfahren über

5 kostenlose Apps f�r Apple’s iPhone/Ipod Touch (Bereich SEO Apps, Social Apps)

daniel — Sat, 30 Jan 2010 01:44:23 +0000

Nach einer längeren Pause wird es mal wieder Zeit einen neuen Post zu schreiben. Da ich seit kurzer Zeit im Club der iPod Touch Besitzer bin musste ich natürlich gleich einmal recherchieren, was der Apple Appstore an Apps für Suchmaschinenoptimierung bereithält. Gesagt - getan - gefunden. Der Apple Appstore bietet einige Programme im Bereich SEO an, welche zudem noch kostenlos sind. Für einen ersten Test also ideal.

SEO-POST

Am 15. Januar 2010 released ist dieses App schon mit aktuell 4 Sternen ein richtiger Download Tip für SEO Apps für das Iphone oder dem iPod Touch. Das App "SEO POST" bringt alle wichtigen Nachrichten der SEO-Szene (deutsche wie englische SEO-News) auf das Iphone oder dem iPod Touch. Ebenso werden auch Links zu SEO Podcasts, Veranstaltungn und Jobangebote übermittelt.

Programmiert wurde das ganze von Hans Kronenberg von seo-strategie.de und mit 1,2 MB ein kleines Kraftpaket. Man kann alle News entweder direkt im Browser lesen, per eMail verschicken oder direkt den Link in Twitter posten. Wer immer auf dem Laufenden sein möchte ist mit diesem SEO-App für Apple´s iPhone / iPod Touch sehr gut beraten.

Serps

Das zweite iPhone / iPod Touch App im Bunde trägt den Titel "Serras". Wie man unschwer am App-Titel feststellen kann, ist der Name bei dem App Programm. Man kann seine kompletten Webseiten samt Suchbegriffen im Überblick behalten. Man legt eine Domain an, vergibt die gewünschten Keywords und prüft diese. Das Programm lässt sogar Keyword-Recherche in deutschen Suchmaschinen zu. Wenn wir unsere Liste fertig haben, reicht ein Klick auf ein Keyword und das App "Serps" sucht uns die aktuelle Position im Google-Index und zeigt und diese farbig an. Zusätzlich sehen wir wer vor oder nach uns im Index steht.

Programmiert von Hans Schneider wurde es am 05. Dezember 2009 veröffentlicht. Aktuell trägt das Programm die Revision 1. und ist mit 0,3 MB auch nicht speicherfressend. Für kurze Keyword Recherchen ist dieses iPhone / iPod Touch App ideal. Das App ist kostenlos, wird aber wohl durch kleine Anzeigen am unteren Bildschirmrand finanziert.

Domainer

Ebenfalls ein iPhone / iPod Touch App um SEOs das Leben zu erleichtern ist Domainer. Dieses kostenlose App gibt uns für jede eingegebene Domain den aktuellen Pagerank sowie den Alexa Rank (weltweit) zurück. Alle ausgewerteten Daten werden auch in einer Historie auf dem iPhone / dem iPod gespeichert um diese auch auf längere Sicht zu verfolgen.

Facebook

Dieses iPhone / iPod Touch App gehört zwar jetzt generell nicht zum Bereich SEO aber ist sehr praktisch um seinen Facebook Account schnell zu bearbeiten. Wichtig vor allem wenn man sich ein Netzwerk an Freunden und Partnern aufbauen möchte. Mit dem Facebook App für das iPhone / iPod Touch hat man mit lediglich 1,5 MB Größe die Möglichkeit genau das zu machen. Man kann direkt seine Gedanken schreiben, Notizen machen, mit Freunden Kontakt aufnahmen und vieles mehr.

Selbstreden ist das Facebook App kostenlos und wurde zuletzt am 14. Januar 2010 auf die Version 3.1.2 upgedatetund steht mit 4 Sternen bei insgesamt 1769 Bewertungen sehr gut da. Für Fans von Sozial Network das ideale iPhone / iPod Touch App.

Twitterrific

Das zweite Social Tool im Bunde ist das wohl bekannte Twitterrific App. Wie der Name vermuten lässt geht es hier selbstverständlich um das Microblogging Netzwerk Twitter. Mit Twitterrific hat man ein Allround-Tool um seinen Twitter Account zu managen. Die normale Version dieses iPhone / iPod Touch Apps ist zudem kostenfrei erhältlich.

... mehr erfahren über

Lade Dir diesen Post als pdf-Datei herunter: 5 kostenlose SEO-/Social-Apps f�r iPhone / iPod Touch (188)

HTTP-Requests in WordPress minimieren

daniel — Fri, 18 Dec 2009 07:28:31 +0000

Wer häufig mit Firefox-Addons wie YSlow oder Page Speed arbeitet findet oft die Nachricht (vor allem in Systemen wie WordPress), dass man die Anzahl der HTTP-Requests mindern soll. Da jeder Aufruf die Verbindung zum Server neu aufbaut, fallen hier immer wieder Latenzzeiten an, welche die Ladegeschwindigkeit beeinflussen.

Wie stellt man es nun in einem Blogsystem wie WordPress an, dass man die HTTP-Requests im Falle von css Dateien minimiert? Im Grunde geht es darum, alle css-Stile in eine Datei zu verpacken. Nur ist das Problem, dass Module bzw. WordPress-Plugins immer gern eigene css Dateien laden. Wir müssen also hergehen und die Stile in unsere style.css packen und das Modul abhalten diese zu laden.

Wie das geht möchte ich an zwei Modulen zeigen. Das erste wird Add to An, da dieses Inline-CSS erstellt. Das zweite ist das Modul Digg Digg, welches eine CSS Datei in den Heider schreibt.

Wir betrachten uns zunächst den Quellcode der ausgegebenen Seite und öffnen die CSS-Datei, welches im Heider geöffnet wird. Im ersten Fall schauen wir uns erst einmal den Inline-Style von Add To An an. Inline Styles können wir glücklicherweise direkt aus dem HTML-Code heraus und in unsere style.css kopieren. Damit der Code jetzt nicht doppelt (aus der css und dem inline Code) aufgerufen wird, müssen wir das Modul ein wenig anpassen.

Wichtig ist hier auch wieder, dass Ihr bei jeder Datei die Ihr verändert vorher unbedingt eine Datensicherung macht um im Falle von Fehlern eine Rückversicherung zu haben. Im Falle von Add to Any führt unsere Arbeit uns zur gleichnamigen PHP-Datei. In dieser Datei suchen wir gezielt nach einer Ausgabe von CSS-Stilen und entfernen diese. Diese Zeilen finden wir bei Add To An ab Zeile 307 bis Zeile 345. Diese gilt es nun zu entfernen und die Datei wieder hochzuladen.

Im Grunde genommen bleibt also nur noch eine leere Funktion über, die folgendermaßen aussieht:


function A2A_SHARE_SAVE_button_css() {

}

Der Vorteil hier liegt, dass im Quelltext vom Dokument weniger Text steht, wodurch die Suchmaschinen schneller zum eigentlichen Inhalt kommt und der Quelltext nicht künstlich aufgebläht wird. Einen richtigen Geschwindigkeitsvorteil gibt es hier zwar noch nicht, aber der Fokus liegt hier ganz klar darauf, dass der Quelltext etwas entschlackt wird und die css Stile da hin kommen, wo sie hingehören - in unserem Stylesheet.

Wie sieht das nun aus, wenn Module eine fertige css-Datei in den Header schreiben? Im Grunde genommen geht das genauso, nur dass der Ablauf ein klein wenig anders ist. Wir benötigen als erstes die CSS-Datei des jeweiligen Moduls. Im Falle von Digg Digg sieht man, dass die Datei folgenden Pfad besitzt:

/wp-content/plugins/digg-digg/diggdigg-style.css

Diese Datei öffnen wir in unserem Lieblings-Programm und fügen die Stile unserer style.css hinzu. Jetzt geht es wieder darum den Aufruf des Moduls so abzuändern, dass diese Datei nicht geladen wird. Ein Problem dass uns jetzt trifft ist, dass ein Modul wie Digg Digg mehrere Dateien einsetzt, deswegen starten wir zuerst mit der Hauptdatei. Diese heißt in 99 % der Fälle so wie das Modul - also schauen wir uns die digg-digg.php einmal an.

So sehen wir jetzt schon in Zeile 36 des Pudels Kern. Hier wird mittels echo-Befehl das Stylesheet ausgegeben. Wir könnten natürlich jetzt auch die beiden Zeilen in der Funktion löschen, aber wir können auch den Aufruf direkt wegnehmen, damit das erst gar nicht ausgeführt wird. Das bringt zwar keinen wirklich merkbaren Unterschied, aber der Ordnung halber machen wir das.

So sehen wir in Zeile 45 dass in den Kopf die eben gesehene Funktion aufgerufen wird - kommentieren wir das also einmal aus. Wenn wir die Datei jetzt wieder hochladen und die Seite neu aufrufen sehen wir das unser Modul noch genauso funktioniert, aber einen HTTP-Aufruf weniger ausführt. Bei einem Modul macht das sicherlich keinen Sinn, aber Ihr wisst ja selber wie schnell sich Module in WordPress installieren lassen.

Das ganze hat natürlich auch einen kleinen Nachteil. Nach einem Update geht das ganze Spiel immer von vorne los. Man darf jedes Mal schauen ob noch alles so funktioniert wie das Modul es vorsieht - was das Design angeht. Da aber jeder neue Aufruf eine neue Latenzen mit sich zieht kann man da denk ich mal ein Auge zudrücken

... mehr erfahren über

Interview mit Staatsminister Schneider

daniel — Wed, 16 Dec 2009 07:10:50 +0000

Vor einiger Zeit habe ich meine Meinung zum Thema Medienführerschein kundgetan. Da es meiner Meinung nach nicht fair ist, über ein Thema zu reden ohne es etwas zu hinterfragen, habe ich mir gedacht dass ich einige Fragen an Herrn Schneider zu richten um seine Meinung zu vertreten.

In meinen Augen wirklich ein netter Politiker, der auch wenn es etwas dauert, sich die Zeit nimmt mit offenen Fragen auch offen umzugehen. In keinster Weise musste ich Ihn überreden sich 5 Frage zu stellen. An dieser Stelle möchte ich mich noch einmal für seine Zeit bedanken.

Damit Ihr auch wisst um wen es geht, möchte ich Euch erst einen Steckbrief von Herrn Schneider präsentieren, bevor es zum eigentlichen Interview geht.

Staatsminister Siegfried Schneider
Leiter der Bayerischen Staatskanzlei

Geboren am 07. April 1956, katholisch, verheiratet, 3 Kinder

1975
Abitur Reuchlin Gymnasium Ingolstadt

1977 - 1980
Studium für Lehramt an Volksschulen

1980 - 1994
Lehrer an verschiedenen Grund-, Haupt- und Förderschulen

1987 - 1999
CSU-Ortsvorsitzender Wettstetten

1990 - 2005
Gemeinderat

seit 1994
Mitglied des Landtags

seit 1996
Kreisrat

2001 - 2007
stv. CSU-Bezirksvorsitzender Oberbayern

seit 2002
Mitglied des Diözesanrats der Katholiken im Bistum Eichstätt

2002 - 2005
Bildungspolitischer Sprecher der CSU-Landtagsfraktion

2002 - 2003
Stellvertretender Vorsitzender des Ausschusses für Bildung, Jugend und Sport

2003 - 2005
Vorsitzender des Ausschusses für Bildung, Jugend und Sport

2005 - 2008
Bayerischer Staatsminister für Unterricht und Kultus

seit 2007
Vorsitzender des CSU-Bezirksverbandes Oberbayern

seit 30. Oktober 2008
Staatsminister, Leiter der Bayerischen Staatskanzlei

Ich habe Herrn Staatsminister Schneider 5 Fragen gestellt. Teilweise gezielt auf den Medienführerschein, teilweise auch ganz triviale Fragen. Was genau dabei herausgekommen ist, könnt Ihr jetzt lesen

Wie nutzt der Staatsminister das Internet privat?
Natürlich hat das Internet neben dem Berufsalltag auch privat bei mir Einzug gehalten. Ich nutze e-mail und die Office-Programme. Auch recherchiere ich öfters über das Internet. In Teilbereichen habe ich auch die Möglichkeit über das Internet einzukaufen kennen und schätzen gelernt.
Wie sehen Sie das Problem mit Lehrkräften, die auf ihrem aktuellen Stand bleiben und sich nicht fortbilden möchten? Was wäre hier eine mögliche Lösung?
Grundvoraussetzung zur Stärkung der Medienkompetenz ist, dass den Lehrkräften auch ein Qualifikationsangebot an die Hand gegeben wird. Den bestehenden Fortbildungseinrichtungen, wie z.B. der Akademie für Lehrerfortbildung und Personalführung in Dillingen, kommt hier eine zentrale Verantwortung zu. Hinsichtlich der persönlichen Motivation der Lehrkräfte bin ich zuversichtlich, dass die überwiegende Anzahl der Lehrkräfte bereit ist, sich den neuen Herausforderungen zu stellen, wenn ihnen ausreichend Fortbildungsmöglichkeiten und Unterrichtsmaterialien an die Hand gegeben werden. In der Lehrerausbildung muss der Umgang mit neuen Medien und die Vermittlung von Medienkompetenz einen höheren Stellenwert einnehmen.
Das Internet birgt viele Gefahren und es werden täglich mehr. Kann man hier überhaupt eine vernünftige Basis bilden, die im Idealfall auch nachhaltig bleibt? Kann man in den verschiedenen Phasen wirklich auf nahezu alle Details eingehen?
Gerade diese Problematik habe ich erkannt und daher den Medienführerschein Bayern konzipiert. Das mediale Angebot ist bereits jetzt vielfältig, von unterschiedlichster Qualität und nicht immer ohne Gefahren. Der Medienführerschein geht daher davon aus, dass Medienkompetenz Wissen und Reflektion über die verschiedenen Mediensysteme integriert und verbindet, zu kritischem Durchdenken, fundierter Bewertung und Positionierung gegenüber und in der Medienwelt befähigt und letztendlich den eigenständigen und selbstbestimmten Gebrauch von Medien als Mittel der Artikulation und Partizipation ermöglicht. Gefahren, Urheberrechte und selbstbestimmter Umgang werden Schwerpunkte sein. Zudem wird sich der Medienführerschein Bayern ständig weiterentwickeln, die zu vermittelnden Inhalte aktualisieren und in praktische Anwendungsbeispiele umsetzen.
Viele Jugendliche sind den eigenen Eltern, was Technik angeht, mindestens 1 bis 2 Generationen voraus. Ist es wichtig, dass sich auch die Eltern mit dem Thema befassen und ggfs. auch an einem speziellen Seminar teilnehmen sollten?
Natürlich ist dies der Fall. Dafür werden wir auch die Erwachsenenbildungseinrichtungen einbinden. Die bestehenden Angebote müssen besser vernetzt werden und neue Angebote entstehen, wenn Defizite erkannt werden. Denkbar sind auch generationsübergreifende Projekte, wie z.B. „Ich erkläre meinem Opa das Handy“ oder „Kommunikationsprojekte im Rahmen unseres Wertebündnisses“. Auf diesem technischen Gebiet bietet es sich an, offen dafür zu sein, dass Erwachsene von Kindern und Jugendlichen lernen können.
Welche 3 Websites würden Sie aus persönlichen Erfahrungen empfehlen?
Spontan fallen mir hier ein www.eltern-ans-netz.de, www.klicksafe.de und www.youtube.com/bayern, unsere neue Videoplattform.

... mehr erfahren über

Weiterführende Links

Posting zum Medienf�hrerschein

Wir bauen uns ein eigenes RSS-Modul f�r xt:Commerce

daniel — Sun, 01 Nov 2009 20:46:55 +0000

Heute gibt es mal wieder etwas sehr nettes bei seo-geek.de. Wir programmieren uns unser eigenes RSS-Feed AddOn für das GPL-Shopsystem xt:Commerce. Oft wird gefragt, wie man wohl aus seinen neuesten Artikeln, welche man im xt:Commerce Shop einpflegt einen echten RSS-Feed bauen kann. Was bringt uns das? Zu einem bieten wir unserem Shop-Kunden einen gewissen Mehrwert, da dieser im Falle von Produktaktualisierungen nicht immer auf die Webseite surfen muss, sondern diese Nachricht direkt in seinem Newsreader angezeigt bekommt. So sparen wir uns ebenfalls die Gebühren von Newsletter-Diensten wie z. B. cleverreach.de. Wie können wir aber nun den RSS-Feed für xt:Commerce bewerkstelligen?

Möglichkeiten und Ideen eines RSS-Feeds für xt:Commerce

Eine Alternative ist natürlich im Hintergrund einen WordPress-Blog laufen zu lassen und diesen im Shop verlinken. Dass dies mit einem Gewissen Grad an Mehrarbeit verbunden ist dürfte klar sein. Deswegen wollen wir uns das ganze selber basteln. Dazu benutzen wir weigehenst xt:Commerce-eigene Funktionen.

Wir werden das ganze auch nicht mit einem einzigen Post perfekt hinbekommen. Ich werde das als kleines Projekt nebenher laufen lassen und Stück für Stück (vielleicht auch mit einigen Gastbeiträgen - bei Interesse gerne bei mir melden) bis zur Produktreife bringen. Geplant habe ich die RSS-Ausgabe für folgende Funktionen:

Anlegen, Verändern und Löschen eines Produktes
Anlegen, Verändern und Löschen einer Kategorie
Ausgabe vom Produktfoto, Beschreibung und Namen des Produktes

Wie gehen wir hierbei vor? Ich möchte ja, dass meine Leser auch dahingehend einen Mehrwert bekommen, dass man auch die Technik dahinter versteht, also das ganze Wie, wo und warum? Keine Angst, für die die das nicht wissen wollen biete ich am Ende des Postings die ganzen Dateien auch als Zip-File zum Download an. Das RSS-Programm Vienna (Mac OS X) zeigt den Feed brav an, während NetNewsWire keine Postings laden will. Sobald ich darauf eine Antwort habe, wird das aber seperat behandelt. Ich denke aber das der Code so aber schon einmal ein gutes Fundament für unser späteres AddOn bieten wird.

Fangen wir an - Anlegen von mySQL-Tabellen

Überlegen wir zunächst, wie das ganze in unserem xt:Commerce Shop arbeiten soll. Sobald wir einen Artikel neu abspeichern wollen wir, dass ein neuer Eintrag in einer separaten mySQL-Tabelle abgespeichert wird, in diesem Fall wollen wir vorerst wenige Daten abspeichern. Wir benötigen für unseren RSS-Feed folgende Felder:

id
title
description
link

Während die ID nur eine fortlaufende Zahl ist, für welches sich nur mySQL interessiert, sollen in den anderen 3 Feldern jene Informationen gespeichert werden, welche später im Feed ausgegeben werden sollen. Der Code um diese Tabelle z. B. in phpmyadmin anzulegen muss wie folgt lauten:


CREATE TABLE `products_rss` (
`id` BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title` VARCHAR( 255 ) NOT NULL ,
`description` TEXT NOT NULL ,
`link` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM

Theorie und Praxis im xt:Commerce Shop

Welche Dateien müssen wir nun bearbeiten? Halten wir uns einmal vor Augen, wann ein Artikel gespeichert wird. Im Admin-Bereich wird beim Anlegen von neuen Artikeln die categories.php geladen. Diese Datei untergliedert sich ebenfalls in mehrere Teilbereiche - Produkte anlegen, ändern löschen sowie Ordner anlegen, ändern und löschen. Da wird weitgehenst vom Original-Quellcode fernbleiben wollen, wird diese nur minimal bearbeitet. Zuerst erstellen wir uns eine neue Klasse für die RSS-Feeds. Eine Klasse hat den Vorteil das wir diese schnell skalieren und an neue Gegebenheiten anpassen können.

Wir erstellen uns zunächst unsere RSS-Klasse. Diese legen wir im Ordner /admin/includes/classes an. Wir benennen die Datei wie folgt: products_rss.php. In dieser Datei legen wir einige Dateien an, die am Ende unsere Datenbank mit Feed-Einträgen füllen soll. Fangen wir zunächst mit der Variablen-Deklaration und dem Konstruktor an.

Variablendeklaration und Konstruktur


description = $data['products_description_2'];
	$this->suchbegriffe = explode(',',$data['products_keywords'][2]);

	if($data['products_meta_description'] != '') {
		$this->metadescription = $data['products_meta_description'][2];
	}

	if($data['products_id'] == '') {
		$this->products_id = $this->getNewID();
	}

	$this->link = HTTP_SERVER.DIR_WS_CATALOG.'product_info.php?info=p'.$this->products_id.'.html';

		return true;
	}

Erklärung der Variablendeklaration und des Konstruktors

Wir legen zunächst einige Variablen an, die uns später helfen sollen unseren Feed-Beitrag zu gestalten. Dazu benötigen wir die neue Produkt-ID für den Link, sowie den Titel - also den Produktnamen und die Beschreibung. Ferner möchte ich einbauen, dass man im Feed ebenfalls Links angezeigt bekommt in der die xt:Commerce Suche benutzt wird. Desweiteren benötigen wir kleinere Hilfsvariablen wie $inhalt_final. In dieser Variable wird der fertige Feed-Eintrag gespeichert. Die Metadescription des Artikels benutzen wir als Untertitel für den Feed-Titel. Das hat zwei Vorteile:

a) Im Feed selber wird etwas mehr ausgegeben, evtl. sogar etwas Interessantes was zum kaufen animiert
b) Wir sind fleißig und füllen wie es sein sollte alle Felder aus

Über den Produktlink können wir dann über den Feed-Eintrag direkt auf die Produktseite wechseln. Nun kommen wir zu dem Konstruktor, also die erste Funktion die die Klasse aufruft. In dieser Klasse werden alle POST-Variablen welche im Eingabedialog eingegeben wurden verarbeitet. Nicht alle aber immerhin ein Teil. Besondere Beachtung sollte man der Zeile $this->products_id = $this->getNewID(); widmen. Da der Post an dieser Stelle noch nicht in der Datenbank vorhanden ist, müssen wir mit einer kleinen Hilfsfunktion die neue ID herausfiltern. Dazu basteln wir uns folgendes Gebilde:


	function getNewID() {
			$new_pid_query = xtc_db_query("SHOW TABLE STATUS LIKE '".TABLE_PRODUCTS."'");
			$new_pid_query_values = xtc_db_fetch_array($new_pid_query);
			$pid = $new_pid_query_values['Auto_increment'];

			return $pid;
	}

Hinzufügen des Produktbildes und Erstellen des Beitrags

Da wir später in unserem xt:Commerce RSS Feed auch das Produktbild anzeigen möchte, müsen wir sicherstellen das wir es auch aus der Datenbank laden. Dazu benutzen wir eine Funktion um die Datenbank abzufragen:


	function getProductImage() {
	$sql = "SELECT products_image FROM ".TABLE_PRODUCTS." WHERE products_id='".$this->products_id."'";
	$imagedb = xtc_db_query($sql);
	$image = xtc_db_fetch_array($imagedb);
	return $image['products_image'];
	}

Nun erstellen wir uns eine Funktion welche die in der Klasse befindlichen Daten in einen kleinen HTML-Block packt, damit diese später aus der Datenbank ausgelesen werden können. Ich habe folgende Anforderung an die Datei:

- Die Datei soll auf jede Variante reagieren können

Das heißt die Funktion soll sowohl beim Anlegen eines neuen Artikels, sowie auch beim Löschen eines Artikels reagieren und des rss-Feed füllen. Effektiv bedeutet das, dass wir mit einer switch-case-Schleife arbeiten sollten um alle Varianten durchzuprüfen. Die vorläufe Funktion wird folgendermaßen aussehen:


function create_feeditem($type) {

	switch($type) {
		case 'new_product' : {
			$this->title = 'Neuer Artikel im Shop: '.$data['products_name'][2];
			$this->picture = $this->getProductImage();

			$back = '';
			$back .= "$this->title

";

			if($this->metadescription != '') {
				$back .= $this->metadescription."
";
			}
			$back .= "";
			$back .= 'picture."\"/> $this->description
';
			$back .= "Den Artikel findet man unter folgenden Suchbegriffen: 
";
			foreach($this->suchbegriffe as $term) {
				$back .= ''.$term.'';
			}
			$back .= '';
			break;
		}
	}

	return $back;
	}

Zwei weitere Hilfsfunktionen

Das einzige was wir jetzt noch in der Klasse benötigen sind zwei Funktionen. Eine, die angib dass wir einen neuen Artikel in den Feed schreiben möchten und eine die die Daten in die Datenbank abspeichert. Diese zwei sind relativ leicht und schnell abgehandelt:


	function create_new_product_rss() {
	$this->inhalt_final = $this->create_feeditem('new_product');
	}

	function insert_rss() {
		$query = xtc_db_query("INSERT INTO products_rss (title, description, link) VALUES ('".$this->title."','".$this->inhalt_final."','".$this->link."')");
		return true;
	}
}
?>

Der Code noch einmal komplett


description = $data['products_description_2'];
	$this->suchbegriffe = explode(',',$data['products_keywords'][2]);

	if($data['products_meta_description'] != '') {
		$this->metadescription = $data['products_meta_description'][2];
	}

	if($data['products_id'] == '') {
		$this->products_id = $this->getNewID();
	}

	$this->link = HTTP_SERVER.DIR_WS_CATALOG.'product_info.php?info=p'.$this->products_id.'.html';

		return true;
	}

	function getNewID() {
			$new_pid_query = xtc_db_query("SHOW TABLE STATUS LIKE '".TABLE_PRODUCTS."'");
			$new_pid_query_values = xtc_db_fetch_array($new_pid_query);
			$pid = $new_pid_query_values['Auto_increment'];

			return $pid;
	}

	function getProductImage() {
	$sql = "SELECT products_image FROM ".TABLE_PRODUCTS." WHERE products_id='".$this->products_id."'";
	$imagedb = xtc_db_query($sql);
	$image = xtc_db_fetch_array($imagedb);
	return $image['products_image'];
	}

	function create_feeditem($type) {

	switch($type) {
		case 'new_product' : {
			$this->title = 'Neuer Artikel im Shop: '.$data['products_name'][2];
			$this->picture = $this->getProductImage();

			$back = '';
			$back .= "$this->title

";

			if($this->metadescription != '') {
				$back .= $this->metadescription."
";
			}
			$back .= "";
			$back .= 'picture."\"/> $this->description
';
			$back .= "Den Artikel findet man unter folgenden Suchbegriffen: 
";
			foreach($this->suchbegriffe as $term) {
				$back .= ''.$term.'';
			}
			$back .= '';
			break;
		}
	}

	return $back;
	}

	function create_new_product_rss() {
	$this->inhalt_final = $this->create_feeditem('new_product');
	}

	function insert_rss() {
		$query = xtc_db_query("INSERT INTO products_rss (title, description, link) VALUES ('".$this->title."','".$this->inhalt_final."','".$this->link."')");
		return true;
	}
}
?>

Das Ganze in die categories.php einbauen

Nun müssen wir das ganze vorerst einmal einbauen, damit neue Artikel auch gespeichert werden. Hierzu öffnen wir wie bereits gesagt die categories.php aus dem admin-Ordner. Zuerst suchen wir uns die Zeile heraus, in der der Fall behandelt wird, wenn ein neues Produkt eingefügt wird (insert_product -> ca. Zeile 140). Hier wird der betreffende Teil folgendermaßen abgeändert:

case 'insert_product' :

$rss = new product_rss($_POST);
$catfunc->insert_product($_POST, $current_category_id);
$rss->create_new_product_rss();
$rss->insert_rss();

break;

Mehr braucht es auch vorerst in dieser Datei nicht. Ein Backup im Voraus macht aber trotzdem Sinn.

Einen Feed für xt:Commerce generieren

Was ist wohl das auffälligste an einem Feed-Link, sagen wir z. B. in WordPress? Ein Link sieht in den meisten Fällen folgendermaßen aus: http://www.domain.de/feed
Dieses Gebilde können wir ganz einfach realisieren. Wir erstellen auf unserer xt:Commerce - Root einen Ordner "feed" in der wir lediglich eine index.php abspeichern, welche folgenden Inhalt hat


' . "\n";
?>

 
	Neue Produkte bei Testshop
   http://localhost:8888/xtcommerce
   Unsere Artikel im Überblick  
 
			 	".$row['title']."
		 		".$row['link']."
		 		".strip_tags($row['description'])."
		 		

\n";
	 }
 ?>

Erklärung des Feed-Generators

In dieser Datei erstellen wir zunächst einen Header der angibt, dass es eine xml-Datei werden soll welche ausgegeben wird.
Danach erstellen wir zunächst einige Standardeinträge die in einer Feed-Datei vorhanden sein sollen. Danach fängt der eigentliche Zauber an. Wir definieren zunächst noch einmal unsere Datenbank-Konfiguration und bauen eine Verbindung zu unserer xt:Commerce Datenbank auf. Danach wählen wir alle Einträge aus unserer angelegten Tabelle an, welche wir nach der ID sortieren lassen. Danach verarbeiten wir lediglich wie in anderen Skripts auch die Ausgabe. Mehr ist es auch an dieser Stelle vorerst nicht.

Abschließendes

Wie ich bereits eingangs erwähnt habe, wird es noch etwas dauern bis dieses Skript Serienreife erlangt und sollte demnach NICHT - ich wiederhole - NICHT auf Produktivservern eingesetzt werden. Es soll bis jetzt lediglich einen Überblick über die Technik und den damit verbundenden Methoden geben wie RSS arbeitet und wie man das selber in den eigenen GPL-Shop xt:Commerce einbauen kann. Das Skript wird in den nächsten Wochen immer erweitert - es lohnt sich am Ball zu bleiben. Viel Spaß beim selber testen. Wer Anmerkungen oder Verbesserungsvorschläge hat, kann diese gerne in den Kommentaren hinterlassen.

Download des xt:Commerce Moduls

xt:Commerce RSS Modul by seo-geek.de (207)

... mehr erfahren über

Weiterführende Links

Lade Dir diesen Post als pdf-Datei herunter: Wir bauen uns ein eigenes RSS-Modul f�r xt:Commerce (226)

Mehr Traffic f�r den eigenen WordPress Blog

daniel — Thu, 22 Oct 2009 21:46:45 +0000

SEO ist ja nicht nur die Methode um besser in den Suchmaschinen zu ranken. SEO soll natürlich auch das Hauptziel erreichen - Besucher. Unser oberstes Ziel soll sein unsere Nachrichten im Web zu verbreiten. Möglichkeit hierfür bieten natürlich in erster Linie Pingdienste, aber auch Nachrichten-Portale wie z. B. webnews.de. Webens bietet viele Kategorien, damit man auch die passende News-Kategorie für seinen Artikel findet. Nun wäre es natürlich eine Möglichkeit seine Artikel per Hand einzufügen, allerdings ist das zuviel Arbeit, oder? Eine Lösung ist hier natürlich auch schon in Form eines WordPress-Plugins vorhanden.

Der Schlüssel zum Erfolg - webnews WordPress Plugin

Mit dem webnews.de WordPress Plugin Artikel automatisch an webnews.de schicken

Markus Walter, Blog-Betreiber von www.tekka.de bietet auf seinem Blog das Webnews WordPress Plugin kostenlos zum downloaden an. Ziel bzw. Sinn des Plugins ist, dass Artikel welche gepostet werden im selben Moment im Newsverzeichnis von webnews.de eingetragen werden. Der Sinn liegt ganz klar auf der Hand. Wir benutzen webnews.de als neue Quelle um Newsinteressierte Besucher zu unserem Blog zu locken. Ist der Beitrag interessant und gut kategorisiert können hier schnell ein paar mehr Besucher kommen.

Handhabung des webnews WordPress Plugins

Die Installation des Plugins ist genauso einfach wie andere Plugins auch. Wir downloaden uns die Zip-Datei und laden diese im Plugin-Dialog hoch und aktivieren es. Vorsicht an dieser Stelle! Das Plugin ist noch im beta-Stadium, also noch nicht wirklich fertig. Meinen Erfahrungen nach läuft das Plugin aber recht stabil. Man sollte nur keine Tippfehler in den Einstellungen bezüglich webnews.de Zugangsdaten haben. Bei Fehler wird der Artikel wieder auf Entwurf gesetzt Aber egal, dafür ist es beta und bietet dafür einen super Service.

Man muss allerdings nicht unbedingt jeden Artikel einfügen lassen. Man kann bei jedem Post auswählen ob dieser überhaupt bei webnews.de eingetragen werden soll oder nicht. Alte Artikel können mit Auswahl des Häkchens "aktualisiert" und ebenfalls übermittelt werden. So hat man wirklich Kontrolle darüber was in den Newskatalog kommen soll.

... mehr erfahren über

Weiterführende Links

Markus Walter bei Twitter

Lade Dir diesen Post als pdf-Datei herunter: Mehr Traffic f�r den eigenen Wordpress Blog (175)

Zum fahren ben�tigt man einen F�hrerschein … Rise of the “Medienf�hrerschein”

daniel — Tue, 20 Oct 2009 21:36:28 +0000

zum surfen aber bald auch? ganz so schlimm wird es glücklicherweise nicht werden, aber unser lieber Papa Staat geht langsam in diese Richtung. Jedenfalls wenn es nach dem Bayerischen Staatskanzlei Chef Siegfried Schneider geht. Er schlug im April vor, dass Kinder und Jugendliche einen Medienführerschein bewältigen sollen.

Der Sinn dahinter ist folgender: Kinder sollen frühzeitig den Umgang, die Gefahren und Tücken des Internets kennenlernen. Wer jetzt denkt, dass es lediglich um das surfen geht - weit gefehlt. Antrieb für diesen Ansatz des Medienführerscheins sind natürlich auch die weit gefürchteten "Killerspiele". Kinder sollen so schon früh sensibiliert werden, dass Killerspiele keinen Einzug mehr in das Kinderzimmer finden bzw. finden sollen.

Mit dem Medienführerschein sollen Kinder und Jugendliche ebenfalls lernen "souverän und verantwortlich" mit den Chancen umzugehen, die ihnen das Internet gibt. Dank Deutscher Genauig- und Detailverliebtheit gibt es den Medienführerschein in 4 "Führerscheinklassen". Von Vorschulkindern bis 12-18 Jährige - an jeden wird beim Medienführerschein gedacht. Die Inhalte sollen dementsprechend angepasst werden. Damit auch ein Mitmacheffekt erreicht wird, will man auch Zertifikate in mehreren Stufen einführen.

So gut die Grundidee des Medienführerscheines sein mag, ich persönlich habe nie eine so Steuergeld-verschwendende Idee von einem Staatsvertreter gehört. Wieso ich so denke? Sehen wir mal die Sache mit dem Medienführerschein so wie sie und fangen noch einmal von vorne an:

Schulen bzw. Lehrer sollen im Unterricht den Schülern beibringen souverän und sinnvoll mit dem Internet umzugehen. Sogar an diesem Punkt entstehen bereits erste Probleme mit der Idee vom Medienführerschein. Gehen wir zunächst einmal vom Standpunkt "Kompetenz" aus.

Viele Lehrer sind aufgrund Ihrer Dienstjahre im Schulbertrieb auf eine gewisse Schiene eingefahren. Viele nutzen das Internet sogar selber nur um z. B. Email abzuholen. Bei vielen war es das dann aber auch schon. Ich möchte sogar so weit gehen und in den Raum stellen, dass viele Schüler im Alter von 14-18 Jahre den Lehrkräften in Sachen Internet-Kompetenz einen sehr großen Wissensvorsprung haben. Das Problem liegt aber mit Sicherheit nicht bei den Lehrkräften selber (ohne Lehrer wären wir alle doof ) sondern daran, dass beide Parteien in unterschiedlichen Generationen geboren wurden.

Die heutige Jugend wird direkt in diese Richtung hineingeboren. Wenn man mal eben etwas für Deutsch braucht - wusch - Google hat eine Antwort. Man sucht z. B. bestimmte Literatur für den Unterricht - zack - Amazon hat es. Es haben sich eben viele Namen etabliert, die Kinder schon im jüngsten Alter kennen. Ebenso ist es erwiesen, dass es der heutigen Generation leichter fällt sich in neue Metiers einzuarbeiten wie der älteren Generation.

Ein andere Frage ist, wieso man um alles in der Welt in der Vorschule schon mit dem Medienführerschein anfangen muss? Sollte man in dieser Zeit nicht lieber schon gezielt Lernschwierigkeiten von Kindern aus dem Weg räumen? Ich mein in dieser Zeit lässt sich bestimmt schon feststellen, ob ein Kind in irgendeiner Richtung eine Schwäche aufweist. Mit dem Medienführerschein wird hier meiner Meinung nach wichtige Zeit einfach weggenommen, welche sinnvoller genutzt werden könnte.

Das ganze zieht sich in den späteren Schuljahren fort. Anstatt man vielleicht lieber 1-2 Stunden sinnvollen Unterricht macht, müssen Lehrer Schülern Sachen beibringen, welche das ohnehin schon wissen. Ob durch den Medienführerschein das Surfverhalten der Jugendlichen verbessert wird sei dahingestellt. Die Verlockungen im Web sind schlechtweg zu groß als das man mit einem "Medienführerschein" alle Bereiche abdecken kann. Das Problem liegt klar auf der Hand - die Technik geht weiter - der Unterricht hingegen wird wohl wie soviel im Lande standardisiert. Ein Grundwissen sozusagen. Ich denke eine allgemeine Plattform wäre hier sinnvoller und vor allem wesentlich schneller realisiert und noch wichtiger - aktualisiert.

Auf diese Art muss natürlich alles durchgeplant und vor allem auch denen vermittelt werden, welche den Inhalt des Medienführerscheins vermitteln. Ein weiteres Problem ist es natürlich auch, dass meist auch die Eltern nicht dieselben Kompetenzen haben wie Ihre Kinder. Viele Eltern sind mit dem Thema Netz und Technik meist nicht annähernd so vertraut wie die Zöglinge.

Alles in allem finde ich den Medienführerschein so unnütz wie Pickel. In meinen Augen hätte man die Kosten welche die ganze Aktion "Medienführerschein" mit sich bringt lieber direkt in das Bildungsbudget gesteckt, als so eine Aktion durchzuführen. Politiker sollten hier natürlich Vorbild sein, aber man weiß dass diese auch nicht unbedingt kompetent sind. Mein Tip an die Politiker: Macht doch bitte erst einmal einen Beta-Test Eures Medienführerschein und bringt bitte nicht fadenscheinige Gründe wie "Killerspiele sind böse" um Steuergelder sinnlos auszugeben. Das Internet ist zu komplex um das in einem "Medienführerschein" zu packen.

Wie seht Ihr die ganze Geschichte um den "Medienführerschein"? Sinn oder Unsinn? In diesem Sinne

Euer seo-geek

Daniel

... mehr erfahren über

3 WordPress Plugins um die Geschwindigkeit des Blogs zu erh�hen

daniel — Fri, 16 Oct 2009 20:27:03 +0000

Wie wir wissen ist das Blogsystem WordPress von Haus aus schon ein sehr mächtiges System welches auch nicht mit Systemresourcen geizt. Die Geschwindigkeit einer Webseite hat zwar keine direkte Auswirkung auf die Google-SERPS, jedoch sehr wohl auf das Surfverhalten der Besucher. Welcher Besucher möchte gerne unendlich warten bis er an die gewünschten Informationen kommt? Ich finde nach wie vor, dass zu gutem SEO auch professionelle Pflege der Seite Voraussetzung ist. Im Bereich WordPress helfen uns viele Plug-Ins welche uns die tägliche Arbeit der Dateioptimierung - sei es CSS oder Javascript - abnimmt. Drei davon möchte ich Euch heute vorstellen.

Script Compressor

Wordpress Plugin Script Compressor - Javascript und CSS beim Ausliefern komprimieren

Wer viel mit extra Plugins arbeitet (z. B. NextGen) weiß, dass viele Plugins separate Javascript Bibliotheken mit in das Template lädt. Ebenfalls werden auch gerne CSS Dateien mitgeladen. Das Problem ist, dass man kaum die Zeit und Lust haben wird, jede einzelne Datei seperat zu optimieren - beispielsweiße mit dem YUI Compressor. Hier greift dieses Plugin mit ein. Es "hakt" sich in den Header und komprimiert alle Javascript- und CSS-Dateien welche in das Template geladen werden. Der Effekt liegt klar auf der Hand - der Server hat zwar etwas mehr CPU-Last, muss aber weniger Daten übertragen, woraus eine geringere Ladezeit resultiert. Das Plugin basiert auf jscsscomp.

Script Compressor bei wordpress.org

DB Cache Reloaded

SQL Abfragen von WordPress mit DB Cache Reloaded cachen

Wordpress arbeitet wie fast alle Content Management Systeme mit mySQL. Wenn man bedenkt, dass jeder Aufruf eine gewisse Zeit in Anspruch nimmt, merkt schnell das sich das bei x Zugriffen am Tag schnell summiert und die Serverlast nach oben schießen lässt. Eine Möglichkeit dieses Problem in den Griff zu bekommen ist DB Cache Reloaded. DB Cache Reloaded cached alle Datenbankabfragen für eine gewisse Zeit und kann diese ggf. viel schneller wiedergeben als z. B. ein HTML-Cache Plugin es könnte. Vorgänger war DB Cache, welches aber nur bis WordPress 2.8 entwickelt wurde.

DB Cache Reloaded auf wordpress.org

WP Super Cache

Mit WP Super Cache WordPress Seiten in Sekundenschnelle ausliefern

Das letzte Plugin was ich vorstellen möchte kennt wohl ziemlich jeder - denn es gehört zu jeder Standard-installation von WordPress dazu - WP Super Cache. Das Plugin generiert für Euch statische HTML-Seiten welches bei einem Aufruf ausgeliefert und somit nicht neu gerendert werden müssen. Auch hier findet man sehr schnell den Vorteil - die Seiten sind sofort vorhanden. Der PHP Compiler muss nicht erst den ganzen Code durchgehen. Unser Besucher wird uns dankbar sein.

WP Super Cache bei wordpress.org

Abschließendes

Es gibt mit Sicherheit noch wesentlich mehr Plugins welche die Geschwindigkeit erhöhen, wer welche kennt kann diese gerne in den Kommentaren posten. Ich werde dann den Post erweitern. Wenn man die Plugins gut einsetzt kann hier wirklich ein Geschwindigkeitsvorteil erreicht werden, wofür uns zukünftige Besucher sehr dankbar sein werden.

... mehr erfahren über

Lade Dir diesen Post als pdf-Datei herunter: 3 Wordpress Plugins um den eigenen Blog zu beschleunigen (124)

Wir gestalten unser Redaxo-Portfolio – Teil 2

daniel — Fri, 09 Oct 2009 06:56:54 +0000

Nachdem wir im letzten Beitrag über Redaxo und Portfolio-Design uns Gedanken um den Ausgangspunkt gemacht haben, betrachten wir heute eine erste nette kleine Erweiterung.

Die Grundidee ist wie so häufig der Blog von Chris Coyier - CSS Tricks. In einem seiner bisherigen Screencasts ging es um das Thema, dass Titel (in diesem Fall H2 - also auch seo-tauglich) nett und elegant das Bild überlagern und somit besser in Szene gesetzt sind, als ein öder Text unterhalb vom Bild.

Usability wie SEO optimierte Index-Seite für ein Redaxo Portfolio

Vorab sage ich, die Änderung wird nur wenige Minuten in Anspruch nehmen, da das Skript von Chris Coyier zum Download angeboten wird und somit auch sofort eingesetzt werden kann. Im Grunde wird unser Gerüst weiter ausgebaut.

Anmerkung: Schaut aber dennoch den Screencast einmal an, dieser geht ca. eine halbe Stunde und vertieft was Ihr gleich machen werdet.

Die Vorbereitung unserer Redaxo-Portfolio-Erweiterung

Nachdem das Demo-Paket von der jQuery-Seite heruntergeladen wurde, entpacken wir diese zunächst lokal da wir nur wenige Dateien aus dem jQuery Plugin benötigen.

Nun wird die Datei "jquery.titleblock.min.js" aus dem js-Ordner in unser Redaxo Content Management System transferiert. Wo am besten muss man selber wissen. Ich z. B. arbeite lokal im files-Ordner - für Kundenprojekte lege ich einen seperaten Template-Ordner an.

Daneben benötigen wir aus der style.css lediglich die paar Zeilen Code, damit wir eine gute Ausgangslage haben um den Titel an unsere Wünsche anzupassen.

Die Arbeitsweise des jQuery Plugins "titleblock"

Die Funktionsweise ist relativ einfach wie auch genial. Da wir ja unsere Shops, Blogs oder sonstige Seiten immer gern barrierefrei und seo-mäßig perfekt aufbauen nutzt das Plugin das title-Tag eines Bildes. Wir werden also gezwungen alle Tags zu verwenden. (link zu usability). Anhand dieses Titles wird nach dem ein Span mit einem darauf folgendem H2 eingefügt, also eine Überschrift. Ob H2 oder H3 kann man selber in der js-Datei definieren, ich denke das benötigt keine weitere Erklärung. Falls doch werde ich dies gerne nachschieben.

Der Einstaz des jQuery Plugins

Zum Glück ist auch die Handhabung des Plugins sehr simpel gehalten. Wir laden wie gewohnt jQuery in unser Template - bevorzugt über das Google CDN, damit unsere Seite dann auch etwas schneller aufgebaut ist. Danach laden wir nur noch unseren Code hinein und fügen ein wenig Script mit bei. Danach ist der größte Zauber schon vorbei. In der Praxis sieht das folgendermaßen aus:

In diesem Teil des Quelltextes geben wir an, dass der Titel nicht gelöscht werden soll, und die Schritgröße auf 24px gesetzt wird.

Anpassen unseres Redaxo-Portfolio-Moduls

Jetzt darf nicht vergessen werden unser Modul von letztem Mal anzupassen. Beim -Tag muss noch ein title-Attribut hinzufügt werden, womit die Zeile dann folgendermaßen aussieht:


print '';

Anpassen des CSS-Codes von Redaxo

Wenn man jetzt das Portfolio Modul neu lädt, sieht man meistens dass das h2-Tag viel zu weit unter dem Bild ist. Sollte dies der Fall sein, müssen wir den top-Wert von h2 (in der CSS - Datei) so anpassen, dass dieser höher ist. In meiner Test-Installation sah der Code dann folgendermaßen aus:


/*
	 CSS-Tricks Example
	 by Chris Coyier

http://css-tricks.com

*/

.image              { position: relative; margin-bottom: 20px; width: 100%; }
h2                  { position: absolute; top: 100px; left: 0; width: 100%; }
h2 span             { color: white; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px;
                      background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding: 10px; }
h2 span.spacer      { padding: 0 2px; background: none; }

Wer schon häufiger auf einer Seite mit H2 arbeitet, kann hierfür in der javascript-Datei auch eine andere Klasse anlegen, z. B.

. Das ist aber nur eine von vielen Möglichkeiten.

Abschließendes

Das soll es für heute wieder gewesen sein. Man sieht es braucht nicht viel um nette Gimmicks und Effekte einzubauen. Beim nächsten Mal gehen wir mit der Usability noch einen Schritt weiter und werfen dem Besucher große Bilder um die Ohren. Bis dahin - Viel Spaß beim basteln.

... mehr erfahren über

Weiterführende Links

Lade Dir diesen Post als pdf-Datei herunter: Wir gestalten unser Redaxo-Portfolio - Teil 2 (150)

SEO und die Sache mit der Usability

daniel — Tue, 06 Oct 2009 08:01:24 +0000

Bevor es im Thema Redaxo Workshop weitergeht möchte ich erst einmal ein Thema dazwischen schieben, was sich hier meiner Meinung nach am besten macht. Wir stellen uns einmal die Frage ob Usability für SEO zwingend nötig ist.

Was ist überhaupt Usability?

Wikipedia referenziert Usability folgendermaßen: Benutzerfreundlichkeit bezeichnet die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einem System (Quelle: wikipedia.de)

Was sagt uns dieser Satz? Wir wollen unserem Besucher ein Gefühl geben, dass er unsere Seite wieder besucht. Wir möchten seinem Gedächtnis einen kleinen Schub geben sich an uns zu erinnern. Dazu zählen Farben, Funktionen, Einizigartigkeiten und vieles mehr. Auf einige Punkte möchte ich in diesem Post eingehen.

Warum kümmern wir uns überhaupt um Usability?

Um es kurz zu fassen - um besser zu sein als andere und Besuchern einen gemütlichen und professionellen Eindruck von uns und unserer Seite zu geben. Halten wir das mal an einem "Real"-Beispiel fest. Stellen wir uns eine kleine Bäckerei vor. Die nette Dame hinter den Tresen steht zwar recht ansehnlich vor uns und erwartet unsere Bestellung, kann aber nicht genau sagen was in dem Produkt XY alles verarbeitet wurde. Dieselbe Bäckerei noch einmal, nur mit "geschultem" Personal. Hier wird uns direkt weitergeholfen, wir werden beraten und bekommen noch andere Sachen empfohlen, die uns schmecken könnten. Jetzt stellen wir uns das ganze noch einmal im Web-Format vor. In vielen Shop spricht man hier von Cross-Selling (um bei obigen Beispiel zu bleiben). Der (zum Beispiel ein xt:Commerce) Shop empfiehlt uns Dinge, die uns auch gefallen könnten. Das ist ein Schritt in Richtung Usability. Wir bieten unserem Besucher einen Mehrwert mit unserer Seite. Das ist aber nur eine Facette der Usability. Stellen wir uns einmal vor, ein blinder Besucher kommt auf unsere Seite. Dieser möchte natürlich dieselben Informationen bekommen wie andere auch. Hier fällt unter anderem auch das Stichwort "Barrierefreiheit". Hierüber hat Martin Mißfeldt, Betreiber des Blogs tagseoblog.de einen interessanten Bericht geschrieben in welchem dargestellt wird, wie eine blinde Person eine Webseite wahrnimmt.

Welche Formen gibt es nun in Sachen Usability?

Hier wird das Thema erst richtig interessant. Es ist alles erlaubt, was hilft die Webpräsenz interessanter und userfreundlicher zu gestalten. Gute Mittel sind zunächst solide Kenntnisse in HTML und CSS. Allein durch diese zwei Grundfaktoren im Webdesign lassen sich viele Sachen userfreundlich realisieren. Man stellt sich z. B. folgende Situation vor:

Wir betreiben einen Blog bzw. eine Webseite zum Thema Kochen, auf welchem wir viele Downloads anbieten, wie z. B. Kochrezepte, Tipps, Verarbeitungshinweise usw. Sagen wir, die Download-Seite umfasst ca. 80 Links. Ist viel oder? Davon abgesehen das das SEO-technischer Murks ist, bleibt aber die Tatsache bestehen dass die Seite sehr lang wird und übersichtlich in welcher Zeile man gerade den Titel des Downloads liest. Jetzt geht der gewiefte SEO oder Webseiten-Betreiber her und verpackt das ganze schon einmal in eine zweispaltige Tabelle - linke Spalte der Datei- bzw. Downloadname und Rechts ein Download-Button (Urzeit-Web lässt grüßen ). Jetzt haben wir das ganze schon einmal Code-Technisch einmal aufgeräumt - sieht auch aufgeräumt aus. Zwar schon super soweit aber immer noch nicht wirklich benutzerfreundlich. Nun kommen unsere Profi-mäßigen CSS-Kenntnisse an die Reihe. Wir vergeben für die einzelnen Zeilen extra Klassen (z.B. jede gerade Zeile Weiß, ungerade Grau). Schon wirkt das wieder etwas professioneller. Um das ganze jetzt noch hervorzuheben, dass wir uns in Zeile XY bewegen, ergänzen wir unseren CSS-Code noch mit einer :hover-Klasse für die Zeile. Jetzt haben wir den Effekt, dass die aktuelle Zeile in der sich unser Cursor befindet farblich hervorgehoben wird.

Erinnern wir uns einmal an Martins Blogeintrag. Um das ganze wirklich barrierefrei und seo-technisch fit zu machen müssen bzw. sollten wir alle Möglichkeiten des Codes nutzen um der Seite genug Informationen zukommen zu lassen. So bietet das Tag "Table" beispielsweise die Option unserer Tabelle eine Zusammenfassung zukommen zu lassen. In diesem Fall heißt der Zauber "summary". Summary ist also für eine Tabelle eine Zusammenfassung, welche auch von Google und Screenreadern gelesen wird. Gar nicht so schwer bisher, oder?

Etwas für das Auge darf es auch sein

Nun ist Usability nicht nur eine Ansammlung von HTML-Code. Mit neuen Methoden wie javascript-Frameworks wie jQuery oder Mootools können wirklich viele Sachen realisiert werden, die einen kleinen Mehrwert für unsere Besucher darstellen. Nehmen wir auch hier wieder ein kleines Beispiel aus der realen Welt. Wir betreiben jetzt statt einer Bäckerei beispielsweise eine kleine Werbeagentur. Die Agentur läuft gut - wir verkaufen Webdesign, Logos und sonstige Printsachen. Da wir von unserer Arbeit überzeugt sind, möchten wir diese auf unserer Webseite werbe-effektiv anbringen in Form eines Portfolios. Anfangs genügt es für jede dieser drei Sparten eigene Seiten bzw. Unterseiten mit Portfolio - Bildern anzuzeigen sowie eine Navigation erstellen zu lassen.

Jetzt zieht einige Zeit ins Land und unsere Agentur wird bekannter. Unser Leistungsspektrum im Web teilt sich nun in Blog-/Shopdesign, Content Management Systeme und statische HTML Seiten. Natürlich können wir jetzt noch mehr Unterseiten anlegen, was unsere Struktur wieder durcheinanderbringt und mit Mehraufwand verbunden ist. Nachteil für den Besucher - er muss mindestens 1x mehr klicken um an gewünschte Informationen zu kommen. Im Falle eines Shops bedeutet dies wieder eine geringere Chance auf einen erfolgreichen Verkauf. Zurück aber zur Agentur. In diesem Fall könnte man mittels jQuery die Ausgabe sortieren, wie Jeffrey Way (Betreiber der Seite nettuts.com) im Screencast "Quick and Easy Filterung with jQuery"zeigt. Jetzt kann unser Besucher gemütlich die Ausgabe nach seinen Wünschen filtern lassen.

Womit kann man die eigene Webseite noch benutzerfreundlicher gestalten?

Jetzt stellt man sich die Frage wo die Vorstellungskraft hier aufhören kann. Ihr könnt mir glauben, je weiter die Technik geht desto mehr Möglichkeiten gibt es. Man muss nur die Idee haben und dies dann umsetzen. Usability bedeutet nicht nur die Erweiterung sondern auch das optimieren von seitentypischen Funktionen. Nehmen wir z. B. die von Apple bekannte Suche. Viele Seiten bieten als Ausgabe eine Ergebnisseite an. Wer die Webseiten von Apple kennt weiß, dass die Suchergebnisse direkt im bzw. unter dem Suchfeld angezeigt werden. Der Besucher muss also nicht erst die Ergebnisseite anschauen. Diese Funktionen gibt es auch für normale Webseiten. Wie man das einbaut ist natürlich die andere Sache.

Warum machen wir das ganze und was hat das mit SEO zu tun?

Mittlerweile haben wir eine gute Vorstellung davon was Wikipedia mit der Erklärung zur Usability uns mitteilen möchte. Webseiten werden für Menschen gemacht. Maschinen bzw. Suchmaschinen ist es egal ob die Seite nun das geile Plugin für dynamische Suchergebnisse oder das Plugin mit der kann-man-kaum-beschreiben-so-geil-ist-das-Funktion. Für eine Suchmaschine wird eine Webseite (jedenfalls in der nächsten Zeit) Code bleiben. Nicht mehr und nicht weniger. Bei einer nett aufbereiteten Seite wird unser Werk aber in die Suchergebnisse einfließen und uns Besucher bescheren. Diese wiederum können etwas mit unserem Angebot an Usability-Funktionen anfangen. Wenn diese jetzt noch super eingesetzt sind haben wir eventuell wieder einen Stammbesucher. Was will man mehr?

Abschließendes

Wie gesagt habe ich das Thema Usability nur knapp angekratzt. In Zukunft wird sicher noch einiges zum Thema Usability und SEO folgen. Das Thema ist wirklich schier unerschöpflich. Nicht zuletzt tragen tolle Blogs dazu bei, dass gutes Wissen sehr schnell verbreitet wird. Einige gute Links findet Ihr im Anhang des Beitrags. Das war es für heute

Edit: Landingpage Optimierung genauso wichtig wie SEO selber

Tameco hat heute einen Beitrag veröffentlicht, der inhaltlich perfekt das widerspiegelt und vertieft was ich in diesem Beitrag über SEO-Usability versucht habe zu erklären. Wer wissen möchte, warum die Optimierung von Landing Pages wichtig auch in Bezug auf SEO ist, dem empfehle ich den folgenden Beitrag Landingpage Optimization so wichtig wie SEO.Wie ich finde ein sehr gelungener Beitrag von Tameco, was wieder einmal zeigt wie wichtig Usability heutzutage ist.

... mehr erfahren über

Weiterführende Links

Lade Dir diesen Post als pdf-Datei herunter: SEO und die Sache mit der Usability (117)

picture."\"/>	$this->description
'; $back .= " Den Artikel findet man unter folgenden Suchbegriffen: "; foreach($this->suchbegriffe as $term) { $back .= ' '.$term.' '; } $back .= '

seo-geek - Webseiten gezielt optimieren

CSS und Javascript richtig ausliefern

Was versteckt sich hinter SPO?

Wie sieht der Plan aus? Wie gehen wir vor?

Vorbereitungen

Fangen wir an

Steuerungsdateien vorbereiten

Demo der beiden Varianten

Abschließendes und künftiges

... mehr erfahren über

5 kostenlose Apps f�r Apple’s iPhone/Ipod Touch (Bereich SEO Apps, Social Apps)

SEO-POST

Serps

Domainer

Facebook

Twitterrific

... mehr erfahren über

HTTP-Requests in WordPress minimieren

... mehr erfahren über

Interview mit Staatsminister Schneider

... mehr erfahren über

Weiterführende Links

Wir bauen uns ein eigenes RSS-Modul f�r xt:Commerce

Möglichkeiten und Ideen eines RSS-Feeds für xt:Commerce

Fangen wir an - Anlegen von mySQL-Tabellen

Theorie und Praxis im xt:Commerce Shop

Variablendeklaration und Konstruktur

Erklärung der Variablendeklaration und des Konstruktors

Hinzufügen des Produktbildes und Erstellen des Beitrags

$this->title

Den Artikel findet man unter folgenden Suchbegriffen: "; foreach($this->suchbegriffe as $term) { $back .= ''.$term.''; } $back .= '

Zwei weitere Hilfsfunktionen

Der Code noch einmal komplett

$this->title

Den Artikel findet man unter folgenden Suchbegriffen: "; foreach($this->suchbegriffe as $term) { $back .= ''.$term.''; } $back .= '

Das Ganze in die categories.php einbauen

Einen Feed für xt:Commerce generieren

Erklärung des Feed-Generators

Abschließendes

Download des xt:Commerce Moduls

... mehr erfahren über

Weiterführende Links

Mehr Traffic f�r den eigenen WordPress Blog

Der Schlüssel zum Erfolg - webnews WordPress Plugin

Handhabung des webnews WordPress Plugins

... mehr erfahren über

Weiterführende Links

Zum fahren ben�tigt man einen F�hrerschein … Rise of the “Medienf�hrerschein”

... mehr erfahren über

3 WordPress Plugins um die Geschwindigkeit des Blogs zu erh�hen

Script Compressor

DB Cache Reloaded

WP Super Cache

Abschließendes

... mehr erfahren über

Wir gestalten unser Redaxo-Portfolio – Teil 2

Die Vorbereitung unserer Redaxo-Portfolio-Erweiterung

Die Arbeitsweise des jQuery Plugins "titleblock"

Der Einstaz des jQuery Plugins

Anpassen unseres Redaxo-Portfolio-Moduls

Anpassen des CSS-Codes von Redaxo

. Das ist aber nur eine von vielen Möglichkeiten.

Abschließendes

... mehr erfahren über

Weiterführende Links

SEO und die Sache mit der Usability

Was ist überhaupt Usability?

Warum kümmern wir uns überhaupt um Usability?

Welche Formen gibt es nun in Sachen Usability?

Etwas für das Auge darf es auch sein

Womit kann man die eigene Webseite noch benutzerfreundlicher gestalten?

Warum machen wir das ganze und was hat das mit SEO zu tun?

Abschließendes

Edit: Landingpage Optimierung genauso wichtig wie SEO selber

... mehr erfahren über

Weiterführende Links

Den Artikel findet man unter folgenden Suchbegriffen:
"; foreach($this->suchbegriffe as $term) { $back .= '
'.$term.'
'; } $back .= '

Den Artikel findet man unter folgenden Suchbegriffen:
"; foreach($this->suchbegriffe as $term) { $back .= '
'.$term.'
'; } $back .= '