2.5. tēma: Datņu sistēmas organizēšana un arhīvi

Tavs šīs stundas izaicinājums: Strukturēt projekta failus loģiskā mapju sistēmā, atjaunot failu ceļus kodā un izveidot projekta rezerves kopiju (arhīvu).

2.3.3. Pārvalda datņu sistēmu, veic arhivēšanu; 5.2.6. Digitālā pratība.

Teorija: Ceļi un mapju hierarhija

Tīmekļa projekti vienmēr seko konkrētai struktūrai. Visi faili neatrodas vienā "kaudzē":

1. uzdevums: Loģiskas struktūras izveide

Sakārtot esošos projekta failus apakšmapēs atbilstoši industrijas standartiem.

Izpildes soļi:

  1. Atver savu projektu VS Code. Izveido trīs jaunas mapes saknes direktorijā: css, assets.
  2. Mapē assets izveido vēl divas mapes: images un audio.
  3. Pārvieto style.css uz css mapi. Pārvieto attēlus uz images, bet skaņas — uz audio mapi.

2. uzdevums: Salauzto saišu labošana

Atjaunot HTML failā norādes uz pārvietotajiem failiem, izmantojot pareizus relatīvos ceļus.

Izpildes soļi:

  1. Pārbaudi savu index.html ar Live Server — pamanīsi, ka lapa izskatās "salūzusi" (bez stila un attēliem).
  2. Atrodi <link> tagu un nomaini ceļu uz href="css/style.css".
  3. Atrodi visus <img> un <audio> tagus un atjauno to ceļus (piem., src="assets/images/varonis.png").
  4. Saglabā un pārbaudi, vai lapas vizuālais izskats un skaņas ir atgriezušās.

3. uzdevums: Arhivēšana un versiju kontrole

Izveidot lokālu ZIP arhīvu rezerves kopijai un sinhronizēt sakārtoto struktūru ar GitHub.

Izpildes soļi:

  1. Sava datora failu pārlūkā (File Explorer / Finder) atrodi projekta galveno mapi.
  2. Noklikšķini ar labo peles pogu uz tās un izvēlies "Compress to ZIP file" (vai "Send to -> Compressed folder"). Nosauc to Speles_Projekts_V1.zip.
  3. Atgriezies VS Code, veic Commit ar ziņojumu "Strukturētas mapes un atjaunoti failu ceļi", pēc tam — Push.

Biežākās kļūdas (un kā tās labot):

Koda piemērs (Mapju koks un Relatīvie ceļi)

Speles_Projekts/
├── css/
│   └── style.css
├── assets/
│   ├── images/
│   │   ├── player.png
│   │   └── background.jpg
│   └── audio/
│       └── jump.mp3
└── index.html
<!-- Kā atsaukties uz failiem no index.html -->
<link rel="stylesheet" href="css/style.css">
<img src="assets/images/player.png" alt="Varonis">
⬅ Iepriekšējā stunda Nākamā stunda ➡