View
12
Download
0
Category
Preview:
Citation preview
Tema 09
Osnove Veb dizajna,
dinamičke Veb straniceMULTIMEDIJA
dr Vladislav Miškovicvmiskovic@sinergija.edu.ba
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
<!-- 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
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>
<!-- 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
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">
<!--
.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
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>
<!--
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
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
Recommended