template – iT Blog

เปลี่ยนจาก classic editor เป็น block editor

มีโอกาสเข้าไปอัพเดทเนื้อหาใน thainame . NET อยู่เสมอ พบว่า เนื้อหาที่เคยมีไว้ 178 หน้า หรือ 1546 โพสต์ เมื่อเปิด edit post จะมีการถามว่า เลือก update จาก classic editor เป็น block editor ไหม เป็นคำถามที่ จี๊ดมาก เพราะหันกลับไปมอง 1546 โพสต์นี่ หมายความว่า ผมต้องเข้าไป rewrite ทั้งหมดเลยใช่ไหม คำตอบ คือ ใช่

แล้วการเปลี่ยนครั้งนี้ ดีอย่างไร พบว่า Pavel Ciorici เขียนเมื่อ July 21, 2023
มีข้อดี 5 ข้อ

แก้ไขโค้ดได้สนุกขึ้น เพราะแบบโบราณคงไม่รองรับอนาคต
เลือกใช้ แพทเทิร์น ที่ออกแบบให้เลือกใช้ได้
ทำให้โพสต์ไม่บวม เพราะแบบใหม่ performance ดีกว่า
แบบใหม่ใช้ plugin ได้จำกัด แต่ดีกว่า
รองรับการตรวจสอบรุ่น ในอนาคต

วันนี้ได้ทดสอบ ตรวจ pagespeed กับ post ในแบบ classic กับ block เทียบกันแล้ว พบว่า แบบ classic editor ได้คะแนน performance ต่ำกว่า block editor ได้ทดสอบก่อน และหลังเปลี่ยน ได้คะแนนต่างกันชัดเจน จากการทดสอบปรับจำนวน 3 โพสต์

เมื่อหันกับไปมอง wordpress site ทั้งหมด 4 ตัวของผม ก็นั่งคิดอยู่ว่า จะไป rewrite ได้ครบได้อย่างไร แค่ thainame . NET ก็พันกว่าโพสต์แล้ว

แต่ผมกลับมีกำลังใจขึ้นมา เมื่อหันไปมองเพื่อนผู้ประกอบการ เพราะมีเพื่อนที่เค้าให้ความสำคัญกับ “เนื้อหา” เมื่อหันไปมอง ttpcargo.com , umbrella-perfect.com , ofisu.co.th , usb-perfect.com เค้าก็มีโพสต์ที่ออกมาเป็นราย weekly อย่างต่อเนื่องหลายปีติดต่อกัน ให้ได้เรียนรู้เรื่องราวเกี่ยวกับธุรกิจ สินค้า บริการต่าง ๆ ก็หาเวลาไปตามอ่านอยู่ครับ มีเนื้อหาที่น่าสนใจเยอะมาก

ปรับสีพื้นเทมเพจรุ่น 9.0 ก่อนส่งเข้า pagespeed หวังได้ 100

เล่าเรื่องกำหนดสีพื้นใน .css ของเว็บไซต์ด้านการศึกษา

ทิสเซิล (Thistle) คือ ชื่อทั่วไปของไม้มีหนาม มีอยู่มากมายหลายสายพันธุ์ โดย มิลค์ ทิสเซิล เป็นพืชสมุนไพรมีฤทธิ์ทางยาที่มีการนำมาสกัดเป็นแคปซูลจำหน่ายเป็นยาบำรุงร่างกาย มีสรรพคุณ เช่น ดีท็อกซ์ ตับ โดยสีของดอกทิสเซิลเป็นสีม่วง ค่าสี RGB ของ thistle คือ #D8BFD8 ในการกำหนดสีบนเว็บเพจสามารถใช้ชื่อสี thistle ได้เช่นเดียวกับ red, green, blue หรือ teal

**Thistle** is the common name of a group of flowering plants characterised by leaves with sharp prickles on the margins, mostly in the family Asteraceae.

ซึ่งเทมเพจรุ่น 9.0 ของ thaiall.com เปลี่ยนสีพื้นจาก teal สีเขียวนกเป็ดน้ำ เป็น thistle ม่วงอ่อน ก็ด้วยหวังว่าเว็บไซต์จะถูกพัฒนาไปถึงจุดที่มีประโยชน์ต่อการศึกษาของไทย เพราะการพัฒนาการศึกษาไม่ได้ขึ้นกับใครเพียงคนเดียว พบว่า มีผู้พัฒนาเว็บไซต์ด้านการศึกษาจำนวนมากในระบบของทรูฮิต รู้สึกว่ามีเพื่อนที่คิดเหมือนกันอยู่ในประเทศไทยไม่ใช่น้อย ถ้านักพัฒนาท่านใดโชคดีก็จะมีผู้สนับสนุนที่ทำให้มีแรงกำลังพัฒนางานได้อย่างต่อเนื่อง ไม่หายไปตามกาลเวลา

