dimanche 26 février 2012

Les neurones de la lecture de Stanislas Dehaene


Emission de France Inter :
Stanislas Dehaene ‎
mercredi ‎22 ‎février ‎2012, ‏‎17:10:00 | podcast@radiofrance.com durée : 00:52:25 - Le Grand Entretien - par : François Busnel -
Les Neurones de la lecture © Radio France - 2012 Stanislas Dehaene est un psychologue cognitif et neuroscientifique français né le 12 mai 1965 à Roubaix. Ses principaux domaines de recherche concernent les bases cérébrales de l'arithmétique et de la numération, la lecture et la conscience, thématiques qu'il explore au moyen d'expériences de psychologie cognitive et par l'imagerie cérébrale (imagerie par résonance magnétique fonctionnelle, magnétoencéphalographie et électroencéphalographie).
Fichier mp3

Lien permanent sur le site

samedi 18 février 2012

jeudi 16 février 2012

Le passé simple : exercices en ligne

Une série de mots-croisés en ligne pour travailler, réviser les verbes des premier, deuxième et troisième groupe au passé simple. Une version pdf existe pour chacun d'eux: exemple.

mardi 14 février 2012

120 mots invariables : 6 dictées en ligne

Mise à jour et correction des bugs dûs au codage des apostrophes dans hotpotatoes : pour y remédier il faut ajouter des solutions dans la zone "autres bonnes réponses acceptées"
' = alt+039
‘ = alt+0145
’ = alt+0146
exemple avec d'abord =  d‘abord = d’abord

Le futur : exercices d'apprentissage

Correction de quelques erreurs de personne dans les exercices précédents et ajouts de trois nouveaux mots-croisés sur le futur simple ici.

Créer une fenêtre modale


Créer une fenêtre modale pour remplacer le "promt"
Voir l'exemple


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Conforming XHTML 1.0 Transitional Template</title>
<style type="text/css">
<!--
body {
    height:100%;
    margin:0;
    padding:0;
    background-color: #ffff99;
}
#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
    background-image:url(overlay.png);

}
#overlay div {
    width: 300px;
    margin: 100px auto;
    background-color: #99ff66;
    border: 4px solid #666633;
    padding: 15px;
    text-align: center;
}
.cntr {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
#okBtn {
  width:100px;
  margin:5px;
}
#nom {
 width: 150px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}
