Pitanje 1: Prvo što me je zanimalo u čemu se radi, tj. šta ti koristiš za kucanje koda? Nama je za ispit profa tražio Notepad++, ali sam sada instlirao Dreamweaver, koji mi nije baš legao, pa sada kucam u NetBeans-u, on mi je dobar.

U startu si napravio dobar izbor. Kada sam počinjao pre 5-6 godina tu nije bilo mnogo izbora. Dreamweaver 2004 je bio de facto najbolji editor za html i css. Meni je on u početku odgovarao jer sam mogao da splitujem view i da vidim i kod i rezultat kodiranja, onosno kako će izgledati. Nisam ni morao da pišem CSS, već da kroz razne menije stilizujem sajt. Ali, onda sam na Internetu nalazio preporuke da je taj način loš i da ništa neću naučiti, pa sam se trudio da shvatim kako funkcioniše box model, šta su block, a šta inline elementi, učio one sve fore iz CSS-a i krenuo samostalno da pišem kod. Bilo je tu mnogo muke, nisam imao nikog da mi objasni šta je šta i kako funkcioniše, već sam sam istraživao i isprobavao razne tehnike. Kad ukapiraš stvari, shvatiš koliko je to zapravo jednostavno

Kasnije, sa Dw sam prešao na Zend Studio, zato što je imao mnogo bolju podršku za PHP od Dw koji je ranije imao samo syntax hightlighing, bez autocomplete opcije.

Sada koristim nekoliko editora, za razvoj Netbeans ili PhpStorm, neki projekti su mi u jednom, neki u drugom, nisam se još odlučio koji da mi bude default za razvoj.  Notepad++ mi je default editor u Windowsu, služi mi uglavnom za brzo pregledanje fajlova, možda neke brze izmene (ne bih da čekam 5min da mi se Netbeans digne).

Za bilo kakav ozbiljan razvoj jako je bitno da to bude IDE, a ne običan editor. Debugger, inteligentan autocomplete i mnoge druge pomoćne opcije se više nego korisne.

Pitanje 2: Od čega početi? Prikupiti materijal, napraviti strukutru pa onda index. Ali, koje smernice pratiti? Koliko nivoa u dubinu, koliko i kakvih menija praviti?

Nema nekog univerzalnog pravila i uglavnom zavisi od vrste i veličine projekta. Na primer, nekada je dobro  krenuti od dizajna, nekada od definisanja strukture i elemenata, nekada od projektovanja baze podataka, a nekada i od pisanja frejmvorka.

Verovatno se pitanje odnosi na strukturu svih stranica, odnosno sitemap iliti hijerarhiju stranica. Jedno je samo važno – web razvoj nema konačno stanje, pa ti zato preporučujem da krećeš od jednostavnijih struktura, do prvog nivoa. Kasnije, uvek možeš dorađivati i širiti hijerarhiju, što opet zavisi od tipa projekta, ali uvek vodi računa da to bude što jednostavnije za razumevanje.

Pitanje 3: Horizontalni meni – neko ga uradi kao UL listu, a negde sam video i kao skup „left float“ divova. Šta je bolje?

Bolje je da to bude lista linkova (UL LI) i to samo zbog semantike, jer je nekako logično da ti linkovi budu grupisani u neku listu, dok DIV (divizija ili sekcija) element bi trebalo da koristiš za grupisanje i pozicioniranje elemenata na strani (npr header, footer, sidebar, article). U oba slučaja, CSS kod će biti maltene isti.

Pitanje 4: Posle završene index stranice, da li prekopirati kod (tj header, footer, menu divove) pa menjati centralni sadržaj tako dobiti nove html stranice ili se to radi na neki drugi način

Ne, nikako. To će ti postati najgora noćna mora kada budeš trebao nešto da promeniš, moraćeš to isto da uradiš na mnogo drugih mesta. Razmisli o tome da uporedo sa HTML i CSS-om učiš i PHP.  Ukratko, vrlo je jednostavno da podeliš HTML na delove i da ih „ubacuješ“ na stranicu po potrebi, pa tako možeš imati više HTML fajlova sa PHP ekstenzijom – header.php, index.php, footer.php i onda ćeš samo u index.php dodati <?php include „header.php“; ?> To je najjednostavan primer, vremenom ćeš videti kako neki paterni (MVC) i neke biblioteke (Smarty) ti mogu dosta olakšati razvoj.

Srećno, javi kada napraviš i postaviš svoj prvi sajt

Ukoliko ste se bavili optimizacijom sajtova, verovatno ste naleteli na dobro poznate savete od Yahoo-a i prvi među njima savet za smanjenje broja HTTP zahteva. Kombinovanje više sličica u jednu i prikazivanje delova te kombinovane slike preko koordinata (background-position u CSS-u) ima svoje ogromne prednosti.

Uzmimo za primer da na stranici imamo tri liste sa tri različite sličice za strelice. Kombinovanjem, tri sličice možemo spojiti u jednu.

U CSS fajlu je takođe veoma jednostavno podesiti putanje do sličice, i koordinate za svaku listu posebno. Ujedno, CSS kod sličan ovome se može videti na mnogim sajtovima širom interneta, recimo A List Apart – CSS Sprites ili Image Sprite CSS Navigation.

ul {
	list-style-type:none;
}
ul li {
	padding-left:15px;
}
ul#black li {
	background: #fff url("arrows.jpg") no-repeat left 6px;
}
ul#blue li {
	background: #fff url("arrows.jpg") no-repeat left -14px;
}
ul#green li {
	background: #fff url("arrows.jpg") no-repeat left -34px;
}

I ako je to putanja do iste sličice, sa ovakvim kodom možemo samo pogoršati situaciju. Naš browser će poslati tri zahteva za istom sličicom i download-ovaćemo tri iste slike. Pošto je kombinovana slika većih dimenzija i veće težine od svake pojedinačne, jasno je da se ovakvom metodom uvećava protok podataka za 3 puta.

Rešenje ovog problema je veoma jednostavno i treba samo jednom “pozvati” tu sličicu, a poziciju im podesiti, za svaku listu posebno.

ul {
	list-style-type:none;
}
ul li {
	padding-left:15px;
}
ul#black li, ul#blue li, ul#green li  {
	background: #fff url("arrows.jpg") no-repeat;
}
ul#black li {
	background-position: left 6px;
}
ul#blue li {
	background-position: left -14px;
}
ul#green li {
	background-position: left -34px;
}

Možete pogledati i primere neoptimizovanog koda i optimizovanog, koji koriste različite CSS fajlove.

Dodatak: Kako videti i analizirati HTTP zahteve?

Postoji mnoštvo softvera koji omogućavaju skeniranje protoka na mrežnom adapteru računara. Moguće i najbolji među njima je Wireshark, koji može da analizira sve protokole.

Web programerima će sigurno dosta zanimljiviji biti plugin za Firefox – Live HTTP Headers. A evo i rezultata iz njega na kome se više nego jasnije vidi rezultat optimizacije.

Na tabu “Headers” možete videti kompletne GET I POST zahteve, sa headerom, kao i kompletne odgovore servera. Na tabu “Generator” se nalaze samo uprošćeni zahtevi, bez headera. Trebate samo imati u vidu da se sličice keširaju na lokalnom računaru i da ukoliko ste već posetili neku stranu, verovatno je da  zahtevi se neće pojaviti. CTRL+F5 daje realnu sliku.