Građenje sajta za početnike

1

Građenje sajta za početnike

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4449

Građenje sajta za početnike

Sadržaj:


Kako započeti?
Brzi WEB kreatori
Registrovanje hosting naloga
Flash i HTML5
Microsoft Web Matrix - Dobar početak
Otvaranje naloga na nekom hostingu
Skidanje FTP klijenta - FilleZilla
Instalacija FileZilla


Napomena! ::ZymicHost je nakon duže pauze ponovo proradio.

Predgovor

Sve češće srećemo sajtove na čije se pravljenje troši dosta novca, ali i pored toga se na njima ne vidi neki poseban smisao za dobar ukus, sve je nabacano, pretrpano, a ima i dosta widgets-a i linkova ka drugim sajtovima da čovek tu više ne može da se snađe. Ovaj članak namenjujem svim početnicima koji ne znaju kako da počnu ili su počeli, ali uprskali stvar.

Kako započeti?

Sve što vam treba na početku jeste ideja. Dakle, želite napraviti sajt koji se bavi jednom tematikom. Odlučite koja će to tematika biti. Evo nekog kraćeg pregleda (iako postoji još dosta tema kojima se sajt može baviti):


Naučno-istraživački sajt - edukacioni sajt na kome članovi mogu naučiti nešto novo.
Obaveštajni sajt - najčešće su to sajtovi velikih novinarskih redakcija, sportski sajtovi, sajtovi kladionica, sportske prognoze itd. Obaveštajni sajt se takođe može baviti opštom tematikom - domaće i vesti iz sveta.
Socijalna mreža - sajt koji spaja ljude iz jednog regiona ili celog sveta. U ove spadaju: socijalne mreže, raznorazni forumi, sajtovi sa uvedenim sistemom registracije i vođenja diskusija itd. Tu korisnici mogu opušteno ćaskati i razmenjivati iskustva.
Blog - vrsta sajta koji se obično bavi samo jednom tematikom i na kom administrator piše članke, a gosti ili članovi ih mogu komentarisati. Najčešće su blogovi autobiografski.
Najave - sajtovi čiji je rok ograničen, tačnije, služe kao najava nekog velikog događaja. Nakon što događaj prođe, sajt više nije tako aktivan ili ne služi ničemu.
WikiMedia - ovakvi sajtovi su slične strukture kao Wikipedia, a imaju istu namenu; članovi mogu uređivati i pisati članke bez obzira na to da li su se registrovali ili su gosti.


To je neki kraći pregled. Dakle, kada ste odlučili kojom će se tematikom sajt baviti i kakva će biti njegova struktura, možete početi sa odabirom alata.

Brzi WEB kreatori

Zaboravite na brze kreatore sajtova tipa:


Wix
Webs
Yola


Zašto?

Sajtovi koji su stvoreni na ovakav način su vrlo slabo rangirani u pretraživačima - pretraživači ih teže pronalaze. Kada budete odlučili da registrujete domen, moraćete da plaćate veće sume novca, a ako biste možda želeli da prebacite sajt na neki hosting možete samo "da sanjate", jer ovi brzi kreatori web sajtova su namenjeni početnicima, tako da je najbolje da u njima vežbate kako ćete uklopiti elemente u svoj pravi sajt.

Registrovanje Hosting naloga

Hosting sajtovi su oni koji vam daju prostor na Internetu gde možete izgraditi svoj sopstveni sajt. Postoje dve vrste hosting sajtova:


Besplatan hosting - nudi vam besplatan prostor na Internetu koristeći subdomen.
Tarifni hosting - imaju svoju tarifu, plaćate određenu cenu, ali zato dobijate mogućnost odabira adrese sa domenom.


Kada birate hosting, obavezno gledajte da isti podržavaju MySQL i PHP. Kasnije ću objasniti i zašto.

Predznanje ili gotovi šabloni

Imate dve mogućnosti. Ako želite da izgradite sajt koristeći sopstveno znanje, važno je da znate sledeće skriptne/programske jezike:

Dizajn stranica

HTML
CSS
JavaScript


Programiranje foruma ili baze podataka

PHP
SQL


Može, a ne mora...

XML
ASP.NET
jQuery


Sve ove skriptne i programske jezike (njihove osnove) možete naučiti ovde: http://www.w3schools.com

Ako ne želite da učite programske jezike, izaberite neki od najpoznatijih templejtova (šablona) za vaš web sajt:

WordPress
PHP forum

A za bolji izgled vaših sajtova i funkcionalnost:

MonsterTemplates
Templatemo

Lepši efekat i bolji dizajn samog sajta možete postići kontrolisanjem vašeg CSS fajla. Pravilnim korišćenjem CSS možete načiniti velik napredak na vaš sajt.

Flash i HTML5

Sve popularnije tehnike uređivanja web sajtova jesu dodavanje Flash ili HTML5 elemenata.

Ovde možete videti primere HTML5 sajtova: http://html5sites.com/
Sajt koji je izabran za najbolji sajt početkom 2013. godine , a koji sadrži Flash elemente: https://disneyworld.disney.go.com/

Microsoft Web Matrix - dobar početak

Microsoft nudi program za Windows u kome možete učiti HTML, CSS, JS, PHP, SQL, ASP i jQuery i koristiti znanje ovih programskih jezika direktno. Šta to znači, ustvari? Pa, samo me pratite i saznaćete u čemu je stvar.

Link za preuzimanje Microsoft Web Matrix 2:
Arrow http://www.microsoft.com/web/gallery/install.aspx?appid=WebMatrix




Microsoft Web Matrix će pri instalaciji automatski instalirati i komponente važne za rad, tako da nije potrebno preuzimati ih sa Interneta naknadno. Čak i kada počinjete sa radom u novom jeziku, automatski će se preuzeti priključci i ostali važni kontrolni fajlovi (naprimer, prvi put radite u SQL ili PHP).


Izgled početnog prozora u MS Web Matrix

Kliknite na Templates da izaberete tip sajta koji ćete raditi.


Početni dostupni templejtovi

Na početku imate 12 templejtova, međutim, ako vam ovo nije dovoljno, možete uvek dodati neki novi. Početnicima preporučujem HTML5 šemu.

Ja sam u ovom primeru izabrao šemu HTML5 - Boilerplate. Sledi objašnjenje svih delova programa.



Osnovne informacije o sajtu i deo za podešavanja



Alatke za pokretanje sajta, startovanje, stopiranje, restartovanje i deljenje na Web



Meni - u donjem delu menija biramo sekciju za podešavanja; osnovna konfiguracija sajta, fajlovi, baze podataka i prijave. Nama u sada treba deo sa fajlovima. Kliknite na Files.



Sada se meni izmenio, kao što vidite. Tu se nalaze svi fajlovi koje sadrži sajt.

Probajmo sada takav, već gotov sajt da pokrenemo. Pokrećemo ga tako što kliknemo na ikonicu .



Sajt je kao što vidimo prazan. Zašto? Zato što se trenutno u fajlovima poput .css, .html i ostalim konfiguracionim fajlovima nalaze samo osnovne funkcije za jedan sajt. Vi morate dodati sadržaj. Tu možete primeniti HTML, CSS, JS i ostale jezike koje sam vam pominjao. Sajt je pokrenut u LIVE režimu, tj., još nije na Internetu. Kako objaviti sajt kada sa njim završite?



Otvaranje naloga na nekom hostingu


Ovde dolazimo do dela kada treba objaviti sajt na Internet. Imate mogućnost da izaberete između hiljade i hiljade hosting provajdera, ali naravno, gledajte da budu zadovoljeni sledeći uslovi:


Besplatan hosting (za početak)
MySQL i PHP podrška


Još jedna stvar koja nam treba na početku jeste FTP klijent, odnosno program koji će ubacivati fajlove na sajt. U sledećim primerima ja ću koristiti Zymic hosting i FileZilla.


Zymic hosting: http://www.zymic.com/
FileZilla: http://filezilla-project.org/




Preuzimanje FTP klijenta - FileZilla


