Category: เทคโนโลยีรอบตัวเรา

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

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

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

What is the key?


ซึ่ง 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

สีไล่ระดับ ถ้าทำใน shape จะไม่พบปัญหา

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

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

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

ipages desktop
ipages desktop

ปัญหา คือ คลิ๊กรายการแล้ว
แต่ไม่มีการตอบสนองจากภายในแคตตาล็อก
เข้าไปตรวจ 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

โดนเพื่อน 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 นะ

Header background ของ Google form

ไทย และอีก 4 จังหวัดของไทยติดอันดับประเทศระบบนิเวศสตาร์ทอัพดีที่สุดในโลก

ข่าว 8 ธ.ค. 2564 สำนักงานนวัตกรรมแห่งชาติ (องค์การมหาชน) หรือ NIA เผยข้อมูลจากการจัดอันดับดัชนีระบบนิเวศทางสตาร์ทอัพโลก ประจำปี 2564 (Global Startup Ecosystem Index 2021) ซึ่งเว็บไซต์ StartupBlink ศูนย์กลางข้อมูลด้านระบบนิเวศนวัตกรรมทั่วโลกได้มีการ จัดอับดับ 100 ประเทศ และ 1,000 เมือง ที่มีระบบนิเวศทางสตาร์ทอัพที่ดีที่สุดของโลก
พบว่า กรุงเทพฯ คว้าอันดับ 71 เมืองที่เอื้อต่อการทำสตาร์ทอัพจาก 1,000 เมืองทั่วโลก
ส่วนเชียงใหม่อันดับ 397 ภูเก็ตอันดับที่ 442 และพัทยาอันดับที่ 833 เป็นจังหวัดแจ้งเกิดสตาร์ทอัพระดับโกลบอล

Ranking Methodology (For Top Ecosystems)
– Overall Ranking (The overall global ecosystem ranking is a weighted average of the following factor scores:)


ปัจจัยหลักในการประเมินของเว็บไซต์ StartupBlink.com มีดังนี้

  1. ปัจจัยเชิงปริมาณ ประกอบด้วย
    • จำนวนสตาร์ทอัพ
    • จำนวนโคเวิร์คกิ้งสเปซ
    • จำนวนโปรแกรมเร่งการเติบโต
    • จำนวนกิจกรรมพบปะของสตาร์ทอัพ
  2. คุณภาพของสตาร์ทอัพ และสิ่งอำนวยความสะดวก ประกอบด้วย
    • จำนวนผู้ใช้งานสตาร์ทอัพ
    • จำนวนบริษัท/สาขาของบริษัทที่ดำเนินงานด้านการวิจัยและเทคโนโลยี
    • จำนวนสาขาของบริษัทข้ามชาติ ปริมาณการลงทุน
    • จำนวนลูกจ้าง
    • จำนวนสตาร์ทอัพระดับ Unicorns, Exits และ Pantheon
    • จำนวนสตาร์ทอัพที่เป็นอินฟลูเอนเซอร์ระดับโลก
    • จำนวนเหตุการณ์เกี่ยวกับสตาร์ทอัพระดับโลก
  3. สภาพแวดล้อมทางธุรกิจ ประกอบด้วย
    • ความสะดวกในการทำธุรกิจ
    • ความเร็วอินเทอร์เน็ต
    • อิสระในการใช้อินเทอร์เน็ต
    • การลงทุนด้านงานวิจัย
    • ความพร้อมของเทคโนโลยีด้านการบริการ
    • จำนวนผู้ถือสิทธิบัตรต่อประชากรทั้งหมด
    • ความเชี่ยวชาญด้านภาษาอังกฤษ
      https://www.thaiall.com/mis/startup.htm

site icon ของบล็อกนี้ ปรับ ก.พ.65

WordPress มี Site icon ในหัวข้อ Site Identity ให้เลือก upload ภาพประจำไซต์ฺได้ ซึ่งบล็อกนี้เลือกใช้ Twenty Sixteen สามารถกำหนดภาพได้
ประกอบกับช่วงนี้เตรียมตัวอย่างชุดภาพที่วาดด้วย Vector โดยเลือกวาดตัวเองอย่างง่าย สวมเสื้อหลากสี ด้วย Powerpoint แล้วส่งออกเป็น png เพื่อนำไปช้งาน ซึ่งภาพใน Powerpoint กำหนด slide ไว้ 6 ซม * 6 ซม จะุได้ภาพส่งออกเป็น 227px * 227 px โดย 37.83 = 1 ซม. ดังนั้นภาพ 10 ซม. * 10 ซม. ก็จะได้ขนาด 378px * 387px ภาพนี้ชื่อ face_01 เป็น vector ถือเป็นเซตแรกที่ได้วาดภาพคน ไม่ได้สวยใส่ หล่อเหล่า จมูกโด่ง คางแหลม ๆ แต่ผมก็ชอบในแบบของผม จึงเลือกมาเป็น site icon ของบล็อกนี้ ขนาดต้นฉบับที่ส่งออกจาก powerpoint มีขนาด 227px แต่ wordpress ต้องการ 512px จึงใช้ irfanview ทำการ resize เป็น 512 px แล้วจึงอัพโหลดเข้าไปในบล็อก

face_01