Themen
Tutorials
Tools
10 Tipps zur Webseitenerstellung
Die Voraussetzung für die Erstellung einer guten Webseite ist ein gutes Know-how, was oftmals unterschätzt wird. Lesen Sie 10 Tipps dazu..
1. Erstellen Sie eine zeitgemäße Webseite
Vermeiden Sie nervige Flashintros, sie sind nicht mehr zeitgemäß. Ebenso sollten Sie unbedingt auf Laufschriften oder andere blinkenden Buttons verzichten, wenn es sich bei Ihrer Seite nicht gerade um ein Online-Spielcasino handelt. Eine ruhige, logisch aufgebaute Seite mit dezenten Effekten ist wesentlich angenehmer und stilvoller als ein Flashbuttongewitter.
Mit zunehmender Informationsflut durch aufdringliche Effekte steigt auch die Unfähigkeit des menschlichen Gehirns das Wesentliche, nämlich den eigentlichen Inhalt vollständig zu erfassen. Verwenden Sie ebenfalls keine Pop-up-Fenster, sie sind nervig, wenig informativ und wirken unseriös.
Versuchen Sie zudem eine Seite mit möglichst wenig Scrollbalken zu erstellen. Hoch und runterscrollen ist akzeptabel, ein zweiter innerer Scrollbalken ist schlecht, horizontales scrollen ist sogar ein echtes No-go.
2. Eine vernünftige Entwicklungsumgebung
Setzen Sie Ihr Projekt nicht in einem WYSIWYG-Editor um, sondern verwenden Sie dafür eine vernünftige Entwicklungsumgebung, mit der Sie den Quelltext auch selber bearbeiten.
Es gibt eine Reihe von guten bis sehr guten Editoren, wählen Sie einen der Ihnen sympathisch ist. Zudem sollte er u.a. folgendes bieten:
- das Setzen von Lesezeichen
- die Hervorhebung beider Klammern, wenn der Cursor sich auf einer von beiden befindet
- die farbliche Gestaltung verschiedener Syntaxelemente (Syntaxhervorhebung)
- die Funktion 'Suchen und Ersetzen'
- die Autovervollständigung von Quellcode
3. Beachten Sie das Internetrecht
Auf Audio-, Video-, Bild- und Textmaterial aus dem Internet besteht meistens ein Urheberrecht. Die Nutzung bedarf einer Genehmigung des Urhebers, zudem müssen die Quelle und der Autor mit angegeben sein. Desweiteren ist der Webseitenbetreiber verpflichtet den Content und Verlinkungen zu überprüfen, das betrifft z.B. Gästebücher, Foren und Communityseiten auf denen Nutzer Beiträge erstellen können. Online-Abos wie z.B. Newsletter müssen die Möglichkeit bieten diese auch wieder abzubestellen. Ebenfalls ist das Datenschutzgesetz zu beachten. Wenn ein Nutzer nicht gewillt ist seine Daten wie Name, Adresse, Telefonnummer usw. von sich zu veröffentlichen muss er die Möglichkeit haben solche Angaben zu verbergen.
Ein Hinweis, dass der Betreiber nicht für den Inhalt externer Webseiten verantwortlich ist, reicht übrigens nicht aus. Höchst wahrscheinlich ist er tatsächlich nicht für den Inhalt verantwortlich, dafür aber für die Verlinkung zu dieser Seite.
4. Page Speed-Optimierung durch CSS-Sprites
Für jedes Bild findet ein HTTP-Request statt. Daher bietet es sich an kleine Icon-Bilder nebeneinander auf eine einzige Bilddatei zusammenzuquetschen und mittels CSS immer nur auf einen gewünschten Ausschnitt zuzugreifen. Dadurch lässt sich ein schnellerer Seitenaufbau erzielen, da jetzt nur noch ein HTTP-Request gleichzeitig für alle Bilder erfolgt.
In Zeile 140 wird mit der Klasse .image das gesamte Bild geholt. Mit der ID #icon wird der Ausschnitt mit einer Größe von 16x16 Pixel und den Koordinaten -5 und -16 Pixel 'herausgeschnitten'. Es wird also von der linken oberen Ecke des Gesamtbildes aus die Stelle benötigt welche sich 5 Pixel weiter rechts und 16 Pixel weiter unten befindet. Jetzt kann anstatt eines <img> - Elementes ein DIV-Container mit der ID #icon und der Klasse .image erstellt werden. Benötigt man nun einen weiteren Auschnitt wird eine neue ID #icon2 definiert und ein weiterer DIV-Container mit der ID #icon2 und der Klasse .image erstellt..
5. Nutzen Sie das PHP Error Reporting richtig
Stellen Sie in der Entwicklungsversion das Error Reporting auf E_ALL, damit alle Fehler, also auch die Notice-Warnungen, welche defaultmäßig in der php-ini-Datei deaktiviert sind, erscheinen. Notice Warnungen dienen u.a. zur Überprüfung ob Variablen vor Ihrer Verwendung initialisiert wurden. Also empfielt es sich am Anfang des Scriptes folgendes zu schreiben..
Durch die Einstellung von display_errors in Zeile 5 lässt sich festlegen ob die Fehler angezeigt werden sollen (Wert = 1 in der Entwicklungsversion) oder nicht (Wert = 0 in der Live-Version).
6. Verwenden Sie Konstanten in PHP
Zahlenwerte und PHP-Variablen die sich im weiteren Verlauf des Skriptes nicht mehr ändern, sollten als Konstanten definiert werden. Zum einen besteht dann nicht mehr die Gefahr dass weiter verwendete Variablen durch neue Wertzuweisungen ausversehen verfälscht werden und zum anderen lassen sich Änderungen leichter vornehmen, da nur einmalig der Wert der Konstante geändert werden muss. Dazu ein paar Beispiele..
In Zeile 19 wird mit define eine Konstante festgelegt. 'MAX_WERT' ist der Konstantenname, 100 ist der zugewiesene Wert. In Zeile 33 wird durch echo das Ergebnis ausgegeben. Es ist auch möglich innerhalb einer Klasse Konstanten mit const festzulegen (Zeile 24) und diese aufzurufen (innerhalb der Klasse mit self::Konstantenname (Zeile 26), außerhalb der Klasse mit Klassenname::Konstantenname (Zeile 30)).
7. Achten Sie auf Skalierbarkeit
Denken Sie daran, dass Ihre Webanwendung mit der Zeit wachsen könnte, verbauen Sie sich daher nicht vornherein schon die Möglichkeiten dazu. Ein gut ausgereiftes Konzept mit Weitblick ist als Grundlage enorm wichtig. Denken Sie z.B. daran Ihren Internetauftritt mehrsprachig zu gestalten, so wäre es sinnvoll die Texte nicht direkt in HTML einzubetten, sondern durch einen switch-case zu behandeln. Das könnte in etwa so aussehen:
Die Konstante LAN wird vorher mit einem Wert (entweder 'de' oder 'en') definiert, welcher z.B. aus einer Datenbank geholt wurde. Jetzt ließe sich leicht eine weitere Sprache hinzufügen.
8. Der Einsatz von var_dump
Die Funktion var_dump ist ein sehr nützliches Hilfsmittel für Webentwickler, sie gibt übersichtlichere Informationen über Arrays und Objekte. Das folgende Beispiel soll dies etwas verdeutlichen..
Ein Array wird in eine gut leserliche Struktur gebracht, es besteht aus 2 weiteren Arrays, deswegen die 2 in der Klammer in Zeile 23. Das erste Element hat den Index = 0 und besteht aus 2 weiteren Elementen (Zeile 24), das erste ist ein String mit 8 Zeichen, das zweite ein String mit 9 Zeichen (Zeile 25)..
9. Komprimierung von Dateien
Durch gzip lassen sich Javascript- oder CSS-Dateien deutlich komprimieren. Dies kann mehrere Kilobyte pro Seitenaufruf sparen was einen schnelleren Seitenaufbau bewirkt. Dieser Aspekt ist nicht zu unterschätzen, da die Geduld des Nutzers in unserer schnelllebigen Gesellschaft nicht sehr groß ist, im schlimmsten Fall führen lange Ladezeiten sogar zum Verlassen der Seite.
Bilddateien können ebenfalls verlustfrei komprimiert werden, dazu gibt es jede Menge kostenlose Tools im Internet die so etwas bieten. Ebenfalls sollten die Bildabmessungen als HTML-Attribute (Breite und Höhe) angegeben sein, dies bewirkt ein schnelleres Rendern.
10. Internetsicherheit
Eine Variante wie Sie eine SQL-Injection (d.h. einen Angriff auf die Datenbank) erschweren können wird auf der Seite MD5-Hash-Generator beschrieben. Neben so einem Datenbank-Angriff gibt es noch weitere Schwachstellen die eine ungeschützte Internetseite bieten kann, z.B. das Cross-Site-Scripting (XSS). Hierbei wird die Webseite durch den Hacker manipuliert indem er versucht schädlichen Javascript einschleusen, schlimmstenfalls wird dieser sogar in Datenbanken gespeichert. Aus diesem Grund sollten die Sonderzeichen von Benutzereingaben die ein ausführender Javascript-Code benötigt entwertet werden. In PHP funktioniert das z.B. mit htmlspecialchars() oder htmlentities().
Eine weitere Schwachstelle ist das Hochladen von Dateien, die nicht geprüft wurden. Lassen Sie nur bestimmte Dateiformate zu. Es gibt keinen Grund dass der Nutzer z.B. doc-, html- oder js-Dateien auf dem Server ablegen sollte.