Kreiranje web strana
Download
1 / 53

Kreiranje web strana - PowerPoint PPT Presentation


  • 90 Views
  • Uploaded on

Kreiranje web strana. Milo š Stevanović 01 / 1129. -Uvod u kreiranje-.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Kreiranje web strana' - sauda


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Kreiranje web strana

Kreiranje web strana

Miloš Stevanović 01/1129


Uvod u kreiranje
-Uvod u kreiranje-

  • Kreiranjeslož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.



  • Tekstualni editori su jednostavne aplikacije za obradu teksta kao što su WordPad ili Notepad.Oni dolaze besplatno uz instalaciju Windows-a i sasvimsu dovoljni za kreiranje Web strana pomoću HTML-a.

  • HTML editoriomoguć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četnicimatako 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 html
-Uvod u HTML-

  • HTML (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 radiu grafičkom okruženju

  • Međutim, potpuna kontrola nad Web stranama podrzumeva korišćenjeHTML-a na najnižem nivou.


  • HTML komande se pi kom od tekst editoraš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.


  • Sv kom od tekst editoraaki 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 kom od tekst editoraš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 sestavlja naslov stranicekoji se pojavljuje u naslovnoj liniji čitača.


  • S kom od tekst editorave što se napišeizmeđu tagova

    <body>

    </body>

    predstavljaće telo dokumenta i pojaviće se kao sadržaj prezentacije uWeb čitaču.


  • Zna kom od tekst editorači, svaki HTML dokument mora da ima sledeci "kostur":

    <html>

    <head>

    <title>

    Naziv prezentacije

    </title>

    </head>

    <body>

    Tekst prezentacije

    </body>

    </html>


  • Dodatna obja kom od tekst editoraš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 kom od tekst editorađe, u HTML dokumentima postoji mogućnost pisanja teksta na sledeće načine:

    podebljano <b>Tekst</b>

    iskošeno <i>Tekst</i>

    podvučeno<u>Tekst</u>

    precrtano <strike>Tekst</strike>



Specijalni karakteri
Specijalni karakteri kom od tekst editora

  • 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;


U HTML kodu na mestu gde treba da stoji neko naše slovo kom od tekst editoratreba 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 jednost kom od tekst editoraavniji način za korišćenje naših slova je kada se HTML dokument snimi u UTF-8 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
Linkovi u HTML-u kom od tekst editora

  • 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 kom od tekst editora 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 kom od tekst editoraž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 kom od tekst editora<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 kreiranju
-Pravila pri kreiranju- kom od tekst editora

  • Pri 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
Po kom od tekst editorač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 uloga početne strane je da odgovori na njegovo pitanje :

    1. Dobar navigacioni sistem

    2.Kratak pregled najvažnijih vesti iliobaveš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 uloga početne strane je da odgovori na njegovo pitanje 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 uloga početne strane je da odgovori na njegovo pitanje 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.htmliliindex.htm


Upotreba teksta
Upotreba teksta uloga početne strane je da odgovori na njegovo pitanje

  • 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.


Standardn uloga početne strane je da odgovori na njegovo pitanje i tipslova:

  • 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”>Ovdedodje 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 stilova::

  • 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: stilova:

  • 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 stilova: 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 stilova::

  • 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
Upotreba boja stilova:

  • 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: stilova:

    - 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 po stilova:zadine i boja tekstatreba da budu u

što većem kontrastu:

  • Najbolju čitljivost na beloj pozadini obezbeđuju:

    Crni tekst

    Braon tekst

    Tamno zeleni tekst

    Tamno plavi tekst


I razne druge kombinacije sa malim kontrastom

Najgoru čitl stilova:jivost obezbeđuju:

...i razne druge kombinacije sa malim kontrastom.



Upotreba slika
Upotreba slika stilova:

  • 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 stilova: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 stilova: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 stilova: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 uvekbolje da se ne vrši obradu gotovih JPEG i GIF fajlova, već originalnih slika.

  • Slikebi 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 enosti
-Statistika posećenosti- CS2, Macromedia Fireworks8 i Flash8.

  • Postoje sajtovi koji generišu kod koji treba postaviti u HTML dokument radi praćenja posećenosti sajta npr. www.statcounter.com

  • Boljistatistički program obično nude provajderi na čijem se serverunalazi Web prezentacija.

  • On će pomoći da pratimo ne samo statistiku posećenosti, već i koje browsere koriste posetioci, koje operativne sisteme, konfiguracije...



Kako to rade u svetu: CS2, Macromedia Fireworks8 i Flash8.

  • 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: Meta taga.

  • Da bi se izbeglo da izgled stranice zavisi od Web čitača u kojem se pregleda, u HTML-une 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.


  • D Meta taga.a kasnije ne bi došlo do problema prilikom prenošenja prezentacije sa našeg računara na server treba sepridrž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!!!



ad