Learning log Week 9 (01FEB53)

สิ่งที่ได้เรียนรู้
-การสมัครใช้server การอัพโหลดขึ้นserver การตั้งค่าต่างๆ
-การBackup และ Extract Joomla!

สิ่งที่ต้องนำมา
-ทำงานต่อ โดยปรับแก้หน้าเว็บให้ใช้flashเพิ่มความสนใจ และการเปลี่ยนbanner
-ศึกษาการประเมิน และนำมาประเมินพร้อมงานของตนในสัปดาห์นำเสนอ

ข้อเนอแนะ
-น่าจะมีแหล่งข้อมูลของhostingรวบรวมไว้ให้ด้วย

Learning log Week8 (18JAN53)

สิ่งที่ได้รียนรู้
-การสร้างเว็บด้วยJoomla! โดยการทำworkshop จากเอกสาร
-การเปลี่ยนไอคอนที่แสดงบนbrowser และการเปลี่ยนbannerของ templateต่างๆ แบบง่ายๆ

สิง่ที่ต้องเตรียมมา
-Site structure และความคืบหน้าของงานเท่าที่มี

ข้อเสนอแนะ
-งงกับJoomla!บ้าง แต่ก็ถือว่าง่ายกว่าโปรแกรมDreamweaver

Learning Log Week 07

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

การสร้างเว็บไซต์ที่เกิดขึ้นในแต่ละยุคแต่ละสมัยนั้นมีมาเรื่อยๆ ตั้งแต่การพัฒนาเขียน Code HTML เอง ถึงการใช้ Software ในการจัดการกับเนื้อหา ซึ่งเป็นการจัดการเนื้อหาต่างๆให้เกิดขึ้นบนหน้าเว็บได้อย่างสะดวกง่ายดาย เช่น Macromedia Dreamweaver, Page Maker เป็นต้น หรือแม้แต่การจ้างนักพัฒนามาสร้าง ซึ่งแต่ละวิธีก็มีข้อดีและข้อจำกัดต่างกันไป เว็บไซต์ที่จัดทำขึ้นนั้นอาจจะต้องมีการติดตามเพื่อตรวจสอบข้อผิดพลาด แต่ในการจ้างนักพัฒนาเว็บไซต์นั้นไม่เป็นที่นิยม เนื่องจากจะมีค่าใช้จ่ายสูงในการจ้างนักพัฒนาเว็บไซต์อย่างต่อเนื่องอย่างไม่มีที่สิ้นสุด ซึ่งเว็บไซต์ส่วนใหญ่ไม่มีการแยกเนื้อหาออกจากโครงสร้างของเว็บไซต์ ดังนั้นการที่ไม่อัพเดทหรือดูแล อาจเกิดปัญหา Link ตาย (ไม่สามารถเปิดเข้าไปใช้ได้)

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

ตัวอย่าง Software ที่ใช้สร้าง CMS เช่น

WordPress เดิมเป็น Software ใช้สร้างบล็อก เป็นระบบที่ยืดหยุ่น มีโปรแกรมเสริม, plug-in, theme

Drupal เก็บเนื้อหาในฐานข้อมูลในรูปแบบ dynamic แสดงผลบนหน้า web browser ผู้ใช้งานสามารถใส่comment ได้ แบ่งหน้าเว็บแบบ default เป็น3ส่วน ส่วนกลางเป็นพื้นที่สำหรับ content ส่วนข้างๆเป็นพื้นที่ที่เรียกว่า sidebar ไว้สำหรับไปยัง node อื่นๆ

Google Site มี template ใช้ร่วมกันระบบฐานข้อมูลไม่ได้ แต่ใช้งานง่าย เหมือนการเขียนบล็อก

Mambo ต้นแบบ Joomla! มีการพัฒนา extension อย่างต่อเนื่อง

Joomla! ปรับแต่งตามต้องการ ฟังก์ชันเยอะ ใช้ง่ายได้รับความนิยมสูงในปัจจุบัน

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

ตัวอย่าง Software ที่ใช้สร้าง LMS เช่น

Blackboard เป็น license LMS เลือกบทเรียนทำแบบทดสอบ ประเมินออนไลน์ แสดงผลคะแนน ข้อจำกัด มีลิขสิทธิ์ ไม่ยืดหยุ่นให้ปรับแต่ง

TCU-LMS พัฒนาขึ้นเอง และเผลแพร่

Sakai Project

ATutor ปรับแต่งระบบได้ตามความต้องการของผู้ใช้

Moodle เป็นOpen source ออกแบบรายวิชาได้ตามต้องการ ฟังก์ชัน การเรียนการสอน จำกัด มีโครงสร้างตายตัว สามารถปรับแต่งให้สวยงามได้

Learnsquare พัฒนาโดย nextech เรียนรู้ได้ตามอัธยาศัยในรูปแบบสื่อมัลติมีเดีย โต้ตอบได้เสมือนห้องเรียนปกติ พัฒนาด้วยคนไทย

____________________________________________

