วิธีทำให้เว็บไซต์ของคุณ "ไดนามิก"

วิธีทำให้เว็บไซต์ของคุณไดนามิก

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

ความอ่อนแอที่ร้ายแรงของเว็บไซต์คงที่คือพวกเขาไม่ง่ายต่อการบำรุงรักษา จินตนาการ.

คุณไม่สามารถช่วยได้ แต่ถาม: เว็บไซต์ไดนามิกคืออะไร? นี่คือแกนกลางของบทความ

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

2. การอัปเดตอัตโนมัติหมายความว่าคุณไม่จำเป็นต้องอัปเดตเอกสาร HTML ด้วยตนเองและหน้าใหม่จะถูกสร้างขึ้นโดยอัตโนมัติซึ่งสามารถบันทึกปริมาณงานได้อย่างมาก

3. มันเปลี่ยนไปจากเวลาหนึ่งไปอีกครั้งนั่นคือเมื่อผู้คนต่างเยี่ยมชมเว็บไซต์เดียวกันในเวลาที่ต่างกันและผู้คนที่แตกต่างกันจะผลิตหน้าเว็บที่แตกต่างกัน

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

DHTML คืออะไร? แตกต่างจาก HTML แบบดั้งเดิมอย่างไร? DHTML คือเมื่อดาวน์โหลดเว็บเพจจากเว็บเซิร์ฟเวอร์และไม่จำเป็นต้องประมวลผลโดยเซิร์ฟเวอร์อีกต่อไป แต่จะอัปเดตเนื้อหาสไตล์เค้าโครงและภาพเคลื่อนไหวโดยตรงและแบบไดนามิกของเว็บเพจในเบราว์เซอร์ ตัวอย่างเช่นเมื่อเมาส์เคลื่อนไปยังย่อหน้าบทความย่อหน้าสามารถเปลี่ยนเป็นสีน้ำเงินหรือเมื่อคุณคลิกที่ไฮเปอร์ลิงก์ไดเรกทอรีย่อยแบบดรอปดาวน์ไฮเปอร์ลิงก์จะถูกสร้างขึ้นโดยอัตโนมัติ นี่คือ HTML แบบไดนามิก (Dynamic HTML) ซึ่งเป็นหนึ่งในนวัตกรรมที่น่าตื่นเต้นและเป็นประโยชน์ที่สุดในการพัฒนาอินเทอร์เน็ตอย่างรวดเร็วในช่วงไม่กี่ปีที่ผ่านมา มันเป็นแนวคิดที่ประสบความสำเร็จผ่านการพัฒนาที่ครอบคลุมของเทคโนโลยีต่าง ๆ รวมถึงสคริปต์ Java, VB0Script, โมเดลวัตถุเอกสาร, เลเยอร์และแผ่นสไตล์เรียงซ้อน (CSS Stylesheets) ฯลฯ เป็นเรื่องที่โชคร้ายมากที่หลังจากการต่อสู้หลายครั้งระหว่างเบราว์เซอร์ Netscape และ Microsoft IE เรายังไม่ได้รับมาตรฐานแบบครบวงจรสำหรับการสนับสนุน DHTML ดังนั้นบทความนี้จะต้องอธิบายแยกต่างหากเมื่อแนะนำ DHTML ก่อนอื่นมาดูการสนับสนุนของ Microsoft IE 4 สำหรับ DHTML:

1. เนื้อหาแบบไดนามิก: อัปเดตเนื้อหาของหน้าเว็บแบบไดนามิกและแทรกแก้ไขหรือลบส่วนประกอบของหน้าเว็บได้ตลอดเวลาเช่นข้อความแท็ก ฯลฯ

2. แผ่นสไตล์แบบไดนามิก: ผ่านแผ่นสไตล์การเรียงซ้อนของ W3C (แบบอักษรที่เชื่อมต่อเรียกว่า CSS1 หรือ CSS) มันให้ขนาดตัวอักษรขนาดตัวอักษรความหนาสไตล์ตัวอักษรและความสูงของบรรทัด HTML เส้นแนวนอนหรือเส้นตรงกลางระยะทางจากขอบศูนย์กลางหรือศูนย์กลางการเยื้องรูปภาพพื้นหลังหรือสีและฟังก์ชั่นการเรียงพิมพ์อื่น ๆ รูปแบบเค้าโครงแบบไดนามิกสามารถเปลี่ยนสไตล์เค้าโครงแบบไดนามิกได้ตลอดเวลา

3. การวางตำแหน่งแบบไดนามิก: ผ่านร่างการทำงานของ W 3 C ในการวางตำแหน่ง HTML ด้วยแผ่นสไตล์ cascading มันให้ฟังก์ชั่นการวางตำแหน่งของส่วนประกอบ HTML ในแกน X, Y และ Z ช่วยให้นักออกแบบสามารถวางภาพการควบคุมข้อความ ฯลฯ ใน ทุกที่บนหน้า ด้วยการวางไว้บนแกน z ที่แตกต่างกันนักออกแบบสามารถสร้างเอฟเฟกต์ที่ทับซ้อนกัน

4. การรับรู้ข้อมูลในตัว: ไม่จำเป็นต้องใช้โปรแกรมที่ซับซ้อนหรือใช้ทรัพยากรมากเกินไปบนเซิร์ฟเวอร์ทำให้นักออกแบบเว็บไซต์ประมวลผลเอกสารแบบเรียลไทม์

5. การสนับสนุนมัลติมีเดียในตัว: IE 4.0 รวม CSS และการควบคุม ActiveX ในตัวเพื่อให้ฟังก์ชั่นการสนับสนุนมัลติมีเดียรวมถึงฟังก์ชั่นมัลติมีเดียเช่นเอฟเฟกต์การแปลงเอฟเฟกต์ตัวกรองการควบคุมเส้นทางการควบคุมลำดับภาพเคลื่อนไหว .

มาดูการสนับสนุนที่จัดทำโดย NetScape Communicator 4.0 สำหรับ DHTML:

1. แผ่นสไตล์แบบไดนามิก: รองรับ W 3 C Cascading Style Sheets (สไตล์ประเภทที่เชื่อมต่อเรียกว่า CSS1 หรือ CSS) และแผ่นสไตล์สคริปต์ Java แบบโฮมเมด

2.Dynamic Layers: ให้ฟังก์ชั่นของการวางตำแหน่งรูปภาพและข้อความการเปลี่ยนลำดับที่ทับซ้อนกันของรูปภาพและข้อความการควบคุมการซ่อนหรือแสดงรูปภาพและข้อความและช่วยให้คุณออกแบบเอฟเฟกต์ภาพเคลื่อนไหว!

3. แบบอักษร Dynamic: ให้ฟังก์ชั่นการดาวน์โหลดแบบอักษรจากเซิร์ฟเวอร์ จะเห็นได้ว่าถึงแม้ว่า IE 4.0 และ NetScape Communicator 4.0 ทั้งคู่ให้การสนับสนุน HTML แบบไดนามิกในความเป็นจริงยกเว้นข้อมูลจำเพาะที่คล้ายกันของแผ่นสไตล์ cascading ส่วนที่เหลือแตกต่างกันมาก ดังนั้นเมื่อคุณออกแบบหน้า DHTML ปัญหาความเข้ากันได้จะต้องได้รับการพิจารณาอย่างเต็มที่ ผู้เขียนจะอธิบายวิธีการใช้และเทคนิคการออกแบบของ DHTML อย่างระมัดระวังในบทที่ 2 "สิบแปดศิลปะการต่อสู้ของการออกแบบเว็บแบบไดนามิก" โปรดให้ความสนใจอย่างใกล้ชิด

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

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

2. IDC (ตัวเชื่อมต่อฐานข้อมูลอินเทอร์เน็ต) ตัวเชื่อมต่อฐานข้อมูลอินเทอร์เน็ตเป็นหนึ่งในคุณสมบัติของเซิร์ฟเวอร์ Windows NT ที่มี Internet Information Server (IIS) 2.0 iis. คุณจะต้องควบคุมความรู้พื้นฐานของ HTML และ SQL และเขียนโค้ดสองสามตัวเพื่อรวบรวมแอปพลิเคชันฐานข้อมูลแบบโต้ตอบช่วยให้ผู้ใช้สามารถสืบค้นอินพุตอัปเดตและลบบนเว็บเซิร์ฟเวอร์ในข้อมูลข้อมูลส่วนต่อประสานเบราว์เซอร์ ในฐานะที่เป็นโปรแกรมเมอร์ VB เช่นไฟล์ที่ทำขึ้นแอปพลิเคชัน IDC นั้นเป็นคำอธิบาย วงจรการพัฒนาที่รวดเร็วและข้อเสนอแนะ แต่ราคาของความเรียบง่ายนี้คือการเสียสละความยืดหยุ่นอย่างมากซึ่งบังคับให้คุณให้การควบคุมส่วนต่อประสานผู้ใช้จำนวนมากและความสามารถในการตรวจสอบข้อมูลเกือบทั้งหมด ดังนั้น IDC จึงเหมาะสำหรับแอปพลิเคชันเว็บอย่างง่ายเท่านั้น

3. ActiveX Data Object (ADO) เป็นตัวเลือกที่ดีที่สุดสำหรับแอปพลิเคชันฐานข้อมูลเว็บ

ActiveX Data Object (ADO สั้น ๆ ) คืออะไร? เทคโนโลยีวัตถุ ActiveX ช่วยให้คุณรวมเข้ากับหน้าเซิร์ฟเวอร์ที่ใช้งานอยู่ (ASP สั้น ๆ ) เพื่อสร้างเนื้อหาเว็บเพจที่ให้ข้อมูลข้อมูล ป้อนอัปเดตและลบข้อมูลบนเว็บเซิร์ฟเวอร์ในส่วนต่อประสานเบราว์เซอร์ เมื่อเบราว์เซอร์ในด้านผู้ใช้กรอกข้อมูลที่จำเป็นในการป้อนในแบบฟอร์มและกดปุ่มส่งคำขอ HTTP จะถูกส่งไปยังเว็บเซิร์ฟเวอร์ผ่านทางอินเทอร์เน็ตและอินทราเน็ต บนเว็บเซิร์ฟเวอร์ (ชื่อต่อท้าย) สำหรับ เอกสาร ASP เป็นเอกสารข้อความธรรมดาที่มี: แท็ก HTML, รหัสโปรแกรมภาษา VBScript หรือ JScript, ไวยากรณ์ ASP และคำสั่ง SQL แบบสอบถามที่มีโครงสร้าง การดำเนินการของเว็บเซิร์ฟเวอร์ IIS3.0/4.0 ADO มีข้อดีของการใช้งานง่ายการพัฒนาอย่างรวดเร็วและการดำเนินการทรัพยากรระบบน้อยลงและพื้นที่ดิสก์ขนาดเล็ก

ด้านบนเป็นเทคโนโลยีที่ใช้งานได้ทั่วไปในการออกแบบเว็บไซต์เชิงพาณิชย์ อนาคต. ดังนั้นในบทที่สองของบทความนี้ "สิบแปดศิลปะการต่อสู้ของการออกแบบเว็บแบบไดนามิก" ผู้เขียนจะอธิบายการใช้ ADO และ ASP ดังนั้นคอยติดตาม