Dakle, ono što na početku treba da uradimo jeste da instaliramo FTP klijent. Idite na oficijelni sajt FileZilla produkta i kliknite na dugme obeleženo na slici.



Nakon toga će vam se prikazati stranica gde ćete izabrati koju verziju želite da instalirate (dobro gledajte da bude prilagođena vašem operativnom sistemu).




Sačuvajte fajl.
Pokrenite ga dvoklikom.
Potvrdite bezbednost klikom na dugme Run.










Instalacija FileZilla


Kliknite na I Agree.



Štiklirajte prvu opciju ako želite da instalirate program za sve korisnike računara, a drugu opciju ako želite da je instalirate samo za vas kao korisnika. Potom kliknite na Next.




Pogledajte dobro da li su vam štiklirane ove opcije kao na slici. Poslednju ne morate (ako štiklirate nju kreiraće se prečica na Desktop-u). Potom kliknite na Next.




Kliknite na Browse... da precizirate tačnu lokaciju gde će program biti instaliran sa svim pratećim fajlovima. Kada to završite kliknite na Next.




Štiklirajte opciju pri dnu (Do not create shortcuts) ako ne želite prečice do programa (Start Meni, Desktop...). Kliknite na Install da započnete instalaciju.




Kompjuter mora biti restartovan kako bi se instalacija završila. Klikom na Reboot now pa na Finish, računar će automatski zatvoriti sve trenutne programe i računar će se restartovati. Klikom na Manually reboot later, računar će se restartovati malo kasnije, ali ćete rizikovati da se to možda desi pri nekom vašem radu, tako da je najbolje da odmah restartujete računar i završite proces instalacije.





Korišćenje Zymic hostinga i koordiniranje sa FileZilla


Pre nego što počnete da koristite Zymic hosting, logično, morate se registrovati. Nakon što se registrujete idite na kontrolni panel.


Link za registraciju: http://www.zymic.com/sign-up/
Link za kontrolni panel: http://www.zymic.com/zcp/


Kada ste na glavnoj strani kontrolnog panela, malo niže pronađite ovo dugme i kliknite na njega:



//piii izgleda da ne mogu sad da registrujem akaunt Razz

Exclamation + Klikni da pročitaš!

Koristiću svoj nalog kao primer. Neke stvake su sakrivene (zbog ličnih bezbednosnih razloga), ali shvatićete već šta i kako treba. Obratite pažnju na levi deo oivičen jarkom crvenom. Tu se nalaze glavni podaci koje ćete iskoristiti pri aploudovanju fajlova na server.




Sledi kratak opis FileZilla elemenata.





Aploudovanje fajlova na server


Hajde da sada, kada znamo osnovu, aploudujemo neki fajl na server. Neka to bude glavna strana. Verujem da ste do sada ovladali veštinama HTML-a, međutim, vi možete aploudovati gotove fajlove (kao naprimer za forum ili WikiMedia priljučak).

Otvorite Notepad i upišite ovaj kod:

<!DOCTYPE html> <html>   <head>     <title>Naslov stranice</title>   </head>   <body>      <h1>Naslov</h1>     <p>Dobrodošli na sajt!</p>   </body> </html>

Sačuvajte ga na Desktop kao index.html.

Sada se vratite na onaj deo koji sam vam pominjao da obratite pažnju. Tu će pisati:


Host: imesajta.zxq.net
User: imekorisnika_zxq
Port: 21


Sada to koristimo da aploudujemo fajl na server. Zanči tamo gde u FileZilla piše Host:, ukucajte ono što vam piše pod Host: na kontrolnom panelu i tako za sve ostalo. Za Password upisujete šifru koju ste odredili na tom host nalogu. Kada ste sve to uradili kliknite na Quickconnect.




Konzola će odraditi svoje. Idite na direktorijum Desktop kao na slici dole i kliknite desnim klikom na onaj fajl koji ste napravili u Notepad (index.html), pa potom Upload. Ja sam sve to već uradio pa je fajl tu.






Proverite još jednom da li je fajl tu gde treba da bude.




Sada idite na adresu koju ste izabrali pri kreiranju host naloga. Evo kako to izgleda.




I to bi bilo to za sada Very Happy Kako biste poboljšali svoju početnu stranicu nastavite sa učenjem HTML-a i CSS-a, a ja ću sledeći put objasniti kako da dodajete direktorijume, tj., kako da bolje organizujete fajlove na vašem sajtu. Pozdrav Ziveli



Kreiranje direktorijuma


Da bismo lakše organizovali sajt, kreiramo direktorijume. Šta to znači? Pa zamislite da nam se sve stranice, prezentacije, projekti, slike i konfiguracioni fajlovi nalaze u jednom folderu. Stvarno zeznuto, zar ne? Pa zato je važno da ih grupišemo.

Ovde će se nalaziti spisak direktorijuma (foldera) na vašem sajtu. Kako kreirati novi direktorijum/folder?




Idete desnim klikom na ikonicu foldera pa na Create Directory, izaberite ime foldera i kliknite OK. Ja sam već napravio primer direktorijuma gde će se nalaziti ostale stranice.




I takođe napravio sam stranicu2 koja će biti stranica nakon Index-a. Kako da dobijemo pristup takvoj jednoj stranici?

imesajta.zxq.net/imedirektorijuma/imefajla


Pa da probamo:





Dizajn i usklađivanje elemenata


Prvo na šta korisnik obrati pažnju kada dolazi na neki sajt jeste raspored elemenata ili dizajn, a ja to još naziva mi web estetika. Šta to znači? Hajde da uzmemo za primer neke šeme.

Uzećemo sajt YoyoGames. Evo kako izgleda gornji deo:




Sajt je kao što i sami vidite, dizajniran prema ovoj šemi:

Gornji deo: Logo , Meni Telo: Slajd

Hajde da obratimo pažnju na drugi deo (donji deo sajta):




Donji deo je dizajniran ovako:

Donji deo: Slajd, Slajd, Novosti Dno: Pretplata, Informativni linkovi, Copyright

Question Šta sam ovim hteo da kažem?
Arrow Ovo je pravi primer sajta koji nema puno elemenata, ali bez obzira na to 'prija oku', nema kiča, ništa ne štreči, nema napadnih boja. Ovo su najveće mane današnjih sajtova - više se gleda na to da bude što više elemenata, dok se malo pridaje važnost samom ritmu.

Sa druge strane, postoje natrpani sajtovi za koje ne možemo reći da loše izgledaju, a pravi primer za to je Wikipedia:





Reference



Internet i njegovo funkcionisanje : http://tutoriali.org/Internet.html
HTML i CSS: http://tutoriali.org/HTML_i_CSS.html , http://www.w3schools.com/html/default.asp , http://www.w3schools.com/css/default.asp
JavaScript : http://tutoriali.org/AJAX_i_JavaScript.html
PHP : http://tutoriali.org/PHP.html , http://www.w3schools.com/php/default.asp
XML : http://www.w3schools.com/xml/default.asp , http://tutoriali.org/XML.html
ASP.NET : http://www.w3schools.com/aspnet/default.asp
SQL : http://tutoriali.org/Baze_podataka.html , http://www.w3schools.com/sql/default.asp
jQuery : http://www.w3schools.com/jquery/default.asp




Lista članaka sa MyCity-a koji vam mogu dodatno pomoći


Arrow http://www.mycity.rs/Web-dizajn/Osnove-HTML5.html
Arrow http://www.mycity.rs/Web-dizajn/Svet-web-dizajna.html
Arrow http://www.mycity.rs/Web-programiranje/Pravljenje-.....tstvo.html
Arrow http://www.mycity.rs/PHP/Framework-Za-Pocetnike.html
Arrow http://www.mycity.rs/PHP/PHP-Tutorijal-Kontakt-forma.html
Arrow http://www.mycity.rs/PHP/Instalacija-Apache-MySQL-PHP-na-lokalu-win.html
Arrow http://www.mycity.rs/ASP/ASP-Tutorial-Osnove-ASP-a-Deo-I.html
Arrow http://www.mycity.rs/ASP/ASP-Tutorial-Osnove-ASP-a-Deo-II.html
Arrow http://www.mycity.rs/ASP/ASP-Tutorial-Objekat-Request.html



