Vor kurzem haben wir uns Easel angesehen, einen webbasierten Builder für Websites, der Twitter Bootstrap nutzt. Heute folgen wir einem Rundgang durch ein sehr ähnliches Werkzeug: Divshot.
Mit Divshot können Sie schnell und einfach übersichtliche, responsive Webseitenlayouts erstellen, indem Sie visuelle Werkzeuge und Handcodierung verwenden. Es ist ein wirklich schlankes Werkzeug und ich denke, Sie werden es genießen.
Treffen Sie DivShot
Wenn Sie unseren Artikel über Staffelei lesen, ist Divshot sehr vertraut. Das Konzept hier ist genau das gleiche. Sie erhalten eine visuelle Drag-and-Drop-Oberfläche, die auf Twitters beliebten Bootstrap-Framework aufbaut.
Wie Sie sehen, haben wir wie bei Easel eine große Leinwand, die den Großteil des Bildschirms einnimmt, und eine Seitenleiste, in der sich alle Werkzeuge, Elemente der Benutzeroberfläche und Anpassungsoptionen befinden. Alles, was Sie hier sehen, ist sehr unkompliziert und sehr einfach zu bedienen. Lass uns rein springen und eine Seite erstellen.
Erstellen Sie eine neue Seite
Am oberen Rand der Benutzeroberfläche sehen Sie eine horizontale Leiste mit zwei Steuerelementen: eines zum Erstellen von Ordnern und eines zum Erstellen von Dateien. Erstellen Sie zuerst einen neuen Ordner mit einem Dropdown-Menü auf der rechten Seite und dann eine neue Seite mit dem Dropdown-Menü auf der rechten Seite.
Durch das Erstellen einer neuen Seite wird der unten abgebildete Bildschirm angezeigt. Hier können Sie aus verschiedenen Starter-Layouts wählen (ein Schlüsselelement, das in Easel fehlt), die aktuelle Seite klonen oder von vorne beginnen.
Lassen Sie uns abenteuerlustig sein und eine neue leere Seite erstellen, damit wir wirklich ein Gefühl dafür bekommen können, wie es ist, mit diesem Tool etwas zu bauen.
Fügen Sie ein Navigationsmenü hinzu
Wenn Sie mit Ihrer neuen Seite begonnen haben, werfen Sie einen Blick in die Seitenleiste auf der linken Seite und finden Sie die Komponenten. Sektion. Hier finden Sie alle Teile der Bootstrap-Benutzeroberfläche, mit denen Sie vertraut sind, wenn Sie das Framework jemals verwendet haben.
Blättern Sie durch die verschiedenen Optionen, bis Sie die Navigationsleiste finden. Ziehen Sie dies in den Bereich mit dem gestrichelten Rand (dem Bootstrap-Seitencontainer).
Mit etwas Mühe haben wir uns oben auf unserer Seite ein schönes, kleines Navigationsmenü vorgestylt. Es enthält einen Platz für einen Firmennamen und zwei Seiten.
Das Anpassen dieses Menüs ist einfach. Doppelklicken Sie auf einen Text, um einen Ersatzwert einzugeben, und ziehen Sie bei gedrückter Wahltaste ein Menüelement, um es zu duplizieren. Ich habe den Firmennamen in "Design Shack" geändert. und kopierte ein paar weitere Menüpunkte. Hier ist das Ergebnis:
Die Heldeneinheit
So läuft der Workflow ab. Jetzt ziehen wir einfach weiter Elemente aus der Seitenleiste und passen sie an. Als nächstes ziehen wir eine "Heldeneinheit".
Die Anpassung ist wieder ganz einfach. Alles, was ich tat, war einen Doppelklick auf den Text und etwas Neues einzugeben. Jetzt haben wir einen schönen Header für unsere Seite.
Layout
Lassen Sie uns nun etwas mehr mit einer Freiform-Layout-Übung beginnen. Ich möchte drei Inhaltsspalten erstellen. Dazu ziehe ich ein? Layout? Modul und das bekomme ich:
Wie Sie sehen, ist dies standardmäßig in zwei Spalten aufgeteilt. Wenn ich den Inspektor in der Seitenleiste auschecke, kann ich dies anpassen, indem Sie die Zahlen manuell eingeben oder auf eines der vorgefertigten Layouts klicken.
Ich klickte auf das Drei-Spalten-Layout und überprüfte die "Flüssigkeitsspalten". Box. Nun sieht mein Layout-Modul eher so aus, wie ich es möchte, und ist bereit, Inhalte zu empfangen.
Kerninhalt
Jetzt, da wir über diese schicken Layout-Boxen verfügen, die festlegen, wohin unsere Inhalte gehen sollen, müssen wir nur einige Elemente in sie ziehen. Ich habe in eine Überschrift, einen Absatz und ein Bild hineingeworfen und die verfügbaren Anpassungsoptionen angepasst.
Benutzerdefinierte CSS
Meine Lieblingsfunktion in Divshot ist die Möglichkeit, Ihren eigenen benutzerdefinierten Code hinzuzufügen. Dies ist absolut wichtig, wenn Sie einen echten WYSIQYG für echte Entwickler in Betracht ziehen. Wenn ich etwas nicht anpassen kann, das mir nicht gefällt, werde ich Ihre App einfach nicht verwenden.
Eine Sache, die ich derzeit in meinem Layout nicht mag, ist der fehlende Platz zwischen diesen Platzhalterbildern und den Absätzen darunter. Dies ist jedoch leicht zu beheben. Zuerst füge ich jeder Box eine Klasse hinzu. Optionen.
Wenn ich jetzt auf die Schaltfläche? CSS bearbeiten? Wenn Sie auf die Schaltfläche unten links klicken, wird eine Leiste am unteren Rand des Bildschirms eingeblendet, in der Sie benutzerdefinierte CSS hinzufügen können. Besonders gefällt mir, dass ich hier Vorprozessoren verwenden kann. Alles wird live zusammen mit einer Fehlerberichterstattung kompiliert. Genial!
Mit diesem Code haben meine Navigationsleiste und meine Bilder nun etwas Platz zum Atmen. Viel besser! Wenn Sie es brauchen, gibt es auch ein Modul zum Anpassen von benutzerdefiniertem HTML-Code, sodass Sie wirklich die Freiheit haben, das zu tun, was Sie möchten.
Mehr Werkzeuge
Oben rechts auf dem Bildschirm haben Sie einige verschiedene Werkzeuge, die es wert sind, erwähnt zu werden. Es gibt ein Standard-Rückgängig / Wiederherstellen, einen Code-Download, eine Live-Vorschau und eine Schaltfläche zum Ändern des Ansichtsfensters
Denken Sie daran, dies ist alles auf Boostrap aufgebaut, was bedeutet, dass Ihre Designs vollständig reagieren sollten. Das ist ein tolle Bonus, der nicht übersehen werden sollte. Dies ist eine der einfachsten Methoden, die ich kenne, um eine gut aussehende responsive Website zu erstellen. Es gibt sogar ein Menü, in dem Sie festlegen können, ob ein Element in einer bestimmten Ansichtsfenstergröße verborgen oder sichtbar ist.
Staffelei oder Divshot? Welches ist besser?
Jetzt habe ich zwei dieser Tools ausprobiert und überprüft. Die Frage ist, an welche Frage sollten Sie sich wenden, wenn Sie eine Bootstrap-Site erstellen möchten. Um ehrlich zu sein, gibt es keinen klaren Gesamtsieg. Wenn wir uns jedoch einzelne Aspekte ansehen, habe ich starke Meinungen darüber, was besser ist.
Arbeitsablauf & Layout: Divshot
Im Allgemeinen war der Workflow- und Layout-Prozess in Divshot wesentlich besser als in Easel. Der Easel-Workflow war unübersichtlich und ich habe in meinem Test einige Vorschläge zur Verbesserung gemacht.Als ich Divshot ausprobierte, stellte ich fest, dass es sehr genau mit dem übereinstimmt, was ich mir vorstellte, Staffelei sollte sein.
Ich habe das Spaltenlayout-Modul geliebt und wie einfach es war, an meine eigenen Bedürfnisse anzupassen. Staffelei hat etwas Ähnliches, aber es ist nicht so glatt oder intuitiv.
Typ und Symbole: Staffelei
Dies ist ein Ort, an dem Staffelei der klare Gewinner ist. Es bietet vollständige Unterstützung für Google Web Fonts und ermöglicht eine weitaus größere Anpassung an Ihren Typ. Selbst ohne die benutzerdefinierten Schriftarten waren die Typenwerkzeuge in Easel wesentlich besser.
Darüber hinaus bietet Easel auch eine Integration mit FontAwesome, sodass Sie auf eine Vielzahl von großartigen Symbolen zugreifen können, die Sie schnell in Ihre Arbeit werfen können.
Eine coole Sache, die Divshot tut Have ist jedoch ein Theme-Switcher, mit dem Sie das Gesamtdesign des gesamten Designs mit wenigen Klicks ändern können. Derzeit gibt es dreizehn Themen und ein? Custom? Möglichkeit.
Code-Export: Staffelei
Beide Apps verfügen über eine Funktion zum Exportieren von Codes, aber die für Easel war wesentlich robuster und eindrucksvoller, sodass Sie alle Elemente sehen und eine ZIP-Datei herunterladen können, die alles enthält.
Anpassung: Divshot
Dies ist buchstäblich das wichtigste Feature für mich als Benutzer, und ich gebe dieses an Divshot weiter. Die benutzerdefinierten Code-Anpassungsfunktionen hier sind wirklich nett, insbesondere das CSS-Modul. Ich hatte wirklich das Gefühl, ich könnte alles tun, was ich wollte, und ich schätzte diese Freiheit wirklich sehr.
Platzhalterbilder: Divshot
Das Platzhalter-Image-System war eine meiner größten Beschwerden über Easel. Ihre Platzhalterbilder schienen super fehlerhaft und schwer zu bearbeiten. Im Vergleich dazu sind Divshots wirklich unkompliziert und einfach zu bedienen.
Preisgestaltung: ?
Divshot befindet sich derzeit in einer kostenlosen öffentlichen Betaversion. Daher ist es unmöglich zu sagen, wie die beiden Preise im Preisvergleich sein werden, bis Divshot seine Preispläne veröffentlicht. Sie werden eine Menge zu leben haben, weil ich die Staffelungsstruktur von Easel wirklich mag. Es ist nicht besonders günstig, aber Sie bekommen einiges auf dem kostenlosen Plan:
Divshot Beschwerden & Feedback
Ich habe den Einsatz von Divshot sehr genossen und denke, dass es eines der besten Rapid-Prototyping-Tools ist, die mir begegnet sind. Bootstrap eignet sich so gut für diese Art von App, und ich bin begeistert, dass Entwickler hart daran arbeiten, Tools zu erstellen, die die Verwendung von Bootstrap noch einfacher machen. Davon abgesehen gibt es definitiv einige Bereiche, die verbessert werden müssen.
Typ saugt
Zuerst die Anpassung der Typografie. Wieder einmal muss Divshot eine Seite aus Easels Buch zu dieser Seite entnehmen. Ihre Textwerkzeuge sind viel intuitiver und leistungsfähiger.
Besseres Box-Modell-Tweaking
Ich denke, dass es derzeit zu viel Arbeit ist, um den Abstand verschiedener Objekte zu verändern. Es ist schön, dass ich die Möglichkeit habe, mein eigenes CSS zu schreiben, aber für etwas so einfaches wie Auffüllen und Rand sollte ich in der Lage sein, die Zahlen in ein Feld einzugeben, in das ich die Dimensionen einfüge.
CSS-Download
Derzeit enthält die Codeexportfunktion nur HTML. Ich muss auf jeden Fall eine Option sehen, um alles in einem Download zusammenzufassen, wie wir es bei Easel gesehen haben.
Buggy-Vorschau
Ich bin mir nicht sicher, warum, aber es schien, als wäre meine Live-Vorschau immer eine Änderung dahinter, so dass sie fast nie den tatsächlichen Status meines Dokuments widerspiegelte. Das war ziemlich nervig!
Gib mir etwas Platz!
Es fiel mir sehr schwer, Elemente am unteren Rand meines Layouts hinzuzufügen, wenn sie sich unterhalb der Grenzen des Darstellungsbereichs befanden. Gib mir da unten etwas mehr Platz zum Arbeiten, auch wenn es nicht in der tatsächlichen Ausgabe liegt.
Was denkst du?
Divshot ist eine hervorragende App, und ich denke auf jeden Fall, dass Sie es versuchen sollten, besonders wenn Sie ein Fan von Boostrap, Foundation und anderen ähnlichen All-Inclusive-Frameworks sind.
Nachdem Sie gesehen haben, worum es bei Divshot geht, lassen Sie einen Kommentar und lassen Sie mich wissen, was Sie denken. Würden Sie das über Staffelei verwenden? Warum oder warum nicht? Welche anderen ähnlichen Tools sind Ihnen begegnet und wie vergleichen sie sich?