Learning Log Week09

สิ่งที่ได้เรียนรู้
-การอัพโหลด Joomla! ขึ้น free hosting

สิ่งที่จะต้องค้นคว้าเพิ่มเติม /ต้องเตรียมมาครั้งหน้า
- นำเสนอร์เว็บไซต์ของกลุ่มที่เสร็จสมบูรณ์

ข้อคิดเห็นอื่นๆ
- ต้องกลับไปศึกษาเพิ่งเติมนอกเวลาเรียน

Learning Log Week 08

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

- Workshop การสร้างเว็บไซต์ด้วย joomla!

สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า

- โครงร่างเว็บไซต์ที่จะทำ

ข้อคิดเห็นอื่นๆ

- ตามไม่ทันคะ เร็วมาก

Learning Log Week 07

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

CMS & LMS

CMS : Comntent Management System
-ระบบที่นำมาช่วยในการสร้างและบริหารเว็บไซต์แบบสำเร็จรูป
-ผู้ใช้งานแทบไม่ต้องมีความรู้ในด้านการเขียนโปรแกรม
-ประกอบด้วยระบบย่อยๆต่างๆ เช่น
>ระบบจัดการบทความและข่าวสาร(New and Story)
>ระบบจัดการบทวิจารณ์ (Review)
>ระบบจัดการสมาชิก (Member)
>ระบบสืบค้นข้อมูล (Search)
>ระบบจัดการไฟล์ดาวน์โหลด (Download)
>ระบบจัดการป้ายโฆษณา (Banner)
>ระบบวิเคราะห์และตรวจสอบสถิติความนิยมในเว็บไซต์ (Analysis Tracking and Statistics)
Softwareที่ใช้สร้าง CMS
-WordPress.ORG ได้รับความนิยมอย่างมากเพราะมีความยืดหยุ่นในการใช้งาน หน่วยงานที่ใช้บริการ WordPress.ORG คือ CNN
-Drupal เนื้อหาต่างๆถูกเก็บในฐานข้อมูลในรูปแบบไดนามิก แสดงเนื้อหาแก่ผู้ใช้งานทางเว็บบราวเซอร์
-Google Sites อีกบริการหนึ่งของ Google ในการสร้างเว็บไซต์ ใช้งานง่าย แต่ไม่สามารถปรับแต่งรูปแบบตามความต้องการได้มากนัก
-Mambo เคยเป็นต้นแบของ Joomla!
-Joomla ได้รับความนิยมในปัจจุบัน ตกแต่งได้ตามความต้องการ ฟังก์ชันมากมาย

LMS : Learning Management System
ระบบที่นำเสนอความรู้ จัดเก็บข้อมูลเพื่อติดตามสิ่งต่างๆที่เกิดขึ้นและสนับสนุนการจัดการเรียนการสอนอีเลิร์นนิ่งให้ดำเนินไปด้วยความเรียบร้อย โดยเป็นสภาพแวดล้อมการเรียนการสอน เช่น
>การสร้างบทเรียน การสร้างกิจกรรมออนไลน์
>การสร้างแบบทดสอบออนไลน์
>การตรวจสอบเวลาเรียนของผู้เรียน
>การตรวจสอบการทำกิจกรรมให้คะแนนผู้เรียน
>การจัดการประเมินออนไลน์
>ฯลฯ
-Blackboard เป็น LMS แบบ Liscene มีลิขสิทธิ์ จึงต้องเสียค่าลิขสิทธิ์ จุฬาฯใช้อยู่ ไม่ค่อยยืดหยุ่น ปรัปรุงแก้ไขลำบาก
-TCU-LMS มหาวิทยาลัยไซเบอร์ไทย ระบบที่ใช้เรียนอีเลินนิ่ง
-Sakai Project สนับสนุนสถานศึกษาให้จัดการเรียนการสอนออนไลน์
-ATutor ออกแบบให้สามารถใช้งาน ปรับแต่งระบบได้ตามความต้องการของผู้ใช้
-Moodle ได้รับความนิยมมากสุดในปัจจุบัน ออกแบบได้ตามความต้องการ ฟังก์ชันมากมาย ข้อจำกัด คือ การออกแบบโครงสร้างค่อนข้างตายตัว
-Learnsquare พัฒนาโดย Nectec นักเรียนสามารถเรียนได้ตามอัธยาศัย มีวีดีโอที่สามารถโต้ตอบได้เหมือนเรียนในห้อง

