โครงสร้างเลเยอร์ลักษณะและพฤติกรรมของเว็บดีไซน์

บรรดาผู้ที่ทำงานในอุตสาหกรรมการออกแบบเว็บเปรียบเสมือนการพัฒนาเว็บไซต์แบบ front-end ให้เป็นอุจจาระสามขา สามขาของการพัฒนาเว็บประกอบด้วยโครงสร้างสไตล์และพฤติกรรม

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

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

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

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

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

โครงสร้างหรือเลเยอร์เนื้อหาของหน้าเว็บเป็นโค้ด HTML พื้นฐานของหน้านั้น เช่นเดียวกับกรอบของบ้านสร้างรากฐานที่แข็งแกร่งตามที่ส่วนที่เหลือของบ้านสร้างขึ้นรากฐานที่มั่นคงของ HTML สร้างแพลตฟอร์มที่สามารถสร้างเว็บไซต์ได้

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

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

CSS: เลเยอร์สไตล์

เลเยอร์นี้จะบอกว่าเอกสาร HTML ที่มีโครงสร้างจะมีลักษณะอย่างไรต่อผู้เข้าชมไซต์และกำหนดโดย CSS (Cascading Style Sheets) ไฟล์เหล่านี้มีคำแนะนำเกี่ยวกับรูปแบบสำหรับการแสดงเอกสารในเว็บเบราเซอร์ เลเยอร์สไตล์มักจะมีข้อความค้นหาสื่อที่เปลี่ยนการแสดงผลของไซต์ตามขนาดและอุปกรณ์ของหน้าจอ

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

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

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

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