Entwickeln von grafiklastigen interaktiven Webapplikationen

Nach langer Zeit lasse ich an dieser Stelle mal wieder von mir hören. In letzter Zeit hat sich in meinem Geekleben viel getan. Ich habe mein Langzeitprojekt „Umstellung der Technik auf Apple-Produkte“ mit dem Kauf des neuen MacBook Pro 13″ abgeschlossen und bin damit sehr glücklich.

Weiterhin habe ich mir einen V-Server bei 1,2 oder 3 geklickert. In den letzten Wochen war ich unter Anderem damit beschäftigt ein Projekt umzusetzen, welches ich schon lange geplant habe. Es handelt sich dabei um ein ganz einfaches Onlinenotepad, mit dem man kollaborativ Notizen schreiben und bearbeiten kann. Um sich davon ein Bild zu verschaffen, schaut man sich das ganze am Besten unter http://notepad.leuchtetgruen.de/ an.

In diesem Blogbeitrag möchte ich darauf eingehen wie diese Anwendung entwickelt wurde und welche Probleme dabei auftraten und noch auftreten.

Der Anfang

Ganz zu Beginn steht die Idee. Man bekommt eine Idee und beginnt sie sich im Kopf immer weiter auszumalen und auszugestalten. In diesem Fall war mir klar dass es sich um ein maximal einfach zu bedienendes und schön anzusehendes Notepad handeln sollte. Was sich bei mir dann immer unmittelbar anschließt ist die Konzeption der Benutzerschnitstelle.

Dazu benutze ich GIMP – wer mit Photoshop groß geworden ist, mag dafür wohl Photoshop nutzen. Darin entwickle ich das grundlegende Userinterface mit allen Elementen, die einmal zu sehen sein sollen. Ich kann verschiedene Möglichkeiten austesten und einfach über das Zu- und Abschalten ausprobieren, was am Besten aussieht.

Ist das User Interface einmal grafisch entwickelt folgt der Gedanke, wie dieses in die Webanwendung übernommen werden kann. Hier wurde festgelegt, dass das Korkboard als eigene Grafik den Hintergrund bilden soll und sich das Notepad stets in der Bildschirmmitte befinden soll. Es soll nicht skalieren um eine feste Größe des Textfeldes für die Texteingabe zu garantieren. Auch der Speichern-Button wurde als eigene Grafik abgespeichert um ihn gegebenenfalls ein- oder ausblenden zu können. All dies geschah in einer CSS-Datei – die hier für das Betrachten an einem normalen Computerbildschirm ausgelegt war.

Erst im Anschluss daran fand tatsächliche Programmierung statt. Hier wurde auf eine klare Client-Server-Architektur geachtet. Der Client besteht dabei ausschließlich aus XHTML, JavaScript und CSS. Es wird kein HTML durch PHP o.Ä. erzeugt. Die Kommunikation mit dem Server findet über asynchrone HTTP-Requests statt. Hier verwende ich meist Protoype.JS als Framework. Die Backendlogik ist in PHP entwickelt und stellt eine API dar, deren Funktionen vom Client aufgerufen werden können.

Wo wir schon bei Frameworks sind. Es ist klar dass eine interaktive Webanwendungen meist auch Animationen enthält, die eine besser User Experience gewährleisten sollen. Um dies zu realisieren bieten sich mittlerweile zwei Möglichkeiten an. Eine Möglichkeit bieten CSS-Animations an, die mit HTML 5 in CSS einzug gehalten haben. Da HTML 5 jedoch noch kein weit gelebter Standard ist, wurde jedoch der Weg gewählt Animationen mit Hilfe des JavaScript-Frameworks Scriptaculous zu erstellen.

So wurde eine einfache, interaktive und hoffentlich ansprechende Webanwendung konzipiert und implementiert. Wie man sich denken kann passiert das nicht ohne Probleme.

Probleme

Es ist erstaunlich in wieviele Probleme man bei solch einer einfachen Anwendung laufen kann. Erstaunlich ist auch die Vielschichtigkeit der Schwierigkeiten. So ist es beim User Interface schwierig alle Browser zu bedienen. Besonders der Internet Explorer vor Version 7 kann hier noch nicht vollständig genutzt werden, da er keine Transparenz in CSS oder in PNG-Grafiken unterstützt.

Aber auch im Backend traten Probleme auf. So ist beim Versand von schon wenigen Mails mithilfe der PHP-Funktion mail(); der Server sehr schnell abgeraucht. Daher musste hier eine SMTP-Verbindung zum Mailserver von 1&1 aufgebaut werden, der dann die Mails versendet.

Wie nicht anders zu erwarten traten auch im Client Probleme auf, die im Wesentlichen an meiner eigenen Dummheit lagen. So trat öfters das Problem auf, dass Notizen leer gespeichert wurden obwohl sie es nicht waren. Der Grund hierfür war, dass die Notiz per POST über AJAX an den Server übertragen wird. Nicht beachtet wurde hier, dass ein URL-Encoding nötig ist, da sonst jedes Fragezeichen oder kaufmännisches Und als Zeichen für einen neuen Parameter gewertet wird. Aber man lernt ja nie aus

Fazit

Wie man sieht ist schon beim Entwickeln einer einfachen Webanwendung viel zu beachten und es kann viel schiefgehen. Besonders Inkompatibilitäten der einzelnen Browser (Speziell des IE) können einem Dabei viel Kopfzerbechen bereiten.

Advertisements

Über kenny1987

Hallo Leute, ich bin kenny. Ich studiere momentan Informatik und werde über alles interessante was mir so über den Weg läuft bloggen. Seien es irgendwelche News oder aktuelle Entwicklungen von meinen Anwendungen. Viel Spaß :)
Dieser Beitrag wurde unter Mich-Zeugs, Programmieren abgelegt und mit , , , , , , , , , , , , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s