LEARNING LOG WEEK 6 (14 DEC 09)

สิ่งที่ได้เรียนรู้

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


สิ่งที่จะค้นคว้าเพิ่มเติม

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


ข้อเสนอแนะ

อยากให้อาจารย์มีการให้ร่วมทำงานในห้องแบบคาบนี้บ่อยๆ เพราะว่าทำให้เกิดการแลกเปลี่ยนความรู้ระหว่างกลุ่มค่ะ

LERANING LOG WEEK 5 (30 NOV 09)

สิ่งที่ได้เรียนรู้
วันนี้ได้เรียนรู้ความรู้ต่างๆดังนี้

การสร้าง Animation อย่างง่ายด้วย Image Ready
ถือว่าเป็นการสร้างภาพ Animation ที่ง่าย ขั้นตอนไม่ซับซ้อน เพียงแค่เราเปิดรูปที่ต้องการขึ้นมาแล้วก็กำหนดเวลาการเคลื่อนไหวของภาพ ซึ่งยิ่งเวลาน้อยเท่าไหร่ ภาพก็จะยิ่งเคลื่อนไหวเร็วมากเท่านั้น หลังจากปรับค่าตามที่ต้องการได้แล้ว ก็ทำการ Save รูปภาพด้วยการคลิกที่ File>Save optimized as แล้วเลือก Save เป็นนามสกุล (*.gif) ถือเป็นการทำภาพ Animation ที่เสร็จสมบูรณ์
เริ่มต้นสร้างเว็บด้วยโปรแกรม Macromedia Dreamweaver

การตั้งค่าไซต์
เป็นสิ่งที่แรกที่ควรจะทำเสมอก่อนที่จะสร้าง Dreamweaver
- เปิดโปรแกรม แล้วเลือกเมนู Site > Manage Site
- คลิกปุ่ม New > Site
- ระบุชื่อ Site ที่ต้องการ แล้วคลิกปุ่ม Next
- ระบุตำแหน่งที่ใช้เก็บไฟล์ + ระบุชื่อโฟลเดอร์ (ถ้ามีอยู่แล้วก็ไม่ต้อง) และคลิกปุ่ม Next
- พบกับการตั้งค่า Remote Server เลือก None เพราะเราต้องการสร้างเว็บไซต์ html แบบธรรมดา
- คลิกปุ่ม Next แล้วตามด้วย Done
- จะกลับมาสู่หน้า Mange Site แล้วคลิกปุ่ม Done
- คลิกเลือกเว็บเพจขึ้นมาสัก 1 เว็บ แล้วทำการบันทึก เลือกคำสั่ง Save As
- ไฟล์จะถูกบันทึกลงโฟลเดอร์ที่เราตั้งค่า Site ไว้ รวมถึงรูปภาพต่างๆที่เราใช้ก็จะถูกบันทึกลงโฟลเดอร์นี้เช่นกัน

การตั้งค่าภาษา
ก่อนที่จะทำเว็บไซต์ทุกครั้งต้องมีการตั้งค่าภาษาก่อน เพราะมิเช่นนั้นจะแสดงภาษาไทยที่ไม่สมบูรณ์ และไม่สามารถกลับมาแก้ไขได้อีก ปัจจุบันเปลี่ยนจากการใช้ระบบ Window 874 ใช้ระบบ Unicode และ Utf 8 เพื่อความเป็นสากล
หลังจากมีไฟล์เว็บเพจแล้ว ให้คลิกเลือกคำสั่ง Page Properties (อยู่ด้านล่างตรงกลางของหน้ากระดาษ) เลือก Title/Encoding หลังจากนั้นตรง Encoding เลือก (Unicode UTF-8) คลิกปุ่ม OK ถือว่าเสร็จสิ้นการตั้งค่าเป็นภาษาไทยเรียบร้อย

การตั้งค่าเว็บเพจเบื้องต้น
การตั้งค่าเว็บเพจในขั้นแรกให้คลิกเลือกปุ่ม Page Properties จะมีคำสั่งมากมายปรากฏอยู่ที่กรอบของคำสั่ง Category โดยแต่ละคำสั่งมีรายละเอียดดังนี้
- Appearance การกำหนดค่าแสดงผลทั่วไปของเว็บเพจ เช่น กำหนดชุดฟอนต์ ขนาด สีของตัวอักษร สีของพื้นหลัง ภาพของพื้นหลัง เป็นต้น
- Links เป็นการกำหนดลักษณะการเชื่อมโยงภายในเว็บเพจ เช่น สีตัวอักษร
- Headings เป็นการกำหนดรูปแบบหัวข้อเอาไว้ใช้ในเว็บเพจ ใช้ Tag และตามด้วยรูปแบบที่จะใช้ได้เลย
- Title/Encoding เป็นการตั้งชื่อให้หัวของเว็บเพจที่อยู่บนเว็บ Browser
- Tracing Image เป็นการนำเอาภาพมาวางบนหน้าเว็บไซต์ เพื่อใช้เป็นแบบในการออก แบบ ภาพนี้จะเปรียบเสมือนแผ่นใส คือ เมื่อนำไปเปิดจริงแล้วภาพนี้จะไม่ปรากฏบนเว็บของเรา เมื่อปรับค่าทั้งหมดที่ต้องการแล้วให้กดปุ่ม OK เพื่อยืนยัน หากต้องการเปลี่ยนหัวของเว็บเพจก็สามารถเปลี่ยนได้ที่ด้านบนตรงคำว่า Title

การสร้างตาราง
ในการสร้างเว็บเพจ เราจะจัดวางวัตถุในรูปแบบเรียงต่อกันเท่านั้น จึงต้องมีการใช้ตารางเข้ามาช่วยในการจัดวางวัตถุต่างๆ วิธีการสร้างตาราง คือ Insert >Table หรือ คลิก Icon Table ในหน้าต่าง Common หลังจากนั้นปรับค่าตารางตามขนาดของเว็บเพจเรา
TIPS :
- ถ้าเลือกหน่วยเป็น Pixel ตารางจะมีความกว้างคงที่ตามที่เราตั้งไว้ แต่ถ้าเลือกเป็นเปอร์เซนต์ ตารางจะเปลี่ยน แปลงตามขนาดของหน้าจอ เช่น 100 % คือเต็มหน้าจอ
- กำหนดเส้นขอบ เลือก 0 เพื่อจะได้ไม่เห็นเส้นขอบในตอนแสดงผล
- หลังจากนั้นย่อตารางตาม Pattern ที่เราต้องการให้หน้าเว็บเราเป็น หลังจากนั้นปรับ Align ตามที่ต้องการ เช่น Center คือ ตรงกลาง

การใช้ตารางช่วยในการจัดองค์ประกอบของเว็บเพจ
นำโฟลเดอร์รูปภาพของเรามาไว้ในโฟลเดอร์ที่เราตั้งค่า Site ไว้ แล้วปฏิบัติตามขั้นตอนดังนี้
1. เลือก Insert > Image
2. ลากรูปที่เราต้องการใช้ลงไปในส่วนต่างๆ เช่น รูป Header ก็นำมาวางไว้ด้านบนสุด หลังจากนั้นจะปรากฎกล่องเพื่อใส่ข้อความเกี่ยวกับรูปนั้น แล้วกด OK
TIPS : หากภาพมีขนาดใหญ่กว่าตาราง เราสามารถทำให้ตารางรวมกันได้ โดยกด Shift คลิกขวาเลือก Table>Merge cell และหากตารางยังมีค่าไม่เท่ากับภาพ เราสามารถเปลี่ยนค่าตารางได้โดยเลือกที่ตัวเลขด้านล่างสุด เลือกคำสั่ง Make All Widths Consistent

การสร้าง Template
การทำหน้าให้เป็น Template มีประโยชน์ตรงที่เราจะได้ป้องกันการแก้ไขในส่วนที่เราไม่ต้องการแก้ไข ขั้นตอนการทำ Template มีดังนี้
1. เลือกหน้าที่เราต้องการให้เป็น Template แล้วกด File>Save as Template แล้วตั้งชื่อ Template แล้วกด Save
2. ให้คลิกที่ช่องตารางด้านขวา Insert ตารางขึ้นมาขนาด 1*1 แล้วเลือกที่ Vert. ให้เป็น Top เพื่อให้ตารางอยู่ด้านบน
3. หลังจากนั้นคลิกขวาที่ตาราง เลือกคำสั่ง Template Objects > Editable Region ตั้งชื่อพื้นที่แล้วกด Ok
4. บันทึกเว็บเพจให้เรียบร้อย (Save as) แล้วเปิดหน้าใหม่ขึ้นมาเพื่อทดสอบเว็บเพจ (New)
5. นำ Template ที่สร้างไว้มาใช้ เลือกเมนู Modify > Template > Apply template to page ให้เลือก template ที่ต้องการแล้วกด Select
6. Template ที่เปิดมาใหม่นี้จะแก้ไขได้เฉพาะพื้นที่บริเวณ Editable Region เท่านั้น
7. หลังจากนั้นเมื่อแก้ไขเสร็จแล้ว ควรจะบันทึกทุกครั้ง

การสร้าง Rollover Button
เปิดไฟล์ Index.html แล้วเลือกพื้นที่ที่จะใส่วัตถุ ปรับตำแหน่งการจัดวางด้วยคำสั่ง Align หลังจากนั้นคลิกที่ Icon รูปภาพ (บริเวณที่มีเครื่องหมายชี้ลง) แล้วเลือกคำสั่ง Rollover Image หลังจากนั้นเลือกรูปที่จะปรากฏบนหน้าเว็บเพจ (original image) และรูปที่จะปรากฏขณะเอาเมาส์ไปชื้ (Rollover image) และระบุข้อความที่จะปรากฏขณะเอาเมาส์ไปชี้ หลังจากนั้นกด OK และบันทึกไฟล์ หลังจากนั้นกด Preview จะปรากฏผลงาน

การแทรก Javascript
การแทรก Javascript นั้นไม่ยากมาก เพียงแต่เราไปหา Code ตามเว็บไซต์ต่างๆ เช่น Sanook.com แล้ว Copy Code มา หลังจากนั้นมาที่หน้าต่างโปรแกรม Dreamweaver แล้วกดที่ปุ่ม Code จะปรากฏ Code html ขึ้นมาเรานำ Code ที่เรา Copy มาไปวางไว้หลังคำสั่ง


สิ่งที่ต้องค้นคว้าเพิ่มเติม
1. หา Java script สวยๆเหมาะกับงานเว็บของตัวเองจากเว็บไซต์ต่างๆ
2. หาเทคนิค Dreamweaver ใหม่ๆมาแนะนำเพื่อนๆ
3. ทบทวนความรู้ใหม่ทั้งหมด เพื่อเตรียมทำเว็บของตัวเอง


ข้อเสนอแนะ
เนื้อหาหนักมากค่ะอาจารย์ อยากให้อาจารย์มีการเบรคให้สักหน่อยค่ะ

LEARNING LOG WEEK 4 (22 NOV 09)

สิ่งที่ได้เรียนรู้
ในคาบทฤษฎีที่ได้ฟังเพื่อนๆรายงาน WEBQUEST ส่วนตัวก็รู้สึกดี ได้รับความรู้และแนวคิดใหม่ๆอีกเยอะ เนื่องจากเพื่อนๆแต่ละคนก็จะมีความคิดที่หลากหลาย ได้รับฟังคำติชมจากเพื่อนๆ ก็ทำให้ได้ขยายกรอบความคิดของตัวเอง ซึ่งเราสามารถนำไปปรับใช้กับงานของตัวเองได้ดี
บทที่ 1 การสร้าง ANIMATION อย่างง่ายด้วย IMAGE READY และ PHOTOSCAPE
ADOBE IMAGE READY มีวิธีการทำดังนี้
1. ไปที่ FILE-IMPORT-FOLDER AS FRAMES เปิดภาพที่ต้องการทำให้เคลื่อนไหว
2. หลังจากนั้นภาพจะถูกเปิดขึ้นมาบริเวณด้านล่างมุมซ้าย ซึ่งสามารถปรับเปลี่ยนต่างๆได้ เช่น เวลา การวนซ้ำ
3. เมื่อปรับแต่งภาพจนถูกใจแล้ว ก็บันทึกภาพด้วยคำสั่ง FILE-SAVE OPTIMIZED AS นามสกุลไฟล์ที่เราจะใช้เราจะเลือกใช้เป็น IMAGES ONLY (*GIF)
ส่วนโปรแกรม PHOTOSCAPE ที่ข้าพเจ้าเคยใช้มาแล้ว โปรแกรมนี้ถือว่าสะดวกมากในการทำภาพเคลื่อนไหว เนื่องจากมีปุ่มกดให้ทำภาพเคลื่อนไหวสำเร็จอยู่แล้ว แค่เลือกภาพที่ต้องการทำให้เคลื่อนไหวทั้งหมดขึ้นมา แล้วก็ปรับแต่งเวลา รายละเอียดต่างๆตามใจชอบ แล้วกด SAVE ก็จะเสร็จได้ภาพเคลื่อนไหวตามที่ต้องการ

บทที่ 2 การใช้ SLICE ในการสร้างงานเว็บ
ขั้นที่ 1 คือ การแบ่งภาพออกเป็นส่วนๆ ตามที่ต้องการให้เกิดการเชื่อมโยง มีวิธีดังนี้
เปิดภาพที่ต้องการแบ่งการเชื่อมโยงด้วยโปรแกรม PHOTOSHOP หลังจากนั้นไปที่ VIEW-RULERS แล้วใช้เครื่องมือ MOVE ลากเส้นไม้บรรทัดออกมา หลังจากใช้เครื่องมือ SLICE TOOLS เพื่อแบ่งภาพออกเป็นส่วนๆตามที่ต้องการสร้าง SLICE
ขั้นที่ 2 คือ การกำหนดการเชื่อมโยงให้กับ SLICE
ขั้นนี้ก็ง่ายดายมาก เพียงแค่กดเครื่องมือ SLICE TOOLS แล้วคลิกขวาเลือกคำสั่ง EDIT SLICE OPTIONS แล้วกำหนดรายละเอียดต่างๆ ดังนี้
1. URL ระบุที่อยู่เว็บที่ต้องการเชื่อมโยงที่ช่อง URL
2. TARGET ระบุรูปแบบการเชื่อมโยงในช่อง TARGET
3. MESSAGE TEXT ระบุข้อความที่แสดงเมื่อเมาส์อยู่เหนือ
4. ALT TAG ระบุข้อความกำกับภาพ
ขั้นที่ 3 คือ การบันทึก SLICE เป็นเว็บเพจ
เปิดภาพที่ทำขั้นที่ 1 และ 2 เรียบร้อยขึ้นมา ไปที่ FILE-SAVE FOR WEB AND DEVICES เลือก SAVE ภาพแบบ JPEG หลังจากนั้นกด SAVE แล้วเลือกนามสกุลแบบ HTML and Images (*.html) แล้วกด SAVE เพียงเท่านี้เราก็จะได้ภาพที่สามารถนำไปสร้างเว็บเพจได้แล้ว


สิ่งที่ต้องเตรียมมา
1. เตรียมข้อมูลสำหรับการสร้าง WEBQUEST คู่ เช่น คิดภาระงานเพิ่มเติมจากเดิม คิดวิธีการประเมินผลตามเกณฑ์ RUBRICS เป็นต้น
2. หาสีที่เหมาะสมกับเว็บตัวเอง ตามคำติชมวันนี้

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

LEARNING LOG WEEK 3 (16 NOV 09)

วันนี้ข้าพเจ้าได้เรียนรู้เนื้อหา เกี่ยวกับการออกแบบบทเรียนการเรียนการสอนผ่านเว็บ ซึ่งมีหลักการทางการศึกษามาข้องเกี่ยว มี 2 แนวคิด คือ ADDIE’S หรือ generic model สำหรับการออกแบบพัฒนาสื่อให้มีประสิทธิภาพ กับ Gagne คือ การออกแบบเป็นขั้นเป็นตอน เพื่อให้ดีที่สุด โดยเริ่มแรกจะเริ่มกันที่ ADDIE’S
ADDIE’S สามารถนำมาปรับใช้กับการเรียนการสอนผ่านเว็บ โดยแต่ละตัวหมายถึง
Analyze คือ วิเคราะห์ ประกอบด้วย 3 ข้อย่อยๆ
- Goal เป้าหมายอะไร
- Audience กลุ่มเป้าหมายเป็นใคร
- Environment สภาพแวดล้ม บริบทต่างๆ
Design คือ การออกแบบ ประกอบด้วย
- การเขียน site structure
- การเขียน storyboard
- Interface Design
ขั้นตอนระหว่าง Design กับ Develop เรียกว่า Rapid Prototyping คือ การทำต้นแบบขึ้นมา เพื่อตกลงร่วมกันว่าเหมาะสม และนำมาพัฒนา ส่งไปยังประยุกต์ใช้
Develop คือ การพัฒนา เชื่อมต่อจากrapid ถ้าได้รับการยอมรับจากผู้สอน ก็จะนำมาพัฒนาต่อไป มอง 2 ส่วนคือ
- Tools คือ software ด้านต่างๆ เช่น เสียง วิดีโอ grapics
- Team คือ ทีมการออกแบบเว็บ เช่น ทีมรวบรวมเนื้อหา จัดเรียงเนื้อหา ทีมกราฟฟิค
Implement คือ การนไปใช้มี 2 ขั้นตอนหลักๆ คือ
- Pilots คือ การนำไปทดลองใช้ กับกลุ่มเป้าหมาย หรือผู้สอนทดลองใช้ เพื่อนำ feedback มาปรับปรุงแก้ไข
- Rollout plan คือ วางแผนการนำไปใช้จริง
Evaluation คือ การประเมินผล ผู้ประเมิน มี 2 ด้านคือ
- Sme มองในด้านเนื้อหาว่าอยู่ในหมวดอะไร เช่น ภาษาอังกฤษ หรืออาจจะให้sme ด้านเว็บ ตรวจสอบเนื้อหาบทเรียน
- Audience คือ ทดลองกับกลุ่มเป้าหมายจะใช้ได้หรือไม่ เพื่อประเมินผล
อีกแนวคิดคือ ทฤษฎีของ GAGNE มี 9 ขั้นตอน ดังนี้
1. Gain attention : เรียกความสนใจจากผู้เรียน เช่น ใช้ภาพ สี เสียง แอนนิเมชั่น วิดีโอ
2. Inform learners Objectives : ใช้ Homepage หรือ Announcement ในการบอกวัตถุประสงค์แก่ผู้เรียน และขั้นตอนกิจกรรมการเรียนรู้
3. Stimulate recall of prior learning : กระตุ้นความรู้เดิม เพื่อให้เชื่อมโยงกับความรู้ใหม่ โดยใช้ Communication tools (แบบประสานเวลา-ไม่ประสานเวลา) เช่น discussion board ในการถามตอบ
4. Present the content : การนำเสนอเนื้อหา อาจอยู่ในรูปแบบ PPT slide, CAI, website
5. Provide learning guidance : การให้คำแนะนำระหว่างเรียน เช่น บอกถึงขั้นตอนการเข้าร่วมกิจกรรมการเรียนรู้อย่างละเอียดในหน้า homepage หรือ FAQs, Helps (แบบ real time / non-real time)
6. Elicit performance : การตรวจสอบพฤติกรรมผู้เรียน เช่น แบบฝึกหัด (quiz ใน discussion board, chat room ใน communication tools แทนการอภิปราย แลกเปลี่ยนความเห็นในชั้นเรียน ส่งงาน)
7. Provide feedback : ให้ข้อเสนอแนะผู้เรียน โดยผ่านทาง Communication tools ต่างๆ เช่น discussion board, chat room, E-mail การให้ feedback ตอบกลับผู้เรียนผ่านทาง Assessment tools เช่น quiz, survey
8. Assess performance : การประเมินผล เช่น ตรวจสอบการเข้าร่วมกิจกรรมต่างๆ ของผู้เรียน ระหว่างเรียน และการใช้ rubric ประเมินผลตามสภาพจริง
9. Enhance retention and transfer to the job : การเชื่อมโยงข้อมูล เพื่อให้ผู้เรียนสามารถนำความรู้ไปใช้กับชีวิตจริงและงานอื่นๆได้ และทำให้ผู้เรียนเห็นตัวอย่างที่เป็นรูปธรรม

หลักการในการออกแบบ WBI คำนึงถึง เนื้อหา กับ กิจกรรม
*เนื้อหา
1. กำหนดวัตถุประสงค์ชัดเจน
2. การใช้สี ข้อความ ภาพเหมาะกับผู้เรียน
3. การใช้หัวข้อใหญ่ หัวข้อย่อย ทำให้เรียนรู้ได้อย่างเป็นหมวดหมู่ เข้าใจง่าย
4. การใช้ถ้อยคำ ควรใช้ภาษาง่ายๆ สั้นๆ กะทัดรัด หลีกเลี่ยงศัพท์ที่ยาก
5. การใช้สื่อประสม เช่น ภาพกราฟิก ภาพถ่าย ภาพเคลื่อนไหว ดึงความสนใจ
6. การใช้ตาราง ทำให้เกิดความชัดเจน และผู้เรียนเห็นเป็นรูปธรรมมากขึ้น
*กิจกรรม
ควรเน้นกิจกรรมที่ส่งเสริมให้การเรียนการสอนมีประสิทธิภาพมากขึ้น โดยสามารถแบ่งรูปแบบของ กิจกรรมได้ 3 รูปแบบ คือ
1. กิจกรรมแบบประสานเวลา (Synchronous) อาจใช้การสื่อสารด้วยการพิมพ์ข้อความผ่านคอมพิวเตอร์ (Chatroom) การสื่อสารด้วยเสียง
2. กิจกรรมแบบไม่ประสานเวลา(Asynchronous) อาจใช้การสื่อสารผ่าน e-mail หรือผ่านทาง webboard
3. กิจกรรมแบบร่วมมือ (Collaborative) เป็นการเรียนการสอนแบบผสมผสานระหว่าง synchronous และ asynchronous ซึ่งพิจารณาจากความเหมาะสมของเนื้อหาและกิจกรรม

สรุป
การออกแบบการเรียนการสอนผ่านเว็บ ต้องมีระบบควรยึดหลัก ADDIE’S Model กับ GAGNE เพื่อให้การเรียนการสอนมีประสิทธิภาพ ซึ่งการออกแบบของ GAGNE ก็เหมือนกับการเขียนแผนการสอนที่มีขั้นนำ ขั้นสอน ขั้นสรุปนอก จากนี้เทคนิคต่างๆแล้ว ก็สำคัญ เช่น พวกการใช้สี การใช้ตาราง



WBI : Site structure คือ การออกแบบการเรียนการสอนผ่านเว็บอย่างมีประสิทธิภาพ
ในขั้นนี้เราก็จะใช้หลักการของ ADDIE’S MODEL เช่นกันแต่จะเน้นที่ตัว
D=DESIGN คือ การออกแบบ มี 3 ขั้นย่อย คือ
1. การกำหนดโครงสร้างเว็บไซต์ (Site Structure) สอดคล้องกับวัตถุประสงค์ของเว็บ กลุ่มผู้ชมและกลุ่มเป้าหมาย เป็นการออกแบบภาพรวมทั้งหมด ประกอบด้วย Home About Me เป็นต้น สำคัญมาก เพื่อให้การทำงานชัดเจน อีกทั้งโครงสร้างทางเว็บที่ดี จะทำให้ผู้ชมเข้าใจ หลักๆมีการออกแบบอยู่ 2 แบบ คือ
1. จัดตามกลุ่มเนื้อหา ก็จะแบ่งหมวดย่อยๆออกไปตามโครงสร้างของเนื้อหาที่สัมพันธ์กัน
2.จัดตามกลุ่มผู้ชม เช่น ผู้ชมสนใจในเรื่องของคณะ ก็เข้าไปตามคณะต่างๆ เนื้อหาก็จะแตกต่างกันไป
การออกแบบ site structure อีกแบบหนึ่งประกอบด้วย 3 แบบย่อย
1. Sequence การเรียงลำดับ การออกแบบไปทีละหน้า เหมาะกับจำนวนเว็บเพจไม่มากนัก
2. Hierarchy เหมาะกับจำนวนเว็บมาก รูปแบบทั่วไป นิยมใช้มาก
3. Combination เหมาะกับเว็บไซต์ที่ซับซ้อน เป็นการผสมข้อดีของ 2 แบบข้างต้นเข้าด้วยกัน
2. การออกแบบสตอรี่บอร์ด
3. การออกแบบหน้าเว็บเพจ (Page design)
ในบทเรียนนี้ได้รับทราบการออกแบบ Site Structure สามารถนำมาปรับใช้กับงานตัวเอง โดยอาจจะเป็นการผสมระหว่าง 2 แนวคิดเข้าด้วยกันก็ได้

Page Design การออกแบบหน้าเว็บเพจให้ใช้งานง่าย
1 หน้าเว็บ มี 4 องค์ประกอบคือ
1. Page header ส่วนบนสุดของเว็บ เป็นส่วนที่สำคัญที่สุด เพราะเป็นส่วนแรกที่ผู้ชมมอง จึงนิยมใส่ชื่อเว็บ หรือผู้ให้การสนับสนุน
2. Navigation Bar ส่วนที่ใช้เชื่อมโยงไปยังส่วนต่างๆของเว็บไซต์
3. Page Body ส่วนที่ใช้สำหรับใส่เนื้อหาหลักของเว็บไซต์ อาจมีตัวนำทางย่อยๆ เพื่อเชื่อมโยงไปยังเนื้อหาที่เกี่ยวข้อง
4. Page Footer นิยมใส่ชื่อหน่วยงาน ผู้ทำเว็บไซต์ แบนเนอร์ผู้ให้การสนับสนุน แผนผังเว็บไซต์แบบ text link

หลักการออกแบบหน้าเว็บเพจ มีหลักการ ดังนี้
1. Simplicity ความเรียบง่าย : สีสัน ตัวอักษร ภาพเคลื่อนไหว ให้พอเหมาะ เรียบง่าย ไม่ซับซ้อน ชนิดและสีไม่มากจนเกินไป จะรบกวนสายตาได้
2. Consistency ความสม่ำเสมอ : ใช้รูปแบบเดียวกันในเว็บไซต์ เพื่อป้องกันความสับสน
3. Warm tone color สีโทนร้อน : ทำให้ดูมีชีวิตชีวา
4. Cool tone color สีโทนเย็น : ความสุภาพ อ่อนโยน นิยมใช้กัน
5. Neutral tone color สีโทนกลาง : สีขาว ดำ เทา น้ำตาล
6. Color enhance corporate identity : สีช่วยเสริมเอกลักษณ์ขององค์กร

สิ่งที่จะเตรียมมา
เตรียมตัวในการนำเสนอเว็บไซต์ของตัวเอง เกี่ยวกับในเรื่องของข้อมูล ภาระงาน เป็นต้น

ข้อเสนอแนะ
เรียนผ่านโปรแกรมยังมีปัญหาอยู่เลย่ะ อาจารย์ อย่างคาบนี้หนูต้องนั่งรอนานมากกว่าจะเข้าไปเรียนบทเรียนของอาจารย์ได้ กดใหม่หลายรอบมาก จนเริ่มถอดใจ

LEARNING LOG WEEK 2 (9 NOV 09)

สิ่งที่ได้เรียนรู้
WEBQUEST เป็นนวัตกรรมการจัดกิจกรรมที่ให้ผู้เรียนใช้ข้อมูล ONLINE ในการเรียนรู้แบบสืบสอบ เน้นที่กิจกรรมส่งเสริมทักษะการค้นคว้า การคิดวิเคราะห์ สังเคราะห์และประเมินผล ซึ่งจะช่วยให้ผู้เรียนคิดเป็นทำเป็น มีทั้งหมด 5 ขั้นตอน คือ
1. การนำเข้าสู่บทเรียน
2. ภาระงานที่ได้รับมอบหมาย
3. กระบวนการทำงาน แล่งอ้างอิง
4. ประเมินผล
5. บทสรุป
หัวใจสำคัญของ webquest
1. ส่วนนำเข้า (Input)
2. การแปลงสาร (Transformation)
3. ส่วนนำออก (Output)
ตัวอย่างเช่น ถ้าเราได้สารมา เราก็ต้องรู้จักที่จะแปลสารออกมาเป็นชิ้นงาน ซึ่งถือว่าเป็นหัวใจสำคัญของ webquest และสารต้องมาจากการสร้างจากผู้เรียนเอง
องค์ประกอบของ webquest
1. บทนำ กล่าวถึงที่มาของกิจกรรม บอกให้ทราบว่าเป็นเรื่องเกี่ยวกับเนื้อหาอะไร ในส่วนนี้ผู้พัฒนาต้องพยายามกระตุ้นให้นักเรียนเกิดความสนใจ หรือความสงสัยที่จะติดตามเนื้อหากิจกรรม
2. ภาระงาน บอกผู้เรียนให้ทราบถึงผลลัพธ์ที่นักเรียนต้องจัดทำขึ้น เมื่อจบกิจกรรมนี้แล้ว
3. กระบวนการ บอกผู้เรียนให้ทราบถึงขั้นตอนต่างๆที่นักเรียนต้องดำเนินงาน ผู้พัฒนาจะมีคำถามต่างๆให้นักเรียนคิดวิเคราะห์ในการที่จะตอบได้
4. การประเมินผล แสดงเกณฑ์การตัดสิน และความหมายของคะแนน ใช้เกณฑ์ rubic
5. แหล่งอ้างอิง ทราบข้อมูลเกี่ยวกับแหล่งอ้างอิง เช่น รูปภาพ เอกสาร
6. ส่วนของครูผู้สอน มีความสำคัญ เพราะว่าบางทีคนพัฒนา webquest เป็นครู มีครูอื่นมาใช้เราก็ต้องชี้แจงด้วยรายละเอียด
ข้อดีของ webquest
การใช้ข้อมูลออนไลน์ ทำให้ผู้เรียนสามารถติดตามข้อมูลได้อย่างต่อเนื่อง
ลักษณะของ webquest มีดังนี้
1. มีการออกแบบมาล่วงหน้า คอยช่วยให้คำแนะนำผู้เรียน
2. อาศัยการเชื่อมโยงกับทรัพยากรบนเว็บ การใช้แหล่งข้อมูลออนไลน์
3. ประเมินตามสภาพจริง มีกระตุ้นให้ผู้เรียนได้ใช้การสำรวจตรวจสอบ
4. ตั้งคำถามปลายเปิด ส่งเสริมทักษะต่างๆ
5. เกิดความเชี่ยวชาญของตนเองในด้านงานกลุ่ม
6. การเข้าร่วมกระบวนการกลุ่มในเรื่องของการแปลงสาระสนเทศ
7. ปลุกเร้าให้ผู้เรียนเห็นความสัมพันธ์กับโลกความจริง ตระหนักรู้ตนเอง

นอกจากนี้ยังได้เรียนรู้ webquest ที่เพื่อนๆหามา ทำให้ได้รับแนวคิดดีๆ ที่สามารถนำมาใช้ในการออกแบบ webquest ของตัวเองด้วย

สิ่งที่ต้องเตรียมมา
การออกแบบ webquest ของตัวเอง
เรื่อง วัดประจำกษัตริย์ไทย 9 รัชกาล
Analyze : วิเคราะห์
กลุ่มเป้าหมาย คือ บุคคลทั่วไป สำหรับผู้ที่สนใจ
วัตถุประสงค์ คือ เพื่อให้นักเรียนทราบถึงประวัติความเป็นมาของแต่ละวัด และรู้สึกภูมิใจและหวงแหนสมบัติของชาติ
Design : ระบุเนื้อหาและกิจกรรมในแต่ละขั้นตอนเพื่อนำมาออกแบบและพัฒนา SITE
แบ่งกลุ่มเด็กนักเรียนออกเป็นทีมๆละประมาณ 9 คน เพื่อให้เด็กแต่ละคน เป็นมัคคุเทศก์ประจำแต่ละวัด และให้เด็กเริ่มวางแผนตั้งแต่การเดินทาง สถานที่ท่องเที่ยวที่สำคัญบริเวณนั้น เป็นต้น

ข้อเสนอแนะ
อยากให้อาจารย์คอยเป็นไกด์ไลน์ให้ เพราะว่างานนี้ค่อนข้างจะใหญ่และจริงจัง และถ้าพลาดก็คงจะแก้ไขยากค่ะ

LEARNING LOG WEEK 1

สิ่งที่ได้เรียนรู้


จากการเรียนวิชา WBI ในวันจันทร์ที่ผ่านมา ข้าพเจ้าได้เรียนรู้สิ่งใหม่ๆเพิ่มเติม ดังนี้



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

ขอบคุณภาพจาก : http://blog.prachyanun.com/UserFiles/Image/course-chart.jpg

5 ยุคของการศึกษาทางไกล มีวิวัฒนาการดังนี้
* เรียนทางไปรษณีย์
* ยุคของดาวเทียม รายการวิทยุ
* เป็นวิดีโอเทป
* ผ่านเวปหรือ internet
* ใช้เทคโนโลยีทุกประเภทของ internet

องค์ประกอบของ WBI มีดังนี้

1. เนื้อหา เป็นสิ่งที่สำคัญที่สุด ต้องครอบคลุม

2. ระบบบริหาร เน้นผู้เรียนเรียนรู้ด้วยตยเอง

3. การติดต่อสื่อสาร มีประมาณ 3 รูปแบบ คือ ติดต่อทันที เช่น พวก CHAT แบบติดต่อไม่ทันที เช่น WEBBOARD E-MAIL และแบบ INTERACTIVE เช่น พวก SKYPE

4. การสอบ/วัดผลการเรียน ก็จะมีหลักๆ คือ วัดก่อนเรียนกับวัดหลังเรียน

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

สิ่งที่ต้องเตรียมมาและค้นคว้าเพิ่มเติม

* ปรับแต่งบล็อคของตัวเองให้สวยงาม

* ศึกษาข้อมูลฟีดทั้งหลาย รวมทั้งพวก GADGETS ในบล็อค

* ไปเรียนออนไลน์ค่ะ

ข้อเสนอแนะ

เน็ตช้าไปหน่อย เลยทำให้เข้าเว็บไซต์ที่จะเรียนไม่ได้ แต่หนูชอบที่ได้เรียนไป ทำกิจกรรมไปค่ะ มันไม่น่าเบื่อ

GETTING TO KNOW

แนะนำตัว :]

นางสาวนัฐพร เกียรติบัณฑิตกุล

นิสิตคณะครุศาสตร์ ชั้นปีที่ 3

สาขาวิชามัธยมศึกษา (มนุษยศาสตร์-สังคมศาสตร์)

เอกการศึกษา สังคมศึกษา-เทคโนโลยีการศึกษา

>< สิ่งที่คาดหวัง ><

สามารถสร้างและออกแบบเว็บไซต์ของตัวเองได้อย่างสวยงามและเป็นประโยชน์ต่อผู้อื่น

ประสบการณ์การใช้คอมพิวเตอร์

สามารถใช้โปรแกรมพื้นฐานต่างๆได้

❤ โปรแกรม MICROSOFT OFFICE ต่างๆ

❤ โปรแกรมในการตัดต่อไฟล์วิดีโอ เช่น ULEAD ,VEGAS ,ADOBE PREMIRE

❤ โปรแกรมตกแต่งภาพ เช่น ADOBE PHOTOSHOP , PHOTOSCAPE

❤ การสร้างบล็อคส่วนตัวต่างๆ เช่น MULTIPLY ,HI5, FACEBOOK

สิ่งที่สนใจ

สนใจในเทคโนโลยีต่างๆที่มีความทันสมัยด้านต่างๆ ทั้งทางด้านสาระความรู้ และความบันเทิง

แผนในอนาคต

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