L'Horloge Modèles HTML

Modèles HTML d'horloge pour affichages numériques, analogiques et fuseaux horaires

Une interface d'horloge a une seule tâche visible : afficher l'heure actuelle pour qu'on puisse la lire en une seconde. Les modèles HTML d'horloge fournissent le balisage de l'affichage ainsi que le reste des fichiers sources, prêts à être modifiés et publiés sur votre propre hébergement. Vous pouvez y intégrer un affichage numérique, un cadran analogique ou un ensemble de fiches par ville.

Choisir entre chiffres et cadrans

Un affichage numérique constitue le point de départ le plus simple, ne nécessitant guère plus que des conteneurs pour les heures, les minutes et les secondes. Un indicateur AM/PM ou un sélecteur 12 h/24 h se trouve généralement à côté. Un cadran analogique fonctionne différemment, car le cadran, les repères des heures et les aiguilles requièrent chacun leur propre élément avant qu'un script ne les anime.

La plupart des interfaces d'horloge sont composées de quelques éléments reconnaissables :

• des valeurs temporelles avec un emplacement distinct pour les secondes
• des aiguilles des heures et des minutes sur un cadran gradué
• une ligne de date, le jour de la semaine ou un indicateur d'alarme
• le nom d'une ville et son décalage pour chaque fuseau supplémentaire

C'est avec les cartes de villes que le balisage commence à se répéter, car un tableau de huit villes utilise huit fois le même bloc. Le Grid Repeater de Nicepage gère ce cas d'usage, et la documentation de l'élément Grid Repeater explique comment un seul élément définit la disposition de multiples entrées. Les rangées de produits pour les horloges murales se répètent de la même manière.

Un balisage mis à jour chaque seconde

Deux réalités très différentes portent ici le même nom. Parfois, l'heure est codée en dur dans le fichier et ne change jamais, ce qui convient pour une capture d'écran mais s'avère trompeur en production. Une horloge fonctionnelle a besoin de JavaScript pour lire l'heure locale et l'écrire dans les éléments prévus à cet effet, tandis qu'un compte à rebours applique ce même principe à rebours jusqu'à une date cible.

La trotteuse constitue le véritable test. Une démo peut sembler convaincante sans que rien ne fonctionne en arrière-plan ; un aperçu mérite donc quelques secondes de votre attention.

Lisibilité sur petits écrans

Les horloges se consultent de plus loin que la plupart des éléments d'interface. Des chiffres élégants sur un écran d'ordinateur se transforment en masse informe sur un téléphone tenu à bout de bras, et une fine trotteuse disparaît sur une photo chargée.

Ce que l'on ajuste par la suite, c'est le style des chiffres, l'épaisseur des aiguilles et le choix d'un thème clair ou sombre. Le contraste est primordial, car une horloge que personne ne peut lire d'un coup d'œil a échoué dans son unique fonction. Il est utile d'arrêter tôt ce que vous construisez, car une horloge unique, un tableau de fuseaux horaires et un compte à rebours partent d'éléments différents.