I have prepared a public dashboard over at Netvibes to give you a starter of what you can do that should accompany this blog post. But I am sure that once you get going there is lots more.

Example for a Netvibes dashboard

1. Preparing a class trip

Netvibes offers a couple of widgets that are quite nice if you have to prepare for a class trip to let’s say London. You could include a Google map of London for a start. And the weather, of course, although this might scare off your students . There is a Time Out London widget with the Pick of the Day. Let your students maybe check for the cheapest flight and the cheapest hotel. Latest BBC news from London also set the mood. I’m sure that you can think of much more than that.

Check my public dashboard for an example

2. Covering a news topic

One of the best things to use Netvibes for is of course that you can use any news feed and combine them on one page. Usually, news portals offer just a limited amount of RSS or Atom feeds including the latest news or categories of new such as politics, sports etc. However, some news portals also offer topic related feeds. It’s a bit tricky to find them, but it’s worth it. German newspaper Süddeutsche Zeitung or British newspaper The Guardian offer such a service which can be found below a number of articles, e.g. about the Euro crisis or US elections. It’s good to have a look at the newsfeed logo as shown on the right because there you might find the thing that you are looking for.

3. Critically dealing with news sources

One step forward from idea 2 is of course to use a number of news portals that are well known for their bias and compare them.

Check my public dashboard for an example

4. To do lists for group work

Netvibes offer to do lists that can be used for group work. Either students create their own to do lists before they start working on their task or the teacher prepares them for them so that students just need to tick them off. Ideally, you want to do this via an interactive whiteboard so that all groups see how far the others are. This is a function, however, that might be included in the software that comes along with a whiteboard, so only use it if you lack that software or you want to combine it with something else, e.g. in idea number 5.

5. WebQuests

I was pretty sure that I did not come up with that idea as the first one, so when I googled for the words WebQuest and Netvibes I got 37,700 results. The tool is simply awesome for the combination of various sources. A very good idea is included in the WebQuest Earth History by Sean Markwith who created an answer sheet with Google Forms in order to gather the learning results from his students.

6. Documenting results

The last thing mentioned in idea 5 can also be used as a way of documenting results. But you could go a step further: Create a Netvibes dashboard and let students work on it collaboratively. They can collect all sorts of sources in one place. Although I’m not sure about performance problems if you do it in a PC pool in the course of one lesson, I think that it is a good way to let students share what they found and that it could be done as a homework.

7. Listening comprehension

Since podcasts and videocasts are themselves only newsfeeds they can be included in Netvibes just as any other feed. Quite a good place to start is the podcast section of the BBC. Here you can find a huge amount of podcast covering a wide range of topics. The good thing is that Netvibes not only shows the feed but also enables you to play the audio files directly without the need to leave the page. Thus, you can also include tasks or other sources to add to the listening. A small player will show up on the top of the dashboard.

Check my public dashboard for an example

8. Go mobile

All the ideas that are listed here can also be a part of a mobile learning experience. Although I am not quite sure which widgets exactly are working in the mobile version of netvibes, the advantage is that students are able to work on the tasks everywhere. Netvibes offers apps for iOS and Android along with a mobile website. I need to check out the functionality of the apps soon and will add some notes about them.

9. Course evaluation (anonymous)

Websites such as Wallwisher offer a quick and easy way to let your students give feedback about the course or a topic by creating sticky notes on a wall. Netvibes also offers a similar way to do this by using the Webnotes widget. Students must be logged in to use it, but it can be integrated in order to give anonymou feedback.

10. E-Portfolios

Netvibes can function as the central spot of all activities of students as an e-portfolio. Let’s say that they where supposed to leave their traces on a variety of platforms. Flickr for photos, Youtube for videos, WordPress for a blog, etc. Netvibes can include all these traces into one portfolio where teachers are able to access information without the need to browser through all other websites.

11. Learner diaries/blogs

Once again, the Webnotes widget can also be used to create a small weblog, although it is admitted that the functionality is very limited in comparison to other blog services such as Blogspot or WordPress. But that can also be an advantage, because sometimes limitations can also push creativity. Also, Netvibes lets you include other resources and it offers more was to arrange posts and thus enables students to break up the strict timeline you usually need to keep in blogs.

12. Social (Class) Bookmarking

Social bookmarking has been quite a hype a couple of years ago with the most known Delicious in the lead. Later, Delicious was sold and since then was not the same online bookmarking service anymore. Although Netvibes is not a bookmarking service in the first place, it offers a link module with which students can collect their bookmarks and share them with others. But this can surely done better with other services—Diigo, StumbleUpon, or Digg, to name but a few—and then be integrated into Netvibes via feeds. Unfortunately, the very good Delicious widget is working no longer, but these bookmarks can still be integrated via RSS feed or try to use Pretty Delicious as a substitute.

The good thing about this is that students have to log in to create stuff and that the teacher can keep control about whether the page should be private or public.

Check my public dashboard for an example

Of course, most of these things can be done (better) with other tools. But if you don’t want to limit work to a certain aspect but rather let all of these be part of your students work in class, then Netvibes is a good tool. You could say that it can become a Personal Learning Environment (PLE).

Original image: Jeffrey Chen, www.royalshot.com, from www.sxc.hu

I know. In competitions this wouldn’t stand a chance. It’s just quick and dirty and you can see the seams all along. But I just wanted to show you, how you can easily use the powerful features of Photoshop to do something like this in minutes.

Who does not know presentations that let you shake your head in disbelief because the presenter talks too much or not enough about a topic. Or he/she is not able or willing to stick to the given time. How often have I heard presenter telling the audience that they might not be able to finish on time and that the audience should cut them off if they don’t. What else does this mean than that towards the end of the presentation it gets more and more unimportant?

The strict form of a pecha kucha presentation—20 slides and 20 seconds for each slide—is a challenge, especially, if you are not used to restrict you talk. I usually change the rules in my courses a bit, making it 15 slides. Thus, every presenter has 5 minutes to divide the important from the unimportant.

Tips for holding a pecha kucha presentation that I always give my students are the following:

• Divide the important from the unimportant.
  What do you have to tell your audience about your topic, what can be left out? What is interesting for the audience? What are the central assumptions?
• Divide what you want to say into small portions.
  It is of course ideal if you can come up with 15 portions at once, but you might also move around things later on.
• Write down key words that you want to talk about during your presentation.
  2-3 key words per slide are ideal.
• Think about which visual elements you want to put on your slides.
  They can be text, screenshots, images, animations, or short video clips. The most important thing is that they fit to the things that you say.
• Use the pecha kucha template (ppt file) to insert your elements.
  Please pay attention to the count down in the lower right corner. It should be on top of all the slides. Use the option “bring to front” in PowerPoint.
• Practice the presentation.
  You will see that it’s not that simple to stick to the time limits. Move around items to make them fit.
• Practice the presentation again.
  If it works, good. If it doesn’t:
• Practice the presentation again.

In the first 20 seconds you will usually recognize who has practiced and who hasn’t. It is incredible how long seconds can be if the presenter is not talking because there still a few seconds to the next slide.

The reactions of students are most of the times fascination because of the format but also groaning because of the strict limitation that the format brings along. But it is this limitation that seems to be the best exercise for free presentations that are supposed to bore no one. With a little bit of patience you are able come to the point and also to create a sensible connection between what you talk about and what you show. Self restriction led to a lot of nice surprises when it comes to creativity in some courses. Breaking the strict form without really breaking it can be quite interesting.

In addition, the pecha kucha format can also solve two problems that often occur in large seminars which require a presentation as assessment. Firstly, more presentations can be held in one session. It is only so much true that quality suffers from shorter presentations since the teacher has more time to get involved and everyone can analyze whether all important things have been mentioned. Secondly, and I think that this must not be neclected, teacher and fellow students are usually less bored, because presentations are more creative.

Further information about pecha kucha presentations and some examples can be found at:

• Pecha Kucha 20×20
• Pecha Kucha Berlin / Cologne
• Is Pecha Kucha (pe-chak-cha) Spreading Around The ELT World?

Wer kennt sie nicht, die Präsentationen, bei denen man ungläubig mit dem Kopf schüttelt, weil der/die Präsentierende zu viel oder zu wenig zu einem Thema sagt und nicht fähig bzw. willig ist, die vorgegebene Zeit einzuhalten. Wie oft habe ich schon gehört, dass sich Präsentierende vorab die Absolution des Publikums einholen, dass sie eventuell zu lange reden und dass das Publikum doch bitte die Rede unterbrechen soll, wenn’s zu arg wird. Das kann doch nur bedeuten, dass es am Ende immer unwichtiger wird.

Die strenge Form der Pecha-Kucha-Präsentation – 20 Folien, für jede Folie 20 Sekunden Zeit – stellt eine Herausforderung dar, wenn man es nicht gewohnt ist, das Reden zu beschränken. Ich wandle diese Form in meinen Kursen gewöhnlich etwas ab, nämlich zu 15 Folien. Damit hat jeder Präsentierende 5 Minuten Zeit, wichtiges von unwichtigem zu trennen.

Als Tipps für den Ablauf der Präsentation geben ich meinen Studierenden Folgendes mit auf den Weg:

• Trennen Sie am Anfang das Wichtige vom Unwichtigen.
  Was müssen Sie dem Publikum unbedingt über Ihr Thema mitteilen, was kann weggelassen werden? Was interessiert das Publikum? Was sind Ihre zentralen Thesen?
• Teilen Sie das was Sie sagen wollen in kleine Portionen auf.
  Ideal ist es natürlich, wenn Sie gleich auf 15 Portionen kommen, Sie können aber auch noch später hin und her schieben.
• Machen Sie sich Zettel mit Stichpunkten, die Sie während der Präsentation ausformulieren.
  Ideal sind 2-3 Stichpunkte pro Zettel, jeder Zettel korrespondiert mit einer der 15 Folien.
• Überlegen Sie sich, was zu den Stichpunkten als Visualisierung auf den Folien zu sehen sein soll.
  Dabei kann es sich um Text, Screenshots, Bilder, Animationen oder kurze Videos handeln, Hauptsache, diese Elemente haben einen Bezug zu dem, was Sie sagen.
• Benutzen Sie die Pecha-Kucha-Vorlage (PPT-Datei), in die Sie Ihre Elemente einfügen.
  Beachten Sie dabei, dass der Countdown auf jeder Seite sichtbar bleibt. Sie können die Ebenenreihenfolge in PowerPoint verändern.
• Üben Sie die Präsentation.
  Sie werden sehen, dass es gar nicht so einfach ist, die Zeit einzuhalten. Manchmal werden Sie zu lange reden,  manchmal zu kurz.Verschieben Sie die Stichworte hin und her, wenn es nötig ist.
• Üben Sie die Präsentation noch einmal.
  Wenn es dann schon klappt, gut. Wenn nicht:
• Üben Sie die Präsentation noch einmal.

Man merkt schon innerhalb der ersten 20 Sekunden, wer geübt hat und wer nicht. Unglaublich, wie lange die Sekunden sein können, in denen der Präsentierende nichts sagt, weil bis zur nächsten Folie noch ein paar Sekunden übrig bleiben.

Die Reaktion der Studierenden ist meistens einerseits Faszination bezüglich des Formats, aber auch ein Stöhnen wegen der strengen Limitierung die es mit sich bringt. Gerade diese Limitierung ist jedoch die beste Übung für freie Präsentationen, die niemanden langweilen sollen. Man schafft es mit etwas Geduld die Dinge auf den Punkt zu bringen und eine eindeutige Verknüpfung zwischen Gesagtem und Gezeigtem herzustellen. Die Selbstbeschränkung hat dabei in den Kursen zu angenehm überraschenden Beispielen von Kreativität geführt, die die strenge Form aufzubrechen versuchten und denen dies meistens auch gelungen ist.

Nebenbei kann die Pecha-Kucha-Form auch noch zwei weitere Probleme beheben, die oft bei größeren Veranstaltungen bestehen, in denen Präsentationen eine Prüfungsleistung darstellt. Zum einen kann man mehr von diesen Präsentationen in einer Sitzung halten lassen. Dass bei der kurzen Zeit die inhaltliche Qualität leidet, stimmt nur bedingt, da der Dozent mehr Zeit hat einzuwirken und noch einmal analysieren (lassen) kann, ob tatsächlich alles Wichtige gesagt sei. Auf der anderen Seite – und ich denke, auch dies ist nicht zu vernachlässigen – langweilen sich Dozent und Kommilitonen weniger, weil die Präsentationen häufiger mit Ihrer Kreativität überzeugen.

Weitere Informationen zu Pecha-Kucha-Präsentationen und vor allem mit vielen Beispielen:

• Pecha Kucha 20×20
• Pecha Kucha Berlin / Cologne
• Is Pecha Kucha (pe-chak-cha) Spreading Around The ELT World?

And then there were the tutorials which have actually been posted before in a different post.

Benutzbar und zugänglich gestaltet

Wenn an dieser Stelle von Gestaltung die Rede sein soll, muss vorausschickt werden, dass es sich nicht um die didaktische Gestaltung von Lernmaterialien handelt. Vielmehr soll hier die visuelle Gestaltung von Lernumgebungen und ihr Einfluss auf Lernprozesse behandelt werden.

Häufig wird das visuelle Design bei digitalen Lernmaterialien vernachlässigt. Manchmal wird darauf verwiesen, dass die visuelle Gestaltung für den Lernprozess eine untergeordnete Rolle spielt, da die Lerner eher auf die Inhalte selbst achten, als auf die Art wie diese Inhalte gestaltet sind. Ob nun also die Schriftart Times New Roman gewählt wurde oder Arial ist nicht so wichtig, sondern was in dieser Schriftart niedergeschrieben wird. Das mag sicherlich richtig sein, greift aber zu kurz.

Am Beispiel von Arnold et al., die darauf hinweisen, dass Inhalte wichtiger sind als das Design (vgl. Arnold et al., 2011: 137), lässt sich verdeutlichen, dass eine klare Trennung zwischen didaktischer Gestaltung und visueller Gestaltung nicht vorgenommen wird. Das macht insofern Sinn, als dass beide Gebiete in starker Wechselwirkung miteinander stehen und oft nicht voneinander getrennt betrachtet werden können. Wenig hilfreich ist es jedoch, wenn visuelles Design als Beigabe betrachtet wird, denn es bezieht sich gerade im Web Design auf wesentlich mehr als „nur“ die reinen gestalterischen Aufgaben. Tatsächlich gibt es eine Reihe von Gründen, warum visuelles Design Einfluss auf den Lernprozess haben kann. Eine empirische Untersuchung dieser Zusammenhänge ist uns nicht bekannt, allerdings können viele Untersuchungen zum Verhältnis von Web Design und dem Erreichen eines bestimmten Zieles angeführt werden, die sich auf Lernprozesse übertragen lassen (vgl. u.a. Cooper et al., 2007:88-97; Nielsen/Loranger, 2006: VI/VIII; Saffer, 2007:VII; Tidwell, 2006:I).

Zentrale Begriffe im Web Design sind Benutzbarkeit (Englisch: usability) und Zugänglichkeit oder Barrierefreiheit (Englisch: accessibility). Beide Konzepte können durch Methoden der guten visuellen Gestaltung nachhaltig unterstützt werden und dadurch die Erreichbarkeit eines Ziels – hier also eines Lernziels – durch den Benutzer garantieren.

Benutzbarkeit

Die Benutzbarkeit von Webangeboten kann durch eine Reihe von Designaspekten beeinflusst werden, u.a. durch:

a) Typografie
b) Farbe
c) Layout
d) Navigation/Interaktion
e) Gestaltung multimedialer Elemente

Typografische Aspekte (a) spielen eine zentrale Rolle, da die Grundstruktur aller Inhalte im Web textueller Natur ist (siehe Abschnitt 7.1.1). Viele Regeln für eine gute typografische Gestaltung gelten für Webinhalte wie für Printmaterialien gleichermaßen. Genauso arbeitet man in beiden Gebieten mit Schriftgröße, Schriftart, Schriftauszeichnung, Absatzausrichtung etc. Wichtig ist, dass Typografie die Lesbarkeit – und sei es auch nur die gefühlte, wie Liebig herausstellt (INT1) – eines Textes unterstützt, damit die Erfassung der textuellen Information möglichst schnell geschieht (vgl. Ziefle, 2002). Für die Erfassung von textuellen Informationen ist die Strukturierung dieser Information in Überschriften, Absätze, Listen usw. nicht zu vernachlässigen.

Farbe (b) spielt im Design eine wichtige Rolle, da mit ihrer Hilfe emotionale und kulturelle Informationen transportiert werden können (Thissen, 2001:139). Sie spielt auch deshalb eine Rolle, weil die Aufnahme von Informationen von der Dominanz oder Zurückhaltung von Farbe abhängen kann. Daher sollte die Auswahl von Farben mit Bedacht geschehen und folgende Aspekte berücksichtigen:

• angenehm/störungsfrei
  Eine für den Benutzer angenehme Farbgebung kann die Aufnahme von Informationen verbessern, wenn durch sie z.B. garantiert wird, dass die Lesbarkeit optimiert wird. Texte werden durch einen hohen Vordergrund-Hintergrund-Kontrast gut lesbar. Grelle Farben und Farbkombinationen haben hingegen einen unangenehmen Effekt (Tufte, 1990:82). Korrespondierend zu einer angenehmen Farbwahl ist natürlich auch zu garantieren, dass Farben nicht stören, wenn etwa bestimmte Farben den falschen Elementen zugeordnet werden. Eine grelle Hintergrundfarbe wird sehr wahrscheinlich als störend bei der Aufnahme von textuellen Informationen empfunden.
• ansprechend
  Eine ansprechende Farbgebung ist von Bedeutung, da durch sie eine emotional positive Basis für das Arbeiten mit den Inhalten gelegt wird. Dabei ist allerdings die Zielgruppe der Inhalte zu beachten. Was als ansprechend gilt, ist von einer Reihe demographischer Faktoren abhängig (Tullis et al., 2005:123).
• unterstützend
  Farbe kann dazu benutzt werden, präattentive Wahrnehmung zu unterstützen (Tidwell 2006:163). Durch Einsatz von farbigen Elementen kann die Struktur von Informationen verdeutlicht werden, bevor der Benutzer die Informationen selbst kognitiv aufnimmt. Hier kann Farbe also benutzt werden, um Hierarchien sichtbar zu machen oder gegebenenfalls besonders wichtige Elemente hervorzuheben.
• kontextsensitiv
  Allgemein lässt sich feststellen, dass die Farbwahl vom Kontext abhängt. Die Hintergrundfarbe Rot wirkt kontraproduktiv bei normalem Fließtext. Soll eine Fehlermeldung besonders ins Auge fallen, gelingt dies aber besonders mit einem roten Hintergrund. Farben sind also gemäß dem thematischen Kontextes zu wählen (Wendt, 2003: 231).

Das Layout (c) einzelner Seiten des digitalen Angebots sollte möglichst konsistent gehalten werden, in dem Sinn, dass gleiche Elemente an der gleichen Stelle zu finden sind. Benutzer finden sich besser und schneller auf Websites zurecht, wenn ihre Erwartung erfüllt wird, an welcher Stelle sich z.B. die Navigationselemente befinden. Das Layout einer einzelne Seite sollte grundlegenden Designregeln zum Layout genügen. Die Anordnung einzelner Elemente in ein konsistentes Layout ist ihrer Aufgabe entsprechend zu bestimmen. Wichtig ist auch, dass eine Zuordnung zusammengehöriger Elemente z.B. durch räumliche Nähe möglich ist. Klare Linien innerhalb des Layouts erhöhen die Übersichtlichkeit und verbessern die Erfassung der präsentierten Informationen (vgl. Hammer, 2008:5.3).

Das Zurechtfinden in einem Hypermediasystem entscheidet darüber, ob der Benutzer die vorliegenden Informationen erfassen kann und ob seine Motivation das System zu benutzen, über längere Zeit aufrecht erhalten werden kann. Idealerweise muss sich ein Lerner nicht mit der Navigation (d) beschäftigen, sondern kann sich intuitiv durch das System bewegen (vgl. Tidwell, 2006:55). Cooper et al. stellen eine Reihe von Regeln für die Navigation auf, die wichtig für eine reibungslose Benutzung eines Hypermediasystems sind (Cooper et al., 2007:237) und die hier auf ein Hypertextsystem übertragen werden sollen, das für das Lernen benutzt wird:

