Kalkulačka vo WordPress od Zeni

Kalkulačka vo WordPress od Zeni

Počas redesignu webu pre A-technology sme boli požiadaní o prepracovanie ich technologickej kalkulačky. Pre kalkulačku sme nevytvorili len redesign, ale pridali aj novú funkcionalitu.

Ako sme realizovali kompletne nový návrh webovej stránky si môžete prečítať v článku Rýchlosť a spoľahlivosť webovej stránky pre A-technology.

Kde je možné kalkulačku využiť?

Kalkulačku môžu využiť ľudia, ktorí sa rozhodujú stavať dom a radi by vedeli, aké majú možnosti v oblasti vykurovania a ďalších moderných technológií. Kalkulačka je aktuálne nastavená len pre ukážkový dom o veľkosti 160 m2, ale je v pláne pridať aj ďalšie. To ale nebráni tomu, aby si používatelia urobili prehľad o technológiách a ich približných cenách.

Akú kalkulačku sme vytvorili

Nová kalkulačka v základe funguje podobne ako tá stará, takže sa pre používateľov nič nezmenilo a nie je potrebné, aby sa naučili niečo nové pre jej používanie. Klientovi ale pribudli nové možnosti. Jednou z nich je možnosť zadania rozšírenia. Pokiaľ zákazník zaškrtne nejakú z hlavných technológií, ponúknu sa mu na výber rozšírenia. Kalkulačka tak získala na prehľadnosti a zákazník presne vie, aké technológie sú k čomu naviazané. Môže si vďaka tomu aj lepšie špecifikovať svoju požiadavku.

Možnosti rozšírení - Kalkulačka vo WordPress od Zeni
Možnosti rozšírení – Kalkulačka vo WordPress od Zeni

Ďalšou novinkou sú povinné rozšírenia. Niektoré technológie obsahujú rozšírenia, ktoré je potrebné pridať, aby všetko vôbec fungovalo. Preto sa môže stať, že niektoré rozšírenia budú už zaškrtnuté a nepôjde ich odobrať.

Povinné rozšírenia - Kalkulačka vo WordPress od Zeni
Povinné rozšírenia – Kalkulačka vo WordPress od Zeni

Posledné a asi najväčšie rozšírenie pôvodnej kalkulačky sú Dotácie. Zákazník si môže v kalkulačke vybrať jednu z ponúkaných dotácií a automaticky sa mu k nej navolia všetky potrebné technológie na jej splnenie. Vďaka tomu je pekne vidieť, s čím všetkým musí počítať, pokiaľ má o danú štátnu dotáciu záujem.

Možnosti dotácií - Kalkulačka vo WordPress od Zeni
Možnosti dotácií – Kalkulačka vo WordPress od Zeni

Ak chcete poslať svoju kalkuláciu na e-mail, je potrebné vyplniť niekoľko základných údajov. Na žiadosť klienta sme formulár rozšírili o možnosť nahrania dokumentov spojených s vašim projektom. Vďaka týmto podkladom vám môžu v A-technology pripraviť návrh na mieru, presne podľa vašich požiadaviek.

A-technology chce svojim klientom dať náhľad možností, ktoré majú, a umožňuje im vybrať si riešenie podľa svojich predstáv. Presné riešenie je potom možné konzultovať s ľuďmi z A-technology, ktorí vám dodajú presnejšie informácie.

Pokiaľ sa vám naše riešenie kalkulačky zapáčilo alebo potrebujete pomôcť s webom, neváhajte sa nám ozvať.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Chcete vytvárať čistejší, lepšie udržiavateľný kód, ktorý sa dá v prostredí WordPressu oveľa ľahšie upravovať a rozvíjať? Obrovský rozdiel môže priniesť venovanie pozornosti konceptu návrhových vzorov. Ak použijete návrhové vzory počas vývoja správne, môže vám to ušetriť aj nejaký čas.

Čo sú návrhové vzory?

Návrhové vzory nám pomáhajú vytvárať softvér (samozrejme vrátane pluginov a tém WordPressu) na základe už získaných znalostí tých pred nami. Nemusíme znovu vynachádzať koleso na riešenie niektorých bežných problémov, ktoré sa stali už mnohým vývojárom, a môžeme sa zamerať na špecifiká našej problémovej oblasti a riešiť požiadavky zákazníkov.

Návrhový vzor je opakovateľné riešenie bežne sa opakujúceho problému v návrhu softvéru. Nie je možné ho použiť priamo, ale poskytuje nám šablónu na riešenie problému, ktorú je možné opakovane použiť v mnohých podobných situáciách.

Štúdium návrhových vzorov a ich použitie pri vytváraní nového kódu môže výrazne zlepšiť jeho štruktúru a celkovú funkčnosť a škálovateľnosť.

Po ich preštudovaní môžete tiež skúsiť refaktorovať svoj starší kód pomocou návrhových vzorov a uvidíte, že kód môže byť oveľa lepšie manažovateľný.

Vysvetlenie návrhových vzorov pomocou hookov

Začnime niečím už známym pre väčšinu vývojárov WordPressu, a to sú hooky, konkrétne akcie a filtre, ktoré sa vo WordPresse veľa používajú.

Ide o špecifickú implementáciu vzoru publisher-subscriber (pub-sub). V tomto vzore definujeme publisher (vydavateľa), subscriber (odberateľa) a message broker (sprostredkovateľa správ):

Vydavatelia (publisher) zverejnia nejakú konkrétnu udalosť, v našom prípade vykonaním do_action alebo apply_filters.

Odberatelia (subscriber) sa môžu prihlásiť k určitým udalostiam volaním add_action alebo add_filter a vykonať akciu, keď nastane udalosť, ku ktorej sa prihlásili.

Sprostredkovateľ (message broker), v našom prípade jadro WordPress, ktoré zaistí, aby boli všetci odberatelia informovaní o udalostiach vydavateľov, ku ktorým sú prihlásení.

Výhody vzoru publisher-subscriber (pub-sub)

To nám prináša mnoho výhod. Vydavateľ nemusí vedieť nič o svojom odberateľovi a ani odberatelia nemusia vedieť nič o vydavateľovi, pokiaľ vedia reagovať na vzniknutú udalosť. Aj keď deaktivujeme plugin, ktorý udalosti vytvára alebo odoberá, nespôsobí to žiadne chyby.

Myslím, že je veľmi užitočné nielen odoberať hooky z jadra WordPressu alebo pluginov, ale aj vytvárať hooky v kóde a stavať okolo nich svoj kód. Nielenže uľahčíte život ostatným vývojárom, pokiaľ sa rozhodnú stavať na funkčnosti vášho pluginu alebo témy, ale verte mi, že aj váš život bude oveľa jednoduchší pri implementácii novej funkčnosti do vášho pluginu alebo témy.

Vo WordPresse je možné použiť mnoho ďalších šikovných návrhových vzorov. Väčšinou vyžadujú trochu viac práce ako hooky, ale môžu znamenať obrovský rozdiel v dizajne vášho pluginu alebo témy. Skvelým príkladom návrhového vzoru, ktorý je možné použiť v kontexte WordPressu, je vzor singleton.

Vzor singleton

Tento vzor vyžaduje znalosť objektovo orientovaného programovania. Pokiaľ s ním nie ste oboznámení, najprv si ho preštudujte a potom sa môžete vrátiť k čítaniu.

Vzor singleton obmedzuje iniciáciu určitej triedy, takže je možné vytvoriť iba jednu inštanciu triedy. To sa dá dosiahnuť vytvorením súkromného konštruktora, statickej premennej pre uloženie inštancie a statickej funkcie getInstance(). Táto funkcia zodpovedá za vytvorenie inštancie objektu, pokiaľ už nie je vytvorený a uložený v premennej $instance. Príklad môžete vidieť nižšie

class SingletonClass
{
    private static $instance = null;

    private function __construct() {}

    public static function getInstance()
    {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }
}

Zakaždým, keď sa nejaký kód pokúsi vytvoriť novú inštanciu tejto triedy, spustí sa chyba, pretože ide o súkromný konštruktor (toto je lepšie zdokumentovať, aby nedošlo k nedorozumeniu), takže jediný spôsob, ako získať inštanciu, je prostredníctvom našej funkcie getInstance().

Ako príklad použitia by bolo možné vytvoriť základnú triedu, ktorej zodpovednosťou je vytvoriť inštanciu všetkých našich funkcionalít pluginu. K tejto inštancii môžeme nadviazať napríklad konfiguračné dáta, takže sú prístupné odkiaľkoľvek v plugine a nie je nutné ich načítať z databázy alebo konfiguračného súboru viackrát, iba pri vytvorení jedinej inštancie tejto triedy.

Nepreháňajte to s používaním singleton vzoru

Myslím, že tento vzor je dobrým príkladom aj preto, že jeho prílišné používanie môže veľmi lákať, pretože v mnohých situáciách je ľahké vidieť výhody jeho použitia. Nehovorím, že by sa nemal používať, ale pred jeho použitím treba zvážiť aj jeho nevýhody.

Hlavnou nevýhodou tohto vzoru je podľa môjho názoru to, že zakaždým, keď tento vzor použijeme, viaže sa naša funkčnosť na priamu znalosť singletonovej triedy. To vytvára previazanosť kódu a môže spôsobiť, že ak sa rozhodneme niečo v singletone zmeniť, musíme urobiť mnoho zmien v celom projekte.

Pred použitím tohto vzoru alebo akéhokoľvek iného vzoru preto vždy všetko plánujte vopred, ale pokiaľ budete robiť dobrú prácu, bude to pre vás veľmi prínosné.

Ďalšie vzory

V tomto článku sme popísali dva návrhové vzory. Tieto vzory je možné použiť v mnohých situáciách pri vývoji WordPressu a môžu zlepšiť váš kód a myslenie.

Toto je však len veľmi malá ukážka toho, čo sa dá vďaka konceptu návrhových vzorov vytvoriť. Návrhových vzorov, ktoré je možné pri vývoji použiť, je oveľa viac. Ich štúdium a použitie by mohlo mať počas vývoja obrovský význam a mohlo by mať veľmi pozitívny vplyv na to, čo vyvíjate.

Pokiaľ vám nerobí problém angličtina, odporúčam vám použitie vzorov vyskúšať buď pomocou známej a kvalitnej literatúry, ako Design Patterns: Elements of Reusable Object-Oriented Software alebo Head First Design Patterns alebo na weboch ako je refactoring.guru, kde je mnoho vzorov dobre popísaných vrátane príkladov v PHP. V slovenskom jazyku vyšiel titul Návrhové vzory v PHP.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov je veľmi dôležitá, nakoľko vám môže ušetriť čas pri načítavaní vašich stránok. Tým vám môže pomôcť zvýšiť návštevnosť stránky a váš web sa tak stáva úspešnejším. 

Veľkosť obrázkov

Používajte obrázky vždy v takej veľkosti, v akej ich zobrazujete. Je zbytočné načítavať obrázok v rozlíšení 1024×1024 px, pokiaľ ho na webe zobrazujete vo veľkosti 16×16 px. 

Nepreháňajte to s množstvom obrázkov. Čím viac obrázkov, tým viac dát sa načítava a tým je načítanie stránky pomalšie. Zamyslite sa, či má obrázok pre stránku pridanú hodnotu, napríklad pri písaní článkov. 

Vo WordPress sa každý obrázok pri jeho nahrávaní zmenší do 4 rôznych veľkostí a následne si môžeme načítať verziu obrázka, ktorá nám najviac pre danú stránku vyhovuje. Napríklad veľkosť miniatúry v blogu je iná ako veľkosť obrázka priamo v blogu. 

  • Miniatúra – 150 x 150 pixelov
  • Stredná veľkosť – maximálne 300 x 300 pixelov
  • Veľká veľkosť – maximálne 1024 x 1024 pixelov
  • Plná veľkosť – pôvodná veľkosť nahraného obrázka

Pre dodatočnú optimalizáciu webu je tiež možné si do WordPressu doplniť vlastné veľkosti obrázkov. 

Formát obrázkov

Bitmapové obrázky

  • Vhodné použiť pre veľmi detailné obrázky ako napríklad fotografie.
  • Bitmapové obrázky obsahujú mapu jednotlivých pixelov.
Bitmapový obrázok
Bitmapový obrázok
  • Formát JPEG podporuje veľké množstvo farieb, preto pôsobí živšie ako napríklad PNG, JPG je najvhodnejší pre zobrazenie fotografií.
  • Formát PNG podporuje menšie množstvo farieb ako JPEG, no rozdiel od JPEG podporuje priehľadnosť, taktiež lepšie zvláda text a ilustrácie.

Na tomto meme môžete vidieť rozdiel v zobrazení ilustrácií a textov medzi JPEG a PNG:

Rozdiel v zobrazení textov medzi JPEG a PNG
Rozdiel v zobrazení textov medzi JPEG a PNG
  • Formát WebP je možné využiť ako modernú náhradu za formáty JPG a PNG. Súbory v tomto formáte sú pri rovnakej kvalite značne menšie ako u konkurenčných formátov.
  • Zaujímavé je, že tento formát bol vyvinutý v Google.
  • WebP zatiaľ nie je pre WordPress natívne podporovaný, ale sú pluginy, ktoré pridávajú podporu. My používame WordPress plugin WebP Converter for Media

Vektorová grafika

  • Môže ušetriť obrovské množstvo dát, obsahuje inštrukcie v textovej podobe na vytvorenie obrázku a nie mapu pixelov, ako je to v prípade bitmapovej grafiky. Preto pre zobrazenie väčšieho obrázku nie je nutný väčší súbor.
  • Tam, kde je to aplikovateľné, je dobré ju preferovať pred bitmapovou (pixelovou).
  • Najčastejšie sa používa pre logá a rôzne ikony.
  • Veľkosť súborov narastá s množstvom detailov na obrázku.

Výhodný formát pre vektorovú grafiku na webe je SVG.

SVG obrázky nie je možné nahrať do knižníc médií vo WordPress. Tieto obrázky môžeme zobraziť pomocou kódu v plugine alebo v téme pri tvorbe HTML štruktúry, buď dodatočným načítaním alebo vnorením do HTML štruktúry.

Vo WordPress je práve možnosť použitia priamo v HTML užitočná aj v Gutenberg alebo Classic editore. SVG obrázky môžeme do editora vložiť ako vlastné HTML. Výhodou SVG obrázkov je tiež, že je možné upraviť ich zobrazenie pomocou CSS štýlovania, nakoľko sú bežná súčasť HTML.

Škálovateľnosť
Škálovateľnosť

Kompresia obrázkov

Obrázkové formáty podporujú zväčša viac úrovní kompresie, kde je pri silnejšej kompresii možné ušetriť viac dát, no na úkor kvality.

Pre každý obrázok, ktorý nahrávate na váš web, by mala byť aplikovaná kompresia. Viac skomprimované obrázky sú menšie a rýchlejšie sa načítajú používateľovi vášho webu. Netreba však zabúdať, že kompresiou sa stráca kvalita a preto treba zvoliť kompresiu, pri ktorej budú detaily obrázkov dostatočne zachované.

Príliš zkomprimovaný obrázok
Príliš zkomprimovaný obrázok

Tu môžete vidieť veľmi výhodný formát WebP, ktorý poskytuje najlepší pomer veľkosti súboru k jeho kvalite, v porovnaní s JPEG formátom.

Porovnanie zobrazenia formátu WebP a JPEG
Porovnanie zobrazenia formátu WebP a JPEG

WordPress pluginy pre kompresiu obrázkov

S kompresiou obrázkov vám môže pomôcť dobrý WordPress plugin. Pluginy existujú rôzne, no tu vám spomenieme len niektoré pluginy pre kompresiu obrázkov. 

  • EWWW Image Optimizer – Tento WordPress plugin je bezplatný a pri nahrávaní obrázkov ich automaticky komprimuje
  • Smush – okrem kompresie obrázkov obsahuje aj iné užitočné optimalizačné techniky.
  • WebP Converter for Media – Nahrádza súbory JPG a PNG formátom WebP, čím môžete bez straty kvality ušetriť viac ako polovicu zaťaženia. Po inštalácií pluginu sa obrázky automaticky prevedú do nového formátu. 

Optimalizácia a kompresia obrázkov je len jedným z mnohých aspektov, ktoré vám môžu dopomôcť so zrýchlením vašej stránky a so zvýšením jej návštevnosti. Ak sa chcete dozvedieť viac, prečítajte si článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress alebo Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Ak máte záujem o viac informácií a potrebujete poradiť či pomôcť so zrýchlením vašej webovej stránky, napíšte nám a my vám radi pomôžeme. 

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

JavaScript a CSS spomaľujú načítavanie stránky, pretože sa musia donačítať a spustiť. Navyše, veľa JavaScriptu môže mať veľmi negatívny dopad na výkon, reakčnosť a responzívnosť webu. Prečítajte si, ako optimalizujeme CSS a JavaScript vo WordPress a tým prispievame k zrýchleniu webových stránok. 

Načítajte menej JavaScriptu a CSS

Zvážte výber pluginov a tém

Niektoré pluginy a témy vo WordPress používajú veľmi veľaJavaScriptu a načítavajú objemné CSS, preto zvážte ich použitie a skúste nájsť vhodné alternatívy. Mnohé načítavajú Javascript a CSS aj na stránkach, na ktoré daný plugin/téma nemajú vôbec vplyv, a teda predlžujú načítavanie aj tam, kde to nie je vôbec nutné.

Zamyslite sa nad potrebnou funkcionalitou

Pri práci s WordPressom si vždy dávame pozor, aby sa načítalo len to, čo je potrebné (CSS štýly, JavaScript) a tak pripravíme stránku na rýchlejšie načítanie. Napríklad odstránime nepotrebné CSS a JS súbory.

Pre interaktívne funkcie využite CSS namiesto JS

Pokiaľ programujete obsah pre WordPress, je dobré sa zamyslieť, či na všetko, na čo používate JavaScript je naozaj JavaScript nutný. Veľa funkcionalít, na ktoré bolo nutné použiť JavaScript v minulosti, je dnes možné docieliť pomocou moderného CSS z oveľa menším dopadom na výkon. Toto sme využili napríklad pri tvorbe stránky pre i4comfort alebo pri tvorbe Menu na mieru pre Engeto bez JavaScriptu. Webová stránka obsahuje veľa vizuálnych efektov, ktoré sme zakomponovali tak, aby stránku nespomaľovali. Viac sa môžete dočítať v článku Tvorba webovej stránky pre i4comfort

Kód manažujúci JS a CSS

Vždy sa treba zamyslieť nad tým, kde je vaše CSS a JavaScript potrebné. Je dobré rozbiť veľké CSS súbory na niekoľko menších a načítať ich podľa potreby. Rovnako môžeme pristupovať aj k JavaScript kódu.

Na tvorbu tém najčastejšie používame Sage, ktorý takýto manažment ulahčuje a počíta s jeho nutnosťou. 

Prečítajte si viac o tom Prečo je dobré mať stránku vytvorenú na Sage?

Optimalizujte CSS a JavaScript pomocou minifikovania

Minifikovaním sa zo súborov odstráni všetko nepotrebné (riadky, medzery, skrátia sa názvy premenných atď…). Textové súbory s CSS, JS sa upravia tak, aby zaberali menej miesta, čím sa šetrí veľkosť súborov a rýchlejšie sa načítavajú.

Rozdiel medzi originálnym a minifikovaným kódom
Rozdiel medzi originálnym a minifikovaným kódom

Existuje mnoho dobrých WordPress pluginov a tém, ktoré minifikujú kód. V našich pluginoch a témach kód minifikujeme a zároveň si uchovávame pôvodné súbory, ktoré sa dajú jednoduchšie modifikovať

Ako na to?

Váš JavaScript a CSS je možné minifikovať pomocou online nástrojov,  ako napríklad Closure Compiler, či Minify Code. Takýmto spôsobom je možné minifikovať aj JavaScript a CSS, ktoré vkladáte pomocou pluginov či customizera.

Lepšou alternatívou na tento účel je nastaviť build vašeho pluginu/témy. Je možné použiť a nastaviť Webpack alebo nástroje ako node-minify. Takýto prístup vám umožní automatické minifikovanie vašich súborov, no vyžaduje pomerne veľa času a nervov, hlavne ak si zvolíte Webpack. Preto je lepšie siahnuť po predpripravenom riešení pre váš plugin alebo tému v podobe starter projektu, ako napríklad Roots Sage pre tému. Pre veľké projekty, na ktorých už pracujete a nie je jednoduché ich zmigrovať, je však nutné si dopomôcť spomínanými nástrojmi.

Ako použiť minifikáciu bez vývojárskych skúseností?

K optimalizovaniu všetkých CSS a JS súborov, ktoré vaša stránka používa, je možné si dopomôcť využitím pluginu Fast Velocity Minify. Tento plugin funguje tak, že pri prvom nenacachovanom načítaní stránky vygeneruje minifikované CSS a JS súbory, ktoré sa potom načítavajú namiesto pôvodných súborov. Môžete takto značne zrýchliť načítavanie CSS a JavaScriptu u pluginov a tém, ktoré nemajú minifikovaný JavaScript a CSS.

Menej je viac

Pre zrýchlenie vašej webovej stránky a tým aj zvýšenie počtu návštevníkov si treba uvedomiť, že menej je v tomto prípade naozaj viac. Ak bude vaša stránka zahltená množstvom nepotrebných funkcionalít, je jasné, že to odrazí aj na výkone. 

Spôsobov, akými zrýchlite vaše webové stránky, a tým zvýšite ich návštevnosť, je veľmi veľa. Môžete dlhšie stránky rozdeliť na menšie, obmedziť množstvo nepotrebných obrázkov alebo sa snažiť o jednoduchší kód. O tomto sme písali aj podrobnejší článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vášho webu vo WordPress

Pokiaľ máte nejaké otázky alebo potrebujete pomôcť so zrýchlením či optimalizovaním webu, sme tu pre vás, neváhajte sa nám ozvať

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

Všetko sa zrýchľuje. Mnohí chcú mať najdôležitejšie informácie čo najrýchlejšie a získavať ich bez zbytočného čakania. Rýchlosť je v týchto dňoch očakávaná hlavne pri prehliadaní webových stránok. Nedostatočný výkon a pomalé načítavanie vedú k zvýšeniu miery opustenia vašej stránky. Ako dopomôcť k zrýchleniu webovej stránky vo WordPress sa dozviete v dnešnom článku. 

Prečo je rýchlosť webovej stránky dôležitá?

Google odporúča za najoptimálnejšiu rýchlosť načítania v prípade 3G pripojenia 5 a menej sekúnd. Ak čas načítania vašej stránky prejde z 1 sekundy na 3, pravdepodobnosť okamžitého odchodu sa zvyšuje o 32 %. V prípade načítania webu z 1 sekundy na 10 sa zvyšuje až o 123 %! Alarmujúce však je, že podľa Google analýzy (2018), sa mobilné weby načítavajú v priemere až 15 sekúndRýchlosť webovej stránky ovplyvňuje až takmer 70 % spotrebiteľov. Pravdepodobnosť ich nákupu s rýchlosťou webu stúpa. Pokiaľ je webová stránka pomalá, prichádzate o zákazníkov a znižujete mieru konverzieRýchlosť vašej webovej stránky je tiež veľmi výrazným SEO faktorom. Preto sa pri tvorbe webových stránok vo WordPress vždy snažíme dbať na rýchlosť a výkon webu a robíme všetko preto, aby sme ju správne optimalizovali bez použitia prílišného množstva pluginov.Objektívny prehľad o tom, či je váš web rýchly, si môžete spraviť pomocou rôznych nástrojov, odporúčame Google PageSpeed Insights, no existuje mnoho ďalších napríklad GTmetrix či WebPageTest. Poďme sa pozrieť na niektoré z možností, akými zlepšujeme výkon webových stránok a optimalizujeme ich.

1. Menej reklám

Veľké množstvo reklám môže uškodiť vášmu webu, nakoľko reklamy načítavajú JavaScript, CSS a média, čím môžu veľmi spomaliť stránku a tiež zhoršiť užívateľský zážitok. 

2. Rozdeľte dlhé stránky

Dlhé stránky spomaľujú načítavanie webu.

  • Pokiaľ má niektorá z vašich stránok na webe príliš veľa obsahu, možno by bolo vhodnejšie ju rozdeliť na niekoľko
  • Na dĺžku dbajte aj pri písaní článkov na váš blog. Niekedy je lepšie článok rozdeliť na viaceré články, čím tiež prispejete k zrýchleniu webu. 

3. Aktuálnosť WordPress, pluginov a PHP

Vo WordPress vývojári pluginov neustále pracujú na vylepšeniach a preto je dobré si ich pravidelne aktualizovať. Veľký vplyv na výkon WordPress stránky má aj verzia PHP. Cloudways zverejnili výsledky ich benchmarkingového testu, ktorý sledoval zlepšovanie výkonu stránok od verzie PHP 5.6 po 8.0. Nižšie uvedený graf ukazuje, že výkon sa neustále zlepšuje. Oproti súčasnému PHP 8.0 s najrýchlejším časom načítania 164 ms vyšiel PHP 5.6 takmer 3-krát pomalší.

Zeni team - priemerná doba odozvy
Zeni team – priemerná doba odozvy

4. Caching

Prednačíta a nachystá obsah stránky, aby sa minimalizovalo počítanie a načítavanie z databázy pri prístupe na stránku. Používateľ dostane pri načítavaní stránky predpripravenú verziu, čím sa môže až niekoľkonásobne zvýšiťnačítanie webu. Aby sa v budúcnosti mohli požiadavky na údaje vyriešiť rýchlejšie, caching si tieto údaje ukladá. Súčasťou každého produkčného webu by mal byť určite Caching plugin, vďaka ktorému získate obrovské množstvo výkonu webu. Pre našich WordPress klientov nastavujeme Redis Cache, ktoré umožňuje cachovanie pomocou in memory databázy.

5. CDN (Content Delivery Network)

  • Ide o skupinu serverov, ktoré sú geograficky bližšie k vašim návštevníkom, a tak znižujú odozvu pri načítavaní stránky. 
  • Po nastavení CDN sa váš obsah (obrázky, videá…) uloží do vyrovnávacej pamäte na proxy serveroch a načítava sa zo serverav blízkosti polohy vášho návštevníka, vďaka čomu sa zníži odozva a obsah sa načíta rýchlejšie
  • Pre našich klientov používame službu Cloudfare CDN, ktorý im nastavujeme a je štandartný pre všetky stránky, ktoré máme v správe.

6. Kvalitný hosting

Ak si myslíte, že ste pre zrýchlenie vášho webu skúšali už všetko, no stále nedosahujete želané výsledky, je vhodné sa zamyslieť nad zmenou poskytovateľa hostingu. My v Zeni vám vieme ponúknuť hosting, ktorý zrýchli váš web. Tiež dokážeme pomôcť so zrýchlením webu a zvýšením vašej návštevnosti. Ozvite sa nám a radi vám poradíme

ODKAZY

  1. Page Speed Report
  2. New Industry Benchmarsk
  3. Mobile site speed statistics
  4. Performance Benchmarks for WordPress

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

10 rokov spoločnosti

10 rokov spoločnosti

Zeni team s. r. o. tento rok oslavuje svoje 10. výročie. Všetko začalo 19. decembra v roku 2011, keď Róbert a Dávid založili spoločnosť Vitix company s.r.o.. Tá mala pôvodne slúžiť ako základ pre e-shop s pneumatikami, ktorý si vytvorili. Online priestor sa im zapáčil a postupne začali vyvíjať webové stránky aj pre ostatných zákazníkov. 

Najskôr sa Dávid a Róbert pokúšali o vývoj vlastného CMS systému, ktorý niesol pracovný názov CMS Delfín. Po nejakej dobe sa rozhodli, že pre zvýšenie kvality bude vhodnejšie začať budovať na tom, čo už je vytvorené, a čo vytvorila WordPress komunita.

Prečo WordPress?

WordPress sa stal naším obľúbeným nástrojom pre tvorbu webových stránok, a nie je to tak len pre nás. Svedčí o tom aj fakt, že viac ako 43 % stránok využíva práve WordPress. Nepoužíváme WordPress preto, že by sme si mysleli, že je tým najlepším riešením na všetko. Používáme ho preto, že ho máme najradšej.

  • Je flexibilný – postavíte na ňom čokoľvek.
  • Umožňuje jednoducho nasadzovať i testovať zmeny pre udržanie kroku s neustále premenlivou dobou.
  • Má skvelú, skúsenú a znalú komunitu.

Podrobnejšie si dôvody, prečo staviame weby na WordPress, môžete prečítať na našej stránke.

WordPress komunita

S používaním WordPress úzko súvisí aj WordPress komunita. Róbert jedneho krásného dňa vytiahol Dávida na WordCamp do Bratislavy a bolo postarané. Dávida prednášky tak zaujali, že sa začal aktívne zapájať do diania vo WordPress komunite. Dávid sa dohodol s Jánom Bočíncom zo spoločnosti Webikon a začali spolu organizovať Brnenské WordPress meetupy. Následoval WordCamp Brno 2017 až 2019. Samozrejme návšteva a pomoc na niektorých WordCamp – Praha, Bratislava, Europe Viedeň, Paríž, Belehrad. 

Kvalita a rast

Nielen činnosťou vo WordPress komunite je človek živý, a tak Dávid začal aktívne akvizovať klientov, ktorí podľa jeho uváženia potrebujú kvalitný web na predaj ich výrobkov či služieb. Na začiatku si dal zdravý cieľ, a to každý rok zvýšiť obrat spoločnosti ruka v ruke so zvyšujúcou sa kvalitou. Tohtoročný obrat tak činí už vyše 3,5 milióna. Medziročný nárast o 35%.

Dávid a Róbert na realizáciu svojej vízie potrebujú okolo seba tím, ktorý sa z roka na rok zväčšuje. Hneď na začiatku si dali predsavzatie, že v tíme chcú mať nielen seniorov, ktorí vykúzlia super kód, kvalitný plugin, či skvele nastavia server, ale aj juniorov, ktorí sa budú od seniorov učiť a následne posilnia ich rady. Dnes sú v Zeni posádke grafik, copywriter, frontend a backend vývojári, ďalej marketérka, copywriterka, SEO špecialista a v neposlednom rade testerka.

Prečo oslavujeme 10. výročie a prečo je pre nás tak dôležité?

Štatistiky o firmách uvádzajú, že zo 100 firiem prežije prvých 5 rokov iba cca 10. Ďalších 5 rokov prežijú už len cca 3, a to už o niečom svedčí. My v týchto dňoch oslavujeme 10 rokov. 10 rokov bez úverov, pôžičiek, 10 rokov budovania systému, o ktorom môžeme povedať, že funguje. Takto sme slávili 10. výročie:

K tomuto výročiu sme si nechali urobiť audit u 2 rôznych spoločností. Jeden z nich od spoločnosti Bisnode (po novom Dun&Bradstreet), v ktorej vás „stiahnu z kože” a druhý u Prověřená společnost. U prvej spoločnosti máme hodnotenie AA, pričom AAA je najvyššia méta. U druhej sme na začiatku roka dostali strieborné ocenenie a tesne pred výročím zlaté

Za tú dobu sme spravili množstvo práce. Vytvorili sme mnoho rýchlych a spoľahlivých webov, tiež prístupné weby pre školy a škôlky, spustili vlastný plugin, vysadili ovocné stromy pre radosť a pokračujeme s ďalšími víziami. Sme radi, že nás aj našich kolegov práca v našej slobodnej spoločnosti baví a že sa navzájom obohacujeme. Tešia nás všetky spolupráce a tešíme sa na nové!

Zdieľajte na:

Ďalšie články:

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Chcete vytvárať čistejší, lepšie udržiavateľný kód, ktorý sa dá v prostredí WordPressu oveľa ľahšie upravovať a rozvíjať? Obrovský rozdiel môže priniesť venovanie pozornosti konceptu návrhových vzorov. Ak použijete návrhové vzory počas vývoja správne, môže vám to ušetriť aj nejaký čas.

Čítať viac Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Zeni a výsadba stromov

Zeni a výsadba stromov

Naša spoločnosť Zeni team s.r.o., ako súčasť WordPress komunity, sa v tomto roku rozhodla podporiť myšlienku týmu konferencie WordCamp, ktorí v roku 2019 začali s výsadbou stromov nového ovocného sadu v Otniciach. Vďaka nám tento rok vznikla jeho druhá polovica. 

WordPress komunita a výsadba

V Zeni radi podporíme dobré myšlienky a jednou z tých, ktorá nás zaujala, bola aj myšlienka vysádzanie stromov, s ktorou pred dvoma rokmi začala WordPress komunita. WordPress akcia výsadby vtedy priniesla do Otníc až 45 nových stromov! Myšlienka nás zaujala o to viac, keď sme zistili, že vysadené stromy by mali byť ovocné a vznikne tak chutný a voňavý ovocný sad. Ovocné stromy majú navyše najdlhšiu životnosť, pretože tie na vysokokmeni vydržia rásť aj 70 rokov. Okoloidúci si tak budú môcť na ovocí pochutnať dlhodobo. 

WordPress komunita vďaka novým stromom tiež vyrovnala v roku 2019 CO2 stopu WordCamp Brno 2019 konferencie, ktorá sa však v nasledujúcich rokoch konala len v on-line priestore. Zeni sa WordCampu Brno 2019 účastnilo tiež. O udalosti si môžete prečítať viac v článku Zeni a WordCamp Brno 2019.

Výsadba stromov 

Zeni team tento rok oslavuje svoje 10. narodeniny a preto sme prišli s nápadom, že k 45 stromom vysadeným na akcii WordPress prispejeme a dosadíme ďalších 45. Spoločne s obyvateľmi Otníc sa tak 13.11.2021 vysadila druhá polovica ovocného sadu a vzniklo potešenie pre všetkých, ktorí pôjdu okolo. 

výsadba ovocných stromů

Ovocný sad bude ponúkať drobné občerstvenie na 90 rôznych stromoch medzi ktorými si môžete pomaškrtiť na čerešniach, jablkách, hruškách, marhuliach, či slivkách. Vďaka rôznym odrodám nájdete počas vašej prechádzky ovocie na stromoch od jari do jesene

Vízia do budúcnosti

Kedysi bývali sady v ktorých sme sa mohli prejsť a zamaškrtiť si, takmer pri každej dedine. Zeni by rada do budúcna každý rok takto prispela 50 ovocných stromov, ktoré si budú môcť obyvatelia dedín spoločne vysadiť. Ovocné sady, ktoré vzniknú na pozemkoch dedín, budú môcť navštíviť všetci, ktorí pôjdu okolo. Vytvoríme tak malú ovocnú radosť nie len pre ľudí ale aj pre prírodu a matku Zem, ktorá stromy v dnešnej dobe veľmi potrebuje. 

Obyvatelia Otníc vysádzajú ovocné stromy

O projekte vytvárania ovocných sadov budete od nás ešte určite počuť! Ak nechcete nič zmeškať alebo sa chcete dozvedať novinky o svete WordPress, prihláste sa na odber noviniek, radi vás privítame. 

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Tvorba webovej stránky pre i4comfort

Tvorba webovej stránky pre i4comfort

Aplikácia i4comfort od spoločnosti A-technology prináša komplexné a jednoduché riešenia ovládania technológií vo vašom dome na diaľku. Myšlienka úspory v oblasti vykurovania, a tým aj zmenšenia CO2 stopy pomocou inteligentného ovládania technológií, nás zaujala a bolo nám potešením podieľať sa na tvorbe webovej stránky pre túto aplikáciu.

Prečo a ako vznikla stránka

Stránky pre i4comfort sme vytvárali v CMS WordPress pre existujúceho klienta, ktorému sme už tento rok spustili kompletne nový produkčný web. Spoločnosť A-TECHNOLOGY s.r.o. má svoje prezentačné stránky a-technology.cz, preto bolo dôležité nadesignovať webovú stránku i4comfort v podobnom duchu ako tú materskú a zároveň webovej stránke vytvoriť vlastnú identitu. 

Porovnanie starej a novej stránky

Stará webová stránka i4comfort mala viaceré nedostatky:

  • Nespĺňala kritériá zabezpečenia.
  • Chýbalo vývojové prostredie v podobe stagingu
  • Logo a vzhľad boli zastaralé.
  • Web nebol responzívny.
Stará webová stránka

Nová stránka:

  • Webová stránka je plne responzívna.
  • Má na viacerých miestach CTA tlačidlo, ktoré vyzýva k akcii, vďaka čomu je väčšia pravdepodobnosť získania si zákazníka. 
  • Vytvorili sme nové logo a nadizajnovali nový vzhľad stránky.
Hlavná stránka i4comfort

Grafika webovej stránky

  • Tvorba webovej stránky vo WordPress pre i4comfort graficky nadväzovala na spomínanú materskú stránku.
  • Stránka má unikátny a zapamätateľný design.
  • Vytvorením osobitej identity stránky je samozrejmé, že ide o samostatný web.
  • Zákazník a-technology zároveň získava familiárny pocit.
  • Informácie nie sú komunikované len textovo, ale sú znázornené na mnohých miestach graficky, vďaka čomu sú viac zapamätateľné a prehľadné.

Technické funkcie

Moderný zážitok

Webová stránka disponuje mnohými vizuálnymi efektami, ktoré sú zakomponované tak, že stránku nespomaľujú. Web je tiež responzívny na akomkoľvek zariadení. 

  • Mnohé animácie a interaktívne časti využívajú čisto moderné možnosti štýlovania (css).
  • Nie je nutné donačítavať JavaScript ani kvôli niektorým rozklikateľným interaktívnym sekciám ako to býva na mnohých iných stránkach.
  • Stránka je tak rýchlejšia, zároveň poskytuje rovnako kvalitný zážitok, ako napríklad tu:
Vizuálne efekty webovej stránky

Stránka na používateľa reaguje

Symboly jednotlivých technológií sa menia podľa toho o čom používateľ momentálne číta. Podľa pozícii na stránke sa mení aj CTA tlačidlo, ikony, či navigačné prvky (horné menu, bodky vpravo). Spomenuté si môžete prezrieť na stránke ,,Jak funguje i4comfort”.

Webová stránka reaguje na užívateľa

Na stránke ,,Možnosti využití” sa tiež interaktívne menia obrázky podľa toho o čom používateľ číta. Čitateľ si tak jednoduchšie predstaví jednotlivé prvky o ktorých číta a tiež si ich lepšie zapamätá. Toto všetko vytvára unikátnu, rýchlu a interaktívnu skúsenosť, ktorá zaujme používateľa.

Výhody novej webovej stránky

Téma na sage

Ľahká konfigurovateľnosť

  • Nami naprogramovaná téma pre WordPress umožňuje ľahkú konfigurovateľnosť.
  • Pre každú stránku je osobitne nastaviteľné správanie a štýl hlavičky stránky.
  • Všetek obsah je jednoducho editovateľný bez nutného zásahu vývojára.

Použiteľnosť z hľadiska mobil/desktop

Desktopové prostredie nie je ani zďaleka len zväčšeným mobilným prostredím. Myslíme na dobrú skúsenosť pre každého užívateľa.

  • Na desktope je využívaný všetok priestor, vďaka čomu je na obrazovke poskytnutých čo najviac informácií a ani na veľkej obrazovke web nepôsobí prázdny
  • Používateľská skúsenosť na mobile je zároveň prispôsobená používaniu pomocou prsta a menšej obrazovke. 
  • Na mobile je všetko jednoducho klikateľné, ľahko a rýchlo dostupné. 
  • Mnohé sekcie vyzerajú v porovnaní mobilu a desktopu výrazne odlišne
  • Pre lepší zážitok boli pre mobil mnohé časti zjednodušené, niektoré vizuálne aspekty používané pre desktop vynechané, nakoľko nemali pre mobilného používateľa pridanú hodnotu
Webová stránka je responzívna

Pre i4comfort sme vytvorili nový web s množstvom vychytávok, ktorý je zároveň rýchly a prehľadný. Pokiaľ potrebujete pomôcť s tvorbou webovej stránky a chcete poskytnúť svojim zákazníkom kvalitný zážitok, neváhajte sa na nás obrátiť, radi vám pomôžeme.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Rýchlosť a spoľahlivosť webovej stránky pre A-technology

Rýchlosť a spoľahlivosť webovej stránky pre A-technology

Jedným z našich spokojných zákazníkov je aj A-technology. Realizovali sme pre nich kompletne nový návrh webovej stránky – od grafického návrhu, cez tému a plugin na mieru, až po plne funkčný web. Prečítajte si, ako sme postupovali pri tvorbe webovej stránky, aké funkcionality sme vytvorili a ako sme dosiahli rýchlosť a spoľahlivosť ich webovej stránky. 

A-technology 

Spoločnosť A-technology už od roku 2006 realizuje riešenie systémov vykurovania a chladenia pri výstavbe a prevádzke komerčných a obytných budov. Ponúkajú taktiež systémy technologického ohrevu a chladenia ako napríklad solárne systémy, klimatizácie, či podlahové vykurovanie. 

Pre A-technology sme vytvorili nový návrh webovej stránky a spolu s ním sme do webu zakomponovali rôzne zaujímavé funkcionality podľa želania klienta.

Ako sme postupovali pri tvorbe webovej stránky?

  1. Najdôležitejšia je komunikácia s klientom. V prvom rade sme si spoločne ujasnili predstavu a vydefinovali si, čo klient požaduje.
  2. Náš grafik Jarda vytvoril wireframy v ktorých definoval konkrétne prvky, ktoré bude webová stránka obsahovať. Následne dodal grafický návrh klientovi, ktorý sme spoločne prediskutovali.
  3. Nasledovala samotná tvorba témy a pluginu na mieru podľa požiadaviek klienta, o ktorú sa postarali developeri ja (Daniel) a Zbyněk.
  4. Po vytvorení stránky bola stará webová stránka nahradená novou – rýchlejšou a spoľahlivejšou
  5. Postupne sme pridávali ďalšie funkcionality a predávali nové zmeny klientovi. 

Aké funkcionality sme robili pre A-technology?

  • Komunikácia s externým servisom pre objednávku servisu

Zabezpečili sme okamžité riešenie požiadaviek klientov vďaka napojeniu formulára priamo na dodávateľa. Dodávateľ dostane vyplnený formulár priamo do jeho interného systému HELIOS cez API, vďaka čomu môže automaticky poskytnúť žiadaný servis klientovi, bez zbytočných prestrojov a zároveň si môže pracovník servisu naplánovať efektívne pracovný deň bez zbytočne najazdených kilomentrov.

  • Automatické vypĺňanie adresy 

Súčasťou formulára je aj automatické vyplnenie adresy na základe zvoleného miesta na mape vo formulároch, čo ušetrí čas.

  • Výpočet času čítania článku

Každá aktualita obsahuje informáciu o tom, koľko času zaberie čítanie článku. Vďaka tejto funkcionalite čitateľ môže očakávať, ako dlho bude na stránke a v konečnom dôsledku to môže prispieť k zníženiu miery opúšťania stránky čitateľom.

  • Prezentačné stránky

Ide o tradičnejšie, no veľmi dôležité funkcionality ako referencie, používané technológie, informačné stránky, či blog.

  • Kalkulačka

Vypočíta predbežnú cenu objednávky v € a CZK, na základe zadaných technológií, ktoré si zákazník želá aby služba obsahovala. Táto funkcionalita sa pre klienta momentálne pripravuje.

Rýchla a spoľahlivá webová stránka

Rýchlosť

  • Používame len nutné minimum javascriptu.
  • Štýlovanie (css) je v téme rozdelené tak, aby sa načítalo len to, čo je potrebné pre danú stránku.
  • Lazy load médií– načítavanie obrázkov atď. neblokuje prehliadač a postupne sa donačítavajú, aby bola webová stránka čo najskôr interaktívna.
  • Tvoríme kód s dôrazom na výkon stránky.
  • Využívame čo najmenej pluginov tretích strán, ktoré bežia pri načítavaní stránky.
  • Používame caching, ktorý výrazne urýchľuje načítavanie stránok.
Rýchla webová stránka

Spoľahlivosť

  • Pri tvorbe webových stránok používame len overené a otestované pluginy. O väčšinu funkcionalít sa starajú developeri, čím sa limituje závislosť na tretích stranách. Prípadné problémy preto môžeme riešiť priamo.
  • Všetky pluginy sú pravidelne updatované kvôli opravám chýb a bezpečnostným dieram.
  • Pred tým, ako čokoľvek pridáme na produkčný server, to otestujeme na stagingu.
  • Pravidelne monitorujeme stav serverov.

Možnosť pridania funkcií na základe požiadavky klienta

Na modifikovateľnosť a rozšíriteľnosť myslíme pri všetkých nových funkcionalitách. Vytvorili sme custom plugin a tému na Sage, ktoré majú prehľadnú štruktúru umožňujúcu pokračovať ďalej vo vývoji. Jednoducho môžeme pridávať nové funckie, pretože počítame s tým, že klient môže kedykoľvek požadovať akúkoľvek zmenu. 

Prístupnosť stránky

Aj pre A- Technology sme vytvorili webovú stránku tak, aby spĺňala všetky kritériá. Web sme spravili čo najviac prístupný, optimalizovaný pre mobily, ktorý je rýchly, bezpečný a spoľahlivý. Ak máte aj vy záujem o takúto webovú stránku, neváhajte sa na nás obrátiť.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Serial Killer – Prečo je dobré mať webovú stránku vytvorenú na Sage?

Serial Killer Prečo je dobré mať webovú stránku vytvorenú na Sage? 

Aj Zeni team mal možnosť podieľať sa na medzinárodnom festivale TV a web seriálov – Serial Killer. Vytvorili sme preň webovú stránku, ktorej téma je postavená na Sage. Ako sme pri tvorbe webovej stránky postupovali a tiež výhody stránky vytvorenej na téme v Sage sa dozviete v článku. 

Čo je Serial Killer?

Určite už tušíte, že festival Serial Killer poteší všetkých nadšencov seriálovej kultúry. Tvorcovia najlepších seriálových noviniek zo strednej a východnej Európy sa každoročne stretávajú na medzinárodnom súťažnom festivale televíznych a webových seriálov. Na veľkom plátne si môžu pozrieť premiéry, ktoré inde nemajú možnosť vidieť. Navyše, v sekcii Fokus sa festival každým rokom zameria na inú krajinu a predstaví jej seriálovú tvorbu. 

Tvorba webovej stránky 

Festival nás zaujal a aj preto sme sa rozhodli zapojiť do tvorby ich webovej stránky

HTML štruktúru najprv vytvoril grafik Martin Pecina, následne bolo nutné rozdeliť ju na menšie časti a vytvoriť za ňou celý web.

Z celkového zadania a grafiky sme si rozdelili stránku na sekcie:

  • seriály;
  • panely;
  • videá;
  • prednášajúci;
  • členovia tímu.

Pri každej zo spomenutých sekcií sme identifikovali, ktoré dáta bude potrebné vypĺňať a pridali sme možnosť ich editácie do administrácie. Dáta bolo tiež potrebné napasovať do pripravenej grafiky a pomocou nich tak oživiť obsah

Aké funkcionality sme robili pre Serial Killer?

Hromadné stiahnutie fotiek z jednotlivých dní z presskit 

Klient nám zadal, aby bolo možné stiahnuť všetky fotky z jednotlivých dní z presskit a to v zip súbore. Pripravili sme funkcionalitu, ktorá všetky dané fotky zazipuje a užívateľ si ich môže stiahnúť.

Predplatiteľská sekcia

Klient potreboval pridať na web možnosť kúpiť si predplatné do internej sekcie webu. Pripravili sme prepojenie s Woocommerce a Gravity Forms, ktoré zaisťujú nákup prístupov a tiež prihlásenie a obmedzenie prístupov na určité stránky.

Archivácia starého ročníka

Toto je jedna z nových features, ktoré stránka obsahuje. Klient požadoval, aby bolo možné nastaviť jednotlivé seriály, seriálové sekcie, panely a prednášajúcich ako archivované. Tie sa potom nebudú zobrazovať na štandartných miestach a klient si ich bude môcť pridať na vlastné stránky.

Prečo je dobré mať tému stránky vytvorenú na Sage?

  • Najlepší nástroj na tvorbu WordPress šablón

Dáva programátorovi skvelé možnosti, ako udržať svoj kód prehľadný a čitateľný. Či už sa jedná o písanie CSS s SASS, Blade templaty, Javascript routing alebo Controlery, v ktorých je možné špecifikovať funkcionalitu pre presne danú šablónu. S takýmto nástrojom je práca omnoho zábavnejšia.

  • Obsahuje Laravel blade templating

Veľmi uľahčuje prácu s vytváraním jednoduchých a prehľadných šablón. My sme si k nemu navyše doinštalovali ACF Sage directives, čo nám značne uľahčiloa sprehľadnilo prácu s ACF fieldmi. 

  • Pretože JavaScript routing 

Sage už v základe obsahuje funkcionalitu, ktorá umožňuje rozdeliť JavaScript do súborov a potom ho načítať na stránkach podľa vášho určenia. JavaScript je vďaka tomu prehľadnejší a nemusíte sa obávať, že sa na niektorej stránke spustí niečo nechceného.

Výkonnosť webovej stránky

Či na vašej stránke čitateľ ostane záleží hlavne od toho, či ho dokážete čo najskôr zaujať. Ako ho ale zaujmete, ak sa vaša stránka bude načítavať nekonečné hodiny? Preto je pre vašu webovú stránku veľmi dôležitá jej výkonnosť, spoľahlivosť a rýchlosť

Splnenie týchto požiadaviek vám samotný Sage nezaručí. Avšak dobrý programátor v spojení s tak dobrým nástrojom ako je Sage môže spraviť zázraky. Výkonnosť a rýchlosť totiž vždy záleží na samotnom programátorovi.

Tak, ako aj pri ďalších našich projektoch sme sa snažili načítať vždy len všetko potrebné a pripravili sme stránku na čo najrýchlejšie načítanie. Napríklad sme odstránili nepotrebné CSS a JS súbory, nastavili lazyload obrázkov a mnoho iného.

Ak by ste aj vy chceli vytvoriť vašu webovú stránku na tak kvalitnom nástroji ako je Sage a priniesť vašej stránke výkonnosť a rýchlosť, neváhajte sa na nás obrátiť. Napíšte nám a my sa vám ozveme v čo najkratšom čase.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.