ขั้นตอนการติดตั้ง AppServ เพื่อทดสอบ Joomla ในเครื่อง
1. Double Click Appserv-win32-2.5.9
2. Click Next
3. Click I Agree
4. เลือกตำแหน่งที่ต้องการติดตั้งโปรแกรม (ค่ามาตรฐานกำหนดที่ C:\AppServ) > Click Next
5. เลือก Component ที่ต้องการติดตั้ง Click Next
6. ระบุชื่อ Server ในช่อง Server Name (ใส่อัไรก็ได้ ปกติให้ตั้งว่า Localhost) และระบุ E-mail ของผู้ดูแลระบบที่ Administrator's Email Address > Click Next
7. ระบุรหัสผ่านของฐานข้อมูล ในช่อง Enter root password
8. ระบุระหัสผ่านอีกครั้งในช่อง Re-enter root password > Click Install
9. รอโปรแกรมติดตั้งจนเสร็จ Click Next
10.Click Finish
11.ไปยัง Folder Joomla ที่ได้เตรียมไว้ คลิกขวาที่ Folder Joomla > Copy
12.ไปยังตำแหน่งที่ติดตั้ง Appserv เอาไว้
13.ไปที่ Folder www
14.วาง Folder Joomla ที่ Copy ไว้

ขั้นตอนการติดตั้ง Joomla!
1. พิมพ์ที่อยู่เว็บที่ติดตั้ง Joomla ไว้
กรณีทดสอบระบบในเครื่องให้ใช้ http://lacalhost/ชื่อโฟล์เดอร์ที่ตั้งไว้
2. เลือกภาษาที่ต้องการ (ในที่นี้เลือก th-TH-Thai(ภาษาไทย)) > คลิกปุ่มถัดไป > คลิกปุ่มถัดไป
3. อ่านข้อตกลงเกี่ยวกับลิขสิทธิ์ >คลิกปุ่มถัดไป
4. ระบุชื่อโฮสต์ ค่าทั่วไปคือ "Localhost"
5. ระบุชื่อผู้ใช้ฐานข้อมูล ค่าทั่วไปคือ "Root"
6. ระบุรหัสผ่าน
7. ระบุชื่อฐานข้อมูล joomla > คลิกปุ่มถัดไป
8. > คลิกปุ่มถัดไป
9. ระบุชื่อเว็บไซต์ My Website
10.ระบุ E-mail ของผู้ดูแลระบบ
11.ระบุรหัสผ่านของผู้ดูแลระบบ
12.ยืนยันรหัสผ่านอีกครั้ง > คลิกปุ่มถัดไป > คลิกปุ่มตกลง
13.คลิกปุ่มดูหน้าเว็บไซต์เพื่อดูตัวอย่าง
14.ให้ลบโฟลเดอร์ installation ใน Folder Joomla ที่เราติดตั้งไว้ก่อน จึงจะสามารถเปิดดูเว็บไซต์ได้

Front-end และ Back-end

Front-end หน้าเว็บไซต์แสดงเนื้อหา
Back-end ส่วนของผู้ดูแลระบบ

Front-end >ระบุที่อยู่เว็บ http://lacalhost/ชื่อโฟลเดอร์ที่ตั้งไว้ ประกอบด้วยองค์ประกอบย่อยหลายๆส่วน เรียกว่า Module การแสดงผลบนหน้าเว็บของ Joomla จะถูกควบคุมด้วย Module ต่างๆ

Back-end >ระบุที่อยู่เว็บ http://localhost/ชื่อโฟลเดอร์ที่ตั้งไว้/administrator
เมนู1 Site การจัดการไฟล์ การตั้งค่าเบื้องต้น
เมนู 2 Menus จัดการเมนูและลิงค์
เมนู 3 Content จัดการกลุ่มของบทความ
เมนู 4 Component จัดการ Componentต่างๆ
เมนู 5 Extensions การปรับตั้งค่าอื่นๆ
เมนู 6 Tools รวบรวมเครื่องมือสนับสนุนการทำงานในระบบต่างๆ
เมนู 7 Help รวบรวมข้อมูลให้ความช่วยเหลือต่างๆ

