dimanche 11 mars 2012

Le livret personnel de compétences, quel choix?

livreval
Le livret personnel de compétences L'outil numérique que nous avons finalement choisi, après en avoir essayé plusieurs. Parmi ses nombreuses qualités : son ergonomie écrase celle de ses concurrents !


Mise à jour des liens et rubriques sur les outils pour les nouveaux programmes 2008.

samedi 10 mars 2012

Les ados transformées en poupées ?



Service public par Guillaume Erner du lundi au vendredi de 10h à 11h Les ados transformées en poupées ?


Le reportage de Raphaëlle Mantoux 
Le but d'Alain Delorme, photographe, n'est pas réellement l'esthétique mais la dénonciation : "Son œuvre est une critique acerbe de l'utilisation de l'image des enfants, en particulier des petites filles soumises au diktat publicitaire faisant d'elles des objets de consommation utiles aux lois du marché "

vendredi 2 mars 2012

CONCERT 2012



L'amour à la machine
Alain Souchon

Passez notre amour à la machine.
Faites le bouillir
Pour voir si les couleurs d'origine
Peuvent revenir.
Est-ce qu'on peut ravoir à l'eau de Javel
Des sentiments,
La blancheur qu'on croyait éternelle,
Avant ?

Pour retrouver le rose initial
De ta joue devenue pâle,
Le bleu de nos baisers du début,
Tant d'azur perdu.

Passez notre amour à la machine.
Faites le bouillir
Pour voir si les couleurs d'origine
Peuvent revenir.
Est-ce qu'on peut ravoir à l'eau de Javel
Des sentiments,
La blancheur qu'on croyait éternelle,
Avant ?

Matisse, l'amour c'est bleu difficile,
Les caresses rouges fragiles,
Le soleil de la vie les tabasse,
Et alors, elles passent.

Allez ! A la machine !!

Le rouge pour faire tomber la misère
De nos gentils petits grands-pères,
Noires, les mains dans les boucles blondes
Tout autour du monde.

Passez notre amour à la machine.
Faites le bouillir
Pour voir si les couleurs d'origine
Peuvent revenir.
Est-ce qu'on peut ravoir à l'eau de Javel
Des sentiments,
La blancheur qu'on croyait éternelle,
Avant ?

Allez ! A la machine !






San Francisco
Maxime Leforestier

 Em                  G 
 C'est une maison bleue
 Bm              C 
 Adossée à la colline

 On y vient à pied
 G 
 On ne frappe pas
           D                      C    Em 
 Ceux qui vivent là ont jeté la clé


 On se retrouve ensemble
 Après des années de route
 Et on vient s'asseoir
 Autour du repas
 Tout le monde est là
 À cinq heures du soir

 Em               G         A 
 Quand San Francisco s'embrume
                  C        D 
 Quand San Francisco s'allume
            Bm 
 San Francisco
         Em 
 Où êtes-vous
 G         A 
 Lize et Luc,
 C 
 Psylvia
 D        Em 
 Attendez-moi

 Nageant dans le brouillard
 Enlacés roulant dans l'herbe
 On écoutera Tom à la guitare
 Phil à la kena jusqu'à la nuit noire
 Un autre arrivera
 Pour nous dire des nouvelles
 D'un qui reviendra dans un an ou deux
 Puisqu'il est heureux on s'endormira

 Quand San Francisco se lève...

 C'est une maison bleue
 Accrochée à ma mémoire
 On y vient à pied
 On ne frappe pas
 Ceux qui vivent là
 Ont jeté la clé
 Peuplée de cheveux longs
 De grands lits et de musique
 Peuplée de lumière
 Et peuplée de fous
 Elle sera dernière
 À rester debout.
Si San Francisco s'effondre...





Aragon Et Castille
Bobby Lapointe

Au pays da-ga d'Aragon
Il y avait tu-gu d'une fill'
Qui aimait les glaces au citron
Et vanille ...
Au pays de-gue de Castille
Il y avait tun-gun d'un garçon
Qui vendait des glaces vanille
Et citron.

Moi j'aime mieux les glaces au chocolat,
Poil au bras.
Mais chez mon pâtissier il n'y en a plus
C'est vendu.
C'est pourquoi je n'en ai pas pris
Tant pis pour lui
Et j'ai mangé pour tout dessert
Du camembert.
Le camembert c'est bon quand c'est bien fait
Viv' l'amour.
A ce propos rev'nons à nos moutons

Refrain

Vendre des glaces c'est un très bon métier
Poil aux pieds
C'est beaucoup mieux que marchand de mouron
Patapon
Marchand d'mouron c'est pas marrant
J'ai un parent
Qui en vendait pour les oiseaux
Mais les oiseaux
N'en achetaient pas, ils préféraient l'crottin
De mouton
A ce propos rev'nons à nos agneaux.

Refrain

Mais la Castill' ça n'est pas l'Aragon
Ah ! mais non
Et l'Aragon ça n'est pas la Castille
Et la fill'
S'est passée de glac's au citron
Avec vanille
Et le garçon n'a rien vendu
Tout a fondu.
Dans un commerc' c'est moch' quand le fond fond
Poil au pieds
A propos d'pieds, chantons jusqu'à demain ...

Refrain






Chupee - Cocoon

We have gone to the country 
In your old car 
We have lost our way 
So many times 

Hello, hello 
I take you on a trip 
Hello, hello 
I take you on a trip 

Eating your Chupa Chup 
A plane is making a loop 
The beavers are so cute 
A tree gave me a fruit 

Hello, hello 
I take you on a trip 
Hello, hello 
I take you on a trip





Le jazz et la java
Claude Nougaro

Quand le jazz est
Quand le jazz est là
La java s’en
La java s’en va
Il y a de l’orage dans l’air
Il y a de l’eau dans le gaz
Entre le jazz et la java

Chaque jour un peu plus
Y a le jazz qui s’installe
Alors la rage au cœur
La java fait la malle
Ses p’tit’s fesses en bataille
Sous sa jupe fendue
Elle écrase sa Gauloise
Et s’en va dans la rue

Quand le jazz est
Quand le jazz est là
La java s’en
La java s’en va
Il y a de l’orage dans l’air
Il y a de l’eau dans le gaz
Entre le jazz et la java

Quand j’écoute béat
Un solo de batterie
V’là la java qui râle
Au nom de la patrie
Mais quand je crie bravo
A l’accordéoniste
C’est le jazz qui m’engueule
Me traitant de raciste

Quand le jazz est
Quand le jazz est là
La java s’en
La java s’en va
Il y a de l’orage dans l’air
Il y a de l’eau dans le gaz
Entre le jazz et la java

Pour moi jazz et java
C’est du pareil au même
J’me saoule à la Bastille
Et m’noircis à Harlem
Pour moi jazz et java
Dans le fond c’est tout comme
Le jazz dit " Go men "
La java dit " Go hommes "

Quand le jazz est
Quand le jazz est là
La java s’en
La java s’en va
Il y a de l’orage dans l’air
Il y a de l’eau dans le gaz
Entre le jazz et la java

Jazz et java copains
Ça doit pouvoir se faire
Pour qu’il en soit ainsi
Tiens, je partage en frère
Je donne au jazz mes pieds
Pour marquer son tempo
Et je donne à la java mes mains
Pour le bas de son dos
Et je donne à la java mes mains
Pour le bas de son dos

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)