Mobiilisõbraliku veebilehe loomine – Projekti konspekt

1. Lühike sissejuhatus

Ülesanne

Minu ülesandeks oli luua mobiilisõbralik, responsive veebileht anekdootide teemaga. Veebileht pidi kohanema erinevate ekraanisuurustega ja olema hästi loetav nii arvutis kui ka nutitelefonis.

Kasutatud tehnoloogiad

HTML5 – lehe struktuuri loomiseks
CSS3 – kujunduse ja responsive disaini jaoks
PHP – dünaamiliste elementide (päise ja jaluse) kaasamiseks
Viewport meta tag – mobiilivaate optimeerimiseks

2. Koodilõigud ja selgitused

2.1 Viewport meta tag (varsketeade.php)

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Selgitus: See meta tag on kriitilise tähtsusega mobiilsete seadmete jaoks. width=device-width tagab, et lehe laius kohaneb seadme ekraani laiusega, initial-scale=1.0 määrab algse suurenduse taseme ja maximum-scale=1.0 takistab kasutajal liiga palju sisse suumida, mis tagab ühtlase kasutuskogemuse.

2.2 PHP include failide kasutamine

<?php require("../hanektoot/varsketeade.php"); ?>

Selgitus: Kasutasin PHP require() funktsiooni, et kaasata päise ja jaluse kood eraldi failidest. See võimaldab muuta navigatsiooni ja jalust ühes kohas, ilma et peaks iga anekdoodi lehte eraldi redigeerima. See teeb veebilehe haldamise palju lihtsamaks.

2.3 Navigatsiooni menüü struktuur (varsketeade.php)

<div class="nav">
    <ul>
        <li><a href="../hanektoot/anektoot1.php">1</a></li>
        <li><a href="../hanektoot/anektoot2.php">2</a></li>
        <li><a href="../hanektoot/anektoot3.php">3</a></li>
    </ul>
</div>

Selgitus: Lõin lihtsa numbrilise navigatsiooni, mis on kompaktne ja töötab hästi väikestel ekraanidel. Kasutasin nummerdatud linke (1, 2, 3), mis võtavad vähe ruumi ja on lihtsasti klikitavad ka puuteekraanidel.

2.4 Menüü horisontaalne paigutus (kujundus.css)

.nav ul li{
    display:inline;
    margin:0;
    padding:0;
}

.nav ul li a{
    display:inline-block;
    color:#00ff41;
    padding:10px;
    text-decoration:none;
}

Selgitus: display:inline muudab menüüelemendid horisontaalseks, mis sobib hästi nii laia- kui kitsakraanilistele seadmetele. padding:10px annab linkidele piisavalt klikitavat pinda, mis on oluline puuteekraanide kasutajatele.

2.5 Ümardatud nurgad ja varjud (kujundus.css)

.nav{
    -moz-border-bottom-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    border-bottom-left-radius:6px;
    -moz-border-bottom-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    border-bottom-right-radius:6px;
    box-shadow:0 2px 10px rgba(0, 255, 65, 0.3);
}

Selgitus: Kasutasin ümardatud nurki ja varju, et luua kaasaegne ja stiilne välimus. Brauseri prefiksid (-moz-, -webkit-) tagavad ühilduvuse vanemate mobiilsirvijatega.

2.6 Rohelise värvipaleti kasutamine

body{
    background:#0a0e0a;
    font-family:Arial, Helvetica, sans-serif;
}

h2{
    color:#00ff41;
    text-shadow:0 0 8px rgba(0, 255, 65, 0.6);
}

Selgitus: Valisin tumeda tausta (#0a0e0a) ja helerohelise teksti (#00ff41), mis loob hea kontrasti ja on silmadele mugav ka pikal kasutamisel. Tekstivari (text-shadow) lisab visuaalset sügavust ja muudab lehe huvitavamaks.

2.7 Hover efektid (kujundus.css)

.nav ul li a:hover{
    color:#00cc33;
    background:rgba(0, 255, 65, 0.1);
}

Selgitus: Hover efektid annavad kasutajale visuaalset tagasisidet, kui ta hiirt lingi kohale viib. Kuigi puuteekraanidel hover ei tööta, arvutikasutajatele see parandab kasutuskogemust märkimisväärselt.

2.8 Responsive teksti suurus

p{
    font-size:12px;
    line-height:20px;
    color:#00ff41;
}

Selgitus: Määrasin teksti suuruseks 12px ja rea kõrguseks 20px, mis tagab hea loetavuse. line-height loomine suuremaks kui font-size annab tekstile õhku ja teeb lugemise mugavamaks nii väikestel kui suurtel ekraanidel.

3. Mobiilivaade

Ekraanitõmmis mobiilseadmes

Joonis 1: Anekdootide lehe mobiilivaade nutitelefonis

Ülaltoodud ekraanitõmmis näitab, kuidas leht mobiilis välja näeb:

Muutused mobiilivaates:

Navigatsioon: Menüü jääb horisontaalseks, kuid numbrid (1, 2, 3) on kompaktselt reas ja lihtsasti puudutavad
Tekst: Tekst joondub üle kogu ekraanilaiuse, säilitades 5px marginaalid servadel
Pealkirjad: H2 ja H3 pealkirjad kohanevad automaatselt ekraanilaiusega tänu margin:0 5px seadistusele
Värvipalett: Roheline neoon-stiil säilib ja kontrastsus jääb heaks ka väiksemal ekraanil
Ümardatud elemendid: Box-shadow ja border-radius efektid säilivad, andes lehele professionaalse välimuse
Lugemiskogemus: Line-height 20px tagab, et tekstiread ei ole liiga kitsalt koos isegi väiksemal ekraanil

Viewport seadistuse mõju:

Tänu width=device-width seadistusele skaleerub leht õigesti ja kasutaja ei pea horisontaalselt kerides sisu lugema.