MATURA 2025 - pripreme

..

Iz priručnika za maturu: B3 - Srbija i njeni susedi (str.225)

•  Fajlove - preuzeti i otpakovati
  

Planiran je rad u okruženju VS Code i postavljanje na Apache web server.

Za početak:

• Preuzeti materijale i postaviti ih u folder za rad
• Kreirati potrebne fajlove:
  • index.html
  • autor.html
  • uputstvo.html
  • style.css
  • akcije.js
• kreirati foldere za slike i za zvuk i tamo ubaciti fajlove (ako vi imate bolji zvučni zapis, ili lepše slike, slobodno to upotrebite)
  • slike
  • zvuci

Zatim za svaku od stranica:

• postaviti naslov
• ispod naslova postaviti linkove ka svakoj od stranica
• proveriti da li linkovi rade

U nastavku su samo saveti kako da se radi samo na početnoj stranici (ostalo znate od ranije):

(1) Izgled:

• to može biti slika određenih dimenzija iznad koje se nalaze male slike
  
• ili
• može da se na sredinu postavi kontejner (div) u kojem će se sve to nalaziti

U ovom slučaju će se koristiti drugi pristup:

• postaviti div element (id="kontejner") koji će biti u sredini
  • veličina treba da odgovara veličini karte koju želite na ekranu
    • ako koristite veličinu u pikselima - sve ostalo na stranici raditi sa pikselima
    • ako koristite veličinu u procentima veličine ekrana - dobra ideja je da se i dalje nastave koristiti procenti
    • može se koristiti i vw (procenat širine prozora) i vh (procenat visine prozora)
  • postaviti da je pozadina kontejnera upravo ona slika pozadine koja vam odgovara

• unutar kontejnera postaviti slike zastava
  • za svaku postaviti pripadnost istoj klasi - da bi svaka slika imala istu klasu kojom se određuju dimenzije
  • za svaku od slika postaviti različit id - da bi se prelaskom preko pojedinačne zastave puštao različit zvuk
• koliko je zastava, toliko je potrebno postaviti div elemenata u koje se upisuju imena država - i pozicionirati ih ispod zastava
• Ne zaboravite: sve je tu unutar unutar kontejnera!
• Na kraju, u cilju rada sa zvukom, bilo gde na stranici postaviti audio tagove - za svaki od zvukova po jedan
  • za svaki postaviti src ka fajlu i
  • postaviti id po kojem ćemo ih razlikovati
  • na primer:

      <audio id="zvukBos" src="zvuci/bih.m4a"></audio>
    

(2) akcije:

Za akcije na web stranici nam je potreban JavaScript.

Koje akcije imamo?

• Prilikom prelaska miša preko slike male zastave - treba pustiti himnu
• Kada miš izađe sa zastave poželjno ju je i zaustaviti - da ne svira predugo
• Klikom na naziv države treba da "iskoči" popup prozor sa još nekim informacijama o državi

I ovde postoji više načina za rad:

• Bez obzira da li se koristi samo JavaScript ili jQuery, mogu se koristiti
  
  • osluškivači događaja (elegantnije rešenje)
  • ili
  • funkcije koje se pozivaju za svaki događaj

Kako pozvati funkciju prilikom tražene akcije?

Najjednostavniji način je unutar tag-a (kao što je rađeno u 3. razredu):

  <img src="slike/bosanskaZastava.jpg" class="mala" onmouseover="pustiZvuk('zvukBos')" onmouseleave="zaustaviZvuk('zvukBos')" alt="slika zastave BiH">
  <div id="imeBos" onclick="opisDrzave('imeBos')">Bosna i Hercegovina</div>

Kako se pušta zvuk?

Koristi se audio tag koji kao atribute ima src zvučnog fajla koji će se čuti i neki id po kojem će se razlikovati od drugih audio tagova.

Prilikom ulaska miša na površinu slike odgovarajuće zastave treba da se taj zvuk "pusti".

I za ovo ima više načina:

• može se za svaku zastavu kreirati posebna funkcija koja se poziva (ovo je najmanje poželjno jer im najviše pisanja koda i nije baš najpoželjnije rešenje  - iako će raditi)
• može se kreirati funkcija kojoj se kao argument prosleđuje id potrebnog audio tag-a 
  
• može se kreirati osluškivač događaja - klik na bilo koju malu sliku - i na osnovu toga na koju je kliknuto da se odredi koji audio fajl da se pusti
  

Ovde će biti prikazan drugi od navedenih načina ......

    
    function pustiZvuk(kojiAudio)    {
       var zvuk = document.getElementById(kojiAudio);
       zvuk.play();  
    }

Ako je u pitanji BiH, onda bi poziv funkcije išao ovako :

onmouseover="pustiZvuk('zvukBos')"

Sem ovoga, dobro bi bilo napraviti i funkciju koja će da zaustavi zvuk himne. (Kao što se za puštanje zvuka koristi funkcija play(), za zaustavljanje se koristi pause() .... )

• za svaku od država napraviti poseban html fajl koji "iskače
• ili
• samo jedan popup, a sadržaj da se menja, u zavisnosti na koju od naziva država je kliknuto

Ovde će biti prikazan samo drugi način, mada i tu ima više opcija i mogućnosti.

Na primer: može se otvoriti prazan popup prozor ('about:blank'), sa odgovarajućim dimenzijama i pozicijom na ekranu:

   var prozor = window.open('about:blank','opis','width = 300, height = 200, top=400, left=400');  

ili

  var prozor = window.open('', 'popup', 'width = 300, height = 200, top=400, left=400');

Sadržaj tog prozora treba da se postavi nakon toga - u zavisnosti na šta je kliknuto. Na primer:

   if(idDrzave == 'imeBos') 
      prozor.document.write("<center><h1>Bosna i Hercegovina</h1><p>Broj stanovnika: 3 miliona<br>Glavni grad: Sarajevo </p>");

Za one koji žele da znaju malo više

Ako neko baš želi da radi u Visual Studiju, video snimak (objašnjenja kako se radi sličan zadatak) možete preuzeti sa sledećeg linka:

Pomoćni fajlovi za zadatke iz video snimka:

...