1 / 53

Kreiranje web strana

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

sauda
Download Presentation

Kreiranje web strana

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Kreiranje web strana Miloš Stevanović 01/1129

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

  3. Postoji nekoliko tipova aplikacija za kreiranje Web stranica: 1. Tekstualni editori 2. HTML editori 3. Grafički editori (WYIWYG)

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

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

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

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

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

  9. 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 sestavlja naslov stranicekoji se pojavljuje u naslovnoj liniji čitača.

  10. Sve što se napišeizmeđu tagova <body> </body> predstavljaće telo dokumenta i pojaviće se kao sadržaj prezentacije uWeb čitaču.

  11. Znači, svaki HTML dokument mora da ima sledeci "kostur": <html> <head> <title> Naziv prezentacije </title> </head> <body> Tekst prezentacije </body> </html>

  12. 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">

  13. Takođ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>

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

  15. 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;

  16. 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 ž 

  17. Daleko jednostavniji 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>

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

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

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

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

  22. -Pravila pri kreiranju- • 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.

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

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

  25. Na Početnoj strani bi trebao da se nalazi: 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)

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

  27. Zbog svega toga Prvu stranicusajta 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

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

  29. Standardni 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.

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

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

  32. 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 ?

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

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

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

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

  37. Boja pozadine 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

  38. Najgoru čitljivost obezbeđuju: ...i razne druge kombinacije sa malim kontrastom.

  39. Kombinacije koje omogućavaju najbolju preglednost za kratke delove teksta su:

  40. 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)

  41. 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).

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

  43. PNGje 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.

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

  45. -Statistika posećenosti- • 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...

  46. Kako Srbi pretražuju Internet:

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

  48. 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" />

More Related