Hi,

ein Kommilitone und ich haben vor, die Odyssee von Homer digital ins Netz zu stellen und für Schüler eine Übersetzungshilfe zu erstellen.

Dabei wollen wir zunächst nur mal den griechischen Text ins Netz stellen und jedes einzelne Wort anklickbar machen. Klickt der User auf ein Wort, wird in der linken Spalte die Wortübersetzung und die Formenaufschlüsselung angezeigt:

Beispiel:

Ich klicke auf [anthrôpôn] und links wird angezeigt:
anthrôpos - der Mensch
Gen. Sg. (Genitiv Singular)

Die [] bedeuten, es steht hier eigentlich in griechischer Schrift.

Das kann man sich genauso vorstellen wie hier, allerdings auf Deutsch und mit schönen Illustrationen von seiten meines Komilitonen.

Die einzige Möglichkeit in meinem Horizont, das zu realisieren wären jetzt Frames x_X. Da hab ich aber keine Lust drauf, da ich dann für jedes Scheiss-Wort eine HTML-Datei erstellen darf...

1. Frage: Gibt es die Möglichkeit, das irgendwie mittels Parameter im <a>-Element zu realisieren? Also etwa so:

<a lemma="anthropos" trans="der Mensch" spec="Gen.Pl">[anthrôpôn]</a>
Dabei sind die Parameter jetzt erfunden, "lemma" steht für das Wort in der Lernform (Nom. Sg.), "trans" für Übersetzung und "spec" für Spezifikation.

So, meine Frage ist jetzt nicht "Wie geht das?" sondern: Geht das überhaupt? Wie kann ich das realisieren, brauche ich dafür JavaScript oder PHP oder beides? Ist das viel Arbeit?

2. Frage:

Griechische Zeichen sind ja im Unicode enthalten. Die kann ja dann jeder auf der Welt sehen, oder?

Keine Frames, die Zeiten sind vorbei. Schlage Mischung aus PHP, DOM/Javascript und viel CSS vor:

- PHP/HTML als Framework, zieht bei einer solchen Idee mit Sicherheit auch eine (My)SQL Datenbank mit sich (assoziativer DB-Aufbau -> Wörterbuchschema). Die anklickbaren Wörter senden dann im <a> Tag neben der URL auch die von PHP benötigten Parameter gleich mit.
- DOM/Javascript und CSS für den Seitenaufbau. Da gibbet so ein Projekt im Netz, irgendwas mit Light..., was z.B. dynamisch Bilder anzeigt (hast du evtl. schonmal woanders gesehen). Vielleicht kann man damit anstatt Bilder auch dynamisch generierte Webseiten anzeigen lassen. Irgendeiner von den Webbern hier weiß mit Sicherheit genau, wie das Projekt heißt und ob sowas möglich ist.

Ansonsten mußt du dir mit CSS und DOM/Javascript ein dynamisches <div> "Fenster" basteln, was die Ergebisse anzeigt, ohne das man mit Frames, Fenstern und dergleichen herumeiern muß.

Ganz simpel mit PHP wäre einfach den Text anzeigen lassen und wenn einer auf ein Wort klickt, lädt der Browser die dynamische Ergebnisseite: Viele Wege führen nach Rom.

Ich denke mal, die Webber haben noch andere Ideen parat.

UNICODE: Hängt davon ab, welche Kodierung verwendet wird, ob der Browser das rafft, ob das OS Unicode aktiv verarbeitet (solange keiner mehr <= Win98 SE verwendet) und ob der User dem Browser auch gesagt hat, daß er die Zeichensätze automatisch erkennen soll.

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)

Ich bin jetzt nicht so der Profi, aber was spricht denn gegen pures "dynamisches" CSS? Also nicht, dass beim Klicken erst eine neue Seite aufgebaut, sondern mittels :hover eine Art Tooltip angezeigt wird.
Beispiel
ist vielleicht nicht so elegant :D

Sorry, ich hab keine Zeit das Problem richtig durchzulesen...

edit: Ok, es scheint sich doch um etwas größeres zu handeln und nicht nur um ein paar Worte.

Website

