웹 라이브러리 소개

TimelineJS

 TimelineJS란?

시간의 흐름에 따른 사건들을 네비게이션 할 수 있게 도와주는 도구

홈페이지

http://timeline.verite.co/

미리보기

타임라인 보기

특징

  • google spreadsheet에서 작성된 데이터를 이용해서 타임라인을 만든다. 
  • json을 이용해서 타임라인을 만들수도 있다.
  • 무료, 오픈소스

데이터 소스

Timeline JS을 이용해서 타임라인을 만들기 위해서는 Timeline JS에 데이터를 입력해야 하는데 현재는 두가지 방법을 제공하고 있다. 아래를 참조하자.

Google Spreadsheet

구글 스프래드쉬트로 문서를 만들고 약속된 양식에 따라서 데이터를 입력하면 Timeline JS가 이 데이터를 분석해서 타임라인을 만들어준다. 데이터 형식은 아래와 같다. 

구글 스프래드쉬트를 이용하기 위해서는 문서를 공개로 해야하고, 메뉴 상에서 파일 > 웹에 게시를 통해서 만들어진 문서의 URL을 사용해야 한다. 
1. Start Date 필수 시작시간, 형식 : 월/일/년 시:분:초
2. End Date 선택 종료시간, 시작시간과 형식 같음
3. Headline 필수 제목
4. Text 옵션 본문 
5. Media 옵션 미디어, 아래의 서비스들을 삽입 할 수 있다.
  • youtube
  • vimeo
  • soundcloud
  • dailymotion
  • instagram
  • twit pic
  • twitter status
  • google plus status
  • wikipedia
  • image
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편에서 얻을 수 있다. 

 

참고

댓글

댓글 본문
  1. 최재욱
    뭔가가 궁금해서 검색해보면 항상 이고잉님 강의가 있네요 ㅋㅋ 덕분에 쉽게 쓸 수 있어서 너무 좋아요 정말 감사드립니다!
  2. 완전 좋네요.ㅎ
graphittie 자세히 보기