Генератор адресных табличек был разработан совместно с проектом «Дизайн-код города Курска» в соответствии с техническими требованиями Дизайн кода города Курска. В техническом задании были указаны нейтральные цветовые палитры для фона, историческое название улиц и читабельный шрифт. Генератор адресных табличек для города Курска был реализован в виде веб-приложения. Он позволяет создать pdf-документ с наименованием улицы города Курска и номером дома. Пользователь генератора может воспользоваться веб-приложения на любом устройстве, имеющем браузер и доступ в интернет.
Приложение представляет из себя HTML страницу.
При разработке генератора адресных табличек, были использованы бесплатные JavaScript библиотеки – jQuery, jsPDF, SheetJS js-xlsx, а также был подключен бесплатный онлайн-классификатор адресов России – КЛАДР.
Что было сделано
Т.к. это был групповой проект, мной были сделаны следующие элементы:
- Изменение размеры формы по мере ввода названия улицы или номера здания;
- Генерация PDF файла с названием улицы и номера здания.
Техническое задание
В качестве технического задания была дана страница с информацией о адресных табличках из книги «ДИЗАЙН-КОД ГОРОДА КУРСКА» и требование создания веб-страницы для ввода названия улицы и генерации соответствующей адресной таблички.
Никаких требований по используемым технологиям не предъявлялось. Также не было представлено подробных сведений по размерам элементов и отступам, используемых в табличках.
Полученная страница из книги «ДИЗАЙН-КОД ГОРОДА КУРСКА» для создания приложения:
О генерации адресных табличек
Одной из главных задач при разработке приложения, была реализация
сохранения табличек. Для их сохранения был выбран векторный формат и для этого идеально подошло использование PDF, т.к. он отображает содержимое без искажений, а также с ним поддерживают работу такие векторные редакторы как Adobe Illustrator и Affinity Designer.
Для сохранения табличек была использована библиотека jsPDF. При этом, пришлось дополнительно добавлять поддержку внешних кириллических шрифтов, выравнивание текста по центру и возможность добавлять векторные изображения.
Созданные таблички полностью готовы для печати.
Примеры адресных табличек, созданных с помощью генератора:
Исходный код проекта доступен на GitHub
Получить доступ можно по ссылке
Отмененная версия генератора
В рамках летней практики, руководитель дал задание на разработку генератора адресных указателей с совершенно другим дизайном, но, когда работа была закончена, но сообщили, что нужно его переделать для соответствия требованиям ещё не выпущенного - Дизайн кода города Курска.
Первоначальный дизайн:
