the GizMecano Laboratory

Débuté comme une simple expérience personnelle en 2003, devenu temporairement un genre de portfolio à part entière entre 2010 et 2012, the GizMecano Laboratory présente différentes expériences informatiques — icônes, fonds d’écrans —, le plus souvent sous licences libres et/ou ouvertes.

Description

Après avoir découvert les possibilités offertes par le réseau dès 1995 et avoir rapidement commencé à créer quelques pages, l’idée est venue de mettre en ligne divers commentaires sur ces premières expériences. C’est sous le titre de GizMecano Laboratory que ces premières notes commencent à être publiées à partir de l’été 2003.

Abandonnant la mise en forme à base de tableaux et les pages HTML statiques pour bénéficier des riches possibilités offertes par le langage PHP et les feuilles de styles CSS, la deuxième version apparaît au cours de l’automne 2004, marquée notamment par l’utilisation de matériel graphique strictement personnel.

Fruit d’une expérience accrue en matière d’écriture des scripts PHP, la troisième version commence progressivement à se révéler au début de l’année 2006. Conçue avec un thème volontairement plus sobre, cette mouture est notamment l’occasion d’utiliser quelques premières expérimentations d’illustrations vectorielles.

Une quatrième version est mise en ligne à la fin de l’année 2007. Elle se démarque de ses trois devancières par une apparence délibérément plus sobre, voire plus sérieuse. Ses principales innovations concernent notamment l’utilisation de la pleine largeur de l’écran ou l’intégration de plusieurs services externes, tels que Delicious, Flickr ou Google Reader.

La cinquième version née en 2010 marque un net changement d’orientation pour devenir une véritable vitrine sous le titre de GizMecano.net. Bâti ex nihilo en utilisant quelques unes des dernières spécifications — HTML5 et CSS —, ce portfolio a comme objectif de ne pas reproduire mécaniquement le schéma souvent utilisé pour ce genre de site, notamment en conservant historique et évolution des projets.

Apparu pour son dixième anniversaire, la sixième version du site renoue avec son objectif initial et retrouve par conséquent son titre d’origine. Issu d’un concept visant à utiliser les mêmes bases techniques que son « jumeau professionel » — d’où le nom de Janus —, cette mouture se concentre désormais essentiellement sur la présentation de projets libres et/ou ouverts

Historique

Version 6 (2013–2015)

18.  Version 6.0.1

En raison de récents changements de configuration du serveur hébergeant le site, différents paramètres ont dû être ajustés sans répercussion visuelle perceptible.

17.  Version 6.0 — Janus Patulcius

Presque une année après sa mise en ligne, la sixième mouture du laboratoire passe finalement en version définitive.

Les changements sont assez réduits — une partie des aménagements initialement prévus ayant été abandonnés faute de temps et pertinence. Structurellement, l’en-tête et le pied-de-page du site ont été nettoyés en profondeur, révision auxquels s’ajoutent quelques aménagements du code pour tenir compte de certaine des plus récentes évolutions des spécifications du HTML. Par ailleurs, les styles ont été quelque peu mis à jour, notamment en prenant pour base une version plus récente de normalize.css.

16.  Version 6.β — Janus Decimus

Pour son dixième anniversaire, ce portfolio retrouve son titre d’origine, marquant un retour à son objectif initial : présenter différentes « expérimentations » dans le domaine informatique.

Sur la forme, cette sixième version se présente désormais comme un genre de « jumeau » du portfolio professionnel — principe de base du concept Janus aux deux visages —, dont il reprend le schéma directeur général – retouché par quelques nécessaires adaptations — et la charte graphique — les dominantes de couleurs étant cependant cette fois-ci inversées.

Sur le fond, toujours rédigé en anglais, le contenu se trouve singulièrement réduit puisqu’une grande partie — concernant notamment l’élaboration de sites — a été reversé à son pendant professionnel. Cette première livraison ne propose donc que quelques présentations de projets personnels plutôt anciens : quatre ensemble d’icônes et deux fonds d’écrans.

capture
Version 6.β — Janus Decimus

Version 5 (2010)

