ปรับปรุง : 2568-04-28 (สร้างไซต์)

กูเกิลไซต์ (google sites)

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

Google sites คืออะไร Google Sites คือ เครื่องมือสร้างเว็บไซต์แบบลากและวาง (drag-and-drop website builder) ที่ให้บริการฟรีโดย Google ซึ่งเป็นส่วนหนึ่งของชุดโปรแกรม Google Workspace (เดิมคือ G Suite)
รายละเอียด Google Sites มีดังนี้
* แพลตฟอร์มสร้างเว็บไซต์ที่ใช้งานง่าย: ออกแบบมาให้ผู้ใช้งานทั่วไปสามารถสร้างและจัดการเว็บไซต์ได้โดยไม่ต้องมีความรู้ด้านการเขียนโค้ด (เช่น HTML, CSS, JavaScript)
* ระบบลากและวาง: ผู้ใช้สามารถเพิ่มและจัดเรียงองค์ประกอบต่างๆ บนหน้าเว็บไซต์ได้อย่างง่ายดาย เพียงแค่ลาก (drag) องค์ประกอบที่ต้องการ เช่น กล่องข้อความ รูปภาพ วิดีโอ ปฏิทิน แผนที่ หรือไฟล์จาก Google Drive มาวาง (drop) ในตำแหน่งที่ต้องการ
* ผสานรวมกับ Google Workspace: ทำงานร่วมกับแอปพลิเคชันอื่นๆ ของ Google Workspace ได้อย่างราบรื่น เช่น
* Google Docs, Sheets, Slides: สามารถนำเอกสาร สเปรดชีต และงานนำเสนอมาแสดงบนเว็บไซต์ได้โดยตรง
* Google Forms: สามารถแทรกแบบฟอร์มเพื่อให้ผู้เข้าชมกรอกข้อมูลได้
* Google Calendar: สามารถแสดงปฏิทินกิจกรรมต่างๆ ได้
* Google Maps: สามารถฝังแผนที่เพื่อแสดงที่ตั้งได้
* YouTube: สามารถฝังวิดีโอจาก YouTube ได้ง่ายดาย
* Google Drive: สามารถอัปโหลดและแสดงไฟล์ต่างๆ ที่เก็บไว้ใน Google Drive ได้
* เทมเพลตสำเร็จรูป: มีเทมเพลตหลากหลายให้เลือกใช้เป็นจุดเริ่มต้น ช่วยให้การสร้างเว็บไซต์เป็นไปอย่างรวดเร็ว
* ปรับแต่งธีม: สามารถปรับเปลี่ยนสี ฟอนต์ และลักษณะอื่นๆ ของเว็บไซต์ให้เข้ากับแบรนด์หรือความต้องการได้
* การจัดการหน้า: สามารถเพิ่ม ลบ และจัดเรียงหน้าต่างๆ ของเว็บไซต์ได้อย่างง่ายดาย รวมถึงการสร้างหน้าย่อย (subpages)
* การทำงานร่วมกัน: สามารถเชิญผู้อื่นมาแก้ไขและจัดการเว็บไซต์ร่วมกันได้แบบเรียลไทม์ เหมือนกับการทำงานร่วมกันใน Google Docs
* การเผยแพร่ฟรี: Google ให้พื้นที่โฮสต์เว็บไซต์ฟรี ทำให้ผู้ใช้สามารถเผยแพร่เว็บไซต์สู่สาธารณะหรือจำกัดการเข้าถึงเฉพาะกลุ่มได้
* การรองรับบนอุปกรณ์ต่างๆ (Responsive Design): เว็บไซต์ที่สร้างด้วย Google Sites จะปรับขนาดให้เข้ากับหน้าจอของอุปกรณ์ต่างๆ ได้โดยอัตโนมัติ ไม่ว่าจะเป็นคอมพิวเตอร์ แท็บเล็ต หรือโทรศัพท์มือถือ
* การรักษาความปลอดภัย: เว็บไซต์ที่สร้างบน Google Sites มีความปลอดภัยและเสถียรภาพบนโครงสร้างพื้นฐานของ Google
ข้อดีหลักของ Google Sites มีดังนี้
* ใช้งานง่ายมาก: เหมาะสำหรับผู้ที่ไม่มีความรู้ด้านเทคนิคในการสร้างเว็บไซต์
* ฟรี: ไม่มีค่าใช้จ่ายในการใช้งานและโฮสต์เว็บไซต์ (สำหรับฟีเจอร์พื้นฐาน)
* ผสานรวมกับ Google Ecosystem: สะดวกสำหรับผู้ที่ใช้งาน Google Workspace อยู่แล้ว
* ทำงานร่วมกันได้ง่าย: เหมาะสำหรับการสร้างเว็บไซต์ของทีมหรือองค์กร
* ไม่ต้องกังวลเรื่องโฮสติ้งและการจัดการเซิร์ฟเวอร์: Google ดูแลเรื่องเหล่านี้ให้ทั้งหมด
ข้อจำกัดบางประการของ Google Sites มีดังนี้
* ความยืดหยุ่นในการปรับแต่งมีจำกัด: อาจไม่เหมาะสำหรับผู้ที่ต้องการการออกแบบเว็บไซต์ที่ซับซ้อนและเป็นเอกลักษณ์สูง
* ฟีเจอร์ขั้นสูงมีไม่มากเท่าแพลตฟอร์มอื่นๆ: อาจไม่มีฟังก์ชันบางอย่างที่พบในระบบจัดการเนื้อหา (CMS) หรือเว็บไซต์ builder อื่นๆ
* SEO (Search Engine Optimization) อาจทำได้จำกัด: แม้ว่า Google จะดูแลเรื่องพื้นฐานให้ แต่การปรับแต่ง SEO ในเชิงลึกอาจมีข้อจำกัด
Google Sites มีความเหมาะสำหรับอะไร
* เว็บไซต์ส่วนตัว: เช่น พอร์ตโฟลิโอส่วนตัว บล็อกส่วนตัว หรือเว็บไซต์สำหรับงานอดิเรก
* เว็บไซต์สำหรับทีมหรือโครงการ: เช่น เว็บไซต์สำหรับทีมในองค์กร เว็บไซต์สำหรับจัดการโครงการ หรือเว็บไซต์สำหรับกิจกรรมต่างๆ
* เว็บไซต์สำหรับธุรกิจขนาดเล็ก: เช่น เว็บไซต์แนะนำธุรกิจ เว็บไซต์ให้ข้อมูลติดต่อ หรือเว็บไซต์สำหรับแสดงสินค้าและบริการแบบง่าย
* เว็บไซต์เพื่อการศึกษา: เช่น เว็บไซต์สำหรับชั้นเรียน เว็บไซต์สำหรับครูผู้สอน หรือเว็บไซต์สำหรับนำเสนอโครงงาน
โดยรวมแล้ว Google Sites เป็นเครื่องมือที่ยอดเยี่ยมสำหรับผู้ที่ต้องการสร้างเว็บไซต์อย่างรวดเร็ว ง่ายดาย และฟรี โดยเฉพาะอย่างยิ่งผู้ที่คุ้นเคยกับการใช้งานผลิตภัณฑ์อื่นๆ ของ Google อยู่แล้ว
☸ https://sites.google.com/view/gsites01/home

