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

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.

Ещё обзоры для вебмастеров, расширяющие их технологический кругозор:
Памятка начинающему вебмастеру
Amazing Slider – программа для создания HTML5 слайдшоу, галерей, альбомов
Blumentals WeBuilder – удобнейший редактор кода с предпросмотром
Camtasia Studio – видеоредактор с экспортом в интерактивный HTML5 проигрыватель
GDevelop – игровой движок c редактором в вебе, на мобильных и ПК платформах
Google Web Designer – конструктор HTML5 баннеров и приложений
Flip PDF – конвертор PDF документов в HTML5 приложение
Hi Slider – программа для создания продвинутых jQuery слайдеров
Hippani Animator – удобная анимационная студия с экспортом в HTML, video, анимированный gif
Lunacy – для макетирования интернет-страниц
Moodle – практика администратора СДО
MediaWiki – как использовать для ведения и хранения документации
MediaWiki – как скачивать Wiki-страницы в PDF
MediaWiki – как подсвечивать синтаксис программного кода
Nicepage – конструктор сайтов и тем для CMS
Pinegrow – стильный визуальны конструктор сайтов
PowerPoint в HTML5 – обзор софта конвертации
RocketCake – лаконичный визуальный конструктор сайтов
Saola Animate – программа для быстрого и удобного создания анимации в HTML5
Scratch – визуальный язык программирования и редактор кода
Sozi – программа для создания стильных HTML5 презентаций с перелетами между слайдами
SVG – как сделать анимацию линии (имитацию рисования)
Tilda – самый удобный онлайновый конструктор сайтов, плюсы и минусы
TurboSite – лаконичный конструктор многостраничных сайтов
TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений
WOW Slider – программа для создания красивых HTML5 слайдеров
WYSIWYG Web Builder – мощный визуальный конструктор сайтов
Yonote – веб-сервис для организации базы знаний
HTTP – коротко о протоколе
OpenAPI – спецификация, визуализация, инструментарий
Визуально-блочные среды программирования и моделирования – обзор
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Как создать интерактивный кроссворд на сайте?
Как работать с Flash в современное время
Спецсимволы HTML – коды около 2000 дизайнерских иконок
Новости
От рекламы не скрыться
Объявление Молодому дизайнеру книга
Как стать дизайнером с нуля
Спонсориат
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь