Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Adventskalender 2012

Seit 2005 ist es gute Tradition auf webkrauts.de jedes Jahr aufs neue einen Adventskalender mit interessanten Themen aus dem Webbereich zu füllen. Es sind alle Themen vertreten, die Webworkern das Herz höher schlagen lassen. Von CSS3 und SASS über Wireframes und Tools hin zu SEO, Barrierefreiheit und dem mobilen Web.

Startbereich einer Rennstrecke in einem Sport-Stadion

Tipps für Berufsanfänger

Start frei

von mehreren Autoren am 24.12.2012

Aller Anfang ist schwer. Zum Ausklang des Adventskalenders haben wir deshalb in diesem Jahr ein paar Ratschläge und Ideen für Berufsanfängern gesammelt. Webkrauts antworten auf die Frage: »Welchen Tipp hast du für Webworker, die gerade neu im Beruf anfangen / eine Ausbildung machen?« |  Kommentare: 1

Illustration: Weihnachtsbaum mit Geschenken vor grauem Hintergrund

Tutorial: Digitaler Adventskalender

Türchen für Türchen

von Nicolai Schwarz am 23.12.2012

Ab und zu lohnt sich ein Blick hinter die Kulissen. Dazu reißen wir heute unseren eigenen Adventskalender auseinander. Wie steht es mit Inhalten, Usability und Barrierefreiheit? Wie reagiert der Kalender in einem Responsive Design? Wie sehen Alternativen und Ergänzungen für eure eigenen Kalender im nächsten Jahr aus? |  Kommentare: 5

Aufgeblätterte Seiten in einem alten Buch

Open Access

Barrierefreie Wissenschaft?!

von Kerstin Probiesch am 22.12.2012

Open Access ist sicherlich kein klassisches Webworker-Thema, geht es doch hauptsächlich um den freien Zugang zu wissenschaftlichen Dokumenten. Wissenschaftliche Werke, Forschungsergebnisse usw. stehen jedoch nicht isoliert von den Websites, auf denen sie sich befinden. |  Kommentare: 0

Logo: Backbone.js

Komplexen JavaScript-Code strukturieren

Web-Applikationen mit Backbone.js

von Konstantin Käfer am 21.12.2012

Bei der Strukturierung von JavaScript-basierten Web-Applikationen hilft Backbone.js: nach dem Baukasten-Prinzip können Webworker verschiedene Komponenten erstellen – vom einfachen Tab-View bis zur komplexen Single-Page-Application. |  Kommentare: 1

Logo webEdition

CMS

webEdition

von Michael Grosch am 20.12.2012

Content-Management-Systeme gibt es mittlerweile für die unterschiedlichsten Anforderungen. Allerdings sind darunter nur wenige, die Entwicklern auf einfache Weise volle Kontrolle über den Quellcode gewähren. webEdition ist eines dieser Systeme. |  Kommentare: 5

Zweimal das Wort »Webtypo« in weiß auf grünem Grund

Webtypografie und hochauflösende Bildschirme

Retina-Bildschirme und das Pixel als Maßeinheit

von Gerrit van Aaken am 19.12.2012

Wie hat sich der marktübliche Schriftgrad im Webdesign im Laufe der Jahre verändert, und wie hängt das mit den immer hochauflösenderen Bildschirmen zusammen? Die modernen Retina-Displays lassen uns ganz neu über Skalierbarkeit und die Sinnhaftigkeit des Pixels als Grundlage allen Screendesigns nachdenken. |  Kommentare: 28

Vier Finger markieren Punkte auf einem Touchscreen

Touch-Events

Webseiten zum Anfassen

von Patrick Lauke am 18.12.2012

Touchscreens auf Handys, Tablets und touch-fähigen Laptops eröffnen Entwicklern ganz eue Interaktions-Möglichkeiten. In dieser Einführung schauen wir uns die Grundlagen zur JavaScript-seitigen abhandlung von Touch-Events an. |  Kommentare: 1

Zettel mit dem Text »Baumängel« vor Holzbrettern

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. |  Kommentare: 21

Tachometer

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. |  Kommentare: 0

Logo: Sublime Text 2

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. |  Kommentare: 13

Logo: Yeoman

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. |  Kommentare: 2

Fußgängerweg, zu Beginn steht »Look« mit Pfeilen nach links und rechts

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. |  Kommentare: 1

Tachometer-Nadel zeigt auf das Fireworks-Logo

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. |  Kommentare: 0

Regal für Briefe (Post Box), angeordnet in 2 Reihen und 4 Spalten

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. |  Kommentare: 9

Screenshot: Icons von IcoMoon

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. |  Kommentare: 10

zwei Paar Füße unter einer roten Bettdecke

SEO vs. Usability

Gemeinsam klappt es besser

von Stefan David am 09.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. |  Kommentare: 25

Alte Kino-Filmrolle

HTML5

Kleiner Fallstrick bei Videos

von Jens Grochtdreis am 08.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. |  Kommentare: 5

Logo: Sass. (style with attitude)

CSS-Modularisierung mit Sass

Komplexe Stylesheets strukturieren

von Mathias Schäfer am 07.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. |  Kommentare: 10

Illustration: Photoshop-Logo durchgestrichen, daneben das Fireworks-Logo

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

Arbeiten am Rande der Effizienz

von Olaf Gleba am 06.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. |  Kommentare: 12

Logo: ProcessWire. Build Bigger, Faster, Stronger, Easier

CMS

ProcessWire

von Michael van Laar am 05.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. |  Kommentare: 0

Weiße, aufgerasterte Schrift auf einem grünen Hintergrund

Techniken zur Schriftglättung

Vom Vektor zum Pixel: Rasterizer

von Gerrit van Aaken am 04.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. |  Kommentare: 6

Logo: Grunt

Build-Tool für Webworker

(Bessere) Projekt-Pakete schnüren mit Grunt

von Frederic Hemberger am 03.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. |  Kommentare: 3

Brackets Logo über dem Startbildschirm

Adobe Brackets

Ein Webeditor für Webworker?

von Matthias Slovig am 02.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. |  Kommentare: 4

Zwei Beispielbilder in groß und klein

Responsive Images

Optimiert für Groß und Klein

von Christoph Zillgens am 01.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. |  Kommentare: 8