Hyper Hyper TextText

ความเป็�นมาของ ความเป็�นมาของ HypertextHypertext• ป็ 1945 Vannevar Bush นั�กปราชญ์ด้�านั

วิ ทยาศาสตร ผู้��คิ ด้คิ�นัเคิร��องมื�อ MeMex (Memory Extender) ช�วิยพั�ฒนัาคิวิามืทรงจำ!า

• ป็ 1965 Engellart และ Ted Nelson จำ%งได้�คิ ด้คิ�นัวิ ธี(การนั!าเคิร��องมื�อMEMEX มืาประย)กตใช�ร�วิมื

ก�บคิอมืพั วิเตอร ในัร�ป HyperText• ป็ 1985 บ . ซี(ร-อกซี ได้�คิ ด้คิ�นัวิ ธี(การเช��อมืโยงด้�วิย

ร�ปภาพั• ป็ ค.ศ . 1978 บ . แอปเป01 ลแมืคิอ นัทอช ได้�คิ ด้คิ�นั

เคิร��องมื�อท(�เป2นัซีอฟตแวิรช��อวิ�า“HyperCard” แบบ Obj ช�วิยให้�การสร�างเอกสารง�ายขึ้%1นั

• ป็ ค.ศ . 1991 Tim Berners-Lee พั�ฒนัา HTML และเป2นัจำ)ด้ต�1งต�นัขึ้อง World Wide Web

ความหมายของ ความหมายของHypertextHypertext

• ข�อความหรื�อกลุ่��มของข�อความที่��ถู�กเชื่��อมโยง เข�าด้�วยก น โด้ยม�การืน!าเสนอแบบป็ฏิ&ส มพั นธ์)

(interaction) ด้�วยการืน!าข�อความที่��ใชื่�มา เป็�นจุ�ด้เชื่��อมโยง ซึ่-�งจุะป็รืากฏิในลุ่ กษณะที่��เด้�น

กว�าข�อความอ��น เชื่�น การืข�ด้เส�นใต้� การืเน�น ด้�วยส� ต้ วหนา หรื�อต้ วเอ�ยง เป็�นต้�น

รืะบบชื่�วยเหลุ่�อที่��ใชื่�ข�อความหลุ่ายม&ต้&

ป็รืะโยชื่น)ของการืใชื่�งาน ป็รืะโยชื่น)ของการืใชื่�งานHypertextHypertext

• รื�ป็แบบการืน!าเสนอ ให�ความต้��นเต้�น• ม�ลุ่ กษณะของการืสรื�างสรืรืค)มากกว�า• สามารืถูเชื่��อมโยงไป็ย งเอกสารือ��น ๆ ภายนอก

ได้�• สามารืถูส�บที่�องไป็ย งเน�5อหา ต้ามต้�องการืได้�• ม�ความเป็�นพัลุ่ว ต้รื• สามารืถูป็6องก นไม�ให�ผู้��ใชื่�ด้�เอกสารืบางส�วน

ก�อนที่��จุะที่!าก&จุกรืรืมที่��ก!าหนด้ได้�

ป็รืะโยชื่น)ของการืใชื่�งาน ป็รืะโยชื่น)ของการืใชื่�งานHypertextHypertext

• เข�าถู-งข�อม�ลุ่รืายลุ่ะเอ�ยด้ได้�อย�างรืวด้เรื8ว• ผู้นวกซึ่อฟที่)แวรื)อ��นๆ เข�าในการืน!าเสนอเอกสารืได้�• เก&ด้ความคงที่นในการืจุด้จุ!า มากกว�าเอกสารืส&�ง

พั&มพั)• เหมาะสมแลุ่ะสน บสน�นการืเรื�ยนรื��แบบเอก ต้บ�คคลุ่

รื�ป็แบบของ รื�ป็แบบของHypertextHypertext

• แบบไม�ม�โครืงสรื�างแบบไม�ม�โครืงสรื�าง(Unstructured Hypertext)

• แบบม�โครืงสรื�างแบบม�โครืงสรื�าง(Structured Hypertext)

• แบบเน�5อหาส มพั นธ์)แบบเน�5อหาส มพั นธ์)(Hierarchical Hypertext)

แบบจุ!าลุ่องแบบจุ!าลุ่อง HypertextHypertext

ต้ วอย�างแบบจุ!าลุ่อง ต้ วอย�างแบบจุ!าลุ่อง HypertextHypertext• HAM (Hypertext Abstract Machine)• แบบจุ!าลุ่อง Dexter (Dexter’s Model)• แบบจุ!าลุ่องHAM (Amsterdam Hypermedia

Model)• แบบจุ!าลุ่อง HDM (Hypermedia Design

Model)• แบบจุ!าลุ่อง OOHDM (Object Oriented

Hypermedia Design Model)• แบบจุ!าลุ่อง RMM (Relationship

Management Methodology) ต้ วอย�าง

User InterfaceUser Interface

Application Tools

Application Tools

Hypertext Abstract Machine

Hypertext Abstract MachineHost File SystemsHost File Systems

ภาพัแบบจำ!าลอง Hypertext Abstract Machine (HAM)

แบบจุ!าลุ่อง แบบจุ!าลุ่อง hamham• ถู�กน!าเสนอโด้ย campbell แลุ่ะ

goodman ในป็ ค.ศ .1988 ม�สารืะส!าค ญของแบบจุ!าลุ่องที่��ได้�น!าเสนอน�5 เป็�นส�วนของกรือบแนวความค&ด้ในการืจุ ด้ที่!ารืะบบบรื&หารืจุ ด้การืสารืสนเที่ศด้�วยรืะบบข�อความหลุ่ายม&ต้& โด้ยอาศ ยองค)ป็รืะกอบพั�5นฐานที่ 5ง 5 ชื่น&ด้ ได้�แก� graph, content, node, link แลุ่ะ attribute โด้ยน!ามาป็รืะมวลุ่ผู้ลุ่รืายการื (transaction) เพั��อจุ ด้เก8บสารืสนเที่ศที่ 5งหมด้ไว�บนรืะบบไฟลุ่)ของเครื��องแม�ข�าย แลุ่ะม�การืใชื่�งานเป็�นแบบ multi-user ม�ความใกลุ่�เค�ยงก บ WWW

ส�วนป็รืะกอบของ ส�วนป็รืะกอบของHypertextHypertext

• พัอยน) พัอยน) ((Point)Point)– ค!า,วลุ่�,ป็รืะโยค ที่��ใชื่�เป็�นจุ�ด้เชื่��อมโยงไป็ย งข�อม�ลุ่

• โนด้ โนด้ ((Nodes)Nodes)– กลุ่��มของข�อม�ลุ่ที่��ส มพั นธ์)ก น ซึ่-�งถู�กจุ ด้ไว�เป็�นกลุ่��ม

เด้�ยวก น• ลุ่&งค) ลุ่&งค) ((Link)Link)

– การืเชื่��อมโยงที่��เป็รื�ยบเสม�อนกาวที่��เชื่��อโยงไฮเป็อรื)เที่8กซึ่)เข�าด้�วยก น

• โครืงสรื�างไฮรืาค��(Hierarchies Structure) – โครืงสรื�างแบบม�การืเชื่��อมโยงเป็�นลุ่!าด้ บชื่ 5น

pointpoint• ห้มืายถึ%ง กล)�มืคิ!า ห้ร�อวิล( ท(�เป2นัขึ้�อคิวิามื

พั เศษท(�แสด้งวิ�ามื(การเช��อมืโยงเก ด้ขึ้%1นัโด้ยท(�ขึ้�อคิวิามืเห้ล�านั(1จำะถึ�กแสด้งในั

ล�กษณะท(�ต�างก�นัออกไป ท!าให้�ร� �วิ�าเป2นัพัอ ยต เช�นั การขึ้(ด้เส�นัใต� การเนั�นัด้�วิยส( ต�วิ ห้นัา ห้ร�อต�วิเอ(ยง ห้ร�อบางคิร�1งเร(ยกวิ�า “

สมือเช��อมืโยง (link anchor)”

ล�กษณะขึ้อง point

nodnodee

• หมายถู-ง กลุ่��มของข�อม�ลุ่ที่��ส มพั นธ์)ก นหรื�อเป็�นเรื��อง เด้�ยวก นซึ่-�งถู�กจุ ด้ไว�เป็�นกลุ่��มเด้�ยว ซึ่-�งภายในโหนด้

น 5นอาจุม�พัอยต้)อย��มากกว�าหน-�งพัอยต้)ก8ได้� ความ ยาวของโหนด้น 5นไม�สามารืถูรืะบ�ต้ายต้ วได้�บางครื 5ง

อาจุม�ความยาวเป็�นหน�ากรืะด้าษหรื�อกว�าน 5น หรื�อจุะม�ความยาวเพั�ยงไม�ก��บรืรืที่ ด้ก8ได้�ข-5นอย��ก บเน�5อหา

ของเรื��องรืาวน 5นๆ ซึ่-�งในบางครื 5งอาจุเรื�ยก โหนด้ ว�า“ การื)ด้ (card)”

ล�กษณะขึ้อง Node

จำ)ด้ต�อ

linlinkk

• หมายถู-ง การืเชื่��อมโยงเอกสารืจุากต้�นที่างไป็ย ง ป็ลุ่ายที่าง โด้ยม�กลุ่ไกภายในที่��ชื่�วยน!าที่างไป็ย งเป็6า

หมายได้�อย�างที่ �วที่ 5งรืะบบข�อความหลุ่ายม&ต้& ที่ 5งที่�� เป็�นแบบการืเชื่��อมโยงภายใน แลุ่ะแบบการืเชื่��อม

โยงภายนอก จุ!าแนกลุ่&งค)ได้�เป็�น 3 ชื่น&ด้ ป็รืะกอบด้�วย– ลุ่&งค)ชื่น&ด้อ�างถู-ง (referential link) – ลุ่&งค)ชื่น&ด้แผู้นภ�ม& (organization link) – ลุ่&งค)ชื่น&ด้ค�ย)เว&รื)ด้ (keyword link)

