Lekce 1 - Příprava a nastavení
Vítejte v úvodním článku seriálu tvorby moderního portfolia. Představíme si nejvhodnější jazyky, které budete potřebovat znát pro efektivní tvorbu a návrh moderních webových stránek. Pokud neznáte základy HTML a CSS, přečtěte si nejprve seriál o HTML a CSS.
Motivace
Abychom pro začátek získali patřičnou motivaci, ukažme si obrázek výsledného webu, který v tomto kurzu vytvoříme:
![Moderní a profesionální webové portfolio - Moderní a profesionální webové portfolio](images/2068/moderni_portfolio/06/03.png)
Editor/IDE
Základem úspěchu tvorby webových stránek je vhodný editor či IDE. Čím lepší budete míti editor/IDE, tím budete schopni psát váš kód rychleji a také kvalitněji - např. díky napovídání, zvýrazňování syntaxe či upozorňování na chyby. Já osobně doporučuji textový editor Sublime Text 3, o němž si více můžete přečíst zde na ITnetwork, nebo pokud chcete něco bytelnějšího, tedy IDE, doporučuji PHPstorm, který je ovšem placený. Můžete si ho však vyzkoušet na 30 dní zdarma.
![Sublime Text - Moderní a profesionální webové portfolio](images/2068/moderni_portfolio/priprava_a_nastaveni/01.png)
Ukázka textového editoru Sublime Text 3
Vhodné jazyky
Další velmi důležitou částí při tvorbě webu je zvolit si dobré jazyky. Tedy takové, které jsou hodně podporované a se kterými se dá efektivně pracovat. Myslím si, že bychom určitě měli šáhnout po jazycích HTML5 a CSS3, které jsou již pro tvorbu webů velkým standardem. Tyto jazyky využijeme pro rozložení a stylování stránky. Stránku také budeme chtít doplnit o efekty, tedy nějaké animace, na které využijeme jazyk Javascript a samozřejmě také jeho knihovnu jQuery.
Abychom si ušetřili trápení s CSS, které při větších projektech může obsahovat stovky až tisíce řádků, použijeme CSS preprocesor. O preprocesorech obecně si řekneme něco v dalším článku. V naší sérii však budeme používat jazyk Sass. Určitě využijeme informace z jeho dokumentace na stránce http://sass-lang.com/.
Sass je jazyk, který nám ulehčuje psaní stylů. Nabízí nám totiž použití proměnných, podmínek, cyklů, mixinů, matematické operace a další užitečné funkce jako třeba ztmavení barvy o X procent. Sass má dvě syntaxe - my budeme používat syntaxi SCSS (Sassy CSS), která je více podobná syntaxi CSS a je lépe čitelná pro nezasvěcené - tedy pro ty, kteří s preprocesory nikdy nepracovali.
Návrh webu
Každá stránka musí vzejít z určitého grafického návrhu, nejlépe samozřejmě od zkušeného grafika. Návrh můžeme vytvořit 2 základními způsoby: vymýšlením při psaní kódu - což je opravdu ta nejhorší chyba, kterou můžete udělat - a nebo návrh od nějakého grafika - tedy "obrázek".
Návrh se tedy budeme snažit dělat jako grafik - uděláme si nějaký ten "obrázek". Na to můžeme použít libovolný grafický editor - Photoshop, Inkscape, Gimp etc. - nebo jednodušší variantou je použít tužku a papír. Můžeme pak vytvářet přímo "obrázek" tak, jak to má vypadat, nebo jen rozložení, což je jakýsi wireframe, neboli skica.
V našem tutoriálu tedy budeme pracovat s grafickým návrhem v podobě wireframu, který si představíme v některém z dalších dílů.
Analýza návrhu
Poté co dostaneme k dispozici wireframe, musíme si jej zanalyzovat a v hlavě si urovnat pomyslnou důležitost elementů v designu. Nejdříve tedy uděláme ty důležitější části a následně ty méně důležité - tedy např. nejdříve uděláme menu a až poté jeho položky.
Dalším bodem je nejdříve nakódovat web a až poté připsat Javascriptové efekty. S tím souvisí fakt, že stránka musí být spustitelná také bez Javascriptu tak, aby se dala pohodlně ovládat - pokud se tedy nejedná o nějakou speciálnější webovou aplikaci, kde je Javascript nutný.
Instalace Ruby
Jelikož Sass je nutno kompilovat do CSS, a jeho kompilátor je napsán v RUBY, musíme stáhnout Ruby a nainstalovat jej.
Windows
Instalátor pro Windows nalezneme na stránce http://rubyinstaller.org/downloads/ Zde si musíme dát pozor, abychom při instalaci zaškrtli "add ruby executables to your path", což vytvoří jakousi systémovou proměnnou.
![Moderní a profesionální webové portfolio](images/2068/moderni_portfolio/priprava_a_nastaveni/02.png)
Instalace Ruby ve Windows
Linux
V Linuxech využijeme terminál, kde Ruby nainstalujeme pomocí příkazu
pro Debian či Ubuntu:
sudo apt-get install ruby
nebo pro CentOS či Fedoru:
sudo yum install ruby
Mac
V Mac by mělo být ruby předinstalované v systému.
Instalace Sass
Nyní nainstalujeme kompilátor pro Sass.
Windows
Spustíme si CMD a zadáme příkaz:
gem install sass
Linux a Mac
Spustíme si terminál a zadáme příkaz:
sudo gem install sass
Nyní již máme vše potřebné pro kompilaci Sass do CSS hotové.
Sass v Sublime Textu
Sublime Text umí zavolat kompilátor s určitými argumenty. To znamená, že my nemusíme pracovat s kompilátorem přímo.
Nejdříve si nainstalujeme Package Control, jak je vysvětleno v http://www.itnetwork.cz/…sublime-text - který využijeme pro stáhnutí doplňku pro zvýrazňování Sass syntaxe.
Otevřeme si seznam příkazů (CTRL + SHIFT + P), v něm si vyhledáme možnost Package Control: Install Package. Chvíli počkáme a vyjede nám nová tabulka, do které napíšeme "Sass". Zobrazí se vám několik možností a pravděpodobně hned první bude samotné "Sass", které stáhneme. Nyní se bude zvýrazňování nastavovat automaticky a pokud ne, stačí v seznamu příkazů zadat "Set syntax: Sass".
Existuje také doplněk na kompilování, který však nedoporučuji a místo toho si vytvoříme vlastní předpis pro kompilaci podle mého již připravené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 stáhneme, pojmenujeme jako SASS.sublime-build a vložíme do složky %AppData%\Roaming\Sublime Text 3\Packages\User.
Po stisku CTRL + B, neboli Menu->Tools->Build se nám soubor zkompiluje.
Výsledný soubor je směřován do složky o úroveň výše a poté do složky css/, čehož docílíme pomocí:
${file_path}/../css/${file_base_name}.css
Pokud budeme chtít změnit cílovou složku, jednoduše změníme příkaz výše.
Může se stát, že se vám budou při kompilaci zobrazovat nějaké errory, a pokud to bude něco o UTF-8, je to pravděpodobně způsobeno tím, že máte soubor uložený v nějaké složce, ve které jsou v názvu použity háčky/čárky. Stačí se jich zbavit a vše by mělo fungovat.
Sass v PHPstormu
Zde je používání Sassu jednodušší. V projektu si stačí vytvořit soubor Sass, ke kterému vyskočí možnost přidat watcher. Potvrdíme a otevřeme si Menu->File->Settings, kde najdeme položku File Watchers. Pokud zde nemáme žádný watcher, klikneme na plusko a jeden pro SASS(SCSS) vytvoříme. IDE nám automaticky vyplní informace a kompilace funguje sama hned při uložení. Zde je důležité míti zaškrtlou položku "Track only root files".
PHPstorm vám bude automaticky zvýrazňovat syntaxi a dokonce i chytře napovídat jak základní funkce z Sass, tak i ty vaše.
Pro umístění souboru do jiného místa - v našem případě do složky css/ pozměníme v nastavení watcheru hodnotu položky "Output paths to refresh" a v argumentu část za dvojtečkou na:
$ProjectFileDir$/css/$FileNameWithoutExtension$.css
![Moderní a profesionální webové portfolio](images/2068/moderni_portfolio/priprava_a_nastaveni/03.png)
Změna cílové složky v PHPstormu
Pro tento díl to bude již vše.
V další lekci, Úvod do CSS preprocesoru Sass, si ukážeme základy preprocesoru Sass, abychom se v něm naučili efektivně pracovat. Ukážeme si také jeho rozdíly oproti CSS.