Сайтыңызды келушілер үшін қалай тартымды етуге болады? Бұл сұрақ интернет-ресурстардың барлық дерлік иелерін мазалайды: саудагерлерді, блогерлерді, шағын және ірі бизнес иелерін, саяхатшыларды және әлемге айтары бар жай ғана креативті адамдарды.
Веб-сайт неге әдемі және функционалды болуы керек?
Кіру саны сайттың тақырыбына және оның мақсатты аудиториясына, адамдардың белгілі бір өнімге қызығушылығына, инвестицияға, жарнамаға, мазмұнға және басқа да көптеген факторларға байланысты. Бірақ сайтты «киіммен қарсы алғанын» жоққа шығаруға болмайды. Бұл ресурстың бірінші және негізгі беті, оның бет-бейнесі, визиттік картасы, ол арқылы келуші өзінің уақытын мазмұнды одан әрі қарауға жұмсағысы келетінін немесе жұмсағысы келмейтінін түсінуі керек.
Ал қателікке орын жоқ! АҚШ-тағы техникалық университеттердің бірінің зерттеуі бойынша, кіруші сайт туралы алғашқы әсерді бір секундтан аз уақыт ішінде алады. Орташа алғанда, адам сайтты 3 секундта «сканерлейді». Найзағай жылдамдығы, солай емес пе?!
Ресурс сәттілігінің 70%-ға дейіні негізгі беттің қалай көрінетініне байланысты. Адамдар бірінші байқайтын нәрселоготипі, бірақ екіншісі - навигация. Ал логотипте бәрі азды-көпті түсінікті болса, навигацияға, мәзірге және сайттың эргономикасының ыңғайлылығына назар аударған жөн. Ақылға қонымды сұрақ туындайды: «Сайтты қалай безендіруге болады, оны мүмкіндігінше функционалды және ыңғайлы, бірақ сонымен бірге әдемі етеді?» Ұсынылатын көптеген ерекше идеялар бар, бірақ ең қызықтыларының бірі - кеңестер.
Кеңестер дегеніміз не? Сайттың функционалдығын жақсартудың тамаша механизмі болумен қатар, кеңестер белгішенің, сөздің немесе суреттің үстіне меңзерді апарған кезде пайдаланушыға белгілі бір кескіннің түсіндірмесін көруге мүмкіндік беретін құрал болып табылады.
Кеңестермен жұмыс істеу құралдары
Bootstrap – кеңестер жасауға арналған ең жақсы құрал. Бұл HTML, CSS, Sass және JavaScript тілдерінде жазылған қолданбалар мен веб-сайттарды жасауға арналған үйренуге оңай үлгілер жинағы.
Нақтырақ айтсақ, кеңестер Bootstrap үлгісінің графикалық элементтерінің бірін пайдаланады - Құрал кеңесі.
Bootstrap құрылымы "Twitter" үшін жасалған және бастапқыда "Twitter Blueprint" деп аталды. 2012 жылы кейбір өзгерістерден кейін ол 12 бағанды торды алды, бейімделді және таныс атауды алды - Tooltip. Құрал кеңесі - монитор экранындағы белгілі бір элементтің үстіне апарған кезде пайда болатын элемент.
Кеңес жасау
Атрибуттарды пайдаланып Bootstrap кеңесін жасауға боладыдеректер, сондай-ақ «Java Script» элементтерін белсендіру арқылы. HTML Bootstrap Tooltip жасаудың екі негізгі жолы бар. Біріншісінің мәні анықтамалық мәтінді қамтитын атрибут пен атрибут тақырыбын (тақырып) қолдану болып табылады. Құрал кеңесі жоғарғы жағында пайда болады (әдепкі параметр). Автоматты инициализация өнімділік себептеріне байланысты "Twitter bootstrap" қолданбасында ескіргендіктен, құралдар кеңесін инициализациялау қажет екенін есте ұстаған жөн.
Кеңестерді инициализациялау үшін атрибуты бар барлық элементтер үшін құралдар кеңесі әдісі қалпына келтірілетін арнайы JavaScript пайдаланылады. Екінші әдістің мәні құрал кеңесін қамтитын құралдар класын жазу арқылы jQuery кітапханасының қатысуымен «JavaScript» кодын пайдаланып, кеңесті белсендіру болып табылады. Элемент таңдау әдісін қоспағанда, әдіс біріншіге ұқсас. Төменде көрсетілген жолмен "Java Script" ішіндегі кеңестерді қосуға болады.
Bootstrap кеңесінің мысалы
Кеңестерді орналастырудың төрт негізгі опциясы бар: сол және оң жақ жиектерде, элементтің үстінде және астында.
Жоғарыдан келген кеңес
Оңға кеңес
Төменгі жағындағы кеңес
Солға кеңес
Кеңестерді пайдалану
Bootstrap құралдар кеңесін пайдалану көп. Пайдаланушы мәтіндегі шет тілінен мәтіннің аудармасын түсінуі үшін құралдар кеңестерін кірістіруге болады. Сондай-ақ, құралдар кеңестерін меңзерді меңзерді апарған кезде панельдегі түймелердің мағынасын түсінуге көмектесетін құрал ретінде пайдалануға болады. Bootstrap Tooltip үлгілері компания жаңалықтарына жазылу жасау үшін әртүрлі ұйымдардың веб-сайттарында жиі пайдаланылады. Бұл тұтынушыларды жаңартып отырады және келушілерге жеңілдіктер, ұсыныстар, компаниядағы өзгерістер сияқты жаңа ақпаратты алуға мүмкіндік береді.
Пайдаланушы ақпараттық бюллетеньге жазылу үшін электрондық пошта мекенжайын енгізуі қажет мысалды қарастырыңыз. Клиент аудиториясының жаңалықтарға жазылуын қамтамасыз ету міндеті HTML5 және қажетті атрибут арқылы оңай орындалады. Бұл жағдайда құралдар кеңесі пайдаланушы әрекеттер ретін түсінуі үшін қажет. Мысалы, электрондық пошта мекенжайын енгізгеннен кейін мен құсбелгіні қойдым: «Мен компания жаңалықтарын электрондық пошта мекенжайыма алуға келісемін». Төменде пішін кодының мысалы берілген.
Бұл кодты HTML Bootstrap Tooltip құралына орнату оңай. Бірақ пайдасы айтарлықтай. Енді тұтынушылар компанияның барлық жаңалықтарын біледі. Бұл тегін жарнаманың бір түрі.
Қалқымалы терезелерді жасау кезіндегі негізгі қателеркеңестер
Bootstrap Tooltip жұмыс істемесе не істеу керек? Құрал кеңесі атрибуты жұмыс істемейтін бірінші және негізгі қате - кеңес құралы қосылмаған болса. Оны іске қосу үшін арнайы кодты пайдалану керек.
Бұл әдіс веб-беттегі барлық кеңестерді инициализациялауға мүмкіндік береді.
Екінші жиі кездесетін қате - тақырыпта jQuery болмауы.
Сілтеме дұрыс жұмыс істеуі үшін қажетті шарт бар - "Java Script" сияқты деректерді өңдеу функциясы көрсетілуі керек.
Кеңес сипаттары
Негізінде Tooltip компоненті тінтуір меңзерін беттің бір немесе басқа бөлігіне жылжытқанда кеңестерді көрсетуге арналған. Бірақ, анықтаманың оң, сол және жоғарғы жағындағы құралдар кеңесінің орнына қосымша, кеңестің келесі қасиеттері бар:
- Белсенді. Bootstrap Tooltip құралында шын сипатын пайдалану құралдар кеңестерін көрсетуге мүмкіндік береді, ал сол сипатты "false" мәніне орнату ешбір кеңестер көрсетілмейтінін білдіреді.
- AutoPopDelay – кеңестер көрсетілетін уақыт.
- AutoPopDelay. Құрал кеңесі пайда болуы үшін тінтуір курсоры элементтің үстіне апару керек уақыт мөлшерін көрсетеді.
- IsBaloon. HTML Bootstrap Tooltip кеңесінің мәні шын болса, кеңес бұлтқа өзгереді.
- ҚұралдарКеңес белгішесі. Терезеде көрсетілетін таңбаны білдіредікеңестер.
Анықтамалық кеңес
Әдемі кеңестер жасау үшін, мысалы, Wordpress-те жасалған сайтта веб-әзірлеушілердің тілін жетік білу қажет емес. Tooltipster сияқты плагиннің (кеңейтімнің) болуы туралы білу жеткілікті. Атауынан бұл плагин Tooltip негізінде жасалғаны және оның қасиеттері мен мақсаты бойынша таңқаларлық ұқсас екені анық. Бұл плагин не үшін қажет? Ол құралдар кеңесінің ішінде қажетті HTML белгілеуін жасауға мүмкіндік береді.
Плагиннің жұмысы бетте төте жолдарды енгізуге негізделген. Барлық негізгі HTML Bootstrap Tooltip атрибуттарын қамтиды: мазмұн (деректер-құрал кеңесі-мазмұн), тақырып, орын, триггер, т.б. Бұл тақырыпты, қаріпті, құралдар кеңесінің өлшемін, түсін өзгертуге, суретті енгізуге және т.б. мүмкіндік береді.
