Learning Log Week 9

Learning Log Week8

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

สิ่งที่ต้องเพิ่มเติม/เตรียมมาครั้งหน้า
หัวข้อในการทำเว็ปไซต์ และ site structure
การศึกษาการใช้งานเพิ่มเติม
รูปแบบtemplate

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

Learning Log Week7

สิ่งที่ได้เรียนรู้
CMS AND LMS
CMS (Content Management System)
คือเว็ปไซต์รูปแบบระบบที่ช่วยสร้างและบริหารเว็ปไซต์สำเร็จรูปโดยผู้ใช้ไม่จำเป็นต้องมีความรู้พื้นฐานของโปรแกรมมาก่อน ประกอบด้วย
- ระบบจัดการบทความและข่าวสาร
- ระบบจัดการบทวิจารณ์
- ระบบจัดการสมาชิก
- ระบบสืบค้นข้อมูล
- ระบบจัดการไฟล์ดาวน์โหลด
- ระบบจัดการป้ายโฆษณา รบบการวิเคราะห์ ตรวจสอบความนิยมในเว็ปไซต์
ตัวอย่างเว็ปไซต์รูปแบบ CMS
>> 1. Drupal เป็นเว็ปไซต์รูปแบบ Dinamic แสดงทางweb browser สามารถเพิ่ม Node และใส่comment ได้

>>>1.1GCCA

>> 2. Google sites มีtemplate สำเร็จรูปให้เลือกใช้ ใช้งาานง่ายเหมือนการเขียน Blog แต่ไม่สามารถใช้กับฐานข้อมูล my sql

>> 3. Mambo เคยเป็นเว็ปต้นแบบของ Joomla

>>> 3.1 วัดไสค้าน

>> 4. Joomla *** เป็น CMS ที่นิยมมาก สามารถปรับรู฿ปแบบเว็ปไซต์ สร้างเนื้อหา แสดงความคิดเห็น และการปรับแต่งอื่นๆ

>>> 4.1 Thailand science park

LMS (Learning Management System)

คือระบบนำเสนอความรู้ จัดเก็บข้อมูลเพื่อติดตามสิ่งต่างๆที่เกิดขึ้น สนับสนุนการจัดการเรียนการสอน E-learning และยังเป็นเครื่องมือสร้างบทเรียนสร้างกิจกรรม online เช่น การเรียน การทดสอบ การประเมิน การตรวจสอบเวลาเรียน ตรวจสอบการทำกิจกรรม

ตัวอย่างเว็ปไซต์รูปแบบ LMS

>> 1. Blackboard เช่น Chulalongkorn ใช้งานในการdownloadบทเรียน แต่เป็นsoftware ลิขสิทธิ์ไม่มีการยืดหยุ่นให้ผู้ใช้




>>2. TCU-LMS โครงการเรียน e-learning



>>3. Sakai Project ช่วยเหลือและสนับสนุนการเรียน online



>>4. A Tutor ออกแบบให้ปรับแต่งได้ตามความต้องการของผู้ใช้สามารถออกแบบเนื้อหาได้เอง



>>5. Moodle *** เป็น LMS ที่นิยมมาก สามารถออกแบบรายวิชาได้ตามต้องการ สร้างบทเรียนแบบทดสอบ สนับสนุนการเรียน Online ข้อด้อยการออกแบบตายตัวแต่สามารถปรับแก้ไขได้บ้าง



>>> 5.1 มหาวิทยาลัยสงขลา
>>6. Learnsquare (NECTEC) เรียนรู้ได้ตามอัธยาศัยทุกที่ทุกเวลา รูปแบบสื่อหลากหลาคล้ายการเรียนในห้องเรียน พัฒนาโดยคนไทย


JOOMLA
การใช้งานการติดตั้ง การเพิ่มเทคนิคต่างๆ การแก้ไข Banner


สิ่งที่จะค้นคว้าเพิ่มเติม/เตรียมมาครั้งหน้า
เทคนิค Joomla คนละ1เรื่อง
การติดตั้งในเครื่องของตน

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

Learning Log Week 6

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

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

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

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

ข้อคิดเห็น

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

Learning Log Week 5

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

- กำหนดวันส่ง draff 70 %+ วันสอบ Midterm :(
- โปรแกรม Adobe Image Ready CS2 ซึ่งเป็นโปรแกรมที่เราสามารเพื่อการเคลื่อนไหวต่างๆในหน้าเวปไซต์ได้ และทำได้ไม่ยาก



-------------------------------------------------------------------------------

โปรแกรม Dream waver



----> 1. ตั้งค่าไซต์ ทำให้ไฟล์ที่สร้างอยู่ในที่เดียว และทำการเชื่อมโยกับไฟล์ต่าๆ
----> 2. การตั้งค่าภาษา ซึ่งเป็นสิ่งที่ควรทำเพราะจะทำให้การแสดงภาษาหน้าเว็ปไซต์สมบูรณ์ และการตั้งค่านี้จะแก้ไขไม่ได้อีกจึงควรเลือกเปน
Unicode (UTF-8)
----> 3. การตั้งค่าเว็บเพจเบื้องต้น เป็นการปรับตั้งค่ามาตรฐานทั่วไปไม่ว่าจะเป็นสีตัวอักษร สีพื้นหลัง การใส่ภาพ
----> 4. การสร้างตาราง เพื่อแบ่งข้อความกับข้อความ หรือข้อความกับภาพ เพื่อการจัดวางองค์ปะกอบที่สวยงาม
----> 5. การใช้ตารางช่วยจัดองค์ประกอบของเว็บเพจ เป็นการนำรูปภาพเข้ามาใส่ในตารางเพื่อให้ดูเป็นระเบียบ แลพการเติมสีให้กับตาราง
----> 6. การสร้าง Template เพื่อให้ได้หน้าเว็บไซต์ทุกหน้าเหมือนกัน และแก้ไขปัญหาความยุ่งยากในการแก้ไข
----> 7. ตัวอย่างเทคนิคการสร้าง Rollover Button เพื่อให้สามารถสร้างปุ่มที่สามารถคลิ๊กลิงค์ไปยังหน้าอื่นและเปลี่ยนสีเมื่อถูกเมาท์คลิ๊ก
----> 8. การสร้างลิงค์ เพื่อให้สามารถเชื่อมโยงไปยังหน้าอื่นๆในเว็ปไซต์ได้

---------------------------------------------------------------------------------------------

Web Add-ons

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

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

การใช้งาน Dream weaver การเพิ่ม Web Add-ons และ 70 % ของงานกลุ่ม

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

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

Learning Log Week 4

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

การออกแบบ WebQuest

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

การออกแบบที่ควรหลีกเลี่ยง
1. เนื้อหากิจกรรมหรือภาระงานมีรูปแบบเดิมๆเช่น Blackboard
2. การเลือกใช้โทนสีที่ไม่สัมพันธ์กับเนื้อหา
3. การใส่เนื้อหาหรือหน้าบทเรียนให้นักเรียนโดยตรง

Slice



Slice การแบ่งภาพให้เป็นชิ้นๆเพื่อสร้างให้เป็นลิงค์สามารถเชื่อมโยงไปหน้าอื่นได้ซึ่งเป็นเครื่องมือที่ดีมากสามารถสร้างได้จากโปรแกรม Photoshop


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

งานคู่และการออกแบบเว็บที่สมบูรณ์ ศึกษาเรื่องการออกแบบเว็ปเบื้องต้น

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

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

Learning Log Week 3

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

ADDIE’S Model


-------- Analyze = การวิเคราะห์
- Goal วัตถุประสงค์ของบทเรียน
- Audience กลุ่มเป้าหมายเป็นใคร
- Environment สภาพแวดล้ม บริบทต่างๆ

....................................................................................

---------Design = การออกแบบ
- site structure โครงสร้างของ Weppage
- storyboard การร่างเนื้อหาที่จะใส่ทั้งหมด และสื่ออื่นๆที่จะใช้
- Interface Design
.......................Rapid Prototyping การร่างต้นแบบ.............

---------Develop การพัฒนา
- Tools software
- Team ทีมในการออกแบบทั้งภาพ เสียง วีดีโอ
.................................................................................................

---------Implement การนำไปใช้
- Pilots นำไปทดลองใช้ กับกลุ่มเป้าหมาย ผู้สอนผู้เชี่ยวชาญ และนำ feedback มาปรับปรุง
- Rollout plan วางแผนการใช้จริง

ซึ่งในขั้นตอนนี้รวมถึงเป็นการเตรียมอุปกรณ์ให้พร้อมเพื่อการนำไปใช้ได้อย่างสมบูรณ์
...............................................................................................

---------Evaluation การประเมิน
- Smes ด้านเนื้อหาและด้านเว็บ
- Audience คือ กลุ่มเป้าหมาย

การประเมินคุณภาพของชิ้นงานสามารถทำได้ ทั้งระหว่างและเมื่อนำสื่อไปใช้แล้วเพื่อนำไปปรับปรุงและพัฒนาต่อไป


________________________________________________


Gagne












มี 9 ขั้นตอน ซึ่งแบ่งออกเป็นขั้นนำ ขั้นสอน ขั้นสรุป โดย

ขั้นนำ

1. Gain attention
เรียกความสนใจจากผู้เรียนโดยอาจใช้ภาพ สี เสียง animation วิดีโอ

2. Inform learners Objectives
บอกวัตถุประสงค์แก่ผู้เรียน และขั้นตอนกิจกรรมการเรียนรู้ โดยใช้ Homepage หรือ Announcement

3. Stimulate recall of prior learning
กระตุ้นความรู้เดิม อาจทำการ Pretest ผ่านCommunication tools
- แบบประสานเวลา เช่น Chatroom ,Video conference
-แบบไม่ประสานเวลา เช่น discussion board
............................................................................................

ขั้นสอน

4. Present the content
การนำเสนอเนื้อหา ในรูปแบบ PPT , PDF, E-book,Flash,Video Clip,CAI

5. Provide learning guidance
การให้คำแนะนำแก่ผู้เรียน Post คำถามในหน้า Helps แบบ real timeและ non-real time

6. Elicit performance
การตรวจสอบพฤติกรรมผู้เรียน

7. Provide feedback
ให้ข้อเสนอแนะผู้เรียน ผ่านทาง Communication tools
..........................................................................................

ขั้นสรุป

8. Assess performance
การประเมินผล โดยการใช้ rubric ประเมินผลตามสภาพจริง

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

การออกแบบ WBI

เนื้อหา
1. กำหนดวัตถุประสงค์ชัดเจน
2. การใช้สี ข้อความ ภาพให้เหมาะกับผู้เรียน
3. การใช้หัวข้อใหญ่ หัวข้อย่อย
4. หลีกเลี่ยงศัพท์ที่ยาก
5. การใช้สื่อประสมต่างๆ
6. การใช้ตาราง ทำให้เกิดความเป็นรูปธรรมมากขึ้น

กิจกรรม
แบ่งเป็น 3 รูปแบบ คือ
1. แบบประสานเวลา (Synchronous)
2. แบบไม่ประสานเวลา(Asynchronous)
3. กิจกรรมแบบร่วมมือ (Collaborative) เป็นการเรียนการสอนแบบผสมระหว่าง synchronous และ asynchronous

_____________________________________

Site structure
การเขียน Site Structure คือการ Design หน้า webpage เพื่อให้เกิดความเป็นระเบียบ แบ่งเป็น
1. การกำหนดโครงสร้างเว็บไซต์ (Site Structure) สอดคล้องกับวัตถุประสงค์ของเว็บ
มีการออกแบบอยู่ 2 แบบ คือ
1.1 จัดตามกลุ่มเนื้อหา
1.2 จัดตามกลุ่มผู้ชมความสนใจ
การออกแบบดังกล่าวทำให้รู้โครงร่างสะดวกแก่ผู้เยี่ยมชม
2. การออกแบบโดยคำนึงถึงโครงสร้างเนื้อหาแบ่งออกเป็น
2.1. Sequence แบบเรียงลำดับไปทีละหน้า เหมาะกับจำนวนเว็บเพจไม่มากนัก

2.2. Hierarchy เหมาะกับจำนวนเว็บเพจมาก พบทั่วไป นิยมใช้มาก

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

_______________________________________

Page design การออกแบบหน้าเว็บเพจ

Webpage ประกอบด้วยองค์ประกอบหลัก 4 อย่างคือ
1. Page header ส่วนบนสุดของเว็บ เป็นส่วนที่สำคัญที่สุด เพราะเป็นส่วนแรกที่ผู้ชมมอง

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

หลักการออกแบบหน้าเว็บเพจ มีหลักการ ดังนี้
1. Simplicity ความเรียบง่าย :เสนอแต่องค์ประกอบหลักในรูป สีสัน ตัวอักษร ภาพเคลื่อนไหว ให้พอเหมาะ ไม่มากจนเกินไป เช่นเว็ปไซต์ของ apple ,adobe
2. Consistency ความสม่ำเสมอ : ใช้รูปแบบเดียวกันในเว็บไซต์ ใช้ theam เดียวกัน
3. การใช้สีแบ่งเป็น

3.1 Warm tone color สีโทนร้อน : ทำให้ดูมีชีวิตชีวา ความสุข
3.2 Cool tone color สีโทนเย็น : ความสุภาพ อ่อนโยน นิยมใช้กันมากสุด เพราะสามารถโน้มน้าวในระยะไกล
3.3 Neutral tone color สีโทนกลาง : สีขาว ดำ เทา น้ำตาล โดยจะนำไปผสมกับสีโทนอื่นเพื่อสร้างจุดเด่นความน่าสนใจ
.........................................................................................

Navigation ระบบนำทาง

ประกอบด้วย 2 ส่วนที่สำคัญ

1.เครื่องนำทาง

2. เมนูเฉพาะกลุ่ม

และอาจมีเครื่องมือเสริมอื่นๆ ช่องค้นหา

...............................................................................

เทคนิค Text and Button

- Drop down List

- Dynamic drop down Menu

- On Mouse over

__________________________________

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

ไฟล์งานโครงสร้างและรูปแบบที่จะผลิต
และหลักการออกแบบ การใช้สี

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

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