Kuidas lisada KOVTP lehele liikuvat bännerit?

Liikuvaid bännereid lisatakse peamiselt kas gif-failina, videofailina või html-failina.

Gif-faili saab lisada veebisisu kuva kaudu. Kuvatavaks veebisisuks lisatakse tavapärasel moel pilt, milleks seekord on soovitud gif-fail (soovi korral vt pildi kuvamise kohta lisa KOVTP juhendist). Lingi saab lisada samuti tavapärasel moel, nagu lisatakse linki pildile.

Videofaili lisamine bännerina on veidi keerulisem, selleks tuleks kasutada lähtekoodi.

Veebisisu kuva portleti lähtekoodi aknasse võib kopeerida järgneva koodi, asendades enne kollasega tähistatud väljad oma väärtustega:

<div style="position: relative;">

<a aria-label="Bännerit iseloomustav lühike tekst" href="https://..." target="_blank"><video preload="" autoplay="" loop="" muted="" playsinline="" src="https://....mp4" type="video/mp4" width="100%">Teie brauser ei toeta videobänneri kuvamist.</video></a>

</div>

Esimese kollasega tähistatud välja väärtus on bänneri lühikirjeldus ligipääsetavuse huvides neile, kes pilti ei näe.

Teine väärtus on veebiaadress, kuhu tahate bänneril klõpsanud kasutaja suunata.

Kolmas väärtus on videofaili aadress (kas veebis või KOVTP failihalduses).

NB! Videofaili puhul ei tohi koodi veebisisu kuva aknas muuta ja uuesti salvestada (see kaotab ära lingi). Koodi tuleks redigeerida nt Notepad'i aknas ning lisada kogu valmis kood tervikuna.

Html-faili saab lisada iframe'ina (vt iframe'i kasutamist KOVTP juhendist).

 

Liikuvad bännerid ja ligipääsetavus

Ligipääsetavuse huvides tuleb liikuvate bännerite lisamisel pidada silmas kolme asja.

Pildina (ka liikuva pildina) lisatud infol peab alati juures olema selgitav tekst neile, kes pilti ei näe. Gif-faili puhul tuleks kasutada alt-teksti, nagu ikka piltide lisamise puhul. Videofaili ja html-bänneri puhul tuleks lisada aria-label (nagu eeltoodud koodis).

Veebilehed ei tohi sisaldada midagi, mis välguks rohkem kui kolm korda ühe sekundi jooksul.

Liikuva veebisisu peab alati saama sulgeda, juhuks kui liikumine kasutajat häirib. (Näitlikustamiseks on lisatud sellele artiklile eriti liikuv banner, mis hakkab juba lühikese aja pärast häirima ka tavakasutajat .)

Pakun välja väikese koodijupi nupu tarvis, mis sulgeb eeloleva elemendi. Kui lisada see kood samas veebisisu kuvas lähtekoodina videofaili, gif-faili või iframe'i kuvava koodi järele, sulgeb nupuke eeloleva sisu:

<button aria-label="Sulge bänner" onclick="this.previousElementSibling.style.display='none'; this.style.display='none';" style="position: absolute; right: 0%; top:0%; padding: 2px 9px; border: solid; border-width: thin; border-radius: 5px; background-color: #f7f5f5;">X</button>

Märkus: Nupp asetub veebisisu paremasse ülanurka ja see sobib juhul, kui selle portleti veebisisuks on ainult bänner, ei ole kuvatud raami ega kuupäeva. Kui soovite bänneri paigutada portletis muu veebisisu hulka, tuleb nupp ja bänner asetada koodis ühe relatiivse paiknemisega elemendi sisse (<div style="position: relative;"></div>).

Näide gif-faili puhul:

<div style="position: relative;">

<a href="https://..." target="_blank"><img alt="Bännerit iseloomustav lühike tekst" src="https://....gif" width="100%"></a>

<button aria-label="Sulge bänner" onclick="this.previousElementSibling.style.display='none'; this.style.display='none';" style="position: absolute; right: 0%; top:0%; padding: 2px 9px; border: solid; border-width: thin; border-radius: 5px; background-color: #f7f5f5;">X</button>

</div>

Head reklaamimist!