Forum d'Entraide Informatique (FEI)

Salut...

Je propose ici de partager avec vous un outil très sympathique et qui pourrai être mis a disposition des élèves en formation codage.

Cette outil, permet de vérifier le résultat de son code directement dans une page Web.

Pour exemple, voici celui que j'utilise personnellement.

http://forumdoublure.forumgratuit.org/h ... ur-de-code


Gabriel si ca t'intéresse, tu crée une page web et tu colle ce code dedans, (modifiable a volonté bien sur)

Et tu as plus que a donner l'url a tes élèves.



pspan id="webaddress" style="position:relative; visibility:hidden; font-style:italic; font-weight:bold"FONT COLOR=0000DDTesteur de code HTML du forum F.E.I.com/FONT/span
script language="JavaScript"!--center
 
if (document.getElementById)
   {
   if(document.all)
      widthe = document.body.clientWidth;
   else
      widthe = window.innerWidth;
   document.getElementById("webaddress").style.left=widthe;
   document.getElementById("webaddress").style.visibility="visible";
   }

function moveit()
   {
   if (widthe15)
      {
      document.getElementById("webaddress").style.left=widthe;
      widthe -= 10;
      }
   else{
      document.getElementById("webaddress").style.fontStyle="normal"
      document.getElementById("webaddress").style.left=0
      clearInterval(moving)
      }
   }
if (document.getElementById)
   moving=setInterval("moveit()",1)
// --/script
/p
noscripta href="http://www.editeurjavascript.com/mycircle/" mce_href="http://www.editeurjavascript.com/mycircle/"echange de lien/a/noscriptbody style="background-color:black;"table style="width:500px;border:solid 1px #959492;background:#ebebea"
trtd valign="top"
form name="form1" method="post"
textarea name="code" wrap="soft" onclick="focus(this.code)" style="border:solid 1px #b9b8b6;padding:5px;width:700px;height:300px;scroll:auto;"
Salut ...

Voici un outil qui permet de voir le resultat des codes HTML que vous cree directement dans cette page Web, et donc vous pouvez le modifier instantanement.

Effacez ce message avec le bouton Effacer, puis tapez votre code et cliquez sur Pre-visualiser pour verifier votre travail.
Par exemple verifier le comportement de ce code:

pspan id="webaddress" style="position:relative; visibility:hidden; font-style:italic; font-weight:bold"FONT COLOR=0000DDB Testeur de code HTML/FONT COLOR/span
script language="JavaScript"!--
 
if (document.getElementById)
   {
   if(document.all)
      widthe = document.body.clientWidth;
   else
      widthe = window.innerWidth;
   document.getElementById("webaddress").style.left=widthe;
   document.getElementById("webaddress").style.visibility="visible";
   }

function moveit()
   {
   if (widthe15)
      {
      document.getElementById("webaddress").style.left=widthe;
      widthe -= 10;
      }
   else{
      document.getElementById("webaddress").style.fontStyle="normal"
      document.getElementById("webaddress").style.left=0
      clearInterval(moving)
      }
   }
if (document.getElementById)
   moving=setInterval("moveit()",1)
// --/script
/p
noscript




/textarea
/form
/tdtd valign="top"
iframe src="about:blank" name="preview" style="height:600px;width:600px;border:solid 1px #b9b8b6;background:#ffffff" frameborder="0"
/iframe
/td
/tr
/table
button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()"Pre-visualiser/button
button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()"Effacer/button
button onclick="window.location.href=window.location.href"Actualiser la page/button/centerbrbrmarqueeFONT COLOR=0000DDDecrochez l'onglet de votre navigateur,et cet outil deviendra votre meilleur amis ;-)/FONT COLOR/marquee

Salut, San.

Salut,

Ça a l'air de m'intéresser, c'est pas mal, merci beaucoup

J'essaye d'installer ça demain, je te tiens au courant.

@+

Gabriel.

Salut Gab'...

L’avantage avec ca c'est que il est possible d'ajouter des objets dans la page web, (juste a coté) comme une calculatrice par exemple (très pratique pour additionner ou soustraire des Pixels), ou le module d'un hébergeur, ou une liste de liens qui dirigent vers des banques d'images, de balises, de sites spécialisés...

Une caisse a outils en faite.

Il est bien sur possible de l’exécuter dans une POP UP, pour ce soit directement détacher du navigateur au clic, mais il faut le dire a AdBlock.



Bonne nuit.

Re,

Oui.

Bonne nuit.

Salut,

C'est bon, c'est fait.

Merci, bonne nuit.

Gabriel.

Yo...

Dommage que l'outil ne soit pas accessible a tout le monde.

Salut


SG a raison

Cet outil peut être nécessaire pour un internaute

Plus on le voit, mieux c'est, non ?

Je pense que cela peut faire venir du monde !


Autant le mettre en avant

Genre, le mettre dans les téléchargements, et faire uen courte annonce, mais évocatrice.

