Designers and Coders http://www.designersandcoders.net Magazin za dizajnere i kodere Fri, 07 Aug 2009 18:03:19 +0000 http://wordpress.org/?v=2.8 en hourly 1 HTML za početnike-Lekcija 3 http://www.designersandcoders.net/2009/07/html-za-pocetnike-lekcija-3/ http://www.designersandcoders.net/2009/07/html-za-pocetnike-lekcija-3/#comments Sun, 26 Jul 2009 21:41:44 +0000 Pebas http://www.designersandcoders.net/?p=502 Tutorial3Pozdrav svima,ovo je treća lekcija iz serijala HTML za početnike.

Prije nego što nastavimo samo da se osvrnem na jednan komentar iz prošle lekcije. U prošloj lekciji sam dobio komentar vezan za ovaj tutorijal, a odnosio se na slike. Odnosno da bi bilo bolje da u ovom tutorijalu ima i slika. Pa da ukratko odgovorim i prije svega da se zahvalim na komentaru jer je veoma značajan i ukazao je na ono što bi trebalo poboljšati.Ovo je u suštini tek probna verzija, prva verzija sajta i tek će se raditi i unapređivati ovaj sajt koji je nadam se vama od koristi. Znam da mi to nije neko opravdanje ali čim budem imao vremena dodaću i slike u svaki tutorijal u ovom serijalu. Eto mislim da smo to razjasnili,ja sam obećao,a eto vi me “držite za riječ”.

Sada da nastavimo gdje smo stali. Upoznali smo se u prošloj lekciji sa obradom teksta u HTML kodu i naučili šta znače <p>, <h1> i <br /> tag i kako se koriste. Danas ćemo se upoznati sa nekim novim tagovima u HTML kodu a koji se koriste takođe za obradu teksta, tačnije sa <hr />,<i> i <b> tag-om. I zaista će ova lekcija biti jako laka, obećavam.

Tag <hr />

Upravo ovaj tag takođe služi za odvajanje teksta kao i <br /> tag. Kao što vidite i <hr /> tag je jedan od onih tagova koji nema završni tag. Oni koji su upoznati sa prethodne dvije lekcije znaju na šta mislim. Za one koji nisu bili revnosni neka pređu prethodne dvije lekcije jer su važne koliko god vi mislili da nisu i da ćete nadoknaditi to kasnije. Za sve što sam, a dok sam učio HTML, preskočio, kad tad sam morao da se vratim i to po više puta. To nije naređenje, to je savjet. Nego da se vratimo <hr /> tag-u. Njega možemo definisati kao liniju! Odnosno ako želimo da razdvojimo dva reda, a da između njih bude linija, koristićemo <hr /> tag. Ajmo da vidimo kako to izgleda na primjeru:

<html>

<head>

<title>Tagovi za obradu teksta</title>

</head>

<body>

<p>Ovo je prva rečenica prije koju linijom želimo da razdvojimo od sledeće rečenice!</p>

<hr />

<p>Ovo je druga rečenica, a iznad nje je linija koju smo dobili korišćenjem tag-a za razdvajanje linijom!</p>

</body>

</html>

Eto to je sve što ste trebali da znate o <hr /> tag-u. I napomena da ćete ga jako puno koristiti u modernom web dizajnu. I odmah da razjasnimo jedno, a to je da ne postoji vertikalni razmak linijom i da ne gubite vrijeme kao ja dok sam počinjao, upinjući se da pronađem vertikalni tag za razdvajanje linijom!

Tag <b>

Ovaj tag na engleskom je u stvari skraćenica za bold, odnosno što znači bestidan, smeo, srčan…pitate se kako li izgleda na web stranisi? Jednostavno je jer  mi ga nećemo tako prevesti. Prevešćemo ga jednostavno zadebljan. Da razjasnimo, svaka rečenica je izgrađena od slova i riječi. Ponekad ćemo poželeti da neki dio te rečenice učinimo uočljivijim od drugih riječi. Evo primjera:

<html>

<head>

<title>Tagovi za obradu teksta</title>

</head>

<body>

<p>Ovo je jako <b>važan</b> tutorijal!</p>

</body>

</html>

Eto to je sve. Znači ako bude nešto važno i želite da taj dio vaše rečenice bude zadebljan koristite <b> tag.

Tag <i>

Ovo je tag za iskrivljenje, da se tako izrazim, teksta ili dijela teksta u rečenici. Nisam siguran šta bih napisao za ovaj tag pa zato neka kod sam za sebe govori, a vi budite pronicljivi i sami pronađite način kako i gdje da upotrebljavate ovaj tag. Ajmo odmah da se “bacimo” na primjer:

<html>

<head>

<title>Tagovi za obradu teksta</title>

</head>

<body>

<p>Ovo je običan tekst!</p>

<p><i>Kakav je ovo tekst?</i>Ovo je takozvani italic tekst!</p>

</body>

</html>

Budite maštoviti kada budete koristili ovaj tekst,jer ga možete koristiti u zaista dosta varijacija!


To je sve za ovu lekciju i kao što sam napisao na početku veoma je jednostavna i laka.

Pozdrav do sledeće lekcije i nadam se da ste naučili pomalo engleskog do sada, valjaće vam.

]]> http://www.designersandcoders.net/2009/07/html-za-pocetnike-lekcija-3/feed/ 3 HTML za početnike – Lekcija 2 http://www.designersandcoders.net/2009/07/html-za-pocetnike-lekcija-2/ http://www.designersandcoders.net/2009/07/html-za-pocetnike-lekcija-2/#comments Sun, 19 Jul 2009 11:46:42 +0000 Pebas http://www.designersandcoders.net/?p=443 Tutorial2Ovo je druga lekcija iz serijala HTML za početnike.

Videli smo i naučili u prethodnoj lekciji strukturu HTML dokumenta i naučili smo kako počinje i kako se završava svaki HTML tag. U današnjoj lekciji obradićemo upravo te HTML tag-ove. Krenućemo od onih jednostavnih pa do onih složenijih.

Prvo ćemo se okrenuti tag-ovima koji su vezani za sam tekst, odnosno one HTML tag-ove koji obrađuju tekst u HTML kodu. Postoji dosta načina da obradite vaš tekst u HTML kodu, da mu dodate boju, veličinu, debljinu, da odvojite redove, da ubacite razmak, da slova budu italicizarana itd. Praktično mogućnosti su neograničene, ali da biste sve to mogli potrebno je da naučite nekoliko osnovnih tag-ova koji obrađuju tekst na vašoj HTML strani. Pa da počnemo!

Tag <p></p>

Upravo je ovo osnovni HTML tag za tekst i zovemo ga paragraf tag. Paragraf predstavlja prije svega određen dio teksta koji je vezan za glavni pojam, cjelinu itd. Znači sa njime obrađujete dio teksta na vašoj stranici. Koristićete ga bezbroj puta i važan je da ga u potpunosti savladate. A zaista nije teško vidjećete! Takođe zapamtite jer će vam valjati da je po default-u vaš <p>Neki tekst</p> veličine 12pt! Ovo napominjem samo zbog sledećih lekcija koje slijede i nekih drugih tagova tako da se za sada ne opterećujte puno sa tim ali zapamtite to.

Da bismo napisali nesto na u HTML kodu, a da se to verno prikaže na vašoj web stranici koristite <p> Neki tekst! </p>, odnosno paragraf tag. Sa svakim završenim </p> tag-om i započetim novim počinje novi red teksta ali bez razmaka između istih paragrafa! Najbolje da pokažemo primjer da bi vam bilo jasnije. Sve zajedno bi to izgledalo ovako:

<html>

<head>

<title>Tagovi za obradu teksta</title>

</head>

<body>

<p>Ja sam Petar Petrović i ovo je paragraf tag kojim se obeležava paragraf u HTML kodu</p>

<p>Ovo je drugi paragraf,a između prvog i drugog paragrafa  nema prostora, zar ne? Da, nema prostora!</p>

</body>

</html>

(prepišite ovaj kod u vaš editor i pokrenite ga u svom browseru)

Eto upravo ste napisali svoje prve tekstove sa <p> tag-om! Jednostavno je.

Upravo iz ovog primjera vidite da nema razmaka, odnosno prostora između paragrafa. Da bismo dodali prostor između paragrafa koristimo tag <br />.Da, upravo ovaj tag nema svoj završni tag </br> nego je ovo <br /> sve što treba da ukucate u svoj kod da bi dodali razmak između redova. Ukoliko ste dobro savladali prvu lekciju vidjeli ste da smo naučili da nekoliko tag-ova u HTML kodu nema završni tag </>. Upravo <br /> tag,tag za dodavanje prostora između redova je jedan od njih!

Ajmo sada da vidimo kako to izgleda u HTML kodu, da razdvojimo malo naše paragrafe:

<html>

<head>

<title>Tagovi za obradu teksta i razmak između redova</title>

</head>

<body>

<p>Ja sam Petar Petrović i ovo je paragraf tag kojim se obeležava paragraf u HTML kodu</p>

<br />

<p>Ovo je drugi paragraf, a između prvog i drugog paragrafa  nema prostora, zar ne? Ne! Izgleda da ima sa tag-om za dodavanje prostora!</p>

</body>

</html>

(znate već da treba ovaj kod iznad da prepišete ili copy/paste u editor, da ga sačuvate kao index.html i da ga pokrenete)

I eto! Dobili smo razmak između naših redova. Zaista je jednostavno. Ukoliko želite više razmaka između vaših redova…hmm…pokušajte da pogodite šta treba da uradite? Pa da, dodajte više <br /> tag-ova između paragrafa! Takođe ukoliko želite da prekinete neki red usred rečenice i započnete novi red možete sa <br /> tag-om, vaš kod će i dalje biti validan! Sa drugim tagovima je to drugačije ali o tome ćemo kasnije. Evo primjera za prethodno napisano:

<html>

<head>

<title>Tagovi za obradu teksta i razmak između redova u rečenici i između redova</title>

</head>

<body>

<p>Ja sam Petar Petrović i ovo je paragraf tag  kojim se obeležava paragraf u HTML kodu.<br /> Ovaj red je odvojen i započet kao novi!</p>

<br />

<p>Ovo je drugi paragraf, a između prvog i drugog paragrafa  nema prostora, zar ne?Ne! Izgleda da ima sa tag-om za dodavanje prostora!</p>

</body>

</html>

Sada vam je jasnije na šta sam mislio.

