คราวที่แล้ว เราแนะนำให้ drupal รู้จักธีม Colourise ของเราไปแล้ว พร้อมทั้งจัดการนำส่วนเนื้อหาหลัก กับ sidebar มาแสดงในธีม คราวนี้มาสนุกกับส่วน header และ footer กันดีกว่า ก่อนอื่นเปิดใช้งานธีม Colourise ใน drupal เลยครับ ถ้าใครติดตั้ง โมดูล Switchtheme แล้ว ก็จัดการเอา block ของมันมาไว้ที่ right sidebar ได้เลย เวลาเปลี่ยนธีมกลับไปกลับมาจะได้ไม่ลำบาก

การนำ Free CSS Template มาสร้างธีมสำหรับ Drupal 6.x

ผมเป็นคนหนึ่งที่อยากเห็นตัวอย่างการทำธีมสำหรับ drupal 6.x แบบรวดเร็วทันใจ แต่มันก็ไม่ง่ายเหมือนการดาวน์โหลดธีมมาติดตั้ง วิธีที่ผมคิดออกเพื่ออธิบายขั้นตอนการทำธีมของ drupal ก็คือ ยังไม่ต้องพูดถึงที่มาที่ไปของแต่ละขั้นตอนมากมายนัก เพราะรายละเอียดมันเยอะมาก เอาไว้ถ้ามีโอกาสก็คงได้พูดถึงมันทีหลัง และอยากจะข้ามขั้นตอนการออกแบบเว็บไซต์ไปด้วย จะได้ไม่ต้องคิดอะไรฟุ้งซ่านเกินไป

ทางออกก็คือ หา Free CSS Template มาเป็นต้นแบบ เพื่อประกอบการอธิบาย ซึ่งจะทำให้งานของเราง่ายขึ้นมาก และสุดท้ายเราก็สามารถเอาธีมนั้นมาใช้งานจริงได้ด้วย แบบนี้คงช่วยให้เห็นกระบวนการสร้างธีม drupal แบบไม่ปวดหัวใจ(และปวดกบาล) แต่ยังมีอีกหลายวิธีที่ทำได้เหมือนกัน ผมเพียงแต่ยกวิธีนี้ขึ้นมาเป็นตัวอย่าง เพราะคิดว่ามันเป็นวิธีที่ "เมื่อยนิ้วน้อยที่สุดแล้ว" (ไม่ต้องยุ่งกับโค้ดมากมายเกินไป)

ผมกำลังวางแผนจะรวบรวมวิธีการทำธีมสำหรับ drupal ปัญหาอย่างเดียวที่มีตอนนี้คือ "ขี้เกียจ" เพราะยังไงซะ ตัวเองก็หาเวลาว่างได้ไม่ยาก เพราะไม่ได้ทำงานประจำ แต่ความขี้เกียจของผมเริ่มหายไปเมื่ออ่าน กระทู้ที่ชวนให้ของขึ้น ใน drupal.in.th เลยมีแรงขับเพิ่มขึ้นมา(นิดนึง) อยากจะเขียนให้มันเป็นภาษาไทยที่เข้าใจได้ง่ายๆ และเอาไปใช้ได้จริง

ผมไม่ค่อยให้ความสำคัญกับเรื่องเทคนิคซักเท่าไหร่ แต่ใส่ใจหลักการที่อยู่เบื้องหลังการทำงานมากกว่า แต่... ถ้าเอาแต่พูดเรื่องหลักการ ใครจะสนใจฟังล่ะ? ถ้าไม่ใช่คนที่อยากรู้จริงๆเค้าคงไม่อ่าน และจริงๆข้อมูลไม่น้อยที่ผมหาในอินเตอร์เน็ต ก็เป็น tutorials บอกขั้นตอนการทำแบบทีละขั้นจนจบกระบวนการ คิดว่าคนที่สนใจปรับแต่งธีมสำหรับ drupal ก็คงต้องการข้อมูลลักษณะนั้นเหมือนกัน

ช่วงนี้กำลัง redesign ให้ Ohweb.info ซึ่งไม่ใช่งานง่ายซักเท่าไหร่ เพราะเป็นเว็บไซต์ที่มีเนื้อหาพอสมควรอยู่แล้ว แม้จะเป็น Drupal ที่ผมคุ้นเคย แต่ก็มีโมดูลหลายตัวที่ต้องแก้รูปลักษณ์อินเตอร์เฟสใน CSS หลังจากวางเลย์เอาต์คร่าวๆ เป็น HTML + CSS แล้ว ผมใช้วิธีเคลียร์โค้ดเดิมทิ้งไปก่อน ให้มันเหลือแค่เนื้อหาเพียวๆ จากนั้นก็ค่อยไล่แก้ไปทีละตัว ซึ่งผมทำได้ช้ามาก ตอนที่ต้องพอร์ต HTML เป็น ธีมของ Drupal เพราะผมแยกไฟล์เทมเพลตสำหรับแต่ละโมดูลด้วย (เป็นครั้งแรกที่ผมรื้อไส้รื้อพุงของ Drupal ออกมาดู แต่ไม่ถึงกับเปลี่ยนอะไรในฟังชั่นการทำงานของมัน)

ผมกำลังทดลองผสมผสานหลักการหลายๆอย่าง เกี่ยวกับงานออกแบบเว็บไซต์ แรกเริ่มเดิมที ผมสนใจแนวการออกแบบของ Mark Boulton (คนเดียวกับที่กำลัง Redesign ให้กับ Drupal.org นั่นแหละ) ผมไม่ได้ชอบแนว Minimalism แต่เป็นเพราะพี่แกเนี้ยบมาก หลักการแน่นปึ้ก โดยเฉพาะแนว Grid Design ที่พี่แกย้ำนักย้ำหนา ว่าต้อง "วัด แล้วก็ วัด" ไม่มีมั่วแม้แต่พิกเซลเดียว สมกับที่เป็น Typographic Designer มาก่อนจริงๆ

ผมทิ้ง webzer ร้างไปนาน เพราะนึกไม่ออกว่าจะทำอะไรกับมันต่อ ความจริงคือ ผมหาทางออกเรื่องการใช้ฟอนต์ไทยในเว็บยังไม่ได้ แต่ถ้าหมายถึงวิธีการแก้ปัญหาเฉพาะหน้านั้น มีหลายวิธีและทำได้ไม่ยาก เช่น เทคนิคเก่าๆ ใช้รูปภาพแทนตัวหนังสือ (FIR - Fahrner Image Replacement) , ซับซ้อนขึ้นอีกหน่อย ก็ใช้ Flash กับ Javascript (sIFR - Scalable Inman Flash Replacement) , ถ้าใน IE4 ขึ้นไป ก็ใช้ไฟล์ eot ฝังฟอนต์ในหน้าเว็บได้ (เขียนไม่ผิดหรอกครับ IE4 อ่านไฟล์ฟอนต์ได้ตั้งนานแล้ว! WEFT - Web Embedding Fonts Tool) หรือ ใช้ @font-face ของ CSS3 ( CSS3 module: Web Fonts) แต่ทุกวิธีที่ว่ามา ไม่ใช่ทางแก้ปัญหาที่ยั่งยืน และบางวิธีก็ยังไม่เหมาะกับสถานการณ์ปัจจุบัน (เช่น CSS3)