ขณะนี้กำลังปรับแต่งรุ่นทดสอบของเทมเพจ 9.0 ให้ผ่านเกณฑ์ประเมินตามมาตรฐานของ Pagespeed insight ของ google.com ทั้ง 4 กลุ่มเกณฑ์ เริ่มจาก
ประสิทธิภาพ (Performance) ตามด้วย การช่วยเหลือพิเศษ (Accessibility) แนวทางปฏิบัติที่ดีที่สุด (Best Practices) และ SEO (Search Engine Optimization) ซึ่งเงื่อนไขการประเมินเปลี่ยนตามความก้าวหน้าของเทคโนโลยี เช่น ภาพที่เหมาะสมก็จะแนะนำให้ใช้ .webp เป็นต้น

แต่การปรับให้ได้ 100 ทุกเว็บเพจนั้น น่าจะทำได้ยาก แต่จะพยายามปรับแก้ให้ได้คะแนนสูงขึ้น เพราะเทมเพจหลักจำเป็นต้องใช้ทรัพยากรภายนอก (External Resources) เฟรมเวิร์ค (Framework) และไลบรารี่ (Library) ที่เราไม่ได้ควบคุมอีกหลายรายการ เช่น Truehits.net, Histats, Bootstrap หรือฝังโค้ดจาก Google drive หรือ Youtube.com

https://www.thaiall.com/web2/

ปรับ footer ของ phpbb3

6 มี.ค.55 มีโอกาสใช้โปรแกรม webboard ของ phpbb3 และใช้ prosilver template เมื่อแก้ไข footer ใน /webboard/styles/prosilver/template/overall_footer.html แล้ว พบว่า phpbb3 ไม่มีการเปลี่ยนส่วนของ footer ต่อมาพบว่า ระบบของ phpbb3 มีการเก็บข้อมูลหลายส่วนไว้ในห้อง cache ทำให้การเรียกใช้ ทำได้รวดเร็ว .. แล้วผมก็เข้าไปแก้ไข แต่แก้ไขพลาดทำให้ footer หาย และเข้าในฐานะ administrator เพื่อเข้าถึง control panel ไม่ได้ ต้องแก้ไขโดยใช้วิธีคัดลอกแฟ้มเดิมมาทับ แล้วปรับ code ให้ถูกต้อง

แต่ประเด็น คือ หลังแก้ไข overall_footer.html แล้ว จะต้องเข้าไปใน ปรับแต่งบอร์ด, templates, Refresh เพื่อสั่ง update ข้อมูลใน cache ใหม่ เพียงเท่านี้การแก้ไขก็จะเกิดผล

เหตุที่ผมเลิกออกแบบเว็บไซต์ส่วนตัว แล้วแนะให้จิ้ม

14 พ.ย.53 มีเจ้าของธุรกิจคนหนึ่ง อีเมลถามผมว่า เขาชอบเว็บเพจในเว็บไซต์แห่งหนึ่ง แล้วส่งมาให้ผมดู 3 หน้า ถ้าไปจ้างนักพัฒนา เขาจะต้องบอกว่าอย่างไร ซึ่งเว็บเพจทั้ง 3 หน้ามีจุดที่น่าสนใจ คือ รูปภาพ กราฟฟิก และวีดีโอ แสดงว่าเขาให้ความสนใจกับภาพ และวีดีโอในเว็บเพจ ถือเป็นประเด็นสำคัญมากกว่าองค์ประกอบอื่น เพราะทั้งโครงเว็บไซต์ และเทคนิคเชิงโปรแกรมในเว็บเพจที่เขาสนใจนั้นไม่มีความซับซ้อน .. ผมก็บอกว่าถ้าไปจ้างง่ายเลยครับ บอกผู้รับจ้างว่าขอถูก ๆ มีภาพ และแบบให้แล้ว .. แต่ปัญหาคือ content และภาพที่เขาสนใจนั้น เจ้าของธุรกิจมีในมือหรือไม่ เพราะเชื่อได้ว่าถ้าเขาไปจ้างโดยไม่มีแนวคิดหรือภาพในมือ แล้วนักพัฒนาก็คงทำได้ในเชิงเทคนิค และโครงสร้างเว็บเท่านั้น แต่จะหาภาพที่เขาชอบในมุมของเจ้าของธุรกิจ เรียนรู้กันนาน .. แต่ถ้าเป็นโครงสร้างเว็บกับสีสวย .. ผมก็แนะว่าใช้นิ้วจิ้มครับ ได้เรื่องแน่นอน คือจิ้มไปที่แบบ free template สักแบบหนึ่งที่มีเผยแพร่นั่นเอง .. แค่นั้นคืนเดียวก็เสร็จครับ เพราะไม่ต้องนั่งลองผิดลองถูกอีก

