performance ของเว็บเพจ บน pagespeed insights

เว็บเพจหน้านี้ ยกร่างโค้ดเว็บเพจขนาดเล็ก ชื่อ index90_100 เพื่อทดสอบให้ผ่านการประเมินตามเงื่อนไข Diagnose Performance Issue ของ pagespeed insights ทั้ง 4 หัวข้อ คือ Performance , Accessibility , Best practice และ SEO ไดคะแนน 100 ทั้ง 4 หัวข้อ โดยมีการปรับแก้ ดังนี้ 1) ปรับลดขนาดแฟ้ม .css ให้มีขนาดเล็กที่สุด 2) ปรับ layout แก้ปัญหา layout shift 3) ใช้ภาพ .webp แทน .jpg 4) ลดขนาดภาพ และเพิ่มความคมชัด และรักษา ratio ให้เท่าเดิม 5) ยกเลิกการโหลด font, css, js จากภายนอกทั้งหมด ซึ่งอิงกับโค้ดเดิม คือ การปรับแก้โค้ดเว็บเทมเพจเดิมในรุ่น 9.0 ที่เคยได้คะแนน 100 มาก่อน ซึ่งการลดขนาดแฟ้มและแปลงเป็น .webp เลือกใช้โปรแกรม irfanview เนื่องจากโปรแกรมมีขนาดเล็ก ทำงานได้รวดเร็ว และใช้งานง่าย

เว็บเพจหน้านี้ ประกาศ style ก่อน body
จึงเขียนโค้ดแบบ responsive web design และใช้ top bar menu แบบแยก desktop กับ mobile แล้วไม่กระทบคะแนน pagespeed

เว็บเพจหน้านี้ มีการเรียกใช้ bootstrap.min.css เมื่อส่งตรวจสอบกับ pagespeed insights พบว่า การเรียกใช้ bootstrap โดยตรงก่อนเปิด tag body จะทำให้คะแนนได้ไม่เต็ม 100 เนื่องจากต้องใช้เวลาระยะหนึ่ง ในการ Load แฟ้มจากภายนอก ซึ่งวิธีหนึ่งในการแก้ไขการ Load bootstrap คือ เขียน function ใน javascript ไว้ท้าย script เพื่อตรวจสอบ EventListener ว่าเป็น load หรือ onload มีผลให้ การแสดงผลหน้าแรก ผ่านการตรวจสอบของ pagespeed เสร็จสิ้นลง จึงจะมีการ load bootstrap ทำให้เงื่อนไขการโหลด bootstrap ไม่มีผลต่อคะแนน pagespeed insights

ส่วนการ load font .ttf นั้น เว็บเพจหน้านี้ เลือกใช้ font-display:optional; กับทุกฟอนต์ที่นำมาใช้ ซึ่งมีผลให้ ระยะเวลาในการ load font มาใช้งานนั้น แน่ใจได้ว่าจะไม่เกิดขึ้นใน 100ms แรก หรือเป็นการโหลดแบบ background with low priority ทำให้มั่นใจได้ว่า pagespeed insights จะตรวจสอบจนจบแล้ว การโหลดฟอนต์มาใช้จึงจะเกิดขึ้น ต่างกับ font-display:swap; ที่ font จะถูก render ทันทีเมื่อมีการโหลด และพร้อมแสดงฟอนต์ ทำให้เกิดปัญหา layout shift ขึ้นได้ และคะแนนส่วนนี้ก็จะไม่ได้ 100 คะแนนเต็ม

Webpage
Bootstrap

https://thaiall.com/web2/index100.htm

https://thaiall.com/web2/index90_100.htm

การเรียนรู้การเขียน SEO คู่มือที่ครอบคลุมในการสร้างบทความที่ติดอันดับบน Google

ในโลกที่เต็มไปด้วยเทคโนโลยี การเขียนบทความที่มีอันดับสูงในหน้าผลลัพธ์ของเครื่องมือค้นหา (SERP) ของ Google ถือเป็นทักษะที่เป็นที่ต้องการ การเขียน SEO ที่มีประสิทธิภาพไม่เพียงแต่ปรับปรุงการมองเห็นเท่านั้น แต่ยังดึงดูดปริมาณการเข้าชมทั่วไป เพิ่มการเข้าถึงและผลกระทบของเนื้อหาของคุณ ในคู่มือที่ครอบคลุมนี้ เราจะสำรวจองค์ประกอบสำคัญของการเขียนที่เป็นมิตรต่อ SEO ตั้งแต่การวิจัยคำหลักและโครงสร้างเนื้อหาไปจนถึงการเพิ่มประสิทธิภาพในหน้าและแนวโน้ม SEO ล่าสุด ด้วยการเรียนรู้เทคนิคเหล่านี้ คุณสามารถสร้างบทความที่ไม่เพียงแต่โดนใจผู้ชมของคุณ แต่ยังไต่อันดับใน Google อีกด้วย

ทำความเข้าใจ SEO และความสำคัญของ SEO

การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO) คือแนวทางปฏิบัติในการเพิ่มประสิทธิภาพเนื้อหาออนไลน์เพื่อปรับปรุงการมองเห็นในผลลัพธ์ของเครื่องมือค้นหา โดยเฉพาะ Google เป้าหมายคือการทำให้เนื้อหาของคุณมีความเกี่ยวข้องและดึงดูดทั้งเครื่องมือค้นหาและผู้ใช้มากขึ้น ซึ่งท้ายที่สุดแล้วจะเป็นการกระตุ้นการเข้าชมทั่วไปให้กับเว็บไซต์ของคุณ

ความสำคัญของ SEO

SEO ช่วยให้เนื้อหาของคุณปรากฏอย่างเด่นชัดในผลการค้นหา เพิ่มการมองเห็นให้กับผู้ใช้ที่ค้นหาข้อมูลที่เกี่ยวข้อง
การอยู่ในอันดับที่สูงบน Google ช่วยให้มั่นใจได้ว่าการเข้าชมที่เกิดขึ้นเองจะไหลเวียนอย่างต่อเนื่อง ลดการพึ่งพาการโฆษณาที่เสียค่าใช้จ่าย และเพิ่มโอกาสในการเข้าถึงกลุ่มเป้าหมายของคุณ
เนื้อหาที่ได้รับการจัดอันดับที่ดีมักจะถูกมองว่ามีความน่าเชื่อถือและน่าเชื่อถือจากผู้ใช้มากกว่า ซึ่งมีส่วนทำให้เกิดชื่อเสียงทางออนไลน์ในเชิงบวก และในปัจจุบันมีบริษัท Digital Marketing Agency รับทำ SEO คุณภาพดีจำนวนมากเพื่อตอบสนองการเติบโตของโลกธุรกิจออนไลน์

การเลือกคำค้นหาหลักที่เหมาะสม

  • ความเกี่ยวข้อง: เลือกคำหลักที่เกี่ยวข้องโดยตรงกับหัวข้อบทความของคุณ ใช้เครื่องมือเช่น Google เครื่องมือวางแผนคำหลัก, SEMrush หรือ Ahrefs เพื่อระบุคำหลักที่เกี่ยวข้องซึ่งมีปริมาณการค้นหาสูง
  • คำหลักหางยาว: รวมคำหลักหางยาวซึ่งมีความเฉพาะเจาะจงมากขึ้นและมีการแข่งขันที่ต่ำกว่า คำหลักหางยาวมักจะตอบสนองผู้ใช้ที่มีจุดประสงค์ในการค้นหาที่ชัดเจนกว่า
  • จุดประสงค์ของผู้ใช้: เข้าใจจุดประสงค์ของผู้ใช้ที่อยู่เบื้องหลังคำค้นหา พวกเขากำลังมองหาข้อมูล ผลิตภัณฑ์ บทวิจารณ์ หรือวิธีแก้ปัญหาอยู่ใช่ไหม? ปรับแต่งคีย์เวิร์ดของคุณให้ตรงกับจุดประสงค์ของผู้ใช้

การวางตำแหน่งของคำค้นหาหลัก

  • แท็กชื่อ: รวมคำหลักของคุณไว้ในแท็กชื่อเรื่องของบทความ ทำให้ทั้งผู้ใช้และเครื่องมือค้นหาทราบอย่างชัดเจนว่าเนื้อหาของคุณเกี่ยวกับอะไร
  • โครงสร้าง URL: เพิ่มประสิทธิภาพ URL ของบทความของคุณโดยรวมคำหลักที่เกี่ยวข้อง โครงสร้าง URL ที่สะอาดและกระชับช่วยเพิ่มประสบการณ์ผู้ใช้และความเข้าใจเครื่องมือค้นหา
  • แท็กหัวเรื่อง: รวมคำหลักไว้ในแท็กหัวเรื่อง (H1, H2, H3 ฯลฯ ) เพื่อจัดโครงสร้างเนื้อหาของคุณและส่งสัญญาณถึงความสำคัญของส่วนเฉพาะต่อเครื่องมือค้นหา

การสร้างเนื้อหาคุณภาพสูง

  • สร้างเนื้อหาที่ครอบคลุมและให้ข้อมูลที่ครอบคลุมหัวข้อที่เลือกอย่างทั่วถึง Google มีแนวโน้มที่จะสนับสนุนบทความที่ยาวและมีการวิจัยอย่างดี
  • สร้างสรรค์เนื้อหาที่ดึงดูดผู้อ่าน ส่งเสริมการมีปฏิสัมพันธ์ และมอบคุณค่า ตัวชี้วัดการมีส่วนร่วมของผู้ใช้ เช่น เวลาบนหน้าเว็บและอัตราตีกลับ เป็นปัจจัย SEO ที่สำคัญ
  • เสนอมุมมองหรือมุมที่ไม่ซ้ำใครในหัวข้อ โดดเด่นจากคู่แข่งด้วยการให้ข้อมูลเชิงลึกที่สดใหม่หรือนำเสนอข้อมูลในลักษณะที่โดดเด่น

การเพิ่มประสิทธิภาพ SEO บนหน้าเว็บไซต์
คำอธิบาย Meta และ Meta Tags

คำอธิบาย Meta ที่น่าสนใจ เขียนคำอธิบาย Meta ที่น่าสนใจซึ่งแสดงถึงเนื้อหาของคุณอย่างถูกต้อง และดึงดูดผู้ใช้ให้คลิก รวมคำหลักที่เกี่ยวข้องแต่เน้นที่การให้คุณค่า

ข้อความแสดงแทนรูปภาพ ปรับข้อความแสดงแทนรูปภาพให้เหมาะสมด้วยวลีที่สื่อความหมายและเต็มไปด้วยคำสำคัญ สิ่งนี้จะปรับปรุงการเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น และช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหารูปภาพ

Meta Tags: ใช้ Meta Tags ที่เกี่ยวข้องเพื่อจัดหมวดหมู่และอธิบายเนื้อหาของคุณ แม้ว่าจะไม่ส่งผลกระทบมากเท่าที่เคยเป็นมา แต่เมตาแท็กยังคงสามารถช่วยทำความเข้าใจเครื่องมือค้นหาได้

การเชื่อมโยงภายในและภายนอก

ลิงค์ภายใน: รวมลิงค์ภายในไปยังหน้าอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ของคุณ สิ่งนี้ช่วยให้เครื่องมือค้นหาเข้าใจลำดับชั้นของเนื้อหาของคุณและสนับสนุนให้ผู้ใช้สำรวจไซต์ของคุณมากขึ้น

ลิงก์ภายนอก: รวมลิงก์ภายนอกที่เชื่อถือได้ไปยังแหล่งที่เชื่อถือได้ภายในเนื้อหาของคุณ สิ่งนี้จะเพิ่มความน่าเชื่อถือให้กับบทความของคุณและเป็นการส่งสัญญาณไปยังเครื่องมือค้นหาว่าเนื้อหาของคุณได้รับการวิจัยอย่างดี

การเพิ่มประสิทธิภาพข้อความ Anchor: เมื่อใช้ Anchor Text สำหรับลิงก์ ควรทำให้คำอธิบายและเกี่ยวข้องกับเนื้อหาที่เชื่อมโยง หลีกเลี่ยงวลีทั่วไป เช่น “คลิกที่นี่” และใช้คำหลักที่ให้บริบทแทน

การเพิ่มประสิทธิภาพมือถือ

ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณมีการออกแบบที่ตอบสนองซึ่งปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกัน Google จัดลำดับความสำคัญของเว็บไซต์ที่เหมาะกับมือถือในการจัดอันดับ ทำให้การเพิ่มประสิทธิภาพมือถือมีความสำคัญ เพิ่มประสิทธิภาพความเร็วในการโหลดเว็บไซต์ของคุณ โดยเฉพาะบนอุปกรณ์มือถือ ผู้ใช้และเครื่องมือค้นหาชอบหน้าที่โหลดเร็วเพื่อประสบการณ์โดยรวมที่ดีขึ้น สร้างสรรค์เนื้อหาที่สามารถอ่านและเข้าถึงได้ง่ายบนอุปกรณ์มือถือ พิจารณาประสบการณ์ผู้ใช้ในหน้าจอขนาดต่างๆ เมื่อออกแบบและจัดรูปแบบบทความของคุณ

แนวทางปฏิบัติที่ดีที่สุดด้านเทคนิค SEO
site map XML

  • สร้างแผนผังไซต์ XML: สร้างแผนผังไซต์ XML เพื่อให้เครื่องมือค้นหาเห็นภาพรวมที่ครอบคลุมเกี่ยวกับโครงสร้างเว็บไซต์ของคุณ ช่วยให้โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาจัดทำดัชนีเนื้อหาของคุณได้อย่างมีประสิทธิภาพมากขึ้น
  • ส่งไปยัง Search Console: ส่งแผนผังไซต์ XML ของคุณไปที่ Google Search Console เพื่อให้แน่ใจว่า Google ทราบทุกหน้าในไซต์ของคุณ อัปเดตและส่งแผนผังไซต์ของคุณอีกครั้งเป็นประจำเมื่อมีการเพิ่มเนื้อหาใหม่

ไฟล์ Robots.txt

  • ปรับแต่ง Robots.txt ของคุณ: ใช้ไฟล์ robots.txt เพื่อแนะนำโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาเกี่ยวกับวิธีการนำทางและจัดทำดัชนีเว็บไซต์ของคุณ ไฟล์นี้สามารถป้องกันการจัดทำดัชนีของหน้าหรือไดเร็กทอรีเฉพาะเจาะจง ซึ่งช่วยให้คุณควบคุมสิ่งที่ปรากฏในผลการค้นหาได้
  • หลีกเลี่ยงการบล็อกหน้าสำคัญ: โปรดใช้ความระมัดระวังเมื่อใช้ไฟล์ robots.txt เพื่อหลีกเลี่ยงการบล็อกหน้าสำคัญจากการจัดทำดัชนีโดยไม่ได้ตั้งใจ ตรวจสอบและอัปเดตไฟล์เป็นประจำตามความจำเป็น

การเข้ารหัส HTTPS

  • รักษาความปลอดภัยเว็บไซต์ของคุณด้วย HTTPS: ใช้การเข้ารหัส HTTPS บนเว็บไซต์ของคุณเพื่อให้แน่ใจว่ามีการเชื่อมต่อที่ปลอดภัยระหว่างผู้ใช้และเซิร์ฟเวอร์ของคุณ Google ถือว่า HTTPS เป็นปัจจัยในการจัดอันดับ และไซต์ที่ปลอดภัยจะสร้างแรงบันดาลใจให้ผู้ใช้ไว้วางใจมากขึ้น
  • ใบรับรอง SSL: รับใบรับรอง SSL จากผู้ออกใบรับรองที่มีชื่อเสียงเพื่อเปิดใช้งาน HTTPS บนไซต์ของคุณ ผู้ให้บริการเว็บโฮสติ้งหลายรายเสนอใบรับรอง SSL ฟรี

อัปเดตอยู่เสมอด้วยเทรนด์ SEO

ติดตามข่าวสารเกี่ยวกับการอัปเดตอัลกอริทึมหลักของ Google ซึ่งอาจส่งผลกระทบอย่างมากต่ออันดับการค้นหา ตรวจสอบประกาศอย่างเป็นทางการและแหล่งข่าว SEO ที่มีชื่อเสียงเป็นประจำเพื่อดูข้อมูลล่าสุด และปรับตัวให้เข้ากับการเปลี่ยนแปลงในอัลกอริธึมการค้นหา ทำความเข้าใจว่าการอัปเดตอาจส่งผลต่อเนื้อหาของคุณอย่างไร และปรับกลยุทธ์ SEO ของคุณให้สอดคล้องกัน

การเพิ่มประสิทธิภาพเนื้อหาสำหรับการค้นหาด้วยเสียงโดยผสมผสานภาษาธรรมชาติและคำสำคัญในการสนทนา การค้นหาด้วยเสียงมักจะเลียนแบบภาษาพูดอย่างใกล้ชิดมากกว่าข้อความค้นหาที่พิมพ์ และให้ความสนใจกับ Core Web Vitals ซึ่งเป็นชุดสัญญาณประสบการณ์ผู้ใช้ที่ Google ถือว่ามีความสำคัญต่อการจัดอันดับ ซึ่งรวมถึงตัวชี้วัดต่างๆ เช่น ความเร็วในการโหลดหน้าเว็บ การโต้ตอบ และความเสถียรของภาพ

เนื่องจากมีการใช้อุปกรณ์เคลื่อนที่เพิ่มมากขึ้น Google จึงได้เปลี่ยนมาใช้การจัดทำดัชนีเพื่ออุปกรณ์เคลื่อนที่เป็นอันดับแรก ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณเหมาะกับมือถือและมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมบนอุปกรณ์ต่างๆ

บทสรุป

การสร้างบทความที่ติดอันดับบน Google เกี่ยวข้องกับการผสมผสานระหว่างการวางแผนเชิงกลยุทธ์ การสร้างเนื้อหาที่มีคุณภาพ และการปรับตัวอย่างต่อเนื่องให้เข้ากับแนวโน้ม SEO ที่เปลี่ยนแปลงไป ด้วยการทำความเข้าใจความซับซ้อนของการวิจัยคำหลัก โครงสร้างเนื้อหา การเพิ่มประสิทธิภาพในหน้า และแนวทางปฏิบัติด้านเทคนิค SEO ที่ดีที่สุด คุณสามารถยกระดับงานเขียนของคุณให้ตรงกับความต้องการของเครื่องมือค้นหาและผู้ใช้ได้ รับข่าวสารเกี่ยวกับการพัฒนา SEO ล่าสุด ปรับกลยุทธ์ของคุณตามนั้น และสร้างเนื้อหาคุณภาพสูงและเกี่ยวข้องอย่างสม่ำเสมอเพื่อให้แน่ใจว่าบทความของคุณไม่เพียงแต่จัดอันดับ แต่ยังให้คุณค่าแก่ผู้ชมของคุณในโลกดิจิทัลที่พัฒนาอยู่ตลอดเวลา ด้วยแนวทางที่ถูกต้อง บทความของคุณจะสามารถขึ้นสู่อันดับต้นๆ ของผลการค้นหา รวบรวมการมองเห็นที่เพิ่มขึ้น และดึงดูดปริมาณการเข้าชมทั่วไปมายังเว็บไซต์ของคุณ

ช่องทางติดต่อ:
Website: https://asiasearch.co.th
Facebook: https://www.facebook.com/asiasearch
Linkedin: https://www.linkedin.com/company/asia-search-solutions/
Line: https://page.line.me/729bcdpc

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

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

สรุปสร้างข้อสอบฉบับย่อ รุ่น 641 อัตนัยทั้งหมด

