{"id":331,"date":"2020-02-28T22:14:25","date_gmt":"2020-02-28T20:14:25","guid":{"rendered":"http:\/\/skolarbbos.net\/?p=331"},"modified":"2020-03-08T15:05:41","modified_gmt":"2020-03-08T13:05:41","slug":"rad-sa-slikama","status":"publish","type":"post","link":"https:\/\/skolarbbos.net\/?p=331","title":{"rendered":"Rad sa slikama"},"content":{"rendered":"<p>Na modernim sajtovima slike su neizostavni deo. Ka\u017ee se da slika govori vi\u0161e od hiljadu re\u010di, \u0161to je svakako va\u017eno za web dizajn. Davno je pro\u0161lo vreme jednostavnih sajtova.<\/p>\n<p>Pre nego \u0161to objasnimo unos i postavljanje samih slika na na\u0161e HTML stranice, moramo se zadr\u017eati i pojasniti neke detalje. Svaka slika koju \u017eelimo da postavimo mora biti pripremljena za net. Nikako nije dobra praksa kori\u0161\u0107enje fotografija direktno sa digitalnog aparata, niti preuzimanje sa neta i direktno prebacivanje na na\u0161e stranice.<\/p>\n<p><strong>Slika mora biti u odgovaraju\u0107em formatu<\/strong><\/p>\n<p>Postoje samo tri formata slika koje danas mo\u017eemo koristiti na web stranicama. To su <strong>JPG<\/strong>, <strong>GIF<\/strong> i <strong>PNG<\/strong>.<\/p>\n<p><strong>JPG format<\/strong> (Joint Photographic Experts Group) koristi .jpg ili .jpeg ekstenziju. Ovaj format ne podr\u017eava providnost (engl. Transparency) niti animaciju, ali je odli\u010dan za komprimovanje fotografija jer podr\u017eava milione boja. U programima za obradu slika mo\u017eemo izabrati koliku degradaciju kvaliteta \u0107emo tolerisati u zamenu za manju veli\u010dinu fajla. Svaki put prilikom snimanja gube se odre\u0111ene informacije, te je strogo preporu\u010deno da \u010duvamo originale posebno.<\/p>\n<p><strong>GIF<\/strong> (Graphic Interchange Format) je ograni\u010den na 256 boja. GIF-ovi su odli\u010dni za tehni\u010dke crte\u017ee i za male slike (ikonice, thumb sli\u010dice i sl.). GIF-ovi mogu da pamte 2,4,16&#8230; boja, pa se mo\u017ee dosta u\u0161tedeti na veli\u010dini prilikom kreiranja fajlova. GIF fajlovi se kompresuju horizontalno, tj. ukoliko na GIF slici piksel ima malu varijaciju boja u horizontalnom pravcu, mnogo lak\u0161e se transformi\u0161e u manju veli\u010dinu. GIF format podr\u017eava providnost (uz dosta ograni\u010denja) i animaciju, \u0161to zna\u010di da mo\u017eemo kreirati efekat kretanja i sl. U po\u010detnim fazama razvoja internetaGIF animacije su stalno kori\u0161\u0107ene, \u010dak i kada nisu bile potrebne. Danas se sve manje koriste.<\/p>\n<p><strong>PNG<\/strong> (Portable Network Graphic) je noviji format podr\u017ean od strane svih aktuelnih web \u010dita\u010da, 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:<\/p>\n<ul>\n<li>PNG-8, sadr\u017ei 8-bitnu informaciju o bojama (sli\u010dno GIF-u).<\/li>\n<li>PNG-24, sadr\u017ei 24-bitnu informaciju o bojama (kombinuje najbolje od GIF i JPG).<\/li>\n<\/ul>\n<p>PNG-8 ne podr\u017eava animaciju, ali podr\u017eava transparentnost i to mnogo bolje nego GIF, dok PNG-24 podr\u017eava jo\u0161 bolju transparentnost i kvalitet slike bolji nego JPG. Ipak, PNG fajlovi su dosta ve\u0107i, a i raniji browseri se ne snalaze najbolje sa njim (npr. IE6 ne podr\u017eava transparentni PNG).<\/p>\n<p>Kada bismo rezimirali sva tri tipa, mo\u017eemo do\u0107i do ovog zaklju\u010dka:<\/p>\n<ul>\n<li><strong>JPG<\/strong> &#8211; najbolji za fotografije i slike sa puno detalja.<\/li>\n<li><strong>GIF<\/strong> &#8211; najbolji za ikonice i male sli\u010dice.<\/li>\n<li><strong>PNG<\/strong> &#8211; kombinuje najbolje od GIF i PNG, ali na u\u0161trb veli\u010dine fajlova. Nije podr\u017ean od ranijih browsera, mada to polako postaje nebitno, jer se IE6 sve manje koristi.<\/li>\n<\/ul>\n<p><strong>Slika mora biti u odgovaraju\u0107oj rezoluciji i dimenzijama<\/strong><\/p>\n<p>Sav prikaz sajtova se vr\u0161i na monitorima ra\u010dunara i drugih digitalnih ure\u0111aja. Prikaz na monitorima je sa\u010dinjen od sitnih ta\u010daka koji se nazivaju pikseli<a href=\"#_ftn1\" name=\"_ftnref1\">[1]<\/a> (engl. pixels). Svaka slika je tako\u0111e sa\u010dinjena od piksela i termin rezolucijaozna\u010dava broj piksela (ta\u010daka) po in\u010du (dots per inch \u2013 dpi). Standardna rezolucija u kojoj ve\u0107ina monitora prikazuje sajtove je <strong>72dpii<\/strong> uvek treba snimati slike u toj rezoluciji.<\/p>\n<p>Pored rezolucije, moramo posebno voditi ra\u010duna i o dimenzijama, tj. o \u0161irini (engl. <em>Width<\/em>) i visini (engl. <em>Height<\/em>) slika. Dimenzije moraju biti iste one u kojima \u0107e se prikazati slika na stranici.<\/p>\n<p>Ukoliko su dimenzije i\/ili rezolucija druga\u010dije u samoj slici od prikaza na stranici, do\u0107i \u0107e do degradacije slika i veoma lo\u0161eg prikaza. Zato je bitno zapamtiti da je potrebno <strong>slike uvek prvo pripremiti u Adobe Photoshopu ili sli\u010dnom alatu i tek onda importovati u HTML dokument.<\/strong><\/p>\n<p><strong>Za svaku sliku moramo imati pravo da je upotrebimo<\/strong><\/p>\n<p>Iako ovo nije tehni\u010dki deo i ne spada direktno u tematiku ovog predavanje, ovo je veoma va\u017ean aspekt koji se \u010desto zanemaruje. Svaka slika podle\u017ee copyright<a href=\"#_ftn2\" name=\"_ftnref2\">[2]<\/a> pravilima i uvek je neko autor. Obavezno proverite pod kojim uslovima i pod kojom licencom je neko delo objavljeno i da li imate pravo da ga iskoristite. \u010cesta po\u010detni\u010dka gre\u0161ka je otvaranje Google images pretrage i direktno kopiranje slika, \u0161to je u ve\u0107ini slu\u010dajeva povreda ne\u010dijeg autorskog prava. Dakle, uvek proverite licencu slike i da li je dozvoljeno koristiti je. Sa druge strane postoje specijalizovani sajtovi za distribuciju slika, kao \u0161to su istockphoto, fotolia, gettyimages, sxc.hu i mnogi drugi. Ve\u0107ina slika se napla\u0107uje, ali mo\u017eete prona\u0107i i besplatne ukoliko je bud\u017eet ograni\u010den.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-337 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slike101.jpg\" alt=\"slike101\" width=\"500\" height=\"375\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slike101.jpg 500w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slike101-300x225.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><strong>Organizovanje strukture fajlova<\/strong><\/p>\n<p>Za razliku od mnogih fajlova koji se danas koriste, HTML stranice ne \u010duvaju direktno same fajlove slika u html fajlu. Na primer, ako u MS Word alatu unesemo odre\u0111eni tekst i par slika, po snimanju dobijamo jedan doc fajl. Ako taj jedan doc fajl po\u0161aljemo prijatelju i on ga otvori na svom ra\u010dunaru, sav tekst i slike \u0107e biti prisutne, dakle, u\u010ditavaju se iz tog jednog fajla. Nasuprot tome, ako u HTML dokument unesemo tekst i par slika, po snimanju dobijamo HTML fajl, ali u kome slike nisu ugra\u0111ene. Ako bi sada samo taj HTML fajl poslali prijatelju, na njegovom ra\u010dunaru, prilikom pokretanja fajla, video bi se samo tekst i prazan prostor, bez slika, a na mestima gde su one bile postavljene. HTML fajl je sa\u010duvao pozicije slika, njihove dimenzije i poku\u0161ava da ih prika\u017ee, ali ih ne nalazi jer su one van HTML fajla i nismo ih poslali.<\/p>\n<p>Kao linkove, tako i slike mo\u017eemo pozvati radi prikaza ili putem apsolutne ili putem relativne putanje, ali ih uvek treba postavljati preko relativnih putanja.<\/p>\n<p><strong>Ukoliko sve slike postavimo unutar root foldera sajta i pozivamo ih putem relativnih putanja, ne mo\u017ee se desiti da neku sliku slu\u010dajno \u201eizgubimo\u201c prilikom slanja ili postavljanja sajta<\/strong>. Rekli smo, kopiramo uvek ceo root folder, a po\u0161to su putanje relativne, sve \u0107e biti ok.<\/p>\n<p><strong>Dodavanje slika<\/strong><\/p>\n<p>Radi dodavanja slika na HTML stranicu, koristimo &lt;img&gt; tag. Pomenuti tag je samozatvaraju\u0107i, odnosno nema po\u010detak i kraj, ali mora sadr\u017eati slede\u0107a dva atributa:<\/p>\n<ul>\n<li><strong>Src<\/strong> \u2013 ovaj atribut ozna\u010dava URL odakle se poziva slika (slika je uvek van HTML fajla)<\/li>\n<li><strong>Alt<\/strong> \u2013 ovaj atribut defini\u0161e tekst koji \u0107e se prikazati posetiocu sajta ukoliko se, iz bilo kog razloga, nije prikazala slika. U tom slu\u010daju, prikaza\u0107e se pomenuti tekst u okviru predvi\u0111enim za sliku. Ipak, ne bi trebalo bukvalno opisivati sliku, ve\u0107 pru\u017eiti info o njenoj svrsi. Na primer, alt tekst slike upozorenja ne bi trebalo da bude &#8220;\u017duti trougao sa crnim okvirom i znakom uzvika&#8221;, ve\u0107 &#8220;Upozorenje!&#8221; i sli\u010dno. Alt tekst koriste i pretra\u017eiva\u010di poput Googla radi indeksiranja. Po standardima W3C <strong>alt tekst je obavezan<\/strong> na slici.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-334 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika102.jpg\" alt=\"slika102\" width=\"570\" height=\"88\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika102.jpg 570w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika102-300x46.jpg 300w\" sizes=\"auto, (max-width: 570px) 100vw, 570px\" \/><\/p>\n<p>Ovaj tag u primeru \u0107e pozvati sliku<em> image.jpg <\/em>(A) iz istog foldera u kome se nalazi i sam html fajl. Ukoliko se slika ne prika\u017ee, u praznom okviru, ispisa\u0107e se <em>Alt tekst<\/em> (B)<\/p>\n<p><strong>Opcioni atributi nad img tagom:<\/strong><\/p>\n<ul>\n<li><strong>Title<\/strong> \u2013 Mo\u017eemo koristiti ovaj atribut ako \u017eelimo da unesemo jo\u0161 informacija o slici. Ve\u0107ina modernih browsera prikazuje ovaj tekst kao tooltip<a href=\"#_ftn3\" name=\"_ftnref3\">[3]<\/a> kada se mi\u0161em pre\u0111e preko slike.<\/li>\n<li><strong>Width<\/strong> i <strong>Height<\/strong> \u2013 \u0160irina i visina slike u pikselima. Ukoliko nisu postavljeni ovi atributi, browser \u0107e iz samog fajla slike o\u010ditati vrednosti. Ukoliko se unose, ovi atributi trebaju oslikavati realno stanje, odnosno, ako imamo sliku logo.png koja je 120px (piksela) visoka i 300px \u0161iroka, img tag u HTML k\u00f4du bi mogao da izgleda:<\/li>\n<\/ul>\n<p><span style=\"color: #ff0000;\"><em>&lt;img src=\u201dlogo.png\u201d alt=\u201dIme slike\u201d width=\u201d300\u201dheight=\u201d120\u201d \/&gt;<\/em><\/span><\/p>\n<p>Ukoliko se pitate, redosled atributa u jednom HTML tagu nije bitan. To se odnosi i na img, ali i na ostale tagove.<\/p>\n<ul>\n<li><strong>Align<\/strong> \u2013 koristio se za pozicioniranje slika u odnosu na okru\u017euju\u0107e elemente. Upotrebljeno je pro\u0161lo vreme u prethodnoj re\u010denici jer je ovaj atribut je zabranjen u HTML5, ali i u ranijim verzijama HTML\/xHTML jezika, umesto njega, preporu\u010dena je upotreba CSS opisa za pozicioniranje.Po\u0161to su slike inline elementi, ukoliko ih postavimo unutar paragrafa, pona\u0161a\u0107e se kao karakter teksta, po default pode\u0161avanjima. Standardne vrednosti ovog atributa su <em>bottom<\/em>, <em>left<\/em>, <em>middle<\/em>, <em>right<\/em> i <em>top<\/em> uz jo\u0161 neke dodatne. Njihovo pona\u0161anje vidimo na slici ispod:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-335 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika103.jpg\" alt=\"slika103\" width=\"474\" height=\"606\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika103.jpg 474w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika103-235x300.jpg 235w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/p>\n<p>Slike, odnosno img tagovi u HTML jeziku su takozvani inline elementi. O inline i block elementima \u0107emo govoriti detaljnije u nekoj od narednih lekcija. Ono \u0161to je bitno za sada je da <strong>block elementi uvek po\u010dinju u novom redu<\/strong>, dok se <strong>inline elementi pona\u0161aju kao slovo teksta, po\u010dinju u nastavku prethodnog elementa<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-336 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika104.jpg\" alt=\"slika104\" width=\"394\" height=\"194\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika104.jpg 394w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/slika104-300x148.jpg 300w\" sizes=\"auto, (max-width: 394px) 100vw, 394px\" \/><\/p>\n<p><a href=\"#_ftnref1\" name=\"_ftn1\">[1]<\/a> Najmanja, nedeljiva ta\u010dka na ekranu monitora ili sli\u010dnog ure\u0111aja. Mo\u017ee prikazati jednu boju. Kombinacijom mno\u0161tva piksela dobijamo sliku.<\/p>\n<p><a href=\"#_ftnref2\" name=\"_ftn2\">[2]<\/a> (autorsko pravo) je pravo koje u\u017eivaju stvaraoci (autori) knji\u017eevnih, nau\u010dnih i umetni\u010dkih dela (autorska dela), a koje im daje isklju\u010divo pravo kori\u0161\u0107enja ili odobravanja drugima kori\u0161\u0107enja svog dela, a uklju\u010duje i sistem za\u0161tite tih prava. U objektivnom smislu, ono je sistem pravnih pravila i na\u010dela koje reguli\u0161u prava koje zakon daje autoru dela.<\/p>\n<p><a href=\"#_ftnref3\" name=\"_ftn3\">[3]<\/a> Tooltip je \u010dest element grafi\u010dkih interfejsa. Koristi se zajedno sa kursorom mi\u0161a. Kada korisnik postavi kursor iznad odre\u0111enog elementa, bez klika na element, tooltip se mo\u017ee pojaviti sa informacijama o elementu iznad koga je kursor. Tooltip ne postoji na mobilnim i touch ure\u0111ajima jer nema kursora.<\/p>\n","protected":false},"excerpt":{"rendered":"Na modernim sajtovima slike su neizostavni deo. Ka\u017ee se da slika govori<a class=\"moretag\" href=\"https:\/\/skolarbbos.net\/?p=331\"> &lt;b&gt;[Nastavi sa \u010ditanjem...]&lt;\/b&gt;<\/a>","protected":false},"author":1,"featured_media":333,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=331"}],"version-history":[{"count":3,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/331\/revisions"}],"predecessor-version":[{"id":1505,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/331\/revisions\/1505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/media\/333"}],"wp:attachment":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}