Legyen Ön is webfejlesztő!

0Bezárhatatlan felugró ablakok? Percekig tartó, idegőrlő visszaszámlálók? Szemfájdítóan színes, olvashatatlan szövegek? Esetleg csak pusztán zavaró weblapelemek? Csupán pár kattintás kedvenc böngészőjében, és mindez már a múlté! Bizonyára Ön is találkozott már a fentiekhez hasonló, a netes szörfözést megkeserítő jelenségekkel. Ilyenkor nem volt mit tenni, ki kellett várni a visszaszámlálást, kimásolni a szöveget Jegyzettömbbe, vagy – rosszabb esetben – bosszankodva búcsút inteni a weblapnak.

Szerencsére ahogyan fejlődtek a böngészők, lassan megjelentek bennük a fejlesztést megkönnyítő, ún. webfejlesztői eszközök (Web Developer Tools). Ezek fokozatosan mind nagyobb népszerűségre tettek szert, olyannyira, hogy mára már minden modern böngészőben megtalálhatóak. (Igen, az Internet Explorerben is.) Segítségükkel külső eszközök nélkül, élőben alakíthatók át teljes weboldalak, a színezéstől kezdve, az elrendezésen át egészen a tartalomig. Fontos azonban tudni, hogy ezek a módosítások csak ideiglenesek, csakis az adott böngészőből láthatók és nem menthetők. Mégis, a fenti eszközök nem csak a programozók és dizájnerek életét könnyítik meg, hanem akár a mindennapi internetezés során is jól jöhetnek. Lássuk hát pár példán keresztül, hogy miként vethetjük be böngészőnk webfejlesztői eszközeit a legkritikusabb szituációkban.

Az egyik legegyszerűbb eset, amikor szeretnénk egy galériát vagy videót megnézni, ám a fekete háttér mellett virító gördítősáv egyszerűen elrontja az élményt.

lw1

A jobb oldali gördítősáv felesleges és sokat ront az élményen

Magának a webfejlesztői ablaknak pofonegyszerű az előhívása. Egyszerűen nyomjuk meg az F12 gombot, de ha ez nem segítene, keressünk böngészőnk menüjében Eszközök, Webfejlesztő, esetleg Fejlesztői eszközök menüpontot.
Bár a megjelenő ablak felépítése sokféle lehet, jellemzően baloldalt találjuk a HTML forrást, jobboldalt pedig a stílusinformációkat (CSS). Kattintsunk bal oldalon a <body> sorra, majd jobboldalt az ide tartozó CSS-en az üres helyre, és írjuk be az overflow: hidden szöveget. Miután bezártuk a fejlesztői ablakot, máris teljes terjedelmében élvezhetjük a képet vagy videót, ha pedig végeztünk, hasonló módon törölhetjük módosításainkat.

lw2

Csupán pár kattintás és a megfelelő kulcsszavak

Sokkal kellemetlenebb eset, amikor egy weboldalon felugró ablak fogad, mely nem akar tovább engedni, amíg eleget nem teszünk a feltételeinek.

lw3

Hivatásos túsztárgyalók előnyben

Kattintsunk valahol az ablak területén az egér jobb gombjával, majd válasszuk az Elem vizsgálata menüpontot. (Nyugalom, böngészőnk nem az akkumulátor töltöttségét fogja ellenőrizni.) A stíluslaphoz írjuk be a következőt: display: none. Az ablak eltűnt, a kívánt tartalom máris elérhető.

lw4

A zavaró panel pár másodperc alatt eltüntetve

Előfordul a fenti példa ellenkezője is: a visszaszámlálás. Vagyis addig nem látjuk az oldal egy bizonyos részét, amíg egy számláló el nem éri a nullát.

lw5

Időmilliomos weboldal

Attól, hogy nem látjuk, az a link vagy más elem még ott kell legyen. Kattintsunk a szövegen jobb egérgombbal, és az elemet megvizsgálva keressünk a környékén, a HTML forrásban árulkodó jeleket. Ha egy ilyen „tag”-re kattintunk, és a CSS lapon látjuk a display: none szöveget, akkor nyomon vagyunk: álljunk fölé egérrel, szedjük ki az előtte megjelenő pipát vagy adjunk hozzá az elemhez egy display: block leírást. Máris megspóroltunk pár perc várakozást.

lw6

Pár kattintással megelőztük a számlálót

Valamivel könnyebb a helyzet, ha látjuk a „Tovább” gombot, de az le van tiltva, vagyis amíg a weboldal nem aktiválja, hiába kattintgatunk rajta. Ha azonban a weboldal tudja aktiválni, akkor ezt mi is megtehetjük.

lw7

A letiltott „Tovább” közel, s mégis távol

Sajnos előfordul, hogy a letiltott elemen nem hívhatjuk elő a helyi menüt. A böngésző saját menüjéből vagy F12-vel indítsuk el a Fejlesztői eszközöket, majd keressünk egy Elem kijelölése…, Select an element… vagy hasonló nevű gombot. Egy jellemzően balra, legalul vagy majdnem legfelül lévő, egérmutatót vagy nagyítót ábrázoló kis ikon után kutassunk. Ha megvan, kattintsunk rá, majd közvetlenül ezután kattintsunk a weboldalon lévő „Tovább” gombra. A HTML forrás máris a gombra ugrik, amit könnyen szerkeszthetünk. Kattintsunk duplán a disabled attribútumra, és töröljük. A gomb a weblapon máris szabadon kattintható.

lw8

A kijelölt elem aktiválása

Végül, de nem utolsósorban következzen az egyik leghasznosabb módosítás: a színezés. Bár ez elsőre nem tűnhet komoly nehézségnek, de aki olvasott már halványszürke háttéren halványszürke feliratot, az biztosan tudja értékelni.

lw9

Szép dizájn, csak a szöveg alig olvasható

Kattintsunk a háttéren jobb egérgombbal, majd válasszuk az Elem vizsgálatát. A kiválasztott elem stílusához írjuk be pl. a background: lightgrey szöveget. Ha Entert ütünk, újabb formázás adható meg; legyen a szöveg fekete, vagyis color: black. Szinte bármilyen szín megadható angolul, sőt Chrome-ban még a szöveg előtti kis színdobozra kattintva palettáról is választhatunk. Mégiscsak szemkímélőbb megoldás.

lw10

A Chrome-ban még színpalettát is kapunk

Habár a Webfejlesztői Eszközök elsősorban fejlesztőknek készültek, de mint fent is látható, a mindennapi böngészésben is megállják a helyüket. Noha a bennük rejlő lehetőségek alapos kiaknázásához nem árt pár év programozói vagy dizájneri tapasztalat, a példában szereplő, egyszerű funkciók szinte előismeret nélkül is bevethetőek. Bár ne legyen rájuk szükség, de ha megvan rá a böngészőnk képessége, akkor csak rajtunk múlik, hogy élünk-e ezzel a lehetőséggel.

Share

Szóljon hozzá!

*

Content Protected Using Blog Protector By: PcDrome.