15.  Version 5.α — κλέος

Pour son septième anniversaire, la cinquième version du site change de perspectives : elle s’éloigne volontairement d’une conception dilettante pour s’orienter vers un genre de portfolio numérique qui présente différents types de travaux, dont principalement des réalisations dans le domaine de la conception de sites.

Pour l’heure, comme toute version α, le site est encore loin d’être complet et terminé — mais ce genre de travail est-il jamais vraiment terminé ? La réapparition d’une version française est notamment à prévoir, ainsi qu’une importante réorganisation des archives.

En outre, cette nouvelle version est l’occasion d’une première utilisation de certaines spécifications encore en projet, comme HTML5 ou CSS3. Tous les outils nécessaires pour mettre en œuvre ces nouveautés n’étant pas encore adaptés à l’heure actuelle, certaines opérations — comme la validation du code – sont encore assez aléatoires.

capture
Version 5.α — κλέος

14.  Version 5.CS

Après plusieurs mois de silence dû à un déménagement complexe puis un agrandissement significatif de la famille, le laboratoire se transforme pour devenir désormais un genre de portfolio numérique, principalement dédié à la conception de sites internet. Pour se faire, il déménage définitivement de son ancienne adresse pour acquérir son propre nom de domaine.

L’abréviation employée pour cette pré-version ne se réfère en aucun cas à une quelconque « suite créative » bien connue, mais plutôt à l’expression anglaise « coming soon », largement utilisée pour ce genre de page... Reste maintenant à attendre le jour où cette expression pourra être prise à la lettre.

Version 4 (2007–2008)

13.  Version 4.β

La première variante de cette quatrième version du « laboratoire » s’étant avérée fonctionnelle, les modifications apportées à cette révision sont principalement de légères améliorations plus que des corrections.

La part la plus importante du travail a été consacrée à la création de plusieurs flux RSS — basés sur les trois catégories de projets présentés sur le site —, en plus de quelques retouches de certains styles, nécessaires au fur et à mesure de la compilation des données, toujours en cours.

En résumé, les principaux changements peuvent se résumer ainsi :

  1. création des flux RSS internes
  2. insertion de liens vers ces flux RSS selon les types de page
  3. amélioration des styles CSS en fonction des nouvelles données compilées
  4. légère personnalisation de la page dédiée aux sites
capture
Version 4.β

12.  Version 4.α — Red Anger

Il était temps de réfléchir à une nouvelle variante un peu plus sobre et sérieuse pour ce « laboratoire ». Tout d’abord, en finir avec une mise en page restreinte et utiliser l’intégralité de l’espace disponible est apparu comme prioritaire. Ensuite, un menu clair, utilisant des libellés plus explicites, a semblé indispensable pour donner un « visage » plus mûr à l’ensemble. Enfin, une page d’accueil plus lisible, dont l’organisation soit orientée autour des types de projets et non plus bâtie sur un seul ordre chronologique, a clairement paru plus explicite.

Côté composition et développement, cette nouvelle mouture bénéficie notamment d’une amélioration sensible de l’utilisation des imbrications CSS, mais aussi, de l’utilisation de plusieurs scripts tiers qui enrichissent le contenu du site d’éléments externes.

Bien entendu, il ne s’agit encore que d’une version α : elle ne contient que la structure principale et quelques exemples de données — l’ensemble du contenu de la version précédente devant être converti au fur et à mesure. Cependant, cette quatrième version donne un aperçu suffisant de l’orientation à venir pour prendre désormais la place de la précédente.

capture
Version 4.α — Red Anger

Version 3 (2006)

11.  Version 3.0

La mode des libellés de version utilisant une lettre de l’alphabet grec est certes distrayante. Toutefois, la première apparition de cette troisième version a été mis en ligne il y a maintenant plus de deux-cents-cinquante jours et il semble désormais assez légitime de se passer de ce genre de dénomination.

Quelques petits détails ont néanmoins été retravaillés : les styles des deux sections pointant vers l’extérieur ont été revues et les tables SQL dépendantes ont été changées en parallèle. Pour le reste, la structure et le fonctionnement du site ayant faits leurs preuves, rien n’a été modifié.

