Создание novokosino.tk | Блог им. Catethysis

Создание novokosino.tk

novokosino.tk был первым моим большим проектом на node.js. Более того, сам javascript я тогда знал на довольно низком уровне, и тем более мало знал про модули node.js — однако разработка продолжается и сейчас, и проект потихоньку стал напоминать Франкенштейна, на котором можно наблюдать «пути становления». Параллельно в фоновом режиме идёт разработка новой версии, с более грамотным подходом к качеству кода и вообще архитектуре.

Инфраструктура и окружение

Всё работает на node.js, с nginx наружу. Смешно сказать, но даже отдача большинства файлов до сих пор лежит на плечах node.js — запрос, открытие/чтение файла, отдача содержимого с нужными заголовками… Этот подход уже был мной сто раз проклят, но пока оно остаётся в таком виде. Однако, сам node.js работает совершенно без нареканий и полностью меня устраивает.

Собственно база картинок

Конечно, база картинок — самое главное, что есть на сайте. Раньше она была организована вообще без БД — в SVG-файле были ссылки на картинки с номерами, и при нажатии на такую ссылку с сервера просто забирался файл «/photos/№_картинки.jpg». Когда количество фотографий превысило сотню, это тоже стало жутко напрягать, и в скором времени было переведено в базу данных. В SVG остался номер картинки, однако он теперь указывает на номер записи в БД, а в записи содержится уже всё нужное — адреса картинки во всех трёх размерах, связанные объекты, дата/место создания и прочее. Также создана база зданий, в которой пока хранятся только их названия.

Интерактивная карта

Интерактивная карта является моей гордостью. Меня всегда привлекали векторные форматы, однако в то время я практически ничего не знал о SVG. Эта карта стала вообще первым опытом применения SVG — и надо сказать, очень успешно. Не нужно заводить активные области на img, либо как-то перехватывать нажатия с помощью яваскрипта — достаточно просто привязать js-обработчики ко всем объектам SVG. Правда, SVG-объекты пока не встраиваются автоматом в DOM (а тем более при автоматическом их создании), поэтому приходится вручную генерировать специальный SVG-DOM, однако это не так уж и сложно.

SVG поистине очень удобный формат. Сочетание удобства написания вручную (это просто XML), кроссбраузерности, скриптовых возможностей (интерактивность, динамическое добавление объектов, встроенная анимация) и малого размера, на мой взгляд, делают его приоритетным для создания подобных карт, интересных и лёгких фонов, и прочих элементов оформления. Ну и конечно, если вы рисуете какой-то изначально векторный интерфейс (например, органы управления SCADA) — то SVG становится вашим первым выбором.

Сначала я правил SVG вручную, добавляя в него всё новые и новые ссылки на фотографии. Но опять же, после добавления двухсотой фотографии был сделан скрипт, динамически добавляющий все эти объекты, получая их координаты из БД.

Ссылка на основную публикацию
Optimized with PageSpeed Ninja