Adventskalender 2013

Buchtipps

Pflichtlektüre für Webworker

von mehreren Autoren am 24.12.2013

Zum Abschluss des diesjährigen Adventskalenders haben wir die Webkrauts gefragt: »Wenn du jeden Webworker zwingen könntest, ein Fachbuch zu lesen: Welches wäre das?« | Kommentare: 10

Einstieg in Scrum und Kanban – Teil 2

Wenn sich Kunde und Auftraggeber einig sind und auf einen agilen Prozess einlassen, stellen sich automatisch einige Fragen: Wie funktioniert das System nun im realen Projekt? Wie lässt sich diese Umsetzung kalkulieren? Und wie wird das im Vertrag festgehalten? | Kommentare: 0

Einstieg in Scrum und Kanban – Teil 1

Agile Ideen für Webentwickler

von Bernhard Welzel am 22.12.2013

Bei größeren Webprojekten kann es schwierig, sogar hinderlich sein, im Voraus festzulegen, was am Ende wirklich benötigt wird. Agile Entwicklungsmethoden bieten einen anderen Ansatz: Mit wenigen Regeln und einem iterativen Vorgehen sollen die Projekte flexibler und einfacher werden. Methoden und Ideen wie Sprints, User Stories und Kanban Board eignen sich auch für kleinere Teams und Projekte. | Kommentare: 4

Animationen mit CSS und JavaScript

Nicht ins Stocken geraten

von Daniel Rauber am 21.12.2013

Animationen können ein nützliches Werkzeug sein, um Interaktionen zu fördern und Informationen leichter verständlich zu machen. Doch wo viel Licht ist, ist auch viel Schatten. Ruckelnde Animationen mit geringer Framerate beeinträchtigen die Usability und wirken sich oft negativ auf das Nutzerverhalten aus. Mit ein, zwei Tricks könnt ihr die Performance der Animationen verbessern. | Kommentare: 0

Junge hält verzweifelt die Hände vor den Kopf

Was heutzutage alles in den head muss – Teil II

More Over<head>: Social Media

von Andreas Weiß, Frederic Hemberger am 20.12.2013

Tagtäglich posten Millionen Nutzer etliche Links in den sozialen Netzen. Es heißt, allein auf Facebook werden alle zwanzig Minuten eine Million Links geteilt. Grund genug, die eigene Website für Social Media herzurichten. Mit Hilfe der passenden Meta-Tags. | Kommentare: 5

Was heutzutage alles in den head muss – Teil I

Over<head>

von Andreas Weiß, Frederic Hemberger am 19.12.2013

René Descartes sagte einmal »Denn es ist nicht genug einen guten Kopf zu haben; die Hauptsache ist ihn richtig anzuwenden«. Auch wenn Descartes nicht viel mit dem Internet anfangen konnte, gilt diese Weisheit auch für Websites. Was gehört also wirklich in einen guten Kopf einer Website? | Kommentare: 8

Pointer-Events für Maus, Stylus und Touchscreen

Drei unter einem Dach

von Patrick Lauke am 18.12.2013

Um Interaktionen über einen Touchscreen zu berücksichtigen, müssen Entwickler oft separaten Code für Maus- und Touch-Events schreiben. Im Internet Explorer 10 wurde mit Pointer-Events ein komplett umgedachtes Modell eingeführt: Damit ist es möglich, Interaktionen über Maus, Stylus oder Touchscreen in einem Event zusammenzufassen. | Kommentare: 0

Syntax-Highlighter

Zeile für Zeile

von Nicolai Schwarz am 17.12.2013

Wer als Webworker für Online-Magazine oder sein eigenes Blog schreibt, wird früher oder später auch Code-Beispiele bringen. Der Quelltext ließe sich schlicht mit code und pre auszeichnen. Heutzutage darf sich ein Autor aber durchaus die Mühe machen, seinen Code etwas sinnvoller zu präsentieren – zum Beispiel mit Syntax Highlighting. | Kommentare: 8

Bower Package Manager

Der Workflow lernt fliegen

von Henry Zeitler am 16.12.2013

Ein neues Projekt steht an. Für die Web-Applikation wird Modernizr, jQuery, normalize.css und Handlebars sowie das jQuery Plugin lazyload benötigt. Die Komponenten sucht sich der Frontendler auf den einzelnen Webseiten oder Github zusammen und lädt die neusten Versionen in den Projektordner. Eine nach der anderen, so wurde das früher gemacht. Heute gibt es Bower, ein Open-Source-Projekt von Twitter. Und Bower macht das mit nur einem Befehl im Terminal. bower install... | Kommentare: 0

Usability-Experte bespricht Wireframes einer Website mit Kundin (© itemis AG)

Usability Engineering: Benutzerzentrierte Analysen in der Praxis

Durch die Brille des Nutzers II

von Michael Jendryschik am 15.12.2013

Die benutzerzentrierte Analyse hilft dabei, Websites und Web-Anwendungen so zu gestalten, dass sie nützlich und effizient sind. Die notwendigen Informationen werden über Interviews mit den Benutzern erhoben – das kann aufwendig sein. Für gewöhnliche Websites genügt es, auf eigene Erfahrungen zurückzugreifen, diese sollten aber vernünftig erfasst und hin und wieder mit echten Nutzern abgeglichen werden. | Kommentare: 2

Usability Engineering: Arbeiten mit Nutzungsanforderungen

Durch die Brille des Nutzers I

von Michael Jendryschik am 14.12.2013

Um interaktive Systeme mit hoher Usability zu entwickeln, ist es notwendig, die Nutzungsanforderungen zu kennen und in geeignete technische Lösungen umzusetzen. Dabei ist es sehr einfach, an die richtigen Anforderungen zu gelangen: Man stellt Nutzern die richtigen Fragen und hört aufmerksam zu. | Kommentare: 2

Francisco de Goya: »Der Schlaf der Vernunft gebiert Ungeheuer« (Ausschnitt), 1798

Kolumne

Tage wie dieser

von Nils Pooker am 13.12.2013

Wie sieht der normale Tag eines selbstständigen Webdesigners aus? Darauf können auch wir pauschal keine Antwort geben. Klar ist nur, dass öde Routine nur selten dazugehört. Oft sind es die kleinen Tücken der Projektarbeit, die für ereignisreiche Stunden am Rechner sorgen. Heute gewährt uns Nils Pooker einen Blick in den Ablauf eines nicht ganz ernst gemeinten »Worst-Case-Arbeitstages«. | Kommentare: 11

SASS für ältere IE nutzen

Eine Extrawurst für oldIE

von Jens Grochtdreis am 12.12.2013

Die alten Internet Explorer bis Version 8 haben viele Techniken nicht implementiert, die Webworker heute gerne und oft nutzen. In solchen Fällen kann der Präprozessor SASS hilfreich sein, um den alten IE – ohne viel zusätzliche Arbeit – eine Extrawurst zu braten. | Kommentare: 16

Verschiedene mobile Formularansichten übereinander gelegt

HTML5

Formulare für mobile Geräte optimieren

von Stephan Heller am 11.12.2013

Für das input-type-Attribut sieht HTML5 viele neue Werte vor. Mit der Wahl des richtigen Wertes wird auf mobilen Geräten die passende Tastatur »getriggert«. Durch kleine Anpassungen im HTML wird die Usability von Formularen auf iPad & Co so deutlich verbessert. | Kommentare: 15

CSS-Präprozessoren

Struktur und Organisation in SASS-Projekten

von Olaf Gleba am 10.12.2013

Alle Webworker, die CSS-Präprozessoren wie SASS nutzen, müssen sich die Frage beantworten: »Wie organisiere ich meine Dateien, um mir das (Arbeits-)Leben so einfach wie möglich zu machen?« Wer als Antwort auf diese Frage irgendwo das Ei des Kolumbus vermutet, wird erstaunt sein über die Vielfalt der Ansätze. | Kommentare: 12

Gerätesensoren per Javascript und CSS nutzen

Ambient Light Responsive Webdesign

von Kai Laborenz am 09.12.2013

Responsive Websites können nicht nur auf die Änderung des Browserfensters reagieren – auch die Umgebungshelligkeit kann die Gestaltung beeinflussen. Mit Javascript lassen sich entsprechende Sensoren abfragen und für das Design nutzen. | Kommentare: 11

Drei Checkboxen mit drei unterschiedlichen Zuständen

Einstieg in ARIA 1.0 – Teil II

Tri-State-Checkbox: Mit Tastatur und Screenreader bedienbar

von Jan Hellbusch am 08.12.2013

Mit ARIA 1.0 können fortgeschrittene Steuerelemente für Screenreader barrierefrei gemacht werden. Insbesondere müssen die Tastatursteuerung und Semantik berücksichtigt werden. Wie eine konkrete Umsetzung aussehen kann, zeigt das Beispiel einer Tri-State-Checkbox. | Kommentare: 8

