การสร้าง Timeline ด้วย SIMILE

MIT ได้พัฒนาเครื่องมือออนไลน์ชื่อ SIMILE โดยมีจุดเด่นที่ช่วยให้ได้ Timeline แสดงเหตุการณ์ต่างๆ แบบออนไลน์ได้ง่าย สะดวก โดยศึกษารายละเอียดเพิ่มเติมได้ที่ http://simile.mit.edu/timeline/

1) สร้างเอกสาร XML

สร้างเอกสาร XML สรุปกิจกรรมโดยกำหนด Tag ดังนี้

<?xml version="1.0" encoding="utf-8"?> 
<data> 
<event start="mmm dd yyyy h:m:s GMT+0700" title="ข้อความหัวเรื่อง">  
รายละเอียด 
</event> 
<event start="mmm dd yyyy h:m:s GMT+0700" title="ข้อความหัวเรื่อง">  
รายละเอียด 
</event> 
</data>

ตัวอย่างการลงรายการ

<?xml version="1.0" encoding="utf-8"?> 
<data> 
<event start="Aug 15 1988 08:35:00 GMT+0700" title="จัดตั้ง TIAC">  
โครงการความร่วมมือระหว่างรัฐบาลไทยกับรัฐบาลสหรัฐอเมริกา  หน่วยงานบริการสารสนเทศแห่งแรกของประเทศไทยที่บริการเชิงพาณิชย์แต่ไม่หวังผลกำไร  
</event> 
<event start="Aug 02 1990 10:35:00 GMT+0700" title="ฐานข้อมูลออนไลน์ต่างประเทศ"> 
บริการสืบค้นฐานข้อมูลออนไลน์จากต่างประเทศ และบริการฝึกอบรมแนะนำฐานข้อมูลบริการที่ปรึกษาการสืบค้นข้อมูล  
</event> 
</data>

แอททริบิวต์ (Attribute) เพิ่มเติม

start = “เดือน วัน ปี ชั่วโมง:นาที:วินาที โค้ดเวลาประเทศ”
ตัวอย่าง start=“Aug 15 1988 08:35:00 GMT+0700”
ใช้เพื่อแสดงวันที่เริ่มต้นของเหตุการณ์นั้น (หากไม่ระบุเวลาในส่วนของชั่วโมงจะแสดงเป็นตัวเลข 00:00:00)

end=“เดือน วัน ปี ชั่วโมง:นาที:วินาที โค้ดเวลาประเทศ”
ตัวอย่าง
end=“Aug 15 1988 08:35:00 GMT+0700”

title=“ข้อความเหตุการณ์ที่ต้องการให้แสดง”
ตัวอย่าง
title=“Trip to Beijing”

link=“url ที่ต้องการให้คลิกลิงก์ไปได้”
ตัวอย่าง
link=“http://travel.yahoo.com/”

2) สร้างเอกสาร HTML

สร้างเอกสาร HTML โดยมีคำสั่งสำคัญดังนี้

นำสคริปต์ Javascript ต่อไปนี้ วางไว้ใต้ <title> 
 
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script> 
 
<script> 
var tl; 
function onLoad() { 
  var eventSource = new Timeline.DefaultEventSource(); 
  var bandInfos = [ 
    Timeline.createBandInfo({ 
      eventSource:    eventSource, 
      date:           "Aug 01 1988 00:00:00 GMT+0700", 
      width:          "70%",  
      intervalUnit:   Timeline.DateTime.MONTH,  
      intervalPixels: 100 
    }), 
    Timeline.createBandInfo({ 
      eventSource:    eventSource, 
      date:           "Aug 01 1988 00:00:00 GMT+0700", 
      width:          "30%",  
      intervalUnit:   Timeline.DateTime.YEAR,  
      intervalPixels: 200 
    }) 
 ]; 
    bandInfos[1].syncWith = 0; 
    bandInfos[1].highlight = true; 
 
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); 
  Timeline.loadXML("tiac.xml", function(xml, url) { eventSource.loadXML(xml, url); }); 
 } 
 
 var resizeTimerID = null; 
 function onResize() { 
  if (resizeTimerID == null) { 
      resizeTimerID = window.setTimeout(function() { 
          resizeTimerID = null; 
          tl.layout(); 
      }, 500); 
  } 
} 
</script> 
 
ต่อด้วยเพิ่ม Attribute ในแท็ก Body ดังนี้ 
 
<body onload="onLoad();" onresize="onResize();"> 
 
และส่วนแสดง Timeline ภายใต้แท็ก Body ดังนี้  
<div id="my-timeline" style="height: 350px; border: 1px solid #aaa"></div></p>

ทั้งนี้คำสั่งที่จำเป็น

1) คำสั่งแบ่งพื้นที่ Timeline ส่วนบน ควบคุมความกว้างสูงจากค่า width: “70%” และควบคุมเวลาเริ่มต้นแสดงผลที่รายการ date: “Aug 01 1988 00:00:00 GMT+0700”

    Timeline.createBandInfo({ 
      eventSource:    eventSource, 
      date:           "Aug 01 1988 00:00:00 GMT+0700", 
      width:          "70%",  
      intervalUnit:   Timeline.DateTime.MONTH,  
      intervalPixels: 100 
    }),

2) คำสั่งแบ่งพื้นที่ Timeline ส่วนบน ควบคุมความกว้างสูงจากค่า width: “30%” และควบคุมเวลาเริ่มต้นแสดงผลที่รายการ date: “Aug 01 1988 00:00:00 GMT+0700”

    Timeline.createBandInfo({ 
      eventSource:    eventSource, 
      date:           "Aug 01 1988 00:00:00 GMT+0700", 
      width:          "30%",  
      intervalUnit:   Timeline.DateTime.YEAR,  
      intervalPixels: 200 
    })

3) คำสั่งดึงข้อมูลจาก XML แก้ไขชื่อแฟ้ม xml จากรายการ Timeline.loadXML

  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); 
  Timeline.loadXML("tiac.xml", function(xml, url) { eventSource.loadXML(xml, url); }); 
 }