In kaum einem Aspekt hat uns das Internet bisher tief gehender beeinflusst als in unserem Kaufverhalten. Seit 1998 können wir in Deutschland bequem von zu Hause per Mausklick einkaufen.

Zunächst ein paar Fakten. Letztes Jahr haben die Deutschen für rund 13,6 Milliarden Euro im Internet gekauft. Inzwischen nutzen mehr als die Hälfte der Deutschen das Internet und drei Viertel davon kaufen auch darüber ein. Beide Werte sind die letzten Jahre konstant angestiegen und mit ihnen die Umsätze des Internethandels. Damit nehmen wir Deutschen eine Vorreiterrolle in Europa ein. Erstaunlich ist auch, dass die Frauen fast genau so fleißig im Netz einkaufen wie die Männer. Gekauft werden in erster Linie Bekleidungsartikel, Medien und Elektro-Artikel. Ebay ist immer noch Einkaufsplattform Nr.1 gefolgt von Amazon. Mit großem Abstand kommen dann Tchibo, Otto und Weltbild.

Grund genug die zwei größten Anbieter kurz vorzustellen. Amazon wurde 1994 von Jeff Bezos in Seattle gegründet. Der Amerikaner studierte zwar Elektrotechnik und Informatik, war dann aber an der Börse tätig, wo er bemerkte, dass ein Bereich extrem starkes Wachstum verzeichnete. Alles was mit der neuen Technik Internet zu tun hatte. Daraufhin kam ihm die Idee einen elektronischen Handel aufzubauen angefangen mit dem Vertrieb von Büchern. Inzwischen hat Amazon mehr als 20.000 Mitarbeiter und setzt knapp 20 Milliarden US-Dollar um. 1998 wurde dann amazon.de gestartet, wodurch es auch den Deutschen möglich wurde den Internethandel zu nutzen. Amazon verfolgt einen durchdachten Plan von strategischen Akquisitionen. Damit wuchs das Unternehmen vom Bücherhandel zum „Alles-Anbieter“. Ein Teil der Unternehmensphilosophie ist es, den Kunden mit möglichst wenigen Klicks erst zum gewünschten Produkt und dann zum Kaufabschluss zu bringen. Zahlen belegen, dass das Unternehmen noch immer wächst, die Umsätze und die Neukunden steigen.

Anders hingegen bei Ebay. Bei dem 1995 gegründeten Online-Auktionshandel scheint die Wachstumsgrenze beinahe erreicht zu sein, die Kaufvorgänge sind sogar rückläufig. Angefangen hat alles in San José. Der Informatiker Pierre Omidyar entwickelte in seiner Freizeit ein Plattform für private Online-Aktionen. Das Projekt ist bis heute zu einem 16.000 Mitarbeiter Unternehmen herangewachsen mit einem Umsatz von 8,5 Milliarden US-Dollar. Außerdem werden inzwischen auch Sofortkäufe angeboten und neben privaten Kunden finden sich auch professionelle Händler. Auch Ebay hat in der Vergangenheit erfolgreich akquiriert. Ein wichtiger Schritt war hier der Kauf des Online-Bezahlservices PayPal. Die Philosophie dahinter war, den Kunden während dem kompletten Kaufvorgang zu begleiten. Eine weitere Investition aus diesem Grund war der Kauf von Skype, einer kostenlosen VoIP-Software, zu dem stolzen Preis von 3,1 Milliarden US-Dollar. Eine Investition, die sich bisher bei weitem noch nicht bezahlt gemacht hat, da Skype nach wie vor kostenlos angeboten wird.

Wodurch unterscheiden sich jetzt die zwei Anbieter. Zum einen in den verschiedenen Features. Bei Ebay werden die Verkäufer und Käufer bewertet, man kann Auktionen beobachten und auf der Startseite werden besonders günstige Tagesangebote, sogenannte WOW!-Angebote angezeigt. Amazon hingegen bietet zum Beispiel einen Wunschzettel, Lieblingslisten und Foren. Aber was meiner Meinung nach ein wirklicher Vorteil ist, sind die Rezensionen. Jeder Kunde kann Produkte bewerten, was es Interessierten einfach macht verschiedene Produkte zu vergleichen.

Was aber tatsächlich den Erfolgsunterschied macht ist die Seriosität. Auf Ebay kann jeder fast alles verkaufen. Ein Glas Luft, ein W-LAN-Kabel oder ein Käsebrot.  Außerdem kann jeder Verkäufer die Produktseite selbst gestalten, doch leider sind nicht alle begnadete Informationsdesigner, was durchaus mal netzhautgefährdende Ausmaße annehmen kann. Anders dagegen bei Amazon. Jedes Produkt, dass von Händlern über Amazon vertrieben wird, muss abgesegnet werden. Hinzu kommen Fotografien aus verschiedenen Perspektiven und alles wird auf einer Standardisierten Produktseite angezeigt. Ich glaube, dass es genau daran liegt, dass Amazon was den Umsatz angeht die Nase vorne hat.

Hier der Vortrag von Iliana Bineva, Elisabeth Greitschus und Björn Schell:

Die Folien entstammen meiner Vorlesung “Ergonomie für Informatiker” an der FH Oldenburg Wilhelmshaven (2003 bis 2007). Es wurden Grundlagen der Software-Ergonomie vermittelt. Diese lagen noch als Downloads auf meiner privaten Homepage. Aufgrund der erfreulich hohen Nachfrage aber Grund genug die bei Slideshare einzustellen.

Tag 1:

• Überblick und Grundlagen
• Zentrale Fragestellungen

Tag 2:

• Erkenntnistheorie
• Usability

Tag 3:

• Usability
• ISO 9142-10

Tag 4:

• Formulardesign
• Barrierefreiheit & BITV
• Dialogstile
• Usability-Forschung und Evaluation

