Mit Adobe Photoshop soll im Rahmen unserer kleinen Serie zur Bildbearbeitung fürs Web ein weiteres Grafikprogramm vorgestellt werden. Erfahrene Anwender dieser Profi-Software werden diesem Leitfaden sicher keine nennenswerten Mehrwerte entnehmen können, aber gerade Anfänger sind oftmals mit der Mächtigkeit dieses Programms überfordert.

Übersicht Serie Bildbearbeitung für das Internet

• Allgemeine Informationen zur Bildbearbeitung
• Bildbearbeitung mit IrfanView
• Bildbearbeitung mit Windows Paint
• Bildbearbeitung mit Windows Picture Manager
• Bildbearbeitung mit Adobe Photoshop

Adobe Photoshop starten und Bild öffnen

Starten Sie Adobe Photoshop wie gewohnt über Ihr Startmenü, Desktopverknüpfung oder ähnliches und wählen im Dateimenü „Öffnen…“ bzw. Drücken Sie „Strg + O“ um den Dateidialog zu starten. Die können nun wie gewohnt das Verzeichnis mit dem Bild auswählen und dieses öffnen. Alternativ können Sie die Datei auch direkt über einen Rechtsklick auf die Datei im Explorer/Arbeitsplatz » „Öffnen mit“ » „Adobe Photoshop“ öffnen oder diese per Drag & Drop direkt ins Photoshop ziehen.

Bildausschnitt festlegen

Bei großflächig aufgenommenen Bildern reicht für die Webseite oftmals ein Ausschnitt aus. Bei Produkten zum Beispiel können auch Detailansichten gewünscht sein. Diese lassen sich mit Hilfe des „Freistellungswerkzeuges“ erstellen. Wählen Sie dazu das entsprechende Icon in der Werkzeugleiste aus oder drücken Sie dazu einfach die Taste „c“.

In der Menüleiste werden nun zahlreiche Optionen für das Freistellungswerkzeug angezeigt. Sind alle Felder leer, so können Sie einen völlig freien Rahmen zur Beschneidung des Bildes aufziehen. Klicken Sie dazu in das Bild und ziehen die Maus bei gehaltener, linker Taste. Anhand der Anfasser an den Ecken des Rahmens und in den Mitten der Kanten können Sie Ihre Auswahl nachträglich anpassen. Mit der „Esc“-Taste brechen Sie die Auswahl ab. Mit „Enter“ führen Sie den Bescheidungsvorgang aus.

Die Beschneidungsoptionen

Wie bereits erwähnt, stehen Ihnen eine Reihe an Optionen für das Beschneidungswerkzeug zur Verfügung.

• Eingabe vordefinierter Breite und Höhe à das Bild wird in diesem Zusammenhang zugeschnitten und gleichzeitig auf die angegebene Größe skaliert – achten Sie hier aber auf die Angabe der richtigen Maßeinheit „Px“
• Weiterhin können Sie die Auflösung des zugeschnittenen Bild mit beeinflussen – das kann u.U. dann interessant sein, wenn die Grafik aus dem Print kommt und mehr als 96 DPI Auflösung hat (allerdings wird dieser Wert beim Speichern fürs automatisch auf die Bildschirmauflösung angepasst und muss hier nicht gesondert angegeben werden)
• Halten Sie beim Aufziehen des Rahmens die Umschalt-Taste gedrückt, so wird der Auswahlrahmen immer quadratisch sein à das kann zum Beispiel für Thumbnails eine nützliche Funktion sein.

Bildgröße andern

Die Bildgröße können Sie über das Dateimenü „Bild“ » „Bildgröße“ oder die Tastenkombination „STRG + ALT + I“ anpassen. Daraufhin öffnet sich ein Dialog, in dem Sie die gewünschten Maße eingeben können.

Achten Sie darauf, dass der Haken bei „Proportionen erhalten“ gesetzt ist, da sonst das Bild gestreckt oder gestaucht wird. Ist der Haken gesetzt, sind die beiden Eingabefelder optisch durch ein Kettensymbol verbunden.

Entscheidend für die Bildgröße sind die Werte im Bereich Pixelmaß. Dort sollte die Einheit entsprechend auf „Pixel“ gestellt sein. Mit „OK“ bestätigen Sie Größenänderung.

Bild speichern

Um das Bild fürs Web zu speichern gehen Sie über das Dateimenü auf „Für Web speichern…“ oder drücken gleichzeitig „Alt + Umschalt + Strg + S“. Im sich öffnenden Dialog haben Sie die Möglichkeit das Ausgabeformat anzugeben. Wir empfehlen an dieser Stelle JPEG und einen Qualitätswert von 80. In der Vorschau sehen Sie, wie sich die Qualität des Bildes ändert. Je nach Ausgangsqualität können hier auch niedrigere Werte angeben werden. Die Erfahrung hat gezeigt, das Werte größer als 80% meist keinen nennenswerten Einfluss auf die Qualität, aber auf die Dateigröße haben.

Nach dem Klick auf den „Speichern“-Button öffnet sich der Dateidialog, in dem Sie das Zielverzeichnis wählen und einen Dateinamen vergeben können.

Wählen Sie den Dateinamen mit Bedacht. Dieser sollte eindeutig sein und das Bild inhaltlich beschreiben. Zum einen hilft das später bei der Dateiverwaltung auf dem Server und zum anderen Unterstützten Sie damit die Suchmaschinen bei der Indizierung Ihrer Webseite.

Nicht jeder Web-Redakteur hat auf seinem PC oder Laptop ein Bildbearbeitungsprogramm wie Adobe Photoshop oder Corel Draw und möchte auch nicht auf kostenlose Programme aus dem Web zurückgreifen. Das Microsoft Office Paket ist hingegen bei Redakteuren wahrscheinlich weiter verbreitet und bietet mit dem Picture Manager eine integrierte Möglichkeit zur einfachen Bildbearbeitung. Im Rahmen unserer kleinen Serie zur Bearbeitung von Grafiken und Bildern für Webseiten möchten wir dieses Tool an dieser Stelle kurz vorstellen.

Übersicht Serie Bildbearbeitung für das Internet

• Allgemeine Informationen zur Bildbearbeitung
• Bildbearbeitung mit IrfanView
• Bildbearbeitung mit Windows Paint (Windows 7)
• Bildbearbeitung mit Windows Picture Manager
• Bildbearbeitung mit Adobe Photoshop

Picture Manager starten und Bild öffnen

Starten Sie den Microsoft Office Picture Manager über Ihr Startmenü. Im linken Bereich des Programms haben Sie die Möglichkeit in den Ordner zu wechseln, in dem sich Ihre Datei befindet. Wählen Sie das gewünschte Bild per Klick aus und danach in der Menüleiste den Button für „Bilder bearbeiten“. Alternativ können Sie auch direkt über den Explorer bzw. Arbeitsplatz in das passende Verzeichnis wechseln, die Datei mit der rechten Maustaste anklicken und im sich öffnenden Menü „Öffnen mit“ » „Microsoft Office Picture Manager“ auswählen.

Nach dem Klick auf „Bilder bearbeiten“ öffnet sich am rechten Fensterrand ein Menü mit verschiedenen Optionen zur Bildbearbeitung.

Bildausschnitt festlegen

Es kommt immer wieder vor, dass nur Teile eines Bildes auf der Webseite dargestellt werden sollen oder zusätzlich in einem weiteren Bild eine Detailansicht gewünscht ist. Um das zu erreichen, bieten die meisten Grafikprogramme die Möglichkeit Bilder zu beschneiden. Im Picture Manager wählen Sie dazu in der rechten Spalte den Eintrag „Zuschneiden“ aus. Bei gehaltener, linker Maustaste können Sie nun einen Rahmen über das Bild aufziehen, der dem späteren Ausschnitt entsprechen soll. Mit Hilfe der Anfasser an den Ecken und den Mitten der Kanten haben Sie die Möglichkeit den Rahmen genauer anzupassen.

Nach einem Klick auf den „OK“-Button in der rechten Spalte wird die Auswahl auf das Bild angewendet.

Bildgröße ändern

Insofern die rechte Spalte mit Bearbeitungsoptionen nicht schon angezeigt wird, wählen Sie zunächst das gewünschte Bild aus und klicken dann in der Menüleiste auf „Bilder bearbeiten“.

In der Spalte mit den Optionen zur Bildbearbeitung wählen Sie nun „Größe ändern“. Ihnen Stehen nun verschiedene Möglichkeiten zur Anpassung der Bildgröße zur Verfügung.

• Vordefinierte Breite x Höhe mit einer Reihe an voreingestellten Bildgrößen
• Benutzerdefinierte Breite x Höhe zur Angabe individueller Werte
• Prozent von ursprünglicher Breite x Höhe, um das Bild prozentual zu skalieren

Bei der individuellen Anpassung der Höhe und Breite genügt es, entweder die Breite oder die Höhe in das gewünschte Maß zu bringen. Der jeweils andere Wert wird für das neue Bild automatisch proportional angepasst. In der „Zusammenfassung der Größeneinstellungen“ können Sie die finalen Maße ablesen.

Mit Klick auf OK bestätigen Sie die Einstellungen und wenden diese auf das angezeigte Bild an.

Bild speichern

Zum Speichern der Grafik stehen Ihnen mehrere Möglichkeiten zur Verfügung. Insofern Sie an einer Kopie des Originalbildes gearbeitet haben, können Sie direkt im Dateimenü auf „Speichern“ klicken. Andernfalls sollten Sie die Eintrag „Speichern unter“ wählen, da Sie sich sonst das Original überschreiben und Ihnen dieses für eventuelle, weitere Projekte nicht mehr zur Verfügung steht.

Vergeben Sie auf jeden Fall einen eindeutigen Dateinamen, der das Bild inhaltlich beschreibt. Das hilft Ihnen zukünftig nicht nur bei der Dateiverwaltung sondern unterstützt auch die Suchmaschinen beim Indizieren der Bilder auf Ihrer Webseite.

Das betriebssystemeigene Zeichenprogramm Paint war in den älteren Versionen von Windows alles andere als dafür geeignet Bilder zu bearbeiten. Mit der aktuellen Programmvariante hat sich dies aber entschieden verbessert. Da immer mehr Nutzer auf Windows 7 umsteigen möchten wir auch diese Möglichkeit der Bildbearbeitung in unserer kleinen Serie mit vorstellen. Der entscheidende Vorteil besteht natürlich darin, dass keinerlei zusätzliche Software installiert werden muss.

Übersicht Serie Bildbearbeitung für das Internet

• Allgemeine Informationen zur Bildbearbeitung
• Bildbearbeitung mit IrfanView
• Bildbearbeitung mit Windows Paint (Windows 7)
• Bildbearbeitung mit Windows Picture Manager
• Bildbearbeitung mit Adobe Photoshop

Paint öffnen und Bild zum Bearbeiten auswählen

Sie können das Bild direkt im Explorer mit der Maus wählen und über einen Rechtsklick im sich öffnenden Menü „Öffnen mit“ » „Paint“ zum Bearbeiten laden. Alternativ können Sie Paint über Ihr Startmenü aufrufen und im Dateimenü über den Eintrag „Öffnen“ das gewünschte Bild im Dateidialog auswählen.

Am rechten unteren Rand des Programmfensters haben Sie die Möglichkeit die Darstellungsgröße des ausgewählten Bildes anzupassen. Speziell wenn Sie einen Bildausschnitt festlegen möchten ist das sicher recht hilfreich.

Tipp: Arbeiten Sie immer mit einer Kopie des original Bildes. Durch falsches Speichern können Sie sich sonst ggf. Ihre Quelldatei zerstören und diese lässt sich nicht wieder herstellen.

Bildausschnitt festlegen

Soll später nicht das ganze Bild in der Webseite abgebildet werden, haben Sie auch im Windows Paint die Möglichkeit einen Bildausschnitt festzulegen. Wählen Sie in der Symbolleiste dazu das entsprechende Symbol. Klicken Sie danach in das Bild und ziehen Sie mit geklickter Maustaste einen Rahmen auf, der den späteren Bildausschnitt abdeckt. Mit Hilfe der kleinen Anfasser an den Ecken und der Mitte der Kanten besteht die Möglichkeit zur Nachjustierung.

Entspricht die Auswahl Ihren Vorstellungen können Sie in der Symbolleiste auf „Zuschneiden“ klicken und das Bild wird anhand Ihrer Auswahl angepasst.

Bildgröße ändern

Zum Anpassen der Bildgröße wählen Sie in der Symbolleiste dein Eintrag „Größe andern“ aus. Im sich öffnenden Dialog haben Sie die Möglichkeit die gewünschten Größenangeben einzutragen. Dabei ist zu beachten, dass der Haken für „Seitenverhältnis beibehalten“ aktiviert ist, da sonst das Bild gestaucht bzw. gezerrt wird. Als Maßeinheit sollte entsprechend Pixel gewählt werden.

Sind alle Angaben nach Ihren Vorstellungen, können Sie die Größenänderung durch Klick auf „OK“ bestätigen und ausführen.

Bild speichern

Um die vorgenommenen Änderungen final zu speichern öffnen Sie die Menüleiste und fahren mit der Maus über den Eintrag „Speichern unter“, klicken diesen aber noch nicht an. Im weiteren Schritt wählen Sie „JPEG Bild“ aus und legen damit das Zielformat für die Datei fest.

Vergeben Sie dem Bild einen aussagekräftigen Namen, der Ihnen später bei der leichteren und schnelleren Dateiverwaltung behilflich ist und auch die Suchmaschinen bei der besseren Indizierung der eingebundenen Grafiken Ihrer Webseite unterstützt.

Des Weiteren besteht die Möglichkeit einen anderen Speicherort für die neue Datei anzugeben. Sind alle Einstellungen vorgenommen können Sie auf „Speichern“ klicken.

Tipp: Klicken sie direkt auf „Speichern“, so wird das originale Bild überschrieben und kann nicht mehr für weitere Projekte als solches verwendet werden.

In unserer kleinen Serie mit Tipps zum Aufbereiten von Bildern für Webseiten starten wir heute in das erste, kostenlose Programm. Im einleitenden Beitrag wurde bereits erklärt, warum Bilder für das Internet angepasst werden sollten.

Übersicht Serie Bildbearbeitung für das Internet

• Allgemeine Informationen zur Bildbearbeitung
• Bildbearbeitung mit IrfanView
• Bildbearbeitung mit Windows Paint (Windows 7)
• Bildbearbeitung mit Windows Picture Manager
• Bildbearbeitung mit Adobe Photoshop

IrfanView – freies Tool zur Bildbearbeitung

Eines der wohl am häufigsten genutzten, kostenlosen Bildprogramme ist IrfanView. Es steht frei zum Download im Web zur Verfügung und kann mit Plug-Ins vom Funktionsumfang erweitert werden. Das Grundprogramm bietet bereits grundlegende Möglichkeiten zum Bearbeiten der Bilder. Mit Hilfe eines kleinen Plug-Ins wird die Funktionalität insofern erweitert, dass Bilder direkt für das Web gespeichert werden können.

Download-Links:

• Hauptprogramm
• Plug-In-Paket

IrfanView öffnen und Bildbearbeitung starten

Starten Sie das Programm wie gewohnt über Ihr Startmenü, eine Desktop-Verknüpfung oder zum Beispiel einen ObjectDoc-Menüeintrag. Über das Dateimenü des Programms können Sie den Dateidialog zum Öffnen von Bildern aufrufen. Alternativ können Sie das gewünschte Bild auch im Explorer über die rechte Maustaste » „Öffnen mit“ » „IrfanView“ direkt auswählen.

Tipp: Arbeiten Sie immer mit einer Kopie des original Bildes. Durch falsches Speichern können Sie sich sonst ggf. Ihre Quelldatei zerstören und diese lässt sich nicht wieder herstellen.

Bildausschnitt festlegen

Nicht jedes Bild soll immer in voller Größe auf der Webseite zu sehen sein. Oftmals sind Ausschnitte aus dem Bild bedeutend interessanter.

• Ziehen Sie mit gehaltener, linker Maustaste einen Rahmen über das Bild auf, der dem gewünschten Ausschnitt entspricht
• Klicken Sie in der Menüleiste auf „Bearbeiten“ » „Freistellen“

Bildgröße ändern

Um die Größe des Bildes auf das gewünschte Maß zu bringen, wählen Sie im Dateimenü „Bild“ » „Größe ändern…“ aus. Alternativ können Sie auch die Tastenkombination „Strg + R“ drücken. Im sich öffnenden Dialog stehen Ihnen nun eine Reihe an Einstellungsmöglichkeiten zur Verfügung.

Im Bereich „Neue Größe“ können Sie die Werte für Breite bzw. Höhe eingeben. Die Einheit sollte auf Pixel eingestellt sein. Achten Sie dabei darauf, dass das Häkchen für die proportionale Änderung der Größen aktiviert ist. Andernfalls wird das Bild gestreckt oder gestaucht.

Ist ein DPI-Wert größer 96 angegeben, so können Sie diesen auf 96 DPI heruntersetzen. Werte wir 300 DPI sind im Printbereich üblich. Für das Internet reicht der geringere Wert, da die meisten Bildschirme nur auf 72 bzw. 96 DPI ausgelegt sind.

Bild für Web speichern

Haben Sie das oben genannte Plug-In Paket installiert, finden Sie im Dateimenü einen Eintrag „Speichern fürs Web… (Plug-In)“. Klicken Sie diesen Eintrag an und es öffnet sich ein Dialog mit Optionen zum Speichern der bearbeiteten Datei.

Als Zielformate empfehlen sich „JPEG“ oder „PNG“. Bei JPEG-Bildern haben Sie die Möglichkeit die Qualität der Grafik einzustellen. Je nach Ausgangsqualität des Bildes kann an dieser Stelle ein Wert um die 80% eingestellt werden. Werte größer 80% haben meist keinen erkennbaren Einfluss auf die Darstellung, wirken sich aber entsprechend stark auf die Dateigröße aus.

Nach dem Klick auf den „Save“-Button haben Sie die Möglichkeit den Zielordner und einen neuen Dateinamen anzugeben. Der Dateiname sollte idealer Weise einen aussagekräftigen Namen enthalten, der etwas über den dargestellten Inhalt aussagt. Das hilft Ihnen später beim Verwalten der Dateien und erleichtert zudem den Suchmaschinen das Indizieren der Grafiken, die in der Webseite eingebunden sind.

Manch einer mag denken, dass dank immer schnellerer Internetverbindungen die Dateigrößen von Bildern eher zweitrangig geworden sind. Am heimischen PC mit DSL scheint sich diese Annahme zunächst auch zu bestätigen. Aber das ist in diesem Fall zu kurzsichtig. Zum einen wird die Ladegeschwindigkeit einer Seite für Google immer wichtiger und fließt als Faktor ins Ranking ein und zum anderen darf auch der zunehmende Anteil an mobilen Zugriffen nicht vernachlässigt werden, die nicht immer über einen WLAN-Hotspot zugreifen.

Der Unterschied zwischen Darstellung und tatsächlicher Größe

Immer wieder kommt es auch vor, dass Webredakteure Bilder in Texte einfügen, die nicht oder unzureichend optimiert sind. So werden zum Teil Bilder direkt von der Digitalkamera verwendet, ohne diese zuvor größentechnisch an die Webseite anzupassen. Grund dafür kann zum einen Unkenntnis sein aber unter Umständen auch ein Missverständnis, dass die Bilder beim Einfügen über den WYSIWYG-Editor skaliert werden, wenn die Größe über den Editor angepasst wird. Der Trugschluss liegt allerdings dran, dass die Bilder nicht skaliert werden, sondern der Browser lediglich die Information erhält, in welcher Größe die Grafik dargestellt werden soll. Die Datei muss weiterhin in voller Größe herunter geladen werden, damit sie angezeigt werden kann. Erkennen lässt sich das meist bei Webseiten, bei denen die Bilder langsam, zeilenweise aufgebaut werden.

Bildformate wie JPG geben beispielsweise auch die Option, die Bildqualität anzupassen, wobei je nach Ausgangsqualität 80% ein guter Wert zur Optimierung darstellt. Alle höheren Werte werden meist durch das Menschliche Auge im Web nicht unbedingt wahrgenommen, da die Grafiken meist auch nicht in sehr großen Auflösungen in die Seite eingebunden werden.

Kostenlose Tutorials zur Bildbearbeitung

Mit einer kleinen Serie möchten wir Möglichkeiten vorstellen, wie Bilder für das Web aufbereitet werden können. Da die wenigsten Webnutzer Erfahrung mit Photoshop haben, werden vor allem kostenlose Programme vorgestellt.

Übersicht Serie Bildbearbeitung für das Internet

• Allgemeine Informationen zur Bildbearbeitung
• Bildbearbeitung mit IrfanView
• Bildbearbeitung mit Windows Paint (Windows 7)
• Bildbearbeitung mit Windows Picture Manager
• Bildbearbeitung mit Adobe Photoshop

Je nach Projekt kommt es immer wieder einmal vor, dass man Zahlwerte mit einer oder mehrerer führenden Nullen ausgeben muss. Nun gibt es die Möglichkeit, jedes Mal auf´s neue eine Funktion zu schreiben, bei der man über mehrere if-Abfragen zum Ziel gelangt. In diesem kleinen Tutorial möchte ich eine kleine PHP-Funktion vorstellen, die das ganze dynamisch erledigt.

Quellcode PHP-Funktion für führende Nullen

function leadingNulls( $int, $string = "00000000" ){
	$lenghtInt = strlen( $int );  # count chars of integer value

	# check if length of integer value is smaller than given string 
	# length with null values
	if( $lenghtInt < strlen( $string ) ){
		$lenghtInt *= -1; # negate lengt value
		# cut integer value lenght of from the end of string 
		# and add integer value
		$string = substr( $string, 0, $lenghtInt ).$int; 
	} else {
		# if string length of integer value is greater just set 
		# string with integer value
		$string = $int;
	}
	return $string;
}

Wie die Funktion arbeitet

Auch wenn die PHP-Funktion recht einfach aufgebaut ist, möchte ich allen Anfängern hier noch eine kurze Erklärung geben, wie das ganze funktioniert:

• Die Funktion nimmt zwei Parameter entgegen. Der erste Wert ist der Integer-Wert, den wir mit den führenden Nullen versehen wollen. Der zweite Wert ist optional und legt die Zeichenlänge der auszugebenden Zahl fest.  Per Default sind es 8 Zeichen. Es könnten theor. auch andere Zeichen übergeben werden, aber das würde dann dem Funktionsnamen ein wenig widersprechen.
• Zunächst wird die Anzahl der Ziffern des Interger-Wertes ermittelt.
• Danach prüfen wir, ob die Ziffernanzahl kleiner ist als die Anzahl der auszugebenden Zeichen. Wenn die Anzahl größer oder gleich ist, überschreiben wir einfach den auszugebenden String, da es sonst zu Fehler-Meldungen kommen könnte.
• Ist der Wert kleiner, dann negieren wir den Wert für die Ziffernlänge.
• Die PHP-Funktion substr() übernimmt dann den Rest der Arbeit. Durch den negierten Wert wird der Funktion übermittelt, dass soviele Zeichen vom Ende der Zeichenkette entfernt werden sollen, wie es Ziffern  gibt. Anschließend hängen wir einfach unseren Zahlwert ans Ende des beschnittenen Strings.
• Abschließend werd der fertige String via return zurück gegeben.

Beispiele für den Funktionsaufruf

Hier noch drei Beispiele für den Aufruf der Funktion.

# call function leadingNulls with default string length
echo leadingNulls( 300 );
# Ausgabe: 00000300

# call function leadingNulls with definded string length
echo leadingNulls( 300, "0000" );
# Ausgabe: 0300

# call function leadingNulls with definded string length
echo leadingNulls( 300, "00" );

# Ausgabe: 300

Tipp: Wie am letzten Beispiel zu sehen ist, wird die Funktion ein wenig nutzlos, wenn der Integer-Wert mehr Ziffern hat, als der String, der zurückgegeben werden soll. Bei Einzelwerten mag das sicher nicht so schlimm sein. Wenn jedoch eine ganze Tabelle gefüllt werden soll, sieht das doch ein wenig unschön aus. In dem Fall sollte man die Länge des Strings wohl noch einmal anpassen.

Heute fand der Vortrag zum Thema “Social Media – mehr als nur Facebook” im Rahmen des 2. Leo-Unternehmerstammtisch statt. Für alle, die nicht teilnehmen konnten und natürlich auch für diejenigen, die sich noch einmal die Inhalte anschauen möchten, gibt es hier nun die gekürzte Präsentation. Inhaltlich ist alles vorhanden, lediglich ein paar aufbauende Zwischenschritte wurden entfernt, damit sich der geneigte Leser schneller durch das Dokument arbeiten kann.

Ich möchte an dieser Stelle noch meinen Danke an den Leo-Club Bautzen aussprechen, der mir diese Präsentation ermöglicht hat und natürlich auch an die Teilnehmer der Veranstaltung. Wer mag, darf natürlich gern hier einen Kommentar hinterlassen.

Für alle, die nicht vor Ort waren möchte ich noch erwähnen, dass natürlich nicht alle Inhalte des Votrags und der daraus resultieren Fragen und Diskussionen in der Präsentation Platz gefunden haben. Von daher bitte ich dies bei der Lektüre zu beachten.

Vortrag “Social Media – mehr als nur Facebook” als PDF (1.94 MB) downloaden

Bildquelle: gerard79 bei sxc.hu

Bis vor kurzem war das Web 2.0 noch das ganz große Ding im Bereich Internet. Inzwischen haben sich die meisten an die neuen Technologien gewöhnt. Dank der vielen Interaktionsmöglichkeiten konnte sich der Begriff „Social Media“ immer mehr in den Fokus der Webgemeinde richten und große Communities wie Facebook, Twitter und youTube stehen repräsentativ an erster Stelle, wenn über das Thema gesprochen wird. Die Nutzerzahlen wachsen täglich und auch immer mehr Firmen sehen Potentiale für die Stärkung der eigenen Marke.

Kleine inhaltliche Vorschau

Dass Social Media aber nicht nur auf wenige Global Player herunter gebrochen werden kann soll Gegenstand des 2. LEO-Unternehmer Stammtisch werden. Der Vortrag von Christian Klinger – Inhaber der Firma Klinger-webDESIGN – soll einen kleinen Einblick in die Vielfalt der Angebote liefern und den Teilnehmern die Möglichkeit geben Fragen zu stellen und Entscheidungshilfen zu liefern, welcher Dienst evt. der richtige für die eigenen privaten oder auch beruflichen Ziele ist. Den Gästen werden dabei allerdings keine abgeschlossenen Social Media- oder Online Marketing-Konzepte geliefert, denn darin liegt weder der Fokus der Firma Klinger-webDESIGN noch würde der zeitliche Rahmen dazu ausreichen. Ziel ist die Sensibilisierung auf das Thema im Allgemeinen.

Zeit für Diskussionen

Im Anschluss an den Vortrag besteht die Möglichkeit über die Inhalte weiter zu diskutieren und Erfahrungen auszutauschen. Für die Planung von Auftritten im Sozialen Web und die Planung von Kampagnen können dann passende Ansprechpartner vorgestellt bzw. vermittelt werden.

Fakten

• Titel: 2. Leo- Unternehmer Stammtisch: “Social Media – mehr als nur Facebook”
• Datum: 8. März 2012, 18:00 – 21:00 Uhr
• Ort: Staatliche Studienakademie Bautzen, Löbauer Straße 1, 02625 Bautzen – Raum 103
• Referent: Christian Klinger
• Voranmeldung erwünscht: https://www.facebook.com/#!/events/249983905083504/

Bildquelle: gerard79 bei sxc.hu

Im Rahmen der Erweiterung einer Webseite sollte unter anderem ein Slider eingebunden werden, der verschiedene Produkte vorstellt. Da bereits andere Funktionalitäten der Seite auf dem prototypes-Framework basierten, sollte auch für dieses Tool prototype die Grundlage sein.

Die Suche nach einem passenden Script erwies sich als wenig erfolgreich und die Erstellung eines eigenen Scriptes war damit nahe liegend. Im Gegensatz zu einigen bestehenden Varianten sollten die Produkte vollständig rotieren, ohne dass am Ende der Liste angekommen schnell zurück gespult wird.

Der Trend scheint zwar eindeutig mehr in Richtung jQuery zu gehen, aber für alle, die ebenfalls einen Image-Slider auf Basis von Prototype benötigen, möchten wir hier unseren Code zum Download und freien Verwendung anbieten.

Über ein Feedback und/oder Verlinkung würden wir uns sehr freuen.

Eine jQuery-Version ist für die Zukunft ebenfalls geplant.

Download & Demo

Download | Demo-Seite

Auch wenn es eher unwahrscheinlich ist, möchten wir an dieser Stelle dennoch darauf hinweisen, dass wir für eventuell auftretende Schäden, die in Zusammenhang mit der Verwendung des Quellcodes auftreten, keine Haftung übernehmen.

SEO steht für Search Engine Optimization oder zu Deutsch: Suchmaschinenoptimierung. Viele gehen davon aus, dass das nur etwas für Webmaster und Profis ist. Dem ist aber nicht ganz so, denn auch die am besten optimierte Webseite wird nur wenig Erfolg haben, wenn die Inhalte – also die Texte im Contentbereich der Webseite – nicht auch einigen Grundlagen der SEO folgen.

Im Folgenden sollen 10 Tipps für Redakteure gegeben werden, wie sie ihre Texte optimieren können. Einige davon werden vielleicht schon unbewusst angewandt, andere aus Bequemlichkeit ignoriert.

1. Text wird für Menschen geschrieben

Damit Beiträge gelesen werden, ist Suchmaschinenoptimierung nicht ganz zu vernachlässigen. Allerdings sollte bei dem Verfassen des eigentlichen Textes darauf geachtet werden, dass man nicht für Google, Bing und Co schreibt, sondern für reale Menschen. Genau diese Zielgruppe versuchen die Suchmaschinenanbieter nach und nach immer besser zu imitieren. Dazu werden die Algorithmen immer mehr verfeinert und es kommen ständig neue mit hinzu.

