จากการอบรมเรื่องการใช้ Joomla! CMS ทำเว็บไซต์โรงเรียน ให้กับเพื่อนครูที่สนใจ ในช่วงปิดภาคเรียนเดือนเมษายนที่ผ่านมา มีหลายท่านสนใจอยากจะนำเอาโค๊ดข่าวจากที่อื่นๆ มาติดตั้งในจูมลา ที่ร้อยเอ็ดผมบอกวิธีไปแล้ว แต่บางท่านก็ติดตามเนื้อหาบางส่วนไม่ทัน และที่นครศรีธรรมราชผมใช้เวลาเรื่องอื่นๆ มากไปหน่อย เลยไม่ทันได้บอกเคล็ดลับเรื่องนี้ ก็เลยถือโอกาสนำมาเสนออย่างละเอียดพร้อมภาพประกอบครับ

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

การหาโค๊ดข่าวมาใช้งาน

ยกตัวอย่างที่เว็บของ สพฐ. www.obec.go.th จะมีข่าวแจ้งสำหรับโรงเรียนและบุคลากรทางการศึกษา และข่าวแจ้งไปยัง สพท. ต่างๆ ทั่วประเทศ เราสามารถไปก็อบปี้เอาโค๊ดข่าวมาใช้งานได้ โดยดูที่เรื่องจากเว็บมาสเตอร์ท้ายๆ หน้าเว็บ สพฐ. แล้วคลิกที่ลูกศรปุ่มแดงๆ

จะปรากฏหน้าต่างใหม่แสดงโค๊ดที่สามารถนำมาใช้งานได้ ซึ่งมี 2 ข่าวและแต่ละข่าวจะเข้ารหัสภาษาต่างกัน 2 แบบ ในกรณีที่เป็นเว็บจูมลาแนะนำให้ใช้โค๊ดแบบ UTF-8 ดังภาพ

จากนั้นดูตำแหน่งโมดูลที่จะวางข่าวในหน้าเว็บของเรา แนะนำให้ดูจาก Template ที่เมนู Extension > Template Manager > เลือกเทมเพลตที่เราใช้งาน > คลิกที่ Preview เพื่อดูตำแหน่ง ตัวอย่างผมจะวางที่โมดูล Banner4 ที่อยู่ด้านล่างท้ายข่าวและบทความดังภาพ

โดยปกติ เพื่อป้องกันความปลอดภัยของระบบ Joomla! จะไม่อนุญาตให้วางไฟล์สคริปต์ใดๆ ได้ (จะลบโค๊ดออกอัตโนมัติ) เพื่อให้งานของเราสมดังหวัง จึงต้องใช้เทคนิคหลอกล่อนิดหน่อย ด้วยการเข้าไปกำหนดให้ผู้ใช้งาน (ผู้ดูแลที่สร้างโมดูล) ใช้ Editor สำหรับปรับแต่งข้อความเป็นแบบ No Editor เสียก่อนสำหรับโมดูลพิเศษนี้ (ชั่วคราว) โดยเข้าไปที่เมนู Site > User Manager เลือกผู้ใช้ชื่อ admin หรือชื่ออื่นที่มีสิทธิเทียบเท่า แล้วทำการแก้ไขดังภาพ

จากนั้นบันทึกค่า ออกไปจัดการสร้างโมดูลกันเลย คลิกที่เมนู Extension > Module Manager ดังภาพ คลิกที่ปุ่ม New

เลือกชนิดของโมดูลที่จะสร้าง ในกรณีของเราเลือกเป็น Custom HTML แล้วคลิกที่ปุ่ม Next

จากนั้นทำการกำหนดชื่อโมดูลเป็น ข่าวจาก สพฐ. หรือจะใช้ OBEC news ก็ได้ตามใจปรารถนา กำหนดให้ Show Title และ Enable การทำงานของโมดูล ตำแหน่งที่จะให้แสดง (Position) คือ banner4 การเข้าถึงข้อมูลเป็นทุกคน (Public)

จากนั้นกำหนดหน้าที่จะให้โมดูลนี้แสดงผล ในตัวอย่างให้แสดงที่หน้าแรก (Home) หน้าเดียว จากนั้นนำโค๊ดที่คัดลอกมาวางลงในช่อง Custom Output บันทึกโมดูลได้เลย

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

  แจ้งข่าวดีครับ...

การเพิ่มข่าว สพฐ. (OBEC NEWS) ตอนนี้มีโมดูลสำหรับใช้งานบนเว็บไซต์จูมล่าโดยตรงแล้วนะครับ จัดทำโดยครูสรายุทธ์ หอมชู  มีให้ดาวน์โหลดแล้วตามลิงก์นี้ mod_obecnews.zip ติดตั้งแล้วไปกำหนดค่าการแสดงผลในตำแหน่งที่ต้องการได้เลย

การสร้างแบนเนอร์ต่างๆ

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

ตัวอย่างแบนเนอร์ต่อไปนี้สร้างจากโปรแกรม Photoshop CS4 จะเวอร์ชั่นต่ำกว่านี้ก็เหมือนๆ กันครับ ขั้นแรกเราต้องกำหนดชิ้นงานก่อนว่าต้องการขนาดเท่าไหร่ สำหรับแบนเนอร์มาตรฐานคือ 480 x 60 pixels ดังภาพ

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

นำภาพที่ต้องการทำพื้นหลังมาวางในเลเยอร์ใหม่ตามต้องการ ในตัวอย่างใช้เพียง 2 เลเยอร์ แล้วสร้างข้อความอีกจำนวน 2 เลเยอร์ คือ "การสร้างแบนเนอร์โฆษณาง่ายๆ" และ "ด้วยโปรแกรม Photoshop"

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

ในเฟรมที่สองจะเปิดตาให้ภาพที่สองแสดง เฟรมที่สามให้ข้อความแรกแสดง และเฟรมที่สี่ให้ข้อความที่สองแสดงดังภาพ (ในขณะที่ปิดการแสดงข้อความแรก)

จากนั้นทำการสร้างความเคลื่อนไหวด้วยการเลือกที่เฟรมแรกและเฟรมที่สอง สั่งให้ทำเฟรมเสริมแบบ Motion Tween ในกรอบสีเขียว จะมีหน้าต่าง Tween ให้กำหนดค่าจำนวนเฟรม (ปกติจะกำหนดที่ 5 เฟรม แต่ถ้าอยากให้นิ่มนวลขึ้นให้กำหนดเพิ่มแต่ไม่ควรเกิน 12 เฟรม เพราะจะทำให้ขนาดไฟล์ที่ได้ใหญ่เกินไป) ที่เหลือเลือกตามภาพแล้วคลิก OK

เลือกเฟรมภาพที่สองและเฟรมข้อความแรก สั่ง Tween อีกครั้ง เสร็จแล้วเลือกเฟรมข้อความแรกและเฟรมข้อความที่สองสั่ง Tween และเลือกเฟรมข้อความที่สองและเฟรมภาพแรก สั่งทำTween อีกครั้ง จนครบถ้วน

ลองคลิกที่ปุ่ม Play รูปสามเหลี่ยมดูผล หากต้องการให้เฟรมใดแสดงผลนานขึ้นให้เพิ่มเวลา เช่น เฟรมข้อความอาจทดลองเพิ่มจากน้อยไปหามาก แล้วทดสอบจนพอใจ

เมื่อพอใจแล้วก็ถึงเวลานำไปใช้งานด้วยการบันทึกจากเมนู File > Save for Web & Devices...

เลือกชนิดของภาพเป็น Gif Animation เพื่อให้เกิดการเคลื่อนไหวตามที่ต้องการ จากนั้นคลิกที่ปุ่ม Save ตั้งชื่อภาพตามต้องการ ก็จะได้แบนเนอร์ฝีมือเราเองแล้ว

และข้างล่างนี้คือผลงานดังกล่าว ลองประยุกตฺใช้งานกันตามสะดวกนะครับ จะมีขนาดเท่าไหร่ตามใจ แบนเนอร์มาตรฐานนี้จะใช้กับการแสดงผลในโมดูล Banner ของ Joomla! ได้พอดีเลยครับ ถ้าขนาดอื่นๆ คงต้องหาที่วางในโมดูลอื่นๆ กันเอง

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