Adventskalender 2014

Zum krönenden Abschluss

Welches CMS ist das Beste?

von mehreren Autoren am 24.12.2014

Hinter dem letzten Türchen in unserem Adventskalender wartet die eierlegende Wollmilchsau auf ihren Auftritt. Wir haben die Webkrauts gefragt: »Welches Content-Management-System ist denn nun das benutzerfreundlichste, einfachste, größte, beste?« | Kommentare: 33

Einführung in React

Web-Komponenten in Javascript erstellen

von Ralf Graf am 23.12.2014

Die Modularisierung in wiederverwendbare Komponenten ist ein beliebter Ansatz aus der Softwareentwicklung, der mit der zunehmenden Komplexität von Web-Anwendungen auch in der Web-Entwicklung üblich wird. Als Alternative zur »amtlichen« W3C-Lösung Web Components ist Facebooks React eine leistungsfähige Javascript-Lösung zur Erstellung von Komponenten. | Kommentare: 0

Vektorgrafik: Schere schneidet ein Herz aus

Scalable Vector Graphics

Mehr als Logos und Icons

von Nicolai Schwarz am 22.12.2014

Vektorgrafiken werden immer häufiger im Web eingesetzt. Allerdings beschränkt sich das oft noch darauf, Logos oder Icons einzubauen. Dabei verfügen SVG über eine ganze Reihe nützlicher Funktionen, die Webworker noch lange nicht ausgereizt haben. Zum Beispiel bietet uns Text in SVG Möglichkeiten, die uns über reines CSS nicht zur Verfügung stehen. | Kommentare: 10

Responsive Webdesign

Tabellen, die sich anpassen

von Jens Grochtdreis am 21.12.2014

Tabellen können sehr komplex werden. Oft sind sie schon an Deskptop-Rechnern unübersichtlich. Doch wie gehen wir mit ihnen in responsiven Projekten um und bereiten ihre Inhalte sinnvoll für kleine Bildschirme auf? | Kommentare: 2

Barrierefreie PDF-Dateien

Weg mit dem Adobe-Umfließen-Modus!? Teil 2

von Kerstin Probiesch am 20.12.2014

Der Adobe-Umfließen-Modus ist eine besondere Hürde, wenn es darum geht, PDF barrierefrei zu gestalten. Dabei stellt sich die Frage, welche Bedingungen gemäß WCAG 2.0 und BITV 2.0 überhaupt erfüllt sein müssen? Und was bedeutet das für vertragliche Regelungen? | Kommentare: 5

Weißes »#FFF« mit Schlagschatten auf weißem Hintergrund

Barrierefreie PDF-Dateien

Weg mit dem Adobe-Umfließen-Modus!? Teil 1

von Kerstin Probiesch am 19.12.2014

Das heutige Artikeltürchen unseres Adventskalenders steht ganz im Zeichen eines Stoßseufzers zum »Adobe-Umfließen-Modus«. Kerstin Probiesch schreibt über Irrungen und Wirrungen bei der Nachbearbeitung von PDF-Dateien. | Kommentare: 1

Schematische Darstellung einer Vermaßung verschiedener Gerätegattungen

MediaQueryList-Objekt und conditioner.js

Responsive Content

von Christian Schaefer am 18.12.2014

Responsive Webdesign gehört heute zum guten Ton, und so gut wie alle frisch ins Netz gestellten Seiten schmücken sich mit entsprechenden Fähigkeiten. Meist ist damit gemeint, dass das Layout sich dank CSS-Mediaqueries an seine Umgebung anpasst. Was viele darüber vergessen ist, dass auch die übersendeten Inhalte an das Zielgerät angepasst werden wollen. CSS alleine kann das nicht leisten. Wir zeigen euch, wie ihr mit Hilfe von JavaScript auch eure Inhalte responsiv passend ausliefert. | Kommentare: 6

Eher unbekannte CSS-Funktionen

Was Spannendes, was zum Spielen, aber leider keine Schokolade!

von Sascha Postner am 17.12.2014

Auch für erfahrene CSS-Jongleure gibt es vereinzelt noch Kniffe zu entdecken, die das Leben erleichtern können. Drei eher unbekannte Funktionen rund um CSS findet ihr im heutigen Adventskalendertürchen. | Kommentare: 2

Noch mehr Continous Integration fürs Frontend

Acht Wege zur stetigen Qualitätskontrolle – Teil 2

von Sebastian Golasch am 16.12.2014

Schnelles Copy-Paste, krude Fixes, offene Tasks oder kaum kommentierter Code. Es gibt viele Stellen, die Korrekturen und Verbesserungen vertragen könnten. Dafür müsst ihr euren Code nicht Zeile für Zeile durchwühlen, denn glücklicherweise gibt es ein paar Tools, die euch dabei unterstützen. | Kommentare: 7

Continous Integration fürs Frontend

Acht Wege zur stetigen Qualitätskontrolle – Teil 1

von Sebastian Golasch am 15.12.2014

Die Projekte werden immer komplexer, auch im Frontend. Da reichen ein Vier-Augen-Prinzip oder der extra abgestellte Entwickler nicht mehr aus, um die Qualität des Codes sicherzustellen. Stattdessen bieten sich einige Tools an, mit denen ihr euren Code automatisiert, einfach und zeitsparend kontinuierlich überprüfen könnt. | Kommentare: 0

id vs. class

Don’t use ids in selectors!? – Ein Web-Mythos

von Stephan Heller am 14.12.2014

Gelegentlich hört oder lest ihr die Empfehlung, doch bitte keine ids im CSS zu verwenden. Als Gründe werden die Wiederverwertbarkeit, Performance oder der schwierige Umgang mit der Spezifität genannt. Dabei kommt es nur darauf an, ids richtig zu verwenden! | Kommentare: 49

Selbstbildnis von Rembrandt aus dem Jahr 1663

Webdesign im Alter

Silvercodes’R’us

von Nils Pooker am 13.12.2014

Die Adventszeit dient nicht nur der Erinnerung an die Omas und Opas, die man vor Jahren liebevoll im Heim abgegeben hat. Die Webkrauts präsentieren heute den ultimativen Leitfaden für Silvercoder. Sofern Ihr schon zur Generation Ü45 gehört, geben wir euch wertvolle Tipps und Infos, wie ihr mit der modernen Webentwicklung Schritt halten könnt. | Kommentare: 2

ownCloud und Webmail-Software für mehr Sicherheit

Die eigene Wolke

von Johannes Ries, Nicolai Schwarz am 12.12.2014

Wer Dateien mit anderen teilen möchte, setzt gerne auf Dropbox. Teams arbeiten per Google Docs gemeinsam an Dokumenten. Und auch Google Mail erfreut sich großer Beliebtheit. Alle Services sind etabliert und einfach zu bedienen. Doch ist es wirklich nötig, die Daten auf Servern im Ausland zu hinterlegen? | Kommentare: 14

Neue CSS-Eigenschaft zur Steuerung der Performance

will-change und der Compositor Layer

von Henry Zeitler am 11.12.2014

Animationen auf einer Webseite wirken erst so richtig elegant, wenn sie mit einer Rate von 60 Frames pro Sekunde laufen. Grafische Operationen auf diesem hohen Niveau sind aber wiederum extrem rechenintensiv und müssen deshalb gut vorbereitet werden. Zu diesem Zweck wollen Googles Performance-Gurus Entwicklern ein neues Werkzeug an die Hand geben: die CSS-Eigenschaft will-change. | Kommentare: 0

ARIA 1.0, HTML5 und der Weg zur Barrierefreiheit

Ein Attribut für eine Live-Region

von Jan Hellbusch am 10.12.2014

Es ist im barrierefreien Webdesign wichtig, dass Nutzer dynamische Veränderungen wahrnehmen können. Am Bildschirm gibt es dafür genügend Möglichkeiten, die Veränderungen zu verdeutlichen. Screenreadernutzer stehen hier gleich vor zwei Problemen, die aber beide mit einem einzigen Attribut gelöst werden können. | Kommentare: 0

Web Components

Das Web der Zukunft

von Peter Kröner am 09.12.2014

Bisher sind Webentwickler an die vorgegebenen HTML-Tags und Attribute gebunden. Mit Web Components ändert sich das: Webworker können damit eigene Tags entwickeln, mit komplexen Funktionen versehen und in sicher gekapselte Komponenten verpacken. Für Frontend-Entwickler entsteht so ein nützliches HTML-Plugin-System. | Kommentare: 12

CSS-Quiz

Teste Dich selbst – wie gut ist Dein CSS-Know-How?

von Stephan Heller am 08.12.2014

Heute gibt es die nächste Überraschung im Adventskalender der Webkrauts: Ein Quiz! Kennst du dich bei den CSS-Eigenschaften aus? Weißt du, was in CSS 3 neu dabei ist? Oder erkennst du falsche Schreibweisen? Die Webkrauts fordern dich mit 12 Fragen für Fortgeschrittene heraus. Viel Spaß! | Kommentare: 15

Kommandozeilentools vs. grafische Interfaces

Keine Angst vor dem Terminal

von Matthias Mees am 07.12.2014

Von einigen gefürchtet, von anderen geliebt: die Kommandozeile. Sie gilt in Zeiten grafischer Benutzeroberflächen eigentlich als veraltet, ist aufgrund ihrer Flexibilität und Mächtigkeit aber immer noch Bestandteil moderner Betriebssysteme. Warum also solltet ihr tippen, wenn ihr auch klicken könnt? | Kommentare: 3

Mixtape für Webworker

13 Songs für den Feierabend

von Johannes Ries am 06.12.2014

Eine echter Adventskalender bringt Überraschungen mit sich. Heute gibt es was auf die Ohren. Mit dem Mixtape für winterliche Feierabende. | Kommentare: 0

Demonstration eines responsiven Bildes auf unterschiedlichen Endgeräten.

picture und srcset

Der neue Standard für responsive Bilder

von Jens Grochtdreis am 05.12.2014

Bilder machen den Großteil des Übertragungsvolumens einer Webseite aus. Es ist deshalb eine große Herausforderung, eine Lösung für die responsive Einbindung von Bildern zu finden und damit die Ladezeiten für mobile Endgeräte zu verbessern. Die Lösung bilden das neue srcset-Attribut und das neue picture-Element. | Kommentare: 28

Infografik, Weltkarte, Deutschland hervorgehoben

Interaktive Visualisierungen: Touchscreen, Performance und Barrierefreiheit

Mobile-First-Datenvisualisierung II

von Mathias Schäfer am 04.12.2014

Der Aufstieg der Mobilgeräte bringt neue technische Grundlagen mit sich. Nach den grundsätzlichen Überlegungen zur Datenvisualisierung gilt es, diese für die mobile Nutzung zu optimieren. Was gibt es im Rahmen von Touchscreens, Performance und Barrierefreiheit zu beachten? | Kommentare: 0

Interaktive Visualisierungen für alle Geräte entwickeln

Mobile-First-Datenvisualisierung I

von Mathias Schäfer am 03.12.2014

Das mobile Internet ist seit Jahren auf dem Vormarsch und hat in einigen Bereich bereits die Nutzung durch stationäre Computer überholt. Damit müssen Webseiten umso mehr auch auf kleinen Bildschirmen funktionieren und sich nicht nur per Maus, sondern auch per Touch bedienen lassen. Welche Konsequenzen hat das für die Datenvisualisierung? | Kommentare: 1

Styleguide-Generator Hologram

Living Styleguides

von Olaf Gleba am 02.12.2014

In einem Webprojekt ist die konsistente Entwicklung und Pflege der Code-Basis immer eine große Herausforderung für alle Teammitglieder. Der Einsatz und die konsequente Nutzung eines Living Styleguides als zentrale Schaltstelle der Entwicklung kann das Team hierbei entscheidend unterstützen. Mit dem Styleguide-Generator Hologram integriert ihr solch einen Living Styleguide einfach in euren Workflow. | Kommentare: 5

Gemälde von Andreas Achenbach: stürmische Hafeneinfahrt, 1850

Best Practice Projektmanagement

Der Projektverlauf aus dem Bilderbuch

von Nils Pooker am 01.12.2014

Durch moderne Browser auf unzähligen, immer wieder neuen Ausgabegeräten mit unterschiedlichen Bildschirmgrößen haben sich auch die Anforderungen an das Projektmanagement responsiver Webseiten drastisch verändert. Wir geben euch Tipps, wie ihr ein Web-Projekt plant, konzipiert, gestaltet, entwickelt und betreibt, so dass dabei weder Zeit oder Budget überschritten werden noch die Qualität leidet. | Kommentare: 7