Codage.
Cursus
Nous estimons dans un premier temps que vous devez savoir que ce cursus n'est pas l'équivalent d'une formation par école, il n'a rien d'officiel et ne vous donnera que des clefs pour vous débrouiller seul, être autonome dans vos codes et assez à l'aise pour vous aventurer dans la création d'une page de site web complète si vous le suivez jusqu'au bout. Évidemment, ce n'est qu'un guide, vous n'avez aucune obligation, ni de le suivre dans l'ordre, ni de tout lire ou de tout faire. Si vous avez déjà un niveau, des connaissances...vous pouvez simplement prendre le train en marche et aller directement à l'étape qui vous convient.
Sachez aussi que la logique de ce guide s'applique à ForumActif ! Nous prenons volontairement ce parti pris car nous sommes nous-même sur un forum et cette évolution d'apprentissage correspond à notre activité dans la communauté ainsi qu'aux demandes qui y sont faites. Vous pouvez donc être rassurés, le début de ce guide s'adresse à tous et il est accessible à tous !
Voici les grandes lignes que nous allons suivre :
• Tout d'abord, l'apprentissage de la mise en forme des messages. Une mise en forme facile à faire et facile à comprendre pour pouvoir vous amuser dans l'affichage de vos règlements, présentations etc... Tout se passe dans le message et nous allons d'un affichage simple à l'utilisation des dernières nouveautés CSS3, tout en douceur !
• Par la suite, nous verrons qu'il est pratique d'utiliser la Feuille de style CSS de votre forum. A quoi sert-elle ? Comment l'utiliser et pour quoi ? Vous aurez toutes vos réponses.
• Dans une troisième partie, nous nous attaquerons à un gros morceau : les Templates de ForumActif. Vous verrez que leur modification parait bien plus complexe qu'elle ne l'est en réalité, et que les comprendre permet de démultiplier les possibilités de modification de votre forum !
• Ensuite, le codage "sérieux" commence ! Vous ne le savez peut-être pas mais vous avez sur vos forum la possibilité de créer des pages web complètes ! ...D'ailleurs, vous croyez être où ici ? Ce site a été entièrement fait SUR des pages html ForumActif ! Intéressant pour mettre en place votre intrigue pour votre RPG par exemple, ou donner des détails sur l'univers dans lequel vous jouez. Nous vous apprendrons à réaliser votre propre mini-site web !
• Pour terminer et parce qu'il faut se tenir à jour avec l'avancée des technologies et surtout des langages informatiques, nous verrons ce que nous réserve le HTML5 et le CSS3 ! Pas d'inquiétude, à ce stade si vous avez tout suivi ces termes ne ressembleront plus à du chinois pour vous, vous cernerez immédiatement ce dont il s'agit.
Ce guide est censé vous donner les moyens de vous débrouiller, mais aussi vous permettre d'atteindre un "level" en codage assez haut sur le forum Never-Utopia. Cela vous donnera des bases vous permettant à votre tour d'aider ceux qui n'ont pas ces connaissances !
Bon apprentissage !
La rédaction d'un tel cursus étant très longue soyez indulgents, les étapes qui ne sont pas encore présentes seront ajoutées au fur et à mesure.
Si vous êtes codeur et que vous souhaitez apporter votre contribution sur une ou plusieurs étapes n'hésitez pas à nous en informer.
Partie 1 : mise en forme simple dans les messages
• Etape 1 : Mise en forme d'éléments de message (titre, liens, bordure d'image...)
TP – création d'une en-tête de RP simple
• Etape 2 : Mise en forme de paragraphes
• Etape 3 : Les Images ou motifs de fond
TP – création d'une mise en forme de règlement
• Etape 4 : Création d'un cadre informatif, de modération, avertissement, etc...
TP – création d'un cadre de message de validation de personnage préétabli
• Etape 5 : Définir et limiter les tailles
• Etape 6 : Disposer ses éléments : le "float"
• Etape 7 : Disposer ses éléments : les tableaux
TP – création d'une mise en forme de contexte
• Etape 8 : Savoir lire et modifier une mise en forme de message donnée
• Etape 9 : Un peu de CSS3 et ses exigences (css3 lisible par presque tout les navigateurs, de base donc arrondis, opacité)
TP – création d'une mise en forme de RP
Partie 2 : utilisation de la feuille CSS
• Etape 1 : Fonctionnement de la feuille de style CSS
• Etape 2 : Utilisation de la feuille CSS pour des modifications faciles et globales (dans l'apparence des messages)
TP – création d'une mise en forme d'annonce officielle avec CSS externe
• Etape 3 : Modifier des éléments simples du forum avec le CSS
• Etape 4 : Modifications d'éléments précis
TP – différentes mises en forme de la navigation d'un forum
• Etape 5 : Identitication du nom des éléments à modifier (utilisation du css de base et première utilisation des templates)
• Etape 6 : Changement de la nature, taille ou limites d'un élément (display, overflow)
TP – une navigation verticale sans toucher aux templates
Partie 3 : modifications des templates et CSS
• Etape 1 : Comprendre le fonctionnement d'un template
• Etape 2 : Définir un élément pour le modifier
TP – mise en forme poussée de la zone des messages
• Etape 3 : Suppression d'éléments
TP – destruction des colonnes des forum et remise en forme
• Etape 4 : Redisposition d'élément
TP – bouger les éléments du profil
• Etape 5 : Ajout d'éléments
TP – encadrer les catégories
TP – création d'un thème complet (forme1)
TP – création d'un thème complet (forme2)
Partie 4 : création d'une page web complète
• Etape 1 : Finalités d'une page & début de création de la page
• Etape 2 : Remplissage simple en html
TP – création d'une page d'accueil simple "entrer sur le forum"
• Etape 3 : Elaboration avec du css et prévisualisation
• Etape 4 : Création des blocs, schéma simple
• Etape 5 : Mise en forme des blocs du schéma simple
TP – création d'un site simple pour présenter votre RPG
• Etape 6 : Création des blocs, schéma élaboré
• Etape 7 : Mise en forme des blocs du schéma élaboré
TP – création d'un site élaboré pour votre RPG
• Etape 8 : Ajouter la page sur FA, le problème du CSS
• Etape 9 : Afficher la page : mise en place du lien
• Etape 10 : Conseils d'utilisation de ces pages et limites de FA
TP – création d'un site web classique
Partie 5 : initiation aux effets CSS3
• Etape 1 : Les différences de navigateurs
• Etape 2 : Les différentes mises en forme du CSS3
TP – utilisation du BG multiple en fond de page de forum
• Etape 3 : Les animations en CSS