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:
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:
Win:
Bisher keine Unterstützung:
Tags: CSS, Javascript/ HTML/ CSS
Posted in Javascript/ HTML/ CSS | Comments Off
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:
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.
Tags: javascript, Javascript/ HTML/ CSS, jquery, moodblender, plugin
Posted in Projekte | Comments Off
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
Tags: javascript, Javascript/ HTML/ CSS, jquery, moodblender, plugin
Posted in Javascript/ HTML/ CSS, Projekte | Comments Off
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.
Tags: dojo, Javascript/ HTML/ CSS, jquery, meinung
Posted in Javascript/ HTML/ CSS, Software | Comments Off
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:
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:
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)…
Tags: bildung, eigene Projekte, html, Javascript/ HTML/ CSS, kloster, php, php5, sphinx, webdesign
Posted in Projekte | Comments Off