Ziel des flexiblen Browsergamekerns ist es ein einfaches, schnell benutzbares Browsergame-Rahmenwerk zu schreiben und dieses unter einer OpenSource-Lizenz zu stellen.

Der FBK enthält einen Webserver, eine Datenbank auf Basis der Serialisierung oder von SQLite und zuletzt ebenfalls Spielroutinen, die ein vollständiges Spiel ermöglichen.

Zwei Spiele, die mit dem FBK geschrieben worden sind:

1. http://www.anotherspacegame.de
2. http://www.jungfrauenspiel.de

Das zweite Spiel enthält spezielle Spiellogik, die ich nicht veröffentlicht habe.

Download

Der FBK und das Spiel ‘Another Spacegame’ ist einfach zu beziehen unter:

https://www.depon.net/downloads/fbk.zip

Der Quellcode ist mit folgendem Befehl zu beziehen:

hg clone -b BitBucket https://bitbucket.org/mbrenn/another-spacegame-public

Das Visualstudio-Projekt ‘src/FBK.sln’ öffnen (auch unter Monodevelop oder Sharpdevelop möglich) und ‘FBK’ als Startprojekt einrichten.

Alternativ auch direkt über BitBucket.org selbst: http://bitbucket.org/mbrenn/another-spacegame-public.

Das Einfügen von Informationen in bestehenden Tabellen funktioniert mittlerweile.

Nächster Meilenstein wird das Ändern von bestehenden Informationen in bestehenden Tabellen sein.

Ergo: Läuft!

Zuerst soll nun versucht werden Canvas zu verstehen. Dies wurde implementiert und es können nun die ersten Überlegungen durchgeführt werden, inwieweit man Canvas nutzen möchte.

Alternativen wären CSS3-Transformationen, wie sie im IE 10 und allen anderen Browsern genutzt werden. Hier kann man Bilder skalieren, rotieren und scheren. Leider reicht dies noch nicht ganz für meinen Einsatzwunsch.

Insgesamt steigt meine Liebe zu Javascript nicht sonderlich, aber immerhin funktioniert die Sache einigermaßen.

Nach einigen Spielereien habe ich nun die erste Version des Web-Dateimanagers abgeschlossen.

Warum ein Web-Dateimanager? Zumindest bei mir kommt es manchmal vor, dass ich Daten von meinem Rechner auf einen anderen Rechner übertragen möchte und kein SMB (Dateifreigabe-Protokoll) zur Verfügung habe.

Weiterhin ist Umbra ein Framework für hierarchische Daten, die über verschiedene Ansichten und Aktionen verwaltet werden können. Ein Dateisystem ist hierfür die perfekte Übungsaufgabe, da hier die Daten schon hierarchisch vorliegen.

Insgesamt mehr Spielerei als Sinnhaftigkeit und der Funktionsumfang ist momentan sehr eingeschränkt.

Installation

Die erste Version ist soweit fertiggestellt und auf vereinfachtes Ausführen optimiert.

1. Herunterladen: http://www.depon.net/downloads/umbra_1_0_0.zip und extrahieren.

2. Ausführen der DemoWeb-Gui.exe

(Die Meldung ignorieren)

3. Auf Start klicken, es sollte sofortig eine Meldung auftauchen, die einen zur Eingabe der Daten für einen zu erstellenden Administrator-Account auffordert:

4. Daten eingeben. Create Account klicken. Darauf hin öffnet sich der Browser, der um die Eingabe der Konto-Daten bittet:

5. Die gleichen Daten nochmals eingeben… Und Fertig ist die Benutzeroberfläche. Per Klick auf ‘Dateisystem’ kommt man in dieses.

Sonstiges

Der Webserver ist standardmäßig über Port 8081 im gesamten Netz erreichbar. Möchte man von einem anderen Rechner aus die Administrationsoberfläche öffnen, so gibt man im Browser http://{Rechnername/IP}:8081/ in den Browser ein.

Die Konfiguration liegt im ‘Configurations’-Ordner.

Es gibt nun eine GUI-Anwendung mit dessen Hilfe man momentan den FBK starten und beenden kann.

In der nächsten Zeit soll in dieser Anwendung auch die erstmalige Basis-Konfiguration vorgenommen werden. Hier geht es konkret um die Datenbank- und HTTP-Einstellungen:

This is not nice and until now I did not find a solution how to change the behavior. For Umbra I require the ‘hashchange’-event which is not available in IE 7.

This also means that the idea of an embedded webserver with an embedded webbrowser cannot be pursued… Or I start to integrate Gecko or Webkit.

The aim of Umbra is to offer a simple, pluggable administration framework for filesystems, databases and of course Depon.Net 2.0.

First of all, a useless abbreviation.

I would call it ‘server-controlled client-side action-execution’. No connection to the abbreviation.

Dejson is a JSON-Protocol which contains a list of actions to be executed. Each of the action has a specific type. Examples are: ‘ReplaceNode, ‘Relocation’. The first one replaces a specific DOM node with new content and the second one relocates the user agent to a new url.

The client (client-side) requests a Dejson-Actionlist and delivers a url and additional parameters to the server. The server creates a list of actions which are evaluated by the Dejson framework.

(Thanks to http://www.websequencediagrams.com/)

server-controlled client-side action-execution?

server-controlled: Server defines what has to happen.
client-side: The actions are happening on client-Side
action-execution: Blubb

What is the advantage of this approach?

It is not necessary to have complex logic within the JavaScript. You just need to call ‘Dejson.executeClientAction(url, parameters)’ and the server creates an actionlist to be performed within the browser. There is no special application logic required within the browser.

For me, this eases the development for simple actions like replacing DOM nodes or adding contents to the website.

If I need a complex handling within the browser, I can create user-defined ClientAction.

What is the disadvange of this approach?

Especially in complex websites, the server is not aware of the current status of the user agent. Which DOM elements are shown, which elements are hidden by the user. The client has to inform the server of this status, if the response would be dependent on a certain selection.

The server also has to know the IDs or selectors of the DOM node where the new content shall be inserted. If we have dynamic DOM-IDs, the Dejson protocol has to be extended.

Integration in FBK?

Dejson is getting integrated within the FBK more and more.

Source and Documentation?

Here you are:

https://bitbucket.org/mbrenn/dejson/
http://depon.net/w/Dejson (In development)

It just has a very simple ‘design’ and everybody can register without confirmation. This page is just a test page and can be removed without further comments.

The webapplication can be downloaded and installed on your computer following the instructions in the Wiki. (Or direct download: http://depon.net/downloads/bloerker.zip).

Blörker was created to gain experience with AJAX and HTML 5. Unfortunately no use case for Html 5 has been found, but the complete website is an AJAX application with no complete page reloads.

A mechanism called ‘Dejson’ has been established and will be described in a later blog post.

Wie ich schon geschrieben hatte, ist es mehr ein Twitter-Klon, aber hier wollte ich ein paar Erfahrungen sammeln was AJAX, CSS-Design und natürlich auch JavaScript betrifft.

HTML 5, im Sinne von HTML, selbst habe ich hier noch nicht verwandt, da ich hierfür keinen sinnvollen Verwendungszweck (Usecase) gefunden hatte.

Als nächstes Ziel steht der Test für mobile Geräte an. Hier möchte ich, dass diese Website sinnvoll auf einem Mobilgerät genutzt werden kann.

Den Sourcecode und die Applikation werde ich im Laufe der nächsten Woche veröffentlichen, ein akzeptables Design habe ich nun, aber noch kein ansprechendes Design. Dies war aber auch nicht das Ziel dieses ‘Experiments’.

Die komplette Website basiert auf einer eingeladenen Seite, alle weiteren Inhalte werden nur per AJAX eingeladen.