Vanjemanie …

Bei der zweiten XML-Aufgabe gibt es eine vorgebene XML-Datei sowie ein Screenshot der Ergebnisseite, so wie sie durch ein selbst zu schreibendes XSLT-Stylesheet zu erzeugen ist. Zusätzlich soll noch ein XML-Schema dafür erzeugt werden. Hier werden auch weitere Einschränkungen gemach.

Mit dem XML-Schema hab ich angefangen und bin damit auch durch. Jedenfalls lässt sich nun die XML-Datei validieren. Das XSLT zu erstellen muss ich (da es ja wieder etwas spät geworden ist) auf morgen verschieben. Aber durch die freiwillige Aufgabe, die ich vorher bearbeitet hab, bin ich hoffentlich halbwegs gerüstet. XSLT geht ja mehr in Richtung funktionale Programmierung. Ein Glück, dass ich (vor langer Zeit) in meinem früheren Studium Miranda bis zur Schmerzgrenze hatte. Das kam dort als erste Programmiersprache dran, um sicherzustellen, dass alle auf dem gleichen Level anfangen (nämlich bei Null ). Der eigentliche Sinn des ganzen erschließt sich einem erst viel später, wenn man merkt, dass Rekusion auch in prozeduralen Sprachen Sinn macht.

Die beiden Tools xmllint und xmlstarlet basieren beide leider auf libxml2, der XML-Bibliothek von Gnome. So gut und featurereich diese Tools auch sind, eins können sie daher nicht: Validieren gegen ein XML-Schema (*.xsd). Aber mit xjparse, Apache Xerces und einem selbstgestrickten Shell-Skript hab ich genau das, was ich will.

Die letzten drei Einsendeaufgaben kamen gestern zurück (jeweils volle Punktzahl )

Zum XML-Schema-Bereich gibt es keine Einsendeaufgabe aber es trägt sehr zum Verständnis bei, wenn man ein bisschen damit selbst rumprobiert. Der nächste Bereich behandelt XSLT.

Die erste Einsendeaufgabe zu XML gibt eine XML-Datei vor, zu der man eine DTD erstellen soll, damit man damit auf Gültigkeit prüfen kann. Eclipse hat zwar XML- und DTD-Editoren, ist beim Validieren aber nicht besonders hilfreich. Und der Validator des Aptana-Plugins kommt mit lokalen DTD-Dateien nicht zurecht. Das sucht die immer im Home-Verzeichnis des Users. Im Kurs wird XMLSpy empfohlen, weil es wohl früher eine frei benutzbare Version davon gab. Jetzt gibt es allerdings nur noch eine 30-Tage-Testversion und unter Linux läuft es nur unter Wine. Deshalb wollte ich das erstmal nicht installieren.

Exchanger XML Lite scheint (zumindest vom Handbuch her) eine gute Alternative zu sein. Für nicht-kommerzielle Zwecke kann man das Programm kostenlos benutzen und die Einschränkungen gegenüber der Vollversion sind gering. Leider hab ich es unter Linux nicht zum Laufen bekommen, obwohl es in Java entwickelt wurde. Das speziele Linux-Setup schlägt wegen nicht vorhandener Abhängigkeiten fehl. Und die reine Java-Installation, die man als JAR-Datei startet, meldet Fehler und verweist für die Details auf die Log-Datei, die allerdings nirgends zu finden ist. Naja, sowas liebe ich …

Daher hab ich zum Testen erstmal xmllint und xmlstarlet verwendet. Diese Kommandozeilentools reichen völlig aus, um eine einfache Validierung vorzunehmen. xmllint kann man sogar in einem Shellmodus starten und sich dann wie in einem Dateisystem mit cd, ls und cat bewegen oder XPath-Aausdrücke auswerten. Die einfachsten Dinge sind doch manchmal die besten.

