Web, Program, OS – Page 3

ปรับสีพื้นเทมเพจรุ่น 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/

วิ่งขึ้นดอยเนินสปิริต

ในช่วงนี้ เป็นช่วงจัดกิจกรรมเตรียมความพร้อม
รับขวัญ รับน้องใหม่ของทุกคณะวิชา ที่ #มหาวิทยาลัยเนชั่น
พบว่า อ.สิทธิโชค โควาบุญพิทักษ์ คณะนิเทศศาสตร์
ทำคลิปสรุปกิจกรรมทั้ง 5 วัน
ที่นำเสนอได้อย่างน่าตื่นตา
พบว่า มีเพื่อน ๆ นำคลิปไปแชร์ต่อหลายท่าน
มียอดไลค์ ยอดแชร์เพิ่มขึ้นต่อเนื่อง

เป็นคลิปที่ยอดเยี่ยม ภาพชัด และใช้โดรน
มีคลิปของวันที่ 3 สิงหาคม 2565
ที่นิสิตจับมือกันวิ่งขึ้นดอย ได้ดูเพียงรอบเดียว
รู้สึกชอบ และเลือกใช้คลิปนี้เลย
จึงตัดสินใจนำคลิปนั้นมาเล่าต่อ ว่า มีความน่าสนใจเพียงใด
ประกอบกับการเตรียมบทเรียนการทำคลิป
ด้วยโปรแกรม Powerpoint
ซึ่งการบันทึกคลิปด้วยโปรแกรมนี้
เราสามารถแทรกคลิปตัวผู้บรรยายในระหว่างบรรยาย
ที่มุมล่างขวาของคลิปวิดีโอก็ได้
ซึ่งถือว่าเป็นอีกทางเลือกในการทำคลิปวิดีโอ
นอกเหนือจาก kinemaster, inshot, capcut, canva, viva
ที่อยากจะแนะนำนิสิตว่า
เราทำคลิปด้วยเครื่องมือนี้ก็ได้ เป็นโปรแกรมที่ใครก็รู้จัก
ขั้นตอนนั้น เริ่มจาก
ดาวน์โหลดคลิปที่มีการแชร์ในเฟสบุ๊ค
เลือกความละเอียดที่ไม่ต่ำเกินไป และได้แฟ้ม .mp4
ประกอบกับ เครื่องที่ทำงานมี RAM ที่มากพอจะรับมือได้
โปรแกรมเป็น Office 2019 และ Win 10
นำคลิปที่ได้ไป Insert บน Slide ใน Powerpoint
ซึ่งงานนี้มีเพียง slide เดียว และมีเพียงคลิปอยู่บนสไลด์
จากนั้นบันทึก Slide show ทันที
โดยไม่ได้เตรียมข้อมูลการเล่าเรื่องไว้ก่อน
และตั้งใจบันทึกแบบม้วนเดียวจบ
จึงไม่ได้ Pause ทีละ Scene เพื่อพูดถึงรายละเอียดในภาพ
ทำให้รู้สึกว่าช่วงบันทึก เร่งตนเองระหว่างเล่าเกินไป
ถ้ามีโอกาสทำคลิปแบบนี้อีก จะต้องหยุดในซีนที่น่าสนใจ
แล้วเล่าออกไปอย่างใจเย็น
เพื่อให้การนำเสนอรายละเอียดมีความครบถ้วนยิ่งขึ้น

การจัดการรายการต้นแบบ ใน MS Word

โปรแกรมเอกสาร (MS Word) มีคุณสมบัติหนึ่ง คือ ระบบบรรณานุกรม ที่เก็บรายการต้นแบบ และรายการปัจจุบัน ที่สามารถบันทึกแหล่งข้อมูล แล้วเลือกใช้รายการปัจจุบันในเอกสารที่เปิดอยู่ หรือนำมาแทรกเป็นเอกสารอ้างอิงท้ายรายงาน หรือท้ายบทความวิชาการได้ เมื่อถึงเวลาต้องสรุปเอกสารอ้างอิงนั่นเอง ดังนั้น นักวิจัย สามารถอ่าน เขียน สรุปรายการงานวิจัย บทความวิชาการ และบันทึกเป็นแหล่งข้อมูลให้ได้จำนวนและเนื้อหาที่เพียงพอ แล้วทำการรีวิวอย่างเป็นระบบ เลือกมาเขียนในรายงานการวิจัย 5 บทได้

