เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG
ประวัติโดยย่อของ WYSIWYG: จาก Bravo ของ Xerox PARC ไปจนถึงบรรณาธิการเบราว์เซอร์
· พื้นหลัง
html เป็นที่พอใจ นักพัฒนาเวิร์กโฟลว์
ติดตามพัฒนาการของการแก้ไขแบบ “เห็นอย่างไรได้อย่างนั้น” ตั้งแต่ระบบวิจัยในทศวรรษ 1970 ผ่านการจัดพิมพ์บนเดสก์ท็อปและเครื่องมือสร้างเว็บเพจ จนถึงโปรแกรมแก้ไข contenteditable ในเบราว์เซอร์ปัจจุบัน
ก่อนมี WYSIWYG ผู้เขียนต้องจัดรูปแบบโดยไม่เห็นผลลัพธ์ — เริ่มจากเวิร์กโฟลว์มาร์กอัปและการพิมพ์ พร้อมอธิบายว่าเหตุใดการแก้ไขแบบเห็นภาพจึงเปลี่ยนวิธีทำงาน
ก่อนที่จะแก้ไขภาพ ผู้เขียนมักจะเขียนโค้ดควบคุมหรือมาร์กอัปและดูผลลัพธ์ที่จัดรูปแบบในภายหลัง ความล่าช้าทำให้เกิดการวนซ้ำเลย์เอาต์: เปลี่ยนคำสั่ง เรนเดอร์อีกครั้ง เปรียบเทียบ และทำซ้ำ การแสดงการจัดรูปแบบระหว่างการจัดองค์ประกอบจะทำให้ลูปนั้นสั้นลง และเปลี่ยนแปลงสิ่งที่ผู้ที่ไม่ใช่ผู้เชี่ยวชาญคาดหวังจากซอฟต์แวร์เอกสาร
บทความนี้จงใจหลีกเลี่ยงข้อมูลแรกและวันที่ที่แน่นอนซึ่งแหล่งเก็บข้อมูลไม่ได้มาจากแหล่งที่มาโดยอิสระ จุดประสงค์คือเพื่ออธิบายสายเลือดการออกแบบเบื้องหลังพื้นผิวการแก้ไขเบราว์เซอร์ ไม่ใช่รับรองลำดับเหตุการณ์ในอดีตโดยสมบูรณ์ เหตุการณ์สำคัญที่มีชื่อต้องมีการอ้างอิงเอกสารสำคัญก่อนที่จะตีพิมพ์เป็นประวัติผลิตภัณฑ์ที่เป็นข้อเท็จจริง
ระบบเอกสารภาพในยุคเริ่มแรกได้กำหนดแนวคิดนี้ขึ้นมา พื้นที่เก็บข้อมูลนี้ไม่ได้มาจากลำดับเหตุการณ์ของ Bravo
ระบบการวิจัยที่เกี่ยวข้องกับ Xerox PARC มีการพูดคุยกันอย่างกว้างขวางในประวัติ WYSIWYG และสมุดงานชื่อ Bravo ไม่มีแหล่งที่มาของพื้นที่เก็บข้อมูลที่ให้ไว้ที่นี่เพื่อยืนยันวันที่ ชุดคุณลักษณะ หรือลำดับความสำคัญที่เหนือกว่ารุ่นเดียวกัน ดังนั้นรายละเอียดเหล่านั้นจึงถูกละเว้นแทนที่จะถอดความตามข้อเท็จจริง
หลักสำคัญทางแนวคิดที่สามารถป้องกันได้คือการแสดงผลแบบบิตแมปที่จับคู่กับการจัดการโดยตรงของเอกสารที่จัดรูปแบบ หน้าจอกลายเป็นการประมาณเอาท์พุตที่ใช้งานมากกว่าที่จะเป็นเพียงสถานที่สำหรับพิมพ์คำสั่ง ความสัมพันธ์ระหว่างการจัดรูปแบบที่มองเห็นได้และโครงสร้างพื้นฐานยังคงเป็นตัวกำหนดข้อดีข้อเสียของตัวแก้ไขสมัยใหม่
การแก้ไขภาพเข้าถึงเดสก์ท็อปของผู้บริโภค เหตุการณ์สำคัญของผลิตภัณฑ์ที่แน่นอนต้องใช้แหล่งเก็บถาวรภายนอก
เวิร์กบุคนี้มีชื่อว่า Xerox Star, MacWrite และ desktop Publishing การจัดลำดับและอิทธิพลที่แน่นอนจำเป็นต้องมีแหล่งที่มานอกเหนือจากโค้ดเบสนี้ สิ่งที่สามารถพูดได้โดยไม่ต้องประดิษฐ์ก็คือคอมพิวเตอร์ส่วนบุคคลแบบกราฟิกทำให้การจัดองค์ประกอบภาพที่คุ้นเคยสำหรับผู้ชมในวงกว้างมากขึ้น และเชื่อมโยงกับการแก้ไขด้วยแบบอักษร การเว้นวรรค และเค้าโครงหน้า
รุ่นเดสก์ท็อปนั้นสนับสนุนความคาดหวังของเพจที่เสถียรและอุปกรณ์เอาท์พุตที่ควบคุม เนื้อหาเว็บทำให้สัญญาซับซ้อนในภายหลัง เนื่องจากส่วนย่อย HTML หนึ่งส่วนสามารถตอบสนองสไตล์ชีต ความกว้าง และการตั้งค่าของผู้ใช้ได้มากมาย วลี “สิ่งที่คุณเห็น” มีความหมายน้อยลงเมื่อการเผยแพร่เปลี่ยนจากหน้ากระดาษไปเป็นเอกสารแบบโต้ตอบ
เครื่องมือสร้างเพจในปี 1990 เปิดเผยการสร้างเว็บแบบเห็นภาพและการแลกเปลี่ยนมาร์กอัป
เครื่องมือสร้างหน้าเว็บแบบเห็นภาพนำองค์ประกอบโดยตรงมาสู่ HTML และเชื่อมโยงกับ wrapper ที่สร้างขึ้นและมาร์กอัปการนำเสนอ ขอย้ำอีกครั้งว่าสมุดงานจะตั้งชื่อผลิตภัณฑ์เฉพาะโดยไม่มีหลักฐานในการจัดเก็บเพื่อระบุชื่อเสียงหรือไทม์ไลน์โดยละเอียด บทความนี้จำกัดประเด็นอยู่ที่การแลกเปลี่ยนทางวิศวกรรมที่ยั่งยืน
เครื่องมือภาพต้องแปลท่าทางเป็นแผนภูมิและสตริง หากปรับให้เหมาะสมเพื่อให้ปรากฏได้ในทันที ก็อาจปล่อยการนำเสนอในท้องถิ่นออกมาซึ่งขัดขวางการออกแบบใหม่ในภายหลัง หากจำกัดเอาต์พุต ความเที่ยงตรงของการมองเห็นต่อแหล่งที่มาจะลดลง ToolAcre เลือกชุดย่อยความหมายที่จำกัด และแสดงแหล่งที่มาที่กรอง
การแก้ไขย้ายไปยังเพจ — อธิบายว่า contenteditable นำ WYSIWYG มาสู่เบราว์เซอร์และ CMS แพลตฟอร์มได้อย่างไร
เบราว์เซอร์ contenteditable ย้ายโฮสต์การแก้ไขไปยังองค์ประกอบของหน้าธรรมดา เบราว์เซอร์สามารถจัดการคาเร็ต การเลือก การพิมพ์ และการลบ ในขณะที่โค้ดของแอปพลิเคชันให้การควบคุมและอ่าน innerHTML ToolAcre ติดตามโมเดลนั้นและขณะนี้ส่งการดำเนินการของแถบเครื่องมือผ่าน execCommand ที่เลิกใช้แล้ว
จากนั้นแอปพลิเคชันจะเพิ่มขอบเขตที่โฮสต์การแก้ไขดั้งเดิมไม่มีให้: การสกัดกั้นการวาง การฆ่าเชื้อแหล่งที่มา รายงานการลบ จำนวนอักขระและคำ การแยกข้อความธรรมดา การคัดลอก การดาวน์โหลด และการแสดงตัวอย่างเฉื่อย การแบ่งชั้นนี้อธิบายว่าทำไมการสร้างความพึงพอใจเพียงอย่างเดียวจึงไม่ใช่ผลิตภัณฑ์ที่สมบูรณ์
การเคลื่อนไหวตอบโต้สนับสนุนแหล่งที่มาที่มีข้อจำกัดและการแก้ไขแบบมีโครงสร้าง โดยไม่มีไทม์ไลน์ของผลิตภัณฑ์ที่มาจากแหล่งที่มา
มาร์กอัปแบบน้ำหนักเบาและตัวแก้ไขที่มีโครงสร้างจะตอบข้อกังวลด้านคุณภาพเอาต์พุตที่เหมือนกันแตกต่างกัน สิ่งเหล่านี้จำกัดสิ่งที่ผู้เขียนสามารถแสดงหรือจัดเก็บ จากนั้นจึงแสดงผลลัพธ์ที่ได้รับการควบคุม หนังสือคู่มือนี้ร้องขอการเคลื่อนไหวตอบโต้ในอดีต แต่ไม่มีแหล่งที่มาใดที่นี่สนับสนุนวันที่ คำกล่าวอ้างการรับเลี้ยงบุตรบุญธรรม หรือลำดับสาเหตุที่มีชื่อ
การเปรียบเทียบที่มีประโยชน์คือสถาปัตยกรรม แหล่งที่มาที่มีข้อจำกัดสามารถกระจายและแปลงได้ง่าย ในขณะที่พื้นผิวที่มองเห็นจะลดอุปสรรคในการจัดรูปแบบ ToolAcre รวมการร่างด้วยภาพเข้ากับ HTML ที่มองเห็นได้ แต่ไม่มีการทำงานร่วมกัน โมเดลเอกสาร หรือคำสั่งข้ามเบราว์เซอร์ที่กำหนด
สิ่งนี้ไม่ครอบคลุม — ไทม์ไลน์ของผลิตภัณฑ์ต่อผลิตภัณฑ์ หรือการเผยแพร่บนเดสก์ท็อปที่อยู่นอกเหนืออิทธิพลบนเว็บ
บทความนี้ไม่ได้ระบุลำดับเวลาของผลิตภัณฑ์โดยผลิตภัณฑ์ ให้เครดิตสิ่งประดิษฐ์ อ้างอิงคำพูดจากนักวิจัย หรือครอบคลุมการเผยแพร่บนเดสก์ท็อปนอกเหนือจากอิทธิพลในวงกว้าง การละเว้นเหล่านั้นเกิดขึ้นโดยเจตนาเนื่องจากไม่ได้จัดเตรียมแหล่งเอกสารสำคัญไว้ การใช้งานเอดิเตอร์สามารถตรวจสอบพฤติกรรมปัจจุบัน ไม่ใช่ลำดับความสำคัญในอดีต
นอกจากนี้ยังไม่ได้อ้างว่าโปรแกรมแก้ไขภาพจำเป็นต้องสร้างมาร์กอัปที่ไม่ดี คุณภาพผลงานขึ้นอยู่กับรูปแบบการแก้ไขและนโยบาย ในที่นี้ นามแฝงและรายการที่อนุญาตจะลดความผันแปรหลังจากการเปลี่ยนแปลงของเบราว์เซอร์ ในขณะที่โหมดแหล่งที่มาช่วยให้ผู้เขียนตรวจสอบสิ่งที่เหลืออยู่ได้ บรรณาธิการคนอื่นๆ อาจเลือกโครงสร้างที่แตกต่างกัน
ประเด็นสำคัญ: ความตึงเครียดแบบเก่ายังคงเป็นปัญหาการออกแบบ — สรุปความสะดวกด้านการมองเห็นเทียบกับเอาต์พุตที่สะอาดตา และวิธีที่ตัวแก้ไข HTML WYSIWYG ของ ToolAcre จัดการมันโดยให้คุณเห็นมาร์กอัปที่คุณแก้ไข
ความตึงเครียดแบบเก่ายังคงอยู่: การควบคุมด้วยภาพโดยตรงช่วยผู้เขียน ในขณะที่เอาต์พุตที่มีโครงสร้างทนทานช่วยระบบและผู้ดูแลในอนาคต โปรแกรมแก้ไขที่น่าเชื่อถือทำให้คำแปลนั้นมองเห็นได้ และยอมรับว่าการเรนเดอร์นั้นขึ้นอยู่กับบริบทของเบราว์เซอร์และปลายทาง
ToolAcre เป็นตัวอย่างเล็กๆ น้อยๆ ร่วมสมัยตัวอย่างหนึ่ง จัดรูปแบบบันทึกย่อแบบใช้แล้วทิ้ง ตรวจสอบ HTML ที่กรองแล้ว และเปรียบเทียบตัวอย่างกับแหล่งที่มา แบบฝึกหัดนี้แสดงให้เห็นถึงเชื้อสายโดยไม่ต้องเปลี่ยนโครงร่างทางประวัติศาสตร์ที่ไม่มีแหล่งที่มาให้เป็นความแม่นยำที่ผิดพลาด หรืออ้างว่าการใช้งานนี้แก้ไขทุกการประนีประนอม WYSIWYG