Näita sildipilve

Saab ka ilma Javascriptita

Kirjutas ,

Esimene kodulehekülg, mille autoriks olid Tim Berners-Lee ja Robert Caillia, koosnes erinevatest staatilistest dokumentidest, mis olid kodeeritud kasutades HyperText Markup Language’it (HTML). Sellest ajast on veeb muutunud lihtsatest ja hüpermeedia dokumentidest keerukateks rakendusteks. Orienteeruda pakutavate tehnoloogiate vahel on keeruline ja tehtud valikud ei pruugi olla kõige paremad.

Veebispetsialistil (rohkem tuntud ehk kodeerija nime all)  tuleb näiteks oma igapäevatöös valida interaktiivsuse loomiseks CSSi ja Javascripti vahel. Üldjuhul minnakse kergema vastupanu teed ja valitakse viimane. On ju lihtne skripti abil manipuleerida HTMLi vastavalt vajadusele. No näiteks hinnangute objekti loomisel luuakse koodijupp, mis reageerib hiirele ja muudab siis vastavalt hiire liigutusele elemendil pilti. Sellel lahendusel on kaks nõrka külge. Esiteks – kuna tegemist on skriptiga, siis nõuab see Javascripti sisse lülitamist. w3schools andmetel on Javascript välja lülitatud 5% kasutajatest. Teise probleemina võib välja tuua pildid. Kõikvõimalike piltide alla laadimine võtab aega ja see kajastub aeglase internetiühendusega külastajatel ebameeldiva viivitusena. Seega Javascripti lahendus töötab ja aitab küll probleemi lahendada, kuid see ei ole kindlasti kõige parem valik. Käesolev kirjutis püüab näidata, kuidas võiks sama lahendust teha Javascriptita HTMLi ja CSSi abil.

Alljärgnev pilt illustreerib Youtube.com keskkonnast tuttavat hindamis-skaalat. Kasutatud on Javascripti.

Reiting Youtube keskkonnas

Esiteks: xHTML

Kui algselt (ja ka osalt tänapäeval) kasutati ja kasutatakse loodavate kodulehekülgede kujundamiseks ainult HTMLi, siis enamasti on tänapäeval lähenemisviis muutunud. HTMLi kasutatakse pigem veebidokumendi struktuuri ja tähenduse kirjeldamiseks. Et CSSiga saaks hiljem selle struktuuri osa edukalt vormindada, on vaja valida õige struktuur ja tähendus. Kuna tähed kuuluvad ühte gruppi, siis hetkel oleks kõige õigem valida loend, nagu järgnevalt näidatud on.

<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

Kui seda vaadata veebilehitsejas, ei meenuta miski skaalat, mida saaks kasutada. Et anda sellele soovitud kuju, on vaja kasutada CSSi.

Teiseks: CSS

Kui HTML on mõeldud struktuuri kirjeldamiseks ja tähenduse andmiseks, siis CSS annab sellele välimuse (vormingu). Et CSSi rakendamine oleks võimalik, on vaja olemasolevale struktuurile anda klassid (class), et erinevatele osadele anda kindel välimus ja efekt.

<ul class="rating">
<li><a class="star1" href="#">1</a></li>
<li><a class="star2" href="#">2</a></li>
<li><a class="star3" href="#">3</a></li>
<li><a class="star4" href="#">4</a></li>
<li><a class="star5" href="#">5</a></li>
</ul>

Stiililehes tuleb kirjeldada klasse ja klasside mõjusfääris olevate elementide omadusi.

.rating {
 background-color: #eee;
 margin: 0;
 padding: 0;
 width: 50px;
 height: 20px;
 list-style-type: none;
 position: relative
}
.rating LI {
 float: left;
}
.rating A {
 left: 0;
 top: 0;
 height: 20px;
 font-size: 10px;
 text-indent: -100px;
 position: absolute
}
.rating .star1 {
 width: 10px;
 z-index: 5;
}
.rating .star2 {
 width: 20px;
 z-index: 4;
}
.rating .star3 {
 width: 30px;
 z-index: 3;
}
.rating .star4 {
 width: 40px;
 z-index: 2;
}
.rating .star5 {
 width: 50px;
 z-index: 1;
}
UL.rating LI A:hover {
 background-color: red;
}

Kui HTML ja CSS õnnestus, siis peaks tulemus välja nägema nii, nagu järgenval pildid on kujutatud.

Tulemus

Hetkel on küll kasutatud ainult erinevaid värve, aga kui valmistada pilt (täht) ja panna see A elemendi taustaks, on tulemuseks analoogne Youtube.com’i kujutatud skaala.

Nüüd on puudu vaid hetke seis. Selle jaoks tuleb luua eraldi klass, näiteks “current” ning selle jaoks omakorda tuleb teha HTMLi ja CSSi täiendusi. HTMLi tuleb lisada juurde üks loendi liige.

<ul class="rating">
<li class="current" style="width: 30px;">3</li>
<li><a class="star1" href="#">1</a></li>
....
</ul>
...
.rating .current {
 background-color: yellow;
}
...

Kujutatud on skaalat, millel on vaikimisi hindeks 3.

lõpptulemus