Nástroje webového vývojára

PHP je serverový jazyk a to znamená, že sa vykonáva na strane servera, k nám (prehliadač) jeho kód nepríde, príde už len jeho výstup v HTML. Preto jeho debugovanie je možné len štýlom výpisu a zastavenia na nejakom mieste v kóde (print_r/var_dump a exit) a načítaní tohto kódu (refresh – prepošle sa požiadavka na server a príde nám nový kód). Jazyky HTML a CSS sa však nevykonávajú na strane servera, tie sa dostanú ku klientovi (používateľ – návštevník webu cez prehliadač) a prehliadač ich preloží/rozkóduje a zobrazí. Pri zmene kódu týchto jazykov nie je nutné refreshovať celú stránku a posielať ju tým na server a dostať zo servera odpoveď. Zmeny za behu (počas zobrazenia webstránky) v kóde HTML alebo CSS sa prejavujú v prehliadači hneď. To je veľmi veľká výhoda pri práci s týmito jazykmi, najmä pri zisťovaní nejakej chyby alebo skúšani, čo ako by sme si dali a podobne, najmä pri dizajnovaní.

Možno ste sa zamysleli nad tým, ako vieme vykonať zmeny za behu. Však ak chceme niečo zmeniť, musíme to zmeniť v zdrojovom kóde (v súboroch), uložiť a následne stránku refreshnúť, aby sa načítal nový obsah súborov. Moderné prehliadače ponúkajú veľmi šikovnú utility (funkčnosť/užitočná vec) s názvom web developer tools alebo webmaster tools a podobne. Jedná sa o skupinu nástrojov, ktoré majú programátorovi uľahčiť prácu pri tvorbe webových systémov. Možno budete na konci tejto kapitoly nahnevaný, prečo sme si toto neprebrali skôr a najmä dizajn by sa vám učil oveľa ľahšie. Máte na to právo, ale niekedy si treba aj niečo oddrieť, aby sme si potom nejaké uľahčenie zaslúžili haha:-D O čo sa teda jedná?

Ako bolo povedané, moderné prehliadače túto vymoženosť obsahujú, my si to ukážeme v prehliadači Firefox, kde by ste mali mať otvorenú našu webstránku napríklad na časti domov. Kliknite teraz na položku v menu Tools – Web developer – Inspector (Nástroje – Vývojár – Inšpektor). V spodnej časti prehliadača by sa vám mal zobraziť panel, ktorý sa skladá z viacerých častí. Vľavo hore je akokeby menu medzi jednotlivými nástrojmi (Inspector, Console, Style editor...), my budeme zatiaľ používať Inspector. Tento nástroj slúži na označenie/vybratie konkrétneho prvku (elementu) zo stránky. Skúste kliknúť na obdĺžnik so šípkou naľavo od názvu Inspector. Týmto sme aktivovali nástroj vybratia prvku zo stránky. Skúste sa teraz pohybovať ponad jednotlivé časti stránky a uvidíte, ako vám tento nástroj automaticky označuje jednotlivé časti, nad ktorými sa nachádzate. Zvýrazňuje ich graficky, vypisuje názov tagu a zobrazuje aj ich rozmery. Šikovné nie? Na čo je to ale dobré?

Všimnite si, čo sa stane po kliknutí na hocijaký prvok ľavým tlačidlom, čím tento prvok označíme - vyberieme. Pod prvým riadkom bloku nástrojov je druhý riadok, kde v ľavej časti sa zobrazila cesta konkrétne k našemu prvku. Sú tam zaradom rozpísané elementy od najvrchnejšieho (html) až po náš prvok, takže vidíme štruktúru – hierarchiu prvkov, kde sa práve nami vybratý nachádza a čo všetko je nad ním. Pod týmto riadkom (ako iste vidíte) je zobrazený zdrojový kód našej stránky a konkrétne je zvýraznený náš prvok, na ktorý sme klikli. Toto je veľmi praktické pri práci, ak nám niečo nefunguje, resp. ak sa niečo neozbrauzje ako chceme. Takto si pomocou tohto vyberieme náš prvok, ktorá potrebujeme preskúmať a pozrieme sa na zdrojový kód a možno nájdeme chybu medzi hodnotami atribútov alebo zistíme, že sa nachádza v zlom dive aleob niečo iné.

