Trace:
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}} | ||