Will man zielgerichtete Texte schreiben, ist es sicher nicht verkehrt, sich eine Liste mit den wichtigsten Keywords auf ein Blatt Papier zu schreiben und dazu auch passende Synonyme zu notieren. An dieser Liste kann sich der Redakteur dann orientieren. Dabei müssen aber nicht auf Teufel komm raus alle Schlagwörter verwendet werden – auch wenn das vorher noch so viel Arbeit gemacht hat. Eine Aneinanderreihung von Keywords bringt weder dem Leser was noch dem Ranking, da diese Technik schnell erkannt wird und gegebenenfalls zur einer Verschlechterung des Ranking führen kann.

2. Wichtige Inhalte an den Anfang des Textes

Inhaltlich sollte nicht ganz vergessen werden, dass die wichtigsten Aussagen am Anfang des Textes getroffen werden. Leser im Web sind ungeduldig und wenn nicht gleich zu Beginn des Textes entscheidende Informationen bereitgestellt werden, dann sinkt die Wahrscheinlichkeit, dass dieser bis zum letzten Satz auf der Seite verweilt. Man kann sich das wie eine auf den Kopf gestellte Pyramide vorstellen. Auch Suchmaschinen indizieren eine Seite nur bis zu einem gewissen Punkt. Bei besonders langen Texten ist die Überlegung, die Inhalte themenorientiert auf mehrere Seiten zu verteilen sicher nicht ganz verkehrt. Gerade bei Tutorials findet man immer wieder die Aufteilung in Serien. Dabei könnte ein Teil zum Beispiel eine Einleitung für Anfänger sein und der nächste dann ein aufbauendes für Fortgeschrittene. (Natürlich hat das ganze auch einen wirtschaftlichen Hintergrund, der an dieser Stelle aber keine Rolle spielen soll)

3. Überschriften richtig einsetzen

Überschriften sollten nicht nur danach aussehen, sondern auch als solche ausgewiesen sein. Leider werden Überschriften immer wieder nur als fett markiert und in der Schriftgröße geändert. Dass ist im eigentlichen Sinne des HTML allerdings keine Überschrift und wird von Suchmaschinen auch nicht entsprechend in das Rankingverfahren aufgenommen. Die WYSIWYG-Editoren (What you see is what you get) bieten im Normalfall die Möglichkeit an, Überschriften als solche zu kennzeichnen. Dabei ist es wichtig, dass die Überschriftenhierarchie eingehalten wird.

Überschriften dienen der Gliederung von Texten in einer Webseite und sollten einen aussagekräftigen Inhalt enthalten, der den folgenden Text kurz beschreibt. Dabei ist es sicher nicht verkehrt, Keywords gezielt einzusetzen oder auch Aussagen, die zum Lesen animieren.

4. Schlüsselwörter und Wortgruppen hervorheben

Das Markieren von Keywords oder Wortgruppen als fett hat zwei entscheidende Vorteile. Zum einen erleichtert es dem Leser das Überfliegen des Textes nach der passenden, interessanten Stelle. Und zum anderen deuten auch Suchmaschinen fett hervorgehobene Textabschnitte als wichtigeren Bestandteil des Textes. Aber Vorsicht! Ein zu viel ist an dieser Stelle sicher nicht angebracht. Es empfiehlt sich also nicht, einfach den ganzen Text fett darzustellen.

5. Aufzählungen als Listen erstellen

Immer wieder kommt es vor, dass in Texten Aufzählungen erscheinen. Bei einem Kochrezept zum Beispiel die Zutatenliste oder bei einer Top 10 der beliebtesten Dinge. Der Onlineredakteur sollte in diesem Fall die einzelnen Punkte nicht einfach untereinanderschreiben, sondern die einzelnen Punkte auch als Liste markieren.

Listen sind zusammengehörige, strukturierte Elemente und werden auch als solches verarbeitet. Natürlich ist auch eine Verschachtelung der Listen möglich. Um bei dem Beispiel von oben zu bleiben: bei der Zutatenliste kommt eine unsortierte Liste zum Einsatz und bei den Top 10 eine sortierte Liste.

6. Aussagekräftige Dateinamen vergeben.

Angesichts dessen, dass Suchmaschinen auch nach Bildern, PDF´s, Word-Dateien usw. suchen, empfiehlt es sich, den Dateien einen passenden Namen zu geben. Ein Beispiel: document.doc bringt bei weitem nicht den gewünschten Erfolg wie seo-tipps.doc.

7. Bilder mit alternativen Bildbeschreibungen versehen.

Beim Einfügen von Bildern in Texte mit Hilfe eines WYSIWYG-Editors besteht immer die Möglichkeit einen Alternativen Text für das Bild anzugeben. Davon sollte zwingend Gebrauch gemacht werden. Diese ALT-Texte werden nicht nur angezeigt, wenn die Bilder im Browser deaktiviert sind, sondern sind für Screenreader und Crawler gleichermaßen interessant. Anhand der Beschreibung können Rückschlüsse auf das Bild getroffen werden. Keywords darin wirken sich auf das Ranking der Seite aus und Bilder können so auch besser über die Bildersuche gefunden werden.