Bestandteil der Vorlesung waren natürlich auch viele praktische Übungen, die hier nicht dokumentiert sind. Ich denke das viele Screens zwar aktualisiert werden könnten, diese aber im Grundsatz nach wie vor die Inhalte richtig darstellen. Aus heutiger Sicht würe ich in jedem Fall die Themen Informationsarchitektur und User Experience mit reinnehmen.

Nach wie vor das spannendeste Thema ist für mich die Erwartungskonformität aus systemtheoretischer Perspektive. Diese hatte ich nur in ein paar Folien (Doppelte Kontingenz) angerissen, rufen aber nach Ausarbeitung

Display-Werbung im Internet ist fast genau so alt wie die private Nutzung des Internet. Angefangen hat alles mit den berühmten Bannern. Wer kennt sie nicht?  Banner sind quasi das virtuelle Gegenstück zu den Werbeplakaten und Anzeigen der realen Welt, die darüber hinaus über den Vorteil verfügen, dass sie per Klick direkt auf die Seite des Werbetreibenden weiterleiten.

Zu Beginn hat das auch noch ganz gut funktioniert und so haben sich die unterschiedlichsten Norm-Formate entwickelt, vom Superbanner über den Wide Skyscraper bis hin  zum Wallpaper. Doch im Ernst, wer kommt heute noch auf die Idee auf einen Banner zu klicken? Wer nimmt diese überhaupt wahr? Tatsächlich hat sich bei den Internetnutzern eine Art “Bannerblindheit” ausgebreitet. Das hat zum einen dazu geführt, dass häufig nicht mehr nach Page Impressions (Kontaktchance mit dem Banner) abgerechnet wird, sondern nach Klicks (tatsächlicher Kontakt). Zum anderen überlegte man sich wie man die Aufmerksamkeit der User besser gewinnen kann.

Dadurch entwickelte sich unter anderem die wohl nervigsten Display-Werbeformen des Internets, die Popup- und Flashlayer-Werbung. Beim Öffnen einer Seite öffnet sich sofort ein neues Fenster mit Werbeinhalt oder eine Anzeige, die über dem eigentlichen Inhalt befindet. Oft wird das Schließen durch versteckte Buttons oder verwirrende Symbolik zusätzlich erschwert.

Heute ist den meisten längst bewusst, dass man Geld verschwendet, wenn man einfach nur auf Masse oder Nervfaktor setzt. Moderne Display-Werbung bietet Interaktivität, Videos nehmen zu und Werbeformen wie Expandables oder Page-Peel-Ads suggerieren dem Nutzer die Freiheit selbst zu entscheiden. Darüber hinaus wird durch immer gezielteres Targeting die Relevanz verstärkt.

In Cannes prämiert man schon seit 1998 die besten Online-Kampagnen mit 4 Cyber Lions.

Hier die Präsentation von Dorothea Neu und Christoph Bubeck:

Heute habe ich erst Zeit gehabt, die fast hundertminütige Abschiedsvorlesung Schulz von Thuns anzuschauen, available by lecture2go der Uni Hamburg.

Kennen gelernt habe ich sein 4-Ohren-Kommunikationsmodell ja schon im Rahmen meines Germanistik-Studiums anfang der 80iger Jahre. Es war so kar und nachvollziehbar, dass ich es sofort ebenfalls unterrichtet habe, als ich auf SchülerInnen losgelassen wurde. Nebenbei glaube ich es in mein Leben eingebaut zu haben.

Heuer kamen Schulz von Thuns Bücher erneut in akademischem Kontext auf mich zu und ich war erstaunt, dass sich da in 25 Jahren nichts Neues ergeben hat oder entwickelt wurde. Dass etwas so gut sein soll, dass es in unserer kurzlebigen Zeit noch Bestand hat. Doch es ist so – nach Wiederlesen, Reflektieren und Diskussionen mit meinen KollegInnen steht es fest!

Daher war die Vorlesung für mich schon interessant, amüsant und auch berührend.Wer Zeit findet, sollte sie sich unbedingt ansehen – Schulz von Thun erzählt über sein universitäres Leben, seine BegleiterInnen und wie seine Kommunikationsmodelle entwickelt wurden – Geschichte der Kommunikationstheorie!

Im letzten Artikel habe ich ausführlich die barrierefreie Ausgabe von falschen Benutzereingaben eines Formulars beschrieben. Nun möchte ich diese Funktionen in eine Objektschablone schieben, um sie in anderen Projekten leichter verwenden zu können. Dazu sollten möglichst wenige hard-coded Eigenschaften in dem Validatorobjekt selbst sein. Im Konstruktor übergeben wir die absolut notwendigen Parameter, nämlich

• die id des Containers, in dem das zu validierende Formular ist (und in den die Fehlermeldung geschrieben werden soll)
• ein Array mit den Feldern:
  • ref: id des zu validierenden Feldes
  • datamask: regulärer Ausdruck für gültige Eingaben
  • msg: Fehlermeldung

Weitere Eigenschaften werden als Public zur Verfügung gestellt, so dass sie verändert werden können. Für die es aber sinnvolle Default-Einstellungen gibt. Hard-coded bleibt die HTML-Struktur der Fehlermeldungen: h2-Überschrift mit ol-Fehlermeldungen.

Zunächst schieben wir die Funktion NewElement in unser DomHelper-Objekt. Und schreiben dann die Validator-Klasse.

