Hauptseite

Ein Editor mit den Browser

Das Hantieren mit ein Texteditor dürfte nicht Jedermann Sache sein. Dementsprechend habe ich ein Applikation geschrieben die es erlaubt die Datei list.js und die Textdateien (Titeln/Untertiteln) graphisch, innerhalb des Browsers zu erstellen.

Da Browser nicht auf der Festplatte schreiben dürfen, müssen php und ein Webserver vorhanden sein.

Als Webserver habe ich mongoose auserkoren. Mongoose ist einfach und kann direkt von der Diashowverzeichnis gestartet werden (http://code.google.com/p/mongoose/).

Es wäre natürlich auch möglich z.B. der Apache Server zu verwenden, dies ist aber nicht empfehlenswert da einiges an Umkonfigurations Arbeiten notwendig wären (rechte, Verzeichnisse, ...).

PHP einrichten

Unixoiden (Linux,...)

Php gehört zu den Pakete die mit das System geliefert werden und kann über das entsprechenden Packet-Management installiert werden.

Ubuntu 11.04 bedarf die Installation von php-cgi und php-gd. Mit Fedora müssen php-cli und php-gd installieret werden.

Beim Starten des Mongoose Servers müssen Parameter übergeben werden. 

./mongoose -I `which php-cgi`

Ein Shellscript der es erlaubt der Server und ein Browser zu starten ist eine triviale Sache: 

#!bin/sh
./mongoose -I `which php-cgi` &
firefox http://localhost:8080/edit.php
pkill mongoose
Nach dem Anklicken des Scripts wird der Server im Hintergrund gestartet. Danach wird ein Browser, hier Firefox, aufgerufen. Sobald der Anwender Firefox beendet, wird mongoose ebenfalls gestoppt. Damit dies funktioniert, darf der Browser nicht bereits laufen. Selbstverständlich muss das Script im Diashow Verzeichnis, und mit Ausführungs-Rechte versehen sein.

Windows

Php-cgi muss auch vorhanden sein, bei ein Betrieb unter Windows reicht es einige Dateien aus der Archive (Die Setup/installations-Archive nicht verwenden) im Diashow Verzeichnis zu kopieren und die php.ini Datei anzupassen.
Folgende Dateien werden benötigt:

Die Datei php.ini-production ist in php.ini umzubenennen. Danach ist nach der Zeile: 
[PHP]
die Zeile: 
extension=.\php_gd2.dll
einzufügen.

Das Starten erfolgt mit das Kommando: 

mongoose-3.0.exe -I php-cgi.exe
Dieses Kommando kann natürlich in eine Datei, z.B. mongoose.cmdeingetragen werden.

Dateien und Verzeichnisse

Die Hauptdatei edit.php muss im Diashowverzeichniss kopiert werden.

Die von edit.php benötigte Dateien befinden sich im Verzeichnis data die ebenfalls zu kopieren ist.

Text-Dateien (Html) werden im Verzeichnis textes abgelegt, Woff Fonts müssen im Verzeichnis textes/fonts kopiert werden.

Bilder, im format jpeg sind in Unterverzeichnisse zu kopieren.

Sounddateien (ogg) gehören im Verzeichnis music

Bedienung von edit.php

Im Browser ist die Adresse: http://localhost:8080/edit.php einzugeben.

Die Oberfläche ist in 3 Hauptbereiche unterteilt. Oben können die Textdateien (html) der Verzeichnis textes eingtragen werden oder die Jpg Bilder aus alle andere Verzeichnisse ausser data und doc.

Das mittlere Bereich besteht aus den Papierkorb und eine Ablage Fläche.

Im Unteren Bereich befindet sich die Dia-Show Leiste und zeigt alle Elemente die in der Show aufgeführt werden. Zusätzliche Parameter, Musik, überlagerte Texte, sowie Tempo können verändert werden nachdem das Element mit einen Zweifachklick angefasst wurde

Bilder oder Texte werden durch anfassen mit der linke Maustaste und verschieben im Zielbereich kopiert. Im Show Bereich werden die Elemente vor das "Ziel-Bild/-Text" eingefügt. Um am Ende des Show ein Element zu plazieren, muss es auf der graue Fläche im Showbwreich deponiert werden.

Vorhandene Textdateien können korrigiert werden, dazu muss ein Element mit der rechte Maustaste angeklickt werden.

Die Show relevanten Daten können, nachdem das Bild im Show Bereich zweifach angecklicht wurden, angepasst werden.

Neue Dateien können mittels einer der unterhalb der Dia-Show Leiste vorhandene Schaltflächen erzeugt werden. Die Schaltfläche zum Sichern der Arbeit befindet sich ebenfalls unter der Dia-Show Leiste.

Browser Kompatibilität und Probleme

Außer den eigenen Fehler mussten auch Fehlern der Browser Hersteller beachtet werden. Da Google-Chrome eine sehr gute Debugger-Oberfläche verfügt, wurden eigene Fehlern, es passiert!, dort aufgespürt. Leider scheint Künstliche Intelligenz im Webkit integriert zu sein, Fehlerhaftes Code wurde scheinbar, intern, richtig gestellt und Firefox und Opera waren mit der Arbeit nicht begeistert.

Opera unterstützt nicht ohne weiteres das Drag und Drop wie es bei Google-Chrome oder Firefox realisiert ist. Diese Funktionalität wurde über ein Javascript aus fremde Feder nachgerüstet operaDragAndDrop.js (gitHub.com). operaDragAndDrop.js wurde zudem erweitert.

Opera akzeptiert, entgegen seinen Kollegen, nur Höhen und Breiten von maximal 32764px, dies ist zu wenig, deswegen werden die Bereiche Verzeichnisinhalt, Ablage und Diashow gegebenenfalls mit eine vertikale Scroll-Leiste versehen.

Opera hat ein sehr aggressives Caching, Änderungen von Javascript Dateien werden ignoriert wenn Opera nicht entsprechend konfiguriert wird. Um das Laden der Datei 'list.js' zu erzwingen wird diese Datei per Javascript eingelesen.

Opera verzettelt sich bei manche Style Angaben, manches musste so angepasst werden, dass es auch mit der verwendete Version funktioniert.

Wenn irgend welche Texte selektiert sind kann das Drag und Drop zu seltsame Erscheinungen (ins besonderen mit Firefox) auftreten. Etwaige Selektionen werden deswegen bei jede Maustastendruck gelöscht.

Html5 sieht der Unterstützung von Eingabeelement für Farbe, Bereiche usw. vor. Unglücklicherweise ist die Realisierung in der verschiedene Browser nicht so wie es sein sollte. Dementsprechend wurden die Script fd-slider.js (gitHub.com) und jscolor.js verwendet. Firefox schneidet hier, am schlechtesten ab!

Hauptseite