Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1553 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  reflexion sur conception site web educatif

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

reflexion sur conception site web educatif

n°1463243
kallawoen
Posté le 23-10-2006 à 16:21:20  profilanswer
 

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

mood
Publicité
Posté le 23-10-2006 à 16:21:20  profilanswer
 

n°1463266
anapajari
s/travail/glanding on hfr/gs;
Posté le 23-10-2006 à 16:40:21  profilanswer
 

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>

n°1463268
FlorentG
Unité de Masse
Posté le 23-10-2006 à 16:41:08  profilanswer
 

Avec scriptaculous, on peut faire des trucs sympatoche

n°1463619
sigmar_
Posté le 23-10-2006 à 22:48:56  profilanswer
 

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
n°1465496
kallawoen
Posté le 26-10-2006 à 15:27:25  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  reflexion sur conception site web educatif

 

Sujets relatifs
Bug graphique, avec les images selon la résolution, firefox et iescript multi upload multi site
[MySQL] Conception : comment lancer des requetes plannifieesVérifier qu'un site répond (en Javascript - AJAX ?)
La bonne methode pour faire un sitesite d apprentissage du "c".
Projet siteSite différent sous Firefox et I.E.
logiciel de conception de site web 
Plus de sujets relatifs à : reflexion sur conception site web educatif

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.068 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR