predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za

Tema 09

Osnove Veb dizajna,

dinamičke Veb straniceMULTIMEDIJA

dr Vladislav Miš[email protected]

Fakultet za računarstvo i informatiku

2017/2018

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

1. Uvod

• Veb dizajn

• Veb stranica (Web page)

• Osnovni aspekti Veb dizajna

• Princip funkcionalnosti (usability principle)

3

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

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

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

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

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

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

2.1 Proces razvoja Veb sajta

• Osnovni koraci razvoja Veb sajta

• Organizacija razvoja Veb sajta

• Specifičnosti razvoja Veb sajtova/aplikacija

10

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

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

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

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

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

2.2 Osnovne Veb tehnologije

• HTML 5

• CSS 3

• XML

• JavaScript

• Semantički Veb

16

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

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

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/

Ilustracija: Adobe Dreamweaver responzivni uzorci rasporeda (layout)

20

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

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

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

2.4 Dizajn Veb stranice

• Standardni elementi Veb stranice

• Kreiranje standardnih elemenata Veb stranice

24

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

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

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)

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

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

Tabela naziva i kodova boja

30

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

2. 5 Problem učitavanja Veb stranice

• Vreme učitavanja Veb stranice

• Tehnike optimizacije vremena učitavanja

• Problem dostupnosti

32

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

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

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

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

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)

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

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

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

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

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

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

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

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

3.2 Osnovni elementi jezika HTML

• Sintaksa HTML i oznake (markup tags)

• Osnovne HTML oznake

• Oznake u telu dokumenta (BODY)

46

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

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

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

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

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

3.3 Tekst i slike u Veb stranici

• Tekst

• Lista

• Slika

• Komentar

52

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

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

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

Liste

• Uređena lista (ordered list)

<ol>

<li> jedan

<li> dva

<li> tri

</ol>

daje:

1. jedan 2. dva 3. tri

56

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

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

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

Komentar

• Obeležava deo teksta koji se ne interpretira



• Osim komentarisanja sadržaja HTML dokumenta, omogućava sakrivanje koda (konvencija), koje se vrši kompatibilnosti sa starim verzijama Web čitača

60

3.4 Ostali multimedijski elementi

• Elementi za dodavanje i reprodukciju zvuka, videa i animacija

<audio> </audio>

<video> </video>

<embed> </embed>

<object> </object>

61

3.5 Hiperveze, tabele i Veb forme

• Hiperveza

• Tabela

• Veb forma

62

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

Tabela

<table>



<caption> sadržaj zaglavlja </caption>



<tr>



<th> sadržaj prve ćelije reda zagl.

</th>

<th> sadržaj prve ćelije reda zagl.

</th>

</tr>



<tr>



<td> prvi red, sadržaj prve ćelije

</td>

<td> prvi red, sadržaj poslednje

ćelije

</tr>



<tr>



<td> poslednji red, sadržaj prve

ćelije </td>

<td> poslednji red, sadržaj

poslednje ćelije s </td>

</tr>



</table>



64

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

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

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

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

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

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

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

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

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

4. Jezik kaskadnih stilova (CSS)

1. Pojam CSS

2. Sintaksa CSS

74

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

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

Primer: Definicija novog stila i redefinisanje standardnog stila

• Definicija se unosi u zaglavlje dokumenta ili poseban .css fajl<style type="text/css">



</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

Primer Definicija stila u posebnom dokumentu

• Primer– Definicija stila h1 je u fajlu primer.css

78

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

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

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

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

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

5. Dinamički Veb sajtovi

1. Dinamičke Veb stranice

2. Veb serveri

3. Sistemi za upravljanje sadržajem (CMS)

4. Veb aplikacije

84

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

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

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

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>



</script>

</body>

</html>

88

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

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

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

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

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

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

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

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

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

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

dr Vladislav MiškovicMultimedija

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

Pitanja?

99

Documents

predmet.sinergija.edu.ba › pluginfile.php › 2766 › mod_folder › content › 1... · Multimedija 09 Osnove Veb dizajna, dinamicke Veb stranice• Najpopularniji Web CMS za