addons FrenchHTML BETA - Codez et apprenez en Français !

[Ubrain 30]

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

Révélation

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>";}}}

Je vous l'accorde, cela ressemble plus à du pâté de code inutile qu'à autre chose

 

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 

Pour avoir accès à ce lien, merci de vous connecter.

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 :

Pour avoir accès à cette image, merci de vous connecter.

 

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

 

2.2 Liste des possibilités de balises HF

 

1. Textes

Révélation

C'est un peu limité de ne pouvoir mettre que des grands titres sur votre page pour écrire...
Voici 6 autres grandeurs de texte disponible :

<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

Révélation

Centrer les éléments est simple,
Vous devez utiliser la balise <centre>

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

Celui-ci fonctionne pour la plus part des types d'éléments

Notez aussi qu'il reste déconseillé de l'utiliser.

 

3. Faire des listes désordonnées

Révélation

C'est un peu plus technique et cela demande un peu plus de balises que la plus part des autres balises,
Pour faire une liste utilisez ce code :

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

Chaque balise <element> forme une ligne de la liste

 

4. Saut de ligne

Révélation

Rien de plus simple

<sa>

Astuce : pour vous aider à retenir cette balise, dites-vous simplement que sa sont les deux premières lettres du mot "sauter" pour "sauter une ligne"

 

5. Gras / Italique / Barré

Révélation

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

 

 

4. Titre de la page (<title>)

Révélation

<page>Page de test</page>

Ceci représente le texte écrit dans l'onglet, par exemple si j'entre "page de test" dans la balise, le résultat sera le suivant

Pour avoir accès à cette image, merci de vous connecter.

 

5. Boutons

Révélation

<bouton>Voici un bouton</bouton>

 

 

6. Tableau

Révélation

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

Résultat :

Pour avoir accès à cette image, merci de vous connecter.

 

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) 

Pour avoir accès à cette image, merci de vous connecter.

 

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,

[Nagamasa 27]

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 ?

[Ubrain 30]

à 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

[Henri 80]

Pas mal, pas mal. 

[Akushi 75]

Je vois pas l'utilité de ça mais bon sachant que comme quelqu'un l'as dis quelqu'un la personne devras réapprendre la base du codage en html mais merci quand même

[Chesterfield 48]

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 ! 

Pour avoir accès à cette image, merci de vous connecter.

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

 

[Ubrain 30]

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 ! 

Pour avoir accès à ce lien, merci de vous connecter.

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

 

Merci beaucoup !

[Akushi 75]

il y a 5 minutes, Ubrain a dit :

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

 

 

Merci beaucoup !

D'ici que tu as les bases en anglais rien de difficile

h1,h2,h3,h4,h5,h6,p,span,b,i

html,body

section,div,center

marquee

et j'en passe

Modifié le 6 octobre 2018 par Akushi

[R4x0r3 48]

C'est plutôt pas mal pour une première approche du code , mais vraiment que pour la logique , il faudra vite basculer sur du vrai code pour progresser , mais joli travail !

 

Je me permet de faire une parenthèse il y a une appli dans le même ésprit qui est plutôt pas mal pour les débutants (Même confirmé qui souhaitent réviser aha) : GrassHopper

Pour avoir accès à ce lien, merci de vous connecter.

 

[Yumi 85]

Salut,

 

Vu ce que je vois, il serait plus simple d'utilisé directement l'HTML (et HTML5) parce que <i> qui devient <italique> ou <ul> qui devient <ligne> et <li> qui devient <colonne> fin bref, si on est débutant c'est plus intéressant de commencer le vrai code directement.

 

- Rick

[Nagasaki 117]

Salut, 

 

Sujet très bien expliqué, je pense que ça peut très bien aider les débutants et simplifier leurs codes si ils sont perdu. 

 

Good job. 

 

 

 

[Wuro 0]

Merci pour le coup de pouce l'ami!

[achrafmaziz 29]

Well done! 

+1

[SkyLoard 5]

Sa fais trop bizarre de voir du code en français :') gg