Histoire d'un site #4 - Compétences

Histoire d'un site #4 - Compétences

Un des buts du site est d'y exposer mes compétences, à la manière d'un CV, mais de façon beaucoup plus originale. Une simple liste aurait été suffisante, mais pour rester dans l'esprit complètement dynamique du site, il fallait quelque chose d'interactif. Etant plutôt fan des jeux de plateforme et les logos des langages / logiciels que j'utilise m'inspirant pour faire des éléments de décor, j'ai décidé d'en réaliser un pour cette page. Si vous ne l'avez pas encore vu je vous invite à vous y rendre dès à présent.

Un décor de jeu de plateforme

Le décor

Le décor vu de nuit

Comme d'habitude, rien de tel qu'un crayon et une feuille de papier pour organiser ses idées. J'ai donc listé toutes mes compétences et leur logos, ensuite j'ai tenté d'imaginer une suite d'intégration des éléments au décor. Il y a eu plusieurs tentatives de styles graphique différents, pour finalement arriver à trouver un style cohérent après être passé par le cartoon et le manga. Le décor a été pensé de la façon suivante : 

  • HTML : pour imager le HTML j'ai repris l'idée du bouclier sur les gardes dans Browser Quest, et je l'ai mis sur le personnage à mon effigie
  • CSS : ce sigle signifiant Cascading Style Sheets j'ai eu l'idée de le représenter en faisant une cascade dans le décor, et en précisant la chose à l'aide d'un petit panneau
  • JavaScript : ce langage est désormais imprégné dans le web, je l'ai donc ancré dans la roche à côté de la cascade
  • Java : j'avais pensé mettre une terrasse avec des personnes buvant un café, mais ça ne collait pas vraiment au décor ; je l'ai donc gravé aux côté de JavaScript
  • jQuery : ce n'est pas un langage mais une librairie JavaScript, mais cela est souvent demandé par les clients / recruteurs ; l'idée ici a été d'utiliser le logo comme la voile d'un bateau qui se verra finalement là pour transporter le personnage de l'île des compétences côté client (si l'on considère le Java utilisé en applet, bien que je l'utilise plutôt côté serveur).
  • Doctrine 2 : la flèche du logo m'a fait pensé à un panneau indicateur de direction, une sorte de "obligation de continuer par là" ; c'est pour cela qu'elle a été intégrée comme ça
  • SQL : n'ayant pas vraiment de logo, j'ai pris l'image utilisée pour représenter des données, et je l'ai intégrée sous le sol ne sachant pas lui donner un sens clair et précis ; elle est un peu le côté obscur du web, on ne la voit jamais mais elle est toujours présente
  • Twig : les hautes herbes vertes sont le logo de Twig, la seule touche de verdure dans cet espace plutôt bleu, accompagné par la même occasion de quelques arbres, histoire qu'il n'y ait pas que des éléments en rapport avec mes compétences
  • Photoshop : une petite plume déposée là, rappelant le logo des versions relativement anciennes de ce merveilleux logiciel principalement utilisé pour faire du webdesign dans le web (il a beaucoup d'autres possibilités, que je n'exploite pas ou peu)
  • Git : de la même façon que pour Doctrine, j'y voyais là naturellement un panneau mais qui pour le coup n'indique pas grand chose... mais ça me plaisait ainsi
  • Symfony 2 : c'est là une bonne partie du travail, l'air de rien, ce château imposant rappellera à certains les châteaux dans les jeux Mario, orné de deux bandes avec le logo de Symfony 2 montrant la noblesse et la position de force qu'a ce framework qui est maintenant très reconnu et utilisé sur de plus en plus de sites
  • PHP : enfin, l'éléPHPant est là, bien sage, regardant vers la gauche et montrant que vous êtes arrivés à la fin du décor

Les choses cachées dans ce décor

Les plus téméraires auront repéré la pomme d'Apple qui jonche le sol : c'est du pur troll, complètement gratuit et sans aucune justification.

La guerre des navigateurs : Internet Explorer est complètement abîmé par le temps et enfouis dans le sol, en contradiction à Firefox et à Chrome qui sont flamboyants à la surface. Ceci est en réalité là pour montrer qu'Internet Explorer depuis la version 9 a beaucoup évolué, mais que son image reste dégradée dans les esprits. Pourtant les versions 9, 10 et 11 sont vraiment respectables et au niveau de Chrome en terme de performances et de respect et interprétation des standards. Par ailleurs Chrome (via le logo Chromium, car ça collait davantage au niveau des couleurs) est ici imposé comment étant la lueur divine et dénonce le monopole de Google qui ne cesse de grandir.

Un 1UP qui est caché au dessus de la grande porte du château, en référence aux jeux Mario auxquels j'ai joué pas mal de temps.

Pas de Flash, mais un jeu quand même

Nombreux sont ceux d'entre vous qui me demandent si c'est fait en HTML/CSS/JS, la réponse est OUI. Il n'y a de toute façon rien d'autre d'utilisé sur le site. Cela a d'ailleurs été un dilemme assez important : réussir à tout faire fonctionner correctement (ou presque, il reste des choses pas très cohérentes, mais on dira que ça fait tout le charme de la page) sans que ça ne prenne toutes les ressources de l'ordinateur. Je ne suis pas totalement satisfait du résultat, mais j'ai plutôt réussi le pari.

Choix techniques