capture
Version 3.0

10.  Version 3.β

Quatre mois après la sortie de la version α, il était temps de progresser. Cédant finalement à la vague actuelle — qui veut que les sites ne soient plus qualifiés par la mention « en construction », mais l’ajout de la lettre grecque β après leur numéro de version —, cette nouvelle mouture corrige quelques bugs et améliore certains scripts PHP existants.

Sans entrer dans les détails, on peut dresser une brève liste des changements :

  1. correction des tables de données SQL
  2. réduction du code PHP
  3. simplification des URL — comme aucun module de réécriture n’est activé, il s’agit simplement d’utiliser un identifiant numérique
  4. optimisation de certaines propriétés CSS
  5. retour de certaines pages qui manquaient lors de la version précédente — en l’occurrence les liens et les outils

Les données présentes dans les différents tableaux ont aussi été mises à jour de manière exhaustive, y compris en indiquant des liens disparus depuis, ceci dans le but de montrer au mieux l’historique de certains projets — un genre de changelog comme on dit dans le milieu...

En bref, il s’agit peut-être effectivement bien d’une version β — dans le sens où il subsiste probablement quelques imperfections —, mais le « laboratoire » est un site désormais à jour et fonctionnel.

capture
Version 3.β

09.  Version 3.α — Mecano Reloaded

Après une période de réflexion, le « laboratoire » revient avec un nouveau visage. Pourquoi déjà une nouvelle version ? Certes pas pour céder à l’air du temps et suivre la mode actuelle du « web 2.0 »... L’idée est des plus simples en fait : obtenir des pages plus propres et intelligibles en utilisant des tables de données SQL plus légères et mieux construites. En bref, améliorer un ensemble qui a été constitué de manière empirique, en accumulant progressivement différentes découvertes.

Concernant cette nouvelle évolution, pour se limiter aux éléments les plus visibles, le choix s’est porté vers une composition plus aérée, utilisant notamment des tailles relatives pour les textes. Par ailleurs, quelques nouvelles propriétés CSS ont été intégrées et le menu de navigation a été déplacé vers le haut du site.

Quant à la structure des données, tous les textes ont été convertis dans l’encodage UTF-8 et les entrées des bases sont désormais définies par un identifiant unique — pour éviter les doublons, par exemple. Pour le moment, les sections consacrées aux outils utilisés et les liens favoris n’ont pas été mises à jour et feront peut-être leur retour lors les versions à venir.

capture
Version 3.α — Mecano Reloaded

Version 2 (2004–2006)

08.  Version 2.h — Hiatus

Après plus de six mois de bons offices, la deuxième version du « laboratoire » s’offre un petit hiatus qui n’est, en aucun cas, synonyme de mise en sommeil, puisque les cogitations sur la troisième mouture sont dès à présent en cours. Cette simple page, sans nécessité de maintenance, est apparue être une solution souple et pratique, à défaut d’être optimale.

07.  Version 2.1.2

La récente mise à jour du GizMecano Laboratory est modeste avec quelques améliorations mineures concernant principalement les styles de liste.

Grâce au potentiel de la structure dynamique des pages conçues entièrement en PHP, il devient en effet possible d’ajuster l’affichage des puces de liste en fonction de l’état du lien. Trois styles différents, définis en CSS, permettent donc un rendu distinct selon le statut des entrées de la liste :

  1. vert, pour les projets clos ou actifs
  2. jaune, pour les projets en cours ou en travaux
  3. rouge, pour les projets abandonnés

Bien entendu, l’affichage ad hoc de ces listes n’est possible qu’avec un navigateur moderne capable de lire convenablement les images PNG avec transparence !

06.  Version 2.1.1

Est-il possible de dire que cet « éléphantesque animal » qu’est le langage PHP puisse avoir été domestiqué ? Évidemment, il faut bien reconnaître que ce « laboratoire » n’utilise qu’une modeste partie de son puissance potentielle, mais néanmoins le fonctionnement attendu semble au rendez-vous.