In Hover-Effekte schrieb ich, dass ich im Kurstext nicht finden konnte, wie man per JavaScript die zugewiesene CSS-Klasse ändern kann (nämlich über element.className). Es steht aber doch drin, nur nicht im gleichen Kapitel sondern in einem davor. An solchen Dingen merke ich, dass die Online-Texte zum Nachschlagen nicht besonders gut geeignet sind. Ein Buch hat man mal schnell durchgeblättert aber auf den Online-Seiten übersehe ich dann sowas einfach. Aber wenn man zu faul ist, die drei Meter in den Flur zur Tasche mit dem Buch zu gehen …

Heute habe ich die zweite Einsendeaufgabe zu JavaScript bearbeitet: Zahlen raten. Einige vorgebene Zahlen im Bereich 1-50 sind die Gewinnzahlen und der Benutzer soll eine davon raten. Dabei soll die Eingabe validiert und entsprechende Fehlermeldungen ausgegeben werden. Das erinnert mich ein bisschen an mein erstes selbstgeschriebenes Programm, das muss gut 25 Jahre her sein. Das war auch Zahlenraten in etwas abgewandelter Form. Damals lernte ich mit meinem ersten Computer – einem gebrauchten Sinclair ZX-80 mit Folientastatur und defekter Kassettenschnittstelle – Basic. Das beste an diesem Rechner war das Handbuch, das seinen Namen wirklich verdiente und einen echten Basic-Einführungskurs enthielt. Das Handbuch der damals aufkommenden C64 Heimcomputer war dagegen echt grauenvoll. Mein Chemielehrer hatte damals einen C64, den er mal mit in die Schule brachte und mit seinem Zahlenratenspiel vorführte. Das hab ich dann gleich auf meinem eigenen Rechner nachprogrammiert. Da ich nichts abspeichern konnte, tippte ich das Programm auf der Schreibmaschine ab. Ein oder zweimal hab ich es dann sogar tatsächlich nochmal abgetippt und vorgeführt.

Naja, unabhängig davon, dass mir dabei mein Alter erschreckend bewusst wird (damals war ich etwa 12 oder 13, d.h. heute müsste ich so ungefähr 37 Jahre alt sein Zumindest gehöre ich nicht mehr zu denen, die die Lochkartenära noch selbst miterlebt haben), ist das wohl der Hauptgrund, warum mir die Aufgabe heute so viel Spaß gemacht hat.

Mit den richtigen Werkzeugen ist es aber noch besser. Im Kurs wurde auf Aptana hingewiesen. So richtig anfreunden konnte ich mich zuerst nicht damit, aber da es auch als Eclipse-Plugin verfügbar ist, hab ich es mal installiert und ausprobiert. Als besonders hilfreich stellte sich die Autovervollständigung raus. Sowohl für HTML, CSS und vor allem JavaScript ist das richtig gut gelungen. Und mit Firebug lässt sich im Firefox nicht nur JavaScript debuggen, sondern auch das von JavaScript geänderte HTML der Seite betrachten und die CSS-Wirkungsweise nachvollziehen. Richtig schick.

Im nächsten Kapitel geht es um XML. Na mal schauen.

Im JavaScript-Unterkapitel Event-Handler geht es um die verschiedenen Events, die man benutzen kann, um JavaScript-Funktionen aufzurufen. Z.B. kann man dann mit der Kombination onmouseover mit onmouseout sehr leicht Hover-Effekte erzeugen, also ein Element highlighten, wenn man mit der Maus drüber fährt.

Im Kurs wird als Beispiel ein Schwarzweiß-Foto farbig, wenn die Maus drüber steht.

Als Aufgabe soll man selber eine Tabelle erstellen, bei der die Zeilen einen Hover-Effekt haben (indem die Hintergrundfarbe gewechselt wird). Außerdem soll man durch Klicken die Zeile markieren können (mit einer anderen Hintergrundfarbe). Diese Markierung soll dann nicht wieder weggehen, wenn man mit der Maus die Zeile verlässt, erst beim nächsten mal Draufklicken. Diese Aufgabe ist allerdings keine von den zu korrigierenden Einsendeaufgaben, aber da man ja am meisten lernt, wenn man es selbst ausprobiert …

Die Tabelle zu erstellen und die CSS-Klassen war ja erstmal einfach. Für die Zeilen gibt es drei unterschiedliche Klassen: normal, highlight und selected.

Erstmal mit dem Hover-Effekt anfangen: Die Events onmouseover mit onmouseout rufen jeweils eine JavaScript-Funktion auf. Dabei soll die CSS-Klasse der Zeile auf highlight bzw. normal geändert werden. Aber wie geht das? Das stand so nicht im Wissensbaustein. Also bei SelfHTML nachgeschaut und die style-Eigenschaft gefunden. Damit kann man per JavaScript jeden einzelnen Wert entsprechend der CSS-Eigenschaft setzen. Also z.B. mit style.backgroundColor die Hintergrundfarbe. Das geht dann zwar, ist aber nicht ganz das, was ich mir vorstelle. So würde ja das Aussehen nicht zentral in einem Style-Sheet festgelegt werden sondern wäre über den ganzen JavaScript-Code verteilt. Bei sowas werd ich gleich total unruhig, weil ich mir dann vorstelle, wie nervig es wäre, in einer umfangreichen HTML-Datei alle Stellen zu finden, an der ein bestimmtes Element einen Style zugewiesen bekommt.

Einfach this.class = “highlight” funktioniert leider nicht, um die CSS-Klasse zu ändern. Ein bisschen weiter suchen also. Die Lösung ist: className statt class. Und schon geht es. Hover geht schon mal.

Das Klicken und Selektieren ist auch kein Problem. Beim Klicken einfach den momentanen Klassennamen abfragen und dann entweder auf highlight oder selected setzen (also umdrehen). Und die Hover-Methoden müssen auch angepasst werden. Wenn die CSS-Klasse gerade selected ist, dann nicht hovern und die Auswahl bleibt.

Alles in allem hab ich etwa 50 Minuten gebraucht. Angegeben waren 60 Minuten, was ein super Ergebnis ist. Bei GDI hab ich meistens doppelt so lange wie angegeben benötigt.

Morgen ist dann Formulare mit JavaScript validieren dran. Inklusive der zweiten Einsendeaufgabe für JavaScript.

Die beiden CSS-Aufgaben sind mittlerweile korrigiert. Einmal 19 und einmal 20 von jeweils 20 Punkten. Der eine Punkt fehlt, weil ich bei der Berechnung der Gesamthöhe des div-Blocks den Außenabstand nicht mit berechnet hatte. Hm, gut zu wissen …

Beim nächsten Kapitel geht es darum, das Dokument mittels JavaScript zu verändern. Bei der ersten JavaScript-Einsendeaufgabe muss ein dargestelltes Bild auf Knopfdruck vergrößert bzw. verkleinert werden. Beim Klick auf den dritten Button soll wieder die Originalgröße verwendet werden. Vor einer Stunde war ich im Prinzip schon fertig (und auch ziemlich müde). Aber ich wollte es dann trotz Müdigkeit noch abgeben. Aber das kostet ja auch immer noch etwas Zeit. Hier noch einen Kommentar dazu, alles etwas besser formatieren. Nochmal validieren, usw. Da kommt dann glatt nochmal ne Stunde zusammen.

Die zweite CSS-Aufgabe hab ich nun auch gelöst. Alles nochmal validiert mit dem W3C-Validator die Konventionen für die Abgabe überprüft (alles in ein Verzeichnis, das die Aufgabennummer als Namen trägt, die Haupt-HTML-Datei muss index.html heißen, Verzeichnis zippen) und abgegeben.

Dabei bin ich auch auf IEs4Linux gestoßen, ein Installationsskript, mit dem man gleich mehrere Internet Explorer Versionen auf einmal inklusive Flash-Plugin unter Linux (mit Wine) installieren kann. Echt praktisch. Das Skript brauchte ca. 3 Minuten, um alles runterzuladen und zu installieren. Anschließend waren vier neue Icons auf meinem Desktop (IE 5.0, 5.5, 6.0 und 7.0). Wobei die 7.0 noch als Beta ausgewiesen wird. Gerade die 7er Version ist ein bisschen langsam, aber das ganze ist ja auch nur dazu gedacht, selbst erstellte HTML-Seiten damit zu testen.

