Compte rendu
Bien, vous vous trouvez enfin sur le compte rendu, bientôt, après un nombre certain d'heures de lecture, vous connaîtrez enfin la réponse à la Vie, l'Univers et tout le Reste, ou presque...
Bref revenons à nos moutons, à nos papillons ; le site en lui-même en fait.
Le brainstorming (ou ce qui s'en rapproche)
Avant de commencer ce magnifique site, il fallait déjà savoir son thème et trouver le template nécessaire. Ayant réalisé par le passé des productions d'un style magnifique (plus beau même que le fruit issu de l'espèce Malus), d'un bon goût qui va sans dire, et d'une qualité de la production en elle-même, nous nous sommes évidemment dirigé vers cette piste tête la première.
Nous étions désormais une entreprise qui vendait des produits techs (et + ou - geeks) qualitatifs (on a vraisemblablement une addiction pour la vente de produit mais on ne dira rien ...
Une fois l'idée fixée (de façon véhémente nonobstant), il ne manquait plus qu'un template pour partir dessus. Problème, un de nous deux (très agaçant, vous devinerez lequel 😆) souhaitait prendre un template pour tout supprimer, bref, une idiotie.
Après de longue négociations nous avons trouvé le template qu'il nous fallait, Photon. Il allie beaucoup d'avantages ; simple (en apparence), élégant, facilement modulable et retouchable pour notre envie de site de commerce.
La grande aventure part donc d'ici, avec une condition, que la page principale soit plutôt foncée pour plus de confort
Avoir réalisé un autre projet sur un site avant en collaboration nous a permis de connaître nos compétences et appétences, mais aussi de savoir que dès le début du projet, il faut faire un schéma du site pour ne pas s'éparpiller et avoir une ligne directrice. C'est ce que nous avons fait.
Lors de cette réflexion primaire, nous avons fixé le nombre de page à 3, car (3 + 1)*10 + (3 - 1) = 42.
Il y a ainsi une page principale où l'on présente l'entreprise et ce qu'elle propose, puis deux autres pages, Paradis et Enfer, qui réprésentent les deux possibilités de l'utilité des produits de l'entreprise.
Une animation d'accueil particulière et surprenante
Pour accueillir nos utilisateurs à leur arrivée, nous voulions un accueil classe élégant, avec le menu du template bien-sûr mais aussi distrayant et qui en un seul coup résumerait un univers technologique avec des petits clins d'œil. (Les verrez-vous sur la page ?)
Après diverses recherche sur l'excellent site CodePen.io, notre coût de cœur a été pour une animation avec une télévision avec une NES et une affiche.
Cette page d'animation était composé d'HTML, de CSS et bien évidemment de JavaScript (JS).
On a donc choisi de l'intégrer directement dans le header de notre accueil, mais, bien évidemment les choses n'ont pas été aussi facile qu'attendu (quoique quand-même).
Pour des questions de confort, on a choisi de mettre le dasagn (le "style" pour les non-initiés) de la page, donc le CSS, dans 2 fichiers distinct ; 1 pour la page en elle même, et l'autre pour l'animation
Il faut savoir qu'en HTML pour importer des fichiers CSS, deux méthodes sont possible, on a préféré le "link" mais sachez que cela ne change rien du tout.
Ce qui fait donc ça :
Mais, il faut savoir qu'importer l'animation en premier cassait tout ! Car certains éléments de l'animation viennent en conflit avec des éléments du site "normal", ce qui n'est pas extrêmement bon
Encore, il y a eu plus pire ; l'animation ayant été faite à part du site (et n'étant au départ pas faite pour y être mise), certains éléments étaient globaux, c'est à dire que leur usage impactait le site dans sa globalité.
Voici un exemple très simple d'une règle globale en CSS :
Or, si cela était valable pour notre petite animation bien mignonne, en aucun cas nous ne voulions voir cette tâche sur notre site général.
Pendant des heures qui nous ont parues aussi longues que ce qu'il y avait avant le Big Bang, il fallait à chaque fois enlever ce qu'on pouvait de global, et le reste, soit le déplacer, soit changer le terme global par un identifiant ou une classe qu'il fallait créer.
Une fois cela fait, l'animation était à peu près fonctionnelle, sauf l'affiche qui était mal placée et pas adaptative en fonction des tailles d'écran
Il a donc fallu chercher l'id wall-bg responsable de l'affiche et modifier la taille en la rendant un peu plus adaptative que des tailles en pixels trop figées.
Longtemps après cela, nous nous sommes rappelés que nous n'avions pas mis le script JS qui était inclu avec cette animation. Mais en regardant sur CodePen.io, nous avons compris pourquoi cela ne nous avait pas choqué ; le script n'était tout simplement pas utilisé sur le CodePen !
Nous l'avons donc rajouté et activé et magie, une animation et quelque chose en plus !
Les petits logos de la page d'accueil n'ont pas étaient les plus simples... Quand on a vu ça, on pensait à de simples images où il suffit de changer le lien. Mais non. Ce sont des fichiers SVG. C'est-à-dire pas des images, mais des pixels situés à des endroits précis (bref une galère). Nous sommes donc passé par le site qui héberge ces fichiers, tous fiers, on en choisit, mais évidemment, ils étaient payants. Mais quand on veut prendre les gratuits, le CSS du site ne fonctionnait plus... Résultat en plus d'essayer de comprendre comment ces fichiers marchent (appel du fichier sur notre page HTML au site qui l'héberge), il fallait imaginer le CSS de l'hébergeur (tout autant une galère).
Un carrousel qui nous a fait tourner
Nous voulions un carrousel. Pour la pure raison que nous trouvions cela plus élégant pour présenter tous nos produits.
Après en avoir trouvé un très élégant encore une fois sur CodePen.io, nous l'avons simplement intégré tel quel à notre site. Tout se passait pour l'instant dans le meilleur des mondes, mais, nous n'allions pas tarder à atteindre les rives du Styx.
Tout d'abord dans un premier temps nous avons dans le JS du carrousel, arrêté le défilement, que l'on trouvait trop rapide et inutile.
Pour cela, étrangement, rien de plus simple ! Il nous a suffit de faire un CTRL-F dans le fichier carrousel.js (où se trouvait l'animation), en rentrant comme valeur à rechercher, "interval"; et le travail était joué !
Mais une fois cela fait notre carrousel manquait cruellement de sens et de praticité ; en effet on ne pouvait plus se rendre sur une page (que nous appelerons box par la suite pour des raisons pratique (c'est leur nom en CSS)) du carrousel, à moins de devoir parcourir toutes les autres, ce qui était loin d'être un semblant intuitif.
Nous nous sommes alors enfoncés dans les profondeurs de ce Tartare des temps modernes, pour pallier à ce problème et pouvoir se rendre exactement à une box donnée.
Malgré son faible nombre de lignes, cette animation était fortement complexe. Pour des raisons de compréhension, on va éviter de tout vous expliquer (à part si vous avez des heures devant vous), mais sachez que nous avons découvert 2 variables qui régissent tout : value et trailValue. La variable value représente grosso-modo le numéro de la box qui est présente actuellement et trailValue qui dit de combien augmenter (sur une sorte de ratio) pour changer de box.
Après nous être rendus compte que ces deux variables étaient globales et pouvaient être interrogées hors de l'animation, après de très longues recherches, nous avons découvert une fonction magique :
Et inclu avec cette fonction, se trouvaient deux arguments : "increase" et "decrease" (augmenter et diminuer dans la langue de Shakespeare sauf qu'en fait c'était pas lui mais un autre qui a pris son nom).
Cela rendait donc ça :
Et... magie ! En appelant cette fonction associée à son argument depuis la console sur un navigateur Web, le carrousel passait à la box suivante ou précédente ! Enfin, la clé était là !!
Il ne manquait "plus qu'à" créer une fonction interrogeant la value et utilisant cette fonction.
Après une réflexion poussée sur la manière dont la valeur à aller serait fournie à la fonction, nous sommes partis sur un élément très simple, partir d'un nombre représentant le numéro de la box à aller, c'était la méthode la plus fonctionnelle et la moins casse-tête. Il ne reste alors plus qu'à calculer la différence entre la box actuelle et celle ou on veut aller.
Si cette différence est négative, on fait le nombre de "decrease" conséquent et vice-versa si c'est positif.
Malgré quelques vieilles habitudes Pythonesques, nous avons réussi à le faire fonctionner dans la console. Voici d'ailleurs le code JS, vous verrez qu'il ne semble pas complexe en apparence, mais il fait référence à des "outillages" externes.
Cette fonction est loin d'être optimale mais elle fonctionne. Comme vous pouvez le voir deux parties sont présentes, la première si la différence est négative, et la deuxième si la différence est positive. Il ne reste plus qu'à faire le nombre d'"increase" ou de "decrease" suffisant. Pour plus de sécurité, nous avons opté pour un while (i != difference) avec i diminuant ou augmentant jusqu'à atteindre la différence. On a juste a faire à chaque fois un slide("increase") ou slide("decrease") et le tour est joué !
Ne reste alors plus qu'à l'utiliser dans le menu pour ce faire rien de plus simple mais le rendu est impressionnant de fluidité.
En effet, sur le menu principal il suffit de rajouter un attribut onclick à la balise HTML comme cela est présenté :
Décomposons cette ligne qui peut être complexe. Dans un premier temps, on met comme lien l'identifiant "three", qui correspond à la zone où se trouve notre fameux carrousel. Les classes sont ensuite pour le style, on n'y reviendra pas. L'attribut onclick quand a lui va exécuter le code JS qu'il a lorsque l'on cliquera sur ce bouton. Donc pendant que le site affichera le carrousel, il ira tout seul comme un grand jusqu'à la bonne valeur du produit tendance aujourd'hui.
Youpi le carrousel marchait enfin ! Le labeur était enfin fini, pour un rendu peu visible pour l'utilisateur. Et bien non, on n'était en fait pas sortis du sable.
Le carrousel originel était composé de 5 box, bien. Mais le problème c'est qu'on a 8 produits, on a donc besoin de 8 box. Nous avons donc supposé qu'il fallait simplement rajouter le nombre de "div box" suffisantes pour y arriver. Ce fut une grossière erreur. En effet au fur et à mesure qu'on changeait de box tout le contenu se décallait et on voyait au fur et à mesure de plus en plus de la box suivante.
Notre première hypothèse a été de changer la width totale du carrousel, située dans la classe slide. Au départ voici comme cela était :
5 box, 500%, ça colle, donc pour 8 box nous avons supposé qu'il fallait mettre 800%. Ça a réglé une parite des problèmes mais ça debordait encore.
Après avoir testé dans tout le CSS du carrousel sans aucun effet nous nous sommes résolus en dernier ressort à nous rendre dans la partie JS.
Après de longues et ténébreuses recherches, là clé était là, le fameux ratio étrange de la variable value. L'augmentation de value était de 20 en 20 pour 5 box, jusqu'à arriver à 100%, pour 8 box il fallait donc changer pour le mettre à 12.5 %. Voilà cela marchait enfin parfaitement ; ouf !!
Plus qu'à rajouter des images faites maisons à la place des "cartes". On commence sereinement à mettre l'image à son emplacement lorsqu'on se rend compte que l'image se situe derrière tous les filtres.
L'image a donc la couleur du filtre des cartes ! Non merci :) Alors dans le CSS, on a commencé par retirer les cartes secondaires. Enfin, l'image était aussi inclinée à 10 degrés comme le "fond". Il a juste fallu ajouter une inclinaison de 10 degrés inverse sur l'image pour qu'elle soit droite (avec un petit margin-top pour que ce soit parfait).
Un second carrousel qui nous a fait tourner une seconde fois
Une fois le premier carrousel terminé, il fallait s'attaquer aux autres pages. C'est-à-dire celle du Paradis et de l'Enfer. Dans lesquelles nous voulions encore plus de carrousels.
Mais évidemment, pourquoi prendre le même carrousel totalement débogué quand on peut se prendre la tête avec un nouveau ?! Nous avons trouvé magnifique celui la(en plus dans le thème de Star Wars), on l'a vu, on le voulait de suite.
Il a fallu encore comprendre comment il fonctionnait, enlever ce que nous ne voulons pas, ajouter ce qu'on attendait.
Dans un premier temps, nous voulions que le carrousel fasse une boucle (ce qui n'est pas le cas sur l'original). Heureusement à la 5e ligne du JavaScript, on sélectionne si on veut une loop (=boucle en anglais) à l'aide de True ou False.
Donc ça déjà, c'est fait. Si seulement c'était aussi simple pour tout le reste...
Quand on veut modifier le pourcentage du cercle du "TAUX DE DURABILITÉ", il faut d'abord trouver où il se cache. Une fois trouvée, la meilleure logique serait que cela soit défini sur 100. Mais non, c'est sur 300. (pratique pour le trouver dans les 1000 lignes de HTML et 5000 de CSS).
Après un magnifique produit en croix de 4ème, ça y est ! On a notre taux de durabilité.
ON Y EST !!
Après toutes ces péripécies et quelques beaucoup
d'heures de travail, nous avons fini notre site. Tout beau, tout neuf,
presque dix.