Duolingo hat sich das ehrgeizige Ziel gesetzt, das gesamte Internet in mehrere Sprachen zu übersetzen. Gleichzeitig ermöglicht die Website Millionen von Menschen eine neue Sprache zu lernen – kostenlos.

Hier das (sehr schöne) Erklärungsvideo ein TED-Talk über dieses spannende Konzept:

Im Moment befindet sich Duolingo noch in der Private-Beta Phase, doch es werden laufend Invites ausgeschickt. Ich selbst habe mich bereits registriert, um Spanisch zu lernen. Eine großartige Idee mit viel Potential.

Aus diesem Anlass habe ich den Artikel nocheinmal ausgegraben und werde ihn hier auch online verfügbar machen. Hier die gekürzte Fassung, die in Druck geht. Um den vollständigen Text inklusive Quellen zu lesen, lade das Original PDF herunter.

THE FUTURE OF ONLINE FORMS – new ways with HTML5

Webformulare sind eine harte Nuss. Doch der neue HTML5 Standard bietet einige interessante Lösungen, um dem User optimal beim Ausfüllen zu assistieren und dem Entwickler Zeit und  Nerven zu sparen.

Seit der ersten Veröffentlichung der HTML5 Spezifikation im Januar 2008 hat das W3C zahlreiche neue Elemente vorgestellt, darunter bis dato auch 13 neue Typvarianten des <input> Tags. Wurden bis jetzt die meisten Formulare hauptsächlich aus Text-Inputs konstruiert, so ermöglicht HTML5 eine sehr viel genauere Definition der erwarteten Daten, was einige Vorteile mit sich bringt.

Ein Beispiel eines neuen Inputs ist etwa das lang erwartete email-Feld, dass ohne weiteren Code eine zulässige Emailadresse erkennen kann. Auch Eingabemöglichkeiten, die bereits zum guten Ton gehören, bislang aber nur über ‘UI-Plugins’ möglich waren, wie zB. Slider und Date- oder Colorpicker, werden vertreten sein. Andere Varianten sind ‘number’, ‘tel’ oder ‘url’ – ihre Funktionsweise ist weitgehend selbsterklärend. All diese Elemente haben gewissermaßen eine direkt eingebaute Validierung und verhindern bei einem Fehler das Absenden des Formulars.

Um unterschiedliche Zustände der Formularfelder zu erkennen und behandeln, sind im ‘UI Module’ von CSS3 einige neue Pseudo-Klassen vorgesehen. Die wichtigsten sind ‘valid’, ‘invalid’ und ‘required’ – Sie ermöglichen entsprechendes Styling der Felder in Echtzeit und geben dem User somit Feedback über seine Eingaben.

Um dem User den Umgang mit Formularen zusätzlich zu erleichtern, wurden einige Attribute geschaffen, die den Aspekt der Usability verbessern sollen. ‘autofocus’ etwa setzt den Cursor bereits zu Beginn in das erste Eingabefeld, das ‘placeholder’-Attribut ermöglicht den Einsatz von Platzhaltertext, der Auskunft über die erwarteten Daten gibt und beim Ausfüllen verschwindet.

Die genauere Spezifikation der Eingabefelder bringt auch im Bereich der mobilen Endgeräte Vorteile in der Usability mit sich. Moderne Android- und iOS-Browser unterstützen bereits viele der neuen Inputs. Bringt der User ein solches Eingabefeld in den Fokus, wird ihm automatisch eine angepasste Version des Tastenfeldes angeboten – handelt es sich etwa um ein Emailfeld, sind eigene Tasten für ‘@’ und ‘.’ reserviert, bei URLs gibt es Tasten für Slash und ‘.com’. iPhone, Blackberry und einige Android Smartphones stellen bei HTML5 Inputs wie dem Datepicker zudem ihr eigenes Userinterface zur Verfügung, und zeigen bei Bedarf etwa Informationen aus dem Kalender.

Weiters geht mit einer verbesserten Semantik auch eine Steigerung der Accessability einher. Screenreader und andere Werkzeuge profitieren von der detailierten Auszeichnung der Formulare und können effektivere Hilfestellung leisten.

