multimedija tema 09-2 osnove web dizajna, dinamicke web stranice
DESCRIPTION
cccTRANSCRIPT
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>
<!-- start of table definition -->
<CAPTION> caption contents </CAPTION>
<!-- caption definition -->
<TR>
<!-- start of header row definition -->
<TH> first header cell contents </TH>
<TR>
<!-- start of first row definition -->
<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR>
<!-- end of first row definition -->
<TR> <TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR>
<!-- end of header row definition -->
<TR>
<!-- start of last row definition -->
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR>
<!-- end of last row definition -->
</TABLE>
<!-- end of table definition -->
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
<!-- Tekst komentara -->
• 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">
<!--
.crveniTekst
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-WEIGHT: bold;
COLOR: #FF0000;
-->
</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
(koji još interpretira
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
stranicu i prenosi je
9 – Web server šalje
konačnu stranicu čitaču
(koji još interpretira
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
stranicu i prenosi je
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>
<!--
sistemsko_vreme = new Date()
vreme_sati = sistemsko_vreme.getHours()vreme_sati = sistemsko_vreme.getHours()
if ( vreme_sati < 7 ) poruka = "Ustali ste <B>stvarno</B> rano!"
if ( vreme_sati > 6 && vreme_sati <12 ) poruka = "Dobro jutro!"
if ( vreme_sati > 11 && vreme_sati <18 ) poruka = "Dobar dan!"
if ( vreme_sati >17 ) poruka = "Dobro veče!"
document.write(vreme_sati+"h. "+ poruka)
// -->
</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
Primeri serverskih interpretativnih jezika
• 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
Primeri serverskih interpretativnih jezika
• PHP
– poseban programski jezik
(podseća na C)
– radi na svim platformama:
Windows, Linux, UNIX
– Web serveri - IIS (Internet
<HTML>
<HEAD>
<TITLE>Tekst iz PHP</TITLE>
</HEAD>
<BODY>
– Web serveri - IIS (Internet
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
Primer: Razvojna okruženja
• Oracle JDeveloper ADF
Multimedija 67
Primer: Razvojna okruženja
• 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