This is an old revision of the document!
—-

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

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

ตัวอย่าง timeline

การสร้าง Timeline

การสร้าง Timeline ด้วย SIMILE ทำได้โดย

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) เพิ่มเติม

รูปแบบการใช้

^Attribute^รูปแบบ^ตัวอย่าง^หมายเหตุ^

startstart = “เดือน วัน ปี ชั่วโมง:นาที:วินาที โค้ดเวลาประเทศ”start=“Aug 15 1988 08:35:00 GMT+0700”ใช้เพื่อแสดงวันที่เริ่มต้นของเหตุการณ์นั้น (หากไม่ระบุเวลาในส่วนของชั่วโมงจะแสดงเป็นตัวเลข 00:00:00)
endend=“เดือน วัน ปี ชั่วโมง:นาที:วินาที โค้ดเวลาประเทศ”end=“Aug 15 1988 08:35:00 GMT+0700”
titiletitle=“ข้อความเหตุการณ์ที่ต้องการให้แสดง”title=“Trip to Beijing”
linklink=“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); }); 
 } 



Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.