Adventskalender 2015

Gelber Würfel mit Fragezeichen auf jeder Seite

Quiz

Du denkst, du kennst CSS?

von Stephan Heller am 24.12.2015

Der Webkrauts-Adventskalender bietet hinter dem letzten Türchen ein kleines Extra zum Feste: Ein neues Quiz mit elf Fragen für CSS-Profis. Vorsicht: Die Fragen haben es in sich. Rechnet nicht damit, alle elf aus dem Stand beantworten zu können! | Kommentare: 0

Mathematische Funktionen mit Sass

Zurück zu den Wurzeln

von Gunnar Bittersmann am 23.12.2015

Mit Sass könnt ihr mathematische Funktionen wie Wurzelziehen umsetzen. Wir zeigen euch anhand einer Bildergalerie, wozu das nützlich ist und wie ihr euch geschickt dem Wert für die Wurzel nähert. | Kommentare: 7

Schild mit Text: »Clean Up or You're Out!«

Browser und Webstandards

Die kurzfristige Lösung von heute ist der Müll von morgen

von Christian Heilmann am 22.12.2015

Mit der Veröffentlichung von Microsoft Edge als dem neuen Windows-Browser ist in diesem Jahr die letzte Bastion der nicht-standardbasierten Desktopbrowser gefallen. Zeit, die Besen rauszuholen, hinter die Ecken zu kucken und im Web aufzuräumen. | Kommentare: 3

CSS

Blend-Modes

von Sven Wolfermann am 21.12.2015

Ein oft genutztes Stilmittel bei Ebenen-Kompositionen in Photoshop sind so genannte »Blend-Modes« – eingedeutscht: »Mischmodi«. Dabei werden zwei Ebenen anhand von unterschiedlichen mathematischen Farbformeln visuell miteinander verschmolzen. Diese Effekte lassen sich jetzt auch in CSS einsetzen. | Kommentare: 1

JavaScript

Die absoluten Grundlagen funktionaler Programmierung für absolute Anfänger

von Peter Kröner am 20.12.2015

In der imperativen Programmierung besteht ein Programm aus einer Folge von Anweisungen, die in der Regel Variablen verändern – das ist die bekannte Methode. Bei der funktionalen Programmierung bestehen Programme ausschließlich aus Funktionen. Einsteiger werden oft von vielen seltsamen Fachbegriffe abgeschreckt, dabei sind die Grundlagen funktionaler Programmierung eigentlich einfach zu verstehen. | Kommentare: 2

Hand mit Stylus auf einem Wacom-Grafiktablett und Anzeige auf dem Surface-Tablet

Druck, Neigung und Rotation

Erweiterte Interaktionsmöglichkeiten mit Touchscreens

von Patrick Lauke am 19.12.2015

Dass man mittels Touch- und Pointer-Events einfache Touchscreen-Berührungen erfassen kann, ist wohl nichts Neues. Je nach Hardware-Unterstützung ist es aber möglich, über reine X- und Y-Koordinaten hinaus noch viel mehr Eigenschaften zu erfassen, etwa den Druck, was potentiell neue Interaktionsmöglichkeiten eröffnet. | Kommentare: 0

Pseudoelemente im Einsatz

Überschrift über durchgestrichener Linie

von Jens Grochtdreis am 18.12.2015

Manchmal sind es kleine Designdetails, die besonders viel Zeit in der Realisierung kosten. Ein Beispiel zeigt, wie ihr Überschriften interessanter gestaltet, ohne Grafiken zu nutzen. | Kommentare: 7

Kleine Änderungen, große Wirkung

Accessibility im Sinn

von Eric Eggert am 17.12.2015

Barrierefreiheit wird oft als zusätzliche Arbeit und schwer zu lernen beschrieben. Und überhaupt sei nur eine kleine Anzahl von Menschen betroffen. Diese Mythen haben keine logische Grundlage und sind das Ergebnis von veralteten Informationen oder Missverständnissen. | Kommentare: 4

Workflow beschleunigen mit Browsersync

Alles im Blick – Teil 2

