Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Intégrer des page web au forum

    Partagez
    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Lun 22 Mar 2010 - 11:35
    Un Site Web
    sur votre forum !


    Les forum ForumActif ont l'agréable particularité de permettre tout une série d'ajouts et de modifcations avec lesquelles les plus à l'aise d'entre vous en codage pourront s'amuser pendant des heures ! Dans cette astuce, nous verrons comment arriver tout simplement à intégrer une page web à votre forum, que ce soit en temps que "page d'accueil' ou bien pour le règlement, par exemple. Par la suite, nous passerons à l'étape supérieure, à savoir créer plusieurs pages, avec un design original ou du moins différent de celui du forum, ou bien carrément une sorte de "mini-site" !
    Les premières parties de ce tuto sont accessibles à tout le monde, que vous sachiez ou non coder, par la suite il sera nécessaire d'avoir des bases en codage html et css afin de pouvoir exploiter pleinement le style de contenu que nous vous proposons de faire.

    .......................



    I/ Créer une page d'accueil à votre forum

    Pourquoi faire ?

    Dites vous bien que cette page doit avoir une utilité avant de vous lancer dans son élaboration ! Posez-vous les bonnes questions en vous mettant aussi dans le rôle d'un visiteur tombant sur votre forum. Pourquoi faire cette page ? Qu'apporte-t-elle ? Ne va-t-elle pas être un frein à la navigation de l'invité ?
    En effet, il est important de ne pas faire une telle page juste histoire de paraitre plus "pro" en faisant seulement un bouton pour accéder au forum, car dans ce cas cela ne sert à rien, si ce n'est à exaspérer le visiteur venu chez vous dès la première seconde.

    Voici des exemples de ce que vous pouvez mettre sur cette page :
    • une vidéo de présentation du forum : ça bouge, y'a de la musique, si c'est bien fait c'est aussi très attractif, ça peut aussi planter votre scénario de jeu de rôle par exemple...
    • une présentation écrite rapide du forum : faites bref afin de ne pas déjà lasser le visiteur ! Mettez le tout sur une illustration (légère !), évitez les format flash trop long aussi...
    • une navigation globale : mettre des liens comme "Jouer" (lien forum), "créer son personnage" (lien présentation, ou règle des présentations), "FAQ" (la FAQ du forum ou un topic de questions/suggestions ouvert aux invités), ou "Site" (lien de votre site si vous en avez un... ce qui pourra éventuellement être le cas à la fin de ce tuto^^) est une bonne idée pour déjà guider l'invité. Attention toutefois à ne mettre que l'essentiel. Si la navigation ne fait que le ralentir dans son parcours du forum il risque de fermer la page au lieu de cliquer sur le bouton inscription !



    Comment faire ?

    C'est très simple ! Nous allons commencer par créer une page qui ne sera pas vide, mais comportera déjà votre thème de forum ainsi que sa navigation. Seul le contenu aura disparu et donc vous serez libre d'y ajouter ce que vous voulez. Pour cela, entrez dans votre panneau d'administration et suivez ce trajet :

    PA > (onglet) Modules > HTML > Gestion des pages HTML


    Vous tombez donc sur un cadre pour le moment vide contenant seulement un bouton "Créer une nouvelle page HTML".

    Cliquez dessus pour créer votre page. Vous être désormais là dessus :



    A la première question "Voulez-vous utiliser le haut et le bas de page de votre forum ?" :
    • cochez oui : Cela vous permettra de garder l'apparence de votre forum (thème : bannière, navigation, pied de page si vous avez) tout en ayant une page "vide" que vous pourrez remplir.
    • cochez non> : Cela vous permet d'avoir une page blanche que vous devrez remplir vous-même, mais attention ! cette page vous devrez la coder en langage html complet !
    Je conseille donc dans un premier temps de mettre oui à cette question.

    A la seconde question "Utiliser cette page en tant que page d'accueil ?" : cochez oui. Cela vous permet d'afficher cette page en temps que page d'accueil de votre forum.

    Mettez ensuite un texte basique dans le cadre de saisie afin d'avoir un aperçu de sa mise en forme et de son positionnement. Voici le genre de texte servant à cela :

    Code:
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.

    Validez votre page.

    Revenez ensuite sur la page "Gestion des pages HTML" et vous observez ceci :


    Le fait qu'il y ait une couleur de fond dans la ligne de votre page signifie qu'elle est utilisée en temps que page d'accueil de votre forum, indication d'ailleurs précisée en bas de la liste des pages.

    Par la suite, ce symbole permet de modifier la page (Edition), ce symbole permet de supprimer la page, et ce symbole permet d'avoir un aperçu réel de la page.

    => Afficher une vidéo
    Pour afficher une vidéo sur cette page il vous faut tout d'abord choisir celle que vous souhaitez mettre. Ce sujet n'étant pas là pour vous apprendre à en réaliser une, nous partons du principe qu'elle est déjà faite et hébergée sur Youtube, Dailymotion ou autre plateforme du même genre. Affichez donc la page de votre vidéo et sélectionnez le code flash de la vidéo présent sous la forme :

    Code:
    <object width="480" height="385"><param name="movie" value="http://www.youtube.com...."></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com....." type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

    Placez simplement ce code sur votre page.

    Rappel : la balise
    Code:
    <center></center>
    permettent de centrer votre vidéo, placez le code de la vidéo entre les particules.


    => Faire une navigation
    Sachant qu'une navigation se trouvent déjà sur votre page si vous choisissez de garder la mise en forme de votre forum, ajouter des liens fera peut-être trop et risque de "perdre" le visiteur. Vous pouvez donc choisir d'afficher une page blanche et vierge et d'y mettre votre navigation. Dans ce cas, je vous conseille un moyen simple pour faire votre navigation :
    - créez une image comportant les liens voulus de sorte qu'ils soient "découpables"
    - découpez l'image en carré qui une fois côté à côté reconstitueront l'image
    - donnez à chaque partie devant être liée un lien vers la page souhaitée

    Autres possibilités :
    • utiliser le flash (faisable avec Imageready)
    • utiliser uniquement une image de base puis du mapping html (voir le cours sur le Site de Never-Utopia)

    => Autres idées ?
    • Afficher une carte type mappemonde qui représente votre contexte de jeu


    Dernière édition par Okhmhaka le Mar 27 Jan 2015 - 10:36, édité 2 fois


    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Lun 22 Mar 2010 - 13:58
    II/ Faire votre page de "règles du jeu" sur une page web

    Pourquoi ?

    Et bien tout simplement car votre règlement est "fixe", il ne demande généralement pas d'interaction entre membres, or un forum est fait de part sa logique seulement pour cela. Des règles de vie, de jeu ou autres sont donc mises à jour par le staff du forum, mais ces sujets là sont toujours verrouillés. Pourquoi donc ne pas les mettre sur une page entière ce qui permettra :
    • une meilleure visibilité et donc une lecture agréable puisque la largeur du texte n'est pas "mangé" par la colonne de l'avatar du membre postant
    • d'avantage de possibilité de mise en page avec le tout plus aéré
    • une page moins longue et donc une possibilité plus simple de faire tout le règlement sur une même pas et ainsi épargner les membres ayant une connexion lente de devoir afficher plusieurs pages pour avoir toutes les parties du règlement.

    Pour faire cela, il nous faut créer une page web, comme pour la partie précédente. Je rapelle les étape de cette création :

    PA > (onglet) Modules > HTML > Gestion des pages HTML


    Cliquez sur "Créer une nouvelle page HTML".

    => Voulez-vous utiliser le haut et le bas de page de votre forum ? oui
    => Utiliser cette page en tant que page d'accueil ? non

    Validez

    Si votre règlement était déjà écris vous n'avez qu'à faire un copier coller, attention tout de même à certains problèmes de mise en page qu'il vous faudra peut-être corriger.
    En cliquant sur l'icone vous pourrez avoir l'éditeur html qui vous permettra de mettre facilement votre texte en forme. Pour ceux ayant quelques bases en html je vous conseille de faire la mise en forme à la main puisque des effets de style ne sont pas présents dans l'éditeur.

    Rappel des balises principales
    Code:
    <br /> = saut de ligne
    <b>Texte</b> = texte en gras
    <u>Texte</u> = texte souligné
    <i>Texte</i> = texte en italique
    <center>Paragraphe</center> = paragraphe centré
    <img src="adresse.jpg" /> = image
    <a href="adresse">Texte</a> = texte en lien
    <a href="adresse"><img src="adresse.jpg" /></a> = image-lien
    <h1>Titre</h1> = titre mis en forme de la même façon que vos titres sur le forum
    <h2>Titre</h2> = même chose, le h1 étant un titre plus "important" que h2
    <marquee>Texte ou image</marquee> = défilement d'un texte ou image


    Attention ! si vous laissez votre page ouverte trop longtemps dans le PA puis que vous validez vos changements, votre session aura pris fin et vous vous retrouverez sur la page d'accueil de votre panneau sans avoir vos changements d'effectués ! Il serait dommage d'avoir bossé une heure et de tout perdre d'un coup... Pensez donc à enregistrer régulièrement votre page quitte à la modifier un bon nombre de fois.



    Mettre le lien de la page dans la navigation
    Il faut ensuite penser à bien mettre le lien de cette page html quelque part bien en vue sur le forum afin que les membres puissent l'avoir très facilement à portée de clic... L'une des solution est donc de l'afficher directement dans la navigation de votre forum !
    Pour cela, allez dans :

    PA > (onglet) Affichage > Page d'Accueil > En-tête & navigation


    Vous avez à présent sous les yeux la liste des liens de votre navigation, et tout en bas de cette liste le bouton "Ajouter un menu personnalisé". Cliquez sur ce bouton pour créer un lien supplémentaire dans votre barre de navigation.
    On vous demande :

    Menu : nom de ce menu
    Image : adresse de l'image de ce lien (non obligatoire)
    Texte : texte du lien, du titre ou lien alternatif de ce menu
    URL de redirection : le lien de la page voulue

    Permissions : sélectionnez qui peut voir ce lien
    Affichage : cochez si vous souhaitez que la page s'ouvre dans un nouvel onglet.



    Le lien de votre page html fraichement crée se trouve dans "Gestion des pages html", dans votre liste de page. Copiez simplement ce lien pour le mettre dans votre barre de navigation.




    Autres solutions ?
    • mettre le lien sur la page d'accueil de votre forum
    • mettre le lien dans la description de la catégorie de présentation des membres/joueurs (par exemple)
    • mettre le lien dans les wigets (voir le sujet "créer des wigets" dans ce forum pour plus d'info.)

    Pour aller plus loin, vous pouvez ajouter ainsi autant de page que vous le souhaitez du moment que vous trouvez comment les liens sur la page d'accueil de votre forum, afin par exemple d'afficher la map, des races, les objets ou les armes disponibles pour un RPG par exemple, mais également beaucoup d'autres choses !


    Dernière édition par Okhmhaka le Mar 27 Jan 2015 - 10:39, édité 2 fois


    FémininAge : 18Message(s) : 326

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    Nyan-cat
    le Sam 11 Aoû 2012 - 8:13
    merci *-*


    MasculinAge : 27Message(s) : 194
    Hayate747
    le Dim 7 Oct 2012 - 15:59
    Merci Razz
    MasculinAge : 24Message(s) : 26
    sangoku46
    le Lun 25 Fév 2013 - 14:52
    Merci
    FémininAge : 21Message(s) : 34
    Reeta
    le Mer 6 Mar 2013 - 20:39
    Merci !
    FémininAge : 28Message(s) : 30
    Kânon
    le Lun 24 Juin 2013 - 18:34
    Merci du partage
    FémininAge : 16Message(s) : 64
    Faucon
    le Sam 3 Aoû 2013 - 15:20
    Merci !
    MasculinAge : 25Message(s) : 63
    teck
    le Jeu 21 Nov 2013 - 10:11
    merci beaucoup


    FémininAge : 20Message(s) : 57

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Light Anonymous
    le Mer 15 Oct 2014 - 16:21
    Miiiiiiiiciiiiiiii
    FémininAge : 27Message(s) : 134
    hirondelle
    le Ven 24 Oct 2014 - 21:21
    Merci beaucoup ♥
    FémininAge : 27Message(s) : 134
    hirondelle
    le Mer 5 Nov 2014 - 21:02
    merci ♥
    FémininAge : 18Message(s) : 119

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pineapples
    le Mer 22 Juil 2015 - 22:20
    Merci !
    Contenu sponsorisé
    Aujourd'hui à 5:39

      La date/heure actuelle est Sam 3 Déc 2016 - 5:39