Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Einführung in die Webprogrammierung

Seiten testen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bevor Sie Ihre Seite online stellen, sollten Sie diese testen. Dies funktioniert mit einem etwas ausgefeilteren Editor genauso wie mit einem Browser. Achten Sie auch darauf, dass Ihre Seite aus validem, also gültigem Code besteht.

Transkript

Bevor Sie mit einer Seite online gehen, sollten Sie diese Seite auf Herz und Nieren prüfen. Sie sollten sie testen, ob sie den Anforderungen gerecht wird, ob der Code sitzt und passt und dafür gibt es ein paar Möglichkeiten, wie Sie das tun können. Ich habe, um Ihnen etwas zu zeigen, einen etwas klügeren Editor geöffnet und zwar Aptana Studio 3. Das ist eine kleine Entwicklungsumgebung in der ich sehr gerne entwickle, weil sie kostenfrei zu haben ist und wiel sie schon sehr unterstützend sein kann, wenn es darum geht auf Fehlersuche zu gehen. Ich habe mir hier das Projekt Garten Freunde lokal auf mein System geholt und bereits hier rein getan. Wir gehen davon aus, es ist bereits da uunnd Sie können damit arbeiten. Ich kann jetzt die einzelnen Seiten öffnen und dann anschauen, ob alles passt. Ich mache mal mein Hallo-HTML auf. Es passt nicht alles. Sie sehen auf der rechten Seite, dass ich einen Hinweis bekomme und auf der linken Seite sogar ein Rufzeichen. Und wenn ich mit der Maus drüber fahre, bekomme ich gesagt: "missing doc typ" Da heißt, in dieser Datei fehlt eindeutig eine Doc-Typ-Bezeichnung. Die muss in Dateien, die im Internet präsentiert werden, vorhanden sein, daraus kann nämlich ein Browser schliessen wie er mit der Datei umgehen soll. Das ist schnell erledigt. Da reicht es wenn ich sage: "Rufzeichen DOCTYPE HTML". In denm Augenblick, in dem das getan ist, verschwinden auch diese Warnzeichen und ich kann meine Seite speichern und bin zufrieden. Und das mache ich dann mit jeder Seite. Ich starte also bei meiner Index-Seite und bekomme wieder eine Meldung, dass ich offensichtlich Fehler habe, hier oben generell. Wenn ich hier unten drüber fahre, sehe ich sogar, was für ein Fehler vorliegt. Und zwar fehlt ein schliessendes A-Tag. Gut. Hier habe ich es noch einmal. Und tatsächlich... Am Ende fehlt mir ein A-Tag. Sie sehen jetzt übrigens, - so ganz nebenbei - warum man nicht mit allzu klugen Editoren beginnt. Hier ist nämlich immer die Möglichkeit gegeben mit einer Auto-Vervollständigung zu arbeiten. Wenn man aber am Anfang steht, ist das nicht so wünschenswert. Das Handwerk lernen Sie durch das tatsächlich händische Schreiben. Aber jetzt für mein Testvorgang kommt mir dieser Editor gerade recht und wieder habe ich das alles erledigt. Ich speicher das Ganze. Ich kann es jetzt von Seite zu Seite nach einander abarbeiten. Ein weiterer Schritt ist der, dass ich jetzt eine Seite im Browser selbst schon testen kann. Das ist ein sehr spannendes Vorgehen und das ist egal welchen Browser Sie verwenden. Jeder Browser bringt solche Entwicklerwerkzeuge mit. Hier habe ich die Möglichkeit, dass ich sagen kann, dass ich diese geöffnete Seite jetzt, zum Beispiel, im Firefox öffnen. Ein kleiner Nebensatz: Warum ich ebenfalls gerne mit Aptana arbeite? Aptana bringt einen kleinen internen Webserver mit. Und ich öffne mir jetzt hier die Seite. Das ist nun meine Startseite. Und... Ja... Sie öffnet sich, aber die Farbgebeung für den Text ist so eigentlich nicht gelant. Das heißt, ich werde mir nun meinen Inspektor öffnen, also dieses Werkzeug. Das geht, wenn ich auf einem Windows-System arbeite, ganz einfach. Zum Beispiel mit der Funktionstaste F12. Ich drücke also die Funktionstaste F12, bin hier im Firefox und kann nun meine Seite erneut auf Herz und Nieren überprüfen. Was mich jetzt besonders interessiert, ist eben diese Farbgebung, das heißt, ich kann den Inspektor nehmen, mir genau das Element rausnehmen, welches mir seltsam vorkommt und wenn ich hier die HTML-Struktur sehe, dann sehe ich hier drüben die CSS-Struktur. Und dann merke ich schon, dass es offensichtlich aus irgend einem Grund beim Body-Element diese Farbangabe gibt und wenn ich jetzt das Häckchen entferne dann sehe ich, dass sich alles wieder normalisiert, Das heißt, ich muss in meiner CSS-Datei suchen gehen wo ich diesen Eintrag habe. Und in welcher CSS-Datei ich suche, das kann ich sogar hier sehen, es wird mir angegeben. Und wenn ich mit der Maus drüber fahre, bekomme ich sogar den Ort in dem diese Datei liegt, angegeben. Dort werde ich gleich hinein schauen. Dann werden wir versuchen das Ganze wieder in Ordnung zu bringen. Da wir gerade noch über den Server gesprochen haben, hier können Sie erkennen, dass die Seite über einen kleinen Server aufgerufen wird. Das erkennen Sie daran, dass hier dieses seltsame 127.0.0.1 steht. Das ist der sogenannte "local host". Der lokale Host-Dienst, der jetzt diese Seite ausgibt. Hinter dem Doppelpunkt steht ein Port über den das Ganz läuft. Ist für unser tum weniger wichtig. Es ist wichtig, dass Sie sehen, dass die Seite über einen Webserver aufgerufen wird. Das Ganze könnte auch anders ausschauen. Warten Sie kurz. Auch das zeige ich Ihnen. Immerhin haben wir hier unseren HTML-Ordner. Würde ich zum Beispiel mein "Hallo" mit einem Doppelklick öffnen, dann öffne ich es eben nicht über den Webserver, sondern - hier sehen Sie es - über mein Dateiensystem. Damit bekomme ich eventuell andere Ergebnisse ausgegeben. Also arbeiten Sie, wenn es geht, mit einem Webserver. Es gibt die unterschiedlichsten Geschmacksrichtungen für Webserver die Sie sich lokal herunterladen können. Ein Klassiker wäre zum Beispiel XAmp. Oder wenn Sie zum Beispiel auf Windows arbeiten, dann gibt es einen Wamp: W-A-M-P. Auf einem Mac gibt es einen Mamp und auf einem Linux ist ein Apache meistens schon vorinstalliert. wir haben nun diverse Möglichkeiten die lokale Seite zu testen. Die allerletze Möglichkeit ist die, dass Sie sich darum kümmern können, das Ihre Seite valide ist. Das heißt, dass der Code so geschrieben wurde, dass er den W3C Empfehlungen entspricht. Das ist das Konsortium, welches dafür sorgt das HTML und CSS in vernünftiger Weise weiterentwickeln. Sie finden diesen Validator auf: validator.w3.org Und haben hier nun die Möglichkeit entweder die Adresse einer Seite einzugeben, die bereits online ist oder Sie können eine Datei validieren lassen indem Sie sie hochladen. Das mache ich jetzt. Das heißt, ich durchsuche und nehme wieder in meinem Projekt Garten Freunde meine Index-Datei und öffne sie und sage "check". Und bekomme nun mitgeteilt: "This document was succesfully checked" als HTML 5. Nachdem ich hier nun eine einwandfrei Seite abgeliefert habe, dürfte ich mir sogar ein kleine Validationssymbol auf meine Seite hinterlegen. Schauen wir uns das Ganze noch einmal an. Ich gehe zurück in meinen Ordner und nehme meine "Hello again" -Seite, öffne diese und auch da alles in Ordnung! Würde ich Fehler darin habe, würden diese mir herausgegeben werden und ich könnte dann für mich selbst entscheiden, ob das Fehler sind mit denen ich leben kann, weil sie einfach nicht ausschlaggebend sein werden, oder ob es sich um kritische Probleme handelt. Eine weitere sehr spannende Ressource, die ich Ihnen quasi nur mal schnell vorwerfe, sind die Ressourcen, die Google mit seinen Developers zur Verfügung stellt. Unter developers.googl.com Wenn Sie sich anmelden, haben Sie ebenfalls eine große Vielzahl an Werkzeugen zur Verfügung, die Ihnen dabei helfen können Seiten zu überprüfen. Seitengeschwindigkeiten zu testen, all diese verschiedenen Möglichkeiten. All diese Testerei ergibt, dass Ihre Seite reif ist in die weite Welt geschickt zu werden. Dann können Sie die Seite hochladen. Testen Sie also Ihre Seite. Achten Sie darauf, dass Sie einen klaren deutlichen Code geschrieben haben Achten Sie darauf, dass Sie keine Fehler in diesem Code haben. Indem Sie zum Beispiel mit einem Editor, der den Fehler aufzeigen kann, die Seiten nochmals durcharbeiten. Ansonsten bemühen Sie einfach Ihren Browser und suchen dort die Entwicklertools, die Ihnen dabei helfen können die Seite auf Herz und Nieren zu testen.

Einführung in die Webprogrammierung

Tauchen Sie ein in die vielfältige Welt von Webdesign und -entwicklung und lernen Sie die wichtigsten Technologien, Programmiersprachen und -tools kennen.

2 Std. 46 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!