มีขั้นตอนการใช้งาน คือ เข้าแถบเมนู, การอ้งอิง, จัดการแหล่งข้อมูล, มีแหล่งที่พร้อมใช้งานใน C:\Users[user name] \AppData \Roaming \Microsoft \Bibliography \Sources.xml ซึ่งแฟ้ม Sources.xml ผู้วิจัยสามารถเพิ่ม ลบ แก้ไขได้ง่าย หากต้องการเลือกใช้ก็เพียงคัดลอกจากหน้าต่าง “รายงานต้นแบบ” เข้าหน้าต่าง “รายการปัจจุบัน” ซึ่งเอกสารอ้างอิงมีให้เลือกได้หลายรูปแบบ เช่น APA, Chicago, IEEE, MLA, Turabian ส่วนแฟ้ม Sources.xml มีหน้าที่เก็บรายการเอกสารที่ผู้วิจัยรวบรวมจากการค้นคว้าไว้ มีได้หลายแฟ้มตามโครงการ หรือบุคคลได้ เช่น Sources_burin.xml หรือ Sources_wtu20.xml ซึ่งการเรียกแฟ้มต้นแบบเข้ามาเปลี่ยนใน MS Word จะไม่ใช่การรวมรายการกับแฟ้ม Sources.xml เดิม แต่เป็นการเปิดใหม่แทนที่แฟ้มรายการต้นแบบเท่านั้น

ในการแทรกบรรณานุกรม ยังมีตัวเลือก “บันทึกส่วนที่เลือกลงในแกลลอรีบรรณานุกรม” ที่เรียกมาใช้ได้ หรือเข้าไป “จัดระเบียบและลบออก” ผ่าน right click ก็ได้ โดยใช้ mouse คลุมเนื้อหาส่วนที่เลือก แล้วสั่งบันทึกฯ เพื่อเรียกใช้อีกครั้งภายหลัง

https://www.thaiall.com/research/apa.htm

เกมสนุกและสร้างสรรค์ #puzzle #1

โค้ดเกมหากุญแจ ที่เขียนด้วย javascript ใน homepage นี้ มีวัตถุประสงค์ในการสุ่ม กุญแจ (key) และสร้างคำแนะนำ (hint) ทั้ง 5 ข้อ ให้กับผู้เล่นเกมได้ทายตัวเลข 3 ตัวที่ไม่ซ้ำกัน กรอกลงในช่อง 3 ช่องแบบไม่ซ้ำ แล้วกดปุ่ม check ถ้าทายถูกก็จะพบคำว่า “You Crack it.” แต่ถ้าทายผิดก็จะพบคำว่า “Try once again.”

ซึ่งการเรียนรู้แบบสร้างสรรค์เป็นฐาน มีขั้นตอนที่ 1 คือ การกระตุ้นความสนใจ ดังนั้นการเริ่มต้นด้วยการคำนวณชวนคิดอย่างมีจินตนาการ เพื่อตามหาตัวเลข 3 ตัว หรือตามหากุญแจที่หายไป จากลายแทงที่เตรียมให้ทั้งหมด 5 ลายแทงดังตัวอย่าง เชื่อว่าจะช่วยกระตุ้นความสนใจ ก่อนเข้าสู่บทเรียนได้เป็นอย่างดี สำหรับ การเรียนรู้แบบสร้างสรรค์เป็นฐาน (CBL = Creative-Based Learning)

ซึ่ง CBL ประกอบด้วย 5 ขั้นตอน ดังนี้ ขั้นตอนที่ 1 กระตุ้นความสนใจ (Interested) ขั้นตอนที่ 2 ตั้งปัญหารายบุคคลและกลุ่มตามความสนใจ (Problem) ขั้นตอนที่ 3 ค้นคว้าและทดลอง (Search and Test) ขั้นตอนที่ 4 นำเสนอผลงาน (Result) ขั้นตอนที่ 5 สรุปและประเมินผล (Conclusion) พบว่า เวทิสา ตุ้ยเขียว สกนธ์ชัย ชะนูนันท์ และ อัญชลี สิริกุลขจร (2563) ศึกษาเรื่อง แนวทางการจัดการเรียนรู้แบบสร้างสรรค์เป็นฐานที่ส่งเสริมสมรรถนะการแก้ปัญหาแบบร่วมมืออย่างสร้างสรรค์ของนักเรียนในระดับชั้นมัธยมศึกษาปีที่ 4 เรื่อง ปฏิกิริยาเคมี ซึ่งผลการวิจัยมีแนวทาง 5 ขั้นตอน อ้างอิงจาก Luachaiphanit, W. (2015). Creativity-Based Learning (CBL). Journal of Learning Innovations Walailak University,1(2), 23-37. [in Thai]

https://www.thaiall.com/php/whatisthekey.htm

Education on 31 March 2022

พบว่า truehits.net เผยแพร่ข้อมูลเว็บไซต์ด้านการศึกษาใน รูปแบบ XML สำหรับ ประเทศไทย มีเว็บไซต์ด้านการศึกษาจำนวนมาก พบว่า เว็บไซต์ truehits.net เผยแพร่ข้อมูลสถิติการเข้าถึงเว็บไซต์ของสมาชิก มีรายการชื่อเว็บไซต์ที่สามารถนำมาใช้ได้ จากลิงค์ http://truehits.net/xml/ สำหรับกลุ่มการศึกษามีลิงค์ที่ http://truehits.net/xml/education.xml ได้ข้อมูล 10 รายการ ส่วน http://truehits.net/xml/education_all.xml จะมีข้อมูลของสมาชิกในกลุ่มทั้งหมด เมื่อดาวน์โหลดแฟ้มนี้ เมื่อวันที่ 1 เมษายน 2565 พบว่า เป็นรายงานสรุปข้อมูลประจำวันที่ 31 มีนาคม 2565 มีข้อมูลทั้งหมด 578 รายการ สำหรับข้อมูลกลุ่มอื่น สามารถใช้ลิงค์เดิม แต่เปลี่ยนคำว่า education เป็น allmember, government, computer, education, travel, health, entertain, art, social, news, science, organize, person, internet, business, sport ก็จะพบข้อมูลตามชื่อกลุ่มที่เป็นข้อมูลล่าสุด ที่สามารถนำข้อมูลในรูปแบบ XML มาใช้ได้ตามต้องการ

ซึ่งแฟ้ม education.xml จะมีรูปแบบตัวอักษรเป็น ANSI เมื่อแปลงเป็น json ที่ใช้ โค้ดภาษา php โดยใช้ json_encode จะได้แฟ้มข้อมูลรูปแบบตัวอักษรเป็น utf-8 แล้วใช้ class easyui-datagrid ของ jquery-easyui แสดงข้อมูลจาก json เป็นตาราง

https://www.thaiall.com/xml/

https://www.thaiall.com/xml/truehits_education_650331.php

Background ขาดหายไป หรือไล่ระดับไม่เต็มหน้า

ผลงานโปสเตอร์ ในรูปของ PDF File กำหนดขนาดไว้ 8 นิ้ว * 18 นิ้ว ที่นิสิตทำส่ง พบปัญหากับสีพื้น (background) บ่อยครั้งใน 2 กรณี คือ 1) สีพื้นและเนื้อหาข้อมูลมาไม่ครบ และ 2) สีไล่ระดับมาเป็นท่อนเล็ก ๆ ไม่เต็มหน้าเหมือนตอนออกแบบ สำหรับกรณีสีพื้นมาเพียงครึ่งหน้านั้น เกิดจาก Default printer เป็นโปรแกรม PDFCreator ซึ่งกำหนดขนาดกระดาษเป็น A4 เมื่อสั่ง Save as หรือ Print หรือส่งออกไปแล้ว จะทำให้การแสดงผลใน PDF file ถูกจำกัดที่ A4 ส่วนที่อยู่นอกเหนือจากนี้จะหายไป วิธีแก้ไขก็เพียงแต่เปลี่ยน Default Printer

สีไล่ระดับ ที่กำหนดเป็น background นั้น จะมาเป็นท่อนเล็ก ๆ หากต้องการใช้ Feature นี้ ต้องแทรก Shape, Rectangle แล้วกำหนดสีไล่ระดับใน Shape แล้วสั่ง send to back ก็จะแสดงผลได้ตามปกติ เมื่อมีการส่งออกไปเป็น PDF หรือจะใช้ image เป็น background ก็ดูสวยดี แต่ควรต้องคำนึงถึงการแสดงผลแบบ สีคู่ตรงข้าม (Contrast Color) จะได้เห็นเนื้อหาแยกออกจากสีพื้นได้ชัดเจน

http://www.thaiall.com/office/word.htm

มีแฟ้มแน่นเครื่อง ย่อมส่งผลให้เครื่องช้าเป็นธรรมดา

การล้าง การเคลียร์ การจัดเรียง ย่อมทำให้เครื่องเร็วขึ้น

คลิ๊กซ้ายบน Start button
คลิ๊ก Search
คลิ๊ก Storage settings พบว่า ขนาดที่ถูกใช้ในแต่ละ Categories
คลิ๊ก Other พบว่า ขนาดในแต่ละ Folder ใช้มากน้อยต่างกัน
เข้าไปลบแฟ้มที่ไม่จำเป็น ซึ่งการลบเพื่อไม่ให้เข้าถังขยะ ต้องกด Shift + Del
ตัวอย่าง folders ที่ได้เข้าไปจัดการ
[C:\Users\LAB\.android]
[C:\Users\LAB\.gradle]
[C:\Users\LAB\VirtualBox VMs]

Disk Cleanup
Defragment and Optimize Drives

PWA เริ่มใช้ที่รุ่น 8.2

เมื่อ 23 มี.ค.65 เริ่มปรับ /web2 และ /pwa เป็นรุ่น 8.2 มีการปรับที่สำคัญ คือ การทำให้ webpage สามารถแสดงผลเหมือนเป็น mobile app ซึ่งการใช้งาน เริ่มจากเปิด webpage ผ่าน browser บน mobile แล้วเลือก “เพิ่มไปที่ , หน้าจอหน้าแรก” จะมี icon ปรากฎบน mobile ถือเป็นการติดตั้งเรียบร้อยแล้ว ต่อจากนั้น เมื่อเริ่มใช้งาน เราสามารถคลิ๊ก icon บน mobile จะมีหน้าตาเหมือน application แต่ระบบข้างหลัง คือ browser เช่นเดิม

โจทย์นี้ เคยมีเพื่อนต้องการให้แสดง webpage แบบ full screen บน browser ซึ่งมีกรณีศึกษาที่ดำเนินการเทียบเคียงได้กับหนังสืออีเล็กทรอนิกส์ Peter rabbit ทำให้ผมนึกถึงการทำงานของ PWA ที่เคยแกะโค้ดไว้เมื่อปี 2560 แต่เป็นคุณสมบัติการทำ Full screen ที่แตกต่างกัน แล้วเห็นว่าความสามารถของ PWA นี้น่าสนใจ จึงเริ่มต้นนำร่องปรับใช้กับ 2 โฮมเพจนี้ ซึ่งการใช้งานก็เพิ่มโค้ดไปเพียง 2 tag ในบรรทัดที่ 6 คือ 1) กำหนดค่ารายการในแฟ้ม manifest ที่ต้องปรับสำหรับแต่ละหน้า และ 2) เรียกสคลิ๊ป material.min.js ซึ่งเป็นองค์ประกอบสำหรับการออกแบบที่เรียกใช้ค่าจากแฟ้ม manifest

http://www.thaiall.com/pwa/

http://www.thaiall.com/web2/

https://github.com/kongruksiamza/PWATutorial/

เพื่อนสายเดฟส่งคำถามมา

ผมมีเพื่อนสายเดฟ ที่เราทำงานคล้ายกันมาก วันหนึ่งเค้าส่งคำถามเข้ามาทางไลน์ เรื่อง java script และ ebook มีความเป็นมา คือ ต้องการสร้างแคตตาล็อกสินค้า ที่คลิ๊กเลือกสินค้าในแคตตาล็อกได้ พบว่า การทำงานใน desktop ส่งข้อมูลได้ปกติ แต่เมื่อใช้งานใน mobile กลับไม่ตอบสนอง สรุปคือ บน mobile ไม่มีการส่งข้อมูลออกไป ให้กับ server-sided script เพื่อนำไปประมวลผลต่อ

ปัญหา คือ คลิ๊กรายการแล้ว
แต่ไม่มีการตอบสนองจากภายในแคตตาล็อก
เข้าไปตรวจ java script พบว่า
ถ้าไม่เรียกใช้ e.preventDefault(); และ e.stopPropagation();
ก็จะทำงานบน Mobile ได้เหมือนกับทำงานบน Desktop
ไม่มีการปิดการทำงานของ mouse click แต่อย่างใด
ที่เล่ามานี้กำลังพูดถึง ipages flipbook
ที่มีรุ่นทำงานบน WordPress และ JQuery Plugin
ซึ่งนำโค้ดไปใช้งาน
บน http://www.thaiall.com/e-book/

ทดสอบ code กับหนังสือหลายเล่ม ทั้งของเพื่อนที่ฝากแก้โค้ด ของ Peter rabbit แต่งโดย Beatrix Potter ที่เป็น demo ของผู้พัฒนาโค้ด แล้วมาจบที่ eduzones magazine ฉบับพิเศษ (special issue) เล่มนี้มี 32 หน้า ผมเคย scan ไว้นานแล้ว ความละเอียดประมาณ 900px * 1200px ซึ่งไม่ใหญ่ และไม่เล็กเกินไป พออ่านออก พบว่า code ทำงานได้รวดเร็ว ต่างกับ flash version ที่เคยเป็นระบบเดิมของ ebook ที่เคยทำไว้เมื่อสิบกว่าปีที่แล้ว แต่ก็ต้องลมไปทั้งระบบ และ code ชุดนี้ถือว่าน่าสนใจ เพราะสามารถทำงานร่วมกับโค้ดภายนอกได้โดยง่าย และ code ก็เป็น open source ที่อ่านง่าย ไม่ยาวเกินไป

ข้อมูล magazine.eduzones.com ใน archive.org

Eduzones Magazine สุดยอดหนังสือด้านการศึกษา

ศูนย์ข่าวการศึกษาแห่งอนาคต ฟรีนิวส์

No photo description available. — https://web.facebook.com/photo/?fbid=124207014280050&set=gm.326011160769343

โดนเพื่อน defend เจอดีเลย

วลีที่ได้ยินบ่อยจนชินหู
“ภาพหนึ่งภาพแทนคำนับพัน”
“A picture is worth a thousand words.”

พบ .. ขอเริ่มต้นการรวบรวมการตอบแบบฟอร์ม

[ความเป็นมานั้น]
เหตุเกิดจาก วันหนึ่ง
ช่วงจวนเจียนจะสอบกลางภาคแล้ว
ก็ต้องออกข้อสอบ และสร้างแบบสอบ
รอบนี้สร้างแบบสอบออนไลน์ผ่าน google form
เพราะระบบนี้มี function มากมายที่รองรับความต้องการ
ผู้เข้าสอบต้องเขียนบนกระดาษ ถ่ายภาพ และปรับแสง
แล้วอัพโหลดขึ้นมาตามระบบ ด้วยชื่อแฟ้มที่เป็นระเบียบ
ระบบจะสำรองกระดาษคำตอบหลายชั้น
จากการทดสอบใช้งานมา 3 รอบ
พบว่าใช้งานได้ดีไม่มีปัญหา สำหรับผู้ที่เข้าซ้อมสอบ

[และแล้วก็พบปัญหา]
คาดไม่ถึง สตั้นไปแป๊ปนึง
เพราะมีเพื่อนที่ต้องการจะ defend ข้อสอบ
ผมก็ส่งข้อมูลลิงค์แบบสอบ google form ให้
เพื่อนบอกว่า “เปิดไม่ได้”
ผมก็ตกใจ อึ้งไปแป๊ปนึง
เพราะทำแบบนี้ทุกปี
คือ นำแบบสอบเดิม มาเลือก Make a copy
เปลี่ยนโจทย์ และชื่อแฟ้ม แล้วสร้าง Shorten URL
จากนั้นก็เขียนโพสต์ชี้แจง พร้อมแนบ link

https://www.thaiall.com/google/form.htm

[ตรวจสอบข้อความแจ้งเตือน]
พบว่า Shorten URL ที่สร้างไว้ ไม่เคยถูกเรียกใช้
ซึ่งแบบฟอร์มนี้ เป็นแบบรับแฟ้มที่อัพโหลด upload
แต่ไม่เคยสร้าง Folder สำหรับแฟ้มคำตอบไว้
จึงต้องคลิ๊ก Resume collecting responses
แปลว่า “ขอเริ่มต้นการรวบรวมการตอบแบบฟอร์ม”

[ปัญหานี้ไม่น่ากลัว]
ถ้าผู้สร้างแบบสอบ คือ owner หรือ editor เป็นคนพบ
ก็เพียงแต่คลิ๊กเพื่อเปิดการใช้ นั่นคือ วิธีแก้ปัญหา
แต่สำหรับผู้เข้าทำแบบสอบ
จะต้องแจ้งให้ ผู้สร้างแบบสอบ เป็นคนแก้ไข
เพราะลำพังสิทธิ์ของผู้เข้าสอบ จะไม่สามารถดำเนินการได้
ที่เล่ามา คือ การอธิบายภาพนี้ครับ .. ok นะ