Viele der Neuerungen im Bereich von Webformularen können bereits heute Anwendung finden. Obwohl die Umstellung auf HTML5 und die Unterstützung des vollen Funktions-umfangs wohl noch einige Zeit auf sich warten lassen werden, entstehen durch den Einsatz der Technologie schon jetzt viele Vorteile. Besonders im Bereich der mobilen Endgeräte wie Smartphones oder Tablets kann eine deutliche Verbesserung erzielt werden. Noch ist für eine wirklich konsistente Oberfläche in allen Browsern zwar der zusätzliche Gebrauch von Scriptlösungen nötig, doch werden in Zukunft  zweifelsohne immer mehr Entwickler auf die neuen Möglichkeiten zurückgreifen – und so langsam aber sicher einen neuen Standard etablieren.

Über die Jahre habe ich wirklich schon mit einigen Leuten aus diesem Umfeld gearbeitet, wohl aus dem einfachen Grund, dass diese Leute einen Großteil meines Freundeskreises ausmachen. Über die Musik, die Lokale und die Stadt selbst bin ich zu dem Hobby gekommen, das sich letztendlich in meinen (Traum?)Beruf entwickelt hat. Ich schätze ich bin STP dafür wohl zu Dank verpflichtet.

Hier das Interview. (Autor: Mag. Werner Harauer)

—————————————-

Die Szene in Pixel verdichten

Eine lebendige Szene erschöpft sich nicht in guten Locations und zahlreichen Bands. Ohne adäquate Medien, kundige Nerds und Geschichtenerzähler, welche die Szene mit Wörtern und Bildern erklären können, wird diese nie Bestand haben. Max Böck ist einer jener Künstler, die sowohl auf der Bühne als auch am Computer die Rock-Geschichte weiter erzählen.

City-Flyer: Was kann ein gutes Corporate Design? Kann es zum Beispiel einen schlechten Club besser machen?

Max Böck: Ein gutes CD vermittelt nonverbal den richtigen Eindruck und ist vor allem stimmig. Durch die Optik wird sehr viel unterbewusst kommuniziert. Gutes Design kann dann in manchen Fällen sogar vortäuschen, dass etwas besser ist als es vielleicht zutrifft. Ein super-fancy Designclub mit schlechter Musik wird sich aber trotzdem nicht lange halten.

CF: Du entwirfst Webseiten und Plakate für Künstler. Reich kann man davon nicht werden. Hast du eine soziale Ader, oder unterstützt du die Künstler aus einem anderen Grund?

Max: Ich habe ja nicht nur Künstler als Kunden Ich arbeite aber sehr gern mit ihnen, weil in solchen Projekten meistens mehr Platz für Kreativität und eigene Ideen ist als bei der Arbeit für ein Unternehmen. Als Grafiker ist man es üblicherweise gewohnt, die Vorstellungen des Kunden umzusetzen – Es ist also nicht ganz uneigennützig, mit Künstlern zu arbeiten, die einem größtenteils freie Hand lassen.

CF: Du wohnst in Wien und hast am SAE Technology Institute Wien studiert. Zuvor hast du am BORG St. Pölten maturiert. Verbindet dich noch etwas mit der St. Pöltner Szene? Besuchst du noch Events in St. Pölten?

Max: Mit St. Pölten verbindet mich hauptsächlich die Musik. Ich habe viele Freunde in der Musikerszene und bin auch selbst noch aktiv als Sänger bei der Band Exarch dabei. Auch wenn ich in Wien lebe, komme ich doch halbwegs regelmäßig “nach Hause” und besuche eine Session im Underground oder ein Konzert im frei.raum.

CF: In welcher Szene fühlst du dich am wohlsten?

Max: Zwangsläufig wohl die Musikerszene, weil der Großteil meines Freundeskreises aus Musikern besteht. Viele Leute kenne ich noch aus BORG Zeiten oder aus der einen oder anderen Band – und in St. Pöltens Bierlokalen trifft man sich sehr schnell. Ich denke, so hat sich wohl auch mein Künstler-Klientel entwickelt

CF: Jede Jugendkultur hat ihre eigene Bildsprache. Einen Techno-Flyer kann der Eingeweihte sofort von einem Indie-Flyer unterscheiden, selbst wenn noch kein Text am Flyer steht. Auch in der Typographie unterscheiden sich die Flyer. Hast du eine Idee, wie diese Differenzierung entsteht?

