TRUCS ET ASTUCES  

                          INFORMATIQUES

 

S A Y R A C    avril 2 0 0 8

Mode dictionnaire contextuel Alexandria et Traduction automatique

Nous donnons ici, dans la partie I,  quelques informations sur des outils à télécharger (en général gratuits et en Français) et, dans la partie II,  quelques  trucs et astuces pour webmasters et développeurs amateurs. Pour ce II, toutes les manipulations proposées sont faisables facilement par tout internaute puisque la plupart du temps du copier - coller permettra d'installer les fichiers fournis; tous les fichiers nécessaires aux installations proposées seront soit intégralement listés sur cette page soit récupérables par téléchargement immédiat (grâce en particulier à l'astuce 14).

Ce fichier devrait grossir et évoluer assez régulièrement, aussi ses nouveaux éléments  seront le plus souvent classés par ordre chronologique d'installation sur cette page (dernière mise à jour: 05/01/2019: voir nouveautés et H). Compte tenu du grand nombre de textes et fichiers proposés, il est fort possible que quelques erreurs se glissent par endroits de temps en temps (vous pouvez me les signaler, ainsi que toutes améliorations ou compléments qui seront toujours les bienvenus par les liens Message Express). 

          Aléatoirement vers toutes les images de Sayrac     

I - DES OUTILS A TELECHARGER

A)  FILEZILLA 

Pour gérer votre site: FILEZILLA le meilleur outil FTP simple d'utilisation, gratuit et en FRANCAIS.

Mode d'emploi et téléchargement de  FILEZILLA  (30/10/2020: la dernière version est la 3.51.0)

B) MUZIP

Pour un compacteur-décompacteur d'archives simple, gratuit et en FRANCAIS: utilisez Muzip .

C) Lien ANTI -SPAM

Pour lutter contre les robots spammeurs, activez  un  lien anti-spam .

D) POPTRAY

Téléchargez un excellent notificateur de mail gratuit en FRANCAIS: POPTRAY.

E) EXALEAD

Essayez le nouveau moteur de recherche français EXALEAD.

F) INNOSETUP

Utilisez l'installeur pour programme Windows libre et gratuit INNOSETUP: il permet de créer facilement  un unique setup  pour faire l'installation des logiciels que vous avez développés.

G) PHOTOFILTRE

Faites des icônes personnalisées à partir de vos  photos avec PHOTOFILTRE (gratuit et en français).

H) HTML, Javascript, PHP et MySQL

Langages du Web (par Yves Soulet), un nouveau petit manuel pour les vrais débutants voulant apprendre et comprendre : découverte et initiation par l'exemple. Quelques  autres manuels sur MetaPost, Tikz et Xindy sont aussi disponibles sur le site.

 II - TRUCS ET ASTUCES 

Nous signalons les cas où le PHP (pour une initiation voir la page Outils pour le PHP)  sera nécessaire, les autres cas utiliseront  HTML, Visual Basic ou JavaScript (extension du langage HTML). Pour d'autres langages (tex, latex, python, ...) voyez la rubrique langage.

Pour connaître les paramètres du PHP de votre serveur, utilisez la fonction phpinfo(): voici les caractéristiques du PHP sur FREE (version 5.6.34, BCMath inclus) et celles sur BIWI (version 7.3.23, BCMath inclus).

Remarque pour les FREENAUTES.
Par défaut, sur les pages personnelles chez Free, le PHP est en version 4.4.3, moyennant l'installation d'un fichier .htaccess avec la ligne php 1, vous obtenez la version 5.1.3 et enfin avec un enregistrement de TOUS vos fichiers en utf8 (utilisez le bloc-notes de Windows) et un htaccess de type suivant:
****
<IfDefine Free/>
php56 1
</IfDefine>
AddDefaultCharset UTF-8
****
vous aurez la version 5.6.8.
Attention cependant, cette dernière version 5.6.8 ne possède pas (pour le moment !) la bibliothèque BCMath; si vous en avez besoin dans un certain répertoire, il vous faudra garder dans celui-ci l'une des anciennes versions PHP (5.1.3 ou 4.4.3) qui, elles, contiennent bien BCMath ...!
Depuis fin mars 2018, la dernière version (obtenue avec le petit fichier précédent) est 5.6.34 et elle contient la bibliothèque BCMath !!!

Dans la liste suivante les liens suivis d'une étoile (*) correspondront à une installation plus  longue ou un peu plus difficile que les autres. Chaque titre d'une astuce est suivi d'un lien 'Message express' spécifique qui permet de signaler une erreur, poser une question ou faire une observation (n'hésitez pas).

0- Lister les caractéristiques de son serveur PHP

1- Des liens qui se mettent en italique quand la souris les survole  

2- Mettre une image en fond d'écran dans un fichier  

3- Faire un lien par et vers une image  

4- Faire un lien vers une fenêtre popup  

5- Le chargement automatique différé d'une page (méta commande refresh)  

6- La balise MARQUEE  

7- VB 6 et ByRef ou ByVal 

8- Une souris accompagnée de quelques images  (*)

9- Faire une liste déroulante de liens  (*)

10- Un contrôle en VB pour envoi automatique de mail avec fichier attaché    

11- Installer le dictionnaire contextuel ALEXANDRIA sur son site 

12- Vérifier la validité d'une adresse mail (PHP)   

13- Un lien contactez-moi protégé contre les robots (PHP)   

14- Télécharger n'importe quel fichier (PHP) 

15- La variable $_SERVER['QUERY_STRING'] (PHP)  

16- Méthode POST pour un formulaire (PHP)  

17- Faire des calculs sur un serveur PHP  

18- Donnes interactives de bridge (PHP)  (**) (non détaillé pour le moment)

19- Faire un sondage en temps réel avec résultats sur place (PHP)  (*)   

20- Faire un compteur de visites élémentaire (PHP)  

21- Faire un compteur de visites graphique (PHP)  

22- Lister le passage des visiteurs sur son site (date, heure , IP, ..) (PHP)

23- Installer des flux RSS sur son site  (PHP)

24- Redirection, compteur et traces des visites  (PHP) (*)

25- Faire des calculs en ligne en Javascript

26- Faire un fichier protégé par un mot de passe

27- Faire du cryptage en ligne (PHP) (*)

28 - Créer un raccourci de fermeture rapide de votre PC

29- Créer un répertoire protégé (login et mot de passe) sur son site (serveurs Apache)-(avec cas particulier sur le serveur FREE)

30- Fonction echo du PHP et balises meta ou body (pour redirection ou bifurcation de fichiers)

31- Installer des fichiers mp3 et m3u sur son site

32- Faire des miniatures de fichiers image de type jpg (PHP)

33- Installer des vidéos sur son site

34- Installer un diaporama sur son site

35-Installer une base de données sql (PHP/MYSQL)

36- Installer un flux rss sur son site (PHP, XML, RSS)

37- Installer plusieurs liens sur une image (image cliquable ou image réactive)

38-Installer une fenêtre de progression de chargement d'une page

39-Installer une barre de pourcentage de progression de chargement d'une page (PHP)

** Nouveautés **

40-Permettre une lecture confortable d'une page web sur smartphones et tablettes

41- Changement d'image par survol ou clic de la souris

42- CAPTCHA (de type test numérique) (PHP)


0) Lister les caractéristiques de son serveur PHP      Question ou remarque?

Utilisez pour cela le fichier suivant que vous mettrez sur la racine de votre site: la fonction phpinfo()  listera le fichier php.ini de votre serveur. Suivant la version de votre PHP il peut y avoir quelques différences plus ou moins notables (nous avons personnellement l'utilisation des versions 4.4.8, 4.4.9 mais aussi 4.2.3, 5.2.5 et 5.1.3, 5.6.8 avec Free et il y a quelques comportements différents...).

Le fichier testserveur.php

<html>
<head>
<title>Donne les caractéristiques PHP du serveur</title>
</head>
<body>
<H2>
<strong>
Caract&eacute;ristiques PHP du serveur
</strong>
</H3>
<? phpinfo(); ?>
</body> 
</html>


1) Des liens qui se mettent en italique quand la souris les survole   Question ou remarque?

Entre les balises <head> et </head>, insérez le code suivant.

<!-- DEBUT DU SCRIPT LIENS QUI BOUGENT-->
<style fprolloverstyle>A:hover {color: #FF00FF; font-style: italic; font-weight: bold}
</style>
<!-- FIN DU SCRIPT LIENS QUI BOUGENT-->

2) Mettre une image en fond d'écran dans un fichier     Question ou remarque?

Pour mettre une image (par exemple spirale.jpg) en fond d'écran d'un fichier (comme dans radio.php ou meteo.php) utilisez le code suivant:

<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" background="jpg/spirale.jpg" >

 3) Faire un lien par et vers une image      Question ou remarque?

Un lien par une image vers une image (la même ici)     La nébuleuse d'Andromède  se fera avec le code suivant:

<a href="jpg/andromede.jpg" ><img src="jpg/andromede.jpg" alt="La nébuleuse d'Andromède" width=65 height=40 border=1 ></a>

Un lien par une image       La nébuleuse 
d'Andromède ...vers Sayrac    sera réalisé avec le code:

<a href="index.php" ><img src="jpg/andromede.jpg" alt="La nébuleuse d'Andromède" width=65 height=40 border=1 ></a>

4) Faire un lien vers une fenêtre popup     Question ou remarque?

Utilisez la fonction window.open() pour faire un lien vers un fichier choisi  par une fenêtre popup comme dans le code suivant:

<b>Aperçu du fichier <a href="#" onClick="window.open('exoplanete.php#lagune','exoplanete','toolbar=1,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=350,height=240');return(false)">exoplanète</a>
</b>

Voici l' aperçu du fichier exoplanète correspondant à un tel lien.

Voici une autre utilisation dans le le fichier photo de Sayrac , par l'intermédiaire du fichier choixphoto.php qui fournit une photo sélectionnée aléatoirement dans la fenêtre popup.

Le fichier choixphoto.php

<?
$num=rand(1,10);
if ($num==1) {
$name="lagune";}
elseif ($num==2) {
$name="rosette";}
elseif ($num==3) {
$name="pelican";}
elseif ($num==4) {
$name="hollande";}
elseif ($num==5) {
$name="maroc";}
elseif ($num==6) {
$name="martinique";}
elseif ($num==7) {
$name="ibiza";}
elseif ($num==8) {
$name="jamaique";}
elseif ($num==9) {
$name="solaire";}
elseif ($num==10) {
$name="trounoir";}
?> 
<html>
<head>
<title>Page de choix de photo</title>
<META http-equiv="refresh" content="0; url=photo.php#<? echo $name; ?>">
</head
<body>
</body>
</html>


5) Le chargement automatique différé d'une page (méta commande refresh)     Question ou remarque?

En utilisant la méta commande refresh vous pouvez charger automatiquement une page (à partir d'un autre fichier) avec un délai (en secondes) spécifié par content (content="5;.." pour 5 secondes, 0 pour chargement immédiat). On mettra bien sûr ce fichier dans le même répertoire que index.php ou on précisera l'url complète de index.php dans chargement.html.

Le fichier chargement.html

<html>
<head>
<title>Utilitaire de chargement différé (5 secondes)</title>
<META http-equiv="refresh" content="5; url=index.php">
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b><font size="5">PATIENCE !!&nbsp; le fichier SAYRAC se charge ....</font></b></p>
</body>
</html>

Pouvoir faire recharger une page périodiquement peut s'avérer très utile surtout si l'on affiche des bannières ou des informations différentes, afin d'en changer souvent. Ainsi, il est possible d'ordonner au navigateur de recharger une page toutes les n secondes grâce à l'attribut refresh par:
<META http-equiv="refresh" content="n">

Vous pouvez aussi  interdire aux navigateurs de conserver en mémoire-cache vos pages par:
<META http-equiv="pragma" content="no-cache">


6) La balise MARQUEE     Question ou remarque?

La balise MARQUEE est une balise HTML (utilisable au moins avec Internet Explorer et Mozilla Firefox); elle permet de faire défiler un titre ou un texte (horizontalement ou verticalement). Voici les lignes de code du titre défilant en jaune de cette page.

<H2>
<span style="background-color: #FFFF00">
<MARQUEE BEHAVIOR="ALTERNATE" BGCOLOR="#FFFF00" title="Site personnel" > <a href="index.html">S A Y R A C</a>&nbsp;&nbsp;&nbsp;&nbsp; 2 0 0 9 </MARQUEE>
</span>
</H2>

Voyez toutes les utilisations possibles de la balise MARQUEE.


7) VB6 et ByRef ou ByVal     Question ou remarque?

En Visual Basic, dans les fonctions on peut passer les variables par valeur (By Val) ou par référence (ByRef); dans le premier cas c'est une copie de la variable qui est utilisée et éventuellement modifiée dans la fonction (ce qui ne modifie donc en rien la variable réelle), dans le second cas c'est la vraie variable qui est utilisée et éventuellement modifiée dans la fonction. Paradoxalement, par défaut (et c'est donc le cas si l'on ne précise rien - ni ByRef ni ByVal - pour la variable passée par argument dans la fonction) VB 6 a retenu le passage ByRef, alors qu'il vaudrait nettement mieux passer toutes les variables explicitement ByVal,  sauf  lorsque la variable doit être modifiable dans la fonction. Donc si vous définissez une fonction avec des arguments sans rien préciser, ils passeront ByRef dans vote fonction! 


8) Une souris accompagnée de  quelques images     Question ou remarque?

Pour avoir une souris accompagnée de quelques images (fichiers *.gif que vous enregistrerez dans le répertoire de votre fichier, par exemple enregistrez les 2 images proposées ici) sur un de vos fichiers,  mettez le fichier souris2.js dans le même répertoire que votre fichier, et insérez dans ce dernier entre les balises <body> et </body> les lignes de code suivantes (souris2.js correspond à 2 images accompagnant la souris, en modifiant ce fichier et en ajoutant les nouvelles lignes de code correspondantes vous pouvez avoir plus de 2 images)

<div id="span0" style="position:absolute;visibility:hidden;"><img src="dino5.gif"></div>
<div id="span1" style="position:absolute;visibility:hidden;"><img src="feu.gif"></div>
<div id="span2" style="position:absolute;visibility:hidden;"> </div>
<script src="souris2.js"></script> 

téléchargement  de souris2.js                        feu.gif        dino5.gif

Vous pouvez aussi utiliser le même principe pour faire suivre la souris avec des images des lettres d'un mot par exemple le prénom  du propriétaire du site (c'est ce que j'ai fait sur des sites de jeunes enfants comme sur le site de Basile ou le site d'Oronte où vous verrez aussi quelques souris animées à choisir).


9) Faire une liste déroulante de liens     Question ou remarque?

Mettez le script suivant entre les balises <head> et </head>.

<script>
var target = "self" //Destination des URL: "blank", "top" "self" ou "nom du cadre" 
function envoie(frm){ //pour menu déroulant avec des URL
URL = frm.deroule.options[frm.deroule.selectedIndex].value
if (frm.deroule.selectedIndex != 0){
if (target == "blank") mywindow = window.open(''+URL+'');
else if (target == "self") document.location = URL;
else parent.frames[target].location = URL; 
}}
</script>

Mettez ensuite, à l'endroit qui vous convient entre les balises <body> et </body>, le code du menu déroulant, par exemple:

 <form name="Form_astuce">
<select NAME="deroule" onChange="envoie(this.form)"
style="font-family: Verdana; font-size: 10pt;background-color:teal; color:yellow" size="1">
<option >&nbsp;&nbsp;Déroulez, choisissez et cliquez </option>
<option VALUE="calcul.php">&nbsp;&nbsp;Calcul,
la calculatrice pour les grands nombres, mode d'emploi</option>
<option VALUE="conjecture.php">&nbsp;&nbsp;Conjecture
de Syracuse</option>
<option VALUE="systdyn.php">&nbsp;&nbsp;Systèmes 
dynamiques et chaos</option>
</select>
</form>

Vous obtiendrez le résultat suivant: 


10) Faire un contrôle en Visual Basic pour envoyer automatiquement un mail avec fichier attaché     Question ou remarque?

Dans un programme écrit en Visual Basic (ici VB 6), vous pouvez facilement insérer un contrôle pour un envoi automatisé de mail par l'intermédiaire de Outlook Express (qu'il soit l'éditeur de mail par défaut ou non) sur une machine de type PC sous Windows: il suffit d'utiliser msimn.exe et quelques sendkeys. Voici ce que vous pouvez mettre comme code dans un CommandButton (dont la seule exécution  fera automatiquement l'envoi du message avec le fichier attaché choisi):

'strMail est l'adresse choisie et strInf le texte que voulez mettre dans le corps du message; vous pouvez aussi mettre un autre texte que 'Envoi d'un fichier attaché' dans l'Objet du message ...
Shell ("C:\Program Files\Outlook Express\msimn.exe /mailurl:mailto:" & strMail & "?subject=Envoi d'un fichier attaché &Body=" & strInf), 3
' Pour faire Insertion pièce jointe (ALT +I)
SendKeys "%I{ENTER}", False
' Pour indiquer le nom du fichier à joindre (par exemple toto.txt situé dans le même répertoire que votre  exécutable)
strFich = App.Path & "\toto.txt"  & "{ENTER}"
SendKeys strFich, False
' Pour faire envoyer maintenant
SendKeys "%F{DOWN}{ENTER}", False 

11) Installer le dictionnaire  contextuel ALEXANDRIA sur son site     Question ou remarque?

Suivez les indications données sur le site ALEXANDRIA : il suffit de mettre (comme dans ce fichier) les lignes du script correspondant entre les balises <head> et </head>. Vous pouvez compléter l'information en faisant un lien vers un petit fichier explicatif comme notre avertissement_dico.html.


12) Vérifier la validité d'une adresse mail (utilise PHP)     Question ou remarque?

Rappelons qu'une adresse mail ne peut contenir que les caractères suivants: lettres a à z (minuscules ou majuscules indifférentes), chiffres 0 à 9 et les caractères - _ . @, avec un seul @.

Dans un fichier en PHP définissez, conformément aux propriétés précédentes,  la fonction VerifierAdresseMail()  par le code suivant. (exemple sur testmail.php)

function VerifierAdresseMail($adresse)
{
$syntaxe='#^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,5}$#';
if(preg_match($syntaxe,$adresse))
return true;
else
return false;
}

13) Un lien 'contactez-moi' protégé contre les robots (utilise PHP)     Question ou remarque?

Nous utiliserons en particulier un lien intermédiaire avec le symbole -_- à la place de @. Au lieu de faire un lien du type mailto:toto@machin.fr que les robots détectent facilement en recherchant  soit le mailto soit le @, n'utilisez plus ni mailto ni @ en vous servant du lien suivant  

vers.php?toto-_-machin.fr  

après avoir plaçé sur votre site  les fichiers vers.php et postvers.php

télécharger vers.php                 télécharger postvers.php

Principe: pour ne pas utiliser directement mailto, nous avons combiné la redirection (présentée en 5) avec un petit formulaire (méthode post du 16) associé à un tirage aléatoire d'un nombre entre 1000 et 100000 (inscrit à chaque fois dans le fichier nombre.txt) dont on demandera les 3 premiers chiffres: on appelle par son URL complète,  le fichier vers.php en faisant suivre le ? de la pseudo adresse mail (toto-_-machin.fr dans notre exemple) et  la bonne réponse en ce qui concerne les 3 premiers chiffres du nombre proposé nous conduira alors sur un message à envoyer via Outlook Express (Le lien contactez-moi à la fin de cette page est de ce type).

Le fichier vers.php
<?
$name=$_SERVER['QUERY_STRING'];
?>
<html>
<head>
<title>Redirection avec protection vers un lien mailto</title>
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" vlink="#ff00ff" alink="#000000">
<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
PAGE de redirection vers un lien mailto</h2>&nbsp;
<p><br>
<strong><br>
Inscrivez les 3 premiers chiffres du nombre qui vous sera
proposé.<br>
</strong>
<br>
<?
//Version avec demande de 3 premiers chiffres
//test HUmain?? par nombre
//mettre le mail choisi ici
//appel: vers.php?adresse mail (pas de mailto, et avec -_- … la place de @)
//mise du focus sur 'trois'
$num=rand(1000,100000);
echo 'Nombre = '.$num;
$file=fopen('nombre.txt','w');
fputs($file, $num);
fclose($file);
?>
<form action="postvers.php?<? echo $name; ?>" method="post">
Les 3 premiers chiffes:<input type="text" name="trois" id="trois" size="3" maxlength="3"><br>
<script type="text/javascript">
window.onload=function() {
document.getElementById('trois').focus();
}
</script>
<input type="submit" value="Validez les 3 premiers chiffres du nombre">
</form>
<br>
<form>
<input type=BUTTON value="Page pr&eacute;c&eacute;dente" onclick="window.history.back()">
</form>
</body>
</html>

 

Le fichier postvers.php

<?
//Version avec demande de 3 premiers chiffres
//test HUmain?? par nombre
//appel: vers.php?adresse mail(pas de mailto, avec -_- au lieu de @)
$file=fopen('nombre.txt','r');
$num=fgets($file,256);
fclose($file);
$deb=substr($num,0,3);
$hum=$_POST['trois'];
if ($hum!=$deb) {
echo '<br>choix : '.$hum;
echo '<br>INEXACT recommencez!!<br>';
include ("vers.php");
exit(); }
$name=$_SERVER['QUERY_STRING'];
?>
<html>
<head>
<title>Page de redirection vers un lien mailto</title>
<META http-equiv="refresh" content="0; url=mailto:<? echo str_replace('-_-', '@', $name); ?>">
</head>
<body>
</body>
</html>


14) Télécharger n'importe quel fichier (utilise PHP)     Question ou remarque?

Pour télécharger des fichiers texte (ou autres) aussi facilement que des fichiers zip ou exe, utilisez le fichier gettexte.php que vous mettrez dans le même répertoire que le fichier à charger (par exemple toto.txt) et utilisez le lien: gettexte.php?fic=toto.txt . Ceci s'applique en particulier à un fichier PHP: avec gettexte.php et fichier.php dans un même répertoire, le lien gettexte.php?fic=fichier.php vous permet de récupérer la source fichier.php.

télécharger gettexte.php

<?php
//<a href="gettexte.php?fic=nom_fichier.txt">
header( "Content-type: application/txt" );
$len = filesize( $_GET["fic"] );
header( "Content-Length: $len" );
header( "Content-Disposition: attachment; filename=" . $_GET["fic"] );
readfile($_GET["fic"]);
?>


15) La variable $_SERVER['QUERY_STRING'] (utilise PHP)     Question ou remarque?

Elle fournit tous les arguments (s'ils existent) qui suivent le point d'interrogation  dans une url dynamique; nous l'avons utilisée dans 13 pour récupérer dans l'url de type contactez-moi,  http:// ...../vers.php?toto-_-machin.fr,  la partie (suivant le ?) permettant de reconstruire l'adresse mail valide. C'est l'une des variables SERVER qui font encore partie des variables prédéfinies en PHP. Vous pouvez par exemple utiliser cette variable pour faire un chargement automatique 5 sur un certain lien interne d'une page; avec le fichier chargement.php (qui s'inspire de chargement.html du 5) utilisez par exemple l'url  contact/chargement.php?chaos pour faire l'ouverture différée de Sayrac sur son lien interne chaos (index.php#chaos).

Le fichier chargement.php

<?
$name=$_SERVER['QUERY_STRING'];
?>
<html>

<head>
<title>Utilitaire de chargement différé (2 secondes)</title>
<META http-equiv="refresh" content="2; url=http:// .../index.php#<? echo $name; ?>">
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b><font size="5">PATIENCE !!&nbsp; le fichier SAYRAC se charge ....</font></b></p>
</body>
</html>


16) Methode POST pour un formulaire (utilise PHP)     Question ou remarque?

Voici un exemple de formulaire (avec la méthode POST) et de son  traitement avec les deux fichiers dictio.html et postdictio.php; dans ce dernier, à titre d'exemple, on calcule la puissance 6 de l'entier choisi à l'aide de la fonction bcpow() de la bibliothèque bcmath (calculs pour les grands nombres). Voir les liens correspondants  dictio.html et postdictio.php.

Le fichier dictio.html

<html>
<head>
<title>Exemple de formulaire (méthode POST) et traitement</title>
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" vlink="#ff00ff" alink="#000000">
<form action="postdictio.php" method="post">
<br>
Nom : <INPUT type=text size=20 name=nom><br>

Prénom : <INPUT type=text size=20 name=prenom><br>
<p>
Saisissez une donnée 
</p>
<input type="text" name="fon" />
<input type="submit" value="r&eacute;sultats de la saisie" />
</form>
<br>
</body> 
</html>

 

Le fichier postdictio.php

<html>
<head>

<title>Traitement du formulaire dictio.html: exemple</title>
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" vlink="#ff00ff" alink="#000000">
<?
$nom=$_POST['nom'];
$prenom=$_POST['prenom'];
echo $prenom.' '.$nom.' , bonjour.<br>';
$int=$_POST['fon'];
echo 'Votre saisie est :<br>'.$int.'<br>';
$exp=6;
$puis=bcpow($int,$exp);
echo $int. " puissance 6 = ".$puis;
?>
<br>
<form>
<input type=BUTTON value="Page pr&eacute;c&eacute;dente" onclick="window.history.back()">
</form>
</body> 
</html>


17) Faire des calculs sur un serveur PHP     Question ou remarque?

Notez tout d'abord qu'en principe vous ne pouvez pas dépasser 30 secondes de calcul: la variable max_execution_time est généralement au plus à 30 (voyez sa valeur avec phpinfo() sur votre serveur dans la rubrique PHP Core). 

La page de calculs mathématiques en ligne vous permettra d'utiliser diverses fonctions et en particulier celles de la bibliothèque bcmath pour les grands nombres. Voyez en particulier les outils de calcul utilisables en ligne sur le site écrits en PHP:

Le principe de fabrication de ces outils est simple. Chaque fichier.html demande à travers un formulaire (de type 16 avec la méthode post)  d'entrer une ou des valeurs initiales pour effectuer certains calculs (factorielle, PPCM, PGCD, itération de Syracuse ou de Fibonacci, ...) qui seront obtenus dans le fichier associé postfichier.php.

A titre d'exemple voici le fichier postsyracuse.php réalisant les calculs proposés dans le fichier Ssyracuse.html. (il contient un fichier tracesite.php d'analyse des traces des visites déjà utilisé dans 22; on pourra y adjoindre aussi un compteur de passages de type 20 ou 21).

Le fichier postsyracuse.php

<html>
<head>
<title>MAth: Syracuse-Collatz</title>
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" vlink="#ff00ff" alink="#000000">
<?php
// calcul d'une itération par syracuse
function syracuse($n) {
if ( $n % 2 == 0 )
{
return ($n/2);
}
else
{
if ($n==1)
return 1;
else
return (3*$n+1);
}
}
?>
<?php
// calcul d'une itération par syracuse5
function syracuse5($n) {
if ( $n % 2 == 0 )
{
return ($n/2);
}
else
{
return (5*$n+1);
}
}
?>
<?php
// Chaine d'it‚r‚s par syracuse standard
function suitesyra($k,$n) {
$res='('.$n.', ';
for ($i=1;$i<=$k;$i++)
{
$it=syracuse($n);
if ($i==$k)
$res=$res.$it;
else
$res=$res.$it.', ';
$n=$it;
}
$res=$res.')';
return $res;
}
?>
<?php
// Aboutir … 1 et donner le nbre d'étapes
function syravers1($n) {
for ($i=1;$i<=3000;$i++)
{
$it=syracuse($n);
if ($it==1)
{
$cv=$i;
$i=3001;
}
$n=$it;
}
return $cv;
}
?>
<?php
// Chaine d'itérés par syracuse 5
function suitesyra5($k,$n) {
$res='('.$n.', ';
for ($i=1;$i<=$k;$i++)
{
$it=syracuse5($n);
if ($i==$k)
$res=$res.$it;
else
$res=$res.$it.', ';
$n=$it;
}
$res=$res.')';
return $res;
}
?>
<?php
// k-itération par syracuse
function itersyracuse($n,$k) {
for ($i=1;$i<=$k;$i++)
{
$n=syracuse($n);
}
return $n;

?>
<?php
// k-itération par syracuse5
function itersyracuse5($n,$k) {
for ($i=1;$i<=$k;$i++)
{
$n=syracuse5($n);
}
return $n;

?>
<H3><strong>
Page de calculs math&eacute;matiques en ligne: it&eacute;ration de Syracuse
</strong></H3><br>
<strong>Pour les impairs l'it&eacute;ration g&eacute;n&eacute;rale de Syracuse donne nk+1; le cas standard correspond &agrave; k=3; le second cas trait&eacute; ici est k=5.
</strong>
<br>
<?
$n=$_POST['inisyra'];
$res=syracuse($n);
echo '<strong>It&eacute;r&eacute; par Syracuse standard de '.$n.' = '.$res;
//$it=itersyracuse($n,3000);
//echo '<br><br><strong>3000 iterations de Syracuse donnent ' .$it;
$it=syravers1($n);
echo '<br><br><strong>Convergence vers 1 de '.$n. ' en '.$it.' &eacute;tapes';
$suit=suitesyra($it,$n);
echo '<br><strong>Suite des it&eacute;r&eacute;s de '.$n. ' : '.$suit;
//k=5
$it5= itersyracuse5($n,20);
echo '<br><br><strong>20 iterations de Syracuse avec k=5 donnent ' .$it5;
$it5= itersyracuse5($n,100);
echo '<br><br><strong>100 iterations de Syracuse avec k=5 donnent ' .$it5;
$suit5=suitesyra5(200,$n);
echo '<br><br><strong>Syracuse5; Suite des 200 it&eacute;r&eacute;s de '.$n. ' : '.$suit5;
?>
<br>
<form>
<input type=BUTTON value="Page pr&eacute;c&eacute;dente" onclick="window.history.back()">
</form>
<br>
<a href="http:/studyvox.biwi.ca/index.php">Retour sur la page index de studyvox.biwi.ca</a>
<? include("tracesite.php"); ?>
</body> 
</html>

Voyez 27  pour des calculs en ligne de cryptage (par la méthode de la clé de Vernam) écrits en PHP  et  25 pour des calculs en ligne écrits en Javascript 


18) Donnes interactives de bridge (utilise PHP)     Question ou remarque?

(pas encore détaillé ...)

Voyez par exemple la donne 40 ou les squeezes interactifs. Le traitement que nous avons utilisé se trouvant sur plusieurs serveurs et nécessitant plusieurs fichiers, il est un peu lourd et ne sera détaillé qu'un peu plus tard ...faute de temps, mais les méthodes utilisées sont pratiquement toutes analogues à celles des points explicités dans cette page.


19) Faire un sondage en temps réel avec résultats sur place (utilise PHP)     Question ou remarque?

