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