ສາມຊັ້ນຂອງການອອກແບບເວັບໄຊຕ໌

ເປັນຫຍັງເວັບໄຊທ໌ທັງຫມົດຖືກສ້າງຂຶ້ນດ້ວຍການປະສົມປະສານຂອງໂຄງສ້າງ, ແບບແລະພຶດຕິກໍາຕ່າງໆ

ການປຽບທຽບທົ່ວໄປທີ່ຖືກນໍາໃຊ້ເພື່ອອະທິບາຍການພັດທະນາເວັບໄຊທ໌ທໍາອິດແມ່ນວ່າມັນຄ້າຍຄືອາຈົມ 3 ຂາ. ເຫຼົ່ານີ້ 3 ຂາ, ເຊິ່ງເອີ້ນວ່າ 3 ຂັ້ນຕອນຂອງການພັດທະນາເວັບ, ແມ່ນໂຄງສ້າງ, ແບບ, ແລະພຶດຕິກໍາ.

ສາມຊັ້ນຂອງການພັດທະນາເວັບ

• ຊັ້ນໂຄງສ້າງຫຼືເນື້ອຫາ
  • ຊັ້ນຂອງໂຄງສ້າງຫຼືເນື້ອຫາຂອງຫນ້າເວັບແມ່ນລະຫັດ HTML ທີ່ຢູ່ເບື້ອງຕົ້ນຂອງຫນ້ານັ້ນ. ເຊັ່ນດຽວກັນກັບເຮືອນຂອງສ້າງພື້ນຖານທີ່ເຂັ້ມແຂງທີ່ເຮືອນສ່ວນທີ່ເຫຼືອແມ່ນການກໍ່ສ້າງ, ດັ່ງນັ້ນພື້ນຖານແຂງຂອງ HTML ສ້າງເວທີທີ່ເວັບໄຊທ໌ໃດຫນຶ່ງສາມາດສ້າງໄດ້. ໂຄງສ້າງ HTML ສາມາດປະກອບດ້ວຍຂໍ້ຄວາມຫຼືຮູບພາບແລະມັນລວມມີ hyperlinks ທີ່ນັກທ່ອງທ່ຽວຈະນໍາໃຊ້ເພື່ອນໍາໃຊ້ເຂົ້າໃນເວັບໄຊທ໌ນັ້ນ.
• ຊັ້ນແບບຫຼືການນໍາສະເຫນີ
  • ຊັ້ນການສະແດງຫຼືການນໍາສະເຫນີການກໍານົດວິທີການເອກະສານ HTML ທີ່ມີໂຄງສ້າງຈະເບິ່ງຜູ້ເຂົ້າຊົມເວັບໄຊທ໌. ຊັ້ນນີ້ຖືກກໍານົດໂດຍ CSS (Cascading Style Sheets). ໄຟລ໌ເຫຼົ່ານີ້ມີຄໍເຕົ້າໄຂ່ທີ່ຊີ້ບອກວ່າເອກະສານຄວນສະແດງຢູ່ໃນຕົວທ່ອງເວັບຂອງເວັບໄຊຕ໌. ໃນເວັບໄຊທ໌ຂອງມື້ນີ້, ຊັ້ນແບບກໍ່ສາມາດປະກອບມີການ ສອບຖາມສື່ ທີ່ສາມາດປ່ຽນການສະແດງຂອງເວັບໄຊທ໌ໂດຍອີງໃສ່ ຂະຫນາດຫນ້າຈໍຕ່າງໆແລະອຸປະກອນຕ່າງໆ .
• ພຶດຕິກໍາ
  • ຊັ້ນການກະທໍາຜິດແມ່ນຊັ້ນຂອງຫນ້າເວັບທີ່ສາມາດຕອບສະຫນອງຕໍ່ການປະຕິບັດຂອງຜູ້ໃຊ້ທີ່ແຕກຕ່າງກັນຫຼືປ່ຽນແປງຫນ້າທີ່ອີງຕາມເງື່ອນໄຂທີ່ກໍານົດໄວ້. ສໍາລັບຫນ້າເວັບສ່ວນໃຫຍ່, ລະດັບພຶດຕິກໍາຈະເປັນການໂຕ້ຕອບ JavaScript ໃນຫນ້າ.

ເປັນຫຍັງທ່ານຄວນແຍກແຍກຊັ້ນ?

ໃນເວລາທີ່ທ່ານກໍາລັງສ້າງຫນ້າເວັບ, ມັນແມ່ນຄວາມປາຖະຫນາທີ່ຈະຮັກສາຂັ້ນຕອນທີ່ແຍກເປັນໄປໄດ້. ໂຄງສ້າງຄວນຈະຖືກມອບໃຫ້ HTML ຂອງທ່ານ, ຮູບລັກສະນະທີ່ມີຮູບພາບກັບ CSS, ແລະພຶດຕິກໍາຂອງ scripts ທີ່ເວັບໄຊທ໌ໃຊ້.

ບາງປະໂຍດຈາກການແຍກຊັ້ນແມ່ນ:

• ຊັບພະຍາກອນຮ່ວມກັນ
  • ເມື່ອທ່ານຂຽນໄຟລ໌ພາຍນອກ CSS ຫຼືໄຟລ໌ JavaScript, ທ່ານສາມາດນໍາໃຊ້ໄຟລ໌ທີ່ມີຢູ່ໃນຫນ້າເວັບຂອງທ່ານ. ຖ້າທ່ານຕ້ອງການປ່ຽນແປງໄຟລ໌ນັ້ນ, ບາງເທື່ອອາດຈະປັບປຸງ ຮູບແບບປະເພດ ໃດຫນຶ່ງໃສ່ເວັບໄຊທ໌, ທຸກໆຫນ້າທີ່ໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ວ່າຈະປ່ຽນແປງ. ບໍ່ຈໍາເປັນຕ້ອງແກ້ໄຂທຸກໆຫນ້າຂອງເວັບໄຊທ໌ແຕ່ລະຄົນ, ເຊິ່ງສໍາລັບເວັບໄຊທ໌ຂະຫນາດໃຫຍ່ອາດຈະເປັນການປະຕິບັດທີ່ມີຄວາມຫຍຸ້ງຍາກ.
• ການດາວໂຫຼດໄວກວ່າ
  • ເມື່ອ script ຫຼື stylesheet ໄດ້ຖືກດາວໂຫຼດໂດຍລູກຄ້າຂອງທ່ານຄັ້ງທໍາອິດ, ມັນຖືກເກັບໄວ້ໂດຍຕົວທ່ອງເວັບຂອງພວກເຂົາ. ເນື່ອງຈາກຊັບພະຍາກອນທີ່ແບ່ງປັນເຫຼົ່ານີ້ມີຢູ່ໃນ cache, ຫນ້າອື່ນໆທີ່ຖືກຮຽກຮ້ອງໃນຕົວທ່ອງເວັບໂຫຼດໄວຂຶ້ນ, ເຊິ່ງຊ່ວຍປັບປຸງຄວາມໄວຂອງຫນ້າແລະການປະຕິບັດໂດຍລວມ.
• ທີມງານຫຼາຍໆຄົນ
  • ຖ້າທ່ານມີຫຼາຍກວ່າຫນຶ່ງຄົນທີ່ເຮັດວຽກຢູ່ໃນເວັບໄຊທ໌ຫນຶ່ງ, ທ່ານສາມາດນໍາໃຊ້ລະບົບທີ່ມີ "check in" ແລະ "check out" ຂອງໄຟລ໌ເພື່ອໃຫ້ແນ່ໃຈວ່າທຸກຄົນໃນທີມກໍາລັງເຮັດວຽກກັບຮຸ່ນຫຼ້າສຸດຂອງໄຟລ໌ເຫຼົ່ານີ້. ນີ້ແມ່ນມີຄວາມຫຍຸ້ງຍາກຫຼາຍທີ່ຈະເຮັດແນວໃດຖ້າຮູບແບບແລະພຶດຕິກໍາທີ່ກ່ຽວຂ້ອງກັບເອກະສານໂຄງສ້າງ.

• SEO
  • ເວັບໄຊທ໌ທີ່ມີການແບ່ງແຍກຢ່າງຈະແຈ້ງຂອງແບບແລະໂຄງສ້າງອາດຈະເຮັດ ໃຫ້ດີກວ່າເກົ່າສໍາລັບເຄື່ອງຈັກຊອກຫາ ເນື່ອງຈາກເວັບໄຊທ໌ເຫຼົ່ານີ້ສາມາດກວາດລ້າໄດ້ເນື້ອຫາທີ່ມີປະສິດທິພາບແລະເຂົ້າໃຈເຖິງຫນ້າເວັບໂດຍບໍ່ໄດ້ຮັບການຕິດຂັດກັບຮູບແບບການເບິ່ງຮູບພາບຫຼືຂໍ້ມູນກ່ຽວກັບພຶດຕິກໍາ.
• Accessibility
  • ແຜ່ນແບບເອກະສານພາຍນອກແລະໄຟລ໌ script ແມ່ນສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍຂຶ້ນກັບປະຊາຊົນແລະກັບຕົວທ່ອງເວັບ. ເນື່ອງຈາກວ່າມີການແຍກລັກສະນະແລະໂຄງສ້າງ, ຊອບແວທີ່ຄ້າຍຄືຜູ້ອ່ານຫນ້າຈໍສາມາດເຮັດໄດ້ງ່າຍຂຶ້ນໃນການປຸງແຕ່ງເນື້ອຫາຈາກຊັ້ນໂຄງປະກອບໂດຍບໍ່ໄດ້ຮັບການກັງວົນລົງໂດຍຮູບແບບທີ່ພວກເຂົາບໍ່ສາມາດໃຊ້ໄດ້.
• ຄວາມເຂົ້າກັນໄດ້ກັບຄືນ
  • ເມື່ອທ່ານມີເວັບໄຊທ໌ທີ່ຖືກອອກແບບມາດ້ວຍຂັ້ນຕອນການພັດທະນາ, ມັນຈະມີຫຼາຍຂຶ້ນຍ້ອນກັບຍ້ອນວ່າຕົວທ່ອງເວັບຫຼືອຸປະກອນທີ່ບໍ່ສາມາດໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ແນ່ນອນຂອງ CSS ຫຼືວ່າອາດຈະປິດການໃຊ້ງານ JavaScript ຍັງສາມາດເບິ່ງ HTML ໄດ້. ຫຼັງຈາກນັ້ນ, ເວັບໄຊທ໌ຂອງທ່ານສາມາດປັບປຸງຢ່າງຕໍ່ເນື່ອງໂດຍມີລັກສະນະຕ່າງໆສໍາລັບຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນພວກເຂົາ.

HTML - ຊັ້ນໂຄງສ້າງ

ຊັ້ນໂຄງປະກອບການແມ່ນບ່ອນທີ່ທ່ານເກັບເນື້ອຫາທັງຫມົດທີ່ລູກຄ້າຕ້ອງການອ່ານຫຼືເບິ່ງ. ນີ້ຈະຖືກກໍານົດໃນມາດຕະຖານທີ່ສອດຄ່ອງກັບ HTML5 ແລະມັນສາມາດປະກອບມີຂໍ້ຄວາມແລະຮູບພາບຕ່າງໆເຊັ່ນດຽວກັນກັບມັນຕິມີເດຍ (ວີດີໂອ, ສຽງ, ແລະອື່ນໆ). ມັນສໍາຄັນທີ່ສຸດເພື່ອໃຫ້ແນ່ໃຈວ່າທຸກໆດ້ານຂອງເນື້ອຫາຂອງເວັບໄຊທ໌ຂອງທ່ານແມ່ນຢູ່ໃນຊັ້ນໂຄງສ້າງ. ນີ້ອະນຸຍາດໃຫ້ລູກຄ້າທີ່ມີ JavaScript ປິດຫຼືຜູ້ທີ່ບໍ່ສາມາດເບິ່ງ CSS ໄດ້ຍັງສາມາດເຂົ້າເຖິງເວັບໄຊທ໌ທັງຫມົດ, ຖ້າບໍ່ແມ່ນການເຮັດວຽກທັງຫມົດຂອງເວັບໄຊທ໌ນັ້ນ.

CSS - Styles Layer

ທ່ານຈະສ້າງຄໍເຕົ້າໄຂ່ທີ່ເບິ່ງເຫັນທັງຫມົດຂອງທ່ານສໍາລັບເວັບໄຊທ໌ຂອງທ່ານໃນເອກະສານສະໄຕພາຍນອກ. ທ່ານສາມາດໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ຫຼາຍ, ແຕ່ຈື່ວ່າທຸກໄຟລ໌ CSS ທີ່ແຍກຕ່າງຫາກຮຽກຮ້ອງໃຫ້ມີການຮ້ອງຂໍ HTTP ເພື່ອຄົ້ນຫາ, ຜົນກະທົບຕໍ່ການເຮັດວຽກຂອງເວັບໄຊທ໌.

JavaScript - ການ Behavior Layer

JavaScript ແມ່ນພາສາທີ່ໃຊ້ກັນຫຼາຍທີ່ສຸດສໍາລັບຊັ້ນການກະທໍາ, ແຕ່ຕາມທີ່ຂ້າພະເຈົ້າໄດ້ກ່າວມາກ່ອນ, CGI ແລະ PHP ກໍ່ສາມາດສ້າງບັນຫາກ່ຽວກັບເວັບເພດ. ທີ່ຖືກກ່າວເຖິງ, ເມື່ອນັກພັດທະນາສ່ວນໃຫຍ່ອ້າງເຖິງຊັ້ນການກະທໍາ, ພວກເຂົາຫມາຍເຖິງຊັ້ນທີ່ຖືກເປີດໃຊ້ໂດຍກົງໃນເບົາເຊີເວັບ - ດັ່ງນັ້ນ JavaScript ແມ່ນເກືອບວ່າພາສາທີ່ເລືອກ. ທ່ານໃຊ້ layer ນີ້ເພື່ອໂຕ້ຕອບໂດຍກົງກັບ DOM ຫຼື Document Object Model. ຂຽນ HTML ທີ່ຖືກຕ້ອງ ໃນຊັ້ນເນື້ອຫາແມ່ນສໍາຄັນສໍາລັບການພົວພັນ DOM ໃນຊັ້ນການປະພຶດ.

ເມື່ອທ່ານສ້າງໃນຊັ້ນພຶດຕິກໍາ, ທ່ານຄວນໃຊ້ໄຟລ໌ script ພາຍນອກຄືກັນກັບ CSS. ທ່ານໄດ້ຮັບຜົນປະໂຫຍດດຽວກັນຈາກການນໍາໃຊ້ເອກະສານສະໄຕພາຍນອກ.