Une horloge (suisse ?) pour le Couteau

L’outil décrit ici est une fonctionnalité du plugin Le Couteau Suisse. « Horloge » vous offre la possibilité d’insérer l’heure et/ou la date du jour dans vos contenus éditoriaux ou dans vos squelettes.

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ètreExplicationValeur 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

CodeAffichage
<horloge1>

ou : <horloge|>

éq. : <span class="jclock">Hello</span>

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. : <horloge|zone=UTC>

éq. : <horloge|zone=0>

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. : <horloge1>

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>

#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.

RaccourciLibelléRaccourciLibellé
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 :

RaccourciLibellé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.

Notes

[1La librairie jQuery est requise pour le fonctionnement de l’horloge. Ce jeu de fonctions JavaScript très utile a été intégré au core dès la version 1.9.2 de SPIP.

[2Il s’agit ici de l’ordinateur du visiteur

[3Ainsi on peut choisir entre un élément block et un élément inline. D’autres balises HTML telles que <p> sont possibles mais plutôt déconseillés à cause du risque de produire de l’HTML non-conforme lorsque la page SPIP est calculée.

Discussion

11 discussions

  • 2
    François Daniel Giezendanner

    Bonjour,

    Excellent, je l’ai activée, ça marche très bien !

    Quelqu’un saurait-il ajouter une lame au couteau suisse pour avoir une belle horloge analogique, c’est du plus bel effet ?

    En fait je viens de chercher à l’instant avec Google, il y a un plugin pour ça ici :

    Cordialement

    FDG

    • Bonjour, cette idée est séduisante en effet. Mais une horloge analogique en PHP/JS suppose, sans afficher la troteuse des secondes, d’un calcul de :

      -  24*60 images par GD et un hit sur le serveur chaque minute pour mettre à jour l’horloge.

      Autant le faire en flash... A la limite, on pourrait imaginer un support d’images digitales où seuls les 10 chiffres seraient à calculer par GD.

      Une idée d’extension utile à cette lame serait la connection à un serveur atomique, car je viens de me rendre compte que pas mal de serveurs ne sont pas du tout à l’heure !

    • François Daniel Giezendanner

      Bonjour,

      En attendant une lame ad hoc pour le couteau suisse, vous pouvez provisoirement procéder de manière un peu sauvage avec un embed :

      tel que je l’indique ici :

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom