Klok HTML-sjablonen

HTML-sjablonen voor klokken met digitale, analoge en wereldtijdweergave

Een klokinterface heeft één zichtbare functie: de huidige tijd weergeven, zodat iemand deze in een oogwenk kan aflezen. HTML-sjablonen voor klokken bieden de markup voor de weergave en de rest van de bronbestanden, klaar om te bewerken en te publiceren op uw eigen hosting. Binnenin kan er een digitale weergave, een analoge wijzerplaat of een bord met plaatsnamen te vinden zijn.

Kiezen tussen cijfers en wijzerplaten

Een digitale weergave is het eenvoudigste uitgangspunt en heeft weinig meer nodig dan containers voor uren, minuten en seconden. Een markering voor AM/PM of een schakelaar voor 12-uurs/24-uursweergave bevindt zich 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 kan laten draaien.

De meeste klokinterfaces zijn opgebouwd uit een paar herkenbare onderdelen:

• tijdwaarden met een apart vakje voor de seconden
• uur- en minutenwijzers boven een wijzerplaat met markeringen
• een datumregel, een label voor de weekdag of een alarmindicator
• een plaatsnaam en een offset voor elke extra zone

De opmaak begint zich te herhalen bij de plaatskaarten, omdat een bord met acht plaatsen één blok acht keer gebruikt. Nicepage Grid Repeater behandelt dit patroon en de documentatie van het Grid Repeater Element legt uit hoe één item de lay-out voor meerdere items definieert. Productrijen voor wandklokken herhalen zich op dezelfde manier.

Opmaak die elke seconde wordt bijgewerkt

Twee verschillende dingen worden hier onder dezelfde naam weergegeven. Soms wordt de tijd in het bestand geschreven en blijft deze ongewijzigd, wat prima is voor een screenshot, maar misleidend in een productieomgeving. Een werkende klok heeft JavaScript nodig om de lokale tijd te lezen en terug te schrijven naar de daarvoor bestemde elementen, terwijl een afteltimer hetzelfde principe toepast, maar dan terug naar een bepaalde datum.

De secondewijzer is de eerlijke test. Een demo kan er overtuigend uitzien, zelfs als er niets achter zit, dus een preview verdient een paar seconden van je tijd.

Leesbaarheid op kleine schermen

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

Wat mensen achteraf aanpassen, is de stijl van de cijfers, het gewicht van de wijzers en of het scherm licht of donker is. Contrast is het belangrijkst, want een klok die niemand in één oogopslag kan aflezen, heeft zijn enige taak niet volbracht. Het is handig om vroegtijdig te bepalen wat voor soort klok je wilt bouwen, aangezien een enkele klok, een zonebord en een aftelfunctie uit verschillende elementen beginnen.