also ich an deiner Stelle würde die Seite zunächst mal grundsätzlich mit div-Containern einteilen. Da hast dann zum Beispiel einen dabei, der die id "uebersetzungsBox" trägt. Wenn du jetzt auf ein Wort klickst, dann rufst du keine neue Seite auf, sondern ne JavaScript-Funktion, die wiederum mittels AJAX eine andere PHP-Seite anfordert, dieser das geklickte (unter Umständen wegen Zeichensatz komplett maskierte) Wort mitgibt und die Antwort abwartet. Diese Antwort wird dann mittels JavaScript dynamisch in den ÜbersetzungsContainer gehangen.
Also einfachstes AJAX-Konzept. Brauchst 2 PHP-Seiten dafür und ein paar JavaScript-Funktionen. Und du musst dir natürlich überlegen, wie du die Daten, die zu den Worten angefordert werden können, sinnvoll im Hintergrund führst. Alles hart in eine PHP-File gecoded wär so ziemlich das Schlimmste.

Für JavaScript: Nimm jQuery. Das sieht dann ungefähr so aus:
Quellcode:$('a').click(function(e) {
    $.get('info.php', { word: e.target.nodeText }, function(data) {
        $('#info').html(data);
    }
    return false;
});

Und der HTML-Teil:
<div id="info">Hier kommt dann die Übersetzung</div>
<p><a href="info.php?word=bla">bla</a></p> Der Link ist für Browser, die kein JavaScript unterstützen.
Und schon wird beim Klick auf ein a-Element info.php?word=... aufgerufen und in das #info-div reingeschrieben (Code nicht getestet, hat also wahrscheinlich noch Fehler).
BTW: Wenn du jedem Wort noch die Übersetzung ins title-attribut reinschreibst, kann man dafür auch einfach den Tooltip lesen.

Würde auch (trotz Nutzung von NoScript) zu ner Lösung mittels XMLHttpRequest raten...
Datenbank mit Tabellen zum halten deiner Übersetzungen und deiner Texte;
php-Skripte zum dynamischen Darstellen deiner Seite und dem handlen der Übersetzungs-Requests;

also sowas hier:
Quellcode:DB(Table Translation) <-> PHP(request.php) <-> AJAX <-|
                                                ↑     |-> User
DB(Table Texts)/Text-Datei <-> PHP/XHTML(text.php) <--| =>
User fragt text.php (mit entsprechenden Parametern) an. Das php-Skript holt sich den darzustellenenden Text (aus ner Table oder auch aus ner Datei) und baut daraus ne XHTML-Seite inkl. JavaScript zusammen (damit du nur die Texte ablegen brauchst und die <a>-Tags automatisch für jedes Wort generiert werden). Klickt der User dann auf nen <a>-Tag (oder fährt mit der Maus drüber je nach Belieben), rufst du ne JS-Funktion welche per XMLHttpRequest die Daten am Server abfragt (request.php mit Parametern). request.php holt dir dann die Übersetzung für das gewünschte Item aus der Datenbank und schickt das Ergebnis als XML-Dokument zurück. Die Antwort lässt du dann von JS entsprechend auf der Seite anzeigen (wie Jean schon vorgeschlagen hat zB in ner Übersetzungsbox).

edit: mit jQuery sieht das natürlich auch sehr interessant aus :)

The C language combines all the power of assembly language with all the ease-of-use of assembly language.
"humorig is n blödwort :>" by -CarniGGeLjumpR-

Zitat:

hausi postete
Für JavaScript: Nimm jQuery. Das sieht dann ungefähr so aus:
Quellcode:$('a').click(function(e) {
    $.get('info.php', { word: e.target.nodeText }, function(data) {
        $('#info').html(data);
    }
    return false;
});

Und der HTML-Teil:
<div id="info">Hier kommt dann die Übersetzung</div>
<p><a href="info.php?word=bla">bla</a></p> Der Link ist für Browser, die kein JavaScript unterstützen.
Und schon wird beim Klick auf ein a-Element info.php?word=... aufgerufen und in das #info-div reingeschrieben (Code nicht getestet, hat also wahrscheinlich noch Fehler).
BTW: Wenn du jedem Wort noch die Übersetzung ins title-attribut reinschreibst, kann man dafür auch einfach den Tooltip lesen.

Zitat:

Bluthund postete
Würde auch (trotz Nutzung von NoScript) zu ner Lösung mittels XMLHttpRequest raten...
Datenbank mit Tabellen zum halten deiner Übersetzungen und deiner Texte;
php-Skripte zum dynamischen Darstellen deiner Seite und dem handlen der Übersetzungs-Requests;

also sowas hier:
Quellcode:DB(Table Translation) <-> PHP(request.php) <-> AJAX <-|
                                                ↑     |-> User
DB(Table Texts)/Text-Datei <-> PHP/XHTML(text.php) <--| =>
User fragt text.php (mit entsprechenden Parametern) an. Das php-Skript holt sich den darzustellenenden Text (aus ner Table oder auch aus ner Datei) und baut daraus ne XHTML-Seite inkl. JavaScript zusammen (damit du nur die Texte ablegen brauchst und die <a>-Tags automatisch für jedes Wort generiert werden). Klickt der User dann auf nen <a>-Tag (oder fährt mit der Maus drüber je nach Belieben), rufst du ne JS-Funktion welche per XMLHttpRequest die Daten am Server abfragt (request.php mit Parametern). request.php holt dir dann die Übersetzung für das gewünschte Item aus der Datenbank und schickt das Ergebnis als XML-Dokument zurück. Die Antwort lässt du dann von JS entsprechend auf der Seite anzeigen (wie Jean schon vorgeschlagen hat zB in ner Übersetzungsbox).

edit: mit jQuery sieht das natürlich auch sehr interessant aus :)

Zitat:

UserFriendly postete
Das hieße dann praktisch, ich müsste nur eine Tabelle mit vier Spalten (Griechisches Wort, Lernform, Übersetzung, Spezifikation) und das Skript würde dann selber nach dem Griechischen Wort suchen und die anderen 3 Spalten auslesen?

The C language combines all the power of assembly language with all the ease-of-use of assembly language.
"humorig is n blödwort :>" by -CarniGGeLjumpR-

Zusätzlich zum genannten würde ich noch raten, die Wörter-Beschreibungen die aus der DB kommen, am Server zu cachen - es muss ja nicht sein, dass jeder Klick auf ein Wort im Hintergrund einen DB Request auslöst, denn wenn die Beschreibungen für die einzelnen Wörter mal in der DB drin sind, wird sich da kaum noch was dran ändern.

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

So das Grundgerüst steht jetzt schon, bin ich aber auf ein Problem gestoßen:
http://aeg-abi007.de/odys/

In FF und Opera funzt es natürlich aber im IE wird die Navi beim Rollover seltsam dargestellt.

Bei der Navi hab ich mich nach diesem Prinzip gerichtet:
http://www.alistapart.com/articles/slidingdoors/

Das sieht so aus, dass ein Reiter aus zwei Bildern besteht: Der linken Ecke und der Rechten Ecke.
Das <a> Element hat die linke Ecke als Hintergrundbild, das <li> Element hat die Rechte Ecke als Hintergrund Bild.
Dadurch kann ich ganz einfach Navi-Punkte einfügen, indem ich einfach nen <li> Punkt hinzufüge. Die Navi wächst auch mit, wenn ich die Schrift vergrößere.

Jetz muss ich natürlich dem <a> und <li> Element sagen, dass sie beim Rollover ein anderen Hintergrundbild annehmen sollen.
Anscheinend checkt das der Internetexplorer nicht, das ist mir auch klar, weil <li> Elemente normalerweise kein Hintergrundbild haben, aber was anderes fällt mir auch nicht ein.

Ich habs schon mit before probiert, aber dadurch fügt er mir das komplette Bild beim Rollover ein und nicht nur den Ausschnitt, der zu sehen ist (der so groß ist, wie der Listenpunkt).
http://www.css4you.de/beforeafter.html

Bezüglich der Navigation:
Da seh ich jetzt im Moment nur die Möglichkeit entweder für jeden Navigationspunkt ne Extra-Seite zu erstellen oder irgendein PHP-Skript zu nehmen, das das organisiert, aber davon hab ich keine Ahnung.
Hat jemand von euch vielleicht noch ne Idee?

Hast du Commented-Backslash für nen IE5-Hack genutzt? So weit ich mich erinnere ist in dem Tutorial auch die Rede davon. Oder hast das weggelassen? Könnte dein Problem sein..

Wenn ich mich recht erinnere, kann der IE ":hover" nur bei Links, also <a>'s.

Vllt. kannst du das grafische per "<a>" machen und nur die Ausrichtung per "<li>".

sincères amitiés scus
--
Tand, Tand ist das Gebilde von Menschenhand

Ne, ich brauch ja für jeden Reiter zwei Grafiken: Das linke Eck und das Rechte Eck. Die müssen zwei verschiedenen Elementen als Hintergrundbild zugewiesen werden, sonst klappt das nicht.

Ich hab versucht einen <span> zwischen die <a>´s einzusetzen, aber wenn ich den <span> zu nem Block-Element via display:block mache und das Hintergrundbild einsetze, ist der span nur genausogroß wie der Text x_X

http://alpha-septic.net/hosted/odysshit/

Man sieht das hier: Auf dem ersten Reiter ist so ein kleines helles Rechteck...das ist der <span> mit dem rechten Eck als Hintergrundbild. Und der muss jetzt so groß werden wie ein normaler Reiter...:(