Evo zadnji uradak na koji sam barem donekle ponosan, i to uglavnom iz razloga što je zapravo gotov, za razliku od nekoliko projekata na kojima trenutno radim. Novi dizajn za Scuteri.com. Stranica je napravljena sa čistim HTML-om i CSS-om i uz mrvicu Jave, Flasha i PHP-a. Kad bolje razmislim koristio sam većinu web tehnologija , pošto je i kontaktni obrazac u Ajaxu, heh. Eto, nadam se da vam se sviđa. Slobodno možete komentirati ako želite .

Posjetite stranicu ovdje

Dakle ovdje možete pogledati prvi dio mog trosatnog video tutoriala, a ovdje drugi dio. Probat ću ovaj vikend napraviti i treći dio tutoriala, tako da ga možete očekivati oko ponedjeljka, utorka.

Novi tutorial bi trebao izaći možda već za vikenda, ako nađem dobar servis za video. Uživajte i pozdrav.

Ajmo ko još nije, odma na Mozillinu stranicu i skinuti novi Firefox. Radi k’o beba, brza je, stabilna i ima brdo uber-cool poboljšanja. Ovo je stvarno trenutno najbolji browser na svijetu, a čuo sam da već pripremaju i verziju 3.1.

Anketa će biti online idućih tjedan dana i nakon toga ću napraviti tutorial. Isto tako bilo bi dobro da mi napišete kakav bi tutorial htjeli vidjeti u budućnosti, ne sad baš ovaj idući, pošto već imam smišljenu temu, ali za tutorial poslije toga. Znači bilo kakav tutorial koji je vezan uz web dizajn. Idući tutorial će biti još u sklopu “Male škole web dizajna” nakon toga ću napraviti “Malu školu Photoshopa”.

Ovo je drugi dio video tutoriala iz male škole web dizajna. U ovom djelu obrađujemo CSS i završavamo stranicu koju smo počeli raditi u prvom dijelu ovoga tutoriala. Ovaj video traje skoro 2 sata. Pogledajte kako će izgledati stranica koju ćete napraviti pomoću ovog tutoriala.

Kliknite na link ispod “Pročitajte ostatak ovog unosa” radi više informacija i materijala za download, koji će vam trebati da uspješno završite ovu lekciju.

Linkovi i download potrebnih materijala

Ovdje pogledajte kako izgleda web stranica koju ćemo napraviti

Ovdje skinite materijale i gotovu web stranicu u .zip formatu.

Za sva pitanja koristite sustav komentiranja ispod.

Pošto je Veoh.com prestao puštati pristup hrvatima na svoj sajt, morao sam premjestiti ove video tutoriale. Trenutno, se video nalazi na vimeo.com i čini mi se da je ovaj servis poprilično dobar, jedino ima nekih problema sa uploadom filmova, tako da je ovaj tutorial podignut, dok je drugi dio još na čekanju. Za razliku od Veoha ovdje ne morate skidati neke posebne finte da bi gledali ovaj tutorial. Ako tutorial želite skinuti u .AVI formatu, imate link odmah ispod video koji vodi na orginalnu stranicu i pri dnu te stranice, desno imate link za download.

Kliknite na link ispod “Pročitajte ostatak ovog unosa” radi više informacija i materijala za download, koji će vam trebati da uspješno završite ovu lekciju.

Evo napokon nakon dosta vremena još jedan tutorial. Ovaj puta vrlo iscrpan tutorial u kojemu ćete naučiti kako napravit web stranicu od planiranja, do izrade HTML i CSS koda za istu. Tutorial je u 2 dijela, pošto je ukupno trajanje ovog video tutoriala skoro 3 sata. Prvi dio se odnosi na HTML a drugi dio, koji će se pojaviti za dan, dva se odnosi na CSS. Pogledajte kako će izgledati stranica koju ćete napraviti pomoću ovog tutoriala.

Linkovi i download potrebnih materijala

Ovdje pogledajte kako izgleda web stranica koju ćemo napraviti

Ovdje skinite materijale i gotovu web stranicu u .zip formatu.

Ovo je skica koju ćemo koristiti pri izradi naše web stranice

U prošloj lekciji zadatak je bio da napravite da odlomci, odnosno p tagovi imaju gornji i donji obrub u crvenoj boji, da budu debljine 2px i da budu pune linije. Lijevi i desni obrubi će biti crtkani, debljine 5px i plave boje.

Riješenje ovog zadatka je vrlo jednostavno:

Možete kliknuti ovdje da vidite to rješenje. Sada kad smo to riješili, nastavljamo dalje, još uvijek imamo stranicu koja nam se zove prva.html i css koji nam se zove stil.css

Da bi imali u svim primjerima isto za dalje, u HTML-u nemojte ništa dirati, a u CSS-u obrišite sve, znači neka vam CSS bude prazan dokument. Sada ćemo nastaviti sa daljnjim upoznavanjem CSS-a i njegovih svojstava.

Background - prošireno

Prije nego počnemo sa ovom vježbom skinite si prvo ovu .zip datoteku, raspakirajte ju, i spremite pozadina-1.jpg u mapu images.

U prošloj sam lekciji objasnio kako možete pomoću svojstva background promjeniti boju pozadine, znači upišete background:#FF0000; i boja pozadine elementa u koji upisujte ovo svojstvo će se promjeniti (u ovom slučaju u crvenu boju.)

Tag body je isto element na stranici poput p taga ili div taga. Jedina je razlika što se svi ostali tagovi koji sačinjavaju strukturu stranice moraju nalaziti unutar okvira body taga da bi stranica ispravno radila.

Ako želimo promjeniti pozadinu stranice, moramo upisati svojstvo za pozadinu u body tag. No ovaj puta ćemo to malo drukčije napraviti, nego što smo to zadnji put. U CSS upišite sljedeći kod.

Pogledajte što biste trebali dobiti. Malo ćemo proučiti što smo to točno napravili. Prvo smo rekli na koji element želimo primjeniti neko svojstvo, u našem slučaju, body. Zatim smo rekli da želimo definirati svojstvo pozadine odnosno background. I sad dolazimo do novih stvari, sa url smo rekli browseru da počne tražiti neku sliku, i u zagradi smo mu rekli gdje se ta slika nalazi. Znači slika se nalazi u mapi images i zove se pozadina-1.jpg. Ako ste pogledali sliku koju sam dao da skinete, možda ste primjetili da je slika jako uska (samo 2px) i da je visoka kakvih 500px. I sad je pitanje, kako to da je ta slika koja je siroka svega 2px uspjela prekriti cijelu stranicu. Tu dolazi naredba repeat-x. Repeat-x govori browseru da ponavlja sliku pozadina-1.jpg po X osi ekrana.

Uvijek pišite background kao u ovom primjeru. I svakako nakon zatvorene zagrade napravite razmak, pa onda repeat. Jer sam primjetio da Internet Explorer ponekad ima problema sa time. Znači url, repeat, pa pozicija slike.

Znači browser je uzeo našu sliku i “umnožio” je toliko puta koliko je potrebno da prekrije s njom cijeli ekran. Kada smo napisali top to je značilo da browser treba početi prikazivati sliku na vrhu body elementa, što je u ovom slučaju i vrh stranice, i to sa lijeve strane. Ali znači sliku je ponavljao samo po x-osi ekrana, kao što vidite donji dio ekrana je ostao bijele boje. Ako bi željeli da se pozadina ponavlja i po x i po y osi trebamo upisati samo repeat umjesto repeat-x ili repeat-y. U našem primjeru mi to nećemo napraviti, nego ćemo ostaviti sve kako je, ali ćemo napraviti da nam stranica izgleda malo bolje, znači da nema tog bijelog dijela, nego da cijela pozadina izgleda neprekinuto, i da izgleda kao jedna cijelina. Da bi to učinili moramo samo dodati još boju sa kojom završava naša slika, ta boja ima heksadecimalnu vrijednost #00B2D9. Tako da cemo u nas kod samo dodati tu boju, to bi trebalo ovako na kraju izgledat:

Trebali bi dobiti ovo. Znači samo smo dodali boju koja nam je tako reći popunila onaj bijeli dio stranice.

Za zadatak isprobajte kako bi izgledalo da umjesto repeat-x upišete repeat-y. Probajte skoristiti i neke druge slike, za pozadinu. Uglavnom poigrajte se malo sa ovim svojstvom da bi ga lakše naučili.

Fontovi i slova

Naravno za web stranicu moramo koristiti i određene fontove a i trebaju nam neka svojstva pomoću kojih ćemo definirati izgled istih. Pošto nam se tekstovi nalaze u p tagovima, onda ćemo sljedeća svojstva primjenjivati na njih, naravno.

U ovom slučaju ću vam prvo pokazati kako ćete svojstva za fontove napisati produženo pa ćemo onda napraviti skraćeno. Recimo da želimo napraviti sljedeće, želimo da slova u našim odlomcima, budu Arial, da budu veličine 14px, da imaju razmak između redaka (prored) od 1,5 redak. I da budu bijele boje. Duži oblik pisanja bi bio:

Rezultat pogledajte ovdje. Sa font-family smo rekli browseru da koristi font Arial ako ga korisnik ima instaliranog na računalu, ako nema neka koristi Helveticu, ako nema ni Helveticu neka koristi bilo koji font iz sans-serif obitelji fontova.

U font-family možete upisati bilo koji font. Ali problem je u tome da korisnik mora taj font imati instaliran na svojemu računalu. Zato se za font-family koriste fontovi za koje se zna da ih većina korisnika ima, pošto dolaze sa većinom operativnih sustava, a to su: Arial, Helvetica, Times New Roman, i ponekad Tahoma, Trebuchet MS, Courier, Geneva i Georgia.

Nakon font-family smo imali font-size što je naravno veličina fonta u pikselima. Tu se nema što puno objašnjavati, jedino bih naglasio da pikseli nisu jedini način određivanja veličine slova, koriste se još neke druge mjerne jedinice, koje ćemo kasnije objasniti.

Sa line-height određujemo prored, odnosno razmak između redaka, taj razmak možemo odrediti ovako kao što sam ja napisao 1.5, to znači da će razmak biti jedan i po redak. A mogli smo ga odrediti i u pikselima. Iako preporučam određivanje u redcima zato što je 1.5 redak nakakav standardni prored.

Na kraju nam je ostalo svojstvo color. Color je naravno boja slova koju isto kao i kod backgrounda i bordera možete definirati heksadecimalnim kodom, rgb kodom ili engleskom riječi za boju koju želite. Pretpostavljam da svojstvo color ima takav naziv, a ne font-color, iz razloga što je prva verzija CSS-a bila većinom orijentirana prema tekstu. Čak i u Dreamweaveru, kada želite u HTML pridružiti CSS datoteku idete na Text pa CSS Styles. Čak i u verziji CS3 uređivanje CSS-a se još uvijek nalazi kao pod izbornik u glavnom izborniku Text.

Pokazao sam vam kako izgleda kada svojstva fonta upisujete produženo, to skraćeno izgleda ovako:

Znači sve smo to uspjeli staviti u jedan red, iako smo ipak color morali posebno odvojiti. E sad, pogledajte da na početku imamo vrijednost normal. Ova vrijednost nam označava da debljina, odnosno težina fonta bude normalna, da smo htjeli podebljana slova tu bi upisali bold umjesto normal. A u onom dužem pisanju bi to definirali kao font-weight svojstvo.

Pošto fontovi imaju mali milijun svojstava, ja ću pokušati navesti one koji bi vam mogli biti korisni u donjoj tablici, moram reći da fontovi imaju i više od ovih svojstava koje ću ja dolje nabrojati, ali nažalost dosta od njih rade samo u nekim browserima, a neki ne rade ni u jednom browseru. Ali ih naravno nećemo sve isprobati. To će biti vaš zadatak da samostalno napravite.

Zaključak

U ovoj smo lekciji obradili još 2 CSS svojstva. Što je mislim sasvim dovoljno za nekakvo upoznavanje sa CSS-om. Ovo ne znači da CSS više nećemo raditi, čak naprotiv, tek smo počeli. Ali od idućeg puta ovi tutoriali će biti većinom u video formatu, zato što bih morao pisati ogromne tekstove da bi vam dalje objašnjavao šta i kako, a to mi se neda. Pošto stvari postaju sve kompliciranije. Znači idući puta nastavljamo sa CSS-om ali u video formatu, a vi se dotad igrajte sa ovime što smo do sada obradili. Najbolje ćete CSS naučiti ako stalno budete isprobavali njegova svojstva i njegove mogućnosti. Naravno, sva pitanja, komentare, pohvale i kritike pošaljite putem komentara.

No ne Hrvatskim izborima. Na web sajtu New York Timesa možete vidjeti ovaj stripovski slideshow u kojem se kritiziraju logotipi američkih izbornih kandidata. Vrlo zanimljivo za ljude koje zanima izrada logotipa. Čini mi se da je slideshow izradio netko ko se kuži u psihologiju dizajna poprilično dobro.

Kao što vidite opet sam malo promjenio izgled ovog bloga, mislim da je ipak ovako bolje. Tako da sam prijašnju temu koju sam koristio, prilagodio - nadam se - za većinu Wordpress korisnika. Ova tema je vrlo jednostavna i služi kao klasični blog. Kako sada ova tema izgleda možete vidjeti ovdje. U paket sam uključio i sociable plugin, i locale.php tako da je tema prilagođena za hrvatski jezik. Isto tako jedna od naprednijih funkcija ove teme su Ajax komentari. Znači kada vam netko komentira blog re-freshanje stranice nije potrebno. Ovaj sustav za komentiranje možete isprobati na demo verziji. Molim vas da nastavite dalje čitati kako bi pročitali uputstva za instalaciju. Temu možete preuzeti ovdje.

Instalacija

1. Preuzmite .zip datoteku ovdje.
2. Odpakirajte skinutu zip datoteku i trebali bi dobiti mape xto-10 i sociable i datoteku locale.php.
3. Sada kopirajte datoteku locale.php u svoju wp-includes mapu.
4. Mapu sociable kopirajte u wp-content/plugins mapu
5. Otvorite admin sučelje od Wordpressa kliknite na plugins i aktivirajte sociable plugin.
6. Na kraju kopirajte xto-10 mapu u wp-content/themes mapu
7. U admin sučelju kliknite na Presentation i aktivirajte temu klikom na sliku teme

Dodatne informacije

Widgets
Ova stranica je widget frendly. Što to znači? To znači da sve one izbornike sa strane (Arhiva, Kategorije itd.) možete vrlo lako mjenjati. I to tako da u WP adminu kliknete na Presentation > Widgets. Tada samo odvučete widgete koje želite u prostor koji predstavlja sidebar. Ovo isto znači da ako prije niste koristili widgete, onda vam se ništa neće prikazati sa lijeve strane. Isto tako, vaša WP instalacija mora podržavati widgete, ova tema je isprobana na WP 2.3.0 i na 2.3.1 verzijama. Koje u sebi imaju automatsku podršku za widgete. Mislim da podrška za widgete postoji od verzije 2.0 , iako bih mogao biti u krivu.

Žuti okvir
Ako želite ukoniti onaj žuti okvir u kojem piše i “Čemu ova stranica” otvorite datoteku sidebar.php iz mape xto-10 i tamo će vam pisati od kud do kud trebate obrisati kod da bi žuti okvir nestao. Isto tako možete zamjeniti tekst koji se prikazuje u tom žutom okviru.

Logo
Logo se nalazi u xto-10/images i zove se logo.jpg, zamjenite tu datoteku sa datotekom vašeg logoa, veličina (u px) bi trebala biti iste veličine kao i moj orginalni logo, barem po visini.

Footer
Ako želite imati nekakve Copyright informacije, upišite ih u datoteku footer.php na mjesto koje je označeno za to.

Gornji izbornik
U gornjem izborniku će se pojavljivati stranice koje napravite u WP-u. Kada kod napravite stranicu ona će se pojaviti u gornjem izborniku, kao dio istog

Možete sa ovom temom radi što želite, jedino ju ne smijete nikom prodati. Nadam se da će nekom koristiti. Sva pitanja za prilagođavanje teme pošaljite u komentare.