Timeline js
Download as PPTX, PDF1 like2,738 views
This document provides instructions for creating and embedding timelines using Timeline.JS, an open-source multimedia timeline tool. It explains how to get started with a Google spreadsheet template, add dates, content, media and customize the timeline. Directions are given for publishing the timeline on the web and embedding it in WordPress or PowerPoint. The process involves copying embed code from the published timeline and pasting it into the other platforms.
![9. Now, right-click on the "PowerPnt.exe"
file and select "Modify...". A window will pop
up where you can select either a decimal or
hexadecimal base. The FAQ page for
LiveWeb gives several decimal and
hexadecimal values that can be used to
specify different browsers. I used the
hexadecimal value of " 0x2AF8" as described
in the Timeline FAQ to use Internet Explorer
11.0. [Make sure you have IE 10 or higher
and then select the appropriate
decimal/Hex value.] Click "OK", and you're
done!
How To Embed
TimelineJS into
Power Point (Part 4):](https://image.slidesharecdn.com/sy7eyw9orysrsh3y8mp3-signature-c9873c3564b4a1302b151add571c49b01513383fe84fa19e0cdccac857d82d43-poli-151125191824-lva1-app6892/85/Timeline-js-22-320.jpg)
Timeline js
- 1. Intro to Temporal Pattern Finding with Timeline.JS Ashley Sanders, Ph.D. Digital Scholarship Librarian Claremont Colleges Library
- 2. What is Timeline.JS? Open-source multimedia timeline tool
- 3. Why use Timeline.JS? Easy: Based on Google Sheets Customizable with more programming knowledge Add content from a variety of sources, including: Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, DocumentCloud and more! Free & open-source Generates fully responsive embed code for easy embedding Available in 40 different languages
- 4. 1.Get Spreadsheet Template a. Navigate to https://timeline.knightlab.com/ b. Scroll down to “Make a Timeline” c. Click “Get the Spreadsheet Template” d. Click “Use this template”
- 5. 2. Prepare Copy of Template a. You will see sample data in the template. Go ahead and clear the contents underneath the headings, but DO NOT delete the headings or any columns. (The application will not run if any headings or columns are missing.) b. You may keep the example in blue if you’d like while you work. Just remember to delete it when you’re ready to view your timeline.
- 6. Identify data to add ● Include the most important information ○ Main events and significant events leading up to them ● Find media or use your own work to illustrate the events ○ Ensure work is public domain or available for noncommercial reuse ○ Provide media credits
- 7. Add data to your Google Spreadsheet
- 8. Dates You can enter just the year or you can include more information You MUST enter a year You may enter start and end dates for your event using column A-D for the start date and columns E-H as the end date BCE dates are entered as negative numbers Column I provides more flexibility and allows you specify the “display date”
- 9. Dates: Displaying Eras ❖In column (P), you can select “Era” from the dropdown to display the information in the row as a span of time on the “axis” area of the timeline. ➢ Each era is given a separate color, which is not currently customizable. ➢ Overlapping eras are not well-supported yet, but the Knight Lab is exploring the best way to depict this case.
- 10. Add Content Choose a story that can be told with a chronological and linear narrative Each event should contribute to your story in a logical way Use short headlines Add more description under “Text”
- 11. Add Media This is optional but will make your story more dynamic TimelineJS can pull in media and has built-in support for Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, major video sites (YouTube, Vimeo, etc.) and more. If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering <iframe> markup in the Media column (L) instead of a URL. You can also enter <blockquote> markup in column L.
- 12. Customize! ❖You can set the background of the slide to a specific color or an image. ➢ Enter a CSS hex color value, CSS named color, or the URL to an image in the Background column (R). ❖ You can show a thumbnail of the media instead of the automatic media type marker. ➢ Add the URL of the image you'd like to use to column O. ❖In column (P), you can select “Title” from the dropdown to make that row the “title slide” to begin the timeline.
- 13. Organizing your content ❖Use the Group column (Q) to organize your slides. ➢ You can put any values you want in this column. ➢ Events with the same group will be put in the same row or adjacent rows. ➢ Timeline.JS will use the text from the Group column to label the left edge of the row containing events from each group. ➢ You can choose to group some events, but you may also leave the column blank for other events so they display automatically according to their start date. ➢ Group labels will be included on each slide representing an event from a specific group.
- 14. Publishing Your Timeline Go to the File Menu Select “Publish to the Web”
- 15. 1.Select Link to Publish 2. To keep your timeline up to date: Under “Published content & settings,” select “Automatically republish when changes are made” 3. Publish
- 16. To generate your timeline: 1.Copy the link code 2.Paste link code in the box next to “Google Spreadsheet URL” 3.Scroll down to check the preview
- 18. 1. Install iframe plugin for WordPress 2. Activate iframe plugin 3. Add a new page or post 4. Select “Text” rather than “Visual” in the tabs on the top right corner of text box. 5. Copy and paste the embed code from step 4 of TimelineJS To embed TimelineJS into Wordpress:
- 19. How To Embed TimelineJS into Power Point (Part 1): 1. Enable Macros in PowerPoint: File > Options> Trust Center > Trust Center Settings > Macro Settings > Enable all macros. Click “OK” 2. Ensure your Add-ins are enabled: File > Options> Trust Center > Trust Center Settings > Add-ins. 3. Make sure all checkboxes are unchecked. 4. Download and install Live Web for PowerPoint add-in.
- 20. WINDOWS: (I’ll need to test this on my Mac. Email me if you want instructions for Macs, and I’ll send them along as soon as I can.) 4. Click on the "Start" button and type "regedit" in the search box and hit the "Enter" key. 5. A "Registry Editor" window will appear with a hierarchy view of the computer files shown in the left pane and the files shown in the right pane. 6. You'll need to navigate through the left pane to the following directory: HKEY_CURRENT_USERSoftwareMicrosoftInternetExplorerMainFeatureCo ntrolFEATURE_BROWSER_EMULATION How To Embed TimelineJS into Power Point (Part 2):
- 21. 7. If you don't have the "FEATURE_BROWSER_EMULATION" directory, don't worry, you can create it. Create the directory by right-clicking on the "FeatureControl" folder and select "New > Key". When the new folder appears, just rename it to "FEATURE_BROWSER_EMULATION". 8. Click on the "FEATURE_BROWSER_EMULATION" folder. You'll probably have to create a new file that tells Powerpoint to use a different browser. Right-click in the right pane and select "New > DWORD (32-bit) Value" to create a new Registry Key file. Change the name of the new file to "PowerPnt.exe". How To Embed TimelineJS into Power Point (Part 3):
- 22. 9. Now, right-click on the "PowerPnt.exe" file and select "Modify...". A window will pop up where you can select either a decimal or hexadecimal base. The FAQ page for LiveWeb gives several decimal and hexadecimal values that can be used to specify different browsers. I used the hexadecimal value of " 0x2AF8" as described in the Timeline FAQ to use Internet Explorer 11.0. [Make sure you have IE 10 or higher and then select the appropriate decimal/Hex value.] Click "OK", and you're done! How To Embed TimelineJS into Power Point (Part 4):
- 23. 10. Open Power Point where you want to embed TimelineJS 11. Click Add-Ins Tab and then “Web Pages” 12. In the Live Web Wizard, copy the embed code from Step 4 on timeline.knightlab.com (after you’ve done everything in above slides) and paste it into the box next to the Add button. 13. Delete everything before // and type http: before // 14. Delete everything after frameborder=’0’, so your URL should look like this: http://cdn.knightlab.com/libs/timeline3/latest/embed/ ...height=650' width='100%' height='650' How To Embed TimelineJS into Power Point (Part 5):
- 24. How To Embed TimelineJS into Power Point (Final): You’re DONE! NOTE: Your slide will look blank until you play the slideshow, so you may want to add a comment in the Notes field about what should appear.