Резеңкелі сайттың қарапайым қулықтары
Сайттың резеңкелі болуы үшін, Twitter Bootstrap framework туралы біле жүріңіз.
Бұның жұмыс істеу схемасы былай: кез-келген енге тең сайтты проценттік қатынаспен 12 бағанға (шартты түрде бұл стандарттан ауытқып, басқа мәнге тең бағандарға бөлуге болады) бөледі.
Интернетте ағылшын және орыс тілдерінде ресми сайттары бар және бай кітапханасы бар. Кітапханада веб-компоненттер: графикалық (сайт жылдам жүктелуі үшін, .svg форматтағы жинақтар бар), кнопка, форма, скрипт, плагин т.с.с. ұсынылады.
Сайттың қарапайым прототипін алу үшін,
www.layoutit.com/ сайтын пайдалансаңыз болады.
Резеңкелі сайттар пайдаланушыға әлдебір таза өнім болып ұсынылып тұрғанымен, веб-дизайнер, фронтенд программистттер ол сайт пайдаланған қулықтарды бірден аңғара алады. Мәселен, кең таралған бірнеше қулықтар:
— Сайт блогы бір тонды түстен тұрады: ол CSS тег арқылы біртонды түс етіп берілетін стиль. Ол түс пайдаланушы назарына әдемі түс беріп тұрғанымен, веб тілінде оңай орындалатын әрі сайт жүктелуіне салмақ түсірмейтін тәсіл және кез-келген ені бойынша мониторға шексіз созылып кете беретін, сапасын жоғалтпайтын көрініс тудырады;
— Сайттың кейбір графикалық элементі бірүсті: олар көбіне .svg форматындағы иконкалар. Әрине, көрскемдік жағынан растрлы суретке орын беруі мүмкін, алайда оның мынадай пайдалы жақтары бар: сайт жүктелуіне салмақ түсірмейді; растрлы сурет элементінің x, y бағыты бойынша төрбұрышты қамтып, жанындағы элементпен конфликт тудыратын жағдайдан құтылуға болады. Бұл формат дизайнерлердің растрлы және векторлы ұғымына сәйкес келеді, яғни вебтің векторлы кескіні — .svg форматы.
— Сайт ені 8 санына бөлінетін болғаны өз пайдасын тигізе алады: кез-келген монитор ені 8 санына бөлініп отырады. Сәйкесінше, сіздің сайтыңыз үлкейіп не кішірейгенде, математикалық жолмен ұзындығын тең дәрежеде бөлгенде, тура санға тең болып отырады;
— Сайт блогы қандай-да бір суреттен тұрса, ол үлкен мониторда шеттері кесіліп қалмас үшін, келесі варианттар пайдасын тигізе алады:
+ Сурет шетін белгілі бір түске айналып кететіндей ету қажет. Ол кесіліп қалатын суретке қарағанда, пайдаланушыға байқала бермейтін трюк.
+ CSS-тің @media (және де сурет енін проценттік көрсеткішпен белгілеп) тегі арқылы түрлі монитордың өлшеміне сай суретті ауыстырып отырса болады;
— Сайт элементтерін орналастырғанда, бетіне сетка қойып орналастырсаңыз, өз пайдасын тигізеді. Мәслен, ені 1024 пиксель сайтты 100% көрсеткіші тұрғысынан 12 бағанға бөліп, әр бағанға тиісті элементтерді орналастыру біріншіден резеңкелі сайттың сәтті шығуына, екіншіден элементтер бір-бірінің ауданына конфликт турырмас үшін (сіресе олар позицияларын өзгерткенде, сілтемелі болса) қажет екен.
Бұның жұмыс істеу схемасы былай: кез-келген енге тең сайтты проценттік қатынаспен 12 бағанға (шартты түрде бұл стандарттан ауытқып, басқа мәнге тең бағандарға бөлуге болады) бөледі.
Интернетте ағылшын және орыс тілдерінде ресми сайттары бар және бай кітапханасы бар. Кітапханада веб-компоненттер: графикалық (сайт жылдам жүктелуі үшін, .svg форматтағы жинақтар бар), кнопка, форма, скрипт, плагин т.с.с. ұсынылады.
Сайттың қарапайым прототипін алу үшін,
www.layoutit.com/ сайтын пайдалансаңыз болады.
Резеңкелі сайттар пайдаланушыға әлдебір таза өнім болып ұсынылып тұрғанымен, веб-дизайнер, фронтенд программистттер ол сайт пайдаланған қулықтарды бірден аңғара алады. Мәселен, кең таралған бірнеше қулықтар:
— Сайт блогы бір тонды түстен тұрады: ол CSS тег арқылы біртонды түс етіп берілетін стиль. Ол түс пайдаланушы назарына әдемі түс беріп тұрғанымен, веб тілінде оңай орындалатын әрі сайт жүктелуіне салмақ түсірмейтін тәсіл және кез-келген ені бойынша мониторға шексіз созылып кете беретін, сапасын жоғалтпайтын көрініс тудырады;
— Сайттың кейбір графикалық элементі бірүсті: олар көбіне .svg форматындағы иконкалар. Әрине, көрскемдік жағынан растрлы суретке орын беруі мүмкін, алайда оның мынадай пайдалы жақтары бар: сайт жүктелуіне салмақ түсірмейді; растрлы сурет элементінің x, y бағыты бойынша төрбұрышты қамтып, жанындағы элементпен конфликт тудыратын жағдайдан құтылуға болады. Бұл формат дизайнерлердің растрлы және векторлы ұғымына сәйкес келеді, яғни вебтің векторлы кескіні — .svg форматы.
— Сайт ені 8 санына бөлінетін болғаны өз пайдасын тигізе алады: кез-келген монитор ені 8 санына бөлініп отырады. Сәйкесінше, сіздің сайтыңыз үлкейіп не кішірейгенде, математикалық жолмен ұзындығын тең дәрежеде бөлгенде, тура санға тең болып отырады;
— Сайт блогы қандай-да бір суреттен тұрса, ол үлкен мониторда шеттері кесіліп қалмас үшін, келесі варианттар пайдасын тигізе алады:
+ Сурет шетін белгілі бір түске айналып кететіндей ету қажет. Ол кесіліп қалатын суретке қарағанда, пайдаланушыға байқала бермейтін трюк.
+ CSS-тің @media (және де сурет енін проценттік көрсеткішпен белгілеп) тегі арқылы түрлі монитордың өлшеміне сай суретті ауыстырып отырса болады;
— Сайт элементтерін орналастырғанда, бетіне сетка қойып орналастырсаңыз, өз пайдасын тигізеді. Мәслен, ені 1024 пиксель сайтты 100% көрсеткіші тұрғысынан 12 бағанға бөліп, әр бағанға тиісті элементтерді орналастыру біріншіден резеңкелі сайттың сәтті шығуына, екіншіден элементтер бір-бірінің ауданына конфликт турырмас үшін (сіресе олар позицияларын өзгерткенде, сілтемелі болса) қажет екен.
-
+4
Осы сөйлемді онша түсінбедім. svg менің білуімше, векторлық графикалы суреттер үшін пайдаланылады, егер иконка бірқалыпты түсті болса, оған не үшін svg пайдаланылады.
Мұнымен келісе алмаймын. Өйткені жоғарыда айтқанымдай, svg веткорлық графикалы, ал векторлық графикалы суреттер кез-келген өлшемде растрліктен сапалы болады. Олардың сапалары бірдей болуы мүмкін, бірақ растрлік векторлықтар сапалы бола алады деп ойламаймын.
Әр түрлі өлшемді экрандардан басқа, біз браузер терезесінің өлшемін жеке өзгерте аламыз ғой, ол кезде блоктар қалай әрекет етеді?
Бұл жерде мен сапа туралы айтпадым, тек қана көркемдік жағымен. Фотошоп корелден артық, көркемдеу жағынан. Сондықтан да оны фотостудиялар, түрлі графикалық туындыларға қолданып жатады. Ал, вектордың өзіндік жоғары сапасымен қатар, өзіндік шектеулері тағы бар. Ол пиксельдік деңгейде бір қалыптан екінші қалыпқа өзгере алмайды, өзгерсе де өте қиын жұмыс әрі фотошоптағыдай шыға қоюы да екіталай. Міне, осы моментті айтқан едім.