Learning Log Week 9 (1/02/10)

สิ่งที่ได้เรียนรู้: วันนี้ได้พรีเซนต์ งานคู่ Joomla ของกลุ่มตัวเองค่ะ ก็ไม่มีอะไรมากแค่อาจจะลบหัวข้อออกบางหัวข้อที่เยอะแยะจนเกินไป
- จั๊ม ได้มาสอวิธีอัปโหลดจูมล่าลงเซิฟเวอร์ โดยใช้พื้นที่ใน www.thport.com\
-พี่ TA ได้มาสอนวิธีการ Back up File และแตกไฟล์เวลาส่งงานคะ


สิ่งที่ต้องเตรียมมา: จันทร์หน้า ทำจูมล่าให้เสร็จ แล้ว วีคต่อไปพรีเซนต์


ข้อเสนอแนะ: ปวดหัว ปวดหัวค่ะ TT TT

Leaning Log 8 (18 JAN 10)

สิ่งที่ได้เรียนรู้ : เรียนเรื่อง Joomla
- ทดลองสร้าง logo แทน Joomla โดยต้องสร้างไฟล์ ขนาด 298*75 โดยต้องลบ โลโก้เดิมของ Joomla ทิ้ง โดยต้องตั้งชื่อให้เหมือนกัน .png
-ดาวน์โหลด Extension JCE > Upload ลง Joomla ไปแก้ที่ Site>Global Confrige > Defaut เป็น JCE >SAVE

โดยวันนี้่อาจารย์ให้ทดลองสร้างเว็บไซต์ของ ABC GROUP โดยให้มี Article ต่างๆ, มีมุมสมาชิก,มี Contact ต่างๆ ( ตามที่ชีสที่อาจารย์แจกได้กำหนดเอาไว้ทั้งหมด)

นอกจากนี้แบ๋มยังมาสอนการใช้ Moo Pop up คือทำให้เว็บเรามีป๊อบ อัป โฆษณาต่างๆหรือข้อความต้อนรับได้คะ

และส้มมาสอนการใช้เทคนิค icon คือเปลี่ยน icon จาก Joomla มาเป็น icon ที่เราต้องการ

ทำให้ได้ความรู้เกี่ยวกับการสร้างเว็บง่ายๆ ด้วย Joomla ทั้งหมดเลยค่ะ ง่ายกว่า Dreanweaver เป็นไหนๆ แป๊บเดียวก็ได้หน้าไซต์เหมือนเว็บ โดยมือโปรทันที ชอบใจค่ะ



สิ่งที่ต้องเตรียมมา: เตรียม Plan site Joomla งานคู่ มาพรีเซนต์คราวหน้า

ข้อคิดเห็นเพิ่มเติม: แอบปวดหัวคร่าอาจารย์ เนื่องจากหนูไม่เคยใช้โปรแกรมนี้มาก่อน แต่ก็ดีค่ะ เหมือนว่าได้รับความรู้เพิ่มเติมจริงๆ ^0^

Learning Log Week7 (4Jan10)

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


-Learning Evolution: Hugn Impact, Engaging & Relavent, e-Learning Program


"The future of learning is online"


- CMS & LMS:


การพัฒนาเว็บไซต์แบบเดิมๆ จะไม่ได้แยกโครงสร้างของเว็บไซต์ ส่วนการแสดงผลและส่วนเนื้อหาออกจากกัน จึงไม่สามารถแยกแก้ไขเฉพาะส่วนได้ ซึ่งส่งผลในระยะยาวให้เว็บที่แก้ไขหน้าตาไม่เหมือนกันทั้งหมด การแก้ไขลิงค์ทำได้ยาก มีปัญหาลิงค์ตายเกิดขึ้น เมื่อเวลาผ่านไป จึงมีแนวทางการพัฒนาเว็บไซต์แบบกึ่งสำเร็จรูป "Content Management System" หรือ CMS


CMS นั้น ผู้ใช้งานแทบจะไม่ต้องมีความรู้เรื่องการเขียนโปรแกรมมาก่อนเลย โดยประกอบด้วยระบบย้อยต่างๆ คือ

- ระบบจัดการข่าวสาร


-ระบบจัดการบทวิจารณ์


-ระบบจัดการสมาชิก


-ระบบสืบค้นข้อมูล


-ระบบจัดการไฟล์ดาวน์โหลด


-ระบบจัดการป้ายโฆษณา





ปัจจุบัน Sofeware ที่ใช้สร้าง CMS มีมากมายหลายอันมากกัน เช่น


- WordPress (ได้รับความนิยมเป็นอย่างมาก เป็นระบบที่มีความยืดหยุ่นในการใช้งาน มีผู้สร้างโปรแกรม Plug-in ขึ้นมารองรับใช้กับWord Press อย่างมากมาย)


- Drupal ( เนื้อหาต่างๆจะถูกเก็บในฐานข้อมูล เป็นรูปแบบของ Dynamic, ผู้ใช้สามารถใส่คอมเม้นต์ได้โดยขึ้นอยู่กับการตั้งค่าของโนต)


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


- Mambo ( เคยเป็นต้นแบบของบ Joomla )


-Joomla (จุดเด่นคือ สามารถปรับแต่งหน้าตาได้ตามความต้องการ และมีฟังก์ชั่นเสริมมากมาย )





** Learning Management System LMS: ระบบที่นำเสนอความรู้ จัดเก็บข้อมูลเพื่อติดตามสิ่งต่างๆที่เกิดขึ้นและสนับสนุนการจัดการเรียนการสอนผ่าน E-Learning ให้ดำเนินไปด้วยความเรียบร้อย เช่น


-การสร้างบทเรียน


-การสร้างแบบทดสอบออนไลน์


-การจัดการประเมินออนไลน์


-การตรวจสอบเวลาเรียนของผู้เรียน


-การตรวจสอบกิจกรรมให้คะแนนของผู้เรียน


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


TCU-LMS: มหาวิทยาลัยไซเบอร์ไทย


Sakai-Project : เป็นของต่างประเทศ ช่วยเหลือ สนับสนุนสถานศึกษาต่างๆในการศึกษาออนไลน์


A-Tutor: ผู้สอนสามารถปรับแต่งเนื้อหาได้เอง ทำให้ผู้เรียนสามารถเข้าสู่เนื้อหาได้หลากหลายมากยิ่งขึ้น


Moodle: ได้รับความนิยมมาก สามารถออกแบบรายวิชาได้ตามความต้องการ แต่มีการออกแบบโครงสร้างที่ค่อนข้างตายตัว





เริ่มต้นใช้งาน Joomla: ดับเบิ้ลคลิกที่ตัวติดตั้ง Appserve>Next>I agree>Next>Next> ระบุชื่อ Server Nane " Localhost"+ ระบุ Email> ระบุรหัสผ่าน


การติดตั้ง Joomla: ให้เข้าที่อยู่เว็บที่ติดตั้ง Joomla ไว้ httP://localhost/joomla>


- เลือกภาษาที่ต้องการ "THAI" > ถัดไป> ถัดไป>อ่านข้อตกลง> ถัดไป


-ระบุชื่อ Host: "Localhost"


- ระบุชื่อผู้ใช้ฐานข้อมูล "root"


-ระบุรหัสผ่าน


-ระบุชื่อฐานข้อมูล "joomla" > ถัดไป>ถัดไป


-ระบุชื่อเว็บไซต์ "my website"



-ลบ installation ใน folder> Preview





รู้จักFront-end n Back- End



* Front- End

- ให้เข้า http://localhost/joomla

- ในหน้าเว็บไซต์จะประกอบด้วยองค์ประกอบย่อยๆหลายส่วน ซึ่งเรียกว่า Module เช่น Latest News, Search, Main Menu, Resouce



*Back-End

- ให้เข้า http://localhost/joomla/administrator คือส่วนของผู้ดูแลระบบ



-Site: การจัดการข้อมูลต่างๆของเว็บไซต์

-Menues:จัดการเกี่ยวกับเมนูและลิงค์

-Content: จัดการกลุ่มของบทความต่างๆ

-Components: ปรับตั้งค่าการทำงานของ Component

-Extension: ใช้ install และลบ extension ต่างๆ

-Tools: รวบรวมเครื่องมือสนับสนุนการทำงานระบบต่างๆ

-Helps: รวบรวมข้อมูลให้ความช่วยเหลือต่างๆ

**Extension Template

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

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

นอกจากนั้นยังได้เรียนรู้การปรับแต่ง Joomla ของเราทั้งการส้รางเมนู ใส่ Article ปรับแต่ง Template แก้ภาษา และฟังก์ชั่นอื่นๆอีกมากมายคะ

สิ่งที่ต้องเตรียมมา: - เตรียมพรีเซนต์ WebQuest

- เตรียมทำงาน โฑปรเจคต่อไปคะ

ข้อเสนอแนะ: ดีคะ ได่เรียนรู้ทั้งเป็นกลุ่มเเละเดี่ยว ^^

แต่แอบอยาก Present WebQuest แล้วคะ จะได้หมดห่วงสักที

Learning Log Week6 (14 Dec09)

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



จากคอมเม้นท์ที่ได้รับก็คือ ต้องแก้ไขเรื่อง

1.ขนาดของตาราง ให้แก้ทุกตารางในหน้า Template เป้น 100 เปอร์เซ็นต์

2.Rubric แก้เรื่องเกณฑ์การให้คะแนน

3.หน้า Resource หา icon มาใส่

4.ให้ Credit

5.ตั้งชื่อ Title ข้างบน



สิ่งที่ต้องเตรียมมา: ทำ WebQuest ให้เสร็จ



ข้อเสนอแนะ: ดีคะ ได้ฟังคอมเม้นท์ ทำให้ได้เห็นข้อบกพร่องที่ตัวเราเองมองไม่เห็น

Learning Log Week5 (30NOV09)

สิ่งที่ได้เรียนรู้: วันนี้ได้เรียนรู้การใช้โปรแกรม Macromedia Dreamweaver ค่ะ

• การตั้งค่า Site:

1.เปิดโปรแกรม Macromedia Dreamweaver 8

2.เลือก เมนู site> Manage Sites> New> Sites

3.ระบุชื่อ Site ที่ต้องการ > Next> เลือก No> Next

4. ระบุที่จะเก็บไฟล์ต่างๆของ Site > Next

5. ตั้งค่า Remote Server ให้เลือก None> Next

6.Done

7.จะกลับมายังหน้า Manage Site> เลือก Site ที่เราสร้างไว้> Done

**โดยSite ที่เราสร้างไว้ จะถูกเก็บไว้ในโฟลเดอร์ที่เราเลือกไว้ในตอนแรก **

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

1. คลิก Page Properties

2. เลือก Title/ Encoding > Ecoding> Unicode (UTF8)

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

1. คลิกปุ่ม Page Properties:

- Apperance: จะเป็นการกำหนดค่าแสดงผลทั่วไปของเว็บเพจ เช่น กำหนดชุด Fonts มาตรฐานที่จะใช้ ขนาดและสีตัวอักษร, ภาพพื้นหลัง เป็นต้น

-Link : เป็นการกำหนดลักษณะของตัวเชื่อมโยงภายในเว็บเพจ เช่นตัวอักษร และสี เป็นต้น

- Heading: เป็นการรูปแบบหัวข้อที่จะใช้ในเว็บเพจ

- Title/Encoding : เป็นการตั้งชื่อให้หัวของเว็บเพจที่อยู่บนเว็บเบราเซอร์

- Tracing Image: เป็นการนำเอาภาพมาวางบนหน้าเว็บไซต์ โดยที่ภาพดังกล่าวจะเหมือนแผ่นใส คือจะไม่ปรากฎอยู่จริงในเว็บเบราเซอร์

** เมื่อปรับค่าตามต้องการแล้ว คลิก OK **

** อย่างไรก็ตามสามารถเปลี่ยนหัวข้อของเว็บเพจได้ที่ Tab Title

• การสร้างตาราง:

1.เลือก Menu Insert > Table หรือ จะคลิก icon Table บน แถบเครื่องมือ Common ก็ได้
2.สร้างตาราง ( 2แถว 2 คอลัมน์) ปรับค่าความกว้างของตารางตามขนาดของเว็บเพจ, กำหนดเส้นขอบของตาราง (กำหนดเป็น0) เพื่อที่จะได้ไม่แสดงผล > OK
3. คลิกตารางด้านล่างซ้าย> แทรกตารางขนาด 1 คอลัมน์ 6 แถว ซ้อนขึ้นมา เพื่อจัดรูปแบบเมนู
4. ย่อความกว้างตารางให้เล็กลง ทั้งตารางย่อยและตารางหลัก

5. คลิก แถบ Table อันที่2 ปรับ Align เพื่อให้ตารางมาอยู่ตรงกลาง(Center)

• การใช้ตารางเพื่อสร้างองค์ประกอบเว็บเพจ:

