Webstammtisch Oldenburg

feat. PHP Usergroup | kostenloser, regelmässiger Treffpunkt zu Vorträgen und zum Erfahrungsaustausch für Internetagenturen und Freelancer.
0

Automatisierte Usability-Analyse von Webapplikationen

Der Oldenburger Ralf Treu hat im Rahmen seiner Diplomarbeit an der C.v.O. Universität Oldenburg einen Prototypen für ein Recommender-Expertensystem zur automatisierten Usability-Analyse von Webapplikationen entworfen und implementiert.

Ziel der Anwendung soll es sein, rudimentäre Schwachstellen des Webdesigns bezüglich der Benutzbarkeit einer Webseite aufzuzeigen und Feedback zu geben.

Die Anwendung ist in Python/Django geschrieben und befindet sich zur Zeit im Alpha-Stadium. Ralf Treu benötigt für die Evaluation seiner Arbeit dringend Benutzer-Meinungen.

Das Software-System versucht _nicht_, Usability-Analysen vollständig zu ersetzen. Es soll vielmehr ein prototypischer Ansatz sein, elementare Fehler des Webdesigns schon vor der Usability-Analyse im Labor abzufangen.

Bitte beachtet, daß dies keine fertige Anwendung ist. Die Ergebnisse finde ich allerdings sehr interessant und diskussionswert.Der Link:

http://lesu.informatik.uni-oldenburg.de/

Bitte gebt Feedback !

Kategorien: Tipps

Tags: Usability

Kommentare: bislang keine Kommentare

0

6. Linux-Informationstag am 11.02.2012!

Viele Agenturen und Entwickler im Webbereich sind auf Linux als Serversystem "angewiesen" (ohne Linux würde das Internet wohl nicht funktionieren). In Oldenburg findet regelmässig ein Informationstag zum Thema Linux statt.

In diesem Jahr findet der Informationstag im Gebäude der KDO statt. Die Liste der Aussteller und der Vorträge ist komplett. Persönlich werde ich zu 99,9999% den Vortrag von Tim Fiedler um 15:00 Uhr besuchen (Bewertung und Analyse der IT-Sicherheit mit dem Metasploit Framework). Tim Fiedler hatte seinen Vortrag beim letzten Webstammtisch kurz beschrieben ;)

Weitere Hinweise gibt es natürlich auf der Webseite des Linuxtages:

http://www.lit-ol.de/

 

Kategorien: Veranstaltungen

Tags: Linux-Informationstag, Oldenburg

Kommentare: bislang keine Kommentare

0

Oldenburger Webmontag | 06.02.2012 von 19:00 bis 21:00 Uhr

Ab Februar 2012 findet in Oldenburg regelmässig ein Webmontag statt.

Der erste Webmontag findet statt am 06.02.1012 von 19:00 bis 21:00 Uhr

Seelig Kulturlounge
Schloßplatz 2
http://www.seelig-ol.de/

Themen werden hierbei u.a. sein:

  • Kleine Frage- und Inforunde zum Thema "Netzneutralität"
  • Technische Dinge wie Häufigkeit, Lokalitäten, Equipment

Weitere Infos zum Webmontag finden sich unter:

http://webmontagol.mixxt.de/

 

Kategorien: Veranstaltungen

Tags: Webmontag

Kommentare: bislang keine Kommentare

0

Barcamp Oldenburg 2012 vom 08.09.2012 bis zum 09.09.2012

Wie gerade erfahren habe ... in diesem Jahr am findet die Veranstaltung vom 08.09.2012 bis zum 09.09.2012.

Der Veranstaltungsort wird noch festgelegt.

Weitere Infos unter http://bcoldb.mixxt.de/ bzw. unter http://www.barcamp-oldenburg.de/

P.S. wer nicht weiss was ein Barcamp ist: http://de.wikipedia.org/wiki/Barcamp

Kategorien: Tipps, Veranstaltungen

Tags: BarCamp

Kommentare: bislang keine Kommentare

0

Zusammenfassung Workshop "JavaScript-Debugging" vom 27.01.2012

Wer sich intensiver mit der Programmierung von Webanwendungen beschäftigen darf kommt über kurz oder lang zumeist nicht um den Einsatz von JavaScript herum. Sei es nun JavaScript in seiner Reinform oder als Framework wie ProtoType, jQuery, ExtJS ...

In diesem Workshop wurde gezeigt wie einfach es ist mit Hilfe vom Firebug JavaScript zu debuggen. Der Workshop kratzte nur an der Oberfläche und zeigte dem absoluten Neuling einen Einstieg in die Materie.

Firebug ist eine Erweiterung für den Firefox-Browser. Die Erweiterung ist kostenlos erhältlich. Ich gehe hier in diesem Artikel nicht auf die Beschaffung, Installation und den Aufruf von Firebug ein.

Welche Arten von Debuggen gibt es exemplarisch für JavaScript?

  • Ausgabe eines Wertes mit alert()
  • Ausgabe eines Wertes mit console.log()
  • Überwachung mit Firebug

Hier ein einfaches Beispiel fürs Debuggen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
 <script type="text/javascript" charset="utf-8">
 </script>
</head>
<body>
</body>
</html>

Im folgenden beschäftige ich mich nur mit dem Bereich der zwischen <script ...> und </script> steht. Die hier erwähnte Datei im Endformat kann gerne unter der Adresse http://www.webstammtisch-oldenburg.de/js-workshop/beispiel1.html heruntergeladen werden.

Um den Wert einer Variablen anzuzeigen mit dem alert() Befehl gebe ich z.B. ein:

<script ...>
var a=123;
alert(a);
</script>

Dies erzeugt einen modalen Dialog mit der Ausgabe des Wertes 123.

Um den Programmablauf nicht anzuhalten sondern Werte während der Ausführung zu "protokollieren" kann der Befehl console.log() eingesetzt werden. Wichtig hierbei ist zu beachten das keine Skripte an Kunden ausgeliefert werden dürfen bei denen noch ein console.log() - Befehl integriert ist. Firefox kann mit solchen Resten problemlos umgehen aber Browser wie z.B. der Safari stürzen beim Auffinden eines solchen Befehls leider ab.

<script ...>
var a=123;
console.log(a);
</script>

In diesem Beispiel wird der Wert 123 in der JavaScript-Konsole des Firefox ausgegeben sobald diese Zeile ausgeführt wird.

Ausgabe von console.log()

Dies ist schon alles recht hilfreich. Interessant wird es allerdings wenn es z.B. darum geht eine Programmlogik nachzuvollziehen. Hierbei können die beiden Möglichkeiten mit alert() bzw. console.log schnell an ihre Grenzen stoßen.

Firebug

Obiges Bild zeigte schon einen Teil vom Firebug. Firebug hat die Konsole integriert (sie ist aber auch ohne Firebug in Firefox integriert).

Ich erweitere das Scriptbeispiel um ein paar Zeilen um ein belastbareres Beispiel für den Debugger zu haben:

<script ...>
function berechne(a,b){
 var wert1 = parseInt(a);
 var wert2 = parseInt(b);
 var ergebnis = parseInt(wert1+wert2);
  document.getElementById('ergebnis').value=ergebnis;
 }
</script
</head>
<body>
<form >
 <label for="wert_1">Wert 1</label><input type="text" name="wert_1" value="" id="wert_1">
 <label for="wert_2">Wert 2</label><input type="text" name="wert_2" value="" id="wert_2">
 <label for="ergebnis">Ergebnis</label><input type="text" name="ergebnis" value="" id="ergebnis">
<p><input type="button" value="addiere" onClick="berechne(document.getElementById('wert_1').value,document.getElementById('wert_2').value)"></p>
</form>

In diesem Beispiel haben wir ein kleines Formular mit dem zwei Werte addiert werden und das Ergebnis im dritten Formularfeld ausgegeben wird.

Formular zur Dateneingabe

Nun kann im Firebug im Bereich Skript der Quelltext eingesehen werden.

Ansicht des Firebugs mit Quelltext aus unserem Beispiel

Wenn wir nun die Variable "wert1" überwachen wollen bzw. sehen wollen was hier passiert wenn das Skript abgearbeitet wird dann kann hier ein "Haltepunkt" gesetzt werden indem mit der Maus auf die Zeilennummer geklickt wird.

Haltepunkt gesetzt

Durch das setzen des Haltepunktes hält Firebug nun den Programmablauf in eben dieser Zeile an. Also laden wir die Seite einmal neu und klicken auf den Button "addiere".

Zeilenzeiger zeigt das in Zeile 11 der Haltepunkt erreicht worden ist.

 

Im rechten Bereich des Firebugs kann man nun sehen welche Variablen zu diesem Zeitpunkt wie gesetzt sind. Mit Hilfe der Ausführungsknöpfe kann nun das Programm Zeile für Zeile abgearbeitet werden. Dabei kann auf der rechten Seite beobachtet werden wie sich die Variablenwerte verändern.

 

 

Es ist auch möglich an einer Stelle nur dann anzuhalten wenn ein bestimmter Wert erreicht ist. Hierzu klickt man auf die nachfolgende Zeile von dort wo man z.B. den Wert setzt. Ich will z.B. das immer dann angehalten wird wenn der Variablen "wert1" der Wert 77 zugewiesen wird. Hierzu muss ich die Zeile 12 mit einem Haltepunkt versehen der auf diese Bedingung reagiert. Die kann über einen Klick auf die Zeilennummer 12 geschehen. Allerdings muss man in diesem Fall die rechte Maustaste benutzen. In dem kleinen "Ballonfenster" muss dann die Bedingung eingegeben werden: wert1==55

 

 

 

 

 

Soweit die kurze Zusammenfassung des 30 minütigem Workshops. Weitere Infos sind zu finden unter:

http://getfirebug.com/javascript

Bis zum nächsten Webstammtisch ...

Henning

 

Kategorien: Material

Tags: JavaScript-Debugging

Kommentare: bislang keine Kommentare