Uhr HTML-Vorlagen

HTML-Vorlagen für digitale, analoge und Weltzeitanzeigen

Eine Uhr hat eine einzige sichtbare Aufgabe: die aktuelle Uhrzeit anzuzeigen, sodass sie sofort abgelesen werden kann. HTML-Vorlagen für Uhren liefern das Markup für die Anzeige und die restlichen Quelldateien, die Sie bearbeiten und auf Ihrem eigenen Webspace veröffentlichen können. Im Inneren kann sich eine Digitalanzeige, ein analoges Zifferblatt oder eine Anzeigetafel mit Stadtkarten befinden.

Die Wahl zwischen Ziffern und Zifferblättern

Eine Digitalanzeige ist der einfachste Ausgangspunkt und benötigt im Wesentlichen nur Container für Stunden, Minuten und Sekunden. Eine AM/PM-Markierung oder ein Schalter für 12-Stunden-/24-Stunden-Anzeige befindet sich üblicherweise daneben. Ein analoges Zifferblatt funktioniert anders, da Zifferblatt, Stundenmarkierungen und Zeiger jeweils ein eigenes Element benötigen, bevor sie von einem Programm gesteuert werden.

Die meisten Uhrenoberflächen bestehen aus wenigen erkennbaren Elementen:

• Zeitangaben mit einem separaten Feld für Sekunden
• Stunden- und Minutenzeiger über einem Zifferblatt
• Datumszeile, Wochentagsangabe oder Alarmanzeige
• Stadtname und Zeitzone für jede zusätzliche Zone

Bei Stadtkarten beginnt sich das Markup zu wiederholen, da eine Karte mit acht Städten einen Block achtmal verwendet. Der Nicepage Grid Repeater deckt dieses Muster ab, und die Dokumentation zum Grid Repeater Element erklärt, wie ein Element das Layout für mehrere Einträge definiert. Produktzeilen für Wanduhren wiederholen sich auf die gleiche Weise.

Markup, das sich jede Sekunde aktualisiert

Hier werden zwei verschiedene Dinge unter demselben Namen geführt. Manchmal wird die Zeit in die Datei geschrieben und bleibt unverändert, was für einen Screenshot in Ordnung ist, aber im Produktivbetrieb irreführend sein kann. Eine funktionierende Uhr benötigt JavaScript, um die lokale Zeit auszulesen und in die dafür vorgesehenen Elemente zurückzuschreiben, während ein Countdown dasselbe Prinzip rückwärts bis zu einem Datum ausführt.

Der Sekundenzeiger ist der entscheidende Test. Eine Demo kann überzeugend wirken, auch wenn im Hintergrund nichts läuft. Daher lohnt sich eine kurze Vorschau.

Lesbarkeit auf kleinen Bildschirmen

Uhren werden aus größerer Entfernung gelesen als die meisten anderen Bedienelemente. Elegante Ziffern auf dem Desktop wirken auf einem Smartphone in Armlänge unleserlich, und ein dünner Sekundenzeiger verschwindet vor einem unruhigen Foto.

Nutzer passen anschließend die Ziffernart, die Zeigerstärke und die Helligkeit des Displays an. Der Kontrast ist besonders wichtig, denn eine Uhr, die niemand auf einen Blick ablesen kann, hat ihren Zweck verfehlt. Es ist hilfreich, sich frühzeitig festzulegen, welche Art von Anzeige man erstellen möchte, da eine einzelne Uhr, eine Zonenanzeige und ein Countdown auf unterschiedlichen Elementen basieren.