Zu technischen Details

2014

Juli-August

Im Juli 2014 änderte RP die Seiten in HTML5. Im August korrigierte er vieles nach diesem Standard.

September

Im September 2014 erhielt die Seite eine neue Kopfzeile, wobei das neue HTML5-Tag <header> verwendet wird. Außerdem wurde eine Fußzeile per <footer> hinzugefügt. Hierbei wurde auch gleich noch die CSS-Unterstützung für den veralteten Netscape 4.x entfernt.

Seit September 2014 verwenden wir eine ICON-Schriftart für Symbole für unterschiedliche Dateien. Die Information dazu lautet: Font generated by flaticon.com under CC BY. The authors are: Freepik.

Am 14. September 2014 wurde das oben erwähnte Skript für Infofenster durch eine CSS-VarianteSie verwendet CSS für die Formate und funktioniert ohne Javascript. Siehe auch auf der Seite von Menucool. Siehe auch auf unserer Seite dazu. ersetzt.

Am 19. September 2014 hat RP endlich eine Lösung für den versteckten Schatten beim Hauptmenü, im Internet Explorer 9-11, gefunden. Schuld daran war:

Quelltext CSS
border-collapse:collapse;

in der Definition des äußeren Kastens der Navigation. Es reichte aus, das genannte Format auszukommentieren.

Am 22. September 2014 wurden dann für den Internet Explorer 8 eine Variante gefunden, um dort den Schatten beim Menü zu erzeugen. Leider taugt diese Variante nicht für ältere Explorer, da dort beim Testen dann die Untermenüs abgeschnitten wurden. Hierfür wird folgender Code in einer eigenen CSS-Datei verwendet:

QuelltextCSS
nav#chefa {
filter:progid:DXImageTransform.Microsoft.dropShadow(color=#aaaaaa, offX=5, offY=5, positive=true);
         }

Am 24. September 2014 hat RP das RSS-Feed erneuert.

Am 27. September 2014 hat RP die Fußzeile der Seiten ergänzt.

Oktober

Am 3. Oktober 2014 hat RP erneut die Fußzeile ergänzt.

Seit dem 13. Oktober 2014 ermöglicht ein jquery-Skript, daß ein Untermenü in der Navigation sichtbar bleibt, wenn man es mit der Tab-Taste fokusiert. Es hat folgenden Kode.:

QuelltextJS
<script src="js/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev('a');
  $(this)
    .focus (function () { link.addClass ('focus'); })
    .blur  (function () { link.removeClass ('focus'); });
});
});
</script>

Das Skript gibt dem Link im Hauptteil der Navigation die Klasse .focus, wenn im Untermenü ein dortiger Link den Fokus hat. Ausgeklappt wird dann per CSS.

Quelltext CSS
         nav#chefa ul li a.focus + .ordner {left:auto;
                                            opacity:1;
         }

Weil Screenreader (Vorlesebrowser) versteckte Inhalte auch nicht mehr vorlesen, wird der folgende Kode nicht mehr verwendet:

Quelltext CSS
         nav#chefa ul li a.focus + .ordner {visibility:visible;
                                            opacity:1;
         }

Das Verstecken erfolgt jetzt durch folgenden Code:

Quelltext CSS
         nav#chefa ul li a.focus + .ordner {left:-9999em;
                                            opacity:0;
         }

Die alte Methode war:

Quelltext CSS
         nav#chefa ul li a.focus + .ordner {visibility:hidden;
                                            opacity:0;
         }

RP hat sich dabei von den folgenden Kodes aus einem Blog inspirieren lassen.

QuelltextCSS
 li.hover ,
 li:hover {
  ...
 }
Quelltext JS
 $('#navi li').each (function () {
  var that = this;
  $(this)
    .mouseover (function () { that.addClass ('hover'); })
    .mouseout  (function () { that.removeClass ('hover'); });
});

Am 16. Oktober 2014 hat RP das eine Bild aus der Kopfzeile durch richtigen formatierten Text ersetzt. Außerdem hat er die Schriftart "Droid-Sans" für Überschriften eingebunden. Die Schrift unterliegt der Apache Lizenz.

