Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.

1. díl - Příprava a nastavení

HTML a CSS Moderní a profesionální webové portfolio Příprava a nastavení

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 http://www.itnetwork.cz/…v-html-a-css

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 na http://www.itnetwork.cz/software/sublime-text, nebo pokud chcete něco bytelnějšího, tedy IDE, doporučuji PHPstorm, o kterém si můžete přečíst na http://www.itnetwork.cz/…mujte-chytre.

Sublime Text

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.

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 nainstalujte Package Control, jak je vysvětleno v http://www.itnetwork.cz/software/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%\Roa­ming\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

Změna cílové složky v PHPstormu

Pro tento díl to bude již vše, další díl si ukážeme základy Sass, abychom se v něm naučili efektivně pracovat a ukážeme si rozdíly oproti CSS.


 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor studuje FIT ČVUT. Zajímá se převážně o webové technologie. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (33 hlasů) :
4.727284.727284.727284.727284.72728


 


Miniatura
Následující článek
Úvod do CSS preprocesoru Sass

 

 

Komentáře
Zobrazit starší komentáře (116)

Avatar
Ondřej Matýs:

Díky za radu. Už se mi to podařilo vyřešit :)

 
Odpovědět 10.11.2016 16:59
Avatar
Karel Wala
Člen
Avatar
Odpovídá na Ondřej Matýs
Karel Wala:

Ahoj, jak jsi to prosím tě vyřešil? Add to PATH check box jsem měl zaškrtnutý, už jsem to 2x přeinstaloval a dělá mi to přesně to, co tobě. Děkuji

 
Odpovědět 11.11.2016 10:03
Avatar
vgixr
Člen
Avatar
Odpovídá na Karel Wala
vgixr:

Odinstaluj verzi Ruby, co máš, a nainstaluj Ruby 1.9.3-p551; to fungovalo mně

 
Odpovědět 11.11.2016 22:26
Avatar
jozef.stropko:

Poprosil by som o malú pomoc. Postupoval som podľa návodu a dostal som sa takmer ku koncu, kde treba prekopírovať súbor pre kompiláciu do sublime textu a uložiť ho pod názvom SASS.sublime-build do %AppData%\Roa­ming\Sublime Text 3\Packages\User a následne ho skompilovať cez ctrl+b a tu je problém,, ktorý sa vyskytol tiež u niektorých. V sublime texte mi to po stačení ctrl+b, keď mám súbor SASS.sublime-build skompilovať v spodnej časti vypíše "no build system" a nič to nerobí. Neviem, či nerobím nejakú chybu (možno triviálnu).

Pre doplnenie:

Ruby mi funguje vo verzii 2.0.0-p0-x64, keďže pri novších sa nedal nainštalovať, vypisoval chybové hlásenie, ktoré tu bolo spomenuté a o zložke %AppData%\Roa­ming\Sublime Text 3\Packages\User do ktorej bolo treba uložiť SASS.sublime-build som sa doobeda dočítal, že sa jedná o skrytý súbor, ktorý je uložený v zložke užívatelia (konkrétne u mňa) a programy si tam ukladajú potrebné súbory. Pred tým som ho vytváral v položke sublime text, ktorá je uložená v program files.

Za pomoc vopred veľmi pekne ďakujem!

 
Odpovědět 21.11.2016 16:10
Avatar
Michal Martinec:

Ahojte vsetko som nastavil len nerozumiem poslednej veci. Ako mam stiahnut ten kod a kam ho dat? Mam ho len nakopirovat, dat do editoru a ulozit respektive vytvorit ulozisko nakolko takato cesta v PC neexistuje? Tam som sa zasekol. Nech som skusal robit cokolvek tak mi to nic neurobilo a neviem ako to mam urobit. :D

Odpovědět 22.12.2016 18:37
Nikdy nie je neskoro na to, aby si zmenil svoj život. Dôležité je spraviť prvý kód.
Avatar
Michal Martinec:

ok uz nemusite radit :) podarilo sa. Pokial mi to malo v konzole vypisat po kompilacii len ze finished in 0.3s tak je to v poriadku. Ak by to malo urobit nieco ine prosim povedzte mi ka to bude niekto citat.

Odpovědět 22.12.2016 19:20
Nikdy nie je neskoro na to, aby si zmenil svoj život. Dôležité je spraviť prvý kód.
Avatar
Odpovídá na jozef.stropko
Michal Martinec:

Tiez som to dal do package v program files/Sublime text 3 lebo taku cestu ako sa tu pise, este k tomu nechapem preco je pisana opacne :D alebo ja som sa s tym nikdy nestretol, som nenasiel. Po ctrl + b mi to v konzole vyhodilo len ze finished in 0.3s. Tak predpokladam ze je to ok. Ale potom som zistil ze nie je, lebo som to mal zle napisane, namiesto build som napisal bulid a aj tak to bez problemov skompilovalo a ze je hotovo. Takza mam s tym tiez problem cez ktory sa asi nedostanem bez pomoci.

Odpovědět 22.12.2016 19:31
Nikdy nie je neskoro na to, aby si zmenil svoj život. Dôležité je spraviť prvý kód.
Avatar
Odpovídá na jozef.stropko
Michal Martinec:

Ok nechcem tu spamovat, ale chcem ti pomoct, lebo ja som to uz spravil. Vykasli sa na to, aby si vkladal nejaky kod odtialto a nastavoval to podla tohto navodu, hlavne ked autor nenapisal preco nedoporucuje doplnok na kompilaciu priamo z instalacnych moznosti Sublime Text 3 editora. Cele som to nastavil podla tohto videa https://www.youtube.com/watch?… pekne krok po kroku. Jediny problem moze nastat, ked budes kopirovat kod a vkladat ho do konzoly podla videa. Ak ti to nevyhodi ten vysledok co jemu na videu, ale vyhodi ti to len cely ten nakopirovany text tak, ako si ho napisal, nepanikar. Je to lenk kvoli tomu, ze uz to tam vsetko mas a tym padom mozes ten krok preskocit a pokracuj podla videa dalej. ;)

Odpovědět 22.12.2016 20:07
Nikdy nie je neskoro na to, aby si zmenil svoj život. Dôležité je spraviť prvý kód.
Avatar
jozef.stropko:

Michal Martinec, dodatočne vďaka za odpoveď! teraz mám troška zaneprázdnené dni, tak to skúsim prejsť celé po novom roku.

 
Odpovědět 25.12.2016 21:11
Avatar
Vladimír Křížek:

Ahoj, mám takový problém. Vyhazuje mi to tuto hlášku (někde výše padla, nenašel jsem ale odpověď).

cmd.exe /D /C call C:/Ruby23/bin/scs­s.bat --no-cache --update SASS.scss:E:\Do­kumenty\Progra­mování\SASS/css/SAS­S.css
Encoding::Com­patibilityError: incompatible character encodings: CP852 and UTF-8
Use --trace for backtrace.

Process finished with exit code 1

css složka včetně souborů se vytvořila, ale neaktualizuje se mi při změně. Kde dělám chybu? Díky

 
Odpovědět 18. ledna 11:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 126. Zobrazit vše