Passer un niveau

Hey @Sieben ! Du coup après avoir discuté avec le staff, on t'accorde le 'Avancé ++" ! Tu as une super gestion du JS, les templates sont maîtrisés et y'a un fofo dans ceux que t'as montré qui est SUBLIME ! Du coup, je file t'installer tout ça et bravo !

Merci beaucoup !

Bonjour c'est moi

Niveau désiré: Avancé (à vous de me dire si c'est avec des ++ ou non ^^)
Les notions de ce niveau:

► pouvoir comprendre n'importe lequel des templates de FA car tu sais lire un templates, te repérer dedans, et via l'intuition des termes en anglais, comprendre ce à quoi se réfère les boucles/variables.
► toucher au JavaScript

Les exercices recommandés: /.
Liens/code de 3 exercices:

► Template "profile_view_body" (commande terminée) : https://www.epicode-entraide.com/t15794-codage-profil-pour-weat#320251
► Template "index_box" (commande terminée) : https://www.epicode-entraide.com/t15767-les-categories-de-ph#319712
► Template avec JS du QEEL sur mon forum test (je sais pas si c'est suffisant..)

Code:

{JAVASCRIPT}
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label> 
 <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label> 
 <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />

                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                </div>
                <!-- END switch_social_login -->
 </div>
 </form>
 <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 <span class="corners-bottom"><span></span></span></div>
 </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}
{BOARD_INDEX}


<!-- BEGIN disable_viewonline -->
  <div id="qeel_content">
    <!-- IMAGE --><img src="https://i.imgur.com/8mVaO63.png" id="qeel_img" />
    <!-- GROUPES --><div id="qeel_img_bottom"><div id="qeel_group"><div class="qeel_group_color"><a href="https://test-signature.forumsrpg.com/g3-etudiants?tt=1" target="_blank"><div id="qeel_group1" class="qeel_groups"></div></a> <a href="https://test-signature.forumsrpg.com/g4-professeurs?tt=1" target="_blank"><div id="qeel_group2" class="qeel_groups"></div></a> <a href="https://test-signature.forumsrpg.com/g5-personnel?tt=1" target="_blank"><div id="qeel_group3" class="qeel_groups"></div></a> <a href="https://test-signature.forumsrpg.com/g6-citoyens?tt=1" target="_blank"><div id="qeel_group4" class="qeel_groups"></div></a></div></div>
    <!-- STATISTIQUES --><div><div><div id="qeel_text"><div id="qeel_last_user">{NEWEST_USER}.</div> <div id="qeel_desc"><span id="qeel_total_msg">{TOTAL_POSTS}</span> <span id="qeel_total_users">{TOTAL_USERS}</span> <span id="qeel_total_users_online">{TOTAL_USERS_ONLINE}</span></div></div></div>
    <!-- EN LIGNE --><div id="qeel_online"><div id="qeel_users_online">▬ <b>En ligne</b> : <span id="LINEUS">{LOGGED_IN_USERS_LIST}</span></div> <div id="qeel_past_online">{L_CONNECTED_MEMBERS}</div></div></div></div>
   </div>
  

  <script type="text/javascript">
    document.getElementById('qeel_last_user').innerHTML=document.getElementById('qeel_last_user').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Bienvenue à : <br/>");

    document.getElementById('qeel_total_msg').innerHTML=document.getElementById('qeel_total_msg').innerHTML.replace(/Nos membres ont posté un total de/,"Nos habitants ont répondu à ");
    document.getElementById('qeel_total_msg').innerHTML=document.getElementById('qeel_total_msg').innerHTML.replace(/messages/,"lettres.");

    document.getElementById('qeel_total_users').innerHTML=document.getElementById('qeel_total_users').innerHTML.replace(/Nous avons/,"Actuellement, ils sont ");
    document.getElementById('qeel_total_users').innerHTML=document.getElementById('qeel_total_users').innerHTML.replace(/membre enregistré/,"habitant en ville, ");
    document.getElementById('qeel_total_users').innerHTML=document.getElementById('qeel_total_users').innerHTML.replace(/membres enregistrés/,"habitants en ville, ");

    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/Il y a en tout/,"dont ");
    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/::/,"Parmi eux : ");

    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/utilisateur en ligne/,"en balade.");
    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/utilisateurs en ligne/,"en balade.");

    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/Enregistré/,"hawaïen");
    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/Enregistrés/,"hawaïens");
    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/Invisible et/,"timide,");
    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/Invisibles et/,"timides,");
    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/Invité/,"étranger");
    document.getElementById('qeel_total_users_online').innerHTML=document.getElementById('qeel_total_users_online').innerHTML.replace(/Invités/,"étrangers");

    document.getElementById('LINEUS').innerHTML=document.getElementById('LINEUS').innerHTML.replace(/Utilisateurs enregistrés :/,"");
    
    document.getElementById('qeel_past_online').innerHTML=document.getElementById('qeel_past_online').innerHTML.replace(/Membres connectés au cours des 24 dernières heures/,"Les derniers a avoir mis le nez dehors");
  </script>

  <script type="text/javascript">

  </script>
