Archiv des Autors: Susanna Künzl

Über Susanna Künzl

Seit 12 Jahren berate ich Unternehmen auf ihrem Weg ins Internet. Ziel ist eine Website, die den Kunden wie ein aktiver Mitarbeiter unterstützt. Mein persönlicher Schwerpunkt liegt auf den Content Management Systemen und ihrer Programmierung. Diese CMS sind meine Baustelle: TYPO3, Drupal, Wordpress und Joomla.

Alles hat ein Ende …

Webtext schreiben

(Bild: © yeti – Fotolia.com)

Ich verabschiede mich von meinen Lesern und vom Orakelblog. Nach 10 Jahren wird neu sortiert, denn wir sind gewachsen. Jetzt bloggt unser Team auf ambranet.de. Die Themen sind weiterhin:

  • Tipps und Tricks für den Alltag am PC
  • Aktuelles zu sozialen Netzwerken
  • Best Practice für TYPO3, Drupal und WordPress
  • Entwicklung von Erweiterungen für verschiedene Contentsysteme
  • HTML, CSS und jQuery
  • weitere interessante und wissenswerte Themen

Bleibt uns treu und schaut mal wieder herein. Und vielen Dank für Euer Interesse.

Checklisten zum Internetrecht (Websites und Webshops) -nicht nur für Existenzgründer

Recht und billig: Checklisten zum Internetrecht

Nicht nur für Existenzgründer ist es nützlich, sich mit den Fallstricken zu beschäftigen, die auf ihre Website oder ihren Shop warten. Als Unternehmer hat man da oft den Eindruck, dass die Gesetzeslage nicht unbedingt von gesundem Menschenverstand geprägt ist. Zur schnellen Orientierung reichen oft Checklisten. Da nicht eine Liste alle Fragen abdeckt, habe ich hier unsere Lieblingslisten zusammengestellt. Auf einen guten, rechtssicheren Start ins neue Jahr!

  1. Rechtssichere Websites
  2. Leitfaden rechtssichere Websites (Stand: 2012)
  3. Checkliste zur rechtssicheren Verwendung von Bildern
  4. Textzitate korrekt verwenden
  5. Rechtssichere Online-Shops (Stand 2010, aber vieles ist immer noch gut)
  6. IHK-Merkblatt Webshop
  7. Hier geht es gezielt um die Button-Lösung
  8. Und noch mehr Checklisten zu verschiedenen Themen des Internetrechts

P.S.: Das ist keine Rechtsberatung!

P.P.S.: Noch mehr Checklisten rund ums Internet gibt es hier.

Webtext schreiben

Webtext schreiben: Wann ist ein Blogartikel wirklich fertig?

Ich sehe Euch vor mir: Ihr habt eine zündende Idee für einen Blogartikel, etwas, das Ihr Euren Lesern schon immer mal mitteilen wolltet. Er löst ein Problem, das Eure Leser haben. Nach Googles Kriterien ist er damit wertvoller Content und sollte alle Chancen haben, in den Suchergebnisse hoch oben zu ranken. Damit Eure Leser auch optisch auf ihre Kosten kommen, habt Ihr ein ansprechendes Bild, das Euren Artikel begleitet. Fertig? Online damit? Moment mal!

Texte schreiben für alle

Ihr schreibt den Artikel ja nicht nur für Euch selbst. Er soll möglichst von allen Interessenten und potentiellen Lesern gefunden und vollständig erfasst werden können. Hier geht es einmal um Suchmaschinenoptimierung:  Der Artikel muss schließlich erst einmal gefunden werden, bevor er gelesen werden kann. Danach geht es um Benutzerfreundlichkeit und Barrierefreiheit: Möglichst jeder sollte Eure Informationen aufnehmen können. Am besten fangen wir ganz von vorne an.

Welche Keywords beschreiben das Thema?

Also: Ihr habt das Thema für Euren Blogartikel gefunden und wollt es in Worte fassen. Aber wie würde Eure Zielgruppe das Thema benennen? Welche Begriffe verwendet der Benutzer einer Suchmaschine, um Euren Text zu finden?

