Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
Cartes Pokémon : où et quand vont sortir ...
Voir le deal
Le Deal du moment : -30%
-30% Lego Classic – La valisette de construction ...
Voir le deal
10.49 €

Aller en bas
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Atelier #5 - Étudier les bases en créant une simple fiche

État des lieux


Objectif : Travailler sur les bases du codage orienté Forumactif avec la réalisation étape par étape d'une fiche simple.
Base de travail : Une maquette proposée par Lumecyow
Spoiler:
Demande : voir la demande de Lumecyow & voir la demande de Lili Rose

Edit : Suite à son absence imprévue, Lili Rose ne participera pas à l'atelier.

Pour commencer



Les notions utiles


▶ Puisque l'essentiel de vos connaissances en codage reposent sur la fréquentation des LS, on va commencer par faire un peu le point sur les bases nécessaires. Direction donc le tutoriel d'introduction au codage pour commencer. Notez bien également le vocabulaire utilisé, vous devez au minimum comprendre ce qu'est un attribut HTML (en particulier les attributs style et class), ce qu'est une propriété CSS, et ce qu'est une classe CSS. Comprendre la différence entre les balises <div> et <span> vous sera également utile.

▶ Vous allez avoir besoin de plusieurs propriétés CSS pour cette fiche. Même si vous connaissez probablement l'essentiel des propriétés classiques, je vous en fais la liste :
- color ;
- font-family ;
- font-size ;
- background-color ;
- text-align ;
- margin ;
- padding ;
- width ;
- height et/ou min-height ;
- overflow potentiellement.
A vous de vous aider soit de ce tutoriel ou bien de la Référence CSS du MDN pour étudier l'utilité de chacune de ces propriétés, ainsi que les valeurs qu'elles peuvent prendre.

▶ Côté HTML, pour le moment on va partir du principe que vous codez pour des fiches postées sur Forumactif, ce qui est légèrement différent du "bon" HTML. On approfondira plus tard dans le cours pour faire un code plus respectueux des standards, pour le moment vous pourrez vous contenter des balises <div> et <span>, ainsi que de l'attribut style.
Si vous vous sentez le courage, vous pouvez explorer du côté de l'attribut class et de la balise <style>, mais on pourra séparer le style CSS du HTML plus tard (inutile de vous embrouiller trop vite, faites les choses à votre rythme).
En parlant d'embrouiller, si l'envie vous démange d'écrire <center> dans votre futur code, arrêtez ça tout de suite, cette balise est obsolète depuis plus de vingt ans et ne doit plus être utilisée.

La nuance entre "coder dans un message" et "coder une page HTML"


J'ai dit plus haut que coder des fiches postées sur FA, c'est différent du "bon" HTML. Je vais détailler un peu, même si c'est peut-être un peu compliqué, accrochez vous ! Ordi

Quand vous postez un message sur Forumactif, le texte (et le BBcode) que vous envoyez à Forumactif est "décodé/recodé" par Forumactif pour son affichage dans un sujet. Par exemple, si vous écrivez quelque chose comme [b]Un texte[/b], Forumactif va le traduire par <strong>Un texte</strong> pour l'affichage final du message (oui parce que votre navigateur il n'y comprend rien au BBCode, c'est juste un language spécifique aux forums XD).

Du coup, lorsque vous codez une fiche, vous pouvez parfaitement utiliser du BBCode et du HTML sans que ça plante. C'est utile pour essayer de faire un code aussi simple que possible à utiliser pour les débutants. Par exemple, c'est beaucoup plus simple d'écrire [img]http://via.placeholder.com/250x150.png[/img] que :
Code:
<img src="http://via.placeholder.com/250x150.png" alt="Description de l'image">

Mais cet aspect pratique du code dans les messages va créer deux problèmes.

Le premier problème, c'est que vous devez apprendre à faire la différence entre le BBCode (qui marche dans les messages/descriptions du forum) et le HTML (qui marchera partout où le HTML est accepté). Certains codeurs n'aiment pas mélanger HTML et BBCode dans une fiche pour éviter aux gens d'avoir de mauvaises habitudes, j'ai tendance à être un peu plus ouverte à cette pratique tant qu'elle est destinée à rendre un code plus lisible pour les débutants.

Le deuxième problème, et c'est le plus compliqué à intégrer pour les débutants (et même pour les codeurs plus confirmés XD), c'est que quand vous sautez une ligne dans un message, Forumactif va automatiquement remplacer ce saut de ligne par la balise <br> à l'affichage.

