SC@LPA PRODUCTION

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

Dix-huit exercices en ligne sur l'imparfait

18 Exercices de conjugaison sur l'imparfait de certains verbes particuliers du premier groupe en IER, YER, GER, CER. Une version pdf est disponible : exemple.

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

Voir les six dictées en ligne

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 :

Disposer d'un éditeur de texte capable de sauvegarder les fichiers en UTF-8 comme : Notepad++
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.
Comprendre la structure des cadres (frame en anglais) dans une page html : cours en ligne ici, là ou encore là.

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.

Exemple en ligne

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

Le package complet au format zip

mercredi 25 janvier 2012

histoire : Charlemagne a-t-il inventé l'école?

L'histoire de Charlemagne à réviser à l'aide d'un mot croisé et des manuels CM2 SEDRAP "A nous le monde" et Hatier "histoire au cycle 3".

On en parlait hier : la pornographie à l'école

SERVICE PUBLIQUE : Une émission sur France Inter du mercredi 25 janvier : Le Porno influence-t-il notre sexualité ?

samedi 14 janvier 2012

Walk Off The Earth : Trop fort !

Walk Off The Earth - Somebody That I Used To Know - Buzz

Merci à Denis pour le lien...

Somebody That I Used To Know

Now and then I think of when we were together
Like when you said you felt so happy you could die
Told myself that you were right for me
But felt so lonely in your company
But that was love and it's an ache I still remember
You can get addicted to a certain kind of sadness
Like resignation to the end
Always the end
So when we found that we could not make sense
Well you said that we would still be friends
But I'll admit that I was glad that it was over
But you didn't have to cut me off
Make out like it never happened
And that we were nothing
And I don't even need your love
But you treat me like a stranger
And that feels so rough
You didn't have to stoop so low
Have your friends collect your records
And then change your number
I guess that I don't need that though
Now you're just somebody that I used to know
Now you're just somebody that I used to know
Now you're just somebody that I used to know
Now and then I think of all the times you screwed me over
But had me believing it was always something that I'd done
And I don't wanna live that way
Reading into every word you say
You said that you could let it go
And I wouldn't catch you hung up on somebody that you used to know...
But you didn't have to cut me off
Make out like it never happened
And that we were nothing
And I don't even need your love
But you treat me like a stranger
And that feels so rough
You didn't have to stoop so low
Have your friends collect your records
And then change your number
I guess that I don't need that though
Now you're just somebody that I used to know
Somebody...
I used to know
That I used to know
Somebody...
Now you're just somebody that I used to know

Original de Gotye :

Autres covers :
http://www.youtube.com/watch?v=KJI0D9hhuwM&feature=related

http://www.youtube.com/watch?v=pz278-cjgkk

Pages