von Jochen Bauer

Zwei, drei oder doch vier Spalten - das ist die Frage. Oder man nutzt ein Wordpress-Theme mit Yaml-Layout und hält sich die Optionen für immer offen. Mit Yaml ändert man rund drei Zeilen Code und erhält ein neues, fertiges Layout - andere Spaltenzahl, andere Navigation, anderes Menü… Fertig bedeutet in diesem Fall auch barrierearm und standardkonform.

Mit Yaml - "yet another multicolumn layout" - einem Mehrspaltengerüst, baut man seine Seiten nach dem Top-Down-Prinzip. Ich schildere den Bau eines Wordpress-Themes auf Yaml-Basis. Das fertige Theme gibt es auch zum Download. Und spätestens mit diesem Artikel wissen Sie, an welchen Schrauben zu drehen ist.

Yaml
Seit 2005 schraubt Dirk Jesse fortlaufend an Yaml. Yaml ist ein OpenSource-Projekt mit verschiedenen Lizenzmodellen und damit ebenso für den kommerziellen Einsatz interessant. Das Framework ist sehr gut dokumentiert, ein Buch und eine rund 120-seitige Onlinedoku existieren. Aktuell ist die Version 3.0.x und seit kurzem ist das Framework auch für den englischen Sprachraum interessant. Doku und Projektdateien wurden übersetzt und erweitert. Vor einiger Zeit erschien der Yaml-Builder. Man klickt seine Wunschstruktur zusammen und lässt sich den XHTML-Code und die CSS-Anpassungen ausspucken. Yaml-Vorlagen gibt es bereits für diverse Systeme wie Typo3, xtCommerce, Drupal und viele andere.

Ausgangstheme
Wordpress, oft die bevorzugte Blogsoftware, soll nun mit einem Yaml-Layout ans Laufen gebracht werden. Auf der Webseite zum Buch "Wordpress" (Bültge, 2007) holen wir uns eine leere Themenvorlage (Version 1.2). Diese Vorlage beinhaltet die notwendigen Wordpress-Funktionen und wir verpassen ihr die Yaml-Struktur. Sowohl Wordpress als auch Yaml sind sehr flexibel, daher ist der beschriebene Weg ein sinnvoller, nicht aber der einzige, zur Wordpress-Yaml-Hochzeit.

Struktur auf dem Server
Nachdem wir Yaml und das Leertheme heruntergeladen und entpackt haben, kopieren wir den Ordner "yaml" ins Ausgangstheme, legen auf gleicher Ebene den Ordner "css" an. Danach kopieren wir in diesen Ordner alle Dateien, an welche wir Hand anlegen. Folglich wechseln wir bei einem Yaml-Update, einfach den "yaml"-Ordner aus und behalten unsere Änderungsdateien bei. Die entstandene Struktur sollte so aussehen:

Yaml im Detail
Im "yaml/core"-Ordner liegen die Kern-CSS-Dateien des Frameworks. Diese zeichnen das Basislayout aus. Bei den Slim-Varianten der Stylesheets fehlen lediglich die Kommentare und so eignen sie sich besser für den Produktiveinsatz. Der Ordner "yaml/screen" enthält die Entwürfe fürs Bildschirmlayout. Diesen Ordner kopieren wir in den von uns angelegten Ordner "css". Wir benennen die Dateien um - bei dieser Gelegenheit streichen wir das "_draft".

Die so geschaffene "basemod.css" und "content.css" sind unsere Baustelle - hier legen wir Hand an und drehen uns das Framework zurecht. Auf der höchsten Ebene liegen noch die beiden Dateien "central_draft.css" und "markup_draft.html". Die Centraldraft besteht lediglich aus einer Anweisung, die anderen CSS-Dateien zu importieren. In der Markupdraft steht der XHTML-Quelltext. Den Inhalt dieser beiden Dateien brauchen wir später. Läuft alles glatt, holt sich das Zentralstylesheet erst die "base.css" und dann die "navigation.css" aus dem yaml-Ordner, dann die "basemod.css" und die "content.css" aus unserem CSS-Ordner. Da unsere beiden Dateien nach den Basis-Sheets eingebunden werden, überschreiben unsere Anweisungen die Vorhandenen und so zeigen unsere Änderungen auch die beabsichtigte Wirkung.

Umsetzung
Im Ausgangstheme öffnen wir die "style.css" und ersetzen den Inhalt durch den Inhalt der "central_draft.css" von Yaml. Wordpress ruft also seine "style.css" auf. Diese enthält aber den Inhalt des Yaml-Zentralstylesheets, welches die anderen Yaml-Stylesheets importiert.

Nun sammeln wir die Inhalte der "header.php", der "index.php", der "sidebar.php" und der "footer.php" in der "header.php". Wir kopieren anschließend die Yaml-Struktur der "markup_draft.html" ans untere Ende. Jetzt können wir recht übersichtlich die Wordpress-Struktur und die Yaml-Struktur in der "header.php" vereinen.

Folgende Vorgehensweise hat sich für mich empfohlen: Für den Headbereich baue ich die Yaml-Struktur ins Ausgangstheme. Für den Bodybereich setze ich die notwendigen Wordpress-Funktionen in die Yaml-Strutur. Alles Überflüssige lösche ich. Am Ende gliedere ich die so entstandene "header.php" wieder auf, in die "index.php", die "footer,php" und die "sidebar.php". Anschließend sollte das Yaml-Layout mit Wordpress laufen und man kann in die "basemod.css" und "content.css" die Änderungen eintragen. Das auf diese Weise entstandene Theme nennt sich blitzblank und kann gern heruntergeladen werden.

Schon etwas gewöhnungsbedürftig was Google da jetzt bei den AdSense Empfehlungen eingeführt hat. Wenn ein Publisher ein neues Produkt über die AdSense Empfehlungen auf seiner Seite bewirbt, bekommt er erst einmal weniger als die normale Bezahlung (jetzt von Google maximale Vergütung genannt). Statt dessen wird er erst voll bezahlt, wenn sich durch Conversions gezeigt hat, dass die von ihm gebrachten Conversions valide sind. Angaben dazu wie lange es dauert, bis ein Publisher dann die volle Bezahlung erhält, macht Google nicht.

Google will hierdurch die Qualität der AdSense Empfehlungen sicherstellen. Das kann ja durchaus auch im Interesse von Werbetreibenden und Publishern sein. Trotzdem finde ich es nicht toll. Als Publisher möchte ich schon genau wissen wann ich wie bezahlt werde und wann ich normal bezahlt werde.

Mehr im AdSense Blog.

Green heißt das Photoblog von Marcus Wallinder aus Schweden. Zu sehen sind Innenansichten eines Aquariums. Zumeist handelt es sich um Makroaufnahmen. Toll gemacht ist das Design, das die wenigen nötigen Bedienungselemente einfach auf die Fotos legt und so Platz für Atmosphäre lässt. Eine Thumbnailansicht ist für die Navigation zuständig, sie kann ausgeblendet werden. Zum Betrachten ist Flash erforderlich.

Christian Schmidt testet einen Dienstleister für Kommentarspam (nennt sich Buy Blog Comments) und findet nix dabei. "Fazit: Wenn es alles/ein Teil NoNoFollow Links wären, wäre es sicher ein guter Service doch so nützt es einem ziemlich wenig." Ein guter Service? Hallo?

Was macht dieser Dienst? Er schreibt für 24,99 Dollar 100 Kommentare in Blogs - oder für 239,99 auch 1000. Keine echten Kommentare versteht sich. Es handelt sich lediglich um unverdächtig wirkende Worthülsen. Die schaffen es durch den Spamfilter und fallen erst in der Menge auf. Christian listet die Phrasen freundlicherweise auch auf. Und tatsächlich, ich kenne sie alle. So sieht’s dann in der Moderation aus:

Leuten wie Christian ist es wurstegal wie viel Zeit man in der Moderation verbringt, ob ein Blog zugemüllt wird oder nicht. Er und seine Kommentatoren sorgen sich lediglich darum, ob die billig eingekauften Backlinks nicht doch noch zu etwas Nütze sind. Dabei weiß er es eigentlich besser.

Von ComScore wurden erstmals einige interessante Zahlen zum weltweitem Suchvolumen im August veröffentlicht. Demnach wurden weltweit etwa 61 Milliarden Suchen getätigt. Berücksichtigt wurden dabei die weltweiten Top50-Seiten auf denen die Suche eine Rolle spielt. Diese 61 Milliarden Suchen sollen von über 750 Millionen Suchenden (älter als 15 Jahre) stammen.

Die Verteilung der Suchen nach Regionen:

Europa leicht vor Nordamerika. Afrika hängt weit zurück. Asien hat bereits das weltweit größte Suchvolumen und ich würde mal vermuten das der Vorsprung in den nächsten Jahren weiter ausgebaut wird.

Zu der Tabelle noch 5 Hinweise: Von den 36 Milliarden Suchen bei Google fanden 31 Milliarden auf Google-Seiten statt und 5 Milliarden bei YouTube. Baidu.com ist eine chinesische Suchmaschine. Das Time Warner Network dürfte vor allem aus AOL-Suchen bestehen. Hinter der koreanischen NHN Corporation steckt Naver.com. Fox Interactive Media ist u.a. MySpace.

Der monatliche Rundumschlag mit den besten Links, Tools, Artikeln und Themen für Seitenbetreiber und Webdesigner. Seiten, die man nicht verpaßt haben sollte. Dies ist die deutsprachige Ausgabe des Originals von Smashing Magazine. Hier geht’s zur Ausgabe des letzten Monats.
 

Referenzen, Tutorials, Tipps

• 60 Advanced Adobe Photoshop Tutorials
  60 anspruchsvolle Tutorials für Profis, die ihre Kenntnisse in Adobe Photoshop (noch) erweitern wollen. Unter anderem sind Text Effects, Movie Techniques, Vector Effects, Photo Retouching, Photo Manipulation, Interface Elements, Digital Coloring und Digital Painting dabei.
  
  
  
  
• HTML Playground
  Anstelle von trockenen Beschreibungen von HTML-Tags bietet HTML Playground eine Art Spielplatz für das Studieren von HTML-Tags, ihren Attributen und Beispielen für ihre Anwendung.
  
  
  
  
• Photoshop Tutorials
  Eine wachsende Sammlung von Adobe Photoshop Tutorials, die meistens in Form von Schritt-für-Schritt-Anleitungen präsentiert werden. Tutorials sind in 17 Kategorien unterteilt, darunter Text Effects, Photo Manipulations, Web Layouts und Logos. 
• 40 Great Open Source Graphic Programs
  Eine Übersicht von 40 frei verfügbaren Anwendungen zur Bildbearbeitung, die sich als eine vernünftige kostenlose Alternative zu kostspieligen Produkten dienen können.
• 89 Community Sites for Webmasters
  Stoßen Sie auf ein Problem, mit dem Sie auch nach mehreren Stunden Durchstöbern im Netz nicht fertigwerden, so wird es Zeit, das Problem in öffentlichen Foren zu beleuchten. Diese 89 Design-Communities wie Webmaster-Talk oder Web Development Google Group kommen dabei in Frage.
• StyleIgnite
  Das Projekt stellt eine Plattform dar, auf der Web-Entwickler ihre CSS-Snippets hochladen, bewerten und mit anderen Nutzern teilen können. Sammelten andere Projekte nur einzelne Designelemente, wie etwa Formulare oder Tabellen, so sammelt Styleignite sämtliche Snippets unter einem Dach und Fach. Unter anderem werden Navigationsmenüs, Textelemente, Grafik, verschiedenste CSS-Techniken und weitere "Styles" gesammelt und bewertet.
• Microsoft Silverlight 1.0
  Microsoft veröffentlichte die erste Version der neuen Web-Präsentationstechnik, die der Darstellung und Animation von Oberflächen aus grafischen Elementen und Media-Daten in Browsern dienen soll. Dynamische Aktionen können mit JavaScript implementiert werden, wobei Silverlight-Inhalte von Browsern mithilfe eines entsprechenden Plugins, das zuerst installiert werden muss, interpretiert werden können. Microsoft positioniert Silverlight als Konkurrenzprodukt zu Adobe Flash-Player. Mehr zum Thema: Silverlight vs. Flash - ein Vergleich.
  
  
  
  
• Google Presentations
  Google erweiterte Google Docs - sein web-basiertes Paket mit gewöhnlichen Office-Anwendungen, die man aus umfangreichen Desktop-Anwendungen kennt - um die Funktionalität von Online-Präsentationen. PowerPoint-ähnliche Slideshows lassen sich online erstellen, bearbeiten, verwalten und mit anderen Nutzern teilen. Außerdem können schon "fertige" Präsentationen aus Text-, HTML-, RTF, Word-, PowerPoint- und Excel-Dateien importieren. Verlauf der Änderungen wird gespeichert; eine Präsentation kann von mehreren Nutzern gleichzeitig bearbeitet werden.

Tools, Web-Dienste

• oSkope Visual Search
  oSkope ist eine visuelle Suchmaschine, mit der sich Bilder auf Flickr, Produkte auf eBay und Amazon und Videos bei YouTube anschaulicher und intuitiver durchgesucht werden können. Gefundene Daten werden als Thumbnails angezeigt; beim Drüberfahren mit der Maus erscheinen zusätzliche Informationen über das gewählte Produkt. Verschiedene Sichten lassen gefundene Produkte nach Preis, Verkaufsrang und Popularität sortieren.
  
  
  
  
• Image reflection generator
  Das Tool erzeugt den Reflection-Effekt online.
• 10 colour contrast checking tools to improve the accessibility of your design
  Eine Übersicht von 10 Werkzeugen, mit denen sich der Farbkontrast analysieren und optimieren lässt. Darunter Color Contrast Analyser Firefox Extension, Graybit und Colour Contrast Check.
• CodePress - Real Time Syntax Highlighting Editor written in JavaScript
  CodePress ist ein web-basierter Quelltext-Editor mit Syntax Highlighting und automatischer Codevervollständigung. Der Quellcode wird beim Eintippen analysiert und dementsprechend farbig markiert. Der Quelltext des Editors (JavaScript) kann herunter geladen, installiert und beliebig modifiziert werden.
• CoScripter
  CoScript ist ein Dienst von IBM, mit dem Sie beliebige Aktionen, Prozesse und Aufgaben in Ihrem Web Browser ganz bequem aufnehmen, dokumentieren und mit anderen Nutzern teilen können. Nach der Installation einer Firefox-Erweiterung kann CoScript zu jedem beliebigen Vorgang automatisch ein step-by-step-Skript erzeugen, das anschließend von anderen Nutzern ausgeführt werden kann. Derzeit verfügt die Seite über 860 Skripten. CoScripter setzt bei Benutzern eine kostenlose IBM ID voraus.
• Windows Live Writer
  Eine kostenlose Desktop-Anwendung, mit der Sie Ihre Beiträge für Weblog-Engines wie etwa WordPress oder Moveable Type auf Ihrem Desktop aufbereiten, vorher ansehen und direkt veröffentlichen können, ohne diese in der Engine selbst aufbereiten zu müssen. Neben einem WYSIWIG-Editor lassen sich Inhalte auch offline ablegen und können anschließend automatisch in die Weblog-Engine übermittelt werden. Beta, für Windows XP mit SP2 oder Windows Vista. Mit zahlreichen Plugins lässt sich die Funktionalität von Windows Live Writer erweitern.
• FirePHP - Firefox Extension for PHP Development
  FirePHP ist ähnlich dem JavaScript-Debugger FireBug eine Firefox-Erweiterung, mit der Sie Ihre PHP-Quelltexte besser analysieren, debuggen und optimieren können. Um das Tool zu benutzen ist die Installation von PEAR Package sowie das Hinzufügen von wenigen Zeilen PHP-Code in den Quelltext Ihrer PHP-Anwendung notwendig.
• flauntR
  Ein kostenloses web-basiertes Bildbearbeitungstool mit gerade mal Tausenden (!) von verschiedensten Bildeffekten, Filtern und Stilen. Realisiert mit Adobe Flex.
• rsizr - intelligent image resizing
  Über Content Aware Image Resizing haben wir in der letzten Nachlese-Ausgabe schon geschrieben. Nun kann man die neue intelligente Technik zum Skalieren von Bildern selbst ausprobieren. rsizr, ein web-basiertes Bildbearbeitungstool, bietet eine Plattform dafür.
• FeedHub
  Abonnieren Sie Dutzende von RSS-Feeds, so ist ein Informationsoverkill früher oder später vorprogrammiert. Der Dienst bringt Ordnung in das Feeds-Chaos: sämtliche Beiträge bewertet das Tool ganz nach Ihren Präferenzen und ordnet diese entsprechend um. Dafür werden Ihre Interessen an Ihrem Lese- und Klickverhalten permanent studiert und intern aktualisiert.

CSS-Techniken, (X)HTML, PHP

• Fixing Tricky Layouts with the YUI Dom Collection
  Wie sorgt man dafür, dass zwei oder mehr Blöcke horizontal "in eine Zeile" ausgerichtet werden - und zwar unabhängig von verwendeter Schriftgröße (Beispiel: Problem)? Christian Heilmann liefert zwei Antworten - eine Lösung mit CSS und eine Lösung mit JavaScript.
  
  
  
  
• Styling File Inputs with CSS and the DOM
  Shaun Inman stellt seine simple Technik zur Gestaltung von File Input-Elementen in Web-Formularen.
• CSS Diagnostic Styling
  Eric Meyer veröffentlicht eine CSS-Datei, die beim Testen eines neuen Design Layouts auf eventuelle Fehler oder Versäumnisse visuell hinweisen - etwa bei fehlenden alternativen Beschreibungen oder falsch verlinkten Elementen.
• Forward-thinking CSS float-clearing
  Brian Dillard beschreibt eine zukunftssichere Methode zum Clearing von Floats mit CSS, ohne zusätzlichen (X)HTML-Markup.
• CSS Only DOM Tabs
  Ein auf Registerkarten basiertes Navigationsmenü lässt sich ganz elegant auch ohne JavaScript, mit reinem CSS erzeugen.
• Honeypot Captcha
  Captcha stellen eine gängige Methode dar, um Spam-Mails und -Kommentaren in Web-Formularen vorzubeugen; doch neben neuen CAPTCHA Ansätzen kann man Spambots ganz geschickt in die Falle locken. Phil Haack schlägt vor, ein spezielles Eingabefeld zu verwenden, das von "normalen" Nutzern mit CSS versteckt wird, von Spambots dagegen erkannt wird und mit Spam-Informationen automatisch gefüllt wird. Ist das Feld nicht leer, so ist dies ein klares Signal für eine Spam-Mail.
• CSS Pricing Matrix
  Eine CSS+JavaScript-Methode zur Präsentation von Daten in Form einer Tabellenmatrix. Beim Drüberfahren einer Zelle mit der Maus werden die Beziehungen, also Header-Zellen, zu denen die Zelle gehört, visuell markiert. Ähnlicher Ansatz bei Tablecloth.
  
  
  
  
• Control Suite
  Eine JavaScript-Suite mit Registerkarten, veränderbaren Eingabefelder, Rating sowie ProgressBar. Basiert auf Prototype.js.
  
  
  
  
• CSS selectors: basic browser support
  Dieser Beitrag erläutert die Unterstützung von verschiedenen Selektoren, Pseudo-Klassen und Pseudo-Elementen von verschiedenen Browser-Familien. Bookmarken zum Nachschlagen.
• How Many Pixels in an EM?
  Internet Explorer bis auf die Version 7 kann weder mit max-width noch mit min-width umgehen. Um beide Eigenschaften auch in IE nutzen zu können, muss man IE Expressions verwenden. Dieser Beitrag beschäftigt sich mit der Festlegung der maximalen Breite eines Layouts in EM-Einheiten - auch und unter anderem in IE.
• Dynamic CSS
  Geoffrey Grosenbach beschreibt eine Möglichkeit, CSS Variablen in CSS Coding mittels Ruby on Rails und HAML Plugin einzufügen.
  
  
  
  
• Visual Lizard
  Ein Tutorial über die horizontale Ausrichtung von Blöcken unterschiedlicher Höhe. Mit CSS und JavaScript. Es stellt sich bloß die Frage, ob sich derselbe Effekt auch ohne JavaScript realisieren lässt.
  
  
  
  
• CSS Sitemap Styler: Style your Sitemaps with CSS and Javascript
  Eine elegante Vorlage zur Umsetzung von Sitemaps mittels CSS und JavaScript.
• CSS List Expander
  Eine Methode, mit der sich Listen aus- und zuklappen lassen.
• CSS SiteMap
  Ein weiterer Ansatz zur Gestaltung von CSS Sitemaps; dieses Mal werden Seitenbereiche grafisch hervorgehoben. Das Sitemap selbst ist eine geschachtelte ungeordnete Liste.
• Blockquote Examples
  5 Beispiele zum Styling von Zitaten (blockquote), mit dem dazugehörigen CSS-Code.
  
  
  

CSS Tools und Dienste

• CSS Sprite Generator
  Das Tool automatisiert die Erzeugung von CSS-Code für CSS Sprites, einer Technik, bei der mehrere Bilder in ein Bild zusammengefügt werden und die Anzeige des passendes Teilbildes mittels des background-position-Attributs realisiert wird. Aus einem .zip-Archiv generiert CSS Sprite Generator ein einziges Bild sowie die entsprechende CSS-Formatierung.
• Premailer
  Das Skript bereitet HTML-Seiten für eine optimale Darstellung als E-Mails auf, indem es sämtliche Stilanweisungen aus CSS-Dateien inline in HTML-Code umschreibt. Das Tool weist außerdem auf CSS-Deklarationen, die in E-Mails Darstellungprobleme bereiten können.
• Free CSS Toolbox
  Eine kompakte kostenlose Desktop-Anwendung für effizientes CSS Coding. Inklusive Syntax Checker, CSS Validator, CSS Formatter, CSS Compressor und die automatische Codevervollständigung. Windows. Im Hinblick auf den Funktionsumfang ist die Anwendung zwar weit entfernt von Panic Coda, eine ähnliche Software für Windows gibt es bisher aber nicht.
• CSS Redundancy Checker
  Das Tool überprüft, ob Ihr CSS-Code Angaben enthält, die in Ihren (X)HTML-Dokumenten nicht verwendet werden. Alternative: Dust-Me Selectors, eine Firefox-Erweiterung von Sitepoint.

Ajax, Javascript

• If I Told You You Had a Beautiful Figure…
  Mit einem JavaScript-Snippet lassen sich Bilder konsistent und sauber positionieren. Dieser Beitrag zeigt, wie das geht.
• DOMAssistant 2.0
  Die JavaScript-Bibliothek DOMAssistant ist im Vergleich zu ähnlichen Bibliotheken eine simplere Lösung für DOM-Scripting, etwa zur Manipulation von Knoten im DOM-Baum (HTML-Elementen), Hinzufügen von Events, Klassen und anderen.
• Ext JS - JavaScript Library
  Ein umfangreiches JavaScript-Framework mit zahlreichen fertigen Modulen wie etwa Tabellen, Bäumen, Fenstern, Layouts, Formularen, Tabs-basierten Menüs und weiteren Komponenten, die sich von typischen Desktop-Anwendungen nicht im geringsten unterscheiden.
• Curl.js 1.0
  Diese JavaScript-Bibliothek simuliert den Seiten-Umblätter-Effekt auf Bildern. Es lassen sich die Größe des Blattes, die Farbe sowie der Schatten genauer festlegen.
• Accordion v2.0
  Eine auf Scriptaculous basierte Lösung zur Darstellung von Seiteninhalten in Form eines horizontalen und/oder vertikalen Akkordeons. Auch ineinander verschachtelte Akkordeons sind möglich.
  
  
  
  
• jQuery UI: Widgets, Components, and Interactions
  Eine auf jQuery basierende Sammlung von JavaScript-Modulen, Widgets und Komponenten, die Entwickler im Tandem mit jQuery benutzen können, um Drag’n'Drop, Sortierung, Kalender, Dialoge und andere Funktionen in Web-Applikationen schnell und schmerzlos zu integrieren.
  
  
  
  
• Firebug Tutorial - Logging, Profiling and CommandLine
  Beim Debugging von Fehlern, insbesonderen bei Ajax-Anwendungen wird Firebug fast stillschweigend benutzt. Das Tool bietet jedoch mehr Funktionen, mit denen man u. U. schneller auf die Fehlerquelle aufmerksam wird. Dieser Beitrag erklärt insbesondere anhand von Beispielen, wie man mit Konsole umgeht. Weitere Beiträge werden folgen.
• Usability enhancements with JavaScript
  Eine Auswahl von JavaScript-Snippets, mit denen sich die Usability einer Web-Seite steigern lässt. Darunter visuelle Hervorhebung von Verweisen (etwa .pdf- oder .zip-Dokumenten), externen Links und Darstellung von Zitaten.
• Grid Layout
  Grid Layout Tool erleichtert den Entwurf und Testing von rasterbasierten Designs. Um die Eigenschaften der Spalten zu verändern, genügt es, ein JavaScript-Snippet einzufügen und Attribute festzulegen, ohne CSS modifizieren zu müssen.
• Open offsite links in new window
  Ein kleines JavaScript-Snippet, mit dem Ihre Besucher festlegen können, ob sie Verweise im neuen oder im selben Fenster öffnen wollen.

Artikel und Beiträge

• 7 Rules for Communicating Clearly and Concisely in Email
  Der Umgang mit E-Mails erfordert prägnante Sprache und verständliche Inhalte. 7 Richtlinien der erfolgreichen E-Mail-Korrespondenz, darunter Inhalte auf das Wesentliche reduzieren, Vermeidung mehrdeutiger Passagen sowie die Verwendung von if…then-Statements.
• Tabs, Used Right: The 13 Usability Guidelines
  Jakob Nielsen listet 13 Richtlinien, die man beim Design von Tabs-basierten Navigationsmenüs beachten sollte, darunter genau eine Zeile mit Lesezeichen, klare Trennung zwischen Seitenbereichen und schnelle Reaktionszeit bei Hover-Effekten. Außerdem: der aktuelle Bereich soll hervorgehoben sein und mit dem Content-Bereich verbunden sein.
• Tips for Keeping Forms Accessible
  Eine Übersicht von grundlegenden Prinzipien des zugänglichen Designs von Web-Formularen. Insbesondere ist es sinnvoll, zusammenhängende Elemente mit fieldset-Tag zu gruppieren, mit legend-Tag zu benennen und mit label for miteinander zu verknüpfen.
• Thinking in the Right Terms: 7 Components for a Successful Web Site Redesign
  Ein Redesign kann sowohl Vorteile als auch Probleme mit sich bringen. Um vernünftige, zukunftsorientierte Designentscheidungen zu treffen, muss man die langfristige Entwicklung des Projekts im Auge behalten. Eine Übersicht von wesentlichen Aspekten, die Ihnen helfen werden, Ihre Besucher und ihre Interessen besser zu verstehen und ein Design zu entwerfen, das diesen Interessen langfristig entgegenkommen wird.
• How to price your web application
  Wie bestimmt man als Entwickler optimale Preise für seine Web-Applikationen? Der Beitrag beschreibt einschlägige Methoden und Prinzipien, mit denen unterschiedliche Zielgruppen angesprochen werden können. Insbesondere ist es wichtig, verschiedene "price plans" anzubieten und das Einkommen der Zielgruppe genau im Augenblick zu behalten.
• Getting a startup right the second time
  Falsche Entscheidungen zu treffen ist einfach. Dieser Beitrag beschreibt die Geschichte eines Startups, das zuerst einen falschen Designansatz verfolgte, dann aber zum Überdenken gezwungen wurde und nun in einer "zweiten Fassung" erschienen ist.
• Visualizing Fitts’ Law
  Dieser Beitrag erklärt anschaulich die Bedeutung eines der wichtigsten Gesetze in der Ergonomie - The Fitts’ Law.
  
  
  
  
• Fear of Web 2.0
  Neben Vorteilen liefert Web 2.0 auch Gefahren, die in der Euphorie der allgegenwärtigen Architektur der Partizipation häufig vergessen werden. Größte Probleme: Datenschutz und Sicherheit.

Design-Galerien, Showcases, Inspiration

• Showcase Point
  Eine Galerie von… Design-Galerien. Sämtliche CSS-, Flash- und Inspiration-Galerien sind in Kategorien unterteilt und lassen sich nach PageRank sortieren.
• Vector Logo Database
  Eine Sammlung von 670 frei verfügbaren professionellen Logotypen in 20 Kategorien und in hoher Auflösung. Sämtliche Logos können als Vektor-Grafiken heruntergeladen werden. Um Bilder herunterzuladen, ist eine Anmeldung notwendig. Nachteil: viel zu viel Werbung auf der Seite.
• The Best WordPress Magazine Themes Available
  Eine Übersicht von eleganten Wordpress-Themes, die sich insbesondere für Online-Magazine eignen und insbesondere durch klare Typografie und sorgfältig durchdachte, meistens logische und konsistente Seitenstruktur überzeugen.
• Cool business card designs
  Interessante Ansätze zum Design von Visitenkarten im Schnelldurchlauf.

Icons, Fonts, Templates

• Sizcons - Random Jabber
  Ein kostenloses Icon-Set mit 46 Icons in 12×12 und16×16 — kostenlos zum Herunterladen.
• The Holy Mail
  Das Software-übergreifende Design von E-Mails wird in der letzten plötzlich zu einem allgegenwärtigen Thema. Neben Galerien mit Newsletter-Designs gibt es mittlerweile auch Tools zum Testen von Newsletter-Designs. Dieser Beitrag liefert eine optimale Vorlage für HTML-E-Mails, die in einschlägigen Mail-Clients wie etwa Gmail, Outlook 2007, Yahoo Mail, Hotmail, Thunderbird, iPhone u.a. korrekt angezeigt werden.

Der letzte Klick

• ThinkGeek :: Wi-Fi Detector Shirt
  Dieses T-Shirt für Geeks leuchtet genau dann, wenn es Wi-Fi-Signal in der Umgebung erkennt. Dies kann praktisch sein, etwa wenn Sie ein Laptop nicht aufklappen wollen, um zu testen, ob sie ins Internet kommen können. Die Stärke des Signals erkennt man am Leuchten der eingebauten Lichtdiode. Das T-Shirt läuft auf drei AAA-Batterien, die übrigens nicht mitgeliefert werden; eine Anleitung zum Waschen gibt es auch.

  

• John Maeda: Simplicity patterns (video)
  In diesem TED-Talk spricht John Maeda, Autor des Buches "The Laws of Simplicity", uber "Simplicity" im Alltag.
• Presentation Zen: Learning from Bill Gates & Steve Jobs
  In ihren Talks unterscheiden sich Bill Gates und Steve Jobs enorm. In dem Versuch, Ideen möglichst effektiv zu kommunizieren, greifen beide zwar zu ähnlichen Werkzeugen, machen sich diese aber unterschiedlich zunutze. Dieser Beitrag analysiert, wo genau der Unterschied liegt und was Bill Gates von Steve Jobs lernen könnte.
• FFFFOUND! - image bookmarking
  Wohl der einzige Web-Dienst mit 4 aufeinander folgenden "F"-Buchstaben bietet seinen Benutzern eine Plattform zum Ablegen und Austausch von Lesezeichen von Bildern. Populäre Bilder landen wie bei Del.icio.us auf der Startseite; Tags lassen sich (noch) nicht einfügen. Auch Registrierung ist noch nicht möglich, da das Projekt in der Testing-Phase läuft.
• Knit Night Cupcakes
  Lolo backt gerne. Unter anderem Kuchen mit der Creme, die an Strickpullover erinnern. Was hat das mit Webentwicklung zu tun? Rein gar nichts, ist aber sehr nett zu sehen.

  

Mein 9.0.28 ist nicht gut genug für euch? rsizr.com, was soll der Quark?

Wollte eigentlich schon gestern auf das Matt Cutts-Interview von Eric Enge hinweisen, aber nicht ohne auf einige Aspekte hier in deutscher Sprache näher einzugehen. Das hat mir jetzt aber Andreas zum größten Teil abgenommen, auch wenn ich seinen Schlußfolgerungen nicht gänzlich zustimmen würde. Hier der Hinweis auf das beste Matt Cutts-Interview seit langem: Eric Enge Interviews Google’s Matt Cutts.

