Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Adventskalender 2011

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.

Vorschau auf einen Relaunch

von Nicolai Schwarz am 24.12.2011

Der diesjährige Adventskalender neigt sich dem Ende, da wirft die nächste größere Aktion bereits ihre Schatten voraus. Unter der Haube kann webkrauts.de nicht mehr mit dem Stand der Technik mithalten. Hinter dem heutigen Türchen erwartet euch daher ein Vorgeschmack auf den nötigen Relaunch. Nicolai Schwarz lädt ein zu einem ersten Blick in die Zukunft von webkrauts.de. |  Kommentare: 17

Bauen wie die Ameisen

von Matthias Mees am 23.12.2011

Das HTML5 Boilerplate liefert nicht nur eine sinnvolle Vorlage, um zeitgemäße Webseiten zu entwickeln, es gibt Webentwicklern auch ein Werkzeug, diese optimiert auszuliefern. Matthias Mees erklärt, was das build-Skript leistet. |  Kommentare: 2

Dreimal CSS4 zum Mitnehmen

von Sandra Kallmeyer am 22.12.2011

Advent, Advent, ein Lichtlein brennt. Erst 1, dann 2, jetzt 3, bald 4, steht neues CSS vor der Tür. Lange bevor CSS3 als Standard verabschiedet wird, brüten schlaue Köpfe dessen Nachfolger aus. Sandra Kallmeyer zeigt drei CSS4-Tricks, die bereits jetzt einsetzbar sind. |  Kommentare: 8

Ein Blick durch den Viewport

von Patrick Lauke am 21.12.2011

Es ist gar nicht so einfach, Webseiten auf mobilen Geräten auch wirklich so anzeigen zu lassen, wie Webworker das wollen. Handys und Tablets haben mitunter ihre ganz eigenen Vorstellungen davon, wie eine Webseite gerendert werden sollte. Patrick Lauke erklärt, wie Layouts auf mobilen Geräten berechnet werden – und wie Webworker diese Prozesse beeinflussen können. |  Kommentare: 7

CSS 3 im Praxistest: Transition

von Stephan Heller am 20.12.2011

CSS 3 bietet verschiedene Optionen, die Darstellung im Browser lebendig zu machen, zu dynamisieren. Neben »Animations« und »Transforms« sind »Transitions« (Übergänge) die einfachste Möglichkeit, das Layout mit optischen Effekten zu versehen. Stephan Heller hat die CSS-Eigenschaften rund um »Transition« unter die Lupe genommen, getestet, was in der Praxis funktioniert und wo die Vor- und Nachteile liegen. |  Kommentare: 14

CSS3 PIE | Dekoratives mit und ohne CSS3

von Henry Zeitler am 19.12.2011

Mit Schlagschatten, runden Ecken und Verläufen können Webworker ihre Seiten durch einfache CSS3-Anweisungen hübscher gestalten. Doch es gibt immer noch alte Browser, die CSS3 nicht verstehen können, und den Internet Explorer, der es nicht verstehen will. Um nicht ganz auf die neuen Möglichkeiten verzichten zu müssen, haben sich Lösungen wie CSS3 PIE etabliert, die zumindest dem IE mit Javascript auf die Sprünge helfen können. Henry Zeitler zeigt, was hinter CSS3 PIE steckt. |  Kommentare: 6

Zwei, die zusammengehören: SEO und Informationsarchitektur (Teil 2)

von Michael van Laar am 18.12.2011

Die Suchbegriffe, auf die eine neue Website optimiert werden soll, stehen fest. Jetzt geht es an die Umsetzung. Im zweiten Teil des Adventskalender-Artikels über SEO und Informationsarchitektur zeigt Michael van Laar, wie aus Suchbegriffen und Inhaltsideen ein suchmaschnenoptimierter und angenehm zu bedienender Internetauftritt wird. |  Kommentare: 3

Zwei, die zusammengehören: SEO und Informationsarchitektur (Teil 1)

von Michael van Laar am 17.12.2011

Suchmaschinenoptimierung (SEO) ist eng mit der inhaltlichen und technischen Struktur einer Webseite verbunden. Daher ist die Entwurf- oder Relaunch-Phase eines Internetauftritts der ideale Zeitpunkt, um die Grundlagen dafür zu legen. In diesem zweiteiligen Artikel zeigt Michael van Laar, wie Webworker SEO-Dienstleistungen in ihre Projekte integrieren können. |  Kommentare: 3

CodeKit – Der Alleskönner unter den Tools für Frontendentwickler

von Michael Kühnel am 16.12.2011

Michael Kühnel stellt mit CodeKit eine Software vor, die euch bei moderner Frontendentwicklung unterstützt. Sie kompiliert LESS, Sass, Stylus sowie CoffeScript, überprüft Javascript nach Fehlern, komprimiert Bilder, fügt Dateien zusammen, lädt das Browserfenster automatisch neu und vieles mehr. |  Kommentare: 5

Schnelltest zur Barrierefreiheit

von Kerstin Probiesch am 15.12.2011

Tests auf Barrierefreiheit sind umfangreiche Unterfangen. Nicht immer ist so viel Zeit und je nach Situation geht es erstmal nur um eine grobe Einschätzung. Kerstin Probiesch stellt einen Schnelltest vor, der weitgehend mit Bordmitteln durchgeführt werden kann. |  Kommentare: 7

Webworking unter Linux

von Sandra Kallmeyer, Matthias Mees, Moritz Gießmann am 14.12.2011

Webworking ohne Adobe-Produkte, fernab von Mac OS und Windows – geht das überhaupt? Die Linux-Fans unter den Webkrauts, Matthias Mees, Sandra Kallmeyer und Moritz Gießmann, wissen: Ja, es geht. Und stellen die passenden Tools vor. |  Kommentare: 11

Serverseitiges JavaScript mit node.js

von Ralf Graf am 13.12.2011

JavaScript hat sich in den letzten Jahren eindrucksvoll als Skriptsprache für Webbrowser etabliert. Doch ist die Sprache keineswegs auf clientseitige Anwendungen beschränkt. Ralf Graf stellt heute node.js vor: eine serverseitige Implementation von JavaScript, die ideal für anspruchsvolle Multi-User- und Echtzeit-Web-Anwendungen geeignet ist. |  Kommentare: 5

Der aktuelle Stand der Dinge im Mobile Web Development

von Manuel Bieh am 12.12.2011

In den letzten Jahren hat sich im mobilen Internet viel getan. Spätestens durch das Release des iPhones erkannten mehr und mehr Unternehmen wie prestigeträchtig eine Präsenz im mobilen Web sein kann. Seitdem erschienen eine ganze Menge weiterer leistungsfähiger Geräte und auch die Art und die Techniken, mobile Webseiten zu entwickeln, hat sich rasant verändert. Manuel Bieh wirft einen Blick auf den Stand der Dinge in der Entwicklung für mobile Endgeräte. |  Kommentare: 2

schema.org: Sieht so das Web 3.0 aus?

von Henry Zeitler am 11.12.2011

Jeden Tag werden allein in Deutschland weit über 100 Millionen Suchanfragen nur bei Google gestartet. Die ausgelieferten Ergebnisse basieren auf komplizierten Algorithmen, mit denen die Suchmaschine zwar die Relevanz einer Zeichenkette berechnen kann, deren Sinn ihr aber verborgen bleibt. Die Idee des Semantic Web und der weltweiten Vernetzung von Daten aufgrund ihrer Bedeutung ist jetzt über elf Jahre alt. In Zukunft könnte schema.org die passende Grundlage bieten. Henry Zeitler wirft einen Blick in die Sterne. |  Kommentare: 8

YQL-Bildergalerie als WordPress-Plugin

von Michael Grosch am 10.12.2011

Gestern hat Michael Grosch beschrieben, wie ihr mit Hilfe von YQL eine Galerie mit Bildern von Flickr oder Picasa Web Albums erstellt. Heute verwandelt er diese Funktionalität in ein WordPress-Plugin. |  Kommentare: 0

SELECT Bilder FROM Flickr OR PicasaWebAlbums WITH YQL FOR Bildergalerie

von Michael Grosch am 09.12.2011

