Cursus Codage

Introduction

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 ! Le Site de Never-Utopia a d'ailleurs é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 !

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 6 - Annexe : Bien comprendre le "float" & "clear"
Etape 7 : Disposer ses éléments : les tableaux
TP – création d'une mise en forme de contexte
Etape 7b (annexe) : Les tableaux en profondeur
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 1b (annexe) : Différencier "id" et "class"
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
Etape 7 : Le Positionnement et le z-index
Etape 8 : Les Transitions

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

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

Partie 6 : le Javascript

Etape 1 : Initiation au Javascript