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.
-38%
Le deal à ne pas rater :
PC Portable Gamer – LENOVO Legion 5 15ACH6H – 15,6″FHD (RAM 8Go)
799 € 1299 €
Voir le deal
Le deal à ne pas rater :
Manga : le contenu du Tome 10 Collector de L’Atelier des Sorciers ...
Voir le deal

Aller en bas
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Atelier #4 - Méthodologie pour imiter une mise en page façon Twitter

pour @Lykoï

État des lieux


Objectif : Poser les bases du codage dans les messages de Forumactif et s'entrainer en imitant une mise en page de type Twitter
Base de travail : Quelque chose qui ressemble à Twitter (à personnaliser si besoin).
Demande :
Spoiler:

Pour commencer



Les outils


C'est un prérequis à mon cours que d'avoir un logiciel de codage. Fais ton choix, notepad++, Visual Studio Code, Atom, peu importe, mais tu dois avoir sur ton PC un dossier dans lequel tu mettras tous tes codes bien proprement, plutôt que de coder à l'arrache dans un message. Rien de bien compliqué en dépit des apparences, tout comme tu as des fichiers .docx ou assimilés sur ton pc, là tu vas te créer des fichiers en .html (ou .css si tu sépares le CSS du HTML) que tu garderas dans un coin.

