Grundlagen der Webprogrammierung: Meine erste Website

Hilfreiche Entwickler-Tools

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Entwicklertools können Ihnen helfen, Fehler und Probleme aufzudecken. Hier stellt Lydia Schimpf eine praxisgerechte Auswahl vor.
05:49

Transkript

Alle gängigen Browser arbeiten mit sogenannten Entwicklertools. Entwicklertools sind kleine eingebaute Features, die uns Entwicklern ermöglicht, dass wir Seiten etwas unter die Motorhaube schauen können beziehungsweise kontrollieren können, wenn bestimmte Fehler auftreten, woran diese Fehler eventuell liegen könnten. Leider ist es so, dass es bei jedem Browser ein ganz klein wenig woanders liegt. Aber, wenn Sie sich die Stichworte Entwicklertools merken, dann kommen Sie über kurz oder lang auch ans Ziel. Wir sehen es hier in CHROME, und bei CHROME verstecken sich die Entwicklertools hinter diesen drei Menüpünktchen. Wenn Sie dadrauf klicken, dann haben Sie die Möglichkeit, dass Sie auf weitere Tools gehen können, und mit den weiteren Tools kommen dann auch hier die Entwicklertools. Die Entwicklertools, wenn man dann drauf klickt, öffnen sich, je nachdem, wie es eingestellt ist, entweder unterhalb der bestehenden Webseite und zeigt, wenn man im Menübereich "Elemente" ist, auf der einen Seite den HTML-Text und auf der anderen Seite eben die CSS-Einstellungen. Ich habe die Möglichkeit, dass ich mir dieses auch an der Seite anzeigen lassen kann. Hier habe ich nämlich wieder so kleine Menüpunkte. Und wenn ich jetzt auf "Dock to right" zeige, dann wandern dieselben Informationen an die rechte Seite. Das ist am Anfang etwas verwirrend, deswegen, zum Beispiel, ist mir diese Ansicht in der unteren Leiste viel lieber. Gut, auch wenn Sie jetzt noch nicht viel damit anfangen können, der Vorteil liegt darin, dass ich, wenn ich, zum Beispiel, hier auf dieses Symbol klicke, mir bestimmte Teile einer Webseite gesondert anzeigen lassen kann. Hier geht es mir jetzt um diese GOOGLE-Darstellung. Da bekomme ich angezeigt, welche ID, zum Beispiel, dieses Element hat. Es wird dann auch unten im Quelltext etwas unterlegt, und ich bekomme genau die Einstellungen, die für dieses Element gelten. Und das Coole ist, dass ich, zum Beispiel, hier beim CSS ziemlich viele herumprobieren kann, das heißt, wenn ich dieses Häkchen wegnehme, passiert noch nicht sehr viel. Aber was auf jeden Fall passieren wird, wenn ich hier das Häkchen wegnehme, rutscht die Bezeichnung GOOGLE ganz auf die linke Seite. Wenn ich das Häkchen wieder zulasse, dann landet es wieder dort, wo wir es in gewohnter Weise vorfinden. Das ist jetzt etwas, was nur in Ihrem Browser stattfindet oder in dem Fall nur in meinem Browser stattfindet. Nicht allgemein gültig, aber damit kann man ganz nett herumprobieren und sich bestimmte Effekte anschauen. Diese Entwicklertools gibt es aber nicht nur in CHROME, sondern es gibt sie, zum Beispiel, auch in FIREFOX. Warten Sie hier, sind Sie schon an. Damit wird es schwieriger, sie hier zu zeigen. Bei FIREFOX ist eine Möglichkeit, dass Sie oben auf diese Menüstriche klicken und dann kommen Sie direkt zu den Entwicklerwerkzeugen, und da ist jetzt mein Häkchen schon bei der Entwicklersymbolleiste. Wenn da noch kein Häkchen ist, könnten Sie eines setzen. Bei FIREFOX ist die Entwicklersymbolleiste am Anfang etwas sehr, sehr, sehr Dezentes. Das ist nämlich diese ganz hier untere Leiste. Das ist eine Konsolleiste. Hier könnten Sie Konsolenbefehle absetzen. Und hier habe ich jetzt, zum Beispiel, einen Einser, das heißt, es gibt hier irgendwo ein bedenkenswertes Problem. Und hier ist es der Inspektor, der eben auch wieder auf der linken Seite den HTML-Text anzeigt und auf der rechten Seite die CSS-Elemente, die für bestimmte Bereiche dann angezeigt werden. Mit der Weite zu spielen, ist immer ganz besonders nett, wenn man dann sieht, wie die Dinge plötzlich verrutschen. Ja, es gibt auch im INTERNET EXPLORER was Vergleichbares. Und da muss man hier oben auf dieses Zahnrad oder Blumensymbol klicken und kommt dann hier zu den Entwicklertools. Beziehungsweise könnten Sie auch die Funktionstaste F12 drücken und kämen ebenfalls zu den Entwicklertools. Hier ist das, was Sie eventuell am häufigsten brauchen werden: Der DOM-EXPLORER, auch hier wieder auf der linken Seite HTML, auf der rechten Seite CSS. Was beim INTERNET EXPLORER noch spannend ist, ist hier die Abteilung für die Emulation, wo Sie eben abgesehen von den gängigen Browserprofilen, wo Sie auch noch ein Windows Phone sich anzeigen lassen könnten oder vom Dokumentenmodus, den Sie reduzieren könnten auf frühere Versionen, andere Benutzer-Agents heranziehen könnten. Das ist insofern spannend, weil Sie hier jetzt gegebenenfalls auf sehr alte INTERNET EXPLORER zurückgreifen können oder eben auf den INTERNET EXPLORER 9 mit einem Windows 7 Phone oder auf Xbox oder dann eben haben Sie hier die Möglichkeit, auch OPERA oder SAFARI auf einem iPad zu simulieren. Das sind natürlich Möglichkeiten, die dann vor allem, wenn Sie speziellere Seiten machen wollten, nicht von der Hand zu weisen sind. Und diese Add-ons sind bei den großen Browsern einfach schon mit dabei. Da braucht man gar nichts herunterladen, sondern sie sind einfach da und können von Ihnen verwendet werden.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

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!