การจัดการคอนเทนต์บน Joomla!
โครงสร้างการจัด Content บน Joomla ประกอบด้วยโครงสร้าง 3 ส่วน คือ
1. Article คือ ข้อมูลหรือเนื้อหาในแต่ละหน้าของเว็บไซต์
2. Category หมวดหมู่ย่อยของ Article ซึ่งเก็บรวบรวม Article ที่อยู่ในหมวดเดียวกัน
3. Section คือ หมวดหมู่หลักของ Article ซึ่งเก็บรวบรวม Category ที่อยู่ในหมวดเดียวกันไว้ด้วยกัน
Section – Category – Article

ในกรณีที่เว็บไซต์ไม่ใหญ่และต้องการความรวดเร็ว ผู้ใช้สามารถสร้าง Article ไม่ให้จัดอยู่ในหมวดหมู่ใดก็ได้ ถือว่าเป็น Article แบบโดดๆ ที่เรียกว่า Uncategorized มักใช้กับข้อมูลเฉพาะที่ไม่มีการแก้ไขหรือไม่เกี่ยวข้องกับเนื้อหาหลักเช่นเงื่อนไขลิขสิทธิ์ หรือกฎระเบียบข้อตกลง

SME วิธีการสร้างบทความใหม่ใน Joomla
วิธีสร้างกรอบเมนู และ Sub menu
วิธีการใช้ Joomla Extension
เลือกธีมมาตกต่างหน้าเว็บ

สิ่งที่ต้องเตรียม
ศึกษาการใช้ Joomla เพิ่มเติม

ข้อเสนอแนะ
กิจกรรมกลุ่มวันนี้ทำให้รู้สึกไม่น่าเบื่อค่ะ

Learning Log Week 05

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

การตั้งค่าไซต์

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

การตั้งค่าภาษา

เพื่อให้แสดงภาษาไทยที่สมบูรณ์ กลับมาแก้ไขได้อีก
หลังจากสร้างไฟล์เว็บเพจขึ้นมาใหม่แล้ว
-->คลิกปุ่ม Page Properties > เลือก Title/Encoding > เลือก Encoding เป็น Unicode(UTP-8) > ok
เสร็จสิ้นขั้นตอนการตั้งค่าภาษาไทย

การตั้งค่าเว็บเพจเบื้องต้น

--> คลิกปุ่ม Page Properties... > Catagory
-Appearance การกำหนดค่าแสดงผลทั่วไปของเว็บเพจ เช่น กำหนด Fontมาตรฐานที่จะใช้ ขนาด สีอักษร สีพื้นหลัง เป็นต้น
-Links กำหนดลักษณะตัวเชื่อมโยงภายในเว็บเพจ เช่น ตัวอักษร สี เป็นต้น
-Heading เป็นการกำหนดรูปแบบหัวข้อเอาไว้สำหรับใช้ใน Webpage ใช้แทร็ก แล้วตามด้วยหมายเลขของรูปแบบที่จะใช้ได้เลย
-Title/Encoding เป็นการตั้งชื่อให้หัวข้อของ Webpage ที่อยู่บนบราวเซอร์ หรือตั้งค่าภาษา
-Tracing Image การนำเอาภาพมาวางบนหน้าเว็บไซต์ เพื่อใช้เป็นแบบในการออกแบบ โดยที่ภาพดังกล่าวจะเหมือนแผ่นใส จะไม่มีปรากฏอยู่จริงเมื่อนำไปเปิดบนเว็บบราวเซอร์

การสร้างตาราง

-->เลือเมนู Insert > Table อีกทางเลือกนึง คลิกไอคอน Table ในแถบเครื่องมือ Command ก็ได้เช่นเดียวกัน
-->สร้างตารางที่มี Rows 2 Colums 2 ปรับขนาดของตารางให้กว้างขึ้นตามขนาดของเว็บเพจที่เต้องการ ถ้าเลือกหน่วยเป็น pixel ตารางจะมีความกว้างคงที่ ตามค่าที่ระบุ ถ้าเลือกหน่วยเป็นเปอร์เซ็นต์ ความกว้างจะเปลี่ยนแปลงตามขนาดของหน้าจอ เช่น 100% จะมีขนาดเต็มหน้าจอ
-->คลิกที่ช่องตารางด้านล่างซ้าย แทรกตารางขนาด Rows 6 Colums 1 ซ้อนขึ้นมาเพื่อจัดรูปแบบเมนู ย่อความกว้างของตารางให้เล็กลงทั้งตารางย่อยและตารางหลัก
-->คลิกที่แทป Table อันที่ 2 ที่เป็นตารางย่อย ปรับ Align เพื่อให้ตารางมาอยู่ตรงกลาง

