რატომ ყველა ვებ-გვერდი აგებულია სტრუქტურის, სტილისა და ქცევის კომბინაციით
საერთო ანალოგია, რომელიც გამოიყენება წინასაწარი ვებ-გვერდის განვითარების აღსაწერად, ის არის 3-ფეხის ფიგურის მსგავსი. ეს 3 ფეხები, რომლებიც ასევე ცნობილია როგორც ვებ-გვერდის 3 ფენა, არის სტრუქტურა, სტილი და ქცევა.
ვებ-განვითარების სამი ფენა
- სტრუქტურა ან შინაარსის ფენა
- ვებ გვერდის სტრუქტურა ან შინაარსობრივი ფენა ამ გვერდის ძირითადი HTML კოდია. სახლის ჩარჩოს მსგავსად ქმნის ძლიერ საფუძველს, რომლითაც დანარჩენი სახლი აშენებულია, ასე რომ HTML- ის მყარი საფუძველი ქმნის პლატფორმას, რომლის ნახვაც შეიძლება შეიქმნას საიტი. HTML სტრუქტურა შეიძლება შეიცავდეს ტექსტს ან გამოსახულებას და მოიცავს ჰიპერბმულებს, რომლებიც სტუმრებს გამოიყენებენ ნავიგაციისთვის ამ საიტზე.
- სტილი ან პრეზენტაცია
- სტილის ან პრეზენტაციის ფენა კარნახობს, თუ როგორ სტრუქტურა HTML დოკუმენტი შეისწავლის საიტის სტუმრებს. ეს ფენა განისაზღვრება CSS (Cascading Style Sheets). ეს ფაილი შეიცავს სტილებს, რომლებიც მიუთითებენ, თუ როგორ გამოჩნდება დოკუმენტი ბრაუზერში. დღევანდელ ვებ-გვერდზე, სტილის ფენა ასევე შეიძლება შეიცავდეს მედია შეკითხვებს, რომელთაც შეუძლიათ შეცვალონ საიტის ეკრანი განსხვავებული ეკრანის ზომისა და მოწყობილობების მიხედვით .
- მოქმედება
- ქცევის ფენა არის ვებ გვერდის ფენა, რომელსაც შეუძლია სხვადასხვა მომხმარებლის მოქმედებაზე რეაგირება ან შეიტანოს ცვლილებები გვერდზე არსებული პირობების მიხედვით. ვებ გვერდების უმრავლესობისთვის ქცევა დონეზე იქნება JavaScript ურთიერთქმედების გვერდზე.
რატომ უნდა ჩამოყალიბდეს ფენების?
ვებ-გვერდის შექმნისას სასურველია, რომ ფენის გაყოფა შეუძლებელია. სტრუქტურა უნდა იყოს დარწმუნებული თქვენი HTML, ვიზუალური სტილი CSS და ქცევის ნებისმიერი სკრიპტები, რომ საიტი იყენებს.
ფენების გამიჯვნის ზოგიერთი სარგებელია:
- საერთო რესურსები
- როდესაც ჩაწერეთ გარე CSS ფაილი ან JavaScript ფაილი, შეგიძლიათ გამოიყენოთ ეს ფაილი თქვენს ვებ გვერდზე ნებისმიერ გვერდზე. თუ თქვენ უნდა შეიტანოთ ცვლილება ამ ფაილზე, შესაძლოა განათავსოთ ზოგიერთი ტიპოგრაფიული სტილის ნახვა საიტზე, ყველა გვერდზე, რომელიც იყენებს სტილისტს, მიიღებს ცვლილებას. არ არის საჭირო ინდივიდუალურად, თითოეული საიტის გვერდის რედაქტირება, რაც უფრო ფართო საიტზე შეიძლება იყოს სავარაუდო წამოწყება.
- სწრაფად ჩამოტვირთვები
- მას შემდეგ, რაც სკრიპტი ან სტილისტი გადმოწერილი იქნა თქვენი მომხმარებლის მიერ პირველად, ეს მათი ვებ ბრაუზერია. იმის გამო, რომ ეს საერთო რესურსები ახლა შეიცავს ქეში, სხვა გვერდები, რომლებიც მოითხოვენ ბრაუზერის ჩატვირთვას უფრო სწრაფად, რაც აუმჯობესებს საერთო გვერდის სიჩქარესა და შესრულებას.
- მრავალწლიანი გუნდი
- თუ თქვენ გაქვთ ერთზე მეტი ადამიანი ვებ-გვერდზე ერთდროულად, შეგიძლიათ გამოიყენოთ ისეთი სისტემები, რომლებიც "შეამოწმეთ" და "შეამოწმეთ" ფაილები, რათა უზრუნველყონ, რომ გუნდში ყველა მომხმარებელი მუშაობს ამ ფაილების უახლეს ვერსიებთან. ეს გაცილებით რთულია, თუ სტილისა და ქცევების სტრუქტურას უკავშირდება სტრუქტურა.
- SEO
- საიტი, რომელსაც აქვს სტილი და სტრუქტურის მკაფიო განცალკევება, სავარაუდოდ, უკეთესად აწარმოებს საძიებო სისტემებს, რადგან ამ საიტებზე უფრო ეფექტურად დაიხვეწება ეს გვერდი და გაიგებს გვერდს ვიზუალური სტილის ან ქცევის ინფორმაციის გარეშე.
- ხელმისაწვდომობა
- გარე სტილის ფურცლები და სკრიპტები უფრო ხელმისაწვდომი ადამიანები და ბრაუზერები. იმიტომ, რომ არსებობს სტილისა და სტრუქტურის გამიჯვნა, პროგრამული უზრუნველყოფის მსგავსად, ეკრანის მკითხველს უფრო ადვილად შეუძლია შინაარსის შემცველი სტრუქტურის შიგთავსის შემცველი სტრუქტურა, რომელსაც არ შეუძლია გამოიყენოს სტილები.
- უკანა თავსებადობა
- როდესაც თქვენ გაქვთ საიტი, რომელიც შეიმუშავებს განვითარების ფენებს, ეს უკანასკნელი უფრო თავსებადია, რადგან ბრაუზერები ან მოწყობილობა, რომელიც ვერ გამოიყენებს გარკვეულ CSS სტილებს ან შესაძლოა JavaScript- ის გამორთვა შეიძლება კვლავ იხილოთ HTML- ში. შენი ვებ-გვერდი შეიძლება შემდეგ ეტაპობრივად გაუმჯობესდეს იმ ბრაუზერების თვისებით, რომლებიც მხარს უჭერენ მათ.
HTML - სტრუქტურა Layer
სტრუქტურის ფენა არის სადაც თქვენ შეინახავთ ყველა იმ შინაარსს, რომელსაც თქვენს მომხმარებელს სურს წაიკითხოთ ან შეხედეთ. ეს კოდირებული იქნება სტანდარტებთან შესაბამისობაში HTML5 და შეიძლება შეიცავდეს ტექსტს და სურათებს, ასევე მულტიმედიას (ვიდეო, აუდიო და ა.შ.). მნიშვნელოვანია დავრწმუნდეთ, რომ თქვენი საიტის შინაარსის ყველა ასპექტი წარმოდგენილია სტრუქტურის ფენაში. ეს საშუალებას აძლევს ნებისმიერ მომხმარებელს, ვინც JavaScript გამორთულია ან ვერ ხედავს CSS- ს, ჯერ კიდევ აქვს ხელმისაწვდომობა მთელ საიტზე, თუ არა ყველა საიტის ფუნქცია.
CSS - Styles Layer
თქვენ შექმნით ყველა თქვენს ვიზუალური სტილის თქვენს ვებსაიტს გარე სტილის ფურცელში. თქვენ შეგიძლიათ გამოიყენოთ მრავალი სტილისტები, მაგრამ გახსოვდეთ, რომ ყველა ცალკე CSS ფაილი მოითხოვს HTTP მოთხოვნის მისაღებად, რომელიც გავლენას ახდენს საიტის შესრულებაზე.
JavaScript - ქცევის ფენა
JavaScript არის ყველაზე ხშირად გამოყენებული ენა ქცევის ფენისთვის, მაგრამ როგორც ზემოთ აღვნიშნეთ, CGI და PHP ასევე შეგიძლიათ ვებ გვერდის ქცევების გენერირება. როგორც ამბობენ, როდესაც დეველოპერები უწოდებენ ქცევის ფენას, ისინი იმას ნიშნავს, რომ ფენა, რომელიც პირდაპირ გააქტიურებულია ბრაუზერში, ასე რომ, JavaScript თითქმის ყოველთვის არჩევანის ენაა. თქვენ გამოიყენეთ ეს ფენა პირდაპირ DOM- ის ან დოკუმენტის ობიექტის მოდელით. კონტენტის შრეში DOM ურთიერთქმედებისთვის მნიშვნელოვანია შინაარსიანი შრეში წერის სწორი HTML .
ქცევის ფენის შექმნისას, თქვენ უნდა გამოიყენოთ გარე სკრიპტის ფაილები, ისევე როგორც CSS- ით. თქვენ მიიღებთ გარე სტილის ფურცლის გამოყენების ყველა უპირატესობას.