Einstieg in ARIA 1.0 – Teil I

Das role-Attribut: Worauf es ankommt

von Jan Hellbusch am 07.12.2013

Für Webworker bedeutet es immer eine Herausforderung, dynamische Anwendungen mit Barrierefreiheit in Einklang zu bringen. ARIA 1.0 (Accessible Rich Internet Applications) will diese Lücke schließen. Mit dem role-Attribut bietet ARIA dazu ein mächtiges Werkzeug. Allerdings muss dieses auch richtig eingesetzt werden, damit Tastatur- und Screenreader-Nutzer etwas davon haben. | Kommentare: 3

Kolumne

Like A Rolling Webdev

von Matthias Mees am 06.12.2013

Eine Zeit lang war kaum ein (englischsprachiger) Artikel über Webentwicklung zu lesen, in dem nicht mindestens einmal der Begriff »Rockstar Web Developer« erwähnt wurde. Natürlich gehört dieser Begriff zu den üblichen, aus unserer Sicht übertriebenen, Metaphern solcher Artikel – aber ist vielleicht doch etwas dran? Wie viel Rock ’n’ Roll steckt eigentlich in den üblichen Rollen eines typischen Webworker-Teams? | Kommentare: 7

Contenterstellung für SEO

Von Keywordspam zu guten Inhalten

von Stefan David am 05.12.2013

Websites bestehen nicht nur aus Technik im Front- und Backend sondern auch aus Inhalten – zumindest sollte das so sein; wozu gäbe es sonst die Website? Aber wie müssen diese Inhalte beschaffen sein, um die Suchmaschinenoptimierung der Website zu unterstützen? Und das nicht nur kurzfristig, sondern möglichst nachhaltig? | Kommentare: 21

Die mobile Ansicht bei Entertainment Weekly zeigt komplexe Menüstrukturen

Navigation im responsive Design – Teil II

Komplexe Mobil-Navigation mit und ohne Javascript

von Renate Hermanns am 04.12.2013

Bei Websites mit vielen Inhalten werden auch die Navigationen umfangreicher. Ein großes Menü, das auf dem Desktop optisch anspruchsvoll ausklappt, wirkt auf einem SmartPhone aber überladen und störend. Für solch komplexen Menüs braucht es also andere Lösungen im mobilen Bereich. | Kommentare: 1

Die responsive Navigation gehört heute zwingend in die Planung eines Webauftritts

Navigation im Responsive Design – Teil I

Einfaches Dropdown oder elegantes Styling

von Renate Hermanns am 03.12.2013

Eine moderne Website berücksichtigt mobile Endgeräte. In vielen Fällen setzen Webworker dafür auf CSS3-Media-Queries, bekannt unter dem Begriff »Responsive Design«. Auch die Navigation wäre einfach mit CSS zu gestalten, gäbe es da nicht das Problem mit der Hover-Funktion auf Touchscreen-Geräten. Wer für die mobile Navigation einfach nur die geschachtelte Liste des Menüs sichtbar macht, sorgt für Benutzerfreundlichkeit. Ein optischer Leckerbissen ist das aber nicht. Glücklicherweise gibt es Alternativen. | Kommentare: 5

Websites abdichten

Mehr Sicherheit im Frontend durch HTTP-Header

von Frederic Hemberger am 02.12.2013

Die Sicherheit von Webseiten wird von vielen Frontend-Entwicklern gerne als »Backend-Thema« abgeschoben – zu Unrecht, wenn man bedenkt, dass die meisten Angriffe das Einschleusen von Schadcode über das Frontend voraussetzen. Auch wenn es immer Mittel und Wege geben wird, die Sicherheit von Webseiten zu kompromittieren, kann potentiellen Angreifern mit einfachen Handgriffen ihre Arbeit deutlich erschwert werden. | Kommentare: 11

Geschichten erzählen mit modernen Webtechniken

Interactive Storytelling

von Mathias Schäfer am 01.12.2013

Mit modernen Webtechniken lassen sich beeindruckende multimediale Präsentationen erstellen. Aus Text, Bildern, Daten, Audio- und Video-Elementen entstehen so spannende Geschichten und Welten, die Leser interaktiv entdecken können. Die grundlegenden Techniken eignen sich auch für kleinere Projekte. | Kommentare: 10