Nekada pre, kada Web kao skup tehnologija nije bio tako širok i kompleksan jedna osoba je mogla “sve” sama da obavi, sto bi značilo dizajn, programiranje/kodiranje i održavanje. A onda smo sa razvojem dinamičkih web sajtova dobili podelu na web dizajnere i programere.

Tadašnji web dizajneri su imali zadatak od osmišljavanja vizuelnog identiteta sajta (logo, boje i sl), preko projektovanja korisničkog interfejsa do samog kodiranja u HTML-u i CSS-u (a ponekad i JavaScript-u mada se to većinom svodilo na čisto kopiranje ili doradu gotovih skriptova).

Web 2.0, ma koliko izlizana ta reč bila, je uneo još više kompleksnosti u razvoj web sajtova a tu pre svega mislim na AJAX, manipulaciju DOM-om (tj samim elementima stranice), animacije pomoću JavaScript i slično.
Pored toga, validnost stranica sto se tiče samog XHTML i CSS koda, kao i njihova semantička ispravnost i cross-browser kompatibilnost su postajali sve bitniji.

Sve to zajedno je dovelo do cepanja prethodne definicije radnog mesta web dizajner na dva nova radna mesta: web dizajner i front-end web developer.

Iako i dizajneri imaju unutrašnje podele kao što je na primer UI dizajner, to nije tema ovog članka nego opis čime se bavi i šta sve treba da zna jedan front-end web developer.

Ovo je kratki pregled tehnologija i jezika koji jedan front-end developer mora da poznaje…

XHTML

Da počnemo sa osnovama: pre svega odlično poznavanje i veština pisanja semantički ispravnog XHTML koda, važno je da se za svaki element na web stranici upotrebi odgovarajući tag, kako bi se jasno odredio smisao tog elementa.

Takođe neophodno je poznavanje tipova elemenata (npr block, inline…), pravila po kojima se pišu i ugneždavaju.
XHTML je uveo stroga pravila pisanja prema XML standardima.

CSS

Tek kada je obezbeđena solidna osnova u pravilno formatiranom kodu, prelazimo na definisanje izgleda tj prezentaciju same web stranice. To postižemo sa CSS kodom.

Veoma je važno izvršiti razdvajanje sloja prezentacije od sloja podataka, tj ne mešati XHTML i CSS kod nego ga pisati u odvojenim fajlovima.
Više o podeli web stranice naslojeve možete pročitati u članku Tri sloja Web stanice.

CSS proizveden od strane front-end developera treba da bude validan, po mogućnosti bez hack-ova i filtera, da ispravno radi na bar dve poslednje verzije aktuelnih browsera (FireFox, Opera, Safari, Chrome, Internet Explorer).

JavaScript

JavaScript je skriptni jezik koji se izvršava na samom browser-u.
Između ostalog, omogućava dinamičko menjanje pojedinih delova stranice od njihove pozicije, izgleda do samog sadržaja.
Ostale mogućnosti se tiču uslovne logike i petlji, manipulacija i pretraživanje podaka (RegExp),

U kombinaciji sa DOM-om (koji predstavlja HTML stranicu u obliku stabla) moguće je pristupiti bilo kojem elementu stranice radi manipulacije njime.

A kada u pomoć pozovemo AJAX, dobijamo napredne web aplikacije koje mogu da povlače nove podatke sa servera bez potrebe za ponovnim učitavanjem cele stranice.

JavaScript je omogućio Web kakav danas poznajemo: dinamičan, animiran, prilagodljiv, susretljiv i sve ostale osobine koje krase Web 2.0 sajtove.

Ostalo

Pored navedenog poželjno je i barem osnovno poznavanje: XML i XSLT jezika.

Takođe, dobro poznavanje navedenih tehnologija nije dovoljno samo po sebi. Web se strahovito brzo razvija jer nove tehnologije, trendovi i tehnike se pojavljuju svaki dan.

CSS tehnike kao što su Sliding doors, CSS Sprites, Faux Columns, Image replacements i druge uveliko unapređuju mogućnosti i funkcionalnost web stranica.

Dok JavaScript biblioteke kao što su jQuery, MooTools, Scriptaculous i ostale, olakšavaju i ubrzavaju pisanje interaktivnijih web sajtova koji se dobro izvršavaju na svim browser-ima.

Samo kodiranje za različite vrste browser-a, njihovih verzija kao i operativne sisteme na kojima se oni pokreću je posebna priča koja izrazito otežava život web developerima.

U jednom od narednih članaka ću se osvrnuti na pakao cross-browser razvoja web sajtova.
Samo da napomenem da je situacija danas mnogo bolje što se tiče XHTML-a pa i CSS-a, dok je JavaScript podrška u nekim browserima (hint: M$) još uvek u debelom zaostatku.

Kodno ime Baker dobila je po legendi Jazz muzike, Chet Baker-u.

Ovo je kratak pregled šta nam nova verzija donosi:

• Poboljšanja tema, widget-a, taksonomije i celokupne brzine
• Olakšano pretraživanje i upravljanje dodacima (plugin-ovima) i temama
• Ispravljeno je preko 790 grešaka
• Mogućnost aranžiranja dela za administraciju jednostavnim pomeranjem delova interfejsa (widget-a)
• Podrška za IIS 7.0 URL Rewrite modul
• Označavanje koda prilikom editovanja teme i dodataka
• Podrška za vremenske zone i automatsko prilagođavanje vremena
• Podrška za jQuery biblioteku za JavaScript, i automatsko učitavanje minimizovane verzije

i mnoga druga poboljšanja i mogućnosti… Za punu listu pogledajte stranice WordPress-a za verziju 2.8.

Vizuelno, nova verzija WordPress-a mnogo podseća na prethodnu verziju 2.7 ali je dosta brža i prilagodljivija.

Brzi video pregled novog WordPress-a

Verovatno većini početnika i osobama koje ne ubacuju HTML kod u sadržaj odgovara takvo ponašanje WordPress-a.

Za one kojima je kao meni potrebna potpuna kontrola nad sadržajem članaka i stranica u WordPress-u, postoji odlično rešenje još od verzije WordPress-a 2.0.

Postoje dve funkcije, tačnije filtera koji menjaju vaš sadržaj u WordPress-u, u pitanju su:

• wpautop - Kao sto mu ime kaže Auto paragraph, dodaje p tagove tamo gde (često pogrešno) smatra da treba
• wptexturize - Menja sam izgled teksta, pokušavajući (često bespotrebno) da ga ulepša

Rešenje

se svodi na dva koraka:

1. U gornjem desnom uglu imate dva taba na kojima piše Visual i HTML, prvi je obično odabran i u njemu će WordPress značajno uticati na vaš sadržaj dodajući na svoj način razne HTML tagove. Zato treba odabrati drugi tab HTML, u kojem imate slobodu da sami formatirate sadržaj pomoću vašeg HTML koda
2. Isključiti filtere wpautop i wptexturize, a sledi uputstvo kako to uraditi

U folderu u kome se nalazi vaša WP tema, pronaći fajl functions.php, i u njega ubaciti sledeće linije koda:

//iskljuci filter wpautop
remove_filter ('the_content',  'wpautop');

//iskljuci filter wptexturize
remove_filter('the_content', 'wptexturize');

unutar php tagova.

Ukoliko ne postoji taj fajl, dovoljno je kreirati jedan pod tim imenom sa sledećim sadržajem:

< ?php
//iskljuci filter wpautop
remove_filter ('the_content',  'wpautop');

//iskljuci filter wptexturize
remove_filter('the_content', 'wptexturize');
?>

Samo da naglasim, da nije neophodno ići kroz već unete članke i stranice i iz njih uklanjati p, br i ostale tagove koje je WordPress ubacio, zato što je vaš sadržaj u bazi snimljen bez navedenih tagova. Ti tagovi se dodaju tek prilikom prikazivanja sadržaja u browseru.

Dakle, ovo rešenje će funkcionisati i kod već unesenog sadržaja.

Posle završetka ispita, još isto veče (subota 30. maj), profesor je na svom blogu predstavio moj sajt među ostalim radovima studenata sa Specijalističkih studija.

Ovo je prikaz uticaja objavljivanja linka u članku od strane autora poznatog i često posećenog bloga.

Analitika (Google)

Slika prikazuje posećenost od dana pre puštanja ovog sajta u funkciju, 24. maja, pa do 5. juna, tj 7 dana posle ispita.
U periodu od polaganja 30. maja pa do 5. juna nijedan članak nije objavljen, tako da nije bilo uticaja sa te strane na posećenost bloga u tom periodu.

Plava linija predstavlja broj poseta ovom sajtu koje su dolazile za sajta profesora Varagića dok siva linija prestavlja ukupan broj poseta mom sajtu.

Kao što vidimo od dana objavljivanja (30. maj) linka na ovaj sajt, na blogu profesora Varagića, broj poseta značajno raste i velika većina posetilaca dolazi upravo sa spomenutog bloga.

U tabelama su naravno i ostali podaci, koji se odnose na posete sa navedenog referral-a, i pokazuju statistiku i ponašanje posetilaca koji su došli sa tog sajta.
Među najbitnijim podacima su:

• Broj poseta sa referrala-a: 65
• Prosečan broj pregledanih stranica po poseti: 3.82
• Prosečno provedeno vreme na sajtu: 6 minuta i 5 sekundi
• Procenat novih poseta koje su došle sa referral-a: 81.97%
• Procenat poseta koje su završile nakon prve pogledane stranice (bounce rate): 31.15%

Referral jeste sajt, u ovom slučaju blog profesora Varagića, sa kojeg je došao posetilac na vaš sajt, u ovom slučaju moj sajt.

1. Sadržaj
2. Prezentacija
3. Ponašanje

Sadržaj

Jeste ono što se nalazi na stranici opisano putem HTML-a koji daje semantičku vrednost tekstu, slikama, tabelama i drugim elementima na stranici.

Ono što je veoma važno jeste da se HTML koristi samo za opisivanje sadržaja (Što mu i jeste namena) a ne za određivanje izgleda stranice.

Prezentacija

Pomoću CSS-a dodeljujemo različit izgled spomenutim HTML elementima na stranici.

Tek njegovom pojavom omogućena je separacija sadržaja od prezentacije i time je razvoj i održavanje web stranica značajno unapređeno.

Jednim CSS fajlom smo u mogućnosti upravljati izgledom celog web sajta bez obzira koliko on imao stranica.

Ponašanje

JavaScript uvodi interaktivnost na web stranice i predstavlja treći sloj.

JavaScript sa manipulacijom DOM-a i AJAX-om je omogućio razvoj Web 2.o i Rich Internet Aplikacija.

Najbolja praksa je pisati JavaScript kod u posebnom fajlu a pomoću dodeljivanja eventa možemo svakom elementu dati potrebnu funkcionalnost i interaktivnost.

Odvajanje ova tri sloja je veoma važno kako sa aspekta razvoja tako i sa aspekta naknadnih dorada i održavanja. Takođe, Progressive enhancement se zasniva na razdvojenim slojevima ali o tome više u nekom narednom članku.

Učestvujući u selekciji i vođenju intervuja primetio sam da pripremljenost većine kandidata nije bila na odgovarajućem nivou.

Dosta grešaka su se odnosile na CV, popratno pismo, pripremljeni materijal i slično, pa sam odlučio da napišem par saveta kako se što bolje prijaviti za konkurs.

Prvo da krenemo od sitnica:

