Silex

Bonjour à tous !

Bienvenue pour ce nouveau tutoriel. Aujourd’hui, nous allons nous intéresser à Silex, un petit logiciel méconnu, mais au potentiel énorme. Il vous permettra en effet de concevoir un site web sans avoir le moins du monde à coder

Évidemment, il ne s’agit pas du seul service de ce type (loin de là). Aujourd’hui, même avec des connaissances techniques très réduites, avoir son propre site est devenu accessible à toutes les associations… mais avoir un site web écologiquement optimisé, c’est une autre paire de manches ! Et c’est là que Silex, intervient, et se révèle particulièrement intéressant. À rebours des CMS qui dominent aujourd’hui le marché, il ne se contente pas de créer une interface pour gérer votre contenu, mais vous fournit directement un code que vous pourrez installer sur vos serveurs, ce qui contribue grandement à diminuer la quantité de données nécessaires au bon fonctionnement du site.

Attention : cette solution reste à privilégier principalement pour les sites comprenant un nombre réduit de page, et peu sujets à des renouvellements de contenu fréquents. Si vous êtes, par exemples, un journal étudiant, qui publie régulièrement, avec plusieurs rédacteurs différents, le classique WordPress (qu’on utilise d’ailleurs pour ce blog) reste sans doute plus adapté à votre situation… tout en sachant qu’il existe des astuces pour l’optimiser (on vous laisse les découvrir ici)

Et maintenant que vous savez ce qu’on vous vend, bonne lecture !

I) Présentation du logiciel :

Commençons par un peu d’histoire. Silex a été créé en 2009 par Silex Lab« une association à but non lucratif reconnue d’intérêt général qui lutte depuis 2009 contre la fracture numérique, en faisant promotion des technologies libres et de la contribution » (pour reprendre la description de son site web). Elle organise de nombreux événements et crée des outils pour permettre à des populations marginalisées (notamment les jeunes déscolarisés) de s’émanciper par le numérique… et parmi ces outils, on trouve ce fameux Silex, auquel on s’intéresse aujourd’hui.

En accord avec la philosophie de l’association, le logiciel permet donc au plus grand nombre de créer un site web à partir de rien, de s’initier aux métiers du webdesign, et d’apprendre en douceur, des bases de code (Silex permet en effet, si on le souhaite, d’intégrer à son travail des éléments de code plus conventionnels, tout en restant relativement simple d’utilisation, mais ça, nous ne l’aborderons pas dans ce tutoriel…).

Nous connaissant, et voyant la philosophie du projet, vous devez vous en douter, il s’agit d’un logiciel libre… qui vous permettra une grande liberté d’action ! Silex vous permet en effet d’aller chercher ailleurs sur le web de nouvelles polices, des cartes, des éléments de design, et de nombreux autres éléments que vous pourrez facilement intégrer à votre travail !

II) Commencer à créer :

1) Silex.me :

Notre petite présentation vous a mise l’eau à la bouche ? Alors c’est parti ! Rendez-vous sur l’éditeur Silex pour commencer la création de votre premier site web !

Si vous êtres sur la bonne page, on devrait vous porposer choisir une template (ou un modèle, si vous préférez rester français 😁), qui servira de base de travail pour la conception de votre site. En choisissant la première template proposée, en haut à gauche, vous partirez d’une page entièrement vierge, mais pour tous les autres modèles, vous débuterez avec un faux site, déjà créé, que vous pourrez modifier comme bon vous semble.

2) Se repérer sur Silex :

Une fois votre template favorite sélectionnée, vous aboutissez (logiquement) sur cette page) :

Votre écran est alors scindé en 4 sections bien distinctes :

1) L’espace d’édition. Au centre de votre écran, c’est là que vous réaliserez l’essentiel de votre travail, en déplaçant et redimensionnant les différents éléments de votre site web.

2) Le menu latéral gauche. Il vous permettra d’ajouter de nouveaux éléments à votre site, de naviguer entre les pages, et de sauvegarder votre travail.

3) Le menu supérieur, vous permettant de dupliquer ou de supprimer un élément de votre site (et accessoirement, d’en intervertir les sections

4) Le menu inférieur. Il indique l’élément sur lequel vous êtes en train de travailler, et les éléments qu’il recouvre dans votre site.

5) Le menu latéral droit. Extrêmement pratique, il vous permettra de customiser les différents éléments de votre site (en changeant leur couleur, en ajoutant un lien, une image de fond…).

3) Enregistre votre site :

Avant de commencer à façonner votre petit bijou de site web, je vous conseille vraiment de l’enregistrer, pour être sûr de ne pas perdre votre fichier en cours de route… et assez étonnement, je suis désolé de vous l’annoncer, mais il va s’agir d’une des parties les plus complexes de l’opération 😁

Le fait est que Silex est incapable de stocker lui-même vos fichiers (ce qui est compréhensible, une asso à but non lucratif a généralement d’autres priorités que d’héberger les sites de tout un chacun). Il ne peut pas non plus, en tant qu’éditeur web, les conserver directement sur votre ordinateur. Il va donc falloir héberger votre site et vos fichiers sur une autre plateforme… mais rassurez-vous, ça reste relativement simple !

Cliquez sur le petit nuage (l’icône la plus haute du menu latéral gauche) puis sur Save Website as (ou faites tout simplement un contrôle S, ça marche aussi). Vous pourrez alors vous connecter à différentes plateformes permettant de stocker votre contenu en ligne, auquel vous allez pouvoir vous connecter (à condition d’y avoir déjà un compte). La plus simple d’utilisation (tout en restant gratuite) est Dropbox… mais elle pose quelques problèmes sur le plan de l’éthique numérique 😁

Heureusement, comme vous êtes une association absolument fan de ce blog et que vous avez dévoré tous nos tutoriels (si, si, on vous promet)vous louez sans doute déjà vos propres serveurs (comme on vous l’a déjà conseillé ici), et vous pouvez facilement y stocker vos fichiers avec le FTP (pour le port, laissez la valeur 21, ça marchera très bien 😉).

Une fois cette première opération réalisée, un simple contrôle S sera suffisant pour sauvegarder votre travail à tout instant.

III) Ajouter un élément :

Mais voilà, encore faut-il avoir quelque chose à sauvegarder ! Si le déplacement et le redimensionnement des éléments une fois intégrés à votre espace d’édition est assez intuitif (vous utilisez votre souri et puis c’est tout), la façon d’ajouter du texte, des images, et tout ce qui pourra faire l’intérêt de votre site, est peut-être un peu moins clair… heureusement, c’est ce que nous allons voir maintenant :

1) Les pages :

Il y a de grandes chances que votre site se compose de plusieurs pages. Pour gérer ces différentes pages, vous n’avez qu’à vous rendre dans l’onglet page (la quatrième icône en partant du haut, dans le menu latéral gauche). Là, vous pourrez facilement, ajouter, supprimer, renommer, et naviguer entre les différentes pages de votre site, pour les modifier comme bon vous semble.

2) Les sections :

Chaque page est-elle même divisée en plusieurs sections (sur la capture d’écran ci-dessous vous pouvez voir trois sections).

2) Les sections :

Chaque page est-elle même divisée en plusieurs sections (sur la capture d’écran ci-dessous vous pouvez voir trois sections).

Si vous voulez ajouter de nouvelles sections, rendez-vous sur l’onglet add element (le deuxième en partant du haut, dans le menu latéral gauche), puis cliquez sur section. Si la section ne s’affiche pas à l’endroit où vous le souhaitiez (ou si vous désirez la déplacez plus tard), sélectionnez là avec votre souri, puis changez sa position à l’aide des flèches, à droite du menu supérieur.

Si vous souhaitez supprimer une section, c’est toujours dans le menu supérieur, mais cette-fois-ci, il vous faudra cliquer sur la petite poubelle (vous pourrez supprimer de la même façon tous les éléments de votre site).

À l’aide du menu latéral droit, vous pourrez personnaliser votre section. Principalement en changeant sa couleur de fond (dans l’onglet Background color), ou en lui adjoignant une image d’arrière-plan (onglet Backgroud image).

Note : Lorsque que vous intégrez une image à votre site, elle peut provenir, soit de la base de contenus déjà proposés par Silex (Unsplash Photo), soit de la plateforme sur laquelle vous stockez le fichier de votre site (Dropbox, un serveur, Github…). Si elle ne s’affiche pas comme vous l’aviez imaginé, vous pouvez toujours essayer de changer ses paramètres d’affichages. Dans l’onglet Background image, cliquez sur auto, et essayez une autre configuration (notamment Cover, qui fonctionne dans la quasi-totalité des cas).

Dans certains cas, vous aimeriez qu’une section apparaisse, pas seulement sur une page donnée, mais sur toutes les pages de votre site. C’est notamment pour la plus haute (header) et la plus basse (footer) qui donnent généralement son identité à votre site, en condensant les informations les plus importantes. Pour ne pas avoir à les recréer à chaque fois, rendez-vous dans l’onglet Visible on (dans le menu latéral droit). Vous pourrez alors choisir dans quelles pages vos sections apparaîtront.

2) Container / image :

Une fois que vos sections sont prêtes, il ne vous reste plus qu’à les remplir… et rien de tels que de belles images pour cela !

Rendez-vous dans le menu latéral gauche, dans l’onglet Add element (celui qu’on a déjà utilisé pour les sections), et cliquez sur container. Un magnifique container (qui est, à peu de choses près, une boîte vide), vient s’afficher sur le site. Comme pour les sections, rendez-vous dans Background image, pour lui adjoindre une image d’arrière-plan, et sélectionnez cover, à la place d’auto, pour qu’elle s’affiche de manière optimisée.

Note : dans la section Add element, vous pouvez aussi ajouter directement une image. Toutefois, elle se redimensionne moins facilement que lorsque l’on passe préalablement par un container… à vous de voir quelle méthode vous préférez !

Quelle que soit la méthode que vous ayez choisie pour intégrer votre image, vous pouvez toujours y intégrer un lien (qui renverra, soit vers une page de votre site, voit vers un site web externe). Pour cela, rendez-vous dans le menu latéral droit, et utilisez l’onglet Link.

3) Le texte :

Maintenant que votre site est agréable à regarder, il ne reste plus qu’à ajouter ce pour quoi vos visiteurs sont venus : du texte. Vous devez vous en douter, on va encore retourner dans Add element, et cette fois-ci, choisir texte. Une New Text box va alors apparaître sur votre espace d’édition. Sélectionnez là avec votre souri, puis cliquez sur le crayon, dans le menu supérieur, pour pouvoir modifier le texte, et avec les fonctionnalités qui s’affichent maintenant au-dessus de votre Text Box, en faire passer certaines parties en gras, italique, souligné, ou ajouter un lien… et surtout choisir la classe de votre texte ! Il peut s’agir d’un simple paragraphe (dans ce cas-là, cliquez sur P) d’un titre, de plus ou moins grande importance (H1 (heading 1), sera plus important que H2, lui-même plus important que H3), d’une liste à puce (UL) ou d’une liste numérotée (OL).

Bon, peut-être que vous ne voyez pas, à priori, l’intérêt de donner une classe à votre texte. En réalité, la chose a deux avantages. Primo, cela va influencer les algorithmes des moteurs de recherche qui vont référencer votre site (ils considéreront que les mots utilisés dans les titres seront plus importants que ceux contenus dans de simples paragraphes)… mais surtout, elle vous permettra de personnaliser vos textes !

Rendez-vous dans le menu latéral droit, et cliquez sur le pinceau, à son sommet. Normalement, ceci apparaît sur votre écran :

Comme vous pouvez le voir, il vous est possible de sélectionner l’un des différents styles que vous avez attribué à vos textes. Cliquez sur l’un d’entre eux (P, H1, UL…), et rendez-vous en bas du menu latéral droit… c’est-à-dire, à peu près ici :

Vous avez désormais la possibilité de modifier la police, la taille, la couleur, la couleur de fond, et bien d’autres paramètres s’appliquant à la classe sélectionnée. Ainsi, si vous avez envie que tous vos paragraphes deviennent subitement bleus sur fond rose, alignés à droite, en police Alamain (tous les goûts sont dans la nature 😁) vous pourrez le faire en quelques cliques, sur toutes les pages de votre site simultanément, sans avoir à modifier individuellement chaque zone de texte. Ce procédé fait gagner un temps fou lorsque l’on apporte une modification à son site, même s’il n’autorise pas, malheureusement, à modifier chaque paragraphe individuellement…

4) Special :