-->
</style>
<script type="text/javascript">
<!--
function overlay() {
 el = document.getElementById("overlay");
 el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

function affichage() {
 var DivIdentity = document.getElementById('identity');
 var nomsurfeur = document.getElementById('nom').value;
 
 if ((nomsurfeur == "") || (nomsurfeur == "???   ???") || (nomsurfeur === null)) {
  nomsurfeur = 'Surfeur Anonyme';
 }
 DivIdentity.innerHTML += '<h3 \" class=\"cntr\">Bienvenue ' + nomsurfeur + '</h3>';
 overlay();
}
// -->
</script>

</head>

<body onload="javascript:overlay();">
<h1>Titre</h1>
<div id="identity"></div>
Main core from : 
<a href="http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/">raventools.com</a>

<div id="overlay">
 <div>
 <p>Ecris ton nom :</p>
 <input id="nom" onFocus="select();" type="text" value="???   ???" /><br />
 <button id="okBtn" onclick='affichage()'>Ok</button>
 </div>
</div>
</body>
</html>
Syntax Highlighter permet de mettre en couleur le code de cette ressource :

dimanche 5 février 2012

Création d'un diaporama avec annonce défilant en bas de page

Les pré-requis :
  1. Disposer d'un éditeur de texte capable de sauvegarder les fichiers en UTF-8 comme : Notepad++
  2. Télécharger  Highslide JS qui est une visionneuse d'images (et autres médias) écrite en JavaScript ou encore mieux : utiliser l'éditeur du site en question pour élaborer la plus grande partie du travail.
  3. Comprendre la structure des cadres (frame en anglais) dans une page html : cours en ligne ici,  ou encore .

Celle retenue sera de 2 cadres horizontaux donc il faut :

un fichier index.html (auquel on ne touche pas)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Collège le Dinandier</title>
<style type="text/css">
body {background-color: black;}
 </style>
</head>
<frameset frameborder="no" framespacing="0" rows="90%, 10%">
<frame src="galerie.html" name="haut" id="haut">
<frame src="info.html" name="bas" id="bas">
<noframes>
<body>
Cette page HTML nécessite un navigateur supportant les frames, 
veuillez nous en excuser.
</body>
</noframes>
</frameset>
</html>


un fichier info.html (qu'il faudra modifier à l'aide de notepad++)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Le Dinandier</title>
<style type="text/css">
body {
background-color: black;
}
marquee {
color: grey; 
font-size: 2.5em; 
font-weight: normal; 
margin: 0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
}
</style>
</head>
<body id="info">
<!--START INFO 
Les balises marquee sont obsolètes, mais fonctionnent toujours.
Elles sont ici la méthode la plus simple pour afficher une information en bandeau :
Ne modifier que le texte entre les deux balises sans toucher au reste.
Enregistrer le fichier sans changer son nom. -->
<marquee>
Les balises marquee sont obsolètes, mais fonctionnent toujours...
</marquee>
<!--END INFO -->
</body>
</html>


A l'aide de l'éditeur Notepad++, modifier seulement l'information que vous voulez voir défiler entre les balises  puis sauvegarder.

un fichier galerie.html (qu'il faudra modifier à l'aide de notepad++)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS - Custom Example</title>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<style type="text/css">
body {background-color: black;}
 </style>
</head>

<body>
<!--START COPIER/COLLER -->
<div class="highslide-gallery">
 <a id="thumb1" href="highslide/images/large/Tulips.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Tulips.jpg"  alt=""/>
 </a>
 <div class="hidden-container">
 <a href="highslide/images/large/Lighthouse.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Lighthouse.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Koala.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Koala.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Chrysanthemum.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Chrysanthemum.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Penguins.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Penguins.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Desert.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Desert.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Jellyfish.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Jellyfish.jpg"  alt=""/>
 </a>
 <a href="highslide/images/large/Hydrangeas.jpg" class="highslide" 
   title="" 
   onclick="return hs.expand(this, config1 )">
  <img src="highslide/images/thumbs/Hydrangeas.jpg"  alt=""/>
 </a>
 </div>
</div>
<!--END COPIER/COLLER -->
</body>
</html>



Tous ces fichiers sont contenus dans le package zip en bas de page.
Etape 1 de l'élaboration du fichier galerie.html
D'abord, rendez-vous sur l'éditeur du site en question pour élaborer la plus grande partie du travail. Modifiez les paramètres comme bon vous semble. Suivez les instructions en ligne jusqu'à l'étape finale de publication :
L'éditeur en ligne de highslide.com

Une fois les images sélectionnées, cliquez sur le bouton publish de l'éditeur :


Acceptez la licence et récupérez les fichiers au format zip en cliquant sur le lien download a zip archive :


Dé-zippez le fichier obtenu "highslide-custom" clic-droit puis extraire:



On obtient la structure de fichier et dossier suivante :


Le dossier highslide contient les sous-dossiers et fichiers suivants :




Le dossier large contient les images originales, le dossier thumbs contient les vignettes correspondantes.

Le rendu du diaporama est de meilleure qualité si vos images originales ont toutes le même format (1280 x 1024  et qu'elles sont toutes orientées au format paysage par exemple).

Etape 2 Modification du fichier galerie.html 
Ouvrir galerie.html et highslide-custom-example.html avec Notepad++ (clic droit /éditer).


Récupérer la portion de code dans highslide-custom-example.html comprise entre les balises : 



 et la coller dans la zone correspondante de galerie.html. Sauvegardez ce dernier.

Visionnez le résultat en double-cliquant sur le fichier index.html. 



Voici le fichier de configuration utilisé pour obtenir le résultat ci-dessus. (sauvegarder 30 jours à partir d'aujourd'hui)