Za kraj...


Potrudio sam se da vas ovim člankom uvedem u samu materiju web sajtova, šta je sve potrebno i kako sve to izgleda u praksi kroz slike. Nadam se da vam je sada mnogo lakše da neke stvari i sami shvatite. Naravno, ovo je samo delić onoga što sam hteo reći, jer kada bih sve to napisao ovde, trebalo bi mi jako puno vremena. Vama ostavljam da bolje izučite neke pojmove, a pre svega HTML i CSS jer bez njih ne možete skoro ništa postići na polju Web dizajna.

Dopuna: 14 Maj 2013 21:19

000webhost - registracija i upravljanje sajtom

Pošto ZymicHost već duže vreme nije u funkciji i nije moguće registrovati novi nalog na ovom hostingu, 000webhost biće savršena alternativa, čak i bolja.

Arrow 000WebHost
Arrow 000WebHost - Registracija

Registracija

Da biste registrovali morate da popunite formu u kojoj ćete dati sledeće podatke:


Ime sajta - poddomen se automatski generiše. Ako ne želite da koristite besplatnu varijantu, popunite prvo polje u koje ćete upisati nešto od sledećeg:

imesajta.com imesajta.org imesajta.net

U zavisnosti od toga koji domen želite.
Vaše ime - nije potrebno navesti puno ime i prezime.
Vaš mejl - mejl mora biti validan i postojeći jer će nakon registracije biti potrebna verifikacija naloga (potvrda da je mejl postojeći).
Lozinka - budite pažljivi pri odabiru lozinke! Izaberite lozinku koja sadrži i slova i brojeve!
Potvrda lozinke - potrebno je potvrditi lozinku. Vodite računa o tome da vam je isključen Caps Lock.



CAPTCHA - uobičajena sigurnosna provera u kojoj morate upisati simbole sa slike.


Napomena ::Exclamation Nakon reigstracije potrebno je potvrditi nalog (kliknuti na link za verifikaciju koji vam je stigao na mejl). Najbolje je ovo uraditi u roku od 24 časa od registracije.

Ako ste uradili sve što je potrebno, vaš prostor je sada aktivan i možete otići u Kontrolnu tablu.

Kontrolna tabla

Najvažnije stavke


Main Menu - Glavni meni
Domains - Rad sa domenima, parkiranje domena, promocija
Email - Rad sa mejlovima
Usefull staff - Korisne stvari (download kopije sajta, baze, postavljanje HTML elementa za praćenje pregleda, šabloni za sajt).
Files - Fajlovi, FTP
Software, services - Vizuelni web kreator, MySQL, PHP Admin, konfiguracija PHP-a.


Pošto sam vam pokazao kako da aploudujete fajlove na server, biće vam lako da to učinite i ovde. FTP detalje možete pogledati u stavci Files >> View FTP details.

Napomena ::Exclamation Pri aploudovanju fajlova na server preporučiljivo je koristiti SmartFTP i FileZilla klijente. Kada aploudujete index.html fajl na vaš sajt ako koristite 000webhosting obavezno obrišite default.php! Taj fajl je nevažan jer vas samo obaveštava da je nalog uspešno kreiran.



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 17 Jul 2013
  • Poruke: 10

kad sam ubacio index.html u filezilla-u i iso kasnije na sajt da vidim kako je ispalo, nije mi se pojavilo kao tebi sto si naveo u primeru... Tebi se pojavilo "dobrodosli..." a meni se pojavilo account succesfull created... Zasto to, gde sam pogresio??? o.O



offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4449

Napisano: 18 Jul 2013 15:39

Izvinjavam se, izgleda da nisam napomenuo da prvo moraš obrisati default.php fajl. Fajl kom si pristupio je baš taj i on te obeaveštava da je nalog uspešno kreiran. Ako želiš da ti se prikaže index.html moraš prvo obrisati default.php. Fajl .htaccess ne diraj da nebi poremetio sajt Smile

Nije mi sad FileZilla pri ruci, ali verujem da ćeš se snaći, ako negde zapne slobodno reci Ziveli

Dopuna: 18 Jul 2013 15:46

EDIT: Ažurirano u poslednjoj napomeni Ziveli

offline
  • Pridružio: 17 Jul 2013
  • Poruke: 10

Napisano: 19 Jul 2013 11:44

Nisam bas najbolje ukapirao odakle treba da obrisem default.php fajl, tj gde se on nalazi???

Dopuna: 19 Jul 2013 21:43

ako bi mogo odgovor, bio bih VRLO VRLO ZAHVALAN! Razz

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4449

Nalazi se u public_html folderu tvog sajta ako praviš sajt preko 000webhost-a.

offline
  • Badass
  • Ex-Military
  • Pridružio: 07 Maj 2004
  • Poruke: 1527
  • Gde živiš: Toplicki okrug

Ja sam napravio sajt preko WIX-a i registrovao besplatni domen na co.nr

Mislim da je dovoljno za nekoga ko zeli da samo prezentuje svoju firmu,proizvod, biografiju ili bilo sta jednostavnije.
500mb prostora, nije potrebno nikakvo znanje niti instaliranje programa ili placanje ,HTML5 ,search engine friendly...

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4449

@Lonely Eagle

U članku sam napomenuo zašto treba biti protivnički nastrojen prema tim besplatnim, brzim kreatorima sajta Wink U redu je ako naprimer neko želi da napravi neki najobičniji sajt ili da testira neke delove, ali ozbiljniji poslovi kao naprimer građenje sportskog portala zahtevaju malo više znanja Smile

offline
  • Pridružio: 17 Jul 2013
  • Poruke: 10

a ja sam poceo da radim preko zymic host-a...da li mozes da mi kazes gde se tu nalazi???
inace amater sam, i tek pocinjem da proucavam sve ovo i da se interesujem...:O
ako moze odg...UNAPRED HVALA!

offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4449

Zar Zymic host ne prima registracije već duže vreme Shocked BTW, reci mi koji ti se svi fajlovi nalaze u public_html folderu Smile Super je to, samo ostani u kontaktu tj. nemoj da nestaneš kako bi uspeo da plan sprovedeš u delo Smile

Uzgred, pošto kažeš da si amater, evo literature za HTML opisni jezik web stranica, on će ti biti temelj pa bi bilo lepo da ga proučiš, nije težak.

Arrow http://www.w3schools.com/html/
Arrow http://bubaj.com/index.php?html
Arrow http://dizajntutorijali.wordpress.com/2013/03/19/h.....ramiranja/
Arrow http://tutoriali.org/HTML_i_CSS.html

Juu, izgleda da je proradilo Razz Moram da ažuriram temu ponovo.

offline
  • Pridružio: 17 Jul 2013
  • Poruke: 10

A ne mogu da se snaadjem, tj ne mogu da pronadjem taj public.html folder...???? nzm gde se nalazi...:O
A uno hvala na literaturi za HTML...Smile

Ko je trenutno na forumu
 

Ukupno su 782 korisnika na forumu :: 50 registrovanih, 5 sakrivenih i 727 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 1567 - dana 15 Jul 2016 19:18

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 8u47, A.R.Chafee.Jr., aleksandar_tatic, aligrudici, AMCXXL, Andrija357, borko_marjanovic, cavatina, comi_pfc, dekir, dexus, doom83, dragoljub11987, dragon986, Filodendron, ILGromovnik, ivan979, ivica976, Kalalaika, Kožedub, krunomiletic5, Logic005, ltcolonel, Markobg, mačković, MB120mm, Mercury2, Milan Kosić, milandlc84.wow, milimoj, miracoric28, neko iz mase2, nesa1962, nesic1, pedja63, pein, proka89, RADOVAN.S, riva2, rkekoke, robertino, rodoljub, rovac, shone34, Vlada1389, vobo, voja64, weez, YU-UKI, zgembo