Anleitung für einen digitalen Adventskalender – Finale + JavaScript

Der finale Kalender. Dieses Mal mit etwas JavaScript. Scrollt man 10 Pixel nach unten, öffnen sich die aktiven Türchen.

Auch in diesem Jahr bieten wir euch jeden Tag Wissenswertes rund um Webstandards, Barrierefreiheit, Tools, Usability oder SEO. Neben der Kalender-Ansicht könnt ihr auch eine »traditionelle« Artikel-Liste des Adventskalenders nutzen.

  1. Responsive Images

    Optimiert für Groß und Klein

    von Christoph Zillgens am 1.12.2012

    Responsive Webdesign macht seit geraumer Zeit die Runde. Während sich langsam Best Practices und sinnvolle Techniken etablieren, gibt es einen Bereich, der etwas kniffliger zu lösen ist: Die Rede ist von Responsive Images – reaktionsfähigen Bildern, für die an einer HTML-Erweiterung gearbeitet wird.

  2. Adobe Brackets

    Ein Webeditor für Webworker?

    von Matthias Slovig am 2.12.2012

    Mit Brackets geht Adobe neue Wege in Sachen Quellcodeeditoren fürs Web. Die Live Preview macht es unnötig, die Seite im Browser ständig neu zu laden. Per Quick Edit lässt sich CSS direkt in der HTML-Datei bearbeiten. Die neuen Ansätze könnten die tägliche Arbeit eines jeden Webworkers erleichtern.

  3. Build-Tool für Webworker

    (Bessere) Projekt-Pakete schnüren mit Grunt

    von Frederic Hemberger am 3.12.2012

    Mit Grunt gibt es ein neues Tool, das hilft, wiederkehrende Aufgaben in Frontend-Projekten zu automatisieren. Einmal konfiguriert ist das Testen und Ausliefern selbst bei umfangreichen Projekten problemlos möglich – und eignet sich so auch für die gemeinsame Entwicklung in Teams.

  4. Techniken zur Schriftglättung

    Vom Vektor zum Pixel: Rasterizer

    von Gerrit van Aaken am 4.12.2012

    Digitale Fonts sind meist aus Vektoren aufgebaut. Um diese auf dem pixelbasierten Bildschirm darzustellen, muss sich das Betriebssystem etwas einfallen lassen. Die verschiedenen sogenannten Rasterizer von Windows, OS X und Co. setzen dabei unterschiedliche visuelle Schwerpunkte.

  5. CMS

    ProcessWire

    von Michael van Laar am 5.12.2012

    Webdesigner, die möglichst schnell vom HTML-Dummy zu einer funktionierenden Website gelangen wollen, sollten einen Blick auf das CMS ProcessWire werfen. ProcessWire ist zwar noch nicht sehr verbreitet. Doch es besticht durch seine Reduktion aufs Wesentliche und seine große Flexibilität.

  6. Adobe Fireworks - Plädoyer für den Einsatz mediengerechter Software

    Arbeiten am Rande der Effizienz

    von Olaf Gleba am 6.12.2012

    Obgleich alleine der Name der Software Adobe Photoshop kaum Zweifel daran lässt, welchen Anwendungsbereich der Hersteller für die Software vorsieht, wird sie von vielen Webworkern kurioserweise für das grafische Design von Webanwendungen eingesetzt. Auch wenn mit Fireworks vom selben Anbieter eine dezidierte Software für diesen Aufgabenbereich angeboten wird. Ein pointierter Einblick in den Alltag eines freiberuflichen Designers.

  7. CSS-Modularisierung mit Sass

    Komplexe Stylesheets strukturieren

    von Mathias Schäfer am 7.12.2012

    Sass ist eine Meta-Sprache, mit der sich CSS cleverer schreiben lässt. Das neue Sass-Feature der Platzhalter-Selektoren macht insbesondere komplexes CSS wartbarer.

  8. HTML5

    Kleiner Fallstrick bei Videos

    von Jens Grochtdreis am 8.12.2012

    Mit dem eigenen Video-Element sollten in HTML5 alle Probleme gelöst sein, die wir mit Flash jemals hatten. Doch so ganz stimmt das leider nicht.

  9. SEO vs. Usability

    Gemeinsam klappt es besser

    von Stefan David am 9.12.2012

    Von Seiten der Webentwickler gibt es oftmals Vorbehalte gegen die Arbeit von Suchmaschinenoptimierern. Das angespannte Verhältnis zwischen den beiden und die ggf. unterschiedlichen Sichtweisen zeigten sich z. B. bei einem aus Usabilitysicht misslungenen Relaunch und der nachfolgenden Diskussion. Ein Plädoyer für die verbesserte Zusammenarbeit – statt die Gräben zu vertiefen.

  10. Icon Fonts

    Visuelle Semantik neu entdecken

    von Henry Zeitler am 10.12.2012

    Icons sind, wenn richtig eingesetzt, bedeutungsvoll und intuitiv. Sie führen den Benutzer einer Website zur gewünschten Aktion und sind somit ein wichtiger Blickfang. Heute, in Zeiten der Optimierung für Mobile-Devices und besonders des Responsive Webdesigns erfahren die Icons als Fonts eine Renaissance.

  11. CSS3 Flexbox

    Ablösung für Float-Layouts

    von Stephan Heller am 11.12.2012

    Mehrspaltige Designs setzen Webworker heutzutage mit Floats um. Das mag sich in Zukunft ändern. Denn mit dem CSS3-Modul Flexbox steht eine nützliche Alternative in den Startlöchern. HTML-Elemente können damit spalten- oder zeilenweise angezeigt werden, die Reihenfolge der Elemente lässt sich steuern und Breiten oder Höhen passen sich automatisch an.

  12. Erweiterungen für Adobe Fireworks

    Noch schneller und effektiver designen

    von Michel Balzer am 12.12.2012

    In der letzten Woche haben wir euch Fireworks fürs Webdesign ans Herz gelegt. Heute gibt es einen Nachschlag. Es geht darum, den Funktionsumfang von Fireworks mit Erweiterungen zu verbessern.

  13. Authoring Tool Accessibility Guidelines 2.0

    Barrierefreiheit fürs Backend

    von Kerstin Probiesch am 13.12.2012

    Barrierefreiheit ist mehr als äußerliche Kosmetik. Auch die inneren Werte zählen – nicht nur Webseiten und Webapplikationen sollten barrierefrei sein, sondern auch die Werkzeuge und Redaktionssysteme, mit denen sie erzeugt werden. Mit der ATAG 2.0 reift dafür eine Richtlinie heran.

  14. Frontendentwicklung

    Stets zu Diensten: Yeoman

    von Ralf Graf am 14.12.2012

    Moderne Frontendentwicklung benötigt viele Bibliotheken und Werkzeuge. Yeoman verspricht, diese als installierbare Pakete zugänglich zu machen und in einen einheitlichen Workflow zu packen.

  15. Sublime Text 2

    Ein Texteditor zum Verlieben

    von Matthias Mees am 15.12.2012

    »Aller Anfang ist schwer« – das gilt auch für Texteditoren. Sublime Text 2 ist grundsätzlich einfach gehalten, aber leicht erweiterbar. Er versucht, den Einstieg mit ein paar interessanten Bedienkonzepten zu erleichtern, die das mühsame Erlernen und Verinnerlichen von Tastaturkürzeln leichter machen sollen.

  16. Client-Server-Kommunikation mit Socket.io

    Wenn’s mal wieder schneller gehen muss…

    von Frederic Hemberger am 16.12.2012

    Will man Informationen möglichst in Echtzeit zwischen Client und Server austauschen, kann das Nachladen von Inhalten in Intervallen mittels Ajax zu unpraktisch sein. Eine einfache, aber vielseitig einsetzbare Methode bietet Socket.io.

  17. Meinung: Ausnahmen von Best Practices

    Darf man nicht? Darf man wohl!

    von Nicolai Schwarz am 17.12.2012

    Geht nicht! Gibt’s nicht! Darf man nicht! Bei bestimmten Themen weiß jeder Webworker reflexartig, was sich gehört und wie man es richtig macht. Alles andere ist böse! Darf das HTML oder CSS vielleicht auch mal nicht validieren? Darf ein Webworker target="_blank" nicht doch benutzen? Darf er nicht? Doch, darf er. Wenn er einen guten Grund dafür vorweisen kann.

  18. Der heutige Artikel wird im Laufe des Vormittags veröffentlicht.

  19. Dieses Türchen öffnet sich erst am 19. Dezember.

  20. Dieses Türchen öffnet sich erst am 20. Dezember.

  21. Dieses Türchen öffnet sich erst am 21. Dezember.

  22. Dieses Türchen öffnet sich erst am 22. Dezember.

  23. Dieses Türchen öffnet sich erst am 23. Dezember.

  24. Dieses Türchen öffnet sich erst am 24. Dezember.

Dieser Adventskalender nutzt CSS3-Transitions. Der Effekt funktioniert in allen modenen Browsern, aber »natürlich« nicht im Internet Explorer 8 oder 9 (dort werden aber die Titel angezeigt und die Links funktionieren auch).

Illustration: »Floral-Ribbon Christmas Tree« von fangol, via sxc.hu.