In Österreich habe ich die Firma VerTrend Media Production GmbH gefunden welche den Video Newsletter als festen Bestandteil im Angebot hat.

Weitere Artikel:

• Google PageRank
• Webdesign-Mythen und hartnäckige Irrtümer
• Horizontales CSS-Menü
• Webhosting muss gefunden werden
• Barrierefreie Menüs
• HTML

Mein Blog websache:blog ist nun nicht mehr unter www.websache.at/blog, sondern unter der eigenen Subdomain blog.websache.at zu erreichen. Ich habe die Gelegenheit gleich genützt um dieses von Joomla 1.5 zu trennen, und habe den Blog mit Wordpress umgesetzt.

Warum ein riesen Joomla Fan wie ich von Joomla weggeht? Die Antwort ist einfach. Ich bin bei Joomla beglieben, aber obwohl Joomla sehr gut anpassbar und durch seine zahlreichen Erweiterungen so gut wie jede Funktion erfüllen kann (Online-Shop, Blog etc), war es mir einfach zu umständlich, ja zu blöd um mein bestehendes CMS zu zwingen auch ein Blog zu werden.

Die erforderlichen Joomla Add-Ons für Comments, Trackback etc waren entweder kostenlos aber schlecht/unzureichend oder kostenpflichtig. Doch warum sollte ich das Rad neu erfinden wenn Wordpress seit Jahren eine sehr gute Lösung anbietet und für einen Blog massgeschneidert ist.

Ich wünsche euch viel Spass beim lesen und freue mich auf eure Kommentare.

Weitere Artikel:

• Google PageRank
• Video Newsletter
• PNG Transparenz Anzeige im InternetExplorer 6 fehlerhaft
• Webhosting muss gefunden werden
• HTML
• Horizontales CSS-Menü

Ich kann euch nur wärmstens empfehlen seine Beiträge zu lesen.

Hier meine Empfehlungen:

• Der 72dpi Mythos
• Dinge, die man einfach nicht mehr macht …

Weitere Artikel:

• PNG Transparenz Anzeige im InternetExplorer 6 fehlerhaft
• XML - Sitemap Generator
• Barrierefreie Menüs
• Horizontales CSS-Menü
• HTML
• Relaunch meines Blogs

Die Funktion einer Heatmap ist leicht Erklärt. Durch die Einbindung eines kurzen JavaScript-Codes werden die Klicks des User gespeichert und später grafisch dargestellt. Je nachdem wie oft auf den jeweiligen Bereich geklickt wurde, umso mehr geht eie Farbe ins Rote. Der Vorteil dabei liegt darin, dass nicht nur Klicks auf Links gemessen werden, sonder alle während des Aufenthalts durchgeführten Klicks dargestellt werden.

Dadurch lassen sich Bereiche Ermitteln welche vom User nicht beachtet oder falsch intepretiert/verwendet werden. Ich werde bei einem weiterem Beitrag näher auf den Nutzen dieser netten Werkzeuges eingehen. Vorerst will ich euch dieses Präsentieren und die Installation erklären.

Installation von Clickheat - Heatmap

Nach dem Download von Clickheat erhält man ein Archiv mit einem Ordner mit dem Namen “clickheat” (375,1KB). Prinzipiell muss mal lediglich diesen Ordner in das Stammverzeichnis der zu messenden Homepage kopieren. Es ist keine Datenbank erforderlich, der Server sollte lediglich PHP und die GDLibrary unterstützen.

Nachdem wir den Ordner clickheat auf unseren Webspace kopiert haben, überprüfen wir ob die Unter-Ordner “config“, “cache” und “logs” beschreibbar sind. Bei allen Anbietern funktionieren die Rechte CHMOD 777, obwohl diese mitunter ein Sicherheitsrisiko darstellen können. Bitte informiere dich gegebenenfalls bei deinem Provider.

Nun rufen wir den Ordner einfach im Browser. Zum Beispiel http://www.maine-domain.com/clickheat/. Wenn der Ordner “config” beschreibbar ist erhalten wir die folgende Ausgabe:

Nun klicken wir einfach auf “Next step: configuration” und gelangen zur Konfiguration.

Bei der Konfiguration tut sich nicht weltbewegendes und man kann im Regelfall gleich zum Punkt “Login parameters” springen und den gewünschten Benutzernamen und das Passwort wählen. Hier kann man den Zugang für einen Administrator und für einen Benutzer mit reinen Leserechten definieren. Wenn Benutzername, Passwort eingegeben wurden, und die beiden Ordner logs und cache beschreibbar sind, klicken wir auf “Check configuration” und anschliessend auf “Save configuration“.

Nun können wir uns mit den gewählten Benutzerdaten anmelden und kommen zur Benutzeroberfläche.Da wir noch keine Homepage für die Statistik definiert haben, erhalten wir gleich die Fehlermeldung “No logs for the selected period…”. Wir klciken einfach auf “… Did you correctly installed Javascript code on your webspace” und erhalten darunter die Eingabemaske für die Erstellung eines Website-Profils:

Bei “Website name” Tragen wir einen aussagekräftigen Namen ein und suchen uns aus wie die einzelnen Seiten unserer Homepage benannt werden. Ich bevorzuge hier die Einstellung “use webpage’s URL”. Bei der nächsten Option legen wir fest wieviele Klicks pro Besucher und pro Seite gewertet werden. 0 bedeutet unbeschränkt.

Während wir die Einstellungen vornehmen wird in echtzeit darunter der zu verwendene JavaScript code aktuallisiert.

Nun müßen wir diesen Code kopieren und in den Quelltext unserer Homepage kopieren. Zu beachten ist dass der Code ganz am Ende, am Besten vor dem Schluss-Tag zu kopieren ist, und bei statischen Internetseiten in jede einzelne, zu bewertende Seite zu kopieren ist. Nachdem wir die Seite in welcher der Code kopiert worden ist mindestens einmal besucht haben, erscheint die Seite auch in unserer Clickheat-Benutzeroberfläche.

Weitere Artikel:

• Webdesign-Mythen und hartnäckige Irrtümer
• Barrierefreie Menüs
• Google PageRank
• Diagramme mit CSS
• PNG Transparenz Anzeige im InternetExplorer 6 fehlerhaft
• XML - Sitemap Generator

PNG gibt es seit 1996 und ist vor allem für die Darstellung im Internet bestens geeignet. Was PNG vor allem qualifiziert ist die Verbingun von GIF und JPG Eigenschaften wie reduzierte Farbwahl und Transparenz verbunden mit guter Qualität. Im Gegensatz zu GIF Grafiken ist die Transparenz auch viel besser gelöst und man benötigt keine „Rahmenfarbe“ mehr wie in den alten GIF-Zeiten.

Hier Ein Beispiel:

GIF

PNG

Wenn du die PNG Grafik nicht sehen kannst, oder die zweite Grafik mit einem blauen Rand umrahmt ist, dann ist dieser Artikel genau das richtige für dich. Die Darstellung wie Sie aussehen sollte:

IE 6 und sein Darstellungsfehler bei PNG-Grafiken

Nun kann der Internet Explorer in der Version 6 mit der AlphaTransparenz von PNG nicht umgehen und zeigt stattdessen die Vordergrundfarbe an. Bei IE 7 unter Vista und ein paar anderen exotischen Umgebungen (bestimmte IE7 Versionen und SP Versionen) zeigt der Internet Explorer die PNG Grafiken schlicht weg gar nicht mehr an.

Problemlösung mittels PNG IE6 Hack

Die derzeit beste Möglichkeit dieses Problem zu lösen ist der IE PNG Alpha Fix v1.0 von Angus Turnbull.

Verwandte Artikel:

• Diagramme mit CSS
• Horizontales CSS-Menü
• Google PageRank

Um ein einfaches Diagramm oder eine Skala in HTML darzustellen, verwenden wir am besten das

<dl>-TAG. Diese Art einer Liste nennt sich Definitionsliste und ist für unseren Zweck optimal geeignet. Man kann die Liste unter anderem für Produktbeschreibungen, Link-Beschreibungen und auch komplexere Wertdarstellungen verwenden.

Hier ein Beispiel:

<dl>
<dt>Objekt</dt>
<dd>Objektbeschreibung</dd>
</dl>

Praxisorientiertes Beispiel:

<dl>
<dt>Lusftfeuchtigkeit</dt>
<dd>81%</dd>
</dl>

Die Darstellung dieser Liste kann jetzt schon mittels CSS auf verschiedene Art verändert werden. Wir wollen aber noch eins drauf setzen und bauen daher innerhalb von dem

<dl>
<dt>Luftfeuchtigkeit</dt>
<dd>
<div>81%</div>
</dd>
</dl>

/* Wir definieren die Graphendarstellung: */
 
dl {
font-family:verdana;
font-size: 11px!important;
}
/* Definition der Beschreibung*/
dt {
position: relative;
clear: both;
display: block;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
/* Definition des Hintegrundes der Skala */
dd {
position: relative;
display: block;
float: left;
width: 220px;
height: 20px;
margin-bottom: 15px;
}
/* .. und die Wert-Anzeige */
dd div {
height: 20px;
line-height: 20px;
margin-right: 10px;
font-size: 11px;
text-align: right;
padding-right:5px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}

Verwandte Artikel:

• Horizontales CSS-Menü
• Barrierefreie Menüs
• PNG Transparenz Anzeige im InternetExplorer 6 fehlerhaft
• Google PageRank

Hier wollen wir einige Beispiele für horizontale CSS Menüs präsentieren.

Alle Menüs bauen auf folgendes HTML-Gerüst auf:

1
2
3
4
5
6

<ul class="menu1">
	<li><a href="#">Home</a></li>
	<li><a href="#">Inhalt</a></li>
	<li><a href="#">Info</a></li>
	<li><a href="#">Kontakt</a></li>
</ul>

Erstes Beispiel:

So sieht das horizontales CSS Menü EINS aus

Der Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

ul.menu1 {
   text-align: center;
   border-bottom: solid 1pc #666666;
   width: 80%;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 25px; }
 
.menu1 li {
   display: inline;
   padding-bottom: 4px; }
 
.menu1 li a {
   font-size: 11px;
   color: #000000;
   text-decoration: none;
   border-top-width: 1px;
   border-right: solid 1px #FFFFFF;
   border-left: solid 1px #FFFFFF;
   padding-top: 2px;
   padding-right: 2px;
   padding-left: 2px; }
 
.menu1 li a:hover {
   color: #FF6600;
   border: solid 1px #666666;
   border-bottom:none;
}
 
#v2 a:hover {
   font-size: 16px;
}

Zweites Beispiel

So sieht das horizontales CSS Menü ZWEI aus

Der Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

ul.menu1 {
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #666666;
   width: 80%;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 25px;
   clear: both;
   margin-top: 25px; }
 
.menu1 li {
   display: inline;
}
 
.menu1 li a {
   display: block;
   float: left;
   font-size: 11px;
   padding-top: 3px;
   padding-right: 5px;
   padding-bottom: 3px;
   padding-left: 5px;
   color: #FFFFFF;
   background-color: #666666;
   text-decoration: none;
   border: solid 1px #666666;
   border-left: solid 1px #FFFFFF;
}
 
.menu1 li a:hover {
   color: #666666;
   background-color: #FFFFFF;
   border-color: #666666;
}
 
#v2 a:hover {
   padding-right: 23px;
}

Verwandte Artikel:

• Diagramme mit CSS
• PNG Transparenz Anzeige im InternetExplorer 6 fehlerhaft
• Google PageRank
• Barrierefreie Menüs

Für all diejenigen, die sich die Arbeit nicht machen wollen eine Sitemap manuell zu erstellen oder ein entsprechendes Script nicht einsetzten können oder wollen, empfiehlt es sich auf kostenlose Online-Sitemap-Generatoren zurückzugreifen.

Wir haben uns ein wenig umgeschaut und möchten Ihnen die Seite http://www.xml-sitemaps.com/ empfehlen. Auf dieser Seite ist es möglich eine sitemap in zwei einfachen Schritten für maximal 500 Dokumente zu erstellen. Nach dem Sie Ihre Internetadresse eingegeben haben, müssen Sie je nach Größe Ihrer Internetseite einige Minuten warten bis alle Seiten erfasst wurden. Danach können Sie den XML-Code kopieren und eine normale Text-Datei (Reintext - kein .doc Dokument.) erstellen, den Code einfügen und das Dokument mit der Endung .xml speichern.

Z.B: sitemap.xml

Diese Datei legen Sie nun einfach auf Ihren Webspace der jeweiligen Internetseite.

XML Sitemap für Joomla 1.5

Unter Joomla 1.5 ist die Erstellung einer Sitemap mit der Komponente XMAP denkbar einfach. Nach der Installation der Komponente ist eine sitemap für das Hauptmenü bereits erstellt. Unter kompontenten > xmap ist es möglich verschiedene Sitemaps zu erstellen, wobei jede siteman eine ID zugewiesen bekommt.

