Неліктен барлық веб-сайттар құрылымды, стильді және мінез-құлықтың тіркесімін құрастырады?
Алдыңғы жақты веб-сайтты дамытуды сипаттау үшін пайдаланылатын әдеттегі ұқсастық - бұл 3-аяқты табуреткаға ұқсас. Веб-әзірлеудің 3 қабаты деп аталатын бұл 3 аяқтың құрылымы, стилі және мінез-құлқы болып табылады.
Web Development үш қабаты
- Құрылым немесе мазмұн деңгейі
- Веб-беттегі құрылым немесе мазмұн қабаты сол беттің негізгі HTML коды болып табылады. Үйдің қаңқасы сияқты, үйдің қалған бөлігі салынған күшті іргетас қалыптастырады, сондықтан HTML-ның берік іргетасы веб-сайтты жасауға болатын платформа жасайды. HTML құрылымы мәтіннен немесе суреттерден тұруы мүмкін және ол келушілер осы веб-сайтты шарлау үшін пайдаланатын гиперсілтемелерді қамтиды.
- Мәнер немесе көрсетілім қабаты
- Стиль немесе презентация қабаты құрылымдалған HTML құжатының торап келушілеріне қалай көрінетінін белгілейді. Бұл қабат CSS (Cascading Style Sheets) арқылы анықталады. Бұл файлдар құжаттың веб-шолғышта көрсетілуін көрсететін мәнерлерді қамтиды. Бүгінгі веб-сайтта стилі қабаты түрлі экран өлшемдері мен құрылғыларына негізделген тораптың көрінісін өзгерте алатын Медиа сұрауларын қамтуы мүмкін.
- Мінез-құлық
- Мінез-құлық деңгейі - әр түрлі пайдаланушы әрекеттеріне жауап бере алатын немесе шарттар жиынына негізделген бетке өзгерістер енгізе алатын веб-беттің қабаты. Көптеген веб-беттер үшін мінез-құлық деңгейі парақта JavaScript әрекеттестігі болады.
Неліктен қабаттарды бөлу керек?
Веб-бетті жасаған кезде қабаттарды мүмкіндігінше бөлек ұстау керек. Құрылым сіздің HTML-ға, визуалды стильдерге CSS-ке және сайт қолданатын сценарийлерге деген мінез-құлыққа қатысты болуы керек.
Қабаттардың бөлінуінің кейбір артықшылықтары:
- Ортақ ресурстар
- Сыртқы CSS файлын немесе JavaScript файлын жазғанда, бұл файлды веб-сайтыңыздағы кез келген бетке пайдалануға болады. Егер сіз осы файлды өзгертуге тура келсе, веб-сайттың кейбір типографиялық стильдерін жаңарту үшін, сол стиль кестесін пайдаланатын әрбір бет өзгерісті алады. Веб-сайттың әр бетін жеке-жеке редакциялаудың қажеті жоқ, ол үлкен сайт үшін қиындық тудыруы мүмкін.
- Жылдам жүктеулер
- Сценарий немесе стиль кестесін тұтынушы бірінші рет қотарғаннан кейін, олардың веб-браузері кэштеледі. Бұл ортақ ресурс кэште болғандықтан, шолғышта сұралатын басқа беттер жылдамырақ жүктеледі, бұл жалпы бет жылдамдығын және өнімділігін жақсартады.
- Көптеген топтар
- Егер веб-сайтта бірден көп адам жұмыс істейтін болса, сізде осы файлдардың ең соңғы нұсқасымен жұмыс істейтіндігіне көз жеткізу үшін файлдарды «тексеру» және «тексеру» үшін жүйені пайдалануға болады. Бұл стильдер мен мінез-құлық құрылымдық құжаттармен тығыз байланысты болса, мұны істеу әлдеқайда қиын.
- SEO
- Стильді және құрылымды анық ажырата алатын сайт іздеу жүйелеріне жақсы әсер етуі мүмкін, себебі бұл сайттар бұл мазмұнды тиімдірек тексеріп, бетті визуалды стильмен немесе мінез-құлық туралы ақпаратпен соқпастан түсінуіне болады.
- Қол жетімділік
- Сыртқы стиль кестелері мен сценарий файлдары адамдарға және браузерлерге қол жетімді. Стиль мен құрылымның бөлінуі бар болғандықтан, экрандағы оқырмандар сияқты бағдарламалық жасақтама контентті қабаттан мазмұнды оңай өңдей алады, олар кез-келген жағдайда пайдалануға болмайтын стильдермен шектелмейді.
- Артқы үйлесімділік
- Даму қабаттарымен бірге жасалған сайт бар болғанда, ол бұрынғыдай үйлесімді болады, себебі кейбір CSS мәнерлерін пайдалана алмайтын немесе JavaScript өшірілген болуы мүмкін браузерлер немесе құрылғы әлі де HTML көре алады. Сіздің веб-сайтыңызды кейіннен оларды қолдайтын браузерлердің мүмкіндіктерімен біртіндеп жақсартуға болады.
HTML - құрылымдық қабат
Құрылымдық қабат - сіздің тұтынушыларыңыз оқып-үйренетін немесе қарайтын барлық мазмұнды сақтайтын жерде. Бұл стандарттарға сәйкес келетін HTML5 кодта болады және ол мәтін мен суреттерді, сондай-ақ мультимедианы (бейне, аудио және т.б.) қамтуы мүмкін. Сіздің сайтыңыздың мазмұнының әрбір аспектінің құрылым қабатында болуын қамтамасыз ету маңызды. Бұл JavaScript өшірілген немесе CSS-ті көре алмайтын кез-келген тұтынушыларға, егер сол сайттың барлық функциялары болмаса, бүкіл веб-сайтқа кіруге мүмкіндік береді.
CSS - стильдердің қабаты
Веб-сайтыңызға арналған барлық көрнекі стильдерді сыртқы мәнер кестесінде жасайсыз. Бірнеше стиль кестесін пайдалануға болады, бірақ әрбір жеке CSS файлы HTTP сұрауын алып, сайт жұмысына әсер етеді.
JavaScript - Behavior Layer
JavaScript - бұл мінез-құлық деңгейі үшін ең жиі қолданылатын тіл, бірақ бұрын айтып өткенімдей, CGI және PHP веб-бет әрекеттерін де жасай алады. Айта кету керек, көптеген әзірлеушілер мінез-құлық деңгейіне сілтеме жасағанда, олар веб-браузерде тікелей белсендірілетін қабатты білдіреді, сондықтан JavaScript әрдайым таңдау тілін білдіреді. Сіз бұл қабатты DOM немесе Document Object Model-мен тікелей өзара әрекеттесу үшін қолданасыз. Мазмұн деңгейіндегі жарамды HTML жазу да мінез қабатындағы DOM өзара әрекеттестігі үшін де маңызды.
Мінез-құлық қабатында құрастырған кезде CSS сияқты секілді сыртқы сценарий файлдарын пайдалану керек. Сіз сыртқы стиль кестесін пайдаланудың барлық артықшылықтарын аласыз.