Codage.
Cursus
Cette étape était entièrement consacrée au graphisme. Vous avez peut-être pu le remarquer, mais je ne suis pas une bête en graphisme, le but de ce tutoriel est déjà fixé à cette étape, vous apprendrez plus de choses en Codage qu'en Graphisme mais j'essaye tout au long des étapes de vous apprendre le maximum de ce que je sais en graphisme ^^
Le fruit de notre travail nous aura amené à réaliser notre fond :
Ainsi que notre bannière :
Étape essentiellement consacrée au CSS puisque vous apprenez à organiser votre feuille de style CSS. Cette étape me tenait à cœur puisqu'une feuille CSS se doit d'être bien organisée et où l'on se repère facilement !
Organiser son CSS :
Là encore, une étape essentielle pour pouvoir correctement Coder/Grapher son forum. Les réglages primaires ne sont pas à négliger et il faut vous assurer qu'ils ont été fait ! Dans cette étape, vous avez appris à :
? Mettre plusieurs fonds, influer sur le position, leur répétition et leur défilement grâce au CSS :
Je vous ajoute les différentes valeurs qu'ils peuvent avoir, cette liste est non-exhaustive pour position puisque vous pouvez jouer avec les px : Plus d'infos - W3Schools
? Enfin, on a vu les préfixes typiques au CSS3, ici c'était pour l'ombre mais ils ont nécessaire pour les arrondis, l'opacité (un cas particulier que nous avons vu quelque étapes après) et les transition.
Modification de la navigation pour cette étape. C'est un tutoriel que je voulais faire mais finalement, je l'ai gardé pour ce cursus puisqu'elle collait parfaitement au design final. Concrètement, vous avez appris comment modifier un template pour en tirer des profits et également comment redonner à votre navigation son caractère interactif.
Une barre de navigation type :
Et le JavaScript pour les Messages Privés :
Elle a été divisé en 2 et je ne m'attarderais pas sur la partie Graphique tout simplement parce qu'il n'y a pas grand chose à retenir si ce n'est : La confection d'un corps de catégorie n'est pas difficile, au contraire, parfois un cadre et un motif peuvent amplement suffire. De nos jours, la simplicité à le goût de rendre les choses meilleures pour notre vie alors n'hésitez pas à jouer avec cette notion de légèreté et de simplicité.
Vous avez sûrement passé beaucoup de temps sur la partie B puisqu'elle se décline en trois temps :
? Analyse du Template Index_Box
? Création du corps de catégorie
? Création du contenu des catégories
Commençons par l'analyse. Elle va être postée prochainement dans un tutoriel isolé et plus précis. Je n'allais pas vous assommer de connaissances dans une application, le but est de pratiquer et pas de théoriser, cependant, un point sur le template était obligatoire pour savoir ce que nous allions traiter.
Venait ensuite la création du corps de catégorie, jusque là tout allait bien puisque ce n'était qu'une création de trois div. Vous avez cependant reçu une nouvelle connaissance en CSS, le pouvoir de comprimer les propriétés de type "Background" en une "Super-Propriété". Le problème, c’est que lorsque l’on doit mettre plusieurs images comme nous l'avons fait pour .body, la propriété ne fonctionne pas et les suffixes doivent réapparaître.
Enfin, la création du contenu des catégories, riche en propriétés CSS et en manipulation HTML. Vous avez appris à jouer avec les flottements - Float - pour retirer les tableaux et également avec les positions, les transitions et une petite partie de JavaScript. Le point le plus important reste, à mes yeux, celui sur le clear: both INDISPENSABLE pour un bon affichage. Pensez donc à le mettre si vous venez à réaliser ceci en commande où sur votre forum.
Des propriétés CSS à retenir :
Un code JavaScript utile : Des sous-forums en retour à la ligne
Huhu, cette étape est l'une des plus conséquentes, tant par sa taille que par les choses qu'on y apprend. C'est, avec l'étape de la page d'accueil et des catégories, celle qui va sûrement vous épuiser le plus, d'où le choix d'avoir posé ce résumé juste après, ça vous permet de faire un check-up, essentiel aussi pour vous assurer que vous n'avez rien oublié, et une pause pipi entre deux abdos \0/. Bon ok, peut-être un seul ... Même pas é_è ? Vous êtes déconcertants =P !
On commence d'abord par la création du titre QEEL, rapide, efficace et classe !
Ensuite vient la grosse manipulation HTML dans le Qui Est En Ligne. Tout comme les catégories, il est divisé en trois parties :
- Analyse du template Index_body
- La création du QEEL en lui-même
- La mise en interaction avec l'utilisateur
Je ne vais pas revenir sur l'analyse puisqu'elle sera, comme pour Index_box, reprise plus précisément dans un tutoriel.
Pour la création du QEEL, je vous ai appris à jouer avec les tableaux, comme avec les div. Vous devez comprendre que parfois, le float est mal choisi dans la forme et que le tableau est nécessaire. Il n'y a pas grand chose de nouveau sur cette partie, ça reste du CSS et du HTML pur. Vous avez eu également un exercice, j'espère que vous avez réussi et compris ce que j'attendais de vous x) !
Enfin, la mise en interaction avec l'utilisateur était le jeu de transition et de z-index. Cette notion reste la plus récente que vous devez aborder, n'hésitez donc pas le lien que je vous ai mis vers l'article rédigé par Scavenger : Lien vers l'article.
Propriétés CSS utiles :
Une étape également divisée entre Graphisme et Codage. Nous avons créée un Footer tout mignon grâce, à nouveau, aux nébuleuses. Le principal à retenir de cette étape, c'est le fait que le Footer ne doit pas être trop large au risque de paraître vide. Si vous êtes un graphiste en herbe comme moi, vos fonds seront souvent vides et donc donneront une impression de travail non fini au visiteur. Niveau codage, vous pouvez retenir la balise qui permet de mettre en forme les liens de copyright qui sont dans le Footer :
Suite de l'application :
- Étape 9 : Structure de l'affichage des sujets
- Étape 10 : Mise en forme des messages
- Étape 11 : La Page Accueil, mise en avant d'un élément décisif.
- Étape 12 : Des petits plus ?
- Étape 13 : Zoom sur l'ensemble du tutoriel et Bilan
- Étape mystère : Que peut-elle être ?
Précédent Suivant
Étape 8 - Résumé des étapes précédentes
Nous nous retrouvons dans cette étape pour un résumé de tout ce que nous avons fais précédemment ! Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Pour le moment, nous avons réalisé les étapes suivantes :
- Index & Introduction :
- Étape 1 : Réaliser son fond et sa bannière
- Étape 2 : Préparer sa feuille de style CSS
- Étape 3 : Poser les fondations du codage du forum
- Étape 4 : Mise en forme de la navigation
- Étape 5A : Création graphique des catégories
- Étape 5B : Installation des catégories
- Étape 6 : Élaboration du "Qui Est En Ligne ?"
- Étape 7 : Élaboration du Footer
Cette étape intermédiaire, séparant l'apparence de la façade de votre forum et de celle de son contenu servira de mémo pour tout ce que vous avez appris à faire. Vous l'aurez remarqué, nous n'avons pas encore abordé la Page Accueil, c'est une grosse étape que nous aborderons en dernier, c'est, selon moi, la cerise sur le gâteau qui doit être en harmonie avec l'ensemble du forum.
Pour le moment, nous avons réalisé les étapes suivantes :
- Index & Introduction :
- Étape 1 : Réaliser son fond et sa bannière
- Étape 2 : Préparer sa feuille de style CSS
- Étape 3 : Poser les fondations du codage du forum
- Étape 4 : Mise en forme de la navigation
- Étape 5A : Création graphique des catégories
- Étape 5B : Installation des catégories
- Étape 6 : Élaboration du "Qui Est En Ligne ?"
- Étape 7 : Élaboration du Footer
Cette étape intermédiaire, séparant l'apparence de la façade de votre forum et de celle de son contenu servira de mémo pour tout ce que vous avez appris à faire. Vous l'aurez remarqué, nous n'avons pas encore abordé la Page Accueil, c'est une grosse étape que nous aborderons en dernier, c'est, selon moi, la cerise sur le gâteau qui doit être en harmonie avec l'ensemble du forum.
Auteur : Taktiik
Étape 1
Cette étape était entièrement consacrée au graphisme. Vous avez peut-être pu le remarquer, mais je ne suis pas une bête en graphisme, le but de ce tutoriel est déjà fixé à cette étape, vous apprendrez plus de choses en Codage qu'en Graphisme mais j'essaye tout au long des étapes de vous apprendre le maximum de ce que je sais en graphisme ^^
Le fruit de notre travail nous aura amené à réaliser notre fond :
Ainsi que notre bannière :
Étape 2
Étape essentiellement consacrée au CSS puisque vous apprenez à organiser votre feuille de style CSS. Cette étape me tenait à cœur puisqu'une feuille CSS se doit d'être bien organisée et où l'on se repère facilement !
Organiser son CSS :
Étape 3
Là encore, une étape essentielle pour pouvoir correctement Coder/Grapher son forum. Les réglages primaires ne sont pas à négliger et il faut vous assurer qu'ils ont été fait ! Dans cette étape, vous avez appris à :
? Mettre plusieurs fonds, influer sur le position, leur répétition et leur défilement grâce au CSS :
Je vous ajoute les différentes valeurs qu'ils peuvent avoir, cette liste est non-exhaustive pour position puisque vous pouvez jouer avec les px : Plus d'infos - W3Schools
? Enfin, on a vu les préfixes typiques au CSS3, ici c'était pour l'ombre mais ils ont nécessaire pour les arrondis, l'opacité (un cas particulier que nous avons vu quelque étapes après) et les transition.
Étape 4
Modification de la navigation pour cette étape. C'est un tutoriel que je voulais faire mais finalement, je l'ai gardé pour ce cursus puisqu'elle collait parfaitement au design final. Concrètement, vous avez appris comment modifier un template pour en tirer des profits et également comment redonner à votre navigation son caractère interactif.
Une barre de navigation type :
Et le JavaScript pour les Messages Privés :
Étape 5
Elle a été divisé en 2 et je ne m'attarderais pas sur la partie Graphique tout simplement parce qu'il n'y a pas grand chose à retenir si ce n'est : La confection d'un corps de catégorie n'est pas difficile, au contraire, parfois un cadre et un motif peuvent amplement suffire. De nos jours, la simplicité à le goût de rendre les choses meilleures pour notre vie alors n'hésitez pas à jouer avec cette notion de légèreté et de simplicité.
Vous avez sûrement passé beaucoup de temps sur la partie B puisqu'elle se décline en trois temps :
? Analyse du Template Index_Box
? Création du corps de catégorie
? Création du contenu des catégories
Commençons par l'analyse. Elle va être postée prochainement dans un tutoriel isolé et plus précis. Je n'allais pas vous assommer de connaissances dans une application, le but est de pratiquer et pas de théoriser, cependant, un point sur le template était obligatoire pour savoir ce que nous allions traiter.
Venait ensuite la création du corps de catégorie, jusque là tout allait bien puisque ce n'était qu'une création de trois div. Vous avez cependant reçu une nouvelle connaissance en CSS, le pouvoir de comprimer les propriétés de type "Background" en une "Super-Propriété". Le problème, c’est que lorsque l’on doit mettre plusieurs images comme nous l'avons fait pour .body, la propriété ne fonctionne pas et les suffixes doivent réapparaître.
Enfin, la création du contenu des catégories, riche en propriétés CSS et en manipulation HTML. Vous avez appris à jouer avec les flottements - Float - pour retirer les tableaux et également avec les positions, les transitions et une petite partie de JavaScript. Le point le plus important reste, à mes yeux, celui sur le clear: both INDISPENSABLE pour un bon affichage. Pensez donc à le mettre si vous venez à réaliser ceci en commande où sur votre forum.
Des propriétés CSS à retenir :
Un code JavaScript utile : Des sous-forums en retour à la ligne
Étape 6
Huhu, cette étape est l'une des plus conséquentes, tant par sa taille que par les choses qu'on y apprend. C'est, avec l'étape de la page d'accueil et des catégories, celle qui va sûrement vous épuiser le plus, d'où le choix d'avoir posé ce résumé juste après, ça vous permet de faire un check-up, essentiel aussi pour vous assurer que vous n'avez rien oublié, et une pause pipi entre deux abdos \0/. Bon ok, peut-être un seul ... Même pas é_è ? Vous êtes déconcertants =P !
On commence d'abord par la création du titre QEEL, rapide, efficace et classe !
Ensuite vient la grosse manipulation HTML dans le Qui Est En Ligne. Tout comme les catégories, il est divisé en trois parties :
- Analyse du template Index_body
- La création du QEEL en lui-même
- La mise en interaction avec l'utilisateur
Je ne vais pas revenir sur l'analyse puisqu'elle sera, comme pour Index_box, reprise plus précisément dans un tutoriel.
Pour la création du QEEL, je vous ai appris à jouer avec les tableaux, comme avec les div. Vous devez comprendre que parfois, le float est mal choisi dans la forme et que le tableau est nécessaire. Il n'y a pas grand chose de nouveau sur cette partie, ça reste du CSS et du HTML pur. Vous avez eu également un exercice, j'espère que vous avez réussi et compris ce que j'attendais de vous x) !
Enfin, la mise en interaction avec l'utilisateur était le jeu de transition et de z-index. Cette notion reste la plus récente que vous devez aborder, n'hésitez donc pas le lien que je vous ai mis vers l'article rédigé par Scavenger : Lien vers l'article.
Propriétés CSS utiles :
Étape 7
Une étape également divisée entre Graphisme et Codage. Nous avons créée un Footer tout mignon grâce, à nouveau, aux nébuleuses. Le principal à retenir de cette étape, c'est le fait que le Footer ne doit pas être trop large au risque de paraître vide. Si vous êtes un graphiste en herbe comme moi, vos fonds seront souvent vides et donc donneront une impression de travail non fini au visiteur. Niveau codage, vous pouvez retenir la balise qui permet de mettre en forme les liens de copyright qui sont dans le Footer :
A quoi s'attendre maintenant pour la suite ?
Et bien, tout ce que je peux vous dire, c'est qu'il nous reste 3 étapes de construction pure et dure : La liste des sujets, l'affichage des message et enfin la Page Accueil. J'essaierai, pour les prochaines étapes de vous donner plus d'exercices, n'hésitez toujours pas à me MP vos résultats ou vos questions, ma boite MP reste ouverte : Créer MP.Suite de l'application :
- Étape 9 : Structure de l'affichage des sujets
- Étape 10 : Mise en forme des messages
- Étape 11 : La Page Accueil, mise en avant d'un élément décisif.
- Étape 12 : Des petits plus ?
- Étape 13 : Zoom sur l'ensemble du tutoriel et Bilan
- Étape mystère : Que peut-elle être ?
Précédent Suivant