Für die meisten dürfte besonders die erste Hälfte interessant sein. Es kommt ja immer mehr in Mode den “Pagerank-Fluß” über nofollow zu steuern und unwichtige Unterseiten nicht unnötig mit “Link-Juice” auszustatten …

Mal wieder ein spannendes neues AdSense-Produkt. Zukünftig wird es möglich sein YouTube-Videos mittels eines anpassbaren Players in die eigene Seite zu integrieren. Dies gilt allerdings nicht für alle YouTube-Videos, sondern nur für die Videos von bestimmten YouTube Partnern. Es wird möglich sein die Videos mittels Video-Kategorien auszuwählen oder einen individuellen YouTube Partner auszuwählen oder Videos automatisch zum Content anzuzeigen. Da frage ich mich ob man überhaupt ein bestimmtes Video auswählen kann?

Content Partner sind unter anderem TV Guide Broadband, Expert Village, Next New Networks, Extreme Elements, Mondo Media, Ford Models, Lisanova und Lonelygirl15. Vorerst also wohl nichts deutschsprachiges. Wir warten ja auch noch aufs deutsche YouTube …

Folgendes Video erklärt wie man die Video Units nutzen kann (wobei ich allerdings derzeit die Option noch nicht in meinem AdSense Account habe):

Im AdSense Blog findet sich ein Beispiel wie das Ergebnis aussehen kann.

Aus drögen Datentabellen lässt sich auch etwas machen. Zu Fuß oder mit Tablecloth (zu Deutsch eigentlich "Tischdecke"). Das ist ein wenig CSS und Javascript und sorgt für Bewegung und Style - ohne dass man großen Aufwand betreiben müsste. Denn die Tabellen selbst müssen nicht verändert werden. So könnte es aussehen:

oder so:

Wenn sogar heise über das neue Projekt von Thomas schreibt, sollte ich das vielleicht auch noch kurz erwähnen. Yaggs bringt die Idee von Mahalo nach Deutschland. Eine Suchmaschine, mit von Menschen editierten Ergebnissen. Yaggs strebt dabei an einige tausend Ergebnisse bereit zu stellen und für andere Suchen wird dann auf Google zurückgegriffen. Ich stehe einer solchen Idee aus verschiedenen Gründen sehr skeptisch gegenüber, aber trotzdem: Viel Erfolg!

Blogmonster ist ein deutscher Blog-Hoster. Das ist so etwas wie Blogger nur kleiner und schlechter. Und gerade jetzt unglaublich vollgespamt. Die Startseite zeigt das (Ausschnitt):

Das sind nicht lauter Spam-Blogs die bei Blogmonster angelegt wurden. Es ist ein Eintrag in einer Liste, die augenscheinlich anfällig für umfangreiche Manipulationen ist. Spammer finden solche Lücken garantiert. Wo immer automatisiert Inhalte angezeigt werden ist die Drecksbande umgehend zur Stelle. Kommentarspam ist dagegen noch harmlos.

“Humans do it better” - das ist der alte Claim des Open Directory Project. Nun hat Thomas Frütel, in explizitem Bezug auf Mahalo, eine eigene “human-powered” Suchmaschine vorgestellt: Yaggs. Das Konzept dieser Suchmaschine ist relativ einfach erklärt: Eine Redaktion erstellt manuell für Suchanfragen möglichst passende Suchergebnislisten zusammen. Suchanfragen, für die noch keine vorgefertigten Ergebnislisten vorliegen, werden an Google weitergereicht. Ziel des Teams ist es, künftig einige tausend Suchergebnislisten vorgefertigt bereit zu halten. Später soll die Anwendung dann auch geöffnet werden, so dass Nutzer selbst Ergebnislisten anfertigen können. Viele Fragen zum Projekt werden auch auf dem Blog zur Suchmaschine beantwortet.

Das Thema Linkverkauf\Linkkauf scheint auf absehbare Zeit ein großes Thema zu bleiben. Aktuell hat Danny Sullivan einen interessanten Beitrag dazu geschrieben: Official: Selling Paid Links Can Hurt Your PageRank Or Rankings On Google.

The Stanford Daily soll laut Danny seinen PR9 verloren haben und jetzt nur noch PR7 sein, weil dort Links verkauft werden. Auf Nachfrage hat Google ihm bestätigt, dass der Pagerank einiger Seite wegen Linkverkauf reduziert wurde. Außerdem sei Google sogar dazu bereit einige Seiten für Linkverkauf aus dem Index zu verbannen oder mit Penalties zu belegen.