AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Index du cursus Codage

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Mar 4 Fév 2014 - 10:10

    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 !

    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 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 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




      La date/heure actuelle est Sam 10 Déc 2016 - 11:46