Webdesign Tipps

Joomla-Tipp: Einfaches Download-Archiv

Veröffentlicht in Joomla 1.5

Für einen WebDesign Kunden sollte ich ein einfaches, automatisches Download-Archiv erstellen.

  • Automatisch meint dabei: der Kunde muss neue Dateien einfach nur ins Verzeichnis kopieren und schon sind sie auf der Download-Seite verfügbar.
  • Einfach meint: Das Archiv muss wirklich nur die Inhalte des Verzeichnisses darstellen und verlinken.

Eine geeignete Joomla!-Komponente scheint es da für mich nicht zu geben (entweder können sie den Automatismus nicht oder sie schießen weit über das Ziel hinaus oder aber sie laufen nur im legacy mode). Schließlich habe ich eine Lösung gefunden, die durch den Apache-Server selbst zur Verfügung gestellt wird:

 

Verzeichnisansicht mit dem Apache Modul mod_autoindex 

Das Apache Modul mod_autoindex erzeugt eine tabellarische Liste aller in einem Verzeichnis enthaltenen Dateien; der Dateiname ist klickbar, wodurch der Download ausgelöst wird. Zusätzlich können ungewünschte Dateien ausgeblendet werden. Eine Header-Datei mit CSS-Formatierung und einleitenden Worten kann eingebunden werden.

 

So geht's:
  • Downloadverzeichnis erstellen: z. B. meineDomain.de/downloads
    • Datei .htaccess hineinkopieren (steuert, wie und welches Verzeichnis ausgelesen wird)
    • Datei header.htm erstellen und hineinkopieren (enthält den Header der Seite und das Stylesheet)
       
  • in Joomla! einen neuen Menüeintrag Downloads erzeugen:
    • Typ=Wrapper
    • Link auf Download-Verzeichnis (meineDomain.de/downloads)

 

 

Hier die Details:
Inhalt von .htaccess

Options +Indexes
DirectoryIndex index.php index.html

#Header-Datei mit CSS und einleitendem Text
HeaderName header.htm

# diese Dateien nicht anzeigen (/.. = parent directory)
IndexIgnore *.htm .ht*
IndexIgnore /..

# Sortierung absteigend nach Dateiname
IndexOrderDefault Descending Name

#Description nicht anzeigen -> bewirkt, dass kompletter Tabellenkopf nicht angezeigt wird
IndexOptions SuppressDescription
IndexOptions XHTML

# Download erzwingen für angegebene Dateitypen (ansonsten wird das Ziel im iFrame angezeigt)
<FilesMatch "\.(txt|pdf|doc|xls)$">
ForceType application/x-download
</FilesMatch>

 

Weitere Informationen zur Verwendung des Moduls mod_autoindex gibt es unter:

 Außerdem sehr hilfreich war mir ein Beitrag im joomla-portal-Forum.

 

 

Komfort

Zusätzlichen Komfort gibt es bei dieser Lösung nicht. Ich hatte zum Beispiel an eine Lösung für Spracheinstellungen gedacht (Ausgabe gibt es ausschließlich in englisch, daher blende ich den Tabellenkopf ganz aus) oder an zusätliche Felder für Informationen zu den Dateien (ich lege jetzt alle Informationen in den Dateinamen der Download-Datei).

 

So sieht's aus:

Link: Download-Archiv

 

 

 

 

Sie benötigen professionelle Ünterstützung bei Joomla? Schreiben Sie mir einfach und ich berate Sie gerne!

Warum ein CMS mit Joomla!

Veröffentlicht in Joomla 1.5

Gegen ein Content Management System mit Joomla! gibt es im Webdesign genau einen Grund! Sie haben eine kleine, übersichtliche, statische Website, auf der sich praktisch nie etwas ändern soll.

Für ein Content Management System mit Joomla! Gibt es haufenweise gute Gründe:

  • Sie können nach einer kurzen Einarbeitungszeit Ihre Inhalte (und nicht nur das) selbst pflegen.
  • Die Entwicklungsumgebung ist Open Source und somit völlig kostenlos
  • Sie haben nahezu unbegrenzte Erweiterungsmöglichkeiten (vom Online Shop über Fotogalerien bis zu Diskussionsforen)

 

 

Warum ich das kann!
Schreiben Sie mir einfach und ich berate Sie gerne!

 

Grafiken und Bilder für Google Bildersuche optimieren

