reflexion sur conception site web educatif

reflexion sur conception site web educatif - HTML/CSS - Programmation

Marsh Posté le 23-10-2006 à 16:21:20    

Bonjour,
 
C'est la premiere fois que je poste sur ce forum néanmoins j'y viens régulierement.
 
Passons aux choses sérieuse, je suis étudiante en infographie et pour mon tfe (memoire) j'ai choisi de réaliser un site web educatif plus axés sur un côté interractif ludique et en même temps amusant. Un peu une adaptation de la célèbre émission "c'est pas sorcier" tout le monde à déjà regardé cette émission. Où bien par exemple vous savez des livres où il y a comme des surprises à l'intérieur, on ouvre le livre et il se déplie et on y sort des autre fiches...
 
Je suis à la recherche de personnes qui aurait des idées à me transmette, jouer avec des display est une idée, pour découvrir en amenant le public à faire une action pas seulement en fesant un scrollbar abominable.
 
Merci de vos réponses si vous voulez plus de précisions n'hésitez pas.
 
Kallawoen

Reply

Marsh Posté le 23-10-2006 à 16:21:20   

Reply

Marsh Posté le 23-10-2006 à 16:40:21    

Je mettais amusé a faire le truc en dessous, il y a quelque temps. En gros ça te permet "d'explorer" le code html (ça affiche la source de l'element survolé) de ton document dynamiquement.
Il va surement falloir que tu améliores 2/3 trucs mais je pense que ça pourrait t'être utile:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Source html Element</title>
  7.   <script type="text/javascript">
  8.   //<![CDATA[
  9.   var highLightColor = 'red';
  10.   var elOver = null;
  12.   window.onload = function (e){
  13.     var aNode = document.createElement('a');
  14.     aNode.appendChild(document.createTextNode('Demarrer'));
  15.     aNode.setAttribute('id', 'start');
  16.     aNode.setAttribute('href', 'nojs.html');
  17.     aNode.onclick = function (e){
  18.       startDemo();
  19.       return false
  20.     }
  21.     document.getElementsByTagName('body')[0].appendChild(aNode);
  22.   }
  24.   function startDemo(){
  25.     nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  26.     for(var i = 0; i<nodes.length; i++){
  27.       if ( nodes[i].id != 'start' ){
  28.         nodes[i].onmouseover = function (e){
  29.           if ( elOver == null){
  30.             elOver = this;
  31.             this.style.backgroundColor = highLightColor;
  32.             displaySrc(this);
  33.           }
  34.         }
  35.         nodes[i].onmouseout = function(e){
  36.           if ( elOver == this){
  37.             elOver = null;
  38.           }
  39.           this.style.backgroundColor = '';
  40.         }
  41.       }
  42.     }
  44.     var dispContent = document.createElement('div');
  45.     dispContent.setAttribute('id','dispContent');
  46.     var clDemo = document.createElement('input');
  47.     clDemo.setAttribute('type', 'button');
  48.     clDemo.setAttribute('value', 'X');
  49.     clDemo.onclick = endDemo;
  50.     dispContent.appendChild(clDemo);
  51.     var dispNode = document.createElement('div');
  52.     dispNode.setAttribute('id','dispNode');
  53.     dispContent.appendChild(dispNode);
  54.     document.getElementsByTagName('body')[0].appendChild(dispContent);
  56.   }
  57.   function endDemo(){
  58.     document.getElementById('dispContent').parentNode.removeChild(document.getElementById('dispContent'));
  59.     nodes = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  60.     for(var i = 0; i<nodes.length; i++){
  61.       if ( nodes[i].id != 'start' ){
  62.         nodes[i].onmouseover = null;
  63.         nodes[i].onmouseout = null;
  64.       }
  65.     }
  66.   }
  67.   function displaySrc(el){
  68.     try{
  69.       var nodeSrc = ''
  70.       for(var i=0; i<el.attributes.length; i++){
  71.          nodeSrc += el.attributes[i].nodeName+"='"+el.attributes[i].value+"' ";
  72.       }
  73.       nodeSrc = "<"+el.tagName.toLowerCase()+" "+nodeSrc;
  74.       if ( el.innerHTML.length != 0){
  75.         nodeSrc += ">"+el.innerHTML+"</"+el.tagName.toLowerCase()+">";
  76.       } else {
  77.         nodeSrc += "/>";
  78.       }
  79.       nodeSrc = nodeSrc.replace("background-color: "+highLightColor+";", '');
  80.       nodeSrc = nodeSrc.replace(/ style=('|" ){2}/g, '');
  81.       /*** needed for IE ***/
  82.       nodeSrc = nodeSrc.replace(/ [A-z]+=''/g, '');
  83.       nodeSrc = nodeSrc.replace(/ [A-z]+='null'/g, '');
  84.       nodeSrc = nodeSrc.replace(/ hideFocus='false'/, '');
  85.       nodeSrc = nodeSrc.replace(/ disabled='false'/, '');
  86.       nodeSrc = nodeSrc.replace(/ tabIndex='0'/, '');
  87.       nodeSrc = nodeSrc.replace(/ contentEditable='inherit'/, '');
  88.       nodeSrc = nodeSrc.replace(/ +>/, '>');
  89.       /*** end IE ***/
  91.       document.getElementById('dispNode').innerHTML = '<xmp>'+nodeSrc+'</xmp>';
  92.     }
  93.     catch(ex){
  94.       alert("Unknown element" );
  95.     }
  96.   }
  97.   //]]>
  98.   </script>
  99.   <style type="text/css">
  100.   fieldset{
  101.     margin: 10px;
  102.   }
  103.   form{
  104.     padding: 10px;
  105.     background-color: blue;
  106.   }
  107.   #dispContent{
  108.     position: absolute;
  109.     left: 0px;
  110.     bottom: 0px;
  111.     border: 1px solid black;
  112.     margin: 5%;
  113.     width: 90%;
  114.     height: 200px;
  115.     background-color: white;
  116.   }
  117.   #dispNode{
  118.     margin: 5px;
  119.     border: 1px solid black;
  120.   }
  121.   </style>
  122. </head>
  123. <body>
  124. <h1>Demonstation</h1>
  126. <p>Un paragraphe de blabla avec <a href="lien.html">un lien</a></p>
  127. <form action="truc" method="post">
  128.    <fieldset class="f">
  129.      <legend>Champs 1</legend>
  130.      <input type="text" name="f1" id="champs1" value="pouet"/>
  131.    </fieldset>
  132. </form>
  134. <div>
  135.    <p> Blavlfm dcmdlaa <span id="s" style="font-weight:bolder;">span</span></p>
  136. </div>
  138. </body>
  139. </html>

Reply

Marsh Posté le 23-10-2006 à 16:41:08    

Avec scriptaculous, on peut faire des trucs sympatoche

Reply

Marsh Posté le 23-10-2006 à 22:48:56    

Je ne sais pas si tu demandes des conseils techniques ou quoi exactement.
Pour de l'interaction sur une page web tu as le choix entre javascript et flash (et java mais bon).
En tant qu'infographiste j'imagine que flash te sera utile dans ton futur (tu as peut-être déjà une formation?)
Mais il existe des librairies javacript simples à utiliser sinon: rico et scriptaculous, il y a des demos sur les sites respectifs.


---------------
programming cookbook
Reply

Marsh Posté le 26-10-2006 à 15:27:25    

merci pour toute vos réponse; oui en effet je cherche des application qui pourrait rendre le site plus attractif pour les enfants leur permettre d'intervenir dans la narration du site.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed