Uvod u Web tehnologije

OSNOVNI POJMOVI
 Protokol definira format i redoslijed poruka koje se razmjenjuju između dva ili više
komunicirajućih entiteta, kao i akcije koje se preuzimaju nakon slanja ili prijema poruke ili
nekog drugog događaja
 Web preglednik (eng. web browser) je aplikacija koja omogućava pregledavanje HTML
stranica. Web preglednik može biti grafički i tekstualni.
 Poslužitelj (eng. server) je računalo s javnom IP adresom koje ima instaliranu programsku
podršku za primanje zahtjeva od klijenata na bazi odgovarajućeg protokola
 Web poslužitelj (eng. web server) je programska podrška (Apache, IIS, ...) koja omogućava
primanje HTTP zahtjeva od klijenta na određenim mrežnim vratima (eng. port, obično 80) i
vraćanje HTTP odgovora klijentu
 Web mjesto (eng. web site) je logički dio na Web poslužitelju koji je određen svojom
jednoznačnom web adresom. Više Web adresa može biti povezano na jednu IP adresu. Web
mjesto sastoji se od skupa web stranica i dokumenata, a one mogu biti upravljane web
aplikacijom. Jedan Web poslužitelj može upravljati/biti zadužen za veći broj različitih Web
mjesta
 Web stranica (eng. web page) je hipermedijski sadržaj koji je napisan u HTML (XHTML, XML)
i spremljen kao datoteke na Web poslužitelju ili se vraća kao rezultat zahtjeva na Web
aplikaciji
 Web dokument (eng. web document) – je izvorni dokument koji se prikazuje kao dio
sadržaja web stranice ili samostalno i ne mora biti napisan samo u ranije spomenutim
jezicima i uređuje se putem posebnih alata. Radi se o Javascript i CSS (js, css), slikovnim (jpg,
gif i dr.), dokumentnim (pdf), video (mp4), audio (mid, mp3) i drugim formatima (swf). Često
se isprepliću pojmovi Web stranica i Web dokument
 Web aplikacija (eng. web application) – programski sustav koji generira web stranice i
dokumente, a napisan je u jednom od programskih jezika koji se izvršavaju na poslužitelju.
Može imati ulogu zaštite web stranica i dokumenata od neovlaštenog pristupa. Služi za
preuzimanje podataka od korisnika i njihovo permanentno spremanje (u datoteku, bazu
podataka i sl.), a nakon toga za njihovo pretraživanje i prikazivanje korisnicima

OSI MODEL
 Pruža apstraktni model umrežavanja koji dijeli poslove koji su uključeni u prijenos podataka
između računala u sedam grupa. OSI model sastoji se od sedam slojeva:
o Fizički sloj – prijenos pojedinih bitova između dva susjedna čvora (izvode se
modulacije signala, kodiranje i sl.)
o Sloj podatkovne veze – ovisno o tipu protokola nudi različite usluge (isporuka
paketa,…)
o Mrežni sloj – odgovoran za preusmjeravanje paketa od jednog do drugog računala
o Transportni sloj – transport poruka (skup paketa) od aplikacijskog sloja između
klijentske i serverske strane aplikacije
o Sloj sesije – opisuje organizaciju slijeda velike količine podataka i upravlja
komunikacijskom sesijom
 o Prezentacijski sloj – opisuje format podataka koji se prenose i osigurava da će biti
čitljiv primatelju
o Aplikacijski sloj – kako aplikacije komuniciraju i predstavlja mrežne aplikacije i
njihove protokole

URL ADRESE
 „Uniform resource locator“
 Svaki URL sastoji se od tri osnovna dijela: protokol, naziv servera i putanja do traženog
resursa
 protokol://domena[:port]/putanja[?parametri][#cjelina]

HTTP protokol
 HTTP protokol je zadužen za omogućavanje komunikacije između klijenta odnosno Web
preglednika i poslužitelja.
 URI („Uniform resource identifier“) – svaki URL je URI, ali svaki URI nije URL
o i URL i URI se koriste za identificiranje resursa, ali svaki URI ne funkcionira kao
poveznica

HTTP poruka
 HTTP zahtjev i HTTP odgovor u jednom
o zahtjev jest poruka koju preglednik šalje poslužitelju da bi pristupio nekom resursu
o odgovor jest poruka koju šalje poslužitelj pregledniku s informacijama o traženom
resursu
 svaka HTTP poruka sastoji se od dva dijela: zaglavlja i tijela

Razlika POST i GET metode

 Metoda GET zamišljena je za samo dohvaćanje resursa, ali kao i POST omogućuje i slanje
nekih podataka
 Metodama šaljemo parametre poslužitelju
 Ključna razlika je što se u POST metodi podaci šalju u tijelu poruke, a u GET metodi u samom
zaglavlju i vidljivi su URL adresi
 HTML
HTML stranica
 HTML stranica je tekstualni dokument vrste .html koja je prema tipu dokumenta
multimedijski dokument, a prema formatu tekstualni tip
 <element atribut1=“vrijednost1“ atribut2=“vrijednost2“>
 globalni atributi
o id (CSS)
o title
o lang
o dir
o class (CSS)
o style (CSS)
 u HTML5 pretpostavljeni je prikaz znakova UTF-8
 specijalne simbole zapisujemo logičkim nazivom &naziv; (&copy;)

HTML elementi zaglavlja

 <title> - naslov koji može biti samo jedan
 <base> - osnovna adresa dokumenta koja može biti samo jedna
 <meta> - metapodaci kojih može biti više
 <link> - veza na drugi izvor kojih može biti više
 <style> - stilske upute kojih može biti jedna ili više

HTML elementi za sekcije

 Služe za grupiranje zajedničkog sadržaja u veće cjeline koje imaju određenu semantiku
o <article>, <section>, <nav>, <aside>, <hgroup>, <header>, <footer>, <address>,
<h1,2,3,4,5,6>
 prazni elementi:
o nemaju sadržaj i završnu oznaku
 <br>, <meta>, <source>, <img>, <link>, …

Poveznice
 <a> - „anchor“
 atributi poveznica:
o target (_self, _blank, _parent, _top)
o type (MIME tip dokumenta koji se otvara u poveznici)
o rel (veza trenutnog i povezanog dokumenta)
o media(specificira uređaj za koji je povezani dokument optimiziran)
 APSOLUTNE POVEZNICE
o koriste punu URL putanju
 RELATIVNE POVEZNICE
o koriste skraćenu URL putanju
Slike
 osnovna oznaka <img>
 oznaka za grupiranje <figure>
 oznaka za naslov slike <figcaption>
 oznake za interaktvinu sliku <map> i <area>

Audio/Video
 <audio> (može imati controls i autoplay atribute)
o <source src=“rel. putanja .mp3 datoteke“>
 </audio>
 <video> (može imati controls, width=“xxxx“, height=“yyyy“ atribute)
o <source src=“rel. putanja .mp4 datoteke“>
 </video>
 <iframe> - unutarnji okvir preko kojega uključujemo youtube videozapise i druge stranice
unutar trenutne stranice

Grafika u HTML-u
 <canvas> - prikaz grafike uz pomoć JavaScript jezika
o ovisan o rezoluciji
o ne podržava upravljače događaja
o slabe mogućnosti renderiranja teksta
o sprema se kao slika .png ili .jpg
o prilagođeno za igre s jakom grafikom
 <svg> - XML bazirani jezik za vektorsku 2D grafiku
o polygon, ellipse, text, rect, circle oznake
o neovisan o rezoluciji
o najbolje prilagođeno za aplikacije s velikim područjima renderiranja
o sporo renderiranje ako je kompleksno
o neprilagođeno za igre

Validacija stranice
 pomoću dodatnih alata u Web pregledniku
 putem web adrese validator.w3.org te upisom adrese web dokumenta na javnom
web poslužitelju
o validacija omogućuje ispravljanje grešaka koje nisu u skladu sa specifikacijom
i time uzrokuju pogrešno prikazivanje sadržaja na pregledniku

Automatsko testiranje stranice

 Ručno testiranje
o koristi se kada želimo testirati korisničko iskustvo ili razne kombinacije od
kojih želimo odabrati najbolju
o u praksi neisplativo
 Automatsko testiranje
o cilj je tvrditi da nema greške brzo i jednostavno
o tri glavne vrste automatskog testiranja:
 kompiliranje produkcijskog koda
 provjera poslovne logike i arhitekture softvera te testiranje
funkcionalnosti
 testovi korisničkog sučelja gdje se oponaša korištenje softvera poput
krajnjeg korisnika
 CSS
CSS selektori
 implicitni selektor
o korištenjem naziva HTML elementa
o h1 { background: gray; color: lightblue }
 univerzalni selektor
