Kā padarīt savu vietni pievilcīgu apmeklētājiem? Šis jautājums satrauc gandrīz visus interneta resursu īpašniekus: tirgotājus, emuāru autorus, mazo un lielo uzņēmumu īpašniekus, ceļotājus un vienkārši radošus cilvēkus, kuriem ir ko pastāstīt pasaulei.
Kāpēc vietnei jābūt skaistai un funkcionālai?
Apmeklējumu skaits ir atkarīgs no vietnes tēmas un tās mērķauditorijas, cilvēku intereses par konkrētu produktu, investīcijām, reklāmas, satura un daudziem citiem faktoriem. Bet nevar noliegt, ka vietni "sveicina drēbes". Tā ir resursa pirmā un galvenā lapa, kas ir tā seja, vizītkarte, pēc kuras apmeklētājam jāsaprot, vai viņš vēlas tērēt savu laiku satura tālākai apskatei.
Un kļūdām nav vietas! Saskaņā ar vienas no ASV tehniskajām universitātēm veiktajiem pētījumiem apmeklētājs pirmo iespaidu par vietu gūst mazāk nekā sekundē. Vidēji cilvēks vietni “skenē” 3 sekundēs. Zibens ātrums, vai ne?!
Līdz 70% no resursa panākumiem ir atkarīgi no galvenās lapas izskata. Pirmā lieta, ko cilvēki pamana, irlogo, bet otrā ir navigācija. Un, ja ar logotipu viss ir vairāk vai mazāk skaidrs, tad ir vērts lauzīt galvu par navigāciju, izvēlni un vietnes ergonomikas ērtībām. Rodas pamatots jautājums: "Kā izrotāt savu vietni, padarīt to pēc iespējas funkcionālāku un ērtāku, bet tajā pašā laikā skaistu?" Var piedāvāt daudz neparastu ideju, taču viens no interesantākajiem ir rīka padomi.
Kas ir rīka padomi? Rīka padomi ir ne tikai lielisks mehānisms vietnes funkcionalitātes uzlabošanai, bet arī rīks, kas ļauj lietotājam redzēt konkrēta attēla skaidrojumu, virzot kursoru virs ikonas, vārda vai attēla.
Rīki darbam ar rīkpadomiem
Bootstrap ir labākais rīks padomu izveidei. Tā ir viegli apgūstama veidņu kopa, lai izveidotu lietotnes un vietnes, kas rakstītas HTML, CSS, Sass un JavaScript valodā.
Lai būtu konkrēti, rīka padomi izmanto vienu no Bootstrap veidnes grafiskajiem elementiem - rīka padoms.
Bootstrap ietvars tika izveidots priekš "Twitter" un sākotnēji tika saukts par "Twitter Blueprint". Pēc dažām izmaiņām 2012. gadā tas saņēma 12 kolonnu režģi, kļuva adaptīvs un ieguva pazīstamo nosaukumu - Tooltip. Rīka padoms ir elements, kas tiek parādīts, kad monitora ekrānā virzāt kursoru virs noteikta elementa.
Padoma izveide
Varat izveidot Bootstrap rīka padomu, izmantojot atribūtusdatus, kā arī aktivizējot "Java Script" elementus. Ir divi galvenie veidi, kā izveidot HTML sāknēšanas rīka padomu. Pirmā būtība ir atribūta un atribūta nosaukuma (title) pielietošana, kurā būs mājiena teksts. Rīka padoms tiks parādīts augšpusē (noklusējuma iestatījums). Ir vērts atcerēties, ka rīka padoms ir jāinicializē, jo veiktspējas apsvērumu dēļ automātiskā inicializēšana Twitter sāknēšanas programmā ir novecojusi.
Lai inicializētu rīka padomus, tiek izmantots īpašs JavaScript, kurā tiek atjaunota rīka padomu metode visiem elementiem, kuriem ir atribūts. Otrās metodes būtība ir rīka padoma aktivizēšana, izmantojot "JavaScript" kodu ar jQuery bibliotēkas līdzdalību, rakstot rīku klasi, kas ietver rīka padomu. Metode ir līdzīga pirmajai, izņemot elementu atlases metodi. Varat iespējot ieteikumus "Java skriptā" tālāk norādītajā veidā.
Sāknēšanas rīka padoma piemērs
Ir četras galvenās rīkpadomu pozicionēšanas iespējas: kreisajā un labajā malā, kā arī virs un zem elementa.
Padoms no augšas
Pareizs padoms
Padoms apakšā
Padoms pa kreisi
Rīkupadomu izmantošana
Sāknēšanas rīka padomam ir daudz lietojumu. Varat ievietot rīka padomus, lai lietotājs varētu saprast teksta tulkojumu no svešvalodas tekstā. Rīka padomus var izmantot arī kā rīku, kas palīdz lietotājam saprast paneļa pogu nozīmi, virzot kursoru virs tām. Bootstrap Tooltip veidnes bieži tiek izmantotas dažādu organizāciju tīmekļa vietnēs, lai izveidotu uzņēmuma jaunumu abonementu. Tādējādi klienti tiek informēti, kā arī ļauj apmeklētājiem saņemt jaunu informāciju, piemēram, atlaižu likmes, piedāvājumus, izmaiņas uzņēmumā.
Apsveriet piemēru, kad lietotājam ir jāievada sava e-pasta adrese, lai abonētu biļetenu. Uzdevums nodrošināt, lai klientu auditorija abonētu ziņas, visvieglāk izpildāms, izmantojot HTML5 un nepieciešamo atribūtu. Rīka padoma padoms šajā gadījumā ir nepieciešams, lai lietotājs varētu saprast darbību secību. Piemēram, pēc e-pasta adreses ievadīšanas es atzīmēju rūtiņu: "Es piekrītu saņemt uzņēmuma ziņas uz manu e-pasta adresi." Tālāk ir sniegts veidlapas koda piemērs.
Šī koda instalēšana HTML Bootstrap rīka padomos ir vienkārša. Bet ieguvumi ir ievērojami. Tagad patērētāji zina visus uzņēmuma jaunumus. Šī ir sava veida bezmaksas reklāma.
Galvenās kļūdas, veidojot uznirstošos loguspadomi
Ko darīt, ja Bootstrap rīka padoms nedarbojas? Pirmā un galvenā kļūda, kurā rīka padoma atribūts nedarbosies, ir tad, ja rīka padoms nav iespējots. Lai to aktivizētu, jāizmanto īpašs kods.
Šī metode ļauj inicializēt absolūti visus rīka padomus tīmekļa lapā.
Otra izplatītā kļūda ir jQuery neesamība galvenē.
Ir nepieciešams nosacījums, lai saite darbotos pareizi – ir jānorāda tāda datu apstrādes funkcija kā "Java Script".
Rīka padoma rekvizīti
Rīka padoma komponents ir paredzēts, lai parādītu rīka padomus, kad pārvietojat peles rādītāju virs vienas vai citas lapas daļas. Taču papildus rīka padoma atrašanās vietai labajā, kreisajā un augšpusē, izmantojot palīdzību, rīka padomam ir šādas īpašības:
- Aktīvs. Izmantojot patieso rekvizītu Bootstrap rīka padomos, var parādīt rīka padomus, savukārt iestatot to pašu rekvizītu uz false, rīka padomus nevar parādīt.
- AutoPopDelay ir laiks, kurā tiek parādīti padomi.
- AutoPopDelay. Norāda laiku, cik ilgi peles kursoram jāvirza virs elementa, lai tiktu parādīts rīka padoms.
- IsBaloon. Ja HTML sāknēšanas rīka padoma vērtība ir patiesa, rīka padoms tiks mainīts uz mākoni.
- ToolTipIcon. Apzīmē rakstzīmi, kas tiek parādīta logāmājieni.
Rīkupadoms
Lai izveidotu skaistus rīku padomus, piemēram, vietnē, kas izveidota uz Wordpress, nav nepieciešams rūpīgi zināt tīmekļa izstrādātāju valodu. Pietiek zināt par tāda spraudņa (paplašinājuma) esamību kā Tooltipster. No nosaukuma ir skaidrs, ka šis spraudnis ir balstīts uz Tooltip un ir pārsteidzoši līdzīgs tam pēc savām īpašībām un mērķa. Kam paredzēts šis spraudnis? Tas ļauj jums izveidot nepieciešamo HTML marķējumu rīka padomos.
Spraudņa darbības pamatā ir īsinājumtaustiņu ievietošana lapā. Ietver visus pamata HTML sāknēšanas rīka padoma atribūtus: saturs (data-rīka padoma saturs), virsraksts, pozīcija, aktivizētājs utt. Tas ļauj mainīt motīvu, fontu, rīka padoma izmēru, krāsu, ievietot attēlu un daudz ko citu.