Wenn Ihr auf der Suche nach Themen nicht sowieso schon auf die Suchanfragen, die Besucher auf Eure Website geführt haben, zurückgegriffen habt, ist jetzt der richtige Zeitpunkt. Ob Google Analytics oder Piwik: Beide Analysetools verzeichnen die Suchanfragen, über die Besucher auf Euer Blog gekommen sind. Oft gibt Euer CMS auch Informationen zu seiteninternen Suchvorgängen, z.B. indexed_search für TYPO3. Wenn Ihr das Thema noch garnicht behandelt habt, tut es auch ein Blick in das AdWords Keyword Tool. Für ganz heiße Themen liefern auch Trend-Tools der Suchmaschinen gute Ergebnisse (z.B. Google Trends).

Nach dieser Keywordrecherche solltet Ihr wissen, wie Ihr Euer Thema beschreibt, um es für Eure Leser gut auffindbar zu machen.

Lese(r)freundlich schreiben

Ihr wisst jetzt, wie Eure Leser ihr Problem oder Eure Lösung benennen. Wenn Ihr mit dem Schreiben anfangt, berücksichtigt Ihr die Keywords und verwendet das Wording Eurer Zielgruppe. Auch mit der Gliederung des Textes könnt Ihr Lesern und Suchmaschinen etwas Gutes tun.

  • Ganz oben: Die Hauptüberschrift. Sie sollte die Keywords enthalten, aber nicht zu lang sein. Wenn Euer Artikel über Tools wie Sexybookmarks getwittert werden kann, ist die Zeichenzahl der Hauptüberschrift wichtig. Ein Tweet kann bis zu 140 Zeichen lang sein. Hauptüberschrift und verkürzter Link auf Euren Artikel sollten noch ausreichend Platz lassen, um Euren Tweet zu retweeten.
  • Gliedert den Text durch Zwischenüberschriften. So können Leser auf den ersten Blick sehen, ob sie hier richtig sind.
  • Schreibt in übersichtlichen, kurzen Abschnitten. Das Lesen am Bildschirm strengt schon genug an.
  • Verwendet Listen wie diese, um gleichartige Inhalte nebeneinander zu stellen.
  • Erstellt für längere Artikel am Anfang ein Inhaltsverzeichnis, das zu den einzelnen Abschnitten führt.
  • Fragt Euren Webdesigner/Eure Internetagentur, ob der Quelltext Eures Blogs semantisch korrekt ist.
  • Fragt Euren Designer, ob die Schrift hier wirklich so klein sein muss, und warum sie sich nicht vergrößern lässt.

Was fehlt jetzt noch?

Äußerlich scheint Euer Artikel komplett, jetzt geht es an die Dinge, die nicht gleich auffallen.

  • Sind Bilder und eingebettete Medien mit Alternativtexten ausgestattet? In erster Linie unterstützt das Leser, die mit assistiven Technologien auf Euer Blog zugreifen. Da Suchmaschinen auch nur Texte erfassen können, erhöht die textliche Beschreibung von Medien auch deren Sichtbarkeit in den Suchmaschinen (aka Suchmaschinenoptimierung).
  • Wenn Ihr diese Texte schreibt, vergesst nicht, Eure Keywords einzubeziehen. Das ist nicht nur SEO, sondern hilft auch Benutzern, die Inhalte mit ihren Suchbegriffen zu finden.
  • Noch mehr SEO: Benennt, wenn es Euer CMS/Blog zulässt, die Bilddateien und Medien so, dass der Name Rückschlüsse auf ihren Inhalt erlaubt. Natürlich unter Verwendung der Suchbegriffe, die Ihr vorher recherchiert habt.

Macht Werbung für Euren Blogartikel

Es gibt noch mehr zu tun, auch wenn man es nicht auf den ersten Blick sieht. Wie soll Euer Artikel in den Google Suchergebnissen erscheinen? Was sehen Eure potentiellen Leser, wenn die Suchmaschine ihres Vertrauens den Link auf Eure und konkurrierende Seiten ausgegeben haben? Wie könnt Ihr hier punkten?

In den organischen Suchergebnissen werden im Normalfall diese Daten aus Eurer Website ausgegeben

  • der title mit einem Link auf den Blogartikel
  • die description / Seitenbeschreibung, wenn sie mit den Keywords der Suche übereinstimmt. Die Suchbegriffe werden zusätzlich gefettet und erregen so mehr Aufmerksamkeit beim Besucher

Die organischen Suchergebnisse konkurrieren mit anderen Ergebnissen, die Suchmaschinen einspielen, darunter auch mit den bezahlten Anzeigen, z.B. von Google AdWords. Der normale Benutzer der Suchmaschine kann die Unterschiede nicht bewerten. Für ihn sehen alle Suchtreffer ähnlich aus, wenn auch Anzeigen im Bereich rechts neben den organischen Suchergebnissen seltener angeklickt werden als Einträge im Hauptbereich der Ergebnisseite.

Behandelt title und description doch wie eine Kleinanzeige. Textet sie ansprechend und sorgfältig. Der title sollte die Überschrift, die description einen Teaser zum Artikel darstellen. Damit die Suchmaschinen diese Texte nicht einfach abschneiden, beschränkt man den title auf ca. 65 Zeichen, description auf 160 Zeichen (jeweils inkl. Leerzeichen).

Wer sich bei Google als Autor seines Blogs verifiziert hat, tut noch mehr für die Attraktivität seines Suchergebnisses: Ein Link mit dem Bild des Autors fällt auf, schafft Vertrauen und führt zu mehr Klicks. Je bunter die Suchergebnisseiten durch Shoppingergebnisse, lokale Ergebnisse und News werden, desto wichtiger ist es, ebenfalls ein Bild bei seinem Eintrag zu haben.

Suchergebnisse mit Autorenbild

Blogsysteme wie WordPress erlauben sogar, die URL des Blogartikels selbst zu bestimmen. Auch hier könnt Ihr die Keywords unterbringen.

Jetzt habe ich Euch lange genug aufgehalten. Euer Artikel ist fertig und optimal sichtbar. Raus damit – und vergesst nicht, ihn auch auf Twitter, Facebook und Google+ zu erwähnen, wenn Ihr da ein Konto besitzt.

Bild: © yeti – Fotolia.com

Fluid Images – das kann auch Drupal!

Resposive Design für Websites ist eigentlich kein Hexenwerk. Die Anpassung des Layouts und der Inhaltselemente an die Anforderungen unterschiedlicher Ausgabegeräte lösen wir – notfalls unterstützt von etwas Javascript – mit Media Queries: Wenn viel Platz ist, stehen alle drei Spalten des klassischen Portal-Designs neben einander, bei kleineren Bildschirmen und auf Tablets und Smartphones werden erst zwei, dann nur eine Spalte angezeigt. Die Inhalte erscheinen unter- statt neben einander. Am liebsten hätten wir, dass sich abgesehen von den Break Points, an denen das Layout für schmalere Bildschirme neu organisiert wird, die Inhaltsspalten auch dazwischen schon flexibel an den sich verändernden Viewport angepasst werden.

Dies kurze Beschreibung ist nicht originell und beschreibt längst nicht alle Anforderungen an Webdesign, das auf allen Displays möglichst einfach benutzbar sein soll. Es gibt da allerdings eine Aufgabe, die uns den Schweiß auf die Stirn treibt: Wie bekomme ich Bilder so flexibel, dass sie sich dem Layout anpassen?

Das Problem ist bekannt. Flexibles Webdesign, das das Raster der Website in em oder % auszeichnet, stößt bei Bildern an seine Grenzen. Wenn ein Bild 600px breit ist, kann es bei Desktop-Rechnern die volle Breite der mittleren Spalte ausfüllen. Auf dem Smartphone sprengt es einfach den Rahmen.

Kein Ding, dann sorgen wir eben mit CSS dafür, dass das Bild höchstens so breit wird wie das umgebende Element, sagen wir mal, die Layout-Spalte:

1
2
3
img {
	max-width: 100%;
}

Wenn das Bild keine im HTML-Element hart codierte width- und height-Angaben trägt, wird es dann bei Layout-Spalten, die schmaler als 600px sind, praktisch skaliert (Benutzer von IE6 und kleiner: Dont’t try that at home. Oder fügt per Conditional Comments width=100% für Bilder ein). Nicht nur die Breite wird angepasst, sondern auch die Höhe auf den der Breite proportional entsprechenden Wert zusammengeschoben. Passt!

Wer statische Seiten handcodiert, hat an der Stelle kein Problem. Er kann das img ohne width und height ausgeben. Aber wer tut das schon? Websites kommen heute aus Content Management Systemen. Und die liefern Bilder als Komplettpaket mit Höhe, Breite, Alt- und Title-Tags aus. Das war auch einmal sehr gut, denn mit den festgeschriebenen Werten konnte der Browser die Bilder schneller rendern. Aber: Wenn wir die Bilder mit max-width: 100% in der Größe einschränken, werden sie in der Breite zwar angepasst, aber die Höhe bleibt so, wie sie im img-Tag festgelegt wurde.

Wollen wir flexible Bilder, müssen wir die Ausgabe des img-Tags so anpassen, dass sie keine Maßangaben enthält. Und dabei sollte natürlich der Code des Kernsystems nicht angetastet, sondern überschrieben werden.

Bei Drupal geht es ganz einfach im individuell verwendeten Theme, genauer gesagt, in der functions.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
< ?php
	function meintheme_image($variables) {
		$attributes = $variables['attributes'];
		$attributes['src'] = file_create_url($variables['path']);
		// hier width und height aus dem Array entfernen
			foreach (array('alt', 'title') as $key) {
				if (isset($variables[$key])) {
					$attributes[$key] = $variables[$key];
				}
			}
		return '';
		}
?>

Damit werden alle Bilder ohne feste Maße ausgegeben und können mit CSS an ihre Umgebung angepasst werden. Wer öfter mit Drupal arbeitet, weiss, dass dies eine updatefähige Lösung ist, denn die Funktion im Core bleibt damit unangetastet.

Wer mehr über die Hintergründe erfahren möchte (oder auch weitere Lösungen zum Problem der Bildausgabe für unterschiedliche Devices erfahren will), kann hier nachlesen:

Der besondere Charme von Drupal – Teil 3: WYSIWYG schreiben und Medien verwalten

Drupal LogoDie häufigste Aufgabe in einem CMS ist gewöhnlich, Texte und Bilder einzufügen oder zu bearbeiten. Die spartanischen Eingabefelder, die Drupal von Haus aus bereitstellt, erfreuen zwar den Coder, der HTML im Schlaf schreibt. Für alle anderen Redakteure ist es mühsam, Inhalte so in die richtige Form zu bringen.

Installieren wir also einen WYSIWYG-Editor und eine Bilderverwaltung, und Texte schreiben wird ein Vergnügen. Als Bilderverwaltung hat sich IMCE bewährt. Es lässt sich für unterschiedliche Benutzergruppen mit unterschiedlichen Möglichkeiten anpassen und auch als Standard-Dateiverwaltung in den Editor CKEditor integrieren.

Für die Admins unter uns: Zur Installation der Module

IMCE wird – wie alle lokalen Module – in das Verzeichnis sites/all/modules hochgeladen und im Backend von Drupal aktiviert. Der Editor wird aus zwei Quellen heruntergeladen: er besteht aus dem Editor selbst und dem Drupal-Modul, das Einbindung und Konfiguration desselben bereitstellt. Nach dem Entpacken kopiert man die Editordateien aus ihrem Verzeichnis ckeditor in das Modulverzeichnis ckeditor/ckeditor. – Hochladen und aktivieren.

Um den IMCE noch in den Editor einzubinden, müsst Ihr die Konfigurationsdatei des Editors anpacken und diese Zeilen auskommentieren:
//config.extraPlugins += (config.extraPlugins ? ‚,imce‘ : ‚imce‘ );
//CKEDITOR.plugins.addExternal(‚imce‘, Drupal.settings.ckeditor.module_path + ‚/plugins/imce/‘);
In der Profil-Konfiguration (z.B. für das Eingabeprofil „Filtered HTML“) über das Backend kann dann der Button für den IMCE einfach in die Liste der Buttonleiste des Editors eingefügt werde: Unter „Editor Appearance“ im Feld Werkzeugleiste ersetzt ihr z.B. Image durch IMCE.

Nochmal für Admins: Editor konfigurieren