• Mail adresa sa koje šaljete treba da bude ozbiljna i profesionalna, najbolja praksa je ime.prezime@adresa.com ili slicna kombinacija imena i prezimena
• Obratite pažnju na pravopisne greške, formatiranje teksta i način obraćanja jer sve to govori o vašim karakternim osobinama
• CV prilagodite radnom mestu na koje konkurišete, što znači da izbacite nepotrebne delove a naglasite one koji su bitni za to radno mesto
• Veoma važno: napravite prioretizaciju vaših znanja i veština (npr: kao dizajner nije dobro da postavite u isti red i MS Word i Adobe Photoshop)
• Ako u oglasu piše da treba poslati i portfolio, onda ga obavezno i pošaljite (ako ga nemate onda očito niste odgovarajuća osoba za taj konkurs)
• Što se samog portfolia tiče, kao liste radova, bolje je poslati 3 dobra rada nego 10 na kojima je većina ispod proseka - dakle napravite sami selekciju onoga što ćete prezentovati
• Poslovno pismo se podrazumeva da napišete i za razliku od CV-a nema tako strogu formu pisanja, ali je veoma važno da bude napisano za oglas na koji konkurišete a ne da stalno jedno te isto poslovno pismo svuda šaljete (barem ga u manjoj meri prilagodite)

Pored navedenih stvari, važno je paziti na vašu on-line reputaciju… Recimo da na Facebook-u objavite slike u nepriličnim situacija ili tekstove koji vas predstvljaju u lošem kontekstu. Jer postoji velika mogućnost da ukoliko poslodavac bude ozbiljnije zainteresovan za vas da uradi neko brzinsko istraživanje unosom vašeg imena u Google.

Nakon svega bih vam preporučio odličan sajt koji će vam pomoći u pisanju CV-a, popratnog pisma i u pripremanju za intervju: http://poslovi.infostud.com/

Verujem da je većina čitalaca čula za ovaj veoma uspešan i koristan sajt ali se u praksi pokazalo da premalo ljudi koristi znanje i savete koji se tamo nude.

I za kraj: Srećno!

Navešću tri osnovna nivoa on-line pristunosti sa razlozima za njihovo postojanje, prema ličnom doživljaju spomenute teme.

Informacije o kompaniji (pretraživost)

U doba visoke penetracije Interneta u kućama, kafićima i raznim drugim mestima i ustanovama, svaka, iole ozbiljnija, kompanija bi trebala na Internetu da postavi makar najosnovnije podatke o sebi tipa: kontakt telefon, adresa i radno vreme.

To bi omogućilo svakoj potencijalno zainteresovanoj osobi da brz i lagan nacin dođe do preciznih i ažurnih informacija o kompaniji koju je zainteresovan da poseti.

Predstavljanje proizvoda i usluga (katalog)

Korak dalje bi bilo postavljanje kataloga ili opisa robe i usluga koje ta kompanija nudi.

Na taj način, kompanija bi omogućcila pristup svom “izlogu” iz svake kuće koja poseduje vezu sa Internetom (što je ogroman broj).
Korisnici sa manjkom vremena i mogućnosti bi mogli da se informišu o proizvodima ili uslugama i iste da naruče putem telefona ili nekog drugog kanala prodaje.
Čak ni odlazak do određene kompanije više ne bi bio problem, jer provereno znamo šta nas tamo čeka i sigurni smo da naše vreme i trud za putovanje neće biti uzalud potrošeno.

On-line prodaja

Kada smo postigli sve navedeno, ako hoćemo dodatno da iskoristimo mogućnosti modernih Web tehnologija onda bi trebali da omogućimo našim mušterijama i da same proizvode ili usluge naruče, tj plate putem Interneta.

Za to postoje proverene, sigurne tehnologije koje omogućavaju istovremene transakcije sa velikim brojem mušterija.

Od različitih vrsta browser-a, njihovih verzija, operativnih sistema do različitih rezolucija i veličina ekrana na kojima se prikazuju web stranice, Web ispada jedno najneprijateljskijih razvojnih okruženja.

Jedno od ograničenja nametnutih dizajnerima jeste “sistemski” izgled kontrole za odabir fajla za upload sa vaše web stranice, koji čak varira i izgledom i tekstom u različitim browser-ima.

Na sreću, moguće je isti u potpunosti izmeniti koristeći čisti CSS kod (bez pozivanja JavaScript-a u pomoć).
Ovo je provereno rešenje koje radi na svim novijim verzijama aktuelnih web browser-a.

