Ubrain

Eh bien c'est dommage que tu partes...
Dans tous les cas je te souhaite une très bonne continuation et le peu que j'ai pu discuter ou coder pour toi fut un réel plaisir.
Courage et bonne chance. 

Je participe pour le grade vip

Et merci pour le concours !

Salut @Symbiosis
Il y a quelques temps j'avais rédigé un petit sujet permettant de détecter automatiquement le pays de l'utilisateur et donc la langue à partir de l'IP de l'utilisateur.
Ceci permettrait d'automatiser le choix de la langue.

C'est pas bien compliqué et tout est détaillé ici : 

En espérant t'avoir aidé !

Bonne chance pour ton projet.

C'est marrant mais j'avais eu exactement la même idée il y a pas si longtemps...
Il y avais deux trois différences (chat de projet, promotion de membres, stockage de fichier en ligne ect..) tout ça dans le style de Discord.
 

Bon bah du coup je vais donner mon avis :

Je pense que ton projet à du potentiel, avec un peu de travail et de temps, ce site peux devenir pas mal.
Sinon je n'accroche pas du tout au style ou a la disposition des éléments. L'image 300px au dessus du header je trouve ça un peu étrange en soi et puis ça fait un peu... vide.
Et puis je chipote un peu sur la responsive où il y a deux/trois problèmes de margin-top sur certains éléments.
Après pour le reste du site c'est un peu la même chose : c'est très vide.. et le jeu de couleurs ne me plait pas plus que ça (bien qu'il ressorte bien avec les images).
Et l'image qui ne bouge pas au scroll je trouve ça hyper déstabilisant.

Mais comme je le disais, avec un peu de travail ça peut donner quelque chose d'agréable
Bonne soirée et bonne chance pour ton site,

- UBrain

Bonjour, as-tu bien configuré le fichier de configuration du CMS.
Le fait que les images et les pages CSS ne fonctionnent pas vient certainement du fait que tu n'as pas configuré l'url de base de ton CMS.
J'espère t'avoir aidé.

Mais surtout d'aller chercher sur le forum pour savoir si la question à déjà été résolue avant de reposter 36000 fois la même chose 

Ce sujet date déjà de l'année dernière....
Ok je la ferme 

il y a 12 minutes, Arwantys a dit :

Le mieux reste d’héberger la liste de toutes les IP sur ses propres serveurs, si l’API est down c’est la merde ^^

Ce n'est pas faux, le mieux serait d'utiliser une alternative au cas où l'API est down avec file_exists
Par exemple :

<?php
// on récupère l'ip dans la variable "ip"
$ip = $_SERVER['REMOTE_ADDR'];

// on vérifie si l'API n'est pas down
if(file_exists('http://api.hostip.info/country.php')){
  $pays = file_get_contents('http://api.hostip.info/country.php?ip='.$ip);
}elseif(file_exists('http://autreapi/foundip.php'){
  // si le premier API est down, alors on va vers une autre API
  $pays = file_get_contents('http://autreapi/foundip.php?ip='.$ip);
}else{
  // encore une fois, si le second API est down, on va vers une autre API
  $pays = file_get_contents('http://encoreuneautreapi?ip='.$ip);
}
?>

Salut les Jeunes, ça boum ?

Promis j’arrête

Ah l'IP, cette magnifique suite de chiffres prise en otage tous les trois jours par des hXk3r d'élite.... 

Habituellement, cette suite de chiffres sert plus à vérifier les doubles comptes ou à identifier des utilisateurs (sur wikipedia par exemple)

Bien que l'on préfère garder son IP privé, sachez que cette dernière est présente un peu partout sur le vaste internet,

En effet, il est plus que très simple de récupérer l'adresse IP d'un utilisateur, rien qu'en chargeant la page d'un site.
Par ailleurs, un site peut récupérer bien plus d'informations sur vous, tel que le port, le navigateur, votre position ect...

Bon, cessons de tourner autour du pot, aujourd'hui je vais vous montrer comment gagner 200 euros en 12 minutes récupérer le pays d'un visiteur de votre site à partir de son adresse IP et ce, sans qu'il ait à accepter un popup disant que le site souhaite accéder à sa position.
 

Prérequis :

• Connaissances basiques sur le PHP (variables)
• Une connexion internet (je ne me moque pas de vous puis-ce que l'on va utiliser un site externe)

Pour commencer, on va récupérer l'adresse IP de l'utilisateur, pour cela on va utiliser la variable globale $_SERVER 

Vous allez donc devoir écrire ceci dans votre fichier :

<?php
// on récupère l'ip dans la variable "ip"
$ip = $_SERVER['REMOTE_ADDR'];
?>

Pour l'instant, on à l'adresse IP de l'utilisateur dans la variable IP, vous pouvez essayer ce code en tapant 

<?php
// on récupère l'ip dans la variable "ip"
$ip = $_SERVER['REMOTE_ADDR'];
echo 'Mon ip est '.$ip;
?>

Ceci devrait afficher par exemple "Mon ip est 122.444.666.777"

Maintenant on va devoir utiliser une ressource externe qui est le site http://api.hostip.info qui propose plein d'outils sur l'ip.
On va donc lui demander de remonter la racine de l'ip pour retrouver le pays de l'utilisateur.
Je ne vais pas vous expliquer comment fonctionne la racine d'une IP ect... car ce sujet est très complexe et si vous souhaites vous y intéresser, voici le lien vers un article

Donc on va lui demander de faire tout ce travail à notre place (c'est plus rapide et moins long )
Pour cela on va utiliser ce lien : http://api.hostip.info/country.php
On va y ajouter l'information "ip" par get (en l'ajoutant dans la barre d'adresse)

Donc on va demander au site api.hostip.info de trouver le pays de l'adresse ip du visiteur,
Pour cela on va utiliser file_get_contents pour récupérer les informations que renvoie cette page :

<?php
// on récupère l'ip dans la variable "ip"
$ip = $_SERVER['REMOTE_ADDR'];

// on demande au site de récupérer le pays à partir de l'ip donnée
$pays = file_get_contents('http://api.hostip.info/country.php?ip='.$ip);
?>

Et voilà ! La variable $pays contient le pays du visiteur, par exemple, pour la france, ce sera FR
Pour l'Amérique ce sera US, pour l’Angleterre ce sera EN, pour l'Espagne ES ect...

Citation

"C'est bien beau tout ça... mais en cas d'erreur ou d'adresse IP inexistante ?

Et bien le pays retourné sera "XX", si vous voulez par exemple détecter si le pays de l'ip est bien localisable, insérez-y ce code en plus :

<?php
if($pays != "XX" || $pays != null){
  echo "Vous etes en ".$pays;
}else{
  echo "Impossible de définir votre pays !";
}
?>

Voilà, j'espère que ce petit "tuto" vous aura plu et qu'il vous servira par exemple pour savoir si l'utilisateur doit accéder à la version anglaise du site ou la version Française ou encore pour faire des statistiques ect..

Bonne continuation à vous tous !

>_UBrain

Ou alors pour ne pas être surveillé par le gouvernement faut ouvrir son propre serveur local et passer le reste de sa vie a développer des sites pour soi-même en vivant dans la dépression 

Oui ajoute moi UBrain Dev#3166

Ok et tu as vérifié l'host,
Si tu n'est pas sur de ton host tu peux essayer de la ping pour voir si il existe ou de revérifier sur les informations d'achat.
Habituellement cette erreur vient du host, puis es-tu sur de n'avoir mis aucun paramètres particulier.

Cette erreur peut aussi dire : "Can't connect to local MySQL server through socket" qui est donc une erreur interne à la DB : si tu as besoin de plus d'info, tu peux aller voir la documentation officielle de MySQL (je n'ai pas trouvé l'article en français)

Salut, tu utilises new PDO ou msql_connect ?
De plus, essais de vérifier ton host, si tu es en local, tapes "localhost" sinon essais de mettre le domaine que t'a donné l'hébergeur ou l'ip.
>_UBrain

Alors pour cela, étant donné que je ne connais pas le cms, tu dois te rendre dans la page qui traite la connexion.
Pour trouver le fichier, tu dois te rendre dans une des page qui contient le formulaire d'inscription (si le formulaire est dans le header, il faut aller voir dans le header.php, si il est sur l'index, il faut aller voir sur index.php ect..) puis tu trouves la balise form. 

Dans cette balise tu devrais trouver les paramètres suivants :

<form class="form" action="page.php" method="post">
  <!-- Exemple de contenu de la balise, ne pas y preter attention -->
  <input type="text" placeholder="Identifiant" name="utilsateur">
  <input type="password" placeholder="Mot de passe Habbo" name="mdp">
  <input type="submit" value="Se connecter">
</form>

Dans ces paramètres, on y retrouve :

• class => Il peux ne pas y être, il sert principalement a associer à un élément du CSS
• action => Il permet de savoir vers quelle page les informations seront envoyées
• method => Permet de définir la méthode d'envoi (post/get)

Parmis ces paramètres, il faut récupérer le contenu du paramètre action
Si le contenu ressemble à ceci :

<form action="page_externe.php">

Alors il suffit simplement d'ouvrir la page qui y est indiquée, par exemple, là je dois ouvrir page_externe.php

Par ailleurs, si le contenu ressemble à ceci :

<form action="?do=connect">

Il faut rester sur la même page et trouver ce code (pour l'exemple du dessus) :

<?php
if($_GET['do'] == "connect"){
  // Vérification pour se connecter
}
?>

Et tu devrais trouver dedans ce fameux setcookie.
Voilà, j'espère t'avoir aidé à nouveau, si tu ne trouves pas, n'hésite pas 

Salut, j'ai souvent eu ce problème lorsque je codais il y a longtemps,
Lorsque l'utilisateur se connecte, un "cookie" est déclaré, cela se présente comme ceci :

<?php
// Déclare le cookie "user" avec le pseudo dedans durant une heure
setcookie("User", $pseudo, time()+3600);
?>

Le problème est que si du code html se trouve avant de déclarer le cookie, ce dernier donnera cette erreur :

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/habbawzf/public_html/global.php:1) in /home/habbawzf/public_html/global.php on line 4

Le truc c'est bien sur, que si tu ouvres ton fichier global.php, il n'y a aucun html avant de déclarer le cookie.
C'est donc un problème d'include. 

Après je ne sais pas si il existe d'autre source de problème de cette erreur, mais saches que c'est principalement cela,
En espérant t'avoir aidé,

>_UBrain

Salut la commu !

Je ne vous ai pas trop manqué (non)

Bon je reviens avec un petit plugin :

Un bouton animé en JQuery pour remonter en haut de sa page.

Je sais que ce fameux bouton (aussi présent sur inshare) à perdu de sa popularité ces derniers temps.

Mais pour ceux qui veulent encore utiliser ces petits boutons, j'en ai codé un plugin pour vous !

Prévisualisation :

Donc vous pouvez voir qu'il est un poil plus animé que celui d'habbo Dev.
Pour commencer, comme ce plugin utilise JQuery, vous allez devoir relier JQuery à votre page, pour cela, je vous recommande de copier/coller dans le head ce code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Dès que vous aurez fait cela, votre page sera "relié" à JQuery et sera prêt à l'utiliser.

Cette étape faite, on va devoir relier le plugin en JS avec ce code :

<!-- Si les deux fichiers se trouvent dans le meme repertoire -->
<script src="winscroll.js"></script>

<!-- Si les deux fichiers se trouvent dans un repertoire différent -->
<script src="repertoire/winscroll.js"></script>

Mais avant tout, vous devez télécharger le fichier en cliquant ici -> winscroll.js ou vous pouvez copier/coller le code complet qui se trouve un peu plus bas.

Dès que cela est fait, il ne se passera rien, parce qu'il faut créer la balise <scroll></scroll> (moi et mon amour pour la création de balises)

Mais il y a des paramètres spécifiques :

<scroll fixed="true" top="0">Remonter</scroll>
<!-- Ceci créra un bouton en haut de la page, l'animation ne fonctionnera pas -->

<scroll>Remonter</scroll>
<!-- Ceci créra un texte, si ce dernier est cliqué, la page sera remontée, l'animation ne fnctionne pas -->

<scroll fixed="true" bottom="0">Remonter</scroll>
<!-- Ceci créra un bouton en bas et l'animation fonctionne ! -->

<scroll fixed="true" bottom="12px" right="12px">Remonter</scroll>
<!-- Ceci créra un bouton à 12px du bas de la page à droite avec 12px vers la gauche, l'animation fonctionne aussi -->
<!-- Vous pouvez aussi bien évidemment faire ceci : -->
<scroll style="position:fixed;bottom:12px;right:12px;">Remonter</scroll>
<!-- Ceci rend le meme résultat mais je trouve cela un peu plus long -->

Donc en gros, dans la balise scroll, vous pouvez mettre ce que vous souhaitez, que ce soit du texte ou autre, si l'utilisateur le clique, ça remontera la page.

Et remarquez aussi que l'animation fonctionne que lorsque le bouton utilise bottom, c'est juste que faire 5 animations risquerait de faire un peu long et ralentirais vos pages.
 

Sur la vidéo plus haut, j'utilise ce code :

<scroll fixed="true" bottom="22px" right="15px">
  <!-- Vous pouvez insérer dans cette balise ce que vous voulez -->
  <img src="https://cnlovesdigital.com/wp-content/uploads/2016/04/back-to-top-button.png" style="width:70px;">
  <!-- Par exemple, j'ai mis cette image de fleche vers le haut -->
</scroll>

Ce code donnera donc le résultat suivant : 

Pour ceux qui veulent juste copier/coller le code (ou juste le voir), le voici :

/*******************************
* TopScroll codé par UBrainDev *
********************************/

// On créer la flèche dans la balise <scroll>
setarrow();

function setarrow() {
    // On vérifie si la balise existe
    var scroll_balise = document.getElementsByTagName("scroll");
    if(document.querySelector('scroll')){
        // Si la balise existe alors
        // On sélectionne le premier élément <scroll>
        var scroll_balise = document.getElementsByTagName("scroll")[0];
        // On récupère les paramètres
        var scroll_top = scroll_balise.getAttribute("top");
        var scroll_left = scroll_balise.getAttribute("left");
        var scroll_right = scroll_balise.getAttribute("right");
        var scroll_bottom = scroll_balise.getAttribute("bottom");
        var scroll_fixed = scroll_balise.getAttribute("fixed");
        var scroll_duration = scroll_balise.getAttribute("duration");
        var ajax_scroll_balise = $("scroll");
        
        // Cacher la balise scroll dès le chargement de la page
        scroll_balise.style.display = "none";
        
        if(scroll_bottom != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre bottom est défini, alors...
            scroll_balise.style.bottom = -140;
        }
        
        if(scroll_fixed == "true"){
            // Si le paramètre fixed est défini, alors...
            scroll_balise.style.position = "fixed";
        }
        if(scroll_top != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre top est défini, alors...
            scroll_balise.style.top = scroll_top;
        }
        if(scroll_left != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre left est défini, alors...
            scroll_balise.style.left = scroll_left;
        }else if(scroll_right != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre right est défini, alors...
            scroll_balise.style.right = scroll_right;
        }
        
        // Une fois tous les éléments définis, on s'occuper de détecter la position du scroll
        $(function () {
            var $fenetre = $(window);
            $fenetre.scroll(function () {
                // On vérifie si le curseur est en haut de la page
                if ($fenetre.height() + $fenetre.scrollTop() == $(document).height()) {
                    ajax_scroll_balise.clearQueue();
                    // Si le bouton est "bien placé" alors jouer l'animation
                    if(scroll_bottom != null && scroll_balise.style.position == "fixed" && parseInt(scroll_balise.style.bottom) === parseInt(scroll_bottom)){
                        $("scroll").animate({bottom: -140}, 500);
                    }
                } else {
                    // Si il est en bas de la page on "montre" la balise <scroll>
                    scroll_balise.style.display = "block";
                if(scroll_bottom != null && scroll_balise.style.position == "fixed" && !(parseInt(scroll_balise.style.bottom) === parseInt(scroll_bottom))){
                    ajax_scroll_balise.clearQueue();
                    // Si le bouton est "bien placé" alors jouer l'animation
                    scroll_balise.style.bottom = -140;
                    $("scroll").animate({bottom: scroll_bottom}, 300);
                }
            }
            });
        });
        
        $("scroll").click(function(){
            // Si on clique sur le bouton de retour vers le haut
            var scroll_tour;
            var scroll_total = 500;
            var $fenetre = $(window);
            // Animation pour le retour vers le haut, vous pouvez modifier le 700 pour la durée de scroll automatique vers le haut (en ms)
            $("html, body").animate({scrollTop: 0}, 700);
        });
        
    }else{
        // Si la balise n'existe pas alors
        console.log("Impossible de trouver la balise <scroll>");
    }
}

Rapidement, si il y en a qui sont intéressés par changer la vitesse du scroll automatique, allez à la ligne 78 du fichier, ou vous pouvez voir ceci :

// Animation pour le retour vers le haut, vous pouvez modifier le 700 pour la durée de scroll automatique vers le haut (en ms)
$("html, body").animate({scrollTop: 0}, 700);

Sachez que vous pouvez modifier le 700 pour allonger ou rétrécir la durée du scroll (1s = 1000ms)

Voilà ! J’espère que ce nouveau plugin vous plaira, si je sors moins de plugins en ce moment c'est juste que je travaille sur pas mal de projets donc j'ai moins de temps à consacrer aux plugins (et en parallèle, je n'ai plus d'idées)

Et bien comme d'habitude, si le plugin vous à "plu", vous pouvez toujours mettre un +1 

En attendant,

Bonne soirée/journée à tous et très bonne continuation !

>_Ubrain

Bienvenue dans ce nouveau monde qu'est HabboDev 

il y a 4 minutes, Pyro a dit :

Tant mieux, se cacher est "l'unique solution" pour toi visiblement, mais je comprend, pendant la guerre il y avait ceux qui collaborait avec les nazis par peur,

 et ceux qui se combattait pour la vie de leurs femme et enfants.

Non je voulais pas continuer à tourner en rond dans ton cercle vicieux puis-ce que tu auras toujours raison 
 

il y a 5 minutes, Pyro a dit :

Et bien si, on peux faire un retro sans dépenser et excuse nous si tu es aisé et que tu n'as aucun problème niveau argent,

 mais on en a rien à cirer.

Mdr comment peux-tu déduire des choses comme cela ?
J'ai travaillé des heures entières et des jours quand je n'avais plus cours en 2012 / 2013 à développer sans m’arrêter des rétros / des cms ect.. pour pas plus de 5 euros.
Mon argent je l'ai gagné et avec j'ai fait mon rétro, c'est tout...
 

@Pyro faut arrêter de tout prendre mal comme ça, j'ai juste donné mon avis, sois ouvert à la critique...
Au contraire, tu devrais prendre en compte ce que dit la communauté et pas prendre mal dès que l'on dit du négatif.
De plus, ce n'est pas la difficulté du langage qui fait la chose,

Je ne veux pas tourner en rond donc si tu ne fais pas preuve de compréhension, je n'irais pas chercher à te répondre,
Nous sommes là pour donner notre avis qu'il soit positif ou négatif, si on était là pour insulter cela se saurait.
Je veux juste t'aider, crois-moi que j'ai été critiqué à mes débuts, j'ai juste persévéré et j'ai pris tous les commentaires négatifs pour m'améliorer.
Et ici, nous l'avons tous plus ou moins fait, on se forge sur les avis négatifs.

Voilà, c'est tous ce que j'avais à dire et surement tout ce que j'aurais à dire...
Bonne continuation,

il y a 5 minutes, Pyro a dit :

Tu utilises le terme "salir", c'est assez offensant j'avoue, mais j'ai ma fierté à ce logiciel.

Franchement, je ne vois pas quelle fierté peut-on tirer de "salir" des sites comme je l'ai dit,

il y a 6 minutes, Pyro a dit :

Mon logiciel permet d'aider, alors oui il sali le site sur lequel il pub, mais il attire sur sur le site voulu,

il n'y a pas de blanc sans noir pour que ça marche.

J'ai l'impression que tu vois le "flood" comme l'unique et seule solution possible pour attirer du publique sur son rétro
Tu fais une jolie campagne publicitaire, tu t'appliques et tu fais preuve de créativité et puis sois tu choisis de payer des emplacements de publicités sur des sites de rétro, sois tu créer un rétro qui attire du publique et où il peux se divertir, 
 

Quand j'avais un rétro en 2013 je n'ai jamais flood sur aucun site et cela ne m'a pas empêché d'avoir un nombre stable de connectés.
J'ai fait une belle bannière sur laquelle j'ai passé plusieurs heures et j'ai mis la main à la poche pour payer un graphiste par la suite.

Donc non, le flood n'est pas l'unique et ultime solution pour attirer du trafic.
Et je sais que pour la majorité des personnes qui font des rétros aujourd'hui c'est trop compliqué de dépenser un centime.
Si tu ne veux pas dépenser, ne fais pas de rétro.

Combien de fois je me suis reçu des messages privés comme "tu dev gratuit", "tu as des emus a me passer gratuit stp" ect...
Alors non, soyez créatifs et imaginez un peu un autre moyen que de spam des sites.
Je ne commenterais pas plus.

il y a 39 minutes, Pyro a dit :

Mais c'est aussi un très bon moyen d'avoir des joueurs dans son rétro

Je penses que Rick à raison, on ne peux même plus parler sur certaines southbox tellement ce ne sont juste des poubelles à pubs

Ce genre de logiciels salissent juste la communauté Habbo Française, je penses que les gens sur Internet n'ont pas envie de voir 36 000 fois le même message de publicité.
Je ne critique pas le développement, seulement l'utilité de ton logiciel,
Je penses déjà voir assez de trash chat de pubs pour les rétros qui devaient en plus initialement être présentes pour la communication entre joueurs,
Je prend ce logiciel plus comme une ressource pour les "pubeurs" pour salir plus facilement les sites ect...

Bref c'est mon avis et ce n'est pas pour être méchant ou condescend,
Je trouve juste qu'un "flooder" c'est 'ouf' comme logiciel...

Motivé par un magnifique DM d'anglais que j'avais eu, je pris des légumes (de préférence ronds) et les trempèrent dans du chocolat bien mou et étalé sur le plan de travail. Devinez la suite, et imaginez ma satisfaction de donner de telles sucreries a des enfants.

C'est le lendemain que je me suis fait légèrement "admonester" (pour rester courtois) quand un des enfants avait des allergies à un des légumes (choux si je me souviens bien) en plus de la grande cuisinière que j'avais à nettoyér bien évidemment pleine de chocolat.

Je n'aimais déjà pas Halloween mais là,

ça n'avais pas aidé

"Happy Halloween"

il y a 33 minutes, Akushi a dit :

la personne devras réapprendre la base du codage

@Akushi je comprends ton avis, par contre, la personne ne devra pas "réapprendre" les bases du html étant donné que ceci est fait pour introduire les débutants dans une logique de code et pour un peu comprendre la pratique. 
J'ai fait ceci pour ceux qui ont toujours voulu coder mais qui ont étés découragés par la difficulté/le langage du code.
Je dis ceci car moi-même j'ai été confronté à ce problème dès mes débuts...

 

il y a 18 minutes, 乇ﾶﾉしﾉѺ a dit :

Je ne rejoins pas l'avis des autres.

C'est vraiment propre, c'est grâce à ça que le développement avance.

Trouver des moyens de simplifier le code pour arriver au même résultat y a pas à dire : Chapeau ! 

Ce genre de sujet qu'il faudrait épingler, ça change du "problème 76% plusEMU".

 

Merci beaucoup !

à l’instant, Scorpio a dit :

Hum pour quelqu'un qui débute il risque de s'habituer à ton code "en français" et le jour ou il va vouloir progresser il va devoir retrouver toutes les bases en anglais du coup c'est un peu une perte de temps.

  

Mais sinon pourquoi ne pas faire un tableau ou tu mets dans une colonne le nom en anglais, et ensuite une description en français ?

C'est plus pour introduire les débutants dans la logique de code, toutefois ceci est vrai,
Pour les tableaux j'y penserais pour la prochaine mise a jour (si il y a)

Merci encore

Hey la communauté !
Apprendre le code c'est pas forcément très simple, surtout si pour vous l'anglais est un boulet....

Pourquoi ne pas faire un pluggin JavaScript pour mettre fin à ce problème ?

C'est ce que je vous ai concocté aujourd'hui !

Non seulement, le pluggin que vous allez découvrir vous aidera pour le développement si vous avez du mal
Mais en plus, il va vous apprendre le code !
 

Développeurs expérimentés, ce pluggin n'est pas pratique pour vous :
Certains termes comme <li> sont allongés en <element> pour faciliter l'apprentissage,

De plus ceci risque de fortement vous ralentir. 

1. Installation :

Pour une fois je ne vais pas finir par la partie "installation" car il est bien plus pratique d'expérimenter

tout en apprenant et en suivant le tutoriel qui va suivre :

Voici le fichier JS : fh_ubrain.js

Si vous téléchargez le fichier, des informations supplémentaires y sont joins

Contenu de fh_ubrain.js

var max = 200;function html(nms) {var code = document.getElementById(nms).innerHTML;var i;for (i = 0; i < max; i++) { 
 code=code.replace('<titre>','<h1>');code=code.replace('</titre>','</h1>');code=code.replace('<titre2>','<h2>');code=code.replace('</titre2>','</h2>');code=code.replace('<titre3>','<h3>');code=code.replace('<titre4>','<h4>');code=code.replace('<titre5>','<h5>');code=code.replace('<titre6>','<h6>');code=code.replace('</titre3>','</h3>');code=code.replace('</titre4>','</h4>');code=code.replace('</titre5>','</h5>');code=code.replace('</titre6>','</h6>');code=code.replace('<centre>','<center>');code=code.replace('</centre>','</center>');code=code.replace('<section>','<div>');code=code.replace('</section>','</div>');code=code.replace('<liste>','<ul>');code=code.replace('</liste>','</ul>');code=code.replace('<element>','<li>');code=code.replace('</element>','</li>');code=code.replace('<sa>','</br>');code=code.replace('<gras>','<b>');code=code.replace('</gras>','</b>');code=code.replace('<page>','<title>');code=code.replace('</page>','</title>');code=code.replace('<page>','<title>');code=code.replace('</page>','</title>');code=code.replace('<bouton>','<button>');code=code.replace('</bouton>','</button>');code=code.replace('<italique>','<em>');code=code.replace('</italique>','</em>');code=code.replace('<paragraphe>','<p>');code=code.replace('</paragraphe>','</p>');code=code.replace('<barre>','<s>');code=code.replace('</barre>','</s>');code=code.replace('<tableau>','<table>');code=code.replace('<colonne>','<th>');code=code.replace('</colonne>','</th>');code=code.replace('</tableau>','</table>');code=code.replace('<ligne>','<tr>');code=code.replace('</ligne>','</tr>');code=code.replace('</cellule>','</td>');code=code.replace('<cellule>','<td>');code=code.replace('<fond>','<div style=\'background-color:');code=code.replace('</fond>',';\'> ');code=code.replace('</fin>','</div>');code=code.replace('<couleur>','<div style=\'color:');code=code.replace('</couleur>',';\'> ');code=code.replace('<police>','<div style=\'font-family:');code=code.replace('</police>',';\'> ');code=code.replace('<attribut>','<div style=\'');code=code.replace('</attribut>','\'> ');document.getElementById(nms).innerHTML = code;if(document.getElementById("traduit").getAttribute("code") === "oui"){document.getElementById("traduit").innerHTML = "<textarea style='width:100%;height:300px;'>"+code+"</textarea>";}}}

Bon... alors jusqu'à maintenant, vous avez le fichier JS, mais vous ne savez pas encore ou écrire le code en Français et comment ça fonctionne

OK, c'est pas un jeu d'enfant de l'installer, je vous l'accorde aussi, mais une fois que c'est installé tout est simple, disons que c'est le moment plus plus difficile !

1.1 Relier le fichier JavaScript au fichier HTML

Bon, rien de bien technique, vous devez insérer ce code dans le header de votre page

Header ??! Kesako

Citation

Je ne vais pas vous faire un cours complet sur le header malheureusement, mais je vais vous donner un lien pratique fait par des experts en développement, croyez-moi, ils expliques mieux que je ne puisse le faire

(pour ceux qui n'ont rien compris, il faut cliquer sur le mot "lien pratique")
Et si vous ne voulez pas aller voir, j'ai pensé à vous quand même (merci tonton UBrain)
Vous devez simplement faire ceci :

<header>
  <!-- Zone encore vide -->
</header>

 

<script src="fh_ubrain.js"></script>

Rien de miraculeux, vous demandez simplement à la page de charger le code JS

Pour l'instant vous êtes toujours bloqué, l'étape suivante est un peu plus technique,

Une fois l'étape suivante passée, vous pourrez enfin passer à la pratique

1.2 Demander au fichier JS d'exécuter le code FH

Avant que je vous perde, je vous explique, le code FH c'est simplement le code que je vais vous apprendre par la suite qui est le HTML Français

En sachant que vous ne pouvez toujours pas écrire de code FH, nous devons premièrement demander au fichier FH d'interpréter le code et de le traduire (bien qu’inexistant)

Vous allez devoir modifier le body de votre page comme ceci :

<body onload="html('a')">

Ouais c'est pas ouf comme nom de fonction et comme paramètre mais j'avais pas trop d'idées

Pour ceux qui ne savent pas ce qu'est un body, entrez simplement la balise du dessus après le header et puis refermez là.
Votre fichier html devrait ressembler à ceci :

<header>
  <script src="fh_ubrain.js"></script>
</header>

<body onload="html('a')">
</body>

Pour l'instant, votre page HTML va chercher le code FH à traduire et exécuter.
Vous savez donc sur quoi portera la prochaine section :

1.3 Entrer et écrire le code FH

On arrive enfin à la partie la plus importante, vous allez découvrir ou écrire ce fameux code !
Bon c'est pas si compliqué que ça, pour cela vous allez utiliser une balise qui n'existe pas en "vrai HTML"

C'est la balise FH

Bon celle-ci, que vous soyez développeur ou non, vous ne la connaissez pas, c'est pour cela que je vais vous apprendre à l'utiliser
Avant toute chose, vous devez placer cette fameuse balise, pour cela, c'est plutôt simple,

Vous devez placer le code qui va suivre entre les deux balises body :

<hf id="a" code="oui"></hf>

Pour faire plus simple, votre code devrait ressembler à ceci :

<header>
  <script src="fh_ubrain.js"></script>
</header>

<body onload="html('a')">
  <hf id="a" code="oui"></hf>
</body>

Pour l'instant il ne se passe toujours rien et c'est normal,

Sachez juste que vous avez fait le plus dur, le reste ne sera que de la pratique !

2. Apprendre à coder en FH 

Le FH est quand bien même très différent du HTML

Bon, il y a une partie qui fonctionne sur CSS, mais c'est du gros n'importe quoi et vous allez bâcler votre code plus qu'autre chose si vous tentez de l'utiliser

Bon si vous voulez continuer de jouer les intrépide à la dévastation de l'ordre dans votre code, vous pouvez retrouver cette section en 2.3 Utiliser les attributs CSS

2.1 Apprendre à écrire votre première balise

Pour votre première balise, l'on ne va pas s’embêter, faisons juste un titre

Pour cela, vous allez avoir besoin d'entrer d'entrer le code suivant dans la balise <hf>

<titre>Grand titre</titre>

Le résultat sera le suivant :

Ce n'était pas très compliqué ?

2.2 Liste des possibilités de balises HF

1. Textes

<titre2>Sous-Titre</titre2>
<titre3>Très Grand Texte</titre3>
<titre4>Grand Texte</titre4>
<titre5>Texte</titre5>
<titre6>Petit Texte</titre6>
<paragraphe>Texte En Paragraphe</paragraphe>

2. Centrer les éléments

<centre>
  <paragraphe>Ce texte est centré au millieu de l'écran</paragraphe>
  <sa>
  <paragraphe>Celui-ci aussi</paragraphe>
</centre>

3. Faire des listes désordonnées

<liste>
   <element>Element 1</element>
   <element>Element 2</element>
   <element>Element 3</element>
</liste>

4. Saut de ligne

<sa>

5. Gras / Italique / Barré

<gras>Texte en gras</gras><sa>
<italique>Texte italique</italique><sa>
<barre>Texte barré</barre>

4. Titre de la page (<title>)

<page>Page de test</page>

5. Boutons

<bouton>Voici un bouton</bouton>

6. Tableau

<tableau>
            <ligne>
                <colonne>Nom</colonne>
                <colonne>Âge</colonne>
                <colonne>Sexe</colonne>
            </ligne>
            <ligne>
                <cellule>Carmen</cellule>
                <cellule>33 ans</cellule>
                <cellule>Femme</cellule>
            </ligne>
            <ligne>
                <cellule>Jean</cellule>
                <cellule>26 ans</cellule>
                <cellule>Homme</cellule>
            </ligne>
</tableau>

2.3 Utiliser les attributs CSS

ces balises ne sont pas encore au point (pour ne pas dire du tout) et ne sont pas pratiques, pour cela, je vous recommande d'utiliser les balises et attributs CSS à l'état brut

Cette fonctionnalité arrivera en version 1.1 !

(Pour ceux qui fouillent un peu dans le fichier JS, ces balises existent déjà, mais c'est du grand n'importe quoi)

3. Résultat traduit du HF

Pour ceux qui veulent traduire une balise depuis le HF vers le HTML, c'est plutôt simple

J'ai créer une balise <hf> qui permet de voir le contenu entier du texte HF en HTML,
Pour ceci c'est simple, vous devez entrer (en dehors de la balise <hf>) cette balise HF

<hf id="traduit" code="oui"></hf>

Et voici un textearea qui contient votre code traduit, utile non ?

Si vous changez l'attribut code en autre chose que "oui", le textarea disparaîtra, ce qui est utile si vous souhaitez ne pas le retaper si vous l'enlevez.

4. Insérer du HTML dans le HF

Comme le HF n'est pas complet du tout, vous pouvez évidemment ajouter de véritables balises HTML au milieu des balises HF

Il n'y a pas de syntaxes spéciales à adopter, vous devez juste écrire la balise sans modifications dans la balise <hf>

Voici un exemple avec une image :

<header>
  <script src="fh_ubrain.js"></script>
</header>

<body onload="html('a')">
  <hf id="a" code="oui">
    <titre>Ma page</titre>
    <titre2>Voici une image :</titre2>
    <!-- Insertion de la balise <img> -->
    <img src="image_lapin.png">
    <italique>Image de mon lapin</italique>
  </hf>
</body>

Votre image s'affichera sans aucun problème !

5. Problèmes et erreurs

Si vous rencontrez un problème ou une erreur non-prévue, merci de me contacter en MP ou par Discord : UBrainDev#3166

Si la page vous affiche ceci (par exemple) 

Au lieu de vous afficher le HTML, c'est que le JavaScript ne s'est pas exécuté : 
Vérifiez que les liens soient valides et assurez-vous de ne pas avoir modifié le fichier JS, ne pas avoir fait d'erreur d'utilisation, vérifier que les ID compatissent (de base A) et que JavaScript est activé dans votre navigateur

6. Version 1.1 et BETA

Cette version est une BETA, elle n'est pas du tout complète et très peu stable.
La version 1.1 sortira "un jour" (moi et les dates......)

Elle comprendra :

- Les attributs CSS

- Nouvelles balises

- Amélioration de la stabilité

Et pas mal de blabla

Enjoy !

Si le pluggin vous plait, n'hésitez pas à mettre un +1, 

On se retrouve bientôt pour un nouveau pluggin (ou une mise à jour) !

Cordialement,

UBrain,

PAIN A LA CHOCOLATINE

BANDE D'INCULTES !