Liebes Board!
Meine Recherche zu dem Thema verlief leider nicht sehr erfolgreich, deswegen wende ich mich mal wieder ans Board!
Mein Vorhaben: Mit meinen Schülern (6. Klasse) bastele ich eine Entscheidungsgeschichte, also eine interaktive Geschichte. Vielleicht habt ihr schon mal ein derartiges Buch gelesen oder ein DSA(Das Schwarze Auge)-Soloabenteuer gespielt. So etwas lässt sich grundsätzlich super als Browserspiel umsetzen, man braucht ja eigentlich nur ein bisschen Textformatierung und Links. Die technische Umsetzung liegt bei mir, die Kinder sollen die Geschichte schreiben. Die Schüler sind sehr motiviert und das Projekt läuft, nun aber zu meinem Problem.
Da die Schüler die Texte kontinuierlich überarbeiten und ich sie ungern in einem HTML-Editor arbeiten lassen möchte, hatte ich die Idee, sie die Texte im txt-Format abspeichern zu lassen. Die verschiedenen Seiten, die ich zu den "Stationen" erstelle, greifen dann auf die Textdateien zu, sodass alle Aktualisierungen auch im Browser auftauchen, ohne dass an den HTML-Seiten jedes Mal etwas geändert werden muss. Das HTML-Gerüst soll also fest stehen und ist für jede Seite/"Station" gleich - bis auf die Verlinkung der Entscheidungsoptionen.
Meine bisherige Lösung: <iframe src="Texte/1.txt" width="80%" height="40%" scrolling="no">
Mein Problem: Ich bekomme die Textdateien nicht schön formatiert. Ich schaffe es weder, die Schriftart zu ändern, noch ein Hintergrundbild einzubauen. Habe in HTML nur Grundkenntnisse.
Beispiel: Einleitung
Habt ihr Ideen?
Vielen Dank schon mal!
Christian
Geändert von Trevanian (08.02.17 um 15:19 Uhr)
Anzeige
Hm... Deine Variante hätte ich auch gewählt, um externe Texte einzubinden.
Die Formatierung wirst du allerdings m.E. so nicht hinbekommen, da halt nur der Text (ohne Formatierungen) ausgelesen wird.
Du kannst die Kids ja in einer Textverarbeitung tippen und formatieren lassen.
Beim Speichern sollten sie dann aber ".htm(l)" wählen - das sollte jede Textverarbeitung können.
Und wenn du dann statt der "Text.txt" die so erstellte "Text.htm(l)" einbindest, sollte es klappen.
Ich würde mit meinem Laienwissen behaupten, das es nur via Javascript möglich wäre, aber dazu müsste 1.txt in html geschrieben worden sein und nicht als Textdatei. Also so richtig mit HEAD BODY usw. Dann liesse es sich auch mit CSS stylen, das muss aber in diese 1.html dann rein. Und damit wäre ein reiner Text IMO nicht mehr möglich.
Oder man ändert nachträglich via Javascript Teile der Webseite mit Inhalt aus der 1.txt. Da kenne ich mich aber nicht mit aus. Ich kann dir lediglich sagen, dass Arbeiten mit iFrames schlichtweg die Krätze sind, weshalb es kaum noch jemand benutzt.
Denkbar wäre aber auch ein PHP-Server, wo mittels PHP-Befehl die Seite mit 1.txt eingefügt aufgebaut wird.
MfG
Perfekt, DS-Danila, das ist es - genau nach so einer Lösung habe ich gesucht! Vielen Dank!
Word bzw. OpenOffice öffnet die HTML-Seiten sogar ohne Tags, sodass die Kinder nicht verwirrt werden. :-)
@ditto: Bin leider was iFrames angeht alternativlos. Das hier ist das Gleiche in Grün, oder?
<p>
<object data="datendatei.txt" type="text/plain" width="200" height="100">
</object>
</p>
Ich habe zwar auch nur Grundkenntnisse in HTML, aber so was habe ich immer über CSS gemacht.
Füge oben unter <head> noch einen <Style>-Tag ein, worin du dann alle Formatierungen definieren kannst.
Ein Beispiel, ist einfach nur zur Anschauung aus einer meiner HTML-Dateien heraus kopiert:
Dann deine Zeile entsprechend mit id="header" (in diesem Beispiel) ergänzen, zusätzliche Formatierungen sind mit style auch noch möglich:HTML-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Titel der Seite</title> <style type="text/css"> #header { font-size: 2em; font-weight: bold; padding: 3px; color: yellow; font-family: DigitalSerial; <!-- s-digi.ttf + s-digib.ttf --> } </style>
Vermutlich wirst du das schon kennen, aber ich verlinke dir trotzdem mal ein paar empfehlenswerte Online-Hilfen:HTML-Code:<iframe id="header" style="float: left; color: cyan;" src="Texte/1.txt" width="80%" height="40%" scrolling="no">
edit:
Während ich schrieb, kamen bereits weitere Antworten rein.
Dabei fiel mir auf, dass ich die hier genannte Möglichkeit noch nie mit iFrames probiert habe, immer nur div-Container usw.
Daher kann ich nicht sagen, ob das auch so mit iFrames funktioniert.
Danke, Norbert. Die Formatierung übernimmt er bei mir leider nicht für den Text aus der Datei... Möglicherweise "beißt" sich der<stlye>-Abschnitt mit einem zweiten, den ich fürs Backgroundbild verwende...?
Das kann ich mit meinen beschränkten Grundkenntnissen leider nicht sagen, möglich wäre es.
Ähnliches hatte ich mal mit Grafiken, wo in einer großen Sternkarte kleine Teilausschnitte derselben mit anderen Konstellationen überdeckt werden sollten. Die kleine Grafik dynamisch (per Mausklick) einzufügen war zwar kein Problem und die Klick- und Hover-Bereiche (<area ...>) der Grundkarte waren dadurch auch wie gewünscht deaktiviert, aber ich habe es nicht hinbekommen, die neuen Klick/Hover-Bereiche der Teilkarten zu aktivieren.
Mit der Lösung über Word kann ich gut leben, das ist für die Schüler auch am einfachsten zu handhaben - und sie können (und werden!) sich hinsichtlich Farbe und Größe austoben...
Bin gerade am ausmisten meiner Inbox und bin auf den Thread gestoßen.
1.) Iframes sucken. Und zwar hart.
2.) Da der Iframe nur ein Rahmen für den inhalt einer anderen Website ist, kannst du deine andere Website (das Textdokument) nicht einfach "durchformatieren".
Probier es mal mit ner anderen seite (z.b. google) da kannst du auch nicht einfach so das Bild durch dein Foto ersetzen.
3.) Die Verwendung der Formatierung ist stark verbesserungswürdig.
Wenn ich bei ner Auflösung von 1280 x 800 mir die Seite ansehe werden teile des Textes im Frame abgeschnitten ohne dass ich die möglichkeit habe zu scrollen. Besonders deutlich wird das wenn der Browser nicht auf fullscreen ist und du das Fenster kleiner ziehst.
Eine Prozentangabe bei den width und height parametern beziehen sich auf die Größe des Fensters. In Kombi mit dem Noscroll parameter wird es unlesbar.
Formatiere das Frame mit einer Fixen Breite und Höhe, möglichst in em und scrollbar.
4.) Die Eleganteste lösung für dein Problem wäre wohl, die Textdatei mit php auszulesen und in einem Div-Container zu formatieren.
Danke, Razorblade!
Deinen dritten Punkt habe ich nun berücksichtigt, für 4.) bin ich nicht versiert genug... :-(
Hallo Trevanian
Dein Vorhaben liesse sich gut mit https://www.dokuwiki.org/de:dokuwiki verwirklichen. Du brauchst dafür einen
Webserver mit PHP, aber keine Datenbank oder Programmierkentnisse.
Ich benutze es selber, um mein privates Allerlei - Itranet zu pflegen.
hth
Np.Zitat von Trevanian
Punkt 4 ist eigentlich ganz einfach:
index.php
Code:<html> <head> <title>Auslesen</title> <meta charset="utf-8"> <link rel="stylesheet" href="format.css" /> </head> <body> <div id="links">Spalte Links</div> <div id="textdokument"> <?php $content = file_get_contents('level1.txt'); echo nl2br($content); ?> </div> <div id="rechts">Spalte Rechts</div> </body> </html>
level1.txt
Code:WILD WILD WEST Du bist in einem sandigen warmen Gebiet gestrandet und weißt nicht wo hin. Die Sonne steht fast direkt über dir und scheint brennend auf deinen Kopf herab. Kein Baum ist in der nähe wo du einen schattigen platz finden könnest. Jetzt fragst du dich wo du bist, doch dann erinnerst du dich an die Zeitmaschine in der du warst den Schalter um gelegt hast und dann bist du wohl irgendwo gelandet. Nach deinem Wissen müsstest du im Westen sein, wenn du in Geschichte aufgepasst hättest. Du siehst ein paar Gestalten die dir den Steuerknüppel stehlen der an der Maschine war. Jetzt hast du ein Problem denn ohne Steuerknüppel kommst du hier nicht weg. Du läufst in die Richtung wo du vermutest das die Gestalten hin gelaufen sind. Nach einiger zeit kommst du zu zwei Dörfern vorbei. Eins sieht aus wie ein Indianerzeltlager und eins wie eine Cowboy Stadt. Komisch, denkst du, normalerweise sind die doch verfeindet. Warum haben die Indianer ihr Lager so nah an der Cowboy Stadt aufgeschlagen? Das willst du jetzt herausfinden. Willst du zu dem Indianerzeltlager gehen? (1) Oder willst du zu der Cowboystadt? (2)
format.css
Code:@charset "utf-8"; body { background-color: #000; text-align: left; color: white; font-family: verdana, arial; } #links { width: 25%; float: left; background-color: #ddaa00; } #textdokument { font-size: 1.2em; color: #000a12; background-color: #ededed; text-align: justify; width: 50%; height: 30em; overflow: scroll; float: left; padding: 0.5em; } #rechts { background-color: #00aadd; width: 23%; float: right; }
Danke! Ich fuchse mich so langsam rein...
Habe das nun gemacht, wie DS-Danila das vorgeschlagen hat.
Wer mag, darf gern mal einen Blick riskieren - unsere Testversion ist nun online: Einleitung
Geändert von Trevanian (28.02.17 um 08:56 Uhr)
Berechtigungen
Zitieren