เป็นเหตุให้ผมขุดความทรงจำเรื่อง template มาได้ ว่าเคยจัดอบรมเรื่องเทมเพจเมื่อปี 2548 และผลการอบรมครั้งนั้น ทำให้ผมรู้ว่าโลกนี้มีความสวยงามอยู่มากมายและหลากหลาย ตั้งแต่นั้นผมจึงไม่ให้เวลากับการออกแบบเว็บไซต์อย่างที่ควร เพราะวัตถุประสงค์ของเว็บไซต์ คือ การให้ข้อมูลมิใช่การออกแบบ ถ้าจะออกแบบให้สวยงาม ก็แค่ชี้นิ้วไปยังเทมเพจที่ต้องการ แล้วก็เนรมิตในเวลาชั่วข้ามคืน ซึ่งนักพัฒนาที่รับจ้าง สามารถรับงานพัฒนาเว็บเพจที่สวยที่สุดในเวลาชั่วข้ามคืนเท่านั้น ถ้ารู้จักการใช้ template แต่ถ้ามานั่งออกแบบเองก็คงไม่มีอะไรรับประกันได้ว่าจะถูกใจเจ้าของธุรกิจคนนั้นหรือไม่ .. เพราะอังกฤษ อเมริกา อินเดีย จีน พม่า ต่างก็มองผู้หญิงสวยกันไปคนละแบบ แต่วัตถุประสงค์ของการมีคู่ครองคงมิใช่ความสวยเพียงอย่างเดียว นางงามจักรวาลก็ยังเลิกกับสามีมาแล้วหลายคน เพราะความสวยอย่างเดียวไม่พอ ต้องดูเนื้อหาเป็นสำคัญครับ ว่าจะอยู่กันยืดหรือไม่ .. ดังโบราณท่านว่ารักง่าย หน่ายเร็ว .. เว็บไซต์ขององค์กรหลายแห่งเห็นสวยมาหลายรุ่น เมื่อเปลี่ยนผู้ดูแล ความสวยนั้นก็ถูกหน่ายไปในที่สุด ที่ยังต้องอยู่คือเนื้อหา และวัตถุประสงค์ที่ชัดเจนสอดรับกับแผนกลยุทธ์ขององค์กร
http://www.thaiall.com/template
http://www.freelayouts.com
http://www.templatesbox.com/templates.htm
http://www.steves-templates.com/templates.html

theme สวยมาก แต่มี license ของ solostream.com

6 มี.ค.53 วันนี้พบเว็บไซต์หนึ่งใช้ theme สวยมาก ชื่อ wp-clear บน wordpress.com พัฒนาโดย Solostream มีรายละเอียดใน solostream.com ส่วนเว็บบอร์ดของไทยที่ให้ข้อมูลเรื่องนี้พบใน thaiseoboard.com ส่วนเว็บไซต์ของไทยที่ใช้ theme นี้ได้อย่างลงตัว คือ startupthailand.com ตอนแรกก็คิดจะ download มาทดสอบติดตั้งในเครื่องที่บ้านและเผยแพร่ต่อไป แต่เข้าไปอ่านรายละเอียดก็พบว่ามี license คือ The SOFTWARE is protected by copyright laws and international treaty provisions. จึงไม่ดำเนินการอะไรต่อครับ พบว่าราคามี 3 แบบคือ แบบใช้เว็บไซต์เดียวราคาราว 2,400 บาท แบบหลายเว็บไซต์ราคาราว 5,400 บาท แบบสำหรับผู้พัฒนาที่ไปขายให้ลูกค้าอีกต่อได้ราคาราว 8,400 บาท ถ้าผมจะหา free theme ที่นำมาใช้และไม่ผิดกฎหมายคงต้องกลับไปหาใน wordpress.org ใช้เวลาสักพักก็พบว่า themes ชื่อ news-magazine-theme-640 เป็นอะไรที่น่าสนใจมากครับ .. ถ้าใช้ก็ต้องศึกษาเรื่อง seo ไปพร้อมกัน
+ http://wordpress.org/extend/themes/news-magazine-theme-640 + http://www.thaiseoboard.com/index.php?topic=100797 + http://www.solostream.com/wordpress-themes/
+ http://yonok.startupthailand.com
+ http://wordpress.org/extend/themes/

อบรม web template และ google apps ที่กศน.แม่ทะ

12 – 13 มิ.ย 52 ผมไปเป็นวิทยากรอบรมการใช้งานระบบซีเอ็มเอส web template 2.0 ที่พัฒนาและเผยแพร่โดย อ.ศรีเชาวน์ วิหคโต มีคุณอนุชิต ยอดใจยาไปเป็นผู้ช่วย เราได้รับเชิญจาก ผอ.จรรยา จิรชีวะ ให้อบรมบุคลากร กศน.แม่ทะ ณ ศูนย์การเรียนรู้ประวัติความเป็นมาแหล่งเรียนรู้อำเภอแม่ทะ จังหวัดลำปาง ก่อนไปได้ปรับแต่งโปรแกรม thaiabc6.3 เพื่อเปิดบริการ Local Web Server ซึ่งมี web template 2.01 ในโปรแกรมนั้น ทำให้ฝึกจัดการ web template 2.01 ที่ผมปรับปรุงระบบความปลอดภัย สามารถเรียนรู้ร่วมกันได้ง่าย วันแรกปูพื้นฐานการเขียนเว็บ ซึ่งผู้เรียนหลายท่านไม่ถนัด แต่วันที่ 2 เรียนการเข้าจัดการเท่านั้น (ไม่สอน html) ทุกคนเข้าใจการปรับแต่งเว็บแบบ CMS ด้วยตนเอง ตามวัตถุประสงค์ของ ผอ. วัตถุประสงค์ของการอบรมคือ เพื่อให้ครูในแหล่งเรียนรู้แต่ละตำบลมีส่วนร่วมในการเข้าจัดการเว็บเพจของ กศน.แม่ทะ โดยแบ่งกลุ่มตามหัวข้อ และตามพื้นที่ แทนที่จะปล่อยให้ใครสักคนเป็นคนป้อนข้อมูล ก็จะหันมาแบ่งงานและรับผิดชอบร่วมกัน

ในสัปดาห์ต่อมา วันที่ 20 มิ.ย.52 ไปเป็นวิทยากรอีกครั้งมี อ.เกศริน อินเพลา เป็นผู้ช่วยในการอบรมการใช้ google apps ซึ่งรุ่นของระบบที่ กศน.ลำปาง และกศน.กรุงเทพฯ เคยขอใช้จาก google เพื่อเปิดบริการแก่บุคลากรในกศน. ต่างกับ google apps ที่ผมขอใช้บริการล่าสุด เพื่อเตรียมสอน โดยเฉพาะเรื่อง start page กับ page creater นั้นไม่พบใน google apps รุ่นใหม่ แต่พบเรื่อง site แทน และ site ก็ไม่มีใน google apps รุ่นเก่า แต่ระยะเวลาการอบรม 1 วันก็เหมาะกับ 4 หัวข้อคือ email, talk, calendar และ document วัตถุประสงค์ของการอบรมคือ เพื่อใช้งานระบบการสื่อสารและระบบสนับสนุนการทำงานร่วมกัน ตามแนว enterprise 2.0 ผ่านบริการของ google apps ที่กศน. ลำปาง และกศน.ทั่วประเทศเข้ารับการอบรม ครั้งนี้จึงเป็นการขยายความสามารถในระดับครู เพื่อทำให้การสื่อสารระหว่างครู กับผอ. สามารถเกิดขึ้นได้

ผู้เข้าร่วมอบรมน่ารักทุกคน โดยเฉพาะเรียน google talk แล้ว หลายคนก็ใช้หูฟังกับไมค์คุยกันเพลินเลยครับ ผู้เรียนประกอบด้วย 1)นางสาวนันท์นภัสร์ ศรีวิเชียร 2)นางกมลนันท์ ธรรมนพ 3)นายทาน จันทะปัน 4)นางลำดวน วงศ์สาย 5)นางเทียมจิตร เพชรล้ำ 6)นางธิติยา แก้วเมืองมา 7)นางสายไหม กรรเชียง 8)นางสาวอรวรรณ มานันไชย 9)นางสาวจุฬารัตน์ วงศ์ษา 10)นางสาวนงคราญ ใจตา 11)นางสาวกาญจนา กิ่งแก้ว 12)นางกรชนก มังคะวงศ์ 13)นางสาวบงกช เกิดในวงศ์ 14)นางสาวไพรินทร์ สุวรรณจักร 15)นางอัฉราภรณ์ คำพิชัย 16)นางสาวมนัสวี จิรชีวะ 17)นางสาวธัญจิรา บุญรักษา 18)นางสาววิไลลักษณ์ บุญปันเชื้อ 19)นางสาวทัศนีย์ เพชรตา 20)นายธนวัฒน์ ปันสุทะ 21)นายวุฒิพงศ์ เครือวงศ์ปิง 22)นางสาวปิยะกาญน์ เลิศจุ่ม 23)นายณรงค์ จักรจันทร์ 24)ผอ.จรรยา จิรชีวะ ( ภาพทุกคน )

ผลการให้บริการวิชาการครั้งนี้ ทำให้ผม และผู้ช่วยทั้ง 2 ท่าน ได้เรียนรู้ระบบ CMS อีกโปรแกรมหนึ่งที่พัฒนาโดยใช้ text file และถูกใช้งานในกศน.ลำปาง และกศน.อำเภอ ได้เข้าไปศึกษาโปรแกรม ปรับแต่งให้เหมาะกับการอบรม และนำเสนอให้คนทั่วไปได้นำไปเรียนรู้และใช้งาน และนำเสนอลงสื่อท้องถิ่นด้วยภาพข่าวกิจกรรมบริการวิชาการ ผ่านสำนักประชาสัมพันธ์ของมหาวิทยาลัย ส่วน google apps จะได้ไปเผยแพร่ในมหาวิทยาลัย และคนทั่วไปผ่านหลายช่องทาง เพราะมีประโยชน์ต่อองค์กรที่ให้ความสำคัญกับการใช้ประโยชน์จากไอที โดยเฉพาะเรื่องการสื่อสาร และการทำงานร่วมกันที่ใช้เอกสารเป็นสื่อกลาง ( เอกสารอบรม ) http://www.google.com/a/thaiabc.com

ทดสอบคัดลอกบล็อกแล้วบันทึกไว้ใน /wordpress

26 พ.ค.52 1) ปิดบทความไอทีในชีวิตประจำวัน 2 เรื่อง คือ 192 จุดเริ่มต้นของความปลอดภัยด้านไอที และ 193 การเลือก Netbook หรือ Notebook เผยแพร่ใน thaiall.com/opinion/readonly.php ส่วนเรื่องที่ 194 กำหนดไว้แล้วในแผนที่ส่งตอนรายงานโครงการร่วมกับ nccit09 2) ปรับบทความ thaiall.com/wordpress พร้อมคัดลอกข้อมูลใน /blog ไปติดตั้งใน 127.0.0.1 ที่บ้าน เตรียมสอนช่วงต้นเดือนมิถุนายน52 3) แต่การอบรมจะใช้ template2 ที่ผมต้อง upgrade script ให้ทำงานกับ php รุ่นที่ผมใช้อยู่ และคาดว่าจะตั้งเป็นรุ่น 2.01 ก็ยังไม่ได้แจ้ง อ.ศรีเชาวน์ วิหคโต ผู้พัฒนา template2 ที่กศน.หลายแห่งใช้งาน เลยครับ เพราะคิดว่าพัฒนาแล้วจะติดตั้งใน thaiabc63.zip และแยกเผยแพร่เฉพาะ template21.zip อีกที 4) วันนี้หมดแรงข้าวเย็น คงพัฒนา template2.01 ต่อตอนนี้ไม่ได้แน่ สังขารไม่ให้ซะแล้วครับ ขอพักเท่านี้ พรุ่งนี้เย็นค่อยว่ากันใหม่