Web Tehnologije - Predavanja

PREDMET

Web Tehnologije (WBT)

eMPIRICA – III Semestar: WBT 2013

2

PREDAVANJE 1

SADRŽAJ PREDMETA

internetu općenito Web aplikacije Arhitektura Web aplikacija Jezici za izradu Web aplikacija na klijentu Jezici za izradu Web aplikacija na serveru XML Web servisi CMS

POVIJEST INTERNETA

Počeci interneta sežu u kasne šezdesete godine i početak sedamdesetih ‒ američka vojno-istraživačka ustanova ARPA (Advanced Research Projects Agency) izvede projekt ARPAnet. Istraživački projekt se nakon toga u sedamdesetim godinama odvijao prije svega na univerzitetima u SAD-u gdje treba spomenuti 1981. godine osnovanu akademsku mrežu Bitnet.

Protokol TCP/IP (Transport Control Protocol / Internet Protocol) standardiziran je dvije godine kasnije, u 1983.

1984. godine uspostavljen je sistem imenskog prostora DNS (Domain Name System). 1986. u SAD-u uspostavljena mreža NSFnet (National Science Foundation) i u njezinu

okviru mrežni informacijski centar NIC (nadležan za dodjeljivanje adresa i domena). ARPAnet je prestao raditi 1990. godine.

1992. osnovan je Europanet ‒ kičma europskih akademskih mreža i ARNES ‒ slovenska akademska mreža. Iste godine osnovan je i ISOC (Internet Society), međunarodna organizacija za usklađivanje razvoja Interneta.

Upravljanje uslugama mreže NSFnet je 1995. godine preuzela telekomunikacijska kompanija AT&T, a u Sloveniji je osnovano Slovensko udruženje za internet.


3

INTERNETSKI SERVISI

WWW (World wide web): Najnoviji serviskoja zadnjih dvadeset godina bilježi vrlo brz rast. Zbog svojih karakteristika koje omogućuju prikazivanje multimedijskih sadržaja, postala je najčešće korišten servis na internetu.

Elektronička pošta (e-mail): Servis omogućuje primanje i slanje elektroničke pošte. Ona je i temelj sistema za elektronsku razmjenu podataka EDI (Electronic Data Interchange), koja određuje razmjenu podataka i dokumenata između poduzeća.

Mrežne vijesti / novosti: Konferencijski sistem podijeljen na više hiljada hijerarhijski organiziranih grupa u kojima dominiraju računarske teme.

FTP: Servis za prijenos datoteka imenovana prema istoimenom protokolu. Gopher: Servis za usmjereno traženje informacija pomoću menija, gdje su sadržaji

servera uređeni prema pregledu sadržaja. Telnet: Servis za udaljeni pristup računarima, gdje se simulira lokalni računarski

terminal.

WWW

WWW (World Wide Web) je kao novi mrežni servis prvi put predstavljen 1989. godine ‒ Tim Berners-Lee iz Europskog centra za nuklearna istraživanja CERN u Ženevi. Povod za nastanak servisa World Wide Web bila je zbrka na području komunikacije jer se u ono vrijeme za razmjenu informacija između naučnika koristio veliki broj različitih protokola. Namjera servisa World Wide Web bila je pojednostavljena i brza razmjena informacija pomoću informacijskog sistema koji se temeljio na internetskim (hipertekst) dokumentima.

Berners je razvio protokol za prenošenje internetskih dokumenata HTTP (Hyper Text Transfer Protocol) i jezik za označavanje ‒HTML (Hypertext Markup Language) za definiranje njihove strukture. U CERN-u su 1990. izradili i prvi internetski pretraživač, koji je omogućavao pristup internetskim dokumentima. Internet su prvo koristili prije svega u akademskim i istraživačkim krugovima, a u drugoj polovini devedesetih godina počeo se koristiti i u poslovnom svijetu. Razloga za to ima više, a najznačajniji su sljedeći:

Na internetu se neprestano sklapaju poslovi, noću i danju, što eliminira probleme povezane s tradicionalnim načinima kupovine, kao što su ograničeno radno vrijeme, gužva na ulicama i u trgovačkim centrima itd.

Brz razvoj internetskog izdavaštva, čiji je zadatak izrada što ljepših, prikladnih i privlačnih internetskih stranica. Na početku se na stranicama


4

pojavljuje samo tekst, a sad su one preplavljene različitim slikama, audiozapisima, digitaliziranim videozapisima i virtualnim svjetovima.

Razvoj novih programskih jezika i alata za izgradnju internetskih aplikacija. WWW je prvo omogućivao vrlo ograničenu dvosmjernu komunikaciju između servera i klijenta, te se brzo pokazala potreba za većom interaktivnošću. Rješenje je bilo uvođenje mogućnosti definiranja obrazaca u HTML jeziku i izgradnje serverskih programa, s poštivanjem CGI specifikacije.

WWW kao i sve druge Internetski servisi djeluje na temelju modela klijent - server. Komunikacija se uvijek odvija između internetskog servera na kojem su sačuvane internetske stranice i pomoćni programi i klijenti u obliku internetskih pretraživača. Servere i klijente povezuje protokol aplikacijskog sloja HTTP, koji definira pravila razgovora na najvišem nivou internetske veze. Komunikacija prema pravilima HTTP protokola odvija se u četiri faze:

Veza: Klijent se poveže s internetskim serverom koristeći njegovu internetsku adresu i dobro poznata vrata za server HTTP protokola. Server prihvati vezu.

Zahtjev: Klijent serveru pošalje zahtjev za sadržajem (internetskoj stranici).

Odgovor: Server pošalje traženi sadržaj ili poruku o grešci u slučaju da nije u stanju ispuniti zahtjev.

Isključenje: Nakon završenog prijenosa sadržaja server prekine vezu.


5

ADRESIRANJE I SISTEM IMENSKOG

PROSTORA

Svaki kompjuter, priključen na internet, dobiva svoju jednoliko određenu IP adresu kojom se identificira u mreži.

Nekad ‒ Adresa sastavljena od 32 bita, podijeljena na tri dijela. Prvi dio (najznačajniji bitovi) određuje tip adrese, drugi mrežu, a treći uređaj unutar mreže:

A (0, 7 bitova za mrežu, 24 bita za uređaje), B (10, 14 bitova za mrežu, 16 bitova za uređaje) ili C (110, 21 bit za mrežu, 8 bitova za uređaje).

Danas – varijabilna podjela IP adrese na dio za mreže i dio za uređaje - Subnet mask

Problem IP adresa (sastavljena od četiri broja podijeljena tačkom) je njihovo teško

memoriranje, što je posljedica nedostatka semantike odnosno opisnosti. Za jednostavnije adresiranje su zbog toga uveli još drugi oblik mnemoničkog imena, koji jednoliku adresu uređaja navodi redoslijedom kratkih riječi odnosno slova. Top level domene su: gov (vladine ustanove), com (poduzeća), edu (odgojno-obrazovne ustanove), mil (vojne organizacije), net(organizacije za djelovanje i održavanje mreža) i org (druge neprofitne i istraživačke organizacije). S obzirom na geografski kriterij nastale su dvoslovne domene za svaku pojedinu državu. (Slovenija ‒ .si, BiH ‒ .ba).

PROTOKOLI I SLOJEVI NA INTERNETU

Aplikativni sloj: Sadrži protokole za servise koje koristi tipični korisnik. Njegovi protokoli su HTTP, FTP, SMTP (Simple Mail Transfer Protocol), Telnet itd. Transportni sloj: Brine se o tome da se poruka bez grešaka prenese od pošiljaoca do primaoca. Na tom mjestu susrećemo prije svega TCP protokol koji osigurava pouzdan prijenos, pri čemu u određenim slučajevima smeta njegova relativna sporost. Mrežni sloj: Sadrži IP protokol koji osigurava odgovarajući put preko mreže od pošiljaoca prema primaocu. Datagrami, dodatno opremljeni podacima o internetskoj (IP) adresi


6

pošiljaoca i prijemnika, životnoj dobi itd., putuju po mreži nezavisno jedan od drugoga prema načelu prijenosa bez trajno uspostavljenje veze. Sloj veze podataka: Sadrži protokole za razrješivanje adresa ARP ARP (Address Resolution Protocol) i RARP (Reverse Address Resolution Protocol) i strojno sučelje za različite nosioce (parice, koaksijalni kablovi, optička vlakna itd.). Primjeri: Ethernet i Token Ring.

WWW I BAZE PODATAKA

Prezentacija podataka iz baza podataka servisom World Wide Web odnosno u okviru interneta unutar poduzeća donosi velik broj pozitivnih učinaka:

Povećanje funkcionalnosti internetskih prezentacija jer su na raspolaganju uvijek ažurni podaci,

jednostavnije prezentacije velikih zaliha dokumentnih podataka jer se oni ne trebaju konvenirati u HTML oblik,

centraliziranje pristupu do različitih baza podataka korištenjem jedinstvenog korisničkog sučelja,

povećanje interaktivnosti internetskih prezentacija omogućivanjem direktnog unošenja u bazu podataka (alternativa je korištenje elektroničke pošte) itd.

Poduzeća danas koriste baze podataka u internetskim aplikacijama prije svega za sljedeće namjere:

za održavanje podataka o klijentima, dobavljačima i ostalim poslovnim partnerima


7

za baze znanja o tehničkim karakteristikama, cijenama proizvoda i mogućim problemima,

za statistike pristupanja do internetskih stranica, prodajnih trendova,

za održavanje podataka o zalihama,

za poslovne dogovore i pravila, uputstva povezana s naručivanjem i nabavom, plaćanjem proizvoda itd.


8

POZITIVNI UČINCI POSLOVANJA NA

INTERNETU

Poslovanje na internetu donosi sljedeće pozitivne efekte za poduzeća:

Poboljšanje prepoznavanja poduzeća: Internetske prezentacije omogućuju ne samo posredovanje informacija o proizvodima i uslugama, nego i posebnosti i prednosti poduzeća od konkurencije. Neka poduzeća uključuju u prezentacije i svoju strategiju, ciljeve i poslovnu filozofiju.

Novi prodajni kanali: Poduzeća nisu više ograničena na prodaju po standardnim kanalima, koju u većini slučajeva izvode preko posrednika i poslovnih partnera, nego prodaju mogu izvoditi direktno preko interneta.

Poboljšanje usluga za stranke: Uključivanjem tehničkih karakteristika, često postavljenih pitanja, rješavanjem problema povezanih s određenim proizvodom ili uslugom, može se značajno poboljšati i ubrzati postupak servisiranja i održavanja.

Rast poduzeća: Vrijeme i geografski položaj nisu više tako značajni faktori kao nekada. Poslovi se sklapaju 24 sata dnevno, cijele godine i za vikende i praznike. Više nego fizička lokacija poduzeća značajna je njegova prepoznatljivost na internetu i prisutnost u svim značajnijim internetskim pretraživačima.

Kvalitetnija struktura stranaka: Zbog sve veće poplave podataka na internetu, većina se ljudi služi internetskim pretraživačima za traženje željenih informacija. Ljudi posjećuju internetske prezentacije s točno određenom namjerom utvrđivanja, što im pojedino poduzeće nudi. Naime, u većini slučajeva riječ je o specijaliziranim klijentima, a ne slučajnim posjetnicima; postoje dobre šanse da će doći do sklapanja posla u takvom ili drugačijem obliku.

INTERNET I SIGURNOST

Ključni uzrok za velik broj problema povezanih s internetom je u strukturi njegove arhitekture i protokola TCP/IP te UDP. Nijedan od njih naime sam po sebi ne osigurava siguran prijenos podataka mrežom. Osiguravanje sigurnosti na internetu obuhvaća tri ključna područja:

Sigurnost servera: Obuhvaća osiguravanje sistema servera koji su oduvijek predstavljali najčešće ciljeve napada i neovlaštenog pristupa. Za njihovo osiguranje koriste se razni mehanizmi, od lozinka za identifikaciju pristupa do različitih protupožarnih zidova.

Sigurnost komunikacijskih kanala: Obuhvaća različite načine kodiranja poruka korištenjem simetričnih i asimetričnih kriptografskih algoritama te digitalnog potpisivanja (SSL, SHTTP).


9

Sigurnost korisnika: Obuhvaća pitanje sigurnosti korisnika koji su potencijalne mete napada internetskih programa u jeziku Java ili objekata ActiveX.

Protupožarni zidovi imaju sljedeće prednosti:

koncentracijom područja mogućih upada na samo jedan sistem (protupožarni zid) sigurnosne mjere imaju samo minimalne negativne efekte na preostali dio mreže,

programska oprema za kontrolu i nadzor namještena je samo na jednom sistemu,

sve veze s lokalnom mrežom idu preko protupožarnog zida, što omogućuje njihovu efikasnu kontrolu.


10

PREDAVANJE 2

WEB APLIKACIJE

Ako je internet u sedamdesetim i osamdesetim godinama ograničen prije svega na akademske krugove, WWW je početkom devedesetih značio pravu revoluciju. 1989. godine Tim Berners-Lee postavio je temelje novoj internetskoj usluzi, utemeljenoj na skupu međusobno povezanih hipertekstovnih dokumenata, koju je imenovao WWW. Karakteristike prvih internetskih sistema (skup međusobno povezanih internetskih dokumenata) bila je statičnost i vrlo ograničena interaktivnost koja je počinjala i završavala korištenjem hiperveza za prelaženje između internetskih dokumenata, strukturiranim na osnovu HTML (HyperText Markup Language) jezika za označavanje. Dolaskom WWW-a na komercijalno područje, pokazala se potreba za većom interaktivnošću, dinamičkom izradom sadržaja, kao i raznolikijim odabirom dizajnerskih mogućnosti.

Razvoj internetskih programskih rješenja sljedeće godine bio je neodvojivo povezan sa specifikacijom CGI (Common Gateway Interface), koja propisuje standardizirano sučelje za komunikaciju internetskih servera (internetskim dokumentima) i vanjskim programima. U borbi za prevlast na tržištu internetskih servera proizvođači su nadograđivali svoje mogućnosti novim tehnologijama (NSAPI poduzeća Nestscape, ISAPI poduzeća, Microsoft itd.) koje su otklanjale glavne nedostatke programa CGI (sporost izvođenja, velika potrošnja resursa). U međuvremenu su se već pojavili i prvi programski i skriptni jezici, koji su omogućavali obradu zahtjeva već na strani korisnika, bez potrebe za posredovanjem internetskih servera.

Netscape je tako razvio skriptni jezik JavaScript, koji još danas u suradnji s platformski nezavisnim sučeljem DOM (Document Object Model), predstavlja temeljni alat za izgradnju internetskih programskih rješenja za korisničku stranu. Razvoj internetskih programskih rješenja doživio je pravi preporod tek pojavljivanjem tehnologija koje su omogućile izvođenje skriptnih programa i internetskim serverima. Prednosti:

Jednostavnije programiranje (kombinacija skriptnog jezika i HTML jezika za označavanje).

Efikasan pristup (specijalizirani objektni modeli i sučelja) do podatkovnih baza koje sačinjavaju jezgru svih modernih informacijskih sistema.

Nedostaci:

Povezani teško čitljivim programskim kodom, zahtjevnim održavanjem i premalenom ponovnom upotrebljivošću.


11

Rješenje se pokazalo u striktnoj podjeli programskog koda na dijelove koji predstavljaju poslovnu logiku, dijelove koji se bave oblikovanjem prezentacije i na sam sadržaj odnosno podatke. Odvajanje poslovne logike od sadržaja može se postići uvođenjem poslovnih komponenata od kojih u sadašnje vrijeme prednjače tri komponentna modela: CORBA (Common Object Request Broker Architecture), Enterprise JavaBeans i DCOM (Distributed Component Object Model), odnosno njegova novija verzija .NET.

Danas je jezik za označavanje XML (Extensible Markup Language) tehnologija koja preuzima primat u oblasti razvojnih internetskih programskih rješenja. Glavna prednost XML jezika je nezavisnost sadržaja od prikaza. XML se bavi savladavanjem sadržaja, a oblikovanje prikaza prepušteno je specijaliziranim jezicima npr. XSLT (Extensible Stylesheet Language Transformations). Internetski servisi – osnova za uslužno usmjerenu arhitekturu (SOA). Web aplikaciju definiramo kao:

aplikacija koje je već u svojim temeljima planirano za izvođenje u okolini servisa World Wide Web

internetski sistem koji sadrži više ili manje kompleksnu poslovnu logiku s mogućnošću mijenjanja stanja sistema u zavisnosti od korisničkih unosa

programski sistem zasnovan na tehnologijama i standardima organizacije W3C, koja pruža izvore karakteristične za internet, kao što su sadržaj i servise preko korisničkog interfejsa web pretraživača

Web aplikacije se od klasičnih hipermedijskih rješenja razlikuju na više načina:

korisnici pored pretraživanja hiperveza mogu i aktivirati operacije te izvoditi transakcije,

hipermedijska struktura se može s vremenom razvijati,

različiti korisnici imaju različita gledišta na podatke i različite mogućnosti izvođenja operacija...

Postavljaju se pitanja:

Gdje je granica koja dijeli klasične, statične internetske stranice od internetskog programskog rješenja?

Možemo li internetsku stranicu s dinamičkim menijima i drugim vizualnim ukrasima smatrati internetskim programskim rješenjem?

Je li uvjet za svrstavanje u Web aplikacije prisutnost kompleksnijeg korisničkog sučelja (obrazaca) i odgovarajuće programske logike za servisiranje korisničkih zahtjeva?

Jednoznačan odgovor na pitanje kakva je razlika između internetske stranice i internetskog programskog rješenja ‒ ne postoji. Fowler: pojedino rješenje u internetskoj okolini ne može biti strogo svrstano u internetske stranice i Web aplikacije jer između njih postoji neprekinuta veza ‒ kontinuum.


12

Za pojedino rješenje možemo samo odrediti svrstavaju li se njegove karakteristike više na stranu internetskih stranica ili internetskih programskih rješenja.

GRUPE WEB APLIKACIJA

Web aplikacije svrstavamo u sljedeće grupe: Dokumentne stranice: prethodnici programskih rješenja, internetske stranice su sačuvane na internetskom serveru u obliku statičnih HTML dokumenata. Interaktivne: internetske stranice i veze se izrađuju dinamički s obzirom na akcije korisnika. Transakcijske: omogućavaju ažurirane sadržaje, traže korištenje sistema za upravljanje bazama podataka. Procesne: podržavaju poslovne procese i radne postupke unutar ili između poduzeća, javnih ustanova i pojedinaca korištenjem internetskih servisa. Suradničke: podržavaju suradnju i poboljšavaju komunikaciju između grupa ili u grupe učlanjenih pojedinaca. Portalne: pružaju jedinstvenu pristupnu točku do odvojenih, heterogenih izvora informacija i usluga. Sveprisutne: osiguravaju personalizirane usluge bilo kada, gdjegod i za bilo koji uređaj.

Podjela s obzirom na ciljnu publiku:

Internetske (javne): rješenja koja nisu ograničena na pojedinu vrstu korisnika.

Intranetne: privatne za pojedine organizacije, djeluju većinom na lokalnim mrežama.

Ekstranetne: namijenjene pojedinoj vrsti korisnika, dostupne preko javne mreže (interneta).

Podjela s obzirom na stupanj interaktivnosti:

Statične: sadržaj je relativno nepromjenjiv, korisnici nemaju mogućnost utjecaja na izgled i sadržaj prezentiranih podataka (birati mogu samo redoslijed njihova prikazivanja korištenjem veza / linkova).

Interaktivne: korisnici direktno utječu na sadržaj i komuniciraju s ostalim korisnicima.

Internetska rješenja možemo podijeliti i s obzirom na čestotu mijenjanja (ustaljene, koje se mijenjaju, personificirane), broj stranica (male < 100, srednje i velike > 1000) i namjeru (poslovne, informacijske, zabavne, navigacijske itd.).


13

WEB APLIKACIJE ‒ KOMPONENTE

Komponente internetskih programskih rješenja već se u osnovu dijele na komponente klijenta i komponente servera, pri čemu su jedine obavezne komponente pretraživač na strani klijenta i internetski server na strani servera. Ostale komponente (na slici prikazane s obrubljenim linijama) u Web aplikacijuuključuju se prema potrebi, s obzirom na zahtjeve naručioca i planirano rješenje izvođača. Komponente:

Klijent: obično pretraživač kojeg koristi korisnik i čije se funkcionalnosti mogu nadograditi uključenjem priključnih dodataka, javanskih programa ili ActiveX sastavnih dijelova.

Protupožarni zid: programska oprema koja korištenjem dostupnih filtara kontrolira komunikaciju između opasne vanjske i sigurne unutrašnje mreže.

Prolaz: omogućava privremeno pohranjivanje internetskih stranica u predmemoriji (brži pristup), prilagođavanje sadržaja korisnicima, praćenje korisnika itd.

Web server: programska oprema koja podržava različite internetske protokole i protokole WWW-a i koja omogućava procesiranje zahtjeva klijenata.

Aplikacijski server: omogućava funkcionalnosti za izvođenje programskih rješenja korištenjem različitih tehnologija i programskih jezika (ASP, JSP, PHP itd.).

Baza podataka: pruža podatke organizacije u strukturiranom obliku (relacijski, objektni, višedimenzionalni server za podatke).

Multimedijski server: pruža podatke u nestrukturiranom obliku medijskog toka (video, audio).

Server sadržaja: pruža sadržaj u obliku djelomično strukturiranih podataka (XML dokumenata).

Stari sistem: star, ali operativan sistem, integriran u internetsko programsko rješenje.


14

WEB APLIKACIJE ‒ ARHITEKTURE

Arhitektura programskog rješenja određuje gdje se nalaze programske komponente, koje sačinjeno rješenje provode, kakvi su njihovi međusobni odnosi, odnosi s hardverom, mrežom i krajnjim korisnicima. Uspješno planiranje i razvoj programskih rješenja usko je povezano s odabirom odgovarajuće arhitekture na koji utječu brojni faktori:

vrsta programskog rješenja (internetska, klasična itd.),

kompleksnost,

podjela komponenata,

ciljna okolina izvođenja. Danas se većinom koriste dvije osnovne arhitekture: dvorazinska i trorazinska ili višerazinska. Korištenje nivoa odnosno slojeva ‒ jedna od najčešće korištenih tehnika za savladavanje kompleksnosti programskih rješenja. Ideja o podjeli aplikacijske logike na više međusobno nezavisnih sastavnih dijelova koji su zaduženi za izvođenje pojedinih funkcionalnosti programskog rješenja, počela se koristiti zajedno s usponom arhitekture klijent - server krajem osamdesetih i početkom devedesetih godina. Dva pojma: nivo i sloj – sinonimi (da, ne)?

Nivoi ‒ fizička podjela programskog rješenja na različite računarske sisteme.

Slojevi ‒ logička podjela.

MONOLITSKI PRISTUP

Za vrijeme centraliziranih i samostalnih osobnih računara kada je cjelokupno programsko rješenje bilo instalirano na samo jednom računaru, u praksi se koristio razvoj monolitskih programskih rješenja koja su sadržavala sve funkcionalnosti (unošenje, provjera, poslovna logika, pristup podacima itd.) realizirane u okviru jedinstvenog bloka programskog koda. Problemi:

Isprepletenost programskog koda ‒ najmanja intervencija u neku od funkcionalnosti programskog rješenja utječe na ostale funkcionalnosti

osobne računare jer je trebalo kod svih korisnika uvijek instalirati nove verzije

Konzistentnost podataka


15

KLIJENT ‒ SERVER

Posljedica zahtjeva za sukorištenjem podataka zbog većeg broja programskih rješenja na različitim računarima. Bilo je potrebno odvojiti logiku podataka programskog rješenja od aplikacijske logike i nastala su dva, međusobno nezavisna nivoa, nivo podataka i aplikacijski nivo.

Arhitektura s dva nivoa u osnovi omogućuje dva pristupa udruživanju prezentacijskog

i poslovnog sloja:

Udruživanje prezentacijskog i poslovnog sloja na nivou klijenta, dok se podatkovni sloj nalazi na svom nivou (opterećeni klijent, laki server)

Klijent komunicira direktno sa serverom za podatke s pomoću podatkovnih sučelja (ODBC, JDBC, OLEDB itd.).

Udruživanje poslovnog i podatkovnog sloja na svom nivou (laki klijent, opterećeni server).

Za rad s podacima koriste se SUPB rješenja (pohranjeni postupci, funkcije) Problemi prvoga pristupa

Visoki troškovi u slučaju mijenjanja podatkovnih sučelja i servera za podatke (iznova treba instalirati programsku opremu na svim klijentima).

Nadogradnja programske logike (iznova treba instalirati programsku opremu na svim klijentima).

Problematičan prijenos veće količine podataka mrežom. Prednosti drugog pristupa:

Povećava skalabilnost i kapacitete dvonivojskog programskog rješenja, Smanjuje opterećenost mreže

Problem ‒ prenosivost rješenja


16

VIŠESLOJNA ARHITEKTURA

Višeslojna arhitektura dodaje dvonivojskoj jedan ili više nivoa, na način da se

prezentacijski, poslovni i podatkovni sloj nalaze svaki na svom nivou. Podjela programske logike korisničkog sučelja na jednoj strani i podataka na drugoj strani povećava flekibilnost programskog rješenja. Osnovno načelo višenivojske arhitekture naglašava da bilo kakve promjene na nekom od nivoa ne smiju utjecati na ostale nivoe programskog rješenja.

Kod kompleksnijih programskih rješenja često se događa da pojedini slojevi sadrže više različitih implementacija, od kojih je svaka namijenjena određenom broju klijenata i izvoru podataka.

Više mogućih pristupa logičkoj podjeli programskih rješenja na slojeve; najčešće je riječ o podjeli na tri do pet slojeva. Fowler, 3 sloja:

Prezentacijski sloj, sastavljen od grafičkog korisničkog interfejsa (GUI – Graphic User Interface) programskog rješenja.

Sloj poslovne logike odnosno domenski sloj koji predstavlja poslovnu logiku za obradu i posredovanje podataka do klijenta.

Sloj pristupa podacima (podatkovni sloj) koji se brine o komunikaciji s bazama podataka, sistemima poruka i drugim izvorima podataka.

Brown, 5 slojeva - dva dodatna sloja:

Kontrolno-posrednički sloj između prezentacijskog i domenskog.

Podatkovno-posrednički između domenskog i podatkovnog.


17

Na konceptualnoj razini danas postoji više različitih arhitektonskih uzoraka za opis prezentacijskog sloja pri čemu najčešće koriste arhitekture tankog klijenta, debelog klijenta i web dostave.

ARHITEKTURA TANKOG KLIJENTA

Primjerena za web aplikacije, namijenjene izvođenju u internetskoj okolini. Osnovni zahtjev koji arhitektura ispunjava: programsko rješenje dostupno što širem krugu korisnika, njezino izvođenje treba biti što efikasnije s gledišta reakcijskog vremena kao i samog postupka. Kod planiranja treba se kloniti previše kompleksnih funkcionalnosti koje nisu kritične za postizanje poslovnih ciljeva. Većinu programskih rješenja za elektroničko poslovanje možemo svrstati u ovu kategoriju jer si kod njih ne možemo dopustiti da bismo zbog pojedinih tehnoloških ograničenja već unaprijed otpisali određen krug korisnika.

