บทความพิเศษ

จะเกิดอะไรขึ้นเมื่อ วันหนึ่งข้างหน้า สื่อสิ่งพิมพ์ ทุกชนิดสามารถเปลี่ยนไปใช้วัสดุพิเศษ ที่สร้างสรรค์ออกมาใหม่ คล้ายกระดาษ สามารถพลิกหน้าอ่านได้เหมือนกันไม่ผิดเพี้ยน แต่ ใช้ไฟฟ้าในการให้พลังงานเพื่อขับเคลื่อนและใช้ อินเทอร์เน็ตเพื่อเชื่อมต่อฐานข้อมูล จากผู้ให้บริการมาแสดงผลในหน้าหนังสือแต่ละหน้า

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

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

HTML (Hyper Text Markup Language)

ภาษานี้คงคุ้นกันดีอยู่ในหมู่นักเขียนเว็บทั้งหลาย HTML ภาษานี้เป็นภาษาที่ Browser ส่วนใหญ่เข้าใจดีว่าคืออะไรและสามารถประมวลผลได้อย่างถูกต้อง Browser ส่วนมากนั้นจะรันบนคอมพิวเตอร์ที่มีหน่วยความจำมาก จึงไม่ค่อยเป็นปัญหามากนักในการประมวลผลแม้ว่าบางครั้งผู้เขียนโค้ดอาจเขียนโค้ดผิดพลาดก็ตาม แต่ Browser ก็สามารถเดาได้และแสดงผลได้อย่างถูกต้องเป็นส่วนมาก แต่ปัญหาก็คือ หากต้องการใส่แท็กใหม่ ๆ ลงไป เอกสาร HTML จะไม่สามารถประมวลผลได้ มันจะประมวลผลเฉพาะแท็กที่มันรู้จักเท่านั้น นั่นคือตัว HTML มีความจำกัด นอกจากนี้แล้วเอกสาร HTML ยังถูกเอาไปใช้อย่างผิดความหมายและผิดวัตถุประสงค์ ทำให้เอกสารมีความยุ่งยาก ทำความเข้าใจยาก ต้องใช้เวลามากในการเขียนหรือออกแบบเนื่องจากมีการปนกันของเนื้อหาและการตกแต่งเอกสาร เอกสาร HTML ส่วนมากจึงเกิดสภาพที่เรียกว่า malformed ซึ่งตรงข้ามกับคำว่า well-formed ซึ่งหมายถึง เอกสารมีความถูกต้อง ไม่มีข้อผิดพลาดและไม่ฝืนข้อกำหนดของตัว DTD

CSS ทำให้สิ่งที่ผมกล่าวมาในตอนที่ 1 นั้นเปลี่ยนไป และแน่ใจได้เลยว่า ถ้าได้ลองใช้ดูแล้วจะได้รู้ว่า ความฝันที่พวกเรานั้นเคยวาดไว้ มันจะเป็นจริงขึ้นมาเสียทีแล้ว เราจะต้องเริ่มทำความเข้าใจ มันจากอะไร Designer หลาย ๆ คนที่เริ่มทำงานกับ CSS นั้นจะรู้ได้เลยว่า ลักษณะโครงสร้างของ CSS นั้น แตกต่างไปจาก Table และก้าวข้ามขีดจำกัดของ Grid Design ได้สบาย ๆ เลย และมันสามารถลดสิ่งที่ไม่จำเป็นต้องใช้ออกไปจากงานของเราได้มากขึ้น และ ทำให้เราจัดการงานของเราได้ดีขึ้น ตอบสนองความต้องการจากไอเดียได้มากขึ้นกว่าเดิม (มองในแง่มุมของ Designer นะครับ)

CSS Visual Model เป็นได้ทั้ง lines และ boxes ซึ่งใช่มันเป็นส่วนหนึ่งของ Grid แต่เราสามารถทำอะไรกับ boxes ได้มากขึ้นไม่ว่าจะด้านในด้านนอกของ boxes หรือ เราอาจจะอยากให้มันไม่ทำหน้าที่เป็นเหมือน boxes ด้วยก็ได้ เราสามารถกำหนดคุณลักษณะให้กับมันได้อย่างอิสระตามที่เราอยากจะให้มันเป็น

ถ้าคุณยังไม่ทราบว่า Cascading Style Sheets (CSS) จะเอื้อประโยชน์อะไรต่อคุณ และ ลูกค้า หรือ กลุ่มเป้าหมายของคุณนั้น คุณสามารถศึกษา เกี่ยวกับตัวมันได้อย่างละเอียดตาม spec online นี้ เราจะยังอยู่ที่นี่เมื่อคุณ เข้าใจในตัวมัน และ กลับมาอ่านอีกครั้งหนึ่ง

ก่อนอื่นผมขอสาธยาย และกล่าวแนะนำเล็ก ๆ น้อย ๆ เกี่ยวกับตัวของมันก่อน CSS จะช่วยลด bandwidth ช่วยลดขนาดของไฟล์ (X)HTML ของคุณไปอย่างเหลือเชื่อ ไม่เหมือนกับการต้องมานั่งพิมพ์สั่งคำสั่งแสดงผลแบบเดิม ๆ ใน tag html การตกแต่ง layout ของคุณด้วย CSS จะทำให้เวลาในการโหลดนั้นลดลงอย่างเหลือเชื่อ เรื่องภาระในการแก้ไขก็จะไม่ยุ่งยากอีกต่อไป เพราะไฟล์ CSS เพียงไฟล์เดียวนั้นเราสามารถใช้ได้ทั้ง Website เมื่อต้องการแก้ไขเราก็ทำได้ง่าย ๆ ภายในเวลาอันสั้น

Style Sheets นำเราเข้าไปสู่ยุคสมัยใหม่ในการออกแบบ website ไม่ว่าจะเป็นการจัดแจงกับ media รูปแบบต่าง ๆ ที่เราต้องการนำเสนออย่างง่ายดาย ให้เราจัดการกับพื้นที่ในการแสดงผลต่าง ๆ ได้ดีเยี่ยม มีประสิทธิภาพ และ ได้ประสิทธิผลมากขึ้นกว่าเมื่อก่อนที่ user จะต้องมานั่งปวดหัวในการหาข้อมูลของเรา ต้องมานั่งเบื่อหน่ายเมื่อ การแสดงผลมันไม่ตรงกับตอนที่ออกแบบมา ตั้งแต่แรกแล้วมันพลาดมันแตกเมื่อไหร่เราก็ไม่รู้ user ใช้ browser ต่างกันอีกก็ต้องมานั่งปวดหัวเข้าไปอีก CSS ให้เราในสิ่งที่เราไม่คาดคิดว่ามันจะทำได้ เช่น absolute position ที่ทำให้เราเล่นกลได้อีกเยอะ (ให้ดีนะ ไม่งั้นงง ทั้งคนทำ ทั้งคนดู), ทำให้รูปภาพและตัวอักษร ทำงานได้ในแบบที่เราไม่เคยคาดฝันมาก่อน หรือ ที่ฝรั่งเรียกกันว่า Interactive Manipulation และ มันยังทำให้เราสามารถจัดเรียง layout ของเราให้เป็นโครงสร้างเอกสารที่เป็นประโยชน์ และ เป็นอันหนึ่งอันเดียวได้ คือ Search Engine สามารถ เข้าใจและสืบค้นได้ง่ายมากขึ้น เข้าถึงข้อมูลได้รวดเร็วมากขึ้น และ ไม่ว่าจะใช้อุปกรณ์ หรือ เทคโนโลยีใดใด ก็สามารถดู และ แสดงผลออกมาในลักษณะเดียวกันได้ และ ที่สำคัญ ผู้อ่าน หรือ ผู้ใช้นั้นสามารถเข้าใจ และ เข้าถึงข้อมูลของเราได้อย่าสะดวกและรวดเร็ว (ไม่เว้นแม้แต่ คนพิการทางสายตานะครับ)

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

กับการนั่งทำงาน Job ที่รับมาตาเปียกตาแฉะไม่ก็นั่งหาอะไรอ่านไปเรื่อย ๆ ตามประสาคนชอบสอดชอบแส่หาเรื่องปวดกบาลใส่ตัว พอเห็นเจ้าขนมต่าง ๆ เนี่ยมันก็ทำให้ผมมาคิดได้ว่า เอ้อ! นะมันก็มีกรอบก็มีเหลี่ยม และ ก็รูปทรงอื่น ๆ หลากหลายเหมือนเวลาเรามานั่งแพลนทำ Layout ของ Website นี่ล่ะ

สี่เหลี่ยมของขนมรังผึ้ง กับ ขนมครกที่เป็นทรงกลม มันทำให้ผมนึกถึงการ Design Website ในสมัยก่อนเก่า ซึ่งเราจะต้องมานั่งคิดว่าเราจะตัดออกมาอย่างไรให้มันเป็นช่องสี่เหลี่ยม ที่เรียงรายออกมาได้อย่างเป็นระบบระเบียบ เพื่อที่จะจัดมันไว้ในตารางโดยไม่มีการผิดเพี๊ยนไปจากตอนที่เรานั่ง Design ใน Photoshop เนี่ย มันเป็นสิ่งที่ต้องทำจนเราจำจนขึ้นใจไปแล้วว่า เอ้อ … จะทำอย่างไรหนาให้มันออกมาเป็นเช่นนั้น ไม่งั้นมันคงจะตัด slice ออกมากันยากน่าดู (นั่งคิดมาก ๆ จ้องจอมาก ๆ มันอาจจะแปลงร่างเป็นหุ่นให้เราตกใจเล่นก็ได้นะ) แต่ผมเคยคิดนะว่าเมื่อไหร่มันจะทำได้มากกว่านี้นะ เหมือนกับตอนที่เราทำ Flash หรือ ตอนที่กำลัง Design มันออกมานั้น ที่เราอยากจะวางอะไรลงไปก็ได้ แต่พอวางอะไรที่มันเหนือหรือล้ำจินตนาการมาก ๆ ก็ต้องมานั่งลำบากปวดกบาลตอนมานั่ง slice อีก จะทำอย่างไรน้าถึงจะก้าวข้ามขีดจำกัดเหล่านี้ (ซึ่งตอนนั้นผมยังอ่อนต่อประสบการณ์ยิ่งนัก เพราะยังไม่มีใครผลิตแก๊ซโซฮอล) จะทำอย่างไรให้มันวางตรงไหนก็ได้แต่ออกมาแล้วเป็นความสวยงามเหมือนกับขนมครก มันทำให้ผมครุ่นคิดเป็นพัก ๆ แล้วมันก็จางหายไป ตามวันเวลาผมก็ Design Webpage ตามมีตามเกิดของผมไป ขังตัวเองอยู่ในตารางนั้น

มันไม่ใช่เรื่องง่าย ผมยอมรับและไม่ได้ขู่ว่ามันยาก เอางี้แล้วกัน บอกแบบทื่อๆ ไปเลยว่า มันไม่ยากเลยสักนิดที่จะนั่งเขียน XHTML

แบบคนทำงานด้านเว็บดีไซน์โดยไม่จำเป็นต้องพึ่ง หน้าดีไซน์ ของ Adobe Dreamweaver เลย อาศัยเขียนโค้ดล้วนๆ บางคนคิดว่ามันยาก โดยที่ยังไม่ลองพยายามหัด หรือฝึกตัวเองเลย

มันจะยากไปไหน มันไม่ได้ยากไปไหนครับ แต่ผมคิดว่าเราไม่ยอมเดินหนีจากความยากลำบากที่ค้างคาอยู่นั่นต่างหาก คือปัญหา

ปัญหาที่ยังคงถกเถียงกันว่า งาน CSS XHTML มันเป็นงานของใครกันแน่ ระหว่าง โปรแกรมเมอร์ หรือ ดีไซเนอร์ ผมตอบตามแบบฉบับของผมเลย ว่า ไม่ต้องเอางานทั้ง 2 อย่างนี้ให้โปรแกรมเมอร์ หรือดีไซเนอร์ ที่มีอยู่ทำ

ไปจ้าง CSS Designer + XHTML Layout Creator มาดีกว่า