programm in html5 umsetzen

[kinnek]

Hallo,

Ich möchte derzeit ein etwas ungewöhnlicheres Projekt in HTML5 umsetzen. (Bisher läuft das Projekt mit Flash)
Ich habe mehrere 1000 Bilder, welche mehrsprachige Benennungen/Beschriftungen in den Bildern haben. Diese sind mit Koordinaten in .txt Dateien gespeichert. Diese Beschriftungen in den Bildern sollen dann ein und ausblendbar und in der Sprache wechselbar sein.

Ein derartiges Projekt habe ich mit HTML5 und Javascript noch nie umgesetzt, daher bitte ich um Hilfe/Ideen wie ihr das angehen würdet.

Kann man mit javascript die .txt Dateien parsen und die Struktur des bisherigen Flash Programms übernehmen? Das ganze also etwas "automatisieren". Händisch mehrere 1000 Seiten zu erstellen mit jeweils mind 3 Beschriftungen pro Bild ist natürlich ein riesen Aufwand...

Wie setzt man die Bezeichnungen am besten Anhand der Koordinaten "in" die Bilder? Besonders auch in Hinblick auf verschiedene Bildschirmauflösungen.

vielen dank für ratschläge/tipps
gruß kinnek

 

[threadi]

Was Du willst würde ich im Hintergrund eher mit PHP umsetzen (txt parsen, die Bilder und die passenden Beschriftungen "irgendwie" ausgeben). Die Ausgabe kann dann natürlich HTML5 sein. JavaScript sollte höchstens für den Bildwechsel notwendig sein, ginge aber je nach Aufbau des HTML-Codes auch mit CSS.

 

[kinnek]

Mit php würde es gehen, ja.
Aber das ganze soll nicht als Website laufen, sondern lokal auf dem Computer und längerfristig auch auf Mobilgeräten als PhoneGap Apps.
Und da hab ich natürlich kein PHP zur Verfügung. XAMPP und so ist auch keine Alternative, da das ganze als "Software" laufen soll.

Wäre der beste Ansatz dann ein Script zu schreiben, welches mir die txt Dateien parst und daraus HTML5 Seiten bastelt?

Wie fügt man am besten über CSS Beschriftungen in Bilder ein, damit es nachher auch skalierbar ist (für mobil geräte etc)?

Gruß
Kinnek

 

[threadi]

Wäre der beste Ansatz dann ein Script zu schreiben, welches mir die txt Dateien parst und daraus HTML5 Seiten bastelt?

Ja, falls das ohne AJAX auf den mobilen Geräten geht ..

Per CSS kannst Du nichts in Bilder einfügen. Du könntest höchstens andere HTML-Elemente über das Bild-Element schieben, falls Du so Text auf dem Bild stehen haben willst.

 

[kinnek]

Welche HTML Elemente am Besten und wie schiebe ich sie am Besten über die Bilder?
Absolut positionieren? Mit margins?

Ich brauche im Grunde oben eine kleine Navigation und ein großes Bild, darauf dann die Beschriftungen.
Nun müsste ich die 3 Sprachen am besten übereinander legen und über javascript dann per class ein und ausblenden?

 

[Tronjer]

Ich brauche im Grunde oben eine kleine Navigation und ein großes Bild, darauf dann die Beschriftungen.
Nun müsste ich die 3 Sprachen am besten übereinander legen und über javascript dann per class ein und ausblenden?

Warum? Es würde sich doch eher anbieten, die Beschriftungen per AJAX in einen HTML-Container zu laden.

Demzufolge würde mir erst einmal Gedanken darüber machen, wie die Textdateien syntaktisch aufgebaut sind und nach welchen Kriterien sie geparst werden können.

 

[kinnek]

Die Bilder sind in Verschiedenen unterordnern Verteilt und haben alle die Auflösung 1024*768.

Sie sind dann zum Beispiel im Ordner:
/aaa/bbb/ab01.jpg
und die txt dazu
/aaa/bbb/ab01.txt
Die txt sieht dann so aus:

&i1=Thing/Ding/machin [510,400]
&i2=Thing2/Ding2/machin2 [300,600]
&i3=Thing3/Ding3/machin3 [800, 350]

Also englisch/deutsch/französisch und dahinter die Koordinaten.

Mit fehlt da gerade wirklich so ein bisschen der Ansatz wie ich das am Besten angehen soll.

 

[threadi]

Text-Dateien mit JavaScript laden:
JavaScript Artikel: (Text-)Dateien laden mit JavaScript - HTMLWorld

 

[Tronjer]

Die Bilder sind in Verschiedenen unterordnern Verteilt und haben alle die Auflösung 1024*768.

Sie sind dann zum Beispiel im Ordner:
/aaa/bbb/ab01.jpg
und die txt dazu
/aaa/bbb/ab01.txt
Die txt sieht dann so aus:

&i1=Thing/Ding/machin [510,400]
&i2=Thing2/Ding2/machin2 [300,600]
&i3=Thing3/Ding3/machin3 [800, 350]

Also englisch/deutsch/französisch und dahinter die Koordinaten.

Mit fehlt da gerade wirklich so ein bisschen der Ansatz wie ich das am Besten angehen soll.

Es geht ja auch um die schiere Menge der Daten. Eine Schleife zu bauen, welche beliebig viele <img> Tags mit aufsteigenden Bildnamen auf einer HTML Seite ausgibt, ist einfach. Aber wenn du wirklich tausende von Bildern hast, dann sprengt das jegliche Bandbreite.

Mein Ansatz wäre, ein PHP Script zu schreiben, welche die Texte in ein Array mit drei Substrings zerlegt um die nicht benötigsten Zeichen bereinigt und zusammen mit dem dazugehörigen Bild in einer Datenbank speichert. So dass ich dort 4 Spalten habe: bildname, deutsch, englisch, französisch.

Der zweite Schritt ist die Suche nach einem passenden Gallerie Plugin, welches die Übergabe der Bilder via Ajax erlaubt.

Der dritte Schritt ist das AJAX Script selber. Es sollen ja nicht nur die Bilder sondern auch die Beschriftungen geladen und letztere an Eventhandler gebunden werden.

Zu überlegen wäre anschließend, wie diese Beschriftungen überhaupt ausgegeben werden sollen. Beim Hovern über ein Bild und dann alle drei direkt untereinander oder einzeln an bestimmten Hotspots? Mit CSS3 lassen sich afaik <title> Attribute in Tooltips verwandeln, aber das hilft nicht bei drei verschiedenen Titeln pro Bild. Andererseits lassen sich image maps nicht in Galerie Slider einbinden. Auch da wäre dann wieder ein Workaround mit Eventlistenern notwendig.