• die Anzahl der Orte reduzieren, zu denen man gelangen kann
  Der Lerner muss von Anfang erkennen können, wie umfangreich die Lerneinheit ungefähr ist, damit er einschätzen kann, wie lange es dauert, bis er alle Informationen aufgenommen hat. Je mehr Orte er erreichen kann, desto eher stellt sich das Gefühl der Verlorenheit ein.
• Wegweiser bereitstellen
  Der Lerner muss sich innerhalb der Lerneinheit orientieren können, um zu sehen, wie er von einer Information zu nächsten und gegebenenfalls wieder zurück kommt. Dazu eignen sich grafische Elemente besonders (siehe Abschnitt 7.1.2).
• Übersichten präsentieren
  Der Lerner muss erkennen können, welche einzelnen Schritte zum Erfassen einer Lerneinheit notwendig sind und um wie viele Schritte es sich handelt. Idealerweise geschieht dies von vornherein inhaltlich, z.B. mit Hilfe von Leitfragen.
• Kontrollelemente entsprechend ihrer Funktion gestalten
  Aus dem Design von Kontrollelementen, etwa zur Navigation oder dem Abspielen von Multimedia-Inhalten, muss klar hervorgehen, welche Funktion sie haben. Dabei kann auf gängige Symbolik im Computerbereich zurückgegriffen werden, wenn zum Beispiel ein Abspielbutton ein Dreieck abbildet, das nach rechts zeigt.
• Schnittstelle an die Bedürfnisse des Benutzers anpassen
  Die Benutzerschnittstelle, also mit anderen Worten die Lernumgebung, sollte so gestaltet sein, dass sie den Bedürfnissen des Benutzers nach einer reibungslosen Navigation durch die Lernumgebung entgegen kommt. Dazu gehören etwa eine Gruppierung von Elementen mit ähnlicher Bedeutung und eine Reduzierung der Anzahl von Elementen auf das Nötigste.
• Hierarchien vermeiden
  Zwar sind Hierarchien inhaltlich gesehen sehr oft notwendig, häufig sogar unerlässlich für die Aufnahme von Informationen. Im Zusammenhang einer Lernumgebung garantiert eine flache Hierarchie jedoch, dass die einzelnen Informationsteile gleich schnell erreichbar sind und nicht „versteckt“ werden.

Bei der Gestaltung multimedialer Elemente (e) ist darauf zu achten, dass sie grundsätzlich Benutzereingriffe ermöglichen. Ein Videosoll daher nicht selbstständig ablaufen, ohne dass man es stoppen oder die Lautstärke regeln könnte. Darüber hinaus sollten sie kontextsensitiv gestaltet werden, also nicht nur thematisch sondern auch im Hinblick auf Designgrundlagen in ihre Umgebung passen. Wie bei jedem grundlegenden E-Learning-Element gilt auch hier, dass die Gestaltung zielgruppenorientiert sein muss.

Zugänglichkeit

Zwar ist das Konzept der Zugänglichkeit meist vor allem so gemeint, dass Personen mit Behinderung ein Webangebot benutzen können und Informationen nicht in Formaten „versteckt“ sind, die für diese Personen nicht zugänglich sind. Wenn Informationen also in einer Grafik gespeichert sind und ein beschreibender Text zu dieser Grafik fehlt, können sehbehinderte Menschen diese Information nicht erreichen. Man kann aber aus der Zugänglichkeit von Webangeboten auch einen Vorteil für nicht behinderte Menschen ableiten. Sieht man sich Elemente aus den Spezifikationen an, die das World Wide Web Consortium (W3C) für Barrierefreiheit vorschlägt, findet man viele Elemente, die auch für die didaktische Gestaltung Geltung haben (http://www.w3.org/WAI/intro/wcag.php). Besonders die „Four Prin­ciples of Accessibility“ bieten eine gute Grundlage für die Erstellung von Inhalten:

Perceivable – Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses)

Operable – User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

Understandable – Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible). (INT2)

Werden diese Prinzipien auf jede Art von Inhalten sowohl technisch als auch inhaltlich übertragen, kann davon ausgegangen werden, dass die Informationen, die transportiert werden sollen, bei der großen Mehrheit der Anwender ankommen.

Quellen

Arnold, Patricia/Kilian, Lars/Thillosen, Anne/Zimmer, Gerhard. 2011. Handbuch E-Learning. Bielefeld: WBV.

Cooper, Alan/Reimann, Robert/Cronin, David. About Face 3. 2007. The Essentials of Interaction Design. Indianapolis: Wiley Publishing.

Hammer, Norbert. 2008. Mediendesign für Studium und Beruf. Grundlagenwissen und Entwurfssystematik in Layout, Typografie und Farbgestaltung. Berlin: Springer Verlag.

Nielsen, Jakob/Loranger, Hoa. 2007. Prioritizing Web Usability. Berkeley: New Riders.

Saffer, Dan. 2007. Designing for Interaction: Creating Smart Applications and Clever Devices. Berkeley: New Riders.

Thissen, Frank. 2001. Screen-Design-Handbuch. Berlin: Springer Verlag.

Tidwell, Jenifer. 2006. Designing Interfaces. Patterns for Effective Interaction Design. Sebastopol: O’Reilly.

Tufte, Edward R. 1990. Envisioning Information. Cheshire: Graphics Press.

Tullis, Thomas S./Catani, Michael/Chadwick-Dias, Ann/Cianchette, Carrie. 2005. Presentation of Information. In: Proctor, Robert/Vu, Kim-Phuong L. (Hrsg.). Human Factors in Web Design. Mahwah: Lawrence Erlbaum Associates.

Wendt, Matthias. Praxisbuch CBT und WBT. 2003. Konzipieren, entwickeln, gestalten. München: Hanser.

Ziefle, Martina. 2002. Lesen am Bildschirm. Eine Analyse visueller Faktoren. Münster: Waxmann Verlag.

[INT1] Liebig, Martin. Die gefühlte Lesbarkeit.

[INT2] http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head

Introduction | What was the task all about?

Step 1 | Doing it all with the float-property.

Step 2 | Doing it all with the position-property.

But before we go there, I’d like to hint at a section of the website Impressive Webs that deals with CSS Basics. And hereby is meant: The Deeper Aspects of CSS Basics for those who want to dive in. Very recommended read, indeed!

Now for the list (in the form of a list itself):

• CSS Layout and Positioning Techniques
  looks a bit oldfashioned but lists a large number of valuable resources
• 9 Timeless 3 Column Layout Techniques
  hopefully includes at least one of the techniques we used in class
• CSS Layout Techniques
  is an extensive page about, well, CSS layout techniques
• 20 Super Techniques For CSS Page Layouts
  looks a bit stuffed but is nevertheless quite valuable

Hopefully, this will guide you along the paths of CSS based layouts.

Das war also das Poster, das Sie erstellt hatten und wir in der Session noch einmal in Photoshop nachgemacht haben. Für alle, die die wichtigsten Grundlagen von Photoshop CS 4 noch einmal in aller Ruhe wiederholen möchten, sei auf die Serie Learn Photoshop CS4 von Adobe TV verwiesen, die in vielen Episoden eben dies vermittelt.

Außerdem seien Ihnen noch folgende Websites ans Herz gelegt, mit denen man auch Collagen erstellen kann. Die sind zwar nicht so flexibel und umfangreich wie Photoshop, führen aber mitunter schneller ans Ziel, je nachdem, was man sich vorgenommen hat.

• Glogster
  insbesondere für Poster und Collagen gedacht, die Beispiele zeugen davon, wer die Zielgruppe ist
• Picnik
  Bearbeitung von Fotos, einige Collagenfunktionen
• Photoshop Express
  Angebot von Adobe mit Möglichkeiten zur schnellen Bearbeitung von Fotos
• Pixlr Editor
  Versuch eine Art Photoshop als Web App aufzubauen, u.a. mit Ebenen, Malwerkzeugen, Auswahl, Filter etc.

Als Quellen für Bildmaterial hatte ich der Session folgende Wege angesprochen:

• Google Erweiterte Bildersuche
  Unter Weitere Optionen können Sie Einschränkungen bzgl. der Nutzungsrechte machen.
• Flickr Creative Commons
  listet alle Bilder, die mit einer Creative Commons Lizenz versehen sind.
• stock.xchng
  Freie Bilder aller Arten

Wichtig ist bei allen Bilderquellen, dass man sich dennoch um die Nutzungsrechte kümmern muss, falls man Bilder wiederveröffentlichen will.