การใช้ตารางช่วยจัดองค์ประกอบของเว็บ

-->นำ Folder รูปภาพที่เราเตรียมไว้ไปใส่ใน Folder ที่ตั้งค่า Site ไว้
-->เลือกเมนู Insert > Image สามารถคลิกไอคอนที่แถบเครื่องมือ Command ได้เช่นกัน หรือดึงมาจากหน้าต่างไฟล์ด้านข้างก็ได้
-->จะปรากฏหน้าต่างให้ระบุข้อความกำกับภาพ > Ok จะเห็นว่าภาพมีขนาดใหญ่กว่าตาราง
-->รวมตารางด้านบนไว้ด้วยกันด้วยการกด Shift เลือกตารางทั้ง 2 > คลิกขวา > Table > Merge Cells
-->จะเห็นว่าตารางยังมีขนาดไม่พอดีกับค่าเดิมที่ตั้งไว้ คลิกที่ตัวเลขด้านล่าง > Make All Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพได้
-->นำรูปภาพเมนูมาใส่ในตารางย่อยที่สร้างไว้ ใส่เมนูทางด้านซ้ายให้ครบ จะเห็นว่าจำนวนตารางไม่พอ คลิก ของตารางที่ 2 > แก้จำนวนแถวในหน้าต่าง Properties ด้านล่าง แถวตารางจะเพิ่มขึ้น นำภาพมาให้ครบ
-->ในแต่ละช่องของตาราง เราสามารถปรับสีพื้นหลังของแต่ละช่องได้ ลองเลือกช่องตารางขวาที่ว่าง > คลิกปุ่ม Background Color เลือกสีที่ต้องการ นอกจากนี้ยังสามารถใส่รูปภาพเป็นพื้นหลังได้

การสร้างTemplate

-->เลือกเมนู File > Save as Template... > ตั้งชื่อ Template > Save > ตกลงการปรับปรุงการเชื่อมโยง คลิก Yes
-->คลิกที่ช่องตารางทางขวา > ปรับตำแหน่งของข้อความให้ไปอยู่ด้านบน โดยเลือก Top ที่ช่อง Vert
-->สร้างตาราง 1x1 ไปที่ช่องตารางด้านขวา > เลือกตารางที่สร้างขึ้นมาใหม่ > เลือกเมนู Insert > Template Objects > Editable Region เพื่อกำหนดให้เป็นพื้นที่ที่แก้ไขได้ > ตั้งชื่อพื้นที่ > ok > บันทึกเว็บเพจใหม่ให้เรียบร้อย เลือกเมนู File > Save
-->สร้างเว็บเพจใหม่ขึ้นมาเพื่อทดสอบ Template ไปที่เมนู File > New... > เลือกชนิดเว็บเพจแล้วคลิกปุ่ม Creat
-->นำ Template ที่สร้างไว้มาใช้ ไปที่ Modify > Templates > Apply Template to Page... > เลือก Template ที่ต้องการ > Select

ตัวอย่างเทคนิคการสร้าง Rollover Button

-->downloadและแตกไฟล์ที่เตรียมไว้ ให้ไปที่ Folder Image ที่อยู่ใน Folder ที่ตั้งค่า Site ไว้
-->เปิดไฟล์ Index.html ที่เคยสร้างไว้ > เลือกพื้นที่สำหรับใส่วัตถุ > ปรับตำแหน่งการจัดวางเป็นกึ่งกลาง
-->คลิกลูกศรในไอคอนรูปภาพ เลือก Rollever Image > ระบุภาพที่จะแสดงเริ่มต้น > ระบุภาพที่จะแสดงเมื่อเมาส์ไปอยู่ด้านบน > ระบุข้อความกำกับภาพ > ระบุ URL ที่จะให้เชื่อมโยงไปเมื่อคลิกเมาส์ > Ok > พรีวิวเว็บเพจเพื่อทดสอบผลลัพธ์ดู > บันทึกไฟล์ก่อนทำการพรีวิว

สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า

ศึกษาโปรแกรม Macromedia Dreamwever8 เพิ่มเติม

ข้อคิดเห็นอื่นๆ

ตามไม่ค่อยทันค่ะ เรียนทั้งในเว็บไซต์และบรรยาย งงค่ะ

วันจันทร์ที่ 23 พฤศจิกายน พ.ศ. 2552

Learning Log Week 04

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

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

*การสร้าง animation อย่างง่าย

1.เปิดโปแกรม Adobe ImageReader CS2
2.เลือกเมนู File>Import>Folder as Frames...>ที่หน้าต่าง Browser For Folder เลือก Folder ที่เก็บภาพที่ต้องการทำ animation เอาไว้>คลิกปุ่ม ok ภาพทั้งหมดที่มีอยู่ใน Folder จะปรากฏขึ้นมา
3.เราสามารถปรับเวลาในการแสดงผลในแต่ละภาพได้ ถ้าต้องการเลือกปรับภาพหลายภาพพร้อมกันให้กดปุ่ม Shift สำหรับเลือกภาพแบบต่อเนื่อง หรือ Ctrl สำหรับเลือกภาพแบบไม่ต่อเนื่อง สามารถปรับได้ว่าต้องการจะให้มีการวนรอบหรือไม่ ลองทดสอบการทำงานการเคลื่อนไหวของภาพ
4.บันทึกภาพ เลือกเมนู File>Save Optimized As...>เลือกประเภทไฟล์ Images Only (*gif)>Save
5.คลิกปุ่ม Minimize Botton ดูผลลัพธ์ที่เกิดขึ้น

*การใช้ Slice ในการสร้างงานเว็บ

1.เปิดไฟล์ที่อาจารย์เตรียมไว้ให้ ชื่อ mangrove.png
2.เลือกเมนู view>Rulers แถบไม้บรรทัดจะปรากฏขึ้น
3.ดึงเส้นไกด์ออกมาจากไม้บรรทัด ด้วยเครื่องมือ Move Tool
4.เลือกเครื่องมือ Slice Tool เพื่อทำการ Slice ทำการ Slice ภาพออกเป็นส่วนๆตามความต้องการ
5.เลือกเมนู File>เลือกบันทึกไฟล์เป็นนามสกุล PSD เพื่อให้กลับมาแก้ไขงานได้ ถ้าต้องการซ่อนเส้นไกด์เลือกเมนู View>Show>Guides ถ้าต้องการเรียกกลับใหม่ก็ใช้คำสั่งเดิม

*วิธีการกำหนดการเชื่อมโยงให้กับ Slide

1.คลิกขวาที่ Slice ที่ต้องการเชื่อมโยง เลือกคำสั่ง Edit Slice Options...
-ระบุที่อยู่เว็บที่ต้องการเชื่อมโยงที่ช่อง URL
-ระบุรูปแบบการเชื่อมโยงในช่อง Target
-ระบุข้อความที่แสดงเมื่อเมาส์อยู่เหนือในช่อง Message Text
-ระบุข้อความกำกับภาพในช่อง Alt Tag
>คลิกปุ่ม ok

*การบัยทึก slice เป็นเว็บเพจ

1.เลือกเมนู File>Save For Web...>Save เลือกรูปแบบการบันทึกเป็น HTML and Images(*.html)>Save
2.ตรวจสอบผลลัพธ์ที่เกิดขึ้น โดยคลิก Minimize Button ลองเปิดไฟล์ขึ้นมาดู จะเห็นว่าภาพในโฟล์เดอร์ ที่เราบันทึกว่าไฟล์ภาพได้ถูกแบ่งเป็นส่วนๆตามที่ Slice ไว้ แต่เมื่อดูผลลัพธ์ในเว็บบราวเซอร์จะเห็นว่าภาพเป็นภาพเดียวกันก่อนที่จะถูกตัดแบ่ง และบริเวณที่กำหนดการเชื่อมโยงไว้สามารถคลิกไปยังหน้าที่ต้องการได้

สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า

ปรึกษางานกับเพื่อนเรื่องการทำ WebQuest

ข้อคิดเห็นอื่นๆ