Wie die Einbindung der IMCE lässt sich auch die Konfiguration des CKEditor für jedes Eingabeprofil separat festlegen. So könnt Ihr z.B. unterschiedliche Konfigurationen für jede Rolle anlegen: Redakteure bekommen ein Editor-Profil mit IMCE und Flash-Einbindung, Texter erhalten nur eine reduzierte Werkzeugleiste mit wenigen Optionen, die man bei der Textorganisation unbedingt braucht: Überschriften, Listen, Fett und Kursiv.

Zuerst ist es jedoch erforderlich, ein Texteingabeformat zu definieren, das in seinen erlaubten HTML-Elementen den Möglichkeiten des Editors entspricht. Wenn im Textformat keine Bilder vorgesehen sind, kann man sie zwar im Editor einbinden, sie werden aber bei der Ausgabe der Website ausgefiltert. Ein Eingabeformat für den Editor erstellt Ihr unter Konfiguration >> Inhaltserstellung >> Textformate. Dort legt Ihr auch fest, welche Benutzerrollen dieses Format verwenden dürfen. Unter Konfiguration >> Inhaltserstellung >> CKEditor passt Ihr dann den Editor für dieses Eingabeformat an:

  • Basic Setup: Zuordnung des Eingabeformats zum Editor
  • Security: Einstellung der Filter, die auf den eingegebenen Inhalt angewendet werden sollen. Hier geht es nicht nur um Sicherheit, sondern auch um Bequemlichkeit. So können URLs bei der Eingabe gleich in den entsprechenden Link umgewandelt werden.
  • Editor Appearance: Neben der Darstellung des Editors (Skin, Breite, Farben, wegschaltbar) legt man hier die Sprache und – wichtig – die verfügbare Werkzeugleiste fest.
  • Cleanup and output: Legt fest, wie harter und weicher Umbruch behandelt und welche Absatzformate verfügbar sein sollen (Font formats). Es ist z.B. für eine semantisch richtige Auszeichnung des Textes sinnvoll, die Überschriften h1 abzuwählen. Hier sollten auch nur Formate erscheinen, die wirklich im CSS definiert sind.
  • CSS: Mit dem Editor CSS regelt Ihr die Formatierung der Inhalte im Editor selbst. Noch wichtiger ist das Menü Predefined Styles: Wenn Ihr den Redakteuren eigene Klassen für Block- oder Inline-Formate zur Verfügung stellen wollt, sind diese im Editor unter „Stile“ erreichbar (im Array der Werkzeugleiste ist dies der Wert ‚Styles‘). Vordefinierte Stile sind in der Datei sites/all/modules/ckeditor/ckeditor/ckeditor.styles.js angelegt. Um diese Datei an Euren Bedarf anzupassen, legt Ihr eine Kopie im Verzeichnis Eures Templates an und bindet sie mit der Einstellung Predefined styles >>Use theme ckeditor.styles.js in den Editor ein.
  • File browser settings: Wählt hier den IMCE aus. Wenn der ckeditor-eigene Dateibrowser verwendet wird, gibt es die Möglichkeit, jedem Benutzer ein eigenes Dateiverzeichnis zuzuweisen.
  • Erweiterte Optionen: Die Auswahl Load Method >> ckeditor_basic.js führt dazu, dass der Editor im Frontend erst angezeigt wird, wenn man ihn anfordert (Erstaunlicherweise mit dem Link Switch to plain text editor). Das spart Ladezeit, ist aber für den Redakteur nicht unbedingt transparent. Interessant ist noch die Option Spell checker. Hier kann man die rechtschreibprüfung beim Tippen zuschalten. Force pasting as plain text bewirkt, dass in den Editor kopierter Text von allen Tags befreit wird.

Mit dem Editor Texte schreiben

