มีสองวิธีในการพัฒนาเว็บ:วิธีแก้ไขข้อความและวิธีแก้ไข GUI วิธีแรกมีไว้สำหรับนักพัฒนาขั้นสูงที่เข้าใจโค้ด รู้ว่าพวกเขาต้องการอะไร และไม่ต้องการความช่วยเหลือด้านภาพในการสร้างหน้าเว็บของตน พวกเขาทำงานร่วมกับโปรแกรมต่างๆ เช่น vim, emacs, Notepad++, Kate หรือโปรแกรมแก้ไขข้อความอื่น ๆ และเพียงโหลดหน้าเว็บลงในเบราว์เซอร์เมื่อพวกเขารู้สึกว่าจำเป็นต้องดูผลลัพธ์สุดท้ายของการทำงาน วิธีการนี้เรียบง่าย มีประสิทธิภาพ และยากขึ้น
วิธีที่สองคือสิ่งที่คนส่วนใหญ่ทำ:ใช้โปรแกรมบางประเภทที่มักจะซ่อนโค้ดไม่ให้ผู้ใช้เห็นและให้พวกเขาโฟกัสไปที่เนื้อหา โปรแกรมที่ใช้เพื่อจุดประสงค์นี้เรียกว่าโปรแกรมแก้ไขเว็บ นอกจากนี้ยังจัดอยู่ในหมวดหมู่ของ What You See Is What You Get (WYSIWYG) ซึ่งหมายความว่าหน้าเว็บที่แสดงภายใน GUI ของโปรแกรมแก้ไขจะตรงกับผลลัพธ์สุดท้าย ชื่อที่ได้รับความนิยมมากขึ้น ได้แก่ KompoZer, Dreamweaver, Quanta, Bluefish และซอฟต์แวร์พัฒนาเว็บที่เป็นมิตรอื่น ๆ ที่ช่วยให้ผู้คนเข้าถึงเรื่องด้วยความคิดของการต่อเลโก้ โปรแกรมแก้ไขแบบ WYSIWYG ใช้งานได้ง่ายกว่าโปรแกรมแก้ไขข้อความมาก แต่มักจะมีประสิทธิภาพน้อยกว่า
และพวกเขาทิ้งความหยาบไว้มากมาย
เมื่อคุณทำงานกับโปรแกรมแก้ไขข้อความ รหัสทุกไบต์ในไฟล์เว็บจะถูกวางไว้ที่นั่นโดยคุณ ในทางกลับกัน บรรณาธิการเว็บมักจะใช้โค้ดกับเมตาฟิลด์ที่สร้างขึ้นโดยอัตโนมัติ ความคิดเห็นที่ส่งเสริมตนเอง และช่วงพักและช่องว่างที่ไม่จำเป็นจำนวนมาก แสดงผลโค้ดที่ใหญ่กว่าที่คุณตั้งใจไว้มาก
คนส่วนใหญ่จะไม่สังเกตเห็นหรือสนใจเกี่ยวกับส่วนที่เกินมา แต่ถ้าคุณต้องการพัฒนาเว็บของคุณด้วยวิธีที่สะอาด เป็นระเบียบเรียบร้อย แต่ยังต้องการใช้ตัวแก้ไข GUI มีเครื่องมือมากมายที่สามารถช่วยคุณรักษาประสิทธิภาพ และโค๊ดเรียบร้อย
เครื่องมือเหล่านี้เรียกว่าโปรแกรมอรรถประโยชน์ lint/tidy และใช้เพื่อแสดงผลเอาต์พุตของ HTML และไฟล์ที่มาพร้อมกันให้เล็กลง สะอาดขึ้น และจัดวางได้ดีขึ้น ในบทช่วยสอนนี้ ฉันจะนำเสนอคอลเลกชันของโปรแกรมอรรถประโยชน์เหล่านี้ ซึ่งส่วนใหญ่ฉันใช้เป็นการส่วนตัว เพื่อให้คุณสามารถเพลิดเพลินไปกับการพัฒนาเว็บที่สวยงามและปราศจากคอเลสเตอรอล เริ่มกันเลย.
HTML เรียบร้อย
HTML tidy เป็นยูทิลิตี้จัดระเบียบ HTML ที่ได้รับความนิยมมากที่สุด โปรแกรมเล็กๆ นี้สามารถทำสิ่งมหัศจรรย์กับโค้ดของคุณ ช่วยแก้ไข HTML ที่ไม่ถูกต้อง ลบอักขระช่องว่างพิเศษ ปรับปรุงเลย์เอาต์และการเยื้องของมาร์กอัปขั้นสุดท้าย
ใช้ได้กับทุกระบบปฏิบัติการหลัก นอกจากนี้ โปรแกรมแก้ไขเว็บส่วนใหญ่สามารถเรียกใช้ได้อย่างเป็นระเบียบเรียบร้อยจากภายใน GUI ของตนเอง ทำให้ง่ายต่อการทำงานและบำรุงรักษาโค้ดทั้งหมด
นี่คือตัวอย่างใน Bluefish บน Linux Mint 6 Felicia:
นี่คือตัวอย่างการกำหนดค่า Tidy ใน KompoZer บน Windows XP:
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโปรแกรมแก้ไขเว็บที่ยอดเยี่ยมทั้งสองนี้ โปรดอ่านบทความนี้ โปรแกรมแก้ไขข้อความ Notepad++ ยอดนิยมของ Windows มาพร้อมกับปลั๊กอิน Tidy ที่ติดตั้งไว้แล้ว คุณจึงสามารถแก้ไขโค้ดได้โดยไม่ต้องออกจากโปรแกรมแก้ไข
นี่คือตัวอย่างวิธีการทำงานของ Tidy ฉันจะเขียนสองสามคำในเอกสารข้อความเปล่า แล้วเรียกใช้ Tidy กับมัน Tidy ไม่เพียงแต่ทำให้เอาต์พุตสวยงาม แต่ยังเพิ่มแท็ก HTML (XHTML) ที่ขาดหายไปและจำเป็น และสร้างการเยื้องที่เหมาะสม:
ก่อน:
หลัง:
หรือสิ่งนี้:
คุณยังสามารถแปลง HTML เป็น XHTML, แปลงหรือฝัง XML ใหม่, ใช้ wrap และแม้แต่ล้างเอกสาร Microsoft Word!
โดยทั่วไป Tidy เป็นยูทิลิตี้บรรทัดคำสั่ง สิ่งที่ต้องทำคือเรียกมันขึ้นมาเทียบกับไฟล์ HTML ที่ต้องการโดยเรียกใช้ filename.html ที่เรียบร้อย ไฟล์ HTML ไม่ควรมีจุดใดๆ ยกเว้นส่วนขยายที่คาดไว้ หรือช่องว่างในชื่อ เนื่องจากสิ่งเหล่านี้อาจทำให้ฟังก์ชันการทำงานของยูทิลิตี้เสียหายได้ ซึ่งสอดคล้องกับเหตุผลและแนวทางการเขียนโค้ดทั่วไปที่ "ดี"
ในทำนองเดียวกัน หากคุณเรียกใช้ Tidy ภายในโปรแกรมแก้ไขเว็บตัวใดตัวหนึ่ง ขึ้นอยู่กับว่ากำหนดค่าอย่างไร คุณอาจได้รับรายงานขนาดยาวเกี่ยวกับความคลาดเคลื่อน ข้อผิดพลาด และคำเตือนทั้งหมดที่พบ Bluefish จะทำสิ่งนี้ให้คุณ:
จัดให้เรียบร้อย
Tidy มีรูปร่างและรูปแบบมากมาย แหล่งข้อมูลที่ดีที่สุดคือหน้าอย่างเป็นทางการ นอกจากนี้ คุณยังสามารถดูที่หน้าของ Dave Raggett ซึ่งเป็นผู้พัฒนาดั้งเดิมได้ แม้ว่าตอนนี้การพัฒนา การแก้ไข และการปรับปรุงในโครงการจะถูกรวมไว้ที่ไซต์ SourceForge แล้ว
ลินุกซ์
Tidy รวมอยู่ในที่เก็บข้อมูลของ distros ยอดนิยมส่วนใหญ่ ดังนั้นการได้มาจึงไม่น่ามีปัญหา
วินโดวส์
ผู้ใช้ Windows มีตัวเลือกมากมาย:พวกเขาสามารถใช้ Notepad++ เป็นต้น หรือเลือกใช้โปรแกรมปฏิบัติการ Windows ซึ่งสามารถเรียกใช้จากบรรทัดคำสั่งกับไฟล์ HTML หรือใช้โปรแกรมแก้ไขเว็บ เช่น KompoZer และเรียกใช้ผ่านปลั๊กอินตัวใดตัวหนึ่ง
หากคุณไม่ชอบบรรทัดคำสั่ง เดิร์ก แพห์ลยังได้พัฒนาเวอร์ชัน GUI ซึ่งมีอยู่ในระบบปฏิบัติการอื่นด้วย
บริการออนไลน์
Tidy ยังสามารถใช้งานออนไลน์ได้โดยตรง ไม่จำเป็นต้องติดตั้ง เว็บไซต์หลายแห่งเสนอบริการนี้ รวมถึงองค์กรมาตรฐาน WWW สากล W3C เอง คุณเพียงแค่ต้องเชื่อมโยงไปยัง URL ของไฟล์ HTML ของคุณและเรียกใช้งานผ่าน Tidy
ส่วนขยายของไฟร์ฟอกซ์
นอกจากนี้ยังมีส่วนขยาย Firefox สำหรับ Windows เท่านั้น ส่วนขยายค่อนข้างหนัก ดาวน์โหลด 2.6MB แต่ให้ความสามารถในการตรวจสอบเพิ่มเติมภายในเบราว์เซอร์ของคุณ คุณควรเยี่ยมชมเว็บไซต์อย่างเป็นทางการเพื่อดูรายละเอียดเพิ่มเติม
จากนั้นยังมี Tidy เวอร์ชัน Java, Python, PHP และ Ruby รายการเกือบจะไม่มีที่สิ้นสุด
CSSTidy
CSSTidy เป็นตัวแยกวิเคราะห์และเพิ่มประสิทธิภาพ CSS แบบโอเพ่นซอร์ส เช่นเดียวกับ HTML Tidy มันถูกใช้เพื่อล้างโค้ดของไฟล์ CSS แปลงสตริงคุณสมบัติเป็นโค้ดฐานสิบหก (หากมี) ลบอักขระที่เว้นวรรค ลบและผสานคุณสมบัติที่ซ้ำกัน และอื่นๆ ด้วยวิธีนี้ CSSTidy สามารถลดขนาดรวมของไฟล์ CSS ลงได้หลายสิบเปอร์เซ็นต์
CSSTidy เป็นโซลูชันข้ามแพลตฟอร์ม พร้อมใช้งานบน Linux, Windows และ Mac นอกจากนี้ยังมีเวอร์ชัน C ++ และ PHP นอกจากนี้ยังมีตัวจัดรูปแบบออนไลน์และเครื่องมือเพิ่มประสิทธิภาพซึ่งมีให้บริการในห้าภาษา ซึ่งคล้ายกับที่เราเคยเห็นใน HTML Tidy
เช่นเดียวกับ HTML Tidy CSSTidy เป็นยูทิลิตี้บรรทัดคำสั่งและใช้งานง่ายมาก
ต่อไปนี้เป็นตัวอย่างของ CSSTidy ที่เพิ่มประสิทธิภาพไฟล์ CSS:
เว็บลินท์
นี่เป็นยูทิลิตีการปรับแต่ง HTML อีกอันหนึ่งที่คุณอาจต้องการพิจารณา แม้ว่ามันจะมีประสิทธิภาพน้อยกว่าและพกพาได้น้อยกว่า HTML Tidy เนื่องจากใช้งานได้กับเอกสาร HTML 4.0 เท่านั้น มันมาพร้อมกับ Bluefish โดยทั่วไป Weblint ใช้ได้เฉพาะกับ Linux (ใน repos)
สรุป
ยูทิลิตีการจัดระเบียบ HTML และ CSS มีประโยชน์มาก ไม่ว่าคุณจะเป็นนักพัฒนามือสมัครเล่นหรือมืออาชีพ หากคุณมุ่งมั่นที่จะสร้างเนื้อหาคุณภาพสูงที่เป็นไปตามมาตรฐานสากลที่เข้มงวด คุณควรพิจารณาใช้เนื้อหาเหล่านั้น
ไม่เพียงแต่จะช่วยสร้างเลย์เอาต์ที่ดีขึ้นและทำให้ไฟล์มีขนาดเล็กลงเท่านั้น แต่ยังบังคับให้คุณเปลี่ยนวิธีคิดและการทำงานโดยยึดตามมาตรฐานเว็บ คุณจะปรับปรุงคุณภาพโดยรวมและความสอดคล้องของเอกสารบนเว็บของคุณ และผู้อ่านของคุณจะสามารถเพลิดเพลินกับเนื้อหาระดับเฟิร์สคลาสโดยไม่ต้องกังวลว่าผลลัพธ์จะออกมาเป็นอย่างไรในเบราว์เซอร์นี้หรือเบราว์เซอร์นั้น ในความละเอียดนี้หรือแบบนั้น
หากคุณต้องการเข้าสู่โลกแห่งการพัฒนาเว็บหรือกำลังทำขั้นตอนแรกของคุณ นี่คือเวลาที่ดีที่สุดที่จะพิจารณาใช้ HTML Tidy และ CSSTidy ไม่เพียงแต่คุณจะทำให้งานของคุณน่าพึงพอใจมากขึ้นเท่านั้น คุณยังช่วยให้โลกใบใหญ่ของโค้ดดีขึ้นเล็กน้อยอีกด้วย เฮ้ ทุกๆ การบริจาคที่ต่ำต้อยมีความสำคัญ
ไชโย
