Google sve više otežava dobijanje i zadržavanje dobrog rangiranja u rezultatima pretraga, i sa nedavnom neprijatnim iznenađenjem u vidu takozvanog “May Day” update-a, verovatno su mnogi webmasteri otkrili da su njihove dobro rangirane stranice nestale iz pretrage i da sada čame negde blizu pedesete stranice u rezultatima Google pretraga, ako imate sreće.
Ne samo što su “May Day” promene zvanično potvrđene kao novi algoritam za rangiranje stranica, već je Google objavio da pretraga pomoću sinonima utiče na više od 70% rezultata pretrage, što praktično odbacuje većinu web stranica iz pretrage ukoliko sajt nije odgovarajuće strukturiran i fokusiran na temu kojom se bavi.
Dobra vest je da ova promena algoritma za pretraživanje nije pogodila sajtove koji su koristili Silos strukturu (eng. theming, siloing). Silos struktura predstavlja metodu za bolje rangiranje stranica pomoću sinonima i osigurava da GoogleBot pravilno prepozna Vaš sajt.
Ovo nažalost ne rešava problem ako koristite WordPress. Činjenica da sajtovi funkcionišu pomoću baza podataka, i da stranice nisu strukturirane kao statički sadržaji, korisnicima WordPress-a je učinila je skoro nemogućim kreiranje Silos strukture. Kada Google spider poseti web sajt koji koristi CMS, on ne vidi strukturu sajta kroz kategorije ili postove sortirane po kategorijama, kao što je mi vidimo, već prati postove hronološki, po redosledu kojim su oni pisani. Silo plugin međusobno linkuje postove sortirane po kategorijama koristeći Nofollow linkove i omogućava pretraživaču da vidi organizaciju sadržaja na sajtu onako kako Vi želite i da lakše utvrdi relevantnost sadržaja u odnosu na upite posetilaca.
Namena WordPress Silo Plugin-a je da automatski konvertuje WordPress sajt u Silos strukturu. Ovo u praksi znači da, kada GoogleBot poseti Vaš sajt, može da prati putanju kroz kategorije i postove, što osigurava da će jasno prepoznati tematiku i ključne reči Vaše web stranice. Dovoljno je instalirati i aktivirati plugin, nema potrebe za pisanjem dodatnog koda ili dodavanjem novih ključnih reči u postojeće web stranice.
Više detalja o ovom plugin-u možete pronaći na sajtu autora.
Firebug pruža dosta opcija za fino podešavanje web stranica i efikasno ispravljanje grešaka bez sati, pa čak i dana, provedenih u kreiranju i proveravanju koda. Od osnovnog HTML, preko CSS i JavaScript koda, mnogo različitih elemenata i jezika se kombinuje da bi se postigao željeni efekat na web stranici. Zavisno od toga da li radite sa HTML, CSS ili JavaScript kodim na web stranici, imate na raspolaganju nekoliko panela sa različitim funkcijama.
1. Console Panel
Ovaj panel sadrži komandnu liniju JavaScript-a koju možete koristiti za pronalaženje i ispravljanje grešaka u JavaScript kodu. Moguć je unos JavaScipt komandi posle znaka “>>>” u dnu panela. Takođe, možete odrediti u kom trenutku ćete zaustaviti izvršavanje skripte i pregledati kod, red po red ili po segmentima.
Komandna linija u dnu kartice Console, koja počinje sa “>>>” prihvata JavaScript komande. Rezultati ili JavaScript komanda ako postoji, se prikazuju u konzoli. Komandna linija JavaScript-a je veoma moćan alat za Firebug. Ova funkcija Vam omogućava izvršavanje JavaScript dokumenata i komandi “u letu”, bez ponovnog učitavanja web stranice što praktično znači da ćete ispravnost koda i rezultat izvršavanja skripte moći da proverite u komandnoj liniji, pre nego što ga implementirate u Vašu web stranicu.
JavaScript Profiler izvešta o vremenu potrebnom za izvršavanje vaših JavaScript funkcija, tako da možete ispratiti karakteristike JavaScript komponenti koje usporavaju Vaše stranice ili JavaScript aplikacije. Da biste videli Profiler, potrebno je da bude aktivna kartica Console, a zatim kliknite na opciju “Profile” u podmeniju (redosled opcija je “Clear | Persist | Profile”). Profajler prikazuje listu svih pozvanih funkcija i vreme potrebno za pozivanje svake funkcije. Možete izabrati funkciju čiji profil želite da prikažete dodavanjem console.profile ([title]) na početak željenog odeljka, i console.profileEnd () na kraju.
2. HTML Panel
Firebug olakšava pozicioniranje i definisanje dimenzija pojedinih elemenata stranice, kao što su visina, širina ili margine i omogućava da odmah vidite kako se pojedine izmene odražavaju na izgled stranice. Svi HTML, CSS i JavaScript objekti internet stranice mogu se menjati sa jednim ili dvostrukim klikom miša. Čim počnete da kucate, promene su odmah vidljive u prozoru browser-a što pruža instant povratnu informaciju.
Pored toga što postojeće stilove stranice možete pregledati i modifikovati, Firebug Vam omogućava da, na kartici Style u HTML panelu, proverite “kaskadu” stranice. Ovo u praksi znači da možete veoma lako otkriti zašto se stilovi koje ste definisali za određeni element ne primenjuju kako ste zamislili. Sva podešavanja stila koja se odnose na određeni element, biće prikazana po hijerarhiji. Definicije stila koje su “pregažene” podešavanjima stila nekog roditeljskog elementa i koji se neće primenjivati na stranici, biće prikazane precrtane.
Izmene numeričkih vrednosti
Jedna od najboljih komponenti ove funkcije jeste otkrivanje tačnog pozicioniranja i definisanih vrednosti padding i margin atributa. Jednostavno kliknite na numeričku vrednost koju želite da promenite i unesite novu vrednost preko tastature, ili koristeći strelice na gore i na dole na tastaturi povećajte ili smanjite vrednost za jedan. Pomoću tastera Tab možete prelaziti na naredne vrednosti polja za unos.
Layout panel: Procena visine, širine, padding-a, bordera i margina
Kada koristite Inspect element opciju, levi panel prikazuje HTML kod, dok se u desnom panelu prikazuje CSS. Pored CSS oznake, u vrhu desnog panela nalazi se kartica Layout. Ova kartica ilustruje CSS layout koji se odnosi na izabrani element. Da biste videli visinu ili širinu bilo kog drugog elementa na stranici, jednostavno izaberite Inspect element, dok je ovaj prozor otvoren i pređite mišem preko elemenata web stranice koje želite da pregledate.
U meniju kome pristupate preko strelice pored naziva HTML panela, možete uključiti/isključiti vidljivost određenih elemenata stranice. Između ostalog možete definisati da li će Firebug, ukoliko je tekst u okviru nekog elementa (na primer, <p> tagova) dugačak, skratiti ovaj tekst i dodati “…” unutar teksta ili na kraj liste atributa, ili će prikazivati ceo tekst, da li će komentari upisani unutar <!– i –> tagova u kodu stranice biti vidljivi ili ne, i slično.
Logovi događaja
Da biste omogućili logovanje događaja, jednostavno kliknite desnim tasterom miša unutar HTML panela i izaberite opciju Log Events. Lista događaja vezanih za izabrani element će se prikazati u panelu Console. Logovi registruju događaje kao što su – mousemove, mouseout, mouseover, select, click, dblclick, keypress.. vezane za prelaženje mišem preko izabranog elementa stranice, klik ili dvostruki klik mišem, upis teksta u polja za unos i slično.
3. CSS Panel
CSS panel Vam omogućava da podesite CSS stilove stranice prema svojim potrebama. Možete koristiti ovaj panel za pregled ili editovanje CSS dokumenata “u letu” i videti odmah rezultat napravljenih promena na dokumentu koji je trenutno aktivan u browser-u. Ovaj panel se najčešće koristi za podešavanje piksela, pozicije elemenata, izgleda i stila elemenata unutar HTML dokumenta. Takođe je korisno ako želite da vidite elemente čije su vrednosti postavljene na none, ili invisible.
CSS inspektor omogućava prikaz svih učitanih stilova stranica i promene stilova “u letu”. U podmeniju ovog panela, pored opcije Edit, nalazi se lista učitanih stilova stranice, iz koje možete izabrati jedan da biste ga pregledali preko panela.
4. Script Panel
U Script panelu se prikazuju JavaScript fajlovi i dokument iz kojeg se oni pozivaju. U podmeniju ovog panela, desno od ikonice Break On Next možete videti listu JavaScript fajlova i izabrati jedan koji želite da pregledate preko panela, postaviti Breakpoints i uslove pod kojima se pojavljuju tačke prekida. Ovaj panel Vam omogućava otklanjanje grešaka unutar JavaScript koda, direktno u browser-u.
5. DOM Panel
HTML elementi su takođe poznati kao DOM elementi. DOM (Document Model Object)predstavlja hijerarhiju HTML elemenata i funkcija. DOM panel prikazuje sve elemente stranice, njihove karakteristike i povezanost između njih. Takođe, prikazuje sve JavaScript promenljive i njihove vrednosti.
DOM inspektor pruža informacije o svim svojstvima svih objekata u dokumentu. Njegova možda najbolja karakteristika je da promene, tokom dinamičkog update-a Vaše web stranice, neće uticati na promenu koda stranice, vidljivog u View source opciji browser-a, već će biti vidljive u ostalim Firebug panelima.
Opcija CSS u podmeniju DOM inspektora prikazuje sva važeća CSS pravila za elemente web stranice, uključujući i osobine koje su nasledili od roditeljskih elemenata i omogućava Vam da uključite/isključite ili izmenite pojedinačna podešavanja stila i dodate CSS pravila.
6. Net Panel
Net panel prikazuje sve upite koje browser pravi prilikom učitavanja stranice, vreme potrebno svakom resursu za učitavanje, HTTP zahtevana zaglavlja i odgovore koje server šalje za svaki resurs. Opcija XHR koja se nalazi u podmeniju ovog panela je korisna za otklanjanje grešaka u AJAX kodu.
Provera brzine učitavanja stranice
Na kartici Net grafički je prikazano vreme odziva svih elemenata web stranice prilikom njenog učitavanja u browser. Monitoring mreže mora biti uključen kako bi Net panel radio, ali je po podrazumevanim podešavanjima ta opcija već uključena (opcije u padajućem meniju kartice Net vam dozvoljavaju da ovu opciju naknadno isključite ili uključite prema sopstvenim potrebama).
Ovo je zgodan način za testiranje (i dokazivanje) da se postavljanjem vašeg JavaScript koda u footer web stranice, posebno strana koje sadrže pretežno JavaScript, značajno poboljšava vreme preuzimanja stranice sa Interneta. Ukupno vreme preuzimanja će biti isto, ali pošto pretraživači, kada naiđu na skripte, zaustavljaju učitavanje stranice dok ne preuzmu skriptu, stranica će izgledati kao da je potrebno manje vremena za učitavanje, što će se pozitivnije odraziti na posetioce web stranice.
Levim klikom na znak plus sa leve strane imena fajla prikazuje se HTTP zaglavlje za svaku datoteku koja je skinuta.
Upotrebu HTML i CSS panela u praksi, možete videti na sledećem Yahoo! Video tutorijalu za Firebug:
I pored velikog broja pozitivnih strana koje ovaj Mozilla plugin poseduje, Firebug spada u problematične ekstenzije i može praviti probleme sa prekomernim korišćenjem procesora i RAM memorije Vašeg računara. Zbog toga, ukoliko uočite da Vaš računar usporava kada surfujete, proverite CPU i Memory Usage preko Task Manager-a i deaktivirajte Firebug. Generalna preporuka je da Firebug uključite samo kada Vam je potreban za kodiranje i dizajn web strana, i da ga deaktivirate dok surfujete netom.
Listu svih problematičnih ekstenzija možete pregledati u MozillaZine bazi znanja koja sadrži dokumentaciju vezanu za sve Mozilla proizvode.
Firebug je besplatna Open Source alatka dostupna kao plugin za Firefox koja omogućava pronalaženje i otklanjanje grešaka u HTML, CSS i JavaScript kodu. Tutorijal je namenjen svima koji se na bilo koji način bave web dizajnom i razvojem Internet stranica. Za praćenje i razumevanje tutorijala potrebno je da imate osnovno znanje HTML, CSS i JavaScript koda i instaliran Firebug. U trenutku pisanja ovog tutorijala poslednja stabilna verzija je 1.5 i možete je preuzeti sa zvaničnog sajta proizvođača.
Šta Firebug nije?
Firebug nije editor koda. To praktično znači da nema mogućnost trajnog čuvanja izmena koje ste testirali na Vašoj stranici (osim ako te izmene sami prekopirate i sačuvate). Funkcija ove alatke je manipulisanje kodom direktno na stranici i praćenje kako određene promene utiču na izgled stranice bez potrebe za stalnim čuvanjem, upload-om na server i osvežavanjem stranice da bi izmenjen sadržaj postao aktivan.
Iako kreatori ovog plugin-a najavljuju da će neka od budućih verzija imati mogućnost čuvanja izmena u kodu stranice, u Firebug-u ovakva funkcija trenutno ne postoji.
Šta Firebug jeste?
Firebug je trenutno najpopularniji Mozilla Firefox plugin namenjen razvoju web stranica. Omogućava proveravanje HTML koda i menjanje stilova i layout-a stranice u realnom vremenu i predstavlja naprednu alatku za otklanjanje grešaka u JavaScript kodu. Pored toga pruža pregled svih upita koje browser pravi prilikom učitavanja web stranice, kao i grafički prikaz vremena potrebnog za učitavanje, pojedinačno za svaki element stranice.
Još jedna korisna funkcija Firebug-a je mogućnost praćenja XMLHttpRequest saobraćaja, na kojem se temelji AJAX. Firebug nudi i svoju varijantu DOM Inspector-a, a omogućava Vam da sa tačno određene stranice pratite logove HTML, CSS, JS i XML grešaka, umesto preko Firefox konzole za greške.
Treba pomenuti da za Firebug postoji veliki broj ekstenzija sa različitim dodatnim funkcijama koje olakšavaju manipulaciju sa HTML, CSS, DOM i JavaScript elementima Vašeg sajta.
Takođe postoji verzija ovog plugina Firebug Lite, namenjena ostalim browserima, kao što su IE6+, Opera, Chrome i Safari.
Ekstenzije
FireFile – Firebug ekstenzija koja omogućava čuvanje CSS fajlova modifikovanih pomoću Firebug-a. FirePHP – omogucava ispis u Firebug konzolu pozivanjem proste PHP funkcije, narocito korisno za ajax developere. Yslow – Dodatak za Firefox integrisan sa Firebug plugin-om. Yslow analizira i ocenjuje web stranice na osnovu tri predefinisana seta pravila ili na osnovu pravila koja definiše sam korisnik. Na osnovu toga prikazuje statistiku stranice i predlaže načine za poboljšanje performansi kako bi se stranice brže učitavale u browser.
SenSEO – Ovaj dodatak služi za proveru najvažnijih on-page SEO kriterijuma i procenjuje koliko dobro Vaša web stranica ispunjava ove kriterijume. SenSEO procenjuje Vašu stranu prema smernicama za optimizaciju, koje je definisao Google, kao što Yslow rangira stranicu prema kriterijumima za optimizaciju performansi koje je definisao Yahoo.
SenSEO pruža pregled bitnih SEO komponenti web stranice i analizira on-page SEO kriterijume kao što su title, meta description, keywords, headings tagovi, i još mnogo toga. Može biti vrlo koristan alat za jednostavno ispravljanje grešaka koje ste možda prevideli tokom pisanja koda web stranice.
Pixel Perfect – Firefox dodatak pomoću koga web dizajneri i developeri mogu lako da “preklope” kodiranu HTML stranicu sa dizajnom koji treba pretvoriti u HTML/CSS, i tako vizuelno uporede koliko se napisani kod razlikuje od onoga što je predviđeno dizajnom. Piksel Perfect takođe ima Opacity opciju tako da možete istovremeno videti obe verzije i na osnovu toga lako odrediti tačan položaj i dimenzije elemenata web stranice u odnosu na originalni dizajn.
Ostale Firebug ekstenzije možete pronaći na zvaničnom sajtu Firebug.
Google sve više otežava dobijanje i zadržavanje dobrog rangiranja u rezultatima pretraga, i sa nedavnom neprijatnim iznenađenjem u vidu takozvanog “May Day” update-a, verovatno su mnogi webmasteri otkrili da su njihove dobro rangirane stranice nestale iz pretrage i da sada čame negde blizu pedesete stranice u rezultatima Google pretraga, ako imate sreće.
