WP-CLI – Spravujte weby vo WordPress lepšie a rýchlejšie

WP-CLI – Spravujte weby vo WordPress lepšie a rýchlejšie

WP-CLI vám umožňuje spravovať webové stránky pomocou jednoduchých príkazov bez toho, aby ste museli prechádzať mnohými stránkami v administrácii WordPress. Či už ste vývojár alebo administrátor, WP-CLI vám môže ušetriť veľa času a dokonca vrátiť k životu aj nedostupné webové stránky.

Čo je WP-CLI?

WP-CLI je rozhranie príkazového riadka pre WordPress. To znamená, že definuje príkazy, ktoré môžete spúšťať na svojom serveri a môžete ich použiť na vykonávanie bežných akcií. Úlohy, ako je správa príspevkov, užívateľov, pluginov, tém a možností webových stránok, je možné vykonávať v príkazovom riadku. V tomto článku sa pozrieme na niektoré praktické prípady použitia.

Ako môžete používať WP-CLI?

WP-CLI nie je súčasťou východiskovej inštalácie WordPress. Našťastie mnoho poskytovateľov WordPress hostingu už tento nástroj zaviedlo a sprístupnilo svojim používateľom. Či máte túto funkciu zahrnutú, môžete zistiť v podrobnostiach vášho hostingového plánu alebo sa môžete obrátiť na vášho poskytovateľa hostingu. WP-CLI je tiež súčasťou Trellis, ktorý používame na správu serverov pre našich klientov v Zeni.

Ak zistíte, že nemáte prístup k WP-CLI na vašom serveri a za predpokladu, že máte SSH prístup na váš server alebo chcete pracovať s WP-CLI lokálne na vašom počítači, môžete ho spustiť pomocou niekoľkých príkazov. Na OS X a Linux vás môžu okamžite dostať k plne funkčnému WP-CLI tieto príkazy:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Ak používate Windows alebo vás zaujímajú iné spôsoby inštalácie, môžete sa pozrieť na dokumentáciu WordPress.

Urýchlite časovo náročné úlohy pomocou WP-CLI

Vo WordPresse existuje mnoho administratívnych úloh, ktoré si vyžadujú vykonať viac opakujúcich sa akcií, aby ste sa dostali k cieľu. To môže zahŕňať mnoho načítaní stránky a kliknutí, čo vám zaberie niekoľko minút, v niektorých prípadoch možno aj hodín. Vďaka WP-CLI môžete tieto úlohy vykonávať oveľa ľahšie. Urýchliť pomocou WP-CLI je možné najmä hromadné akcie, ako je napríklad správa viacerých pluginov alebo médií.

Nainštalujte viac pluginov naraz

Začínate s novým webom a chcete nainštalovať viac pluginov, ktoré pravidelne používate, alebo ste práve dostali požiadavku na inštaláciu niekoľkých nových pluginov? Pomocou WP-CLI budete musieť napísať iba jeden príkaz. Nasledujúci príkaz nainštaluje 2 pluginy a aktivuje ich pomocou activate flagu:

wp plugin install bbpress classic-editor --activate

Tento príkaz taktiež umožňuje inštaláciu pluginov z archívov zip. Podporované sú aj lokálne cesty:

wp plugin install https://example.com/plugin.zip

Pomocou príkazu wp plugin môžete dosiahnuť oveľa viac, napríklad aktualizovať všetky pluginy na vašom webe. Odporúčam sa podrobne pozrieť na dokumentáciu príkazu wp plugin.

Hromadný import médií

Pomocou jednoduchého príkazu môžete ľahko importovať viac médií. Tu budeme importovať všetky súbory JPG v priečinku užívateľa v adresári Pictures. Tým sa skopírujú súbory z pôvodného priečinka a automaticky sa zaregistrujú ako prílohy:

wp media import ~/Pictures/**\/*.jpg

Pokiaľ vás zaujímajú príkazy zamerané na médiá, môžete sa pozrieť na príkaz wp media.

Správa užívateľov

Príkaz wp user pomáha so všetkými úlohami súvisiacimi so správou užívateľov. Tu je príklad vytvorenia užívateľa daniel s e-mailovou adresou [email protected] a s rolou administrátor. Tento presný príkaz som použil nespočetnekrát, keď bol nový projekt, na ktorom som pracoval:

wp user create daniel [email protected] --role=administrator

Vďaka WP-CLI je správa užívateľských hesiel, rolí, oprávnení a ďalšieho veľmi pohodlná. Pokiaľ vás zaujíma správa užívateľov, tu nájdete viac o príkaze wp user.

WP-CLI a riešenie technických problémov

WP-CLI je skvelým pomocníkom, keď sa snažíte riešiť technické problémy, ako uvidíme v nasledujúcich riadkoch.

Debugovanie problémov tém a pluginov

Predstavte si, že ste práve aktivovali chybný plugin, kvôli ktorému je administrácia WordPressu neprístupná. WP-CLI vás môže v tejto situácii zachrániť pomocou jediného príkazu:

wp plugin deactivate faulty-plugin

Podobne pomocou WP-CLI môžete aktivovať rôzne témy, ak si myslíte, že aktuálna téma spôsobuje problémy. Nasledujúci príklad aktivuje zvolenú tému:

wp theme activate different-theme

Práca s nastaveniami

Potrebujete rýchlo zmeniť nastavenia? Toto sa môže hodiť, keď chcete zistiť, či má váš aktuálny problém niečo spoločné s aktuálnou konfiguráciou alebo ak zmena nejakých nastavení nie je priamo možná v administrácii. V tomto príklade zmeníme aktuálny administrátorský e-mail:

wp option update admin_email [email protected]

Viac o práci s nastaveniami nájdete v dokumentácii príkazu wp option.

Správa databázy

WP-CLI je tiež skvelé pre správu databázy. Pomocou nasledujúceho príkazu môžete jednoducho vytvoriť zálohu aktuálnej databázy a uložiť ju do aktuálneho užívateľského adresára:

wp db export ~/backup.sql

Toto je extrémne užitočné, keď chcete vytvoriť export databázy pre použitie na stagingu alebo lokálnom vývojovom prostredí alebo vytvoriť zálohu pred vykonaním nejakej riskantnej akcie, ako je aktualizácia štruktúry databázy kvôli nejakému pluginu. Pokiaľ sa niečo pokazí, môžeme to ľahko vrátiť pomocou tohto príkazu:

wp db import ~/backup.sql

Pokiaľ plánujete experimentovať, dôrazne odporúčame, aby ste to nerobili na produkčnom prostredí orientovanom na zákazníka. K tomu je možné použiť stagingový server. Čo je to stagingové prostredie sa dozviete v našom článku Sedem dôvodov prečo používať staging pre Váš projekt vo WordPress. Pokiaľ vás zaujíma tvorba staging prostredia, môžete sa o tom dozvedieť v našom článku Ako si vytvoriť staging prostredie?

Ďalšou užitočnou funkciou je schopnosť rýchlo vstúpiť do rozhrania príkazového riadka databázy k spusteniu SQL pomocou nasledujúceho príkazu:

wp db cli

Nahraďte všetky výskyty nejakej hodnoty

Predstavte si, že web bol presunutý na inú URL alebo chcete použiť svoju produkčnú databázu na stagingu. Po importe databázy na nový server rýchlo zistíte, že niektoré odkazy nefungujú a že mediálne súbory nie sú viditeľné. Je to preto, že WordPress bohužiaľ v mnohých prípadoch používa absolútnu adresu URL. Na vyriešenie tohto problému má WP-CLI veľmi užitočný príkaz známy ako `wp search-replace. Pomocou tohto príkazu môžete veľmi jednoducho nahradiť všetky staré adresy URL novými:

wp search-replace https://old-website.old https://new-website.new --dry-run

dry-run flug na konci je tu veľmi užitočný, pretože spustí celú operáciu hľadania/nahradenia so zobrazením reportu, ale do databázy sa neuložia žiadne zmeny. Rozhodne je dobré spustiť tento príkaz najprv spôsobom dry run a po kontrole správy ho spustiť bez dry-run.

Generujte fiktívny obsah pomocou WP-CLI

Toto je veľmi užitočné pre vývojárov, ktorí potrebujú nejaký simulovaný obsah na webe pre účely vývoja. Napríklad pomocou niekoľkých príkazov môžete generovať desiatky príspevkov, používateľov, kategórií a komentárov. Tu je niekoľko príkladov:

wp user generate --role=subscriber --count=50
wp post generate --count=200 --post_type=post
wp post generate --count=20 --post_type=page
wp term generate category --count=10
wp comment generate --count=10 --post_id=123

Získate tak web s 50 novými užívateľmi, 200 príspevkami, 20 stránkami, 10 kategóriami a náš vybraný príspevok má už 10 komentárov. To simuluje aktívne stránky, ktoré existujú už nejaký čas, a nemuseli sme nič robiť manuálne. Môžeme ľahšie začať pracovať na vývoji WordPress témy alebo pluginu.

Možno toho dosiahnuť veľa

V tomto článku sme predstavili mnoho prípadov použitia WP-CLI, ale to nie je ani zďaleka všetko, čo je možné pomocou tohto nástroja. Aby ste sa zoznámili so všetkými možnosťami, neexistuje lepší zdroj ako WordPress dokumentácia. Dúfam, že vám WP-CLI pomôže stať sa lepším vývojárom alebo administrátorom.

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.

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.

Menu na mieru pre Engeto bez JavaScriptu

Menu na mieru pre Engeto bez JavaScriptu

Nedávno sme pre nášho klienta Engeto vytvorili zaujímavé riešenie. Vytvorili sme menu na mieru bez použitia JavaScriptu, vďaka čomu sme nespomalili výkon ich webovej stránky. V dnešnom článku si môžete prečítať, ako sme pracovali na vytvorení menu a aké sú výhody menu bez JavaScriptu.

Zoznámte sa s Engetom

Engeto organizuje IT kurzy pre začiatočníkov a pokročilých, ktorým pomáha nájsť si prácu v oblasti IT. Spolupracujú s parterskými firmami a na ich webe nájdete príbehy absolventov, ktorí rozprávajú o tom, ako sa – niekedy aj z nie ITodborov – dostali cez Engeto k práci v IT

Engetu sme už pomohli s vytvorením stránok Absolventi a Termíny, ktoré sme vytvorili podľa ich grafiky, a pridali filtrovanie, ktoré predtým nebolo možné. Umožnili sme tak ich zákazníkom jednoduchšie filtrovanie kurzov a absolventov. 

Engeto nás požiadalo o lepšie rozdelenie stránky pre jednotlivcov a firemných návštevníkov. Pôvodný web ani šablóna to neumožňovali v takom veľkom rozsahu. Začali sme sa teda podieľať na vytvorení riešenia, pre nich na mieru.

Výhody menu bez JavaScriptu

Menu funguje, ako som sa už zmienil, bez použitia JavaScriptu. Rozhodli sme sa JavaScript nepoužívať, pretože podľa nás nie je vždy potrebný a len zbytočne zdržiava načítanie stránky. Bola to pre nás aj taká výzva, či niečo takéto zvládneme urobiť. Najviac som asi hrdý na mobilnú verziu menu, ktorá má aj tlačidlo späť, ktoré sa z podmenu vracia do hlavnej ponuky.

Mobilná verzia menu
Mobilná verzia menu
  • Vďaka tomu, že nebol použitý JavaScript, sa stránka nijako nespomalila pri načítaní.
  • Zákazníkovi táto úprava umožňuje vytvoriť menu presne podľa jeho predstáv a lepšie tak svojim študentom predstaviť ponuky kurzov a obsah webu.
  • Každá stránka má vo svojej administrácii možnosť nastaviť, aké menu chce v hlavičke zobraziť. V nastaveniach sa potom spravujú dve menu. Jedno pre stránky jednotlivcov a druhé pre firemné. To umožňuje veľmi jednoduchú správu a prípadné výmeny menu za iné.
  • Hlavné menu je jednoducho upraviteľné. Všetky prvky sú v ňom nastaviteľné cez WordPress administráciu, takže nie je potrebný zásah programátora do kódu pri nejakej požiadavke na zmenu.
WordPress administrácia menu na mieru
WordPress administrácia menu na mieru

Aby som vás neklamal, tak jeden JavaScriptový kód som napísať musel. Divi šablóna, ktorá je na tomto webe využitá, totiž blokovala používanie nášho prístupu na mobiloch. Museli sme teda napísať JavaScript, ktorý ich JavaScript obíde. Menu vlastne funguje najlepšie, pokiaľ na celej stránke vypnete JavaScript. Potom vám ale nepôjde zvyšok stránky.

Ako vzniklo menu na mieru

Na vytvorenie menu som využil kombináciu elementu <label> a checkbox inputov. Vďaka ich pomenovaniu je možné tieto dva elementy previazať, aj keď sú na úplne iných miestach v stránke. A čo je ešte lepšie, že to isté funguje aj pre viaceré <label> elementy naviazané na jeden input. Tak som dosiahol možnosť dostať sa na mobiloch na podmenu a späť.

Aby som všetky tieto informácie dostal do štandardného WordPress menu, bolo treba napísať vlastné MenuWalker. To je trieda, ktorú odovzdáte vášmu menu a podľa nej sa vypisujú jednotlivé časti menu. V triede si potom môžeme upraviť jeho funkcie a pridať tak do menu nejaké vlastné položky.

Využitie WordPress pluginu

Poslednú technológiu, ktorú som použil na túto prácu, bol WordPress plugin Advance Custom Fields (ACF).

Jeho možnosť pridávania vlastných položiek na rôzne miesta WordPress administrácie ma stále baví. Narazil som ale na jeden drobný problém. 

ACF nemá možnosť definovať, do akej úrovne menu chcete nové editovateľné položky pridať. 

Vytvoril som teda kód, ktorý zisťuje, v akej úrovni sa dané menu nachádza, a potom povoľuje, prípadne vypína ACF položky. To mi umožnilo spríjemniť administrátorovi prácu s editáciou, pretože sa mu tam nepletú položky, ktoré by nemal nastavovať a nič by vo výsledku nerobili.

Pokiaľ máte tiež záujem o riešenie na mieru či zrýchlenie svojich webových stránok alebo potrebujete poradiťnapíšte nám, sme tu pre vás.

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.

Formulár na webe – dobrý pomocník

Formulár na webe – dobrý pomocník

Dnes sa budeme zaoberať otázkou “Prečo mať na webe formulár?”. Ak robíte webové stránky pre akéhokoľvek klienta, vždy je dobré mať na stránkach formulár. Existujú totiž klienti, ktorí neradi volajú, ale radšej si službu požiadajú práve cez formulár. Ak im túto službu neponúknete, strácate ich.

Aké formuláre môžeme mať

1. Jednoduchý dopytovací formulár

Jedná sa o formulár, v ktorom spravidla býva len:

  • Meno a Priezvisko
  • Adresa
  • Telefón
  • E-mail
  • Informácie pre nás

Tento formulár spravidla nájdeme na stránkach živnostníkov alebo firiem, ktoré ponúkajú väčšinou len jednu službu.

Jednoduchý dopytovací formulár

2. Zložitejší dopytovací formulár

Tento druh formulára väčšinou použijeme pri klientovi, ktorý sa zaoberá viac ako jedným druhom služieb, alebo predáva viac druhov výrobkov, ale ešte nemá záujem svoje služby a výrobky predávať cez e-shop. Tento druh formulára môže obsahovať napríklad tieto informácie:

  • Meno a Priezvisko
  • Adresa
  • Telefón
  • E-mail
  • Služba/výrobok – výber z 2 až X  
  • Informácie pre nás

Formulár väčšinou využívajú tí, ktorí chcú od klienta už pri vstupe viac informácií, aby ho nezahlcovali „zbytočným“ telefonátom.

Zložitejší dopytovací formulár

3. Viacstupňový dopytovací formulár

Pri tomto formulári je potrebné si s klientom sadnúť a podrobne si vyšpecifikovať štruktúru.  Čím lepšie bude špecifikácia spísaná, o to kvalitnejšie budeme dostávať žiadosti o služby, ktoré budú priradené priamo danému pracovníkovi.

Tento druh formulárov sa používa v spoločnostiach, ktoré sa zaoberajú výrobou viac ako dvoch rôznych výrobkov, majú viac segmentov výroby a tieto výrobky/segmenty môžu mať viac druhov. Tieto výrobky majú svojich zákazníkov v B2B aj B2C sfére. 

Do formulára je teda potrebné vtesnať čo najviac otázok pre návštevníka webu, ale zároveň je nutné ich nastaviť tak, aby ho zrozumiteľne viedli k cieľu. Formulár môže obsahovať mnoho informácií, ktoré môžu mať rôzne podmienky. Keď vyberiete niektorý druh segmentu, objaví sa vám už len výber výrobkov určených pre tento segment. Od návštevníka tak dostanete presnú špecifikáciu toho, čo žiada a tieto informácie tak môžete poslať priamo na daného pracovníka, ktorý sa mu môže ihneď venovať. Skrátite tak procesne reakčnú dobu, čo návštevník určite ocení.

Viacstupňový dopytovací formulár
Viacstupňový dopytovací formulár
Viacstupňový dopytovací formulár
Viacstupňový dopytovací formulár

4. Formulár napojený na systém

Niektoré formuláre chcú klienti napojiť priamo na ich interný systém. Nielen, že to zjednoduší prácu, ale predovšetkým ju zefektívni a vyhneme sa tak chybovosti ľudského faktoru. Všetky informácie, ktoré nám návštevník webu odovzdá, putujú rovno do interného systému a priamo na danú osobu. Na príklad sa môžete pozrieť tu: 

Formulár napojený na systém

Objednávka servisu sa prepíše do systému Orion a informácia putuje k servisnému technikovi priamo do mobilnej aplikácie. Servisný technik má relevantné informácie o tom, čo má opraviť a podľa bodu na mape môže naplánovať trasu a vybaviť tak viac servisných požiadaviek za deň.

Čo nám formuláre prinášajú

Cenný kontakt

Keď už nič iné, tak nám formulár prinesie cenný kontakt, s ktorým môžeme následne pracovať. V prípade, že nám potencionálny klient zanechá kontakt v podobe e-mailu a v lepšom prípade telefónu, môže ho obchodné oddelenie kontaktovať a pracovať s ním.

Podrobnejšie informácie

Čím podrobnejší je formulár, tým viac a presnejších informácií z neho dostaneme. Vždy však dbáme na to, aby sa z formulára nestala dedinská klebetnica s miliónom zbytočných otázok.

Segmentáciu žiadostí

Väčšie spoločnosti majú pre každý druh výrobku špeciálneho obchodníka. V prípade, že asistentka, alebo ešte lepšie formulár vie, na koho má žiadosť poslať, pošle ju tam. Skráti sa tak reakčná doba a špecialista môže veľmi rýchlo zareagovať.

Aké formuláre najlepšie vytvoriť

Jednoduché

Každý formulár by mal obsahovať len najdôležitejšie body, na ktoré potrebujeme od klienta odpoveď.

Zrozumiteľné

Vo formulároch uprednostňujeme radšej bežné názvy pred profesijnými. Nie každý, kto navštívi náš web musí byť z našej brandže, a preto by nemusel rozumieť niektorým profesijným, profesionálnym názvom.

Aké nástroje, pluginy použiť k tvorbe formulárov

Free

Je ich pre WordPress nevyčerpateľné množstvo. Spomeniem len pár:

Contact form 7

Gravity Forms + Custom Post Types

Caldera Forms

Platené

Pri niektorých free pluginoch si môžete zakúpiť ich rozšírené verzie. Ja odporúčam pre prácu tieto:

Caldera Forms

Gravity Forms

Zhrnutie

  1. Pred tvorbou formulára sa veľa pýtajte klienta.
  2. Dohodnite sa, ktoré informácieod návštevníka naozaj nevyhnutné získať.
  3. Menej je niekedy viac. Do formulára dávajte naozaj len nevyhnutne nutné.
  4. Vyberte dobrý a osvedčený plugin. Niektoré pluginy už majú kontaktný formulár zabudovaný v sebe.
  5. Čím viac návštevníkov cez kontaktný formulár získate, tým máte väčšiu šancu predaja vášho výrobku.

Ak vás akýkoľvek formulár zaujal a chcete pomôcť s jeho tvorbou, kontaktujte nás.

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.

5 vecí, na ktoré nesmieme zabúdať pri tvorbe webových stránok

5 vecí, na ktoré nesmieme zabúdať pri tvorbe webových stránok

Pri tvorbe webových stránok ide o komplexný proces, ktorý tvoria viaceré činnosti. Od prieskumu trhu, cez grafický dizajn,  programovanie webu, tvorbu textov až po samotné spustenie webovej stránky. Prečítajte si nasledovných 5 vecí, ktoré sú pri tvorbe webovej stránky pre nás veľmi dôležité, a preto na ne vždy prihliadame.

Analýza kľúčových slov a stanovenie cieľov

Ľudia hľadajú cez vyhľadávače rôzne výrazy, ktoré im pomáhajú nájsť to, čo hľadajú. Pomocou analýzy kľúčových slov nájdeme frázy, ktoré sú opakovane vyhľadávané a súvisia s vašim zameraním, vďaka čomu zistíme, cez ktoré kľúčové slová sa návštevníci dostanú na vašu webovú stránku

Pred samotnou tvorbou webu je najdôležitejšie ujasniť si princípy a hodnoty spoločnosti, ktoré pomôžu k analýze kľúčových slov. Je nutné zameriať sa na to, aké má firma vízie do budúcnosti a tiež aký je jej príbeh. Následne je potrebné určiť ciele, na základe ktorých budeme tvoriť váš web pre kvalitnú sortu klientov. 

Analýza kľúčových slov je dôležitou prioritou pre úspech webu od ktorej sa následne odvíja optimalizácia pre vyhľadávače.

Optimalizácia pre vyhľadávače (SEO)

Vďaka SEO optimalizácií dostaneme vašu webovú stránku jednoduchšie medzi vrchné výsledky vyhľadávania. Pri súčasnej miere konkurencie vo vyhľadávaní je čo najlepšia optimalizácia pre vyhľadávače nutnosťou. 

Pre SEO optimalizáciu „vylaďujeme“ nie len texty na stránkach. Ide o komplexnejší proces. Čo je pre optimalizáciu dôležité a na čo sa zameriavame?

  • Rýchlosť načítania;
  • bezpečnosť stránok;
  • popisy fotiek a produktov;
  • obrázky;
  • optimalizácia textov;
  • správne nadpisy, titulky;
  • technické nastavenie SEO;
  • a mnoho ďalšieho…

—> O tvorbe optimalizovaného obsahu sa dozviete viac v článku Správna tvorba optimalizovaného obsahu webovej stránky

—> Ako písať články pre SEO, a robíme to tak aj my, si môžete prečítať tu: SEO – Ako písať články, aby boli čitateľné, a optimalizované pre vyhľadávače

Copywriting

Správna tvorba textov na webovej stránke je základom spomínanej optimalizácie pre vyhľadávače a tiež samotnej tvorby webovej stránky. Preto je dôležité písať texty nie len zaujímavé, ale aj gramaticky správne spolu s využitím vhodných kľúčových slov. Súčasťou copywritingu je príprava textov v súlade s analýzou vašej cieľovky a ich optimalizácia pre vyhľadávače pomocou kľúčových slov, či správnej hierarchie nadpisov atď. 

Viac o tom, čo všetko by mal obsahovať každý článok si prečítajte v článku Náležitosti, ktoré by mal obsahovať každý článok.

Prístupnosť webovej stránky

Nezabúdajte, že na vašej webovej stránke sa čitateľ musí čo najjednoduchšie orientovať. Navyše, dnes už vyše 67 % užívateľov prehliada internet z mobilu alebo tabletu. Pokiaľ užívateľ nenájde to, čo hľadá, stránka je pre neho príliš komplikovaná, vyskakujú na neho rôzne okná, či je prehltená reklamou, okamžite odchádza a vám tak zvyšuje mieru opustenia stránky, čím sa tiež zhoršuje SEO. 

Preto tvoríme stránky tak, aby spĺňali potrebné kritériá. Je pre nás dôležité, aby vaša webová stránka bola rezponzívna a čo najviac prístupná pre všetkých užívateľov. 

Čo sú to prístupné stránky a najčastejšie problémy webov spísala naša kolegyňa Mishka v článku Prístupný web je výhodný pre všetkých

Ako sme v prístupnosti pomohli? Prečítajte si naše prípadové štúdie:

—> Aj veľká škola s množstvom aktivít môže mať prehľadný web

—> Prístupný web pre ZŠ a MŠ Otnice

—> Web pre MŠ Hrušovany pri Brne na prístupnej šablóne

Marketing

Pokiaľ chcete naozaj výkonnú webovú stránku, ktorá prináša výsledky, samotná optimalizácia SEO nestačí. Pri tvorbe webovej stránky si premyslite, akým spôsobom budete vašu stránku prezentovať ostatným. Budete písať blog? Ponúkať rôzne akcie, či výhody? Akým spôsobom zakomponujete na stránke recenzie? Tomu následne prispôsobíme aj tvorbu a design stránky. Po jej spustení je tiež dôležité investovať do samotného marketingu, ako napríklad PPC kampane, či prezentácia na sociálnych sieťach, s čím vám tiež radi pomôžeme.

Ako sa pripraviť na marketing si môžete prečítať v článku Pripravte sa poriadne na marketing.

Ak chcete aby vaša webová stránka bola výkonná a prinášala vám zákazníkov, neváhajte nás kontaktovať, 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.