Martin Lantzsch
Software Entwickler
4. August 2010

jQuery idTabs bei Seitenwechsel speichern

4. August 2010 - Geschrieben von Martin - 2 Kommentare

In letzter Zeit beschäftige ich mich wieder verstärkt mit JavaScript, bzw. jQuery. Heute habe ich auf Basis von idTabs (@BissyDesign – Danke für den Tipp ;-)) ein Horizontales Menü beflügelt, dessen Untermenüpunkte nun bei klick auf einen Obermenüpunkt ohne Seitenreload wechseln. Lange Rede kurzer Sinn:

und so sieht es nach dem klick auf „Nachrichten“ aus:

Leider hat die Sache mit idTabs einen Haken, und zwar springt das Menü nach einem Seitenreload wieder zum ersten Tab zurück und bleibt nicht beim gewählten. Doch dafür habe ich eine ganz einfache Lösung gefunden.

Als erstes müssen wir das jQuery Cookie Plugin einbinden: http://plugins.jquery.com/project/cookie
Nächster Schritt ist die Modifikation des idTabs Plugins, man suche folgende Stelle im Code (im Unkomprimierten Zeile 95):

$(id).show();
return s.change; //Option for changing url

und ändere dies zu:

$(id).show();
// write to cookie
$.cookie('PAGENAME_menu', id.split('#')[1], { expires: 1 });
return s.change; //Option for changing url

(PAGENAME_menu ist der Cookie Name, welcher an die Gegebenheiten angepasst werden muss).

Anschließend muss noch der Funktionsaufruf von idTabs Modifiziert werden:

$("#menu ul").idTabs();

zu

id = $.cookie("PAGENAME_menu");
if(id == null) { id = 0; } // failback if no cookie is availible
$("#menu ul").idTabs(id);

Nun wird bei jedem Tabwelchsel der aktuelle Tab in einen Cookie geschrieben. Beim neu laden der Seite wird dieser ausgelesen und dessen Wert (der letzte Tab) an idTabs als default Tab übergeben. Es muss lediglich beachtet werden, das keiner der Tabs das Attribut „class=’selected'“ hat, da unser Hack Trick sonst nicht funktioniert.

7. Juli 2010

Twitter via PHP auslesen

7. Juli 2010 - Geschrieben von Martin - 2 Kommentare

Ein Leser dieses Blogs hat vor kurzem den Wunsch nach einem Artikel geäußert, wie er eine Ähnliche „letzte Tweets Anzeige“ wie auf www.Resigame.de bauen kann. Nun so schnell kann es gehen ;)

Da Twitter eine API bzw. von jedem Nutzer eine XML Datei mit Tweets und anderen Account Infos bereitstellt, haben wir leichtes Spiel an die Daten zu kommen.

So können wir die Datei auslesen:

$tweets = simplexml_load_file('http://www.twitter.com/status/user_timeline/[NUTZERNAME].xml');

[NUTZERNAME] muss natürlich mit dem Name des Twitteraccounts ersetzt werden, z.B. „Resigame“.

Aus dem Objekt $tweets können wir nun die letzte Nachricht auslesen:

echo $tweets->status->text;

Alle anderen verfügbaren Objekte kannst du herausfinden, indem du die XML Datei direkt im Browser aufrufst (Dort wird es sogar als Tree dargestellt).

Um auf ältere Nachrichten zuzugreifen kann hinter Status die Zahl angegeben werden, von der aus die Nachrichten „herab“ gezählt werden (allerdings wird bei 0 begonnen!):

echo $tweets->status{2}->text;

Dies würde uns Beispielsweise die 3. letzte Statusnachricht anzeigen.

Um nun die letzten 3 Nachrichten anzuzeigen verwenden wir einfach eine Schleife:

$i = 0;
while($i <= 2)
{
  echo $tweets->status{$i}->text.'<br>';
  $i++;
}

(mit for Schleifen hab ich es nicht so ;))

Da nun aber bei jedem Aufruf der Seite die Twitter XML Datei neu heruntergeladen werden muss, was nicht gerade Traffic und Ressourcenschonend ist – Kleinvieh macht schließlich auch Mist – Cachen wir nun die Datei:

if(filectime('twitter.xml') < time() - (60*10)) {
  // download file
  $file = file_get_contents('http://www.twitter.com/status/user_timeline/[NUTZERNAME].xml');
  file_put_contents('twitter.xml', $file);
}
$tweets = simplexml_load_file('twitter.xml');

Nun wird erst überprüft ob die Datei twitter.xml, welche im gleichen Ordner wie das Script liegt in den letzten 10 Minuten geändert wurde. Ist das der Fall wird das erneute Herunterladen übersprungen, wenn nicht (also wenn der Änderungszeitpunkt länger als 10 Minuten her ist), wird die XML von Twitter heruntergeladen und in unsere twitter.xml geschrieben.

Anschließend wird die twitter.xml geparst.

Das wäre es auch schon, in den nächsten Tagen zeige ich euch dann noch wie ihr die Twitter Nachrichten mittels jQuery schön als Newsticker laufen lassen könnt.

Browsergames – Welche Last verursachen diese?

23. Juni 2010 - Geschrieben von Martin - 4 Kommentare

Browsergames – jeder kennt eines, viele Spielen eines und so mancher hat selbst schon einmal eines Entwickelt. Doch welcher Aufwand ist es ein solches zu Entwickeln und wie Betreibe ich eines?

Welche Technik und Infrastruktur steckt hinter Browsergames?
Ein Browsergame ist im Grunde eine normale Webseite welche in PHP, Phyton, Perl oder sonst irgendeiner Programmiersprache Entwickelt sein könnte. Oft kommt dazu noch ein wenig JavaScript um es für den Nutzer ansprechender zu Gestalten.

Auf Serverseite sieht es auch meist gleich aus, es werkelt mindestens ein Linux Server mit der Verwenden Script Sprache und einer Datenbank, sowie einem Mailserver. Wird das Browsergame jedoch größer findet hier meist eine Trennung zwischen Web-, File-, Database- und Mail Server statt, da diese dann entsprechend optimiert und die Last somit besser verteilt werden kann.

Im Grunde ist das ganze bisher kein Hexenwerk, geht man aber ins Detail trifft einen der Schlag. Eine normale Webseite wird pro Besuch vielleicht 5 bis 10 mal aufgerufen, hierbei wird die Seite mit Menü und Konsorten aus einer Datenbank gelesen und falls das System schlau ist in einen Cache geschrieben. Bei einem Browsergame hingegen kann nichts gecached werden, da alles Dynamisch für den Spieler aufbereitet wird.

In Zahlen, eine Webseite hat pro Besuch 5 bis 10 Requests. Ein Browsergame kann auch mit diesen 5 bis 10 Requests auskommen, doch dazu kommen noch die AJAX Abfragen, welche nahezu sekündlich ausgeführt werden. Nehmen wir einmal an es wird alle 5 Sekunden eine AJAX Abfrage ausgeführt, dann sind wir schon bei ganzen 12 Weiteren Abfragen pro Minute (Man beachte im Normalfall sind es noch einige mehr!) das würde bei einer Durchschnitts Onlinezeit von 15 Minuten ganze 180 Requests ausmachen!

Wie optimiere ich meinen Server?
Gehen wir mal davon aus, das das Spiel perfekt auf die vielen Requests ausgelegt ist. Was kann man dann auf der Server Seite machen?

Einen kleinen schnellen Webserver verwenden, ich empfehle an dieser Stelle Lighttpd, welcher aus meiner Sicht sich für ein solche Unterfangen wesentlich besser eignet als Apache(2). In der Konfigurationsdatei können unter anderem auch diverse Module wie „webdav“, „rewrite“ und falls es nicht benötigt wird das Modul „accesslog“ deaktiviert werden. Je nach Bedürfnis können natürlich Module ein- bzw. abgeschaltet werden, allerdings sollte die Liste der aktiven immer so kurz wie möglich gehalten werden.

Seitens der Scriptsprache. Da hier keine explizit festgelegt wurde, an dieser Stelle nur einige allgemeine Hinweise. In den jeweiligen Konfigurationsdateien gibt es oft eine Reihe an Parametern, mit denen man Funktionen abschalten kann, welche nicht unbedingt benötigt werden, beispielsweise, das im Header gesendet wird, das diese Seite mit PHP Version 5.3.x erstellt wurde. Tipps gibt es in einschlägigen Webseiten, Foren und Blogs.

So wenig Dienste als möglich! Das sagt eigentlich schon alles, im Hintergrund sollte keine Sinnlosen Dienste wir FTP laufen, wenn diese gar nicht benötigt werden. Sollte es der Fall sein, das man einen dieser Dienste benötigt, einfach schnell via SSH einloggen und nach nicht einmal 10 Sekunden läuft der Dienst.

Gute Hardware ist die halbe Miete. Nicht nur Zuhause beim Entwickeln, auch Online erspart gute Hardware viele Schlaflose Nächte, in denen der Server überlastet ist oder sich aufgehängt hat. Ich empfehle so viel RAM wie möglich und einen Schnellen CPU.

Fazit
Browsergames sind wahre Ressourcenfresser, doch mit der richtigen Hardware, den Perfekten Einstellungen und natürlich Sauber und Performant geschriebenen Quellcode steht dem Spaß nichts mehr im Wege.

30. Mai 2010

SimpleLD auf Github

30. Mai 2010 - Geschrieben von Martin - Keine Kommentare

Kurze Fortschrittsmeldung, den SimpleLD Source Code habe ich vor ein paar Tagen ins Git Repository auf Github.com gepusht.

Open Source Software