Max: Jedes Genre verwendet unterschiedliche Elemente, in der Musik wie im Design. Je nach Charakter der Musik ist auch die Bildsprache hart oder weich, monochrom oder bunt. Zusätzlich gibt es in jeder Subkultur einen gewissen inoffiziellen ‘Styleguide’, was Motive oder Typographie betrifft. In Metal-Artworks etwa sind kaum Einhörner und Regenbögen vertreten.

CF: Konnte sich eine “Flyer-Kunst” im Kulturbetrieb bereits etablieren? Wird sie einmal denselben Stellenwert bekommen wie die Plakatkunst?

Max: Ich habe den Eindruck, dass bei uns nicht so viel Wert darauf gelegt wird wie in anderen Ländern. In England und Amerika zum Beispiel sind Gigposter und Flyer viel mehr künstlerisches Statement als reiner Informationsträger. In Österreich sieht man davon leider sehr wenig. Ich würde es toll finden, wenn sich eine ähnliche Szene auch bei uns etabliert.

CF: Ich habe den Eindruck, dass seit Facebook & Co. die Flyer an Bedeutung verloren haben und immer lustloser gestaltet werden. Wie siehst du das?

Max: Die Veranstaltungen auf Facebook bringen Informationen viel schneller und direkter an die Leute. Flyer und Plakate sind nicht mehr der erste Weg, über den man von einem Event erfährt – vielleicht haben sie deshalb etwas an Qualität eingebüßt. Meiner Meinung nach kann man aber gerade deshalb mit gut gestalteten Medien besser aus der Masse herausstechen.

CF: Techniker haben den Ruf, recht trockene Leutchen zu sein. Bei Grafikern wiederum hat man schnell das Bild des Freaks im Kopf. Du bist Techniker und Grafiker. Wie wirkt sich das auf deine Persönlichkeit aus?

Max: Dann bin ich wohl ein trockener Freak. Für mich sind beide Seiten interessant, weil sie unterschiedliche Fähigkeiten ansprechen. Ich bin gerne kreativ, aber ich denke auch viel darüber nach, wie sich etwas praktisch umsetzen lässt.

CF: Was macht dir mehr Spaß? Die Tätigkeit als Webentwickler oder die als Grafiker?

Max: Die Tätigkeit als Grafiker ist für mich eine schöne Abwechslung, wenn ich tagelang am Quellcode einer Website gebastelt habe. Design ist viel freier und ungezwungener als Programmierarbeit und macht daher meistens mehr Spaß. Aber ich freue mich genauso über eine gut gelungene Website.

CF: Ich bedanke mich für das Interview.

Mit dem Update der Site kommen zwei große Änderungen, auch wenn man beide auf den ersten Blick vielleicht nicht sieht.

1. Die gesamte Seitenarchitektur wurde kleingehackt, eingeschmolzen und auf Basis von WordPress 3 neu in Form gegossen. Damit macht das alte CMS nun Platz für den Profi. Das erleichtert mir das uploaden neuer Projekte und ermöglicht Späße wie diesen Blog – Gehört ja auch schon zum guten Ton heute.
2. Angeregt durch das Thema meiner Bakk-Arbeit habe ich in den letzten Monaten viel über Responsive Webdesign gelernt. Dieser (halbwegs junge) Trend in der Webentwicklung nutzt flexibles CSS und Media Queries, um Websites zu bauen, die sich an das jeweils verwendete Endgerät (Smartphone, Tablet, etc) anpassen und so für alle Displaygrößen optimiert sind. Ziemlich fein, hab ich mir gedacht, und meiner neuen Site eine ordentliche Dosis davon verpasst. Das Endresultat kann man am besten begutachten, wenn man auf einer der Seiten das Browserfenster verkleinert.

Das wars schon. Der Rest sind kleine kosmetische Änderungen und ein Spritzer State-of-the-Art 2011. Alles Gute, Version 4.0! Long may you reign.

___________________
¹ Aus nostalgischen Gründen habe ich die Startseiten der frühen Versionen dieser Site aufgehoben. Hier sind v1 (2008), v2 (2009) und v3 (2009).