predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... ·...
TRANSCRIPT
![Page 1: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/1.jpg)
Tema 09
Osnove Veb dizajna,
dinamičke Veb straniceMULTIMEDIJA
dr Vladislav Miš[email protected]
Fakultet za računarstvo i informatiku
2017/2018
![Page 2: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/2.jpg)
Tema 9: Osnove Web dizajna, dinamičke Web stranice
1. Uvod
2. Razvoj Veb sajtova
3. Jezik HTML
4. Jezik kaskadnih stilova (CSS)
5. Dinamički Veb sajtovi
2
![Page 3: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/3.jpg)
1. Uvod
• Veb dizajn
• Veb stranica (Web page)
• Osnovni aspekti Veb dizajna
• Princip funkcionalnosti (usability principle)
3
![Page 4: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/4.jpg)
Veb dizajn
• Dizajn (design) je kreiranje nečega što ima namenu
• Veb dizajn– Izbor i usklađivanje raspoloživih komponenti radi kreiranja izgleda i
strukture Web stranice [www.marketingterms.com]
– Multidisciplinarni rad na planiranju i proizvodnji Web sajtova, uključujući, ali ne ograničavajući se na tehnički razvoj, informacione strukture, vizuelni dizajn i isporuku u mreži [Powell, 2002]
• Veb authoring - kreiranje sadržaja za Veb
• Prvi Veb dizajner bio je Tim Berners-Lee, koji je 1990-1991.
godine kreirao prvi Web sajt na Internetu info.cern.ch– Tim Berners-Lee je predsednik W3C (World Wide Web Consortium),
međunarodne organizacije standardizaciju Weba
4
![Page 5: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/5.jpg)
Veb stranica (Web page)
• Veb stranica je dokument na World Wide WebuSvaka Web stranica se identifikuje jedinstvenom URL adresom
[www.webopedia.com]
• Dokument ili informacioni resurs koji je pogodan za World Wide Web, kome se može pristupiti preko Veb pretraživača ikoji se može prikazati na ekranu ili mobilnom uređaju[www.wikipedia.org]– informacije su obično u HTML/XHTML formatu i omogućavaju prelaz na
druge Web stranice preko hipertekst veza
– Veb stranice često u svoj konačni izgled uključuju i druge resurse, kao što su definicije stilova (CSS), skriptovi i slike
5
![Page 6: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/6.jpg)
Veb sajt (Web site/website)
• Skup Veb stranica, koje obično sadrže međusobne hiperveze, koje su dostupne pojedincima, firmama, obrazovnim institucijama, vladama i organizacijama putem mreže[www.merriam-webster.com]
• Skup povezanih Veb stranica, slika, videa i drugih digitalnih sadržaja, koji se adresiraju u odnosu na zajedničku URL adresu, koja se obično sastoji samo od imena domena ili IP adrese i korena putanje u IP mreži [www.wikipedia.org]– Veb sajt se nalazi (hostuje) na najmanje jednom Veb serveru, koji je
dostupan preko mreže kao što su Internet i privatne lokalne mreže
6
![Page 7: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/7.jpg)
Osnovni aspekti Veb dizajna
1. Svrha - razlog postojanja sajta, verovatno najvažniji deo Web dizajna
2. Sadržaj (Content) - oblik organizovanja sadržaja sajta. Zavisi od načina na koji je tekst napisan i kako je organizovan, predstavljen i strukturiran, koristeći tehnologije kao što je HTML
3. Izgled (Visuals) - vizuelni izgled ekrana koji sajt koristi. Raspored se obično vrši korišćenjem HTML, CSS, Flash i može da sadrži grafičke elemente kao ukras ili za navigaciju. Vizuelni aspekt sajta je najočigledniji aspekat Web
dizajna, ali nije jedini i najvažniji
4. Tehnologija - korišćenje različitih Veb tehnologija, kao što su HTML i CSS, i različitih interaktivnih elemenata sajta, posebno onih korišćenjem tehnike programiranja (npr. na klijentu JavaScript, a na serveru Java servlet)
5. Isporuka - brzina i pouzdanost isporuke sajta preko Interneta ili lokalne mreže.
7
![Page 8: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/8.jpg)
Princip funkcionalnosti (usability principle)
• Princip funkcionalnosti promoviše Jakob Nielsen [www.useit.com]
• Odgovara na pitanje: šta je važnije, vizualni stil ili funkcionalnost Web sajta?– svaki proizvod može da funkcioniše bez posebnog vizualnog stila, ali ne
može bez dobrog dizajna
– istraživanja pokazuju da uspešnost Veb sajta zavisi pre svega od kvaliteta sadržaja (content is king)
• Veb dizajn se koncentriše na sadržaj, odnosno informacionu
arhitekturu: pomoć posetiocima/čitaocima da brzo pronađu željeni sadržaj
8
![Page 9: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/9.jpg)
2. Razvoj Veb sajtova
1. Proces razvoja Veb sajta
2. Osnovne Veb tehnologije
3. Alati za izradu Veb sajtova
4. Dizajn Veb stranice
5. Problem učitavanja Veb stranice
9
![Page 10: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/10.jpg)
2.1 Proces razvoja Veb sajta
• Osnovni koraci razvoja Veb sajta
• Organizacija razvoja Veb sajta
• Specifičnosti razvoja Veb sajtova/aplikacija
10
![Page 11: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/11.jpg)
Osnovni koraci razvoja Veb sajta
• Osnovni koraci razvoja Veb sajta su:
1. Definisanje i planiranje sajta
2. Izrada informacione arhitekture Veb sajta
3. Projektovanje sajta (Design)
4. Izrada sajta (Construction)
5. Promocija sajta (Marketing)
6. Praćenje, ocenjivanje i održavanje
11
![Page 12: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/12.jpg)
Izrada informacione arhitekture
• Informaciona arhitektura je organizacija informacija– podela po celinama
– strukturiranje po važnosti i nivou detaljnosti
• Organizacija zavisi od osnovne namene (svrhe)– obuka
– e-učenje
– aplikacije/e-trgovina
– zabava
– ...
12
![Page 13: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/13.jpg)
Važna pitanja razvoja:
poverenje korisnika i trajnost Veb sajta
• Na poverenje korisnika Veb sajta utiču:– kvalitet dizajna
– dobra navigacija
– razumljivost, korektan i aktuelan sadržaj
– povezivanje s ostatkom Veba
– bezbednost Veb sajta (security)
– personalizacija
• Veb stranice treba dizajnirati da traju, jer ih koriste:– korisničke oznake (bookmarks)
– linkovi sa drugih lokacija
– baze podataka pretraživača
Stari sadržaji povećavaju vrednost Veb sajta
13
![Page 14: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/14.jpg)
Organizacija razvoja Veb sajta: Veb sajt je softverski proizvod
• Životni ciklus softvera
1. Definisanje problema
2. Analiza zahteva/specifikacije
3. Dizajn (projektovanje)
4. Implementacija i testiranje
5. Isporuka, eksploatacija i održavanje
• Osnovni pristupi
– Sekvencijalni model (waterfall)
– Iterativni model
– kombinovani modeli
• Procesa razvoja Veb sajtova/aplikacija ima niz specifičnosti u odnosu
na razvoj klasičnih i ugrađenih aplikacija
14
![Page 15: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/15.jpg)
Specifičnosti razvoja Veb sajtova/aplikacija
1. Veoma kratko vreme razvoja, zbog pritiska kompetitivnosti
2. Upravljanje promenljivim zahtevima, zbog brzih promena okruženja
3. Fiksni rokovi isporuke, a fleksibilan sadržaj aplikacije, koji se stalno
menja u skladu s promenama zahteva i po potrebi pomera u
buduće verzije
4. Paralelni razvoj više verzija, radi skraćenja vremena razvoja
5. Višestruka upotreba i integracija modula zahteva povezivanje
razvoja Veb sajtova/aplikacija organizacije i integraciju s poslovnim
procesima
6. Prilagođavanje složenosti organizacije procesa razvoja nivou
složenosti Veb aplikacije
15
![Page 16: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/16.jpg)
2.2 Osnovne Veb tehnologije
• HTML 5
• CSS 3
• XML
• JavaScript
• Semantički Veb
16
![Page 17: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/17.jpg)
2.3 Alati za izradu Veb sajtova
• Programski editori
• Tekstualno orijentisani HTML editori
• Grafički orijentisani HTML editori (WYSIWYG)
• Sistemi za upravljanje sadržajem (CMS)
• Integrisana okruženja za razvoj softvera
• Softverski alati za obradu multimedijskih sadržaja
17
![Page 18: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/18.jpg)
Grafički orijentisani HTML editori (WYSIWYG)
• Adobe/Macromedia
– DreamWeaver CS6
• Microsoft– Visual Studio
2012/2013/2015/2017Express for Web
– Expression 4 Web
– Web Matrix
• Ostali
– Aptana Studio
– KompoZer
– Google Designer
18
![Page 19: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/19.jpg)
Ilustracija: Adobe/Macromedia Dreamweaver
19
radna površina
palete alatki
osnovni podaci
svojstva objekata
gru
pa
pan
ela
ekra
nsk
e d
imen
zije
ekranske dimenzije
HTML hijerarhija
http://tv.adobe.com/watch/learn-dreamweaver-cs6/what-is-dreamweaver-cs6/
![Page 20: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/20.jpg)
Ilustracija: Adobe Dreamweaver responzivni uzorci rasporeda (layout)
20
![Page 21: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/21.jpg)
Sistemi za upravljanje sadržajem (CMS)
• Programska okruženja za razvoj i upravljanje složenim i obimnim Veb
sajtovima (informacionim sistemima)
– omogućavaju brži razvoj, izmenu sadržaja i dizajna za neprogramere (timski) i administraciju korisnika i Web sadržaja
• Jedna ili više serverskih tehnologija (platformi)
– komercijalni sistemi
• Microsoft SharePoint
(uključuje Content Management Server)
• EllisLab ExpressionEngine (PHP/MySQL)
– nekomercijalni ili besplatni sistemi
• WordPress (Apache,IIS/PHP/MySQL)
• Drupal (Apache,IIS,.../PHP/MySQL,Oracle,PostgreSQL,MSSQL)
• Magento (Apache,IIS/PHP/MySQL)
– sopstveni (namenski) sistemi, kao jedna faza razvoja Web aplikacije
21
100.000
najposećenijih
sajtova
![Page 22: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/22.jpg)
Primer: Sistem za upravljanje sadržajem otvorenog koda Wordpress
• Nastao je 2003. kao PHP platforma za izradu Web sajtova tipa blog
• Najpopularniji Web CMS za izgradnju različitih tipova Web sajtova
– razvoj se zasniva na nezavisnim modulima (preko 27.000 dodataka)
– jednostavan administratorski interfejs
– brzo se uči i ima jasnu i preglednu dokumentaciju za početnike
– brzi razvoj aplikacija pomoću tema i dodataka (plugins)
– velika i aktivna zajednica korisnika
– velika fleksibilnost korišćenjem gotovih tema, dodataka, informera (widgets) i udica (hooks)
22
![Page 23: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/23.jpg)
Primer: Sistem za upravljanje sadržajem otvorenog koda Drupal
• Nastao kao PHP sistem otvorenog koda 2001. godine, postao popularan nakon američkih izbora 2004. godine
• Namenjen razvoju svih kategorija Veb sajtova, od jednostavnih blogova do složenih) Veb aplikacija (enterprise level)– koriste ga korporacije, medijske i
izdavačke kuće, državna uprava, neprofitne organizacije, škole i pojedinci (Veb sajt Bele kuće)
– veliki broj funkcija u osnovnoj verziji (Drupal Core)
– koristi različite baze podataka (PHP Data Objects)
23
![Page 24: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/24.jpg)
2.4 Dizajn Veb stranice
• Standardni elementi Veb stranice
• Kreiranje standardnih elemenata Veb stranice
24
![Page 25: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/25.jpg)
Standardni elementi Veb stranice
• Prema organizaciji sadržaja– zaglavlje i sadržaj
– tekst, u više nivoa
– multimedija, sa kontekstnim vezama na druge stranice
– navigacija: veze sa drugim stranicama
– ostali elementi: npr. reklame
• Prema tipu medija– Tekst, slika, zvuk, video, ...
• Prema vrsti HTML elementa (HTML > 3.2)– Tekst, okvir (frame), tabela, Web
forma, slika, ...
25
![Page 26: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/26.jpg)
Kreiranje standardnih elemenataVeb stranice
• Grafički izgled stranice
– važe slični principi oblikovanja kao za štampane dokumente
– svaka stranica treba da ima:
• informativni naziv (postaje tekst u referencama na stranicu)
• identitet autora (pojedinac/institucija)
• datum kreiranja/izmene
• najmanje jedan link na lokalnu meni-stranicu i osnovnu stranicu lokacije (home page)
• Hijerarhija prikazivanja elemenata (redosled)
• Performanse učitavanja i prikazivanja
26
![Page 27: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/27.jpg)
Grafički izgled stranice: raspored (layout)
• Raspored elemenata
a) Principi umetničke kompozicije: prvo se obrati pažnja na centar i uglove
b) Podela vizuelnog polja: centar pažnje je na trećinama celine
c) Navike čitalaca zavise od kulture, npr. zapadna pisma se čitaju s leva prema dole (Gutenbergovo Z)
d) Kontinualno kretanje pogleda prilikom čitanja: korisnici retko vraćaju pogled na početak (Jakob Nielsenovo F)
27
a) centar i uglovi b) mreža 3x3 c) GutenbergovoZ
d) kontinuitetčitanja (F)
![Page 28: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/28.jpg)
Grafički izgled stranice:raspored (layout)
• Stečene navike posetilaca
– posetioci pojedine Web sadržaje očekuju na određenim mestima
• link na osnovnu stranicu
• polja za pretraživanje
• navigaciju
• korpu za kupovinu
• pomoć
• informacije o sajtu
– tipična organizacija stranice
28
![Page 29: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/29.jpg)
Grafički izgled stranice: ostalo
• Tipografija
– font, veličina, razmak, boje
– https://www.google.com/fonts
• Boje
– skup boja, Web boje #RRGGBB
• Grafika
– rasterske slike, vektorske slike,
video
• Navigacija
– meniji, linkovi i tasteri
29
![Page 30: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/30.jpg)
Tabela naziva i kodova boja
30
![Page 31: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/31.jpg)
Testiranje ispravnosti Veb stranice (validacija)
• U okviru razvojnog alata (grafičkog HTML editora)
• Pomoću posebnih programa za testiranje, npr. W3C
Markup Validation Service
– oznaka W3C na stranici
31
![Page 32: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/32.jpg)
2. 5 Problem učitavanja Veb stranice
• Vreme učitavanja Veb stranice
• Tehnike optimizacije vremena učitavanja
• Problem dostupnosti
32
![Page 33: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/33.jpg)
Vreme učitavanja stranice
• Vreme učitavanja stranice (loading time) je tehnički faktor od presudnog značaja za uspešnost kreiranja Veb stranice– najvažnije je da korisnik dovoljno brzo vidi korisnu informaciju na
ekranu: konačna veličina stranice je manje značajna ako korisnik može brzo da preduzme neku akciju
33
<html>
<title> Fakultet za računarstvo
i informatiku </title>
Smer Programiranje i
projektovanje:
<img src="pp.gif">
Smer Računarska grafika i
dizajn:
<img src="gd.gif">
Kliknite <a HREF="resume">ovde
</a> za povratak.
</html>
Vreme (s)
HTML
pp.gif
gd.gif
0 1 2 3 4 5
Prikaz učitavanja elemenata
Veb stranice
pp.gif
gd.gif
HTML
![Page 34: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/34.jpg)
Statistički pokazatelji značaja vremena učitavanja
• Korisnici Interneta u velikom broju napuštaju sajtove koji se učitavaju suviše sporo, zbunjuju ih ili nedovoljno angažuju– nakon odustajanja od jedne lokacije, više od 1/3 korisnika odustaje od
Internet kupovine, a samo 1/7 nastavlja potragu na drugoj lokacijiThe Economic Impacts of Unacceptable Web Site Download Speeds, Zona Research, Inc., April1999
– pravilo 8 sekundi: prosečno vreme za koje treba korisnika ubediti da ostane na sajtu (vrenma za koje oko 50% posetilaca napušta sajt)
– Prihvatljivo vreme učitavanja:
34
Osnovni faktori prihvatljivosti Prihvatljivo Srednje vreme odziva servera < 0,5sBroj elemenata < 20Vreme učitavanja < 30s
Veličina stranice < 64K
Vreme učitavanja(s) Ocena
<10 Excellent
10-15 Very good
15-20 Good
20-25 Adequate
25-30 Slow
>30 Unacceptable
Design for performance: Analysis of download times for page elements suggests ways to optimize, IBM High-
Volume Web Site team, May 2000
![Page 35: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/35.jpg)
Faktori koji utičuna vreme učitavanja Veb stranice
• Ukupna veličina i kompleksnost Veb stranice
– Najviše utiču rasterske slike i video (image size), <64K
• kompresija (JPEG, GIF, PNG)
• progresivno prikazivanje (PNG)
– Uticaj broja elemenata, <20 (razbijanje velikih slika)
• Uticaj "keširanja" (caching)
– lokalno i na ISP serveru (serveru provajdera)
• Propusnost mreže (internet bandwidth)– veliki promet u standardno vreme (zagušenje, congestion)
– brzina spojnih veza ISP servera (servera provajdera)
– rutiranje - sposobnost ISP servera da izabere najbolji put kroz mrežu (PING vreme)
35
![Page 36: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/36.jpg)
Tehnike optimizacije vremena učitavanja Veb stranice
• Smanjenje veličine elemenata stranice
– kompresija (JPEG, GIF, PNG)
– progresivno prikazivanje (PNG)
• Smanjenje broja elemenata stranice (<20)
• Smanjenje kompleksnosti elemenata stranice (tabele..)
• Upravljanje brojem konekcija/rekonekcija (<4 po str.)
• Smanjenje broja servera kojima se pristupa
• Uklanjanje praznog prostora u .html fajlovima (posebno onih koje se štite kriptovanjem - slabija kompresija)
• Eksplicitno upravljanje učitavanjem objekata
• Pažljivo korišćenje mehanizama zaštite (separacija)
36
![Page 37: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/37.jpg)
Ilustracija: Sekvencijalno i progresivno prikazivanje slike
37
1055 B 8% 2522 B 19% 4228 B 32% 7441 B 57% 13095 B 100%
Sekvencijalno kodirana slika - potrebno čekati učitavanje gotovo cele slike da se shvati sadržaj
1055 B 8% 2522 B 19% 4228 B 32% 7441 B 57% 13095 B 100%
Progresivno kodirana slika - odmah se vidi celina
(progressive JPEG, interlaced GIF, PNG)
![Page 38: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/38.jpg)
Problem dostupnosti
• Dostupnost (accessibility)
– sadržaj Veb sajta mora da bude dostupan osobama s ograničenjima
– za Veb sajtove javnih institucija, dostupnost je zakonski regulisana u velikom broju zemalja
• Testiranje stranice na dostupnost
– pregledom od strane čoveka
– automatizovano
• u toku razvoja Web sajta, npr. pomoću Adobe Dreamweaver funkcijeFile/Check Page/Check Accessibility
• pomoću namenskih alata za proveru i popravku Web stranica - lista na www.w3.org/WAI/ER/existingtools.html
38
![Page 39: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/39.jpg)
3. Jezik HTML
1. Nastanak i verzije HTML
2. Osnovni elementi jezika HTML
3. Tekst i slike u Veb stranici
4. Ostali multimedijski elementi
5. Hiperveze, tabele i Veb forme
6. Još neki elementi jezika HTML
7. Oznaka META za pretraživače
39
![Page 40: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/40.jpg)
3.1 Nastanak i verzije HTML
• Na osnovu standarda za opis stranice SGML (GML/IBM, 1969) na institutu CERN izrađena je jednostavnija verzija jezika, za potrebe hiperteksta na WWW– jezik za opis stranice u stonom izdavaštvu je Adobe PostScript
• HTML je opšti jezik za izradu hipertekst dokumenata na World
Wide Webu
– u praksi, HTML je skup stilova nezavisnih od platforme koji definišu različite delove Veb dokumenata. Stilovi teksta označavaju se oznakama(markup tags)
• Jezik HTML se još uvek razvija
– aktuelna verzija je HTML5
– jezik XML
40
![Page 41: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/41.jpg)
Ilustracija: Jezik PostScript
• Jezik za opis vektorske grafike i stranica elektronskih dokumenata
• Industrijski standard štamparstva i obrade slika (Adobe, 1982)
– stono izdavaštvo (Desktop Publishing, DTP)
– Apple LaserWriter, 1985
%!PS
/Courier % name the desired font
20 selectfont % choose the size in points and establish
% the font as the current one
72 500 moveto % position the current point at
% coordinates 72, 500 (the origin is at the
% lower-left corner of the page)
(Hello world!) show % stroke the text in parentheses
showpage % print all on the page
41
![Page 42: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/42.jpg)
HTML 5
• Aktuelni Veb standard
• Samo jedan tip dokumenta <!DOCTYPE html>
• Neka od novih svojstava– element <canvas> za 2D crtanje
– elementi <video> i <audio> za reprodukciju multimedije
– podrška za lokalnu permanantnu memoriju
– elementi za specifične sadržaje dokumenta<article>, <footer>, <header>, <nav>, <section>
– kontrole formi - calendar, date, time, email, url, search
– WebSQL API specifikacija za pristup SQL bazama podataka iz koda u jeziku JavaScript (openDatabase, transaction, executeSQL)
42
![Page 43: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/43.jpg)
Neki od novih elemenata HTML 5
section istaknuti deo sadržaja ili sadržaj cele Web stranice
article deo informacija na stranici, npr. novosti ili blog post
header gornje zaglavlje stranice, logotipi ili druga zaglavlja stranica
nav posebna sekcija stranice za navigaciju, npr. meni, putanje i sl.
aside deo stranice s delimično relevantnim sadržajem, npr. reklame
figure deo stranice za grafički prikaz informacija, grafikon ili video
footerdonje zaglavlje stranice, koje obično sadrži napomene autoru,
zaštiti intelektualne svojine i privatnosti informacija
video element za upravljanje prikazom video materijala
43
![Page 44: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/44.jpg)
XML
• Jezik XML predstavlja univerzalni način strukturiranja dokumenata i podataka na Webu– nema unapred definisan skup oznaka, već omogućava definisanje
individualnog formata zapisa
– formalno definisan i proširiv
• Od verzije HTML5, standardni HTML predstavlja jednu od varijanti jezika XML
• Varijante XML formata su XML, XHTML, SVG, MathML, XSL, RDF, Atom i RSS
44
![Page 45: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/45.jpg)
HTML dokumenti
• HTML dokumenti su tekstualni fajlovi (plain-text, ASCII) koji se mogu kreirati u najjednostavnijem tekst-editoru, kao što je npr. Notepad u sistemu Windows
<html>
</html>
• Očekuje se da imaju sufiks .html ili .htm
• Grafički HTML editori omogućavaju potpuno vizuelno kreiranje HTML dokumenata, ali je poznavanje jezika HTML i dalje korisno– mogu se upotrebiti svojstva koja određeni editor ne podržava ili ih ne
podržava na željeni način, programiranje itd.
45
![Page 46: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/46.jpg)
3.2 Osnovni elementi jezika HTML
• Sintaksa HTML i oznake (markup tags)
• Osnovne HTML oznake
• Oznake u telu dokumenta (BODY)
46
![Page 47: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/47.jpg)
Sintaksa HTML i oznake (markup tags)
• Osnovna sintaksna komponenta strukture HTML dokumenta je element
• HTML oznake (tags) označavaju elemente koje Web čitač treba da prikaže. Sastoje se od leve zagrade (<), naziva i desne zagrade(>)
• Oznake su obično uparene (npr., oznake <h1> i </h1>) i označavaju početak i kraj označavanja. Kraj označavanja se zadaje istom oznakom, ali se u naziv oznake dodaje znak (/)
• U HTML oznakama se ne razlikuju velika i mala slova (izuzev u escape sekvencama)
47
![Page 48: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/48.jpg)
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.
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 HTML dokumenta su uparene oznake<html>, <head>, <title> i <body>
48
![Page 49: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/49.jpg)
Standard HTML
• Standardni HTML elementi– običan tekst
– paragraf <p> </p>
– slika <img>
– stil teksta <h1> </h1>,... <h6> </h6>
– nabrajanje <ul> </ul>, <ol> </ol>, <li>
– hiperlink <a> </a>
– tabela <table> </table>, <th></th>, <tr> </tr>, <td></td>
– forma <form> </form>, <input>, <select>, ...
• Atributi– npr. za slike: <img src="logo.gif" align="top" alt="Logo">
• HTML 5 tutorial www.w3schools.com/html5/html5_intro.asp
![Page 50: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/50.jpg)
Osnovne oznake (markup tags)
• html - oznaka na osnovu koje čitač prepoznaje HTML-kodirane dokumente, koji treba da koriste sufiks .html
– htm za operativne sistema gde imena imaju dužinu 8+3 znaka (npr. DOS)
• head - označava zaglavlje HTML-koda i sadrži naslov (title), koji 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
50
![Page 51: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/51.jpg)
Oznake u telu dokumenta (BODY)
• Paragrafi teksta (paragraphs)
• Liste (lists)
• Tekst u fiksnom fontu (preformatted text) i oznake formata teksta (character formatting)
• Slike u tekstu (inline images) i pozadine
• Drugi multimedijski elementi (external images, sounds, animations)
• Hiperveze (links)
• Tabele (tables)
• Veb forme (fill-out forms)
51
![Page 52: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/52.jpg)
3.3 Tekst i slike u Veb stranici
• Tekst
• Lista
• Slika
• Komentar
52
![Page 53: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/53.jpg)
Tekst
• Oznaka 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>
• Primer formatiranja: centrirani paragraf
<p align=center>
Ovo je centrirani paragraf.
</p>
dajeOvo je centrirani paragraf.
53
![Page 54: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/54.jpg)
HTML format u samom tekstu
Izgled teksta HTML format u tekstu
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
54
![Page 55: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/55.jpg)
Liste
• Postoji neuređena, uređena i standardna lista definicija
• Liste mogu biti ugneždene (različite kombinacije)
• Neuređena lista (unordered list)
<ul>
<li> jedan
<li> dva
<li> tri
</ul>
daje:
• jedan • dva • tri
55
![Page 56: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/56.jpg)
Liste
• Uređena lista (ordered list)
<ol>
<li> jedan
<li> dva
<li> tri
</ol>
daje:
1. jedan 2. dva 3. tri
56
![Page 57: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/57.jpg)
Slika
• Oznaka slike (image)
<img src=nazivslike alt="tekstualni naziv" ...>
• Primer: horizontalno centriranje slike<p align=center>
<img src = "Slika01.gif" alt="Primorsko mesto">
</p>
57
![Page 58: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/58.jpg)
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 određivanje dimenzija 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
58
![Page 59: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/59.jpg)
Primer: Poravnanje slike i teksta
<img src="Logo.gif" align="top"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam libero velit, ultricies vestibulum metus porttitor id. Etiam id urna sed nisl maximus congue quis nec est. Cras ultrices id nisl vel consequat.
• Daje :
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Quisque aliquam libero velit, ultricies vestibulum metus
porttitor id. Etiam id urna sed nisl maximus congue quis nec est. Cras ultrices id nisl vel consequat.
59
![Page 60: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/60.jpg)
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ča
60
![Page 61: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/61.jpg)
3.4 Ostali multimedijski elementi
• Elementi za dodavanje i reprodukciju zvuka, videa i animacija
<audio> </audio>
<video> </video>
<embed> </embed>
<object> </object>
61
![Page 62: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/62.jpg)
3.5 Hiperveze, tabele i Veb forme
• Hiperveza
• Tabela
• Veb forma
62
![Page 63: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/63.jpg)
Hiperveza
• Oznaka za hipervezu <a> (anchor) ima strukturu:
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>
• Daje:
09. HTML kod
63
![Page 64: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/64.jpg)
Tabela
<table>
<!-- početak definicije tabele -->
<caption> sadržaj zaglavlja </caption>
<!-- definicija zaglavlja -->
<tr>
<!-- početak defin. reda zaglavlja -->
<th> sadržaj prve ćelije reda zagl.
</th>
<th> sadržaj prve ćelije reda zagl.
</th>
</tr>
<!-- kraj definicije reda zaglavlja -->
<tr>
<!-- početak definicije prvog reda -->
<td> prvi red, sadržaj prve ćelije
</td>
<td> prvi red, sadržaj poslednje
ćelije
</tr>
<!-- kraj definicije prvog reda -->
<tr>
<!-- početak def. poslednjeg reda -->
<td> poslednji red, sadržaj prve
ćelije </td>
<td> poslednji red, sadržaj
poslednje ćelije s </td>
</tr>
<!-- kraj def. def. poslednjeg reda -->
</table>
<!-- kraj definicije tabele -->
64
![Page 65: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/65.jpg)
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">Petrović</font></td>
<td><font face="Verdana" size="2">Raje Baničića bb</font></td>
</tr>
</table>
65
![Page 66: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/66.jpg)
Veb forma
• <form> ... </form>
definiše formu za unos podataka (atributi: action, method, enctype)
• HTML elementi između oznaka forme mogu biti:<input>
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)
66
![Page 67: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/67.jpg)
Elementi 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 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)
67
![Page 68: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/68.jpg)
Elementi 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="Java"> Java</li>
<li> <input type="checkbox"name="Javascript"> Javascript</li>
<li> <input type="checkbox"name="Python"> Python</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
68
![Page 69: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/69.jpg)
Elementi 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 prvoj godini je: </i></b>
<select name="predmeti">
<option>Matematika</option>
<option>Informatika</option>
<option>ORT</option>
</select>
69
![Page 70: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/70.jpg)
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>
<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>
70
![Page 71: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/71.jpg)
3.6 Još neki elementi jezika HTML
• HR - horizontalna linija
<hr>
• DIV - element za podelu stranice na sekcije (raspoređivanje)<div>
...
</div>
• Opšti atributi id=, style=, class=, ...
71
![Page 72: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/72.jpg)
3.7 Oznaka META za pretraživače
• Meta oznake se koriste da pomognu pretraživačima uindeksiranju 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če (takođe postoji metaoznaka keywords)
<head>
<title>Format meta oznake</title>
<meta name="ime" content="opis" />
</head>
72
![Page 73: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/73.jpg)
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 charset="UTF-8" />
</head>
73
![Page 74: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/74.jpg)
4. Jezik kaskadnih stilova (CSS)
1. Pojam CSS
2. Sintaksa CSS
74
![Page 75: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/75.jpg)
4.1 Pojam CSS
• Proširenje osnovnog skupa HTML oznaka kojim se uvode stilovi u opis stranice
• Umesto ponavljanja kompletne definicije stila u tekstu, npr.<font color=blue face="Verdana,Arial,Helvetica,sans-
serif">
<strong>Ovo je tekst</strong>
</font>
koristi se naziv unapred definisanog stila:<p class="plaviTekst">Ovo je tekst</p>
• Definicija CSS stila je jednostavna deklaracija u zaglavlju dokumenta ili u posebnom CSS fajlu
• Podrška za CSS je ugrađena u sve moderne čitače
75
![Page 76: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/76.jpg)
4.2 Sintaksa CSS
• CSS element se sastoji od tri glavna dela
objekt svojstvo:vrednost [; svojstvo:vrednost]
– objekat - HTML element koji se menja
– svojstvo (property) - atribut koji se menja
– 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, navodi u zaglavlju 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">
76
![Page 77: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/77.jpg)
Primer: Definicija novog stila i redefinisanje standardnog stila
• Definicija se unosi u zaglavlje dokumenta ili poseban .css fajl<style type="text/css">
<!--
.crveniTekst
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
-->
</style>
• Redefinisanje standardnih stilova– promena standardnog stila zaglavlja h1h1 font-family: Garamond, "Times New Roman", serif;
font-size: 200%;
– promena margina cele stranice - bodybody margin-left: 15%; margin-right: 15%;
77
![Page 78: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/78.jpg)
Primer Definicija stila u posebnom dokumentu
• Primer– Definicija stila h1 je u fajlu primer.css
78
![Page 79: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/79.jpg)
Najvažniji atributi CSS elemenata
• border-color
• border-style
• border-width
• background-color
• background-image
• background-repeat
• color
• hover
• link-style-type
• link-style-image
• font-family
• font-size
• font-style
• font-weight
• letter-spacing
• link
• line-height
• text-align
• text-decoration
• text-indent
• text-transform
• vertical-align
• visited
79
![Page 80: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/80.jpg)
Ilustracija: Stilovi formata teksta
• Stilovi formatiranja teksta obuhvataju atribute
– text-color
– text-align
– text-decoration
– text-transform
– text-indent
• Primer: – paragraf s uvlačenjem, obostrano poravnat, s razmakom između slova
80
![Page 81: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/81.jpg)
Napomena: Box model
• Svaki element koji se prikaže na Veb stranici pomoću CSS zauzima određeni pravougli prostor (box), čija se ukupna veličina određuje na osnovu hijerarhije dimenzija (tzv. box
model)
• Sadržaj elemenata (content) obuhvaćen je opisom prikaza i relacijama prema drugim elementima: – spoljašnja margina (margin area)
– ivice elementa (border) i
– odstojanje (padding area)
81
![Page 82: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/82.jpg)
Pozicioniranje elemenata u jeziku CSS
1. Statičko je podrazumevajuće, uvek prema redosledu elemenata stranice
2. Fiksno je relativno u odnodu na 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 prikaza elemenata stranice, npr. iznad ili ispod nekog
• Primeri:
– apsolutna pozicija naslova u prozoru
h2
position:absolute;
left:100px;
top:150px;
– preklapanje, slika je ispod teksta
img
position:absolute;
left:0px;
top:0px;
z-index:-1
82
![Page 83: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/83.jpg)
Primer: Galerija slika pomoću CSS
• Jednostavna galerija slika korišćenjem CSS:<html>
<head>
<style type="text/css">
div.img
margin:2px;
border:1px solid #0000ff;
height:auto;
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;
div.desc
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
</style>
</head>
<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
slike1</div>
</div>
.
.
.
</body>
</html>
83
![Page 84: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/84.jpg)
5. Dinamički Veb sajtovi
1. Dinamičke Veb stranice
2. Veb serveri
3. Sistemi za upravljanje sadržajem (CMS)
4. Veb aplikacije
84
![Page 85: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/85.jpg)
5.1 Dinamičke Veb stranice
• Dinamičke Veb 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 Veb servera
– Veb server dinamički menja sadržaj stranice prilikom svakog obraćanja Veb čitača
– Veb čitač interpretira klijentski kod (HTML i klijentski jezik) i prikazuje konačni sadržaj stranice
85
![Page 86: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/86.jpg)
Veza HTML koda s drugim jezicima
• U kod stranice se mogu umetnuti elementi koda drugih jezika (embeded languages), koje interpretira Veb čitač ili softver Veb servera
<script language= oznakajezika>
umetnuti programski kod
</script>
• Veb server dinamički menja sadržaj stranice, tako što ih zameni rezultatom izvršavanja koda u jeziku HTML
– Klijentski kod interpretira Veb čitač (klijentski jezici, npr. JavaScript)
– Serverski kod interpretira softver Web servera i zamenjuje elementima jezika HTML prilikom svakog obraćanja Veb čitača (serverski jezici, npr. JavaScript, VBScript, JScript, C#, Java, PHP)
86
![Page 87: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/87.jpg)
Statičke i dinamičke Web stranice
87
3 – Web server šalje stranicu čitaču
1 – Web čitač zahteva statičku stranicu
2 – Web server nalazi stranicu
1 – Web čitač traži dinamičku stranicu (.asp, .php,..)
2 – Web server nalazi stranicu i prenosi je aplik. serveru
3 – Aplik. server parsira stranicu radi uputstava i dovršava je
5 – Web server isporučuje konačnu stranicu Web čitaču (koji još
interpretira
klijentski kod)
4 – Aplikativniserver vraća konačnu stranicu Web serveru
![Page 88: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/88.jpg)
Primer: Početni sadržaj dinamičke klijentske 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()
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>
88
![Page 89: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/89.jpg)
Primer: Akcije Veb čitača i konačni sadržaj dinamičke klijentske stranice
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:
<html>
<head><title>Pozdrav po vremenu</title></head>
<body> <font size=+3><b>
23h. Dobro veče!
</body>
</html>
89
![Page 90: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/90.jpg)
Primer: Prikaz konačnog sadržaja dinamičke klijentske stranice
• Veb čitač prikazuje stranicu i ispisuje konačni tekst, koji zavisi od sistemskog vremena:
90
![Page 91: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/91.jpg)
1 – Web čitač traži dinamičku stranicu (.asp, .php,..)
2 – Web server nalazi stranicu i prenosi je aplikativnom serveru
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
8 – Aplikativni server umeće podatke u stranicu i prenosi je Web serveru
9 – Web server šalje konačnu stranicu čitaču (koji još interpretira
klijentski kod)
Pristup bazamapodataka
91
![Page 92: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/92.jpg)
5.2 Veb serveri
• Računari koji isporučuju Web stranice na zahtev Veb čitača (nakon unosa URL ili IP adrese)
• Neophodan serverski softver; slika: svi sajtovi, mart 2018– komercijalni
• Microsoft Internet Information Server (IIS) - 35,8%
• Google Web Server (GWS) - 1,23%
– besplatni (open-source)
• Apache - 26,23%
• Nginx (engine x) - 23,11%
92
![Page 93: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/93.jpg)
Komunikacija aplikacije s Web serverom:atributi oznake FORM
Najvažniji atributi ozneke <FORM> su:
• action - sadrži adresu programa na serveru (URL)
• method - opis načina prenosa argumenata programu (vrednosti get ili post)
– get - vrednosti parametara koje se šalju serveru deo su adrese programa koji se poziva,
npr. http://server.com/ServerskiProgramskiModul?parametar1=88 gde je
ServerskiProgramskiModul program koji se poziva i kome se šalje vrednost 88 promenljive
parametar1. Metod get ima ograničen broj parametara, jer je (dužina URL + dužina svih
parametara) < 2KB (takođe se pamti u kešu, istoriji, kao bookmark)
– post - vrednosti elemenata forme deo su zaglavlja poruke koja se šalje na server, tako da
nisu vidljivi korisniku i nema ograničenja u količini podataka
• Programski modul na serveru treba da zna kojim metodom prima podatke od
strane klijenta
U praksi se češće 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.
93
![Page 94: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/94.jpg)
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)
• ColdFusion (ColdFusion Markup Language, CFML)
94
![Page 95: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/95.jpg)
5.3 Sistemi za upravljanje sadržajem (CMS)
• Programska okruženja za razvoj i upravljanje složenim i obimnim Web sajtovima (informacionim sistemima)
– omogućavaju brži razvoj, izmenu sadržaja i dizajna za neprogramere (timski) i administraciju korisnika i Web sadržaja
• Jedna ili više serverskih tehnologija (platformi)
– komercijalni sistemi
• Microsoft SharePoint
(uključuje Content Management Server)
• EllisLab ExpressionEngine (PHP/MySQL)
– nekomercijalni ili besplatni sistemi
• WordPress (Apache,IIS/PHP/MySQL)
• Drupal (Apache,IIS,.../PHP/MySQL,Oracle,PostgreSQL,MSSQL)
– sopstveni (namenski)
95
![Page 96: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/96.jpg)
5.4 Veb aplikacije
• Veb aplikacija je Veb sajt koji sadrži statičke i dinamičke HTML stranice smeštene na Veb 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 servera
• Primeri (Veb portali): http://www.mtel.bahttps://www.unicreditbank.bahttp://www.belex.rs
96
![Page 97: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/97.jpg)
Literatura
1. Miškovic V., Multimedija (prezentacije), Univerzitet Sinergija, 2018
2. Cvetković D., Marković M., Savanović N., Multimedija, Univerzitet Singidunum, Beograd, 2015
3. Lynch P. J., Horton S., Web Style Guide: Foundations of User Experience
Design, 4th Ed, Yale University, 2016 http://www.webstyleguide.com
4. Robbins J. N., Learning Web Design, O’Reilly Media, Inc, 2007
5. Macaulay M., Introduction to Web Interaction Design: With HTML and CSS, 1st Edition, Chapman and Hall/CRC, 2017
6. McFarland D. S., Dreamweaver CS6: The Missing Manual, O’Reilly Media, 2012
7. Ratnayake R. N., WordPress Web Application Development, Packt
Publishing, 2013
97
![Page 98: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/98.jpg)
Literatura (Web)
• World Wide Web Consortium www.w3.org
• www.wikipedia.org
• http://www.webstyleguide.com
• http://www.useit.com/alertbox/991003.html
• https://www.w3.org/TR/html52/
• http://www.w3.org/MarkUp/Guide/Advanced
• http://www.w3schools.com
• http://www.wpdfd.com
• http://trends.builtwith.com/cms
• http://en.wikipedia.org/wiki/Content_management_system
• www.wordpress.org
• www.drupal.org
98
![Page 99: predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za](https://reader030.vdocuments.pub/reader030/viewer/2022040816/5e5d99d34765196616055d62/html5/thumbnails/99.jpg)
dr Vladislav MiškovicMultimedija
Tema 09: Osnove Web dizajna, dinamičke Web stranice
Pitanja?
99