Eine ganze Halle der didacta war vollgestopft mit Interaktiven Whiteboards. Auch sonst konnte sich kaum ein Stand erlauben, sie nicht zu haben. Das ist wohl das ganz große Ding und kaum eine Schule wird darum herum kommen. Gut dass beim VZL gerade ein Lehrerfortbildungskurs zu dem Thema läuft… So klasse die Dinger auch sind – ich wünsche mir schon seit längerem eins in dem PC-Pool, in dem ich unterrichte – so dämlich ist doch manchmal die Software, die darauf läuft. Ich habe jedenfalls noch keine gefunden, die mich als visuellen Menschen zufrieden stellt. Außerdem wundert mich, dass wohl jetzt erst jemand darauf gekommen ist, eine Web Application für IWBs zu erfinden, die plattformübergreifend ist, da sie auf HTML5 basiert. EasyChalk von Chalkless Media ist auf der didacta in einer Betaversion zu sehen und dementsprechend waren auch viele Features noch nicht fertig. Aber was ich gesehen habe, sah viel versprechend aus. Ich habe mich gleich mal als Betatester angeboten. Mutig ist es natürlich schon, das in HTML5 zu machen, aber im Firefox 3.6 lief es recht stabil und man konnte über das Canvas Element auf dem Whiteboard malen. Vorteil: Es läuft wegen dem verzichten auf Flash auch auf dem iPad. Naja, erst mal schauen, was das iPad für den Unterricht bringt. Auf jeden Fall ist das UI sehr viel besser als anderswo.

Sehr nett auch, was Kids Interactive an IWB-Materialien zu konkreten Lehrwerken anzubieten haben. Eine wohltuende Abwechslung zu den doch oft etwas arg hässlich anmutenden mitgelieferten Karten usw. Die gibt es zwar umsonst, so sehen sie dann aber auch aus. Welcher Geografie-Lehrer wird ernsthaft das Gezackere  im Unterricht nehmen wollen.

Am zweiten Tag meines Aufenthalts in Stuttgart (Danke noch mal an Tobi ) war ich dann auf der Fachtagung “Professional E-Learning”. Los ging es mit einem ganz hervorragenden Vortrag von Frank Thissen, der das Themenfeld mit einer bestens abgestimmten Präsentation aufspannte. Leider sind die anderen Vorträge dann nicht mehr mit seinem Anspruch mitgekommen, Lernszenarien zu entwerfen, die zukunftsweisend sind, sondern beschrieben eher den Status Quo. Dennoch fand ich alle Vorträge sehr informativ und habe einige Anregungen mitgenommen, auch wenn es vielleicht andere waren, als es eigentlich gedacht war.

Ein Vortrag handelte davon, wie reale Lernräume den Lernprozess verbessern können, indem man Studierenden Kontexte schafft, die sie offener machen, Lernstoffe zu erarbeiten. Leuchtturmprojekte der Hochschule der Medien Stuttgart wurden vorgestellt und Fotos von englischen Universitäten gezeigt. So ungemein spannend diese Aspekte auch sind, darf ich noch mal daran erinnern, wie hoch die Studiengebühren in GB sind und wieviel Geld alleine an der Uni Marburg eingespart werden musste. Als Anregung habe ich allerdings mitgenommen, einfach die Räumlichkeiten, die vorhanden sind, bildlich gesprochen aufzubrechen und Studierende in immer neuen Konstellationen mit unterschiedlichsten Materialien Aufgaben lösen zu lassen. Äh, ja, genau das also, was an Schulen schon seit mindestens 20 Jahren gemacht wird.

Interessant war ein Vortrag zu E-Assessment und seiner Klassifikation von Anna Thillosen von e-teaching.org. Da habe ich mitgenommen, das man (a) den Aufwand scheut, (b) alle was anderes darunter verstehen und es (c) keine Synergie-Effekte gibt, schon gar nicht länderübergreifend. Das klingt jetzt vielleicht alles sehr negativ, wenn ich das so formuliere, aber ich sehe es eher als Aufgabe, daran zu arbeiten. In einzelnen Gesprächen waren anderen Teilnehmer auf jeden Fall überrascht, dass wir an der Uni Marburg einfach so E-Klausuren machen und da sollte man enger zusammenarbeiten.

Vielen Idee habe ich bekommen bei dem Vortrag von Nina Heinze über ihre Erfahrungen mit Web 2.0 im Unterricht. Da muss ich aber erst mal meine Notizen ordnen und mir Gedanken für das nächste Semester machen. Aber da geht noch was, was die Aktivierung von Studierenden in Kursen anbelangt.

Alles in allem: Ich habe schon Messen erlebt, die mir gar nix gebracht haben, aber die didacta dieses Jahr gehört sicherlich nicht dazu.

1. Fancy Form Design Using CSS
2. Prettier Accessible Forms
3. The Form Assembly – Form Layouts
4. Forms markup and CSS – Revisited
5. CSS-Only, Table-less Forms
6. CSS Styling of forms
7. Semantic Horizontal Forms
8. Styling Form Fields
9. Clean and pure CSS FORM design
10. Showing Good Form
11. Styling form controls with CSS, revisited
12. Styling Form Fieldsets, Legends and Labels
13. Pretty Up Your Forms with CSS
14. Tableless forms
15. Who says CSS Forms Can’t Look Good?

Hope you find something that is worth redoing.

Sources:

• 51 Form Element Resources and Tutorials Using CSS And Javascript
• 40 CSS Web Form Style Tutorials For Web Developers

I came across a couple of websites recently that use the following CSS bits on dark body text

text-shadow: 0 1px 0 #fff;

or some such thing. Of course, sometimes including the vendor-specific extensions as well.

Please, don’t that. I pretty sure that it makes body text harder to read and I’m not quite sure whether it really looks that good. I mean, I haven’t got any scientific studies at hand and it somehow looks good in the beginning but once you try to read it, your eyes are complaining sooner or later. At least my eyes are.

I will conduct a non-representative study about this but until then: Please only use this effect for headlines. Please!

It was quite minimalistic and we only had one Mac user out of nine people attending the course. So, what they all agreed on was: “It’s good design but I don’t like it.”

Now, I’m not a Mac user and I still like the website. The attitude of Apple is tending to get on my nerves and I still like the website. They are somewhat confronting the web dev community with facts that are hard to swallow: App Store policies, no flash please, no Java please etc. and I still like the design of the website. What is more: I think that the Apple website is a perfect place to go if you need a quick example for [insert your favorite web design rule here].

But that’s not actually the point that I wanted to make here. What is the point, however, is that we had an epiphany when the sentence in the title of this post was uttered. There is a difference between taste and good design. If, of course, you are a designer then this is your daily bread. This is still not something that you get across to your students easily and I think this sentence will do exactly that.

As an extra for my course: Here’s how the last slide should have looked like…

Set in St Ryde Regular and Adelle Basic Bold

Update: I’ve put up the presentation on Slideshare.com:

Presenting Content – Group 1 (LA) on Wednesdays

Presenting Content – Group 2 (MA) on Thursdays

Techniques of Scientific Work on Fridays (three dates)

Web Technologies on Mondays

Starting tomorrow we’ll—Anna Maria Schäfer and I that is—be holding an HTML/CSS preparatory course until Friday for MA Linguistics and Web Technology students.

Hier gibt es ein paar Bilder vom Kongress und von unserem Stand, auf dem wir den VLC und das VZL präsentiert haben. Leider ist der MP an uns vorbei manövriert  – vielleicht weil wir aus Marburg kommen – aber Wissenschaftsministerin Eva Kühne-Hörmann hat sich uns angeschaut.

Friedrich-von-Thiersch-Saal

Das Team am Stand

Marktplatz IT

Marktplatz IT

Prof. Horst Zuse am Stand des VLC und VZL

Georg Schnurer

MP Koch beim Eröffnungsvortrag

Grußwort von Prof. Horst Zuse

Ministerin Kühne-Hörmann am Stand

And this is what we are going to do in this episode: The Virtual Center for Teacher Training has introduced a so called Microprojects Feed, which in return got a box on its own on the left of the portal. We will design this box.

And here’s how the result will look like:

The German version of the Microprojects Feed Box

You will find the images that are required for this tutorial later in this post. I am quire aware of the fact that you could do it in CSS3 without the images but I will write that tutorial in a year or so. Let’s do something that will look the same in all the current browsers.

1. The XHTML structure

In the following we will have a quick look at the XHTML structure. It’s quite simple, we have a div for the box, some paragraphs and headlines and only few classes, since the enclosing div gets an id. Here’s how it looks like (only the specific code, I left out the document details for a better overview):

<div id="mpfeed">
  <h1>Mikroprojekte Feed<img src="rssfeed_box.gif" alt="RSS Feed Icon" /></h1>
  <div class="feedentry">
    <div class="feedpubdate">10. Mär 2010</div>
    <h2><a href="#">Mind Maps mit Bubbl.us gestalten</a></h2>
    <p>Das kleine Web-Tool Bubbl.us hilft dabei Mind Maps schnell und einfach zu erstellen.... <span><a href="#">mehr</a></span></p>
  </div>
  <div class="feedentry">
    <div class="feedpubdate">01. Mär 2010</div>
    <h2><a href="#">Texte mit Wordle visualisieren</a></h2>
    <p>Erstellen Sie in kurzer Zeit ansprechende Visualisierungen von beliebigen Texten. Der... <span><a href="#">mehr</a></span></p>
  </div>
  <p><a href="#">Feed abonnieren</a><img src="feed-icon-14x14.png" alt="Feed Icon" /></p>
  <p><a href="#">Hilfe zum Mikroprojekte Feed</a></p>
</div>

That was easy enough, wasn’t it? We need the nested elements to define specific styles for them. You could leave out the classes and still get the same result, but I would like to use the classes to make it a bit clearer.

2. The images we need for the deed

Here are the images we need for backgrounds, I will explain why they look like how they look like in a minute. Right click and download the images.

• boxes_back_bottom.gif
• boxes_back_top.gif
• feedentry_bg.gif
• feed-icon-14×14.png
• rssfeed_box.gif

The box around the whole thing gets two images. The bottom image will be the background for the div that has the id mpfeed. The top image will be the background of the h1 in the box and will thus cover the div’s background image. That’s a derivation of the ever so nifty sliding doors technique, which means that the box can be adjustable in height. That’s why the bottom image is rather high, just in case that you have a rather high box.

The feed entry div gets a separate background image. You can see that it is larger as the box as well and it also misses the gray lines at the left side and the top. We’ll do that with CSS.

3. Setting the box

Here’s the CSS bit that we need to make the box look like the box in the image above.

#mpfeed {
    background: url(boxes_back_bottom.gif) left bottom no-repeat;
}
#mpfeed h1 {
    background: url(boxes_back_top.gif) left top no-repeat;
    font-size: 12pt;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 10px;
}

As I wrote, this is just for the surrounding box. It also defines the h1, h2 and p tags that we have in the box. The following definitions will make everything else look good.

#mpfeed .feedentry {
    background: url(feedentry_bg.gif) right bottom no-repeat;
    margin: 0 8px 10px;
    padding: 0 0 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: relative;
}
#mpfeed .feedentry h2 {
    margin: 3px 0 5px;
    padding: 0 3px;
    white-space: normal;
    font-size: 10pt;
}
#mpfeed .feedentry p {
    margin: 0 0 5px;
    padding: 0 3px;
    font-size: 8pt;
}
#mpfeed .feedentry .feedpubdate {
    text-align: center;
    width: 30px;
    float: right;
    margin: 3px;
    font-size: 8pt;
    border: 1px dotted #ccc;
}
#mpfeed .feedentry p span {
    float: right;
    margin-right: 2px;
}

Now, let’s explain this a bit. Each feed entry gets a background which makes it look like a flipping page. It also get a date box and aligns the more to the right. That’s fairly easy to do and if you will be in the Presenting Content or the Web Technologies courses in summer semester, I will explain to you in details, what it is all about.

• Der VZL Shop auf Prestashop-Basis bietet die Möglichkeit Arbeitsheft zu den Weiterbildungskursen zu bestellen und außerdem den Globalzugang (s.u.) zu buchen.
• Der Globalzugang bietet Zugang zu allen Virtuellen Sitzungen, aus denen die Kurse de VZL bestehen. Diese Option gibt es für hessische Lehrerinnen und Lehrer schon länger und ist jetzt für alle verfügbar.
• Und außerdem gibt es noch die sogenannten Mikroprojekte als RSS-Feed, kleinere Unterrichtsideen, die die Neuen Medien benutzen, natürlich gleich mit Beispielen.

Comments (especially nice ones) are very much appreciated.

(Oh my, now I know a lot more about WordPress than I did before )