વેબ ડીઝાઇનની ત્રણ સ્તરો

શા માટે તમામ વેબસાઇટ્સ માળખું, શૈલી, અને વર્તણૂકોના સંયોજન સાથે બનેલ છે

ફ્રન્ટ-એન્ડ વેબસાઇટ ડેવલોપમેન્ટનું વર્ણન કરવા માટે ઉપયોગમાં લેવાતા સામાન્ય સાદ્રશ્ય એ છે કે તે 3-પગવાળું સ્ટૂલ જેવું છે. આ 3 પગ, જે વેબ ડેવલપમેન્ટના 3 સ્તરો તરીકે પણ જાણીતા છે, તે માળખું, પ્રકાર અને વર્તન છે.

વેબ ડેવલપમેન્ટની ત્રણ સ્તરો

• માળખું અથવા સામગ્રી સ્તર
  • વેબ પૃષ્ઠનું માળખું અથવા સામગ્રી સ્તર એ તે પૃષ્ઠના અંતર્ગત HTML કોડ છે. ઘરના ફ્રેમની જેમ, મજબૂત પાયો બનાવે છે જેના પર બાકીનું ઘર બાંધવામાં આવે છે, તેથી HTML નું નક્કર પાયો એક પ્લેટફોર્મ બનાવે છે જેના પર વેબસાઇટ બનાવી શકાય છે. HTML માળખું ટેક્સ્ટ અથવા છબીઓ ધરાવે છે અને તે હાયપરલિંક્સનો સમાવેશ કરે છે કે જે મુલાકાતીઓ તે વેબ સાઇટની આસપાસ નેવિગેટ કરવા માટે ઉપયોગ કરશે.
• પ્રકાર અથવા પ્રેઝન્ટેશન સ્તર
  • સ્ટાઇલ અથવા પ્રસ્તુતિ સ્તર સૂચવે છે કે કેવી રીતે સ્ટ્રક્ચર્ડ HTML દસ્તાવેજ સાઇટના મુલાકાતીઓને દેખાશે. આ સ્તર CSS (કેસ્કેડીંગ સ્ટાઇલ શીટ્સ) દ્વારા વ્યાખ્યાયિત થયેલ છે. આ ફાઇલોમાં શૈલીઓ શામેલ છે જે સૂચવે છે કે વેબ બ્રાઉઝરમાં દસ્તાવેજ કેવી રીતે દર્શાવવામાં આવવો જોઈએ. આજે વેબ પર, સ્ટાઇલ લેયરમાં મીડિયા ક્વેરી શામેલ હોઈ શકે છે જે વિવિધ સ્ક્રીન માપો અને ઉપકરણો પર આધારિત સાઇટનું પ્રદર્શન બદલી શકે છે.
• વર્તન
  • વર્તણૂક સ્તર વેબ પૃષ્ઠનો સ્તર છે જે વિવિધ વપરાશકર્તા ક્રિયાઓને પ્રતિસાદ આપી શકે છે અથવા શરતોના સેટ પર આધારિત પૃષ્ઠમાં ફેરફાર કરી શકે છે. મોટા ભાગના વેબ પૃષ્ઠો માટે, વર્તન સ્તર પૃષ્ઠ પર JavaScript ક્રિયાપ્રતિક્રિયા હશે.

તમારે શા માટે સ્તરો અલગ રાખવી જોઈએ?

જ્યારે તમે વેબ પૃષ્ઠ બનાવી રહ્યાં હોવ, ત્યારે શક્ય એટલું અલગ પાડવું કે સ્તરોને રાખવું તે ઇચ્છનીય છે. માળખું તમારી એચટીએમએલ, વિઝ્યુઅલ સ્ટાઈલોને સી.એસ.એસ., અને વર્તણૂકોને કોઈ પણ સ્ક્રિપ્ટો કે જે સાઇટનો ઉપયોગ કરે છે તેના પર વિશ્વાસ કરે છે.

સ્તરોને અલગ કરવાના કેટલાક લાભો આ પ્રમાણે છે:

• વહેંચાયેલ સ્રોતો
  • જ્યારે તમે બાહ્ય સીએસએસ ફાઇલ અથવા જાવાસ્ક્રિપ્ટ ફાઇલ લખો છો, ત્યારે તમે તે ફાઇલનો ઉપયોગ તમારી વેબ સાઇટનાં કોઈપણ પૃષ્ઠ દ્વારા કરી શકો છો. જો તમને તે ફાઇલમાં ફેરફાર કરવાની જરૂર હોય, તો વેબસાઇટ પર કેટલીક ટાઇપોગ્રાફિક શૈલીઓ અપડેટ કરવા માટે, તે સ્ટાઇલશીટનો ઉપયોગ કરતા દરેક પૃષ્ઠને ફેરફાર થશે. વ્યક્તિગત રીતે વેબસાઇટના દરેક પૃષ્ઠને સંપાદિત કરવાની કોઈ જરુર નથી, જે મોટા સાઇટ માટે કઠોર ઉપક્રમ હોઈ શકે છે
• ઝડપી ડાઉનલોડ્સ
  • એકવાર સ્ક્રિપ્ટ અથવા સ્ટાઇલશીટ તમારા ગ્રાહક દ્વારા પ્રથમ વખત ડાઉનલોડ કરવામાં આવે, તે તેમના વેબ બ્રાઉઝર દ્વારા કેશ્ડ કરવામાં આવે છે. કારણ કે આ વહેંચાયેલ સંસાધનો હવે કેશમાં સમાયેલ છે, અન્ય પૃષ્ઠો કે જે બ્રાઉઝર લોડમાં વધુ ઝડપથી વિનંતી કરવામાં આવે છે, જે સમગ્ર પૃષ્ઠની ગતિ અને પ્રભાવ સુધારે છે.
• મલ્ટી-વ્યક્તિ ટીમ
  • જો તમારી પાસે એકથી વધુ વ્યક્તિ એક જ સમયે વેબ સાઇટ પર કામ કરી રહ્યા હોય, તો તમે સિસ્ટમ્સનો ઉપયોગ કરી શકો છો કે જે આ ફાઇલોની નવીનતમ સંસ્કરણ સાથે કાર્ય કરી રહ્યું છે તેની ખાતરી કરવા માટે ફાઇલોની "ચેક ઇન" અને "ચેક આઉટ" માટે. જો સ્ટાઇલ અને વર્તણૂકો માળખું દસ્તાવેજો સાથે જોડાયેલા હોય તો આ કરવું ખૂબ મુશ્કેલ છે.

• એસઇઓ
  • એક એવી સાઇટ કે જે શૈલી અને માળખાના સ્પષ્ટ વિભાજનને શોધ એન્જિનો માટે સારું પ્રદર્શન કરે છે કારણ કે તે સાઇટ્સ વધુ અસરકારક રીતે તે સામગ્રીને ક્રોલ કરી શકે છે અને વિઝ્યુઅલ શૈલી અથવા વર્તનની માહિતી સાથે ફોલ્લીઓ વગર પૃષ્ઠને સમજી શકે છે.
• ઉપલ્બધતા
  • બાહ્ય શૈલી શીટ્સ અને સ્ક્રિપ્ટ ફાઇલો લોકો અને બ્રાઉઝર્સ માટે વધુ સુલભ છે. કારણ કે શૈલી અને માળખું અલગ છે, સ્ક્રીન રીડર્સ જેવા સોફ્ટવેર વધુ સરળતાથી સ્ટાઇલ દ્વારા ભાંગી પડ્યા વિના માળખાના સ્તરમાંથી સામગ્રી પર પ્રક્રિયા કરી શકે છે જેથી તેઓ કોઈપણ રીતે ઉપયોગ કરી શકતા નથી.