วันนี้ได้เห็นผลงงานการออกแบบ WebQuest ของเพื่อนๆ ที่เป็นประโยชน์มากค่ะ เอามาปรับปรุงและพัฒนา WebQuest ของตนเองได้เป็นอย่างดีเลยค่ะ

วันอังคารที่ 17 พฤศจิกายน พ.ศ. 2552

Learning Log Week 03

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

กิจกรรมที่ 1 WBI : ADDIE & Gagne

ADDIE's ISD Model

A-ANALYZE การวิเคราะห์

-GOAL วิเคราะห์วัตถุประสงค์ของบทเรียน

-AUDIENCE วิเคราะห์กลุ่มเป้าหมาย

-ENVIRONMENT วิเคราะห์สภาพแวดล้อม บริบทต่างๆ

D-DESIGN การออกแบบ

-SITE STRUCTURE โครงสร้างเว็บไซต์

-STORYBOARD แผนดำเนินงาน

-INTERFACE DESIGN ลักษณะของแต่ละหน้า

*RAPID PROTOTYPE เป็นการออกแบบคร่าวๆ ก่อนไปพัฒนาจริง

D-DEVELOP การพัฒนา

-TOOLS ซอฟต์แวร์ต่างๆ

-TEAM ทีมกราฟฟิก ทีมรวบรวมเนื้อหาจัดเตรียมเนื้อหา ทีมตัดต่อ ทีมพัฒนาเว็บ

ทีมโปรแกรมเมอร์ ฯลฯ

I-IMPLEMENT การนำไปใช้

-PILOTS การนำไปทดลองใช้กับกลุ่มเป้าหมาย

-ROLLOUT PLAN การนำมาปรับแก้ก่อนนำไปใช้

E-EVALUATION การประเมินผล

-SMES ผู้เชี่ยวชาญเป็นผู้ตรวจสอบบทเรียน

-AUDIENCE ประเมินผลว่ากลุ่มเป้าหมายเข้าใจในบทเรียน หรือมีข้อสงสัยอะไร

Gagne's Instructional Theory

Gain-Attention เรียกความสนใจจากผู้เรียน เช่นการใช้ภาพ สี เสียง แอนนิเมชั่นต่างๆ

Specify Objective แจ้งผู้เรียนให้ทราบถึงวัตถุประสงค์ของบทเรียนนั้นๆ แนวคิดของ Bloom จะเน้น พุทธ พิสัย จิตพิสัย ทักษะพิสัย

Stimulate Recall กระตุ้นความรู้เดิมเพื่อให้เชื่อมโยงกับความรู้ใหม่ เช่นใช้การถามตอบ หรือการใช้ Pre-test

Present the Content นำเสนอเนื้อหา เช่น นำเสนอในรูปแบบพาวเวอร์พอยท์, pdf file, e-book

Provide Learning Guidance การให้คำแนะนำระหว่างการเรียน เช่น การมีหน้า FAQs หรือปุ่ม HELP ที่ช่วยผู้เรียน

Elicit performance การตรวจสอบดูว่าผู้เรียนได้เกิดการเรียนรู้หรือไม่ ดูจากพฤติกรรมที่ผู้เรียนแสดงออกมา เช่น แบบฝึกหัดต่างๆในแบบฟอร์มของ quiz , Discussion board หรือ Chatroom หรือ E-mail

Provide Feedback ให้ข้อเสนอแนะผู้เรียน เช่นการข้อเสนอแนะจากผู้สอนผ่าน Communication tools ต่างๆ

Assess Performance การประเมินผล การประเมินผลที่หลากหลาย เช่น ตรวจสอบว่าผู้เรียนมาเข้าร่วมกิจกรรมระหว่างเรียนหรือเปล่า หรือให้ผู้เรียนทำงานกลุ่มส่งเป็นชิ้นงาน ถ้าต้องการให้เกิดความเที่ยงตรงเราอาจใช้รูปแบบการประเมินผลตามสภาพจริง ด้วยการใช้ Rubric

Enhance retention & transfer to the job การเพิ่มเนื้อหา ให้แน่ใจว่าผู้เรียนได้รับความรู้ที่คงอยู่กับตัวผู้เรียนและสามารถนำไปใช้ในชีวิตจริง เช่นมีการทบทวน มีการเชื่อมโยงกับเนื้อหาบทต่อไปหรือวิชาอื่นๆ

WBI Design

หลักการในการออกแบบ WBI

ส่วนของเนื้อหา

-กำหนดวัตถุประสงค์การใช้บทเรียนอย่างชัดเจน

-การเลือกใช้สี ข้อความ และภาพประกอบให้เหมาะสมกับเนื้อหาและกลุ่มผู้เรียน

-การใช้หัวข้อใหญ่และหัวข้อย่อย ทำให้เรียนรู้ได้อย่างเป็นหมวดหมู่ เข้าใจง่ายมากยิ่งขึ้น

-การใช้ภาษาง่ายๆ สั้นๆ กะทัดรัด และเหมาะสมกับระดับการอ่านของกลุ่มเป้าหมาย และควรหลีกเลี่ยงการใช้ศัพท์หรือภาษาที่ยากจนเกินไป

-การนำสื่อประสม เช่น ภาพกราฟิก ภาพถ่าย ภาพเคลื่อยไหว เสียง วิดีโอ มาเพื่อให้ดึงดูดความสนใจ

-การใช้ตารางทำให้เกิควมชัดเจนและเห็นเป็นรูปธรรมมากขึ้นในการอธิบาย

ส่วนของกิจกรรม

-กิจกรรมแบบประสานเวลา เช่น การสื่อสารด้วยการพิมพ์ข้อความผ่านคอมพิวเตอร์, การสื่อสารด้วยเสียง

-กิจกรรมแบบไม่ประสานเวลา เช่น การสื่อสารด้วย e-mail, web board, blog

-กิจกรรมแบบร่วมมือ เป็นการผสมผสานระหว่างกิจกรรมแบบประสานเวลาและกิจกรรมแบบไม่ประสานเวลา

กิจกรรมที่ 2 WBI : SITE STRUCTURE

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

แนวคิดหลักที่นิยมใช้

1.จัดตามกลุ่มเนื้อหา

2.จัดตามกลุ่มผู้ชม

การออกแบบ SITE STRUCTURE

-Sequence แบบเรียงลำดับ ออกแบบเว็บไซต์ไปทีละหน้า เหมาะกับเว็บไซต์ที่มีจำนวนเว็บเพจไม่มากนัก หรือเว็บไซต์ที่นำเสนอข้อมูลแบบทีละขั้นตอนไปเรื่อยๆ ทีละหน้า

-Hierarchy แบบระดับชั้น เหมาะสำหรับเว็บไซต์ที่มีจำนวนเว็บเพจมาก เป็นรูปแบบที่พบได้ทั่วไป นิยมใช้มาก

-Combination เหมาะกับเว็บไซต์ที่ซับซ้อน เป็นการผสมผสานของขอ้ดีระหว่างการออกแบบ แบบSequenceและแบบHierarchyเข้าไว้ด้วยกัน

กิจกรรมที่ 3 WBI:Page Design

Page Design Structure

Page Header นิยมใส่ชื่อของเว็บ หรือผู้ที่ให้การสนับสนุนเว็บ

Nevigation Bar ใช้เชื่อมโยงไปยังเว็บเพจต่างๆของเว็บไซต์

Page Body ใช้ใส่เนื้อหาหลักของเว็บไซต์ อาจมีตัวนำทางย่อยๆเพื่อเชื่อมโยงไปยังเนื้อหาที่เกี่ยวข้องได้

Page Footer นิยมใส่ชื่อของหน่วยงาน ผู้ทำเว็บไซต์ bannerของผู้ที่ให้การสนับสนุน

หลักการออกแบบ

1.ความเรียบง่าย(Simplicity) มีรูปแบบที่เรียบง่ายไม่ซับซ้อน ใช้งานง่าย สะดวก

2.ความสม่ำเสมอ(Consistency) มีรูปแบบ สไตล์กราฟฟิก ระบบNevigationและโทนสีที่คล้ายคลึงกันตลอดทั้งเว็บไซต์

การเลือกใช้สี

สีโทนร้อน แสดงถึง ความตื่นเต้น รุนแรง ความสุข ความปลอบโยนโยน ความอบอุ่นความดึงดูดใจ มีชีวิตชีวา

สีโทนเย็น แสดงถึง ความสงบ สุภาพ อ่อนโยน เรียบร้อย

สีโทนกลาง ได้แก่ สีขาว สีดำ สีเทา สีน้ำตาล สามารถนำไปผสมกับสีอื่นๆได้

เว็บที่ช่วยในการเลือกใช้สี ได้แก่ kuler.adobe.com และ http://www.colourlover.com/

3.การออกแบบระบบนำทาง(Nevigation) ช่วยให้ผู้เข้าชมเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว ไม่หลงทาง ดังนั้นจึงมีองค์ประกอบดังนี้

เครื่องนำทาง เพื่อให้ผู้ชมเปิดไปยังเว็บเพจต่างๆภายในเว็บไซต์

เมนูเฉพาะกลุ่ม เชื่อมโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายในกลุ่มย่อย ที่มีเนื้อหาเกี่ยวเนื่องเท่านั้น

เครื่องมือเสริม ใช้เสริมการทำงานของเมนู เช่นช่องค้นหา แผนที่เว็บไซต์ เป็นต้น

ระบบนำทางที่ดี

-เข้าถึงง่าย

-สื่อความหมาย ชัดเจน เข้าใจง่าย

-สม่ำเสมอ

-ตอบสนองผู้ใช้

-มีจำนวนรายการพอเหมาะ

-มีทางเลือกหลากหลาย

-มีลิงค์กลับไปโฮมเพจได้

Taxt & Botton
Drop down List
Dynamic Drop down menu
On mouse over

สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า

เตรียม Present งาน

ข้อคิดเห็นอื่นๆ

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

สำหรับการเรียนในวันนี้ งายเยอะมากค่ะ อยากให้อาจารย์สอนเองมากกว่าค่ะ จะได้เข้าใจและจดจำได้มากยิ่งขึ้น

วันจันทร์ที่ 9 พฤศจิกายน พ.ศ. 2552

Learning Log Week 02

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

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

องค์ประกอบของ WebQuest
บทนำ : เป็นส่วนที่กล่าวถึงที่มาของกิจกรรมการเรียนรู้ บอกให้ทราบว่าเป็นเรื่องเกี่ยวกับเนื้อหาอะไร ในส่วนนี้ผู้พัฒนาต้องพยายามกระตุ้นให้นักเรียนเกิดความสงสัยที่จะติดตามเนื้อหากิจกรรม
ภาระงาน : เป็นส่วนที่ต้องบอกนักเรียนให้ทราบถึงผลลัพธ์ที่นักรียนต้องจัดทำขึ้น เมื่อจบกิจกรรมแล้ว
กระบวนการ : ผู้พัฒนาต้องบอกนักเรียนให้ทราบถึงรายละเอียดขั้นตอนต่างๆที่นักเรียนต้องดำเนินการ(แนะนำให้เขียนเป็นข้อๆ) ผู้พัฒนาจะมีคำถามต่างๆให้นักเรียนวิเคราะห์
การประเมินผล : เป็นส่วนที่ผู้พัฒนาจะแสดงเกณฑ์การตัดสินและความหมายของคะแนนให้นักเรียนทราบโดยใช้ rubric ในการประเมิน
สรุป : ส่วนนี้ผู้พัฒนาต้องสรุปให้นักเรียนทราบถึงความสำคัญและคุณค่าของเนื้อหากิจกรรมนั้นๆ เน้นที่เมื่อจบกิจกรรมนั้นๆแล้ว นักเรียนจะได้เรียนรู้อะไร รวมทั้งอาจทิ้งคำถามที่กระตุ้นให้นักเรียนนำสิ่งที่เรียนรู้ไปต่อยอด

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

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

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

สมัครสมาชิก: ความคิดเห็น (Atom)

Lenka- Trouble Is A Friend

ข่าวบันเทิง

กำลังโหลด...

ผู้ติดตาม

คลังบทความของบล็อก

• ▼  2010 (3)
  • ▼  กุมภาพันธ์ (2)
    • Learning Log Week09
    • Learning Log Week 08
  • ►  มกราคม (1)

• ►  2009 (6)
  • ►  พฤศจิกายน (5)
  • ►  ตุลาคม (1)

เกี่ยวกับฉัน

pa_luizz

ดูโปรไฟล์ทั้งหมดของฉัน