Vous avez désormais à votre disposition l’essentiel des éléments pour concevoir un site très sympathique… mais pourquoi ne pas vouloir encore mieux ? L’onglet Add elements, est encore plein de possibilités. Vous voulez intégrer un formulaire de contact ? Une carte interactive ? Un menu hamburger ? Mais allez-y, ne vous privez pas, tout cela est possible (je vous laisse le plaisir de le découvrir par vous-même, ce sera relativement facile si vous avez suivi le tutoriel jusque-là 😉).

IV) Optimiser son site pour téléphone :

Désormais, vous devez commencer à avoir un site web assez agréable d’aspect. Seulement, voilà, il est conçu pour s’afficher sur un PC ! Rien ne dit qu’il rendra aussi bien sur téléphone…

Heureusement, Silex a anticipé ce problème. Rendez-vous dans le menu latéral gauche, et cliquez sur Mobile editor (la petite icône en forme de téléphone). Votre espace d’édition se modifie alors, pour vous montrer le rendu du site sur mobile.

Si quelque chose vous paraît peu réussi, et rend mal à l’écran, vous pouvez déplacer et redimensionner tous les éléments, sans que cela n’affecte le travail que vous avez réalisé pour la version PC (du moment que les éléments restent dans la même section).

Si même ainsi, vous trouvez votre interface mobile trop surchargée, vous pouvez en supprimer certains éléments sans que cela affecte la version PC. Cliquez sur l’élément excédentaire, puis sur Visible on, dans le menu latéral droit. Vous pouvez alors choisir sur quelle plateforme il sera visible (mobile, desktop, ou both).

V) Publier :

Logiquement, après ceci, votre site devrait être prêt à être publié (si vous avez encore un doute sur sa qualité, n’hésitez pas à faire un preview, à l’aide du petit œil, dans le menu latéral gauche 😉).

Si vous êtes satisfaits du résultat, rendez-vous sur l’onglet Settings (le troisième en partant du bas, dans le menu latéral gauche)

La suite se fera dans l’onglet File menu (le nuage, au sommet du menu latéral gauche, dont vous vous êtes déjà servis pour enregistrer votre travail) puis cliquez sur publish (ou faites simplement un contrôle P). Silex va alors optimiser votre fichier pour le rendre apte à être édité, et le déposer sur l’espace de stockage (Dropbox, serveur, Github…) que vous utilisez depuis le début de ce tutoriel.

Bon, le problème, c’est que même si vous avez le fichier de votre site, il n’est pas encore réellement publié. Il faudra que vous vous occupiez vous-même de le mettre en ligne (le rôle de Silex s’arrête là).

Rassurez-vous, ce ne sera pas trop compliqué. Si vous utilisez, depuis le début de ce tuto, votre propre serveur, grâce au FTP, le site se mettra automatiquement en ligne (c’est beau la vie 😁). Sinon, il existe des outils gratuits, qui vous permettront d’héberger gratuitement votre petit bijou de webdesign, simplement en glissant le fichier que vous a fourni Silex. On pensera à Netlify, dont Silex Lab a expliqué le fonctionnement dans cette vidéo.

Conclusion :

Et nous voici à la fin de cet article, vous savez désormais maintenant concevoir un site web de qualité acceptable sans coder… et désormais, de nombreux possibles s’offre à vous !

En effet, nous n’avons abordé ici que les fonctionnalités basiques de Silex. Mais l’outil vous offre de nombreuses autres possibilités, que nous avons ici passées sous silence, afin d’abréger ce (déjà trop long 😁) tutoriel. Si vous avez envie d’aller plus loin, et d’apprendre comment ajouter un logiciel d’évaluation à votre site, utiliser des classes CSS pour le rendre plus dynamique, intégrer de nouvelles polices, on ne pourra que vous conseiller deux superbes webinars que Silex a réalisé sur ces thématiques (certaines choses risquent d’être un peu redondantes avec ce tutoriel, mais cela reste très intéressant) :

Webinar

Webinar 2

Avec un peu de chance, ces connaissances pourront vous servir de tremplin pour commencer à coder par vous-même, mais ça c’est une autre histoire…

Si vous avez des suggestions, des remarques, ou que vous trouvez qu’il manque quelque chose à ce tutoriel, n’hésitez pas à nous le dire dans notre rubrique contact 😉

À très vite pour un nouveau tutoriel !

1 réflexion sur “Silex”

  1. Ping : Module 3 : Les outils d’un environnement numérique sain – WASABI

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *