Kurs Advanced Website UI Design and Animation

Kurs obrađuje koncepte kreiranja klijentskog dela web aplikacije ili njenih delova pomoću JavaScripta i pratećih tehnologija. Sadržaj ovog kursa u potpunosti zaokružuje celinu kreiranja web aplikacije i sadrži rešenja za različite vrste zahteva. Objašnjeno je na koje sve načine je moguće integrisati JavaScript u HTML. Tokom kursa akcenat je na radu sa HTML sadržajem strane, pomoću DOM tehnologije, i to kroz različite pristupe – od čistog JavaScripta do korišćenja popularne biblioteke JQuery.

Kroz kurs su dati odgovori na pitanja kako programabilno pristupati HTML elementima na strani. Kako ih kreirati, modifikovati ili obrisati ili dinamički vršiti njihovu stilizaciju. Detaljno je obrađena tehnologija Document Object Model (DOM), njeni API-ji, karakteristike, kao i različiti načini njenog korišćenja. Deo kursa stavlja akcenat na biblioteku JQuery i predstavlja rešenja koje ova biblioteka nudi. U tom delu polaznik može naučiti kako da jednostavno vrši tranzicije elemenata, smanjuje i povećava elemente ili im menja sadržaj. 

U kursu je obrađena upotreba JQuery AJAX API-ja, pomoću kojih je na jednostavan način moguće izvršavati asinhrone zahteve serveru. Osim osnovnog upravljanja ugrađenim HTML elementima, kurs obrađuje i rad sa naprednim kontrolama kroz biblioteku JQuery UI. Zahvaljujući ovom dodatku, JQuery se može pretvoriti u moćan alat za kreiranje grafičkog korisničkog interfejsa, čije se rukovanje savladava tokom trajanja ovog kursa.

Zanima vas ovaj kurs? Možete ga pohađati u okviru ovih ITAcademy programa: Frontend JavaScript Program New.

Opis i ciljevi Advanced Website UI Design and Animation kurs

Kurs Advanced Website UI Design and Animation je osmišljen sa fokusom na potpuno osposobljavanje polaznika za rad na klijentskim delovima web aplikacije. Nakon njegovog slušanja, polaznik će moći da postojeću prezentaciju obogati klijentskom funkcionalnošću, animacijama i interakcijom sa korisnikom. Moći će da razume, isplanira i implementira rešenje za bilo koji zahtev koji se tiče klijentskog dela aplikacije, a uspešno će vladati tehnikama za manipulaciju DOM-om i bibliotekama JQuery i JQuery UI.

S obzirom na to da je u pitanju kurs na kome ćete usvajati veoma važne veštine za vašu buduću profesiju, kompletno gradivo je podeljeno u tematske celine, takozvane module. Na taj način svakoj tematskoj celini biće posvećeno dovoljno pažnje i istovremeno će se polaznicima omogućiti da znanja stiču postepeno i temeljno kako bi im dalje učenje bilo što jednostavnije. 

Početni modul ovog kursa baviće se implementacijom programskog jezika JavaScript u browseru. Na tim predavanjima polaznici će se upoznati sa skriptnim tagovima, kao i sa tehnikama pakovanja, distribucije i zaštite JavaScript koda. Nakon što savladaju pomenuta znanja, polaznike očekuje tematska celina koja je fokusirana na JavaScript DOM. Tom prilikom na red će doći predavanja u vezi sa strukturom i hijerarhijom DOM objekata, kao i veštinama koje se tiču manipulacija DOM objektima. U ovoj tematskoj celini budući frontend programeri naučiće i da rukuju formama. 

U narednom modulu, pod nazivom Grafika i animacija, polaznici će raditi na integraciji i korišćenju SVG grafike, rukovanju CSS tranzicijama, kao i upravljanju odloženim izvršavanjem (setInterval, setTimeout). Zatim sledi deo kursa koji je posvećen JQuery bibliotekama. Ova predavanja omogućiće polaznicima da se upoznaju sa osnovnim konceptima implementacije i korišćenja JQueryja, kao i sa upotrebom animacije i efekata. 

Na kraju kursa saznaćete šta je JQuery UI, kao i kako se postavljaju i koriste njegove kontrole. Osim toga, upoznaćete se i sa interakcijom UI kontrola i brojnim drugim korisnim veštinama.

Kurs Advanced Website UI Design and Animation će vam odgovoriti na pitanja:

1. Da li je pomoću JavaScripta moguće menjati izgled strane?

JavaScript je upravo nastao kao posledica nedostatka mogućnosti za interakciju programa sa stranom nakon što je ona već isporučena klijentu. HTML, kojim se označavaju elementi web stranica, nije isprva imao nikakve dinamičke mogućnosti. Upravo zbog toga uvedena je posebna, dodatna platforma, kojom će biti omogućeno imperativno kontrolisanje sadržaja bez ponovnog preuzimanja kompletne strane sa servera. I ova platforma je upravo JavaScript.

Isprva, JavaScript je bio samo pomagalo u „oživljavanju” strana, ali su danas strane nezamislive bez njega. A pomoću različitih biblioteka, kao što su angular i react, kompletna funkcionalnost web aplikacije izvršava se na web pregledaču umesto na serveru. 

2. Šta je to SVG i čemu služi?

Scalable Vector Graphics (SVG) je format za prikazivanje vektorske grafike unutar HTML-a. Za razliku od ostalih formata grafike, ovaj format se definiše tekstualno. Pomoću jezika XML. Zahvaljujući tome, SVG slike na strani je lako kreirati, modifikovati ili analizirati.

Kako je sam JavaScript namenjen modifikacijama strane, njegova upotreba u kombinaciji sa SVG grafikom daje odlične rezultate.

SVG grafika je naročito korisna prilikom rada sa različitim vrstama grafikona i dijagrama jer se lako može modifikovati dinamički, a takođe količina podataka koji se šalju do klijenta je daleko manja nego što bi to bio slučaj sa drugim formatima.

3. Da li je pomoću JavaScripta moguće ostvariti interakciju sa korisnikom?

JavaScript omogućava interakciju između korisnika i aplikacije. Nadograđujući postojeće sisteme interakcije koji već postoje u HTML-u, ali i uvodeći nove, koje u HTML-u nije moguće ostvariti.

Na primer, ako želimo da prikažemo prozor sa porukom u nekom trenutku izvršavanja programa ili ako hoćemo da u nekom delu izvršavanja postavimo korisniku pitanje i preuzmemo od njega odgovor. Ako želimo da na osnovu neke akcije korisnika izvršimo neku drugu akciju unutar programa ili ako želimo da na zahtev korisnika izvršimo komunikaciju sa serverom i od njega preuzmemo podatke. Sve su ovo koraci koji ne bi bili mogući da na strani ne postoji JavaScript kod i da web pregledač nije u stanju da taj kod startuje.

Polaznici kursa Advanced Website UI Design and Animation

4. Šta je to UI i JQuery UI?

Korisnički interfejs (UI) je deo programa koji je direktno zadužen za komunikaciju sa korisnikom. Iako nam komunikacija sa programom deluje kao potpuno prirodan postupak, mi to ne bismo mogli uraditi bez kontrola koje program izlaže za nas. Na primer, ako hoćemo da pristupimo sistemu pomoću korisničkog imena i lozinke, unosimo te podatke u polja za tekst, a zatim pritiskamo taster da bismo potvrdili operaciju. Ako hoćemo da odaberemo neku od ponuđenih stavki u programu, koristimo padajući meni. Ako želimo da unesemo datum rođenja, koristimo kontrolu za odabir datuma i slično. Sve pomenute kontrole deo su korisničkog interfejsa jednog programa. 

HTML sadrži ugrađen korisnički interfejs za sve često korišćene korisničke operacije. Ali ovaj interfejs je podrazumevano skromnog izgleda i zahteva dosta posla kako bi bio modifikovan, pa ga često nadograđujemo nekom UI bibliotekom. JQuery UI je popularna biblioteka za upravljanje korisničkim interfejsom.

5. Šta je to AJAX?

Isprva su web aplikacije svaku stranu generisale iznova na svaku akciju korisnika. Ako bi korisnik kliknuo na neki taster ili link, kompletna strana bi morala biti otvorena ponovo.

Da bi se ovaj problem prevazišao, umesto kompletne strane, mogu se učitati ponovo samo delovi koji su izmenjeni. Tehnologija u okviru JavaScripta kojom se ovo omogućava zove se Asinhroni JavaScript i XML (AJAX). Asinhroni zato što se podaci učitavaju asinhrono, a JavaScript zato što se učitavaju pomoću JavaScripta. U najnaprednijoj varijanti korišćenja AJAX-a čak se i ne učitavaju delovi strane, već samo čisti podaci, koji su potrebni programu za kompletiranje izlaza. Ovi podaci isprva su se slali u formatu XML, što objašnjava i poslednji pojam akronima.

Danas je AJAX temelj modernih biblioteka/okvira za JavaScript web aplikacije.

6. Šta je DOM?

DOM (Document Object Model) je programski interfejs za HTML i XML dokumente. DOM omogućava strukturni prikaz dokumenta i definiše način kako se toj strukturi može pristupiti iz programa i kako oni mogu promeniti njegovu strukturu, stil i sadržaj. DOM predstavlja punu objektno orijentisanu reprezentaciju web stranice.

Kad se web strana učita, browser kreira DOM te stranice. Korišćenjem Document Object modela možemo od statičkog HTML-a da napravimo dinamički, i to tako što pomoću JavaScripta možemo:

  • da promenimo sve HTML elemente na stranici,  
  • da promenimo sve HTML atribute na stranici,
  • da promenimo sve CSS stilove na stranici,
  • da uklonimo postojeće HTML elemente i atribute,
  • da dodamo nove HTML elemente i atribute,
  • da reagujemo na postojeće događaje (events) na stranici,
  • da napravimo nove HTML događaje (events) na stranici.

7. Šta je JQuery?

JQuery je JavaScript biblioteka, čija je svrha da olakša upotrebu JavaScripta na web stranicama. Za ono za šta bi vam trebalo da napišete na desetine linija koda u JavaScriptu u JQueryju vam je dovoljna jedna linija koda. JQuery pojednostavljuje pisanje mnogih stvari u odnosu na JavaScript, kao npr. pozive u AJAX-u i DOM manipulaciju.

JQuery biblioteka omogućava i olakšava HTML/DOM manipulaciju, CSS manipulaciju, HTML metode za upravljanje događajima, pravljenje efekata i animacija, rad sa AJAX-om i mnoge druge korisne stvari. Za JQuery postoji i veliki broj napisanih pluginova koji vam mogu dodatno olakšati i ubrzati programiranje efikasnih web aplikacija.

Plan i program predavanja:

1. Implementacija JavaScripta u browser

  • Script tagovi
  • Pakovanje, distribucija i zastita JavaScript koda

2. JavaScript DOM

  • Struktura i hijerarhija DOM objekta
  • Manipulacija DOM objektom
  • DOM događaji
  • Rukovanje formama​

3. Grafika i animacija 

  • Integracija i korišćenje SVG grafike
  • Rukovanje CSS tranzicijama
  • Upravljanje odloženim izvršavanjem (setInterval, setTimeout) 

4. JQuery biblioteka

  • Uvod u JQuery, osnovni koncepti, implementacija i korišćenje
  • Rad sa JQuery selektorima i DOM navigacija
  • Korišćenje animacija i efekata u JQuery
  • Jquery AJAX
  • JQuery pluginovi (integracija postojećih i kreiranje sopstvenih pluginova)

5. JQuery UI

  • Postavljanje i korišćenje UI kontrola
  • UI dijalozi i osnovne UI kontrole (tasteri, tasteri za potvrdu, radio-tasteri, klizači)
  • Napredne UI kontrole (odabir datuma, padajući meniji i progres barovi)
  • Interakcija sa UI kontrolama (prevlačenje, izmena veličine, selekcija)

3 načina da dobijete odlično plaćen posao

Spremili smo dokument koji otkriva tri pouzdana načina za dolazak na dobro plaćenu poziciju za stručan rad sa računarima. Preuzmite izveštaj ovde.

Da li ima mesta? Upisni rok je otvoren!

Da saznate sve o upisu, kliknite ovde