<!-- END disable_viewonline -->

<br style="clear:both" />

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
 <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
 <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
 <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

Vos exercices répondent bien au niveau désiré ? J'espère, en tout cas, les commandes ont été validées donc, c'est un point positif non ?

Merci d'avance

Bonjour :)

Niveau désiré: Avancé ++
Les notions de ce niveau:
► pouvoir comprendre n'importe lequel des templates de FA car tu sais lire un templates, te repérer dedans, et via l'intuition des termes en anglais, comprendre ce à quoi se réfère les boucles/variables.
► toucher au JavaScript
Les exercices recommandés: aucun mentionné
Liens/code de 3 exercices: Voici un forum a moi qui date d'il y a plus d'un an maintenant ; https://marbhadh.forumsrpg.com/ Si nous étions trois professionnels du web dans le staff, cette version a pratiquement étée réalisée à 100% par mes soins. Autrement, j'étais spécialisé en hack de contournement vis-à-vis des endroits trop rigides dans les templates de FA. L'un des exemples les plus évidents sur la version live est sans doute l'affichage du profil. Ici, les autres versions https://marbhadh.forumsrpg.com/t764-les-precedents-designs-du-forum . Toutes les versions contenaient une animation CSS légère et les versions du cycle 0, 1 et 3 contenaient un effet de paralax dans le header au scroll de la souris. (si vous voulez un exemple de ce code en application, j'ai aussi utilisé un paralax pour une bannière d'un projet professionnel il y a 2 ans, https://uclouvain-2018.moodlemoot.fr/ ) Ces derniers temps, j'ai commencé à explorer le code simplifié au maximum pour les membres ayant du mal à comprendre comme cela fonctionne. Un exemple ici d'une fiche de présentation réalisée en aout : http://lostinthesea.forumactif.com/t20-modele-de-presentation#46 (le reste du design n'est pas à prendre en compte, c'est un travail qui est vraiment fait à l'arrache compte tenu du fait que je n'avais pas le temps de travailler sur un design complet, riche et à 100% original. Une nouvelle version de se forum est en cours de design. Sinon j'ai un projet en cours d'évolution dont les catégories ont déjà été codées ici : https://timecluster.forumactif.com/ . Elles ne sont pas entièrement finies car elles ne sont pas encore responsives et qu'on aimerait faire un système d'onglets plutôt que toutes les dérouler à la suite mais je n'ai pas eu le temps de me pencher là dessus pour le moment. Et si cela vous intéresse, voici mon site professionnel, bien qu'il aurait bien besoin d'être dépoussiéré un peu ;




Vos exercices répondent bien au niveau désiré ? Je pense que oui... Je pense que Marbhadh parle de lui-même pour ce qui est des templates, son profil étant un bel exemple de détournement de boucle FA à base de nth-child pour en extraire l'image et le nbr de messages et de points. Marbhadh comporte plusieurs tweak JS, au même titre que Pacific Blue. Si les exemples de JS ne sont pas suffisant pour vous car j'essaye d'en limiter l'utilisation pour des raisons de bande passante, je peux vous diriger vers un projet scolaire qui visait à repenser l'expérience d'onboarding de la webapp Slack. L'expérience n'est pas terminée à 100% mais elle a déjà le mérite d'afficher l'heure exacte et de changer dynamiquement du contenu en fonction de la conversation.

Coucou à vous, désolée du petit retard de réponse !

@Odyssea : Il y a maîtrise des templates ce qui est un atout non négligeable et tu arrives à te servir des script JS pour modifier des valeurs dans le QEEL donc le niveau Avancé + me semble parfait pour toi !

@NyxBanana : hanwmygawd Doctor Strange
Holy cow, s'il existait un niveau "dieu suprême" tu l'aurais eu haut la main /PAN
J'aime énormément ce que tu arrives à faire avec les templates, sachant que c'est toujours un peu tendu de modifier le profil_viewbody qui est assez complèxe en lui-même, donc chapeau ! Ton site est incroyable, tu maîtrises énormément de choses et à un très bon niveau en prime de ça ! Du coup, niveau Avancé ++ largement accepté !

Vos niveaux ont été ajoutés sur votre profil ~

Bonjour,

Niveau désiré: Avancé
Les notions de ce niveau:
► les sélecteurs {ici} et {là}

Les exercices recommandés:
Liens/code de 3 exercices:

Vos exercices répondent bien au niveau désiré ? Je pense que les 3 englobent bien les notions jusqu'à ce niveau.

Merci.

Coucou @djand !

C'est vraiment super chouette ce que tu fais ! Très sympa la fiche et tes exemples sur le site, j'aime beaucoup ** !
Seulement avant de t'accorder le niveau que tu souhaites, c'est possible de nous fournir un code en html/css sous balise (code & hide) ? Histoire de bien pouvoir évaluer ton niveau. ^^- (sur FA particulièrement, si tu as d'autres exemples que la fiche n'hésite pas à les fournir !)

Mercii

Coucou,

Voici les codes

J'ai vu avec le Staff, @djand, on t'accorde le niveau Intermédiaire + en vue du code que tu nous as proposé. Tu as l'air plus spécialisée dans les sites que pour FA (comme tu dis si tu es web-designer c'est normal), surtout en vue de la structure de ton code qui fait penser à une page HTML ou un code pour une iframe. ^^-

Un admin va te mettre ton nouveau niveau !
J'espère que tu viendras nous proposer de jolis codes.

Super merci

Bien le bonjour à vous

Je souhaiterai connaître mon niveau, par conséquent je passe par ici bien qu'en réalité je ne sache pas trop ce que je dois vraiment poster :D

Niveau désiré: Niveau débutant ++
Les notions de ce niveau: ► connaitre la structure d'une page HTML {ici}
► savoir se servir des iframes {ici}
► savoir se servir de l'overflow {là}
► la magie du hover {là}
Les exercices recommandés: ?
Liens/code de 3 exercices:
https://impedimenta-test.forumactif.org/t87-pub-partenariats (premier post, notre fiche de PUB que j'ai codé)
https://impedimenta-test.forumactif.org/t129-fiche-rp-2 & https://impedimenta-test.forumactif.org/t128-fiches-rps (fiches rps faites par mes soins)
Vos exercices répondent bien au niveau désiré ? Alors j'en sais vraiment rien je sais même pas à quel niveau je peux me situer xD donc j'attends votre verdict ? :D

merci par avance

Coucou @Arya
Avant qu'on puisse -ou non- t'accorder le niveau que tu souhaites, c'est possible de nous fournir un code en html/css sous balise (code & hide) ? Histoire de bien pouvoir évaluer ton niveau. Idéalement le code de ta fiche de pub

Coucou
Oui pas de soucis je m'excuse, je ne savais pas trop comment faire
Voici ma fiche html sous hide :


merci

Coucou !
Je suis assez perplexe concernant ton niveau, car dans les pré-requis du niveau débutant++ figure la connaissance et donc la maîtrise de la structure d'une page HTML ; or, le code que tu nous proposes là ne présente pas de structure HTML définie. Est-ce une erreur ?

Tu as des lacunes assez importantes concernant le positionnement : on évite autant que possible de sortir les éléments du flux ; ainsi, les positions relatives et absolues sont à utiliser avec parcimonie, uniquement lorsqu'on n'a pas le choix (fixer un élément dans un coin de la fiche, par exemple). Cette utilisation implique de connaître les éventuels bugs qui peuvent survenir : un height: auto peut être dangereux dans un bloc positionné en relatif, qui abriterait lui-même des blocs en absolus ; si son contenu change, tous les blocs enfants sont susceptibles de se déplacer en conséquence...

Le padding: 0, dans ta div .fichePUB me laisse également perplexe, il ne sert à rien en l'état
Je ne comprends pas non plus l'utilisation d'un background-position et d'un background-size sur une image ? Ces propriétés s'utilisent sur un bloc qui possède une image en tant que background, non pas sur un bloc dans lequel se trouve une image. o:

Tu donnes également une largeur à tes liens ("règlement", "contexte" etc) ce qui n'est pas possible pour un élément inline. Je vois que tu as essayé de forcer la valeur en usant d'un "!important", mais tu as ensuite ajouté un display: inline;

Pour moi, ton niveau est encore débutant, en effet, les notions d'un niveau débutant+ sont les suivantes :

Code:

► différencier le HTML du BBCode. Savoir comment s'écrit le HTML et le CSS et savoir à quoi ils servent.
► connaitre les principales balises HTML.
► connaitre les différences existantes entre id/class
► connaitre les différences existantes entre span/div.
► commencer à utiliser les propriétés-valeurs CSS les plus communes.

Je pense qu'il te faudrait persévérer dans les notions relatives aux balises HTML (très peu de balises sémantiques dans tes codes ; tu sembles, de plus, avoir quelques difficultés pour différencier une balise bloc d'une balise inline) Mais tu y es presque ! Je te conseille d'y aller par étapes : je vois que tu te lances dans des fiches complexes, ce qui fait que tu hésites sans doute sur la manière de positionner tes éléments : essaye de revenir à des fiches très simples, et à les coder le plus proprement possible, en utilisant les balises sémantiques !

Je reste à ta disposition si tu as des questions.

Coucou
Merci pour ton retour, ça fait un coup, mais j'aurais probablement en effet faire figurer les balises html ; je vais me servir de tous tes commentaires pour évoluer, à commencer par la forme de la page html, je vais tenter une prochaine fiche et je la proposerai ici :)
J'avoue que j'aurais peut-être dû donner un autre code car depuis j'ai en effet découvert le display et j'essaye de coder avec tout en me perfectionnant avec, je découvre sans cesse de nouvelles choses ; c'est grisant
Au final, j'ai voulu y aller un peu trop vite ;
à très bientôt pour de nouvelles pages html où j'essayerai d'éviter ces erreurs
merci pour les conseils et remarques je les note dans un coin de ma tête

Bonjour !
J'aime bien avoir un profil rempli, donc voila le formulaire. J'espère avoir rempli correctement, je n'ai pas tout compris à ces histoires d'exercices  

Niveau désiré: avancé +
Les notions de ce niveau:

• Comprendre comment s'organise un template de FA
  
• Maîtriser le template de FA codant les Catégories (index_box)
  
• Maîtriser la partie du template de FA codant pour le QEEL (index_body)
  
• Maîtriser la partie du template de FA codant pour l'affichage des sujets (viewtopic_body)
  

Les exercices recommandés: Modifier ces templates
Liens/code de 3 exercices:
forum : J'ai fait le codage complet de la version actuelle d'août d'art design ici. La Pa est sensée être responsive en version mobile, mais je viens de voir qu'elle n'avait pas été installée   , du coup le codepen ici :

EDIT : Pa mise-à-jour sur AD, normalement vous pouvez la voir en situation.

autre : J'ai regroupé tous mes codes ou presque dans une galerie ci-dessous :


il y a aussi un autre code avec plein de sélecteurs et de transitions dans tous les sens ici :

Je me suis pas mal arrachée les cheveux sur celui là et je suis vraiment contente du résultat.

Vos exercices répondent bien au niveau désiré ? A priori oui vu que j'ai modifié une bonne partie des templates. Cela dit, c'est le premier et le seul forum que j'ai codé pour l'instant, donc il y a sans doute des choses incorrectes ou pas du tout propre
Et je sais qu'il y a plein de balises persos, j'ai bien compris en arrivant ici que ça ne se faisait pas, promis je ne le referait plus

Hello ! Un codeur examinera tes codes dans les plus brefs délais

