Архива за 'WebDesign' категорију

Vidi li vam se (web) donji veš?

новембар 7, 2008

Čuveni Zeldman pokrenuo je zanimljivu temu vezanu za previde dizajnera u pogledu osnovne (dizajn) postavke sajta, obazirući se ciljano na definisanje background boje šablona web sajta. Napravio je čitav pool manje-više poznatih sajtova koji nemaju definisanu pozadinsku boju, među kojima je i čuveni Apple. Do ovoga dolazite ukoliko u browseru promenite default pozadinsku boju, a realni problem nastaje kod svih korisnika koji nemaju default postavku sistemske (Windows) teme i kolorne šeme. Ako nepristojno "zadignemo suknju" našim popularnim sajtovima videćemo da se i naši web dizajneri nemaju čime pohvaliti:www.glas-javnosti.rswww.politika.rswww.borba.co.yu Inženjerska komora Srbije RobnaKuca.com Pokrajinski sekretarijat za Informacije ...

Reklama, još jednom - Affiliate program (zarada sa linkovanjem)

децембар 4, 2007
    /shameless plug/ Da, biću bestidan, ali obećavam da je ovo zadnja reklama što se tiče novog shop engine-a. :) Ne mogu da odolim a da ne skrenem pažnju na funkcionalnost novog sajta što i drugima može doneti korist... Tokom kreiranja već pomenute prodavnice, razmišljao sam o tome da uključim u sistem jedan sličan program za saradnju kao affiliate program T-Shirt Hell-a. Znači, prekopirao sam ideju 1:1, sem piramidalne opcije: • Redirekcija donosi određen prihod • Kupovina koja se završi sa redirekcije donosi određen prihod Čudi me što dosad nisam previše nalazio affiliate programe po srpskom web-u (lično znam za još jedno slično /još neaktivno/ rešenje jednog konkurenta), pošto je tehnički veoma jednostavno odraditi, a korist je obostran. A čini mi se da je mnogo bolja opcija od razmena banera i linkova. Ja sam tokom jednodnevnog laganog testiranja skupio 82,00 din (1 prodat proizvod, 24 redirekcija), tako da je stvarno moguće da generišete neki solidan mesečni prihod...Malo više o programu za saradnju na sajtu

Majice, Srbija, hemoroidi

децембар 3, 2007
    Uh, nije me bilo jedno vreme. Ali ovog puta imam jako dobar razlog za odsustvo postova :) Priča počinje tako da je moj bivši office manager, sadašnji boss i iskusan "klijentolog" petog nivoa rešio da sastavimo online prodavnicu majica. U stvari, vuče se to već više od dve godine i inicijativnu ideju sam još ja nekoliko puta predložio ali u to vreme nismo imali sredstva nit vremena za hobije sličnog tipa - tako da se ta iskra na žalost nikada nije razvila dalje od blagih uzdaha i zamišljenih, zbunjenih pogleda koji su veoma uočljivo opisivali beznadežnu situaciju u kojoj smo se tad nalazili. Tu sledi skok u vremenu. I prava priča počinje sa te tačke kad sticajem srećnih okolnosti stižemo dotle da štampa na majice postaje realnost i dobijam zadatak da sastavim shop engine. Problem. Nikad nisam imao iskustva sa motorima za prodavnicu, tako da sam razmišljao u nekom veoma uskom vidokrugu - da odradim isključivo ono što je nama potrebno. I naravno, to je rezultirao shop engine koji je bio custom-made: za nas, za SEO i za majice (greška, greška, greška). 1. Engine je bio sve samo ne fleksibilan (da, sam sam kriv). 2. Zbog moje optimizacije za SEO, nisam bio u mogućnosti da ubacujem podkategorije na sajt bez toga da ne prepisujem deo motora 3. Korpa je bila malo nelogična 4. Modele su sastavljali grafičari (tj. lepili natpise i slike na majicu, i kasnije se taj krajnji rezultat uploadovao u shop - naravno ovako nismo imali mogućnost da sliku majice ili motiva kod određenog proizvoda izmenimo na klik) Zahvaljujući dobrom SEO, sajt je dosta brzo dospeo među prve rezultate na Google-u za relevantne upite - ali je bilo frustrirajuće da je funkcionalnost prodavnice do nekog nivoa bio podređen optimizaciji za pretraživače. Damn you, Google! Tad sam počeo da razmišljam kako bih mogao da odradim shop engine koji se ne bi ograničio samo na majice, već mogao da ponudi mnogo više. Razlike će uvideti uglavnom oni koji su videli i koristli staru verziju sajta - tako da ono što sledi je više blebetanje nego korisna informacija ;) Eventualno vredi razmisliti o tačkama ukoliko gradite neku univerzalnu prodavnicu gde je virtualno lepljenje motiva na podlogu važan deo procesa i imate mnoštvo kategorija. Ali kad je već ovo online dnevnik ili šta, dozvolite mi da lupam u prazno i da pravim sebi malo reklame... :) Znači, što se tiče samog engine-a: 1. "Brendiranje" - posebne slike za sve moguće modele (tj. materijal na koji se štampa), i posebne slike za motive (tj. za slike i natpise) - koji bi se kasniji mogli zalepiti u bilo kojoj kombinaciji. 2. Malo "labaviji" SEO, ali i dalje jak fokus na url-e i naslove strana - koji su nam dotad doneli najviše plus poena kod Google-a - malo manje sadržaja 3. Kategorisanje u 3 nivoa 4. Laka izmena stock-a za određene proizvode (npr. ukoliko nestanu crvene ženske majice kratkih rukava L veličine) 5. Ugradnja "custom majica" među proizvode. Na starom sajtu su custom majice bile povezane uz porudžbine umesto tabele sa proizvodima. 6. Multiuser podrška - tj. ukoliko neko želi, može da otvori potpuno samostalnu prodavnicu u okviru engine-a 7. Izmene u korpi i blagajni (ovome će se obradovati oni koji su koristili stari shop :) 8. Glasanje za proizvode 9. Affiliate program, program za saradnju pomoću redirekcija Što se tiče izgleda i sadržaja: 1. Prelaz sa 800x600 na 1024x768. Znam, nije najbolja ideja ali sam ovako uspeo najbolje da iskoristim prostor. 2. Redizajn formi 3. Skraćenje tekstova, ubacivanje popup helpova 4. Izmena modela i boja sa dropdown boxom 5. Redizajn korpe 6. Više informacija o proizvodima na preview spisku (prelaz na "jedan proizvod po koloni" umesto na jednostavno ređanje thumbnailova) ... Greške i gluposti za koje znam ali još nisam imao vremena da ispravim/sredim: 1. Inline CSS (ovo ćemo polako da fixnemo) 2. Istorija kupovine - missing 3. Search - missing ... I kad se sve ovo pomnoži sa 5-6 puta po 16-20 sati posla dnevno, stižemo i do hemoroida :) Pa, iskreno se nadam se da je vredelo...http://www.majicesrbija.com Od danas malo više vremena. Eventualno, češći postovi i dnevna geek muzika. Yey! :)

Skrivena captcha - kako jednostavno i neprimetno protiv spambotova?

