Mit der Demonstration von CSS Pencils [1] zeigt Christopher Hester, wie man ein normales Bild neu erstellen kann indem man nur CSS verwendet. Da verwundert es einen nicht, dass das HTML Dokument dann über 1500 Zeilen hat um das Bild darzustellen.

[1] http://www.designdetector.com/tips/csspencils.php

Neben dem standard Validation Tool von W3C [1] gibt es auch ein weiteres Online Tool auf der style-sheets.com Webseite [2]. Mit diesem Tool wird geprüft, ob das CSS Stylesheet auch auf verschiedenen Browser Versionen läuft. Diese kann man auch explizit auswählen. Anders als beim W3C CSS Validator wird nicht nur auf CSS Standardkonformität geprüft sondern auch auf diverse Browserbugs.

[1] http://jigsaw.w3.org/css-validator/
[2] http://www.style-sheets.com/validator.asp

Auf inknoise.com findet man Layout-o-matic [1] ein sehr einfaches Online Tool um sehr schnell CSS/XHTML Layouts für Webprojekte zu erstellen. Die erforderlichen Hacks für den Internet Explorer werden bei der Erstellung des CSS gleich mitberücksichtigt. Derzeit kann man aus 4 verschiedenen Layouts wählen: Full Page, Two Columns (left sidebar), Two columns (right sidebar), Three columns.

[1] http://www.inknoise.com/experimental/layoutomatic.php

Über einen Artikel auf circle.ch [1] bin ich auf einen genialen DHTML Plugin für das editieren von HTML gestoßen, der auf einer Open Source Lizenz basiert. Zudem dem HTML Plugin gibt es auch einen eigenen Image Manager, der auf Basis von PHP und DHTML entwickelt wurde und als weiteres Highlight in diesem Plugin ins Auge sticht. Am besten ist es man probiert die vorgestellte Demo auf der Webseite von HTMLArea 3 mit Image Manager und Image Editor [2]. Serverseitig benötigt man PHP, GD oder NetPBM oder ImageMagick um die Image Management Funktionen nutzen zu können.

[1] http://www.circle.ch/blog/p1360.html
[2] http://www.zhuo.org/htmlarea/index.html

Eine sehr interessante Sammlung von CSS Templates kann man auf der CSS Intensivstation [1] finden. Wer schnell eine gut strukturierte Vorlage für seine Webprojekte sucht ist auf dieser Website richtig.

[1] http://intensivstation.ch/css/template.php

Mit KTML [1] hat InterAKT einen sehr guten HTML Editor im Programm, der unter allen Browserplattformen verwendet werden kann. Zum Testen steht eine Demo Version zum Download bereit und eine Online Demo [2] zeigt schnell welche Features der Editor zu bieten hat. Für kommerzielle Projekte muss man sich eine Lizenz erwerben, die derzeit bei 99 Dollar pro Internetdomaine kostet.

[1] http://www.interakt.ro/products/KTML/
[2] http://iakt.rdsnet.ro/demo/ktmlDemo/

Über den devnews radar [1] bin ich auf eine sehr gute Übersicht über CSS Hacks und Filtern gelangt. Auf dithered.com werden im Bereich “CSS Hacks” [2] mehrere Möglichkeiten angeboten, Listen und Hacks in übersichtlichen Listen darzustellen.

[1] http://dev.bitdesign.de/index.php?itemid=199
[2] http://www.dithered.com/css_filters/index.html

Über DevNews Radar’s blog [1] wird auf einen Artikel auf Historiae [2] hingewiesen, in dem die richtige Anwendung von Fontgrössen erklärt wird. Vorallem welches Grössenangabe “em” oder “px” man verwenden soll ist immer noch ein heiss diskutiertes Thema.

[1] http://dev.bitdesign.de/index.php?itemid=189
[2] http://www.btinternet.com/~historiae/fonts.html

Der MOZiE Browser [1] ist eine Applikation mit der man sehr schnell die Unterschiede zwischen den Gecko Browsern (Mozilla, Firebird, Netscape) und den MSHTML Browsern (MS Internet Explorer) erkennen kann. Eine Webseite wird untereinander angezeigt und Unterschiede somit sehr schnell erkennbar.

[1] http://www.zeit.ca/mozie/

Wie schon in einen vorherigen Post mit Safari [1] erwähnt kann man auf der Site „Trough the eyes of Konquerer and Mozilla“ bzw. Kcapture [2] einen Screenshot von einer Website auf diesen Browser erstellen lassen.

[1] http://wordpress.dinokarl.com/index.php?p=43
[2] http://kcapture.eadz.co.nz/

Auf “web-graphics.com” [1] habe ich eine gute Sammlung mit Links über die Farbenlehre bei Internetauftritten gefunden. Hier ist nochmal die zusammengefasste Liste:

• Colours on the Web by Donald Johansson [2]
• Color Overview by Worqx [3]
• Color Contrast & Dimention in News Design by Pegie Stark Adam [4]
• Web Colours Theory [5] and Principles of Graphics Design [6] by Mundi Design Studios [7]

[1] http://web-graphics.com/mtarchive/001089.php#content
[2] http://www.webwhirlers.com/colors/
[3] http://www.worqx.com/color/index.htm
[4] http://poynterextra.org/cp/colorproject/color.html
[5] http://www.mundidesign.com/webct/webct.html
[6] http://www.mundidesign.com/presentation/index2.html
[7] http://www.mundidesign.com/

Eine interessante Applikation habe ich über “redempetion in a blog” [1] gefunden. Auf “SelectORacle” [2] kann man Stylesheets in ein für Menschen lesbares Format übersetzen. Es besteht auch die Möglichkeit ein Stylesheet in deutscher Sprache zu erklären. Eine interessante Idee, leider gibt es das nicht für andere Dinge wie Programmiersprachen auch.

[1] http://blog.codefront.net/archives/2003/12/01/css_selectors_translator.php
[2] http://gallery.theopalgroup.com/selectoracle/

Gerade als PC Benutzer ist es unmöglich herauszufinden, wie eine Website auf einem Mac Browser gerendert wird. Oft gibt es Probleme mit den Stylesheets oder mit gewissen Formatierungen. Daniel Vine [1] stellt auf seiner Webseite eine Technologie zur Verfügung, mit der man Webseiten auf einem Mac Safari Browser begutachten kann.

[1] http://www.danvine.com/capture/

Einen der derzeit besten Kalender Plugins in DHTML ist die Applikation von Mishoo [1]. Ich habe diesen Kalender heute in meine Adminseiten integriert und hatte dabei keinerlei Schwierigkeiten. Ein großer Vorteil des Plugins ist auch, dass er mit verschiedenen Layouts und mit verschiedenen Sprachenversionen ausgeliefert wird. Daher meine Empfehlung für Mishoo’s Applikation als beste „Date Picker“ Applikation auf DHTML Basis.

[1] http://dynarch.com/mishoo/calendar.epl

Eine gute Sammlung von Links über das Thema CSS Drop Shadows habe ich auf dionidium.com [1] gefunden. Wie man auf meiner Seite sehen kann habe ich gleich einen Drop Shadow Effekt eingebaut. Feedback zu den Drop Shadows würde mich freuen. Für diese Seite habe ich die Drop Shadow Technik von Ian Andolina [2] verwendet.

[1] http://www.dionidium.com/2003/11/css-shadows
[2] http://nontroppo.org/test/shadow.html

Normalerweise werden XHTML Seiten mit dem typischen „text/html“ Mime Type über das Internet an die Browser geschickt. Dies ist jedoch nicht W3C konform und sollte zukünftig vor allem für die aktuelleren Versionen von XHTML vermieden und angepasst werden. Der korrekte Mime Type für XHTML sollte eigentlich „application/xhtml+xml“ sein. Auf der Seite von „Keystone Websites“ habe ich einen Artikel [1] gefunden, der diese Problematik näher erklärt und auch eine Möglichkeit mit Hilfe von PHP darstellt, den richtigen Mime Type an den Browser zu schicken. Die Problematik liegt eigentlich darin, dass einige Browser diesen neuen Mime Type noch falsch interpretieren und dann z.B. bei Internet Explorer das Dokument nicht grafisch rendern, sondern als XML Dokument anzeigen.

[1] http://keystonewebsites.com/articles/mime_type.php

Eine sehr umfangreiche Ansammlung von Links über CSS Hacks [1] findet man auf dem „The css-discuss Wiki“ [2]. Gerade, wenn man neuere Features von CSS verwendet gibt es zwischen den verschiedenen Browsern immer Inkompatibilitäten. Durch Hacks kann man dann seinen Internetauftritt dafür vorbereiten, auf allen gängigen Browsern dargestellt zu werden.

[1] http://css-discuss.incutio.com/?page=CssHacks
[2] http://css-discuss.incutio.com/?page=FrontPage

Auf dem blog von web-graphics.com [1] habe ich einen sehr interessanten Verweiß auf Twysted.net [2] gefunden, die eine Website zusammengestellt haben mit einer veränderten Version von ColorMatch [3], die es auch ermöglicht die Farbpalette in Photoshop zu exportieren. Das Tools ist ziemlich praktisch um die richtige Farbkombination für ein Design oder Layout auszuprobieren. Man kann diese neue Applikation unter ColorMix Remix [4] finden.

[1] http://web-graphics.com/mtarchive/001074.php
[2] http://www.twysted.net/
[3] http://colormatch.dk/
[4] http://color.twysted.net/

In seinem Artikel „Suckerfish Dropdowns“ [1] auf A List Apart erklärt Patrick Griffiths und Dan Webb sehr ausführlich, wie man mit reinem HTML und CSS2 Stylesheets ein sehr beeindruckendes Drop-Down Menü auf Webseiten aufbauen kann. Anhand des Beispieles [2] kann man auch testen, ob dieses Verfahren mit allen gängigen Browsern funktioniert. Zudem beschreibt der Artikel die Möglichkeit wie man auf dem Internet Explorer die Pseudo Class :hover implementieren kann.

[1] http://www.alistapart.com/articles/dropdowns/
[2] http://www.htmldog.com/articles/suckerfish/example/

Simon Willison hat in seinem Blog “Simon Willison’s Weblog” [1] eine großartige Website namens „QuirksMode“ [2] gefunden, in der für diverse Browser die Bereiche JavaScript, CSS, etc. in Bezug auf Kompatibilität verglichen werden.

[1] http://simon.incutio.com/archive/2003/10/29/quirksMode
[2] http://www.quirksmode.org/