Osnovna karakteristika izvođenja aplikacija izgrađenih arhitekturom tankog klijenta je da može doći do izvođenja poslovne logike samo na temelju zahtjeva po određenoj web stranici, koji na server posreduje klijent. Ako je riječ o zahtjevu za statičkom web stranicom, tada je web server odmah posreduje klijentu. U slučaju dinamičke web stranice, web server stranicu najprije delegira za obradu aplikacijskom serveru. On izvodi programsku logiku, prema potrebi komunicira s pojedinim izvorima na strani servera i kao rezultat procesiranja vraća web serveru dinamički izrađenu web stranicu koju web server posreduje nazad klijentu. Takav pristup primjeren je za web i programska rješenja, gdje možemo osigurati dobra reakcijska vremena od strane aplikacijskog servera i kod kojih nam ne treba kompleksniji korisnički interfejs.


18

ARHITEKTURA DEBELOG KLIJENTA

Nadograđuje arhitekturu tankog klijenta s mogućnošću izvođenja poslovne logike i na strani klijenta. Za te namjere koriste se u web stranicu ugrađeni skriptni jezici, Activex komponente i Java programi.

Primjerena za programska rješenja gdje postoji mogućnost direktne kontrole nad pretraživačima odnosno možemo s velikom vjerojatnošću pretpostaviti koji tipovi i verzije pretraživača potencijalni korisnici posreduju. Glavna motivacija za prelazak na arhitekturu debelog klijenta je mogućnost izgradnje naprednog korisničkog interfejsa. Na klijenta je smisleno prenijeti samo onaj dio poslovne logike koji direktno kontrolira interakciju s korisnikom dok se ostalu poslovnu logiku isplati zadržati na serveru.

Glavni problem ‒ prenosivost programskog rješenja na razne pretraživače. Osnovna dinamika izvođenja web aplikacije u arhitekturi debelog klijenta je na taj način jednaka kao kod arhitekture tankog klijenta, dodana je samo mogućnost procesiranja poslovne logike na samom klijentu. Web stranica posredovana od strane servera na klijenta na taj način pored oznaka HTML sadrži i skriptni kod ili programske objekte koji su zaduženi za prikazivanje korisničkog interfejsa ili izvođenja poslovne logike. Programski objekti ugrađeni u web stranicu mogu djelovati sasvim nezavisno od web stranice, a mogu biti i vođeni od strane odgovarajućeg skriptnog koda.


19

ARHITEKTURA WEB DOSTAVE

Naziv arhitektura web dostave (isporuke) izvire iz osnovnog cilja arhitekture u kojem je web prvenstveno korišten kao dostavni mehanizam za inače klasični objektni distribuirani sistem tipa klijent/server. S jednog gledišta riječ je dakle o distribuiranom sistemu koji uključuje web server, a s drugog gledišta o web aplikaciji koja uključuje distribuirane objekte.

Primjerena za web aplikacije gdje imamo potpunu kontrolu nad postavkama klijenata i mreže. Glavna prednost arhitekture je mogućnost uključivanja komponenti u kontekst web aplikacije. Najznačajnija razlika između arhitekture web dostave te arhitekture tankog i debelog klijenta je metoda komunikacije između klijenta i servera. Arhitektura web dostave pored svih ključnih elemenata arhitekture tankog i debelog klijenta sadrži još sljedeće elemente:

Udaljeni objekt.

Server udaljenih objekata.

Prijenosni protokol za udaljene objekte. Za izgradnju web aplikacije u arhitekturi web dostave možemo koristiti brojne alate,

tehnologije i specifikacije pri čemu su danas najraširenije prethodno opisane tehnologije CORBA, RMI, DCOM in .NET Remoting. Osnovna karakteristika izvođenja web aplikacija u arhitekturi web dostave je korištenje pretraživača kao glavnog inicijalizatora poziva udaljenih objekata.


20

PREDAVANJE 3

HTML

Jezik za označavanje za izradu web stranica. Temelj označavajućeg jezika HTML su oznake (tags). Od preostalog teksta web dokumenta razlikuju se po tome što su zapisane između znakova manje "<" i veće ">". Razlikujemo dvije osnovne vrste oznaka:

samostalne ili prazne oznake koje umetnu dodatnu informaciju na određeno mjesto i

oznake u parovima ili kontejneri. Oni utječu na cjelokupan tekst koji sadržavaju.

Pet razina prilagođenosti web stranica jeziku HTML (0, 1, 2, 3.2, 4)

Razina 0: predstavlja prvu implementaciju jezika HTML 1990. godine, a uključuju samo strukturu HTML jezika, elemente koji su povezani glavom i tijelom dokumenta te komentare.

Razina 1: HTML 1.0 – obrađuje prikazivanje i rad sa slikama te dizajnom znakova. Ta razina već uključuje jedan od najkorisnijih elemenata jezika ‒ obrazac.

Razina 2: obrađuje prikazivanje znakova i elemenata obrasca (polje za unos itd.)

Razina 3.2 (jan. 1997.): sadržava specifikacije tabela i drugih grafičkih elemenata, zvuka i animacija.

Razina 4 i 4.01 (dec. 1997., dec. 1999.): standardizacija okvira, slogovi CSS, umetanje objekata u web dokument, izrada višeslojnih dokumenata itd.

Razina 5 – u razvoju. S obzirom na to da je HTML jezik za označavanje, u njemu koristimo oznake

(eng. tag). Oznake sačinjavaju početak i kraj. Neke oznake sadrže sve već unutar početne oznake te zbog toga ne trebaju krajnju oznaku (npr. <img>) početna: <oznaka> tekst krajnja: </oznaka>


21

Moja prva web stranica

ELEMENTI

Elementi mogu imati atribute – vrijednosti u navodnicima Svi elementi imaju sljedeće atribute: id, class, style, title Primjer – korištenje atributa za link <a href="http://www.w3schools.com">This is a link</a> <head> HTML komentari Naslovi - naslovi su definirani oznakama <h1> .. <h6>. <h1> predstavlja najveći naslov,a <h6> najmanji. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> Odlomci - odlomci su definirani oznakom <p>. Novi redak - oznaka <br> ili <br/> (XHTML) koristi se kada želimo napraviti prelazak u novi redak, ali ne želimo definirati novi odlomak. Novi redak s crtom <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>


22

DIZAJN ZNAKOVA

<b>Ovaj tekst napisan je masnim slovima.</b>= <strong> <i>Ovaj tekst ispisan je kosim slovima.</i>= <em> Tekst koji je ispisan malo niže. <sub> 2 </sub> Tekst koji je ispisan malo više. <sup> 2 </sup>

LINK NA DRUGU WEB STRANICU (LINK)

<a href="url">Tekst linka</a> <a href="mailto:[email protected]?Subject=Hello"> Pošalji mi poštu</a> <a href="url“target="_blank">Tekst linka</a> - otvori u novom prozoru

LINK UNUTAR WEB STRANICE

<a id="tips">Useful Tips Section</a> - ID definira mjesto (sidro) <a href="#tips">Visit the Useful Tips Section</a> - Link unutar dokumenta <a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a> - Link iz drugog dokumenta na sidro

PRIKAZIVANJE SLIKE NA WEB STRANICI

<img src="bmw.gif" alt="Novi BMW“ width="304" height="228">


23

TABLICA

Tablica je definirana oznakom <table>. Za podjelu tablice na retke koristi se oznaka <tr> (table row). Svaki redak sadrži određeni broj podatkovnih ćelija za koje koristimo oznaku <td> (table data). Svaka podatkovna ćelija može sadržavati proizvoljan tekst (koji je moguće dizajnirati s odgovarajućim oznakama), sliku, listu, formu, drugu tablicu itd. U tablicu možemo uključiti i oznaku <th>, koja označava naslovnu ćeliju tablice. Naslov iznad tablice <caption> Primjer tablice: <table border="1"> <tr> <th>Lijevo</th> <th>Desno</th> <th>Po sredini</th> </tr> <tr> <td align="left">Tine Novak</td> <td align="right">3.000 KM</td> <td align="center">muški</td> </tr> <tr> <td align="left">Aleksandra Verbič</td> <td align="right">303.500 KM</td> <td align="center">žena</td> </tr> </table>


24

LISTE

Alineje / nepobrojana lista - <ul> - unordered list <ul> <li>Coffee</li> <li>Milk</li> </ul>

Pobrojana lista - <ol> - ordered list <ol> <li>Coffee</li> <li>Milk</li> </ol>

Opisne liste - <dl>- description list <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

FORMA

Forma ili obrazac je područje koje sadrži različite unosne elemente koji korisniku omogućuju interakciju (unos različitih podataka). Elementi forme su:

Dugmad za naredbe (Submit, Reset): HTML poznaje dva tipova dugmadi za naredbe. Dugme Submit se koristi za unos u obrazac jer njegovom aktivacijom aktivira odgovarajući serverski program koji preuzme podatke za daljnju obradu. Na drugoj strani dugme Reset elemente ponovno podešava na početne vrijednosti.

Jednostavno polje za unos (Text): Najčešće korišten element obrazaca. Zgodan za unošenje različitih podataka od jednostavnog teksta do brojeva i datuma.

Polje za prikriveni unos (Password): Zgodno za unošenje lozinki i drugih prikrivenih informacija.

Prekidači (Radio, Checkbox): Odabirni prekidači djeluju u grupi pri čemu je uvijek uključen tačno jedan, dok su polja za potvrđivanje sasvim samostalna i time nezavisna jedno od drugoga.

Lista (Select): Odabir jedne ili više mogućnosti s unaprijed napisane liste. Liste, kao i prekidači, ne trebaju dopunsko provjeravanje prije slanja u daljnju obradu.

Duži tekst (Textarea): Za unošenje dužeg teksta prije svega za posredovanje različitih komentara, preporuka itd.


25

Sakriveno polje (Hidden): Korisno za posredovanje dodatnih parametara serverskim programima.

Elementi obrasca se u HTML jeziku nalaze unutar para oznaka <FORM>. Oznakama

mogu slijediti još tri parametra koji su značajni za poziv programa na serveru koji će posredovane podatke odgovarajuće obraditi:

Action: URL adresa serverskog programa koji će primiti sadržaj obrasca u daljnju obradu. Method: Način prijenosa podataka kod korištenja protokola HTTP (get ili post). Enctype: Određuje drugačiji način kodiranja posredovanih podataka kao što je podrazumijevani (default) (application/x-www-form-urlencoded) npr. multipart/form-data kod FILE polja.

<form name="ime" action="vnos.asp" method="get/post"> <input type="text/password/checkbox/radio/submit/"> </form>

TEKSTOVNO POLJE

Tekstovno polje (atributi):

name (ime): ime polja za unos na koji se pozivamo na drugoj formi

value (vrijednost): početna vrijednost polja

size (veličina polja): vizualna veličina polja za unos

maxlenght (veličina): najveći broj znakova koje polje kod unosa može primiti itd.

<input type="text" name="prezime">

RADIO DUGMAD

Radio dugmad – koristimo kada od korisnika želimo odabir tačno jedne od ponuđenih mogućnosti. <form> Pol: <br> <input type="radio" name="pol" value="Muški"> Muški <br/> <input type="radio" name="pol" value="Žena"> Žena </form>


26

CHECKBOXE

Checkboxi - Checkboxe koristimo kada od korisnika želimo odabir jedne ili više ponuđenih mogućnosti. <form> <input type="checkbox" name="motor">Vozim motor <br/> <input type="checkbox" name="auto"> Vozim auto </form>

LISTA

Lista – za odabir jedne ili više mogućnosti umjesto radiodugmadi i checkboxa koristimo listu, prije svega kada je odabir mogućnosti velik (npr. odabir pošte, općine, države). Lista počinje oznakom <select>, a dodajemo toliko oznaka <option value="država"> koliko je mogućnosti na raspolaganju. <form> <select name=„markaa" multiple> <option value="volvo">Volvo </option> <option value="saab">Saab </option> <option value="fiat" selected>Fiat </option> <option value="audi">Audi </option> </select> </form>

DUGME TIPA SUBMIT

Dugme tipa submit (<input type="submit") namijenjeno je potvrđivanju unesenih podataka. <form name=„unos" action=„unos1.asp" method="post"> Korisničko ime: <input type="text" name="ime"> <input type="submit" value="Submit"> </form>


27

PODJELA ELEMENATA HTML

Elemente HTML dijelimo na: Blokove: <p>,<h1>,<table>, <ul>…. <div> Retke: <b>, <td>, <a>…. <span>

<div> - kontejner na razini bloka – za grupiranje drugih elemenata <div style="color:red"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div> <span> - kontejner na razini retka – za grupiranje teksta <p>My mother has <span style="color:blue">blue</span> eyes.</p> <iframe> - omogućuje prikazivanje druge web stranice unutar web stranice <iframe src="demo_iframe.htm" width="200" height="200"></iframe> Otklanjanje okvira – atribut frameborder="0“ Iframe kod ciljnog linka <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <a href="http://www.w3schools.com" target="iframe_a"> W3Schools.com</a> Element <head> - kontejner za elemente zaglavlja dokumenta HTML

<base> - određuje osnovni URL za sve relativne URL na stranici <base href="http://www.w3schools.com/images/" target="_blank">

<link> - link između HTML dokumenta i vanjskog izvora – obično za link na CSS dokumente

<link rel="stylesheet" type="text/css" href="mystyle.css”> <style> - definira stilove na razini HTML dokumenta

<style type="text/css"> body {background-color:yellow;} p {color:blue;} </style>

<script>- definira područje, namijenjeno skriptama na strani klijenta (npr. JavaScript) <meta> - navodi metapodatke o HTML dokumentu

Koriste browseri za pravilno prikazivanje i pretraživači (npr. ključne riječi) Ključne riječi

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">


28

Opis sadržaja <meta name="description" content="Free Web tutorials on HTML">

Autor

<meta name="author" content="Hege Refsnes"> Osvježivanje stranice - sekunde

<meta http-equiv="refresh" content="30"> Kodiranje

<meta charset="UTF-8"> - HTML 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> - HTML 4.01

Atribut http-equiv – opredjeljuje zaglavlje HTML dokumenta – podaci: refresh, pragma (keširanje da / ne), content-type, …

MULTIMEDIJSKI SADRŽAJI

U HTML dokument možemo lako uključiti različite multimedijske sadržaje: slike, glazbu, animacije, video… Koriste se 2 elementa - <object> (izvor IE) i <embed> (izvor Netscape) Za izvođenje multimedije pobrinu se plugini (plug-ins) i ActiveX komponente Primjer – Adobe Flash Player (SWF Video) – koristimo oba elementa zbog podrške u različitim pretraživačima

SLIKA

<object width="400" height="40“ classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="SRC" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed> </object>


29

AUDIO

Audio – različiti pretraživači podržavaju različite audioformate (mp3, avi…) embed

<embed height="50" width="100" src="horse.mp3"> Object

<object height="50" width="100" data="horse.mp3"></object> audio – HTML 5

<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>

kombinacija <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>

VIDEO

Video – različiti pretraživači podržavaju različite videoformate (mp4, avi…) embed

<embed src="intro.swf" width="200" height="200"> object

<object data="intro.swf" height="200" width="200"></object> video – HTML 5

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>

Kombinacija: video, object, embed <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <object data="movie.mp4" width="320" height="240">


30

<embed src="movie.swf" width="320" height="240"> </object> </video>

PRIKAZ VIDEA S YOUTUBEA

embed <embed> width="420" height="345“ src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash"> </embed>

iframe <iframe width="420" height="345“ src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe>


31

HTML RASPORED

Raspored elemenata web stranice (layout) određuje kakva je njezina temeljna struktura – oblik. Većina web stranica organizirana je u više kolona odnosno predjela (zaglavlje, meni, sadržaj, noga…). Raspored bi trebao biti jednak za sve web stranice u okviru pojedinog web programskog rješenja. Raspored određujemo s pomoću tablica <table> ili kontejnera <div> (novije).


32

UPOTREBA <TABLE>

<table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> - colspan=“2” – ujedinimo 2 ćelije <h1>Main Title of Web Page</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright © W3Schools.com</td> </tr> </table>

UPOTREBA <DIV>

<div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> - float:left – div rasporedimo na lijevu stranu <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:500px;"> Content goes here</div> - clear:both – resetiramo float <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div>


33

PREDAVANJE 4

CSS TEHNOLOGIJA (CASCADING STYLE

SHEETS)

CSS tehnologija (Cascading Style Sheets) pruža način za određivanje pravila prema kojima će u web dokumentima biti prikazani tekst i grafika. CSS-om možemo određivati oblike znakova, odlomaka, detaljno raspoređivati elemente na ekranu, graditi višeslojne dokumente itd. Kao standard je od strane konzorcija W3C prihvaćena 1996. godine, a već dvije godine kasnije standard je nadograđen u verziju CSS2. Trenutačno je u razvoju specifikacija CSS3. Svako pojedino pravilo CSS sastavljeno je od dva dijela: selektor (HTML oznaka, identifikator ili klasa na koje će pravilo utjecati) i deklaracija (specifikacija pravila). Stilove CSS s obzirom na njihov raspored u web dokumentu dijelimo na:

Linijski: nalazi se unutar svake oznake i utječe samo na tekst koji određuje oznaka.

Ugrađeni ili globalni: ugrađen je direktno u kod web dokumenta. Od ostatka koda odvojen je oznakama <style> i </ style >, može se primjenjivati na svim elementima web dokumenta.

Eksterni odnosno linkovani: stilovi se nalaze u zasebnom dokumentu kojeg u web dokumentu referenciramo oznakom <link>.

Karakterističnost CSS stilova je i njihova hijerarhijska uređenost. Na pojedini element

odnosno dio web dokumenta možemo istovremeno primjenjivati i više različitih slogova. Općenito najviši prioritet imaju linijski, slijede ih ugrađeni, a najniži imaju stilovi na vanjskim dokumentima. Selektor: HTML oznaka p {color:red;text-align:center;} p { color:red; text-align:center;} Komentari /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }


34

Upotreba selektora potomaka (descedant) – temelji se na hierarhiji elemenata dokumenta HTML

Pravilo odabere samo <b> element koji je unutar <p> p b {color:red;}

Pravilo odabere samo <b> element koji je u elementu <li > unutar liste <ul> ul li b {color:red;}

Selektor ID

Selektor ID: koristi se za specifikaciju stila pojedinog elementa Koristi ID atribut HTML oznake, definira se upotrebom # Standardi – HTML dokument ne smije imati dvije oznake s jednakim ID Primjer – donji stil će se aplicirati na HTML oznaku s ID row1 #row1 { height:20px; background-color:#cfcfcf; text-align:center; font-weight:bold; } <tr id="row1">

Selektor CLASS Selektor CLASS: koristi se za specifikaciju stila grupe elemenata. Korištenje CLASS atribut HTML oznake, definira se upotrebom. Primjer – donji stil aplicirat će se na oznake HTML s CLASS zaglavlje .zaglavlje { font-size: 11px; color:#ffffff; font-family:"trebuchet ms"; text-decoration: none; font-weight: bold; background-color: #262e55; } <tr class=„zaglavlje"> - Klase se mogu definirati pojedinim elementima – primjer klasa centar se odnosi na <p> p.center {text-align:center;}


35

LINIJSKI STIL

<p style="color:sienna;margin-left:20px">This is a paragraph.</p> <span style="color:red; ">This is a span.</span>

STILOVI CSS UKLJUČENI U ZAGLAVLJE

DOKUMENTA HTML - <STYLE>

<html> <head> <style> .highlightText {color:black; background:yellow;} </style> </head> <body> <span class="highlightText">This text is highlighted.</span> </body> </html>

LINK NA EKSTERNI CSS DOKUMENT:

<html> <head> <link rel="stylesheet" type="text/css" href="myStyle.css"> </head> <body> <span class="highlightText">This text is highlighted.</span> </body> </html>


36

CSS ‒ POZADINA

Određivanje boje pozadine: background-color Boju definiramo na 3 načina

heksadecimalna HEX vrijednost - "#ff0000"

RGB vrijednost - "rgb(255,0,0)"

naziv - "red“ h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}

SLIKA ZA POZADINU: BACKGROUND-

IMAGE

body { background-image:url('gradient2.png'); background-repeat:repeat-x; } - ponavljanje: repeat-x, repeat-y, repeat body {background:#ffffff url('img_tree.png') no-repeat right top;} – kraći zapis background: background-color background-image background-repeat background-attachment background-position

CSS – TEKST

Boja teksta - color body {color:blue;} Poravnanje: centrirano, desno, lijevo h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}


37

Dekoracija: podcrtan, precrtan, crta iznad teksta h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}

Preoblikovanje – velika, mala slova, p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

Pomicanje teksta p {text-indent:50px;}

CSS FONTOVI

Kod oblikovanja teksta određujemo vrstu fonta, podebljanost, veličinu… Osnovne vrste fontova:

Serif: Times New Roman, Georgia… Sans-serif : Arial, Verdana… Monospace: Courier New, Lucida Console…


38

Vrsta fonta: p{font-family:"Times New Roman", Times, serif;} Stil: p.normal {font-style:normal;} p.italic {font-style:italic;}Zamik teksta Veličina – različite jedinice, px, pt, em h1 {font-size:40px;} – jedinica s pikseli

