Pri teknikaj detaloj

Uzataj normoj

Ni jam ekde 2014 uzas HTML-etikedojnLaŭ Sergio Prokovskij traduko por angla tag., kiuj konformas al HTML5Hypertext Markup Language - En esperanto: Hiperteksta Marklingvo - Angla paĝaro pri la normo estas http://www.w3.org/TR/html5/. Bona klarigo en esperanto troviĝas sur la paĝaro de Bertilow.. Se vi trovus iujn etikedojn, kiuj ne normas, ni petas pri informo. Krome ni uzas sur nia paĝaro CSS 2.1 kaj jam parte CSS3.

Baza strukturo

Por la baza strukturo de la paĝaro ni uzas la sekvan skemon:

Fontoteksto HTML
<!DOCTYPE html>
<html>
<head>
      <title>Titolo</title>
</head>
<body>
      Enhavo
</body>
</html>

Sekcioj

Por la erigo ni uzas:

Listoj

Por listoj ni uzas:

Ekde septembro 2016 ni uzas por nenumeritaj listoj la jenon:

Fontoteksto 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 trovis ion tian sur la paĝo http://blog.designimsinn.de/list-style-type-mit-unicode-gestalten/, sed aldonis iom pli da kodo por tio. Tial la simboloj estas ja verdaj.

Ligiloj

Por ligiloj ni uzas:

Bildoj

Por bildoj ni uzas jam HTML5, nome:

Fontoteksto HTML
<figure>
 <img src="URL al bildo" alt="Teksto">
 <figcaption>Priskribo</figcaption>
</figure>

Ekde la 3-a aprilo 2016 ni uzis iom pli kompleksan kodon, sed ĝis nun nur en la plej novaj Verdaj Informiloj:

Fontoteksto 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>

La 10-an de julio 2016 RP iomete ŝanĝis tiun kodon al:

Fontoteksto 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>

Krome li iomete aldonis iom da CSS jene:

Fontoteksto 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 */

La 11-an de julio 2016 RP denove ŝanĝis CSS, por ke iomete kaj tre malnovaj foliumiloj ne uzu tion jene:

Fontoteksto 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 */

La 11-an de julio posttagmeze RP denove ion aldonis jene:

Fontoteksto 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 */

Por bildaroj la kodo aspektas iomete pli kompleksa:

Fontoteksto HTML
<div class="galerio">
<figure><a class="grafik" href="bildo1.html"><img src="URL al la unua bildo" width="80" height="80"  alt="Teksto 1" /></a><figcaption>Priskribo 1</figcaption></figure>
<figure><a class="grafik" href="bildo2.html"><img src="URL al la dua bildo" width="80" height="80"  alt="Teksto 2" /></a><figcaption>Priskribo 2</figcaption></figure>
<figure><a class="grafik" href="bildo3.html"><img src="URL al la tria bildo" width="80" height="80"  alt="Teksto 3" /></a><figcaption>Priskribo 3</figcaption></figure>
<figure><a class="grafik" href="bildo4.html"><img src="URL al la kvara bildo" width="80" height="80"  alt="Teksto 4" /></a><figcaption>Priskribo 4</figcaption></figure>
<figure><a class="grafik" href="bildo5.html"><img src="URL al la kvina bildo" width="80" height="80"  alt="Teksto 5" /></a><figcaption>Priskribo 5</figcaption></figure>
</div>

Tekstaĵo

Por tekstaj enhavoj ni uzas:

Fontotekstoj

Ekde marto 2016 ĉitieaj fontotekstoj estas aranĝataj jene:

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

Ekde decembro 2014 ĉitieaj fontotekstoj estis aranĝataj jene:

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

Ĉe tio la <figcaption> estas uzata por la indiko pri fontoteksto. Krome la skemo troviĝas en la Rekomendo de HTML5 ĉe W3C. Ĝis la 15-a de Decembro 2014 staris almenaŭ unu el la klasoj css, html, js, altfremd en la class-atributo de <pre>. Tiel la unuaj tri linioj aspektis iomete alie ol nun, nome:

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

La malnova maniero estis la jena:

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

Ekde la 6-a de Decembro 2014 ĉe informoj pri ŝanĝoj en la fontoteksto la koncernaj partoj estas markataj kolore. Ĉe tio estas uzata en HTML5 nova etikedo <mark>. La ŝanĝoj estas malsame kolorigitaj ĉe tio, nome

Tiparoj

Flaticon

Ekde septembro 2014 ni uzas ikonan tiparon pri simboloj por diversaj dosierformoj. Jen informoj pri tio: Font generated by flaticon.com under CC BY. The authors are: Freepik.

Krome ni uzas la jenajn CSS-formatojn, por aperigi simbolon je la fino de ligilo al specifa dosiero:

Fontoteksto 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

La 16-an de Oktobro 2014 RP enplektis la tiparon "Droid-Sans" por titoloj. Por la tiparo validas la Apache permesilo.

Fontello

Ekde la 23-a de julio 2016 ni uzas tiparon kreitan surbaze de tiparoj el Fontello, kiu nuntempe enhavas 24 signojn. Ili estas aperigeblaj per class-atributo, kiu komenciĝas per icon-. Detaloj pri la permesilo legeblas en aparta paĝo.

Ekde la 11-a de septembro 2016 aliaj CSS-dosieroj estas uzataj, tiel ke la tiparoj de Flaticon kaj Fontello finfine eĉ funkcias per Webkit-foliumiloj sur Android.

Jen demonstracio por tio:

Icon Font for jQuery UI

Ekde la 27-a de junio 2016 ni uzas signon el la tiparo de Icon Font for jQuery UI. Per memkreita aldona dosiero ĝi funkcias eĉ per la malnova foliumilo Interreta Esplorilo 7.

Demandoj

Multaj homoj jam demandis nin, kiel kodigi en la reto la esperanto-literojn.