Я решил интересную задачу — создать визуальный редактор-конфигуратор для windows. Поделюсь подробностями процесса разработки с вами, коллеги.
УПД.
Добавлены скриншоты.
УПД2. Речь идет об автономных окнах, застекленных, деревянных или пластиковых – через которые из дома выходят на улицу.
Спасибо за ответы! Бизнес-требования Я беру интервью у клиента.
1. Это модуль для сайта, который должен работать в любых популярных случаях.
2. В режиме редактирования программа должна позволять указывать количество и расположение проемов в окнах.
3. В режиме редактирования программа должна позволять указать способ открытия проемов в окнах, пять вариантов: без открывания, влево, вправо, влево и наклон, вправо и наклон.
4. В режиме отображения программа должна отображать конфигурацию окна с картинкой в произвольном масштабе.
5. Нет необходимости хранить и работать с информацией о размерах, пропорциях, цвете и других характеристиках окна.
Картинки должны быть красочными и понятными.
ЕСКД в данном случае не имеет значения.
6. Он не должен быть глючным или тупым, он должен быть кроссбраузерным, должен работать и в браузерах планшетных ПК, и на смартфонах и т.д. На этом этапе вместе с заказчиком мы просматриваем интерфейс аналогичных продуктов с помощью поиска по картинкам Google. Путем поиска по сайтам находим продавцов окон, посещаем с десяток сайтов, чтобы посмотреть интерфейс онлайн-конфигураторов и общий ассортимент конфигураций окон.
Мы обсуждаем, что нам следует иметь и чего нам не следует иметь.
ТУ и ТК Теперь мы дополняем бизнес-требования техническими заданиями, чтобы в конечном итоге сформулировать техническое задание.
1. На основании требования произвольного масштабирования возникает понимание, что графика должна быть векторной.
Кроссбраузерное решение, которое подойдет, — это холст HTML5. 2. Очевидно, что должно быть два режима: режим редактирования и режим отображения.
3. В режиме редактирования данные должны сохраняться с типом ввода=скрытый.
Я не буду вносить изменения в CMS — зачем мне лишняя головная боль? Я просто добавлю по одному полю в формы добавления и редактирования, в СУБД и в соответствующие модели (у меня это фактически происходит одним действием, если этого не сделать, возможно, имеет смысл пересмотреть структуру программы ).
4. В режиме редактирования ранее созданная визуальная конфигурация окна должна быть восстановлена по расположенным данным и автоматически введена в поле тип ввода=скрытый.
5. В режиме отображения CMS отдаст данные как свойство какого-то div, и моя программа должна: а) обнаружить эти данные, б) нарисовать на их основе окно.
В данном случае я не буду уточнять, а пойду по пути наименьшего сопротивления.
Значительная часть видения решения уже существует, поэтому я приступлю к реализации немедленно.
Разработка Суровая реальность программирования: я не хочу усложнять себе жизнь, и поэтому изначально создаю масштабируемые и поддерживаемые решения.
Вот почему DRY, поэтому абстракции и слои — сразу, по умолчанию.
Когда я просматривала виды окон, то нарисовала в блокноте карандашом небольшой каталог, чтобы понять, что нужно нарисовать.
Делая эти скетчи, я понял, что не хочу делать это в CSS (наверное, зря), и продолжу работать с .
Собираюсь искать библиотеку для работы с холстом.
я нахожу Calebevans.me/projects/jcanvas , я быстро просматриваю документацию, оцениваю качество исходников и понимаю, что это то, что мне сейчас нужно.
Я понимаю, что рисование будет функцией самого низкого уровня.
И вообще, мне давно хотелось рисовать.
Пробую несколько функций по документации, примеры нахожу в сети в песочнице.
Все работает, меня все устраивает. Давайте начнем рисовать Давайте создадим базовую функцию для рисования окна.
Теги: #веб-разработка #jQuery #JavaScript #canvas #разработка веб-сайтов #jQueryfunction windows_init(selector) {
-
Логотип Google На День Рождения!
19 Oct, 24 -
Собираем Аналог Mac Mini За 333 Бакса.
19 Oct, 24 -
Робот, Покоривший Гранд-Каньон
19 Oct, 24