Der Drupal WYSIWYG-EditorJetzt geht es zur Sache: Was hat der CKEditor dem Redakteur zu bieten? Betrachten wir die Werkzeugleiste mit allen Optionen. Für den realen Betrieb sollte die Administratorin diese Optionen auf das notwendige Minimum beschränken. So arbeitet der Redakteur in einer auf seinen Bedarf optimierten Umgebung:

  • Quellcode: Umschalten zum Quellcode. Die letzteRettung, wenn mal etwas schiefgeht.
  • Ausschneiden, Kopieren, Einfügen, als Text einfügen, aus MS Word einfügen: Die klassischen Optionen für Copy and Paste. Wobei man sich beim Einfügen aus Word nicht darauf verlassen sollte, dass der Code wirklich sauber ist. Wer sicher gehen will, kopiert vorher Texte aus Word in einen reinen Texteditor oder fügt sie in der Quellcode-Ansicht ein.
  • Rechtschreibprüfung: Hier kann der Text als Ganzes oder während der Eingabe überprüft werden.
  • Rückgängig, Wiederherstellen, Suchen, Ersetzen: Das kennt man von der Textverarbeitung seiner Wahl.
  • Flash, Tabelle einfügen, Horizontale Linie einfügen, Smiley, Sonderzeichen: Hier kann man ein Flash in die Medienverwaltung hochladen und einbinden, eine Tabelle, Linie, Smileys und Sonderzeichen aus einer Liste einfügen. Zur Tabelle: eingefügte Tabellen lassen sich später über ein Kontextmenü um Spalten und Zeilen erweitern.
  • Maximieren, Blöcke anzeigen, IMCE: Blöcke anzeigen unterstützt optisch, man kann die Gliederung des Dokuments sehen.
  • Format: Absatzformate
  • Stil: vordefinierte Absatz- und inline-Formate
  • Fett, kursiv, unterstrichen, durchgestrichen: kennt Ihr auch von Eurer Textverarbeitung. Ebenso diese Formate:
  • Tiefgestellt, hochgestellt
  • Nummerierte Liste, Liste
  • Einrücken, ausrücken, Anführungszeichen
  • Linksbündig, zentriert, rechtsbündig, Blocksatz
  • Leserichtung von links nach recht, Leserichtung von rechts nach links: Diese Anpassung eignet sich für fremdsprachige Texte und wirkt sich auf die Textausrusrichtung der Absätze aus.
  • Link erstellen/editieren, Link entfernen, Anker anlegen: Hier ghibt es alle Funktionen rund um Links. Leider muss man websiteinterne Links immer noch hart codieren. Das kann TYPO3 besser.

Bilder verwalten mit dem IMCE

Bilderverwaltung für das CMS Drupal

Der IMCE bietet dem Redakteur viele Möglichkeiten, Bilder zu verwalten und in den Text einzubinden.

Die Übersicht des Bilderverzeichnisses gibt alle nötigen Informationen zu den hochgeladenen und erzeugten Bildern (Datum, Maße, Größe). Die Behandlung der Bilder ist komfortabel:

  • Upload: Hier ladet Ihr die Bilddatei hoch. Optional können auch gleich kleinere quadratische Versionen des Bildes erstellt werden.
  • Thumbnails: Das geht auch noch nachträglich. Ein Bild auswählen und dann Thumbnails erstellen lassen.
  • Löschen: für überflüssige Bilder.
  • Größe ändern: Neben quadratischen Thumbnails lassen sich auch skalierte Versionen eines hochgeladenen Bildes erstellen. Das Ausgangsbild wird je nach Wahl überschrieben oder es wird ein neues (kleineres) Bild erzeugt.
  • Insert File: Hier gibt es alle Optionen, ein Bild aus der Mdienverwaltung in den Editor einzufügen (Alternativtext, Title, Verlinkung, Klassen). Klassen sollte die Administratorin vorher angelegt haben, sonst wirken sie sich nicht aus.
  • Einmal in den Text eingebundene Bilder lassen sich nachträglich über ein Kontextmenü (rechte Maustaste) bearbeiten oder entfernen.

Fazit

Mit CKEditor und IMCE steht den Benutzern, die an der Website arbeiten, ein mächtiges Werkzeug zur Textverarbeitung zur Verfügung. Durch umfangreiche und granulare Konfigurationsmöglichkeiten kann dieses Tool an die Bedürfnisse der jeweiligen Benutzergruppe angepasst werden. Die hier vorgestellte Kombination ist nicht die einzige Möglichkeit, Texte komfortabel einzugeben. Das Modul Wysiwyg erlaubt z.B. die Einbindung verschiedener Editoren. Wer lieber TinyMCE benutzt, wird hier fündig. Für die meisten Ansprüche genügt allerdings die hier vorgestellte Kombination.