Wie bettet man ein Scratch-Projekt mit HTML in eine Website ein?

NpChecker

Hallo alle zusammen!

Das hier ist jetzt meine dritte eigene Topic.

Wie kann man ein Scratch-Projekt mit HTML in eine Website einbinden? Ich weiß, es gibt ja diese Schaltfläche Einbinden, wo man den entsprechenden HTML-Code erhält. Ich habe es ausprobiert, doch warum wurde beim Einfügen dieses HTML-Codes kein Projekt angezeigt? Da stand nämlich:

Diese Seite kann nicht angezeigt werden.

Liegt es an der Internet-Verbindung? Am Browser? Am HTML-Code? Könnte mir bitte jemand helfen? Ich habe den HTML-Code einfach so in ein Textverarbeitungsprogramm eingefügt und als *.html gespeichert, aber auch in eine HTML-Vorlage eingefügt. Danke an alle Antworten.

Liebe Grüße
NpChecker

> Mein Profil

> Meine Projekte

> Meine Studios

Arnie1_0

Ich will ja einmal nichts sagen aber hast du immer noch den IE? Bei diesem würde es mich nicht wundern. Falls du jetzt Firefox, Chrome oder z.B. Opera hast (einen guten Browser), solltest du ein Projekt ganz einfach als Frame bzw. IFrame einbinden können.

Weil du aber gefragt hast (und vor allem wie), muss ich annehmen, dass du noch keine oder nur wenig Erfahrung mit HTML hast.
In eine Webseite ohne jeden Inhalt (oft in HTML geschrieben bzw. ausgegeben) kommt nämlich sehr wohl auch etwas Code. HTML ist die Abkürzung für Hypertext Markup Language. Das ist nicht dazu da ein Scratch Projekt zu starten sondern dazu strukturierte Daten anzuzeigen. In eine leere HTML-Datei kommt normal dieser Inhalt:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
</body>
</html>

Ich verwende normal den kurzen DOCTYPE (<!DOCTYPE html>). Dieser beschreibt, dass die Seite in HTML5 (der neusten Version) geschrieben ist. In den Head (zwischen die beiden Tags) kommen Informationen über die Seite. Das sind beispielsweise Schlüsselwörter, der Titel, eingebundene Skripte/Stylesheets, Icon, …
Aber ich will dir hier jetzt keine ganze EInleitung zu HTML geben

Bei Scratch wird für jedes Projekt ja auch noch eine Kopie im Unterordner /embed/ erstellt. Dieses kannst du ganz einfach einbinden indem du diesen Code einfach zwischen den Body-Tags einfügst:

<iframe src="https://scratch.mit.edu/projects/embed/162508168"></iframe>

Du kannst es aber auch einfach über eine Javascript-URL auf jede x-beliebige Seite einfügen. Diese wäre:

javascript:document.body.innerHTML='';vdocument=new DOMParser().parseFromString('<iframe src="https://scratch.mit.edu/projects/embed/162508168">', 'text/html'); document.body.appendChild(vdocument.body.children[0])

Meine ProjektID (162508168) kannst du einfach durch die von deinem Projekt ersetzen. Dann sollte es gehen, sonst ist dein Browser einfach zu schlecht für alles!

Liebe Grüße
Arnie

Last edited by Arnie1_0 (June 2, 2017 20:04:18)

Linux fedora, Flash 11.2 (release 202)
Windows XP, Flash 20.0 (release 0)

NpChecker

Hallo Arnie!

Vielen Dank für deine ausführliche Antwort!

Liebe Grüße
NpChecker

Last edited by NpChecker (June 3, 2017 06:05:35)

> Mein Profil

> Meine Projekte

> Meine Studios

NpChecker

Hallo Arnie!

Arnie1_0 wrote:
Ich will ja einmal nichts sagen aber hast du immer noch den IE? Bei diesem würde es mich nicht wundern. Falls du jetzt Firefox, Chrome oder z.B. Opera hast (einen guten Browser), solltest du ein Projekt ganz einfach als Frame bzw. IFrame einbinden können.

Ich hatte zwar mal Google Chrome, aber da wurden Weblinks zum Teil mit Internet Explorer geöffnet und zum Teil mit Chrome, deswegen wollte ich diesen Browser wieder deinstallieren.

Arnie1_0 wrote:
Weil du aber gefragt hast (und vor allem wie), muss ich annehmen, dass du noch keine oder nur wenig Erfahrung mit HTML hast.

Nein, so ist es eigentlich nicht…

Ich bin zwar vergleichsweise noch Anfänger und bin noch lange nicht so weit wie du, programmiere aber nicht erst seit Allerneuestem.

Arnie1_0 wrote:
In eine Webseite ohne jeden Inhalt (oft in HTML geschrieben bzw. ausgegeben) kommt nämlich sehr wohl auch etwas Code. HTML ist die Abkürzung für Hypertext Markup Language. Das ist nicht dazu da ein Scratch Projekt zu starten sondern dazu strukturierte Daten anzuzeigen. In eine leere HTML-Datei kommt normal dieser Inhalt:
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
</body>
</html>

Ja, das schon. Doch zum Testen eines einzelnen HTML-Befehls genügt es ja auch, ihn allein einfach als *.html zu speichern.

Meine HTML-Vorlage sah bisher allerdings etwas anders aus:

<html>
 <head>
  <title>Browserfenstertitel</title>
 </head>
 <body>
  <h1>Überschrift</h1>
  <p>Textblock</p>
 </body>
</html>

Aber die ist im Groben und Ganzen ja die gleiche.

Arnie1_0 wrote:
Ich verwende normal den kurzen DOCTYPE (<!DOCTYPE html>). Dieser beschreibt, dass die Seite in HTML5 (der neusten Version) geschrieben ist. In den Head (zwischen die beiden Tags) kommen Informationen über die Seite. Das sind beispielsweise Schlüsselwörter, der Titel, eingebundene Skripte/Stylesheets, Icon, …
Aber ich will dir hier jetzt keine ganze EInleitung zu HTML geben

Ah, dann weiß ich ja jetzt genauer, was der HTML-Befehl <!DOCTYPE html> bedeutet.

Ich hatte ihn bisher oft in anderen HTML-Codes gesehen aber selbst nicht sonderlich gebraucht…

Arnie1_0 wrote:
Bei Scratch wird für jedes Projekt ja auch noch eine Kopie im Unterordner /embed/ erstellt. Dieses kannst du ganz einfach einbinden indem du diesen Code einfach zwischen den Body-Tags einfügst:
<iframe src="https://scratch.mit.edu/projects/embed/162508168"></iframe>

Ja, dieser HTML-Code hat bei mir funktioniert!

Nur würde ich vielleicht die Anzeigegröße des Projekts ändern.

<iframe width="485" height="402" src="https://scratch.mit.edu/projects/embed/162508168"></iframe>

Ich konnte jedoch den Vollbildmodus nicht einschalten, aber das liegt vielleicht wieder am Browser (Internet Explorer).

Arnie1_0 wrote:
Du kannst es aber auch einfach über eine Javascript-URL auf jede x-beliebige Seite einfügen. Diese wäre:
javascript:document.body.innerHTML='';vdocument=new DOMParser().parseFromString('<iframe src="https://scratch.mit.edu/projects/embed/162508168">', 'text/html'); document.body.appendChild(vdocument.body.children[0])

Ich habe es irgendwie nicht geschafft, nach dem Drücken auf F12 diesen Javascript-Code in die Konsole einzufügen. Liegt das wieder am Internet Explorer?

Arnie1_0 wrote:
Meine ProjektID (162508168) kannst du einfach durch die von deinem Projekt ersetzen. Dann sollte es gehen, sonst ist dein Browser einfach zu schlecht für alles!

Wenn es wegen dem Browser zu oft zu Darstellungsproblemen kommen sollte, werde ich mir vielleicht wirklich wieder einen anderen Browser zulegen…

Arnie1_0 wrote:
Liebe Grüße
Arnie

Vielen Dank für deine ausführliche Antwort!

Liebe Grüße
NpChecker

> Mein Profil

> Meine Projekte

> Meine Studios

Arnie1_0

NpChecker wrote:
Arnie1_0 wrote:
Du kannst es aber auch einfach über eine Javascript-URL auf jede x-beliebige Seite einfügen. Diese wäre:
javascript:document.body.innerHTML='';vdocument=new DOMParser().parseFromString('<iframe src="https://scratch.mit.edu/projects/embed/162508168">', 'text/html'); document.body.appendChild(vdocument.body.children[0]); void(0)
Ich habe es irgendwie nicht geschafft, nach dem Drücken auf F12 diesen Javascript-Code in die Konsole einzufügen. Liegt das wieder am Internet Explorer?

Bei mir wurde nur der Text

[object HTMLIFrameElement]

im IE angezeigt. Ich hätte nie gedacht, dass er nicht einmal das kann.
Das ist eine JS-URL. Das wird normal nicht aus der Browserkonsole ausgeführt sondern aus der Adressleiste also da wo die URL der Aktuellen Seite steht. Wenn man als Protokoll 'javascript:' und nicht 'http://', 'https://', 'ftp://', 'blob://', 'ws://', … angibt, wird keine neue Seite geladen sondern der Text in der Adressleiste ausgeführt. Das kennst du vielleicht auch von den Javascript-Links:

<a href="javascript:void(0); alert('Hi, ' + prompt('Bitte gib deinen Namen ein') + '!');">

Das ist eigentlich genau das gleiche

Und hier noch die Erklärung für den Link, falls sie dich interessiert

Link

javascript:document.body.innerHTML=''; vdocument=new DOMParser().parseFromString('<iframe src="https://scratch.mit.edu/projects/embed/162508168">', 'text/html'); document.body.appendChild(vdocument.body.children[0]); void(0)

javascript:

Zeigt, dass der Text in der Adressleiste ausgeführt werden soll

document.body.innerHTML='';

löscht den Kompletten Inhalt der Seite (dass man das Projekt sieht. Man kann diesen Teil natürlich auch weglassen)

vdocument=new DOMParser()

initiert (schlampig) eine neue Variable (nicht im strict mode ausführen sonst kommt ein Error!!!) und speichert darin einen DOMParser (noch kein Dokument!)

.parseFromString('<iframe src="https://scratch.mit.edu/projects/embed/162508168">', 'text/html');

erstellt über die Methode parseFromString() des erstellten DOMParsers ein neues HTML-Dokument mit dem IFrame als Inhalt

document.body.appendChild();

fügt in das (Original-) Dokument einen Kindknoten ein

vdocument.body.children[0]

das hier ist das IFrame-Element, dass im Virtuellen Dokument (vdocument) gespeichert wurde und über den appendChild()-Befehl in das Originaldokument eingefügt wird.

void(0);

sagt dem Browser, dass keine neue Seite geladen werden soll. Kann oft auch weggelassen werden.

Sorry wenn ich (wieder) übertrieben habe

Liebe Grüße
Arnie

Linux fedora, Flash 11.2 (release 202)
Windows XP, Flash 20.0 (release 0)

NpChecker

Arnie1_0 wrote:
Sorry wenn ich (wieder) übertrieben habe

Mit was, den Codes? Mich hat's nicht gestört,

auch wenn ich derzeit (noch) kein Javascript programmiere!

Ich hatte mich vor Kurzem gefragt, wie man JS-Skripte nur verstehen kann, da man hier viel unverständlichere Codes verwendet als in HTML.

> Mein Profil

> Meine Projekte

> Meine Studios

Arnie1_0

NpChecker wrote:
Ich hatte mich vor Kurzem gefragt, wie man JS-Skripte nur verstehen kann, da man hier viel unverständlichere Codes verwendet als in HTML.

Eigentlich ist Javascript überhaupt nicht kompliziert. Das ist (fast) nur nur Englisch und eben die Sprache, in der man gerne Skriptet (ich mache es am liebsten auch auf Englisch, dass es einheitlich ist).
Wenn man Englisch mehr oder weniger kann, dürfte auch JS kein großes Problem mehr sein. Man muss nur die oft genutzten Attribute, Funktionen und Methoden kennen. Dann ist es noch hilfreich zu wissen, wie die einzelnen Objekte aufgebaut sind, also z.B. dass ein Array so etwas wie eine Liste ist, in der man für die Laufzeit Daten Speichern kann und diese über den Index wieder abrufen. Oder dass ein Objekt gleich ein Array ist, ein Array aber nicht gleich ein Objekt, da man in einem Objekt auch einen Index mit Namen festlegen kann (nicht nur Zahlen). Dann sollte man sich noch ein bisschen mit dem DOM- Objekt auskennen und auch HTML können.

Das wäre dann auch schon (fast) alles

Linux fedora, Flash 11.2 (release 202)
Windows XP, Flash 20.0 (release 0)

NpChecker

Arnie1_0 wrote:
Eigentlich ist Javascript überhaupt nicht kompliziert. Das ist (fast) nur nur Englisch und eben die Sprache, in der man gerne Skriptet (ich mache es am liebsten auch auf Englisch, dass es einheitlich ist).

Vielleicht werde ich ja irgendwann anfangen, Javascript zu lernen, aber damit warte ich vielleicht noch eine Weile und befasse mich solange lieber mit HTML.

Übrigens habe ich mit Scratch einen HTML-Editor erstellt, wenn du willst, kannste ihn dir anschauen.

P. S.: Und die Uhrzeit wird mal wieder falsch angegeben. Ich habe das um 18 Uhr gepostet und nicht um 12 Uhr.

Last edited by NpChecker (June 4, 2017 15:58:03)

> Mein Profil

> Meine Projekte

> Meine Studios

Arnie1_0

NpChecker wrote:
P. S.: Und die Uhrzeit wird mal wieder falsch angegeben. Ich habe das um 18 Uhr gepostet und nicht um 12 Uhr.

Die Uhrzeit wird nicht falsch angegeben. Weil die/der Server in Karlifornien > San Francisco stehen. Nach der Zeitzone America/Los_Angeles ist es wahrscheinlich genau die richtige Zeit.

Quelle:
http://www.ip-tracker.org/locator/ip-lookup.php?ip=151.101.130.33

Linux fedora, Flash 11.2 (release 202)
Windows XP, Flash 20.0 (release 0)

NpChecker

Als Zusammenfassung:
Den HTML-Code zum Einbetten eines Scratch-Projekts findet ihr nach dem Klicken auf Einbinden unter dem Projekt. Einfach kopieren und entsprechend in den HTML-Quelltext einfügen.

<iframe allowtransparency="true" width="485" height="402" src="//scratch.mit.edu/projects/embed/13177641/?autostart=false" frameborder="0" allowfullscreen></iframe>

Sollte dies jedoch nicht funktionieren, verwendet diesen simpleren HTML-Code:

<iframe src="https://scratch.mit.edu/projects/embed/13177641"></iframe>

Es empfiehlt sich jedoch, die Maße der Projektanzeige zu bestimmen:

<iframe src="https://scratch.mit.edu/projects/embed/13177641" width="485" height="402"></iframe>

Und eben die gewünscht Projekt-ID verwenden.

Sollte etwas davon falsch sein, bitte verbessern.

Liebe Grüße
NpChecker

> Mein Profil

> Meine Projekte

> Meine Studios

Discuss Scratch