Кейс · Типовое решение

Таблицы событий: инфокиоск

Таблицы событий — решение ITLabs: инфокиоск, в котором материалы показываются таблицами.

Информационный киоск под задачу

Таблица «Природа»: цветные строки, ячейки с фото и лента времени по периодам

Коротко о проекте

Таблицы событий — решение ITLabs. Инфокиоск, в котором материалы показываются таблицами. Посетитель листает таблицу и открывает вложенные, а редактор правит ячейки прямо на терминале, без отдельной админки на сервере. Разделы и медиа заказчик меняет сам через админ-панель, без разработчика. В поиске такое решение называют и по-другому: инфокиоск, сенсорный киоск, информационный терминал.

Описание проекта

Как устроено решение

«Таблицы событий» — типовое решение ITLabs для материалов, которые сами ложатся в строки и столбцы: временные шкалы, сравнение эпох, расписания, перечни. Демо собрано на геологическом сюжете: строки называются «Происхождение горных пород из окрестности Афимьина» и «Расположение окрестности Афимьина во времена образования горных пород», а нижняя строка «Лента времени (лет назад)» ведёт по периодам от ордовика (488,3–443,7 млн лет) до антропогена. Каждая ячейка — карточка с фото, видео, текстом или документом, а переключатель внизу экрана меняет разделы «Природа» и «Социум».

Посетитель видит таблицу с цветными строками: слева заголовки строк, правее ячейки с миниатюрой и подписью. Большая таблица прокручивается и по горизонтали, и по вертикали, а полоса прокрутки лежит под ней. Нажатие на ячейку открывает окно с крупным фото и полным текстом. Сверху — цепочка перехода «Природа >…», красная кнопка «Выйти» и кнопка «Указать ссылку», а окно «Вложенность» показывает, в какие таблицы входит выбранная ячейка; звёздочкой отмечена главная таблица.

В режиме редактора ячейка открывается на странице «Редактирование ячейки». Слева выбор шаблона — «Текст», «Медиа», «Текст и медиа», «Таблица»; в центре название, блок «Медиа» с подсказкой по форматам (jpeg, png, mp4, mov, avi, webp, webm, gif) и поле текста; справа блок «Таблица» с кнопками «Удалить» и «Перейти» и блок «Файлы» (doc, docx, xls, xlsx, pdf). Выделенный фрагмент текста получает ссылку кнопкой «Создать ссылку», а «Сохранить» становится активной после правок.

Структуру раздела редактор собирает на странице «Главные таблицы»: счётчики «Колонки» и «Строки» с кнопками добавления, кнопка «Временная линия», у каждой строки — флажок, ручка перетаскивания и корзина, вместо названия подсказка «Укажите название». Значки в ячейках сразу показывают содержимое: текст, фото, видео, документ. Окно «Печать» даёт предпросмотр таблицы с ползунком масштаба, выбор книжной или альбомной ориентации, форматы A4, A5 и A6 и кнопку «Распечатать».

Что сделали

Как устроены таблицы событий

Материалы показываются таблицами: посетитель листает их и открывает вложенные, а редактор правит ячейки прямо на терминале — отдельная админка на сервере не нужна.

Что видит посетитель

Табличное представление данных на экране
Расписание событий и мероприятий
Вложенные таблицы — из ячейки открывается своя таблица со своими данными
Вложение в ячейке: документ открывается прямо на терминале

Режим редактора

Правка ячеек, добавление и удаление строк прямо на экране
Порядок строк меняется перетаскиванием, цвет строки выбирается палитрой
Шаблоны таблиц для быстрого заведения новых разделов
Предупреждение о несохранённых правках при выходе
Режимы посетителя и редактора разделены

Что ещё в решении