o simbol * koji označava sve elemente
o * { background: gray }
 selektor atributa
o korištenjem naziva i vrijednosti atributa u elementu
o [lang=“hr“] { background: gray }
 <h1 lang=“hr“>naslov</h1>
 eksplicitni selektor
o korištenjem class atributa i znaka .
o .naslov { background: gray }
 <h1 class=“naslov“>naslov</h1>
 jednoznačni selektor
o korištenjem id atributa i znaka #
o #naslov { background: gray }
 <h1 id=“naslov“>naslov</h1>
 pseudo klase
o znak : te naziv propisanih selektora
o #naslov:hover { color: lightblue }

Model kutije
 CSS omogućava pogled na svaki element kao na kutiju/pravokutnik kojoj se mogu
dodijeliti određene osobine
 sadržaj, podloga (padding), granica (border) i razmak (margin)
o ako je width:100px, padding:2px, border-width:10px i margin:5px
 ukupna širina=width+(2*padding)+(2*border)+(2*margin) = 134px

Pravilo preciznosti selektora CSS uputa

 dodaje se 1 za svaki implicitni selektor h1
 dodaje se 10 za svaki eksplicitni selektor . (class)
 dodaje se 100 za svaki jednoznačni selektor, pseudo klasu ili selektor atributa # (id)
 dodaje se 1000 za svaki style atribut <style>
o !important pravilo nadjačava sve ostalo
 JAVASCRIPT
Skriptni jezici
 potreban interpreter koji će interpretirati izvorni kod i izvršavati ga
 slabo povezivanje tipova podataka radi čega varijable nemaju stalni tip podataka
 koriste za pisanje manjih programskih cjelina zvanih skripte

Osnove JavaScript jezika

 vrši se na različitim platformama te ne ovisi o jednoj, predviđene su tri razine jezika:
o programiranje na strani klijenta – upravljanje prozorima, povijesti i sl.
o središnji dio – sadrži vrijednosti, varijable, literale, izraze, operacije, funkcije i
klase
o programiranje na strani poslužitelja – pristup serveru i bazi podataka

Varijable i tipovi podataka

 deklaracija varijabli može na tri načina:
o pridruživanjem vrijednosti
 dan = 29;
o korištenjem ključne riječi „var“
 var dan = 29;
 koristi se za definiranje lokalne varijable na razini funkcije
o korištenjem ključne riječi „let“
 let dan = 29;
 koristi se unutar bloka instrukcija za definiranje lokalne varijable na
razini bloka koda
 varijable u JavaScript jeziku možemo deklarirati i bez pridruživanja vrijednosti, onda
ona nema pridruženi tip te se tretira kao varijabla sa vrijednosti „undefined“

Operatori
 = operator pridruživanja
 == provjerava jesu li vrijednosti iste neovisno o tipu podatka, vraća true ili false
 === provjerava jesu li vrijednosti iste i jesu li tipovi podataka isti, vraća true ili false

Najvažnija razlika while i do-while je da se do-while uvijek izvrši barem jednom jer se uvjet
provjere vrši tek na kraju
 POMOĆNIK ZA PRAKTIČNI DIO
Početak dokumenta i metapodaci
<!DOCTYPE html>
<html>
<head>
<title>Bilo što</title>
<meta charset=“UTF-8“>
<meta name=“author“ content=“Karlo Narančić“>
<style type=“text/css“>
form: {background:
url("https://www.foi.unizg.hr/sites/default/files/hr_logo.jpg") no-repeat;}
</style>
</head>
…
</html>

Obrazac za prijavu
<body>
<form method=“POST“ action=“link_stranice_za_slanje.php“>
<label for=“ime“>Korisničko ime</label>
<input type=“text“ id=“ime“ required name=“korime“/>
<label for=“lozinka“>Lozinka</label>
<input type=“password“ id=“lozinka“ required name=“loz“
minlength=“6“/>
<label for=“padajuca“>Odaberite:</label>
<input list=“lista“ name=“listaa“ value=“Bilo sto“ placeholder=“moze
ali ne mora“>
<datalist ID=“lista“ name=“lista“>
<option value=“1“>
<option value=“2“>
</datalist>
<input type=“submit“ value=“pretraži“ />
Tablice
<body>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
</tr>
<tr>
<td>Z</td>
<td>U</td>
</tr>
</tbody>
</table>
</body>