|
![]() |
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 – лаконичный конструктор многостраничных сайтов • TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений • HTTP – коротко о протоколе • OpenAPI – спецификация, визуализация, инструментарий • Camtasia Studio – видеоредактор с экспортом в интерактивный HTML5 проигрыватель • Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare • Что нужно знать об электронных платежах вебмастеру интернет-магазина • Индекс цитирования сайта – что это? • Как создать интерактивный кроссворд на сайте? |
Новости
|
|
![]() |
|
![]() |
|