Skip to main content

Autor: beate

Joomla Webdesign Portal für www.kreativ-portal.de

Screenshot Joomla Webdesign Portal für www.kreativ-portal.deProjekt aus dem Bereich Webdesign Online Portal

Dieses ist ein eigenes Webdesign Projekt. Im Online-Portal www.kreativ-portal.de findet man kreative Anleitungen zum Basteln, Handarbeiten, Werken und allem, was irgendwie kreativ ist. Jeder kann sich anmelden und mitmachen und so seine eigenen Ideen vorstellen oder Kommentare zu anderen Ideen abgeben. Für die Zukunft sind weitere Eweiterungen geplant.

Status:
  • in ständiger Erweiterung
Aufgabenstellung für die neue Site:
  • User-Portal
  • Interaktives Online-Formular zur Eingabe und Änderung von Anleitungen mit BreezingForms
  • Verwendung eines Layouts, das auch auf mobilen Endgeräten ansprechend aussieht (responsive Webdesign)
  • Verwendung eines Content Management Systems (Joomla)
  • Suchmaschinenoptimierung (SEO)
  • Veröffentlichung bei einem bestehenden Webhoster

K2 Extrafelder per BreezingForms Integrator füllen

In einem Webdesign-Projekt mit Community Portal verwende ich K2 zur Ausgabe der Beiträge im Frontend. Die Beiträge werden von den Mitgliedern selbst im Frontend eingegeben. Leider ist die Eingabe der Beitrags-Inhalte über das Frontend von K2 nicht so flexibel und leistungsfähig, wie ich es benötige, daher verwende ich BreezingForms 1.8.4 , um die Beiträge einzugeben.

Der User gibt die Inhalte seines Beitrages über ein BreezingForms Quick Mode Formular ein, der BreezingForms Integrator sorgt anschließend dafür, dass die Daten in die Joomla K2 Tabelle dbpräfix_k2_items geschrieben werden.

Ruft man diese Tabelle in phpMyAdmin auf, so sieht man, dass alle Extrafelder gemeinsam in einem Datenfeld „extra_fields“ gespeichert sind, was dann ungefähr so aussieht:

[{"id":"1","value":"Content 1"},{"id":"2","value":"Content 2"},{"id":"3","value":"Content 3"},{"id":"4","value":"Content 4"},{"id":"5","value":"Content 5"}]

So ist es also nicht ohne weiteres möglich, die einzelnen Extrafelder direkt anzusprechen.

Um diese Extrafelder nun trotzdem mit dem Integrator zu füllen, habe ich in BreezingForms ein verstecktes Feld (hidden_input) erstellt, in das über ein Script automatisch die Inhalte aller Extrafelder gesammelt und gleich in die benötigte Syntax gebracht werden. Am Ende wird dann das BreezingForms Feld Extrafelder vom Integrator in die K2-Tabelle geschrieben.

Das ganze geht dann im BreezingForms Quick Mode Formular so:

1. Zusätzlich zu den Feldern für die Extrafeld-Texte ein neues Element anlegen:

Typ = Versteckte Eingabe

Joomla Tipp K2 Extrafelder per BreezingForms Integrator füllen

 

2. Einem beliebigen der Extrafelder (hier extrafeld1) ein Validierungsskript zuweisen:

Joomla Tipp K2 Extrafelder per BreezingForms Integrator füllen

Reiter „Eigenschaften“ -> Validierung

Validierung: Custom
Fehlermeldung: beliebiger Text oder leer lassen (wird nicht ausgegeben)
Script-Fenster: folgenden Inhalt einfügen

function ff_extrafeld1_validation(element, message)
{
    ff_extrafields();
    return '';
} // ff_extrafeld1_validation

Dieses Skript ruft während der Validierung, also nach dem Klicken des Formular-Abschicken-Buttons, die Funktion ff_extrafields auf.

Direkt unter dem ersten Skript wird die Funktion ff_extrafields definiert:


