Toluu

Webkrauts

Für ein besseres Web

Gute Vorsätze für das neue JahrJanuary 1

Wir werden nicht müde zu betonen, dass sauber strukturierter Quelltext im Rahmen der Webstandards deine Webseite nach vorne bringen. Im Rahmen des Adventskalenders 2008 haben wir erklärt, wie ihr durch eine einheitliche Arbeitsweise im Team bedeutend effizienter arbeiten könnt.

Worauf genau ihr dabei achten müsst, zeigt euch die Aktion Code Responsibly. In dem Appell an Webentwickler geht es um folgend einfach zu erlernende Grundsätze:

• Konzentriere dich aufs Lernen.
• Konzentriere dich auf Barrierefreiheit.
• Konzentriere dich auf Performance.
• Konzentriere dich auf Semantik.
• Konzentriere dich auf Validierung.
• Konzentriere dich auf Wartbarkeit.
• Konzentriere dich auf Zusammenarbeit.
• Konzentriere dich auf Dokumentation.
• Konzentriere dich auf Qualität.
• Konzentriere dich aufs Unterrichten.

So kann das Jahr 2009 auf jeden Fall voll durchstarten! Alles Gute und guten Code!

Die Webkrauts wünschen sich was für 2009December 31 2008

In diesem Webkrauts Team-Up zum 31. Dezember werfen wir einen Blick in die Zukunft des Webs, bzw. stellen uns eine eigene Wunschliste zusammen. Wir haben die Webkrauts gefragt: Welche Tools, Neuerungen, Denkweisen würden das Web(design) im kommenden Jahr wirklich voran bringen?

Webstandards? Die größere Baustelle sind die Mailstandards

HTML gibt's nicht nur im Web, auch Mails kann man als HTML verschicken. Hier hat man durchaus den Eindruck, dass ständig Rückschritte gemacht werden: Outlook 2007 beispielsweise verwendet unter anderem »aus Sicherheitsgründen« Word als Rendering-Engine für HTML-Mails. Was spricht gegen eine vernünftige Browser-Rendering-Engine in allen E-Mail-Clients nur ohne JavaScript-Unterstützung und Verzicht auf einige möglicherweise kritische Elemente - bspw. object? Wer schonmal einen HTML-Newsletter bauen durfte, der in einer Vielzahl von Mail-Clients funktionieren musste, unterschreibt diese Forderung sofort.

Stefan Walter ist seit 1999 professionell als Webdesigner- und entwickler tätig. Er arbeitet derzeit bei IBM Internet Security Systems in Kassel als Webentwickler.

Eine neue Denke

Ich glaube 2009 sollten wir vor allem für eine neue Denkweise sorgen, nicht mehr mit dem erhobenen Zeigefinger durch die Welt laufen und überwiegend kritisieren, sondern positive Beispiele für gute, moderne Webentwicklung geben, die auch wirkliche Probleme lösen kann. Wir sollten vermitteln, dass modernes Webdesi

Der Webkrauts-Jahresrückblick 2008December 26 2008

26. Türchen des Webkrauts-Adventskalenders

Was hat sich in diesem Jahr im Netz getan? Wir haben die Webkrauts gefragt: Welcher Trend, welches Ereignis, welches Produkt hat Dich 2008 besonders beeindruckt?

JavaScript-Performance-Gewinne

Mich haben vor allem die Fortschritte in Sachen JavaScript-Performance (SqirrelFish, TraceMonkey und V8) beeindruckt. Und obwohl bereits teilweise Steigerungen um bis zu 1000% erreicht sind, scheint das noch nicht das Ende zu sein.
Damit kann zukünftig mit noch komplexere Web-Anwendungen mit umfangreicheren Echtzeit-Funktionen gerechnet werden, wie sie heutzutage hauptsächlich im Desktop-Bereich anzutreffen sind.

Markus Wulftange

Datenschmutz?!

Wenn ich auf das Jahr 2008 zurückblicke, denke ich sofort an die öffentliche Debatte um Datenschutz. Das Internet und seine Gewächse waren für mich mehr als zuvor im Hinblick auf die »richtige Nutzung« in den Massenmedien zu finden. Ob in Talkrunden, in den Nachrichten oder den vielen politischen und gesellschaftsbeobachtenden Magazinen:

Sensibilisierung im Umgang mit Daten, besonders im Internet, war großes Thema und besonders Seitenbetreiber, aber auch Entwickler und Designer machten sich neue Gedanken. Die Frage, die ich mir dabei stelle ist, ob das ein günstiger Zug war, auf den die Zeitungen und Fernsehanstalten aufsprangen, oder ob wirkliches Informationsinteresse die Motivation war, welches nicht beim »nächsten Eisbär

Schneller Layoutcheck mit Firebug und jQueryDecember 25 2008

25. Türchen des Webkrauts-Adventskalenders

Insbesondere, wenn man seine Schriftgrößen nicht in Pixel definiert, kann man sich nicht immer sicher sein, ob sich nicht Schriftgrößen ungewollt multipliziert haben oder ob man richtig umgerechnet hat. Denn im Normalfall verlangt ein Designer/Kunde ja eine Schriftgröße in einer Pixelgröße, nicht in “bitte gut lesbar”. Ich habe für solche und ähnliche Fälle die Firebug-Konsole zusammen mit jQuery besonders schätzen gelernt. Mit jQuery kann ich in bekannter und gewohnter CSS-Syntax meine Zielobjekte selektieren, die Konsole zeigt mir die Ergebnisse. Es gibt hierfür prinzipiell drei Wege:

1. Direkteingabe der Anweisungen in der Firebug-Konsole
2. Notierung der Anweisungen in der betreffenden HTML-Datei
3. Notierung der Anweisungen einer externen Javascript-Datei

Die Auswahl des Vorgehens ist Geschmackssache. Gegen die erste Variante, die Direkteingabe in die Firebug-Konsole, spricht in meinen Augen, daß diese Art des Debuggings meist der Beginn eines Prozesses ist. Es folgen also Anpassungen und wiederholte Überprüfungen. Es wäre mir lästig, immer die gleichen Anweisungen in die Konsole einzutippen. Kopiere ich sie aus einer Datei in die Konsole, kann ich auch gleich kosnequenter eine

Vier CSS3-Tricks für sauberes HTMLDecember 24 2008

24. Türchen des Webkrauts-Adventskalenders

Nichts ist mühsamer als sich durch den HTML-Code zu hangeln, nur weil man die Präsentation eines Elements ändern will. Eine der wichtigsten Herausforderungen des modernen Webdesigns ist es, das HTML richtig hinzubekommen und das heißt so simpel wie möglich bei gleichzeitig hohem semantischen Wert. Neue Browsergenerationen bieten uns mit besserer CSS-Unterstützung neue Möglichkeiten ohne Veränderungen am Markup die visuelle Gestaltung zu beeinflussen. Eine Beispiel-Seite zeigt Anwendungsmöglichkeiten.

1. Externe Links

Um externe Links auszuzeichnen kann man sehr einfach den Attribut-Selektor in CSS3 benutzen:

a[href^='http://'] { padding-right: 17px; background: url(extern.png) right no-repeat; } a[href^='http://www.webkrauts.de'], a[href^='http://webkrauts.de'] { padding-right: 0; background: none; }

Der erste Selektor sucht alle externen Links heraus und versieht sie mit einem Hintergrundbild. Absolute Pfade auf die eigene Domain müssen dann noch zurückgesetzt werden. Dies kann man auch für E-Mail-Links verwenden, wenn man ganz pfiffig sein will sogar mit Bild für den einzelnen Adressaten:

a[href^='mailto:'] { padding-right: 15px; background: url(mail.png) right no-repeat; } a[href^=