Web dizajn Izgradnja sajta od 0!

[NikiBgd]

Dragi moji izf-ovci,

Primetio sam kako se dosta ljudi u poslednje vreme oslanja na Wordpress (i njemu slicne) prilikom izrade vasih prezentacija, i to ne samo ljudi koji su svoja znanja stekli putem raznih tjutorijala i Youtuba, vec i iskuni developeri sa diplomama nekih od informatickih fakulteta. Ja sam odlucio da iz par delova ispricam kako je to graditi sajt od 0, koriscenjem samo obicnog text editora i jako bih voleo da cujem vase misljenje o tome da li je lakse mojim putem ili mozda nekim drugim, koriscenjem raznoraznih framework-a.

Glavni razlog zasto sam odabrao "from scratch" nacin izrade je sto sam potpuno slobodan u tome sta radim. To vam je kao kad hocete da nacrtate nesto, pa pred vama stoji beli papir, pa sta zamislite u glavi to prenesete na papir. Smatram da sa Wordpressom niste toliko slobodni, vec suprotno, da morate da se uklopite u temu koju ste izabrali. Da li ima mesta za manevrisanje? Ima naravno. Da li ga ima dovoljno? To ostavljam vama da procenite.

Kada pravite saj od nule, spremite se za barem 3 do 4 puta vise vremena koje je potrebno da se sajt zavrsi od onoga koje je potrebno prvaljenjem pomocu nekog framework-a. Svaki detalj moracete da iskucate rucno, od boje slova pa do formatiranja div-ova. Ovde moram da napomenem da se Bootstrap moze pokazati kao jako dobro resenje (ja ga licno nisam korisitio, ali sam od kolega nacuo, a i ovde na forumu, da je skorz kul), pogotovo kada se radi sa RWD. Ovo je mozda i dobar trenutak da napomenem da kada radite sajt od nule, dobra praksa za RWD je da podelite vas dizajn na 3 glavna dela (a mozda i na vise, zavisi od kvaliteta, finansija, vremena....):

1. Kako ce se prikazivati na pc-u
2. Kako ce se prikazivati na tabletima
3. Kako ce se prikazivati na mobilnim uredjajima

Ta podela se vrsi prema velicini ekrana, pa prema tome, treba kuckati 3 razlicita dizajana. Da li je to dosadno, jeste! Da li oduzima dosta vremena? Da. Da li imate odresene ruke da napravite 3 potpuno odvojena dizajna za ova 3 uredjaja? Naravno, i to je glavno mesto gde se vidi ta prednost.

Opisacu vam moj problem i kako sam dosao do resenja. To mozete da shvatite i kao neki tjutorijal, ali mozda i kao prekretnicu oko toga da li izabrati "from scratch" nacin rada(sto je danas jako jako retko) ili Wordpress nacin rada(sto je danas veoma cesto) ako ste na pocetku "karijere". Samo da napomenem jos jednu bitnu razliku. Za "from scratch" nacin rada vam je potrebno poprilicno znanje html-a, css-a, php-a i js-a, pa sam se zapitao da li je mozda i to jedan od razloga zasto ljudi biraju Wordpress?

Ukratko zadatak je bio da se napravi web servis za kreiranje faktura online. Ako se pitata sta je faktura, to je nesto slicno racunu(vi koji drzite neke firme mozete to bolje da razumete), s tim da se najcecesce korisiti u poslovanjima medju firmama. Ideja je da se omoguci firmama da kreiraju svoje naloge na servisu i da svaka firma ima listu svojih partnera. Kada firma iz lista svojih partnera odabere jednog, otvara se strana u kojoj su vec ispisani podaci firme i partnera(tj firmi kojoj se salje faktura) i sve sto je ostalo je da se popuni samo sadzraj te fakture, tj ono sta se naplacuje. Nakon toga se sve to pretvara u pdf format i moze da se sacuva na lokalnom pc-u. Evo cisto da vidite o cemu se radi.

Meni je za izradu svega ovoga iz opisa bilo potrebo negde oko 30-ak radnih sati, znaci cistih radnih sati(merio sam jer mi je bilo potrebno za naplatu). Zanima me vase misljenje poprilicno. Komentarisite slobodno, svako misljenje je dobrodoslo.

U sledecem delu, pisacu o tome kako sam osmislio bazu podataka i kako sam resio probleme koji su se pojavili jos na pocetku same realizacije.
Kraj prvog dela, do sledeceg dela :waving

 

[telekomsrbija]

Pisanje websajtova od NULE je svakako korisno znati, ali je potrebna velika količina znanja da bi se to sprovelo u delo a da bude korisno.

Takođe, za veće projekte je potreban tim jer pojedincu bi npr da otvori jedan webshop bile potrebne godine, a ovako preko gotovih rešenja ga može otvoriti za 15min.

Po meni, to je ponovno izmišljanje tople vode, jer i pisanjem websajta od nule uglavnom se piše primitivna verzija CMS dovoljna za održavanje te stranice bez mogućnosti za bilo kakve dodatke u dva klika kao što je moguće kod popularnih CMS-ova.


Pritom, i da se edukujete developer godinama za to, teško da može naplati realnu cenu njegovog utrošenog vremena za izgradnju tog websajta, kad će drugi ponuditi 10x manju cenu sa gotovim rešenjem koje će biti mnogo flexibilnije od tog. Jedino da radi u nekoj kompaniji kojoj su potrebni takvi ljudi, ali kao što reče svi se oslanjaju na gotova rešenja iz razloga jer su bolja u skoro svakom pogledu.

Takođe, sa pluginovima za popularne websajtove je ja još uvek nisam naišao na neku zamisao a da već nije napisana kao priključak, tako da i ako se nađe uvek se može platiti developeru se to napravi i dobijate produktivan websajt sa mogućnosti proširivanja uz tu opciju koja je nedostajala.


Svaka čast za web aplikaciju kreiranje faktura, jedino što mogu pohvaliti jeste dizajn same fakture. jednom rečju pregledno.

Ne znam jesi li radio za klijenta koji je to tražio i platio ili za sebe, ali ideja po meni samo izgleda ok, dok kad se pogleda u suštini izgleda beskorisno. Jedino može biti zanimljiva privatnicima u pokušaju za testiranje.

Ostavljati podatke trećem licu o svom prometu, klijentima, robi i šifrarniku svakako nije nešto što bi niti jedan privatnik uradio, osim ukoliko nije svestan posledica, a verovatno ima i takvih ako koriste taj servis.

Drugo, većina preduzeća koristi relativno jeftine programe koji imaju mogućnost da nalog za isporuku pretvore u fakturu i tako sačuvaju dragoceno vreme koje bi utrošili na prekucavanju u tom servisu.

I na kraju, takvo rešenje, pa i mnogo produktivnije se prilično lako može napraviti u excel-u, gde je fajl u lokalu pa nema potrebe ni za internet vezom ni za brigu da li će servis raditi ili će mu server pasti baš kada vas čeka kurir da pošaljete robu, a vi ne možete da napravite račun

 

[SahMat]

Kad već ne voliš popularna i jednostavna rješenja poput Wordpress-a, onda bi ti (po meni) najbolje bilo da napraviš svoj custom CMS, umjesto pisanja koda svaki put od nule.

 

[sunbeach]

Ja cesto pravim sajt od nule i to bas od nule sto znaci u notepadu kucam kodove rucno,zbog toga imam dobru poziciju na guglu jer su kodovi originalni sto je najvaznije za optimizaciju sajta.

 

[slnet]

Ja cesto pravim sajt od nule i to bas od nule sto znaci u notepadu kucam kodove rucno,zbog toga imam dobru poziciju na guglu jer su kodovi originalni sto je najvaznije za optimizaciju sajta.

Od ove rečenice da se napravi quote i ide viralno sto posto .

 

[sunbeach]

Dzabe je i viralno,jer vecina radi copy paste ili koristi vec sazvakane teme na blogeru ili WP-u pa im je lose kotiran sajt na guglu,kada se uradi sa originalnim kodovima dosta manje treba posla oko optimizacije (backlinkovi,reklamiranje,odabir 1000 kljucnih reci...)

 

[shulk]

Ja sam čak radio i forum skriptu od 0. I uvijek volim da radim sve od 0

 

[SpawneR]

