SC@LPA PRODUCTION

mardi 14 février 2012

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

mercredi 4 janvier 2012

SAVOIR UTILISER LES MOTS : MOITIE / DOUBLE - TIERS / TRIPLE - QUART / QUADRUPLE

Divers liens vers des ressources et mise à disposition d'un fichier Excel générateur d'exercices pour travailler la compétence.
Exemple de feuille d'exercices obtenue.

dimanche 4 décembre 2011

Logiciel : écrire en chiffres romains

Mise à jour du logiciel : écrire en chiffres romains . Dans cette mise à jour, une page avec les solutions est désormais générée automatiquement quand on imprime ou quand on crée un fichier RTF. (une feuille A4 de 60 questions + les réponses)

Nom :        Chiffres romains
Version :        1.6.0.0
Éditeur :        SC@LPA PRODUCTION
Les composants requis suivants sont obligatoires :