Outils pour développeurs

Bien que Sitely soit un constructeur de sites Web qui ne nécessite aucune connaissance en codage, nous reconnaissons qu'il peut y avoir des situations où nous devons de temps en temps mettre les mains dans le cambouis pour que les choses fonctionnent correctement. Heureusement, Sitely gère les situations les plus courantes avec facilité, et sans que vous ayez à faire quoi que ce soit. Un excellent exemple est l'ajout du code Google Analytics ou AdSense à votre site Web. Cela impliquerait normalement d'ajouter manuellement le code directement dans le HTML de la page Web. Cependant, dans Sitely, vous pouvez ajouter ce code via les différentes options de paramètres du site, laissant Sitely les insérer au bon endroit dans la page HTML..

Le scénario le plus probable où vous pourriez avoir besoin d'ajouter manuellement du code vous-même est généralement lorsque vous avez reçu un morceau de code d'un fournisseur de services tiers. Typiquement, les processeurs de formulaires tiers peuvent vous donner du code pour afficher un formulaire sur votre page Web. Ces formulaires sont normalement créés sur des serveurs distants et servis à votre site Web via un morceau de code. D'autres exemples sont les scripts tiers. Ce sont des applications Web qui fournissent des fonctionnalités supplémentaires à votre site Web, telles que des systèmes de réservation ou des scripts d'adhésion. Lorsque vous devez intégrer ce code dans votre page Web, il peut vous être demandé d'ajouter différents morceaux de code dans différentes parties de la page. 

Typiquement, les pages HTML auront une section En-tête et une section Corps. La section en-tête d'une page est généralement utilisée pour des choses comme les méta-informations, telles que le titre de la page, les liens vers des feuilles de style externes, ou des feuilles de style ou des scripts hébergés à distance. La section corps est la partie du HTML qui est vue visuellement par les visiteurs du site, comme le texte, les images, les graphiques et autres éléments. 

Lorsque vous acquérez un morceau de code, soit d'un fournisseur tiers de services hébergés, soit d'un script que vous installez sur votre propre serveur, il y aura souvent un besoin de séparer le code entre code d'en-tête et code de corps. En règle générale, le code d'en-tête sera utilisé pour appeler du code PHP ou Javascript hébergé à distance ou des feuilles de style afin d'afficher correctement tout contenu qui sera ajouté à votre page dans la section corps. Le code du corps sera souvent le code que vous insérez dans la page pour créer un élément que les visiteurs du site peuvent voir et/ou avec lequel ils peuvent interagir. Par exemple, vous pourriez avoir un script d'adhésion qui permet aux visiteurs de s'inscrire à une liste de diffusion de membres. Le formulaire d'inscription lui-même sera servi par un serveur Web (le vôtre ou celui d'un tiers) afin qu'il puisse être affiché sur votre page Web. Ci-dessous se trouve un exemple typique d'un morceau de code d'en-tête fourni par un script. Son but est de protéger une page contre un accès non autorisé.

Cela peut être suivi d'un morceau de code pour créer un formulaire d'inscription où les utilisateurs peuvent s'inscrire eux-mêmes en tant que membres. Ce code apparaîtrait dans la section corps de la page.

Vous n'avez pas besoin de comprendre ce que font ces extraits de code ni comment ils fonctionnent. Ce qui est important, c'est de savoir où les insérer dans votre page Sitely. Le premier morceau de code serait le code d'en-tête. Il doit être la première chose sur la page pour que le script d'adhésion lié fonctionne correctement. Il serait ajouté via le bouton Code situé en haut du panneau des pages dans Sitely. Voici à quoi il ressemble :

Dans l'exemple de notre script d'adhésion, nous copierions et collerions le code d'en-tête dans la boîte intitulée 'PHP avant HTML'. La raison en est que la page doit être une page PHP pour que ce script fonctionne. Par conséquent, la première chose que la page doit faire est d'exécuter ce code PHP avant de faire quoi que ce soit d'autre (NOTE : le nom de la page doit être changé pour avoir une extension PHP avant la publication). Si le code d'en-tête était du pur HTML, vous l'inséreriez dans la boîte intitulée 'Code pour HTML'.

Le prochain morceau de code que nous voudrions ajouter à la page serait le code qui affiche le formulaire d'inscription du script. Il serait ajouté au corps de notre page en utilisant l'élément 'Intégrer'. Cela créera une boîte vide sur le canevas de Sitely que vous pourrez positionner où vous voulez que le formulaire d'inscription apparaisse. Avec la boîte d'intégration sélectionnée, vous vous rendez dans le panneau de style et ajoutez votre extrait de code. L'option ressemble à ceci :

Si le code est susceptible de s'étendre verticalement, assurez-vous de cocher la case 'le contenu s'étend verticalement'. Cliquez toujours sur le bouton enregistrer/rafraîchir après avoir ajouté ou modifié du code. Si votre script est sur un serveur en direct, il peut s'afficher sur la page. Cependant, certains contenus ne produiront pas d'aperçu tant qu'ils ne seront pas publiés en ligne.

Outils de développement pour l'ensemble du site

En plus des options spécifiques à la page détaillées ci-dessus, vous pouvez également ajouter des éléments de développement à l'échelle du site à votre site Web via l'option Développeur dans le panneau des paramètres. Ici, vous pouvez spécifier les dossiers de sortie pour les différents éléments que vous ajoutez à votre page, y compris les feuilles de style (CSS) et les fichiers Javascript (JS). De plus, vous pouvez ajouter des fichiers personnalisés, soit depuis votre disque, soit depuis des ressources hébergées liées. 

Ces options seront utiles si une partie de votre code d'intégration inclut des liens vers des feuilles de style ou du code que vous devez héberger dans le cadre de votre site Web. Un exemple typique où ces options peuvent être utiles est lorsque vous utilisez du contenu de sites Web tels que codepen. Par exemple, vous pourriez être confronté à un code divisé en trois sections distinctes - le HTML à intégrer dans la page, le CSS pour styliser le contenu et le JS pour faire fonctionner les choses. Tout cela peut être copié et collé dans des fichiers individuels et inclus dans votre projet Sitely.

En plus des fichiers individuels, vous pouvez également ajouter du code HTML dans la section en-tête de toutes vos pages Web via le panneau des options pour développeurs. Il suffit de faire défiler le panneau pour voir la boîte de code.

N'oubliez pas que tout code que vous ajoutez dans cette boîte sera ajouté à la section En-tête de toutes les pages de votre site Web.

Une note de prudence : Plonger dans le code avec peu ou pas d'expérience peut créer des problèmes avec votre page Web. Bien que Sitely puisse très bien gérer ces options pour développeurs, il y a toujours un risque de conflits de code qui peuvent entraîner un dysfonctionnement de votre site. Utilisez ces options à bon escient et testez toujours avant de mettre en ligne. Pour le code qui nécessite des tests sur un serveur, il est préférable de publier dans un dossier de test sur votre serveur, avant de lancer votre nouveau site dans le grand monde.