Introduction to Hypertext

1. Introduction to Hypertext Department of Computer Education KMUTNB

2. ความหมาย • Hyper • สูงกว่าเหนือกว่า • Hypertext • รูปแบบการนำเสนอข้อมูลข้อความเป็นหลัก โดยมีการเชื่อมโยงระหว่างกันทั้งภายในและภายนอก (Hyperlink)

3. แนวความคิดของ Hypermedia HYPERtext HYPERMEDIA multiMEDIA

4. Hyper... • Hypercard • Hypertalk • HyperPAD • HyperMap • HyperGraphic • HyperWave • Hyper …

5. ประโยชน์การใช้งานของ Hypertext • มีความน่าใช้งานมากกว่าเมื่อเทียบกับหนังสือ • ความตื่นเต้น เร้าใจ ชวนติดตาม สร้างสรรค์ • มีความเป็น พลวัตร (Dynamic) ปรับปรุงเปลี่ยนแปลงง่าย • มีดัชนีคำ (index) และค้นหา (search) • สามารถป้องกันไม่ให้ผู้ใช้ดูเอกสารบางส่วนก่อนที่จะทำกิจกรรมที่กำหนดได้ • แทรกหมายเหตุ (Comment) ณ. ข้อความที่ต้องการ • นำเสนอภาพ วิดิทัศน์ ภาพเคลื่อนไหว เสียง • ผู้ใช้สามารถท่องไปยังเนื้อหาที่ต้องการของตนเอง

6. ประโยชน์การใช้งานของ Hypertext • สามารถผนวก software อื่น ๆ เข้าไว้ในการนำเสนอได้ • สามารถบันทึกผลการใช้งาน เก็บเป็นข้อมูลของแต่ละบุคคลได้ • เกิดความคงทนในการใช้งานมากกว่า • สนับสนุกการเรียนรู้แบบเอกัตบุคคล

7. ข้อเสียของ Hypertext • ต้องบำรุงรักษาข้อมูลให้ทันสมัยอยู่เสมอ • ผู้ใช้เกิดการหลงทางได้ง่าย • การพัฒนายาก เมื่อเนื้อหามีจำนวนมากและซับซ้อน • การเชื่อมโยงข้อมูลยากที่จะใช้คำที่สื่อความหมายตรงกันระหว่างผู้สร้างและผู้ใช้งาน (cognitive overhead)

8. ส่วนประกอบของระบบ Hypertext • Point • คำ วลี ประโยค ที่ใช้เป็นจุดเชื่อมโยงไปยังข้อมูลที่ขยายความหมายของคำ วลี ประโยคนั้น ๆ • Node • กลุ่มของข้อมูลที่สัมพันธ์กันซึ่งถูกจัดกลุ่มไว้เป็นกลุ่มเดียวกัน และมีขอบเขตและเนื้อหาที่ชัดเจนของโนดนั้น • Links • การเชื่อมโยงจาก Point ไปยัง Node

9. ส่วนประกอบของระบบ Hypertext Point to Point ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Point to Node Point to Point Node Node

10. รูปแบบของ Hypertext • Unstructured Hypertext • Structured Hypertext • Hierarchical Hypertext • Jonassen (1989)

11. Unstructured Hypertext

12. Unstructured Hypertext • การเชื่อมโยงโนดในลักษณะของการสุ่ม (Randomize) • โนดเชื่อมโยงกันเมื่อถูกกำหนดให้เป็นส่วนขยายของกันและกัน • มีการสร้างจุดเน้นว่า จุดเชื่อมโยง • ต้องจำแนกความคิดรวบยอดของเนื้อหาเป็นส่วนย่อย ๆ • วิเคราะห์จัดลำดับความสัมพันธ์ของเนื้อหา • สร้างจุดเชื่อมโยงระหว่างความสัมพันธ์

13. Structured Hypertext

14. Structured Hypertext • การเชื่อมโยงโนดในลักษณะของเรียงลำดับ (Sequential) • โนดเชื่อมโยงกันเมื่อบอกถึงลำดับของเนื้อหาต่อไป • มีการสร้างจุดเชื่อมโยงเพื่อสร้างการเดินทาง (Navigation) • ต้องจำแนกความคิดรวบยอดของเนื้อหาเป็นส่วนย่อย ๆ • วิเคราะห์จัดลำดับความสำคัญ,สัมพันธ์ของเนื้อหา • จัดกลุ่มของเนื้อหาสร้างเป็นกลุ่มหรือบทของเนื้อหา

15. Hierarchical Hypertext Hypertext แบบเนื้อหาสัมพันธ์ ชนิดจำกัดความสัมพันธ์ Hypertext แบบเนื้อหาสัมพันธ์ ชนิดไม่จำกัดความสัมพันธ์

16. Hierarchical Hypertext • การเชื่อมโยงโนดในลักษณะโครงสร้างสูงต่ำ (Top Down Hierarchy) • โนดเชื่อมโยงกันเมื่อบอกถึงส่วนขยายของเนื้อหาระดับสูงกว่า • มีการสร้างจุดเชื่อมโยงแบบจุดเน้นตามโครงสร้างเนื้อหา • ต้องจำแนกความคิดรวบยอดของเนื้อหาเป็นส่วนย่อย ๆ • วิเคราะห์จัดลำดับความสัมพันธ์ของเนื้อหา • จัดกลุ่มของเนื้อหาสร้างเป็นกลุ่มลำดับชั้นของเนื้อหา

17. Example Hypertext

18. Links in Hypermedia System <a href=“DocA.html#aaaaa”>ttttt</a> Pointer ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt <a>aaaaa</a> Anchor aaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa DocT.html DocA.html

19. Links in Hypermedia System

20. Links in Hypermedia System <a href=“DocA.php?a=123”>ttttt</a> PHP script file Program Engine MIME PHP Type Pointer ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt aaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa DocT.html DocA.html

21. Links in Hypermedia System • Uni-direction link • เชื่อมโยงไปยังส่วนขยายแบบคำต่อคำ และสิ้นสุดเฉพาะส่วนขยายเท่านั้น และกลับมายังหน้าเดิม • Bi-direction link • เชื่อมโยงไปยังส่วนขยาย แล้วสามารถขยายออกไปยังส่วนอื่นที่เกี่ยวได้มากกว่าหนึ่งโนด

22. Links in Hypermedia System • Uni-direction link

23. Links in Hypermedia System • Bi-direction link

24. Links in Hypermedia System • ข้อดีของการ link • ผู้ใช้สามารถควบคุมการปรากฏข้อมูลบนจอภาพตามต้องการ โดยไม่จำกัดเวลา • ผู้อ่านสามารถข้ามกระโดดไปยังส่วนเนื้อหาที่เกี่ยวข้องได้ทันที โดยมิต้องไปค้นหาใหม่ • ผู้ใช้เกิดความคงทนในการจดจำได้ดีกว่า • ผู้อ่านได้รับข้อมูลอย่างทันทีทันใด โดยไม่ผ่านสิ่งเร้าอื่น

25. Links in Hypermedia System • ข้อเสียของการ link • เกิดการแขวนได้ง่าย (Dangling) เนื่องจากไม่ทราบจะเข้าถึงข้อมูล ณ จุดใด เมื่อมีจุด Link มากเกินไป • เกิดการหลงทาง (Lost in Hyperspace) เมื่อผ่านการเปลี่ยนหน้าหลาย ๆ ครั้ง • ยากที่จะกลับคืนสู่ข้อมูลเดิม เนื่องจากเชื่อมโยงสืบทอดหลายชั้น • เกิดการวนรอบของข้อมูลได้ง่าย • ยากที่จะตรวจสอบว่าได้รับข้อมูลครบถ้วนแล้ว

26. Links in Hypermedia System • สามารถสร้างการ Link ในรูปแบบของ Character Image หรือ Object • การ Link ของ Media ที่เป็น Time based model ยังคงเป็นการอ้างถึงทางเดียวอยู่ • จำเป็นต้องมีการสร้าง content index (Meta File) ให้กับ Time based media model เป็นการสร้าง anchor ในแต่ละ Frame

27. Links in Hypermedia System

28. การพัฒนาของ Multimedia • ภาพยนตร์แบบปฏิสัมพันธ์ (Interactive Movies) • ภาพยนตร์แบบมีข้อความประกอบ (Annotated Movies) • ภาพแพนอรามา (Panoramic Pictures) • ภาพโมเดล 3 มิติ (3 Dimensional Picture) • ระบบโต้ตอบด้วยเสียง • ระบบจำลองเสมือนจริง (Virtual Reality)

29. Multimedia Networks • Telephone networks • Data networks • Broadcast television networks • Integrated Services Digital Networks • Broadband multi-service networks

30. รูปแบบการนำเสนอ Hypermedia • Multimedia - Text • Multimedia - Drawings and Pictures • Multimedia - Animations • Multimedia - Sound • Multimedia - Computer Programs • Multimedia - Motion Pictures

31. การประยุกต์ใช้งาน Hypermedia • ฐานข้อมูล (Database) • งานเอกสาร (Documentation) • ระบบสนับสนุนการตัดสินใน (Decision Support System) • สื่อช่วยฝึกอบรม (Training Aids) • สื่อการศึกษา (Education Aids) • สื่อเพื่อบันเทิง (Entertainment Aids)

32. สิ่งจำเป็นพื้นฐาน Hypermedia