Website Building kurs

Kurs Website Building posvećen je modernim pristupima za razvoj web sajtova. Kurs kroz nekoliko povezanih celina polaznike osposobljava za samostalno kreiranje web sajtova korišćenjem HTML, CSS i JavaScript jezika, ali i nekih od najpoznatijih softverskih okvira i biblioteka današnjice.

Opis i cilj Website Building kursa

Za kreiranje layouta, unutar kursa Website Building obrađuje se najpopularniji frontend softverski okvir – Bootstrap. Bootstrap omogućava kreiranje vrlo efektnih korisničkih okruženja na webu, poštovanjem postulata responsive i mobile first dizajna. Polaznici će imati prilike da se upoznaju sa najmoćnijim grid sistemom za raspoređivanje elemenata, ali i sa brojnim Bootstrap pristupima koji omogućavaju efektno stilizovanje gotovo svih HTML elemenata.

Kako bi se polaznici osposobili za kreiranje dinamičkih, interaktivnih sajtova, u kursu Website Building obrađuju se različite tehnike za preuzimanje kontrole nad pregledačem i samim HTML dokumentom. Tako su prvo prikazani osnovni JavaScript pristupi za korišćenje ugrađenih aplikativnih programskih interfejsa web pregledača, koji programeru omogućavaju da dobije različite informacije o pregledaču i korisničkom uređaju i preuzme kontrolu nad strukturom HTML dokumenta. Polaznici će naučiti kako da dinamički menjaju strukturu, stilizaciju i sadržaj HTML dokumenata i obrade različite događaje koje pregledači stavljaju na raspolaganje JavaScript kodu.

U kursu Website Building posebna pažnja je posvećena i jednoj od najstarijih i najpoznatijih JavaScript biblioteka – jQuery. Reč je o biblioteci koja znatno olakšava mnoge aspekte klijentskog programiranja, uprošćavanjem logike koju je potrebno formulisati za obavljanje nekih standardnih operacija.

Na kraju, kako bi se zaokružila priča o modernom razvoju sajtova, kurs Website Building ilustruje i različite pristupe za integraciju vektorske grafike i geografskih mapa. Reč je o elementima koji su neizostavni sastojci današnjih sajtova.

Završetak svake od navedenih oblasti kursa Website Building podrazumeva primenu naučenog na primeru kreiranja jednog realnog web sajta za kafeterije. Tako kurs Website Building prikazuje proces kreiranja modernih sajtova, od prve napisane linije pa do potpuno funkcionalnog softverskog proizvoda.

Cilj kursa jeste osposobljavanje polaznika za samostalno kreiranje web sajtova upotrebom Bootstrapa, jQueryja, vektorske grafike i biblioteka za integraciju mapa.

Kurs Website Building će vam odgovoriti na pitanja:

1. Šta je Bootstrap?

U kursu Website Building posebna pažnja je posvećena upoznavanju različitih funkcionalnosti jednog od najpopularnijih softverskih okvira na frontendu. Reč je o Bootstrapu. Bootstrap su kreirali Mark Otto i Jacob Thornton, kao interni alat kompanije Twitter za postizanje uniformnog izgleda i ponašanja web aplikacija ove kompanije. Bootstrap je zatim izašao iz okvira kompanije Twitter i postao javno dostupan proizvod, otvorenog koda, koji je potpuno besplatan za korišćenje.

Bootstrap olakšava kreiranje web sajtova tako što poseduje veliku količinu već napisane stilizacije, koju programeri mogu koristiti prilikom kreiranja web sajtova. Takva stilizacija pomaže da se stvori uniformni prikaz na svim web pregledačima, olakša raspoređivanje elemenata i ubrza optimizacija web sajtova za različite uređaje. Ipak, Bootstrap je mnogo više od skupa stilova. Reč je zapravo o softverskom okviru koji je namenjen frontend razvoju.

2. Šta je Bootstrap grid?

Grid je forma koja se veoma često u web dizajnu koristi za kreiranje layouta. Grid je zapravo osnovna struktura, odnosno kostur dizajna. Sastoji se iz nevidljivih linija, čijim presecanjem se gradi struktura, odnosno sistem koji se može koristiti za raspoređivanje elemenata. U slučaju web dizajna, ti elementi su grafičke komponente i sadržaj različitog tipa od kojih je sastavljen jedan web sajt.

Bootstrap je svakako najpoznatiji upravo po grid sistemu, čije su presudne osobine jednostavnost korišćenja i velika moć konfiguracije. Osnovni pojmovi takvog sistema su kontejneri, redovi i kolone. Kombinovanjem upravo navedenih elemenata, Bootstrap omogućava da se layout definisan wireframeom ili mockupom veoma lako pretvori u funkcionalnu, responsive strukturu HTML elemenata.

U kursu Website Building izučavaju se svi pristupi relevantni za kreiranje Bootstrap grida i njegovo prilagođavanje potrebama web sajta koji se razvija.

3. Šta je BOM?

Poznavanje sintaksnih i leksičkih pravila JavaScript jezika danas je od presudne važnosti za uspešno bavljenje poslom frontend programera. Ipak, odlično poznavanje osnovnih leksičkih elemenata jezika samo je ulazni tiket za svet klijentskog programiranja na webu. Drugim rečima, pored dobrog poznavanja JavaScripta, za kreiranje modernih sajtova neophodno je i razumevanje funkcionalnosti koje web pregledači stavljaju na raspolaganje programerima.

Skup takvih funkcionalnosti koje su namenjene interakciji sa samim web pregledačem, odnosno prozorom unutar koga se prikazuje HTML dokument, veoma često se kolektivno naziva Browser Object Model. Zvanična specifikacija kojom se standardizuje BOM ne postoji, ali većina web pregledača obezbeđuje identične funkcionalnosti. Neki od primera funkcionalnosti koje se svrstavaju u objektni model web pregledača su: mogućnost pomeranja prozora, mogućnost promene veličine prozora, dobijanje informacija o web pregledaču, rukovanje istorijom posećenih web stranica...

Unutar kursa Website Building detaljno se obrađuje objektni model web pregledača, što polaznicima omogućava da preuzmu kontrolu nad prozorom dokumenta i dodatno optimizaciju sajtove koje razvijaju.

4. Šta je DOM?

Skup funkcionalnosti koje omogućavaju da se preuzme programabilna kontrola nad HTML dokumentom kolektivno se naziva aplikativni programski interfejs objektnog modela dokumenta ili skraćeno - DOM API.

HTML dokument sastoji se iz elemenata koji grade njegovu strukturu. Takvi elementi za JavaScript nemaju posebno značenje. Ali kada se oni prevedu u objekte, dobijaju se entiteti koje JavaScript može da koristi. I upravo to je i osnovna karakteristika DOM-a – reč je o objektima koji predstavljaju HTML elemente.

Objektna reprezentacija strukture dokumenta omogućava JavaScript jeziku da na lak način vrši interakciju sa dokumentom.

Izučavanje DOM strukture i funkcionalnosti unutar kursa Website Building polaznicima će omogućiti potpunu programabilnu kontrolu HTML koda – dodavanje i uklanjanje elemenata, definisanje novog ili izmenu postojećeg sadržaja, rukovanje stilizacijom...

5. Šta je jQuery?

Prilikom kreiranja web sajtova moguće je koristiti različite biblioteke, softverske okvire i alate. Svi oni su namenjeni olakšavanju kreiranja web sajtova ili nekih njihovih delova. Jedna od najstarijih takvih biblioteka jeste jQuery. Ona je namenjena olakšavanju rukovanja pregledačem i dokumentom.

jQuery je JavaScript biblioteka koju je kreirao John Resig 2006. godine, pod sloganom Write less, do more – Napiši manje, uradi više. Iz ovog slogana se može naslutiti i osnovna namena jQuery biblioteke. Naime, jQuery pojednostavljuje realizaciju mnogih aspekata klijentskog web programiranja.

U kursu Website Building detaljno su obrađene jQuery funkcionalnosti. Tako se polaznici upoznaju sa osnovnim i naprednim selektorima, različitim načinima za definisanje logike koja će se aktivirati prilikom pojave nekog događaja, ali i sa funkcionalnostima koje oglašavaju rukovanje objektnim modelom dokumenta.

6. Kako se integriše vektorska grafika u HTML?

Moderni web sajtovi ne mogu se zamisliti bez vizuelnih grafičkih elemenata, kao što su logoi, ikonice, pozadinske slike, grafikoni, ilustracije i slično. Može se reći da na današnjim web sajtovima preovlađuje grafički sadržaj, koji u većini situacija može da prenese željenu poruku posetiocu na mnogo bolji i pregledniji način nego „čist” tekst. Poslednjih godina, primarni pristup za integraciju logoa, ikonica i grafikona u HTML dokumenta podrazumeva korišćenje vektorske grafike.

Vektori su posebna vrsta grafike koja se ne oslanja na koncept piksela i njihove pozicije i boje. Stoga je reč o grafici koja poseduje brojne prednosti u poređenju sa rasterima: zauzeće resursa, proizvoljna veličina, kvalitet prikaza, mogućnost programabilne manipulacije...

Zbog značaja koji vektori zauzimaju na današnjem webu, u kursu Website Building posebna pažnja je posvećena različitim načinima za njihovu integraciju unutar HTML dokumenata. Pored pristupa za integraciju grafike koju samostalno kreiramo korišćenjem SVG-a, kurs obrađuje korišćenje i nekoliko eksternih biblioteka vektorskih ikonica, pre svih Font Awesome i Google Material Design Icons.

7. Kako se u HTML dokumente integrišu interaktivne web mape?

Interaktivnost je jedna od osnovnih osobina modernih web sajtova. Tako se danas kompletna zajednica uključena u razvoj weba trudi da čak i jednostavni, prezentacioni web sajtovi korisnicima omoguće nešto više od običnog teksta i fotografija. Jedan od primera interaktivnosti web sajtova jesu i mape.

Prva asocijacija na mape na web sajtovima za većinu je verovatno kontakt sekcija ili zasebna strana koja je popunjena mapom koja ukazuje na lokaciju na kojoj se nalazi predmet interesovanja sajta. Moderni pristupi za integraciju digitalnih mapa u web sajtove omogućavaju pretvaranje statičkih geografskih mapa u potpuno interaktivne elemente web dizajna, koji korisnicima mogu da pruže mnogo više od pukog uvida u adresu na kojoj se nalazi neka kompanija, organizacija ili pojedinac.

Kurs Website Building predstavlja različite pristupe za integraciju mapa u web sajtove, ali i za preuzimanje potpune programabilne kontrole nad njima.

Plan i program predavanja:

Modul 1: Kreiranje layouta korišćenjem Bootstrapa

• Uvod u Bootstrap
• Bootstrap grid
• Podešavanje Bootstrap grida

Modul 2: Upotreba Bootstrapa za stilizovanje sadržaja

• Tekst i slike
• Liste i tabele
• Forme i dugmići

Modul 3: Upravljanje dokumentom i pregledačem

• Rukovanje prozorom web pregledača
• Objektni model dokumenta
• Događaji

Modul 4: jQuery

• Osnove jQueryja
• jQuery selektori i događaji
• Rukovanje sadržajem, strukturom i stilizacijom pomoću jQuery biblioteke

Modul 5: Vektorska grafika i mape

• SVG
• Vektorske ikonice
• Mape