Multimedija Tema 09-2 Osnove Web Dizajna, Dinamicke Web Stranice

Tema 09-2

Osnove Web dizajna,

dinamičke Web stranicedinamičke Web stranice

M U LT I M E D I JA

dr Vladislav Miš[email protected]

Fakultet za računarstvo i informatiku

2012/2013

Tema 9-2: Osnove Web dizajna,

dinamičke Web stranice

1. Nastanak i verzije HTML

2. Osnovni elementi jezika HTML

3. Kreiranje standardnih elemenata Web stranice

4. Kaskadni stilovi (CSS)4. Kaskadni stilovi (CSS)

5. Veza HTML koda sa drugim jezicima

6. Dinamičke stranice i Web aplikacije

2Multimedija

1. Nastanak i verzije HTML

• Istorija hiperteksta (od 1945)

• Na osnovu standarda za opis stranice SGML (pandan

PostScript-a) na CERN-u je izrađena jednostavnija

verzija jezika za potrebe hiperteksta WWWverzija jezika za potrebe hiperteksta WWW

– Autor jezika HTML je Tim Berners-Lee

• Jezik se još uvek razvija

– aktuelna verzija je HTML5

– jezik XML

Multimedija 3

Ilustracija: Interpretacija HTML koda

<HTML>

<TITLE>Na Drini cuprija </TITLE>

Multimedija 4

<TITLE>Na Drini cuprija </TITLE>

Na Drini cuprija:

<IMG SRC="Cuprija 2.jpg">

Kliknite <A HREF="resume">ovde </A> za povratak.

</HTML>

Šta je HTML

• HTML je opšti jezik za izradu hipertekst dokumenata na World

Wide Web-u

• U praksi, HTML je skup stilova nezavisnih od platforme koji

definišu različite delove Web dokumenata. Stilovi se

označavaju pomoću oznaka (markup tags)označavaju pomoću oznaka (markup tags)

Multimedija 5

HTML dokumenti

• HTML dokumenti su tekstualni fajlovi (plain-text, ASCII) koji se

mogu kreirati u najjednostavnijem tekst-editoru (kao što je

Notepad u sistemu Windows )

<HTML>

⋅ ⋅ ⋅⋅ ⋅ ⋅</HTML>

• Očekuje se da imaju sufiks .html ili .htm

Multimedija 6

HTML editori

• Postoje namenski grafički editori za HTML dokumente (npr.

Microsoft FrontPage, Macromedia/Adobe Dreamweaver)

• Grafički WYSIWYG (What You See Is What You Get) programi

omogućavaju vizuelno kreiranje HTML dokumenata, kao što je

uobičajeno u izradi dokumenata za štampuuobičajeno u izradi dokumenata za štampu

• Ipak je korisno dovoljno poznavati HTML, jer se mogu

upotrebiti svojstva koja određeni editor ne podržava ili ih ne

podržava na željeni način

Multimedija 7

2. Osnovni elementi jezika HTML

• Sintaksa HTML i oznake (markup tags)

• Osnovne HTML oznake

• Oznake u telu (BODY) dokumenta

Multimedija 8

Sintaksa HTML i oznake (markup tags)

• Osnovna sintaksna komponenta strukture HTML dokumenta

je element

• HTML oznake (tags) označavaju elemente koje čitač treba da

prikaže. Sastoje se od:

– leve zagrade (<)– leve zagrade (<)

– naziva

– desne zagrade(>)

• Oznake su obično uparene (npr., oznaka <H1> i </H1>) i

označavaju početak i kraj označavanja.Kraj označavanja se

zadaje istom oznakomm ali se dodaje znak (/) u naziv oznake

• U HTML oznakama se ne razlikuju velika i mala slova (izuzev u

"escape" sekvencama)

Multimedija 9

Primer: Struktura jednostavnog HTML dokumenta

<html>

<head>

<TITLE>Jednostavan HTML dokument</TITLE>

</head>

<body>

<H1>HTML je lako naučiti</H1>

<P>Dobro došli u svet HTML.<P>Dobro došli u svet HTML.

Ovo je prvi paragraf. Iako unesen u dva reda

ipak se prikazuje u jednom, ako ima prostora!</P>

<P>Ovo je drugi paragraf.</P>

</body>

</html>

• Obavezni elementi su uparene oznake <html>, <head>, <title>

i <body>

Multimedija 10

Osnovne oznake (markup tags)

• HTML - na osnovu ove oznake čitač prepoznaje HTML-kodirane

dokumente, koji treba da koriste sufiks .html (ili .htm, za

opretaivne sistema gde imena imaju dužinu 8+3 (DOS))

• HEAD - označava zaglavlje HTML-koda i sadrži naslov (title), koji

se prikazuje u prozoru čitača se prikazuje u prozoru čitača

• TITLE - naziv dokumenta za globalno okruženje, koji se

prikazuje u naslovu prozora čitača.

Pošto se prikazuje u raznim listama (bookmark list,

pretraživači), treba da bude jasan i kratak (do 64 znaka)

• BODY – drugi (obično duži) deo HTML dokumenta se nalazi u

okviru ove oznake

Multimedija 11

Oznake u telu dokumenta (BODY)

• Paragrafi teksta (paragraphs)

• Liste (lists)

• Tekst u fiksnom fontu (preformatted text)

• Oznake formata teksta (character formatting)

• Hiperveze (links)• Hiperveze (links)

• Slike u tekstu (inline images) i pozadine

• Drugi multimedijski elementi (external images, sounds, animations)

• Tabele (tables)

• Web forme (fill-out forms)

Multimedija 12

3. Kreiranje standardnih elemenata

Web stranice

1. Tekst

2. Lista

3. Tabela

4. Forma4. Forma

5. Slika

6. Hiperveza

7. Komentar

Multimedija 13

3.1 Tekst

• Paragraf

<P>Dobro došli u svet HTML.

Ovo je prvi paragraf. Iako unesen u dva reda

ipak se prikazuje u jednom, ako ima prostora!</P>

<P>Ovo je drugi paragraf.</P><P>Ovo je drugi paragraf.</P>

• Centrirani paragraf<P ALIGN=CENTER>

Ovo je centrirani paragraf.

</P>

daje

Ovo je centrirani paragraf.

Multimedija 14

Format u tekstu

Tekst HTML format

Bold <b>Bold</b>

Strong <strong>Strong</strong>

Italic <i>Italic</i>

Underline <u>Underline</u>

Strike <strike>Strike</strike>

H2O H<sub>2</sub>O

23=8 2<sup>3</sup>=8

15Multimedija

3.2 Liste

• Postoji neuređena i uređena lista, standardna lista definicija,

kao i ugneždena lista (različite kombinacije)

• Neuređena lista (unordered list)<UL>

<LI> jabuke<LI> jabuke

<LI> banane

<LI> kruške

</UL>

daje:

• jabuke • banane • kruške

Multimedija 16

Liste

• Uređena lista (ordered list)<OL>

<LI> pomorandže

<LI> breskve

<LI> grožđe

</OL>

daje:

1. pomorandže 2. breskve 3. grožđe

Multimedija 17

3.3 Tabela

<TABLE>



<CAPTION> caption contents </CAPTION>



<TR>



<TH> first header cell contents </TH>

<TR>



<TD> first row, first cell contents </TD>

<TD> first row, last cell contents </TD>

</TR>



<TR> <TH> first header cell contents </TH>

<TH> last header cell contents </TH>

</TR>



<TR>



<TD> last row, first cell contents </TD>

<TD> last row, last cell contents </TD>

</TR>



</TABLE>



Multimedija 18

Primer: HTML kod i izgled tabele

<table border="2">

<tr>

<th><font face="Verdana" size="2">Ime</font></th>

<th><font face="Verdana" size="2">Prezime</font></th>

<th><font face="Verdana" size="2">Adresa</font></th>

</tr>

<tr>

<td><font face="Verdana" size="2">Petar</font></td><td><font face="Verdana" size="2">Petar</font></td>

<td><font face="Verdana" size="2">Petrović</font></td>

<td><font face="Verdana" size="2">Raje Baničića bb</font></td>

</tr>

</table>

3.4 Forma

• <FORM>. . . </FORM>

– Definiše formu za unos podataka (atributi: ACTION, METHOD, ENCTYPE)

• Elementi forme između oznaka mogu biti:

– <INPUT>

• Definiše polje forme (atributi: NAME, TYPE, VALUE, CHECKED, SIZE, MAXLENGTH; TYPE Definiše polje forme (atributi: NAME, TYPE, VALUE, CHECKED, SIZE, MAXLENGTH; TYPE

može biti: text, button, checkbox)

– <SELECT> . . . </SELECT>

• Definiše listu izbora (atributi: NAME, MULTIPLE, SIZE)

– <OPTION>

• Definiše elemente liste izbora (atribut:SELECTED)

– <TEXTAREA> . . . </TEXTAREA>

• Definiše prozor za unos teksta (atributi: NAME, ROWS, COLS)

Multimedija 20

Element forme: Tekst polje i polje za unos šifre

• Polja za unos tekstualnih podataka su u okviru taga <INPUT>

– Korisnik unosi tekstualne informacije koje se kasnije šalju na server

– za unos teksta se koristi atribut type sa vrednošću text (za komandne tastere

button)

– ako je potrebno sakriti tekst koji korisnik unosi u tekst polje, umesto vrednosti

text treba koristiti vrednost passwordtext treba koristiti vrednost password

<INPUT TYPE="text" NAME="ime_prez" VALUE="Unesite ime i prezime" SIZE="30">

• atribut value definiše početni tekst koji će se pojaviti u tekst polju

• atributa size zadaje maksimalan broj karaktera koji se mogu uneti u okviru ovog

elementa od strane korisnika

• atribut name definiše ime elementa pomoću koga kod aplikacije (npr. JavaScript,

serverski deo aplikacije) može pristupiti ili menjati unetu vrednost u tekst polju (sva tri

atributa opciona)

21Multimedija

Element forme: Polja za izbor

• Koristi se kada je potrebno da korisnik neštoizabere/potvrdi

• Izbor se definiše korišćenjem taga <INPUT type=”checkbox”>

<I>Koje programske jezike poznajete?</I><BR>

<UL type="square">

<LI> <INPUT type="checkbox"name="Paskal"> Paskal</LI>

<LI> <INPUT type="checkbox"name="Java"> Java</LI>

</UL>

• U primeru se koristi i atribut name, koji omogućava pristup koda aplikacija ovom elementu

(radi provere vrednosti ili definisanja da li je polje za potvrdu potvrđeno ili ne)

• Radio tasteri (izbor samo jedne opcije ili nijedne) koriste tip radio

22Multimedija

Element forme: Padajuća lista

• Padajuća lista je HTML element koji korisniku omogućava izbor jedne od

više mogućnosti

• Padajuća lista se definiše pomoću taga <SELECT> i opcija <OPTION>

<B><I>Moj omiljeni predmet na 1. godini je: </I></B>

<select name="predmeti">

<option>Analiza 1</option>

<option>Analiza 2</option>

<option>ORT</option>

</select>

Multimedija 23

Primer: HTML forma za unos podataka

Multimedija 24

Primer: HTML kod forme za unos podataka

<html> <head><title>Forma za unos</title></head>

<body>

<FORM METHOD=POST ACTION="http://www.fpi.ac.yu/cgi-bin/post-query">

Molimo da popunite ovaj mali upitnik:

<P>Naziv vaše organizacije? <INPUT NAME="org" TYPE=text SIZE="48">

<P>Koji Web čitač koristite?

<OL><OL>

<LI>Internet Explorer <INPUT NAME="browsers" TYPE=checkbox VALUE="iexplore">

<LI>Netscape Navigator <INPUT NAME="browsers" TYPE=checkbox VALUE="netscape">

<LI>Mozilla Firefox <INPUT NAME="browsers" TYPE=checkbox VALUE="mozilla">

<LI>Ostali (naziv) <INPUT NAME="others" SIZE=40>

</OL>

<P><INPUT TYPE=submit> <INPUT TYPE=reset>

</FORM>

</body>

</html>

Multimedija 25

3.5 Slika

• Slika (image)

<IMG SRC=ImageName ALT="tekstualni naziv" ...>

• Centriranje slike<p ALIGN=CENTER>

<IMG SRC = “Slika01.gif" ALT=“Primorsko mesto"><IMG SRC = “Slika01.gif" ALT=“Primorsko mesto">

</p>

Multimedija 26

Atributi slike

• ALIGN - atribut za poravnavanje slike u odnosu na margine može

imati vrednosti

– za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM

– za horizontalno poravnjavanje: LEFT, CENTER, RIGHT

• WIDTH (širina) i HEIGHT (visina) - atributi za dimenzionisanje slike• WIDTH (širina) i HEIGHT (visina) - atributi za dimenzionisanje slike

• HSPACE i VSPACE - atributi koji opisuju horizontalni/vertikalni

razmak slike u odnosu na okružujući tekst

• BORDER- atribut koji opisuje širinu okvira slike

• ALT- atribut koji na mestu neučitane slike prikazuje komentar

27Multimedija

Primer: Poravnanje slike i teksta

<IMG SRC="Logo.gif" ALIGN="TOP"> xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxxxxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xxx xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxxxxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx xx xxxxxxxxxxxx xxxxxx xxxxxxxxxxxx xxxxx

• Daje :

xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxxxxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx

x xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxxxxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx xx xxxxxxxxxxxx xxxxx

3.6 Hiperveza

• Oznaka za hipervezu <A> (anchor)

1. <A (prazno mesto iza A)

2. Adresa dokumenta HREF="ime html fajla" nakon čega ide zagrada (>)

3. Tekst opisa hiperveze

4. Kraj oznake hiperveze </A>

• Primer:

<A HREF="Tema09.html">09. HTML kod</A>

Multimedija 29

3.7 Komentar

• Obeležava deo teksta koji se ne interpretira



• Osim komentarisanja sadržaja HTML dokumenta, omogućava

sakrivanje koda (konvencija), koje se vrši kompatibilnosti sa

starim verzijama Web čitačastarim verzijama Web čitača

Multimedija 30

Još neki elementi HTML

• HR - horizontalna linija

<HR>

• DIV - element za podelu stranice na sekcije (raspoređivanje)

<DIV>

......

</DIV>

• Opšti atributi

id=, style=, class=, ...

• META oznake

Multimedija 31

Upotreba oznake META za pretraživače

• Meta oznake se koriste da pomognu pretraživačima u indeksiranju

stranice, posebno ako stranica ima frejmove

• Postavljaju se između <head> i </head > tagova dokumenta

– name = "..." je oznaka tipa meta oznake

– content = "..." je opis sadržaja za pretraživača (takođe postoji meta oznaka

keywords)keywords)

<head>

<title>Primer meta oznake</title>

<meta name="ime" content="opis" />

</head>

32Multimedija

Primer: Primena META oznaka

• Primena META oznaka u zaglavlju stranice:

<head>

<meta name="description" content="Multimedija lekcije" />

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

<meta name="author" content="Vladislav" /><meta name="author" content="Vladislav" />

<meta charset="UTF-8" />

</head>

33Multimedija

4. Kaskadni stilovi (CSS)

• Proširenje osnovnog skupa HTML oznaka kojim se uvode

stilovi u opis stranice

• Umesto ponavljanja kompletne definicije, npr.

<FONT COLOR="#FF0000" FACE="Verdana, Arial, Helvetica, sans-

serif"><STRONG>Ovo je tekst</STRONG></FONT>serif"><STRONG>Ovo je tekst</STRONG></FONT>

koristi se naziv unapred definisanog stila:

<p class="crveniTekst">Ovo je tekst</p>

• Podrška za CSS je ugrađena u sve moderne čitače

Multimedija 34

Sintaksa

• CSS element se sastoji od tri glavna dela

objekat property:vrednost [;property:vrednost]

– objekat - HTML element koji se menja

– property - atribut koji se menja

– vrednost - vrednost atributa– vrednost - vrednost atributa

• CSS elementi se mogu definisati

– za više objekata istovremeno ...

h1,h2,h3,h4,h5,h6 color:blue

– u okviru jedne stranice

– u posebnom dokumentu, sa sufiksom .css, koji se povezuje pomoću

oznake LINK u zaglavlju dokumenta:

<LINK href="mojiStilovi.css" rel="stylesheet" type="text/css">

Primer: Definicija novog stila

• Definicija se unosi u zaglavlje dokumenta ili poseban .css fajl

<STYLE TYPE="TEXT/CSS">



</STYLE>

Multimedija 36

Primer: Redefinisanje standardnih stilova

• Promena standardnog stila zaglavlja h1

h1 font-family: Garamond, "Times New Roman", serif;

font-size: 200%;

• Promena margina cele stranice - body• Promena margina cele stranice - body

body margin-left: 15%; margin-right: 15%;

Multimedija 37

Primer: Definicija stila u posebnom dokumentu

• Primer

– Definicija stilova je u fajlu primer.css

<html>

<head>

<link rel="stylesheet"

type="text/css" href="primer.css">

</head>

<body>

<h1>Prvi naslov</h1>

h1

font-family: sans-serif;

color: #ff0000;

<h1>Prvi naslov</h1>

<p>Tekst zmedju prva dva naslova</p>

<h1>Drugi naslov</h1>

<p>Tekst zmedju drugog i treceg

naslova</p>

<h1>Treci naslov</h1>

<p>Tekst zmedju posle treceg

naslova</p>

</body>

</html>

Najvažniji atributi CSS elemenata

• border-color

• border-style

• border-width

• background-color

• background-image

• background-repeat

• font-style

• font-weight

• letter-spacing

• link

• text-align

• text-decoration• background-repeat

• color

• hover

• link-style-type

• link-style-image

• font-family

• font-size

• text-decoration

• line-height

• text-indent

• text-transform

• vertical-align

• visited

Stilovi formata teksta

• Stilovi formatiranja teksta obuhvataju

– text-color

– text-align

– text-decoration

– text-transform– text-transform

– text-indent

• Primer:

40Multimedija

Napomena: Box model

• Svaki element koji se prikaže na stranici pomoću CSS zauzima

određeni pravougli prostor, čija se ukupna veličina određuje

na osnovu hijerarhije dimenzija (tzv. box model)

– sadržaj elemenata (content) obuhvaćen je detaljima prikaza i relacija

prema drugime elementima: spoljašnja margina (margin area), ivice

elementa (border) i odstojanje (padding area)elementa (border) i odstojanje (padding area)

41Multimedija

CSS pozicioniranje

• Pozicioniranje elemenata1. statičko je podrazumevajuće,

uvek prema redosledu

elemenata stranice

2. fiksno je relativno u odnodu na

prozor čitača

• Primeri:– apsolutna pozicija naslova u prozoru

h2

position:absolute;

left:100px;

top:150px;prozor čitača

3. apsolutno je relativno u

odnosu na prvi hijerarhijski

nadređen element (ili <HTML>)

4. s preklapanjem (overlapping) -

drugačije od normalnog

redosleda elemenata stranice,

npr. iznad ili ispod nekog

top:150px;

– preklapanje, slika ispod teksta

img

position:absolute;

left:0px;

top:0px;

z-index:-1

Primer: CSS Galerija slika

• Uz pomoć CSS se može kreirati galerija slika:<html>

<head>

<style type="text/css">

div.img

margin:2px;

border:1px solid #0000ff;

height:auto;

width:auto;

div.desc

text-align:center;

font-weight:normal;

width:120px;

margin:2px;

</style>

</head>

width:auto;

float:left;

text-align:center;

div.img img

display:inline;

margin:3px;

border:1px solid #ffffff;

div.img a:hover img

border:1px solid #0000ff;

<body>

<div class="img">

<a target="_blank" href="klematis_big.htm">

<img src="klematis_small.jpg" alt="Klematis"

width="110" height="90" />

</a>

<div class="desc">Ovde staviti opis slike 1</div>

</div>

.

.

.

</body>

</html>

5.Veza HTML koda sa drugim jezicima

• U kod stranice se mogu umetnuti elementi koda drugih jezika

(embeded languages), koje interpretira Web čitač ili softver

Web servera

<SCRIPT LANGUAGE= oznakajezika>

umetnuti programski kod

</SCRIPT></SCRIPT>

• Web server dinamički menja sadržaj stranice, tako što ih

zameni rezultatom izvršavanja koda u jeziku HTML

– Web čitač tipično interpretira kod u jeziku JavaScript

– Različiti Web serveri interpretiraju kod u nekom od brojnih serverskih

jezika npr. VBScript, JavaScript, C#, Java, PHP, ColdFusion Markup

Language

Multimedija 44

6. Dinamičke stranice i Web aplikacije

1. Dinamičke Web stranice

2. Web serveri

3. Sistemi za upravljanje sadržajem (CMS)

4. Web aplikacije4. Web aplikacije

Multimedija 45

6.1 Dinamičke Web stranice

• Dinamičke Web stranice nemaju definisan konkretan sadržaj

(delimično ili potpuno)

• Sadržaj se definiše u trenutku kada korisnik putem čitača

zahteva stranicu od Web servera

– Web server dinamički menja sadržaj stranice prilikom svakog obraćanja – Web server dinamički menja sadržaj stranice prilikom svakog obraćanja

Web čitača

– Web čitač interpretira klijentski kod (HTML i klijentski jezik) i prikazuje

konačni sadržaj stranice

Multimedija 46

Proširenje HTML koda drugim jezicima

• Koriste se umetnuti elementi drugih programskih jezika

(embeded languages)

– Serverski kod interpretira softver Web servera i zamenjuje elementima

jezika HTML prilikom svakog obraćanja Web čitača (serverski jezici, npr.

JavaScript, VBScript, JScript, C#, Java, PHP)

– Klijentski kod interpretira Web čitač (klijentski jezici, npr. JavaScript)

Multimedija 47

Statičke Web stranice

1 – Web čitač

zahteva statičku

stranicu

Multimedija 48

2 – Web server

nalazi stranicu

3 – Web server šalje

stranicu čitaču

Dinamičke Web stranice

1 – Web čitač traži

dinamičku stranicu (.asp,

.php,..)

5 – Web server

isporučuje konačnu

stranicu Web čitaču

(koji još interpretira

Multimedija 49

2 – Web server nalazi

stranicu i prenosi je aplik.

serveru

3 – Aplik. server parsira

stranicu radi uputstava i

dovršava je

4 – Aplikativni server

vraća konačnu stranicu

Web serveru


klijentski kod)

1 – Web čitač traži

dinamičku stranicu

(.asp, .php,..)

2 – Web server nalazi

stranicu i prenosi je

aplikativnom serveru

3 – Aplik. server

8 – Aplikativni server

umeće podatke u


9 – Web server šalje

konačnu stranicu čitaču


klijentski kod)

Pristup bazamapodataka

3 – Aplik. server

parsira stranicu radi

uputstava

4 – Aplik. server šalje

upit drajveru baze

podataka

5 –Program za vezu

sa bazom podataka

izvršava upit

6 – Program za vezu sa

bazom podataka dobija

rezultat (skup slogova)

7 – Drajver prenosi

rezultat aplikativnom

serveru


Web serveru

Multimedija 50

Primer: Promena stranice na klijentu(1) početni sadržaj stranice

<HTML>

<HEAD><TITLE>Pozdrav po vremenu</TITLE></HEAD>

<BODY> <FONT size=+3><B>

<SCRIPT language=Javascript>



</SCRIPT>

</BODY>

</HTML>

Multimedija 51

Primer: Promena stranice na klijentu(2) akcije Web čitača

1. Web čitač interpretira umetnuti skript, kreira i izračunava promenljive sistemsko_vreme, vreme_sati i poruka

2. Evaluira izraz vreme_sati +"h. "+poruka

3. Upiše vrednost izraza u HTML tekst stranice

4. Stranica ima konačni oblik: 4. Stranica ima konačni oblik:

<HTML>

<HEAD><TITLE>Pozdrav po vremenu</TITLE></HEAD>

<BODY> <FONT size=+3><B>

23h. Dobro veče!

</BODY>

</HTML>

Multimedija 52

Primer: Promena stranice na klijentu(3) prikaz rezultata

• Web čitač prikazuje stranicu (ispisuje konačni tekst, koji zavisi

od sistemskog vremena):

Multimedija 53

6.2 Web serveri

• Računari koji isporučuju Web stranice na zahtev Web čitača

(nakon unosa URL ili IP adrese)

• Neophodan serverski softver (2012)

– komercijalni

• Microsoft Internet Information Server (IIS) - 15%• Microsoft Internet Information Server (IIS) - 15%

• Google Web Server (GWS) - 4%

– besplatni (open-source)

• Apache - 62%

• Nginx (engine x) - 11%

• Lighttpd - 1%

Multimedija 54

Komunikacija aplikacije s Web serverom- atributi taga FORM

Najvažniji atributi taga <FORM> su:

• ACTION koji sadrži adresu (URL) programa na serveru

• METHOD kojim je opisana metoda prenosa argumenata programa.

Ovaj atribut može imati vrednosti GET ili POST

– GET - vrednosti parametara koje se šalju ka serveru navode se u okviru adrese programa

koji se poziva, npr. http://server.com/ServerskiProgramskiModul?parametar1=88 gde je

ServerskiProgramski Modul modul koji se poziva na serveru i kome se šalje vrednost ServerskiProgramski Modul modul koji se poziva na serveru i kome se šalje vrednost

promenljive parametar1 kao 88. Metod GET ima ograničen broj parametara: mora važiti

da je dužina URL + dužina parametara < 1KB

– POST - vrednosti elemenata forme šalje u okviru zaglavlja poruke koju šalje na server,

tako da nisu vidljivi korisniku i nema ograničenja u količini podataka

• Programski modul na serveru bi trebalo da zna kojim metodom prima podatke od

strane klijenta

U praksi češće se koristi metod POST, posebno za podatke koji ne bi trebalo da

budu javni, kao što su korisničko ime i šifra, matični broj, broj kreditne kartice i sl.

Multimedija 55

Serverske tehnologije i programski jezici

• ASP - Active Server Pages (server VBScript ili JScript, klijent

JavaScript)

• ASP.NET (server: Visual Basic, C#, F# , klijent JavaScript)

• JSP - Java Server Pages (Java)

• PHP - PHP Hypertext Preprocessor (PHP)• PHP - PHP Hypertext Preprocessor (PHP)

• ColdFusion (ColdFusion Markup Language, CFML)

Multimedija 56

Primeri serverskih interpretativnih jezika

• ASP

– jezik VBScript ili JScript

– Microsoft COM objekti, integracija sa

drugim MS proizvodima

– Web serveri - IIS (Internet

Information Server)

<%@ Language=VBScript %>

<HTML>

<HEAD>

<TITLE>Tekst iz ASP</TITLE>

</HEAD>

<BODY>Information Server)

Podrška za druge Web servere

pomoću softverskih paketa

nezavisnih proizvođača (ChiliSoft,

iASP), koji nisu besplatni

• .NET

– programski jezik C# (sličan C) i

funkcionalni F#

<BODY>

<P>

<% Response.Write("ASP štampa") %>

</BODY>

</HTML>

Multimedija 57


• JSP

– slična koncepcija kao ASP, ali je programski jezik Java

– servlet - kompaktni Java objekt, kompilirana klasa, samo

jednom se prevodi, čvrsto povezan sa serverom

– Web serveri - IIS (Internet Information Server) i Apache-– Web serveri - IIS (Internet Information Server) i Apache-

Tomcat

– open source, besplatan

– nema besplatnu tehničku podršku

Multimedija 58


• PHP

– poseban programski jezik

(podseća na C)

– radi na svim platformama:

Windows, Linux, UNIX


<HTML>

<HEAD>

<TITLE>Tekst iz PHP</TITLE>

</HEAD>

<BODY>


Information Server) i Apache

(open source)

– open source, potpuno

besplatan

– nema besplatnu tehničku

podršku

<P align=center>

<?php

echo "PHP štampa";

?>

</BODY>

</HTML>

Multimedija 59

6.3 Sistemi za upravljanje sadržajem (CMS)

• Upravljanje složenim i obimnim Web lokacijama u velikim organizacijama,

koje su više informacioni sistemi nego Web prezentacije

– izmena sadržaja i dizajna za neprogramere (timski) i administracija korisnika i

sadržaja

• Jedna ili više serverskih tehnologija (platformi)

– komercijalni sistemi: – komercijalni sistemi:

• Microsoft SharePoint

(uključuje Content Management Server)

• EllisLab ExpressionEngine (PHP/MySQL)

– nekomercijalni ili besplatni sistemi

• WordPress (Apache,IIS/PHP/MySQL)

• Joomla (Apache,IIS/PHP/MySQL, MSSQL, PostgreSQL, Oracle, SQLite)

• Drupal(Apache,IIS,.../PHP/MySQL,Oracle,PostgreSQL,MSSQL)

– sopstveni (namenski)

Multimedija 60

6.4 Web aplikacije

• Web aplikacija je Web sajt koji sadrži statičke i dinamičke

HTML stranice smeštene na Web server

• Dinamičke stranice nemaju definisan konkretan sadržaj

(delimično ili potpuno). Sadržaj se definiše u trenutku kada

korisnik putem čitača zahteva stranicu od Web serverakorisnik putem čitača zahteva stranicu od Web servera

• Primeri (Web portali): http://www.mtel.ba

https://www.unicreditbank.ba

http://www.belex.rs

Multimedija 61

Ilustracija: Portal poslovnih (berzanskih) informacija

Multimedija 62

Kreiranje dinamičkih Web stranicapomoću uzorka (template)

• Zavisi od izabrane serverske tehnologije i repertoara uzoraka

izabranog HTML editora

– kreiranje Web sajta određenog tipa (serverska tehnologija)

– kreiranje pojedinačne dinamičke stranice određene strukture, namene

(kod) i grafičkog izgleda

• Primeri: na vežbama

– Adobe Dreamweaver (samo layout!)

– Microsoft Expression Web/Blend/Design/Encoder

– Microsoft Visual Studio 2012 for Web

– Microsoft Web Matrix

Multimedija 63

Proces izrade Web aplikacijekoja koristi dinamičke stranice

1. Konfigurisanje računarskog sistema

2. Konfigurisanje HTML editora za upotrebu izabranog

aplikativnog servera

3. Povezivanje sa bazom podataka

4. Kreiranje stranica (koda)4. Kreiranje stranica (koda)

– Kod se može uneti direktno ili pomoću vizuelnog alata, koji koristi

generator koda (razvojna okruženja i generatori Web aplikacija)

Multimedija 64

Automatizacija kreiranja Web aplikacija

• Razvojna okruženja, npr.

– IBM Rational Rose / WebSphere

– Oracle JDeveloper ADF

– Microsoft Visual Studio 2010/2012

• Generatori Web aplikacija, npr.• Generatori Web aplikacija, npr.

– CodeCharge Studio

Multimedija 65

Primer: Razvojna okruženja

• IBM Rational System Architect

Multimedija 66


• Oracle JDeveloper ADF

Multimedija 67


• Microsoft Visual Studio

Multimedija 68

Primer: Generatori Web aplikacija

• CodeCharge Studio

Multimedija 69

Literatura

1. Miškovic V., Multimedija (prezentacije), Univerzitet Sinergija, 2013

2. Cvetković D., Popović R., Marković M., Multimedija, Univerzitet

Singidunum, Beograd, 2010

3. Miškovic V., Multimedija - praktikum za laboratorijske vežbe, Univerzitet

Singidunum, Beograd, 2008

4. Steinmetz R., Nahrstedt K., Multimedia Systems, Springer, 20044. Steinmetz R., Nahrstedt K., Multimedia Systems, Springer, 2004

5. Lynch P. J., Horton S.,Web Style Guide: Basic Design Principles for Creating

Web Sites, 3rd Ed, Yale University, 2009 http://www.webstyleguide.com

6. Niederst Robbins J., Learning Web Design, O’Reilly Media, Inc, 2007

7. Powers D., The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP, Apress, 2009

8. Graf H., Building Websites with Joomla! 1.5, Packt Publishing Ltd., Birmingham, UK, 2008

70Multimedija

Literatura (Web)

• World Wide Web Consortium www.w3.org

• www.wikipedia.org

• http://www.w3.org/TR/1999/REC-html401-19991224

• http://archive.ncsa.uiuc.edu/General/Internet/

WWW/HTMLPrimerAll.html

• http://www.w3.org/MarkUp/Guide/Advanced• http://www.w3.org/MarkUp/Guide/Advanced

• http://www.webstyleguide.com

• http://www.useit.com

• http://www.w3schools.com

• http://www.wpdfd.com

• http://trends.builtwith.com/cms

71Multimedija

dr Vladislav Miškovic

Multimedija

Tema 09-2: Osnove Web dizajna, dinamičke Web stranice

Pitanja?Pitanja?

72Multimedija

Documents

Multimedija Tema 09-2 Osnove Web Dizajna, Dinamicke Web Stranice