Codage. Cursus

Étape 6 - Élaboration du "Qui est en ligne?"




Le Qui Est En Ligne, ou QEEL, est la partie qui vient clore avec votre Footer, votre forum. Malheureusement, elle fait partie des parties les plus négligées avec l’affichage des sujets et des messages … C’est dommage parce que ces choses négligées laissent un arrière-goût de travail bâclé et donc pas terminé dans l'esprit du visiteur. Au final, il sera peut-être beaucoup moins motivé pour rejoindre le forum. Vous l’aurez donc compris, le QEEL et son cousin le Footer sont à l’honneur.


Auteur : Taktiik



Création du titre QEEL



Tout d’abord, nous allons créer notre titre QEEL. Ce sera une image de ce type :


• Ouvrez Photoshop et créez un nouveau document de dimensions 948*127. (Largeur * Longueur)
• A l’aide du pot de peinture, remplissez le document de la couleur #17344f et supprimez la moitié du document (En hauteur).


• Créez une typographie « QUI EST EN LIGNE ? » – J’ai pris Blue Highway – et placez la au centre de la barre : Taille de police : 52px, couleur : #224c74.
Appliquez lui une ombre portée : Opacité 44%, Angle 90°, Distance : 2px, Grossi : 0%, Taille : 1px.

• Créez une nouvelle typographie « sur le forum » – J’ai pris Exmouth – et placez la en-dessous du mot « LIGNE » : Taille de police : 36px, couleur : #4574a2.
Appliquez lui une ombre portée : Opacité 44%, Angle 90°, Distance : 2px, Grossi : 0%, Taille : 1px.

• Fusionnez les calques (CTRL+MAJ+E) et enregistrez le document en .PNG


Analyse du template



Tout d’abord, Où se trouve-t-il ce petit QEEL ?
Et bien il est dans le Template nommé Index_Body, vous savez celui qui modifie l’apparence de la Page Accueil, de l’emplacement de votre Chatbox … Des éléments essentiels Wink !

Commençons par une compréhension large du Template :


Le Template commence par un tableau tout mignon qui est votre PA.

Il est délimité en deux parties :


Partie qui va gérer l’affichage du titre de votre Page Accueil

Et :


Partie qui va gérer l’affichage du contenu de la Page Accueil.

C’est pourquoi si vous voulez modifier l’affichage du cadre des catégories, il suffit de modifier la class="" du premier et de la modifier dans le CSS, Facile non ?


Voilà un gros pavé de lignes pour gérer la connexion (Comme quoi, on peut croire que c’est du chinois mais le commentaire HTML l’annonce clairement Razz (User_Login) Gros pavé suivi de deux lignes intéressantes :


Ceci gère l’affichage de la Chatbox lorsqu’elle est affichée en haut, c'est-à-dire qu’on peut prendre cette ligne et la mettre en bas, elle s’affichera en bas, mais c’est plutôt inutile, il y a son homonyme plus loin.



Ceci annonce l’affichage des catégories ! Ceci implique deux choses : La mobilité de chaque élément dans le Template (La PA peut devenir le QEEL et inversement) mais aussi le mélange de plusieurs éléments, comme actuellement sur Never Utopia où le QEEL est directement mélangé à la Page Accueil.


Comme dans les categories, ce sont les petits liens qui suivent vos catégories « Supprimer les cookies du forum » etc…


On retrouve notre pave. Hé oui, après la connexion en haut, elle vient en bas si on l’a coché dans les options !


La partie qui va nous intéresser puisqu’elle gère l’affichage du QEEL ! On la laisse de coté pour l’approfondissement pour plus tard !


Enfin, c’est ce qui affiche vos trois icones de catégories tout en bas de votre forum. Je vous conseille de les supprimer –Pour ma part, c’est déjà fait - C’est une petite tâche d’esthétisme assez inutile au vue des images que nous avons puisqu’elle indique l’état du forum.

Modification du QEEL



• Procédons enfin à la modification du QEEL. Nous allons l’organiser en trois colonnes séparées, ce seront trois blocs juxtaposés. Ciblons la partie que nous allons traiter :


Pour commencer, nous allons supprimer la partie qui concerne la Chatbox.
Supprimez donc cette partie :


Maintenant, nous allons reprendre ces lignes :


Pour les reporter juste après le commentaire HTML qui ouvre le QEEL. Nous allons créer le titre du qeel via une div.
Il sera donc nécessaire de supprimer les lignes précédemment citées.


Etat du Template :


• Maintenant, nous allons créer une div qui contiendra le tableau du QEEL. Ainsi, juste avant le début du table créez une div du nom de « Qeel ». Fermez-la juste après que le tableau soit clos. Ensuite, supprimez tous les attributs - Ils ont la forme de :Nomattribut="" - et ne gardez que la class="forumline". Remplacez forumline par « QeelTable».


• Validez le Template et passez dans le Feuille de Style. Juste avant nous avons crée 3 div : « QeelIMG », « Qeel » et « QeelTable ». Nous allons les ajouter dans la partie qui est prévue pour le QEEL :


• Nous allons à donner « QeelIMG » pour fond le titre que nous avons crée au début et le positionner en bas au centre.Il prendra pour dimensions celle du fond et sera centré.


• Maintenant, pour « Qeel », on lui donne une position relative, c'est-à-dire qu’il deviendra plus important. On évitera l’affichage de la bordure du Footer qui ne va servir que dans toutes les autres pages. Le Qeel aura pour couleur de fond : #17344f, une bordure en bas de 1px de couleur #17344f. Ses dimensions sont 948*330 et aura une marge extérieure en bas négative [-28px] ; C'est-à-dire qu’au lieu de se décaler vers le haut, il se rapprochera du bas.

EXERCICE :
• "Qeel" va prendre les propriétés et valeurs suivantes :
- Une position relative (Position primordiale sur les autres éléments)
- Une fond de couleur #17344f
- Une bordure sur le bas de 1px, solide de couleur #17344f
- Ayant pour dimensions 948*330
- Une marge extérieure en bas de -28px

• "QeelTable" va prendre les propriétés et valeurs suivantes :
- Une largeur de 848px
- Une centrement automatique (margin : auto)



Validez le CSS et retournez dans le Template !


• Nous allons commencer à nouveau par supprimer la partie qui gère l’affichage de l’image QEEL que l’on ajoute dans la gestion d’image.


• Maintenant, on va retirer tous les attributs des cellules (td) et leur ajouter valign="top" qui placera leur contenu dans le haut de la cellule. Ca donne :


• On ajoute maintenant dans chaque cellule (td) une div nommée « Row » ou « colonne » en français qui commencera juste après l’ouverture de la cellule et se terminera juste avant sa fermeture. On supprime également toutes les lignes (tr) excepté la première et la dernière :


• A présent, on va ajouter une div qui va contenir les statistiques du forum [Messages et Membres]. Elle viendra dans la première cellule où ils sont déjà présents.


Bien entendu, supprimez les éléments ajoutés dans cette cellule de la cellule où ils étaient présents avant.

• Maintenant, on va déplacer


L’entourer d’un tableau(table) pour qu’il soit affiché correctement puisqu’il génère automatiquement un ligne et une cellule de tableau.


Enfin, on va déplacer :


Qui gère l’affichage des anniversaires dans la journée puis dans la semaine. Nous allons également les entourer d’un tableau (table) car ils ont la même propriété que la liste des membres connectés depuis 24heures [L_CONNECTED_MEMBERS].


• Maintenant, en-dessous de la liste des connectés dans les dernières 24h, nous allons ajouter les groupes du forum. Ajoutez une liste de lien après avoir sauté une ligne avec :



Il faudra sauter une ligne tous les deux groupes. On va les centrer grâce à center et on va ajouter pour chaque lien une class (gr1, gr2, gr3, gr4 etc.).


• Direction votre feuille de style CSS à présent. Nous avons créé les class : « QeelRow », « QeelStats » et « gr1, gr2, gr3, gr4, gr5, gr6 ». Nous allons donc les mettre en forme :


Pourquoi avoir fais ceci ?


Parce qu’ils auront tous des propriétés en communs et la virgule viendra dire « gr1 et gr2 et gr3 et etc. ». La seule différence sera leur couleur, d’où la reprise de leur classe en solo. Nous allons commencer par mettre en forme les colonnes.

•Jusqu’à maintenant, j’ai fais que vous dire ce que vous deviez faire en vous donnant directement la réponse. Désormais, je vous mettrai la réponse en spoiler pour pouvoir vous faire progresser !

EXERCICE :
• « QeelRow » va prendre les propriétés et valeurs suivantes
- Une barre de défilement
- Une position « absolute » : Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix en la faisant bouger grâce à des margin.
- Un « z-index » de valeur 1 : « Eh bien, le z-index associé à des positions comme "absolute", "fixed" et "relative", permet de définir quel bloc aura la priorité d'affichage sur l'autre lors d'un chevauchement. » Source : Scavenger
- Un fond de couleur #010f16
- Une bordure de 1px solid #095279
- Des dimensions (280*300)
- Une police d’écriture de 9px
- Un marge extérieure de 15px sur le haut



Je pense que les commentaires sont inutiles ici. Pensez à consulter les articles sur le codage et le graphisme dans les mag's ils apprennent énormément de choses sans qu'on s'en rende compte, le côté pédagogique de la chose est vraiment bien fait !


• Si vous n’avez eu aucune faute, félicitations, vous progressez de plus en plus et serez bientôt incollable en CSS ! A présent, nous allons ajouter à notre colonne une propriété de transparence, appelée « opacity ». Elle se décline en plusieurs suffixes suggérés par sa comptabilité. Votre « QeelRow » devient:


Vous l'aurez remarqué, il existe plusieurs suffixes, comme pour box-shadow et border-radius. Certains préfèrent mettre les suffixes compatibles avec Chrome et Firefox, pour ma part je les met tous comme ça, pas de jaloux :


Veillez à ce que la propriétécss3 sans suffixe soit en dernière Wink !

• Passons à la personnalisation des statistiques. Nous allons ajouter à « QeelStats » une police de taille 11px, un texte en gras et un alignement centré.


• Enfin les groupes. La « super-balise » contenant tous les groupes prendra une police de taille 15px, un texte en gras, un alignement centré, des lettres capitales et une marge extérieure à gauche et à droite de 10px.


Maintenant, donnez la couleur à chacun de vos groupes, pour ma part ça donne ça :


Je fais un gros bisou à ceux qui ont pensé à mettre le « !important ». En effet, ce sont des class données à des liens donc pour que la couleur devienne prioritaire, il faut rajouter le !important :)