Znači zapamtite da vaši programi na vašem kompjuteru nisu jako pronicljivi. Pa isto tako nije ni HTML kod. Ako želite da on nešto uradi morate da mu date komandu koju on razumije da bi vas poslušao. Drugim riječima, na primjer ne možete pritiskati enter i očekivati da se razmak sam od sebe pojavi u vašem browseru kada pokrenete HTML kod. Recimo Word bi vas poslušao ili notepad ili neki tekstualni editor ali HTML vas ne bi razumeo. Zato se navikavajte na komande koje će vaš HTML kod da razumije da bi bilo sve uredu kada isti kod pokrenete u browser-u.

Možda bi najbolje bilo da zamislite da je HTML vaš program koji razumije sve ali na njegovom jeziku. Pošto definitivno nismo u mogućnosti još uvijek da mi njega naučimo srpskim jezikom jedino što preostaje je da se prilagodimo I naučimo njegovim jezikom da govorimo i biće sve kako treba!

Tag <h1></h1>

Složićemo se da sve što se ikada napisalo ima svoj naslov pa tako i neki vaš tekst. Recimo i ovaj naš tutorijal ima naslov HTML LEKCIJE ZA POČETNIKE! Ovo je osnovni tag za naslov neke teme i ima ih ukupno šest. Ajde da pogledamo primjer i biće vam jasnije:

<html>

<head>

<title>Tagovi za obradu teksta isa naslovima</title>

</head>

<body>

<h1>Naslov H1</h1>

<h2>Naslov H2</h2>

<h3>Naslov H3</h3>

<h4>Naslov H4</h4>

<h5>Naslov H5</h5>

<h6>Naslov H6</h6>

<p>Ovo iznad su sve naslovi!</p>

</body>

</html>

(prepišite,sačuvajte i pokrenite kod)

Eto vidite zašto sam napomenuo da je <p> paragraf po default-u 12px veličine fonta! Naslovi su monogo veći, <h1> tag je po default-u 24pt,<h2> je 18pt itd.

Upravo ove tag-ove možemo okarakterisati kao naslove neke teme poslije koje ide sadržaj koji se obično nalazi između <p></p> tag-ova. Pitate se pa šta će nam <h1> tag za naslov kada ja mogu da povećam i veličinu fonta <p> taga i tako riješim sve probleme? U pravu ste da možete i tako da uradite ali niste u pravu da ste riješili sve probleme sa tim. Tražilice (google,yahoo,msn) bez <h1>,<h2> itd. tag-ova neće znati šta da izdvoje kao važan element sa vaše web strane! Ajde da vam ja kažem da mi pronađete i pročitate određenu temu iz dnevnog lista recimo “Politika”, a da se u njoj ne koristi nijedan naslov, ni zadebljani fontovi ni nikakva razlika u tekstu odpočetka do kraja dnevnog lista. Pa to bi trajalo i trajalo zar ne? Jasno je da ima razlike kada već dođemo i pogledamo vašu web stranicu tako kodiranu ali tražilice su isto oni programi čijem jeziku moramo da se prilagodimo i da kada one posjete našu stranu razumeju šta je važno i da to izdvoje da bi se neko drugi lakše snašao i lakše pronašao naš sajt! Upravo ukoliko na vašem sajtu postoji svih šest tagova za naslov sa šest različitih tema tako će tražilice da poređaju u njihovoj memoriji (sjećanju) njihovu važnost!

Nadam se da vam je jasno zašto su upravo tag-ovi za naslove važni!

Eto danas smo naučili koji su tag-ovi jako važni za obradu teksta i koji tag-ovi se koriste za naslove u tekstu i upopšte važnost tih tag-ova. Takođe smo naučili i kako odvojiti prostor između teksta u HTML kodu.

Nikada nemojte kucati svoj tekst bez paragrafa odnosno bez HTML tag-ova za paragraf i naslove ! Recimo <p>Neki tekst</p> uvijek ovako kucajte tekst! Ako se pitate zašto kada se moj tekst vidi i bez paragrafa u browser-u? Upravo zato što kasnije ukoliko budete pisali bez paragrafa nećete moći da obrađujete taj tekst! Nećete moći da mu odredite boju, veličinu,razmak itd. Zato zapamtite da se svaki tekst koji pišete uvijek mora nalaziti između <p></p> tag-ova. Ima izuzetaka kao za linkove i još par tekstualnih sadržaja ali 99% teksta se nalazi između <p> </p> tag-ova. Takođe zapamtite važnost <h1>,<h2>,<h3>,<h4>,<h5>,<h6>, tag-ova.

Eto to bi bilo sve za današnju lekciju i nadam se da je bila laka za shvatiti!

Pozdrav do sledeće nedelje!

]]> http://www.designersandcoders.net/2009/07/html-za-pocetnike-lekcija-2/feed/ 3 3 korisna CSS fix-a za Internet Explorer 6 http://www.designersandcoders.net/2009/07/3-korisna-css-fix-a-za-internet-explorer-6/ http://www.designersandcoders.net/2009/07/3-korisna-css-fix-a-za-internet-explorer-6/#comments Sun, 19 Jul 2009 00:46:20 +0000 Joshica http://www.designersandcoders.net/?p=412 ie6hacksKao što svi znate optimizovati sajt za Internet Exporer može biti mnogo naporno. Nekada se samo kodiranje produži i po nekoliko sati kako bi se dobio isti izgled u IE6 prvenstveno, a posle i u IE7 (od nedavno i u IE8). Ono što želim ovim postom da pokažem jeste kako možete da izbegnete ozbiljnije probleme u IE-u, a samim tim i da skratite vreme predviđeno za kodiranje. Pokazaćemo 3 česta problema sa IE-om. Nadamo se da će ovaj post pomoći u budućoj izradi i kodiranju vaših projekata.