Tu peux également te créer un compte sur Codepen qui te servira à avoir un aperçu directement (Visual Studio Code possède une extension appelée Live Server qui permet d'avoir le même système, si tu préfères ne pas dépendre de Codepen, mais ça demande une certaine prise en main).

Les notions utiles


▶ Comme moi à mes débuts, tu sembles coder par imitation. Crois-moi, il vaut mieux que tu prennes le temps de te poser un minimum pour potasser les bases, tu gagneras un temps fou pour la suite. Direction donc le tutoriel d'introduction au codage pour commencer. Ensuite, pour approfondir, il y a probablement quelques tutoriels sur Epicode qui pourront t'y aider.

S'il y a des notions qui t'échappent, c'est le moment de poser tes questions, qu'on puisse éclairer les concepts nécessaires pour aller plus loin.

▶ A première vue, pour ce rendu Twiteresque (je ne me sers pas de twitter donc j'espère pour toi que tu as une idée assez précise de ce que tu veux XD), il va te falloir apprendre à utiliser les bases de flexbox (il commence à dater ce tutoriel, faudra vraiment que je m'en occupe). Nous avons bien sûr l'article du MDN sur flexbox et enfin, ma bible personnelle, le guide de flexbox de CSS Tricks (en anglais). Apprendre à utiliser le positionnement avec float & co serait un bonus, mais autant te prévenir, c'est pas simple du tout.

▶ Pour les icônes, il y a la méthode ancienne, avec des images de ton cru, ou bien la méthode moderne (mais plus complexe) qui consiste à utiliser des polices d'icônes. Je n'ai malheureusement pas encore fait de tutoriel sur le sujet (c'est sur mon interminable liste de choses à faire) du coup il faudra que j'explique ça quand ça viendra. Mais ne mettons pas la charrue avant les boeufs.

Premier exercice


Une fois que tu auras bien lu et intégré les différents tutoriels, cogitons un peu à ton objectif. Pour faire un rendu twitter, tu vas avoir besoin de différents éléments. Est-ce que tu peux essayer de les isoler (titres, paragraphes, images...) et m'en faire la liste, avec la balise HTML correspondante selon toi ?

Bonne chance, petit padawan ! Ordi


_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Mar 11 Jan 2022 - 16:03
Newbie
  • Date d'inscription : 30/10/2021
  • Messages : 35
Oh mon dieu ! Je n'avais pas vu le sujet, je me penche dessus de suite.
Je passais simplement en espérant avoir des nouvelles... Toutes mes excuses >.<
(Je ferai un double post si besoin)
_______________
Jeu 20 Jan 2022 - 17:20
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Pas de soucis, je sais que le temps d'attente n'a pas dû aider à t'y faire penser XD
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Ven 21 Jan 2022 - 20:16
Newbie
  • Date d'inscription : 30/10/2021
  • Messages : 35
J'ai surtout complètement raté le post en passant tous les jours quoi... [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 1007048454

Alors je reviens de ma semaine loin de la maison, et je suis pas sûr de savoir par où commencer. Juste une liste de ce que je pense avoir besoin ? Pour l'instant j'essaie de bien comprendre le flexbox mais je suis très dans la confusion encore pour le moment.
Mais si c'est juste une liste de ce que je pense avec une petite explication du pourquoi je peux essayer. Même si j'ai beaucoup de mal à tout mettre dans l'ordre pour le moment xD
_______________
Lun 31 Jan 2022 - 13:04
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Yep, pour le moment je ne te demande pas de coder, juste de lister les différents éléments clés de la structure que tu souhaites obtenir et de comment ils seraient codés, au niveau le plus basique. Ça me permettra de voir où tu en es niveau compréhension des différentes balises HTML et de te donner de meilleures solutions si tu me réponds "div, div, div, div, div, div" XD

Pour t'aider : c'est important de respecter la sémantique, en HTML. Avant de t'intéresser à l'aspect esthétique, pense à la structure logique. On s'occupera de l'agencement esthétique quand on aura notre squelette général.
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Lun 31 Jan 2022 - 13:36
Newbie
  • Date d'inscription : 30/10/2021
  • Messages : 35
Okay! Here it goes :

Code:
<div>
    <img src=""><h1>Tweet</h1>
    <img src=""><h2>Subunny ~<h2><br>
    <span>@sububu</span>
    <hr>
    <div>
        <p>Tweet text</p>
    </div>
    <hr>
    <span>09:49 PM . 27 Dec 21</span>
    <hr>
    <img src=""><img src=""><img src=""><img src="">
    <hr>
</div>

Je sais pas si c'est qui était attendu, mais j'ai tenté un truc [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 3313101865
_______________
Lun 31 Jan 2022 - 20:13
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Hmmm, structurellement parlant, c'est un début oui. C'est bien, tu as utilisé des balises de titre, de paragraphe et même les barres de séparation. Je pense que ma principale objection serait surtout que j'aurais utilisé une liste HTML pour les images finales, même si elles ne sont là que pour la déco dans un contexte de "faux tweet".

Si on décompose l'image que tu m'as donnée en guise d'exemple de tweet, on peut en déduire une structure en cinq parties :
- D'abord le "titre", à savoir l'indication "Tweet" avec la flèche sur le côté (est-elle utile dans un contexte de faux tweet ? Elle sert à quoi cette flèche ? Si elle est purement décorative, alors on pourra se contenter d'utiliser le pseudo-élément ::before en CSS, et de supprimer le besoin de mettre une image dans le HTML)
- Puis l'avatar, le nom et le "tag" de l'auteur (c'est le plus "complexe", on gagnera à définir un bloc englobant le tout avec la balise <div>.)
- Le contenu du tweet proprement dit (un paragraphe suffit largement indeed)
- La date du tweet (l'utilisation de la balise paragraphe serait plus propre qu'un span)
- Les différents liens de partage & co sous forme d'image (sous forme de liste d'images)

Tu peux supprimer la balise <br> que tu as mise, surtout si ton intention est juste de créer un espace avec : on s'occupera de ça avec le CSS.

Partant de ces observations, est-ce que tu as une autre suggestion à faire niveau squelette HTML ?

(N'oublie pas de me poser tes questions si jamais quelque chose ne te semble pas clair).
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Lun 31 Jan 2022 - 21:36
Newbie
  • Date d'inscription : 30/10/2021
  • Messages : 35
Code:
<div>
    <h1>Tweet</h1>
        <div>
            <img src=""><span>Subunny ~<span>
            <span>@sububu</span>
        </div>
    <div>
        <p>Tweet text</p>
        <p>09:49 PM . 27 Dec 21</p>
    </div>
    <img src=""><img src=""><img src=""><img src="">
</div>

Comme ça ? o:

En effet la flèche sert à retourner sur la timeline sur twitter. Donc très peu utile en soit. C'est quoi le before ?
Je crois ne pas comprendre la liste d'images ? C'est ce que j'ai fait ou y a autre chose que je ne connais pas ?
(Je poserai des questions au fur et à mesure que mon esprit structure la chose... Pour l'instant j'essaie juste de voir si je comprends ce que je fais à tâtons.. XD)
_______________
Lun 31 Jan 2022 - 21:59
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Ahah, je me disais bien qu'on allait devoir potasser quelques fondamentaux ^^

Alors, quand je parle de liste d'image, je parle d'utiliser les balises de liste en HTML, à savoir :

Ces balises sont à utiliser lorsque tu souhaites créer une liste d'items, genre celle que je viens de faire, mais sont également utilisables pour afficher une barre de navigation (la barre de navigation d'épicode en est un exemple), une liste de partenaires, etc. Leur aspect par défaut peut être totalement revu avec le CSS ;)
Tu peux consulter par exemple le tutoriel d'Epicode ou encore la page de Pierre Giraud sur les listes pour un tutoriel en français.

Le pseudo-élément ::before est un sélecteur CSS, tu en apprendras plus sur les sélecteurs CSS dans ce tutoriel, mais va falloir s'accrocher, c'est complexe au premier abord. Dans le cas spécifique de ::before, il permet d'insérer un pseudo élément (d'où son nom) avant un élément désigné. Par exemple, avec le sélecteur h1::before on pourra rajouter la fameuse image de flèche vu qu'elle est purement esthétique. Tu peux lire l'article du MDN sur le sujet.

Tu n'es pas obligé d'utiliser des <div> partout (les paragraphes pour le tweet et la date se suffisent à eux même), et tu as perdu le titre <h2> sur le pseudo :<

Ca te semble plus clair ? D'autres questions ? :p
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Mar 1 Fév 2022 - 16:52
Newbie
  • Date d'inscription : 30/10/2021
  • Messages : 35
Je pense que j'ai du mal à me détacher de mes div je sais pas tellement pourquoi. Très probablement parce que je "ne sais pas faire sans" du coup j'en mets partout. Je pense que j'ai beaucoup de mal à me dire que tout peut tenir tout seul. Ou alors j'ai réellement compris comment la div fonctionne. Mais c'est bien juste, je mets une div pour "englober" le reste de mon squelette ?

J'ai lu les secteurs, mon cerveau a fondu... Déjà que je pls sur les flex-box depuis une semaine maintenant. XD

Code:
<div>
    <h1>Tweet</h1>
        <img src=""><h2>Subunny ~<h2>
        <span>@sububu</span>
        <p>Tweet text</p>
        <p>09:49 PM . 27 Dec 21</p>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>

Alors je mettrai pas ma main au feu là-dessus, mais je dois bien mettre 4 balises de liste comme il y a 4 images ou une seule suffit ? Je ne suis pas sûre de comprendre la différence entre ul et ol. Est-ce que c'est juste une histoire de numérotation entre les deux ? Je suis si la confusion 'Christa hahahaha ALED. xD Là on fait une liste d'images, mais j'ai du mal à comprendre comment on va pouvoir en mettre 4 si elle s'appelle toutes li ? [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 3313101865  

Est-ce que je laisse la span pour le @ ou est-ce que là je mets aussi h3 (par exemple) ?
Je suis en roue libre cérébrale toutes mes excuses [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 1007048454
(J'espère que mes questions sont plus ou moins claires)
_______________
Mar 1 Fév 2022 - 17:56
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Prends ton temps pour lire et intégrer les tutoriels, c'est normal de ne pas tout comprendre au début !

Les listes créées avec la balise <ul> sont des listes non ordonnées (des listes à puces quoi) et les listes créées avec la balise <ol> sont des listes ordonnées (numérotées). Si l'ordre n'a pas de réelle importance, on choisira généralement les listes non ordonnées. Les listes ordonnées sont plutôt utilisées pour les sommaires par exemple.

Et chaque item de liste contient le texte que tu souhaites, donc ici ce seront tes quatre images !

Du coup, un code propre pour afficher ces quatre images :
Code:
<ul>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
    <li><img src="LIEN DE L'IMAGE" alt="DESCRIPTION DE L'IMAGE" ></li>
</ul>
(Tu noteras la présence de l'attribut alt dans la balise <img>. Il est obligatoire et sert à décrire l'image. Il est utilisé par les moteurs de recherches, lecteurs d'écran, et est très utile pour les personnes malvoyantes. Prends dès maintenant l'habitude de toujours décrire tes images en quelques mots via cet attribut Ordi )

La balise <div>, de même que la balise <span> sont des balises "sans sens sémantique", tu les utilises quand tu n'as pas d'autre choix. Le MDN a un article sur la sémantique, mais en résumé, il s'agit d'utiliser des balises qui correspondent à l'objectif de chaque élément : une balise de titre pour un titre, une balise de paragraphe pour un bloc de texte, une balise <strong> pour mettre en valeur un ou plusieurs mots, etc. En bref si tu souhaites coder en HTML proprement, tu dois favoriser les balises sémantiques pour que les lecteurs d'écran, moteurs de recherches et autres systèmes sachent trier les informations que tu fournis.

Malheureusement, la majorité des gens qui codent sur Forumactif n'ont pas de réelle formation en HTML et essaient surtout d'avoir l'apparence qu'ils souhaitent sans être conscients de l'importance de la sémantique. En tant que développeuse de formation, je mettrai toujours l'accent sur ce point histoire que les générations futures n'aient pas ce problème :p

Dans l'idéal, on utilisera la balise <div> pour englober des sections de code, ou pour une mise en forme supplémentaire. Pareil pour la balise <span>, qui n'a pas de sens sémantique. Par exemple, comme en HTML tout est une question de sens et pas d'apparence, tu n'as pas de balise "texte souligné". Dans ce cas là, la solution sera généralement quelque chose comme <span style="text-decoration:underline"> du texte </span> (mais si on veut faire ça proprement, on utilisera plutôt une classe XD).

Mais les balises de gras et d'italiques ? Ces balises ne veulent pas dire "gras" ou "italiques" mais "ce mot est important" ou "mettre l'emphase sur ce mot". Par convention, elles sont en gras et en italiques, mais en vrai tu pourrais totalement changer leur apparence via CSS.


En tout cas, tu avais bien pensé en utilisant une balise <div> pour englober le pseudo, l'avatar et le @, parce qu'ils constituent un ensemble. Et la présence d'une autre balise <div> pour le tweet et sa date n'est pas forcément une mauvaise idée, même si je m'en serais passée, je ne voulais pas te faire peur en te disant que tu n'avais pas besoin d'en mettre partout XD C'était surtout pour t'indiquer que ce n'est pas obligatoire.

Pour le @, c'est un sous-titre, mais il ne définit pas vraiment une "section" (contrairement au pseudo qui introduit l'espace où la personne s'exprime). On a plusieurs façons d'implémenter un sous-titre. Tu pourrais utiliser un paragraphe ici également.

Juqu'ici ça va ? @o@
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Mar 1 Fév 2022 - 20:35
Newbie
  • Date d'inscription : 30/10/2021
  • Messages : 35
Code:
<div>
    <div>
        <h1>Tweet</h1>
        <img src="lien" alt="description">
        <h2>Pseudo<h2>
        <p>@tag</p>
    </div>
        <p>Tweet text</p>
        <p>09:49 PM . 27 Dec 21</p>
        <ul>
            <li><img src="lien" alt="description" ></li>
            <li><img src="lien" alt="description" ></li>
            <li><img src="lien" alt="description" ></li>
            <li><img src="lien" alt="description" ></li>
        </ul>
</div>

Je crois que ça va. Je pense que j'ai surtout l'habitude de coder pour forumactif et du coup je prends 'au plus simple' pour le rendu que je veux en ignorant tout le reste. Je sais pas si c'est clair comme explication.... [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 3313101865 Mais genre c'était plus simple pour moi de mettre des divs puis te les gaver de css pour que ça rende comme j'en ai envie. Du coup c'est "compliqué" de me rendre compte qu'il existe d'autres possibilités [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 1007048454

(Me revoilà, désolé du délais >.<)
_______________
Mer 16 Fév 2022 - 16:39
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Salut @Lykoi ! Ahah cette réapparition pile 15 jours après le dernier message en mode panique XD

Maintenant qu'on a un code propre, c'est le moment d'essayer d'avoir un rendu qui correspond au visuel que tu cherches.
- Il va falloir utiliser la propriété float pour l'avatar du pseudo (si ça marche pas, réfléchis à comment revoir le code)
- Testouille un peu tout seul avec le pseudo-élément ::before
- Pour la liste d'images, un petit flex sera probablement le plus simple.

Tu n'es pas spécialement obligé d'utiliser une classe pour chaque élément individuel. N'oublie pas d'utiliser l'héritage et le système des styles en cascade en CSS :p

Pas de stress pour ce premier jet, si tu coinces sur un élément, mets le de côté et bosse sur un autre bout, et note tout ce qui te pose souci et pourquoi.
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Sam 19 Fév 2022 - 17:24
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Plop @Lykoï je te fais une petite fleur en pokant ce sujet des fois que tu reviendrais d'entre les morts (et je n'ai pas été très active récemment donc je ne vais pas trop te jeter la pierre) mais sinon faute de nouvelles je vais devoir le clore :<
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Lun 21 Mar 2022 - 16:47
Codeur.se
  • Date d'inscription : 27/10/2018
  • Messages : 892
Quand les gens disparaissent comme ça je me demande toujours s'ils ont juste oublié ou s'il leur est arrivé un truc horrible x_x

En tout cas, je clos le sujet :'(
_______________


[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 14n2 [Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter Rwns
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
[Atelier de 'Christa #4] Méthodologie pour imiter une mise en page façon Twitter 7WZJTfh
Mer 15 Juin 2022 - 11:42
Contenu sponsorisé
    _______________
    Revenir en haut