Differences

This shows you the differences between the selected revision and the current version of the page.


timeline:start 2009/02/20 09:42 timeline:start 2011/09/19 10:21 current
Line 2: Line 2:
MIT ได้พัฒนาเครื่องมือออนไลน์ชื่อ SIMILE โดยมีจุดเด่นที่ช่วยให้ได้ Timeline แสดงเหตุการณ์ต่างๆ แบบออนไลน์ได้ง่าย สะดวก โดยศึกษารายละเอียดเพิ่มเติมได้ที่ http://simile.mit.edu/timeline/ MIT ได้พัฒนาเครื่องมือออนไลน์ชื่อ SIMILE โดยมีจุดเด่นที่ช่วยให้ได้ Timeline แสดงเหตุการณ์ต่างๆ แบบออนไลน์ได้ง่าย สะดวก โดยศึกษารายละเอียดเพิ่มเติมได้ที่ http://simile.mit.edu/timeline/
 +
 +Timeline เป็นการแสดงลำดับเหตุการณ์ที่เกิดขึ้นในช่วงลำดับเวลา โดยมีหัวข้อเรื่องราว และช่วงเวลาที่น่าสนใจ เพื่อให้ง่ายต่อการศึกษาข้อมูล ไทม์ไลน์มักจะเขียนหัวข้อใจความสำคัญๆสั้นๆเท่านั้น ไม่นิยมใส่ข้อมูลหรือบทความในรายละเอียดมากนัก
 +
 +===== ตัวอย่าง timeline =====
 +
 +<html><iframe src ="http://stks.or.th/timeline/timeline-tiac.html" width="100%" height="300"></iframe>
 +</html>
 +
 +===== การสร้าง Timeline =====
การสร้าง Timeline ด้วย SIMILE ทำได้โดย การสร้าง Timeline ด้วย SIMILE ทำได้โดย
Line 31: Line 40:
  </event>   </event>
  </data>   </data>
 +
 +==== แอททริบิวต์ (Attribute) เพิ่มเติม ====
 +
 +=== รูปแบบการใช้ ===
 +^Attribute^รูปแบบ^ตัวอย่าง^หมายเหตุ^
 +|start|start = "เดือน วัน ปี ชั่วโมง:นาที:วินาที โค้ดเวลาประเทศ"|start="Aug 15 1988 08:35:00 GMT+0700"|ใช้เพื่อแสดงวันที่เริ่มต้นของเหตุการณ์นั้น (หากไม่ระบุเวลาในส่วนของชั่วโมงจะแสดงเป็นตัวเลข 00:00:00)|
 +|end|end="เดือน วัน ปี ชั่วโมง:นาที:วินาที โค้ดเวลาประเทศ"|end="Aug 15 1988 08:35:00 GMT+0700"| |
 +|titile|title="ข้อความเหตุการณ์ที่ต้องการให้แสดง"|title="Trip to Beijing"| |
 +|link|link="url ที่ต้องการให้คลิกลิงก์ไปได้"|link="http://travel.yahoo.com/"| |
 +|image|image="url ที่เก็บไฟล์ภาพ"|image= "img-sci/nstda-logo.jpg"  หรือ image="http://www.nstda.or.th/logo.jpg"| |
 +
Line 87: Line 107:
ทั้งนี้คำสั่งที่จำเป็น ทั้งนี้คำสั่งที่จำเป็น
 +
 +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); });
 +  }
 +
 +----
 +
 +**ผู้เขียน**
 +  - บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
 +  - บุญเกียรติ เจตจำนงนุช เจ้าหน้าที่ระบบคอมพิวเตอร์ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
 +
 +
 +**แหล่งข้อมูล**
 +
 +  * http://www.simile-widgets.org/timeline/
 +{{tag>timeline}}

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