Zwar wird der Wechsel von CSS 2 auf CSS 3 bekanntermaßen wohl noch etwas dauern. Aber eine hilfreiche Neuerung ist das CSS3-Modul “multi-column layout”. Auch wenn es nicht mehr wirklich “taufrisch” ist, möchte ich es trotzdem kurz vorstellen. Denn wenn die Seite nicht in allen Browsern gleich aussehen muß, spart man sich dadurch verschachtelte divs – von tables gar nicht zu reden…
Geeignete Anwendungen wären, Listenaufzählungen, Navigationslisten aber auch Textebereiche.

Beispiel:

Code für Mozilla-Browser:
#TopNav ul{
-moz-column-count: 3;
-moz-column-width: 32%;
-moz-column-gap: 1em;
-moz-column-rule: solid #818285 1px;}

Über column-count wird die Spaltenanzahl definiert.

Column-width bestimmt die jeweilige Spaltenbreite. Derzeit sind alle Spalten immer gleich breit & hoch. (Das kann sich zukünftig ggf. noch ändern.)

Column-gap regelt den horizontalen Abstand zwischen den einzelnen Spalten. Der Wert darf nicht negativ sein.

Mit column-rule kann eine Trennlinie definiert werden.

Bitte nicht vergessen, für Safari-Browser wird statt “-moz” einfach “-webkit” definiert.

Umbrüche:

Um Umbrüche in die nächste Spalte gezielt zu steuern, stehen folgende Eigenschaften zur Verfügung:

• break-before
• break-after
• break-inside

Versucht Umbrüche innerhalb von p Elementen zu  vermeiden:
p { break-inside: avoid-column }

Umbruch nach Bildern:
img { break-after: column }

Umbruch vor h2:
{ break-before: column; }

Weitere Möglichkeiten:

Element über alle Spalten darstellen:
h2 { colum-span: all;}

Wer noch tiefer einsteigen möchte, dem empfehle ich dazu die Seite des W3C:
http://www.w3.org/TR/css3-multicol/

Browser Kompatibilität:

mac:

• Chrome  5
• Firefox 3.6
• Safari 4

Win:

• Chrome 4
• Firefox 3, 3.6
• Safari 4

Bisher keine Unterstützung:

• IE 6,7 und 8
• Opera 10, 10.1 und 10.5

After my first release on last sunday I have to put out a first bugfix-version. So everything from the first post on this still fits, except:

• IE6 seems to go crazy with it. So I decided to remove support for all IE-browsers with version 6 and smaller – no worry, it degrades nicely.
• IE7 and IE8 of course do not support “opacity:value” in CSS. So the initial set-up with div-elements looked a bit strange. I integrated a small check with $.support.opacity on the append()-part.
• the plugin works nicely with jQuery 1.4.2 – demos are updated now.

Demos: demo1 jQuery 1.3, demo1 jQuery 1.4, demo2 jQuery 1.3, demo2 jQuery 1.4

Downloads: the minified version (2.2kb) or the full source.

btw.: I plan to publish it on the jQuery-plugins-page if I’ve rewritten the loop()-function – so maybe with version 0.4.

I’ve started this plugin for jQuery in december 2009 – and left it for at least two months.
Now I give you moodblender.
Don’t expect a amazing and cool and useful jQuery-plugin. It’s for fun only.

Let’s say you have an area in your website with some sort of “moody image”. Something that sits there pretty still and won’t change. Of course there are tons of jQuery-tools to make this a attractive spot (like cycle), but they are all a bit too much. And I found none that support slicing the image and using some sort of video-style transition. That’s where moodblender comes in.

The plugin is in it’s early stages. You should only use the settings splitparts, loop, maxloop and dwellTime. Using “blendOut: true” is fine, but does not work the way I had it in mind ;)

There are two demos available: number 1 and number 2.

Use the minified version (2.2kb) or read the full source. It’s tested with jQuery 1.3.2, but should work with the latest 1.4 as well.
Browserchecks aren’t complete yet. I’ve only tested it with Firefox 3.6, Safari 4, Google Chrome 4 and Opera 10.10. I did some tests with InternetExplorer 6 to 8, but only with an early version.

HTML

<div id="mood">
<img src="pix/mood_1_test.jpg" alt=""/>
<img src="pix/mood_3_test.jpg" alt=""/>
<img src="pix/mood_2_test.jpg" alt=""/>
</div>

CSS

#mood
{
 position:relative;
 overflow:hidden;
 width:500px;
 height:282px;
}

JS

$(document).ready(function() {
 $('#mood').moodblender({
 loop: true,
 maxloop: 10,
 blendOut: false,
 dwellTime: 3000
 });
});

I’ve a couple of things in mind for version 0.2 and beyond. Some of them are

• rewrite the loop-function and maybe make use of jQuery’s new delay()-function (sometimes looping kills itself or slices move in on one block… timing is evil in JS)
• add support for jQuery Easing Plugin
• fix the ‘blendOut: true’
• add full support for IE6 to 8 (or degrade nicely with IE6 ;)

Klar, das ganze Blog ist eine einige Meinungskundgebung. Hier muss ich aber mal etwas los werden, da dojo jetzt in Version 1.4 erschienen ist:
Javascript-Bibliothek Dojo 1.4.0 erschienen: Entwickler versprechen mehr Stabilität und Geschwindigkeit

Ich habe ja sehr lange script.aculo.us mit prototype-js verwendet. Man kann sagen, das es zuerst da war und gut funktioniert. Es hat aber – wie alle Dinge im Leben – Haken und Ösen, die irgendwie das Leben schwerer machen.
moo-tools ist auch ganz nett – ich hatte aber nie die Gelegenheit es ernsthaft einzusetzen.

Und dann kam ein größeres Projekt an dem ich Frontendarbeiten machen durfte. Krudes HTML und dojo waren da schon vorgegeben – das nur vorweg, da es meine Einschätzung sicher auch negativ beeinflusst hat.
Ich kann nur eines zu dojo sagen: Nimm viele features und mache alles sehr, sehr langsam.
Das ist vor allem kein Spass, wenn man mit dem derzeit langsamsten Browser, dem Firefox arbeitet. Keine Frage, ich liebe den Fuchs, weil er extrem flexibel ist. Bei intensiven Javascript-Dingen erkennt man aber seine Grenzen. Und dojo ist das toolkit mit dem man diese Grenzen per einfachem Seitenaufruf sofort erreicht. Ich fand es richtig übel.

Irgendwann musste ich mir dann auch mal Alternativen zu script.aculo.us ansehen und muss sagen das jQuery schlicht genial ist. Hat auch seine Macken, aber alleine die saubere Plugin-Aufteilung ist genial – da kann script.aculo.us nicht mithalten. Und wer “flot” schon einmal gesehen hat – nun der weiss, dass dies alleine schon ein Grund ist, zu jQuery zu wechseln :-)

Ich würde mir dojo also nicht mal mehr aus weiter Entfernung ansehen wollen – sorry.

Wie gerne vergesse ich, das dieses Blog ja auch geeignet ist über die eigenen Kundenprojekte zu sprechen. Es gibt so einige Dinge über die ich nicht sprechen darf, oder nur sehr vage Aussagen möglich sind. Es gibt aber auch Projekte bei denen ich keinen Maulkorb auf habe.

Im Juli 2005 ging die erste Version der kloster-ensdorf.de online. Bis zum Ende des Jahres 2005 wurden noch diverse Erweiterungen vorgenommen und dann gab es im Grunde ein lange Pause für uns – die Seite lief einfach gut und das ist in meinen Augen ein wichtiges Ergebnis.
Bereits 2008 wurde mit Jürgen Zach über eine optische und funktionale Änderung nachgedacht. Im März diesen Jahres fand dann unser Kick-Off statt.

Die optische Gestaltung wurde diesmal nicht von uns gemacht, sondern von Michael Brandel (grafikbuero-brandel.de). Den Hauptteil der Abstimmung und der Umsetzung in HTML hat meine Kollegin Stefanie Graf übernommen. Dabei war unser Fokus auf zwei Bereichen:

1. nicht alles neu schreiben, was nicht unbedingt sein muss
2. sich – wo nur möglich – von dem Ballast des HTML-Table-Aufbaus trennen

Bei all den Wünschen und unseren Ansprüchen hat sich gezeigt, das Punkt (1) nicht so wirklich gut einzuhalten war – es ist wie mit den guten Vorsätzen zum Jahreswechsel ;-)
Punkt (2) haben wir zu 90% erreicht. Auf der öffentlichen Seite würde ich sogar von 95% sprechen.

Wir haben nicht so viele sichtbar neue Funktionen integriert (RSS-Feed für die Newsmeldungen, Pressespiegel, Galerie aufgepeppt, …), sondern mehr “unter der Haube” gearbeitet. Ganz “nebenbei” wurden u.a. folgende Änderungen durchgeführt:

• Umstellung von ISO auf UTF-8
• Suche mit einer sphinx-Konstruktion mit sematischem Charakter
• bessere HTML-Auszeichnung (label-Tag, title-Attribute, li, etc.)
• verbesserter Mailversand

Der Schwerpunkt lag also ganz eindeutig in der Optik und der Überarbeitung der inhaltlichen Struktur.
Es wird noch einige Iterationen der www.kloster-ensdorf.de geben. Einige davon wird der Besucher dann noch merken, aber die meisten beziehen sich dann doch darauf die Arbeitsprozesse für die Administratoren des Klosters zu vereinfachen. In jedem Fall hoffen wir das die neue Seite gut ankommt.

Achja: Wir verwenden unser eigenes framework. Kein bloat-code wie Typo3 oder Drupal. Nicht das ich ein Problem mit Typo3 und Konsorten habe, aber nur weil man “damit alles machen kann” muss man es ja nicht gleich blind einsetzen. Ich persönlich bin immer noch nicht davon überzeugt das solch generische Werkzeuge (und dazu gehört für mich auch CackePHP) für jeden Einsatz geeignet sind. Meine Erfahrung bislang: Je größer das framework, je größer die Hardware. Und bei den Mittelstandsprojekten an denen ich bislang beteiligt war, gab es immer irgendwo eine Budget-Grenze (für Hardware)…