Ako zatraktívniť vašu stránku pre návštevníkov? Táto otázka znepokojuje takmer všetkých majiteľov internetových zdrojov: obchodníkov, blogerov, majiteľov malých a veľkých firiem, cestovateľov a jednoducho kreatívnych ľudí, ktorí majú svetu čo povedať.
Prečo by mala byť webová stránka krásna a funkčná?
Počet návštev závisí od témy stránky a jej cieľového publika, záujmu ľudí o konkrétny produkt, investície, propagácie, obsahu a mnohých ďalších faktorov. Nemožno však poprieť, že stránka je „zdravá oblečením“. Práve prvá a hlavná stránka zdroja je jeho tvárou, vizitkou, podľa ktorej musí návštevník pochopiť, či chce tráviť čas ďalším prezeraním obsahu.
A nie je tu priestor na chyby! Podľa výskumu jednej z technických univerzít v USA získa návštevník prvý dojem z lokality za menej ako sekundu. V priemere človek „naskenuje“stránku za 3 sekundy. Blesková rýchlosť, však?!
Až 70 % úspechu zdroja závisí od toho, ako vyzerá hlavná stránka. Prvá vec, ktorú si ľudia všimnú, jelogo, ale druhým je navigácia. A ak je s logom všetko viac-menej jasné, potom sa oplatí rozbiť si hlavu nad navigáciou, ponukou a pohodlím ergonómie stránky. Vzniká rozumná otázka: "Ako vyzdobiť svoje stránky, urobiť to čo najfunkčnejšie a najpohodlnejšie, ale zároveň krásne?" Existuje mnoho nezvyčajných nápadov, ktoré môžeme ponúknuť, ale jedným z najzaujímavejších sú popisy.
Čo sú popisy? Okrem toho, že sú popisy skvelým mechanizmom na zlepšenie funkčnosti stránky, sú nástrojom, ktorý umožňuje používateľovi zobraziť vysvetlenie konkrétneho obrázka, keď umiestni kurzor myši na ikonu, slovo alebo obrázok.
Nástroje na prácu s popismi
Bootstrap je najlepší nástroj na vytváranie popisov. Je to sada šablón, ktoré sa dajú ľahko naučiť na vytváranie aplikácií a webových stránok napísaných v jazykoch HTML, CSS, Sass a JavaScript.
Aby som bol konkrétny, popisy používajú jeden z grafických prvkov šablóny Bootstrap – popis.
Rámec Bootstrap bol vytvorený pre „Twitter“a pôvodne sa volal „Twitter Blueprint“. Po niekoľkých zmenách v roku 2012 dostal 12-stĺpcovú mriežku, stal sa adaptívnym a získal známy názov – Tooltip. Popis je prvok, ktorý sa zobrazí, keď umiestnite kurzor myši na konkrétny prvok na obrazovke monitora.
Vytvorenie rady
Popis zavádzacieho nástroja môžete vytvoriť pomocou atribútovúdajov, ako aj aktiváciou prvkov „Java Script“. Existujú dva hlavné spôsoby, ako vytvoriť HTML Bootstrap Tooltip. Podstatou prvej je aplikovať atribút a atribút title (title), ktorý bude obsahovať text nápovedy. V hornej časti sa zobrazí popis (predvolené nastavenie). Stojí za to pripomenúť, že popis je potrebné inicializovať, pretože automatická inicializácia bola v „zavádzacom systéme Twitteru“z dôvodov výkonu zastaraná.
Na inicializáciu popisov nástrojov sa používa špeciálny JavaScript, v ktorom sa obnoví metóda popiskov pre všetky prvky, ktoré majú atribút. Podstatou druhej metódy je aktivácia tooltipu pomocou kódu „JavaScript“za účasti knižnice jQuery napísaním triedy nástrojov, ktorá obsahuje tooltip. Metóda je podobná prvej, s výnimkou metódy výberu prvkov. Môžete povoliť rady v "Java Script" spôsobom uvedeným nižšie.
Príklad popisu bootstrapu
Sú štyri hlavné možnosti umiestnenia popisov: na ľavom a pravom okraji a nad a pod prvkom.
Návod zhora
Tip vpravo
Tip v dolnej časti
Nápoveda vľavo
Používanie popisov
Bootstrap Tooltip má mnoho využití. Môžete vložiť popisky, aby používateľ porozumel prekladu textu z cudzieho jazyka v texte. Popisky možno použiť aj ako nástroj, ktorý používateľovi pomôže pochopiť význam tlačidiel na paneli, keď na ne umiestnite kurzor myši. Bootstrap Tooltip šablóny sa často používajú na webových stránkach rôznych organizácií na vytvorenie predplatného firemných noviniek. Zákazníci tak budú mať aktuálne informácie a tiež to umožní návštevníkom získať nové informácie, ako sú diskontné sadzby, ponuky, zmeny v rámci spoločnosti.
Uvažujme o príklade, keď používateľ potrebuje zadať svoju e-mailovú adresu, aby sa mohol prihlásiť na odber bulletinu. Úlohu zabezpečiť, aby sa klientske publikum prihlásilo na odber noviniek, sa najjednoduchšie dosiahne pomocou HTML5 a požadovaného atribútu. Nápoveda v popise je v tomto prípade potrebná, aby používateľ pochopil postupnosť akcií. Napríklad po zadaní emailovej adresy som zaškrtol políčko: "Súhlasím so zasielaním firemných noviniek na moju emailovú adresu." Nižšie je uvedený príklad kódu formulára.
Inštalácia tohto kódu do HTML Bootstrap Tooltip je jednoduchá. Ale výhody sú významné. Teraz spotrebitelia poznajú všetky novinky spoločnosti. Toto je druh bezplatnej reklamy.
Hlavné chyby pri vytváraní kontextových okienrady
Čo robiť, ak popis Bootstrap nefunguje? Prvá a hlavná chyba, kedy atribút tooltip nebude fungovať, je, ak nie je povolený tooltip. Ak ju chcete aktivovať, musíte použiť špeciálny kód.
Táto metóda vám umožňuje inicializovať úplne všetky popisy na webovej stránke.
Druhou častou chybou je, že v hlavičke nie je jQuery.
Pre správne fungovanie odkazu je nevyhnutná podmienka – musí byť špecifikovaná funkcia spracovania údajov ako „Java Script“.
Vlastnosti popisku
Komponent Tooltip je vo svojej podstate navrhnutý tak, aby zobrazoval popisy nástrojov, keď presuniete kurzor myši nad jednu alebo druhú časť stránky. Ale okrem umiestnenia popisku vpravo, vľavo a hore s pomocou má popis nasledujúce vlastnosti:
- Aktívne. Použitie vlastnosti true v popise nástroja Bootstrap umožňuje zobrazenie popisov nástrojov, zatiaľ čo nastavenie rovnakej vlastnosti na hodnotu false znamená, že sa nedajú zobraziť žiadne popisy.
- AutoPopDelay je čas, kedy sa zobrazujú tipy.
- AutoPopDelay. Predstavuje čas, počas ktorého musí byť kurzor myši umiestnený nad prvkom, aby sa zobrazil popis.
- IsBaloon. Ak je hodnota popisku HTML Bootstrap Tooltip pravdivá, popis sa zmení na cloud.
- ToolTipIcon. Predstavuje znak, ktorý je zobrazený v oknerady.
Tooltipster
Na vytvorenie krásnych popiskov, napríklad na stránke vytvorenej na Wordpresse, nie je potrebné dôkladne poznať jazyk webových vývojárov. Stačí vedieť o existencii takéhoto pluginu (rozšírenia) ako Tooltipster. Už z názvu je jasné, že tento plugin vychádza z Tooltipu a je mu svojimi vlastnosťami a účelom prekvapivo podobný. Na čo slúži tento plugin? Umožňuje vám vytvoriť potrebné označenie HTML v popise.
Fungovanie pluginu je založené na vkladaní skratiek na stránku. Obsahuje všetky základné atribúty HTML Bootstrap Tooltip: content (data-tooltip-content), title, position, trigger, atď. To vám umožňuje zmeniť tému, písmo, veľkosť popisku, farbu, vložiť obrázok a ďalšie.
