24/25.4 Primenjene informacione tehnologije 4

1. blok: Stari crtani filmovi

Kreirati web stranicu u kojoj se prikazuju slike likova iz starih crtanih filmova.

Na stranici treba da se nalaze male slike sva 4 lika i mesto za veliku sliku, kao i mesto gde se ispisuje opis odabranog crtanog lika
 ...    (kao na slici)     ...

• Klikom na malu sliku treba da se ta slika prikaže u delu za veliku sliku, a opis crtanog lika da se prikaže u delu rezervisanom za opis.
• Prelaskom miša preko velike slike treba da se čuje zvuk, a kada miš "izađe" sa područje velike slike, onda taj zvuk treba da prestane.

Materijali koji su potrebni za ovaj zadatak : StariCrtaniFilmovi.7z (klik za preuzimanje arhive, pa je raspakujte na vašem računaru)

****************************************************

Zadatak je predviđen za rad na bloku od 3 časa - koristi se jQuery

*****************************************************************

Koraci u radu:

Početak:

• kreirati folder u kojem se radi, otvoriti ga sa VS Code, pa kreirati fajlove za html, css, js
  • ! za šablonsko kreiranje html-a
• Unutar ovog foldera postaviti folder za slike i tu ubaciti potrebne slike
• Tekstualni fajl sa opisima slika ostaviti da je pored html fajla (i zvučni fajl)

HTML:

• Postaviti naslov
• Ispod naslova postaviti kontejner u kojem će biti sve što je traženo
• Unutar kontejnera postaviti tri div elementa: za gornji, srednji i donji deo
  • div za gornji i srednji deo ostaviti prazne
  • u div za donji deo postaviti slike
• Slika table sa časa u učionici

CSS:

• Ponovo pogledati sliku sa zahtevima kako sve treba da izgleda
• postaviti dimenzije kontejnera i poziciju na sličan način kao na prethodnim vežbama, s tim da je sada 640px*700px
  • u ovom slučaju je nebitno da li se koristi class ili id - vaš izbor
• Obratite pažnju da su unutar kontejnera tri dela - div elementa:
  • za prikaz teksta
  • za prikaz velike slike
  • za prikaz 4 male slike
• Dimenzije treba uklopiti postavljanjem odgovarajućeg stila
  • za prva dva dela je postavljena slika table u učionici
    
  • za treći deo ponovo pogledajte sliku table sa HTML-om

JS:

• Pošto se koristi jQuery, prvo postaviti vezu ka tom fajlu
  • možete koristiti neki od linkova sa interneta
  • ili možete imati lokalni fajl - vaš izbor
• Tek nakon poziva jQuery se postavlja skripta za vaš fajl za akcije !!!
• U fajlu za akcije se koristi jQuery:
  • Sve što se radi ide nakon što je dokument učitan u spreman (jqDocReady)
  • za čitanje iz fajla se koristi AJAX, i to kraći oblik GET:
    • učitava se fajl i podaci iz njega se šalju u funkciju koja radi sledeće
    • svi podaci se podele u redove (podela po znaku za prelazak u naredni red)
    • ako se ne navede ni let ni var tada će niz redova koji se dobije biti globalno vidljiv (odlika JavaScripta)
    • nakon toga uzeti prvi red i iz njega izvući opis i postaviti ga odmah u deo za tekst (da je prvi tekst postavljen odmah nakon učitavanja stranice)
    • slika table iz učionice
      
    • ako nije jasno korišćenje nadovezivanja metoda pomoću tačke: pogledajte sliku table sa alternativnim objašnjenjem.
  • prilikom klika na bilo koju od malih slika treba da se uradi sledeće:
    • za pozadinu srednjeg dela postavit na tu sliku
    • u gornji deo postaviti opis slike
  • A kako?
  • Načina ima mnogo, ovde je predstavljen samo jedan ....
    • za razlikovanje malih slika svakoj posaviti ID koji se poklapa sa brojem slike
    • klikom na bilo koju malu sliku uzeti taj ID i pomoću njega kreirati adresu slike koja nam je potrebna
    • to onda postaviti kao pozadinu srednjeg dela
    • A za tekst već imamo redove, pa uzeti odgovarajući red i iz njega izdvojiti opis i ubaciti u gornji deo
    • (Napomena: u ovom zadatku slike imaju oznake 1, 2, 3, ... a redovi 0, 1, 2, ...)
    • Slika table u učionici