ebSkola

2. tēma / 2.5

2.5 Sakārto failus un arhīvu — projekta 1. daļa

Šodien: Sāc noformētas spēles projektu: sakārto attēlu un skaņu atsevišķās mapēs.

Tēmas projekts · 1. daļa no 2

Īsā teorija

atteli/varonis.svg nozīmē: attēls atrodas mapē atteli .

Pārvietojot failu, izlabo arī tā adresi HTML kodā.

ZIP apvieno failus vienā arhīvā. Pirms darba izmēģināšanas arhīvu atspied ar Extract All (Izvilkt visu). 

<img src="atteli/varonis.svg" alt="Zils robots" width="128">
<audio controls src="skanas/klikskis.wav"></audio>

Sākuma kods un darba vieta

Sāc pēc 1. uzdevuma soļiem. Darba mape ir Desktop/datorika9-tema2 ; šīs nodarbības fails ir 25.html .

Lejupielādēt 25.html

Lejupielādēt arī pilnu komplektu 25.zip — HTML, attēls un skaņa.

Atvērt pilno sākuma kodu 
<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana spēle</title>
<style>
body { font-family: Arial, sans-serif; max-width: 680px; margin: 24px auto; padding: 16px; line-height: 1.6; }
button, input { font: inherit; padding: 10px; margin: 4px; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
body { background-color: #edf5ff; color: #17212b; }
button { background-color: #245b91; color: white; border: 0; border-radius: 8px; }
</style>
</head>
<body>
<h1>Zvaigžņu mednieks</h1>
<p>Savāc piecas zvaigznes. Spied uz zvaigznes, lai iegūtu punktus.</p>
<img src="varonis.svg" alt="Zils kvadrātveida robots" width="128">
<p>Uzvaras skaņa:</p>
<audio controls src="klikskis.wav"></audio>
<p id="punkti">Punkti: 0</p>
<button onclick="savakt()">Savākt zvaigzni</button>
<script>
// Gatava poga. Šajā tēmā mācies noformēt lapu un sakārtot failus.
let punkti = 0;
function savakt() {
  punkti = punkti + 1;
  document.getElementById("punkti").textContent = "Punkti: " + punkti;
}
</script>
</body>
</html>

1. uzdevums

Sagatavo projekta failus

Vide: Pārlūks / lejupielāde → Windows → VS Code

  1. Lejupielādē 25.zip . Windows Downloads mapē izvēlies Extract All .
  2. No izvilktās mapes nokopē 25.html , varonis.svg un klikskis.wav savā tēmas mapē. Ja skaņa jau ir, vari paturēt iepriekšējo.
  3. VS Code atver tēmas mapi. Failu sarakstā spied New Folder (Jauna mape) un izveido atteli un skanas .

Gatavs, kad: Tēmas mapē ir projekta HTML, attēls, skaņa un divas jaunās mapes.

2. uzdevums

Pārvieto failus un izlabo adreses

Vide: VS Code

  1. VS Code failu sarakstā ievelc varonis.svg mapē atteli un skaņas failu mapē skanas .
  2. Failā 25.html izlabo abas src adreses pēc teorijas piemēra.
  3. Nomaini spēles nosaukumu, noteikumu tekstu un fona krāsu.

Gatavs, kad: Failu adreses sakrīt ar jaunajām mapēm.

3. uzdevums

Pārbaudi un izveido arhīvu

Vide: Pārlūks → Windows → VS Code

  1. Atver 25.html pārlūkā. Pārbaudi attēlu, atskaņo skaņu un nospied zvaigznes pogu.
  2. Windows tēmas mapē atlasi 25.html , atteli un skanas . Ar peles labo pogu izvēlies Compress to ZIP file (Saspiest ZIP failā).
  3. Saglabā arhīvu 25-darbs.zip mapē Downloads . Atspied to citā Downloads apakšmapē un atver izvilkto 25.html .
  4. Pārliecinies, ka attēls, skaņa un poga strādā arī izvilktajā kopijā. VS Code nosūti projekta avota failus uz GitHub. Iesniedz ZIP.

Gatavs, kad: Arhīva izvilktā kopija darbojas ar attēlu, skaņu un pogu.

Iesniedz 3. uzdevuma rezultātu

Iesniedz 25-darbs.zip ar darbojošos HTML, attēla un skaņas mapēm. GitHub saglabā avota failus.

Stunda ir ieskaitīta, ja 3. uzdevuma rezultāts atbilst visiem šiem punktiem:

  • 25.html ir personalizēts un poga palielina punktus.
  • Attēls ir mapē atteli, skaņa — skanas; abas adreses darbojas.
  • Iesniegtais 25-darbs.zip pēc izvilkšanas darbojas.

1. un 2. uzdevums sagatavo šo rezultātu. Papildu uzdevums nav vajadzīgs ieskaitei.

Saglabā un nosūti uz GitHub — pogu atgādne

Vide: VS Code / Source Control → GitHub pārlūkā

  1. Ar File → Save All saglabā failus. Atver Source Control ar Ctrl+Shift+G .
  2. Pie Changes nospied + (Stage All Changes). Pārbaudi, ka vajadzīgie faili pārvietojas uz Staged Changes .
  3. Ziņas laukā ieraksti īsu izmaiņu, piemēram, Pabeigts 2.5 darbs . Spied Commit .
  4. Ja šī tēmas mape vēl nav GitHub, spied Publish to GitHub un izveido publisku projektu datorika9-tema2 . Jau publicētam projektam spied Sync Changes . Ja pogas nav, atver … → Push .
  5. Pārlūkā atver savu GitHub projektu un pārbaudi faila pēdējās izmaiņas.

Ja Source Control rāda Initialize Repository , vispirms nospied to. Ja parādās kļūda vai sapludināšanas pieprasījums, izmanto palīdzību un palūdz skolotāja atbalstu.

Papildu uzdevums: Izmanto savu varoni

Sāc, kad 3. uzdevums ir gatavs un iesniegts. Ja vēlies paturēt obligāto versiju, saglabā kopiju ar citu nosaukumu.

  1. Ievieto savu PNG zīmējumu mapē atteli .
  2. Izlabo src un alt , tad pārbaudi lapu.
Ja kaut kas neizdodas

Palīdzība Git, kontam un darba atvēršanai

Skolotājam: sasniedzamo rezultātu saistība

Šajā nodarbībā vingrina šādu rezultātu daļas no 9. klases saraksta . Piesaiste pati par sevi nenozīmē visa rezultāta apguvi.

SR 2.3.3 SR 2.4.8 SR 2.4.10

Kursa nosacījumi un satura pārklājums