Kaip padaryti svetainę patrauklią lankytojams? Šis klausimas jaudina beveik visus interneto išteklių savininkus: prekybininkus, tinklaraštininkus, mažų ir didelių įmonių savininkus, keliautojus ir tiesiog kūrybingus žmones, kurie turi ką pasakyti pasauliui.
Kodėl svetainė turi būti graži ir funkcionali?
Apsilankymų skaičius priklauso nuo svetainės temos ir jos tikslinės auditorijos, žmonių susidomėjimo konkrečiu produktu, investicijų, reklamos, turinio ir daugelio kitų faktorių. Tačiau negalima paneigti, kad svetainę „pasveikina drabužiai“. Tai pirmasis ir pagrindinis š altinio puslapis, kuris yra jo veidas, vizitinė kortelė, pagal kurią lankytojas turi suprasti, ar jis nori skirti savo laiką tolesniam turinio peržiūrai.
Ir nėra vietos klaidoms! Remiantis vieno iš JAV technikos universitetų atliktais tyrimais, pirmąjį įspūdį apie svetainę lankytojas susidaro greičiau nei per sekundę. Vidutiniškai žmogus „nuskaito“svetainę per 3 sekundes. Žaibo greitis, tiesa?!
Iki 70 % š altinio sėkmės priklauso nuo to, kaip atrodo pagrindinis puslapis. Pirmas dalykas, kurį žmonės pastebi, yralogotipas, bet antrasis yra navigacija. Ir jei su logotipu viskas daugmaž aišku, tuomet verta palaužti galvą dėl navigacijos, meniu ir svetainės ergonomikos patogumo. Kyla pagrįstas klausimas: "Kaip papuošti savo svetainę, padaryti ją kuo funkcionalesnę ir patogesnę, bet tuo pačiu ir gražią?" Galima pasiūlyti daug neįprastų idėjų, tačiau vienas įdomiausių yra patarimai.
Kas yra patarimai? Patarimai yra ne tik puikus svetainės funkcionalumo gerinimo mechanizmas, bet ir įrankis, leidžiantis vartotojui matyti konkretaus vaizdo paaiškinimą, kai užves pelės žymeklį virš piktogramos, žodžio ar paveikslėlio.
Įrankiai, skirti dirbti su patarimais
Bootstrap yra geriausias įrankis patarimams kurti. Tai lengvai išmokstamas šablonų rinkinys, skirtas kurti programoms ir svetainėms, parašytoms HTML, CSS, Sass ir JavaScript.
Kad būtų konkretesni, patarimuose naudojamas vienas iš grafinių įkrovos šablono elementų – patarimas.
Bootstrap sistema buvo sukurta „Twitter“ir iš pradžių vadinosi „Twitter Blueprint“. Po tam tikrų pakeitimų 2012 m. jis gavo 12 stulpelių tinklelį, tapo prisitaikantis ir įgavo pažįstamą pavadinimą - Tooltip. Patarimas yra elementas, kuris pasirodo, kai užvedate pelės žymeklį virš konkretaus elemento monitoriaus ekrane.
Užuominos kūrimas
Galite sukurti Bootstrap patarimą naudodami atributusduomenis, taip pat aktyvuojant „Java Script“elementus. Yra du pagrindiniai būdai, kaip sukurti HTML įkrovos patarimą. Pirmojo esmė – taikyti atributą ir atributo pavadinimą (title), kuriame bus užuominos tekstas. Patarimas pasirodys viršuje (numatytasis nustatymas). Verta prisiminti, kad patarimą reikia inicijuoti, nes dėl našumo priežasčių automatinis inicijavimas „Twitter įkrovos juostoje“nebenaudojamas.
Norint inicijuoti patarimus, naudojamas specialus JavaScript, kuriame patarimo metodas atkuriamas visiems elementams, turintiems atributą. Antrojo metodo esmė yra suaktyvinti patarimą naudojant „JavaScript“kodą, dalyvaujant jQuery bibliotekai, parašant įrankių klasę, kurioje yra patarimas. Metodas yra panašus į pirmąjį, išskyrus elementų pasirinkimo metodą. „Java Script“galite įjungti patarimus, kaip parodyta toliau.
Bootstrap patarimo pavyzdys
Yra keturios pagrindinės patarimų padėties nustatymo parinktys: kairiajame ir dešiniajame krašte bei virš ir po elementu.
Užuomina iš viršaus
Užuomina teisinga
Užuomina apačioje
Užuomina kairėje
Patarimų naudojimas
Yra daug „Bootstrap“patarimo naudojimo būdų. Galite įterpti patarimus, kad vartotojas suprastų teksto vertimą iš užsienio kalbos tekste. Patarimai taip pat gali būti naudojami kaip įrankis, padedantis vartotojui suprasti skydelyje esančių mygtukų reikšmę, kai ant jų užvedamas pelės žymeklis. Įvairių organizacijų interneto svetainėse dažnai naudojami „Bootstrap Tooltip“šablonai, norint užsiprenumeruoti įmonės naujienas. Taip klientai nuolat atnaujina informaciją, o lankytojai gali gauti naujos informacijos, pvz., nuolaidų normas, pasiūlymus, pokyčius įmonėje.
Apsvarstykite pavyzdį, kai vartotojas turi įvesti savo el. pašto adresą, kad užsiprenumeruotų naujienlaiškį. Užduotis užtikrinti, kad klientų auditorija užsiprenumeruotų naujienas, lengviausiai pasiekiama naudojant HTML5 ir reikiamą atributą. Patarimo užuomina šiuo atveju reikalinga tam, kad vartotojas suprastų veiksmų seką. Pavyzdžiui, įvedęs el. pašto adresą, pažymėjau langelį: „Sutinku gauti įmonės naujienas į mano el. pašto adresą“. Toliau pateikiamas formos kodo pavyzdys.
Įdiegti šį kodą į HTML Bootstrap patarimą paprasta. Tačiau nauda yra reikšminga. Dabar vartotojai žino visas įmonės naujienas. Tai savotiška nemokama reklama.
Pagrindinės klaidos kuriant iššokančiuosius languspatarimai
Ką daryti, jei Bootstrap patarimas neveikia? Pirmoji ir pagrindinė klaida, kai patarimo atributas neveiks, yra tai, kad patarimas neįjungtas. Norėdami jį suaktyvinti, turite naudoti specialų kodą.
Šis metodas leidžia inicijuoti absoliučiai visus patarimus tinklalapyje.
Antra dažniausiai pasitaikanti klaida – antraštėje nėra „jQuery“.
Yra būtina sąlyga, kad nuoroda veiktų tinkamai – turi būti nurodyta duomenų apdorojimo funkcija, pvz., „Java Script“.
Patarimo ypatybės
Pagrindinis elementas Patarimas yra skirtas pateikti patarimus, kai perkeliate pelės žymeklį ant vienos ar kitos puslapio dalies. Tačiau, be patarimo vietos dešinėje, kairėje ir viršuje, patarimas turi šias savybes:
- Aktyvus. Naudojant tikrąją ypatybę įkrovos patarime galima rodyti patarimus, o nustačius tą pačią ypatybę į false reiškia, kad patarimai negali būti rodomi.
- AutoPopDelay yra laikas, kada rodomi patarimai.
- AutoPopDelay. Nurodo laiką, per kurį pelės žymeklis turi būti ant elemento, kad būtų rodomas patarimas.
- Yra balionas. Jei HTML įkrovos patarimo patarimo reikšmė teisinga, patarimas pasikeis į debesį.
- ToolTipIcon. Reiškia simbolį, kuris rodomas langeužuominos.
Įrankių patarimas
Norint sukurti gražius patarimus, pavyzdžiui, svetainėje, sukurtoje naudojant Wordpress, nebūtina gerai mokėti žiniatinklio kūrėjų kalbos. Pakanka žinoti apie tokio papildinio (plėtinio) kaip Tooltipster egzistavimą. Iš pavadinimo aišku, kad šis įskiepis yra pagrįstas Tooltip ir yra stebėtinai panašus į jį savo savybėmis ir paskirtimi. Kam skirtas šis įskiepis? Tai leidžia jums sukurti reikiamą HTML žymėjimą patarimo viduje.
Papildinio darbas pagrįstas sparčiųjų klavišų įterpimu puslapyje. Yra visi pagrindiniai HTML įkrovos patarimo atributai: turinys (duomenų patarimo turinys), pavadinimas, padėtis, aktyviklis ir kt. Tai leidžia pakeisti temą, šriftą, patarimo dydį, spalvą, įterpti vaizdą ir kt.
