Webdesign - Das Datum wie ein Kalenderblatt darstellen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie wurde die Datumsanzeige als Kalenderblatt erstellt?

23Feb2014

Das Datum wie ein Kalenderblatt darstellen


Damit der Besucher darüber informiert wird, zum Beispiel hier auf dieser Seite, wann es etwas Neues gibt, möchte ich das Datum der Erstellung in die Artikel mit einbinden. Und damit das auch vernünftig aussieht, habe ich mir überlegt die Datumsanzeige ähnlich einem Kalenderblatt darzustellen.
Die Anzeige ist dabei ausschließlich mit CSS (Cascading Style Sheet)-Mitteln und einem kleinen Hintergrundbild eines Kalenders erstellt worden.

Zuerst wird die Anzeige als Block mit einer festen Breite und Höhe sowie dem Hintergrundbild festgelegt. Die Farbe und die Schriftgröße für die Jahreszahl werden ebenfalls in diesem "class-Element" mit dem Namen "date" festgelegt.

.date {
    background: url(/bilder/kalender.gif) no-repeat;
    text-align: center;
    font: .9em/.9 Constantia;
    color: #808080;
    float: left;
    display: block;
    height: 4.5em;
    width: 3.5em;
    padding: 0;
}

Für die Tages- und Monatsanzeige habe ich andere Farben und Schriftgrößen eingesetzt, und bei der Monatsanzeige zusätzlich einen Schatten hinzugefügt.
Durch das "em-Tag" wird der Tag automatisch in kursiver Schrift dargestellt und durch das "span-Tag" wird die Kurzschreibweise des Monats in fetter Schrift dargestellt.

.date em {
    display: block;
    font-size: 1.3em;
    padding: 5px 0;
    position: relative;
    color: #c93;
    letter-spacing: 1.5px;
}

.date span {
    display: block;
    font-size: 1.2em;
    margin: .1em 0 0;
    color: #c93;
    text-shadow: -.5px -.5px 0 #101010,.5px .5px 0 #505050;
}

Als Beispiel für den heutigen Tag:

25Sep2017



sieht das HTML (HyperText Markup Language) wie folgt aus:

<span class="date" title="25. September 2017">
  <em>25</em>
  <span>Sep</span>
  2017
</span>

Fertig.

Viel Spaß und Erfolg beim Nachbauen!


Sehr interessant bei der Angabe des Datums auf diesen Seiten ist die Tatsache, dass Google bei einer Suchanfrage sich das erste angegebene Datum aus dem HTML (HyperText Markup Language) ausliest, und bei den Suchergebnissen nach dem Titel und der Adresse ausweist. Bei dieser Seite steht zum Beispiel bei der Suchanfrage "Datum als Kalenderblatt" als Datumsangabe der 23.02.2014, obwohl die Seite in der Fußzeile als letztes Änderungsdatum ein anderes Datum anzeigt. Ich habe diesen zusätzlichen Text nämlich erst am 11.10.2015 geschrieben, und dieses Datum steht nun in der Fußzeile unter "Letzte Änderung:"!

Das Alter von Artikeln wird also bei den Suchanfragen hervorgehoben. Und die Wahl eines Suchenden wird mit hoher Wahrscheinlichkeit auf den aktuelleren Artikel fallen. Ich schaue jedenfalls bei einer Suche genau auf das Datum und wähle die neuere Seite als erstes an. Für mich ist es also ein Eyecatcher, von dem ich mich gegebenenfalls beeinflussen lasse. Dafür nimmt es eventuell etwas Platz der Description (Beschreibung der Seite) weg, die nach dem Datum ausgewiesen wird. Hier muss man also abwägen, was einem wichtiger erscheint. Zirka zwei Wörter mehr Beschreibung oder ein zusätzlicher Komfort für den Suchenden.
Alleine aus dem Grund empfiehlt es sich auf die erste Datumsangabe im Quelltext zu achten!

Ich lasse das Datum in den Artikeln bestehen!

Zum Seitenanfang springen Λ