Présentation
L’outil décrit ici est une fonctionnalité du plugin Le Couteau Suisse que vous pouvez trouver ici : Le Couteau Suisse. Pour avoir accès à l’horloge présentée dans cet article, il vous faut donc avoir préalablement installé ce plugin. Attention, la version minimum requise est : 1.8.17.02.
Ensuite, une fois cet outil « Horloge » activé sur la page d’administration du plugin en espace privé, vous avez la possibilité d’insérer l’heure et/ou la date du jour dans vos contenus éditoriaux (les articles, les brèves, les forums, etc.) grâce à un modèle SPIP surchargeable <horlogeX>
, ou dans vos squelettes grâce à une balise SPIP #HORLOGE
. L’heure que nous vous proposons est celle du serveur hébergeant votre site, lue juste une fois par PHP, ensuite mise à jour en temps réel sur le client (par JavaScript). Moyennant les décalages horaires, et il est possible de modifier la zone choisie, et le format d’affichage. Exemple :
- À Paris, il est 22:10:00
- À Montréal, il est 16:10:00
Voir une horloge ici ou ici.
Dépendances
- Si vous utilisez SPIP version 1.9.2 ou inférieure, il vous faut installer le plugin jQuery, jquery.cookie.js, car cet outil retient pendant la session la différence d’horaire serveur/client dans un cookie, côté client.
- Si vous utilisez SPIP version 1.9.1 ou inférieure, il vous faut en plus installer et activer le plugin Jquery [1] que vous pouvez télécharger ici.
- Nécessaire pour toute version de SPIP : la balise #INSERT_HEAD, qui doit être présente (en un seul exemplaire) dans le header de vos squelettes (entre les balises <head>
et </head>
des fichiers HTML). Les fonctions Javascript du plugin sont insérés grâce à elle. Si vous ne trouvez pas cette balise dans vos codes et que les liens n’ont pas l’apparence voulue, alors l’outil du Couteau Suisse « Balise #INSERT_HEAD » permet d’insérer automatiquement cette balise sans manipulation de votre part.
Le modèle <horloge>
Ce modèle est utilisable dans tous vos contenus SPIP : articles, brèves, rubriques, etc.
Paramètres (tous optionnels)
Paramètre | Explication | Valeur par défaut |
---|---|---|
id | id et class de la balise HTML produite | pas d’id ; class="jclock" |
zone | Nombre d’heures, ville ou raccourci permettant d’inialiser l’horloge | Heure sur l’ordinateur client |
format | Format de l’horloge.
Les codes de formattage sont ceux de PHP. Mais l’horloge fait de son mieux, avec les fichiers de langue SPIP de traduire les éléments textuels (noms des jours, mois) dans la langue de l’article où l’horloge est placée. |
H:i:s |
balise | Balise HTML utilisée pour entourer l’horloge | span |
defaut | Texte brut affiché avant le traitement par jQuery | 99:99 |
Exemples d’utilisation
Code | Affichage |
---|---|
<horloge1>
ou : éq. : |
Affiche l’heure telle qu’elle est lue sur l’ordinateur client [2] ; format par défaut : heures:minutes:secondes. |
<horloge|zone=serveur> |
Affiche l’heure telle qu’elle est lue sur le serveur par PHP. |
<horloge|zone=GMT>
éq. : éq. : |
Affiche l’heure GMT (Temps moyen de Greenwich) courante telle qu’elle est calculée par le serveur PHP. Aujourd’hui (depuis 1972), on parle plutôt d’heure UTC (Temps universel coordonné). |
<horloge|zone=New York> |
Affiche l’heure de la zone environnante de New York telle qu’elle est calculée par le serveur PHP (voir ci-dessous pour les zones). |
<horloge|zone=New York|format=H:i (g:ia) l, \l\e j F Y> |
Affiche l’heure de New York dans un format tel que :
19:42 (7:42pm) samedi, le 1 mai 2010. |
<horloge|id=1>
éq. : |
Le paramètre « id » sert ici à marquer la balise qui contient l’horloge avec un id et une class pour faciliter son traitement par feuille de style CSS. Un id=2 produira : class="jclock jclock2" id="jclock2" . |
<horloge|zone=serveur|balise=div> |
Insère l’horloge dans un <div> plutôt que dans un <span> (balise par défaut). [3] |
Voici le code utilisé nativement par le Couteau Suisse. Il appelle directement la balise #HORLOGE expliquée ci-après :
[(#HORLOGE{
[format=(#ENV{format})],
[zone=(#ENV{zone})],
[id=(#ENV{id})],
[balise=(#ENV{balise})],
[defaut=(#ENV{defaut})]
})]
Pour surcharger ce modèle, repérez simplement le fichier original couteau-suisse/modeles/horloge.html, copiez-le dans le dossier modeles/ de votre squelette et modifiez-le ensuite à votre guise.
La balise #HORLOGE
Pour insérer une horloge à un endroit fixe dans un squelette utiliser la balise #HORLOGE
qui est fonctionellement équivalente.
Equivalences
Modèle (contenus) | Balise (squelettes) | Inclusion statique (squelettes) |
---|---|---|
<horloge|> |
#HORLOGE |
#MODELE{horloge} |
<horloge1>
|
#HORLOGE{id=1} |
#MODELE{horloge,id=1} |
<horloge|format=H:s> |
#HORLOGE{format=H:s} |
#MODELE{horloge,format=H:s} |
Quelques exemples
- Heure locale côté client : #HORLOGE
- Heure serveur : #HORLOGE{zone=serveur}
- GMT & id=jclock2 : #HORLOGE{format=H:i:s,zone=GMT,id=2}
- GMT 0200 & id=jclock4 : #HORLOGE{zone=GMT0200,id=4}
- GMT -0300 (avec utilisation d’un chiffre) : #HORLOGE{zone=-3}
- Heure locale de Montreal : #HORLOGE{zone=Montreal}
- Heure locale de Paris : #HORLOGE{zone=Paris,format=H\hi}
Le paramètre zone
Si on choisit une ville comme valeur pour le paramètre zone
alors l’horloge tiendra compte des changements d’horaire été/hiver.
Voici les villes prises en charge par le plugin. Le paramètre zone
est insensible à la casse.
Villes | ||
---|---|---|
Addis Ababa | Guatemala | Nassau * |
Adelaide | Halifax * | New Delhi |
Aden | Hanoi | New Orleans * |
Algiers | Harare | New York * |
Almaty | Havana * | Oslo * |
Amman * | Helsinki * | Ottawa * |
Amsterdam * | Hong Kong | Paris * |
Anadyr * | Honolulu | Perth |
Anchorage * | Houston * | Philadelphia * |
Ankara * | Indianapolis * | Phoenix |
Antananarivo | Islamabad | Prague * |
Asuncion | Istanbul * | Reykjavik |
Athens * | Jakarta | Rio de Janeiro |
Atlanta * | Jerusalem * | Riyadh |
Auckland | Johannesburg | Rome * |
Baghdad | Kabul | San Francisco * |
Bangkok | Kamchatka * | San Juan |
Barcelona * | Karachi | San Salvador |
Beijing | Kathmandu | Santiago |
Beirut * | Khartoum | Santo Domingo |
Belgrade * | Kingston | Sao Paulo |
Berlin * | Kiritimati | Seattle * |
Bogota | Kolkata | Seoul |
Boston * | Kuala Lumpur | Shanghai |
Brasilia | Kuwait City | Singapore |
Brisbane | Kyiv * | Sofia * |
Brussels * | La Paz | St. John’s * |
Bucharest * | Lagos | St. Paul * |
Budapest * | Lahore | Stockholm * |
Buenos Aires | Lima | Suva |
Cairo | Lisbon * | Sydney |
Canberra | London * | Taipei |
Cape Town | Los Angeles * | Tallinn * |
Caracas | Madrid * | Tashkent |
Casablanca | Managua | Tegucigalpa |
Chatham Islands | Manila | Tehran * |
Chicago * | Melbourne | Tokyo |
Copenhagen * | Mexico City * | Toronto * |
Darwin | Miami * | Vancouver * |
Denver * | Minneapolis * | Vienna * |
Detroit * | Minsk * | Vladivostok * |
Dhaka | Montevideo | Warsaw * |
Dubai | Montgomery * | Washington DC * |
Dublin * | Montreal * | Winnipeg * |
Edmonton * | Moscow * | Yangon |
Frankfurt * | Mumbai | Zagreb * |
Geneva * | Nairobi | Zürich * |
- * : Villes appliquant un changement d’horaire été/hiver
- Mise à jour des données : le 23/04/2010 ; Champ d’application : 2010 - 2019 ; Références : http://www.timeanddate.com/
Les raccourcis suivants peuvent être également utilisables pour le paramètre zone
au lieu d’une ville, mais ils sont peut-être moins très utiles à cause des changements été/hiver.
Raccourci | Libellé | Raccourci | Libellé |
---|---|---|---|
GMT | GMT + 00:00 | GMT1000 | GMT + 10:00 |
GMT0100 | GMT + 01:00 | GMT1100 | GMT + 11:00 |
GMT0200 | GMT + 02:00 | GMT1200 | GMT + 12:00 |
GMT0300 | GMT + 03:00 | GMT1300 | GMT + 13:00 |
GMT0330 | GMT + 03:30 | GMT-0100 | GMT - 01:00 |
GMT0400 | GMT + 04:00 | GMT-0200 | GMT - 02:00 |
GMT0430 | GMT + 04:30 | GMT-0230 | GMT - 02:30 |
GMT0500 | GMT + 05:00 | GMT-0300 | GMT - 03:00 |
GMT0530 | GMT + 05:30 | GMT-0330 | GMT - 03:30 |
GMT0545 | GMT + 05:45 | GMT-0400 | GMT - 04:00 |
GMT0600 | GMT + 06:00 | GMT-0430 | GMT - 04:30 |
GMT0630 | GMT + 06:30 | GMT-0500 | GMT - 05:00 |
GMT0700 | GMT + 07:00 | GMT-0600 | GMT - 06:00 |
GMT0710 | GMT + 07:10 | GMT-0700 | GMT - 07:00 |
GMT0730 | GMT + 07:30 | GMT-0800 | GMT - 08:00 |
GMT0800 | GMT + 08:00 | GMT-0900 | GMT - 09:00 |
GMT0830 | GMT + 08:30 | GMT-1000 | GMT - 10:00 |
GMT0900 | GMT + 09:00 | GMT-1100 | GMT - 11:00 |
GMT0930 | GMT + 09:30 | GMT-1200 | GMT - 12:00 |
Zones de temps :
Raccourci | Libellé | Continent |
---|---|---|
ACDT | Australian Central Daylight Time (UTC + 10:30) | Australia |
ACST | Australian Central Standard Time (UTC + 9:30) | Australia |
AEDT | Australian Eastern Daylight Time or Australian Eastern Summer Time (UTC + 11) | Australia |
AEST | Australian Eastern Standard Time (UTC + 10) | Australia |
AWDT | Australian Western Daylight Time (UTC + 9) | Australia |
AWST | Australian Western Standard Time (UTC + 8) | Australia |
CDT | Central Daylight Time (UTC + 10:30) | Australia |
CST | Central Summer Time (UTC + 10:30) | Australia |
CST | Central Standard Time (UTC + 9:30) | Australia |
CXT | Christmas Island Time (UTC + 7) | Australia |
EDT | Eastern Daylight Time (UTC + 11) | Australia |
EST | Eastern Summer Time (UTC + 11) | Australia |
EST | Eastern Standard Time (UTC + 10) | Australia |
NFT | Norfolk (Island) Time (UTC + 11:30) | Australia |
WDT | Western Daylight Time (UTC + 9) | Australia |
WST | Western Summer Time (UTC + 9) | Australia |
WST | Western Standard Time (UTC + 8) | Australia |
BST | British Summer Time (UTC + 1) | Europe |
CEDT | Central European Daylight Time (UTC + 2) | Europe |
CEST | Central European Summer Time (UTC + 2) | Europe |
CET | Central European Time (UTC + 1) | Europe |
EEDT | Eastern European Daylight Time (UTC + 3) | Europe |
EEST | Eastern European Summer Time (UTC + 3) | Europe |
EET | Eastern European Time (UTC + 2) | Europe |
GMT | Greenwich Mean Time (UTC) | Europe |
IST | Irish Summer Time (UTC + 1) | Europe |
MESZ | Mitteleuroäische Sommerzeit (UTC + 2) | Europe |
MEZ | Mitteleuropäische Zeit (UTC + 1) | Europe |
MSD | Moscow Daylight Time (UTC + 4) | Europe |
MSK | Moscow Standard Time (UTC + 3) | Europe |
UTC | Coordinated Universal Time (UTC) | Europe |
WEDT | Western European Daylight Time (UTC + 1) | Europe |
WEST | Western European Summer Time (UTC + 1) | Europe |
WET | Western European Time (UTC) | Europe |
ADT | Atlantic Daylight Time (UTC - 3) | North America |
AKDT | Alaska Daylight Time (UTC - 8) | North America |
AKST | Alaska Standard Time (UTC - 9) | North America |
AST | Atlantic Standard Time (UTC - 4) | North America |
CDT | Central Daylight Time (UTC - 5) | North America |
CST | Central Standard Time (UTC - 6) | North America |
EDT | Eastern Daylight Time (UTC - 4) | North America |
EST | Eastern Standard Time (UTC - 5) | North America |
HAA | Heure Avancée de l’Atlantique (UTC - 3) | North America |
HAC | Heure Avancée du Centre (UTC - 5) | North America |
HADT | Hawaii-Aleutian Daylight Time (UTC - 9) | North America |
HAE | Heure Avancée de l’Est (UTC - 4) | North America |
HAP | Heure Avancée du Pacifique (UTC - 7) | North America |
HAR | Heure Avancée des Rocheuses (UTC - 6) | North America |
HAST | Hawaii-Aleutian Standard Time (UTC - 10) | North America |
HAT | Heure Avancée de Terre-Neuve (UTC - 2:30) | North America |
HAY | Heure Avancée du Yukon (UTC - 8) | North America |
HNA | Heure Normale de l’Atlantique (UTC - 4) | North America |
HNC | Heure Normale du Centre (UTC - 6) | North America |
HNE | Heure Normale de l’Est (UTC - 5) | North America |
HNP | Heure Normale du Pacifique (UTC - 8) | North America |
HNR | Heure Normale des Rocheuses (UTC - 7) | North America |
HNT | Heure Normale de Terre-Neuve (UTC - 3:30) | North America |
HNY | Heure Normale du Yukon (UTC - 9) | North America |
HST | Hawaii Standard Time (UTC - 10) | North America |
MDT | Mountain Daylight Time (UTC - 6) | North America |
MST | Mountain Standard Time (UTC - 7) | North America |
NDT | Newfoundland Daylight Time (UTC - 2:30) | North America |
NST | Newfoundland Standard Time (UTC - 3:30) | North America |
PDT | Pacific Daylight Time (UTC - 7) | North America |
PST | Pacific Standard Time (UTC - 8) | North America |
Un peu de technique
- Pour obtenir une horloge à l’heure, on se base dans ce plugin sur l’heure du serveur, censée être juste. Le hit pour obtenir l’heure du serveur est une adresse ressemblant à : http://www.toto.fr/plugins/auto/couteau_suisse/outils/horloge_fonctions.php?cs_dateserveur=oui
. Ce hit renvoie un fichier xml du genre :
<?xml version="1.0" encoding="UTF-8"?>
<curTime><U>1272545526</U><Z>7200</Z></curTime>
On peut grâce à ces informations calculer l’heure GMT du serveur : « U » représente les secondes depuis l’époque Unix (1er Janvier 1970, 0h00 00s GMT) et « Z » représente le décalage horaire (secondes). L’heure GMT du serveur est donc ici : 1272545526 - 7200 = 1272538326 secondes.
- JavaScript doit obligatoirement être activé chez le visiteur, sinon, est affiché 99:99 (à moins que le paramètre defaut
soit renseigné). Une fois la page totalement chargée, l’heure est alors mise à jour chaque seconde.
- Afin d’éviter les hits trop nombreux sur le serveur, le delta calculé par rapport au serveur (ou différence entre l’heure UTC du client et l’heure UTC du serveur) et stocké en cookie durant la session. Si les cookies sont désactivés, alors l’heure du serveur est demandée à chaque affichage de la page.
- Le plugin est compatibilité avec AJAX et les crayons : l’horloge est systématiquement redémarée après un clic AJAX ou un crayonnage.
Discussions par date d’activité
11 discussions
Bonjour,
Sous SPIP 4.1.0,, php 7.4.29, Jquery 1.15.0, l’horloge du couteau suisse ne fonctionne pas. on obtient un affichage : 99:99
Bonjour Yann, merci du retour, désolé pour le temps de réponse !
A priori tout est corrigé.
Oui c’est nickel ! Tout fonctionne !
Merci
Répondre à ce message
Tout est correct. AWST +8 , AWDT +9 . Toujours oui
Répondre à ce message
AWST +8 , AWDT +9 . Oui .
Répondre à ce message
Tout est correct.AWDT (UTC +9) AWST (UTC +8).
Répondre à ce message
Bonjour,
Juste pour signaler que les méthodes JS définies dans cout_dates.Js.html ne semblent pas idéales !
Par exemple, j’utilise l’excellent « Datatables » sur le site, qui permet de classer les résultats d’un tableau de facon dynamique.. Et l’objet « String » ne se comportait pas correctement (je suppose que les fonctions de base du prototype sont affectées, dans ce cas word.charAt était undefined..)
Je ne suis pas un expert JS, mais je crois qu’il faudrait placer ces fonctions dans un NameSpace séparé, pour éviter ces soucis
Merci
Répondre à ce message
J’ai de nouveau des soucis avec l’horloge. Des utilisateurs IE (IE8 plus exactement), se plaignent que la page avec une horloge prend une mémoire croissante de leur machine.
En plus, dans les statistiques du site, la page /plugins/couteau_suisse/outils/horloge_fonctions.php est devenue la page la plus visitée (une million de fois depuis le début du mois !).
J’ai mis SPIP 2.1 et CS à jour vers les versions SVN, mais le problème persiste.
Est-ce que, si IE refuse de exécuter le JS localement (config de sécurité ??) cela pourrait provoquer des appels incessants vers le serveur ?
Je pense que le problème est peut-être le même qu’ici :
http://spin.atomicobject.com/2010/1...
Spip 2.1.* tourne avec jQuery 1.4.4. Je constate qu’avec SPIP 3, qui a une version plus moderne de jQuery, le problème disparaît.
L’Horloge est compatible avec SPIP 3 ? Pourquoi n’est-ce pas indiqué dans la liste « Compatibilité » en haut de l’article ?
C’est chose faite.
Répondre à ce message
Bonjour,
On a placé la balise #HORLOGE sur un squelette appelé dans toutes les pages du site.
Différents essais rendent apparemment impossible l’affichage de l’heure de Paris. On a essayé les codes suivants :
A chaque fois, c’est l’heure locale qui est prise en compte pour le calcul de l’heure : nos contacts à l’étranger nous l’ont confirmé.
Je pensais que le paramètre zone=serveur prenait en compte l’heure du serveur sur lequel est hébergé le site (en France) : ce n’est pas le cas. Pire, quand on change l’heure de son ordinateur (sur PC), l’heure affichée change (vous pouvez faire l’essai sur le lien donné sur cette page : http://www.taize.fr/fr_article858.html).
Y a-t-il une solution pour que ça fonctionne ? A moins qu’on ait loupé quelque chose...
Merci d’avance !
Oui. Tu as raison, cela ne marche plus. Lorsque je l’ai installé ce n’était pas comme cela. A un moment donné de l’évolution de SPIP ou du Couteau Suisse un bug a dû s’introduire. Je ne sais pas quand. J’espère que Pat va avoir une intuition d’où provient le problème.
Ayant recherché dans le code, j’ai découvert une solution à un problème similaire. Avec la version la plus récente l’option |zone=serveur faisait bien une calculation à partir du décalage entre le serveur et le client, mais dans le mauvais sens. Par exemple, s’il était 10h00 sur le serveur et 08h00 chez le client, l’horloge dirait 12h00.
Ce problème-là, je l’ai réglé en changeant le fichier outils/jquery.jclock.js du Couteau, en remplaçant « - el.serveur_offset*1000 » par « + ... » partout dans la définition de $.fn.jclock.getTime(el). Par exemple :
now = new Date(now.getTime() + el.serveur_offset*1000) ;
devient
now = new Date(now.getTime() - el.serveur_offset*1000) ;
... sauf que maintenant que nous avons mis à jour notre site live, le problème que vous avez décrit existe à nouveau. Il paraît que la solution est plus complexe ... je regarderai et j’espère avoir une nouvelle solution bientôt.
Après des tests je pense que le correctif de Martin répare l’horloge. (En testant il faut bien penser à détruire le cookie avant un nouvel essai.)
Je viens de faire le commit.
Si d’autres peuvent tester si cela marche bien ce sera bien.
Je viens de mettre à jour le Couteau suisse (version 1.8.43.01 - révision 50452) et le problème persiste :
- dans mon code, j’ai :
A Paris, il est #HORLOGE{zone=Paris,format=H\hi}
- quand je change l’heure de ma station de travail (sous XP), la balise prend en compte ce changement et décale l’heure affichée
Va-t-on y arriver ? Hé hé...
Merci.
Oui, c’est parce que le code crée un cookie qui se souvient du décalage ; ce cookie ne change pas quand l’heure de l’ordinateur est modifié. Malheureusement il faut soit modifier le système pour le forcer à demander au serveur à chaque fois l’heure selon lui, soit accepter que dans ce cas le système ne sera pas parfait.
Si la suppression des cookies ne règle pas ton problème, pourtant, il peut y avoir autre chose qui ne va pas ...
Répondre à ce message
Bonjour,
Merci pour cette horloge qui marche sur notre Intranet via Firefox mais pas sous... IE 6.0... Elle indique 99:99 alors que sous Firefox tout est OK.
Any idea ?
Merci.
Si l’on met simplement 9a fonctionne sous Chrome alors que <horloge|Paris> donne 99:99 je suppose que c’est pareil sous IE que je n’ai pas..
à Vérifier
Ça fonctionne un chouia sous IE6 : j’obtiens un popup « Stack overflow at line : 0 » au chargement de la page, l’horloge passe de 99:99 à l’heure normale une fois le popup validé. (Sous Firefox, aucun problème.)
Y aurait-il une erreur dans le script de l’horloge ?
Merci.
il se pourrait que d’autres scripts de la page soient trop gourmands ?
Si je retire l’horloge, le problème ne se pose pas.
Mais si tu retires un autre script ? tu as un lien public ?
Non, pas de lien public...
Le site tourne à présent sur Firefox, donc ce problème d’affichage ne se pose plus.
Merci !
Répondre à ce message
Attention Erreur avec IE6 sur SPIP 2.1.8
Avec Internet Explorer 6 la lame « Horloge » du couteau suisse essaie d’exécuter un script qu’il ne trouve pas. ??
Donc avec SPIP 2.1.8 sur IE6 désactiver la lame « Horloge » du couteau suisse.
Cordialement
FDG
Répondre à ce message
J’ai eu utilisé cette lame pour afficher la date du serveur et non la date de l’article.
En tout cas merci. ici par exemple l’indicateur des meilleur taux doit avoir la date du jour (j’avais besoin d’afficher le mois en cours automatiquement), et l’article a sa date propre. Cette lame est bienvenue donc. Merci.
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |