1. diel - Zoznámenie s vizuálnym editorom Oxygen
Vitajte v on-line kurze, kde si ukážeme, ako pracovať s vizuálnym editorom Oxygen na redakčnom systéme WordPress. V tutoriáloch sa dozviete, ako vo WordPresse pomocou Oxygen builderu vytvoriť:
- responzívne webové stránky
- plne funkčný e-shop za použitia Woocommerce
- vlastnú šablónu pre WordPress
Možno už nejaké skúsenosti s redakčným systémom WordPress máte, pokiaľ nie, tu je skvelý on-line kurz WordPress - Základy - Online kurz.
Vývoj webových stránok v Oxygen builderi vás naučí o webe premýšľať inak, o jeho štruktúre, o súvislostiach na webe. S Oxygen builderom sa stanete skutočnými vývojármi, nielen editormi stiahnutej šablóny.
Na čo vizuálny editor Oxygen slúži a ako funguje
Vizuálny editor Oxygen slúži na tvorbu webových stránok, vrátane kompletných e-shopov na Woocommerci a na tvorbu vlastnej šablóny na redakčnom systéme WordPress. Pokiaľ sme začiatočníkmi, potom pravdepodobne využijeme prednastavené prvky v knižnici. Vizuálny editor Oxygen je však primárne vytvorený pre vývojárov, ktorí sa chcú posunúť ďalej a ponúknuť svojim klientom väčšiu kvalitu a viac možností pri tvorbe webových stránok alebo e-shopov na redakčnom systéme WordPress a preto sa odporúča znalosť HTML a CSS.K tomu nám môže pomôcť kurz Základy HTML a CSS, tiež je dobré mať povedomie o JavaScripte ( Základy programovania v JavaScripte) a pokiaľ budeme mať aj základy programovania v PHP ( Základná konštrukcia jazyka PHP) tak máme otvorenú cestu ku kariére front-endového vývojára 🙂
Princíp práce v Oxygen buildere
Ak vyvíjame webovú stránku v Oxygen builderi, potom zabudnime na všetky prednastavené a stiahnuté (alebo zakúpené) WordPress šablóny. Po inštalácii Oxygen builderu na redakčný systém WordPress nás čaká prázdny priestor bez akejkoľvek šablóny, pripravený pre našu neobmedzenú tvorbu. V Oxygen builderi šablónu vytvárame my, a tak je každý web jedinečný. V tomto kurze si ukážeme, ako vytvoriťheader a footer, ktorý môžeme dediť naprieč
stránkami, a vytvoríme šablóny pre sekcie, ktoré sa na webe opakujú. To
veľmi uľahčí našu vývojársku prácu. Naučíme sa použiť
opakujúce sa dynamické dáta, napr. pre výpisy článkov,
alebo pre archívnu stránku e-shopu.
Ak si osvojíme znalosti práce v Oxygen builderi, budeme sa môcť uchádzať aj o prácu kodéra webových stránok. Od klientov dostaneme presné grafické zadanie (napr. vo Figme) a toto zadanie potom v Oxygen buildere prevedieme 1:1 na webovú stránku.
Prečo vybrať práve Oxygen builder
Tu si uveďme aspoň niektoré z mnohých výhod vizuálneho editora Oxygen:- rýchlosť a výkon webu
- až 5 nastaviteľných breakpoints, možnosť nastavenia dokonalej responzivity
- ovládacie prvky flexboxu, CSS mriežka, horizontálne a vertikálne layout
- veľkosť Oxygen builderu (tzv. asset size) je iba 295.5 kb (pre porovnanie Elementor builder má 1.5 Mb, Divi 1.7 Mb)
- možnosť vkladať vlastné triedy a pracovať s nimi, upravovať selektory, vkladať vlastný JavaScript
Pri vývoji klientskych webov s Oxygenom dosiahneme bežne hodnoty v PageSpeed Insights na mobilnú verziu okolo 90 % a na desktopovej verzii aj 100 %. Týchto hodnôt editáciou prednastavených WordPress šablón alebo použitím iných builderov nedosiahneme, a na rýchlosti jednoducho záleží.
Viac výhod a konkrétne porovnanie Oxygen builderu s ostatnými buildermi si môžeme prečítať v oficiálnej dokumentácii.
Inštalácia a spustenie vizuálneho editora Oxygen
Tu sú dve možnosti ako inštaláciu Oxygen buildera získať:- využiť tzv. sandbox na demo verziu
- zakúpiť licenciu
Inštalácia demo verzie Oxygen builderu
Prvou možnosťou je aktivácia tzv. sandboxu, ktorou získame demo verziu na vyskúšanie. Navštívme oficiálnu webovú stránku Oxygen builderu.Tu klikneme na tlačidlo Blank Install:
Potom nasleduje overenie, či nie sme robot a na ďalšej strane klikneme opäť na tlačidlo Blank Install:
Teraz sme na známej nástenke redakčného systému WordPress av ľavom menu vidíme položku Oxygen:
Zakúpenie licencie
Druhou možnosťou je zakúpenie oficiálnej licencie. Navštívme oficiálnu webovú stránku Oxygen builderu-cenník. Licencia je doživotná, použiť ju môžeme na neobmedzené množstvo webových stránok (vzťahuje sa aj na komerčné použitie) a máme garanciu vrátenia peňazí do 60 dní. Odporúčam licenciu "Ultimate", v ktorej je rozšírenie aj pre Woocommerci a ďalšie kompozitné prvky.Pokiaľ sme si licenciu zakúpili, tak na WordPress nainštalujeme Oxygen builder ako akýkoľvek plugin na redakčnom systéme WordPress. Pokiaľ nemáme ešte nainštalovaný WordPress, tu je skvelý on-line kurz základov Wordpressu, kde sa dozvieme, ako redakčný systém WordPress získať a ako nainštalovať plugin.
V tejto chvíli teda máme nainštalovaný aj aktivovaný Oxygen builder, a položku Oxygen vidíme v ľavom menu našej WordPress inštalácie:
Bližšie zoznámenie Oxygen builderom
Teraz sa zoznámime so základným nastavením a rozvrhnutím Oxygen builderu.Home
Z ponuky v Oxygen si teraz vyberieme položku Home - tu nájdeme v sekcii Oxygen Design Library knižnicu prednastavených stránok, stačí kliknúť na Install a Different Website a vybrať si prednastavený vzhľad:
Iba spomínam, že túto možnosť tu máme. V tomto kurze sa však naučíme, ako tvoriť vlastný dizajn a vlastnú šablónu.
Túto možnosť využite skôr na testovanie, alebo na skutočne low cost projekty, kedy má klient nízky rozpočet. Ak chceme ako kodéri profesne rásť, budeme tvoriť vlastnú štruktúru.
Templates
Z ponuky v Oxygen si teraz vyberieme položku Templates (tlačidlo Go To Oxygen Templates). Položka Templates je zatiaľ prázdna, ale budú tu v budúcnosti naše šablóny, až ich spolu vytvoríme. Je dobré vedieť, kde ich neskôr hľadať 😉Settings
Z ponuky v Oxygen sa pozrieme do Settings - tam nás v tejto chvíli bude zaujímať položka CSS cache:
Túto možnosť budeme používať na regeneráciu CSS cache, napr. po zmene CSS v globálnych štýloch. Stačí kliknúť na tlačidlo Regenerate CSS cache.
Až bude v lekciách uvedené: "zregenerujeme si CSS cache", urobíme to práve tu.:-)
A to je pre dnešok všetko. Máme nainštalovaný Oxygen builder a teoreticky sme sa s ním zoznámili.
V budúcej lekcii, Základné stavebné prvky vizuálneho editora Oxygen , si ukážeme, ako pracovať s textom, ako ho formátovať, vložiť tlačidlo, odkaz a obrázky.