function ff_extrafields()
{
    var extrafeld1 = '';
    if (ff_getElementByName('extrafeld1').value !== null) {
        extrafeld1=ff_getElementByName('extrafeld1').value;
    }
    var extrafeld2 = '';
    if (ff_getElementByName('extrafeld2').value !== null) {
        extrafeld2=ff_getElementByName('extrafeld2').value;
    }
    var extrafeld3 = '';
    if (ff_getElementByName('extrafeld3').value !== null) {
        extrafeld3=ff_getElementByName('extrafeld3').value;
    }
    var extrafeld4 = '';
    if (ff_getElementByName('extrafeld4').value !== null) {
        extrafeld4=ff_getElementByName('extrafeld4').value;
    }
    var extrafeld5 = '';
    if (ff_getElementByName('extrafeld5').value !== null) {
        extrafeld5=ff_getElementByName('extrafeld5').value;
    }

    var extratext=''

    extratext='[{"id":"1","value":"' + extrafeld1 + '"},';
    extratext=extratext + '{"id":"2","value":"' + extrafeld2 + '"},';
    extratext=extratext + '{"id":"3","value":"' + extrafeld3 + '"},';
    extratext=extratext + '{"id":"4","value":"' + extrafeld4 + '"},';
    extratext=extratext + '{"id":"5","value":"' + extrafeld5 + '"}]';

    ff_getElementByName('extratext').value=extratext;

} // ff_extrafields

Funktion ff_extrafields im Detail erklärt:

Zuerst werden die Formularfelder ausgelesen und in Variablen gespeichert.

    var extrafeld5 = '';
    if (ff_getElementByName('extrafeld5').value !== null) {
        extrafeld5=ff_getElementByName('extrafeld5').value;
    }

 

Anschließend werden die Variablen mit den für die K2-Extrafelder benötigten Textelementen als String in die Variable extratext gespeichert.

    var extratext=''

    extratext='[{"id":"1","value":"' + extrafeld1 + '"},';
    extratext=extratext + '{"id":"2","value":"' + extrafeld2 + '"},';
    extratext=extratext + '{"id":"3","value":"' + extrafeld3 + '"},';
    extratext=extratext + '{"id":"4","value":"' + extrafeld4 + '"},';
    extratext=extratext + '{"id":"5","value":"' + extrafeld5 + '"}]';

 

Der Inhalt dieser Variablen wird dann in das versteckte Formularfeld geschrieben.

ff_getElementByName('extratext').value=extratext;

 

Damit stehen die Extrafelder dann dem Integrator zum Speichern in der K2-Tabelle zur Verfügung. Zum Integrator gibt es in kürze einen eigenen Beitrag.

 

 

 

Grafiken und Bilder für Google Bildersuche optimieren

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.

professionelle Joomla Migration

Die professionelle Joomla Migration von Joomla Content Management Systemen gehört zu unserer täglichen Webdesign-Arbeit als Joomla Webdesigner. Wir migrieren Ihre Homepage auf die aktuelle Joomla Version, wobei Ihre jetzige Website während der gesamten Umbauarbeiten erreichbar bleibt. Wir migrieren von und auf alle Joomla Versionen:

  • Joomla Migration von Joomla 1.5 auf 2.5
  • Joomla Migration von Joomla 1.5 auf 3.4
  • Joomla Migration von Joomla 2.5 auf 3.4

 

Die Joomla Migration (oder auch Joomla Upgrade oder Joomla Update genannt) können wir auch bei bereits kompromittierten Websites durchführen, also auch dann, wenn Ihre Homepage bereits gehackt wurde.

 

CSS-Tipp: negativer z-index

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.

reCaptcha: Captcha wird plötzlich nicht mehr angezeigt

Google hat einen Pfad im reCaptcha geändert, so dass in vielen Kontaktformularen auf einmal das Captcha-Bild nicht mehr angezeigt wird. Abhilfe schafft hier vorerst ein Hack in der folgenden Datei:

/joomla-root/plugins/captcha/recaptcha/recaptcha.php

Hier muss die URL in der folgenden Zeile geändert werden:

const RECAPTCHA_API_SERVER = "http://api.recaptcha.net";

ändern zu

const RECAPTCHA_API_SERVER = "http://www.google.com/recaptcha/api";

…und schon geht es wieder.

Diese Maßnahme wirkt sowohl bei Joomla 2.5.x als auch bei Joomla 3.x

 

 

Sie benötigen Hilfe bei Ihrer Joomla-Website? Dann schreiben Sie mir einfach und ich berate Sie gerne!

Webdesign Joomla Migration für SV 1920 Obermörlen e. V.

Screenshot Webdesign-Referenz Joomla Migration für SV ObermörlenProjekt aus dem Bereich Webdesign Joomla Migration

Dieser Kunde bat um die Aktualisierung (Joomla Migration) seiner bestehenden Homepage auf die aktuelle Joomla-Version. Das Webdesign der bestehenden Homepage war mit der alten Version Joomla 1.5 realisiert worden und sollte nun ein Upgrade oder Update auf die aktuelle Version Joomla 2.5 erfahren. Da die alte Homepage einem Hacker-Angiff zum Opfer gefallen war, musste diese vorab bereinigt werden. Das Layout und die Inhalte der Website sollten bei der Joomla Migration erhalten bleiben.

Status:
  • abgeschlossen
Aufgabenstellung für die neue Site:
  • Bereinigung der infizierten Website
  • Joomla Migration (großer Versionssprung oder auch Joomla Upgrade) von Version Joomla 1.5 auf Joomla 2.5.
  • Einrichtung einer neuen Benutzerverwaltung, da das bisher verwendete Tool in der aktuellen Version nicht zur Verfügung steht
  • Anpassung des aktuellen Templates per css, damit die Seite wieder die alte Optik erhält.
  • Veröffentlichung bei bestehenden Webhoster mit möglichst geringen Ausfallzeiten

Webdesign Joomla Migration für rechtsanwalt.biz

Screenshot Webdesign-Referenz Joomla Migration für Rechtsanwalts-KanzleiProjekt aus dem Bereich Webdesign, professionelle Joomla Migration

Der Webdesign Kunde bat um die Aktualisierung (Joomla Migration) seiner bestehenden Homepage auf die aktuelle Joomla-Version. Die bestehende Website war mit der alten Version Joomla 1.5 erstellt worden und sollte nun ein Upgrade auf die aktuelle Version Joomla 2.5 erfahren. Hierbei sollte das Layout der Homepage sowie die Inhalte (der Content) erhalten bleiben und die Website sollte über die ganze Entwicklungszeit erreichbar bleiben.

Status:
  • abgeschlossen
Aufgabenstellung für den Joomla Webdesigner:
  • Joomla Migration (großer Versionssprung oder auch Joomla Upgrade) von Joomla 1.5 auf Joomla 2.5.
  • Anpassung des aktuellen Templates per css, damit die Seite wieder die alte Optik erhält.
  • Veröffentlichung bei einem bestehenden Webhoster ohne Ausfallzeiten

Joomla Webdesign für Ergofobi

Screenshot Joomla Webdesign für Ergofobi, BosauProjekt aus dem Bereich Webdesign

Diese Webdesign Kundin aus Bosau in Ostholstein wünschte sich ein Content Management System, da sie die Inhalte ihrer Homepage gerne nach der ersten Erstellung durch einen professionellen Webdesigner später selbst pflegen und ergänzen möchte. Zum Einsatz kam dann gleich die neue Version Joomla 3.1, damit ein späteres Update keine zusätzlichen Kosten mehr verursacht. Auf der Homepage sollen hauptsächlich Seminar-Termine und -Programme dargestellt werden, die gut in den Suchmaschinen gefunden werden sollen. Dafür wurde eine Joomla Termin-Komponente eingebunden und an die Bedürfnisse der Kundin angepasst. Für die gute Auffindbarkeit in den Suchmaschinen wurde bereits während der Erstellung auf Suchmaschinenoptimierung (SEO) geachtet. In einer intensiven Schulung wurde der Kundin die Homepage Pflege per Joomla Webdesign gezeigt. Da hierbei gleich die jetzt enthaltenen Website Inhalte eingebunden wurden, war der Lerneffekt besonders hoch. Die Kundin ist nun in der Lage, die neue Homepage selbst zu ändern und verwalten.

Status:
  • abgeschlossen
Aufgabenstellung für die neue Site:
  • Nur das Grundgerüst (Layout und Technik) der Website erstellen und den Kunden für die Einbindung der Inhalte schulen.
  • Erstellung eines Online Terminkalenders für Ergotherapie Seminare mit Anmeldefunktion und besonderem Augenmerk auf der Suchmaschinenoptimierung.
  • Der Kunde pflegt die Inhalte nach einer Schulung und gemeinsamer Erstbefüllung selbst ein.
  • Verwendung eines Layouts, das auch auf mobilen Endgeräten ansprechend aussieht (responsive Webdesign).
  • Verwendung eines Content Management Systems (Joomla 3).
  • Suchmaschinenoptimierung (SEO)
  • Veröffentlichung bei einem bestehenden Webhoster

Tipps zur Suchmaschinenoptimierung (SEO)

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!