новембар 11, 2007
    Tehnika koju ću opisati nije nova, ali veoma jednostavno i uspešno zaustavlja spambotove koji automatski popunjavaju forme, uz to je neprimetan pod browserima koji podržavaju CSS. Ne znam koliko je bolje rešenje od uobičajenog Turing testa sa izlomljenim tekstom, ali sam sa ovom metodom uspevao da zadržim odprilike 95% spamova - a ostalih 5% su ili ipak uspeli da zaobiđu filter, ili su bili plaćeni kinezi koji su ručno popunjavali forme :)Teorija Kao prvo, onima koji ne znaju kako spambotovi funkcionišu: to su u stvari programi koji skeniraju sajt stranu po stranu i kad naiđu na upitnik, popune polja po pre-programiranim uputstvima i postave svoje nepoželjne reklame ukoliko pronađu polje za unos teksta. Osnovna ideja ove je metode izuzetno jednostavna. Trebamo navesti bota da popuni jedno polje koje je namenjeno isključivo njemu, dok je sakriveno od običnih korisnika. Klopka je u tome da bot neće znati razlikovati koji field treba da popuni i koji ne, sem ako nije izgrađen "ekskluzivno" za naš sajt. Znači, sa CSS-om sakrijemo jedan input field koji će spambot automatski da popuni, a nama preostaje da proverimo da li je polje popunjeno, i ako jeste, da zaustavimo obradu podataka.Praksa • Upitnik/HTML U upitniku imamo jedan deo koji je sakriven od korisnika. Ja sam u ovom primeru taj field nazvao "spam", ali ga za svaki slučaj možemo nazvati "name" ili "address", znači nešto uobičajeno što će spambot sigurno da popuni. Meni se dešavalo da bot ne popuni polje "phone" ili u ona polja koja ne razume stavi vrednost "none". Takođe je važno da javimo korisnicima koji ne koriste web čitače sa CSS-om da polje služi kao filter.<fieldset> <legend>Moj upitnik</legend> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div class="input_style"> <label for="ime">Ime</label>:<br /> <input type="text" name="ime" id="ime" value="" /><br /> <br /> <label for="prezime">Prezime</label>:<br /> <input type="text" name="prezime" id="prezime" value="" /><br /> <br /> </div> <div class="sakriveno_polje"> Ukoliko vidite ovo polje, browser vam najverovatnije ne podrzava ili ne prikazuje CSS. Nemojte ga popuniti, sluzi za filtriranje spam botova<br /> <input type="text" name="spam" id="spam" value="" /> </div> <input type="submit" name="unos_podataka" value="Unos" /> </form> </fieldset> • CSS CSS za sakriveno polje..sakriveno_polje { position: absolute; visibility: hidden; } • PHP Sve što nam preostaje da sa serverske strane proverimo da li je popunjeno polje i ukoliko jeste - da žavršimo izvršavanje obrade podataka, eventualno da redirektujemo bota.// Proveri da li je pritisnuto dugme "Unos" if(isset($_POST['unos_podataka'])){ // Proveri da li su popunili polje "spam" if($_POST['spam']){ // Zaustavi obradu, redirektuj echo "Vi ste spambot u akciji ili niste procitali uputstvo"; }else{ // Obradi podatke echo "Ok. Najverovatnije niste spamer"; } }FunkcionalnostUpitnik sa sakrivenim poljem (ono što vide korisnici)Upitnik bez CSS stiliranja (ono što vidi spambot) Download: skrivena_captcha.zip (.zip, 1k) Ukoliko ste već koristili ovu metodu ili ćete ga tek ugraditi u svoje upitnike, rado bih čuo i vaša iskustva o tome koliko vam pomaže u filtriranju spamova. Odnosno da li pomaže uopšte :)

Modem Emulator

новембар 9, 2007
    Većina korisnika interneta u Srbiji na žalost tačno zna koliko se sajtovi sporo učitavaju pod modemskom dial-up konekcijom, ali širenjem mnogo bržeg ADSL-a, kablovskog interneta ili wirelessa, oni koji prave sajtove za posetioce iz naših krajeva, dosta brzo zaboravljaju kako je njima bilo dok su vukli stranice sa 6-7 Kilobyte-a u sekundi i više im ne smetaju svirajući Flash introi i sajtovi pretrpani sa beskorisnim grafičkim elementima. Svima onima koji smatraju da je izgled sajta važniji od brzog prikaza sadržaja, preporučujem da provere kako je malom Perici kad je prinuđen da sačeka učitavanje Flash navigacije od 500K preko poljske telefonske veze iz kolibe u Milutovcu da bi se najzad nekako dokopao sadržaja stranice. Applikacija web-dizajnera Dave Child-a nudi proxy za proveru ponašanja sajta na brzinama od 28k, 33.6k i 56k.

Tiger Style za administraciju

новембар 7, 2007

