Izdelava strani Kontakt

Spletno stran Kontakt izdelamo kot jasno in pregledno stran za komunikacijo z uporabnikom. Stran vsebuje kontaktne podatke, obrazec za sporočilo in vdelan zemljevid lokacije. Pri izdelavi pazimo, da so podatki razumljivi, obrazec dostopen, zemljevid pravilno vdelan, postavitev pa odzivna na različnih napravah.

Stran sestavimo s pomočjo datoteke bootstrap.html. Iz nje pripravimo samostojno datoteko kontakt.html, v kateri ohranimo enotno navigacijo, glavni naslov in nogo, nato pa dodamo kontaktne podatke, obrazec za sporočilo in vdelan zemljevid lokacije.

Pomni: Kontaktna stran mora uporabniku hitro odgovoriti na tri vprašanja: kako lahko vzpostavi stik, katere podatke mora poslati in kje se organizacija nahaja.

Osnovna pravila izdelave kontaktne strani

Kontaktna stran je ena pomembnejših strani spletišča, ker uporabniku omogoča neposredno komunikacijo. Zato mora biti pregledna, kratka in zanesljiva. Kontaktni podatki naj bodo jasno zapisani, obrazec naj ima razumljive oznake polj, zemljevid pa naj dopolni informacijo o lokaciji, ne pa nadomesti besedilnega naslova.

Področje	Priporočilo
Kontaktni podatki	Podatki naj bodo zapisani jasno, po možnosti v obliki seznama.
Obrazec	Vsako polje naj ima oznako `label`, ustrezen tip vnosa in po potrebi kratko pojasnilo.
Zasebnost	Uporabniku je treba jasno povedati, katere podatke pošilja in zakaj se zbirajo.
Zemljevid	Zemljevid naj ima naslov `title`, naj se nalaga z `loading="lazy"` in naj ne nadomesti zapisanega naslova.
Odzivnost	Postavitev mora biti uporabna na telefonu, tablici in večjem zaslonu.

Pozor: V učnem primeru lahko gumb obrazca deluje samo kot prikaz. V dejanskem spletišču pa mora biti obrazec povezan s strežniško obdelavo, preverjanjem podatkov in ustrezno zaščito pred zlorabami.

Predloga navigacije, naslova in noge spletne strani

V datoteki kontakt.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 Kontakt kot trenutno aktivno.

Uporabimo Bootstrap 5 z 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 Kontakt 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="Kontaktna stran za vprašanja o Bootstrapu.">
  <meta name="keywords" content="Bootstrap, odzivno oblikovanje, mrežni sistem, komponente, dokumentacija">
  <meta name="author" content="eNSA">
  <title>eNSA | Spletišče: Kontakt</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>Kontakt</h1>
      <p class="lead mb-0">Piši nam, če želiš pomoč pri učenju Bootstrapa, postavitvi projekta ali razumevanju dokumentacije.</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: kontakt1.html

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

Kontaktni podatki in uvodno besedilo

Pod glavni naslov dodamo glavni vsebinski odsek. Uporabimo sodobno postavitev z dvema karticama. V levi kartici so kontaktni podatki in kratek opis podpore, v desni pa obrazec za sporočilo.

Kontaktni podatki naj bodo zapisani v pregledni obliki. E-poštni naslov in telefonska številka morata biti jasno vidna. Če je navedena lokacija, naj bo zapisana tudi v besedilu, saj zemljevid ni vedno dostopen ali prikazan.

Za postavitev uporabimo naslednje Bootstrapove razrede:

container – vsebnik z omejeno širino,
row – vrstica mrežnega sistema,
g-4 – razmik med elementi mreže,
col-lg-5 – levi stolpec za kontaktne podatke,
col-lg-7 – desni stolpec za obrazec,
card – kartica vsebine,
p-4 – notranji odmik,
h-100 – enaka višina kartic.

