Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:media [10.07.2024 12:41] – [Optimierte Einbindung] admin
+++ de:create:media [28.05.2025 20:32] (aktuell) – [Einbindung mittels HTML 5] admin
@@ Zeile 33: / Zeile 33: @@
 **Hinweis:** Ob eine PDF-Datei im Browser geöffnet oder heruntergeladen wird, entscheidet der Browser bzw. der Teilnehmer -- steuern kann man das als Projektleiter nicht.
+===== HTML-Dateien verwenden =====
+SoSci Survey erlaubt das Hochladen von Webseiten (HTML, CSS und JS Dateien), die etwa zur Information oder als Stimuli dienen können. Einen speziellen Anwendungsfall beschreibt die Anleitung [[:de:create:frameset]].
+Die folgenden Beispiele gehen davon aus, dass Sie eine Datei ''stimulus.html'' (und eventuell zugehörige CSS- und/oder JS-Dateien) in das Projektverzeichnis hochgeladen haben.
+**Wichtig:** Der Server blockiert aus Sicherheitsgründen unter Umständen Script-Inhalte in den HTML-Seiten. Binden Sie die Seiten über ''index.php?html=<Dateiname>'' ein (z.B. ''index.php?html=stimulus.html''), damit Scripte wie erwartet funktionieren. Bei Dateien aus der geschützten Dateiablage ist dieser Umweg nicht erforderlich.
+HTML-Seite können im Fragebogen so verlinkt werden, dass sie in einem neuen Browser-Tabs öffnen:
+<code html>
+<a href="stimulus.html" target="_blank">Seite ansehen</a>
+</code>
+HTML-Seiten können als ''<iframe>'' auch direkt in den Fragebogen eingebunden werden:
+<code html>
+<iframe src="stimulus.html" width="100%" height="400"></iframe>
+</code>
+Beachten Sie, dass die Breite sich hier dem Bildschirm anpasst (Darstellung auf Mobilgeräten), aber die Höhe ist starr. Dies kann dazu führen, dass ein Teil des Inhalts unten abgeschnitten wird beziehungsweise nur durch Scrollen sichtbar wird.
+Folgender HTML-Code bindet die Seite so ein, dass das Seitenverhältnis konstant bleibt und kein Rahmen zu sehen ist.
+<code html>
+<iframe src="stimulus.html" width="100%" style="aspect-ratio: 1.7; border:none;"></iframe>
+</code>
+Schwieriger ist eine Anpassung der Höhe, sodass das ''<iframe>'' auf schmalen Bildschirmen länger (höher) wird. Dafür ist JavaScript erforderlich ([[:de:create:javascript]]).
+**Tipp:** Wenn möglich, speichern Sie den HTML-Code des Stimulus direkt als **Text** mit //Darstellung// "HTML-Code" im **Fragenkatalog**, und ziehen Sie den entsprechenden Text dann in die Fragebogen-Seite.
@@ Zeile 166: / Zeile 200: @@
 **Warnung:** Wenn YouTube in den Fragebogen eingebunden wird, dann werden durch den Aufruf u.U. personenbezogene Daten an YouTube übermittelt. Dafür ist u.U. eine Einwilligung von der oder dem Befragten erforderlich. Bitte klären Sie diesen Sachverhalt vorab (!) mit der oder dem Datenschutzbeauftragten Ihrer Hochschule, Einrichtung oder Ihres Unternehmens.
-**Warnung:** YouTube gestattet sich in den eigenen Nutzungsbedingungen, Werbung in Videos einzubinden. Die eingebundene oder vorangestellte Werbung kann von Teilnehmer zu Teilnehmer variieren. Dadurch kann die direkte Einbindung zu schweren methodischen Probleme führen. In diesem Fall hilft es nur, schriftlich die Einverständnis des Urhebers einzuholen und das Video selbst im Befragungsprojekt hochzuladen.
+**Warnung:** YouTube gestattet sich in den eigenen Nutzungsbedingungen, Werbung in Videos einzubinden. Die eingebundene oder vorangestellte Werbung kann von Teilnehmer zu Teilnehmer variieren. Dadurch kann die direkte Einbindung zu schweren methodischen Problemen führen. In diesem Fall hilft es nur, schriftlich die Einverständniserklärung des Urhebers einzuholen und das Video selbst im Befragungsprojekt hochzuladen.
 **Hinweis:** Der Zugriff auf www.soscisurvey.de erfolgt in aller Regel verschlüssel via HTTPS. Manche Browser verhindern das Einbinden von unverschlüsselten Inhalten via iFrame. Stellen Sie beim Einbinden externer Inhalt deshalb sicher, dass diese auch via HTTPS abgerufen werden können und verwenden Sie beim Einbinden die HTTPS-URL.
