Flux ist ein WYSIWYG-Website-Editor für Macs. Bevor Sie nun flüstern, wie sehr Sie WYSIWYGs hassen, sollten Sie wissen, dass Flux anders ist und sowohl leistungsstark als auch flexibel genug ist, um von professionellen Webentwicklern verwendet zu werden.
Heute werde ich Ihnen Flux vorstellen, indem ich eine völlig einfache Webseite von Grund auf neu stelle (keine störenden starren Vorlagen). Auf dem Weg werden wir sehen, wie ein typischer Workflow aussieht und warum er vielleicht der beste visuelle Web-Editor ist, den ich je verwendet habe.
Warum unterscheidet sich der Fluss?
Wenn ich an einen WYSIWYG-Website-Editor denke, fallen mir zwei beliebte Anwendungen ein. Der erste ist Dreamweaver. Dreamweaver ist eine lächerlich leistungsstarke Anwendung, verfügt jedoch über eine relativ hohe Lernkurve. Es ist einfach eine riesige Anwendung, die für viele Designer, die sich bereits mit der manuellen Codierung per Hand beschäftigen, möglicherweise keinen Aufwand wert ist.
Die zweite Anwendung, die mir einfällt, ist iWeb. iWeb macht für ein paar Stunden Spaß, aber sobald Sie wissen, wie streng das Vorlagensystem ist, wird die Idee, es für professionelles Webdesign zu verwenden, zum Fenster. Selbst der weitaus überlegene Konkurrent RapidWeaver scheint Sie immer mehr zu voreingestellten Designs zu bewegen und scheint auf Neulinge der Webentwicklung ausgerichtet zu sein.
Dreamweaver ist also für Profis gedacht, hat jedoch eine steile Lernkurve und iWeb ist für Laien und hat fast keine Lernkurve (und folglich auch keine Flexibilität). Wo ist das glückliche Medium? Flux eingeben
Flux ist eine visuelle Webdesign-Anwendung für Menschen, die visuelle Webdesign-Anwendungen hassen. Der Workflow wurde sorgfältig erstellt, um die manuelle Codierung von Websites zu spiegeln. Das Beste: Es ist absolut flexibel. Es gibt einige mitgelieferte Vorlagen, aber ich habe mich nie wirklich damit beschäftigt, weil Flux es einfach macht, von Grund auf zu entwerfen, genau wie ich es tun würde, wenn ich den Code manuell ausschreiben würde.
Genug geredet, lass uns Flux in Aktion sehen.
Was wir bauen
Da ich möchte, dass dies eine wirklich grundlegende Einführung ist, wird das Design sehr einfach gehalten. Wenn ich in den Kommentaren genug Anfragen bekomme, kann ich ein weiteres, ausführlicheres und fortgeschritteneres Tutorial schreiben, aber im Moment bleiben wir bei einer einfachen Seite mit einer Seite, die sehr wenig enthält.
Ziemlich einfach richtig? Es sieht fast aus wie eine der kitschigen Vorlagen, die mit diesen Apps geliefert werden, aber wie ich oben sagte, werden wir diese von Grund auf aufbauen.
Schritt 1: Neues Projekt erstellen
Das Erstellen eines neuen Projekts in Flux ist ein schmerzloses Verfahren. Alles, was Sie tun, ist auf Datei> Neu zu gehen und Sie sind unterwegs. Sie werden gefragt, wo Sie die Dateien ablegen möchten und ob Flux automatisch eine grundlegende Site-Struktur für Sie erstellen soll. Dies umfasst Folgendes: index.html, main.css und einen Bilderordner. In diesem Fall möchte ich genau das Format verwenden, das ich für mich einrichten möchte. Wenn Sie ein anderes System haben, das Ihnen besser gefällt, können Sie dies manuell tun.
Wenn Sie auf die HTML-Datei doppelklicken, gelangen Sie in die Hauptoberfläche von Flux. Wie Sie sehen, ist hier viel los. Tatsächlich könnten wir das gesamte Tutorial damit verbringen, nur die einzelnen Tasten und Funktionen zu besprechen. Um die Dinge jedoch weniger langweilig zu gestalten, gehen wir direkt zum Gebäude und stellen Funktionen vor, sobald sie auftauchen. Ich empfehle Ihnen auf jeden Fall, die Demo herunterzuladen und in der Benutzeroberfläche herumzuschauen, um sich damit vertraut zu machen.
Schritt 1: Styling des Körpers
Wenn Sie auf die große leere Zeichenfläche klicken, sollte ein Feld angezeigt werden, das mit dem Wort "Körper" hervorgehoben wird. oben links. Dies ist die leere Körperstruktur Ihres HTML-Codes. Das erste, was wir für unsere Site tun wollen, ist, diesem Element einen Hintergrund hinzuzufügen.
Klicken Sie dazu oben auf den Inspector-Button (sieht aus wie ein Fernglas). Dadurch wird das, was meiner Meinung nach das Herz der App ist, angezeigt. Hier erstellen Sie Stile und definieren das Erscheinungsbild für jedes Element, das Sie in Flux erstellen. Die Ausgabe des Inspektors ist CSS, und alle Steuerelemente darin sind mit den CSS-Eigenschaften beschriftet, mit denen Sie arbeiten.
Hintergrundfarbe hinzufügen
Wenn wir diese Site von Hand codieren, könnte der erste Schritt darin bestehen, eine Hintergrundfarbe für den Körper festzulegen. Im nächsten Schritt verwenden wir tatsächlich ein sich wiederholendes Bild. Wir möchten jedoch sicherstellen, dass der Hintergrund auch dann richtig aussieht, wenn das Bild nicht geladen wird.
Wenn der Körper ausgewählt ist, gehen wir zum? Fill? Abschnitt auf der linken Seite des Inspektors. Das Anwenden einer Hintergrundfarbe ist von hier aus so einfach wie das Klicken auf die entsprechende CSS-Eigenschaft und das Eingeben unserer Farbe. in diesem Fall # 1f1f21.
Hintergrundbild hinzufügen
Um ein Hintergrundbild hinzuzufügen, führen wir im Grunde die gleichen Schritte aus und navigieren einfach zu der richtigen Datei im Bilderordner. Ich habe einen fantastischen kostenlosen Hintergrund von Premium Pixels verwendet.
Schritt 2: Einen Container hinzufügen
Wenn Sie einen Container zu einer Site hinzufügen möchten, würden Sie normalerweise nur ein div einfügen, und genau das funktioniert in Flux. Klicken Sie auf den Container. Knopf oben und gehen Sie zu "Quick Div.". Stellen Sie sicher, dass Sie bei diesem Schritt das Body-Element ausgewählt haben. In Flux möchten Sie immer das gewünschte übergeordnete Objekt auswählen, wenn Sie ein neues Element erstellen. Dadurch wird sichergestellt, dass es in den richtigen Teil Ihres HTML-Codes eingefügt wird.
Dadurch sollte eine kleine leere Box mit Hilfslinien auf Ihrer Leinwand erstellt werden.
Wählen Sie wie zuvor das Element aus und öffnen Sie den Inspektor. Stellen Sie unter "Position & Größe" die Breite auf 700px und die Höhe auf 810px ein. Stellen Sie sicher, dass Sie die Standardwerte für? Top? und links? während du dabei bist.
Ein Element automatisch zentrieren
Wenn Sie nun ein Webentwickler sind, wissen Sie bereits genau, wie Sie dieses div zentrieren: Setzen Sie die Ränder auf auto. Sie können dies manuell tun oder einfach auf das kleine Zahnrad oben rechts im Inspector klicken und zu "Auto Center" gehen.
Einen Schatten hinzufügen
An dieser Stelle sollten Sie den grundlegenden Rahmen für die Site haben.
Ich möchte nur zum Spaß einige der in Flex integrierten Webkit CSS3-Funktionen zeigen. Klicken Sie auf? Webkit? Im Inspector werden einige CSS-Eigenschaften angezeigt: Box-Shadow, Box-Reflect, Webkit-Übergänge usw. Leider gibt es keine Mozilla-Entsprechungen, die Sie jedoch manuell in den Code einfügen können.
Um unserem Container einen Schatten hinzuzufügen, klicken Sie einfach auf die Eigenschaft und passen Sie die Einstellungen an.
Inline-Styles?
Interessierte Beobachter haben wahrscheinlich inzwischen bemerkt, dass die von uns erstellten Stile auf "Inline" eingestellt sind. Dies ist eine der Macken des Flux-Workflows. Aus irgendeinem seltsamen und unbekannten Grund sind alle Ihre Stile standardmäßig auf Inline eingestellt. Es ist tatsächlich etwas einfacher, Elemente in Flux einzurichten, wenn sie auf Inline eingestellt sind. Daher empfiehlt die Flux-Website, dass Sie ein Element wie gewünscht auf die gewünschte Weise einrichten und dann die Stile in etwas konvertieren, das angezeigt wird im externen Stylesheet.
Fürchte dich nicht, das ist ein schneller und schmerzfreier Prozess. Wählen Sie das Objekt aus, das Sie konvertieren möchten, klicken Sie mit der rechten Maustaste darauf und wählen Sie die Option Create Style with aus. ? Möglichkeit. Daraufhin wird das folgende Dialogfeld angezeigt, in dem Sie dem Objekt eine ID oder Klasse zuweisen können.
Dadurch wird links ein kleines Symbol mit der gerade angewendeten ID erstellt. Dieser Bereich ist im Wesentlichen ein Überblick über unsere CSS-Datei. Wenn Sie nun die Eigenschaften dieses Containers ändern möchten, doppelklicken Sie hier auf das Symbol, um den Inspektor zu starten.
Schritt 3: Die Kopfzeile
Die Schritte, die wir gerade gelernt haben, legen den Workflow für die Erstellung des gesamten Inhalts unserer Seite fest. Um den Namen der Firma zu unserer Kopfzeile hinzuzufügen, erstellen wir eine weitere Quick Div. Doppelklicken Sie dieses Mal jedoch, um sie einzugeben (dies erstellt im Wesentlichen ein? P? -Tag). Sobald Sie das eingegeben haben, was Sie möchten, können Sie den Text nach Ihren Wünschen gestalten. Wie Sie unten sehen können, habe ich Einstellungen für Farbe, Schriftfamilie, Textumwandlung, Textausrichtung und Schriftgröße hinzugefügt.
Als nächstes machen Sie dasselbe für den Text unterhalb der Überschrift.
Das sollte Ihnen einen schönen typografischen Header für Ihre Seite geben. Denken Sie daran, beide Elemente wie zuvor in externe Stile zu konvertieren.
Schritt 4: Das Bild
Jetzt können wir unser großes Image einbringen. Ich werde ein Foto verwenden, das ich selbst aufgenommen habe, aber Sie können alles, was Sie möchten.
Wählen Sie zunächst den Container aus und erstellen Sie ein Div, das 700px breit und so groß ist, wie Sie es benötigen. Setzen Sie dann den Hintergrund des div auf Ihr Bild und den Hintergrund auf "Keine Wiederholung". Wenn das Bilddiv ausgewählt ist, können Sie die Pfeiltasten verwenden, um es nach oben oder unten zu verschieben, um es in Position zu bringen, nachdem dies alles ein WYSIWYG ist!
Schritt 5: Den Text abschließen
An diesem Punkt wäre das Tutorial überflüssig, wenn wir zu sehr ins Detail gehen würden. Es gibt wirklich nicht mehr viel zu tun, als ein paar weitere divs zu erstellen, sie mit Text zu füllen und sie wie oben beschrieben zu gestalten. Ich blieb bei dem Georgia-Schriftart-Design, das ich verwendet hatte, und machte meine Überschrift größer als die Absatzkopie.
Zu beachten ist, dass Sie zum Erstellen eines Links einfach ein Element oder einen Textblock auswählen und zu Bearbeiten> QuickLink wechseln. Damit sollte die Seite fertig sein!
Was ist mit dem Kodex?
Wenn Sie den Code an einem beliebigen Punkt anzeigen und bearbeiten möchten, drücken Sie einfach die Befehlstaste 3, um den Code-Viewer aufzurufen.
Flux spuckt schönen sauberen Code aus, der vollständig in den Entwicklungsprozess integriert ist. Mit der WYSIWYG-Benutzeroberfläche können Sie so viel oder so wenig wie Sie möchten und den Rest von Hand erledigen. Da Flux nur einfache alte HTML- und CSS-Dateien verwendet, können Sie beim Erstellen in Flux sogar in Ihrem bevorzugten Code-Editor auf der Website arbeiten. Der Workflow ist vollständig offen. Wenn Sie also irgendetwas so machen möchten, wie Sie es immer getan haben, können Sie dies tun!
Was macht Flux sonst?
Dieses Tutorial hat die Oberfläche von Flux nicht verkratzt. Hier sind ein paar andere Features, auf die man sich freuen kann:
- Eingebaute Layout-Module für schnelles Prototyping
- Live-Browser-Ansicht
- JavaScript, PHP und all das Jazz
- WordPress Theme-Unterstützung
- Wiederverwendbare Code-Snippets
- Verlaufspalette
- Widget-Palette - Erstellen Sie einfache Galerien und jQuery-Effekte
- HTML5-Unterstützung
- Google Font API-Unterstützung
- Tonnenweise mehr, von denen ich noch nichts weiß!
Schlussgedanken
Ich habe Flux vor einigen Versionen zum ersten Mal verwendet (Flux befindet sich jetzt in der dritten Iteration) und fand die Idee toll, war aber nicht verrückt nach der Hinrichtung. Es fühlte sich ein bisschen fehlerhaft an (alles, was jetzt behoben wurde) und es schien nicht so einfach zu sein, einfach mitzunehmen.
Diese Begegnung war jedoch recht kurz und ich wollte immer zurückgehen und es wirklich durchgehen lassen. Ich habe die letzten zwei Tage mit Flux gespielt und muss sagen, dass, nachdem ich mir die Zeit genommen hatte, um den richtigen Workflow herauszufinden, die Arbeit mit Flux ein Traum war. Es dauert definitiv eine Weile, um alle Macken herauszufinden, aber wenn Sie erst einmal fertig sind, nehmen sie keine Zeit auf und fühlen sich ganz natürlich.
Zumindest ist Flux hervorragend für das Prototyping. Fans von Design im Browser anstelle von Photoshop werden die meisten ihrer Anliegen hier ansprechen, da Sie gezwungen sind, unter Verwendung der tatsächlichen CSS-Eigenschaften und der Positionierung anstelle von Photoshop-Effekten zu entwerfen. Mein Lieblingsteil an der App ist, dass Sie durch den gesamten Prozess nicht dazu verleitet werden. Es gibt keine Flux-Projektdateien, über die Sie sich Gedanken machen müssen, nur die Dateien, die Sie normalerweise zum Erstellen einer Site verwenden würden. Dies bedeutet, dass Sie zu einer anderen App wechseln oder das Projekt an einen Kollegen oder Kunden weitergeben können, der weder Flux braucht noch wissen muss, dass Sie es verwendet haben.
Wenn Sie ein Entwickler sind, der manuell schreibt und oft von einem WYSIWYG träumt, der nicht saugt und sich tatsächlich an Ihre derzeitige Arbeitsweise anpassen kann, empfehle ich Ihnen dringend, Flux einen Schuss zu geben.Es kann am Anfang ein wenig frustrierend sein, aber nehmen Sie sich die Zeit, um das durchzustehen und herauszufinden, wie Sie die App wirklich richtig verwenden.