Linksammlung:
- Fehleranalyse: http://www.seitenreport.de/
- W3C Validator: (Standard): http://validator.w3.org/ (Hier sollten KEINE Fehler vorhanden sein)
- W3C CSS Validator: (Standard) : http://jigsaw.w3.org/css-validator/ (Hier sollten KEINE Fehler vorhanden sein)
- Allgemeines zum Thema Webentwicklung & Design: http://www.smashingmagazine.com/
- Einsteiger Lektüre zum Thema SEO: (Tiefgründiger als hier): http://www.sistrix.de/suchmaschineno...er-einsteiger/
- Impressum Generator: http://www.e-recht24.de/impressum-generator.html
- Impressum - Was ist das?: http://www.e-recht24.de/artikel/datenschutz/209.html
- Datenschutzhinweis Google Analystics: http://www.google.com/intl/de_ALL/analytics/tos.html
Rechtliches bei der Erstellung einer Webseite:
1. Das Impressum:
In Deutschland besteht grundsätzlich die Impressumspflicht!
Was ist ein Impressum:
- http://www.e-recht24.de/artikel/datenschutz/209.html
Wie erstelle ich ein Impressum
Eine Variante wäre die Online-Variante:
- http://www.e-recht24.de/impressum-generator.html
Die sicherere wäre ein vertrauenswürdiger Jurist!
2. Die Datenschutzhinweise:
Falls Google Analystics verwendet wird, ist auch ein Datenschutzhinweis nötig!
Diesen findet Ihr hier:
- http://www.google.com/intl/de_ALL/analytics/tos.html
Es gibt ein Gesetz, dass besagt, dass der Besucher seine Daten auf der fremden gespeicherten Webseite einsehen darf.
Der Betreiber der Webseite muss diese dann unverzüglich schriftlich zusenden.
Dieser Dienst ist kostenlos. Ich suche später nochmal den richtigen § dazu.
__________________________________________________ __________________________________________________ __________________________
Wichtiges beim Erstellen der Webseite selbst:
1. Der Doctype:
Der XHTML 1.0 Transitional Doctype, den viele Editoren vorschlagen, wird nicht mehr genutzt.
Warum?
- Er ist langsam
- Er verursacht viele Fehler
Statdessen?
Eine erhebliche bessere Wahl ist der XHTML 1.0 Strict Doctype.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. externe CSS-Definitionen:
CSS-Definitionen sollten immer in einen extra Ordner (z.B /htdocs/css/) abgelegt werden und im jeweiligen Dokument im Header eingebunden werden.
Warum?
- Weniger Quellcode in den jeweiligen Daten
- Erhebliche Beschleunigung der Ladezeiten
- Schnellere indizierung durch die Suchmaschinen
Beispiel:
FALSCH
<table stlye="width:20px; height:10px"></table
RICHTIG
<link rel="stylesheet" type="text/css" href="verzeichnis/meinestyles.css">
<table class="css_table_extern"></table>
meinestyle.css
.css_table_extern {
width: 20px;
height: 10px;
}
3. Zeichenkodierung:
Die Zeichenkodierung sollte immer auf UTF-8 stehen.
Warum?
- Richtige Darstellung der Sonderzeichen. (Ö Ä Ü usw.)
- Bessere und schnellere Verarbeitung der W3C Validatoren.
Beispiel:
<meta **********="Content-Type" content="text/html; charset=UTF-8" />
WICHTIG: Auch der Editor mit dem Ihr arbeitet muss auf UTF-8 abspeichern!
4. Spaghetti-Code:
Spaghetti-Code sind HTML Elemente, die den Text bzw andere Formatierungen ausüben. Diese sollte man meiden!
Formatierungen sollten ausschließlich über externe CSS-Definitionen vorgenommen werden.
Warum?
- Erschwertes nachträgliches Designen. (Mit externen CSS-Definitionen kein problem)
- Unnötiger Quellcode, der die Seite langsamer macht.
4. Layout-Tabellen:Beispiel:
<table width="20px" height="10px" text-align="left"></table>
Layout-Tabellen liegen hinter der heutigen Zeit und sollten nicht mehr verwendet werden.
Man kann wirklich alles mit externen CSS-Definitionen lösen!
Warum?
- Erschwertes nachträgliches Designen. (Mit externen CSS-Definitionen kein problem)
- Unnötiger Quellcode, der die Seite langsamer macht.
- Keine skalierung durch den Webbrowser möglich. (Usability, Barrierefreiheit)
Beispiel:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<div class="table_css">
<ul>
<li></li>
<li></li>
</ul>
</div>
5. Applets & Framesets:
Applets & Framesets sind vollkommen veraltet und versauen so ziemlich Alles zur Barrierefreiheit und Usability.
NICHT verwenden!
Statdessen?
Anstelle der Applets werden Javascript Applikationen benutzt. Gutes Stichwort: jQuery
Framesets einfach sterben lassen. Ohne Worte.
6. Language-Key:
Der xml:lang Key und der Meta Bereich für die Language muss vergeben sein!
Warum?
- Richtige sprachliche Einsortierung der Suchmaschinen.
- Möglichkeit die Seite von gewissen Diensten übersetzen zu lassen. (Usability)
7. ALT-Attribute für Bilder:Beispiel:
<meta **********="Content-Language" content="de" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
Ein unbedingtes MUSS ist die Ausfüllung des Alt-Attributs in Bildern!!(!)
Warum?
- Bei fehlendem Bildern oder Textbrowsern weiss ein User dennoch, was dort sein SOLLTE. (Usability)
- Die Suchmaschinen können Bilder ohne Alt-Attribut nicht interpretieren. Mit Alt-Tag wird dieser aufgenommen.
Hinweis:
Bilder, die für's Layout benutzt werden (z.B Hintergründe) sollten zwar auch das Alt-Tag besitzen, aber unausgefüllt!
Beispiel:
Conten-Bild:
Kurze präziese Stichworte/Keywords
- Aber nicht übertreiben, denn stark wiederholdende Keywords werden abgestraft und mindern die Wertung der Suchmaschinen -
<img src="http://www.example.org/grafiken/baeckerei.gif" alt="Bäckerei Müller">
Layout-Bild
<img src="http://www.example.org/grafiken/baeckerei.gif" alt="">
8. Title-Attribute für Links:
Ein unbedingtes MUSS ist die Ausfüllung des Title-Attributs in Links!!(!)
Warum?
- Zusätzliche Informationen für den Besucher, wo der Link hinführt. (Usability)
- Zusätzlicher Content für die Suchmaschinen.
Beispiel:
<a href="/kontakt" title="Kontakt zu uns aufnehmen">Kontakt </a>
9. Meta-Description:
Die Meta Description ist auch ein wichtiger Fakt für die Suchmaschinen.
Warum?
- Taucht als Beschreibung bei den Suchmaschinen auf.
- Fließt mit ins Keyword-Ranking der Suchmaschinen ein.
Hinweis:
Die Description sollte nicht mehr als 150 Zeichen haben. Alles was über die 150 Zeichen hinaus geht wird von Google 'abgehackt' und ist nicht lesbar.
Außerdem sollte jede Seite eine andere passende Beschreibung mit möglichst treffenden Keywords haben. Aber benutzt nicht zuviele Keywords.
Menschen lesen diese Beschreibung auch!
10. <title>-Tag:Beispiel:
<meta name="description" content="150 Zeichen einer netten Beschreibung der aktuellen Seite kommen hier rein"/>
Nutz den Title-Tag und förder damit das Keyword-Ranking und die Usability!
Warum?
- Keywords werden aufgenommen.
- Informationen für den Besucher. (Usability)
- Der Besucher weiss bei richtiger Anwendung, wo er gerade ist. (Usability)
Hinweis:
Jede Seite muss einen anderen Title-Tag besitzen. Siehe Beispiel
11. Andere HTML Tags:Beispiel:
Name - Wo ist man - Keywords - Slogan
<title>Fotografie Karmashots- Kontakt – Ansprechpartner und Kontaktdaten, Ihr Fotograf in Krefeld</title>
oder
<title>Fotografie Karmashots- Über mich – Geschichte und Motto, Ihr Fotograf in Krefeld</title>
oder
<title>Fotografie Karmashots- Galerie – Bildergalerie und Referenzobjekte, Ihr Fotograf in Krefeld</title>
usw
Nutzen Sie die verschiedenen Tags. Sie werden unterschiedlich von den Suchmaschinen gewertet.
Hinweis:
Die Überschriften Tags <h1> - <h6> sollten genutzt werden, da die Suchmaschinen diese unterschiedlich stark anerkennt.
Außerdem wird der <b> Tag ebenfalls beachtet.
Mehr dazu findet Ihr im angegebenen Link 'Seo für Einsteiger'
- http://www.sistrix.de/suchmaschineno...er-einsteiger/
Beispiel:
<h1>Bäckerei Kirkens</h1>
<h2>Qualität. Geruch. Geschmack. Bei uns stimmt alles!</h2>
Wir sind eine leckere Bäckerei mit <b>internationalen Spezialitäten</b> und <b>Gemüse</b>
<h3> internationalen Spezialitäten </h3>
Auflistung....


LinkBack URL
About LinkBacks
Zitieren

Lesezeichen