Пока идёт битва клонов — продолжаю воплощать свои старые идеи, которые ранее были частично реализованы, но не доведены до релиза из-за отсутствия времени и ресурсов. Ценность идей ниже не стала, но зато сейчас появилась возможность их реализации с меньшими затратами, что позволяет поделиться реализацией и сделать её доступной для всех.
Сегодня хочу представить открытый редактор хронологий в виде одного HTML-файла. Он позволяет отображать события и периоды на временной шкале, добавлять картинки или галереи, описания, ссылки. С его помощью можно создавать как хронологию личной жизни, так и хронологию исторических событий.
Заодно и несколько готовых хронологий для примера: «История языков программирования», «Великие научные открытия», «Освоение космоса», «Технологии повседневной жизни», «История авиации», «История оружия: от пороха до ядерной бомбы» и другие.
Попробовать редактор можно прямо в браузере — открыть PWA. Там же доступны готовые хронологии для изучения возможностей приложения.
Ключевые идеи
При разработке я ориентировался на несколько ключевых принципов:
Визуализация событий
Отображать последовательность событий с привязкой к временной шкале, снабжать их картинками, предоставлять возможность настраивать визуальное отображение.
Открытый формат
Очень важный аспект — открытый формат. Это простой JSON и картинки в ZIP-архиве.
Понятный масштаб
Один из важных аспектов — масштаб. 1 пиксель — это день, неделя, месяц, квартал, год, десятилетие или век. Для разных ракурсов удобен свой масштаб. Для личной жизни чаще всего удобен масштаб «1 пиксель — 1 день». Очень наглядно и понятно. Прожил день — добавился 1 пиксель к хронологии.
Редактирование
Но важно не просто отображать, а также редактировать, создавать хронологии с нуля. Перетаскивание карточек, изменение цветов, размеров и оформления…
Создание хронологий с помощью LLM
Открытый формат позволяет делегировать первоначальное создание хронологии LLM-кам, а доведение до ума (перемещение блоков, изменение цветов и пр.) — выполнять уже в редакторе.
Экспорт хронологии в самостоятельный HTML-файл
Можно не просто создать хронологию для себя, но и экспортировать её в самостоятельный HTML-файл, который другой человек откроет в браузере даже без установленного редактора. В самой хронологии можно указать авторство и контакты для связи с автором — вся эта информация будет сохранена при экспорте.
Это позволяет, например, публиковать исторические хронологии на собственном сайте или передавать их как обычные файлы.
Все приложение - один HTML-файл, полностью автономный
Ещё раз воспою оду приложениям в единственном HTML-файле:
Редактор работает без интернета, сервера и регистрации.
Можно скачать один HTML-файл и пользоваться им локально.
Хронологии хранятся отдельно от приложения, в собственных файлах
.timeline.Нет необходимости отправлять личные данные на сервер.
PWA — альтернативный способ использования того же редактора.
Один HTML-файл — это полноценное приложение, а не просто страница с визуализацией. Скачайте его — и он с вами навсегда, независимо от дальнейшей судьбы проекта.
Как устроен формат .timeline
Формат открытый и документированный. Файл .timeline — обычный ZIP-архив, внутри которого JSON с описанием хронологии, изображения и, при необходимости, музыка.
Структура простая:
timeline.json — события, периоды, даты, описания, настройки images/ — изображения thumbs/ — миниатюры изображений audio/ — фоновая музыка (необязательно)
В JSON предусмотрены три типа элементов: событие (event), период (period) и эпоха (era). Даты могут иметь разную точность — от конкретного дня до приблизительного года, включая даты до нашей эры.
Формат не привязан к редактору: хронологии можно создавать вручную, программно или с помощью LLM. Достаточно сформировать JSON и упаковать его вместе с изображениями в ZIP-архив.
Кому интересно
Исходный код: https://github.com/MarketKernel/timeline
В релизах можно скачать итоговый HTML-файл, который и есть само приложение.
PWA с примерами хронологий — можно открыть в любом современном браузере на любой ОС.
Примечание. Хронология открывается целиком на одной странице — для просмотра деталей нужно менять масштаб.
