Kreiranje web strana

Download Report

Transcript Kreiranje web strana 

Kreiranje web strana
Miloš Stevanović 01/1129
-Uvod u kreiranjeKreiranje složenijih Web prezentacija, kao npr.
za elektronsku trgovinu, biće efikasnije ako u
njemu učestvuje više stručnjaka iz različitih
oblasti (programiranja, baza podataka, grafičke
obrade, audio-video obrade, upravljanje
serverom).
 To nikako ne znači da pojedinac ne može sam
da napravi odlične Web prezentacije.


Postoji nekoliko tipova aplikacija za
kreiranje Web stranica:
1. Tekstualni editori
2. HTML editori
3. Grafički editori (WYIWYG)

Tekstualni editori su jednostavne aplikacije za
obradu teksta kao što su WordPad ili Notepad. Oni
dolaze besplatno uz instalaciju Windows-a i sasvim su
dovoljni za kreiranje Web strana pomoću HTML-a.

HTML editori omogućavaju više od običnih
tekstualnih editora: razlikovanje HTML-a od sadržaja,
bolju podršku za dodatke kao što su JavaScript ili CGI
skriptove i podršku za FTP (protokol za prenos
datoteka sa računara na server).

Grafički editori su najpopularniji programi koji
omogućavaju kako početnicima tako i ekspertima da
kreiraju Web strane. Sadrže mogućnosti prethodna
dva editora uz dodatnu podršku za kreiranje strana
pomoću miša kao i podršku za pregled stranica u Web
čitaču.
-Uvod u HTMLHTML (HyperText Markup Language) nije
zaista programski jezik u onom smislu u kom su
to Java ili Visual Basic, on je više sintaksni jezik
za formatiranje dokumenata.
 To je jezik za opis dokumenata i njihovih
međusobnih veza koji se prikazuju u Web
čitačima odn. jezik koji govori Web čitaču kako
da prikaže sadržaj dokumenta.

HTML je u tekstualnom formatu pa se može
kreirati u bilo kom od tekst editora.
 Poseduje ekstenziju .htm ili .html.
 Postoje mnogi programi koji automatski
generišu HTML kod dok korisnik radi u
grafičkom okruženju
 Međutim, potpuna kontrola nad Web stranama
podrzumeva korišćenje HTML-a na najnižem
nivou.

HTML komande se pišu u vidu TAG-ova. Jedan
tag je komanda koja govori Web čitaču na koji
nacin da prikaze sadržaj stranice.
 Tagovi se pišu unutar oznaka “<“ i “>” npr.
<html> (početak HTML dokumenta)
 Većina tagova ima početni i završni tag. Završni
tag se dobija dodavanjem znaka “/” i označava
mesto na kojem prestaje dejstvo početnog taga
npr. </html> (kraj HTML dokumenta).
 Postoje tagovi kod kojih ne mora da se stavlja
završni tag npr. tag <br> koji sluzi za prelazak u
novi red.

Svaki HTML dokument se sastoji iz dva dela:
1. zaglavlja (engl. head) i
2. tela (engl. body).
 Zaglavlje se odvaja tagovima:
<head>
</head>
a telo dokumenta tagovima:
<body>
</body>

Sve što se napiše u zaglavlju dokumenta
neće se prikazati u prozoru Web čitača
već obično služi samo da pruži neke
informacije o stranici.
 U okviru zaglavlja treba staviti tagove:
<title>
</title>
izmedju kojih se stavlja naslov stranice koji
se pojavljuje u naslovnoj liniji čitača.


Sve što se napiše između tagova
<body>
</body>
predstavljaće telo dokumenta i pojaviće se
kao sadržaj prezentacije u Web čitaču.

Znači, svaki HTML dokument mora da ima
sledeci "kostur":
<html>
<head>
<title>
Naziv prezentacije
</title>
</head>
<body>
Tekst prezentacije
</body>
</html>
Dodatna objašnjenja bilo kog HTML taga
nazivaju se atributi. Atributi se ubacuju u
početni tag i služe da detaljnije opišu dati tag.
 Npr. boja pozadine se određuje atributom
bgcolor koji je deo <body> taga.
 Boje se mogu definisati na dva nacina: ili preko
heksadecimalne RGB vrednosti ili preko
predefinisanog naziva boje (npr."yellow"),
<body bgcolor="#ffff00"> ili
<body bgcolor=“yellow">


Takođe, u HTML dokumentima postoji
mogućnost pisanja teksta na sledeće načine:
podebljano
iskošeno
podvučeno
precrtano
<b>Tekst</b>
<i>Tekst</i>
<u>Tekst</u>
<strike>Tekst</strike>

Osim toga mogu se pisati i slova u indeksu ili
eksponentu.

Indeks se dodaje pomocu taga <sub>
npr.
se piše:
H<sub>2</sub>O

Eksponent se dodaje pomocu taga <sup>
npr.
se piše:
2<sup>2</sup>=4
Specijalni karakteri



Samo pojedini karakteri imaju svoju slovnu oznaku
dok se ostali dobijaju navođenjem broja karaktera tj.
njegovog koda.
Npr. znak manje “<“ se ne može koristiti pri unosu
sadržaja pošto se taj znak koristi za tagove, već se za
njegovo dobijanje u HTML dokument unosi “&lt;”
Entiteti imaju sledeću sintaksu:
&naziv_entiteta;
&#decimalna_vrednost;
&#xheksadecimalna_vrednost;
Entitet
Decimalna
vrednost
Heksadecimalna
vrednost
U Web
čitaču
&lt;
&#60
&#x3C
<
&gt;
&#62
&#x3E
>
&amp;
&#38
&#x26
&
&qout;
&#34
&#x22
"
&copy;
&#169
&#xA9
©
&reg;
&#174
&#xAE
®
U HTML kodu na mestu gde treba da stoji neko naše
slovo treba ubaciti sledeće ASCII kodove tj. simbole:
 &#268; za naše veliko Č
 &#269; za naše malo č
 &#262; za naše veliko Ć
 &#263; za naše malo ć
 &#352; za naše veliko Š
 &#353; za naše malo š
 &#272; za naše veliko Đ
 &#273; za naše malo đ
 Ž za naše veliko Ž
 ž za naše malo ž

Daleko jednostavniji način za korišćenje naših
slova je kada se HTML dokument snimi u UTF8 formatu tj. kada se u zaglavlju HTML
dokumenta (u okviru head tagova) unese
sledeće:
<meta content="text/html; charset=utf-8" http-equiv=content-type>
Linkovi u HTML-u
Najvažnija osobina HTML dokumenta je ta da
se oni mogu međusobno povezati (tj. da jedan
ukazuje na drugi) što je zapravo osobina
hiperteksta.
 Postoje tri vrste linkova:
1. Linkovi do nekog drugog dela stranice u kojoj
se već nalazimo (tzv. Named Anchor);
2. Linkovi do druge stranice u okviru iste
prezentacije;
3. Linkovi do stranice u nekoj novoj prezentaciji.

1. Prva vrsta linkova se koristi kada npr. dođemo
na kraj strane i hoćemo da se vratimo na vrh.
 To se postiže u dva koraka:
1) Moramo prvo da napišemo na početku
dokumenta:
<a name=“početak”></a>
pri čemu se ovaj link ne vidi u dokumentu.
2) Na kraju stranice postavimo vidljivi link koji
nas vodi do označenog početka:
<a href=“#početak”>Početak</a>
2. Ako želimo da stavimo link do neke druge
stranice u okviru iste prezentacije, to postižemo
stavljanjem:
<a href=“ime_stranice.html”>Ime linka</a>
3. Ako zelimo da stavimo link do neke druge
prezentacije, koja se može nalaziti na nekom
sasvim drugom serveru potrebno je da
napisemo celu Web adresu te prezentacije:
<a href=“http://www.google.com/”>Ime linka</a>
Tag <a> sa atributom href možemo iskoristiti
kao link za pokretanje e-mail poruke u
korisnikovom programu za elektronsku postu
(npr. Outlook Express).
 Možemo definisati i naslov poruke, kome
prosleđujemo pa čak i tekst koji će biti otkucan
u samoj poruci dok posetiocu sajta ostaje samo
da poruku pošalje:

<a href="mailto:E-mail_adresa?subject=Naslov&cc=
Adresa_кome_prosleđujemo&body=Tekst_poruke">Naziv_linka
</a>
-Pravila pri kreiranjuPri kreiranju Web prezentacija postoji nekoliko
pravila kojih se treba pridržavati dok je sve
ostalo stvar ukusa.
 Ta pravila se posebno odnose na Početnu
stranu, tekst, boje i slike na jednoj Web
prezentaciji.

Početna strana (Home Page)
Home Page je početna strana svake Web
prezentacije a samim tim i najvažnija strana.
 Ona za sajt ima isto značenje kao i prva strana
za časopis, što znači da mora da istakne
suštinu Web prezentacije.
 Mora da bude konkretna, pregledna i da se
brzo učitava.

Za korisnika koji prvi put posećuje lokaciju,
najvažnija uloga početne strane je da odgovori
na njegovo pitanje “Gde sam” i “Šta mogu da
uradim ili saznam na ovom sajtu”.
 Posetioci sajta obično prvo primete gornji levi
ugao pa je pogodno da se tu postavi nešto
važno (kao npr. baner) a to je deo koji je vidljiv i
na manjim monitorima.

Na Početnoj strani bi trebao da se nalazi:
1. Dobar navigacioni sistem
2. Kratak pregled najvažnijih vesti ili obaveštenja
(da bude vodič kroz sadržaj i pokaže posetiocu
šta sve može pronaći na sajtu).
3. Pretraživač (ukoliko je posetiocu lakše da se
na taj način kreće po sajtu, umesto klasično
linkovima)

Od kvaliteta početne strane zavisiće koliko će
se posetioci zadržati na sajtu odnosno koliko će
svi ostali delovi sajta biti posećeni.
 Posetilac koji bude zainteresovan za ono o
čemu je pročitao na početnoj strani, pročitaće i
nešto duži tekst odnosno posetiće ostale
stranice sajta.

Zbog svega toga Prvu stranicu sajta nije dobro
kreirati kao tzv. Splash page odn. uvodnu
stranu na kojoj obično postoji samo logo firme i
ulaz na jedan ili više jezika.
 Ovo je jedino opravdano ukoliko treba upozoriti
određen segment posetilaca na sadržaj samog
sajta.
 Pri kreiranju se Početna stranica mora sačuvati
pod nazivom index.html ili index.htm

Upotreba teksta
Tekst je na Web stranici mnogo važniji od
grafike.
 Ono što će privući pažnju najvećeg broja
posetilaca su sadržaj, naslovi i nazivi slika.
 Da tekst ne bi oterao korisnike sa sajta postoje
određena pravila kojih se pri pisanju za Web
treba pridržavati.

Standardni tip slova:
Standardni tip slova je npr. Times New Roman,
Verdana, Arial i ostali stilovi koje korisnici već
imaju instalirane na svom računaru.
 Upotreba slova na Webu može stvarati ozbiljne
probleme ukoliko stil kojim smo pisali na
stranama nije instaliran na korisnikovom
računaru.
 Nekad je najbolje uopšte ne definisati vrstu
slova već prihvatiti podrazumevanu.
 Ukoliko ipak želimo da koristimo neka neobična
slova najbolje je da se navede nekoliko
mogućih alternativa.


Jedan od načina je da se u HTML kod unese
više alternativa stilova:
<font face=“Chiller,Bauhaus 93,Arial”>Ovde dodje vaš tekst </font>
Ovo znači da će ukoliko posetilac stranice na
svom kompjuteru nema instaliran prvi stil, tekst
biti prikazan u sledećem definisanom stilu sa
liste.
 Time se povećava verovatnoća da će tekst biti
učitan na korisnikovom računaru u nekom od
predviđenih stilova i omogućava nam da
planiramo krajnji izgled naše Web prezentacije.

Tekstovi treba da budu kratki:
 Pri kreiranju za Web treba imati u vidu da je
čitanje sa ekrana 25% sporije od čitanja sa
papira.
 Korisnici se osećaju nelagodno dok čitaju sa
monitora i ne vole da pomeraju tekst u prozoru.
 Zbog svega toga temu na Webu treba pokriti sa
50% manje materijala od onog koji bi bio
upotrebljen za štampani tekst.
Tekstovi treba da budu pregledni:
 Pri pisanju za Web se treba pridržavati metoda kojim
se služe novine tzv. “metod obrnute piramide”.
 Ovaj metod se koristi da bi se posetioci na kratak i
jasan način upoznali sa sadržajem Web prezentacije
pomoću odgovora na pitanja:
- ko ?
- šta ?
- gde ?
- kada ?
- kako ?
- zašto ?
Tekstovi bi trebalo da su podeljeni i povezani:
 Često se dešava da korisnici na Webu čitaju
samo prvu rečenicu svakog pasusa.
 Tematske rečenice su zbog toga veoma bitne
kao i pravilo “jedna ideja po pasusu”
 Tekst se može skratiti bez žrtvovanja sadržaja
tako što će se podeliti na više delova
povezanih hipervezama.
 Na taj način svaka strana može biti kratka a
da istovremeno ceo hiperprostor sadrži znatno
više informacija nego što bi moglo da stane u
jedan štampani članak.
Tekstovi treba da budu jasni:
 Tekst treba da bude napisan običnim jezikom.
 Zamršene rečenice i složeno pisanje se na
Webu još teže razumeju.
 Humorom se treba služititi umereno. Pošto
korisnici samo pregledaju tekst, nekad neće biti
u stanju da odrede kada je pisac duhovit a kada
sarkastičan.
 Takođe upotreba metafora treba da bude
krajnje ograničena.
Upotreba boja
Približno 8 do 10 procenata stanovništva ima
neki oblik daltonizma.
 Od tog procenta oko 0.5% predstavljaju žene
dok ostatak čine muškarci.
 Ovo je bitno pri izboru ciljne grupe Web
prezentacije.


Boju treba koristiti namenski i umereno da bi
se:
- skrenula pažnja na određene informacije;
- pokazali uzajamni odnosi elemenata;
- napravila razlika između pojedinih područja;
- pomoglo korisnicima da pamte;
- prikazali objekti na realističan način;
- povećala vizuelna dopadljivost.
Boja pozadine i boja teksta treba da budu u
što većem kontrastu:

Najbolju čitljivost na beloj pozadini obezbeđuju:
Crni tekst
Braon tekst
Tamno zeleni tekst
Tamno plavi tekst
Najgoru čitljivost obezbeđuju:
...i razne druge kombinacije sa malim kontrastom.

Kombinacije koje omogućavaju najbolju
preglednost za kratke delove teksta su:
Crvena
Plava
Zelena
Žuta
Bela
SAD
Opasnost
Muškost
Sigurnost
Kukavičluk
Čistota
Francuska
Aristokratija
Sloboda,mir
Kriminal
Privremenos
t
Neutralnost
Egipat
Smrt
Vrlina,vera,
istina
Plodnost,
snaga
Sreća,
blagostanje
Radost
Indija
Život,
stvaralaštvo
Blagostanje,
plodnost
Uspeh
Smrt,
čistota
Japan
Ljutnja,
opasnost
Nečasnost
Budućnost,
Ljubaznost,
mladost,ene- plemenitost
rgija
Smrt
Kina
Sreća
Nebo,oblaci
Dinastija
Rođenje,boMing,nebesa gatstvo,moć
oblaci
Smrt,
čistota
-
Upotreba slika

Najčešći grafički formati na Webu su:
1. GIF (Graphic Interchange Format)
2. JPEG (Joint Photographic Experts Group) i
3. PNG (Portable Network Graphics)
Format GIF odlično komprimuje grafiku bez
gubitka na kvalitetu slike. Ima 256 boja.
 GIF89A podržava:
1. Animaciju (sadrži u sebi više slika pa se
naizmeničnim ponavljanjem tih slika dobija
mala animacija);
2. Transparentnost (izjednačavanje boje
pozadine slike sa bojom stranice);
3. Preplitanje (slike se učitavaju brzo u celoj
veličini ali sa niskom rezolucijom a potom se
prikazuju u punoj rezoluciji).

U JPEG formatu se obično čuvaju kvalitetnije
fotografije jer ovaj format podržava 16 miliona
boja.
 Fajlovi su dobro komprimovani, tako da se
fotografije relativno brzo učitavaju.
 Postoji više opcija kompresije u zavisnosti od
stepena gubitka detalja (Low, Medium, High, i
Maximum).
0 - 40 = slab kvalitet;
40 - 60 = prihvatljiv kvalitet;
60 - 80 = visok kvalitet;
80 - 100 = maksimalan kvalitet.


PNG je još jedan format podržan od strane
novijih Web čitača a kombinuje funkcionalnosti
gif-a i jpeg-a. Postoje dva tipa ovog formata:
1. PNG-8, sadrži 8 bitnu informaciju o bojama
(slično GIF-u), ne podržava animaciju ali
podržava transparetnost i to mnogo bolje nego
GIF;
2. PNG-24, sadrži 24 bitnu informaciju o
bojama, ekvivalentan je JPEG-u i poseduje
sličnu kompresiju.
Neke od najboljih alatki za obradu slika su:
Adobe Photoshop CS2, Macromedia
Fireworks8 i Flash8.
 Pri obradi slika je uvek bolje da se ne vrši
obradu gotovih JPEG i GIF fajlova, već
originalnih slika.
 Slike bi na Web prezentaciji bilo poželjno staviti
u jedan direktorijum kao bi se keširale (snimile
kod korisnika) čime se ubrzava vreme
učitavanja stranice.

-Statistika posećenostiPostoje sajtovi koji generišu kod koji treba
postaviti u HTML dokument radi praćenja
posećenosti sajta npr. www.statcounter.com
 Bolji statistički program obično nude provajderi
na čijem se serveru nalazi Web prezentacija.
 On će pomoći da pratimo ne samo statistiku
posećenosti, već i koje browsere koriste
posetioci, koje operativne sisteme,
konfiguracije...


Kako Srbi pretražuju Internet:
Kako to rade u svetu:
 1998 godine se u proseku tražilo upisivanjem
1.2 reči
 2004 godine se u proseku tražilo upisivanjem
2.5 reči
 2006 godine se u proseku tražilo upisivanjem
3.3 reči.

Sa porastom broja reči glašivači dobijaju sve
bolje korisnike a sami korisnici su zadovoljniji
rezultatima pretrage.
Ovo je bitno znati pri postavljanju ključnih reči u
okviru Meta taga.
 Meta tag ima ulogu da pretraživačima odn.
njihovim robotima da informacije o tome kakav
sadržaj obrađuje neki sajt.
 Ako se u ovaj tag smeste ključne reči koje su u
vezi sa sadržajem stranice, on će mnogo
pomoći da se podigne rang sajta u rezultatima
pretraživanja.
 <meta name=“keywords" content=“Ovde dođu
ključne reči" />
 <meta name=“description" content=“Ovde dođe
kratak opis" />

Još nekoliko pravila:
Da bi se izbeglo da izgled stranice zavisi od
Web čitača u kojem se pregleda, u HTML-u ne
treba zadavati elemenate koji su svojstveni
nekim Web čitačima a nisu podržani u ostalima.
Zbog toga Web prezentaciju treba obavezno
proveriti u nekoliko popularnih pretraživača.
(npr. Netscape Navigator ne podrzava atribut
color za horizontalne linije)
 Tabele ne treba definisati u fiksnim širinama i
dužinama već u procentima od raspoložive
veličine ekrana.

Da kasnije ne bi došlo do problema prilikom
prenošenja prezentacije sa našeg računara na
server treba se pridržavati sledećeg:
1. Nazive stranica i nazive svih elemenata na
sajtu treba pisati malim slovima i sastavljeno
(razmak treba zameniti znacima “-” ili “_”).
2. Web stranice moraju biti organizovane u
pažljivo osmišljene direktorijume koji sadrže
sve što se nalazi u jednoj Web prezentaciji.
Nakon završetka kreiranja potrebno je ove
direktorijume postaviti na server i to je to!!!

SREĆNO U KREIRANJU !!!