Pa da krenemo sa prvim hack-om:

1. Uslovni komentar.

Uslovni komentar je specijalni Html komentar koji govori IE brower-u u Windows-u koji CSS je za njega specijalno napravljen, a ostali browser-i preskaču ovu liniju koda jer njima nije namenjena. Sam kod uslovnog komentara bi izgledao ovako:

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie-fix.css” />
<![endif]–>

Takođe možete da stavite uslovni komentar samo za određenu verziju IE browser-a. Npr:

<!–[if IE7]>
<link rel=”stylesheet” type=”text/css” href=”ie7-fix.css” />
<![endif]–>

Ovaj kod će samo IE7 da govori šta da radi, tj kako da stilizuje HTML.

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6-fix.css” />
<![endif]–>

Ovaj kod će samo IE6 da govori šta da radi, tj kako da stilizuje HTML.

2. Dupla margina za float element

Kao što većina zna IE6 pravi problem kada je float-ovan element i ima marginu. Tačnije Internet Explorer 6 duplira marginu i time pravi haos na samom sajtu. Kako to izbeći?
Evo jednog primera kako možete odmah u kodiranju da mislite na IE6 i njegove bagove.

CSS code:

.neka_klasa {
float: left;
width: 300px;
margin-left:100px;
}

Ovako bi trebalo da izgleda

a ovako izgleda u IE6

Kako se problem rešava?

Iz nepoznatog razloga kada elementu koji je float-ovan i ima maginu stavite u liniju CSS-a “display:inline” onda će i u IE6 staviti marginu kako treba.
Ovo će drugi browseri da zanemare dok će IE6 da pokaže normalnu marginu, a samim tim će se videti pravi izgled naše klase ili samog elementa.

ovako bi izgledao sadašnji kod nase klase

.neka_klasa {
float: left;
width: 300px;
margin-left:100px;
display:inline;
}

Internet Explorer i min-height

Koliko puta vam se desilo da imate problema sa min-height u Internet Exploreru?
Koliko puta ste se mučili da namestite, i na kraju niste uspeli.

Postoji mnogo načina da se ovaj problem reši (javascript hacks, itd…), ali ja ću pokazati jedan koji meni uvek završava posao.

Da pogledamo kod i da ga objasnimo:

#neki_div {
min-height:100px;
}

Ovako bi izgledao kod koji svaki browser vidi, ali ne i IE6.
A sada ćemo videti kako će da izgleda kod i za IE6:

#neki_div {
min-height:100px;
height: 100px;
}

html > body #neki_div {
height: auto;
}

Evo i kratkog objašnjenja: Prvo smo zadali min-height za sve browsere, a zatim smo stavili visinu koju IE ne priznaje. Potom smo stavili “child selectors” koji IE vidi i vraća height na “auto”.

Kao što smo već rekli ovo je samo jedan od načina da uradite min-height za Internet Exporer i iskreno se nadam da će vam ovaj primer poslužiti u daljem radu.

]]> http://www.designersandcoders.net/2009/07/3-korisna-css-fix-a-za-internet-explorer-6/feed/ 2 Objektno orjentisani php – Lekcija 1 http://www.designersandcoders.net/2009/07/objektno-orjentisani-php-lekcija-1/ http://www.designersandcoders.net/2009/07/objektno-orjentisani-php-lekcija-1/#comments Wed, 15 Jul 2009 07:13:52 +0000 Opi http://www.designersandcoders.net/?p=390 995000_46458615Ovo je prva lekcija iz serije na temu objektno orjentisanog php-a , a namenjena je početnicima. Prvo da krenemo sa opštom pričom , a kod objektnog programiranja sve počinje i završava se sa “klasom”. Najbolje je početi kroz primere, da ne bude previše “suvo” štivo.

neka je ovo fajl : Test.php

class Test {

private $vrednost;

public function  __construct(){ $this->vrednost = “test”; }

public function print(){echo $this->vrednost;}

}

A sad : main.php

include(’Test.php’);

$prom = new Test();

$prom->print();

Kad se ovo izvrši , trebalo bi da se ispiše “test”. Sad ću da objasnim šta smo ovde uradili. $vrednost je promenjiva , članica klase , i pošto je “private” , dostupna je samo unutar klase ( može biti private [ samo unutar klase ] , protected [ unutar klase i unutar izvedenih klasa *kasnije ] i public [ svuda dostupna] ). __construct je takozvana “magična metoda” zato sto ima prefix “__” , a ima ulogu “konstruktor-a” , t.j. izvršava se kad se pozove “new ImeKlase()”. $prom->print() je poziv funkcije unutar klase Test , i ona ispisuje vrednost promenjive “$vrednost”.

U ovom postu ćemo obraditi još 1 ( 2 ) novi pojam : statičke promenjive i statičke funkcije. Statičke promenjive  i metode su specifične po tome što su zajedničke za sve objekte tipa date klase. Sad ćemo to da razjasnimo na primeru.

Staticka.php

class Staticka {

private static $st = 0;

public static function set($vr){self::$st = $vr;}

public static function print(){ echo self::$st;}

}

main.php

include(’Staticka.php’);

Staticka::print();

Staticka::set(10);

Staticka::print();

Trebalo bi prvo da se ispiše 0 pa onda 10. Prvo da objasnimo razlike izmedju statičkih i nestatičkih promenjivih i funkcija u nekoj klasi:

Ne Statička Statička
Poziv unutar klase $this->ime self::$ime
Pristup javnoj ( public )promenjivoj van klase $promenjiva->ime ImeKlase::$ime
Poziv javne funkcije van klase $promenjiva->funkcija() ImeKlase::funkcija()

Mislim da je ovo dovoljno za nekog ko se prvi put susreće sa objektnim programiranjem , a nastavak sledi!

]]> http://www.designersandcoders.net/2009/07/objektno-orjentisani-php-lekcija-1/feed/ 0 HTML za početnike – Lekcija 1 http://www.designersandcoders.net/2009/07/html-lekcija-1/ http://www.designersandcoders.net/2009/07/html-lekcija-1/#comments Fri, 10 Jul 2009 21:00:43 +0000 Pebas http://www.designersandcoders.net/?p=346 Tutorial1Ovaj tutorijal je namijenjen početnicima i onima kojima treba podsjetnik za HTML.

Ukoliko se bilo ko odlučio da proba da napravi svoju web prezentaciju ili da objavi nešto na www-u (world wide web) upravo HTML je osnova bez koje se ne može. Neki ljudi će vam reći da je to jako teško i da se ne da lako naučiti. Ne obraćajte previše pažnju na njih.

Mogu samo da vam kažem da svako ko je probao da nauči HTML naučio ga je. Pod uslovom da zna da čita i piše naravno. Vjerovali ili ne samo to je dovoljno, da znate da čitate i da pišete. Dok budete čitali ovaj tutorijal I napredovali kroz HTML usput učite engleski. Jako će vam biti potreban kasnije da bi ste naučili CSS, PHP, JavaScript itd. Znači moj savjet vam je engleski učite pod obavezno!!! Za ovaj tutorijal vam ne treba engleski ali zašto ostati samo na HTML-u I ne unaprijediti sebe I svoje znanje u oblasti web dizajna I web programiranja?

Obično svi HTML tutorijali počinju od početka, odnosno “dave” sa doctype idt. Mi cemo to ostaviti za kraj. Ovaj tutorijal će početi od praktičnih stvari i pokušaću da objasnim najbolje što mogu upravo tu praktičnu stranu HTML-a!

Šta vam je potrebno da biste pisali HTML kod? Prvo vam je potreban Internet Explorer, Firefox, Opera ,  Safari ili Chrome (Netscape ako koristite nemojte više) I neki text editor. Evo nekih editora za tekst:

1.) Notepad (on dolazi uz svaki Windows)

2.) Notepad ++ (njega možete “skinuti” odavde , a dobar je jer vam u boji obeležava kod)

3.) Dreamveawer (program iz Adobe palete programa a njega možete “skinuti”…hmm…pardon, možete ga kupiti na zvaničnom Adobe sajtu)

Ima tu još dosta editora teksta ali ja bih vam preporučio za početak Notepad++.

Pa da počnemo!

STRUKTURA HTML-a

Svaki HTML ima svoju strukturu, a ona je jako važna i treba da je naučite. Kada je shvatite uvijek ćete je koristiti. Upravo HTML struktura pocinje sa Deklaracijom o tipu dokumenta (Doctype). O njoj cemo kasnije detaljnije učiti. Sada ćemo se osvrnuti na ovaj kod i usput ga objasniti:

1. <html>

2. <head>

3. <title>(ovde ukucajte ime vašeg budućeg sajta)</title>

4. </head>

5. <body>

6. Pozdrav svima!

7. </body>

8. </html>


(prepišite ovaj kod ili ga “copy/paste” u vas editor i sačuvajte ga kao index.html, naravno bez rednih brojeva i tačaka na početku svakog reda,onda kliknite dva puta na sačuvani index.html pa pogledajte šta se dešava u vašem pretraživaču)

Sada pogledamo i objasnimo kod:

1. Prvi red prikazuje početak svakog HTML dokumenta I obeležava se <html> tag-om. Znači uvijek svaki HTML dokument počinje ovakvim kodom i to nemojte zaboraviti.

2. Drugi red predstavlja početak,da ga tako nazovemo, GLAVE svakog HTML dokumenta i obeležava se <head> tag-om. Upravo između svakog <head> tag-a će se u budućnosti nalaziti informacije koje će pomoći tražilicama (google, yahoo itd.) da lakše pronađu vaš sajt. Takođe u okviru <head> tagova postavljaćete kasnije eksterne dokumente koji će služiti da vašu stranicu učine atraktivnijom i ljepšom.

3. Treći red predstavlja IME vašeg sajta i jako je važan. Zamislite sebe bez imena! Na koje ime biste se odazivali. Tako isto se vaš sajt neće odazvati na tražilicama jer ne zna kako se zove. Jednostavno je tako, postoje načini da se vaš sajt odazove i bez imena ali navikavajte se da vaš sajt uvijek ima svoje IME. Upravo to predstavljaju <title> tag-ovi, naziv vašeg sajta.

(U ovom slučaju ćete u tab-u vašeg browsera koji obeležava sajt vidjeti ime sajta koji ste ukucali u kodu. Ako nije baš najjasnije na šta sam mislio pokušajte da pronađete, ono što ste ukucali između<title> tagova u vašem kodu, na browseru kada pokrenete kod. Biće vam jasno o čemu se radi.)

4. Četvrti red </head> predstavlja kraj GLAVE dokumenta. Kasnije ćemo se osvrnuti na taj kod.

5. Peti red predstavlja početak TIJELA dokumenta i obeležava se <body> tag-om. Sve u tijelu dokumenta će biti kod koji će posjetioci vašeg sajta vidjeti na svom monitoru. Postoje razni načini da se ono što je u kodu ne vidi na vašem sajtu ali ćete polako učiti o tome u narednim lekcijama. Za sada je bitno da je upravo TIJELO odnosno <body> vašeg dokumenta osnovni prostor u kojem ćete praviti vaše sajtove, znači glavni dio sajta koji će posjetioci biti u stanju da vide na vašem sajtu upravo je u TIJELU vašeg koda.

6. Vaša prva HTML rečenica!

7. Ovaj </body> tag predstavlja kraj TIJELA dokumenta. Ispod ćemo i o ovom kodu više reći.

8. Takođe i </html> tag ćemo objasniti malo kasnije.

Upravo ste napisali svoj prvi HTML kod i nadam se da je bilo jako jednostavno razumeti strukturu svakog HTML dokumenta. Iz ove prve lekcije ste naučili da svaki HTML kod ima svoju strukturu.

Osim toga naučili ste da svaki HTML ima svoja pravila, a to je upravo da svaki HTML tag počinje ovakvim znakovima „< >“ i sve zajedno do izgleda recimo ovako <p>, <h1>, <body> itd. Takodje ostao sam dužan da objasnim par redova koda ali ovo je uvod i upravo ste naučili kako počinju HTML tagovi. E sada da pojasnim preskočene redove u kodu iznad. Svaki HTML tag se završava ovakvim znakovima „</>“ , a sve zajedno to izgleda </p>, </h1>, </body> itd. Znači svaki započeti HTML tag mora se završiti.

ZAPAMTITE ako smo započeli ovaj tag za paragraf <p> moramo ga završiti ovako </p>. To ovako izgleda <p>Ja sam Petar Petrovic</p>.  Znači to važi za svaki tag u HTML dokumentu. Ima par tagova koji se završavaju drugačije ali o tome ćemo kasnije u nekim drugim lekcijama.

Nadam se da nije bilo jako nejasno. Do sledeće lekcije počnite da učite engleski i lagano pregledajte ovaj sajt:

http://www.w3schools.com/html/default.asp

]]> http://www.designersandcoders.net/2009/07/html-lekcija-1/feed/ 0 Veoma korisni Jquery pluginovi – Deo:1 http://www.designersandcoders.net/2009/07/veoma-korisni-jquery-pluginovi-deo1/ http://www.designersandcoders.net/2009/07/veoma-korisni-jquery-pluginovi-deo1/#comments Sat, 04 Jul 2009 21:33:50 +0000 Joshica http://www.designersandcoders.net/?p=282 agile-malaSvako od nas se do sada susreo sa velikim brojem pluginova bilo to JQuery ili Motools ili neki drugi a da nije ni svestan šta stoji tačno ispod preview-a sajta. Zato ovog puta Vam prikazujemo primere nekih pluginova za Jquery, kako bi mogli da date dinamiku vašem projektu ali i korisniku sajta da olaksate razne stvari.

Carousel:


Infinite Carousel

Zanimljiv Carousel za laku upotrebu i još jedan efekat na vašem sajtu.

Infinite


jCarousel Lite

Jos jedan jako lak Carousel za sve ljubitelje JQuery-a

jCarousel-Lite


Agile Carousel

Jako dobar Carousel ima više opcija, i veoma lak za korišćenje.

agile

JQuery Forms:

Form Validator

Jako lak za korišćenje i veoma koristan alat za spamove i proveru validnosti korisnika vašeg sajta.

form-validator


Simple jQuery form validation

simple

Ovo su samo neki od primera naravno postoje veliki broj raznih plugin-ova, ali više o njima ćemo objavljivati u nekom od sledećih postova.

]]> http://www.designersandcoders.net/2009/07/veoma-korisni-jquery-pluginovi-deo1/feed/ 1 10 Dobro dizajniranih sajtova – Jun 2009 http://www.designersandcoders.net/2009/07/10-dobro-dizajniranih-sajtova-jun2009/ http://www.designersandcoders.net/2009/07/10-dobro-dizajniranih-sajtova-jun2009/#comments Sat, 04 Jul 2009 12:53:51 +0000 Joshica http://www.designersandcoders.net/?p=243 10-dizajniranih

Od danas pa u narednom periodu, trudićemo se da svakog meseca prikazujemo dobro dizajnirane sajtove za predhodni mesec. Ovog puta smo odabrali 10 sajtova za koje smatramo da su zaslužili da se nađu na našoj listi, isto tako ako imate i vi predloge za neke domaće ili strane sajtove molili bih Vas da nam ukažete na njih kako bi ih prikazali u ovoj rubrici.

Pokazujemo 10 dobro dizajniranih sajtova za jun 2009. Naravno ovo je naše mišljenje, što ne mora da znači su ovo jedini dobri sajtovi.

Audrinaxo

audrinaxo


Vacation rental station

vacationrentalstation


Really living

reallyliving


Serj Kozlov

serj


84colors

84colors


Creative Comic

creativecomic


Bkwld

bkwld


Stage3

stage3


Arsmedia

arsmedia


Meingutscheincode

meingutscheincode

]]> http://www.designersandcoders.net/2009/07/10-dobro-dizajniranih-sajtova-jun2009/feed/ 0 CSS – Round Corners za horizontalni Meni http://www.designersandcoders.net/2009/07/css-round-corners-za-horizontalni-meni/ http://www.designersandcoders.net/2009/07/css-round-corners-za-horizontalni-meni/#comments Sat, 04 Jul 2009 11:49:56 +0000 Joshica http://www.designersandcoders.net/?p=216 cssKada sam bio mlađi, tj neiskusniji, mnogo me je zezao horizontalni meni sa zaobljenim ivicama. Znao sam da to nije veliki problem da se napravi, ali nikako nisam mogao da upamtim sve što treba da bi meni izgledao baš onako kako sam ga ja zamislio ali i nacrtao. Takođe mi se dešavalo da ono što nacrtam neznam da iskodiram da sa “papira” pretočim u HTML/CSS kod.

Nekada posle više sati rada na samom meniju počeo sam da se nerviram oko jednostavne stvari ali i meni u tom trenutku jako teške.

Ovom prilikom želim da pokažem mlađim HTML/CSS  koderima kako mogu lako da naprave horizontalni meni sa zaobljenim ivicama, a pritom da ne koriste AJAX (Jquery, Mootols…) framework-e.

menu

Meni možete da vidite na ovoj strani kao i da skinete source code! Takođe za ovaj meni će vam biti potrebne background slike definisane u CSS-u.

Leva strana menija

Desna strana menija (u slučaju da vam reč u meniju ima mnogo karaktera moraćete sliku da produžite, ovo je samo primer)

Background za Meni

Desno dugme miša na sliku i Save  Image As da bi sliku sačuvali na svom kompjuteru. (takodje imate u source codu ceo meni)

Evo i Html koda:

<h2>Designers and Coders CSS Menu</h2>
<div id=”menu”>
<ul>

<li id=”current”><a href=”Home.html”><span>Home</span></a></li>
<li><a href=”Products.html”><span>O nama</span></a></li>
<li><a href=”Services.html”><span>Servisi</span></a></li>
<li><a href=”Support.html”><span>Podrska</span></a></li>
<li><a href=”Order.html”><span>Naruci</span></a></li>
<li><a href=”News.html”><span>Novosti</span></a></li>
<li><a href=”About.html”><span>Contact</span></a></li>

</ul>
</div>

A evo i CSS-a koji obavlja sav “prljav” posao:

#menu {
float:left;
width:100%;
background:#F4F7FB url(back.gif) top left repeat-x;
font-size:12px;
line-height:normal;
}

#menu ul {
margin:0;
padding:10px 10px 0 15px;
list-style:none;
}

#menu li {
display:inline;
margin:0;
padding:0;
}

#menu a {
float:left;
background:url(”left-tab.gif”) no-repeat left top;
margin-left:2px;
padding:0 0 0 4px;
text-decoration:none;
}

#menu a span {
float:left;
display:block;
background:url(”right-tab.gif”) no-repeat right top;
padding:4px 15px 2px 6px;
color:#666;
font-family:Arial, Helvetica, sans-serif;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#menu a span {float:none;}
/* End IE5-Mac hack */

#menu a:hover span {
color:#627EB7;
}

#menu a:hover {
background-position:0% -22px;
}

#menu a:hover span {
background-position:100% -22px;
color:#09C;
}

#menu #current a {
background-position:0% -22px;
}

#menu #current a span {
background-position:100% -22px;
}

Nadam se da sam pomogao sa ovim postom i da ćete sada lakše da pravite odnosno da razumete CSS horizontalni meni.

]]> http://www.designersandcoders.net/2009/07/css-round-corners-za-horizontalni-meni/feed/ 0 CSS – Kako napraviti paginaciju? http://www.designersandcoders.net/2009/06/css-kako-napraviti-paginaciju/ http://www.designersandcoders.net/2009/06/css-kako-napraviti-paginaciju/#comments Sat, 27 Jun 2009 15:02:32 +0000 Joshica http://www.designersandcoders.net/?p=173 cssDosta puta dok radim projekat desilo mi se da mi zatreba paginacija (a nije bila predviđena u mockup-u), a da tek onda razmišljam šta sve treba da iskodiram tj šta sve treba da ima (aktivno, neaktivno, boje, slike itd…). To vreme koje potrošim razmišljajući kako da sredim deo koji mi fali, može dosta da traje i da usled zamora i drugih okolnosti izostavim neki deo koji kasnije moram da popravim. Samo vraćanje na neke takozvane “završene delove” mogu dosta da koštaju samu firmu, kompaniju ili pojedinca.

Ovim želim da vam pokažem kako možete da stilizujete paginaciju za Vaš budući projekat.

Samim tim mozete da je iskopirate u svaki sledeći projekat i da za mnogo kraće vreme dobijete ono što ste pre toga (vi ili drugi dizajner) zamislili u Mockup-u. Takođe ću da Vam predoložim par preloga mockup-a za istu.

Prvo da krenemo sa predlozima mockup-a (da damo inspiraciju):

paginacija

css paginacija

paginacija blue

paginacija-green

paginacija-default

A sada da pokažemo kako možete da stilizujete uz pomoc CSS-a.

Prvo da krenemo sa običnim HTML kodom:

<div class=”manu”>
<span class=”disabled”>< Prev</span>
<span class=”current”>1</span>
<a href=”#”>2</a>
<a href=”#”>3</a>
<a href=”#”>4</a>
<a href=”#”>5</a>
<a href=”#”>6</a>
<a href=”#”>7</a>
…
<a href=”#”>199</a>
<a href=”#”>200</a>
<a href=”#”>Next ></a>
</div>

Kao što možete da vidite imamo tri klase (manu, disabled i current), svaka od njih ima svoju ulogu.
Prva klasa je: menu (ona nam daje okvir oko cele paginacije)
Druga klasa je: disabled (ona nam daje izgled dugmeta kada je neaktivno ili isključeno)
Treća klasa je: current (ona nam daje izgled dugmeta kada je aktivno, odnosno obaveštava posetilaca sajta na kojoj se trenutno strani nalazi)

a ovo je CSS kojim određujete boje i velicinu same paginacije tj dugmića u njoj.

.manu {
padding: 3px;
margin: 3px;
text-align: center;
}


.manu a {

border: #eee 1px solid;
padding-top: 2px 5px 2px 5px;
margin: 2px;
color: #036cb4;
text-decoration: none;
padding:2px 5px 2px 5px;
}

.manu a:hover {
border: #999 1px solid;
color: #666;
}


.manu a:active {
color: #666;
border: #999 1px solid
}


.manu .current {
border: #036cb4 1px solid;
padding:2px 5px 2px 5px;
font-weight: bold;
margin: 2px;
color: #fff;
background-color: #036cb4;
}


.manu .disabled {
border-right: #eee 1px solid;
padding:2px 5px 2px 5px;
border: #eee 1px solid;
margin: 2px;
color: #ddd;
}

Kako je ispalo na kraju, možete da vidite ovde! Kao i source kod možete skinuti odavde.

]]> http://www.designersandcoders.net/2009/06/css-kako-napraviti-paginaciju/feed/ 0 Odličan web interface zа mysql http://www.designersandcoders.net/2009/06/odlican-web-interface-z%d0%b0-mysql/ http://www.designersandcoders.net/2009/06/odlican-web-interface-z%d0%b0-mysql/#comments Wed, 10 Jun 2009 18:52:21 +0000 Opi http://www.designersandcoders.net/?p=22 Php

Koliko puta vam je zatrebalo da napravite brži web interface ka bazi (konkretno Mysql) ?
Nekoliko puta sam se našao u toj situaciji, i svaki put sam iznova ponavljao posao, a onda sam otkrio: phpmyedit. Podržava dodavanje, promenu, pregled, kopiranje i brisanje. (filtere, preglede…) Krajnje jednostavna za upotrebu, i brzo praktična, ova biblioteka je “cool”.

Jednostavnost je vrlina.
Evo kratkog pregleda:
$opts[’fdd’][’col_name’][’select’] = ’T’; // text box
$opts[’fdd’][’col_name’][’select’] = ’N’; // numeric
$opts[’fdd’][’col_name’][’select’] = ’D’; // drop down
$opts[’fdd’][’col_name’][’select’] = ’M’; // multiple selection
$opts[’fdd’][’col_name’][’select’] = ’O’; // radio buttons
$opts[’fdd’][’col_name’][’select’] = ’C’; // checkboxes
A — add
C — change
P — copy
V — view
D — delete
L — table list
F — table filter
$opts[’fdd’][’col_name’][’options’] = ’LF’; // shows only in table list/filter
R — indicates a field is read only
W — indicates a field is a password field
H — indicates a field is to be hidden and marked as hidden
$opts[’fdd’][’col_name’][’input’] = ’H’; // hidden field
$opts[’fdd’][’col_name’][’input’] = ’P’; // password field
$opts[’fdd’][’col_name’][’input’] = ’R’; // read-only field

Kratko upustvo za upotrebu :
Priloženi sql uneti u bazu.

CREATE DATABASE magacini;
USE magacini;
CREATE TABLE magacini (
magacinid int(3) NOT NULL auto_increment,
magacin varchar(100) default NULL,
PRIMARY KEY (magacinid) )
engine=InnoDb;
CREATE TABLE police (
policaid int(10) NOT NULL auto_increment,
magacinid int(3) NOT NULL,
polica varchar(100) default NULL,
constraint magid foreign key (magacinid) references magacini(magacinid)
on delete cascade on update cascade,
PRIMARY KEY (policaid) ) engine=InnoDb;
CREATE TABLE artikli ( artikalid int(10) NOT NULL auto_increment,
policaid int(10) default NULL,
artikal varchar(100) default NULL,
otpornost enum ('lomljivo','otporno'),
materijali set('staklo','metal','drvo'),
constraint resid foreign key (policaid) references police (policaid)
on delete cascade on update cascade, PRIMARY KEY (artikalid) ) engine=InnoDb;
Skinuti: phpmyedit.
Otpakovati ga negde gde mogu da se pokrenu php skripte.
Pokrenuti phpMyEditSetup.php 3 puta (za svaku tabelu posebno) , sa odgovarajućim podešavanjima (korisničko ime , lozinka, baza, tabela ), i izgenerisati 3 fajla (za svaku tabelu ponaosob).

primer

Na primer: magacini.php , police.php i artikli.php
Sad mogu da se pokrenu generisani fajlovi u pretraživaču i da se jednostavno vrše razne operacije nad bazom.
Kada ubacite nekoliko zapisa u bazu, prikaz tabele sa artiklima bi trebalo da izgleda ovako:

artikli

]]> http://www.designersandcoders.net/2009/06/odlican-web-interface-z%d0%b0-mysql/feed/ 0