สามเลเยอร์ของการออกแบบเว็บ

ทำไมเว็บไซต์ทั้งหมดจึงถูกสร้างขึ้นด้วยโครงสร้างรูปแบบและพฤติกรรม

ความคล้ายคลึงกันที่ใช้เพื่ออธิบายถึงการพัฒนาเว็บไซต์ส่วนหน้าคือมันเหมือนขา 3 ขา 3 ขาซึ่งเป็นที่รู้จักกันว่าการพัฒนาเว็บ 3 ชั้น ได้แก่ โครงสร้างลักษณะและพฤติกรรม

สามชั้นของการพัฒนาเว็บ

• โครงสร้างหรือเลเยอร์เนื้อหา
  • โครงสร้างหรือเลเยอร์เนื้อหาของหน้าเว็บเป็นโค้ด HTML พื้นฐานของหน้านั้น เช่นเดียวกับกรอบของบ้านสร้างรากฐานที่แข็งแกร่งซึ่งทำให้ส่วนที่เหลือของบ้านสร้างขึ้นดังนั้นรากฐานที่มั่นคงของ HTML จึงสร้างแพลตฟอร์มที่สามารถสร้างเว็บไซต์ได้ โครงสร้าง HTML สามารถประกอบด้วยข้อความหรือรูปภาพและมีลิงก์เชื่อมโยงหลายมิติที่ผู้เข้าชมจะใช้เพื่อนำทางไปยังเว็บไซต์นั้น
• สไตล์หรือเลเยอร์การนำเสนอ
  • เลย์เอาท์หรือเลเยอร์การนำเสนอจะอธิบายว่าเอกสาร HTML ที่มีโครงสร้างจะมีลักษณะอย่างไรต่อผู้เข้าชมไซต์ เลเยอร์นี้กำหนดโดย CSS (Cascading Style Sheets) ไฟล์เหล่านี้มีสไตล์ที่ระบุว่าควรแสดงเอกสารในเว็บเบราเซอร์อย่างไร ในเว็บปัจจุบันเลเยอร์สไตล์ยังสามารถรวม Media Queries ที่สามารถเปลี่ยนการแสดงผลของเว็บไซต์โดยใช้ ขนาดหน้าจอและอุปกรณ์ที่ แตกต่างกัน
• พฤติกรรม
  • เลเยอร์พฤติกรรมคือเลเยอร์ของเว็บเพจที่สามารถตอบสนองต่อการดำเนินการของผู้ใช้รายอื่นหรือทำการเปลี่ยนแปลงหน้าเว็บตามชุดของเงื่อนไข สำหรับเว็บเพจส่วนใหญ่ระดับพฤติกรรมจะเป็นการโต้ตอบ JavaScript บนหน้าเว็บ

ทำไมคุณควรแยกเลเยอร์?

เมื่อคุณสร้างหน้าเว็บเป็นที่พึงปรารถนาเพื่อให้เลเยอร์แยกออกจากกันมากที่สุด โครงสร้างควรได้รับการกล่าวถึง HTML รูปแบบภาพของคุณไปยัง CSS และพฤติกรรมของสคริปต์ใด ๆ ที่ไซต์ใช้

ประโยชน์บางประการของการแบ่งชั้นคือ:

• ทรัพยากรที่ใช้ร่วมกัน
  • เมื่อคุณเขียนไฟล์ CSS หรือไฟล์ JavaScript ภายนอกคุณสามารถใช้ไฟล์นั้นโดยหน้าใดก็ได้ในเว็บไซต์ของคุณ หากต้องการเปลี่ยนแปลงไฟล์ดังกล่าวอาจมีการปรับปรุง รูปแบบการพิมพ์ บางอย่างบนเว็บไซต์ทุกๆหน้าที่ใช้สไตล์ชีตนั้นจะได้รับการเปลี่ยนแปลง ไม่จำเป็นต้องแก้ไขทุกๆหน้าของเว็บไซต์เป็นรายบุคคลซึ่งสำหรับไซต์ขนาดใหญ่อาจเป็นงานที่ยากลำบาก
• ดาวน์โหลดได้เร็วขึ้น
  • เมื่อสคริปต์หรือสเปรดชีตได้รับการดาวน์โหลดโดยลูกค้าของคุณในครั้งแรกแคชโดยเว็บเบราเซอร์ของตน เนื่องจากทรัพยากรที่แบ่งปันเหล่านี้มีอยู่ในแคชแล้วหน้าเว็บอื่น ๆ ที่ร้องขอในเบราว์เซอร์จะโหลดได้เร็วขึ้นซึ่งจะช่วยเพิ่มความเร็วและประสิทธิภาพของหน้าเว็บโดยรวม
• ทีมหลายคน
  • ถ้าคุณมีคนมากกว่าหนึ่งคนที่ทำงานในเว็บไซต์พร้อมกันคุณสามารถใช้ระบบที่ "เช็คอิน" และ "เช็คเอาท์" ของไฟล์เพื่อให้มั่นใจว่าทุกคนในทีมสามารถทำงานกับไฟล์เหล่านี้ได้รุ่นล่าสุด นี่เป็นเรื่องยากที่จะทำถ้ารูปแบบและพฤติกรรมมีการพันด้วยเอกสารโครงสร้าง

• SEO
  • เว็บไซต์ที่มีรูปแบบและโครงสร้างที่ชัดเจนมีแนวโน้มที่จะทำงานได้ ดีกว่าสำหรับเครื่องมือค้นหา เนื่องจากเว็บไซต์เหล่านั้นสามารถรวบรวมข้อมูลเนื้อหานั้นได้อย่างมีประสิทธิภาพและเข้าใจหน้าเว็บโดยไม่ได้รับความสนใจจากรูปลักษณ์หรือข้อมูลพฤติกรรม
• การเข้าถึง
  • สไตล์ชีตภายนอกและไฟล์สคริปต์สามารถเข้าถึงบุคคลและเบราว์เซอร์ได้มากขึ้น เนื่องจากมีการแบ่งแยกสไตล์และโครงสร้างซอฟต์แวร์เช่นโปรแกรมอ่านหน้าจอจึงสามารถประมวลผลเนื้อหาจากเลเยอร์โครงสร้างได้ง่ายขึ้นโดยไม่ได้รับผลกระทบจากลักษณะที่ไม่สามารถใช้งานได้
• ความเข้ากันได้ย้อนกลับ
  • เมื่อคุณมีไซต์ที่ออกแบบมาพร้อมกับเลเยอร์การพัฒนาระบบจะทำงานร่วมกันได้มากขึ้นเนื่องจากเบราว์เซอร์หรืออุปกรณ์ที่ไม่สามารถใช้สไตล์ CSS บางรูปแบบหรืออาจปิดใช้งาน JavaScript ได้จะสามารถดู HTML ได้ จากนั้นเว็บไซต์ของคุณจะได้รับการปรับปรุงอย่างต่อเนื่องโดยมีคุณลักษณะสำหรับเบราว์เซอร์ที่สนับสนุน

HTML - โครงสร้างเลเยอร์

เลเยอร์โครงสร้างคือที่ที่คุณเก็บเนื้อหาทั้งหมดที่ลูกค้าของคุณต้องการอ่านหรือดู ซึ่งจะได้รับการเขียนโค้ดตามมาตรฐาน HTML5 และสามารถรวมข้อความและภาพรวมทั้งมัลติมีเดีย (วิดีโอเสียง ฯลฯ ) สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าทุกๆเนื้อหาในไซต์ของคุณแสดงในเลเยอร์โครงสร้าง ซึ่งจะช่วยให้ลูกค้าที่ปิดใช้งาน JavaScript หรือไม่สามารถดู CSS ที่ยังสามารถเข้าถึงเว็บไซต์ทั้งหมดได้หากไม่สามารถใช้งานได้ทั้งหมดของไซต์นั้น

CSS - Styles Layer

คุณจะสร้างรูปแบบภาพทั้งหมดของคุณสำหรับเว็บไซต์ของคุณในสไตล์ชีตภายนอก คุณสามารถใช้สไตล์ชีทได้หลายแบบ แต่โปรดทราบว่าทุกไฟล์ CSS แยกต่างหากต้องใช้คำขอ HTTP เพื่อดึงข้อมูลซึ่งจะส่งผลต่อประสิทธิภาพของไซต์

JavaScript - เลเยอร์พฤติกรรม

JavaScript เป็นภาษาที่ใช้บ่อยที่สุดสำหรับเลเยอร์พฤติกรรม แต่อย่างที่กล่าวมาก่อน CGI และ PHP ยังสามารถสร้างพฤติกรรมเว็บเพจได้ ที่กล่าวว่าเมื่อนักพัฒนาส่วนใหญ่อ้างถึงเลเยอร์พฤติกรรมจะหมายถึงเลเยอร์ที่เปิดใช้งานโดยตรงในเว็บเบราเซอร์ดังนั้น JavaScript จึงเกือบจะเป็นภาษาที่คุณเลือก คุณใช้เลเยอร์นี้เพื่อโต้ตอบโดยตรงกับ DOM หรือ Document Object Model การเขียน HTML ที่ถูกต้อง ในเลเยอร์เนื้อหาเป็นสิ่งสำคัญสำหรับการโต้ตอบ DOM ในเลเยอร์พฤติกรรม

เมื่อคุณสร้างเลเยอร์พฤติกรรมคุณควรใช้ไฟล์สคริปต์ภายนอกเช่นเดียวกับ CSS คุณได้รับประโยชน์ทั้งหมดเช่นเดียวกับการใช้สไตล์ชีทภายนอก