C# týden ITnetwork summer 2020
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se C#

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

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

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 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%\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.

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.


 

Všechny články v sekci
Moderní a profesionální webové portfolio
Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
50 hlasů
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity (4)

 

 

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

Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:21.1.2019 17:18

Ahoj, v článku je to napsané, hledej $path v sass v sublime text

Odpovědět
21.1.2019 17:18
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Peter Kroupa
Člen
Avatar
Peter Kroupa:20.2.2019 8:15

Zdar ako si to nakoniec vyriešil ?? mám úplne ten istý problém
Errno::ENOENT: No such file or directory @ rb_sysopen -
Use --trace for backtrace.
[Finished in 0.7s]

 
Odpovědět
20.2.2019 8:15
Avatar
Odpovídá na Peter Kroupa
Reaktivní uživatel:20.2.2019 19:01

Jestli jsi to zkoušel jako já, tedy jsi porozuměl řádku

Po stisku CTRL + B, neboli Menu->Tools->Build se nám soubor zkompiluje.

tak, že máš zkompilovat přímo .sublime-build, a ne soubor se styly, prostě kompiluj až styly, ne tohle. (Sorry, že se tak opakuju :-) )

Btw. můj komentář ze dřívějška už neplatí (už jsem pochopil), takže pokud si někdo čtete tohle (a četli jste i ten předtím), už se neobtěžujte.

Odpovědět
20.2.2019 19:01
Kdo je připraven, toho zaskočí něco jiného
Avatar
skkotlas
Člen
Avatar
skkotlas:20.5.2019 23:17

Ahoj, všetko som nainštaloval ako bolo v popise. Skopíroval som kód z nejakej stránky pre skúšku:

//scss
.navigation {
  …
}
.navigation__item {
  color: $navigation-idle-color;
  .navigation:hover & {
    color: $navigation-ready-color;
  }
}
.navigation__link {
  color: inherit;
  &:hover {
    color: $primary-color;
  }
}

Dal ctrl+b a vyhadzuje mi to

WARNING on line 3 of C:\Program Files\Sublime Text 3\testujem\div:
This selector doesn't have any properties and will not be rendered.
WARNING on line 4 of C:\Program Files\Sublime Text 3\testujem\div:
This selector doesn't have any properties and will not be rendered.
Error: Invalid CSS after "...tion-idle-color": expected expression (e.g. 1px, bold), was ";"
        on line 6 of C:\Program Files\Sublime Text 3\testujem\div
  Use --trace for backtrace.
[Finished in 1.2s with exit code 13]
[cmd: ['sass', '--update', 'C:\\Program Files\\Sublime Text 3\\testujem\\div:C:\\Program Files\\Sublime Text 3\\testujem/div.css', '--stop-on-error', '--no-cache']]
[dir: C:\Program Files\Sublime Text 3\testujem]

Čo robíš špatne prosím Vás? Dva dni sa to snažím rozbehnúť, neviem si rady...

 
Odpovědět
20.5.2019 23:17
Avatar
Odpovídá na skkotlas
Michal Štěpánek:21.5.2019 6:29

Koukni se na tu chybu lépe, hlavně na tu část, kde ti vypisuje ten error, tam ti píše kde přesně je chyba...

Error: Invalid CSS after "...tion-idle-color": expected expression (e.g. 1px, bold), was ";"
        on line 6 of C:\Program Files\Sublime Text 3\testujem\div
Odpovědět
21.5.2019 6:29
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
skkotlas
Člen
Avatar
skkotlas:21.5.2019 20:50

Ja som si ten error všimol, ale nikde v kurze nie sú napísané úplne základy.

Čítam:

Sass má dvě syntaxe - my budeme používat syntaxi SCSS (Sassy CSS)

Nemôžem využívať syntax scss? Tam je problém? Druhá syntax predpokladám je sass? Momentálne ak napíšem kód bez zložených zátvoriek a bodkočiarok, tak mi vytvorí css. Poradí mi niekto v tomto? :D

 
Odpovědět
21.5.2019 20:50
Avatar
Reaktivní uživatel:31.10.2019 17:53

Update? Ruby SASS už před nějakou dobou skončila podpora.

Odpovědět
31.10.2019 17:53
Kdo je připraven, toho zaskočí něco jiného
Avatar
Hynek Fiala
Člen
Avatar
Odpovídá na Reaktivní uživatel
Hynek Fiala:19. února 20:00

Zdravim, ted jsem se sass zacal a pouzivam auto-compiler v atomu, ktery bezi na Node.js

 
Odpovědět
19. února 20:00
Avatar
Pavel Kaplan
Člen
Avatar
Pavel Kaplan:5. května 20:07

Zdravím vás, můžete mi prosím poradit jakou cestou se vydat? Dokončil jsem základní kurz, ale tohle se mi zdá trošku overkill, pro člověka, nepolíbeného programátorskou školou... Jsou to pro mě cizí pojmy a prostě se nechytám. Příklady již v první lekci scss pojednávají o termínech mně neznámých ze základního kurzu. Měl někdo stejný problém? Budu moc rád za jakoukoliv radu kam, nebo jak pokračovat

Editováno 5. května 20:08
 
Odpovědět
5. května 20:07
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovědět
10. června 10:29
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
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 169. Zobrazit vše