iT Blog – Page 8 – บล็อกที่มีเนื้อหาเน้นทางด้านเทคโนโลยีสารสนเทศ

เกมสนุกและสร้างสรรค์ #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

แฮนด์ออนเทเบิล (Handsontable)

Handsontable คือ เครื่องมือที่พัฒนาด้วย Javascript ที่ทำงานฝั่งไคลเอนต์ (Client) มีหน้าที่แสดงรายการข้อมูลในรูปของตาราง หรือกระดาษทำการ (Spreadsheet) ที่แสดงผลคล้ายกับ MS Excel ซึ่งนำมาพัฒนาต่อยอดได้ง่าย รองรับการประมวลผลที่ยืดหยุ่น ใช้ข้อมูลรูปแบบ JSON เข้ากันได้กับเฟรมเวิร์ก (Framework) ที่เป็นที่นิยม เช่น Angular, Vue และ React เป็นต้น

พบว่า ถูกนำมาใช้โดย ศูนย์กลางข้อมูลเปิดภาครัฐ (Open Government Data) ภายใต้ชื่อ “data.go.th” เพื่อพรีวิวข้อมูล สำหรับข้อมูลส่วนที่สามารถแสดงได้กลุ่มหนึ่งจากข้อมูลที่มีทั้งหมด 5,843 ชุดข้อมูล (10 เมษายน 2565) สำหรับการใช้งานข้อมูล สามารถศึกษาเพิ่มเติมได้จาก คู่มือการใช้งานระบบศูนย์กลางข้อมูลเปิดภาครัฐ ที่เตรียมเอกสารโดย Witwisit Kesornsit ตั้งแต่รุ่น 0.1 เมื่อ 24 มกราคม 2563 โดย คู่มือฉบับล่าสุด รุ่น 3 เผยแพร่ ธันวาคม 2564 ของ สถาบันนวัตกรรมและธรรมาภิบาลข้อมูล มีข้อมูล preview ในหน้า 13 ที่อธิบายว่า “ระบบจะแสดงการ preview ชุดข้อมูลในแบบตาราง data explorer อย่างอัตโนมัติ” ซึ่งตารางที่ปรากฎในรูป คือ ผลของการใช้ Handsontable นั่นเอง

http://www.thaiall.com/json/

http://www.thaiall.com/jslibrary/

โครงการห้องเรียนที่ดี (Good Classroom) : 50 คลิปวิดีโอ
https://www.thaiall.com/education/indexo.html

ข้อเสนอแนะ และเพิ่มเติม หลังมอง 17 ข้อ ของ ลอย ชุนพงษ์ทอง

ชำแหละ #แผนการศึกษา #จุดจบความคิดสร้างสรรค์ #ใส่กรอบแบบเดียวกัน

ข้อเสนอแนะ และเพิ่มเติม หลังมอง 17 ข้อ ของ ลอย ชุนพงษ์ทอง
#1 รัฐจัดให้เด็กได้เรียนรู้
– ตามความถนัด จัดให้เรียนที่ถนัด (คณิต อังกฤษ จีน เกาหลี เป็นต้น)
– ตามท้องถิ่น จัดให้เรียนตามภูมิปัญญาท้องถิ่น (ประมง เกษตร เลี้ยงสัตว์ สิ่งทอ เป็นต้น)
– ตามความเชื่อ จัดให้เรียนที่เชื่อ (นวัตกรรม ศาสนา วัฒนธรรม เป็นต้น)
– ตามศักยภาพ จัดให้เรียนตามศักยภาพ (ดนตรี กีฬา วิชาการ ค้าขาย เป็นต้น)
#2 รัฐส่งเสริมสนับสนุน และมีช่องทาง
– ให้ภาคเอกชน มีส่วนร่วมจัดการศึกษา (ฝึกงาน สหกิจศึกษา งานพิเศษ เป็นต้น)
– ให้องค์กรท้องถิ่น มีส่วนร่วมจัดการศึกษา (ครูพี่เลี้ยง จิตอาสา ภูมิปัญญา เป็นต้น)
#3 ภาคประชาชนมีสิทธิตรวจสอบ
– ร่วมตรวจสอบความโปร่งใสการใช้งบการเงิน
– ร่วมกันโหวตให้คะแนนที่นำไปสู่การจัดสรรงบประมาณ
#4 ระบุให้ชัดเจนถึงสิ่งที่ทำได้ และทำไม่ได้
– หน้าที่ของพ่อแม่
– หน้าที่ของผู้ปกครอง
– หน้าที่ของเด็ก
– หน้าที่สถานศึกษา
โดย หน้าที่ คือ ข้อปฏิบัติของบุคคลที่จะต้องกระทำให้เกิดประโยชน์เป็นผลดี
#5 ระบุสิทธิ เสรีภาพ ขอบเขต การแสดงออก
– สิทธิของพ่อแม่
– สิทธิของผู้ปกครอง
– สิทธิของเด็ก
– สิทธิของสถานศึกษา
โดย สิทธิ คือ อำนาจอันชอบธรรม ซึ่งบุคคลทุกคนพึงมีพึงได้ โดยไม่ไปเบียดเบียนคนอื่น
#6 ระบุสิทธิ เสรีภาพ และหน้าที่
– สิทธิและหน้าที่ของครูในสถานศึกษา
– สิทธิและหน้าที่ของครูนอกสถานศึกษา
#7 สนับสนุน พ.ร.บ.การศึกษาแห่งชาติ
– แก้ไขกฎกระทรวงต่าง ๆ ให้สอดคล้องกับ พ.ร.บ.ฯ
– จัดคนให้เหมาะสมกับงาน และเป็นตัวแบบที่ดีให้เด็ก

https://www.thaiall.com/student/law.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/

สกรีนเสื้อผ้าขาย กับ xkrit

หนุ่มนักศึกษา สุกฤษฎิ์ มีชื่อเล่นว่า เนม เจ้าของบัญชี MyName’s Xkrit เปิดเฟสบุ๊คเพื่อรับจ๊อบหาทุนการศึกษา ได้แชร์ภาพสินค้า คือ เสื้อยืดวัยรุ่นที่สกรีนภาพวาดรูปเหมือนเจ้าของเสื้อ ด้วยการรับวาดภาพเหมือนของลูกค้า โดยใช้ Illustrator กับ Photoshop สุกฤษฎิ์มีฝีมือวาดภาพได้เยี่ยม เคยเป็นตัวแทนแข่งขันวาดภาพประกวดมาแล้ว มีผลงานระดับมือรางวัล ซึ่งราคาย่อมเยาว์ นัดรับได้ และรายละเอียดอื่นสามารถกำหนดร่วมกันได้ หลังวาดภาพเสร็จแล้ว จะส่งสินค้า และผลงานวาดเป็น QR code ให้ลูกค้า scan เพื่อดาวน์โหลดไว้ใช้งานต่อ เช่น พัฒนาเป็น Line sticker หรือเอาไว้ทำ ภาพโปรไฟร์ ก็ได้ ท่านใดสนใจอุดหนุนน้องนักศึกษา เชิญติดต่อส่งภาพถ่ายต้นแบบให้น้องวาดภาพได้

ทักษะการค้าขายผ่านสื่อสังคม

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

ผมมีเพื่อนสายเดฟ ที่เราทำงานคล้ายกันมาก วันหนึ่งเค้าส่งคำถามเข้ามาทางไลน์ เรื่อง 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

ห้องเรียนจักรวาลนฤมิต

การเรียนการสอนในห้องเรียนจักรวาลนฤมิตอาจเป็นจริงในเร็ว ๆ นี้
พบว่า ในงาน MWC 2016 นั้น Mark Zuckerberg ได้แสดงให้เห็นชัดเจนว่า “VR is the Next Platform” เป็นภาพที่ถูกตั้งคำถามว่า “นี่เปรียบเสมือนมโนภาพอนาคตของเรา” (allegory = การสมมติ) ผู้ร่วมประชุมได้ใช้อุปกรณ์ Gear VR แบบสวมหัว เข้าสู่โลกเสมือนจริง (22 ก.พ.2016) ซึ่ง Facebook ได้ซื้อ Oculus (25 มี.ค.2014) ผู้นำเทคโนโลยี VR มูลค่าประมาณ 2 พันล้านเหรียญสหรัฐฯ พัฒนาต่อยอดเป็น Metaverse ให้ทุกคนเข้าไปใช้ชีวิตกันในโลกเสมือนจริงได้ใกล้กว่าที่เคย คำว่า ห้องเรียนจักรวาลนฤมิต คือ การจัดการเรียนการสอนที่ห้องเรียนจะมีสภาพแวดล้อมของโลกเสมือนจริง

ห้องประชุมจักรวาลนฤมิต

https://www.blognone.com/node/78174

https://www.cbsnews.com/news/mark-zuckerberg-vr-virtual-reality-headset-photo/

https://www.theverge.com/2016/2/22/11087890/mark-zuckerberg-mwc-picture-future-samsung