Le sondage de Sayrac utilise diverses techniques présentées plus haut; vous pouvez facilement le télécharger et vous en inspirer pour faire votre propre fichier.

Télécharger le fichier autosondage.php


20) Faire un compteur de visites élémentaire (utilise PHP)     Question ou remarque?

Voici un premier exemple d'un compteur extrêmement simple (sans graphique ni image) qui nécessite dans le même répertoire que la page dont on veut compter les visites, un fichier compteursite.txt et le fichier suivant compteursite.php que l'on installera sur la page choisie (et à l'endroit choisi)  par la ligne de code:  <? include("compteursite.php"); ?>

Le fichier compteursite.php
 

<html>
<body bgcolor="#999999" text="#0000ff">
<?
//fichier compteur de visites 
//installer avec include() sur la page choisie
//mettre auparavant  compteursite.txt avec chmod à 777 sur le site

$monfichier = fopen('compteursite.txt', 'r+');

$pages_vues = fgets($monfichier); // On lit la première ligne (nombre de pages vues)
$pages_vues+=1; // On augmente de 1 ce nombre de pages vues

fseek($monfichier, 0); // On remet le curseur au début du fichier
fputs($monfichier, $pages_vues); // On écrit le nouveau nombre de pages vues

fclose($monfichier);

echo '<p><B>Vous êtes le ' . $pages_vues . ' -ème visiteur </B></p>';
?> 
</body>
</html>


21) Faire un compteur de visites graphique (utilise PHP)     Question ou remarque?

Donnons quelques idées d'améliorations du compteur précédent. On utilisera le fichier précédent compteursite.php, mais en supprimant la ligne 'echo..', un fichier compteursite.txt,  ainsi que le fichier affiche.php et des fichiers images des chiffres (0.gif, ..., 9.gif) que vous pouvez télécharger:  0.gif 1.gif 2.gif 3.gif 4.gif 5.gif 6.gif 7.gif 8.gif 9.gif (penser à les mettre dans le répertoire de votre fichier et à bien les nommer 0.gif, 1.gif ...).

Le fichier affiche.php

<?
/*affiche un nombre , avec des images (fichiers gif) des
chiffres 0 à 9, situées dans le même répertoire que ce fichier 
*/
function affiche($nomb)
{
$i=0;
$ch = substr($nomb,$i,1);
while ( $ch != '' )
{

switch ( $ch)
{

case 0 :
echo "<img src=\"0.gif\">";
break;
case 1 :
echo "<img src=\"1.gif\">";
break;
case 2 :
echo "<img src=\"2.gif\">";
break;
case 3 :
echo "<img src=\"3.gif\">";
break;
case 4 :
echo "<img src=\"4.gif\">";
break;
case 5 :
echo "<img src=\"5.gif\">";
break;
case 6 :
echo "<img src=\"6.gif\">";
break;
case 7 :
echo "<img src=\"7.gif\">";
break;
case 8 :
echo "<img src=\"8.gif\">";
break;
case 9 :
echo "<img src=\"9.gif\">";
break;

}
$i++;
$ch = substr($nomb,$i,1);

}
}
?>

On mettra sur la page PHP dont on veut compter les visiteurs, à l'endroit désiré où l'on veut faire apparaître ce compteur graphique, le code suivant:

<table border="4" width="16%" bgcolor="#000000">
<tr>
<td width="100%"><?
include("affiche.php");
$fichier=fopen("compteursite.txt","r+");
$nomb=fgets($fichier,255);
fclose($fichier);
affiche($nomb);
?>
</td>
</tr>
</table>

et un peu plus bas les lignes suivantes (à titre d'exemple, on a ajouté un fichier time.txt pour ne pas compter plusieurs fois une visite due à un rafraîchissement de la page dans les 3 minutes):

<? 
$temps=time();
//lire fichier time 
$fichtime=fopen("time.txt","r+");
$preced=fgets($fichtime,255);
fclose($fichtime);
//3 minutes par exemple: peut être modifié et amélioré
if ($temps-$preced>180) {
//on ajoute 1 au nbre de visites et on initialise time.txt
include("compteursite.php"); 
$fichtime=fopen("time.txt","w");
fwrite($fichtime,$temps);
fclose($fichtime);
//sinon on ne compte pas 
}
?>

 22) Lister le passage des visiteurs sur son site (date, heure, IP, ..) (utilise PHP)     Question ou remarque?

Pour récupérer et lister les traces de vos visiteurs sur telle ou telle page de votre site vous pouvez utiliser le fichier tracesite.php et un fichier texte tracesite.txt, (placés dans le même répertoire que votre page) en mettant sur cette  page la ligne de code: <? include("tracesite.php"); ?>

Dans le fichier tracesite.txt vous aurez pour chaque passage la date, l'heure, l'adresse IP et le type de  navigateur utilisé par votre visiteur.

Le fichier tracesite.php

<html>
<head>
<title>Analyse des visites sur une page</title>
</head>
<body>
<? 
$fp=fopen("tracesite.txt",'a+');
$ip=$_SERVER['REMOTE_ADDR'];
$time=date("d/m/Y H:i:s");
$nom2=gethostbyaddr($ip);
$ref=$_SERVER['PHP_SELF'];
$navi=getenv("HTTP_USER_AGENT");
$str=$ref."...".$ip."...".$nom2."...".$time."...".$navi."\n";
fwrite($fp,$str);
fclose($fp);
?>
</body>
</html>


23) Installer des flux RSS sur son site (utilise PHP)     Question ou remarque?

De nombreux journaux (du quotidien au mensuel) ou sites fournissent des flux RSS de nouvelles constamment réactualisées et permettent l'installation sur un site d'un filtre RSS pour editer telles ou telles informations renouvelées quotidiennement. Vous pouvez soit installer un lecteur (ou agrégateur) de flux  RSS soit suivre les indications du site dont le flux RSS vous convient et faire l'installation spécifique et ponctuelle  correspondante. C'est en général bien indiqué et facile d'installation et il s'agira le plus souvent de mettre un lien sur votre page.

 


24) Redirection, compteur et traces des visites (utilise PHP)     Question ou remarque?

(On utilisera ici les points précédents 5, 20 et 22; on peut améliorer avec un compteur de type 22).

Si, comme moi, vous disposez d'un site sur un serveur sans le PHP et, d'autre part, de l'accès à un autre serveur possédant le  PHP et que vous voulez tout de même installer des compteurs et des traces de vos visiteurs sur les pages du premier site, il vous faudra installer pour tout fichier.html du premier site, les fichiers fichier.php, fichier.txt et N_fichier.txt sur le second serveur possédant le PHP et appeler votre fichier initial par un lien vers  fichier.php qui utilisera la redirection (refrech et content cf 5) après avoir rempli les fichiers compteur (N_fichier.txt) et traces (fichier.txt) des passages; voici l'exemple et les ingrédients nécessaires pour notre actuel  fichier  trucastuces.html.

Le lien vers la page trucs et astuces appelle trucsastuces.php, remplit trucastuces.txt et N_trucastuces.txt, grâce à detecte.php et lieninterne.php qui comptent et détectent les traces des visiteurs, puis se redirige immédiatement (content="0") vers trucastuces.html.

Le fichier trucastuces.php

<? include("detecte.php");
include ("lieninterne.php");
$var="trucastuces";
detecte($var);
$name=lieninterne();
?>
<html>
<head>
<title>Utilitaire de d&eacute;tection des visites des pages de Sayrac</title>
<META http-equiv="refresh" content="0; url=trucastuces.php<? echo $name; ?>">
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >
&nbsp;
<b><font size="5">PATIENCE !!&nbsp; le fichier TRUCASTUCES se charge ....</font></b>
</body>
</html> 

 

Le fichier detecte.php

<?
/* 
Ecrit dans nomfichier.txt les info sur les visiteurs de la
page nomfichier.html et dans N_nomfichier.txt le nombre
de ces visiteurs
$var est le nom du fichier sans suffixe
Les fichiers txt sont dans .../compteurs/
ainsi que nomfichier.php qui compte et mémorise le passage et repart
vers nomfichier.html avec refresh pour content à  0.
*/
function detecte($var) {
$filenb="N_".$var.".txt";
$fichier=fopen($filenb,"r+");

$nomb=fgets($fichier,255);
$nomb+=1;
fclose($fichier);
$fichier=fopen($filenb,"w");
fwrite($fichier,$nomb);
fclose($fichier);
//ajoute 1 au total visiteurs
$fich=fopen("N_total.txt","r+");
$tot=fgets($fich,255);
$tot+=1;
fclose($fich);
$fich=fopen("N_total.txt","w");
fwrite($fich,$tot);
fclose($fich);
$filetxt=$var.".txt";
$fp=fopen($filetxt,'a+');
$ip=$_SERVER['REMOTE_ADDR'];
$time=date("d/m/Y H:i:s");
$nom2=gethostbyaddr($ip);
$ref=$_SERVER['PHP_SELF'];
$navi=getenv("HTTP_USER_AGENT");
$prov=$_SERVER['HTTP_REFERER'];
$str=$prov."...".$ref."\n".$ip."...".$nom2."...".$time."...".$navi."\n";
fwrite($fp,$str);
fclose($fp);
}
?>

 

Le fichier lieninterne.php

<?
/*restitue dans une url ce qui suit l'eventuel ? et le
restitue précédé de # pour être ajouté  par
<? echo $name; ?>
dans http://..../fichier.html(ou php)?name retourne #name
*/
function lieninterne() {
$name=$_SERVER['QUERY_STRING'];
if (strlen($name)>1)
{
$name='#'.$name;
}
return $name;
}
?>


25) Faire des calculs en ligne en Javascript     Question ou remarque?

La programmation en Javascript de fonctions diverses de calcul est assez simple et vous pouvez en voir quelques exemples dans le fichier jeu sur les nombres; une fois dans ce fichier, le menu Affichage et le sous-menu Source de votre navigateur vous permettront (classiquement) de faire du copier-coller sur l'exemple ou la fonction que vous voudrez utiliser. 

Simulation en Javascript de l'itération de Syracuse (cas standard avec k = 3)

Simulation en Javascript de l'itération de Syracuse avec k = 5 

Voyez 17 pour de la programmation de diverses fonctions de calcul en PHP.


26) Faire un fichier protégé par un mot de passe     Question ou remarque?

(On utilise ici du script HTML et du JavaScript)

Il est possible de protéger un fichier en rendant son ouverture impossible sans la donnée du bon mot de passe. Ainsi le fichier fichierprotege.html n'est accessible en lecture que si l'on donne le mot de passe (nous avons choisi ici le mot sesame); c'est le fichier clefichierprotege.html qui représente en quelque sorte la clé d'accès au fichier initial (et qui doit être dans le même répertoire que le fichier à protéger). Dans ce fichier on a mis aussi un script mailto anti -spam qui crypte l'adresse mail (mais qui semble moins efficace que la technique de 13).

Essayez le lien vers fichierprotege.html (on verra dans ce fichier un lien retour vers cette page ici-même par la technique 15).

Le fichier clefichierprotege.html

<html>
<head>
<title>Fichier mot de passe clefichierprotege.html; site Sayrac</title>
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" alink="#000000">
<!-- DEBUT DU SCRIPT MOT DE PASSE -->
<form name="formpassed">
<input type="hidden" name="PASS" value="fichierprotege.html?"> 
<table bgcolor="CCFF99" border="4" bordercolor="006600" >
<tr>
<td border="4" bordercolor="FF0000">
<b>&nbsp; Le fichier que vous voulez voir est protégé par un mot de passe</b>
</td>
</tr>
<tr>
<td border="4" bordercolor="FF0000">
<b>
<font color="blue">Mot de passe pour voir ce fichier: </font>
<input type="password" name="CLE" size="30"><script>document.formpassed.CLE.focus();</script>
</b>
</td>
</tr>
<tr>
<td align="center" border="4" bordercolor="FF0000">
<strong>
<input type="button" style="background-image: url('noel.gif')" value="VALIDEZ votre CHOIX" onclick="document.location.href(document.formpassed.PASS.value+document.formpassed.CLE.value)"> 
</strong>
</td>
</tr>
</table>
</form>
<!-- FIN DU SCRIPT MOT DE PASSE -->
<p>&nbsp;</p>
<p><b>Retour sur le fichier <a href="trucastuces.php#fichierprotege">Trucs
et Astuces</a></b></p>
<p><b>La <a href="index.php">page index du site SAYRAC</a></b></p>
<!-- DEBUT DU SCRIPT MAILTO ANTI SPAM avec photo-->
<script type="text/javascript">
<!--
var a, s, n;
function Crypt(s) {r='';for(i=0;i<s.length;i++){n=s.charCodeAt(i); if (n>=8364) {n = 128;} r += String.fromCharCode( n - 3 ); }return r;}
a ="pdlowr=";
m='&#64;';d=unescape(m);
var nom = "rene.clerc2";
var domaine = "tele2.fr";
var aro = nom + d + domaine;
document.write('<a href='+Crypt(a) + aro + '>');
document.write('<img src="rene04.jpg" width=30 height=40 alt="Contactez-moi">' + '</a>');
// -->
</script>
<!-- FIN DU SCRIPT MAILTO ANTI SPAM-->
</body>
</html>

 