Veröffentlicht in Webdesign spezial

Damit die Bilder einer Website besser im Suchergebnis der Google Bildersuche erscheinen, kann der Webdesigner diese mit einigen einfachen SEO-Maßnahmen optimieren. Hier gelten eigentlich die gleichen Regeln, die auch sonst im Webdesign bei der Suchmaschinenoptimierung gültig sind (siehe Tipps zur Suchmaschinenoptimierung). Zusätzlich gibt es dann noch einige Besonderheiten speziell für die Bilder.


1. Bilder für die Bildersuche optimieren

  • Auflösung mindestens 200 x 300 Pixel
  • Auflösung maximal 1280 x 1020 Pixel
  • gerne ein breites Bildformat (4:3 oder mehr) verwenden, um aufzufallen
  • Suchbegriffe im Dateinamen unterbringen (bild1.jpg und Ähnliches unbedingt vermeiden)
  • Gebräuchliche Dateiformate verwenden (jpg, gif, png, bmp)


2. Bilder Suchmaschinen-gerecht einbinden

  • Alt-Attribute verwenden
  • Title-Attribut verwenden
  • einfache Verzeichnisstruktur verwenden
  • Gerne beschreibenden Text unter Verwendung der Suchbegriffe in der Nähe des Bildes einsetzen


3. Administrative Arbeiten

  • Indizierung des Images-Verzeichnisses in robots.txt erlauben
  • image Sitemap erstellen und bei Webmaster-Tool einreichen oder in robots.txt verlinken (sitemap: http://www.meinesite.de/meine-image-sitemap.xml)


4. Geduld, Geduld, Geduld...

  • Nach einigen Tagen hat Google die Bilder gefunden.

CSS-Tipp: negativer z-index

Veröffentlicht in Webdesign spezial

Mit der CSS-Eigenchaft z-index wird im Webdesign die Reihenfolge festgelegt, in der sich überlappende Elemente eines html-Dokumentes dargestellt werden. Dabei überlappt das Element mit dem höheren z-index dasjenige Element mit dem niedrigeren z-index. z-index=3 wird also von z-index=5 überlagert oder verdeckt.

#container{
z-index: -1;
}

Hier sind laut CSS-Doku auch negative Werte möglich, wobei dies von allen Browsern unterstützt werden soll (mehr Infos zum z-index z. B. im selfhtml-Wiki).

Meine Webdesign-Praxis hat allerdings ergeben, dass es hier mit einigen Browsern Probleme geben kann. In einem Beispiel war ein Bild in einem DIV-Container platziert, dem ein negativer z-index zugewiesen war. Hier funktionierte der Link des Bildes auf dem Safari-Browser nicht mehr, indem das Bild einfach nicht sensitiv für den Mauszeiger war. Nach Änderung des z-index auf einen positiven Wert funktionierte der Link dann wieder.

#container{
z-index: 1;
}

Seither verwenden wir den negativen z-index nicht mehr.

Tipps zur Suchmaschinenoptimierung (SEO)

Veröffentlicht in Webdesign spezial

Suchmaschinenoptimierung ist nichts, was man im Webdesign mal soeben nebenbei erledigen kann, sondern ein lang andauernder Prozess, der eigentlich niemals abgeschlossen ist. Hier habe ich einige wichtige Maßnahmen zur Suchmaschinen-Optimierung aufgelistet. Diese Liste erhebt keinen Anspruch auf Vollständigkeit und wird nach und nach ergänzt.

 

OnPage Optimierung

On page Optimierung findet auf der Website, also „On the Page“ statt. Dies meint alle Maßnahmen, die man direkt mit der richtigen Gestaltung der Website durchführen kann.

 

Schlüsselwörter/Keywords festlegen

Dies ist eine sehr aufwendige, aber auch sehr lohnenswerte und sicherlich auch die wichtigste Arbeit. Für jede einzelne Seite der Website müssen die Keywords oder Schlüsselwörter festgelegt werden. Dies geht gut in einem Brainstorming, in das man auch Kunden und Fach-ferne Personen einbeziehen sollte, um möglichst passende Begriffe zu finden. Hier sollen gerne auch die „unmöglichsten“ Begriffe, Wortgruppen oder kurzen Sätze notiert werden. Aus den so entstandenen Keyword-Listen werden anschließend die 5 bis 20 wichtigsten Keywords selektiert.

 

Title

Der Titel einer Seite wird im Kopfbereich des Seitenquelltextes im Title Element angegeben. Dieser Titel steht z. B. neben dem Favicon in der Registerkarte des Browsers, in den Lesezeichen und bei Google als klickbare Überschrift. Bis zu ca. 65 Zeichen werden bei Google angezeigt, der Rest wird abgeschnitten.

 

Meta Description

Dies ist die Beschreibung der Seite. Sie wird bei Google unter der URL bzw. dem Title abgebildet. Die Description darf maximal 255 Zeichen inkl. Leerzeichen enthalten, wovon die ersten 150 Zeichen bei Google angezeigt werden. Gut ist ein kurzer, prägnanter, beschreibender Text, in dem die wichtigsten Keywords bzw. Schlüsselworte zu dieser Seite untergebracht sind.

 

Meta Keywords

Schlüsselwörter (einzelne Wörter, Wortgruppen oder ganz kurze Sätze) zu dieser Seite. Klein geschrieben, Komma-separiert, max. 20 Stück (siehe Keywords festlegen).

 

Interne Verlinkungen

Mit einer guten Navigation bzw. einem guten Menü ist die interne Verlinkung bereits gewährleistet. Hierbei sollte auf grafische Schaltflächen lieber verzichtet werden, da diese bei ausgeblendeten Grafiken nicht mehr lesbar sind. Kann nicht auf Grafiken verzichtet werden, so müssen dringend die Alternativ-Texte zugewiesen werden. Bei einer Navigation mit Textlinks kann der Title eines Links ebenfalls mit Keywortern gerne auch aus kleinen Sätzen gespickt werden. Da der Title als Mouseover-Text erscheint kann hier zusätzliche Information für den Benutzer untergebracht werden.

 

Meta Author

Hier sollte der Firmenname bzw. die Firmenbezeichnung untergebracht werden

 

Schlüsselwörter in Texten hervorheben

Hervorgehobene Texte erhalten bei Suchmaschinen eine besondere Gewichtung. Möglich wäre z. B. fett, kursiv oder als Aufzählung. Schlüsselwörter die verwendet werden sollten siehe Keywords festlegen.

 

Schlüsselwörter in Alt-Tags und Title-Tags

Keywords können auch gut in den Alt-Texten von Bildern und im Title von Links untergebracht werden, diese erscheinen z. B. auch, wenn man mit der Maus über das Bild bzw. den Links fährt (Mouseover). Hier können gerne auch ganze Sätze verwendet werden.

 

Duplicate Content vermeiden

"Duplicate Content" bedeutend nichts anderes als "Doppelter Inhalt" und meint, dass zwei identische Texte unter zwei verschiedenen URLs im Internet verfügbar sind. Dies führt bei Suchmaschinen im besten Fall zur Abwertung, im schlimmsten Fall zum Ausschluss. Beispiele:

  • www.meineSeite.de und meineSeite.de (kann durch einen Eintrag in der htaccess-Datei verhindert werden)
  • Normalansicht und Druckansicht (die Druckansicht sollte für Robots gesperrt werden)
  • Gleiche Website unter zwei verschiedenen Domains (keine Umleitung von einer Domain auf die andere (außer permanent Redirect)

Mehr Info dazu im Beitrag "Doppelten Content vermeiden". 

 

Schlüsselwörter geschickt platzieren

Z. B. in der URL, in den Meta Tags, im Content (Texte) der Website, in den Alt-Tags, in Ankertexten von Links, ...

 

XML-Sitemap

Mit XMap kann sowohl eine Sitemap im html-Format zur Ausgabe im Browser erzeugt werden, als auch eine im XML-Format. Diese XML-Sitemap kann bei Google angemeldet werden, um sicherzugehen, dass Google auch alle Seiten der Website findet.

 

Off Page Optimierung

Mit Off-Page-Optimierung sind Maßnahmen zur Suchmaschinenoptimierung gemeint, die nicht direkt auf der Website durchgeführt werden können. Zum Beispiel:

  • Google Webmaster Tools (Website anmelden) und Google Analytics einsetzen
  • Seriöse Linktauschpartner finden, auf keinen Fall Angebote mit unseriösen Versprechungen annehmen
  • Eintrag in seriöse Web-Kataloge.

 

 

Sie benötigen Hilfe bei der Suchmaschinenoptimierung? Dann schreiben Sie mir einfach und ich berate Sie gerne!