บทที่ 2 โครงงาน คอมพิวเตอร์ สื่อเพื่อการศึกษาคณิตศาสตร์
- 1. บทที่ 2 เอกสารที่เกี่ยวข้อง ในการจัดทาโครงงานคอมพิวเตอร์ พัฒนาสื่อเพื่อการศึกษา เว็บไซต์ สื่อเพื่อการศึกษาคณิตศาสตร์ ให้ความรู้เกี่ยวกับการสาธิตขั้นตอนการคานวณ คณะผู้จัดทาได้ศึกษาข้อมูล เอกสารที่เกี่ยวข้อง ดังนี้ 2.1 การสาธิตขั้นตอนการคานวณ 2.2 เว็บไซต์ ( Website ) 2.3 โปรแกรม Adobe Dreamweaver 2.1 การสาธิตขั้นตอนการคานวณ การสาธิตขั้นตอนการคานวณคือการอธิบายและแสดงวิธีการแก้ปัญหาทางคณิตศาสตร์อย่างละเอียด และเป็นขั้นเป็นตอน โดยการสาธิตนี้มีจุดประสงค์เพื่อให้ผู้เรียนเข้าใจถึงวิธีการและเหตุผลในการคานวณแต่ละ ขั้นตอน การสาธิตขั้นตอนการคานวณช่วยให้เห็นภาพรวมของกระบวนการทั้งหมดตั้งแต่การเริ่มต้นจนถึงการ ได้คาตอบสุดท้าย การสาธิตขั้นตอนการคานวณสามารถครอบคลุมหัวข้อต่างๆ เช่น การแก้สมการ การหา ค่าเฉลี่ย และการคานวณทางเรขาคณิต ตัวอย่าง การคานวณค่าเฉลี่ย สมมติว่าเรามีชุดตัวเลขดังนี้: 2, 4, 6, 8, และ 10 และเราต้องการหาค่าเฉลี่ยของชุดตัวเลขนี้ การคานวณค่าเฉลี่ยเริ่มต้นด้วยการหาผลรวมของตัวเลขทั้งหมดในชุด โดยการบวกตัวเลขแต่ละตัวเข้า ด้วยกัน การบวกเป็นการนาจานวนทั้งหมดที่มีมารวมกันเพื่อหาผลรวมรวม ดังนั้นเราจะเริ่มจากการบวก 2 กับ 4 จะได้ผลลัพธ์เป็น 6 จากนั้นเราจะนาผลลัพธ์ที่ได้ไปบวกกับ 6 จะได้ 12 ต่อมาเราจะนา 12 ที่ได้ไปบวกกับ 8 จะได้ 20 สุดท้ายเราจะนา 20 ไปบวกกับ 10 จะได้ 30 ผลรวมของตัวเลขทั้งหมดในชุดนี้คือ 30 หลังจากที่เราได้ผลรวมของตัวเลขทั้งหมดแล้ว ขั้นตอนต่อไปคือการหาจานวนตัวเลขในชุดข้อมูลนี้ ใน กรณีนี้เราจะนับจานวนตัวเลขที่มีอยู่ในชุด ซึ่งก็คือ 2, 4, 6, 8, และ 10 เมื่อนับแล้วจะพบว่ามีตัวเลขทั้งหมด 5 ตัวในชุดนี้ เมื่อเรารู้จานวนตัวเลขในชุดข้อมูลแล้ว เราจะทาการหารผลรวมของตัวเลขทั้งหมดด้วยจานวนตัวเลข ในชุด เพื่อหาค่าเฉลี่ยของชุดข้อมูล การหารเป็นการแบ่งผลรวมออกเป็นส่วนที่เท่า ๆ กันตามจานวนตัวเลขที่มี ในชุด ในที่นี้เราจะนาผลรวม 30 มาหารด้วยจานวนตัวเลขในชุดคือ 5 การหาร 30 ด้วย 5 จะได้ผลลัพธ์เป็น 6 ซึ่งก็คือค่าเฉลี่ยของชุดตัวเลขนี้
- 2. ดังนั้นจากขั้นตอนที่ได้อธิบายมา เราสามารถสรุปได้ว่าค่าเฉลี่ยของชุดตัวเลข 2, 4, 6, 8, 10 คือ 6 การคานวณค่าเฉลี่ยนี้เป็นวิธีการทางสถิติที่ใช้ในการหาค่ากลางของข้อมูล การที่เราหาค่าเฉลี่ยจะช่วยให้เรา สามารถเข้าใจภาพรวมของข้อมูลชุดนั้นได้ดียิ่งขึ้น โดยค่าเฉลี่ยจะเป็นค่าที่แสดงถึงค่ากลางที่สมดุลระหว่าง ตัวเลขในชุดข้อมูลทั้งหมด 2.2 เว็บไซต์ ( Website ) เว็บไซต์ (อังกฤษ: Website, Web site หรือ Site) หมายถึง โครงสร้างของข้อมูลที่ถูกจัดเตรียมไว้ใน รูปแบบของหน้าเว็บหรือหน้าเว็บเพจ เพื่อให้ผู้ใช้งานสามารถเข้าถึงข้อมูลและบริการต่างๆ ที่เกี่ยวข้องได้ผ่าน ทางอินเทอร์เน็ต ซึ่งประกอบไปด้วยสิ่งต่างๆ เช่น ข้อความ ภาพถ่าย วิดีโอ แบบฟอร์มให้กรอกข้อมูล และการ เชื่อมต่อกับแหล่งข้อมูลอื่นๆ ประกอบด้วยหน้าเว็บหลายหน้า ซึ่งแต่ละหน้ามีเนื้อหาต่างกันตามวัตถุประสงค์ และเนื้อหาที่ต้องการแสดงผล ผู้ใช้งานสามารถเข้าถึงข้อมูลที่ต้องการได้ง่ายๆ โดยใช้เว็บเบราว์เซอร์และ เชื่อมต่ออินเทอร์เน็ต หลักในการออกแบบเว็บไซต์ ขั้นตอนที่ 1 กาหนดโครงสร้างของเว็บไซต์ การสร้างเว็บไซต์นั้นควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า Site Map ขั้นตอนที่ 2 กาหนดการเชื่อมโยงระหว่างเว็บเพจ กาหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกันเพื่อให้กลับไปกลับมา ระหว่าง หน้าต่างๆ ได้ โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์กัน ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า สามารถออกแบบหน้าเว็บเพจแต่ละหน้าให้สวยงาม โดยเฉพาะในเว็บเพจหน้าแรก ซึ่งเรียกว่า โฮมเพจนักเรียนควรออกแบบให้สวยงามเพื่อดึงดูดความสนใจของผู้เข้าชมในขั้นตอนการออกแบบ นี้ บางทีอาจเรียกว่าการออกแบบเลย์เอาท์ (Lay Out) สามารถทาได้โดยการเขียนลงในกระดาษ หรือใช้ โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบก็ได้ ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า นาเว็บเพจที่ออกแบบไว้มาสร้างโดยใช้ภาษาhtml หรืออาจใช้โปรแกรมสาเร็จรูป เช่น FrontPage, Macromedia Dreamweaverหรือโปรแกรมสาเร็จรูปอื่น ๆ ตามความถนัด ขั้นตอนที่ 5 การลงทะเบียนขอพื้นที่เว็บไซต์ การเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้ว เข้าสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บุคคลอื่นๆ สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการ คือ นาเว็บไซต์ที่เราสร้างขึ้นไปไว้บนพื้นที่ที่ให้บริการ (Web Hosting) ซึ่งมีพื้นที่ ที่ให้บริการฟรี และแบบที่ต้องเสียค่าบริการ
- 3. ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์ หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่สาหรับฝากเว็บไซต์แล้ว ให้ใช้โปรแกรม สาหรับอัปโหลด (Upload) เช่นโปรแกรม CuteFTP เพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของเรา ผ่านทางระบบเครือข่ายอินเทอร์เน็ตได้ หลักในการสร้างเว็บเพจ 1. วางแผน (Planning) กาหนดวัตถุประสงค์ (Define Objectives) กาหนดว่าเว็บเพจต้องการให้บริการอะไรแก่ผู้ใช้ และ วัตถุประสงค์หลักคืออะไร ศึกษาความต้องการ (Gather Requirements) วิเคราะห์ความต้องการของผู้ใช้และธุรกิจ เช่น การสร้างโมดูลพิเศษ การส่งอีเมล์ และอื่น ๆ วางแผนโครงสร้างเว็บไซต์ (Site Structure Planning) ออกแบบโครงสร้างของเว็บไซต์ เช่น การ สร้างเมนู การจัดกลุ่มเนื้อหา เป็นต้น 2. ออกแบบ (Design) ออกแบบส่วนต่อประสาน (UI Design) ออกแบบส่วนต่อประสานผู้ใช้ให้เข้าใจง่ายและใช้งานได้ ง่าย ออกแบบกราฟิก (Graphic Design) สร้างกราฟิกและภาพประกอบที่เข้ากับบรรยากาศของ เว็บไซต์ เลือกใช้สี (Color Scheme) เลือกใช้สีที่เข้ากับแบรนด์และมุมมองที่ต้องการสร้าง 3. พัฒนา (Development) เขียนโค้ด (Coding) การเขียนโค้ด HTML, CSS, JavaScript เพื่อสร้างโครงสร้างและส่วนต่อ ประสานของเว็บไซต์ การเชื่อมต่อฐานข้อมูล (Database Integration) หากต้องการข้อมูลที่ได้จากฐานข้อมูล เช่น ระบบสมาชิกหรือการจัดการสินค้า 4. ทดสอบและปรับปรุง (Testing and Debugging) ทดสอบความถูกต้อง (Functionality Testing) ทดสอบความสามารถในการทางานของเว็บไซต์ และประสิทธิภาพในการโหลดข้อมูล ทดสอบแบบโต้ตอบ (Usability Testing) ทดสอบว่าผู้ใช้สามารถนาเว็บไซต์ไปใช้งานได้อย่าง เหมาะสมหรือไม่ ปรับปรุงแก้ไข (Debugging) แก้ไขปัญหาและข้อบกพร่องที่พบในระหว่างการทดสอบ
- 4. 5. การเผยแพร่ (Deployment) การเปิดให้บริการ (Launch) การเผยแพร่เว็บไซต์ให้กับผู้ใช้งาน การดูแลรักษา (Maintenance) ดูแลและปรับปรุงเว็บไซต์เพื่อให้มีประสิทธิภาพและป้องกัน ปัญหาที่อาจเกิดขึ้น 6. การประเมิน (Evaluation) วัดผล (Evaluation) ตรวจสอบว่าเว็บไซต์สามารถสะท้อนวัตถุประสงค์และความต้องการของผู้ ใช้ได้หรือไม่ ปรับปรุง (Improvement) อัพเดทและปรับปรุงเว็บไซต์เพื่อให้เข้ากับการเปลี่ยนแปลงใน สภาพแวดล้อมหรือความต้องการของผู้ใช้ 2.3 โปรแกรม Adobe Dreamweaver รู้จักกับ Dreamweaver Dreamweaver เป็นโปรแกรมที่ใช้สาหรับการพัฒนาเว็บไซต์ที่มีชื่อเสียงมากในวงการ IT และ นักพัฒนาเว็บไซต์ตั้งแต่ช่วงปี 1990s โดยเฉพาะในช่วงที่เป็นของ Macromedia ก่อนที่จะถูก Adobe ซื้อไปใน ปี 2005 และต่อมาพัฒนาให้เป็นส่วนหนึ่งของชุด Creative Cloud ของ Adobe ในปัจจุบัน ประวัติและพัฒนาของ Dreamweaver 1. เริ่มต้นโดย Macromedia Dreamweaver ได้รับการพัฒนาตั้งแต่ช่วงปี 1997 โดยบริษัท Macromedia เป็นโปรแกรมที่ รวบรวมคุณสมบัติการพัฒนาเว็บไซต์ในตัวเดียว ซึ่งทาให้นักพัฒนาสามารถเขียนโค้ด HTML, CSS, JavaScript, และภาษาโปรแกรมต่าง ๆ ได้ในเครื่องเดียวกัน มีเครื่องมือในการออกแบบ ส่วนต่อประสานผู้ใช้ (UI) และเครื่องมือกราฟิกในโปรแกรมเดียว 2. การเป็นส่วนหนึ่งของ Adobe Creative Suite หลังจากที่ Adobe ซื้อ Macromedia ในปี 2005 Dreamweaver กลายเป็นส่วนหนึ่งของชุด Creative Suite ของ Adobe ซึ่งประกอบด้วยโปรแกรมต่าง ๆ ที่ใช้ในงานด้านกราฟิกและ สร้างสรรค์ เช่น Photoshop, Illustrator, InDesign, และอื่น ๆ 3. การพัฒนาต่อเนื่องใน Adobe Creative Cloud Dreamweaver กลายเป็นส่วนหนึ่งของ Adobe Creative Cloud ที่เป็นแพลตฟอร์มบนคลาวด์ ที่นาเสนอโปรแกรมต่าง ๆ ของ Adobe ให้ใช้งานแบบอับเดทและเชื่อมต่อกับบริการคลาวด์อื่น ๆ ของ Adobe ได้ง่ายขึ้น เช่น Adobe Fonts, Adobe Stock, และ Creative Cloud Libraries
- 5. คุณสมบัติที่สาคัญของ Dreamweaver 1. รองรับหลายภาษาโปรแกรม Dreamweaver รองรับการพัฒนาหลายภาษาโปรแกรมที่ใช้ในการ พัฒนาเว็บไซต์ เช่น HTML, CSS, JavaScript, PHP, ASP, ColdFusion ซึ่งทาให้นักพัฒนาสามารถ ทางานได้หลากหลายตามความต้องการของโปรเจกต์ 2. การออกแบบและการจัดการส่วนต่อประสานผู้ใช้ (UI) Dreamweaver มีเครื่องมือที่ช่วยในการ ออกแบบ UI โดยที่นักพัฒนาไม่จาเป็นต้องมีความเชี่ยวชาญในด้านกราฟิก สามารถลากและวาง องค์ประกอบต่าง ๆ เพื่อสร้างหน้าต่างและส่วนต่อประสานผู้ใช้ได้ง่าย 3. การจัดการไฟล์และโครงสร้างเว็บไซต์ มีเครื่องมือที่ช่วยในการจัดการโครงสร้างของเว็บไซต์ ซึ่ง สามารถจัดการไฟล์และโฟลเดอร์ของโปรเจกต์ได้อย่างสะดวก 4. การเชื่อมต่อกับฐานข้อมูล Dreamweaver รองรับการเชื่อมต่อและจัดการกับฐานข้อมูลหลายรูปแบบ เช่น MySQL, Microsoft SQL Server, Oracle ซึ่งช่วยให้สามารถพัฒนาเว็บแอปพลิเคชันที่มีการ จัดการข้อมูลแบบฐานข้อมูลได้โดยง่าย 5. การทดสอบและดูผลลัพธ์ มีเครื่องมือในการทดสอบและดูผลลัพธ์ของเว็บไซต์ที่พัฒนาได้ทันทีใน หน้าต่างเดียวกัน ทาให้สามารถปรับแก้และทดสอบโค้ดได้อย่างมีประสิทธิภาพ 6. การสนับสนุน Extension และการขยายตัว Dreamweaver มีส่วนขยายที่สามารถติดตั้งได้เพื่อเพิ่ม ความสามารถเสริมในการพัฒนา เช่น Extension สาหรับการจัดการระบบเว็บไซต์, การเชื่อมต่อกับ บริการภายนอก, หรือเครื่องมือสาหรับการทดสอบและปรับปรุง