Klok HTML-sjablonen

Klok HTML-templates voor digitale, analoge en wereldtijdweergaven

Een klokinterface heeft één zichtbare taak: de huidige tijd tonen zodat iemand deze binnen een seconde kan aflezen. Klok HTML-templates bieden de markup voor de weergave en de overige bronbestanden, gereed om te bewerken en te publiceren op uw eigen hosting. Binnenin bevindt zich mogelijk een digitale weergave, een analoge wijzerplaat of een overzicht van stedenkaarten.

Kiezen tussen cijfers en wijzerplaten

Een digitale weergave is het eenvoudigere startpunt en heeft weinig meer nodig dan containers voor uren, minuten en seconden. Een aanduiding voor AM/PM of een 12-/24-uurschakelaar staat er meestal naast. Een analoge wijzerplaat werkt anders, omdat de wijzerplaat, de uurmarkeringen en de wijzers elk een eigen element nodig hebben voordat een script ze laat draaien.

De meeste klokinterfaces zijn opgebouwd uit een paar herkenbare onderdelen:

• tijdwaarden met een apart vak voor seconden
• uur- en minutenwijzers boven een gemarkeerde wijzerplaat
• een datumregel, weekdagaanduiding of alarmindicator
• een stadsnaam en tijdsverschil voor elke extra zone

Bij stedenkaarten begint de markup zich te herhalen, aangezien een bord van acht steden één blok acht keer gebruikt. Nicepage Grid Repeater ondersteunt dit patroon, en de Grid Repeater Element-documentatie legt uit hoe één item de lay-out voor meerdere vermeldingen bepaalt. Productrijen voor wandklokken herhalen zich op dezelfde manier.

Markup die elke seconde bijwerkt

Twee heel verschillende zaken dragen hier dezelfde naam. Soms staat de tijd vast in het bestand geschreven en beweegt deze nooit; prima voor een screenshot, maar misleidend in productie. Een werkende klok heeft JavaScript nodig om de lokale tijd uit te lezen en terug te schrijven in de daarvoor bestemde elementen, terwijl een countdown ditzelfde principe achterwaarts uitvoert naar een datum toe.

De secondewijzer is de eerlijke test. Een demo kan er overtuigend uitzien terwijl er op de achtergrond niets draait; een voorbeeldweergave verdient daarom een paar seconden van uw tijd.

Leesbaarheid op kleine schermen

Klokken worden van grotere afstand afgelezen dan de meeste andere interface-elementen. Cijfers die er op een desktop elegant uitzien, veranderen op een telefoon op armlengte in een grijze vlek, en een dunne secondewijzer verdwijnt tegen een drukke foto.

Wat mensen achteraf aanpassen zijn de cijferstijl, de dikte van de wijzers en de keuze tussen een lichte of donkere weergave. Contrast is het belangrijkst, want een klok die niemand in één oogopslag kan aflezen, faalt in zijn enige taak. Het helpt om vroeg te bepalen welke variant u bouwt, aangezien een enkele klok, een tijdzoneoverzicht en een countdown starten vanuit verschillende elementen.