Derzeit sind die Core Komponenten noch in Entwicklung, aber das Framework, ist bereits funktionsfähig, die Paket Schnitstelle funktioniert einwandfrei und diverse Hooks im Code, erlauben neuen Paketen das Framework zu erweitern. In den nächsten Tagen folgen einige Artikel, welche sich mit der Paketentwicklung für das SimpleLD Framework beschäftigen. Ein paar kleine Beispielspakete wie das „home“ Paket sind bereits Online.

>> SimpleLD auf Github

20. Februar 2010

CSS Formular (form) Ecken abrunden

20. Februar 2010 - Geschrieben von Martin - Keine Kommentare

Überall im Internet tauchen nun Websites auf die ihre Ecken mittels CSS 3 abrunden. Doch viele davon verzweifeln an Formularen, wie

<input type='text' />
<input type='submit' />

Ich habe schon einige entdeckt, die eine extra class für solche Elemente erstellt haben, nur hat das den Nachteil, das man allen Eingabe Elementen auf der Webseite ein class=’input‘ mitgeben muss, deshalb hier nun der elegante Weg:

input[type=text], input[type=password], input[type=submit], textarea
{
  -moz-border-radius: 5px;
}

die 5px geben an, wie weit von der Ecke aus nach innen ein Bogen gemacht werden soll, je größer die Zahl, desto runder die Ecke.

15. Februar 2010

PHP Mail Funktion an SMTP Authentifizieren

15. Februar 2010 - Geschrieben von Martin - Keine Kommentare

Je nach Mail Konfiguration kann es von nöten sein, das man sich am SMTP Server authentifiziert, sprich einen Benutzername und ein Passwort mitgibt.

Verwenden Sie niemals einen offenen Relay, denn über diesen können Spammer Mails versenden!

Dazu müssen Sie in ihrer PHP.ini folgende Parameter suchen:

[mail function]
SMTP = localhost
smtp_port = 25

Diese erweitern Sie um folgende zwei Felder:

username = mail@domain.tld
password = meinpasswort

(natürlich beides an die Gegebenheiten anpassen)

Es sollte dann so aussehen:

[mail function]
SMTP = localhost
smtp_port = 25
username = mail@domain.tld
password = meinpasswort

Nun können Sie wie gewohnt Mails verschicken:

mail('empfaenger@domain.tld', 'Betreff', 'Inhalt der Mail', 'From: absender@domain.tld');
5. Januar 2010

Litotex BrowsergameEngine

5. Januar 2010 - Geschrieben von XxDennisxX - 6 Kommentare

Litotex, erreichbar unter http://litotex.de, ist eine OpenSource GameEngine, die vom FreeBG-Team entwickelt wird. Die Vorgängerversion ist auch unter dem Namen „Landkampf Lite“ bekannt, die ursprünglich vom Browsergame Landkampf, http://landkampf.net, entstammt. Wie bereits erwähnt ist der Quellcode unter der GNU General Public License v. 3 stehend OpenSource.

Funktionalität
Das FreeBG-Team ist bemüht, die GameEngine soweit wie möglich neutral zu halten. Manche Module eignen sich hierfür besser, andere wiederum schlechter. Doch Ziel des Projektes ist es, sich auf kein bestimmtes Genre zu fixieren.

Grundgelegene Funktionen:

  • 4 unterschiedliche Rassen, mit jeweils unterschiedlichen Gebäudearten, Funktionen, Kampfeinheiten und natürlich verschiedenen Parametern (z.B.: Bauzeit, Kampfstärke,..)
  • zur Zeit in 2 Sprachen verfügbar (Deutsch/Englisch)
  • in ACP erleichtert die Verwaltung des Spiels (z.B.: Einheiten-, Forschungs- & Gebäudeeditor)
  • Allianzsystem mit integriertem Forum
  • IGM
  • dynamisches Kampfsystem
  • Bauschleife für die Einheiten

Allerdings werden von Seiten der Entwickler weder für Gebäude, noch für Kampfeinheiten Bilder angeboten. Falls Interesse besteht, können diese gegen Entgeld von einem Grafiker erstellt werden (Icons, Kampffeld, Karte,…).

Entwicklung
Natürlich bietet das Team im Entwicklerforum Support für alle Anfragen, die ihre GameEngine betreffen. Modifikationen dritter Hand, die von fremden Anwendern programmiert und veröffentlich werden, werden nach unserer Überprüfung natürlich auf Wunsch eingebaut oder zum Download angeboten. Seit der Version 0.7 unterstützt Litotex auch Module, welche durch eine integrierte Modul Schnittstelle installiert werden können.

Systemvoraussetzung

  • Webspace mit FTP Zugriff
  • PHP ab Version 4.0
  • Eine MySQL Datenbank ab Version 3.5x
  • Folgende PHP Konfigurationen:
  • register_globals On/Off
  • safe_Mode Off

Bewertung
Dafür das Litotex noch in Kinderschuhen steckt, macht es bisher schon einen Sehr guten Eindruck, es wird zwar nach wie vor von einem Starken Strategiegenre geprägt, allerdings lässt sich dies durch das neue Modul System ausmerzen.
Auch wir werden uns auf kommende Versionen von Litotex freuen.