Projet Amenysta World

Juillet 2007

Février 2013

PHP JavaScript AJaX HTML CSS XML RSS

Développeur, contributeur et designer (v1 et v2) :
Julien PAPASIAN

Designer (v3) :
xplicit

Contributrice :
mollymoon

Amenysta World était un site web personnel dynamique sur le thème de la conception de jeux vidéo avec un système de membres, et des modules pour la communauté (forum, articles, actualité, …).

Ce site web a comporté comme challenges l’étude de la concurrence, l’intégration, le développement, le webdesign, l’hébergement, le webmastering, la contribution éditoriale et le référencement web.

Amenysta World a été remplacé par Amenysta, le site web que vous consultez actuellement, qui conserve les meilleurs articles et les jeux vidéo qui ont été conçus.

L’origine

Pour bien comprendre comment est né Amenysta, il faut remonter à la création d’Amenysta World, le précédent site qui a été remplacé le 21 février 2013. Il s’agissait d’une communauté de passionné de jeux vidéos, en particulier de création. Amenysta était un jeu de rôle développé sous RPG Maker. De nombreuses fonctionnalités étaient disponibles sur le site (tutoriels, ressources, jeux, scripts…). Le contenu le plus pertinent a été conservé pour être migré sur le nouveau site, sur des pages statiques.

Ce site est né le 12 mai 2008, bien qu’il était en développement depuis juillet-août 2007. Il a été hébergé sur ServHome jusque fin 2013, puis sur un serveur dédié Kimsufi depuis.

Amenysta est un nom totalement farfelu, qui ne veut rien dire mais qui n’a finalement pas changé depuis sa création. C’est un dérivé de la pierre « améthyste ». D’ailleurs, si vous regardez bien la favicon du site, vous vous apercevrez qu’il s’agit d’une pierre.


Les différentes versions

Amenysta World a connu trois versions.

La version 1 du site a vu le jour le 12 mai 2008. Peu de visiteurs, juste quelques amis invités à poster deux-trois messages sur le forum, rien d’extraordinaire. Les fonctionnalités principales étaient les news, le forum et le livre d’or.

Le design était alors très léger, constitué d’un menu sur la gauche. La bannière avait été conçue par xplicit. Quand au reste du design, vous vous rendrez vite compte que je n’ai jamais été doué dans le graphisme.

Version 1 du site

La version 2, quant à elle, est arrivée peu de temps après, le 16 août 2008. Peu de nouvelles fonctionnalités, mis à part le système de tutoriels, mais celui-ci n’était pas terminé (les membres ne pouvaient pas rédiger leurs propres tutoriels et les administrateurs, les modérer).

Le design avait encore changé. Cette fois-ci, il était beaucoup plus coloré. Deux blocks-menu se trouvait à gauche et à droite de la bannière, qui était plutôt basique (Nom du site) mais je l’avais réalisé moi-même. Les tableaux, ont enfin été colorés, et seront d’ailleurs réutilisés dans la version 3 du site. Par rapport au design de la version 1, ce fut un grand changement.

Version 2 du site

La version 3 est celle qui a demandé le plus de travail. Le module de tutoriels a enfin été terminé, et un nouveau a fait son apparition : le module de téléchargements. L’organisation des news a été revue (répartition en catégorie et ajout de la possibilité d’écrire ses propres news). Une webradio a été ajoutée et fonctionne 24 h/7 j.

Beaucoup de changements dans le design ! Un grand remerciement à xplicit encore une fois ! Cette fois-ci, il s’est beaucoup plus investi dans le design. Il a conçu la nouvelle bannière, le bloc login, la barre d’accès rapide, et les blocs "Derniers tutoriels", "Derniers téléchargements" et "En direct des forums". La page d’accueil a complètement été revue pour accueillir ces blocs. Au lieu des news listées l’une après l’autre, cette nouvelle page permet un meilleur accès au contenu. L’arrière-plan du site, provenant de RPG Maker VX, a été un véritable succès. Les membres ont été surpris par ce design et ont beaucoup aimé.

Version 3 du site


Les technologies utilisées

Cette partie s’adresse à ceux qui sont curieux de savoir comment ce site fonctionne.

De la version 1 à la dernière version, Amenysta World a utilisé plus ou moins les mêmes technologies principales, tout en suivant les tendances éprouvées.

  • xHTML 1.0 Strict, puis HTML 5 : il s’agit du langage de rédaction et formattage du texte.
  • CSS : l’apparence du site se fait à l’aide du CSS. Dans ses débuts, le site utilisait le CSS 2.0 mais les nouvelles possibilités de la version 3.0 lui ont permis d’ajouter de nouvelles fonctionnalités, comme la possibilité d’arrondir les bords d’un cadre, ou encore de télécharger des polices lorsqu’elles ne sont pas installées sur l’ordinateur du visiteur (comme dans le titre de la page et l’écriture utilisée dans la speedbarre). La plupart des navigateurs modernes prennent ces fonctionnalités en charge (ça exclut donc Internet Explorer jusqu’à sa version 8 comprise). Le CSS étant séparé du HTML, vous pouviez ainsi avoir le choix entre plusieurs designs dans Amenysta World.
  • PHP : C’est le langage pionnier du site. Sans lui, vous n’auriez pas grand chose. Il permet entre-autre d’avoir un système de membres, un forum, des tutoriels, une administration et encore bien d’autres ! Bref, toute la partie logique/dynamique. En mai 2019, le site est migré sur une base Symfony 4, un framework (évite de réinventer la roue sur certaines fonctionnalités de base), pour simplifier la maintenance.
  • MySQL, puis MariaDB, puis Doctrine ORM avec MariaDB : il s’agit du système de base de données chargé de stocker toutes vos données (vos préférences, votre design, la configuration du site, les news, les tutoriels, le forum…).
  • JavaScript : le JavaScript permettait d’ajouter des fonctionnalités sympas comme l’aperçu temps réel de votre message et les spoilers. Aujourd’hui, son utilisation est limitée aux filtres de mon portfolio. Vous avez la possibilité de désactiver Javascript de votre navigateur et visiter le site sans ces fonctionnalités.
  • AJaX : AJaX permettait d’obtenir des informations sans avoir à recharger votre page. Son utilisation était limitée au formulaire d’inscription et à la prévisualisation finale.
  • XML : système utilisé dans le langage de balisage xCode dans les zones de texte (équivalent XML du BBCode), mais aussi dans les flux RSS.
  • RSS : ces flux permettaient de connaître les dernières news, les derniers tutoriels et téléchargements et les derniers posts sur le forum.
  • Les templates : Ils permettent de séparer le PHP du xHTML dans les fichiers. Au début, j’ai choisi d’utiliser Link TPL sur mon site car il est simple (syntaxe XML) et léger, et il permet également de stocker une version en cache de la page (ce qui signifie que s’il n’y a eu aucune modification sur la page que vous visitez, la requête ne va pas être refaite, ce qui va économiser des ressources). Faute de maintenance, j’ai migré sur une autre alternative légère, Rain' TPL, avant de finalement utiliser le moteur de templates Twig lors de ma migration vers Symfony.

Amenysta aujourd’hui

Amenysta, le site que vous consultez actuellement, a pris le relai sur Amenysta World, arrêté en 2013, en partant d’un soucis qu’il m’arrivait : je n’avais plus le temps de m’occuper d’Amenysta World et je continuais à développer des projets à côté. Amenysta a permis de réunir tous ces projets.

L'aspect communautaire supprimé, je suis désormais le seul mainteneur du site.

Le design a été revu dans un style plus sobre basé sur Foundation pour le CSS (assurant dans la foulée une compatibilité mobile) et RainTPL 3 comme autre moteur de templates. En mai 2019, le site est migré sur une base Symfony 4/Twig/Webpack pour faciliter les maintenances. En octobre 2019, Foundation est finalement remplacé par Bootstrap.

Quelques sections présentes dans Amenysta mais pas dans Amenysta World ont depuis été supprimées car plus d’actualité/maintenues :

  • Le blog : il était prévu que les billets soient migrés vers mon propre système de news intégré au site Amenysta.
  • Les liens : toutes mes trouvailles du net que je commente.
  • Nombreuses pages concernant ma formation à l’IUT, ces pages ont servi quelques années après mon diplôme aux futurs étudiants puis ont été retirées lorsqu’elles sont devenues obsolètes.