Pour commencer nous avions eu un projet autour d'un site au design quelque peu futuriste bien avant le début des projets. Mais, le moment des projets arrivait et nous avons alors d'un commun accord, décidé de faire un site web "vitrine" autour de la NumWorks et du petit template alternatif d'Omega que nous avions réalisé grâce à l'aide immense de Le Gmask.
Dès le départ, nous avions en tête les pages qui composeraient ce site :
D'avance, nous savions que deux pages allaient nous poser le plus de problème par leur modularité, la page d'accueil et le marketplace. En effet, pour poser les bases réutilisées sur les autres pages, nous avons commencé par l'accueil, et, nous partions de 0.
Pour le marketplace, nous reviendrons plus en détail sur les difficulutés rencontrées et les solutions trouvées.
Ainsi pour notre projet nous avions trois conditions principales :
Mais ce n'est pas tout ! Nous avons décidé de tout mettre dans des boîtes (box) et de les gérer séparément pour chaque partie du site !
Tout le concept du site se base sur des boîtes flexibles, les fameuses flexbox. C'est-à-dire que chaque boîte est indépendante ; elle peut ainsi retourner à la ligne comme une grande ou encore retourner à la colonne suivante si la position choisie est la colonne.
Mais avant toute chose, il fallait définir une classe (donc globale) pour toutes ces petites boîtes. C'est bien joli d'en avoir plein, mais faut pouvoir les gérer en même temps !
Pour ce faire, rien de plus simple, il suffit d'ajouter la classe à chaque boîte. (N.B : Une boîte, comme nous allons l'appeler tout du long est le contenu entre les balises
Voici ce à quoi cela ressemblait :
Donc ici la classe est "case", elle peut être utilisée à plusieurs reprises contrairement à un id qui ne peut être utilisé qu'une seule fois.
Pour l'appeler par la suite dans notre fichier de style (CSS), là aussi rien de plus simple :
Une fois dans le CSS, on va définir nos caractéristiques pour avoir des flexbox.
Mais d'abord c'est quoi en fait ?
C'est tout simplement une modèle de disposition pour les box. On donne quelques caractéristiques comme le sens des box (inverse ou non), et l'organisation en colonne ou en ligne et après, on n'a plus besoin d'y toucher.
En fait le modèle de boîtes flexibles (flexbox donc) gère uniquement en "une dimension" les boîtes, contrairement à un tableau par exemple, ou l'on est obligé de gérer à la fois les lignes et les colonnes.
Après avoir défini que l'on gère nos boîtes en colonnes ou en lignes, et indiqué si l'on souhaite que les boîtes ne rentrant pas dans l'espace de la page passent à la ligne suivante (ou la colonne le cas échéant), le modèle de flexbox en tant que tel s'occupe de tout et on n'a plus besoin d'y toucher
Un site nous a beaucoup aidé pour nous expliquer les concepts de base des flexbox et les propriétés attenantes, il s'agit du site de Mozilla Developper sur les flexbox.
Mais c'est bien beau de connaître les concepts de base, mais concrètement, comment ça marche ?
Tout d'abord, il faut définir un conteneur (container pour nos amis insulaires), c'est-à-dire très schématiquement, une sorte de "grosse boîte" dans laquelle seront rangées les autres petites boîtes.
C'est donc sur ce conteneur que l'on va rajouter les propriétés des flexbox.
En effet, il faut l'ajouter sur le conteneur pour que toutes les box à l'intérieur soient en flexbox, sinon chacune risque avoir son propre mode de fonctionnement.
De retour dans le CSS :
Ici, la propriété obligatoire à mettre est
C'est tout simplement celle qui définit que les box à l'intérieur seront des flexbox, sans ça, tout les efforts sont vains (croyez-nous) !
Après ce n'est que des propriétés additives sur les flexbox que nous avons choisis pour notre site.
La valeur par défaut est nonwrap (reste sur une même ligne) mais pour le confort sur notre site nous avons décidé de mettre wrap, c'est-à-dire un retour à la ligne automatique des box.
Nous avons choisi space-between, ce qui signifie que l'espace entre les box sur une même ligne sera géré de façon "harmonieuse" ; c'est à dire que les box seront réparties automatiquement sur la ligne, tout en sachant que le premier est placé à l'extrême gauche et le dernier à l'extrême droite du conteneur.
Un des avantages indéniable des flexbox, est qu'avec quelques propriétés, elles s'adaptent automatiquement aux écrans, comme vous pouvez le voir sur les captures d'écran suivantes :
Sur cette image, l'écran est en 1440px/840px.
Sur cette image, l'écran est en 574px/763px
On peut ainsi constater que la deuxième box est passé à la ligne parce que la largeur d'écran disponible était trop étroite. Presque magique non ?!
Il ne restait ensuite plus qu'à définir le comportement global des flexbox c'est à dire le fait qu'elles aient les bords arrondis précisément ainsi que la marge et le padding. Pour chaque box particulière, à l'aide de l'id, on peut alors lui définir son style.
Les seules difficultés rencontrées sur ces flexbox furent de choisir l'espacement entre les box mais aussi de ne pas les mettre un trop gros contenu à l'intérieur, pour faciliter le rendu mobile.
Les @media sont presque quasi magique. La première fois que notre professeur nous en a parlé et que l'on a testé, on était émerveillé par l'utilité de cette règle qui est indispensable lorsqu'on veut penser à un site "responsive" (s'adaptant aux mobiles et ordinateurs).
Le fonctionnement est simple. On insère dans cette règle tout le CSS qu'on veut, à condition de dire soit une taille d'écran en px minimale, soit maximale, soit les deux.
Un exemple parle toujours mieux, voici donc notre utilisation "principale" des @medias. Ceux-ci sont utilisés pour changer le menu entre mobile et ordinateur :
Ainsi, ces deux simples lignes permettent de changer totalement le rendu en fonction de la taille d'écran. Ceci est très utile pour notre menu. En effet, comme vous pouvez le voir sur la capture d'écran, le menu affiché si la largeur d'écran est supérieure à 600px est ceci :
C'est un menu qu'on pourrait qualifier de "classique" ; un menu sur une ligne qui au fil de la navigation reste présent en haut de la page, avec la simple propriété position :
Mais, sur mobile, nous avions peur que cette barre qui reste en haut prenne une partie de l'écran déjà petit de nos appareils mobiles. Nous avons donc décidé de mettre un menu alternatif avec les même liens mais qui serait déroulant et uniquement présent en haut de page.
Pour ce faire, nous verrons l'utilité des boutons dans la section suivante. Il n'empêche que pour faire cet affichage magique grâce au @media, il fallait cacher certaines parties du menu, comme vous pourrez le voir ci-dessous et en comparant avec le menu "originel"
Si vous avez bien regardé, vous remarquerez que le logo du site a totalement disparu, pourtant il est toujours présent dans le HTML. Comment cela se fait-il ? C'est tout simple.
Après maintes recherches infructueuses, au détour d'un essai, nous sommes tombé sur cette méthode qui va vous sembler et nous semble aujourd'hui simple, logique et évidente à mettre en place.
Qu'est-ce donc, de la magie noire ? Absolument pas, pour éléments que l'on veut cacher, en fonction de la taille d'écran, il suffit juste de leur ajouter cette propriété :
C'est simple, efficace et facile à mettre en place !
Passons maintenant au cœur du marketplace et du menu déroulant pour téléphone, comment cela fonctionne ?
Tout d'abord avant de vous expliquer le fonctionnement du CSS et nos essais vains, essayons de comprendre comment cela marche sur la page directement.
Si vous cliquez sur chaque (flex)box qui représente une app, alors les informations et la photo de l'app apparaîtront.
Après le clic, on a donc ce rendu :
(Vous remarquerez ainsi le positionnement des flexbox, qui se réalise exactement comme indiqué par le justify-content, plus haut)
Ainsi, si l'on reclique sur la petite flexbox de l'app, la grande box se referme !
Maintenant, pour comprendre, il faut mettre les mains dans le cambouis.
Nous étions déjà partis avec un boulet accroché au pied, vouloir cacher du texte puis l'ouvrir au clic alors qu'il n'est même pas au même endroit, quel bazar à faire sans JS !
Au début, nous pensions que les pseudos-classes CSS feraient l'affaire, et surtout :active.
Mais nous n'avions pas prêté attention au fait que :active ne marche que quand on clique, dès qu'on lâche la pression, tout ce qui se passait disparaissait. C'est lors du test que malheur cela ne marchait pas !
En plus cette méthode se rapprochait plus du bricolage qu'autre chose ; en effet, pour découvrir le texte caché, il fallait qu'il soit dans la boîte et pour déclencher son apparition il fallait faire cette méthode pas très très nette on va dire :
Comme vous avez pu l'imaginer cette méthode pas très recommandable mais qui avait l'avantage (relatif) de "plutôt" fonctionner n'a pas été choisie pour la suite.
C'est au détour d'un voyage sur le monde magique (parfois) de **L'INTERNET**, que nous sommes tombés sur une page Mozilla Developper sur les boutons checkbox, puis avec des recherches complémentaires, nous sommes tombé sur la pseudo-classe :checked qui va avec ces boutons.
Ce sauveur tant inespéré qui venait à nous comme ça, à un moment où l'on envisageait de mettre une page par app avait même un exemple !
Nous avons alors deux options qui s'offraient à nous, copier bêtement ces lignes et les intégrer à notre site ou alors réaliser la technique escargot aussi nommée pas à pas.
Nous avons bien évidemment opté pour cette deuxième technique, prenant au départ le fichier HTML et CSS d'exemple, puis en testant, en retirant telle ligne, ou une autre, en la remmettant, etc..., jusqu'à arriver à l'essence même des checbox et :checked dont nous avions besoin pour notre site.
Cette essence rare, d'une valeur immense pour nous, n'avait ensuite plus qu'à être intégrée avec précision dans notre page, comme cela suit avec un exemple issu de la marketplace, d'abord du côté HTML :
On a ainsi notre box principale qui a la classe case, c'est elle qui ne sera jamais cachée. On intègre les balises label pour le contenu de la box.
(Pourquoi ne pas intégrer toute la div (la box) dans la balise label ? La réponse est simple, car sinon, nous perdions l'effet flexbox des box.)
Ces balises permettent de lier la box à l'input. En effet c'est une checkbox, check c'est l'input, et il est lié à une box.
Donc comme vous le voyez, le label est lié à l'input à l'aide du "for" (on donne l'id de l'input)
Après on n'a plus qu'a créé la box qui sera cachée jusqu'au clic en lui donnant un id (et facultativement une classe si on veut en avoir plusieurs avec certaines caractéristiques identiques.
On voyage maitenant vers le CSS :
Pas de panique, sur le moment ça peut faire peur, mais rien de grave !
Au début, on cache la box qu'on ne veut pas voir avec un petit "display: none".
Puis, on passe sur les :checked". Pour ce faire le CSS ci-dessus dit littéralement : "Quand l'input d'id "inputsolar" est "checked" (ce qu'on pourrait qualifier ici de cliqué), alors mettre en "display: block" le contenu caché d'id hiddensolar (l'afficher en fait).
Le plus signifie tout simplement que les deux sont importants et que l'un n'est pas contenu dans l'aute (ce qu'on signifierait avec un simple espace)
Une fois cela fait, ça marche parfaitement !! Il ne reste plus qu'à mettre un peu de design à ces boîtes.
Et c'est donc aussi cela que nous avons réutilisé pour le menu déroulant pour mobile. Une fois fait pour une box, c'était simple de le reproduire, et super pratique !
Vous avez du le remarquer, en arrivant sur l'accueil une magnifique animation de la NumWorks est présente, réalisée par nos soins.
Elle a été réalisé avec amour et c'est en fait un MP4 ; rien de magique !
Mais pour le faire fonctionner par contre, c'est une autre paire de manches
En effet, depuis 2018, Google Chrome (les autres ont suivi) bloque par défaut la lecture de vidéo automatique.
Pour pouvoir lire la vidéo automatiquement quand les visiteurs arrivent sur le site, il a donc fallu rajouter des caractéristiques à notre balise vidéo comme cela suit :
Ainsi, si la vidéo n'a pas de son et qu'on demande qu'elle soit jouée automatiquement, alors, elle sera jouée automatiquement sur tous les navigateurs ordinateurs assez récents et Android. Mais nous n'avons malheureusement pas compris, ni trouvé pourquoi la vidéo n'étais pas jouée automatiquement sur iOS, alors qu'elle avait les mêmes caractéristiques.
Pour conclure, on peut clairement vous dire que c'était beaucoup trop facile, mais on mentirait !
Ça a été un réel casse tête de trouver l'idée, penser au design, le réaliser, contourner les problèmes, ... Mais pourtant ce projet fut très plaisant et enrichissant.
On voulait surtout que notre site soit beau, c'est alors qu'on s'est malheureusement trop concentré sur le css et non le comptenu.
On ne voulait pas non plus avoir des problèmes avec la images et l'animation, dans ce cas, pourquoi ne pas les faire nous même ! Toutes les images sont donc soit créées par nous, ou sont libre de droit du site Unsplash
Comme nous y avons passé beaucoup de temps, il y a de nombreuses anecdotes, comme par exemple la différence de rendu entre différents supports, la marge magique des navigateurs de 8px, les téléphones du diable où la vidéo de la page d'accueil ne veut pas lancer.
Un autre problème incompréhensible a été les @media qui voulaient faire leur travail comme si l'écran faisait moins de 600px. Par exemple, sur téléphone il s’exécutait, pourtant on sait bien qu'un écran de téléphone fait bien plus de 600 pixels.
Une fois tout ces problèmes analysés, corrigés, réglés avec la magie du css, voici ce que nous avions réussi à faire.
Nous souhaiterions remercier les nombreuses personnes sans qui rien de tout cela n'aurait pu être possible
Chloé et L'Apothicaire, sans qui le site n'aurait tout simplement pas pu être aussi beau que ce que vous voyez maintenant
Nos familles pour leur aide quotidienne
Nos professeurs pour nous avoir accompagné et aidé tout le long de notre parcours semé d'embûches