1. diel - Príprava a nastavenie

Vitajte v úvodnom článku seriáli tvorby moderného portfólia. Predstavíme si najvhodnejšie jazyky, ktoré budete potrebovať poznať pre efektívnu tvorbu, a návrh, moderných webových stránok. Ak nepoznáte základy HTML a CSS, prečítajte si najprv seriál http://www.itnetwork.cz/...bove-stranky

Motivácia

Aby sme pre začiatok získali patričnú motiváciu, ukážme si obrázok výsledného webu, ktorý v tomto kurze vytvoríme:

Editor / IDE

Základom úspechu tvorby webových stránok je vhodný editor či IDE. Čím lepšie budete mať editor / IDE, tým budete schopní písať váš kód rýchlejšie a tiež kvalitnejšie - napr. Vďaka napovedanie, zvýrazňovanie syntaxe či upozorňovanie na chyby. Ja osobne odporúčam textový editor Sublime Text 3, o ktorom si viac môžete prečítať na http://www.itnetwork.cz/...sublime-text, alebo ak chcete niečo bytelnějšího, teda IDE, odporúčam PHPstorm, ktorý je však platený.

Ukážka textového editora Sublime Text 3

Vhodné jazyky

Ďalšou veľmi dôležitou časťou pri tvorbe webu je zvoliť si dobré jazyky. Teda také, ktoré sú veľa podporované a s ktorými sa dá efektívne pracovať. Myslím si, že by sme určite mali siahnuť po jazykoch HTML5 a CSS3, ktoré sú už pre tvorbu webov veľkým štandardom. Tieto jazyky využijeme pre rozloženie a štýlovanie stránky. Stránku tiež budeme chcieť doplniť o efekty, teda nejaké animácie, na ktoré využijeme jazyk Javascript a samozrejme aj jeho knižnicu jQuery.

Aby sme si ušetrili trápenia s CSS, ktoré pri väčších projektoch môže obsahovať stovky až tisíce riadkov, použijeme CSS preprocesor. O preprocesoru všeobecne si povieme niečo v ďalšom článku. V našej sérii však budeme používať jazyk Sass. Určite využijeme informácie z jeho dokumentácie na stránke http://sass-lang.com/.

Sass je jazyk, ktorý nám uľahčuje písanie štýlov. Ponúka nám totiž použitie premenných, podmienok, cyklov, mixin, matematické operácie a ďalšie užitočné funkcie ako napríklad stmavenie farby o X percent. Sass má dve syntaxe - my budeme používať syntax SCSS (Sassy CSS), ktorá je viac podobná syntax CSS a je lepšie čitateľná pre nezasvätených - teda pre tých, ktorí s preprocesoru nikdy nepracovali.

Návrh webu

Každá stránka musí vzísť z určitého grafického návrhu, najlepšie samozrejme od skúseného grafika. Návrh môžeme vytvoriť 2 základnými spôsobmi: vymýšľaním pri písaní kódu - čo je naozaj tá najhoršia chyba, ktorú môžete urobiť - a alebo návrh od nejakého grafika - teda "obrázok".

Návrh sa teda budeme snažiť robiť ako grafik - urobíme si nejaký ten "obrázok". Na to môžeme použiť ľubovoľný grafický editor - Photoshop, Inkscape, Gimp etc. - alebo jednoduchšie variantom je použiť ceruzku a papier. Môžeme potom vytvárať priamo "obrázok" tak, ako to má vyzerať, alebo len rozloženie, čo je akýsi wireframe, čiže skica.

V našom tutoriále teda budeme pracovať s grafickým návrhom v podobe wireframu, ktorý si predstavíme v niektorom z ďalších dielov.

Analýza návrhu

Potom čo dostaneme k dispozícii wireframe, musíme si ho zanalyzovať a v hlave si urovnať pomyselnú dôležitosť elementov v dizajne. Najskôr teda urobíme tie dôležitejšie časti a následne tie menej dôležité - teda napr. Najskôr urobíme menu a až potom jeho položky.

Ďalším bodom je najskôr nakódovať web a až potom pripísať JavaScriptovej efekty. S tým súvisí fakt, že stránka musí byť spustiteľná tiež bez Javascriptu tak, aby sa dala pohodlne ovládať - ak sa teda nejedná o nejakú špeciálnejšie webovú aplikáciu, kde je Javascript nutný.