Was tun, wenn Entwickler Gegner von doppelter Daten- bzw. Bilderhaltung sind, ihnen aber die Zeit fehlt, sich eingehend mit den APIs von Flickr und Picasa Web Albums zu beschäftigen? Michael Grosch zeigt, wie sich mit Hilfe der Yahoo! Query Language (kurz YQL) eine einfache Galerie aus Bildern von Flickr oder Picasa Web Albums erstellen lässt. |  Kommentare: 2

CSS3 im Praxistest: Multi-column Layout

von Stephan Heller am 08.12.2011

Das mehrspaltige Layout ist eine spannende Neuerung des CSS3-Standards. Mit nur wenigen CSS-Anweisungen können Webworker Texte ansprechend gestalten. Stephan Heller zeigt die theoretischen Möglichkeiten und hinterfragt die Praxistauglichkeit: Was ist möglich und wo liegen die Grenzen? |  Kommentare: 5

Mobile Usability – Gebrauchstauglichkeit für unterwegs

von Michael Jendryschik am 07.12.2011

Usability gilt als ein entscheidendes Qualitätsmerkmal und trägt stark dazu bei, ob eine mobile Webseite oder Anwendung angenommen oder abgelehnt wird. Eine gute Benutzeroberfläche hält gewisse Design-Prinzipien ein, die darauf basieren, wie Menschen denken und arbeiten. Michael Jendryschik bietet sechs Richtlinien an, deren Einhaltung die Usability einer mobilen Webseite oder Anwendung entscheidend verbessert. |  Kommentare: 4

Geschenke für Geeks

von Nicolai Schwarz am 06.12.2011

In einigen Ländern findet die Bescherung bereits heute, am Nikolaustag, statt. Hierzulande dauert es noch ein paar Tage, bis es Geschenke gibt. Zeit genug, noch das ein oder andere Präsent zu besorgen. Wir haben etliche Geschenketipps für Geeks und Nerds zusammengestellt. |  Kommentare: 3

Effiziente CSS-Entwicklung mit Sass und Compass (Teil 2)

von Mathias Schäfer am 05.12.2011

Im zweiten Teil über Sass und Compass stellt Mathias Schäfer die fortgeschrittenen Sprachtechniken vor. Die CSS-Werkzeuge bieten einen Komfort, den CSS ohne Hilfsmittel vermissen lässt. Mit Sass und Compass lässt sich umfangreicher Code strukturieren und CSS3 browserübergreifend einsetzen. |  Kommentare: 11

Effiziente CSS-Entwicklung mit Sass und Compass (Teil 1)

von Mathias Schäfer am 04.12.2011

Das Erstellen und Warten umfangreicher Stylesheets ist aufwändig und zeitraubend. Mathias Schäfer stellt die CSS-Werkzeuge Sass und Compass vor, die die Produktivität entscheidend verbessern. |  Kommentare: 6

One Button to rule them all

von Stephan Zavodny am 03.12.2011

Manche HTML-Elemente werden eher spärlich eingesetzt und fristen ein regelrechtes Nischendasein. Dazu zählt auch das unterschätzte <button>. Stephan Zavodny schlägt eine Bresche für dieses Allroundtalent und zeigt Lösungen für grafische und nicht-grafische Buttons. |  Kommentare: 9

Konzentriert und strukturiert Texten

von Ralf Graf am 02.12.2011

Ralf Graf findet, dass Webworker den zarten Trend in der Textverarbeitung weg von Word und Co. hin zu einfachen Textformaten aufgreifen und die Ablösung der ungeliebten so genannten »WYSIWYG«-Editoren in CMS und Web-Anwendungen fördern sollten. |  Kommentare: 16

Wireframes für Startseiten

von Ansgar Hein am 01.12.2011

Für die einen sind es Klickmodelle, für die anderen Mock-Ups und wieder andere nennen sie Wireframes. Die Rede ist von statischen oder dynamischen Grobkonzepten einer Webseite oder von Teilbereichen. Ansgar Hein zeigt Euch am praktischen Beispiel, wie Ihr Wireframing für ein Startseiten-Konzept einsetzt. |  Kommentare: 5