Već duže vreme razmišljam da u administrativnom delu bloga totalno izmenim ono dosadno grafičko rešenje WordPressa. Naravno, vreme je razlog zbog koga još uvek to nisam uradio, a verovatno nikada ni ne bih da sinoć nisam naleteo na plugin WP Tiger Administration.

Znam da rešenje nije originalno, ali ipak je osveženje posle stalnog gledanja u onaj plavkasti. Na kraju krajeva, niko drugi ga ni ne vidi osim mene :)) Evo kako mi trenutno izgleda BackOffice na ovom blogu:

Znači procedura je totalno jednostavna, kao i instalacija najprostijeg plugina. Baciš ga na server, aktiviraš plugin i odjednom.. Buummm !! U ekranu ti se odjednom pojavi totalno novi look administracije. I voziš sve dok ti i ovaj ne dosadi :))

Eh da, da ne zaboravim da kažem da plugin ima i par začkoljica. Prva stvar je da je adaptiran za Firefox, Safari i Operu. Ako kojim slučajem pokušaš ući u administraciju sa skalamerijom zvanom Internet Explorer (bilo 6 ili 7) nećeš primetiti nikakve promene u BackOfficu :)) Plugin je nasetovan da čim detektuje ove primitivne spravice prikaže stari look administracije (sorry za ovaj totalno subjektivan Anti-IE ton u pisanju). Pa eto, ukoliko si kojim slučajem još uvek na IE skalameriji, a želiš da uživaš u “čarima” ovog plugina, jedino rešenje je da se napokon prebaciš na neki normalan browser (Firefox npr.) :))

Druga stvar je da plugin nije još doživeo update za WordPress verziju 2.3 :( Tako da ima par bugova koji nisu strašni, ali mogu da iritiraju. Malo sam se poigrao CSSom i pronašao par linija koda koje se lako promene i sve lepo funkcioniše i u poslednjoj WP verziji.

1. Otvori fajl wp-admin-tiger/wp-admin-tiger_files/tiger.css sa textualnim editorom. 2. Pronađi ID na samom početku fajla pod imenom #wphead i umesto linije font-size:86% ; stavi ovo font-size:225% ; 3. Pronađi ID #footer i u njemu dodaj samo liniju margin:0 ; 4. I to je sve, plugin je sada kompatibilan i sa verzijom 2.3, enjoy.. ;)

Neka prava na ovaj tekst su zadržana, 2007 Blogowski. Svi objavljeni radovi na Blogowski.eu su njegovo vlasništvo, osim ako nije drugačije napisano, i nalaze se pod Creative Commons Attribution 2.5 Licencom. Ukoliko koristite RSS kanale sa ovog bloga, proverite da li se slažete sa uslovima korištenja. Uslovi korištenja RSS kanala

Blogowski Sezona II.. Voilà ..

октобар 27, 2007

Evo nisam imao strpljenja da sačekam najavljeni 5. novembar za objavljivanjem novog grafičkog identiteta za ovaj blog :)) Ovaj weekend sam imao malo slobodnog vremena, a kako ću u prvoj nedelji meseca novembra biti dosta opterećen obavezama, reko’ da završim napokon sa tim. A i počeo sam sa vizuelnim “dopunama i izmenama” pa sam ukapirao da ako ga ne objavim pod hitno, ima da mi padnu svakakve još ideje i tome nikada kraja.. Tako da Voilà.. stari je arhiviran, a novi layout je ispred Vas..

Header

U headeru bloga sam standardno stavio logo, pretraživač bloga, kao i izdvojio neke osnovne linkove sa njega. Ti linkovi će u skorije vreme pretrpeti neke manje promene kada dođe vreme na menjanje i editorijalne politike bloga.

Sadržaj na Home Page

Novi look trenutno ima dve kolone (u nekim momentima i dve i po :)) Sadržaj zbog optimizacije ostaje sa leve strane, a sidebar sa desne. Na prvoj strani (Home Page) u delu sadržaja, ide prvo poslednji objavljen tekst na blogu, zatim oblak sa tagovima koji se u ovoj poslednjoj verziji WordPressa izuzetno lako integriše i na kraju osam tekstova objavljenih pre gore pomenutog poslednjeg.

Sidebar na Home Page

Sa desne strane Vas čeka sidebar koji počinje sa malim Ajax boxom gde je po defaultu ponuđena pretplata na RSS. Kao i novina na ovome Blogu, za sve one koje još ne koriste RSS, pretplata na tekstove preko maila. U istom boxu imate pristup i kao nekim novinama nazvanim Music TV i LifeStyle TV. U njima ću objavljivati video zapise sa muzikom i zanimljivim stvarima iz života inače, bez mnogo teksta. Za opciju Ajaxa sam se odlučio da bih olakšao ljudima pristupu blogu sa slabijim Internet konekcijama. Tako da se po defaultu ovi video zapisi ne učitavaju u stranicu sve dok ne kliknete na dugmence ;)

Ispod ove novotarije idu već klasične brze vesti ili kako ih ovde nazivam Telegrafske. Zatim ide blok sa pet poslednjih poruka poslatih preko Twittera, poslednji komentari, Blogroll sa linkovima prema blogovima koje čitam redovno. Sidebar završavam sa Flickr slikicama, a od sada i poslednjim što sam preslušao na mom Last.fm.

Footer

Footer, manje više, ostaje bez značajnih promena. Tekst koji je i ranije bio sa još par ikonica. Između ostalog i Blogodka i Blogariata, dva renomirana agregata sa ovih prostora koji preuzimaju tekstove i sa ovog bloga.

Stranice sa postovima

Jednom kada zavirite u unutrašnjost bloga, kliknuvši na jedan od naslova postova recimo, arhitektura bloga se u manjoj meri menja.

Sadržaj posta sa komentarima i formularom za iste ostaje sa leve strane, dok sa desne u sidebaru još neke novine. Prvo ide mali blok sa social bookmarkinzima i bookmarkletima pomoću kojih tekst (ukoliko Vam se kakvim slučajem neki i svidi :)) možete poslati na Dvanula, Digg, Ukusno (novo), Technorati (novo), Del.icio.us ili Twitter. Isto tako postoji opcija da klikom tekst pošaljete friendu na mail ili ga štampate. I na kraju ide link za trackback posta i RSS feed za pretplatu na komentare samo tog teksta što sigurno olakšava praćenje diskusije na pojedinim postovima bez obaveznog vraćanje na Blog.

Ispod ovih korisnih alata, postavio sam još jedan mali javaScript boxić sa prikazivanjem tagova po defaultu, a i lakom pristupu svim kategorijama na blogu kao i poslednje objavljenim tekstovima.

I na kraju..

Eto, to bi bio kratki brief šta Vas čeka na novom layoutu. A sve sam to i proverio kako izgleda u Firefoxu, IE6, Operi 9.24 i Safariju (na windowsu). U ova poslednja dva postoje mala odstupanja pri prikazivanju search polja u headeru koja bi trebala da se doteraju, ali ne ometaju nikako pri surfanju po blogu. Kada ugrabim vreme popraviću to kao i još neke manje sitnice koje sam primetio tek sada kada je layout on-line :) Ako neko naleti na neke bugove, zahvaljujem se unapred na javljanju ;)

Najveći deo posla za prelazak na Sezonu 2 je znači gotov. Uskoro će uslediti i neke manje “content” promene o kojima ću pisati verovatno odmah posle BlogOpena. Ne da bih bio sada nešto mističan, nego jednostavno iz tehničkih razloga ;)

Neka prava na ovaj tekst su zadržana, 2007 Blogowski. Svi objavljeni radovi na Blogowski.eu su njegovo vlasništvo, osim ako nije drugačije napisano, i nalaze se pod Creative Commons Attribution 2.5 Licencom. Ukoliko koristite RSS kanale sa ovog bloga, proverite da li se slažete sa uslovima korištenja. Uslovi korištenja RSS kanalaPlugin by Taragana