ออกแบบการสอน สร้างเว็บไซต์ ด้วย google sites ChatGPT : ออกแบบการสอน สร้างเว็บไซต์ ด้วย google sites คำตอบที่ได้ คือ แผนการออกแบบการสอนหัวข้อ “การสร้างเว็บไซต์ด้วย Google Sites” ที่สามารถปรับใช้ได้ทั้งในห้องเรียนหรือเวิร์กช็อป มีกลุ่มเป้าหมาย คือ นักเรียน ม.ต้น / ม.ปลาย หรือบุคคลทั่วไป มีระยะเวลา 2-3 คาบเรียน หรือ 2-3 ชั่วโมง
วัตถุประสงค์การเรียนรู้ (Learning Objectives)
1. อธิบายคุณสมบัติพื้นฐานของ Google Sites ได้
2. สร้างเว็บไซต์ด้วย Google Sites ได้อย่างถูกต้อง
3. ออกแบบโครงสร้างเว็บไซต์อย่างเหมาะสม
4. แทรกองค์ประกอบต่างๆ เช่น ข้อความ รูปภาพ ลิงก์ วิดีโอ ได้
5. เผยแพร่เว็บไซต์ให้ผู้อื่นเข้าชมได้
เครื่องมือที่ใช้ (Tools)
- คอมพิวเตอร์ / แท็บเล็ต พร้อมอินเทอร์เน็ต
- บัญชี Google
- Google Sites
- รูปภาพ/เนื้อหาที่เตรียมไว้ล่วงหน้า
ขั้นตอนการสอน (Lesson)
คาบที่ 1: รู้จักกับ Google Sites
1. เริ่มต้นด้วยการตั้งคำถาม
- “เคยทำเว็บไซต์ไหม?” / “เว็บไซต์มีไว้ทำอะไร?”
2. อธิบายความรู้เบื้องต้น
- Google Sites คืออะไร?
- จุดเด่น (ใช้งานฟรี สร้างง่าย ไม่ต้องเขียนโค้ด)
3. สาธิต
- วิธีเข้าสู่ Google Sites (sites.google.com)
- ส่วนประกอบของหน้าเว็บ
คาบที่ 2: การสร้างเว็บไซต์
1. ให้นักเรียนสมัครเข้าใช้งาน Google Sites
2. เริ่มสร้างเว็บไซต์
- เลือกเทมเพลต / สร้างจากศูนย์
- แก้ไขชื่อหัวเว็บไซต์
- เพิ่มหน้าเว็บ (เช่น หน้าหลัก, เกี่ยวกับ, ติดต่อ)
3. สอนการแทรกองค์ประกอบ
- ข้อความ, รูปภาพ, ลิงก์, วิดีโอจาก YouTube, Google Maps, ปฏิทิน
4. กิจกรรม
- นักเรียนสร้างเว็บไซต์ตามหัวข้อที่กำหนด เช่น “แนะนำตัวเอง”, “รีวิวหนัง/เกม/อาหาร”
คาบที่ 3: การตกแต่งและเผยแพร่
1. แนะนำการจัด Layout
- เลือกธีม สี ฟอนต์
- การจัดวางเนื้อหาให้อ่านง่าย
2. สอนการ Preview และการเผยแพร่เว็บไซต์
3. ให้ผู้เรียนแชร์ลิงก์เว็บไซต์
4. สะท้อนผล / นำเสนอผลงาน
- นักเรียนแต่ละคนหรือแต่ละกลุ่มนำเสนอเว็บไซต์ของตน
การประเมินผล (Evaluation)
- การสังเกตระหว่างกิจกรรม (ความตั้งใจ, การมีส่วนร่วม)
- ผลงานเว็บไซต์ที่สร้างขึ้น
[ ] โครงสร้างครบถ้วน
[ ] การใช้เนื้อหาและสื่ออย่างเหมาะสม
[ ] ความสวยงามในการจัดวาง
- การนำเสนอเว็บไซต์
กิจกรรมเสริม : ค้นข้อมูลเกี่ยวกับ google sites ต้องการผลการค้นใน 3 รูปแบบสื่อ มีดังนี้ 1) อีบุ๊คแบบ pdf 2) คลิปวิดีโอ 3) บทความในฐาน thaijo

