Izrada web stranica i SEO - lakše uz 10 odabranih dodataka za Google Chrome Ispis

Chrome proširenjaBilo da je izrada web stranica i SEO optimizacija stranica Vaš svakodnevni posao, ili samo želite u slobodno vrijeme popraviti svoju web stranicu ili blog, definitivno Vam treba slijedećih 10 proširenja (extensions) za Google Chrome web preglednika.


Poput našeg omiljenog (i najboljeg:-) web preglednika Firefoxa, i Google Chrome omogućuje proširenje svojih mogućnosti dodavanjem raznih proširenja (extensions). Ovdje smo izdvojili 10 najboljih proširenja namijenjenih web developerima. Osim njima, proširenja će dobro doći i svim entuzijastima koji povremeno imaju potrebu za popravkom izgleda svoje web stranice ili bloga, odnosno žele poboljšati rangiranje svoje stranice na Googlu. Navedena proširenja pretvaraju Google Chrome web preglednik u moćan alat za web dizajn i izradu web stranica, debagiranje te SEO optimizaciju web stranica.

Za početak - Developer tools

Developer tools (ili na hrvatskom "Alati za razvojne programere") i nisu klasično proširenje nego sastavni dio Google Chrome web preglednika (nije ih potrebno posebno instalirati). Ovdje ih navodimo jer je nevjerojatno veliki broj korisnika koji uopće još nisu čuli za njih. Alat se pokreće istovremenim pritiskom tipaka CTRL+SHIFT+I, a dostupan je i kroz izbornik Control -> Developer -> Developer Tools (Kontrole -> Razvojni programer -> Alati za razvojne programere).

developer tools

Developer tools od Chrome web preglednika, isto kao i ekstenzija Firebug od Firefoxa, stvara moćno razvojno web okruženje uz koje je web dizajn i izrada web stranica mnogo lakša. Pomoću ovog alata moguće je klikom na bilo koji element ili dio web stranice vidjeti programski kod (html kod) te pridruženi mu CSS (svojstva elementa, naslijeđena svojstva, izračunata svojstva, css layout i sl.), nadzirati veličinu i vrijeme učitavanja resursa od kojih se sastoji stranica (optimizacija brzine učitavanja stranice) te debagirati JavaScript programske skripte uključene u stranicu.

1. Web developer

Web Developer je proširenje nastalo (već pogađate) po uzoru na istoimenu ekstenziju za Firefox web preglednik. Ovo proširenje sadrži niz alata za pregled stranice te pregled raznih informacija o web stranici i njenih sastavnih dijelova (css, javascript, headers...). Neke od najkorisnijih mogućnosti su ravnalo za mjerenje veličine elemenata web stranice, resizer za testiranje izgleda web stranice na monitorima drugačije veličine, validacija ispravnosti programskog koda, debagiranje formi i još mnogo toga.

web developer

Preuzimanje proširenja Web Developer.

2. Pendule

Pendule je proširenje sličnih funkcionalnosti kao prethodno spomenuto proširenje Web Developer. Najkorisnije stvari su ravnalo za mjerenje veličina na web stranici, color picker za određivanje hex i rgb vrijednosti boje nekog elementa, validacija ispravnosti programskog koda, prikaz uključenih css i JavaScript skripti, prikaz izvornog i generiranog html koda i još dosta toga.

pendule

Preuzimanje proširenja pendule.

3. jQuery Shell

jQuery Shell proširenje omogućuje pokretanje JavaScript i jQuery komandi u kontekstu aktivne web stranice. Proširenje je prilično korisno prilikom izrade web stranice kada eksperimentirate sa JavaScriptom odnosno jQuerijem ili pak ako želite naučiti iste.

jQuery Shell

Preuzimanje proširenja jQuery Shell.

4. Lorem Ipsum Generator

Lorem Ipsum Generator je korisno proširenje za generiranje "Lorem Ipsum" teksta. U početnim fazama web dizajna i izrade web stranica često još nije poznat sadržaj teksta koji će se u završnici nalaziti na web stranicama. U toj situaciji na stranicu je potrebno postaviti neki probni, "bezvezni" tekst. U praksi se pokazalo da tzv. "Lorem Ipsum" tekst mnogo vjernije predočuje veličinu i raspored riječi uobičajenih prirodnih jezika nego da se jednostavno napiše nešto tipa "bla, bla, bla...".

Sam "Lorem Ipsum" tekst u grafičkoj se industriji upotrebljava još od 16. stoljeća. Tekst potječe iz Ciceronove knjige na latinskom "de Finibus Bonorum et Malorum" (eng. "The Extremes of Good and Evil") napisane 45 g.p.n.e.

lorem ipsum

Preuzimanje proširenja Lorem Ipsum.

5. Eye Dropper

Eye Dropper proširenje služi za određivanje hex ili rgb vrijednosti boje nekog elementa na web stranici. Iako je slična funkcionalnost već sadržana u Pendule proširenju, zgodno ju je imati i kao samostalno proširenje.

eye dropper

Preuzimanje proširenja Eye Dropper.

6. Color Pick

Color Pick još je jedno proširenje za dinamičko određivanje hex i rgb vrijednosti boje elemenata na web stranici. Iako iste funkcionalnosti kao i prethodno opisani Eye Dropper, ima malu prednost jer omogućuje precizno "nišanjenje". Proširenje obavezno morate instalirati ukoliko je dizajn web stranica ono što Vas zanima.

color pick

Preuzimanje proširenja Color Pick.

7. Webpage Screenshot

Webpage Screenshot je proširenje koje naprosto mora imati svatko tko se bavi web dizajnom i izradom web stranica. Proširenje omogućuje "hvatanje" slike cijele web stranice (a ne samo dijela stranice koji je trenutno vidljiv na ekranu). Nakon "hvatanja", slika se može snimiti na disk u png-formatu.

Bilo bi zgodno kada bi nakon "hvatanja" slike bilo moguće i osnovno uređivanje iste na način kao u Firefoxovoj ekstenziji FireShot, ali ne možemo odmah imati baš sve. Ipak je samo jedan Firefox :-)

webpage screenshot

Preuzimanje proširenja Webpage Screenshot.

8. PlainClothes

PlainClothes proširenje dobro dođe prilikom izrade web stranice i njene optimizacije za web tražilice (SEO). Proširenje omogućuje "privremeno uklanjanje" CSS-a i prikaz "gole" stranice. Osim kod SEO optimizacije, proširenje je korisno i kod čitanja napadno dizajniranih stranica. Takozvani "unstyling" stranice moguće je uključiti za određene web siteove (web domene) ili po potrebi klikom na ikonu s desne strane polja s adresom stranice (location bar).

PlainClothes

Preuzimanje proširenja PlainClothes.

9. Resolution Test

Resolution Test je korisno proširenje za testiranje kako će web stranice izgledati pri različitim rezolucijama monitora (različitim veličinama monitora). Proširenje mijenja veličinu Google Chrome web preglednika na predefinirane veličine, a moguće je dodati i svoje vlastite dimenzije. Iako se ista funkcionalnost nalazi i u sklopu već opisanog proširenja Web Developer, korisno ju je imati prilikom poslova web dizajna i izrade web stranica kao zasebno proširenje.

resolution test

Preuzimanje proširenja Resolution Test.

10. SEO Site Tools

SEO Site Tools proširenje namjenjeno je SEO optimizaciji web stranica. Proširenje za trenutno otvorenu web stranicu automatski prikuplja podatke o broju linkova na Yahoo-u, statistici prometa sa Alexa weba, Google cachu i Google PageRanku, broju indeksiranih stranica na Bingu i sl. Osim toga, prikazuju se i podaci o broju linkova na društvenim mrežama Twitter, Facebook, Digg, Delicious i Reddit. Proširenje pokazuje bitne SEO elemente web stranice poput meta-tagova, title taga, broja linkova i sl. Uz to tu su i informacije o web serveru na kojem su stranice smještene kao i savjeti za poboljšanje odnosno SEO optimizaciju web stranice.

seo site tools

Preuzimanje proširenja SEO Site Tools.