1.ใช้ตารางที่สร้างไว้จากบทเรียนที่แล่ว
2. เลือกเมนู insert > Image หรือจะคลิกที่ icon บทแถบเครื่องมือ common ได้เหมือนกัน หรืออีกทางเลือกนึงคือดึงจาก File จากหน้าต่างด้านข้างขวาได้เลย โดยจะมีหน้าต่างขึ้นให้ระบุข้อความกำกับภาพ > OK
3. หากภาพมีขนาดใหญ่ตารางให้ Merge cell มารวมกันได้ โดย กด Shift เพื่อเลือกตารางทั้งสอง คลิกขวา เลือก Table> Merge Cell ถ้าตารางยังมีขนาดไม่พอดีกับที่ตั้งไว้ สามารถคลิก ตัวเลขที่ด้านล่าง เลือก Make All Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพได้
4.นำไฟล์รูปภาพเมนูที่สร้างไว้ มาใส่ด้านซ้ายของตาราง หากจำนวนตารางไม่พอ ให้คลิก แถบ Table ของตารางที่สอง แล้วแก้จำนวนแถวที่หน้าต่าง Properties ด้านล่าง โดยแถวของตารางก็จะเพิ่มขึ้นมา ที่นี่ก็สามารถนำภาพมาใส่ห้ครบได้เลยค่ะ
** ในแต่ละช่องของตาราง เราสามารถจะปรับสีได้ตามความพอใจ**
5. ลองเลือกช่องตารางด้านขวาที่ว่าง คลิกปุ่ม Background color (ด้านล่าง) เลือกสีที่ต้องการ นอกจากนี้ยังสามรถใส่รูปภาพให้เป็นพื้นหลังได้เช่นกัน

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

1. เมนู File > Save as Template > ตั้งชื่อ Template > Save > Yes

2. เลือกข่องตารางทางขวา ปรับตำแหน่งข้อความให้ไปอยู่ด้านบน โดยเลือก Top ที่ช่อง Vertical

3. สร้างตารางขนาด 1*1 ลงไป

4. เมนู Inset > Template Object> Editable Region > ตั้งชื่อ พื้นที่ > OK

5. บันทึกเว็บเพจให้เรียบร้อย > File > Save

6. สร้างเว็บเพจใหม่ขึ้นมา เพื่อทดสอบ Templateโดย คลิก File > New

7.เลือก Modify> Template>Apply Template to pages> เลือก Template ที่ต้องการ คลิก Select

• เทคนิคการสร้าง Rollover button:

1. Downlaod และแตก File ที่เตรียมไว้ให้ ใน Folder Image

2. เปิดไฟล์ Index.html ที่เคยสร้างไว้

3. เลือกพื้นที่สำหรับใส่วัตถุ > ปรับตำแหน่งการจัดวางเป็นจัดกึ่งกลาง

4. คลิกที่ลูกศรข้างๆ icon รูปภาพ > Rollover Image > ระบุภาพที่จะแสดงเริ่มต้น....> OK

5. บันทึก File ก่อน Preview

สิ่งที่ต้องเตรียมมา: ทำโปรเจคงานคู่ให้เสร็จ ^^


ข้อเสนอแนะ: สนุกดีค่ะ ได้เรียนรู้และลองทำในสิ่งที่ไม่เคยทำ อย่างโปรแกรม Dreamweaver แต่บางทีก็ยังงง งง เพราะบางทีคนสาธิตเองก็ยังงงงง ทำให้หนูยิ่ง งง งง ค่ะ >_______<

Learning Log Week4 (23Nov09)

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

- การสร้าง Animation อย่างง่าย
- เปิดโปรแกรม > เลือก File > Import> Folder as frames
- ที่หน้าต่าง Browse for folder>เลือกFolder ที่เก็บภาพไว้ > OK
- ภาพทั้งหมดจะปรากฎขึ้นมา
- โดยสามารถเลือกปรับความเร็วของการเคลื่อนไหลได้ตามที่เราต้องการ
- * ถ้าต้องการปรับภาพหลายภาพพร้อมกันให้ กด shift สำหรับเลือกภาพอย่างต่อเนื่อง และ ctrl สำหรับภาพที่ไม่ต่อเนื่อง
- บันทึกภาพ เลือก Menu File> Save Optimize as..
- เลือก save ประเภท Image Only .gif > Save



