Neues Blog!
RapidWeaver ist schon ein feines Tool und mit der kurz vor der Tür stehenden neuen Majorrelease 4.0 werd ich's mir sicher nochmal anschauen. Aber WordPress 2.5 ist halt auch schon ganz schön erwachsen geworden und wird massiv von der Community mit Themes und Plugins und Widgets etc. unterstützt.
Wenn ihr schonmal schauen wollt: unter http://meta.wops.de gehts weiter ...
Adobe kuler
Wenn es euch wie mir geht und
ihr das Zusammenstellen von "kompatiblen" Farben
für (z.B.) eine Website mühsam findet, hätt' ich
da 'was für euch: kuler von
Adobe. Keine Angst, ist nicht so teuer wie sonst
alles was von Adobe kommt. Es kostet nämlich gar
nix! 
Kuler ist (nicht nur) eine Webapplikation und Adobe investiert in diesem Bereich ja schon seit einiger Zeit massiv. Selbst eine Photoshop "online" Variante soll ja demnächst erscheinen und die Web-Textverarbeitung Buzzword wurde kürzlich von Virtual Ubiquity übernommen.
Adobe's AIR Technologie macht es möglich, dass Anwendungen sowohl auf einem Windows Desktop, als auch einem Mac Desktop als auch innnerhalb eines Webbrowsers laufen.
Auf der Adobe Labs Seite zu kuler gibt es deshalb auch entweder die Möglichkeit, kuler direkt im Webbrowser auszuprobieren oder die Desktop-Variante zu laden, welche dann das AIR Runtime Modul benötigt (aktuell ist die beta3, die es seit 12. Dezember 2007 gibt). Übrigens: unter OS X gleich mit dem FireFox downloaden; bei Safari gibts Probleme mit dem Auspacken (.bz2 / .cpgz Schleife).
Die Desktop Variante ist aber recht unspektakulär, denn zum tatsächlichen Erstellen von Farbzusammenstellungen springt man dann doch wieder in den Webbrowser zur dortigen kuler Applikation.
kuler basiert auf Flash und ActionScript 3.0, wie man auf der kuler Adobe Labs Seite nachlesen kann.
Ruft man die kuler Website im Browser auf, landet man zunächst einmal auf der Seite, auf der man Farbzusammenstellungen browsen und suchen kann:
So ein Farbset ist auch vertaggt, so dass man prima fündig wird bei der Suche.
Na und dann vor allem die Möglichkeiten, Farbsets zu erzeugen! Das macht Spaß. Ein Farbset besteht immer aus fünf Farben und auf der Create-Seite sieht man diese nebeneinander. Unter jedem Farbquadrat sieht man die HSV-/RGB-/CMYK-/LAB- und Hex-Werte, die die jeweilige Farbe definieren.
Die mittlere Farbe ist die Basisfarbe und die anderen vier kann man entweder durch intelligente Regeln dazu passend errechnen lassen oder – wie auch die Basisfarbe selbst – durch Eingabe der entsprechenden Farbraumwerte oder Bewegen der Slider ändern.
Es gibt sechs verschiedene intelligente Regeln: Analogous, Monochromatic, Triad, Complementary, Compound und Shades. Hier ein paar Beispiele zu einer orangenen Basisfarbe (#FF7828):
Analogous
Hier liegen die Farben innerhalb eines ca. 60° Winkels initial auf dem selben Kreis, auf dem auch die Basisfarbe liegt. Sprich: sie haben alle den selben Sättigungs- und Helligkeitswert, aber leicht unterschiedliche Farb-/Huewerte:
Natürlich kann man die kleinen, kreisrunden Farbanfasser auch interaktiv bewegen, um einzelne Farben leicht anzupassen. Das gilt für alle Modelle, aber je nach Modell bewegen sich die anderen vier kleinen Farbscheiben auf spezielle Weisen mit.
Hier beim Analogous Modell wird z.B. darauf geachtet, dass die Winkel zwischen den Farben immer alle gleich bleiben.
Monochromatic
Hier liegen die Farben alle auf der Strecke [Weißpunkt, Basisfarbe], haben also den selben Farb-/Huewert, bekommen initial aber unterschiedliche Helligkeits- und Sättigungswerte:
Triad
Hier liegen die Farben auf den Winkelhalbierenden eines gedachten, gleichseitigen Dreiecks, haben also v.a. unterschiedliche Farb-/Huewerte:
Complementary
Bei diesem Modus liegen die Farben auf einer Geraden durch den Ursprung (Weißpunkt) und die Basisfarbe, liegen also im Farbkreis mehr oder weniger "gegenüber" und sind damit bekanntermaßen Komplementärfarben:
Compound
Das Compound Modell ist nicht ganz so einfach. Hier gibt es zunächst eine zur Basisfarbe "fast" komplementäre Farbe, die aber nicht exakt 180° entfernt ist. Zwei weitere Farben liegen dann in der Nähe der Basisfarbe und eine in der Nähe der fast-komplementären Farbe. Interessant hier: beim interaktiven Verschieben der Farben bleiben die Winkel fix. Lediglich die Entfernung zum Weißpunkt und natürlich die Position im Kreis kann man ändern. Aber die (Winkel-)Relationen untereinander bleiben konstant:
Shades
Das Shades Modell ist dem Monochromatic Modell sehr ähnlich, hier liegen die Farben aber aussließlich "auf" der Basisfarbe, haben also die selben Farb-/Hue- und Sättigungswerte. Die Unterscheidung liegt hier ausschließlich im Helligkeitswert:
Jederzeit kann man jeder der fünf Farben zur neues Basisfarbe machen und so in Kombination mit diesen Modi oder durch manuelles Werteändern neue Paletten erzeugen.
Das alles ist sehr schön und funktioniert reibungslos. Aber was macht man nun, wenn man eine Farbzusammenstellung produziert hat, die einem gefällt? Man gibt ihr einen Namen und passende tags und speichert sie im persönlichen "Mykuler" Bereich ab. Der Weg "nach draußen" aus kuler heraus geht über das Adobe Swatch Exchange Format. In diesem kann man seine Kreation speichern und anschließend in Photoshop bei den Farbfeldern hinzuladen.
Natürlich kann man auch jederzeit die Hex-Werte der Farben per copy&paste in seine Lieblings-Webseiten-Bastel-Software übertragen.
Alles in allem ein sehr schönes und brauchbares Programm.
Für den (Website-)Programmierer gibt es sogar ein API für kuler. Hier im Adobe Labs kuler Wiki kann man im Detail nachlesen, was damit alles möglich ist (z.B. Farblisten als RSS Feed abonnieren etc.)
Für die Mac Freunde unter uns sei noch das (kommerzielle und mit $50 nicht ganz billige) Programm Color Schemer Studio erwähnt, welches auf ähnliche Weise die möglichst geschmackvolle Zusammenstellung von Farben erlaubt, darüber hinaus aber noch einige Features mehr bietet, wie z.B. die Simulation diverser Farb-Seh-Schwächen! Sehr interessant.
Adobe Buzzword
Wer erinnert sich noch an Writely, die Textverarbeitung im Browser aus der dann Google Docs wurde? Wurde damals von der Firma Upstartle entwickelt und im März 2006 von Google gekauft.
Offenbar meinte Adobe, dass sie dem etwas entgegensetzen müssen und kauften vor kurzem die Firma Virtual Ubiquity und deren mee-too Produkt Buzzword.
Buzzword basiert auf Flash und Flex und sieht schon extrem schick aus. Natürlich ist es vom Funktionsumfang her weit von einem MS Word entfernt (wie auch Google Docs' Textverarbeitung). Aber dennoch: für das gemeinsame Arbeiten an einem Whitepaper oder einem anderen, nicht zu komplexen Dokument reicht es allemal. Und die hübsche Optik macht Spaß, so dass man gerne damit arbeitet (Flashplayer 9 vorausgesetzt).
Buzzword kann Kopf- und Fußzeilen, Grafiken (auch schön mit verschiedenen Textflussoptionen), Tabellen, Listen und hat prima Kommentierungsfunktionen. Als angemeldeter User kann man zu jedem Dokument verschiedene Rollen haben: Autor (darf alles), Überarbeiter (darf Kommentare schreiben) oder Leser (darf nur lesen).
Hochsensible Geheimdokumente sollte man freilich nicht mit Buzzword bearbeiten, denn wie auch bei Google Docs liegen alle Dokumente irgendwo auf der Welt im Internet auf einem Server. Wer fühlt sich dabei wohl? Ich nicht. Und das wird, glaube ich, auch ein Grund sein, weswegen sich diese Art von Textverarbeitung (oder auch Tabellenkalkulation bei Google Docs oder Bildbearbeitung bei Adobe Photoshop "online") noch lange nicht durchsetzen wird.
Hier gibts noch ein interessantes Video von Virtual Ubiquitys office closing party.
Und wer auf dem aktuellen Stand rund um Buzzword bleiben will, der sollte sich das offizielle Buzzword Blog bookmarken.
RapidWeaver Themes mit Farben
Das Geheimnis liegt in
der XML Datei Theme.plist, welche sich im
Hauptverzeichnis eines Themes befindet, also i.d.R.
hier: ~/Library/Application
Support/RapidWeaver/MeinTheme.rwtheme.
Diese .plist Datei kann man natürlich schön im
Property List Editor, der mit der Installation von
Apples Developer Tools kommt, öffnen. Die 20 Farben,
die man in obigem Screenshot sieht, finden ihre
Entsprechung dann in 20 Dictionary Knoten, nummeriert
von 0 bis 19:
Die vier RMStyleGroups (0
bis 3) korrespondieren dabei mit den vier
Vorlagenstilen, die man im Page View Inspector sieht,
wovon eben der vierte Knoten "Farben" heißt:
Ihre Knotennamen
"Breite", "Icons", "Sidebar" und "Farben" finden sich
im XML File dann wieder und zwar gleich in mehreren
Sprachen, da Themes durchaus localized sind:
Aber zurück zur
Definition und zum Umgang mit den Farben.
Nehmen wir an, ich möchte eine neue Farbe in mein
Layout einbringen, welche der Benutzer des Themes
ändern können soll. Zum Beispiel die Textfarbe einer
h5 Überschrift.
Wir gehen folgendermaßen vor: zuerst fügen wir einen
entsprechenden neuen Directory Knoten ins Theme.plist
File hinzu. Dafür eignet sich m.E. besser ein
Texteditor als der Property List Editor, denn da
können wir schön mit copy&paste arbeiten.
Flugs also den Texteditor der Wahl gestartet (ich
nehme immer gerne TextMate) und zur Stelle des
letzten solchen Eintrags navigiert:
Den markierten Block
copy&pasten wir direkt darunter und passen die
Strings entsprechend an. Beim "Tag" denken wir uns
einen geeigneten Namen aus; dies ist der
Variablenname, der im nächsten Schritt ins Stylesheet
File eingebaut wird. Das Ergebnis könnte also so
aussehen:
Als nächstes muss man
wissen, dass alle Farben, die auf diese Weise
festgelegt werden, nicht im "normalen" CSS
File, also styles.css zu definieren sind, sondern in
einem anderen namens colourtag.css. Wir ergänzen also
in diesem File:
h5 {
color: %colour_h5_text%;
}
Das war's! Leider habe ich noch keinen Weg gefunden,
RapidWeaver beizubringen, das neue Theme auch direkt
zu benutzen. Daher muss man einmal RW beenden und neu
starten, erst dann taucht das neue Farb-Kästchen auch
im Page Inspector auf:
Kleiner Test in h5.
Klappt.
Dass diese h5 Überschrift auch noch eine hellgraue,
gepunktete Linie unter dem Text hat, liegt daran,
dass die dafür notwendigen CSS Formatierungen dann
wiederum im File styles.css stehen:
h5 {
letter-spacing: 0px;
margin: 0 0 -8px;
font-size: 1.1em;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}
Aber eben nicht die Farbe, die steht ja in
colourtag.css.
Viel Spaß!
Generated Content mit CSS
Ich wusste zum Beispiel noch nicht, dass man mit Cascading Style Sheets (CSS) auch Content generieren kann. Für mich war das bisher etwas, um vorhandenen (HTML) Content zu formatieren. Aber nein, Stylesheets können auch Text bzw. HTML Code produzieren!
Und das geht zum Beispiel so.
h2:before
{
content: 'Chapter ';
}
Aha. Hier wird dann also bei der Verwendung des h2 tags immer der Text "Chapter " davorgesetzt.
Abgesehen von der :before Pseudoklasse gibt es noch die :after Pseudoklasse. Diese bestimmen, wo der generierte Content erscheinen soll: vor oder nach dem angegebenen Selektor.
Hinter dem Property-Namen content: kann jetzt aber auch nicht nur ein konstanter String stehen (wie im Beispiel oben; der übrigens auch HTML Code enthalten kann!), sondern noch so einiges mehr und das Schöne ist: man kann sie alle kombinieren, indem man sie einfach durch ein Leerzeichen getrennt hintereinanderschreibt.
Die folgenden Werte gibt es:
url()
In Klammern gibt man eine interne oder externe URL an und kann so z.B. eine Grafik oder ein Audiofile einbauen. Wenn man also nach jeder h2 Überschrift zweimal nacheinander ein kleines Ornament zur Trennung vom folgenden Text haben will, schreibt man ins CSS File:
h2:after
{
content:
url(images/ornament.png) url(images/ornament.png);
display:
block;
}
attr()
Hier schreibt man in Klammern den Namen des Attributs, dessen Inhalt man darstellen will. Schöner Anwendungsfall: will man unter jedem Bild eine Bildunterschrift haben, erfasst man diese einfach im alt Attribut des Bildes und schreibt dieses nach dem Bild raus:
img:after
{
content:
attr(alt);
display:
block;
}
counter()
Hiermit kann man dem Browser das Zählen beibringen – aber eine Erklärung würde den Rahmen dieses Blog-Beitrags sprengen. Auf Wunsch gern ein anderes Mal ...
inherit
Verwendet man inherit als Wert der content Property, wird einfach der bei dem Vaterelement angegebene content verwendet. (Reminder: CSSs sind ja hierarchisch, daher auch das "Cascading" im Begriff.)
open-quote/close-quote, no-open-quote/no-close-quote
Fügt Anführungs- bzw. Schlusszeichen hinzu. Hat aber mit der quotes Property zu tun und die wird nicht so richtig von allen Browsern unterstützt (außer Firefox und Opera). Ist ein komplexes Thema. Wer mehr wissen will, kann hier mal reinschauen.
Die "no-..." Varianten erhöhen bzw. erniedrigen den Quotationlevel um eins ohne Anführungszeichen auszugeben.
normal bzw. none
Hiermit wird kein Content hinzugefügt.
Use cases
Ein Anwendungsfall in Kombination mit Attribut-Selektoren: wenn man möchte, dass jeder Link auf seinen Seiten, der auf die eigene Homepage (also z.B. auf index.html) verweist, immer ein kleines Home-Icon (z.B. ein Häuschen) vor dem Link enthält, schreibt man ins CSS File einfach sowas hier (vorausgesetzt, das Icon liegt im Ordner images und der Filename ist "homeicon.png"):
a[href='index.html']:before {
content:
url(images/homeicon.png);
}
Oder man möchte einen kleinen Pfeil nach jedem Link haben:
a[href]:after {
content:
url(images/linkarrow.png);
}
Quelle: "CSS, DHTML & Ajax" by Jason Cranford Teague, Peachpit Press, Fourth Edition.