• પાછળની સુસંગતતા
  • જ્યારે તમારી પાસે એક સાઇટ છે જે વિકાસ સ્તરો સાથે રચાયેલ છે, તે વધુ સુસંગત રહેશે કારણ કે બ્રાઉઝર્સ અથવા ડિવાઇસ જે ચોક્કસ CSS શૈલીઓનો ઉપયોગ કરી શકતા નથી અથવા જે જાવાસ્ક્રિપ્ટ અક્ષમ હોય તે હજુ પણ HTML જોઈ શકે છે. તમારી વેબ સાઇટને પછીથી તેમને બ્રાઉઝ કરવા માટેના બ્રાઉઝર્સ માટે સુવિધાઓ સાથે ઉન્નત કરી શકાય છે.

એચટીએમએલ - સ્ટ્રક્ચર લેયર

માળખું સ્તર એ છે કે જ્યાં તમે તમારા ગ્રાહકોને વાંચવા અથવા જોવાની બધી સામગ્રી સ્ટોર કરો છો. આ ધોરણો સુસંગત HTML5 માં કોડેડ કરવામાં આવશે અને તેમાં ટેક્સ્ટ અને છબીઓ તેમજ મલ્ટીમીડિયા (વિડિઓ, ઑડિઓ, વગેરે) શામેલ હોઈ શકે છે. તમારી સાઇટની સામગ્રીના દરેક પાસાને માળખું સ્તરમાં રજૂ કરવામાં આવ્યાં છે તે સુનિશ્ચિત કરવું અગત્યનું છે. આનાથી કોઈપણ ગ્રાહકો જે જાવાસ્ક્રિપ્ટ બંધ કરેલા છે અથવા જો તે સાઇટની બધી કાર્યક્ષમતા ન હોય, તો હજુ પણ સમગ્ર વેબ સાઇટની ઍક્સેસ ધરાવતા સીએસએસને જોઈ શકતા નથી.

સીએસએસ - સ્ટાઇલ લેયર

બાહ્ય શૈલી શીટમાં તમે તમારી વેબસાઇટ માટે તમારી બધી વિઝ્યુઅલ શૈલીઓ બનાવશો. તમે બહુવિધ સ્ટાઈલશીટોનો ઉપયોગ કરી શકો છો, પરંતુ યાદ રાખો કે દરેક અલગ સીએસએસ ફાઇલને સાઇટ પ્રભાવને પ્રભાવિત કરવા માટે એક HTTP વિનંતિની જરૂર છે.

જાવાસ્ક્રિપ્ટ - બિહેવિયર લેયર

જાવાસ્ક્રીપ્ટ વર્તન સ્તરે સૌથી વધુ ઉપયોગમાં લેવામાં આવતી ભાષા છે, પરંતુ જેમ મેં અગાઉ ઉલ્લેખ કર્યું છે, CGI અને PHP પણ વેબ પૃષ્ઠ વર્તણૂકો બનાવી શકે છે. એવું કહેવામાં આવે છે કે, જ્યારે મોટાભાગના વિકાસકર્તાઓ વર્તન સ્તરનો સંદર્ભ આપે છે, તેનો અર્થ તે સ્તર કે જે વેબ બ્રાઉઝરમાં સીધી જ સક્રિય થાય છે - જેથી જાવાસ્ક્રિપ્ટ હંમેશા પસંદગીની ભાષા હોય છે તમે DOM અથવા દસ્તાવેજ ઓબ્જેક્ટ મોડેલ સાથે સીધા જ ક્રિયાપ્રતિક્રિયા કરવા માટે આ સ્તરનો ઉપયોગ કરો છો. સામગ્રી સ્તરમાં માન્ય HTML લખવાથી વર્તન સ્તરમાં DOM ક્રિયાપ્રતિક્રિયા માટે પણ મહત્વપૂર્ણ છે.

જ્યારે તમે વર્તન સ્તરમાં બિલ્ડ કરો છો, ત્યારે તમારે બાહ્ય લિપિ ફાઇલોનો ઉપયોગ કરવો જોઈએ, જેમ કે CSS સાથે. બાહ્ય સ્ટાઇલ શીટની મદદથી તમે બધા જ લાભો મેળવો છો.