Projektovanje i izrada Web prezentacija Web dizajn i

Projektovanje i izrada Web prezentacija

Web dizajn i razvoj web aplikacija Web dizajn (Web design) predstavlja grafičko osmišljavanje i dizajniranje Internet stranice koristeći, jezik za označavanje i formatiranje HTML, standardizaciju i upotrebljivost web stranice. Web development (razvoj web aplikacija) predstavlja razvoj softvera za Internet. 2

Web strana, sajt i www Web sajt ili samo sajt je kolekcija povezanih i srodnih web strana koje sadrže tekst, slike, video ili drugi multimedijalni sadržaj. Web sajt je hostovan na najmanje jednom web serveru, kome je moguće pristupiti preko mreže. Web strana je dokument, pisan Hypertext Markup Language (HTML, XHTML). Web stranama se pristupa i pomoću Hypertext Transfer Protocol (HTTP), ili (HTTP Secure, HTTPS) Korisnička aplikacija je obično web browser (čitač) koji prevodi HTML kod i prikazuje ga na ekranu. Svi javno dostupni sajtovi čine World Wide Web. Svim stranama se pristup preko Uniform Resource Locator (URL). 3

Podela web sajtova Prema funkciji web sajtovi mogu da se podele na: Lične (privatne) web sajtove Komercijalne web sajtove Web sajtove vlada Web sajtove neprofitnih organizacija Prema stepenu interraktivnosti: Statičke web sajtove Dinamiče web sajtove 4

Mapa sajta (sitemap) je lista svih strana koja je dostupna pretraživačima ili korisnicima. Obično je hijerarhijski strukturirana kao i svaka druga web strana ili poseban dokument. 5

Web portali Web portal je mesto pristupa informacijama kojeg čini više različitih, logički povezanih aplikacija koje su zajedničke većem broju korisnika. Portali objedinjuju različite informacije iz većeg broja izvora, pružajući tako dosledne podatke i pristup brojnim aplikacijama, koje bi u suprotnom predstavljale zasebne jedinice. 6

Vrste Web portala Lični web portali Korporativni Web portali Regionalni Web portali Državni Web portali Informativni web portali Web portali za pretraživanje i kolekcije linkova Ostale vrste Web portala portali za zabavu: portali namijenjeni za zabavu, raznolikog sadržaja (npr. Singalbe, T-portal, net. hr, itd. ) ekološki portali: portali usmjereni na zaštitu i brigu o životnoj okolini; investicioni portali: izvor kod pretraživanja globalne industrije ili nekog specifičnog tržišta B 2 B i B 2 C: B 2 B – Business to Business Portal 7

Podela web portala Horizontalni vs. Vertikalni web portali Dve glavne kategorije web portala su horizontalni portali koji pokrivaju više različitih oblasti i vertikalni portali koji su fokusirani na jednu oblast. Po drugoj definiciji horizontalni portali su platforme za više kompanije u okviru istog ekonomskog sektora ili istog tipa proizvođača ili distributera. Vertikalni portali su specijalizovani za jednu industrijku nišu ili specifično tržište, oblast ili interest. 8

Internet pretrazivaci Internet pretraživač predstavlja Internet servis čija je svrha traženje informacija na Internetu, i tu uglavnom zadavanjem ključnih reči, a mnogo ređe odabirom ponuđenih stavki. Ishod pretrage se najčešće prikazuje kao spisak web sajtova koji sadrže traženu informaciju, uz mogućnost da se ponuđeni web sajtovi posete od strane pretraživača. Najpopularniji pretraživači: Google, Yahoo, . . . 9

Najzanačajniji pretraživači 2011. 10

Koraci u izradi web sajta Pravljenje plana Izbor tehnologije Izrada web sajta Prijavljivanje na pretraživače E-marketing 11

Koraci u izradi web sajta Pravljenje plana Izbor tehnologije Izrada web sajta Prijavljivanje na pretraživače E-marketing 12

Klasični web sajtovi imaju: Sadržaj – informacije relevantne za ciljnu grupu posetilaca – klijenata – potrošača Upotrebljivost – sajt mora da bude lak za korišćenje sa interfejsima i navigacijom koja je jednostavna i pouzdana. Izgled – grafika i tekst treba da imaju ujednačen stil i da budu konzistentni na celom sajtu. Struktura - web sajt kao celina. 13

Izrada web sajta – o čemu treba razmišljati 1/2 Zamislite pravu prodavnicu - Sa ulice vidite natpis “Prodavnica” - Sledite putokaz ali ne nalazite vrata za ulaz - Tek posle mnogo muka nalazite skrivena vrata i ulazite unutra. - Unutra je mračno i ništa se ne vidi. - Kada Vam se oči priviknu na mrak, vidite dosta proizvoda, ali bez cene i opisa. 14

Izrada web sajta – o čemu treba razmišljati 2/2 Zamislite pravu prodavnicu - Kada napokon izaberete neki proizvod ne možete da nađete kasu i prodavačicu da bi platitli - Posle mnogo muka nalazite znak koji Vam kaže da trebate da platite poštanskom uputnicom i da će Vam proizvod biti isporučen za tri nedelje. - Ko Vas pita što Vama proizvod treba danas? 15 Šta mislite koliko će dugo ta prodavnica da radi?

Kakvu smo pouku izvukli iz prethodne priče? 1/2 Neka Vaša uvodna strana bude jednostavna 2) Neka linkovi budu jasno označeni 3) Link ka naslovnoj strani I strani za naručivanje mora biti na svakoj strani 4) Ne koristite glupe animacije radi neukusnih vizuelnih efekata 1) 16

Kakvu smo pouku izvukli iz prethodne priče? 2/2 Manite se šarenih podloga 6) Organizujte proizvode i podatke po logičkom redosledu 7) Maksimlano pojednostavite naručivanje 8) Ne dozvolite da posetioci olako napiste Vaš sajt. 5) 17

Uputstvo za uspeh Kombinuj 3 C Content - sadržaj Community - stvori stalnu zajednicu posetilaca, radi na lojalnosti kupaca. . . Commerce - komercijalizuj, prodaj, kupuj. . 18

Kako storiti 3 C Naslovi i vesti Sadržaj i prodaja Razglednice i mailovi Chat Room s Web sajt Knjiga posetilaca Takmičenja i igre 19 Oglasne table Glasanja

Koraci u izradi web sajta Pravljenje plana Izbor tehnologije Izrada web sajta Prijavljivanje na pretraživače E-marketing 20

Web - tehnologije Microsoft: HTML ASP. NET Scrip jezik Jscript, VBScript DB - SQL server OS - Windows NT Web server Flash Animacije Cold Fusion 21 Java Server Pages Open Source: n HTML n PHP n Scrip jezik - Perl n DB - My. SQL n OS - Linux/Unix n Web server Apache

Podela tehnologija Jezici za označavanje (HTML, XHTML and XML) Style sheet languages (CSS i XSL) Skriptovi na klijent strani ( kao na primer Java. Script) Skriptovi na nstrani servera (kao PHP i ASP) Baze podataka (My. SQL I SQL server) Multimedijalne tehnologije (kao na primer Flash i Silverlight) 22

HTML jezik Interneta Hyper Text Mark. Up Language Univerzalni jezički format na Internetu WWW se zasniva na klijent server-modelu Jezik kojim se opisuje pristup WWW dokumentima je HTML. 23

Primer HTML <BODY BGCOLOR=#808080 leftmargin="0" topmargin="0"> <p>  </p><div align="center"> <table width="760" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="160"> <a href="index. html"> <img src="images/pogledi_2. gif" width="165" height="48" border="0"></a></td><td bgcolor="FFCC 00" class="tanka. L"> <p class="naslov"> 24

Java. Script <SCRIPT LANGUAGE="Java. Script"> <!-function MM_open. Br. Window(the. URL, win. Name, features) { //v 3. 0 try {window 1. close(); } catch(Interrupted. Exception) {} window 1 = open(the. URL, win. Name, features); }> 25

PHP www. php. net PHP je programski jezik koji programerima treba da omogući jednostavnu izradu dinamičkih aplikacija za web. 26

Kako PHP izgleda <? require ("bb_news_config. inc"); mysql_connect($bb_news_hostname, $bb_news_mysqluser, $bb _news_mysqlpassword) or die("Неуспело повезивање на SQL server"); // Obrada greske $q=$page_number * $max_hits 1; $query = "select id, naslov, vest, date_format(date, '%d-%m%Y') as date 1, date from vesti order by date desc, id desc limit $q, $max_hits 1"; $news = mysql_db_query($bb_news_db, $query) or die("Неуспело селектовање!"); ? > 27

My. SQL http: //www. mysql. com Baza podataka My. SQL 28

Povezivanje sa DB Web strane Klijent HTML Request Web Browser Internet HTML strana SQL upit Application Server Intranet Query Database Server 29 Result Web Server & aplikacija SQL Server

Domeni Nacionalni. co. rs www. nic. rs Međunarodni. com, . net, . org, . ws, . info, . cc, . edu . . IP broj 147. 91. 203. 197 http: //www. e-riding. com/whereisthatip/ 82. 117. 208. 66 -> SBB 30

Složena rešenja m. PULSE 31

Alati za razvoj web strana Alati za izradu web strana (Website builders) omogućavaju izgradnju web sajtova bez ručnog kodiranja. Ovi alati imaju dve kategorije: On- line alati koje na raspolaganje stavljaju web hosting kompanije i Softveri koji se instaliraju na lokalne računare. Strane se kreiraju off-line i onda upload-uju na web host. Adobe Macromedia Dreamweaver Microsoft Front Page 32

Alati – Microsoft Front Page 33

Macromedia Dreamweaver 34

Koraci u izradi web sajta Pravljenje plana Izbor tehnologije Izrada web sajta Prijavljivanje na pretraživače E-marketing 35

Kategorije sajtova Pretraživači Portali Marketinški sajtovi E-commerce sajtovi E-government E-education E-banking 36

Yahoo (Pretraživač) 37

B 92. net (Portal) 38

Nike. com (Komercijalni) 39

Glavni gradivni elementi sajta Centralni, gornji, baner Navigacioni sistem Prostor za sadržaj prezentacije Pomoćni baneri i meniji Centralni, donji, baner 40

Hiperlinkovi ili hiperveze Hiperlink ili hiper tekstualni prelaz je osobina pojedinih, posebno označenih reči, slika ili delova slika u tekstovima koji su na elektronskom obliku prikazani na računaru i predstavljaju posrednu vezu prema dodatnim informacijama. Ovakve veze se zovu hiperveze ili jednostavno veze. One predstavljaju referencu ili navigacioni element ka drugom odeljku, drugom dokumentu ili odeljku iz drugog dokumenta. Hipermedija je logično proširenje temrina hipertekst na grafiku, audio, video, tekst i hiperlinkove koji u interakciji čine novi informacioni medijum. 41

Web navigacija se tiče razvoja sistema za povezivanje web resursa. Web navigacija ima zadatak da maksimalizuje upotrebljivost web resursa. Razmena linkova je konfederacija web sajtova koji čine zajednički web prsten. Webmasteri registruju svoje sajtove na čvorišnom sajtu ili međusobno razmenjuju linkove. 42

Baneri Web baneri ili baneri su oblik reklamiranja na World Wide Web. Ovaj oblik reklamiranja se uključuje u web strane koristeći sliku (GIF, JPEG, PNG), multimediju, animaciju ili skriptove. Baner je reklamni sadržaj koji može biti isporučen centralizovano sa jednog servera i preko hiperveze upućivati na neki drugi sajt ili resurs. Ponekad je prisutna varijanta “pay per click” 43

44

Glavni gradivni elementi sajta 45

Glavni gradivni elementi sajta Baneri Meni Baneri 46

Baneri § § § 47 Upotrebljavajte reči “Klikni ovde” i "Enter" Animirajte banere Kreirajte banere koji se kratko učitavaju Koristite zvučne naslove BESPLATNO Ključna reč je

Baneri § § § 48 Podvucite ili istaknite najvažniju reč Postavite adresu vašg sajta ili LOGO Menjajte često elemente banera

Name Rectangles and Pop-Ups Width / px Height / px Sirina / duzina odnos Medium Rectangle 300 250 1. 2 Square Pop-Up 250 1 Vertical Rectangle 240 400 1. 67 Large Rectangle 336 280 1. 2 Rectangle 180 150 1. 2 3: 1 Rectangle 300 100 3 Pop-Under Banners and Buttons Full banner Half banner Micro bar Button 1 Button 2 720 300 2. 4 468 234 88 120 60 60 31 90 60 7. 8 3. 9 2. 84 1. 33 2 Vertical banner 120 240 2 Square button 125 1 Leaderboard 728 90 8. 09 Wide skyscraper 160 600 3. 75 Skyscraper Half page ad 120 300 600 5 2 Skyscrapers 49 IAB standard ad sizes

Meniji Neka Vaši meniji budu jednostavni Neka linkovi budu jasno označeni Link ka naslovnoj strani I strani za naručivanje mora biti na svakoj strani 4) Glavni meniji mogu biti ispod banera, sa leve strane i ređe sa desne strane 1) 2) 3) 50

