Расскажу про report.fondpr.ru, публичный годовой отчёт благотворительного фонда помощи детям. Сайт небольшой, но в нём несколько решений, которые пригодятся в любом проекте, где есть данные и заказчик без технического опыта.
Задача. Фонду нужен отчёт, который открывается по ссылке, а не PDF на пятьдесят страниц: цифры за год, программы, куда ушли деньги, где живут подопечные. И чтобы сотрудники сами правили тексты и фото, а не писали разработчику по каждой мелочи.
Статика плюс один файл правок. Страница по сути статичная: готовый HTML-шаблон, поверх которого небольшой скрипт подставляет правки. Нет тяжёлой CMS и базы данных, поэтому сайт открывается быстро, ломаться там почти нечему, а хостинг обычный.
Карта регионов из адресов. Подопечные фонда живут по всей стране, и лучше всего это показывает карта России. Адреса превращаются в названия регионов по открытому справочнику геоназваний, границы берутся из открытых данных. Москва с областью и Петербург с Ленинградской областью объединены, Крым с Севастополем тоже. На сайт попадают только регионы и количество детей, сами адреса нигде не публикуются. Есть вкладки «2025 год» и «Все годы». Программы фонда, которые не относятся к конкретному ребёнку, в подсчёт не входят, иначе цифры получились бы завышенными.
Цифры и финансы. Карточки с ключевыми показателями: сколько единиц техники передано, скольким детям помогли, сколько направлено на лекарства. Числа плавно набегают при открытии страницы. Расходы показаны кольцевыми диаграммами, которые рисует сам сайт, без внешних библиотек. Я делал и вариант с объёмными круговыми, но в итоге мы вернули простые кольца: они читаются честнее. Объёмный вариант я сохранил на случай, если он понадобится.
Живые фотографии. Для карточек программ я взял настоящие снимки из официального PDF-отчёта, достав встроенные изображения прямо из файла. Живая фотография вызывает больше доверия, чем стоковая картинка, а для фонда доверие главное.
Редактор прямо на странице. Команда заходит в закрытый раздел по паролю, кликает по тексту или фото на самой странице, меняет и нажимает «Сохранить». Правки лежат в одном файле поверх шаблона, загруженные фото автоматически уменьшаются до разумного размера, а последние шестьдесят резервных копий позволяют откатить любое изменение. Числа-счётчики, диаграммы и карту через редактор не правят: они строятся из данных, и сломать их случайно не получится.
Что пошло не так. Однажды я вернул старые диаграммы только на сервере и не обновил локальную копию, а следующее обновление случайно вернуло объёмные графики. Теперь правило простое: после любой правки прямо на сервере сначала скачиваю актуальный файл и только потом работаю с локальной копией. Мелочь, но из таких мелочей и рождаются неприятные сюрпризы.
Итог. Одностраничный сайт, но с картой из данных, живыми цифрами и редактором, которым управляет не разработчик. Если вам нужен отчёт, страница с данными или похожий сайт, разберём задачу: kovalev.trade/websites
#сайтподключ #разработкасайта #благотворительность #отчёт #визуализацияданных