วิจัย 61 - อ.ศิริพร

40 ภำคผนวก

41 ขั้นตอน ใบงาน เรือ่ ง เว็บไซต์แกงสม้ ชะอมกงุ้ ลายเซ็น 1. รายการ 2. 3. ดาวโหลดรูปภาพ และไฟล์ใน server ตามที่ครบู อก 4. เปดิ โปรแกรม VS Code 5. New file แล้วตง้ั ชือ่ ไฟล์ โดยตั้งนามสกลุ ไฟล์ใหเ้ ปน็ ไฟล์ HTML เปิดโครงสรา้ ง HTML5 โดยใช้ Tag อัตโนมัติ 6. ลบบรรทดั ดังต่อไปน้ี 7. <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> 8. <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> 9. <script src=\"main.js\"></script> 10. เปล่ียนชือ่ เปน็ <title>แกงส้มชะอมก้งุ </title> 11. เปิด Tag header , section และ footer ในส่วนของ body 12. เขยี นคอมเม้นใน HTML สาหรับบอกสว่ นต่าง ๆ <!---ขอ้ ความ--> 13. เขยี นใน Tag header วา่ “แกงส้มชะอมกงุ้ ” 14. เขยี นใน Tag footer วา่ “จดั ทาโดย...” สร้าง Tag div ใน Tag section จานวน 3 ชุด 15 สรา้ ง Tag p ใน div ชุดแรกทอี่ ยู่ใน Tag section จานวน 2 ชุด 16 นาเนือ้ หาใน word ชุดที่ 1 ใสใ่ น Tag p ชดุ ท่ี 1 และ 2 ใสร่ ปู ภาพพน้ื หลังให้กบั body 17 - background-image: url('bg.jpg'); 18 ใส่ขนาดตวั อกั ษรเปน็ 20 px ใส่คาสั่งต่อไปน้ใี ห้กับ Tag header - background-color: rgb(187, 51, 51); - font-size: 50px; padding-left: 10%; - padding-top: 20px; - padding-bottom: 20px; ใส่คาสั่งตอ่ ไปนีใ้ ห้กบั footer - background-color: rgb(187, 51, 51); - text-align: center; - font-size: 14px; ใส่คาส่งั ตอ่ ไปนีใ้ ห้กับ footer - padding-left: 10%; - padding-top: 20px; - padding-bottom: 20px; - height: 50px;\"

42 ข้ันตอน รายการ ลายเซน็ 19 ใส่คาส่ังเพมิ่ เตมิ สาหรบั ภาพพน้ื หลัง 20 - background-repeat: no-repeat; 21 - background-attachment: fixed; 22 - background-size: cover; ใส่คาสั่ง ให้กบั Tag section คือ background-color: rgba(0, 0, 0, 0.521); 23 เพมิ่ class=\"row\" ไว้ใน div ชุดทส่ี อง ท่ีอยใู่ น Tag section <> สร้าง div เพมิ่ 2 ชดุ ใน div class=\"row\" ขอ้ 19 แล้วเตมิ class=\"col-sm-5\" 24 และ class=\"col-sm-7\" ลงไปใน div ท่สี ร้างเพม่ิ ทงั้ สอง 25 ใน class=\"col-sm-5\" ใหส้ ร้าง Tag img ใส่รูปลงไปดงั นี้ 26 <img src=\"01.jpg\" alt=\"food\"> ใส่ CSS ใหก้ บั รูปภาพโดยใชค้ าสง่ั น้ี padding-top: 20px; 27 ใส่ CSS ให้กบั รปู ภาพโดยใชค้ าสงั่ น้ี width: 100%; 28 ใน class=\"col-sm-7\" ให้ใสข่ อ้ มูลส่วนผสม โดยใหค้ าวา่ สว่ นผสมอย่ใู น Tag b ให้ อกั ษรหนา้ 29 ใส่ Tag p ครอบ สว่ นผสม และ Tag br เพอื่ Enter ส่วนผสมแตล่ ะอย่าง 30 นาเนื้อหาสดุ ท้ายมาใส่ div ชดุ ท่ี 3 ใน Tag section โดยให้คาว่าวธิ ีทาอยใู่ น Tag b 31 ให้อกั ษรหน้า 32 ใส่ Tag p ครอบ วธิ ที า และ Tag br เพ่อื Enter แต่ละขน้ั ตอน ใสค่ าสง่ั ใน Tag p ดังนี้ padding-left: 5%; และ padding-right: 5%; 33 ใสข่ นาดอักษรใหก้ ับ Tag b ขนาด 25 px ใส่คาสง่ั ต่อไปนใ้ี นสว่ นของ Tag section ไดแ้ ก่ padding-left: 5%; padding-right: 34 5%; padding-top: 50px; padding-bottom: 50px; 35 ใส่คาส่งั ตอ่ ไปน้ีในส่วนของ Tag section ไดแ้ ก่ width: 80%; margin: auto; margin-top: 20px; margin-bottom: 20px; 36 ใส่ font-size: 20px; และ color: white; ในส่วนของ Tag body 37 ใส่คาสง่ั text-indent: 10% ; text-align: justify; ใน Tag p ของ div ที่หนงึ่ Tag 38 section 39 ไปยัง https://fonts.google.com/ 40 จากน้นั ทาการเลอื ก fonts ท่ตี ้องการ นา code ในส่วนของ STANDARD วางไวใ้ นสว่ นของ head นา code ในส่วนของ Specify in CSS วางไวใ้ นสว่ นของ CSS ใน Tag body Save ส่งใน bitserver ตามโฟลเดอร์ ชือ่ “ใบงาน CSS แกงส้มชะอมกงุ้ ”

43 แบบสอบถำมรูปแบบกำรเรียนรแู้ บบโครงงำนเป็นฐำนดว้ ยเกมมฟิ เิ คชันผ่ำนอุปกรณ์เคลอ่ื นที่ เพื่อส่งเสริมทกั ษะกำรสร้ำงผลงำนเชิงสรำ้ งสรรค์และทกั ษะกำรทำงำนเป็นทีม สำหรบั นกั ศึกษำประกำศนยี บัตรวชิ ำชพี ชั้นปที ่ี 1 (ประเมนิ โดยนกั ศึกษำ) คำช้แี จง: ทาเครอื่ งหมายลงใน  หรือเติมข้อความลงในช่องว่างตามความคดิ เห็นของทา่ น ตอนท่ี 1 อัตราการเลน่ เกม วิธกี ารเลน่ เกม และอปุ กรณท์ ่ีใช้ 1. ระดับความถใ่ี นการเล่นเกมส์ของนกั เรียน  ไมเ่ คยเล่น  ไมค่ ่อยได้เล่น  เลน่ แล้วแต่โอกาส  เล่นทกุ สัปดาห์  เล่นทุกวนั 2. วธิ กี ารเล่นเกมของนักเรยี น  เลน่ หลาย ๆ คน  เล่นคนเดียว 3. อปุ กรณท์ ีใ่ ช้ในการเลน่ เกมของนกั เรยี น  เลน่ บนอปุ กรณเ์ คล่ือนที่  เลน่ กบั เครอื่ งคอมพวิ เตอร์  เลน่ ทัง้ อุปกรณเ์ คล่อื นที่ และเครอื่ งคอมพวิ เตอร์ ตอนที่ 2 ความชอบในการเลน่ เกมของนักเรียน 1. ความชอบเล่นเกมของนกั เรียน  ไม่ชอบมากท่ีสดุ  ไม่ชอบ  เฉย ๆ  ชอบมาก  ชอบมากทสี่ ดุ 2. ความชอบการแข่งขันกบั เพอ่ื นในเกมของนกั เรยี น  ไม่ชอบมากท่สี ุด  ไม่ชอบ  เฉย ๆ  ชอบมาก  ชอบมากทสี่ ุด

44 ประวัตผิ ู้วิจัย ชือ่ งำนวิจัย เรือ่ ง การพัฒนารปู แบบการเรยี นรแู้ บบโครงงานเปน็ ฐานด้วยเกมมิฟิเคช่ัน ผา่ นอปุ กรณ์เคล่อื นที่เพื่อสง่ เสรมิ ทักษะการสรา้ งผลงานเชิงสรา้ งสรรค์ ช่อื ผู้วิจยั และทกั ษะการทางานเป็นทีมสาหรับนักศกึ ษาประกาศนียบัตรวชิ าชพี ช้ันปที ี่ 1 สำขำ อาจารยศ์ ิริพร โสสระเกษ ปีกำรศกึ ษำ คอมพิวเตอรธ์ ุรกิจ ปกี ารศกึ ษา 2561 ประวัติ ประวตั กิ ำรศึกษำ พ.ศ. 2559 สาเร็จการศึกษาปริญญาครุศาสตร์อุตสาหกรรมบัณฑิต สาขาวิชาเทคโนโลยีคอมพิวเตอร์ ภาควิชาคอมพิวเตอร์ศกึ ษา คณะครศุ าสตร์อุตสาหกรรม มหาวิทยาลยั เทคโนโลยพี ระจอมเกล้าพระนครเหนอื พ.ศ. 2555 สาเร็จการศึกษาระดับประกาศนียบัตรวิชาชีพชั้นสูง สาขาเทคโนโลยีสารสนเทศและการ สอ่ื สาร วทิ ยาลยั เทคนคิ ระยอง พ.ศ. 2553 สาเร็จการศึกษาประกาศนยี บัตรวชิ าชพี สาขาคอมพิวเตอรธ์ ุรกิจ วทิ ยาลัยเทคนคิ ระยอง ประวตั กิ ำรทำงำน พ.ศ. 2555 – 2558 ตาแหนง่ กราฟกิ ดไี ซน์ บรษิ ทั เอส. อี. เอ. เอน็ จเิ นียร่ิง จากัด พ.ศ. 2559 ตาแหนง่ ครูผ้สู อน สถาบันพฒั นาเดก็ สมองไว พ.ศ. 2559 – ปจั จุบนั อาจารยป์ ระจาสาขาคอมพวิ เตอรธ์ รุ กจิ วิทยาลยั เทคโนโลยพี งษ์สวสั ดิ์