8. Links mit einem Titel auszeichnen

Beim Einfügen von Links, die zum Beispiel zu weiteren Informationen führen gibt es zwei Dinge die beachtet werden sollten. Der offensichtliche Teil besteht in dem angezeigten Linktext, also der Bereich, der klickbar ist und auf die gewünschte Zielseite führt. Hier bietet es sich an, eine kleine Wortgruppe zu verwenden, die aussagekräftige Keywords über den Inhalt der verlinkten Seite/des verlinkten Dokumentes enthalten. Auf Linktexte wie „hier klicken“, „mehr…“ oder ähnlichen Wörtern, die keinen Ausschluss auf den Inhalt des Links zulassen, sollte verzichtet werden. Ein Beispiel: „Wenn Sie mehr dazu erfahren wollen, dann klicken sie hier!“ – das ist die schlechte Variante. Nun eine bessere: „Unter dem folgenden Link erfahren Sie mehr zum Thema: Wie kann ich besser Texte für das Web schreiben?“

Der weniger offensichtliche Teil besteht in der Vergabe eines passenden Linktitels. Dieses Attribut wird angezeigt, wenn man mit der Maus über dem Link verweilt. Natürlich dient der Inhalt auch wieder den Screenreadern und auch die Suchmaschinen greifen gern darauf zurück, um den Link besser einordnen zu können.

Usability-Tipp am Rande: Wenn anstatt des Linktextes ein Bild verwendet wird, dann empfiehlt es sich, Alt-Text vom Bild UND Titel des Links einzugeben.

9. Interne Verlinkung

Wer regelmäßig Texte für seine Webseite/seinen Blog verfasst, der wird früher oder später Beiträge verfassen, die einen Bezug zu einander haben oder auf Artikeln aufbauen, die auf anderen Seiten veröffentlich wurden. Speziell bei den hauseigenen Texten kann am Ende eine kleine Liste mit weiterführenden Angeboten aufgeführt werden. Diese interne Verlinkung erleichtert es den Crawlern die Seite schneller zu indizieren und Leser werden eventuell durch die weiteren Inhalte etwas enger an die Seite gebunden.

10. Bekanntmachung der Inhalte’

Nach der Fertigstellung des Textes und dessen Publizierung im Web, soll das Werk von so vielen Lesern wie möglich konsumiert werden. Speziell Blogs bieten mit den Pingdiensten eine gute Möglichkeit, die neuen Beiträge bei Webseiten anzumelden. Da dieser Teil aber nicht von dem Redakteur beeinflusst werden kann, soll an dieser Stelle auch nicht weiter darauf eingegangen werden.

Aber auch Redakteure können ihren Beitrag dazu leisten, den Artikel dem World Wide Web bekannt zu machen. Eine Möglichkeit besteht darin, über bekannte Soziale Netzwerke den Link zu verbreiten. So zum Beispiel über Twitter, Facebook oder den Plauderkasten der VZ-Angebote. Hat der Redakteur die Möglichkeit einen Newsletter zu versenden, dann stellt sicher auch dieser eine gute Möglichkeit der Publikation dar. Und natürlich sollen an dieser Stelle auch die unzähligen Foren und Blogs nicht unerwähnt bleiben. Wer dort als Redakteur öfters aktiv ist und Gastartikel oder Kommentare verfasst, der kann an passenden (!) Stellen auch auf seinen Beitrag verweisen. Aber Vorsicht! Hier ist ein gesundes Maß geboten, damit nicht der Verdacht des Spammings auftritt. Vor allem sollten die Seiten auch themenrelevant sein und bestenfalls selber ein sehr gutes Ranking aufweisen.

Abschlussbemerkung

Redakteure, die sich an diese 10 Tipps halten, leisten einen Beitrag zur Verbesserung des Rankings. Sollten einige der oben beschrieben Funktionen in Ihrem System nicht vorhanden sein, dann nehmen Sie bitte Kontakt mit ihrem Webmaster auf, dass er diese einstellt bzw. freigibt.

Da die Suchmaschinenoptimierung ein sehr komplexes Thema ist, darf aber auf keinen Fall davon ausgegangen werden, dass bei der Befolgung dieser Tipps zwingend ein erster Platz bei den Suchergebnissen zur Folge steht. Dafür muss unter anderem die Seitenstruktur sauber definiert sein und nicht zu letzt kommt es auch auf den Suchbegriff an. Wer zum Beispiel unter dem Begriff „Urlaub“ ohne große finanzielle Aufwendungen auf Platz eins landen will, der sollte sich nicht all zu große Hoffnungen machen. Ein Gespräch mit einem kompetenten Webmaster, der sich auf dem Gebiet der Suchmaschinenoptimierung auch wirklich auskennt und ohne zwielichtige Tricks arbeitet, ist in so einem Fall zwingend notwendig.

Ich wünsche allen Redakteuren viel Erfolg beim Schreiben des nächsten Beitrages!