Black Mesa, interface pour projets Web

Développement | Personnel | 19/03/2020
Une interface sobre mais efficace, sans base de données, pour lister vos différents projets Web et ainsi faciliter leur gestion, versioning, recherche, etc.

Présentation

Bien que mon profil laisse transparaître une certaine polyvalence dans mes compétences techniques, j’ai toujours eu une attirance prononcée pour le développement web. Je me souviens encore de mon premier site Internet réalisé en 2003 (HTML Strict 4 sans CSS mais avec abus de gifs), nostalgie quand tu nous tiens…

Bref, depuis lors, j’ai développé un certain nombre de sites Internet et d’applications web, en HTML/CSS/PHP/JS/SQL, que je conserve sur mon ordinateur personnel. Pour cela, j’utilise une plateforme de développement connue et reconnue, WampServer. Mais je voulais aussi accéder à mes projets à distance sans forcément laisser mon ordinateur allumé. Du coup, j’ai acquis un petit hébergement perso pour y stocker ces fameux projets.

Sauf que, WampServer a le mérite d’avoir une interface personnalisée et personnalisable, mais ce n’est pas le cas pour un hébergement perso qui est livré brut de pomme (comprendre, l’interface Apache tout simplement). Du coup, je me suis décidé à développer ma propre interface web visant à lister mes différents projets, tout en affichant quelques informations utiles (version, statut, etc.) et en permettant une recherche parmi ces projets.

C’est ainsi que Black Mesa est née (petit clin d’œil à Half-Life pour le nom du projet, Black Mesa y étant un centre de recherche). Cette interface a été réalisée en HTML/CSS. Je l’ai voulue simple mais efficace, sans fioritures. La récupération des projets puis leur affichage a été réalisé en PHP (saupoudré de XML). Aucune base de données nécessaire ! Enfin, j’ai ajouté un peu de Javascript pour dynamiser la barre de recherche (et ainsi pouvoir effectuer une recherche en temps réel).

L’installation est on ne peut plus simple. Il suffit de décompresser les sources (cf. rubrique « Ressources » en bas de page) à la racine de votre hébergement. Vos différents projets doivent être déposés dans le dossier « projects ». Et les vignettes (au format JPG, taille 298px sur 198px) doivent être déposées dans le dossier « images/tiles ». Attention au nom de vos projets et vignettes, ils doivent être identiques et sans caractères spéciaux (ni espaces).

L’étape la plus importante est le fichier XML qui doit être placé dans chaque dossier de projet. C’est ce fichier qui permet de définir les informations du projet pour l’affichage sur l’interface. À la racine du dossier « projects », vous avez un exemple de fichier XML. Et puis, dans les sources disponibles en téléchargement, j'ai laissé sept projets dans le dossier « projects » (avec leurs vignettes associées) pour exemple.

En tout cas, à mon niveau, je suis satisfait de mon interface. Je l’utilise déjà depuis plusieurs mois et elle répond à mes besoins. J’espère qu’elle pourra également vous être utile. Dans tous les cas, n’hésitez pas à me contacter si vous avez une question ou un problème.

Application webCSS3Développement webHTML5JavascriptJqueryNormes W3COutil pratiquePHPResponsive DesignXML

Ressources