Die Adobe Labs sind anscheinend extrem fleißig. Ich berichtete ja schon von Thermo und Kuler. Diesmal gehts um eine (weitere) Textverarbeitung im Webbrowser mit Collaboration Features: 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.

Tags: Buzzword, Textverarbeitung, Web 2.0, Adobe

Der Adobe Newsletter brachte letztens ein interessantes Video zu Adobes zukünftigem Produkt codenamed "Thermo".

Das Video sagt eigentlich alles... Daher nur kurz: mit Thermo kann man sich sein GUI in Photoshop erstmal zeichnen und dann die gezichneten Elemente in ein tatsächlich funktionierendes GUI mit Listen, Scrollbars, Eingabefeldern etc. umwandeln.
Thermo produziert dann (leider nur) Flex Programmcode für dieses GUI, so dass man seine Flex Anwendung einfach drumherum basteln kann.

Die Adobe Labs Wiki Seiten zu Thermo sind noch nicht so umfangreich und man kann leider auch noch keine beta-Version downloaden.

Ich hoffe SEHR, dass ich diese sehr schöne neue Art der Umwandlung eines GUI Entwurfs in Programmcode mal in Apples Xcode und InterfaceBuilder sehe!!

Tags: Adobe, Photoshop, Prototyping, Xcode

Ja da schau her! Man lernt nie aus.

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.

Tags: CSS