Какие есть программы/инструменты для создания веб каталога запчастей?

Question

[Faksi]

Работаю в подборе запчастей и есть каталоги производителя в pdf и эксель формате. Так же раньше увлекался программированием. Хочется перенести эти каталоги в веб формат. Конечно можно повырезать картинки и сбоку вывести список запчастей. Но хочется больше интерактивности. Например хотя бы как тут: Ссылка на страницу каталога

скрин

Так как давно не программирую, то не знаю в какую сторону смотреть. Хочу сделать сугубо для саморазвития. Возможно есть готовые программы по типу автокад, но для веба. В веб каталогах просто поверх картинки напичканы DIVы с позиционированием относительно картинки. Но неужели это все вручную делали? (меня не пугает это, но все же). Да и как-то хочется посовременнее сделать. Может посмотреть в сторону канвас или карты изображений?
Разжевывать не нужно, сам хочу научиться. Но хотел бы у более опытных людей узнать в какую сторону смотреть и какие инструменты больше подходят под решения задачи. Сори за тонну текста.
Резюмирую:

1. Есть ли готовые решения данной задачи для веба?
   
2. Если писать с нуля, то в сторону каких инструментов смотреть? И как бы вы решали с этими инструментами задачу (поверхностно опишите)
   

Comments

[Everything_is_bad]

Подобные проекты делают целые команды профи, это не для "хочу научиться"

[Refguser]

Начни с освоения поисковых систем.

[toffi]

Может, я неточно понял, но думаю, к полосам, которые в оригинале на изображении, можно подставить небольшие цифры в редакторе изображений, а под изображением описывать на HTML-странице каждую цифру. Это на мобильных устройствах будет удобно. Но есть другой вариант: https://doka.guide/html/area/#kratko. Попробуйте этот тег. Тогда, чтобы при нажатии на цифры, которые у вас на изображении, прикрепить якорную ссылку, отправляющую к описанию на странице того, что этот набор цифр означает.

[alexalexes]

Возможно есть готовые программы по типу автокад, но для веба. В веб каталогах просто поверх картинки напичканы DIVы с позиционированием относительно картинки. Но неужели это все вручную делали? (меня не пугает это, но все же). Да и как-то хочется посовременнее сделать.

Тут в первую очередь нужно думать не как нарисовать данный информационный блок, а как хранить его в базе данных:
1) Целиком html-фрагментом - самый примитивный способ, но не гибкий, вдруг вам нужно будет убирать ссылки, если у вас товар отсутствует в базе остатков товара.
2) Путь к файлу картинки, метаданные картинки (формат, размер w_h, позиционирование) + информационные метки (тип, метаданные метки, позиционирование) - вот тут уже интереснее, можно отключать или изменять метки по состоянию базы остатков товара.
Чтобы отобразить данный информационный элемент - нужно всего лишь написать template в вашем frontend фремйворке, используя данные из 1 или 2.
Чтобы создать такой элемент - пишите свой редактор под этот ресурс или берете нужные плагины в уже конкретной CMS/CRM системы, смотря какой там масштаб автоматизации в фирме.

Но неужели это все вручную делали? (меня не пугает это, но все же)

Когда у вас написан или создан в системе редактор под эту узкую задачу, то нанимается или подзывается уже нанятый специально обученный человек - менеджер контента, который заколачивает все 100500 позиций. Сейчас уж не нанимается - пишется промт в AI и через API вашего инструмента в CMS/CRM загоняются эти чертежи из pdf или чего вы там предложите в качестве сырцов.

[Adamos]

alexalexes, и уже потом нанимается специально обученный разгребать за AI человек ;)

[alexalexes]

Adamos, все равно будет человек, который отвечает за импорт/экспорт данных, а на чем базируется этот механизм - уже не важно.

[Faksi]

Refguser, бесполезные комментарии можно и не писать. Если у вас нет опыта или совета, то лучше проходите мимо.

[Faksi]

alexalexes, спасибо за помощь. Но видимо я плохо описал свою ситуацию. Каталог - это не товары и контролировать остатки мне не нужно. Это набор схем/чертежей с их составом запчастей/описанием. Бд это хорошо, но из-за размера можно пренебречь. Просто хочу этот набор схем перенести в веб, как в ссылке или картинке. Но хочется использовать современные инструменты.