Inštalácia Ruby

Keďže Sass je nutné kompilovať do CSS, a jeho kompilátor je napísaný v RUBY, musíme stiahnuť Ruby a nainštalovať ho.

Windows

Inštalátor pre Windows nájdeme na stránke http://rubyinstaller.org/downloads/ Tu si musíme dať pozor, aby sme pri inštalácii zaškrtli "add ruby Executables to your path", čo vytvorí akúsi systémovú premennú.

Inštalácia Ruby vo Windows

Linux

V Linuxe využijeme terminál, kde Ruby nainštalujeme pomocou príkazu

pre Debian alebo Ubuntu

sudo apt-get install ruby

alebo pre CentOS či Fedoru

sudo yum install ruby

Mac

V Mac by malo byť ruby predinštalované v systéme.

Inštalácia Sass

Teraz nainštalujeme kompilátor pre Sass

Windows

Spustíme si CMD a zadáme príkaz

gem install sass

Linux a Mac

Spustíme si terminál a zadáme príkaz

sudo gem install sass

Teraz už máme všetko potrebné pre kompiláciu Sass do CSS hotové.

Sass v Sublime Textu

Sublime Text vie zavolať kompilátor s určitými argumenty. To znamená, že my nemusíme pracovať s kompilátorom priamo.

Najskôr si nainštalujte Package Control, ako je vysvetlené v http://www.itnetwork.cz/...sublime-text - ktorý využijeme pre stiahnutie doplnku pre zvýrazňovanie Sass syntaxe.

Otvoríme si zoznam príkazov (CTRL + SHIFT + P), v ňom si vyhľadáme možnosť Package Control: Install Package. Chvíľu počkáme a vyjde nám nová tabuľka, do ktorej napíšeme "Sass". Zobrazí sa vám niekoľko možností a pravdepodobne hneď prvý bude samotné "Sass", ktoré stiahneme. Teraz sa bude zvýrazňovanie nastavovať automaticky a ak nie, stačí v zozname príkazov zadať "Set syntax: Sass".

Existuje aj doplnok na kompilovanie, ktorý však neodporúčam a namiesto toho si vytvoríme vlastný predpis pre kompiláciu podľa môjho už pripraveného kódu:

{

    "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

Kód si stiahneme, pomenujeme ako SASS.sublime-build a vložíme do priečinka% AppData% \ Roaming \ Sublime Text 3 \ Packages \ User.

Po stlačení CTRL + B, čiže Menu-> Tools-> Build sa nám súbor skompiluje.

Výsledný súbor je smerovaný do zložky o úroveň vyššie a potom do zložky css /, čoho docielime pomocou

${file_path}/../css/${file_base_name}.css

Ak budeme chcieť zmeniť cieľový priečinok, jednoducho zmeníme príkaz vyššie.

Môže sa stať, že sa vám budú pri kompilácii zobrazovať nejaké ERROR, a ak to bude niečo o UTF-8, je to pravdepodobne spôsobené tým, že máte súbor uložený v nejakej zložke, v ktorej sú v názve použité háčiky / čiarky. Stačí sa ich zbaviť a všetko by malo fungovať.

Sass v PHPstormu

Tu je používanie Sass jednoduchšie. V projekte si stačí vytvoriť súbor Sass, ku ktorému vyskočí možnosť pridať watcher. Potvrdíme a otvoríme si Menu-> File-> Settings, kde nájdeme položku File Watchers. Pokiaľ tu nemáme žiadny watcher, klikneme na plusko a jeden pre SASS (SCSS) vytvoríme. IDE nám automaticky vyplní informácie a kompilácie funguje sama hneď pri uložení. Tu je dôležité mať zaškrtli položku "Track only root files".

PHPstorm vám bude automaticky zvýrazňovať syntax a dokonca aj chytro napovedať ako základné funkcie z Sass, tak i tie vaše.

Pre umiestnenie súboru do iného miesta - v našom prípade do zložky css / pozmeníme v nastavení Watcher hodnotu položky "Output paths to refresh" a v argumente časť za dvojbodkou na

$ProjectFileDir$/css/$FileNameWithoutExtension$.css

Zmena cieľového priečinka v PHPstormu

Pre tento diel to bude už všetko, ďalší diel si ukážeme základy Sass, aby sme sa v ňom naučili efektívne pracovať a ukážeme si rozdiely oproti CSS.