Changement de thème : bre-som édition

Par sila.

• Devblog

---

Comme vous avez pu le remarquer en entrant, j’ai légèrement changé la déco. Pensez à vous essuyer les pieds sur le paillasson, tout est neuf.
Même si je suis surexcité à l’idée de vous montrer tout ça, on va essayer de faire un rapide…

Résumé des nouveautés

Graphismes

Tout d’abord, la couleur du fond ne doit plus vous éclater les yeux à coup de tournevis blancs. Un thème sombre aide à la lecture, vous évitant la classique fatigue oculaire des sites enneigés. Ensuite, les images sont théoriquement mises en exergue par le fond gris/noir ; piédestal colorimétrique . Et, au passage, cela consomme moins de batterie donc c’est bon pour la planète.

Je vous fais grâce d’une description enflammée et exhaustive des animations et des transitions entre les pages, probablement responsables de la mort prématurée de votre téléphone. Repose en paix, petit appareil sacrifié sur l’autel du développement web.

Accueil

Outre les nouveaux paragraphes de présentations ajoutés à la page d’accueil, et une réorganisation générale (accès direct à la dernière image de l’aléartoire, par exemple), un slider sympathique a été ajouté.

La fonction de recherche y a trouvé une place de choix, à côté d’un lien vous donnant l’accès à un article tiré au hasard. C’est cadeau.

Article classique

Auparavant, vous pouviez trouver un ensemble de données auxiliaires (des métadonnées) à côté de la miniature de l’article, comme ceci :

Désormais, elles sont enrichies et accessibles en cliquant sur le « + » en haut à droite de la fenêtre. D’ailleurs, les personnes rédigeant des articles sur l’art en ces lieux ont leur page attitrée, regroupant toutes leurs contributions. Vous pouvez y accéder depuis ces mêmes métadonnées.

Les pages d’articles sont par ailleurs pourvues de quatre articles associés. Ils sont soit aléatoirement sélectionnés, soit ajoutés avec amour et précision par l’auteur du billet.

Enfin, pour ceux d’entre vous cherchant les commentaires afin de m’insulter pour une quelconque raison ou me vendre des médicaments douteux, ils sont juste en-dessous des quatre larrons.

Aléartoire

La navigation au sein de l’aléartoire a été grandement améliorée (je crois ?). Vous pouvez désormais choisir une catégorie et scroller à l’infini. À tout moment, vous pouvez régler les catégories que vous souhaitez visionner en cliquant sur le « + » en haut à droite de votre écran.

Si vous flashez sur une image en particulier et que vous ne pouvez attendre de la montrer à tous vos amis, différents liens vers des réseaux sociaux sont directement accessibles en-dessous. Pour accéder à celui de l’image elle-même, ou sauvegarder l’endroit où vous vous êtes arrêté de descendre, cliquez simplement sur l’image ou son titre. Vous pourrez continuer à martyriser votre écran tactile ou la molette de votre souris depuis ce nouveau lien, sans perte de continuité dans la navigation. #UX

Étiquetage en règle

Si les articles étaient précédemment classés par catégories et rien d’autre, je travaille aujourd’hui à les grouper par thèmes généraux ou « étiquettes » (« tags », en anglais). Ainsi, en ouvrant le menu, vous pouvez accéder à votre contenu préféré en sélectionnant la technique ou le style artistique de votre choix.

Images et chargement

Ce site est clairement mieux optimisé pour le chargement de ses ressources ; normalement, vous devriez y avoir accès plus rapidement qu’avant. Sans entrer dans des détails trop techniques (cf. dernier titre pour les intéressés), les images sont chargées dynamiquement après tout le contenu et elle s’adapte correctement à la taille de votre écran. En parlant d’images, il est possible que leur fond soit parfois gris : il me faut du temps pour les mettre à jour.

Tout est cassé !

Alors, déjà, ce site est fort et indépendant ; il fait ce qu’il veut.

Plus sérieusement, un projet de cette envergure comporte obligatoirement des bugs, des comportements bizarres et des utilisateurs voulant le visionner sur leur Tamagochi. Si vous repérez quelque chose qui ne vous semble pas normal, merci de m’en faire part à l’adresse mail suivante contact[arobase]lartboratoire[point]fr, via Twitter, ou dans les commentaires de cet article. Merci d’avance pour le temps que vous prendrez et mes plus plates excuses si votre expérience est détériorée.

Est-ce qu’on peut voir comment c’est fait ?

Oui ! Pour les développeurs et les curieux, le code est opensource et donc publié sur Gitlab ! N’hésitez pas à y mettre votre nez et me dire ce que vous en pensez.

---

C’est tout pour cette fois-ci.

Vous avez devant vous les yeux le fruit de plusieurs mois de travail (2 pour le maquettage graphique, 3 pour le développement, étalés sur un peu plus d’un an). J’espère sincèrement qu’en lisant la phrase précédente, une partie de la page n’est pas partie en vrille.

Plus sérieusement, je considère ce thème comme un projet de fin d’étude (DUT Métiers du Multimédia et de l’Internet, fini il y a déjà un an), un état de l’art (ah !) de ce que j’arrive à faire en développement web, avant de devoir passer à autre chose (changement de domaine, manque de temps/motivation, on connaît la chanson).

Lors de la réalisation des maquettes graphiques, je m’étais fixé de ne pas avoir de contrainte de niveau technique : « ah, non, ça, je ne pourrai pas le coder », « ouiiii, mais pour développer, ça va être une horreur ». Nope, nada, no limit.
Évidemment, mon clavier a accueilli stoïquement mes larmes durant la phase suivante, lorsqu’il a fallu convertir les jolies maquettes en site utilisable. Cela dit, j’ai la fierté d’annoncer qu’aucune des fonctionnalités prévues n’est passée à la trappe. J’en ai même rajouté certaines au passage, hop. Le tout en faisant attention à l’optimisation générale (on passe de 57Kb de scripts sur la version toute crade précédente à 51Kb sur celle-ci, environ 42 fois plus poussée). Joie, cotillons, et tape dans le dos.

En clair, j’ai passé de très longues heures à peaufiner ce projet dans ses moindres détails ; j’espère qu’il vous plaira et que votre navigation n’en sera que plus agréable.

Allez, séquence émotion.
Merci à stackoverflow ma famille, qui a sous la contrainte gentiment participé à la phase de test et partagé ses impressions tout au long de la création du thème.

Je souhaite remercier mes amis, Julie, David Boulle, Nicolas Manenti, I. et HyacinthAorchis, pour leur écoute et leurs conseils conseils durant les longs mois fiévreux de création graphique puis de développement. Vous êtes chouettes et méritants.

Merci à vous, lecteurs-visiteurs-plus-ou-moins-assidus, pour votre patience (1 an et quelques mois, on ne se presse pas), pour votre intérêt et vos réactions/commentaires. En tant que créateur, lire vos retours est une joie incommensurable !

À bientôt.

---