Hello @Celest'
Pour examiner tes codes, il nous faut tes codes, on ne va pas examiner le visuel malheureusement =/
Du coup pour ce niveau là, comme on se concentre sur les templates, il faut que cela soit des codes de templates donc des catégories (index_box), un QEEL (index_body) et un sujet + message (viewtopic_body)
Si tu crains qu'on puisse te les piquer ou quoi que ce soit, n'hésite pas à les mettre sous hide

@Artemis je pensais que vous aviez accès aux codes sur codepen  

sinon, voici les templates demandés :

index_box

index_body

viewtopic_body

Hello @Celest' ! Oui, ne t'en fais pas, nous voyons bien tes codes via Codepen mais pour ce niveau, nous nous intéressons plus volontiers aux templates.
Peux-tu fournir aussi les CSS associés aux templates (sous hide, évidemment) ? Ca va m'aider à comprendre un peu comment tu positionnes tes éléments, si tu te dépatouilles avec les sélecteurs, tout ça tout ça 8D Je reviendrai vers toi dès que possible !

A bientôt  (et navrée de t'en demander tant ) !

@Artemis effectivement avec le CSS c'est mieux

index_box

les icons des liens


les catégories

index_body

le qeel :

viewtopic_body

liste sujets


profil :



je n'ai pas mis les messages, juste le profil, puisque ça faisait déjà beaucoup et je n'y ai pas changer grand chose à part les couleurs.

bonne lecture !

Hello @Celest' ! Je tiens tout d'abord à m'excuser pour le délai de réponse é.è
Pour moi et après lecture de tes codes, je pense qu'un niveau Intermédiaire ++ te siérait mieux. Tes fiches montrent que tu es plutôt à l'aise avec le CSS, les sélecteurs sont divers et présents, tu gères les PA, mais je pense que le niveau de personnalisation des templates est encore fragile. C'est ton premier codage de design, en même temps, ça se comprend ! J'ai l'impression que tu codes parfois à même les templates, ce qui rend les personnalisations appliquées un peu satellites, au final, assez légères. Je pense que certains de nos tutoriels pourraient t'aider à progresser et oser, à terme, des modifications plus importantes !

Je vois aussi que tu utilises flexbox, mais que tu lui préfères souvent des méthodes de positionnement antérieures ; n'hésite pas à creuser au niveau de flexbox, en lisant de la doc (www), par exemple, c'est une méthode de positionnement assez polyvalente et qui, bien maîtrisée, peut tout à fait te permettre de coder de manière responsive ! Je pense qu'en maîtrisant mieux tes positionnements (je vois par exemple que tu sors souvent tes éléments du flux, pour coder des choses un peu plus complexes) et avec de la pratique au niveau des templates, tu atteindras rapidement le niveau Avancé +.

Voilà pour moi !

Bonjour, je viens connaître mon niveau !

Niveau désiré: Après hésitation, j'opte pour avancé++ !
Les notions de ce niveau:
► pouvoir comprendre n'importe lequel des templates de FA car tu sais lire un templates, te repérer dedans, et via l'intuition des termes en anglais, comprendre ce à quoi se réfère les boucles/variables.
► toucher au JavaScript
Les exercices recommandés: //
Liens/code de 3 exercices: J'ai réalisé le codage de ce site (index, profil + messages, liste des membres, profil) ainsi que les catégories de ce site.
Vos exercices répondent bien au niveau désiré ? Je pense oui, j'ai bien touché aux templates et ai utilisé Javascript de manière plus ou moins intensive.
Merci d'avance !

Hello @Gekigami !
Pourrais-tu nous fournir le HTML & CSS des templates concernés ? Sous hide si tu es plus à l'aise ainsi
Tu n'es pas obligée de poster tous les templates non plus, mais ceux que tu trouves pertinents, par exemple, une catégorie, un qeel... Ca nous permettra de voir si les notions des niveaux inférieurs sont acquis !

Bonjour, pas de soucis, voici un échantillon !
Je précise que n'ayant pas fini le codage complet du forum, il y a peut-être quelques étourderies qui ont pu s'y glisser (niveau CSS du moins), j'ai tendance à faire une grosse relecture quand tout est fini !

//