Tag: layout

ก่อนหน้านี้ ผมได้เขียนเรื่อง ยุคสมัยของ CSS Layout เอาไว้ แล้วผมก็ค้างเรื่องสุดท้าย ซึ่งจะเป็นยุคสมัยของ CSS Layout ในอนาคต นั่นก็คือ การใช้ Position เพื่อทำ Layout หน้าเว็บ

มันยังไงกันแน่ กับเรื่องการใช้ Position สำหรับหน้าเว็บ อาจจะงง งง กัน แน่หละครับ อะไรที่เรายังไม่รู้ ไม่ทราบ ไม่เห็น ไม่เข้าใจมันย่อม งง เป็นธรรมดา ค่อยๆ เรียนรู้ ค่อยๆ ทำความเข้าใจ เดี๋ยวมันก็หายงง ไปเอง

ไม่ใช่แค่ Position เท่านั้น ที่จะมาเป็น พระเอก สำหรับการเขียน Layout ของเว็บในอนาคต Display คืออีกหนึ่ง Property ที่มาร่วมด้วยช่วยกัน ทำตัวเป็นพระรองให้เราได้ใช้งาน

หลักการพื้นฐานง่ายๆ ก่อนที่จะเข้าสู่วังวนแห่งความมึนงง คือ "ให้เลิกคิดไปตั้งแต่ตอนนี้ว่า CSS เอาไว้จัดหน้าเว็บ อย่างเดียว" CSS มีไว้เพื่อจัดการหน้าเอกสารให้กับทุก
Devices ที่ถูกวางโครงสร้างการนำเสนอด้วยภาษา HTML ในโลกของ http เพราะเมื่อขึ้นด้วย Hypertext Transfer แล้วหละก็ มันก็คือ HTML วันยังค่ำ

"CSS Advanced Layout Module" (ชื่อเก่า) ซึ่งตอนนี้ อยู่ในขั้น WD คือ Working Draft และเปลี่ยนชื่อมาเป็น "CSS Template Layout Module" เมื่อ เมษายน 2009

ผมยังนั่งงงอยู่กับชื่อหัวข้อบทความที่ผมเพิ่งตั้งไป เพราะไม่รู้จริงๆ ว่าจะตั้งชื่อบทความนี้ว่ายังไง อาจจะด้วยเรื่องของความด้อยในด้านภาษาไทย ไม่แกร่งในภาษาอังกฤษ หัวเรื่องบทความก็เลยออกมาในลักษณะนี้ ในเมื่อหัวข้อเรื่องไม่สามารถที่จะอธิบายให้เห็นภาพได้ เอาเป็นว่า ดูภาพตัวอย่าง แล้วเดี๋ยวผมจะค่อยๆ สาธยายเอาเองแล้วกันครับ

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

เรื่อง ยุคสมัยของการเขียน CSS Layout นี้ จริงๆ มันก็ไม่ใช่เรื่องใหญ่ขนาดกู้วิกฤติการเมืองได้ แต่มันพอที่จะให้เรามองเห็นอนาคตข้างหน้าว่า ต่อไปแล้ว ชีวิตของเราในอาชีพนี้จะเดือนไปทางไหน

ผมขอแบ่งออกเป็น 3 ยุคใหญ่ๆ ดังนี้

1. Table Layout
2. Floating Layout (Tableless layout)
3. Positioning Layout

บทที่ 1: เกริ่น

ถ้าหากจะบอกว่าการทำความเข้าใจความหมายและรูปแบบการเขียน Selector ของ CSS นั้นมันไม่สำคัญ ก็คงจะไม่ใช่ เพราะว่าแท้จริงแล้วมันก็สำคัญในระดับพื้นฐาน บางคนอาจจะหลงลืมไป หลายๆ คนอาจจะไม่อยากใส่ใจมัน เพราะว่า "คิดว่า" มันไม่สำคัญ เพราะว่ามันก็แค่ชื่อเรียกใช่หรือไม่ เพราะในความเป็นจริงแล้ว ลูกค้าหน้าไหนจะเข้าใจถ้าเราไปนั่งอธิบายว่า อันนั้นคืออะไร อันนี้คืออะไร

เมื่อไม่นานมานี้ ผมเพิ่งเข้าใจว่า ผมไม่ได้เขียนเรื่องราวการทำเว็บ แต่เป็นเพียงแค่ส่วนหนึ่ง ผมกำลังพูดถึงการเขียนภาษาที่เกี่ยวข้องกับการทำเว็บอยู่ 2 ภาษา นั่นคือ HTML กับ CSS จึงสรุปได้ว่า นั่นคือสิ่งที่ผมกำลังทำ และจะทำต่อไป ผมไม่ได้เขียนบทความ หรือสร้างเนื้อหา พาคนมาทำเว็บ แต่กำลังแลกเปลี่ยนความรู้ ประสบการณ์ ของการเขียน CSS และ HTML ผมจึงไม่ค่อยสนใจเรื่องการทำเว็บ แต่ใส่ใจในหน้าที่ที่ต้องทำ เพราะอาชีพของผมคือ "เขียน HTML และ CSS" เพราะฉะนั้น ผมจึงขอพูดแค่นั้น เพราะอย่างอื่นไม่สันทัด

หลายๆ คนอาจจะสับสน ตีเหมารวมไปหมดว่า แค่สองอย่างนี้มันคือการทำเว็บทั้งหมด ซึ่งมันไม่ใช่ในความรู้สึกของผม ไม่ว่ามันจะใหม่ จะเก่าในเรื่องเนื้อหา บราวเซอร์ไม่รองรับ ลูกค้าไม่ต้องการ หรือคนอื่นมันยังไม่รู้เรื่อง แต่ผมก็คิดว่า นั่นมันเรื่องของเว็บ หรือเรื่องของคนทำเว็บ ไม่ใช่เรื่องของ "CSS หรือ HTML" ที่ผมทำอยู่ เพราะฉะนั้น ในเมื่อภาษามันเปลี่ยนแปลง มันก้าวหน้าไป ผมก็ต้องทำหน้าที่เพื่อที่จะศึกษาและพัฒนาในส่วนของงาน

ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ grid system ร่วมกับการ design หน้า web page กันบ้างแล้วนะครับ ซึ่งการคำนวณ grid ใน design ของเรานั้นก็จะได้จาก สูตรนี้

• Canvas = ขนาดหน้าจอที่คุณต้องการออกแบบ อาทิ 1024 จะต้อง design ที่ 960px หรือ 940px
• Total Unit = ช่องที่เราจะสามารถวาง object ของงาน design ลงไปในบริเวณนั้น ๆ ได้
• Gutter = ช่องว่างระหว่าง Unit สามรถใช้เป็นระยะ ห่างระหว่าง object ต่าง ๆ ที่อยู่บน Unit เพราะฉะนั้นจะไม่มีการ วาง object ลงไปคาบเกี่ยวบนช่องของ Gutter
• Unit = ความกว้างต่ำสุด ของ unit

เนื่องจาก designer บางท่านอาจจะไม่สันทัษเท่าไรนักในเรื่องการ coding อาจจะทำให้เกิด case ที่ผิดพลาดขึ้นได้ เช่น วาง object ไม่พอดี กับ บริเวณที่ Unit อยู่ ไปเกยอยู่ใน บริเวณของ Gutter ซึ่งเมื่อนำไปเขียน CSS นั้นจะมีปัญหา

อาจจะต้องทำการแก้ไขกัน (หรือ อาจจะเกิดการทะเลาะวิวาทกัน ระหว่าง coder และ designer ได้) ผมเลยพยายามยกตัวอย่างให้พอเห็นภาพกันก่อนเพื่อให้เกิด wired frame และ นำไปสู่การกำหนด framework เพื่อความเข้าใจตรงกันในทุกฝ่าย

ตัวอย่าง ผมจะลองกำหนดการรองรับค่าต่าง ๆ ไว้ เพื่อให้เกิดการเข้าใจในทิศทางเดียวกันในการกำหนด wire frames และ framework ในงานงานหนึ่ง หากผมต้องการ 1 Unit จะได้เท่ากับกี่ pixel และ ถ้า 2 Units จะได้เท่ากับกี่ pixel

สร้าง Graph กับ xhtml + css ผมลองนั่งคิด หาวิธีการ และจนกระทั่งทดลองทำ ใช้กลยุทต่าง ๆ ที่พอจะมีหาได้สะสมมาจากการทำงาน ประยุคเข้าไปให้มันใช้งานได้คงเคยเห็นมาบ้างแล้วการสร้าง Graph กับ css มีบทความให้เห็นกันอยู่มากพอสมควร อาจจะใช้ java script เข้าช่วยบ้างในบางแทคนิค แต่ก็ยังรู้สึกว่า มันค่อนข้างที่จะซับซ้อนมาก ทำความเข้าใจยากมากกับ Code ของหลาย ๆ ท่าน ผมก็เลยคิดหาทางสร้างขึ้นมาใหม่ตัวหนึ่ง ซึ่งคิดว่าน่าจะเป็น Code ง่าย ๆ ที่ผมเองพอจะทำได้ และ ลองเอามาแนะนำ เผื่อเอาไปต่อยอดความคิด ประยุคใช้เผื่อจะเกิดความคิดใหม่ ๆ ในงานของเรา เป็นการคิดนอกกรอบต่อยอดไปเรื่อย ๆ ครับ