Izdelava strani Vodiči

Spletno stran Vodiči izdelamo kot zbirko izbranih zunanjih gradiv za učenje Bootstrapa in odzivnega oblikovanja. Stran uporabniku omogoča hiter pregled uporabnih video vodičev, kratke opise vsebine in povezave do zunanjih virov.

Stran sestavimo s pomočjo datoteke bootstrap.html. Iz nje pripravimo samostojno datoteko vodici.html, v kateri ohranimo enotno navigacijo, glavni naslov in nogo, nato pa dodamo mrežo kartic z izbranimi vodiči. Pri tem pazimo, da so povezave razumljive, slike opisane, kartice odzivne in zunanji viri jasno označeni.

Pomni: Stran z vodiči ni samo seznam povezav. Vsak vodič naj ima jasen naslov, kratek opis, ustrezno sliko in razumljivo povezavo, da uporabnik ve, kaj bo z odpiranjem vira pridobil.

Osnovna pravila izdelave strani z vodiči

Pri strani z vodiči je pomembno, da uporabniku pomagamo izbrati ustrezen vir. Vodiči naj bodo razporejeni pregledno, opisani jedrnato in oblikovno usklajeni z ostalim spletiščem. Ker povezave vodijo na zunanje strani, moramo uporabnika na to jasno opozoriti in povezave zapisati varno.

Področje	Priporočilo
Izbor vodičev	Vključimo le vsebinsko primerne, delujoče in uporabne vodiče.
Naslov vodiča	Naslov naj jasno pove, kaj vodič obravnava.
Kratek opis	Opis naj pove, komu je vodič namenjen in katero znanje pridobi uporabnik.
Slika	Slika naj bo vsebinsko povezana z vodičem in naj ima ustrezen atribut `alt`.
Zunanja povezava	Povezava naj se odpira v novem zavihku in naj ima dodana atributa `rel="noopener noreferrer"`.

Pozor: Zunanjih povezav ne dodajamo brez preverjanja. Povezava mora biti delujoča, vsebinsko ustrezna in primerna za uporabnike, ki jim je stran namenjena.

Predloga navigacije, naslova in noge spletne strani

V datoteki vodici.html obdržimo navigacijo, glavni naslov in nogo. Posodobimo naslov dokumenta, meta opis, glavni naslov in uvodni opis ter v glavnem meniju označimo postavko Vodiči kot trenutno aktivno.

Nova različica uporablja Bootstrap 5, odzivno navigacijo, glavo strani z razredom page-hero in Bootstrapovo JavaScript datoteko bootstrap.bundle.min.js, ki omogoča delovanje interaktivnih komponent.

Primer izdelave spletišča postavitev strani Vodiči predloga navigacije, naslova in noge

Osnovna predloga uporablja enoten videz strani in glavo z razredom page-hero:

<!DOCTYPE html>
<html lang="sl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Izbor vodičev za Bootstrap in odzivno oblikovanje.">
  <meta name="keywords" content="Bootstrap, odzivno oblikovanje, mrežni sistem, komponente, dokumentacija">
  <meta name="author" content="eNSA">
  <title>eNSA | Spletišče: Vodiči</title>

  <link rel="icon" href="slike/favicon.ico" type="image/x-icon">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/slog.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light site-navbar sticky-top">...</nav>

  <header class="page-hero">
    <div class="container">
      <h1>Vodiči</h1>
      <p class="lead mb-0">Izbrani video vodiči za spoznavanje Bootstrapa, od osnov do praktične izdelave odzivnih strani.</p>
    </div>
  </header>

  <footer>...</footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Predogled: vodici1.html

Pomni: Pri podstrani Vodiči mora biti v navigaciji kot aktivna označena povezava do strani vodici.html, ne povezava do domače strani.

Postavitev odseka vodičev

Pod glavo strani dodamo odsek s karticami vodičev. Uporabimo prilagodljivo mrežo Bootstrap 5 z razredi row g-4, col-md-6 in col-xl-3 s čimer dosežemo bolj odziven prikaz na različnih napravah.

Za postavitev uporabimo naslednje Bootstrapove razrede:

container – vsebnik z omejeno širino,
row – vrstica mrežnega sistema,
g-4 – razmik med stolpci in vrsticami,
col-md-6 – dva stolpca na srednje velikih zaslonih,
col-xl-3 – štirje stolpci na zelo širokih zaslonih.

Primer izdelave spletišča postavitev strani Vodiči postavitev odseka vodičev

...
<section class="py-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-md-6 col-xl-3">
        <div class="guide-card card h-100">
          <img src="slike/vodici/yt-1.jpg" alt="Bootstrap Tutorial" class="card-img-top">
          <div class="card-body d-flex flex-column">
            <h3 class="h5">Bootstrap Tutorial</h3>
            <p>Kratek uvod v uporabo mrežnega sistema, komponent in osnovnih utility razredov.</p>
            <p class="guide-meta mb-0 mt-auto">
              <a href="https://www.youtube.com/watch?v=gqOEoUR5RHg" target="_blank" rel="noopener noreferrer" class="stretched-link">Odpri zunanji vodič</a>
            </p>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xl-3">
        ...
      </div>

      <div class="col-md-6 col-xl-3">
        ...
      </div>

      <div class="col-md-6 col-xl-3">
        ...
      </div>
    </div>
  </div>
</section>
...

Predogled: vodici2.html

Pozor: Pri odzivni mreži ne določamo samo videza na velikem zaslonu. Preveriti moramo tudi, kako se kartice razporedijo na telefonu in tablici.

Kartica vodiča

Vsak vodič prikažemo kot kartico s sliko, naslovom, kratkim opisom in povezavo za odpiranje zunanjega vira. Uporabimo Bootstrapovo kartico skupaj z dodatnima razredoma guide-card in guide-meta.

Kartica naj ne vsebuje preveč besedila. Uporabnik mora iz naslova in kratkega opisa hitro razbrati, ali je vodič primeren zanj. Celotno kartico lahko naredimo klikljivo z razredom stretched-link, pri tem pa pazimo, da v isti kartici ni več različnih povezav.

Primer izdelave spletišča postavitev strani Vodiči kartica vodiča

...
<div class="guide-card card h-100">
  <img src="slike/vodici/yt-1.jpg" alt="Bootstrap Tutorial" class="card-img-top">
  <div class="card-body d-flex flex-column">
    <h3 class="h5">Bootstrap Tutorial</h3>
    <p>Kratek uvod v uporabo mrežnega sistema, komponent in osnovnih utility razredov.</p>
    <p class="guide-meta mb-0 mt-auto">
      <a href="https://www.youtube.com/watch?v=gqOEoUR5RHg" target="_blank" rel="noopener noreferrer" class="stretched-link">Odpri zunanji vodič</a>
    </p>
  </div>
</div>
...

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo tudi osnovne sloge za kartice vodičev:

/* Vodiči */
.guide-card{
  border:1px solid #e8e8e8;
  transition:transform .2s ease, box-shadow .2s ease;
}

.guide-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.guide-card img{
  aspect-ratio:16 / 9;
  object-fit:cover;
}

.guide-meta{
  color:#6c757d;
  font-size:.95rem;
  font-style:italic;
}

Predogled: vodici3.html

Pomni: Kartica vodiča naj združi samo najnujnejše informacije: naslov, kratek opis, sliko in povezavo. Podrobnosti uporabnik prebere v zunanjem vodiču.

Vsebina vodičev

V zadnjem koraku v mrežo dodamo izbrane vodiče s konkretnimi povezavami, slikami in kratkimi opisi. Opisi niso nadomestno besedilo in niso namenjeni zapolnitvi prostora, ampak uporabniku pomagajo izbrati ustrezen vir.

Pri izboru vodičev je dobro preveriti, ali je gradivo še aktualno, ali obravnava ustrezno različico Bootstrapa in ali je razlaga primerna za predvidene uporabnike. Če vodič obravnava starejšo različico, je treba to jasno označiti ali izbrati novejši vir.

Primer izdelave spletišča postavitev strani Vodiči vsebina vodičev

...
<section class="py-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-md-6 col-xl-3">
        <div class="guide-card card h-100">
          <img src="slike/vodici/yt-1.jpg" alt="Bootstrap Tutorial" class="card-img-top">
          <div class="card-body d-flex flex-column">
            <h3 class="h5">Bootstrap Tutorial</h3>
            <p>Kratek uvod v uporabo mrežnega sistema, komponent in osnovnih utility razredov.</p>
            <p class="guide-meta mb-0 mt-auto">
              <a href="https://www.youtube.com/watch?v=gqOEoUR5RHg" target="_blank" rel="noopener noreferrer" class="stretched-link">Odpri zunanji vodič</a>
            </p>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xl-3">
        <div class="guide-card card h-100">
          <img src="slike/vodici/yt-3.jpg" alt="Responsive Website From Scratch" class="card-img-top">
          <div class="card-body d-flex flex-column">
            <h3 class="h5">Responsive Website From Scratch</h3>
            <p>Postopna gradnja odzivne strani s poudarkom na razporejanju vsebine.</p>
            <p class="guide-meta mb-0 mt-auto">
              <a href="https://www.youtube.com/watch?v=eIWRbvE1B2E" target="_blank" rel="noopener noreferrer" class="stretched-link">Odpri zunanji vodič</a>
            </p>
          </div>
        </div>
      </div>

      ...
    </div>
  </div>
</section>
...

Predogled: vodici4.html

Dostopnost in zunanje povezave

Ker stran vsebuje povezave na zunanje vire, moramo biti posebej pozorni na razumljivost in dostopnost. Besedilo povezave naj pove, kaj se odpre. Če se povezava odpre v novem zavihku, je dobro, da je to razvidno iz konteksta, na primer z besedilom Odpri zunanji vodič.

Pri slikah uporabimo atribut alt. Nadomestno besedilo naj na kratko opiše sliko oziroma vsebino vodiča. Če je slika samo okrasna, bi lahko bil atribut alt prazen, vendar so pri karticah vodičev slike navadno vsebinsko povezane z virom.

Pozor: Če se zunanja povezava odpre v novem zavihku z atributom target="_blank", dodamo še rel="noopener noreferrer". Tako zmanjšamo varnostna tveganja in izboljšamo pravilnost povezave.

Priporočila za stran z vodiči

Izberi vodiče, ki so vsebinsko ustrezni in dovolj aktualni.
Za vsak vodič pripravi kratek, informativen opis.
Slike naj bodo enotnih razmerij in opremljene z atributom alt.
Za kartice uporabi Bootstrapov razred card in po potrebi lastne dopolnilne razrede.
Za odzivno postavitev uporabi mrežo, na primer row g-4, col-md-6 in col-xl-3.
Zunanje povezave naj imajo target="_blank" in rel="noopener noreferrer".
Besedilo povezave naj bo razumljivo, na primer Odpri zunanji vodič.
Stran preveri na telefonu, tablici in večjem zaslonu.

Pogoste napake

Vodiči so dodani brez preverjanja, ali so še aktualni in vsebinsko primerni.
Opisi kartic so generični in uporabniku ne povedo, kaj vodič obravnava.
Slike nimajo ustreznega atributa alt.
Kartice niso enake višine, zato je mreža videti neurejena.
Zunanje povezave se odpirajo v novem zavihku brez atributa rel="noopener noreferrer".
Celotna kartica je klikljiva, hkrati pa vsebuje več različnih povezav, kar lahko povzroči nejasno uporabo.
Postavitev je preverjena samo na velikem zaslonu, ne pa tudi na manjših napravah.
V glavnem meniju ni pravilno označena trenutna stran Vodiči.

Nazaj

Naprej