Refaire un site ? pourquoi ?
17/02/2017
En plus de 12 ans, après être passé d’un site pur HTML à un site en langage PHP fait maison puis à un Système de Gestion de Contenu (CMS), ainsi qu’une galerie photo ayant suivi les mêmes évolutions, j’ai eu envie de revenir aux fondamentaux.
En effet, comment maintenir à jour un site, ou une galerie, fait sous des CMS dont on ne peut pas en assurer la mise à jour depuis des années sans devoir faire de lourdes migrations, maintenir des systèmes de sécurité mis à l’épreuve par des tentatives malveillantes, maintenir du contenu vieillissant ?
Ce que je ne veux plus !
Je ne veux plus retomber dans le travers des CMS pour un site non maintenu au quotidien.
Je ne veux donc plus :
- de la nécessité de mettre en œuvre et gérer, à minima, une Base De Donnée (BDD),
- de l’obligation de déposer du contenu en ligne dans une BDD,
- du besoin de mise à jour de la version du CMS ou de ses composants,
- de la nécessité de gérer de multi CMS (de contenu ou d’albums),
- du besoin de me connecter sur un backoffice pour créer des pages, gérer des albums, déposer des photos, et de devoir le faire aussi bien en local que de le refaire sur le site de l’hébergeur,
- des contraintes de sécurité liées au type de langage de programmation utilisé et aux failles que cette programmation peut générer,
- de devoir sauvegarder les php et la(les) base(s) de données pour en déplacer l’intégralité du contenu,
- de la nécessité de suivre une procédure pour déplacer un site sur un autre hébergement,
- de dépendre du CMS pour l’organisation du stockage physique des photos,
- …
Ce que je veux !
Je veux revenir aux fondamentaux avec des page statiques et gérables, du contenu bénéficiant de l’aspect dynamique des feuilles de style (CSS) associées au Java Script (JS) actuels.
Je veux redevenir propriétaire de mon contenu.
J’accepte d’avoir la contrainte de devoir programmer des pages et de me connecter à un serveur pour transférer du nouveau contenu.
En tant que particulier, et pour un site de loisir, je cherche des outils gratuits mais assez puissant pour générer un site html.
Une des raisons initiales de mon ancien passage au CMS était la possibilité de gérer de manière simple, efficace et homogène la mise en page ainsi que les menus quelles que soient les pages du site. Je sais que la gestion homogène de la mise en page pourra maintenant se faire par des feuilles de style mais que la gestion des transferts des menus d’une page à l’autre sera peut-être plus complexe.
Un site mais pour quel contenu ?
Il est vrai qu’il existe plusieurs vecteurs pour satisfaire à son envie d’utilisation du net.
Des blogs, aux réseaux sociaux en passant par la vidéo, les news, avec des outils tels que OverBlog, Blogspot, Twitter, Facebook, Google+, Tumblr, Linkedin, Pinterest, Instagram, Flickr, Youtube, Dailymotion, Viméo, Périscope… il y a pléthore d’endroits pour lire, écrire, écouter, se faire entendre, voir ou être vu.
La photo du pancake recouvert de confiture d’orange prise au matin d’un 32 février afin de faire rire les amis, n'aura besoin que d'un réseau social.
Pourtant certains élèvent les réseaux sociaux au rang de communication internationale de premier plan, ... , à chacun son point de vue sur le niveau et l’interprétation d’un tweet ou d’un post.
Il arrive parfois que l'on ait envie d’avoir un peu plus de propriété, même si on perd de la visibilité, sur ce que l’on veut montrer, bref, avoir son site. Il faut tout de même garder en tête, qu'une fois sur le net, on perd forcément de la propriété de ce que l’on dépose en le montrant ainsi aux autres.
Il y a certaines choses que l’on veut pouvoir montrer mais au travers de ses propres outils, et pour ce faire je veux revenir aux basiques, aux fondamentaux. J’ai envie de me frotter, de nouveau, au développement de pages web.
Complexifier le développement d’une publication ? Oui ! Mais pour en simplifier la gestion d’architecture finale !
Un gros travail commence donc pour refaire mon site et y injecter, au fur et à mesure, quelques vieux articles.
Refaire un site, mais comment ?
Les outils qui font tout ?
Une fois posé les exigences : pages statiques, pas de CMS, pas de BDD, du php que si nécessaire (afin de ne pas devoir gérer les éléments de sécurité devant couvrir les risques ouverts par l’utilisation de ce langage) que reste-t-il ?
Une première tentative a été d’utiliser un outil moderne, gratuit, permettant d’aller assez loin dans la génération de pages web html avec des fonctionnalités avancées et qui pouvait maintenir un même menu sur plusieurs page, j’ai donc testé openElement pour le nommer (utilisant JQuery que l’on verra plus loin). Il permet de visualiser votre développement au travers de vos navigateurs et, via un Filezila serveur en local si nécessaire, il permet de déployer les pages développées sur votre serveur WEB d’hébergement.
Cependant, une fois les pages déposées sur mon serveur local, que ce soit pour vous un WAMP ou XAMPP si vous êtes sous windows et via un serveur FTP, je me suis aperçu qu’openElement m’avait déposé tout un tas de fichiers dont certains inutiles et non désirés.
En conclusion, ne voulant déposer que le nécessaire sur mon futur site, il fallait que je regarde ailleurs.
Le Framework (La Boîte à outils et matériaux)
L’élément de base pour un ouvrier est sa caisse à outils, pour le développeur web c’est un peu pareil. Donc il me faut une caisse à outils efficace et qu’elle contienne les matériaux qu’il me faudra.
Après avoir fait un rapide tour des trois principaux (Bootstrap, Foundation, JQuery), j’ai décidé de choisir Bootstrap dans sa version 4 beta (si besoin en version “source files” pour récupérer les sources SCSS qui seront abordées plus loin dans l’optimisation).
Le Layout (Le Plan)
Le Layout est le plan d’ensemble de la construction, où l'on va placer la salle d’eau par rapport à la cuisine ou à la chambre. Il existe des outils permettant d'agencer les pièces mais ils dépendent aussi de votre caisse à outils. Ils sont capables d’utiliser vos matériaux et il vaut mieux qu’ils sachent poser votre parpaing sans vous imposer d’utiliser une poutrelle qui n’existe pas dans la “caisse à outils et matériaux” que vous avez retenue. J’en ai essayé plusieurs que ce soit Online (LayoutIt, …) ou offline (Pingendo) qui vous aident aussi pour la réalisation de votre skin, mais ils génèrent un plan dont le code n’est pas aussi propre et facile à maintenir que ce que je voudrais.
Ce sera donc fait avec un simple éditeur de texte gérant la coloration syntaxique (Notepad++).
N'ayant trouvé aucun outil satisfaisant, je resterai sur la seule utilisation de langages au travers d'un éditeur de texte.
Le Skin (La Peinture)
La feuille de style est ce qui correspond aux finitions, au choix du tableau qui sera dans l’entrée, à la couleur de la peinture de la chambre.
Là, nous n’avons pas trop le choix si l’on ne veut pas passer la couleur à chaque changement de pièce mais que l’on veut peindre toutes les chambres de la même couleur en une seule fois, ce sera du CSS.
Cependant j’ai eu une révélation et parcourant la page du Framework Bootstrap : SASS !
Il existait donc un langage structuré, modulaire, maintenable, contenant des variables et des fonctions, qu’un informaticien pouvait utiliser et qui pouvait générer du CSS !
Et, en regardant cette vidéo YouTube ("Get Started With Sass on Windows" de Traversy Media), Ok c’est en anglais et cela dure 40 minutes, le langage et l’outil se sont imposés d’eux mêmes : le langage ce sera SCSS (la nouvelle évolution du langage SASS) et l’outil SCOUT !
On peut enfin maintenir du code CSS de manière simple, avec le langage SCSS, et générer à la volée le fichier CSS pour en voir immédiatement le rendu sur notre page de développement.
Langages / Outils
Les langages utilisés : SCSS et CSSL'outil : SCOUT.
Attention : après une mise à jour Java il est possible qu'il soit nécessaire de relancer "Air-Java7" de la procédure d'insatallation de Scout.
L'aide aux skins
Il existe des aides complémentaires au choix des pots de peinture spécifiques de votre caisse à outils !
En effet des outils comme Paintstrap ou Pikock permettent de générer le fichier css de bootstrap (l’élément css de votre boîte à outils Bootstrap).
Cependant, actuellement, c’est le css pour la version 3 de Bootstrap ou la version LESS toujours pour la version 3. LESS est le langage qui était utilisé avant SASS pour maintenir les CSS dans Bootstrap.
Il faudrait alors que je regarde la conversion du fichier LESS en SASS et la compatibilité de cette version 3 générée avec la version 4 que j’ai téléchargée afin de générer le CSS version 4 à partir des fichiers SASS … mais ceci est une autre histoire et n'est pas encore au programme.
L’alternative Thèmes
Il existe des thèmes tout faits proposant Layout et skin mais qui ont l'inconvénient de ne pas correspondre aux critères d’autonomie et de maintenabilité que je me suis fixé.
L’optimisation
Pour aller un peu plus loin, pourquoi avoir, à l’entrée de votre domicile web, une boîte à outils contenant tous les éléments pour construire à la volée votre maison à chaque fois qu’un visiteur ou vous même arrivez mais aussi tous les éléments dont vous n’avez pas besoin ?
Le Framework, votre boîte à outils, vous est livré soit en version compacte, non modifiable simplement mais contenant tout, soit avec tout le détail (version “source files”). Dans cette seconde version vous avez aussi le CSS de Bootstrap qui est livré au format SCSS. Il vous est alors possible de n’intégrer que ce dont vous avez besoin à la fois de votre boîte à outils mais aussi ce que vous avez ajouté pour le layout et le skin.
La page de makina-corpus est à l’origine de ce paragraphe !
Si j’ai le temps je verrai pour me frotter à ce challenge bien que la documentation de Makina-Corpus soit actuellement pour la version 3 de Bootstrap et non la 4 que j’utiliserai, donc avec des deltas à adapter.
Une bonne pratique SASS
Encore une source en Anglais mais si vous en êtes arrivé là de la lecture de cette note cela ne devrait pas vous déranger :
Sitepoint (Architecture for a Sass Project).
Pour les galeries de photos ?
Pour l’instant rien n’est arrêté, la base d’une galerie est l’organisation des photos, le reste n’est que de la mise en page.
J’aurais peut-être un intérêt à regarder un outil où la photo est au centre et l’outil simple et au second plan tel que : Single File PHP Gallery
Et pour les liens des réseaux sociaux ?
Les liens pour trouver les codes à ajouter pour les boutons des réseaux sociaux :
Pour facebook
Pour Google+
Pour Linkedin
Pour Twitter