Le fichier fichierprotege.html

(Attention, ligne 6, bien mettre l'adresse COMPLETE du fichier: http://..../fichierprotege.html?sesame)

<html>
<head>
<title>Exemple de fichier visible par mot de passe; site Sayrac </title>
<!-- Debut script mot de passe -->
<SCRIPT LANGUAGE="JavaScript">
if ((document.location == 'fichierprotege.html?sesame'))
{}
else {
document.open();
document.write("<h1>Mauvais mot de passe, recommencez!</h1>");
document.close();
location.reload('clefichierprotege.html');
}
</script>
<!-- FIN SCRIPT MOT DE PASSE -->
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" alink="#000000">
<b><font size="4">Bravo: vous avez donné le bon mot de passe et donc vous avez le droit de voir ce
fichier !</font></b>
<p>&nbsp;</p>
<hr>
<p><b><font size="4">Retour sur le fichier <a href="trucastuces.php#fichierprotege">Trucs
et Astuces</a></font></b></p>
<p><font size="4"><b>Aller sur </b><a href="index.php"><b>SAYRAC</b></a>
</font>
</p>
</body>
</html>


27) Faire du cryptage en ligne (utilise PHP)     Question ou remarque?

(Beaucoup de fichiers à installer mais pas de grosse difficulté).

Les outils de cryptage que nous proposons sont de deux sortes: du cryptage en ligne dont le code est en PHP (et sera intégralement fourni plus loin) et deux logiciels téléchargeables (sur demande) qui sont  écrits en VB 6 (rcrypto et alea). On pourrait bien sûr facilement envisager des produits analogues avec d'autres langages. Au niveau du principe de cryptage la base sera toujours un codage avec une clé de type clé unique jetable de Vernam, c'est-à-dire une clé constituée d'un fichier possédant  toujours autant de caractères que le message à crypter et elle sera unique en ce sens qu'elle ne sera utilisée qu'une seule fois. 

Dans le principe détaillé utilisé par l'exécutable rcrypto on observera en particulier  que les 256 caractères ASCII du clavier sont utilisables et peuvent intervenir. L'exécutable alea utilise un principe un peu différent de codage - brouillage (et le fichier crypté est plus gros que le fichier initial mais le décryptage est techniquement plus simple). Pour crypter un répertoire, il suffira de faire un zip de tous ses fichiers, puis de crypter le fichier zip ainsi obtenu.

Nous fournissons ici les 7 fichiers nécessaires pour réaliser le cryptage en ligne tel qu'il apparaît sur notre site (nous avons seulement enlevé les interventions de fichiers compteur ou trace des visites que vous pourrez choisir d'ajouter en utilisant par exemple les points  20, 21 et 22); observez qu'on y utilise, entre autres, encore une fois (et souvent) la méthode POST du 16

Mode d'emploi. Mettez dans un même répertoire les 7 fichiers suivants: krypto.html, postkrypto.php, gettexte.php (fourni en 14), decode.php, garde.php, telechar.php, stot.txt (télécharger stot.txt qui contient les 224 caractères ASCII utilisables, c'est-à-dire tous les caractères imprimables du clavier) et faites un lien vers krypto.html. Dès le premier fonctionnement de ces exécutables divers fichiers textes seront automatiquement créés dans votre répertoire (scle, kode, dkode, num, kode1, cle1,..); en particulier à la toute première action sur le lien 'sauver et enregistrer le fichier codé et sa clé' il apparaîtra 2 ou 3 'warnings' (qui concernent le fichier num.txt et qui ne pénalisent pas du tout le fonctionnement) qui disparaîtront par une seconde action sur ce lien (il faut que le fichier num.txt se crée et s'initialise).

Principe essentiel de calcul d'un tel cryptage de Vernam. Si le message à crypter est la suite de caractères (m 1 , m 2 , ..., m t )  et la clé aléatoire jetable la suite  (c 1 , c 2 , ..., c t ), le cryptage consiste essentiellement à définir (fonction SommeLettre() du fichier postkrypto) les sommes  m 1  +  c 1  = m 1*  ,   m 2  +   c =   m 2* , ...,   m t    +  c t  =  m t * ;  pour le décryptage il faut effectuer les différences (fonction DiffLettre() du fichier decode)  m 1*  -  c 1  = m 1  ,   m 2*  -   c =   m 2 , ...,   m t *   -  c t  =  m t

Le fichier krypto.html

<html>
<head>
<title>Page de Cryptage de texte en ligne; site Sayrac</title>
<META NAME="authors" CONTENT="René CLERC">
<META NAME="channel" CONTENT="informatique mathématiques nombres bridge musique astrophysique relativité">
<!-- DEBUT DU SCRIPT LIENS QUI BOUGENT-->
<style fprolloverstyle>A:hover {color: #FF00FF; font-style: italic; font-weight: bold}
</style>
<!-- FIN DU SCRIPT LIENS QUI BOUGENT-->
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" vlink="#ff00ff" alink="#000000">
<B>
<form action="postkrypto.php" method="post" >
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="5">
CRYPTAGE et DECRYPTAGE de TEXTES en ligne&nbsp;</font>
</B>
</p>
<B>
<p><span style="background-color: #FFFF00"><font size="4">1)CRYPTAGE</font></span>.
Vous pouvez écrire un texte&nbsp; ou un message et le crypter directement et
immédiatement. Vous obtiendrez <i> le message
crypté</i> ainsi que <i> la clé</i> qui aura été utilisée et <i> le décryptage</i>
correspondant; vous pourrez aussi télécharger (ou simplement visualiser) le
fichier clé (scle.txt), le fichier codé (kode.txt) et le fichier décodé (dkode.txt).&nbsp;&nbsp;Vous
pourrez aussi sauver et enregistrer un couple fichier codé et fichier de sa
clé de codage (sous les noms kode1.txt et cle1.txt, kode2.txt et cle2.txt ou
kode3.txt et cle3.txt), ceci afin soit de les conserver tels que, soit de les proposer à une autre
personne; vous pourrez naturellement <a href="telechar.php">télécharger
ces fichiers</a> mais aussi les <a href="#erase">supprimer</a> après usage.</p>
<p>Le cryptage est&nbsp; réalisé avec une clé de Vernam, c'est-à-dire une clé
aléatoire (et à usage unique) de la même longueur que le message; tous les
caractères imprimables du clavier sont utilisables.</p>
<p>On pourra comparer avec le <a href="cryptage.php">principe
de cryptage</a> utilisé dans le logiciel téléchargeable (sur demande) <a href="rcrypto.php">RCRYPTO</a>.</p>
<p>Message: </p>
&nbsp;
<textarea name="mes" rows="15" cols="84">
</textarea> 
<p>&nbsp;</p>
<p>
<br/>
<input type="submit" value="Cryptez le message"/>
</form>
<p><span style="background-color: #FFFF00"><font size="4">2)DECRYPTAGE</font></span>.
Vous pouvez ici <i>décrypter un fichier de type kode1.txt avec sa clé de
cryptage située</i> <i> dans le fichier cle1.txt</i> (de même avec kode2.txt,
cle2.txt ou kode3.txt, cle3.txt si les fichiers correspondants existent bien sur le site) à condition que ces
fichiers existent bien sur le site. Il vous suffira d'inscrire le nombre choisi
dans la fenêtre suivante:&nbsp;</p>
<form action="decode.php" method="post">
<p>
<input type="text" name="numfich" size="9" />
<br>
<input type="submit" value="Décodez le fichier correspondant" />
</p>
<p><a name="erase"></a> <span style="background-color: #FFFF00">SUPPRESSION de
vos FICHIERS</span>: Pour libérer de la place (sachant que nous avons limité
à 3 le nombre de couples de fichiers enregistrables sur le site) et pour ne pas
les laisser sur le serveur, vous pouvez supprimer&nbsp; un couple de
fichiers kode?.txt et cle?.txt en inscrivant le numéro correspondant dans la
fenêtre suivante:</B>
<B>
<input type="text" name="erasenum" size="9" />
<br>
<input type="submit" value="Supprimez le fichier correspondant et celui de sa clé!" />
ou simplement un fichier clé dont le numéro est&nbsp; </B><B><input type="text" name="erasecle" size="9" />&nbsp;&nbsp;&nbsp;&nbsp;
</B><B><input type="submit" value="Supprimez la clé correspondante!" />
</p>
</form>
<form>
<p>
<input type=BUTTON value="Page pr&eacute;c&eacute;dente" onclick="window.history.back()">
</p>
</form>
<p>
<font size="4"><a href="telechar.php">Vers les
téléchargements des fichiers kode?.txt et cle?.txt</a></font>
<p>
<a href="index.php">Retour sur le site SAYRAC</a></B><p><b><a href="http://studyvox.biwi.ca/">Retour
sur le site STUDYVOX</a></b>
</body>
</html>

 

Le fichier postkrypto.php

<html>
<head>
<title>Cryptage en ligne, site Sayrac</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >
<H3><strong>
Page de CRYPTAGE DECRYPTAGE
</strong></H3>
<?php
function Chaine() {
//récupère la chaine stot des caracteres utilisables (224)
$file=fopen('stot.txt','r');
$tot=fgets($file,512);
fclose($file);
return chr(13).chr(10).$tot;
}
function ChiffreLettre($chif) {
//retourne le caractere associé au nombre $chif
$tot=Chaine();
if ($chif>0) {
$res=substr($tot,$chif-1,1);
}
return $res;
}
function Position($l) {
//retourne la position dans stot du caractere $l
$tot=Chaine();
$pos=strpos($tot,$l);
return $pos+1;
}
function SommeLettre($l1, $l2) {
//somme de deux caracteres
$tot=Chaine();
$n1=Position($l1);
$n2=Position($l2);
$res=$n1+$n2;
if ($res > 224) {
$res=$res-224;
}
return ChiffreLettre($res);
}
function DiffLettre($l1, $l2) {
//difference de deux caracteres
$tot=Chaine();
$n1=Position($l1);
$n2=Position($l2);
if ($n1>$n2) {
$res=$n1 - $n2;
}
else {
$res=224+$n1 -$n2;
}
return ChiffreLettre($res);
}
function Clemes($lmes) {
//retourne une cle pour la long de message $lmes
//et la met dans scle.txt
$res="";
for ($i=1;$i<=$lmes;$i++)
{
$l1=ChiffreLettre(rand(1,256));
$res=$res.$l1;
}
$file=fopen('scle.txt','w');
fputs($file, $res);
fclose($file);
return $res;
}
function Code($mes) {
//fonction de codage de $mes
$lmes=strlen($mes);
//construit une clé
$cle=Clemes($lmes);
$res="";
for ($i=0;$i<$lmes;$i++)
{
$lc=substr($cle,$i,1);
$lm=substr($mes,$i,1);
$ls=SommeLettre($lm, $lc);
$res=$res.$ls;
}
return $res;
//retourne le message codé
}
function Decode($mes) {
$lmes=strlen($mes);
//va chercher la clé utilisée pour coder
$file=fopen('scle.txt','r');
while (!feof($file)) {
$cle.=fgets($file,4096);
}
fclose($file);
$res="";
for ($i=0;$i<$lmes;$i++)
{
$lc=substr($cle,$i,1);
$lm=substr($mes,$i,1);
$ls=DiffLettre($lm, $lc);
$res=$res.$ls;
}
return $res;
//retourne le message décodé
}
function AfficheCle() {
//fonction d'affichage de la clé
$file=fopen('scle.txt','r');
while (!feof($file)) {
$cle.=fgets($file,4096);
}
fclose($file);
echo '<br>Clé actuelle: <br>'. $cle;
return $cle;
}
function Misefichier($st, $nom) {
//mettre la chaine $st dans le fichier, sur place , de nom $nom.txt
$nc=$nom.'.txt';
$file=fopen($nc,'w');
fputs($file, $st);
fclose($file);
}
function Recupfichier($nom) {
//récuperer le contenu du fichier de nom $nom.txt
//retourne la chaine correspondante
$nc=$nom.'.txt';
$file=fopen($nc,'r');
while (!feof($file)) {
$res.=fgets($file,4096);
}
fclose($file);
return $res;
}
?>

<?
$mes=$_POST['mes'];
$mes=stripslashes($mes);
if ($mes !="") {
echo 'Votre message: <br>'.$mes;
echo '<br>';
$kmes=Code($mes);
echo '<br>Le message codé: <br>' .$kmes;
$nom='kode';
Misefichier($kmes, $nom);
echo '<br>';
$dmes=Decode($kmes);
echo '<br>';
echo '<br><br>Le message décodé: <br>' . $dmes;
echo '<br>';
$nom='dkode';
Misefichier($dmes, $nom);
echo '<br>';
AfficheCle();
echo '<br>';
$nom='kode';
$kryp=Recupfichier($nom);
echo '<br>Fichier kode.txt: <br>'.$kryp;
echo '<br>';
$nom='dkode';
$dkryp=Recupfichier($nom);
echo '<br>Fichier dkode.txt: <br>'.$dkryp;
echo '<br>';}
else {
echo "<br>Vous n'avez écrit aucun texte!!<br>";}
?>
<br>
<a href="garde.php">Sauver et enregistrer le fichier codé et sa clé </a><br> 
<br>
<br>
<a href="gettexte.php?fic=kode.txt">Télécharger le fichier codé</a>
<br>
<a href="gettexte.php?fic=scle.txt">Télécharger le fichier clé de codage</a>
<br>
<a href="gettexte.php?fic=dkode.txt">Télécharger le fichier décodé</a>
<br>
<p>
<font size="4"><a href="telechar.php">Vers les
téléchargements des fichiers kode?.txt et cle?.txt</a></font>
<p>

<form>
<input type=BUTTON value="Page pr&eacute;c&eacute;dente" onclick="window.history.back()">
</form>
<br>
<a href="http://studyvox.biwi.ca/index.php">Retour sur la page index de STUDYVOX</a>
<br>
<a href="index.php">Retour sur la page index de SAYRAC</a>
</body> 
</html>

 

Le fichier decode.php

<html>
<head>
<title>Décryptage en ligne, site Sayrac</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >
<H3><strong>
Page de DECRYPTAGE d'un fichier kode?.txt avec sa clé située dans cle?.txt (? est un nombre)
</strong></H3><br>
<br>
<?
function Chaine() {
//récupère la chaine stot des caracrteres utilisables (224)
$file=fopen('stot.txt','r');
$tot=fgets($file,512);
fclose($file);
return chr(13).chr(10).$tot;
}
function ChiffreLettre($chif) {
//retourne le caractere associé au nombre $chif
$tot=Chaine();
if ($chif>0) {
$res=substr($tot,$chif-1,1);
}
return $res;
}
function Position($l) {
//retourne la position dans stot du caractere $l
$tot=Chaine();
$pos=strpos($tot,$l);
return $pos+1;
}
function SommeLettre($l1, $l2) {
//somme de deux caracteres
$tot=Chaine();
$n1=Position($l1);
$n2=Position($l2);
$res=$n1+$n2;
if ($res > 224) {
$res=$res-224;
}
return ChiffreLettre($res);
}
function DiffLettre($l1, $l2) {
//difference de deux caracteres
$tot=Chaine();
$n1=Position($l1);
$n2=Position($l2);
if ($n1>$n2) {
$res=$n1 - $n2;
}
else {
$res=224+$n1 -$n2;
}
return ChiffreLettre($res);
}

function decode($num) {
//d‚code kodenum.txt
//avec clenum.txt
$nom='kode'.$num.'.txt';
$file=fopen($nom,'r');
while (!feof($file)) {
$mes.=fgets($file,4096);
}
fclose($file);
//fichier cle
$fcle='cle'.$num.'.txt';
$file=fopen($fcle,'r');
while (!feof($file)) {
$cle.=fgets($file,4096);
}
fclose($file);
//decode
$res="";
$lmes=strlen($mes);
for ($i=0;$i<$lmes;$i++)
{
$lc=substr($cle,$i,1);
$lm=substr($mes,$i,1);
$ls=DiffLettre($lm, $lc);
$res=$res.$ls;
}
return $res;
}
?>
<?
$num=$_POST['numfich'];
if ($num>0) {
$nom='kode'.$num.'.txt';
if (file_exists($nom)==TRUE) {
$res=decode($num);
echo '<br>Décodage de '.$nom. ' : <br>'.$res; }
else {
echo "Désolé: le fichier choisi n'existe pas!";
}
}
else {
$nef=$_POST['erasenum'];
if ($nef>0) {
$nom='kode'.$nef.'.txt';
if (file_exists($nom)==TRUE) {
unlink($nom);
$ncle='cle'.$nef.'.txt';
if (file_exists($ncle)==TRUE) {
unlink($ncle); }
echo "Les fichiers choisis ont été supprimés!";
}
}
else {
$ncle=$_POST['erasecle'];
if ($ncle>0) {
$nom='cle'.$ncle.'.txt';
if (file_exists($nom)==TRUE) {
unlink($nom);
echo "Le fichier clé choisi a été supprimé!";
}
}

}

}
?>
<p>
<font size="4"><a href="telechar.php">Vers les
téléchargements des fichiers kode?.txt et cle?.txt</a></font>
<p>
</body> 
</html>

 

Le fichier garde.php

<html>
<head>
<title>Cryptage en ligne, site Sayrac</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >

<?
function Gardefichkod() {
//enregistre le dernier fichier codé kode.txt sous le 
//nom ?kode.txt le numéro ? vient de num.txt (+1)
//et sa cl‚ dans cle?.txt
//lire num.txt 
$file=fopen('num.txt','r');
$num=fgets($file,256);
fclose($file);
//max 3 sinon retour … 1
if ($num==3) {
$num=1; }
else {
$num+=1; }
//mise dans num.txt
$file=fopen('num.txt','w');
fputs($file, $num);
fclose($file);
$nom='kode'.$num. '.txt';
//copie kode.txt dans kode?.txt
copy('kode.txt',$nom);

 

Le fichier telechar.php

<html>
<head>
<title>Cryptage en ligne, site Sayrac</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >
<H3><strong>
Page de téléchargement de fichiers (codé, décodé ou clé de codage)
</strong></H3>
<br>
<br>
<a href="gettexte.php?fic=cle1.txt">Télécharger le fichier clé1</a>
<br>
<a href="gettexte.php?fic=cle2.txt">Télécharger le fichier clé2</a>
<br>
<a href="gettexte.php?fic=cle3.txt">Télécharger le fichier clé3</a>
<br>
<br>
<a href="gettexte.php?fic=kode1.txt">Télécharger le fichier kode1</a>
<br>
<a href="gettexte.php?fic=kode2.txt">Télécharger le fichier kode2</a>
<br>
<a href="gettexte.php?fic=kode3.txt">Télécharger le fichier kode3</a>

<br>
<form>
<input type=BUTTON value="Page pr&eacute;c&eacute;dente" onclick="window.history.back()">
</form>
<br>
<a href="http://studyvox.biwi.ca/">Retour sur la page index de STUDYVOX</a>
<br>
<a href="index.php">Retour sur la page index de SAYRAC</a>
</body> 
</html>


28) Créer un raccourci de fermeture rapide de votre PC     Question ou remarque?

Vous pouvez remplacer les actions habituelles pour éteindre votre PC (menu Démarrer - Arrêter l'ordinateur - Arrêter) en créant un raccourci que vous n'aurez qu'à double cliquer (ou à ouvrir); vous utiliserez pour cela la commande shutdown. En activant le raccourci proposé vous aurez une fermeture automatique et immédiate de votre PC.

- Créez un raccourci sur le bureau (clic bouton droit de la souris, Nouveau, Raccourci).

- Dans la fenêtre qui s'ouvre ('Entrez l'emplacement de l'élément'), inscrivez la commande suivante:

   %SystemRoot%\System32\shutdown.exe -s -t 0               (n'oubliez pas les espaces)

- Cliquez 'Suivant' et dans la fenêtre 'Entrez un nom pour votre raccourci', inscrivez par exemple  'Fermeture automatique'.

- Cliquez 'Terminer'.

Eventuellement:

- Vous pouvez cliquer bouton droit sur votre raccourci, cliquer 'Propriétés' puis 'Changer d'icône' et utiliser une icône faite avec photofiltre par exemple.

Remarque. Pour une fermeture différée de (par exemple) 5 secondes, assortie d'un commentaire (avant fermeture), utilisez   shutdown.exe -s -t 5 -c "Fermeture automatique dans 5 secondes!". Pour des détails sur tous les paramètres de la commande, tapez sous DOS 'shutdown /?' ou simplement 'shutdown' et faites Return.

Pour un outil plus élaboré, voyez par exemple TOff qui permet diverses programmations de l'extinction du PC.


29) Créer un répertoire protégé (login et mot de passe) sur son site     Question ou remarque?

Pour réaliser ce point, il faut que votre serveur tolère les fichiers .htaccess et .htpassword (ce qui est le cas des serveurs APACHE); certains de ces serveurs acceptent cependant seulement des fichiers .htacces très simples (comme celui contenant la seule instruction: deny from all) mais pas les autres ...

a) Action simple et très souvent possible

Rendre inaccessible un répertoire à tout le monde: mettre à la racine du répertoire un fichier de nom  .htaccess contenant la seule ligne:  deny from all.  Pour éviter d'éventuels ennuis, vous pouvez l'éditer en l'appelant htaccess.txt (par exemple), le charger (par FTP ou Filezilla ou autres ...) sur votre serveur et, à ce moment-là, le renommer en .htaccess (en effet certains systèmes d'exploitation n'aiment pas les fichiers dont le nom commence par un point !). Seul le webmaster (ou celui qui possède identifiant et mot de passe pour accéder au site) peut voir un tel répertoire.

b) Protection par identifiant et mot de passe

Nous voulons protéger ainsi le répertoire nommé 'protege' de notre site: il va falloir construire 2 fichiers à mettre à la racine du répertoire en question, .htaccess et .htpassword. Comme signalé plus haut, il vaut mieux éditer ces deux fichiers en les appelant htaccess.txt et htpassword.txt, les charger sur le serveur tel que, puis les renommer .htaccess et .htpassword....(ou utiliser le bloc-notes qui en principe tolère les noms de fichiers commençant par un point).

Le fichier .htaccess

AuthName "Dossier protégé"
AuthType Basic
AuthUserFile ".../protege/.htpassword"
Require valid-user


Attention à la 3° ligne au chemin ".../protege/.htpassword", il s'agit du chemin ABSOLU du fichier. Pour l'obtenir, vous utiliserez la fonction realpath() (en faisant un petit fichier chemin.php du type <? realpath('.chemin.php') ?> que vous mettrez à la racine de votre répertoire et que vous activerez pour obtenir ce chemin absolu spécifique de votre site sur votre serveur).

 

Le fichier .htpassword

Identifiant 1: mot de passe crypté
Identifiant 2: mot de passe crypté
toto:$1$NFNkTtgX$a3I0BV9sbTSOHZHB4Mvnx1
(par exemple)


Vous mettrez dans ce fichier la liste des identifiants (ou login) auxquels vous autorisez l'accès au répertoire suivi de : et  leur mot de passe crypté (par sécurité). On trouve facilement des petits fichiers qui cryptent les mots de passe (comme le phpcryptage.php suivant par exemple).

 

 Le fichier phpcryptage.php

<?php
if (isset($_POST['login']) AND isset($_POST['pass']))
{
$login = $_POST['login'];
$passcrypte = crypt($_POST['pass']); // Cryptage du  mot de passe

echo 'Ligne à copier dans le .htpasswd :<br />' . $login . ':' . $passcrypte;
}
else // On n'a pas encore rempli le formulaire
{
?>
</p>
<p>Entrez votre login et votre mot de passe pour le crypter.</p>
<form method="post">
<p>
Login : <input type="text" name="login"><br />
Mot de passe : <input type="text" name="pass"><br /><br />
<input type="submit" value="Crypter !">
</p>
</form>
<?php
}

?>

Dès que l'adresse du répertoire ou d'un fichier du répertoire est activée dans un navigateur, il apparaît une fenêtre demandant identifiant et mot de passe (corrects!), sinon l'autorisation d'accès est refusée et rien n'est visible dans ce répertoire.


Cas des sites sur le serveur FREE
Contrairement à pratiquement tous les autres serveurs, chez FREE le cryptage des mots de passe est interdit d'où une technique différente et spécifique.
Fichier protégé chez FREE
La différence essentielle est qu'il vous faudra un dossier (uniquement accessible par FTP et donc par le webmaster) qui contiendra la liste des 'login:motdepasse' dans un .htpasswrd et un fichier .htaccess contenant la seule ligne 'deny from all'. Dans le répertoire à protéger il vous faudra un .htaccess assez classique.



30) Fonction echo du PHP et balises meta ou body     Question ou remarque?

On utilisera des fichiers analogues à detecte() et lieninterne() de 24, les remarques sur refresh de 5 et la fonction echo() du php.

a) La fonction echo() peut être utilisée pour choisir parmi plusieurs balises body (mais attention, on n 'a droit qu'à une seule balise body dans un fichier!)  pour changer aléatoirement l'image de fond d'un fichier; c'est ce que nous utilisons dans notre fichier meteo.php.

Exemple de fichier avec fond d'image variable 

<html>

<head>

</head>

<?
/*pour changer aléatoirement l'image de  fond (background) du fichier */
$name=rand(1,20);
if ($name==1)
echo '<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000"   background="fichier1.jpg">' ;
elseif ($name==2)
echo '<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" background="fichier2.jpg">' ;
..........
elseif ($name==20)
echo '<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" background="fichier20.jpg">' ;
?> 

.....

</body>

</html>

b) On peut aussi utiliser la fonction echo() pour choisir parmi plusieurs balises refresh de redirection vers divers fichiers et s'inspirer de 24 pour garder le lien local: par exemple pour nos fichiers de donnes de bridge, le lien  donne.php?donne17 conduira vers 00donne.html#donne17  et le lien  donne.php?donne39 vers 00donne1.html#donne39...

 Le fichier donne.php

<? include("detecte.php");
include ("lieninterne.php");
$var="donne";
detecte($var);
$name=lieninterne();
/* vers les donnes à 2 jeux sans solution, fichiers 00donne.html, 00donne1.html */
?>
<html>
<head>
<title>Les donnes de bridge de Sayrac; donnes à 2 jeux sans solution</title>
<?
$num=substr($name,6);
if ($num>37)
echo '<META http-equiv="refresh" content="0; url=00donne1.html'.$name.'">';
else
echo '<META http-equiv="refresh" content="0; url=00donne.html'.$name.'">';
?>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffa000" >
&nbsp;
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b><font size="5">PATIENCE !!&nbsp; le fichier des donnes de bridge se charge ....</font></b></p>
<p>
</body>
</html>

 

31) Installer des fichiers mp3 et m3u sur son site     Question ou remarque?

Pour récupérer un fichier de type mp3 extrait d'un CD, on peut par exemple utiliser CDex FR 1.4 (logiciel gratuit en français); choisir la plage à copier (par exemple la piste 9 de votre CD) et cliquer sur 'MP3' ou sur le menu Conversion (sous-menu 'Extraire les pistes du CD au format MPEG'): le fichier correspondant se trouvera dans Mes Documents/MP3/Non spécifié - Non spécifié/Piste audio 09.mp3.

Pour installer sur un site un fichier mp3 (audible en streaming mp3), utilisez le code suivant et téléchargez dewplayer.swf ( télécharger par clic droit, enregistrer sous ....)  en licence libre sur Creative Commons Attribution-ShareAlike License France que vous mettrez sur votre site dans le même répertoire que vos fichiers mp3.

Code pour l'écoute de fichier.mp3:

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=fichier.mp3" width="200" height="20"> 
<param name="movie" value="dewplayer.swf?son=fichier.mp3" /></object> 

Ecoutez par exemple un passage du Stabat Mater de G.B.Pergolese 

Un fichier de type m3u contient une seule ligne correspondant à l'adresse du fichier mp3 (par exemple voici notre fichier campra2.m3u).

Le fichier campra2.m3u:

classique/campra2.mp3

Un lien sur ce fichier campra2.m3u activera sa lecture.


32) Faire des miniatures de fichiers image de type jpg (utilise PHP)     Question ou remarque?

Il est possible de générer des miniatures de tous ses fichiers de type jpg; on peut ainsi afficher sur son site des aperçus de sa galerie de photos. Pour cela, il est souhaitable de rassembler tous les fichiers de type jpg dans un répertoire, par exemple /jpg. Dans un autre répertoire que l'on pourra appeler /admin, on va créer les fichiers index.php et mini.php (et éventuellement legende.php).

La miniature de jupiter.jpg La miniature de amsterdam.jpg La miniature de pelican.jpg Miniature vers le lac gelé de Rotterdam CIMG0017.JPGLa lagune       La page des miniatures de Sayrac

Le fichier index.php (qui utilise mini.php et accessoirement legende.php) permet de créer automatiquement les miniatures de tous les fichiers de type jpg (et seulement ceux-ci) situés dans le répertoire /jpg (où il est conseillé de rassembler toutes vos images jpg); si vous ajoutez de nouveaux fichiers dans ce répertoire, index.php en tiendra compte dès que vous l'activerez.

Le fichier index.php

<html>
<head>
<title>Galerie des photos de Sayrac</title>
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" alink="#000000">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <b><font size="6">LA GALERIE DES <a href="../photo.php" title="La page des photos (à la taille normale)"> PHOTOS</a> DE <a href="../index.php" title="La page index du site">SAYRAC</a></font></b>
<p>&nbsp;<b>(miniatures des fichiers au format jpg du répertoire /jpg, avec une
courte légende quand le nom de l'image n'est pas suffisamment significatif)</b></p>
<p>
<?php
include("legende.php");
$tableau = array(); 
$dossier = opendir ('../jpg/'); 
while ($fichier = readdir ($dossier)) { 
if ($fichier != '.' && $fichier != '..' && $fichier != 'index.php') { 
$tableau[] = $fichier; 


closedir ($dossier); 
$nbcol=4; 
$nbpics = count($tableau); 
if ($nbpics != 0) { 
echo '</p>
<table>'; 
for ($i=0; $i<$nbpics; $i++){
if($i%$nbcol==0) echo '<tr>';
{
$leg=legende($tableau[$i]);
/* s'il y a lieu on ajoute la legende de la photo */
if ($leg!="")
$leg=". ".$leg;
// on place un lien vers le fichier mini.php qui va générer nos miniatures. On ajoute un argument, le nom de fichier image à miniaturiser 
echo '<td><a href="../jpg/' , $tableau[$i] , '"><img src="mini.php?f=' , $tableau[$i] , '" alt="Image '.$tableau[$i].$leg.'" /></a></td>'; 
}
if($i%$nbcol==($nbcol-1)) echo '</tr>';

echo '</table>'; 

else echo 'Aucune image à afficher'; 
?>
<p>&nbsp;
<a href="../index.php"><b>Retour sur la page index de SAYRAC</b></a> 
<a href="http://sayrac.rlc.free.fr/contact/ecrire.php?sayrac.rlc-_-free.fr" title="Un petit test numérique pour prouver que vous n'êtes pas un robot!"><b>Contactez-moi</b></a>
</body>
</html>

L'éventuel fichier legende.php qui n'est pas obligatoire ...

Le fichier legende.php

<?
/*retourne un texte, type legende, pour une photo de nom CIPG ou autre */
/*… mettre dans admin/index.php avec legende($tableau[$i]) */
function legende($nom)
{
$texte="";
if ($nom=="CIMG0296.JPG" || $nom=="CIMG0309.JPG" || $nom=="CIMG0252.JPG")
$texte="Ischia, Italie";
elseif ($nom=="CIMG0511.JPG" || $nom=="CIMG0515.JPG" || $nom=="CIMG0526.JPG" || $nom=="CIMG0539.JPG" || $nom=="CIMG3279.JPG" || $nom=="CIMG3304.JPG")
$texte="La Haye, Pays-Bas";
/* ......etc........*/
elseif ($nom=="CIMG1004.JPG" || $nom=="CIMG1018.JPG")
$texte="Rotterdam, Pays-Bas: le lac au printemps";
return $texte;
}
?>

Le fichier mini.php qui génère les photos miniatures est bien sûr obligatoire.

Le fichier mini.php

<?php
// on définit notre ratio pour nos miniatures: on les force à 100 pixels ici
$ratio = 100; 
// on définit le répertoire qui contient nos images de taille normale 
$dir = '../jpg'; 
// si aucune image n'est donnée en arguments, on redirige le visiteur vers l'accueil de la galerie 
if (!isset($_GET['f'])) { 
header('location: index.php'); 
exit(); 

else { 
// on récupère le nom de fichier à miniaturiser 
$image = $_GET['f']; 
// on récupère les infos de cette image: on utilise @ pour ne pas afficher les éventuels messages d'erreur 
$tableau = @getimagesize('../jpg/'.$image); 
// si il ne s'agit pas d'un fichier image, on redirige le visiteur vers l'accueil de la galerie 
if ($tableau == FALSE) { 
header('location: index.php'); 
exit(); 

else { 
// si notre image est de type jpeg 
if ($tableau[2] == 2) { 
// on crée une image à partir de notre grande image à l'aide de la librairie GD 
$src = imagecreatefromjpeg($dir.'/'.$image); 
// on teste si notre image est de type paysage ou portrait 
if ($tableau[0] > $tableau[1]) { 
$im = imagecreatetruecolor(round(($ratio/$tableau[1])*$tableau[0]), $ratio); 
imagecopyresampled($im, $src, 0, 0, 0, 0, round(($ratio/$tableau[1])*$tableau[0]), $ratio, $tableau[0], $tableau[1]); 

else { 
$im = imagecreatetruecolor($ratio, round(($ratio/$tableau[0])*$tableau[1])); 
imagecopyresampled($im, $src, 0, 0, 0, 0, $ratio, round($tableau[1]*($ratio/$tableau[0])), $tableau[0], $tableau[1]); 

// on génère des images à la volée, on envoie un header au navigateur web du visiteur lui disant que le fichier mini.php va en fait générer une image de type jpeg, soit du type mime image/jpeg. 
header ("Content-type: image/jpeg"); 
imagejpeg ($im); 

elseif ($tableau[2] == 3) { 
$src = imagecreatefrompng($dir.'/'.$image); 
if ($tableau[0] > $tableau[1]) { 
$im = imagecreatetruecolor(round(($ratio/$tableau[1])*$tableau[0]), $ratio); 
imagecopyresampled($im, $src, 0, 0, 0, 0, round(($ratio/$tableau[1])*$tableau[0]), $ratio, $tableau[0], $tableau[1]); 

else { 
$im = imagecreatetruecolor($ratio, round(($ratio/$tableau[0])*$tableau[1])); 
imagecopyresampled($im, $src, 0, 0, 0, 0, $ratio, round($tableau[1]*($ratio/$tableau[0])), $tableau[0], $tableau[1]); 

header ("Content-type: image/png"); 
imagepng ($im); 



?> 

 

Quelques codes d'utilisation d'une miniature:

Pour afficher une miniature:  <img src="mini.php?f=sayrac.jpg" alt="sayrac.jpg" />

Pour afficher une miniature en tant que lien vers l'image normale correspondante:

 <?$image="sayrac.jpg";
echo '<a href="../jpg/' , $image, '"><img src="mini.php?f=' , $image , '" alt="Image '.$image.'" /></a>'; 
?>

Enfin, pour un lien vers une miniature: <a href="mini.php?f=mercure.jpg">Mercure</a>

AUTRE SOLUTION pour les MINIATURES
Si vous avez beaucoup de miniatures à créer (d'où une certaine lenteur dans l'installation des pages de miniatures), vous pouvez aussi les créer une fois pour toutes sur votre serveur; par exemple en faisant un sous-répertoire /mini dans votre dossier /jpg. Vous pouvez nommer ces miniatures en gardant le nom.jpg que vous ferez précéder de, par exemple, MI_ (d'où MI_nom.jpg pour la miniature associée). Vous pouvez alors utiliser les fichiers précédents en remplaçant [src="mini.php?f='] par [src="mini/MI_']. Vos miniatures seront ainsi accessibles beaucoup plus rapidement puisqu'elles n'auront plus besoin d'être créées chaque fois sur le serveur. C'est ce que nous avons récemment fait sur le site Sayrac (30 janvier 2017).


33) Installer des vidéos sur son site     Question ou remarque?

Nous avons choisi d'utiliser le format FLV (Flash Video) d'Adobe. Vous pouvez, si vous voulez,  effectuer le  téléchargement du FLV Player2.2: cet outil simple (il ne fait que la lecture des fichiers flv) et gratuit vous permettra de lire les vidéos de ce type sur votre propre ordinateur. 

Dans un premier temps il vous faudra transformer vos fichiers vidéos (au format AVI ou MOV ou ...) en fichiers FLV. Vous pouvez par exemple utiliser le Free Video Converter  (logiciel gratuit en français).

Faites un répertoire /video sur votre site, vous y déposerez tous vos fichiers flv et un player; nous utilisons player-viral.swf qui est très simple (téléchargement de player-viral.swf), mais vous pouvez en choisir de nombreux autres éventuellement plus élaborés (mode grand écran, avance retour ...), le mode d'emploi sera sensiblement le même.

Pour l'appel d'une vidéo dans un fichier:

<object type="application/x-shockwave-flash" width="400" height="220" data="player.swf">
<param name="movie" value="player-viral.swf" />
<param name="flashvars" value="file=fichier.flv" />
</object>

Pour passer plusieurs vidéos et faire afficher une image fixe avant le démarrage des films, on pourra utiliser un fichier de type playlist.xml; ici nous l'avons appelé flux.xml. Dans le code précédent pour l'appel d'une vidéo, il suffira de remplacer "file=fichier/flv" par "file=flux.xml".

Le fichier flux.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"
xmlns:atom="http://www.w3.org/2005/Atom"> 
<channel> 
<item> 
<title>Video Numéro 1: pointe du Raz</title>
<media:thumbnail url="../jpg/CIMG1349.JPG" />
<media:content type="video/x-flv" url="CIMG1358.flv"/>
</item>
<item> 
<title>Video Numéro 2: pointe du Grouin</title>
<media:thumbnail url="../jpg/CIMG1519.JPG"/>
<media:content type="video/x-flv" url="CIMG1467.flv"/>
</item> 
</channel> 
</rss>

Voir l'exemple utilisant flux.xml.


34) Installer un diaporama sur son site     Question ou remarque?

Nous avons choisi d'utiliser Microsoft PowerPoint. Il suffit de faire un fichier *.ppt en suivant les instructions de PowerPoint. Ensuite il faut renommer votre fichier au format *.pps, puis il vous suffit de télécharger ce dernier sur votre site; notez bien que ce seul fichier suffit et que les fichiers images utilisés n'ont pas besoin d'être aussi téléchargés sur le site. Naturellement pour ne pas avoir de fichier diaporama trop gros, il faudra penser à compresser vos fichiers images avant de les mettre dans le fichier *.ppt en le créant dans PowerPoint! Pour ajouter par copier coller une image (issue d'un autre diaporama) ouvrir d'abord celui à copier, puis seulement le fichier à modifier (pour qu'il soit en lecture et écriture).

Notez enfin que pour la lecture des gros diaporamas, Mozilla semble mieux adapté que IE 7 ....  Voici par exemple un assez gros diaporama de Stockholm en hiver. (suivant les versions de PowerPoint il est possible qu'il faille activer le fichier pps , pour cela il suffit de cliquer sur la touche F5).

 


35) Installer une base de données sql (utilise SQL et PHP)     Question ou remarque?

Pratiquement tous les serveurs proposent l'utilisation de PHP/MYSQL ce qui permet de construire des bases de données sql; ces bdd  utilisent le format de codage UTF-8, aussi quelques précautions sont nécessaires. 

Pour régler les problèmes d'affichage (accents et autres caractères spéciaux) en sortie de résultats de requête d'une bdd enregistrée en UTF-8 , il est conseillé de mettre dans les  fichiers php la ligne de code: 

header('Content-type: text/html; charset=UTF-8');

et dans les fichiers html:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

pour que le fichier soit bien lisible avec les lettres accentuées et autres caractères spéciaux.

La création et le remplissage d'une base de données ne présente pas de grosses difficultés. On peut en particulier  insérer des liens vers des fichiers de type html dans les données inscrites dans une bdd: il suffit de les écrire exactement comme dans un fichier html sous la forme standard: <a href=" ....">ancre</a>. Les recherches ou requêtes à partir d'une telle base peuvent être un peu plus délicates. L'objectif est de pouvoir répondre à n'importe quelle question (ou requête) concernant l'ensemble des données que l'on a insérées dans la bdd.

Le langage de manipulation et traitement des données dans ces requêtes est le langage SQL qui est assez proche du PHP mais qui en diffère tout de même ... voir par exemple Php et (My)Sql.

Pour pouvoir faire des recherches avec des mots comportant des accents ou caractères spéciaux, il vaut mieux  traiter les données issues de la méthode POST avec la fonction  utf8_encode(); on peut ainsi chercher dans une requête "ré majeur" (voir notre exemple de bdd de musique classique).

Pour que les données ne commencent pas par un blanc(ou plus), il est conseillé d'utiliser la fonction ltrim() et faire par exemple:

 $compo=ltrim($_POST['compo'], " ").

Voici le squelette d'un fichier question.html et du fichier recherche.php (l'un des fichiers appelés par la méthode post, les deux autres oeuvre.php et oeuvreuple.php sont de même type) que l'on peut utiliser pour faire des requêtes sur une bdd comme par  exemple avec notre base de données de musique classique; voir aussi une page de recherche un peu plus précise (avec affichage du code sql exprimant la requête exécutée à la suite de vos choix) sur sayracmusique et un moteur de recherche sur les pages de Sayrac dans la page index ou encore dans le fichier sayracli.php.

Le fichier question.html

<HTML>
<HEAD>
<TITLE>Questions sur les bdd CDmusique et CDparcompositeur; site Sayrac</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" vlink="#ff00ff" alink="#000000">
<H1 ALIGN=center>BDDMUSIQUE du site SAYRAC</H1>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(Trois types de recherches sont proposés)</i></b>
<BLOCKQUOTE><FORM ACTION="recherche.php" METHOD="POST">
<b><font size="4"><span style="background-color: #FFFF00">Choisissez un compositeur</span></font>
<a href="#opera"><i>(+)</i></a> <font size="3">de musique classique (<i>au moins le nom <a href="#recherche">(*)</a></i>);
</font>
</b>
<font size="3">
<b>cliquez sur 'envoyer' pour connaître ses oeuvres parmi mes CD.</b>
</font>
<PRE><font size="3"><b>NOM du COMPOSITEUR:</b></font> <a name="compo"></a> <INPUT NAME="nom" TYPE="text" width=30 size="30">&nbsp;&nbsp; <INPUT TYPE="submit" VALUE="ENVOYER" > </pre>
<PRE><font size="3"><b>PRENOM du COMPOSITEUR:</b></font> <INPUT NAME="prenom" TYPE="text" width=30 size="30">&nbsp;&nbsp; <INPUT TYPE="reset" VALUE="ANNULER" >
</pre>
<hr>
</form></blockquote>
<BLOCKQUOTE><FORM ACTION="oeuvre.php" METHOD="POST">
<b><font size="4"><span style="background-color: #FFFF00">Choisissez une oeuvre</span></font>
<font size="3">
(<i>au moins un élément <a href="#recherche">(*)</a> comme symphonie, piano, requiem ou cantate</i>);
</font>
</b>
<font size="3">
<b>cliquez sur 'envoyer' pour connaître son auteur; vous pouvez aussi choisir</b>
<b>'requiem' ou 'concerto pour violon' pour avoir une liste de telles oeuvres</b>
<b>pour divers compositeurs (parmi mes CD).</b>
</font>
<PRE><b><font size="3">NOM de l'OEUVRE</font></b>:<a name="oeuvre"></a><INPUT NAME="oeuvre" TYPE="text" width=30 size="93"></pre>
<INPUT TYPE="submit" VALUE="ENVOYER" > <INPUT TYPE="reset" VALUE="ANNULER" > 
<hr>
</form></blockquote> 
<BLOCKQUOTE><FORM ACTION="oeuvreuple.php" METHOD="POST">
<p>
<font size="4"><span style="background-color: #FFFF00">
<b>Choisissez une oeuvre caractérisée par deux ou trois</b>
</span></font>
<b><font size="4"><span style="background-color: #FFFF00">éléments</span></font>
<font size="3">
<i> <a href="#recherche">(*)</a> </i>(par exemple 'piano', 'concerto' et 'fa
mineur' et éventuellement 'chopin')</font></b>
<font size="3">
<b>cliquez sur 'envoyer' pour connaître le ou les auteurs qui ont produit une telle
oeuvre (<i>choisissez au moins un élément</i>) .</b>
</font>
</p>
<PRE><font size="3"><b>élément 1</b></font><font size="3"><b>:<a name="oeuvreuple"></a></b></font><INPUT NAME="elem1" TYPE="text" width=30 size="32"> <b><font size="3">élément 2</font></b><font size="3"><b>: </b></font><INPUT NAME="elem2" TYPE="text" width=30 size="28"> </pre>
<PRE><font size="3"><b>élément </b></font><font size="3"><b>3:</b></font><INPUT NAME="elem3" TYPE="text" width=30 size="32"> <font size="3"><b><i>compositeur</i>:</b></font><INPUT NAME="compo" TYPE="text" width=30 size="28"> </pre>
<font size="3"><b>Vous pouvez <span style="background-color: #FFFF00"> <i> <u> éventuellement</u></i> 
<i> choisir aussi le nom d'un compositeur</i></span> pour savoir s'il a ou non</b></font>
<font size="3"><b>écrit une telle oeuvre.</b></font>
<p>&nbsp;
<INPUT TYPE="submit" VALUE="ENVOYER" > <INPUT TYPE="reset" VALUE="ANNULER" > 
</p>
</FORM></BLOCKQUOTE> 
<p><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a name="recherche">(*)</a> En 
fait une partie du nom ou mot suffira (par exemple <i>moz</i> ou <i>canta</i> ou 
<i>sympho</i> ou <i>requi</i> ...)</b></p>
<p><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a name="opera"></a>(+)
Ou un grand chanteur d'opéra (Callas, Caruso, Domingo, Pavarotti).</b></p>
<p><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Vers la <a href="index.php">page
index du site Sayrac</a>&nbsp;</b></p>
</BODY>
</HTML>

 

Le fichier recherche.php

<html>
<head>
<title>Recherche dans les bases de données CDmusique et CDparcompositeur; site Sayrac</title>
</head>
<body bgcolor="#999999" text="#0000ff" link="#ffffff" vlink="#ff00ff" alink="#000000">
<?php
header('Content-type: text/html; charset=UTF-8'); 
mysql_connect("xxnom serveurxx", "xxuserxx", "xxmot de passexx"); // Connexion MySQL
mysql_select_db("xxnom de la basexx"); // Sélection de la base
//POST ou GET ??
if (!empty($_POST))
{
echo 'traitement POST'.'<br>';
//pas de blanc en debut
$nom=ltrim($_POST['nom'], " ");
$prenom=ltrim($_POST['prenom'], " ");
}
else
{
echo 'traitement GET'.'<br>';
$nom=$_GET['nom'];
$prenom=$_GET['prenom'];
}
if ($nom=="")
{
$test=2; //pas de nom: on ne fait rien
echo "Choisissez un compositeur!!<br>";
}
else
{
$name=strtoupper($nom);
$nom=$name; //le nom seul
if ($prenom=="") //pas de prenom
{
$test=1;
echo "Vous n'avez pas pr&eacute;cis&eacute; le pr&eacute;nom <br>";
}
else 
{
$test=0;
$prenom=utf8_encode($prenom);
$name=$name.' '.$prenom;
}
}
echo '<b>'.$name.'</b><br>';
$reponse = mysql_query("SELECT * FROM CDmusique ORDER BY compositeur"); // Requête SQL
$total= mysql_query("SELECT * FROM CDparcompositeur ORDER BY compositeur"); // Requête SQL
$resu=0;
while ($donnees = mysql_fetch_array($reponse))
{
if ($test==0)
{
if(stristr($donnees['compositeur'], $name)!=FALSE || stristr($donnees['compositeur'], $nom)!=FALSE)
{
echo '<b>'.$donnees['compositeur'].'</b>: '. $donnees['morceau'].'; '.$donnees['nombreCD'].' CD <br>' ;
$resu+=1;
}
}
elseif ($test==1)
{
if(stristr($donnees['compositeur'], $name)!=FALSE)
{
echo '<b>'.$donnees['compositeur'].'</b>: '.$donnees['morceau'].'; '.$donnees['nombreCD'].' CD <br>' ;
$resu+=1;
}
}
}
while ($compo = mysql_fetch_array($total) and $test<2)
{
if(stristr($compo['compositeur'], $name)!=FALSE || stristr($compo['compositeur'], $nom)!=FALSE )
echo '<b>Total de: '. $compo['nombreCD'].' CD pour: '.$compo['compositeur'].'</b><br>';
}
if ($resu==0)
echo 'D&eacute;sol&eacute;, il n\'y a aucun r&eacute;sultat pour votre recherche!<br>';
mysql_close(); // Déconnexion de MySQL
?>
<p>
</p>
<a href="question.html">Retour sur la page de recherches dans la bdd</a>
</body>
</html>


36) Installer un flux rss sur son site (utilise XML, RSS et PHP)     Question ou remarque?

Un flux RSS est un fichier dont le contenu est automatiquement mis à jour par le site web correspondant. Nous indiquerons d'abord comment installer un flux rss très simplement, puis comment créer un flux rss issus d'une table de banque de données.

a) Flux rss avec un fichier xml (voir par exemple , le flux quoi de neuf de Sayrac)

Un flux RSS est, au plus simple, un fichier texte au format XML avec une structure un peu particulière de la forme suivante (la plus simple possible ici); appelons ce fichier fluxrss.xml.

<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0">
<channel>
<title>Mon site web</title>
<link>http://monsiteweb.com</link>
<description>Les dernières nouvelles sur mon site</description>
<item>
<title>Enfin un flux RSS su mon site</title>
<link>http://monsiteweb.com/lecturerss.html</link>
<guid isPermaLink="true">http://monsiteweb.com/rss/lecturerss.html</guid>
<description>Un flux RSS a été installé sur mon site. Vous pouvez le consulter avec votre navigateur favori sur cette page.</description>
<pubDate>Sat, 25 Dec 2010</pubDate>
</item>
<item>
<title>Installation d'un flux RSS</title>
<link>http://monsiteweb.com/fichier.html</link>
<guid isPermaLink="true">http://monsiteweb.com/fichier.html</guid>
<description>Le fichier fichier.html donne des explications sur l'installation d'un flux rss ...</description>
<pubDate>Fri, 24 Dec 2010</pubDate>
</item>
</channel>
</rss>

L'important est de respecter l'ordre des balises (obligatoires) <rss> <chanel> <item> <link> ... Au tout début il y a les informations sur le flux lui-même (<title> <link> <description>), puis le contenu de chaque information (ou item) avec ses balises  <item> <title> <link> <guid> <description> <pubDate>, la balise guid est un identifiant pour l'item correspondant (il doit être UNIQUE pour spécifier l'item et distinguer les items entre eux, sinon un seul sera affiché) que l'on peut préciser avec isPermaLink="true" suivi d'une URL ou isPermaLink="false" suivi d'un texte quelconque; le lien activable par le titre de l'item sera cependant toujours celui de l'url entre les balises  link. Respectez bien le mode d'écriture de la date (format standard  RFC822 ... en anglais!), vous pouvez éventuellement ajouter l'heure sous la forme 20:00:00 GMT.

A la fin d'un item, vous pouvez ajouter une image sous la forme <enclosure url="http://monsiteweb/jpg/fichier.jpg" type="image/jpeg"></enclosure>. Vous pouvez aussi mettre un lien entre les balises description, mais il faut alors coder  <  et  > (en respectivement &lt; et &gt;). Dans ces deux cas les adresses url sont écrites normalement, sauf s'il y a un &, auquel cas il faut le coder en le remplaçant par &amp; dans l'url du lien ou de l'image.

Une fois déposé sur votre site, ce fichier constitue votre nouveau flux rss à l'adresse http://monsiteweb.com/rss/fluxrss.xml et il est détectable par les navigateurs. Pour le mettre à jour vous ajouterez un nouvel item devant tous les autres (juste après le titre du flux) pour que le dernier en date apparaisse en premier.

Quelques améliorations: vous pouvez utiliser dans les items une ou plusieurs balises <category>Thème1</category><category>Thème2</category> ...qui permettront automatiquement une possiblité de filtrage par ces classements; vous pouvez ajouter dans le titre de votre flux un logo image (petit fichier au format jpg, gif ou png) en inscrivant après les balises <descritption>...</description>, la séquence <image><url>adresse du fichier image</url><link>adresse de la page affichée en cliquant l'image</link></image>.

b)Flux rss issu d'une banque de données (voir par exemple le flux des compositeurs de musique classique de Sayrac)

Si vous disposez d'une bdd, vous pouvez créer un flux rss dynamique alimentés par les données de votre table: nous le ferons à l'aide de fichiers en PHP. Voici comment réaliser un tel flux de 'nouvelles' sur votre site.

On suppose donc que vous disposez d'une table nommée 'type' dans votre bdd; cette table est supposée avoir 3 champs id, texte et date. La date servira de titre de la nouvelle et texte en sera la description. Nous utiliserons deux fichiers, fluxtype.php et sortietype.php; le flux correspondant sera à l'adresse http://monsite.web.com/rss/fluxtype.php (celui-ci ne sera pas automatiquement détectable par les navigateurs, mais tous les 'clients' de votre site pourront s'y abonner. 

 Le fichier fluxtype.php

<?php
// On modifie l'entête du document pour dire que c'est du xml
header("Content-type: application/xml"); 
//Données pour la connexion à la base de données
$nom_du_serveur ="xxxxxxxxxxx";
$nom_de_la_base ="xxxxxxxxxxxx";
$nom_utilisateur ="xxxxxxxxxxxxxx";
$passe ="xxxxxxxxxxx";
//Nom de la page affichant les articles 
$nom_de_la_page="sortietype.php";
//Nom de la table à explorer
$nom_de_la_table="type";
//Identifiant - Généralement le champ id
$identifiant="id";
//Nom du champ affichant le titre
//pas de titre ici!!
//Nom du champ affichant la description
$description="texte"; 
//Nom du champ affichant la date
$date="date"; 
//Fonction pour récupérer l'url principale du site
function url_actuelle()
{
return "http://" . $_SERVER["SERVER_NAME"];
}
$url = (url_actuelle());
//fonction pour balises < >
function EncodeBalise($chaine)
{
//traite <, > et &nbsp pour passage dans fichier rss
$html=array('<', '>', '&nbsp;');
$rss=array('&lt;', '&gt;', ' ');
$resu=str_replace($html, $rss, $chaine);
return $resu;

//Entête du flux rss
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\" ?>\n<rss version=\"2.0\">\n<channel>\n<title>Monsite, quoi de neuf</title>\n<link>$url</link>\n<description>Flux rss de votre site </description>\n<language>fr</language>\n\n";
//Connexion à la base de données
mysql_connect("$nom_du_serveur","$nom_utilisateur","$passe");
//Vérification d'accès à la base de données
mysql_select_db("$nom_de_la_base") or die("Impossible d'ouvrir la base de données ");
//On sélectionne les données
$result = mysql_query("SELECT * FROM type ORDER BY $identifiant DESC");

while($affiche = mysql_fetch_array($result))
{
//On affiche les flux
echo '<item><title>'.$affiche["$date"].'</title>';
echo '<link>'.$url.'/'.$nom_de_la_page.'?id='.$affiche["$identifiant"].'</link>';
$detail=EncodeBalise($affiche["$description"]);
echo '<description>'.$detail.'</description></item>';
}
// Fermeture de la connexion à la base de données
mysql_close();
//On ferme le flux rss
echo "</channel>\n</rss>";
?>

Pour les sorties des données de la table de votre bdd mises dans le flux, on propose d'utiliser le fichier sortietype.php.

 Le fichier sortietype.php

<html>
<head>
<title>Sortie des données de la table type</title>
</head>
<body>
<?php
//sortie des donnees d'un id choisi sur l'adresse url par fichier.php?id=...
$id=$_GET['id'];
function Afficheid($id0){
//Données pour la connexion à la base de données
$nom_du_serveur ="xxxxxxxxxxxxxxxx";
$nom_de_la_base ="xxxxxxxxxxx";
$nom_utilisateur ="xxxxxxxxxx";
$passe ="xxxxxxxxxx";
$nom_de_la_table="type";
//Identifiant - Généralement le champ id
$identifiant="id";
//Nom du champ affichant le titre eventuellement
//$titre="titre";
//Nom du champ affichant la description
$description="texte"; 
//Nom du champ affichant la date
$date="date"; 
//Connexion à la base de données
mysql_connect("$nom_du_serveur","$nom_utilisateur","$passe");
//Vérification d'accès à la base de données
mysql_select_db("$nom_de_la_base") or die("Impossible d'ouvrir la base de données ");
//On sélectionne les données
$result = mysql_query("SELECT * FROM $nom_de_la_table");
while($affiche = mysql_fetch_array($result))
{
//On affiche les flux
if ($affiche["$identifiant"]==$id0) {
echo 'id = '.$affiche["$identifiant"].'<br>';
echo $affiche["$date"].'<br>';
echo $affiche["$description"].'<br>'; 
}
}
// Fermeture de la connexion à la base de données
mysql_close();
return $id0;
}
Afficheid($id);
?>
</body>
</html>

Les données inscrites dans le champ 'texte' de votre table seront écrites de manière habituelle en html (inutile de traiter les caractères acentués é, è ..), mais attention cependant à coder tout caractère & en &amp; surtout dans les éventuelles url définissant un lien dans vos données.


37) Installer plusieurs liens sur une image (image cliquable ou réactive)     Question ou remarque?

Il est facile d'utiliser une image en guise d'ancre ce qui permet en cliquant sur un point quelconque de l'image d'aller sur l'unique URL qui lui est ainsi attachée (voir 3):

<a href="fichier.php"><img src="image.jpg"></a>.

Nous voulons ici associer une certaine URL à une certaine portion d'image (cliquer sur cette zone assure la connexion avec cette URL); en répétant ce processus nous ferons correspondre différentes zones d'image et différentes URL ce qui réalise une image dite cliquable  ou encore réactive. On a besoin pour cela d'un système de coordonnées sur l'image: les positions se mesurent en pixels, l'origine des coordonnées (x=0, y=0) se situe en haut et à gauche de l'image, l'axe horizontal (orienté de la gauche vers la droite) est celui des x, l'axe vertical (orienté de haut en bas) celui des y.

Nous allons développer ici la méthode dite 'usemap', l'ancienne méthode 'imagemap' étant de moins en moins utilisée (elle nécessite en outre l'exécution d'un programme sur le serveur). Avec cette méthode, la réalisation d'une image réactive se fait simplement et uniquement sur la page html (ou php) qui contient l'image en question. 

On commence par décrire le découpage de l'image entre les balises spécifiques <map> et </map>, à l'intérieur desquelles interviennent les balises spécifiques <area shape= ""> et </area>.  Donnons un exemple simple d'une image de 120 pixels de large sur  90 pixels de haut que l'on découpe en deux parties rectangulaires (d'où shape="rect") identiques ('haut' et 'bas').

<MAP name="zonesayrac" >
<AREA id=haut title="Vers le fichier1" shape="rect" coords="0,0,120,45" href="fichier1">
<AREA id=bas title="Vers le fichier2" shape="rect" coords="0,45,120,90" href="fichier2">
</MAP> 

Il suffira ensuite d'appeler l'image en question par le code suivant où intervient usemap qui renvoie au lien local name:

<IMG id=sayrac src="jpg/sayrac.jpg" width="120" height="90" usemap="#zonesayrac"> 

Un clic sur le 'haut' de l'image conduira vers le fichier1, un clic sur le 'bas' conduira sur le fichier2. On peut naturellement découper de manière quelconque notre image en autant de parties souhaitées; shape peut prendre aussi les valeurs poly ou circl attachées à un polygone ou à un cercle. On peut aussi définir une zone neutre de l'image en utilisant l'attribut NOHREF à la place de HREF.

Vous pouvez enfin écrire quelques textes sur l'image elle-même pour préciser les URL atteintes, ceci pouvant être fait facilement par exemple avec le logiciel gratuit PAINT.

A titre d'exemples, cliquez sur les images entourant le titre de ce fichier ou voyez la page Garonne en clics.


38) Installer une fenêtre de progression de chargement d'une page      Question ou remarque?

L'intérêt de cette installation n'est manifeste que pour des pages (avec de nombreuses images par exemple) dont le chargement complet est long; même si la plupart des navigateurs indiquent d'une manière ou d'une autre l'avancement du chargement d'une page, cette installation peut faire patienter les visiteurs et éviter qu'ils ne quittent votre site trop précipitamment à cause de la lenteur de l'ouverture de la page. 

Il s'agit de faire, en javascript,  une mini-fenêtre qui restera affichée pendant le chargement de la page et qui fera patienter le visiteur; elle disparaîtra dès le chargement complet de la page initiale. Le code javascript suivant est à mettre après la balise <body ....> de votre page; naturellement vous pouvez changer les dimensions, les couleurs de la fenêtre ainsi que l'image (éventuelle) et le texte ...

 Le code à mettre immédiatement après la balise <body ...... > de votre  page

<!-- DEBUT DU SCRIPT -->
<STYLE TYPE="text/css">
<!-- 
#cache {
position:absolute; top:200px; z-index:10; visibility:hidden;
}
-->
</STYLE>
<DIV ID="cache"><TABLE WIDTH=400 BGCOLOR=#000000 BORDER=0 CELLPADDING=2 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><TABLE WIDTH=100% BGCOLOR=#CC0000 BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><FONT FACE="Verdana" SIZE=6 COLOR=#000000><B><BR>
Visiteur de SAYRAC:<BR>
//vous mettez l'image et le texte que vous voulez ici

<img src=cheval.gif>SOYEZ PATIENT ! Vous chargez une page avec plusieurs images !!
<BR><BR></B></FONT></TD>

</TR></TABLE></TD> </TR></TABLE></DIV>
<SCRIPT LANGUAGE="JavaScript">
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache }
else if (dom) { cach = document.getElementById("cache").style }
else if (iex) { cach = cache.style }
largeur = screen.width;
cach.left = Math.round((largeur/2)-200);
cach.visibility = "visible";

function cacheOff()
{
cach.visibility = "hidden";
}
window.onload = cacheOff
</SCRIPT>
<!-- FIN DU SCRIPT -->

A titre d'exemple voyez le fichier photos de Sayrac .


39) Installer une barre de pourcentage de progression de chargement d'une page (utilise PHP)      Question ou remarque?

Comme au 38 , l'intérêt de cette installation n'est manifeste que pour des pages (avec de nombreuses images par exemple) dont le chargement complet est long; même si la plupart des navigateurs indiquent d'une manière ou d'une autre l'avancement du chargement d'une page, cette installation peut faire patienter les visiteurs et éviter qu'ils ne quittent votre site trop précipitamment à cause de la lenteur de l'ouverture de la page. 

Il s'agit de faire apparaître en haut de notre page une barre de progression avec pourcentage qui disparaîtra dès le chargement complet de la page initiale; le code est du php et nécessite l'inclusion d'un fichier progressbar.php qui définira notre barre de progresion. Ce fichier ci-dessous est naturellement modifiable à votre convenance en ce qui concerne les dimensions, les couleurs et éventuellement le texte de la barre de progression; il doit être dans le même dossier que votre page initiale.

Le code de votre page doit être modifié comme indiqué sur le second tableau: l'essentiel de son code - php ou non - (surtout celui qui installe des images, c'est-à-dire qui est long en téléchargement) doit être mis dans la boucle for appelant la fonction ProgressBar(), le reste du code (html éventuel) peut être laissé en dehors de ce for. Si votre fichier initial est purement en html (dommage!), il vous suffira d'utiliser la syntaxe HEREDOC et de mettre le code html entre echo <<<identifiant (suivi d'une ligne vide) et identifiant; (plus simple et plus rapide que de mettre toutes les lignes html dans des echo successifs), et le tout, à l'intérieur de la boucle for de la fonction ProgressBar(); dans ce second tableau on a décrit l'essentiel du code avec  l'identifiant MON_HTML pour ce qui concerne les lignes spécifiques de votre fichier initial.

 

 Le fichier progressbar.php

<?php
function Initialize($gauche,$haut,$largeur,$hauteur,$bord_col,$txt_col,$bg_col)
{
echo "<div id='progmaster'>";
$tailletxt=$hauteur-10;
echo '<div id="pourcentage" style="position:absolute;top:'.$haut;
echo ';left:'.$gauche;
echo ';width:'.$largeur.'px';
echo ';height:'.$hauteur.'px;border:1px solid '.$bord_col.';font-family:Tahoma;font-weight:bold';
echo ';font-size:'.$tailletxt.'px;color:'.$txt_col.';z-index:1;text-align:center;">0%</div>';

echo '<div id="progrbar" style="position:absolute;top:'.($haut+1); //+1
echo ';left:'.($gauche+1); //+1
echo ';width:0px';
echo ';height:'.$hauteur.'px';
echo ';background-color:'.$bg_col.';z-index:0;"></div>';
echo "</div>";

}
function ProgressBar($indice)
{
if ($indice==100)
{
echo "\n<script>";
echo "document.getElementById('progmaster').style.display='none'";
echo "</script>";
}
echo "\n<script>";
echo "document.getElementById(\"pourcentage\").innerHTML='".$indice."%';";
echo "document.getElementById('progrbar').style.width=".($indice*2).";\n";
echo "</script>";
flush(); ob_flush();flush(); ob_flush();
//flush(); 

}

?>

 

 Votre fichier initial avec la barre de progression

<html>

<head> ....</head>

<body> 

..........//éventuellement du code 

<?php
include ("progressbar.php");
//Initialize(x,y,largeur,hauteur,'couleur bordure','couleur du pourcentage','couleur de la barre de progression');
Initialize(50,60,200,30,'#000000','#FFCC00','#006699'); // initialisation de la barre de progression
for ($k=0;$k<=100;$k++)
{
ProgressBar($k); // réaffichage de la barre avec le nouvel indice
//le code php de votre fichier  (au moins la partie lourde à charger, par exemple les images ...)

//ou le code html encapsulé: 

//echo <<<MON_HTML

//une ligne vide puis le code html

//MON_HTML;

}
?>

....//éventuellement du code 

</body>

</html>

A titre d'exemple voir le fichier galerie des miniatures de Sayrac .

40) Permettre une lecture confortable d'une page web sur smartphones et tablettes      Question ou remarque?

Voici une technique simplissime pour permettre à vos pages web d'être lues facilement sur les écrans des smartphones et tablettes: votre visiteur n'aura pas besoin de zoomer, la page et la police de caractères s'adapteront automatiquement aux dimensions de l'écran utilisé par votre visiteur. Par ailleurs la même page web sera toujours normalement lisible sur un ordinateur. Une seule et même page sera correctement lue sur tous les appareils permettant de naviguer sur internet: vous n'avez donc pas besoin d'avoir une version spécifique pour smartphone de vos pages web.

Dans votre code html, entre <head> et </head> il vous suffira de mettre la ligne suivante utilisant la balise viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Le gros avantage est que sur un écran d'ordinateur cette balise n'aura strictement aucune action modificative. Sur un mobile ou une tablette, sans cette balise, la page web s'adapte aux dimensions de l'écran récepteur et effectue donc en fait un dézoomage qui produit des caractères trop petits (et l'utilisateur aura besoin de zoomer pour une bonne lecture). L'action de la balise est d'interdire ce dézoomage et d'imposer le zoom à 1 pour avoir une police de caractères bien adaptée à l'écran.

Remarque. Si votre page est uniquement en PHP (et s'appelle toto.php), il vous suffira de l'encapsuler dans du html (et de toujours la nommer toto.php):

<html>

<head>

<meta name="viewport ... >

</head>

<?  votre code php

?>

</html>

Voir par exemple la page de score de bridge sur un iphone (ou index.php ou cette page trucastuces.php).

41) Changement d'image par survol ou clic de la souris      Question ou remarque?

Voici une technique très simple pour que le survol d'une image (image1.jpg) en fasse apparaître une autre (image2.jpg) et qu'un clic sur cette dernière en produise une troisième (image3.jpg).

Dans votre code il suffira de mettre: <img src="image1.jpg" name="image" onmouseover="image.src='image2.jpg'" onmouseout="image.src='image1.jpg'" onmousedown="image.src='image3.jpg'" /> . Vous pouvez bien sûr en outre faire de l'image un lien (utiliser 3 ) vers une page web.

Voir par exemple la page balle de GOLF ou le fichier vues variables (où on a utilisé en plus onmouseup).

42) CAPTCHA de type test numérique (utilise le PHP)     Question ou remarque?

CAPTCHA est l’acronyme pour "Completely Automated Public Turing Test To Tell Computers and Humans Apart". Historiquement le premier captcha est le test de Turing imaginé en 1950 par le mathématicien et cryptologue britannique Alan Turing , que l'on peut considérer en outre comme le père de l'informatique. Un captcha est un court programme visant à protéger un site web (le plus souvent une page de formulaire ou d’inscription ou un envoi de message ou mail) des robots (qui sont eux-mêmes des petits programmes qui vont récupérer des informations ou naviguer sur votre site en se substituant en quelque sorte à un opérateur humain); une question est alors proposée pour que la réponse ne puisse (raisonnablement) être fournie que par un humain (et non par un code décrivant le robot) et ce, rapidement et simplement. Seule la bonne réponse à ce test permet de poursuivre la navigation (sur le formulaire, le lien ou le message). Le test Captcha le plus courant est le test visuel basé sur l’identification de lettres plus ou moins déformées dans un cadre ou dans une image. Nous préférons ici développer des tests de type numérique: un nombre aléatoire est donné et on demande d'en extirper un certain nombre de chiffres avec une position précise dans ce nombre (les deux premiers, les trois derniers, le troisème à partir du premier, l'antépénultien, ...). La plupart des formulaires de message ou de contact proposés sur Sayrac sont assortis d'un captcha qui demande les 3 premiers ou les 3 derniers chiffres d'un nombre aléatoire de 6 chiffres (voir 13 pour les liens de contact avec le code pour les 3 premiers chiffres). On a installé dans le répertoire captcha de Sayrac, un fichier captcha.php?aleatest.php avec un test simple (3 premiers ou 3 derniers chiffres) dont la bonne réponse redirige (voir 24 ) vers un fichier aleatest.php qui propose un test un peu plus élaboré. Une chaîne aléatoire de 12 caractères alphanumériques est affichée et une question aléatoire (parmi 6 possibles) demande d'en extirper un ou plusieurs chiffres. Vous pouvez naturellement utiliser captcha.php pour rediriger vers tout autre fichier (captcha.php?monfichier). Vous pouvez exécuter ces fichiers ou les télécharger en utilisant la technique du 14 .


Les outils de calcul utilisables en ligne (écrits en PHP mises à part  deux simulations en JAVA): 

Ensemble des outils mathématiques proposés  et  téléchargements des divers produits

Pour laisser un message ou un commentaire  ou un message EXPRESS

Vers le sommaire du site

Retour sur SAYRAC

  Contactez-moi; un petit test numérique vérifiera que vous n'êtes pas un robot!