Maintenant, il temps de faire un petit check-up. On a un beau QEEL mais pas encore optimisé ! Et oui, imaginons qu’il y ait eu 230membres connectés durant les 24h, on ne verra plus les groupes … Même si le overflow : auto donnera une barre de défilement, autant éviter de le faire et avoir toujours un œil sur les groupes. Nous ajouterons donc une boite autour de ce qui gère l’affichage des membres connectés durant les 24h dernières heures. Ensuite, il sera temps d’ajouter un peu d’interaction Forum/Utilisateur, on jouera donc avec les transitions !

• Dans votre Template, vous avez :


On va l’entourer d’une div que l’on va appeler « QeelConnected » et à laquelle on donnera des dimensions et une barre de défilement de telle façon que la barre de défilement de la colonne ne s’affiche pas.


Le problème est réglé et vous pouvez valider votre template, passons maintenant à l’interaction. Je proposerai d’ajouter un effet de zoom sur la colonne lorsqu’elle est survolée par la souris, sympa non ? Ceci implique deux choses : - Modifier les valeurs des z-index pour que les priorités d’affichage changent et que la colonne survolée soit prioritaires. - Modifier les valeurs des dimensions de la boite des connectés dans les 24h dernières heures lorsque la colonne et survolée.


• Ajoutons d’abord les transitions à « QeelRow »


Maintenant, grâce au suffixe :hover, ajoutons l’effet de zoom en augmentant ses dimensions :


Cependant, nous devons à la fois modifier sa priorité d’affichage et sa position. Nous allons passer le z-index à 99 et enlever une marge extérieure à gauche et en haut de 50px : Margin-left : -50px ; margin-top : -50px


N’oublions pas de donner les valeurs que nous voulions donner à « QeelConnected » que nous avons créé et de lui en donner de nouvelles lors du survolement :


Ooops, je vais un peu vite non ? héhé désolé !
.QeelRow:hover .QeelConnected peut se traduire par « Lorsque la colonne est survolée, l’élément qu’elle contient et qui s’appelle QeelConnected se transforme en … ». Ceci ne marche que dans le cas ou l’élément que vous voulez changé est contenu dans un autre ! Dans d’autre cas, ça ne marche pas : / On peut parler de la réciprocité mathématique qui marche très bien dans ce cas avec le « Si et Seulement Si »


Ils est super notre QEEL non ?
Et bien voilà, vous avez terminé la confection de votre Qui Est En Ligne et votre forum avance à grand pas !


Précédent Suivant