Kuidas muuta oma sait külastajatele atraktiivseks? See küsimus valmistab muret peaaegu kõigile Interneti-ressursside omanikele: kaupmeestele, ajaveebipidajatele, väikeste ja suurte ettevõtete omanikele, reisijatele ja lihts alt loomingulistele inimestele, kellel on maailmale midagi öelda.
Miks peaks veebisait olema ilus ja funktsionaalne?
Külastuste arv sõltub saidi teemast ja selle sihtrühmast, inimeste huvist konkreetse toote vastu, investeeringutest, reklaamidest, sisust ja paljudest muudest teguritest. Kuid ei saa eitada, et saiti "tervitavad riided". Just ressursi esimene ja põhileht on selle nägu, kõnekaart, mille järgi külastaja peab aru saama, kas ta soovib sisu edasiseks vaatamiseks kulutada aega.
Ja eksimisruumi pole! Ühe USA tehnikaülikooli uuringute järgi saab külastaja esmamulje paigast vähem kui sekundiga. Keskmiselt "skannib" inimene saidi 3 sekundiga. Välgukiirus, eks?!
Kuni 70% ressursi edust sõltub avalehe välimusest. Esimene asi, mida inimesed märkavad, onlogo, kuid teine on navigeerimine. Ja kui logoga on kõik enam-vähem selge, siis tasub murda pead navigeerimise, menüü ja saidi ergonoomika mugavuse pärast. Tekib mõistlik küsimus: "Kuidas kaunistada oma saiti, muuta see võimalikult funktsionaalseks ja mugavaks, kuid samal ajal ilusaks?" Pakkuda on palju ebatavalisi ideid, kuid üks huvitavamaid on tööriistavihjed.
Mis on vihjed? Lisaks sellele, et kohtspikrid on suurepärane mehhanism saidi funktsionaalsuse parandamiseks, on need tööriist, mis võimaldab kasutajal näha konkreetse pildi selgitust, kui hõljutab kursorit ikooni, sõna või pildi kohal.
Tööriistad vihjetega töötamiseks
Bootstrap on parim tööriist vihjete loomiseks. See on hõlpsasti õpitav mallide komplekt rakenduste ja veebisaitide loomiseks, mis on kirjutatud HTML-is, CSS-is, Sassis ja JavaScriptis.
Konkreetsemaks muutmiseks kasutavad kohtspikrid üht Bootstrapi malli graafilist elementi – tööriistavihje.
Bootstrapi raamistik loodi "Twitteri" jaoks ja kandis algselt nime "Twitter Blueprint". Pärast mõningaid muudatusi 2012. aastal sai see 12-veerulise ruudustiku, muutus adaptiivseks ja sai tuttava nime - Tooltip. Tööriistavihje on element, mis kuvatakse, kui hõljutate kursorit monitori ekraanil konkreetse elemendi kohal.
Vihje loomine
Saate luua Bootstrapi tööriistaspikri atribuutide abilandmeid, samuti aktiveerides "Java skripti" elemendid. HTML Bootstrap tööriistaspikri loomiseks on kaks peamist viisi. Esimese sisuks on atribuudi ja atribuudi pealkirja (title) rakendamine, mis sisaldab vihjeteksti. Tööriistavihje kuvatakse ülaosas (vaikeseade). Tasub meeles pidada, et kohtspikker tuleb lähtestada, kuna automaatne lähtestamine on jõudluse huvides "Twitteri alglaadimise" puhul aegunud.
Tööriistavihjete lähtestamiseks kasutatakse spetsiaalset JavaScripti, milles kõigi atribuuti omavate elementide jaoks taastatakse kohtspikri meetod. Teise meetodi olemus seisneb tööriistaspikri aktiveerimises JavaScripti koodi abil jQuery teegi osalusel, kirjutades tööriistaklassi, mis sisaldab vihjet. Meetod on sarnane esimesele, välja arvatud elementide valiku meetod. Vihjeid saate lubada "Java Scriptis" alloleval viisil.
Bootstrapi tööriistavihje näide
Tööriistavihjete positsioneerimiseks on neli peamist valikut: vasakul ja paremal serval ning elemendi kohal ja all.
Vihje ül alt
Vihje õige
Vihje allosas
Vihje vasakule
Tööriistanõuannete kasutamine
Bootstrapi tööriistaspikril on palju kasutusviise. Saate sisestada näpunäiteid, et kasutaja mõistaks teksti tõlget võõrkeelest. Tööriistanäpunäiteid saab kasutada ka tööriistana, mis aitab kasutajal mõista paneelil olevate nuppude tähendust nende kohal hõljutades. Bootstrap Tooltip malle kasutatakse sageli erinevate organisatsioonide veebisaitidel, et luua ettevõtte uudiste tellimus. See hoiab kliente kursis ja võimaldab külastajatel saada ka uut teavet, nagu allahindlusmäärad, pakkumised, ettevõttesisesed muudatused.
Vaatleme näidet, kus kasutaja peab uudiskirja tellimiseks sisestama oma e-posti aadressi. Kliendi publiku uudiste tellimise ülesanne on kõige hõlpsamini saavutatav HTML5 ja vajaliku atribuudi abil. Tööriistavihje on sel juhul vajalik selleks, et kasutaja saaks aru toimingute jadast. Näiteks pärast e-posti aadressi sisestamist märkisin ruudu: "Olen nõus saama ettevõtte uudiseid oma meiliaadressile." Allpool on näide vormikoodist.
Selle koodi installimine HTML Bootstrapi tööriistavihjesse on lihtne. Kuid kasu on märkimisväärne. Nüüd teavad tarbijad kõiki ettevõtte uudiseid. See on omamoodi tasuta reklaam.
Peamised vead hüpikakende loomiselvihjed
Mida teha, kui Bootstrap Tooltip ei tööta? Esimene ja peamine viga, mille puhul tööriistavihje atribuut ei tööta, on see, kui kohtspikker pole lubatud. Selle aktiveerimiseks peate kasutama spetsiaalset koodi.
See meetod võimaldab teil lähtestada absoluutselt kõik veebilehe tööriistavihjed.
Teine levinud viga on jQuery puudumine päises.
Lingi korrektseks tööks on vajalik tingimus – tuleb määrata andmetöötlusfunktsioon, näiteks "Java Script".
Tööriistavihje omadused
Oma põhiolemuselt on tööriistavihje komponent loodud vihjete kuvamiseks, kui liigutate hiirekursorit lehe ühele või teisele osale. Kuid lisaks abiga paremal, vasakul ja ülal olevale kohtspikri asukohale on kohtspikril järgmised omadused:
- Aktiivne. Tõene atribuudi kasutamine Bootstrapi tööriistaspikris võimaldab kuvada kohtspikreid, samas kui sama atribuudi määramine väärtusele false tähendab, et vihjeid ei saa kuvada.
- AutoPopDelay on vihjete kuvamise aeg.
- AutoPopDelay. Näitab aega, mille jooksul hiirekursor peab elemendi kohal hõljuma, et kohtspikker ilmuks.
- IsBaloon. Kui HTML Bootstrap tööriistaspikri väärtus on tõene, muutub kohtspikker pilveks.
- Tööriistavihje ikoon. Esindab tähemärki, mis kuvatakse aknasvihjeid.
Tööriistavihje
Selleks, et luua kauneid vihjeid näiteks Wordpressis loodud saidile, ei ole vaja veebiarendajate keelt põhjalikult tunda. Piisab, kui on teada sellise pistikprogrammi (laienduse) olemasolust nagu Tooltipster. Nime järgi on selge, et see plugin põhineb Tooltipil ja on sellega üllatav alt sarnane oma omadustelt ja otstarbelt. Mille jaoks see plugin on mõeldud? See võimaldab teil luua tööriistaspikri sees vajaliku HTML-märgistuse.
Pistikprogrammi töö põhineb otseteede sisestamisel lehele. Sisaldab kõiki põhilisi HTML Bootstrapi tööriistaspikri atribuute: sisu (andmed-tööriistaspiks-sisu), pealkiri, asukoht, päästik jne. See võimaldab muuta teemat, fonti, tööriistaspikri suurust, värvi, sisestada pilti ja palju muud.