Dzabe je i viralno,jer vecina radi copy paste ili koristi vec sazvakane teme na blogeru ili WP-u pa im je lose kotiran sajt na guglu,kada se uradi sa originalnim kodovima dosta manje treba posla oko optimizacije (backlinkovi,reklamiranje,odabir 1000 kljucnih reci...)

Pitam se kakve veze ima kod od nule sa backlinkovima i reklamiranjem ... Ja vam kao dizajner kazem da ne razumem zasto bi neko pravio sajt od nule osim ako je u pitanju neki mali portfolio.. Imamo WordPress, Jomlu, PrestaShop i jos mali milion CMS-ova... A da ne pricam o pluginovima za CMS skripte koje ti krate posao neverovatno.. Ako pravis sajt da zaradis a ne da gubis vreme oko dizajna uzmi WP ili neku CMS i pravi PARE, ne pravi KOD...

 

[shulk]

Dzabe je i viralno,jer vecina radi copy paste ili koristi vec sazvakane teme na blogeru ili WP-u pa im je lose kotiran sajt na guglu,kada se uradi sa originalnim kodovima dosta manje treba posla oko optimizacije (backlinkovi,reklamiranje,odabir 1000 kljucnih reci...)

Pitam se kakve veze ima kod od nule sa backlinkovima i reklamiranjem ... Ja vam kao dizajner kazem da ne razumem zasto bi neko pravio sajt od nule osim ako je u pitanju neki mali portfolio.. Imamo WordPress, Jomlu, PrestaShop i jos mali milion CMS-ova... A da ne pricam o pluginovima za CMS skripte koje ti krate posao neverovatno.. Ako pravis sajt da zaradis a ne da gubis vreme oko dizajna uzmi WP ili neku CMS i pravi PARE, ne pravi KOD...

I ja sam razmišljao o tome, i ne vidim zašto bi code utjecao na rangiranje. Sjećam se kada sam počeo u IM svijetu da sam pazio da je code uredan mislio sam da će to utjecati na rangiranje.

A što se tiče toga da izaberemo gotovi CMS, ili da radimo od 0. To sve zavisi od projekta. Ako ćeš ti da radiš neki veliki projekat, za neku veliku tvrtku a traži veliko programiranje, normalno je da ćeš da radiš od 0. A da ne pričam da ćeš morati koristiti framework-ove i da držiš čist i uredan code ako neki drugi programer nastavi projekat.

A opet volim da radim na svoj način, od 0 i bez frameworka. Ali se moram naviknuti na klijente

 

[sunbeach]

Dzabe je i viralno,jer vecina radi copy paste ili koristi vec sazvakane teme na blogeru ili WP-u pa im je lose kotiran sajt na guglu,kada se uradi sa originalnim kodovima dosta manje treba posla oko optimizacije (backlinkovi,reklamiranje,odabir 1000 kljucnih reci...)

Pitam se kakve veze ima kod od nule sa backlinkovima i reklamiranjem ... Ja vam kao dizajner kazem da ne razumem zasto bi neko pravio sajt od nule osim ako je u pitanju neki mali portfolio.. Imamo WordPress, Jomlu, PrestaShop i jos mali milion CMS-ova... A da ne pricam o pluginovima za CMS skripte koje ti krate posao neverovatno.. Ako pravis sajt da zaradis a ne da gubis vreme oko dizajna uzmi WP ili neku CMS i pravi PARE, ne pravi KOD...

Gugl roboti vise vole originalni kod i cesce posecuju takav sajt.Kada imas 10 naslova gugl roboti cesce posecuju origanalni tekst,nego kopiran tekst,ne znam kako drugacije da objasnim ali tako je kako je,na mom primeru.

 

[Kapetan Bačvica]

Gugl roboti vise vole originalni kod i cesce posecuju takav sajt.

Google roboti nemaju pojma o kodovima, niti ih je briga kako je web stranica programirana.
Jedino ako se u zadnje vrijeme nisu opametili, ali sumjam.
Koliko često posjećuju site ovisi o drugim stvarima, a koje su to; znaju svi koji su (barem malo) pomnije pratili ovaj Forum. :fever

 

[sunbeach]

OK ne vredi dajem otkaz.

 

[NikiBgd]

Ne znam jesi li radio za klijenta koji je to tražio i platio ili za sebe

Upravo tako.
Prvo hvala svima na komentarima, bice i nastavak price o tome, samo da nadjem malo vremena da slozim neki lep post.

Ne bih se bas slozio da google botovi ne prepoznaju iste stilove, moje neko iskustvo do sada.

 

[NikiBgd]

Ja cesto pravim sajt od nule i to bas od nule sto znaci u notepadu kucam kodove rucno,zbog toga imam dobru poziciju na guglu jer su kodovi originalni sto je najvaznije za optimizaciju sajta.

Isto. E sad nisam siguran koliko to utice na optimizaciju. Ja mislim (da ne citiram 2 puta) da google masine mogu da prepoznaju "slicne" sajtove, u smislu broj div-ova, njihvo raspored, sadrzaj i tako dalje (cak je i bilo reci na forumu o tome) i da takve sajtove downgrade-uje.

Ne znam jesi li radio za klijenta koji je to tražio i platio ili za sebe

Upravo tako.


Prvo hvala svima na komentarima, bice i nastavak price o tome, samo da nadjem malo vremena da slozim neki lep post. Drago mi je da postoje ljudi koji takodje rade kodove od nule, tj da postoje jos oni "pravi prgorameri"

 

[NikiBgd]

Dzabe je i viralno,jer vecina radi copy paste ili koristi vec sazvakane teme na blogeru ili WP-u pa im je lose kotiran sajt na guglu,kada se uradi sa originalnim kodovima dosta manje treba posla oko optimizacije (backlinkovi,reklamiranje,odabir 1000 kljucnih reci...)

Pitam se kakve veze ima kod od nule sa backlinkovima i reklamiranjem ... Ja vam kao dizajner kazem da ne razumem zasto bi neko pravio sajt od nule osim ako je u pitanju neki mali portfolio.. Imamo WordPress, Jomlu, PrestaShop i jos mali milion CMS-ova... A da ne pricam o pluginovima za CMS skripte koje ti krate posao neverovatno.. Ako pravis sajt da zaradis a ne da gubis vreme oko dizajna uzmi WP ili neku CMS i pravi PARE, ne pravi KOD...

SpawneR, nemoj da se ljutis, ali mislim da je tvoj pristup "pravi PARE, ne pravi KOD" jako jako pogresan. Sad mozete da me hate-ujete koliko hocete, ali evo jedna prosta situacija. Sta ako WP nema plug za to sto ti hoces? Sa druge strane, sasvim sam ubedjen da velike servise ne mozes da napravis koriscenjem samo WP plug-ina, a da ne pricam da je veoma cesto potrebno napraviti modifikaciju isith, sto ti bez kucanja koda i poznavanja programskih jezika za to nikako neces moci da napravis. Problem je samo sto je cena takvih projekata i po nekoliko hiljada evra i retko ces doci u situaciju da ih ti kao pojedinac radis, vec se to daje nekim programerskim kucama da odrade(ispravite me ako gresim ovde) zbog ozbiljnosti samog projekta, budzeta...

Sa druge strane, naravno da je gubljenje vremena praviti web prezentacije ( prezentivne stranice za neke male firmice, portfolia, prezentacije restorana, kafica i sl) kucanjem od nule, jer oduzima dosta vremena, a glavna poenta tih prezentacija i jeste da izgleda kul i da ostavi efekat, sto se mnogo lakse postize vec gotovim resenjima.

Moj savet ti je da svoje dizajnersko iskustvo i znanje obavezno dopunis, vise ces para uzimati, veruj mi

Ja cesto pravim sajt od nule i to bas od nule sto znaci u notepadu kucam kodove rucno,zbog toga imam dobru poziciju na guglu jer su kodovi originalni sto je najvaznije za optimizaciju sajta.

Isto. E sad nisam siguran koliko to utice na optimizaciju. Ja mislim (da ne citiram 2 puta) da google masine mogu da prepoznaju "slicne" sajtove, u smislu broj div-ova, njihvo raspored, sadrzaj i tako dalje (cak je i bilo reci na forumu o tome) i da takve sajtove downgrade-uje.

Ne znam jesi li radio za klijenta koji je to tražio i platio ili za sebe

Upravo tako.
Ideja je bila da se oslobodi zavisnost od same masine. Slazem se da on sve to moze da uradi i kroz neki program, ali je on na taj nacin vezan za taj racunar, a na ovaj nacin, on sve to moze da uradi preko neta, znaci sa telefona, tableta...

Prvo hvala svima na komentarima, bice i nastavak price o tome, samo da nadjem malo vremena da slozim neki lep post. Drago mi je da postoje ljudi koji takodje rade kodove od nule, tj da postoje jos oni "pravi prgorameri"

 

[Cafa]

Niki, potpuno si u pravu.

Ima ta jedna kultura pluginova koja očekuje da za sve postoji neki plugin pa ćeš ti to u pet minuta uključiti na svoj sajt i onda mlatiti pare. Rezultat tog zaglupljivanja bude da na kraju ne znaš ni napraviti sitemap bez plugina, ni login bez plugina, samo što ti ne treba plugin da se digneš iz kreveta ujutro.

Naravno, sve ovisi o projektu. Za neke projekte moraš sve raditi od nule, za neke ne smiješ jer ti se ne bi isplatilo i jer bi rezultat bio slabiji nego da si samo instalirao Wordpress temu.

Meni se sviđa ovo što radiš, jer znam da je pisanje faktura na kompjuteru mnogim firmama veliki problem. To znači da za tvoj proizvod postoji tržište, samo kontaktiraj te firme i objasni im koliko im olakšavaš posao. A onda kad budeš imao dovoljno klijenata, odmah imaš i prolaz kad razviješ nešto novo - možda doguraš i do pravog malog knjigovodstvenog programa.

Samo se nadam da ovo sve radiš za sebe, a ne da si odradio jednokratni posao za jednu firmu kojoj je trebalo rješenje za fakture. Šteta bi bila raditi sve ovo za 1 firmu. Ima bar 1000 firmi samo u Beogradu kojima ovo treba.

Jedna bitna stvar, u današnje vrijeme imaš mali milion rezolucija a sve na različitim veličinama ekrana. Tako da ako dizajniraš za 2048x1536 ti ćeš pomisliti da radiš za ogromni televizor, a zapravo se radi o iPadu Mini na pišljivih 7.9 inča i sav tvoj tekst će biti nevidljiv. To da ti tekst bude otprilike jednako čitljiv na svim aparatima, to je prava nauka. Zato je rađenje mobilne verzije sajta "od nule" greška u koracima. Tu ti treba framework koji će riješiti probleme umjesto tebe.

P.S. Google vidi ono što vidi browser, ali u tekstualnom obliku. Google vidi HTML markup i CSS (da bi provjerio jesi li recimo sakrio neki bijeli tekst na bijeloj podlozi) ali tu njihov interes staje. Ne daju ti pozitivne bodove za jedinstveni kod. Sigurno ne vide PHP source jer ga ne može vidjeti nitko. Tako da su za njih Wordpress sajt i "od nule" sajt jednaki što se koda tiče.

 

[sunbeach]

Dobro kako onda objasniti kada postavim novu temu na moj sajt sa originalnim kodom od nule napravljen html,bude odma indeksiran i kao da sam postavio na fb post znaci html post u sekundi je indeksiran i pozicioniran na prvom mestu u trazilici a taj isti post na WP znaci naslov i tema su isti i ranije je postavljen nego na sajtu gde je originalni html kod bude indekssiran mnogo kasnije sat dva...

Nisam ni napisao da moze da vidi php.

 

[NikiBgd]

Samo se nadam da ovo sve radiš za sebe, a ne da si odradio jednokratni posao za jednu firmu kojoj je trebalo rješenje za fakture. Šteta bi bila raditi sve ovo za 1 firmu. Ima bar 1000 firmi samo u Beogradu kojima ovo treba.

Ceo projekat je u saradnji sa jednom knjigovodstvenom agencijom koja ce, kao deo svojih usluga predstaviti ovaj servis svojim klijentima za pocetak, a ako se sve bude pokazalo kako treba, taj servis ce ostati besplatan za klijente te agencije, dok ce se inace naplacivati neka godisnja clanarina.

 

[NikiBgd]

Drugi deo - izgradnja baze

Kao sto sam i obecao, evo nastavka price o tome kako je graditi sajt od 0. Svaki iole ozbiljniji projekat koristi baze podataka. Na meni je bilo da osmislim ceo koncept baze i to povezem sa mojim sajtom. Sigurno ste culi za "koncept drustvene mreze". Kao i na svakoj drustvenoj mrezi i ovde je bilo potrebno omoguciti registraciju korisnika, njegov kasniji log in, kao i listu prijatelja(korisnika) za koje je moguce kreirati fakture. Medjutim, prica od ideje do realizacije ponekad ume da bude mnogo slozenija nego sto zaista ocekujemo. Tako je bilo i sada.

Za izradu baze korisitio sam MySQLi. Prva preporuka je da napravite database connection file (poznatije kao db.con) i da ga smestite na posebno lokaciju, zakljucanu dodatim password-om. Ovo je neka moja praksa iz nekih ranijih projekata, 2 minuta posla, a moze znaciti mnogo u nekim slucajevima Za one koji ne znaju, ovaj fajl ustvari predstavlja pristupne podatke za vazu baze, Prilikom postavljanja upita unutar web stranice, morate se prvo povezati na bazu, pa je najbolje da to uradite u zasebnom fajlu -> db.con.php . Evo i primera:

<?php
	define ("MYSQLI_HOST","ime_hosta");
	define ("MYSQLI_USER","user_name");
	define ("MYSQLI_PASS","password");
	define ("MYSQLI_DB","ime_baze");

	function connect(){
		global $link;
		$link = mysqli_connect(MYSQLI_HOST, MYSQLI_USER, MYSQLI_PASS, MYSQLI_DB)
					or die('Greska pri konekciji:' . mysqli_connect_error());
	}
?>

Osnovna ideja u izradi baze bila je da postoje 2 tabele: korsnici i lista prijatelja. U tabeli korisnici nalazili su se podaci za svakog pojedinacnog korisnika - ime firme, adresa... i jos jedno jako bitno polje: jedinstveni ID korisnika. Tabela lista prijatelja sadrzi samo 2 kolone: ID korisnika i ID prijatelja. Koncept je sledeci: kada se korisnik uloguje na svoj nalog, salje se upit bazi za njegove podatke, ali se odmah nakon toga salje i upit za drugu tabelu, gde se za njegov ID vracaju ID-evi svih njegovih prijatelja. Na taj nacin dobija se lista svih prijatelja ulogovanog korisnika, pri cemu za svakog od svojih "prijatelja" ima mogucnost kreiranja fakture. Tada se korisnik redirect-uje na stranicu za kreiranje fakture, pri cemu svi podaci i posiljaoca i primaoca fakture bivaju automatski popunjeni i ostaje samo da se popuni sta je tacno predmet racuna(za razliku od "free" verzije gde korisnik mora sam da popunjava sve od podatke). Naravno, treba voditi racuna da se prilikom kreiranja tabela u bazi postave ispravni primarni kljucevi.

Za tebelu "lista prijatelja" primarni kljuc su obe kolone (dakle i ID i ID prijatelja) jer ne bi smelo da se pojavi da jedan korisnik ima istog prijatlelja 2 puta. Dakle, kombinacija 1455, 1456 ne bi smele da se jave 2 puta! Takodje, treba napomenuti da nije dozvoljeno ni da korisnik sam sebe izabere za prijatelja.

Ovakav nacin kreiranja lista prijatelja naziva se "koncept drustvenih mreza". Primeticete da sve drustevene mreze funkcionisu na slican nacin. Naravno, ovo sto sam ja napirao je jedan veoma veoma uproscena verzija, ali to su osnove. Nisam hteo da vas gnjavim pojedinostima iz implementacije, medjutim, ako nekoga zanima malo detaljnije, slobdno neka pise. Ako ste zainteresovani bice jos nastavaka

 

[belmo996]

Molim autora teme da mi pojasni koju ja to slobodu, kao developer, nemam u WordPress-u, Bootstrapu, Laravelu, Joomli i slicnim CMS-ovima i frameworcima ?

U 2015 godini raditi nesto od nule je suludo i izmisljanje tople vode - uz sve to zahtjeva mnogo vise vremena, samim tim i novca i zadaje vise glavobolje.

Ja ovdje ne pricam o likovima koji nadju temu za WP, nabacaju 20 Plugina i hvale se kako su napravili sajt - znaci razgovaramo o developerima.

Hvala.