function UBTValidator(containerId, validationConfig) {
	/* private */
	var ERROR_TAG_ID = "errorMessageUBT"; //should serve as a constant, but JS does not differ between vars and consts
	var ERROR_HEADER_ID = "errorNameUBT";
	var self = this; //needed for private functions like showErrors
	function showErrors(errorIndices) {
		var container, errorMsg, el, ol, li, anchor;
		container = document.getElementById(containerId);
		// we might have to reset the error messages
		if  (document.getElementById(ERROR_TAG_ID)) {
			container.removeChild(document.getElementById(ERROR_TAG_ID));
			for (i = 0;i < validationConfig.length;i++) {
				var node = document.getElementById(validationConfig[i].ref);
				if (node && node.className === self.ErrorClass) {
					node.className = "";
				}
			}
		}
		//create error intro
		errorMsg = UBTDomHelper.NewElement("div",{id:ERROR_TAG_ID});
		el = UBTDomHelper.NewElement("h2");
		el.appendChild(UBTDomHelper.NewElement("a",{id:ERROR_HEADER_ID},self.ErrorIntro));
		errorMsg.appendChild(el);
		ol = UBTDomHelper.NewElement("ol");
		//add the errors
		for (var i = 0; i<errorIndices.length; i++) {
			el = UBTDomHelper.NewElement("li");
			anchor = UBTDomHelper.NewElement("a",{href:"#"+validationConfig[errorIndices[i]].ref},validationConfig[errorIndices[i]].msg);
			anchor.onclick = function(){document.getElementById(this.href.split("#")[1]).focus();return false;}; //this is related to the context, when the link is clicked, i.e. the a-tag itself
			el.appendChild(anchor);
			ol.appendChild(el);
			if (document.getElementById(validationConfig[errorIndices[i]].ref)) {
			  document.getElementById(validationConfig[errorIndices[i]].ref).className = self.ErrorClass;
			}
		}
		errorMsg.appendChild(ol);
		//add everything at once to avoid confusing rereading of some screenreaders.
		if (this.FormId) {
			container.insertBefore(errorMsg, document.getElementById(this.FormId));
		}
		else {
			//fetch the first form
			container.insertBefore(errorMsg,container.getElementsByTagName("form")[0]);
		}
		document.getElementById(ERROR_HEADER_ID).focus();
	}

	/* public */
	this.ErrorClass = "error"; //invalid input fields will get this class
	this.ErrorIntro = "Das Formular kann leider nicht versendet werden, bitte korrigieren Sie folgende Fehler:"; //introduction of the detailed error message
	this.FormId = null; //id of the form to be validated, if not given, we take the first form of the containerId
	/**
	  * return true on success
	  * return false otherwise and give a detailed error message (added to the document as h2 and ol)
	  */
	this.IsValid = function() {
		var errorIndices = [];
		for (var i in validationConfig) {
			var inputField = document.getElementById(validationConfig[i].ref)
			if (!validationConfig[i].datamask.test(inputField.value)) {
			  errorIndices[errorIndices.length] = i;
			}
		}
		if (errorIndices.length > 0) {
			showErrors(errorIndices);
			return false;
		}
		return true;
	}
}

In Zeile 6 bedienen wir uns einen verbreiteten Tricks: Die public Eigenschaft self zeigt auf die aktuelle Instanz. Erst dadurch erhalten wir in der privaten Methode showErrors Zugriff auf this.ErrorClass und andere, also auf die öffentlichen Eigenschaften der Objektschablone. Der Rest ist ohne besondere Feinheiten

Im zu validierenden HTML-Formular brauchen wir dann nur noch:

<script src="UBTDomHelper.js" type="text/javascript"></script>
	<script src="UBTValidator.js" type="text/javascript"></script>
	<script type="text/javascript">
		window.onload = ini;
		var validationConfig = [
			{ref:'name',datamask:/^[\.]+$/,msg:'Der Name ist erforderlich.'},
			... wie gehabt ...
		]
		var validator = null;
		function ini()
		{
			validator = new UBTValidator("formContainer", validationConfig);
			document.getElementById("Bestelldaten").onsubmit = function(){
				return validator.IsValid();
			};
		}
	</script>

Nachdem ich heute wieder mal eine Klausur geschrieben habe, musste ich über Multiple Choice Klausuren nachdenken.

Prüfungen an der UPB

Bislang hatte ich eine sehr sehr negative Einstellung, geprägt durch meine bisherige Erfahrung mit Multiple Choice Klausuren an der Universität Paderborn. In den Klausuren wurde getrickst und reingelegt, dass sich die Balken biegen! Teilweise biegen sich die Balken dann so sehr, dass das Dach zusammenstürzt und man durchfällt.

Wie wird geprüft? Hier ein willkürlich ausgesuchtes Beispiel. Man muss nun entscheiden ob die Aussagen RICHTIG sind. Die Aussagen sind stellenweise über 3 Sätze lang und gespickt mit Fachbegriffen. Je häufiger man sich die Aussagen durchliest, desto unsicherer wird man.

Hinzu kommen gerne Generalisierungen, die die Aussage von RICHTIG auf FALSCH umdrehen können. (Generalisierung: immer, nur, niemals, grundsätzlich, …)

Einfaches Generalisierungsbeispiel:
Im allgemeinen muss man für einen Kredit Zinsen zahlen (RICHTIG);
Für einen Kredit muss man immer Zinsen zahlen (FALSCH)

Ein weiterer Fallstrick: Das Intervall

Auch wenn man die Rechnung richtig hat, heißt das noch lange nicht volle Punktzahl. Drei der Aussagen sind übrigens richtig! Es ist ja jetzt nicht so, dass das sonderlich schwer ist. Aber im Eifer des Prüfungsgefechts verliert man hier schonmal die Übersicht und vergisst ein Kreuz.

Und damit komme ich zum Bewertungssystem:

Um dem fiesen, gemeinen Student das Handwerk zu legen, der dreist  50/50 ratet, gibt es innerhalb eines Blocks auch Minuspunkte! Die Frageblöcke bestehen immer aus 5 Aussagen, die als richtig oder falsch anzusehen sind.

Für jede korrekte Bewertung einer Aussage erhält man einen Punkt, für jeden falschen einen halben abgezogen. D.h.:

5 Richtig – 5 Punkte
4 Richtig – 3,5 Punkte
3 Richtig – 2 Punkte
2 Richtig – 0,5 Punkte
1 Richtig – 0 Punkte
0 Richtig – 0 Punkte