ลุ่&งค)ลุ่&งค)• ลุ่&งค)ชื่น&ด้อ�างถู-ง (referential link) ใชื่�ส!าหรื บเชื่��อม

โยงการือ�างถู-งโด้ยต้รืงรืะหว�างจุ�ด้สองจุ�ด้ ป็รืะกอบด้�วยจุ�ด้เรื&�มต้�น (start point) แลุ่ะจุ�ด้ส&5นส�ด้ (end point) เชื่�น ป็�=มหรื�อข�อความที่��ลุ่&งค)ไป็ข�างหน�า (forward) หรื�อย�อนกลุ่ บ (backward)

• ลุ่&งค)ชื่น&ด้แผู้นภ�ม& (organization link) ม�ความคลุ่�ายคลุ่-งก บลุ่&งค)ชื่น&ด้อ�างถู-ง จุะแต้กต้�างก นที่��เป็�นการืเชื่��อมโยงรืะหว�างโหนด้ด้�วยก นในลุ่ กษณะที่��เป็�นโครืงสรื�างไฮรืาค��

• ลุ่&งค)ชื่น&ด้ค�ย)เว&รื)ด้ (keyword link) เป็�นการืน!ากลุ่��มค!าหรื�อวลุ่�ต้�างๆ ที่��ม�ความหมายแลุ่ะส มพั นธ์)รืะหว�างก นมาเชื่��อมโยงด้�วยว&ธ์�การืเด้�ยวก บการืลุ่&งค)ชื่น&ด้อ�างถู-งหรื�อแผู้นภ�ม&

ลุ่&งค)เหลุ่�าน�5 จุะเป็�นต้ วบอกป็ลุ่ายที่างของข�อม�ลุ่ที่��จุะน!าเสนอ

จำ)ด้ต�อ จำ)ด้

ต�อ

จำ)ด้ต�อ

เช��อมืโยง

เช��อมืโยง

เช��อมืโยง

ลุ่ กษณะของการื Link

hierarchies hierarchies structurestructure• เป2นัการผู้สมืผู้สานัขึ้องโคิรงสร�างระบบ

ขึ้�อคิวิามืห้ลายมื ต 2 ชนั ด้ด้�วิยก�นั ได้�แก� ชนั ด้ ท(�ไมื�มื(โคิรงสร�างท(�แนั�นัอนั (unstructured

hypertext) ก�บชนั ด้ท(�มื(โคิรงสร�างแนั�นัอนั(structured hypertext) โคิรงสร�างแบบ

นั(1 สามืารถึจำ!าแนักได้�เป2นั 3 ประเภท ได้�แก�– ชนั ด้จำ!าก�ด้คิวิามืส�มืพั�นัธี (strict hierarchy)

– ชนั ด้ไมื�จำ!าก�ด้คิวิามืส�มืพั�นัธี(compromised hierarchy)

– ชนั ด้ซี�อนั (overlapping hierarchy)

จุ�ด้ต้�อจุ�ด้ต้�อ

จุ�ด้ต้�อ จุ�ด้ต้�อ จุ�ด้ต้�อ จุ�ด้ต้�อ

จุ�ด้ต้�อ

ลุ่ กษณะของข�อความหลุ่ายม&ต้&แบบเน�5อหาส มพั นธ์)ชื่น&ด้จุ!าก ด้ความส มพั นธ์)

จุ�ด้ต้�อจุ�ด้ต้�อ

จุ�ด้ต้�อ จุ�ด้ต้�อ จุ�ด้ต้�อ จุ�ด้ต้�อ

จุ�ด้ต้�อ

ล�กษณะขึ้องขึ้�อคิวิามืห้ลายมื ต แบบเนั�1อห้าส�มืพั�นัธีชนั ด้ไมื�จำ!าก�ด้คิวิามืส�มืพั�นัธี

จุ�ด้ต้�อจุ�ด้ต้�อ

จุ�ด้ต้�อ จุ�ด้ต้�อ จุ�ด้ต้�อ จุ�ด้ต้�อ

จุ�ด้ต้�อ

จุ�ด้ต้�อ จุ�ด้ต้�อ จุ�ด้ต้�อ

ลุ่ กษณะของข�อความหลุ่ายม&ต้&แบบเน�5อหาส มพั นธ์)ชื่น&ด้ซึ่�อน

presentational presentational adaptationadaptation• ว&ธ์�การืด้ ด้แป็ลุ่งให�เหมาะสมก บการืน!า

เสนอข�อม�ลุ่ เพั��อให�ผู้��ใชื่�สามารืถูมองเห8นข�อม�ลุ่ได้�อย�างที่ �วถู-งแลุ่ะเข�าถู-งข�อม�ลุ่ได้�

ต้รืงป็รืะเด้8นมากที่��ส�ด้ โด้ยม�เที่คน&คใน การืน!าเสนอที่ 5งหมด้ 5 ว&ธ์� ป็รืะกอบด้�วย

–conditional text –stretch text–page variants– fragment variants– frame-based

conditioconditional textnal text• เป็�นว&ธ์�การืแสด้งกลุ่��มของข�อความหรื�อ

ต้ วอ กษรืที่��ก!าหนด้เง��อนไขต้ามป็รืะเภที่ ของผู้��ใชื่� ที่ 5งที่��ม�ที่ กษะแลุ่ะไม�ม�ที่ กษะใน

การืใชื่�งานมาก�อน กลุ่�าวค�อ การืน!าเสนอข�อม�ลุ่ที่��เก��ยวข�องให�ก บผู้��ใชื่�ที่��ม�ที่ กษะมาก�อนจุะม�รืายลุ่ะเอ�ยด้มากกว�า

การืน!าเสนอข�อม�ลุ่ (เพั�ยงบางส�วน ) ให�ก บผู้��ใชื่�ที่��ไม�เคยม�ที่ กษะมาก�อนเลุ่ย

ข�อความหรื�อต้ วอ กษรืที่��น!าเสนอข�อความหรื�อต้ วอ กษรืที่��น!าเสนอ

Aaaaaa aaaaaa aaaaaa aaaaaa

aaa

Aaaaaa aaaaaa aaaaaa

Aaaaaa aaaaaa

แสด้งขึ้�อคิวิามืท�1งห้มืด้ส!าห้ร�บผู้��มื(ท�กษะ

แสด้งขึ้�อคิวิามืเก�อบท�1งห้มืด้ส!าห้ร�บผู้��มื(ท�กษะบ�าง

แสด้งขึ้�อคิวิามืเพั(ยงบางส�วินัส!าห้ร�บผู้��ไมื�มื(ท�กษะเลย

รื�ป็แบบข�อความม�เง��อนไข

stretch stretch texttext• เป็�นว&ธ์�การืแสด้งค!าอธ์&บายของข�อความที่��

ต้�องการืขยายความ แที่นที่��จุะต้�องแสด้งข�อความของค!าอธ์&บายเด้�ยวก นน�5ไป็ไว�อ�กหน-�งหน�าเอกสารืโด้ยไม�จุ!าเป็�น เพั�ยงแต้�คลุ่&กที่��ข�อความที่��ได้�ที่!าการืเชื่��อมโยงไว� ก8จุะป็รืากฏิค!าอธ์&บายภายในกรือบส��เหลุ่��ยมข-5นมา เรื�ยกก นโด้ยที่ �วไป็ว�า “เมน�ป็�อป็อ พั (menu popup)”

รื�ป็แบบข�อความขยายหรื�อรืายการืเลุ่�อกแบบผู้�ด้ข-5น

page page variantsvariants• เป็�นว&ธ์�การืแสด้งหน�าเอกสารืที่��ม�

จุ!านวนมากกว�า 2 หน�าข-5นไป็ โด้ยแต้�ลุ่ะหน�าเอกสารืจุะแสด้งข�อม�ลุ่ที่��ไม�เหม�อนก น ต้ามแต้�รืะด้ บของความแต้กต้�างหรื�อรื�ป็แบบที่��ใชื่�งาน โด้ยรืะบบจุะแสด้งหน�าเอกสารืที่��เหมาะสมให�ก บผู้��ใชื่�ได้�เลุ่�อกใชื่�งาน

ข�อความหรื�อต้ วอ กษรืที่��น!าเสนอข�อความหรื�อต้ วอ กษรืที่��น!าเสนอ

ช)ด้เอกสาร ขึ้ แต�ละห้นั�าบรรจำ)ขึ้�อคิวิามืท(�แตกต�างก�นั

ช)ด้เอกสาร ก แต�ละห้นั�าบรรจำ)ขึ้�อคิวิามืท(�แตกต�างก�นั

รื�ป็แบบการืแป็รืหน�า

การืน!ารื�ป็แบบการืแป็รืหน�ามาป็รืะย�กต้)ใชื่�ในโป็รืแกรืม FrontPage

fragment fragment variantsvariants

• เป็�นว&ธ์�การืแยกส�วนของหน�าเอกสารื ซึ่-�ง ที่�กหน�าจุะถู�กแยกออกเป็�นส�วนๆ ต้าม

จุ!านวนที่��ต้�องการื พัรื�อมก บบรืรืจุ�ข�อม�ลุ่ ลุ่งไป็ในแต้�ลุ่ะชื่&5นส�วน โด้ยที่��รืะบบจุะแสด้ง

ข�อม�ลุ่ภายในของชื่&5นส�วนน 5นๆ ให�ก บผู้��ใชื่�

ห้นั�าเอกสาร

ห้นั�าเอกสาร

ห้นั�าเอกสาร

ส�วินั ก แบ�งออกเป2นั 3 ส�วินั

ส�วินั ขึ้ แบ�งออกเป2นั 2 ส�วินั

ส�วินั คิ แบ�งออกเป2นั 4 ส�วินั

หน�าเอกสารืแสด้งข�อความ

รื�ป็แบบการืแป็รืส�วน

การืน!ารื�ป็แบบการืแป็รืส�วนมาป็รืะย�กต้)ใชื่�ในโป็รืแกรืม FrontPage

frame-frame-basedbased

• เป็�นว&ธ์�การืแบ�งชื่�อง (เฟรืม ) ของหน�าเอกสารื โด้ยก!าหนด้พั�5นที่��ของหน�าเอกสารืออกเป็�นเฟรืมๆ เพั��อใชื่�แสด้งข�อม�ลุ่ของเอกสารืป็ลุ่ายที่างต้ามที่��ได้�เชื่��อมโยงไว� ให�มาป็รืากฏิอย��ภายในชื่�องต้ามที่��ต้�องการื

กรอบห้�วิเร��อง

กรอบนั!าเสนัอ

กรอบห้มืายเห้ต)

กรอ บ เช��อ มื โยง

แบ บ เร9วิ

กรอบห้�วิเร��อง

กรอบนั!าเสนัอ

กรอ บ เช��อ มื โยง

แบ บ เร9วิ

ห้นั�าเอกสาร ก แบ�งออกเป2นั 4 กรอบ ห้นั�าเอกสาร ขึ้ แบ�งออกเป2นั 3 กรอบ

ร�ปแบบกรอบ

การืน!ารื�ป็แบบกรือบมาป็รืะย�กต้)ใชื่�ในโป็รืแกรืม FrontPage

บรืรืณนาน�บรืรืณนาน�กรืมกรืม

• rbu.rbru.ac.th/~bangkom/mm04.ppt• cptd.chandra.ac.th/mul/multimedia4.ppt • pirun.ku.ac.th/~g5166307/work/html/

indexhtml.htm • www.slideshare.net/kanokratpam/4-

4717595 • www.angelfire.com/la/tunjai/1118.html• www.science.rbru.ac.th/~bangkom/mm04.ppt

สมาชื่&กสมาชื่&ก•1.นัางสาวิร�ตนัส)ด้า ทองทา เลขึ้ท(� 7•2.นัางสาวิวิ ช)ด้า ส�งฆะพัรมื เลขึ้ท(�

19

นั�กศ%กษาช�1นัป;ท(� 1 ห้�อง ขึ้