Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:general:browser-tools [15.06.2022 08:47] – admin
+++ de:general:browser-tools [27.03.2023 14:18] (aktuell) – [Probleme mit Audio/Video] admin
@@ Zeile 11: / Zeile 11: @@
 Alle drei Browser erlauben unter Windows die Tastenkombination Strg + Umschalt + I (Buchstabe i), um die Entwicklertools zu öffnen.
-Sie bekommen dort den HTML-Code der Seite angezeigt, was auf den ersten Blick nicht wirklich übersichtlich ist. Aber mit dem Auswahl-Werkzeug können Sie einzelne Elemente der Fragebogen-Seite direkt auswählen.
+===== HTML-Code inspizieren =====
+Der Inspektor (o.ä.) zeigt den HTML-Code, welcher der aktuellen Seite zugrunde liegt. Das ist vor allem dann praktisch, wenn Sie
+  * Kennungen von Elementen herausfinden möchten oder
+  * Die CSS-Formate von Elementen verstehen möchten, um sie anzupassen.
+Der HTML-Code ist auf den ersten Blick nicht wirklich übersichtlich. Aber mit dem Auswahl-Werkzeug können Sie einzelne Elemente der Fragebogen-Seite direkt auswählen.
 {{:de:general:scr.browser-tools.png?nolink|Entwickler-Tools im Browser}}
@@ Zeile 17: / Zeile 25: @@
 So können Sie einfach die HTML-ID eines Elements herausfinden, die relevanten CSS-Klassen und die übergeordneten HTML-Elemente. Außerdem sehen Sie rechts, welche CSS-Regeln für die aktuelle Formatierung des Elements verantwortlich sind. Sie können diese testweise auch anpassen, um die Effekte möglicher Änderungen direkt zu probieren.
+===== Fehlerkonsole =====
+Ein weiterer Karteireiter in den Entwickler-Tools ist die Fehlerkonsole ("Konsole"). Diese ist vor allem hilfreich, wenn
+  * JavaScript nicht korrekt funktioniert oder wenn
+  * Bilder, Audioelemente oder Videos nicht korrekt funktionieren.
+==== JavaScript-Probleme ====
+Nicht alle Meldungen in der Konsole deuten auf Probleme hin. Das richtige Lesen der Meldungen erfordert ein wenig Übung.
+{{:de:general:scr.browser-tools.console1.png?nolink|Fehlermeldung in der Browser-Konsole}}
+Rechts neben dem Fehler ist meist ein Verweis, in welcher Datei (eine Webseite besteht in aller Regel aus einem HTML-Dokument und mehreren eingebundenen Dateien, z.B. Bilder) der Fehler aufgetreten ist. Klicken Sie auf die Zeilennummer, um die Problemstelle im Code zu sehen.
+{{:de:general:scr.browser-tools.console2.png?nolink|Fehlerhafte JavaScript-Zeile im Debugger}}
+In diesem Beispiel sehen wir ein JavaScript, welches direkt in den Fragebogen eingefügt wurde. Das ''Alpha'' (bekannt aus der Fehlermeldung) ist markiert ... und zwar deshalb, weil mit ''var alpha'' eine Variable ''alpha'' definiert wurde, hier aber versucht wird, auf eine Variable ''Alpha'' zuzugreifen. JavaScript unterscheidet streng die Groß- und Kleinschreibung.
+=Falls sich die Konsole nach dem Klick auf die Zeilennummer nur beschwert "please reload", muss man die Fragebogen-Seite nochmal neu laden, und dann nochmal auf die Zeilennummer klicken. Am einfachsten funktioniert das Neu-Laden im [[:de:create:debugging|Debug-Modus]].
+{{:de:general:scr.debug.reload.en.png?nolink|Seite neu Laden mit der Debug-Leiste}}
+**Tipp:** Sehr hilfreich bei der Fehlersuche ist die JavaScript-Funktion ''console.log()''. Sie zeigt den Wert einer Variable in der Konsole an.
+**Tipp:** Die Konsole erlaubt es, JavaScript-Code direkt einzutippen. So lässt sich Code schnell ausprobieren, und die Anzeige in der Konsole liefert wertvolle Hinweise dazu, welche Felder ein JavaScript-Objekt hat. Also zum Beispiel ein Eingabefeld.
+{{:de:general:scr.browser-tools.console3.png?nolink|Anzeige eines Objekts in der JavaScript-Konsole}}
+==== Probleme mit Audio/Video ====
+Wenn ein Audio oder Video nicht abspielt, dann liefert die Fehlerkonsole (siehe oben) meist gute Hinweise, wo das Problem steckt. Meistens ist es eine der folgenden Fehlerquellen:
+  * Der HTML-Code ist falsch
+  * Der Dateiname ist falsch (Groß-/Kleinschreibung beachten, auch bei der Dateiendung)
+  * Die Videodatei ist fehlerhaft kodiert
+Ein fehlerhafter HTML-Code ist meist daran zu erkennen, dass ein Video- oder Audio-Element gar nicht angezeigt wird. Meistens tauchen dazu keine Fehler in der Konsole auf. Mitunter hilft aber ein Klick im Inspektor (s. oben) auf das Element.
+{{:de:general:scr.browser-tools.video1.png?nolink|Fehlerhafter HTML-Code im Inspektor}}
+In diesem Beispiel hilft auch das nur bedingt ... nur das geübte Auge sieht, dass es ''<source>'' statt ''<sources>'' heißen müsste. Was hilft ist, dass man Code-Beispiele aus der Anleitung in den Fragebogen kopiert und diese dann Schritt für Schritt anpasst.
+Einfacher wird es, wenn die Video-Datei nicht geladen werden kann.
+{{:de:general:scr.browser-tools.video2.png?nolink|Datei konnte nicht geladen werden}}
+Wenn der Zugriff auf eine Datei nicht funktioniert, erscheint ein Fehler 404 (file not found) in der Konsole. Was dahinter steckt, finden, Sie am einfachsten heraus, wenn Sie einmal in die **Bilder und Mediendateien** in SoSci Survey klicken und dort nach der fraglichen Datei suchen.
+  * Fehlt vielleicht ein ''pro://'' vor dem Dateiname, weil Sie die Datei in die "geschützte Dateiablage" hochgeladen haben?
+  * War der Dateiname falsch geschrieben, vielleicht ''stimulus.MP4'' statt ''stimulus.mp4''?
+  * Oder wurde die Datei einfach noch nicht ins Befragungsprojekt hochgeladen?
+Dateinamen mit einem ''pro://'' werden beim Erstellen der Fragebogen-Seite übrigens umgeschrieben. Es ist also vollkommen normal, dass Sie im HTML-Code etwas anderes finden, als das was Sie in den Code geschrieben haben.
+Wenn die Datei gefunden, aber fehlerhaft kodiert wurde, ist das in der Fehlerkonsole relativ einfach zu sehen. Dort ist dann die Rede davon, dass es Probleme mit der Kodierung bzw. dem Dekodieren gab.
+{{:de:general:scr.browser-tools.video3.png?nolink|Fehlerhafte Videodateien}}
+Zunächst sollte man dann versuchen, die Datei direkt im Browser aufzurufen. Wenn man mehrere Dateien verlinkt hat, dann alle Dateien einzeln. Wenn die Datei also ''stimulus1.mp4'' heißt und im Projekt ''%%https://www.soscisurvey.de/Testprojekt/%%'' läfut, würde man im Browser die URL ''%%https://www.soscisurvey.de/Testprojekt/stimulus1.mp4%%'' aufrufen. Bei Dateien aus der geschützten Dateiablage (''%%pro://%%'') muss man den temporären Dateinamen aus dem Inspektor holen.
+Öffnet die Datei im Browser direkt, dann liegt es eventuell nur am ''type=...'', welcher im HTML-Code steht. Wenn die Datei auch beim direkten Aufruf nicht öffnet, muss man sie wohl nochmal neu kodieren. Falls man sich mit den Spezifikationen zur Kodierung von Dateien nicht auskennt, ist es hilfreich, z.B. den Online-Dienst [[https://cloudconvert.com/|CloudConvert]] zu verwenden. Aber auch hier fallen manche Fehler nicht auf - zum Beispiel muss die Breite und Höhe bei manchen Dateiformaten durch 8 oder 16 teilbar sein.
 ----
-Suchbegriffe: Fehlerkonsole, Browser-Konsole, Browserkonsole, Entwicklerkonsole, Entwickler-Konsole, Developer Tools
+Suchbegriffe: Fehlerkonsole, Browser-Konsole, Browserkonsole, Entwicklerkonsole, Entwickler-Konsole, Developer Tools, Videos abspielen, Video-Dateien, Videodateien, Musik abspielen, Audio-Dateien, Audiodateien