വെബ് ഡിസൈൻ മൂന്ന് പാളികൾ

എല്ലാ വെബ്സൈറ്റുകളും ഘടന, ശൈലി, പെരുമാറ്റച്ചട്ടങ്ങൾ എന്നിവയുടെ സംയോജനം കൊണ്ട് എന്തുകൊണ്ടാണ്

ഫ്രണ്ട് എൻഡ് വെബ്സൈറ്റ് ഡവലപ്മെന്റിനെ വിവരിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു സാമാന്യ സാമ്യമുണ്ട്, ഇത് 3-കാലിഡ് സ്റ്റൂലാണ്. വെബ് ഡെവലപ്മെന്റ് 3 പാളികൾ എന്നും അറിയപ്പെടുന്ന ഈ 3 കാലുകൾ ഘടന, ശൈലി, ബിഹേവിയർ എന്നിവയാണ്.

വെബ് ഡെവലപ്പേഴ്സിന്റെ മൂന്ന് പാളികൾ

• ഘടന അല്ലെങ്കിൽ ഉള്ളടക്ക പാളി
  • വെബ് പേജിന്റെ ഘടന അല്ലെങ്കിൽ ഉള്ളടക്ക പാളി ആ പേജിന്റെ അടിസ്ഥാന HTML കോഡാണ്. ഒരു വീടിന്റെ ഫ്രെയിം വീടിന്റെ വീതി പണിതിരിക്കുന്നതിന് ശക്തമായ ഒരു അടിത്തറ സൃഷ്ടിക്കുന്നു, അതിനാൽ ഒരു വെബ് സൈറ്റ് നിർമ്മിക്കാൻ കഴിയുന്ന ഒരു പ്ലാറ്റ്ഫോം സൃഷ്ടിക്കുന്നു. HTML ഘടനയിൽ വാചകം അല്ലെങ്കിൽ ഇമേജുകൾ ഉണ്ടാകും, അതിൽ സന്ദർശകർ ആ വെബ് സൈറ്റിനെ ചുറ്റാൻ ഉപയോഗിക്കുന്ന ഹൈപ്പർലിങ്കുകൾ ഉൾപ്പെടുന്നു.
• സ്റ്റൈൽ അല്ലെങ്കിൽ അവതരണ ലേയർ
  • ഒരു സ്ട്രക്ച്ചർ HTML പ്രമാണം സൈറ്റിലെ സന്ദർശകരെ എങ്ങനെ കാണും എന്ന് ശൈലി അല്ലെങ്കിൽ അവതരണ ലേയർ വ്യക്തമാക്കുന്നു. ഈ ലേയർ എന്നത് CSS (നിർഝരിത സ്റ്റൈൽ ഷീറ്റുകൾ) ആണ് നിർവചിക്കുന്നത്. വെബ് ബ്രൗസറിൽ പ്രമാണം എങ്ങനെ പ്രദർശിപ്പിക്കണം എന്ന് സൂചിപ്പിക്കുന്ന ശൈലികൾ ഈ ഫയലുകളിൽ അടങ്ങിയിരിക്കുന്നു. ഇന്നത്തെ വെബിൽ, വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പത്തിലും ഉപകരണങ്ങളിലും അധിഷ്ഠിതമായി സൈറ്റുകളുടെ പ്രദർശനം മാറ്റുന്ന മീഡിയാ ചോദ്യങ്ങളും സ്റ്റൈൽ ലേയറിൽ ഉൾപ്പെടാം.
• പെരുമാറ്റം
  • വ്യത്യസ്ത ഉപയോക്തൃ പ്രവർത്തനങ്ങളോട് പ്രതികരിക്കാനോ അല്ലെങ്കിൽ ഒരു കൂട്ടം വ്യവസ്ഥകൾ അടിസ്ഥാനമാക്കി മാറ്റങ്ങൾ വരുത്താനോ കഴിയുന്ന ഒരു വെബ് പേജിന്റെ ലേയർ ആണ് സ്വഭാവം ലേയർ. മിക്ക വെബ് പേജുകൾക്കും, പെരുമാറ്റ നിലവാരം പേജ് ജാവാസ്ക്രിപ്റ്റ് ഇടപെടലായിരിക്കും.

നിങ്ങൾ ലെയറുകളെ വേർതിരിക്കേണ്ടത് എന്തുകൊണ്ടാണ്?

നിങ്ങൾ ഒരു വെബ് പേജ് സൃഷ്ടിക്കുമ്പോൾ, ലെയറുകൾ കഴിയുന്നത്ര വേറിട്ട് നിലനിർത്തുന്നത് അഭിലഷണീയമാണ്. ഘടന നിങ്ങളുടെ HTML, CSS- ൽ ദൃശ്യവൽക്കരണ ശൈലികൾ, സൈറ്റ് ഉപയോഗിക്കുന്ന ഏത് സ്ക്രിപ്റ്റുകളിലും പെരുമാറണം.

പാളികളെ വേർതിരിക്കുന്നതിന്റെ ചില നേട്ടങ്ങൾ ഇവയാണ്:

