บทที่ 2 ไฮเปอร์เท็กซ์และไฮเปอร์มีเดีย

งานนำเสนอเรื่อง: "บทที่ 2 ไฮเปอร์เท็กซ์และไฮเปอร์มีเดีย"— ใบสำเนางานนำเสนอ:

1 บทที่ 2 ไฮเปอร์เท็กซ์และไฮเปอร์มีเดีย
บทที่ 2 ไฮเปอร์เท็กซ์และไฮเปอร์มีเดีย Hypertext and Hypermedia

2 ปัจจุบันระบบไฮเปอร์เท็กซ์และ/หรือ ระบบไฮเปอร์มีดีย(Hypertext/Hypermedia System) ทั้งได้มีการนำมาประยุกต์ใช้หลายรูปแบบ ไม่ว่าจะเป็นการนำเสนอข้อมูลบนระบบเครือข่ายอินเตอร์เน็ตทั้งที่เป็นเอกสารเว็บเพจ(Web Page) หรือแม้เอกสารอิเล็กทรอนิกส์ที่เป็นไฟล์เอกสารในรูปแบบอื่นๆ เช่น Word(.doc), Excel(.xls) PowerPoint(.ppt) Acrobat(.pdf) เป็นต้น โดยที่เอกสารเหล่านี้สามารถเชื่อมโยงไปมาระหว่างกันได้ ทั้งนี้เป็นผลมาจากวิวัฒนาการของระบบไฮเปอร์เท็กซ์นั้นเอง

3 4.1 วิวัฒนาการของไอเปอร์เท็กซ์
อาจกล่าวได้ว่าไฮเปอร์เท็กซ์ได้ถือกำเนิดขึ้นมาก่อนที่ Blaise Pascal นักวิทยาศาสตร์ชาวฝรั่งเศส ที่ได้คิดค้นสิ่งประดิษฐ์เครื่องคำนวณบวกลบเลขได้สำเร็จเป็นเครื่องแรกของโลกเสียอีก เพียงแต่ในขณะนั้นไฮเปอร์เท็กซ์เป็นเพียงแค่กรอบแนวคิดเท่านั้น ยังไม่สามารถนำมาใช้งานได้ เนื่องจากเทคโนโลยีสมัยนั้น ไม่สามารถสนับสนุนและรองรับการทำงานนั้นเอง จึงลำดับเหตุการณ์สำคัญได้ดังนี้

4 ปี ค.ศ Doug Engellart และ Ted Nelson ได้นำเอา MEMEX มาประยุกต์ใช้ร่วมกับความพิวเตอร์โดยนำข้อความหรือตัวอักษรมาเชื่อมโยงระหว่างกัน เรียกว่า ไฮเปอร์เท็กซ์(HyperText) ปี ค.ศ บ.ซีร็อกซ์ (Xerox Corporation) ได้คิดค้นวิธีการเชื่อมโยง ไฮเปอร์เท็กซ์แบบใหม่ ให้สามารถนำรูปภาพมาใช้ประกอบและเชื่อมโยงได้อย่างทั่วถึงบนระบบเครือข่ายด้วย โดยเรียกเครื่องมือนี้ว่า “Notecard”

5 ปี ค.ศ บ.แอปเปิ้ลแมคอินทอช (Apple Macintosh Corporation) ได้คิดค้นเครื่องมือสำหรับสร้างออปเจ็คต่างๆ บนจอแก้ว ทำให้เป็นที่นิยมใช้งานกันอย่างแพร่หลาย ปี ค.ศ Tim Berners-Lee พัฒนาระบบจัดการเอกสารที่เป็นรายงานต่างๆ สำหรับใช้งานร่วมกันบนระบบเครือข่าย ซึ่งเป็นที่มาของเวิล์ดไวด์เว็บ (World Wide Web:WWW)

6 4.2 ความหมายของคำว่า Hypertext และ Hypermedia
ไฮเปอร์เท็กซ์ (Hypertext) หมายถึง ข้อความหรือกลุ่มของข้อความที่ถูกเชื่อมโยงเข้าด้วยกัน โดยมีการนำเสนอแบบปฏิสัมพันธ์ (Interaction) ด้วยการนำข้อความที่ใช้มาเป็นจุดเชื่อมโยง ซึ่งปรากฏในลักษณะที่เด่นกว่าข้อความอื่น เช่น การขีดเส้นใต้ การเน้นด้วยสี ตัวหนา หรือตัวเอียง เป็นต้น

7 หัวข้อช่วยเหลือทั้งหมด
ระบบช่วยเหลือที่ใช้ไฮเปอร์เท็กซ์

8 ความสัมพันธ์ระหว่างมัลตีมีดีย ไฮเปอร์มีเดียและไฮเปอร์เท็กซ์
ไฮเปอร์มีเดีย (Hypermedia) หมายถึง การนำหลักการของไฮเปอร์เท็กซ์ในการเชื่อมโยง โดยการใช้ภาพนิ่ง เสียง และวิดีโอมาเป็นส่วนหนึ่งของการนำเสนอ ดังรูป ไฮเปอร์เท็กซ์ (Hypertext) มัลติมีเดีย (Multimedia) ไฮเปอร์มีเดีย Hypermedia ความสัมพันธ์ระหว่างมัลตีมีดีย ไฮเปอร์มีเดียและไฮเปอร์เท็กซ์

9 ตัวอย่างเว็บไซต์ที่นำไฮเปอร์มีเดีย(Hypermedia)มาประยุกต์ใช้ในการนำเสนอ

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

11 4.3.1 แบบจำลองระบบไอเปอร์เท็กซ์
แบบจำลองของระบบไอเปอร์เท็กซ์ได้มีการนำเสนอ เพื่ออธิบายถึงคุณลักษณะและขอบเขตของงานที่ได้ออกแบบไว้ ซึ่งมีอยู่จำนวนมากตามแต่กรอบแนวความคิดของแต่ละคน อย่างไรก็ตาม โดยส่วนใหญ่แบบจำลองจะอธิบายถึงความสัมพันธ์ระหว่าง ลิงค์ (Links) กับ โหนด(Node) ดังแสดงดังรูป

12 แบบจำลองดังเดิมของระบบไฮเปอร์เท็กซ์(Hypermedia)
Link Node Link Node Node Link แบบจำลองดังเดิมของระบบไฮเปอร์เท็กซ์(Hypermedia)

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

14 qqqqqqqqqqqqqqqqqqqq
พอยต์ (Point) ลักษณะของพอยต์ (Point)

15 หมายถึง กลุ่มข้อมูลที่มีความสัมพันธ์กันหรือเป็นเรื่องเดียวกันซึ่งถูกจัดไว้เป็นกลุ่มเดียว ซึ่งภายในโหนดนั้นอาจมีพอยต์มากกว่าหนึ่งพอยต์ก็ได้ โดยความยาวของโหนดไม่สามารถกำหนดได้ตายตัวขึ้นอยู่กับเนื้อหาของเรื่องราวนั้นๆ ซึ่งในบางครั้งอาจเรียกว่าเรียก โหนด ว่า การ์ด(Card) ดังรูป 2. โหนด (Node)

16 qqqqqqqqqqqqqqqqqqqq
โหนด(Node) ลักษณะของโหนด (Node)

17 หมายถึง การเชื่อมโยงเอกสารจากต้นทางไปยังปลายทาง โดยมีกลไกลภายในช่วยนำทางไปยังเป้าหมายได้อย่างทั่วทั้งระบบไอเปอร์เท็กซ์ ทั้งที่เป็นแบบการเชื่องโยงภายใน (Internal Link) และแบบการเชื่อมโยงภายนอก(External Link) โดยสามารถจำแนกลิงค์ออกเป็น 3 ไชนิด ประกอบด้วย 3. ลิงค์ (Link) 1. ลิงค์ชนิดอ้างอิง (Referential Link) 2. ลิงค์ชนิดแผนภูมิ (Organization Link) 3. ลิงค์ชนิดคีย์เวิร์ด (Keyword Link)

18 ลักษณะของการลิงค์ (Link)
ลิงค์ภายนอก (External Link) ลิงค์ (Link) qqqqqqqqqqqqqqqqq qqqqqqqqqqqqqqqqq ลิงค์ภายใน (Internal Link) ลักษณะของการลิงค์ (Link)

19 4. โครงสร้างไฮราคี่ (Hierarchies structrue)
เป็นการผสมผสานกันระหว่างโครงสร้างระบบไฮเปอร์เท็กซ์ชนิดที่ไม่มีโครงสร้างแน่นอน (Unstructured Hypertext) กับชนิดที่มีโครงสร้างไม่แน่นอน(Structured Hypertext) โดยใช้หลักการเดียวกับระบบการจัดการฐานข้อมูล (DBMS:Database Management System) โดยจำแนกออกเป็น 1. ชนิดจำกัดความสัมพันธ์ (Strict Hierarchy) 2. ชนิดไม่จำกัดความสัมพันธ์ (Compromised Hierarchy) 3. ชนิดซ้อน (Overlapping Hierarchy)

20 ไฮเปอร์เท็กซ์ชนิดจำกัดความสัมพันธ์ (Strict Hierarchy)
โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) ไฮเปอร์เท็กซ์ชนิดจำกัดความสัมพันธ์ (Strict Hierarchy)

21 ไฮเปอร์เท็กซ์ชนิดไม่จำกัดความสัมพันธ์ (Compromised Hierarchy)
โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) ไฮเปอร์เท็กซ์ชนิดไม่จำกัดความสัมพันธ์ (Compromised Hierarchy)

22 ไฮเปอร์เท็กซ์ชนิดไม่จำกัดความสัมพันธ์ (Compromised Hierarchy)
โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) โหนด (Node) ไฮเปอร์เท็กซ์ชนิดไม่จำกัดความสัมพันธ์ (Compromised Hierarchy)

23 4.4 ประโยชน์ของระบบไอเปอร์เท็กซ์
1.ผู้ใช้สามารถเลือกใช้เส้นทางที่เหมาะสมได้อย่างรวดเร็ว 2.ผู้ใช้สามารถควบคุมส้นทางเลือกจากเครื่องช่วยนำทางได้ตาม ต้องการ ทำให้เข้าถึงข้อมูลได้อย่างทั่วถึงและเป็นระบบ 3.ผู้ใช้สามารถเข้าถึงข้อมูลได้อย่างสะดวกและรวดเร็ว 4.ผู้ใช้สามารถค้นหาและติดตามร่องรอยและข้อมูลที่ผ่นมาได้อย่างสะดวกและรวดเร็ว จาก บุ๊คมาร์ค(Bookmark) และระบบเชื่อมโยงลัด(Guide Like) หรือระบบไกด์ทัวร์(Guide Like) เป็นต้น

24 5.ผู้ใช้สามารถสร้างเอกสารได้โดยการเชื่อมโยงเอกสารภายในหรือเอกสารกันด้วยข้อความและ/หรือผนวกกับมัลติมีเดียเข้าด้วยกัน เพื่อสร้างแรกจูงใจให้กับผู้เข้าเยี่ยมชมได้ 6.ผู้สร้างสามารถเผยแพร่ชิ้นงานของตนสู่สารารณชนได้ โดยผ่านเครื่อข่ายระยะใกล้(LAN) internet/intranet Wireless Communication 7.ผู้สร้างสามารถเข้าถึงและปรับปรุงข้อมูลให้เป็นปัจจุบันได้อย่างสะดวกและรวดเร็ว

25 4.5 ปัญหาและแนวทางการแก้ไขระบบไอเปอร์เท็กซ์
ผู้แม้ว่าระบบไฮเปอร์เท็กซ์จะมีประโยชน์เหนือกว่าการอ่านข้อความในหนังสือโดยทั่วไปก็ตาม แต่ปัญหาส่วนใหญ่ที่พบมักจะเกี่ยวกับผู้ใช้งานที่มักจะหลงทางเข้าไปติดอยู่ในวังวน และการแสดงผลของข้อมูลที่พบเจอนั้นมีมากเกินไป โดนเฉพาะอย่างยิ่งภายใต้สภาวการณ์ของระบบที่ได้ออกแบบไว้ยังไม่ดีพอ ดังนั้น แนวทางการแก้ไขปัญหา โดยมีเทคนิคในการนำเสนอทั้งหมด 5 วิธี

26 1. คอนดิชันแนวเท็กซ์ (Conditional Text)
เป็นวิธีการแสดงกลุ่มข้อความหรืออักษรที่กำหนดเงื่อนไขตามประเภทของผู้ใช้ ทั้งที่มีทักษะและไม่มีทักษะการใช้งาน ดังรูป ข้อความหรือตัวอักษรที่นำเสนอ aaaaaa a aaaaaa aaa aaaaaa aaaa แสดงข้อความทั้งหมดสำหรับผู้มีทักษะ แสดงข้อความเพียงบางส่วนสำหรับผู้ไม่มีทักษะเลย แสดงข้อความเกือบทั้งหมดสำหรับผู้มีทักษะบ้าง

27 2. สเตรทเท็กซ์ (Stretchtext)
เป็นวิธีการแสดงคำอธิบายของข้อความที่ต้องการการขยายความ แทนที่จะต้องแสดงข้อความของคำอธิบายเดียวกันนี้ไปไว้อีกหนึ่งหน้าเอกสารโดยไม่จำเป็น หรือบางครั้งอาจเรียกว่า เมนูป็อปอัพ (Menu Popup) ตัวอย่างดังรูป

28 3. เพจวาเรี่ยนท์ (Page Variants)
เป็นวิธีการแสดงหน้าเอกสารจำนวนมากกว่า 2 หน้าขึ้นไป โดยแต่ละหน้าเอกสารจะแสดงข้อมูลที่ไม่เหมือนกัน ตามแต่ระดับของความแตกต่างหรือรูปแบบที่ใช้งาน 3. เพจวาเรี่ยนท์ (Page Variants) ข้อความหรือตัวอักษรที่นำเสนอ ชุดเอกสาร B แต่ละหน้าบรรจุข้อความที่แตกต่างกัน ชุดเอกสาร A แต่ละหน้าบรรจุข้อความที่แตกต่างกัน ชุดเอกสาร A ชุดเอกสาร B

29 3. เพจวาเรี่ยนท์ (Page Variants)
เป็นวิธีการแสดงหน้าเอกสารจำนวนมากกว่า 2 หน้าขึ้นไป โดยแต่ละหน้าเอกสารจะแสดงข้อมูลที่ไม่เหมือนกัน ตามแต่ระดับของความแตกต่างหรือรูปแบบที่ใช้งาน 3. เพจวาเรี่ยนท์ (Page Variants) หน้าเอกสารแสดงข้อความ Fragment A แบ่งออกเป็น 3 หน้าเอกสาร Fragment A แบ่งออกเป็น 3 หน้าเอกสาร Fragment A แบ่งออกเป็น 3 หน้าเอกสาร

30 4. เฟรมเบส (Frame - Based)
เป็นวิธีการแบ่งช่อง(เฟรม)ของหน้าเอกสาร โดยกำหนดพื้นที่ของหน้าเอกสารออกเป็นเฟรมๆ เพื่อใช้แสดงข้อมูลของเอกสารปลายทางตามที่เชื่อมโยงไว้ ให้มาปรากฏอยู่ภายใต้ช่องตามที่ต้องการ หน้าเอกสาร A แบ่งออกเป็น 4 ช่อง หน้าเอกสาร B แบ่งออกเป็น 3 ช่อง ช่อง Banner ช่อง Banner ช่อง Presentation ช่อง Presentation ช่อง Quick Link ช่อง Quick Link ช่อง Foot Note

31 1. แอนโนเตชัน (Annotations)
ส่วนวิธีการดัดแปลงที่เหมาะสมกับการนำทาง(Navigational Adaptation) เพื่อให้ผู้ใช้สามารถควบคุมและเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว จะมีเทคนิคในการนำเสนอทั้งหมด 5 วิธี ประกอบด้วย 1. แอนโนเตชัน (Annotations) เป็นวิธีการเชื่อมโยงโดยใช้คำอธิบายประกอบ ซึ่งอาจจะอยู่ในรูปแบบของข้อความหรือไอคอนที่แสดงให้เห็นความแตกต่างได้อย่างชัดเจน เพื่อให้ผู้ใช้ได้รับทราบข้อมูลก่อนที่จะตัดสินใจเลือกใช้เส้นทางนี้

32 2. ออเดอร์ริ่งหรือลิงค์ซอร์สติ้ง (Ordering or Link Sorting)
เป็นวิธีการเชื่อมโยงโดยเรียงลำดับตัวเชื่อมได้ใหม่ โดยส่วนใหญ่มักจะนำมาใช้งานร่วมกับระบบฐานข้อมูล(Database System) หรือปัญญาประดิษฐ์(Artificial intelligent System) เพื่อช่วยในการค้นหาและเชื่อมโยงข้อมูลได้อย่างเหมาะสมและรวดเร็ว ไม่ว่าจะเป็นระบบช่วยเหลือ(Help System) หรือเครื่องมือประเภทค้นหา (Search Engine) ได้แก่ Yahoo, Excite เป็นต้น

33 3. ไดเร็กไกด์แดนซ์ (Direct Guidance)
เป็นวิธีการเชื่อมโยงโดยใช้เครื่องช่วยนำทาง โดยระบบสามารถนำพาผู้ใช้ไปยังปลายทางตามเส้นทางที่ได้สร้างไว้อย่างเป็นขั้นตอน 3. ไดเร็กไกด์แดนซ์ (Direct Guidance) เป็นวิธีการเชื่อมโยงโดยการซ้อนเร้นข้อมูล เพื่อไม่ให้แสดงข้อมูลทั้งหมด 4. ฮีดดิ้ง (Hiding) เป็นวิธีการเชื่อมโยงตามรอยแผนที่ โดยระบบจะช่วยนำพาผู้ใช้ไปยังส่วนต่างๆ ภายในโครงสร้างได้ทั้งหมด 5. แมพพิ่ง (Mapping)

34 สรุป ระบบไฮเปอร์เท็กซ์ หมายถึง การผสมผสานระหว่างข้อความหรือภาษาธรรมชาติกับกระบวนการคอมพิวเตอร์ เพื่อสื่อความหมายกับผู้ใช้อย่างมีปฏิสัมพันธ์โดยมีลำดับชั้นที่แน่นอนที่เคลื่อนไหวตลอดเวลาและไม่เรียงลำดับเป็นแนวตรงและเมื่อนำมาผสมผสานกับมัลติมีเดีย โดยเพิ่มคุณสมบัติของภาพ เสียง และวีดีโอเข้าด้วยกัน เรียกว่า ระบบไฮเปอร์มีดีย(Hypermedia System) ทั้งนี้ยังใช้การและองค์ประกอบพื้นฐานทั้ง 4 ส่วน ได้แก่ พอยต์(Point) โหนด(Node) ลิงค์(Link) และโครงสร้างไฮราคี่(Hierarchy structure)

35 จบบทที่ 4 (THE END)