Tipovi slika na internetu

Pre nego što počnemo da koristimo slike na stranicama, moramo razjasniti vrste slika i najbolje primene. Postoje tri tipa slika na netu: JPG, GIF i PNG.

JPG format (Joint Photographic Experts Group) koristi .jpg ili .jpeg ekstenziju. Ovaj format ne podržava providnost (engl. Transparency) niti animaciju, ali je odličan za komprimovanje fotografija jer podržava milione boja. U programima za obradu slika možemo izabrati koliku degradaciju kvaliteta ćemo tolerisati u zamenu za manju veličinu fajla. Svaki put prilikom snimanja se gube određene informacije, te je strogo preporučeno da čuvamo originale posebno.

GIF (Graphic Interchange Format) je ograničen na 256 boja. GIF-ovi su odlični za tehničke crteže i za male slike (ikonice, thumb sličice i sl.). GIF-ovi mogu da pamte 2,4,16... boja, pa se može dosta uštedeti na veličini prilikom kreiranja fajlova. GIF fajlovi se kompresuju horizontalno, tj. ukoliko na GIF slici piksel ima malu varijaciju boja u horizontalnom pravcu, mnogo lakše se transformiše u manju veličinu. GIF format podržava providnost (uz dosta ograničenja) i animaciju, što znači da možemo kreirati efekat kretanja i sl. U početnim fazama razvoja interneta, gif animacije su stalno korišćene, čak i kada nisu bile potrebne. Danas se sve manje koriste.

PNG (Portable Network Graphic) je noviji format podržan od strane svih aktuelnih web čitača, a kombinuje funkcionalnosti gif-a i jpeg-a. Ovaj resterski format za slike koristi kompresiju bez gubitka. Koristi RGB i sistem boja u sivim tonovima.

Postoje dva tipa formata:

  • PNG-8, sadrži 8-bitnu informaciju o bojama (slično GIF-u).
  • PNG-24, sadrži 24-bitnu informaciju o bojama (kombinuje najbolje od GIF i JPG).

 

PNG-8 ne podržava animaciju, ali podržava transparentnost i to mnogo bolje nego GIF, dok PNG-24 podržava još bolju transparentnost i kvalitet slike bolji nego JPG. Ipak, PNG fajlovi su dosta veći, a i raniji browseri se ne snalaze najbolje sa njim (npr. IE6 ne podržava transparentni PNG).

Kada bismo rezimirali sva tri tipa, možemo doći do ovog zaključka:

  • JPG - najbolji za fotografije i slike sa puno detalja.
  • GIF - najbolji za ikonice i male sličice.
  • PNG - kombinuje najbolje od GIF i PNG, ali na uštrb veličine fajlova. Nije podržan od ranijih browsera, mada to polako postaje nebitno, jer se IE6 sve manje koristi.

 

Assets panel

Ovaj panel nam omogućava lak način manipulisanja i pregleda svih materijala (Asseta) koje koristimo u našem sajtu. Uslov da se neki fajl pojavi u ovom panelu jeste taj da prethodno taj fajl iskopiramo u Root folder. Na primer, ukoliko neku sliku iskopiramo u Images folder u okviru sajta, automatski će se pojaviti u Assets panelu.

Assets panel sortira elemente sajta u devet kategorija kojima se pristupa klikom na jednu od vertikalno poređanih ikonica na levoj strani panela:

  • Images - U ovoj kategoriji se nalaze svi jpg, png i gif fajlovi i prikazane su njihove dimenzije, veličina i putanja do njihovog mesta na računaru.
  • Colors - Ova kategorija prikazuje sve boje koje su specificirane na sajtu, uključujući i pozadinske boje, boju teksta i linkova.
  • Links - Ovde su prikazani svi linkovi, ne samo eksterni apsolutni http://, nego i email linkovi, FTP adrese i JavaScript linkovi.
  • SWF, Shockwave i Movies - Svaka kategorija prikazuje movie fajl sa odgovarajućom ekstenzijom .swf (Flash), .dcr (Shockwave) i .mpg ili .mov (Quick Time i MPEG), poput kategorije slika.
  • Scripts - Ova kategorija prikazuje JavaScript fajlove, i to eksterne skript fajlove ka kojima web stranica ima linkove (na primer, JavaScript fajlovi koji su deo Spry Frameworka, koji su prikačeni za stranicu kada koristite Spry Widgete ili efekte). U ovoj kategoriji nisu prikazani JavaScript fajlovi koji su ugnježdeni u web stranicu (na primer, kada koristimo Dreamweaver Behaviors).
  • Templates i Library - Poslednjim dvema kategorijama ćemo se pozabaviti nešto kasnije tokom kursa. 

 

 

 Assets panel

 

Kao što je već rečeno, u Assets panelu možemo videti sve slike koje su u okviru sajta. Važno je pomenuti da se tu prikazuju sve slike, pa i one koje nisu u okviru Images foldera. Zbog prikaza svih fajlova, iz svih foldera u jednoj jedinoj listi, može se desiti da nastane "gužva".

Ukolliko jednim klikom levim tasterom miša izaberemo neku od slika, njen umanjeni prikaz (engl. Preview) će se pojaviti u gornjem delu panela. Ova opcija je vrlo zgodna radi lakog i brzog pronalaženja slika.

Iz samog dijaloga možemo pozvati Default editor i izmenu neke od slika tako što ćemo uraditi dvoklik nad slikom. Verovatno će Vam se i desiti da slučajno pozovete Fireworks ili Photoshop u početku, jer ćete uraditi dvoklik umesto jednog. Osim dvoklika, možemo koristiti dugme Edit u donjem desnom uglu panela.

U svakom trenutku možemo sortirati prikaz po kolonama kao što bismo to uradili u folderima operativnog sistema.

 

Favorites u Assets panelu

Jedna od zgodnih opcija kojima raspolaže DW jeste mogućnost da neke slike izdvojimo u omiljene (engl. Favorites). Primetićemo da se u gornjem delu panela, na sredini, nalaze dva radio dugmeta: Site i Favorites.

Site opcija, koja je i izabrana u startu, prikazuje sve fajlove u okviru sajta. Opcija Favorites prikazuje samo one koji su označeni kao omiljeni. Naravno, Favorites lista je u startu prazna. 

 

Prikaz svih ili omiljenih Asseta

 

Bilo koji od fajlova može se označiti kao Favorite tako što ćemo uraditi desni klik nad željenom slikom i u meniju izabrati Add to Favorites ili označiti sliku levim klikom, a potom  izabrati dugme Add to Favorites iz donjeg desnog ugla panela (ikonica je predstavljena kao znak + i traka). Takođe, u Files panelu, može se označiti jedna ili više slika i uz izbor Add to Image Favorites opcije iz desnog klik menija, dodati slika u omiljene.

U svakom slučaju, pojaviće nam se dijalog koji nas obaveštava da je fajl dodat u omiljene. Na istom dijalogu postoji sheck box kojim možemo isključiti njegovo buduće pojavljivanje, ali budite oprezni jer se može desiti da više puta dodamo isti fajl u omiljene, jer ćemo isključiti povratnu informaciju.

Dijalog dodavanja u omiljene

 

Važno je zapamtiti da DW ne kopira niti radi bilo šta drugo nad samim slikama, tj. fajlovima. On samo filtrira prikaz i izdvaja označene omiljene fajlove. U tom prikazu možemo promeniti nadimak slike (Nickname). Opet, samo ime fajla neće se promeniti.

Klikom na ikonicu u donjem desnom uglu New Favorites Folder ili izborom istoimene prečice iz menija koji se pojavljuje desnim klikom, možemo kreirati nove foldere u okviru omiljenih. Potom prevlačenjem fajlova, možemo ih razvrstavati u foldere, što olakšava organizaciju.

Prikaz omiljenih Asseta

 

Svim ovim pomenutim opcijama lako se mogu organizovati materijali u okviru sajta.

 

Dodavanje iz Asset panela

Bez obzira na to da li je aktivan prikaz svih fajlova ili samo omiljenih, možemo lako dodati sliku na stranicu. Jedan način je da postavimo kursor na stranici gde želimo sliku, a potom selektujemo željenu u Asset panelu i izaberemo Insert dugme u donjem levom uglu. Drugi način je da prevučemo sliku držeći levi taster miša iz Asset panela direktno na stranicu.

Nakon toga, bez obzira na to kako smo dodali, DW će prikazati dijalog koji će nam tražiti neke od informacija u vezi sa slikom.

Image Accessibility podešavanja

 

U tom dijalogu se pojavljuju dva polja. Prvo polje, Alternate text, je bitnije jer u njemu unosimo alt tekst slike (alternativni tekst). On ima više upotreba, ali osnovno je da ponudi alternativu ukoliko se slika iz bilo kog razloga ne učita. U tom slučaju, prikazaće se pomenuti tekst u okviru predviđenim za sliku. Ipak, ne bi trebalo bukvalno opisivati sliku, već pružiti info o njenoj svrsi. Na primer, alt tekst slike upozorenja ne bi trebalo da bude "Žuti trougao sa crnim okvirom i znakom uzvika", već "Upozorenje!" i slično. Alt tekst koriste i pretraživači poput Googla, radi indeksiranja. Po standardima W3C, alt tekst je obavezan na slici, ali i pored toga, dobra je praksa uvek upisivati smislen alt tekst. Alt tekst možemo dodati i kasnije u properties opcijama, ali preporuka je da se to čini u startu.

Drugo polje na dijalogu je Long description. Ono se ređe koristi i nije obavezno. U njemu možemo dati link ka detaljnijem objašnjenju slike, pogotovo ako se radi o grafikonima i tabelama ili o drugim komplikovanijim elementima.

Važno je da zapamtite da, ukoliko u ovom dijalogu izaberemo Cancel, nećemo otkazati postavljanje slike, već ćemo samo otkazati unos ovih vrednosti. Slika će ipak biti postavljena na stranicu, ali bez alt teksta.

 

Ostali načini dodavanja slika

Malopre pomenuti Asset panel nije jedini način za unos slika na stranicu.

Možemo jednostavno prevući sliku iz Files panela na stranicu, kao što smo to učinili iz Assets panela. Odnosno, možemo izabrati iz padajućeg menija Insert > Image ili iz Insert panela opciju Image (Common grupa).

Insert image iz padajućeg menija i Insert panela

 

Pošto izaberemo jednu od ove dve varijante, pojaviće nam se sledeći dijalog:

Izbor slike

 

U ovom dijalogu, koji je prilično sličan standardnom win dijalogu za izbor fajlova, možemo izbarati željenu sliku. Dok se u Assets panelu pojavljuju samo materijali koji su u okviru Root foldera, dotle se u ovom dijalogu može izabrati bilo koji dostupan fajl, bez obzira na to gde se nalazi. Ali baš oko tih detalja moramo biti veoma oprezni.

Podsetićemo se, sam HTML ne sadrži i ne uključuje druge materijale, poput slika. To znači da kada otvorimo HTML stranu koja prikazuje i slike, same slike nisu u .html fajlu, već ih on učitava iz posebnog jpg fajla ili fajlova (png, gif..). Analogno tome, ako je neka stranica kreirana za galeriju i sadrži deset slika, svih deset slika (fajlova) moraju biti u okviru sajta ili na dostupnoj putanji.

Da pojasnimo na primeru – ako napravimo novi sajt u lokalu na putanji: D:/sites/DWsite i u Root folderu stranu index.html i ukoliko postavimo nekoliko slika, a sami fajlovi se nalaze u podfolderu images (D:/sites/DWsite/images), to bi značilo da su putanje do slika tipa: images/slika1.jpg. Kada bi takav Root postavili na server, slike bi se normalno prikazivale jer su na istoj putanji u odnosu na HTML.

Sa druge strane, u istoj situaciji, ukoliko smo slike ostavili u MyDocuments ili nekom drugom folderu i pri tom ih linkovali preko putanja, npr. C:/users/admin/Documents/MojSajt/images/slika1.jpg, sajt će raditi normalno na lokalu (Vašem računaru), ali pošto postavimo Root folder na net – neće. HTML će i dalje na istoj putanji tražiti slike, a sa sigurnošću se može tvrditi da je na njoj neće naći jer na serveru ne postoji C, niti mydocuments.

Da rezimiramo: svi fajlovi koji se koriste na sajtu moraju biti u okviru Root foldera, a koji ceo kopiramo na server prilikom postavljanja.

 

Podešavanje eksternih editora

Kako je pomenuto ranije, može se direktno pozvati Photoshop, Fireworks ili neki treći program za izmenu slika, direktno iz Dreamweavera. Postoji više načina, ali je najlakši dvoklikom na samu sliku u Files, odnosno Assets panelu.

Podešavanje koji program otvara koji format možemo izvršiti u Preferences dijalogu, u kategoriji FileTypes/Editors. U levoj listi se nalaze ekstenzije fajlova, a u desnoj dodeljene eksterne aplikacije. U startu su za slike podešeni Photoshop i Fireworks, pod uslovom da su instalirani na računaru. Možemo selektovati aplikaciju iz liste i izabrati opciju Make Primary. Tako podešavamo da se ta aplikacija otvara posle dvoklika za tu ekstenziju. Takođe, ukoliko aplikacija nije na listi (npr. Gimp), možemo je dodati preko + ikonice i ukazivanjem na njen .exe fajl.

 

Podešavanje default editora

 

Integracija sa Photoshopom

DW može učitati i koristiti psd fajlove koje smo kreirali u Photoshopu. U tom slučaju DW učitava psd, a kreira jpg (ili drugi kompatibilan format). Tako dobijamo dva fajla koja su povezana. Ukoliko kasnije promenimo radni, psd fajl može se odmah izmeniti i jpg fajl koji prikazujemo na stranici, odnosno svuda na sajtu.

Ovakve fajlove uvozimo kao i ranije pomenute slike, pomoću Insert > Image iz padajućeg menija ili iz Insert panela. Ipak, ukoliko izaberemo psd fajl umesto obične jpg/gif/png slike, što smo ranije činili, pojaviće se dijalog poput ovog koji vidimo na sledećoj slici:

 

Podešavanje psd slike prilikom importa

 

U ovom dijalogu možemo podesiti u kom formatu ćemo čuvati sliku, koji kvalitet želimo itd. Podešavanja su veoma slična Save for Web & Devices koji nalazimo u Photoshopu. U desnom delu, iznad prikaza same slike, vidimo kolika će biti veličina fajla. Ispod prikaza se nalaze opcije za Zoom i razne promene prikaza. Na drugom, File tabu ovog dijaloga možemo skalirati i iseći deo slike ukoliko želimo.

Pošto potvrdimo, DW će upitati gde da sačuva novu sliku. Svakako ćemo izabrati poziciju unutar Root foldera, preporučeno unutar Images podfoldera. Slika će dobiti malu ikonicu u levom gornjem uglu, a na Properties panelu dok je selektovana slika na strani videćemo putanju do slike (Src polje) ali i putanju do originalnog, radnog psd fajla (Original polje) jer su ta dva fajla sada povezana.

Properties za unetu psd sliku

 

Ukoliko pomerimo psd fajl, promenimo mu ime ili na bilo koji drugi način narušimo sinhronizaciju sa njim, ikonica će dobiti znak upozorenja.

U Properties panelu postoji dugme Edit (sa ikonicom Photoshopa) kojim možemo izmeniti sliku u Photoshopu. Ukoliko u bilo kom trenutku izmenimo originalni psd fajl, ikonica na slici sa dve zelene strelice će se promeniti u ikonicu sa jednom zelenom i jednom crvenom, što označava da je potreban update. Tada možemo izabrati Update from Original bilo iz Properties panela ili iz menija koji pozivamo desnim klikom na sliku. Update se potom vrši na svim instancama te slike svuda na sajtu.

Ove ikonice se ne vide na prikazu stranice u browseru.

 

Info u levom gornjem uglu slike

 

Kopiranje direktno iz Photoshop dokumenta

Umesto da importujemo kompletan psd fajl, možemo kopirati ceo ili deo dokumenta iz Photoshopa i u Dreamweaveru nalepiti direktno na stranicu (Edit > Paste ili Ctrl+V). U tom slučaju, sva podešavanja će biti ista kao da smo uvezli fajl, ali sa jednom bitnom razlikom. Sama slika neće biti sinhronizovana sa originalnim psd fajlom. Neće se pojaviti ikonica na slici i DW nas neće upozoriti da li se originalna promenila i sl. Ipak, u Properties panelu će postojati informacija o lokaciji originala. Ukoliko želimo da zamenimo sliku na strani, u ovom slučaju možemo kopirati ponovo iz Photoshopa i uraditi Paste dok je slika na strani selektovana. Samo će doći do zamene.

 

Umetanje Placeholdera

Ponekad, dok kreiramo raspored stranice, nemamo na raspolaganju sve slike. U tom slučaju koristi se Image Placeholder. Kada kliknemo na Insert > Image Objects > Image Placeholder, otvoriće se sledeći dijalog:

Image Placeholder dijalog

 

  • Name - Ovde se upisuje ime Placeholdera. Ime koje upišemo ovde koristi se i za ID i za Name attribute <img> taga, pa ime mora početi slovom i ne sme sadržati razmake ili neki specijalni karakter. Ako ostavimo ovo polje prazno, Dreamweaver neće ubaciti ID atribut, a za Name atribut će upisati name="".
  • Width - Ovde unosimo širinu Placeholdera u pikselima. Default širina je 32px.
  • Height - Ovde unosimo visinu Placeholdera u pikselima. Default visina je 32px.
  • Color - Ova opcija unosi Inline CSS atribut za pozadinsku boju (Background-color). Namena ove opcije je da se istakne Placeholder ili da se utopi sa ostatkom sadržaja stranice. Možemo iskoristiti Color Picker za odabir boje ili jednostavno ukucati heksadecimalnu vrednost. Ako ne izaberemo boju, Dreamweaver neće kreirati Style Attribute, ali će u Design prikazu prikazati Placeholder u svetlosivoj boji.
  • Alternate text - Ovde unosimo tekst koji će ići u Alt atribut. Ako ne unesemo vrednost, Dreamweaver će prikazati alt="" u <img> tagu.

 

Image Placeholder u dizajn prikazu

 

Kada završimo i želimo da unesemo pravu sliku, možemo ili kreirati novi Image ili zameniti Placeholder već postojećom slikom dva načina, putem Properties Inspectora:

  • Kreiranje nove slike - Da bismo kreirali novu sliku, izabraćemo Create opciju. Ona pokreće samo Adobe Fireworks, ako je instaliran na računaru. Photoshop neće pokrenuti, iako je možda podešen kao default Image editor.
  • Zamena placeholdera - Kao i kod običnih slika, možemo ukucati putanju u Src polje ili povezati sliku prevlačenjem Point to File ikonice… Takođe možete i da kliknete na meticu pored src polja i da je povežete sa slikom u Files panelu.

 

Koji god način da izaberemo, DW će zameniti Placeholder novom slikom i automatski će preuzeti visinu i širinu novog fajla.

 

Properties Inspector dok je izabran Image Placeholder 

 

Integracija slike bez slike

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Slike 1
  • Slike 2
  • Slike 3