Du coup, vous, vous voyez ça :
Code:
Un message sur Forumactif.

Avec un saut de ligne entre la première et la deuxième ligne.

Mais le navigateur, lui, il reçoit ça :
Code:
Un message sur Forumactif.<br><br>Avec un saut de ligne entre la première et la deuxième ligne.
Il y a deux sauts de ligne <br> parce qu'on est passé à la ligne juste après "Un message sur Forumactif.", mais également une deuxième fois pour laisser une ligne vide.

Dans du HTML "pur", par exemple si vous codez une page HTML à part, vous aurez beau sauter toutes les lignes que vous voulez, l'affichage final restera :
Code:
Un message sur Forumactif. Avec un saut de ligne entre la première et la deuxième ligne.

C'est très important de bien réaliser cette caractéristique des messages, car si, plus tard, vous comptez vous attaquer au codage de pages d'accueil de forums ou de pages HTML à part, le comportement de votre code sera différent.

Vous avez bien suivi ?


C'est le bon moment pour poser vos questions si vous vous sentez un peu trop larguées, c'est important qu'on mette en place des bases solides dès le départ. Prennez le temps de bien lire les tutoriels et ressources données, et si vous n'arrivez pas à trouver de complément d'information sur un détail, n'hésitez pas à me demander des éclaircissements.


_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Jeu 16 Juin 2022 - 9:15
Graphiste en stage
  • Date d'inscription : 03/08/2016
  • Messages : 175
Alors déjà, bonjour, et merci de nous laisser de ta science pour grandir en codage, c'est d'une grande générosité Coeur 2
Ensuite, je n'ai pas de questions qui me vienne, le tuto sur Epicode est très complet, clair et compréhensible je trouve, je n'arriverais pas à me rappeler de tout ce que j'ai lu en une fois haha mais je suppose que c'est normal, je pense néanmoins avoir compris le principal, comme la différence entre attribut style et attribut class, la différence entre div et span, et ce qu'est une propriété CSS et une classe CSS, comme tu l'as demandé !

A force de pratiquer et de relire, le reste finira par rentrer [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 1731648622
_______________
Ven 17 Juin 2022 - 21:15
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Alors, je vois que Lili ne s'est pas connectée depuis jeudi dernier (avant que je poste ce sujet) du coup pour éviter quand même de laisser le cours trop trainer, je vais passer directement à la suite. Quand tu pourras venir Lili n'hésite pas à poser tes questions si tu en as besoin.

Pour la suite du cours, je vais vous demander à toutes les deux de proposer des codes pour chaque élément de la fiche. Histoire de pouvoir réfléchir chacune de votre côté sans vous laisser influencer par votre camarade de cours, pensez à mettre vos réponses entre balises [spoiler] et [/spoiler] (et, bien sûr, vos fragments de code entre balises [code] et [/code]).

Commençons par les choses simples : En vous basant sur ce que vous avez déjà vu par le passé, essayez de coder la ligne de titre, en utilisant la balise HTML <div> avec l'attribut style.
- Observez bien ce texte : il est centré, il est écrit plutôt gros, il a une police d'écriture qui sort de l'ordinaire, il a une couleur spécifique (#a6a6d2 pour la couleur hexadécimale). Déduisez-en les propriétés CSS nécessaires pour son rendu.
- Si vous savez utiliser une police Google, vous pouvez aller en chercher une si ça vous amuse, sinon, contentez-vous d'une police d'écriture simple ;)
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Mar 21 Juin 2022 - 20:17
Graphiste en stage
  • Date d'inscription : 03/08/2016
  • Messages : 175
Alors, ça m'aura quand même pris un bon vingt-minute et plusieurs oubli de point virgules, mais je crois que ça y est [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 2702986051

Spoiler:

Si jamais Lili, la police c'est celle-là sur gg font: https://fonts.google.com/specimen/Lobster [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 3775839356
_______________
Jeu 23 Juin 2022 - 10:50
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Alors, ça commence plutôt bien, mais est-ce que tu as vérifié le rendu sur un message de test, ou en prévisualisation ? Tu te rendras compte que ça ne marche pas tout à fait comme prévu, mais pourquoi ? Indice : relis attentivement mon message d'introduction XD

Autre détail important, ton usage de la balise <head> n'est pas adapté. Elle sert lorsqu'on crée un document HTML complet, et techniquement, quand tu te trouves sur un forum, elle existe déjà dans le code qui sert à afficher toute la page (fais toi peur, fais un clic droit, code source de la page, et regarde la tambouille illisible générée par Forumactif). Je vais éviter de trop partir dans les détails pour ne pas t'embrouiller, mais en résumé, si tu codes à l'intérieur d'un message, pas de balises <head>, <body> ou <html>.
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Jeu 23 Juin 2022 - 14:10
Graphiste en stage
  • Date d'inscription : 03/08/2016
  • Messages : 175
Aaaaah non, j'étais resté sur codepen et du coup c'était bon là bas j'ai pas pensé à tester ;;
Normalement là c'est bon:

Spoiler:
_______________
Jeu 23 Juin 2022 - 17:49
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Codepen gère le code HTML comme du HTML standard, oui. Donc les sauts de ligne dans un code "normal" ne sont pas pris en compte. C'est quand tu colles ce code dans un message que Forumactif prend le relais et interprète ce que tu écris comme un message (oui, même quand il contient du HTML). Et donc, tous les sauts de ligne sont pris en compte (sauf si on les commente !). D'où mon insistance sur la différence entre coder dans un message, et coder dans une page HTML :p

Très bon début en tout cas. Je vais laisser à Lili le temps d'émerger du trou dans lequel elle est tombée (tu as jusqu'à jeudi prochain @Lili Rose) avant de passer à la suite :p
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Jeu 23 Juin 2022 - 18:12
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Nous sommes donc vendredi premier juillet et la date limite est passée, passons donc à la suite, Lili ayant disparu corps et biens dans les affres de la vie IRL.

Nous disions donc, bon début, Lumecyow. J'ai tendance à préférer utiliser l'option d'importation des polices d'écriture avec <link> parce que l'option CSS utilise @import qui, si on codait proprement, devrait être avant toute autre forme de CSS. Tu vas me dire qu'il n'y a pas d'autre CSS dans ton code, mais c'est sans prendre en compte celui qui permet au forum d'avoir son apparence actuelle XD

Les deux méthodes fonctionnent cependant, donc à moins d'être confrontée à un gros bug ou un changement de fonctionnement des navigateurs, je suppose que tu peux faire ce que tu préfères à l'avenir.

La suite maintenant ! Penchons-nous sur le sous-titre. Pour le titre, je t'ai dit quels éléments étaient importants à prendre en compte pour en déduire les propriétés CSS, cette fois-ci je te laisse y réfléchir par toi-même.

On reste simple cette fois toujours (à la fin du cours si tu te sens d'attaque je t'expliquerai comment mieux coder XD), donc utilise la balise <div> avec l'attribut style.
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Ven 1 Juil 2022 - 10:29
Graphiste en stage
  • Date d'inscription : 03/08/2016
  • Messages : 175
J'avoue avoir fait cette méthode car je l'ai pas mal vue à force d'utiliser des codes rs, donc elle m'était familière, mais je ne suis pas contre faire tout bien tout sémantique !! Au contraire je préfère encore apprendre à faire bien dès le début, comme ça je n'aurais pas d'habitude à changer later down the road !
Du coup j'ai changé ça ( et j'ai testé cette fois en faisant prévisualiser ici, et normalement c'est bon ! )

J'ai rajouté le sous-titre ! Je savais plus du tout quel police j'avais prise du coup je suis allée en chercher une qui me plaisait bien sur gg font et je l'ai prise en italique parce que je trouvais ça joli. Voilà le code so far:

Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
<div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div>
<div style="font-family: 'Playfair Display', serif; background-size 350px 30px; background-color:#a6a6d2; color:white; text-align:center; font-size:20px">petite citation plus ou moins longue qui fait joli.</div>

Par contre, à mon avis toi tu vas le voir de suite, mais j'ai un problème xD
Je n'arrive pas à faire en sorte que le background du sous titre soit plus " long ". Les lettres dépassent du cadre violet, et j'aimerais qu'elles restent à l'intérieur, d'où mon essaie du  " background-size 350px 30px; " mais ça ne change rien ? A mon avis la solution est simple et tu dois rire doucement derrière ton écran mais j'y arrive pas xD
_______________
Hier à 10:12
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Bien joué ! Alors sur mon écran (firefox) le fond du sous-titre fait bien toute la largeur de l'espace disponible. Quand tu n'indiques pas de largeur à un élément <div>, le bloc prendra tout l'espace disponible. Donc la couleur de fond, forcément, occupera tout l'espace du bloc.

Je suppose, cependant, que tu parles du fait que les lettres dépassent sur la hauteur (c'est normal, même si pénible). Je t'invite à te renseigner sur comment fonctionne la propriété CSS raccourcie padding et ses collègues padding-top, padding-right, padding-bottom et padding-left (le MDN a réponse à presque tout). N'oublie pas de me poser des questions si quelque chose t'échappe :p

(Et tu peux retirer la propriété background-size, elle n'est pas utile ici)
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Hier à 10:29
Graphiste en stage
  • Date d'inscription : 03/08/2016
  • Messages : 175
Aaaah c'est donc avec ce fameux padding que j'arrange ça, je pensais que vu que pour la couleur c'était backgroud-color, pour gérer sa taille et tout ce serait forcément background-size, my bad.
Merci de ton petit lien qui du coup m'a aidé à arranger ce qui me titillais hihi, du coup ça donne ça:

Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
<div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div>
<div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:20px">petite citation plus ou moins longue qui fait joli.</div>
_______________
Hier à 11:36
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Ca prend forme !

Une petite remarque cependant, Google Fonts donne généralement un lien "collectif" quand tu sélectionnes plus d'une seule police. Donc plutôt que tes deux balises d'importation (autres que les preconnect) :
Code:
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
Google te donnera plutôt celle-ci :
Code:
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">
Je vois en tout cas que tu ne t'es pas laissée impressionner par Google et que tu as pensé à retirer les sauts de ligne XD

On va s'attaquer à plus compliqué maintenant. Le texte de base, ça va ça se gère. Maintenant on va s'attaquer aux blocs de contenu. Commençons par faire rentrer tout ça dans un bloc conteneur. Comment est-ce que tu coderais le bloc noir qui englobe le tout, en te basant sur ce que tu sais faire ? Qu'est ce qui te fait douter, si doute il y a ?
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Hier à 13:01
Graphiste en stage
  • Date d'inscription : 03/08/2016
  • Messages : 175
J'arriverais à dompter les obstacles pour enfin arriver à coder ( au moins un peu ) hehe  musique
Alors là, je t'avoue que de tête je suis vraiment une bille ( en plus j'ai très mauvaise mémoire), tout ce que j'ai codé avec toi jusqu'ici je me suis aidée du MDN ( une pépite ce site merci de l'avoir partagé ). Ce que je saurais te dire comme ça c'est que ça va finir par être une balise div d'attribut "class" je pense, mais il faut déjà définir " class " grâce à l'attribut " style ".. ? Je crois ?  [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 3482194067  ( si c'est pas du tout ça désolée ;; )

Sinon du coup j'ai bien modifié ce que tu m'as dit, j'y avait pas du tout pensé:

Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lobster&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">
<div style="font-family: 'Lobster', cursive; color:#a6a6d2; text-align:center; font-size:55px">Titre du Rp</div>
<div style="font-family: 'Playfair Display', serif; padding:5px; background-color:#a6a6d2; color:white; text-align:center; font-size:20px">petite citation plus ou moins longue qui fait joli.</div>
_______________
Hier à 13:35
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
(pourquoi j'ai pas vu ta réponse hier, ce mystère...)

Pour le moment on va rester sur la balise <div> avec l'attribut style. (On potassera sur les classes et la feuille de style plus tard)

Pour le petit rappel, les attributs, ce sont des "options" des balises HTML. Ce qu'on fait avec l'attribut style, c'est qu'on code des effets de... style (surprise), directement sur un élément (une balise) HTML spécifique dans le code.


Cette fois-ci au lieu d'avoir des titres, tu veux une boite à l'intérieur de laquelle tu vas mettre tes deux titres (pour commencer). Elle doit avoir une couleur de fond, elle doit être potentiellement d'une certaine largeur, et ça serait certainement plus esthétique si elle était centrée. Ca serait également mieux si cette boite s'agrandissait avec le contenu textuel qu'elle contient, donc il vaut mieux éviter de lui fixer une hauteur.

Pour centrer horizontalement un bloc en CSS, on utilise des marges automatiques à droite et à gauche. Si tu n'as pas besoin de marges supérieures et inférieures, la méthode la plus traditionnelle consistera à écrire margin:auto;.
Un élément de type bloc ne peut être "centré horizontalement" que s'il a une largeur fixée, sinon il prendra automatiquement toute la largeur disponible.
_______________


[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 14n2 [Atelier de 'Christa #5] Etudier les bases en créant une simple fiche Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #5] Etudier les bases en créant une simple fiche 7WZJTfh
Aujourd'hui à 14:46
Contenu sponsorisé
    _______________
    Revenir en haut