TRUCS ET ASTUCES 
INFORMATIQUES
INFORMATIQUES
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
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)Pour un compacteur-décompacteur d'archives simple, gratuit et en FRANCAIS: utilisez Muzip .
Pour lutter contre les robots spammeurs, activez un lien anti-spam .
Téléchargez un excellent notificateur de mail gratuit en FRANCAIS: POPTRAY.
Essayez le nouveau moteur de recherche français EXALEAD.
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.
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.
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 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> |
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) 
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
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
<? |
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> |
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> 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> |
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 > Déroulez, choisissez et cliquez </option> <option VALUE="calcul.php"> Calcul, la calculatrice pour les grands nombres, mode d'emploi</option> <option VALUE="conjecture.php"> Conjecture de Syracuse</option> <option VALUE="systdyn.php"> 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 |
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> PAGE de redirection vers un lien mailto</h2> <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écédente" onclick="window.history.back()"> </form> </body> </html> |
| Le
fichier postvers.php
<? |
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.
|
<?php |
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
<? |
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> |
| Le
fichier postdictio.php <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> |
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> |
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 <? |
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> |
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"); |
| Le
fichier detecte.php
<? |
| Le
fichier lieninterne.php
<? |
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> |
| Le fichier
fichierprotege.html
(Attention, ligne 6, bien mettre l'adresse COMPLETE du fichier: http://..../fichierprotege.html?sesame) <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 2 = 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 2 = m 2 , ..., m t * - c t = m t .
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é" 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é 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 ?> |
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> <? ..... </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"); |
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"> |
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 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> |
L'éventuel fichier legende.php qui n'est pas obligatoire ...
| Le
fichier legende.php
<? |
Le fichier mini.php qui génère les photos miniatures est bien sûr obligatoire.
| Le
fichier mini.php
<?php |
| 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"; 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"> |
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"?> |
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> |
| Le
fichier recherche.php
<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 < et >). 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 & 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 |
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> |
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 & 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 --> <img src=cheval.gif>SOYEZ PATIENT ! Vous chargez une page avec plusieurs images !! |
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 |
| Votre
fichier initial avec la barre de progression
<html> <head> ....</head> <body> ..........//éventuellement du code <?php //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
