|
![]() |
TimelineJSинтерактивная хронология |
|
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы |
О библиотекеTimelineJS - понятная и функциональная Javascript библиотека для создания интерактивных хронологических лент в виде слайдера по временным событиям. На слайды можно добавлять текст, изображения, видео, аудио. Под слайдером располагается шкала времени, на которой флажками отмечены события как разовые, так и растянутые во времени. Такую презентацию можно легко выложить в интернете на любой странице. Библиотека бесплатная. ![]() ПринципыКак простой пользователь этой библиотеки постараюсь объяснить всё простым языком. Пользовательский контент в виде текстовок и общей композиции презентации может храниться в двух местах на выбор на выбор:
Конечно, вряд ли какой проект обойдется без изображений, тогда еще прибавляются пользовательские медиа-ресурсы. В случае с Google Sheets вы создаете одну ссылку, в которой будет прописан id вашей таблицы. Ссылку можно открывать на всё окно браузера или в iframe.
Еще в проекте навигационные стрелки на слайде и иконки по-умолчанию на таймлайне исполнены посредством шрифта. Так вот, если вы ведете независимый образ жизни и хотите всё по своему проекту хранить локально, то надо еще эти шрифты (tl-icons в разных форматах) также сохранить локально и прописать к ним пути в timeline.css. Любой разработчик может обратиться к библиотеке тремя способами:
Навигация по слайдам может осуществляться тремя способами:
Группировка событийЭто визуальное отделение флажков событий на таймлане по своим вертикальным уровням. Для этого нужно, например, в JSON, в разделе "events": [] прописать ключ group, значением которого будет та или иная группа. Например: "group":"Закупщик". В Google таблице также есть столбец Group. В результате таймлайн выглядеть будет примерно так: ![]() Здесь "Закупщик" и "Поставщик" - это две группы. События на таймлайне распределены на двух уровнях, согласно тому, кто это событие осуществляет закупщик или поставщик. Ресурсы
Ещё статьи для вебмастеров, расширяющие технологический кругозор: • Памятка начинающему вебмастеру • Как работать с Flash в современное время • Спецсимволы HTML - коды около 2000 дизайнерских иконок • Blumentals WeBuilder - удобнейший редактор кода с предпросмотром • WYSIWYG Web Builder - мощный визуальный конструктор сайтов • RocketCake - лаконичный визуальный конструктор сайтов • Pinegrow - стильный визуальны конструктор сайтов • Lunacy - для макетирования интернет-страниц • Flip PDF - конвертор PDF документов в HTML5 приложение • Hi Slider - программа для создания продвинутых jQuery слайдеров • WOW Slider - программа для создания красивых HTML5 слайдеров • Amazing Slider - программа для создания HTML5 слайдшоу, галерей, альбомов • Scratch - визуальный язык программирования и редактор кода • Sozi - программа для создания стильных HTML5 презентаций с перелетами между слайдами • Stencyl - игровой движок для создания 2D-игр и публикации их в веб • Moodle - практика администратора СДО • MediaWiki - как использовать для ведения и хранения документации • MediaWiki - как скачивать Wiki-страницы в PDF • MediaWiki - как подсвечивать синтаксис программного кода • Nicepage - конструктор сайтов и тем для CMS • PowerPoint в HTML5 - обзор софта конвертации • SVG - как сделать анимацию линии (имитацию рисования) • TurboSite - лаконичный конструктор многостраничных сайтов • HTTP - коротко о протоколе • OpenAPI - спецификация, визуализация, инструментарий • Camtasia Studio = видеоредактор + видеограббер • Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare • Что нужно знать об электронных платежах вебмастеру интернет-магазина • Индекс цитирования сайта - что это? • Как создать интерактивный кроссворд на сайте? |
Новости
|
|
![]() |
|
![]() |
|