• പങ്കിട്ട ഉറവിടങ്ങൾ
  • നിങ്ങൾ ഒരു ബാഹ്യ CSS ഫയൽ അല്ലെങ്കിൽ ജാവാസ്ക്രിപ്റ്റ് ഫയൽ എഴുതുമ്പോൾ, നിങ്ങളുടെ വെബ് സൈറ്റിലെ ഏത് പേജും ആ ഫയൽ ഉപയോഗിക്കാം. ആ ഫയലിൽ മാറ്റം വരുത്തണമെങ്കിൽ, വെബ്സൈറ്റിൽ ചില ടൈപ്പീരിയൽ ശൈലികൾ അപ്ഡേറ്റ് ചെയ്യണമെങ്കിൽ ആ സ്റ്റൈൽഷീറ്റ് ഉപയോഗിക്കുന്ന ഓരോ പേജും മാറ്റം ലഭിക്കും. ഓരോ വെബ്സൈറ്റിന്റെയും വ്യക്തിപരമായി എഡിറ്റു ചെയ്യേണ്ട ആവശ്യമില്ല. വലിയ സൈറ്റിന് ഇത് ഒരു ദുരന്തനിവാരണമായിരിക്കും.
• വേഗതയാർന്ന ഡൌൺലോഡുകൾ
  • സ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ സ്റ്റൈൽ ആദ്യമായി നിങ്ങളുടെ ഉപഭോക്താവ് ഡൌൺലോഡ് ചെയ്തുകഴിഞ്ഞാൽ, അത് അവരുടെ വെബ് ബ്രൗസറാണ് കാഷെ ചെയ്തത്. ഈ പങ്കിട്ട വിഭവങ്ങൾ കാഷിൽ അടങ്ങിയിരിക്കുന്നതിനാൽ, ബ്രൌസർ ലോഡുചെയ്യുന്ന മറ്റു പേജുകൾ വേഗത്തിൽ ചെയ്യപ്പെടുന്ന മറ്റ് പേജുകൾ, അത് മൊത്തം പേജ് വേഗതയും പ്രകടനവും മെച്ചപ്പെടുത്തുന്നു.
• മൾട്ടി വ്യക്തിത്വ ടീമുകൾ
  • ഒരു വെബ് സൈറ്റിൽ ഒരേ സമയത്തു പ്രവർത്തിക്കുന്ന ഒന്നിലധികം വ്യക്തികളെ നിങ്ങൾക്ക് ഉണ്ടെങ്കിൽ, ടീമിലെ എല്ലാവരേയും ഈ ഫയലുകളുടെ ഏറ്റവും പുതിയ പതിപ്പുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്താൻ "ചെക്ക് ഇൻ", "ചെക്ക് ഔട്ട്" എന്നീ സംവിധാനങ്ങൾ ഉപയോഗിക്കാനാകും. ശൈലികളും പെരുമാറ്റങ്ങളും ഘടന രേഖകളുമായി ബന്ധിപ്പിച്ചിട്ടുണ്ടെങ്കിൽ ഇത് ചെയ്യാൻ വളരെ ബുദ്ധിമുട്ടാണ്.

• SEO
  • ആ സൈറ്റുകൾ കൂടുതൽ ഫലപ്രദമായി ക്രോൾ ചെയ്യാനും വിഷ്വൽ സ്റ്റൈൽ അല്ലെങ്കിൽ സ്വഭാവ വിവരം ഉപയോഗിച്ച് പുറകോട്ട് പോകാതെ പേജ് മനസിലാക്കാനും കഴിയുമെന്നതിനാൽ , തിരയൽ എഞ്ചിനുകൾക്ക് വ്യക്തമായ വേർതിരിച്ചെടുക്കാവുന്ന ഒരു സൈറ്റ് തിരയൽ എഞ്ചിനുകൾക്ക് മികച്ച പ്രകടനം നടത്താൻ സാധ്യതയുണ്ട്.
• പ്രവേശനക്ഷമത
  • ബാഹ്യ ശൈലി ഷീറ്റുകളും സ്ക്രിപ്റ്റ് ഫയലുകളും ആളുകൾക്കും ബ്രൌസറുകൾക്കും കൂടുതൽ ആക്സസ് ചെയ്യാവുന്നതുമാണ്. കാരണം ആ ശൈലിയും ഘടനയും വേർതിരിച്ചെടുത്താൽ, സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സോഫ്റ്റ്വെയർ, ഏതു രീതിയിലെയും ഉപയോഗിക്കാനാകാത്ത ശൈലികളാൽ തകരാറിലാക്കാതെ, structural layer ൽ നിന്ന് ഉള്ളടക്കം എളുപ്പത്തിൽ പ്രോസസ് ചെയ്യാനാകും.
• ബാക്ക്വേർഡ് കോംപാറ്റിബിളിറ്റി
  • വികസന ലെയറുകളുമായി രൂപകൽപ്പന ചെയ്ത ഒരു സൈറ്റ് ഉണ്ടെങ്കിൽ, ചില CSS ശൈലികൾ ഉപയോഗിക്കാനോ അല്ലെങ്കിൽ JavaScript അപ്രാപ്തമായേക്കാവാം, തുടർന്നും HTML കാണാൻ കഴിയുമെന്നതിനാൽ ബ്രൌസറുകളോ ഉപകരണങ്ങളോ ആകാം. നിങ്ങളുടെ വെബ് സൈറ്റിനെ പിന്നീട് പിന്തുണയ്ക്കുന്ന ബ്രൗസറിനായുള്ള ഫീച്ചറുകളുമായി പടിപടിയായി വർദ്ധിപ്പിക്കാൻ കഴിയും.

HTML - സ്ട്രക്ചർ ലേയർ

നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് വായിക്കാനോ നോക്കാനോ കഴിയുന്ന എല്ലാ ഉള്ളടക്കവും നിങ്ങൾ സംഭരിക്കുന്നയിടമാണ് സ്ട്രക്ചർ ലേയർ. ഇത് സ്റ്റാൻഡേർഡ് കംപ്ലൈന്റ് ചെയ്ത HTML5 ൽ കോഡ് ചെയ്തിരിക്കുന്നതിനാൽ വാചകവും ഇമേജുകളും മൾട്ടിമീഡിയയും (വീഡിയോ, ഓഡിയോ, മുതലായവ) ഉൾപ്പെടുത്താവുന്നതാണ്. നിങ്ങളുടെ സൈറ്റിലെ ഉള്ളടക്കത്തിന്റെ എല്ലാ തലങ്ങളും ഘടന ലെയറിലാണെന്ന് ഉറപ്പാക്കേണ്ടത് പ്രധാനമാണ്. ഈ സൈറ്റിന്റെ എല്ലാ പ്രവർത്തനവും കൂടാതെ, വെബ് സൈറ്റ് പൂർണ്ണമായി ആക്സസ്സുചെയ്യാൻ JavaScript ഇല്ലാതാക്കിയിട്ടുള്ള ഉപയോക്താക്കൾക്ക് അല്ലെങ്കിൽ CSS കാണാനാകില്ല.

CSS - Styles Layer

ബാഹ്യ ശൈലി ഷീറ്റിൽ നിങ്ങളുടെ വെബ് സൈറ്റിനായി നിങ്ങളുടെ എല്ലാ ദൃശ്യ ശൈലികളും സൃഷ്ടിക്കും. നിങ്ങൾക്ക് ഒന്നിലധികം സ്റ്റൈൽഷീറ്റുകൾ ഉപയോഗിക്കാൻ കഴിയും, എന്നാൽ ഓരോ പ്രത്യേക CSS ഫയലും സൈറ്റ് പ്രോത്സാഹിപ്പിക്കുന്നതിന് ഒരു HTTP അഭ്യർത്ഥന ആവശ്യമാണെന്ന് ഓർക്കുക.

ജാവാസ്ക്രിപ്റ്റ് - പെരുമാറ്റ ലേയർ

പെരുമാറ്റ പാളിക്ക് ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കപ്പെടുന്ന ഭാഷയാണ് ജാവാസ്ക്രിപ്റ്റ്, പക്ഷെ ഞാൻ മുമ്പ് സൂചിപ്പിച്ചതുപോലെ CGI ഉം PHP ഉം വെബ് പേജ് സ്വഭാവരീതി സൃഷ്ടിക്കും. ഭൂരിഭാഗം ഡെവലപ്പർമാർ പെരുമാറ്റച്ചട്ടത്തെ പരാമർശിക്കുമ്പോൾ, അതായത് വെബ് ബ്രൗസറിൽ നേരിട്ട് ആക്റ്റിവേറ്റ് ചെയ്യപ്പെട്ട പാളി എന്ന് അർത്ഥമാക്കുന്നു, അതിനാൽ ജാവാസ്ക്രിപ്റ്റ് ഏതാണ്ട് എപ്പോഴും തിരഞ്ഞെടുക്കാനുള്ള ഭാഷയാണ്. DOM അല്ലെങ്കിൽ Document Object Model ഉപയോഗിച്ച് നേരിട്ട് ഇടപെടുത്തുന്നതിന് ഈ ലെയർ ഉപയോഗിക്കും. പെരുമാറ്റ പാളിയിലെ DOM ഇടപെടലുകൾക്ക് ഉള്ളടക്ക ലെയറിൽ എച്ച്ടിഎംഎൽ എഴുതുന്നത് വളരെ പ്രധാനമാണ്.

നിങ്ങൾ പെരുമാറ്റ ലെയറിലുണ്ടെങ്കിൽ, നിങ്ങൾ CSS- നോടൊപ്പം ബാഹ്യ സ്ക്രിപ്റ്റ് ഫയലുകൾ ഉപയോഗിക്കണം. ബാഹ്യ സ്റ്റൈൽ ഷീറ്റിന്റെ എല്ലാ ഗുണങ്ങളും നിങ്ങൾക്ക് ലഭിക്കും.