Nous avons récemment examiné de près le logiciel de création de sites Web Easel, qui exploite Twitter Bootstrap. Aujourd'hui, nous poursuivons dans la même voie avec un outil très similaire: Divshot.
Avec Divshot, vous pouvez créer rapidement et facilement des présentations de page Web nettes et réactives à l'aide d'une combinaison d'outils visuels et de codage manuel. C'est un outil vraiment astucieux et je pense que vous allez adorer l'utiliser.
Rencontrez DivShot
Si vous lisez notre article sur Easel, Divshot vous semblera très familier. Le concept ici est exactement le même. Vous disposez d'une interface visuelle de style glisser-déposer construite sur le très populaire framework Bootstrap de Twitter.
Comme vous pouvez le constater, comme avec Easel, nous avons un grand canevas qui occupe la majeure partie de l’écran et une barre latérale où résident tous les outils, éléments de l’interface utilisateur et options de personnalisation. Tout ce que vous voyez ici est très simple et facile à utiliser. Faisons un saut et construisons une page.
Créer une nouvelle page
En haut de l'interface, vous verrez une barre horizontale contenant deux contrôles: l'un pour créer des dossiers et l'autre pour créer des fichiers. Tout d’abord, créez un nouveau dossier avec le menu déroulant à droite, puis une nouvelle page avec le menu déroulant à droite.
La création d'une nouvelle page fait apparaître l'écran ci-dessous. Ici, vous pouvez choisir parmi différentes dispositions de départ (une fonction clé manquante dans Easel), cloner la page en cours ou repartir de zéro.
Soyons aventureux et commençons une nouvelle page vierge afin que nous puissions vraiment avoir une idée de comment il est de construire quelque chose avec cet outil.
Ajouter un menu de navigation
Une fois que vous avez commencé votre nouvelle page, jetez un oeil à la barre latérale à gauche et trouvez les? Composants? section. C'est ici que vous trouverez tous les éléments de l'interface utilisateur Bootstrap que vous connaissez si vous avez déjà utilisé le framework.
Faites défiler les différentes options jusqu'à la barre de navigation. Faites-le glisser dans la zone avec la bordure en pointillé (le conteneur de page Bootstrap).
Avec ce petit effort, nous avons nous-mêmes un joli petit menu de navigation pré-stylé en haut de notre page. Il vient avec un espace pour un nom de société et deux pages.
Personnaliser ce menu est facile. Double-cliquez sur un morceau de texte pour saisir une valeur de remplacement et faites glisser un élément du menu tout en maintenant la touche Option enfoncée pour la dupliquer. J'ai changé le nom de l'entreprise en? Design Shack? et copié quelques éléments de menu plus. Voici le résultat:
L'unité de héros
Ceci est fondamentalement la façon dont le flux de travail se passe. Maintenant, nous allons simplement continuer à faire glisser et à personnaliser les éléments à partir de la barre latérale. Ensuite, faisons glisser une "unité de héros".
Encore une fois, la personnalisation est super facile. Tout ce que j'ai fait était de double-cliquer sur le texte et de saisir quelque chose de nouveau. Nous avons maintenant une belle tête pour notre page.
Disposition
Examinons maintenant un peu plus un exercice de mise en forme libre. Je veux créer trois colonnes de contenu. Pour ce faire, je fais glisser un? Layout? module et voici ce que je reçois:
Comme vous pouvez le constater, par défaut, il est divisé en deux colonnes. Si je vérifie l'inspecteur dans la barre latérale, je peux le personnaliser en saisissant des nombres manuellement ou en cliquant sur l'une des présentations préfabriquées.
J'ai cliqué sur la disposition en trois colonnes et coché la case "Colonnes fluides". boîte. Maintenant, mon module de mise en page ressemble plus à ce que je veux et est prêt à recevoir du contenu.
Contenu de base
Maintenant que nous avons ces superbes boîtes de mise en forme qui définissent l’orientation de notre contenu, nous n’avons plus qu’à y glisser certains éléments. J'ai ajouté un en-tête, un paragraphe et une image dans chacun d'eux, peaufinant au fur et à mesure les options de personnalisation disponibles.
CSS personnalisé
Ma fonctionnalité préférée dans Divshot est la possibilité d’ajouter votre propre code personnalisé. C'est absolument essentiel si vous voulez que de vrais développeurs envisagent même d'utiliser une sorte de WYSIQYG. Si je ne peux pas personnaliser quelque chose que je n'aime pas, je ne vais tout simplement pas utiliser votre application.
Une des choses que je n’aime pas dans ma mise en page, c’est le manque d’espace entre ces images et les paragraphes situés en dessous. C'est facile à résoudre cependant. Premièrement, je vais ajouter une classe à chacune des cases en utilisant la? Structure? options.
Maintenant, si je frappe le? Edit CSS? bouton en bas à gauche, une barre apparaîtra en bas de l'écran et me permettra d'ajouter du CSS personnalisé. J'aime particulièrement le fait que je puisse utiliser des pré-processeurs ici. Tout est compilé en direct, avec signalement des erreurs. Impressionnant!
Avec ce code, ma barre de navigation et mes images ont maintenant un peu d’espace pour respirer. Beaucoup mieux! Si vous en avez besoin, vous disposez également d'un module permettant d'ajouter du code HTML personnalisé. Vous avez donc toute liberté pour faire ce que vous voulez.
Plus d'outils
En haut à droite de l’écran, vous trouverez quelques outils qui méritent d’être mentionnés. Il y a un Undo / Redo standard, un téléchargement de code, un aperçu en direct et un bouton pour changer de fenêtre.
N'oubliez pas que tout cela est construit sur Boostrap, ce qui signifie que vos conceptions doivent être entièrement réactives. C'est un incroyable bonus qui ne devrait pas être passé sous silence. C’est l’un des moyens les plus simples que je connaisse pour vous construire un site Web agréable et réactif. Il existe même un menu qui vous permet de définir si un élément est masqué ou visible dans une taille de fenêtre d'affichage donnée.
Chevalet ou Divshot? Ce qui est mieux?
Alors maintenant, j'ai essayé et passé en revue deux de ces outils. La question est la suivante: vers qui devriez-vous vous tourner si vous envisagez de créer un site Bootstrap? Pour être honnête, il n’ya pas de vainqueur dans l’ensemble. Si nous examinons les caractéristiques individuelles, j’ai des opinions bien arrêtées sur ce qui est le mieux.
Flux de travail et mise en page: Divshot
En général, j’ai trouvé que le processus de flux de travail et d’agencement était bien meilleur dans Divshot que dans Easel. Le flux de travail du chevalet était maladroit et j’ai formulé plusieurs suggestions pour l’améliorer dans mon examen.Il est intéressant de noter que lorsque j'ai essayé Divshot, j'ai trouvé qu'il correspondait très étroitement à ce que je pensais que Easel devrait être.
J'ai adoré le module de disposition des colonnes et la facilité avec laquelle il a été ajusté pour répondre à mes propres besoins. Le chevalet a quelque chose de similaire, mais ce n’est pas aussi lisse ni intuitif.
Type et icônes: Chevalet
C'est un endroit où Easel est le grand gagnant. Il prend en charge les polices Web de Google et vous permet une personnalisation beaucoup plus grande de votre type. En fait, même sans les polices personnalisées, les outils de type étaient bien meilleurs dans Easel.
De plus, Easel intègre également FontAwesome, ce qui vous permet d'accéder à une multitude d'icônes géniales que vous pourrez rapidement intégrer à votre travail.
Une chose cool que Divshot Est-ce que ont cependant un sélecteur de thème, qui vous permet de changer l’aspect général du thème entier en quelques clics. Il y a actuellement treize thèmes et un? Personnalisé? option.
Exportation de code: chevalet
Les deux applications ont une fonctionnalité d'exportation de code, mais celle de Easel était beaucoup plus robuste et impressionnante, vous permettant de voir tous les éléments et de télécharger un fichier .zip contenant tout.
Personnalisation: Divshot
C’est littéralement la caractéristique la plus importante pour moi en tant qu’utilisateur et je donne celle-ci à Divshot. Les fonctionnalités de réglage de code personnalisé ici sont vraiment sympas, en particulier le module CSS. J'ai vraiment senti que je pouvais faire à peu près tout ce que je voulais et j'ai vraiment apprécié cette liberté.
Images d'espace réservé: Divshot
Le système d’image fictive était l’une de mes principales plaintes à propos de Easel. Leurs images d’espace réservé semblaient super boguées et difficiles à utiliser. En comparaison, les Divshot sont vraiment simples et faciles à utiliser.
Prix:?
Divshot est actuellement en version bêta publique gratuite. Il est donc impossible de dire comment les prix seront comparés avant que Divshot ne publie ses plans tarifaires. Ils auront beaucoup à faire, car j'aime beaucoup la structure de prix du chevalet. Ce n'est pas très bon marché mais vous bénéficiez d'un peu de forfait gratuit:
Plaintes Divshot & Commentaires
J'ai beaucoup aimé utiliser Divshot et je pense que c'est l'un des meilleurs outils de prototypage rapide que je connaisse. Bootstrap se prête si bien à ce type d'application et je suis ravi de voir les développeurs travailler dur pour créer des outils qui facilitent davantage l'utilisation de Bootstrap. Cela étant dit, il y a certainement des domaines à améliorer.
Type Sucks
Tout d'abord, la personnalisation de la typographie. Une fois encore, Divshot doit prendre une page du livre de Easel sur celui-ci. Leurs outils de texte sont beaucoup plus intuitifs et puissants.
Meilleur modèle de boîte peaufiner
Je pense que c'est actuellement trop de travail pour ajuster l'espacement de divers objets. C'est bien que j'ai la possibilité d'écrire mon propre CSS, mais pour quelque chose d'aussi simple que le remplissage et la marge, je devrais pouvoir entrer les nombres dans un champ près de l'endroit où j'insère les dimensions.
CSS Télécharger
Actuellement, la fonctionnalité d’exportation de code ne vous donne que le code HTML. Il me faut absolument une option pour tout regrouper dans un téléchargement, comme nous l'avons vu avec Easel.
Aperçu du buggy
Je ne sais pas trop pourquoi, mais il me semblait que mon aperçu en direct était systématiquement un changement en retard, de sorte qu'il ne reflétait presque jamais l'état actuel de mon document. C'était assez énervant!
Donne-moi de la place!
J'ai trouvé très difficile d'ajouter des éléments au bas de ma mise en page si elle s'étendait au-dessous des limites de la fenêtre. Donnez-moi un peu d'espace supplémentaire pour travailler, même si ce n'est pas dans la sortie réelle.
Qu'est-ce que tu penses?
Divshot est une application stellaire et je pense vraiment que vous devriez vous lancer, en particulier si vous êtes fan de Boostrap, Foundation et autres frameworks tout compris similaires.
Maintenant que vous avez compris en quoi consiste Divshot, laissez un commentaire et dites-moi ce que vous en pensez. Voulez-vous utiliser ceci sur chevalet? Pourquoi ou pourquoi pas? Quels autres outils similaires avez-vous rencontrés et comment se comparent-ils?