Dr.Web - Das Online Magazin für Seitenbetreiber

Der monatliche Rundumschlag mit den besten Links, Tools, Artikeln und Themen für Seitenbetreiber und Webdesigner. Seiten, die man nicht verpasst haben sollte. Dies ist die deutschsprachige 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 12x12 und16x16 — 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.

  

Verwandte Artikel

• Web-Seiten des Monats: September 2006 (0)
• Web-Seiten des Monats: Oktober 2006 (0)
• Web-Seiten des Monats: November 2006 (0)
• Web-Seiten des Monats: März 2007 (0)
• Web-Seiten des Monats: Juli 2006 (0)
• Web-Seiten des Monats: Januar 2007 (0)
• Web-Seiten des Monats: Februar 2007 (0)

(No Ratings Yet)