Am 17. Oktober 2014 hat er dieses für den alten Internet Explorer 8 angepaßt und getestet. Außerdem hat er die :focus-Funktionalität bei Bildern korrigiert.

Am 20. Oktober 2014 hat RP das Jquery-Skript in eine eigene Datei verlagert. Sein Code sieht so aus, wobei es ein bißchen geändert wurde:

Quelltext JS
$(document).ready(function() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev('a');
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
});

Das obige Skript läuft nicht im Internet Explorer 8. Wer hat eine Idee, wie sich das korrigieren läßt?

Am 24. Oktober 2014 hat RP die folgende kleine Änderung des Skriptes getestet. Leider klappt es im IE 8 immer noch nicht.

Quelltext JS
function submenuo() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev('a');
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
}
$(document).ready(function() {
  submenuo();
});

Seit dem 24. Oktober 2014 wird der aktuelle Menüpunkt per Jquery markiert, weil dies mit CSS nicht möglich ist. Das Skript ist:

Quelltext JS
function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);
    // Bei Offline-Test den komischen Pfad entfernen, falls vorhanden
    if (path.match("/I:/retpaghoj/societo")) {
    path=path.replace("/I:/retpaghoj/societo","");
    }
    // Abfrage, ob path leer ist, denn das passiert bei der deutschen Startseite
    if (path == "") {
       path = "/index.html";
    }

    $("nav#chefa a").each(function () {
        var href = $(this).attr('href');
        // wenn href mit ../ beginnt, diese entfernen - aber nur das erste Auftreten
        if (href.match("../")) {
        href=href.replace("../","");
        }
        // / vor href stetzen, damit der folgende Vergleich paßt
        href="/" + href;
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

Den Basiskode hat RP auf den Seiten http://jsfiddle.net/DDZNz/ und stackoverflow.com gefunden und dann angepaßt. Er lief nämlich ohne Änderungen nicht.

Der originale Kode stammte von Davide Pugliese aus der obigen Seite, erwies sich aber als nicht lauffähig.

Quelltext JS
function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

$(function () {
    setNavigation();
});

Nach erfolgreichem Test, ob die Entlinkung des aktuellen Menüpunktes funktioniert, hat RP die Skriptdatei am 26. Oktober 2014 umbenannt: Skriptoj.js.

Der Kode für die Elementersetzung stammt von der Seite stackoverflow.com und unterliegt der cc-wiki bzw. cc-by-sa-Lizenz. Im Original sah er so aus und stammte von tewathia:

Quelltext JS
$('code').replaceWith(function() {
    var replacement = $('<pre>').html($(this).html());
    for (var i = 0; i < this.attributes.length; i++) {
        replacement.attr(this.attributes[i].name, this.attributes[i].value);
    }
    return replacement;
});

Der vorige Kode für die Ersetzung basierte auf dem folgende Kode, hatte aber alle Attribute entfernt. Er stammte von Felix Kling.

Quelltext JS
$('code').replaceWith(function(){
    return $("<pre />", {html: $(this).html()});
});

Am 27. Oktober 2014 bekamen die Grünen Boten eine Navigation für die einzelnen Ausgaben des Jahres.

Am 29. Oktober 2014 hat RP eine automatische Nummerierung der Überschriften per CSS eingebaut.

November

Am 4. November 2014 hat RP eine Suchseite eingebaut. Die dortigen Suchergebnisse erscheinen aber auf einer externen Seite.

Am 5. November 2014 hat RP die Markierung der Menüpunkte mit Untermenü geändert. Hierbei hat er ein Hintergrundbild eingefügt, welches sogar im IE 7 funktioniert. Jetzt wird dafür folgendes CSS verwendet:

Quelltext CSS
            /* Markierung eines Menüpunktes mit Untermenü sieht mit Hintergrundbild besser aus */
            nav#chefa ul li[data-col] a {
                   background-image:url(../bildoj/pilketo_siringokolora_12x12.gif);
                   background-position:left center;
                   background-repeat:no-repeat;
            }
            nav#chefa ul li[data-col] .ordner a {
                   background-image:none;
            }
            nav#chefa ul li[data-col] a:hover,
            nav#chefa ul li[data-col] a:focus {
                   background:#fcc;
                   background:url(../bildoj/pilketo_siringokolora_12x12.gif) left center no-repeat scroll, -webkit-linear-gradient(top, #fdd, #fbb);
                   background:url(../bildoj/pilketo_siringokolora_12x12.gif) left center no-repeat scroll, linear-gradient(to bottom, #fdd, #fbb);
            }

            nav#chefa ul li[data-col] .ordner a:hover,
            nav#chefa ul li[data-col] .ordner a:focus {
                   background-color:#fcc;
                   background:-webkit-linear-gradient(top, #fdd, #fbb);
                   background:linear-gradient(to bottom, #fdd, #fbb);
            }

Den folgenden Kode hat RP aus der CSS-Datei entfernt:

QuelltextCSS
            nav#chefa ul li[data-col="sp3"]:before,
            nav#chefa ul li[data-col="sp4"]:before,
            nav#chefa ul li[data-col="sp5"]:before             {
                   content:"\00BB";
                   color:green;
                   background: none repeat scroll 0% 0% #cfc;
                   position:absolute;
                   left:3px;
                   top:-5px;
                   line-height:24px;
                   -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                   -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                   border:1px dashed red;
                   border-radius: 50%;
                   font-size: 22px;
                   padding: 5px 8px 6px;
                   -webkit-transform: rotate(90deg);
                   -ms-transform: rotate(90deg);
                   transform: rotate(90deg);
            }
            nav#chefa ul li[data-col="sp1"]:before {
                   content:"|";
                   position:absolute;
                   left:3px;
                   -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                   -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                   border:1px dashed red;
                   border-radius: 50%;
                   padding:0.1em;
            }

Die alten Formate paßten nicht zu allen Menüpunkten, wobei die Variante für die ganz linken Menüpunkte besonders unschön aussah.

Am 17. November 2014 hat RP den Abschnitt "Vergangenes" auf der Startseite unterteilt und um Verweise auf die entsprechenden Jahre ergänzt. Vorschläge für den Abschnitt sind willkommen, wenn sie sich leicht umsetzen lassen.

Außerdem hat er einen Fehler im Skript korrigiert. Es sieht jetzt so aus:

Quelltext JS
function submenuo() {
$("nav#chefa li ul a").each (function () {
  var that = this;
  var link = $(that).parent('li').parent('ul').prev(''); // prev('a') geht nicht, weil die Funktion SetNavigation ja "a" durch "b" ersetzt
  $(this)
    .focusin(function () { link.addClass('focus'); })
    .focusout(function () { link.removeClass('focus'); });
});
}

Am 19. November 2014 hat RP die automatische Nummerierung auf einigen Seiten teilweise deaktiviert, weil sie dort irritierte. Sie ist dort auf die Hauptüberschriften der Abschnitte beschränkt. Hierfür wird folgender Kode genutzt.

Quelltext CSS
           /* Aus dem Abschnitt "Vergangenes" bzw. "Okazintaĵoj" bei h3 auf den Startseiten entfernen */
           .nombruchefe h3:before {
                   content:"";
           }

Am 20. November 2014 hat RP endlich eine Lösung für den alten IE7 gefunden, so daß die Entlinkung wieder funktioniert. Der Kode dafür ist sehr kurz, denn auf die Übernahme der Attribute wird für solchen alten Browser verzichtet. Die Attribute können im IE7 sowieso nicht per :after oder :before und content nach CSS2.1 genutzt werden, weil der Browser das nicht unterstützt.

Quelltext JS
              // IE 7 und wohl auch aeltere brauchen eine Extrawurst.
              if (document.all && !document.querySelector) {
                 return $("<b />", {html: $(this).html()});
              }

Seit dem 21. November 2014 sieht der Kode für die Einbindung des Farbverlaufs auf der Startseite anders aus und besteht nur noch aus zwei Teilen:

Quelltext Javascript
 <script type="text/javascript" src="js/farbverlauf.js"></script> 
QuelltextHTML
<h1>Willkommen auf den Internetseiten des Landesverbandes Mecklenburg-Vorpommern und des
<script type="text/javascript">
<!--
rainbow("Esperanto-Vereins Neubrandenburg",4,"00CC00 CCCC00 FFCC00 CC0000")
-->
</script>
<noscript>Esperanto-Vereins Neubrandenburg</noscript>
</h1>

Der neskr-Teil im <head>-Bereich fiel also ganz weg, während er im <body>-Bereich zu <noscript> wurde.

Das Farbverlaufsskript kann sogar mittem im Text verwendet werden, wie in der Hauptüberschrift auf dieser Seite:

QuelltextHTML
<h1>Zu <script>
<!--
  rainbow("technischen",4,"00CC00 CC0000");
-->
</script><noscript>technischen</noscript> Details</h1>

Es ist nur wichtig, daß die <script>- und <noscript>-Teile direkt aufeinander folgen.

Dezember

Am 3. Dezember 2014 hat RP einen Darstellungsfehler in älteren Geckobrowser, wie z.B. K-Meleon 74, bei den Tooltips von Bildergalerien behoben. Die Änderung besteht aus drei Teilen:

Quelltext CSS
   .galerio {
              display:table;
              margin:0 auto;
           }

wurde durch folgendes ersetzt:

Quelltext CSS
   .galerio {
              display:table;
              margin:0 auto;
              position:relative; /* fuer alte Geckos, wie z.B. K-Meleon 74, die sonst falsch positionieren */
           }

Die zweite Änderung fiel größer aus, indem folgende Codeblöcke zusamengelegt wurden:

Quelltext CSS
           .galerio figure figcaption,
           figure.live.helpoteksto figcaption {
                             position:absolute;
                             top:-50em;
                             left:-200em;
                             z-index:2;
                             -webkit-transition:left 0.5s linear;
                             -moz-transition:left 0.5s linear;
                             -o-transition:left 0.5s linear;
                             transition:left 0.5s linear;
           }

           figure.live.helpoteksto figcaption {
                             padding:0 0.3em;
                             box-sizing:border-box;
           }

zu dem folgenden, allerdings mit einigen Änderungen:

Quelltext CSS
           .galerio figure figcaption,
           figure.live.helpoteksto figcaption {
                            position:absolute;
                            top:-50em;
                            left:-200em;
                            padding:0 0.3em;
                            /*width:100%; wird im K-Meleon vermurxt */
                            width:106px;
                            z-index:2;
                            opacity:0;
                            -moz-box-sizing:border-box;
                            box-sizing:border-box;
                            -webkit-transition:opacity 0.5s linear;
                            -moz-transition:opacity 0.5s linear;
                            -o-transition:opacity 0.5s linear;
                            transition:opacity 0.5s linear;
           }

Hierbei mußte auf die animierte Positionsänderung verzichtet werden, weil in Geckobrowsern left (genau wie right, top und bottom) mit dem Wert auto nicht funktioniert. Aber opacity funktioniert sehr gut, nachdem es auch im folgenden Block ergänzt wurde.

Der letzte Block mußte etwas ergänzt und geändert werden:

Quelltext CSS
           .galerio figure:hover figcaption,
           figure.live.helpoteksto:hover figcaption,
           .galerio figure a:focus + figcaption,
           figure.live.helpoteksto a:focus + figcaption {
                            top:auto;
                            left:0;
                            color: #000000;
                            background: #FBF5E6;
                            background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
                            background: linear-gradient(to bottom, #FBF5E6 0%, #FFFFFF 100%);
                            border: 1px solid #CFB57C;
                            -webkit-border-radius:5px;
                            border-radius:5px;
                            width:100%;
                            -webkit-box-shadow: 2px 2px 2px #999;
                            -moz-box-shadow: 2px 2px 2px #999;
                            box-shadow: 2px 2px 2px #999;
           }

und zwar in die beiden folgenden:

Quelltext CSS
           .galerio figure:hover figcaption,
           figure.live.helpoteksto:hover figcaption,
           .galerio figure a:focus + figcaption,
           figure.live.helpoteksto a:focus + figcaption {
                            top:auto;
                            /*left:0; wird im K-Meleon 74 und anderen aelteren Geckos vermurxt */
                            left:auto;
                            /* Verschiebung des Tooltips nach links, weil es per left nicht anders klappt */
                            margin-left:-0.5em;
                            color: #000000;
                            opacity:1;
                            background: #FBF5E6;
                            background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
                            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
                            background: linear-gradient(to bottom, #FBF5E6 0%, #FFFFFF 100%);
                            border: 1px solid #CFB57C;
                            -webkit-border-radius:5px;
                            border-radius:5px;
                            -webkit-box-shadow: 2px 2px 2px #999;
                            -moz-box-shadow: 2px 2px 2px #999;
                            box-shadow: 2px 2px 2px #999;
           }
           /* Verschiebung etwas anpassen */
           figure.live.helpoteksto:hover figcaption,
           figure.live.helpoteksto a:focus  + figcaption {
                            margin-left:-0.6em;
           }

Am Abend des 3. Dezember 2014 hat RP die Seite über technische Details aufgeteilt, weil sie sehr groß waren. Er hat hierbei drei Themen ausgegliedert und zwar nach:

Am 8. Dezember 2014 hat er eine weitere Seite zur vorigen Liste hinzugefügt, auf welcher es um die Varianten von Tooltips (Infofenster) geht.

Am 12. und 13. Dezember 2014 hat RP die Kopfzeilen der Grünen Boten etwas umformatiert. Dabei wird jetzt in Browsern, die CSS unterstützen, der Titel etwas größer und in Großbuchstaben angezeigt. Im Quelltext des Grünen Boten sieht das ungefähr so aus:

Quelltext HTML
<h1 id="leterkapo">Verda Informilo,<span class="aldono"> nro. 05/2014, 9a de decembro 2014</span><br />
<span lang="de">Grüner Bote,<span class="aldono"> 05/2014, 9. Dezember 2014</span></span></h1>
<h2><span lang="eo">estas la oficiala informilo de estraroj de Landa Asocio Meklenburgio-Antaŭpomerio (LAMA) kaj Esperanto-Societo<br />
  Neubrandenburg (ESN)</span><br />
  ist das offizielle Mitteilungsblatt der Vorstände des LVMV und EVN<br />
  www.esperanto-nb.de, </h2>

Und das zugehörige CSS lautet:

Quelltext CSS
           /* fuer Gruener Bote / Verda Informilo */
           h1#leterkapo {
                   text-transform:uppercase;
                   font-size:1.5em;
           }
           h1#leterkapo span.aldono {
                   text-transform:none;
                   display:block;
                   font-size:.75em;
           }
           h1#leterkapo br {
                   display:none;
           }
           h1#leterkapo + h2 {
                   font-size:1.125em;
           }

Um eine unschöne Anzeige der Hintergründe und Schatten bei umgebrochenen Links zu vermeiden, nutzen wir seit dem 13. Dezember 2014 folgende Formate:

Quelltext CSS
           a,
           a:link  {
                   color:#0000ff;
                   text-decoration: underline;
                   -webkit-text-decoration-style:wavy; /*dotted;*/
                   -moz-text-decoration-style:wavy; /*dotted;*/
                   text-decoration-style:wavy;
                   /* um Umbrüche bei den anderswo definierten Schatten und Hintergründen zu vermeiden */
                   -webkit-box-decoration-break: clone;
                   -o-box-decoration-break: clone;
                   box-decoration-break: clone;
           }

Das funktioniert sogar schon in den meisten Browsern außer dem Internet-Explorer, älteren Firefox-Versionen (vor 32) und älteren Safaris (vor 6.1), wie man bei caniuse.com nachlesen kann.

Am 15. Dezember 2014 hat RP das class-Attribut bei <pre> überflüssig werden lassen, wenn der Tag in <figure> steht. Dann können nämlich alle Klassen beim <figure> stehen.

Am 23. Dezember hat RP ein Foto von 1996 gefunden, auf dem er während des Weltkongresses in Prag zu sehen ist.

Außerdem hat er die Listen über Vergangenes auf den Startseiten umgeordnet, so daß jetzt das aktuellste Jahr oben steht.