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.


    Mission #9 - les catégories, c'est du gâteau [ TOUS niveaux ]

    Partagez
    avatar
    Youp
    FémininAge : 22Messages : 579

    le Mer 17 Aoû 2016 - 0:31

    Oyé oyé !
    Tentons aujourd'hui de dédiaboliser nos chères catégories de forumactif ou, si l'on en est familier, d'atteindre la paroxysme de l'originalité (oui oui rien que ça, visons haut les amis). Cette mission s'adresse à TOUS, mais vraiment, vraiment: à TOUS. A TOUS. Je m'explique. A travers différents exercices (trois à l'heure actuelle, si vous avez des idées, n'hésitez pas à m'envoyer un MP), quelque soit votre niveau, vous pouvez participer.

    Ne t'enfuis pas jeune novice ! *Youp attrape jeune novice sauvage par le col* Je fournirais TOUS les tutoriels nécessaires à la réalisation de catégories, et je jure solennellement de la facilité de ces tutoriels. En effet ils n'utilisent pas de tableaux, tout est placé en unité de longueur (pixel généralement, pourcentage pourquoi pas). C'est donc plutôt facile. De plus, je vais aussi répertorier tout ce qui fait office de "détails" (les tutos sur les animations typiquement, ou celui sur l'ajout de l'avatar du membre), pour pouvoir atteindre ce que tu souhaites réellement. Le gros avantage d'une mission est que tu n'es pas tenu à l'anonymat des défis, tu peux donc poster dans "problème avec mon code" ou à la suite afin que l'on puisse t'aiguiller (et c'est même mieux <3 ). T'aiguiller, oui, pas te mâcher le boulot ! Le but est réellement que tu progresses et que finalement, tu réalises la facilité de la chose, pour peut-être t'essayer à plus compliqué, qui sait ?! Les exercices 1 et 2 seront tout à fait dans tes cordes héhé, et si l'envie t'en prends, n'hésite pas à participer à l'exercice 3. N'hésite pas à poser des questions si tu n'as pas compris quelque chose dans les tutos fournis !

    Et toi qui connaît quelques arcanes secrets du codage (ou qui a déjà lu tous ses tutos mwaha), ne tourne pas les talons ! L'exercice 3 demande de meilleurs connaissances car il s'agit en fait de déconstruire complètement la structure basique de forumactif, d'aller vers le plus originale, le plus foufou pourquoi pas! La participation de Palcopie au défi
    "repenser le design des forums" m'a trèèèèès fortement inspiré cet exercice. Tu peux aussi participer aux deux autres exercices, revoir les bases ne fait pas de mal et le deuxième porte plutôt sur la capacité à harmoniser, à coder en fonction d'un design.

    Exercice 1 - Pour commencer, exercice libre
    En bref : Zouuuu, il est temps de créer ses propres catégories à l'aide de tutoriels et pour commencer, d'un petit schéma. L'exercice est sous spoiler à la suite :

    Exercice 1:
    Etape 1- Réfléxion
    Okhmaka avait délivré un merveilleux conseil qui aide énormément: avant de coder, réfléchissez à la structure, au design de ce que vous avez en tête. Le codage en sera plus aisé car vous saurez directement comment vous souhaitez agencer les choses. Je vous conseille de faire un schéma (sur du papier c'est très bien), ou encore, si vous êtes familier avec un logiciel de graphisme, de faire une maquette complète (très utile pour donner la taille exacte des éléments,mettre le code des couleurs etc). Ce serait sympa de poster ce schéma à la suite, ainsi vos posts futurs montreront l'évolution de votre codage et nous arriverons mieux à vous aiguiller.


    Etape 2- la base
    Il est temps de réaliser la "base", ce que j'entends par ce mot est: l'espace dans lequel nous allons agencer les choses. Si vous êtes férus de métaphores, la "base" est le terrain vierge sur lequel vous allez construire votre maison. Vous ne devez pas le dépasser, cela empièterait sur le territoire d'un voisin. Okhmaka a réalisé un tuto géniallissime à ce sujet, il enlève tous les tableaux et finalement cela simplifie énormément la chose.  Vous n'êtes pas du tout obligé de créer deux colonnes, vous pouvez justement mettre une largeur suffisante pour qu'il n'y en ait qu'une.

    Etape 3- Agencement des éléments dans la base
    Là aussi, la suite du tuto d'Okhmaka est très pratique ! Pas de tableaux, on place tous à coup de "margin" (les marges extérieurs d'un élément, les padding étant les marges intérieures)

    Etape 4- Les détails, petites fioritures en plus
    Tout d'abord, je vous conseille de lire ce tuto afin de vous familiariser brièvement avec toutes les propriétés, et donc de pouvoir mieux réaliser ce que vous souhaitez . Par exemple, si vous souhaitez mettre un dégradé, une ombre porté, ce tuto peut vous aider.

    Vous souhaitez utiliser des polices différentes ? Allez faire un tour sur google font, trouver la police qui fait battre votre coeur, puis ajouter une ligne de cette forme (que vous trouvez en cliquant sur quick use de la police en question) :
    Code:
    <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    Vous devez l'ajouter à votre template overall_header, juste après la balise < head > qui se trouve au début du template.

    Ensuite, il y'a certains éléments que vous souhaitez intégrer mais qui ne sont pas fournies dans le tuto d'Okhmaka ?
    Pour l'avatar du dernier posteur, voici un tuto de Shadow sur le forum des forums.
    Je renflouerais certainement cette partie mais je ne vois pas, à l'heure actuelle (avec mon cerveau fatigué), ce qui pourrait manquer. N'hésitez pas à me faire part de vos besoins en la matière !


    Etape 4- Les détails, les animations
    Un super tuto d'Aeden explique bien le principe des animations  . Si vous l'associez à votre connaissance de différentes propriétés, vous pourrez réaliser de petites animations sympathiques et toutes simples ! (comme le fait d'espacer le texte au survol, de changer de couleur etc... )

    Exercice 2 - réaliser des catégories selon un thème pré-existant, harmoniser son design
    En bref: s'appuyer sur un design de base pour créer des catégories qui s'harmonisent bien avec lui. Des images diverses sont fournies !


    Exercice 2:
    Pour cet exercice, vous aurez besoin d'un forum test vierge en PHBB2 . Je vais vous fournir le lien d'une bannière, de différentes images pouvant servir au "no new", "new", "lock" ou encore d'images de catégories, ainsi que du CSS "rudimentaire" à placer dans la feuille de style de votre forum test (affichage ->couleur->feuille de style css). A vous alors d'essayer de créer les catégories les plus en accord avec le thème ! (ou l'idée que vous vous en faites) Vous êtes donc libres mais vous faites aussi face à une exigence héhé. L'image du thème de base est juste au dessus. Vous pouvez modifier les couleurs déjà pré-établies par mes soins.


    Etape 1- Réfléxion
    Okhmaka avait délivré un merveilleux conseil qui aide énormément: avant de coder, réfléchissez à la structure, au design de ce que vous avez en tête. Le codage en sera plus aisé car vous saurez directement comment vous souhaitez agencer les choses. Je vous conseille de faire un schéma (sur du papier c'est très bien), ou encore, si vous êtes familier avec un logiciel de graphisme, de faire une maquette (très utile pour donner la taille exacte des éléments,mettre le code des couleurs etc).

    Etape 2- A vos codes !
    Vous pouvez vous aider des tutoriels de l'exercice 1 bien sûr ^^

    La base, images, couleurs et préférences:
    La bannière ou "logo du forum" dans Gestion des images:
    Code:
    http://zupimages.net/up/16/32/gbox.png

    Dans affichage > gestion des couleurs > deux couleurs ont été modifiées dans couleurs de fond. Il s'agit de : (fond de page en #EBDEC5 et couleur intérieur du cadre du forum en #D2EEF0 )

    Les préférences
    Dans Général > forum > configuration > structure des pages, mettez un nombre plutôt qu'un pourcentage. J'ai mis 600 personnellement. Comme ceci:


    Dans affichage > page d'accueil > structure et hiérarchie, choisissez ce que vous préférez mais généralement, les forums se tournent vers "séparer les catégories sur l'index" en "moyen", comme ceci :


    Dans affichage> page d'accueil > En-tête & Navigation, sélectionner la position du logo centré. Comme ceci :


    La base, le css rudimentaire et une template modifiée:


    Une template a été modifié afin de mettre la barre de navigation en haut et rajouter une police (le link...etc après la balise head, au tout début). Libre à vous d'en ajouter d'autres bien sûr ! Dans Affichage > template > overall_header, remplacez tout par ceci :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
    <head>

    <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

       <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
       <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
       <meta http-equiv="content-script-type" content="text/javascript" />
       <meta http-equiv="content-style-type" content="text/css" />
       <!-- BEGIN switch_compat_meta -->
       <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
       <!-- END switch_compat_meta -->
       <!-- BEGIN switch_canonical_url -->
       <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
       <!-- END switch_canonical_url -->
       {META_FAVICO}
       {META}
       {META_FB_LIKE}
       <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
       {T_HEAD_STYLESHEET}
       {CSS}
       <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
       <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
       <script src="{JQUERY_PATH}" type="text/javascript"></script>
       <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

       <!-- BEGIN switch_fb_login -->
       <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
       <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
       <!-- END switch_fb_login -->

       <!-- BEGIN switch_ticker -->
       <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
       <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
       <!-- END switch_ticker -->

       <!-- BEGIN switch_ticker_new -->
       <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
       <script type="text/javascript">//<![CDATA[
          /* Definir le sens de direction en fonction du panneau admin */
          var tickerDirParam = "{switch_ticker.DIRECTION}";
          var slid_vert = false;
          var auto_dir = 'next';
          var h_perso = parseInt({switch_ticker.HEIGHT});

          switch( tickerDirParam )
          {
             case 'top' :
                slid_vert = true;
                break;

             case 'left':
                break;

             case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;

             case 'right':
                auto_dir = 'prev';
                break;

             default:
                slid_vert = true;
          }

          $(document).ready(function() {
             var w_cont = $('#fa_ticker_container').width();

             if (w_cont > 0)
             {
                $('#fa_ticker_container').width(w_cont);

                /* Affichage de la liste */
                $('#fa_ticker_content').css('display','block');

                /* Calcul des dimensions du conteneur et des elements */
                var width_max = $('ul#fa_ticker_content').width();
                var width_item = Math.floor(width_max / {switch_ticker.SIZE});
                var height_max = h_perso;

                /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
                $('ul#fa_ticker_content li').each( function () {
                   if ($(this).height() > height_max)
                   {
                      height_max = $(this).height();
                   }
                } );

                /* Redimensionnement des elements et des images trop larges */
                $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
                   if ($(this).width() > width_item)
                   {
                   var ratio      = $(this).width() / width_item;
                   var new_height = Math.round($(this).height() / ratio);
                   $(this).height(new_height).width(width_item);
                   }
                });

                /* Redimensionnement et centrage du conteneur en mode vertical */
                if (slid_vert)
                {
                   $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                }

                /* Initialisation du caroussel */
                $('#fa_ticker_content').jcarousel({
                      vertical: slid_vert,
                   wrap: 'circular',
                   auto: {switch_ticker.STOP_TIME},
                   auto_direction: auto_dir,
                scroll: 1,
                size: {switch_ticker.SIZE},
                height_max: height_max,
                animation: {switch_ticker.SPEED}
                });
             }
             else
             {
                $('ul#fa_ticker_content li:not(:first)').css('display','none');
                $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
             }
          });
       //]]>
       </script>
       <!-- END switch_ticker_new -->

       <script type="text/javascript">//<![CDATA[
       $(document).ready(function(){
          <!-- BEGIN switch_enable_pm_popup -->
             pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
             pm.focus();
          <!-- END switch_enable_pm_popup -->
          <!-- BEGIN switch_report_popup -->
             report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
             report.focus();
          <!-- END switch_report_popup -->
          <!-- BEGIN switch_ticker -->
             ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
          <!-- END switch_ticker -->
       });

       <!-- BEGIN switch_login_popup -->
          var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
       <!-- END switch_login_popup -->

       <!-- BEGIN switch_login_popup -->
       $(document).ready( function() {
          $(window).resize(function() {
             var windowWidth = document.documentElement.clientWidth;
             var popupWidth = $("#login_popup").width();
             var mypopup = $("#login_popup");

             $("#login_popup").css({
             "left": windowWidth/2 - popupWidth/2
                });
          });
       });
       <!-- END switch_login_popup -->
       //]]>
       </script>
       {GREETING_POPUP}
       <!-- BEGIN switch_ticker_new -->
       <style>
       .jcarousel-skin-tango .jcarousel-item {
          text-align:center;
          width: 10px;
       }

       .jcarousel-skin-tango .jcarousel-item-horizontal {
          margin-right: {switch_ticker.SPACING}px;
       }

       .jcarousel-skin-tango .jcarousel-item-vertical {
          margin-bottom: {switch_ticker.SPACING}px;
       }
       </style>
       <!-- END switch_ticker_new -->
       {HOSTING_JS}
       <!-- BEGIN google_analytics_code -->
       <script type="text/javascript">
       //<![CDATA[
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
       //]]>
       </script>
       <!-- END google_analytics_code -->
    </head>
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
      
      
      
      <div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>
      
      
      
      
      
      
      <!-- BEGIN hitskin_preview -->
       <div id="hitskin_preview" style="display: block;">
          <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
          <div class="content">
             <p>
                {hitskin_preview.L_THEME_SITE_PREVIEW}
                <br />
                <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
             </p>
          </div>
       </div>
       <!-- END hitskin_preview -->

       <!-- BEGIN switch_login_popup -->
       <div id="login_popup">
          <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
             <tr height="25">
                <td class="catLeft">
                   <span class="genmed module-title">{SITENAME}</span>
                </td>
             </tr>
             <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
                <td class="row1" align="left" valign="top">
                   <div id="login_popup_buttons">
                      <form action="{S_LOGIN_ACTION}" method="get">
                         <input type="submit" class="mainoption" value="{L_LOGIN}" />
                         <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                         <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                      </form>
                   </div>
                   <span class="genmed">{LOGIN_POPUP_MSG}</span>
                </td>
             </tr>
          </table>
       </div>
       <!-- END switch_login_popup -->

       <a name="top"></a>
       {JAVASCRIPT}

       <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
          <tr>
             <td class="bodyline">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                   <tr>
                      <!-- BEGIN switch_logo_left -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_left -->
                      <td align="center" width="100%" valign="middle">
                         <!-- BEGIN switch_logo_center -->
                         <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                         <br />
                         <!-- END switch_logo_center -->
                         <div class="maintitle">{MAIN_SITENAME}</div>
                         <br />
                         <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                      </td>
                      <!-- BEGIN switch_logo_right -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_right -->
                   </tr>
                </table>


                <div style="clear: both;"></div>

                <!-- BEGIN switch_ticker_new -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                      <tr>
                         <td {CLASS_TABLE_TYPE} align="left" class="row1">
                            <div id="fa_ticker_container">
                               <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                                  <!-- BEGIN ticker_row -->
                                  <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                  <!-- END ticker_row -->
                               </ul>
                            </div>
                         </td>
                      </tr>
                   </table>
                </div>
                <!-- END switch_ticker_new -->

                <!-- BEGIN switch_ticker -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                      <tr>
                         <td {CLASS_TABLE_TYPE} align="left" class="row1">
                            <div id="fa_ticker_container">
                               <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                                  <div class="fa_ticker_content">
                                     <!-- BEGIN ticker_row -->
                                     <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                     <!-- END ticker_row -->
                                  </div>
                               </div>
                            </div>
                         </td>
                      </tr>
                   </table>
                </div>
                <!-- END switch_ticker -->

                <div id="page-body">
                   <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                      <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                         <tbody>
                            <tr>
                               <td valign="top" width="{C1SIZE}">
                                  <div id="{ID_LEFT}">
                                     <!-- BEGIN giefmod_index1 -->
                                     {giefmod_index1.MODVAR}
                                        <!-- BEGIN saut -->
                                        <div style="height:{SPACE_ROW}px"></div>
                                        <!-- END saut -->
                                     <!-- END giefmod_index1 -->
                                  </div>
                               </td>
                               <td valign="top" width="100%">
    <!-- BEGIN html_validation -->
                               </td>
                            </tr>
                         </tbody>
                      </table>
                   </div>
                </div>
             </td>
          </tr>
       </table>
    </body>
    </html>
    <!-- END html_validation -->

    Et ajouter ceci en CSS pour personnaliser la barre de navigation (affichage > couleurs > feuille de style css ):

    Code:
    .bodyline {
    padding-right:0px; padding-left: 0px; padding-top:40px; /* enlève les marges à la bannière */
    }

    #navigation {
      position: absolute; /* place la barre nav en haut */
      top: 0px;
      z-index: 999;
      width: 100%;
      background-color: #d7ad7c;
      text-align: center;
      border-bottom: 2px solid white; /* bordure de la barre nav si vous voulez la changer */
      margin-top: 0px;
      padding: 8px;
    }

    #navigation img {
    display: none; /* un moyen de flemmard de ne pas afficher les images via css, img etant pour cibler les images dans navigation */
    }

    #navigation a {
      font-size: 17px; /* le a permet de cibler uniquement les liens dans navigation */
      color: white;
      text-decoration: none;
      font-family: 'Indie Flower', cursive;
    }

    Les images fournies pour les catégories:

    Ces images sont de diverses tailles, à vous de les rétrécir avec un logiciel mais, beaucoup mieux: de les ajuster via CSS !!!!! Si jamais vous désirez mon psd de photoshop de la bannière pour avoir plus de ressources, envoyez moi un MP. Vous pouvez aussi utiliser d'autres images bien entendu. Voilà pour le moment les images que je fournis :

















    Exercice 3 - Rendre méconnue la structure de base
    Vous avez compris le but: abats la structure de base de forumactif, ouvrez la porte à toutes vos envies les plus folles ! Ce qui serait pas mal, c'est de vous poser un objectif en terme de difficultés, d'essayer de poser par écrits vos questionnements sur le sujet, les difficultés que vous rencontrez, en somme, le cheminement de votre codage (mais vous n'êtes pas du tout obligé) (ça peut juste permettre à d'autres de se questionner avec vous quand à votre but, de progresser ensemble vers une connaissance encore plus grande) (MWAHAHAHAHA oui la connaissance mérite un rire diabolique)

    Exemple de la participation de Palcopie au défi "repenser le design des forums" :





    avatar
    Cruelly
    FémininAge : 24Messages : 2547

    le Mer 17 Aoû 2016 - 10:06

    Coucou Youp ! Very Happy Super mission que tu offre ^^. J'ai pris plaisir à la faire *enfaîte j'ai fait seulement la première pour le moment mais bon xD* .

    Alors voici mon superbe, magnifique et sexy schéma. Et oui c'est moche mais bon j'en fait jamais mais comme tu en parlais dans le texte de la mission je me suis dit que j'allais en faire un ^^. Comme le tuto d'Okh parlais des cats sur deux colonnes, je me suis dit que j'allais les réaliser comme lui. J'aime beaucoup ce genre de catégorie alors, pourquoi pas ^^.

    Pour être tout à fait honnête, je n'ai pas changer grand chose du codage d'origine. J'ai rajouter certaines choses et modifier les dimensions pour qu'elle soit moins longues. J'ai plus travailler coté graphisme pour la modification ^^. Que voulez-vous une bleue se cache sous se orange :coeur: .

    Bref voici un screen de mon résultat.

    Vous pouvez les voir action sur un de mes forum test.


    Dernière édition par Cruelly le Jeu 18 Aoû 2016 - 16:43, édité 1 fois




    avatar
    Youp
    FémininAge : 22Messages : 579

    le Jeu 18 Aoû 2016 - 2:29

    Heureuse que cette mission te plaise ! Ta création est sublime, on sent bien la patte d'une bleu Wink tu as vu comment c'est simple avec les tutos d okh ? N'hésite pas à participer aux autres exercices si l'envie t'en prend ! Et si tu as des questions, ou tout autre chose, je suis à ta disposition ^^



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Mar 23 Aoû 2016 - 15:48

    Wesh ! Very Happy

    Si je peux me permettre Cruelly, pense peut-être à être plus précise dans tes maquettes. Je pense que tu as lu le tuto d'Okh et par ailleurs que tu t'es rendue compte que la maquette est très utile pour coder. Cependant, plus elle est précise, mieux c'est. C'est plus rapide pour coder, et t'as pas besoin de changer sans arrêt de place tes éléments. Après faut le temps que ça vienne ^^

    Néanmoins, j'adore ta création ! C'est vraiment superbement fait ! Je n'aime pas tant les forums sur deux colonnes mais je trouve que c'est bien géré ici :)


    Je vais essayer de faire l'exo 1 et 3 en même temps :face:



    avatar
    Rozenbrez
    FémininAge : 26Messages : 1361

    le Mar 23 Aoû 2016 - 16:48

    Coucoute !!

    Voilà une mission intéressante. *-* Je viens vous faire part de ce que je suis en train de coder pour la reprise de L.C.D :

    - La maquette : J'étais partie sur une base d'avoir les forums sur deux colonnes, une petite image descriptive, les sous-forums bien rangé et un effet "bulle", même si les forums ne sont pas entièrement sphérique. Pour en avoir vue des complètement sphérique, je trouve que ça fait soit trop petit, soit trop gros. Et en fin un fond marin pour plus d'immersion.

    - Le rendu final : Finalement j'ai mis les forums sur trois colonnes pour plus d'ergonomie au niveau de la structure, en faite sur deux colonnes la structure faisait très long. Pareillement, je trouvais les images descriptive trop petite, alors j'ai opté pour le tuto permettant de placer la description derrière une image qui se dévoile au passage de la souris.

    Je n'ai pas encore tester l’exercice deux et il me tente bien tien. :hum:

    avatar
    Nemalus
    FémininAge : 19Messages : 358

    le Lun 29 Aoû 2016 - 9:07

    Je me suis aussi essayé à l'exercie :

    - La maquette - Alors je suis partie sur des catégories de ce genre, pas trop compliquées à réaliser parce que j'ai toujours la flemme de faire des trucs compliqués même si c'est joli mais le mieux est l'ennemi du bien. Bref je me suis dit que ça pouvait être sympa de faire un truc de genre là.

    - Le résultat final - on peut voir que le résultat final est ressemblant au schéma mais différent au niveau des couleurs et des polices d'écriture, là encore c'est par flemme mais c'était aussi pour les adapter au design actuel d'un de mes forums.

    Allez je passe maintenant à l'exercice 2 !
    avatar
    Shoki
    FémininAge : 16Messages : 1310

    le Mar 30 Aoû 2016 - 18:20

    Bouh !

    Moi aussi, j'ai tenté un truc o/ Bon, autant prévenir de suite, avec moi, c'est toujours plus joli sur le papier xD

    Maquette - C'est ma première maquette, me tapez pas si c'est moche ;-; J'ai fait deux forums ici : un où le forum est "au repos" et l'autre avec différents survols. N'aimant pas vraiment les catégories sur plusieurs colonnes (même si parfois c'est plus pratique, mais je trouve que ça laisse moins de liberté), j'ai préféré faire des catégories "classiques", sur une ligne donc. Je me suis rendue compte au dernier moment que j'avais oublié l'image new/no new/lock xD Du coup, bah... elle y est pas sur la maquette.

    Aperçu/Rendu final kitu - Bon, j'avoue être UN PEU partie sur autre chose, mais je galérai tellement avec mon idée de départ... (je suis jusqu'à aller regarder quelques codes pour m'aider, c'est pour dire) xD J'ai donc réussi à rajouter la petite icône new/no new/lock à l'endroit du dernier message, tout simplement parce qu'il me restait un peu de place o/ L'effet sur le titre du forum est toujours présent. Je sais que l'heure devait se trouver sous le pseudo du posteur, mais j'estime avoir assez galéré comme ça pour en plus tenter un autre truc compliqué xD Je pense que je vais refaire un peu ces catés ultérieurement pour les adapter selon mes goûts xD Et on ne juge pas mes descriptions ainsi que mes noms de catégories è_é

    Je passerai à l'exercice 2 sous peu (c'est à dire dès que je trouve un truc cool à faire), je me demande juste si c'est obligatoire d'être sous PhPBB2 pour cet exo, j'ai envie de le faire sous PhPBB3 en fait (oui, explorer les autres versions me fait même pas peur) ><





    avatar
    Youp
    FémininAge : 22Messages : 579

    le Mar 30 Aoû 2016 - 20:46

    Roz' -> Superbes catégories Wink Tu as bien fait de les mettre sur trois colonnes, ça laisse moins de vide à mon avis. Je trouve juste que la partie des sous forums est un peu grande en hauteur, ça laisse du vide justement. Sinon c'est extra-chouette !

    Nemalus -> J'adore tes catégories ! Justement, je trouve que le "trop compliqué" est très souvent l'ennemi du beau, à trop vouloir en rajouter, ça finit par être trop chargé. Je trouve aussi que les nouvelles couleurs mettent encore plus en valeur tes catégories.

    Shoki -> Vraiment super-chouette ce que tu as fais ! Je te propose mon aide si tu veux que ton codage actuel ressemble encore d'avantage à ta maquette. Tu voulais une animation au survol n'est ce pas ? Je crois savoir comment on pourrait faire ça, avec des sélecteurs ! En gros, tu mets tes trois "rectangles" en display:none au repos, ensuite tu indiques que lorsqu'on survole le gros bloc avec l'image, ceux ci ne sont pas en display none (tu mets tes valeurs actuelles). Cela donnerait un truc comme ça :
    Code:
    .gros_bloc:hover .rectangle1
     (...)
    Je ne sais pas si j'arrive à me faire comprendre Razz En tout cas je suis opé pour t'aider à avoir ton résultat voulu, c'est le but de cette mission ^^ Si tu veux bien me fournir tes codes (en hide si tu veux), je pourrais t'aider plus efficacement en tentant des choses de mon côté
    PS: tes noms de sous forums m'ont bien fait rire Razz
    PPS: tu t'es aidé d'un tuto pour les mettre un en dessous de l'autre ?
    PPSS: Coder en phbb3 ? Le problème est que j'ai modifié une template de phbb2 pour avoir la barre de navigation en haut, ça risque donc de ne pas fonctionner sur phbb3 mais si tu arrives à ce résultat sur phbb3 ou que tu ne veux pas de barre nav en haut du forum, tu peux tout à fait coder sur une autre version ^^


    Merci d'avoir participé :love:



    avatar
    Shoki
    FémininAge : 16Messages : 1310

    le Mer 31 Aoû 2016 - 10:53

    Je ne pense pas qu'il y ai besoin de sélecteurs ou de display: none;, je pense qu'on peut jouer sur l'opacité et les z-index :3 Je te donne les codes sous hide :


    Pour info, les images ont la modeste taille de 830*170 (Bien sûr que c'est petit ene) ~

    PPS : Yep, je me suis aidée du tutoriel de Taktiik pour mettre les sous-forums en retour à la ligne ~
    PPPS : ne t'inquiète pas pour l'adaptation, je saurais me débrouiller, j'ai déjà un peu codé en PhPBB3, et des catés en prime x3





    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Jeu 1 Sep 2016 - 20:55

    Heey ! J'ai vu cette mission et je la trouve super intéressante ! En particulier l'exercice 3, c'est drôle il est un peu dans la continuité de celui de graphisme sur repenser le design des forums, là mais voilà, c'est vraiment un truc qui m'intéresse et sur lequel j'essaye de m'appliquer quand je code... Parce que la structure de base de FA, hé bah elle est pas forcément la plus adaptée à l'usage qu'on en fait, surtout quand c'est du rpg je trouve.

    Et du coup je voulais juste montrer un truc un peu vieux que j'avais fait avec Palcopie sur la base de " bah puisque sur un forum rpg on joue dans des lieux, pourquoi les présenter sous forme de liste ? "
    On voit parfois des forums particulièrement complexes qui mettent en addition une carte de leur monde et du coup on s'est dit ALLEEEEEZ et on a transformé nos catégories en 4 cartes, à des échelles différentes, qui permettent d'accéder aux forums.
    Vous pouvez les voir ici (désolée c'est un forum actif, mais le forum test est en chantier pour le moment...) http://leschroniquesdesumer.forumactif.org/

    Mais bon ça a quand même quelques inconvénients, notamment celui de ne plus trop pouvoir utiliser de sous-forums (on les a transformés en forums tout court pour qu'ils apparaissent direct sur la carte). Mais au moins on a une meilleure vision de l'espace du jeu. Par contre on a été obligées d'utiliser unue carte aussi pour la partie hors RPG, ce qui est assez déroutant au début. On travaille à une version plus explicite d'ailleurs !

    Et comme c'est pas très pratique à utiliser sur un appareil tactile on a laissé une interface pus normale en-dessous (c'est le truc où c'est marqué "interface pour mobile", il faut cliquer dessus) qui est en fait un doublon de nos catégories et qui alourdit pas mal la page aussi...

    Voilà, hésitez pas si vous avez des commentaires surtout, parce qu'on travaille encore dessus !

    Désolée pour tout ce blabla >>



    Alumine
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1361

    le Mer 5 Oct 2016 - 17:37

    Hey Alumine.

    On discutait de ta structure sur la CB il n'y a pas si longtemps. :) Je trouve ça hyper chouette et plus immersif pour les rpg. Mais pour ceux n'en ayant pas l'habitude, c'est trèèèèès déroutant au début. xD

    Pour le fait d'avoir mis les parties hors-rpg en map aussi, tu as le forum 21 TWENTY-ONE qui a réussi, je ne sais comment, à garder la structure initiale pour les zones hors-rp et une map pour les zones rp. Pourquoi tu n'irais pas leur demander comment ils ont fait ? :)

    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Mer 5 Oct 2016 - 19:08

    Il faut du JS à mon avis pour réaliser deux structures différentes sur forumactif.




    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Mer 5 Oct 2016 - 21:00

    On peut réaliser des structures différentes en HTML / CSS avec le template index_box sans js :hudada:

    Je dévie un peu de la mission mais en gros on peut donner dans les templates à chacune de nos catégories un id unique.

    Je donne ici une explication rapide et peu détaillée, je comptais en faire un tuto il y a longtemps puis... J'ai eu la flemme :toto:

    Cet id correspond à celui qu'on peut retrouver sur l'URL avec le lien de la catégorie. Par exemple http://www.never-utopia.com/c29-discussions-entraides a comme id "c29" ^^
    Grâce à cela, ensuite il "suffit"de mettre un CSS spécifique à chacune (on utilise les sélecteurs CSS) et ainsi facilement les modifier séparément. (ou bien faire un sommaire vers chaque catégorie du forum :p)
    Que ce soit simplement pour changer la couleur, ou bien jouer avec la structure/le placement des éléments.
    Par contre, ça demande de réfléchir quand même, à comment on veut placer tel élément, quels positionnement on va utiliser en CSS, etc :)

    Cette variable c'est {catrow.tablehead.ID} qui ne peut s'utiliser que dans la boucle tablehead ^^ (il faut donc avoir les bonnes séparations de catégories dans le panneau d'admin)
    Par exemple, voici le template de base phpbb2 :
    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    On peut voir l'ouverture d'une balise table qui va entourer toute la catégorie.

    Je vais lui rajouter un id (je vais préfixer avec un texte de mon choix car j'en ai envie) :
    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table id="cate-{catrow.tablehead.ID}" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

    On peut le voir avec l'inspecteur d'élément ensuite, chaque catégorie a maintenant son propre id ^^
    Par exemple la catégorie "Discussions & entraides" aura dans son HTML : id="cate-c29"

    Voilà voilà, c'était une petite explication très rapide au cas où il y a des curieux (ce topic roxxe <3)

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Sam 8 Oct 2016 - 12:25

    +1 Nihil !
    En fait sur mon forum j'utilise qu'une seule structure de catégorie mais ça me permet de faire des choses très différentes, et même sans utiliser d'id pour chaque catégorie, juste avec des sélecteurs CSS3 du type .cat:nth-child(3) (pour la 3°catégorie) et ensuite toujours avec ce même type de sélecteurs je peux donner un style à chacun de mes forums dans chacune de mes catégories. Et j'ajoute même qu'on peut dédoubler ses catégories ; dans le template INDEX_BODY (en phpbb2) l'emplacement où est inclus le template INDEX_BOX est signalé par une variable {BOARD_INDEX}. Il suffit de la mettre une deuxième fois dans index_box, avec un autre id, pour la voir apparaître en double (du coup j'ai fait ça pour avoir un affichage alternatif de mes catégories, pour les gens un peu perdus justement; mes catégories s'affichent donc deux fois, très différemment. Une fois sous forme de carte, et une autre sous forme d'alignement de blocs un peu plus classique). J'admets que du coup mon forum fait très expérimental mais bon xD
    D'ailleurs je suis sûre qu'on pourrait se servir d'un dédoublement de catégories pour faire plein d'autres choses (même si là j'ai pas d'idées) enfin c'est à réfléchir quoi ^^



    Alumine
    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Nov 2017 - 16:45