Первая страница

TimelineJS

интерактивная хронология
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

О библиотеке

TimelineJS - понятная и функциональная Javascript библиотека для создания интерактивных хронологических лент в виде слайдера по временным событиям. На слайды можно добавлять текст, изображения, видео, аудио. Под слайдером располагается шкала времени, на которой флажками отмечены события как разовые, так и растянутые во времени. Такую презентацию можно легко выложить в интернете на любой странице. Библиотека бесплатная.

TimelineJS

Принципы

Как простой пользователь этой библиотеки постараюсь объяснить всё простым языком. Пользовательский контент в виде текстовок и общей композиции презентации может храниться в двух местах на выбор на выбор:

  1. В таблице Google Sheets. Пример проекта.
  2. В JSON формате в файле index.htm или другом. Пример проекта.

Конечно, вряд ли какой проект обойдется без изображений, тогда еще прибавляются пользовательские медиа-ресурсы.

В случае с Google Sheets вы создаете одну ссылку, в которой будет прописан id вашей таблицы. Ссылку можно открывать на всё окно браузера или в iframe.
В случае с JSON проект TimelineJS состоит из трех основных файлов:

  1. timeline.js - код библиотеки;
  2. timeline.css - оформление элементов интерфейса;
  3. index.htm - точка входа для браузера, в нем прописаны пути к js, css и контенту проекта в формате JSON.

Еще в проекте навигационные стрелки на слайде и иконки по-умолчанию на таймлайне исполнены посредством шрифта. Так вот, если вы ведете независимый образ жизни и хотите всё по своему проекту хранить локально, то надо еще эти шрифты (tl-icons в разных форматах) также сохранить локально и прописать к ним пути в timeline.css.

Любой разработчик может обратиться к библиотеке тремя способами:

  1. По одной ссылке, в которой будет прописан id вашей таблицы в Google Docs;
  2. По двум ссылкам на timeline.js и timeline.css, которые хранятся на CDN сервере проекта;
  3. По двум ссылкам на timeline.js и timeline.css, которые хранятся у вас локально.

Навигация по слайдам может осуществляться тремя способами:

  1. Кнопками-стрелками справа и слева экрана;
  2. Клавишами-стрелками на вашей клавиатуре;
  3. С помощью флажков на таймлайне.

Группировка событий

Это визуальное отделение флажков событий на таймлане по своим вертикальным уровням. Для этого нужно, например, в JSON, в разделе "events": [] прописать ключ group, значением которого будет та или иная группа. Например: "group":"Закупщик". В Google таблице также есть столбец Group. В результате таймлайн выглядеть будет примерно так:

TimelineJS / группы

Здесь "Закупщик" и "Поставщик" - это две группы. События на таймлайне распределены на двух уровнях, согласно тому, кто это событие осуществляет закупщик или поставщик.

Ресурсы

  • http://timeline.knightlab.com/ - центральный вход в проект TimelineJS, здесь вы получите исчерпывающую информацию о библиотеке, а конкретно на этой странице сможете быстро набросать свой проект, сохранить его и получить ссылку.
  • http://timeline.knightlab.com/docs/using-spreadsheets.html - расшифровка столбиков в Google таблице.
  • Шаблон Google таблицы, который вы можете скопировать на свой Google Disk и отредактировать под свой проект.
  • http://timeline.knightlab.com/docs/json-format.html - элементы JSON, которые отвечают за данные слайдов и таймлайна. При создании первого своего проекта я упорно сидел на этой странице.
  • http://timeline.knightlab.com/docs/options.html - опции, с которыми может запускаться timeline.js, их прописывают в скрипте js в index.htm. Эти опции действуют на весь проект.
  • http://timeline.knightlab.com/docs/overriding-styles.html - классы стилей, которые перекроют timeline.css, если вы их пропишите в другом месте, например, в том же index.htm. Для большинства таких перекрытий надо добавлять !important.
  • Пример проекта с Google таблицей, который я сделал просто для быстрого теста. Вы можете открыть источник индексного файла и посмотреть структуру ссылки на таблицу.
  • Пример проекта с JSON, который я сделал для презентации программы Cover Commander. Вы можете открыть источник индексного файла и посмотреть как устроен JSON.

Ещё статьи для вебмастеров, расширяющие технологический кругозор:
Памятка начинающему вебмастеру
Спецсимволы HTML - коды около 2000 дизайнерских иконок
Blumentals WeBuilder - удобнейший редактор кода с предпросмотром
WYSIWYG Web Builder - мощный визуальный конструктор сайтов
Pinegrow - визуальный редактор/конструктор сайтов
Lunacy - для макетирования интернет-страниц
Moodle - практика администратора СДО
MediaWiki - как использовать для ведения и хранения документации
MediaWiki - как скачивать Wiki-страницы в PDF
MediaWiki - как подсвечивать синтаксис программного кода в
SVG - как сделать анимацию линии (имитацию рисования)
HTTP - коротко о протоколе
OpenAPI - спецификация, визуализация, инструментарий
Camtasia Studio = видеоредактор + видеограббер
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Индекс цитирования сайта - что это?
Новости
От рекламы не скрыться
Объявление Молодому дизайнеру книга
Как стать дизайнером с нуля
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь