Xpressive

Xpressive ist das neue CSS3 Live Design Tool für Mac OS X. Mit Xpressive lassen sich Webseiten perfekt für alle Bildschirmgrößen anpassen.

Xpressive

Xpressive ist zwar ein neuer Editor für HTML und CSS, jedoch nutzt er als Code Editor selbst den DOM Inspektor (veilleicht einigen bekannt durch den Safari Inspektor). Der DOM Inspektor bietet einem verschiedene Ansichten des Codes. So kann er jedes Dokumenten Format als reinen Text anzeigen oder HTML Dateien als eine Art Baum. Also jeder Tag wird gruppiert. Klappt man einen Tag auf, werden die darin beinhalteten Tags angezeigt, diese können wieder aufgeklappt werden und so weiter.
Mit dem Select Tool lassen Sich Elemente auf der Webseite direkt auswählen und im Code anzeigen. Andersrum funktioniert das im übrigen auch. Wählt man einen Tag im DOM Inspektor aus, wird dieses Element auf der Webseite farbig hervorgehoben.

Selection Tool

Das wohl beste an Xpressive ist das bearbeiten der CSS Attribute. Über den Style Inspektor lassen sich alle verwendeten CSS Dateien manipulieren. Hier werden alle definierten Klassen in dem jeweiligen Dokument aufgelistet. Für jede Klasse kann man dann die jeweiligen Attribute verändern bzw. hinzufügen oder auch löschen. Die ausgewählte Klasse wird im Dokument farbig hervorgehoben. So behält man immer im Überblick welche Elemente die Klasse verwenden. Natürlich wird jede Veränderung Live angezeigt auf der Seite.

Style Inspector

Beim hinzufügen oder auch bearbeiten von Attributen, bietet Xpressive über Popups Code Vorschlage und leichte Bearbeitung durch z.B. Color Picker oder ähnliche Popups.

Style Inspector + Color Picker

Für responsive Web-Design lassen sich sowohl @media als auch @keyframes Tags in die CSS Dateien einbauen. Um dann zu testen wie die Webseite auf dem jeweiligen Gerät aussieht, kann man mit dem sogenannten „Responsive Ruler“ die Anzeigegröße des Fensters anpassen. Sehr praktisch!

Insert Rule

Das bearbeiten der HTML und CSS Code funktioniert sowohl lokal als auch im web. Entweder man erstellt ein neues Projekt in Xpressive, welche im Finder gespeichert wird und in der Xpressive Projektliste auftaucht.
Oder man gibt in dem Adress Feld eine externe Adresse ein. Hier funktionieren DOM und CSS Inspektor genau so. Wer seine Änderungen speichern will muss aber vorher die Webseite über den „Download“ Button auf den Mac runterladen.

Download Webseiten

Insgesamt finde ich schade, das Xpressive durch den DOM Inspektor relativ eingeschränkt ist beim erstellen von HTML Code. Zwar ist auch mit dem DOM Inspektor alles möglich (schließlich ist im Endeffekt alles nur Text), doch wer konstruktiv eine Webseite erstellen will, sollte noch einen anderen Code Editor nutzen mit Code-Vervollständigung, Syntax Highlights und so weiter.
Xpressive bietet trotz dem einige sehr nützliche Funktionen! Jedoch fehlt es allgemein bisschen an Übersichtlichkeit. Ich denke man benötigt etwas zeit zum einarbeiten. Wer jedoch nicht gerade ein Laie ist und wer auch auf responsive Webseiten setzt (was im übrigen ein sehr guter Gedanke ist!😉 ), der könnte mit Expressive einiges auf die Beine stellen.
Auch durch das Einführungstutorial gibt es einem einen guten Einblick in Xpressive.

In meinen Augen ist Xpressive momentan ein spezieller CSS Editor, mit live Vorschau. (wobei „speziell“ nicht schlecht gemeint ist!)

PREIS:
19,99€

ENTWICKLER:
Modulay Inc.

SYSTEMVORAUSSETZUNGEN:
OS X 10.8 oder neuer, 64-Bit-Prozessor

MAC APP STORE LINK

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s