การติดตั้ง AppServ ซึ่งเป็นโปรแกรมติดตั้งสิ่งต่างๆที่ Joomla! ต้องการ จำลองเครื่องคอมพิวเตอร์ให้เป็น server และการติดตั้งฐาน MySQL Database เพื่อใช้ทดสอบการทำงานของ Joomla! ในเครื่องcomputer

การใช้งาน Joomla! จะแบ่งเป็น 2 ส่วน คือ front-end และ back-end ซึ่งจะเป็นการแสดงผลของหน้าที่แสดงให้ผู้เข้าชมเว็บไซต์ และ หน้าสำหรับผู้จัดการระบบ ตามลำดับ การทำงานของ Joomla! เกี่ยวกับบทความนั้น จำเป็นต้องสร้าง Section > Catagory >Article ตามลำดับ เหมือนเป็นการจัดเก็บไฟล์เอกสารแยกตามแฟ้มเอกสารต่างๆ การกำหนดค่าการแสดงผลใดๆก็ตามต้องกำหนดสิ่งๆนั้นเป็นค่า Default เช่น การกำหนดTheme การกำหนดรูปแบบอักษร เป็นต้น แม้แต่การโหลดplug-in ต่างๆเข้ามาเสริมใน Joomla! ก็สามารถทำได้และไม่ยากเลย อีกทั้งยังสามารถช่วยให้เว็บไซต์ที่ออกแบบมานั้นมีความยืดหยุ่นมากขึ้นด้วย

สิ่งที่ต้องเตรียมมา

- เตรียมPresent WebQuest

- ตกลงตัดสินใจเรื่องProjectที่2

ข้อเสนอแนะ

- วันนี้อดพรีเซ้นเว็บเควสท์ที่ทำมา เลื่อนเป็นสัปดาห์หน้า รอกันต่อไป

Learning Log Week 06

สิ่งที่ได้เรียนรู้
จากการออกแบบสร้างเว็บ อาจารย์แลพี่TAได้ให้คำแนะนำ ในเรื่องต่อไปนี้
- การใส่ preloader ก่อนจะเข้าหน้าhome ซึ่งเป็นการใช้โปรแกรม flash เข้ามาช่วย
- การใช้web slideshare.net ในการส่งไฟล์งานต่างๆ แทนการทำหน้าส่งe-mail หรือหน้าforum ในเว็ปของเรา ซึ่งเป็นการประหยัดเวลาได้มาก
- การใช้scribe เข้ามาช่วยในการจัดเก็บเอกสาร
- การใช้photoslide เข้ามาช่วยเพิ่มความน่าสนใจในการนำเสนอรูปภาพ ซึ่งมีข้อดีคือใช้พื้นที่ไม่มาก
- การใช้filterในAdobe Photoshop แทนการทำ Live trace ใน Adobe Illustrator
- การโหลดภาพกราฟิกที่มีแจกตามwebsiteต่างๆมาประยุกต์ใช้

สิง่ที่ต้องเตรียมมา
- งานทั้งหมด ประกอบด้วย webquest ที่เสร็จเรียบร้อย และเอกสารประกอบการออกแบบและผลิตจำนวนไม่เกิน10หน้า


ข้อเสนอแนะ
ผลงานที่ช่วยกันทำกับเพื่อนคงต้องมีการตรวจสอบแก้ไขกันหลายรอบก่อนส่ง เพราะต่างคนต่างอยู่ในช่วงของการสอบ

Learning Log Week 5

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

การสร้างภาพเคลื่อนไหวอย่างง่ายจากโปรแกรม Adobe ImageReady - ซึ่งมีขั้นตอนง่ายๆ แค่ เปิดโปรแกรม คลิ๊ก File > Import > Folder as Frames… จากนั้นจะได้ภาพขึ้นมาในAnimation window แล้วก็ทำการปรับเวลา รอบการเล่น เมื่อเสร็จแล้วบันทึกไฟล์ โดยเลือก File > Save Optimized As… แล้วเลือกนามสกุลไฟล์เป็น .gif เพื่อทำเป็นภาพเคลื่อนไหว

ความรู้เบ้องต้นของการใช้โปรแกรม Macromedia Dreamweaver เช่น
การตั้งค่าsite – ให้เป็นแหล่งที่จัดเก็บไฟล์ทั้งหมดในการทำงาน
การตั้งค่าภาษา – เพื่อให้ภาษาที่ใช้ในเว็บของเราเป็นสากล เปิดที่ไหนก็สามารถอ่านได้ โดยใช้เป็น Unicode (UTF-8)
การตั้งค่าเว็บเพจ – เป็นการตั้งค่าทั่วไป เช่น ชุดตัวอักษร สี ขนาด รูปแบบ ของตัวอักษร จุดเชื่อมต่อ หัวกระดาษต่างๆ
การสร้างตารางและใช้ตารางในการจัดองค์ประกอบหน้าเว็บ – ในการสร้างเว็บต้องใช้ตารางเข้ามาช่วยในการจัดแบ่งหน้าหรือแบ่งส่วนของหน้าเว็บ เช่นการวางอักษรและภาพคนละฝั่ง หรือการทำพื้นที่วางปุ่มไอคอน
การสร้างtemplate – บันทึกหน้าเว็บเป็นTemplate เพื่อลดเวลาสร้างหน้าเว็บทุกๆหน้าให้เหมือนกัน โดยเหลือเพียงแค่เฉพาะส่วนที่ต้องการแก้ไขให้สามารถเปลี่ยนแปลงได้
การสร้าง Rollover Button – เพื่อใช้เพิ่มความน่าสนใจให้กับหน้าเว็บของเราให้มีการโต้ตอบกับผู้ใช้งาน

การใส่ Javascript - เพื่อเพิ่มความน่าสนใจให้เว็บเพจมากขึ้น โดยจะใส่ในส่วนระหว่างแท๊ก Head

สิ่งที่ต้องเตรียมมา

ทำเว็บของตนให้ได้ประมาน 60% แล้วนำมาส่งดูความเคลื่อนไหว

ข้อเสนอแนะ

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

Learning Log Week04

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

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

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

สิ่งที่ต้องนำมา

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

ข้อเสนอแนะ

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

Learning Log Week 3

สิ่งที่ได้เรียนรู้
ADDIE 5 ขั้น
Analyze วิเคราะห์วัตถุประสงค์, กลุ่มเป้าหมาย และเนื้อหาการเรียนการสอน
Design ออกแบบโครงสร้างเว็บไซต์ - เป็นขั้นที่สำคัญ วางตำแหน่งสิ่งต่างๆในเว็บไซต์ สามารถเห็นโครงสร้างของเว็บเป็นรูปธรรมซึ่งทำให้สร้างจุดเชื่อมโยงได้ง่าย ทำให้ผู้เข้าใช้เข้าใจลำดับขั้นตอนได้ง่ายและไม่สับสน
Develop ใช้ storyboard ช่วยในการออกแบบใช้ชัดเจนยิ่งขึ้นว่าแต่ละเว็บเพจ จะมีองค์ประกอบอย่างไร
Implement นำเว็บไซต์ไปใช้ในการเรียนการสอน
Evaluate ประเมินผลการเรียนรู้จากหลายๆด้าน ให้ตรงกับวัตถุประสงค์ที่ได้วิเคราะห์ไว้

GAGNE 9 ขั้น
(1) gaining attention (reception) การใช้ภาพ เสียง สี แอนนิเมชั่นหรือวิดีโอ เพื่อเร้าความสนใจผู้เรียน
(2) informing learners of the objective (expectancy) นำเสนอวัตถุประสงค์หรือสิ่งที่คาดหวังจากผู้เรียน รวมทั้งขั้นตอนกิจกรรมการเรียนรู้ ให้ผู้เรียนได้ทราบ
(3) stimulating recall of prior learning (retrieval) การตั้งคำถามหรือโต้ตอบ เพื่อเรียกความรู้พื้นฐานที่จำเป็น
(4) presenting the stimulus (selective perception) ให้เนื้อหาโดยนำเสนอในรูปแบบที่น่าสนใจ
(5) providing learning guidance (semantic encoding) ให้ตัวช่วยหรือนำทางในการดำเนินกิจกรรมการเรียนรู้
(6) eliciting performance (responding) ดำเนินกิจกรรมการเรียนรู้ เช่นทำงานที่ได้รับมอบหมาย หรือแลกเปลี่ยนความคิดเห็น
(7) providing feedback (reinforcement) ให้ผลป้อนกลับ
(8) assessing performance (retrieval) ประเมินผลงาน
(9) enhancing retention and transfer (generalization) ทำให้เชื่อโยง ให้เห็นเป็นรูปธรรม

เทคนิคต่างๆ เช่น การใช้สี การสรุปด้วยตาราง การใช้มัลติมีเดีย การใช้หัวข้อใหญ่หัวข้อย่อย การออกแบบการเรียนแบบประสานเวลา ไม่ประสานเวลา และแบบผสม เทคนิคเหล่านี้ช่วยให้ผู้เรียนเกิดการเรียนรู้ได้ดีขึ้นและเป็นระบบมากยิ่งขึ้น

Site Structure
การออกแบบ Site Structure ช่วยเอื้อประโยชน์ในการสร้างจุดเชื่อโยงต่างๆอย่างเป็นระบบในเว็บเพจ
และประเภทของ Site Structure ทั้ง 3 แบบ คือ
1 Sequence เป็นลำดับ หน้า1-2-3-4-...
2 Hierachy เป็นแบบแบ่งชั้น ย่อยๆไปจากจุดใหญ่หรือหัวข้อ
3 Combination แบบผสมผสาน คือการนำข้อดัมารวมกันอย่างไร


สิ่งที่ต้องเตรียมมา
Powerpoint present Web structure

ข้อเสนอแนะ
วันนี้เนื้อหางงมาก งานก็งงมากเหมือนกัน
มีกลิ่นทินเนอร์ด้วย ปวดหัวกันทั้งห้อง