โทรศัพท์: 084-4104160 | E-mail: i-esan@outlook.com

Software & Microcontroller accessories

Modern design UI CAI

วันนี้นำเสนอการสร้างสื่อการสอนแบบ CAI ในรูปแบบใหม่ที่เน้นเทคโนโลยีขั้นสูงในการนำเสนอ ขอเล่าความหลักสมัยยังเขียนวิชาสร้างสื่อการสอนก่อนนะครับ สมัยนั้นโปรแกรมที่น่าจะเป็นตัวเลือกที่ดีที่สุดคือ Adobe Flash CS3 ซึ่งตอนนั้นมันก็ดูดีสุดจริง สร้างงานนำเสนอได้สวยงาม แต่พอทุกวันนี้ Flash เริ่มไม่ค่อยได้รับความนิยมแล้ว เหตุผลก็คงเพราะเรื่องความปลอดภัยที่สามารถโดน Hacker เจาะจนเรียกได้ว่า “พรุน” จนคุณ Steve jobs แห่งบริษัท Apple ได้ยกเลิก ไม่รองรับไฟล์ตระกุลนี้อีกเลย ซึ่งทำให้ Flash บนเว็บล้มหายตายจากไปเกือบหมดแล้ว

ณ วันนี้ถ้าเรายังเน้นสื่อที่สามารถใช้งานได้บนคอมพิวเตอร์ PC คงยังไม่มีโปรแกรมที่จะเหนือไปกว่า Adobe Flash (ยกเว้นพวก Apps) ซึ่งมันก็ตอบคนละโจทย์กัน

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

1. Modern Design UI
2. Animation
3. Multimedia
4. Graphic & Content
5. Action Script

ภาพตัวอย่าง

1-login

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

2-home

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

3-explanation-คำชี้แจง

ภาพที่3 แสดงคำชี้แจงของในแต่ละหน่วย

4-content

4-content-2

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

5-gmae-1

5-gmae-2

5-gmae-3

5-gmae-4

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

6-profile

ภาพที่6 แสดงโปรไฟล์ของผู้สร้างสื่อการสอน โดยใส่ข้อมูลคร่าวๆ ดังรูป

7-help

ภาพที่7 เมนูช่วยเหลือและให้คำแนะนำวิธีการใช้งาน และการแก้ปัญหาที่อาจจะเกิดขึ้น

8-source-file

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

VDO การใช้งานจริง

หากสนใจ ให้เราออกแบบสื่อการสอนที่ใช้ประสบการณ์ในงานออกแบบ UI และการเขียนโปรแกรมมิ่ง ช่วยคุณให้ได้รับสื่อการสอนที่มีคุณภาพ เพื่อนำไปใช้ได้อย่างลงตัว ทันสมัย สวยงาม
ติดต่อที่ลิงค์นี้ https://i-esan.com/jobs/