[Faksi]

toffi, вы все правильно поняли. Тоже в процессе поиска нашел этот тег. Вот пока только ваш способ и вертится на уме. Перелопатить картинки и с помощью маппинга задать кликабельные координаты.

[Faksi]

Everything_is_bad, что бы загрузить картинку на страницу, и с помощью js/css провести манипуляции, для этого нужна команда спецов?
Я же не говорю создать продукт. Просто хочу визуализировать каталог для себя и попутно научиться js/css.

[alexalexes]

Faksi берете vue или react и визуализируете. Попутно будете решать, как ему подсунуть те или иные данные для шаблонов.
На первых порах у вас будут заготовлены JSON-ы и статичные файлы на диске, а потом поймете, что вам нужно освоить СУБД.

[sergski]

На приведенном вами примере установлена веб-версия каталога от этой компании.

[Refguser]

Faksi, если тебе кажется что коммент бесполезный - это просто говорит о неспособности его понять.
А желание ТАК прокоментровать добрый совет очередной раз это подтверждает.
Но боле не буду метать бисер. Удачи.

[Faksi]

alexalexes, спасибо

[Faksi]

Refguser, я задал два конкретных вопроса. Вы дали бесполезный ответ. Если бы вы нашли ответы на мои вопросы в поисковике, прикрепили их и потом бы прокомментировали мою неспособность к поиску. Я тогда бы согласился с Вами. А так, пустословный и необоснованный комментарий от Вас, засоряющий тему.

[Faksi]

Refguser, кстати, половина Ваших вопросов гуглиться)

Answer 1

[Dmitry Bay]

Есть ли готовые решения данной задачи для веба?

Есть. Гуглите API схема каталогов запчастей. Была еще спец база обновляемая.

Если писать с нуля, то в сторону каких инструментов смотреть? И как бы вы решали с этими инструментами задачу (поверхностно опишите)

Апи, и смотреть где можно подукрасть базу. (складчина, торренты)
Если заниматься вопросом честно - то будет дороговато - вот примеры

гуглится первой страницей.

5 000
запросов/мес
133 590 ₽
/мес

Comments

[Faksi]

Каталог есть только в pdf и excel, api не помогут. Интересен способ создания такого каталога. Для этого и спрашиваю какими инструментами лучше это делать и в общих чертах как. Как то же разработчики выкладывают это в веб.

[Dmitry Bay]

Faksi, вам именно фронт? то SVG. Наводите на запчасть по вашему списку и рисунку мышкой - и подсвечиваете.

[Faksi]

Dmitry Bay, да. Ну svg вряд ли получится сделать автоматически. Спасибо за помощь. Пока для начала сделаю просто картинку и вставлю в нее, маппингом, ссылки на отдельные запчасти в списке, которые будут при наведении подсвечиваться.

Answer 2

[d'Ivan]

есть каталоги производителя в pdf и эксель формате

Если упрощенно, то можно так:
1. Нужно научиться извлекать нужные данные из этих форматов (парсинг), поняв какие именно данные нужны.
2. Спроектировать БД исходя из потребностей показа элементов.
3. Научиться отображать конкретную страницу с наименованием и характеристиками детали. Оставить графику на потом.
4. Научиться выводить список - индекс.
Далее - усложнять.
Дополнительно - погуглить про ETL.

Comments

[Faksi]

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

[d'Ivan]

Faksi, на общий вопрос я уже дал ответ.
А касательно оформления на фронтенде - стоит задать отдельный вопрос, предварительно сформулировав его, исходя из собственных попыток.

Answer 3

[Михаил Лялин]

"есть каталоги производителя" = ищите их в формате баз данных или конвентируйте сами
потом к данной БД делаете веб-оболочек и нет проблем

Comments

[Faksi]

Суть в оболочке. Картинки я вырежу из пдф, но как оформить во фронтенде это все. Я писал про использование канвас или карты изображений. Вот и думал что подскажете в какую сторону смотреть. К сожалению это я неправильно изъяснил свой вопрос.