2. Nástroje pro vývojáře

Předtím, než se pustíme do samotného psaní kódu, ukážeme si pár nástrojů pro tvorbu webových stránek. Nejdůležitější je pro nás textový editor, a prohlížeč.

Textový editor

Pro kódování stránek není potřeba použít zvláštní editor. Nicméně určitě není možné psát kód pomocí Wordu, nebo jemu podobných textových procesorů. Takovéto textové procesory totiž umožňují formátování textu, psaní nadpisů, změny velikosti a barvy písma a mnoho dalšího. To je pro nás nežádoucí. Editor, který můžeme použít, musí pracovat s textem ve formátu plaint-text, tedy prostý text.

Jednoduché stránky by se jistě daly psát pomocí Poznámkového bloku, nebo podobného programu umožňujícího editovat textové soubory, ale není to nejlepší volbou. V dnešní době máme specializované editory, které nám pomáhají rozlišovat různé kusy kódu, a tak kód zpřehlední.

Úkol: Vytvořte si na disku složku, do které budete ukládat svou práci
  1. Vytvořte složku a pojmenujte ji např. GeekGirlsCarrots a v ní složku ukol_2.
  2. Otevřete si Poznámkový blok (příp. jiný editor) a do nového souboru napište libovolný text, např. Ahoj, já jsem geek girl
  3. Uložte soubor jako index.html do vytvořené složky ukol_2. Pozor na příponu souboru. Pro Poznámkový blok je výchozí příponou .txt, my však chceme příponu .html, která říká počítači, že se jedná o webovou stránku.
  4. Otevřete index.html pomocí dvojkliku na soubor. Pokud jste zadali správnou příponu, soubor se automaticky otevře ve webovém prohlížeči a zobrazí text.

Pokročilé textové editory

Jak již bylo zmíněno, kódovat webové stránky pomocí klasického Poznámkového bloku nemá v dnešní době význam. Na internetu je možno najít mnoho programů, které jsou k tomuto určené a jsou zdarma. My si zmíníme tři nejpoužívanější: Sublime Text, PSPad a Notepad++. Jaký z nich si vyberete ke své práci je jen na vás, rozdíly mezi programy nejsou pro naší práci nijak zásadní a vetšinou se jedná jen o preferenci toho či onoho programu. Tyto programy zvýrazňují syntax kódu a pomáhají tak orientaci v souboru a vyvarovat se chybám. Jak toto zvýraznění funguje si ukážeme pomocí Sublime Text editoru na stránce geekgirlscarrots.org

SublimeText

Prohlížeč

Jistě znáte víc prohlížečů. Jmenujme ty hlavní: Chrome, FireFox a Internet Explorer. I když prohlížeč používáte každý den, pravděpodobně jste se nesetkali s jejich funkcemi pro vývojáře.

Pro náš workshop budeme využívat primárně prohlížeč Chrome, proto si tyto nástroje ukážeme v tomto prohlížeči.

Vývojářské nástroje spustíme jednoduše pomocí klávesy F12 - otevře se nám nové okno, kde uvidíme několik záložek: Elements, Console, Sources, Network, atd. Nás nejvíce zajímá záložka Elements, kde je možné zobrazit zdrojový kód stránky. K tomu, jak s tímto nástrojem pracovat, se dostaneme později. Nyní nám stačí vědět, že pomocí tohoto nástroje je možné zkoumat jednotlivé prvky na stránce. Jak je vidět na obrázku, mám zvolený element stránky, který je na stránce zároveň zvýrazněn, i s informacemi o jeho velikosti. V pravé části okna jsou pak také informace o kaskádových stylech navázaných na prvek.

DeveloperTools

Za pomoci vývojářských nástrojů můžeme také interaktivně měnit kód stránky, případně CSS styly. V dalších kapitolách si toto vyzkoušíme.

results matching ""

    No results matching ""