บทเรียนที่ 1 : สร้าง Home แล้ว Publish บทเรียนแรก การสร้างไซต์เบื้องต้น ด้วย กูเกิลไซต์ มี 10 ขั้นตอน ดังนี้ 1) ถ้ามีบัญชีกูเกิลแล้ว ก็เข้าไซต์ได้เลย พบว่า มีรายการไซต์ที่เคยสร้างไว้ ถ้าไม่พบก็สร้างไซต์ใหม่ได้ ด้วยการคลิก blank site 2) ช่องบนสุดด้านซ้าย มีคำว่า Untitled site ก็ให้ตั้งชื่อที่เราชอบ หรือคลิกสำรวจส่วนต่าง ๆ ที่เราสนใจ 3) กรอกข้อมูลหัวข้อของไซต์ เปลี่ยนรูปแบบอักษร หรือเพิ่มฟอนต์ใหม่ได้ เช่น itim หรือ kanit ซึ่งเป็นฟอนต์ที่สวย 4) ช่อง content blocks มีต้นแบบให้เลือกเพิ่มเข้าเพจ ตัวอย่างนี้ กล่องซ้ายเป็นภาพ กล่องขวาเป็นข้อความ แล้วลองอัพโหลดภาพได้ 5) ในแท็บ pages พบว่ามีเพจชื่อ Home ซึ่งระบบตั้งชื่อเพจแรกมาเป็นชื่อนี้ 6) กด publish เพื่อเผยแพร่ เราตั้งชื่อลิงก์ไซต์ของเราได้ที่นี่ 7) ในหน้าหลักของกูเกิลไซต์ จะพบผลงานที่เราได้สร้างไว้ทั้งหมด 8) ถ้าคลิกเข้าแก้ไขไซต์ใด แล้วอยากชมผลงานบนเบราเซอร์ หรือส่งลิงก์ของไซต์ให้เพื่อนได้ชม คลิกที่ view published site 9) นี่คือผลงานไซต์ และผลการคลิกลิงก์จากในไซต์ 10) ไซต์ที่สร้างขึ้นรองรับ responsive web design ทำให้แสดงผลบนอุปกรณ์ต่าง ๆ ได้อย่างสวยงาม

บทเรียนที่ 2 : สร้างเพจใหม่ และเพิ่มลิงก์เชื่อมโยง บทเรียนที่ 2 สร้างเพจใหม่ และเพิ่มลิงก์เชื่อมโยง ด้วย กูเกิลไซต์ มี 10 ขั้นตอน ดังนี้ 1) ในแท็บ pages สามารถเพิ่มเพจ หรือลิงก์ ซึ่งจะไปปรากฎใน Navigation menu โดยอัตโนมัติ 2) สร้าง page ใหม่ ควรกำหนดชื่อเพจที่เข้าใจได้ง่าย 3) สามารถย้ายตำแหน่งของ page หรือ link ด้วยการลากขึ้นลง รวมถึงการ Hide from navigation ด้วย 4) การพิมพ์ข้อความเพิ่มเติม ใน block ต่าง ๆ สามารถเพิ่ม emoji เช่น smile ได้ 5) การเพิ่มลิงก์ ต้องเริ่มจากการเลือกคลุมข้อความ ที่ต้องการเปลี่ยนให้เป็นลิงก์ 6) รายการเพจที่เคยเพิ่มเข้าไป จะมีให้เลือก เมื่อมีการเพิ่มลิงก์ 7) การเพิ่มลิงก์ สามารถกำหนด url ได้ เช่น ไซต์ที่เราสนใจ 8) ระหว่างพัฒนาไซต์ เพจที่เพิ่มใหม่จะใช้ไม่ได้ จนกว่าจะมีการ publish 9) ผลงานไซต์ที่ปรากฎบนเบราเซอร์จะเป็นรุ่นล่าสุด 10) Navigation menu จะแสดงด้านซ้าย หรือด้านบน ซึ่งเปลี่ยนอัตโนมัติตามขนาดจอภาพ

บทเรียนที่ 3 : บทเรียนที่ 3 เลือกธีมแสดงผล เพิ่มสื่อมัลติมีเดีย และเมนูย่อย ด้วย กูเกิลไซต์ มี 9 ขั้นตอน ดังนี้ 1) เปลี่ยนส่วนเสริมธีมหรือชุดสี เพื่อกำหนดการแสดงผลที่สวยงาม จากเดิมใช้ธีม simple เปลี่ยนไปใช้ธีม vision 2) เพิ่ม block ในรูปแบบที่มีภาพและข้อความ แล้วกรอกข้อความ และเพิ่มภาพซึ่งมีให้เลือกนำเข้าได้หลายแบบ เช่น Select image เป็นการเลือกภาพใน gallery ของเรา 3) ใน gallery มีห้อง recent ที่รวมภาพเมื่อไม่นานมานี้ ให้เลือกใช้โดยง่าย 4) เลือกเพิ่ม place holder และเลือก ยูทูป ก็จะพบคลิปวิดีโอที่เกี่ยวข้องมากมาย 5) วิดีโอที่นำเข้าแล้ว อาจมีขนาดไม่เต็มจอภาพ สามารถยืดออก หรือหดเข้าได้ 6) เพจหลัก หรือ เพจย่อย มีตัวเลือกที่เชื่อมกับ navigation menu และ homepage สามารถจัดการได้ง่าย 7) เพจย่อย ที่เพิ่มจะไปเป็น เมนูย่อย ใน navigation menu โดยอัตโนมัติ 8) ระบบเมนู เชื่อมกับ ระบบเพจ จะถูกใช้ในทุกเพจ โดยอัตโนมัติ 9) เปลี่ยนชื่อเพจ มีผลให้เปลี่ยน url หากมีการกำหนด url ด้วยการพิมพ์เข้าไป ต้องกลับไปแก้ไข เพราะถ้าเปิดเพจจาก url ชื่อเดิมจะเป็น not exist

บทเรียนที่ 4 : บทเรียนที่ 4 กลุ่มวัตถุหลัก 4 กลุ่ม ที่สามารถเพิ่มไปบน กูเกิลไซต์ มีดังนี้ 1) องค์ประกอบพื้นฐาน (Common Elements) เช่น Text box (กล่องข้อความ) Images (รูปภาพ) Embed (ฝังเนื้อหา) หนือ แทรกไฟล์หรือโฟลเดอร์จาก Google Drive 2) เค้าโครง (Layouts) คือ layout สำเร็จรูป เช่น รูป + ข้อความ 3) วัตถุเสริมต่าง ๆ (Content Blocks) เช่น Button (ปุ่มลิงก์) Divider (เส้นแบ่ง) Placeholder (ช่องว่าง) Table of contents (สารบัญ) หรือ Chart (แผนภูมิ) 4) บูรณาการกับบริการของ Google สามารถแทรกเข้ามาได้โดยตรง เช่น docs, sheet, forms, calendar, map เป็นต้น

บทเรียนที่ 5 : บทเรียนที่ 5 ปัญหาและวิธีแก้ไข 3 เรื่อง เมื่อพัฒนาโฮมเพจแบบ no code ที่พบบน กูเกิลไซต์ เมื่อใช้บน mobile device มีดังนี้ 1) เปิดขึ้นมาแล้วพบว่า ไม่รองรับการพัฒนาใน mobile mode บน browser แต่รองรับการ view แบบ responsive web design นั่นคือไม่สามารถใช้ฟังก์ชันการพัฒนา ได้แก่ เพิ่ม ลบ แก้ไข เนื้อหาบน google sites ใน mobile mode บน browser แต่สามารถทำได้ ถ้าอยู่บน browser แล้วเปลี่ยนการแสดงผลเป็นแบบ desktop mode ก็จะสามารถพัฒนาไซต์ได้ 2) ไม่สามารถใช้ drag and drop ลากแล้ววาง เช่น การโยกย้ายเพจ และ เพจย่อยขึ้นลง ในอุปกรณ์ที่ใช้ touch screen เช่น mobile หรือ tablet แต่สามารถลากแล้ววางด้วย mouse บน desktop computer แต่มีคำแนะนำมาเป็นทางเลือก คือ ใช้การเพิ่มเพจ และลบเพจ ก็จะให้ผลคล้ายกัน 3) การพิมพ์ข้อความบน textbox ใน browser มีฟังก์ชัน auto complete หรือแนะนำคำที่สมบูรณ์ พบปัญหาว่า ระบบให้คำแนะนำอย่างไม่ถูกต้อง กรณีที่ผมพบ คือ แนะนำผิดปกติจนไม่สามารถพิมพ์ข้อความให้ถูกต้องได้ เช่น พิมพ์ข้อความซ้ำ ๆ หลายข้อความ ส่วนวิธีการแก้ไข มีดังนี้ ติดตั้งแอปคีย์บอร์ดตัวอื่น ล้างแคช อัพเกรดแอปพลิเคชันรุ่นใหม่ สลับการใช้คีย์บอร์ด ยกเลิกการรับข้อความด้วยเสียง สุดท้ายแก้ไขได้ด้วย ปิด การแสดงแถบคำแนะนำ จึงจะทำให้สามารถจัดการข้อความใน textbox บน google sites ได้

บทเรียนที่ 6 : บทเรียนที่ 6 ผู้สร้าง แชร์ไซต์ ของ กูเกิลไซต์ ให้ไปพัฒนาต่อ เนื่องจากกูเกิลไซต์เป็นแพลตฟอร์ม สำหรับสร้าง และแก้ไขเว็บไซต์ ดังนั้น เค้าออกแบบมาให้วางบน แพลตฟอร์มของกูเกิลเท่านั้น คือ แก้ไขได้เฉพาะบน กูเกิลไซต์ จะนำไปแก้ไขด้วย notepad หรือ vscode ไม่ได้ เพราะไม่เปิดให้ download ออกไป สรุปว่า แพลตฟอร์ออนไลน์นี้ กำหนดให้เก็บไซต์ ได้เฉพาะบนกูเกิลไดร์ฟ จะ download, export, import ไซต์ ไปเก็บในคอมพิวเตอร์ หรือสื่อเก็บข้อมูลภายนอกไม่ได้ ถ้านำออกไป ก็ต้องบันทึกเป็นรูปแบบอื่น เช่น image, pdf, html, css, js, url เป็นต้น การแชร์ไซต์เบื้องต้น มี 2 วิธี 1) เปิดดูไซต์แบบ view แล้วเลือกแชร์ url แบ่งปันแบบนี้ นำไปแก้ไขต่อไม่ได้ 2) ผู้พัฒนาเปิด folder ใน google drive แล้วแชร์ เพื่อให้เพื่อนนำไปแก้ไขต่อได้ เพื่อนที่ได้รับ url ของ file หรือ folder จะสามารถเปิดแบบ preview ได้ ถ้าเพื่อนต้องการแก้ไข ต้องใช้ google grive ทำ make a copy เพื่อให้ได้ไซต์ที่ตนเองเป็นเจ้าของ จึงจะ เพิ่ม ลบ แก้ไข ไซต์ของตนเองได้

บทเรียนที่ 7 : บทเรียนที่ 7 ภาพปกสวย เลือกได้ จากแกลลอรี่ บน กูเกิลไซต์ การทำเว็บไซต์ แล้วมีการประกวดแข่งขัน ที่มีกรรมการเป็นผู้ตัดสินพิจารณา มักพบเกณฑ์ข้อหนึ่ง คือ มีความสวยงาม ซึ่งความสวยงามนี้ ทางกูเกิลไซต์ เตรียม themes สวย ๆ ให้เลือกใช้มากมาย เพียงคลิกก็เปลี่ยนสวยได้แล้ว เป็นไปตาม style ของเรา ส่วนภาพปก ใน themes สามารถเลือก จากที่อยู่ในแกลลอรี่ได้ ซึ่งมีทั้งวิวภูเขา วิวทะเล วิวป่า หรือวิวโต๊ะทำงานก็มีให้เลือก เป็นต้น ถ้าตำแหน่งการวางภาพยังไม่ถูกใจ สามารถย้ายตำแหน่งภาพได้ แล้วยังสามารถ เลือกแบบ header type ได้ ชอบแบบเนอร์ขนาดมาตรฐาน หรือ แบบไม่มีแบนเนอร์เลย หรือ ที่ใหญ่กว่าเดิมก็เลือกได้ ในการเลือกแบนเนอร์ และวางตำแหน่ง ให้คำนึงถึง responsive และ navigation menu ด้วย ว่าอยู่บน mobile หรือ desktop จะแสดงผลแบบใด จึงจะสวยที่สุดในแบบของเรา

บทเรียนที่ 8 : บทเรียนที่ 8 เสนอ canva สร้างภาพปก ที่สร้างสรรค์ ใช้บน กูเกิลไซต์ เคยชมผลงาน เว็บครู ที่ชนะเลิศระดับประเทศ พบว่า มี 3 สิ่งในภาพปกที่คล้ายกัน เห็นแล้วก็น่าคลิก น่าติดตาม อย่างยิ่ง ซึ่งภาพปก เปรียบเสมือน หน้าบ้าน ของเว็บไซต์ ที่ผู้สนใจได้มาเป็นข้อมูลแรก ก่อนตัดสินใจ ว่าจะคลิกเข้าชมไซต์ ต่อหรือไม่ ประกอบด้วย 1) ภาพคุณครูที่โดดเด่น และสดใส 2) หัวข้อเรื่องหลักหรือสาระสำคัญ 3) สีและสไตล์ที่สร้างสรรค์ แม้ google sites หรือ canva จะมีภาพปกมาตรฐาน ให้ใช้ได้ฟรี ที่พบใน gallery เช่น ภูเขา หิมะ ทะเล แม่น้ำ ป่าไม้ หรือห้องทำงาน จะมีความสวยงาม และน่านำไปใช้ก็ตาม แต่ขาดความเป็นตัวตนของคุณครู ดังนั้น ภาพตัวตนของคุณครูที่สวยงาม ในท่าทางที่น่าติดตาม และการใช้สีที่ชวนมอง จึงถือว่าเป็นเอกลักษณ์ที่สำคัญมาก ส่วนหัวข้อ ก็ควรเชื่อมโยงกับทักษะที่ชำนาญ หรือสาระสำคัญที่ครูต้องการนำเสนอ สรุปว่า ชวนฝึกออกแบบภาพปกสวย ๆ กันครับ

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

บทเรียนที่ 10 : บทเรียนที่ 10 การใช้อิมเมจคารูเซล เสนอแบบหมุนเวียน บน กูเกิลไซต์ พบว่า คุณครูต้นแบบที่ทำเว็บไซต์ ประกวดชนะเลิศระดับประเทศ เลือกใช้ Image carousel (อิมเมจคารูเซล) ที่หน้าโฮมเพจ ซึ่ง block นี้ คือ รูปแบบการแสดงผลภาพหรือเนื้อหาหลาย ๆ ชิ้นที่หมุนเวียนแสดงในพื้นที่เดียวกัน โดยผู้ใช้สามารถเลื่อนดู (slide) ไปซ้ายหรือขวา เพื่อดูภาพถัดไปหรือลำดับก่อนหน้าได้ หรือบางครั้งก็จะเลื่อนอัตโนมัติเองในช่วงเวลาที่กำหนด ในตัวอย่างนี้ ได้จับภาพโฮมเพจ ของผู้ชนะเลิศระดับประเทศ 3 อันดับแรก และที่ได้รางวัลชมเชยอีก 10 ผลงาน ชวนมองการออกแบบภาพปก ของแต่ละผลงานกันครับ แล้วก็นำบทเรียนที่ดีมาประยุกต์ใช้กับไซต์ของเรา สิ่งหนึ่งที่ควรมีใน อิมเมจคารูเซล แต่ไม่มี คือ การลิงก์เชื่อมโยง ออกไปเว็บไซต์ภายนอก สรุปว่าบริการที่กูเกิลไซต์เตรียมไว้สำหรับ block นี้ คือการสไลด์ภาพไว้ให้ชมเท่านั้น แต่คลิกออกไปไม่ได้

บทเรียนที่ 11 : บทเรียนที่ 11 การฝังโค้ด ฟิลด์เซต แสดงกล่องข้อมูล แบบมีแถบชื่อที่หัวกล่อง บน กูเกิลไซต์ พบว่า รูปแบบกล่องข้อมูล ที่ กูเกิลไซต์ มีให้บริการ ยังไม่มี block แบบ folder หรือแฟ้มเอกสาร ซึ่ง tag ภาษา html ที่คล้าย folder ที่สุด คือ fieldset ที่กำหนด legend ได้ ซึ่งบริการของ กูเกิลไซต์ สามารถ embed html code ได้ เราสามารถเขียนโค้ด fieldset และกำหนด legend แล้วใส่ข้อมูลลงไปในกล่อง และจัดเรียงข้อมูลตามลำดับ แยกเป็นรายการ ที่มีสัญลักษณ์นำหน้ารายการได้ตามความต้องการ แล้วยังเขียน css กำหนด สไตล์ แบบ inline เข้าไปใน tag ต่าง ๆ ได้อีกมากมาย เช่น สีตัวอักษร สีพื้น รูปแบบตัวอักษร เป็นต้น

บทเรียนที่ 12 : บทเรียนที่ 12 ใช้ฟอนต์กูเกิลไทย สไตล์เดียวกัน บน กูเกิลไซต์ ปัจจุบันมีฟอนต์ไทยแสนสวย ของกูเกิล ให้คนไทยเลือกใช้ได้ฟรี เมื่อสร้างไซต์ บน กูเกิลไซต์ ผู้สร้างเนื้อหาสามารถเลือกฟอนต์ที่ชอบ เช่น คณิต ไอติม หรือชลบุรี ดังนั้นแต่ละเพจก็จะมีฟอนต์ที่ตนเองชอบ แต่เมื่อมีการ insert block แบบ embed html code เพื่อสร้างเนื้อหา และออกแบบเลเอาท์ ที่นอกเหนือไปจากรูปแบบมาตรฐาน ที่กูเกิลไซต์เตรียมไว้ให้ใช้ พบว่า block ที่ embed ไม่สามารถใช้ กูเกิลฟอนต์ได้ทันที วิธีแก้ไข คือ ต้องใช้ link tag เรียกใช้ฟอนต์ที่ต้องการใช้จากกูเกิล จึงจะกำหนด style font-family เป็นฟอนต์ของกูเกิลที่ตนเองสนใจ สรุปว่า ในเพจ และใน block ที่รวมอยู่ในหน้าเดียวกัน สามารถใช้กูเกิลฟอนต์ที่ชอบได้ เป็นสไตล์เดียวกันทั้งเพจได้อย่างสวยงาม

บทเรียนที่ 13 : บทเรียนที่ 13 ขั้นตอน สร้างภาพเคลื่อนไหว แบบ gif ด้วย canva แล้วนำไปใช้ บน กูเกิลไซต์ พบว่า canva ช่วยสร้างภาพเคลื่อนไหวได้ และคุณครูหลายท่านนำไปใช้งาน ประกอบการสร้างไซต์ บน กูเกิลไซต์ มีขั้นตอนเบื้องต้น ดังนี้ 1) เปิด canva แล้วค้นหา gif ต้นแบบ 2) เลือกมาหนึ่งแบบที่เราชอบ 3) นำมาแก้ไข 4) คัดลอกเพจเพื่อให้วนซ้ำหลายครั้ง 5) ทดสอบ และแก้ไข จนพอใจ 6) ดาวน์โหลด เปลี่ยนเป็นแบบ gif 7) ดาวน์โหลด ลงในไดร์ฟของเรา 8) เปิด google sites 9) insert image แล้วเลือกภาพจากไดร์ฟ 10) ได้ภาพเคลื่อนไหวบนไซต์ของเรา ถ้านำภาพแรกมาใช้ ตามคำแนะนำได้แล้ว เริ่มขั้นต่อไป คือ ให้สร้างภาพในรูปแบบที่เราออกแบบเอง

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

บทเรียนที่ 15 : บทเรียนที่ 15 การสร้างเว็บไซต์ ด้วย canva หรือ แชร์ลิงก์ออกจากแอป ไปใช้บน กูเกิลไซต์ แคนวาเป็นเครื่องมือที่ได้รับความนิยม ในการสร้างสื่อหลายแนว ครอบคลุมความต้องการทุกกลุ่ม รวมถึง การสร้างเว็บไซต์ แต่ต้องใช้แอปของแคนวาเท่านั้น ในการแก้ไขเว็บไซต์ที่สร้างขึ้น หลักการนี้ มีข้อจำกัดเหมือนกับกูเกิลไซต์ ที่ส่งออกเว็บไซต์ ไปนอกแพลตฟอร์มของตนไม่ได้ คือ ส่งสำเนาไซต์เก็บในคอมพิวเตอร์ หรือส่งเป็นก้อนไปให้เพื่อนไม่ได้ จึงไม่สามารถนำทั้งก้อนไปแก้ไข หรือนำก้อนที่เก็บไว้ ไปแก้ไข บนแพลตฟอร์มอื่นไม่ได้ เพราะส่งออกเป็น html, js หรือ css ไม่ได้ การเผยแพร่ผลงานรูปแบบเว็บไซต์ ที่สร้างใน แคนวา สามารถนำไปวางบน กูเกิลไซต์ มีหลายวิธี ดังนี้ 1) แชร์ผลงานเป็นลิงก์ 2) แชร์แบบฝัง เพื่อไปวางในเว็บไซต์อื่น 3) แชร์เป็นเว็บไซต์ แบบมี url หรือ domain name แล้วใช้ลิงก์ 4) แชร์เป็นแฟ้มรูปแบบอื่น แล้วนำไปวาง เช่น pdf, png, หรือ jpg เป็นต้น

บทเรียนที่ 16 : บทเรียนที่ 16 แบ่งปันสิทธิ์ ให้เพื่อนช่วยกัน เขียนเนื้อหา บน กูเกิลไซต์ เพื่อนร่วมห้อง เพื่อนร่วมโรงเรียน เพื่อนร่วมสมาคม เพื่อนร่วมงาน หรือ เพื่อนร่วมการอบรม ถ้ารวมทีมกันได้ และมีเป้าหมายเดียวกัน เมื่อทำไซต์เผยแพร่ข้อมูล ผู้สร้างไซต์สามารถแบ่งปันสิทธิ์ ให้เพื่อนได้เข้ามาร่วมกันปรับปรุงไซต์ได้ มีขั้นตอนเบื้องต้น ดังนี้ 1) ตัวแทนเพื่อนสร้างไซต์ขึ้นมาก่อน ในฐานะ owner 2) กำหนดรายชื่อทีมเพื่อนที่จะมาช่วยกัน 3) เลือกแบ่งปันสิทธิ์ให้เพื่อนเป็น editor 4) ระบบส่งอีเมลเชิญทีมเพื่อนเข้าร่วมเป็น editor 5) เพื่อนในทีมแต่ละคน เปิดอ่านอีเมล เพื่อตอบรับการเชิญ 6) ใครเปิดอ่าน และเลือกเปิดไซต์ สามารถร่วมแก้ไขไซต์ได้ 7) เมื่อใครในทีมแก้ไขไซต์แล้ว ก็ปรากฏผลการแก้ไขให้ทั้งทีมได้เห็นเป็นฉบับร่าง จากนั้น กดเผยแพร่ไซต์ 8) ผลการเผยแพร่ไซต์ จะได้รุ่นล่าสุด

บทเรียนที่ 17 : บทเรียนที่ 17 ตัวตนที่แตกต่าง สามารถสะท้อนผ่าน logo และ favicon บน กูเกิลไซต์ ความหมายของ โลโก้ (Logo) คือ สัญลักษณ์หรือตราประจำตัว ที่ใช้แทนตัวตนของเรา บน google sites เพื่อให้ผู้คนจดจำได้ง่ายและแยกแยะออกจากไซต์อื่น หรือคนอื่น โลโก้สามารถประกอบด้วย ตัวอักษร ภาพสัญลักษณ์ หรือ ผสมกันไป ส่วน Favicon ย่อมาจาก Favorite Icon คือ ไอคอนขนาดเล็ก ที่แสดงอยู่ที่แถบเบราว์เซอร์ข้างหน้าชื่อเว็บไซต์ หรือ บนแท็บของเบราว์เซอร์ หรือ ในบุ๊กมาร์กของเว็บไซต์นั้น ถูกใช้เพื่อแสดงตัวตน ทำให้เว็บไซต์ดูเป็นมืออาชีพ แตกต่าง และจดจำง่าย ขนาดมาตรฐานของ favicon มักจะเป็น 16x16 พิกเซล หรือ 32x32 พิกเซล มีรูปทรงเป็นสี่เหลี่ยมจตุรัส ดังนั้น คุณครู องค์กร สมาคม หรือบุคคลที่ทำตนให้เป็นแบบอย่างของผู้ใช้เทคโนโลยีเพื่อการสื่อสาร และมีภาพลักษณ์แตกต่างอย่างชัดเจน การมี logo และ favicon ที่สะท้อนอัตลักษณ์ จึงเป็นสิ่งจำเป็นอย่างยิ่ง สำหรับคนยุคนี้

บทเรียนที่ 18 : บทเรียนที่ 18 ข่าวประกาศ ที่หน้าเว็บไซต์ ตั้งค่าปุ๊ปใช้ได้เลย บน กูเกิลไซต์ ทุกโรงเรียน ทุกสมาคม ทุกองค์กร ย่อมต้องมีข่าวประกาศ ที่อยากให้คนได้รู้ ได้ทราบ อย่างทั่วถึง เช่น ผลสอบออกแล้ว ประกาศรับสมัคร วันหยุดของที่ทำงาน มติที่ประชุม กำหนดการกฐินสามัคคี ข่าวโปรโมชั่นช่วงหน้าร้อน เอกสารเผยแพร่ออกใหม่ เป็นต้น ถ้าเขียนโค้ดเองก็ยาว มีรายละเอียดมากมายที่ต้องจัดการ แต่การทำเว็บไซต์ด้วย กูเกิลไซต์ เป็นการพัฒนาแบบ no code ที่ง่ายสำหรับคนรุ่นใหม่อย่างมาก ทำให้การสร้างประกาศ announcement บนหน้าเว็บไซต์ เพื่อเชื่อมลิงก์ไปยังแหล่งข่าว เช่น รายชื่อนักเรียนที่สอบผ่าน หรือ เลขฉลากที่ถูกรางวัลงานฤดูหนาว มีมากเป็นหางว่าว ข้อมูลมากแค่ไหนก็ลิงก์เชื่อมโยงไปถึงได้ สามารถทำได้ง่ายดุจพลิกฝ่ามือ ง่ายปานนั้นเลย ผมขอยืนยัน

บทเรียนที่ 19 : บทเรียนที่ 19 แชร์ทั้งโฟลเดอร์ จาก กูเกิลไดร์ฟ แสดงผลแบบอัลบั้มภาพ บน กูเกิลไซต์ ถ้ามีภาพที่พร้อมแบ่งปัน ที่เก็บไว้ในกูเกิลไดร์ฟ แบบอัลบั้มภาพ เรียง 3 ภาพต่อแถว เช่น ผลงานนักเรียน ครู โรงเรียน โปสเตอร์งานวิชาการ งานศิลปะของศิลปิน ภาพปกวารสาร หรือ infographic ที่อยากแบ่งปัน จัดเรียงภาพแบบ thumb nail แล้วคลิกเปิด enlarge ได้ บริการของ กูเกิลไซต์ สามารถแบ่งปัน folder ใน กูเกิลไดร์ฟ ไปวางแบบ embed โดยใช้ iframe โดยไม่ต้องเขียนโค้ดข้างต้น มีกล่องมาให้เลือก ว่าเลือกแสดงผล แบบ List view หรือ Grid view บริการนี้ จะเสนอภาพที่อยู่ใน folder เฉพาะที่เป็นภาพ แล้วแสดงภาพตัวอย่าง ให้ผู้ที่ได้รับสิทธิ์ ได้เห็นภาพเหล่านั้น ถ้าผู้ไม่อยู่ในบัญชีที่ได้รับอนุญาต ก็จะไม่มีสิทธิ์เปิดภาพเหล่านั้น นี่คือความเป็นส่วนตัว สำหรับเจ้าของเว็บไซต์ที่ควบคุมได้

บทเรียนที่ 20 : บทเรียนที่ 20 แชร์วัตถุอะไรก็ได้ อยู่ในหรือนอกไดร์ฟ เพิ่มไปในเพจของเรา บน กูเกิลไซต์ ในเว็บเพจที่สร้างแบบ no code ด้วยแพลตฟอร์มกูเกิลไซต์ มีอะไรให้แชร์มากมาย เรามีหน้าที่คิดให้ออก และสร้างให้ได้ แล้วนำไปเก็บไว้ใน กูเกิลไดร์ฟ จากนั้น เราก็เพิ่มวัตถุที่สร้างขึ้น เข้าไปในเว็บเพจได้เลย สรุปว่ามี 4 วัตถุหลักที่ใช้บ่อย คือ Text, Image, Embed และ Drive ส่วนวัตถุอื่น ๆ มีให้เลือกอีกมาก ได้แก่ Content block หลายรูปแบบ แล้วยังมี ตารางสารบัญ ปุ่มกด สไลด์ภาพ ปฏิทิน แผนที่ เอกสาร แฟ้มสไลด์ กระดาษทำการ ฟอร์มแบบทดสอบ แบบฝึกหัด แบบลงทะเบียนสมาชิก หรือ ชาร์ท เป็นต้น เมื่อทำเว็บไซต์ บน กูเกิลไซต์ เสร็จแล้ว สามารถเชื่อมกับโดเมนเนม ที่จดไว้ได้ทันที เช่น เว็บครู.ไทย เป็นต้น เพียงเท่านี้ก็แชร์สิ่งที่คิด สิ่งที่ทำได้แล้ว

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com