Zu technischen Details

Verwendete Spezifikationen

Wir setzen schon seit 2014 HTML-Tags ein, die HTML5Hypertext Markup Language - Auf Esperanto: Hiperteksta Marklingvo - Eine englische Seite über den Standard ist http://www.w3.org/TR/html5/. Eine gute Erklärung in Esperanto ist auf den Seiten von Bertilow zu finden. entsprechen. Sollten Sie irgendwo ein Tag finden, welches nicht dazugehört, bitten wir um Information. Außerdem verwenden wir auf unseren Seiten CSS 2.1 und teilweise CSS3.

Grundstruktur

Für das Grundgerüst der Seite nutzen wir folgendes Schema:

Quelltext HTML
<!DOCTYPE html>
<html>
<head>
      <title>Titel</title>
</head>
<body>
      Inhalte
</body>
</html>

Sektionen

Für die Gliederung nutzen wir:

Listen

Für Listen verwenden wir:

Verweise

Für Verweise nutzen wir:

Seit September 2016 nutzen wir für unnumerierte Listen folgendes:

Quelltext CSS
                   ul {
                                        list-style-type: none;
                                        }
           #enhavo ul li:before  {
                                        content:"\2605";
                                        color:green;
                                        position:relative;
                                        left:-0.7em;
                                        top:25%;
           }
                   #enhavo ul ul {
                                        padding-left:20px;
                   }
           #enhavo ul ul li:before  {
                                        content:"\25C8";
                                        /*position:relative;
                                        left:-0.7em;
                                        top:25%;                                        */
           }
           #enhavo ul ul ul li:before {
                                        content:"\2665";
           }

RP hat solches auf der Seite http://blog.designimsinn.de/list-style-type-mit-unicode-gestalten/ gefunden, aber ein bißchen mehr Code dafür ergänzt. Deshalb sind die Symbole ja grün.

Bilder

Für Bilder nutzen wir schon HTML5, nämlich:

Quelltext HTML
<figure>
 <img src="URL zum Bild" alt="Text">
 <figcaption>Beschreibung</figcaption>
</figure>

Seit dem 3. April 2016 verwendeten wir einen etwas komplexeren Kode, aber bis nun nur in den neuesten Grünen Boten:

Quelltext HTML
<figure>
 <picture>
  <source media="(max-width: 480px)" srcset="">
  <source media="(max-width: 640px)" srcset="">
  <source media="(max-width: 1024px)" srcset="">
  <img src="URL al bildo" alt="Teksto">
 </picture>
 <figcaption>Priskribo</figcaption>
</figure>

Am 10. Juli 2016 hat RP diesen Code in folgenden geändert:

Quelltext HTML
<figure>
 <picture>
  <source media="(max-width: 619px)" srcset="">
  <source media="(max-width: 819px)" srcset="">
  <source media="(max-width: 1024px)" srcset="">
  <img src="URL al bildo" alt="Teksto">
 </picture>
 <figcaption>Priskribo</figcaption>
</figure>

Außerdem hat er das CSS etwas ergänzt:

Quelltext CSS
                   /* Bilderpaar im Verda Informilo */
                   .duopo800 {
                            -webkit-display:flex;
                            display:flex;
                                -webkit-justify-content:space-between;
                                justify-content:space-between;
                                width:100%;
                   }
                   /* bei zu geringer Breite Bilder untereinander */
                   @media screen and (max-width:1718px) {
                            .duopo800 {
                            flex-direction:column;
                                }
                   } /* Ende @media */

                   .duopo800 figure.live,
                   .duopo800 figure.dekstre        {
                                float:none;
                width:810px;
                   }
                   .duopo800 figure.alta {
                            width:610px;
                        }
                        .duopo800 figure.largha {
                                height:630px;
                        }
                   /* Bei kleinerer Breite auch Breite des figure-Tags anpassen */
                   @media screen and (max-width:619px) {
                           .duopo800 figure.live,
                           .duopo800 figure.dekstre {
                                   width:410px;
                           }
                   .duopo800 figure.alta {
                            width:310px;
                        }
                        .duopo800 figure.largha {
                                height:330px;
                        }

                   } /* Ende @media */

                   @media screen and (min-width:620px) and (max-width:819px) {
                           .duopo800 figure.live,
                           .duopo800 figure.dekstre {
                                   width:610px;
                           }
                   .duopo800 figure.alta {
                            width:460px;
                        }
                        .duopo800 figure.largha {
                                height:480px;
                        }

                   } /* Ende @media */

Am 11. Juli 2016 hat RP das CSS geändert, damit etwas und sehr alte Browser dieses nicht anwenden, wie folgt:

Quelltext CSS
                        @supports (display:flex) or (-webkit-display:flex) {
                                .duopo800 figure.live,
                                .duopo800 figure.dekstre        {
                                        float:none;
                                        width:810px;
                                }


                                .duopo800 figure.alta {
                                        width:610px;
                                }
                                .duopo800 figure.largha {
                                        height:630px;
                                }

                                /* Bei kleinerer Breite auch Breite des figure-Tags anpassen */
                                @media screen and (max-width:619px) {
                                        .duopo800 figure.live,
                                        .duopo800 figure.dekstre {
                                                width:410px;
                                        }
                                        .duopo800 figure.alta {
                                                width:310px;
                                        }
                                        .duopo800 figure.largha {
                                                height:330px;
                                        }

                                } /* Ende @media */

                                @media screen and (min-width:620px) and (max-width:819px) {
                                        .duopo800 figure.live,
                                        .duopo800 figure.dekstre {
                                                width:610px;
                                        }
                                        .duopo800 figure.alta {
                                                width:460px;
                                        }
                                        .duopo800 figure.largha {
                                                height:480px;
                                        }

                                } /* Ende @media */

                        } /* Ende supports */

Am 11. Juli nachmittags hat RP erneut etwas wie folgt ergänzt:

Quelltext CSS
                        @supports (display:flex) or (-webkit-display:flex) {
                                .duopo800 figure.live,
                                .duopo800 figure.dekstre        {
                                        float:none;
                                        width:810px;
                                }


                                .duopo800 figure.alta {
                                        width:610px;
                                }
                                .duopo800 figure.largha {
                                        height:630px;
                                }

                                /* Bei kleinerer Breite auch Breite des figure-Tags anpassen */
                                @media screen and (max-width:619px) {
                                        .duopo800 figure.live,
                                        .duopo800 figure.dekstre {
                                                width:410px;
                                        }
                                        .duopo800 figure.alta {
                                                width:310px;
                                        }
                                        .duopo800 figure.largha {
                                                height:330px;
                                        }

                                } /* Ende @media */

                                @media screen and (min-width:620px) and (max-width:819px) {
                                        .duopo800 figure.live,
                                        .duopo800 figure.dekstre {
                                                width:610px;
                                        }
                                        .duopo800 figure.alta {
                                                width:460px;
                                        }
                                        .duopo800 figure.largha {
                                                height:480px;
                                        }

                                .duopo800 + p.fino {
                                        display:none;
                                }

                                } /* Ende @media */

                        } /* Ende supports */

Für Galerien sieht der Kode etwas komplexer aus:

Quelltext HTML
<div class="galerio">
<figure><a class="grafik" href="bildo1.html"><img src="URL zum ersten Bild" width="80" height="80"  alt="Text 1" /></a><figcaption>Beschreibung 1</figcaption></figure>
<figure><a class="grafik" href="bildo2.html"><img src="URL zum zweiten Bild" width="80" height="80"  alt="Text 2" /></a><figcaption>Beschreibung 2</figcaption></figure>
<figure><a class="grafik" href="bildo3.html"><img src="URL zum dritten Bild" width="80" height="80"  alt="Text 3" /></a><figcaption>Beschreibung 3</figcaption></figure>
<figure><a class="grafik" href="bildo4.html"><img src="URL zum vierten Bild" width="80" height="80"  alt="Text 4" /></a><figcaption>Beschreibung 4</figcaption></figure>
<figure><a class="grafik" href="bildo5.html"><img src="URL zum fünften Bild" width="80" height="80"  alt="Text 5" /></a><figcaption>Beschreibung 5</figcaption></figure>
</div>

Textliches

Für textliche Inhalte nutzen wir:

Quelltexte

Seit März 2016 werden die hiesigen Quelltexte wie folgt textlich ausgezeichnet:

Quelltext HTML
<figure class="kodo">
<figcaption>Quelltext <em class="html">HTML</em></figcaption>
<pre><code> &lt;script&gt;
 &lt;!--
 rainbow("Text",1);
 //--&gt;
 &lt;/script&gt;
</code></pre>
</figure>

Seit Dezember 2014 wurden die hiesigen Quelltexte wie folgt textlich ausgezeichnet:

Quelltext HTML
<figure class="kodo html">
<figcaption>Quelltext</figcaption>
<pre><code>
 &lt;script&gt;
 &lt;!--
 rainbow("Text",1);
 //--&gt;
 &lt;/script&gt;
</code></pre>
</figure>

Hierbei wird <figcaption> für den Hinweis auf Quelltext verwendet. Außerdem ist das Schema auf der Seite Recommendation von HTML5 beim W3C zu finden. Bis zum 15. Dezember 2014 stand mindestens eine der Klassen css, html, js, alt oder fremd im class-Attribut von <pre>. Dadurch sahen die ersten drei Zeilen etwas anders aus als jetzt, nämlich:

Quelltext HTML
<figure class="kodo">
<figcaption>Quelltext</figcaption>
<pre class="html"><code>

Die alte Art war folgende:

Quelltext HTML
<pre class="html">
 &lt;script&gt;
 &lt;!--
 rainbow("Text",1);
 //--&gt;
 &lt;/script&gt;
</pre>

Seit dem 6. Dezember 2014 werden bei Informationen über Änderungen im Quelltext die betroffenen Abschnitte farbig markiert. Hierfür wird der in HTML5 neue Tag <mark> benutzt. Die Änderungen werden dabei unterschiedlich eingefärbt, und zwar

Schriftarten

Flaticon

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.

Außerdem nutzen wir folgende CSS-Formate, um Syimbole am Ende des Links auf eine spezifische Datei anzuzeigen:

Quelltext CSS
           /* Symbole für verschiedene Dateiformate */
                   #enhavo a:after {
                   font-family: Flaticon;
                   font-size:1.375em;
                   margin-left:10px;
                   display:inline-block;
                   }
           /* in einer Liste */
           #enhavo ul a:after {
                   margin-left:20px;
           }

           #enhavo a[href$=".pdf"]:link:after,
           #enhavo a[href$=".pdf"]:visited:after  {
                   content:"\f178";
                   color:red;
           }
           #enhavo a[href$=".doc"]:link:after,
           #enhavo a[href$=".doc"]:visited:after  {
                   content:"\f12d";
                   color:blue;
           }

           #enhavo a[href$="rss_novajhoj.xml"]:link:after,
           #enhavo a[href$="rss_novajhoj.xml"]:visited:after  {
                   content:"\f18a";
                   color:#DFAC20;
           }

           #enhavo a[href$=".js"]:link:after,
           #enhavo a[href$=".js"]:visited:after  {
                   content:"\f14e";
                   color:#cc9;
           }
           #enhavo a[href$=".zip"]:link:after,
           #enhavo a[href$=".zip"]:visited:after {
                   content:"\f1af";
                   color:#ff4500;
            }
           #enhavo a[href$=".css"]:link:after,
           #enhavo a[href$=".css"]:visited:after {
                   content:"\f120";
                   color:#ff4500;
            }

Droid-Sans

Am 16. Oktober 2014 hat RP die Schriftart "Droid-Sans" für Überschriften eingebunden. Die Schriftart unterliegt der Apache Lizenz.

Fontello

Seit dem 23. Juli 2016 verwenden wir eine Schriftart, die aus Schriftarten von Fontello erstellt wurde und zur Zeit 24 Zeichen enthält. Sie können angezeigt werden mittels des class-Attributs, welches mit icon- anfängt. Detaills über die Lizenz können auf dieser Seite gelesen werden.

Seit dem 11. September 2016 werden andere CSS-Dateien verwendet, so daß die Schriftarten von Flaticon und Fontello endlich sogar mit einem Webkit-Browser unter Android funktionieren.

Hier die Demo dafür:

Icon Font for jQuery UI

Seit dem 27. Juni 2016 nutzen wird ein Zeichen aus der Schriftart Icon Font for jQuery UI. Mit einer selbst erstellten zusätzlichen Datei funktioniert es sogar im alten Internet-Explorer 7.

Fragen

Viele Leute haben angefragt, wie sie denn Esperantobuchstaben im Internet nutzen können.