Primer izdelave spletišča postavitev strani Kontakt kontaktni podatki in uvodno besedilo

...
<section class="py-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-5">
        <div class="contact-card card p-4 h-100">
          <h2 class="section-title h3">Kontaktni podatki</h2>
          <ul class="contact-list list-unstyled mb-4">
            <li><strong>eNSA Bootstrap</strong></li>
            <li>Kidričeva cesta 55, 4000 Kranj</li>
            <li>E-pošta: bootstrap@ensa.si</li>
            <li>Telefon: +386 (0)4 000 00 00</li>
            <li>Podpora: ponedeljek–petek, 8.00–15.00</li>
          </ul>
          <p>Na vprašanja o mrežnem sistemu, komponentah, obrazcih in prilagoditvah sloga odgovarjamo z usmeritvami za hitro in pregledno uporabo ogrodja.</p>
        </div>
      </div>
      ...
    </div>
  </div>
</section>
...

V datoteko z oblikovnimi slogi spletišča slog.css lahko dodamo še osnovne sloge kontaktne kartice:

/* Kontakt - kartice in seznam */
.contact-card{
  border:1px solid #e8e8e8;
  border-radius:.75rem;
}

.contact-list li{
  margin-bottom:.4rem;
}

Predogled: kontakt2.html

Pozor: Telefonska številka, naslov in e-pošta naj bodo zapisani tudi kot besedilo. Če so prikazani samo v sliki ali zemljevidu, jih nekateri uporabniki težje uporabijo.

Obrazec

V desni kartici pripravimo obrazec za pošiljanje sporočila. Uporabimo Bootstrap 5 razrede form-label, form-control in mrežo z razredom row g-3. Obrazec vsebuje polja za ime, e-pošto, zadevo in sporočilo ter gumb za pošiljanje.

Vsako vnosno polje mora imeti povezano oznako label. Oznaka je pomembna za razumljivost obrazca, uporabo s tipkovnico in bralnike zaslona. Pri e-poštnem naslovu uporabimo type="email", pri običajnem besedilu type="text", pri daljšem sporočilu pa element textarea.

Za oblikovanje uporabimo naslednje Bootstrapove razrede:

row – vrstica,
g-3 – razmik med polji obrazca,
col-md-6 – dva stolpca pri prvih dveh poljih,
col-12 – polna širina pri večjih poljih,
form-label – oznaka polja,
form-control – vnosna polja in besedilno polje,
btn – osnovni gumb,
btn-primary – primarni gumb,
btn-lg – večji gumb.

Primer izdelave spletišča postavitev strani Kontakt obrazec

...
<div class="col-lg-7">
  <div class="contact-card card p-4 h-100">
    <h2 class="section-title h3">Pošlji sporočilo</h2>
    <form class="row g-3">
      <div class="col-md-6">
        <label class="form-label" for="ime">Ime</label>
        <input class="form-control" id="ime" name="ime" type="text" placeholder="Vnesi ime">
      </div>

      <div class="col-md-6">
        <label class="form-label" for="email">E-pošta</label>
        <input class="form-control" id="email" name="email" type="email" placeholder="ime@primer.si">
      </div>

      <div class="col-12">
        <label class="form-label" for="zadeva">Zadeva</label>
        <input class="form-control" id="zadeva" name="zadeva" type="text" placeholder="Npr. pomoč pri postavitvi mreže">
      </div>

      <div class="col-12">
        <label class="form-label" for="sporocilo">Sporočilo</label>
        <textarea class="form-control" id="sporocilo" name="sporocilo" rows="6" placeholder="Na kratko opiši vprašanje ali težavo."></textarea>
      </div>

      <div class="col-12">
        <button class="btn btn-primary btn-lg" type="button">Pošlji sporočilo</button>
      </div>
    </form>
  </div>
</div>
...

Predogled: kontakt3.html

Pomni: Atribut for pri oznaki label mora kazati na enako vrednost, kot jo ima atribut id pri ustreznem vnosnem polju.

Zemljevid

Pod kontaktni del dodamo še zemljevid lokacije. Namesto starega Google Maps API skripta z lastnim ključem uporabimo preprostejši vdelani zemljevid prek elementa iframe. Takšna rešitev je za prikaz lokacije dovolj enostavna in ne zahteva dodatne JavaScript kode.

Zemljevid naj ima atribut title, da je njegov namen jasen tudi uporabnikom podpornih tehnologij. Atribut loading="lazy" omogoči, da se zemljevid naloži šele, ko je potreben, kar lahko izboljša začetno nalaganje strani.

Za prikaz zemljevida uporabimo naslednje elemente in razrede:

row – vrstica za zemljevid,
mt-4 – zgornji odmik,
col-12 – polna širina,
iframe – vdelani zemljevid,
map-frame – lasten razred za slog zemljevida,
shadow-sm – nežna senca.

Primer izdelave spletišča postavitev strani Kontakt zemljevid

...
<div class="row mt-4">
  <div class="col-12">
    <iframe
      class="map-frame shadow-sm"
      title="Lokacija eNSA Bootstrap"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      src="https://www.google.com/maps?q=Kidri%C4%8Deva%20cesta%2055%2C%204000%20Kranj&z=15&output=embed">
    </iframe>
  </div>
</div>
...

V datoteko z oblikovnimi slogi spletišča slog.css zapišemo oblikovne sloge zemljevida:

/* Kontakt - zemljevid */
.map-frame{
  width:100%;
  min-height:420px;
  border:0;
  border-radius:.75rem;
}

Predogled: kontakt4.html

Dostopnost in varnost kontaktne strani

Kontaktna stran mora biti uporabna tudi brez miške. Vsa polja obrazca morajo biti dosegljiva s tipkovnico, oznake polj morajo biti jasno povezane z ustreznimi vnosnimi polji, obrazec pa mora omogočati pošiljanje tudi s tipkovnico. Sporočila o napakah morajo biti zapisana z besedilom, ne samo označena z barvo.

V dejanskem spletišču mora biti obrazec povezan s strežniško obdelavo. Poleg HTML strukture je treba poskrbeti za preverjanje podatkov na odjemalcu in strežniku, zaščito pred neželeno pošto ter obvestilo uporabniku, ali je bilo sporočilo uspešno poslano.

Pozor: Atributi, kot so required, type="email" in maxlength, izboljšajo osnovno preverjanje vnosa, vendar ne nadomestijo strežniškega preverjanja podatkov.

Priporočila za kontaktno stran

Kontaktne podatke zapiši jasno in pregledno.
Naslov lokacije naj bo zapisan tudi v besedilu, ne samo prikazan na zemljevidu.
Vsako polje obrazca naj ima oznako label in ustrezno povezan atribut for.
Za e-poštni naslov uporabi type="email".
Pri daljšem sporočilu uporabi element textarea.
Gumb za pošiljanje naj ima jasno besedilo, na primer Pošlji sporočilo.
Zemljevid naj ima atribut title in naj se nalaga z loading="lazy".
Stran preveri na telefonu, tablici in večjem zaslonu.

Pogoste napake

Kontaktni podatki so prikazani samo na sliki ali zemljevidu, ne pa tudi kot besedilo.
Polja obrazca nimajo oznak label.
Atribut for pri oznaki se ne ujema z atributom id pri vnosnem polju.
Za e-poštni naslov je uporabljen type="text" namesto type="email".
Gumb obrazca nima jasnega besedila.
Zemljevid nima atributa title ali je vdelan s preveliko višino na manjših zaslonih.
Obrazec je oblikovan, vendar nima predvidene strežniške obdelave.
Napake pri vnosu so označene samo z barvo, brez besedilnega pojasnila.

Nazaj

Naprej