Um diese auszugeben bzw. einer Suchmaschinen bekanntzugeben braucht man lediglich die richtige URL einzugeben, welche nach dem folgenden Schema aufgebaut ist:

http://www.domain.at/index.php?option=com_xmap&view=xml&no_html=1&sitemap=1

sitemap=1 definiert das Menü, das in der Sitemap dargestellt werden soll. 1 ist die Standard ID für das Hauptmenü nach der Installation von XMAP.

XML Sitemap für Wordpress

Zum erstellen einer XML-Sitemap unter Wordpress 3.1.x empfehe ich die Google XML Sitemaps von Arne Brachhold.. Dieses Plugin its schnell installiert und bietet Unterstützung für Google, Yahoo MSN Live und Ask. In der umfangreichen aber einfache Einstellungs-Oberfläche kann man festlegen welche Bereiche des eigenen Blogs in der Sitemap veröffentlicht werden sollen, und mit welcher Priorität. Zudem kann man die Suchmaschinen automatisch über Änderungen informieren.

XML Sitemap unter Mac OS X

Für Alljene, die lieber mit lokalen Programmen arbeiten und oft XML-Sitemaps erstellen müssen, empfehlen wir unter Mac OS X das kleine Programm iGooMap 1.6.

Weitere Artikel:

• Clickheat - Heatmaps Installation
• Barrierefreie Menüs
• Relaunch meines Blogs
• HTML
• Diagramme mit CSS
• Webdesign-Mythen und hartnäckige Irrtümer

Der Google© PageRank

Der Google© PageRank ist eine Gewichtung Ihrer Seite, welcher durch einen Google©-eigenen Algorithmus ermittelt wird. Dabei wird durch verschiedene Faktoren die Relevanz Ihrer Internetseite im gesammten und in Relation zu bestimmten Suchbegriffen ermittelt.

Der Google© PageRank selbst ist eine Art Schlussgewichtung dieser Komponenten und drückt die indirekt Wichtigkeit Ihrer Seite aus, womit auch die Reihung Ihrer Internetseite bei Suchergebnissen von Google© beeinflusst wird.

PageRank Skala und Gewichtung

Der PageRank von Google hat eine Skala von 0 bis 10, wobei 10 das Beste ist. Der PageRank teilt einer Internetseite eine Gewichtung zu, wobei eine Seite umso mehr Gewicht bekommt, je mehr andere Seiten auf diese verweisen, und je größerer die Gewichtungen der verweisenden Seiten sind. Der verwendete Algorithmus wird ausführlich unter wikipedia - PageRank beschrieben.

Einfach ausgedrückt:

Seite A hat einen PageRank von 5. Seite B hat noch keinen PageRank. Seite A verweist auf Seite B und verliert dadurch etwas an PageRank, wobei Seite B etwas an PageRank erhält. Damit also Seite A keinen Nachteil hat, sollte Seite B auch gleichzeitig wieder auf Seite A verweisen.

Um den PageRank von Google zu ermitteln, kann man die Google Toolbar verwenden, oder auf die verschiedenen Abfragemodule zurückgreifen. Hier eine Abfrage die wir zur Verfügung stellen:

Wie bekomme ich einen guten PageRank?

Suchen Sie möglichst viele Seite welche bereits einen guten PageRank haben, und vereinbaren Sie einen Linktausch mit dem Betreiber der Seite. Allgemein sollten Sie auf folgende Punkte achten:

• desto mehr Seite auf Ihre Seite verweisen, desto höher wird ihr PageRank
• Achten Sie darauf dass die Seite welche auf Ihre Seite verweisen einen guten PageRank haben (mindestens 4)
• Auch wenn die verweisenden Seiten keinen guten PageRank haben, ist es dennoch gut für Sie
• Wenn Sie bereits einen guten PageRank haben, achten Sie darauf dass die “schlechteren” Seiten auf welche Sie verweisen ebenfalls auf Sie verweisen!

Verwandte Artikel:

• PNG Transparenz Anzeige im InternetExplorer 6 fehlerhaft
• Diagramme mit CSS
• Horizontales CSS-Menü

Ein barrierefreies Menü zeichnet sich durch folgende Eigenschaften aus:

• Es ist eine Überschrift vorangestellt
• als HTML-Tags wird UL, LI & A verwendet
• Beim A-Tag wird ein Title Atrribut angegeben
• Für die Bennenung des Menüeintrages wird Text verwendet

