TimelineJS는 어떤 사이트나 블로그에서도 작동하며, 아래에서 네 단계에 걸쳐 작성하는 방법을 알아본다.
1. 스프레드시트를 생성
제공되는 템플릿을 이용하여 새로운 구글 스프레드시트를 작성한다. 기존에 입력되어 있는 정보를 참고하여 적당히 날짜, 텍스트와 링크를 삭제하고 정보를 대체한다. 템플릿을 이용한 작업에 대한 자세한 내용은 이 문서 를 참고하자(아래 참고).
제공되는 구글 스프레드시트 템플릿을 이용하여 짭은 시간에 간단한 타임라인 만들기 및 기본 프로세스에 대하여 설명한다. 템플릿의 링크로 이동하여 이 템플릿 사용 버튼을 이용하면 자신의 구글 계정에 스프레드시트의 템플릿이 복사되어 지며, 이를 이용해 아래의 작업들을 진행하게 된다.
날짜(date) 작업
처음 네 개의 스프레드시트의 열 A~D은 타임라인 항목의 날짜에 해당한다. 단순히 연도만 입력하거나, 월, 일, 이벤트 시간같은 자세한 세부사항 정보를 입력할 수 있다. 'title' 슬라이드를 제외하고 적어도 연도는 반드시 입력해야 된다(기원전 날짜를 입력하려면, -500처럼 음수부호를 이용한다).
종료 날짜를 추가할 수 있는 옵션 E~H을 가지고 있다. 마찬가지로 연도를 입력할 수 있고 원하는 만큼 상세한 정보를 입력할 수 있다. 종료 날짜들은 타임라인의 맨 아래 부분에 시간의 흐름(일명 시대)을 표시하는 기준이 된다. 만일 이벤트에 "종료 날짜(end date)"가 없다면 비워두면 된다(시작 날짜를 반복할 필요가 없음).
슬라이드에 보여지는 날짜들을 좀 더 유연하게 표현할 필요가 있다면 열 I에 표현될 날짜를 직접 지정하면 날짜를 표시하는 방법에 대한 TimelineJS의 어떤 결정들 보다 우선시된다. 실제 날짜를 알 수 없는 경우에, 도움이 될 수 있지만, TimelineJS의 다른 이벤트가 상대적으로 표시하는 방법을 알 수 있도록 직접 날짜를 지정해야 한다. 표시되는 날짜는 지정된 슬라이드에 사용할 수 있으며, 이 슬라이드로 이어질 "다음"과 "이전" 버튼의 라벨이 된다.
콘텐츠 추가
스프레드시트의 열 J와 K는 헤드라인(제목)과 타임라인의 각 슬라이드에 표시될 텍스트(내용)을 포함하고 있다.
미디어 추가(옵션)
TimelineJS는 트위터, 인스타그램, 플리커, 구글맵, 드롭박스, 도큐먼트클라우드, 위키피디아, Storify, iframe, 주요 비디오 사이트(유튜브, 비메오등)등에 대한 내장된 지원 기능을 통해 다양한 소스에서 미디어를 삽입할 수 있다. 추가할 수 있는 미디어타입에 대한 자세한 정보는 아래에서 따로 다룬다.
열 L~O은 슬라이드에 미디어를 추가할 수 있는 옵션이다. 미디어 열(L)에 표시하고픈 미디어의 링크(URL)을 입력한다. 다음 열(M)은 미디어의 원본 소스의 저자를 입력하는 곳이고, N 열은 짧은 자막(Caption)을 넣을 수 있다.
만일 TimelineJS가 원하는 미디어타입을 슬라이드에 지원하지 않는다면, 열(L)에 URL 대신에<iframe>을 이용할 수 있다. 또한, <blockquote> 태그도 입력할 수 있다.
미디어를 포함한 슬라이드에는 사용된 미디어타입의 작은 아이콘을 보여주는 마커가 표시된다. 원하는 경우, 열 O에 이미지의 URL을 입력하여 아이콘 대신에 썸네일을 표시 할 수 도 있다.
각 타임라인은 슬라이드를 소개하는 대표 슬라이드를 설정할 수 있는 옵션이 있다. 타입(Type)열 P에 첫번째로 슬라이드에 표기하고 싶은 것에 "title"을 입력함으로써 이를 설정할 수 있다. 설정된 슬라이드는 날자가 표시되지 않으며 "title"은 Type 열에 오직 하나만 설정되어야 한다.
슬라이드 구성
TimelineJS는 스프레드시트에 작성된 순서가 어떻든지 상관하지 않고, 자동적으로 슬라이드들의 시작 날짜에 따라 정렬되며, 대표 슬라이드를 항상 처음에 위치시킨다. 정확히 동일한 날짜에 시작하는 두 개의 슬라이드가 있다면, 스프레드시트에 처음 나타나는 행이 먼저 타임라인에 표시된다.
그룹 열(Q)를 사용하면, 그룹별로 슬라이드를 구성할 수 있으며(태그로 알려진), 원하는 값을 넣을 수 있다. 동일한 그룹의 이벤트들은 같은 행 또는 인접한 행에 배치되고, 그 이벤트를 포함하는 행의 왼쪽 가장자리에 라벨처럼 그룹 열에 입력된 텍스트를 표시한다. 원한다면, 그룹 열에서 값이 빈 슬라이드를 만들 수 있고 그룹들에 슬라이드들을 섞을수 있다.
TimelineJS는 손쉽게 슬라이드에 미디어를 추가할 수 있다. 타임라인의 새로운 버전은 기존의 미디어유형을 유지하고 몇 가지 새로운 미디어 유형을 추가한다.
Image
URL이 jpg, gif, png, jpeg 로 끝난다면, 그것은 이미지임을 알리는 태그의 소스로 사용된다. 게다가 확장 후 쿼리 문자열, 아마도 동적인 너비와 높이 값을 지정하는 경우에도 작동합니다(It should also work if there is a query string after the extension, perhaps specifying dynamic width and height values).
Google Maps 페이지(스트리트 뷰를 사용하지 않는다면, "Share-공유" 섹션에서 현재 embed URL을 필요로한다)의 URL을 사용하라. 좌표, 검색 결과들, 장소 마커와 방향들은 타임라인에서 잘 적용된다. TimelineJS는 로드맵, 하이브리드, 위성 및 지형 구글맵 뿐만 아니라, 방향, 장소 및 스트리트뷰 지도를 지원한다.
Google Plus
Google Plus 사진의 URL을 사용하라. 이는 사진을 선택하고 마우스 우클릭하여 이미지 주소 복사를 통해 얻을 수 있다.
