Flux est un éditeur de site Web WYSIWYG pour Mac. Maintenant, avant de vous demander à quel point vous détestez les WYSIWYG, vous devez savoir que Flux est différent et qu'il est à la fois assez puissant et flexible pour être utilisé par les développeurs Web professionnels.
Aujourd'hui, je vais vous présenter Flux en créant une page Web extrêmement simple à partir de rien (pas de modèles rigides et agaçants). En cours de route, nous verrons à quoi ressemble un flux de travail typique et pourquoi il s'agit peut-être du meilleur éditeur Web visuel que j'ai jamais utilisé.
Pourquoi le flux est-il différent?
Quand je pense à un éditeur de site Web WYSIWYG, deux applications populaires me viennent à l’esprit. Le premier est Dreamweaver. Dreamweaver est une application ridiculement puissante, mais la courbe d’apprentissage est assez longue. Il s’agit simplement d’une énorme application qui ne vaut peut-être pas la peine pour de nombreux concepteurs qui savent déjà coder à la main.
La seconde application qui me vient à l’esprit est iWeb. iWeb est amusant pendant quelques heures, mais une fois que vous vous êtes rendu compte de la rigueur du système de gabarits, l'idée de l'utiliser pour la conception de sites Web professionnels a disparu. Même son rival bien supérieur, RapidWeaver, semble toujours vous pousser davantage vers des conceptions prédéfinies et semble cibler les novices en développement Web.
Dreamweaver s'adresse donc aux professionnels, mais a une courbe d'apprentissage abrupte et iWeb est destinée aux non-initiés et n'a pratiquement aucune courbe d'apprentissage (et par conséquent, aucune flexibilité), où est le juste milieu? Entrez Flux.
Flux est une application de conception de site Web visuel pour les personnes qui détestent les applications de conception de site Web visuel. Le flux de travail a été soigneusement conçu pour refléter la manière dont vous codez les sites à la main. La meilleure partie: c'est complètement flexible. Certains modèles sont inclus, mais je ne m'en suis jamais vraiment préoccupé, car Flux facilite la conception à partir de la base, comme je le ferais si j'écrivais le code manuellement.
Assez parlé, voyons Flux en action.
Ce que nous construisons
Parce que je veux que ce soit une introduction très basique, nous allons garder le design super simple. Si je reçois suffisamment de demandes dans les commentaires, je peux écrire un autre didacticiel plus complexe et plus élaboré, mais pour l’instant, nous allons nous en tenir à un site de base d’une page ne contenant que très peu de contenu.
Assez simple non? Cela ressemble presque à l'un des modèles abscons qui accompagne ce type d'applications, mais comme je l'ai dit plus haut, nous allons le construire à partir de zéro.
Étape 1: Créer un nouveau projet
La création d'un nouveau projet dans Flux est une procédure simple. Tout ce que vous faites est d'aller dans Fichier> Nouveau et vous êtes sur votre chemin. Il vous demandera où vous souhaitez placer les fichiers et si vous souhaitez que Flux crée automatiquement une structure de site de base pour vous. Cela inclut les éléments suivants: index.html, main.css et un dossier d'images. Dans ce cas, c'est exactement le format que je veux utiliser, j'ai donc choisi de le laisser le configurer pour moi. Si vous avez un système différent que vous préférez, vous pouvez le faire manuellement.
Lorsque vous double-cliquez sur le fichier HTML, vous accédez à l'interface principale de Flux. Comme vous pouvez le constater, il se passe beaucoup de choses ici. En fait, nous pourrions passer tout le tutoriel à la discussion de chaque bouton et fonctionnalité. Cependant, pour rendre les choses moins ennuyeuses, nous allons directement au bâtiment et présenterons les fonctionnalités au fur et à mesure. Je vous recommande vivement de télécharger la démo et de parcourir l'interface pour vous familiariser avec elle.
Étape 1: Coiffer le corps
Si vous cliquez sur la grande zone de canevas vide, vous devriez voir une boîte qui devient surlignée avec le mot? Body? en haut à gauche. C'est la structure de corps vide de votre code HTML. La première chose que nous souhaitons faire pour notre site est d'ajouter un arrière-plan à cet élément.
Pour ce faire, cliquez sur le bouton Inspecteur en haut (qui ressemble à une paire de jumelles). Cela fera apparaître ce qui est à mon avis, le cœur de l'application. Vous allez créer ici des styles et définir l'apparence de chaque élément créé dans Flux. La sortie de l'inspecteur est CSS et tous les contrôles à l'intérieur sont étiquetés avec les propriétés CSS que vous avez l'habitude d'utiliser.
Ajout d'une couleur de fond
Si nous codions ce site à la main, la première étape pourrait être de désigner une couleur d’arrière-plan pour le corps. Nous allons en fait utiliser une image répétée à l'étape suivante, mais nous voulons nous assurer que l'arrière-plan est correct, même si l'image ne se charge pas.
Avec le corps sélectionné, nous allons au? Remplir? section à gauche de l'inspecteur. À partir de là, appliquer une couleur de fond est aussi simple que de cliquer sur la propriété CSS appropriée et de taper notre couleur; dans ce cas # 1f1f21.
Ajouter une image de fond
Pour ajouter une image d’arrière-plan, nous suivons essentiellement les mêmes étapes et naviguons simplement vers le fichier approprié dans le dossier images. J'ai utilisé un arrière-plan gratuit génial de Premium Pixels.
Étape 2: Ajout d'un conteneur
Pour ajouter un conteneur à un site, vous devez normalement ajouter une div, et c'est exactement ce qui se passe dans Flux. Cliquez sur le conteneur? bouton en haut et descendre à? Quick Div.? Assurez-vous que lorsque vous effectuez cette étape, vous avez sélectionné l'élément body. Dans Flux, vous voulez toujours sélectionner l'objet parent souhaité lors de la création d'un nouvel élément. Cela garantit qu'il est inséré dans la partie correcte de votre code HTML.
Cela devrait créer une petite boîte vide avec des guides sur votre toile.
Comme nous l'avons fait auparavant, sélectionnez l'élément et ouvrez l'inspecteur. Sous "Position & Size", définissez la largeur sur 700px et la hauteur sur 810px. Assurez-vous de supprimer les valeurs par défaut pour? Top? et gauche? pendant que vous y êtes.
Centrage automatique d'un élément
Maintenant, si vous êtes un développeur Web, vous savez déjà exactement comment centrer cette division: définissez les marges sur auto. Vous pouvez y aller et le faire manuellement ou simplement cliquer sur le petit engrenage en haut à droite de l'inspecteur et descendre jusqu'à "Auto Center".
Ajout d'une ombre
À ce stade, vous devriez avoir le cadre de base pour le site.
Juste pour le plaisir, je veux montrer certaines des fonctionnalités Webkit CSS3 intégrées à Flex. Si vous cliquez sur? Webkit? Dans l'inspecteur, vous verrez une poignée de propriétés CSS amusantes: boîte-ombre, boîte-réflexion, transitions Webkit, etc. Malheureusement, il n'y a pas d'équivalent Mozilla, mais vous pouvez toujours les insérer manuellement dans le code.
Pour ajouter une ombre à notre conteneur, cliquez simplement sur la propriété et ajustez les paramètres.
Styles en ligne?
Des observateurs enthousiastes ont probablement déjà remarqué que les styles que nous avons créés sont configurés pour «en ligne». C'est l'une des bizarreries du flux de travail Flux. Pour une raison étrange et inconnue, tous vos styles sont configurés en ligne par défaut. Il est en fait un peu plus facile de configurer des éléments dans Flux lorsqu'ils sont configurés en ligne. Le site Web de Flux vous recommande donc de configurer un élément comme vous le souhaitez, comme indiqué ci-dessus, puis de convertir les styles en quelque chose qui apparaîtra. dans la feuille de style externe.
Ne craignez rien, ce processus est rapide et sans douleur. Sélectionnez l'objet que vous souhaitez convertir, cliquez dessus avec le bouton droit de la souris et sélectionnez? Créer un style avec? ? option. Cela fera apparaître la boîte de dialogue suivante qui vous permettra d'attribuer un ID ou une classe à l'objet.
Cela créera une petite icône sur la gauche avec l'ID que nous venons d'appliquer. Cette zone est essentiellement un aperçu de notre fichier CSS. Maintenant, lorsque vous souhaitez modifier les propriétés de ce conteneur, vous double-cliquez sur l'icône ici pour lancer l'inspecteur.
Étape 3: l'en-tête
Les étapes que nous venons d'apprendre décrivent le flux de travail permettant de créer tout le contenu de notre page. Pour ajouter le nom de la société à notre en-tête, nous créons une autre Quick Div, mais cette fois-ci, double-cliquez à l'intérieur pour taper à l'intérieur (cela crée essentiellement une balise? P?). Une fois que vous avez tapé ce que vous voulez, vous pouvez styler le texte comme bon vous semble. Comme vous pouvez le voir ci-dessous, j'ai ajouté des paramètres pour la couleur, la famille de polices, la transformation du texte, l'alignement du texte et la taille de la police.
Ensuite, faites la même chose pour le texte situé sous le titre.
Cela devrait vous donner un bel en-tête typographique pour votre page. N'oubliez pas de convertir ces deux éléments en styles externes, comme nous le faisions auparavant.
Étape 4: l'image
Nous sommes maintenant prêts à lancer notre grande image. Je vais utiliser une photo que je me suis tiré, mais vous pouvez tout ce que vous aimez.
Pour commencer, sélectionnez le conteneur et créez un div de 700 pixels de large et aussi haut que vous le souhaitez. Puis définissez l’arrière-plan de la div sur votre image et l’arrière-plan sur non répétée. Avec la division d'image sélectionnée, vous pouvez utiliser les touches fléchées pour la mélanger vers le haut ou le bas pour la déplacer, après tout c'est un WYSIWYG!
Étape 5: Terminer le texte
À ce stade, le didacticiel serait assez redondant si nous examinions trop de détails. Il ne reste vraiment plus rien à faire, à part créer quelques divs supplémentaires, les remplir avec du texte et les styler comme nous l’avons fait ci-dessus. Je suis resté avec le thème de police Georgia que j'utilisais et je viens de faire mon titre plus grand que la copie de paragraphe.
Une chose à noter est que pour créer un lien, il vous suffit de sélectionner un élément ou un bloc de texte et d'aller à Edition> QuickLink. Avec ça, la page devrait être terminée!
Qu'en est-il du code?
Si nous voulons examiner et éditer le code à tout moment, appuyez simplement sur Commande-3 pour afficher la visionneuse de code.
Flux crée du code propre et propre qui s’intègre parfaitement au processus de développement. Vous pouvez faire autant ou aussi peu que vous voulez avec l'interface WYSIWYG et faire le reste à la main. Étant donné que Flux n'utilise que des fichiers HTML et CSS anciens et simples, vous pouvez même travailler sur le site dans votre éditeur de code préféré au fur et à mesure de la création de Flux. Le flux de travail est complètement ouvert, de sorte que si vous voulez faire quelque chose comme vous l'avez toujours fait, vous êtes libre de le faire!
Qu'est-ce que Flux fait?
Ce tutoriel n'a pas permis de mieux comprendre ce que Flux peut faire. Voici quelques autres fonctionnalités pour vous enthousiasmer:
- Modules d'agencement intégrés pour le prototypage rapide
- Vue en direct du navigateur
- JavaScript, PHP et tout ce jazz
- Support Thème WordPress
- Extraits de code réutilisables
- Palette d'Histoire
- Widget palette - Créez des galeries faciles et des effets jQuery
- Prise en charge HTML5
- Prise en charge de Google Font API
- Des tonnes de plus que je ne connais même pas encore!
Pensées de clôture
J'ai utilisé Flux pour la première fois il y a quelques versions (Flux en est maintenant à sa troisième itération) et j'ai adoré l'idée, mais je n'étais pas fou de l'exécution. Il se sentait un peu buggé (tout ce qui est corrigé maintenant) et ne semblait pas si facile à prendre et à utiliser.
Cependant, cette rencontre a été assez brève et j'ai toujours eu envie de revenir en arrière et de bien la traverser. Je joue avec Flux depuis deux jours et je dois dire qu’une fois que j’ai pris le temps de déterminer le bon déroulement du travail, travailler avec Flux était un rêve. Il faut certainement un peu de temps pour comprendre toutes les bizarreries, mais une fois que vous le faites, ils ne mangent pas du tout et se sentent assez naturels.
À tout le moins, Flux est excellent pour le prototypage. Les fans de la conception dans le navigateur au lieu de Photoshop verront la plupart de leurs problèmes abordés ici car vous êtes obligé de concevoir en utilisant les propriétés CSS et le positionnement plutôt que les effets Photoshop. Ce que je préfère dans l'application, c'est qu'elle ne vous incite pas à l'utiliser tout au long du processus. Vous n'avez pas à vous soucier des fichiers de projet Flux, mais uniquement des fichiers que vous utiliseriez normalement pour créer un site. Cela signifie que vous pouvez passer à une autre application ou même transmettre le projet à un collègue ou à un client qui n'a ni besoin de Flux ni le besoin de savoir que vous l'avez utilisé.
Si vous êtes un développeur qui code à la main et qui rêve souvent d'un WYSIWYG qui ne craint pas et qui peut réellement se brancher à votre façon de travailler, je vous recommande vivement d'essayer Flux.Cela peut être un peu frustrant au début, mais prenez le temps de le faire et de comprendre comment utiliser réellement l'application correctement, et je parie que vous penserez peut-être que c'est le meilleur WYSIWYG que vous avez utilisé.