Tutoriali.biz - tutoriali

Web2.0 logo - 2

Ovim tutorialom ćemo napraviti logo sličan prethodnome, razlike neće biti velike, ali ipak vidljive. Ovaj bi logo trebao biti malo privlačniji zbog više primijenjenih efekata.

Jednostavan web2.0 header

U ovom ću vas tutorialu naučitu kako da napravite zaglavlje za svoju web stranicu ili, pak, blog. Napravit ćemo zaglavlje koje će podsjećati na vektorsku grafiku, a sastojat će se od trave na dnu i oblaka.

Web2.0 gumb

Četvrti u nizu tutoriala iz serija web2.0 je izrada gumba za web stranice. Ovim, također jednostavnim tutorialom, ću vas naučiti kako napraviti lijep, ali istovremeno i jednostavan, gumb koji možete koristiti, npr. kao gumb za submit.

Web2.0 bedž sa zaobljenim rubovima

Ovim ću Vas tutorialom ponovno naučiti kako napraviti web2.0 bedž, ali ovoga puta sa zaobljenim rubovima. Samim time, i proces izrade se ponešto razlikuje od prethodnog.

Web2.0 logo sa odsjajem

Drugi iz niza tutoriala vezanih uz web2.0 je izrada loga sa odsjajem. Niti ovaj element dizajna nije teško napraviti, a može efektno izgledati i poboljšati izgled zaglavlja web stranice.

Izrada web2.0 bedža

Kako bi vas malo približio webu 2.0, odlučio sam napraviti tutorial (zapravo, bit će dio serije tutoriala vezanih uz web 2.0) kojim ću vas naučiti kako napraviti web 2.0 bedž. Njega je zaista jednostavno napraviti, a efekt može biti zapanjujući ako upotrijebi na pravom mjestu.

Uvod u XSLT

XSLT je skraćenica za Extensible Stylesheet Language Transformations (XSL Transformations). Ovo je najvažniji dio XSL-a, a koristi se za preoblikovanje jednog xml dokumenta u drugi

XPath Axes

U XPathu postoji 13 različitih axesa. Oni predstavljaju vezu no nodeova, a koriste se kako bi pronašli nodeove relativne u odnosu s tim nodeom.

Sintaksa XPatha

Kako bi preuzeo nodove ili njihove setove iz xml dokumenta, XPath koristi path expressions. Node možemo odabrati koristeći path ili step.

XPath nodes i srodbene veze

U XPathu postoje sedam vrsti nodova. To su: element, attribute, text, namespace, processing-instruction, comment, i document (root) nodovi. S obzirom da se xml dokumenti tretiraju kao drveće sastavljeno od nodova, root nood je korijen toga drveta.

Uvod u XPath

XPath je jezik koji služi za navigaciju kroz atribute i elemente xml dokumenata, odnosno, za pronalaženje podataka unutar elemenata i atributa. Zbog toga je poznavanje XPatha iznimno važno za mogućnost naprednije manipulacije xml dokumentima.

Xml CDATA

Korištenjem parsera se ne obrađuju samo elementi, već i tekst koji sa između njih nalazi. Kako bi natjerali parser na iz obrade podataka isključi određeni tekst, koristimo CDATA.

Xml namespaces

Kako bi izbjegli konflikte prilikom korištenja dvaju dokumenata sa istim nazivima, koristimo prefikse i namespaces.

Xml parsing

Za manipulaciju xml datotekama trebat ćete xml parser. On učitava xml datoteku u memoriju računala. Jednom kada su podaci učitani, možemo koristiti DOM kako bi mogli njima manipulirati.

Umetanje xml podataka u hmtl datoteku(data island)

Data island su xml podaci umetnuti u html dokument. To postižemo umetanjem taga u html dokument. Tom tagu pridužujemo atribute id, koji određuje koje podatke umećemo, i src koji definira datoteku iz koje uzimamo podatke.

Oblikovanje xml dokumenata xsl-om

Za manipulaciju xml datotekama trebat ćete xml parser. On učitava xml datoteku u memoriju računala. Jednom kada su podaci učitani, možemo koristiti DOM kako bi mogli njima manipulirati.

Xml parsing

Xsl je skraćenica za Extensible Stylesheet Language i mnogo je sofisticiraniji od css-a. Jedan od načina korištenja xsl-a u svrhu oblikovanja xml dokumenta je pretvaranje xml-a u html prije nego što se rezultat prikaže u pregledniku.

Atributi xml-a

Svrha upotrebe atributa u xml-u je jednaka onoj u html-u, a to je detaljno objašnjenje elementa. Atributi nam često daju informacije koje nisu važne za sam podatak, ali su važni za program ili skriptu koji će podatak obraditi, to je vidljivo u sljedećem primjeru.

Elementi xml-a

Imena elemenata nisu unaprijed određena, ali se preporuča da imena koja osmislite opisuju sama sebe i da budu što kraća, iako nema ograničenja za duljinu elemenata, npr. , a ne, npr. .

Sintaksa xml-a xml-a

Sintaksa xml-a je vrlo jednostavna i laka za učenje, ali ipak i jasno definirana. Ta nam jednostavnost umnogome olakšava manipulaciju podacima spremljenima u xml datotekama. Sintaksa je, također, i lako shvatljiva jer opisuje sama sebe.

Upotreba xml-a

Pomoću xml-a, podatke možete spremati u zasebne xml dokumente. Po tome se razlikuje od html-a, koji se koristi za prikazivanje podataka, a podaci se spremaju unutar tog html dokumenta. Podaci spremljeni u xml datotekama se mogu pohraniti u unutar html datoteke kao "Data Island", o čemu ćete moći čitati nešto kasnije.

Uvod u xml

XML je skraćenica za Extensible Markup Language. On je osmišljen za prijenos podataka, a ne kao zamjena za html ili xhtml, tj. xml se bavi opisom podataka, a html prikazom podataka. Iako je to pomalo teško shvatiti, xml sam po sebi ne služi ničemu. Stvoren je za strukturiranje, pohranjivanje i slanje podataka.

Uvod u sessions

Sessions nam omogućavaju da spremimo informacije na server za daljnu upotrebu. Međutim, podaci koji se u njima nalaze su privremeni pa će biti uništeni nakon što korisnik napusti stranicu. One rade tako što stvaraju unikatan id (UID) za svakog posjetitelja i spremaju ga u varijablu.

Izrada jednostavnog hit countera

Kako biste mogli pratiti statistiku posjećenosti stranice, naučit ću vas kako da uz pomoć php-a napravite jednostavan hit counter, odnosno brojač učitavanja. Ovaj hit counter služi, prvenstveno, kao uvod u izradu nekog složenijeg brojača, zbog čega služi samo kao orijentacijski podatak.

Izrada popup-a css-om (bez javascripta)

Umjesto da koristimo javascript za izradu popup-ova koji će prikazivati objašnjenje nekog teksta i sliku, korisitii ćemo samo css. Ova je tehnika vrlo jednostavna za upotrebu, ali i vrlo praktična unatoč svojoj jednostavnosti.

Izrada css layouta od dva stupca

Css vam omogućava da klasičan layout izrađen tablicama zamijenite onim sastavljenim od divova. Div layout vam omogućava veću kontrolu nad sadržajem, ali i samim layoutom. Ovim ću vas tutorialom naučiti kako napraviti layout sastavljen od header, footera i 2 stupca.

Pretvaranje fotografije u vektorsku sliku

Vektorska je grafika trenutno vrlo popularna u svijetu, a često se koristi pri izrade hedera za web stranica. Proces dobivanja slike koja izgleda poput vektorske iz obične fotografije je dugotrajan, pa ću vam ja pokazati kako upotrebom filtera možemo doći do sličnih rezultata.

Odabir primatelja i slanje maila php-om

Ovaj je tutorial nastavak na prvi tutorial o slanju maila php-om, koji možete pročitati ovdje. U ovom ćete tutoriali naučiti kako izraditi web formu koja će korisnicima omogućiti da odaberu primatelja emaila. Ovo je korisno ako imate više email adresa preko kojih vas posjetitelji mogu kontaktirati. Također ću vas i naučiti kako korisnicima omogućiti da kopiju maila pošalju na svoju adresu.

Kontroliranje izgleda stranice kolačićima

Ovo je zapravo napredni tutorial o korištenju kolačića u php-u. Ovim ću vas tutorialom naučiti kako da korisnicima omogućite da izaberu dizajn stranice koji im se najviše sviđa, a sve uz pomoć kolačića i php-a.

Ispisivanje slučajne slike php-om

Ispisivanje slučajne slike uz pomoć php-a je jako jednostavno. Tu tehniku možete koristi ne samo za ispisivanje slika, već i nekog drugog sadržaja. Umjesto slika možete ispisati i slučajno odabrani citat ili neku drugu vrstu datoteke.

Prikazivanje radnom sadržaja javascriptom

Ovaj vrlo jednostavan tutorial će vas naučiti kako ispisati slučajan sadržaj na vašu stranicu. Možete ga koristiti za ispisivanje slučajnih slika, citata ili nekog drugog sadržaja.

Izrada vertikalnog menija css-om

Kada želite napraviti jednostavnu, ali efektnu navigaciju, najbolje je koristiti css. U tu se svrhu ponekad koristi i javascript, ali css je puno jednostavniji i zbog toga i korišteniji. Ova se tehnika nametnula kao vodeća i zbog velikog velike mogućnosti kontrole izgleda.

Rad sa kolačićima (cookies) u php-u

Kolačići se najčešće koriste kod autorizacije korisnika, ali mogu imati i sasvim drugačiju namjenu, iako je glavna poveznica uvijek ista, rad sa korisnikom. Kolačić je mala datoteka koju stvara server, a sprema se na korisnikovo računalo. Php vam omogućava da u kolačiće upisujete i iz njih uzimate podatke.

Slanje maila php-om

Php za slanje maila koristi funkciju mail(). Ta se funkcija sastoji od mekoliko obaveznih i opcionalnih dijelova, a to su to, subject, message, headers i parameters. Obavezni dijelovi su to, subject i message, a ostali su naravno neobavezni. Imena prva tri dijela vam govore njihovu svrhu, zato vam ih neću ni pobliže objašnjavat.

Provjera praznih polja u formi

Kod izrade formi se često događa da morate neka polja postaviti kao obavezna, pa vam nikako ne odgovara da ta polja ostanu prazna. Ovdje ću vam objasniti jednostavno rješenje tog problema. Sve što trebamo je par linija javascripta.

Povećajte/smanjite veličinu slike u pregledniku

U ovom ću vas tutorialu naučiti kako promijeniti veličinu slike u pregledniku uz pritisak na gumb. Promjena sadržava i jednostavnu animaciju. S obzirom da se onsubmit efekt može napisati i kao onmouseover i staviti unutar koda slika, ta bi vam tehnika mogla dobro doći ...

Dodavanje sjene slikama css-om

Još jedan od trikova poboljšanja izgleda web stranice je dodavanje sjena slikama. Ukoliko se ovaj efekt korisni umjereno i racionalno, stranica će poprimiti vrlo efektivan izgled. Ovdje možete vidjete jedan jednostavan primjer dodavanja sjene slici.

Kontroliranje prozirnosti css-om

Kako bi stvorili efektivniiji dizajn, možemo koristit css i njegovo svojstvo opacity. Nažalost, sintagma nije ista za sve preglednike pa ćete morati pisati kod u različitim varijantama kako bi vaš dizajn bio jednako prikazan u svim pregeldnicima.

Upotreba pseudo elemenata

Pseudo elemnti se u css-u koriste kako bi sadržaju web stranice dodali neke specijalne efekte. Tako možemo odrediti kao će se prikazati samo prvo slovo, ili pak prva rečenica. Možemo i odrediti sadržaj koji će se uvijek pojavljivati nakon određenog sadržaja.