- การใช้ slice ในการสร้างงานเว็บ
- เปิดโปรแกรม > เปิด File รูปที่เตรียมไว้
- เมนู View > Rulers จะปรากฎไม้บรรทัดขึ้นมา
- ดึงเส้น ไกด์อกมาจากไม้บรรทัด โดยใช้เครื่องมือ Move tool
- เลือกเครื่องมือ slice tool เพื่อทำการ slice
- slice ภาพเป็นส่วนๆตามความต้องการ
- File > Save as บันทึกเป็น นามสกุล PSD เพื่อที่จะกลับมาแก้ไขงานได้
* ถ้าหากจะซ่อนเส้นไกด์ ให้คลิกที่ View > Show > Guides โดยถ้าต้องการให้เส้นไกด์กลับมาใหม่ก็ใช้คำสั่งเดิม

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

- การบันทึก Slice เป็นเว็บเพจ
- เลือก เมนู File > Save for web
- เลือก Save> เลือกรูปแบบการบันทึกเป็น HTML and Images
- จะได้เป็น File . Html
- ตรวจสอบผลลัพธ์ที่เกิดขึ้น คลิก Minimize button
- ลองเปิดโฟลเดอร์ขึ้นมาดู จะพบว่าชิ้นงานของเราจะถูกตัดออกเป็นส่วนๆ แต่เมื่อดูผลลัพธ์ในเว็บ Browser จะพบว่าภาพจะเป็นภาพเดียวกันก่อนืที่จะถูกตัดแบ่ง แต่บริเวณที่กำหนดการเชื่อมโยงไว้จะสมารถคลิกเพื่อไปยังหน้าเพจที่เราต้องการได้


- Tips การ Save คลิปจาก Youtube โดยไม่ต้องลง โปรแกรมใดๆเพิ่มเติม
- เปิดคลิปที่เราต้องการ
- ตรง url เปลี่ยนจาก www เป็น Kick > Enter
- เลือกนามสกุลไฟล์ที่ต้องการ > คลิก GO
- คำว่า GO จะเปลี่ยนเป็น Down ให้คลิกขวา คำว่า Down
- เลือก Save Target as



สิ่งที่ต้องเตรียมมา: เตรียมทำ แผน Project Study Web Quest แบบงานคู่ ส่งภายในวันอาทิตย์ 6 โมงเย็น


ข้อเสนอแนะ: การเรียนการแบบวันนี้ก็ ค่อนข้างดีคะ ใช้เวลาได้เต็มเปี่ยมเลยค่ะ ^^ ทั้งได้ฟังเพื่อนพรีเซนต์ แล้วยังได้ลงมือปฏิบัติจริงในห้อง Lab

Learning Log Week3 (16Nov09)

สิ่งที่ได้เรียนรู้: วันนี้ได้เรียนรู้เรื่อง ADDIE & Gagne

A: Analysis : 1) Goal วิเคราห์วัตถุประสงค์ , วิเคราะห์เนื้อหา

2) Audience กลุ่มเป้าหมายคือใคร

3) Environment สภาพแวดล้อง บริบทต่างๆ



D: Design : 1) Site Structure โครงสร้างเว็บไซต์

2) Storyboard ออกแบบแต่ละหน้าเพจให้สอดคล้องกับวัตถุประสงค์

3) Interfate Design "Rapid Prototype ภาพออกแบบคร่าวๆ"



D: Development : 1) Tool ซอฟแวร์ต่างๆ เช่น Photoshop, Dreamwaever

2) Team ทีมในการออกแบบเว็บ ทีม กราฟฟิค ทีมรวบรวมจัดเรียง เนื้อหา ทีมตัดต่อวิดีโอ ทีมพัฒนาเว็บ "Rapid Prototype"



I: Implement: 1) Pilot การนำไปทดลองใช้ > ปรับแก้ตามข้อบกพร่อง หรือข้อเสนอแนะ

2) Rollout Plan



* อาจจะมีการทดลองใช้กับผู้สอนด้วย และต้องตรวจสอบอุปกรณ์ต่างๆในโรงเรียนด้วยว่ามีความพร้อมหรือไม่*



E: Evaluation: 1) SMEs

2) Audience

การวัดประเมินผลต้องทำอย่างเป็นระบบและมีคุณภาพ เพื่อเป็นการเปิดโอกาสรับฟังความเห็นกับผู้ใช้งานจริง 1) ประเมินผลระหว่างการพัฒนา

