Grundlagen/Webprojekte/testen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sobald die Webseite von der Struktur halbwegs steht, beginnt der wichtigste Prozess: testen, testen und nochmals testen!

Früher bedeutete das einen ewigen Kreislauf von

  1. im Editor Speichern
  2. Datei im Browser (bzw. in mehreren Browsern) öffen, bzw. neu Laden
  3. wieder in den Editor gehen.

Heute bieten die Browser Werkzeuge, mit denen Sie die Webseiten direkt verändern und ausprobieren können. In diesem Kapitel zeigen wir, wie Sie einen ersten Versuch mit dem Seiteninspektor weiter untersuchen und verbessern können. In einem zweiten Schritt können Sie Ihre Seite als Online-Beispiel in einer Online-Entwicklungsumgebung z. B. zur Peer Review in unserem Forum zeigen.

Valides Markup

Überprüfen Sie Ihr HTML-Markup, ob es valide ist!

  1. Öffnen Sie mit Rechtsklick das Kontextmenü des Browsers und gehen Sie auf Seitenquelltext anzeigen
    Fehler im Markup werden rot dargestellt.
  2. Deaktivieren Sie das CSS entweder im Browser oder indem Sie den Link entfernen/ auskommentieren.
  3. Testen Sie Ihre Webseite (n) in einem Validator.
  4. Ein anderer Ansatz ist ein Validierungs-Stylesheet, mit dem Fehler sichtbar gemacht werden.

Heutzutage stürzen Webseiten mit fehlerhaftem HTML nicht mehr einfach ab. Trotzdem sollten Sie sich darum bemühen, ein handwerklich perfektes Stück Arbeit im Internet zu veröffentlichen.

Andererseits schützt valides HTML-Markup nicht vor Fehlern und fehlender Zugänglichkeit: Eine div-Suppe aus lauter div-Elementen, von denen einigen sogar noch Klickfunktionalität per JavaScript hinzugefügt wurde, ist selten responsiv und nicht mit der Tastatur bedienbar. Hier bringt eine Seitenstrukturierung mit HTML5-Elementen schnell viel mehr Übersicht!

Warum online-Beispiele besser als das Posten von Code sind!

Das SELF-Forum ist die Anlaufstelle, wenn etwas mit dem eigenen Code nicht klappt.

Häufig posten Anfänger dann entweder zu kurze Code-Blöcke, da sie nicht wissen, wo der Fehler liegt, oder, schlimmer, posten die gesamte Webseite innerhalb eines oder mehrerer sehr langer Code-Blöcke. Diese lässt sich so nicht auf Fehler untersuchen, ohne dass der Helfende den Code und die Skripte in eine Datei kopiert und dieses ausführt.

Wenn Hilfesuchende ihren Code in einem Online-Beispiel veröffentlichen, ist es möglich, …

und häufig schnell eine Lösung finden.

Online-Entwicklungsumgebungen

Kostenloses Hosting

Arbeiten mit dem Seiteninspektor

In jedem Browser können Sie durch F12 oder einen Rechtsklick mit der Maus ein Kontextmenü öffnen, das eine Ansicht des Quelltexts (des HTML-Dokuments), bzw. eine Untersuchung des betreffenden Elements erlaubt. Screenshot

DOM inspizieren

Im Seiteninspektor wird das DOM einer Seite gezeigt. Hier werden nicht nur die HTML-Elemente, sondern auch Pseudoelemente und sogar das Shadow DOM (z. B. bei einem audio- oder input-Element) angezeigt.

Pseudoelement im DOM

falsch geschlossenes br-Tag

Dieses Beispiel wurde als Frage im SelfHTML-Forum gestellt, da der Zeilenumbruch größer als gewohnt war.[1]

Beispiel 
<p> 
  Dies ist ein Text <br></br> 
  mit einem Zeilenumbruch.
</p>

br ist ein inhaltsleeres Element, das normalerweise nicht geschlossen werden muss. Ein Blick in den Seiteninspektor zeigt, dass das schließende br-Tag als zweites br-Element geparst wurde.

Screenshot

Blockelemente in p

Ein weiterer typischer Fehler ist das Einfügen von Blockelementen wie div innerhalb von Textabsätzen.

Blockelemente in p-Elementen ansehen …
p {
  color: green;
}
div {
  color: red;
}
Der Absatz p soll grüne, ein mit div gekennzeichneter Bereich jedoch rote Textfarbe erhalten.
<p> 
  Dies ist ein Text 
  <div> mit einem div</div>
  und noch etwas Text.
</p>
ansehen …

Der Textabsatz wird unerklärlicherwiese in 3 Blöcken dargestellt. Die Farbzuweisung für p wird nur im ersten Teil ausgeführt, aber nicht im letzten.

Ein Blick in den Seiteninspektor zeigt, dass das p-Element vor dem neuen div geschlossen wird, da es keine Blockelemente als Kinder enthalten darf. Unterhalb des div wird plain text ohne Formatierung ausgegeben, da es kein Start-Tag gibt. Das schließende p-Tag wird als weiterer, jedoch leerer Absatz geparst.

Screenshot

Empfehlung: Verwenden Sie zur Hervorhebung von Text inline-Elemente wie span oder em.

Parsen fehlender Elemente

Dieser Beitrag aus dem SelfHTML-Forum beschreibt Probleme, die durch das Weglassen nicht notwendiger Elemente entstehen können.[2]

Wenn Sie die head- und body-Tags weglassen, werden die Elemente implizit trotzdem erstellt. Im Traversieren im DOM-Baum bei DOM-Manipulationen kann es hier zu Problemen führen, wenn Elemente entgegen der Notation im Markup keine Kindelemente sind.

HTML bearbeiten

Durch einen Rechtsklick auf das geparste Markup öffnet sich ein Kontextmenü, mit dem Sie das Markup ändern und neue HTML-Elemente sowie Inhalte hinzufügen können.

Screenshot

CSS bearbeiten

Das Layouten von Webseiten geht sogar noch einfacher. Durch einen Klick in das rechte, untere Feld können Sie

Kontrast-Checker-im-Seiteninspektor.png
  • CSS-Werte verändern
  • neue CSS-Eigenschaften hinzufügen

und die Änderungen gleich sehen.


Mit einem Klick auf den Farbpunkt bei Textfarbe können Sie gleich überprüfen, ob der Kontrast zwischen Text und Hintergrund genügend hoch ist.

Wenn das Layout passt, können Sie die ermittelten Eigenschaften und Werte in den Code-Editor kopieren und speichern.

Responsivität

Webseiten müssen nicht auf allen Geräten gleich aussehen – aber es müssen alle Inhalte auf allen Geräten les- und erreichbar sein. Die Anpassung von Webseiten an die Viewportgröße wird als Responsives Webdesign bezeichnet und ist heute angesichts der Vielzahl mobiler Geräte wie Handys, Tablets und sogar SmartWatches mit integrierten Computern unabdingbar!

Fazit

Durch browsereigene Tools wie den Seiteninspektor können Sie große Teile des Entwickelns und Debuggens direkt im Browser erledigen und benötigen keine externen Programme mehr. Dies ist eine große Vereinfachung und Zeitersparnis.

Testen Sie das CSS in allen Auflösungen und wenn möglich auf möglichst vielen Geräten!

Sie haben das neueste Modell von xyz noch nicht? Es gibt in Ihrem Haushalt kein altes Handy mehr? Dann wird es Zeit für die nächste Testphase:

Usability-Tests

Seitenaufbau, Inhaltsstruktur und Beschriftungen müssen so benutzerfreundlich sein, dass sie intuitiv erfasst und angewandt werden können. Dies können Sie testen, indem Sie unvoreingenommene Personen aus Ihrem Bekanntenkreis zu einem Test einladen.

Geben Sie Ihnen Ziele vor (Impressum, Artikelsuche, Einkauf mit Bezahlvorgang, etc ) und beobachten Sie, welchen Weg die Tester nehmen und vor welchen Schwierigkeiten sie stehen. Man selbst ist oft betriebsblind und denkt, die von einem selbst entworfene Struktur wäre auch für andere leicht zu durchschauen. Wenn der Tester Inhalte nicht auf Anhieb findet, oder im Formular Schwierigkeiten hat, seine Daten einzugeben, merken Sie schnell, wo Sie etwas verbessern können.

Heatmaps

Eine Heatmap (englisch heat = ‚Hitze‘, ‚Wärme‘; map = ‚Karte‘) ist ein Diagramm zur Visualisierung von Daten, deren abhängige Werte als Farben repräsentiert werden. Sie dient dazu, in einer großen Datenmenge intuitiv und schnell besonders markante Werte zu erfassen.

Im Webdesign werden heatmaps zum mouse tracking eingesetzt, um zu überprüfen, welche Bereiche mit der Maus überfahren werden. Effektiver ist das eye-tracking, eine Blickbewegungsmessung, mit der der Blickverlauf einer Person sichtbar gemacht werden kann.

Generell sollten wichtige Inhalte entsprechend der Leserichtung in unserem Kulturkreis oben links platziert werden, sodass sie sofort erfasst werden.

Freigabephase

Die Freigabephase beschreibt den Zustand, in welchem ein Projekt alle geplanten Komponenten beinhaltet und diese auch kontrolliert und geprüft wurden. In dieser Phase fallen folgende Arbeiten an:

  • Für alle verwendeten fremden Ressourcen müssen Lizenzen eingeholt werden.
  • Das Angebot wird auf dem Produktionsserver für den allgemeinen öffentlichen Zugriff freigegeben.


Weblinks

  1. ↑ SelfHTML-Forum: "<br>" Tag schliessen != Tag offen lassen?
  2. ↑ selfHTML-Forum: HTML5 Struktur richtig?


Siehe auch

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Grundlagen/Webprojekte/testen&oldid=85356“