Das führt dazu, dass man ganz ganz schnell absackt, wenn man Frageblöcke nicht zu 100% richtig hat! Oder umgekehrt: Man kann durchaus über 50% korrekte Bewertungen abgegeben haben, aber dennoch durchfallen!!

Mein Fazit:

Diese Form der Klausur hat durchaus ihre Vorteile… sie spart Zeit und Geld in der Korrekturphase. Das Geld kann dann für Tutorien verwendet werden, in dem man auf die Fallstricke der MC Klausur hingewiesen wird… na schönen Dank! Es ist schlichtweg Massenabfertigung!

ABER was bekommt man in der Klausureinsicht? Seinen Antwortbogen, auf dem man kontrollieren kann ob die Kreuze richtig ausgelesen wurden. Eine wirkliche Erklärung warum welche Aussage als richtig/falsch zu bewerten gewesen wäre gibt es selten.

Diese Klausurform ist aufgrund der teilweise sehr komplex formulierten Aussagen sehr für Auswendiglerner geeignet. Es nutzt dir nichts, wenn du den Stoff verstanden hast, aber die Definition nicht zu 100% kannst.

Ich bin kein Auswendiglerner. Und ich bin heilfroh, durch alle dieser Klausuren im ersten Versuch durchgekommen zu sein, auch wenn es teilweise wirklich knapp war! Aber ein gutes Pferd springt ja bekanntlich nicht höher als es muss!!! =)

Wie sieht es in den USA aus?

Aufgrund meiner negativen Erfahrung hatte ich bei den MC Klausuren in den USA ein echt ungutes Gefühl.

Aber hier läuft das anders: Zunächst einmal ECHTES multiple choice! Man kann tatsächlichen zwischen Antwortmöglichkeiten wählen. Und nur eine von den vier bis fünf Antwortmöglich ist auch wirklich die Antwort.

Es gibt auch True-False Fragen:
Auch hier sollte ein Unterschied deutlich werden. Es sind sehr kurze Sätze! Ich muss keinen Metersatz in meinem Kopf jonglieren!

In allen meiner Kurse gibt es einen weiteren Unterschied: Wird eine MC Frage überdurchschnittlich häufig falsch beantwortet, wird diese gestrichen! Alternativ wird der Durchschnitt durch “Curving” angepasst. So kann es vorkommen, dass jeder 5% Punkte bekommt, um doppeldeutige “gemeine” Fragen abzufangen. Und der Proffessor sieht sich als “Schuldigen” für gemeine Fragen. Denn er hat die Klasse nicht ausreichend gut auf die Frage vorbereitet! Bzw. er hat die Frage schlichtweg schlecht formuliert.

“I adjusted everyone’s raw score upward 8 points (the rough equivalent of 5 questions). Any question that 57.5% or greater of the class missed was thrown out (hence this adjustment).”

So habe ich entgegen meiner Befürchtungen bislang sehr gute Ergebnisse in den bisherigen MC-Klausuren erzielt. Hoffentlich bleibt das auch die letzten vier Wochen so!

Themen: Marktforschung (Wiederholung) und Marketingstrategien

Die Präsentation können Sie hier herunterladen.
Veränderungen: Im Abschnitt Marktforschung (Wiederholung) sind die zehn versehentlich fehlenden Folien ergänzt worden und auf der Folie “Strategische Alternativen nach Marktphase” ist ein sinnentstellender Schreibfehler korrigiert worden.

Probeklausur

Die Validierung von Eingabefelder vor dem Abschicken eines Formulars an den Server, ist ein Standardanwendungsgebiet für JavaScript. Für eine Bestellung betrachten wir folgendes Formular (Design von Manuel Bieh):

Im einfachsten Fall gibt es Funktionen, die auf “nicht-leer” überprüfen, lästige alert-Boxen hochpoppen lassen und bei dem ersten Fehler mit der Validierung aufhören. So hangelt man sich von Fehler zu Fehler, bis man das Formular richtig ausgefüllt hat. Fehlermeldungen sind auch schnell weggeklickt, ohne dass man speichert, was doch gleich zu korrigieren war. Daher gehen wir das Problem mit folgenden Verbesserungen an:

1. Alle Fehler werden gesammelt ausgegeben.

2. Die Fehlermeldungen werden dynamisch in den HTML-Code eingfügt.

3. Zur Validierung werden reguläre Ausdrücke verwendet (gibt es gut bei http://www.regular-expressions.info/).

Der Code orrientiert sich stark an http://www.usability.com.au/resources/wcag2/form7.html

zu 1:

Alle Validierungsfunktionen werden aufgerufen und erst dann wird die Fehlermeldung eingefügt und wahr oder falsch zurückgegeben.

zu 2:

In einem Array werden die Fehler gesammelt. Die Inhalte werden abschließend durch ShowErrors ausgegeben. Ändert sich der Inhalt, dann fangen viele Screenreader an, den Inhalt der Seite von Anfang an vorzulesen. Insgesamt ergeben sich aus der Barrierefreiheit folgende Anforderungen:

• Alle Fehlermeldungen werden in einem Schritt dem DOM – als ein Kindknoten -  hinzugefügt.
• Die Überschrift der Fehlermeldung ist ein Link – um in der Linkliste zu erscheinen.
• Jede Fehlermeldung enthält einen Link zu dem zu korrigierenden Eingabefeld.
• Ein Klick auf eine konkrete Fehlermeldung setzt den Fokus auf das zugehörige Eingabeelement (JavaScript im onclick).

Konkret brauchen wir einen Container um das ganze Formular, in das wir vor das Formular einen Knoten mit den Fehlermeldungen einsetzen. Zur Vereinfachung verwenden wir die Funktion newElement(tag, attributes, text), die uns ein DOM-Knoten erzeugt – ohne ihn in das Dokument einzufügen.

function newElement(tag, attributes, text) {
  var element = document.createElement(tag);
  if (attributes!= null && attributes!= 'undefined') {
    for (var i in attributes) {
      element.setAttribute(i,attributes[i]);
    }
  }
  if (typeof text == 'string') {
    element.appendChild(document.createTextNode(text));
  }
  return element;
}

Die zu validierenden Felder definieren wir mit den zugehörigen regulären Ausdrücken in einem globalen Array:

var validationConfig = [
      {ref:'name',datamask:/^[a-z]+$/i,msg:'Der Name ist erforderlich.'},
      {ref:'street',datamask:/^[a-z]+$/i,msg:'Die Straße ist erforderlich.'},
      {ref:'plz',datamask:/^[0-9]{5}$/,msg:'Die Postleitzahl muss fünfstellig sein.'},
      {ref:'city',datamask:/^[a-z]+$/i,msg:'Die Stadt ist erforderlich.'},
      {ref:'email',datamask:/^[\w\.-]+@[a-z0-9-\.]+\.[a-z]{2,6}$/i,msg:'Die eingegebene E-Mail Adresse ist nicht gültig.'}
    ];

Die Funktion validate durchläuft dieses Array. Die Indizes fehlerhafter Eingabefelder werden gespeichert. Im Fehlerfall wird ShowErrors aufgerufen und falsch zurück gegeben, so dass das Formular nicht abgeschickt wird.

function validate() {
    var errorIndices = [];
  for (var i in validationConfig) {
    var inputField = document.getElementById(validationConfig[i].ref)
    if (!validationConfig[i].datamask.test(inputField.value)) {
      errorIndices[errorIndices.length] = i;
    }
  }
  if (errorIndices.length > 0) {
    ShowErrors(errorIndices);
    return false;
  }
  return true;
}

Nun müssen die Fehlermeldungen noch geeignet erzeugt und in das Dokument eingefügt werden.

function ShowErrors(errorIndices) {
  var container, errorMsg, el, ol, li, anchor;
  container = document.getElementById('formContainer');
  // we might have to reset the error messages
  if  (document.getElementById('errorMessage')) {
    container.removeChild(document.getElementById('errorMessage'));
    var inputs = document.getElementsByTagName('input');
    for (i = 0;i < inputs.length;i++) {
      if (inputs[i].className == 'error')
        inputs[i].className = '';
    }
  }
  //create error intro
  errorMsg = newElement('div',{id:'errorMessage'});
  el = newElement('h2');
  el.appendChild(newElement('a',{id:'errorName',name:'errorName',href:'#'},'Das Formular kann leider nicht versendet werden, bitte korrigieren Sie folgende Fehler:'));
  errorMsg.appendChild(el);
  ol = newElement('ol');
  //add the errors
  for (var i = 0; i<errorIndices.length; i++) {
    el = newElement('li');
    anchor = newElement('a',{href:'#'+validationConfig[errorIndices[i]].ref},validationConfig[errorIndices[i]].msg);
    anchor.onclick = function(){document.getElementById(this.href.split('#')[1]).focus();return false;};
    el.appendChild(anchor);
    ol.appendChild(el);
    if (document.getElementById(validationConfig[errorIndices[i]].ref))
      document.getElementById(validationConfig[errorIndices[i]].ref).className = 'error';
  }
  errorMsg.appendChild(ol)
  //add everything at once to avoid confusing rereading of some screenreaders.
  container.insertBefore(errorMsg,container.getElementsByTagName('form')[0]);
  document.getElementById('errorName').focus();
}

Erläuterung:

• Zeile 6:  Entfernt die Knoten mit einleitendem Text und detaillierten Fehlermeldungen.
• Zeilen 7-11:  Entfernt für alle Eingabefelder das class-Attribut, so dass der Hintergrund beispielsweise nicht mehr rot ist.
• Zeile 23: Bei Klick auf den Link soll der Fokus auf das Eingabeelement gesetzt werden. Das href-Attribut hat die Form: #id, z.B. für das Feld mit id=”name” ist href=”#name”. Mit Split erhalten wir das Array (“”,  “name”). Wir brauchen das 1. Element und setzten den Fokus darauf. Es wird falsch ausgeführt, um das eigentliche Klick-Event auf den Link zu unterdrücken.

Die Wiederverwendbarkeit und Definition geeigneter Objektschablonen ist Thema des nächsten Artikels.

JavaScript ist eine funktionale Sprache, es gibt aber auch Objekte und eine Art Vererbung – die Programmiererin muss selbst darauf achten, gewisse Dinge einzuhalten oder sich entsprechende Hilfsfunktionen definieren oder noch besser, gleich ein geeignetes Framework einsetzen. Hier möchte ich auf die einfachste Vererbung in JavaScript eingehen – Frameworks kommen später

Im einfachsten Fall habe ich also eine Objektschablone Animal und eine davon erbende Objektschablone Dug.

function Animal(name, outputId) {
  /* public */
  this.Name = name;
  this.OutputNode = document.getElementById(outputId);
}
function Dug(name, outputId) {
...
}
Dug.prototype = new Animal();

Durch die außerhalb der Vorlage Dug angegebene Anweisung Dug.prototype = new Animal(); findet die Vererbung statt. Genauer gesagt erhält die Objektschablone Dug einen Link auf die Objektschablone Animal. Der Konstruktor, d.h. die Funktion Animal wird damit ausgeführt und Dug hat die öffentlichen Eigenschaften Name und OutputNode. Ich sehe in diesem Ansatz folgende Nachteile:

• Die Parameter name, outputId können nicht direkt an den Konstruktor der Superklasse Animal übergeben werden.
• Prinzipiell kann jede von außen die Schablone Dug oder Animal verändern. Dies kann auch für einzelne Instanzen erfolgen:
  • var donald = new Dug(); donald.Hello = function() {alert(‘Hello’);} //nur die Instanz donald kennt Hello
  • Dug.prototype.Fly = “Ich fliege”; //alle Instanzen von Dug haben nun die Eigenschaft Fly

Am zweiten Problem kann man nichts ändern, dies ist “by Design”, also so gewollt. Für das Konstruktorproblem gibt es zwei Ansätze:

1. Einführung einer öffentlichen Eigenschaft, die auf die Superklasse zeigt.
2. Verwendung von .constructor

Für beide Varianten, auch wenn Variante 1 vielleicht anderes suggeriert,  bleibt die Anweisung außerhalb der Objektschablonen
Dug.prototype = new Animal();  zur Definition der Vererbung notwendig.

Variante 1:

<pre>function Dug(name, outputId) {
  this.base = Animal; //Zeiger auf Definition Animal, base ist ein frei wählbarer Bezeichner
  this.base(name, outputId);
...

Ich muss also zweimal definieren, dass Animal meine Superklasse sein soll, hm.

Variante 2:

function Dug(name, outputId) {
  this.constructor(name, outputId);
...

Eigentlich ziemlich genau, was ich möchte, wenn auch nicht unbedingt intuitiv. ABER, wenn ich nun vergesse, mit Dug.prototype = new Animal(); die Vererbung zu deklarieren, dann wird nicht, wie ich es vermutet hätte, der Konstruktor von Object ausgeführt, sondern der tatsächliche Konstruktor, nämlich Dug. Man landet dann in einer Endlosschleife. Warum? Für jede Objektschablone, erzeugt JavaScript, per default, folgende Definition:

  Dug.prototype = new Object();
  Dug.prototype.constructor = Dug; //alle Instanzen von Dug haben nun die Eigenschaft .constructor = Dug!

Erst das Überschreiben von prototype überschreibt auch den Konstruktor entsprechend.

Fazit

Es gibt Vererbung in JavaScript. Wenn ich jedoch tatsächlich mehrere von einander erbender Objekte brauche, dann werde ich Hilfsfunktionen wie bei MooTools oder anderen implementieren, die mir die Fehlerwahrscheinlichkeit reduzieren. Zu MooTools gibt es eine gute Einführung von Peter Kröner. Es lohnt sich auch, den Quellcode von MooTools anzusehen!!!

In JavaScript sind Funktionen essentiell. Es gibt eine Möglichkeit ähnlich, wie in anderen Programmiersprachen eine Klasse von statischen Funktionen zu definieren. Es ist eben nur keine Klasse, aber ähnlich zu verwenden. Im DOM fehlen mir einige Funktionen, also definiere ich sie und lege sie in einem globalen Array mit Literalen als Schlüssel ab.

var UBTDomHelper = {
	/* set attribute for given node, if not null or undefined */
	SetNodeAttribute: function (node, attribute, value) {
		if (node) {
			node.setAttribute(attribute, value);
		}
	},
	/* set nodeValue for given node, if not null or undefined */
	SetNodeValue: function (node, value, separator) {
		if (node && value != null && (value!='undefined')) {
			this.ClearNode(node);
			if (separator.length > 0 && value.indexOf(separator) != -1) {
				var lines = value.split(separator);
				for(var i=0; i<lines.length; i++) {
					node.appendChild(document.createTextNode(lines[i]));
					node.appendChild(document.createElement("br"));
				}
			}
			else {
				node.appendChild(document.createTextNode(value));
			}
		}
	},
	/* remove all children of a given node */
	ClearNode: function (node) {
		if (node) {
			while(node.hasChildNodes()) {
				node.removeChild(node.firstChild);
			}
		}
	}
};

Sobald die Datei im HTML eingebunden ist, kann ich an anderer Stelle mit

UBTDomHelper.SetNodeAttribute(node, attribute, value);

darauf zugreifen.

JavaScript kennt keine eigentlichen Klassen, aber Objekte und Prototypen. Prototype kann man bei Wikipedia nachlesen, ist ein Entwurfsmuster aus der Kategorie Erzeugungsmuster. Neue Instanzen werden aufgrund von Vorlagen (Prototype) erzeugt. Viele Skripte verwenden ausschließlich eine Fülle von Funktionen, die miteinander interagieren. Bei kleineren Projekten ist dies sicher legitim. Arbeiten mehrere an einem Projekt oder soll das Projekt langfristig gewartet werden, ist es sinnvoll, Funktionen zu entwickeln, die Dinge verstecken und allgemeiner einzusetzen sind.

Ich möchte dies an einer einfachen Bücherliste verdeutlichen: Im einfachsten Fall haben Sie ein Eingabefeld mit der id “buch” für einen Titel und zwei Knöpfe “hinzufügen” und “zeigen”.

Typischer Ansatz:

var buecher = new Array();
function add() {
  buecher[buecher.length] = document.getElementById("buch").value;
}
function show() {
  alert(buecher.join());
}

Ok? Zunächst stört mich die alert-Box. Eine Ausgabe mit DOM innerhalb des HTML-Codes ziehe ich vor. Auch verwendet die Funktion “add” hardcoded die “id” des Eingabefeldes. Wenn ich nun mehrere solche Funktionen habe und ich möchte eine ähnliche Funktionalität in einer anderen Seite einbauen, muss ich Zeile für Zeile durchgehen und schauen, ob der Code noch passt – sprich ich fange besser von Neuem an und verwende nur mein erworbenes Wissen wieder

Es geht auch anders: Ich kann ein Objekt erzeugen, das im Konstruktor ids von entsprechenden Feldern bekommt. Auch in JavaScript gibt es das Schlüsselwort this. Alles, was mit this. definiert wird ist “public”, alles, was mit var deklariert wird ist “private” – auch Funktionen!
Wir können das Beispiel also Umschreiben zu einem wiederverwendbaren Objekt, das wir in eine separate Datei auslagern können.

function CustomerReference(idBookList, idTitle) {
	/* private */
	var bookList = new Array();
	var nodeBookList = document.getElementById(idBookList);
	var nodeBookTitle = document.getElementById(idTitle);
	/* public */
	this.Add = function () {
		bookList[bookList.length] = nodeBookTitle.value;
		nodeBookTitle.value = ""; //so sieht die Benutzerin, dass etwas passiert ist
	};
	this.Show = function () {
		if(nodeBookList.firstChild) {
			nodeBookList.firstChild.nodeValue = bookList.join();
		}
		else {
			//Wenn ein Tag leer ist, dann ist firstChild undefined, also false
			nodeBookList.appendChild(document.createTextNode(bookList.join()));
		}
	};
}

Und die zugehörige HTML-Datei kann diese Vorlage nun instanziieren.

<script type="text/javascript">
var custRefs = null;
window.onload = ini;
function ini() {
	custRefs = new CustomerReference("booklist", "buch");
}
</script>
...
<form action="#">
	<div>
		<label for="buch">Titel:</label><input type="text" name="buch" id="buch" />
		<input type="button" value="hinzufügen" onclick="custRefs.Add();" /><br />
		<input type="button" value="zeigen" onclick="custRefs.Show();" />
		<p>Bücherliste:<span id="booklist"></span></p>
	</div>
</form>

Dies ist, wie eingangs erwähnt, der erste simple Wurf. Denkbare Erweiterungen: Doppelte Einträge verhindern, die Liste sortiert ausgeben, neben dem Buchtitel noch ISBN, Preis etc. verwalten.

Es lassen sich natürlich nicht nur private Eigenschaften definieren, sondern auch private Methoden. Dabei ist jedoch zu beachten, dass in einer privaten Methode der Zugriff auf öffentliche Methoden und Eigenschaften nur durch einen Kunstgriff möglich ist:

function example() {
  var self = this;
  function show() {
    //kein Zugriff auf this, aber:
    alert(self.Greeting);
  }
  this.Greeting = "Hallo";
}

Im nächsten Artikel werde ich die Vererbung genauer ansehen.

Fragen, Anregungen, Kommentare?

Heute war mal wieder eine BLockvorlesung Production and Supply-Chain Management. Von 8:30 bis 19:30. Mal abgesehen von der Tatsache, dass 11 Stunden Vorlesun, selbst mit Pausen didaktisch ABSOLUT hirnverbrannnt ist, war die ganze Veranstaltung mal wieder eine Farce:

Das Skript ist knapp 1200 Seiten dick, und die Folien voller Text, teilweise völlig übeflüssig, sich wiederholend. Dass der Hörsaal auch noch hoffnungslos überfüllt ist, trägt nicht gerade zu einer positiven Lernatmosphäre bei.

Normalerweise besuche ich solche Blockvorlesungen aus Prizip nicht, da man aus den Skripten viel besser lernt. Da es aber eine Zusatzleistung gibt, die auch Punkte für die Prüfung gibt, fertigen nun 500 Studenten in 162 Teams beinahe identische Powerpoint-Präsentationen an. Allerdings bekommt nur der die Punkte, der auch anwesend ist. Weil aber praktische alle, selbst 4 französische Ausstauschstudenten, die Arbeit anfertigen, ergo die Vorlesung besuchen, ohne das zu wollen, ist die Arbeitsmoral faktisch im Keller.

Leider ist der Dozent, ein arroganter, zur Cholerik neigender alter Prof und so hat er uns diese Vorlesung dreimal angeschrien wir sollen leise sein, eine Studentin des Raumes verwiesen und es bei einer weiteren versucht. Natürlich sollen Studenten dem Dozenten einen gewissen Respekt entgegenbringen und sich ruhig verhalten, aber unter den oben beschriebenen Bedingungen ist das halt für Erstsemestler zwischen 18 und 22 Jahren nicht gerade einfach.

Anstatt also das Leid zu verkürzen, die Sonderleistungen an den Anfang zu stellen, damit alle gehen können, die nicht wollen und alle zuhören wollen, die es interessiert, wurden die Leistungen schön über den Tag verteilt, ohne vorher informiert zu haben, besser gesagt: Vorher den Termin auf 9:30 gesetzt zu haben.

Und was folgt daraus. Studenten sollten an der Universität Eigenständigkeit, Selbstverantwortung  und natürlich Fachwissen lernen. Aber wir werden durch solche Aktionen zu Obrigkeitshörigen, kleinlauten Auswendiglernern erzogen.

Kein Wunder dass die Unis brennen….

… denn Morgen wird es von allein.

Heute war wieder eine meiner verhassten 4-Stunden-Nächte, diesmal so schlimm dass ich unter der Dusche As I Lay Dying¹ hören musste, um irgendwie wach zu werden. Anschließend frühstückte ich mit Musik von In Flames, Kaffee und der Zeitung. Überschrift auf der Titelseite: “Zu wenig Schlaf macht dick und dumm” – Na danke!

Auf der Autobahn war natürlich Stau, und ohne meine Kommolitonen hätte ich mir wahrscheinlich ein Bein abknabbern müssen, um die MuWi-Vorlesung wach zu überstehen.

Die Strecke von der HfM zur Uni haben wir natürlich nicht in den dafür eingeplanten 15 Minuten geschafft, sodass wir etwas zu spät zu Linguistics kamen. Aber doch noch rechtzeitig, um sich in die Anwesenheitsliste einzutragen – und ein Mid Exam zu schreiben. Ich hatte mir natürlich ausgerechnet die Lernmaterialien zum Thema des Tests nicht angeschaut, wär ja auch zu schön gewesen. Naja, muss ich halt gucken dass ich das zweite Mid Exam bestehe…

Und um diese Verkettung von Umständen nun vollends zur Tragödie werden zu lassen, habe ich gerade in Ungedanken, anstatt zwei Spam-Mails zu verschieben, meinen kompletten Posteingang unwiederbringlich gelöscht!

Das klingt jetzt schon nach einem erfüllten Disaster-Tag, aber es ist jetzt gerademal halb 3. Hoffentlich geht der Rest des Tages nicht genauso weiter!

¹eigentlich höre ich ja mittlerweile kaum noch solche Musik, aber es gibt Situationen, da gibt es keine Alternative…

Fragen, Kommentare, Anregungen?

Herr Schütte bietet zusätzliches Material zu JavaScript.

Die aufgepeppte Textarea, die wir erstellen möchten:

Wer Content Management Systeme kennt, kennt verschiedene Varianten von Rich Text Editor. Häufig ist dies ein textarea-Element mit Knöpfen und viel JavaScript. Hier möchte ich den von Yahoo vorstellen. In der YUI Library gibt es verschiedene widgets, unter anderem einen Editor. Yahoo stellt eine Anleitung mit Video und die zugehörige API Dokumentation zur Verfügung.

Anleitung zum Einbinden des Editors in eine eigene Seite

1. HTML-Code: Formular mit textarea
2. Formatierung CSS einbinden und div-Element, das das Formular mit dem Editor umschließt mit class=”yui-skin-sam” versehen.
3. Scripte einbinden.
4. Toolbar anpassen und Editor rendern.

zu 1:

zu 1:

<form method="post" action="#" id="form1">
	<div>
		<textarea id="editor" name="editor" rows="20" cols="75"></textarea>
		<input name="submit" id="submit" type="submit" value="submit" />
	</div>
</form>

zu 2:

<link rel="stylesheet" type="text/css"
	href="http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/skin.css" />

<div class="yui-skin-sam">

zu 3:

zu 3:

<!-- Utility Dependencies -->
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script type="text/javascript"
	src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

zu 4:

(function() {
    var myEditor = new YAHOO.widget.Editor("editor", {
    height: "200px",
    width: "700px",
    dompath: false,
    handleSubmit: true,
    animate: true,
    toolbar: {
        titlebar: "Mein Editor",
        buttons: [
            { group: "textstyle", label: "Format",
                buttons: [
                    { type: "push", label: "Fett", value: "bold" },
                    { type: "push", label: "Kursiv", value: "italic" },
                    { type: "push", label: "Unterstrichen", value: "underline" },
                    { type: "separator" },
                    { type: "select", label: "Arial", value: "fontname", disabled: true,
                        menu: [
                            { text: "Arial", checked: true },
                            { text: "Arial Black" },
                            { text: "Comic Sans MS" },
                            { text: "Courier New" },
                            { text: "Lucida Console" },
                            { text: "Tahoma" },
                            { text: "Times New Roman" },
                            { text: "Trebuchet MS" },
                            { text: "Verdana" }
                        ]
                    },

                    { type: "spin", label: "13", value: "Schriftgröße", range: [ 9, 75 ], disabled: true },
					{ type: "separator" },
					{ type : "push", label : "Aufzählungszeichen", value : "insertunorderedlist"},
					{ type : "push", label : "Nummerierung", value : "insertorderedlist"},
					{ type: "separator" },
                    { type: "color", label: "Schriftfarbe", value: "forecolor", disabled: true },
                    { type: "color", label: "Hintergrundfarbe", value: "backcolor", disabled: true },
                    { type: "separator" },

                    { type : "push", label : "Linksbündig CTRL + SHIFT + [", value : "justifyleft"},
					{ type : "push", label : "Zentriert CTRL + SHIFT + |", value : "justifycenter"},
					{ type : "push", label : "Rechtsbündig CTRL + SHIFT + ]", value : "justifyright"},
					{ type : "push", label : "Blocksatz", value : "justifyfull"},
					{ type: "separator" },
					{ type : "select", label : "Formatvorlage", value : "heading",	disabled : true,
						menu : [
							{text : "Normal", value : "none", checked : true},
							{text : "Überschrift 1", value : "h1"},
							{text : "Überschrift 2",	value : "h2"},
							{text : "Überschrift 3",	value : "h3"}
                		]
            		}
				]
			},
			{ group: "actions", label: "Aktionen",
                buttons: [
					{ type : "push", label : "externer HTML Link CTRL + SHIFT + L", value : "createlink", disabled : true},
					{ type: "separator" },
					{ type : "push", label : "Rückgängig", value : "undo", disabled : true},
                    { type : "push",  label : "Wiederholen", value : "redo", disabled : true}
				]
			}
		]
	}
});
myEditor.render();

})();

“Die Sapienza Universität von Rom, offiziell Università degli Studi di Roma “La Sapienza”, auch Universität Rom I genannt, ist die größte Universität Europas und die älteste Universität der Stadt Rom. [...] Seit 1870 ist La Sapienza staatlich; heute besitzt sie 21 Fakultäten und bietet rund 200 verschiedene Bachelor- und 120 Masterstudiengänge an. Zu La Sapienza gehören 155 Bibliotheken mit rund 4,5 Mio. Bänden, 21 Museen und weitere 130 Abteilungen und Institute, die über die Stadt Rom und umliegende Ortschaften verteilt sind. Hauptstandort in Rom ist die Città Universitaria in der Nähe des Bahnhofs Roma Termini. Der Campus wurde von Marcello Piacentini geplant und 1935 unter Mussolini errichtet.” (Quelle: wikipedia.de)

Soweit also die Auskunft von Wikipedia über meine Universität hier in Rom. In Anbetracht der o.g. Daten und Fakten könnte man ja nun annehmen, dass die rund 120.000 Studenten die Gebäude rund um den Campus zum Platzen und die Hörsäle in den Fakultäten zum Überlaufen bringen. Aber nichts von alledem. Gestern Abend fand der Kurs “Storia economia” zum zweiten Mal statt. Und ich bin fast vom Glauben abgefallen, als sich herausstellte, dass Stephan und ich eine Privatlektion von der Professorin bekommen würden – denn wir waren die Einzigen. So haben wir es uns also zu dritt gemütlich gemacht: Die Power-Point-Präsentation haben wir uns auf dem Laptop angesehen (der Einsatz eines Beamers wäre etwas übertrieben gewesen) und die Professorin hat sich zu uns in die Bank gesetzt. Jetzt warte ich auf den Tag, an dem Stephan mal nicht mitkommt und ich tatsächlich Einzelunterricht bekomme.