TimelineJS란?
시간의 흐름에 따른 사건들을 네비게이션 할 수 있게 도와주는 도구
홈페이지
미리보기
특징
- google spreadsheet에서 작성된 데이터를 이용해서 타임라인을 만든다.
- json을 이용해서 타임라인을 만들수도 있다.
- 무료, 오픈소스
데이터 소스
Timeline JS을 이용해서 타임라인을 만들기 위해서는 Timeline JS에 데이터를 입력해야 하는데 현재는 두가지 방법을 제공하고 있다. 아래를 참조하자.
Google Spreadsheet
구글 스프래드쉬트로 문서를 만들고 약속된 양식에 따라서 데이터를 입력하면 Timeline JS가 이 데이터를 분석해서 타임라인을 만들어준다. 데이터 형식은 아래와 같다.
구글 스프래드쉬트를 이용하기 위해서는 문서를 공개로 해야하고, 메뉴 상에서 파일 > 웹에 게시를 통해서 만들어진 문서의 URL을 사용해야 한다.
| 1. Start Date | 필수 | 시작시간, 형식 : 월/일/년 시:분:초 |
| 2. End Date | 선택 | 종료시간, 시작시간과 형식 같음 |
| 3. Headline | 필수 | 제목 |
| 4. Text | 옵션 | 본문 |
| 5. Media | 옵션 | 미디어, 아래의 서비스들을 삽입 할 수 있다.
|
| 6. Media Credit | 옵션 | 미디어에 대한 출처표시 |
| 7. Media Caption | 옵션 | 미디어에 대한 자막표시 |
| Media Thumbnail | 옵션 | |
| Type | 옵션 | |
| 8. Tag | 옵션 | 항목에 대한 분류로 총 6개까지 표시된다. |
위의 표에서 붉은색 숫자는 아래 이미지에 해당한다.
JSON
Timeline JS는 프로그래밍적으로 제어하기 위해서는 소스코드를 다운받아서 이것을 프로그래밍적으로 제어해야 한다. 이것을 위해서는 Timeline JS의 소스코드를 다운로드 받아야 한다. 아래 링크를 방문해보자.
https://github.com/VeriteCo/TimelineJS
프로그래밍적으로 Timeline JS를 제어하기 위해서는 HTML, CSS, JavaScript에 대한 기본적인 지식과 JSON이라는 데이터 형식을 알아야 한다. 이에 대한 지식은 생활코딩 웹서비스 만들기 편을 통해서 얻을 수 있다. 이것을 참고 한다.
JSON에 대한 기본지식은 생활코딩 자바스크립트 수업 중 JSON편에서 얻을 수 있다.