Im Klartext soll das heißen, dass folgende veraltete Techniken NICHT verwendet werden sollten:

• Tabellen (table - Tag)
• Bilder für den Inhalt
• kein img-Tag

Ein Beispiel, das nicht barrierefrei ist:

<table border="0">
<tbody>
<tr>
<td>
                <a title="Menüeintrag Eins" href="zieladresse">
                    <img src="images/menu1.gif" alt="Menüeintrag Eins" />
                 </a></td>
</tr>
<tr>
<td>
                <a title="Menüeintrag Zwei" href="zieladresse">
                    <img src="images/menu2.gif" alt="Menüeintrag Eins" />
                 </a></td>
</tr>
</tbody></table>

Ein barrierefreies Menü:

<h1>Hauptmenü</h1>
<ul>
	<li><a title="Menüeintrag Eins" href="zieladresse">MENÜNAME</a></li>
	<li><a title="Menüeintrag zwei" href="zieladresse">MENÜNAME</a></li>
</ul>

Vorteile von barrierefreien Menüs gegenüber klassischen Table-Manüs:

• Das Aussehen kann jeder Zeit leicht und schnell geändert werden
• Es ist einfach verschiedene Layouts für verschiedene Ausgabemedien anzufertigen (Monitor, Drucker, Brailleschrift-Lesegeräte)
• Die Menüs sind Suchmaschinen freundlicher und werden BESSER Bewertet.

Freie Gestaltungsmöglichkeiten optischer Anpassung

Erinnern wir uns an den Code eines Liste-Menüs:

<h1>Hauptmenü</h1>
<ul>
	<li><a title="Menüeintrag Eins" href="zieladresse">MENÜNAME</a></li>
	<li><a title="Menüeintrag zwei" href="zieladresse">MENÜNAME</a></li>
</ul>

damit erhalten wir folgende Ausgabe:

Unser Menü sieht jetzt natürlich nicht sehr attraktiv aus, also wollen es mit CSS etwas verschöner:

* {
   margin: 0px;
   padding: 0px;}
li {
   list-style-type: none;
}

Mit diesen zwei Angaben erreichen wir vorerst wichtige allgemeine Vorteile. Mit *{…} sprechen wir alle Elemente in unserem HTML Dokument an und definieren, dass diese keine Innen- und Außenabstände haben. Das ist sehr vorteilhaft, da die verschiedenen Browser verschieden große Innen- und Außenabstände generieren. Indem wir dies verhindern, können wir viel genauer Arbeiten. Mit der zweiten Angabe legen wir lediglich fest, dass unsere Liste keine Listenzeichen hat.

Damit erhalten wir folgendes Aussehen:

Als nächstes wollen wir dem Ganzen ein wenig Farbe geben:

h1, ul {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 99%;
    margin-bottom: 11px;
    width: 160px;}
ul li a {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #FF6600;
    font-size: 12px;
    padding: 2px;
    border: 1px solid #990000;
    display: block;
    height: 15px;
    margin-bottom: 2px;
}

Unser Menü sieht nun bereits etwas besser aus. Wenn uns die Überschrift “Hauptmenü” stört, wir aber dennoch wegen Google diese im Code belassen wollen, dann können wir sie für das menschliche Auge einfach verschwinden lassen:

h1 {
    display: none;
}

Mehrere Ebenen

Oft sind Untermenüs bei Navigationen erforderlich und sinnvoll. Um diese ebenfalls barrierefrei zu gestalten, müßen wir den folgenden Code verwenden:

<h1>Hauptmenü</h1>
<ul>
	<li>
           <a title="Menüeintrag Eins" href="zieladresse">MENÜ</a>
<ul>
	<li>
                <a title="Menüeintrag Eins" href="zieladresse">UNTER-MENÜ</a></li>
</ul>
</li>
</ul>

Grenzenlose Gestaltung bei UL-Menüs mittels CSS

Auf diese Weise können wir sowohl horizontale wie auch vertikale Menüs gestalten. Auch dynamische Menüs wie Drop-Down-Menüs lassen sich mit der einfachen Kombination von HTML und CSS erzeugen. Auch Hintergrundbilder können für die Menüeinträge verwendet werden, womit wir freie Hand bei der Gestaltung des Aussehens haben.

Verwandte Artikel:

• Diagramme mit CSS
• Horizontales CSS-Menü