Okrem toho, že sa zvýraznil prvok v zdrojovom kóde, všimnite si pravý panel. V ňom sa nachádza kód jazyka CSS. Nezobrazuje sa však v ňom celý kód nášho súboru global.css, ale zobrazujú sa iba pravidlá, ktoré sa týkajú tohto prvku. Toto je asi najsilnejšia vymoženosť tohto nástroja. Pri kódovaní v CSS sa často definujú pravidlá pre jeden prvok na viacerých miestach a takisto sa kadečo dedí z nadradených elementov a podobne. Práve tu je veľmi pekne vidieť, čo všetko sa na element aplikuje a vždy je aj vypísaný selector, presne ako je to v kóde, ktorý zapríčiňuje, že sa dané pravidlo aplikuje. Ako vidíte, pri každom selectore je na pravej strane riadka napísané, z ktorého súboru sa pravidlo načítalo a konkrétne na ktorom riadku to je zadefinované (napríklad global.css:180 hovorí v ktorom súbore a na 180tom riadku).

Už len to, že po vybratí prvku zo stránky sa nám automaticky zobrazí jeho zdrojový kód, jeho postavenie v štruktúre prvkov a zoznam pravidiel CSS aplikovaných na tento element, je obrovská vymoženosť. Ako sme si ale povedali, tento nástroj slúži najmä na editovanie – vykonávanie zmien počas behu, čiže počas zobrazenia stránky. Práve v tejto časti, v zdrojovom kóde alebo pri pravidlách CSS je možné meniť kód a zmeny sa budú prejavovať okamžite. Poďme si to teda vyskúšať. Dajte sa do časti Kontakt, kliknite na nástroj inšpektora a zobrazte sa nad prvý prvok z formulára. Všimnite si, že hranice (rozmer) nášho inputu sú graficky zvýraznené a po stranách sa zobrazili aj myslené čiary (pravítka) určujúce jeho pozíciu. Samotné miesto, ktoré zaberá element je zvýraznené modrou farbou. Toto je plocha, ktorú skutočne zaberá náš element, mali by to byť hodnoty width a height. Pod elementom sa nám zobrazuje aj žltá plocha, toto je zvýraznenie marginov, ktoré sú zadané pri elemente, takže vidíme, čo okrem seba samého ešte zaberá a prečo napríklad v žltej ploche nie je žiadny iný element. Je pekne vidieť, že ďalší label (EMAIL) začína presne od marginu prvého inputu.

Nad elementom sa zobrazila informačná bublina, v ktorej je na začiatku zobrazený typ elementu aj s príslušným atribútom ID (input#name). V druhej časti bubliny je znázornený rozmer elementu v pixeloch. Už len zvýraznenie pozície, rozmeru a okrajov elementu je pomoc pri dizajnovaní, kedy nám niekedy niečo niekde odskočilo a nevieme prečo. Jednoducho si takto popozeráme elementy v okolí a zistíme, že niektorý z nich tam má nejaký okraj, ktorý nechceme a podobne. Kliknime teraz na tento element, takže ho vyberieme a v spodnej častí nástrojov sa zývrazní jeho HTML kód a pravidlá CSS. Skúste ísť teraz myšou v časti, kde je kód jazyka HTML a všimnite si, že ako sa presúvate ponad jednotlivé elemetny v kóde, sú rovnako zvýrazňované vo webstránke. Toto je druhý spôsob, ako vybrať element.

Poďme si teraz vyskúšať meniť kód HTML za behu. Ak klikneme pravým tlačítkom myši na riadok s kódom nášho inputu, zobrazí sa nám ponuka, kde je možné vybrať viacero možností, ako napríklad odstrániť element (delete node) alebo editovať jeho kód v HTML (edit as HTML). Po vybratí tejto možnosti môžeme v bloku, ktorý sa zobrazil, meniť kód a po stlačení mimo bude kód zmenený a zmena sa okamžite prejaví. Skúste napríklad zadať nejaký text do atribútu value a kliknite mimo. Kód sa zmení a zmena sa hneď prejaví, v inpute sa bude nachádzať zadaný text. Upozornil by som, že zmeny vykonávané v týchto nástrojoch nie sú uložené v zdrojových súboroch. Slúžia len na testovanie a skúšanie a docielenie žiadaného výsledku, po ktorom je možné zmeny skopírovať alebo aplikovať do zdrojových súborov. Po vykonaní zmeny v kóde je možné stlačiť skratku CTRL+Z (CMD+Z v Macu), ktorá nám vráti krok späť. Ak máme označený riadok s našim inputom, môžeme ho po stlačení klávesy delete (backspace v Macu) odstrániť. Okrem toho môžeme po dvojkliku na názov tagu, atribútu alebo na hodnotu atribútu priamo v riadku editovať tieto hodnoty a meniť ich. Takisto je možné prvok presunúť – po kliknutí a držaní ľavého tlačítka na myši (drag and drop – tahaj a pusti) ho môžeme kdekoľvek presunúť.

Pozrime sa ale na najväčšiu výhodu a to je menenie jazyka CSS. Ako vidíte, na začiatku je vždy selector element, do ktorého je možné pridávať pravidlá, ktoré sa aplikujú len na tento prvok. Pod čiarou sú porom rozpísané jednotlivé pravidlá, ktoré sa aplikovali. Všimnite si, že keď sa zobrazíte myšou ponad jednotlivé pravidlá v ľavej časti na začiatku riadka, zobrazí sa checkbox, pomocou ktorého môžete pravidlo vypínať a zapínať. Toto je veľmi výhodné, môžete si takto skúšať, čo sa stante bez aplikovania pravidla alebo opačne. Okrem toho je možné všetky hodnoty pravidiel meniť, takisto ako pridávať pravidlá alebo odoberať. Skúste zapnúť/vypnúť pravidlo o výške. Uvidíte, ako by bol veľký do výšky tento element bez tohto pravidla. Potom skúste kliknúť na hodnotu vlastnosti height (30px) a uvidíte, že môžete danú hodnotu meniť – editovať. Pomocou šípiek hore dole môžete dokonca takéto hodnoty meniť plynulo po základných jednotkách (1px).

Ak kliknete pravým tlačítkom myši mimo nejakého pravidla, zobrazí sa ponuka, z ktorej keď vyberiete možnost add new rule (pridať nové pravidlo), hodí vás do nového riadku pre zadanie nového pravidla. To isté sa zobrazí po kliknutí ľavým tlačítkom niekde mimo pravidla. Následne vám v novom riadku bliká kurzor, kde musíte zadať názov pravidla. Všimnite si, že akomáhle začnete písať názov vlastnosti, ponúka vám zoznam (našepkávanie), v ktorom sa môžete šípkami pohybovať hore dole a enterom (alebo tabom) potvrdiť názov, nemusíte to celé vypisovať. Následne vás hodí na miesto, kde sa zadáva hodnota. Aj tu sa v prípade slovných hodnôt zobrazí našepkávanie.

Týmito vymoženosťami si môžete popridávať kadejaké pravidlá, vypínať ich a zapínať, meniť hore dole ich hodnoty a okamžite vidíte výsledok. Veľmi výhodne je pomocou tohto robiť dizajn vizuálne, ak nemáme predom presnú predlohu. To znamená, že napríklad ak si nakódite formulár a nemáte predstavu, ako bude vyzerať, môžete si rovno zobraziť tieto nástroje. Kliknete na nejaký element a priamo tu začnete pridávať jednotlivé pravidlá a meniť ich, pokiaľ to nebude vyzerať tak, ako chcete. Ak dosiahnete uspokojujúci výsledok, môžete pravidlá ľavým tlačítkom označiť ako text v editore a skopírovať do zdrojového súboru. Pomocou tohto nástroja sa dá veľmi ľahko skúšať a pochopiť, ako sa správajú jednotlivé pravidlá a ich rôzne hodnoty, ich dopad a aplikovanie uvidíte v reálnom čase hneď na obrazovke.

Odteraz by ste mali tieto nástroje používať vždy, keď budete riešiť nejaký problém, kedy sa vám niečo nebude zobrazovať tak, ako si želáte alebo budete mať niečo odskočené mimo. Rovnako ako keď budete chcieť niečo nadizajnovať, tak si to najprv takto môžete poskúšať a pokombinovať a následne kód použiť do zdrojových súborov.