Folder ใน Google drive

  1. เข้า forms.google.com
  2. คลิ๊ก “+ Blank form” เพื่อสร้างข้อสอบ
  3. เปลี่ยน Untitled form เป็น 641_test100_M01
  4. เปลี่ยน Form description เป็นคำถาม เช่น แมวต่างกับสุนัขอย่างไร
    และโปรดส่งแฟ้มคำตอบที่ถูกเปลี่ยนชื่อแล้ว เช่น 64xxx-test100-M01.jpg
    และเขียนรหัส ชื่อสกุลที่มุมบนขวาของกระดาษคำตอบทุกแผ่น
  5. เปลี่ยนคำถามจาก Multiple choice เป็น File upload
  6. เปลี่ยน Untitled Question เป็น ข้อที่ 1
  7. กำหนด Allow only specific file types = Image
  8. กำหนด Maximum number of files = 1
  9. กำหนด Maximum file size = 10MB
  10. กำหนด Required = Yes
  11. หัวข้อ Settings
  • General, Collect emails = checked
  • General, Restrict to users in [organization] = unchecked
  • General, Limit to 1 response = unchecked
  • General Maximum size of all files uploaded = 10GB (1GB)
  • Presentation, Show link to submit another response = unchecked
  • Save
  1. Send, Link, Shorten URL, Copy,
  2. คลิก … เลือก Make a copy
  3. พบข้อใหม่ต้องคลิ๊ก Restore folder เพื่อสร้าง folder
  4. ในคำถามก็คลิ๊ก Restore folder เพื่อสร้าง folder
  5. ถ้าเสร็จสิ้นคลิ๊ก icon กลับเข้า Google Forms

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

ผู้ดูแลองค์กรเปิดสิทธิ์เปลี่ยนพื้นหลังด้วยภาพภายนอกบน google meet ได้

อนุญาตให้ผู้ใช้เลือกภาพจากภายนอกได้

Google Meet คือ เว็บแอพพลิเคชั่น (Web Application) ที่ทำงานบนเว็บบราวเซอร์ (Web Browser) เพื่อใช้บริการการประชุมออนไลน์ที่เปิดให้เชิญผู้ร่วมประชุมผ่านลิงค์ (Link) ที่มีรหัสห้องประชุม โดยไม่จำเป็นต้องมีบัญชีของ Gmail.com ในการเข้าร่วมประชุม เป็นหนึ่งในบริการที่สนับสนุนการทำงานในองค์กร บริการนี้อยู่ในชุดโปรแกรม G Suite (Bussiness หรือ Education) ที่ผูกกับโดเมนเนม (Domain name) และอีเมล (Email) ขององค์กร ซึ่งองค์กรที่จะใช้บริการ G Suite ต้องมีโดเมนเนม เพื่อสมัครใช้งาน และผูก MX (Mail Exchange) เข้ากับบริการของ gmail.com ส่วนบนสมาร์ทโฟนสามารถติดตั้งแอพพลิเคชั่น Hangouts Meet การเข้าใช้ระบบ (Sign in) โดยบัญชีที่มีสิทธิ์ใช้งาน G Suite จะสามารถเปิดห้องประชุม เชิญด้วยลิงค์ หรือส่งอีเมลเชิญ (Invite) เพื่อนทั้งในและนอกองค์กร ให้เข้าร่วมประชุมได้ ถ้าไม่มีสิทธิ์ก็จะทำได้เพียงเข้าร่วมประชุมในฐานะผู้เข้าร่วม (Guest) 

ผู้ดูแลระบบ google workspace ที่ได้รับคำร้องจากสมาชิก ขอเปิดสิทธิ์ในการใช้ background ของตนเอง ในบริการ Google meet สามารถพิจารณาได้ว่า จะเปิดให้บริการ หรือไม่เปิด ถ้าพิจารณาแล้วเห็นว่าเป็นประโยชน์ สามารถเข้าไปกำหนดการเปิดสิทธิ์นี้ได้ อ่านเรื่องนี้จาก workspaceupdates.googleblog.com พบว่า ผู้พัฒนาได้เพิ่มความสามารถสำหรับ Admin ในการสั่งเปิด หรือไม่เปิด การเปลี่ยนพื้นหลังใน Google meet ของ OU (Organizational unit) ซึ่งสรุปขั้นตอนในการสั่งเปิด หรือไม่เปิด ได้ดังนี้ 1) เปิด workspace.google.com 2) เลือก Admin console (admin.google.com) 3) เลือก Apps จากเมนูด้านซ้าย 4) เลือก Google workspace 5) พบแอปพลิเคชันจำนวนมาก เลือก Google Meet 6) เลือก Background 7) เลือก Edit หัวข้อ Background แล้วทำเครื่องหมาย check หน้าตัวเลือก Let users select custom images อันที่จริง มีตัวเลือกอีกมากใน worspace ที่ถูกปิด ทำให้สมาชิกใช้งานบริการได้ไม่ครบ ซึ่งบริการหนึ่งที่น่าสนใจ และเคยเปิดไปแล้ว คือ youtube.com ซึ่งผู้ดูแลสามารถเลือกเปิดหรือไม่เปิดได้

บน personal account เปลี่ยนได้ ไม่ต้องรอ admin

http://www.thaiall.com/google/meet.htm

การสร้างแบบสอบออนไลน์

15 ขั้นตอน การสร้างแบบสอบออนไลน์อัตนัยเขียนมือ มีคำถามข้อเดียว แล้วให้ upload file
ตัวอย่างนี้เป็นแบบสอบจำนวน 3 ข้อ คือ test100-01 และ test100-02 และ test100-03

  1. เริ่มต้นด้วยการ login เข้าบัญชี gmail.com ซึ่งผู้สร้างข้อสอบ และผู้ทำข้อสอบ ต่างต้องมีบัญชีประจำตัวของตนเอง
  2. เริ่มด้วย ผู้สร้างแบบสอบ เข้าไปที่ google form, คลิ๊ก blank form, เปลี่ยน untitled form เป็น “test100-01” ซึ่งชื่อนี้มีผลต่อชื่อ folder ที่ใช้จัดเก็บแฟ้มข้อสอบใน google drive สามารถเปลี่ยนชื่อได้ตลอดเวลา แม้จะมีผู้ทำข้อสอบไปแล้วก็ไม่ได้รับผลกระทบ เพราะระบบจะเปลี่ยนชื่อ folder ให้ทันทีที่เปลี่ยนชื่อคำถาม หรือชื่อฟอร์ม
  3. แบบสอบชุดนี้ วางแผนให้เป็นแบบ 1 form สำหรับ 1 คำถาม และตอบคำถามด้วยการอัพโหลดภาพเอกสาร ดังนั้นใต้ title form จึงเลือกที่จะพิมพ์โจทย์ยาวที่ละเอียด เช่น “1. จงบอกเล่าถึง วิชาที่ชอบเรียน และให้เหตุผลประกอบ มาพอเข้าใจ ซึ่งไม่ควรต่ำกว่า 3 บรรทัด และตั้งชื่อแฟ้มให้สอดคล้องกับรหัสนิสิต ชื่อวิชา และคำถาม เช่น 64xxx-test100-01.jpg”
  4. พบคำถาม (First default question) ที่มี radio box มารอนั้น ได้เปลี่ยนเป็น File upload แล้วมีคำถามว่า Let respondants upload files to drive ขึ้นมา ให้คลิ๊กตอบว่า Continue
  5. คำถามนั้น กำหนดสั้น ๆ ว่า “คำถามที่ 1” เพราะชื่อคำถามจะถูกใช้เป็นชื่อ sub folder ภายใต้ folder ชื่อ “test100-01”
  6. คลิ๊กตัวเลือกเปิด option : Allow only specific file types แล้วคลิ๊ก Image เพื่อรับเฉพาะแฟ้มภาพที่ผู้ตอบคำถามต้องส่ง ถ้าจะให้รับได้หลายภาพก็เลือก Maximum numbers of files เป็น 2 หรือมากกว่า
  7. ผลงานภาพที่ผ่านการ crop และแต่งให้คมชัดแล้ว ไม่ควรมีขนาดเกิน 10 MB ซึ่งเป็นค่า default หากลดลงมาจะมี 1 MB ให้เลือก
  8. เลือกเปิด Required เพราะต้องการบังคับอัพโหลดแฟ้มก่อน จึงจะกดปุ่ม submit ได้
  9. ชวนมองกล่อง View folder ขณะสร้างคำถามรับการอัพโหลด เพื่อใช้ดูรายการแฟ้มที่ผู้ตอบส่งเข้ามา พบว่า ขณะสร้างนี้ ในห้องนั้นจะว่างเปล่า เปิดเข้าห้อง “คำถามที่ 1 (File responses)” จะไม่พบอะไร
  10. คลิ๊ก settings ที่เป็นสัญลักษณ์ฟันเฟืองที่มุมบนขวา ในแท็บ General ให้คลิ๊ก collect emails กรณีใช้บัญชีองค์กรให้ยกเลิกการเลือก Restrict to users in [your company] and its trusted organizations เพื่อเปิดให้ผู้ใช้บัญชีบุคคลของ @gmail.com สามารถทำแบบฟอร์มได้
  11. พบตัวเลือก Maximum size of all files uploaded: 1GB ซึ่งหมายความว่าผู้ตอบแบบสอบถามอัพโหลดแฟ้มเข้ามาในแบบสอบแฟ้มนี้ รวมกันแล้วต้องมีขนาดไม่เกิน 1GB (เลือกขยายได้ถึง 1TB) เช่น มีสมาชิก 1000 คน ก็ส่งแฟ้มได้ไม่เกินคนละ 1 MB หรือมีสมาชิก 100 คน ก็ส่งแฟ้มได้ไม่เกินคนละ 10 MB เป็นต้น
  12. ในแท็บ Presentation ไม่ได้คลิ๊ก Show progress bar หรือ Suffle question order เนื่องจากสร้างคำถามเพียงข้อเดียว ต่อหนึ่งแบบฟอร์ม แล้วให้ uncheck : Show link to submit another response เพราะไม่จำเป็นต้องทำแบบฟอร์มอีกครั้งหลัง submit ไปแล้ว
  13. คลิ๊ก Send แล้วเลือก Shorten URL ของคำถามที่ 1 เพื่อนำลิงค์ไปส่งให้กลุ่มเป้าหมาย 72AX7TaKp735o6rm9 (ส่งซ้ำได้ เพราะไม่ได้ lock ครั้งเดียว)
  14. ในแบบฟอร์ม คลิ๊ก 3 จุด มีตัวเลือก Make a copy เมื่อได้แล้วก็เปลี่ยนชื่อแฟ้ม และคำถามใหม่ มีปุ่มให้เลือก restore ก็คลิ๊กทุกครั้ง เพื่อสร้าง folder สำหรับคำถามใหม่ ตัวอย่างคำถาม “2. จงบอกเล่าถึง หนังสือที่ชอบอ่าน และให้เหตุผลประกอบ มาพอเข้าใจ ซึ่งไม่ควรต่ำกว่า 3 บรรทัด และตั้งชื่อแฟ้มให้สอดคล้องกับรหัสนิสิต ชื่อวิชา และคำถาม เช่น 64xxx-test100-02.jpg” จากนั้นก็แชร์และรับลิงค์ คือ v13xs3yzjVEcUhHx8 หรือคำถามที่ 3 ที่ NNUN85pckVbXMMCc8
  15. ผู้ออกข้อสอบสามารถแชร์โฟลเดอร์ที่เก็บคำตอบ ของผู้ตอบที่ส่งแฟ้มภาพผ่าน google form จากคำถามที่ 1 แบบ anyone เพื่อใช้ตรวจสอบอีกทางหนึ่งว่ามีแฟ้มเข้ามาอย่างไร แล้ว preview ได้ หรือจะเข้าไปที่ response ของ form ซึ่งตรวจสอบได้สะดวกเช่นกัน drive.google.com/drive/folders
หน้าตาของ google drive ฝั่ง ผู้สร้างแบบสอบ และผู้ตอบแบบสอบ

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

#เล่าสู่กันฟัง 63-070 สื่อสอนสอบ ใน สอนออนไลน์

Google classroom

Google meet

Google form

จุดเด่นของ google meet
1. ใช้งานผ่านบราวเซอร์ ไม่ต้องติดตั้งอะไรเลย ถ้าใช้บนโทรศัพท์มีแอพชื่อ meet
2. ผู้ร่วมประชุม ไม่ต้อง sign in ได้ลิงค์ หรือรหัสห้องก็เข้าร่วมได้ (ควรระบุ ชื่อและรหัสนิสิตที่ปรากฎ)
3. ใช้ได้ทันทีด้วยอีเมลของมหาวิทยาลัย/องค์กรที่สมัคร G Suite
4. จุดเด่นอื่น คล้าย zoom, webex, ms teams, discord ที่แชร์จอได้ บันทึกวีดีโอ แปลเป็นแคปชั่นอัตโนมัติ หรือจัดการผู้ร่วมประชุม


ขั้นตอนการใช้งาน google meet
1. เปิดบราวเซอร์ เช่น  chrome, edge, firefox
2. เปิด http://meet.google.com
3. เข้าระบบด้วยอีเมลของมหาวิทยาลัย/องค์กร เพราะสมัคร G Suite แล้ว
4. คลิ๊ก Join หรือใส่ Meeting code
5. ส่งลิงค์ให้ลูกศิษย์/ผู้สนใจเข้าประชุม
6. กดรับเข้า (Admit) เมื่อแต่ละคนขอเข้าห้องประชม
7. เริ่มแชทคุย หรือประชุมผ่าน video
หรือให้ฝ่ายขาย/ผู้ร่วมประชุมวิชาการ/นิสิตนำเสนอโครงงานแบบที่พบว่า อ.แม็ค กับ อ.แป๋ม เล่าเรื่องในเฟส
http://thaiall.com/google/meet.htm

#เล่าสู่กันฟัง 63-015 ห้องเรียนผ่าน google

มีโอกาสโหลดแอพ มาสร้างห้องเรียน
ผ่าน google classroom
แล้วก็สร้างหัวข้อ ข้อสอบ กิจกรรม
ให้นิสิตเข้าชั้นเรียน ได้ทำอะไรร่วมกัน
อาจารย์ก็ให้คะแนน feedback กลับไป
มีรหัสชั้นเรียนคือ 7e96zz
ในเบื้องต้นก็เริ่มจากละลายน้ำแข็งในใจ
ให้นิสิตคุ้นเคยกับห้องเรียนใน google
ซึ่งบริการต่าง ๆ ก็จะพัฒนาเพิ่มขึ้น
ในอนาคตอาจสมบูรณ์กว่า Classstart หรือ moodle
ซึ่งเป็น #ห้องเรียนแห่งอนาคต อันใกล้ได้เลย
http://www.thaiall.com/futureclassroom/

วันนี้ จึงใช้ app และ browser เข้าชั้นเรียน
บัญชีหนึ่งเป็นครู อีกบัญชีเป็นนักเรียน
แล้วพบว่าฟลุ๊คน่าน ปี 3 แชร์ข่าวพัฒนา classroom
มาทาง fb profile ก็แอบชื่นชมไม่บอกใคร
เป็นการเรียนรู้ และแบ่งปันทางสื่อสังคม

http://www.thaiall.com/ethics

กรณีศึกษา วิชาจริยธรรม ภาพยนตร์
นำแสดงโดย Anthony Hopkins

undefined ใน console ของ browser มาได้อย่างไร

เพื่อตอบคำถามว่า undefined
เมื่อสั่ง console.log(5); นั้น มาได้อย่างไร

undefined console in google chrome
undefined console in google chrome

http://www.thaiall.com/java/js01.htm

ก็คงต้องชวนอ่านเรื่อง และดูจากตัวอย่าง ต่อไปนี้

มีหลายวิธี
ในการเขียนโค้ด (code) และประมวลผล (run) การทำงานของโค้ดด้วยภาษา javascript อาทิ เขียนโค้ดแล้วบันทึกในแฟ้ม x.htm แล้วประมวลผลใน browser หรือ เขียนบน เว็บไซต์ที่บริการแบบ online หรือ เขียนโค้ดแล้วใช้ node.js เป็นตัวแปล (interpreter) หรือ เขียนใน console บน browser ซึ่งการเขียน code พื้นฐานและทดสอบใน console บน browser นั้น ถือว่าเป็นวิธีการที่ง่ายที่สุด เสมือนเขียน javascript บน IDE (Integrated Development Environment)

การเขียนใน console บน browser
หากเลือกใช้ chrome browser ก็เข้าสู่ console ด้วยการกด F12 หรือ Ctrl-Shift-I หรือเลือก Developer Tools จาก Menu bar จะพบหน้าต่างที่มีบริการหลายอย่าง อาทิ การเป็น inspector เพื่อดู sources, elements หรือดูค่าที่ปรากฎใน console หรือ รับคำสั่งประมวลผลใน console ซึ่งหน้าต่าง console มักรองรับการสั่งงานด้วยคำสั่ง console.log(…); เพื่อติดตามตรวจสอบ ตัวแปรที่ต้องการติดตาม เนื่องจากเว็บเพจมี javascript ในการประมวลผล หากต้องการทราบว่าข้อมูล ณ ตำแหน่งใด มีค่าใดแล้ว การใช้ console.log(…) จะเหมาะสมอย่างยิ่ง เพราะผลของคำสั่งนี้จะไม่แสดงผลใน webpage แต่จะแสดงผลใน console window ทำให้ทราบข้อมูลที่ต้องการ

ในกรณีรับคำสั่งประมวลผลใน console
หากส่งค่าให้คำนวณ เช่น 1 + 2 + 3 ก็จะ return 6 มาตามปกติ
แต่ถ้าใช้คำสั่ง console.log(1 + 2 + 3); มักพบคำว่า undefined ปรากฎขึ้นมาอีก 1 บรรทัดเสมอ เนื่องจาก console window มีหน้าที่หลัก เป็นพื้นที่ในการรองรับการประมวลผล และ return value
หากพิมพ์คำสั่งใด ก็ต้องมีการ return value เสมอ หากไม่ return value ก็จะทำการ return undefined ต่อท้ายทุกครั้ง และคำสั่ง console.log(..); ไม่มีการ return ค่าโดยตรง แต่เป็นการส่งค่ามาแสดงผลใน console window โดยตรง ซึ่งไม่ใช่การ return value

ตัวอย่างการทำงานใน console window กับการ return ค่า
ตามภาพการใช้คำสั่ง พบว่า ตัวอย่างที่ 1, 2 และ 6 จะ return ค่าให้ console ได้ปกติ ตัวอย่างที่น่าสนใจ คือ คำสั่งที่ 8 แม้จะพิมพ์เพียง ; คือ เสมือนไม่สั่งอะไรเลย ใน console window ก็ยังแสดงคำว่า undefined เพราะไม่มีการคืนค่าใด ตัวอย่างที่ 2 เป็นการประกาศ และกำหนดค่า จะมีการคืนค่าออกมา จึงแสดงเลข 5 เป็นผลลัพธ์ แต่ ตัวอย่างที่ 3 เป็นการประกาศค่า ที่ไม่คืนค่าหลังประกาศ เนื่องจากใช้ var จึงแสดง undefined ตัวอย่างที่ 4 และ 5 แม้ใช้ console.log() แต่การพิมพ์คำสั่งนี้โดยตรงใน console จะไม่คืนค่าให้ console window แต่แสดงผลทันที หากใช้คำสั่งนี้ใน javascript ก็จะส่งค่าให้กับ console window เพื่อแสดงผลได้ปกติ ซึ่งเป็นคนละสถานการณ์ ตัวอย่างที่ 6 สามารถรับคำสั่งได้หลายคำสั่ง แล้วทำทีละคำสั่ง แต่คำสั่งสุดท้ายต้องเป็นการคืนค่าโดยตรง จะสลับให้ console.log() อยู่บรรทัดสุดท้าย ก็จะพบคำว่า undefined เช่นเดิม

calculator on google
calculator on google