2014
Julio-Aŭgusto
En julio 2014 RP ŝanĝis la paĝaron al HTML5. En aŭgusto li korektis multon laŭ ĉi tiu normo.
Septembro
En septembro 2014 la paĝaro ricevis novan ĉefan kaplinion, uzante la novan HTML5-etikedon <header>. Krome aldoniĝis piedlinio per <footer>.
Ĉe tio krome estis forigita la CSS-subteno por la malnoviĝinta Netscape 4.x.
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.
La 14-an de Septembro 2014 la supre menciita skripto por ŝpruchelpiloj estis anstataŭigita per CSS-variantoĜi uzas CSS por la formatoj kaj funkcias sen Ĝavaskripto. Vidu ankaŭ sur la paĝo de Menucool. Vidu ankaŭ sur nia paĝo pri tio..
La 19-an de Septembro 2014 RP finfine trovis solvon por la kaŝita ombro ĉe la ĉefa navigejo, en la Interreta Esplorilo 9-11. Kulpis pri tio:
border-collapse:collapse;en la difino de la ekstera kesto de la navigejo. Sufiĉis elkomenti la nomitan formaton.
La 22-an de Septembro 2014 estis finfine trovita varianto por la Interreta Esplorilo 8, por tie krei la ombron ĉe la menuo. Bedaŭrinde ĉi tiu varianto ne taŭgas por pli malnovaj Esploriloj, ĉar tie dum testado tiam la submenuoj estis fortranĉitaj. Por tio estas uzata jena kodo en aparta CSS-dosiero:
nav#chefa {
filter:progid:DXImageTransform.Microsoft.dropShadow(color=#aaaaaa, offX=5, offY=5, positive=true);
}
La 24-an de Septembro 2014 RP renovigis RSS-fluon (angle RSS-feed).
La 27-an de Septembro 2014 RP aldonis ion al la piedlinio de la paĝaro.
Oktobro
La 3-an de Oktobro 2014 RP denove ion aldonis al la piedlinio.
Ekde la 13-a de Oktobro 2014 jquery-skripto ebligas, ke submenuo en la navigejo restas videbla, se oni fokusigas ĝin per la tab-klavo. Ĝi havas jenan kodon:
<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>
La skripto donas al ligilo en la ĉefa parto de la navigejo la klason .focus, se en submenuo unu el la tieaj ligiloj havas la fokuson.
Malkaŝado okazas tiam per CSS.
nav#chefa ul li a.focus + .ordner {left:auto;
opacity:1;
}
Ĉar ekranlegiloj (voĉlegaj foliumiloj, angle screen reader) ankaŭ ne plu voĉlegas kaŝitajn enhavojn, la sekva kodo ne plu estas uzata:
nav#chefa ul li a.focus + .ordner {visibility:visible;
opacity:1;
}
La kaŝado nun okazas per la jena kodo:
nav#chefa ul li a.focus + .ordner {left:-9999em;
opacity:0;
}
La antaŭa metodo estis:
nav#chefa ul li a.focus + .ordner {visibility:hidden;
opacity:0;
}
RP inspiriĝis ĉe tio de la jenaj kodoj el blogo.
li.hover ,
li:hover {
...
}
$('#navi li').each (function () {
var that = this;
$(this)
.mouseover (function () { that.addClass ('hover'); })
.mouseout (function () { that.removeClass ('hover'); });
});
La 16-an de Oktobro 2014 RP anstataŭigis unu bildon el la kaplinio per vera formatigita teksto. Krome li enplektis la tiparon "Droid-Sans" por titoloj. Por la tiparo validas la Apache licenco.
La 17-an de Oktobro 2014 li adaptis tion por la malnova Interreta Esplorilo 8 kaj testis tion per ĝi. Krome li korektis la :focus-funkciecon ĉe bildoj.
La 20-an de Oktobro 2014 RP transmetis la Jquery-skripton en apartan dosieron. Ĝia kodo aspektas tiel enhavante malgrandan ŝanĝeton:
$(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'); });
});
});
La supra skripto ne funkcias en la Interreta Esplorilo 8. Kiu havas ideon, kiel tio estas korektebla?
La 24-an de Oktobro 2014 RP testis la sekvan ŝanĝeton de la skripto. Bedaŭrinde tio ankoraŭ ne funkcias en IE 8.
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();
});
Ekde la 24-a de Oktobro 2014 la aktuala menuero estas markata per Jquery, ĉar tio ne eblas per CSS. La skripto estas:
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');
}
});
}
La bazan kodon RP trovis sur la paĝoj http://jsfiddle.net/DDZNz/ kaj stackoverflow.com kaj poste adaptis. Ĝi ne funkciis sen ŝanĝoj.
La originala kodo devenis de Davide Pugliese el la supra paĝo, sed ĝi montriĝis kiel nefunkcianta.
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();
});
Post sukcesa testo, ĉu la senligiligo de la aktuala menuero funkcias, la 26-an de Oktobro 2014 RP alinomis la skripton: Skriptoj.js.
La kodo por la anstataŭigo de elemento devenas de la paĝo stackoverflow.com kaj tie validas la cc-wiki resp. cc-by-sa-licenco. Originale ĝi aspektis jene kaj devenas de tewathia:
$('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;
});
La antaŭa kodo por la anstataŭigo baziĝis sur la jena kodo, sed forigis ĉiujn atributojn. Ĝi devenis de Felix Kling.
$('code').replaceWith(function(){
return $("<pre />", {html: $(this).html()});
});
La 27-an de Oktobro 2014 la Verdaj Informiloj ricevis navigejon por la unuopaj eldonoj de la jaro.
La 29-an de Oktobro 2014 RP aldonis aŭtomatan numerigon de la titoloj per CSS.
Novembro
La 4-an de Novembro 2014 RP aldonis serĉpaĝon. La tieaj serĉrezultoj aperas sur ekstera paĝo.
La 5-an de Novembro 2014 RP ŝanĝis la markigon de la menuero kun submenuo. Ĉe tio li aldonis fonan bildon, kiu funkcias eĉ en IE 7. Nun estas uzata por tio jena 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);
}
La sekvan kodon RP forigis el la CSS-dosiero:
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;
}
La malnovaj formatoj ne konvenis por ĉiuj menueroj, ĉe kio la varianto por la tute maldekstraj menueroj aparte nebele aspektis.
La 17-an de Novembro 2014 RP grupigis la ĉapitron "Okazintaĵoj" sur la starta paĝo kaj aldonis ligilojn al la koncernaj jaroj. Proponoj por la ĉapitro estas bonvenaj, se ili estas facile realigeblaj.
Krome li korektis eraron en skripto. Ĝi nun jene aspektas:
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'); });
});
}
La 19-an de Novembro 2014 RP parte malaktivigis la aŭtomatan numerigon sur kelkaj paĝoj, ĉar ĝi tie estis konfuziga. Ĝi estas tie limigita al la ĉefaj titoloj de la ĉapitroj. Por tio estas uzata jena kodo.
/* Aus dem Abschnitt "Vergangenes" bzw. "Okazintaĵoj" bei h3 auf den Startseiten entfernen */
.nombruchefe h3:before {
content:"";
}
La 20-an de Novembro 2014 RP finfine trovis solvon por la malnova IE7, tiel ke la senligiligo denove funkcias.
La kodo por tio estas tre mallonga, ĉar li rezignis pri la transpreno de la atributoj por tia malnova foliumilo. La atributoj eĉ ne povas
esti uzataj en la IE7 per :after aŭ :before kaj content laŭ CSS2.1,
ĉar la foliumilo ne subtenas tion.
// IE 7 und wohl auch aeltere brauchen eine Extrawurst.
if (document.all && !document.querySelector) {
return $("<b />", {html: $(this).html()});
}
Ekde la 21-a de Novembro 2014 la kodo por la enplektigo de la kolorĉeno sur la startopaĝo aspektas alie kaj konsistas jam nur el du partoj:
<script type="text/javascript" src="js/farbverlauf.js"></script> <h1>Bonvenon sur la interretaj paĝoj de la Landa Asocio de Meklenburgio-Antaŭpomerio kaj de la
<script type="text/javascript">
<!--
rainbow("Esperanto-Societo Neŭbrandenburg",4,"00CC00 CCCC00 FFCC00 CC0000")
-->
</script>
<noscript>Esperanto-Societo Neŭbrandenburg</noscript>
</h1> La neskr-parto en la <head>-parto do forfalis entute, dum ke ĝi en la <body>-parto fariĝis <noscript>.
La kolorĉena skripto povas esti uzata eĉ meze de teksto, kiel en la ĉefa titolo sur ĉi tiu paĝo:
<h1>Pri <script>
<!--
rainbow("teknikaj",4,"00CC00 CC0000");
-->
</script><noscript>teknikaj</noscript> detaloj</h1>
Nur gravas, ke la <script>-a kaj <noscript>-a partoj rekte sekvu unu post alia.
Decembro
La 3-an de Decembro 2014 RP korektis surekranigan fuŝon en pli malnovaj Gecko-foliumiloj, kiel ekz. K-Meleon 74, ĉe la ŝpruchelpiloj de bildogalerioj. La ŝanĝo konsistas el tri partoj:
.galerio {
display:table;
margin:0 auto;
}
estis anstataŭata per la jena kodo:
.galerio {
display:table;
margin:0 auto;
position:relative; /* fuer alte Geckos, wie z.B. K-Meleon 74, die sonst falsch positionieren */
}
La dua ŝanĝo estis pli granda, per tio ke sekvaj kodoblokoj estis kombinitaj:
.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;
}
al la sekva, tamen kun kelkaj ŝanĝoj:
.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;
}
Ĉe tio ni devis rezigni pri la animicia ŝanĝo de pozicioj, ĉar en Gecko-foliumiloj left (same kiel right, top kaj bottom) kun la valoro auto ne funkcias.
Sed opacity funkcias tre bone, post kiam ĝi estis aldonita ankaŭ en la sekva bloko.
La lasta bloko bezonis aldonojn kaj ŝanĝojn:
.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;
}
nome al la du sekvaj:
.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;
}
Vespere de la 3-a de Decembro 2014 RP disigis la paĝon pri teknikaj detaloj, ĉar ĝi estis tre granda. Li eligis tri temojn, nome al:
La 8-an de Decembro 2014 li aldonis plian paĝon al la antaŭa listo, sur kiu temas pri la variantoj de ŝpruchelpiloj.
La 12-an kaj 13-an de Decembro 2014 RP iomete reformatigis la kapliniojn de la Verdaj Informiloj. Ĉe tio nun estas montrata en foliumiloj, kiuj subtenas CSS, la titolo iomete pli grande kaj en majuskloj. En la fontoteksto de la Verda Informilo tio aspektas jene:
<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>
Kaj la rilata CSS estas:
/* 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;
}
Por eviti malbelan surekranigon de fonoj kaj ombroj ĉe linisaltaj ligiloj, ni uzas ekde la 13-a de Decembro 2014 sekvajn formatojn:
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;
}
Tio funkcias eĉ jam en la plej multaj foliumiloj krom Interreta Esploriloj, malnovaj Fajrovulpo-versioj (antaŭ 32) kaj malnovaj Safarioj (antaŭ 6.1), kiel oni povas legi ĉe caniuse.com.
La 15-an de Decembro 2014 RP superfluigis la class-atributon ĉe <pre>, se la etikedo
staras en <figure>. Tiam ĉiuj klasoj ja povas stari ĉe <figure>.
La 23-an de Decembro RP trovis foton el 1996, sur kiu li estas videbla dum la Universala Kongreso en Prago.
Krome li reordigis la listojn pri okazintaĵoj sur la startopaĝo, tiel ke nun la plej aktuala jaro staras supre.