2) ประเมินผลเมื่อพัฒนาบทเรียนจบแล้ว



Gagne:
1. Gain Attention : การเรียกความสนใจจากผู้เรียน เช่น การนำคลิปวิดีโอมาให้ผู้เรียนชม

2. Inforn Learner Objective :แจ้งผู้เรียนให้ทราบถึงวัตถุประสงค์ของบทเรียนนั้นๆ ของ bloom จะชัดเจนที่สุด คือมี 3 ด้าน พุทธพิสัย, จิตพิสัย,ทักษะพิสัย

3.Stimulate Recall of Prior Learning: การกระตุ้นความรู้เดิมเพื่อให้เกิดการเชื่อมโยงกับความรู้ใหม่ เช่น Pre-test หรือจะใช้ถามตอบ แบบ Real time โดยใช้ chat room หรือแบบไม่ประสานเวลา โดยการโพสท์คำถามไว้ให้ผู้เรียนมาตอบ

4.Present the content: การนำเสนอเนื้อหา อาจจะเป็นสรุป หรือจะเป็นเนื้อหาแบบมีปฏิสัมพันธ์ โดยเนื้อหาอาจจะอยู่ในรูปแบบของพาวเวอร์พ้อยท์, PDF , Flash movie, E-book, CAI เป็นต้น

5.Provide Learning Guidence: การให้คำแนะนำระหว่างการเรียน การให้แนะนำบนบท อาจจะมีหน้า FAQ คำถามที่พบเจอบ่อยๆ หรืออาจจะมีปุ่ม Help แบบ realtime หรือ ไม่ Realtime

6.Elicit Perfomance: การตรวจสอบว่าผู้เรียนเกิดการเรียนรู้หรือไม่ โดยอาจจะมี แบบฝึกหัดต่างๆ โดยอาจจะมี Discussion Board หรือมอบหมายงานต่างๆเป็นกลุ่มได้ โดยส่งผ่าน Communication Tool ต่างๆได้

7.Provide Feedback: การให้ข้อเสนอแนะกับผู้เรียน อาจจะผ่านทาง Announcement, Chat room, E-mail ต่างๆ

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

9.Enhance Retention & Transfer to the job: การเพิ่มให้แน่ใจว่าผู้เรียนได้รับความรู้ เช่น การทบทวนและการเสนอแนะนำไปใช้ในเนื้อหาบทต่อไป พร้อมทั้งมีการเชื่อมโยงให้ผู้เรียนเห็นเป็นรูปธรรม หรือ การตั้งโจทย์ที่ท้าทายให้ผู้เรียนร่วมกันอภิปรายผ่าน Discussion board



WBI Design: หลักในการออกแบบ - เนื้อหา

- กิจกรรม

1. เนื้อหา: กำหนดวัตถุประสงค์การใช้บทเรียนอย่างชัดเจน , ใช้สีอย่างเหมาะสม, การใช้หัวข้อใหญ่-ย่อย, การใช้ถ้อยคำสะน กระทัดรัด, การนำสื่อประสมมาใช้, การใช้ตาราง ทำให้เกิดความชัดเจนมากยิ่งขึ้น

2.กิจกรรม: เน้นกิจกรรมส่งเสริมการเรียนการสอนให้มีประสิทธภาพมากยิ่งขึ้น

-ประสานเวลา: ผ่าน chat / viideo conference

-ไม่ประสานเวลา : E-mail

-แบบร่วมมือ : เป็นการเรียนการสอนแบบผสมผสานระหว่าง synchonous และ asynchonous ซึ่งจะพิจารณาตามความเหมาะสมของเนื้อหาและกิจกรรม



บทสรุป: ในการออกแบบบทเรียน จะมี2หลักการใหญ่คือ เป็นระบบ ADDIE MODEL และ Gagne การออกแบบบทเรียนแบบเป็นขั้นเป็นตอน ซึ่งถ้าพิจารณาดีๆแล้วจะเหมือนกับการเขียนแผนการสอน คือมี 3 ขั้นตอนใหญ่ๆ คือ ขั้นนำ ขั้นสอน และขั้นสรุป นอกจากนี้ยังมีทริปต่างๆ เช่น การใช้สี การติดต่อสือสาร การใช้ตางราง หรือการนำสื่อประสมเข้ามาให้บทเรียนมีความน่าสนใจมากยิ่งขึ้น


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

การออกแบบตามแบบ Lint& Horton เสนอไว้ว่าการออกแบบ Site structure มีอยู่ 3 รูปแบบคือ
1)Sequence: แบบเรียงลำดับ คือการออกแบบเว็บไซต์ไปทีละหน้า เหมาะกับเว็บๆซต์ที่มีจำนวนเว็บเพจไม่มาก
2) Hierarchy : ออกแบบเป็นแบบระดับชั้น เหมาะสำหรับเว็บไซต์ที่มีเว็บเพจมาก เป็นแบบที่นิยม เห็นได้ทั่วไป
3) Combination : เหมาะกับเว็บไซต์ที่มีความซับซ้อน คือนำข้อดีของสองรูปแบบข้างต้นมาผสมกัน

สรุป: การออกแบบ site structure มีอยู่หลายรูปแบบด้วยกัน เราสามารนำมาผสมผสานเพื่อให้เหมาะสมกับเว็บไซต์ของเรา เพื่อให้เกิดประสิทธภาพอย่างสูงสุด

นอกจากนี้ยังได้เรื่อง Page Design

ในเวบเพจหน้าหนึ่งจะมี 4 องค์ประกอบด้วยกันคือ

1.Page Header: มักจะใส่ชื่อผู้จัดทำไว้ เพราะเป็นส่วนแรกที่ผู้เข้าชมมอง มุมบนซ้าย

2.Navigation Bar : เชื่อมโยงไปยังส่วนต่างๆของเว็บไซต์

Body: ตัวเนื้อหา อาจจะมีตัวนำทาง ซึ่งมักจอยู่ด้านขวาของเนื้อหา

3. Page footer : อาจจะใส่ Text Link ต่างๆไว้ นิยมใส่ชื่อของหน่วยงาน หรือแบนเนอร์ของผู้ให้การสนับสนุน

โดยปกติแล้ว องค์ประกอบ 4 อย่างนี้จะเป็นรุปแบบที่คงที่เหมือนกันหมด Template อาจเปลี่ยนบ้างในส่วนของ Body

หลักการออกแบบหน้าเว็บเพจ:

1. Simplysity คือ การจัดแต่เฉพาะองค์ประกอบหลักๆ ควรเลือกให้พอเหมาะ มีรูปแบบที่เรียบง่าย สีของตัวอักษรก็ไม่ควรมากมายจนเกินไป

2.Consistensy : ความสม่ำเสมอ คือ การสร้างความสม่ำเสมอให้เกิดขึ้นทั้งเว็บไซต์ เพื่อไม่ให้ผู้ใช้งานเกิดความเหมาะสม

3.Warm tone colour : การเลือกใช้สี ควรให้เหมาะสม, สีจะมีอิทธิพลในเรื่องของอารมณ์ด้วย เช่น สีโทนเย็น จะให้ความรู้สึกสงบ สีโทนร้อนจะให้ความรู้สึกที่ตื่นเต้น รุนแรง เพราะฉะนั้นเรีอง สีก็เป็นปัจจัยสำคัญ

Warm tone colour: ทำให้หมดจากความเฉื่อยชา ทำให้มีชีวิตชีวา

4.Cool Colour : แสดงถึงความสุภาพ อ่อนโยน มีความเรียบร้อย สามาระโน้มน้ามในระยะไกลได้ "กลุ่มสีที่ปลอดภัย"

5.Neutral tone coulour: สีโทนกลาง ประกอบด้วย ขาว เทา ดำ น้ำตาล

**นอกจากนั้นสียังช่วยเสริมเอกลักษณ์ขององกรค์ได้อีกด้วย ***

โดยมีเว็บไซต์แนะนำในเรื่องของการใช้สีคือ adobe kuler , colourlovers

การออกแบบระบบนำทาง: องค์ประกอบคือ เมนูหลัก, เมนูเฉพาะกลุ่ม,เครื่องมือเสริม เช่น ช่องค้นหา

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

เทคนิค Text& Button, Drop down list, On mouse Over

สิ่งที่ต้องเตรียมมา: เตรียม พรีเซนต์โครงสร้าง เว็บเควสท์ของเรา



ความคิดเห็นอื่นๆ: วันนี้ งานเยอะที่สุดเลยค่ะ เหนื่อยๆๆๆ
ไม่ต้องVote ละคะ งานคู่ งานคู่ งานคู่ มติเป็นเอกฉันท์ชัวร์!!!!!