von Olaf Gleba am 16.12.2015

Viele Entwickler nutzen bereits etablierte Entwicklungsumgebungen, um diverse Aufgaben zu automatisieren. Egal, ob ihr Gulp oder Grunt bevorzugt, Browsersync lässt sich in beide Umgebungen integrieren. | Kommentare: 0

Illustration: Bildschirm in verschiedenen Größen

Workflow beschleunigen mit Browsersync

Alles im Blick – Teil 1

von Olaf Gleba am 15.12.2015

Die Entwicklung von Webseiten und Apps beinhaltet sich ständig wiederholende Routinen: Code erstellen/ändern, Test-Eingaben in Formulare eintippen und die Ausgabe in zahlreichen Browsern und Ausgabegeräten konrollieren. Das Open-Source-Tool Browsersync beschleunigt eure Arbeit deutlich, indem es viele dieser Routinen im Hintergrund übernimmt. | Kommentare: 2

Bildmontage nach Rembrandt. Gastmahl des Belzazar

Responsive Webdesign: Probleme mit Blindtext und Platzhalterbildern

Content is lorem ipsum dolor (*hier schönes Foto)

von Nils Pooker am 14.12.2015

Blindtexte und Platzhalter für Bilder gehören seit Einführung des Desktop Publishings zum festen Bestandteil des Werkzeugkastens aller Layouter und Webdesigner, die Probleme damit ebenso. Was bei fixen Gestaltungsrastern unter Mühen noch in der Endfassung bereinigt werden konnte, sorgt bei responsiven Layouts für gravierende Probleme schon in der Planungsphase. | Kommentare: 0

Node.js

Neues aus dem Maschinenraum

von Frederic Hemberger am 13.12.2015

Zuerst erfolgte bei Node.js der großen Sprung von Version 0.12 zu 4.0, dann kam schon kurz darauf Ende Oktober die Version 5. Was ist in der Zwischenzeit passiert und wie geht es zukünftig weiter? | Kommentare: 1

Das Cascading Style Sheet Object Model

CSSOM, der heimliche Zwilling des DOMs

von Henry Zeitler am 12.12.2015

Das Document Object Model, kurz DOM, ist ein guter alter Bekannter des Developers. Es ist eine Ansammlung aus vielen Knoten und Objekten, die die Struktur und Inhalte der HTML-Elemente abbilden. Doch das DOM hat einen unbekannten Zwilling: das Cascading Style Sheet Object Model. | Kommentare: 3

Kritisch schauender Mann, Nahaufnahme des Gesichts

Kolumne

Absurditäten des Web-Alltags

von Stephan Heller am 11.12.2015

Das Leben als Freelancer bietet einen Einblick in die Arbeitsweisen verschiedener Firmen und Agenturen. Der Freelancer lernt nicht nur, mit welchen Frameworks und Tools die Firmen arbeiten, sondern auch, dass Code-Standards in jedem Betrieb anders aussehen können. | Kommentare: 16

Web Notifications für Desktop und Mobile

»Sie haben Post!« – Teil 2

von Sascha Postner am 10.12.2015

Nachdem der erste Teil die grundsätzliche Funktion von Web Notifications gezeigt hat, folgt heute ein etwas komplexeres Beispiel. Darin enthalten ist auch eine zeitversetzte Push-Benachrichtigung. | Kommentare: 0

Web Notifications für Desktop und Mobile

»Sie haben Post!« – Teil 1

von Sascha Postner am 09.12.2015

Seit einiger Zeit nimmt die Web Notifications API des W3C Fahrt auf. Anbieter wollen darüber Webseiten und -apps den Versand von Pushnachrichten ermöglichen. Die ersten Websites nutzen die API bereits. Genau der richtige Zeitpunkt, sich die neuen Möglichkeiten einmal genauer anzusehen. | Kommentare: 0

Bootstrap-B mit Heiligenschein und Teufelsschwanz

UI-Frameworks

Bootstrap – Segen oder Fluch?

von Matthias Mees am 08.12.2015

Nachdem lange Zeit CSS-Frameworks wie Pilze aus dem Boden schossen, scheint nun ein »Sieger« gefunden: Bootstrap. Für die einen ist es ein unverzichtbares Werkzeug, den anderen ist es ein Dorn im Auge. Welche Auswirkungen aber hat die Verbreitung von Bootstrap auf die Frontend-Entwicklung? | Kommentare: 9

Notizblock mit karierten Blättern / Raster

Gridlayout und Flexbox

Rasterfahndung: auf der Suche nach der besten Layouttechnik

von Florence Maurice am 07.12.2015

Bei CSS3-Layouts denkt jeder gleich an Flexbox. Speziell zur Erstellung von Layouts ist aber eigentlich vom W3C das CSS Grid Layout Module vorgesehen. Ist das aber wirklich notwendig – bietet Flexbox nicht schon alles, was das Webdesigner-Herz begehrt? | Kommentare: 17

Kleiner Storm Trooper bringt Blumen als Geschenk mit

Für jeden was dabei

Geschenktipps für Webworker

von Nicolai Schwarz am 06.12.2015

Passend zum Nikolaustag haben wir für euch zwar keine Geschenke, zumindest aber ein paar Geschenkideen. Mit etwas Glück ist hier das richtige für eure Kollegen – oder euch selbst – dabei. | Kommentare: 0

PC-Druckmenü zeigt Vorschaubild eines alten Stichs zum Buchdruck

Automatisierung und Standardisierung

Die Industrialisierung des Webdesigns – Teil 2

von Nils Pooker am 05.12.2015

Wie werden sich zunehmende Standardisierung und Automatisierung auf das Webdesign auswirken, auf das Selbstverständnis unserer Arbeit und auf das Berufbild des Webdesigners der Zukunft? Der folgende Text versucht Antworten zu geben, erneut mit Bezügen zur älteren und jüngeren Vergangenheit. | Kommentare: 9

Gemälde »Die schlesischen Weber«, K.W. Hübner, 1844

Automatisierung und Standardisierung

Die Industrialisierung des Webdesigns – Teil 1

von Nils Pooker am 04.12.2015

Nahezu wöchentlich lesen wir neue Beiträge über den Umgang mit einer Entwicklung, die immer weniger mit der klassischen Tätigkeit des Webdesigners zu tun hat, dafür aber umso mehr mit einer zunehmenden Automatisierung unserer Praxis. Was diese Entwicklung mit der industriellen Revolution des 18. Jahrhunderts zu tun hat, erläutert unserer Zweiteiler im heutigen und morgigen Türchen. | Kommentare: 2

JavaScript feiert den 20-jährigen Geburtstag

Eine kurze Geschichte von JavaScript

von Mathias Schäfer am 03.12.2015

Als JavaScript im Jahr 1995 erfunden wurde, war nicht absehbar, dass die Sprache einmal die führende Programmiersprache im Web werden würde. Umfangreiche Anwendungen im Browser, auf dem Server, dem Desktop und dem Mobilgerät sind heutzutage in JavaScript geschrieben. Wie ist es dazu gekommen, welche Schritte waren nötig und wie wird es weitergehen? | Kommentare: 0

detaillierter Projektplan, handgezeichnet auf Papier

Konzeption und Projektplanung

Erfolgreiche Websites mit Plan

von Renate Hermanns am 02.12.2015

»Diese Webseite sieht überhaupt nicht so aus, wie wir uns das vorgestellt haben.« – das möchte kein Webworker über seine Arbeit hören. Leider musste sich diesen Satz wohl jeder schon sagen lassen, der sich mit dem Aufbau und der technischen Umsetzung von Websites beschäftigt. Doch wie konnte es dazu kommen? | Kommentare: 12

Meinung

Frontendentwicklung ist nicht einfach

von Jens Grochtdreis am 01.12.2015

In vielen Agenturen und Firmen wird das Frontend von Backendentwicklern nebenher gefertigt. Dabei wird die Komplexität des Themas von vielen Verantwortlichen unterschätzt. Die Rolle des Frontends sollte aufgewertet werden. | Kommentare: 9