@@ Zeile 173: / Zeile 207: @@
 ==== Einbindung mittels HTML 5 ====
-Wenn Sie sicherstellen möchten, dass Ihr Video bei nahezu allen Teilnehmern korrekt abgespielt wird, binden Sie es mit dem HTML 5 ''<video>'' Tag in den Fragebogen ein. Der Nachteil dabei ist, dass Sie das Video zunächst in 3 (!) unterschiedliche Formate konvertieren und alle drei Video-Dateien hochladen müssen. Prinzipiell können Sie auch nur eines der Formate verwenden -- dann funktioniert es aber nur in einigen Browsern ([[http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know/|HTML5 Videos: 10 Things Designers Need to Know]]).
+Wenn Sie sicherstellen möchten, dass Ihr Video bei nahezu allen Teilnehmern korrekt abgespielt wird, binden Sie es als mp4-Datei mit dem ''<video>''-Tag in den Fragebogen ein. In SoSci Survey erstellen Sie nun einen neuen Text mit der //Darstellung// "HTML-Code" und folgendem Inhalt:
-**Wichtig:** Sehr alte Versionen des Internet Explorers (bis Version 8) unterstützten das ''<video>'' Tag nicht. In Deutschland sind das ca. 3% der Internet-Nutzer ([[http://caniuse.com/#feat=video|Can I use: Video element]]).
-Um das Video in die Formate mp4, webm und ogg zu konvertieren, können Sie unterschiedliche Software verwenden. Recht komfortabel funktioniert es bei [[https://cloudconvert.com/|CloudConvert]] (online, kostenlos für kleinere Dateien) und mit dem [[http://www.mirovideoconverter.com/|MiroVideoConverter]].
-In SoSci Survey erstellen Sie nun einen neuen [[:de:create:texts|Textbaustein]] mit folgendem HTML-Code als Inhalt:
 <code html>
-<video width="512" height="288" playsinline controls controlsList="nodownload">
+<video playsinline controls controlsList="nodownload" style="max-width: 100%;">
   <source src="dateiname.mp4" type="video/mp4" />
-  <source src="dateiname.webm" type="video/webm" />
-  <source src="dateiname.ogg" type="video/ogg" />
 </video>
 </code>
-Dass Sie die Abmessungen mittels ''width'' und ''height'' anpassen können, liegt auf der Hand. So kann man große Videos auch auf die verfügbare Breite skalieren.
+**Hinweis:** Altere Browser und vor allem ältere Mobilgeräte benötigen das Video u.U. in weiteren Formaten als nur mp4. Wenn Sie auf Nummer sicher gehen wollen, konvertieren Sie das Video nicht nur als mp4, sondern auch in die Formate webm und ogg.
+Um das Video in die Formate mp4, webm und ogg zu konvertieren, können Sie unterschiedliche Software verwenden. Recht komfortabel funktioniert es bei [[https://cloudconvert.com/|CloudConvert]] (online, kostenlos für kleinere Dateien) und mit dem [[http://www.mirovideoconverter.com/|MiroVideoConverter]].
 <code html>
-<video style="max-width: 100%" playsinline controls controlsList="nodownload">
+<video width="512" height="288" playsinline controls controlsList="nodownload">
   <source src="dateiname.mp4" type="video/mp4" />
   <source src="dateiname.webm" type="video/webm" />
@@ Zeile 212: / Zeile 239: @@
 <code html>
-<video width="max-width: 100%" playsinline autoplay muted controlsList="nodownload">
+<video style="max-width: 100%" playsinline autoplay muted controlsList="nodownload">
   <source src="dateiname.mp4" type="video/mp4" />
   <source src="dateiname.webm" type="video/webm" />