@+

Salut little...

Bas dans les téléchargements c'est pas possible c'est une page web, mais c'est vrai que ca peut faire venir du monde si ils voient un nom évocateur dans un lien dans Google.

Pour info je cherche a ajouter dans ce code un générateur de couleur complexe, avec pipette si possible, si quelqun a une idée pour réaliser ca.

Hello,

J'y ai pensé.
Je réfléchissais si j'allais le faire ou non...

Donc oui je vais le faire.

La page est celle-ci : http://www.forum-entraide-informatique. ... t-de-codes

Je vais la mettre dans les tutos je pense.
Je vous tiens au courant.

@+

Gabriel.

Et oui lorsque j'ai découvert ca j'ai pas résisté a partager.

Mais tu peut ajouter un module hébergement aussi ou une calculatrice ou même différend liens vers une liste de balises html (tiens il faudrait en créer une si elle existe pas sur fei)

L'idée c'est d'avoir tout sous la main lorsque on crée un code et comme c'est une page html on peut faire des liens qui s'ouvre dans une autre fenetre pour ne pas perdre son travail

un peut comme ca (c'est pas fini)
http://forumdoublure.forumgratuit.org/h ... ur-de-code
La calculatrice est en dessous voici son script:

html
head
titleCalculatrice de FEI/title

script language="JavaScript"

function verification(entree) {
  var car ="1234567890[]()+-.*,/";
  for (var i = 0; i entree.length; i++)
  if (car.indexOf(entree.charAt(i))0 ) return false;
  return true;
 }

 function calcul() {
  var a = 0;
  if (verification(window.document.calculatrice.result.value))
    a = eval(window.document.calculatrice.result.value);
  window.document.calculatrice.result.value = a;
 }

 function ajouter(caracteres) {
  window.document.calculatrice.result.value =
  window.document.calculatrice.result.value + caracteres;
 }

 function fonction_speciale(fonction) {
  if (verification(window.document.calculatrice.result.value)) {
    if(fonction == "sqrt") {
      var a = 0;
    a = eval(window.document.calculatrice.result.value);
    window.document.calculatrice.result.value = Math.sqrt(a);
  }
  if(fonction == "pow") {
    var a = 0;
    a = eval(window.document.calculatrice.result.value);
    window.document.calculatrice.result.value = a * a;
  }
  if(fonction == "log") {
    var a = 0;
    a = eval(window.document.calculatrice.result.value);
    window.document.calculatrice.result.value = Math.log(a);
  }
  } else window.document.calculatrice.result.value = 0
}

/script
/head
body
table border bgcolor=#0001cc
th
form name="calculatrice"
center
textarea style="WIDTH: 186px; HEIGHT: 24px; TEXT-ALIGN:right;" name="result" align="right" class="affiche"/textareabr
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b2" value="7" onClick="ajouter('7')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b3" value="8" onClick="ajouter('8')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b4" value="9" onClick="ajouter('9')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b12" value=":" onClick="ajouter('/')" size="30"br
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b5" value="4" onClick="ajouter('4')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b6" value="5" onClick="ajouter('5')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b7" value="6" onClick="ajouter('6')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b11" value="x" onClick="ajouter('*')" size="30"br
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b8" value="1" onClick="ajouter('1')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b9" value="2" onClick="ajouter('2')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b10" value="3" onClick="ajouter('3')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b13" value="-" onClick="ajouter('-')" size="30"br
input style="FONT-WEIGHT: bold; WIDTH: 92px; HEIGHT: 24px" type="button" name="b14" value="0" onClick="ajouter('0')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b15" value="." onClick="ajouter('.')" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b16" value="+" onClick="ajouter('+')" size="30"br
input style="FONT-WEIGHT: bold; WIDTH: 140px; HEIGHT: 24px" type="reset" name="b17" value="ON/C" size="30"
input style="FONT-WEIGHT: bold; WIDTH: 44px; HEIGHT: 24px" type="button" name="b18" value="=" onClick="calcul()" size="30"br
input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value="sqrt " onClick="fonction_speciale('sqrt')"
input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value=" pow " onClick="fonction_speciale('pow')"
input style="FONT-WEIGHT: bold; WIDTH: 60px; HEIGHT: 24px" type="button"  class="button" value=" log " onClick="fonction_speciale('log')"
/center
/form
/th
/table
/body
/html


UP si quelqu’un ce sent capable de manipuler du flash pour inserer un module couleur, je suis preneur car la ca fume

Yop,

Bonne idée.

Je regarde tout ça

@+

Gabriel.

Hello,

La calculatrice. http://www.forum-entraide-informatique. ... lculatrice

@+

Gabriel.

Gab'

La calculatrice l'idée c'était de la mettre dans la page ou ce trouve l'outil, pour avoir tout sous la main regarde
http://forumdoublure.forumgratuit.org/h ... ur-de-code

Elle est en dessous, mais tu peut la mettre ailleurs.

Et un module hebergement c'est facile en voila un

iframe src="http://www.zupmage.eu/web-files/modules/module.php" width="260" height="135" frameborder="0" scrolling="no" /iframe
comme tu le vois j'ai rajouté un menu deplillable en haut pour mettre des racourcis qui on raport avec le webmastering

voici son code



head meta http-equiv="content-type" content="text/html; charset=utf-8" / !-- stylesheets -- link rel="stylesheet" href="http://sd-1.archive-host.com/membres/up ... /slide.css" type="text/css" media="screen" / !-- PNG FIX for IE6 -- !-- http://24ways.org/2007/supersleight-tra ... png-in-ie6 -- !--[if lte IE 6] script type="text/javascript" src="http://sd-1.archive-host.com/membres/up ... js"/script ![endif]-- !-- jQuery - the core -- script src="http://sd-1.archive-host.com/membres/up ... -132min.js" type="text/javascript"/script !-- Sliding effect -- script src="http://sd-1.archive-host.com/membres/up ... e/slide.js" type="text/javascript"/script /head!-- Contenu --div id="toppanel"
   div id="panel"
      div class="content clearfix"
 
Tu vois Gab'l suffit de mettre des lien cliquable vers des applications, des sites spécialises, etc etc etc
a href="http://www.iniseo.com/outils-webmaster/article-99.php" title="en utilisent ce generateur de liens" target="_blank"en utilisent ce generateur de liens/a les liens s’ouvriront dans une autre fenetre pour garder l'outil ouvert. ;-)
      /div
   /div !-- /Contenu --   

    !-- The tab on top --   
   div class="tab"
      ul class="login"
          li class="left" /li
           li/li
         li class="sep"|/li
         li id="toggle"
            a id="open" class="open" href="#"Navigation/a
            a id="close" style="display: none;" class="close" href="#"Fermer/a         
         /li
          li class="right" /li
      /ul
   /div !-- / top --
   
/div !--panel --
Tu mets juste les codes a la suite de celui que tu as déjà mis, éventuellement tu les repositionnent et voila.


UP, si quelqu’un ce sent capable de manipuler du flash pour inserer un module couleur, je suis preneur car la ca fume

Je cherche a appliquer ca ! ! !

http://www.eyecon.ro/colorpicker/#about

Salut...

Gab' tu veut bien etre gentil est ajouter ce code au tout début du code de la page, c'est entre autre pour nommer l'onglet.


!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titleTesteur de code de FEI.com/title
Et puis UP
http://www.forum-entraide-informatique. ... dage#27216

C'est fait, j'ai rajouté les codes.

Salut little...


Pour info je cherche a ajouter dans ce code un générateur de couleur complexe, avec pipette si possible, si quelqun a une idée pour réaliser ca.
hello

si tu veux regarder ici

c'est mon site == http://michegau.free.fr/outils.php

le générateur fonctionne avec IE mais pas avec FF

j'ai bloqué les scripts sur FF

sinon tu as cette boite à couleur

http://pourpre.com/colorbox/download.php?lang=fr

si cela peut aider?


Edit: je viens de m'apercevoir que plus rien ne fonctionne, vous avez les liens

Bonsoir migau ...

En faite je recherche a mettre en place un truc comme ca
http://johndyer.name/refactoring-the-ja ... l-and-css/

Mais c'est un peu chaud pour moi pour l'instant

J'ai pas encore eu le temps d'ouvrir le téléchargement que tu ma donnais mais je sais déjà que je vais m'arracher les cheveux a tout comprendre.

Sinon l'outil dont il est question ici ce trouve la
http://www.forum-entraide-informatique. ... t-de-codes

J'ai donc exactement la même page sauf quelque bricole en plus, une calculatrice par exemple pour les PX c'est bien pratique.
En faite je cherche a mettre tout dans la même page pour plus de facilité, même les différents liens des hébergeurs flash et javascript et compagnie...

J'ajoute aussi des frames qui s'ouvre vias des POP UP pour pouvoir avoir un sélecteur de couleur ou un module d’hébergement dans les onglet même si l'outil en entier est pas ouvert.

merci de l’intérêt que tu porte a ce sujet.

PS: mes liens ne fonctionnent plus je les est déplacés volontairement.

San.

Bonsoir migau ...

En faite je recherche a mettre en place un truc comme ca


San.
hello

ok, j'ai compris , tu veux tout mettre dans ton outil.
je ne saurai d'aucune aide, désolé, je ne sais pas coder

je pense seulement qu'il te sera plus facile en autoit.

bon courage, et je suivrai tes avancées

bon week

Edit : connais tu l'outil canremember de Falkra qui sers aux helpers à faire leurs canneds.
il a intégré dedans ce que tu cherches pour coloriser le texte.

Falkra , tu le trouveras sur libéllules


pour télécharger l'outil

http://telechargement.zebulon.fr/canremember.html