strict warning: Only variables should be passed by reference in /home/tgv/htdocs/modules/book/book.module on line 559.

การสร้างสื่อการเรียนรู้ออนไลน์ บน www.thaigoodview.com

รูปภาพของ ssspoonsak
ขณะนี้อยู่ระหว่างการปรับปรุงให้ละเอียดยิ่งขึ้น 

การสร้างสื่อการเรียนรู้ออนไลน์ บน www.thaigoodview.com

โดย ครูพูนศักดิ์ สักกทัตติยกุล

             การสร้างสื่อการเรียนรู้ออนไลน์ เป็นการสร้างแหล่งความรู้ที่ง่ายมาก ผู้สร้างไม่จำเป็นต้องมีความรู้ในการสร้างเว็บเพจเลยก็สามารถทำได้ เนื่องจากเว็บไซต์ www.thaigoodview.com ใช้ Drupal เป็นซอฟต์แวร์บริหารจัดการเนื้อหาเว็บ (content management system - CMS) ที่ชนะรางวัล Open Source CMS ของสำนักพิมพ์ Packt Publishing ในสาขา Overall Open Source CMS Award สองปีติดต่อกัน ทั้งปี 2007 และ 2008 นอกจากนี้ในปี 2008 นั้น Drupal ยังชนะรางวัลสาขา Best PHP Based Open Source CMS เพิ่มอีกหนึ่งรางวัลด้วย

             สำหรับประโยชน์ที่จะได้รับในการสร้างสื่อการเรียนรู้ออนไลน์ มีดังนี้

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

              ลองดูตัวอย่างสื่อการเรียนรู้ออนไลน์ คลิกที่นี่

 เนื้อหาในการเรียนรู้มีดังนี้

       หลังจากสมัครสมาชิกแล้ว ขั้นตอนต่อไปคือการนำข้อมูลใส่ลงไปในสื่อออนไลน์ สิ่งที่จะใส่ลงในสื่อออนไลน์ได้นั้น ส่วนใหญ่ก็จะเป็นข้อความและภาพนิ่ง หรืออาจจะให้ใส่ภาพเคลื่อนไหว เช่น Flash หรือภาพยนตร์ เป็นต้น 
       ขั้นตอนการใส่ข้อมูลลงในสื่อออนไลน์ ที่เว็บไซต์ www.thaigoodview.com มีดังนี้

       1. หลังจากสมัครสมาชิกแล้วให้เข้าสู่ระบบ เมื่อเข้าสูระบบ จะเห็นข้อความ สวัสดี คุณ...... แทนข้อความ เข้าสู่ระบบ ดังรูปที่ 1

 
รูปที่ 1

 

          1.1. คลิกเมนู “สร้างเนื้อหา” (บล็อกทางด้านขวามือ-รูปที่ 2)


รูปที่ 2  

          1.2. สำหรับสมาชิกทั่วไปจะได้รับสิทธิ์ในการสร้างสิ่งต่างๆ ดังต่อไปนี้ กระทู้ ข่าว บล็อก สื่อการเรียนรู้ และเพื่อนบ้าน นอกจากนี้ยังมีพื้นที่สำหรับเก็บไฟล์รูปอีก 1 เมกกะไบต์ (ถ้าต้องการพื้นที่เพิ่มเติมแจ้งได้ที่ครูพูนศักดิ์ สักกทัตติยกุล 081-8693782)
          1.3. เนื้อหาที่สร้างขึ้นมาแต่ละครั้งจะมี URL เป็นของตนเอง ดังนี้
                 http://www.thaigoodview.com/node/หมายเลขตามลำดับการสร้าง
          1.4. คลิกเลือกเมนูสร้าง “สื่อการเรียนรู้” ดังรูปที่ 3 จะได้หน้าต่างใหม่ดังรูปที่ 4


รูปที่ 3

 

  
รูปที่ 4


             1.4.1. ใส่ ชื่อสื่อการเรียนรู้ ที่ต้องการสร้างลงในฟิลด์ ชื่อสื่อการเรียนรู้ (หมายเลข 1 รูปที่ 4)
                    จะใส่เป็นภาษาอะไรก็ได้ แต่ควรเป็นข้อความที่เป็นหัวใจของเนื้อหาในหน้านั้น เพราะมันคือส่วนที่เรียกว่าเป็น
                    <title>…..</title>
             1.4.2. เลือกสาระวิชา และช่วงชั้น ที่ต้องการ (หมายเลข 2 และหมายเลข 3 รูปที่ 4)
             1.4.2. ใส่เนื้อหาของบล็อกลงในฟิลด์ เนื้อหา (หมายเลข 6 รูปที่ 4)
                       เป็นส่วนที่อยู่ระหว่าง <body>…</body> ซึ่งสามารถใส่ข้อความ ภาพนิ่ง ภาพเคลื่อนไหว Flash ภาพยนตร์ เสียง ได้ นอกจากนี้ยังสามารถใส่สัญลักษณ์พิเศษ Emotions และการสร้างตาราง และที่จะขาดเสียมิได้ในการสร้างเว็บเพจคือ การเชื่อมโยง (Link) ซึ่งวิธีการทั้งหมดโดยละเอียดจะได้กล่าวต่อไป
             1.4.3. ท่านสามารถใช้เครื่องมือที่มีในฟิลด์เนื้อความเพื่อช่วยพิมพ์ ปรับแต่ง แทรกรูปภาพ แทรกตาราง โดยไม่ต้องมีความรู้ HTML (หมายเลข 5 รูปที่ 4)
             1.4.4. ถ้าท่านมีความรู้ HTML สามารถคลิกที่เมนู ปิดใช้งานแถบเครื่องมือ(disable rich-text) ใต้ฟิลด์เนื้อหา เพื่อสร้างสื่อออนไลน์ด้วยคำสั่ง HTML (หมายเลข 7 รูปที่ 4) หรือจะคลิกที่ปุ่มเครื่องมือ หมายเลข 5 รูปที่ 4 ตรง HTML
             1.4.5. คลิกปุ่ม “ยืนยัน” เพื่อให้ระบบทำการสร้างสื่อออนไลน์ที่ท่านสร้างขึ้นมาโดยอัตโนมัติ (หมายเลข 13 รูปที่ 4)
             1.4.6. หากต้องการกลับมาแก้ไข ก็ให้เข้า URL ของเนื้อหาที่ต้องการแก้ไข แล้วคลิกเลือกเมนู แก้ไข เมื่อทำการแก้ไขเป็นที่เรียบร้อยแล้ว คลิกปุ่ม “ยืนยัน” เพื่อบันทึกข้อมูลที่ได้ทำการแก้ไข
          หมายเหตุ ฟิลด์ที่มีเครื่องหมายดอกจันสีเหลือง หมายความว่าฟิลด์นั้นจำเป็นต้องกรอกข้อมูล 
          1.5 การใส่เนื้อหาของสื่อออนไลน์ลงในฟิลด์ เนื้อหา
                • กรณีที่เป็นข้อความ ท่านสามารถพิมพ์ลงไปได้เลย โดยมีเครื่องมือให้ท่านสามารถตกแต่งข้อความให้น่าสนใจได้ เช่น 
                    ตัวหนา ตัวเอียง ขีดเส้นใต้ 
                    จัดชิดซ้าย จัดกึ่งกลาง จัดชิดขวา 
                     การใส่ปุ่มอัตโนมัติ 
                   การย่อหน้า 
                   การใส่สีตัวอักษร และการเน้นข้อความ
                     ยกกำลัง ตัวห้อย
                  สำหรับต้องการเลือกชนิดและขนาดของ Font ระบบ CMS ได้ตั้งค่าเริ่มต้นให้เป็นชนิดและขนาด Font มาตรฐานแล้ว คือ Font Tahoma ขนาด 10 พิกเซล ซึ่งสามารถดูภาษาไทยได้ทุกบราวเซอร์
                  ดังนั้น ถ้าจะ Copy ข้อความจากที่ใดๆ มา เช่น จาก Word PowerPoint หรือจากเว็บไซต์ต่างๆ ต้องวางลงในโปรแกรม Notepad ก่อน เพื่อล้างคำสั่งการจัดรูปแบบต่างๆ ออก แล้ว copy จาก Notepad มาวางใหม่ จะไม่เกิดปัญหาในการจัดข้อความ
                • กรณีเป็นสัญลักษณ์พิเศษ ให้คลิกที่ปุ่ม  (Insert custom Character) จะได้หน้าต่างใหม่ดังรูปที่ 5 ก็สามารถเลือกสัญลักษณ์ตามที่ต้องการได้


รูปที่ 5


                • กรณีเป็น Emotions ให้คลิกที่ปุ่ม   (Emotions) จะได้หน้าต่างใหม่ดังรูปที่ 6 ก็สามารถเลือกภาพ Emotions ตามที่ต้องการได้


รูปที่ 6


                • กรณีการแทรกรูปภาพ 
                  กรณีแทรกรูปภาพ ให้คลิกที่ไอคอนรูปต้นไม้ (Insert/edit image) ดังรูปที่ 7


รูปที่ 7

                จะได้หน้าต่างใหม่ขึ้นมาดังรูปที่ 8 ให้คลิกปุ่ม Browse ตามลูกศรชี้


รูปที่ 8

                จะได้หน้าต่างใหม่ขึ้นมาดังรูปที่ 9


รูปที่ 9

                บริเวณ 1 หมายถึง ไฟล์ที่ได้ Upload ไปเก็บไว้ที่ Folder ของท่านแล้ว จะมี 5 คอลัมน์ คือ
                             Filename คือ ชื่อของไฟล์
                             Size ขนาดของไฟล์
                             Dimension ขนาดของภาพ ความกว้างและสูงของภาพ มีหน่วยเป็นพิกเซล 
                                            (ไม่เกิน 500x500 พิกเซล ไม่เช่นนั้นจะไม่สามารถอัพโหลดขึ้นบนเว็บได้)
                             Date วันเดือนปีที่ upload ไฟล์
                             Operation การดำเนินการกับภาพ ได้แก่ ลบ ลบภาพทิ้ง add ใส่ภาพลงในสื่อที่สร้าง
                บริเวณ 2 หมายถึง ภาพที่ถูกเลือกจะแสดงให้เห็น 
                             Directory : file/u29 หมายถึงที่อยู่ของภาพที่แสดงอยู่

                ให้คลิกปุ่ม Browse ตรงตำแหน่งที่ 4 จากรูปที่ 9 เพื่อเลือกไฟล์ภาพจากที่เก็บในไว้เครื่องคอมพิวเตอร์ เมื่อเลือกไฟล์ภาพที่ต้องการได้แล้วให้คลิกปุ่ม Upload File ตรงตำแหน่งที่ 5 จากรูปที่ 9 ก็จะได้ดังรูปที่ 10 



รูปที่ 10
 

                จากรูปที่ 10 จะได้ไฟล์ 1111.jpg เก็บไว้ในห้อง file/u29 ที่เว็บ www.thaigoodview.com เรียบร้อยแล้ว สามารถเรียกมาใช้งานเมื่อใดก็ได้โดยคลิกที่ ปุ่ม add หรือจะลบทิ้งก็คลิก ลบ (แต่ถ้าภาพที่จะลบ ได้เคยเลือกไปใช้งานแล้วและยังใช้งานอยู่ ห้ามลบเด็ดขาด เพราะจะทำให้งานที่ใช้ภาพดังกล่าว ไม่มีภาพปรากฏ)
                เมื่อคลิกปุ่ม add ก็จะปรากฏไฟล์ภาพ 1111.jpg ที่ช่อง Image URL ในหน้าต่างเดิมดังรูปที่ 11


รูปที่ 11

                จากรูปที่ 11 ช่อง Image URL ปรากฏที่อยู่ของภาพคือ /files/u29/1111.jpg ซึ่งหมายถึง
http://www.thaigoodview.com/files/u29/1111.jpg ถ้าไม่ต้องการปรับแต่งใดๆ แล้ว ให้คลิกปุ่ม “Insert” เพื่อแทรกรูปภาพที่เลือกไว้
                ในหน้าต่างตามรูปที่ 11 มีรายละเอียดในการปรับแต่งภาพดังนี้
                Image description คือรายละเอียดของภาพ จะใส่หรือไม่ก็ได้ (หลายคนนิยมใส่ว่านำภาพนี้มาจากที่ใด เป็นการอ้างอิง เช่น ภาพจาก http://www3.ipst.ac.th/images2/36yearsIPSTm2.jpg
                Alignment คือการกำหนดตำแหน่งที่จะวางรูปภาพ เช่น ถ้ามีข้อความอยู่ในบรรทัดเดียว จะให้อยู่อย่างไรกับข้อความ บน กลาง หรือล่าง และที่พิเศษคือสามารถกำหนดให้ภาพอยู่ทางซ้าย หรือทางขวา แล้วข้อความทั้งหมดอยู่ ทางขวาหรือซ้าย เช่น รูปที่ 12


รูปที่ 12 

                Dimensions คือขนาดของภาพ หน่วยเป็นพิกเซล ซึ่งภาพที่จะนำมาใช้งานนั้น
                Border คือขนาดของขอบภาพ
                Vertical space คือช่องว่างตามแนวตั้ง
                Horizontal space คือช่องว่างตามแนวนอน
                เมื่อตั้งค่าตามที่ต้องการแล้ว ก็คลิกที่ปุ่ม Insert ภาพก็จะมาปรากฏดังรูปที่ 13


รูปที่ 13

                หากต้องการแก้ไขภาพ ก็คลิกเลือกภาพที่จะแก้ไข แล้วคลิกปุ่มต้นไม้ก็จะประกฎหน้าต่างดังรูปที่ 3.10 ขึ้นมาให้แก้ไข

ข้อควรตรวจสอบ
                จากรูปที่ 3.8 บริเวณที่ 6 จะเป็นรายละเอียดว่าผู้ใช้งานได้ใช้พื้นที่ในการเก็บข้อมูลรูปภาพไว้เท่าไร เหลือเท่าไร ดังรูป
                Limits : File size = 100 KB หมายถึง ไฟล์ต้องมีขนาดไม่เกิน 100 kb.
                Dimension = 500x500 หมายถึง ภาพต้องกว้างและสูงไม่เกิน 500 พิกเซล
                Quota = 497.79 KB/15000 kb. หมายถึง ใช้พื้นที่เก็บภาพไป 497.79 kb. จากที่มีพื้นที่เก็บได้ 150000 kb.
                                                                 (กรณีที่พื้นที่เต็มสามารถแจ้งขอเพิ่มพื้นที่เก็บได้)
                Resize image หมายถึงต้องการให้ย่อภาพลงเป็นขนาดเท่าไรให้เติมลงช่อง เมื่อย่อแล้วทับไฟล์เดิมก็ไม่ต้องเลือก Create a copy แต่ถ้าต้องการเป็นไฟล์ใหม่ก็เลือก Create a copy
                ดังนั้นที่ต้องระมัดระวังคือ ขนาดของภาพ และพื้นที่ในการจัดเก็บข้อมูล
               

                • กรณีแทรก flash ให้คลิกที่ไอคอน รูปฟิล์ม  (Insert/edit embedded media) 
จะได้หน้าต่างดังรูปที่ 14 ก็ดำเนินการแทรก flash ได้ตามต้องการ โดยมีขั้นตอนการแทรกคล้ายกันกับการแทรกรูปภาพ

 
รูปที่ 14

                • การสร้างตาราง เมื่อคลิกที่ปุ่มสร้างตาราง   จะได้หน้าต่างใหม่ดังรูปที่ 15 เพื่อให้กำหนดค่าตารางที่ต้องการ และเมื่อได้กำหนดค่าตารางตามต้องการเป็นที่เรียบร้อยแล้ว คลิกปุ่ม “Insert”

 
รูปที่ 15

                  Columns คือ จำนวนคอลัมน์ของตารางที่ต้องการแทรก
                  Rows คือ จำนวนแถวของตารางที่ต้องการแทรก
                  Alignment คือ การจัดตำแหน่งของตาราง
                  Border คือ ขนาดของเส้นขอบตารางที่ต้องการแทรก มีหน่วยเป็นพิกเซล
                  Width คือ ความกว้างของตาราง มีหน่วยเป็นพิกเซล (ไม่ควรเกิน 500 พิกเซล)
                  Height คือ ความสูงของตาราง มีหน่วยเป็นพิกเซล
            ข้อควรระวัง หากกำหนดความกว้างของตารางเกิน 500 พิกเซล จะมีปัญหาการนำเสนอที่ทำให้เสียรูปแบบ

              • การเชื่อมโยง (Link) การเชื่อมโยง สามารถกระทำได้ 2 วิธี คือ เชื่อมโยงจากข้อความ และเชื่อมโยงจากรูปภาพ
                1. เชื่อมโยงจากข้อความ ให้เลือกข้อความที่จะเชื่อมโยง แล้วคลิกที่ปุ่มโซ่  จะได้หน้าต่างใหม่ดังรูปที่ 16 และเมื่อได้กำหนดค่าตามต้องการเป็นที่เรียบร้อยแล้ว คลิกปุ่ม “Insert”

 
รูปที่ 16

                  Link URL หมายถึง ที่อยู่ของเว็บไซต์ รูปภาพ ไฟล์เอกสาร สื่อ ฯ ที่ต้องการเชื่อมโยง
                  Target หมายถึง ลักษณะการเปิดเมื่อผู้ใช้คลิก ต้องการให้เปิด URL นั้นแทนที่หน้าต่างเดิม หรือเปิดหน้าต่างใหม่
                  Title หมายถึง ข้อความที่ต้องการให้แสดงเมื่อมีผู้ใช้นำเมาส์ไปแตะ link 

                2. เชื่อมโยงจากรูปภาพ ให้คลิกเลือกภาพที่ต้องการจะเชื่อมโยง แล้วคลิกที่ปุ่มโซ่  แล้วดำเนินการเหมือนเชื่อมโยงข้อความ

                 ในกรณีที่ต้องการยกเลิกการเชื่อมโยง ให้เลือกข้อความหรือรูปภาพที่มีการเชื่อมโยงอยู่ แล้วคลิกที่ปุ่มโซ่ขาด

              • การใช้คำสั่งขึ้นหน้าใหม่อัตโนมัติ  ด้วยคำสั่ง <!--pagebreak-->

 
รูปที่ 17

               1. กำหนดขอบเขตข้อมูลของแต่ละหน้าตามความต้องการ แล้วจดจำข้อมูลท้ายสุดที่ต้องการตัดขึ้นหน้าใหม่ไว้ หมายเลข 1 รูปที่ 17
               2. คลิกปิดใช้งานแถบเครื่องมือ(disable rich-text) หมายเลข 2 รูปที่ 17 ใต้ฟิลด์เนื้อความ จะสังเกตเห็นว่าแถบเครื่องมือจะหายไป และข้อมูลที่อยู่ในฟิลด์เนื้อความ จะกลายเป็นคำสั่งภาษา HTML ดังรูปที่ 18

รูปที่ 18


               3. หาตำแหน่งที่ต้องการให้ข้อมูลถูกตัดขึ้นหน้าใหม่ (ที่จำไว้ในข้อ 1) เมื่อพบแล้วให้ พิมพ์คำสั่ง <!--pagebreak--> ท้ายข้อมูลที่ต้องการตัดขึ้นหน้าใหม่ ดังรูปที่ 19


รูปที่ 19

               4. เมื่อแทรกคำสั่งเรียบร้อยแล้ว คลิกปุ่ม “ยืนยัน” จะพบว่าข้อมูลถูกตัดขึ้นหน้าใหม่อัตโนมัติ โดยมี link เชื่อมโยงไปยัง
แต่ละหน้าที่ทำการแบ่งไว้ ดังรูปที่ 20


รูปที่ 20

สร้างโดย: 
ครูพูนศักดิ์ สักกทัตติยกุล โรงเรียนสตรีศรีสุริโยทัย กรุงเทพมหานคร

ใช้โปรแกรมอื่นทำได้มั้ยค่ะ
แล้วอยู่โรงเรียนอาชีวะเข้าประกวด
สื่อดิจิตัลเพื่อการเรียนรู้ได้มั้ยค่ะ ปวช.

อาจารย์คะ พื้นที่เก็บของนู๋ มันไม่พออีกแล้วค่ะ

รบกวนเพิ่มให้นู๋ด้วยนะค๊า

ขอบคุณค๊า^^

ตอนที่นู๋อัพโหลดภาพ สื่อการเรียนรู้เสร็จ

มันขึ้น ว่า You don't have enough free space.

คือ นู๋ ต้องการเพิ่มพื้นที่ค่ะ

ช่วยเพิ่มพื้นที่ให้นู๋ด้วยนะคะ

ขอบคุณค่ะ

ครูพูนคะ

ขอคำแนะนำการเขียนลิงค์จากหน้าแรกที่ลิงค์ไปยังหัวข้อต่างๆ

และจากจากหัวข้อที่ใช้อยู่ไปยังหัวข้อต่อไปค่ะ

 

แนะนำให้ไปศึกษาที่ใดด้วยค่ะ

ศึกษาจากวิธีการสร้างสื่อออนไลน์ไม่ค่อยเข้าใจค่ะ

อ่อนด้อยความรู้ด้านนี้จริงๆแต่น้องๆที่รร.เปลี่ยนชื่อให้เป็นพี่มานะค่ะ

ขอบคุณค่ะ

ครูเมธินี

 

ถ้าต้องการเผยแพร่โครงงานที่ทำก็ไปที่สร้างเนื้อหาใช่ไหมคะ

รูปภาพของ ssspoonsak

ใช่ครับผม

-----------------------------------------------------------------------------------------
ครูพูนศักดิ์ สักกทัตติยกุล
ทำด้วยใจ ไปด้วยฝัน

แล้วเนื้อหาเก่าต้องการแก้ไข ทำไงครับ

รูปภาพของ ssspoonsak

เข้าสู่ระบบ
เข้าไปที่เนื้อหาที่สร้างไว้
เลือกเมนูแก้ไข

-----------------------------------------------------------------------------------------
ครูพูนศักดิ์ สักกทัตติยกุล
ทำด้วยใจ ไปด้วยฝัน

ทำไมหนูลงรูปได้รูปเดียวอ่ะคะ ??

 ทั้งๆที่ไฟล์มันก็มีขนาดเท่ากันอ่ะค่ะ !

มหาวิทยาลัยศรีปทุม ผู้ใหญ่ใจดี
 

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

ช่วยกันนะครับ 
ไทยกู๊ดวิวจะได้อยู่นานๆ 
ไม่ถูกปิดเสียก่อน

ขอขอบคุณในความร่วมมือครับ

อ่านรายละเอียด

ด่วน...... ขณะนี้
พระราชบัญญัติลิขสิทธิ์ (ฉบับที่ 2) พ.ศ. 2558 
มีผลบังคับใช้แล้ว 
ขอให้นักเรียนและคุณครูที่ใช้งาน
เว็บ thaigoodview ในการส่งการบ้าน
ระมัดระวังการละเมิดลิขสิทธิ์ด้วย
อ่านรายละเอียดที่นี่ครับ

 

สมาชิกที่ออนไลน์

ขณะนี้มี สมาชิก 0 คน และ ผู้เยี่ยมชม 374 คน กำลังออนไลน์