Pour un tel décor, on peut se demander : mais pourquoi tu n'as pas fait ça avec canvas ? Je répondrais simplement que je n'estime pas maîtriser suffisamment canvas pour pouvoir me permettre de m'en servir sans peur de me planter. Par ailleurs, je pense à ceux qui n'ont pas le JavaScript activé ainsi qu'aux bots des moteurs de recherche qui ne verraient rien du décor si je le faisais avec canvas.

Il y a en fait trois parties dans cette page : le décor, la barre de navigation en bas et les détails à propos de la compétence "courante" en haut à droite. Grâce à la barre de navigation on peut avoir un aperçu direct de toutes mes compétences en un coup d’œil, et l'on peut cliquer sur celle-ci pour voir l'explication associée en haut à droite. D'ailleurs, sur la version mobile, la navigation est verticale et les textes explicatifs sont à droite de celle-ci, tout simplement.

La barre de navigation

Futilités de la page

Si vous avez visité la page à différentes heures de la journée, vous avez du vous rendre compte que le fond du décor change. Il y a en effet trois déclinaisons possibles : jour, aube et nuit.

[ALERTE SPOIL] Si vous avez regardé un peu le code HTML, vous vous êtes certainement rendus compte que le décor est découpé d'une façon un peu étrange, alors qu'il aurait pu tout à fait être en une simple image de fond / bateau / personnage. Tout simplement que certains élément du décor son animés, je vous laisse le plaisir de découvrir comment activer les animations. Aide : si vous êtes un joueur, vous n'aurez pas trop de mal à trouver.

Contrôle et animations du personnage

Venons-en au point qui intrigue pas mal de monde. Comment contrôler le personnage ? C'est relativement simple : le personnage est dans le décor, lorsque l'on appuis (on keydown) on se déplace vers le côté désiré, le personnage est alors déplacé à travers les 6000px de large. Ensuite, le décor est déplacé de façon à être centré autour du personnage, sauf à chaque bout, puisqu'il n'y a plus de décor : à ce moment là, le décor ne bouge plus mais le personnage continue de se promener dedans.

Tests de collisions

Dans tout bon jeu, il y aurait eu des hit box et des tests au pixel près pour savoir si le personnage peut aller ou non vers l'endroit désiré. Mais cela me semblait lourd du fait que dans mon cas, il ne s'agit là que d'un décor assez linéaire en dehors des deux petites plateformes de la cascade. De ce fait, j'ai rusé en utilisant uniquement l'altitude à chaque point. Il y a donc, en dur, les coordonnées des points où l'altitude change et l'altitude en question. Pour les chutes entre les plateformes, l'altitude est négative. Ainsi le personnage tombe et lorsque sa position verticale est insuffisante, il respawn.

Animations de saut et de déplacement

Le sprite du personnage

Le personnage est très légèrement animé lors de ses mouvements, ceci grâce à un sprite qui est donc une image sur laquelle sont placées toutes les étapes de l'animations. Ensuite, je change la position du background image en CSS / JavaScript et on obtient alors un semblant d'animation : largement suffisant dans ce type d'utilisation. Note : sur Browser Quest, c'est exactement la même technique qui est utilisée ainsi que dans beaucoup d'autres jeux.

Explication avant de jouer

Avant d'arriver sur le mini-jeu il y a une petite explication. Cette explication utilise le même personnage qu'après dans le jeu. L'astuce consiste à forcer l'altitude sur une constante durant la démo, puis à simuler l'appui sur les touches droite puis gauche puis droite puis haut. Pour une vitesse de chargement optimale de cette explication, les touches de clavier sont codées complètement en CSS, utilisant notamment un abus de la propriété border pour faire les triangles des flèches.

Voilà "tout" pour ce mini-jeu qui est très apprécié selon vos retours, et ça fait vraiment plaisir vu le temps passé dessus, c'est à dire entre 70 et 80 heures. 

Votre gravatar
Gravatar de Rami Rami
ဟ တ တယ အမ မၿင မ ရ ...ဓ လ ထ စ တ ရ ႕ လ မ မ မ က မ လ န လ တယ အ မ မ လည လ လ ဆယ တ အ ဒ WHY တ ပ ဆ ည နတ ပ ပ :) မ ဘန ႔ သ သမ ၾက က မ တတ ဆ မ တ က လ က ရ က ဖ ႔ မ ဘက ပ ၿပ ႀက စ ရမ ပ ပ အမ ရ႕... C'est la vie ပ ပ ... န န ၵ ...ဆ တ င အတ က က ဇ ပ ပ ဗ န က တခ ဂ န ဗ ရ က တ အခ အခ န ရရင Lausanne ဖက က ပ လ လည လ ဂ န ဗ ထက ပ လ တယ :)မခင ဥ မ ... က ဇ တင ပ တယ အမ ရ.. မ င မ ...က န တ ႔လည အမ နည တ နထ င ဖ ႔ သင ၾက သင ၾက ဖ ႔ နထ င ပ ပ စ လ ဖ ယ က င လ တ ဆ တ င လ အတ က က ဇ ပ ပ ဗ ဟ တ တယ က ဖ အ င ရ ...တခ တခ အမ နည တ ဝင ဆ ခ င ပမယ ဘ မ လ ႔ မ ရမ န တ င မသ တ အ ဖစ က အ တ ဆ တယ လ ႔ ပ ရမ ပ :) Stupid question ဆ တ မ႐ ဘ မ႐ င တ မ န သမ မ သ မ လ ႔ ဖ င ပ တ ဆရ မ န ႔ တ ႔ရင သ ပ မရ တ က င သ တ အတ က လည အဆင ပပ တယ
Répondre