Tag: คิดนอกกรอบ

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 ตามมีตามเกิดของผมไป ขังตัวเองอยู่ในตารางนั้น