වෙබ් නිර්මාණ සැලසුම් තුනක්

සියලුම වෙබ් අඩවි ව්යුහය, ස්වරූපය සහ හැසිරීම් වල සංයුතියකින් සමන්විත වන්නේ ඇයි?

ඉදිරිපස-අන්ත වෙබ් අඩවි සංවර්ධනය කිරීම සඳහා භාවිතා කරන පොදු ප්රතිසමයක් වන්නේ එය 3 පාදයක් සහිත මලක් මෙන් ය. වෙබ් අඩවි සංවර්ධනය කිරීමේ ස්ථර තුනක් ලෙස හැඳින්වෙන මෙම 3 කකුල් යනු ව්යුහය, ස්වරූපය සහ අභිමානයයි.

වෙබ් සංවර්ධනය පිළිබඳ වෙබ් අඩවි තුනක්

• ව්යුහය හෝ අන්තර්ගත ස්ථරය
  • වෙබ් පිටුවක ව්යුහය හෝ අන්තර්ගත ස්තරය එම පිටුවෙහි යටින් පවතින HTML කේතය වේ. නිවසක රාමුව මෙන් නිවසක් ඉදි කර ඇති ශක්තිමත් පදනමක් නිර්මානය කරයි. එබැවින් වෙබ් අඩවි නිර්මාණය කළ හැකි වේදිකාවක් HTML නිර්මාණය කර ඇත. HTML ව්යුහය පෙළ හෝ පින්තූරවලින් සමන්විත විය හැකි අතර එම වෙබ් අඩවියේ සැරිසැරීම සඳහා නරඹන්නන් විසින් භාවිතා කරනු ඇති අධිවාදි සබැඳිය ඇතුලත් වේ.
• මෝස්තර හෝ ඉදිරිපත් කිරීමේ ස්ථරය
  • ව්යුහාත්මක හෝ ඉදිරිපත් කිරීමේ ස්ථරයක් ව්යුපීඩීකෘත HTML ලේඛනයක් අඩවි නරඹන්නන් වෙත පෙනෙනු ඇත. මෙම ස්තරය CSS (Cascading Style Sheets) මඟින් අර්ථ දක්වා ඇත. මෙම ලිපිගොනු වෙබ් බ්රවුසරයේ ලේඛනය දර්ශනය කළ යුතු ආකාරය පෙන්වන ආකාර වලින් මෙම ගොනු අඩංගු වේ. වර්තමාන වෙබ් මත, ශෛලිය ස්තරයට විවිධ තිර ප්රමාණයන් සහ උපාංග මත පදනම්ව වෙබ් අඩවියේ ප්රදර්ශනය වෙනස් කළ හැකි මාධ්ය විමසුම් ඇතුලත් විය හැකිය.
• හැසිරීම
  • හැසිරීමේ ස්තරය යනු විවිධ පරිශීලක ක්රියාවලි වලට ප්රතිචාර දැක්විය හැකි වෙබ් පිටුවක ස්ථරයක් හෝ කොන්දේසි සමූහයක් මත පදනම් වූ පිටුවකට වෙනස් කිරීමකි. බොහෝ වෙබ් පිටු සඳහා, හැසිරීමේ මට්ටම පිටු හි JavaScript අන්තර්ක්රියා වේ.

ස්තර වෙන් කර ගත යුත්තේ ඇයි?

ඔබ වෙබ් පිටුවක් නිර්මාණය කරන විට, ස්ථර වෙන් වෙන් වශයෙන් තබා ගත හැකි ය. ව්යුහය ඔබේ HTML, දෘශ්ය විලාසයන් CSS වෙත යැවිය යුතු අතර වෙබ් අඩවිය භාවිතා කරන ඕනෑම ස්ක්රිප්ට් වලට හැසිරවිය යුතුය.

ස්ථර වෙන් කිරීමෙහි ඇති සමහර වාසි:

• හවුල් සම්පත්
  • ඔබ බාහිර CSS ගොනුව හෝ JavaScript ගොනුව ලියන විට, ඔබේ වෙබ් අඩවියෙහි ඕනෑම පිටුවක එම ගොනුව භාවිතා කළ හැකිය. ඔබට එම ගොනුව වෙනස් කිරීමට අවශ්ය නම්, වෙබ් අඩවියේ ඇතැම් අකුරු අනුපිළිවෙල යාවත්කාලීන කිරීම සඳහා එම වින්යාසය භාවිතා කරන සෑම පිටුවකටම වෙනසක් ලැබෙනු ඇත. තනි වෙබ් අඩවියේ සෑම පිටුවක්ම සංස්කරණය කිරීමට කිසිදු අවශ්යතාවක් නැත, විශාල වෙබ් අඩවිය සඳහා අපිරිසිදු ව්යාපාරයක් විය හැකිය.
• වේගවත් බාගැනීම්
  • ඔබගේ ගනුදෙනුකරු විසින් පළමු වරට තිර පිටපත හෝ මෝස්තර විලාසය බාගත කරගත් පසු, එය ඔවුන්ගේ වෙබ් බ්රවුසරය මගින් සංචිත කෙරී ඇත. මෙම හවුල් සම්පත් දැන් සීඝ්රයෙන් අන්තර්ගත වන බැවින්, බ්රව්සරයේ වඩා වැඩි වේගයකින් බ්රවුසරයේ බර පැටවූ අනෙකුත් පිටු, සමස්ත පිටු වේගවත් හා කාර්යසාධනය වැඩිදියුණු වේ.
• බහු පුද්ගල කණ්ඩායම්
  • එකවර වෙබ් අඩවියක වැඩ කරන එක් පුද්ගලයෙකුට වඩා වැඩි ගණනක් තිබේ නම්, ඔබට මෙම ගොනු වල නවතම අනුවාදයන් සමඟ කටයුතු කරන බව සහතික කිරීමට පද්ධතියේ "පරික්ෂා කිරීම" සහ "පරීක්ෂා කිරීම" සඳහා පද්ධති භාවිතා කළ හැකිය. ශෛලීන් සහ හැසිරීම් ව්යුහාත්මක ලියකියවිලි සමඟ බැඳී තිබේ නම් එය වඩාත් අපහසු වේ.

• SEO
  • ශෛලිය හා ව්යුහය පැහැදිලි වෙන්වීමක් ඇති වෙබ් අඩවියක් සෙවුම් ඇන්ජින් සඳහා වඩා හොඳ කාර්යක්ෂමතාවයක් ඇති කරයි. මෙම අඩවි වඩා ඵලදායී ලෙස එම අන්තර්ගතය ග්රහණය කර ගැනීමට සහ දෘශ්ය ශෛලිය හෝ හැසිරීම් තොරතුරු සමග බැසීමෙන් තොරව පිටුව වටහා ගැනීමට නොහැකිය.
• ප්රවේශ
  • බාහිර ශෛල පත්ර සහ ස්ක්රිප්ට් ෆයිල්ස් මිනිසුන්ට සහ බ්රව්සර් වලට ප්රවේශ විය හැක. ශෛලිය හා ව්යුහය වෙන්වීමක් ඇති බැවින්, තිර රචකයන් වැනි මෘදුකාංග, කෙසේ වෙතත්, ඒවා කෙසේ හෝ භාවිතා කළ නොහැකි විලාසනවලින් තොරව ව්යුහය ස්ථරයෙන් අන්තර්ගත සැකසීමට හැකි වේ.
• Backward අනුකූලතාව
  • ඔබ සංවර්ධිත ස්ථරයන් සමඟ නිර්මාණය කර ඇති වෙබ් අඩවියක් ඇති විට, ඇතැම් CSS මෝස්තර භාවිතා නොකරන බ්රවුසර හෝ උපකරණයක් හෝ අක්රිය කර ඇති හෝ අක්රීය කර ඇති වෙබ් බ්රව්සර හෝ උපාංගය තවමත් එය HTML දකිනු ඇත. ඔබේ වෙබ් අඩවියට පසුව ඒවාට සහාය වන බ්රවුසර සඳහා විශේෂාංග සමඟ ප්රගතිශීලීව වැඩි දියුණු කළ හැකිය.

HTML - ව්යුහමය ස්ථරය

ඔබේ ව්යුහය කියවීම හෝ බැලීම සඳහා ඔබේ අන්තර්ගතයන් ගබඩා කරන ස්ථානයේ ආකෘතිය ස්ථරය වේ. මෙය HTML5 ප්රමිති අනුකූල වන අතර එය පෙළ සහ රූප මෙන්ම බහුමාධ්ය (වීඩියෝ, ශ්රව්ය, ආදිය) ඇතුළත් කළ හැකිය. ඔබේ වෙබ් අඩවියේ අන්තර්ගතයේ සෑම අංගයක්ම ව්යුහය ස්ථරය තුළ නිරූපනය කිරීම වැදගත් වේ. මෙම වෙබ් අඩවියේ සියලුම ක්රියාකාරිත්වය නොලැබුවහොත් JavaScript අක්රිය කළ හෝ CSS නැරඹීමට නොහැකිය, සම්පූර්ණ වෙබ් අඩවියට පිවිසීමට තිබේ නම් එය මෙමඟින් ලබා දෙයි.

CSS - ස්ලයිව් ස්තරය

බාහිර ශිලා පත්රයක ඔබේ වෙබ් අඩවියේ ඔබේ සියලු දෘශ්ය විලාසයන් නිර්මාණය කරනු ඇත. ඔබට විවිධ වර්ණ මුද්රණ භාවිතා කළ හැකිය, නමුත් සෑම වෙන වෙනම CSS ගොනුවක් වෙබ් අඩවි ක්රියාකාරිත්වයට බලපාන්නාට ලබා ගත හැකි HTTP ආයාචනයක් අවශ්ය බව මතක තබා ගන්න.

JavaScript - චර්යාව ස්ථරය

JavaScript ක්රමවේදය හැසිරවීමේ ස්තරය සඳහා බහුලවම භාවිතා වන භාෂාව, නමුත් පෙර සඳහන් කළ පරිදි, CGI සහ PHP ද වෙබ් පිටු හැසිරීම් නිර්මාණය කළ හැකිය. බොහෝමයක් සංවර්ධකයන් චර්යාත්මක ස්ථරය වෙත යොමු කරන විට ඔවුන් අදහස් කරන්නේ වෙබ් බ්රවුසරයේ සෘජුවම සක්රියව ඇති ස්තරයයි. එබැවින් JavaScript සෑම විටම පාහේ තේරීමේ භාෂාව වේ. DOM හෝ ලේඛන විෂය මොඩියුලය සමග ඍජුව සම්බන්ධ වීමට මෙම ස්තරය ඔබ භාවිතා කරයි. අන්තර්ගත ස්ථරයේ වලංගු HTML ලිවීම , හැසිරීමේ ස්තරයේ DOM අන්තර්ක්රියා සඳහා වැදගත් වේ.

ඔබ හැසිරීමේ ස්තරය ගොඩනඟන විට, ඔබ බාහිර විධානාවලි ගොනු CSS සමඟ සමාන කළ යුතුය. බාහිර ශිලා පත්රය භාවිතා කිරීම සඳහා ඔබට සමාන වාසි ලබා ගන්න.