Uvod u web tehnologije

Motivacijsko predavanje i uvod u jezike za obilježavanje. Budućnost weba. Internetsko poduzetništvo. Razvoj weba i jezika za web. Ovjeravanje. Osnove izgradnje mrežnih stranica. Tehnologije za izradu mrežnih stranica. Osnovna sintaksa. Apsolutne i relativne poveznice. Preuzimanja. Osnovni statistički pokazatelji o webu. Zaglavlje i metapodatci. Striktni, tranzicijski i okvirni način rada. Kraj retka. Poredak bajtova (BOM). Rad sa slikama. Usklađivanje teksta i slika. Vanjske poveznice (sidrišta). Okviri. Adresne sličice. Odlomci. Liste. Znakovna prikazba i podrška za hrvatske znakove. Preusmjeravanja. Unutarnji okviri. Sidrenje u različitim okvirima. Tablice i modifikacije. Obrasci HTML-a. Značajke semantičkoga weba, aspekt sadržaja (content) i izgleda (layout) i njihova međusobna veza. Uvod u CSS. Smještaj koda u CSS-u i odnos prema HTML-u. Klase. Identifikatori. Pozadinski, tekstni, fontni, poveznički i listni obilježivači. Rastuća i padajuća crta. Model kutije. Blokni i redačni elementi. div i span. Pokazivači. Obrubi, rubovi i popune. CSS Media Types. CSS prioriteti. Ispitivanje kvalitete mrežnih stranica: ACID, Pingdom, W3 Validator, Nibbler, GTmetrix. Neprelamajući razmak. Prebirnici. Jedinice i mjere u CSS-u. Dimenzioniranje. Klasificiranje. Relativno, apsolutno i fiksno pozicioniranje. Uvjetovani komentari za Internet Explorer. Raspored elemenata na mrežnoj stranici i osnovni dizajn. Izrada vodoravnih i okomitih izbornika. Stilizacija poveznica i roll-over efekti. Plutanje – osnovni i napredni aspekti. Tehnologija responzivnoga dizajna mrežnih stranica (RWD). Pseudoklase i pseudoelementi. Lorem ipsum. Dodatak Firebug za Mozillu Firefox. Slikovna navigacija i rad sa slikovnim isječcima. Tehnike zaobljivanja uglova. Sjene. Optimizacija koda i slika. Kombiniranje obilježivača. Centriranje. URI. Uvod u HTML5, podrška prebirnika i budućnost kodiranja strukture na webu. Videokodeci i videoformati. Audiokodeci i audioformati. Pretvorba Flasha u HTML5. Ubacivanje videoelemenata, audioelemenata i geolokacija. Uvod u CSS3, podrška prebirnika i budućnost kodiranja dizajna na webu. Prebirnički prefiksi. Sjenčanje, zaobljivanje uglova, prozirnost, tekstni efekti, prijelaznost. Izrada izbornika u CSS3. Pozicioniranje s pomoću rešetaka. Validacije mrežne stranice. Modernizr. Mrežni fontovi i formati. Tehnologije za daljnje učenje (JavaScript, Dart, Spark, serversko orijentirani programski jezici, SEO). Izrada strukture stranice tehnikom flexbox.

1. razlikovati jezike za oblikovanje mrežnih stranica (HTML 4 i 5, XHTML, CSS 2 i 3) i upoznati ih kroz njihovu teoretsku i praktičnu dimenziju te u širem kontekstu jezika za obilježavanje (markup languages)
2. napisati kod u (X)HTML-u i CSS-u i oblikovati internetsku stranicu koja će zadovoljiti uvjete W3C-validacije, suvremene kodne prikazbe znakova, osnovnog dizajna i funkcionalnosti te standarda semantičkoga weba
3. oblikovati mrežnu stranicu i rasporediti gradivne elemene na njoj u različitim tehnologijama s pomoću: tablica, okvira, rubova, pozicioniranja, plutanja i rešetaka.
4. utvrditi zašto se u određenim slučajevima isti kod razlikuje u prikazu među prebirnicima (browserima), te shvatiti kako prebirnik prikazuje mrežnu stranicu i kako izbjeći probleme
5. usporediti kriterije za određivanje kvalitete mrežnih stranica (testovi za ocjenjivanje i ovjeravanje).
6. valorizirati dostupne alate za razvoj mrežnih stranica (prebirnici, dodatci, uređivači koda, uredske aplikacije i paketi, grafička sučelja itd.)
7. kritički prosuđivati dostupne tehnologije za razvoj mrežnih stranica (videokodeci, audiokodeci, otvorenost softvera ili platforme, budućnost HTML-a i CSS-a itd.).
8. procijeniti u kojem se smjeru razvija tehnologija prikaza podataka na webu kroz jezike HTML5 i CSS3.
9. identificirati tehnologije budućnosti na webu (operativni sustavi na internetu, sve tješnja veza aplikacijskoga softvera i mrežnih stranica, dizajn s višerazlučivim sučeljem itd.).
10. identificirati potrebu za općom informatičkom pismenošću.
11. identificirati promjenjivost trenutačnih tehnologija na webu i potrebu za stalnim usavršavanjem.
12. preporučiti studentima bogate izvore znanja (tiskana liretarura, mrežna vrela, tutorijali itd.).
13. planirati svoje daljnje usavršavanje prema JavaScriptu, serverskim jezicima i trećim tehnologijama.
14. predložiti planiranje vlastite poslovne karijere preko vlastita startupa.
15. integrirati više mrežnih stranica u mrežno središte te ih međusobno povezati apsolutnim i relativnim poveznicama.
16. pripremiti i optimizirati slike i fotografije za mrežnu stranicu te odabrati prikladan format.
17. formulirati ključne riječi i postaviti metapodatke mrežne stranice.
18. dizajnirati vodoravni ili okomiti izbornik, prilagoditi ga sadržaju i znati ga iskodirati.
19. stvoriti mrežnu stranicu prilagođenu potrebama različite prikazne širine u prebirniku ili prema različitome mediju.
20. povezati multimedijske elemente u mrežnu stranicu (audio, video, mrežni zemljovidi itd.).
21. kreirati vizualne efekte za obogaćivanje korisničkog doživljaja mrežnih stranica

Obavezna literatura

• Recenzirana skripta iz kolegija.
  Prezentacijska skripta s predavanja objavljena na stranicama kolegija.
  Poglavlja W3Schoolsa s e-tutorijalima o HTML-u, XHTML-u i CSS-u (http://www.w3schools.com/).
  M. MacDonald, HTML5 – The Missing Manual, O'Reilly, 2014.; 2. D.S.McFarland, CSS3 – The Missing Manual, O'Reilly, 2013.
  (eng: Reviewed course textbook. Lecture presentation notes (PDF) downloadable on course webpage. W3Schools e-tutorial chapters about HTML, XHTML and CSS (http://www.w3schools.com/
  M. MacDonald, HTML5 – The Missing Manual, O'Reilly, 2014.
  D.S.McFarland, CSS3 – The Missing Manual, O'Reilly, 2013. ).