1 em je jednak trenutnoj veličini fonta – podrazumijevana veličina 16px h1 {font-size:2.5em;} /* 40px/16=2.5em */ 1 em = 16px

CSS – LINKOVI

Oblikovanja elementa <a href… - više stanja:

a:link {color:#FF0000;} /* neposjećen*/

a:visited {color:#00FF00;} /* posjećen*/

a:hover {color:#FF00FF;} /* kurzor iznad teksta */

a:active {color:#0000FF;} /* izabran*/ Primjer – mijenjanje boja pozadine linka <style> a:link {background-color:#B2FF99;} /* unvisited link */ a:visited {background-color:#FFFF85;} /* visited link */ a:hover {background-color:#FF704D;} /* mouse over link */ a:active {background-color:#FF704D;} /* selected link */ </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>


39

CSS - LISTE

Oblikovanja lista – alineje, popis Tip - list-style-type ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} …. <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

Slika - list-style-image ul { list-style-image: url('sqpurple.gif'); }


40

CSS – TABLICE

Oblikovanja tablica – rubovi za tabelu kao cjelinu, naslovne i obične ćelije table, th, td { border: 1px solid black; }….

STISNUTI RUBOVI

table { border-collapse:collapse; } table,th, td { border: 1px solid black; }

ŠIRINA I VISINA

table {width:60%;} th{ height:50px;}


41

CENTRIRANJE TEKSTA U ĆELIJAMA – PO

HORIZONTALI, VERTIKALI

td{ text-align:right; height:50px; vertical-align:bottom;}

PROSTOR IZMEĐU ĆELIJA I RUBOVA –

PADDING

td { padding:15px; }

BOJE RUBOVA, TEKSTA

table, td, th { border:1px solid green; } th { background-color:green; color:white; }


42

CSS – RUBOVI

CSS omogućuje izradu rubova oko HTML elemenata <html> <head> <style> div.ex { width:220px; padding:10px; border:5px solid gray; ‒ skraćeni oblik! margin:0px; } </style> </head> <body> <img src="w3css.gif" width="250" height="250" /> <div class="ex">The picture above is 250px wide. The total width of this element is also 250px.</div> </body> </html>


43

STIL (STYLE), DEBLJINA (WIDTH), BOJA

RUBA (COLOR)

p.one {border-style:solid; border-width:5px; border-color:red;} p.two {border-style:dashed; border-width:medium;} p.three {border-style:inset; border-width:1px;}

RAZLIČITI RUBOVI

p{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;}


44

UDRUŽIVANJE KARAKTERISTIKA:

BORDER-TOP, BORDER-LEFT…

p{ border-style:solid; border-top:thick double #ff0000;}

VANJSKI DIO RUBA (OUTLINE): STIL,

DEBLJINA, BOJA

p.one { width:100px; border:1px solid red; outline-style:dotted; outline-width:14px; outline-color:blue; }

PROSTOR UNUTAR OKVIRA ‒ PADDING

p.padding { background-color:yellow; border:1px solid red; padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; }


45

PROSTOR IZVAN OKVIRA ‒ MARGIN

p.margin { background-color:yellow; border:1px solid red; margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; }

CSS – POZICIONIRANJE

Pozicioniranje omogućuje detaljno pozicioniranje elemenata na ekranu; postoji i mogućnost prekrivanja:

statično,

fiksno,

apsolutno,

relativno Koristimo left, right, top, bottom Statično pozicioniranje Statično pozicioniranje (podrazumijevano / default) – element pozicioniran s obzirom na normalan tok stranice


46

FIKSNO

Fiksno – element pozicioniran s obzirom na prozor pretraživača p.pos_fixed { position:fixed; top:30px; right:5px; } <p class="pos_fixed">Some more text</p>

RELATIVNO

Relativno – element pozicioniran s obzirom na njegovu normalnu poziciju <html> <head> <style> h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } </style> </head> <body> <h2>This is a heading with no position</h2> <h2 class="pos_left">This heading is moved left according to its normal position</h2> <h2 class="pos_right">This heading is moved right according to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>The style "left:20px" adds 20 pixels to the element's original left position.</p> </body>


47

</html>

Kod relativnog pozicioniranja može doći do prekrivanja – ali na primarnoj poziciji ostaje prazan prostor – uključen u osnovni tok <html> <head> <style> h2.pos_top { position:relative; top:-50px; } </style> </head> <body> <h2>This is a heading with no position</h2> <h2 class="pos_top">This heading is moved upwards according to its normal position</h2> <p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p> </body> </html></html>


48

APSOLUTNO

Apsolutno – element pozicioniran s obzirom na prvi superiorni element Izdvojeni su iz osnovnog toka dokumenta <html> <head> <style> h2 { position:absolute; left:100px; top:150px; } </style> </head> <body> <h2>This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body> </html>

Elementi se mogu međusobno prekrivati – nalaze se na različitim razinama. Razinu određuje z-index (može biti pozitivan, negativan ili 0 - podrazumijevan). Što je viši indeks to je element više pomaknut unaprijed. Ako se elementi prekrivaju i indeks nije definiran, na vrh se postavi zadnji element u kodu <head> <style> img { position:absolute;


49

left:0px; top:0px; z-index: -1; } </style> </head> <body> <h1>This is a heading</h1> <img src="w3css.gif" width="100" height="140" /> <p>Because the image has a z-index of -1, it will be placed behind the text.</p> </body>

CSS – FLOATING

Floating – pomicanje elementa lijevo ili desno na način da se ostali elementi uviju oko njega Korisno za umetanje slika i za postavljanje stranica <html> <head> <style> img { float:right; } </style> </head> <body> <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> <p> <img src="logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. ……. This is some text. This is some text. This is some text.


50

</p> </body> </html>

Postavljanje elemenata jednog pored drugog <html> <head> <style> .thumbnail { float:left; width:110px; height:90px; margin:5px; } </style> </head> <body> <h3>Image Gallery</h3> <p>Try resizing the window to see what happens when the images does not have enough room.</p> <img class="thumbnail" src="klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80"> …. <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90"> </body> </html>


51

Brisanje floatinga – clear (both, left, right) <head> <style> .thumbnail {float:left; width:110px; height:90px; margin:5px;} .text_line{ clear:both; margin-bottom:2px;} </style> </head> <body> <h3>Image Gallery</h3> <p>Try resizing the window to see what happens when the images does not have enough room.</p> <img class="thumbnail" src="klematis_small.jpg" width="107" height="90"> … <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90"> <h3 class="text_line">Second row</h3> <img class="thumbnail" src="klematis_small.jpg" width="107" height="90"> … <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90"> </body> </html>


52

CSS – PORAVNAVANJE

Za poravnavanje CSS blokova koriste se različite karakteristike Centralno poravnavanje s margin .center { margin:auto; width:70%; background-color:#b0e0e6;}

Lijevo i desno poravnavanje s position .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6;} Lijevo i desno poravnavanje s float .right { float:right;


53

width:300px; background-color:#b0e0e6; }


54

PREDAVANJE 5

Documents

Web Tehnologije - Predavanja