Kombinacija boja određuje identitet Harmonija boja određuje identitet sajta. 2) Boje na sajtu i one na logou kompanije moraju da se dopunjuju. 1) 51

Nikada ne koristite veliki broj boja. Crna, siva i jedna jarka boja po izboru je uvek dobitna varijanta. Ukoliko radite sajt za proizvođača opreme za kupatila razmišljajte o plavoj boji. 2) Ukolko radi sajt za rasadnik prazmišljajte o zelenoj i o boji zemlje. 3) Informativni sajtovi treba da imaju neutralne boje. 1)

Flores. rs 53

Koraci u izradi web sajta Pravljenje plana Izbor tehnologije Izrada web sajta Prijavljivanje na pretraživače E-marketing 54

Pretraživači – Kako posetioci pronalaze Vaš sajt Kako posetioci nalaze Vaš sajt? 2005 (%) Pretraživači Link sa drugog sajta 87 85 Odštampani materijal Newsgroup 63 32 TV Mail 31 29 Pretpostavljena adresa On-line Advertajzing 19 10 55

Ostale tehnike Rank On-line Tehnike Ocena* Procenat (%) 1 Customer/Visitor E-Mail 4. 02 54 2 On-line PR 3. 59 30 3 Referral Partnerships 3. 49 20 4 Sponsorships 3. 48 18 5 Affiliate Programs 3. 44 27 6 Search Engine Positioning 3. 34 66 7 Reciprocal Ads/Links 3. 32 43 8 Screaming Video Ads 3. 31 4 9 Banners/Links 3. 05 38 10 Unsolicited E-Mail 2. 67 11 * 1 = bez efekata 5 = visoko efektno 56

Prijava na pretraživače Kada potrošaci traže proizvode ili usluge putem 57 interneta, oni ukucavaju određene termine na pretraživačima (Google, Yahoo. MSN, Ask. . . ). Prema istraživanjima, 62% korisnika zadovolji svoju potrebu sa prva tri pogodka na pretraživaču, a 90% sa prvih 10! Optimizacija web sajta je zaista jedna od ključnih stvari kada govorimo o uspehu nekog web sajta na internetu, naime, zamislite svoj web sajt koji izgleda atraktivno, ima kvalitetan sadržaj, ali nema posetioce koji sve to treba da vide! http: //www. it-marketing. rs/web-sajt/seo-optimizacijaprijava-na-pretrazivace

Pretraživači Mitovi Činjenice Jednostavno Nije korisno ukoliko ne prijavljivanje sajta na poznajete algoritme stotine pretraživača pretraživanja kod povećeće posetu pretraživača! Jednostavnim Takođe nekorisno insertovanjem META ukoliko se ispravno ne tagova povećaće se iskoriste, posećenost. napišite ključne reči i opis! 58

Saveti za prijavljivanje • Izbegavajte ili minimizujte okvire • Izbegavajte mnogo fleš strana • Koristite ključne reči i ALT tagove • Uvek koristite META tagove

Koraci u izradi web sajta Pravljenje plana Izbor tehnologije Izrada web sajta Prijavljivanje na pretraživače E-marketing 60

E-marketing Prijava na diskusiione grupe Prijava na forume E-mail marketing Razmena banera 61

Direktni marketing je jedan od instrumenata promocije, koji 62 teži da dosegne auditorijum bez korišćenja tradicionalnih promotivnih kanala, kao što su TV, radio ili novine. Promotivna poruka je usmerena direktno na pojedinca, koristeći tehnike kao što su: katalozi, flajeri, pošta, telemarketing i slično. Direktni marketing je jedan od vrsta marketinga. Postoje dve glavne karakteristike koje ga razlikuju od ostalih vrsta marketinga. Prva je da svoju poruku šalje direktno kupcima. Druga karakteristika se sastoji u tome da direktni marketing kreira "poziv na akciju". Direktni marketing je najčešće korišćen od strane malih i srednjih preduzeća sa limitiranim budžetom za promociju i koja nemaju prepoznatljivu promotivnu poruku.

Internet marketing, ili digitalni marketing, web marketing, online marketing ili e-marketing, je marketing (promocija) proizvoda ili usluge preko Interneta. 63

Email marketing E-mejl marketing je oblik direktnog marketinga koji upotrebljava e-mejl kao sredstvo komunikacije između davaoca usluge i onih koji tu uslugu ili proizvod koriste. Kako je upotreba e-mejl-a široko rasprostranjena i dostupna svima, on se i koristi u svojstvu idealnog rešenja za promotivne aktivnosti. E-mejl marketing podrazumeva: slanje poruka već postojećim klijentima i kupcima tj. 64 upravljanje odnosa sa kupcima-CRM slanje e-mejl-ova sa reklamno-propagandnim oglasima radi sticanja novih kupaca i klijenata.

E-mejl marketing Za pokretanje uspešne e-mejl marketing kampanje neophodno je obaviti sledeće radnje: pokretanje mejling liste segmentiranje liste korisnika kreiranje i slanje e-mejl poruke korisnicima praćenje i analiza statistike poslate e-mejl poruke. 65

10 korisnih saveta za legalno reklamiranje putem e-mejla Pažljivo odrediti ciljnu populaciju kojoj se obraćate-uspešnost prodaje proizvoda i pružanja usluge direktno je vezana sa vašom procenom potencijalnih mušterija, ako je potrebno, napravite posebne verzije proizvoda za razlicite ciljne grupe. Pomozite Vašim mušterijama da postignu značajne uspehe koristeći Vaš proizvod ili uslugu- ukoliko im pomognete da to dostignu vaša prodaja može porasti. Koristite pravilo "4 prema 1"-za svako komercijalno obraćanje putem mejling liste, jednom "ja" treba da prethodi bar 4 "vi", mušterije vole da čuju da su oni prioritet broj 1. Podelite sa Vašim korisnicima "specijalne" informacije-e-mejl pruža mogućnost da se osoba kojoj se obraćate oseti posebnom, a idealan način za to je upravo deljenje neke značajne informacije. Šaljite poruke koje je napisao direktor kompanije-ljudima se dopada da komuniciraju sa glavnim osobama, na taj način stičete njihovo poverenje. Posebne ponude. Ovaj način pristupa je idealan za nove proizvode, usluge i prijave-pružanje specijalnih popusta. Koristite negativne činjenice da bi učinili vaše tvrdnje verodostojnim Ponudite više verzija istog proizvoda Koristite mejl adrese Vaših kupaca-ako ste nekome prodali proizvod pre izvesnog vremena, kontaktirajte ga, zadovoljna mušterija se često vraća. Postavite sebi isto pitanje koje postavljate drugim 66

Internet forum je posebna web aplikacija ili skripta koja 67 korisnicima omogućava raspravu o određenim temama. Internet forumi se često nazivaju i web forumi ili samo forumi. Razlika između foruma i elektronskih mail lista je u tome što mail liste automatski šalju nove poruke pretplatnicima, dok je kod foruma potrebno samostalno posetiti stranicu i pročitati poruku. Takođe, postoji mogućnost obavještavanja e-mailom o odgovaranju drugih korisnika na vaš post. Za pristupanje forumu potreban je samo Web citac, dok su za neke aplikacije potrebni posebni programi koji omogućuju čitanje vesti sa različitih strana. Za razliku od blogova, forumi dopuštaju svakome da započne novi razgovor, ili sudeluje u postojecem. Forumi se razlikuju i od chat soba zato što ucesnici ne moraju biti prikljuceni na Internet u isto vrijeme.

68

Merenje posećenosti sajta 69

70

71

Česte greške 1) Ne posmatrate stvari u celini 2) Ne razmatrate uticajne faktore 3) Orijentisali ste se ka pogrešnom proizvodu 4) Nemate originalnu Web poziciju 5) Niste istražili tržište 6) Ne posmatrate potrebe ljudi 72 7) Prerano ste odustali