Qu’est-ce que cela signifie concrètement ? Ce site n’a tout simplement plus aucune page directement codée en HTML : il est uniquement conçu à partir d’inclusions hiérarchisées, qui sont toutes implémentées dans seulement cinq fichiers PHP de base — plus deux autres pour l’utilisation du formulaire.

L’ensemble fonctionne parfaitement et rapidement avec cette nouvelle organisation, qui a avant tout été conçue avec deux objectifs en tête :

  1. obtenir une gestion des pages facile et claire
  2. acquérir de nouvelles compétences en langage PHP

Profitant de cette mise à jour, quelques autres points ont aussi été rectifiés, telles l’utilisation d’un nouveau logo ou une amélioration de la lisibilité de certains styles présents dans le thème par défaut.

05.  Version 2.1 — Poor IE

Comment désigne-t-on, en français, un aliment qui s’avère impropre à la consommation parce qu’il est attaqué par la pourriture ? On dit qu’il est « pourri ». Et pour générer une nouvelle feuille de styles spécifique au très commun Internet Explorer — qui s’avère incapable de comprendre correctement les normes actuelles du W3C —, ce style particulier s’intitule donc : « Poor IE » ! Mauvaise blague...

Désormais, si un visiteur utilise un navigateur conçu par l’une des sociétés les plus célèbres au monde dans le domaine informatique, il pourra donc seulement voir cet unique style. En revanche, s’il utilise un logiciel alternatif plus respectueux des standards, tel que Firefox — et tout spécialement s’il a installé une extension du genre de Stylesheet Chooser Plus —, il aura le choix entre les deux styles visuels.

Par ailleurs, pour améliorer ces pages, certains scripts PHP ont été corrigés, quelques nouveaux graphismes originaux ont été ajoutés et diverses autres menues corrections ont été réalisées. Si tout fonctionne correctement, le GizMecano Laboratory est désormais visible avec tous les navigateurs et conforme aux standards actuels.

capture
Version 2.1 — Poor IE

04.  Version 2.0 — Ubaye 04

Bienvenue dans le nouveau terrier de la marmotte ! Grande nouveauté, ces pages sont désormais alimentées par une base de données SQL et le langage de script PHP, outils dont l’important potentiel commence à être appréhender. Qui plus est, le rendu de chaque page tente d’être aussi proche que possible des standards actuels que sont XHTML et CSS.

Par ailleurs, tout le site est désormais exclusivement conçu avec du matériel graphique personnel : par exemple, le style de cette nouvelle version du « laboratoire » doit beaucoup à quelques photographies réalisées durant de courtes vacances dans un de mes endroits favoris — d’où le nom de code de cette version.

capture
Version 2.0 — Ubaye 04

Version 1 (2003–2004)

03.  Version 1.1

Depuis la découverte de différents produits de la Fondation Mozilla — et notamment leurs programmes ouverts et libres capables de remplacer totalement certains logiciels d’origine du système —, il m’est apparu de plus en plus évident que mes travaux devaient se conformer au mieux aux recommandations et standards.

Évidemment, cette nouvelle prise en compte se devait de débuter avec ces pages personnelles et, même si les visiteurs ne peuvent probablement pas s’apercevoir du changement, toutes les feuilles de styles ont été entièrement corrigées avec cet objectif à l’esprit. Bienvenue aux standards !

02.  Version 1.0.1

Après cette — trop longue — canicule estivale, il a semblé opportun pour ce « petit laboratoire » de se parer d’une nouvelle tenue de saison. Outre une feuille de styles entièrement revue, cette mise à jour voit l’apparition sur différentes pages de quelques illustrations extraites de travaux réalisés par deux graphistes hautement recommandables, la russe Julia Nikolaeva et la japonaise Wati Larke.

capture
Version 1.0.1

01.  Version 1.0

Pourquoi donc un site personnel de plus sur le réseau ? Dès ma première prise de contact avec Internet — en 1995, déjà —, a émergé la question de savoir s’il y aurait un intérêt quelconque à faire connaître et partager certaines de mes expériences, principalement dans le domaine de la conception de sites web. Les premières notes qui constituent ces pages pourraient être un début de réponse...