Ova tehnika se zasniva na dobrom poznavanju CSS pozicioniranja.
Pa, da se bacimo na posao…

Prvo HTML formatiranje

<form action="">
<fieldset>
<legend>Forma</legend>

<label class="file-button"><input type="file" class="invinsible" /></label>

</fieldset>
</form>

Kao što vidimo ovo je klasično formatiranje elemenata za upload fajlova.

Najvažnije je da se element input nalazi unutar elementa label (imesto label može biti i div ili neki drugi element ali ovo je jedno od najispravnijih rešenja što se semantike koda tiče).

A onda CSS

label.file-button {
    overflow: hidden; /* da ne bi unutrašnji elementi provalili van */
    display: block; /* da bi mogli da podeševamo sirinu, visinu, pozadinu i sl */
    width: 80px; /* željena šrina */
    height: 25px; /* željena visina */
    cursor: pointer; /* zbog doživljaja korisnika */
    position: relative; /* da bi se unutrašnji element pozicionirao u odnosu na ovaj */

    /* ovo menjati po želji, najbolje bi bilo uklopiti se u postojeće dimenzije */
    background: #09F; /* prezentacija */
    border: 1px solid #069; /* prezentacija */
}

.invinsible {
    height: 100%;
    opacity: 0; /* skrivanje, CSS 3 validno*/
    -moz-opacity: 0; /* skrivanje za Mozillu, nazalost narusava validnost CSS koda */
    filter: alpha(opacity=0); /* skrivanje za IE, nazalost narusava validnost CSS koda */
    position: absolute; /* da se pozicionira apsolutno u odnosu na label */
    right: 0; /* i to u odnosu na desnu stranu */
    cursor: pointer; /* za svaki slučaj */
}

U ovom slučaju label ima ulogu da sakrije polje za odabir fajla (input) ispod sebe, dok njemu (label-u) možemo dodeliti izgled prema želji.
Dobro bilo samo da label bude dovoljno velik da pokrije polje za odabir fajla.

Što se dizajna izgleda samog elementa label tiče, slobodni ste da to uradite na vaš način.

Ovde je demo sa spartanskim izgledom dugmeta za odabir fajla.

Stranica je W3C XHTML validna i testirana u FF 3, IE 6 i 7, Opera 9.62, Safari 4 Beta, Chrome 1

CSS kod nije validan zbog korišćenja property-ja -moz-opacity i filter koji su tu zbog podrške stariji browser-ima, ukoliko ciljate na samo novije browser-e koji podržavaju CSS 3 slobodno izbacite te dve linije i vaš kod će biti W3C CCS 3 validan.

svrha ovog članka jeste ukratko predstavljanje moje malenkosti i brzinski uvod u svrhu ovog bloga.

Kao što piše u tagline-u, ja sam Damjan Gatarić i bavim se razvojem web sajtova. Pisanju koda (XHTML, CSS, JavaScript) u svakom projektu pristupam sa ljubavlju i strašću, i veoma cenim čist, validan (W3C) i semantički ispravan kod. Uz pomoć JavaScript-a, DOM-a i AJAX-a proširujem mogućnosti i funkcionalnost web sajtova na kojima radim, povećavajući njihovu interaktivnost i korisnost za krajnjeg korisnika.

Što se dizajna tiče, iako imam solidnog iskustva na tom polju, smatram da mi dizajnerske sposobnosti nisu jača strana. Moje mišljenje je da je korisnik na prvom mestu i da svaki dizajn treba da olakša korišćenje i ulepša ukupno iskustvo korisnika na web sajtu. Kao što stara poslovica kaže Content is the king, smatram da dizajn mora biti podređen sadržaju a ne obrnuto.

Kroz ovaj blog ću sa vama deliti moja znanja, iskustva i različita razmišljanja u cilju zajedničkog razvoja i poboljšanja kvalitete web sajtova koje pravimo. Zahvaljujući Twitter-u, moći ćete pratiti dešavanja u mom životu i preko ovog bloga.

Više informacija o meni možete pročitati na stranici Profil.

Hvala!