KURS WEB DIZAJNA (PHOTOSHOP ZA WEB, JAVASCRIPT – OSNOVE)
mr Besara Nikola, dipl. inž.
Priručnik sa kursa
SMISLI, KODIRAJ, STILIZUJ, POSTAVI NA SERVER
KURS WEB DIZAJNA
Sadržaj
1. UVOD ........................................................................................................ 4 1.1. Struktura i organizacija statičkog sajta ................................................ 5 2. POČETAK ‐ PRVA WEB STRANA .................................................................. 7 2.1. HTML ‐ Uvod, struktura jedne web stranice ........................................ 7 2.2. Title, keywords, description, favicon ................................................... 8 2.3. DivTag‐ovi – konstrukcija web strane ................................................. 9 2.6. CSS – stilovi ....................................................................................... 12 2.7. Formatiranje uz pomoć CSS‐a (definisanje klasa)............................... 13 2.8. Kreiranje Header‐a ‐ ubacivanje slike............................................... 18 2.8.1. Link u delu slike – HOT SPOT (Dreamweaver) ................................ 19 3. NAVIGACIJA – horizontalna i vertikalna ................................................... 20 3.1. Ubacivanje horizontalne navigacije ................................................... 20 4. CONTENT – glavni sadržaj web strane ..................................................... 22 4.2. Primeri formiranja teksta u HTML‐u .................................................. 24 4.3. Ubacivanje linka u tekst – običan link, email link, link ka fajlu........... 26 4.4. Ubacivanje slike u tekst..................................................................... 27 4.5. Tabele – rad sa tabelama (Dreamweaver) ......................................... 29 4.6. Tekst u kolonama (columns) ............................................................. 31 5. GALERIJA SLIKA ....................................................................................... 32 5.1. Kreiranje Galerije slika ...................................................................... 32 6. VIDEO...................................................................................................... 35 6.1. Ubacivanje YOUTUBE videa na sajt ................................................... 35 6.2. Konvertovanje iz AVI u MP4 i OGG preko VLC media player‐a ........... 36 7. DODATNI ELEMENTI NA SAJTU ................................................................ 37 7.1. Google mapa – implemetacija u HTML kod ....................................... 37 7.2. Komentari u HTML kodu ................................................................... 38 7.3. Elektronski formular ......................................................................... 39 7.4. Horizontall Scroller – listanje proizvoda ............................................ 40 2
KURS WEB DIZAJNA 7.5. Top Scroll Button .............................................................................. 41 7.6. Tekstulani Slider................................................................................ 42 7.7. Accordion Slider ................................................................................ 43 7.8. Animacija u HTML ............................................................................. 44 7.9. Animacija slika u HTML ..................................................................... 45 8. SLIDE SHOW ............................................................................................ 47 8.1. Kreiranje Div Tag‐a Klase Slide_Show................................................ 47 8.1. Kreiranje Slide Show animacije ......................................................... 48 9. PUBLIKACIJA SAJTA – postavljanje prezentacije na server ....................... 50 9.1. FTP FileZilla Client – prebacivanje prezentacije na server .................. 53 9.2. Pregled sajta u Firefox, Chrome, IE .................................................... 55 10. PHOTOSHOP ZA WEB – priprema u photoshopu za web ........................ 56 10.1. Uvod u radno okruženje (Opis ekrana) ............................................ 56 10.2. Otvaranje Photosop fajlova – rezolucija, bitmap ............................. 57 10.3. Selekcija u Photshopu ..................................................................... 59 10.4. Layers.............................................................................................. 60 10.5. Erase Background............................................................................ 61 10.6. Optimizacija slike ............................................................................ 62 10.7. Tekst ............................................................................................... 62 10.8. Dodatna obrada slike ...................................................................... 64 11. MOBIL DIZAJN – dizjan sajta za mobilne ................................................ 65 11.1. Organizacija mobil verzije ............................................................... 65 11.2. Struktura HTML strane za mobil verziju........................................... 66 11.3. Media queries – stilovi prema rezoluciji .......................................... 68 12. OPTIMIZACIJA – podešavanja u HTML kodu .......................................... 70 13. SITEMAP – mapa sajta ........................................................................... 72 14. RESPONSE DIZAJN – prilagodljivost ekranima ........................................ 73 15. JavaScript i Jquery – osnove .................................................................. 75
3
KURS WEB DIZAJNA
1. UVOD Web dizajn predstavlja spoj vizuelne kreativnosti i poznavanje određenih informatičkih tehnologija koje omogućavaju da se Vaše dizajnerske ideje pretoče u nešto što se zove internet prezentacija. Danas u savremenom poslovanju ne može se ni zamisliti da postoji firma koja nastupa ozbiljno na tržistu a da ne nema svoju internet prezentaciju ... naravno, pod tim ne podrazumevam vizuelno rešenje kao takvo, to je stvar ukusa ali postojanje prezentacije firme na globalnoj mreži danas je standard i može mnogo da govori o smoj firmi. Kao prvo efektan web dizajn odaje utisak da firma dosta ulaže u svoj marketing i time daje ozbiljnosti na tržištu a drugo, kvalitetna prezentacija omogućava da veoma lako dođete do potrebnih informacija vezano za samu firmu, njene proizvode itd. Kažu psiholozi „da je potrebno samo 3 sekunde da se stvori utisak (pozitivan ili negativan) o nečemu posle vizuelne percepcije“ što znači da web dizajner mora da kreira web prezentaciju koja će posetioca svojim izgledom zadržati, privući mu pažnju ali sa druge omogućiti mu da brzo i jasno dobije traženu informaciju. Posao web dizajnera nije lak mada mnogi misle da se „lepljenje neki sličica“ i sklapanje boja ali nisu svesni da Vi kreirate nešto što treba da se svidi velikoj većini a kao prvo osobi ili firmi kojoj dizajnirate prezentaciju. Wed dizajn nije posao koji ima definisan proizvod nego kreiranje neke ideje koja treba da bude skladna, efektna i praktična. Zato je ovaj kurs i namenjen polaznicima koji žele prvenstveno da prave originalne sajtove, bez preteranog korišćenja šablona, da svoje kreativne ideje pretoče u jezik koji serveri „razumeju“. Kurs omogućava da se kreira jedan statičan sajt od 5 strana koji će sadržati veliku većinu elemenata koji su danas prisutni u web prezentacijama. Polaznik na početku predavanja može videti ugledni sajt na našem serveru a potom kroz predavanja prati sve faze kreiranja ovo statičkog sajta – od ideje do slanja na server. Učenjem kroz faze kreiranja ovo statičkog sajta polazik dobija znanja koja se tiču same tehnolgije izrade određenih elemenata sajta (konstrukcija, navigacija itd) ... ono što ne može da dobije na kursu jeste potrebna dizajnerska kreativnost za svoje buduće ideje, a to najviše zavisi od polaznikove želje da kreira nešto unikatno. Ali u svakom slučaju, uz potrebna znanja, alatke i tehnologije kreiranja web prezentacija polaznik dobija dovoljno znanja da može samostalno kreirati jednostave web prezentacije sa ciljem da ta svoja znanja stalno nadograđuje učenjem i praćenjem trenutnih pravaca u web dizajnu. Nadam se da će Vam kurs kao i predavanja biti veoma korisna i omogućiti vremenom izgradite neki svoj sopstveni stil rada koji će biti svakako pozitivno primećem na tržištu. Srdačan pozdrav, mr Nikola Besara, dipl. ing. U Beogradu, 08.06.2012.
4
KURS WEB DIZAJNA 1.1. Struktura i organizacija statičkog sajta Kada se sa klijentom dogovorite oko namene sajta, njegovih želja oko vizuelnog rešenja sa tim informacijama možete definisati organizaciono Vaš sajt. Ta organizacija sajta, odnosno “arthitektura sajta” ne treba mnogo da zanima onome kome radite sajt, ali Vama kao dizajneru omogućava lako snalaženje gde se sta nalazi od fajlova i naravno kasnije kod ažuriranja odnosno menjanja sadržaja po zahtevu klijenta. Pošto se ovde na kursu radi statički sajt (prethodnp poglavlja opisuje šta je statički sajt) onda je najbolje kreirati strukturu koja će se bazirati na fajlovima i fodlerima u koje će smeštati tematske fajlove. Statički sajt je sastavljen od nekoliko HTLM fajlova1 koje predstavljau tematske stranice sa svojim sadržajem po pitanju teksta, slike, videa i sl. Komplet cela konstrukcija sajta nalaziće se u folderu “TEKOMS – Kurs web dizajna” Naš budući sajt koji će obrađivati nam kursu imaće 5 statičnih HTML strana naziva: –
index – to je početna strana dobro došlice na sajt, sa uvodnim napomenama o samoj firmi, uslugama, proizvodima itd. Veoma je važno napomenuti da ova strana mota da ima naziv Index bez obzira što je početna pa je polazniku logičnije da je nazove Home ili Pocetna. Razlog tome je da bi serveri videli ovu stranu kao početnu (Index page) i da se od nje dalje razvijaju linkovi ka drugim stranama.
–
O nama
–
Usluge
–
Galerija
–
Kontakt
Pored toga postojaće i folderi koji će imati nazive prema vrsti sadržaja: Images – tu se smeštaju sve slike koje idu na sajt, Galerija – tu se smeštaju sve slike koje idu u galeriju slika, Css – tu se smeštaju fajlovi koji definišu stilove koji će se pojavljivati na sajtu2 Ostalo – tu se smeštaju izvorni fajlovi u kojima ste obrađivali slike, na primer u Photoshop‐u ili nekom drugom programu. Parametri – tu se smeštaju podaci vezano za domen i hosting (user name, password‐i, parametrije konekcije3). To se može upisati u običan Notepad fajl samo kao informacija.
1
U sledećem poglavlju biće opisano šta je HTML U narednim pogalvljima biće opisano šta su stilovi 3 U narednim pogalvljima biće opisano šta su parametri konekcije kao i kreiranje same konekcije 2
5
KURS WEB DIZAJNA Suština konstrukcije web sajta jeste da posetilac sajta “vidi” na ekranu samo statičke strane na kojima se sadržaj sajta. Preko linkova koji mogu biti tekstualni i grafički kreće se po stranicama. Sadržaj sajta predstavlja tekst u samoj strani, slike koje se “vuku” iz foldera “images” ili “galerija”, stilovi koji se “vuku” iz foldera “css” ... Kako to funkcioniše može se prikazati u ovom grafičkom 3D prikazu šta vidi posetilac sajta i šta se nalazi sa “druge strane” gde se vidi Vaša organizacija sajta.
LINKOVI – predstavljaju veze između stranica i mogu se javljati između strana ili čak unutar samih strana. Dobro organizacijom Vašeg sajta omogućavate lako kontrolisanje i snalaženje gde ide koja slika, brzo ažuriranje sajta po pitanju promene slika, stilova … kontrola da li svi linkovi rade (da nema tzv. “slepih linkova”). Cilj dobre organizacije i strukture sajta se najbolje vidi kada biste imali sajt koji ima veliki broj stranica gde bi imali veliki broj linkova između njih, ubačenih slika itd.
6
KURS WEB DIZAJNA
2. POČETAK ‐ PRVA WEB STRANA 2.1. HTML ‐ Uvod, struktura jedne web stranice Pre kretanja u dizajniranje web prezentacije potrebno je polazniku pojasniti šta je u stvari HTML kod. HTML nije programski jezik u onom smislu u kom su to C++ ili Visual Basic, jer ne sadrži komande, tipove podataka, operatore, promenljive i slične stvari. HTML je više jezik za opis Internet dokumenata. Pomoću njega možete menjati boju i veličinu teksta, boju pozadine, umetnuti sliku i zvuk na Internet stranicu, ali ne možete izračunati koliko je 2+2. U svojoj suštini HTML dokumenat je običan tekstualni dokumenat sa ekstenzijom .html, tako da se može kreirati i u bilo kom od tekst editora, kao što su Notepad, WordPad Iako je izrada HTML stranica vrlo jednostavna, postoje pravila koja morate znati i poštovati ih pri izradi HTML (HyperText Markup Language) je jezik kojim vi “pišete” kod koji se izvršava na serverima. Drugim rečima, upisivanjem određenih kodova, i slanjem na server, Vaša prezentacija usled prisutnosti HTML koda daje stranici određen dizajn. Pod tim se podrazumeva da je tekst u određenom formatu, da postoji određena tabela, da se u određenom stranice prezentacije pojavljuje slika, video … HTML kod koji tko napisan i poslat na server, omogućava da “server” ume da prevede taj kod i kao rezultat Vi imate na ekranu kreiarnu web stranu. Drugim rečima, HTML je jezik koji serveru “razumeju”. Osnovna struktura jedne HTML strane izgleda ovako: Početak koda Ovo je zaglavlje sa naslovom (tu se smeštaju link ka TEKOMS d.o.o. stilovima, ključne reči, izvršne skripte i sl). Ovo je body. To je centralni deo sajta gde se smešta sve od sadržaja (text, slike, video , galerija …) Kraj koda Suština web dizajna jeste predstavljanje određenih elemenata na sajtu jezikom koji serveri “razumeju” odnosno kroz pisanjem HTML koda u određenoj formi kako kod zahteva vaše ideje postaju vidljive.
7
KURS WEB DIZAJNA U gornjem delu HTML koda potrebno je da imate izraz (ovo je za HTML5) : … Svi HTML dokumenti bi trebalo da počinju sa definicijom tipa dokumenta koji pregledaču definiše po kom standardu je dokument pisan. Ovaj kod govori pregledaču da je dokument pisan HTML5 standardu. Otvaranjem BLANKO fajla u DW ova definicija se automatski ispisuje iznad HEAD‐era. 2.2. Title, keywords, description, favicon Ključne reči su veoma važne da postoje u vašem HTML kodu. Sa druge strane i u samom tekstu je potrebno da se pojavljuju te reči sa svojim varijacijama ali o tome će biti kasnije objašnjeno kod poglavlja optimizacija. Ubacivanje tih elemenata radi se vrlo jednostavno. Uđite u SOURCE CODE VIEW: Posle svega vaš HTML kod u HEAD sekciji bi trebalo da izgleda ovako: Početna Neka Vam uvek bude ovaj red prisutan gde je reč “Charset=utf‐8” … time definišete da se na vašoj strani pojavljuju naša pisma odnosno da serveri preporznaju č,š,ć,đ,ž …
8
KURS WEB DIZAJNA 2.3. DivTag‐ovi – konstrukcija web strane DIV Tag‐ovi (u daljem tekstu DT) predstavljaju glavne elemente (polja) u kojima se nalazi sadržaj sajta. Prevedeno TAG‐ovi predstavljaju “značke” koji bi služile da se određeni pretraživači “zakače” na njih i kao rezultat pretrage daju tražene strane. Komplet sajt će biti urađen preko DT‐a koji imaju tačno svoju formu u kojoj trebaju da budu zapisani u HTML kodu. Da bi se kreirali DT potrebno je tačno definisati konstrukciju web stranice odnosno tačno odrediti polja i njihov raspored na strani. Svaki DT ima svoju klasu odnosno klasifikaciju koja obično opisuje sadržaj polja – klasa Header, klasa navigacija itd. Grafik u nastvavku prikazuje raspored DT (polja) sa svojim nazivima na primeru prve strane (index.html) što je u stavri – OSNOVA KONSTRUKCIJA WEB STRANA. Naravno, ostale stranice ne moraju da imaju isti raspored polja, ali je preporuka da se neka polja po sličnim karakteristikama ponavlaju – na primer Header (gde je logo firme) ili polje gde je navigacija … 2.4. Osnovni parametri DIV TAG‐a Svaki DT kad se kreira ima neke osnove parametre koji definiše svoj oblik. Neki osnovni parametri koje bi trebalo da ima su: Width – širina u pixelima ili procentima (200px ili na primer 50%), Height – visinu u pixelima ili definisano ka AUTO. Ako se visina ne definiše kako se unosi tekst visina DT se povećava. Border (bordura) – koja definiše ivičnu liniju. Kroz stilove bordura može biti određena boja, debljina linije i vrsta linije.
Margin – margina u pixelima ili procentima – udaljenje DT od drugih elemenata Padding – unutrašnja margina u pixelima ili procentima Pored toga, DT može imati i još neke dodatne paramtre: background color, radius itd …
9
KURS WEB DIZAJNA
LAYOUT OSNOVE STRANE – RASPORED DIV TAGOVA
Za potrebe ovo kursa koristićemo pixele jer nam je cilj da se polaznik upozna sa principima
10
KURS WEB DIZAJNA kriranja DT‐a. Idemo redom da kreiramokonstruciju. Otvorite index.html klikom DESNI TASTER MIŠA > OPEN WITH … (ukoliko samo kliknete na fajl index.html Levim Tasterom Miša otvoriće se Vaš pregledač gde vidite web prezentaciju). DIVTag ‐ ovi se ubacuju između BODY u kodu pa za te potrebe malo razdvojite te reči (klikom na ENTER): OVDE SE UBACUJU DIV TAGOVI koje kasnije uređujemo !!! DIVTag je ubačen (u njega je upisana rečenica Content for id "body" Goes Here gde ćemo da dalje ubacujemo sdržaj u ovaj DivTag).
12
KURS WEB DIZAJNA 2.7. Formatiranje uz pomoć CSS‐a (definisanje klasa) Uvođenjem KLASA, vi određene DivTag‐ove definišete da imaju svoj ID ili svoju klasu (CLASS). Sama KLASA je opet određena svojim stilom po pitanju širine, boje i sl ... faktički, sve je isto po pitanju stilizovanja i načina stilizovanja, ali je samo organizaciono lakše jer obuhvata mnogo više Div Tag‐ova koji imaju različite nazive. Šta je cilj KLASA ? Kao prvo želimo da određeni DIV TAG formatiramo definisanjem stila i davanjem u oznake KLASE, taj DIV TAG ima svoje parametre u stilu ali i KLASU. Ubacivanjem sledećeg DIV TAG‐a pozicioniranjem i davanjem iste KLASE, novoubačeni DIV TAG dobija potpuno iste stilske karateristike kao i prethodni – jer su iste klase. Time se definiše da elementi na sajtu koju su po svom izgledu različiti, ali bi trebalo da imaju neke iste stilske elemente, postanu vizuelno isti. Naravno, menjanjem parametara u stilizovanju svake KLASE, promene se automatski manifestuju u svim elementima koji imaju tu klasu. Kako se kreiraju KLASE (klasifikacija DIV TAG‐ova ? ‐ Otvorite CSS fajl „stilovi.css“ ‐ Unesite sledeće: .glavni_div_tag { width: 900px; margin: auto; overflow: auto; background‐color: #FFF; border‐radius: 5px; opacity: 0.9; margin‐top: 10px; margin‐bottom: 10px; }
13
KURS WEB DIZAJNA Otvoriti novi CSS fajl, snimiti pod nazivom “stilovi.css” i uneti sledeći kod CSS kod : /* Osnova */ body { background‐image: url(../images/bg.jpg); background‐attachment: fixed; background‐position: center bottom; background‐size: cover; margin: 0; padding: 0; font‐family: Verdana, Geneva, sans‐serif; font‐size: 12px; color: #333333; } /* Konstrukcija */ .glavni_div_tag { width: 900px; margin: auto; overflow: auto; background‐color: #FFF; border‐radius: 5px; opacity: 0.9; margin‐top: 10px; margin‐bottom: 10px; } .header { padding: 10px 10px 10px 10px; height: 150px; background‐color: #FFF; } .navigacija { margin‐bottom: 10px; height: 48px; width: 900px; } .content { width: 530px; float: left; padding: 0px 10px 10px 10px; margin‐bottom: 10px; } .novosti { width: 300px;
14
KURS WEB DIZAJNA float: left; margin‐left: 10px; padding: 0px 10px 0px 10px; background‐color: #E9E9E9; box‐shadow: 1px 1px 1px 1px #999; margin‐top: 5px; } .footer { float: left; width: 865px; padding: 15px 0px 10px 15px; background‐color: #E9E9E9; border‐radius: 7px; margin‐bottom: 10px; margin‐left: 10px; height: auto; } .kolona { width: 265px; float: left; margin‐right: 10px; height: 200px; padding‐right: 10px; } /* Konstrukcija */ /* Linkovi */ a:link { text‐decoration: none; color: #1479D3; } a:visited { text‐decoration: none; color: #1479D3; } a:hover { text‐decoration: none; color: #F00; } a:active { text‐decoration: none; color: #1479D3; } /* Linkovi */ /* Headings */
15
KURS WEB DIZAJNA h1 { font‐size: 18px; color: #FFFFFF; text‐shadow: 1px 1px #000; font‐family: Calibri; text‐align:justify; background‐color: #1479D3; padding: 7px 7px 7px 15px; } h2 { font‐size: 18px; color: #1479D3; text‐shadow: 1px 1px solid #FFF; font‐family: Calibri; text‐align:justify; } h3 { font‐size: 16px; color: #FFF; } h4 { font‐size: 10px; color: #C60; } h5 { font‐size: 9px; color: #C60; } h6 { font‐size: 8px; color: #C60; } /* Headings */ Ovim koracima ste uz pomoć stilova podešavali izgled fonta, veličina fonta, boja, pozadinska slika, boja linka i sl. Dalje preko stilova definsati LAYOUT odnosno raspored ostalih DIV TAG‐ova da preko parametara – width, height, margin, padding itd ... kreirate osnovnu konstrukciju Vaše web strane.
16
KURS WEB DIZAJNA Naslov stila Background‐ attachment Backgroun‐position Background‐size border Border_radius Box‐shadow
Font_weight Left Right Top Bottom Margin Padding Heigh Width Position Text‐shadow Border Background Cursor Clear
overflow‐x overflow overflow
Forma upisana u polje Fixed
Rezultat Pozadinska slika je fiksirana, pri skrolovanju niz stranicu samo se skroluje centralni deo sajta Top center Položaj pozadinske slike Cover Pozadinska slika se prilagođava ekranu 1px solid #333 Bordura debljine 1 px, obična linija, sive boje 7px Radijus zaobljenja za Div Tag box‐shadow: 2px 1px 5px 7px Senka oko divtaga, pomerena za 2 i #0C0; 1 pixel, blurovana 5 px, širine 7px, boje #0C0 Bolder Font je malo jače debljine 10px Div Tag je uz levu ivicu ekrana na 10 px 10px Div Tag je uz desnu ivicu ekrana na 10 px 10px Div Tag je uz gornju ivicu ekrana na 10 px 10px Div Tag je uz donju ivicu ekrana na 10 px 10px 5px 8px 10px Top ‐ desno ‐ dole ‐ levo 10px 5px 8px 10px Top ‐ desno ‐ dole ‐ levo 100px Visina DivTag‐a 50px Širina DivTag‐a Fixed Određeni Div Tag je fiksiran 1px 1px #999 Senka na tekstu određene boje None Ovo su podešavanja za ubačeno None dugme button u Formular ime izgled kao obličan link Pointer Both To se kreira poseban DIV Tag naziva na primer, „Clear“ koji upisivanjem stila Both prekida FLOAT opciju (uravnjava dva DIV TAG koji imaju opciju Float: Left i Float: Right. hidden Ukoliko glavni DIVTAG „izlazi“ iz ekrana ta razlika se skriva scroll Pojavljuje se SKROL BAR sa strane tog DIV TAG‐a auto Omogućava da se DIV TAG produžava automatski po vertikali. Obično se koristi da glavni DIV TAG ima taj stil.
17
KURS WEB DIZAJNA 2.8. Kreiranje Header‐a ‐ ubacivanje slike Kreiranje header za potrebe ovog kursa u kratkim crtama pojasniće jednostavno ubacivanje slike koju smo prethodno kreirali u Photoshopu. Polaznik ne mora Header sliku da obradi u Photoshopu, za tako nešto se može koristiti neki drugi program za obradu slike. Ono što je važno da izlazi proizvod bude slika (Image), određenih dimenzija u pixelima, optimizovan i exportovan u JPG. Za potrebe kursa ubacićemo sliku koja se već nalazi u folderu Images (gde s inače sve slike koje se ubacuju u naš sajt). Pretohodno bi trebalo napraviti dodatni folder naziva PSD gde ćemo smeštati originalne fajlove u kojim smo kreirali slike i iz kojih smo export‐ovali u JPG. Dimenzije slike koja se ubacuje u header je 880 x 150. Slika se ubacuje veoma jednostavno u Header.
Ukoliko otvorite SOURCE VIEW vidite da je u DivTag Header upisan HTML kod oblika: … slika je ubačena u Header (oko slike je bela bordura nastala bojenjem pozadine)
18
KURS WEB DIZAJNA 2.8.1. Link u delu slike – HOT SPOT (Dreamweaver) U prethodnom poglavlju opisalo smo kako se može linkvati cela slika koja je u tom slučaju bila slika dugmeta za preuzimanje nekog PDF dokumenta. Međutim, ponekad vi možete da linkujete određeni deo slike, na primer nekog banera, gde se u donjem delu nalazi dugme download, i samo taj deo da bude LINK. Odnosno prelaskom miša preko banera ikonica je i dalje strela, dok prelaskom preko određenog dela, ikonica miša postaje ručica i naravno klikom na to mesto link Vas vodi do tražene strane. To mesto se zove HOT SPOT i pojavljuje se ukoliko kliknete na neku sliku, u PAGE PROPERTIES se pojavljuju tri ikonice HOT SPOT‐a. Da bi ste videli primenu ovih tačaka, za potrebe skripte, ubacićemo u folder “Images” sličicu banera (dimnezija 300 x 75) pixela koji je već pripremljen i sastavni deo je Dodatnog materijala za kursa. Sličica je u JPG formatu i preko ranije opisanij koraka ubaite je ispod dugmeta DOWNLOAD (dođite mišem na kraj slike DOWNLAOD i kliknite ENTER da idete red ispod INSERT > IMAGE > (selektujte sliku “baner.jpg” > OK). Ukoliko ste uradili kako treba to bi trebalo da izgleda ovako Kliknite mišem na ikonicu HOT SPOT i to na drugu ikonicu koja ima oblik kružnice a potom razvucite kružnicu preko zelenog kruga sa strlicom. Pustite miša. Kreirali ste HOT SPOT ZONU odnosno zeleni providni krug koji se može mišem selektovati i pomerati detaljnije da se nacentrira odprilke na sredinu. Ukoliko ste to zeleno polje selektovali u PAGE PROPERTIES u odeljku LINK klikom na ikonicu FOLDERA (uključujete Browser) da možete pretražiti fajlove gde će ovaj link biti usmeren. Link može biti usmeren i na neku spoljnu adresu na primer www.tekoms.co.rs
Ubacivanjem HOTSPOT‐a u određeni deo banera i u samom kodu se ubacio određen HTML kod. Ukoliko odete u SOURCE VIEW u delu gde DIV TAG NOVOSTI, možete na kraju TAG‐a video formu koja definiše ubečn HOTSPOT – odnosno oblik (area shape=circle), položaj tačke (vama ove koridnate nisu bitne jer selekujete direkno mišem) … HOT SPOT možete linkovati upisivanje u formu href=”#” – umesto tarabice upišite href=”www.tekoms.co.rs”
19
KURS WEB DIZAJNA
3. NAVIGACIJA – horizontalna i vertikalna 3.1. Ubacivanje horizontalne navigacije Navigacije predstavlja važan deo svake prezentacije jer omogućava lako kretanje kroz prezenetaicju I brzog dolaska do željene strane. Preporuka je da navigacija bude što jednostavnija bez mnogo podmenija. Za potrebe kursa uradićmo jednostavnu navigaciju da bi polaznik shvatio samu strukturu HTML koda I stilova u CSS‐u. Navigacija u HTML kod se ubacuje u div tag “Navigacija” I za početak ukucati sledeći HTML kod: Home Usluge Usluga 1 Usluga 2 Usluga 3 Proizvod Proizvod 1 Proizvod 2 Proizvod 3 Kontakt Lokacija Kontakt podaci
20
KURS WEB DIZAJNA U sledećem koraku, otvoriti novi CSS fajl, nazvati ga prepoznatljivog naziva “css_navigation.css” (taj fajl može da se nalazi u fodleru gde su ostali stilovi odnosno CSS fajlovi). U blanko CSS fajl ukucati stilove (pored stilova dati su komentari koji pojašnjavaju šta koji stil stilizuje). Na kraju, u HEAD sekciju ubacite link koji linkuje Vašu HTML stranicu sa fajlom sa stilovima. Kreirali ste jednostavnu horizontalnu navigaciju , koja ima jedan podmeni. Kroz stilove se dalje navigacija uređuje – boja, font itd …
21
KURS WEB DIZAJNA
4. CONTENT – glavni sadržaj web strane Glavna sadržaj sajta odno centralni Div Tag gde se obično nalalazi i najviše texta i slika mi smo u našoj konstrukciji i rasporedu Div Tag‐ova i nazvali CONTENT (Sadržaj). Za početak unesimo text koji će ići na prvo strani odnosno to je obično neki tekst dobro došlice i ukratko o samoj firmi i njenoj delatnosti. Kao dizajner ali i kasnije optimizator webjsajta gledajte da sam tekst koji se ovde nalazi u sebi sadrži što više kljulnih reči koje su karakteristične za firmu ili osobu kojoj se radi web dizajn. Takođe, preporuka je da se naslovi određenih poglavlja sadrže ključne reči. Za početak unesimo u ovaj Div Tag tekst:
Dobro došli … RAČUNOVODSTVENE USLUGE – KURSEVI RAČUNOVODSTVA Osnovna delatnost firme TEKOMS d.o.o. jeste pružanje i obuka za računovodstvene usluge. Pored toga, kao dodatna delatnost je i pružanje usluga konsaltinga, odnosno davanje saveta klijentima. ... Detaljnije GRAFIČKI, WEB I LOGO DIZAJN TEKOMS uvek može Vašu firmu predstaviti vizuelno kroz razne marketinške materijale ‐ prospekte, brošure, promo materijal, dizajn logo‐a, izradu i održavanje web sajta i sl. Svaka ideja može se staviti na papir, čime se stvara prepoznatljiv identitet firme. Izrada Web prezentacije predstavlja posebnu oblast gde se izgled sajta u potpunosti prilagođava sferi poslovanja ... Detaljnije PREVOĐENJE TEKSTOVA Prevodi brzo, kvalitetno i povoljno, fizičkim i pravnim licima, U pisanoj ili elektronskoj formi, identični originalu (slike, tabele, grafikoni, katalozi sl.), Kompletna kompjuterska i grafička obrada teksta, skeniranje slika, štampanje do A4 formata … Detaljnije Unesite ovaj tekst u približnoj formi kao štoje ovde tako ćete mišem kliknuti unutar Div Tag‐ a CONTENT, a potom krenuti u ukucavanje teksta.
22
KURS WEB DIZAJNA Poglavlja imaju diskretnu senku, font Calibri i imaju poravnjanja. Kada klikate na određeni deo teksta u PAGE PROPERTIES se pokazuje karateristike dela teksta – obično su naslovi HEADINGS 1 ili 2, dok je sam tekst Paragraph. Selektujte NASLOV koji ima značaj HEADINGS 1 i u ADD TO PROPERTIES ubacite efekat senke u tekstu i to u formi: text‐shadow: 1px 1px #999 Vaš veb sajt polako dobija i vizuelnu dimenziju ... Pogledajte u SOURCE CODE izgled HTML koda u odeljku gde je tekst.
23
KURS WEB DIZAJNA 4.2. Primeri formiranja teksta u HTML‐u
Heading 1 ‐ poglavlje 1 Heading 2 ‐ podpoglavlje 2 Heading 3 Heading 4 Heading 5 Heading 6 Ovde ide tekst u okviru pasusa Tekst u kurzivu Boldovan tekst Tekst 1 prekid teksta 1 Font u plusu Font u minusu A Subscript m Superscript Font u obliku koda za opise kurseva progframiranja Ovde ide neki tekst citata Precrtan tekst Tekst kao varijabla 24
KURS WEB DIZAJNA Tekst kao kod Tekst kao definicija ‐ u kurzivu Proizvod 1 Proizvod 2 Proizvod 3 Proizvod 1 Proizvod 2 Proizvod 3 List Item Termini definicija Definicija 1 Definicija 2 Definicija 3
25
KURS WEB DIZAJNA 4.3. Ubacivanje linka u tekst – običan link, email link, link ka fajlu Ranije smo god navigacije govorili da se pojavljuju oznake „#“ koje označavaku link ali koji „ne vodi“ nigde. Međutim, ubacivajnem umesto tog znaka naziv fajla sa ekstenzijom .html i gledanjem te strane u pregledaču, prelaskom miša preko te reči, pojavljuje se ikonica ručice kao oznaka da je to link čijim klikom se ide na određenu stranicu. Po sličnom principu, se kreira link i u običnom tekstu čak i kada je neki drugi element na sajtu, kao što je na primer ubačena slika u tekst. Prevodi brzo, kvalitetno i povoljno, fizičkim i pravnim licima, U pisanoj ili elektronskoj formi, identični originalu (slike, tabele, grafikoni, katalozi sl.), Kompletna kompjuterska i grafička obrada teksta, skeniranje slika, štampanje do A4 formata … Detaljnije Bilo koji selektvani deo teksta može se linkovati. Kliknite u SOURCE CODE da vidite kako je to konvertovano u HTML kod. Na kraju paragrafa HTML kod prikazuje da je selektovana reč „Detaljnije“ link koji ima svoju definisanu formu: Detaljnije EMAIL LINK NA SAJTU –
[email protected] ... ima formu u HTML kodu ...
[email protected] Link ka određenom fajlu – Excel fajlu, Word dokumentu itd ... Preuzmite skriptu u PDF formatu.
26
KURS WEB DIZAJNA 4.4. Ubacivanje slike u tekst Slika se veoma lako ubacuje u sam tekst i radi se po istom principu kao što smo ubacivali sliku Header‐a. Prethodno je potebno kreirati odnosno obraditi slike u određenom programu za obradu slike (Photoshop, Picasa i sl) a potom slike „isečene“ na određenu dimenziju ubaciti u folder Images pod nazivom na primer Images1, Images2 ... i kako je Vama najlakše da bi ih kasnije lakše prepoznali kod ubacivanja. Kao prvo dođite mišem do mesta odprilike gde bi trebalo da se ubaci slika, na primer ispred naslova:
׀RAČUNOVODSTVENE USLUGE – KURSEVI RAČUNOVODSTVA ... a potom unesite kod koji ubacuje sliku iz foldera images, određenih dimenzija i ide uz levu marginu ... Osnovna delatnost firme TEKOMS d.o.o. ... Slika je ubačena. Slika je raspoređena uz LEVU marginu, tako da se tekst rasporedio oko slike sa desne strane. Međutim, ono što prvo primećujemo jeste da je tekst suviše približen samoj slici to nije baš vizuelno elegantno. Potrebno je da se tekst raporedi oko slike ali da ima određeno udaljnje od same slike. To se lako podesi uvođenjem pojma CLASS (klasa). U HTML gde je ubačena slika iz određenoh foldera na kraju koda dodaje klasu ... odnosno
27
KURS WEB DIZAJNA . ... selektovana slika je dobila stilske karakteristike te klase odnoso tekst je udaljen od slike za veličinu margine i oko slike je tanka tačkasta bordura sive boje. Prema ranije opisanoj proceduri, ubacite još jednu sliku kod drugog pasusa i dajte ubačenoj slici istu klasu slika. Kao rezultat dobićete dve ubačene slike, koje imaju potpuno iste stilske parametre. Veličinu slike možete menjati pomeranjem miša ili klikom na samu sliku i upisivanjem u polja dimenzija slike u pixelima.
28
KURS WEB DIZAJNA 4.5. Tabele – rad sa tabelama (Dreamweaver) Tabela se jednostavno ubacuje u bilo koji DIVTag i dalje se mišem koji selektuje ćelije i samu rešetku modifikuje po pitanju širine, broja ćelija i sl ... Za potrebe kursa ubacićemo jednu jednostavnu tabelu u koju ćemo ubaciti cenovnik nekih usluga. Tabela bi trebalo da izgleda ovako: Kurs Broj časova Cena (u eurima) Kurs računovodstva 72 200 Kurs AutoCAD 2D 20 120 Kurs AutoCAD 3D 20 140 ... tabelu ćemo ubaciti ispod pasusa Prevođenje tekstova (dođite mišem iza reči Detaljnije >>> i klinite ENTER tako da se BILNKER pojavi u redu ispod). INSERT > TABLE > (podesi parametre kao na slici, Border thickness stavite neku vrednost (na primer, 1) ...) > OK Tabela je ubačena i potrebno joj je dati paramtera širine ili mišem razvući (upisati u polje W: 520)
Preporuka je da se tabeli daje određeni novi stil i možda nova klasa koja će Važiti za sve buduće tabele da imaju istu formu. U CSS fajlu unesite klasu za tabelu .tabela { font‐family: Verdana, Geneva, sans‐serif; font‐size: 12px; border: 2px solid #666; } Ubačena se dalje može dodatno urediti i stilozovati direktnim selektovanjem određenih eleenata – ćelije, header i sl ... ‐ Selektujte prvi red mišem (u PAGE PROPERTIES je čekirana opcija Header) > klikom na polje BG odberite boju HEADER Zaglavlja), ‐ Popunite tabelu ranije upisanim sadržajem. ‐ Selektujte sgve ćelije i u PAGE PROPERTIES se pojavljuju opcije da dodatno modifikujete ćelije – položaj teksta, definisanje linkova itd ...
29
KURS WEB DIZAJNA
Vaša tabela:
Tabela dimenzija 4 x 3 kao HTML kod ... Kurs Trajanje Cena Kurs računovodstva 72 200 Kurs AutoCAD 2013 2D 20 120 Kurs AutoCAd3D 20 120
30
KURS WEB DIZAJNA 4.6. Tekst u kolonama (columns) Jedan od načina da se formatira tekst jeste da se ubaci u kolone gde preko stilova podešavate – broj kolona (coloumns) i razmak između kolona (gap). Na početku se kreira DIV TAG određene klase a potom se fajlu gde su stilovi unese forma za kolone: .kolone { ‐webkit‐column‐count: 3; /* Chrome, Safari, Opera */ ‐moz‐column‐count: 3; /* Firefox */ column‐count: 3; ‐webkit‐column‐gap: 40px; /* Chrome, Safari, Opera */ ‐moz‐column‐gap: 40px; /* Firefox */ column‐gap: 40px; } U HTML kodu kreirajte DIV TAG klase „kolone“ i unesite tekst u standarnoj formi. Paragrafi , headinzi itd ...
U DIV TAG klase „kolone“ je ubačen tekst koji se implementira u 3 (tri) kolone međurastojanja između kolona od 40 px.
31
KURS WEB DIZAJNA
5. GALERIJA SLIKA 5.1. Kreiranje Galerije slika Galerija slika danas predstavlja standarni sadržaj svakog ozbiljnijeg sajta i ovde na kursu pokazaće se izrada odnosno implementacija jedne postojeće skripte u naš HTML kod. Do sada smo na krusu kreirali sa svim potebnim elementima jednu HTML stranu koja je početna (index.html), i u navigaciji smo reč Galerija linkovali ka strani galerija.html. Galerija koju ćemo kreirati na ovom kursu u stvari je skripta sa svojim stilovim koja će sličice određenih dimenzija povećavati preko celog ekrana klikom mišem ... takođe postoji opcija listanja slika (mišem ili preko strelica) .. animacija koja ide uz galeriju veoma elegantno otvara manje sličice, kod se lako implementira u HTML i lako se slike menjaju. Kreiranje Galerije slika kreće kreiranjem nove HTML stanice: 1) Kreiranje galerije.html Za početak potrebno je kreirati nov stranicu koju ćemo nazvati galerija i koja je faktički ista kao i strana index.html samo što je sam sadržaj strane drugačiji. U tom cilju prekopiraćemo stranu index.html i dati joj ime galerija.html (otvarite tu stranu i obrišite sve što je DIV Tagu CONTENT). Naša galerija će biti ubačena u taj DIV Tag ... 2. Ubacivanje galerije sa svojim elementima Galerija se sastoji iz jednog fajla gde je sam HTML kod sa skriptom galerija.html, i dva foldera GALERIJA i SCRIPT_GALERIJA. U folderu GALERIJA nalaziće se slike koje idu u galeriju i preporuka je da slike budu dimenzija 800 x 600 pixela veće i manje oko 170 x 120 (naravno to je parametar koji se lako podesi i kasnije lako promeni) ... da imaju nazive brojeva 1,2,3, ... format slike JPG, PNG, GIF. FOLDERE GALERIJA I GALERIJA_SKRIPTA prekopirati u folder gde je sajt TEKOMS – Kurs web dizajna. Otvorite fajl galerija.html i selektujte deo koji počinje od reči SKRIPTA do SKRIPTA i kliknite COPY ...
Otvorite novokopiranu stranicu galerija.html (obristi sadržaj DIV Tag‐a CONTENT) i selektovani deo prekopirati u HEAD SEKCIJI:
32
KURS WEB DIZAJNA
Ponovo uđite u prvu galeriju.html i selektujte DIV Tag koji definiše odakle se „vuku“ slike ... odnosno sama galerija ... Selektuje od REČI GALERIJA, kopirajte a potom u novokrerani fajl galerija.html PASTE‐ujte i to u DIV TAG Content koji je pretpostavljmo prazan jer se prethodno sadržaj obrisali. NAPOMENA: Pošto se prebacuju kodovi, onda se selektoavi kod ili skripta kopira direktzno u HTML kod ... tako da je potebno da imate SOURCE VIEW gde direktno u kodu ubacujete sadržaj.
Svi elementi su ubačeni ... pogledajte u DESIGN VIEW ... snimite promene i pogledajte sajt u Browser‐i. Prelaskom miša preko slika i klikom na njim slika se povećava, dok pozadina dok traje animacija je diskreno providno crna ... Slike u galeriji se lako listaju ili kursorom ili klikom na strelice ... takođe dolaskom do poslednje slike u galeriji nestaje strelica za napred i mžđe smo da se ide nazad u listanju slika. Klikom na X zatvarate pregled veće slike.
33
KURS WEB DIZAJNA NAPOMENA: Posto smo ranije u navigaciji upisivali linkove ka stranicama ... kreiranjem fajla galerija.html otvaranjem fajla index.html ili galerija.html u Browser‐u, i klikom miša na linkove u navigaciji trebalo bi se krećete sa jedne na drugu stranu. Odnosno to se kaže da su strane index.html i galerija.html ULINKOVANE. Do sada Vaša struktura sajta bi trebalo da izgleda ovako – dve HTML stranice i nekoliko foldera sa svojim tematskim sadržajem – stilovi, images, PSD, download ...
34
KURS WEB DIZAJNA
6. VIDEO 6.1. Ubacivanje YOUTUBE videa na sajt Ubacivanje videa se može uraditi na dva načina koja se se danas najčešće koriste. Kao prvo, video format koji se ubacuje može postavljen na YOUTUBE (najpoznatiji video servis u daljem tekst YT) i u sam HTML kod ubaciti link koji će automatski „vući“ video u određenoj rezoluciji. Pretpostavljamo da znate koji je fajl sa YT‐a (gornjem delu gde je address bar nalazi se jedinstvena adresa video fajla), odnosno odlaskom na tu stranicu, pojavjuje se ekran gde ide fajl.
Kliknite DESNI TASTER MIŠA u ekran > COPY EMBED CODE ... ‐ otvorite fajl galerija.html > uđite u SOURCE CODE VIEW (da direktno u HTML kodu ubacimo kopiran embded kod) ...
... PASTE‐ujte kopiran EMBED CODE. Na tom mestu pojavljuje se emded kod koji ima formu (kod src=“ OVDE IDE ADRESA GDE SE NALAZI VIDEO FAJL“) ...
To je I FRAME odnoso Okvir koji označa polje gde će ubaciti video određenih dimenzija. Kao što se vidi u samom kodu, dimenzije ubačenog ekrana za video je 640 x 360 (što je standarni ekran za YT‐u) ... naš Div Tag gde je ubačen video je mnogo manjim dimenzija pa potrebno jednostavno u samom kodu promeniri dimenzije ekrana ali da zadrže isti odnos stranica ... Umesto width="640" height="360" upišite width="300" height="165" > snimite promene > pregledajte stranicu u Browser‐u. Pojavljuje se mali ekran (dimenzija 300 x 165) izgleda kao sa YT‐a, koji se klikom na PLAY startuje.
35
KURS WEB DIZAJNA 6.2. Konvertovanje iz AVI u MP4 i OGG preko VLC media player‐a Ponekad nije potrebno da se određeni video pozove preko YOUTUBE servisa jednostavnim kopiranjem koda i ubacivanjem u HTML nego je potrebno da se određeni video fajl jednostavno IMPORT‐uje u HTML kod. Takođe je potrebno da u strukturi web sajta u određenom folderu (na primer naziva Video ili Media) imate taj fajl koji se preko sintakse u HTML‐u implementira u stranicu. Najčešći format video fajla jeste AVI format tako je prethodno potrebno da se AVI format konvertuje u MP4 ili OGG format a potom u HTML unese sledeći kod koji poziva taj video fajl gde se unutar taga definiše izvor (gde se nalazi video fajl) i dimenzije playera u kom se video renderuje: Your browser does not support HTML5 video. Ukoliko video fajl nije u MP4 ili OGG formatu potrebno ga je konvertovati preko besplatnog programa VLC media player‐a (koji se jednostavno preuzima sa zvaničnog sajta proizvođača ovog programa). Za početak instalirati i pokrenuti VLC media player a potom kliknuti na MEDIA > CONVERT / SAVE > ... Kliknite na taster ADD i pozovite AVI video koji treba da se konvertuje u drugi format > CONVERT > SAVE U polje PROFILE unesite traženi format (OGG ili MP4) a u odeljak DESTINATION preko tastera Browse definišite gde da se snimi konvertovan video fajl i pod kojim imenom. NAPOMENA: Ime konvertovanog fajla se unosi tako da se upiše ručno ime fajla i vrsta formata na primer: video.ogg ili video.mp4 ! MORATE RUČNO UPISATI FORMAT VIDEO FAJLA (.ogg) ILI (.mp4) ! > START (pokreće se konverzija video fajla iz AVI formata u OGG format) Po istom principi pozvati dodati (ADD) isti video fajl i u polje PROFILE definisati da konvertovani format bude MP4. Naravno, preko Browse tastera definisati ime video fajla koje se takođe unosi ručno – na primer: video.mp4
36
KURS WEB DIZAJNA
7. DODATNI ELEMENTI NA SAJTU 7.1. Google mapa – implemetacija u HTML kod Google mapa je danas sastavni deo svake internet prezentacije, jer predstavlja dinamičku mapu gde možete obeležiti tačno lokaciju , upisati dodatne podatke koje će pojaviti na mapi. Google mapa se ubacuje kao kod i u određeno mesto u HTML kodu. 1) Za početak kreirajmo novu HTML stanicu naziva kontakt.html (prekopirajte index.html i dajte joj novo ime kontakt.html) 2) Otvorite novokreiranu stranicu kontakt.html i u DIV Tag‐u CONTENT unesite kod. var myCenter1=new google.maps.LatLng(44.825102,20.403528); /* pozicija markera 1 */ var myCenter2=new google.maps.LatLng(43.825102,20.403528); /* pozicija markera 2 */ function initialize() { var mapProp = { center:myCenter1, /* marker 1 je u centru */ zoom:7, /* zoom mape */ mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker1=new google.maps.Marker({ /* pozicija markera 1 */ position:myCenter1, }); var marker2=new google.maps.Marker({ /* pozicija markera 2 */ position:myCenter2, }); marker1.setMap(map); /* pozicija markera 1 */ marker2.setMap(map); /* pozicija markera 1 */ } google.maps.event.addDomListener(window, 'load', initialize);
37
KURS WEB DIZAJNA 7.2. Komentari u HTML kodu Komentari u HTML nisu obavezna stavka kod pisanja koda alije preporuka da se pojavljuju jer imaju infrmativnu ulogu da se suvoparnom pisanom HTML kod daju dodatna objašnjenja i najčešće se koriste kad se žele definisati i ograničiti segmenti početka ikraja određene forme – Div Tag, neka skripta i sl … Radi lakšeg snalaženja u veliom broju znakova uz komentare objašnjavate šta je to, gde počinje i gde se završava … time omogućavate lakše snalaženje u samom kodu, ne samo sebi nego i ukoliko i neko drugi učestvuje u kreiranju wen prezenetacije. Komentari imaju svoju tačnu formu kako izgledaju kao pisani deo u HTML‐u upravo da ih serverine ne vide kao neku izvšnu komnadu nego čistu pisanu informaciju. Pojavljuje se malko zagasita rečenica u formi Donja slika prikazuje kako smo u kodu definisali početak i kraj DIV Tag‐a III kolone …
... primenom komentara naš HTML kod postaje mnogo jasniji i pregledniji jer kreiranje sajtova pogotovo web dizajn nije samo stilizovanje Div Tagova i slično ... za web dizajanera je jako važno da kreira i jasan kod u kome može svako može veoma lako da se snađe ! Po sličnom principu možete sve elemente na sajtu da komentarišete – Div Tag‐ove, formulare, ubačene skripte ... (početak i kraj).
38
KURS WEB DIZAJNA 7.3. Elektronski formular Kontakt formular se lako dizajnira definisanjem tagova FORM gde se ubacuju polja za unos teksta (ime, email ...). Formular funkcioniše tako što polja (text field) unete podatke prenose "isporučuju" u fajl "FormToEmail.php" preko komande action="FormToEmail.php" gde je gotova PHP skripta koja procesuira podatke i šalje na uneti email (preko Code Editora otvoriti php fajl I promeniti samo email adresu – NIŠTA NE MENJATI UNUTAR PHP KODA). Komanda required class="form‐control" definiše validator tako da se sva polja moraju popuniti kao i to da email mora biti u formi emaila. Name Email Subject Poruka Pošalji Otvorite fajl „FormToEmail.php“ uz pomoć Code Editora i u redu iza znaka navoda u PHP skripti samo uneti email ili više emailova na koji će stizati poruka iz elektronskog formulara. $my_email = " email‐
[email protected], email‐
[email protected] "; Na kraju PHP skripte nalazi se DIVTAG gde je poruka da je poslat email i ide redirekcija na index.html stranicu posle 2 sekunde (content="2;url=index.html") Postovani, Vas email je poslat ! Redirekcija u toku ...
39
KURS WEB DIZAJNA 7.4. Horizontall Scroller – listanje proizvoda Horizontalni Scroller lista proizvode (slike proizvoda) pozivanjem gotovih Jquery biblioteka čiji se stilovi I javascripte jednostavno linkuju u Head sekciju “index.html” strane – vidite primer u nastavku. Unutar BODY sekcije gde se želi postaviti Scroller unese se DIV TAG sa klasom i Javascripta koja uz pomoć Jqery bibliteke iz Head sekcije kontroliše neke parametre Scrollera – prikaz naslova, trajanje smene artikala, boja I veličina bordure, dimenzija slika u Scrolleru, broj prikaza proizvoda. $(function() { $("#horizontal_scroller").horizontal_scroller({ scroller_title_show: 'enable', scroller_time_interval: '3000', scroller_window_background_color: "none", scroller_window_padding: '10', scroller_border_size: '1', scroller_border_color: '#1278D3', scroller_images_width: '100', scroller_images_height: '140', scroller_title_size: '11', scroller_title_color: 'black', scroller_show_count: '4', directory: 'images' }); });
40
KURS WEB DIZAJNA 7.5. Top Scroll Button Top Scroll Button omogućava da se pozivanjem Jqery biblioteke I javascripte podesi da listanjem stranice se pojavljuje sličica (plavi krug) koji je u stavri link ka vrhu strane ali uz animaciju skrolovanja. Skripta se lako implemenira u HTML tako što se unese na kraj koda (ispred zatvarajućeg taga ) sledeća skripta … jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back‐to‐top').fadeIn(duration); } else { jQuery('.back‐to‐top').fadeOut(duration); } }); jQuery('.back‐to‐top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) });
41
KURS WEB DIZAJNA 7.6. Tekstulani Slider Tekstualni Slider (Carousel) ‐ lista tekstove opet uz pomoć jqery bibliteke i javascripte koja kontroliše neke parametre. Komplet skripta i link koji poziva Jqery bibliteku se ubaci u HEAD sekciju odnosno zaglavlje web stranice ... $(window).load ( function(){$('.carousel1').carouFredSel({auto: true, prev: '.prev1',next: '.next1', width: 200, items: { visible : {min: 1, max: 1 }, height: 'auto', width: 200, }, responsive: true, scroll: 1, mousewheel: false, swipe: {onMouse: true, onTouch: true}}); } ); U određeni deo HTML koda gde se želi ubaciti Tekst slider se ubaci sledeći HTML kod određene klase "carousel_wrapper" gde nalazi lista tagovi listanja … između kojih ide tekst oivičen paragrafom. Lista se može dopunjavati ili postojeća obrisati. TEKSTUALNI SLIDER Kurs Web dizajn jasno i konkretno objašnjava sve potrebne komande polazniku Obuku prati napisana skirpta kao i komplet svi HTML kodovi i skripte Program obuke realizuje web programer sa referencom preko 250 web prezentacija
42
KURS WEB DIZAJNA 7.7. Accordion Slider Accordion Slider je animacija koja opet uz pozivanje jqeury biblioteke I javascripte animirano smenjuje tekst po vertikali. U Head sekciju (zaglavlje web stranice) uneti linkove koji pozivaju Jqery biblioteku i Javascriptu koja kontroliše slider. Nije potrebno nista menjati u samoj skripti. $(document).ready(function(){ $('.acc_container').hide(); $('.acc_trigger:first').addClass('active').next().show(); // Prikaz prvog teksta $('.acc_trigger').click(function(){ // Na klik misem se polja zatvaraju i otvaraju if( $(this).next().is(':hidden') ) { // Sledeće polje se zatvara $('.acc_trigger').removeClass('active').next().slideUp(); $(this).toggleClass('active').next().slideDown(); } return false; }); }); U određeni deo HTML koda gde se želi ubaciti Accordion slider se ubaci sledeći HTML gde je svaki divtag class="acc_container" gde je odeljak sa tekstom (divtag class="block"). ACCORDION SLIDER Prevodilačke usluge Prevodi brzo, kvalitetno i povoljno,fizičkim i pravnim licima. U pisanoj ili elektronskoj formi, identični originalu (slike, tabele, grafikoni, katalozi sl.). Web/Windows aplikacije Za tehničku struku (građevina, mašinstvo...) ‐ razni poračuni (izrada troškovnika, proračun kuhinja), specijalizovani kalkulatori, grafički prikazi, uputstva, simulacije
43
KURS WEB DIZAJNA 7.8. Animacija u HTML Animacija u HTML kodu počinje pojavom HTML5 i omogućava da uz prisustvo CSS 3 načina stilizovanja da se određeni elementi na web strani animirano kreću (Div tagovi, tekst, slike itd). Za potrebe obuke ovde je maksimalno pojednostavljen HTML kod i stilovi sa ciljem da polaznik nauči principe kako se animacija poziva, modifikuje i implementimra u samo HTML kod. Za početak u head sekciju (zaglavlje web strane) uneli link koji poziva fajl sa stilovima koji se nalaziu folderu „css” pod nazivom „animacija.css”. Ukoliko otvorite uz pomoć Code Editora fajl “animacija.css” vide stilovi odnosno klase stilova sa svojim animacijama Slide Up, Slide Down, Fade in … itd … U HTML kod se ubaci određeni Divtag sa određenim sadržajem (Tekst, slika itd) koji se želi animirati i pozivanjem klase (class="pulse") koja se nalazi u css fajlu animacija.css. Animacija te klase se implementira za taj div tag istoimene klase. ANIMACIJA U HTML kodu Tekst se animacijom Tekst se animacijom Struktura CSS fajla sa animacijom je veoma jednostavna i sastoji iz dva dela za svaku animaciju: ‐ klasa sa opisom vrste animacije: ime, trajanje, broj animacija ... ‐ @keyframes klase gde se definiše animacija u frames‐ima odnosno odeljcima kretanja elementa i transformacija za svaki frame. .pulse { animation‐name: pulse; ‐webkit‐animation‐name: pulse; animation‐duration: 1.5s; ‐webkit‐animation‐duration: 1.5s; animation‐iteration‐count: infinite; ‐webkit‐animation‐iteration‐count: infinite; }
44
KURS WEB DIZAJNA @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } 7.9. Animacija slika u HTML Pored animacije teksta takođe uz pomoć stilova u CSS fajlu može se I slike animirano pomerati prelaskom miša preko njih. Za početak u CSS fajlu kreirati klasu “picture” koja će predstavljati klasu slike sa parametrima odnosno … .picture { border: 5px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; ‐webkit‐box‐shadow: 5px 5px 5px #111; box‐shadow: 5px 5px 5px #111; } ... a potom unesti stilove za efekat okretanja slike (TILT) gde se kroz dva stila definiše tranzicija za klasu TILT i transformacvija za klasu TILT: HOVER odnosno šta se dešava sa slikom klase TILT prelkaskom miša.
45
KURS WEB DIZAJNA /*TILT*/ .tilt { ‐webkit‐transition: all 0.5s ease; ‐moz‐transition: all 0.5s ease; ‐o‐transition: all 0.5s ease; ‐ms‐transition: all 0.5s ease; transition: all 0.5s ease; } .tilt:hover { ‐webkit‐transform: rotate(‐10deg); ‐moz‐transform: rotate(‐10deg); ‐o‐transform: rotate(‐10deg); ‐ms‐transform: rotate(‐10deg); transform: rotate(‐10deg); } U pratećem materijalu nalazi se nekoliko već gotovih klasa sa svojim nazivima (zumiranje slike, pomeranje u stranu, rotacija itd) tako da određeni DIVTAG klasfikujete i sadržaj DIV TAG‐a (na primer slika) imaće animaciju i transformaciju određene klase.
46
KURS WEB DIZAJNA
8. SLIDE SHOW 8.1. Kreiranje Div Tag‐a Klase Slide_Show Slide Show je danas standarni element na sajtu gde se smenjuju određene slike, i preporuka da se Slide Show javlja samo na početnoj strani. Na ostalim strana gde se drugi tematski sadržaj nije potrebno da postoji Slide Show, da se ne previše opterećivala strana materijalom koji se može naći na drugoj strani. Za potrebe kursa ubacićemo Slide Show u našu prvu HTML stranu ia za to ćemo korisiti besplatni programčić WOW Slider koji veoma efikasno kreira moderne i elegatne Slide Show animacije i export‐uje u kod koji se lako implementira u HTML. Za početak, postavlja se pitanje gde ćemo ubaciti Slide Show ... preporuka je da se Slide Show ubaci na prvu stranu, i to između Header‐a i Navigacije ... odnosno između tih Div Tag‐ova. 1) kreirati novi Div Tag klase „Slide_show“ između Div Tag‐ova Header i Navigacija. 2) U fajl sa stilovima (stilovi.css) stilizujte tu klasu ... .slide_show { height: 230px; width: 900px; margin‐bottom: 12px; } Ubacivanje dimenzionih parametara za ovaj Div Tag razmak između Header‐a i navigacije se povećao za 230 pixela ... u taj Div Tag ubacićemo skriptu koja se smenjivati 3 slike dimenzija 900 x 230 pixela. Snimite promene i napustite fajl index.html. Ukoliko pregledate uz pomoć Browser‐a, kao promene videćete da postoji razmak između Header‐a i Navigacije.
47
KURS WEB DIZAJNA 8.1. Kreiranje Slide Show animacije WOW Slider je besplatna aplikacija gde u nekoliko klikova podešavate određene vizuelne elemente kako će izgledati vaš Slide Show ... i na ktaju daobijate Export‐ovane fajlove koje dalje implementirate u HTML kod. Za početak potrebno je da imate kreirane 3 slike (bilo kog formata JPG, PNG, GIF ...) dimenzija 900 x 230 pixela (u folderu DODATNI ALATKE ZA KURS imate tri slike dimenzija naziva 1,2,3 u formatu JPG ...) Takođe, potrebno da imate instaliran WOW Slider (u folderu DODATNI ALATKE ZA KURS nalazi se folder WOW SLIDER 2.9 gde se nalazi ikonica „wowslider‐setup“. Klikom na tu ikonicu instalirajte program. Posle instalacije na Desktop‐u se pojavljuje ikonica WOW Slider‐a, kliknite na tu ikonicu ... startujte WOW Slider). 1) Otvara se prozor kao na slici tu ubacujete slike (DRAG&DROP) koje će biti u Slide Show. 2) Sv podešavanja Slide Show se rade preko ikonice SVOJSTVA. 3) U prozoru podešavate parametre i izgled Slide Show‐a – položaj navigacije, opis slika itd > KLIKNITE NA SLIKE.
48
KURS WEB DIZAJNA 4) Tu se podešava izgled GALERIJE u opciji ŠABLON, Veličina slike (upišite 900 x 230), efekat prelaza ... kliknite na OBJAVITI (PUBLISH). 5) Klikom na ikonicu OBJAVITI (PUBLISH) otvara se prozor gde se podešavaju parametri gde će biti exportovane skirpte. Neka bude na Desktop‐u ... kliknite na OBJAVITI. Na vašem Desktop‐ u se pojavljuje jedan fajl index.html i dva foldera – ENGINE i DATA. 6) Foldere ENGINE I DATA prekopirajte u folder gde je web prezentacija 7) Otvorite novokreirani index.html otvorite SOURCE CODE VIEW > selektujte sledeće ... ‐
ovo prebacite u vaš index.html sajta u HEAD sekciju (odmah iznad HEAD)
‐ ovo prebacite u Div Tag Slide Show ...
SLIDE SHOW koji vrti tri slike dimenzija 900 x 230 je ubačen u HTML kod u index.html.
49
KURS WEB DIZAJNA
9. PUBLIKACIJA SAJTA – postavljanje prezentacije na server Da bi se sajt video na globalnoj mreži potrebno je imati dva elementa koja se zakupljuju kod ovlašćenih provajdera: ‐ domen, ‐ hosting. Domen (domain) – predstavlja web adresu koja ima svoju formu: www.imedomena.rs ili na konkretnom primeru: www.tekoms.co.rs ili www.tekoms.rs Ukoliko klijent želi domen u više reči potrebno je da sadrži srednju ili donju crte u samom domenu, na primer … www.tekoms‐kursevi.com ili www.tekoms_kursevi_web_dizajna.rs Preporuka je da naziv domena bude relativno kratka reč, jasna, PREPORUKA laka za pamćenje, bez preteranih opisa i po mogućstvu da sadrži neku ključnu reč koja opsuje osnovnu delatnost firme. Domen www.tekoms‐kursevi.com je praktičan za pamćenje, sadrži ime firme, ključnu reč dok je domen naziva www.tekoms_kursevi_web_dizajna.rs veoma komplikovan za posetioca kada mu se naprimer diktira adresa koju treba da poseti ili ukuca u svoj Browser. Oznaka “.rs” predstavlja kategoriju domena i naravno to može da varira u zavisnosti kakav domen klijent želi da ima. Preporuka je da se uzimaju domeni u skladu sa delastnošću firme, tako da su najčešći domeni kod nas “.co.rs”,”.rs” i “.com” … Takođe cene kategorije domena varijaraju. Vidljivost sajta kao i pozicija sajta na samom Google ne zavisi od vrste domena, drugim rečima koji god da zakupite od domena, uz dobru optimizaciju, Vaša prezentacija će biti dobro pozicionirana na mreži bez obzira da li je “.com“ ili „.rs“. Pored toga možete zakupiti i domene: .org – ukoliko ste organizacija, .edu.rs – za obrazovne institucije i sl … Da bi ste pristupili panelu gde su parametri za domen potebno je PREPORUKA da definišete kod provajdera korisničko ime i password. Te parametre sačuvajte kod sebe jer kao web dizajner morate imate sve pristupne podatke ukoliko kasnije klijent zahteva neke korekcije na sajtu.
50
KURS WEB DIZAJNA Hosting (Hosting) ‐ Hosting predstavlja platformu odnosno “mesto” gde smeštate Vašu internet prezentaciju. Pristup hostingu se radi preko Login panela gde upisujete User name i password. Da bi ste pristupili hosting panelu gde su parametri je da definišete PREPORUKA kod provajdera korisničko ime i password. Te parametre sačuvajte kod sebe jer kao web dizajner morate imate sve pristupne podatke ukoliko kasnije klijent zahteva neke korekcije na sajtu. Danas postoji kod nas nekoliko provajdera koji nude opciju hostovanja vašeg sajta i svaka opcija nudi određene parametre – veličinu memorije, broj email naloga, broj domena i sl … Ono što je važno na ovom kursu da polaznik shvati kako sve to funcioniše u praksi vezano za domen i hosting. U prehodnom poglavlju objasnili smo šta je domen koji klijnet zakupljuje ali pored toga potebno je i da poseduje hosting gde će biti smeštena prezentacija. Hosting podrazumeva da uz pomoć određene aplikacije na samom serveru Vi manipulišete podacima vezano za samu prezentaciju. Kao dobra opcija kod naručivajna hostinga jeste uzimanje C PANEL‐a, koji predstavlja platformu gde se logovanjem na nju, pojavljuje panel sa ikoncama sa određene operacije. Grafik u prilogu opisuje šemu kako funkcionišu relacije domen > hosting > Vaš računar.
51
KURS WEB DIZAJNA
52
KURS WEB DIZAJNA 9.1. FTP FileZilla Client – prebacivanje prezentacije na server Za kraj, ostalo je da se komplet web prezentacija prebaci na server i bude vidljiva na mreži. Prethodno je potrebno zakupiti domen i hosting gde će biti smeštena prezentacija. Početna poglavlja objašnjavaju detaljno šta je domen i hosting i kroz grafičke prikazaje pokazuje polazniku kursa principe rada kako posetilac vidi Vaš sajt odnosno celokupna struktura gde se nalaze Vaš računa – server gde je prezentacija – posetilac koji posećuje Vaš sajta. Kompletna konstrukcija jsata sa svim fajlovima i folderima se nalazi u jednom centralnom folderu TEKOMS – Kurs web dizajna. I preporuka je da za svaki sledeći sajt kreirate u novom fodleru određenog naziva (naziv firme, lica i sl) … i u njega ubacujete sve što ste radili za tu prezentaciju. Takođe, u tom folderu neka se nalazi i poseban fajl (može čak običan Notepad fajl) naziva WEB INFO u kome će nalaziti svi poterbni parametri za povezovanje na REMOTE Server. Posle završenog dizajniranja web prezentacije ostaje samo da prezentaciju prebacimo na server i ista će odmah vidljiva upisivanjem domena u adres bar. Za prebacivanje prezentacije koristićemo programčić FTP FileZilla Client koji to veoma efikasno radi. Koraci u slanju prezentacije na server se radi u par koraka: 1. Instalacija FTP FileZilla Client – naravno ovaj korak je sa na početku, 2. Povezivanje na REMOTE SERVER preko FTP parametara sa folder gde se smešta prezentacija (obično je to folder public_html), 3. Slanje sadržaja fodlera TEKOMS – Kurs web dizajna u fodler na REMOTE Serveru. Instalacija FTP FileZilla Client je vrlo jednostavna i klikom na ikonicu FileZilla.setup (instalacija se nalazi u folderu DODATNE ALATKE ZA KURS kao sastavni deo dodatnog materijala za kurs. Instalacija prati korisnika kroz korake i posle 5 minuta na Vašem Desktop‐u se pojavljuje ikonica FTP FileZilla Client. Klikom na tu ikonicu otvara se ekran kao na slici: ‐ LEVI PROZOR je prikaz sadržaja Vašeg računara (uđite u folder TEKOMS – Kurs web dizajna), ‐ DESNI PROZOR je sadržaj REMOTE servera odnosno mesta gde ćemo smestiti prezentaciju (trenutno je prozor prazan jer nismo povezani).
53
KURS WEB DIZAJNA Povezivanje na REMOTE SERVER je korak gde je potrebno imate nekoliko FTP4 parametara za povezivanje: USER NAME korisničko ime (obično sami dajete kod naručivanja hostinga) PORT: 21 HOST: www.imedomena.rs PASSWORD: ••••••••• (dobija se od strane provajdera kod zakupa hostinga) … sa ovim parametrima Vi se povezujete sa REMOTE serverom. ‐ Kliknite na FILE > SITE MANAGER > NEW SITE (u desno polje upišite naziv konekcije), ‐ U desnom prozoru upišite parametre kao na slici: LOGIN TYPE: Normal > CONNECT Ukoliko ste sve uneli od parametara kako treba, u DESNOM PROZORU se pojavljuje struktura REMOTE SERVERA sa fajlovima i fodlerima. Dvoklikom mišem dođite do fodelra gde se smešta prezentacija – obično je to fodler PUBLIC.HTML ali ponekad može da bude i folder DOCKROOT … oko tih parametara najbolje je pozvati tehničku službu provajdera koja je dužna da Vam da sve informacije vezano za konekciju sa serverom. Kada ste došli i ušli u folder gde se smešta prezentacija (DESNI PROZOR), mišem selektujte sve fajlove u LEVOM PROZORU (Vaša web prezentacija u vašem računaru) > DESNI TASTER MIŠA > UPLOAD. Sačekati da se prezentacija komplet prebaci na REMOTE SERVER. Prebacivanje prezentacije zavisi od količine materijala, vaše brzine interneta. Prvo put Vi prebacujete komplet prezentaciju, ali kasnije dovoljno je prebaciti samo fajlove koje ste naknadno menjali … 4
FTP je skraćenica od reči File Transfer Protocol, i u prevodu znači protokol za prenos fajlova (datoteka).
54
KURS WEB DIZAJNA 9.2. Pregled sajta u Firefox, Chrome, IE Svaki dizajner treba da vodi računa da se njegova prezentacija “vidi” u različtim pregledačima isto ili bar 99% slično. Namerno smo spomenuli 99% jer neki pregledači u nijansama malo promene vizuelno sajt, ali je vađno da ta promena bude skoro neprimetna za oko posetioca. Drugim rečima, u toku kursa smo često spominjali na kraju nekih određenih operacija, rečenicu … “izađite i fajla i u vašem Borwser‐u otvorite fajl index.html …”. Pod tim izrazom Browser podrauzmevamo da kod vas imate instalirane najpoznatije Browser‐e ili pregledače Vaše prezentacije – Firefox, Google Chrome, Internet Explorer i sl … Međutim za dizajnera je veoma važno da kod testirnja izgleda stranice u pregledaču tu stranicu testira kroz nekoliko pregledača … tako što će kliknuti na sam fajl na primer index.hml i potom DESNI TASTER MIŠA > OPEN WITH … i odabrati jedan od instaliranih ! Vaš sajt će biti prokazan u različitim Broser‐ima i veoma je važn da slika koju vidite nema nekih vizuelnih odstupanja. Razlog tome što se testira u nekoliko pregledača jeste što svaki pregledač n svoj način prevodi Vaš HTML kod u vizuelno rešenje vidite na ekranu. Ukoliko se pojave neka određena odstupanja prezentacije u raznim pregeldačima, onda VI kao dizajner morate pristupiti određnim korekcijama na samom sajtu sa ciljem da posetilac bez obzira koji je pregledač vidi potpuno isto vašu prezentaciju. Kliknite na … ‐ index.html > DESNI TASTER MIŠA > Open with … Firefox, Opera, Explorer ili Chrome …
55
KURS WEB DIZAJNA
10. PHOTOSHOP ZA WEB – priprema u photoshopu za web 10.1. Uvod u radno okruženje (Opis ekrana)
Kada pokrenete Photoshop po prvi put, radnu površinu čini grupa standardnih alata, paleta i menija. Alati Photoshop‐a se nalaze u Toolbox‐u. Svaki alat ima svoje opcije, koje se mogu podešavati. Na primer, kada se izabere od neki alata iz „Toolbox”‐a, u Options bar‐u se može podesiti način rada tog alata. Neke opcije su iste kod više alata, dok su neke vezane isključivo za jedan alat. Palete sadrže elemente koji nemaju veze sa izabranim alatom, kao što su koordinate kursora na ekranu, vrednosti boje ispod kursora isl. Meni linija se u Photoshop‐u, kao i kod svih drugih programa nalazi na vrhu radnu površine Workspace
Options bar
Meni linija
Toolbox
Palete
Workspace – predstavlja radno okruženje sa određenim alatkama. Preporuka je za početak bude podešeno Design.
56
KURS WEB DIZAJNA 10.2. Otvaranje Photosop fajlova – rezolucija, bitmap Kreiranje nove slike se vrši komandom File ‐ New. Pri kreiranju nove slike treba izabrati − ime u prozoru (Image Name), − dimenzije (Image Width&Height), − rezoluciju (Resolution) ‐ Rezolucija je važna samo kod štampanja. − kolor mod (Mode) ‐ RGB ili CMYK − (Background Contens) – nek ostane white (bela pozadina) Photoshop ima nekoliko ekstenzija sa kojima radi i u koje fajl može biti snimljen preko opcija Save As ... PSD – radni fajl sa layer‐ima. JPEG – kompresovan za Web, email i sl. GIFF – 256 boja za Web grafiku, PNG – koristi se za FLASH, EPS ili TIFF – za štampu (InDesign, Quark i sl). Kliknite Desni taster Miša (DTM) na sliku > OPEN WITH ... Photoshop (SLIKA SE OTVARA U PHOTOSHOP RADNOM OKRUŽENJU) Rezolucija. kao pojam vezan za slike na računaru, predstavlja broj piksela po inču (ppi ‐ pixel per inch) ili gustinu slike. Umesto oznake ppi često se koristi i dpi ‐ dots per inch. Ekran monitora je ograničen na 72 ili 96 dpi. Za slike koje se štampaju, standardna rezoluciji je 300 dpi. Slike koje se koriste za web prezentacije su u rezoluciji od 72 dpi. Rezoluciju slike u stvari, određuje izlazni uređaj, tako da se bira ona na osnovu tog podatka. Veća rezolucija daje veći fajl ali samim tim i veći kvalitet slike. Slike sa većom rezolucijom se koriste samo za štampu. Broj piksela po širini i po visini predstavlja dimenzije slike. Na primer slika može imati 640 piksela po širini i 480 piksela po dužini (kraći oblik zapisa bi bio 640x480). Dimenzije slike su ključni element kod izrade slika za web prezentaciju. Veličina ekrana varira od 640x480 do 1280x1024 pa i više. Prezentacije se najčešće prave u „sigurnim rezolucijama”, koje se mogu videti i na manjim ekranima. To je uglavnom 640x480 rezolucija. Kod pripreme za štampu, dimenzije slike zavise od formata u kome će se štampati. Broj boja označava maksimalnu količinu boja koju jedna slika može da sadrži. Broj boja se često opisuje kao broj bitova u jednoj slici. Što je veći broj bitova, to je i veći broj boja. Postoje četiri standardna tipa: l bit, 8 bit, 24 bit i 32 bita.
57
KURS WEB DIZAJNA Slike koje imaju l bit, sastoje se samo iz crne ili bele boje. ili iz dve boje 8 bit‐ne slike imaju maksimalno 256 boja ili 256 različitih nijansi sive boje 24 bit‐ne slike imaju maksimum od 16 miliona boja. 32 bit‐ne slike se sastoje od preko milijardu boja, ali poslednjih 8 bit‐a se najčešće koristi za alfa kanal. Tipovi slika Bitmap slike (slika u pixelima) Bitmape su najčešći oblik slika. Na ekranu se prikazuju tako što se crta tačka po tačka. Sastoji se od određenog broja piksela po dužini i širini. U bitmap fajlu su zapisane vrednosti boje svakog piksela slike. Što je veća dimenzija slike i broj boja, to će i fajl biti veći. Glavna prednost bitmapa je veran prikaz fotografija ‐ boja, tonova i tekstura. Vektori (krive) Vektori se ne iscrtavaju tačku po tačku, već je u fajlu zapisan matematički opis slike. Na primer, slika crvenog kruga u obliku vektora izgleda ovako: nacrtati krug, prečnik 2 cm, boja ‐ crvena. Prednost vektora u odnosu na bitmape je u veličini fajla. Na žalost, vektori, zbog toga što za prikaz slika koriste krugove, linije i tačke ne mogu da reprodukuju fotografije. Photoshop je program za obradu bitmapa. Pored toga, može da otvori (učita) i vektorske slike, tako što vektore pretvara u bitmape.
Slovo A kao Bitmap Slovo A kao Vektor Smart Object and Rasterize Object Objekat (Layer) ne gubi na Pixelima pri transformaciji, na primer skaliranju, PREPORUKA: SVE OBJEKTE (LAYERE) PRE OBRADE KONVERTOVATI U SMART OBJECT. DTM na Layer > Convert To Smart Object (Layer dobija ikonicu katanca). DTM na Layer > Rasterise Layer (Layer gubi ikonicu katanca).
58
KURS WEB DIZAJNA 10.3. Selekcija u Photshopu Jedna od najvažnijih stvari pri radu sa slikama jeste selekcija. Selekcija je površina slike izolovana od ostatka slike radi neke modifikacije, kopiranja ili umetanja druge slike. Na primer, ako na slici hoćete da promenite boju kose ili očiju, morate prvo da ih označite sa nekim od alata za pravljene selekcije. U suprotnom, promena će se izvršiti na celoj slici. Selekcija se ne čuva sa slikom, što znači da kada napravite selekciju, izvršite promenu i snimite sliku, sledeći put kada sliku učitate, selekcije neće bili. Marquee Tool Ovaj alat se korisli za kreiranje selekcija pravilnih oblika. Selektovani deo slike je označen isprekidanom linijom koja se kreće. Postoji : ‐ Rectangular Marquee za kreiranje selekcija u obliku pravougaonika i kvadrata i ‐ Eliptical Marquee za kreiranje elipsi i krugova. ‐ Single Row i Single Column se koriste za kreiranje selekcije od jednog piksela po širini, odnosno visini slike. Da bi se dobili pravilni oblici pri selektovanju, pravougaonik ili krug, potrebno je držati taster SHIFT. Lasso Tool „Lasso” alat se koristi za pravljenje selekcija nepravilnih oblika. „Lasso”‐om se pravi selekcija sličnu kao i crtanje olovkom po papiru. Kliknete i pomerate kursor po slici. Kada pustite taster na mišu selekcija se zatvara. Polygonal Lasso Tool Selekcija nastaje crtanjem pravih linija i na taj način kreiraju zatvorenu‐izlomljenu liniju. Kliknite na neko mesto na slici da bi počeli sa kreiranjem selekcije. Pomerite miša i pojaviće se linija. Da započnete drugu liniju, kliknite ponovo i sve tako dok ne nacrtate željeni oblik. Zatvaranje selekcije se vrši klikom na početnu tačku selekcije ili dvoklikom kod poslednje tačke. Magnetic Lasso Tool Alat radi slično kao i prethodni, s tom razlikom što koristi kontrast boja da bi odredio gde da kreira selekciju. Da bi se povećali preciznost često kliknite mišem radi kreiranja što većeg broja tačaka. Da zatvorite selekciju pronađite početnu tačku ili kliknite dva puta. Magic Wand Tool „Magic Wand” se razlikuje od ostalih alata za selektovanje, jer nema potrebe da sami crtate selekciju, već je dovoljno da samo kliknete na površinu koju treba selektovati i on će to uraditi umesto vas. Selekcija se kreira na osnovu sličnosti boja.
59
KURS WEB DIZAJNA Crop Tool Crop Tool služi za isecanje označenog dela slike. Kada se sa ovim alatom označi deo slike koji treba da se iseče, po ćoškovima selekcije i po sredini, pojaviće se crni kvadrati. Njihovim pomeranjem se selekcija povećava ili smanjuje. Kada je završeno selektovanje, pritisnite ENTER ili mišem kliknite dva puta unutar selekcije Sve što se nalazilo van selekcije, biće isečeno. 10.4. Layers Layer‐i su slični providnim folijama. Svaki layer sadrži neku sliku. Kombinovanjem više layer‐ a dobija se složena slika. Spisak layer‐a se nalazi u Layers paleti. Layer‐ima može da se podesi providnost (Transparency), način na koji se kombinuju sa drugim layer‐ima (Blend Mode) može im se dodati maska (Layer Mask) ili im se može promenili redosled. Radi lakšeg rada svaki layer ima svoje ime. Photoshop svakom novom layer‐u daje ime „Layer X”, gde je X broj layer‐a, počevši od broja 1. Ukoliko slika ima samo jedan layer, umesto kao ime pisaće „Background”. Ni jedan layer ne može da se nađe ispod ovog layer‐ a. Za promenu imena potrebno je 2 puta kliknuli na layer i upisati u polju „Name” novo ime umesto starog. Kada promenite ime „Background” layer onda možete menjati redosled layer‐a. Background se ne može obrisati, menjati, pomerati i sl. Ako želite da postane uredljiv, kliknite na njega, dajte mu ime ‐ time postaje Layer, pdloga u kojoj se može uređivatio. Layer – su slojevi sa svojim oblicima Kreiranje novog layer‐a ‐ Novi layer‐a se može kreirati klikom miša na ikonu „Create New Layer” ili preko Layer‐ New ‐ Layer. U prozoru treba upisati ime novog layer‐a umesto „Layer X” i pritisnuti OK dugme. Ubacivanjem dela neke druge slike pomoću Edit> Paste se takode kreira novi layer. Ukoliko želite da deo aktivnog layer izdvojite kao poseban layer, treba taj deo označiti i onda kliknuti na Layer > NewLayer Via Copy.
60
KURS WEB DIZAJNA 10.5. Erase Background Eraser Tool Eraser Tool ili gumica, koristi se za brisanje pozadine kod slika. Kada se slika sastoji iz više layer‐a, gumica briše sadržaj layer‐a, dok kod slika koja ima samo background layer, boji background bojom. Gumici možete odrediti veličinu i oblik, isto kao i kod alata za crtanje. Dodatne opcije možete podesiti u Options paleti.
Mode Na raspolaganju je nekoliko alata koji određuje ponašanje gumice: Pencil, Paintbrush, Airbrush i Block. Block predstavlja kursor u obliku kvadrata. Opacity Pritisak gumice za brisanje. Flow Količina obrisane boje. Erase to History Kada se aktivira brisanjem se slika vraća u ono stanje u kakvom je bila kada je učitana. Background Eraser Tool Ova gumica za razliku od prethodne, „pametno” briše sadržaj Briše se pozadina, pri čemu ivice određenih delova slike ostaju čitave. Magic Eraser Tool Magična gumica briše površine koje imaju istu ili sličnu boju. Sličnost se određuje pomoću Tolerance opcije u Option paleti.
61
KURS WEB DIZAJNA 10.6. Optimizacija slike Slika koja se insert‐uje u web stranicu odnosno u HTML kod mora da se optimzuje za web da ne bila veličina slika opterećivala učitavanje web stranice kad je na serveru. Pod tim se podrazumeva da smanjivanje veličine slike bez gubljenja na kvalitetu same slike. Kliknite na FILE > SAVE FOR WEB AND DEVICES > i podesiti ekstenziju slike (JPG, PNG, GIFF) ... i naravno kvalitet slike (Maximum, Very Good ...) čijim se menjanjem menja i veličina fajla. Tako da slika koja ima na primer 1 Mb veličinu posle optimizacije može se export‐ovati da ima veličinu oko 100‐150 kb što je važno kad se ta slika insertuje u HTML kod. Klikom na SAVE snimite sliku čime je optimizacija završena . 10.7. Tekst LTM na T (TEXT) > LTM na Layer (Tekst se ispisuje u pravcu). LTM na Selection Area > LTM na TEXT > (text se ispisuje u pravougaobniku). Type tool se koristi za kreiranje teksta u Photoshop‐u. Postoji nekoliko vrsta ovog alata. Tekst može biti u obliku selekcije ili može da se kreira na novom layer‐u. Kada se jednom kreira tekst u obliku selekcije, više ne može da se modifikuje. Tekst na novom layer‐u je bolji za korišćenje, jer u svakom trenutku možete da promenite oblik, boju i veličinu slova, kao i sam tekst koji ste uneli. Tekst može biti horizontalan ili vertikalan. Font, Style, Size Pomoću ove tri opcije se reguliše oblik, stil i veličina slova. Leading Povećava ili smanjuje razmak između redova: unošenjem pozitivnih ili negativnih vrednosti. Kerning Povećava ili smanjuje razmak između dva znaka između kojih se nalazi kursor. „Auto” isključite radi unošenja vrednosli. Trucking Povećava ili smanjuje razmak u celoj reci ili u označenom tekstu, unošenjem pozitivnih ili negativnih vrednosti. Aligntnent Postavlja tekst sa leve, desne ili po sredini. Color Definiše boju teksta. Boja je uvek foreground dok je ne promenite
62
KURS WEB DIZAJNA Buseline Pomera znakove gore ili dole, unošenjem pozitivnih ili negativnih vrednosti. Rotate Rotira tekst za 90 stepeni. Kod Horizontal Type Tool‐a nema ove opcije. Anti‐Alias Kontroliše nazubljenost ivica teksta. Moguće opcije su. „None”, „Crisp”, „Strong” i „Smooth”. Za sitniji tekst treba koristili opciju „Crisp”. Fractional Witdh Određuje razmak između znakova. Kada je uključena razmak između svih slovu nije isti. Rezultat ovoga je da tekst izgleda čitljivije, pogotovo sitniji tekst (manji od 10 pt). Text on Path LTM na Path Tool > Kreiraj neku krivu > LTM na Text Tool > LTM ka krivu > Ukucak tekst (TEKST SE ISPISUJE PO KRIVOJ). Text Mask ‐ Slika unutar teksta Ispisuje tekst koji u sebi sadrži sliku. Kreirati dva Layer‐a (Photo i Daisy) > LTM na Layer Photo (To je slika koja mora biti izmad layer‐a sa tekstom) > Layer > Create Cliping Mask. SLIKA SE POJAVLJUJE SAMO U SLOVIMA !!! WART Text – iskrivljen tekst Kreirati dva Layer‐a (Text i background) > LTM na Text > DTM > Free Transform > LTM na ikonu WARP > Izaberi Warp Mode (Tekst se transformiše po modelu koji se dalje opet može modifikovati) > ENTER.
63
KURS WEB DIZAJNA 10.8. Dodatna obrada slike Patch Tool Ovo je takođe nova alatka koju donosi Photoshop. Selektovati deo slike pomoću ove alatke ili na drugi način i alatkom preneti na deo slike koji želimo zakrpiti.Po puštanju tastera program automatski izjednačava tonske prelaze. Blur Tool „Blur” alat se koristi za zamućivanje delova slike prelaskom preko njih. Na rad alata utiče veličina i oblik četkice, način na koji se alat primenjuje (Strenght ‐ snaga pritiska). Ako je uključeno „Use All Layers” zamućivanje će se vršiti po svim layer‐ima, a ne samo po onom koji je aktivan. Zamućivanje se postiže smanjenjem kontrasta boja. Sharpen Tool „Sharpen” se koristi za izoštravanje delova slike preko kojih se pređe mišem. Za rad alata je bitan pritisak, veličina i oblik četkice i način primene. Ako se pretera sa izoštravanju, pojaviće se veliki broj raznobojnih tačaka. „Sharpen” alat može donekle da izoštri ono što je zamućeno sa „Blur” alatom i obrnuto. Izoštravanje se postiže povećanjem kontrasta. Smudge Tool Ukoliko hoćete da određene delove slike razmažete koristićete „Smudge” alat. Kako će se alat radili po slici, zavisi od veličini i oblika četkice i pritiska. Mešanje „foreground” boje i boja preko kojih prelazi kursor se postiže kada se uključi opcija „Finger Paint”
64
KURS WEB DIZAJNA
11. MOBIL DIZAJN – dizjan sajta za mobilne Nastavak obuke za web dizajn bavi se dizajnom ali prilagođenim za mobilne uređaje. Na početku treba definisati dva pojma: - Response design – dizajn sajta ima u sebi određene tehnologije ili stilove koji omogućavaju da se komplet prezentacija prikazuje na svim uređajima sa različitim rezolucijama (desktop, notepad, tableti, telefoni itd) ali se prikazuje kompletan sadržaj (slide show, baneri ...) - Mobil design – je tehnološki isto resposne design (prilagodljiv ekranima) ali je akcenat da se u stvari dizajnira “duplikat” web prezentacije samo sa određenim sadržajem, na primer bez reklamnih banera čime se stranica manje opterećuje kod učitavanja. Prebacivanje iz Desktop verzije u mobil verziju radi se preko jednostavne Javascripte koja “prepoznaje” širinu ekrana i koja se jednostavno ubaci u HEAD sekciju na svim HTML stranicama (index, galerija, kontakt itd) (otvorite čas 32 u Code Editoru). Scripta kroz IF uslov radi redirekciju ka fajlu index‐mobil.html gde je mobil verzija web prezentacije. if (screen.width Back Mobil verzija O nama Usluge Galerija Kontakt Ovde ide sadržaj početne strane
67
KURS WEB DIZAJNA Back O nama Ovde ide sadržaj strane O nama
11.3. Media queries – stilovi prema rezoluciji
Elementi na web stranici (slike, tekstovi ...) se dodatno mogu stilizovati tako da se menjaju u zavisnosti od veličine ekrana. To se posebno primenjuje kad su mobil verzije u pitanju što konkretno znači da se suženjem ekrana po širini određeni elementi dodatno stilizuju. Otvorite “index‐mobil.html” uz pomoć Code Editora i svakoj slici u Galeriji dodajte klasu class=“galerija”. U folderu “stilovi” otvorite novi blanko CSS fajl pod nazivom “media‐ queries.css”, unesite link sa css‐om u head sekciju fajla index‐mobil.html a u fajl “media‐ queries.css” unesite sledeći kod:
68
KURS WEB DIZAJNA @media (max‐width:600px){ .galerija { width: 49%; } } @media (max‐width:480px){ .galerija { width: 100%; } } Time ste definisali da slike u galeriji klase galerija su širine 49% ako je ekran max širine 600 px a ako je ekran max širine 480 px slike se prikazuju u širini 100%. Šta se dešava u dizajnu ? Slike u galeriji klase galerija su širine 49% (u dva reda) ako je ekran max 600 px a ako je širina ekrana max 480 px slike se prikazuju u širini 100% (jedan red – jedna slika) čime je pregled galerije slika pregledniji kako je ekran manji.
69
KURS WEB DIZAJNA
12. OPTIMIZACIJA – podešavanja u HTML kodu Optimizacija predstavlja važnu stavku kod web dizajna jer omogućava da se web prezentacija vremenom dobro pozicionira na glavnim pretraživačima – Google, Yahoo itd. Ovo poglavlje će pokazati važne parametre koje bi trebalo da podesite u HTML kodu pre postavljanja prezentacije na server. Naravno, nema garancija kada će se web prezentacija uopšte pojaviti na nekom pretraživaču na nekoj poziciji ali svakako pravilnim podešavanjima omogućavate vremenom bolju pozicioniranost. Početak optimizacije kreće od definisanja ključnih reči. Ključne reči su reči preko kojih posetioci dolaze do web prezentacije. Na primer, definisaćemo ključnu reč “kurs web dizajna” a potom otvoriti Google pretraživač i uneti te ključne reči
Google u startu daje ponude ključnih reči sa varijacijama ... Beograd, Novi Sad, Niš ... Takođe dodatne varijacije bi bile ... cena, online ... Posle definisanja ključnih reči sa varijacijama ide njihova implementacija u HTML kod. Za početak podesiti sledeće u head sekciji HTML koda: Kurs web dizajna | Beograd | cena | online U tekstu podesiti da Headings (H1, H2 ...) imaju formu ključnih reči (može i sa varijacijama) Kurs web dizajna u Beogradu – odlična cena Neki tekst ... Online kurs web dizajna Neki tekst ... Slike u HTML kodu da imaju definisan ALT odnosno u formi ključnih reči bez razmaka:
70
KURS WEB DIZAJNA http://www.ime‐domena.com/ always 1.00 http://www.ime‐domena.com/index.html always 0.80 http://www.ime‐domena.com/galerija.html always 0.80 http://www.ime‐domena.com/kontakt.html always 0.80 … To je fajl gde je struktura slična HTML kodu odnosno gde se između TAG‐ova (url) nalazi svaka linkovana web strana sa svojim tagovima (loc) gde je pun domen svakog linka.
72
KURS WEB DIZAJNA
14. RESPONSE DIZAJN – prilagodljivost ekranima Resposne dizajn omogućava da se kompletan sadržaj prezentacije odnosno glavna konstrukcija sastavljena od DIV TAG‐ova fluidno pomera i prilagođava širini ekrana. Suštinska kreiranja response konsktrukcije ima dva koraka: 1) da su dimenzije širine DIVTAG‐ova u procentima (%). 2) Preko Media queries stilova se podešavaju stilovi određenog DIV TAG‐a prema širini ekrana (1024, 800, 600, 640, 480, 360, 320 px). Ovo su najčešće ekranske rezolucije. KORAK 1 Za početak sve dimenzije glavne konstrukcije DIV TAG‐iva dimenzionišite u procentima. Prvi DIV TAG ima širinu u procentima u odnosnu na ekran (na primer 70%). Ostali DIV TAG‐ovi imaju širinu u procentima u odnosnu na GLAVNI DIV TAG. To su podešavanja kad je širina ekrana potpuna. Na taj način definisati konstrukciju koja će biti u stvari ista kao i kad su dimenzije bile u pixelima s tim što je sad širina učešće procenta u odnosu na širinu ekrana ili DIV TAG u kome se nalazi DIV TAG. Prvi Glavni DIV TAG ima širinu na primer 70% u odnosu na širinu ekrana. Ako se pregleda sajt na manjim ekranima ovaj DIV TAG se fluidno smanjuje i zadržava procenat (70%) u odnosu na manju ekranu širinu ekrana. Div Tag „Header“ ima širinu 100% jer se nalazi „Glavnom“ Div Tagu i taj procenat je maksimalna širina u odnosu na taj Div Tag‐u. Div Tag‐ovi (Leva i desna kolona) imaju širine tako da se uklope da je leva kolona šira od desne. Po tom principu se dalje definišu širine DIV TAG‐ova tako da se uklopi sve u konstrukciju koja je bila na početku kad su bili pixeli.
73
KURS WEB DIZAJNA KORAK 2: Posle definisanja konstrukcije DIV TAG‐ova u procentima kad je maksimalna širina ekrana potrebnoje dodatno preko Media Queries stilova stiliuzovati te iste DIV TAG‐ove za manje ekrane. Tako se u stvar klasa nekog DIV TAG‐a u stvar kopira i kopija modifukuje da važi za određeni ekran. Uzećemo primer Glavnog Div taga. Na početku fajla sa stilovima ovaj DIV TAG ima stilove: .glavni_div_tag { width: 45%; margin: auto; ... } Na kraju ovog CSS fajla unesti prvi Media Queries odnosno šta se dešava sa glavnim div tagom ako je ekran maksimalne širine 1024 odnosno ... @media (max‐width:1024px){ .glavni_div_tag { width: 80%; /* širina div taga*/ } ... } U ovom slučaju glavni div tag povećava širinu kako se ekran smanjuje. Po sličnom principu definisati odstale Media Queris‐e za neke standarne širine ekrana i podešavati širinu glavnog div taga odnosno ... @media (max‐width:800px){ .glavni_div_tag { width: 90%; /* širina div taga*/ } ... } @media (max‐width:768px){ .glavni_div_tag { width: 100%; /* širina div taga*/ } ... } Ovo je način gde Vi za svaki DIV TAG unutar početka i kraja Media stila unosite klase DIV TAG‐ova a potom njihove stilove koji se mernjaju kako se ekran sužava. Najčešće se širina DIV TAG‐a povećava suženjem ekrana tako da se svi DIV TAG‐ovi u jednom trenutku poređaju jedan ispod drugog i posetilac listanjem ima pregled komplet sajta.
74
KURS WEB DIZAJNA
15. JavaScript i Jquery – osnove Šta je JavaScript? JavaScript (u daljem tekstu JS) je objektno zasnovan skriptni jezik. Uključujemo ga u web stranicu da bi je učinili dinamičnijom. HTML (osnovni kod web stranice) koristi se samo za oblikovanje i uređivanje elemenata stranice (tekst, forme, linkove i tabele). Mogućnost uključenja JavaScript skripte daje nam mnogo veću kontrolu kako se web stranica ponaša. Kombinovan sa HTML‐om i CSS‐om JavaScript čini DHTML (Dynamic HTML). JavaScript je najpopularniji skriptni jezik na Internetu kojeg podržavaju svi poznatiji pregledači (Chrome, Firefox, Opera). Omogućava kreiranje dinamičkih efekata u web prezentaciji: atraktivni padajući meni (paneli), iskakajući prozor, brojači ... Šta je Jquery? jQuery je gotova JavaScript biblioteka koja omogućava da web sajtu dodate funkcionalnosti. Kombinacija Javascripte sa svojom Jquery bibliotekom omogućava da Vaše web stranice budu vizuelno atraktivnije i interaktivnije. Jquery biblioteka je besplatna i može se preuzeti sa sajta http://jquery.com/ ali za potrebe online obuke polaznik već dobija folder “js” gde se nalazi fajl “jquery‐1.9.0.min.js” (TRENUTNA VERZIJA). Naravno, novije verzije se uvek lako mogu preuzeti sa zvanične web prezentacije. Ono što je važno napomenuti da bi ste primenili sve funkcije koje pružaju Javascript I Jquery potrebno da je u HTML kod postavite link koji poziva tu biblioteku i to u HEAD sekciju … dok ispod linka se otvaraju tagovi … unutar koga ide koga ide Javacript kod koji kontroliše parametre. Javascript ‐ osnova $(document).ready(function() { // ovde ide skripta koja kontroliše parametre i dalje procesuira }); …
75
KURS WEB DIZAJNA
Za početak da definišemo osnovni okvir u kom funkciniše Javascript a to je : $(document).ready(function() { // ovde ide Javacripta skripta koja se procesuira });
Da je pojasni malo ova forma: – forma počinje znakom “$” … takođe i u samoj skripti će se dalje javljati slična forma odnosno znak “$” (“ ”) – što znači da funkcija se primenjuje na elemente u zgradi – h1, div itd … – function( ) – definiše da se odredi određena funkcija (operacija) koju će skripta procesuirati. U nastavku uvek mora da postoje znakovi vitičaste zagrade između kojih dalje ide skripta function ( ) { Ovde može da nova funkcija odnosno function () { Ovde ide neka nova funkcija … } } Da bi polaznik najbolje video način pisanja fukcija u Javascripte, takođe je potrebno samom HTML kodu odnosno stranici gde se skripta procesuira, kreirati određene već poznate elemente – text, slike, linkove itd … koji će imati svoje ID‐ove preko kojih JS tačno „zna” na koji se HTML element određena animacija implementira. Javascripta će upisane funkcije primeniti na te elemente ukoliko smo to naveli u samoj Javascripti. Tabele u nastavku će najednostavnije pokazati polazniku šta unosi u HTML, šta unosi u Javascript odeljak u HEAD sekciji i na kraju kako se to renderuje u Browseru. Tabele su podeljenje u više delova u kom se neke određene vrste osnove skripte prikazuju da bi se shvatila suština i koncept kako funkcioniše Javascripta. Naravno, treba napomenuti da su ovde date samo OSNOVE. JS takođe ima sve osobine pisanja sintakse koje se koriste u standarnom programiranju na primer pojava komandi IF, pojmova kao što je VAR za varijable itd. Ali za početak neka ove jednostavne skripte budu osnova da se shvati kako JS funkcioniše i kako se implementira u HTML kod. Idemo redom …
76
KURS WEB DIZAJNA U HTML (u Body) uneti … Naslov 1 Ovde ide neki text
Opis skripte i rezultat u browseru
U Javascript uneti … $(document).ready(function() { $("p").hide(); $("h1").click(function() { $(this).next().slideToggle(300); }); });
‐ sakriva sve što je paragraph, ‐ klikom na H1 sledi slideToggle (gore/dole) u trajanju od 0.3 sekunde Ovo podseća na jednostavni padajući meni u navigaciji !
SELEKCIJA NA KLIK MIŠEM U HTML (u Body) uneti …
U JavaScript uneti …
KLIKOM NA BUTTON LINIJA PARAGRAFA POSTAJE CRVENA
$(document).ready(function() { $("#testbutton").click(function() { $("div").css("background‐color","red"); }); });
Opis skripte i rezultat u browseru Klikom na TEST button (id) poziva se funkcija … … gde svaki DIV tag ima stil: crvena pozadinska boja.
Dalje se Javaskripta može modifikovati da se klikom mišem selektuju ostali elementi sa sajtu odnosno čijom selekcijom se poziva stil u css ( u ovom slučaju crvena boja za background).
Multiple Selector – selektuje divtag‐ove, koji su boldovani (strong) I imaju naziv “test button” $(document).ready(function() { $("#testbutton").click(function() { $("div, strong, #testbutton").css("background‐color","red"); }); });
77
KURS WEB DIZAJNA All Selector (*) – selektuje sve klikom na Text button $(document).ready(function() { $("#testbutton").click(function() { $("*").css("background‐color","red"); }); });
Even, Odd selector – selektuje klikom parne I neparne elemente (paragrafe) $(document).ready(function() { $("#testbutton").click(function() { $("p:even").css("background‐color","red"); }); });
$(document).ready(function() { $("#testbutton").click(function() { $("p:odd").css("background‐color","red"); }); });
Id selector – selektuje klikom sve sa određenim Id‐om (id=”third”) $(document).ready(function() { $("#testbutton").click(function() { $("#third").css("background‐color","red"); }); });
Class selector – selektuje klikom sve sa određenom klasom (.klasa) $(document).ready(function() { $("#testbutton").click(function() { $(".klasa").css("background‐color","red"); }); });
This selector – selektuje klikom bilo koji element (this) $(document).ready(function() { $("#testbutton").click(function() { $(this).css("background‐color","red"); }); });
78
KURS WEB DIZAJNA Event – “događaji” na klik mišem U HTML (u Body) uneti … U JavaScript uneti … Naslov 1 Naslov 2 Naslov 3
Opis skripte i rezultat u browseru
$(document).ready(function() { $("h1").click(function() { $(this).css("background‐color","red"); }); });
‐ za sve h1 (headinge) ‐ klikom miša, ‐ poziva se funkcija … ‐ da označeno ima css stil (crvena pozadina).
Pozivanje “događaja” na klik može se modifikovati, odnosno kontrolisati “događaj” klikom, prelaskom ili odlaskom miša preko određenog texta. Skripte u nastavku pokazuju primer pozivanja “događaja” pri kretanju miša.
Mousedown() – klikom miša (this) postaje obojen crvenom bojom $(document).ready(function() { $("h1").mousedown(function() { $(this).css("background‐color","red"); }); });
Mousedown() and mouseup() – klikom miša menja se boja – crvena u žutu $(document).ready(function() { $("h1").mousedown(function() { $(this).css("background‐color","red"); }); $("h1").mouseup(function() { $(this).css("background‐color","yellow"); }); });
Mouseenter() and mouseleave() prelaskom miša menja se boja – crvena postaje žuta Primer da se napravi navigacija (linkovi) koji menjaju pozadinu prelaskom miša. $(document).ready(function() { $("h1").mouseenter(function() { $(this).css("background‐color","red"); }); $("h1").mouseleave(function() { $(this).css("background‐color","yellow"); }); });
79
KURS WEB DIZAJNA Efekti na klik mišem U HTML (u Body) uneti … Klikni ovde Heading 2 Heading 3
U JavaScript uneti …
Opis skripte i rezultat u browseru
$(document).ready(function() { $("h1").click(function() { $("h2").hide(1000); }); });
‐ za sve headinge (h1) klik mišem, ‐ sakri sve Headinge 2 (h2) brzinom 1 sekunde (1000 milisekunda)
show() Effect – klikom miša prikaži $(document).ready(function() { $("h2").hide(); $("h1").click(function() { $("h2").show(1000); }); });
toggle() Effect – klikom miša “show”, klikom miša “hide” $(document).ready(function() { $("h2").hide(); $("h1").click(function() { $("h2").toggle(1000); }); });
slideUp() Effect ili slideDown() Effect – gore ili dole efekat $(document).ready(function() { $("h2").hide(); $("h1").click(function() { $("h2").slideUp(1000); }); });
slideToggle() Effect – gore / dole na klik mišem $(document).ready(function() { $("h2").hide(); $("h1").click(function() { $("h2").slideToggle(1000); }); });
80
KURS WEB DIZAJNA fadeOut() Effect ili fadeIn() Effect – jedan fade efekat na jedan klik $(document).ready(function() { $("h2").hide(); $("h1").click(function() { $("h2").fadeOut(1000); }); });
fadeToggle() Effect – fade In/Out efekat na klik mišem $(document).ready(function() { $("h2").hide(); $("h1").click(function() { $("h2").fadeToggle(1000); }); });
Animacije na klik mišem U HTML (u Body) uneti … Klikni ovde Heading 2 Heading 3
Opis skripte i rezultat u browseru
U JavaScript uneti … $(document).ready(function() { $("h1").click(function() { $("h2").animate({ "font‐size": "3em" }, 1000); }); });
animate() Width – animacijom povećaj font i širinu $(document).ready(function() { $("h1").click(function() { $("h2").animate({ "font‐size": "3em", "width": "50%" }, 1000); }); });
81
‐ na sve Headinge (h1) klik miša, ‐ animacija brzinom 1 sekunde (1000 milisekunda), h2 tako da se font poveća na 3 em.
KURS WEB DIZAJNA animate() left property – animacijom povećaj font, širinu i pomeri u levo za 100 px $(document).ready(function() { $("h1").click(function() { $("h2").animate({ "font‐size": "3em", "width": "50%", "left": "100px" }, 1000); }); });
Pozivanje stilova na klik Ova komanda omogućava da se klikom miša ili prelaskom miša stil određenog elementa promeni. Ključne komande su: – mouseenter function () – prelaskom miša, – click function () – klikom U HTML (u Body) uneti … Klikni ovde Heading 2 Heading 3
Opis skripte i rezultat u browseru
U JavaScript uneti … $(document).ready(function() { $("h1").mouseenter(function() { $(this).css("margin‐left", "50px"); }); });
‐ prelaskom miša preko Headinga (h1) … ‐ this (to) … ‐ … se pomera levo za 50 px
addClass() Single class – klikom se dodaje određena klasa Klikom miša na neki heading (h1), dobija karakteristike određene klase CSS stilova u ovom slučaju neka klasa “stilovi”. $(document).ready(function() { $("h1").click(function() { $(this).addClass("stilovi"); }); });
82
KURS WEB DIZAJNA HTML manipulacija Preko Jquery‐ija i Javascripte možete modifikovati HTML odnosno zamenti text itd … U HTML (u Body) uneti … Klikni ovde Heading 2 Heading 3
Opis skripte i rezultat u browseru
U JavaScript uneti … $(document).ready(function() { $("h1").click(function() { $(this).text("clicked"); }); });
‐ Klikom na heading (h1) pojavljuje se text “Clicked”
text() Replace text – klikom miša na Heading 1 menja se rečenica $(document).ready(function() { $("h1").click(function() { $("p").text("novi text"); }); });
Javascripta bez Jquery‐ija JS odnosno sintaksa JS‐a može da procesuira određene efekte I bez prisustva Jquery‐ija. Primera za tako nešto ima mnogo. Tabela u nastavku daje kratke sintakse JS‐a koje je dovoljno uneti u definisanoj formi I na određeno mesto u HTML strani. Evo primeri nekih kratkih JS skripti Izraz
Događaj
Po učitavanju strane pojavljuje se prozor sa porukom. Ide umesto početnog body taga.
Pojavljuje se dugme PRINT čijim klikom se poziva opcija štampanja web strane.
BACK
Link koji se ubacuje bilo gde unutar BODY taga vraća na prethodno posećenu stranicu. Koristi se kod online prodavnica kada se poseti stranica sa prikazom jednog artikla da se automatski vraća na prethodno posećenu stranicu.
83
KURS WEB DIZAJNA Izraz
Događaj
function Redirect() { window.location="http://www.tekoms.co.rs"; } document.write("Skripta koja redirektuje u roku od dve sekunde."); setTimeout('Redirect()', 2000); document.onmousedown=disableclick; status="Right Click Disabled"; function disableclick(event) { if(event.button==2) { alert(status); return false; } } function NoCopy(e){ return false } function reEnable(){ return true } document.onselectstart=new Function ("return false") if (window.sidebar){ document.onmousedown=NoCopy document.onclick=reEnable } if (screen.width count){ HTML kod. tex = tex.substring(0,count); document.textarea.comment.value =tex; Polje TEXT AREA ima kontrolu return false; broj unosa znakova u samo polje I taj limit je 100 znakova. } document.textarea.limit.value = count ‐ len; } To se najčešće koristi kod unosa polja komentara kod online prodavnica gde se LIMIT‐ira broj unetih znakova. Važno je napomenuti da je TEXT samo JS taj pojam javlja u skripti. NAPOMENA: Kao što se može videti kroz ovih par primera JS može da funkcioniše i bez JQuery‐ija. Naravno, treba napomenuti da JS ima sintaksu koja ima sve osobine programiranja odnosno pojavu pojmova kao što je IF, FOR, VAR (varijable), funkcije itd … ali ovde je bio cilj da se polazniku daju neke osnove kako JS funkcionise kroz neke jednostavne skripte.
85