Damit hab ich nun endlich das Kapitel CSS abgeschlossen. Als nächstes steht JavaScript an, aber für heute reicht es erstmal.

Ok, so schwierig war es ja gar nicht. Die erste der beiden CSS-Einsendeaufgaben hab ich jetzt fertig. Ein vorgegebenes Layout mit Navigations-, Logo- und Inhaltsbereich soll mittels float nachgebaut werden. Man darf sich dabei nicht beim Zusammenrechnen der Gesamtbreiten und -höhen verzählen, dann ist es relativ straight-forward.

Bei der zweiten Aufgabe soll ein ähnliches Layout mittels absoluter Positionierung erstellt werden. Das heb ich mir dann für morgen auf.

Mein Mathe-Kurs hat sich auch wieder angefunden. Es war tatsächlich so, dass versehentlich die normale Ablauffrist eingeschaltet war. Aber das wurde ja schnell behoben.

Ok, dann kann ich jetzt also mit Fug und Recht behaupten, dass ich wieder dabei bin

Naja, so langsam komme ich wieder rein. Hab mir gestern das Buch zu Web-Programmierung hingelegt. Aber es hat eine Weile gedauert. Und statt ins Buch zu schauen, hab ich mich mal – ganz unverbindlich – bei W3L eingeloggt. Mir ist erst nach ein paar Minuten aufgefallen (als ich überlegte, ob ich nun mit Mathe oder mit Web-Programmierung wieder beginnen sollte), dass der Mathe-Kurs gar nicht mehr vorhanden war. Naja, Cait meinte, das wäre ihr auch schon mal passiert. Wenn Nicht-Studenten den Kurs buchen, dann haben die eine Zeitbeschränkung. Vielleicht ist hier bloß vergessen worden, die Zeitbeschränkung aufzuheben.
Also hab ich dann wieder mit Web-Programmierung angefangen und mir nochmal das letzte CSS-Kapitel über absolute und float-Positionierung durchgelesen. Zumindest hab ich jetzt nach einigem Rumprobieren halbwegs die Funktionsweise von float verstanden. Die beste Voraussetzung um die Einsendeaufgaben zu CSS zu bearbeiten. Damit werde ich heute abend anfangen.

Das CSS-Kapitel hab ich nun soweit durch und die jeweiligen Tests gemacht. Es ist ganz gut, wenn man mal die Zeit hat (bzw. sie sich nehmen muss), sich mal ausführlich mit CSS zu beschäftigen. Mit dem Box-Model, Floats und dergleichen. In der Praxis komme ich zwar mit CSS ab und an in Berührung, aber jetzt merke ich erst, wieviel ich eigentlich nicht darüber weiß.

Dabei wird im Kurs Wert darauf gelegt, dass Inhalt und Gestaltung möglichst getrennt werden. Aber das ganze kommt nicht dogmatisch rüber sondern orientiert sich eher an der Praxis. So werden auch erst Beispiele für Formatierungen allein mit XHTML-Attributen gegeben und dann wird darauf eingegangen, wie man die Gestaltung in Style-Sheets auslagern kann. Auf Browser-relevante Probleme  wird dabei auch eingegangen und man wird immer wieder ermuntert, selber mit den Beispielen zu experimentieren. Das sollte man natürlich vor allem auf dem eigenen Rechner tun (man muss sich ja auch mit den entsprechenden Tools anfreunden), aber es gibt auch interaktive Beispiele, bei denen im linken Frame der CSS-Code editierbar ist. Die Änderungen kann man dann mit einem Button-Click auf die Seite, die im rechten Frame dargestellt ist, übernehmen.

Sicherlich gibt es noch viel mehr über CSS zu sagen, aber es reicht völlig, um ein Gefühl dafür zu bekommen. Bleiben mir jetzt nur noch die beiden Einsendeaufgaben (die ersten des Moduls). Dabei soll man ein vorgegebenes Layout einmal mit absoluter Positionierung und einmal mit Floats realisieren.