Переключатель разделов внизу экрана: «Природа» и «Социум»
Цепочка перехода и красная кнопка «Выйти» в шапке таблицы
Кнопка «Указать ссылку» в шапке и «Создать ссылку» в тексте ячейки
Окно «Вложенность» со списком таблиц, куда входит ячейка
Строка «Лента времени» с периодами и годами
Прокрутка большой таблицы по горизонтали и вертикали
Значки содержимого в ячейке: текст, фото, видео, документ
Шаблоны ячейки: «Текст», «Медиа», «Текст и медиа», «Таблица»
Загрузка медиа: jpeg, png, mp4, mov, avi, webp, webm, gif
Вложения-файлы: doc, docx, xls, xlsx, pdf
Счётчики «Колонки» и «Строки» на странице «Главные таблицы»
Кнопка «Временная линия» для добавления шкалы времени
Печать таблицы: масштаб, ориентация листа, A4, A5, A6
Подтверждение «Выйти из режима администратора?»
Экранная клавиатура по значку внизу экрана

Как выглядит интерфейс

Экраны решения

Редактирование ячейки: название, медиа, текст и выбор шаблона слева

Подтверждение выхода из режима администратора кнопками «Нет» и «Да»

Выделение фрагмента текста и кнопка «Создать ссылку» в редакторе ячейки

Ячейка открыта окном: крупное фото, полный текст и цепочка перехода сверху

Окно «Вложенность»: в каких таблицах лежит ячейка «Известняк»

Печать таблицы: предпросмотр типов ячеек — текст, фото, видео, документ

Печать при масштабе 20 %: вся страница таблицы в предпросмотре

Печать при масштабе 200 %: крупный предпросмотр строк таблицы

Пустая таблица нового раздела: счётчики колонок и строк, «Временная линия»

Заполненная таблица в режиме редактора: значки содержимого и ручки перемещения

Создание новой ячейки: шаблон «Текст» и поле для ввода

Вопросы и ответы

Частые вопросы о проекте

Что такое решение «Таблицы событий»?

Инфокиоск, в котором материалы показываются таблицами. Посетитель листает таблицу расписания событий и мероприятий и открывает вложенные, а редактор правит ячейки прямо на терминале.

Что значит «вложенные таблицы»?

Из ячейки открывается своя таблица со своими данными. Так один экран разворачивается в несколько уровней: от общего перечня событий к деталям конкретного, без отдельных разделов и меню.

Нужна ли отдельная админка на сервере?

Нет, режим редактора работает прямо на терминале: правка ячеек, добавление и удаление строк. Для площадки, где содержимое меняет дежурный сотрудник, это снимает необходимость в отдельном сервере.

Как редактор наводит порядок в таблице?

Строки переставляются перетаскиванием, цвет строки выбирается палитрой — расписание читается на расстоянии. Для новых разделов есть шаблоны таблиц, чтобы не собирать структуру заново.

Можно ли положить в таблицу документ?

Да, к ячейке прикрепляется вложение, и документ открывается прямо на экране терминала. Посетителю не приходится искать положение или программу мероприятия где-то ещё.

Не сотрёт ли редактор свои правки случайно?

При выходе появляется предупреждение о несохранённых изменениях, а режимы посетителя и редактора разделены. Гость не попадает в правку, а сотрудник не теряет внесённое из-за случайного касания.

Для каких материалов подходят «Таблицы событий»?

Для всего, что ложится в строки и столбцы: временных шкал, расписаний, сравнения эпох и перечней с богатым медиа. Строки и столбцы задают тему и период, а в ячейках лежат текст, фото, видео и документы.

Как узнать, в каких таблицах лежит ячейка?

Через окно «Вложенность»: оно перечисляет все таблицы, в которые входит выбранная ячейка, а звёздочкой отмечает главную. Так редактор видит, где ещё отобразится правка, прежде чем менять содержимое.

Можно ли распечатать таблицу с терминала?

Да: в окне «Печать» показывается предпросмотр, масштаб меняется ползунком, выбираются книжная или альбомная ориентация и формат A4, A5 или A6, после чего нажимается «Распечатать». Так раздел уходит на бумагу прямо с экрана.

Какие шаблоны ячеек есть в редакторе?

Четыре: «Текст», «Медиа», «Текст и медиа» и «Таблица». В блок «Медиа» загружаются фото и видео в форматах jpeg, png, webp, gif, mp4, mov, avi и webm, выделенный фрагмент текста превращается в ссылку кнопкой «Создать ссылку», а «Сохранить» становится активной после правок.

Похожие проекты